/* TUVANAI Blog Hub — shared styles */
:root{
  --indigo:#4f46e5;--indigo-dark:#3730a3;--indigo-deep:#1e1b4b;
  --cyan:#06b6d4;--bg:#f8fafc;--card:#fff;--line:#e2e8f0;
  --text:#0f172a;--muted:#64748b;
  --grad:linear-gradient(135deg,#4f46e5 0%,#7c3aed 55%,#06b6d4 130%);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.7}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
a{text-decoration:none;color:inherit}
img{max-width:100%}
/* header */
.btop{background:var(--indigo-deep);color:#c7d2fe;font-size:12.5px;padding:7px 0}
.btop .container{display:flex;justify-content:space-between}
.btop a:hover{color:#fff}
.bnav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bnav .container{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px}
.logo-mark{width:36px;height:36px;border-radius:10px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:900;font-size:19px}
.logo small{display:block;font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.4px}
.blinks{display:flex;gap:22px;font-size:14px;font-weight:600}
.blinks a{color:#334155}
.blinks a:hover,.blinks a.active{color:var(--indigo)}
.burger{display:none;background:none;border:0;font-size:24px;cursor:pointer}
/* hero */
.bhero{background:url('img/blog-hero.jpg') center/cover;position:relative;color:#fff}
.bhero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(30,27,75,.93),rgba(79,70,229,.6))}
.bhero .container{position:relative;z-index:2;padding:70px 24px}
.bhero .kicker{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);padding:6px 16px;border-radius:999px;font-size:12.5px;font-weight:700;margin-bottom:16px}
.bhero h1{font-size:40px;font-weight:900;line-height:1.25;max-width:720px;margin-bottom:12px}
.bhero p{color:#e0e7ff;max-width:640px;font-size:16.5px}
/* featured */
.feat{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;margin:40px 0}
.feat-main{position:relative;border-radius:20px;overflow:hidden;min-height:380px;display:flex;align-items:flex-end;color:#fff}
.feat-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feat-main::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(15,10,40,.92))}
.feat-main .txt{position:relative;z-index:2;padding:30px}
.feat-side{display:flex;flex-direction:column;gap:16px}
.tag{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--indigo);background:#eef2ff;padding:5px 13px;border-radius:999px;margin-bottom:10px}
.feat-main .tag{background:rgba(255,255,255,.18);color:#fff}
.feat-main h2{font-size:26px;font-weight:800;line-height:1.35;margin-bottom:8px}
.feat-main h2 a:hover{text-decoration:underline}
.meta{font-size:13px;opacity:.85;display:flex;gap:14px}
.mini{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;transition:.2s}
.mini:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(79,70,229,.12)}
.mini img{width:120px;height:88px;object-fit:cover;border-radius:10px;flex-shrink:0}
.mini h3{font-size:15px;font-weight:700;line-height:1.45}
.mini h3 a:hover{color:var(--indigo)}
.mini .meta{color:var(--muted);margin-top:6px}
/* sections */
.bsec{margin:48px 0}
.bsec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.bsec-head h2{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px}
.bsec-head h2::before{content:"";width:6px;height:26px;border-radius:3px;background:var(--grad)}
.bsec-head a{font-size:14px;font-weight:700;color:var(--indigo)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s;display:flex;flex-direction:column}
.card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(79,70,229,.13)}
.card img{width:100%;height:190px;object-fit:cover}
.card .body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:17px;font-weight:700;line-height:1.5}
.card h3 a:hover{color:var(--indigo)}
.card p{font-size:14px;color:var(--muted);flex:1}
.card .meta{color:var(--muted)}
/* article page */
.crumb{font-size:13.5px;color:var(--muted);margin:26px 0 14px}
.crumb a:hover{color:var(--indigo)}
.art-head{max-width:820px;margin:0 auto 26px}
.art-head h1{font-size:36px;font-weight:900;line-height:1.3;margin:12px 0}
.art-head .meta{color:var(--muted);opacity:1}
.art-hero{max-width:900px;margin:0 auto 34px;border-radius:20px;overflow:hidden}
.art-hero img{width:100%;max-height:440px;object-fit:cover;display:block}
.art-body{max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:44px}
.art-body h2{font-size:25px;font-weight:800;margin:38px 0 14px;padding-top:6px}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:19px;font-weight:700;margin:26px 0 10px;color:var(--indigo-deep)}
.art-body p{margin-bottom:16px;font-size:16.5px;color:#1e293b}
.art-body ul,.art-body ol{margin:0 0 18px 24px;font-size:16px;color:#1e293b}
.art-body li{margin-bottom:8px}
.art-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
.art-body th{background:#eef2ff;color:var(--indigo-deep);text-align:left;padding:12px 14px;font-weight:700}
.art-body td{border-top:1px solid var(--line);padding:12px 14px;vertical-align:top}
.art-body blockquote{border-left:4px solid var(--indigo);background:#f5f3ff;padding:16px 20px;border-radius:0 12px 12px 0;margin:20px 0;font-size:16px}
.toc{background:#f8fafc;border:1.5px dashed #c7d2fe;border-radius:14px;padding:22px 26px;margin:24px 0}
.toc b{display:block;margin-bottom:10px;font-size:16px}
.toc ol{margin:0 0 0 20px;font-size:15px}
.toc li{margin-bottom:6px}
.toc a:hover{color:var(--indigo);text-decoration:underline}
.cta-box{background:var(--grad);color:#fff;border-radius:18px;padding:32px;margin:36px 0;text-align:center}
.cta-box h3{font-size:22px;margin-bottom:10px}
.cta-box p{color:#e0e7ff;margin-bottom:20px;font-size:15.5px}
.cta-box .btn{display:inline-block;background:#fff;color:var(--indigo-dark);font-weight:800;padding:13px 30px;border-radius:999px}
.faq-item{background:#f8fafc;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;background:none;border:0;padding:16px 20px;font-size:15.5px;font-weight:700;text-align:left;cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-family:inherit;color:var(--text)}
.faq-q .pm{color:var(--indigo);font-size:20px}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s}
.faq-a p{padding:0 20px 18px;font-size:15px;color:var(--muted)}
.faq-item.open .faq-a{max-height:400px}
/* related */
.related{max-width:1180px;margin:56px auto 0}
.related h2{font-size:24px;font-weight:800;margin-bottom:20px}
/* newsletter */
.news{background:var(--indigo-deep);color:#fff;border-radius:24px;padding:52px;margin:56px 0;text-align:center}
.news h2{font-size:28px;font-weight:900;margin-bottom:10px}
.news p{color:#c7d2fe;margin-bottom:24px}
.news form{display:flex;gap:10px;max-width:480px;margin:0 auto}
.news input{flex:1;border:0;border-radius:999px;padding:14px 22px;font-size:15px;font-family:inherit}
.news button{background:var(--cyan);color:#fff;border:0;border-radius:999px;padding:14px 30px;font-weight:800;font-size:15px;cursor:pointer}
/* footer */
.bfoot{background:#0b0a24;color:#94a3b8;padding:48px 0 24px;font-size:14px;margin-top:64px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;margin-bottom:30px}
.f-grid h5{color:#fff;font-size:15px;margin-bottom:12px}
.f-grid a{display:block;margin-bottom:8px}
.f-grid a:hover{color:#fff}
.f-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px}
.reveal{opacity:0;transform:translateY(24px);transition:.7s}
.reveal.in{opacity:1;transform:none}
@media(max-width:960px){
  .feat{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .blinks{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;flex-direction:column;padding:18px 24px;gap:14px;border-bottom:1px solid var(--line)}
  .blinks.show{display:flex}
  .burger{display:block}
  .art-body{padding:28px 22px}
  .art-head h1{font-size:28px}
  .bhero h1{font-size:30px}
  .f-grid{grid-template-columns:1fr 1fr}
  .news form{flex-direction:column}
}
@media(max-width:600px){.cards{grid-template-columns:1fr}}