.table-responsive {
  height: 80vh;
  margin: 2rem 0;
  overflow: auto;
  scroll-snap-type: both mandatory;
  white-space: nowrap;
}
thead {
    position: sticky;
    top: 0;
}
.table thead tr th{
  background-color: #2984af !important;
 color:#fff;
 border-left: none !important;
 border-right:none !important;
 border-top: none !important;
  border-bottom:#fff !important;
}

.table tbody tr td{
  border-bottom:none !important;
}

.breadcumb-active{
  color:#6CB8DC !important;
}

    :root {
      --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
                    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;important:  !important;
    }
    html, body { font-family: var(--font-sans); }
    /* Contoh variable weight */
    .thin   { font-variation-settings: "wght" 300; }
    .bold   { font-variation-settings: "wght" 700; }
    /* Contoh stylistic sets (ss01=lancip, ss02=lurus, ss03=lingkar) */
    .lancip { font-feature-settings: "ss01" 1; }
    .lurus  { font-feature-settings: "ss02" 1; }
    .lingkar{ font-feature-settings: "ss03" 1; }

    /* Bonus: contoh styling tabel */
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: .75rem 1rem; border-bottom: 1px solid #e5e7eb; }
    th {  font-variation-settings: "wght" 700; }
    tbody tr:hover { background: #fafafa; }