
/* --- banner ------------------------------------------------------------- */
.sp__banner{position:relative;overflow:hidden;margin:0 0 22px;padding:clamp(20px,3.4vw,34px) clamp(18px,3vw,34px);border-radius:18px;color:#fff;background:linear-gradient(120deg,var(--green) 0%,var(--teal) 100%);box-shadow:0 10px 28px rgba(0,60,55,.18)}
.sp__banner::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 80% at 88% 18%,rgba(255,255,255,.20),transparent 70%),repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 14px,transparent 14px 28px)}
.sp__banner-inner{position:relative;z-index:1}
.sp__banner .sp__breadcrumb{color:rgba(255,255,255,.85);margin-bottom:10px}
.sp__banner .sp__breadcrumb a{color:#fff}
.sp__banner .sp__header{margin-bottom:0}
.sp__banner .sp__header h1{color:#fff;text-shadow:0 2px 10px rgba(0,40,36,.25)}
.sp__banner .sp__header p{color:rgba(255,255,255,.92)}

/* --- dropdown tahun ----------------------------------------------------- */
.sp__select{appearance:none;-webkit-appearance:none;padding:8px 34px 8px 13px;border:1px solid var(--line);border-radius:10px;background-color:var(--bs-body-bg);color:var(--ink);font-family:inherit;font-size:.82rem;font-weight:600;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--teal) 50%),linear-gradient(135deg,var(--teal) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.sp__select:hover{border-color:var(--teal)}
.sp__select:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(17,128,143,.15)}

/* --- jadual 3 lajur (tarikh · tajuk · muat turun) ----------------------- */
.sp__table thead th.sp__th-doc{text-align:right}
.sp__table tbody td.sp__td-doc{text-align:right;min-width:150px}
.sp__td-doc .sp__acts{justify-content:flex-end}
@media (max-width:680px){
  .sp__table thead th.sp__th-doc,.sp__table tbody td.sp__td-doc{text-align:left}
  .sp__td-doc .sp__acts{justify-content:flex-start}
}
