/* palette & radius */
$blue-50 : #eff6ff;
$blue-600: #2563eb;
$slate-600:#475569;
$radius  : .75rem;
$shadow  : 0 14px 30px -18px rgba(0,0,0,.18);
$shadow-h: 0 20px 46px -22px rgba(0,0,0,.24);

/* wrapper */
.pp-wrap{
  max-width: 1250px;
  max-width: 100%;
  margin-inline: auto;
  padding: 2rem 1rem;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(10px) saturate(165%);
  border-radius: $radius;
  box-shadow: $shadow;
  transition: .35s;

  &:hover{ transform: translateY(-4px); box-shadow: $shadow-h; background:#fff }
}

/* table */
.pp-table{
  width:100%; border-collapse: collapse; font-size:.82rem;
  min-width:950px;                 /* ให้เลื่อนแนวนอนได้บนจอแคบ */

  thead{
    background:$blue-600;
    color:#fff;
    th{ padding:.55rem .6rem; font-weight:600; text-align:center; white-space:nowrap }
  }

  tbody td{ padding:.45rem .6rem; white-space:nowrap }
  tbody tr:nth-child(even){ background:$blue-50 }
  tbody tr:hover{ background:#dbeafe }
}

/* scroll subtle */
.pp-wrap{ overflow-x:auto }
.pp-wrap::-webkit-scrollbar{ height:.5rem }
.pp-wrap::-webkit-scrollbar-thumb{ background:#c4c4c4; border-radius:9999px }
