@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');


html {
    scroll-padding-top: 100px;
}

body {
    font-family: 'Noto Sans Thai', sans-serif;
}

.active-link {
    background-color: #bfdbfe;
    border-color: #0284c7;
    font-weight: 700;
    transform: scale(1.05);
    color: #1e3a8a;
}

.heading {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;     /* font-bold */
  color: #2563eb;       /* text-blue-600 */
  margin-bottom: 1rem;  /* mb-4 */
}

p {
  margin-bottom: 0.75rem !important; /* mb-3 */
}

.sidebar-link {
  transition: all 0.3s ease;
}

.tableOfContentBox {
  position: sticky;
  top: 6rem;                  /* top-24 */
  line-height: 1.375;         /* leading-snug */
  font-size: 1.15rem;         /* text-[1.15rem] */
  display: flex;
  flex-direction: column;
  gap: 1rem;                  /* space-y-4 */
}

.tableOfContent {
  display: block;
  background-color: #eff6ff;     /* bg-blue-50 */
  border-left: 4px solid #60a5fa; /* border-blue-400 */
  padding: 0.5rem 1rem;          /* py-2 px-4 */
  border-radius: 0.5rem;         /* rounded */
  font-weight: 500;              /* font-medium */
  color: #2563eb;                /* text-blue-600 */
  transition: all 0.3s ease-in-out;
}

.tableOfContent:hover {
  background-color: #dbeafe; /* hover:bg-blue-100 */
}



.tableOfContentBox {
  @apply sticky top-24 space-y-4 text-[1.15rem] leading-snug;
}

.tableOfContent {
  @apply block bg-blue-50 hover:bg-blue-100 border-l-4 border-blue-400 px-4 py-2 rounded font-medium text-blue-600 transition-all duration-300 ease-in-out;
}