/* Split from legacy style.css - blog pages */

/* =========================================================
13) BLOG LIST + RECENT POSTS
========================================================= */

/* Base blog card */
.post-item{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}

.post-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  border-color:rgba(37,99,235,.18);
}

.post-item .post-img{
  position:relative;
  overflow:hidden;
}

.post-item .post-img img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}

.post-item:hover .post-img img{
  transform:scale(1.06);
}

.post-item .post-date{
  position:absolute;
  left:16px;
  bottom:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(2,6,23,.08);
  box-shadow:0 8px 18px rgba(2,6,23,.08);
  font-size:12px;
  font-weight:900;
  color:rgba(2,6,23,.82);
}

.post-item .post-content{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:18px 18px 16px;
}

.post-item .post-title{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-0.02em;
  color:rgba(2,6,23,.92);
}

.post-item .post-title a{
  color:inherit;
  text-decoration:none;
  transition:color .2s ease;
}

.post-item:hover .post-title a{
  color:var(--primary);
}

.post-item .meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.post-item .meta i{
  color:var(--primary);
  opacity:.9;
}

.post-item .meta span{
  font-size:13px;
  font-weight:800;
  color:rgba(2,6,23,.60);
}

.post-item hr{
  margin:14px 0 10px;
  border:0;
  border-top:1px solid rgba(2,6,23,.08);
}

.post-item .readmore{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  font-size:13px;
  font-weight:900;
  color:var(--primary);
  text-decoration:none;
}

.post-item .readmore i{
  font-size:12px;
  transition:transform var(--t-fast);
}

.post-item:hover .readmore i{
  transform:translateX(3px);
}

@media (max-width:576px){
  .post-item .post-img img{
    height:200px;
  }

  .post-item .post-title{
    font-size:16px;
  }

  .post-item .post-date{
    left:14px;
    bottom:14px;
    padding:7px 11px;
  }
}


/* Recent posts section / Cẩm nang nghề nghiệp */
.recent-blog-posts{
  padding-top:72px;
  padding-bottom:72px;
}

.recent-blog-posts .section-title{
  margin-bottom:36px;
}

.recent-blog-posts .post-item{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.recent-blog-posts .post-item:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 70px rgba(2,6,23,.10);
  border-color:rgba(37,99,235,.14);
}

.recent-blog-posts .post-item .post-img{
  position:relative;
  overflow:hidden;
}

.recent-blog-posts .post-item .post-img img{
  display:block;
  width:100%;
  height:280px;
  object-fit:cover;
  transition:transform .5s ease;
}

.recent-blog-posts .post-item:hover .post-img img{
  transform:scale(1.08);
}

.theme-premium .recent-blog-posts .post-item .post-date{
  position:absolute;
  left:18px;
  bottom:18px;
  inset:auto auto 18px 18px;
  height:auto;
  border:1px solid rgba(255,255,255,.22)!important;
  outline:0!important;
  display:inline-flex;
  align-items:center;
  padding:8px 14px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#fff;
  font-size:12px;
  font-weight:800;
  pointer-events:none;
  border-radius:999px;
  box-shadow:none;
}

.recent-blog-posts .post-item .post-content{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:26px 28px 24px;
}

.recent-blog-posts .post-item .post-title{
  color:var(--heading-color);
  font-size:20px;
  font-weight:900;
  letter-spacing:-0.02em;
  line-height:1.28;
  margin:0 0 14px;
  transition:color .2s ease;
}

.recent-blog-posts .post-item .post-title a{
  color:inherit;
  text-decoration:none;
}

.recent-blog-posts .post-item .meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.recent-blog-posts .post-item .meta i{
  font-size:16px;
  color:var(--accent-color);
}

.recent-blog-posts .post-item .meta span{
  font-size:14px;
  font-weight:700;
  color:rgba(2,6,23,.55);
}

.recent-blog-posts .post-item hr{
  margin:14px 0 12px;
  border:0;
  border-top:1px solid rgba(2,6,23,.08);
}

.recent-blog-posts .post-item .readmore{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:auto;
  font-weight:800;
  font-size:14px;
  color:rgba(2,6,23,.65);
  text-decoration:none;
  transition:color .2s ease, transform .2s ease;
}

