/* โทนพรีเซนต์งาน — ทางการขึ้น ใช้ทับ skin.css เดิม ไม่แก้ house-style ต้นทาง */
:root{
  --p-navy:15 23 42;      /* น้ำเงินเข้ม/กรมท่า — โทนหลัก */
  --p-accent:29 78 216;   /* ฟ้าองค์กร — จุดเน้น */
  --p-accent-soft:239 246 255;
  --p-gold:180 138 45;    /* ทองอ่อน — ใช้จุดเดียวเพื่อความหรู ไม่ใช้พร่ำเพรื่อ */
}

/* แถบบอกว่าเป็นตัวอย่าง — เปลี่ยนจากป้ายเหลืองเตือนเป็นแถบทางการมุมขวาบน */
.demo-banner{
  background:rgb(var(--p-navy));
  color:#fff;
  border-bottom:none;
  font-size:12px;
  letter-spacing:.03em;
  padding:7px 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.demo-banner b{
  background:rgb(var(--p-gold)/.9);
  color:#1a1400;
  padding:1px 8px;
  border-radius:4px;
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* แถบบนสุด — โลโก้/ชื่อระบบทางการขึ้น */
.top{
  height:64px;
  background:#fff;
  border-bottom:1px solid rgb(var(--line)/.08);
  box-shadow:0 1px 0 rgb(var(--p-navy)/.02);
}
.top .mark{
  background:rgb(var(--p-navy));
  color:#fff;
  border:none;
  border-radius:9px;
  font-weight:700;
}
.top b.disp{font-size:16px;letter-spacing:-.01em}
.top .chip{
  border-color:rgb(var(--p-navy)/.14);
  background:rgb(var(--p-accent-soft));
  color:rgb(var(--p-accent));
  font-weight:600;
}

/* เมนูซ้าย — สถานะเลือกใช้สีองค์กรแทนดำล้วน */
.opnav-item.on{background:rgb(var(--p-navy))}
.opnav-item.on b{color:#fff}

/* หัวข้อหลัก + เส้นใต้บาง ๆ ให้ดูเป็นทางการ */
.sec-h{
  font-size:19px;
  padding-bottom:10px;
  border-bottom:1px solid rgb(var(--line)/.08);
  display:flex;
  align-items:center;
  gap:10px;
}

/* กล่องสรุปตัวเลข — เน้นด้วยแถบสีซ้าย + ตัวเลขใหญ่หรูขึ้น */
.stat{
  border-left:3px solid rgb(var(--p-accent));
  border-radius:10px;
  padding:16px 17px;
}
.stat .t{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:rgb(var(--muted))}
.stat .v{font-size:26px;color:rgb(var(--p-navy))}

/* ปุ่มหลัก — ใช้สีองค์กร */
.btn-primary{background:rgb(var(--p-navy));border-color:rgb(var(--p-navy))}
.btn-primary:hover{background:rgb(var(--p-accent));border-color:rgb(var(--p-accent))}
.opnav-item.on{background:rgb(var(--p-navy))}

/* หัวตาราง — เข้มขึ้นเล็กน้อย ดูเป็นรายงานทางการ */
table.tbl th{
  background:rgb(var(--p-navy)/.02);
  color:rgb(var(--p-navy));
  font-weight:700;
}

/* ป้ายสถานะ — ใช้ตัวหนาขึ้นให้ดูเป็นรายงาน */
.zone{font-weight:700;letter-spacing:.01em}

/* ส่วนเปิด (hero) สำหรับหน้าแดชบอร์ด */
.hero{
  background:linear-gradient(135deg, rgb(var(--p-navy)) 0%, rgb(30 58 95) 60%, rgb(var(--p-accent)) 130%);
  color:#fff;
  border-radius:16px;
  padding:28px 30px;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.hero h1{font-family:"Bai Jamjuree",sans-serif;font-size:24px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.hero p{font-size:13.5px;color:rgb(255 255 255/.78);max-width:520px;line-height:1.6}
.hero .hero-meta{display:flex;gap:22px;flex-wrap:wrap}
.hero .hero-meta div{text-align:right}
.hero .hero-meta b{font-family:"Bai Jamjuree";font-size:22px;display:block}
.hero .hero-meta span{font-size:11px;color:rgb(255 255 255/.7);text-transform:uppercase;letter-spacing:.05em}

@media(max-width:760px){
  .hero{padding:22px 20px}
  .hero .hero-meta{justify-content:flex-start}
  .hero .hero-meta div{text-align:left}
}