:root{
    --paper:#fff;
    --text:#1b1e24;
    --muted:#667085;
    --line:#e9eef3;
    --radius:18px;
    --shadow:0 8px 28px rgba(2,6,23,.08);
  }
  body{margin:0;background:#f8fafc;color:var(--text);font:16px/1.65 Inter, system-ui, "Be Vietnam Pro", sans-serif}

  /* Breadcrumb */
  .tvn-crumbs{max-width:1100px;margin:18px auto 0;padding:0 18px;color:var(--muted);font-size:14px}
  .tvn-crumbs a{color:inherit;text-decoration:none}

  /* Hero */
  .tvn-hero{max-width:1100px;margin:14px auto;padding:0 18px}
  .tvn-hero-frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#f7f9fb}
  .tvn-hero-media {
    width: 100%;
    height: auto;
    max-height: 380px; /* ✅ giảm chiều cao tối đa */
    object-fit: cover; /* ✅ giữ khung ảnh gọn đẹp */
    display: block;
  }
  .tvn-hero-frame {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #f7f9fb;
    max-width: 800px;   /* ✅ giới hạn chiều rộng ảnh */
    margin: 0 auto;     /* ✅ căn giữa */
  }

  /* Layout */
  .tvn-grid{max-width:1100px;margin:0 auto 60px;padding:0 18px;display:grid;grid-template-columns:1.2fr .55fr;gap:28px}
  @media (max-width:960px){.tvn-grid{grid-template-columns:1fr}}

  .tvn-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
  .tvn-pad{padding:22px}

  .tvn-title{font:700 34px/1.25 "Be Vietnam Pro",Inter,sans-serif;margin:6px 0 8px}
  .tvn-meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:14px}
  .tvn-meta .tvn-dot::before{content:"•";margin:0 8px;color:var(--line)}

  .tvn-tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px}
  .tvn-chip{border:1px solid var(--line);background:var(--paper);color:var(--text);padding:6px 10px;border-radius:12px;font-size:13px}

  /* Nội dung */

  /* ===== Nội dung bài viết: hiển thị đúng như trong DB, không giãn dư ===== */
/* Nội dung bài viết: giữ font mặc định của site (Inter/Be Vietnam Pro...) */
.tvn-prose{
  font-size: 18px;
  line-height: 1.65;
  white-space: normal;          /* tránh nhân đôi xuống dòng */
  font-family: inherit !important;  /* kế thừa font từ body */
}

/* Đoạn văn & dọn rác khoảng trắng như bạn đã cấu hình */
.tvn-prose p{ margin: 8px 0; }
.tvn-prose p:empty{ display:none; }
@supports(selector(:has(*))){
  .tvn-prose p:has(br):not(:has(:not(br))){ display:none; }
}

/* Đừng cộng thêm margin “đại trà” cho các thẻ Word sinh ra */
.tvn-prose p,
.tvn-prose div,
.tvn-prose span {
  margin: 0;                  /* KHÔNG tự cộng khoảng cách */
}

/* Cho đoạn kế tiếp 1 khoảng nhỏ để dễ đọc (như Word) */
.tvn-prose p + p { margin-top: .4em; }

/* Danh sách: giữ bullet đúng chuẩn, không giãn dư */
.tvn-prose ul,
.tvn-prose ol {
  margin: 0;                  /* bỏ margin mặc định của trình duyệt */
  padding-left: 1.2em;        /* thụt vào vừa phải cho bullet/number */
  list-style-position: outside;
}
.tvn-prose li { margin: .2em 0; }

/* Ảnh/emoji không làm đội dòng */
.tvn-prose img, .tvn-prose svg { vertical-align: middle; }

/* Loại bỏ các đoạn rỗng do Word tạo (p chỉ có &nbsp; hoặc chỉ <br>) */
.tvn-prose p:empty { display:none; }
@supports(selector(:has(*))) {
  .tvn-prose p:has(> br:only-child),
  .tvn-prose p:has(> span:only-child:empty) {
    display: none;
  }
}

/* ===== NỘI DUNG ===== */
.tvn-prose{
  font-size: 18px;
  line-height: 1.65;
  /* BỎ pre-wrap để không nhân đôi xuống dòng */
  white-space: normal;
  font-family: inherit !important;
}

/* Khoảng cách đoạn vừa phải */
.tvn-prose p{ margin: 8px 0; }

/* Ẩn đoạn rỗng (không chữ, chỉ khoảng trắng) */
.tvn-prose p:empty{ display:none; }

/* Ẩn đoạn chỉ còn &nbsp; hoặc toàn <br> (modern browsers) */
@supports(selector(:has(*))) {
  .tvn-prose p:has(br):not(:has(:not(br))){ display:none; }
}

/* Giữ emoji/icon thẳng hàng chữ */
.tvn-prose img, .tvn-prose svg { vertical-align: middle; }


  /* Sidebar */
  .tvn-aside{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:18px}
  .tvn-toc h4,.tvn-related h4{margin:0 0 10px;font:700 16px/1 "Be Vietnam Pro"}
  .tvn-toc ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
  .tvn-toc a{color:inherit;text-decoration:none;font-size:14px;border:1px dashed var(--line);padding:10px 12px;border-radius:12px;display:block}
  .tvn-toc a:hover{border-color:#0ea5e9}

  /* Related (có ảnh) */
  .tvn-related-grid{display:grid;gap:14px}
  .tvn-related-card{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;
    border:1px solid var(--line);border-radius:14px;padding:10px;transition:.12s}
  .tvn-related-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(2,6,23,.10);border-color:#dbe5ee}
  .tvn-thumb{width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#f3f6f9;border:1px solid #eef2f7}
  .tvn-thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .tvn-rel-title{font:600 15px/1.3 "Be Vietnam Pro";margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tvn-rel-meta{font:12px/1.2 Inter;color:#667085}
  .tvn-rel-link{text-decoration:none;color:inherit}

/* ===== Tiêu đề bài viết giống blog ===== */
.tvn-title{
  font-family: 'Merriweather', serif;  /* chỉ tiêu đề dùng Merriweather */
  font-size: 40px;                     /* to rõ, giống blog/news */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.2px;
  color: #111827;
  margin: 6px 0 20px;                  /* cách meta rõ ràng */
}

@media (max-width: 768px){
  .tvn-title{ font-size: 32px; }
}

/* ===== Meta dưới tiêu đề ===== */
.tvn-meta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 28px;                 /* thêm khoảng cách với body */
}
.tvn-meta .tvn-dot::before{ content:"•"; margin: 0 8px; color: var(--line); }