.recent-blog-posts .post-item .readmore i{
  line-height:0;
  font-size:14px;
  transform:translateX(0);
  transition:transform .2s ease;
}

.recent-blog-posts .post-item:hover .post-title,
.recent-blog-posts .post-item:hover .readmore{
  color:var(--accent-color);
}

.recent-blog-posts .post-item:hover .readmore i{
  transform:translateX(3px);
}

@media (max-width:991.98px){
  .recent-blog-posts{
    padding-top:60px;
    padding-bottom:60px;
  }

  .recent-blog-posts .post-item .post-img img{
    height:250px;
  }
}

@media (max-width:576px){
  .recent-blog-posts{
    padding-top:52px;
    padding-bottom:52px;
  }

  .recent-blog-posts .section-title{
    margin-bottom:28px;
  }

  .recent-blog-posts .post-item .post-img img{
    height:220px;
  }

  .recent-blog-posts .post-item .post-content{
    padding:22px 20px 20px;
  }

  .recent-blog-posts .post-item .post-title{
    font-size:18px;
  }

  .theme-premium .recent-blog-posts .post-item .post-date{
    left:14px;
    bottom:14px;
    inset:auto auto 14px 14px;
    padding:7px 12px;
  }
}

/* =========================================================
14) BLOG DETAILS (scoped)
========================================================= */
.blog-details-page .main{background:var(--bd-bg);padding-bottom:60px;}
.blog-details-page .page-title{padding:28px 0 18px;background:transparent;}
.blog-details-page .breadcrumbs ol{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  list-style:none;
  padding:0;
  margin:0 0 10px;
}
.blog-details-page .breadcrumbs a{
  color:var(--bd-muted);
  text-decoration:none;
  font-weight:700;
}
.blog-details-page .breadcrumbs .current{color:var(--bd-ink);font-weight:900;}
.blog-details-page .page-title h1{
  font-weight:900;
  letter-spacing:-0.03em;
  margin:0;
  color:var(--bd-ink);
}
.blog-details-page .article{border-radius:22px;overflow:hidden;border-color:var(--bd-line);}
.blog-details-page .hero-img{position:relative;overflow:hidden;}
.blog-details-page .hero-img img{
  width:100%;
  display:block;
  height:auto;
  transform:scale(1.02);
  transition:transform .45s ease;
}
.blog-details-page .article:hover .hero-img img{transform:scale(1.06);}
.blog-details-page .article-content{padding:26px 28px 28px;}
.blog-details-page .content-header .title{
  font-size:30px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-0.04em;
  margin:0 0 16px;
  color:var(--bd-ink);
}
.blog-details-page .author-details h4{margin:0;font-size:14px;font-weight:900;}
.blog-details-page .author-details .role{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--bd-muted);
  font-weight:700;
}
.blog-details-page .content{padding-top:18px;}
.blog-details-page .content p{
  color:rgba(2,6,23,.70);
  font-weight:600;
  line-height:1.75;
  font-size:15px;
}
.blog-details-page .content h2{
  margin-top:22px;
  margin-bottom:10px;
  font-size:20px;
  font-weight:900;
  letter-spacing:-0.02em;
  color:var(--bd-ink);
}
.blog-details-page .content ul{padding-left:18px;}
.blog-details-page .content ul li{
  margin:10px 0;
  color:rgba(2,6,23,.70);
  font-weight:600;
}
.blog-details-page .content-image{
  background:#fff;
  border:1px solid var(--bd-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--bd-shadow-soft);
  margin:16px 0;
}
.blog-details-page .content-image.right-aligned{
  float:right;
  width:min(320px,100%);
  margin-left:18px;
}
.blog-details-page .content-image img{width:100%;display:block;}
.blog-details-page .content-image figcaption{
  padding:10px 12px;
  font-size:12px;
  color:var(--bd-muted);
  font-weight:700;
  border-top:1px solid var(--bd-line);
}
@media (max-width:991.98px){
  .blog-details-page .content-image.right-aligned{float:none;width:100%;margin-left:0;}
  .blog-details-page .sidebar{margin-top:18px;}
}
@media (max-width:576px){
  .blog-details-page .article-content{padding:20px;}
  .blog-details-page .content-header .title{font-size:22px;}
}
.blog-details-page .sidebar .widgets-container{display:grid;gap:16px;}
.blog-details-page .sidebar .widget-item{
  padding:18px;
  border-radius:22px;
  box-shadow:var(--bd-shadow-soft);
  border-color:rgba(15,23,42,.10);
}
.blog-details-page .sidebar .widget-title{
  font-weight:900;
  letter-spacing:-.02em;
  font-size:22px;
  margin:0 0 12px;
  color:rgba(11,18,32,.95);
}
.blog-details-page .sidebar .search-widget form{position:relative;}
.blog-details-page .sidebar .search-widget input[type="text"]{
  width:100%;
  height:44px;
  padding:10px 48px 10px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  outline:none;
  background:#fff;
  font-weight:600;
}
.blog-details-page .sidebar .search-widget input[type="text"]:focus{
  border-color:rgba(37,99,235,.35);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}
