/* ==========================================================================
   KBW Digital — Trang giới thiệu (gioi-thieu.php)

   Trang dạng bài viết: một cột chữ, không card, không grid. Toàn bộ style
   nhắm vào việc dễ đọc — độ dài dòng, khoảng cách dòng và nhịp dọc.
   Nạp sau style.css, class dùng prefix .ab-*
   ========================================================================== */

.page-about {
  /* Độ dài dòng khoảng 68 ký tự, mức dễ đọc nhất cho văn bản dài */
  --ab-measure: 68ch;
  --ab-accent: var(--blue-600);
}

.ab-page {
  padding-top: calc(var(--header-h) + var(--space-5));
  padding-bottom: var(--section-y);
  background: #ffffff;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

.ab-crumb {
  max-width: var(--ab-measure);
  margin: 0 auto var(--space-6);
}

.ab-crumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-xs);
}

.ab-crumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ab-crumb__link {
  color: var(--text-faint);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.ab-crumb__link:hover,
.ab-crumb__link:focus-visible { color: var(--ab-accent); }

.ab-crumb__sep {
  display: inline-flex;
  color: var(--slate-300);
}

.ab-crumb__current {
  color: var(--ab-accent);
  font-weight: 600;
}

/* ==========================================================================
   BÀI VIẾT
   ========================================================================== */

.ab-article {
  max-width: var(--ab-measure);
  margin: 0 auto;
}

/* --- Phần mở đầu --- */

.ab-article__head {
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.ab-article__title {
  margin: 0;
  font-size: clamp(1.65rem, 1rem + 2.15vw, 2.7rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ink-800);
}

/* Đoạn mở đầu lớn hơn thân bài một bậc để dẫn người đọc vào bài */
.ab-article__lede {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-lede);
  line-height: 1.7;
  color: var(--text-soft);
  text-wrap: pretty;
}

.ab-article__meta {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-xs);
  color: var(--text-faint);
}

/* --- Thân bài --- */

.ab-article h2 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: var(--ink-800);
}

.ab-article h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: 1.0625rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-800);
}

/* Tiêu đề đầu tiên không cần khoảng trên lớn vì đã có đường kẻ phía trên */
.ab-article > h2:first-of-type { margin-top: 0; }

.ab-article p {
  margin: 0 0 var(--space-4);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-soft);
  text-wrap: pretty;
}

.ab-article ul {
  margin: 0 0 var(--space-5);
  padding-left: 0;
  list-style: none;
}

.ab-article ul li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: var(--space-3);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-soft);
}

/* Dấu đầu dòng vẽ bằng CSS để canh đúng đường cơ sở của dòng chữ */
.ab-article ul li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0.25rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ab-accent);
}

.ab-article a {
  color: var(--ab-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ab-article strong { color: var(--ink-800); }

/* --- Link kết bài --- */

.ab-article__cta {
  margin: var(--space-7) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.ab-article__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  transition: gap var(--dur) var(--ease);
}

.ab-article__cta a:hover {
  gap: 0.65rem;
  text-decoration: underline;
}

.ab-article__cta svg { flex: none; }

/* ==========================================================================
   RESPONSIVE & REDUCED MOTION
   ========================================================================== */

@media (max-width: 560px) {
  .ab-article p,
  .ab-article ul li { font-size: 0.9375rem; }

  .ab-article h2 { margin-top: var(--space-7); }
}

@media (prefers-reduced-motion: reduce) {
  .ab-article__cta a { transition: none; }
  .ab-article__cta a:hover { gap: 0.4rem; }
}