/* =========================================================
   ARTICLE DETAIL — bố cục 3 cột chuyên nghiệp
   ========================================================= */
.article-page{padding:30px 0 60px;background:#f5f8fa}
.article-grid{
  display:grid;
  grid-template-columns:60px minmax(0,1fr) 320px;
  gap:30px;align-items:start;
}

/* ---------- Sidebar trái — share dọc ---------- */
.article-share-side{
  position:sticky;top:88px;display:flex;flex-direction:column;gap:8px;align-items:center;
  padding:14px 6px;background:#fff;border-radius:30px;box-shadow:0 6px 20px rgba(17,115,116,.08);
}
.share-side__label{
  font-size:10px;font-weight:700;color:#94a3b8;letter-spacing:1px;
  writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:6px;
  display:flex;align-items:center;gap:4px;
}
.share-side__btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--bg,#64748b);color:#fff;border:0;cursor:pointer;
  font-size:14px;transition:transform .15s, box-shadow .15s;
}
.share-side__btn:hover{transform:scale(1.1);box-shadow:0 6px 14px rgba(0,0,0,.18);color:#fff}

/* ---------- Main article ---------- */
.article-main{
  background:#fff;border-radius:14px;
  box-shadow:0 6px 20px rgba(17,115,116,.08);
  padding:32px 36px;min-width:0;
}
.article-crumbs{
  font-size:13px;color:var(--c-muted);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.article-crumbs a{color:var(--c-muted)}
.article-crumbs a:hover{color:var(--c-primary)}
.article-crumbs i{font-size:9px;color:#cbd5d8}
.article-cat{
  display:inline-block;background:var(--c-coral);color:#fff;
  padding:4px 14px;border-radius:6px;font-size:11px;font-weight:700;
  letter-spacing:1px;margin-bottom:14px;
}
.article-title{
  font-size:30px;line-height:1.25;color:var(--c-text);
  margin:0 0 22px;font-weight:800;
}

/* ---------- Author meta ---------- */
.article-meta{
  display:flex;align-items:center;gap:14px;
  padding-bottom:18px;border-bottom:1px solid #e3e9ef;
  margin-bottom:18px;flex-wrap:wrap;
}
.article-meta__avatar{
  width:42px;height:42px;border-radius:50%;object-fit:cover;
  background:#f3f7f8;border:1px solid #e3e9ef;
}
.article-meta__author{display:flex;flex-direction:column;line-height:1.3;margin-right:auto}
.article-meta__author strong{color:var(--c-primary-dark);font-size:14px}
.article-meta__author small{color:var(--c-muted);font-size:12.5px}
.article-meta__stats{display:flex;gap:18px;color:var(--c-muted);font-size:13px;flex-wrap:wrap}
.article-meta__stats i{margin-right:4px}

/* ---------- Toolbar: share + font ---------- */
.article-tools{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;background:#f8fafc;border-radius:10px;
  margin-bottom:22px;flex-wrap:wrap;
}
.article-tools__share{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:1;min-width:0}
.article-tools__label{font-size:13px;font-weight:600;color:var(--c-muted);display:inline-flex;align-items:center;gap:6px}
.t-share{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 12px;border-radius:6px;color:#fff;
  font-size:12.5px;font-weight:600;border:0;cursor:pointer;
  font-family:inherit;transition:opacity .15s,transform .15s;
}
.t-share:hover{opacity:.9;color:#fff;transform:translateY(-1px)}
.article-tools__right{display:flex;align-items:center;gap:10px;margin-left:auto}
.font-control{
  display:flex;align-items:center;gap:0;background:#fff;
  border:1px solid #e3e9ef;border-radius:8px;overflow:hidden;
}
.font-control__btn{
  height:32px;min-width:38px;padding:0 10px;background:#fff;border:0;
  color:var(--c-text);font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:background .15s;
  border-right:1px solid #e3e9ef;
}
.font-control__btn:last-child{border-right:0}
.font-control__btn:hover{background:#f0f7f8;color:var(--c-primary)}
.font-control__val{
  padding:0 14px;font-size:13px;font-weight:700;color:var(--c-primary-dark);
  border-right:1px solid #e3e9ef;display:flex;align-items:center;
}
.article-tools__right > .font-control__btn{border:1px solid #e3e9ef;border-radius:8px}

/* ---------- Summary box ---------- */
.article-summary{
  padding:18px 20px;background:#f8fafc;border:1px solid #e3e9ef;
  border-left:4px solid var(--c-primary);border-radius:6px;
  margin-bottom:24px;color:#475569;
}
.article-summary em{font-style:italic;font-size:15.5px;line-height:1.65}

/* ---------- Featured image ---------- */
.article-feature{margin:0 0 24px;border-radius:10px;overflow:hidden;background:#f3f7f8}
.article-feature img{width:100%;height:auto;display:block}

/* ---------- Content ---------- */
.article-content{font-size:16px;line-height:1.8;color:#334155}
.article-content p{margin:0 0 16px}
.article-content h2{font-size:22px;color:var(--c-primary-dark);margin:28px 0 12px}
.article-content h3{font-size:18px;color:var(--c-primary-dark);margin:24px 0 10px}
.article-content ul,.article-content ol{margin:0 0 16px;padding-left:24px}
.article-content li{margin-bottom:6px}
.article-content a{color:var(--c-primary);text-decoration:underline}
.article-content blockquote{
  margin:18px 0;padding:14px 18px;
  border-left:4px solid var(--c-accent);
  background:#fffbeb;color:#475569;font-style:italic;
}

/* Ảnh trong nội dung — TỰ RESPONSIVE */
.article-content img,
.article-img{
  display:block;width:100%;height:auto;
  border-radius:8px;margin:14px auto;
  background:#f3f7f8;
}
.article-content figure{margin:14px 0}
.article-content figure img{margin:0}
.article-content figcaption{
  text-align:center;font-size:13px;color:var(--c-muted);
  margin-top:6px;font-style:italic;
}

/* ---------- GOM ẢNH LIỀN KỀ — collage grid ---------- */
.img-group{
  display:grid;gap:10px;margin:18px 0;border-radius:8px;overflow:hidden;
}
.img-group > img,
.img-group > figure > img,
.img-group > figure{
  margin:0 !important;border-radius:6px;
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
}
.img-group--2{grid-template-columns:1fr 1fr}
.img-group--3{grid-template-columns:1fr 1fr 1fr}
.img-group--4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
@media (max-width:600px){
  .img-group--3,.img-group--4{grid-template-columns:1fr 1fr}
}

/* ---------- Share dưới bài ---------- */
.article-share-bottom{
  display:flex;align-items:center;gap:10px;
  padding-top:24px;margin-top:30px;
  border-top:1px solid #e3e9ef;flex-wrap:wrap;
}
.article-share-bottom span{margin-right:6px}

/* ---------- Sidebar phải — related ---------- */
.article-side{position:sticky;top:88px}
.article-side__title{
  font-size:18px;color:var(--c-primary-dark);
  margin:0 0 14px;padding-bottom:10px;
  border-bottom:3px solid var(--c-accent);font-weight:700;
}
.related-list{display:flex;flex-direction:column;gap:14px}
.related-item a{display:grid;grid-template-columns:90px 1fr;gap:12px;color:inherit;align-items:center}
.related-item__img{aspect-ratio:1.2/1;overflow:hidden;border-radius:8px;background:#f3f7f8}
.related-item__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.related-item a:hover .related-item__img img{transform:scale(1.06)}
.related-item__body h4{
  font-size:13.5px;line-height:1.4;margin:0 0 4px;
  color:var(--c-text);font-weight:600;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.related-item a:hover .related-item__body h4{color:var(--c-primary)}
.related-item__body small{font-size:11.5px;color:var(--c-muted)}
.related-empty{
  padding:16px;text-align:center;color:var(--c-muted);
  font-size:13px;background:#f8fafc;border-radius:8px;
}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .article-grid{grid-template-columns:50px 1fr;gap:18px}
  .article-side{grid-column:1 / -1;margin-top:24px;position:static}
  .related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .article-share-side{flex-direction:row;border-radius:30px;padding:8px 14px;top:80px}
  .share-side__label{writing-mode:initial;transform:none;margin:0 6px 0 0}
}
@media (max-width:768px){
  .article-grid{grid-template-columns:1fr;gap:14px}
  .article-share-side{order:1;position:static;flex-direction:row;justify-content:center;flex-wrap:wrap}
  .article-share-side .share-side__label{display:none}
  .article-main{order:2;padding:20px 18px}
  .article-side{order:3}
  .article-title{font-size:22px}
  .article-tools{padding:12px}
  .article-tools__right{margin-left:0;width:100%;justify-content:flex-end}
  .t-share{padding:0 10px;font-size:11.5px;height:30px}
  .article-content{font-size:15.5px}
  .article-content h2{font-size:19px}
  .related-list{grid-template-columns:1fr}
}

/* ---------- Print ---------- */
@media print{
  .topbar,.header,.footer,.back-top,.floating-call,
  .article-share-side,.article-side,.article-tools,
  .article-share-bottom,.article-crumbs{display:none !important}
  .article-main{box-shadow:none;padding:0}
  body{background:#fff}
}