.blog-details-page .sidebar .search-widget button{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(2,6,23,.02);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.blog-details-page .sidebar .search-widget button:hover{
  background:rgba(2,6,23,.04);
  border-color:rgba(15,23,42,.16);
}
.blog-details-page .sidebar .recent-posts-widget .post-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,.08);
  background:rgba(2,6,23,.01);
  margin-bottom:10px;
}
.blog-details-page .sidebar .recent-posts-widget .post-item:last-child{margin-bottom:0;}
.blog-details-page .sidebar .recent-posts-widget .post-item img{
  width:56px;height:56px;
  border-radius:14px;
  object-fit:cover;
  border:1px solid rgba(15,23,42,.10);
  flex:0 0 auto;
}
.blog-details-page .sidebar .recent-posts-widget .post-item h4{
  margin:0 0 4px;
  font-size:16px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.01em;
}
.blog-details-page .sidebar .recent-posts-widget .post-item h4 a{
  color:rgba(11,18,32,.92);
  text-decoration:none;
}
.blog-details-page .sidebar .recent-posts-widget .post-item h4 a:hover{color:#2563eb;}
.blog-details-page .sidebar .recent-posts-widget .post-item time{
  font-size:13px;
  font-weight:700;
  color:rgba(2,6,23,.55);
}
.blog-details-page .sidebar .categories-widget ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
}
.blog-details-page .sidebar .categories-widget li a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  text-decoration:none;
  font-weight:800;
  color:rgba(11,18,32,.86);
}
.blog-details-page .sidebar .categories-widget li a span{
  font-weight:900;
  color:rgba(2,6,23,.55);
}
.blog-details-page .sidebar .categories-widget li a:hover{
  border-color:rgba(37,99,235,.18);
  box-shadow:0 10px 22px rgba(2,6,23,.06);
  transform:translateY(-1px);
}

/* =========================================================
15) BLOG COMMENTS
========================================================= */
#blog-comments.blog-comments{padding-top:26px;padding-bottom:26px;}
#blog-comments.blog-comments .comments-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
#blog-comments.blog-comments .comments-header .title{margin:0;font-weight:900;letter-spacing:-.02em;}
#blog-comments.blog-comments .comments-stats{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 10px 28px rgba(2,6,23,.06);
  font-weight:800;
  color:rgba(11,18,32,.86);
}
#blog-comments.blog-comments .comments-stats .count{
  min-width:28px;
  height:28px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,99,235,.10);
  color:rgba(37,99,235,.95);
  font-weight:900;
}
#blog-comments.blog-comments .comments-container{display:grid;gap:14px;}
#blog-comments.blog-comments .comment-box{
  padding:14px;
  border-radius:22px;
  box-shadow:var(--shadow-sm);
  border-color:rgba(15,23,42,.10);
}
#blog-comments.blog-comments .comment-wrapper{display:flex;gap:14px;align-items:flex-start;}
#blog-comments.blog-comments .avatar-wrapper{
  position:relative;
  width:54px;height:54px;
  flex:0 0 auto;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(2,6,23,.03);
}
#blog-comments.blog-comments .avatar-wrapper img{width:100%;height:100%;object-fit:cover;display:block;}
#blog-comments.blog-comments .status-indicator{
  position:absolute;
  right:6px;
  bottom:6px;
  width:10px;height:10px;
  border-radius:999px;
  background:rgba(34,197,94,.95);
  border:2px solid #fff;
}
#blog-comments.blog-comments .comment-content{min-width:0;flex:1 1 auto;}
#blog-comments.blog-comments .comment-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}
#blog-comments.blog-comments .user-info h4{
  margin:0;
  font-weight:900;
  letter-spacing:-.01em;
  font-size:1.05rem;
}
#blog-comments.blog-comments .time-badge{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:rgba(2,6,23,.02);
  color:rgba(2,6,23,.60);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
