/* Blog DigiPerfy (WEB-BLOG-01, bảng trong bài WEB-BLOG-02). Nạp SAU ../style.css, ../trang-chu.css, ../dich-vu.css.
   WEB-BLOG-GIAO-DIEN-01 (chủ dự án 08/11/2026, "làm cả trang blog nữa"): giao diện như các trang đã làm lại theo trang chủ mới. Màn đầu tím than (.dv-hero của
   dich-vu.css), bài nổi bật + các bài sau thành thẻ có ảnh, màu 60 - 30 - 10: nền trắng / xám nhạt, tím cho nhãn và tiêu đề, cam chỉ ở link và điểm nhấn. */
.bl-chude { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-purple); }
.bl-meta { font-size: .875rem; color: var(--ink-2); }
.dv-hero .bl-meta { margin: 4px 0 0; color: rgba(255, 255, 255, .78); }
.bl-hero h1 { max-width: 22em; font-size: clamp(2rem, 1.3rem + 2.2vw, 3.1rem); }
.bl-hero .dv-lead { max-width: 44em; }

/* Danh sách: bài mới nhất là thẻ lớn (chữ trái, ảnh phải), các bài sau là thẻ có ảnh xếp lưới */
.bl-ds-khoi { padding-top: clamp(48px, 6vw, 88px); }
.bl-noibat { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line); border-radius: 24px; background: var(--c-surface); color: inherit; text-decoration: none;
  box-shadow: 0 30px 70px -48px rgba(30, 14, 60, .5); transition: translate .3s, box-shadow .3s, border-color .3s; }
.bl-noibat h2 { max-width: 20em; margin: 12px 0 14px; font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--c-purple-deep); }
.bl-noibat p { max-width: 42em; margin: 0 0 16px; line-height: 1.65; color: var(--ink-2); }
.bl-noibat:hover, .bl-noibat:focus-visible { translate: 0 -3px; border-color: color-mix(in srgb, var(--c-purple) 35%, var(--line)); box-shadow: 0 36px 80px -46px rgba(30, 14, 60, .6); }
.bl-ds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 20px 0 0; padding: 0; list-style: none; }
.bl-dong a { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 14px 14px 20px; border: 1px solid var(--line); border-radius: 22px; background: var(--c-surface);
  color: inherit; text-decoration: none; box-shadow: 0 24px 60px -48px rgba(30, 14, 60, .45); transition: translate .3s, box-shadow .3s, border-color .3s; }
.bl-dong a > div { display: grid; gap: 8px; padding: 0 6px; }
.bl-dong h3 { margin: 0; font-size: 1.2rem; line-height: 1.35; color: var(--c-purple-deep); }
.bl-dong p { margin: 0; line-height: 1.6; color: var(--ink-2); }
.bl-dong .bl-meta { margin-top: auto; padding: 0 6px; }
.bl-dong a:hover, .bl-dong a:focus-visible { translate: 0 -3px; border-color: color-mix(in srgb, var(--c-purple) 35%, var(--line)); box-shadow: 0 30px 70px -44px rgba(30, 14, 60, .55); }
.bl-anh { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--c-surface); }
.bl-noibat .bl-anh { border-radius: 18px; }

/* Trang bài */
.bl-than { max-width: 720px; margin: 0 auto; }
.bl-than h2 { margin: 48px 0 14px; font-size: clamp(1.4rem, 1.1rem + .9vw, 1.8rem); line-height: 1.25; letter-spacing: -0.015em; color: var(--c-purple-deep); }
.bl-than h3 { margin: 32px 0 10px; font-size: clamp(1.15rem, 1.05rem + .5vw, 1.35rem); line-height: 1.3; color: var(--c-purple-deep); }
.bl-than p, .bl-than li { font-size: 1.0625rem; line-height: 1.75; color: var(--ink-2); }
.bl-than p { margin: 0 0 18px; }
.bl-than strong { font-weight: 700; color: var(--ink); }
.bl-than li { margin-bottom: 12px; }
.bl-than a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.bl-than > :first-child { margin-top: 0; }
/* Danh sách trong bài: style.css đặt lại list-style của ol / ul, nên khai lại để số thứ tự và dấu chấm hiện */
.bl-than ol { margin: 0 0 18px; padding-left: 22px; list-style: decimal; }
.bl-than ol li::marker { font-weight: 700; color: var(--c-purple); }
.bl-than ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.bl-than ul li::marker { color: var(--c-purple); }
.bl-nguon { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.bl-nguon p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }

