/* Shared stylesheet for the Kiến thức (knowledge) hub and every article under /knowledge/.
   Used by knowledge.html and knowledge/*.html. Add new articles by reusing this file —
   do not re-embed these rules inline in a new page. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',sans-serif;color:#1a1a2e;background:#f8f9fa;line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:820px;margin:0 auto;padding:0 20px}

/* Nav */
nav{background:rgba(255,255,255,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #e8e8e8;padding:14px 0;position:sticky;top:0;z-index:100}
.nav-inner{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
nav ul{display:flex;gap:24px;list-style:none;margin-left:auto;align-items:center}
nav ul a{font-size:.9rem;color:#555;font-weight:500;transition:color .2s;text-decoration:none}
nav ul a:hover{color:#0d6e6e}
.logo{font-weight:800;font-size:1.1rem;color:#1a1a2e;text-decoration:none}

/* Hub table-of-contents */
.sticky-nav{position:sticky;top:58px;z-index:99;background:rgba(248,249,250,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:12px 0;border-bottom:1px solid #e8e8e8;margin-bottom:32px}
@media(max-width:640px){.sticky-nav{top:90px}}
.sticky-nav .anchor-links{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none}
.sticky-nav .anchor-links a{font-size:.85rem;color:#0d6e6e;font-weight:600;text-decoration:none;padding:4px 10px;border-radius:6px;background:#eef5f5;transition:background .2s;white-space:nowrap}
.sticky-nav .anchor-links a:hover{background:#d0e7e7}

/* Page title / meta */
h1{font-size:1.8rem;font-weight:800;margin:40px 0 4px;color:#1a1a2e;line-height:1.25}
.sub{color:#666;font-size:.95rem;margin-bottom:8px}
.date{color:#999;font-size:.8rem;margin-bottom:32px}

/* Article body */
article{background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:32px;margin-bottom:32px;scroll-margin-top:130px}
article h2{font-size:1.2rem;font-weight:700;margin:28px 0 12px;color:#0d6e6e}
article h2:first-child{margin-top:0}
article h3{font-size:1rem;font-weight:700;margin:20px 0 8px;color:#1a1a2e}
article p,article li{font-size:.92rem;color:#444;line-height:1.7;margin-bottom:8px}
article ol,article ul{padding-left:20px;margin-bottom:16px}
article li{margin-bottom:4px}
article strong{color:#1a1a2e}
article code{background:#f0f7f7;padding:2px 6px;border-radius:4px;font-size:.85rem;color:#0d6e6e}
article a{color:#0d6e6e;font-weight:600}
.step-box{background:#f8fbfb;border:1px solid #e0eaea;border-radius:10px;padding:16px 20px;margin:12px 0 16px}
.step-box p{margin-bottom:4px}
.highlight{background:#fff8e1;border-left:4px solid #f9a825;padding:12px 16px;margin:16px 0;border-radius:4px;font-size:.9rem}
.highlight.green{background:#e8f5e9;border-left:4px solid #43a047}
table{width:100%;border-collapse:collapse;font-size:.85rem;margin:12px 0 20px}
th,td{border:1px solid #d0dfdf;padding:8px 12px;text-align:left}
th{background:#f0f7f7;font-weight:700}

/* FAQ accordion */
details.faq-item{margin:16px 0;border:1px solid #e8e8e8;border-radius:10px;overflow:hidden;background:#fff}
details.faq-item summary{padding:14px 18px;font-weight:600;font-size:.92rem;color:#1a1a2e;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;transition:background .15s}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary:hover{background:#f4fafa}
details.faq-item summary::before{content:"❓";font-size:.9rem}
details.faq-item[open] summary::before{content:"💡"}
details.faq-item .faq-answer{padding:4px 18px 16px;border-top:1px solid #eef5f5}
details.faq-item .faq-answer p,details.faq-item .faq-answer ul,details.faq-item .faq-answer li{font-size:.9rem;color:#444}

.back-top{display:block;text-align:right;font-size:.82rem;color:#aaa;text-decoration:none;margin-top:4px;margin-bottom:8px;transition:color .2s}
.back-top:hover{color:#0d6e6e}
.back-top::before{content:"⬆ "}

/* Hub card grid */
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px}
.card-link{display:block;background:#fff;border:1px solid #e8e8e8;border-radius:12px;padding:24px;text-decoration:none;transition:box-shadow .2s}
.card-link:hover{box-shadow:0 2px 12px rgba(0,0,0,.08)}

footer{background:#1a1a2e;color:#888;padding:28px 0;text-align:center;font-size:.83rem;margin-top:60px}
footer a{color:#ddd;text-decoration:underline}

@media(max-width:640px){
  article{padding:20px 16px}
  h1{font-size:1.4rem}
  .sticky-nav .anchor-links{gap:6px 10px}
  .sticky-nav .anchor-links a{font-size:.8rem;padding:8px 10px;white-space:normal}
  nav ul{gap:12px}
  details.faq-item summary{padding:16px 18px}
  .back-top{padding:10px 0;font-size:.9rem}
  article p,article li{font-size:.95rem}
  .step-box{padding:12px 14px}
  .card-grid{grid-template-columns:1fr}
}