/* eOTP — blog công khai (/blog, /vi/blog, /blog/<slug>, /vi/blog/<slug>). Tiền tố .bl-.
   Nạp SAU assets/lp-<md5 8>.css: biến màu, nền #EEF2FC + quầng, thanh phụ, nav kính, nút .lp2-btn, footer .lpb-foot dùng chung.
   URL có dấu nội dung blog/blog-<md5 8>.css do blog_asset() (blog/_chrome.php) tự tính — sửa file này không cần đổi tay.
   Vibe (cùng câu với landing): SaaS sáng, sạch — nền xanh lơ nhạt có quầng màu, nav kính mờ, thẻ trắng bo lớn không bóng,
   nhấn xanh da trời + xanh lá. Không thêm màu ngoài bảng: biến lp.css + #fff + 3 giá trị của legal/legal.css
   (#1B1A19 chữ thân, #E5EEF5 đường kẻ, #0779B5 link trên nền trắng = sắc đậm của #28B8F8). */

/* Khung trang (body.lp2.bl-page do blog_top in ra; KHÔNG áp cho landing/legal):
   - lp.css đặt .lp2-bg absolute cao cố định 1500px theo khối gốc → trang ngắn (rỗng, 404, bài ngắn) bị nền quầng kéo dài
     tài liệu tới 1500px, để trống dưới footer. Ở blog: body làm khối chứa (relative) + nền cao 100% body, tối đa 1500.
   - Cột flex min-height 100vh (svh trên máy có thanh trình duyệt co giãn): main giãn, footer sát đáy màn khi nội dung ngắn,
     không sinh thanh cuộn. padding-bottom của body (hộp cookie consent-1110.js tự thêm) vẫn tính trong min-height (border-box). */
