/* Trang chi tiet bai viet. Bien mau noi vao he thiet ke chung (news.css) de khong phu thuoc style.css cu */
.article-page{
  --c-text:var(--np-ink);--c-muted:var(--np-muted);
  --c-primary:var(--np-primary-3);--c-primary-dark:var(--np-primary);
  --c-accent:var(--np-gold);--c-coral:var(--np-accent);
  padding:30px 0 20px;
}
.article-grid{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 340px;
  gap:26px;align-items:start;
}

.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(9,48,149,.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}

.article-main{
  background:#fff;border-radius:var(--np-radius);
  border:1px solid var(--np-line);box-shadow:var(--np-shadow);
  padding:30px 34px;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-family:var(--np-serif);
  font-size:clamp(23px,2.5vw,30px);line-height:1.3;color:var(--c-text);
  margin:0 0 20px;font-weight:700;
}

.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}

.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}

.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}

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

.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;
}

.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;
}

.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}
}

.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}

/* Man hinh rong: thanh chia se nam ra le trai, the bai viet thang hang voi logo o header,
   cot ben thang hang voi mep phai header. Bai viet rong hon ma khung van dong bo. */
@media (min-width:1400px){
  .article-grid.np-container{
    max-width:none;
    margin-left:calc((100% - 1220px) / 2 - 78px);
    margin-right:calc((100% - 1220px) / 2);
  }
}

/* Cot ben: cac khoi dung chung .np-widget trong news.css */
.article-side{min-width:0}

@media (max-width:1024px){
  .article-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  /* .article-grid dung truoc de thang .np-side (news.css nap sau) */
  .article-grid .article-side{grid-column:1 / -1;margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  .article-share-side{position:static;flex-direction:row;justify-content:center;flex-wrap:wrap;border-radius:30px;padding:8px 14px}
  .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-grid .article-side{order:3;grid-template-columns:minmax(0,1fr)}
  .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}
}

@media print{
  .np-topbar,.np-masthead,.np-nav,.np-footer,.np-fab,.np-progress,
  .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}
}