#blog-comments.blog-comments .engagement .likes{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:rgba(2,6,23,.65);
  font-size:13px;
  font-weight:800;
}
#blog-comments.blog-comments .comment-body p{
  margin:10px 0 12px;
  color:rgba(11,18,32,.86);
  font-weight:600;
  line-height:1.6;
}
#blog-comments.blog-comments .comment-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
#blog-comments.blog-comments .comment-actions .action-btn{
  appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:rgba(11,18,32,.86);
  font-weight:800;
  padding:8px 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 8px 18px rgba(2,6,23,.06);
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  cursor:pointer;
}
#blog-comments.blog-comments .comment-actions .action-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,.18);
  box-shadow:0 10px 28px rgba(2,6,23,.08);
  background:rgba(2,6,23,.01);
}
@media (max-width:576px){
  #blog-comments.blog-comments .comment-box{padding:12px;}
  #blog-comments.blog-comments .avatar-wrapper{width:48px;height:48px;border-radius:14px;}
}

/* =========================================================
BLOG COMMENT FORM
========================================================= */
#blog-comment-form.blog-comment-form{
  padding-top:24px;
  padding-bottom:8px;
}

#blog-comment-form .comment-form-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:22px;
  box-shadow:0 16px 40px rgba(2,6,23,.08);
  padding:24px;
}

#blog-comment-form .form-header{
  margin-bottom:18px;
}

#blog-comment-form .form-header h3{
  margin:0 0 8px;
  font-size:2rem;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#0f172a;
}

#blog-comment-form .form-header p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  font-weight:600;
  color:rgba(100,116,139,.95);
}

#blog-comment-form .form-field{
  display:flex;
  flex-direction:column;
}

#blog-comment-form .form-field label{
  display:block;
  margin-bottom:8px;
  font-size:15px;
  font-weight:800;
  color:rgba(11,18,32,.94);
}

#blog-comment-form .form-field label span{
  color:#dc2626;
  font-weight:900;
}

#blog-comment-form .form-field input,
#blog-comment-form .form-field textarea{
  width:100%;
  border:1px solid rgba(15,23,42,.12);
  border-radius:16px;
  background:#fff;
  padding:13px 15px;
  font-size:15px;
  font-weight:600;
  color:#0f172a;
  box-sizing:border-box;
  outline:none;
  box-shadow:0 8px 18px rgba(2,6,23,.04);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#blog-comment-form .form-field input::placeholder,
#blog-comment-form .form-field textarea::placeholder{
  color:rgba(100,116,139,.72);
  font-weight:500;
}

#blog-comment-form .form-field input:focus,
#blog-comment-form .form-field textarea:focus{
  border-color:rgba(37,99,235,.35);
  box-shadow:0 0 0 4px rgba(37,99,235,.12), 0 12px 24px rgba(2,6,23,.06);
}

#blog-comment-form .form-field textarea{
  min-height:170px;
  resize:vertical;
}

#blog-comment-form .error-text{
  display:inline-block;
  margin-top:8px;
  color:#dc2626;
  font-size:14px;
  font-weight:700;
}

#blog-comment-form .comment-form-actions{
  display:flex;
  justify-content:center;
  margin-top:4px;
}

