:root{
    --bg:#eef3f1; --card:#ffffff; --ink:#0f172a; --muted:#6b7280;
    --primary:#2f4f4a; --primary-2:#61967e; --ring:#dcfce7;
    --shadow:0 22px 60px rgba(2,12,27,.08);
  }

  /* ===== Energy Palette (Light) ==================================== */
:root{
  /* 1) ไฟฟ้า (Grid) */
  --elec:            #2563eb;   /* base */
  --elec-1:          #1d4ed8;   /* gradient from */
  --elec-2:          #3b82f6;   /* gradient to */
  --elec-soft:       #eff6ff;   /* พื้นหลังอ่อน */
  --elec-border:     #c7d2fe;   /* เส้นขอบอ่อน */
  --elec-ink:        #ffffff;   /* ตัวอักษรบนพื้นเข้ม/กราฟ */
  --elec-ink-soft:   #0b1a3a;   /* ตัวอักษรบนพื้นอ่อน */

  /* 2) โซลาร์เซลล์ */
  --solar:           #7fa010;
  --solar-1:         #7fa010;   /* gradient from */
  --solar-2:         #8bbb0f;   /* gradient to */
  --solar-soft:      #f2f8e6;
  --solar-border:    #d3e3a2;
  --solar-ink:       #ffffff;
  --solar-ink-soft:  #23300a;

  /* 3) น้ำประปา */
  --water:           #0ea5e9;
  --water-1:         #0ea5e9;   /* gradient from */
  --water-2:         #38bdf8;   /* gradient to */
  --water-soft:      #e6f6fd;
  --water-border:    #b8e6fb;
  --water-ink:       #ffffff;
  --water-ink-soft:  #063e57;

  /* 4) เชื้อเพลิง */
  --fuel:            #ea580c;
  --fuel-1:          #ea580c;   /* gradient from */
  --fuel-2:          #f59e0b;   /* gradient to */
  --fuel-soft:       #fff4e5;
  --fuel-border:     #ffd7a6;
  --fuel-ink:        #ffffff;
  --fuel-ink-soft:   #432100;

  /* สำหรับกราฟ (current vs previous) */
  --elec-previous:   #93c5fd;
  --solar-previous:  #cfe69a;
  --water-previous:  #a5e2fb;
  --fuel-previous:   #fdba74;

   /* chip colors */
  --green: #22c55e;
  --amber: #f59e0b;
  --violet:#8b5cf6;
  --pink:  #ec4899;
  --blue:  #3b82f6;

  /* dot colors (left bullets) */
  --c1:#5b7cff;   /* clothing */
  --c2:#ff6b6b;   /* electronics */
  --c3:#ff7ab6;   /* grocery */
  --c4:#ffa449;   /* automobiles */
  --c5:#a883ff;   /* others */
}

}

/* ===== Dark Theme (ทางเลือก) ==================================== */
[data-theme="dark"]{
  --elec-soft:  rgba(37,99,235,.18);
  --solar-soft: rgba(127,160,16,.18);
  --water-soft: rgba(14,165,233,.18);
  --fuel-soft:  rgba(234,88,12,.18);
  --elec-border:#3a56b7;
  --solar-border:#6d8d19;
  --water-border:#1c8db7;
  --fuel-border:#b85a12;
  /* ตัวอักษรบนพื้นอ่อนให้ใช้สีสว่างขึ้น */
  --elec-ink-soft:#e5f0ff;
  --solar-ink-soft:#f4f9e6;
  --water-ink-soft:#e6f7ff;
  --fuel-ink-soft:#fff1e0;
}

