/* Style CHUNG cho mọi trang SEO tĩnh — 1 bản copy duy nhất, xem chú thích
   đầu seo-articles/article.js. Tái dùng biến màu/font của theme.css (đã
   link trước file này ở mọi trang), chỉ thêm phần riêng của bài viết. Khối
   "dây liên kết cụm từ" (.card-lines/.phrase-segment/.segment-link) khớp Y
   HỆT theme.css thật (.phrase-segment-0..5/.segment-link-0..5 dùng cùng 6
   màu seal/azure/jade/gold/plum/clay) — xem bản demo đã chốt với Stakeholder. */
.sa-shell{ max-width:720px; margin:0 auto; padding:24px 16px 60px; }
/* Góp ý thật: "sao header của phần này không trùng với phần còn lại?" —
   trang SEO tĩnh KHÔNG qua Vite nên không dùng được thẳng
   src/shared/site-header.js (cả chuỗi phụ thuộc Supabase/auth của nó cũng
   không phục vụ gì 1 trang tĩnh chỉ-đọc) — thay vào đó CHỈ mô phỏng lại
   đúng NHẬN DIỆN thị giác của .site-header thật (cùng logo ảnh, cùng tông
   nền giấy mờ, cùng chiều cao/viền) để không bị lạc thương hiệu khi khách
   bấm từ Google vào, mà không kéo theo toàn bộ logic nav/đăng nhập động.
   Để IN-FLOW (không position:fixed như bản thật) — đơn giản hơn, không
   phải tính lại padding-top cho nội dung bên dưới. */
