:root{--color-navy: #102A43;--color-tech-blue: #00A8CC;--color-creative-yellow: #FFC857;--color-success-green: #20A779;--color-bg-light: #F7FAFC;--color-bg-dark: #081826;--color-text: #102A43;--color-text-light: #F7FAFC;--color-text-muted: #486581;--color-border: #D9E2EC;--color-surface: #FFFFFF;--color-surface-alt: #F7FAFC;--color-primary: #00A8CC;--color-primary-dark: #007EA0;--color-accent: #FFC857;--color-success: #20A779;--color-danger: #E5484D;--color-warning: #FFC857;--font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;--font-size-base: 16px;--line-height-base: 1.6;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2.5rem;--space-2xl: 4rem;--space-3xl: 6rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(16, 42, 67, .08);--shadow-md: 0 4px 12px rgba(16, 42, 67, .1);--shadow-lg: 0 12px 32px rgba(16, 42, 67, .14);--max-width: 1200px;--header-height: 64px;--transition-fast: .15s ease;--transition-base: .25s ease}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:var(--font-size-base);scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);line-height:var(--line-height-base);color:var(--color-text);background:var(--color-bg-light);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;top:-100px;left:0;background:var(--color-tech-blue);color:#fff;padding:var(--space-md) var(--space-lg);z-index:9999;border-radius:0 0 var(--radius-md) 0;font-weight:600;transition:top var(--transition-fast)}.skip-link:focus{top:0}:focus-visible{outline:3px solid var(--color-tech-blue);outline-offset:2px;border-radius:var(--radius-sm)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.25;color:var(--color-navy)}h1{font-size:clamp(1.75rem,4vw,2.75rem)}h2{font-size:clamp(1.5rem,3vw,2.25rem)}h3{font-size:clamp(1.25rem,2.5vw,1.75rem)}h4{font-size:1.25rem}p{margin-bottom:var(--space-md)}a{color:var(--color-tech-blue);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-dark)}code,pre{font-family:var(--font-mono);font-size:.9em}code{background:var(--color-surface-alt);padding:.15em .4em;border-radius:var(--radius-sm);color:var(--color-navy)}pre{background:var(--color-bg-dark);color:var(--color-bg-light);padding:var(--space-lg);border-radius:var(--radius-md);overflow-x:auto}pre code{background:none;padding:0;color:inherit}.container{max-width:var(--max-width);margin:0 auto;padding:0 var(--space-lg)}.section{padding:var(--space-3xl) 0}.section--alt{background:var(--color-surface)}.section--dark{background:var(--color-bg-dark);color:var(--color-text-light)}.section--dark h1,.section--dark h2,.section--dark h3{color:var(--color-text-light)}.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);border-radius:var(--radius-full);font-weight:600;font-size:1rem;border:2px solid transparent;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;line-height:1}.btn--primary{background:var(--color-tech-blue);color:#fff}.btn--primary:hover{background:var(--color-primary-dark);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn--secondary{background:transparent;color:var(--color-tech-blue);border-color:var(--color-tech-blue)}.btn--secondary:hover{background:var(--color-tech-blue);color:#fff}.btn--accent{background:var(--color-creative-yellow);color:var(--color-navy)}.btn--accent:hover{background:#e6b04d;color:var(--color-navy)}.btn--ghost{background:transparent;color:var(--color-text);border-color:var(--color-border)}.btn--ghost:hover{border-color:var(--color-tech-blue);color:var(--color-tech-blue)}.btn--lg{padding:var(--space-lg) var(--space-2xl);font-size:1.1rem}.btn--sm{padding:var(--space-sm) var(--space-md);font-size:.875rem}.card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-xl);box-shadow:var(--shadow-sm);transition:box-shadow var(--transition-base),transform var(--transition-base);border:1px solid var(--color-border)}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card--dark{background:var(--color-navy);color:var(--color-text-light);border-color:var(--color-bg-dark)}.grid{display:grid;gap:var(--space-lg)}.grid--2{grid-template-columns:repeat(2,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}@media (max-width: 900px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}.badge{display:inline-flex;align-items:center;padding:.25em .75em;border-radius:var(--radius-full);font-size:.8rem;font-weight:600;background:var(--color-surface-alt);color:var(--color-text-muted)}.badge--blue{background:#00a8cc1f;color:var(--color-tech-blue)}.badge--yellow{background:#ffc8572e;color:#b8860b}.badge--green{background:#20a7791f;color:var(--color-success)}.badge--navy{background:#102a4314;color:var(--color-navy)}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.mt-0{margin-top:0}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mb-0{margin-bottom:0}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.85rem;font-weight:700;color:var(--color-tech-blue);margin-bottom:var(--space-sm)}[data-lang=en] [data-vi],[data-lang=vi] [data-en]{display:none}.lang-toggle{display:inline-flex;align-items:center;gap:0;border:1px solid var(--color-border);border-radius:var(--radius-full);overflow:hidden;background:var(--color-surface)}.lang-toggle button{padding:.35em .8em;border:none;background:transparent;cursor:pointer;font-size:.8rem;font-weight:600;color:var(--color-text-muted);transition:all var(--transition-fast)}.lang-toggle button.active{background:var(--color-tech-blue);color:#fff}.hero{background:linear-gradient(135deg,var(--color-bg-dark) 0%,var(--color-navy) 100%);color:var(--color-text-light);padding:var(--space-3xl) 0;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:-50%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(0,168,204,.15) 0%,transparent 70%);pointer-events:none}.hero h1{color:var(--color-text-light)}.hero p{color:#f7fafcd9;font-size:1.15rem}.code-bracket{font-family:var(--font-mono);color:var(--color-tech-blue);font-weight:700}table{width:100%;border-collapse:collapse;margin:var(--space-lg) 0}th,td{text-align:left;padding:var(--space-md);border-bottom:1px solid var(--color-border)}th{font-weight:700;color:var(--color-navy);background:var(--color-surface-alt)}.footer{background:var(--color-bg-dark);color:#f7fafcb3;padding:var(--space-2xl) 0 var(--space-xl)}.footer a{color:#f7fafcb3}.footer a:hover{color:var(--color-tech-blue)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--space-xl)}@media (max-width: 768px){.footer-grid{grid-template-columns:1fr 1fr}}.nav-mobile-toggle{display:none}@media (max-width: 1024px){.nav-desktop{display:none}.nav-mobile-toggle{display:flex}}.lesson-content{max-width:760px;margin:0 auto}.lesson-content h2{margin-top:var(--space-xl);margin-bottom:var(--space-md)}.lesson-content h3{margin-top:var(--space-lg);margin-bottom:var(--space-sm)}.lesson-content p{margin-bottom:var(--space-md)}.lesson-content ul,.lesson-content ol{margin-bottom:var(--space-md);padding-left:var(--space-xl)}.lesson-content li{margin-bottom:var(--space-sm)}.assessment-question{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-xl);margin-bottom:var(--space-lg)}.assessment-option{display:block;padding:var(--space-md) var(--space-lg);border:2px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-sm);cursor:pointer;transition:all var(--transition-fast)}.assessment-option:hover{border-color:var(--color-tech-blue);background:#00a8cc0d}.assessment-option.selected{border-color:var(--color-tech-blue);background:#00a8cc14}.progress-bar{height:8px;background:var(--color-border);border-radius:var(--radius-full);overflow:hidden}.progress-bar__fill{height:100%;background:var(--color-tech-blue);border-radius:var(--radius-full);transition:width var(--transition-base)}.site-header[data-astro-cid-3ef6ksr2]{position:sticky;top:0;z-index:100;background:#081826f5;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,168,204,.15);height:var(--header-height)}.header-inner[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:var(--space-lg);height:100%}.logo[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;flex-shrink:0}.logo-text[data-astro-cid-3ef6ksr2]{display:flex;align-items:baseline;gap:.25em;line-height:1}.logo-main[data-astro-cid-3ef6ksr2]{font-size:1.1rem;font-weight:800;color:#f7fafc;letter-spacing:-.01em}.logo-main[data-astro-cid-3ef6ksr2] .code-bracket[data-astro-cid-3ef6ksr2]{color:#00a8cc}.logo-sub[data-astro-cid-3ef6ksr2]{font-size:1.1rem;font-weight:700;color:#ffc857}.nav-desktop[data-astro-cid-3ef6ksr2]{flex:1}.nav-list[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:var(--space-xs);list-style:none}.nav-link[data-astro-cid-3ef6ksr2]{display:inline-flex;align-items:center;gap:.3em;padding:.4em .75em;border-radius:var(--radius-full);color:#f7fafccc;font-size:.9rem;font-weight:500;transition:all var(--transition-fast);border:none;background:none;cursor:pointer;text-decoration:none;white-space:nowrap}.nav-link[data-astro-cid-3ef6ksr2]:hover,.nav-link[data-astro-cid-3ef6ksr2][aria-current=page]{color:#f7fafc;background:#00a8cc1f}.nav-dropdown[data-astro-cid-3ef6ksr2]{position:relative}.nav-dropdown-menu[data-astro-cid-3ef6ksr2]{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#102a43;border:1px solid rgba(0,168,204,.2);border-radius:var(--radius-lg);padding:var(--space-sm);list-style:none;min-width:200px;box-shadow:var(--shadow-lg);z-index:200}.nav-dropdown[data-astro-cid-3ef6ksr2]:hover .nav-dropdown-menu[data-astro-cid-3ef6ksr2],.nav-dropdown[data-astro-cid-3ef6ksr2]:focus-within .nav-dropdown-menu[data-astro-cid-3ef6ksr2]{display:block}.nav-dropdown-menu[data-astro-cid-3ef6ksr2] .nav-link[data-astro-cid-3ef6ksr2]{display:block;width:100%;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md)}.header-controls[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:var(--space-md);flex-shrink:0;margin-left:auto}.mobile-menu[data-astro-cid-3ef6ksr2]{background:#102a43;border-top:1px solid rgba(0,168,204,.15);padding:var(--space-md) 0 var(--space-lg);position:absolute;width:100%;top:var(--header-height);left:0}.mobile-menu[data-astro-cid-3ef6ksr2][hidden]{display:none}.mobile-nav-list[data-astro-cid-3ef6ksr2]{list-style:none;padding:0 var(--space-lg)}.mobile-nav-list[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]{display:block;padding:var(--space-md) 0;color:#f7fafcd9;font-weight:500;border-bottom:1px solid rgba(247,250,252,.08);text-decoration:none}.mobile-nav-list[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]:hover{color:#00a8cc}.mobile-cta[data-astro-cid-3ef6ksr2]{padding-top:var(--space-lg)!important;border-bottom:none!important}.footer-logo[data-astro-cid-sz7xmlte]{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;margin-bottom:var(--space-md)}.footer-logo-text[data-astro-cid-sz7xmlte]{font-size:1rem;font-weight:800;color:#f7fafc}.footer-tagline[data-astro-cid-sz7xmlte]{color:#f7fafcbf;font-size:.9rem;line-height:1.6;margin-bottom:var(--space-md)}.footer-meta[data-astro-cid-sz7xmlte]{color:#f7fafc73;font-size:.78rem;line-height:1.5;margin-bottom:var(--space-sm)}.footer-heading[data-astro-cid-sz7xmlte]{color:#f7fafc;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--space-md)}.footer-links[data-astro-cid-sz7xmlte]{list-style:none;display:flex;flex-direction:column;gap:var(--space-sm)}.footer-links[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]{color:#f7fafca6;font-size:.9rem;transition:color var(--transition-fast);text-decoration:none}.footer-links[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]:hover{color:#00a8cc}.footer-bottom[data-astro-cid-sz7xmlte]{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md);margin-top:var(--space-2xl);padding-top:var(--space-lg);border-top:1px solid rgba(247,250,252,.08)}.footer-copyright[data-astro-cid-sz7xmlte]{color:#f7fafc73;font-size:.82rem;margin:0}.footer-badges[data-astro-cid-sz7xmlte]{display:flex;gap:var(--space-sm);flex-wrap:wrap}@media (max-width: 768px){.footer-bottom[data-astro-cid-sz7xmlte]{flex-direction:column;align-items:flex-start}}