:root{--bg-primary: #FFFFFF;--bg-secondary: #F9FAFB;--bg-tertiary: #F3F4F6;--bg-code: #1F2937;--text-primary: #111827;--text-secondary: #6B7280;--text-muted: #9CA3AF;--border: #E5E7EB;--border-light: #F3F4F6;--accent: #5B9A5D;--accent-hover: #4A8A4C;--accent-light: #E8F5E9;--link: #2563EB;--link-hover: #1D4ED8;--green: #059669;--green-light: #D1FAE5;--red: #DC2626;--red-light: #FEE2E2;--yellow: #5B9A5D;--yellow-light: #E8F5E9;--purple: #7C3AED;--purple-light: #EDE9FE;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono", monospace;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--radius-sm: .25rem;--radius: .5rem;--radius-md: .75rem;--radius-lg: 1rem;--radius-xl: 1.5rem;--radius-full: 9999px;--transition-fast: .15s ease;--transition: .2s ease;--transition-slow: .3s ease;--content-sm: 640px;--content-md: 768px;--content-lg: 1024px;--content-xl: 1280px}[data-theme=dark]{--bg-primary: #0F0F0F;--bg-secondary: #1A1A1A;--bg-tertiary: #262626;--bg-code: #0D0D0D;--text-primary: #FFFFFF;--text-secondary: #A1A1A1;--text-muted: #737373;--border: #2E2E2E;--border-light: #262626;--accent: #6BAF6D;--accent-hover: #5B9A5D;--accent-light: rgba(107, 175, 109, .15);--link: #60A5FA;--link-hover: #93C5FD;--green: #34D399;--green-light: rgba(52, 211, 153, .15);--red: #F87171;--red-light: rgba(248, 113, 113, .15);--yellow: #6BAF6D;--yellow-light: rgba(107, 175, 109, .15);--purple: #A78BFA;--purple-light: rgba(167, 139, 250, .15);--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--shadow: 0 1px 3px 0 rgb(0 0 0 / .3), 0 1px 2px -1px rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .3), 0 2px 4px -2px rgb(0 0 0 / .3);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .3), 0 4px 6px -4px rgb(0 0 0 / .3)}.site-logo img{border-radius:5px}.logo-themed .logo-light{display:block}.logo-themed .logo-dark,[data-theme=dark] .logo-themed .logo-light{display:none}[data-theme=dark] .logo-themed .logo-dark{display:block}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}*::-webkit-scrollbar{width:8px;height:8px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--radius-full)}*::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25;color:var(--text-primary)}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}h5{font-size:1rem}h6{font-size:.875rem}p{color:var(--text-secondary);margin-bottom:var(--space-4)}a{color:var(--link);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--link-hover)}code{font-family:var(--font-mono);font-size:.875em;background:var(--bg-tertiary);padding:.125em .375em;border-radius:var(--radius-sm)}.container{width:100%;max-width:var(--content-xl);margin:0 auto;padding:0 var(--space-6)}.container-sm{max-width:var(--content-sm)}.container-md{max-width:var(--content-md)}.container-lg{max-width:var(--content-lg)}.section{padding:var(--space-16) 0}.section-sm{padding:var(--space-8) 0}.site-header{position:sticky;top:0;z-index:100;background:var(--bg-primary);border-bottom:1px solid var(--border);backdrop-filter:blur(8px)}.nav{display:flex;align-items:center;justify-content:space-between;height:64px}.nav-logo{display:flex;align-items:center;gap:var(--space-2);color:var(--text-primary);font-weight:600;font-size:1.125rem;text-decoration:none}.nav-logo-icon{width:28px;height:28px;color:var(--accent)}.nav-links{display:flex;align-items:center;gap:var(--space-6)}.nav-link{font-size:.9375rem;color:var(--text-secondary);text-decoration:none;transition:color var(--transition-fast)}.nav-link:hover{color:var(--text-primary)}.nav-link.active{color:var(--accent)}.nav-actions{display:flex;align-items:center;gap:var(--space-3)}.nav-mobile-toggle{display:none}.nav-mobile-menu{display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-4) 0;border-top:1px solid var(--border)}.nav-mobile-link{display:block;padding:var(--space-3) 0;color:var(--text-secondary);text-decoration:none;font-size:.9375rem}.nav-mobile-link:hover,.nav-mobile-link.active{color:var(--text-primary)}.nav-mobile-link.active{color:var(--accent)}.nav-mobile-divider{border:none;border-top:1px solid var(--border);margin:var(--space-3) 0}@media(max-width:768px){.nav-links,.nav-actions .btn{display:none}.nav-mobile-toggle{display:flex}}.site-footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:var(--space-12) 0 var(--space-8);margin-top:var(--space-16)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-8);margin-bottom:var(--space-8)}.footer-brand{max-width:280px}.footer-logo{display:flex;align-items:center;gap:var(--space-2);color:var(--text-primary);font-weight:600;text-decoration:none;margin-bottom:var(--space-3)}.footer-logo-icon{width:24px;height:24px;color:var(--accent)}.footer-tagline{font-size:.875rem;color:var(--text-secondary);margin:0}.footer-column h4,.footer-heading{font-size:.875rem;font-weight:600;color:var(--text-primary);margin-bottom:var(--space-4)}.footer-links{list-style:none;padding:0;margin:0}.footer-links li{margin-bottom:var(--space-2)}.footer-links a{font-size:.875rem;color:var(--text-secondary);text-decoration:none;transition:color var(--transition-fast)}.footer-links a:hover{color:var(--text-primary)}.footer-bottom,.footer-content{display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-6);border-top:1px solid var(--border);font-size:.875rem;color:var(--text-muted)}.footer-bottom p,.footer-content p{margin:0}.footer-text{font-size:.875rem;color:var(--text-muted);margin:0}.footer-business{margin:var(--space-1) 0 0;font-size:.8125rem;color:var(--text-muted)}.footer-copyright{margin:0}@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}.footer-brand{grid-column:1 / -1;max-width:none}.footer-bottom,.footer-content{flex-direction:column;gap:var(--space-2);text-align:center}}@media(max-width:480px){.footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-4)}.footer-heading{font-size:.75rem;margin-bottom:var(--space-2)}.footer-links a{font-size:.8125rem}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-family:var(--font-sans);font-size:.9375rem;font-weight:500;line-height:1;text-decoration:none;border:none;border-radius:var(--radius);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover)}.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover:not(:disabled){background:var(--border)}.btn-outline{background:transparent;color:var(--text-primary);border:1px solid var(--border)}.btn-outline:hover:not(:disabled){background:var(--bg-tertiary)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary)}.btn-link{background:transparent;color:var(--link);padding:0}.btn-link:hover:not(:disabled){color:var(--link-hover);text-decoration:underline}.btn-sm{padding:var(--space-2) var(--space-3);font-size:.8125rem}.btn-lg{padding:var(--space-4) var(--space-6);font-size:1rem}.btn-icon{padding:var(--space-2);background:transparent;color:var(--text-muted);border:none;border-radius:var(--radius);cursor:pointer;transition:all var(--transition-fast)}.btn-icon:hover:not(:disabled){background:var(--bg-tertiary);color:var(--text-primary)}.card{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6)}.card-elevated{box-shadow:var(--shadow-md);border:none}.card-interactive{transition:all var(--transition)}.card-interactive:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}.code-block{position:relative;background:var(--bg-code);border-radius:var(--radius-md);padding:var(--space-4);overflow-x:auto}.code-block code{display:block;color:#e5e7eb;background:transparent;padding:0;font-size:.875rem;line-height:1.7}.code-block .btn-copy{position:absolute;top:var(--space-2);right:var(--space-2);background:#ffffff1a;color:#ffffffb3;opacity:0;transition:opacity var(--transition-fast)}.code-block:hover .btn-copy{opacity:1}.code-block .btn-copy:hover{background:#fff3;color:#fff}.code-inline{background:var(--bg-code);color:#e5e7eb;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.875rem}.input{width:100%;padding:var(--space-3) var(--space-4);font-family:var(--font-sans);font-size:1rem;color:var(--text-primary);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}.input::placeholder{color:var(--text-muted)}.input-mono{font-family:var(--font-mono)}.label{display:block;font-size:.875rem;font-weight:500;color:var(--text-primary);margin-bottom:var(--space-2)}.checkbox-label{display:flex;align-items:center;gap:var(--space-2);font-size:.875rem;color:var(--text-secondary);cursor:pointer}.checkbox-label input[type=checkbox]{width:1rem;height:1rem;accent-color:var(--accent);cursor:pointer}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-3);font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.025em;border-radius:var(--radius-full)}.badge-default{background:var(--bg-tertiary);color:var(--text-secondary)}.badge-success{background:var(--green-light);color:var(--green)}.badge-warning{background:var(--yellow-light);color:var(--yellow)}.badge-error{background:var(--red-light);color:var(--red)}.badge-purple{background:var(--purple-light);color:var(--purple)}.table-container{overflow-x:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:var(--space-3) var(--space-4);text-align:left;border-bottom:1px solid var(--border)}.table th{font-size:.75rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;background:var(--bg-secondary)}.table td{font-size:.875rem}.table tbody tr:hover{background:var(--bg-secondary)}.icon{width:1rem;height:1rem;flex-shrink:0}.icon-sm{width:.875rem;height:.875rem}.icon-lg{width:1.25rem;height:1.25rem}.icon-xl{width:1.5rem;height:1.5rem}.toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:1000;display:flex;flex-direction:column;gap:var(--space-2)}.toast{padding:var(--space-3) var(--space-4);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:.875rem;animation:toast-slide-in .3s ease}.toast-success{border-color:var(--green);color:var(--green)}.toast-error{border-color:var(--red);color:var(--red)}@keyframes toast-slide-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-muted{color:var(--text-muted)}.text-accent{color:var(--accent)}.text-success{color:var(--green)}.text-error{color:var(--red)}.text-warning{color:var(--yellow)}.bg-primary{background-color:var(--bg-primary)}.bg-secondary{background-color:var(--bg-secondary)}.bg-tertiary{background-color:var(--bg-tertiary)}.font-mono{font-family:var(--font-mono)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.gap-8{gap:var(--space-8)}.hidden{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-fade-in{animation:fade-in .3s ease}.animate-slide-up{animation:slide-up .3s ease}.animate-spin{animation:spin 1s linear infinite}.floating-buttons{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:999;display:flex;flex-direction:column;gap:var(--space-3)}.floating-contact{position:relative;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);color:#fff;text-decoration:none;font-size:.875rem;font-weight:500;border-radius:var(--radius-full);transition:all var(--transition)}.floating-telegram{background:#08c;box-shadow:0 4px 12px #08c6}.floating-telegram:hover{background:#0077b5;color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px #0088cc80}.floating-discord{background:#5865f2;box-shadow:0 4px 12px #5865f266}.floating-discord:hover{background:#4752c4;color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px #5865f280}.floating-contact svg{width:20px;height:20px}.floating-contact-text{display:inline}@media(max-width:480px){.floating-contact{padding:var(--space-3);border-radius:50%}.floating-contact-text{display:none}}@media(max-width:768px){:root{--space-6: 1rem;--space-8: 1.5rem;--space-16: 3rem}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}.container{padding:0 var(--space-4)}.toast-container{left:var(--space-4);right:var(--space-4);bottom:var(--space-4)}}@media(max-width:480px){h1{font-size:1.75rem}h2{font-size:1.375rem}.btn{padding:var(--space-3) var(--space-4)}.btn-lg{padding:var(--space-3) var(--space-5)}}.login-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center}.login-modal.active{display:flex}.login-modal-backdrop{position:absolute;inset:0;background:#00000080;backdrop-filter:blur(4px)}.login-modal-content{position:relative;width:100%;max-width:420px;margin:var(--space-4);background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);animation:modal-slide-in .2s ease}@keyframes modal-slide-in{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.login-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--border)}.login-modal-header h3{font-size:1.125rem;font-weight:600;margin:0}.login-modal-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;font-size:1.5rem;line-height:1;color:var(--text-muted);background:transparent;border:none;border-radius:var(--radius);cursor:pointer;transition:all var(--transition-fast)}.login-modal-close:hover{background:var(--bg-tertiary);color:var(--text-primary)}.login-modal-body{padding:var(--space-6)}.login-modal-body .input-group{margin-bottom:var(--space-4)}.login-modal-body .input-group:last-child{margin-bottom:0}.login-modal-error{padding:var(--space-3) var(--space-4);background:var(--red-light);color:var(--red);font-size:.875rem;border-radius:var(--radius);margin-top:var(--space-4);display:none}.login-modal-error.show{display:block}.login-modal-footer{display:flex;justify-content:flex-end;gap:var(--space-3);padding:var(--space-4) var(--space-6);border-top:1px solid var(--border);background:var(--bg-secondary);border-radius:0 0 var(--radius-lg) var(--radius-lg)}.login-btn-loading{display:none}.login-btn-loading.show{display:inline-flex;align-items:center;gap:var(--space-2)}.login-agreement{display:flex;align-items:flex-start;gap:var(--space-2);margin-top:var(--space-4);font-size:.8125rem;color:var(--text-secondary);line-height:1.5}.login-agreement input[type=checkbox]{margin-top:3px;flex-shrink:0;cursor:pointer;accent-color:var(--accent)}.login-agreement a{color:var(--link);text-decoration:underline}.login-agreement a:hover{color:var(--link-hover)}.login-agreement [data-lang-content]{display:none!important}html[data-lang=en] .login-agreement [data-lang-content=en],html:not([data-lang]) .login-agreement [data-lang-content=en]{display:inline!important}html[data-lang=vi] .login-agreement [data-lang-content=vi]{display:inline!important}[data-auth-link]{display:none!important}[data-login-btn]{display:inline-flex}[data-logout-btn]{display:none}html.logged-in [data-auth-link],body.logged-in [data-auth-link]{display:inline-flex!important}html.logged-in [data-login-btn],body.logged-in [data-login-btn]{display:none!important}html.logged-in [data-logout-btn],body.logged-in [data-logout-btn]{display:inline-flex!important}.nav-mobile-menu [data-auth-link]{display:none!important}html.logged-in .nav-mobile-menu [data-auth-link],body.logged-in .nav-mobile-menu [data-auth-link]{display:block!important}.lang-label{font-size:.6875rem;font-weight:600;letter-spacing:.025em}[data-lang-content=en],[data-lang-content=vi]{display:none}html[data-lang=en] [data-lang-content=en],html[data-lang=vi] [data-lang-content=vi]{display:block}html:not([data-lang]) [data-lang-content=en]{display:block}