/* Font DỰ PHÒNG KHỚP SỐ ĐO (10/10/2026). Lúc font web (Noto Serif/Inter) chưa tải xong,
   trình duyệt vẽ tạm bằng Times New Roman/Arial — mà Noto Serif rộng hơn Times ~16%, Inter
   rộng hơn Arial ~5% ⇒ font web về là tiêu đề + đoạn văn xuống dòng khác, cả trang dịch
   chuyển (CLS). size-adjust/ascent/descent dưới đây đo bằng fontTools trên chính văn bản
   tiếng Việt của site, để bản tạm chiếm ĐÚNG chỗ của bản thật. Android có sẵn Noto Serif
   nên không cần; "Inter FB Android" khớp Inter với Roboto. */
@font-face { font-family: "Noto Serif FB"; font-weight: 400 500; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 116.33%; ascent-override: 91.89%; descent-override: 25.19%; line-gap-override: 0%; }
@font-face { font-family: "Noto Serif FB"; font-weight: 600 900; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"); size-adjust: 116.03%; ascent-override: 92.13%; descent-override: 25.25%; line-gap-override: 0%; }
@font-face { font-family: "Inter FB"; font-weight: 400 500; src: local("Arial"), local("ArialMT"); size-adjust: 105.18%; ascent-override: 92.11%; descent-override: 22.93%; line-gap-override: 0%; }
@font-face { font-family: "Inter FB"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 99.89%; ascent-override: 96.98%; descent-override: 24.15%; line-gap-override: 0%; }
@font-face { font-family: "Inter FB Android"; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 107.35%; ascent-override: 90.24%; descent-override: 22.47%; line-gap-override: 0%; }
/* ─── Tích Đức Online — Landing Pages CSS ─── */
:root {
  --bg-from: #1a1410;
  --bg-to: #0d0907;
  --text: #e8d8b8;
  --text-dim: #a89580;
  --accent: #d4a857;
  --accent-bright: #f0d28e;
  --accent-dim: #a87b54;
  --card: rgba(40, 28, 18, 0.6);
  --border: rgba(212, 168, 87, 0.18);
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  background: linear-gradient(180deg, var(--bg-from) 0%, var(--bg-to) 100%);
  color: var(--text);
  font-family: 'Inter', "Inter FB", "Inter FB Android", system-ui, sans-serif;
  font-size: 16px; line-height: 1.7;
  min-height: 100vh;
}
.blog-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  background: rgba(20, 14, 8, 0.85);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 100;
}
.blog-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--accent-bright);
  font-family: 'Noto Serif', "Noto Serif FB", serif; font-weight: 700; font-size: 19px;
  white-space: nowrap;
}
.brand-mark { font-size: 22px; }
.blog-nav { display: flex; align-items: center; gap: 18px; }
.blog-nav a {
  text-decoration: none; color: var(--text-dim);
  font-weight: 500; font-size: 14px; transition: color 0.2s;
  white-space: nowrap;
}
.blog-nav a:hover, .blog-nav a.active { color: var(--accent-bright); }
.blog-nav a.cta {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  color: #1a1410; padding: 8px 16px; border-radius: 999px; font-weight: 600;
}
.landing-hero {
  text-align: center; padding: 64px 24px 32px;
  max-width: 800px; margin: 0 auto;
}
.landing-hero h1 {
  font-family: 'Noto Serif', "Noto Serif FB", serif;
  font-size: 44px; line-height: 1.15;
  color: var(--accent-bright); margin: 0 0 18px;
}
.landing-hero .lede {
  font-size: 19px; color: var(--text); margin-bottom: 32px;
}
.blog-article {
  max-width: 760px; margin: 0 auto;
  padding: 0 24px 60px;
}
.blog-article section { margin-bottom: 36px; }
.blog-article h2 {
  font-family: 'Noto Serif', "Noto Serif FB", serif;
  font-size: 26px; color: var(--accent-bright);
  margin: 32px 0 14px; font-weight: 700; line-height: 1.3;
}
.blog-article h3 {
  font-family: 'Noto Serif', "Noto Serif FB", serif;
  font-size: 20px; color: var(--accent);
  margin: 26px 0 10px; font-weight: 600;
}
.blog-article p { margin: 12px 0; }
.blog-article ul, .blog-article ol { margin: 12px 0 14px 22px; padding: 0; }
.blog-article li { margin: 6px 0; }
.blog-article strong { color: var(--accent-bright); font-weight: 600; }
.blog-article em { color: var(--text); font-style: italic; }
.blog-article a {
  color: var(--accent-bright); text-decoration: underline;
  text-decoration-color: rgba(240, 210, 142, 0.4);
  text-underline-offset: 3px;
}
.blog-article a:hover { text-decoration-color: var(--accent-bright); }
.rank-table-wrap { overflow-x: auto; margin: 16px 0; }
.rank-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--card); border-radius: 10px; overflow: hidden;
}
.rank-table th, .rank-table td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.rank-table th {
  background: rgba(212, 168, 87, 0.15);
  color: var(--accent-bright); font-weight: 600;
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px;
}
.rank-table tr:last-child td { border-bottom: none; }
.rank-table tr:nth-child(even) td { background: rgba(0, 0, 0, 0.15); }
.cta-block {
  background: linear-gradient(135deg, rgba(212, 168, 87, 0.15), rgba(168, 123, 84, 0.1));
  border: 1px solid var(--border);
  border-radius: 16px; padding: 28px 24px;
  text-align: center; margin: 48px 0 32px;
}
.cta-block h2 { margin-top: 0; font-size: 22px; color: var(--accent-bright); }
.cta-block p { color: var(--text); margin-bottom: 20px; }
.cta-big {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dim) 100%);
  color: #1a1410 !important;
  padding: 14px 32px; border-radius: 999px;
  font-size: 16px; font-weight: 700;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(212, 168, 87, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.cta-big:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(212, 168, 87, 0.45);
}
.cta-foot {
  font-size: 13px; color: var(--text-dim) !important;
  margin-top: 14px !important; margin-bottom: 0 !important;
}
.article-foot {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--border);
}
.article-foot h3 { font-size: 17px; margin-top: 0; }
.related { list-style: none; margin-left: 0 !important; padding: 0; }
.related li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(212, 168, 87, 0.08);
}
.related li:last-child { border-bottom: none; }
.related a { display: block; color: var(--accent-bright); font-weight: 500; }
.blog-footer {
  text-align: center; padding: 32px 24px;
  border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: 13px;
}
.blog-footer a { color: var(--accent); text-decoration: none; }
@media (max-width: 640px) {
  /* Logo + nút đều nowrap (ở trên) để font web tải xong không bẻ dòng làm thanh cao
     từ 34 lên 56px và đẩy cả trang (CLS ~0,3 ở /tich-duc-online). Thu cỡ cho vừa. */
  .blog-topbar { padding: 12px 16px; gap: 10px; }
  .blog-brand { font-size: 17px; gap: 8px; }
  .brand-mark { font-size: 20px; }
  .blog-nav { gap: 12px; }
  .blog-nav a { font-size: 13px; }
  .blog-nav a.cta { padding: 6px 12px; font-size: 13px; }
  .blog-article { padding: 0 16px 40px; }
  .blog-article h2 { font-size: 22px; }
  .blog-article h3 { font-size: 17px; }
  .landing-hero h1 { font-size: 32px; }
  .landing-hero { padding: 40px 16px 24px; }
}
@media (max-width: 380px) {
  .blog-brand { font-size: 16px; }
  .blog-nav { gap: 10px; }
  .blog-nav a.cta { padding: 6px 10px; }
}