/* Học Viện AI FOR CEO — blog stylesheet
   Dùng chung cho trang danh sách blog và toàn bộ bài viết. */

:root{
  --ink-deep:#0b0e16;
  --ink-deep-2:#111624;
  --ink-deep-3:#06080f;
  --paper:#f2f3f6;
  --paper-2:#e9ebf0;
  --paper-line:rgba(18,22,34,.12);
  --cream:#f8f9fb;
  --brown-ink:#1a1e28;
  --brown-dim:#5b6070;
  --ivory:#f0f2f7;
  --ivory-dim:#a8adbc;
  --gold:#c9a15c;
  --gold-bright:#e2bd7c;
  --gold-deep:#8f6d33;
  --tech-blue:#5b86d8;
  --shadow:0 30px 80px -30px rgba(0,0,0,.55);
  --ease:cubic-bezier(.19,1,.22,1);
  --display:'Space Grotesk','Segoe UI',sans-serif;
  --body:'Jost',-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono','Courier New',monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0; background:var(--paper); color:var(--brown-ink);
  font-family:var(--body); font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit;}

.wrap{ max-width:1160px; margin:0 auto; padding:0 clamp(20px,5vw,48px); }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 clamp(20px,5vw,48px); }

h1,h2,h3,h4{ font-family:var(--display); font-weight:700; margin:0; letter-spacing:-.02em; color:#0e1119; }
em{ font-style:normal; }

.eyebrow{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  display:flex; align-items:center; gap:.6em; color:var(--gold-deep);
}
.eyebrow .spark{ color:var(--gold); font-size:.9em; }

/* ===== Header ===== */
.skip-link{ position:absolute; left:-999px; top:0; background:var(--gold); color:var(--ink-deep); padding:12px 18px; z-index:999; font-family:var(--mono); font-size:.8rem; }
.skip-link:focus{ left:12px; top:12px; }

header.blog-header{
  position:sticky; top:0; z-index:900; padding:16px 0;
  background:rgba(11,14,22,.93); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(226,189,124,.14);
}
header.blog-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; flex-direction:column; line-height:1.1; text-decoration:none; }
.brand .name{ font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--ivory); letter-spacing:.02em; }
.brand .name b{ color:var(--gold-bright); }
.brand .sub{ font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; color:var(--ivory-dim); text-transform:uppercase; margin-top:2px; }
.blog-nav{ display:flex; align-items:center; gap:24px; }
.blog-nav a{ text-decoration:none; color:var(--ivory-dim); font-size:.9rem; }
.blog-nav a:hover{ color:var(--gold-bright); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--body); font-weight:700; font-size:.9rem;
  padding:12px 24px; border-radius:2px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-gold{ background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:var(--ink-deep-3); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(201,161,92,.55); }
.btn-ghost-light{ border-color:rgba(18,22,34,.3); color:var(--brown-ink); font-weight:600; }
.btn-ghost-light:hover{ border-color:var(--gold-deep); background:rgba(201,161,92,.08); }

a:focus-visible, button:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:3px; }
@media (pointer:coarse){ .btn{ min-height:44px; } }

