/* Chỉ bản web nạp tệp này (server.js chèn sau newtab.css). Nó vẽ khối #ssr: phần máy chủ vẽ sẵn
   cho máy tìm kiếm và cho lần vẽ đầu, trước khi mã tiện ích lấy feed và gỡ khối này đi. Dùng đúng
   token của tiện ích (tokens.css) để lúc chuyển từ bản vẽ sẵn sang bản thật không đổi màu, đổi chữ. */
.ssr { color:var(--txt); }
.ssr h1 { font-size:var(--fs-display); line-height:1.2; letter-spacing:-.02em; margin:4px 0 12px; overflow-wrap:anywhere; }
.ssr h2 { font-size:var(--fs-h2); margin:28px 0 12px; }
.ssr a { color:var(--accent-txt, var(--accent)); }
.ssr-intro { color:var(--muted); max-width:72ch; margin:0 0 8px; }
.ssr-list { list-style:none; margin:0; padding:0; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ssr-card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; }
.ssr-card img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--card2); }
.ssr-card > div { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; }
.ssr-card h3 { font-size:var(--fs-h3); line-height:1.35; margin:0; }
.ssr-card h3 a { color:var(--txt); text-decoration:none; }
.ssr-card h3 a:hover { text-decoration:underline; }
.ssr-card p { margin:0; color:var(--muted); font-size:var(--fs-body); }
.ssr-kind, .ssr-card time, .ssr-meta { color:var(--muted); font-size:var(--fs-caption); }
.ssr-kind a { color:var(--muted); }
.ssr details { border-top:1px solid var(--line); padding:10px 0; max-width:72ch; }
.ssr summary { cursor:pointer; font-weight:600; min-height:24px; }
.ssr details p { color:var(--muted); margin:8px 0 0; }

.ssr-article { max-width:720px; margin:0 auto; }
.ssr-article h1 { font-size:var(--fs-display); }
.ssr-ai { color:var(--muted); font-size:var(--fs-caption); border-left:3px solid var(--accent); padding-left:10px; }
.ssr-cover { width:100%; height:auto; border-radius:var(--r-lg); margin:8px 0 16px; }
.ssr-body { font-size:var(--fs-body-lg); line-height:1.7; overflow-wrap:anywhere; }
.ssr-body img { max-width:100%; height:auto; }
.ssr-body .md-table { overflow-x:auto; }
.ssr-body table { border-collapse:collapse; }
.ssr-body th, .ssr-body td { border:1px solid var(--line); padding:6px 10px; text-align:left; }

@media (max-width: 640px) {
  .ssr h1 { font-size:var(--fs-h1); }
}

/* Ô dẫn đầu vẽ sẵn: tên bài là <h2> (trang chủ chỉ có MỘT <h1>, là tên bản tin, nằm trong #ssr), nhưng phải
   trông y hệt <h1> mà JS vẽ (newtab.css .lead-body h1), không thì lúc JS thay ô sẽ nhảy cỡ chữ. */
a.lead-card { text-decoration:none; }
.lead-body .lead-title { margin:0; font-family:var(--serif); font-size:clamp(var(--fs-h1), 2.1vw, var(--fs-display));
  line-height:1.24; letter-spacing:-.02em; }
/* #ssr ở trang chủ nằm SAU lưới: người đọc thấy ô dẫn đầu trước, phần chữ cho bot nằm dưới. */
.ssr:not(.ssr-article) { margin-top:8px; }

.ssr-share { color:var(--muted); font-size:var(--fs-caption); }
.ssr-share a { display:inline-block; min-height:24px; line-height:24px; }