body.lp2.bl-page { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body.lp2.bl-page > * { flex-shrink: 0; }
body.lp2.bl-page > main.bl { flex: 1 0 auto; }
body.lp2.bl-page > .lp2-bg { height: 100%; max-height: 1500px; }

.bl { position: relative; z-index: 1; padding: 24px 0 96px; --bl-text: #1B1A19; --bl-line: #E5EEF5; --bl-link: #0779B5; }
.bl-wrap { width: min(var(--wrap), calc(100% - 48px)); margin-inline: auto; }
.bl-wrap-read { width: min(860px, calc(100% - 48px)); }

/* ---------- Đầu trang (trên nền loang, ngoài thẻ) — số đo bê .lg-head/.lg-pill/.lg-title ---------- */
.bl-head { padding: 40px 0 40px; text-align: center; }
.bl-pill {
  display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border-radius: 999px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: var(--glass-border); box-shadow: 0 4px 16px rgba(17, 17, 17, .06), inset 0 1px 0 rgba(255, 255, 255, .95);
  font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--ink);
}
.bl-title { margin: 20px auto 0; max-width: 820px; font-size: 48px; line-height: 1.16; font-weight: 600; letter-spacing: -1px; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.bl-lead { margin: 16px auto 0; max-width: 640px; font-size: 18px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* ---------- Thẻ bài (dùng chung danh sách + khối "Bài khác") ---------- */
.bl-list { display: grid; gap: 24px; }
.bl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 640px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .bl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bl-card {
  position: relative; display: flex; flex-direction: column; min-width: 0; height: 100%;
  background: #fff; border-radius: 24px; overflow: hidden; color: var(--bl-text);
}
.bl-cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-soft); }
.bl-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.bl-cover-none { display: grid; place-items: center; }
.bl-cover-none img { width: 22%; max-width: 96px; height: auto; opacity: .22; }
.bl-card-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 22px 24px 24px; }
.bl-card-t { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 600; letter-spacing: -.2px; color: var(--ink); overflow-wrap: anywhere; }
.bl-card .bl-card-t {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.bl-card-a { color: inherit; text-decoration: none; transition: color .2s; }
/* vùng bấm phủ cả thẻ — một link duy nhất, không lồng link */
.bl-card-a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.bl-card-a:focus-visible { outline: none; }
.bl-card:has(.bl-card-a:focus-visible) { outline: 2px solid var(--blue-d); outline-offset: 2px; }
.bl-card-d {
  margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: auto 0 0; padding-top: 4px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.bl-meta > span[aria-hidden="true"] { color: rgba(17, 17, 17, .35); }
.bl-tag {
  align-self: flex-start; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--green-soft); color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1;
}
@media (hover: hover) {
  .bl-card:hover .bl-card-a { color: var(--bl-link); }
  .bl-card:hover .bl-cover:not(.bl-cover-none) img { transform: scale(1.03); }
}

/* Thẻ lớn: bài mới nhất của trang 1, ảnh trái chữ phải; ≤ 860 xếp dọc như thẻ thường */
.bl-feat { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.bl-feat .bl-card-body { justify-content: center; gap: 12px; padding: 40px 44px; }
.bl-feat .bl-card-t { font-size: 28px; line-height: 1.25; letter-spacing: -.4px; -webkit-line-clamp: 3; line-clamp: 3; }
.bl-feat .bl-card-d { font-size: 16px; line-height: 1.6; }
.bl-feat .bl-meta { margin-top: 4px; }
@media (max-width: 1100px) {
  .bl-feat { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .bl-feat .bl-card-body { padding: 28px 28px; gap: 10px; }
  .bl-feat .bl-card-t { font-size: 22px; line-height: 1.3; -webkit-line-clamp: 2; line-clamp: 2; }
  .bl-feat .bl-card-d { font-size: 15px; line-height: 1.55; -webkit-line-clamp: 2; line-clamp: 2; }
}
@media (max-width: 860px) {
  .bl-feat { display: flex; flex-direction: column; }
  .bl-feat .bl-card-body { justify-content: flex-start; padding: 22px 24px 24px; }
  .bl-feat .bl-card-t { font-size: 22px; -webkit-line-clamp: 3; line-clamp: 3; }
  .bl-feat .bl-card-d { -webkit-line-clamp: 3; line-clamp: 3; }
}

/* ---------- Phân trang ---------- */
.bl-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 40px; }
.bl-pager .bl-pager-btn { position: relative; z-index: 1; background: #fff; border-color: var(--bl-line); }
.bl-pager a.bl-pager-btn:hover { background: var(--blue-soft); border-color: var(--blue-soft); }
.bl-pager .bl-pager-btn.is-off { opacity: .45; cursor: not-allowed; }
.bl-pager-n { min-width: 120px; text-align: center; font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Trạng thái rỗng / 404 ---------- */
.bl-empty { max-width: 640px; margin: 0 auto; padding: 48px 40px; border-radius: 24px; background: #fff; text-align: center; }
.bl-empty p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--bl-text); }
.bl-empty-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }

/* ---------- Trang bài viết (blogapp/post.php): khối đọc ≤ 860, thẻ trắng bo 24 như .lg-card ---------- */
.bl-article { padding: 56px 64px 48px; background: #fff; border-radius: 24px; color: var(--bl-text); overflow-wrap: anywhere; }
.bl-article > .bl-cover { margin: 0 0 32px; border-radius: 16px; }
.bl-head .bl-meta { justify-content: center; margin: 16px 0 0; padding: 0; font-size: 15px; }
.bl-article .bl-meta { margin: 0 0 24px; }

.bl-prose { font-size: 17px; line-height: 1.7; color: var(--bl-text); }
.bl-prose > :first-child { margin-top: 0; }
.bl-prose > :last-child { margin-bottom: 0; }
.bl-prose p { margin: 0 0 18px; text-wrap: pretty; }
.bl-prose h2 { margin: 40px 0 16px; font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -.4px; color: var(--ink); text-wrap: balance; }
.bl-prose h3 { margin: 32px 0 12px; font-size: 20px; line-height: 1.35; font-weight: 600; color: var(--ink); }
.bl-prose h4 { margin: 24px 0 10px; font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--ink); }
.bl-prose ul, .bl-prose ol { margin: 0 0 18px; padding-left: 24px; }
.bl-prose li { margin: 0 0 8px; }
.bl-prose li > ul, .bl-prose li > ol { margin: 8px 0 0; }
.bl-prose li::marker { color: var(--blue-d); font-weight: 600; }
.bl-prose b, .bl-prose strong { color: var(--ink); font-weight: 600; }
.bl-prose a { color: var(--bl-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(7, 121, 181, .35); }
.bl-prose a:hover { text-decoration-color: currentColor; }
.bl-prose img { display: block; max-width: 100%; height: auto; margin: 24px auto; border-radius: 16px; }
.bl-prose figure { margin: 28px 0; }
.bl-prose figure img { margin: 0 auto; }
.bl-prose figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--ink-2); text-align: center; }
.bl-prose blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--blue); color: var(--ink-2); }
.bl-prose blockquote p:last-child { margin-bottom: 0; }
.bl-prose code { padding: 2px 6px; border-radius: 6px; background: var(--bg); font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }
.bl-prose pre {
  margin: 24px 0; padding: 18px 20px; max-width: 100%; overflow-x: auto; border-radius: 16px; background: var(--bg);
  font-family: var(--mono); font-size: 14px; line-height: 1.6; color: var(--ink); -webkit-overflow-scrolling: touch;
}
.bl-prose pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; white-space: pre; }
/* Bảng: chính bảng là khung cuộn ngang (display:block) — không cần thẻ bọc, không làm tràn trang */
.bl-prose table {
  display: block; width: max-content; max-width: 100%; overflow-x: auto; margin: 24px 0; border-collapse: collapse;
  border: 1px solid var(--bl-line); border-radius: 16px; font-size: 15px; line-height: 1.55; -webkit-overflow-scrolling: touch;
}
.bl-prose th, .bl-prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bl-line); overflow-wrap: normal; }
.bl-prose thead th, .bl-prose tr > th { background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600; }
.bl-prose tbody tr:last-child td { border-bottom: 0; }
.bl-prose hr { margin: 36px 0; border: 0; border-top: 1px solid var(--bl-line); }

