/* =====================================================================
   WKPS Public Theme 3.0  —  "Friendly Soft"
   โทน: พื้นหลังครีม/ม่วงอ่อน + ม่วงสดใสเป็นสีหลัก + เหลืองอุ่นเป็น CTA
        + การ์ดมนโค้งใหญ่ + เงานุ่ม + ไอคอนพาสเทล + ปุ่มแคปซูล
   โหลด 2 จุด (ใน head และท้าย footer) เพื่อให้ทับสไตล์ในแต่ละหน้าได้
   ===================================================================== */

/* ---------- 1. PALETTE ---------- */
:root{
  /* สีหลัก/สีรอง ไม่กำหนดที่นี่ ปล่อยให้ค่าจากหน้า "ตั้งค่า -> ดีไซน์และโลโก้" ทำงาน
     (header.php ฉีดค่าจากฐานข้อมูลไว้ในไฟล์ก่อนหน้านี้แล้ว) */



  --accent:#ffc93c;
  --accent-strong:#f5a524;
  --accent-soft:#fff4d4;
  /* --on-primary มาจาก autoTextColor() ใน header ตามความสว่างของสีหลัก */

  --surface:#ffffff;
  --surface-2:#faf6f1;      /* ครีมอุ่น (พื้นหลังหน้า) */
  --surface-3:#f2ecff;      /* ม่วงอ่อน */
  --surface-4:#fff3ea;      /* พีชอ่อน */

  --text-1:#241a3d;
  --text-2:#5f5878;
  --text-3:#9a94ad;
  --border:#ece6f8;
  --border-soft:#f5f1fd;

  --shadow-xs:0 2px 8px rgba(60,40,110,.05);
  --shadow-sm:0 6px 18px rgba(60,40,110,.07);
  --shadow-md:0 14px 34px rgba(60,40,110,.10);
  --shadow-lg:0 26px 60px rgba(60,40,110,.16);

  --radius-sm:12px;
  --radius-md:20px;
  --radius-lg:28px;
  --radius-xl:36px;
  --radius-pill:999px;
  /* ระบุ property ที่จะ transition ให้ชัด แทนการใช้ "all"
     เพราะ "all" ทำให้เบราว์เซอร์ต้องเฝ้าดูทุก property ที่เปลี่ยน
     ตอนเลื่อนเมาส์ผ่านการ์ดข่าวหลาย ๆ ใบจะหน่วงชัดเจน */
  --transition:transform .22s cubic-bezier(.4,0,.2,1),
               box-shadow .22s cubic-bezier(.4,0,.2,1),
               background-color .2s ease,
               border-color .2s ease,
               color .2s ease,
               opacity .2s ease,
               padding .2s ease;

  /* พาสเทลสำหรับไอคอน/แท็ก */
  --p-violet:#efe8ff; --p-violet-ink:#6d4ae0;
  --p-peach:#ffe9dc;  --p-peach-ink:#e06a35;
  --p-mint:#dff4ec;   --p-mint-ink:#12916d;
  --p-amber:#fff1cf;  --p-amber-ink:#b07d0c;
  --p-pink:#ffe4f0;   --p-pink-ink:#d4407e;
  --p-sky:#e3eeff;    --p-sky-ink:#2f6fd0;
}

/* พื้นหลัง: ไล่สีแบบเลื่อนไปกับหน้า วาดครั้งเดียวจบ
   ห้ามใช้ background-attachment:fixed หรือ layer แบบ position:fixed
   เพราะเบราว์เซอร์จะต้องวาดพื้นหลังใหม่ทุกเฟรมตอนเลื่อน -> กระตุก */