/* Ảnh minh họa trong bài (mỗi bài ít nhất một ảnh) */
.bl-hinh { margin: 28px 0 32px; }
.bl-hinh img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 18px; }
.bl-hinh figcaption { margin-top: 10px; text-align: center; font-size: .875rem; color: var(--ink-2); }
/* Ảnh chủ dự án tạo: nền trắng hòa vào trang, không viền (chủ dự án 05/11/2026) */
.bl-hinh--tron img { border: 0; border-radius: 0; }

/* Bảng trong bài (WEB-BLOG-02). Cuộn ngang TRONG khung của bảng, trang không cuộn ngang. Bảng từ 4 cột (.bl-bang--rong) có bề rộng tối thiểu để chữ không gãy
   từng từ; khung đó có tabindex="0" nên cuộn được bằng bàn phím, vòng focus lấy từ style.css. Dưới 721px cột tiêu đề dòng dính trái khi vuốt ngang. */
.bl-bang { margin: 22px 0 28px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 16px; background: var(--c-surface); }
.bl-bang table { width: 100%; border-collapse: separate; border-spacing: 0; text-align: left; font-size: .9375rem; line-height: 1.5; }
.bl-bang th, .bl-bang td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.bl-bang thead th { background: var(--c-purple-soft); font-weight: 700; color: var(--c-purple-deep); }
.bl-bang tbody th { background: var(--c-surface); font-weight: 400; color: var(--ink); }
.bl-bang tbody tr:last-child > * { border-bottom: 0; }
.bl-bang a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.bl-bang--rong table { min-width: 700px; }
.bl-bang--rong th:first-child { width: 27%; }

/* Hộp Nội dung chính (WEB-BLOG-04): tự sinh từ các H2. Neo chừa chỗ cho thanh đầu trang dính */
.bl-mucluc { margin: 28px 0 8px; padding: 18px 22px; border: 0; border-left: 4px solid var(--c-purple); border-radius: 0 16px 16px 0; background: var(--c-purple-soft); }
.bl-than .bl-mucluc-t { margin: 0 0 10px; font-weight: 700; color: var(--c-purple-deep); }
.bl-than .bl-mucluc ul { margin: 0; padding: 0; list-style: none; }
.bl-than .bl-mucluc li { margin-bottom: 6px; font-size: 1rem; line-height: 1.5; }
.bl-than .bl-mucluc li:last-child { margin-bottom: 0; }
.bl-than .bl-mucluc a { text-decoration: none; color: var(--c-purple-deep); } /* tím đậm trên nền tím nhạt: cam trên nền này chỉ đạt 4,48:1, thiếu chuẩn 4,5:1 */
.bl-than .bl-mucluc a:hover { text-decoration: underline; }
.bl-than h2[id] { scroll-margin-top: 96px; }

@media (max-width: 1080px) { .bl-ds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .bl-noibat { grid-template-columns: 1fr; } .bl-noibat .bl-anh { order: -1; } }
@media (max-width: 720px) {
  .bl-ds { grid-template-columns: 1fr; }
  .bl-bang th, .bl-bang td { padding: 10px 12px; font-size: .875rem; }
  .bl-bang--rong th:first-child { position: sticky; left: 0; z-index: 1; width: 150px; min-width: 150px; box-shadow: inset -1px 0 0 var(--line-2); }
}
@media (prefers-reduced-motion: reduce) { .bl-noibat, .bl-dong a { transition: none; } .bl-noibat:hover, .bl-dong a:hover { translate: none; } }