/* wiki.css — bài viết AEO Wiki của astroQ.org (dùng chung: css/common.css)
   Trang wiki là nội dung tĩnh, không nạp JS. Đường dẫn ảnh/asset tính từ wiki/ nên dùng ../ */

:root{
  --bg:#05070f; --bg2:#0a0f22;
  --cyan:#00FFFF; --cyan-deep:#38bdf8;
  --purple:#8A2BE2; --purple-soft:#c084fc;
  --gold:#FFD700; --green:#4ade80; --good:#63e6a8;
  --brd:rgba(120,160,255,.18);
  --glass:rgba(15,23,42,.55);
  --font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Share Tech Mono", ui-monospace, "Consolas", monospace;
  --jelly:cubic-bezier(.34,1.56,.64,1);
}

html,body{min-height:100%;}
body{min-height:100vh;overflow-x:hidden;
  background:radial-gradient(ellipse at 50% -10%, #16103a 0%, var(--bg2) 46%, var(--bg) 100%);}
a{text-decoration:none;}
:focus-visible{outline:2px solid var(--cyan);}

.starfield{opacity:.7;
  background-image:
    radial-gradient(1.3px 1.3px at 20% 30%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 80% 20%, #dcecff, transparent),
    radial-gradient(1px 1px at 60% 70%, #cfe0ff, transparent),
    radial-gradient(1.1px 1.1px at 40% 85%, #fff, transparent);
  animation:drift 200s linear infinite, tw 6s ease-in-out infinite;}
.nebula{filter:blur(14px);opacity:.6;
  background:
    radial-gradient(closest-side at 14% 16%, rgba(138,43,226,.26), transparent 70%),
    radial-gradient(closest-side at 88% 24%, rgba(0,255,255,.13), transparent 70%);}

.wrap{position:relative;z-index:10;max-width:820px;margin:0 auto;
  padding:0 clamp(16px,4vw,28px) 64px;}

/* ============================ Topbar ============================ */
.top{display:flex;align-items:center;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding:18px 0 4px;}
.brand{display:inline-flex;align-items:center;gap:10px;}
.brand-mark{width:30px;height:30px;border-radius:10px;flex:none;
  background:radial-gradient(circle at 34% 28%, #fff7d6, var(--gold) 42%, #ff9d3d 92%);
  box-shadow:0 0 20px rgba(255,215,0,.5);}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:17px;}
.brand-name .dot{color:var(--cyan);}
.top-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.top-link{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-soft);
  padding:7px 13px;border-radius:999px;background:rgba(56,189,248,.08);
  border:1px solid rgba(0,255,255,.3);transition:background .18s,color .18s;}
.top-link:hover{background:rgba(0,255,255,.16);color:var(--ink);}

/* ============================ Breadcrumb ============================ */
.crumb{font-size:12.5px;color:var(--ink-faint);margin:22px 0 14px;}
.crumb a{color:var(--ink-soft);}
.crumb a:hover{color:var(--cyan);}
.crumb .sep{opacity:.5;margin:0 6px;}

/* ============================ Bài viết ============================ */
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 10px;}
article h1{font-family:var(--font-display);font-weight:700;margin:0 0 20px;
  font-size:clamp(26px,4.4vw,40px);line-height:1.16;letter-spacing:-.015em;color:var(--ink);}

/* Khối Trả Lời Trực Tiếp — phần AI Search trích dẫn */
.answer{position:relative;margin:0 0 34px;padding:20px 22px;border-radius:18px;
  background:linear-gradient(180deg, rgba(138,43,226,.15), rgba(10,15,34,.6));
  border:1px solid rgba(138,43,226,.42);
  box-shadow:inset 0 0 40px -28px var(--cyan);}
.answer .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.18em;color:var(--cyan);margin-bottom:10px;}
.answer .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 9px var(--cyan);}
.answer p{margin:0;font-size:clamp(15px,1.8vw,17px);line-height:1.72;color:var(--ink);}

article h2{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,2.6vw,25px);
  line-height:1.28;margin:38px 0 12px;color:var(--ink);}
article h3{font-family:var(--font-display);font-weight:600;font-size:16.5px;
  margin:24px 0 8px;color:var(--cyan);}
article p{margin:0 0 14px;font-size:15.5px;line-height:1.78;color:var(--ink-soft);}
article strong,article b{color:var(--ink);font-weight:600;}
article a{color:var(--cyan);border-bottom:1px solid rgba(0,255,255,.3);}
article a:hover{border-bottom-color:var(--cyan);}

article ul,article ol{margin:0 0 16px;padding-left:22px;}
article li{font-size:15.5px;line-height:1.72;color:var(--ink-soft);margin-bottom:8px;}
article li::marker{color:var(--purple-soft);}