html{
  background-color:var(--surface-2);
  background-image:
    radial-gradient(900px 460px at 92% 0, #f3ecff 0%, transparent 60%),
    radial-gradient(760px 420px at -8% 340px, #fff0e4 0%, transparent 58%);
  background-repeat:no-repeat;
}
body{background:transparent;color:var(--text-1);}

/* ---------- 2. TOPBAR / HEADER ---------- */
.topbar{
  background:linear-gradient(90deg,var(--primary-dark) 0%,var(--primary) 55%,var(--secondary) 100%);
  color:rgba(255,255,255,.82);
  padding:7px 0;
}
.topbar a{color:rgba(255,255,255,.8);}
.topbar-social a{border-radius:50%;background:rgba(255,255,255,.16);}
.topbar-social a:hover{background:var(--accent);color:#3b2a00;transform:translateY(-2px);}

.site-header{
  background:linear-gradient(120deg,var(--primary) 0%,#7b52ea 46%,var(--secondary) 100%);
  color:#fff;
}
.site-header::before{
  background:
    radial-gradient(ellipse 46% 74% at 96% 24%, rgba(255,255,255,.16) 0%, transparent 68%),
    radial-gradient(ellipse 40% 66% at 4% 96%, rgba(255,201,60,.22) 0%, transparent 62%);
}
/* เส้นทองเดิมถูกแทนด้วยคลื่นในหัวข้อ 8d ด้านล่าง */
.header-inner{padding:20px 0 30px;}
.logo-circle{
  width:76px;height:76px;
  border-radius:26px;
  background:rgba(255,255,255,.95);
  border:none;
  box-shadow:0 14px 30px rgba(35,15,80,.22);
  padding:6px;
}
.logo-circle img{border-radius:20px;object-fit:contain;}
.logo-circle i{color:var(--primary);}
.school-text h1{font-size:1.5rem;font-weight:700;letter-spacing:-.015em;}
.school-text p{opacity:.8;}
.header-contact .contact-icon{
  width:26px;height:26px;border-radius:10px;
  background:rgba(255,255,255,.18);
}

/* ---------- 3. NAVBAR (แถบขาวลอย มุมมน) ---------- */
.navbar{
  background:var(--surface-2);
  border-bottom:none;
  box-shadow:none;
  padding:10px 0;
}
.navbar .container{padding:0 20px;}
.navbar-inner{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-sm);
  padding:5px 10px;
}
.nav-link{
  padding:11px 16px;
  border-radius:var(--radius-pill);
  border-bottom:none !important;
  font-weight:600;
  color:var(--text-2);
}
.nav-link:hover,
.nav-item.active > .nav-link{
  background:var(--surface-3);
  color:var(--primary);
  border-bottom:none;
}
.nav-item.active > .nav-link{
  background:linear-gradient(135deg,var(--primary),#8b5cf6);
  color:#fff;
  box-shadow:0 8px 18px rgba(109,74,224,.28);
}
.dropdown{
  top:calc(100% + 10px);
  border:1px solid var(--border);
  border-top:none;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  padding:6px;
  overflow:visible;   /* ต้องเป็น visible ไม่งั้นสะพาน ::after ด้านล่างจะถูกตัดทิ้ง */
}
/* สะพานล่องหนเชื่อมระหว่างเมนูกับกล่องเมนูย่อย
   ถ้าไม่มีอันนี้ พอเลื่อนเมาส์ลงมาผ่านช่องว่าง เมนูย่อยจะหายทันทีจนกดไม่ได้
   ทำให้เตี้ยพอครอบช่องว่างจริง (~2px) เพื่อไม่ให้ล้ำไปบังเมนูข้าง ๆ */
.dropdown::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}
.dropdown a{
  border-radius:12px;
  border-bottom:none;
  padding:10px 14px;
}
.dropdown a:hover,.dropdown a:focus-visible{
  background:var(--surface-3);
  color:var(--primary);
  padding-left:18px;
}
.nav-toggle{color:var(--primary);}

/* ---------- 4. BREADCRUMB ---------- */
.breadcrumb-wrap{
  background:transparent;
  border-bottom:none;
  padding:6px 0 2px;
}
.breadcrumb{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  box-shadow:var(--shadow-xs);
  padding:8px 18px;
  font-size:12.5px;
}

/* ---------- 5. BUTTONS ---------- */
.btn{
  border-radius:var(--radius-pill);
  padding:11px 24px;
  font-weight:700;
}
.btn-primary{
  background:linear-gradient(135deg,var(--primary),#8b5cf6);
  color:#fff;
  box-shadow:0 10px 24px rgba(109,74,224,.28);
}
.btn-primary:hover{
  background:linear-gradient(135deg,var(--primary-dark),#7c4ce8);
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(109,74,224,.36);
}
.btn-outline{
  background:#fff;
  border:1.5px solid var(--border);
  color:var(--primary);
  box-shadow:var(--shadow-xs);
}
.btn-outline:hover{background:var(--surface-3);border-color:var(--primary);color:var(--primary);}
.btn-accent{
  background:linear-gradient(135deg,var(--accent),#ffb01f);
  color:#4a3400;
  box-shadow:0 10px 24px rgba(245,165,36,.30);
}
.btn-accent:hover{transform:translateY(-2px);color:#4a3400;}
.btn-sm{padding:8px 17px;}
.btn-xs{padding:6px 13px;}
.badge{border-radius:var(--radius-pill);padding:4px 12px;}

/* ---------- 6. CARDS / SECTIONS ---------- */
.card{
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  box-shadow:var(--shadow-xs);
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}

.section-heading h2{
  font-size:1.4rem;font-weight:700;letter-spacing:-.015em;
}
.section-heading .dot{
  width:10px;height:10px;
  background:var(--accent);
  box-shadow:0 0 0 5px var(--accent-soft);
}
.section-heading .line{background:var(--border);}

/* ---------- 7. HOMEPAGE ---------- */
.hero{background:#2a1152;border-radius:0 0 var(--radius-xl) var(--radius-xl);overflow:hidden;}
.hero-slide::after{
  background:linear-gradient(120deg,rgba(35,12,74,.72) 0%,rgba(35,12,74,.24) 58%,transparent 100%);
}
.hero-action{border-radius:var(--radius-pill);font-weight:700;}
.hero-action.primary{background:var(--accent);color:#4a3400;border-color:var(--accent);}
.hero-action:hover{background:var(--accent);color:#4a3400;border-color:var(--accent);}
.hero-dot.active{background:var(--accent);}

.stats-strip{
  background:transparent;
  border-bottom:none;
  box-shadow:none;
  padding:22px 0 4px;
}
.stats-strip .stats-row{
  gap:14px;
  background:transparent;
}
.stat-cell{
  background:#fff;
  border:1px solid var(--border);
  border-right:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs);
  padding:20px 12px;
  transition:var(--transition);
}
.stat-cell:hover{background:#fff;transform:translateY(-4px);box-shadow:var(--shadow-md);}
.stat-cell:nth-child(1) .stat-icon{background:var(--p-violet);color:var(--p-violet-ink);}
.stat-cell:nth-child(2) .stat-icon{background:var(--p-peach);color:var(--p-peach-ink);}
.stat-cell:nth-child(3) .stat-icon{background:var(--p-mint);color:var(--p-mint-ink);}
.stat-cell:nth-child(4) .stat-icon{background:var(--p-amber);color:var(--p-amber-ink);}
.stat-icon{width:50px;height:50px;border-radius:17px;font-size:19px;}
.stat-num{color:var(--text-1);font-size:1.7rem;}
.stat-lbl{color:var(--text-3);}

.welcome{padding:56px 0;margin-top:6px;}
.welcome::before{
  background:linear-gradient(125deg,var(--primary) 0%,#7b52ea 48%,var(--secondary) 100%);
  border-radius:var(--radius-xl);
  inset:0 20px;
}
.welcome::after{inset:0 20px;border-radius:var(--radius-xl);}
.welcome-grid{padding:0 26px;}
.welcome-text h2{letter-spacing:-.02em;}
.btn-hero{border-radius:var(--radius-pill);font-weight:700;padding:11px 26px;}
.btn-hero-solid{background:var(--accent);color:#4a3400;box-shadow:0 12px 26px rgba(0,0,0,.18);}
.btn-hero-solid:hover{background:#ffd766;color:#4a3400;}
.director-float{border-radius:var(--radius-lg);}

.npanel{border-radius:0 0 var(--radius-md) var(--radius-md);}
.ntab{border-radius:var(--radius-pill) var(--radius-pill) 0 0;font-weight:700;}
.nthumb,.nnoimg{border-radius:14px;}
.nbadge{border-radius:var(--radius-pill);padding:3px 11px;}

.act-card{border-radius:var(--radius-md);}
.act-card:hover{box-shadow:var(--shadow-md);}

.widget{border-radius:var(--radius-md);box-shadow:var(--shadow-xs);}
.whead-icon{border-radius:12px;}
.ql-link{border-radius:14px;font-weight:600;}
.ql-icon{border-radius:11px;}
.gcard{border-radius:var(--radius-md);}
.council-home{border-radius:var(--radius-lg);}

/* ---------- 8. FOOTER ---------- */
footer{
  background:linear-gradient(135deg,#3a2072 0%,var(--primary-dark) 52%,#4b2a9a 100%);
  margin-top:64px;
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
}
footer::before{
  background:linear-gradient(90deg,var(--accent),#ff9d6b,var(--primary-light),#8fe0c4);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
}
.footer-social a{border-radius:14px;background:rgba(255,255,255,.14);}
.footer-social a:hover{background:var(--accent);color:#4a3400;}
.footer-contact-item i{color:var(--accent);}
.footer-col ul li a::before{color:var(--accent);}

/* ---------- 8b. ประสิทธิภาพตอนเลื่อนหน้า ----------
   backdrop-filter (กระจกฝ้า) บังคับให้เบราว์เซอร์เบลอพื้นหลังใหม่ "ทุกเฟรม"
   ที่ตัวมันยังอยู่ในจอ ทำให้เลื่อนผ่านส่วนหัว/แบนเนอร์แล้วรู้สึกหน่วง
   จึงเปลี่ยนเป็นสีทึบ/กึ่งโปร่งแทน หน้าตายังใกล้เคียงเดิมแต่ลื่นขึ้นมาก */
.logo-circle,
.hero-tag,
.hero-action,
.hero-arrow,
.director-float,
.btn-hero-outline{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.hero-tag{background:rgba(255,255,255,.22);}
.hero-action{background:rgba(255,255,255,.20);}
.hero-arrow{background:rgba(255,255,255,.22);}
.btn-hero-outline{background:rgba(255,255,255,.20);}
.director-float{background:rgba(255,255,255,.16);}
/* ---------- 8c. แถบสถิติผู้เข้าชม (ท้ายทุกหน้า) ---------- */
.visitor-bar{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;gap:10px 18px;
  margin:16px 0 4px;
  padding:11px 18px;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  font-size:12.5px;color:rgba(255,255,255,.72);
}
.visitor-bar-item{display:inline-flex;align-items:center;gap:7px;}
.visitor-bar-item i{color:var(--accent);font-size:12px;}
.visitor-bar-item b{color:#fff;font-weight:700;font-family:'Prompt',sans-serif;}
.visitor-bar-sep{width:1px;height:14px;background:rgba(255,255,255,.16);}
.visitor-dot{
  width:7px;height:7px;border-radius:50%;background:#4ade80;
  box-shadow:0 0 0 0 rgba(74,222,128,.6);
  animation:visitorPulse 2.2s infinite;
}
@keyframes visitorPulse{
  70%{box-shadow:0 0 0 8px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}
@media (max-width:520px){
  .visitor-bar{border-radius:var(--radius-md);gap:8px 14px;font-size:11.5px;}
  .visitor-bar-sep{display:none;}
}


/* ---------- 8d. กราฟิกตกแต่งส่วนหัว ---------- */
/* ชั้นที่ 1: แสงนุ่ม + ลายจุดโปร่ง ให้พื้นไม่แบน */
.site-header::before{
  background:
    radial-gradient(circle 300px at 86% 6%,  rgba(255,255,255,.20), transparent 70%),
    radial-gradient(circle 240px at 70% 96%, rgba(255,201,60,.24), transparent 72%),
    radial-gradient(circle 360px at 4% 92%,  rgba(0,0,0,.14),       transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.13) 0 1.6px, transparent 1.7px);
  background-size:auto, auto, auto, 26px 26px;
}

/* ชั้นที่ 2: ภูเขา/เนินซ้อนกัน + ดาวเล็ก ๆ วาดด้วย SVG ฝังในไฟล์ (ไม่ต้องโหลดรูปเพิ่ม) */
.site-header{
  border-radius:0 0 46px 46px;
  margin-bottom:-6px;
  isolation:isolate;
}
.site-header::after{
  content:'';
  position:absolute;left:0;right:0;bottom:0;
  height:100%;
  pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 260' preserveAspectRatio='xMidYMax slice'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='1258' cy='40' r='2.6' opacity='.55'/%3E%3Ccircle cx='1316' cy='86' r='1.8' opacity='.42'/%3E%3Ccircle cx='1196' cy='96' r='1.6' opacity='.38'/%3E%3Ccircle cx='1372' cy='34' r='2' opacity='.5'/%3E%3Ccircle cx='120' cy='44' r='2.2' opacity='.4'/%3E%3Ccircle cx='196' cy='92' r='1.5' opacity='.3'/%3E%3C/g%3E%3Cpath d='M0,214 C120,186 210,224 330,206 C450,188 520,150 640,176 C760,202 830,234 960,214 C1090,194 1180,160 1290,180 C1370,194 1410,210 1440,204 L1440,260 L0,260 Z' fill='%23ffffff' opacity='.07'/%3E%3Cpath d='M0,236 C140,214 250,246 380,232 C510,218 600,192 730,212 C860,232 950,252 1080,240 C1210,228 1330,206 1440,226 L1440,260 L0,260 Z' fill='%23ffffff' opacity='.10'/%3E%3C/svg%3E")
    no-repeat bottom center / cover;
  z-index:0;
}
.site-header .container{position:relative;z-index:1;}

/* โลโก้เด่นขึ้น มีวงแสงรอบ ๆ */
.logo-circle{
  position:relative;
  box-shadow:0 14px 30px rgba(35,15,80,.28), 0 0 0 8px rgba(255,255,255,.10);
}

@media (max-width:576px){
  .site-header{border-radius:0 0 26px 26px;}
  .site-header::before{background-size:auto, auto, auto, 20px 20px;}
}

/* ---------- 9. องค์ประกอบร่วมที่หน้าอื่นใช้ ---------- */
.page-hero,.page-head,.hero-band{border-radius:var(--radius-lg);}
.container{max-width:1200px;}

/* ---------- 10. RESPONSIVE ---------- */
@media (max-width:860px){
  .navbar{padding:8px 0;}
  .navbar-inner{border-radius:var(--radius-md);padding:2px 4px;}
  .nav-list{border-radius:0;padding-top:64px;}
  .nav-link{border-radius:12px;margin:2px 8px;}
  .nav-item.active > .nav-link{box-shadow:none;}
  .dropdown{border-radius:12px;box-shadow:none;padding:0;}
  .hero{border-radius:0 0 var(--radius-md) var(--radius-md);}
  .welcome::before,.welcome::after{inset:0 12px;border-radius:var(--radius-lg);}
  .welcome-grid{padding:0 18px;}
}
@media (max-width:576px){
  .logo-circle{width:52px;height:52px;border-radius:18px;}
  .logo-circle img{border-radius:13px;}
  .stat-cell{padding:14px 8px;border-radius:16px;}
  .stat-icon{width:42px;height:42px;border-radius:14px;font-size:16px;}
  footer{border-radius:var(--radius-md) var(--radius-md) 0 0;}
}


/* =====================================================================
   ข้อมูลเปิดเผย — การมาเรียน (Home Room) และงบประมาณ (ระบบงานแผน)
   ===================================================================== */
.opendata{padding:14px 0 6px;}
.od-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:18px;}
.od-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xs);
  padding:20px 22px 22px;
}
.od-head{display:flex;align-items:center;gap:13px;margin-bottom:16px;}
.od-head h3{font-family:'Prompt',sans-serif;font-size:1.02rem;font-weight:700;color:var(--text-1);line-height:1.3;}
.od-head small{font-size:12px;color:var(--text-3);}
.od-icon{
  width:46px;height:46px;flex-shrink:0;border-radius:16px;
  display:inline-flex;align-items:center;justify-content:center;font-size:18px;
}
.od-icon-mint{background:var(--p-mint);color:var(--p-mint-ink);}
.od-icon-amber{background:var(--p-amber);color:var(--p-amber-ink);}

.od-sub{
  font-family:'Prompt',sans-serif;font-size:12.5px;font-weight:700;
  color:var(--text-2);margin:16px 0 11px;
  padding-top:14px;border-top:1px solid var(--border-soft);
}

/* ---- ค่าเฉลี่ยทั้งภาคเรียน ---- */
.od-avg{
  display:flex;align-items:center;gap:16px;
  padding:15px 17px;border-radius:var(--radius-md);
  background:linear-gradient(135deg,#f2ecff 0%,#e6f7f1 100%);
  border:1px solid #e6dcff;
}
.od-avg-num{
  font-family:'Prompt',sans-serif;font-size:2.15rem;font-weight:800;
  color:var(--primary);line-height:1;letter-spacing:-.02em;flex-shrink:0;
}
.od-avg-num span{font-size:1rem;margin-left:2px;}
.od-avg-txt b{display:block;font-size:13px;font-weight:700;color:var(--text-1);}
.od-avg-txt small{display:block;font-size:11.5px;color:var(--text-3);margin-top:3px;}

/* ---- การมาเรียนรายวัน ---- */
.od-days{display:grid;gap:11px;}
.od-day{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;}
.od-day-date{
  width:44px;height:44px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--border-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.od-day-date b{font-family:'Prompt',sans-serif;font-size:15px;font-weight:700;color:var(--text-1);line-height:1;}
.od-day-date span{font-size:10px;color:var(--text-3);margin-top:2px;}
.od-day-body{min-width:0;}
.od-day-top{display:flex;align-items:baseline;gap:9px;margin-bottom:5px;flex-wrap:wrap;}
.od-day-pct{font-family:'Prompt',sans-serif;font-size:14px;font-weight:800;}
.od-day-detail{font-size:11.5px;color:var(--text-3);}
.od-good{color:#12916d;} .od-warn{color:#b07d0c;} .od-bad{color:#d4407e;}

.od-track{display:block;height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.od-track i{display:block;height:100%;border-radius:999px;}
.od-fill-good{background:linear-gradient(90deg,#8fd9c0,#12916d);}
.od-fill-warn{background:linear-gradient(90deg,#ffd98a,#e0a020);}
.od-fill-bad{background:linear-gradient(90deg,#ffb3cd,#d4407e);}
.od-fill-amber{background:linear-gradient(90deg,var(--accent),#ff9d6b);}

/* ---- งบประมาณ ---- */
.od-money{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.od-money-item{
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  padding:12px 14px;
}
.od-money-item span{display:block;font-size:11.5px;color:var(--text-3);margin-bottom:4px;line-height:1.35;}
.od-money-item b{
  font-family:'Prompt',sans-serif;font-size:1.1rem;font-weight:700;
  color:var(--text-1);line-height:1.2;
}
.od-money-item b small{font-size:11px;font-weight:500;color:var(--text-3);}
.od-money-remain{background:linear-gradient(135deg,#f2ecff,#fff3ea);border-color:#e6dcff;}
.od-money-remain b{color:var(--primary);}
.od-money-note{font-size:11.5px;color:var(--text-3);margin-top:10px;line-height:1.65;}

/* ── งบประมาณแยกตามแหล่งงบ: แท่งซ้อนพร้อมตัวเลขในกราฟ ── */
.od-src{list-style:none;display:grid;gap:18px;}
.od-src > li{
  padding:13px 14px 12px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  background:var(--surface-2);
}
.od-src-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:3px;}
.od-src-name{
  font-family:'Prompt',sans-serif;font-size:13px;font-weight:600;color:var(--text-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.od-src-total{
  font-family:'Prompt',sans-serif;font-size:13.5px;font-weight:700;
  color:var(--text-1);white-space:nowrap;
}
.od-src-total em{font-style:normal;font-size:10.5px;font-weight:400;color:var(--text-3);}
.od-src-sub{font-size:11px;color:var(--text-3);margin-bottom:9px;}
.od-src-sub b{color:var(--primary);font-weight:700;}

/* แท่งซ้อน: เบิกจ่าย + ค้างเบิก + คงเหลือ = เงินที่ใช้ได้ทั้งหมด */
.od-stack{
  display:flex;height:30px;border-radius:10px;overflow:hidden;
  background:var(--surface-3);
}
.od-stack i{
  display:flex;align-items:center;justify-content:center;
  min-width:0;font-style:normal;transition:filter .2s;
}
.od-stack i span{
  font-family:'Prompt',sans-serif;font-size:11px;font-weight:700;color:#fff;
  padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:clip;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
}
.od-stack i:hover{filter:brightness(1.08);}
.od-seg-spent{background:linear-gradient(180deg,#f7a83c,#e8842a);}
.od-seg-pending{background:linear-gradient(180deg,#b9b2d6,#9a91c4);}
.od-seg-remain{background:linear-gradient(180deg,#6fcfae,#2fa77f);}


.od-legend{
  display:flex;flex-wrap:wrap;gap:6px 16px;
  margin-top:9px;font-size:11px;color:var(--text-3);
}
.od-legend span{display:inline-flex;align-items:center;gap:6px;}
.od-legend b{color:var(--text-1);font-weight:700;}
.od-legend em{font-style:normal;color:var(--text-3);}
.od-legend i{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.od-dot-spent{background:#e8842a;}
.od-dot-pending{background:#9a91c4;}
.od-dot-remain{background:#2fa77f;}

@media (max-width:560px){
  .od-stack{height:26px;}
  .od-stack i span{font-size:10px;}
  .od-legend{gap:5px 12px;font-size:10.5px;}
}


.od-note{margin-top:14px;font-size:12px;color:var(--text-3);display:flex;align-items:center;gap:8px;}
.od-note i{color:var(--primary-light);}

@media (max-width:560px){
  .od-card{padding:16px 15px 18px;border-radius:var(--radius-md);}
  .od-money{grid-template-columns:1fr;}
  .od-avg-num{font-size:1.8rem;}
  .od-day-detail{font-size:10.5px;}
}

/* ปุ่มดูแหล่งงบที่เหลือ */
.od-more-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:14px;padding:10px 16px;
  border:1px dashed var(--border);border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--text-2);
  font-family:'IBM Plex Sans Thai', sans-serif;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:background-color .2s,border-color .2s,color .2s;
}
.od-more-btn:hover{background:var(--surface-3);border-color:var(--primary);color:var(--primary);}
.od-more-btn i{font-size:10px;transition:transform .25s;}
.od-more-btn.is-open i{transform:rotate(180deg);}

/* ตัวเลือกปีงบประมาณบนหัวการ์ด */
.od-fy{margin-left:auto;}
.od-fy select{
  border:1px solid var(--border);border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--text-2);
  padding:6px 12px;font-family:'IBM Plex Sans Thai', sans-serif;font-size:12.5px;font-weight:600;
  cursor:pointer;
}
.od-fy select:focus{outline:none;border-color:var(--primary);}
.od-money{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:820px){.od-money{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.od-money{grid-template-columns:1fr;}}

/* แท็บเลือกช่วงเวลาของสถิติการมาเรียน */
.od-tabs{display:flex;gap:6px;padding:4px;border-radius:var(--radius-pill);background:var(--surface-2);border:1px solid var(--border);margin-bottom:16px;}
.od-tabs a{
  flex:1;text-align:center;padding:7px 10px;border-radius:var(--radius-pill);
  font-size:12.5px;font-weight:600;color:var(--text-2);
  transition:background-color .18s,color .18s;
}
.od-tabs a:hover{background:var(--surface-3);color:var(--primary);}
.od-tabs a.is-on{background:linear-gradient(135deg,var(--primary),#8b5cf6);color:#fff;}

/* อัตราการมาเรียนแยกรายชั้น */
.od-class{list-style:none;display:grid;gap:9px;margin-bottom:4px;}
.od-class li{display:grid;grid-template-columns:64px 1fr 52px;align-items:center;gap:10px;}
.od-class-name{
  font-size:12.5px;font-weight:600;color:var(--text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.od-class b{font-size:12.5px;text-align:right;font-weight:700;}
@media (max-width:560px){
  .od-class li{grid-template-columns:54px 1fr 46px;}
  .od-tabs a{font-size:11.5px;padding:6px 6px;}
}


/* ช่วงวันที่ใต้หัวข้อ "การมาเรียนรายวัน" */
.od-sub-note{
  display:block;margin-top:3px;
  font-weight:400;font-size:11.5px;color:var(--text-3);
}

/* ── บล็อก "วันนี้" ของสถิติการมาเรียน ── */
.od-today{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px 16px 12px;
  margin-bottom:16px;
  background:linear-gradient(135deg,#f4fbf8 0%,#f5f2ff 100%);
}
.od-today-good{border-color:#c9ecdf;}
.od-today-warn{border-color:#f3e0b4;background:linear-gradient(135deg,#fffaf0 0%,#fdf6ff 100%);}
.od-today-bad{border-color:#f6cddc;background:linear-gradient(135deg,#fff5f8 0%,#fdf4ff 100%);}

.od-today-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
.od-today-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Prompt',sans-serif;font-size:12.5px;font-weight:700;color:var(--text-1);
}
.od-today-tag i{color:var(--primary);}
.od-today-rate{font-family:'Prompt',sans-serif;font-size:1.35rem;font-weight:800;line-height:1;}

.od-today-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;}
.od-today-item{
  text-align:center;padding:10px 4px;
  border-radius:14px;background:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.9);
}
.od-today-item i{display:block;font-size:13px;margin-bottom:5px;}
.od-today-item b{
  display:block;font-family:'Prompt',sans-serif;
  font-size:1.15rem;font-weight:800;line-height:1;color:var(--text-1);
}
.od-today-item span{display:block;font-size:10.5px;color:var(--text-3);margin-top:4px;}
.od-today-item.is-zero{opacity:.5;}
.od-tone-good i{color:#12916d;}
.od-tone-warn i{color:#b07d0c;}
.od-tone-bad  i{color:#d4407e;}
.od-tone-sky  i{color:#2f6fd0;}
.od-tone-violet i{color:#6d4ae0;}

.od-today-foot{margin-top:10px;font-size:11.5px;color:var(--text-3);text-align:right;}
.od-today-foot b{color:var(--text-2);font-weight:700;}
.od-today-empty{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:16px;font-size:12.5px;color:var(--text-3);
}

@media (max-width:560px){
  .od-today-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .od-today-item b{font-size:1rem;}
  .od-today-rate{font-size:1.15rem;}
}

/* ยอดที่ตั้งไว้ วงเล็บต่อท้ายยอดที่ได้รับจริง */
.od-src-plan{color:var(--text-3);font-size:10.5px;}

/* =====================================================================
   เมนูมือถือ — ใส่คำว่า "เมนู" กำกับ เพราะขีดสามขีดอย่างเดียวหลายคนไม่รู้ว่าคืออะไร
   ===================================================================== */
.nav-toggle{
  display:none;
  align-items:center;gap:9px;
  margin-left:auto;
  padding:9px 16px 9px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:#fff;
  color:var(--primary);
  font-family:'Prompt',sans-serif;font-size:14px;font-weight:600;
  box-shadow:var(--shadow-xs);
  transition:background-color .2s,border-color .2s,color .2s;
}
.nav-toggle i{font-size:16px;line-height:1;}
.nav-toggle-label{line-height:1;}
.nav-toggle[aria-expanded="true"]{
  background:linear-gradient(135deg,var(--primary),#8b5cf6);
  border-color:transparent;color:#fff;
}

@media (max-width:860px){
  .nav-toggle{display:inline-flex;}
  .navbar-inner{justify-content:space-between;padding:6px 8px 6px 16px;}
  .navbar-inner::before{
    content:'โรงเรียนวังกรดพิทยา';
    font-family:'Prompt',sans-serif;font-size:13px;font-weight:600;
    color:var(--text-2);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    align-self:center;
  }

  /* ลิ้นชักเมนู: เลื่อนเข้ามาจากขวา ไม่ใช่ทับเต็มจอแบบเดิม */
  .nav-list{
    position:fixed;top:0;right:0;left:auto;bottom:0;
    width:min(320px,86vw);
    background:#fff;
    border-radius:var(--radius-lg) 0 0 var(--radius-lg);
    box-shadow:-14px 0 44px rgba(60,40,110,.20);
    padding:64px 12px 24px;
    overflow-y:auto;
    display:flex !important;
    flex-direction:column;
    justify-content:flex-start;   /* ค่าเดิมเป็น center ทำให้เมนูลอยกลางจอ มีช่องว่างบนล่างเยอะ */
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    z-index:10002;
  }
  .nav-list.open{transform:translateX(0);}

  /* ฉากหลังมืด ต้องอยู่ที่ body ไม่ใช่ในลิ้นชัก
     เพราะลิ้นชักใช้ transform ซึ่งทำให้ position:fixed ข้างในยึดกับตัวลิ้นชักเอง
     ฉากหลังจะไปทับเนื้อหาในลิ้นชักแทนที่จะคลุมทั้งจอ */
  body.nav-open::after{
    content:'';
    position:fixed;inset:0;
    background:rgba(40,25,80,.42);
    z-index:10001;
  }
  /* ตอนเปิดเมนู ปุ่มปิดต้องไปอยู่มุมขวาบนของลิ้นชัก
     ถ้าปล่อยไว้ที่เดิมมันจะทับรายการเมนูอันที่สองพอดี */
  .nav-toggle{position:relative;z-index:10003;}
  .nav-toggle[aria-expanded="true"]{position:fixed;top:14px;right:16px;}
  /* .navbar เป็น sticky ที่สร้าง stacking context ของตัวเอง
     ลิ้นชักที่อยู่ข้างในจึงถูกฉากหลังทับ ต้องยกทั้งแถบขึ้นเหนือฉากหลัง */
  .navbar{z-index:10002;}

  .nav-list > li{margin-bottom:2px;}
  .nav-link{
    border-radius:14px;
    padding:13px 16px !important;
    font-size:15px;
    border-bottom:none !important;
    justify-content:space-between;
  }
  .nav-item.active > .nav-link{box-shadow:none;}
  .nav-link .chevron{font-size:11px;opacity:.7;}

  .dropdown{
    position:static;
    background:var(--surface-2);
    border:none;border-radius:12px;
    box-shadow:none;
    margin:2px 0 6px;
    padding:4px;
  }
  .dropdown::after{display:none;}
  .dropdown a{
    padding:10px 14px !important;
    background:transparent;
    border-radius:10px;
    font-size:13.5px;
  }
}