/* Digifund - Blog / Kiến thức (SEO content pages) */
:root { --accent:#2563eb; --ink:#15233f; --muted:#5b6678; --line:#e7edf6; }
* { box-sizing: border-box; }
body.blog-page { margin:0; font-family:'Titillium Web',-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink); background:#fff; line-height:1.75; -webkit-font-smoothing:antialiased; }
.blog-page a { color:var(--accent); text-decoration:none; }
.blog-page img { max-width:100%; height:auto; }
.bl-container { max-width:1160px; margin:0 auto; padding:0 20px; }

/* Header */
.bl-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line); }
.bl-header__inner { display:flex; align-items:center; justify-content:space-between; height:74px; }
.bl-brand { display:flex; align-items:center; gap:10px; }
.bl-brand img { height:52px; width:auto; display:block; }
.bl-brand__name { font-weight:800; font-size:20px; letter-spacing:.5px; color:var(--ink); }
.bl-nav { display:flex; align-items:center; gap:26px; }
.bl-nav a { color:var(--ink); font-weight:600; font-size:15px; }
.bl-nav a:hover { color:var(--accent); }
.bl-nav__cta { background:var(--accent); color:#fff !important; padding:9px 20px; border-radius:30px; }
@media (max-width:860px){ .bl-nav a:not(.bl-nav__cta){ display:none; } .bl-brand__name{ font-size:17px; } }

/* Breadcrumb */
.bl-crumb { font-size:13.5px; color:var(--muted); padding:18px 0 0; }
.bl-crumb a { color:var(--muted); }
.bl-crumb a:hover { color:var(--accent); }

/* Article hero */
.bl-hero { padding:26px 0 30px; border-bottom:1px solid var(--line); }
.bl-hero__tag { display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,#fff); padding:5px 14px; border-radius:30px; margin-bottom:16px; }
.bl-hero h1 { font-size:clamp(26px,4vw,40px); line-height:1.25; font-weight:800; margin:0 0 14px; letter-spacing:-.2px; }
.bl-hero__lead { font-size:18px; color:var(--muted); max-width:820px; margin:0; }
.bl-hero__meta { margin-top:18px; font-size:13.5px; color:var(--muted); display:flex; gap:16px; flex-wrap:wrap; }

/* Article body */
.bl-article { padding:36px 0 20px; }
.bl-article__wrap { max-width:820px; }
.bl-article h2 { font-size:clamp(21px,2.6vw,28px); font-weight:800; margin:40px 0 14px; letter-spacing:-.2px; scroll-margin-top:90px; }
.bl-article h3 { font-size:19px; font-weight:700; margin:26px 0 10px; }
.bl-article p { margin:0 0 16px; font-size:16.5px; }
.bl-article ul, .bl-article ol { margin:0 0 18px; padding-left:22px; }
.bl-article li { margin-bottom:9px; font-size:16.5px; }
.bl-article strong { color:var(--ink); }
.bl-article figure { margin:24px 0; }
.bl-article figcaption { font-size:13.5px; color:var(--muted); text-align:center; margin-top:8px; }
.bl-article img { border-radius:14px; }

/* Callout / TOC */
.bl-toc { background:#f4f8ff; border:1px solid var(--line); border-radius:14px; padding:20px 24px; margin:0 0 30px; }
.bl-toc h4 { margin:0 0 10px; font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--ink); }
.bl-toc ol { margin:0; padding-left:20px; }
.bl-toc li { margin-bottom:6px; }
.bl-note { background:#eef4ff; border-left:4px solid var(--accent); padding:16px 20px; border-radius:0 12px 12px 0; margin:24px 0; font-size:16px; }

/* Table */
.bl-table-wrap { overflow-x:auto; margin:22px 0; }
.bl-table { width:100%; border-collapse:collapse; min-width:520px; font-size:15.5px; }
.bl-table th, .bl-table td { border:1px solid var(--line); padding:11px 14px; text-align:left; }
.bl-table th { background:#f4f8ff; font-weight:700; color:var(--ink); }
.bl-table tr:nth-child(even) td { background:#fafcff; }

/* CTA box */
.bl-cta { margin:44px 0 10px; background:linear-gradient(120deg,#0b1730,#12305f); color:#fff; border-radius:20px; padding:38px 34px; }
.bl-cta h3 { color:#fff; font-size:24px; font-weight:800; margin:0 0 10px; }
.bl-cta p { color:rgba(255,255,255,0.82); margin:0 0 20px; font-size:16px; }
.bl-cta .bl-btn { background:#fff; color:#0b1730 !important; }
.bl-btn { display:inline-flex; align-items:center; gap:9px; background:var(--accent); color:#fff !important; font-weight:700; padding:12px 26px; border-radius:30px; font-size:15px; transition:transform .25s; }
.bl-btn:hover { transform:translateY(-2px); }
.bl-btn--ghost { background:transparent; border:1px solid rgba(255,255,255,0.5); color:#fff !important; margin-left:10px; }

/* Related / grid */
.bl-related { padding:30px 0 60px; border-top:1px solid var(--line); margin-top:40px; }
.bl-related h2 { font-size:24px; font-weight:800; margin:0 0 24px; }
.bl-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:820px){ .bl-grid{ grid-template-columns:1fr; } }
.bl-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; transition:transform .3s, box-shadow .3s; }
.bl-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(20,40,80,0.12); }
.bl-card__media { aspect-ratio:16/9; background:linear-gradient(120deg,#12305f,#2563eb); position:relative; overflow:hidden; }
.bl-card__media img { width:100%; height:100%; object-fit:cover; }
.bl-card__media i { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:44px; color:rgba(255,255,255,0.85); }
.bl-card__body { padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.bl-card__tag { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--accent); margin-bottom:9px; }
.bl-card__title { font-size:18px; font-weight:700; line-height:1.4; color:var(--ink); margin:0 0 10px; }
.bl-card__excerpt { font-size:14.5px; color:var(--muted); margin:0 0 16px; flex:1; }
.bl-card__more { font-weight:700; font-size:14px; color:var(--accent); }

/* Hub hero */
.bl-hub-hero { background:linear-gradient(120deg,#0b1730,#12305f); color:#fff; padding:64px 0 60px; }
.bl-hub-hero h1 { color:#fff; font-size:clamp(30px,5vw,46px); font-weight:800; margin:0 0 16px; }
.bl-hub-hero p { color:rgba(255,255,255,0.82); font-size:18px; max-width:760px; margin:0; }
.bl-hub-hero .bl-hero__tag { background:rgba(255,255,255,0.12); color:#fff; }

/* Footer */
.bl-footer { background:#0b1017; color:#c9d1d9; padding:48px 0 26px; margin-top:20px; }
.bl-footer__top { display:flex; flex-wrap:wrap; gap:40px; justify-content:space-between; }
.bl-footer__brand { max-width:340px; }
.bl-footer__brand img { height:56px; margin-bottom:14px; }
.bl-footer__brand p { color:#8b949e; font-size:15px; }
.bl-footer__col h4 { color:#fff; font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; margin:0 0 16px; }
.bl-footer__col ul { list-style:none; margin:0; padding:0; }
.bl-footer__col li { margin-bottom:10px; }
.bl-footer__col a { color:#8b949e; font-size:15px; }
.bl-footer__col a:hover { color:#fff; }
.bl-footer__bottom { border-top:1px solid #21262d; margin-top:36px; padding-top:20px; font-size:13.5px; color:#6e7681; }
