.table-responsive-container{
   max-width      : 100%;
   margin-inline  : auto;
   overflow-x     : auto;
}

table{
   background-color  : var(--color-grey25);
   border-collapse   : collapse;
   width             : 100%;
}

thead th{background-color  : var(--color-grey-blue-cool);}
thead th:first-child{border-top-left-radius: var(--radius-25);}
thead th:last-child{border-top-right-radius: var(--radius-25);}

th,td {padding : 1rem;}
th{text-align  : left;}

tr:nth-of-type(2n) {background: hsl(0 0% 20% / 0.3);}

/* SORT */
.th-sortable{
   position       : relative;
   padding-right  : 2.2rem; /* beri ruang untuk panah*/
   transition     : background-color 300ms;
}
.th-sortable:hover{
   background-color: var(--color-grey50);
}

/* Setting Panah Awal - Belum aktif(opsional) */
.th-sortable::after{
   /* content     : '↕'; */
   content     : '';
   position    : absolute;
   right       : 1rem;
   width       : 1.2rem;
   height      : 1.2rem;
   top         : 50%;
   transform   : translateY(-50%);
   opacity     : 0.5;
   background-image     : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23f5f5f7'%3E%3Cpath d='m480-236 93-93q12-12 29-12t29 12q12 12 12 29t-12 29L508-148q-6 6-13 8.5t-15 2.5q-8 0-15-2.5t-13-8.5L329-271q-12-12-12-29t12-29q12-12 29-12t29 12l93 93Zm0-484-93 93q-12 12-29 12t-29-12q-12-12-12-29t12-29l123-123q6-6 13-8.5t15-2.5q8 0 15 2.5t13 8.5l123 123q12 12 12 29t-12 29q-12 12-29 12t-29-12l-93-93Z'/%3E%3C/svg%3E");
   background-repeat    : no-repeat;
   background-position  : center;
   background-size      : contain;

   /*
   -webkit-mask-image   : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m480-236 93-93q12-12 29-12t29 12q12 12 12 29t-12 29L508-148q-6 6-13 8.5t-15 2.5q-8 0-15-2.5t-13-8.5L329-271q-12-12-12-29t12-29q12-12 29-12t29 12l93 93Zm0-484-93 93q-12 12-29 12t-29-12q-12-12-12-29t12-29l123-123q6-6 13-8.5t15-2.5q8 0 15 2.5t13 8.5l123 123q12 12 12 29t-12 29q-12 12-29 12t-29-12l-93-93Z'/%3E%3C/svg%3E");
   mask-image           : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m480-236 93-93q12-12 29-12t29 12q12 12 12 29t-12 29L508-148q-6 6-13 8.5t-15 2.5q-8 0-15-2.5t-13-8.5L329-271q-12-12-12-29t12-29q12-12 29-12t29 12l93 93Zm0-484-93 93q-12 12-29 12t-29-12q-12-12-12-29t12-29l123-123q6-6 13-8.5t15-2.5q8 0 15 2.5t13 8.5l123 123q12 12 12 29t-12 29q-12 12-29 12t-29-12l-93-93Z'/%3E%3C/svg%3E");
   -webkit-mask-repeat  : no-repeat;
   mask-repeat          : no-repeat;
   background-color     : red;
   */
}

/* Panah ASC Naik */
.th-sortable.sort-asc::after{
   /* content : '↑'; */
   content  : '';
   opacity  : 1;
   /* color    : #2563eb; */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23f5f5f7'%3E%3Cpath d='M480-528 324-372q-11 11-28 11t-28-11q-11-11-11-28t11-28l184-184q12-12 28-12t28 12l184 184q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-528Z'/%3E%3C/svg%3E");
}
/* Panah DESC Turun */
.th-sortable.sort-desc::after{
   /* content : '↓'; */
   content  : '';
   opacity  : 1;
   /* color    : #2563eb; */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23f5f5f7'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E");
   
}
/* SORT */

/* ANIMASI */
@keyframes pulse-animation {
   0% {
      transform   : scale(1);
      opacity     : 1;
   }
   25%{
      transform   : scale(1.35); /* membesar 20% */
      color       : var(--color-grey-light);
      opacity     : 0.35;
   }
   100%{
      transform   : scale(1);
      opacity     : 1;
   }
}

.pulse{
   display     : inline-block; /*transform tidak jalan pada element inline murni seperti span */
   animation   : pulse-animation 0.5s ease-in;
}
/* ANIMASI */