@charset "UTF-8";@import "https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Vietnamese:wght@400;500;700&display=swap";[data-theme=light]{--color-primary:#000000;--color-background:#ffffff;--color-text:#333333;--color-code-block:#f6f8fa;--color-accent:#228B22;--filter:invert(0%);--font-smoothing:antialiased}[data-theme=dark]{--color-primary:#FFF2DF;--color-background:#121212;--color-text:#F0F0F0;--color-code-block:#1e1e1e;--color-accent:#2ECC71;--filter:invert(100%);--font-smoothing:subpixel-antialiased}body{font-family:be vietnam pro,noto sans vietnamese,system-ui,-apple-system,segoe ui,Roboto,helvetica neue,sans-serif;-webkit-font-smoothing:var(--font-smoothing);text-rendering:optimizeLegibility;font-feature-settings:"kern" 1}:root{color-scheme:light dark;--font-x0:0.75rem;--font-x1:0.875rem;--font-x2:1rem;--font-x3:1.125rem;--font-x4:1.25rem;--font-x5:1.5rem}a{text-decoration:none;color:var(--color-primary)}a:hover{text-decoration:none;box-sizing:border-box;color:var(--color-accent)}h1{font-size:var(--font-x5)}h2{margin-top:3rem;font-size:var(--font-x4)}h3{margin-top:2rem}p{text-indent:2em}p>img{border-radius:5px;display:flex;margin:2rem auto;max-width:100%}li>code,p>code{font-family:monospace;font-size:var(--font-x2);color:var(--color-text);background-color:var(--color-code-block);margin:0 .1em;padding:1px 4px;border-radius:5px}html{text-rendering:geometricPrecision;scroll-behavior:smooth;font-family:be vietnam pro,noto sans vietnamese,system-ui,-apple-system,segoe ui,Roboto,helvetica neue,sans-serif}body{display:flex;flex-direction:column;max-width:46rem;min-height:100vh;margin:0 auto;padding:0 1rem;background-color:var(--color-background);color:var(--color-text);transition:background-color .3s,color .3s}header{font-size:var(--font-x2);font-weight:700}header .navbar{margin:0 auto;padding:3rem 0 4rem;display:flex;flex-direction:row;align-items:center;justify-content:space-between;line-height:1}header .navbar-menu{display:flex;gap:1rem}header .navbar-link{display:flex;gap:1rem}header .navbar-link a{font-size:.88rem;margin:auto 0;color:var(--color-accent)}header .navbar-link a::before{content:"";margin-left:.5rem}header .navbar .theme-toggle-btn{display:flex;cursor:pointer}header .navbar .theme-toggle-btn svg{margin:auto 0}main{font-size:var(--font-x2);line-height:1.8}main .hero{width:100%;aspect-ratio:3.5/1;border-radius:5px}@media(max-width:720px){main .hero{aspect-ratio:2.5/1}}main .hero-image{width:100%;height:100%;border-radius:5px;object-fit:cover;object-position:center}main .about{margin:2rem 0 6rem;display:flex;flex-direction:column}main .about-intro{margin:2rem auto;text-align:center;max-width:90%;width:370px;font-size:var(--font-x1);color:var(--color-text);opacity:.8}main .about-social{display:flex}main .about-social-links{display:flex;flex-wrap:wrap;font-size:var(--font-x1);font-weight:700;list-style:none;margin:0 auto;padding:0;max-width:90%;width:280px;gap:1rem;justify-content:center}main .section-title{display:flex;margin:2rem 0;font-size:var(--font-x2);font-weight:700;color:var(--color-primary)}main .section-title>div{cursor:pointer}main .section-title #switchWritings{color:var(--color-accent)}main .writings{display:flex;flex-direction:column}main .writings-item{margin-bottom:2rem;border-bottom:1px solid rgba(136,136,136,.2)}main .writings-date{font-size:var(--font-x1);opacity:.8}main .writings-title>a{font-size:var(--font-x2);font-weight:700}main .writings-title>p{text-indent:0;opacity:.8;font-size:var(--font-x1)}main .projects{display:none}main .projects-list{display:flex;flex-direction:column}main .projects-item{display:flex;flex-direction:row;margin:.5rem 0}main .projects-title{font-weight:700}main .projects-title-content>span{opacity:.8;margin-left:1rem;font-weight:400;font-family:monospace;font-size:var(--font-x1)}main .projects-title-desc{margin-left:2em;opacity:.8;font-style:italic;font-size:.86rem;font-weight:400}main .projects-title-desc::before{content:"~";padding-right:.5rem}.separator::before{content:"/";font-weight:bolder;opacity:.8;margin:0 .5rem}.backtotop{display:block;margin:5rem 0 1rem;text-align:center}.backtotop img{width:2rem;height:2rem}.footer{display:flex;flex-direction:row;font-size:var(--font-x0);margin-top:auto;padding:4rem 0 2rem;justify-content:space-between}.footer span{line-height:1.7}.footer span a{font-weight:700}.footer :nth-child(2) :nth-child(2){color:var(--color-accent)}@media(max-width:720px){.footer{flex-direction:column;margin-bottom:2.5rem}.footer span{margin:0 auto}}.title-h1{text-align:center;margin:1.5rem auto 2rem;max-width:100%;width:460px;color:var(--color-primary)}.preface{font-size:var(--font-x1);margin:1rem auto 0;max-width:100%;width:460px}.preface-author{text-align:end;font-style:italic;margin:0 auto;max-width:100%;width:460px}.preface-author::before{content:"—— "}.article-author{margin-top:3rem}.article-header{display:flex;flex-direction:column;font-size:var(--font-x1);text-align:center;opacity:.8;margin-bottom:2rem}.article-header>time{margin-bottom:2rem}.article-license{opacity:.8;font-size:var(--font-x1);padding:.5rem 0}.article-license::before{content:"!";font-weight:bolder;color:var(--color-accent);margin-right:5px}blockquote{margin:0 0 0 3px;padding:0 0 0 1rem;border-left:3px solid var(--color-accent);border-radius:5px}blockquote p{text-indent:0}table{border-collapse:collapse;width:100%;border:1px solid var(--color-text)}th,td{border:1px solid var(--color-text);padding:8px}.highlight{background-color:#272822;overflow:auto;border-radius:5px}.highlight pre{margin:7px}.highlight pre code>span{margin:0 7px}.highlight pre code>span::after{content:"";padding-right:13px}.footnotes hr{opacity:.2}.footnotes ol{padding-left:1.3em}.footnotes p{opacity:.8;text-indent:0;font-size:var(--font-x1)}.pagination{font-size:var(--font-x0);font-weight:700;margin:1rem auto 2rem;display:flex}.pagination>a{position:relative;padding:.5rem 1rem;text-decoration:none;color:var(--color-primary)}.pagination>a:hover{text-decoration:none;border-bottom:none;padding-bottom:.5rem}.pagination-prev,.pagination-next,.pagination-page{margin:0 .5rem}.pagination-prev>a,.pagination-next>a,.pagination-page>a{color:var(--color-accent)}