/* ==========================================================================
   phat-dark · TRANG DANH MỤC (category) — breadcrumb nhìn thấy + đoạn giới thiệu dài dưới H1.
   PRJ-045 · 07/10/2026 · khớp markup inc/danh-muc-seo.php (không đổi class của bản vá).
   Nạp SAU giao-dien.css (cùng độ ưu tiên .pd .x, thứ tự nạp quyết định). Chỉ token của nen.css/tokens.css v2.0.
   Tương phản (đã đo trên --ground #16140f): liên kết --o-400 ≈ 8:1 · trang hiện tại --color-neutral-400 ≈ 9:1 ·
   thân đoạn --color-neutral-300 ≈ 11:1 — đều >= AA 4.5. KHÔNG dùng --color-accent (#c67139) làm màu chữ (3,9:1 trên thẻ).
   ========================================================================== */

/* (1) Breadcrumb trên H1 — nhỏ gọn, đè luật .pd-bv-dau__vet (14px) cho riêng đầu danh mục */
.pd .pd-dau .pd-bv-dau__vet {
  font-size: 13px; line-height: 1.4; gap: 2px 8px; margin: 2px 0 -4px;
  color: var(--color-neutral-400); overflow-wrap: anywhere;
}
.pd .pd-dau .pd-bv-dau__vet a {
  font-weight: 600; color: var(--o-400);
  padding-block: 6px;                        /* vùng bấm >= 24px cao (WCAG 2.2 2.5.8) */
  text-decoration-thickness: 1px !important; /* bắt buộc: nen.css ép `thickness:auto !important` cho .pd a */
  text-decoration-color: color-mix(in srgb, var(--o-400) 45%, transparent);
  transition: color var(--t-nhanh) var(--ease-ra), text-decoration-color var(--t-nhanh) var(--ease-ra);
}
.pd .pd-dau .pd-bv-dau__vet a:hover { color: var(--o-300); text-decoration-color: currentColor; }
.pd .pd-dau .pd-bv-dau__vet a:focus-visible {
  outline: 2px solid var(--o-300); outline-offset: 2px; border-radius: var(--radius-sm);
  text-decoration-color: currentColor;
}
.pd .pd-dau .pd-bv-dau__vet [aria-current="page"] { color: var(--color-neutral-400); font-weight: 600; }
.pd .pd-dau .pd-bv-dau__gach { color: var(--color-neutral-600); user-select: none; } /* dấu gạch trang trí, không phải chữ */

/* (2) Đoạn giới thiệu dài dưới H1 — thân đọc ~66 ký tự, ngăn với lưới bằng đường kẻ mảnh, không khung thẻ */
.pd .pd-dm-mo-ta {
  align-self: flex-start; width: 100%; max-width: 66ch;
  margin-top: 6px; padding-top: 22px;
  border-top: 1px solid var(--color-neutral-800);
}
.pd .pd-dm-mo-ta > * { max-width: 100%; }
.pd .pd-dm-mo-ta > p { font-size: 16px; line-height: var(--lh-prose); margin: 0; }   /* 07/10: 16px mọi cỡ (trước: var(--fs-prose) = 15px ở 1440) */
.pd .pd-dm-mo-ta > p + p { margin-top: 12px; }
.pd .pd-dm-mo-ta > p:last-child { margin-bottom: 0; }
.pd .pd-dm-mo-ta a { overflow-wrap: anywhere; }
.pd .pd-dm-mo-ta :focus-visible { outline-color: var(--o-300); }

/* H1 danh mục: tên dài không tràn ngang */
.pd .pd-dau--blog .pd-trang-thuong__t { overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .pd .pd-dm-mo-ta { padding-top: 18px; }
  .pd .pd-dm-mo-ta > p { font-size: 16px; line-height: 1.7; }
}

/* (3) Chuyển động vào trang: mờ→rõ + dịch lên 8px, lần lượt breadcrumb → đoạn giới thiệu. Chỉ khi KHÔNG giảm chuyển động. */
@keyframes pd-dm-vao { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .pd .pd-dau .pd-bv-dau__vet { animation: pd-dm-vao var(--t-vua) var(--ease-ra) both; }
  .pd .pd-dm-mo-ta { animation: pd-dm-vao var(--t-vua) var(--ease-ra) .12s both; }
}

/* (4) In: bỏ giới hạn độ rộng; màu/nền do khối @media print của nen.css xử lý */
@media print {
  .pd .pd-dm-mo-ta { max-width: none; break-inside: avoid; }
  .pd .pd-dm-mo-ta > p { font-size: 12pt; }
}