.sa-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:44px; padding:0 16px; margin:-24px -16px 24px;
  background:rgba(243,239,230,0.94); border-bottom:1px solid #DCD5C4;
  font-family:'IBM Plex Sans', sans-serif;
}
.sa-brand{ display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.sa-brand img{ display:block; height:28px; width:auto; }
/* Góp ý thật: "t muốn có dấu ấn riêng của web... cần lồng ghép để đẹp và
   không rối" — đã thử nhánh đào góc header (đè lên logo, bỏ) và dải sóng
   cuối bài (xem lại vẫn thấy không hợp, "bỏ luôn cái ảnh này đi") — trang
   SEO tĩnh tạm KHÔNG có motif trang trí nào, giữ đúng style gốc. Ảnh đã
   tối ưu (public/images/decorative/) vẫn giữ lại, dùng được cho chỗ khác
   nếu Stakeholder muốn thử lại ở vị trí khác sau này. */
.sa-header-right{ display:flex; align-items:center; gap:10px; }
.sa-type{ font-size:0.8rem; color:var(--ink-soft); background:var(--gold-soft); padding:4px 10px; border-radius:20px; }
.sa-login-link{ font-size:0.82rem; color:var(--azure); text-decoration:none; font-weight:500; white-space:nowrap; }
.sa-login-link:hover{ text-decoration:underline; }

article h1{ font-family:'Noto Serif SC', serif; font-size:1.7rem; line-height:1.3; margin:0 0 10px; color:var(--ink); }

.sa-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.sa-tag{ font-size:0.76rem; color:var(--ink-soft); background:var(--paper-deep); padding:3px 10px; border-radius:20px; }

.sa-intro{ font-size:1.02rem; line-height:1.7; color:var(--ink); margin:0 0 24px; }

/* ---------- Dây liên kết cụm từ (cổng từ src/shared/segment-links.js) ---------- */
.sa-content{ display:flex; flex-direction:column; gap:18px; margin-bottom:28px; }
.sa-card{ position:relative; padding:16px 18px 16px 22px; background:var(--card-bg); border:1px solid #E4DDCB; border-radius:12px; }
.sa-card::before{
  content:attr(data-n); position:absolute; left:-11px; top:16px; width:22px; height:22px;
  border-radius:50%; background:var(--paper, #FBF8F2); border:1px solid #E4DDCB; color:var(--ink-soft);
  font-family:'IBM Plex Sans'; font-size:0.68rem; display:flex; align-items:center; justify-content:center; z-index:1;
}
.card-lines{ position:relative; display:flex; flex-direction:column; gap:10px; }
.card-line{ display:flex; flex-wrap:wrap; align-items:baseline; gap:7px; }
.card-line-chinese{ font-family:'Noto Serif SC', serif; font-size:1.25rem; letter-spacing:0.01em; }
.card-line-pinyin{ font-family:'IBM Plex Sans'; font-size:0.9rem; color:var(--azure); }
.card-line-vietnamese{ font-size:0.98rem; color:var(--ink-soft); }
.phrase-segment{ border-radius:4px; padding:1px 4px; font-weight:400; }
.card-line-chinese .phrase-segment{ font-weight:600; }
.phrase-segment-0{ background:var(--seal-soft); color:var(--seal); }
.phrase-segment-1{ background:var(--azure-soft); color:var(--azure); }
.phrase-segment-2{ background:var(--jade-soft); color:var(--jade); }
.phrase-segment-3{ background:var(--gold-soft); color:var(--gold); }
.phrase-segment-4{ background:var(--plum-soft); color:var(--plum); }
.phrase-segment-5{ background:var(--clay-soft); color:var(--clay); }
.phrase-segment[data-group]{ transition:box-shadow .12s; cursor:default; }
.phrase-segment--hover-match{ box-shadow:0 0 0 2px currentColor; }
svg.segment-links{ position:absolute; top:0; left:0; pointer-events:none; overflow:visible; }
.segment-link{ fill:none; stroke-width:1.5; opacity:0.45; }
.segment-link.is-hover-active{ opacity:1; stroke-width:2; }
.segment-link-0{ stroke:var(--seal); }
.segment-link-1{ stroke:var(--azure); }
.segment-link-2{ stroke:var(--jade); }
.segment-link-3{ stroke:var(--gold); }
.segment-link-4{ stroke:var(--plum); }
.segment-link-5{ stroke:var(--clay); }

.sa-vocab{ margin:28px 0; }
.sa-vocab h2{ font-family:'Noto Serif SC', serif; font-size:1.2rem; color:var(--ink); margin:0 0 12px; }
.sa-vocab-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; }
.sa-vocab-list li{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; background:var(--paper-deep); border-radius:8px; }
.sa-vocab-top{ display:flex; align-items:baseline; justify-content:space-between; gap:6px; }
.sa-vocab-zh{ font-family:'Noto Serif SC', serif; font-size:1.05rem; color:var(--ink); }
.sa-vocab-lv{ font-size:0.7rem; color:var(--seal); font-weight:600; white-space:nowrap; }
.sa-vocab-py{ font-size:0.82rem; color:var(--azure); }
.sa-vocab-vi{ font-size:0.86rem; color:var(--ink-soft); }

/* Góp ý thật: "ngữ pháp thì ngoài từ vựng sẽ có note ngữ pháp" — CHỈ bài
   Ngữ pháp mới có mục này (grammarPoints null ở Giao tiếp/Đọc hiểu, xem
   scripts/build-seo-articles.mjs). */
.sa-grammar-notes{ margin:28px 0; }
.sa-grammar-notes h2{ font-family:'Noto Serif SC', serif; font-size:1.2rem; color:var(--ink); margin:0 0 12px; }
.sa-grammar-note{ padding:14px 16px; background:var(--jade-soft); border-radius:10px; margin-bottom:10px; }
.sa-grammar-note h3{ font-family:'Noto Serif SC', serif; font-size:1rem; color:var(--jade); margin:0 0 6px; }
.sa-grammar-note p{ font-size:0.94rem; line-height:1.6; color:var(--ink); margin:0; }

.sa-cta{
  display:inline-block; margin-top:10px; padding:12px 24px; border-radius:30px;
  background:var(--seal); color:#fff; text-decoration:none; font-weight:600; font-size:0.96rem;
}
.sa-cta:hover{ opacity:0.9; }

.sa-edit-btn{
  display:inline-block; margin-top:20px; padding:8px 16px; border-radius:20px;
  border:1.5px dashed var(--gold); color:var(--gold); text-decoration:none; font-size:0.85rem;
}