/* ===== Blog index hero ===== */
.blog-hero{
  background:
    radial-gradient(1000px 600px at 80% -20%, rgba(201,161,92,.16), transparent 60%),
    linear-gradient(180deg,var(--ink-deep-3),var(--ink-deep));
  color:var(--ivory); padding:clamp(64px,9vw,110px) 0;
}
.blog-hero h1{ color:#fff; font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.12; margin-top:14px; max-width:20ch; }
.blog-hero h1 .accent{
  background:linear-gradient(100deg,#f4e2b8 0%,var(--gold-bright) 30%,#cfa75e 62%,#efd49b 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.blog-hero p{ color:var(--ivory-dim); margin-top:18px; max-width:60ch; font-size:1.05rem; }
.blog-hero .eyebrow{ color:var(--gold-bright); }

/* ===== Post grid ===== */
.post-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  padding:clamp(50px,7vw,80px) 0;
}
.post-card{
  background:var(--cream); border:1px solid var(--paper-line); border-radius:2px;
  overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.post-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.post-card .thumb{ aspect-ratio:16/10; overflow:hidden; background:var(--ink-deep-2); }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.post-card:hover .thumb img{ transform:scale(1.04); }
.post-card .body{ padding:22px 20px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card .cat{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.post-card h2{ font-size:1.08rem; line-height:1.35; }
.post-card p{ margin:0; font-size:.9rem; color:var(--brown-dim); flex:1; }
.post-card .more{ font-weight:700; font-size:.86rem; color:var(--gold-deep); }
@media (max-width:980px){ .post-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){ .post-grid{ grid-template-columns:1fr; } }

/* ===== Article ===== */
.article-hero{
  background:
    radial-gradient(900px 500px at 78% -20%, rgba(201,161,92,.15), transparent 60%),
    linear-gradient(180deg,var(--ink-deep-3),var(--ink-deep));
  color:var(--ivory); padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,64px);
}
.article-hero .eyebrow{ color:var(--gold-bright); }
.article-hero h1{ color:#fff; font-size:clamp(1.9rem,4.2vw,2.9rem); line-height:1.15; margin-top:16px; }
.article-meta{ margin-top:20px; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ivory-dim); display:flex; flex-wrap:wrap; gap:8px 20px; }

.cover{ margin:0; }
.cover img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

.article-body{ padding:clamp(44px,6vw,72px) 0 clamp(56px,8vw,90px); }
.article-body p{ margin:0 0 22px; font-size:1.06rem; color:#262b36; }
.article-body h2{ font-size:clamp(1.35rem,2.6vw,1.75rem); margin:44px 0 16px; line-height:1.25; }
.article-body h3{ font-size:1.12rem; margin:32px 0 12px; }
.article-body ul, .article-body ol{ margin:0 0 22px; padding-left:22px; }
.article-body li{ margin-bottom:10px; font-size:1.02rem; color:#262b36; }
.article-body strong{ color:#0e1119; }
.article-body blockquote{
  margin:30px 0; padding:22px 26px; border-left:3px solid var(--gold);
  background:var(--paper-2); font-family:var(--display); font-weight:500; font-size:1.1rem; color:#0e1119;
}
.article-body a{ color:var(--gold-deep); text-decoration:underline; text-underline-offset:3px; }

.key-box{
  margin:34px 0; padding:26px 28px; border:1px solid var(--paper-line);
  background:var(--cream); border-radius:2px;
}
.key-box .kb-title{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.key-box ul{ margin:14px 0 0; }

/* ===== Bộ lọc danh mục (trang index) ===== */
.ftabs{ display:flex; flex-wrap:wrap; gap:10px; padding-top:clamp(36px,5vw,56px); }
.ftab{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 16px; border-radius:999px; cursor:pointer; background:transparent;
  border:1px solid rgba(18,22,34,.25); color:var(--brown-ink);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.ftab span{ color:var(--brown-dim); margin-left:4px; }
.ftab:hover{ border-color:var(--gold-deep); }
.ftab.is-on{ background:var(--ink-deep); border-color:var(--ink-deep); color:var(--gold-bright); }
.ftab.is-on span{ color:var(--ivory-dim); }
.ftabs + .post-grid{ padding-top:28px; }

/* ===== Video YouTube nhúng trong bài ===== */
.yt-embed{ margin:40px 0 28px; }
.yt-embed .kb-title{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); display:block; margin-bottom:12px; }
.yt-frame{ position:relative; aspect-ratio:16/9; background:#000; border-radius:2px; overflow:hidden; border:1px solid var(--paper-line); }
.yt-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-cap{ margin:12px 0 0; font-size:.92rem; color:var(--brown-dim); }
.yt-bar{
  margin-top:16px; padding:14px 18px; border:1px solid var(--paper-line); background:var(--cream);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; font-size:.9rem; color:var(--brown-dim);
}
.yt-bar b{ color:var(--brown-ink); }

/* ===== Hộp sách trong bài ===== */
.book-box{
  margin:34px 0; padding:26px 28px; border:1px solid rgba(201,161,92,.45); background:linear-gradient(155deg,#fbf7ee,var(--cream));
  border-radius:2px; display:flex; flex-wrap:wrap; gap:18px 28px; align-items:center; justify-content:space-between;
}
.book-box .bb-title{ font-family:var(--display); font-weight:700; font-size:1.12rem; color:#0e1119; }
.book-box .bb-meta{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep); margin-top:6px; }
.book-box .bb-price{ font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--gold-deep); }
.book-box .bb-price small{ font-size:.75rem; font-weight:500; color:var(--brown-dim); margin-left:6px; }
.book-box .bb-right{ display:flex; flex-direction:column; align-items:flex-end; gap:10px; }

/* ===== CTA + related ===== */
.article-cta{
  background:linear-gradient(155deg,var(--ink-deep),var(--ink-deep-2));
  color:var(--ivory); padding:clamp(36px,5vw,52px); border-radius:2px; margin:20px 0 0;
  display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between;
}
.article-cta h3{ color:#fff; font-size:clamp(1.2rem,2.4vw,1.6rem); max-width:26ch; }
.article-cta p{ margin:10px 0 0; color:var(--ivory-dim); font-size:.96rem; max-width:46ch; }

.related{ background:var(--paper-2); padding:clamp(50px,7vw,80px) 0; }
.related h2{ font-size:clamp(1.3rem,2.6vw,1.8rem); margin-bottom:26px; }
.related-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.related-card{
  background:var(--cream); border:1px solid var(--paper-line); border-radius:2px; padding:20px;
  text-decoration:none; color:inherit; transition:transform .3s var(--ease);
}
.related-card:hover{ transform:translateY(-3px); }
.related-card .cat{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.related-card h3{ font-size:.98rem; margin-top:8px; line-height:1.4; }
@media (max-width:900px){ .related-grid{ grid-template-columns:1fr; } }

/* ===== Footer ===== */
footer.blog-footer{ background:var(--ink-deep-3); color:var(--ivory-dim); padding:52px 0 28px; }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:26px; padding-bottom:30px; border-bottom:1px solid rgba(226,189,124,.12); }
.footer-brand .name{ font-family:var(--display); color:var(--ivory); font-size:1.15rem; }
.footer-brand .tag{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; margin-top:6px; color:var(--gold-bright); }
.footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; color:var(--ivory-dim); font-size:.88rem; }
.footer-links a:hover{ color:var(--gold-bright); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:20px; font-size:.76rem; }