:root {
      --ink: #141413; --ink-soft: #2a2a28; --paper: #faf9f5;
      --paper-warm: #f5f2ea; --paper-muted: #efece4;
      --orange: #d97757; --orange-deep: #c65d3a; --orange-light: #f0b89e;
      --blue: #6a9bcc; --blue-deep: #4a7db3; --blue-light: #a6c4e3;
      --green: #788c5d; --green-deep: #5e7247; --green-light: #a8b896;
      --mid-gray: #b0aea5; --light-gray: #e8e6dc; --text-secondary: #6b6a64;
      --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
      --font-body: 'Inter', system-ui, -apple-system, sans-serif;
      --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
      --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;--s20:80px;--s24:96px;
      --r-sm:4px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:9999px;
      --sh-sm:0 1px 2px rgba(20,20,19,0.06);--sh-md:0 4px 6px rgba(20,20,19,0.08);
      --sh-lg:0 8px 24px rgba(20,20,19,0.10);--sh-xl:0 12px 40px rgba(20,20,19,0.14);
      --sh-orange:0 4px 12px rgba(217,119,87,0.25);
      --page-max:1200px;--content-max:800px /* Chuẩn hóa - 60-70 ký tự/dòng, tối ưu readability 2026 */;--nav-height:72px;
      --ease-out:cubic-bezier(0.16,1,0.3,1);--dur:250ms;
    }
    [data-theme="dark"] {
      --ink:#e8e6dc;--ink-soft:#c4c2b8;--paper:#1a1a18;--paper-warm:#222220;--paper-muted:#2a2a28;
      --orange:#e88b6a;--orange-deep:#f0a080;--orange-light:#c47a58;
      --blue:#8ab8e0;--blue-deep:#a6cef0;--blue-light:#6088aa;
      --green:#9ab87a;--green-deep:#b0cc90;--green-light:#688a50;
      --mid-gray:#8a887f;--light-gray:#3a3a38;--text-secondary:#9a988f;
    }
    @media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#e8e6dc;--ink-soft:#c4c2b8;--paper:#1a1a18;--paper-warm:#222220;--paper-muted:#2a2a28;--orange:#e88b6a;--orange-deep:#f0a080;--orange-light:#c47a58;--blue:#8ab8e0;--blue-deep:#a6cef0;--blue-light:#6088aa;--green:#9ab87a;--green-deep:#b0cc90;--green-light:#688a50;--mid-gray:#8a887f;--light-gray:#3a3a38;--text-secondary:#9a988f}}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
    h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2;color:var(--ink)}
    h1{font-size:2.75rem;letter-spacing:-0.02em}h2{font-size:1.75rem;margin-top:var(--s12);margin-bottom:var(--s4)}h3{font-size:1.25rem;margin-top:var(--s8);margin-bottom:var(--s3)}
    p{margin-bottom:var(--s4)}
    a{color:var(--blue);text-decoration:none;transition:color var(--dur) var(--ease-out)}a:hover{color:var(--blue-deep);text-decoration:underline}
    img{max-width:100%;height:auto}
    code{font-family:var(--font-mono);font-size:0.875rem;background:var(--paper-muted);padding:0.15em 0.4em;border-radius:3px}
    pre{background:var(--paper-muted);border:1px solid var(--light-gray);border-radius:var(--r-lg);padding:var(--s5) var(--s6);overflow-x:auto;margin:var(--s6) 0;font-size:0.8125rem;line-height:1.55}
    pre code{background:none;padding:0;font-size:inherit}
    ::selection{background:var(--orange-light);color:var(--ink)}
    ul,ol{padding-left:var(--s6);margin-bottom:var(--s4)}
    li{margin-bottom:var(--s2)}
    strong{color:var(--ink)}

    /* Architecture Diagram */
    .arch-wrapper{padding:var(--s6) var(--s5)!important}
    .arch-diagram{display:flex;flex-direction:column;align-items:center;gap:var(--s2);margin-top:var(--s4)}
    .arch-row{display:flex;align-items:center;justify-content:center;gap:var(--s3);flex-wrap:nowrap;width:100%}
    .arch-box{display:flex;flex-direction:column;align-items:center;padding:var(--s2) var(--s4);border-radius:var(--r-lg);border:1.5px solid var(--light-gray);background:var(--paper);min-width:100px;text-align:center;transition:border-color var(--dur) var(--ease-out)}
    .arch-icon{font-size:1.1rem;line-height:1;margin-bottom:var(--s1)}
    .arch-label{font-family:var(--font-heading);font-size:0.7rem;font-weight:600;line-height:1.1;color:var(--ink)}
    .arch-sub{font-family:var(--font-mono);font-size:0.55rem;color:var(--text-secondary);line-height:1;margin-top:2px}
    .arch-arrow-right{font-size:1.2rem;color:var(--mid-gray);flex-shrink:0}
    .arch-connector{display:flex;flex-direction:column;align-items:center;gap:0}
    .arch-line-v{width:2px;height:12px;background:var(--mid-gray);border-radius:1px}
    .arch-fork{display:flex;width:100%;justify-content:center;gap:calc(100px + var(--s3)*4)}
    .arch-fork .arch-line-h{height:2px;width:calc(50px + var(--s3));background:var(--mid-gray);border-radius:1px}
    .arch-user{border-color:var(--mid-gray)}
    .arch-ceo{border-color:var(--orange);border-width:2px;background:var(--orange-light);min-width:120px}
    .arch-cto{border-color:var(--blue);background:var(--blue-light)}
    .arch-cmo{border-color:var(--green);background:var(--green-light)}
    .arch-coo{border-color:var(--orange-deep)}
    .arch-gateway{border-color:var(--mid-gray);border-style:dashed}
    .arch-gbrain{border-color:var(--orange);border-width:2px;min-width:140px}
    [data-theme="dark"] .arch-ceo{background:rgba(217,119,87,0.15)}
    [data-theme="dark"] .arch-cto{background:rgba(106,155,204,0.15)}
    [data-theme="dark"] .arch-cmo{background:rgba(120,140,93,0.15)}
    @media(max-width:600px){
      .arch-box{min-width:72px;padding:var(--s1) var(--s2)}
      .arch-icon{font-size:0.9rem}
      .arch-label{font-size:0.6rem}
      .arch-sub{font-size:0.5rem}
      .arch-arrow-right{font-size:1rem}
      .arch-row{gap:var(--s1)}
      .arch-fork{gap:80px}
      .arch-fork .arch-line-h{width:36px}
    }

    /* Article Layout */
    .article{padding:var(--s12) var(--s6)}
    .article-inner{max-width:var(--content-max);margin:0 auto}
    .article-header{margin-bottom:var(--s10);text-align:center}
    .article-header .label{font-family:var(--font-heading);font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:var(--orange);margin-bottom:var(--s4)}
    .article-header h1{font-size:2.75rem;line-height:1.15;margin-bottom:var(--s4)}
    .article-header .meta{font-family:var(--font-mono);font-size:0.75rem;color:var(--text-secondary)}
    .article-header .subtitle{font-family:var(--font-body);font-size:1.125rem;color:var(--text-secondary);line-height:1.65;max-width:680px;margin:var(--s4) auto 0}

    .article-body{font-size:1.0625rem;line-height:1.75}
    .article-body h2{padding-top:var(--s4);border-top:1px solid var(--light-gray)}
    .article-body h2:first-of-type{border-top:none;padding-top:0}
    .article-body p{color:var(--ink-soft)}
    .article-body .highlight-box{background:var(--paper-warm);border-left:3px solid var(--orange);padding:var(--s5) var(--s6);margin:var(--s6) 0;border-radius:0 var(--r-md) var(--r-md) 0}
    .article-body .highlight-box p{margin-bottom:0;color:var(--ink)}
    .article-body .info-box{background:var(--paper-warm);border-left:3px solid var(--blue);padding:var(--s5) var(--s6);margin:var(--s6) 0;border-radius:0 var(--r-md) var(--r-md) 0}
    .article-body .info-box p{margin-bottom:0;color:var(--ink)}
    .article-body .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin:var(--s8) 0}
    .article-body .stat-item{text-align:center;padding:var(--s5);background:var(--paper-warm);border:1px solid var(--light-gray);border-radius:var(--r-xl)}
    .article-body .stat-item .num{font-family:var(--font-heading);font-size:1.75rem;font-weight:800;color:var(--orange);display:block}
    .article-body .stat-item .label{font-size:0.8125rem;color:var(--text-secondary);margin-top:var(--s1)}
    .article-body blockquote{border-left:3px solid var(--light-gray);padding:var(--s3) var(--s6);margin:var(--s6) 0;font-style:italic;color:var(--text-secondary)}
    .article-body blockquote p{margin-bottom:0}
    .article-body .tag{display:inline-block;font-family:var(--font-mono);font-size:0.75rem;color:var(--blue);background:var(--paper-muted);padding:var(--s1) var(--s3);border-radius:var(--r-sm)}
    .article-body .hline{width:60px;height:2px;background:var(--orange);margin:var(--s10) 0 var(--s4)}
    /* Table styling — markdown-generated tables */
    .article-body table{width:100%;border-collapse:collapse;margin:var(--s6) 0;font-size:0.9375rem;line-height:1.55;overflow-x:auto;display:block}
    .article-body table thead{background:var(--paper-warm)}
    .article-body table th{font-family:var(--font-heading);font-weight:600;text-align:left;padding:var(--s3) var(--s4);border:1px solid var(--light-gray);color:var(--ink);font-size:0.8125rem;text-transform:uppercase;letter-spacing:0.04em}
    .article-body table td{padding:var(--s3) var(--s4);border:1px solid var(--light-gray);color:var(--ink-soft);vertical-align:top}
    .article-body table tbody tr:nth-child(even){background:var(--paper-warm)}
    .article-body table tbody tr:hover{background:var(--paper-muted)}
    @media(max-width:600px){
      .article-body table{font-size:0.8125rem;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
      .article-body table th,.article-body table td{padding:var(--s2) var(--s3);white-space:normal;min-width:120px}
    }

    /* Author box */
    .author-box{display:flex;align-items:flex-start;gap:var(--s4);padding:var(--s6);background:var(--paper-warm);border:1px solid var(--light-gray);border-radius:var(--r-xl);margin:var(--s10) 0}
    .author-box .avatar{width:48px;height:48px;border-radius:0;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);-webkit-clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);object-fit:cover;flex-shrink:0;background:var(--orange-light);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;font-size:1.125rem;color:var(--paper);flex-shrink:0}
    .author-box .info{flex:1}
    .author-box .name{font-family:var(--font-heading);font-weight:600;font-size:0.9375rem;margin-bottom:var(--s1)}
    .author-box .bio{font-size:0.875rem;color:var(--text-secondary);line-height:1.6;margin:0}

    /* CTA */
    .article-cta{background:var(--paper-warm);border:1px solid var(--light-gray);border-radius:var(--r-xl);padding:var(--s10);text-align:center;margin:var(--s12) 0}
    .article-cta h3{margin-top:0;margin-bottom:var(--s3)}
    .article-cta p{color:var(--text-secondary);max-width:500px;margin:0 auto var(--s6)}
    .article-cta .btn{font-family:var(--font-heading);font-weight:600;font-size:0.9375rem;padding:var(--s3) var(--s6);border-radius:var(--r-full);border:none;cursor:pointer;transition:all var(--dur) var(--ease-out);display:inline-flex;align-items:center;gap:var(--s2);text-decoration:none}
    .article-cta .btn-primary{background:var(--orange);color:var(--paper);box-shadow:var(--sh-orange)}
    .article-cta .btn-primary:hover{background:var(--orange-deep);transform:translateY(-1px);box-shadow:0 6px 20px rgba(217,119,87,0.3);text-decoration:none}
    .article-cta .btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--mid-gray);margin-left:var(--s3)}
    .article-cta .btn-secondary:hover{border-color:var(--orange);color:var(--orange);text-decoration:none}

    .back-link{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--font-heading);font-size:0.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--s8);text-decoration:none;transition:color var(--dur) var(--ease-out)}
    .back-link:hover{color:var(--orange);text-decoration:none}

    /* Related Articles Section */
    .related-articles{max-width:var(--content-max);margin:var(--s12) auto 0;padding-top:var(--s10);border-top:1px solid var(--light-gray)}
    .related-articles h3{font-size:1.375rem;margin-bottom:var(--s6);text-align:center}
    .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
    .related-card{background:var(--paper-warm);border:1px solid var(--light-gray);border-radius:var(--r-lg);padding:var(--s5);text-decoration:none;color:inherit;transition:border-color var(--dur) var(--ease-out)}
    .related-card:hover{border-color:var(--orange);text-decoration:none}
    .related-card .cat{display:inline-block;font-family:var(--font-heading);font-size:0.625rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--orange);margin-bottom:var(--s2)}
    .related-card .title{font-family:var(--font-heading);font-size:0.9375rem;font-weight:600;line-height:1.35;margin-bottom:var(--s2);transition:color var(--dur) var(--ease-out)}
    .related-card:hover .title{color:var(--orange)}
    .related-card .meta{font-family:var(--font-mono);font-size:0.625rem;color:var(--mid-gray)}
    .related-card .read{font-family:var(--font-heading);font-size:0.75rem;font-weight:600;color:var(--blue);margin-top:var(--s3);display:inline-flex;align-items:center;gap:4px}
    .related-card:hover .read{color:var(--orange)}

    /* Footer */
    .footer{padding:var(--s12) var(--s6);border-top:1px solid var(--light-gray)}
    .footer-inner{max-width:var(--page-max);margin:0 auto;text-align:center}
    .footer p{font-size:0.8125rem;color:var(--text-secondary)}

    /* Responsive */
    @media(max-width:900px){
      h1{font-size:2rem}
      .article-header h1{font-size:2rem}
      .article-body .stat-row{grid-template-columns:repeat(2,1fr)}
      .related-grid{grid-template-columns:1fr}
    }
    @media(max-width:480px){
      .article{padding:var(--s8) var(--s4)}
      .article-header h1{font-size:1.625rem}
      .article-body{font-size:1rem}
      .article-body .stat-row{grid-template-columns:1fr}
      .article-cta{padding:var(--s6) var(--s4)}
      .article-cta .btn-secondary{margin-left:0;margin-top:var(--s3)}
      .author-box{flex-direction:column;align-items:center;text-align:center}
    }

    /* Fade-in */
    .fade-up{opacity:0;transform:translateY(20px);transition:opacity 0.6s var(--ease-out),transform 0.6s var(--ease-out)}
    .fade-up.visible{opacity:1;transform:translateY(0)}