:root{
  --bg:#0b0d12; --fg:#e9eef5; --muted:#9aa5b1; --card:#0f131a;
  --accent:#3b82f6; --border:#1f2530; --shadow:0 10px 30px rgba(0,0,0,.25);
  color-scheme: dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.65 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto;color:var(--fg);background:var(--bg)}
img,video{max-width:100%;height:auto}

.container{max-width:920px;margin:0 auto;padding:18px 16px}
.breadcrumbs{font-size:14px;color:var(--muted);margin:4px 0 12px}
.breadcrumbs a{color:var(--fg);text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.15)}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px}

.head .title{font-size:clamp(26px,3.8vw,36px);line-height:1.25;margin:4px 0 8px}
.head .meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;color:var(--muted);font-size:14px}
.author{display:flex;align-items:center;gap:10px;margin-left:auto}
.author__avatar{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);object-fit:cover}

.cover{margin:10px 0 14px}
.cover img{width:100%;aspect-ratio:1200/630;object-fit:cover;border-radius:14px;border:1px solid var(--border)}

.video-wrap{position:relative;margin:10px 0;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.video-wrap iframe,.video-wrap video{display:block;width:100%;aspect-ratio:16/9}

.media-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.media-actions.is-sticky{position:sticky;top:10px;z-index:5}
.btn{appearance:none;border:1px solid var(--border);background:#0f131a;color:#fff;padding:8px 12px;border-radius:10px;cursor:pointer}
.btn:hover{background:#151a23}
.btn--done{outline:2px solid var(--accent)}

.stats{display:flex;gap:14px;color:var(--muted);font-size:14px;margin:6px 0 6px}

.content{font-size:18px;line-height:1.8}
.content h2{font-size:clamp(22px,3vw,28px);margin:18px 0 8px}
.content h3{font-size:clamp(18px,2.4vw,22px);margin:14px 0 6px}
.content p{margin:10px 0}
.content blockquote{border-left:3px solid var(--accent);margin:12px 0;padding:8px 12px;color:#cbd5e1;background:rgba(59,130,246,.06);border-radius:10px}
.content pre{overflow:auto;padding:12px;border:1px solid var(--border);border-radius:12px;background:#0c1017;font-size:14px}
.content code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.content img{display:block;margin:14px auto;border-radius:12px;border:1px solid var(--border)}
.content figure{margin:14px 0;text-align:center}
.content figcaption{font-size:13px;color:var(--muted);margin-top:6px}

/* Bảng đẹp, cuộn ngang mobile */
.content table{width:100%;border-collapse:collapse;margin:12px 0;font-size:16px}
.content table :is(th,td){border:1px solid var(--border);padding:10px;vertical-align:top}
.content table th{background:#0f131a;font-weight:600}
.content .table-wrap{overflow:auto;border:1px solid var(--border);border-radius:12px}
.content .table-wrap table{margin:0;border:0}

/* Tag list */
.taglist{margin:10px 0 0;display:flex;gap:8px;flex-wrap:wrap}
.taglist a{font-size:14px;color:#cfe1ff;background:#0e1420;border:1px solid var(--border);padding:6px 10px;border-radius:999px;text-decoration:none}

/* Debug */
.debug-pre{white-space:pre-wrap;background:#0e1219;border:1px dashed var(--border);padding:10px;border-radius:10px;margin-top:12px}

/* Light mode (opt) */
@media (prefers-color-scheme: light){
  :root{ --bg:#f7fafc; --fg:#0b1220; --muted:#4b5563; --card:#ffffff; --border:#e5e7eb; --shadow:0 10px 24px rgba(0,0,0,.06); color-scheme: light; }
  .btn{background:#fff;color:#111}
  .content blockquote{color:#334155;background:#eff6ff}
}
@media (max-width:640px){
  .author{margin-left:0}
  .content{font-size:17px}
}