@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&family=Prompt:wght@400;500;600;700&display=swap');

/* ════════════════════════════════════════
   TOKENS
════════════════════════════════════════ */
:root {
  --g900:#0d3321; --g800:#163d22; --g700:#1b4d2e;
  --g600:#2d6a4f; --g500:#40916c; --g400:#52b788;
  --g300:#74c69d; --g200:#b7e4c7; --g100:#d8f3dc;
  --g50 :#f0faf2; --g25 :#f7fcf8;

  --shadow-xs: 0 1px 2px rgba(13,51,33,.06);
  --shadow-sm: 0 1px 4px rgba(13,51,33,.08),0 0 0 1px rgba(13,51,33,.04);
  --shadow-md: 0 4px 16px rgba(13,51,33,.10),0 1px 4px rgba(13,51,33,.06);
  --shadow-lg: 0 8px 32px rgba(13,51,33,.12);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --fw-display:'Prompt','Noto Sans Thai',sans-serif;
  --fw-body:'Noto Sans Thai',sans-serif;

  --nav-h:52px;
  --content-max:1200px;
  --content-pad:clamp(16px,4vw,40px);
}

/* ════════════════════════════════════════
   RESET
════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fw-body);background:#f4f7f5;color:#1a2e1e;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
button{cursor:pointer;font-family:inherit;border:none;background:none}
ul{list-style:none}

/* ════════════════════════════════════════
   TOP UTILITY BAR
════════════════════════════════════════ */
.util-bar{background:var(--g800);padding:6px var(--content-pad);display:flex;align-items:center;justify-content:space-between;gap:12px}
.util-bar__left{font-size:11px;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.util-bar__right{display:flex;gap:16px;flex-shrink:0}
.util-bar__right a{font-size:11px;color:rgba(255,255,255,.45);transition:color .15s;white-space:nowrap}
.util-bar__right a:hover{color:rgba(255,255,255,.9)}

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.site-header{background:#fff;border-bottom:1px solid #ddeee0;padding:10px var(--content-pad)}
.site-header__inner{max-width:var(--content-max);margin:0 auto;display:flex;align-items:center;gap:16px}
.site-header__logo{height:54px;width:auto;flex-shrink:0;object-fit:contain}
.site-header__logo-fb{width:54px;height:54px;border-radius:10px;background:var(--g700);display:flex;align-items:center;justify-content:center;font-family:var(--fw-display);font-size:9px;font-weight:700;color:#fff;flex-shrink:0}
.site-header__divider{width:1px;height:46px;background:var(--g100);flex-shrink:0}
.site-header__text{flex:1;min-width:0}
.site-header__name{font-family:var(--fw-display);font-size:clamp(15px,2.5vw,20px);font-weight:700;color:var(--g700);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header__sub{font-size:clamp(10px,1.5vw,12px);color:#5a8a65;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-header__socials{display:flex;gap:8px;flex-shrink:0}
.sc-btn{width:32px;height:32px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;transition:opacity .15s;flex-shrink:0}
.sc-btn:hover{opacity:.82}
.sc-fb{background:#1877f2}.sc-yt{background:#e00}.sc-web{background:var(--g50)!important;color:var(--g600)!important;border:1px solid var(--g200)}

/* ════════════════════════════════════════
   NAV
════════════════════════════════════════ */
.site-nav{background:var(--g600);position:sticky;top:0;z-index:200;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.site-nav__inner{max-width:var(--content-max);margin:0 auto;display:flex;align-items:stretch;padding:0 var(--content-pad)}
.site-nav__item{display:flex;align-items:center;padding:0 15px;height:var(--nav-h);font-size:13px;color:rgba(255,255,255,.82);border-bottom:3px solid transparent;transition:all .15s;white-space:nowrap;cursor:pointer;text-decoration:none}
.site-nav__item:hover{background:rgba(255,255,255,.1);color:#fff}
.site-nav__item.active{color:#fff;border-bottom-color:var(--g200);font-weight:600}
.site-nav__hamburger{display:none;margin-left:auto;padding:0 12px;height:var(--nav-h);color:rgba(255,255,255,.85);align-items:center}
.site-nav__mobile-menu{display:none;background:var(--g700);padding:8px 0}
.site-nav__mobile-menu a{display:block;padding:10px 20px;font-size:14px;color:rgba(255,255,255,.8)}
.site-nav__mobile-menu a:hover,.site-nav__mobile-menu a.active{color:#fff;background:rgba(255,255,255,.08)}

/* ════════════════════════════════════════
   HERO BANNER
════════════════════════════════════════ */
.hero{background:linear-gradient(170deg,#cce8d1 0%,#e8f5ea 60%,var(--g50) 100%);padding:clamp(24px,4vw,40px) var(--content-pad) clamp(20px,3vw,32px);text-align:center;position:relative;overflow:hidden}
.hero::before{content:'Green Office';position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);font-family:var(--fw-display);font-size:clamp(48px,8vw,96px);font-weight:700;color:rgba(45,106,79,.055);white-space:nowrap;pointer-events:none;user-select:none}
.hero__title{font-family:var(--fw-display);font-size:clamp(18px,3vw,26px);font-weight:700;color:var(--g800);margin-bottom:8px;position:relative}
.hero__bc{font-size:13px;color:#5a8a65;position:relative}
.hero__bc a{color:var(--g600);text-decoration:underline}

/* ════════════════════════════════════════
   MAIN CONTENT WRAPPER
════════════════════════════════════════ */
main{flex:1;padding:clamp(20px,3vw,32px) var(--content-pad) clamp(32px,5vw,56px);max-width:var(--content-max);width:100%;margin:0 auto}

/* ════════════════════════════════════════
   SECTION LABEL
════════════════════════════════════════ */
.sec-label{font-family:var(--fw-display);font-size:15px;font-weight:600;color:var(--g800);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.sec-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--g200) 0%,transparent 100%)}
.sec-label__badge{font-size:11px;font-weight:600;padding:2px 10px;border-radius:20px;background:var(--g100);color:var(--g700)}

/* ════════════════════════════════════════
   YEAR BUTTONS
════════════════════════════════════════ */
.yr-row{display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.yr-row__label{font-size:12px;color:#6b9e76;font-weight:500;white-space:nowrap}
.yr-btn{padding:6px 18px;border-radius:20px;border:1.5px solid #bcd8c2;background:#fff;color:var(--g600);font-size:13px;font-family:var(--fw-body);font-weight:500;transition:all .18s;box-shadow:var(--shadow-xs)}
.yr-btn:hover{border-color:var(--g400);background:var(--g50);color:var(--g700)}
.yr-btn.active{background:var(--g700);color:#fff;border-color:var(--g700);box-shadow:0 2px 10px rgba(27,77,46,.28)}

/* ════════════════════════════════════════
   KPI GRID
════════════════════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px}
.kpi-card{background:#fff;border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--shadow-sm);border:1px solid #e0ede3;position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi-card__accent{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--g500),var(--g300))}
.kpi-card__label{font-size:11px;color:#6b9e76;font-weight:500;margin-bottom:8px;margin-top:4px}
.kpi-card__value{font-family:var(--fw-display);font-size:clamp(22px,3vw,30px);font-weight:700;color:var(--g700);line-height:1;margin-bottom:4px}
.kpi-card__unit{font-size:11px;color:#8aad8e;margin-bottom:8px}
.kpi-card__trend{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px}
.trend-up{background:#e8f5e9;color:#2e7d32}
.trend-dn{background:#e8f5e9;color:#2e7d32}

/* ════════════════════════════════════════
   CATEGORY CARDS
════════════════════════════════════════ */
.cats-wrap{background:var(--g50);border-radius:var(--r-xl);padding:clamp(16px,3vw,28px);border:1px solid var(--g100)}
.cats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat-card{background:#fff;border-radius:var(--r-md);padding:18px;border:1.5px solid #deeee3;display:block;color:inherit;transition:all .22s;position:relative;overflow:hidden;box-shadow:var(--shadow-xs)}
.cat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--g500),var(--g300));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.cat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--g300)}
.cat-card:hover::after{transform:scaleX(1)}
.cat-card__top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cat-card__icon{width:38px;height:38px;border-radius:10px;background:var(--g50);border:1.5px solid var(--g100);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cat-card__icon svg{width:18px;height:18px;fill:var(--g600)}
.cat-card__num{font-size:10px;font-weight:600;color:#8aad8e;letter-spacing:.3px}
.cat-card__name{font-family:var(--fw-display);font-size:13px;font-weight:700;color:var(--g800);line-height:1.4;margin-bottom:14px}
.cat-card__bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cat-card__bar{flex:1;height:7px;border-radius:4px;background:#eaf5ec;overflow:hidden}
.cat-card__bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--g500),var(--g400));transition:width .6s cubic-bezier(.4,0,.2,1)}
.cat-card__score{font-family:var(--fw-display);font-size:17px;font-weight:700;color:var(--g700);min-width:30px;text-align:right}
.cat-card__foot{display:flex;align-items:center;justify-content:space-between}
.cat-card__trend{font-size:11px;color:var(--g500);font-weight:500}
.lvl-pill{font-size:10px;font-weight:600;padding:3px 10px;border-radius:20px}
.lv-ex{background:#c8e6c9;color:#1b5e20}
.lv-gr{background:#dcedc8;color:#33691e}
.lv-gd{background:#fff9c4;color:#f57f17}
.lv-im{background:#ffccbc;color:#bf360c}

/* ════════════════════════════════════════
   CHARTS ROW
════════════════════════════════════════ */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.chart-card{background:#fff;border-radius:var(--r-md);padding:20px 22px;box-shadow:var(--shadow-sm);border:1px solid #e0ede3}
.chart-card__title{font-family:var(--fw-display);font-size:14px;font-weight:600;color:var(--g800);margin-bottom:3px}
.chart-card__sub{font-size:11px;color:#8aad8e;margin-bottom:16px}

/* ════════════════════════════════════════
   DETAIL PAGE — score box
════════════════════════════════════════ */
.det-top{display:grid;grid-template-columns:160px 1fr;gap:14px;margin-bottom:22px}
.det-score{background:var(--g700);border-radius:var(--r-md);padding:22px 16px;text-align:center;box-shadow:0 4px 20px rgba(27,77,46,.28)}
.det-score__lbl{font-size:10px;color:rgba(255,255,255,.6);margin-bottom:6px}
.det-score__num{font-family:var(--fw-display);font-size:46px;font-weight:700;color:#fff;line-height:1}
.det-score__max{font-size:11px;color:rgba(255,255,255,.45);margin-top:2px}
.det-score__badge{display:inline-block;margin-top:10px;font-size:11px;padding:4px 14px;border-radius:20px;font-weight:600}
.det-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.det-kpi{background:#fff;border-radius:var(--r-sm);padding:13px 15px;box-shadow:var(--shadow-sm);border:1px solid #e0ede3}
.det-kpi__lbl{font-size:10px;color:#6b9e76;margin-bottom:3px;font-weight:500}
.det-kpi__val{font-family:var(--fw-display);font-size:21px;font-weight:700;color:var(--g700);line-height:1}
.det-kpi__unit{font-size:10px;color:#8aad8e;margin-top:2px}

/* year compare bars */
.compare-card{background:#fff;border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--shadow-sm);border:1px solid #e0ede3;margin-bottom:18px}
.compare-row{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.compare-yr{font-size:11px;color:#6b9e76;min-width:52px}
.compare-bar{flex:1;height:7px;border-radius:4px;background:#eaf5ec;overflow:hidden}
.compare-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--g500),var(--g400));transition:width .6s ease}
.compare-sc{font-family:var(--fw-display);font-size:12px;font-weight:700;color:var(--g700);min-width:26px;text-align:right}
.compare-lv{font-size:9px;font-weight:600;padding:2px 8px;border-radius:10px;flex-shrink:0}

/* ════════════════════════════════════════
   YEAR TABS + ACCORDION
════════════════════════════════════════ */
.yr-tabs-bar{display:flex;border-bottom:2px solid var(--g100);flex-wrap:wrap;gap:3px}
.yr-tab{padding:9px 20px;font-size:13px;font-family:var(--fw-body);font-weight:500;color:#6b9e76;cursor:pointer;border:1.5px solid var(--g100);border-bottom:none;background:#fff;border-radius:8px 8px 0 0;transition:all .15s}
.yr-tab:hover{background:var(--g50);color:var(--g700)}
.yr-tab.active{background:var(--g600);color:#fff;border-color:var(--g600)}

.yr-panel{background:#fff;border:1px solid var(--g100);border-top:none;border-radius:0 0 var(--r-md) var(--r-md);padding:18px;display:none}
.yr-panel.active{display:block}

.acc{margin-bottom:10px;border-radius:var(--r-sm);overflow:hidden;border:1.5px solid #deeee3}
.acc__hdr{background:var(--g50);padding:12px 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:background .15s;border-bottom:1px solid #e4eee6}
.acc__hdr:hover{background:#e3f5e5}
.acc__title{font-family:var(--fw-display);font-size:13px;font-weight:600;color:var(--g800)}
.acc__toggle{font-size:11px;color:var(--g500);font-weight:600;white-space:nowrap}
.acc__body{display:none;padding:14px 18px;background:#fff}
.acc__body.open{display:block}
.acc__list li{font-size:13px;color:#2d4e2f;padding:6px 0 6px 15px;position:relative;border-bottom:1px solid #f2faf4;line-height:1.6}
.acc__list li:last-child{border-bottom:none}
.acc__list li::before{content:"•";position:absolute;left:0;color:var(--g400);font-weight:700}

/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.btn-back,.btn-next{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:7px 16px;border-radius:20px;border:1.5px solid var(--g200);background:var(--g50);color:var(--g600);transition:all .15s}
.btn-back:hover,.btn-next:hover{background:var(--g100);border-color:var(--g300)}
.btn-export{display:inline-flex;align-items:center;gap:6px;background:var(--g700);color:#fff;border-radius:8px;padding:8px 16px;font-size:12px;font-weight:500;transition:background .15s;border:none}
.btn-export:hover{background:var(--g600)}

/* ════════════════════════════════════════
   DETAIL GRID
════════════════════════════════════════ */
.det-grid{display:grid;grid-template-columns:1fr 2fr;gap:18px;align-items:start}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.site-footer{background:var(--g800);padding:clamp(12px,2vw,18px) var(--content-pad);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:auto}
.site-footer__left{display:flex;align-items:center;gap:10px}
.site-footer__logo{height:26px;opacity:.55}
.site-footer__text{font-size:11px;color:rgba(255,255,255,.38)}
.site-footer__right{font-size:11px;color:rgba(255,255,255,.28)}

/* ════════════════════════════════════════
   RESPONSIVE — tablet 1024
════════════════════════════════════════ */
@media(max-width:1024px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .cats-grid{grid-template-columns:repeat(2,1fr)}
  .charts-row{grid-template-columns:1fr}
  .det-grid{grid-template-columns:1fr 1.5fr}
}

/* ════════════════════════════════════════
   RESPONSIVE — tablet 768
════════════════════════════════════════ */
@media(max-width:768px){
  .site-nav__item{display:none}
  .site-nav__hamburger{display:flex}
  .site-nav__mobile-menu.open{display:block}
  .site-header__divider{display:none}
  .kpi-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .cats-grid{grid-template-columns:repeat(2,1fr)}
  .det-top{grid-template-columns:1fr}
  .det-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .det-grid{grid-template-columns:1fr}
  .util-bar__right{gap:10px}
}

/* ════════════════════════════════════════
   RESPONSIVE — mobile 480
════════════════════════════════════════ */
@media(max-width:480px){
  :root{--content-pad:14px}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:8px}
  .cats-grid{grid-template-columns:1fr}
  .det-kpi-grid{grid-template-columns:1fr 1fr}
  .site-header__sub{display:none}
  .kpi-card{padding:14px 14px}
  .kpi-card__value{font-size:22px}
  .util-bar__left{display:none}
}

/* ════════════════════════════════════════
   PRINT
════════════════════════════════════════ */
@media print{
  .site-nav,.util-bar,.btn-back,.btn-next,.btn-export{display:none!important}
  body{background:#fff}
  main{padding:0}
  .kpi-card,.cat-card,.chart-card,.acc{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
}

/* ════════════════════════════════════════
   SLIDESHOW
════════════════════════════════════════ */
.slideshow-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 28px;
  box-shadow: var(--shadow-md);
  background: #1b4d2e;
  height: clamp(220px, 32vw, 420px);
}

.slideshow { width: 100%; height: 100%; }

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  pointer-events: auto;
}
.slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder (ก่อนวางภาพจริง) */
.slide-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #c8e6c9 0%, #e8f5e9 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
}
.slide-placeholder__icon { font-size: clamp(36px, 6vw, 64px); }
.slide-placeholder__title {
  font-family: var(--fw-display);
  font-size: clamp(16px, 2.5vw, 24px);
  font-weight: 700;
  color: var(--g800);
}
.slide-placeholder__sub {
  font-size: clamp(11px, 1.4vw, 13px);
  color: var(--g600);
  max-width: 400px;
  line-height: 1.5;
}

/* Prev / Next buttons */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(36px, 5vw, 48px);
  height: clamp(36px, 5vw, 48px);
  border-radius: 50%;
  background: rgba(255,255,255,0.88);
  border: none;
  font-size: clamp(20px, 3vw, 28px);
  color: var(--g700);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background 0.15s, transform 0.15s;
  z-index: 10;
  line-height: 1;
}
.slide-btn:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.08);
}
.slide-btn--prev { left: 14px; }
.slide-btn--next { right: 14px; }

/* Dot indicators */
.slide-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 10;
}
.slide-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}
.slide-dot.active {
  background: #fff;
  width: 22px;
  border-radius: 4px;
}

/* Caption bar overlay (optional — ใช้กับภาพจริง) */
.slide img ~ .slide-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(13,51,33,0.7));
  padding: 32px 20px 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

/* ── Slideshow responsive ── */
@media (max-width: 768px) {
  .slideshow-wrap { height: clamp(180px, 40vw, 280px); border-radius: var(--r-md); }
  .slide-btn { width: 32px; height: 32px; font-size: 18px; }
}
@media (max-width: 480px) {
  .slideshow-wrap { height: 200px; margin-bottom: 20px; }
  .slide-btn--prev { left: 8px; }
  .slide-btn--next { right: 8px; }
}