/* site.css — shared styles for Kiến thức nghề hub + bài viết (ngheketoan.com) */
:root{
  --navy:#112A46; --teal:#19B5A8; --teal-dark:#138a80;
  --bg:#ffffff; --bg-soft:#F4F8F8; --ink:#1d2b36; --muted:#5d6e78;
  --line:#e3edec; --radius:24px; --radius-sm:16px;
  --shadow:0 24px 60px -28px rgba(17,42,70,.28);
  --shadow-soft:0 14px 40px -24px rgba(17,42,70,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;color:var(--navy);font-weight:400;line-height:1.2;letter-spacing:-.01em;margin:0}
a{color:var(--teal-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:-apple-system,sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dark)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--teal);border-radius:2px;display:inline-block}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:-apple-system,sans-serif;font-weight:700;font-size:16px;padding:15px 28px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:.2s}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 14px 30px -14px rgba(25,181,168,.7)}
.btn-primary:hover{background:var(--teal-dark);transform:translateY(-2px);text-decoration:none}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal-dark);transform:translateY(-2px);text-decoration:none}

/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{font-family:Georgia,serif;font-size:27px;color:var(--navy);font-weight:700;letter-spacing:-.02em}
.logo b{color:var(--teal)}
.nav-links{display:flex;align-items:center;gap:30px;font-family:-apple-system,sans-serif}
.nav-links a{font-size:15.5px;font-weight:600;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--navy);text-decoration:none}
.nav-cta{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--navy);font-size:15.5px}
.nav-cta b{color:var(--teal-dark)}

/* Breadcrumb */
.crumb{padding:26px 0 0;font-size:14px;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--teal-dark)}
.crumb span{margin:0 8px;color:var(--line)}

/* Article */
.article{padding:34px 0 70px}
.article-head{max-width:780px;margin-bottom:30px}
.article-head h1{font-size:clamp(32px,4.4vw,52px);margin:14px 0 0}
.article-meta{margin-top:16px;color:var(--muted);font-size:14.5px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.article-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--teal)}
.tldr{max-width:820px;background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--radius-sm);padding:22px 26px;margin:0 0 34px;font-size:17px;color:var(--ink)}
.tldr b{color:var(--navy)}
.prose{max-width:760px;font-size:17.5px}
.prose h2{font-size:clamp(26px,3vw,34px);margin:44px 0 14px}
.prose h3{font-size:21px;font-family:-apple-system,sans-serif;font-weight:700;color:var(--navy);margin:30px 0 10px}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:24px}
.prose li{margin:0 0 9px}
.prose strong{color:var(--navy)}
.prose blockquote{margin:26px 0;padding:18px 24px;background:var(--bg-soft);border-left:4px solid var(--teal);border-radius:var(--radius-sm);color:var(--muted);font-style:italic}
.callout{margin:30px 0;background:var(--navy);color:#fff;border-radius:var(--radius);padding:30px 32px}
.callout h3{color:#fff;font-family:Georgia,serif;font-weight:400;font-size:23px;margin:0 0 10px}
.callout p{color:rgba(255,255,255,.8);margin:0 0 18px}
.callout .btn-primary{background:var(--teal)}

/* FAQ on article */
.faq{max-width:760px;margin:40px 0 0;display:grid;gap:14px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow-soft)}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:18px;font-family:Georgia,serif;font-size:18px;color:var(--navy)}
.faq-q .pm{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--teal-dark);font-size:19px;transition:.3s;font-family:-apple-system,sans-serif}
.faq-item.open .pm{background:var(--teal);color:#fff;border-color:var(--teal);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--muted)}
.faq-a div{padding:0 24px 22px;font-size:16px}

/* Related / internal links */
.related{max-width:760px;margin:50px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.related h2{font-size:24px;margin:0 0 18px}
.related-list{display:grid;gap:12px}
.related-list a{display:block;padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--navy);font-weight:600;background:#fff;transition:.2s}
.related-list a:hover{border-color:var(--teal);color:var(--teal-dark);text-decoration:none;transform:translateX(3px)}

/* Hub grid */
.hub{padding:40px 0 70px}
.hub-head{max-width:720px;margin-bottom:42px}
.hub-head h1{font-size:clamp(34px,4.6vw,56px);margin:14px 0 0}
.hub-head p{color:var(--muted);font-size:18px;margin:16px 0 0}
.hub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.hub-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);transition:.25s}
.hub-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.hub-card .tag{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark)}
.hub-card h2{font-size:24px;margin:13px 0 0;line-height:1.25}
.hub-card p{color:var(--muted);font-size:15.5px;margin:14px 0 22px;flex:1}
.hub-card a.more{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);font-size:15px}
.hub-card a.more:hover{color:var(--teal-dark);text-decoration:none}

/* Footer */
.footer{background:var(--navy);color:#fff;padding:60px 0 28px;margin-top:20px}
.footer .logo{color:#fff}
.footer p{color:rgba(255,255,255,.66);font-size:15px;margin:14px 0 0;max-width:360px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:44px}
.footer h4{font-family:-apple-system,sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--teal);margin:0 0 16px}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.footer ul a,.footer ul li{color:rgba(255,255,255,.78);font-size:15px}
.footer ul a:hover{color:var(--teal)}
.footer-bottom{margin-top:42px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:rgba(255,255,255,.55);font-size:13.5px}

@media (max-width:980px){
  .nav-links{display:none}
  .hub-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .prose{font-size:17px}
}