/* ---- Heading scale + màu ---- */
:root{
  --primary: #0f172a;     /* màu thương hiệu của bạn */
  --heading: #0f172a;     /* text màu đậm */
}

/* Áp dụng chung cho mọi heading trong bài viết */
.prose :is(h1,h2,h3,h4,h5,h6){
  margin-top: .5em;
  margin-bottom: .5em;
  line-height: 1.25;
  font-weight: 800;
  color: var(--heading);
  scroll-margin-top: 96px; /* tránh bị header dính che khi nhảy anchor */
}

/* Thang kích thước (H1 lớn nhất) – responsive với clamp() */
.prose h1{ font-size: clamp(2rem, 1.4rem + .4vw, 2.75rem); }   /* ~32–44px */
.prose h2{ font-size: clamp(1.5rem, 1.2rem + .2vw, 2rem); }     /* ~24–32px */
.prose h3{ font-size: clamp(1.25rem, 1.1rem + .1vw, 1.5rem); }   /* ~20–24px */
.prose h4{ font-size: 1.125rem; }                                 /* 18px */
.prose h5{ font-size: 1rem; }                                      /* 16px */
.prose h6{ font-size: .9375rem; letter-spacing:.01em; }            /* 15px */

/* Nhấn màu thương hiệu cho H2/H3 (giống ảnh mẫu) */
.prose :is(h2,h3){ color: var(--primary); }

/* Nếu có heading có link bên trong: giữ màu khi hover cho thân thiện */
.prose :is(h1,h2,h3,h4,h5,h6) a{ color: inherit; text-decoration: none; }
.prose :is(h1,h2,h3,h4,h5,h6) a:hover{ text-decoration: underline; }


/* TOC — chỉ CSS, không dùng JS */
  .table_of_content .toc {
    --toc-indent: 1em;               /* mức thụt thêm cho mỗi cấp con */
    font-size: .95rem;
  }

  /* Reset khoảng cách & cho marker đứng ngoài */
  .table_of_content .toc :where(ul, ol){
    margin: 0;
    padding-left: 1.5em;             /* khoảng cách cho cấp 1 (tuỳ thích) */
    list-style-position: outside;
  }
  /* Nếu có cả ol thì vẫn hiển thị số */
  .table_of_content .toc ol{ list-style-type: decimal; }
  .table_of_content .toc ul{ list-style-type: disc; }

  /* Mỗi cấp lồng bên trong sẽ thụt thêm đúng 1em */
  .table_of_content .toc :where(ul, ol) :where(ul, ol){
    padding-left: var(--toc-indent);
    margin-left: 0;                   /* tránh cộng dồn margin trình duyệt */
  }

  /* Dự phòng cho HTML lồng chưa chuẩn (ul xuất hiện trực tiếp sau ul) */
  .table_of_content .toc ul + ul,
  .table_of_content .toc ol + ul,
  .table_of_content .toc ul + ol,
  .table_of_content .toc ol + ol{
    margin-left: var(--toc-indent);
  }

  /* Dãn dòng nhẹ cho từng mục */
  .table_of_content .toc li{ margin: .25rem 0; }
  .table_of_content .toc a{ text-decoration: none; }
  .table_of_content .toc a:hover{ color: #0ea5e9; } /* primary */


/* đặt trong style.css, sau Tailwind */
b,
strong{
  color:#475569 !important;        /* slate-600: nhạt hơn */
  font-weight:600 !important;      /* giảm độ đậm (tuỳ chọn) */
}

/* Danh sách trong nội dung */
.prose ol,
.prose ul {
  list-style: revert;
  padding-inline-start: 2.5em;
}

/* Marker có size = size chữ của li */
.prose li::marker{
  font-size: inherit;               /* hoặc 1em đều được */
  line-height: inherit;
  font-variant-numeric: tabular-nums; /* cho số thẳng cột, tùy chọn */
}

/* Thụt cấp con thêm 1em (nếu bạn đang dùng) */
.prose ol ol,
.prose ol ul,
.prose ul ol,
.prose ul ul{
  padding-inline-start: 1em;
}




/* Danh sách dạng “mục lớn có tiêu đề” */
.ol-headings { list-style: decimal; padding-inline-start: 1.5em; }

.ol-headings > li{
  /* Cho li to y hệt tiêu đề bạn muốn */
  font-size: clamp(1.125rem, 0.8vw + 1rem, 1.5rem); /* ≈ cỡ H3 của bạn */
  line-height: 1.25;
  font-weight: 700;
  margin: .5rem 0;
}

/* Số thứ tự bằng đúng size & weight của li */
.ol-headings > li::marker{
  font-size: inherit;
  font-weight: inherit;
}

/* Tiêu đề bên trong li dùng lại font của li, và xếp cùng dòng với marker */
.ol-headings > li > h1,
.ol-headings > li > h2,
.ol-headings > li > h3,
.ol-headings > li > h4,
.ol-headings > li > h5,
.ol-headings > li > h6{
  font: inherit;
  display: inline;
  margin: 0;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  color: #475569; /* tương đương text-slate-600 */
}