/* ---------- ชั้นเอฟเฟค (CSS ล้วน ไม่แตะข้อมูล) ---------- */
body{background-image:
  radial-gradient(900px 380px at 12% -8%,#E4EDF8 0%,transparent 70%),
  radial-gradient(700px 320px at 92% 0%,#EDF1F6 0%,transparent 65%);
  background-attachment:fixed}

/* การ์ด: ลอยขึ้นตอนชี้ */
.plan,.sec{transition:box-shadow .22s ease,border-color .22s ease,transform .22s ease}
.plan:hover,.sec:hover{border-color:#C7D6E8;box-shadow:0 6px 20px rgba(26,78,138,.09)}
.sec:hover{transform:translateY(-1px) scale(1.006)}
.sec[open]:hover{transform:none}  /* กางอยู่ไม่ขยาย ตัวเลขในตารางจะเบลอ */

/* หัวการ์ด: ไล่เฉดบาง ๆ + เรืองน้ำเงินตอนชี้ */
.sec>summary{background:linear-gradient(180deg,#FCFDFE 0%,#F3F6FA 100%);
  transition:background .2s ease}
.sec>summary:hover{background:linear-gradient(180deg,#F6FAFF 0%,#EAF1FA 100%)}
.sec[open]>summary{box-shadow:inset 0 -1px 0 var(--rule2)}

/* แถวตาราง: ไฮไลต์น้ำเงินอ่อน + ขีดหมึกด้านซ้าย */
tbody tr td{transition:background .14s ease}
tbody tr:hover td{background:#F3F8FD}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--acc)}

/* กางการ์ด: เนื้อในไหลลง */
.sec[open]>.tblwrap{animation:slidein .2s ease both}
@keyframes slidein{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ตัวเลข KPI: ขึ้นมาเบา ๆ ตอนคำนวณใหม่ */
.v{animation:rise .3s ease both}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ปุ่ม: กดแล้วยุบ */
.step,.dstep,.pickbtn,.qlist .q,#side .dl,.seg button{transition:transform .12s ease,border-color .15s,background .15s,color .15s}
.step:active,.dstep:active,.pickbtn:active,.qlist .q:active,#side .dl:active{transform:scale(.95)}

/* ไซด์บาร์: หน้าที่เปิดอยู่มีมิติเท่าปุ่มกะ */
#side a.on{background:linear-gradient(180deg,#2A66A9 0%,#1A4E8A 60%,#14406F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 6px rgba(26,78,138,.28)}

/* เส้นคั่นโซน: จางหัวท้าย */
.zhead i{background:linear-gradient(90deg,var(--rule),transparent)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* การ์ดที่กางอยู่ = ใช้งานอยู่ */
.sec[open]{border-color:#C7D6E8}
.sec[open]>summary{box-shadow:inset 0 -1px 0 var(--rule2)}