/* ===== ClassPlus Blog — kho 90 bài ===== */
/* Dùng chung biến màu + navbar/footer từ ../css/style.css */

.blog-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: .82rem; color: var(--text-muted); padding: 18px 0 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { opacity: .5; }

/* ---------- Badges (nhóm + series + độ dài) ---------- */
.ba-badges { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin: 8px 0 14px; }
.ba-badge { font-size: .76rem; font-weight: 700; padding: 5px 12px; border-radius: 50px; display: inline-flex; align-items: center; gap: 6px; }
.ba-badge--mn { background: linear-gradient(135deg, rgba(247,37,133,.12), rgba(114,9,183,.12)); color: #b5179e; border: 1px solid rgba(247,37,133,.2); }
.ba-badge--clb { background: linear-gradient(135deg, rgba(30,136,229,.12), rgba(57,73,171,.12)); color: #1e88e5; border: 1px solid rgba(30,136,229,.22); }
.ba-badge--series { background: var(--bg-light); color: var(--text-secondary); border: 1px solid rgba(0,0,0,.06); }
.ba-badge--len { background: rgba(255,193,7,.14); color: #c79100; border: 1px solid rgba(255,193,7,.28); }
[data-theme="dark"] .ba-badge--mn { color: #ff6fc8; }
[data-theme="dark"] .ba-badge--clb { color: #6db3f2; }
[data-theme="dark"] .ba-badge--series { border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .ba-badge--len { color: #ffd166; }

/* ---------- Article ---------- */
.blog-article { padding: 88px 0 40px; }
.ba-title { font-size: 2.05rem; font-weight: 800; line-height: 1.22; color: var(--text-primary); margin: 4px 0 18px; max-width: 860px; }
.ba-article-inner { max-width: none; margin: 0; }

/* Detail — 2 cột (bài + sidebar) = rộng blog-wrap */
.ba-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px;
  align-items: start;
}
.ba-main { min-width: 0; }
.ba-main .ba-title { max-width: none; }

.ba-sidebar { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 18px; }
.ba-side-box {
  background: var(--bg-card);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.ba-side-box h3 { font-size: .95rem; font-weight: 800; color: var(--text-primary); margin: 0 0 14px; }
.ba-side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ba-side-list a { display: block; font-size: .88rem; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.ba-side-list a:hover { color: var(--primary); }
.ba-side-list span { display: block; font-size: .75rem; color: var(--text-muted); font-weight: 500; margin-top: 3px; }
.ba-side-cta { text-align: center; }
.ba-side-cta p { font-size: .86rem; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.5; }
.ba-side-cta .btn { width: 100%; justify-content: center; font-size: .88rem; padding: 11px 16px; }

/* Placeholder ảnh — canvas “đang cập nhật” */
.bcard-ph,
.ba-cover-ph {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 16px; text-align: center;
  background: linear-gradient(135deg, #eef4fc 0%, #e3ecf9 45%, #eef4fc 100%);
  background-size: 200% 200%;
  animation: blog-ph-shimmer 2.4s ease-in-out infinite;
  color: #5a7da8;
}
.bcard-ph i, .ba-cover-ph i { font-size: 1.6rem; opacity: .75; }
.bcard-ph span, .ba-cover-ph span { font-size: .78rem; font-weight: 700; line-height: 1.35; max-width: 14em; }
.bcard-thumb.has-cover .bcard-ph { display: none; }
.site-fb-thumb.has-cover .bcard-ph { display: none; }
.bcard-thumb img { position: relative; z-index: 2; }
.bcard-thumb:not(.has-cover) img { opacity: 0; pointer-events: none; }
.ba-cover { position: relative; min-height: 280px; }
.ba-cover.has-cover { min-height: 0; }
.ba-cover.has-cover .ba-cover-ph { display: none; }
.ba-cover:not(.has-cover) img { opacity: 0; position: absolute; inset: 0; width: 100%; height: 100%; }
.ba-cover.has-cover img { position: static; opacity: 1; }
@keyframes blog-ph-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
[data-theme="dark"] .bcard-ph,
[data-theme="dark"] .ba-cover-ph {
  background: linear-gradient(135deg, #1a2744 0%, #16213e 50%, #1a2744 100%);
  color: #8eb5e0;
}

/* Featured blog trên trang Mầm non / CLB */
.site-featured-blog { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin-top: 32px; }
.site-fb-card {
  background: var(--bg-card); border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(0,0,0,.06); box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit; display: flex; flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.site-fb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.site-fb-thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-light); }
.site-fb-thumb img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 2; }
.site-fb-thumb:not(.has-cover) img { opacity: 0; }
.site-fb-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }
.site-fb-body h3 { font-size: .95rem; font-weight: 700; line-height: 1.35; margin: 0; color: var(--text-primary); }
.site-fb-read { margin-top: 10px; font-size: .82rem; font-weight: 700; color: var(--primary); }

/* Cover image */
.ba-cover { margin: 0 0 26px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid rgba(0,0,0,.05); background: var(--bg-light); }
.ba-cover img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; max-height: 560px; }
.ba-cover img.ba-img--ph { aspect-ratio: 16 / 9; object-fit: contain; padding: 30px; opacity: .82; }
.ba-cover figcaption { font-size: .78rem; color: var(--text-muted); padding: 9px 14px; background: var(--bg-light); border-top: 1px solid rgba(0,0,0,.04); font-style: italic; }
[data-theme="dark"] .ba-cover { border-color: rgba(255,255,255,.06); }
[data-theme="dark"] .ba-cover figcaption { border-top-color: rgba(255,255,255,.05); }

/* Dấu ấn thương hiệu ClassPlus — overlay logo góc trên-phải ảnh cover (chỉ hiện khi đã có ảnh thật) */
.ba-cover.has-cover::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 104px;
  height: 30px;
  background: rgba(255, 255, 255, .82) url('/assets/logo.png') no-repeat center;
  background-size: 84px auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  pointer-events: none;
  z-index: 2;
}
[data-theme="dark"] .ba-cover.has-cover::after { background-color: rgba(255, 255, 255, .9); }

/* Body */
.ba-body { font-size: 1.07rem; line-height: 1.82; color: var(--text-secondary); }
.ba-body p { margin: 0 0 18px; }
.ba-body p:first-child { font-size: 1.14rem; color: var(--text-primary); }
.ba-body strong { color: var(--text-primary); }

/* CTA box */
.ba-cta { margin: 30px 0 22px; padding: 24px 26px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(30,136,229,.07), rgba(114,9,183,.07)); border: 1px solid rgba(30,136,229,.16); text-align: center; }
.ba-cta--mn { background: linear-gradient(135deg, rgba(247,37,133,.07), rgba(114,9,183,.07)); border-color: rgba(247,37,133,.18); }
.ba-cta p { font-size: 1.04rem; font-weight: 700; color: var(--text-primary); margin: 0 0 16px; }
.ba-cta .btn { display: inline-flex; align-items: center; gap: 9px; padding: 12px 26px; border-radius: 12px; font-weight: 700; font-size: .98rem; color: #fff; background: linear-gradient(135deg, #1e88e5, #3949ab); transition: all .25s; }
.ba-cta--mn .btn { background: linear-gradient(135deg, #f72585, #7209b7); }
.ba-cta .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Tags */
.ba-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0; }
.ba-tags span { font-size: .8rem; color: var(--primary); background: rgba(67,97,238,.08); padding: 4px 11px; border-radius: 7px; }
[data-theme="dark"] .ba-tags span { color: #7b93f7; background: rgba(67,97,238,.14); }

/* Tools (copy bài) */
.ba-tools { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 6px; }
.ba-btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 11px; font-weight: 700; font-size: .9rem; cursor: pointer; border: 2px solid rgba(30,136,229,.25); background: var(--bg-card); color: var(--text-primary); transition: all .2s; font-family: inherit; }
.ba-btn:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ba-btn i { color: var(--primary); }
.ba-btn.is-done { border-color: var(--success); color: var(--success); }
.ba-btn.is-done i { color: var(--success); }
[data-theme="dark"] .ba-btn { background: #16213e; border-color: rgba(30,136,229,.25); }

/* Prompt box (collapsible) */
.ba-prompt { margin: 18px 0 8px; border: 1px dashed rgba(30,136,229,.3); border-radius: var(--radius-sm); background: rgba(30,136,229,.03); overflow: hidden; }
.ba-prompt > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: .92rem; color: var(--text-primary); list-style: none; display: flex; align-items: center; gap: 10px; user-select: none; }
.ba-prompt > summary::-webkit-details-marker { display: none; }
.ba-prompt > summary::before { content: '\f0d7'; font-family: 'Font Awesome 6 Free'; font-weight: 900; transition: transform .2s; color: var(--primary); }
.ba-prompt[open] > summary::before { transform: rotate(180deg); }
.ba-prompt-inner { padding: 4px 18px 18px; }
.ba-prompt-inner p { font-size: .88rem; color: var(--text-secondary); margin: 0 0 10px; }
.ba-prompt-inner code { background: rgba(0,0,0,.06); padding: 2px 8px; border-radius: 5px; font-size: .85rem; color: var(--primary); font-weight: 600; }
.ba-prompt-en { white-space: pre-wrap; font-family: 'Consolas', 'Monaco', monospace; font-size: .82rem; line-height: 1.6; color: var(--text-secondary); background: var(--bg-light); border: 1px solid rgba(0,0,0,.06); border-radius: 8px; padding: 13px 15px; margin: 10px 0; max-height: 230px; overflow: auto; }
[data-theme="dark"] .ba-prompt { background: rgba(30,136,229,.06); }
[data-theme="dark"] .ba-prompt-inner code { background: rgba(255,255,255,.08); color: #6db3f2; }
[data-theme="dark"] .ba-prompt-en { border-color: rgba(255,255,255,.07); }

/* Pager */
.ba-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 34px 0 10px; padding-top: 22px; border-top: 1px solid rgba(0,0,0,.07); }
.ba-pager a { font-size: .88rem; font-weight: 600; color: var(--text-secondary); display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 9px; transition: all .2s; max-width: 40%; }
.ba-pager a:hover { background: var(--bg-light); color: var(--primary); }
.ba-pager a.ba-pager-all { color: var(--primary); font-weight: 700; }
.ba-pager a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-theme="dark"] .ba-pager { border-top-color: rgba(255,255,255,.08); }

/* ---------- INDEX HUB ---------- */
.blog-hero { padding: 110px 0 40px; text-align: center; background: linear-gradient(135deg, rgba(67,97,238,.06), rgba(114,9,183,.05)); border-bottom: 1px solid rgba(67,97,238,.08); }
.blog-hero h1 { font-size: 2.5rem; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; }
.blog-hero p { font-size: 1.08rem; color: var(--text-secondary); max-width: 640px; margin: 0 auto 8px; }
.blog-hero .bh-note { font-size: .85rem; color: var(--text-muted); }
[data-theme="dark"] .blog-hero { background: linear-gradient(135deg, rgba(67,97,238,.1), rgba(114,9,183,.08)); }

/* Filter bar */
.blog-controls { position: sticky; top: 64px; z-index: 20; background: var(--bg-card); border-bottom: 1px solid rgba(0,0,0,.06); padding: 14px 0; margin-bottom: 28px; }
[data-theme="dark"] .blog-controls { background: #0f0f23; border-bottom-color: rgba(255,255,255,.07); }
.bc-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.bc-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.bc-chip { font-size: .85rem; font-weight: 600; padding: 8px 16px; border-radius: 50px; cursor: pointer; border: 1.5px solid rgba(0,0,0,.1); background: var(--bg-card); color: var(--text-secondary); transition: all .2s; font-family: inherit; }
.bc-chip:hover { border-color: var(--primary); color: var(--primary); }
.bc-chip.active { background: var(--gradient-primary); color: #fff; border-color: transparent; }
.bc-search { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.bc-search input { width: 100%; padding: 9px 14px 9px 38px; border-radius: 50px; border: 1.5px solid rgba(0,0,0,.1); background: var(--bg-light); color: var(--text-primary); font-size: .9rem; font-family: inherit; }
.bc-search input:focus { outline: none; border-color: var(--primary); }
.bc-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .85rem; }
[data-theme="dark"] .bc-chip { background: #16213e; border-color: rgba(255,255,255,.1); }
[data-theme="dark"] .bc-search input { background: #16213e; border-color: rgba(255,255,255,.1); }

.bc-count { font-size: .82rem; color: var(--text-muted); padding: 4px 0 18px; }

/* Card grid */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; padding-bottom: 70px; }
.bcard { background: var(--bg-card); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(0,0,0,.06); box-shadow: var(--shadow-sm); transition: all .25s; display: flex; flex-direction: column; }
.bcard:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(67,97,238,.2); }
.bcard-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-light); }
.bcard-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.bcard-thumb img.ba-img--ph { object-fit: contain; padding: 22px; opacity: .8; }
.bcard:hover .bcard-thumb img { transform: scale(1.04); }
.bcard-thumb .bcard-grp { position: absolute; top: 10px; left: 10px; font-size: .7rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; color: #fff; }
.bcard-grp--mn { background: rgba(247,37,133,.92); }
.bcard-grp--clb { background: rgba(30,136,229,.92); }
.bcard-body { padding: 15px 16px 17px; display: flex; flex-direction: column; flex: 1; }
.bcard-series { font-size: .72rem; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; }
.bcard-title { font-size: .98rem; font-weight: 700; line-height: 1.35; color: var(--text-primary); margin-bottom: 8px; }
.bcard-excerpt { font-size: .84rem; color: var(--text-secondary); line-height: 1.55; margin-bottom: 13px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bcard-foot { display: flex; align-items: center; justify-content: space-between; }
.bcard-foot .bcard-len { font-size: .72rem; color: var(--text-muted); }
.bcard-foot .bcard-read { font-size: .82rem; font-weight: 700; color: var(--primary); display: inline-flex; align-items: center; gap: 5px; }
.bcard-empty { grid-column: 1 / -1; text-align: center; padding: 60px 20px; color: var(--text-muted); }

/* Toast */
.cp-toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1a1a2e; color: #fff; padding: 12px 22px; border-radius: 12px; font-size: .9rem; font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transition: all .3s; z-index: 9999; display: flex; align-items: center; gap: 9px; }
.cp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.cp-toast i { color: var(--success); }

/* Responsive */
@media (max-width: 768px) {
  .ba-title { font-size: 1.6rem; }
  .blog-hero h1 { font-size: 1.9rem; }
  .blog-article { padding: 80px 0 30px; }
  .blog-controls { top: 58px; }
  .ba-layout { grid-template-columns: 1fr; gap: 28px; }
  .ba-sidebar { position: static; }
}
@media (max-width: 480px) {
  .ba-body { font-size: 1.02rem; }
  .blog-grid { grid-template-columns: 1fr; }
  .ba-pager a span { display: none; }
}