/* Bảng so sánh */
.tbl{overflow-x:auto;margin:0 0 18px;border-radius:14px;border:1px solid var(--brd);
  background:rgba(10,15,34,.5);}
table{width:100%;border-collapse:collapse;min-width:460px;}
caption{caption-side:bottom;padding:10px 14px;font-size:12.5px;color:var(--ink-faint);text-align:left;}
th,td{padding:11px 14px;text-align:left;font-size:14.5px;line-height:1.6;
  border-bottom:1px solid rgba(120,160,255,.14);}
th{font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--cyan);
  background:rgba(0,255,255,.06);letter-spacing:.02em;}
td{color:var(--ink-soft);}
tr:last-child td{border-bottom:none;}

/* Góc Khám Phá astroQ — khối linh vật */
.corner{margin:34px 0;padding:20px 22px;border-radius:18px;
  background:rgba(15,23,42,.6);border:1px solid rgba(255,215,0,.3);
  box-shadow:0 20px 50px -34px #000;}
.corner h2{margin:0 0 14px;font-size:19px;color:var(--gold);}
.corner .who{display:flex;align-items:flex-start;gap:14px;margin-bottom:14px;}
.corner .who:last-child{margin-bottom:0;}
.corner img{width:56px;height:auto;flex:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));}
.corner .who .txt{min-width:0;}
.corner .who b{display:block;font-family:var(--font-display);font-size:14.5px;margin-bottom:3px;}
.corner .comet b{color:var(--gold);}
.corner .byte b{color:var(--cyan);}
.corner .who p{margin:0;font-size:14px;line-height:1.65;}

/* Nguồn tham chiếu */
.refs{margin:34px 0 0;padding:18px 20px;border-radius:16px;
  background:rgba(10,15,34,.55);border:1px solid var(--brd);}
.refs h2{margin:0 0 10px;font-size:16px;color:var(--ink);}
.refs ul{margin:0;padding-left:20px;}
.refs li{font-size:13.8px;margin-bottom:7px;}
.refs .note{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-faint);}

/* Bài liên quan */
.related{margin:34px 0 0;}
.related h2{font-size:17px;margin:0 0 12px;}
.related ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.related a{display:block;padding:12px 14px;border-radius:12px;font-size:14.5px;
  color:var(--ink-soft);background:rgba(15,23,42,.5);border:1px solid var(--brd);
  border-bottom:1px solid var(--brd);transition:border-color .18s,color .18s,transform .14s;}
.related a:hover{color:var(--ink);border-color:rgba(0,255,255,.42);transform:translateX(3px);}

/* CTA về trang chủ */
.cta{margin:34px 0 0;padding:22px;border-radius:18px;text-align:center;
  background:linear-gradient(180deg, rgba(138,43,226,.16), rgba(10,15,34,.7));
  border:1px solid rgba(138,43,226,.4);}
.cta p{margin:0 0 14px;font-size:15px;}
.cta a{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-bottom:none;
  font-family:var(--font-display);font-weight:700;font-size:14.5px;color:#06070f;
  padding:13px 24px;border-radius:14px;
  background:linear-gradient(120deg, var(--cyan), var(--purple-soft) 58%, var(--purple));
  box-shadow:0 16px 34px -18px rgba(138,43,226,.95);
  transition:transform .14s var(--jelly),filter .2s;}
.cta a:hover{transform:translateY(-2px);filter:brightness(1.06);}

/* ============================ Trang mục lục wiki ============================ */
.hub-lead{font-size:16px;line-height:1.75;color:var(--ink-soft);margin:0 0 28px;max-width:62ch;}
.hub-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.hub-list a{display:block;padding:16px 18px;border-radius:16px;border-bottom:none;
  background:rgba(15,23,42,.55);border:1px solid var(--brd);
  transition:border-color .2s,transform .18s,box-shadow .2s;}
.hub-list a:hover{border-color:rgba(0,255,255,.4);transform:translateY(-2px);
  box-shadow:0 18px 40px -28px var(--cyan);}
.hub-list .n{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--purple-soft);}
.hub-list h2{font-family:var(--font-display);font-size:16.5px;margin:5px 0 5px;color:var(--ink);}
.hub-list p{margin:0;font-size:13.8px;line-height:1.6;color:var(--ink-faint);}

.foot{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  padding:40px 0 6px;font-size:12.4px;color:var(--ink-faint);}
.foot a{color:var(--ink-soft);}
.foot .sep{opacity:.5;}

@media (max-width:560px){
  .corner img{width:44px;}
  th,td{padding:9px 11px;font-size:13.5px;}
}