/* ===== ตัวอย่างใช้งานกับการ์ด/ไทล์ ============================ */
.tile.electricity { 
  background: linear-gradient(135deg, #7fa010 0%, #7fa010 100%);
  color: var(--elec-ink);
}
.tile.solar { 
  background: linear-gradient(135deg,var(--solar-1) 0%,var(--solar-2) 100%);
  color: var(--solar-ink);
}
.tile.water { 
  background: linear-gradient(135deg,var(--water-1) 0%,var(--water-2) 100%);
  color: var(--water-ink);
}
.tile.fuel { 
  background: linear-gradient(135deg,var(--fuel-1) 0%,var(--fuel-2) 100%);
  color: var(--fuel-ink);
}

/* พื้นหลังอ่อน/ชิป/กล่องตัวเลข */
.chip.electricity { background: var(--elec-soft); color: var(--elec-ink-soft); border:1px solid var(--elec-border); }
.chip.solar       { background: var(--solar-soft); color: var(--solar-ink-soft); border:1px solid var(--solar-border); }
.chip.water       { background: var(--water-soft); color: var(--water-ink-soft); border:1px solid var(--water-border); }
.chip.fuel        { background: var(--fuel-soft); color: var(--fuel-ink-soft); border:1px solid var(--fuel-border); }

  /**{box-sizing:border-box}*/
  html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:"Kanit",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
  html{ font-size: clamp(16px, 1.05vw, 21px); }
  body{ overflow:auto; overscroll-behavior:none; }
  .container{width:100%;max-width:min(1880px,94vw);margin:24px auto;padding:0 clamp(12px,2vw,18px)}
  .topbar{display:flex;gap:clamp(10px,1.5vw,12px);align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:12px;min-width:0}
  .brand img{height:clamp(44px,6vw,64px);width:auto;background:#fff;border:1px solid #e5e7eb;border-radius:50%;padding:6px;box-shadow:0 4px 14px rgba(0,0,0,.06)}
  .brand-title{margin:6px 0 0 0;font-weight:800;letter-spacing:.2px;font-size:clamp(28px,3.4vw,44px);line-height:1.15;
    background:linear-gradient(90deg,var(--primary) 0%, var(--primary-2) 100%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; text-shadow:0 1px 0 rgba(0,0,0,.04);
  }
  .brand-title.shine{ background-size:200% auto; animation:brandMove 6s linear infinite }
  @keyframes brandMove{ to{ background-position:200% center } }
  .breadcrumb{font-size:clamp(.85rem,1vw,.95rem);color:var(--muted)}
  .btn{background:#4CAF50;color:#fff;padding:10px 14px;border:none;border-radius:12px;cursor:pointer;box-shadow:0 8px 24px rgba(76,175,80,.25);white-space:nowrap}

  /* ===== Cards/Grid ===== */
  .grid{display:grid;gap:18px}
  .grid.cols-4{grid-template-columns:repeat(4,1fr)}
  @media (max-width:1200px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.grid.cols-4{grid-template-columns:1fr}}
  .card{background:var(--card);border-radius:22px;box-shadow:var(--shadow);padding:16px 18px;border:1px solid #eaf4f1}

  /* ===== HERO ===== */
  .hero{position:relative;
    background:linear-gradient(180deg,#e8f3f1 0%, #f6fbf9 100%);
    border:1px solid #e4efe9;
    border-radius:28px;
    box-shadow:var(--shadow);
    padding:clamp(14px,1.6vw,18px)}
  
  .hero-inner{display:grid;gap:clamp(10px,2vw,2px);grid-template-columns:minmax(240px,1.2fr) 3fr;align-items:end}
  @media (max-width:1200px){ .hero-inner{ grid-template-columns:1fr } }

  /* อาคารหลักซ้าย */
  .hero-building
  {position:relative;
    /*height:clamp(200px,34vh,360px);*/
    display:flex;align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    background:transparent;
    border-radius:15px}
  .hero-building img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    /*filter:drop-shadow(0 10px 20px rgba(0,0,0,.15))*/
  }

  
  .placeholder{width:100%;height:100%;background:#5e6a72;border-radius:12px;opacity:.5;box-shadow:0 12px 22px rgba(0,0,0,.18)}
  .pin{position:absolute;bottom:clamp(6px,1vw,14px);left:50%;transform:translateX(-50%) rotate(-45deg);width:clamp(16px,1.6vw,26px);height:clamp(16px,1.6vw,26px);border-radius:50% 50% 50% 0;background:#18c3a0;box-shadow:0 6px 14px rgba(0,0,0,.18)}
  .pin::after{content:'';position:absolute;inset:22%;border-radius:50%;background:#c6fff0;transform:rotate(45deg)}

  /* การ์ด Capture ขวา */
  .capture-grid{display:grid;
    gap:clamp(10px,2vw,2px);
    grid-template-columns:repeat(4,minmax(140px,1fr));align-items:end}
  @media (max-width:1200px){ .capture-grid{grid-template-columns:repeat(4,minmax(120px,1fr))} }
  @media (max-width:992px){ .capture-grid{grid-template-columns:repeat(3,minmax(120px,1fr))} }
  @media (max-width:680px){ .capture-grid{grid-template-columns:repeat(2,minmax(120px,1fr))} }
  .capture-card{position:relative;text-align:center;color:#0f172a}
  .capture-title{font-weight:700;margin:0 0 6px 0}
  .capture-card img{width:100%;max-width:140px;height:auto;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.12))}
  .capture-meta{margin-top:8px;display:flex;flex-direction:column;gap:2px}
  .capture-percent{font-weight:600;font-size:25px;color:#111827}
  .capture-desc{font-size:.82rem;color:#6b7280}
  .capture-desc .year{ font-size:.85em; color:#6b7280; display:block; margin-top:2px; }

  /* ป้ายสภาพอากาศ */
  .weather{position:absolute;right:clamp(14px,1.6vw,22px);top:clamp(14px,1.6vw,22px);background:#fff;border:1px solid #edf2f0;padding:12px 16px;border-radius:18px;display:flex;gap:10px;align-items:center;box-shadow:0 12px 36px rgba(2,12,27,.10);z-index:5}
  .weather i{color:#f59e0b;font-size:clamp(18px,1.6vw,22px)}
  .weather .tag{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
  .weather .tag .date{opacity:.75}

  /* Quick actions (ปุ่มฝั่งขวาแบบในภาพ) */
  .quick-actions{position:absolute;right:12px;top: 90px;display:grid;gap:12px}
  .quick-actions .qa{background:#2f9f6e;color:#fff;padding:12px 16px;border-radius:14px;border:2px solid rgba(255,255,255,.6);box-shadow:0 10px 26px rgba(47,159,110,.25);cursor:pointer;font-weight:700;min-width:140px;text-align:center}
  .quick-actions .qa:nth-child(2){ background:#48b07c }
  .quick-actions .qa:nth-child(3){ background:#6ac091 }

  /* KPI Cards */
  .stat{display:flex;gap:12px;align-items:center}
  .stat .icon{width:42px;height:42px;border-radius:12px;background:#ecfbf2;display:grid;place-items:center;color:#10b981}
  .stat .label{color:#10b981;font-size:20px;font-weight:700}
  .subvalue{font-size:15px;color:var(--muted);margin-top:2px;line-height:1.2}
  .footerbar{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:8px;color:var(--muted)}
  .pill{font-size:.85rem;color:#10b981;background:#ecfdf5;border:1px solid #bbf7d0;padding:4px 10px;border-radius:999px}

  /* การ์ดรวมแบบ Gradient */
  .card.ghg-gradient{background:linear-gradient(135deg,var(--primary) 0%, var(--primary-2) 100%);color:#fff;border:none;padding:18px 22px}
  .card.ghg-gradient .icon{background:rgba(255,255,255,.16);color:#fff}
  .card.ghg-gradient .value{font-size:clamp(36px,6vw,64px);line-height:1;font-weight:900;letter-spacing:.3px;margin-top:6px}
  .card.ghg-gradient .label{color:rgba(255,255,255,.92)}



/* ===== GHG Big Tile (ตรงภาพ) ===== */
.card.ghg-gradient-main{
  position: relative;
  border: none;
  border-radius: 22px;
  /*padding: clamp(18px,1.8vw,24px);*/
  background: radial-gradient(120% 140% at 20% 10%, #3f7468 0%, #2f4f4a 60%, #335b53 100%);
  box-shadow: 0 22px 60px rgba(2,12,27,.08);
}

/* หัวข้อด้านบนซ้าย */
.card.ghg-gradient-main .label{
  color:#ecfffa;
  font-weight:800;
  font-size: clamp(1rem,1.2vw,1.15rem);
  letter-spacing:.2px;
  margin-bottom:6px;
  text-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* ตัวเลขหลัก */
.card.ghg-gradient-main .value{ color:#fff; line-height:1 }
.card.ghg-gradient-main .value .num{
  display:block;
  font-weight:900;
  font-size: clamp(44px,6.6vw,72px);   /* 52.13 ใหญ่ */
  letter-spacing:.3px;
  text-shadow:0 3px 12px rgba(0,0,0,.25);
}
/* บรรทัดถัดไป: K kgCO2e */
.card.ghg-gradient-main .value .unit-line{
  display:block;
  margin-top:2px;
  font-weight:900;
  font-size: 9px;
  letter-spacing:.3px;
}
.card.ghg-gradient-main .value .unit-line .small{ /* kgCO₂e */
  font-weight:900;
  opacity:.98;
}


.tile .unit{ font-size: clamp(15px, 0.55vw, 15px); }

/* บรรทัดล่างซ้าย: “ข้อมูล ณ เดือน …”  */
.card.ghg-gradient-main .stamp{
  position:absolute;
  left: clamp(16px,1.2vw,20px);
  bottom: clamp(12px,1.2vw,16px);
  color:#e0f2ea;
  font-size:.95rem;
  font-weight:700;
  letter-spacing:.2px;
}

/* ไอคอนโลก/CO2 มุมขวา (ปรับ path ตามไฟล์จริง) */
.card.ghg-gradient-main::after{
  content:'';
  position:absolute;
  right: clamp(10px,1.8vw,22px);
  bottom: clamp(10px,1.6vw,18px);
  width: clamp(82px,9vw,120px);
  height: clamp(82px,9vw,120px);
  background: url('/assets/3d/co2-A2.webp') center/contain no-repeat;
  opacity:.98;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}

/* โครงสร้างภายใน */
.card.ghg-gradient-main .stat{
  display:flex;
  align-items:flex-start;
}


  /* Donuts/Charts */
  .mini-chart{ margin-top:8px }
  .mini-chart canvas{ width:100%; height:140px; display:block }
  .mini-chart.elec-donut canvas{ display:block;width:100%;max-width:180px;height:160px;margin:0 auto }
  .elec-legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:.95rem;color:#1f2937;margin-top:6px}
  .elec-legend .dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px}
  .elec-legend .grid{ background:var(--primary) }
  .elec-legend .solar{background:var(--primary-2)}

  .fuel-semi canvas{display:block;width:100%;max-width:360px;height:150px;margin:0 auto}
  .fuel-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.9rem;color:#334155;font-weight:600;margin-top:6px}
  .fuel-legend .dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px}
  .fuel-legend .diesel{background:var(--primary)}
  .fuel-legend .gasohol{background:var(--primary-2)}

  /* Infoband (ภาพรวมปริมาณการใช้ไฟฟ้า) */
  .infoband{ margin-top:16px }
  .info-head{font-weight:800;letter-spacing:.5px;display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .info-head .en{font-size:clamp(1.05rem,1.6vw,1.25rem)}
  .info-head .th{color:var(--muted);font-size:.92rem}
  .info-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media (max-width:992px){ .info-split{ grid-template-columns:1fr } }
  .infogrid.two-cols{display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
  @media (max-width:640px){ .infogrid.two-cols{ grid-template-columns:1fr } }
  .info-card{background:#fff;border:1px solid #eef3f1;border-radius:18px;padding:14px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;box-shadow:0 12px 28px rgba(2,12,27,.06)}
  .info-copy h4{margin:0 0 4px 0;font-size:1rem;font-weight:700}
  .info-copy p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.35}
  .info-figure img{width:92px;height:auto;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.12))}
  .info-value{margin-top:6px;font-weight:900;font-size:clamp(1.2rem,1.9vw,1.6rem);background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%); -webkit-background-clip:text;background-clip:text;color:transparent}

  /* Month label */
  .small-month{ font-size:.85em; color: var(--muted); margin-left:6px }

  @media (min-width:2560px){ html{ font-size: clamp(18px, 0.9vw, 24px) } .grid{ gap:22px } .topbar{ margin-bottom:18px } }

  /* กำหนดโครงสร้างพื้นฐาน */
.row{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -16px;   /* จาก -10px → -16px เพื่อเพิ่ม gutter แนวนอน */
  row-gap: 10px;     /* เพิ่มช่องไฟระหว่างแถว */
}
.col{
  padding: 0 10px;   /* ต้องปรับให้เท่ากับ margin ข้างบน */
  /*box-sizing: border-box;*/
}

/* ระบบ 12 คอลัมน์ */
.col-1  { flex: 0 0 8.333%;  max-width: 8.333%;  }
.col-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3  { flex: 0 0 25%;     max-width: 25%;     }
.col-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-6  { flex: 0 0 50%;     max-width: 50%;     }
.col-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9  { flex: 0 0 75%;     max-width: 75%;     }
.col-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-12 { flex: 0 0 100%;    max-width: 100%;    }
@media (max-width: 768px) {
  .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
  .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.card {
  padding: 10px 14px;
  border-radius: 16px;
}
.col.col-2 .card {
  margin-bottom: 10px; /* ระยะห่างด้านล่างของแต่ละการ์ด */
}
.col.col-2 .card:last-child {
  margin-bottom: 0;    /* ลบ margin อันสุดท้ายออก */
}

.capture-percent {
  color: #2f7a5c;       /* เลขสีเขียว */
  font-size: 23px;    /* ขนาดใหญ่กว่าหน่วย */
  font-weight: 700;
}

.unit-Main {
  color: #000;          /* หน่วยสีดำ */
  font-size: 0.8rem;    /* ขนาดเล็กกว่าเลข */
  margin-left: 4px;     /* เว้นช่องว่างเล็กน้อย */
}



/* KPI Row */
  .kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }
  .kpi { background: var(--card); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
  .kpi h3 { margin: 0; font-size: clamp(12px, .95vw, 16px); color: var(--muted); font-weight: 600; }
  .kpi .val { font-size: clamp(22px, 2.2vw, 44px); font-weight: 800; margin-top: 6px; }
  .kpi .unit { font-size: clamp(10px, .8vw, 14px); color: var(--muted); margin-left: 6px; font-weight: 600; }
  .kpi .trend { position: absolute; right: 12px; bottom: 10px; font-size: clamp(10px, .8vw, 14px); opacity: .8; }
  .kpi.good { outline: 1px solid rgba(128, 237, 153, .35); box-shadow: 0 0 0 1px rgba(128,237,153,.12) inset; }
  .kpi.warn { outline: 1px solid rgba(255, 183, 3, .35); box-shadow: 0 0 0 1px rgba(255,183,3,.12) inset; }
  .kpi.bad  { outline: 1px solid rgba(239, 71, 111, .35); box-shadow: 0 0 0 1px rgba(239,71,111,.12) inset; }

  /* Main Grid */
  .main { grid-column: 1 / -1; display: grid; grid-template-columns: 8fr 4fr; gap: var(--gap); }

  /* Floors Board (no click – all visible) */
  .floors {
    display: grid; gap: var(--gap);
    grid-template-columns: repeat(3, 1fr);
  }
  .floor { background: var(--card); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); display: grid; grid-template-rows: auto auto 1fr; gap: 10px; min-height: 220px; }
  .floor .head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .badge { background: #2f4f4a; border: 1px solid rgba(255,255,255,.08); padding: 6px 10px; border-radius: 999px; font-size: clamp(10px, .8vw, 14px); color: #ffffff; font-weight: 700; letter-spacing: .3px; }
  .dept { font-size: clamp(12px, .95vw, 16px); color: var(--ink); opacity: .9; }

  .mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 4px }
  .mini .cell { background: #0f1533; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 10px; }
  .mini .lab { color: #ffffff;  font-size: clamp(10px, .75vw, 13px); }
  .mini .val { font-weight: 800; color :#ffffff ; font-size: clamp(14px, 1.2vw, 22px); margin-top: 2px; }

  /* Stacked breakdown bars */
  .stack { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .stack .row { display: grid; grid-template-columns: 70px 1fr 60px; align-items: center; gap: 10px; }
  .stack .row .name { color: var(--muted); font-size: clamp(10px, .8vw, 14px); }
  .stack .bar { height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--primary) 30%, #6ee7ff 30% 60%, var(--accent) 60% 85%, #a0f0ff 0); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  .stack .pct { text-align: right; color: var(--muted); font-size: clamp(10px, .8vw, 14px); }

  /* Right Column */
  .side { display: grid; gap: var(--gap); grid-auto-rows: min-content; }
  .panel { background: #99c652; border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; }
  .panel h2 { margin: 4px 0 10px; font-size: clamp(14px, 1.3vw, 24px); letter-spacing: .2px; }

  .totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .totals .tile { background: linear-gradient(135deg, #0d564a 0%, #63974b 100%); border-radius: 14px; padding: 12px; }
  .totals .tile .lab { color: #ffffff; font-size: clamp(10px, .8vw, 14px); }
  .totals .tile .val { color: #ffffff; font-size: 15px; font-weight: 500; }

  .legend { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0 2px; }
  .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; background: var(--primary); }
  .dot.solar { background: var(--accent); }
  .dot.grid { background: #6ee7ff; }

  .top3 { display: grid; gap: 3px; }
  .top3 .item {
    display: grid
;
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    /* align-items: center; */
    background: #7fa010;
    /* border: 1px solid rgba(255, 255, 255, .06); */
    border-radius: 12px;
    padding: 5px;
}
  .rank { width: 28px; height: 28px; border-radius: 8px; background: #ffffff; display: grid; place-items: center; font-weight: 600; color: #99c652; }

  /* Footer small notes */
  .footer { grid-column: 1 / -1; color: var(--muted); text-align: right; font-size: clamp(10px, .8vw, 14px); opacity: .9; }

  /* Responsive (if used on smaller than 1920) */
  @media (max-width: 1500px) {
    .kpis { grid-template-columns: repeat(3, 1fr); }
    .main { grid-template-columns: 1fr; }
  }


  .ribbon-center {
  background: linear-gradient(90deg, #0f5c4f, #99c652);
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  text-align: center;

  /* ความสูงนิดเดียว */
  line-height: 2rem;       /* ความสูงของแถบ */
  padding: 0 1rem;

  /* ให้ขอบตรงกับกรอบ card */
  margin: -1rem -1rem 1rem -1rem; 
  border-radius: 8px 8px 0 0; /* โค้งบนรับกับ card */
}


/* ฐานร่วม */
.title-kpi,
.title-electric{
  --blink-speed: 1.1s;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:700 16px/1.2 "Kanit", system-ui, sans-serif;
  margin:4px 0;
}
.title-kpi .ico,
.title-electric .ico{
  width:1.25em; height:1.25em;
  fill:currentColor;
}

/* สีรายหมวด */
.title-electric{ color:#d32f2f; } /* แดงตามที่ขอ */
.title-solar   { color:#f59e0b; } /* เหลือง/อำพัน */
.title-water   { color:#1e88e5; } /* น้ำเงิน */
.title-fuel    { color:#fb8c00; } /* ส้ม */

/* กระพริบเฉพาะไอคอน */
.blink-icon .ico{ animation: blink var(--blink-speed) steps(1,end) infinite; }

/* ตัวเลือกแบบนุ่มตา */
.pulse-icon .ico{ animation: pulse 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  .blink-icon .ico, .pulse-icon .ico{ animation:none !important; }
}

@keyframes blink{ 0%,60%,100%{opacity:1} 30%{opacity:0} }
@keyframes pulse{ 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.1);opacity:.7} }



 .ribbon-electricity {
  background: linear-gradient(90deg, #7fa010, #99c652);
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  text-align: center;

  /* ความสูงนิดเดียว */
  line-height: 2rem;       /* ความสูงของแถบ */
  padding: 0 1rem;

  /* ให้ขอบตรงกับกรอบ card */
  margin: -1rem -1rem 1rem -1rem; 
  border-radius: 8px 8px 0 0; /* โค้งบนรับกับ card */
}

.ribbon-solar {
  background: linear-gradient(90deg, #2f7a5c, #0d564a);
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  text-align: center;

  /* ความสูงนิดเดียว */
  line-height: 2rem;       /* ความสูงของแถบ */
  padding: 0 1rem;

  /* ให้ขอบตรงกับกรอบ card */
  margin: -1rem -1rem 1rem -1rem; 
  border-radius: 8px 8px 0 0; /* โค้งบนรับกับ card */
}


.ribbon-water {
  background: linear-gradient(90deg, #0a86d6, #0673ba);
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  text-align: center;

  /* ความสูงนิดเดียว */
  line-height: 2rem;       /* ความสูงของแถบ */
  padding: 0 1rem;

  /* ให้ขอบตรงกับกรอบ card */
  margin: -1rem -1rem 1rem -1rem; 
  border-radius: 8px 8px 0 0; /* โค้งบนรับกับ card */
}

.ribbon-fuel {
  background: linear-gradient(90deg, #4a4a4a, #2b2929);
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  text-align: center;

  /* ความสูงนิดเดียว */
  line-height: 2rem;       /* ความสูงของแถบ */
  padding: 0 1rem;

  /* ให้ขอบตรงกับกรอบ card */
  margin: -1rem -1rem 1rem -1rem; 
  border-radius: 8px 8px 0 0; /* โค้งบนรับกับ card */
}
 



.bg-light {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.ribbon-left {
  background: linear-gradient(90deg, #2f7a5c, #3d8a70);
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  text-align: left;          /* จาก center -> left */

  /* ความสูงนิดเดียว */
  line-height: 2rem;
  padding: 0 1rem;
  padding-left: 1.5rem;      /* เพิ่มเว้นระยะจากซ้าย */

  /* ให้ขอบตรงกับกรอบ card */
  margin: -1rem -1rem 1rem -1rem; 
  border-radius: 8px 8px 0 0;
}



.card-header {
  display: flex;
  align-items: center;
  gap: .5rem;               /* ระยะห่างระหว่าง "ชั้น 1" กับ "ส่วนกลาง" */
  
  margin: .5rem 0 0 .75rem; /* เว้นห่างจากขอบบนและซ้ายของ card */
}

.card-header .tag {
  background: #2f7a5c;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;      /* pill shape */
}
.card-header .title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
}



/* ====== Slider base ====== */
.dcce-slider {
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
.dcce-viewport {
  overflow: hidden;
  width: 100%;
}
.dcce-track {
  display: flex;
  gap: 1rem;
  transition: transform 600ms cubic-bezier(.22,.61,.36,1);
  will-change: transform;
  /* ความกว้างจะปรับอัตโนมัติด้วยจำนวนสไลด์ */
}
.slide {
  flex: 0 0 calc(100% / 3);      /* โชว์ 3 ชั้นต่อหน้า */
  box-sizing: border-box;
  padding: 0;                     /* ให้ .col จัดระยะเอง */
  min-height: 100%;
}

/* ปุ่มลูกศรซ้าย-ขวา */
.dcce-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  border: none;
  width: clamp(36px, 2.8vw, 56px);
  height: clamp(36px, 2.8vw, 56px);
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: clamp(18px, 1.6vw, 28px);
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.dcce-arrow:hover { background: rgba(0,0,0,.5); }
.dcce-arrow.prev { left: .25rem; }
.dcce-arrow.next { right: .25rem; }

/* จุดกลมบอกลำดับ */
.dcce-dots {
  display: flex;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  margin-top: .75rem;
}
.dcce-dots button {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  border: 0;
  background: #cfd8dc;           /* สีเทาอ่อน */
  opacity: .8;
  cursor: pointer;
}
.dcce-dots button[aria-current="true"] {
  background: var(--primary, #2f7a5c);  /* ใช้สีหลักของธีมถ้ามี */
  transform: scale(1.2);
  opacity: 1;
}

/* รองรับจอเล็ก (ถ้าต้องการ) */
@media (max-width: 1200px) {
  .slide { flex-basis: 50%; }     /* โชว์ 2 ต่อหน้า */
}
@media (max-width: 700px) {
  .slide { flex-basis: 100%; }    /* โชว์ 1 ต่อหน้า */
}




    .metric{
      flex:1; min-width:0;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
      padding:10px; border-radius:10px;
      display:flex; gap:8px; align-items:center;
    }
    .metric .lab{font-weight:600; font-size:15px}
    .metric .val{margin-left:auto; text-align:right}
    .metric .num{font-weight:700; font-size:19px}
    .metric .unit{font-size:10px; opacity:.6}

    /* Progress ring using CSS var(--p) as percent (0–100) */
    .ring{ --size:36px; --p: 0; width:var(--size); height:var(--size); border-radius:50%;
      background:
        conic-gradient(var(--accent) calc(var(--p) * 1%), var(--ring-bg) 0);
      position:relative; flex:0 0 auto;
    }
    .ring::after{
      content:""; position:absolute; inset:4px; border-radius:50%; background:var(--card);
      box-shadow:inset 0 2px 6px rgba(0,0,0,.35);
    }
    .ring > span{position:absolute; inset:0; display:grid; place-items:center; font-size:11px; font-weight:700}

    /* Subtle icon placeholder */
    .emoji{font-size:20px; opacity:.9}

    /* Corner label (e.g., DCCE) */
    .corner{ position:absolute; right:12px; top:10px; font-size:12px; opacity:.65; font-weight:700 }

.floor-list{
    display:flex; flex-direction:column; gap:.2rem;
    padding:.25rem .25rem .75rem .25rem;
    font-family:"Kanit", system-ui, sans-serif;
  }
  .floor-chip{
    display:flex; align-items:center; justify-content:space-between;
    gap:.75rem; padding:.45rem .7rem;
    border-radius:999px; color:#fff;
    background:linear-gradient(180deg,#0e9488,#0c6a86);
    box-shadow:0 2px 6px rgba(0,0,0,.12);
    font-size:.60rem; line-height:1;
  }
  .floor-chip .lbl{ font-weight:700 }
  .floor-chip .val{ font-weight:600; opacity:.95 }

.totals{display:grid; gap:6px; grid-template-columns:repeat(4, minmax(0,1fr)); margin: 8px 0 10px}
.tile{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 18px}
.tile .lab{color:var(--ink-soft); font-size:clamp(12px,1vw,14px)}
.tile .val{font-weight:700; font-size:clamp(18px,2.2vw,28px)}
/*.tile .unit{font-size:.8em; color:var(--ink-soft)}*/
.tile .trend{margin-top:6px; font-size:12px}
.trend.up{color:var(--c-electric)}
.trend.down{color:var(--c-fuel)}


.panel{display:grid; grid-template-columns: 1.6fr .8fr; gap:6px; margin-bottom:24px}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px}
.card h3{margin:0 0 10px; font-size:clamp(14px,1.4vw,18px)}


.ribbon-centerA {
  background: #2f7a5c;        /* สีพื้นหลังเขียวเข้ม */
  color: #fff;                /* ตัวอักษรสีขาว */
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 18px);
  text-align: center;         /* จัดกลาง */
  line-height: 2rem;
  padding: 0.3rem 1rem;
  margin: 0 0 1rem 0; 
  border-radius: 12px;        /* มุมโค้งมนทั้ง 4 ด้าน */
  display: inline-block;      /* กว้างเท่าข้อความ */
}

/* คอลัมน์ขวา */
.side-metrics{
  display:flex;
  flex-direction:column;
  gap:.3rem;               /* ระยะห่างระหว่างกล่อง */
}

/* กล่องขนาดเล็ก */
.tile-box {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:#7fa010;
  border-radius:5px;
  padding:.3rem .5rem;
  height:55px;             /* << ความสูงเล็กลง ไม่เกินกรอบ */
  color:#fff;
  font-weight:700;
  text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.tile-box .top {
  display:flex;
  justify-content:space-between;
  width:100%;
  font-size:12px;          /* ตัวหนังสือเล็กลง */
  line-height:1;
}

.tile-box .val {
  font-size:16px;
  line-height:1.2;
  margin-top:.2rem;
}

/* สี */
.electricity { background:#7fa010; }
.solar       { background:#2f7a5c; }
.water       { background:#0a86d6; }
.fuel        { background:#4a4a4a; }


:root{
    --c-elec:#7fa010;
    --c-solar:#2f7a5c;
    --c-water:#0a86d6;
    --c-fuel:#4a4a4a;
    --rail:#2f7a5c;
    --bg:#f6f8f7;
    --card:#fff;
    --shadow:0 8px 24px rgba(0,0,0,.08);
    --radius:18px;
    --w-rail:84px;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:"Kanit",system-ui,sans-serif;background:var(--bg);color:#222}
  .layout{
    min-height:100vh;
    display:grid;grid-template-columns:var(--w-rail) 1fr;gap:18px;padding:18px;
  }

  /* ========== LEFT ICON RAIL ========== */
  .rail {
    background: linear-gradient(180deg, #2f7a5c, #99c652);
    border-radius: 18px;
    padding: 100px 0px;
    display: flex
;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow);
    /* position: relative; */
}
  .rail::before{
    content:"";position:absolute;left:8px;top:16px;bottom:16px;width:6px;border-radius:6px;background:rgba(255,255,255,.3);
  }
  .icon-btn{
    width:56px;height:56px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;
    background:#eaf4f1;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.15) inset;
    transition:transform .2s, box-shadow .2s;
    outline:2px solid transparent;border:none;
  }
  .icon-btn:hover{transform:translateX(2px)}
  .icon-btn.active{outline-color:rgba(0,0,0,.35);outline-offset:0}
  .icon-btn svg{width:28px;height:28px;fill:#2b2b2b}
  .icon-btn[data-tab="elec"]  svg{fill:var(--c-elec)}
  .icon-btn[data-tab="solar"] svg{fill:var(--c-solar)}
  .icon-btn[data-tab="water"] svg{fill:var(--c-water)}
  .icon-btn[data-tab="fuel"]  svg{fill:var(--c-fuel)}
  .icon-btn .tip{
    position:absolute;left:70px;white-space:nowrap;background:#fff;color:#222;
    padding:6px 10px;font-size:13px;border-radius:8px;box-shadow:var(--shadow);
    opacity:0;transform:translateX(-6px);transition:.2s;pointer-events:none;
  }
  .icon-btn:hover .tip{opacity:1;transform:translateX(0)}

  /* ========== CONTENT AREA ========== */
  .content{border-radius:28px;overflow:hidden}
  .panel{
    display:none;opacity:0;transform:translateY(8px);
    transition:opacity .25s ease, transform .25s ease;
    padding:18px;gap:18px;align-content:start;
  }
  .panel.active{display:grid;grid-template-columns:1fr 1fr}
  .panel.show {opacity:1;transform:translateY(0)}
  .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
  .ribbon{padding:8px 14px;border-radius:10px;font-weight:700;width:max-content;margin-bottom:10px}
  .elec  .ribbon{background:#edf5e6;color:var(--c-elec)}
  .solar .ribbon{background:#e7f3ef;color:var(--c-solar)}
  .water .ribbon{background:#e6f1fb;color:var(--c-water)}
  .fuel  .ribbon{background:#efefef;color:var(--c-fuel)}
  .stat{display:flex;align-items:flex-end;gap:12px;font-weight:700;font-size:42px;line-height:1}
  .stat small{font-weight:600;font-size:14px;color:#444}

  @media (max-width: 980px){
    .layout{grid-template-columns:72px 1fr}
    .panel.active{grid-template-columns:1fr}
    .stat{font-size:34px}
  }

  .panel{display:none; opacity:0; transform:translateY(8px); transition:.25s}
.panel.active{display:grid; grid-template-columns:1fr 1fr;}
.panel.show{opacity:1; transform:translateY(0)}





  .card {
    font-family: Kanit, sans-serif;
    background: #eef6ef;
    padding: 20px;
    border-radius: 16px;
  }
  .title { text-align:center; font-weight:700; margin: 6px 0 18px; color:#2f7a5c; }
  .pyramid {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .tier {
    position: relative;
    margin: 0 auto;
    height: 44px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 16px;
    font-weight: 700;
    letter-spacing:.2px;
    /* ทำให้เป็นทรงสี่เหลี่ยมคางหมู */
    clip-path: polygon(2.5% 0, 97.5% 0, 100% 100%, 0% 100%);
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }
  .name { font-size: 14px; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
  .val  { font-size: 14px; text-shadow: 0 1px 0 rgba(0,0,0,.15); }
  /* ไล่โทนสี 9 ระดับ (ปรับได้ตามธีม) */
  .g1{background:linear-gradient(90deg,#7fa010,#2f7a5c)}
  .g2{background:linear-gradient(90deg,#2f7a5c,#0a9c87)}
  .g3{background:linear-gradient(90deg,#0a86d6,#4bb3ff)}
  .g4{background:linear-gradient(90deg,#4a4a4a,#6b6b6b)}
  .g5{background:linear-gradient(90deg,#f0ad4e,#f6c667)}
  .g6{background:linear-gradient(90deg,#ff8a00,#ffb34d)}
  .g7{background:linear-gradient(90deg,#ff5aa5,#ff8ad6)}
  .g8{background:linear-gradient(90deg,#b06ab3,#f78ca0)}
  .g9{background:linear-gradient(90deg,#c5e05f,#e9f97a); color:#103a2b}

  @media (max-width: 768px){
    .tier{height:40px; padding:0 12px}
    .name,.val{font-size:13px}
  }



   /* ปรับสรุปรายการอันดับใต้กราฟ */
  .rank-legend{
    display:grid; gap:.25rem; margin-top:.25rem;
    grid-template-columns: repeat(5, minmax(0,1fr));
    font: 500 11px Kanit, system-ui, sans-serif; color:#333;
  }
  .rank-legend .item{display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .rank-legend .dot{width:8px; height:8px; border-radius:50%;}
  @media (max-width:1200px){ .rank-legend{grid-template-columns: repeat(3, minmax(0,1fr));} }



 /* วางกราฟโดนัท 2 อันให้อยู่แถวเดียว */
  .top5-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  /* กล่องห่อแต่ละกราฟ: ล็อกความสูงไว้ (ปรับค่าตามหน้าจอ/65") */
  .pie-card{
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    height: clamp(240px, 28vh, 360px); /* กันยืด-หดจนเลย์เอาต์กระเด็น */
    position: relative;
  }
  /* บังคับให้แคนวาสพอดีกล่องเสมอ */
  .pie-card canvas{
    width: 100% !important;
    height: 100% !important;
  }

  /* ถ้าพื้นที่แคบ (มือถือ) ให้ซ้อนเป็นคอลัมน์เดียว */
  @media (max-width: 900px){
    .top5-grid{ grid-template-columns: 1fr; }
  }


   /* กริด 4 ช่องสำหรับ 4 กราฟ */
  .top5-grid{
    display: grid;
    /*grid-template-columns: repeat(4, minmax(0, 1fr));*/
    gap: 8px; /* เดิม 12px -> ลดลง */
  }

  /* ทำโหมดเล็ก: แค่เติมคลาส .small ให้กับ .top5-grid ก็จะย่อทั้งหมด */
  .top5-grid.small .pie-card{
    height: 170px;     /* เดิม ~240-360px -> เหลือ 170px */
    padding: 8px;      /* เดิม 12px -> 8px */
    border-radius: 10px;
  }
  .pie-card{
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    height: 200px;       /* ค่ามาตรฐาน ถ้าไม่ใส่ .small */
  }
  .pie-card canvas{
    width: 100% !important;
    height: 100% !important;  /* ให้ Chart.js ยืด/ย่อเต็มกล่อง */
  }

  /* จอแคบลงก็ลดคอลัมน์ลง */
  @media (max-width: 1400px){
    .top5-grid{ grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 900px){
    .top5-grid{ grid-template-columns: 1fr; }
  }