#blog-comment-form .submit-btn{
  min-width:210px;
  border:0;
  border-radius:16px;
  padding:13px 24px;
  background:linear-gradient(135deg, #2563eb, #1d4ed8);
  color:#fff;
  font-size:15px;
  font-weight:900;
  letter-spacing:-0.01em;
  box-shadow:0 18px 38px rgba(37,99,235,.22);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

#blog-comment-form .submit-btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.02);
  box-shadow:0 22px 48px rgba(37,99,235,.28);
}

#blog-comment-form .submit-btn:active{
  transform:translateY(0);
}

@media (max-width:991.98px){
  #blog-comment-form .comment-form-card{
    padding:20px;
  }
}

@media (max-width:767.98px){
  #blog-comment-form{
    padding-top:20px;
  }

  #blog-comment-form .comment-form-card{
    padding:18px;
    border-radius:18px;
  }

  #blog-comment-form .form-header h3{
    font-size:1.6rem;
  }

  #blog-comment-form .submit-btn{
    width:100%;
    min-width:0;
  }
}

.market-card{
  width:100%;
  border-radius:24px;
  padding:18px 24px;
  color:#fff;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #4f46e5 100%);
  box-shadow:0 10px 30px rgba(37,99,235,.18);
}

.market-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.market-card__title-wrap{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.market-card__icon{
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(255,255,255,.14);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  flex-shrink:0;
}

.market-card__title{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  color:#fff;
}

.market-card__date{
  font-size:14px;
  font-weight:600;
  color:rgba(255,255,255,.85);
  white-space:nowrap;
}

.market-card__stats{
  display:flex;
  align-items:center;
  gap:24px;
}

.market-card__stat{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}

.market-card__label{
  font-size:15px;
  font-weight:500;
  color:rgba(255,255,255,.88);
}

.market-card__value{
  font-size:30px;
  font-weight:800;
  line-height:1;
  letter-spacing:-0.02em;
  color:#fff;
}

.market-card__divider{
  width:1px;
  height:38px;
  background:rgba(255,255,255,.2);
  flex-shrink:0;
}

@media (max-width:991.98px){
  .market-card{
    margin-bottom:24px;
  }
}

@media (max-width:767.98px){
  .market-card{
    padding:16px;
    border-radius:20px;
  }

  .market-card__header{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    margin-bottom:14px;
  }

  .market-card__title{
    font-size:20px;
  }

  .market-card__stats{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .market-card__divider{
    width:100%;
    height:1px;
  }

  .market-card__value{
    font-size:26px;
  }
}

/* =========================================================
CONTENT / TYPOGRAPHY PROSE
========================================================= */
.article-prose{
  color:var(--ink);
  line-height:1.75;
  word-break:break-word;
}

.article-prose > :last-child{
  margin-bottom:0;
}

.article-prose h2,
.article-prose h3,
.article-prose h4{
  margin-top:1.75rem;
  margin-bottom:.85rem;
}

.article-prose p,
.article-prose ul,
.article-prose ol,
.article-prose blockquote,
.article-prose table{
  margin-bottom:1rem;
}

.article-prose ul,
.article-prose ol{
  padding-left:1.25rem;
}

.article-prose img{
  max-width:100%;
  height:auto;
  border-radius:18px;
}

.article-prose a{
  color:var(--primary);
  text-decoration:underline;
  text-underline-offset:2px;
}

.article-prose blockquote{
  margin:1.25rem 0;
  padding:1rem 1.25rem;
  border-left:4px solid rgba(37,99,235,.35);
  background:rgba(37,99,235,.05);
  border-radius:0 16px 16px 0;
}

.article-prose table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
}

.article-prose table th,
.article-prose table td{
  padding:.75rem;
  border:1px solid rgba(15,23,42,.10);
}

.article-prose table th{
  background:rgba(15,23,42,.04);
}

/* sidebar recent posts */

.recent-post-item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

.recent-post-item img{
  width:70px;
  height:60px;
  object-fit:cover;
  border-radius:8px;
  flex-shrink:0;
}

.recent-post-item h4{
  font-size:14px;
  margin:0;
  line-height:1.4;
}

.recent-post-item h4 a{
  color:#111;
  text-decoration:none;
}

.recent-post-item time{
  font-size:12px;
  color:#888;
}