/* ===== Spacing giữa MENU ↔ ticker ↔ breadcrumb ===== */

.news-shortcut{ margin-top:10px !important; margin-bottom:14px !important; }

.news-breadcrumb{ margin-top:8px !important; font-size:14px; color:#777; }

.news-breadcrumb a{ color:#444; }

.news-breadcrumb a:hover{ color:#111; }



/* ===== Hero (full width) ===== */

.news-hero{ padding-top:6px; padding-bottom:6px; }

#news-single .news-kicker a{

  text-transform: uppercase; letter-spacing:.04em; font-weight:700; color:#0b8f55;

  border-bottom:2px solid #0b8f55; padding-bottom:2px;

}

#news-single .news-title{ font-size:42px; line-height:1.15; margin:6px 0 12px; }

@media(max-width:849px){ #news-single .news-title{ font-size:30px; } }

#news-single .news-meta{ color:#777; display:flex; gap:8px; align-items:center; margin-bottom:14px; }

#news-single .news-meta .dot{ opacity:.65; }



/* ===== Đọc nhiều (dưới title) – KHÔNG sticky, không phá lưới ===== */

.news-popular-wrap{ margin-top:6px; margin-bottom:18px; }

.news-popular-wrap .sticky{ position:static !important; top:auto !important; }

.news-popular-wrap .news-box{ background:#fff7f4; padding:16px; border-radius:10px; }

.news-popular-wrap .news-aside-title{ font-size:22px; font-weight:700; color:#b22222; border-bottom:2px solid #f0d0d0; margin:0 0 10px; padding-bottom:6px; }

.news-popular-wrap .pop-first .pop-thumb img{ width:100%; height:220px; object-fit:cover; border-radius:6px; }

.news-popular-wrap .pop-first .pop-title-big{ font-size:18px; font-weight:700; display:block; margin-top:8px; line-height:1.35; }

.news-popular-wrap .pop-first .pop-cat{ font-size:12px; color:#b22222; margin-top:4px; }

.news-popular-wrap .pop-mini{ border-top:1px solid #eee; padding-top:10px; margin-top:10px; }

.news-popular-wrap .pop-mini .pop-title{ font-size:15px; font-weight:600; display:block; line-height:1.35; }

.news-popular-wrap .pop-mini .pop-cat{ font-size:12px; color:#b22222; }



/* ===== Share dọc + nội dung ===== */

.news-share-col{ position:relative; }

.news-share-sticky{ position:sticky; top:90px; display:flex; flex-direction:column; gap:10px; }

.news-figure{ margin:16px 0 18px; }

.news-figure img{ width:100%; height:auto; display:block; }

.news-figure figcaption{ font-size:13px; color:#666; margin-top:6px; }

.news-content{ font-size:18px; line-height:1.75; color:#222; }

.news-content p{ margin:0 0 16px; }



/* ===== Bài liên quan (ảnh trái, chữ phải) ===== */

.news-related .news-subtitle{ font-size:22px; margin:8px 0 16px; }

.news-related .news-rel-item{ border-bottom:1px solid #eee; padding-bottom:16px; }

.news-rel-item .rel-thumb img{ width:100%; height:160px; object-fit:cover; border-radius:6px; }

.news-rel-item .rel-title{ font-size:20px; font-weight:700; display:block; margin:4px 0; line-height:1.35; }

.news-rel-item .rel-meta{ font-size:13px; color:#666; margin-bottom:6px; }

.news-rel-item .rel-excerpt{ font-size:15px; color:#444; line-height:1.6; }

/* Header full-width trên single */

.news-header-wide { width:100%; margin-bottom: 12px; }

.news-breadcrumb { color:#637381; }

.news-breadcrumb a { color:inherit; text-decoration:none; }

.news-breadcrumb .sep { margin:0 6px; }

.news-kicker { font-weight:600; margin-bottom:6px; }

.news-title { margin:0 0 8px; line-height:1.25; }

.news-meta { font-size:13px; color:#6b7280; }

.news-meta .dot { margin:0 6px; }

/* ===== Font-size controls ===== */

.news-fs-controls{

  position: sticky; top: 110px;

  display: grid; gap: 8px;

  width: 42px; margin-top: 18px;

}

.fs-btn{

  width: 42px; height: 42px; border-radius: 50%;

  border: 1px solid #d1d5db; background:#fff;

  font-weight:700; line-height: 1; font-size: 16px;

  cursor: pointer;

}

.fs-btn:hover{ box-shadow: 0 1px 6px rgba(0,0,0,.08); }



/* Nội dung tăng/giảm theo biến --fs */

.news-content{ --fs:0px; font-size: calc(17px + var(--fs)); line-height: 1.85; }

.news-content p, .news-content li{ font-size: inherit; }



/* ===== Header full width (từ bước trước) ===== */

.news-header-wide{ width:100%; margin-bottom:12px; }

.news-breadcrumb{ color:#637381; }

.news-breadcrumb a{ color:inherit; text-decoration:none; }

.news-breadcrumb .sep{ margin:0 6px; }

.news-kicker{ font-weight:600; margin-bottom:6px; }

.news-title{ margin:0 0 8px; line-height:1.25;font-size:32px; }

.news-meta{ font-size:13px; color:#6b7280; }

.news-meta .dot{ margin:0 6px; }



/* ===== Sidebar Đọc nhiều – mẫu như hình 2 ===== */

.widget-readmore{ }

.widget-readmore .title{

  font-size: 32px; font-weight: 800; color:#c62828; margin:0 0 10px;

}

.widget-readmore .title:after{

  content:""; display:block; width:60px; height:3px; background:#c62828; margin-top:8px;

}

.rm-list .rm-item{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid #eee; }

.rm-item .thumb{ flex:0 0 120px; display:block; overflow:hidden; border-radius:6px; }

.rm-item .thumb img{ width:100%; height:auto; display:block; }

.rm-item .info{ flex:1 1 auto; }

.rm-item .rm-title{ display:block; font-weight:700; line-height:1.35; margin:0 0 8px; }

.rm-item .rm-cate{

  font-size:12px; text-transform:uppercase; letter-spacing:.02em;

  color:#c62828; font-weight:700;

}

@media (max-width: 849px){

  .rm-item{ flex-direction:row; }

  .rm-item .thumb{ flex-basis:110px; }

}

/* ===== Leftbar (giữ nguyên nếu đã có) ===== */

.news-share-col{ position: relative; }

.news-leftbar{

  position: sticky; top: 90px;

  display: flex; flex-direction: column; align-items: center; gap: 14px;

  width: 52px; margin-left:auto; margin-right:auto;

}



/* ===== FS CONTROLS: pill đúng demo, canh giữa tuyệt đối ===== */

.news-fs-controls{ width: 52px; display:flex; justify-content:center; }



/* Khung pill */

.fs-group{

  box-sizing: border-box;

  width: 30px;                 /* bề ngang pill */

  height: 160px;               /* chiều cao pill */

  padding: 10px 6px;           /* khoảng cách mép – tránh dính viền */

  border: 1px solid #E9EDF3;

  border-radius: 28px;

  background:#fff;

  box-shadow: 0 1px 3px rgba(0,0,0,.04);



  /* Sắp xếp 3 phần tử: + | aa | − */

  display: flex;

  flex-direction: column;

  align-items: center;         /* CĂN GIỮA NGANG */

  justify-content: space-between; /* + trên, − dưới, aa ở giữa */

}



/* Reset style nút để không bị CSS theme ảnh hưởng */

.fs-item{

  box-sizing: border-box;

  margin: 0; padding: 0;

  background: transparent; border: 0;

  cursor: pointer;

  display: flex; align-items: center; justify-content: center;

  font: 700 16px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  color: #111827;

}



/* + và −: nút tròn có viền mảnh, nằm TRONG pill và CĂN GIỮA */

.fs-item--plus,

.fs-item--minus{

  width: 28px; height: 28px;

  border: 1px solid #E6EAF0;

  border-radius: 50%;

  background:#fff;

}

.fs-item--plus:hover,

.fs-item--minus:hover{ background:#F6F7F9; }



/* "aa": chữ thường, KHÔNG viền, nằm GIỮA pill */

.fs-item--reset{

  font-weight: 600;

  font-size: 16px;

  text-transform: lowercase;   /* 'aa' */

  align-self: center;          /* đảm bảo giữa ngang */

  line-height: 1;

}



/* Share icons cùng cột (nếu chưa có) */

.news-share .social-icons{ display: grid; gap: 10px; justify-items: center; }

.news-share .social-icons li{ margin:0 !important; }

.news-share .social-icons a,

.news-share .social-icons .button{

  width: 42px; height: 42px; border-radius: 50%;

  display:flex; align-items:center; justify-content:center;

  margin:0 !important; line-height:42px;

}



/* Mobile: pill nằm ngang cho gọn */

@media (max-width: 849px){

  .news-leftbar{ position: static; width:auto; }

  .news-fs-controls{ width:auto; }

  .fs-group{

    height:auto; padding:6px 8px; border-radius:999px;

    flex-direction: row; gap:10px; justify-content:center;

  }

}

/* ---- Single header (order mới) ---- */

.news-head{margin-bottom:18px}

.news-head .post-cat-top{

  font-weight:700; font-size:18px; line-height:1.3;

  color:#1a7c2e; margin:0 0 6px;

}

.news-head .post-breadcrumb{

  font-size:13px; color:#777; margin:0 0 8px;

}

.news-head .post-breadcrumb .sep{margin:0 6px; opacity:.6}

.news-head .main-title{

  margin:0 0 8px; line-height:1.25;

}

.news-head .meta-under-title{

  font-size:13px; color:#666;

  display:flex; flex-wrap:wrap; gap:6px; align-items:center;

}

.news-head .meta-under-title a{color:inherit; text-decoration:none}

.news-head .meta-under-title a:hover{text-decoration:underline}

.news-head .meta-under-title .meta-sep{opacity:.55}



/* FIX: vạch đỏ nằm ngay dưới nhãn danh mục và full chiều ngang */

.news-header-wide .news-kicker{

  position: relative;          /* để ::after bám theo */

  padding-bottom: 10px;        /* tạo khoảng hở với vạch */

  margin-bottom: 12px;

  display: flex; align-items: center; gap: 10px;

  font-weight: 800; text-transform: uppercase; letter-spacing: .02em;

  color:#2e7d32; font-size: 18px;

}

.news-header-wide .news-kicker::after{

  content: "";

  position: absolute;

  left: 0; right: 0; bottom: 0; /* kéo từ mép trái tới mép phải */

  height: 1px;                  /* mảnh 1px */

  background: #e53935;

}



/* Dấu chấm TRƯỚC breadcrumb (giữ nguyên nếu bạn đã thêm) */

.news-header-wide .news-breadcrumb{

  display:flex; align-items:center; flex-wrap:wrap; gap:6px;

  margin: 8px 0 14px;

  font-size:12px; text-transform:uppercase; letter-spacing:.04em;

  color:#9e9e9e;

}

.news-header-wide .news-breadcrumb::before{

  content:""; width:10px; height:10px; border-radius:50%;

  background:#cfd8dc; display:inline-block; margin-right:10px;

}

.news-header-wide .news-breadcrumb .sep{ font-size:0; line-height:0; }

.news-header-wide .news-breadcrumb .sep::after{

  content:"/"; font-size:12px; color:#bdbdbd; margin:0 6px;

}



/* Meta: chỉ danh mục màu, còn lại xám */

.news-header-wide .news-meta{ font-size:13px; font-weight:600; color:#757575; }

.news-header-wide .news-meta .news-cats,

.news-header-wide .news-meta .news-cats a{ color:#b71c1c; }

.news-header-wide .news-meta .dot{ color:#bdbdbd; margin:0 6px; }