/* Khối "Bài khác": tiêu đề + .bl-grid các .bl-card */
.bl-more { margin-top: 56px; }
.bl-more-h { margin: 0 0 20px; font-size: 28px; line-height: 1.25; font-weight: 600; letter-spacing: -.4px; color: var(--ink); }
/* 1–2 thẻ: cột giữ bề rộng như lưới đầy (3 cột ≥1024, 2 cột 640–1023), canh giữa; < 640 vẫn 1 cột full.
   auto-fit + cột cố định: rãnh thừa bị gộp về 0 nên justify-content canh được nhóm thẻ. Không đụng lưới trang danh sách. */
@media (min-width: 640px) { .bl-more .bl-grid { grid-template-columns: repeat(auto-fit, calc((100% - 24px) / 2)); justify-content: center; } }
@media (min-width: 640px) and (max-width: 760px) { .bl-more .bl-grid { grid-template-columns: repeat(auto-fit, calc((100% - 16px) / 2)); } }
@media (min-width: 1024px) { .bl-more .bl-grid { grid-template-columns: repeat(auto-fit, calc((100% - 48px) / 3)); } }

/* Nút về Blog */
.bl-back {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1px solid var(--ink); color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .2s;
}
.bl-back:hover { background: rgba(17, 17, 17, .05); }
.bl-back-row { display: flex; justify-content: center; margin-top: 24px; }

/* ---------- Màn vừa ---------- */
@media (max-width: 1100px) {
  .bl-article { padding: 48px 48px 40px; }
}

/* ---------- Di động ---------- */
@media (max-width: 760px) {
  .bl { padding: 8px 0 64px; }
  .bl-wrap, .bl-wrap-read { width: calc(100% - 32px); }
  .bl-head { padding: 28px 0 28px; }
  .bl-pill { font-size: 13px; }
  .bl-title { margin-top: 16px; font-size: 34px; line-height: 1.2; letter-spacing: -.5px; }
  .bl-lead { font-size: 16px; }
  .bl-list, .bl-grid { gap: 16px; }
  .bl-card { border-radius: 20px; }
  .bl-card-body, .bl-feat .bl-card-body { padding: 18px 20px 20px; gap: 8px; }
  .bl-card-t, .bl-feat .bl-card-t { font-size: 19px; }
  .bl-empty { padding: 32px 20px; border-radius: 20px; }
  .bl-empty p { font-size: 16px; }
  .bl-empty-act .lp2-btn { flex: 1 1 100%; }
  .bl-pager { gap: 12px; margin-top: 32px; }
  .bl-pager-n { order: -1; flex: 1 1 100%; }
  .bl-pager .bl-pager-btn { flex: 1 1 0; }
  .bl-article { padding: 28px 20px 28px; border-radius: 20px; }
  .bl-article > .bl-cover { margin-bottom: 24px; border-radius: 12px; }
  .bl-prose { font-size: 16px; }
  .bl-prose h2 { margin-top: 32px; font-size: 22px; }
  .bl-prose h3 { font-size: 18px; }
  .bl-prose ul, .bl-prose ol { padding-left: 20px; }
  .bl-prose pre { padding: 14px 16px; font-size: 13px; }
  .bl-prose table { font-size: 14px; }
  .bl-prose th, .bl-prose td { padding: 10px 12px; }
  .bl-more { margin-top: 40px; }
  .bl-more-h { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-cover img, .bl-card-a, .bl-back { transition: none; }
  .bl-card:hover .bl-cover img { transform: none; }
}