/* page-blog-detail — dựng theo ceoacc client/blog/<slug> (CSS nội tuyến .ta-* + ceo-glass-pages.css, đo getComputedStyle 14/10/2026).
   Giá trị px là CSS px trước zoom .86 của body. .content đã có lề 0 15px = .container-fluid của gốc. Mọi luật gói trong #page-blog-detail. */
#page-blog-detail {
  --ta-ink: var(--cg-text);
  --ta-muted: var(--cg-muted);
  --ta-border: var(--cg-line);
  --ta-primary: var(--cg-primary);
}

#page-blog-detail .ta-wrap { display: block; width: 100%; max-width: 1180px; margin: 0 auto; padding: 5px 0 48px; }

/* Link quay lại: chữ xanh 13px đậm, icon mũi tên FA5 cách chữ 7px; rê chuột đổi xanh đậm như a:hover chung của gốc */
#page-blog-detail .ta-back { display: inline-flex; align-items: center; gap: 7px; margin: 0 0 22px; color: var(--ta-primary); font-size: 13px; font-weight: 700; line-height: 1.55; }
#page-blog-detail .ta-back:hover { color: #004ee6; }
.cg-dark #page-blog-detail .ta-back:hover { color: #b9d6ff; }
#page-blog-detail .ta-back i { display: block; width: 1.25em; text-align: center; }

#page-blog-detail .ta-article { min-width: 0; }
#page-blog-detail .ta-header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin: 0 0 28px; padding: 0 0 22px; border-bottom: 1px solid var(--ta-border);
}
#page-blog-detail .ta-heading { min-width: 0; flex: 1; }
#page-blog-detail .ta-header h1 {
  margin: 0 0 11px; color: var(--ta-ink);
  font-family: "Plus Jakarta Sans", sans-serif; font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.35;
}
#page-blog-detail .ta-meta { display: flex; flex-wrap: wrap; gap: 16px; color: var(--ta-muted); font-size: 13px; line-height: 1.55; }
#page-blog-detail .ta-meta i { display: inline-block; width: 1.25em; margin-right: .3125rem; text-align: center; }

/* Ảnh bìa 144×96 bo 20: gốc là ảnh PNG nền trắng (logo + tên nền tảng) → dựng bằng icon + chữ mật danh */
#page-blog-detail .ta-cover {
  display: flex; flex: 0 0 auto; align-items: center; justify-content: center;
  width: 144px; height: 96px; max-width: 24%; margin: 0; overflow: hidden; border-radius: 20px;
}
/* Phần "ảnh" tỉ lệ 3:2 co vừa khung như object-fit: contain (điện thoại: 80×53 giữa khung 80×64) */
#page-blog-detail .ta-cover-img {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; max-height: 100%; aspect-ratio: 3 / 2;
  background: var(--ta-cover-bg, #fff); color: var(--ta-cover-ink, #000); border-radius: inherit;
}
#page-blog-detail .ta-cover i { font-size: 36px; line-height: 1; }
#page-blog-detail .ta-cover-img > span { font-size: 11px; font-weight: 500; line-height: 1.2; white-space: nowrap; }
#page-blog-detail .ta-cover.is-art i { color: #fff; font-size: 34px; }

#page-blog-detail .ta-content { min-width: 0; color: var(--ta-ink); font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
#page-blog-detail .ta-content, #page-blog-detail .ta-content * { box-sizing: border-box; }
#page-blog-detail .ta-content p { margin: 0 0 1rem; }
#page-blog-detail .ta-content strong { font-weight: 700; }
#page-blog-detail .ta-content :is(h2, h3, h4) { margin-top: 1.5em; color: var(--ta-ink); font-weight: 750; }
#page-blog-detail .ta-content :is(ul, ol) { margin: 0 0 1rem; padding-left: 2rem; }

/* Tối: luật cũ body.dark của gốc tô trắng thuần mọi p/span/i — thân bài, giờ đăng/lượt xem, icon (cả mũi tên quay lại) */
.cg-dark #page-blog-detail :is(.ta-content p, .ta-meta span, .ta-meta i, .ta-back i) { color: #fff; }

@media (max-width: 575.98px) {
  /* gốc .ta-page .container-fluid lề 14px (khung chung 15px) */
  #page-blog-detail { margin: 0 -1px; }
  #page-blog-detail .ta-wrap { padding-top: 2px; padding-bottom: 32px; }
  #page-blog-detail .ta-back { margin-bottom: 17px; }
  #page-blog-detail .ta-header { align-items: flex-start; gap: 12px; margin-bottom: 21px; padding-bottom: 18px; }
  #page-blog-detail .ta-meta { gap: 6px 12px; }
  #page-blog-detail .ta-content { font-size: 14px; }
  #page-blog-detail .ta-cover { width: 80px; height: 64px; max-width: 23%; }
  #page-blog-detail .ta-cover-img { gap: 3px; border-radius: 12px; }
  #page-blog-detail .ta-cover i, #page-blog-detail .ta-cover.is-art i { font-size: 22px; }
  #page-blog-detail .ta-cover-img > span { font-size: 7.5px; }
}