[{"data":1,"prerenderedAt":18964},["ShallowReactive",2],{"navigation_docs":3,"-tu-hoc-tailwindcss-customization":420,"-tu-hoc-tailwindcss-customization-surround":18959},[4,153],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Phỏng vấn .NET","i-lucide-briefcase","\u002Fphong-van","1.phong-van",[10,27,66,111,128],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":26},"Tổng quan","i-lucide-compass","\u002Fphong-van\u002Ftong-quan","1.phong-van\u002F1.tong-quan",[16,21],{"title":17,"path":18,"stem":19,"icon":20},"Thị trường HCM","\u002Fphong-van\u002Ftong-quan\u002Fthi-truong","1.phong-van\u002F1.tong-quan\u002F1.thi-truong","i-lucide-trending-up",{"title":22,"path":23,"stem":24,"icon":25},"Lộ trình 7 ngày","\u002Fphong-van\u002Ftong-quan\u002Flo-trinh","1.phong-van\u002F1.tong-quan\u002F2.lo-trinh","i-lucide-calendar-days",false,{"title":22,"icon":25,"path":28,"stem":29,"children":30,"page":26},"\u002Fphong-van\u002Flo-trinh","1.phong-van\u002F2.lo-trinh",[31,36,41,46,51,56,61],{"title":32,"path":33,"stem":34,"icon":35},"Ngày 1 — C# cơ bản","\u002Fphong-van\u002Flo-trinh\u002Fngay-1-csharp-co-ban","1.phong-van\u002F2.lo-trinh\u002F1.ngay-1-csharp-co-ban","i-lucide-1",{"title":37,"path":38,"stem":39,"icon":40},"Ngày 2 — OOP và SOLID","\u002Fphong-van\u002Flo-trinh\u002Fngay-2-oop-solid","1.phong-van\u002F2.lo-trinh\u002F2.ngay-2-oop-solid","i-lucide-2",{"title":42,"path":43,"stem":44,"icon":45},"Ngày 3 — C# nâng cao","\u002Fphong-van\u002Flo-trinh\u002Fngay-3-csharp-nang-cao","1.phong-van\u002F2.lo-trinh\u002F3.ngay-3-csharp-nang-cao","i-lucide-3",{"title":47,"path":48,"stem":49,"icon":50},"Ngày 4 — Database và SQL","\u002Fphong-van\u002Flo-trinh\u002Fngay-4-database-sql","1.phong-van\u002F2.lo-trinh\u002F4.ngay-4-database-sql","i-lucide-4",{"title":52,"path":53,"stem":54,"icon":55},"Ngày 5 — ASP.NET Core và EF Core","\u002Fphong-van\u002Flo-trinh\u002Fngay-5-aspnet-efcore","1.phong-van\u002F2.lo-trinh\u002F5.ngay-5-aspnet-efcore","i-lucide-5",{"title":57,"path":58,"stem":59,"icon":60},"Ngày 6 — DSA coding","\u002Fphong-van\u002Flo-trinh\u002Fngay-6-dsa","1.phong-van\u002F2.lo-trinh\u002F6.ngay-6-dsa","i-lucide-6",{"title":62,"path":63,"stem":64,"icon":65},"Ngày 7 — Mock và HR","\u002Fphong-van\u002Flo-trinh\u002Fngay-7-mock-interview","1.phong-van\u002F2.lo-trinh\u002F7.ngay-7-mock-interview","i-lucide-7",{"title":67,"icon":68,"path":69,"stem":70,"children":71,"page":26},"Ngân hàng câu hỏi","i-lucide-database","\u002Fphong-van\u002Fngan-hang-cau-hoi","1.phong-van\u002F3.ngan-hang-cau-hoi",[72,77,82,87,92,97,102,107],{"title":73,"path":74,"stem":75,"icon":76},"C# (60+ câu)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Fcsharp","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F1.csharp","i-lucide-hash",{"title":78,"path":79,"stem":80,"icon":81},"OOP và SOLID (40+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Foop","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F2.oop","i-lucide-shapes",{"title":83,"path":84,"stem":85,"icon":86},"SQL (40+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Fsql","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F3.sql","i-lucide-database-zap",{"title":88,"path":89,"stem":90,"icon":91},"ASP.NET và EF (50+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Faspnet-ef","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F4.aspnet-ef","i-lucide-server",{"title":93,"path":94,"stem":95,"icon":96},"DSA và Coding (30+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Fdsa-coding","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F5.dsa-coding","i-lucide-binary",{"title":98,"path":99,"stem":100,"icon":101},"HR và Soft skill (25+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Fhr-behavior","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F6.hr-behavior","i-lucide-users",{"title":103,"path":104,"stem":105,"icon":106},"Design Pattern (55+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Fdesign-pattern","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F7.design-pattern","i-lucide-puzzle",{"title":108,"path":109,"stem":110,"icon":91},"ASP.NET MVC và Web API","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Faspnet-mvc-webapi","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F8.aspnet-mvc-webapi",{"title":112,"itle":113,"icon":114,"path":115,"stem":116,"children":117,"page":26},"Tai Lieu","Tài liệu và Cheat sheet","i-lucide-book-marked","\u002Fphong-van\u002Ftai-lieu","1.phong-van\u002F4.tai-lieu",[118,123],{"title":119,"path":120,"stem":121,"icon":122},"Cheat Sheet","\u002Fphong-van\u002Ftai-lieu\u002Fcheatsheet","1.phong-van\u002F4.tai-lieu\u002F1.cheatsheet","i-lucide-clipboard-list",{"title":124,"path":125,"stem":126,"icon":127},"Nguồn tham khảo","\u002Fphong-van\u002Ftai-lieu\u002Fnguon","1.phong-van\u002F4.tai-lieu\u002F2.nguon","i-lucide-link",{"title":129,"icon":130,"path":131,"stem":132,"children":133,"page":26},"Phỏng vấn English","i-lucide-globe","\u002Fphong-van\u002Fenglish-interview","1.phong-van\u002F5.english-interview",[134,138,143,148],{"title":135,"path":136,"stem":137,"icon":130},"Tổng quan English","\u002Fphong-van\u002Fenglish-interview\u002Ftong-quan","1.phong-van\u002F5.english-interview\u002F1.tong-quan",{"title":139,"path":140,"stem":141,"icon":142},"Vocabulary","\u002Fphong-van\u002Fenglish-interview\u002Fvocabulary","1.phong-van\u002F5.english-interview\u002F2.vocabulary","i-lucide-book-a",{"title":144,"path":145,"stem":146,"icon":147},"Technical Q và A (EN)","\u002Fphong-van\u002Fenglish-interview\u002Ftechnical-en","1.phong-van\u002F5.english-interview\u002F3.technical-en","i-lucide-code",{"title":149,"path":150,"stem":151,"icon":152},"Behavioral (EN)","\u002Fphong-van\u002Fenglish-interview\u002Fbehavioral-en","1.phong-van\u002F5.english-interview\u002F4.behavioral-en","i-lucide-message-square-text",{"title":154,"icon":155,"path":156,"stem":157,"children":158},"Tự học","i-lucide-graduation-cap","\u002Ftu-hoc","2.tu-hoc",[159,161,287,310,333,357,384],{"title":154,"path":156,"stem":160,"icon":155},"2.tu-hoc\u002Findex",{"title":162,"icon":68,"path":163,"stem":164,"children":165},"Database","\u002Ftu-hoc\u002Fdatabase","2.tu-hoc\u002F1.database\u002Findex",[166,167,197,222,243,248],{"title":162,"path":163,"stem":164,"icon":68},{"title":168,"icon":91,"path":169,"stem":170,"children":171,"page":26},"SQL Server","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server","2.tu-hoc\u002F1.database\u002F2.sql-server",[172,177,182,187,192],{"title":173,"path":174,"stem":175,"icon":176},"1. Giới thiệu và Cài đặt","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server\u002Fgioi-thieu-cai-dat","2.tu-hoc\u002F1.database\u002F2.sql-server\u002F1.gioi-thieu-cai-dat","i-lucide-play-circle",{"title":178,"path":179,"stem":180,"icon":181},"2. Cú pháp cơ bản","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server\u002Fcu-phap-co-ban","2.tu-hoc\u002F1.database\u002F2.sql-server\u002F2.cu-phap-co-ban","i-lucide-code-2",{"title":183,"path":184,"stem":185,"icon":186},"3. Truy vấn nâng cao","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server\u002Ftruy-van-nang-cao","2.tu-hoc\u002F1.database\u002F2.sql-server\u002F3.truy-van-nang-cao","i-lucide-git-merge",{"title":188,"path":189,"stem":190,"icon":191},"4. Đặc thù và Performance","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server\u002Fdac-thu-performance","2.tu-hoc\u002F1.database\u002F2.sql-server\u002F4.dac-thu-performance","i-lucide-gauge",{"title":193,"path":194,"stem":195,"icon":196},"5. Q và A phỏng vấn","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server\u002Fcau-hoi-phong-van","2.tu-hoc\u002F1.database\u002F2.sql-server\u002F5.cau-hoi-phong-van","i-lucide-message-circle-question",{"title":198,"icon":199,"path":200,"stem":201,"children":202,"page":26},"PostgreSQL","i-simple-icons-postgresql","\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql","2.tu-hoc\u002F1.database\u002F3.postgresql",[203,206,209,212,215,218],{"title":173,"path":204,"stem":205,"icon":176},"\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Fgioi-thieu-cai-dat","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F1.gioi-thieu-cai-dat",{"title":178,"path":207,"stem":208,"icon":181},"\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Fcu-phap-co-ban","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F2.cu-phap-co-ban",{"title":183,"path":210,"stem":211,"icon":186},"\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Ftruy-van-nang-cao","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F3.truy-van-nang-cao",{"title":188,"path":213,"stem":214,"icon":191},"\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Fdac-thu-performance","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F4.dac-thu-performance",{"title":193,"path":216,"stem":217,"icon":196},"\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Fcau-hoi-phong-van","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F5.cau-hoi-phong-van",{"title":219,"path":220,"stem":221,"icon":96},"6. Tích hợp C# và Postgres","\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Ftich-hop-csharp","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F6.tich-hop-csharp",{"title":223,"icon":224,"path":225,"stem":226,"children":227,"page":26},"MySQL","i-simple-icons-mysql","\u002Ftu-hoc\u002Fdatabase\u002Fmysql","2.tu-hoc\u002F1.database\u002F4.mysql",[228,231,234,237,240],{"title":173,"path":229,"stem":230,"icon":176},"\u002Ftu-hoc\u002Fdatabase\u002Fmysql\u002Fgioi-thieu-cai-dat","2.tu-hoc\u002F1.database\u002F4.mysql\u002F1.gioi-thieu-cai-dat",{"title":178,"path":232,"stem":233,"icon":181},"\u002Ftu-hoc\u002Fdatabase\u002Fmysql\u002Fcu-phap-co-ban","2.tu-hoc\u002F1.database\u002F4.mysql\u002F2.cu-phap-co-ban",{"title":183,"path":235,"stem":236,"icon":186},"\u002Ftu-hoc\u002Fdatabase\u002Fmysql\u002Ftruy-van-nang-cao","2.tu-hoc\u002F1.database\u002F4.mysql\u002F3.truy-van-nang-cao",{"title":188,"path":238,"stem":239,"icon":191},"\u002Ftu-hoc\u002Fdatabase\u002Fmysql\u002Fdac-thu-performance","2.tu-hoc\u002F1.database\u002F4.mysql\u002F4.dac-thu-performance",{"title":193,"path":241,"stem":242,"icon":196},"\u002Ftu-hoc\u002Fdatabase\u002Fmysql\u002Fcau-hoi-phong-van","2.tu-hoc\u002F1.database\u002F4.mysql\u002F5.cau-hoi-phong-van",{"title":244,"path":245,"stem":246,"icon":247},"So sánh 3 RDBMS","\u002Ftu-hoc\u002Fdatabase\u002Fso-sanh","2.tu-hoc\u002F1.database\u002F5.so-sanh","i-lucide-columns-3",{"title":249,"path":250,"stem":251,"children":252,"icon":254},"Supabase (BaaS)","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase","2.tu-hoc\u002F1.database\u002F6.supabase\u002Findex",[253,255,259,264,269,274,278,283],{"title":249,"path":250,"stem":251,"icon":254},"i-simple-icons-supabase",{"title":256,"path":257,"stem":258,"icon":68},"1. Database","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Fdatabase","2.tu-hoc\u002F1.database\u002F6.supabase\u002F1.database",{"title":260,"path":261,"stem":262,"icon":263},"2. Authentication","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Fauthentication","2.tu-hoc\u002F1.database\u002F6.supabase\u002F2.authentication","i-lucide-key",{"title":265,"path":266,"stem":267,"icon":268},"3. Storage & Realtime","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Fstorage-realtime","2.tu-hoc\u002F1.database\u002F6.supabase\u002F3.storage-realtime","i-lucide-zap",{"title":270,"path":271,"stem":272,"icon":273},"4. Edge Functions & AI","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Ffunctions-ai","2.tu-hoc\u002F1.database\u002F6.supabase\u002F4.functions-ai","i-lucide-brain",{"title":275,"path":276,"stem":277,"icon":181},"5. API & SDKs","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Fapi-sdk","2.tu-hoc\u002F1.database\u002F6.supabase\u002F5.api-sdk",{"title":279,"path":280,"stem":281,"icon":282},"6. Platform & Deploy","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Fplatform-deploy","2.tu-hoc\u002F1.database\u002F6.supabase\u002F6.platform-deploy","i-lucide-cloud",{"title":284,"path":285,"stem":286,"icon":196},"7. Interview & Q&A","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Finterview","2.tu-hoc\u002F1.database\u002F6.supabase\u002F7.interview",{"title":288,"icon":289,"path":290,"stem":291,"children":292},"TypeScript","i-simple-icons-typescript","\u002Ftu-hoc\u002Ftypescript","2.tu-hoc\u002F2.typescript\u002Findex",[293,294,297,301,306],{"title":288,"path":290,"stem":291,"icon":289},{"title":173,"path":295,"stem":296,"icon":176},"\u002Ftu-hoc\u002Ftypescript\u002Fgioi-thieu-cai-dat","2.tu-hoc\u002F2.typescript\u002F1.gioi-thieu-cai-dat",{"title":298,"path":299,"stem":300,"icon":81},"2. Type System","\u002Ftu-hoc\u002Ftypescript\u002Ftype-system","2.tu-hoc\u002F2.typescript\u002F2.type-system",{"title":302,"path":303,"stem":304,"icon":305},"3. Advanced types","\u002Ftu-hoc\u002Ftypescript\u002Fadvanced-types","2.tu-hoc\u002F2.typescript\u002F3.advanced-types","i-lucide-braces",{"title":307,"path":308,"stem":309,"icon":196},"4. Q và A phỏng vấn","\u002Ftu-hoc\u002Ftypescript\u002Fcau-hoi-phong-van","2.tu-hoc\u002F2.typescript\u002F4.cau-hoi-phong-van",{"title":311,"icon":81,"path":312,"stem":313,"children":314},"OOP","\u002Ftu-hoc\u002Foop","2.tu-hoc\u002F3.oop\u002Findex",[315,316,321,326,330],{"title":311,"path":312,"stem":313,"icon":81},{"title":317,"path":318,"stem":319,"icon":320},"1. Bốn tính chất","\u002Ftu-hoc\u002Foop\u002F4-tinh-chat","2.tu-hoc\u002F3.oop\u002F1.4-tinh-chat","i-lucide-circle-dot",{"title":322,"path":323,"stem":324,"icon":325},"2. SOLID","\u002Ftu-hoc\u002Foop\u002Fsolid","2.tu-hoc\u002F3.oop\u002F2.solid","i-lucide-shield",{"title":327,"path":328,"stem":329,"icon":106},"3. Design Pattern","\u002Ftu-hoc\u002Foop\u002Fdesign-pattern","2.tu-hoc\u002F3.oop\u002F3.design-pattern",{"title":307,"path":331,"stem":332,"icon":196},"\u002Ftu-hoc\u002Foop\u002Fcau-hoi-phong-van","2.tu-hoc\u002F3.oop\u002F4.cau-hoi-phong-van",{"title":334,"icon":305,"path":335,"stem":336,"children":337},"Generic","\u002Ftu-hoc\u002Fgeneric","2.tu-hoc\u002F4.generic\u002Findex",[338,339,344,349,354],{"title":334,"path":335,"stem":336,"icon":305},{"title":340,"path":341,"stem":342,"icon":343},"1. Khái niệm và cú pháp","\u002Ftu-hoc\u002Fgeneric\u002Fkhai-niem","2.tu-hoc\u002F4.generic\u002F1.khai-niem","i-lucide-book",{"title":345,"path":346,"stem":347,"icon":348},"2. Constraint và Variance","\u002Ftu-hoc\u002Fgeneric\u002Fconstraint-variance","2.tu-hoc\u002F4.generic\u002F2.constraint-variance","i-lucide-filter",{"title":350,"path":351,"stem":352,"icon":353},"3. C# vs TS","\u002Ftu-hoc\u002Fgeneric\u002Fso-sanh","2.tu-hoc\u002F4.generic\u002F3.so-sanh","i-lucide-git-compare",{"title":307,"path":355,"stem":356,"icon":196},"\u002Ftu-hoc\u002Fgeneric\u002Fcau-hoi-phong-van","2.tu-hoc\u002F4.generic\u002F4.cau-hoi-phong-van",{"title":358,"icon":359,"path":360,"stem":361,"children":362},"Nuxt 4","i-simple-icons-nuxt","\u002Ftu-hoc\u002Fnuxt-4","2.tu-hoc\u002F5.nuxt-4\u002Findex",[363,364,367,372,376,379],{"title":358,"path":360,"stem":361,"icon":359},{"title":173,"path":365,"stem":366,"icon":176},"\u002Ftu-hoc\u002Fnuxt-4\u002Fgioi-thieu-cai-dat","2.tu-hoc\u002F5.nuxt-4\u002F1.gioi-thieu-cai-dat",{"title":368,"path":369,"stem":370,"icon":371},"2. Routing và Rendering","\u002Ftu-hoc\u002Fnuxt-4\u002Frouting-rendering","2.tu-hoc\u002F5.nuxt-4\u002F2.routing-rendering","i-lucide-route",{"title":373,"path":374,"stem":375,"icon":91},"3. Data và Server","\u002Ftu-hoc\u002Fnuxt-4\u002Fdata-server","2.tu-hoc\u002F5.nuxt-4\u002F3.data-server",{"title":307,"path":377,"stem":378,"icon":196},"\u002Ftu-hoc\u002Fnuxt-4\u002Fcau-hoi-phong-van","2.tu-hoc\u002F5.nuxt-4\u002F4.cau-hoi-phong-van",{"title":380,"path":381,"stem":382,"icon":383},"5. Practical Todo App","\u002Ftu-hoc\u002Fnuxt-4\u002Fpractical-todo-app","2.tu-hoc\u002F5.nuxt-4\u002F5.practical-todo-app","i-lucide-check-square",{"title":385,"path":386,"stem":387,"children":388,"icon":390},"Tailwind CSS","\u002Ftu-hoc\u002Ftailwindcss","2.tu-hoc\u002F6.tailwindcss\u002Findex",[389,391,396,401,406,411,416],{"title":385,"path":386,"stem":387,"icon":390},"i-simple-icons-tailwindcss",{"title":392,"path":393,"stem":394,"icon":395},"1. Layout & Spacing","\u002Ftu-hoc\u002Ftailwindcss\u002Flayout-spacing","2.tu-hoc\u002F6.tailwindcss\u002F1.layout-spacing","i-lucide-layout",{"title":397,"path":398,"stem":399,"icon":400},"2. Typography & Colors","\u002Ftu-hoc\u002Ftailwindcss\u002Ftypography-colors","2.tu-hoc\u002F6.tailwindcss\u002F2.typography-colors","i-lucide-type",{"title":402,"path":403,"stem":404,"icon":405},"3. Interactive & Effects","\u002Ftu-hoc\u002Ftailwindcss\u002Finteractive-effects","2.tu-hoc\u002F6.tailwindcss\u002F3.interactive-effects","i-lucide-sparkles",{"title":407,"path":408,"stem":409,"icon":410},"4. Responsive & Dark Mode","\u002Ftu-hoc\u002Ftailwindcss\u002Fresponsive-darkmode","2.tu-hoc\u002F6.tailwindcss\u002F4.responsive-darkmode","i-lucide-monitor-smartphone",{"title":412,"path":413,"stem":414,"icon":415},"5. Customization & Theme","\u002Ftu-hoc\u002Ftailwindcss\u002Fcustomization","2.tu-hoc\u002F6.tailwindcss\u002F5.customization","i-lucide-settings-2",{"title":417,"path":418,"stem":419,"icon":181},"6. Practical Projects","\u002Ftu-hoc\u002Ftailwindcss\u002Fpractical-projects","2.tu-hoc\u002F6.tailwindcss\u002F6.practical-projects",{"id":421,"title":422,"body":423,"description":18952,"extension":18953,"links":18954,"meta":18955,"navigation":18956,"path":413,"seo":18957,"stem":414,"__hash__":18958},"docs\u002F2.tu-hoc\u002F6.tailwindcss\u002F5.customization.md","Customization, Theme & Configuration",{"type":424,"value":425,"toc":18895},"minimark",[426,431,445,479,484,813,1172,1176,1182,1301,1313,1319,1322,1525,1529,1532,1540,1647,1654,1872,1876,1882,1901,1906,3924,3929,3961,3965,3970,3985,3989,4389,4410,4413,4420,4425,4429,4519,4595,4603,4607,4762,4770,4774,4887,4896,4900,4939,4941,4948,4951,4958,5049,5055,5060,5064,5190,5198,5203,5207,5396,5398,5402,5410,5461,5468,5827,5843,5851,5857,6024,6032,6038,6088,6096,6126,6130,6134,6739,6746,6764,6768,8643,10089,10093,10133,10135,10139,10153,10157,10253,10257,10440,10442,10446,10452,10456,11366,11370,11699,11703,11962,11966,12263,12269,12272,12276,15496,18798,18803,18837,18839,18843,18884,18891],[427,428,430],"h2",{"id":429},"_1-css-first-configuration-v40-paradigm-shift","1. CSS-first Configuration (v4.0 paradigm shift)",[432,433,434,435,439,440,444],"p",{},"Tailwind CSS v4 đánh dấu sự thay đổi ",[436,437,438],"strong",{},"triệt để"," trong cách cấu hình: bỏ file JavaScript ",[441,442,443],"code",{},"tailwind.config.js",", chuyển mọi thứ vào CSS. Đây là paradigm shift quan trọng nhất của v4.",[446,447,450,461],"callout",{"color":448,"icon":449},"warning","i-lucide-star",[432,451,452,453,456,457],{},"⭐ ",[436,454,455],{},"Câu PV:"," ",[458,459,460],"em",{},"\"Tại sao Tailwind chuyển từ JS config sang CSS-first config?\"",[462,463,464],"blockquote",{},[432,465,466,467,470,471,474,475,478],{},"\"Ba lý do chính: ",[436,468,469],{},"(1) Native CSS:"," Token được định nghĩa trong CSS — nơi tự nhiên nhất cho design tokens. ",[436,472,473],{},"(2) Performance:"," Rust engine parse CSS nhanh hơn parse JS config nhiều lần. ",[436,476,477],{},"(3) Interop:"," CSS custom properties có thể dùng ở bất kỳ đâu — JS framework nào cũng đọc được, không lock-in vào Tailwind.\"",[480,481,483],"h3",{"id":482},"_11-so-sánh-old-way-vs-new-way","1.1. So sánh Old Way vs New Way",[485,486,491],"pre",{"className":487,"code":488,"language":489,"meta":490,"style":490},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F === OLD WAY (Tailwind v3) ===\n\u002F\u002F tailwind.config.js\nmodule.exports = {\n theme: {\n extend: {\n colors: {\n brand: {\n light: '#60a5fa',\n DEFAULT: '#3b82f6',\n dark: '#1d4ed8',\n }\n },\n fontFamily: {\n display: ['Inter', 'sans-serif'],\n },\n spacing: {\n '18': '4.5rem',\n '88': '22rem',\n }\n }\n },\n plugins: [\n require('@tailwindcss\u002Ftypography'),\n require('@tailwindcss\u002Fforms'),\n ]\n}\n","js","",[441,492,493,502,508,521,533,543,553,563,584,601,618,624,630,640,674,679,689,711,732,738,744,750,761,783,801,807],{"__ignoreMap":490},[494,495,498],"span",{"class":496,"line":497},"line",1,[494,499,501],{"class":500},"sHwdD","\u002F\u002F === OLD WAY (Tailwind v3) ===\n",[494,503,505],{"class":496,"line":504},2,[494,506,507],{"class":500},"\u002F\u002F tailwind.config.js\n",[494,509,511,515,518],{"class":496,"line":510},3,[494,512,514],{"class":513},"sMK4o","module.exports",[494,516,517],{"class":513}," =",[494,519,520],{"class":513}," {\n",[494,522,524,528,531],{"class":496,"line":523},4,[494,525,527],{"class":526},"swJcz"," theme",[494,529,530],{"class":513},":",[494,532,520],{"class":513},[494,534,536,539,541],{"class":496,"line":535},5,[494,537,538],{"class":526}," extend",[494,540,530],{"class":513},[494,542,520],{"class":513},[494,544,546,549,551],{"class":496,"line":545},6,[494,547,548],{"class":526}," colors",[494,550,530],{"class":513},[494,552,520],{"class":513},[494,554,556,559,561],{"class":496,"line":555},7,[494,557,558],{"class":526}," brand",[494,560,530],{"class":513},[494,562,520],{"class":513},[494,564,566,569,571,574,578,581],{"class":496,"line":565},8,[494,567,568],{"class":526}," light",[494,570,530],{"class":513},[494,572,573],{"class":513}," '",[494,575,577],{"class":576},"sfazB","#60a5fa",[494,579,580],{"class":513},"'",[494,582,583],{"class":513},",\n",[494,585,587,590,592,594,597,599],{"class":496,"line":586},9,[494,588,589],{"class":526}," DEFAULT",[494,591,530],{"class":513},[494,593,573],{"class":513},[494,595,596],{"class":576},"#3b82f6",[494,598,580],{"class":513},[494,600,583],{"class":513},[494,602,604,607,609,611,614,616],{"class":496,"line":603},10,[494,605,606],{"class":526}," dark",[494,608,530],{"class":513},[494,610,573],{"class":513},[494,612,613],{"class":576},"#1d4ed8",[494,615,580],{"class":513},[494,617,583],{"class":513},[494,619,621],{"class":496,"line":620},11,[494,622,623],{"class":513}," }\n",[494,625,627],{"class":496,"line":626},12,[494,628,629],{"class":513}," },\n",[494,631,633,636,638],{"class":496,"line":632},13,[494,634,635],{"class":526}," fontFamily",[494,637,530],{"class":513},[494,639,520],{"class":513},[494,641,643,646,648,652,654,657,659,662,664,667,669,672],{"class":496,"line":642},14,[494,644,645],{"class":526}," display",[494,647,530],{"class":513},[494,649,651],{"class":650},"sTEyZ"," [",[494,653,580],{"class":513},[494,655,656],{"class":576},"Inter",[494,658,580],{"class":513},[494,660,661],{"class":513},",",[494,663,573],{"class":513},[494,665,666],{"class":576},"sans-serif",[494,668,580],{"class":513},[494,670,671],{"class":650},"]",[494,673,583],{"class":513},[494,675,677],{"class":496,"line":676},15,[494,678,629],{"class":513},[494,680,682,685,687],{"class":496,"line":681},16,[494,683,684],{"class":526}," spacing",[494,686,530],{"class":513},[494,688,520],{"class":513},[494,690,692,695,698,700,702,704,707,709],{"class":496,"line":691},17,[494,693,694],{"class":513}," '",[494,696,697],{"class":526},"18",[494,699,580],{"class":513},[494,701,530],{"class":513},[494,703,573],{"class":513},[494,705,706],{"class":576},"4.5rem",[494,708,580],{"class":513},[494,710,583],{"class":513},[494,712,714,716,719,721,723,725,728,730],{"class":496,"line":713},18,[494,715,694],{"class":513},[494,717,718],{"class":526},"88",[494,720,580],{"class":513},[494,722,530],{"class":513},[494,724,573],{"class":513},[494,726,727],{"class":576},"22rem",[494,729,580],{"class":513},[494,731,583],{"class":513},[494,733,735],{"class":496,"line":734},19,[494,736,737],{"class":513}," }\n",[494,739,741],{"class":496,"line":740},20,[494,742,743],{"class":513}," }\n",[494,745,747],{"class":496,"line":746},21,[494,748,749],{"class":513}," },\n",[494,751,753,756,758],{"class":496,"line":752},22,[494,754,755],{"class":526}," plugins",[494,757,530],{"class":513},[494,759,760],{"class":650}," [\n",[494,762,764,768,771,773,776,778,781],{"class":496,"line":763},23,[494,765,767],{"class":766},"s2Zo4"," require",[494,769,770],{"class":650},"(",[494,772,580],{"class":513},[494,774,775],{"class":576},"@tailwindcss\u002Ftypography",[494,777,580],{"class":513},[494,779,780],{"class":650},")",[494,782,583],{"class":513},[494,784,786,788,790,792,795,797,799],{"class":496,"line":785},24,[494,787,767],{"class":766},[494,789,770],{"class":650},[494,791,580],{"class":513},[494,793,794],{"class":576},"@tailwindcss\u002Fforms",[494,796,580],{"class":513},[494,798,780],{"class":650},[494,800,583],{"class":513},[494,802,804],{"class":496,"line":803},25,[494,805,806],{"class":650}," ]\n",[494,808,810],{"class":496,"line":809},26,[494,811,812],{"class":513},"}\n",[485,814,818],{"className":815,"code":816,"language":817,"meta":490,"style":490},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* === NEW WAY (Tailwind v4) === *\u002F\n\u002F* main.css *\u002F\n@import \"tailwindcss\";\n@plugin \"@tailwindcss\u002Ftypography\";\n@plugin \"@tailwindcss\u002Fforms\";\n\n@theme {\n --color-brand-light: #60a5fa;\n --color-brand: #3b82f6;\n --color-brand-dark: #1d4ed8;\n\n --color-brand-50: oklch(0.97 0.01 250);\n --color-brand-100: oklch(0.93 0.03 250);\n --color-brand-200: oklch(0.85 0.06 250);\n --color-brand-300: oklch(0.75 0.10 250);\n --color-brand-400: oklch(0.65 0.15 250);\n --color-brand-500: oklch(0.55 0.20 250);\n --color-brand-600: oklch(0.48 0.18 250);\n --color-brand-700: oklch(0.40 0.15 250);\n --color-brand-800: oklch(0.30 0.12 250);\n --color-brand-900: oklch(0.22 0.08 250);\n --color-brand-950: oklch(0.15 0.05 250);\n\n --font-display: \"Inter\", sans-serif;\n --font-mono: \"JetBrains Mono\", monospace;\n\n --spacing-18: 4.5rem;\n --spacing-88: 22rem;\n}\n","css",[441,819,820,825,830,848,858,867,873,880,891,901,911,915,938,957,976,995,1014,1033,1051,1069,1088,1107,1125,1129,1141,1151,1155,1161,1167],{"__ignoreMap":490},[494,821,822],{"class":496,"line":497},[494,823,824],{"class":500},"\u002F* === NEW WAY (Tailwind v4) === *\u002F\n",[494,826,827],{"class":496,"line":504},[494,828,829],{"class":500},"\u002F* main.css *\u002F\n",[494,831,832,836,839,842,845],{"class":496,"line":510},[494,833,835],{"class":834},"s7zQu","@import",[494,837,838],{"class":513}," \"",[494,840,841],{"class":576},"tailwindcss",[494,843,844],{"class":513},"\"",[494,846,847],{"class":513},";\n",[494,849,850,853,856],{"class":496,"line":523},[494,851,852],{"class":834},"@plugin",[494,854,855],{"class":650}," \"@tailwindcss\u002Ftypography\"",[494,857,847],{"class":513},[494,859,860,862,865],{"class":496,"line":535},[494,861,852],{"class":834},[494,863,864],{"class":650}," \"@tailwindcss\u002Fforms\"",[494,866,847],{"class":513},[494,868,869],{"class":496,"line":545},[494,870,872],{"emptyLinePlaceholder":871},true,"\n",[494,874,875,878],{"class":496,"line":555},[494,876,877],{"class":834},"@theme",[494,879,520],{"class":513},[494,881,882,885,888],{"class":496,"line":565},[494,883,884],{"class":650}," --color-brand-light: ",[494,886,887],{"class":513},"#",[494,889,890],{"class":650},"60a5fa;\n",[494,892,893,896,898],{"class":496,"line":586},[494,894,895],{"class":650}," --color-brand: ",[494,897,887],{"class":513},[494,899,900],{"class":650},"3b82f6;\n",[494,902,903,906,908],{"class":496,"line":603},[494,904,905],{"class":650}," --color-brand-dark: ",[494,907,887],{"class":513},[494,909,910],{"class":650},"1d4ed8;\n",[494,912,913],{"class":496,"line":620},[494,914,872],{"emptyLinePlaceholder":871},[494,916,917,920,923,927,930,932,935],{"class":496,"line":626},[494,918,919],{"class":650}," --color-brand-50: oklch(0",[494,921,922],{"class":513},".",[494,924,926],{"class":925},"sBMFI","97",[494,928,929],{"class":650}," 0",[494,931,922],{"class":513},[494,933,934],{"class":925},"01",[494,936,937],{"class":650}," 250);\n",[494,939,940,943,945,948,950,952,955],{"class":496,"line":632},[494,941,942],{"class":650}," --color-brand-100: oklch(0",[494,944,922],{"class":513},[494,946,947],{"class":925},"93",[494,949,929],{"class":650},[494,951,922],{"class":513},[494,953,954],{"class":925},"03",[494,956,937],{"class":650},[494,958,959,962,964,967,969,971,974],{"class":496,"line":642},[494,960,961],{"class":650}," --color-brand-200: oklch(0",[494,963,922],{"class":513},[494,965,966],{"class":925},"85",[494,968,929],{"class":650},[494,970,922],{"class":513},[494,972,973],{"class":925},"06",[494,975,937],{"class":650},[494,977,978,981,983,986,988,990,993],{"class":496,"line":676},[494,979,980],{"class":650}," --color-brand-300: oklch(0",[494,982,922],{"class":513},[494,984,985],{"class":925},"75",[494,987,929],{"class":650},[494,989,922],{"class":513},[494,991,992],{"class":925},"10",[494,994,937],{"class":650},[494,996,997,1000,1002,1005,1007,1009,1012],{"class":496,"line":681},[494,998,999],{"class":650}," --color-brand-400: oklch(0",[494,1001,922],{"class":513},[494,1003,1004],{"class":925},"65",[494,1006,929],{"class":650},[494,1008,922],{"class":513},[494,1010,1011],{"class":925},"15",[494,1013,937],{"class":650},[494,1015,1016,1019,1021,1024,1026,1028,1031],{"class":496,"line":691},[494,1017,1018],{"class":650}," --color-brand-500: oklch(0",[494,1020,922],{"class":513},[494,1022,1023],{"class":925},"55",[494,1025,929],{"class":650},[494,1027,922],{"class":513},[494,1029,1030],{"class":925},"20",[494,1032,937],{"class":650},[494,1034,1035,1038,1040,1043,1045,1047,1049],{"class":496,"line":713},[494,1036,1037],{"class":650}," --color-brand-600: oklch(0",[494,1039,922],{"class":513},[494,1041,1042],{"class":925},"48",[494,1044,929],{"class":650},[494,1046,922],{"class":513},[494,1048,697],{"class":925},[494,1050,937],{"class":650},[494,1052,1053,1056,1058,1061,1063,1065,1067],{"class":496,"line":734},[494,1054,1055],{"class":650}," --color-brand-700: oklch(0",[494,1057,922],{"class":513},[494,1059,1060],{"class":925},"40",[494,1062,929],{"class":650},[494,1064,922],{"class":513},[494,1066,1011],{"class":925},[494,1068,937],{"class":650},[494,1070,1071,1074,1076,1079,1081,1083,1086],{"class":496,"line":740},[494,1072,1073],{"class":650}," --color-brand-800: oklch(0",[494,1075,922],{"class":513},[494,1077,1078],{"class":925},"30",[494,1080,929],{"class":650},[494,1082,922],{"class":513},[494,1084,1085],{"class":925},"12",[494,1087,937],{"class":650},[494,1089,1090,1093,1095,1098,1100,1102,1105],{"class":496,"line":746},[494,1091,1092],{"class":650}," --color-brand-900: oklch(0",[494,1094,922],{"class":513},[494,1096,1097],{"class":925},"22",[494,1099,929],{"class":650},[494,1101,922],{"class":513},[494,1103,1104],{"class":925},"08",[494,1106,937],{"class":650},[494,1108,1109,1112,1114,1116,1118,1120,1123],{"class":496,"line":752},[494,1110,1111],{"class":650}," --color-brand-950: oklch(0",[494,1113,922],{"class":513},[494,1115,1011],{"class":925},[494,1117,929],{"class":650},[494,1119,922],{"class":513},[494,1121,1122],{"class":925},"05",[494,1124,937],{"class":650},[494,1126,1127],{"class":496,"line":763},[494,1128,872],{"emptyLinePlaceholder":871},[494,1130,1131,1134,1136,1139],{"class":496,"line":785},[494,1132,1133],{"class":650}," --font-display: \"Inter\"",[494,1135,661],{"class":513},[494,1137,1138],{"class":925}," sans-serif",[494,1140,847],{"class":650},[494,1142,1143,1146,1148],{"class":496,"line":803},[494,1144,1145],{"class":650}," --font-mono: \"JetBrains Mono\"",[494,1147,661],{"class":513},[494,1149,1150],{"class":650}," monospace;\n",[494,1152,1153],{"class":496,"line":809},[494,1154,872],{"emptyLinePlaceholder":871},[494,1156,1158],{"class":496,"line":1157},27,[494,1159,1160],{"class":650}," --spacing-18: 4.5rem;\n",[494,1162,1164],{"class":496,"line":1163},28,[494,1165,1166],{"class":650}," --spacing-88: 22rem;\n",[494,1168,1170],{"class":496,"line":1169},29,[494,1171,812],{"class":650},[480,1173,1175],{"id":1174},"_12-cơ-chế-auto-expose-css-variables","1.2. Cơ chế Auto-Expose CSS Variables",[432,1177,1178,1179,1181],{},"Mọi token trong ",[441,1180,877],{}," đều tự động được expose thành CSS custom properties:",[485,1183,1185],{"className":815,"code":1184,"language":817,"meta":490,"style":490},"@theme {\n --color-primary: oklch(0.55 0.2 250);\n --font-display: \"Inter\", sans-serif;\n}\n\n\u002F* Tự động generate: *\u002F\n\u002F* --color-primary: oklch(0.55 0.2 250); *\u002F\n\u002F* --font-display: \"Inter\", sans-serif; *\u002F\n\n\u002F* Bạn có thể dùng ở bất kỳ đâu: *\u002F\n.my-custom-class {\n background-color: var(--color-primary);\n font-family: var(--font-display);\n}\n",[441,1186,1187,1193,1211,1221,1225,1229,1234,1239,1244,1248,1253,1262,1281,1297],{"__ignoreMap":490},[494,1188,1189,1191],{"class":496,"line":497},[494,1190,877],{"class":834},[494,1192,520],{"class":513},[494,1194,1195,1198,1200,1202,1204,1206,1209],{"class":496,"line":504},[494,1196,1197],{"class":650}," --color-primary: oklch(0",[494,1199,922],{"class":513},[494,1201,1023],{"class":925},[494,1203,929],{"class":650},[494,1205,922],{"class":513},[494,1207,1208],{"class":925},"2",[494,1210,937],{"class":650},[494,1212,1213,1215,1217,1219],{"class":496,"line":510},[494,1214,1133],{"class":650},[494,1216,661],{"class":513},[494,1218,1138],{"class":925},[494,1220,847],{"class":650},[494,1222,1223],{"class":496,"line":523},[494,1224,812],{"class":650},[494,1226,1227],{"class":496,"line":535},[494,1228,872],{"emptyLinePlaceholder":871},[494,1230,1231],{"class":496,"line":545},[494,1232,1233],{"class":500},"\u002F* Tự động generate: *\u002F\n",[494,1235,1236],{"class":496,"line":555},[494,1237,1238],{"class":500},"\u002F* --color-primary: oklch(0.55 0.2 250); *\u002F\n",[494,1240,1241],{"class":496,"line":565},[494,1242,1243],{"class":500},"\u002F* --font-display: \"Inter\", sans-serif; *\u002F\n",[494,1245,1246],{"class":496,"line":586},[494,1247,872],{"emptyLinePlaceholder":871},[494,1249,1250],{"class":496,"line":603},[494,1251,1252],{"class":500},"\u002F* Bạn có thể dùng ở bất kỳ đâu: *\u002F\n",[494,1254,1255,1257,1260],{"class":496,"line":620},[494,1256,922],{"class":513},[494,1258,1259],{"class":925},"my-custom-class",[494,1261,520],{"class":513},[494,1263,1264,1268,1270,1273,1275,1278],{"class":496,"line":626},[494,1265,1267],{"class":1266},"sqsOY"," background-color",[494,1269,530],{"class":513},[494,1271,1272],{"class":766}," var",[494,1274,770],{"class":513},[494,1276,1277],{"class":650},"--color-primary",[494,1279,1280],{"class":513},");\n",[494,1282,1283,1286,1288,1290,1292,1295],{"class":496,"line":632},[494,1284,1285],{"class":1266}," font-family",[494,1287,530],{"class":513},[494,1289,1272],{"class":766},[494,1291,770],{"class":513},[494,1293,1294],{"class":650},"--font-display",[494,1296,1280],{"class":513},[494,1298,1299],{"class":496,"line":642},[494,1300,812],{"class":513},[446,1302,1305,1308,1309,1312],{"color":1303,"icon":1304},"primary","i-lucide-lightbulb",[436,1306,1307],{},"Điều này có ý nghĩa gì?"," Bạn có thể dùng design tokens của Tailwind trong bất kỳ ngữ cảnh nào — inline style, CSS module, styled-components, thậm chí trong JavaScript qua ",[441,1310,1311],{},"getComputedStyle()",". Không lock-in vào Tailwind class.",[480,1314,1316,1317],{"id":1315},"_13-namespace-trong-theme","1.3. Namespace Trong ",[441,1318,877],{},[432,1320,1321],{},"Tailwind v4 phân biệt các loại token qua prefix:",[1323,1324,1325,1341],"table",{},[1326,1327,1328],"thead",{},[1329,1330,1331,1335,1338],"tr",{},[1332,1333,1334],"th",{},"Prefix",[1332,1336,1337],{},"Loại token",[1332,1339,1340],{},"Ví dụ",[1342,1343,1344,1360,1375,1390,1405,1420,1435,1450,1465,1480,1495,1510],"tbody",{},[1329,1345,1346,1352,1355],{},[1347,1348,1349],"td",{},[441,1350,1351],{},"--color-*",[1347,1353,1354],{},"Màu sắc",[1347,1356,1357],{},[441,1358,1359],{},"--color-primary: blue",[1329,1361,1362,1367,1370],{},[1347,1363,1364],{},[441,1365,1366],{},"--font-*",[1347,1368,1369],{},"Font family",[1347,1371,1372],{},[441,1373,1374],{},"--font-display: \"Inter\"",[1329,1376,1377,1382,1385],{},[1347,1378,1379],{},[441,1380,1381],{},"--text-*",[1347,1383,1384],{},"Font size + line height",[1347,1386,1387],{},[441,1388,1389],{},"--text-lg: 1.125rem",[1329,1391,1392,1397,1400],{},[1347,1393,1394],{},[441,1395,1396],{},"--font-weight-*",[1347,1398,1399],{},"Font weight",[1347,1401,1402],{},[441,1403,1404],{},"--font-weight-medium: 500",[1329,1406,1407,1412,1415],{},[1347,1408,1409],{},[441,1410,1411],{},"--tracking-*",[1347,1413,1414],{},"Letter spacing",[1347,1416,1417],{},[441,1418,1419],{},"--tracking-wide: 0.025em",[1329,1421,1422,1427,1430],{},[1347,1423,1424],{},[441,1425,1426],{},"--leading-*",[1347,1428,1429],{},"Line height",[1347,1431,1432],{},[441,1433,1434],{},"--leading-relaxed: 1.625",[1329,1436,1437,1442,1445],{},[1347,1438,1439],{},[441,1440,1441],{},"--spacing-*",[1347,1443,1444],{},"Spacing scale",[1347,1446,1447],{},[441,1448,1449],{},"--spacing-18: 4.5rem",[1329,1451,1452,1457,1460],{},[1347,1453,1454],{},[441,1455,1456],{},"--radius-*",[1347,1458,1459],{},"Border radius",[1347,1461,1462],{},[441,1463,1464],{},"--radius-xl: 0.75rem",[1329,1466,1467,1472,1475],{},[1347,1468,1469],{},[441,1470,1471],{},"--shadow-*",[1347,1473,1474],{},"Box shadow",[1347,1476,1477],{},[441,1478,1479],{},"--shadow-card: 0 2px 8px rgba(0,0,0,0.1)",[1329,1481,1482,1487,1490],{},[1347,1483,1484],{},[441,1485,1486],{},"--breakpoint-*",[1347,1488,1489],{},"Breakpoints",[1347,1491,1492],{},[441,1493,1494],{},"--breakpoint-3xl: 120rem",[1329,1496,1497,1502,1505],{},[1347,1498,1499],{},[441,1500,1501],{},"--animate-*",[1347,1503,1504],{},"Animations",[1347,1506,1507],{},[441,1508,1509],{},"--animate-slide-in: slideIn 0.3s ease",[1329,1511,1512,1517,1520],{},[1347,1513,1514],{},[441,1515,1516],{},"--container-*",[1347,1518,1519],{},"Container query breakpoints",[1347,1521,1522],{},[441,1523,1524],{},"--container-md: 28rem",[480,1526,1528],{"id":1527},"_14-oklch-colors-cách-viết-màu-trong-v4","1.4. OKLCH Colors — Cách Viết Màu Trong v4",[432,1530,1531],{},"OKLCH là color space mặc định của Tailwind v4. Cú pháp:",[485,1533,1538],{"className":1534,"code":1536,"language":1537},[1535],"language-text","oklch(L C H)\nL = Lightness (0-1 hoặc 0%-100%)\nC = Chroma (0-0.4, màu càng rực khi C càng cao)\nH = Hue (0-360, góc trên bánh xe màu)\n","text",[441,1539,1536],{"__ignoreMap":490},[485,1541,1543],{"className":815,"code":1542,"language":817,"meta":490,"style":490},"@theme {\n \u002F* OKLCH — cách viết recommended trong v4 *\u002F\n --color-blue-500: oklch(0.62 0.19 255);\n --color-red-500: oklch(0.59 0.21 25);\n --color-green-500: oklch(0.63 0.19 145);\n\n \u002F* Vẫn hỗ trợ HEX, RGB, HSL *\u002F\n --color-legacy: #3b82f6;\n --color-rgb: rgb(59 130 246);\n --color-hsl: hsl(217 91% 60%);\n}\n",[441,1544,1545,1551,1556,1576,1596,1615,1619,1624,1633,1638,1643],{"__ignoreMap":490},[494,1546,1547,1549],{"class":496,"line":497},[494,1548,877],{"class":834},[494,1550,520],{"class":513},[494,1552,1553],{"class":496,"line":504},[494,1554,1555],{"class":500}," \u002F* OKLCH — cách viết recommended trong v4 *\u002F\n",[494,1557,1558,1561,1563,1566,1568,1570,1573],{"class":496,"line":510},[494,1559,1560],{"class":650}," --color-blue-500: oklch(0",[494,1562,922],{"class":513},[494,1564,1565],{"class":925},"62",[494,1567,929],{"class":650},[494,1569,922],{"class":513},[494,1571,1572],{"class":925},"19",[494,1574,1575],{"class":650}," 255);\n",[494,1577,1578,1581,1583,1586,1588,1590,1593],{"class":496,"line":523},[494,1579,1580],{"class":650}," --color-red-500: oklch(0",[494,1582,922],{"class":513},[494,1584,1585],{"class":925},"59",[494,1587,929],{"class":650},[494,1589,922],{"class":513},[494,1591,1592],{"class":925},"21",[494,1594,1595],{"class":650}," 25);\n",[494,1597,1598,1601,1603,1606,1608,1610,1612],{"class":496,"line":535},[494,1599,1600],{"class":650}," --color-green-500: oklch(0",[494,1602,922],{"class":513},[494,1604,1605],{"class":925},"63",[494,1607,929],{"class":650},[494,1609,922],{"class":513},[494,1611,1572],{"class":925},[494,1613,1614],{"class":650}," 145);\n",[494,1616,1617],{"class":496,"line":545},[494,1618,872],{"emptyLinePlaceholder":871},[494,1620,1621],{"class":496,"line":555},[494,1622,1623],{"class":500}," \u002F* Vẫn hỗ trợ HEX, RGB, HSL *\u002F\n",[494,1625,1626,1629,1631],{"class":496,"line":565},[494,1627,1628],{"class":650}," --color-legacy: ",[494,1630,887],{"class":513},[494,1632,900],{"class":650},[494,1634,1635],{"class":496,"line":586},[494,1636,1637],{"class":650}," --color-rgb: rgb(59 130 246);\n",[494,1639,1640],{"class":496,"line":603},[494,1641,1642],{"class":650}," --color-hsl: hsl(217 91% 60%);\n",[494,1644,1645],{"class":496,"line":620},[494,1646,812],{"class":513},[446,1648,1650,1653],{"color":1303,"icon":1649},"i-lucide-palette",[436,1651,1652],{},"Tại sao OKLCH?"," OKLCH có perceptual uniformity — hai màu có cùng Chroma\u002FLightness sẽ trông \"rực rỡ như nhau\" với mắt người, điều mà HSL\u002FsRGB làm không tốt. Điều này giúp tạo color palette nhất quán hơn. Cộng thêm P3 wide gamut — màu rực hơn trên màn hình hiện đại.",[485,1655,1657],{"className":815,"code":1656,"language":817,"meta":490,"style":490},"\u002F* Ví dụ: tạo color scale với OKLCH *\u002F\n@theme {\n \u002F* Brand color scale — chỉ thay đổi Lightness *\u002F\n --color-brand-50: oklch(0.97 0.02 260);\n --color-brand-100: oklch(0.92 0.04 260);\n --color-brand-200: oklch(0.85 0.07 260);\n --color-brand-300: oklch(0.75 0.11 260);\n --color-brand-400: oklch(0.66 0.16 260);\n --color-brand-500: oklch(0.55 0.20 260); \u002F* Base *\u002F\n --color-brand-600: oklch(0.46 0.18 260);\n --color-brand-700: oklch(0.38 0.15 260);\n --color-brand-800: oklch(0.28 0.11 260);\n --color-brand-900: oklch(0.20 0.07 260);\n --color-brand-950: oklch(0.14 0.04 260);\n}\n",[441,1658,1659,1664,1670,1675,1694,1712,1729,1746,1764,1784,1801,1818,1835,1851,1868],{"__ignoreMap":490},[494,1660,1661],{"class":496,"line":497},[494,1662,1663],{"class":500},"\u002F* Ví dụ: tạo color scale với OKLCH *\u002F\n",[494,1665,1666,1668],{"class":496,"line":504},[494,1667,877],{"class":834},[494,1669,520],{"class":513},[494,1671,1672],{"class":496,"line":510},[494,1673,1674],{"class":500}," \u002F* Brand color scale — chỉ thay đổi Lightness *\u002F\n",[494,1676,1677,1680,1682,1684,1686,1688,1691],{"class":496,"line":523},[494,1678,1679],{"class":650}," --color-brand-50: oklch(0",[494,1681,922],{"class":513},[494,1683,926],{"class":925},[494,1685,929],{"class":650},[494,1687,922],{"class":513},[494,1689,1690],{"class":925},"02",[494,1692,1693],{"class":650}," 260);\n",[494,1695,1696,1698,1700,1703,1705,1707,1710],{"class":496,"line":535},[494,1697,942],{"class":650},[494,1699,922],{"class":513},[494,1701,1702],{"class":925},"92",[494,1704,929],{"class":650},[494,1706,922],{"class":513},[494,1708,1709],{"class":925},"04",[494,1711,1693],{"class":650},[494,1713,1714,1716,1718,1720,1722,1724,1727],{"class":496,"line":545},[494,1715,961],{"class":650},[494,1717,922],{"class":513},[494,1719,966],{"class":925},[494,1721,929],{"class":650},[494,1723,922],{"class":513},[494,1725,1726],{"class":925},"07",[494,1728,1693],{"class":650},[494,1730,1731,1733,1735,1737,1739,1741,1744],{"class":496,"line":555},[494,1732,980],{"class":650},[494,1734,922],{"class":513},[494,1736,985],{"class":925},[494,1738,929],{"class":650},[494,1740,922],{"class":513},[494,1742,1743],{"class":925},"11",[494,1745,1693],{"class":650},[494,1747,1748,1750,1752,1755,1757,1759,1762],{"class":496,"line":565},[494,1749,999],{"class":650},[494,1751,922],{"class":513},[494,1753,1754],{"class":925},"66",[494,1756,929],{"class":650},[494,1758,922],{"class":513},[494,1760,1761],{"class":925},"16",[494,1763,1693],{"class":650},[494,1765,1766,1768,1770,1772,1774,1776,1778,1781],{"class":496,"line":586},[494,1767,1018],{"class":650},[494,1769,922],{"class":513},[494,1771,1023],{"class":925},[494,1773,929],{"class":650},[494,1775,922],{"class":513},[494,1777,1030],{"class":925},[494,1779,1780],{"class":650}," 260); ",[494,1782,1783],{"class":500},"\u002F* Base *\u002F\n",[494,1785,1786,1788,1790,1793,1795,1797,1799],{"class":496,"line":603},[494,1787,1037],{"class":650},[494,1789,922],{"class":513},[494,1791,1792],{"class":925},"46",[494,1794,929],{"class":650},[494,1796,922],{"class":513},[494,1798,697],{"class":925},[494,1800,1693],{"class":650},[494,1802,1803,1805,1807,1810,1812,1814,1816],{"class":496,"line":620},[494,1804,1055],{"class":650},[494,1806,922],{"class":513},[494,1808,1809],{"class":925},"38",[494,1811,929],{"class":650},[494,1813,922],{"class":513},[494,1815,1011],{"class":925},[494,1817,1693],{"class":650},[494,1819,1820,1822,1824,1827,1829,1831,1833],{"class":496,"line":626},[494,1821,1073],{"class":650},[494,1823,922],{"class":513},[494,1825,1826],{"class":925},"28",[494,1828,929],{"class":650},[494,1830,922],{"class":513},[494,1832,1743],{"class":925},[494,1834,1693],{"class":650},[494,1836,1837,1839,1841,1843,1845,1847,1849],{"class":496,"line":632},[494,1838,1092],{"class":650},[494,1840,922],{"class":513},[494,1842,1030],{"class":925},[494,1844,929],{"class":650},[494,1846,922],{"class":513},[494,1848,1726],{"class":925},[494,1850,1693],{"class":650},[494,1852,1853,1855,1857,1860,1862,1864,1866],{"class":496,"line":642},[494,1854,1111],{"class":650},[494,1856,922],{"class":513},[494,1858,1859],{"class":925},"14",[494,1861,929],{"class":650},[494,1863,922],{"class":513},[494,1865,1709],{"class":925},[494,1867,1693],{"class":650},[494,1869,1870],{"class":496,"line":676},[494,1871,812],{"class":513},[480,1873,1875],{"id":1874},"_15-bài-tập-1-tạo-complete-brand-theme","1.5. BÀI TẬP 1 — Tạo Complete Brand Theme",[432,1877,1878,1881],{},[436,1879,1880],{},"Yêu cầu:"," Tạo một brand theme hoàn chỉnh cho một startup fintech với:",[1883,1884,1885,1889,1892,1895,1898],"ul",{},[1886,1887,1888],"li",{},"Màu chính (primary): xanh dương đậm",[1886,1890,1891],{},"Màu phụ (secondary): xanh lá",[1886,1893,1894],{},"Accent: cam",[1886,1896,1897],{},"Font: Inter (headings) + system font (body)",[1886,1899,1900],{},"Spacing custom",[432,1902,1903],{},[436,1904,1905],{},"Code đầy đủ:",[485,1907,1909],{"className":815,"code":1908,"language":817,"meta":490,"style":490},"\u002F* fintech-theme.css *\u002F\n@import \"tailwindcss\";\n\n@theme {\n \u002F* === COLORS === *\u002F\n \n \u002F* Primary — Deep Blue *\u002F\n --color-primary-50: oklch(0.97 0.02 255);\n --color-primary-100: oklch(0.92 0.04 255);\n --color-primary-200: oklch(0.84 0.07 255);\n --color-primary-300: oklch(0.74 0.12 255);\n --color-primary-400: oklch(0.64 0.16 255);\n --color-primary-500: oklch(0.54 0.20 255);\n --color-primary-600: oklch(0.46 0.18 255);\n --color-primary-700: oklch(0.37 0.15 255);\n --color-primary-800: oklch(0.28 0.11 255);\n --color-primary-900: oklch(0.20 0.07 255);\n --color-primary-950: oklch(0.14 0.04 255);\n\n \u002F* Secondary — Emerald Green *\u002F\n --color-secondary-50: oklch(0.97 0.02 155);\n --color-secondary-100: oklch(0.92 0.04 155);\n --color-secondary-200: oklch(0.85 0.07 155);\n --color-secondary-300: oklch(0.75 0.12 155);\n --color-secondary-400: oklch(0.65 0.17 155);\n --color-secondary-500: oklch(0.56 0.20 155);\n --color-secondary-600: oklch(0.47 0.18 155);\n --color-secondary-700: oklch(0.38 0.15 155);\n --color-secondary-800: oklch(0.28 0.11 155);\n --color-secondary-900: oklch(0.20 0.07 155);\n\n \u002F* Accent — Warm Orange *\u002F\n --color-accent-50: oklch(0.97 0.02 60);\n --color-accent-100: oklch(0.93 0.04 60);\n --color-accent-200: oklch(0.87 0.08 60);\n --color-accent-300: oklch(0.78 0.13 60);\n --color-accent-400: oklch(0.70 0.17 60);\n --color-accent-500: oklch(0.63 0.20 60);\n --color-accent-600: oklch(0.54 0.18 60);\n --color-accent-700: oklch(0.44 0.15 60);\n --color-accent-800: oklch(0.34 0.11 60);\n\n \u002F* Neutral (Gray) — Cool tone *\u002F\n --color-neutral-50: oklch(0.98 0.00 255);\n --color-neutral-100: oklch(0.95 0.01 255);\n --color-neutral-200: oklch(0.88 0.01 255);\n --color-neutral-300: oklch(0.78 0.01 255);\n --color-neutral-400: oklch(0.64 0.01 255);\n --color-neutral-500: oklch(0.52 0.01 255);\n --color-neutral-600: oklch(0.42 0.01 255);\n --color-neutral-700: oklch(0.33 0.01 255);\n --color-neutral-800: oklch(0.23 0.01 255);\n --color-neutral-900: oklch(0.15 0.01 255);\n --color-neutral-950: oklch(0.10 0.01 255);\n\n \u002F* Semantic colors *\u002F\n --color-success: oklch(0.60 0.19 150);\n --color-warning: oklch(0.70 0.17 85);\n --color-error: oklch(0.55 0.22 20);\n --color-info: oklch(0.60 0.16 240);\n\n \u002F* Surface colors *\u002F\n --color-surface: white;\n --color-surface-secondary: oklch(0.97 0.00 255);\n --color-surface-dark: oklch(0.15 0.02 255);\n --color-surface-dark-secondary: oklch(0.20 0.02 255);\n\n \u002F* === TYPOGRAPHY === *\u002F\n --font-sans: \"Inter\", system-ui, -apple-system, sans-serif;\n --font-mono: \"JetBrains Mono\", \"Fira Code\", monospace;\n --font-display: \"Inter\", system-ui, sans-serif;\n\n \u002F* Custom font sizes *\u002F\n --text-xs: 0.75rem;\n --text-sm: 0.875rem;\n --text-base: 1rem;\n --text-lg: 1.125rem;\n --text-xl: 1.25rem;\n --text-2xl: 1.5rem;\n --text-3xl: 1.875rem;\n --text-4xl: 2.25rem;\n --text-5xl: 3rem;\n --text-display: 4rem;\n --text-display--line-height: 1.1;\n --text-display--font-weight: 800;\n\n \u002F* === SPACING === *\u002F\n --spacing-18: 4.5rem;\n --spacing-22: 5.5rem;\n --spacing-30: 7.5rem;\n --spacing-34: 8.5rem;\n --spacing-section: 6rem;\n --spacing-section-lg: 10rem;\n\n \u002F* === BORDER RADIUS === *\u002F\n --radius-xs: 0.25rem;\n --radius-sm: 0.375rem;\n --radius-md: 0.5rem;\n --radius-lg: 0.75rem;\n --radius-xl: 1rem;\n --radius-2xl: 1.5rem;\n --radius-full: 9999px;\n\n \u002F* === SHADOWS === *\u002F\n --shadow-card: 0 1px 3px 0 rgb(0 0 0 \u002F 0.08), 0 1px 2px -1px rgb(0 0 0 \u002F 0.08);\n --shadow-card-hover: 0 10px 25px -5px rgb(0 0 0 \u002F 0.1), 0 4px 10px -2px rgb(0 0 0 \u002F 0.05);\n --shadow-dropdown: 0 10px 40px -10px rgb(0 0 0 \u002F 0.15);\n --shadow-modal: 0 25px 60px -15px rgb(0 0 0 \u002F 0.25);\n\n \u002F* === ANIMATIONS === *\u002F\n --animate-fade-in: fade-in 0.3s ease-out;\n --animate-slide-up: slide-up 0.4s ease-out;\n --animate-slide-down: slide-down 0.3s ease-out;\n --animate-scale-in: scale-in 0.2s ease-out;\n\n \u002F* === BREAKPOINTS === *\u002F\n --breakpoint-xs: 30rem;\n --breakpoint-sm: 40rem;\n --breakpoint-md: 48rem;\n --breakpoint-lg: 64rem;\n --breakpoint-xl: 80rem;\n --breakpoint-2xl: 96rem;\n --breakpoint-3xl: 120rem;\n\n \u002F* === CONTAINER === *\u002F\n --container-md: 28rem;\n --container-lg: 40rem;\n --container-xl: 56rem;\n}\n\n\u002F* === Keyframes === *\u002F\n@keyframes fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n}\n\n@keyframes slide-up {\n from { opacity: 0; transform: translateY(16px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes slide-down {\n from { opacity: 0; transform: translateY(-8px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes scale-in {\n from { opacity: 0; transform: scale(0.95); }\n to { opacity: 1; transform: scale(1); }\n}\n\n\u002F* === Base Layer === *\u002F\n@layer base {\n html {\n scroll-behavior: smooth;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n body {\n font-family: var(--font-sans);\n color: var(--color-neutral-900);\n background-color: var(--color-surface);\n }\n\n \u002F* Better focus styles *\u002F\n :focus-visible {\n outline: 2px solid var(--color-primary-500);\n outline-offset: 2px;\n border-radius: var(--radius-sm);\n }\n}\n",[441,1910,1911,1916,1928,1932,1938,1943,1948,1953,1970,1987,2005,2023,2041,2059,2076,2094,2111,2128,2145,2149,2154,2172,2189,2206,2223,2241,2259,2277,2294,2311,2329,2334,2340,2359,2377,2396,2416,2435,2453,2471,2490,2509,2514,2520,2540,2559,2577,2595,2613,2632,2651,2670,2689,2707,2725,2730,2736,2756,2775,2794,2813,2818,2824,2830,2848,2866,2884,2889,2895,2917,2931,2946,2951,2957,2963,2969,2975,2981,2987,2993,2999,3005,3011,3017,3023,3029,3034,3040,3045,3051,3057,3063,3069,3075,3080,3086,3092,3098,3104,3110,3116,3122,3128,3133,3139,3158,3178,3190,3203,3208,3214,3235,3255,3274,3294,3299,3305,3311,3317,3323,3329,3335,3341,3347,3352,3358,3364,3370,3376,3381,3386,3392,3404,3427,3446,3451,3456,3466,3499,3529,3534,3539,3549,3579,3608,3613,3618,3628,3659,3688,3693,3698,3704,3716,3724,3737,3750,3763,3769,3774,3782,3799,3816,3833,3838,3843,3849,3861,3885,3897,3914,3919],{"__ignoreMap":490},[494,1912,1913],{"class":496,"line":497},[494,1914,1915],{"class":500},"\u002F* fintech-theme.css *\u002F\n",[494,1917,1918,1920,1922,1924,1926],{"class":496,"line":504},[494,1919,835],{"class":834},[494,1921,838],{"class":513},[494,1923,841],{"class":576},[494,1925,844],{"class":513},[494,1927,847],{"class":513},[494,1929,1930],{"class":496,"line":510},[494,1931,872],{"emptyLinePlaceholder":871},[494,1933,1934,1936],{"class":496,"line":523},[494,1935,877],{"class":834},[494,1937,520],{"class":513},[494,1939,1940],{"class":496,"line":535},[494,1941,1942],{"class":500}," \u002F* === COLORS === *\u002F\n",[494,1944,1945],{"class":496,"line":545},[494,1946,1947],{"class":650}," \n",[494,1949,1950],{"class":496,"line":555},[494,1951,1952],{"class":500}," \u002F* Primary — Deep Blue *\u002F\n",[494,1954,1955,1958,1960,1962,1964,1966,1968],{"class":496,"line":565},[494,1956,1957],{"class":650}," --color-primary-50: oklch(0",[494,1959,922],{"class":513},[494,1961,926],{"class":925},[494,1963,929],{"class":650},[494,1965,922],{"class":513},[494,1967,1690],{"class":925},[494,1969,1575],{"class":650},[494,1971,1972,1975,1977,1979,1981,1983,1985],{"class":496,"line":586},[494,1973,1974],{"class":650}," --color-primary-100: oklch(0",[494,1976,922],{"class":513},[494,1978,1702],{"class":925},[494,1980,929],{"class":650},[494,1982,922],{"class":513},[494,1984,1709],{"class":925},[494,1986,1575],{"class":650},[494,1988,1989,1992,1994,1997,1999,2001,2003],{"class":496,"line":603},[494,1990,1991],{"class":650}," --color-primary-200: oklch(0",[494,1993,922],{"class":513},[494,1995,1996],{"class":925},"84",[494,1998,929],{"class":650},[494,2000,922],{"class":513},[494,2002,1726],{"class":925},[494,2004,1575],{"class":650},[494,2006,2007,2010,2012,2015,2017,2019,2021],{"class":496,"line":620},[494,2008,2009],{"class":650}," --color-primary-300: oklch(0",[494,2011,922],{"class":513},[494,2013,2014],{"class":925},"74",[494,2016,929],{"class":650},[494,2018,922],{"class":513},[494,2020,1085],{"class":925},[494,2022,1575],{"class":650},[494,2024,2025,2028,2030,2033,2035,2037,2039],{"class":496,"line":626},[494,2026,2027],{"class":650}," --color-primary-400: oklch(0",[494,2029,922],{"class":513},[494,2031,2032],{"class":925},"64",[494,2034,929],{"class":650},[494,2036,922],{"class":513},[494,2038,1761],{"class":925},[494,2040,1575],{"class":650},[494,2042,2043,2046,2048,2051,2053,2055,2057],{"class":496,"line":632},[494,2044,2045],{"class":650}," --color-primary-500: oklch(0",[494,2047,922],{"class":513},[494,2049,2050],{"class":925},"54",[494,2052,929],{"class":650},[494,2054,922],{"class":513},[494,2056,1030],{"class":925},[494,2058,1575],{"class":650},[494,2060,2061,2064,2066,2068,2070,2072,2074],{"class":496,"line":642},[494,2062,2063],{"class":650}," --color-primary-600: oklch(0",[494,2065,922],{"class":513},[494,2067,1792],{"class":925},[494,2069,929],{"class":650},[494,2071,922],{"class":513},[494,2073,697],{"class":925},[494,2075,1575],{"class":650},[494,2077,2078,2081,2083,2086,2088,2090,2092],{"class":496,"line":676},[494,2079,2080],{"class":650}," --color-primary-700: oklch(0",[494,2082,922],{"class":513},[494,2084,2085],{"class":925},"37",[494,2087,929],{"class":650},[494,2089,922],{"class":513},[494,2091,1011],{"class":925},[494,2093,1575],{"class":650},[494,2095,2096,2099,2101,2103,2105,2107,2109],{"class":496,"line":681},[494,2097,2098],{"class":650}," --color-primary-800: oklch(0",[494,2100,922],{"class":513},[494,2102,1826],{"class":925},[494,2104,929],{"class":650},[494,2106,922],{"class":513},[494,2108,1743],{"class":925},[494,2110,1575],{"class":650},[494,2112,2113,2116,2118,2120,2122,2124,2126],{"class":496,"line":691},[494,2114,2115],{"class":650}," --color-primary-900: oklch(0",[494,2117,922],{"class":513},[494,2119,1030],{"class":925},[494,2121,929],{"class":650},[494,2123,922],{"class":513},[494,2125,1726],{"class":925},[494,2127,1575],{"class":650},[494,2129,2130,2133,2135,2137,2139,2141,2143],{"class":496,"line":713},[494,2131,2132],{"class":650}," --color-primary-950: oklch(0",[494,2134,922],{"class":513},[494,2136,1859],{"class":925},[494,2138,929],{"class":650},[494,2140,922],{"class":513},[494,2142,1709],{"class":925},[494,2144,1575],{"class":650},[494,2146,2147],{"class":496,"line":734},[494,2148,872],{"emptyLinePlaceholder":871},[494,2150,2151],{"class":496,"line":740},[494,2152,2153],{"class":500}," \u002F* Secondary — Emerald Green *\u002F\n",[494,2155,2156,2159,2161,2163,2165,2167,2169],{"class":496,"line":746},[494,2157,2158],{"class":650}," --color-secondary-50: oklch(0",[494,2160,922],{"class":513},[494,2162,926],{"class":925},[494,2164,929],{"class":650},[494,2166,922],{"class":513},[494,2168,1690],{"class":925},[494,2170,2171],{"class":650}," 155);\n",[494,2173,2174,2177,2179,2181,2183,2185,2187],{"class":496,"line":752},[494,2175,2176],{"class":650}," --color-secondary-100: oklch(0",[494,2178,922],{"class":513},[494,2180,1702],{"class":925},[494,2182,929],{"class":650},[494,2184,922],{"class":513},[494,2186,1709],{"class":925},[494,2188,2171],{"class":650},[494,2190,2191,2194,2196,2198,2200,2202,2204],{"class":496,"line":763},[494,2192,2193],{"class":650}," --color-secondary-200: oklch(0",[494,2195,922],{"class":513},[494,2197,966],{"class":925},[494,2199,929],{"class":650},[494,2201,922],{"class":513},[494,2203,1726],{"class":925},[494,2205,2171],{"class":650},[494,2207,2208,2211,2213,2215,2217,2219,2221],{"class":496,"line":785},[494,2209,2210],{"class":650}," --color-secondary-300: oklch(0",[494,2212,922],{"class":513},[494,2214,985],{"class":925},[494,2216,929],{"class":650},[494,2218,922],{"class":513},[494,2220,1085],{"class":925},[494,2222,2171],{"class":650},[494,2224,2225,2228,2230,2232,2234,2236,2239],{"class":496,"line":803},[494,2226,2227],{"class":650}," --color-secondary-400: oklch(0",[494,2229,922],{"class":513},[494,2231,1004],{"class":925},[494,2233,929],{"class":650},[494,2235,922],{"class":513},[494,2237,2238],{"class":925},"17",[494,2240,2171],{"class":650},[494,2242,2243,2246,2248,2251,2253,2255,2257],{"class":496,"line":809},[494,2244,2245],{"class":650}," --color-secondary-500: oklch(0",[494,2247,922],{"class":513},[494,2249,2250],{"class":925},"56",[494,2252,929],{"class":650},[494,2254,922],{"class":513},[494,2256,1030],{"class":925},[494,2258,2171],{"class":650},[494,2260,2261,2264,2266,2269,2271,2273,2275],{"class":496,"line":1157},[494,2262,2263],{"class":650}," --color-secondary-600: oklch(0",[494,2265,922],{"class":513},[494,2267,2268],{"class":925},"47",[494,2270,929],{"class":650},[494,2272,922],{"class":513},[494,2274,697],{"class":925},[494,2276,2171],{"class":650},[494,2278,2279,2282,2284,2286,2288,2290,2292],{"class":496,"line":1163},[494,2280,2281],{"class":650}," --color-secondary-700: oklch(0",[494,2283,922],{"class":513},[494,2285,1809],{"class":925},[494,2287,929],{"class":650},[494,2289,922],{"class":513},[494,2291,1011],{"class":925},[494,2293,2171],{"class":650},[494,2295,2296,2299,2301,2303,2305,2307,2309],{"class":496,"line":1169},[494,2297,2298],{"class":650}," --color-secondary-800: oklch(0",[494,2300,922],{"class":513},[494,2302,1826],{"class":925},[494,2304,929],{"class":650},[494,2306,922],{"class":513},[494,2308,1743],{"class":925},[494,2310,2171],{"class":650},[494,2312,2314,2317,2319,2321,2323,2325,2327],{"class":496,"line":2313},30,[494,2315,2316],{"class":650}," --color-secondary-900: oklch(0",[494,2318,922],{"class":513},[494,2320,1030],{"class":925},[494,2322,929],{"class":650},[494,2324,922],{"class":513},[494,2326,1726],{"class":925},[494,2328,2171],{"class":650},[494,2330,2332],{"class":496,"line":2331},31,[494,2333,872],{"emptyLinePlaceholder":871},[494,2335,2337],{"class":496,"line":2336},32,[494,2338,2339],{"class":500}," \u002F* Accent — Warm Orange *\u002F\n",[494,2341,2343,2346,2348,2350,2352,2354,2356],{"class":496,"line":2342},33,[494,2344,2345],{"class":650}," --color-accent-50: oklch(0",[494,2347,922],{"class":513},[494,2349,926],{"class":925},[494,2351,929],{"class":650},[494,2353,922],{"class":513},[494,2355,1690],{"class":925},[494,2357,2358],{"class":650}," 60);\n",[494,2360,2362,2365,2367,2369,2371,2373,2375],{"class":496,"line":2361},34,[494,2363,2364],{"class":650}," --color-accent-100: oklch(0",[494,2366,922],{"class":513},[494,2368,947],{"class":925},[494,2370,929],{"class":650},[494,2372,922],{"class":513},[494,2374,1709],{"class":925},[494,2376,2358],{"class":650},[494,2378,2380,2383,2385,2388,2390,2392,2394],{"class":496,"line":2379},35,[494,2381,2382],{"class":650}," --color-accent-200: oklch(0",[494,2384,922],{"class":513},[494,2386,2387],{"class":925},"87",[494,2389,929],{"class":650},[494,2391,922],{"class":513},[494,2393,1104],{"class":925},[494,2395,2358],{"class":650},[494,2397,2399,2402,2404,2407,2409,2411,2414],{"class":496,"line":2398},36,[494,2400,2401],{"class":650}," --color-accent-300: oklch(0",[494,2403,922],{"class":513},[494,2405,2406],{"class":925},"78",[494,2408,929],{"class":650},[494,2410,922],{"class":513},[494,2412,2413],{"class":925},"13",[494,2415,2358],{"class":650},[494,2417,2419,2422,2424,2427,2429,2431,2433],{"class":496,"line":2418},37,[494,2420,2421],{"class":650}," --color-accent-400: oklch(0",[494,2423,922],{"class":513},[494,2425,2426],{"class":925},"70",[494,2428,929],{"class":650},[494,2430,922],{"class":513},[494,2432,2238],{"class":925},[494,2434,2358],{"class":650},[494,2436,2438,2441,2443,2445,2447,2449,2451],{"class":496,"line":2437},38,[494,2439,2440],{"class":650}," --color-accent-500: oklch(0",[494,2442,922],{"class":513},[494,2444,1605],{"class":925},[494,2446,929],{"class":650},[494,2448,922],{"class":513},[494,2450,1030],{"class":925},[494,2452,2358],{"class":650},[494,2454,2456,2459,2461,2463,2465,2467,2469],{"class":496,"line":2455},39,[494,2457,2458],{"class":650}," --color-accent-600: oklch(0",[494,2460,922],{"class":513},[494,2462,2050],{"class":925},[494,2464,929],{"class":650},[494,2466,922],{"class":513},[494,2468,697],{"class":925},[494,2470,2358],{"class":650},[494,2472,2474,2477,2479,2482,2484,2486,2488],{"class":496,"line":2473},40,[494,2475,2476],{"class":650}," --color-accent-700: oklch(0",[494,2478,922],{"class":513},[494,2480,2481],{"class":925},"44",[494,2483,929],{"class":650},[494,2485,922],{"class":513},[494,2487,1011],{"class":925},[494,2489,2358],{"class":650},[494,2491,2493,2496,2498,2501,2503,2505,2507],{"class":496,"line":2492},41,[494,2494,2495],{"class":650}," --color-accent-800: oklch(0",[494,2497,922],{"class":513},[494,2499,2500],{"class":925},"34",[494,2502,929],{"class":650},[494,2504,922],{"class":513},[494,2506,1743],{"class":925},[494,2508,2358],{"class":650},[494,2510,2512],{"class":496,"line":2511},42,[494,2513,872],{"emptyLinePlaceholder":871},[494,2515,2517],{"class":496,"line":2516},43,[494,2518,2519],{"class":500}," \u002F* Neutral (Gray) — Cool tone *\u002F\n",[494,2521,2523,2526,2528,2531,2533,2535,2538],{"class":496,"line":2522},44,[494,2524,2525],{"class":650}," --color-neutral-50: oklch(0",[494,2527,922],{"class":513},[494,2529,2530],{"class":925},"98",[494,2532,929],{"class":650},[494,2534,922],{"class":513},[494,2536,2537],{"class":925},"00",[494,2539,1575],{"class":650},[494,2541,2543,2546,2548,2551,2553,2555,2557],{"class":496,"line":2542},45,[494,2544,2545],{"class":650}," --color-neutral-100: oklch(0",[494,2547,922],{"class":513},[494,2549,2550],{"class":925},"95",[494,2552,929],{"class":650},[494,2554,922],{"class":513},[494,2556,934],{"class":925},[494,2558,1575],{"class":650},[494,2560,2562,2565,2567,2569,2571,2573,2575],{"class":496,"line":2561},46,[494,2563,2564],{"class":650}," --color-neutral-200: oklch(0",[494,2566,922],{"class":513},[494,2568,718],{"class":925},[494,2570,929],{"class":650},[494,2572,922],{"class":513},[494,2574,934],{"class":925},[494,2576,1575],{"class":650},[494,2578,2580,2583,2585,2587,2589,2591,2593],{"class":496,"line":2579},47,[494,2581,2582],{"class":650}," --color-neutral-300: oklch(0",[494,2584,922],{"class":513},[494,2586,2406],{"class":925},[494,2588,929],{"class":650},[494,2590,922],{"class":513},[494,2592,934],{"class":925},[494,2594,1575],{"class":650},[494,2596,2598,2601,2603,2605,2607,2609,2611],{"class":496,"line":2597},48,[494,2599,2600],{"class":650}," --color-neutral-400: oklch(0",[494,2602,922],{"class":513},[494,2604,2032],{"class":925},[494,2606,929],{"class":650},[494,2608,922],{"class":513},[494,2610,934],{"class":925},[494,2612,1575],{"class":650},[494,2614,2616,2619,2621,2624,2626,2628,2630],{"class":496,"line":2615},49,[494,2617,2618],{"class":650}," --color-neutral-500: oklch(0",[494,2620,922],{"class":513},[494,2622,2623],{"class":925},"52",[494,2625,929],{"class":650},[494,2627,922],{"class":513},[494,2629,934],{"class":925},[494,2631,1575],{"class":650},[494,2633,2635,2638,2640,2643,2645,2647,2649],{"class":496,"line":2634},50,[494,2636,2637],{"class":650}," --color-neutral-600: oklch(0",[494,2639,922],{"class":513},[494,2641,2642],{"class":925},"42",[494,2644,929],{"class":650},[494,2646,922],{"class":513},[494,2648,934],{"class":925},[494,2650,1575],{"class":650},[494,2652,2654,2657,2659,2662,2664,2666,2668],{"class":496,"line":2653},51,[494,2655,2656],{"class":650}," --color-neutral-700: oklch(0",[494,2658,922],{"class":513},[494,2660,2661],{"class":925},"33",[494,2663,929],{"class":650},[494,2665,922],{"class":513},[494,2667,934],{"class":925},[494,2669,1575],{"class":650},[494,2671,2673,2676,2678,2681,2683,2685,2687],{"class":496,"line":2672},52,[494,2674,2675],{"class":650}," --color-neutral-800: oklch(0",[494,2677,922],{"class":513},[494,2679,2680],{"class":925},"23",[494,2682,929],{"class":650},[494,2684,922],{"class":513},[494,2686,934],{"class":925},[494,2688,1575],{"class":650},[494,2690,2692,2695,2697,2699,2701,2703,2705],{"class":496,"line":2691},53,[494,2693,2694],{"class":650}," --color-neutral-900: oklch(0",[494,2696,922],{"class":513},[494,2698,1011],{"class":925},[494,2700,929],{"class":650},[494,2702,922],{"class":513},[494,2704,934],{"class":925},[494,2706,1575],{"class":650},[494,2708,2710,2713,2715,2717,2719,2721,2723],{"class":496,"line":2709},54,[494,2711,2712],{"class":650}," --color-neutral-950: oklch(0",[494,2714,922],{"class":513},[494,2716,992],{"class":925},[494,2718,929],{"class":650},[494,2720,922],{"class":513},[494,2722,934],{"class":925},[494,2724,1575],{"class":650},[494,2726,2728],{"class":496,"line":2727},55,[494,2729,872],{"emptyLinePlaceholder":871},[494,2731,2733],{"class":496,"line":2732},56,[494,2734,2735],{"class":500}," \u002F* Semantic colors *\u002F\n",[494,2737,2739,2742,2744,2747,2749,2751,2753],{"class":496,"line":2738},57,[494,2740,2741],{"class":650}," --color-success: oklch(0",[494,2743,922],{"class":513},[494,2745,2746],{"class":925},"60",[494,2748,929],{"class":650},[494,2750,922],{"class":513},[494,2752,1572],{"class":925},[494,2754,2755],{"class":650}," 150);\n",[494,2757,2759,2762,2764,2766,2768,2770,2772],{"class":496,"line":2758},58,[494,2760,2761],{"class":650}," --color-warning: oklch(0",[494,2763,922],{"class":513},[494,2765,2426],{"class":925},[494,2767,929],{"class":650},[494,2769,922],{"class":513},[494,2771,2238],{"class":925},[494,2773,2774],{"class":650}," 85);\n",[494,2776,2778,2781,2783,2785,2787,2789,2791],{"class":496,"line":2777},59,[494,2779,2780],{"class":650}," --color-error: oklch(0",[494,2782,922],{"class":513},[494,2784,1023],{"class":925},[494,2786,929],{"class":650},[494,2788,922],{"class":513},[494,2790,1097],{"class":925},[494,2792,2793],{"class":650}," 20);\n",[494,2795,2797,2800,2802,2804,2806,2808,2810],{"class":496,"line":2796},60,[494,2798,2799],{"class":650}," --color-info: oklch(0",[494,2801,922],{"class":513},[494,2803,2746],{"class":925},[494,2805,929],{"class":650},[494,2807,922],{"class":513},[494,2809,1761],{"class":925},[494,2811,2812],{"class":650}," 240);\n",[494,2814,2816],{"class":496,"line":2815},61,[494,2817,872],{"emptyLinePlaceholder":871},[494,2819,2821],{"class":496,"line":2820},62,[494,2822,2823],{"class":500}," \u002F* Surface colors *\u002F\n",[494,2825,2827],{"class":496,"line":2826},63,[494,2828,2829],{"class":650}," --color-surface: white;\n",[494,2831,2833,2836,2838,2840,2842,2844,2846],{"class":496,"line":2832},64,[494,2834,2835],{"class":650}," --color-surface-secondary: oklch(0",[494,2837,922],{"class":513},[494,2839,926],{"class":925},[494,2841,929],{"class":650},[494,2843,922],{"class":513},[494,2845,2537],{"class":925},[494,2847,1575],{"class":650},[494,2849,2851,2854,2856,2858,2860,2862,2864],{"class":496,"line":2850},65,[494,2852,2853],{"class":650}," --color-surface-dark: oklch(0",[494,2855,922],{"class":513},[494,2857,1011],{"class":925},[494,2859,929],{"class":650},[494,2861,922],{"class":513},[494,2863,1690],{"class":925},[494,2865,1575],{"class":650},[494,2867,2869,2872,2874,2876,2878,2880,2882],{"class":496,"line":2868},66,[494,2870,2871],{"class":650}," --color-surface-dark-secondary: oklch(0",[494,2873,922],{"class":513},[494,2875,1030],{"class":925},[494,2877,929],{"class":650},[494,2879,922],{"class":513},[494,2881,1690],{"class":925},[494,2883,1575],{"class":650},[494,2885,2887],{"class":496,"line":2886},67,[494,2888,872],{"emptyLinePlaceholder":871},[494,2890,2892],{"class":496,"line":2891},68,[494,2893,2894],{"class":500}," \u002F* === TYPOGRAPHY === *\u002F\n",[494,2896,2898,2901,2903,2906,2908,2911,2913,2915],{"class":496,"line":2897},69,[494,2899,2900],{"class":650}," --font-sans: \"Inter\"",[494,2902,661],{"class":513},[494,2904,2905],{"class":925}," system-ui",[494,2907,661],{"class":513},[494,2909,2910],{"class":650}," -apple-system",[494,2912,661],{"class":513},[494,2914,1138],{"class":925},[494,2916,847],{"class":650},[494,2918,2920,2922,2924,2927,2929],{"class":496,"line":2919},70,[494,2921,1145],{"class":650},[494,2923,661],{"class":513},[494,2925,2926],{"class":650}," \"Fira Code\"",[494,2928,661],{"class":513},[494,2930,1150],{"class":650},[494,2932,2934,2936,2938,2940,2942,2944],{"class":496,"line":2933},71,[494,2935,1133],{"class":650},[494,2937,661],{"class":513},[494,2939,2905],{"class":925},[494,2941,661],{"class":513},[494,2943,1138],{"class":925},[494,2945,847],{"class":650},[494,2947,2949],{"class":496,"line":2948},72,[494,2950,872],{"emptyLinePlaceholder":871},[494,2952,2954],{"class":496,"line":2953},73,[494,2955,2956],{"class":500}," \u002F* Custom font sizes *\u002F\n",[494,2958,2960],{"class":496,"line":2959},74,[494,2961,2962],{"class":650}," --text-xs: 0.75rem;\n",[494,2964,2966],{"class":496,"line":2965},75,[494,2967,2968],{"class":650}," --text-sm: 0.875rem;\n",[494,2970,2972],{"class":496,"line":2971},76,[494,2973,2974],{"class":650}," --text-base: 1rem;\n",[494,2976,2978],{"class":496,"line":2977},77,[494,2979,2980],{"class":650}," --text-lg: 1.125rem;\n",[494,2982,2984],{"class":496,"line":2983},78,[494,2985,2986],{"class":650}," --text-xl: 1.25rem;\n",[494,2988,2990],{"class":496,"line":2989},79,[494,2991,2992],{"class":650}," --text-2xl: 1.5rem;\n",[494,2994,2996],{"class":496,"line":2995},80,[494,2997,2998],{"class":650}," --text-3xl: 1.875rem;\n",[494,3000,3002],{"class":496,"line":3001},81,[494,3003,3004],{"class":650}," --text-4xl: 2.25rem;\n",[494,3006,3008],{"class":496,"line":3007},82,[494,3009,3010],{"class":650}," --text-5xl: 3rem;\n",[494,3012,3014],{"class":496,"line":3013},83,[494,3015,3016],{"class":650}," --text-display: 4rem;\n",[494,3018,3020],{"class":496,"line":3019},84,[494,3021,3022],{"class":650}," --text-display--line-height: 1.1;\n",[494,3024,3026],{"class":496,"line":3025},85,[494,3027,3028],{"class":650}," --text-display--font-weight: 800;\n",[494,3030,3032],{"class":496,"line":3031},86,[494,3033,872],{"emptyLinePlaceholder":871},[494,3035,3037],{"class":496,"line":3036},87,[494,3038,3039],{"class":500}," \u002F* === SPACING === *\u002F\n",[494,3041,3043],{"class":496,"line":3042},88,[494,3044,1160],{"class":650},[494,3046,3048],{"class":496,"line":3047},89,[494,3049,3050],{"class":650}," --spacing-22: 5.5rem;\n",[494,3052,3054],{"class":496,"line":3053},90,[494,3055,3056],{"class":650}," --spacing-30: 7.5rem;\n",[494,3058,3060],{"class":496,"line":3059},91,[494,3061,3062],{"class":650}," --spacing-34: 8.5rem;\n",[494,3064,3066],{"class":496,"line":3065},92,[494,3067,3068],{"class":650}," --spacing-section: 6rem;\n",[494,3070,3072],{"class":496,"line":3071},93,[494,3073,3074],{"class":650}," --spacing-section-lg: 10rem;\n",[494,3076,3078],{"class":496,"line":3077},94,[494,3079,872],{"emptyLinePlaceholder":871},[494,3081,3083],{"class":496,"line":3082},95,[494,3084,3085],{"class":500}," \u002F* === BORDER RADIUS === *\u002F\n",[494,3087,3089],{"class":496,"line":3088},96,[494,3090,3091],{"class":650}," --radius-xs: 0.25rem;\n",[494,3093,3095],{"class":496,"line":3094},97,[494,3096,3097],{"class":650}," --radius-sm: 0.375rem;\n",[494,3099,3101],{"class":496,"line":3100},98,[494,3102,3103],{"class":650}," --radius-md: 0.5rem;\n",[494,3105,3107],{"class":496,"line":3106},99,[494,3108,3109],{"class":650}," --radius-lg: 0.75rem;\n",[494,3111,3113],{"class":496,"line":3112},100,[494,3114,3115],{"class":650}," --radius-xl: 1rem;\n",[494,3117,3119],{"class":496,"line":3118},101,[494,3120,3121],{"class":650}," --radius-2xl: 1.5rem;\n",[494,3123,3125],{"class":496,"line":3124},102,[494,3126,3127],{"class":650}," --radius-full: 9999px;\n",[494,3129,3131],{"class":496,"line":3130},103,[494,3132,872],{"emptyLinePlaceholder":871},[494,3134,3136],{"class":496,"line":3135},104,[494,3137,3138],{"class":500}," \u002F* === SHADOWS === *\u002F\n",[494,3140,3142,3145,3147,3149,3152,3154,3156],{"class":496,"line":3141},105,[494,3143,3144],{"class":650}," --shadow-card: 0 1px 3px 0 rgb(0 0 0 \u002F 0",[494,3146,922],{"class":513},[494,3148,1104],{"class":925},[494,3150,3151],{"class":650},"), 0 1px 2px -1px rgb(0 0 0 \u002F 0",[494,3153,922],{"class":513},[494,3155,1104],{"class":925},[494,3157,1280],{"class":650},[494,3159,3161,3164,3166,3169,3172,3174,3176],{"class":496,"line":3160},106,[494,3162,3163],{"class":650}," --shadow-card-hover: 0 10px 25px -5px rgb(0 0 0 \u002F 0",[494,3165,922],{"class":513},[494,3167,3168],{"class":925},"1",[494,3170,3171],{"class":650},"), 0 4px 10px -2px rgb(0 0 0 \u002F 0",[494,3173,922],{"class":513},[494,3175,1122],{"class":925},[494,3177,1280],{"class":650},[494,3179,3181,3184,3186,3188],{"class":496,"line":3180},107,[494,3182,3183],{"class":650}," --shadow-dropdown: 0 10px 40px -10px rgb(0 0 0 \u002F 0",[494,3185,922],{"class":513},[494,3187,1011],{"class":925},[494,3189,1280],{"class":650},[494,3191,3193,3196,3198,3201],{"class":496,"line":3192},108,[494,3194,3195],{"class":650}," --shadow-modal: 0 25px 60px -15px rgb(0 0 0 \u002F 0",[494,3197,922],{"class":513},[494,3199,3200],{"class":925},"25",[494,3202,1280],{"class":650},[494,3204,3206],{"class":496,"line":3205},109,[494,3207,872],{"emptyLinePlaceholder":871},[494,3209,3211],{"class":496,"line":3210},110,[494,3212,3213],{"class":500}," \u002F* === ANIMATIONS === *\u002F\n",[494,3215,3217,3220,3223,3225,3227,3230,3233],{"class":496,"line":3216},111,[494,3218,3219],{"class":650}," --animate-fade-in: ",[494,3221,3222],{"class":925},"fade-in",[494,3224,929],{"class":650},[494,3226,922],{"class":513},[494,3228,3229],{"class":925},"3s",[494,3231,3232],{"class":925}," ease-out",[494,3234,847],{"class":650},[494,3236,3238,3241,3244,3246,3248,3251,3253],{"class":496,"line":3237},112,[494,3239,3240],{"class":650}," --animate-slide-up: ",[494,3242,3243],{"class":925},"slide-up",[494,3245,929],{"class":650},[494,3247,922],{"class":513},[494,3249,3250],{"class":925},"4s",[494,3252,3232],{"class":925},[494,3254,847],{"class":650},[494,3256,3258,3261,3264,3266,3268,3270,3272],{"class":496,"line":3257},113,[494,3259,3260],{"class":650}," --animate-slide-down: ",[494,3262,3263],{"class":925},"slide-down",[494,3265,929],{"class":650},[494,3267,922],{"class":513},[494,3269,3229],{"class":925},[494,3271,3232],{"class":925},[494,3273,847],{"class":650},[494,3275,3277,3280,3283,3285,3287,3290,3292],{"class":496,"line":3276},114,[494,3278,3279],{"class":650}," --animate-scale-in: ",[494,3281,3282],{"class":925},"scale-in",[494,3284,929],{"class":650},[494,3286,922],{"class":513},[494,3288,3289],{"class":925},"2s",[494,3291,3232],{"class":925},[494,3293,847],{"class":650},[494,3295,3297],{"class":496,"line":3296},115,[494,3298,872],{"emptyLinePlaceholder":871},[494,3300,3302],{"class":496,"line":3301},116,[494,3303,3304],{"class":500}," \u002F* === BREAKPOINTS === *\u002F\n",[494,3306,3308],{"class":496,"line":3307},117,[494,3309,3310],{"class":650}," --breakpoint-xs: 30rem;\n",[494,3312,3314],{"class":496,"line":3313},118,[494,3315,3316],{"class":650}," --breakpoint-sm: 40rem;\n",[494,3318,3320],{"class":496,"line":3319},119,[494,3321,3322],{"class":650}," --breakpoint-md: 48rem;\n",[494,3324,3326],{"class":496,"line":3325},120,[494,3327,3328],{"class":650}," --breakpoint-lg: 64rem;\n",[494,3330,3332],{"class":496,"line":3331},121,[494,3333,3334],{"class":650}," --breakpoint-xl: 80rem;\n",[494,3336,3338],{"class":496,"line":3337},122,[494,3339,3340],{"class":650}," --breakpoint-2xl: 96rem;\n",[494,3342,3344],{"class":496,"line":3343},123,[494,3345,3346],{"class":650}," --breakpoint-3xl: 120rem;\n",[494,3348,3350],{"class":496,"line":3349},124,[494,3351,872],{"emptyLinePlaceholder":871},[494,3353,3355],{"class":496,"line":3354},125,[494,3356,3357],{"class":500}," \u002F* === CONTAINER === *\u002F\n",[494,3359,3361],{"class":496,"line":3360},126,[494,3362,3363],{"class":650}," --container-md: 28rem;\n",[494,3365,3367],{"class":496,"line":3366},127,[494,3368,3369],{"class":650}," --container-lg: 40rem;\n",[494,3371,3373],{"class":496,"line":3372},128,[494,3374,3375],{"class":650}," --container-xl: 56rem;\n",[494,3377,3379],{"class":496,"line":3378},129,[494,3380,812],{"class":650},[494,3382,3384],{"class":496,"line":3383},130,[494,3385,872],{"emptyLinePlaceholder":871},[494,3387,3389],{"class":496,"line":3388},131,[494,3390,3391],{"class":500},"\u002F* === Keyframes === *\u002F\n",[494,3393,3395,3398,3402],{"class":496,"line":3394},132,[494,3396,3397],{"class":834},"@keyframes",[494,3399,3401],{"class":3400},"sHdIc"," fade-in",[494,3403,520],{"class":513},[494,3405,3407,3410,3413,3416,3418,3421,3424],{"class":496,"line":3406},133,[494,3408,3409],{"class":925}," from",[494,3411,3412],{"class":513}," {",[494,3414,3415],{"class":1266}," opacity",[494,3417,530],{"class":513},[494,3419,929],{"class":3420},"sbssI",[494,3422,3423],{"class":513},";",[494,3425,3426],{"class":513}," }\n",[494,3428,3430,3433,3435,3437,3439,3442,3444],{"class":496,"line":3429},134,[494,3431,3432],{"class":925}," to",[494,3434,3412],{"class":513},[494,3436,3415],{"class":1266},[494,3438,530],{"class":513},[494,3440,3441],{"class":3420}," 1",[494,3443,3423],{"class":513},[494,3445,3426],{"class":513},[494,3447,3449],{"class":496,"line":3448},135,[494,3450,812],{"class":513},[494,3452,3454],{"class":496,"line":3453},136,[494,3455,872],{"emptyLinePlaceholder":871},[494,3457,3459,3461,3464],{"class":496,"line":3458},137,[494,3460,3397],{"class":834},[494,3462,3463],{"class":3400}," slide-up",[494,3465,520],{"class":513},[494,3467,3469,3471,3473,3475,3477,3479,3481,3484,3486,3489,3491,3494,3497],{"class":496,"line":3468},138,[494,3470,3409],{"class":925},[494,3472,3412],{"class":513},[494,3474,3415],{"class":1266},[494,3476,530],{"class":513},[494,3478,929],{"class":3420},[494,3480,3423],{"class":513},[494,3482,3483],{"class":1266}," transform",[494,3485,530],{"class":513},[494,3487,3488],{"class":766}," translateY",[494,3490,770],{"class":513},[494,3492,3493],{"class":3420},"16px",[494,3495,3496],{"class":513},");",[494,3498,3426],{"class":513},[494,3500,3502,3504,3506,3508,3510,3512,3514,3516,3518,3520,3522,3525,3527],{"class":496,"line":3501},139,[494,3503,3432],{"class":925},[494,3505,3412],{"class":513},[494,3507,3415],{"class":1266},[494,3509,530],{"class":513},[494,3511,3441],{"class":3420},[494,3513,3423],{"class":513},[494,3515,3483],{"class":1266},[494,3517,530],{"class":513},[494,3519,3488],{"class":766},[494,3521,770],{"class":513},[494,3523,3524],{"class":3420},"0",[494,3526,3496],{"class":513},[494,3528,3426],{"class":513},[494,3530,3532],{"class":496,"line":3531},140,[494,3533,812],{"class":513},[494,3535,3537],{"class":496,"line":3536},141,[494,3538,872],{"emptyLinePlaceholder":871},[494,3540,3542,3544,3547],{"class":496,"line":3541},142,[494,3543,3397],{"class":834},[494,3545,3546],{"class":3400}," slide-down",[494,3548,520],{"class":513},[494,3550,3552,3554,3556,3558,3560,3562,3564,3566,3568,3570,3572,3575,3577],{"class":496,"line":3551},143,[494,3553,3409],{"class":925},[494,3555,3412],{"class":513},[494,3557,3415],{"class":1266},[494,3559,530],{"class":513},[494,3561,929],{"class":3420},[494,3563,3423],{"class":513},[494,3565,3483],{"class":1266},[494,3567,530],{"class":513},[494,3569,3488],{"class":766},[494,3571,770],{"class":513},[494,3573,3574],{"class":3420},"-8px",[494,3576,3496],{"class":513},[494,3578,3426],{"class":513},[494,3580,3582,3584,3586,3588,3590,3592,3594,3596,3598,3600,3602,3604,3606],{"class":496,"line":3581},144,[494,3583,3432],{"class":925},[494,3585,3412],{"class":513},[494,3587,3415],{"class":1266},[494,3589,530],{"class":513},[494,3591,3441],{"class":3420},[494,3593,3423],{"class":513},[494,3595,3483],{"class":1266},[494,3597,530],{"class":513},[494,3599,3488],{"class":766},[494,3601,770],{"class":513},[494,3603,3524],{"class":3420},[494,3605,3496],{"class":513},[494,3607,3426],{"class":513},[494,3609,3611],{"class":496,"line":3610},145,[494,3612,812],{"class":513},[494,3614,3616],{"class":496,"line":3615},146,[494,3617,872],{"emptyLinePlaceholder":871},[494,3619,3621,3623,3626],{"class":496,"line":3620},147,[494,3622,3397],{"class":834},[494,3624,3625],{"class":3400}," scale-in",[494,3627,520],{"class":513},[494,3629,3631,3633,3635,3637,3639,3641,3643,3645,3647,3650,3652,3655,3657],{"class":496,"line":3630},148,[494,3632,3409],{"class":925},[494,3634,3412],{"class":513},[494,3636,3415],{"class":1266},[494,3638,530],{"class":513},[494,3640,929],{"class":3420},[494,3642,3423],{"class":513},[494,3644,3483],{"class":1266},[494,3646,530],{"class":513},[494,3648,3649],{"class":766}," scale",[494,3651,770],{"class":513},[494,3653,3654],{"class":3420},"0.95",[494,3656,3496],{"class":513},[494,3658,3426],{"class":513},[494,3660,3662,3664,3666,3668,3670,3672,3674,3676,3678,3680,3682,3684,3686],{"class":496,"line":3661},149,[494,3663,3432],{"class":925},[494,3665,3412],{"class":513},[494,3667,3415],{"class":1266},[494,3669,530],{"class":513},[494,3671,3441],{"class":3420},[494,3673,3423],{"class":513},[494,3675,3483],{"class":1266},[494,3677,530],{"class":513},[494,3679,3649],{"class":766},[494,3681,770],{"class":513},[494,3683,3168],{"class":3420},[494,3685,3496],{"class":513},[494,3687,3426],{"class":513},[494,3689,3691],{"class":496,"line":3690},150,[494,3692,812],{"class":513},[494,3694,3696],{"class":496,"line":3695},151,[494,3697,872],{"emptyLinePlaceholder":871},[494,3699,3701],{"class":496,"line":3700},152,[494,3702,3703],{"class":500},"\u002F* === Base Layer === *\u002F\n",[494,3705,3707,3710,3713],{"class":496,"line":3706},153,[494,3708,3709],{"class":834},"@layer",[494,3711,3712],{"class":650}," base ",[494,3714,3715],{"class":513},"{\n",[494,3717,3719,3722],{"class":496,"line":3718},154,[494,3720,3721],{"class":925}," html",[494,3723,520],{"class":513},[494,3725,3727,3730,3732,3735],{"class":496,"line":3726},155,[494,3728,3729],{"class":1266}," scroll-behavior",[494,3731,530],{"class":513},[494,3733,3734],{"class":650}," smooth",[494,3736,847],{"class":513},[494,3738,3740,3743,3745,3748],{"class":496,"line":3739},156,[494,3741,3742],{"class":925}," -webkit-font-smoothing",[494,3744,530],{"class":513},[494,3746,3747],{"class":650}," antialiased",[494,3749,847],{"class":513},[494,3751,3753,3756,3758,3761],{"class":496,"line":3752},157,[494,3754,3755],{"class":925}," -moz-osx-font-smoothing",[494,3757,530],{"class":513},[494,3759,3760],{"class":650}," grayscale",[494,3762,847],{"class":513},[494,3764,3766],{"class":496,"line":3765},158,[494,3767,3768],{"class":513}," }\n",[494,3770,3772],{"class":496,"line":3771},159,[494,3773,872],{"emptyLinePlaceholder":871},[494,3775,3777,3780],{"class":496,"line":3776},160,[494,3778,3779],{"class":925}," body",[494,3781,520],{"class":513},[494,3783,3785,3788,3790,3792,3794,3797],{"class":496,"line":3784},161,[494,3786,3787],{"class":1266}," font-family",[494,3789,530],{"class":513},[494,3791,1272],{"class":766},[494,3793,770],{"class":513},[494,3795,3796],{"class":650},"--font-sans",[494,3798,1280],{"class":513},[494,3800,3802,3805,3807,3809,3811,3814],{"class":496,"line":3801},162,[494,3803,3804],{"class":1266}," color",[494,3806,530],{"class":513},[494,3808,1272],{"class":766},[494,3810,770],{"class":513},[494,3812,3813],{"class":650},"--color-neutral-900",[494,3815,1280],{"class":513},[494,3817,3819,3822,3824,3826,3828,3831],{"class":496,"line":3818},163,[494,3820,3821],{"class":1266}," background-color",[494,3823,530],{"class":513},[494,3825,1272],{"class":766},[494,3827,770],{"class":513},[494,3829,3830],{"class":650},"--color-surface",[494,3832,1280],{"class":513},[494,3834,3836],{"class":496,"line":3835},164,[494,3837,3768],{"class":513},[494,3839,3841],{"class":496,"line":3840},165,[494,3842,872],{"emptyLinePlaceholder":871},[494,3844,3846],{"class":496,"line":3845},166,[494,3847,3848],{"class":500}," \u002F* Better focus styles *\u002F\n",[494,3850,3852,3855,3859],{"class":496,"line":3851},167,[494,3853,3854],{"class":513}," :",[494,3856,3858],{"class":3857},"spNyl","focus-visible",[494,3860,520],{"class":513},[494,3862,3864,3867,3869,3872,3875,3878,3880,3883],{"class":496,"line":3863},168,[494,3865,3866],{"class":1266}," outline",[494,3868,530],{"class":513},[494,3870,3871],{"class":3420}," 2px",[494,3873,3874],{"class":650}," solid ",[494,3876,3877],{"class":766},"var",[494,3879,770],{"class":513},[494,3881,3882],{"class":650},"--color-primary-500",[494,3884,1280],{"class":513},[494,3886,3888,3891,3893,3895],{"class":496,"line":3887},169,[494,3889,3890],{"class":1266}," outline-offset",[494,3892,530],{"class":513},[494,3894,3871],{"class":3420},[494,3896,847],{"class":513},[494,3898,3900,3903,3905,3907,3909,3912],{"class":496,"line":3899},170,[494,3901,3902],{"class":1266}," border-radius",[494,3904,530],{"class":513},[494,3906,1272],{"class":766},[494,3908,770],{"class":513},[494,3910,3911],{"class":650},"--radius-sm",[494,3913,1280],{"class":513},[494,3915,3917],{"class":496,"line":3916},171,[494,3918,3768],{"class":513},[494,3920,3922],{"class":496,"line":3921},172,[494,3923,812],{"class":513},[432,3925,3926],{},[436,3927,3928],{},"Giải thích key decisions:",[1883,3930,3931,3934,3937,3949,3955],{},[1886,3932,3933],{},"Color scale dùng OKLCH với pattern: L giảm dần (0.97 → 0.14), C tăng rồi giảm (tạo độ rực tự nhiên), H giữ nguyên cho consistency.",[1886,3935,3936],{},"Surface colors: tách biệt surface với brand colors để dễ maintain.",[1886,3938,3939,3941,3942,3944,3945,3948],{},[441,3940,1501],{},": Định nghĩa animation trong ",[441,3943,877],{}," để dùng với class ",[441,3946,3947],{},"animate-fade-in",", v.v.",[1886,3950,3951,3954],{},[441,3952,3953],{},"@layer base",": Style toàn cục — smooth scroll, antialiasing, focus ring mặc định.",[1886,3956,3957,3960],{},[441,3958,3959],{},"--text-display--line-height",": Cú pháp nested cho font size variant — set line-height riêng cho text size cụ thể.",[480,3962,3964],{"id":3963},"_16-bài-tập-2-extend-default-theme-vs-override-entirely","1.6. BÀI TẬP 2 — Extend Default Theme vs Override Entirely",[432,3966,3967,3969],{},[436,3968,1880],{}," So sánh hai approach:",[3971,3972,3973,3979],"ol",{},[1886,3974,3975,3978],{},[436,3976,3977],{},"Extend:"," giữ default Tailwind colors + thêm brand colors",[1886,3980,3981,3984],{},[436,3982,3983],{},"Override:"," thay thế hoàn toàn default colors",[432,3986,3987],{},[436,3988,1905],{},[485,3990,3992],{"className":815,"code":3991,"language":817,"meta":490,"style":490},"\u002F* === APPROACH 1: Extend Default Theme === *\u002F\n@import \"tailwindcss\";\n\n@theme {\n \u002F* Chỉ thêm brand colors — default colors vẫn giữ nguyên *\u002F\n --color-brand: oklch(0.55 0.2 260);\n --color-brand-light: oklch(0.70 0.15 260);\n --color-brand-dark: oklch(0.40 0.15 260);\n}\n\n\u002F* Result: Dùng được cả text-brand VÀ text-blue-500, text-red-500... *\u002F\n\u002F* Extend = default + thêm mới *\u002F\n\n\n\u002F* === APPROACH 2: Override Default Theme === *\u002F\n@import \"tailwindcss\";\n\n@theme {\n \u002F* Ghi đè toàn bộ color palette *\u002F\n --color-*: initial; \u002F* XÓA tất cả default colors *\u002F\n\n \u002F* Chỉ định nghĩa colors bạn muốn *\u002F\n --color-white: #fff;\n --color-black: #000;\n\n --color-primary-50: oklch(0.97 0.02 260);\n --color-primary-100: oklch(0.92 0.04 260);\n --color-primary-200: oklch(0.84 0.07 260);\n --color-primary-500: oklch(0.55 0.20 260);\n --color-primary-900: oklch(0.20 0.07 260);\n\n --color-gray-50: oklch(0.98 0.01 260);\n --color-gray-100: oklch(0.95 0.01 260);\n --color-gray-500: oklch(0.52 0.01 260);\n --color-gray-900: oklch(0.15 0.01 260);\n\n --color-success: oklch(0.60 0.19 150);\n --color-error: oklch(0.55 0.22 20);\n}\n\n\u002F* Result: Chỉ dùng được các màu đã định nghĩa *\u002F\n\u002F* text-red-500 → không tồn tại! *\u002F\n",[441,3993,3994,3999,4011,4015,4021,4026,4043,4060,4077,4081,4085,4090,4095,4099,4103,4108,4120,4124,4130,4135,4149,4153,4158,4168,4178,4182,4199,4215,4231,4247,4263,4267,4284,4301,4318,4335,4339,4355,4371,4375,4379,4384],{"__ignoreMap":490},[494,3995,3996],{"class":496,"line":497},[494,3997,3998],{"class":500},"\u002F* === APPROACH 1: Extend Default Theme === *\u002F\n",[494,4000,4001,4003,4005,4007,4009],{"class":496,"line":504},[494,4002,835],{"class":834},[494,4004,838],{"class":513},[494,4006,841],{"class":576},[494,4008,844],{"class":513},[494,4010,847],{"class":513},[494,4012,4013],{"class":496,"line":510},[494,4014,872],{"emptyLinePlaceholder":871},[494,4016,4017,4019],{"class":496,"line":523},[494,4018,877],{"class":834},[494,4020,520],{"class":513},[494,4022,4023],{"class":496,"line":535},[494,4024,4025],{"class":500}," \u002F* Chỉ thêm brand colors — default colors vẫn giữ nguyên *\u002F\n",[494,4027,4028,4031,4033,4035,4037,4039,4041],{"class":496,"line":545},[494,4029,4030],{"class":650}," --color-brand: oklch(0",[494,4032,922],{"class":513},[494,4034,1023],{"class":925},[494,4036,929],{"class":650},[494,4038,922],{"class":513},[494,4040,1208],{"class":925},[494,4042,1693],{"class":650},[494,4044,4045,4048,4050,4052,4054,4056,4058],{"class":496,"line":555},[494,4046,4047],{"class":650}," --color-brand-light: oklch(0",[494,4049,922],{"class":513},[494,4051,2426],{"class":925},[494,4053,929],{"class":650},[494,4055,922],{"class":513},[494,4057,1011],{"class":925},[494,4059,1693],{"class":650},[494,4061,4062,4065,4067,4069,4071,4073,4075],{"class":496,"line":565},[494,4063,4064],{"class":650}," --color-brand-dark: oklch(0",[494,4066,922],{"class":513},[494,4068,1060],{"class":925},[494,4070,929],{"class":650},[494,4072,922],{"class":513},[494,4074,1011],{"class":925},[494,4076,1693],{"class":650},[494,4078,4079],{"class":496,"line":586},[494,4080,812],{"class":513},[494,4082,4083],{"class":496,"line":603},[494,4084,872],{"emptyLinePlaceholder":871},[494,4086,4087],{"class":496,"line":620},[494,4088,4089],{"class":500},"\u002F* Result: Dùng được cả text-brand VÀ text-blue-500, text-red-500... *\u002F\n",[494,4091,4092],{"class":496,"line":626},[494,4093,4094],{"class":500},"\u002F* Extend = default + thêm mới *\u002F\n",[494,4096,4097],{"class":496,"line":632},[494,4098,872],{"emptyLinePlaceholder":871},[494,4100,4101],{"class":496,"line":642},[494,4102,872],{"emptyLinePlaceholder":871},[494,4104,4105],{"class":496,"line":676},[494,4106,4107],{"class":500},"\u002F* === APPROACH 2: Override Default Theme === *\u002F\n",[494,4109,4110,4112,4114,4116,4118],{"class":496,"line":681},[494,4111,835],{"class":834},[494,4113,838],{"class":513},[494,4115,841],{"class":576},[494,4117,844],{"class":513},[494,4119,847],{"class":513},[494,4121,4122],{"class":496,"line":691},[494,4123,872],{"emptyLinePlaceholder":871},[494,4125,4126,4128],{"class":496,"line":713},[494,4127,877],{"class":834},[494,4129,520],{"class":513},[494,4131,4132],{"class":496,"line":734},[494,4133,4134],{"class":500}," \u002F* Ghi đè toàn bộ color palette *\u002F\n",[494,4136,4137,4140,4143,4146],{"class":496,"line":740},[494,4138,4139],{"class":650}," --color-",[494,4141,4142],{"class":925},"*",[494,4144,4145],{"class":650},": initial; ",[494,4147,4148],{"class":500},"\u002F* XÓA tất cả default colors *\u002F\n",[494,4150,4151],{"class":496,"line":746},[494,4152,872],{"emptyLinePlaceholder":871},[494,4154,4155],{"class":496,"line":752},[494,4156,4157],{"class":500}," \u002F* Chỉ định nghĩa colors bạn muốn *\u002F\n",[494,4159,4160,4163,4165],{"class":496,"line":763},[494,4161,4162],{"class":650}," --color-white: ",[494,4164,887],{"class":513},[494,4166,4167],{"class":650},"fff;\n",[494,4169,4170,4173,4175],{"class":496,"line":785},[494,4171,4172],{"class":650}," --color-black: ",[494,4174,887],{"class":513},[494,4176,4177],{"class":650},"000;\n",[494,4179,4180],{"class":496,"line":803},[494,4181,872],{"emptyLinePlaceholder":871},[494,4183,4184,4187,4189,4191,4193,4195,4197],{"class":496,"line":809},[494,4185,4186],{"class":650}," --color-primary-50: oklch(0",[494,4188,922],{"class":513},[494,4190,926],{"class":925},[494,4192,929],{"class":650},[494,4194,922],{"class":513},[494,4196,1690],{"class":925},[494,4198,1693],{"class":650},[494,4200,4201,4203,4205,4207,4209,4211,4213],{"class":496,"line":1157},[494,4202,1974],{"class":650},[494,4204,922],{"class":513},[494,4206,1702],{"class":925},[494,4208,929],{"class":650},[494,4210,922],{"class":513},[494,4212,1709],{"class":925},[494,4214,1693],{"class":650},[494,4216,4217,4219,4221,4223,4225,4227,4229],{"class":496,"line":1163},[494,4218,1991],{"class":650},[494,4220,922],{"class":513},[494,4222,1996],{"class":925},[494,4224,929],{"class":650},[494,4226,922],{"class":513},[494,4228,1726],{"class":925},[494,4230,1693],{"class":650},[494,4232,4233,4235,4237,4239,4241,4243,4245],{"class":496,"line":1169},[494,4234,2045],{"class":650},[494,4236,922],{"class":513},[494,4238,1023],{"class":925},[494,4240,929],{"class":650},[494,4242,922],{"class":513},[494,4244,1030],{"class":925},[494,4246,1693],{"class":650},[494,4248,4249,4251,4253,4255,4257,4259,4261],{"class":496,"line":2313},[494,4250,2115],{"class":650},[494,4252,922],{"class":513},[494,4254,1030],{"class":925},[494,4256,929],{"class":650},[494,4258,922],{"class":513},[494,4260,1726],{"class":925},[494,4262,1693],{"class":650},[494,4264,4265],{"class":496,"line":2331},[494,4266,872],{"emptyLinePlaceholder":871},[494,4268,4269,4272,4274,4276,4278,4280,4282],{"class":496,"line":2336},[494,4270,4271],{"class":650}," --color-gray-50: oklch(0",[494,4273,922],{"class":513},[494,4275,2530],{"class":925},[494,4277,929],{"class":650},[494,4279,922],{"class":513},[494,4281,934],{"class":925},[494,4283,1693],{"class":650},[494,4285,4286,4289,4291,4293,4295,4297,4299],{"class":496,"line":2342},[494,4287,4288],{"class":650}," --color-gray-100: oklch(0",[494,4290,922],{"class":513},[494,4292,2550],{"class":925},[494,4294,929],{"class":650},[494,4296,922],{"class":513},[494,4298,934],{"class":925},[494,4300,1693],{"class":650},[494,4302,4303,4306,4308,4310,4312,4314,4316],{"class":496,"line":2361},[494,4304,4305],{"class":650}," --color-gray-500: oklch(0",[494,4307,922],{"class":513},[494,4309,2623],{"class":925},[494,4311,929],{"class":650},[494,4313,922],{"class":513},[494,4315,934],{"class":925},[494,4317,1693],{"class":650},[494,4319,4320,4323,4325,4327,4329,4331,4333],{"class":496,"line":2379},[494,4321,4322],{"class":650}," --color-gray-900: oklch(0",[494,4324,922],{"class":513},[494,4326,1011],{"class":925},[494,4328,929],{"class":650},[494,4330,922],{"class":513},[494,4332,934],{"class":925},[494,4334,1693],{"class":650},[494,4336,4337],{"class":496,"line":2398},[494,4338,872],{"emptyLinePlaceholder":871},[494,4340,4341,4343,4345,4347,4349,4351,4353],{"class":496,"line":2418},[494,4342,2741],{"class":650},[494,4344,922],{"class":513},[494,4346,2746],{"class":925},[494,4348,929],{"class":650},[494,4350,922],{"class":513},[494,4352,1572],{"class":925},[494,4354,2755],{"class":650},[494,4356,4357,4359,4361,4363,4365,4367,4369],{"class":496,"line":2437},[494,4358,2780],{"class":650},[494,4360,922],{"class":513},[494,4362,1023],{"class":925},[494,4364,929],{"class":650},[494,4366,922],{"class":513},[494,4368,1097],{"class":925},[494,4370,2793],{"class":650},[494,4372,4373],{"class":496,"line":2455},[494,4374,812],{"class":513},[494,4376,4377],{"class":496,"line":2473},[494,4378,872],{"emptyLinePlaceholder":871},[494,4380,4381],{"class":496,"line":2492},[494,4382,4383],{"class":500},"\u002F* Result: Chỉ dùng được các màu đã định nghĩa *\u002F\n",[494,4385,4386],{"class":496,"line":2511},[494,4387,4388],{"class":500},"\u002F* text-red-500 → không tồn tại! *\u002F\n",[446,4390,4392,4397],{"color":1303,"icon":4391},"i-lucide-info",[432,4393,4394],{},[436,4395,4396],{},"Khi nào extend, khi nào override?",[1883,4398,4399,4405],{},[1886,4400,4401,4404],{},[436,4402,4403],{},"Extend (recommended cho đa số):"," Bạn muốn đầy đủ color palette + thêm brand colors. Nhanh, an toàn.",[1886,4406,4407,4409],{},[436,4408,3983],{}," Design system nghiêm ngặt — bạn muốn giới hạn developer chỉ dùng màu được duyệt. Tốn công hơn nhưng consistency cao hơn.",[4411,4412],"hr",{},[427,4414,4416,4417,780],{"id":4415},"_2-custom-utilities-utility","2. Custom Utilities (",[441,4418,4419],{},"@utility",[432,4421,4422,4424],{},[441,4423,4419],{}," cho phép bạn tạo custom utility class giống như built-in Tailwind utilities.",[480,4426,4428],{"id":4427},"_21-cú-pháp-cơ-bản","2.1. Cú Pháp Cơ Bản",[485,4430,4432],{"className":815,"code":4431,"language":817,"meta":490,"style":490},"@utility text-balance {\n text-wrap: balance;\n}\n\n@utility scrollbar-hide {\n \u002F* Ẩn scrollbar nhưng vẫn scroll được *\u002F\n -ms-overflow-style: none;\n scrollbar-width: none;\n &::-webkit-scrollbar {\n display: none;\n }\n}\n",[441,4433,4434,4443,4451,4455,4459,4468,4473,4478,4486,4499,4511,4515],{"__ignoreMap":490},[494,4435,4436,4438,4441],{"class":496,"line":497},[494,4437,4419],{"class":834},[494,4439,4440],{"class":650}," text-balance ",[494,4442,3715],{"class":513},[494,4444,4445,4448],{"class":496,"line":504},[494,4446,4447],{"class":925}," text-wrap",[494,4449,4450],{"class":650},": balance;\n",[494,4452,4453],{"class":496,"line":510},[494,4454,812],{"class":650},[494,4456,4457],{"class":496,"line":523},[494,4458,872],{"emptyLinePlaceholder":871},[494,4460,4461,4463,4466],{"class":496,"line":535},[494,4462,4419],{"class":834},[494,4464,4465],{"class":650}," scrollbar-hide ",[494,4467,3715],{"class":513},[494,4469,4470],{"class":496,"line":545},[494,4471,4472],{"class":500}," \u002F* Ẩn scrollbar nhưng vẫn scroll được *\u002F\n",[494,4474,4475],{"class":496,"line":555},[494,4476,4477],{"class":650}," -ms-overflow-style: none;\n",[494,4479,4480,4483],{"class":496,"line":565},[494,4481,4482],{"class":925}," scrollbar-width",[494,4484,4485],{"class":650},": none;\n",[494,4487,4488,4491,4494,4497],{"class":496,"line":586},[494,4489,4490],{"class":650}," &",[494,4492,4493],{"class":513},"::",[494,4495,4496],{"class":3857},"-webkit-scrollbar",[494,4498,520],{"class":513},[494,4500,4501,4504,4506,4509],{"class":496,"line":603},[494,4502,4503],{"class":1266}," display",[494,4505,530],{"class":513},[494,4507,4508],{"class":650}," none",[494,4510,847],{"class":513},[494,4512,4513],{"class":496,"line":620},[494,4514,3768],{"class":513},[494,4516,4517],{"class":496,"line":626},[494,4518,812],{"class":513},[485,4520,4524],{"className":4521,"code":4522,"language":4523,"meta":490,"style":490},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Sử dụng như built-in utility -->\n\u003Ch1 class=\"text-balance\">Tiêu đề dài tự động wrap đẹp từng dòng\u003C\u002Fh1>\n\u003Cdiv class=\"overflow-auto scrollbar-hide\">Nội dung scroll được nhưng không thấy scrollbar\u003C\u002Fdiv>\n","html",[441,4525,4526,4531,4566],{"__ignoreMap":490},[494,4527,4528],{"class":496,"line":497},[494,4529,4530],{"class":500},"\u003C!-- Sử dụng như built-in utility -->\n",[494,4532,4533,4536,4539,4542,4545,4547,4550,4552,4555,4558,4561,4563],{"class":496,"line":504},[494,4534,4535],{"class":513},"\u003C",[494,4537,4538],{"class":526},"h1",[494,4540,4541],{"class":3857}," class",[494,4543,4544],{"class":513},"=",[494,4546,844],{"class":513},[494,4548,4549],{"class":576},"text-balance",[494,4551,844],{"class":513},[494,4553,4554],{"class":513},">",[494,4556,4557],{"class":650},"Tiêu đề dài tự động wrap đẹp từng dòng",[494,4559,4560],{"class":513},"\u003C\u002F",[494,4562,4538],{"class":526},[494,4564,4565],{"class":513},">\n",[494,4567,4568,4570,4573,4575,4577,4579,4582,4584,4586,4589,4591,4593],{"class":496,"line":510},[494,4569,4535],{"class":513},[494,4571,4572],{"class":526},"div",[494,4574,4541],{"class":3857},[494,4576,4544],{"class":513},[494,4578,844],{"class":513},[494,4580,4581],{"class":576},"overflow-auto scrollbar-hide",[494,4583,844],{"class":513},[494,4585,4554],{"class":513},[494,4587,4588],{"class":650},"Nội dung scroll được nhưng không thấy scrollbar",[494,4590,4560],{"class":513},[494,4592,4572],{"class":526},[494,4594,4565],{"class":513},[480,4596,4598,4599,4602],{"id":4597},"_22-bài-tập-3-custom-scrollbar-hide-utility","2.2. BÀI TẬP 3 — Custom ",[441,4600,4601],{},"scrollbar-hide"," Utility",[432,4604,4605],{},[436,4606,1905],{},[485,4608,4610],{"className":815,"code":4609,"language":817,"meta":490,"style":490},"\u002F* scrollbar-utilities.css *\u002F\n@import \"tailwindcss\";\n\n@utility scrollbar-hide {\n -ms-overflow-style: none;\n scrollbar-width: none;\n &::-webkit-scrollbar {\n display: none;\n }\n}\n\n@utility scrollbar-default {\n -ms-overflow-style: auto;\n scrollbar-width: auto;\n &::-webkit-scrollbar {\n display: block;\n }\n}\n\n\u002F* Sử dụng trong HTML:\n\u003Cdiv class=\"overflow-auto scrollbar-hide hover:scrollbar-default\">\n Component ẩn scrollbar, hiện khi hover\n\u003C\u002Fdiv>\n*\u002F\n",[441,4611,4612,4617,4629,4633,4641,4645,4651,4661,4671,4675,4679,4683,4692,4697,4704,4714,4725,4729,4733,4737,4742,4747,4752,4757],{"__ignoreMap":490},[494,4613,4614],{"class":496,"line":497},[494,4615,4616],{"class":500},"\u002F* scrollbar-utilities.css *\u002F\n",[494,4618,4619,4621,4623,4625,4627],{"class":496,"line":504},[494,4620,835],{"class":834},[494,4622,838],{"class":513},[494,4624,841],{"class":576},[494,4626,844],{"class":513},[494,4628,847],{"class":513},[494,4630,4631],{"class":496,"line":510},[494,4632,872],{"emptyLinePlaceholder":871},[494,4634,4635,4637,4639],{"class":496,"line":523},[494,4636,4419],{"class":834},[494,4638,4465],{"class":650},[494,4640,3715],{"class":513},[494,4642,4643],{"class":496,"line":535},[494,4644,4477],{"class":650},[494,4646,4647,4649],{"class":496,"line":545},[494,4648,4482],{"class":925},[494,4650,4485],{"class":650},[494,4652,4653,4655,4657,4659],{"class":496,"line":555},[494,4654,4490],{"class":650},[494,4656,4493],{"class":513},[494,4658,4496],{"class":3857},[494,4660,520],{"class":513},[494,4662,4663,4665,4667,4669],{"class":496,"line":565},[494,4664,4503],{"class":1266},[494,4666,530],{"class":513},[494,4668,4508],{"class":650},[494,4670,847],{"class":513},[494,4672,4673],{"class":496,"line":586},[494,4674,3768],{"class":513},[494,4676,4677],{"class":496,"line":603},[494,4678,812],{"class":513},[494,4680,4681],{"class":496,"line":620},[494,4682,872],{"emptyLinePlaceholder":871},[494,4684,4685,4687,4690],{"class":496,"line":626},[494,4686,4419],{"class":834},[494,4688,4689],{"class":650}," scrollbar-default ",[494,4691,3715],{"class":513},[494,4693,4694],{"class":496,"line":632},[494,4695,4696],{"class":650}," -ms-overflow-style: auto;\n",[494,4698,4699,4701],{"class":496,"line":642},[494,4700,4482],{"class":925},[494,4702,4703],{"class":650},": auto;\n",[494,4705,4706,4708,4710,4712],{"class":496,"line":676},[494,4707,4490],{"class":650},[494,4709,4493],{"class":513},[494,4711,4496],{"class":3857},[494,4713,520],{"class":513},[494,4715,4716,4718,4720,4723],{"class":496,"line":681},[494,4717,4503],{"class":1266},[494,4719,530],{"class":513},[494,4721,4722],{"class":650}," block",[494,4724,847],{"class":513},[494,4726,4727],{"class":496,"line":691},[494,4728,3768],{"class":513},[494,4730,4731],{"class":496,"line":713},[494,4732,812],{"class":513},[494,4734,4735],{"class":496,"line":734},[494,4736,872],{"emptyLinePlaceholder":871},[494,4738,4739],{"class":496,"line":740},[494,4740,4741],{"class":500},"\u002F* Sử dụng trong HTML:\n",[494,4743,4744],{"class":496,"line":746},[494,4745,4746],{"class":500},"\u003Cdiv class=\"overflow-auto scrollbar-hide hover:scrollbar-default\">\n",[494,4748,4749],{"class":496,"line":752},[494,4750,4751],{"class":500}," Component ẩn scrollbar, hiện khi hover\n",[494,4753,4754],{"class":496,"line":763},[494,4755,4756],{"class":500},"\u003C\u002Fdiv>\n",[494,4758,4759],{"class":496,"line":785},[494,4760,4761],{"class":500},"*\u002F\n",[480,4763,4765,4766,4769],{"id":4764},"_23-bài-tập-4-custom-text-gradient-utility-cho-gradient-text","2.3. BÀI TẬP 4 — Custom ",[441,4767,4768],{},"text-gradient"," Utility cho Gradient Text",[432,4771,4772],{},[436,4773,1905],{},[485,4775,4777],{"className":815,"code":4776,"language":817,"meta":490,"style":490},"\u002F* gradient-utilities.css *\u002F\n@import \"tailwindcss\";\n\n@utility text-gradient {\n background: linear-gradient(to right, var(--tw-gradient-stops));\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n\n\u002F* HTML usage:\n\u003Ch1 class=\"text-4xl font-bold text-gradient from-blue-500 to-purple-600\">\n Gradient Text với Tailwind v4\n\u003C\u002Fh1>\n\n\u003Ch1 class=\"text-4xl font-bold text-gradient from-pink-500 via-red-500 to-yellow-500\">\n Three-color gradient text\n\u003C\u002Fh1>\n*\u002F\n",[441,4778,4779,4784,4796,4800,4809,4819,4824,4832,4837,4841,4845,4850,4855,4860,4865,4869,4874,4879,4883],{"__ignoreMap":490},[494,4780,4781],{"class":496,"line":497},[494,4782,4783],{"class":500},"\u002F* gradient-utilities.css *\u002F\n",[494,4785,4786,4788,4790,4792,4794],{"class":496,"line":504},[494,4787,835],{"class":834},[494,4789,838],{"class":513},[494,4791,841],{"class":576},[494,4793,844],{"class":513},[494,4795,847],{"class":513},[494,4797,4798],{"class":496,"line":510},[494,4799,872],{"emptyLinePlaceholder":871},[494,4801,4802,4804,4807],{"class":496,"line":523},[494,4803,4419],{"class":834},[494,4805,4806],{"class":650}," text-gradient ",[494,4808,3715],{"class":513},[494,4810,4811,4814,4816],{"class":496,"line":535},[494,4812,4813],{"class":650}," background: linear-gradient(to right",[494,4815,661],{"class":513},[494,4817,4818],{"class":650}," var(--tw-gradient-stops));\n",[494,4820,4821],{"class":496,"line":545},[494,4822,4823],{"class":650}," -webkit-background-clip: text;\n",[494,4825,4826,4829],{"class":496,"line":555},[494,4827,4828],{"class":925}," background-clip",[494,4830,4831],{"class":650},": text;\n",[494,4833,4834],{"class":496,"line":565},[494,4835,4836],{"class":650}," -webkit-text-fill-color: transparent;\n",[494,4838,4839],{"class":496,"line":586},[494,4840,812],{"class":650},[494,4842,4843],{"class":496,"line":603},[494,4844,872],{"emptyLinePlaceholder":871},[494,4846,4847],{"class":496,"line":620},[494,4848,4849],{"class":500},"\u002F* HTML usage:\n",[494,4851,4852],{"class":496,"line":626},[494,4853,4854],{"class":500},"\u003Ch1 class=\"text-4xl font-bold text-gradient from-blue-500 to-purple-600\">\n",[494,4856,4857],{"class":496,"line":632},[494,4858,4859],{"class":500}," Gradient Text với Tailwind v4\n",[494,4861,4862],{"class":496,"line":642},[494,4863,4864],{"class":500},"\u003C\u002Fh1>\n",[494,4866,4867],{"class":496,"line":676},[494,4868,872],{"emptyLinePlaceholder":871},[494,4870,4871],{"class":496,"line":681},[494,4872,4873],{"class":500},"\u003Ch1 class=\"text-4xl font-bold text-gradient from-pink-500 via-red-500 to-yellow-500\">\n",[494,4875,4876],{"class":496,"line":691},[494,4877,4878],{"class":500}," Three-color gradient text\n",[494,4880,4881],{"class":496,"line":713},[494,4882,4864],{"class":500},[494,4884,4885],{"class":496,"line":734},[494,4886,4761],{"class":500},[446,4888,4889,4891,4892,4895],{"color":1303,"icon":1304},[441,4890,4419],{}," trong v4 có thể dùng ",[441,4893,4894],{},"&"," để nhắm vào chính element đang được style, và có thể chứa nested selectors. Điều này mạnh hơn nhiều so với plugin API cũ.",[480,4897,4899],{"id":4898},"_24-utility-có-biến-thể-variants-aware","2.4. Utility Có Biến Thể (variants-aware)",[485,4901,4903],{"className":815,"code":4902,"language":817,"meta":490,"style":490},"@utility content-auto {\n content-visibility: auto;\n}\n\n\u002F* Utility này tự động hoạt động với mọi variant: *\u002F\n\u002F* hover:content-auto, md:content-auto, dark:content-auto *\u002F\n",[441,4904,4905,4914,4921,4925,4929,4934],{"__ignoreMap":490},[494,4906,4907,4909,4912],{"class":496,"line":497},[494,4908,4419],{"class":834},[494,4910,4911],{"class":650}," content-auto ",[494,4913,3715],{"class":513},[494,4915,4916,4919],{"class":496,"line":504},[494,4917,4918],{"class":925}," content-visibility",[494,4920,4703],{"class":650},[494,4922,4923],{"class":496,"line":510},[494,4924,812],{"class":650},[494,4926,4927],{"class":496,"line":523},[494,4928,872],{"emptyLinePlaceholder":871},[494,4930,4931],{"class":496,"line":535},[494,4932,4933],{"class":500},"\u002F* Utility này tự động hoạt động với mọi variant: *\u002F\n",[494,4935,4936],{"class":496,"line":545},[494,4937,4938],{"class":500},"\u002F* hover:content-auto, md:content-auto, dark:content-auto *\u002F\n",[4411,4940],{},[427,4942,4944,4945,780],{"id":4943},"_3-custom-variants-custom-variant","3. Custom Variants (",[441,4946,4947],{},"@custom-variant",[432,4949,4950],{},"Đã đề cập ở bài Responsive & Dark Mode, nhưng ở đây đi sâu hơn vào kỹ thuật.",[480,4952,4954,4955,4957],{"id":4953},"_31-các-pattern-custom-variant-phổ-biến","3.1. Các Pattern ",[441,4956,4947],{}," Phổ Biến",[485,4959,4961],{"className":815,"code":4960,"language":817,"meta":490,"style":490},"\u002F* Pattern 1: Variant dựa trên class cha *\u002F\n@custom-variant logged-in (&:where(.logged-in, .logged-in *));\n\n\u002F* Pattern 2: Variant dựa trên attribute *\u002F\n@custom-variant aria-current (&[aria-current=\"page\"]);\n\n\u002F* Pattern 3: Variant dựa trên pseudo-class *\u002F\n@custom-variant any-pointer (&:any-pointer);\n\n\u002F* Pattern 4: Variant dựa trên media query *\u002F\n@custom-variant touch (&:where(.touch, .touch *));\n\n\u002F* Pattern 5: Variant cho animation state *\u002F\n@custom-variant leaving (&.leaving);\n",[441,4962,4963,4968,4977,4981,4986,4995,4999,5004,5013,5017,5022,5031,5035,5040],{"__ignoreMap":490},[494,4964,4965],{"class":496,"line":497},[494,4966,4967],{"class":500},"\u002F* Pattern 1: Variant dựa trên class cha *\u002F\n",[494,4969,4970,4972,4975],{"class":496,"line":504},[494,4971,4947],{"class":834},[494,4973,4974],{"class":650}," logged-in (&:where(.logged-in, .logged-in *))",[494,4976,847],{"class":513},[494,4978,4979],{"class":496,"line":510},[494,4980,872],{"emptyLinePlaceholder":871},[494,4982,4983],{"class":496,"line":523},[494,4984,4985],{"class":500},"\u002F* Pattern 2: Variant dựa trên attribute *\u002F\n",[494,4987,4988,4990,4993],{"class":496,"line":535},[494,4989,4947],{"class":834},[494,4991,4992],{"class":650}," aria-current (&[aria-current=\"page\"])",[494,4994,847],{"class":513},[494,4996,4997],{"class":496,"line":545},[494,4998,872],{"emptyLinePlaceholder":871},[494,5000,5001],{"class":496,"line":555},[494,5002,5003],{"class":500},"\u002F* Pattern 3: Variant dựa trên pseudo-class *\u002F\n",[494,5005,5006,5008,5011],{"class":496,"line":565},[494,5007,4947],{"class":834},[494,5009,5010],{"class":650}," any-pointer (&:any-pointer)",[494,5012,847],{"class":513},[494,5014,5015],{"class":496,"line":586},[494,5016,872],{"emptyLinePlaceholder":871},[494,5018,5019],{"class":496,"line":603},[494,5020,5021],{"class":500},"\u002F* Pattern 4: Variant dựa trên media query *\u002F\n",[494,5023,5024,5026,5029],{"class":496,"line":620},[494,5025,4947],{"class":834},[494,5027,5028],{"class":650}," touch (&:where(.touch, .touch *))",[494,5030,847],{"class":513},[494,5032,5033],{"class":496,"line":626},[494,5034,872],{"emptyLinePlaceholder":871},[494,5036,5037],{"class":496,"line":632},[494,5038,5039],{"class":500},"\u002F* Pattern 5: Variant cho animation state *\u002F\n",[494,5041,5042,5044,5047],{"class":496,"line":642},[494,5043,4947],{"class":834},[494,5045,5046],{"class":650}," leaving (&.leaving)",[494,5048,847],{"class":513},[480,5050,5052,5053],{"id":5051},"_32-bài-tập-5-multi-theme-system-với-custom-variant","3.2. BÀI TẬP 5 — Multi-Theme System với ",[441,5054,4947],{},[432,5056,5057,5059],{},[436,5058,1880],{}," Tạo 4 theme (light, dark, high-contrast, sepia) với custom variants.",[432,5061,5062],{},[436,5063,1905],{},[485,5065,5067],{"className":815,"code":5066,"language":817,"meta":490,"style":490},"\u002F* multi-theme.css *\u002F\n@import \"tailwindcss\";\n\n\u002F* Định nghĩa variants cho từng theme *\u002F\n@custom-variant theme-dark (&:where(.theme-dark, .theme-dark *));\n@custom-variant theme-high-contrast (&:where(.theme-high-contrast, .theme-high-contrast *));\n@custom-variant theme-sepia (&:where(.theme-sepia, .theme-sepia *));\n\n\u002F* Có thể dùng trong HTML:\n\u003Chtml class=\"theme-dark\">\n \u003Cdiv class=\"bg-white theme-dark:bg-gray-900 \n theme-high-contrast:bg-black \n theme-sepia:bg-amber-50\">\n \u003Cp class=\"text-gray-900 theme-dark:text-white \n theme-high-contrast:text-yellow-300 \n theme-sepia:text-amber-900\">\n Nội dung thích nghi theo theme\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n\u003C\u002Fhtml>\n*\u002F\n",[441,5068,5069,5074,5086,5090,5095,5104,5113,5122,5126,5131,5136,5141,5146,5151,5156,5161,5166,5171,5176,5181,5186],{"__ignoreMap":490},[494,5070,5071],{"class":496,"line":497},[494,5072,5073],{"class":500},"\u002F* multi-theme.css *\u002F\n",[494,5075,5076,5078,5080,5082,5084],{"class":496,"line":504},[494,5077,835],{"class":834},[494,5079,838],{"class":513},[494,5081,841],{"class":576},[494,5083,844],{"class":513},[494,5085,847],{"class":513},[494,5087,5088],{"class":496,"line":510},[494,5089,872],{"emptyLinePlaceholder":871},[494,5091,5092],{"class":496,"line":523},[494,5093,5094],{"class":500},"\u002F* Định nghĩa variants cho từng theme *\u002F\n",[494,5096,5097,5099,5102],{"class":496,"line":535},[494,5098,4947],{"class":834},[494,5100,5101],{"class":650}," theme-dark (&:where(.theme-dark, .theme-dark *))",[494,5103,847],{"class":513},[494,5105,5106,5108,5111],{"class":496,"line":545},[494,5107,4947],{"class":834},[494,5109,5110],{"class":650}," theme-high-contrast (&:where(.theme-high-contrast, .theme-high-contrast *))",[494,5112,847],{"class":513},[494,5114,5115,5117,5120],{"class":496,"line":555},[494,5116,4947],{"class":834},[494,5118,5119],{"class":650}," theme-sepia (&:where(.theme-sepia, .theme-sepia *))",[494,5121,847],{"class":513},[494,5123,5124],{"class":496,"line":565},[494,5125,872],{"emptyLinePlaceholder":871},[494,5127,5128],{"class":496,"line":586},[494,5129,5130],{"class":500},"\u002F* Có thể dùng trong HTML:\n",[494,5132,5133],{"class":496,"line":603},[494,5134,5135],{"class":500},"\u003Chtml class=\"theme-dark\">\n",[494,5137,5138],{"class":496,"line":620},[494,5139,5140],{"class":500}," \u003Cdiv class=\"bg-white theme-dark:bg-gray-900 \n",[494,5142,5143],{"class":496,"line":626},[494,5144,5145],{"class":500}," theme-high-contrast:bg-black \n",[494,5147,5148],{"class":496,"line":632},[494,5149,5150],{"class":500}," theme-sepia:bg-amber-50\">\n",[494,5152,5153],{"class":496,"line":642},[494,5154,5155],{"class":500}," \u003Cp class=\"text-gray-900 theme-dark:text-white \n",[494,5157,5158],{"class":496,"line":676},[494,5159,5160],{"class":500}," theme-high-contrast:text-yellow-300 \n",[494,5162,5163],{"class":496,"line":681},[494,5164,5165],{"class":500}," theme-sepia:text-amber-900\">\n",[494,5167,5168],{"class":496,"line":691},[494,5169,5170],{"class":500}," Nội dung thích nghi theo theme\n",[494,5172,5173],{"class":496,"line":713},[494,5174,5175],{"class":500}," \u003C\u002Fp>\n",[494,5177,5178],{"class":496,"line":734},[494,5179,5180],{"class":500}," \u003C\u002Fdiv>\n",[494,5182,5183],{"class":496,"line":740},[494,5184,5185],{"class":500},"\u003C\u002Fhtml>\n",[494,5187,5188],{"class":496,"line":746},[494,5189,4761],{"class":500},[480,5191,5193,5194,5197],{"id":5192},"_33-bài-tập-6-custom-child-variant-cho-direct-child-styling","3.3. BÀI TẬP 6 — Custom ",[441,5195,5196],{},"child:*"," Variant cho Direct Child Styling",[432,5199,5200,5202],{},[436,5201,1880],{}," Tạo variant cho phép style trực tiếp child elements mà không cần thêm class cho từng child.",[432,5204,5205],{},[436,5206,1905],{},[485,5208,5210],{"className":815,"code":5209,"language":817,"meta":490,"style":490},"\u002F* child-variant.css *\u002F\n@import \"tailwindcss\";\n\n\u002F* Variant nhắm vào tất cả direct children *\u002F\n@custom-variant children (& > *);\n\n\u002F* Variant nhắm vào direct child cụ thể *\u002F\n@custom-variant child-first (& > *:first-child);\n@custom-variant child-last (& > *:last-child);\n@custom-variant child-even (& > *:nth-child(even));\n@custom-variant child-odd (& > *:nth-child(odd));\n\n\u002F* Variant nhắm vào children khi parent được hover *\u002F\n@custom-variant group-children (.group:hover & > *);\n\n\u002F* HTML usage:\n\u003Cul class=\"space-y-2 children:bg-gray-100 children:rounded children:p-3 \n group-children:bg-blue-50 group\">\n \u003Cli>Item 1\u003C\u002Fli>\n \u003Cli>Item 2 — tất cả tự có bg-gray-100, rounded, p-3\u003C\u002Fli>\n \u003Cli>Item 3 — cả group cùng đổi màu khi hover ul\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003Cnav class=\"flex gap-2 \n children:px-4 children:py-2 children:rounded-lg \n children:text-sm children:font-medium\n children:transition-colors\">\n \u003Ca href=\"#\" class=\"bg-blue-600 text-white\">Home\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"text-gray-600 hover:bg-gray-100\">About\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"text-gray-600 hover:bg-gray-100\">Contact\u003C\u002Fa>\n\u003C\u002Fnav>\n*\u002F\n",[441,5211,5212,5217,5229,5233,5238,5247,5251,5256,5265,5274,5283,5292,5296,5301,5310,5314,5318,5323,5328,5333,5338,5343,5348,5352,5357,5362,5367,5372,5377,5382,5387,5392],{"__ignoreMap":490},[494,5213,5214],{"class":496,"line":497},[494,5215,5216],{"class":500},"\u002F* child-variant.css *\u002F\n",[494,5218,5219,5221,5223,5225,5227],{"class":496,"line":504},[494,5220,835],{"class":834},[494,5222,838],{"class":513},[494,5224,841],{"class":576},[494,5226,844],{"class":513},[494,5228,847],{"class":513},[494,5230,5231],{"class":496,"line":510},[494,5232,872],{"emptyLinePlaceholder":871},[494,5234,5235],{"class":496,"line":523},[494,5236,5237],{"class":500},"\u002F* Variant nhắm vào tất cả direct children *\u002F\n",[494,5239,5240,5242,5245],{"class":496,"line":535},[494,5241,4947],{"class":834},[494,5243,5244],{"class":650}," children (& > *)",[494,5246,847],{"class":513},[494,5248,5249],{"class":496,"line":545},[494,5250,872],{"emptyLinePlaceholder":871},[494,5252,5253],{"class":496,"line":555},[494,5254,5255],{"class":500},"\u002F* Variant nhắm vào direct child cụ thể *\u002F\n",[494,5257,5258,5260,5263],{"class":496,"line":565},[494,5259,4947],{"class":834},[494,5261,5262],{"class":650}," child-first (& > *:first-child)",[494,5264,847],{"class":513},[494,5266,5267,5269,5272],{"class":496,"line":586},[494,5268,4947],{"class":834},[494,5270,5271],{"class":650}," child-last (& > *:last-child)",[494,5273,847],{"class":513},[494,5275,5276,5278,5281],{"class":496,"line":603},[494,5277,4947],{"class":834},[494,5279,5280],{"class":650}," child-even (& > *:nth-child(even))",[494,5282,847],{"class":513},[494,5284,5285,5287,5290],{"class":496,"line":620},[494,5286,4947],{"class":834},[494,5288,5289],{"class":650}," child-odd (& > *:nth-child(odd))",[494,5291,847],{"class":513},[494,5293,5294],{"class":496,"line":626},[494,5295,872],{"emptyLinePlaceholder":871},[494,5297,5298],{"class":496,"line":632},[494,5299,5300],{"class":500},"\u002F* Variant nhắm vào children khi parent được hover *\u002F\n",[494,5302,5303,5305,5308],{"class":496,"line":642},[494,5304,4947],{"class":834},[494,5306,5307],{"class":650}," group-children (.group:hover & > *)",[494,5309,847],{"class":513},[494,5311,5312],{"class":496,"line":676},[494,5313,872],{"emptyLinePlaceholder":871},[494,5315,5316],{"class":496,"line":681},[494,5317,4849],{"class":500},[494,5319,5320],{"class":496,"line":691},[494,5321,5322],{"class":500},"\u003Cul class=\"space-y-2 children:bg-gray-100 children:rounded children:p-3 \n",[494,5324,5325],{"class":496,"line":713},[494,5326,5327],{"class":500}," group-children:bg-blue-50 group\">\n",[494,5329,5330],{"class":496,"line":734},[494,5331,5332],{"class":500}," \u003Cli>Item 1\u003C\u002Fli>\n",[494,5334,5335],{"class":496,"line":740},[494,5336,5337],{"class":500}," \u003Cli>Item 2 — tất cả tự có bg-gray-100, rounded, p-3\u003C\u002Fli>\n",[494,5339,5340],{"class":496,"line":746},[494,5341,5342],{"class":500}," \u003Cli>Item 3 — cả group cùng đổi màu khi hover ul\u003C\u002Fli>\n",[494,5344,5345],{"class":496,"line":752},[494,5346,5347],{"class":500},"\u003C\u002Ful>\n",[494,5349,5350],{"class":496,"line":763},[494,5351,872],{"emptyLinePlaceholder":871},[494,5353,5354],{"class":496,"line":785},[494,5355,5356],{"class":500},"\u003Cnav class=\"flex gap-2 \n",[494,5358,5359],{"class":496,"line":803},[494,5360,5361],{"class":500}," children:px-4 children:py-2 children:rounded-lg \n",[494,5363,5364],{"class":496,"line":809},[494,5365,5366],{"class":500}," children:text-sm children:font-medium\n",[494,5368,5369],{"class":496,"line":1157},[494,5370,5371],{"class":500}," children:transition-colors\">\n",[494,5373,5374],{"class":496,"line":1163},[494,5375,5376],{"class":500}," \u003Ca href=\"#\" class=\"bg-blue-600 text-white\">Home\u003C\u002Fa>\n",[494,5378,5379],{"class":496,"line":1169},[494,5380,5381],{"class":500}," \u003Ca href=\"#\" class=\"text-gray-600 hover:bg-gray-100\">About\u003C\u002Fa>\n",[494,5383,5384],{"class":496,"line":2313},[494,5385,5386],{"class":500}," \u003Ca href=\"#\" class=\"text-gray-600 hover:bg-gray-100\">Contact\u003C\u002Fa>\n",[494,5388,5389],{"class":496,"line":2331},[494,5390,5391],{"class":500},"\u003C\u002Fnav>\n",[494,5393,5394],{"class":496,"line":2336},[494,5395,4761],{"class":500},[4411,5397],{},[427,5399,5401],{"id":5400},"_4-functions-directives","4. Functions & Directives",[480,5403,5405,5406,5409],{"id":5404},"_41-import-tailwindcss-all-in-one","4.1. ",[441,5407,5408],{},"@import \"tailwindcss\""," — All-in-One",[485,5411,5413],{"className":815,"code":5412,"language":817,"meta":490,"style":490},"\u002F* v4: một dòng thay thế cả 3 directives của v3 *\u002F\n@import \"tailwindcss\";\n\n\u002F* Tương đương với (v3): *\u002F\n\u002F* @tailwind base; *\u002F\n\u002F* @tailwind components; *\u002F\n\u002F* @tailwind utilities; *\u002F\n\u002F* + tự động expose tất cả tokens thành CSS variables *\u002F\n",[441,5414,5415,5420,5432,5436,5441,5446,5451,5456],{"__ignoreMap":490},[494,5416,5417],{"class":496,"line":497},[494,5418,5419],{"class":500},"\u002F* v4: một dòng thay thế cả 3 directives của v3 *\u002F\n",[494,5421,5422,5424,5426,5428,5430],{"class":496,"line":504},[494,5423,835],{"class":834},[494,5425,838],{"class":513},[494,5427,841],{"class":576},[494,5429,844],{"class":513},[494,5431,847],{"class":513},[494,5433,5434],{"class":496,"line":510},[494,5435,872],{"emptyLinePlaceholder":871},[494,5437,5438],{"class":496,"line":523},[494,5439,5440],{"class":500},"\u002F* Tương đương với (v3): *\u002F\n",[494,5442,5443],{"class":496,"line":535},[494,5444,5445],{"class":500},"\u002F* @tailwind base; *\u002F\n",[494,5447,5448],{"class":496,"line":545},[494,5449,5450],{"class":500},"\u002F* @tailwind components; *\u002F\n",[494,5452,5453],{"class":496,"line":555},[494,5454,5455],{"class":500},"\u002F* @tailwind utilities; *\u002F\n",[494,5457,5458],{"class":496,"line":565},[494,5459,5460],{"class":500},"\u002F* + tự động expose tất cả tokens thành CSS variables *\u002F\n",[480,5462,5464,5465,5467],{"id":5463},"_42-layer-tổ-chức-css","4.2. ",[441,5466,3709],{}," — Tổ Chức CSS",[485,5469,5471],{"className":815,"code":5470,"language":817,"meta":490,"style":490},"@import \"tailwindcss\";\n\n\u002F* Layer 1: Base — style toàn cục, reset *\u002F\n@layer base {\n h1 { font-size: 2rem; }\n h2 { font-size: 1.5rem; }\n a { color: var(--color-primary-600); }\n}\n\n\u002F* Layer 2: Components — class tái sử dụng *\u002F\n@layer components {\n .card {\n background: white;\n border-radius: var(--radius-xl);\n padding: var(--spacing-6);\n box-shadow: var(--shadow-card);\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--radius-lg);\n font-weight: 500;\n padding: 0.625rem 1.25rem;\n font-size: 0.875rem;\n transition: all 0.15s ease;\n cursor: pointer;\n }\n}\n\n\u002F* Layer 3: Utilities — class đơn lẻ (mặc định) *\u002F\n@layer utilities {\n \u002F* Có thể viết thêm utilities ở đây, *\u002F\n \u002F* nhưng @utility (bên ngoài @layer) được khuyến nghị hơn *\u002F\n}\n",[441,5472,5473,5485,5489,5494,5502,5521,5539,5562,5566,5570,5575,5584,5594,5606,5621,5637,5653,5657,5661,5670,5681,5693,5704,5719,5731,5745,5757,5775,5787,5791,5795,5799,5804,5813,5818,5823],{"__ignoreMap":490},[494,5474,5475,5477,5479,5481,5483],{"class":496,"line":497},[494,5476,835],{"class":834},[494,5478,838],{"class":513},[494,5480,841],{"class":576},[494,5482,844],{"class":513},[494,5484,847],{"class":513},[494,5486,5487],{"class":496,"line":504},[494,5488,872],{"emptyLinePlaceholder":871},[494,5490,5491],{"class":496,"line":510},[494,5492,5493],{"class":500},"\u002F* Layer 1: Base — style toàn cục, reset *\u002F\n",[494,5495,5496,5498,5500],{"class":496,"line":523},[494,5497,3709],{"class":834},[494,5499,3712],{"class":650},[494,5501,3715],{"class":513},[494,5503,5504,5507,5509,5512,5514,5517,5519],{"class":496,"line":535},[494,5505,5506],{"class":925}," h1",[494,5508,3412],{"class":513},[494,5510,5511],{"class":1266}," font-size",[494,5513,530],{"class":513},[494,5515,5516],{"class":3420}," 2rem",[494,5518,3423],{"class":513},[494,5520,3426],{"class":513},[494,5522,5523,5526,5528,5530,5532,5535,5537],{"class":496,"line":545},[494,5524,5525],{"class":925}," h2",[494,5527,3412],{"class":513},[494,5529,5511],{"class":1266},[494,5531,530],{"class":513},[494,5533,5534],{"class":3420}," 1.5rem",[494,5536,3423],{"class":513},[494,5538,3426],{"class":513},[494,5540,5541,5544,5546,5549,5551,5553,5555,5558,5560],{"class":496,"line":555},[494,5542,5543],{"class":925}," a",[494,5545,3412],{"class":513},[494,5547,5548],{"class":1266}," color",[494,5550,530],{"class":513},[494,5552,1272],{"class":766},[494,5554,770],{"class":513},[494,5556,5557],{"class":650},"--color-primary-600",[494,5559,3496],{"class":513},[494,5561,3426],{"class":513},[494,5563,5564],{"class":496,"line":565},[494,5565,812],{"class":513},[494,5567,5568],{"class":496,"line":586},[494,5569,872],{"emptyLinePlaceholder":871},[494,5571,5572],{"class":496,"line":603},[494,5573,5574],{"class":500},"\u002F* Layer 2: Components — class tái sử dụng *\u002F\n",[494,5576,5577,5579,5582],{"class":496,"line":620},[494,5578,3709],{"class":834},[494,5580,5581],{"class":650}," components ",[494,5583,3715],{"class":513},[494,5585,5586,5589,5592],{"class":496,"line":626},[494,5587,5588],{"class":513}," .",[494,5590,5591],{"class":925},"card",[494,5593,520],{"class":513},[494,5595,5596,5599,5601,5604],{"class":496,"line":632},[494,5597,5598],{"class":1266}," background",[494,5600,530],{"class":513},[494,5602,5603],{"class":650}," white",[494,5605,847],{"class":513},[494,5607,5608,5610,5612,5614,5616,5619],{"class":496,"line":642},[494,5609,3902],{"class":1266},[494,5611,530],{"class":513},[494,5613,1272],{"class":766},[494,5615,770],{"class":513},[494,5617,5618],{"class":650},"--radius-xl",[494,5620,1280],{"class":513},[494,5622,5623,5626,5628,5630,5632,5635],{"class":496,"line":676},[494,5624,5625],{"class":1266}," padding",[494,5627,530],{"class":513},[494,5629,1272],{"class":766},[494,5631,770],{"class":513},[494,5633,5634],{"class":650},"--spacing-6",[494,5636,1280],{"class":513},[494,5638,5639,5642,5644,5646,5648,5651],{"class":496,"line":681},[494,5640,5641],{"class":1266}," box-shadow",[494,5643,530],{"class":513},[494,5645,1272],{"class":766},[494,5647,770],{"class":513},[494,5649,5650],{"class":650},"--shadow-card",[494,5652,1280],{"class":513},[494,5654,5655],{"class":496,"line":691},[494,5656,3768],{"class":513},[494,5658,5659],{"class":496,"line":713},[494,5660,872],{"emptyLinePlaceholder":871},[494,5662,5663,5665,5668],{"class":496,"line":734},[494,5664,5588],{"class":513},[494,5666,5667],{"class":925},"btn",[494,5669,520],{"class":513},[494,5671,5672,5674,5676,5679],{"class":496,"line":740},[494,5673,4503],{"class":1266},[494,5675,530],{"class":513},[494,5677,5678],{"class":650}," inline-flex",[494,5680,847],{"class":513},[494,5682,5683,5686,5688,5691],{"class":496,"line":746},[494,5684,5685],{"class":1266}," align-items",[494,5687,530],{"class":513},[494,5689,5690],{"class":650}," center",[494,5692,847],{"class":513},[494,5694,5695,5698,5700,5702],{"class":496,"line":752},[494,5696,5697],{"class":1266}," justify-content",[494,5699,530],{"class":513},[494,5701,5690],{"class":650},[494,5703,847],{"class":513},[494,5705,5706,5708,5710,5712,5714,5717],{"class":496,"line":763},[494,5707,3902],{"class":1266},[494,5709,530],{"class":513},[494,5711,1272],{"class":766},[494,5713,770],{"class":513},[494,5715,5716],{"class":650},"--radius-lg",[494,5718,1280],{"class":513},[494,5720,5721,5724,5726,5729],{"class":496,"line":785},[494,5722,5723],{"class":1266}," font-weight",[494,5725,530],{"class":513},[494,5727,5728],{"class":3420}," 500",[494,5730,847],{"class":513},[494,5732,5733,5735,5737,5740,5743],{"class":496,"line":803},[494,5734,5625],{"class":1266},[494,5736,530],{"class":513},[494,5738,5739],{"class":3420}," 0.625rem",[494,5741,5742],{"class":3420}," 1.25rem",[494,5744,847],{"class":513},[494,5746,5747,5750,5752,5755],{"class":496,"line":809},[494,5748,5749],{"class":1266}," font-size",[494,5751,530],{"class":513},[494,5753,5754],{"class":3420}," 0.875rem",[494,5756,847],{"class":513},[494,5758,5759,5762,5764,5767,5770,5773],{"class":496,"line":1157},[494,5760,5761],{"class":1266}," transition",[494,5763,530],{"class":513},[494,5765,5766],{"class":650}," all ",[494,5768,5769],{"class":3420},"0.15s",[494,5771,5772],{"class":650}," ease",[494,5774,847],{"class":513},[494,5776,5777,5780,5782,5785],{"class":496,"line":1163},[494,5778,5779],{"class":1266}," cursor",[494,5781,530],{"class":513},[494,5783,5784],{"class":650}," pointer",[494,5786,847],{"class":513},[494,5788,5789],{"class":496,"line":1169},[494,5790,3768],{"class":513},[494,5792,5793],{"class":496,"line":2313},[494,5794,812],{"class":513},[494,5796,5797],{"class":496,"line":2331},[494,5798,872],{"emptyLinePlaceholder":871},[494,5800,5801],{"class":496,"line":2336},[494,5802,5803],{"class":500},"\u002F* Layer 3: Utilities — class đơn lẻ (mặc định) *\u002F\n",[494,5805,5806,5808,5811],{"class":496,"line":2342},[494,5807,3709],{"class":834},[494,5809,5810],{"class":650}," utilities ",[494,5812,3715],{"class":513},[494,5814,5815],{"class":496,"line":2361},[494,5816,5817],{"class":500}," \u002F* Có thể viết thêm utilities ở đây, *\u002F\n",[494,5819,5820],{"class":496,"line":2379},[494,5821,5822],{"class":500}," \u002F* nhưng @utility (bên ngoài @layer) được khuyến nghị hơn *\u002F\n",[494,5824,5825],{"class":496,"line":2398},[494,5826,812],{"class":513},[446,5828,5829,456,5832,5835,5836,5835,5839,5842],{"color":1303,"icon":4391},[436,5830,5831],{},"Thứ tự layer:",[441,5833,5834],{},"base"," → ",[441,5837,5838],{},"components",[441,5840,5841],{},"utilities",". Điều này đảm bảo utilities luôn override components, components override base. CSS cascade được quản lý tự động.",[480,5844,5846,5847,5850],{"id":5845},"_43-theme-function","4.3. ",[441,5848,5849],{},"theme()"," Function",[432,5852,5853,5854,5856],{},"Dùng để truy cập giá trị từ ",[441,5855,877],{}," trong CSS:",[485,5858,5860],{"className":815,"code":5859,"language":817,"meta":490,"style":490},"@import \"tailwindcss\";\n\n@theme {\n --color-brand: #3b82f6;\n --spacing-gutter: 2rem;\n}\n\n.my-component {\n \u002F* Dùng theme() để lấy giá trị từ config *\u002F\n color: theme(--color-brand);\n padding: theme(--spacing-gutter);\n\n \u002F* Có thể dùng với alpha modifier *\u002F\n background-color: theme(--color-brand \u002F 20%);\n}\n\n\u002F* Hoặc dùng CSS variable trực tiếp (recommended) *\u002F\n.my-component-2 {\n color: var(--color-brand);\n padding: var(--spacing-gutter);\n}\n",[441,5861,5862,5874,5878,5884,5892,5897,5901,5905,5914,5919,5931,5943,5947,5952,5968,5972,5976,5981,5990,6005,6020],{"__ignoreMap":490},[494,5863,5864,5866,5868,5870,5872],{"class":496,"line":497},[494,5865,835],{"class":834},[494,5867,838],{"class":513},[494,5869,841],{"class":576},[494,5871,844],{"class":513},[494,5873,847],{"class":513},[494,5875,5876],{"class":496,"line":504},[494,5877,872],{"emptyLinePlaceholder":871},[494,5879,5880,5882],{"class":496,"line":510},[494,5881,877],{"class":834},[494,5883,520],{"class":513},[494,5885,5886,5888,5890],{"class":496,"line":523},[494,5887,895],{"class":650},[494,5889,887],{"class":513},[494,5891,900],{"class":650},[494,5893,5894],{"class":496,"line":535},[494,5895,5896],{"class":650}," --spacing-gutter: 2rem;\n",[494,5898,5899],{"class":496,"line":545},[494,5900,812],{"class":650},[494,5902,5903],{"class":496,"line":555},[494,5904,872],{"emptyLinePlaceholder":871},[494,5906,5907,5909,5912],{"class":496,"line":565},[494,5908,922],{"class":513},[494,5910,5911],{"class":925},"my-component",[494,5913,520],{"class":513},[494,5915,5916],{"class":496,"line":586},[494,5917,5918],{"class":500}," \u002F* Dùng theme() để lấy giá trị từ config *\u002F\n",[494,5920,5921,5924,5926,5929],{"class":496,"line":603},[494,5922,5923],{"class":1266}," color",[494,5925,530],{"class":513},[494,5927,5928],{"class":650}," theme(--color-brand)",[494,5930,847],{"class":513},[494,5932,5933,5936,5938,5941],{"class":496,"line":620},[494,5934,5935],{"class":1266}," padding",[494,5937,530],{"class":513},[494,5939,5940],{"class":650}," theme(--spacing-gutter)",[494,5942,847],{"class":513},[494,5944,5945],{"class":496,"line":626},[494,5946,872],{"emptyLinePlaceholder":871},[494,5948,5949],{"class":496,"line":632},[494,5950,5951],{"class":500}," \u002F* Có thể dùng với alpha modifier *\u002F\n",[494,5953,5954,5956,5958,5961,5964,5966],{"class":496,"line":642},[494,5955,1267],{"class":1266},[494,5957,530],{"class":513},[494,5959,5960],{"class":650}," theme(--color-brand \u002F ",[494,5962,5963],{"class":3420},"20%",[494,5965,780],{"class":650},[494,5967,847],{"class":513},[494,5969,5970],{"class":496,"line":676},[494,5971,812],{"class":513},[494,5973,5974],{"class":496,"line":681},[494,5975,872],{"emptyLinePlaceholder":871},[494,5977,5978],{"class":496,"line":691},[494,5979,5980],{"class":500},"\u002F* Hoặc dùng CSS variable trực tiếp (recommended) *\u002F\n",[494,5982,5983,5985,5988],{"class":496,"line":713},[494,5984,922],{"class":513},[494,5986,5987],{"class":925},"my-component-2",[494,5989,520],{"class":513},[494,5991,5992,5994,5996,5998,6000,6003],{"class":496,"line":734},[494,5993,5923],{"class":1266},[494,5995,530],{"class":513},[494,5997,1272],{"class":766},[494,5999,770],{"class":513},[494,6001,6002],{"class":650},"--color-brand",[494,6004,1280],{"class":513},[494,6006,6007,6009,6011,6013,6015,6018],{"class":496,"line":740},[494,6008,5935],{"class":1266},[494,6010,530],{"class":513},[494,6012,1272],{"class":766},[494,6014,770],{"class":513},[494,6016,6017],{"class":650},"--spacing-gutter",[494,6019,1280],{"class":513},[494,6021,6022],{"class":496,"line":746},[494,6023,812],{"class":513},[480,6025,6027,6028,6031],{"id":6026},"_44-value-helper","4.4. ",[441,6029,6030],{},"--value()"," Helper",[432,6033,6034,6035,6037],{},"Dùng trong ",[441,6036,877],{}," để tham chiếu đến giá trị khác:",[485,6039,6041],{"className":815,"code":6040,"language":817,"meta":490,"style":490},"@theme {\n --color-primary: oklch(0.55 0.2 260);\n\n \u002F* Dùng --value() để tham chiếu *\u002F\n --color-primary-light: --value(--color-primary \u002F 80%);\n \u002F* primary-light = primary với opacity 80% *\u002F\n}\n",[441,6042,6043,6049,6065,6069,6074,6079,6084],{"__ignoreMap":490},[494,6044,6045,6047],{"class":496,"line":497},[494,6046,877],{"class":834},[494,6048,520],{"class":513},[494,6050,6051,6053,6055,6057,6059,6061,6063],{"class":496,"line":504},[494,6052,1197],{"class":650},[494,6054,922],{"class":513},[494,6056,1023],{"class":925},[494,6058,929],{"class":650},[494,6060,922],{"class":513},[494,6062,1208],{"class":925},[494,6064,1693],{"class":650},[494,6066,6067],{"class":496,"line":510},[494,6068,872],{"emptyLinePlaceholder":871},[494,6070,6071],{"class":496,"line":523},[494,6072,6073],{"class":500}," \u002F* Dùng --value() để tham chiếu *\u002F\n",[494,6075,6076],{"class":496,"line":535},[494,6077,6078],{"class":650}," --color-primary-light: --value(--color-primary \u002F 80%);\n",[494,6080,6081],{"class":496,"line":545},[494,6082,6083],{"class":500}," \u002F* primary-light = primary với opacity 80% *\u002F\n",[494,6085,6086],{"class":496,"line":555},[494,6087,812],{"class":513},[480,6089,6091,6092,6095],{"id":6090},"_45-default-v43","4.5. ",[441,6093,6094],{},"--default()"," (v4.3)",[485,6097,6099],{"className":815,"code":6098,"language":817,"meta":490,"style":490},"@theme {\n \u002F* Nếu --color-accent chưa được định nghĩa, dùng fallback *\u002F\n --color-button-bg: --default(--color-accent, var(--color-primary-500));\n}\n",[441,6100,6101,6107,6112,6122],{"__ignoreMap":490},[494,6102,6103,6105],{"class":496,"line":497},[494,6104,877],{"class":834},[494,6106,520],{"class":513},[494,6108,6109],{"class":496,"line":504},[494,6110,6111],{"class":500}," \u002F* Nếu --color-accent chưa được định nghĩa, dùng fallback *\u002F\n",[494,6113,6114,6117,6119],{"class":496,"line":510},[494,6115,6116],{"class":650}," --color-button-bg: --default(--color-accent",[494,6118,661],{"class":513},[494,6120,6121],{"class":650}," var(--color-primary-500));\n",[494,6123,6124],{"class":496,"line":523},[494,6125,812],{"class":513},[480,6127,6129],{"id":6128},"_46-bài-tập-7-base-styles-smooth-scroll-box-sizing","4.6. BÀI TẬP 7 — Base Styles (Smooth Scroll, Box-Sizing)",[432,6131,6132],{},[436,6133,1905],{},[485,6135,6137],{"className":815,"code":6136,"language":817,"meta":490,"style":490},"\u002F* base-styles.css *\u002F\n@import \"tailwindcss\";\n\n@layer base {\n \u002F* Box-sizing border-box cho tất cả elements *\u002F\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n\n \u002F* Smooth scroll — tôn trọng prefers-reduced-motion *\u002F\n html {\n scroll-behavior: smooth;\n }\n\n @media (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n }\n\n \u002F* Body default *\u002F\n body {\n @apply antialiased text-neutral-900 bg-white;\n min-height: 100vh;\n min-height: 100dvh; \u002F* Dynamic viewport height — mobile-friendly *\u002F\n line-height: 1.6;\n }\n\n \u002F* Typography defaults *\u002F\n h1, h2, h3, h4, h5, h6 {\n line-height: 1.25;\n font-weight: 600;\n }\n\n \u002F* Image defaults *\u002F\n img, svg, video, canvas {\n display: block;\n max-width: 100%;\n }\n\n \u002F* Form elements inherit font *\u002F\n input, button, textarea, select {\n font: inherit;\n }\n\n \u002F* Better media defaults *\u002F\n img, video {\n height: auto;\n }\n\n \u002F* Anchor defaults *\u002F\n a {\n color: inherit;\n text-decoration: none;\n }\n\n \u002F* List defaults *\u002F\n ul, ol {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n}\n",[441,6138,6139,6144,6156,6160,6168,6173,6180,6191,6202,6214,6218,6222,6227,6233,6243,6247,6251,6271,6278,6290,6294,6301,6311,6321,6336,6349,6362,6366,6370,6374,6379,6385,6392,6404,6418,6430,6434,6438,6443,6474,6485,6496,6500,6504,6509,6531,6541,6553,6557,6561,6566,6588,6600,6604,6608,6613,6623,6634,6638,6642,6647,6653,6663,6674,6678,6682,6687,6699,6710,6720,6731,6735],{"__ignoreMap":490},[494,6140,6141],{"class":496,"line":497},[494,6142,6143],{"class":500},"\u002F* base-styles.css *\u002F\n",[494,6145,6146,6148,6150,6152,6154],{"class":496,"line":504},[494,6147,835],{"class":834},[494,6149,838],{"class":513},[494,6151,841],{"class":576},[494,6153,844],{"class":513},[494,6155,847],{"class":513},[494,6157,6158],{"class":496,"line":510},[494,6159,872],{"emptyLinePlaceholder":871},[494,6161,6162,6164,6166],{"class":496,"line":523},[494,6163,3709],{"class":834},[494,6165,3712],{"class":650},[494,6167,3715],{"class":513},[494,6169,6170],{"class":496,"line":535},[494,6171,6172],{"class":500}," \u002F* Box-sizing border-box cho tất cả elements *\u002F\n",[494,6174,6175,6178],{"class":496,"line":545},[494,6176,6177],{"class":925}," *",[494,6179,583],{"class":513},[494,6181,6182,6184,6186,6189],{"class":496,"line":555},[494,6183,6177],{"class":925},[494,6185,4493],{"class":513},[494,6187,6188],{"class":3857},"before",[494,6190,583],{"class":513},[494,6192,6193,6195,6197,6200],{"class":496,"line":565},[494,6194,6177],{"class":925},[494,6196,4493],{"class":513},[494,6198,6199],{"class":3857},"after",[494,6201,520],{"class":513},[494,6203,6204,6207,6209,6212],{"class":496,"line":586},[494,6205,6206],{"class":1266}," box-sizing",[494,6208,530],{"class":513},[494,6210,6211],{"class":650}," border-box",[494,6213,847],{"class":513},[494,6215,6216],{"class":496,"line":603},[494,6217,3768],{"class":513},[494,6219,6220],{"class":496,"line":620},[494,6221,872],{"emptyLinePlaceholder":871},[494,6223,6224],{"class":496,"line":626},[494,6225,6226],{"class":500}," \u002F* Smooth scroll — tôn trọng prefers-reduced-motion *\u002F\n",[494,6228,6229,6231],{"class":496,"line":632},[494,6230,3721],{"class":925},[494,6232,520],{"class":513},[494,6234,6235,6237,6239,6241],{"class":496,"line":642},[494,6236,3729],{"class":1266},[494,6238,530],{"class":513},[494,6240,3734],{"class":650},[494,6242,847],{"class":513},[494,6244,6245],{"class":496,"line":676},[494,6246,3768],{"class":513},[494,6248,6249],{"class":496,"line":681},[494,6250,872],{"emptyLinePlaceholder":871},[494,6252,6253,6256,6259,6262,6264,6267,6269],{"class":496,"line":691},[494,6254,6255],{"class":834}," @media",[494,6257,6258],{"class":513}," (",[494,6260,6261],{"class":650},"prefers-reduced-motion",[494,6263,530],{"class":513},[494,6265,6266],{"class":650}," reduce",[494,6268,780],{"class":513},[494,6270,520],{"class":513},[494,6272,6273,6276],{"class":496,"line":713},[494,6274,6275],{"class":925}," html",[494,6277,520],{"class":513},[494,6279,6280,6283,6285,6288],{"class":496,"line":734},[494,6281,6282],{"class":1266}," scroll-behavior",[494,6284,530],{"class":513},[494,6286,6287],{"class":650}," auto",[494,6289,847],{"class":513},[494,6291,6292],{"class":496,"line":740},[494,6293,743],{"class":513},[494,6295,6296,6299],{"class":496,"line":746},[494,6297,6298],{"class":925}," *",[494,6300,583],{"class":513},[494,6302,6303,6305,6307,6309],{"class":496,"line":752},[494,6304,6298],{"class":925},[494,6306,4493],{"class":513},[494,6308,6188],{"class":3857},[494,6310,583],{"class":513},[494,6312,6313,6315,6317,6319],{"class":496,"line":763},[494,6314,6298],{"class":925},[494,6316,4493],{"class":513},[494,6318,6199],{"class":3857},[494,6320,520],{"class":513},[494,6322,6323,6326,6328,6331,6334],{"class":496,"line":785},[494,6324,6325],{"class":1266}," animation-duration",[494,6327,530],{"class":513},[494,6329,6330],{"class":3420}," 0.01ms",[494,6332,6333],{"class":3420}," !important",[494,6335,847],{"class":513},[494,6337,6338,6341,6343,6345,6347],{"class":496,"line":803},[494,6339,6340],{"class":1266}," animation-iteration-count",[494,6342,530],{"class":513},[494,6344,3441],{"class":3420},[494,6346,6333],{"class":3420},[494,6348,847],{"class":513},[494,6350,6351,6354,6356,6358,6360],{"class":496,"line":809},[494,6352,6353],{"class":1266}," transition-duration",[494,6355,530],{"class":513},[494,6357,6330],{"class":3420},[494,6359,6333],{"class":3420},[494,6361,847],{"class":513},[494,6363,6364],{"class":496,"line":1157},[494,6365,743],{"class":513},[494,6367,6368],{"class":496,"line":1163},[494,6369,3768],{"class":513},[494,6371,6372],{"class":496,"line":1169},[494,6373,872],{"emptyLinePlaceholder":871},[494,6375,6376],{"class":496,"line":2313},[494,6377,6378],{"class":500}," \u002F* Body default *\u002F\n",[494,6380,6381,6383],{"class":496,"line":2331},[494,6382,3779],{"class":925},[494,6384,520],{"class":513},[494,6386,6387,6390],{"class":496,"line":2336},[494,6388,6389],{"class":650}," @apply antialiased text-neutral-900 bg-white",[494,6391,847],{"class":513},[494,6393,6394,6397,6399,6402],{"class":496,"line":2342},[494,6395,6396],{"class":1266}," min-height",[494,6398,530],{"class":513},[494,6400,6401],{"class":3420}," 100vh",[494,6403,847],{"class":513},[494,6405,6406,6408,6410,6413,6415],{"class":496,"line":2361},[494,6407,6396],{"class":1266},[494,6409,530],{"class":513},[494,6411,6412],{"class":3420}," 100dvh",[494,6414,3423],{"class":513},[494,6416,6417],{"class":500}," \u002F* Dynamic viewport height — mobile-friendly *\u002F\n",[494,6419,6420,6423,6425,6428],{"class":496,"line":2379},[494,6421,6422],{"class":1266}," line-height",[494,6424,530],{"class":513},[494,6426,6427],{"class":3420}," 1.6",[494,6429,847],{"class":513},[494,6431,6432],{"class":496,"line":2398},[494,6433,3768],{"class":513},[494,6435,6436],{"class":496,"line":2418},[494,6437,872],{"emptyLinePlaceholder":871},[494,6439,6440],{"class":496,"line":2437},[494,6441,6442],{"class":500}," \u002F* Typography defaults *\u002F\n",[494,6444,6445,6447,6449,6452,6454,6457,6459,6462,6464,6467,6469,6472],{"class":496,"line":2455},[494,6446,5506],{"class":925},[494,6448,661],{"class":513},[494,6450,6451],{"class":925}," h2",[494,6453,661],{"class":513},[494,6455,6456],{"class":925}," h3",[494,6458,661],{"class":513},[494,6460,6461],{"class":925}," h4",[494,6463,661],{"class":513},[494,6465,6466],{"class":925}," h5",[494,6468,661],{"class":513},[494,6470,6471],{"class":925}," h6",[494,6473,520],{"class":513},[494,6475,6476,6478,6480,6483],{"class":496,"line":2473},[494,6477,6422],{"class":1266},[494,6479,530],{"class":513},[494,6481,6482],{"class":3420}," 1.25",[494,6484,847],{"class":513},[494,6486,6487,6489,6491,6494],{"class":496,"line":2492},[494,6488,5723],{"class":1266},[494,6490,530],{"class":513},[494,6492,6493],{"class":3420}," 600",[494,6495,847],{"class":513},[494,6497,6498],{"class":496,"line":2511},[494,6499,3768],{"class":513},[494,6501,6502],{"class":496,"line":2516},[494,6503,872],{"emptyLinePlaceholder":871},[494,6505,6506],{"class":496,"line":2522},[494,6507,6508],{"class":500}," \u002F* Image defaults *\u002F\n",[494,6510,6511,6514,6516,6519,6521,6524,6526,6529],{"class":496,"line":2542},[494,6512,6513],{"class":925}," img",[494,6515,661],{"class":513},[494,6517,6518],{"class":925}," svg",[494,6520,661],{"class":513},[494,6522,6523],{"class":925}," video",[494,6525,661],{"class":513},[494,6527,6528],{"class":925}," canvas",[494,6530,520],{"class":513},[494,6532,6533,6535,6537,6539],{"class":496,"line":2561},[494,6534,4503],{"class":1266},[494,6536,530],{"class":513},[494,6538,4722],{"class":650},[494,6540,847],{"class":513},[494,6542,6543,6546,6548,6551],{"class":496,"line":2579},[494,6544,6545],{"class":1266}," max-width",[494,6547,530],{"class":513},[494,6549,6550],{"class":3420}," 100%",[494,6552,847],{"class":513},[494,6554,6555],{"class":496,"line":2597},[494,6556,3768],{"class":513},[494,6558,6559],{"class":496,"line":2615},[494,6560,872],{"emptyLinePlaceholder":871},[494,6562,6563],{"class":496,"line":2634},[494,6564,6565],{"class":500}," \u002F* Form elements inherit font *\u002F\n",[494,6567,6568,6571,6573,6576,6578,6581,6583,6586],{"class":496,"line":2653},[494,6569,6570],{"class":925}," input",[494,6572,661],{"class":513},[494,6574,6575],{"class":925}," button",[494,6577,661],{"class":513},[494,6579,6580],{"class":925}," textarea",[494,6582,661],{"class":513},[494,6584,6585],{"class":925}," select",[494,6587,520],{"class":513},[494,6589,6590,6593,6595,6598],{"class":496,"line":2672},[494,6591,6592],{"class":1266}," font",[494,6594,530],{"class":513},[494,6596,6597],{"class":650}," inherit",[494,6599,847],{"class":513},[494,6601,6602],{"class":496,"line":2691},[494,6603,3768],{"class":513},[494,6605,6606],{"class":496,"line":2709},[494,6607,872],{"emptyLinePlaceholder":871},[494,6609,6610],{"class":496,"line":2727},[494,6611,6612],{"class":500}," \u002F* Better media defaults *\u002F\n",[494,6614,6615,6617,6619,6621],{"class":496,"line":2732},[494,6616,6513],{"class":925},[494,6618,661],{"class":513},[494,6620,6523],{"class":925},[494,6622,520],{"class":513},[494,6624,6625,6628,6630,6632],{"class":496,"line":2738},[494,6626,6627],{"class":1266}," height",[494,6629,530],{"class":513},[494,6631,6287],{"class":650},[494,6633,847],{"class":513},[494,6635,6636],{"class":496,"line":2758},[494,6637,3768],{"class":513},[494,6639,6640],{"class":496,"line":2777},[494,6641,872],{"emptyLinePlaceholder":871},[494,6643,6644],{"class":496,"line":2796},[494,6645,6646],{"class":500}," \u002F* Anchor defaults *\u002F\n",[494,6648,6649,6651],{"class":496,"line":2815},[494,6650,5543],{"class":925},[494,6652,520],{"class":513},[494,6654,6655,6657,6659,6661],{"class":496,"line":2820},[494,6656,3804],{"class":1266},[494,6658,530],{"class":513},[494,6660,6597],{"class":650},[494,6662,847],{"class":513},[494,6664,6665,6668,6670,6672],{"class":496,"line":2826},[494,6666,6667],{"class":1266}," text-decoration",[494,6669,530],{"class":513},[494,6671,4508],{"class":650},[494,6673,847],{"class":513},[494,6675,6676],{"class":496,"line":2832},[494,6677,3768],{"class":513},[494,6679,6680],{"class":496,"line":2850},[494,6681,872],{"emptyLinePlaceholder":871},[494,6683,6684],{"class":496,"line":2868},[494,6685,6686],{"class":500}," \u002F* List defaults *\u002F\n",[494,6688,6689,6692,6694,6697],{"class":496,"line":2886},[494,6690,6691],{"class":925}," ul",[494,6693,661],{"class":513},[494,6695,6696],{"class":925}," ol",[494,6698,520],{"class":513},[494,6700,6701,6704,6706,6708],{"class":496,"line":2891},[494,6702,6703],{"class":1266}," list-style",[494,6705,530],{"class":513},[494,6707,4508],{"class":650},[494,6709,847],{"class":513},[494,6711,6712,6714,6716,6718],{"class":496,"line":2897},[494,6713,5625],{"class":1266},[494,6715,530],{"class":513},[494,6717,929],{"class":3420},[494,6719,847],{"class":513},[494,6721,6722,6725,6727,6729],{"class":496,"line":2919},[494,6723,6724],{"class":1266}," margin",[494,6726,530],{"class":513},[494,6728,929],{"class":3420},[494,6730,847],{"class":513},[494,6732,6733],{"class":496,"line":2933},[494,6734,3768],{"class":513},[494,6736,6737],{"class":496,"line":2948},[494,6738,812],{"class":513},[480,6740,6742,6743],{"id":6741},"_47-bài-tập-8-reusable-component-class-với-layer-components","4.7. BÀI TẬP 8 — Reusable Component Class với ",[441,6744,6745],{},"@layer components",[432,6747,6748,6750,6751,6754,6755,6754,6758,6754,6761,922],{},[436,6749,1880],{}," Tạo các component class tái sử dụng: ",[441,6752,6753],{},".btn",", ",[441,6756,6757],{},".card",[441,6759,6760],{},".input",[441,6762,6763],{},".badge",[432,6765,6766],{},[436,6767,1905],{},[485,6769,6771],{"className":815,"code":6770,"language":817,"meta":490,"style":490},"\u002F* components.css *\u002F\n@import \"tailwindcss\";\n\n@theme {\n --color-primary: oklch(0.55 0.2 260);\n --color-primary-hover: oklch(0.46 0.18 260);\n --radius-lg: 0.75rem;\n --shadow-card: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n@layer components {\n \u002F* === BUTTON === *\u002F\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border-radius: var(--radius-lg);\n font-weight: 600;\n font-size: 0.875rem;\n line-height: 1.25rem;\n padding: 0.625rem 1.25rem;\n transition: all 0.15s ease;\n cursor: pointer;\n border: 1px solid transparent;\n white-space: nowrap;\n user-select: none;\n }\n\n .btn:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n }\n\n .btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n \u002F* Button variants *\u002F\n .btn-primary {\n background-color: var(--color-primary);\n color: white;\n }\n .btn-primary:hover {\n background-color: var(--color-primary-hover);\n }\n\n .btn-secondary {\n background-color: transparent;\n color: var(--color-primary);\n border-color: var(--color-primary);\n }\n .btn-secondary:hover {\n background-color: var(--color-primary);\n color: white;\n }\n\n .btn-ghost {\n background-color: transparent;\n color: inherit;\n }\n .btn-ghost:hover {\n background-color: rgb(0 0 0 \u002F 0.05);\n }\n\n \u002F* Button sizes *\u002F\n .btn-sm {\n padding: 0.375rem 0.75rem;\n font-size: 0.75rem;\n border-radius: 0.5rem;\n }\n\n .btn-lg {\n padding: 0.75rem 1.5rem;\n font-size: 1rem;\n border-radius: 1rem;\n }\n\n .btn-xl {\n padding: 1rem 2rem;\n font-size: 1.125rem;\n }\n\n \u002F* === CARD === *\u002F\n .card {\n background: white;\n border-radius: var(--radius-lg);\n border: 1px solid oklch(0.88 0.01 260);\n overflow: hidden;\n }\n\n .card-hoverable {\n transition: box-shadow 0.2s ease, transform 0.2s ease;\n }\n .card-hoverable:hover {\n box-shadow: var(--shadow-card);\n transform: translateY(-2px);\n }\n\n \u002F* Card sections *\u002F\n .card-header {\n padding: 1.5rem 1.5rem 0;\n }\n .card-body {\n padding: 1.5rem;\n }\n .card-footer {\n padding: 0 1.5rem 1.5rem;\n }\n\n \u002F* === INPUT === *\u002F\n .input {\n display: block;\n width: 100%;\n padding: 0.625rem 0.875rem;\n font-size: 0.875rem;\n line-height: 1.5;\n color: inherit;\n background-color: white;\n border: 1px solid oklch(0.78 0.01 260);\n border-radius: var(--radius-lg);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n }\n\n .input::placeholder {\n color: oklch(0.64 0.01 260);\n }\n\n .input:focus {\n outline: none;\n border-color: var(--color-primary);\n box-shadow: 0 0 0 3px rgb(59 130 246 \u002F 0.15);\n }\n\n .input:disabled {\n background-color: oklch(0.95 0.01 260);\n opacity: 0.7;\n cursor: not-allowed;\n }\n\n .input-error {\n border-color: oklch(0.55 0.22 20);\n }\n .input-error:focus {\n box-shadow: 0 0 0 3px rgb(239 68 68 \u002F 0.15);\n }\n\n \u002F* === BADGE === *\u002F\n .badge {\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.625rem;\n font-size: 0.75rem;\n font-weight: 500;\n line-height: 1.25rem;\n border-radius: 9999px;\n white-space: nowrap;\n }\n\n .badge-primary {\n background-color: color-mix(in oklch, var(--color-primary) 15%, transparent);\n color: var(--color-primary);\n }\n\n .badge-success {\n background-color: color-mix(in oklch, oklch(0.60 0.19 150) 15%, transparent);\n color: oklch(0.45 0.15 150);\n }\n\n .badge-warning {\n background-color: color-mix(in oklch, oklch(0.70 0.17 85) 15%, transparent);\n color: oklch(0.50 0.13 75);\n }\n\n .badge-error {\n background-color: color-mix(in oklch, oklch(0.55 0.22 20) 15%, transparent);\n color: oklch(0.45 0.20 20);\n }\n}\n",[441,6772,6773,6778,6790,6794,6800,6816,6833,6837,6860,6864,6868,6876,6881,6889,6899,6909,6919,6931,6945,6955,6965,6975,6987,7001,7011,7026,7038,7049,7053,7057,7069,7087,7097,7101,7105,7118,7130,7141,7152,7156,7160,7165,7174,7188,7198,7202,7215,7230,7234,7238,7247,7258,7272,7287,7291,7303,7317,7327,7331,7335,7344,7354,7364,7368,7380,7405,7409,7413,7418,7427,7441,7451,7461,7465,7469,7478,7490,7501,7511,7515,7519,7528,7540,7551,7555,7559,7564,7572,7582,7596,7622,7634,7638,7642,7651,7676,7680,7692,7706,7722,7726,7730,7735,7744,7758,7762,7771,7781,7785,7794,7808,7812,7816,7821,7830,7840,7851,7863,7873,7884,7894,7904,7927,7941,7964,7968,7972,7985,8005,8009,8013,8026,8036,8050,8084,8088,8092,8104,8122,8133,8143,8147,8151,8160,8181,8185,8197,8229,8233,8237,8242,8251,8261,8271,8284,8294,8304,8314,8325,8335,8339,8343,8352,8387,8401,8405,8409,8418,8457,8477,8481,8485,8494,8534,8556,8561,8566,8576,8613,8633,8638],{"__ignoreMap":490},[494,6774,6775],{"class":496,"line":497},[494,6776,6777],{"class":500},"\u002F* components.css *\u002F\n",[494,6779,6780,6782,6784,6786,6788],{"class":496,"line":504},[494,6781,835],{"class":834},[494,6783,838],{"class":513},[494,6785,841],{"class":576},[494,6787,844],{"class":513},[494,6789,847],{"class":513},[494,6791,6792],{"class":496,"line":510},[494,6793,872],{"emptyLinePlaceholder":871},[494,6795,6796,6798],{"class":496,"line":523},[494,6797,877],{"class":834},[494,6799,520],{"class":513},[494,6801,6802,6804,6806,6808,6810,6812,6814],{"class":496,"line":535},[494,6803,1197],{"class":650},[494,6805,922],{"class":513},[494,6807,1023],{"class":925},[494,6809,929],{"class":650},[494,6811,922],{"class":513},[494,6813,1208],{"class":925},[494,6815,1693],{"class":650},[494,6817,6818,6821,6823,6825,6827,6829,6831],{"class":496,"line":545},[494,6819,6820],{"class":650}," --color-primary-hover: oklch(0",[494,6822,922],{"class":513},[494,6824,1792],{"class":925},[494,6826,929],{"class":650},[494,6828,922],{"class":513},[494,6830,697],{"class":925},[494,6832,1693],{"class":650},[494,6834,6835],{"class":496,"line":555},[494,6836,3109],{"class":650},[494,6838,6839,6842,6844,6846,6848,6850,6852,6854,6856,6858],{"class":496,"line":565},[494,6840,6841],{"class":650}," --shadow-card: 0 1px 3px rgba(0",[494,6843,661],{"class":513},[494,6845,3524],{"class":650},[494,6847,661],{"class":513},[494,6849,3524],{"class":650},[494,6851,661],{"class":513},[494,6853,3524],{"class":650},[494,6855,922],{"class":513},[494,6857,3168],{"class":925},[494,6859,1280],{"class":650},[494,6861,6862],{"class":496,"line":586},[494,6863,812],{"class":513},[494,6865,6866],{"class":496,"line":603},[494,6867,872],{"emptyLinePlaceholder":871},[494,6869,6870,6872,6874],{"class":496,"line":620},[494,6871,3709],{"class":834},[494,6873,5581],{"class":650},[494,6875,3715],{"class":513},[494,6877,6878],{"class":496,"line":626},[494,6879,6880],{"class":500}," \u002F* === BUTTON === *\u002F\n",[494,6882,6883,6885,6887],{"class":496,"line":632},[494,6884,5588],{"class":513},[494,6886,5667],{"class":925},[494,6888,520],{"class":513},[494,6890,6891,6893,6895,6897],{"class":496,"line":642},[494,6892,4503],{"class":1266},[494,6894,530],{"class":513},[494,6896,5678],{"class":650},[494,6898,847],{"class":513},[494,6900,6901,6903,6905,6907],{"class":496,"line":676},[494,6902,5685],{"class":1266},[494,6904,530],{"class":513},[494,6906,5690],{"class":650},[494,6908,847],{"class":513},[494,6910,6911,6913,6915,6917],{"class":496,"line":681},[494,6912,5697],{"class":1266},[494,6914,530],{"class":513},[494,6916,5690],{"class":650},[494,6918,847],{"class":513},[494,6920,6921,6924,6926,6929],{"class":496,"line":691},[494,6922,6923],{"class":1266}," gap",[494,6925,530],{"class":513},[494,6927,6928],{"class":3420}," 0.5rem",[494,6930,847],{"class":513},[494,6932,6933,6935,6937,6939,6941,6943],{"class":496,"line":713},[494,6934,3902],{"class":1266},[494,6936,530],{"class":513},[494,6938,1272],{"class":766},[494,6940,770],{"class":513},[494,6942,5716],{"class":650},[494,6944,1280],{"class":513},[494,6946,6947,6949,6951,6953],{"class":496,"line":734},[494,6948,5723],{"class":1266},[494,6950,530],{"class":513},[494,6952,6493],{"class":3420},[494,6954,847],{"class":513},[494,6956,6957,6959,6961,6963],{"class":496,"line":740},[494,6958,5749],{"class":1266},[494,6960,530],{"class":513},[494,6962,5754],{"class":3420},[494,6964,847],{"class":513},[494,6966,6967,6969,6971,6973],{"class":496,"line":746},[494,6968,6422],{"class":1266},[494,6970,530],{"class":513},[494,6972,5742],{"class":3420},[494,6974,847],{"class":513},[494,6976,6977,6979,6981,6983,6985],{"class":496,"line":752},[494,6978,5625],{"class":1266},[494,6980,530],{"class":513},[494,6982,5739],{"class":3420},[494,6984,5742],{"class":3420},[494,6986,847],{"class":513},[494,6988,6989,6991,6993,6995,6997,6999],{"class":496,"line":763},[494,6990,5761],{"class":1266},[494,6992,530],{"class":513},[494,6994,5766],{"class":650},[494,6996,5769],{"class":3420},[494,6998,5772],{"class":650},[494,7000,847],{"class":513},[494,7002,7003,7005,7007,7009],{"class":496,"line":785},[494,7004,5779],{"class":1266},[494,7006,530],{"class":513},[494,7008,5784],{"class":650},[494,7010,847],{"class":513},[494,7012,7013,7016,7018,7021,7024],{"class":496,"line":803},[494,7014,7015],{"class":1266}," border",[494,7017,530],{"class":513},[494,7019,7020],{"class":3420}," 1px",[494,7022,7023],{"class":650}," solid transparent",[494,7025,847],{"class":513},[494,7027,7028,7031,7033,7036],{"class":496,"line":809},[494,7029,7030],{"class":1266}," white-space",[494,7032,530],{"class":513},[494,7034,7035],{"class":650}," nowrap",[494,7037,847],{"class":513},[494,7039,7040,7043,7045,7047],{"class":496,"line":1157},[494,7041,7042],{"class":1266}," user-select",[494,7044,530],{"class":513},[494,7046,4508],{"class":650},[494,7048,847],{"class":513},[494,7050,7051],{"class":496,"line":1163},[494,7052,3768],{"class":513},[494,7054,7055],{"class":496,"line":1169},[494,7056,872],{"emptyLinePlaceholder":871},[494,7058,7059,7061,7063,7065,7067],{"class":496,"line":2313},[494,7060,5588],{"class":513},[494,7062,5667],{"class":925},[494,7064,530],{"class":513},[494,7066,3858],{"class":3857},[494,7068,520],{"class":513},[494,7070,7071,7073,7075,7077,7079,7081,7083,7085],{"class":496,"line":2331},[494,7072,3866],{"class":1266},[494,7074,530],{"class":513},[494,7076,3871],{"class":3420},[494,7078,3874],{"class":650},[494,7080,3877],{"class":766},[494,7082,770],{"class":513},[494,7084,1277],{"class":650},[494,7086,1280],{"class":513},[494,7088,7089,7091,7093,7095],{"class":496,"line":2336},[494,7090,3890],{"class":1266},[494,7092,530],{"class":513},[494,7094,3871],{"class":3420},[494,7096,847],{"class":513},[494,7098,7099],{"class":496,"line":2342},[494,7100,3768],{"class":513},[494,7102,7103],{"class":496,"line":2361},[494,7104,872],{"emptyLinePlaceholder":871},[494,7106,7107,7109,7111,7113,7116],{"class":496,"line":2379},[494,7108,5588],{"class":513},[494,7110,5667],{"class":925},[494,7112,530],{"class":513},[494,7114,7115],{"class":3857},"disabled",[494,7117,520],{"class":513},[494,7119,7120,7123,7125,7128],{"class":496,"line":2398},[494,7121,7122],{"class":1266}," opacity",[494,7124,530],{"class":513},[494,7126,7127],{"class":3420}," 0.5",[494,7129,847],{"class":513},[494,7131,7132,7134,7136,7139],{"class":496,"line":2418},[494,7133,5779],{"class":1266},[494,7135,530],{"class":513},[494,7137,7138],{"class":650}," not-allowed",[494,7140,847],{"class":513},[494,7142,7143,7146,7148,7150],{"class":496,"line":2437},[494,7144,7145],{"class":1266}," pointer-events",[494,7147,530],{"class":513},[494,7149,4508],{"class":650},[494,7151,847],{"class":513},[494,7153,7154],{"class":496,"line":2455},[494,7155,3768],{"class":513},[494,7157,7158],{"class":496,"line":2473},[494,7159,872],{"emptyLinePlaceholder":871},[494,7161,7162],{"class":496,"line":2492},[494,7163,7164],{"class":500}," \u002F* Button variants *\u002F\n",[494,7166,7167,7169,7172],{"class":496,"line":2511},[494,7168,5588],{"class":513},[494,7170,7171],{"class":925},"btn-primary",[494,7173,520],{"class":513},[494,7175,7176,7178,7180,7182,7184,7186],{"class":496,"line":2516},[494,7177,3821],{"class":1266},[494,7179,530],{"class":513},[494,7181,1272],{"class":766},[494,7183,770],{"class":513},[494,7185,1277],{"class":650},[494,7187,1280],{"class":513},[494,7189,7190,7192,7194,7196],{"class":496,"line":2522},[494,7191,3804],{"class":1266},[494,7193,530],{"class":513},[494,7195,5603],{"class":650},[494,7197,847],{"class":513},[494,7199,7200],{"class":496,"line":2542},[494,7201,3768],{"class":513},[494,7203,7204,7206,7208,7210,7213],{"class":496,"line":2561},[494,7205,5588],{"class":513},[494,7207,7171],{"class":925},[494,7209,530],{"class":513},[494,7211,7212],{"class":3857},"hover",[494,7214,520],{"class":513},[494,7216,7217,7219,7221,7223,7225,7228],{"class":496,"line":2579},[494,7218,3821],{"class":1266},[494,7220,530],{"class":513},[494,7222,1272],{"class":766},[494,7224,770],{"class":513},[494,7226,7227],{"class":650},"--color-primary-hover",[494,7229,1280],{"class":513},[494,7231,7232],{"class":496,"line":2597},[494,7233,3768],{"class":513},[494,7235,7236],{"class":496,"line":2615},[494,7237,872],{"emptyLinePlaceholder":871},[494,7239,7240,7242,7245],{"class":496,"line":2634},[494,7241,5588],{"class":513},[494,7243,7244],{"class":925},"btn-secondary",[494,7246,520],{"class":513},[494,7248,7249,7251,7253,7256],{"class":496,"line":2653},[494,7250,3821],{"class":1266},[494,7252,530],{"class":513},[494,7254,7255],{"class":650}," transparent",[494,7257,847],{"class":513},[494,7259,7260,7262,7264,7266,7268,7270],{"class":496,"line":2672},[494,7261,3804],{"class":1266},[494,7263,530],{"class":513},[494,7265,1272],{"class":766},[494,7267,770],{"class":513},[494,7269,1277],{"class":650},[494,7271,1280],{"class":513},[494,7273,7274,7277,7279,7281,7283,7285],{"class":496,"line":2691},[494,7275,7276],{"class":1266}," border-color",[494,7278,530],{"class":513},[494,7280,1272],{"class":766},[494,7282,770],{"class":513},[494,7284,1277],{"class":650},[494,7286,1280],{"class":513},[494,7288,7289],{"class":496,"line":2709},[494,7290,3768],{"class":513},[494,7292,7293,7295,7297,7299,7301],{"class":496,"line":2727},[494,7294,5588],{"class":513},[494,7296,7244],{"class":925},[494,7298,530],{"class":513},[494,7300,7212],{"class":3857},[494,7302,520],{"class":513},[494,7304,7305,7307,7309,7311,7313,7315],{"class":496,"line":2732},[494,7306,3821],{"class":1266},[494,7308,530],{"class":513},[494,7310,1272],{"class":766},[494,7312,770],{"class":513},[494,7314,1277],{"class":650},[494,7316,1280],{"class":513},[494,7318,7319,7321,7323,7325],{"class":496,"line":2738},[494,7320,3804],{"class":1266},[494,7322,530],{"class":513},[494,7324,5603],{"class":650},[494,7326,847],{"class":513},[494,7328,7329],{"class":496,"line":2758},[494,7330,3768],{"class":513},[494,7332,7333],{"class":496,"line":2777},[494,7334,872],{"emptyLinePlaceholder":871},[494,7336,7337,7339,7342],{"class":496,"line":2796},[494,7338,5588],{"class":513},[494,7340,7341],{"class":925},"btn-ghost",[494,7343,520],{"class":513},[494,7345,7346,7348,7350,7352],{"class":496,"line":2815},[494,7347,3821],{"class":1266},[494,7349,530],{"class":513},[494,7351,7255],{"class":650},[494,7353,847],{"class":513},[494,7355,7356,7358,7360,7362],{"class":496,"line":2820},[494,7357,3804],{"class":1266},[494,7359,530],{"class":513},[494,7361,6597],{"class":650},[494,7363,847],{"class":513},[494,7365,7366],{"class":496,"line":2826},[494,7367,3768],{"class":513},[494,7369,7370,7372,7374,7376,7378],{"class":496,"line":2832},[494,7371,5588],{"class":513},[494,7373,7341],{"class":925},[494,7375,530],{"class":513},[494,7377,7212],{"class":3857},[494,7379,520],{"class":513},[494,7381,7382,7384,7386,7389,7391,7393,7395,7397,7400,7403],{"class":496,"line":2850},[494,7383,3821],{"class":1266},[494,7385,530],{"class":513},[494,7387,7388],{"class":766}," rgb",[494,7390,770],{"class":513},[494,7392,3524],{"class":3420},[494,7394,929],{"class":3420},[494,7396,929],{"class":3420},[494,7398,7399],{"class":650}," \u002F ",[494,7401,7402],{"class":3420},"0.05",[494,7404,1280],{"class":513},[494,7406,7407],{"class":496,"line":2868},[494,7408,3768],{"class":513},[494,7410,7411],{"class":496,"line":2886},[494,7412,872],{"emptyLinePlaceholder":871},[494,7414,7415],{"class":496,"line":2891},[494,7416,7417],{"class":500}," \u002F* Button sizes *\u002F\n",[494,7419,7420,7422,7425],{"class":496,"line":2897},[494,7421,5588],{"class":513},[494,7423,7424],{"class":925},"btn-sm",[494,7426,520],{"class":513},[494,7428,7429,7431,7433,7436,7439],{"class":496,"line":2919},[494,7430,5625],{"class":1266},[494,7432,530],{"class":513},[494,7434,7435],{"class":3420}," 0.375rem",[494,7437,7438],{"class":3420}," 0.75rem",[494,7440,847],{"class":513},[494,7442,7443,7445,7447,7449],{"class":496,"line":2933},[494,7444,5749],{"class":1266},[494,7446,530],{"class":513},[494,7448,7438],{"class":3420},[494,7450,847],{"class":513},[494,7452,7453,7455,7457,7459],{"class":496,"line":2948},[494,7454,3902],{"class":1266},[494,7456,530],{"class":513},[494,7458,6928],{"class":3420},[494,7460,847],{"class":513},[494,7462,7463],{"class":496,"line":2953},[494,7464,3768],{"class":513},[494,7466,7467],{"class":496,"line":2959},[494,7468,872],{"emptyLinePlaceholder":871},[494,7470,7471,7473,7476],{"class":496,"line":2965},[494,7472,5588],{"class":513},[494,7474,7475],{"class":925},"btn-lg",[494,7477,520],{"class":513},[494,7479,7480,7482,7484,7486,7488],{"class":496,"line":2971},[494,7481,5625],{"class":1266},[494,7483,530],{"class":513},[494,7485,7438],{"class":3420},[494,7487,5534],{"class":3420},[494,7489,847],{"class":513},[494,7491,7492,7494,7496,7499],{"class":496,"line":2977},[494,7493,5749],{"class":1266},[494,7495,530],{"class":513},[494,7497,7498],{"class":3420}," 1rem",[494,7500,847],{"class":513},[494,7502,7503,7505,7507,7509],{"class":496,"line":2983},[494,7504,3902],{"class":1266},[494,7506,530],{"class":513},[494,7508,7498],{"class":3420},[494,7510,847],{"class":513},[494,7512,7513],{"class":496,"line":2989},[494,7514,3768],{"class":513},[494,7516,7517],{"class":496,"line":2995},[494,7518,872],{"emptyLinePlaceholder":871},[494,7520,7521,7523,7526],{"class":496,"line":3001},[494,7522,5588],{"class":513},[494,7524,7525],{"class":925},"btn-xl",[494,7527,520],{"class":513},[494,7529,7530,7532,7534,7536,7538],{"class":496,"line":3007},[494,7531,5625],{"class":1266},[494,7533,530],{"class":513},[494,7535,7498],{"class":3420},[494,7537,5516],{"class":3420},[494,7539,847],{"class":513},[494,7541,7542,7544,7546,7549],{"class":496,"line":3013},[494,7543,5749],{"class":1266},[494,7545,530],{"class":513},[494,7547,7548],{"class":3420}," 1.125rem",[494,7550,847],{"class":513},[494,7552,7553],{"class":496,"line":3019},[494,7554,3768],{"class":513},[494,7556,7557],{"class":496,"line":3025},[494,7558,872],{"emptyLinePlaceholder":871},[494,7560,7561],{"class":496,"line":3031},[494,7562,7563],{"class":500}," \u002F* === CARD === *\u002F\n",[494,7565,7566,7568,7570],{"class":496,"line":3036},[494,7567,5588],{"class":513},[494,7569,5591],{"class":925},[494,7571,520],{"class":513},[494,7573,7574,7576,7578,7580],{"class":496,"line":3042},[494,7575,5598],{"class":1266},[494,7577,530],{"class":513},[494,7579,5603],{"class":650},[494,7581,847],{"class":513},[494,7583,7584,7586,7588,7590,7592,7594],{"class":496,"line":3047},[494,7585,3902],{"class":1266},[494,7587,530],{"class":513},[494,7589,1272],{"class":766},[494,7591,770],{"class":513},[494,7593,5716],{"class":650},[494,7595,1280],{"class":513},[494,7597,7598,7600,7602,7604,7606,7609,7611,7614,7617,7620],{"class":496,"line":3053},[494,7599,7015],{"class":1266},[494,7601,530],{"class":513},[494,7603,7020],{"class":3420},[494,7605,3874],{"class":650},[494,7607,7608],{"class":766},"oklch",[494,7610,770],{"class":513},[494,7612,7613],{"class":3420},"0.88",[494,7615,7616],{"class":3420}," 0.01",[494,7618,7619],{"class":3420}," 260",[494,7621,1280],{"class":513},[494,7623,7624,7627,7629,7632],{"class":496,"line":3059},[494,7625,7626],{"class":1266}," overflow",[494,7628,530],{"class":513},[494,7630,7631],{"class":650}," hidden",[494,7633,847],{"class":513},[494,7635,7636],{"class":496,"line":3065},[494,7637,3768],{"class":513},[494,7639,7640],{"class":496,"line":3071},[494,7641,872],{"emptyLinePlaceholder":871},[494,7643,7644,7646,7649],{"class":496,"line":3077},[494,7645,5588],{"class":513},[494,7647,7648],{"class":925},"card-hoverable",[494,7650,520],{"class":513},[494,7652,7653,7655,7657,7660,7663,7665,7667,7670,7672,7674],{"class":496,"line":3082},[494,7654,5761],{"class":1266},[494,7656,530],{"class":513},[494,7658,7659],{"class":650}," box-shadow ",[494,7661,7662],{"class":3420},"0.2s",[494,7664,5772],{"class":650},[494,7666,661],{"class":513},[494,7668,7669],{"class":650}," transform ",[494,7671,7662],{"class":3420},[494,7673,5772],{"class":650},[494,7675,847],{"class":513},[494,7677,7678],{"class":496,"line":3088},[494,7679,3768],{"class":513},[494,7681,7682,7684,7686,7688,7690],{"class":496,"line":3094},[494,7683,5588],{"class":513},[494,7685,7648],{"class":925},[494,7687,530],{"class":513},[494,7689,7212],{"class":3857},[494,7691,520],{"class":513},[494,7693,7694,7696,7698,7700,7702,7704],{"class":496,"line":3100},[494,7695,5641],{"class":1266},[494,7697,530],{"class":513},[494,7699,1272],{"class":766},[494,7701,770],{"class":513},[494,7703,5650],{"class":650},[494,7705,1280],{"class":513},[494,7707,7708,7711,7713,7715,7717,7720],{"class":496,"line":3106},[494,7709,7710],{"class":1266}," transform",[494,7712,530],{"class":513},[494,7714,3488],{"class":766},[494,7716,770],{"class":513},[494,7718,7719],{"class":3420},"-2px",[494,7721,1280],{"class":513},[494,7723,7724],{"class":496,"line":3112},[494,7725,3768],{"class":513},[494,7727,7728],{"class":496,"line":3118},[494,7729,872],{"emptyLinePlaceholder":871},[494,7731,7732],{"class":496,"line":3124},[494,7733,7734],{"class":500}," \u002F* Card sections *\u002F\n",[494,7736,7737,7739,7742],{"class":496,"line":3130},[494,7738,5588],{"class":513},[494,7740,7741],{"class":925},"card-header",[494,7743,520],{"class":513},[494,7745,7746,7748,7750,7752,7754,7756],{"class":496,"line":3135},[494,7747,5625],{"class":1266},[494,7749,530],{"class":513},[494,7751,5534],{"class":3420},[494,7753,5534],{"class":3420},[494,7755,929],{"class":3420},[494,7757,847],{"class":513},[494,7759,7760],{"class":496,"line":3141},[494,7761,3768],{"class":513},[494,7763,7764,7766,7769],{"class":496,"line":3160},[494,7765,5588],{"class":513},[494,7767,7768],{"class":925},"card-body",[494,7770,520],{"class":513},[494,7772,7773,7775,7777,7779],{"class":496,"line":3180},[494,7774,5625],{"class":1266},[494,7776,530],{"class":513},[494,7778,5534],{"class":3420},[494,7780,847],{"class":513},[494,7782,7783],{"class":496,"line":3192},[494,7784,3768],{"class":513},[494,7786,7787,7789,7792],{"class":496,"line":3205},[494,7788,5588],{"class":513},[494,7790,7791],{"class":925},"card-footer",[494,7793,520],{"class":513},[494,7795,7796,7798,7800,7802,7804,7806],{"class":496,"line":3210},[494,7797,5625],{"class":1266},[494,7799,530],{"class":513},[494,7801,929],{"class":3420},[494,7803,5534],{"class":3420},[494,7805,5534],{"class":3420},[494,7807,847],{"class":513},[494,7809,7810],{"class":496,"line":3216},[494,7811,3768],{"class":513},[494,7813,7814],{"class":496,"line":3237},[494,7815,872],{"emptyLinePlaceholder":871},[494,7817,7818],{"class":496,"line":3257},[494,7819,7820],{"class":500}," \u002F* === INPUT === *\u002F\n",[494,7822,7823,7825,7828],{"class":496,"line":3276},[494,7824,5588],{"class":513},[494,7826,7827],{"class":925},"input",[494,7829,520],{"class":513},[494,7831,7832,7834,7836,7838],{"class":496,"line":3296},[494,7833,4503],{"class":1266},[494,7835,530],{"class":513},[494,7837,4722],{"class":650},[494,7839,847],{"class":513},[494,7841,7842,7845,7847,7849],{"class":496,"line":3301},[494,7843,7844],{"class":1266}," width",[494,7846,530],{"class":513},[494,7848,6550],{"class":3420},[494,7850,847],{"class":513},[494,7852,7853,7855,7857,7859,7861],{"class":496,"line":3307},[494,7854,5625],{"class":1266},[494,7856,530],{"class":513},[494,7858,5739],{"class":3420},[494,7860,5754],{"class":3420},[494,7862,847],{"class":513},[494,7864,7865,7867,7869,7871],{"class":496,"line":3313},[494,7866,5749],{"class":1266},[494,7868,530],{"class":513},[494,7870,5754],{"class":3420},[494,7872,847],{"class":513},[494,7874,7875,7877,7879,7882],{"class":496,"line":3319},[494,7876,6422],{"class":1266},[494,7878,530],{"class":513},[494,7880,7881],{"class":3420}," 1.5",[494,7883,847],{"class":513},[494,7885,7886,7888,7890,7892],{"class":496,"line":3325},[494,7887,3804],{"class":1266},[494,7889,530],{"class":513},[494,7891,6597],{"class":650},[494,7893,847],{"class":513},[494,7895,7896,7898,7900,7902],{"class":496,"line":3331},[494,7897,3821],{"class":1266},[494,7899,530],{"class":513},[494,7901,5603],{"class":650},[494,7903,847],{"class":513},[494,7905,7906,7908,7910,7912,7914,7916,7918,7921,7923,7925],{"class":496,"line":3337},[494,7907,7015],{"class":1266},[494,7909,530],{"class":513},[494,7911,7020],{"class":3420},[494,7913,3874],{"class":650},[494,7915,7608],{"class":766},[494,7917,770],{"class":513},[494,7919,7920],{"class":3420},"0.78",[494,7922,7616],{"class":3420},[494,7924,7619],{"class":3420},[494,7926,1280],{"class":513},[494,7928,7929,7931,7933,7935,7937,7939],{"class":496,"line":3343},[494,7930,3902],{"class":1266},[494,7932,530],{"class":513},[494,7934,1272],{"class":766},[494,7936,770],{"class":513},[494,7938,5716],{"class":650},[494,7940,1280],{"class":513},[494,7942,7943,7945,7947,7950,7952,7954,7956,7958,7960,7962],{"class":496,"line":3349},[494,7944,5761],{"class":1266},[494,7946,530],{"class":513},[494,7948,7949],{"class":650}," border-color ",[494,7951,5769],{"class":3420},[494,7953,5772],{"class":650},[494,7955,661],{"class":513},[494,7957,7659],{"class":650},[494,7959,5769],{"class":3420},[494,7961,5772],{"class":650},[494,7963,847],{"class":513},[494,7965,7966],{"class":496,"line":3354},[494,7967,3768],{"class":513},[494,7969,7970],{"class":496,"line":3360},[494,7971,872],{"emptyLinePlaceholder":871},[494,7973,7974,7976,7978,7980,7983],{"class":496,"line":3366},[494,7975,5588],{"class":513},[494,7977,7827],{"class":925},[494,7979,4493],{"class":513},[494,7981,7982],{"class":3857},"placeholder",[494,7984,520],{"class":513},[494,7986,7987,7989,7991,7994,7996,7999,8001,8003],{"class":496,"line":3372},[494,7988,3804],{"class":1266},[494,7990,530],{"class":513},[494,7992,7993],{"class":766}," oklch",[494,7995,770],{"class":513},[494,7997,7998],{"class":3420},"0.64",[494,8000,7616],{"class":3420},[494,8002,7619],{"class":3420},[494,8004,1280],{"class":513},[494,8006,8007],{"class":496,"line":3378},[494,8008,3768],{"class":513},[494,8010,8011],{"class":496,"line":3383},[494,8012,872],{"emptyLinePlaceholder":871},[494,8014,8015,8017,8019,8021,8024],{"class":496,"line":3388},[494,8016,5588],{"class":513},[494,8018,7827],{"class":925},[494,8020,530],{"class":513},[494,8022,8023],{"class":3857},"focus",[494,8025,520],{"class":513},[494,8027,8028,8030,8032,8034],{"class":496,"line":3394},[494,8029,3866],{"class":1266},[494,8031,530],{"class":513},[494,8033,4508],{"class":650},[494,8035,847],{"class":513},[494,8037,8038,8040,8042,8044,8046,8048],{"class":496,"line":3406},[494,8039,7276],{"class":1266},[494,8041,530],{"class":513},[494,8043,1272],{"class":766},[494,8045,770],{"class":513},[494,8047,1277],{"class":650},[494,8049,1280],{"class":513},[494,8051,8052,8054,8056,8058,8060,8062,8065,8067,8069,8071,8074,8077,8079,8082],{"class":496,"line":3429},[494,8053,5641],{"class":1266},[494,8055,530],{"class":513},[494,8057,929],{"class":3420},[494,8059,929],{"class":3420},[494,8061,929],{"class":3420},[494,8063,8064],{"class":3420}," 3px",[494,8066,7388],{"class":766},[494,8068,770],{"class":513},[494,8070,1585],{"class":3420},[494,8072,8073],{"class":3420}," 130",[494,8075,8076],{"class":3420}," 246",[494,8078,7399],{"class":650},[494,8080,8081],{"class":3420},"0.15",[494,8083,1280],{"class":513},[494,8085,8086],{"class":496,"line":3448},[494,8087,3768],{"class":513},[494,8089,8090],{"class":496,"line":3453},[494,8091,872],{"emptyLinePlaceholder":871},[494,8093,8094,8096,8098,8100,8102],{"class":496,"line":3458},[494,8095,5588],{"class":513},[494,8097,7827],{"class":925},[494,8099,530],{"class":513},[494,8101,7115],{"class":3857},[494,8103,520],{"class":513},[494,8105,8106,8108,8110,8112,8114,8116,8118,8120],{"class":496,"line":3468},[494,8107,3821],{"class":1266},[494,8109,530],{"class":513},[494,8111,7993],{"class":766},[494,8113,770],{"class":513},[494,8115,3654],{"class":3420},[494,8117,7616],{"class":3420},[494,8119,7619],{"class":3420},[494,8121,1280],{"class":513},[494,8123,8124,8126,8128,8131],{"class":496,"line":3501},[494,8125,7122],{"class":1266},[494,8127,530],{"class":513},[494,8129,8130],{"class":3420}," 0.7",[494,8132,847],{"class":513},[494,8134,8135,8137,8139,8141],{"class":496,"line":3531},[494,8136,5779],{"class":1266},[494,8138,530],{"class":513},[494,8140,7138],{"class":650},[494,8142,847],{"class":513},[494,8144,8145],{"class":496,"line":3536},[494,8146,3768],{"class":513},[494,8148,8149],{"class":496,"line":3541},[494,8150,872],{"emptyLinePlaceholder":871},[494,8152,8153,8155,8158],{"class":496,"line":3551},[494,8154,5588],{"class":513},[494,8156,8157],{"class":925},"input-error",[494,8159,520],{"class":513},[494,8161,8162,8164,8166,8168,8170,8173,8176,8179],{"class":496,"line":3581},[494,8163,7276],{"class":1266},[494,8165,530],{"class":513},[494,8167,7993],{"class":766},[494,8169,770],{"class":513},[494,8171,8172],{"class":3420},"0.55",[494,8174,8175],{"class":3420}," 0.22",[494,8177,8178],{"class":3420}," 20",[494,8180,1280],{"class":513},[494,8182,8183],{"class":496,"line":3610},[494,8184,3768],{"class":513},[494,8186,8187,8189,8191,8193,8195],{"class":496,"line":3615},[494,8188,5588],{"class":513},[494,8190,8157],{"class":925},[494,8192,530],{"class":513},[494,8194,8023],{"class":3857},[494,8196,520],{"class":513},[494,8198,8199,8201,8203,8205,8207,8209,8211,8213,8215,8218,8221,8223,8225,8227],{"class":496,"line":3620},[494,8200,5641],{"class":1266},[494,8202,530],{"class":513},[494,8204,929],{"class":3420},[494,8206,929],{"class":3420},[494,8208,929],{"class":3420},[494,8210,8064],{"class":3420},[494,8212,7388],{"class":766},[494,8214,770],{"class":513},[494,8216,8217],{"class":3420},"239",[494,8219,8220],{"class":3420}," 68",[494,8222,8220],{"class":3420},[494,8224,7399],{"class":650},[494,8226,8081],{"class":3420},[494,8228,1280],{"class":513},[494,8230,8231],{"class":496,"line":3630},[494,8232,3768],{"class":513},[494,8234,8235],{"class":496,"line":3661},[494,8236,872],{"emptyLinePlaceholder":871},[494,8238,8239],{"class":496,"line":3690},[494,8240,8241],{"class":500}," \u002F* === BADGE === *\u002F\n",[494,8243,8244,8246,8249],{"class":496,"line":3695},[494,8245,5588],{"class":513},[494,8247,8248],{"class":925},"badge",[494,8250,520],{"class":513},[494,8252,8253,8255,8257,8259],{"class":496,"line":3700},[494,8254,4503],{"class":1266},[494,8256,530],{"class":513},[494,8258,5678],{"class":650},[494,8260,847],{"class":513},[494,8262,8263,8265,8267,8269],{"class":496,"line":3706},[494,8264,5685],{"class":1266},[494,8266,530],{"class":513},[494,8268,5690],{"class":650},[494,8270,847],{"class":513},[494,8272,8273,8275,8277,8280,8282],{"class":496,"line":3718},[494,8274,5625],{"class":1266},[494,8276,530],{"class":513},[494,8278,8279],{"class":3420}," 0.125rem",[494,8281,5739],{"class":3420},[494,8283,847],{"class":513},[494,8285,8286,8288,8290,8292],{"class":496,"line":3726},[494,8287,5749],{"class":1266},[494,8289,530],{"class":513},[494,8291,7438],{"class":3420},[494,8293,847],{"class":513},[494,8295,8296,8298,8300,8302],{"class":496,"line":3739},[494,8297,5723],{"class":1266},[494,8299,530],{"class":513},[494,8301,5728],{"class":3420},[494,8303,847],{"class":513},[494,8305,8306,8308,8310,8312],{"class":496,"line":3752},[494,8307,6422],{"class":1266},[494,8309,530],{"class":513},[494,8311,5742],{"class":3420},[494,8313,847],{"class":513},[494,8315,8316,8318,8320,8323],{"class":496,"line":3765},[494,8317,3902],{"class":1266},[494,8319,530],{"class":513},[494,8321,8322],{"class":3420}," 9999px",[494,8324,847],{"class":513},[494,8326,8327,8329,8331,8333],{"class":496,"line":3771},[494,8328,7030],{"class":1266},[494,8330,530],{"class":513},[494,8332,7035],{"class":650},[494,8334,847],{"class":513},[494,8336,8337],{"class":496,"line":3776},[494,8338,3768],{"class":513},[494,8340,8341],{"class":496,"line":3784},[494,8342,872],{"emptyLinePlaceholder":871},[494,8344,8345,8347,8350],{"class":496,"line":3801},[494,8346,5588],{"class":513},[494,8348,8349],{"class":925},"badge-primary",[494,8351,520],{"class":513},[494,8353,8354,8356,8358,8361,8363,8366,8368,8370,8372,8374,8376,8378,8381,8383,8385],{"class":496,"line":3818},[494,8355,3821],{"class":1266},[494,8357,530],{"class":513},[494,8359,8360],{"class":766}," color-mix",[494,8362,770],{"class":513},[494,8364,8365],{"class":3400},"in",[494,8367,7993],{"class":3400},[494,8369,661],{"class":513},[494,8371,1272],{"class":766},[494,8373,770],{"class":513},[494,8375,1277],{"class":650},[494,8377,780],{"class":513},[494,8379,8380],{"class":3420}," 15%",[494,8382,661],{"class":513},[494,8384,7255],{"class":650},[494,8386,1280],{"class":513},[494,8388,8389,8391,8393,8395,8397,8399],{"class":496,"line":3835},[494,8390,3804],{"class":1266},[494,8392,530],{"class":513},[494,8394,1272],{"class":766},[494,8396,770],{"class":513},[494,8398,1277],{"class":650},[494,8400,1280],{"class":513},[494,8402,8403],{"class":496,"line":3840},[494,8404,3768],{"class":513},[494,8406,8407],{"class":496,"line":3845},[494,8408,872],{"emptyLinePlaceholder":871},[494,8410,8411,8413,8416],{"class":496,"line":3851},[494,8412,5588],{"class":513},[494,8414,8415],{"class":925},"badge-success",[494,8417,520],{"class":513},[494,8419,8420,8422,8424,8426,8428,8430,8432,8434,8436,8438,8441,8444,8447,8449,8451,8453,8455],{"class":496,"line":3863},[494,8421,3821],{"class":1266},[494,8423,530],{"class":513},[494,8425,8360],{"class":766},[494,8427,770],{"class":513},[494,8429,8365],{"class":3400},[494,8431,7993],{"class":3400},[494,8433,661],{"class":513},[494,8435,7993],{"class":766},[494,8437,770],{"class":513},[494,8439,8440],{"class":3420},"0.60",[494,8442,8443],{"class":3420}," 0.19",[494,8445,8446],{"class":3420}," 150",[494,8448,780],{"class":513},[494,8450,8380],{"class":3420},[494,8452,661],{"class":513},[494,8454,7255],{"class":650},[494,8456,1280],{"class":513},[494,8458,8459,8461,8463,8465,8467,8470,8473,8475],{"class":496,"line":3887},[494,8460,3804],{"class":1266},[494,8462,530],{"class":513},[494,8464,7993],{"class":766},[494,8466,770],{"class":513},[494,8468,8469],{"class":3420},"0.45",[494,8471,8472],{"class":3420}," 0.15",[494,8474,8446],{"class":3420},[494,8476,1280],{"class":513},[494,8478,8479],{"class":496,"line":3899},[494,8480,3768],{"class":513},[494,8482,8483],{"class":496,"line":3916},[494,8484,872],{"emptyLinePlaceholder":871},[494,8486,8487,8489,8492],{"class":496,"line":3921},[494,8488,5588],{"class":513},[494,8490,8491],{"class":925},"badge-warning",[494,8493,520],{"class":513},[494,8495,8497,8499,8501,8503,8505,8507,8509,8511,8513,8515,8518,8521,8524,8526,8528,8530,8532],{"class":496,"line":8496},173,[494,8498,3821],{"class":1266},[494,8500,530],{"class":513},[494,8502,8360],{"class":766},[494,8504,770],{"class":513},[494,8506,8365],{"class":3400},[494,8508,7993],{"class":3400},[494,8510,661],{"class":513},[494,8512,7993],{"class":766},[494,8514,770],{"class":513},[494,8516,8517],{"class":3420},"0.70",[494,8519,8520],{"class":3420}," 0.17",[494,8522,8523],{"class":3420}," 85",[494,8525,780],{"class":513},[494,8527,8380],{"class":3420},[494,8529,661],{"class":513},[494,8531,7255],{"class":650},[494,8533,1280],{"class":513},[494,8535,8537,8539,8541,8543,8545,8548,8551,8554],{"class":496,"line":8536},174,[494,8538,3804],{"class":1266},[494,8540,530],{"class":513},[494,8542,7993],{"class":766},[494,8544,770],{"class":513},[494,8546,8547],{"class":3420},"0.50",[494,8549,8550],{"class":3420}," 0.13",[494,8552,8553],{"class":3420}," 75",[494,8555,1280],{"class":513},[494,8557,8559],{"class":496,"line":8558},175,[494,8560,3768],{"class":513},[494,8562,8564],{"class":496,"line":8563},176,[494,8565,872],{"emptyLinePlaceholder":871},[494,8567,8569,8571,8574],{"class":496,"line":8568},177,[494,8570,5588],{"class":513},[494,8572,8573],{"class":925},"badge-error",[494,8575,520],{"class":513},[494,8577,8579,8581,8583,8585,8587,8589,8591,8593,8595,8597,8599,8601,8603,8605,8607,8609,8611],{"class":496,"line":8578},178,[494,8580,3821],{"class":1266},[494,8582,530],{"class":513},[494,8584,8360],{"class":766},[494,8586,770],{"class":513},[494,8588,8365],{"class":3400},[494,8590,7993],{"class":3400},[494,8592,661],{"class":513},[494,8594,7993],{"class":766},[494,8596,770],{"class":513},[494,8598,8172],{"class":3420},[494,8600,8175],{"class":3420},[494,8602,8178],{"class":3420},[494,8604,780],{"class":513},[494,8606,8380],{"class":3420},[494,8608,661],{"class":513},[494,8610,7255],{"class":650},[494,8612,1280],{"class":513},[494,8614,8616,8618,8620,8622,8624,8626,8629,8631],{"class":496,"line":8615},179,[494,8617,3804],{"class":1266},[494,8619,530],{"class":513},[494,8621,7993],{"class":766},[494,8623,770],{"class":513},[494,8625,8469],{"class":3420},[494,8627,8628],{"class":3420}," 0.20",[494,8630,8178],{"class":3420},[494,8632,1280],{"class":513},[494,8634,8636],{"class":496,"line":8635},180,[494,8637,3768],{"class":513},[494,8639,8641],{"class":496,"line":8640},181,[494,8642,812],{"class":513},[485,8644,8646],{"className":4521,"code":8645,"language":4523,"meta":490,"style":490},"\u003C!-- HTML Usage Demo -->\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"vi\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>Component Classes Demo\u003C\u002Ftitle>\n \u003Clink rel=\"stylesheet\" href=\"components.css\">\n\u003C\u002Fhead>\n\u003Cbody class=\"bg-neutral-50 p-8\">\n\n \u003Cdiv class=\"max-w-2xl mx-auto space-y-8\">\n\n \u003C!-- Buttons -->\n \u003Csection>\n \u003Ch2 class=\"text-xl font-bold mb-4\">Buttons\u003C\u002Fh2>\n \u003Cdiv class=\"flex flex-wrap gap-3\">\n \u003Cbutton class=\"btn btn-primary\">Primary\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-secondary\">Secondary\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-ghost\">Ghost\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-primary btn-sm\">Small\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-primary btn-lg\">Large\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-primary btn-xl\">X-Large\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-primary\" disabled>Disabled\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Cards -->\n \u003Csection>\n \u003Ch2 class=\"text-xl font-bold mb-4\">Cards\u003C\u002Fh2>\n \u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003Cdiv class=\"card card-hoverable\">\n \u003Cdiv class=\"card-header\">\n \u003Ch3 class=\"font-semibold text-lg\">Card Title\u003C\u002Fh3>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"card-body\">\n \u003Cp class=\"text-neutral-600\">Card content with reusable component classes.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"card-footer\">\n \u003Cbutton class=\"btn btn-ghost btn-sm\">Action\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"card card-hoverable p-6\">\n \u003Ch3 class=\"font-semibold text-lg mb-2\">Simple Card\u003C\u002Fh3>\n \u003Cp class=\"text-neutral-600\">Dùng card class + padding utility.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Inputs -->\n \u003Csection>\n \u003Ch2 class=\"text-xl font-bold mb-4\">Inputs\u003C\u002Fh2>\n \u003Cdiv class=\"space-y-3 max-w-md\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium mb-1\">Email\u003C\u002Flabel>\n \u003Cinput type=\"email\" class=\"input\" placeholder=\"email@example.com\">\n \u003C\u002Fdiv>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium mb-1\">Error State\u003C\u002Flabel>\n \u003Cinput type=\"text\" class=\"input input-error\" placeholder=\"Invalid input\" value=\"bad-value\">\n \u003Cp class=\"text-red-600 text-xs mt-1\">This field has an error.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium mb-1\">Disabled\u003C\u002Flabel>\n \u003Cinput type=\"text\" class=\"input\" placeholder=\"Cannot edit\" disabled>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Badges -->\n \u003Csection>\n \u003Ch2 class=\"text-xl font-bold mb-4\">Badges\u003C\u002Fh2>\n \u003Cdiv class=\"flex flex-wrap gap-2\">\n \u003Cspan class=\"badge badge-primary\">Primary\u003C\u002Fspan>\n \u003Cspan class=\"badge badge-success\">Success\u003C\u002Fspan>\n \u003Cspan class=\"badge badge-warning\">Warning\u003C\u002Fspan>\n \u003Cspan class=\"badge badge-error\">Error\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[441,8647,8648,8653,8666,8686,8695,8717,8749,8767,8800,8808,8828,8832,8851,8855,8860,8870,8899,8918,8948,8976,9004,9032,9060,9088,9118,9127,9136,9140,9145,9153,9180,9199,9218,9237,9266,9275,9293,9321,9329,9347,9375,9383,9392,9396,9415,9443,9470,9478,9486,9494,9498,9503,9511,9538,9557,9565,9594,9636,9644,9652,9679,9731,9759,9767,9775,9801,9842,9850,9858,9866,9870,9875,9883,9910,9929,9956,9984,10012,10040,10048,10056,10060,10069,10073,10081],{"__ignoreMap":490},[494,8649,8650],{"class":496,"line":497},[494,8651,8652],{"class":500},"\u003C!-- HTML Usage Demo -->\n",[494,8654,8655,8658,8661,8664],{"class":496,"line":504},[494,8656,8657],{"class":513},"\u003C!",[494,8659,8660],{"class":526},"DOCTYPE",[494,8662,8663],{"class":3857}," html",[494,8665,4565],{"class":513},[494,8667,8668,8670,8672,8675,8677,8679,8682,8684],{"class":496,"line":510},[494,8669,4535],{"class":513},[494,8671,4523],{"class":526},[494,8673,8674],{"class":3857}," lang",[494,8676,4544],{"class":513},[494,8678,844],{"class":513},[494,8680,8681],{"class":576},"vi",[494,8683,844],{"class":513},[494,8685,4565],{"class":513},[494,8687,8688,8690,8693],{"class":496,"line":523},[494,8689,4535],{"class":513},[494,8691,8692],{"class":526},"head",[494,8694,4565],{"class":513},[494,8696,8697,8700,8703,8706,8708,8710,8713,8715],{"class":496,"line":535},[494,8698,8699],{"class":513}," \u003C",[494,8701,8702],{"class":526},"meta",[494,8704,8705],{"class":3857}," charset",[494,8707,4544],{"class":513},[494,8709,844],{"class":513},[494,8711,8712],{"class":576},"UTF-8",[494,8714,844],{"class":513},[494,8716,4565],{"class":513},[494,8718,8719,8721,8723,8726,8728,8730,8733,8735,8738,8740,8742,8745,8747],{"class":496,"line":545},[494,8720,8699],{"class":513},[494,8722,8702],{"class":526},[494,8724,8725],{"class":3857}," name",[494,8727,4544],{"class":513},[494,8729,844],{"class":513},[494,8731,8732],{"class":576},"viewport",[494,8734,844],{"class":513},[494,8736,8737],{"class":3857}," content",[494,8739,4544],{"class":513},[494,8741,844],{"class":513},[494,8743,8744],{"class":576},"width=device-width, initial-scale=1.0",[494,8746,844],{"class":513},[494,8748,4565],{"class":513},[494,8750,8751,8753,8756,8758,8761,8763,8765],{"class":496,"line":555},[494,8752,8699],{"class":513},[494,8754,8755],{"class":526},"title",[494,8757,4554],{"class":513},[494,8759,8760],{"class":650},"Component Classes Demo",[494,8762,4560],{"class":513},[494,8764,8755],{"class":526},[494,8766,4565],{"class":513},[494,8768,8769,8771,8774,8777,8779,8781,8784,8786,8789,8791,8793,8796,8798],{"class":496,"line":565},[494,8770,8699],{"class":513},[494,8772,8773],{"class":526},"link",[494,8775,8776],{"class":3857}," rel",[494,8778,4544],{"class":513},[494,8780,844],{"class":513},[494,8782,8783],{"class":576},"stylesheet",[494,8785,844],{"class":513},[494,8787,8788],{"class":3857}," href",[494,8790,4544],{"class":513},[494,8792,844],{"class":513},[494,8794,8795],{"class":576},"components.css",[494,8797,844],{"class":513},[494,8799,4565],{"class":513},[494,8801,8802,8804,8806],{"class":496,"line":586},[494,8803,4560],{"class":513},[494,8805,8692],{"class":526},[494,8807,4565],{"class":513},[494,8809,8810,8812,8815,8817,8819,8821,8824,8826],{"class":496,"line":603},[494,8811,4535],{"class":513},[494,8813,8814],{"class":526},"body",[494,8816,4541],{"class":3857},[494,8818,4544],{"class":513},[494,8820,844],{"class":513},[494,8822,8823],{"class":576},"bg-neutral-50 p-8",[494,8825,844],{"class":513},[494,8827,4565],{"class":513},[494,8829,8830],{"class":496,"line":620},[494,8831,872],{"emptyLinePlaceholder":871},[494,8833,8834,8836,8838,8840,8842,8844,8847,8849],{"class":496,"line":626},[494,8835,8699],{"class":513},[494,8837,4572],{"class":526},[494,8839,4541],{"class":3857},[494,8841,4544],{"class":513},[494,8843,844],{"class":513},[494,8845,8846],{"class":576},"max-w-2xl mx-auto space-y-8",[494,8848,844],{"class":513},[494,8850,4565],{"class":513},[494,8852,8853],{"class":496,"line":632},[494,8854,872],{"emptyLinePlaceholder":871},[494,8856,8857],{"class":496,"line":642},[494,8858,8859],{"class":500}," \u003C!-- Buttons -->\n",[494,8861,8862,8865,8868],{"class":496,"line":676},[494,8863,8864],{"class":513}," \u003C",[494,8866,8867],{"class":526},"section",[494,8869,4565],{"class":513},[494,8871,8872,8875,8877,8879,8881,8883,8886,8888,8890,8893,8895,8897],{"class":496,"line":681},[494,8873,8874],{"class":513}," \u003C",[494,8876,427],{"class":526},[494,8878,4541],{"class":3857},[494,8880,4544],{"class":513},[494,8882,844],{"class":513},[494,8884,8885],{"class":576},"text-xl font-bold mb-4",[494,8887,844],{"class":513},[494,8889,4554],{"class":513},[494,8891,8892],{"class":650},"Buttons",[494,8894,4560],{"class":513},[494,8896,427],{"class":526},[494,8898,4565],{"class":513},[494,8900,8901,8903,8905,8907,8909,8911,8914,8916],{"class":496,"line":691},[494,8902,8874],{"class":513},[494,8904,4572],{"class":526},[494,8906,4541],{"class":3857},[494,8908,4544],{"class":513},[494,8910,844],{"class":513},[494,8912,8913],{"class":576},"flex flex-wrap gap-3",[494,8915,844],{"class":513},[494,8917,4565],{"class":513},[494,8919,8920,8923,8926,8928,8930,8932,8935,8937,8939,8942,8944,8946],{"class":496,"line":713},[494,8921,8922],{"class":513}," \u003C",[494,8924,8925],{"class":526},"button",[494,8927,4541],{"class":3857},[494,8929,4544],{"class":513},[494,8931,844],{"class":513},[494,8933,8934],{"class":576},"btn btn-primary",[494,8936,844],{"class":513},[494,8938,4554],{"class":513},[494,8940,8941],{"class":650},"Primary",[494,8943,4560],{"class":513},[494,8945,8925],{"class":526},[494,8947,4565],{"class":513},[494,8949,8950,8952,8954,8956,8958,8960,8963,8965,8967,8970,8972,8974],{"class":496,"line":734},[494,8951,8922],{"class":513},[494,8953,8925],{"class":526},[494,8955,4541],{"class":3857},[494,8957,4544],{"class":513},[494,8959,844],{"class":513},[494,8961,8962],{"class":576},"btn btn-secondary",[494,8964,844],{"class":513},[494,8966,4554],{"class":513},[494,8968,8969],{"class":650},"Secondary",[494,8971,4560],{"class":513},[494,8973,8925],{"class":526},[494,8975,4565],{"class":513},[494,8977,8978,8980,8982,8984,8986,8988,8991,8993,8995,8998,9000,9002],{"class":496,"line":740},[494,8979,8922],{"class":513},[494,8981,8925],{"class":526},[494,8983,4541],{"class":3857},[494,8985,4544],{"class":513},[494,8987,844],{"class":513},[494,8989,8990],{"class":576},"btn btn-ghost",[494,8992,844],{"class":513},[494,8994,4554],{"class":513},[494,8996,8997],{"class":650},"Ghost",[494,8999,4560],{"class":513},[494,9001,8925],{"class":526},[494,9003,4565],{"class":513},[494,9005,9006,9008,9010,9012,9014,9016,9019,9021,9023,9026,9028,9030],{"class":496,"line":746},[494,9007,8922],{"class":513},[494,9009,8925],{"class":526},[494,9011,4541],{"class":3857},[494,9013,4544],{"class":513},[494,9015,844],{"class":513},[494,9017,9018],{"class":576},"btn btn-primary btn-sm",[494,9020,844],{"class":513},[494,9022,4554],{"class":513},[494,9024,9025],{"class":650},"Small",[494,9027,4560],{"class":513},[494,9029,8925],{"class":526},[494,9031,4565],{"class":513},[494,9033,9034,9036,9038,9040,9042,9044,9047,9049,9051,9054,9056,9058],{"class":496,"line":752},[494,9035,8922],{"class":513},[494,9037,8925],{"class":526},[494,9039,4541],{"class":3857},[494,9041,4544],{"class":513},[494,9043,844],{"class":513},[494,9045,9046],{"class":576},"btn btn-primary btn-lg",[494,9048,844],{"class":513},[494,9050,4554],{"class":513},[494,9052,9053],{"class":650},"Large",[494,9055,4560],{"class":513},[494,9057,8925],{"class":526},[494,9059,4565],{"class":513},[494,9061,9062,9064,9066,9068,9070,9072,9075,9077,9079,9082,9084,9086],{"class":496,"line":763},[494,9063,8922],{"class":513},[494,9065,8925],{"class":526},[494,9067,4541],{"class":3857},[494,9069,4544],{"class":513},[494,9071,844],{"class":513},[494,9073,9074],{"class":576},"btn btn-primary btn-xl",[494,9076,844],{"class":513},[494,9078,4554],{"class":513},[494,9080,9081],{"class":650},"X-Large",[494,9083,4560],{"class":513},[494,9085,8925],{"class":526},[494,9087,4565],{"class":513},[494,9089,9090,9092,9094,9096,9098,9100,9102,9104,9107,9109,9112,9114,9116],{"class":496,"line":785},[494,9091,8922],{"class":513},[494,9093,8925],{"class":526},[494,9095,4541],{"class":3857},[494,9097,4544],{"class":513},[494,9099,844],{"class":513},[494,9101,8934],{"class":576},[494,9103,844],{"class":513},[494,9105,9106],{"class":3857}," disabled",[494,9108,4554],{"class":513},[494,9110,9111],{"class":650},"Disabled",[494,9113,4560],{"class":513},[494,9115,8925],{"class":526},[494,9117,4565],{"class":513},[494,9119,9120,9123,9125],{"class":496,"line":803},[494,9121,9122],{"class":513}," \u003C\u002F",[494,9124,4572],{"class":526},[494,9126,4565],{"class":513},[494,9128,9129,9132,9134],{"class":496,"line":809},[494,9130,9131],{"class":513}," \u003C\u002F",[494,9133,8867],{"class":526},[494,9135,4565],{"class":513},[494,9137,9138],{"class":496,"line":1157},[494,9139,872],{"emptyLinePlaceholder":871},[494,9141,9142],{"class":496,"line":1163},[494,9143,9144],{"class":500}," \u003C!-- Cards -->\n",[494,9146,9147,9149,9151],{"class":496,"line":1169},[494,9148,8864],{"class":513},[494,9150,8867],{"class":526},[494,9152,4565],{"class":513},[494,9154,9155,9157,9159,9161,9163,9165,9167,9169,9171,9174,9176,9178],{"class":496,"line":2313},[494,9156,8874],{"class":513},[494,9158,427],{"class":526},[494,9160,4541],{"class":3857},[494,9162,4544],{"class":513},[494,9164,844],{"class":513},[494,9166,8885],{"class":576},[494,9168,844],{"class":513},[494,9170,4554],{"class":513},[494,9172,9173],{"class":650},"Cards",[494,9175,4560],{"class":513},[494,9177,427],{"class":526},[494,9179,4565],{"class":513},[494,9181,9182,9184,9186,9188,9190,9192,9195,9197],{"class":496,"line":2331},[494,9183,8874],{"class":513},[494,9185,4572],{"class":526},[494,9187,4541],{"class":3857},[494,9189,4544],{"class":513},[494,9191,844],{"class":513},[494,9193,9194],{"class":576},"grid grid-cols-2 gap-4",[494,9196,844],{"class":513},[494,9198,4565],{"class":513},[494,9200,9201,9203,9205,9207,9209,9211,9214,9216],{"class":496,"line":2336},[494,9202,8922],{"class":513},[494,9204,4572],{"class":526},[494,9206,4541],{"class":3857},[494,9208,4544],{"class":513},[494,9210,844],{"class":513},[494,9212,9213],{"class":576},"card card-hoverable",[494,9215,844],{"class":513},[494,9217,4565],{"class":513},[494,9219,9220,9223,9225,9227,9229,9231,9233,9235],{"class":496,"line":2342},[494,9221,9222],{"class":513}," \u003C",[494,9224,4572],{"class":526},[494,9226,4541],{"class":3857},[494,9228,4544],{"class":513},[494,9230,844],{"class":513},[494,9232,7741],{"class":576},[494,9234,844],{"class":513},[494,9236,4565],{"class":513},[494,9238,9239,9242,9244,9246,9248,9250,9253,9255,9257,9260,9262,9264],{"class":496,"line":2361},[494,9240,9241],{"class":513}," \u003C",[494,9243,480],{"class":526},[494,9245,4541],{"class":3857},[494,9247,4544],{"class":513},[494,9249,844],{"class":513},[494,9251,9252],{"class":576},"font-semibold text-lg",[494,9254,844],{"class":513},[494,9256,4554],{"class":513},[494,9258,9259],{"class":650},"Card Title",[494,9261,4560],{"class":513},[494,9263,480],{"class":526},[494,9265,4565],{"class":513},[494,9267,9268,9271,9273],{"class":496,"line":2379},[494,9269,9270],{"class":513}," \u003C\u002F",[494,9272,4572],{"class":526},[494,9274,4565],{"class":513},[494,9276,9277,9279,9281,9283,9285,9287,9289,9291],{"class":496,"line":2398},[494,9278,9222],{"class":513},[494,9280,4572],{"class":526},[494,9282,4541],{"class":3857},[494,9284,4544],{"class":513},[494,9286,844],{"class":513},[494,9288,7768],{"class":576},[494,9290,844],{"class":513},[494,9292,4565],{"class":513},[494,9294,9295,9297,9299,9301,9303,9305,9308,9310,9312,9315,9317,9319],{"class":496,"line":2418},[494,9296,9241],{"class":513},[494,9298,432],{"class":526},[494,9300,4541],{"class":3857},[494,9302,4544],{"class":513},[494,9304,844],{"class":513},[494,9306,9307],{"class":576},"text-neutral-600",[494,9309,844],{"class":513},[494,9311,4554],{"class":513},[494,9313,9314],{"class":650},"Card content with reusable component classes.",[494,9316,4560],{"class":513},[494,9318,432],{"class":526},[494,9320,4565],{"class":513},[494,9322,9323,9325,9327],{"class":496,"line":2437},[494,9324,9270],{"class":513},[494,9326,4572],{"class":526},[494,9328,4565],{"class":513},[494,9330,9331,9333,9335,9337,9339,9341,9343,9345],{"class":496,"line":2455},[494,9332,9222],{"class":513},[494,9334,4572],{"class":526},[494,9336,4541],{"class":3857},[494,9338,4544],{"class":513},[494,9340,844],{"class":513},[494,9342,7791],{"class":576},[494,9344,844],{"class":513},[494,9346,4565],{"class":513},[494,9348,9349,9351,9353,9355,9357,9359,9362,9364,9366,9369,9371,9373],{"class":496,"line":2473},[494,9350,9241],{"class":513},[494,9352,8925],{"class":526},[494,9354,4541],{"class":3857},[494,9356,4544],{"class":513},[494,9358,844],{"class":513},[494,9360,9361],{"class":576},"btn btn-ghost btn-sm",[494,9363,844],{"class":513},[494,9365,4554],{"class":513},[494,9367,9368],{"class":650},"Action",[494,9370,4560],{"class":513},[494,9372,8925],{"class":526},[494,9374,4565],{"class":513},[494,9376,9377,9379,9381],{"class":496,"line":2492},[494,9378,9270],{"class":513},[494,9380,4572],{"class":526},[494,9382,4565],{"class":513},[494,9384,9385,9388,9390],{"class":496,"line":2511},[494,9386,9387],{"class":513}," \u003C\u002F",[494,9389,4572],{"class":526},[494,9391,4565],{"class":513},[494,9393,9394],{"class":496,"line":2516},[494,9395,872],{"emptyLinePlaceholder":871},[494,9397,9398,9400,9402,9404,9406,9408,9411,9413],{"class":496,"line":2522},[494,9399,8922],{"class":513},[494,9401,4572],{"class":526},[494,9403,4541],{"class":3857},[494,9405,4544],{"class":513},[494,9407,844],{"class":513},[494,9409,9410],{"class":576},"card card-hoverable p-6",[494,9412,844],{"class":513},[494,9414,4565],{"class":513},[494,9416,9417,9419,9421,9423,9425,9427,9430,9432,9434,9437,9439,9441],{"class":496,"line":2542},[494,9418,9222],{"class":513},[494,9420,480],{"class":526},[494,9422,4541],{"class":3857},[494,9424,4544],{"class":513},[494,9426,844],{"class":513},[494,9428,9429],{"class":576},"font-semibold text-lg mb-2",[494,9431,844],{"class":513},[494,9433,4554],{"class":513},[494,9435,9436],{"class":650},"Simple Card",[494,9438,4560],{"class":513},[494,9440,480],{"class":526},[494,9442,4565],{"class":513},[494,9444,9445,9447,9449,9451,9453,9455,9457,9459,9461,9464,9466,9468],{"class":496,"line":2561},[494,9446,9222],{"class":513},[494,9448,432],{"class":526},[494,9450,4541],{"class":3857},[494,9452,4544],{"class":513},[494,9454,844],{"class":513},[494,9456,9307],{"class":576},[494,9458,844],{"class":513},[494,9460,4554],{"class":513},[494,9462,9463],{"class":650},"Dùng card class + padding utility.",[494,9465,4560],{"class":513},[494,9467,432],{"class":526},[494,9469,4565],{"class":513},[494,9471,9472,9474,9476],{"class":496,"line":2579},[494,9473,9387],{"class":513},[494,9475,4572],{"class":526},[494,9477,4565],{"class":513},[494,9479,9480,9482,9484],{"class":496,"line":2597},[494,9481,9122],{"class":513},[494,9483,4572],{"class":526},[494,9485,4565],{"class":513},[494,9487,9488,9490,9492],{"class":496,"line":2615},[494,9489,9131],{"class":513},[494,9491,8867],{"class":526},[494,9493,4565],{"class":513},[494,9495,9496],{"class":496,"line":2634},[494,9497,872],{"emptyLinePlaceholder":871},[494,9499,9500],{"class":496,"line":2653},[494,9501,9502],{"class":500}," \u003C!-- Inputs -->\n",[494,9504,9505,9507,9509],{"class":496,"line":2672},[494,9506,8864],{"class":513},[494,9508,8867],{"class":526},[494,9510,4565],{"class":513},[494,9512,9513,9515,9517,9519,9521,9523,9525,9527,9529,9532,9534,9536],{"class":496,"line":2691},[494,9514,8874],{"class":513},[494,9516,427],{"class":526},[494,9518,4541],{"class":3857},[494,9520,4544],{"class":513},[494,9522,844],{"class":513},[494,9524,8885],{"class":576},[494,9526,844],{"class":513},[494,9528,4554],{"class":513},[494,9530,9531],{"class":650},"Inputs",[494,9533,4560],{"class":513},[494,9535,427],{"class":526},[494,9537,4565],{"class":513},[494,9539,9540,9542,9544,9546,9548,9550,9553,9555],{"class":496,"line":2709},[494,9541,8874],{"class":513},[494,9543,4572],{"class":526},[494,9545,4541],{"class":3857},[494,9547,4544],{"class":513},[494,9549,844],{"class":513},[494,9551,9552],{"class":576},"space-y-3 max-w-md",[494,9554,844],{"class":513},[494,9556,4565],{"class":513},[494,9558,9559,9561,9563],{"class":496,"line":2727},[494,9560,8922],{"class":513},[494,9562,4572],{"class":526},[494,9564,4565],{"class":513},[494,9566,9567,9569,9572,9574,9576,9578,9581,9583,9585,9588,9590,9592],{"class":496,"line":2732},[494,9568,9222],{"class":513},[494,9570,9571],{"class":526},"label",[494,9573,4541],{"class":3857},[494,9575,4544],{"class":513},[494,9577,844],{"class":513},[494,9579,9580],{"class":576},"block text-sm font-medium mb-1",[494,9582,844],{"class":513},[494,9584,4554],{"class":513},[494,9586,9587],{"class":650},"Email",[494,9589,4560],{"class":513},[494,9591,9571],{"class":526},[494,9593,4565],{"class":513},[494,9595,9596,9598,9600,9603,9605,9607,9610,9612,9614,9616,9618,9620,9622,9625,9627,9629,9632,9634],{"class":496,"line":2738},[494,9597,9222],{"class":513},[494,9599,7827],{"class":526},[494,9601,9602],{"class":3857}," type",[494,9604,4544],{"class":513},[494,9606,844],{"class":513},[494,9608,9609],{"class":576},"email",[494,9611,844],{"class":513},[494,9613,4541],{"class":3857},[494,9615,4544],{"class":513},[494,9617,844],{"class":513},[494,9619,7827],{"class":576},[494,9621,844],{"class":513},[494,9623,9624],{"class":3857}," placeholder",[494,9626,4544],{"class":513},[494,9628,844],{"class":513},[494,9630,9631],{"class":576},"email@example.com",[494,9633,844],{"class":513},[494,9635,4565],{"class":513},[494,9637,9638,9640,9642],{"class":496,"line":2758},[494,9639,9387],{"class":513},[494,9641,4572],{"class":526},[494,9643,4565],{"class":513},[494,9645,9646,9648,9650],{"class":496,"line":2777},[494,9647,8922],{"class":513},[494,9649,4572],{"class":526},[494,9651,4565],{"class":513},[494,9653,9654,9656,9658,9660,9662,9664,9666,9668,9670,9673,9675,9677],{"class":496,"line":2796},[494,9655,9222],{"class":513},[494,9657,9571],{"class":526},[494,9659,4541],{"class":3857},[494,9661,4544],{"class":513},[494,9663,844],{"class":513},[494,9665,9580],{"class":576},[494,9667,844],{"class":513},[494,9669,4554],{"class":513},[494,9671,9672],{"class":650},"Error State",[494,9674,4560],{"class":513},[494,9676,9571],{"class":526},[494,9678,4565],{"class":513},[494,9680,9681,9683,9685,9687,9689,9691,9693,9695,9697,9699,9701,9704,9706,9708,9710,9712,9715,9717,9720,9722,9724,9727,9729],{"class":496,"line":2815},[494,9682,9222],{"class":513},[494,9684,7827],{"class":526},[494,9686,9602],{"class":3857},[494,9688,4544],{"class":513},[494,9690,844],{"class":513},[494,9692,1537],{"class":576},[494,9694,844],{"class":513},[494,9696,4541],{"class":3857},[494,9698,4544],{"class":513},[494,9700,844],{"class":513},[494,9702,9703],{"class":576},"input input-error",[494,9705,844],{"class":513},[494,9707,9624],{"class":3857},[494,9709,4544],{"class":513},[494,9711,844],{"class":513},[494,9713,9714],{"class":576},"Invalid input",[494,9716,844],{"class":513},[494,9718,9719],{"class":3857}," value",[494,9721,4544],{"class":513},[494,9723,844],{"class":513},[494,9725,9726],{"class":576},"bad-value",[494,9728,844],{"class":513},[494,9730,4565],{"class":513},[494,9732,9733,9735,9737,9739,9741,9743,9746,9748,9750,9753,9755,9757],{"class":496,"line":2820},[494,9734,9222],{"class":513},[494,9736,432],{"class":526},[494,9738,4541],{"class":3857},[494,9740,4544],{"class":513},[494,9742,844],{"class":513},[494,9744,9745],{"class":576},"text-red-600 text-xs mt-1",[494,9747,844],{"class":513},[494,9749,4554],{"class":513},[494,9751,9752],{"class":650},"This field has an error.",[494,9754,4560],{"class":513},[494,9756,432],{"class":526},[494,9758,4565],{"class":513},[494,9760,9761,9763,9765],{"class":496,"line":2826},[494,9762,9387],{"class":513},[494,9764,4572],{"class":526},[494,9766,4565],{"class":513},[494,9768,9769,9771,9773],{"class":496,"line":2832},[494,9770,8922],{"class":513},[494,9772,4572],{"class":526},[494,9774,4565],{"class":513},[494,9776,9777,9779,9781,9783,9785,9787,9789,9791,9793,9795,9797,9799],{"class":496,"line":2850},[494,9778,9222],{"class":513},[494,9780,9571],{"class":526},[494,9782,4541],{"class":3857},[494,9784,4544],{"class":513},[494,9786,844],{"class":513},[494,9788,9580],{"class":576},[494,9790,844],{"class":513},[494,9792,4554],{"class":513},[494,9794,9111],{"class":650},[494,9796,4560],{"class":513},[494,9798,9571],{"class":526},[494,9800,4565],{"class":513},[494,9802,9803,9805,9807,9809,9811,9813,9815,9817,9819,9821,9823,9825,9827,9829,9831,9833,9836,9838,9840],{"class":496,"line":2868},[494,9804,9222],{"class":513},[494,9806,7827],{"class":526},[494,9808,9602],{"class":3857},[494,9810,4544],{"class":513},[494,9812,844],{"class":513},[494,9814,1537],{"class":576},[494,9816,844],{"class":513},[494,9818,4541],{"class":3857},[494,9820,4544],{"class":513},[494,9822,844],{"class":513},[494,9824,7827],{"class":576},[494,9826,844],{"class":513},[494,9828,9624],{"class":3857},[494,9830,4544],{"class":513},[494,9832,844],{"class":513},[494,9834,9835],{"class":576},"Cannot edit",[494,9837,844],{"class":513},[494,9839,9106],{"class":3857},[494,9841,4565],{"class":513},[494,9843,9844,9846,9848],{"class":496,"line":2886},[494,9845,9387],{"class":513},[494,9847,4572],{"class":526},[494,9849,4565],{"class":513},[494,9851,9852,9854,9856],{"class":496,"line":2891},[494,9853,9122],{"class":513},[494,9855,4572],{"class":526},[494,9857,4565],{"class":513},[494,9859,9860,9862,9864],{"class":496,"line":2897},[494,9861,9131],{"class":513},[494,9863,8867],{"class":526},[494,9865,4565],{"class":513},[494,9867,9868],{"class":496,"line":2919},[494,9869,872],{"emptyLinePlaceholder":871},[494,9871,9872],{"class":496,"line":2933},[494,9873,9874],{"class":500}," \u003C!-- Badges -->\n",[494,9876,9877,9879,9881],{"class":496,"line":2948},[494,9878,8864],{"class":513},[494,9880,8867],{"class":526},[494,9882,4565],{"class":513},[494,9884,9885,9887,9889,9891,9893,9895,9897,9899,9901,9904,9906,9908],{"class":496,"line":2953},[494,9886,8874],{"class":513},[494,9888,427],{"class":526},[494,9890,4541],{"class":3857},[494,9892,4544],{"class":513},[494,9894,844],{"class":513},[494,9896,8885],{"class":576},[494,9898,844],{"class":513},[494,9900,4554],{"class":513},[494,9902,9903],{"class":650},"Badges",[494,9905,4560],{"class":513},[494,9907,427],{"class":526},[494,9909,4565],{"class":513},[494,9911,9912,9914,9916,9918,9920,9922,9925,9927],{"class":496,"line":2959},[494,9913,8874],{"class":513},[494,9915,4572],{"class":526},[494,9917,4541],{"class":3857},[494,9919,4544],{"class":513},[494,9921,844],{"class":513},[494,9923,9924],{"class":576},"flex flex-wrap gap-2",[494,9926,844],{"class":513},[494,9928,4565],{"class":513},[494,9930,9931,9933,9935,9937,9939,9941,9944,9946,9948,9950,9952,9954],{"class":496,"line":2965},[494,9932,8922],{"class":513},[494,9934,494],{"class":526},[494,9936,4541],{"class":3857},[494,9938,4544],{"class":513},[494,9940,844],{"class":513},[494,9942,9943],{"class":576},"badge badge-primary",[494,9945,844],{"class":513},[494,9947,4554],{"class":513},[494,9949,8941],{"class":650},[494,9951,4560],{"class":513},[494,9953,494],{"class":526},[494,9955,4565],{"class":513},[494,9957,9958,9960,9962,9964,9966,9968,9971,9973,9975,9978,9980,9982],{"class":496,"line":2971},[494,9959,8922],{"class":513},[494,9961,494],{"class":526},[494,9963,4541],{"class":3857},[494,9965,4544],{"class":513},[494,9967,844],{"class":513},[494,9969,9970],{"class":576},"badge badge-success",[494,9972,844],{"class":513},[494,9974,4554],{"class":513},[494,9976,9977],{"class":650},"Success",[494,9979,4560],{"class":513},[494,9981,494],{"class":526},[494,9983,4565],{"class":513},[494,9985,9986,9988,9990,9992,9994,9996,9999,10001,10003,10006,10008,10010],{"class":496,"line":2977},[494,9987,8922],{"class":513},[494,9989,494],{"class":526},[494,9991,4541],{"class":3857},[494,9993,4544],{"class":513},[494,9995,844],{"class":513},[494,9997,9998],{"class":576},"badge badge-warning",[494,10000,844],{"class":513},[494,10002,4554],{"class":513},[494,10004,10005],{"class":650},"Warning",[494,10007,4560],{"class":513},[494,10009,494],{"class":526},[494,10011,4565],{"class":513},[494,10013,10014,10016,10018,10020,10022,10024,10027,10029,10031,10034,10036,10038],{"class":496,"line":2983},[494,10015,8922],{"class":513},[494,10017,494],{"class":526},[494,10019,4541],{"class":3857},[494,10021,4544],{"class":513},[494,10023,844],{"class":513},[494,10025,10026],{"class":576},"badge badge-error",[494,10028,844],{"class":513},[494,10030,4554],{"class":513},[494,10032,10033],{"class":650},"Error",[494,10035,4560],{"class":513},[494,10037,494],{"class":526},[494,10039,4565],{"class":513},[494,10041,10042,10044,10046],{"class":496,"line":2989},[494,10043,9122],{"class":513},[494,10045,4572],{"class":526},[494,10047,4565],{"class":513},[494,10049,10050,10052,10054],{"class":496,"line":2995},[494,10051,9131],{"class":513},[494,10053,8867],{"class":526},[494,10055,4565],{"class":513},[494,10057,10058],{"class":496,"line":3001},[494,10059,872],{"emptyLinePlaceholder":871},[494,10061,10062,10065,10067],{"class":496,"line":3007},[494,10063,10064],{"class":513}," \u003C\u002F",[494,10066,4572],{"class":526},[494,10068,4565],{"class":513},[494,10070,10071],{"class":496,"line":3013},[494,10072,872],{"emptyLinePlaceholder":871},[494,10074,10075,10077,10079],{"class":496,"line":3019},[494,10076,4560],{"class":513},[494,10078,8814],{"class":526},[494,10080,4565],{"class":513},[494,10082,10083,10085,10087],{"class":496,"line":3025},[494,10084,4560],{"class":513},[494,10086,4523],{"class":526},[494,10088,4565],{"class":513},[432,10090,10091],{},[436,10092,3928],{},[1883,10094,10095,10105,10111,10121],{},[1886,10096,10097,10100,10101,10104],{},[441,10098,10099],{},"@apply"," không được dùng trong v4 — thay vào đó dùng CSS variable ",[441,10102,10103],{},"var(--color-primary)"," để tham chiếu token.",[1886,10106,10107,10110],{},[441,10108,10109],{},"color-mix(in oklch, ...)"," cho badge backgrounds — pha màu với transparency thay vì opacity.",[1886,10112,10113,10116,10117,10120],{},[441,10114,10115],{},":focus-visible"," thay vì ",[441,10118,10119],{},":focus"," — chỉ hiện focus ring khi keyboard navigation.",[1886,10122,10123,10124,6754,10127,6754,10130,10132],{},"Các pseudo-class (",[441,10125,10126],{},":hover",[441,10128,10129],{},":disabled",[441,10131,10119],{},") định nghĩa trong component class, không cần variant.",[4411,10134],{},[427,10136,10138],{"id":10137},"_5-preflight-css-reset","5. Preflight (CSS Reset)",[432,10140,10141,10142,10145,10146,922],{},"Tailwind CSS bao gồm ",[436,10143,10144],{},"Preflight"," — một CSS reset hiện đại dựa trên ",[10147,10148,10152],"a",{"href":10149,"rel":10150},"https:\u002F\u002Fgithub.com\u002Fsindresorhus\u002Fmodern-normalize",[10151],"nofollow","modern-normalize",[480,10154,10156],{"id":10155},"_51-những-gì-preflight-reset","5.1. Những gì Preflight Reset",[1323,10158,10159,10169],{},[1326,10160,10161],{},[1329,10162,10163,10166],{},[1332,10164,10165],{},"Reset",[1332,10167,10168],{},"Mô tả",[1342,10170,10171,10184,10197,10207,10217,10227,10237],{},[1329,10172,10173,10178],{},[1347,10174,10175],{},[436,10176,10177],{},"Box-sizing",[1347,10179,10180,10183],{},[441,10181,10182],{},"box-sizing: border-box"," cho tất cả elements",[1329,10185,10186,10191],{},[1347,10187,10188],{},[436,10189,10190],{},"Margin",[1347,10192,10193,10194],{},"Tất cả elements có ",[441,10195,10196],{},"margin: 0",[1329,10198,10199,10204],{},[1347,10200,10201],{},[436,10202,10203],{},"Heading",[1347,10205,10206],{},"Headings không có font-size, font-weight mặc định",[1329,10208,10209,10214],{},[1347,10210,10211],{},[436,10212,10213],{},"List",[1347,10215,10216],{},"Lists không có padding, margin, list-style",[1329,10218,10219,10224],{},[1347,10220,10221],{},[436,10222,10223],{},"Image",[1347,10225,10226],{},"Images là block-level, max-width 100%",[1329,10228,10229,10234],{},[1347,10230,10231],{},[436,10232,10233],{},"Button",[1347,10235,10236],{},"Buttons có cursor pointer mặc định",[1329,10238,10239,10244],{},[1347,10240,10241],{},[436,10242,10243],{},"Border",[1347,10245,10246,10249,10250],{},[441,10247,10248],{},"border-style: solid"," mặc định, border-color = ",[441,10251,10252],{},"currentColor",[480,10254,10256],{"id":10255},"_52-customize-preflight","5.2. Customize Preflight",[485,10258,10260],{"className":815,"code":10259,"language":817,"meta":490,"style":490},"@import \"tailwindcss\";\n\n\u002F* Cách 1: Thêm style vào base layer (không xóa preflight) *\u002F\n@layer base {\n h1 { font-size: 2rem; }\n h2 { font-size: 1.5rem; }\n h3 { font-size: 1.25rem; }\n a { text-decoration: underline; }\n}\n\n\u002F* Cách 2: Override specific reset *\u002F\n@layer base {\n ul, ol {\n list-style: revert; \u002F* Khôi phục bullet points *\u002F\n padding: revert;\n }\n}\n\n\u002F* Cách 3: Disable preflight hoàn toàn *\u002F\n\u002F* Thêm vào @theme (CSS-first) hoặc dùng flag *\u002F\n\u002F* Lưu ý: disable preflight không được khuyến nghị *\u002F\n",[441,10261,10262,10274,10278,10283,10291,10307,10323,10340,10358,10362,10366,10371,10379,10389,10403,10413,10417,10421,10425,10430,10435],{"__ignoreMap":490},[494,10263,10264,10266,10268,10270,10272],{"class":496,"line":497},[494,10265,835],{"class":834},[494,10267,838],{"class":513},[494,10269,841],{"class":576},[494,10271,844],{"class":513},[494,10273,847],{"class":513},[494,10275,10276],{"class":496,"line":504},[494,10277,872],{"emptyLinePlaceholder":871},[494,10279,10280],{"class":496,"line":510},[494,10281,10282],{"class":500},"\u002F* Cách 1: Thêm style vào base layer (không xóa preflight) *\u002F\n",[494,10284,10285,10287,10289],{"class":496,"line":523},[494,10286,3709],{"class":834},[494,10288,3712],{"class":650},[494,10290,3715],{"class":513},[494,10292,10293,10295,10297,10299,10301,10303,10305],{"class":496,"line":535},[494,10294,5506],{"class":925},[494,10296,3412],{"class":513},[494,10298,5511],{"class":1266},[494,10300,530],{"class":513},[494,10302,5516],{"class":3420},[494,10304,3423],{"class":513},[494,10306,3426],{"class":513},[494,10308,10309,10311,10313,10315,10317,10319,10321],{"class":496,"line":545},[494,10310,5525],{"class":925},[494,10312,3412],{"class":513},[494,10314,5511],{"class":1266},[494,10316,530],{"class":513},[494,10318,5534],{"class":3420},[494,10320,3423],{"class":513},[494,10322,3426],{"class":513},[494,10324,10325,10328,10330,10332,10334,10336,10338],{"class":496,"line":555},[494,10326,10327],{"class":925}," h3",[494,10329,3412],{"class":513},[494,10331,5511],{"class":1266},[494,10333,530],{"class":513},[494,10335,5742],{"class":3420},[494,10337,3423],{"class":513},[494,10339,3426],{"class":513},[494,10341,10342,10344,10346,10349,10351,10354,10356],{"class":496,"line":565},[494,10343,5543],{"class":925},[494,10345,3412],{"class":513},[494,10347,10348],{"class":1266}," text-decoration",[494,10350,530],{"class":513},[494,10352,10353],{"class":650}," underline",[494,10355,3423],{"class":513},[494,10357,3426],{"class":513},[494,10359,10360],{"class":496,"line":586},[494,10361,812],{"class":513},[494,10363,10364],{"class":496,"line":603},[494,10365,872],{"emptyLinePlaceholder":871},[494,10367,10368],{"class":496,"line":620},[494,10369,10370],{"class":500},"\u002F* Cách 2: Override specific reset *\u002F\n",[494,10372,10373,10375,10377],{"class":496,"line":626},[494,10374,3709],{"class":834},[494,10376,3712],{"class":650},[494,10378,3715],{"class":513},[494,10380,10381,10383,10385,10387],{"class":496,"line":632},[494,10382,6691],{"class":925},[494,10384,661],{"class":513},[494,10386,6696],{"class":925},[494,10388,520],{"class":513},[494,10390,10391,10393,10395,10398,10400],{"class":496,"line":642},[494,10392,6703],{"class":1266},[494,10394,530],{"class":513},[494,10396,10397],{"class":650}," revert",[494,10399,3423],{"class":513},[494,10401,10402],{"class":500}," \u002F* Khôi phục bullet points *\u002F\n",[494,10404,10405,10407,10409,10411],{"class":496,"line":676},[494,10406,5625],{"class":1266},[494,10408,530],{"class":513},[494,10410,10397],{"class":650},[494,10412,847],{"class":513},[494,10414,10415],{"class":496,"line":681},[494,10416,3768],{"class":513},[494,10418,10419],{"class":496,"line":691},[494,10420,812],{"class":513},[494,10422,10423],{"class":496,"line":713},[494,10424,872],{"emptyLinePlaceholder":871},[494,10426,10427],{"class":496,"line":734},[494,10428,10429],{"class":500},"\u002F* Cách 3: Disable preflight hoàn toàn *\u002F\n",[494,10431,10432],{"class":496,"line":740},[494,10433,10434],{"class":500},"\u002F* Thêm vào @theme (CSS-first) hoặc dùng flag *\u002F\n",[494,10436,10437],{"class":496,"line":746},[494,10438,10439],{"class":500},"\u002F* Lưu ý: disable preflight không được khuyến nghị *\u002F\n",[4411,10441],{},[427,10443,10445],{"id":10444},"_6-design-system-workshop","6. Design System Workshop",[446,10447,452,10448,10451],{"color":448,"icon":449},[436,10449,10450],{},"Đây là phần quan trọng nhất của chương này."," Xây dựng design system là kỹ năng senior-level. Bạn sẽ tạo một mini design system hoàn chỉnh — từ colors, typography, spacing đến component tokens.",[480,10453,10455],{"id":10454},"_61-bài-tập-9-define-colors-primary-secondary-neutral-success-warning-error","6.1. BÀI TẬP 9 — Define Colors (Primary, Secondary, Neutral, Success, Warning, Error)",[485,10457,10459],{"className":815,"code":10458,"language":817,"meta":490,"style":490},"@theme {\n \u002F* === PRIMARY (Blue) === *\u002F\n --color-primary-50: oklch(0.97 0.02 255);\n --color-primary-100: oklch(0.92 0.04 255);\n --color-primary-200: oklch(0.84 0.07 255);\n --color-primary-300: oklch(0.74 0.12 255);\n --color-primary-400: oklch(0.64 0.16 255);\n --color-primary-500: oklch(0.54 0.20 255);\n --color-primary-600: oklch(0.46 0.18 255);\n --color-primary-700: oklch(0.37 0.15 255);\n --color-primary-800: oklch(0.28 0.11 255);\n --color-primary-900: oklch(0.20 0.07 255);\n\n \u002F* === SECONDARY (Violet) === *\u002F\n --color-secondary-50: oklch(0.97 0.02 290);\n --color-secondary-100: oklch(0.92 0.04 290);\n --color-secondary-200: oklch(0.84 0.07 290);\n --color-secondary-300: oklch(0.74 0.12 290);\n --color-secondary-400: oklch(0.64 0.17 290);\n --color-secondary-500: oklch(0.54 0.20 290);\n --color-secondary-600: oklch(0.46 0.18 290);\n --color-secondary-700: oklch(0.37 0.15 290);\n --color-secondary-800: oklch(0.28 0.11 290);\n --color-secondary-900: oklch(0.20 0.07 290);\n\n \u002F* === NEUTRAL (Gray) === *\u002F\n --color-neutral-0: oklch(1.00 0 0);\n --color-neutral-50: oklch(0.98 0.01 260);\n --color-neutral-100: oklch(0.95 0.01 260);\n --color-neutral-200: oklch(0.88 0.01 260);\n --color-neutral-300: oklch(0.78 0.01 260);\n --color-neutral-400: oklch(0.64 0.01 260);\n --color-neutral-500: oklch(0.52 0.01 260);\n --color-neutral-600: oklch(0.42 0.01 260);\n --color-neutral-700: oklch(0.33 0.01 260);\n --color-neutral-800: oklch(0.23 0.01 260);\n --color-neutral-900: oklch(0.15 0.01 260);\n --color-neutral-950: oklch(0.10 0.01 260);\n\n \u002F* === SEMANTIC === *\u002F\n --color-success-50: oklch(0.97 0.02 150);\n --color-success-100: oklch(0.92 0.04 150);\n --color-success-500: oklch(0.60 0.19 150);\n --color-success-600: oklch(0.52 0.18 150);\n --color-success-700: oklch(0.44 0.16 150);\n\n --color-warning-50: oklch(0.97 0.02 85);\n --color-warning-100: oklch(0.93 0.04 85);\n --color-warning-500: oklch(0.70 0.17 85);\n --color-warning-600: oklch(0.60 0.15 85);\n --color-warning-700: oklch(0.50 0.13 75);\n\n --color-error-50: oklch(0.97 0.02 20);\n --color-error-100: oklch(0.93 0.04 20);\n --color-error-500: oklch(0.55 0.22 20);\n --color-error-600: oklch(0.48 0.21 20);\n --color-error-700: oklch(0.40 0.18 20);\n\n --color-info-50: oklch(0.97 0.02 240);\n --color-info-100: oklch(0.92 0.04 240);\n --color-info-500: oklch(0.60 0.16 240);\n --color-info-600: oklch(0.52 0.14 240);\n --color-info-700: oklch(0.44 0.12 240);\n}\n",[441,10460,10461,10467,10472,10488,10504,10520,10536,10552,10568,10584,10600,10616,10632,10636,10641,10658,10674,10690,10706,10722,10738,10754,10770,10786,10802,10806,10811,10823,10839,10855,10871,10887,10903,10919,10935,10951,10967,10983,10999,11003,11008,11025,11042,11059,11076,11093,11097,11114,11131,11148,11165,11184,11188,11205,11222,11239,11256,11273,11277,11294,11311,11328,11345,11362],{"__ignoreMap":490},[494,10462,10463,10465],{"class":496,"line":497},[494,10464,877],{"class":834},[494,10466,520],{"class":513},[494,10468,10469],{"class":496,"line":504},[494,10470,10471],{"class":500}," \u002F* === PRIMARY (Blue) === *\u002F\n",[494,10473,10474,10476,10478,10480,10482,10484,10486],{"class":496,"line":510},[494,10475,1957],{"class":650},[494,10477,922],{"class":513},[494,10479,926],{"class":925},[494,10481,929],{"class":650},[494,10483,922],{"class":513},[494,10485,1690],{"class":925},[494,10487,1575],{"class":650},[494,10489,10490,10492,10494,10496,10498,10500,10502],{"class":496,"line":523},[494,10491,1974],{"class":650},[494,10493,922],{"class":513},[494,10495,1702],{"class":925},[494,10497,929],{"class":650},[494,10499,922],{"class":513},[494,10501,1709],{"class":925},[494,10503,1575],{"class":650},[494,10505,10506,10508,10510,10512,10514,10516,10518],{"class":496,"line":535},[494,10507,1991],{"class":650},[494,10509,922],{"class":513},[494,10511,1996],{"class":925},[494,10513,929],{"class":650},[494,10515,922],{"class":513},[494,10517,1726],{"class":925},[494,10519,1575],{"class":650},[494,10521,10522,10524,10526,10528,10530,10532,10534],{"class":496,"line":545},[494,10523,2009],{"class":650},[494,10525,922],{"class":513},[494,10527,2014],{"class":925},[494,10529,929],{"class":650},[494,10531,922],{"class":513},[494,10533,1085],{"class":925},[494,10535,1575],{"class":650},[494,10537,10538,10540,10542,10544,10546,10548,10550],{"class":496,"line":555},[494,10539,2027],{"class":650},[494,10541,922],{"class":513},[494,10543,2032],{"class":925},[494,10545,929],{"class":650},[494,10547,922],{"class":513},[494,10549,1761],{"class":925},[494,10551,1575],{"class":650},[494,10553,10554,10556,10558,10560,10562,10564,10566],{"class":496,"line":565},[494,10555,2045],{"class":650},[494,10557,922],{"class":513},[494,10559,2050],{"class":925},[494,10561,929],{"class":650},[494,10563,922],{"class":513},[494,10565,1030],{"class":925},[494,10567,1575],{"class":650},[494,10569,10570,10572,10574,10576,10578,10580,10582],{"class":496,"line":586},[494,10571,2063],{"class":650},[494,10573,922],{"class":513},[494,10575,1792],{"class":925},[494,10577,929],{"class":650},[494,10579,922],{"class":513},[494,10581,697],{"class":925},[494,10583,1575],{"class":650},[494,10585,10586,10588,10590,10592,10594,10596,10598],{"class":496,"line":603},[494,10587,2080],{"class":650},[494,10589,922],{"class":513},[494,10591,2085],{"class":925},[494,10593,929],{"class":650},[494,10595,922],{"class":513},[494,10597,1011],{"class":925},[494,10599,1575],{"class":650},[494,10601,10602,10604,10606,10608,10610,10612,10614],{"class":496,"line":620},[494,10603,2098],{"class":650},[494,10605,922],{"class":513},[494,10607,1826],{"class":925},[494,10609,929],{"class":650},[494,10611,922],{"class":513},[494,10613,1743],{"class":925},[494,10615,1575],{"class":650},[494,10617,10618,10620,10622,10624,10626,10628,10630],{"class":496,"line":626},[494,10619,2115],{"class":650},[494,10621,922],{"class":513},[494,10623,1030],{"class":925},[494,10625,929],{"class":650},[494,10627,922],{"class":513},[494,10629,1726],{"class":925},[494,10631,1575],{"class":650},[494,10633,10634],{"class":496,"line":632},[494,10635,872],{"emptyLinePlaceholder":871},[494,10637,10638],{"class":496,"line":642},[494,10639,10640],{"class":500}," \u002F* === SECONDARY (Violet) === *\u002F\n",[494,10642,10643,10645,10647,10649,10651,10653,10655],{"class":496,"line":676},[494,10644,2158],{"class":650},[494,10646,922],{"class":513},[494,10648,926],{"class":925},[494,10650,929],{"class":650},[494,10652,922],{"class":513},[494,10654,1690],{"class":925},[494,10656,10657],{"class":650}," 290);\n",[494,10659,10660,10662,10664,10666,10668,10670,10672],{"class":496,"line":681},[494,10661,2176],{"class":650},[494,10663,922],{"class":513},[494,10665,1702],{"class":925},[494,10667,929],{"class":650},[494,10669,922],{"class":513},[494,10671,1709],{"class":925},[494,10673,10657],{"class":650},[494,10675,10676,10678,10680,10682,10684,10686,10688],{"class":496,"line":691},[494,10677,2193],{"class":650},[494,10679,922],{"class":513},[494,10681,1996],{"class":925},[494,10683,929],{"class":650},[494,10685,922],{"class":513},[494,10687,1726],{"class":925},[494,10689,10657],{"class":650},[494,10691,10692,10694,10696,10698,10700,10702,10704],{"class":496,"line":713},[494,10693,2210],{"class":650},[494,10695,922],{"class":513},[494,10697,2014],{"class":925},[494,10699,929],{"class":650},[494,10701,922],{"class":513},[494,10703,1085],{"class":925},[494,10705,10657],{"class":650},[494,10707,10708,10710,10712,10714,10716,10718,10720],{"class":496,"line":734},[494,10709,2227],{"class":650},[494,10711,922],{"class":513},[494,10713,2032],{"class":925},[494,10715,929],{"class":650},[494,10717,922],{"class":513},[494,10719,2238],{"class":925},[494,10721,10657],{"class":650},[494,10723,10724,10726,10728,10730,10732,10734,10736],{"class":496,"line":740},[494,10725,2245],{"class":650},[494,10727,922],{"class":513},[494,10729,2050],{"class":925},[494,10731,929],{"class":650},[494,10733,922],{"class":513},[494,10735,1030],{"class":925},[494,10737,10657],{"class":650},[494,10739,10740,10742,10744,10746,10748,10750,10752],{"class":496,"line":746},[494,10741,2263],{"class":650},[494,10743,922],{"class":513},[494,10745,1792],{"class":925},[494,10747,929],{"class":650},[494,10749,922],{"class":513},[494,10751,697],{"class":925},[494,10753,10657],{"class":650},[494,10755,10756,10758,10760,10762,10764,10766,10768],{"class":496,"line":752},[494,10757,2281],{"class":650},[494,10759,922],{"class":513},[494,10761,2085],{"class":925},[494,10763,929],{"class":650},[494,10765,922],{"class":513},[494,10767,1011],{"class":925},[494,10769,10657],{"class":650},[494,10771,10772,10774,10776,10778,10780,10782,10784],{"class":496,"line":763},[494,10773,2298],{"class":650},[494,10775,922],{"class":513},[494,10777,1826],{"class":925},[494,10779,929],{"class":650},[494,10781,922],{"class":513},[494,10783,1743],{"class":925},[494,10785,10657],{"class":650},[494,10787,10788,10790,10792,10794,10796,10798,10800],{"class":496,"line":785},[494,10789,2316],{"class":650},[494,10791,922],{"class":513},[494,10793,1030],{"class":925},[494,10795,929],{"class":650},[494,10797,922],{"class":513},[494,10799,1726],{"class":925},[494,10801,10657],{"class":650},[494,10803,10804],{"class":496,"line":803},[494,10805,872],{"emptyLinePlaceholder":871},[494,10807,10808],{"class":496,"line":809},[494,10809,10810],{"class":500}," \u002F* === NEUTRAL (Gray) === *\u002F\n",[494,10812,10813,10816,10818,10820],{"class":496,"line":1157},[494,10814,10815],{"class":650}," --color-neutral-0: oklch(1",[494,10817,922],{"class":513},[494,10819,2537],{"class":925},[494,10821,10822],{"class":650}," 0 0);\n",[494,10824,10825,10827,10829,10831,10833,10835,10837],{"class":496,"line":1163},[494,10826,2525],{"class":650},[494,10828,922],{"class":513},[494,10830,2530],{"class":925},[494,10832,929],{"class":650},[494,10834,922],{"class":513},[494,10836,934],{"class":925},[494,10838,1693],{"class":650},[494,10840,10841,10843,10845,10847,10849,10851,10853],{"class":496,"line":1169},[494,10842,2545],{"class":650},[494,10844,922],{"class":513},[494,10846,2550],{"class":925},[494,10848,929],{"class":650},[494,10850,922],{"class":513},[494,10852,934],{"class":925},[494,10854,1693],{"class":650},[494,10856,10857,10859,10861,10863,10865,10867,10869],{"class":496,"line":2313},[494,10858,2564],{"class":650},[494,10860,922],{"class":513},[494,10862,718],{"class":925},[494,10864,929],{"class":650},[494,10866,922],{"class":513},[494,10868,934],{"class":925},[494,10870,1693],{"class":650},[494,10872,10873,10875,10877,10879,10881,10883,10885],{"class":496,"line":2331},[494,10874,2582],{"class":650},[494,10876,922],{"class":513},[494,10878,2406],{"class":925},[494,10880,929],{"class":650},[494,10882,922],{"class":513},[494,10884,934],{"class":925},[494,10886,1693],{"class":650},[494,10888,10889,10891,10893,10895,10897,10899,10901],{"class":496,"line":2336},[494,10890,2600],{"class":650},[494,10892,922],{"class":513},[494,10894,2032],{"class":925},[494,10896,929],{"class":650},[494,10898,922],{"class":513},[494,10900,934],{"class":925},[494,10902,1693],{"class":650},[494,10904,10905,10907,10909,10911,10913,10915,10917],{"class":496,"line":2342},[494,10906,2618],{"class":650},[494,10908,922],{"class":513},[494,10910,2623],{"class":925},[494,10912,929],{"class":650},[494,10914,922],{"class":513},[494,10916,934],{"class":925},[494,10918,1693],{"class":650},[494,10920,10921,10923,10925,10927,10929,10931,10933],{"class":496,"line":2361},[494,10922,2637],{"class":650},[494,10924,922],{"class":513},[494,10926,2642],{"class":925},[494,10928,929],{"class":650},[494,10930,922],{"class":513},[494,10932,934],{"class":925},[494,10934,1693],{"class":650},[494,10936,10937,10939,10941,10943,10945,10947,10949],{"class":496,"line":2379},[494,10938,2656],{"class":650},[494,10940,922],{"class":513},[494,10942,2661],{"class":925},[494,10944,929],{"class":650},[494,10946,922],{"class":513},[494,10948,934],{"class":925},[494,10950,1693],{"class":650},[494,10952,10953,10955,10957,10959,10961,10963,10965],{"class":496,"line":2398},[494,10954,2675],{"class":650},[494,10956,922],{"class":513},[494,10958,2680],{"class":925},[494,10960,929],{"class":650},[494,10962,922],{"class":513},[494,10964,934],{"class":925},[494,10966,1693],{"class":650},[494,10968,10969,10971,10973,10975,10977,10979,10981],{"class":496,"line":2418},[494,10970,2694],{"class":650},[494,10972,922],{"class":513},[494,10974,1011],{"class":925},[494,10976,929],{"class":650},[494,10978,922],{"class":513},[494,10980,934],{"class":925},[494,10982,1693],{"class":650},[494,10984,10985,10987,10989,10991,10993,10995,10997],{"class":496,"line":2437},[494,10986,2712],{"class":650},[494,10988,922],{"class":513},[494,10990,992],{"class":925},[494,10992,929],{"class":650},[494,10994,922],{"class":513},[494,10996,934],{"class":925},[494,10998,1693],{"class":650},[494,11000,11001],{"class":496,"line":2455},[494,11002,872],{"emptyLinePlaceholder":871},[494,11004,11005],{"class":496,"line":2473},[494,11006,11007],{"class":500}," \u002F* === SEMANTIC === *\u002F\n",[494,11009,11010,11013,11015,11017,11019,11021,11023],{"class":496,"line":2492},[494,11011,11012],{"class":650}," --color-success-50: oklch(0",[494,11014,922],{"class":513},[494,11016,926],{"class":925},[494,11018,929],{"class":650},[494,11020,922],{"class":513},[494,11022,1690],{"class":925},[494,11024,2755],{"class":650},[494,11026,11027,11030,11032,11034,11036,11038,11040],{"class":496,"line":2511},[494,11028,11029],{"class":650}," --color-success-100: oklch(0",[494,11031,922],{"class":513},[494,11033,1702],{"class":925},[494,11035,929],{"class":650},[494,11037,922],{"class":513},[494,11039,1709],{"class":925},[494,11041,2755],{"class":650},[494,11043,11044,11047,11049,11051,11053,11055,11057],{"class":496,"line":2516},[494,11045,11046],{"class":650}," --color-success-500: oklch(0",[494,11048,922],{"class":513},[494,11050,2746],{"class":925},[494,11052,929],{"class":650},[494,11054,922],{"class":513},[494,11056,1572],{"class":925},[494,11058,2755],{"class":650},[494,11060,11061,11064,11066,11068,11070,11072,11074],{"class":496,"line":2522},[494,11062,11063],{"class":650}," --color-success-600: oklch(0",[494,11065,922],{"class":513},[494,11067,2623],{"class":925},[494,11069,929],{"class":650},[494,11071,922],{"class":513},[494,11073,697],{"class":925},[494,11075,2755],{"class":650},[494,11077,11078,11081,11083,11085,11087,11089,11091],{"class":496,"line":2542},[494,11079,11080],{"class":650}," --color-success-700: oklch(0",[494,11082,922],{"class":513},[494,11084,2481],{"class":925},[494,11086,929],{"class":650},[494,11088,922],{"class":513},[494,11090,1761],{"class":925},[494,11092,2755],{"class":650},[494,11094,11095],{"class":496,"line":2561},[494,11096,872],{"emptyLinePlaceholder":871},[494,11098,11099,11102,11104,11106,11108,11110,11112],{"class":496,"line":2579},[494,11100,11101],{"class":650}," --color-warning-50: oklch(0",[494,11103,922],{"class":513},[494,11105,926],{"class":925},[494,11107,929],{"class":650},[494,11109,922],{"class":513},[494,11111,1690],{"class":925},[494,11113,2774],{"class":650},[494,11115,11116,11119,11121,11123,11125,11127,11129],{"class":496,"line":2597},[494,11117,11118],{"class":650}," --color-warning-100: oklch(0",[494,11120,922],{"class":513},[494,11122,947],{"class":925},[494,11124,929],{"class":650},[494,11126,922],{"class":513},[494,11128,1709],{"class":925},[494,11130,2774],{"class":650},[494,11132,11133,11136,11138,11140,11142,11144,11146],{"class":496,"line":2615},[494,11134,11135],{"class":650}," --color-warning-500: oklch(0",[494,11137,922],{"class":513},[494,11139,2426],{"class":925},[494,11141,929],{"class":650},[494,11143,922],{"class":513},[494,11145,2238],{"class":925},[494,11147,2774],{"class":650},[494,11149,11150,11153,11155,11157,11159,11161,11163],{"class":496,"line":2634},[494,11151,11152],{"class":650}," --color-warning-600: oklch(0",[494,11154,922],{"class":513},[494,11156,2746],{"class":925},[494,11158,929],{"class":650},[494,11160,922],{"class":513},[494,11162,1011],{"class":925},[494,11164,2774],{"class":650},[494,11166,11167,11170,11172,11175,11177,11179,11181],{"class":496,"line":2653},[494,11168,11169],{"class":650}," --color-warning-700: oklch(0",[494,11171,922],{"class":513},[494,11173,11174],{"class":925},"50",[494,11176,929],{"class":650},[494,11178,922],{"class":513},[494,11180,2413],{"class":925},[494,11182,11183],{"class":650}," 75);\n",[494,11185,11186],{"class":496,"line":2672},[494,11187,872],{"emptyLinePlaceholder":871},[494,11189,11190,11193,11195,11197,11199,11201,11203],{"class":496,"line":2691},[494,11191,11192],{"class":650}," --color-error-50: oklch(0",[494,11194,922],{"class":513},[494,11196,926],{"class":925},[494,11198,929],{"class":650},[494,11200,922],{"class":513},[494,11202,1690],{"class":925},[494,11204,2793],{"class":650},[494,11206,11207,11210,11212,11214,11216,11218,11220],{"class":496,"line":2709},[494,11208,11209],{"class":650}," --color-error-100: oklch(0",[494,11211,922],{"class":513},[494,11213,947],{"class":925},[494,11215,929],{"class":650},[494,11217,922],{"class":513},[494,11219,1709],{"class":925},[494,11221,2793],{"class":650},[494,11223,11224,11227,11229,11231,11233,11235,11237],{"class":496,"line":2727},[494,11225,11226],{"class":650}," --color-error-500: oklch(0",[494,11228,922],{"class":513},[494,11230,1023],{"class":925},[494,11232,929],{"class":650},[494,11234,922],{"class":513},[494,11236,1097],{"class":925},[494,11238,2793],{"class":650},[494,11240,11241,11244,11246,11248,11250,11252,11254],{"class":496,"line":2732},[494,11242,11243],{"class":650}," --color-error-600: oklch(0",[494,11245,922],{"class":513},[494,11247,1042],{"class":925},[494,11249,929],{"class":650},[494,11251,922],{"class":513},[494,11253,1592],{"class":925},[494,11255,2793],{"class":650},[494,11257,11258,11261,11263,11265,11267,11269,11271],{"class":496,"line":2738},[494,11259,11260],{"class":650}," --color-error-700: oklch(0",[494,11262,922],{"class":513},[494,11264,1060],{"class":925},[494,11266,929],{"class":650},[494,11268,922],{"class":513},[494,11270,697],{"class":925},[494,11272,2793],{"class":650},[494,11274,11275],{"class":496,"line":2758},[494,11276,872],{"emptyLinePlaceholder":871},[494,11278,11279,11282,11284,11286,11288,11290,11292],{"class":496,"line":2777},[494,11280,11281],{"class":650}," --color-info-50: oklch(0",[494,11283,922],{"class":513},[494,11285,926],{"class":925},[494,11287,929],{"class":650},[494,11289,922],{"class":513},[494,11291,1690],{"class":925},[494,11293,2812],{"class":650},[494,11295,11296,11299,11301,11303,11305,11307,11309],{"class":496,"line":2796},[494,11297,11298],{"class":650}," --color-info-100: oklch(0",[494,11300,922],{"class":513},[494,11302,1702],{"class":925},[494,11304,929],{"class":650},[494,11306,922],{"class":513},[494,11308,1709],{"class":925},[494,11310,2812],{"class":650},[494,11312,11313,11316,11318,11320,11322,11324,11326],{"class":496,"line":2815},[494,11314,11315],{"class":650}," --color-info-500: oklch(0",[494,11317,922],{"class":513},[494,11319,2746],{"class":925},[494,11321,929],{"class":650},[494,11323,922],{"class":513},[494,11325,1761],{"class":925},[494,11327,2812],{"class":650},[494,11329,11330,11333,11335,11337,11339,11341,11343],{"class":496,"line":2820},[494,11331,11332],{"class":650}," --color-info-600: oklch(0",[494,11334,922],{"class":513},[494,11336,2623],{"class":925},[494,11338,929],{"class":650},[494,11340,922],{"class":513},[494,11342,1859],{"class":925},[494,11344,2812],{"class":650},[494,11346,11347,11350,11352,11354,11356,11358,11360],{"class":496,"line":2826},[494,11348,11349],{"class":650}," --color-info-700: oklch(0",[494,11351,922],{"class":513},[494,11353,2481],{"class":925},[494,11355,929],{"class":650},[494,11357,922],{"class":513},[494,11359,1085],{"class":925},[494,11361,2812],{"class":650},[494,11363,11364],{"class":496,"line":2832},[494,11365,812],{"class":513},[480,11367,11369],{"id":11368},"_62-bài-tập-10-define-typography-system","6.2. BÀI TẬP 10 — Define Typography System",[485,11371,11373],{"className":815,"code":11372,"language":817,"meta":490,"style":490},"@theme {\n \u002F* Font families *\u002F\n --font-sans: \"Inter\", system-ui, -apple-system, sans-serif;\n --font-serif: \"Merriweather\", \"Georgia\", serif;\n --font-mono: \"JetBrains Mono\", \"Fira Code\", monospace;\n\n \u002F* Font sizes — modular scale 1.25 (major third) *\u002F\n --text-xs: 0.75rem; \u002F* 12px *\u002F\n --text-sm: 0.875rem; \u002F* 14px *\u002F\n --text-base: 1rem; \u002F* 16px *\u002F\n --text-lg: 1.125rem; \u002F* 18px *\u002F\n --text-xl: 1.25rem; \u002F* 20px *\u002F\n --text-2xl: 1.5rem; \u002F* 24px *\u002F\n --text-3xl: 1.875rem; \u002F* 30px *\u002F\n --text-4xl: 2.25rem; \u002F* 36px *\u002F\n --text-5xl: 3rem; \u002F* 48px *\u002F\n --text-6xl: 3.75rem; \u002F* 60px *\u002F\n --text-7xl: 4.5rem; \u002F* 72px *\u002F\n\n \u002F* Font weights *\u002F\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n\n \u002F* Line heights *\u002F\n --leading-none: 1;\n --leading-tight: 1.25;\n --leading-snug: 1.375;\n --leading-normal: 1.5;\n --leading-relaxed: 1.625;\n --leading-loose: 2;\n\n \u002F* Letter spacing *\u002F\n --tracking-tighter: -0.05em;\n --tracking-tight: -0.025em;\n --tracking-normal: 0;\n --tracking-wide: 0.025em;\n --tracking-wider: 0.05em;\n\n \u002F* Custom text sizes with built-in line-height *\u002F\n --text-display: 5rem;\n --text-display--line-height: 1.1;\n --text-display--font-weight: 800;\n\n --text-headline: 3rem;\n --text-headline--line-height: 1.2;\n --text-headline--font-weight: 700;\n\n --text-subheadline: 1.5rem;\n --text-subheadline--line-height: 1.3;\n --text-subheadline--font-weight: 500;\n}\n",[441,11374,11375,11381,11386,11404,11419,11431,11435,11440,11448,11456,11464,11472,11480,11488,11496,11504,11512,11520,11528,11532,11537,11542,11547,11552,11557,11562,11566,11571,11576,11581,11586,11591,11596,11601,11605,11610,11615,11620,11625,11630,11635,11639,11644,11649,11653,11657,11661,11666,11671,11676,11680,11685,11690,11695],{"__ignoreMap":490},[494,11376,11377,11379],{"class":496,"line":497},[494,11378,877],{"class":834},[494,11380,520],{"class":513},[494,11382,11383],{"class":496,"line":504},[494,11384,11385],{"class":500}," \u002F* Font families *\u002F\n",[494,11387,11388,11390,11392,11394,11396,11398,11400,11402],{"class":496,"line":510},[494,11389,2900],{"class":650},[494,11391,661],{"class":513},[494,11393,2905],{"class":925},[494,11395,661],{"class":513},[494,11397,2910],{"class":650},[494,11399,661],{"class":513},[494,11401,1138],{"class":925},[494,11403,847],{"class":650},[494,11405,11406,11409,11411,11414,11416],{"class":496,"line":523},[494,11407,11408],{"class":650}," --font-serif: \"Merriweather\"",[494,11410,661],{"class":513},[494,11412,11413],{"class":650}," \"Georgia\"",[494,11415,661],{"class":513},[494,11417,11418],{"class":650}," serif;\n",[494,11420,11421,11423,11425,11427,11429],{"class":496,"line":535},[494,11422,1145],{"class":650},[494,11424,661],{"class":513},[494,11426,2926],{"class":650},[494,11428,661],{"class":513},[494,11430,1150],{"class":650},[494,11432,11433],{"class":496,"line":545},[494,11434,872],{"emptyLinePlaceholder":871},[494,11436,11437],{"class":496,"line":555},[494,11438,11439],{"class":500}," \u002F* Font sizes — modular scale 1.25 (major third) *\u002F\n",[494,11441,11442,11445],{"class":496,"line":565},[494,11443,11444],{"class":650}," --text-xs: 0.75rem; ",[494,11446,11447],{"class":500},"\u002F* 12px *\u002F\n",[494,11449,11450,11453],{"class":496,"line":586},[494,11451,11452],{"class":650}," --text-sm: 0.875rem; ",[494,11454,11455],{"class":500},"\u002F* 14px *\u002F\n",[494,11457,11458,11461],{"class":496,"line":603},[494,11459,11460],{"class":650}," --text-base: 1rem; ",[494,11462,11463],{"class":500},"\u002F* 16px *\u002F\n",[494,11465,11466,11469],{"class":496,"line":620},[494,11467,11468],{"class":650}," --text-lg: 1.125rem; ",[494,11470,11471],{"class":500},"\u002F* 18px *\u002F\n",[494,11473,11474,11477],{"class":496,"line":626},[494,11475,11476],{"class":650}," --text-xl: 1.25rem; ",[494,11478,11479],{"class":500},"\u002F* 20px *\u002F\n",[494,11481,11482,11485],{"class":496,"line":632},[494,11483,11484],{"class":650}," --text-2xl: 1.5rem; ",[494,11486,11487],{"class":500},"\u002F* 24px *\u002F\n",[494,11489,11490,11493],{"class":496,"line":642},[494,11491,11492],{"class":650}," --text-3xl: 1.875rem; ",[494,11494,11495],{"class":500},"\u002F* 30px *\u002F\n",[494,11497,11498,11501],{"class":496,"line":676},[494,11499,11500],{"class":650}," --text-4xl: 2.25rem; ",[494,11502,11503],{"class":500},"\u002F* 36px *\u002F\n",[494,11505,11506,11509],{"class":496,"line":681},[494,11507,11508],{"class":650}," --text-5xl: 3rem; ",[494,11510,11511],{"class":500},"\u002F* 48px *\u002F\n",[494,11513,11514,11517],{"class":496,"line":691},[494,11515,11516],{"class":650}," --text-6xl: 3.75rem; ",[494,11518,11519],{"class":500},"\u002F* 60px *\u002F\n",[494,11521,11522,11525],{"class":496,"line":713},[494,11523,11524],{"class":650}," --text-7xl: 4.5rem; ",[494,11526,11527],{"class":500},"\u002F* 72px *\u002F\n",[494,11529,11530],{"class":496,"line":734},[494,11531,872],{"emptyLinePlaceholder":871},[494,11533,11534],{"class":496,"line":740},[494,11535,11536],{"class":500}," \u002F* Font weights *\u002F\n",[494,11538,11539],{"class":496,"line":746},[494,11540,11541],{"class":650}," --font-weight-normal: 400;\n",[494,11543,11544],{"class":496,"line":752},[494,11545,11546],{"class":650}," --font-weight-medium: 500;\n",[494,11548,11549],{"class":496,"line":763},[494,11550,11551],{"class":650}," --font-weight-semibold: 600;\n",[494,11553,11554],{"class":496,"line":785},[494,11555,11556],{"class":650}," --font-weight-bold: 700;\n",[494,11558,11559],{"class":496,"line":803},[494,11560,11561],{"class":650}," --font-weight-extrabold: 800;\n",[494,11563,11564],{"class":496,"line":809},[494,11565,872],{"emptyLinePlaceholder":871},[494,11567,11568],{"class":496,"line":1157},[494,11569,11570],{"class":500}," \u002F* Line heights *\u002F\n",[494,11572,11573],{"class":496,"line":1163},[494,11574,11575],{"class":650}," --leading-none: 1;\n",[494,11577,11578],{"class":496,"line":1169},[494,11579,11580],{"class":650}," --leading-tight: 1.25;\n",[494,11582,11583],{"class":496,"line":2313},[494,11584,11585],{"class":650}," --leading-snug: 1.375;\n",[494,11587,11588],{"class":496,"line":2331},[494,11589,11590],{"class":650}," --leading-normal: 1.5;\n",[494,11592,11593],{"class":496,"line":2336},[494,11594,11595],{"class":650}," --leading-relaxed: 1.625;\n",[494,11597,11598],{"class":496,"line":2342},[494,11599,11600],{"class":650}," --leading-loose: 2;\n",[494,11602,11603],{"class":496,"line":2361},[494,11604,872],{"emptyLinePlaceholder":871},[494,11606,11607],{"class":496,"line":2379},[494,11608,11609],{"class":500}," \u002F* Letter spacing *\u002F\n",[494,11611,11612],{"class":496,"line":2398},[494,11613,11614],{"class":650}," --tracking-tighter: -0.05em;\n",[494,11616,11617],{"class":496,"line":2418},[494,11618,11619],{"class":650}," --tracking-tight: -0.025em;\n",[494,11621,11622],{"class":496,"line":2437},[494,11623,11624],{"class":650}," --tracking-normal: 0;\n",[494,11626,11627],{"class":496,"line":2455},[494,11628,11629],{"class":650}," --tracking-wide: 0.025em;\n",[494,11631,11632],{"class":496,"line":2473},[494,11633,11634],{"class":650}," --tracking-wider: 0.05em;\n",[494,11636,11637],{"class":496,"line":2492},[494,11638,872],{"emptyLinePlaceholder":871},[494,11640,11641],{"class":496,"line":2511},[494,11642,11643],{"class":500}," \u002F* Custom text sizes with built-in line-height *\u002F\n",[494,11645,11646],{"class":496,"line":2516},[494,11647,11648],{"class":650}," --text-display: 5rem;\n",[494,11650,11651],{"class":496,"line":2522},[494,11652,3022],{"class":650},[494,11654,11655],{"class":496,"line":2542},[494,11656,3028],{"class":650},[494,11658,11659],{"class":496,"line":2561},[494,11660,872],{"emptyLinePlaceholder":871},[494,11662,11663],{"class":496,"line":2579},[494,11664,11665],{"class":650}," --text-headline: 3rem;\n",[494,11667,11668],{"class":496,"line":2597},[494,11669,11670],{"class":650}," --text-headline--line-height: 1.2;\n",[494,11672,11673],{"class":496,"line":2615},[494,11674,11675],{"class":650}," --text-headline--font-weight: 700;\n",[494,11677,11678],{"class":496,"line":2634},[494,11679,872],{"emptyLinePlaceholder":871},[494,11681,11682],{"class":496,"line":2653},[494,11683,11684],{"class":650}," --text-subheadline: 1.5rem;\n",[494,11686,11687],{"class":496,"line":2672},[494,11688,11689],{"class":650}," --text-subheadline--line-height: 1.3;\n",[494,11691,11692],{"class":496,"line":2691},[494,11693,11694],{"class":650}," --text-subheadline--font-weight: 500;\n",[494,11696,11697],{"class":496,"line":2709},[494,11698,812],{"class":650},[480,11700,11702],{"id":11701},"_63-bài-tập-11-define-spacing-scale","6.3. BÀI TẬP 11 — Define Spacing Scale",[485,11704,11706],{"className":815,"code":11705,"language":817,"meta":490,"style":490},"@theme {\n \u002F* Spacing scale dựa trên 4px grid *\u002F\n --spacing-0: 0;\n --spacing-px: 1px;\n --spacing-0_5: 0.125rem; \u002F* 2px *\u002F\n --spacing-1: 0.25rem; \u002F* 4px *\u002F\n --spacing-1_5: 0.375rem; \u002F* 6px *\u002F\n --spacing-2: 0.5rem; \u002F* 8px *\u002F\n --spacing-2_5: 0.625rem; \u002F* 10px *\u002F\n --spacing-3: 0.75rem; \u002F* 12px *\u002F\n --spacing-3_5: 0.875rem; \u002F* 14px *\u002F\n --spacing-4: 1rem; \u002F* 16px *\u002F\n --spacing-5: 1.25rem; \u002F* 20px *\u002F\n --spacing-6: 1.5rem; \u002F* 24px *\u002F\n --spacing-7: 1.75rem; \u002F* 28px *\u002F\n --spacing-8: 2rem; \u002F* 32px *\u002F\n --spacing-9: 2.25rem; \u002F* 36px *\u002F\n --spacing-10: 2.5rem; \u002F* 40px *\u002F\n --spacing-11: 2.75rem; \u002F* 44px *\u002F\n --spacing-12: 3rem; \u002F* 48px *\u002F\n --spacing-14: 3.5rem; \u002F* 56px *\u002F\n --spacing-16: 4rem; \u002F* 64px *\u002F\n --spacing-20: 5rem; \u002F* 80px *\u002F\n --spacing-24: 6rem; \u002F* 96px *\u002F\n --spacing-28: 7rem; \u002F* 112px *\u002F\n --spacing-32: 8rem; \u002F* 128px *\u002F\n --spacing-36: 9rem; \u002F* 144px *\u002F\n --spacing-40: 10rem; \u002F* 160px *\u002F\n\n \u002F* Semantic spacing tokens *\u002F\n --spacing-section: 5rem;\n --spacing-section-sm: 3rem;\n --spacing-section-lg: 8rem;\n --spacing-container-padding: 1.5rem;\n --spacing-card-padding: 1.5rem;\n --spacing-button-padding-x: 1.25rem;\n --spacing-button-padding-y: 0.625rem;\n}\n",[441,11707,11708,11714,11719,11724,11729,11737,11745,11753,11761,11769,11776,11783,11790,11797,11804,11812,11820,11827,11835,11843,11850,11858,11866,11874,11882,11890,11898,11906,11914,11918,11923,11928,11933,11938,11943,11948,11953,11958],{"__ignoreMap":490},[494,11709,11710,11712],{"class":496,"line":497},[494,11711,877],{"class":834},[494,11713,520],{"class":513},[494,11715,11716],{"class":496,"line":504},[494,11717,11718],{"class":500}," \u002F* Spacing scale dựa trên 4px grid *\u002F\n",[494,11720,11721],{"class":496,"line":510},[494,11722,11723],{"class":650}," --spacing-0: 0;\n",[494,11725,11726],{"class":496,"line":523},[494,11727,11728],{"class":650}," --spacing-px: 1px;\n",[494,11730,11731,11734],{"class":496,"line":535},[494,11732,11733],{"class":650}," --spacing-0_5: 0.125rem; ",[494,11735,11736],{"class":500},"\u002F* 2px *\u002F\n",[494,11738,11739,11742],{"class":496,"line":545},[494,11740,11741],{"class":650}," --spacing-1: 0.25rem; ",[494,11743,11744],{"class":500},"\u002F* 4px *\u002F\n",[494,11746,11747,11750],{"class":496,"line":555},[494,11748,11749],{"class":650}," --spacing-1_5: 0.375rem; ",[494,11751,11752],{"class":500},"\u002F* 6px *\u002F\n",[494,11754,11755,11758],{"class":496,"line":565},[494,11756,11757],{"class":650}," --spacing-2: 0.5rem; ",[494,11759,11760],{"class":500},"\u002F* 8px *\u002F\n",[494,11762,11763,11766],{"class":496,"line":586},[494,11764,11765],{"class":650}," --spacing-2_5: 0.625rem; ",[494,11767,11768],{"class":500},"\u002F* 10px *\u002F\n",[494,11770,11771,11774],{"class":496,"line":603},[494,11772,11773],{"class":650}," --spacing-3: 0.75rem; ",[494,11775,11447],{"class":500},[494,11777,11778,11781],{"class":496,"line":620},[494,11779,11780],{"class":650}," --spacing-3_5: 0.875rem; ",[494,11782,11455],{"class":500},[494,11784,11785,11788],{"class":496,"line":626},[494,11786,11787],{"class":650}," --spacing-4: 1rem; ",[494,11789,11463],{"class":500},[494,11791,11792,11795],{"class":496,"line":632},[494,11793,11794],{"class":650}," --spacing-5: 1.25rem; ",[494,11796,11479],{"class":500},[494,11798,11799,11802],{"class":496,"line":642},[494,11800,11801],{"class":650}," --spacing-6: 1.5rem; ",[494,11803,11487],{"class":500},[494,11805,11806,11809],{"class":496,"line":676},[494,11807,11808],{"class":650}," --spacing-7: 1.75rem; ",[494,11810,11811],{"class":500},"\u002F* 28px *\u002F\n",[494,11813,11814,11817],{"class":496,"line":681},[494,11815,11816],{"class":650}," --spacing-8: 2rem; ",[494,11818,11819],{"class":500},"\u002F* 32px *\u002F\n",[494,11821,11822,11825],{"class":496,"line":691},[494,11823,11824],{"class":650}," --spacing-9: 2.25rem; ",[494,11826,11503],{"class":500},[494,11828,11829,11832],{"class":496,"line":713},[494,11830,11831],{"class":650}," --spacing-10: 2.5rem; ",[494,11833,11834],{"class":500},"\u002F* 40px *\u002F\n",[494,11836,11837,11840],{"class":496,"line":734},[494,11838,11839],{"class":650}," --spacing-11: 2.75rem; ",[494,11841,11842],{"class":500},"\u002F* 44px *\u002F\n",[494,11844,11845,11848],{"class":496,"line":740},[494,11846,11847],{"class":650}," --spacing-12: 3rem; ",[494,11849,11511],{"class":500},[494,11851,11852,11855],{"class":496,"line":746},[494,11853,11854],{"class":650}," --spacing-14: 3.5rem; ",[494,11856,11857],{"class":500},"\u002F* 56px *\u002F\n",[494,11859,11860,11863],{"class":496,"line":752},[494,11861,11862],{"class":650}," --spacing-16: 4rem; ",[494,11864,11865],{"class":500},"\u002F* 64px *\u002F\n",[494,11867,11868,11871],{"class":496,"line":763},[494,11869,11870],{"class":650}," --spacing-20: 5rem; ",[494,11872,11873],{"class":500},"\u002F* 80px *\u002F\n",[494,11875,11876,11879],{"class":496,"line":785},[494,11877,11878],{"class":650}," --spacing-24: 6rem; ",[494,11880,11881],{"class":500},"\u002F* 96px *\u002F\n",[494,11883,11884,11887],{"class":496,"line":803},[494,11885,11886],{"class":650}," --spacing-28: 7rem; ",[494,11888,11889],{"class":500},"\u002F* 112px *\u002F\n",[494,11891,11892,11895],{"class":496,"line":809},[494,11893,11894],{"class":650}," --spacing-32: 8rem; ",[494,11896,11897],{"class":500},"\u002F* 128px *\u002F\n",[494,11899,11900,11903],{"class":496,"line":1157},[494,11901,11902],{"class":650}," --spacing-36: 9rem; ",[494,11904,11905],{"class":500},"\u002F* 144px *\u002F\n",[494,11907,11908,11911],{"class":496,"line":1163},[494,11909,11910],{"class":650}," --spacing-40: 10rem; ",[494,11912,11913],{"class":500},"\u002F* 160px *\u002F\n",[494,11915,11916],{"class":496,"line":1169},[494,11917,872],{"emptyLinePlaceholder":871},[494,11919,11920],{"class":496,"line":2313},[494,11921,11922],{"class":500}," \u002F* Semantic spacing tokens *\u002F\n",[494,11924,11925],{"class":496,"line":2331},[494,11926,11927],{"class":650}," --spacing-section: 5rem;\n",[494,11929,11930],{"class":496,"line":2336},[494,11931,11932],{"class":650}," --spacing-section-sm: 3rem;\n",[494,11934,11935],{"class":496,"line":2342},[494,11936,11937],{"class":650}," --spacing-section-lg: 8rem;\n",[494,11939,11940],{"class":496,"line":2361},[494,11941,11942],{"class":650}," --spacing-container-padding: 1.5rem;\n",[494,11944,11945],{"class":496,"line":2379},[494,11946,11947],{"class":650}," --spacing-card-padding: 1.5rem;\n",[494,11949,11950],{"class":496,"line":2398},[494,11951,11952],{"class":650}," --spacing-button-padding-x: 1.25rem;\n",[494,11954,11955],{"class":496,"line":2418},[494,11956,11957],{"class":650}," --spacing-button-padding-y: 0.625rem;\n",[494,11959,11960],{"class":496,"line":2437},[494,11961,812],{"class":650},[480,11963,11965],{"id":11964},"_64-bài-tập-12-define-component-tokens-button-card-input","6.4. BÀI TẬP 12 — Define Component Tokens (Button, Card, Input)",[485,11967,11969],{"className":815,"code":11968,"language":817,"meta":490,"style":490},"@theme {\n \u002F* === BUTTON TOKENS === *\u002F\n --color-btn-primary-bg: var(--color-primary-500);\n --color-btn-primary-text: white;\n --color-btn-primary-hover-bg: var(--color-primary-600);\n --color-btn-primary-active-bg: var(--color-primary-700);\n\n --color-btn-secondary-bg: transparent;\n --color-btn-secondary-text: var(--color-primary-500);\n --color-btn-secondary-border: var(--color-primary-500);\n --color-btn-secondary-hover-bg: var(--color-primary-50);\n\n --color-btn-ghost-bg: transparent;\n --color-btn-ghost-text: var(--color-neutral-700);\n --color-btn-ghost-hover-bg: var(--color-neutral-100);\n\n \u002F* Button sizing *\u002F\n --spacing-btn-sm-px: 0.75rem;\n --spacing-btn-sm-py: 0.375rem;\n --text-btn-sm: 0.75rem;\n\n --spacing-btn-md-px: 1.25rem;\n --spacing-btn-md-py: 0.625rem;\n --text-btn-md: 0.875rem;\n\n --spacing-btn-lg-px: 1.5rem;\n --spacing-btn-lg-py: 0.75rem;\n --text-btn-lg: 1rem;\n\n \u002F* Button shared *\u002F\n --radius-btn: var(--radius-lg);\n --font-weight-btn: 600;\n\n \u002F* === CARD TOKENS === *\u002F\n --color-card-bg: white;\n --color-card-border: var(--color-neutral-200);\n --radius-card: var(--radius-xl);\n --shadow-card: 0 1px 3px rgba(0,0,0,0.08);\n --shadow-card-hover: 0 10px 25px -5px rgba(0,0,0,0.1);\n\n \u002F* === INPUT TOKENS === *\u002F\n --color-input-bg: white;\n --color-input-border: var(--color-neutral-300);\n --color-input-text: var(--color-neutral-900);\n --color-input-placeholder: var(--color-neutral-400);\n --color-input-focus-border: var(--color-primary-500);\n --color-input-focus-ring: color-mix(in oklch, var(--color-primary-500) 25%, transparent);\n --color-input-error-border: var(--color-error-500);\n --radius-input: var(--radius-lg);\n --spacing-input-px: 0.875rem;\n --spacing-input-py: 0.625rem;\n}\n",[441,11970,11971,11977,11982,11987,11992,11997,12002,12006,12011,12016,12021,12026,12030,12035,12040,12045,12049,12054,12059,12064,12069,12073,12078,12083,12088,12092,12097,12102,12107,12111,12116,12121,12126,12130,12135,12140,12145,12150,12172,12195,12199,12204,12209,12214,12219,12224,12229,12239,12244,12249,12254,12259],{"__ignoreMap":490},[494,11972,11973,11975],{"class":496,"line":497},[494,11974,877],{"class":834},[494,11976,520],{"class":513},[494,11978,11979],{"class":496,"line":504},[494,11980,11981],{"class":500}," \u002F* === BUTTON TOKENS === *\u002F\n",[494,11983,11984],{"class":496,"line":510},[494,11985,11986],{"class":650}," --color-btn-primary-bg: var(--color-primary-500);\n",[494,11988,11989],{"class":496,"line":523},[494,11990,11991],{"class":650}," --color-btn-primary-text: white;\n",[494,11993,11994],{"class":496,"line":535},[494,11995,11996],{"class":650}," --color-btn-primary-hover-bg: var(--color-primary-600);\n",[494,11998,11999],{"class":496,"line":545},[494,12000,12001],{"class":650}," --color-btn-primary-active-bg: var(--color-primary-700);\n",[494,12003,12004],{"class":496,"line":555},[494,12005,872],{"emptyLinePlaceholder":871},[494,12007,12008],{"class":496,"line":565},[494,12009,12010],{"class":650}," --color-btn-secondary-bg: transparent;\n",[494,12012,12013],{"class":496,"line":586},[494,12014,12015],{"class":650}," --color-btn-secondary-text: var(--color-primary-500);\n",[494,12017,12018],{"class":496,"line":603},[494,12019,12020],{"class":650}," --color-btn-secondary-border: var(--color-primary-500);\n",[494,12022,12023],{"class":496,"line":620},[494,12024,12025],{"class":650}," --color-btn-secondary-hover-bg: var(--color-primary-50);\n",[494,12027,12028],{"class":496,"line":626},[494,12029,872],{"emptyLinePlaceholder":871},[494,12031,12032],{"class":496,"line":632},[494,12033,12034],{"class":650}," --color-btn-ghost-bg: transparent;\n",[494,12036,12037],{"class":496,"line":642},[494,12038,12039],{"class":650}," --color-btn-ghost-text: var(--color-neutral-700);\n",[494,12041,12042],{"class":496,"line":676},[494,12043,12044],{"class":650}," --color-btn-ghost-hover-bg: var(--color-neutral-100);\n",[494,12046,12047],{"class":496,"line":681},[494,12048,872],{"emptyLinePlaceholder":871},[494,12050,12051],{"class":496,"line":691},[494,12052,12053],{"class":500}," \u002F* Button sizing *\u002F\n",[494,12055,12056],{"class":496,"line":713},[494,12057,12058],{"class":650}," --spacing-btn-sm-px: 0.75rem;\n",[494,12060,12061],{"class":496,"line":734},[494,12062,12063],{"class":650}," --spacing-btn-sm-py: 0.375rem;\n",[494,12065,12066],{"class":496,"line":740},[494,12067,12068],{"class":650}," --text-btn-sm: 0.75rem;\n",[494,12070,12071],{"class":496,"line":746},[494,12072,872],{"emptyLinePlaceholder":871},[494,12074,12075],{"class":496,"line":752},[494,12076,12077],{"class":650}," --spacing-btn-md-px: 1.25rem;\n",[494,12079,12080],{"class":496,"line":763},[494,12081,12082],{"class":650}," --spacing-btn-md-py: 0.625rem;\n",[494,12084,12085],{"class":496,"line":785},[494,12086,12087],{"class":650}," --text-btn-md: 0.875rem;\n",[494,12089,12090],{"class":496,"line":803},[494,12091,872],{"emptyLinePlaceholder":871},[494,12093,12094],{"class":496,"line":809},[494,12095,12096],{"class":650}," --spacing-btn-lg-px: 1.5rem;\n",[494,12098,12099],{"class":496,"line":1157},[494,12100,12101],{"class":650}," --spacing-btn-lg-py: 0.75rem;\n",[494,12103,12104],{"class":496,"line":1163},[494,12105,12106],{"class":650}," --text-btn-lg: 1rem;\n",[494,12108,12109],{"class":496,"line":1169},[494,12110,872],{"emptyLinePlaceholder":871},[494,12112,12113],{"class":496,"line":2313},[494,12114,12115],{"class":500}," \u002F* Button shared *\u002F\n",[494,12117,12118],{"class":496,"line":2331},[494,12119,12120],{"class":650}," --radius-btn: var(--radius-lg);\n",[494,12122,12123],{"class":496,"line":2336},[494,12124,12125],{"class":650}," --font-weight-btn: 600;\n",[494,12127,12128],{"class":496,"line":2342},[494,12129,872],{"emptyLinePlaceholder":871},[494,12131,12132],{"class":496,"line":2361},[494,12133,12134],{"class":500}," \u002F* === CARD TOKENS === *\u002F\n",[494,12136,12137],{"class":496,"line":2379},[494,12138,12139],{"class":650}," --color-card-bg: white;\n",[494,12141,12142],{"class":496,"line":2398},[494,12143,12144],{"class":650}," --color-card-border: var(--color-neutral-200);\n",[494,12146,12147],{"class":496,"line":2418},[494,12148,12149],{"class":650}," --radius-card: var(--radius-xl);\n",[494,12151,12152,12154,12156,12158,12160,12162,12164,12166,12168,12170],{"class":496,"line":2437},[494,12153,6841],{"class":650},[494,12155,661],{"class":513},[494,12157,3524],{"class":650},[494,12159,661],{"class":513},[494,12161,3524],{"class":650},[494,12163,661],{"class":513},[494,12165,3524],{"class":650},[494,12167,922],{"class":513},[494,12169,1104],{"class":925},[494,12171,1280],{"class":650},[494,12173,12174,12177,12179,12181,12183,12185,12187,12189,12191,12193],{"class":496,"line":2455},[494,12175,12176],{"class":650}," --shadow-card-hover: 0 10px 25px -5px rgba(0",[494,12178,661],{"class":513},[494,12180,3524],{"class":650},[494,12182,661],{"class":513},[494,12184,3524],{"class":650},[494,12186,661],{"class":513},[494,12188,3524],{"class":650},[494,12190,922],{"class":513},[494,12192,3168],{"class":925},[494,12194,1280],{"class":650},[494,12196,12197],{"class":496,"line":2473},[494,12198,872],{"emptyLinePlaceholder":871},[494,12200,12201],{"class":496,"line":2492},[494,12202,12203],{"class":500}," \u002F* === INPUT TOKENS === *\u002F\n",[494,12205,12206],{"class":496,"line":2511},[494,12207,12208],{"class":650}," --color-input-bg: white;\n",[494,12210,12211],{"class":496,"line":2516},[494,12212,12213],{"class":650}," --color-input-border: var(--color-neutral-300);\n",[494,12215,12216],{"class":496,"line":2522},[494,12217,12218],{"class":650}," --color-input-text: var(--color-neutral-900);\n",[494,12220,12221],{"class":496,"line":2542},[494,12222,12223],{"class":650}," --color-input-placeholder: var(--color-neutral-400);\n",[494,12225,12226],{"class":496,"line":2561},[494,12227,12228],{"class":650}," --color-input-focus-border: var(--color-primary-500);\n",[494,12230,12231,12234,12236],{"class":496,"line":2579},[494,12232,12233],{"class":650}," --color-input-focus-ring: color-mix(in oklch",[494,12235,661],{"class":513},[494,12237,12238],{"class":650}," var(--color-primary-500) 25%, transparent);\n",[494,12240,12241],{"class":496,"line":2597},[494,12242,12243],{"class":650}," --color-input-error-border: var(--color-error-500);\n",[494,12245,12246],{"class":496,"line":2615},[494,12247,12248],{"class":650}," --radius-input: var(--radius-lg);\n",[494,12250,12251],{"class":496,"line":2634},[494,12252,12253],{"class":650}," --spacing-input-px: 0.875rem;\n",[494,12255,12256],{"class":496,"line":2653},[494,12257,12258],{"class":650}," --spacing-input-py: 0.625rem;\n",[494,12260,12261],{"class":496,"line":2672},[494,12262,812],{"class":650},[480,12264,12266,12267,780],{"id":12265},"_65-bài-tập-13-full-design-system-all-components-in-one-theme","6.5. BÀI TẬP 13 — Full Design System (All Components in One ",[441,12268,877],{},[432,12270,12271],{},"Đây là bài tập tổng hợp: gom tất cả tokens từ bài 9-12 vào một file CSS hoàn chỉnh, kèm component classes.",[432,12273,12274],{},[436,12275,1905],{},[485,12277,12279],{"className":815,"code":12278,"language":817,"meta":490,"style":490},"\u002F* full-design-system.css *\u002F\n@import \"tailwindcss\";\n\n\u002F* ============================================================\n DESIGN SYSTEM TOKENS — All in @theme\n ============================================================ *\u002F\n@theme {\n \u002F* === COLORS === *\u002F\n \u002F* Primary *\u002F\n --color-primary-50: oklch(0.97 0.02 255);\n --color-primary-100: oklch(0.92 0.04 255);\n --color-primary-200: oklch(0.84 0.07 255);\n --color-primary-300: oklch(0.74 0.12 255);\n --color-primary-400: oklch(0.64 0.16 255);\n --color-primary-500: oklch(0.54 0.20 255);\n --color-primary-600: oklch(0.46 0.18 255);\n --color-primary-700: oklch(0.37 0.15 255);\n --color-primary-800: oklch(0.28 0.11 255);\n --color-primary-900: oklch(0.20 0.07 255);\n\n \u002F* Secondary *\u002F\n --color-secondary-50: oklch(0.97 0.02 290);\n --color-secondary-100: oklch(0.92 0.04 290);\n --color-secondary-200: oklch(0.84 0.07 290);\n --color-secondary-300: oklch(0.74 0.12 290);\n --color-secondary-400: oklch(0.64 0.17 290);\n --color-secondary-500: oklch(0.54 0.20 290);\n --color-secondary-600: oklch(0.46 0.18 290);\n --color-secondary-700: oklch(0.37 0.15 290);\n --color-secondary-800: oklch(0.28 0.11 290);\n --color-secondary-900: oklch(0.20 0.07 290);\n\n \u002F* Neutral *\u002F\n --color-neutral-50: oklch(0.98 0.01 260);\n --color-neutral-100: oklch(0.95 0.01 260);\n --color-neutral-200: oklch(0.88 0.01 260);\n --color-neutral-300: oklch(0.78 0.01 260);\n --color-neutral-400: oklch(0.64 0.01 260);\n --color-neutral-500: oklch(0.52 0.01 260);\n --color-neutral-600: oklch(0.42 0.01 260);\n --color-neutral-700: oklch(0.33 0.01 260);\n --color-neutral-800: oklch(0.23 0.01 260);\n --color-neutral-900: oklch(0.15 0.01 260);\n --color-neutral-950: oklch(0.10 0.01 260);\n\n \u002F* Semantic *\u002F\n --color-success-50: oklch(0.97 0.02 150);\n --color-success-100: oklch(0.92 0.04 150);\n --color-success-500: oklch(0.60 0.19 150);\n --color-success-600: oklch(0.52 0.18 150);\n --color-success-700: oklch(0.44 0.16 150);\n\n --color-warning-50: oklch(0.97 0.02 85);\n --color-warning-100: oklch(0.93 0.04 85);\n --color-warning-500: oklch(0.70 0.17 85);\n --color-warning-600: oklch(0.60 0.15 85);\n --color-warning-700: oklch(0.50 0.13 75);\n\n --color-error-50: oklch(0.97 0.02 20);\n --color-error-100: oklch(0.93 0.04 20);\n --color-error-500: oklch(0.55 0.22 20);\n --color-error-600: oklch(0.48 0.21 20);\n --color-error-700: oklch(0.40 0.18 20);\n\n --color-info-50: oklch(0.97 0.02 240);\n --color-info-100: oklch(0.92 0.04 240);\n --color-info-500: oklch(0.60 0.16 240);\n --color-info-600: oklch(0.52 0.14 240);\n --color-info-700: oklch(0.44 0.12 240);\n\n \u002F* Surface *\u002F\n --color-surface: white;\n --color-surface-secondary: oklch(0.97 0.01 260);\n\n \u002F* === TYPOGRAPHY === *\u002F\n --font-sans: \"Inter\", system-ui, sans-serif;\n --font-mono: \"JetBrains Mono\", monospace;\n\n --text-xs: 0.75rem;\n --text-sm: 0.875rem;\n --text-base: 1rem;\n --text-lg: 1.125rem;\n --text-xl: 1.25rem;\n --text-2xl: 1.5rem;\n --text-3xl: 1.875rem;\n --text-4xl: 2.25rem;\n --text-5xl: 3rem;\n\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n\n --leading-tight: 1.25;\n --leading-normal: 1.5;\n --leading-relaxed: 1.625;\n\n \u002F* === SPACING === *\u002F\n --spacing-section: 5rem;\n --spacing-section-sm: 3rem;\n --spacing-section-lg: 8rem;\n\n \u002F* === BORDER RADIUS === *\u002F\n --radius-sm: 0.375rem;\n --radius-md: 0.5rem;\n --radius-lg: 0.75rem;\n --radius-xl: 1rem;\n --radius-2xl: 1.5rem;\n --radius-full: 9999px;\n\n \u002F* === SHADOWS === *\u002F\n --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);\n --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07);\n --shadow-lg: 0 10px 25px -5px rgba(0,0,0,0.1);\n --shadow-xl: 0 20px 50px -10px rgba(0,0,0,0.15);\n}\n\n\u002F* ============================================================\n COMPONENT CLASSES\n ============================================================ *\u002F\n@layer components {\n \u002F* === BUTTON === *\u002F\n .btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n border-radius: var(--radius-lg);\n font-weight: var(--font-weight-semibold);\n font-size: var(--text-sm);\n line-height: 1.25rem;\n padding: 0.625rem 1.25rem;\n transition: all 0.15s ease;\n cursor: pointer;\n border: 1px solid transparent;\n white-space: nowrap;\n }\n .btn:focus-visible {\n outline: 2px solid var(--color-primary-500);\n outline-offset: 2px;\n }\n .btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n \u002F* Button Variants *\u002F\n .btn-primary {\n background-color: var(--color-primary-500);\n color: white;\n }\n .btn-primary:hover {\n background-color: var(--color-primary-600);\n }\n .btn-primary:active {\n background-color: var(--color-primary-700);\n }\n\n .btn-secondary {\n background-color: transparent;\n color: var(--color-primary-500);\n border-color: var(--color-primary-500);\n }\n .btn-secondary:hover {\n background-color: var(--color-primary-50);\n }\n\n .btn-ghost {\n background-color: transparent;\n color: var(--color-neutral-700);\n }\n .btn-ghost:hover {\n background-color: var(--color-neutral-100);\n }\n\n .btn-danger {\n background-color: var(--color-error-500);\n color: white;\n }\n .btn-danger:hover {\n background-color: var(--color-error-600);\n }\n\n \u002F* Button Sizes *\u002F\n .btn-sm {\n padding: 0.375rem 0.75rem;\n font-size: var(--text-xs);\n border-radius: var(--radius-md);\n }\n .btn-lg {\n padding: 0.75rem 1.5rem;\n font-size: var(--text-base);\n border-radius: var(--radius-xl);\n }\n\n \u002F* === CARD === *\u002F\n .card {\n background-color: var(--color-surface);\n border: 1px solid var(--color-neutral-200);\n border-radius: var(--radius-xl);\n overflow: hidden;\n }\n .card-interactive {\n transition: box-shadow 0.2s ease, transform 0.2s ease;\n cursor: pointer;\n }\n .card-interactive:hover {\n box-shadow: var(--shadow-lg);\n transform: translateY(-2px);\n }\n .card-header {\n padding: 1.5rem 1.5rem 0;\n }\n .card-body {\n padding: 1.5rem;\n }\n .card-footer {\n padding: 0 1.5rem 1.5rem;\n }\n\n \u002F* === INPUT === *\u002F\n .input {\n display: block;\n width: 100%;\n padding: 0.625rem 0.875rem;\n font-size: var(--text-sm);\n line-height: 1.5;\n color: var(--color-neutral-900);\n background-color: white;\n border: 1px solid var(--color-neutral-300);\n border-radius: var(--radius-lg);\n transition: border-color 0.15s ease, box-shadow 0.15s ease;\n }\n .input::placeholder {\n color: var(--color-neutral-400);\n }\n .input:focus {\n outline: none;\n border-color: var(--color-primary-500);\n box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary-500) 25%, transparent);\n }\n .input-error {\n border-color: var(--color-error-500);\n }\n .input-error:focus {\n box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-error-500) 25%, transparent);\n }\n\n \u002F* === BADGE === *\u002F\n .badge {\n display: inline-flex;\n align-items: center;\n padding: 0.125rem 0.75rem;\n font-size: var(--text-xs);\n font-weight: var(--font-weight-medium);\n line-height: 1.25rem;\n border-radius: var(--radius-full);\n }\n .badge-primary {\n background-color: color-mix(in oklch, var(--color-primary-500) 15%, transparent);\n color: var(--color-primary-700);\n }\n .badge-success {\n background-color: color-mix(in oklch, var(--color-success-500) 15%, transparent);\n color: var(--color-success-700);\n }\n .badge-warning {\n background-color: color-mix(in oklch, var(--color-warning-500) 15%, transparent);\n color: var(--color-warning-700);\n }\n .badge-error {\n background-color: color-mix(in oklch, var(--color-error-500) 15%, transparent);\n color: var(--color-error-700);\n }\n .badge-info {\n background-color: color-mix(in oklch, var(--color-info-500) 15%, transparent);\n color: var(--color-info-700);\n }\n}\n\n\u002F* ============================================================\n BASE STYLES\n ============================================================ *\u002F\n@layer base {\n html {\n scroll-behavior: smooth;\n -webkit-font-smoothing: antialiased;\n }\n body {\n font-family: var(--font-sans);\n color: var(--color-neutral-900);\n background-color: var(--color-surface);\n min-height: 100dvh;\n }\n :focus-visible {\n outline: 2px solid var(--color-primary-500);\n outline-offset: 2px;\n border-radius: var(--radius-sm);\n }\n}\n",[441,12280,12281,12286,12298,12302,12307,12312,12317,12323,12327,12332,12348,12364,12380,12396,12412,12428,12444,12460,12476,12492,12496,12501,12517,12533,12549,12565,12581,12597,12613,12629,12645,12661,12665,12670,12686,12702,12718,12734,12750,12766,12782,12798,12814,12830,12846,12850,12855,12871,12887,12903,12919,12935,12939,12955,12971,12987,13003,13019,13023,13039,13055,13071,13087,13103,13107,13123,13139,13155,13171,13187,13191,13196,13200,13216,13220,13224,13238,13246,13250,13254,13258,13262,13266,13270,13274,13278,13282,13286,13290,13294,13298,13302,13306,13310,13314,13318,13322,13326,13330,13334,13338,13342,13346,13350,13354,13358,13362,13366,13370,13374,13378,13382,13405,13428,13451,13474,13478,13482,13486,13491,13495,13503,13507,13515,13525,13535,13545,13555,13569,13584,13599,13609,13621,13635,13645,13657,13667,13671,13683,13701,13711,13715,13727,13737,13747,13751,13755,13760,13768,13782,13792,13796,13808,13822,13826,13839,13854,13858,13862,13870,13880,13894,13908,13912,13924,13939,13943,13947,13955,13965,13980,13984,13996,14011,14015,14019,14028,14043,14053,14057,14069,14084,14089,14094,14100,14109,14122,14138,14154,14159,14168,14181,14197,14212,14217,14222,14227,14236,14251,14271,14286,14297,14302,14312,14335,14346,14351,14364,14380,14395,14400,14409,14424,14429,14438,14449,14454,14463,14478,14483,14488,14493,14502,14513,14524,14537,14552,14563,14578,14589,14609,14624,14647,14652,14665,14681,14686,14699,14710,14725,14767,14772,14781,14796,14801,14814,14855,14860,14865,14870,14879,14890,14901,14914,14929,14945,14956,14972,14977,14986,15019,15034,15039,15048,15082,15098,15103,15112,15146,15162,15167,15176,15209,15225,15230,15240,15274,15290,15295,15300,15305,15310,15316,15321,15330,15337,15348,15359,15364,15371,15386,15401,15416,15427,15432,15441,15460,15471,15486,15491],{"__ignoreMap":490},[494,12282,12283],{"class":496,"line":497},[494,12284,12285],{"class":500},"\u002F* full-design-system.css *\u002F\n",[494,12287,12288,12290,12292,12294,12296],{"class":496,"line":504},[494,12289,835],{"class":834},[494,12291,838],{"class":513},[494,12293,841],{"class":576},[494,12295,844],{"class":513},[494,12297,847],{"class":513},[494,12299,12300],{"class":496,"line":510},[494,12301,872],{"emptyLinePlaceholder":871},[494,12303,12304],{"class":496,"line":523},[494,12305,12306],{"class":500},"\u002F* ============================================================\n",[494,12308,12309],{"class":496,"line":535},[494,12310,12311],{"class":500}," DESIGN SYSTEM TOKENS — All in @theme\n",[494,12313,12314],{"class":496,"line":545},[494,12315,12316],{"class":500}," ============================================================ *\u002F\n",[494,12318,12319,12321],{"class":496,"line":555},[494,12320,877],{"class":834},[494,12322,520],{"class":513},[494,12324,12325],{"class":496,"line":565},[494,12326,1942],{"class":500},[494,12328,12329],{"class":496,"line":586},[494,12330,12331],{"class":500}," \u002F* Primary *\u002F\n",[494,12333,12334,12336,12338,12340,12342,12344,12346],{"class":496,"line":603},[494,12335,1957],{"class":650},[494,12337,922],{"class":513},[494,12339,926],{"class":925},[494,12341,929],{"class":650},[494,12343,922],{"class":513},[494,12345,1690],{"class":925},[494,12347,1575],{"class":650},[494,12349,12350,12352,12354,12356,12358,12360,12362],{"class":496,"line":620},[494,12351,1974],{"class":650},[494,12353,922],{"class":513},[494,12355,1702],{"class":925},[494,12357,929],{"class":650},[494,12359,922],{"class":513},[494,12361,1709],{"class":925},[494,12363,1575],{"class":650},[494,12365,12366,12368,12370,12372,12374,12376,12378],{"class":496,"line":626},[494,12367,1991],{"class":650},[494,12369,922],{"class":513},[494,12371,1996],{"class":925},[494,12373,929],{"class":650},[494,12375,922],{"class":513},[494,12377,1726],{"class":925},[494,12379,1575],{"class":650},[494,12381,12382,12384,12386,12388,12390,12392,12394],{"class":496,"line":632},[494,12383,2009],{"class":650},[494,12385,922],{"class":513},[494,12387,2014],{"class":925},[494,12389,929],{"class":650},[494,12391,922],{"class":513},[494,12393,1085],{"class":925},[494,12395,1575],{"class":650},[494,12397,12398,12400,12402,12404,12406,12408,12410],{"class":496,"line":642},[494,12399,2027],{"class":650},[494,12401,922],{"class":513},[494,12403,2032],{"class":925},[494,12405,929],{"class":650},[494,12407,922],{"class":513},[494,12409,1761],{"class":925},[494,12411,1575],{"class":650},[494,12413,12414,12416,12418,12420,12422,12424,12426],{"class":496,"line":676},[494,12415,2045],{"class":650},[494,12417,922],{"class":513},[494,12419,2050],{"class":925},[494,12421,929],{"class":650},[494,12423,922],{"class":513},[494,12425,1030],{"class":925},[494,12427,1575],{"class":650},[494,12429,12430,12432,12434,12436,12438,12440,12442],{"class":496,"line":681},[494,12431,2063],{"class":650},[494,12433,922],{"class":513},[494,12435,1792],{"class":925},[494,12437,929],{"class":650},[494,12439,922],{"class":513},[494,12441,697],{"class":925},[494,12443,1575],{"class":650},[494,12445,12446,12448,12450,12452,12454,12456,12458],{"class":496,"line":691},[494,12447,2080],{"class":650},[494,12449,922],{"class":513},[494,12451,2085],{"class":925},[494,12453,929],{"class":650},[494,12455,922],{"class":513},[494,12457,1011],{"class":925},[494,12459,1575],{"class":650},[494,12461,12462,12464,12466,12468,12470,12472,12474],{"class":496,"line":713},[494,12463,2098],{"class":650},[494,12465,922],{"class":513},[494,12467,1826],{"class":925},[494,12469,929],{"class":650},[494,12471,922],{"class":513},[494,12473,1743],{"class":925},[494,12475,1575],{"class":650},[494,12477,12478,12480,12482,12484,12486,12488,12490],{"class":496,"line":734},[494,12479,2115],{"class":650},[494,12481,922],{"class":513},[494,12483,1030],{"class":925},[494,12485,929],{"class":650},[494,12487,922],{"class":513},[494,12489,1726],{"class":925},[494,12491,1575],{"class":650},[494,12493,12494],{"class":496,"line":740},[494,12495,872],{"emptyLinePlaceholder":871},[494,12497,12498],{"class":496,"line":746},[494,12499,12500],{"class":500}," \u002F* Secondary *\u002F\n",[494,12502,12503,12505,12507,12509,12511,12513,12515],{"class":496,"line":752},[494,12504,2158],{"class":650},[494,12506,922],{"class":513},[494,12508,926],{"class":925},[494,12510,929],{"class":650},[494,12512,922],{"class":513},[494,12514,1690],{"class":925},[494,12516,10657],{"class":650},[494,12518,12519,12521,12523,12525,12527,12529,12531],{"class":496,"line":763},[494,12520,2176],{"class":650},[494,12522,922],{"class":513},[494,12524,1702],{"class":925},[494,12526,929],{"class":650},[494,12528,922],{"class":513},[494,12530,1709],{"class":925},[494,12532,10657],{"class":650},[494,12534,12535,12537,12539,12541,12543,12545,12547],{"class":496,"line":785},[494,12536,2193],{"class":650},[494,12538,922],{"class":513},[494,12540,1996],{"class":925},[494,12542,929],{"class":650},[494,12544,922],{"class":513},[494,12546,1726],{"class":925},[494,12548,10657],{"class":650},[494,12550,12551,12553,12555,12557,12559,12561,12563],{"class":496,"line":803},[494,12552,2210],{"class":650},[494,12554,922],{"class":513},[494,12556,2014],{"class":925},[494,12558,929],{"class":650},[494,12560,922],{"class":513},[494,12562,1085],{"class":925},[494,12564,10657],{"class":650},[494,12566,12567,12569,12571,12573,12575,12577,12579],{"class":496,"line":809},[494,12568,2227],{"class":650},[494,12570,922],{"class":513},[494,12572,2032],{"class":925},[494,12574,929],{"class":650},[494,12576,922],{"class":513},[494,12578,2238],{"class":925},[494,12580,10657],{"class":650},[494,12582,12583,12585,12587,12589,12591,12593,12595],{"class":496,"line":1157},[494,12584,2245],{"class":650},[494,12586,922],{"class":513},[494,12588,2050],{"class":925},[494,12590,929],{"class":650},[494,12592,922],{"class":513},[494,12594,1030],{"class":925},[494,12596,10657],{"class":650},[494,12598,12599,12601,12603,12605,12607,12609,12611],{"class":496,"line":1163},[494,12600,2263],{"class":650},[494,12602,922],{"class":513},[494,12604,1792],{"class":925},[494,12606,929],{"class":650},[494,12608,922],{"class":513},[494,12610,697],{"class":925},[494,12612,10657],{"class":650},[494,12614,12615,12617,12619,12621,12623,12625,12627],{"class":496,"line":1169},[494,12616,2281],{"class":650},[494,12618,922],{"class":513},[494,12620,2085],{"class":925},[494,12622,929],{"class":650},[494,12624,922],{"class":513},[494,12626,1011],{"class":925},[494,12628,10657],{"class":650},[494,12630,12631,12633,12635,12637,12639,12641,12643],{"class":496,"line":2313},[494,12632,2298],{"class":650},[494,12634,922],{"class":513},[494,12636,1826],{"class":925},[494,12638,929],{"class":650},[494,12640,922],{"class":513},[494,12642,1743],{"class":925},[494,12644,10657],{"class":650},[494,12646,12647,12649,12651,12653,12655,12657,12659],{"class":496,"line":2331},[494,12648,2316],{"class":650},[494,12650,922],{"class":513},[494,12652,1030],{"class":925},[494,12654,929],{"class":650},[494,12656,922],{"class":513},[494,12658,1726],{"class":925},[494,12660,10657],{"class":650},[494,12662,12663],{"class":496,"line":2336},[494,12664,872],{"emptyLinePlaceholder":871},[494,12666,12667],{"class":496,"line":2342},[494,12668,12669],{"class":500}," \u002F* Neutral *\u002F\n",[494,12671,12672,12674,12676,12678,12680,12682,12684],{"class":496,"line":2361},[494,12673,2525],{"class":650},[494,12675,922],{"class":513},[494,12677,2530],{"class":925},[494,12679,929],{"class":650},[494,12681,922],{"class":513},[494,12683,934],{"class":925},[494,12685,1693],{"class":650},[494,12687,12688,12690,12692,12694,12696,12698,12700],{"class":496,"line":2379},[494,12689,2545],{"class":650},[494,12691,922],{"class":513},[494,12693,2550],{"class":925},[494,12695,929],{"class":650},[494,12697,922],{"class":513},[494,12699,934],{"class":925},[494,12701,1693],{"class":650},[494,12703,12704,12706,12708,12710,12712,12714,12716],{"class":496,"line":2398},[494,12705,2564],{"class":650},[494,12707,922],{"class":513},[494,12709,718],{"class":925},[494,12711,929],{"class":650},[494,12713,922],{"class":513},[494,12715,934],{"class":925},[494,12717,1693],{"class":650},[494,12719,12720,12722,12724,12726,12728,12730,12732],{"class":496,"line":2418},[494,12721,2582],{"class":650},[494,12723,922],{"class":513},[494,12725,2406],{"class":925},[494,12727,929],{"class":650},[494,12729,922],{"class":513},[494,12731,934],{"class":925},[494,12733,1693],{"class":650},[494,12735,12736,12738,12740,12742,12744,12746,12748],{"class":496,"line":2437},[494,12737,2600],{"class":650},[494,12739,922],{"class":513},[494,12741,2032],{"class":925},[494,12743,929],{"class":650},[494,12745,922],{"class":513},[494,12747,934],{"class":925},[494,12749,1693],{"class":650},[494,12751,12752,12754,12756,12758,12760,12762,12764],{"class":496,"line":2455},[494,12753,2618],{"class":650},[494,12755,922],{"class":513},[494,12757,2623],{"class":925},[494,12759,929],{"class":650},[494,12761,922],{"class":513},[494,12763,934],{"class":925},[494,12765,1693],{"class":650},[494,12767,12768,12770,12772,12774,12776,12778,12780],{"class":496,"line":2473},[494,12769,2637],{"class":650},[494,12771,922],{"class":513},[494,12773,2642],{"class":925},[494,12775,929],{"class":650},[494,12777,922],{"class":513},[494,12779,934],{"class":925},[494,12781,1693],{"class":650},[494,12783,12784,12786,12788,12790,12792,12794,12796],{"class":496,"line":2492},[494,12785,2656],{"class":650},[494,12787,922],{"class":513},[494,12789,2661],{"class":925},[494,12791,929],{"class":650},[494,12793,922],{"class":513},[494,12795,934],{"class":925},[494,12797,1693],{"class":650},[494,12799,12800,12802,12804,12806,12808,12810,12812],{"class":496,"line":2511},[494,12801,2675],{"class":650},[494,12803,922],{"class":513},[494,12805,2680],{"class":925},[494,12807,929],{"class":650},[494,12809,922],{"class":513},[494,12811,934],{"class":925},[494,12813,1693],{"class":650},[494,12815,12816,12818,12820,12822,12824,12826,12828],{"class":496,"line":2516},[494,12817,2694],{"class":650},[494,12819,922],{"class":513},[494,12821,1011],{"class":925},[494,12823,929],{"class":650},[494,12825,922],{"class":513},[494,12827,934],{"class":925},[494,12829,1693],{"class":650},[494,12831,12832,12834,12836,12838,12840,12842,12844],{"class":496,"line":2522},[494,12833,2712],{"class":650},[494,12835,922],{"class":513},[494,12837,992],{"class":925},[494,12839,929],{"class":650},[494,12841,922],{"class":513},[494,12843,934],{"class":925},[494,12845,1693],{"class":650},[494,12847,12848],{"class":496,"line":2542},[494,12849,872],{"emptyLinePlaceholder":871},[494,12851,12852],{"class":496,"line":2561},[494,12853,12854],{"class":500}," \u002F* Semantic *\u002F\n",[494,12856,12857,12859,12861,12863,12865,12867,12869],{"class":496,"line":2579},[494,12858,11012],{"class":650},[494,12860,922],{"class":513},[494,12862,926],{"class":925},[494,12864,929],{"class":650},[494,12866,922],{"class":513},[494,12868,1690],{"class":925},[494,12870,2755],{"class":650},[494,12872,12873,12875,12877,12879,12881,12883,12885],{"class":496,"line":2597},[494,12874,11029],{"class":650},[494,12876,922],{"class":513},[494,12878,1702],{"class":925},[494,12880,929],{"class":650},[494,12882,922],{"class":513},[494,12884,1709],{"class":925},[494,12886,2755],{"class":650},[494,12888,12889,12891,12893,12895,12897,12899,12901],{"class":496,"line":2615},[494,12890,11046],{"class":650},[494,12892,922],{"class":513},[494,12894,2746],{"class":925},[494,12896,929],{"class":650},[494,12898,922],{"class":513},[494,12900,1572],{"class":925},[494,12902,2755],{"class":650},[494,12904,12905,12907,12909,12911,12913,12915,12917],{"class":496,"line":2634},[494,12906,11063],{"class":650},[494,12908,922],{"class":513},[494,12910,2623],{"class":925},[494,12912,929],{"class":650},[494,12914,922],{"class":513},[494,12916,697],{"class":925},[494,12918,2755],{"class":650},[494,12920,12921,12923,12925,12927,12929,12931,12933],{"class":496,"line":2653},[494,12922,11080],{"class":650},[494,12924,922],{"class":513},[494,12926,2481],{"class":925},[494,12928,929],{"class":650},[494,12930,922],{"class":513},[494,12932,1761],{"class":925},[494,12934,2755],{"class":650},[494,12936,12937],{"class":496,"line":2672},[494,12938,872],{"emptyLinePlaceholder":871},[494,12940,12941,12943,12945,12947,12949,12951,12953],{"class":496,"line":2691},[494,12942,11101],{"class":650},[494,12944,922],{"class":513},[494,12946,926],{"class":925},[494,12948,929],{"class":650},[494,12950,922],{"class":513},[494,12952,1690],{"class":925},[494,12954,2774],{"class":650},[494,12956,12957,12959,12961,12963,12965,12967,12969],{"class":496,"line":2709},[494,12958,11118],{"class":650},[494,12960,922],{"class":513},[494,12962,947],{"class":925},[494,12964,929],{"class":650},[494,12966,922],{"class":513},[494,12968,1709],{"class":925},[494,12970,2774],{"class":650},[494,12972,12973,12975,12977,12979,12981,12983,12985],{"class":496,"line":2727},[494,12974,11135],{"class":650},[494,12976,922],{"class":513},[494,12978,2426],{"class":925},[494,12980,929],{"class":650},[494,12982,922],{"class":513},[494,12984,2238],{"class":925},[494,12986,2774],{"class":650},[494,12988,12989,12991,12993,12995,12997,12999,13001],{"class":496,"line":2732},[494,12990,11152],{"class":650},[494,12992,922],{"class":513},[494,12994,2746],{"class":925},[494,12996,929],{"class":650},[494,12998,922],{"class":513},[494,13000,1011],{"class":925},[494,13002,2774],{"class":650},[494,13004,13005,13007,13009,13011,13013,13015,13017],{"class":496,"line":2738},[494,13006,11169],{"class":650},[494,13008,922],{"class":513},[494,13010,11174],{"class":925},[494,13012,929],{"class":650},[494,13014,922],{"class":513},[494,13016,2413],{"class":925},[494,13018,11183],{"class":650},[494,13020,13021],{"class":496,"line":2758},[494,13022,872],{"emptyLinePlaceholder":871},[494,13024,13025,13027,13029,13031,13033,13035,13037],{"class":496,"line":2777},[494,13026,11192],{"class":650},[494,13028,922],{"class":513},[494,13030,926],{"class":925},[494,13032,929],{"class":650},[494,13034,922],{"class":513},[494,13036,1690],{"class":925},[494,13038,2793],{"class":650},[494,13040,13041,13043,13045,13047,13049,13051,13053],{"class":496,"line":2796},[494,13042,11209],{"class":650},[494,13044,922],{"class":513},[494,13046,947],{"class":925},[494,13048,929],{"class":650},[494,13050,922],{"class":513},[494,13052,1709],{"class":925},[494,13054,2793],{"class":650},[494,13056,13057,13059,13061,13063,13065,13067,13069],{"class":496,"line":2815},[494,13058,11226],{"class":650},[494,13060,922],{"class":513},[494,13062,1023],{"class":925},[494,13064,929],{"class":650},[494,13066,922],{"class":513},[494,13068,1097],{"class":925},[494,13070,2793],{"class":650},[494,13072,13073,13075,13077,13079,13081,13083,13085],{"class":496,"line":2820},[494,13074,11243],{"class":650},[494,13076,922],{"class":513},[494,13078,1042],{"class":925},[494,13080,929],{"class":650},[494,13082,922],{"class":513},[494,13084,1592],{"class":925},[494,13086,2793],{"class":650},[494,13088,13089,13091,13093,13095,13097,13099,13101],{"class":496,"line":2826},[494,13090,11260],{"class":650},[494,13092,922],{"class":513},[494,13094,1060],{"class":925},[494,13096,929],{"class":650},[494,13098,922],{"class":513},[494,13100,697],{"class":925},[494,13102,2793],{"class":650},[494,13104,13105],{"class":496,"line":2832},[494,13106,872],{"emptyLinePlaceholder":871},[494,13108,13109,13111,13113,13115,13117,13119,13121],{"class":496,"line":2850},[494,13110,11281],{"class":650},[494,13112,922],{"class":513},[494,13114,926],{"class":925},[494,13116,929],{"class":650},[494,13118,922],{"class":513},[494,13120,1690],{"class":925},[494,13122,2812],{"class":650},[494,13124,13125,13127,13129,13131,13133,13135,13137],{"class":496,"line":2868},[494,13126,11298],{"class":650},[494,13128,922],{"class":513},[494,13130,1702],{"class":925},[494,13132,929],{"class":650},[494,13134,922],{"class":513},[494,13136,1709],{"class":925},[494,13138,2812],{"class":650},[494,13140,13141,13143,13145,13147,13149,13151,13153],{"class":496,"line":2886},[494,13142,11315],{"class":650},[494,13144,922],{"class":513},[494,13146,2746],{"class":925},[494,13148,929],{"class":650},[494,13150,922],{"class":513},[494,13152,1761],{"class":925},[494,13154,2812],{"class":650},[494,13156,13157,13159,13161,13163,13165,13167,13169],{"class":496,"line":2891},[494,13158,11332],{"class":650},[494,13160,922],{"class":513},[494,13162,2623],{"class":925},[494,13164,929],{"class":650},[494,13166,922],{"class":513},[494,13168,1859],{"class":925},[494,13170,2812],{"class":650},[494,13172,13173,13175,13177,13179,13181,13183,13185],{"class":496,"line":2897},[494,13174,11349],{"class":650},[494,13176,922],{"class":513},[494,13178,2481],{"class":925},[494,13180,929],{"class":650},[494,13182,922],{"class":513},[494,13184,1085],{"class":925},[494,13186,2812],{"class":650},[494,13188,13189],{"class":496,"line":2919},[494,13190,872],{"emptyLinePlaceholder":871},[494,13192,13193],{"class":496,"line":2933},[494,13194,13195],{"class":500}," \u002F* Surface *\u002F\n",[494,13197,13198],{"class":496,"line":2948},[494,13199,2829],{"class":650},[494,13201,13202,13204,13206,13208,13210,13212,13214],{"class":496,"line":2953},[494,13203,2835],{"class":650},[494,13205,922],{"class":513},[494,13207,926],{"class":925},[494,13209,929],{"class":650},[494,13211,922],{"class":513},[494,13213,934],{"class":925},[494,13215,1693],{"class":650},[494,13217,13218],{"class":496,"line":2959},[494,13219,872],{"emptyLinePlaceholder":871},[494,13221,13222],{"class":496,"line":2965},[494,13223,2894],{"class":500},[494,13225,13226,13228,13230,13232,13234,13236],{"class":496,"line":2971},[494,13227,2900],{"class":650},[494,13229,661],{"class":513},[494,13231,2905],{"class":925},[494,13233,661],{"class":513},[494,13235,1138],{"class":925},[494,13237,847],{"class":650},[494,13239,13240,13242,13244],{"class":496,"line":2977},[494,13241,1145],{"class":650},[494,13243,661],{"class":513},[494,13245,1150],{"class":650},[494,13247,13248],{"class":496,"line":2983},[494,13249,872],{"emptyLinePlaceholder":871},[494,13251,13252],{"class":496,"line":2989},[494,13253,2962],{"class":650},[494,13255,13256],{"class":496,"line":2995},[494,13257,2968],{"class":650},[494,13259,13260],{"class":496,"line":3001},[494,13261,2974],{"class":650},[494,13263,13264],{"class":496,"line":3007},[494,13265,2980],{"class":650},[494,13267,13268],{"class":496,"line":3013},[494,13269,2986],{"class":650},[494,13271,13272],{"class":496,"line":3019},[494,13273,2992],{"class":650},[494,13275,13276],{"class":496,"line":3025},[494,13277,2998],{"class":650},[494,13279,13280],{"class":496,"line":3031},[494,13281,3004],{"class":650},[494,13283,13284],{"class":496,"line":3036},[494,13285,3010],{"class":650},[494,13287,13288],{"class":496,"line":3042},[494,13289,872],{"emptyLinePlaceholder":871},[494,13291,13292],{"class":496,"line":3047},[494,13293,11541],{"class":650},[494,13295,13296],{"class":496,"line":3053},[494,13297,11546],{"class":650},[494,13299,13300],{"class":496,"line":3059},[494,13301,11551],{"class":650},[494,13303,13304],{"class":496,"line":3065},[494,13305,11556],{"class":650},[494,13307,13308],{"class":496,"line":3071},[494,13309,872],{"emptyLinePlaceholder":871},[494,13311,13312],{"class":496,"line":3077},[494,13313,11580],{"class":650},[494,13315,13316],{"class":496,"line":3082},[494,13317,11590],{"class":650},[494,13319,13320],{"class":496,"line":3088},[494,13321,11595],{"class":650},[494,13323,13324],{"class":496,"line":3094},[494,13325,872],{"emptyLinePlaceholder":871},[494,13327,13328],{"class":496,"line":3100},[494,13329,3039],{"class":500},[494,13331,13332],{"class":496,"line":3106},[494,13333,11927],{"class":650},[494,13335,13336],{"class":496,"line":3112},[494,13337,11932],{"class":650},[494,13339,13340],{"class":496,"line":3118},[494,13341,11937],{"class":650},[494,13343,13344],{"class":496,"line":3124},[494,13345,872],{"emptyLinePlaceholder":871},[494,13347,13348],{"class":496,"line":3130},[494,13349,3085],{"class":500},[494,13351,13352],{"class":496,"line":3135},[494,13353,3097],{"class":650},[494,13355,13356],{"class":496,"line":3141},[494,13357,3103],{"class":650},[494,13359,13360],{"class":496,"line":3160},[494,13361,3109],{"class":650},[494,13363,13364],{"class":496,"line":3180},[494,13365,3115],{"class":650},[494,13367,13368],{"class":496,"line":3192},[494,13369,3121],{"class":650},[494,13371,13372],{"class":496,"line":3205},[494,13373,3127],{"class":650},[494,13375,13376],{"class":496,"line":3210},[494,13377,872],{"emptyLinePlaceholder":871},[494,13379,13380],{"class":496,"line":3216},[494,13381,3138],{"class":500},[494,13383,13384,13387,13389,13391,13393,13395,13397,13399,13401,13403],{"class":496,"line":3237},[494,13385,13386],{"class":650}," --shadow-sm: 0 1px 2px rgba(0",[494,13388,661],{"class":513},[494,13390,3524],{"class":650},[494,13392,661],{"class":513},[494,13394,3524],{"class":650},[494,13396,661],{"class":513},[494,13398,3524],{"class":650},[494,13400,922],{"class":513},[494,13402,1122],{"class":925},[494,13404,1280],{"class":650},[494,13406,13407,13410,13412,13414,13416,13418,13420,13422,13424,13426],{"class":496,"line":3257},[494,13408,13409],{"class":650}," --shadow-md: 0 4px 6px -1px rgba(0",[494,13411,661],{"class":513},[494,13413,3524],{"class":650},[494,13415,661],{"class":513},[494,13417,3524],{"class":650},[494,13419,661],{"class":513},[494,13421,3524],{"class":650},[494,13423,922],{"class":513},[494,13425,1726],{"class":925},[494,13427,1280],{"class":650},[494,13429,13430,13433,13435,13437,13439,13441,13443,13445,13447,13449],{"class":496,"line":3276},[494,13431,13432],{"class":650}," --shadow-lg: 0 10px 25px -5px rgba(0",[494,13434,661],{"class":513},[494,13436,3524],{"class":650},[494,13438,661],{"class":513},[494,13440,3524],{"class":650},[494,13442,661],{"class":513},[494,13444,3524],{"class":650},[494,13446,922],{"class":513},[494,13448,3168],{"class":925},[494,13450,1280],{"class":650},[494,13452,13453,13456,13458,13460,13462,13464,13466,13468,13470,13472],{"class":496,"line":3296},[494,13454,13455],{"class":650}," --shadow-xl: 0 20px 50px -10px rgba(0",[494,13457,661],{"class":513},[494,13459,3524],{"class":650},[494,13461,661],{"class":513},[494,13463,3524],{"class":650},[494,13465,661],{"class":513},[494,13467,3524],{"class":650},[494,13469,922],{"class":513},[494,13471,1011],{"class":925},[494,13473,1280],{"class":650},[494,13475,13476],{"class":496,"line":3301},[494,13477,812],{"class":513},[494,13479,13480],{"class":496,"line":3307},[494,13481,872],{"emptyLinePlaceholder":871},[494,13483,13484],{"class":496,"line":3313},[494,13485,12306],{"class":500},[494,13487,13488],{"class":496,"line":3319},[494,13489,13490],{"class":500}," COMPONENT CLASSES\n",[494,13492,13493],{"class":496,"line":3325},[494,13494,12316],{"class":500},[494,13496,13497,13499,13501],{"class":496,"line":3331},[494,13498,3709],{"class":834},[494,13500,5581],{"class":650},[494,13502,3715],{"class":513},[494,13504,13505],{"class":496,"line":3337},[494,13506,6880],{"class":500},[494,13508,13509,13511,13513],{"class":496,"line":3343},[494,13510,5588],{"class":513},[494,13512,5667],{"class":925},[494,13514,520],{"class":513},[494,13516,13517,13519,13521,13523],{"class":496,"line":3349},[494,13518,4503],{"class":1266},[494,13520,530],{"class":513},[494,13522,5678],{"class":650},[494,13524,847],{"class":513},[494,13526,13527,13529,13531,13533],{"class":496,"line":3354},[494,13528,5685],{"class":1266},[494,13530,530],{"class":513},[494,13532,5690],{"class":650},[494,13534,847],{"class":513},[494,13536,13537,13539,13541,13543],{"class":496,"line":3360},[494,13538,5697],{"class":1266},[494,13540,530],{"class":513},[494,13542,5690],{"class":650},[494,13544,847],{"class":513},[494,13546,13547,13549,13551,13553],{"class":496,"line":3366},[494,13548,6923],{"class":1266},[494,13550,530],{"class":513},[494,13552,6928],{"class":3420},[494,13554,847],{"class":513},[494,13556,13557,13559,13561,13563,13565,13567],{"class":496,"line":3372},[494,13558,3902],{"class":1266},[494,13560,530],{"class":513},[494,13562,1272],{"class":766},[494,13564,770],{"class":513},[494,13566,5716],{"class":650},[494,13568,1280],{"class":513},[494,13570,13571,13573,13575,13577,13579,13582],{"class":496,"line":3378},[494,13572,5723],{"class":1266},[494,13574,530],{"class":513},[494,13576,1272],{"class":766},[494,13578,770],{"class":513},[494,13580,13581],{"class":650},"--font-weight-semibold",[494,13583,1280],{"class":513},[494,13585,13586,13588,13590,13592,13594,13597],{"class":496,"line":3383},[494,13587,5749],{"class":1266},[494,13589,530],{"class":513},[494,13591,1272],{"class":766},[494,13593,770],{"class":513},[494,13595,13596],{"class":650},"--text-sm",[494,13598,1280],{"class":513},[494,13600,13601,13603,13605,13607],{"class":496,"line":3388},[494,13602,6422],{"class":1266},[494,13604,530],{"class":513},[494,13606,5742],{"class":3420},[494,13608,847],{"class":513},[494,13610,13611,13613,13615,13617,13619],{"class":496,"line":3394},[494,13612,5625],{"class":1266},[494,13614,530],{"class":513},[494,13616,5739],{"class":3420},[494,13618,5742],{"class":3420},[494,13620,847],{"class":513},[494,13622,13623,13625,13627,13629,13631,13633],{"class":496,"line":3406},[494,13624,5761],{"class":1266},[494,13626,530],{"class":513},[494,13628,5766],{"class":650},[494,13630,5769],{"class":3420},[494,13632,5772],{"class":650},[494,13634,847],{"class":513},[494,13636,13637,13639,13641,13643],{"class":496,"line":3429},[494,13638,5779],{"class":1266},[494,13640,530],{"class":513},[494,13642,5784],{"class":650},[494,13644,847],{"class":513},[494,13646,13647,13649,13651,13653,13655],{"class":496,"line":3448},[494,13648,7015],{"class":1266},[494,13650,530],{"class":513},[494,13652,7020],{"class":3420},[494,13654,7023],{"class":650},[494,13656,847],{"class":513},[494,13658,13659,13661,13663,13665],{"class":496,"line":3453},[494,13660,7030],{"class":1266},[494,13662,530],{"class":513},[494,13664,7035],{"class":650},[494,13666,847],{"class":513},[494,13668,13669],{"class":496,"line":3458},[494,13670,3768],{"class":513},[494,13672,13673,13675,13677,13679,13681],{"class":496,"line":3468},[494,13674,5588],{"class":513},[494,13676,5667],{"class":925},[494,13678,530],{"class":513},[494,13680,3858],{"class":3857},[494,13682,520],{"class":513},[494,13684,13685,13687,13689,13691,13693,13695,13697,13699],{"class":496,"line":3501},[494,13686,3866],{"class":1266},[494,13688,530],{"class":513},[494,13690,3871],{"class":3420},[494,13692,3874],{"class":650},[494,13694,3877],{"class":766},[494,13696,770],{"class":513},[494,13698,3882],{"class":650},[494,13700,1280],{"class":513},[494,13702,13703,13705,13707,13709],{"class":496,"line":3531},[494,13704,3890],{"class":1266},[494,13706,530],{"class":513},[494,13708,3871],{"class":3420},[494,13710,847],{"class":513},[494,13712,13713],{"class":496,"line":3536},[494,13714,3768],{"class":513},[494,13716,13717,13719,13721,13723,13725],{"class":496,"line":3541},[494,13718,5588],{"class":513},[494,13720,5667],{"class":925},[494,13722,530],{"class":513},[494,13724,7115],{"class":3857},[494,13726,520],{"class":513},[494,13728,13729,13731,13733,13735],{"class":496,"line":3551},[494,13730,7122],{"class":1266},[494,13732,530],{"class":513},[494,13734,7127],{"class":3420},[494,13736,847],{"class":513},[494,13738,13739,13741,13743,13745],{"class":496,"line":3581},[494,13740,5779],{"class":1266},[494,13742,530],{"class":513},[494,13744,7138],{"class":650},[494,13746,847],{"class":513},[494,13748,13749],{"class":496,"line":3610},[494,13750,3768],{"class":513},[494,13752,13753],{"class":496,"line":3615},[494,13754,872],{"emptyLinePlaceholder":871},[494,13756,13757],{"class":496,"line":3620},[494,13758,13759],{"class":500}," \u002F* Button Variants *\u002F\n",[494,13761,13762,13764,13766],{"class":496,"line":3630},[494,13763,5588],{"class":513},[494,13765,7171],{"class":925},[494,13767,520],{"class":513},[494,13769,13770,13772,13774,13776,13778,13780],{"class":496,"line":3661},[494,13771,3821],{"class":1266},[494,13773,530],{"class":513},[494,13775,1272],{"class":766},[494,13777,770],{"class":513},[494,13779,3882],{"class":650},[494,13781,1280],{"class":513},[494,13783,13784,13786,13788,13790],{"class":496,"line":3690},[494,13785,3804],{"class":1266},[494,13787,530],{"class":513},[494,13789,5603],{"class":650},[494,13791,847],{"class":513},[494,13793,13794],{"class":496,"line":3695},[494,13795,3768],{"class":513},[494,13797,13798,13800,13802,13804,13806],{"class":496,"line":3700},[494,13799,5588],{"class":513},[494,13801,7171],{"class":925},[494,13803,530],{"class":513},[494,13805,7212],{"class":3857},[494,13807,520],{"class":513},[494,13809,13810,13812,13814,13816,13818,13820],{"class":496,"line":3706},[494,13811,3821],{"class":1266},[494,13813,530],{"class":513},[494,13815,1272],{"class":766},[494,13817,770],{"class":513},[494,13819,5557],{"class":650},[494,13821,1280],{"class":513},[494,13823,13824],{"class":496,"line":3718},[494,13825,3768],{"class":513},[494,13827,13828,13830,13832,13834,13837],{"class":496,"line":3726},[494,13829,5588],{"class":513},[494,13831,7171],{"class":925},[494,13833,530],{"class":513},[494,13835,13836],{"class":3857},"active",[494,13838,520],{"class":513},[494,13840,13841,13843,13845,13847,13849,13852],{"class":496,"line":3739},[494,13842,3821],{"class":1266},[494,13844,530],{"class":513},[494,13846,1272],{"class":766},[494,13848,770],{"class":513},[494,13850,13851],{"class":650},"--color-primary-700",[494,13853,1280],{"class":513},[494,13855,13856],{"class":496,"line":3752},[494,13857,3768],{"class":513},[494,13859,13860],{"class":496,"line":3765},[494,13861,872],{"emptyLinePlaceholder":871},[494,13863,13864,13866,13868],{"class":496,"line":3771},[494,13865,5588],{"class":513},[494,13867,7244],{"class":925},[494,13869,520],{"class":513},[494,13871,13872,13874,13876,13878],{"class":496,"line":3776},[494,13873,3821],{"class":1266},[494,13875,530],{"class":513},[494,13877,7255],{"class":650},[494,13879,847],{"class":513},[494,13881,13882,13884,13886,13888,13890,13892],{"class":496,"line":3784},[494,13883,3804],{"class":1266},[494,13885,530],{"class":513},[494,13887,1272],{"class":766},[494,13889,770],{"class":513},[494,13891,3882],{"class":650},[494,13893,1280],{"class":513},[494,13895,13896,13898,13900,13902,13904,13906],{"class":496,"line":3801},[494,13897,7276],{"class":1266},[494,13899,530],{"class":513},[494,13901,1272],{"class":766},[494,13903,770],{"class":513},[494,13905,3882],{"class":650},[494,13907,1280],{"class":513},[494,13909,13910],{"class":496,"line":3818},[494,13911,3768],{"class":513},[494,13913,13914,13916,13918,13920,13922],{"class":496,"line":3835},[494,13915,5588],{"class":513},[494,13917,7244],{"class":925},[494,13919,530],{"class":513},[494,13921,7212],{"class":3857},[494,13923,520],{"class":513},[494,13925,13926,13928,13930,13932,13934,13937],{"class":496,"line":3840},[494,13927,3821],{"class":1266},[494,13929,530],{"class":513},[494,13931,1272],{"class":766},[494,13933,770],{"class":513},[494,13935,13936],{"class":650},"--color-primary-50",[494,13938,1280],{"class":513},[494,13940,13941],{"class":496,"line":3845},[494,13942,3768],{"class":513},[494,13944,13945],{"class":496,"line":3851},[494,13946,872],{"emptyLinePlaceholder":871},[494,13948,13949,13951,13953],{"class":496,"line":3863},[494,13950,5588],{"class":513},[494,13952,7341],{"class":925},[494,13954,520],{"class":513},[494,13956,13957,13959,13961,13963],{"class":496,"line":3887},[494,13958,3821],{"class":1266},[494,13960,530],{"class":513},[494,13962,7255],{"class":650},[494,13964,847],{"class":513},[494,13966,13967,13969,13971,13973,13975,13978],{"class":496,"line":3899},[494,13968,3804],{"class":1266},[494,13970,530],{"class":513},[494,13972,1272],{"class":766},[494,13974,770],{"class":513},[494,13976,13977],{"class":650},"--color-neutral-700",[494,13979,1280],{"class":513},[494,13981,13982],{"class":496,"line":3916},[494,13983,3768],{"class":513},[494,13985,13986,13988,13990,13992,13994],{"class":496,"line":3921},[494,13987,5588],{"class":513},[494,13989,7341],{"class":925},[494,13991,530],{"class":513},[494,13993,7212],{"class":3857},[494,13995,520],{"class":513},[494,13997,13998,14000,14002,14004,14006,14009],{"class":496,"line":8496},[494,13999,3821],{"class":1266},[494,14001,530],{"class":513},[494,14003,1272],{"class":766},[494,14005,770],{"class":513},[494,14007,14008],{"class":650},"--color-neutral-100",[494,14010,1280],{"class":513},[494,14012,14013],{"class":496,"line":8536},[494,14014,3768],{"class":513},[494,14016,14017],{"class":496,"line":8558},[494,14018,872],{"emptyLinePlaceholder":871},[494,14020,14021,14023,14026],{"class":496,"line":8563},[494,14022,5588],{"class":513},[494,14024,14025],{"class":925},"btn-danger",[494,14027,520],{"class":513},[494,14029,14030,14032,14034,14036,14038,14041],{"class":496,"line":8568},[494,14031,3821],{"class":1266},[494,14033,530],{"class":513},[494,14035,1272],{"class":766},[494,14037,770],{"class":513},[494,14039,14040],{"class":650},"--color-error-500",[494,14042,1280],{"class":513},[494,14044,14045,14047,14049,14051],{"class":496,"line":8578},[494,14046,3804],{"class":1266},[494,14048,530],{"class":513},[494,14050,5603],{"class":650},[494,14052,847],{"class":513},[494,14054,14055],{"class":496,"line":8615},[494,14056,3768],{"class":513},[494,14058,14059,14061,14063,14065,14067],{"class":496,"line":8635},[494,14060,5588],{"class":513},[494,14062,14025],{"class":925},[494,14064,530],{"class":513},[494,14066,7212],{"class":3857},[494,14068,520],{"class":513},[494,14070,14071,14073,14075,14077,14079,14082],{"class":496,"line":8640},[494,14072,3821],{"class":1266},[494,14074,530],{"class":513},[494,14076,1272],{"class":766},[494,14078,770],{"class":513},[494,14080,14081],{"class":650},"--color-error-600",[494,14083,1280],{"class":513},[494,14085,14087],{"class":496,"line":14086},182,[494,14088,3768],{"class":513},[494,14090,14092],{"class":496,"line":14091},183,[494,14093,872],{"emptyLinePlaceholder":871},[494,14095,14097],{"class":496,"line":14096},184,[494,14098,14099],{"class":500}," \u002F* Button Sizes *\u002F\n",[494,14101,14103,14105,14107],{"class":496,"line":14102},185,[494,14104,5588],{"class":513},[494,14106,7424],{"class":925},[494,14108,520],{"class":513},[494,14110,14112,14114,14116,14118,14120],{"class":496,"line":14111},186,[494,14113,5625],{"class":1266},[494,14115,530],{"class":513},[494,14117,7435],{"class":3420},[494,14119,7438],{"class":3420},[494,14121,847],{"class":513},[494,14123,14125,14127,14129,14131,14133,14136],{"class":496,"line":14124},187,[494,14126,5749],{"class":1266},[494,14128,530],{"class":513},[494,14130,1272],{"class":766},[494,14132,770],{"class":513},[494,14134,14135],{"class":650},"--text-xs",[494,14137,1280],{"class":513},[494,14139,14141,14143,14145,14147,14149,14152],{"class":496,"line":14140},188,[494,14142,3902],{"class":1266},[494,14144,530],{"class":513},[494,14146,1272],{"class":766},[494,14148,770],{"class":513},[494,14150,14151],{"class":650},"--radius-md",[494,14153,1280],{"class":513},[494,14155,14157],{"class":496,"line":14156},189,[494,14158,3768],{"class":513},[494,14160,14162,14164,14166],{"class":496,"line":14161},190,[494,14163,5588],{"class":513},[494,14165,7475],{"class":925},[494,14167,520],{"class":513},[494,14169,14171,14173,14175,14177,14179],{"class":496,"line":14170},191,[494,14172,5625],{"class":1266},[494,14174,530],{"class":513},[494,14176,7438],{"class":3420},[494,14178,5534],{"class":3420},[494,14180,847],{"class":513},[494,14182,14184,14186,14188,14190,14192,14195],{"class":496,"line":14183},192,[494,14185,5749],{"class":1266},[494,14187,530],{"class":513},[494,14189,1272],{"class":766},[494,14191,770],{"class":513},[494,14193,14194],{"class":650},"--text-base",[494,14196,1280],{"class":513},[494,14198,14200,14202,14204,14206,14208,14210],{"class":496,"line":14199},193,[494,14201,3902],{"class":1266},[494,14203,530],{"class":513},[494,14205,1272],{"class":766},[494,14207,770],{"class":513},[494,14209,5618],{"class":650},[494,14211,1280],{"class":513},[494,14213,14215],{"class":496,"line":14214},194,[494,14216,3768],{"class":513},[494,14218,14220],{"class":496,"line":14219},195,[494,14221,872],{"emptyLinePlaceholder":871},[494,14223,14225],{"class":496,"line":14224},196,[494,14226,7563],{"class":500},[494,14228,14230,14232,14234],{"class":496,"line":14229},197,[494,14231,5588],{"class":513},[494,14233,5591],{"class":925},[494,14235,520],{"class":513},[494,14237,14239,14241,14243,14245,14247,14249],{"class":496,"line":14238},198,[494,14240,3821],{"class":1266},[494,14242,530],{"class":513},[494,14244,1272],{"class":766},[494,14246,770],{"class":513},[494,14248,3830],{"class":650},[494,14250,1280],{"class":513},[494,14252,14254,14256,14258,14260,14262,14264,14266,14269],{"class":496,"line":14253},199,[494,14255,7015],{"class":1266},[494,14257,530],{"class":513},[494,14259,7020],{"class":3420},[494,14261,3874],{"class":650},[494,14263,3877],{"class":766},[494,14265,770],{"class":513},[494,14267,14268],{"class":650},"--color-neutral-200",[494,14270,1280],{"class":513},[494,14272,14274,14276,14278,14280,14282,14284],{"class":496,"line":14273},200,[494,14275,3902],{"class":1266},[494,14277,530],{"class":513},[494,14279,1272],{"class":766},[494,14281,770],{"class":513},[494,14283,5618],{"class":650},[494,14285,1280],{"class":513},[494,14287,14289,14291,14293,14295],{"class":496,"line":14288},201,[494,14290,7626],{"class":1266},[494,14292,530],{"class":513},[494,14294,7631],{"class":650},[494,14296,847],{"class":513},[494,14298,14300],{"class":496,"line":14299},202,[494,14301,3768],{"class":513},[494,14303,14305,14307,14310],{"class":496,"line":14304},203,[494,14306,5588],{"class":513},[494,14308,14309],{"class":925},"card-interactive",[494,14311,520],{"class":513},[494,14313,14315,14317,14319,14321,14323,14325,14327,14329,14331,14333],{"class":496,"line":14314},204,[494,14316,5761],{"class":1266},[494,14318,530],{"class":513},[494,14320,7659],{"class":650},[494,14322,7662],{"class":3420},[494,14324,5772],{"class":650},[494,14326,661],{"class":513},[494,14328,7669],{"class":650},[494,14330,7662],{"class":3420},[494,14332,5772],{"class":650},[494,14334,847],{"class":513},[494,14336,14338,14340,14342,14344],{"class":496,"line":14337},205,[494,14339,5779],{"class":1266},[494,14341,530],{"class":513},[494,14343,5784],{"class":650},[494,14345,847],{"class":513},[494,14347,14349],{"class":496,"line":14348},206,[494,14350,3768],{"class":513},[494,14352,14354,14356,14358,14360,14362],{"class":496,"line":14353},207,[494,14355,5588],{"class":513},[494,14357,14309],{"class":925},[494,14359,530],{"class":513},[494,14361,7212],{"class":3857},[494,14363,520],{"class":513},[494,14365,14367,14369,14371,14373,14375,14378],{"class":496,"line":14366},208,[494,14368,5641],{"class":1266},[494,14370,530],{"class":513},[494,14372,1272],{"class":766},[494,14374,770],{"class":513},[494,14376,14377],{"class":650},"--shadow-lg",[494,14379,1280],{"class":513},[494,14381,14383,14385,14387,14389,14391,14393],{"class":496,"line":14382},209,[494,14384,7710],{"class":1266},[494,14386,530],{"class":513},[494,14388,3488],{"class":766},[494,14390,770],{"class":513},[494,14392,7719],{"class":3420},[494,14394,1280],{"class":513},[494,14396,14398],{"class":496,"line":14397},210,[494,14399,3768],{"class":513},[494,14401,14403,14405,14407],{"class":496,"line":14402},211,[494,14404,5588],{"class":513},[494,14406,7741],{"class":925},[494,14408,520],{"class":513},[494,14410,14412,14414,14416,14418,14420,14422],{"class":496,"line":14411},212,[494,14413,5625],{"class":1266},[494,14415,530],{"class":513},[494,14417,5534],{"class":3420},[494,14419,5534],{"class":3420},[494,14421,929],{"class":3420},[494,14423,847],{"class":513},[494,14425,14427],{"class":496,"line":14426},213,[494,14428,3768],{"class":513},[494,14430,14432,14434,14436],{"class":496,"line":14431},214,[494,14433,5588],{"class":513},[494,14435,7768],{"class":925},[494,14437,520],{"class":513},[494,14439,14441,14443,14445,14447],{"class":496,"line":14440},215,[494,14442,5625],{"class":1266},[494,14444,530],{"class":513},[494,14446,5534],{"class":3420},[494,14448,847],{"class":513},[494,14450,14452],{"class":496,"line":14451},216,[494,14453,3768],{"class":513},[494,14455,14457,14459,14461],{"class":496,"line":14456},217,[494,14458,5588],{"class":513},[494,14460,7791],{"class":925},[494,14462,520],{"class":513},[494,14464,14466,14468,14470,14472,14474,14476],{"class":496,"line":14465},218,[494,14467,5625],{"class":1266},[494,14469,530],{"class":513},[494,14471,929],{"class":3420},[494,14473,5534],{"class":3420},[494,14475,5534],{"class":3420},[494,14477,847],{"class":513},[494,14479,14481],{"class":496,"line":14480},219,[494,14482,3768],{"class":513},[494,14484,14486],{"class":496,"line":14485},220,[494,14487,872],{"emptyLinePlaceholder":871},[494,14489,14491],{"class":496,"line":14490},221,[494,14492,7820],{"class":500},[494,14494,14496,14498,14500],{"class":496,"line":14495},222,[494,14497,5588],{"class":513},[494,14499,7827],{"class":925},[494,14501,520],{"class":513},[494,14503,14505,14507,14509,14511],{"class":496,"line":14504},223,[494,14506,4503],{"class":1266},[494,14508,530],{"class":513},[494,14510,4722],{"class":650},[494,14512,847],{"class":513},[494,14514,14516,14518,14520,14522],{"class":496,"line":14515},224,[494,14517,7844],{"class":1266},[494,14519,530],{"class":513},[494,14521,6550],{"class":3420},[494,14523,847],{"class":513},[494,14525,14527,14529,14531,14533,14535],{"class":496,"line":14526},225,[494,14528,5625],{"class":1266},[494,14530,530],{"class":513},[494,14532,5739],{"class":3420},[494,14534,5754],{"class":3420},[494,14536,847],{"class":513},[494,14538,14540,14542,14544,14546,14548,14550],{"class":496,"line":14539},226,[494,14541,5749],{"class":1266},[494,14543,530],{"class":513},[494,14545,1272],{"class":766},[494,14547,770],{"class":513},[494,14549,13596],{"class":650},[494,14551,1280],{"class":513},[494,14553,14555,14557,14559,14561],{"class":496,"line":14554},227,[494,14556,6422],{"class":1266},[494,14558,530],{"class":513},[494,14560,7881],{"class":3420},[494,14562,847],{"class":513},[494,14564,14566,14568,14570,14572,14574,14576],{"class":496,"line":14565},228,[494,14567,3804],{"class":1266},[494,14569,530],{"class":513},[494,14571,1272],{"class":766},[494,14573,770],{"class":513},[494,14575,3813],{"class":650},[494,14577,1280],{"class":513},[494,14579,14581,14583,14585,14587],{"class":496,"line":14580},229,[494,14582,3821],{"class":1266},[494,14584,530],{"class":513},[494,14586,5603],{"class":650},[494,14588,847],{"class":513},[494,14590,14592,14594,14596,14598,14600,14602,14604,14607],{"class":496,"line":14591},230,[494,14593,7015],{"class":1266},[494,14595,530],{"class":513},[494,14597,7020],{"class":3420},[494,14599,3874],{"class":650},[494,14601,3877],{"class":766},[494,14603,770],{"class":513},[494,14605,14606],{"class":650},"--color-neutral-300",[494,14608,1280],{"class":513},[494,14610,14612,14614,14616,14618,14620,14622],{"class":496,"line":14611},231,[494,14613,3902],{"class":1266},[494,14615,530],{"class":513},[494,14617,1272],{"class":766},[494,14619,770],{"class":513},[494,14621,5716],{"class":650},[494,14623,1280],{"class":513},[494,14625,14627,14629,14631,14633,14635,14637,14639,14641,14643,14645],{"class":496,"line":14626},232,[494,14628,5761],{"class":1266},[494,14630,530],{"class":513},[494,14632,7949],{"class":650},[494,14634,5769],{"class":3420},[494,14636,5772],{"class":650},[494,14638,661],{"class":513},[494,14640,7659],{"class":650},[494,14642,5769],{"class":3420},[494,14644,5772],{"class":650},[494,14646,847],{"class":513},[494,14648,14650],{"class":496,"line":14649},233,[494,14651,3768],{"class":513},[494,14653,14655,14657,14659,14661,14663],{"class":496,"line":14654},234,[494,14656,5588],{"class":513},[494,14658,7827],{"class":925},[494,14660,4493],{"class":513},[494,14662,7982],{"class":3857},[494,14664,520],{"class":513},[494,14666,14668,14670,14672,14674,14676,14679],{"class":496,"line":14667},235,[494,14669,3804],{"class":1266},[494,14671,530],{"class":513},[494,14673,1272],{"class":766},[494,14675,770],{"class":513},[494,14677,14678],{"class":650},"--color-neutral-400",[494,14680,1280],{"class":513},[494,14682,14684],{"class":496,"line":14683},236,[494,14685,3768],{"class":513},[494,14687,14689,14691,14693,14695,14697],{"class":496,"line":14688},237,[494,14690,5588],{"class":513},[494,14692,7827],{"class":925},[494,14694,530],{"class":513},[494,14696,8023],{"class":3857},[494,14698,520],{"class":513},[494,14700,14702,14704,14706,14708],{"class":496,"line":14701},238,[494,14703,3866],{"class":1266},[494,14705,530],{"class":513},[494,14707,4508],{"class":650},[494,14709,847],{"class":513},[494,14711,14713,14715,14717,14719,14721,14723],{"class":496,"line":14712},239,[494,14714,7276],{"class":1266},[494,14716,530],{"class":513},[494,14718,1272],{"class":766},[494,14720,770],{"class":513},[494,14722,3882],{"class":650},[494,14724,1280],{"class":513},[494,14726,14728,14730,14732,14734,14736,14738,14740,14742,14744,14746,14748,14750,14752,14754,14756,14758,14761,14763,14765],{"class":496,"line":14727},240,[494,14729,5641],{"class":1266},[494,14731,530],{"class":513},[494,14733,929],{"class":3420},[494,14735,929],{"class":3420},[494,14737,929],{"class":3420},[494,14739,8064],{"class":3420},[494,14741,8360],{"class":766},[494,14743,770],{"class":513},[494,14745,8365],{"class":3400},[494,14747,7993],{"class":3400},[494,14749,661],{"class":513},[494,14751,1272],{"class":766},[494,14753,770],{"class":513},[494,14755,3882],{"class":650},[494,14757,780],{"class":513},[494,14759,14760],{"class":3420}," 25%",[494,14762,661],{"class":513},[494,14764,7255],{"class":650},[494,14766,1280],{"class":513},[494,14768,14770],{"class":496,"line":14769},241,[494,14771,3768],{"class":513},[494,14773,14775,14777,14779],{"class":496,"line":14774},242,[494,14776,5588],{"class":513},[494,14778,8157],{"class":925},[494,14780,520],{"class":513},[494,14782,14784,14786,14788,14790,14792,14794],{"class":496,"line":14783},243,[494,14785,7276],{"class":1266},[494,14787,530],{"class":513},[494,14789,1272],{"class":766},[494,14791,770],{"class":513},[494,14793,14040],{"class":650},[494,14795,1280],{"class":513},[494,14797,14799],{"class":496,"line":14798},244,[494,14800,3768],{"class":513},[494,14802,14804,14806,14808,14810,14812],{"class":496,"line":14803},245,[494,14805,5588],{"class":513},[494,14807,8157],{"class":925},[494,14809,530],{"class":513},[494,14811,8023],{"class":3857},[494,14813,520],{"class":513},[494,14815,14817,14819,14821,14823,14825,14827,14829,14831,14833,14835,14837,14839,14841,14843,14845,14847,14849,14851,14853],{"class":496,"line":14816},246,[494,14818,5641],{"class":1266},[494,14820,530],{"class":513},[494,14822,929],{"class":3420},[494,14824,929],{"class":3420},[494,14826,929],{"class":3420},[494,14828,8064],{"class":3420},[494,14830,8360],{"class":766},[494,14832,770],{"class":513},[494,14834,8365],{"class":3400},[494,14836,7993],{"class":3400},[494,14838,661],{"class":513},[494,14840,1272],{"class":766},[494,14842,770],{"class":513},[494,14844,14040],{"class":650},[494,14846,780],{"class":513},[494,14848,14760],{"class":3420},[494,14850,661],{"class":513},[494,14852,7255],{"class":650},[494,14854,1280],{"class":513},[494,14856,14858],{"class":496,"line":14857},247,[494,14859,3768],{"class":513},[494,14861,14863],{"class":496,"line":14862},248,[494,14864,872],{"emptyLinePlaceholder":871},[494,14866,14868],{"class":496,"line":14867},249,[494,14869,8241],{"class":500},[494,14871,14873,14875,14877],{"class":496,"line":14872},250,[494,14874,5588],{"class":513},[494,14876,8248],{"class":925},[494,14878,520],{"class":513},[494,14880,14882,14884,14886,14888],{"class":496,"line":14881},251,[494,14883,4503],{"class":1266},[494,14885,530],{"class":513},[494,14887,5678],{"class":650},[494,14889,847],{"class":513},[494,14891,14893,14895,14897,14899],{"class":496,"line":14892},252,[494,14894,5685],{"class":1266},[494,14896,530],{"class":513},[494,14898,5690],{"class":650},[494,14900,847],{"class":513},[494,14902,14904,14906,14908,14910,14912],{"class":496,"line":14903},253,[494,14905,5625],{"class":1266},[494,14907,530],{"class":513},[494,14909,8279],{"class":3420},[494,14911,7438],{"class":3420},[494,14913,847],{"class":513},[494,14915,14917,14919,14921,14923,14925,14927],{"class":496,"line":14916},254,[494,14918,5749],{"class":1266},[494,14920,530],{"class":513},[494,14922,1272],{"class":766},[494,14924,770],{"class":513},[494,14926,14135],{"class":650},[494,14928,1280],{"class":513},[494,14930,14932,14934,14936,14938,14940,14943],{"class":496,"line":14931},255,[494,14933,5723],{"class":1266},[494,14935,530],{"class":513},[494,14937,1272],{"class":766},[494,14939,770],{"class":513},[494,14941,14942],{"class":650},"--font-weight-medium",[494,14944,1280],{"class":513},[494,14946,14948,14950,14952,14954],{"class":496,"line":14947},256,[494,14949,6422],{"class":1266},[494,14951,530],{"class":513},[494,14953,5742],{"class":3420},[494,14955,847],{"class":513},[494,14957,14959,14961,14963,14965,14967,14970],{"class":496,"line":14958},257,[494,14960,3902],{"class":1266},[494,14962,530],{"class":513},[494,14964,1272],{"class":766},[494,14966,770],{"class":513},[494,14968,14969],{"class":650},"--radius-full",[494,14971,1280],{"class":513},[494,14973,14975],{"class":496,"line":14974},258,[494,14976,3768],{"class":513},[494,14978,14980,14982,14984],{"class":496,"line":14979},259,[494,14981,5588],{"class":513},[494,14983,8349],{"class":925},[494,14985,520],{"class":513},[494,14987,14989,14991,14993,14995,14997,14999,15001,15003,15005,15007,15009,15011,15013,15015,15017],{"class":496,"line":14988},260,[494,14990,3821],{"class":1266},[494,14992,530],{"class":513},[494,14994,8360],{"class":766},[494,14996,770],{"class":513},[494,14998,8365],{"class":3400},[494,15000,7993],{"class":3400},[494,15002,661],{"class":513},[494,15004,1272],{"class":766},[494,15006,770],{"class":513},[494,15008,3882],{"class":650},[494,15010,780],{"class":513},[494,15012,8380],{"class":3420},[494,15014,661],{"class":513},[494,15016,7255],{"class":650},[494,15018,1280],{"class":513},[494,15020,15022,15024,15026,15028,15030,15032],{"class":496,"line":15021},261,[494,15023,3804],{"class":1266},[494,15025,530],{"class":513},[494,15027,1272],{"class":766},[494,15029,770],{"class":513},[494,15031,13851],{"class":650},[494,15033,1280],{"class":513},[494,15035,15037],{"class":496,"line":15036},262,[494,15038,3768],{"class":513},[494,15040,15042,15044,15046],{"class":496,"line":15041},263,[494,15043,5588],{"class":513},[494,15045,8415],{"class":925},[494,15047,520],{"class":513},[494,15049,15051,15053,15055,15057,15059,15061,15063,15065,15067,15069,15072,15074,15076,15078,15080],{"class":496,"line":15050},264,[494,15052,3821],{"class":1266},[494,15054,530],{"class":513},[494,15056,8360],{"class":766},[494,15058,770],{"class":513},[494,15060,8365],{"class":3400},[494,15062,7993],{"class":3400},[494,15064,661],{"class":513},[494,15066,1272],{"class":766},[494,15068,770],{"class":513},[494,15070,15071],{"class":650},"--color-success-500",[494,15073,780],{"class":513},[494,15075,8380],{"class":3420},[494,15077,661],{"class":513},[494,15079,7255],{"class":650},[494,15081,1280],{"class":513},[494,15083,15085,15087,15089,15091,15093,15096],{"class":496,"line":15084},265,[494,15086,3804],{"class":1266},[494,15088,530],{"class":513},[494,15090,1272],{"class":766},[494,15092,770],{"class":513},[494,15094,15095],{"class":650},"--color-success-700",[494,15097,1280],{"class":513},[494,15099,15101],{"class":496,"line":15100},266,[494,15102,3768],{"class":513},[494,15104,15106,15108,15110],{"class":496,"line":15105},267,[494,15107,5588],{"class":513},[494,15109,8491],{"class":925},[494,15111,520],{"class":513},[494,15113,15115,15117,15119,15121,15123,15125,15127,15129,15131,15133,15136,15138,15140,15142,15144],{"class":496,"line":15114},268,[494,15116,3821],{"class":1266},[494,15118,530],{"class":513},[494,15120,8360],{"class":766},[494,15122,770],{"class":513},[494,15124,8365],{"class":3400},[494,15126,7993],{"class":3400},[494,15128,661],{"class":513},[494,15130,1272],{"class":766},[494,15132,770],{"class":513},[494,15134,15135],{"class":650},"--color-warning-500",[494,15137,780],{"class":513},[494,15139,8380],{"class":3420},[494,15141,661],{"class":513},[494,15143,7255],{"class":650},[494,15145,1280],{"class":513},[494,15147,15149,15151,15153,15155,15157,15160],{"class":496,"line":15148},269,[494,15150,3804],{"class":1266},[494,15152,530],{"class":513},[494,15154,1272],{"class":766},[494,15156,770],{"class":513},[494,15158,15159],{"class":650},"--color-warning-700",[494,15161,1280],{"class":513},[494,15163,15165],{"class":496,"line":15164},270,[494,15166,3768],{"class":513},[494,15168,15170,15172,15174],{"class":496,"line":15169},271,[494,15171,5588],{"class":513},[494,15173,8573],{"class":925},[494,15175,520],{"class":513},[494,15177,15179,15181,15183,15185,15187,15189,15191,15193,15195,15197,15199,15201,15203,15205,15207],{"class":496,"line":15178},272,[494,15180,3821],{"class":1266},[494,15182,530],{"class":513},[494,15184,8360],{"class":766},[494,15186,770],{"class":513},[494,15188,8365],{"class":3400},[494,15190,7993],{"class":3400},[494,15192,661],{"class":513},[494,15194,1272],{"class":766},[494,15196,770],{"class":513},[494,15198,14040],{"class":650},[494,15200,780],{"class":513},[494,15202,8380],{"class":3420},[494,15204,661],{"class":513},[494,15206,7255],{"class":650},[494,15208,1280],{"class":513},[494,15210,15212,15214,15216,15218,15220,15223],{"class":496,"line":15211},273,[494,15213,3804],{"class":1266},[494,15215,530],{"class":513},[494,15217,1272],{"class":766},[494,15219,770],{"class":513},[494,15221,15222],{"class":650},"--color-error-700",[494,15224,1280],{"class":513},[494,15226,15228],{"class":496,"line":15227},274,[494,15229,3768],{"class":513},[494,15231,15233,15235,15238],{"class":496,"line":15232},275,[494,15234,5588],{"class":513},[494,15236,15237],{"class":925},"badge-info",[494,15239,520],{"class":513},[494,15241,15243,15245,15247,15249,15251,15253,15255,15257,15259,15261,15264,15266,15268,15270,15272],{"class":496,"line":15242},276,[494,15244,3821],{"class":1266},[494,15246,530],{"class":513},[494,15248,8360],{"class":766},[494,15250,770],{"class":513},[494,15252,8365],{"class":3400},[494,15254,7993],{"class":3400},[494,15256,661],{"class":513},[494,15258,1272],{"class":766},[494,15260,770],{"class":513},[494,15262,15263],{"class":650},"--color-info-500",[494,15265,780],{"class":513},[494,15267,8380],{"class":3420},[494,15269,661],{"class":513},[494,15271,7255],{"class":650},[494,15273,1280],{"class":513},[494,15275,15277,15279,15281,15283,15285,15288],{"class":496,"line":15276},277,[494,15278,3804],{"class":1266},[494,15280,530],{"class":513},[494,15282,1272],{"class":766},[494,15284,770],{"class":513},[494,15286,15287],{"class":650},"--color-info-700",[494,15289,1280],{"class":513},[494,15291,15293],{"class":496,"line":15292},278,[494,15294,3768],{"class":513},[494,15296,15298],{"class":496,"line":15297},279,[494,15299,812],{"class":513},[494,15301,15303],{"class":496,"line":15302},280,[494,15304,872],{"emptyLinePlaceholder":871},[494,15306,15308],{"class":496,"line":15307},281,[494,15309,12306],{"class":500},[494,15311,15313],{"class":496,"line":15312},282,[494,15314,15315],{"class":500}," BASE STYLES\n",[494,15317,15319],{"class":496,"line":15318},283,[494,15320,12316],{"class":500},[494,15322,15324,15326,15328],{"class":496,"line":15323},284,[494,15325,3709],{"class":834},[494,15327,3712],{"class":650},[494,15329,3715],{"class":513},[494,15331,15333,15335],{"class":496,"line":15332},285,[494,15334,3721],{"class":925},[494,15336,520],{"class":513},[494,15338,15340,15342,15344,15346],{"class":496,"line":15339},286,[494,15341,3729],{"class":1266},[494,15343,530],{"class":513},[494,15345,3734],{"class":650},[494,15347,847],{"class":513},[494,15349,15351,15353,15355,15357],{"class":496,"line":15350},287,[494,15352,3742],{"class":925},[494,15354,530],{"class":513},[494,15356,3747],{"class":650},[494,15358,847],{"class":513},[494,15360,15362],{"class":496,"line":15361},288,[494,15363,3768],{"class":513},[494,15365,15367,15369],{"class":496,"line":15366},289,[494,15368,3779],{"class":925},[494,15370,520],{"class":513},[494,15372,15374,15376,15378,15380,15382,15384],{"class":496,"line":15373},290,[494,15375,3787],{"class":1266},[494,15377,530],{"class":513},[494,15379,1272],{"class":766},[494,15381,770],{"class":513},[494,15383,3796],{"class":650},[494,15385,1280],{"class":513},[494,15387,15389,15391,15393,15395,15397,15399],{"class":496,"line":15388},291,[494,15390,3804],{"class":1266},[494,15392,530],{"class":513},[494,15394,1272],{"class":766},[494,15396,770],{"class":513},[494,15398,3813],{"class":650},[494,15400,1280],{"class":513},[494,15402,15404,15406,15408,15410,15412,15414],{"class":496,"line":15403},292,[494,15405,3821],{"class":1266},[494,15407,530],{"class":513},[494,15409,1272],{"class":766},[494,15411,770],{"class":513},[494,15413,3830],{"class":650},[494,15415,1280],{"class":513},[494,15417,15419,15421,15423,15425],{"class":496,"line":15418},293,[494,15420,6396],{"class":1266},[494,15422,530],{"class":513},[494,15424,6412],{"class":3420},[494,15426,847],{"class":513},[494,15428,15430],{"class":496,"line":15429},294,[494,15431,3768],{"class":513},[494,15433,15435,15437,15439],{"class":496,"line":15434},295,[494,15436,3854],{"class":513},[494,15438,3858],{"class":3857},[494,15440,520],{"class":513},[494,15442,15444,15446,15448,15450,15452,15454,15456,15458],{"class":496,"line":15443},296,[494,15445,3866],{"class":1266},[494,15447,530],{"class":513},[494,15449,3871],{"class":3420},[494,15451,3874],{"class":650},[494,15453,3877],{"class":766},[494,15455,770],{"class":513},[494,15457,3882],{"class":650},[494,15459,1280],{"class":513},[494,15461,15463,15465,15467,15469],{"class":496,"line":15462},297,[494,15464,3890],{"class":1266},[494,15466,530],{"class":513},[494,15468,3871],{"class":3420},[494,15470,847],{"class":513},[494,15472,15474,15476,15478,15480,15482,15484],{"class":496,"line":15473},298,[494,15475,3902],{"class":1266},[494,15477,530],{"class":513},[494,15479,1272],{"class":766},[494,15481,770],{"class":513},[494,15483,3911],{"class":650},[494,15485,1280],{"class":513},[494,15487,15489],{"class":496,"line":15488},299,[494,15490,3768],{"class":513},[494,15492,15494],{"class":496,"line":15493},300,[494,15495,812],{"class":513},[485,15497,15499],{"className":4521,"code":15498,"language":4523,"meta":490,"style":490},"\u003C!-- HTML Demo cho Design System -->\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"vi\">\n\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>Design System Demo - Tailwind CSS v4\u003C\u002Ftitle>\n \u003Clink rel=\"stylesheet\" href=\"full-design-system.css\">\n\u003C\u002Fhead>\n\u003Cbody class=\"p-4 md:p-8\">\n\n \u003Cdiv class=\"max-w-4xl mx-auto space-y-12\">\n\n \u003C!-- Header -->\n \u003Cdiv>\n \u003Ch1 class=\"text-4xl font-bold text-neutral-900 mb-2\">Design System Demo\u003C\u002Fh1>\n \u003Cp class=\"text-neutral-600\">Tất cả component được xây dựng từ tokens trong @theme\u003C\u002Fp>\n \u003C\u002Fdiv>\n\n \u003C!-- Buttons Section -->\n \u003Csection>\n \u003Ch2 class=\"text-xl font-semibold text-neutral-900 mb-4 pb-2 border-b border-neutral-200\">Buttons\u003C\u002Fh2>\n \n \u003Cdiv class=\"space-y-4\">\n \u003C!-- Variants -->\n \u003Cdiv>\n \u003Cp class=\"text-sm text-neutral-500 mb-2\">Variants\u003C\u002Fp>\n \u003Cdiv class=\"flex flex-wrap gap-3\">\n \u003Cbutton class=\"btn btn-primary\">Primary\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-secondary\">Secondary\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-ghost\">Ghost\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-danger\">Danger\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-primary\" disabled>Disabled\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Sizes -->\n \u003Cdiv>\n \u003Cp class=\"text-sm text-neutral-500 mb-2\">Sizes\u003C\u002Fp>\n \u003Cdiv class=\"flex flex-wrap items-center gap-3\">\n \u003Cbutton class=\"btn btn-primary btn-sm\">Small\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-primary\">Default\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-primary btn-lg\">Large\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Cards Section -->\n \u003Csection>\n \u003Ch2 class=\"text-xl font-semibold text-neutral-900 mb-4 pb-2 border-b border-neutral-200\">Cards\u003C\u002Fh2>\n \n \u003Cdiv class=\"grid grid-cols-1 md:grid-cols-3 gap-4\">\n \u003Cdiv class=\"card card-interactive\">\n \u003Cdiv class=\"card-body\">\n \u003Cspan class=\"badge badge-primary mb-3\">New\u003C\u002Fspan>\n \u003Ch3 class=\"font-semibold text-lg text-neutral-900 mb-1\">Basic Card\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-neutral-600\">Simple card with badge and interactive hover.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"card\">\n \u003Cdiv class=\"card-header\">\n \u003Ch3 class=\"font-semibold text-lg text-neutral-900\">Card with Header\u003C\u002Fh3>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"card-body\">\n \u003Cp class=\"text-sm text-neutral-600\">Card có header + body + footer rõ ràng.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"card-footer flex justify-end\">\n \u003Cbutton class=\"btn btn-ghost btn-sm\">Cancel\u003C\u002Fbutton>\n \u003Cbutton class=\"btn btn-primary btn-sm\">Save\u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003Cdiv class=\"card p-6 text-center\">\n \u003Cdiv class=\"w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3\">\n \u003Cspan class=\"text-primary-600 text-xl\">✓\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Ch3 class=\"font-semibold text-neutral-900 mb-1\">Success Card\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-neutral-600\">Centered content with icon.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Inputs Section -->\n \u003Csection>\n \u003Ch2 class=\"text-xl font-semibold text-neutral-900 mb-4 pb-2 border-b border-neutral-200\">Inputs\u003C\u002Fh2>\n \n \u003Cdiv class=\"max-w-md space-y-4\">\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-neutral-700 mb-1.5\">Email address\u003C\u002Flabel>\n \u003Cinput type=\"email\" class=\"input\" placeholder=\"you@example.com\">\n \u003C\u002Fdiv>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-neutral-700 mb-1.5\">Password\u003C\u002Flabel>\n \u003Cinput type=\"password\" class=\"input\" placeholder=\"Enter your password\">\n \u003C\u002Fdiv>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-neutral-700 mb-1.5\">Error State\u003C\u002Flabel>\n \u003Cinput type=\"text\" class=\"input input-error\" value=\"invalid-value\">\n \u003Cp class=\"text-error-600 text-xs mt-1.5\">Please enter a valid value.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv>\n \u003Clabel class=\"block text-sm font-medium text-neutral-700 mb-1.5\">Disabled\u003C\u002Flabel>\n \u003Cinput type=\"text\" class=\"input\" placeholder=\"Cannot edit this field\" disabled>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Badges Section -->\n \u003Csection>\n \u003Ch2 class=\"text-xl font-semibold text-neutral-900 mb-4 pb-2 border-b border-neutral-200\">Badges\u003C\u002Fh2>\n \u003Cdiv class=\"flex flex-wrap gap-2\">\n \u003Cspan class=\"badge badge-primary\">Primary\u003C\u002Fspan>\n \u003Cspan class=\"badge badge-success\">Success\u003C\u002Fspan>\n \u003Cspan class=\"badge badge-warning\">Warning\u003C\u002Fspan>\n \u003Cspan class=\"badge badge-error\">Error\u003C\u002Fspan>\n \u003Cspan class=\"badge badge-info\">Info\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C!-- Color Palette -->\n \u003Csection>\n \u003Ch2 class=\"text-xl font-semibold text-neutral-900 mb-4 pb-2 border-b border-neutral-200\">Color Palette\u003C\u002Fh2>\n \n \u003Cdiv class=\"space-y-4\">\n \u003C!-- Primary -->\n \u003Cdiv>\n \u003Cp class=\"text-sm font-medium text-neutral-600 mb-2\">Primary\u003C\u002Fp>\n \u003Cdiv class=\"flex gap-1\">\n \u003Cdiv class=\"w-10 h-10 rounded bg-primary-50\" title=\"50\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-primary-100\" title=\"100\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-primary-200\" title=\"200\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-primary-300\" title=\"300\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-primary-400\" title=\"400\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-primary-500 ring-2 ring-offset-1 ring-black\" title=\"500 BASE\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-primary-600\" title=\"600\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-primary-700\" title=\"700\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-primary-800\" title=\"800\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-primary-900\" title=\"900\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Neutral -->\n \u003Cdiv>\n \u003Cp class=\"text-sm font-medium text-neutral-600 mb-2\">Neutral\u003C\u002Fp>\n \u003Cdiv class=\"flex gap-1\">\n \u003Cdiv class=\"w-10 h-10 rounded bg-neutral-50 border border-neutral-200\" title=\"50\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-neutral-100\" title=\"100\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-neutral-200\" title=\"200\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-neutral-300\" title=\"300\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-neutral-400\" title=\"400\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-neutral-500 ring-2 ring-offset-1 ring-black\" title=\"500\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-neutral-600\" title=\"600\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-neutral-700\" title=\"700\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-neutral-800\" title=\"800\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-neutral-900\" title=\"900\">\u003C\u002Fdiv>\n \u003Cdiv class=\"w-10 h-10 rounded bg-neutral-950\" title=\"950\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Semantic -->\n \u003Cdiv>\n \u003Cp class=\"text-sm font-medium text-neutral-600 mb-2\">Semantic\u003C\u002Fp>\n \u003Cdiv class=\"flex gap-3\">\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003Cdiv class=\"w-8 h-8 rounded bg-success-500\">\u003C\u002Fdiv>\n \u003Cspan class=\"text-xs text-neutral-500\">Success\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003Cdiv class=\"w-8 h-8 rounded bg-warning-500\">\u003C\u002Fdiv>\n \u003Cspan class=\"text-xs text-neutral-500\">Warning\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003Cdiv class=\"w-8 h-8 rounded bg-error-500\">\u003C\u002Fdiv>\n \u003Cspan class=\"text-xs text-neutral-500\">Error\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003Cdiv class=\"w-8 h-8 rounded bg-info-500\">\u003C\u002Fdiv>\n \u003Cspan class=\"text-xs text-neutral-500\">Info\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fsection>\n\n \u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[441,15500,15501,15506,15516,15534,15542,15560,15588,15605,15634,15642,15661,15665,15684,15688,15693,15701,15729,15756,15764,15768,15773,15781,15808,15813,15832,15837,15845,15873,15891,15917,15943,15969,15997,16025,16033,16041,16045,16050,16058,16085,16104,16130,16157,16183,16191,16199,16207,16215,16219,16224,16232,16258,16262,16281,16300,16318,16346,16374,16402,16410,16418,16422,16440,16458,16486,16494,16512,16539,16547,16566,16593,16620,16628,16636,16640,16659,16678,16706,16714,16742,16769,16777,16785,16793,16797,16802,16810,16836,16840,16859,16867,16895,16934,16942,16950,16977,17017,17025,17033,17059,17098,17126,17134,17142,17168,17209,17217,17225,17233,17237,17242,17250,17276,17294,17320,17346,17372,17398,17426,17434,17442,17446,17451,17459,17486,17490,17508,17513,17521,17548,17567,17602,17636,17670,17704,17738,17772,17806,17840,17874,17908,17916,17924,17928,17933,17941,17968,17986,18019,18052,18085,18118,18151,18185,18218,18251,18284,18317,18351,18359,18367,18371,18376,18384,18411,18430,18449,18473,18500,18509,18527,18550,18576,18584,18602,18625,18651,18659,18677,18700,18726,18734,18742,18750,18758,18766,18770,18778,18782,18790],{"__ignoreMap":490},[494,15502,15503],{"class":496,"line":497},[494,15504,15505],{"class":500},"\u003C!-- HTML Demo cho Design System -->\n",[494,15507,15508,15510,15512,15514],{"class":496,"line":504},[494,15509,8657],{"class":513},[494,15511,8660],{"class":526},[494,15513,8663],{"class":3857},[494,15515,4565],{"class":513},[494,15517,15518,15520,15522,15524,15526,15528,15530,15532],{"class":496,"line":510},[494,15519,4535],{"class":513},[494,15521,4523],{"class":526},[494,15523,8674],{"class":3857},[494,15525,4544],{"class":513},[494,15527,844],{"class":513},[494,15529,8681],{"class":576},[494,15531,844],{"class":513},[494,15533,4565],{"class":513},[494,15535,15536,15538,15540],{"class":496,"line":523},[494,15537,4535],{"class":513},[494,15539,8692],{"class":526},[494,15541,4565],{"class":513},[494,15543,15544,15546,15548,15550,15552,15554,15556,15558],{"class":496,"line":535},[494,15545,8699],{"class":513},[494,15547,8702],{"class":526},[494,15549,8705],{"class":3857},[494,15551,4544],{"class":513},[494,15553,844],{"class":513},[494,15555,8712],{"class":576},[494,15557,844],{"class":513},[494,15559,4565],{"class":513},[494,15561,15562,15564,15566,15568,15570,15572,15574,15576,15578,15580,15582,15584,15586],{"class":496,"line":545},[494,15563,8699],{"class":513},[494,15565,8702],{"class":526},[494,15567,8725],{"class":3857},[494,15569,4544],{"class":513},[494,15571,844],{"class":513},[494,15573,8732],{"class":576},[494,15575,844],{"class":513},[494,15577,8737],{"class":3857},[494,15579,4544],{"class":513},[494,15581,844],{"class":513},[494,15583,8744],{"class":576},[494,15585,844],{"class":513},[494,15587,4565],{"class":513},[494,15589,15590,15592,15594,15596,15599,15601,15603],{"class":496,"line":555},[494,15591,8699],{"class":513},[494,15593,8755],{"class":526},[494,15595,4554],{"class":513},[494,15597,15598],{"class":650},"Design System Demo - Tailwind CSS v4",[494,15600,4560],{"class":513},[494,15602,8755],{"class":526},[494,15604,4565],{"class":513},[494,15606,15607,15609,15611,15613,15615,15617,15619,15621,15623,15625,15627,15630,15632],{"class":496,"line":565},[494,15608,8699],{"class":513},[494,15610,8773],{"class":526},[494,15612,8776],{"class":3857},[494,15614,4544],{"class":513},[494,15616,844],{"class":513},[494,15618,8783],{"class":576},[494,15620,844],{"class":513},[494,15622,8788],{"class":3857},[494,15624,4544],{"class":513},[494,15626,844],{"class":513},[494,15628,15629],{"class":576},"full-design-system.css",[494,15631,844],{"class":513},[494,15633,4565],{"class":513},[494,15635,15636,15638,15640],{"class":496,"line":586},[494,15637,4560],{"class":513},[494,15639,8692],{"class":526},[494,15641,4565],{"class":513},[494,15643,15644,15646,15648,15650,15652,15654,15657,15659],{"class":496,"line":603},[494,15645,4535],{"class":513},[494,15647,8814],{"class":526},[494,15649,4541],{"class":3857},[494,15651,4544],{"class":513},[494,15653,844],{"class":513},[494,15655,15656],{"class":576},"p-4 md:p-8",[494,15658,844],{"class":513},[494,15660,4565],{"class":513},[494,15662,15663],{"class":496,"line":620},[494,15664,872],{"emptyLinePlaceholder":871},[494,15666,15667,15669,15671,15673,15675,15677,15680,15682],{"class":496,"line":626},[494,15668,8699],{"class":513},[494,15670,4572],{"class":526},[494,15672,4541],{"class":3857},[494,15674,4544],{"class":513},[494,15676,844],{"class":513},[494,15678,15679],{"class":576},"max-w-4xl mx-auto space-y-12",[494,15681,844],{"class":513},[494,15683,4565],{"class":513},[494,15685,15686],{"class":496,"line":632},[494,15687,872],{"emptyLinePlaceholder":871},[494,15689,15690],{"class":496,"line":642},[494,15691,15692],{"class":500}," \u003C!-- Header -->\n",[494,15694,15695,15697,15699],{"class":496,"line":676},[494,15696,8864],{"class":513},[494,15698,4572],{"class":526},[494,15700,4565],{"class":513},[494,15702,15703,15705,15707,15709,15711,15713,15716,15718,15720,15723,15725,15727],{"class":496,"line":681},[494,15704,8874],{"class":513},[494,15706,4538],{"class":526},[494,15708,4541],{"class":3857},[494,15710,4544],{"class":513},[494,15712,844],{"class":513},[494,15714,15715],{"class":576},"text-4xl font-bold text-neutral-900 mb-2",[494,15717,844],{"class":513},[494,15719,4554],{"class":513},[494,15721,15722],{"class":650},"Design System Demo",[494,15724,4560],{"class":513},[494,15726,4538],{"class":526},[494,15728,4565],{"class":513},[494,15730,15731,15733,15735,15737,15739,15741,15743,15745,15747,15750,15752,15754],{"class":496,"line":691},[494,15732,8874],{"class":513},[494,15734,432],{"class":526},[494,15736,4541],{"class":3857},[494,15738,4544],{"class":513},[494,15740,844],{"class":513},[494,15742,9307],{"class":576},[494,15744,844],{"class":513},[494,15746,4554],{"class":513},[494,15748,15749],{"class":650},"Tất cả component được xây dựng từ tokens trong @theme",[494,15751,4560],{"class":513},[494,15753,432],{"class":526},[494,15755,4565],{"class":513},[494,15757,15758,15760,15762],{"class":496,"line":713},[494,15759,9131],{"class":513},[494,15761,4572],{"class":526},[494,15763,4565],{"class":513},[494,15765,15766],{"class":496,"line":734},[494,15767,872],{"emptyLinePlaceholder":871},[494,15769,15770],{"class":496,"line":740},[494,15771,15772],{"class":500}," \u003C!-- Buttons Section -->\n",[494,15774,15775,15777,15779],{"class":496,"line":746},[494,15776,8864],{"class":513},[494,15778,8867],{"class":526},[494,15780,4565],{"class":513},[494,15782,15783,15785,15787,15789,15791,15793,15796,15798,15800,15802,15804,15806],{"class":496,"line":752},[494,15784,8874],{"class":513},[494,15786,427],{"class":526},[494,15788,4541],{"class":3857},[494,15790,4544],{"class":513},[494,15792,844],{"class":513},[494,15794,15795],{"class":576},"text-xl font-semibold text-neutral-900 mb-4 pb-2 border-b border-neutral-200",[494,15797,844],{"class":513},[494,15799,4554],{"class":513},[494,15801,8892],{"class":650},[494,15803,4560],{"class":513},[494,15805,427],{"class":526},[494,15807,4565],{"class":513},[494,15809,15810],{"class":496,"line":763},[494,15811,15812],{"class":650}," \n",[494,15814,15815,15817,15819,15821,15823,15825,15828,15830],{"class":496,"line":785},[494,15816,8874],{"class":513},[494,15818,4572],{"class":526},[494,15820,4541],{"class":3857},[494,15822,4544],{"class":513},[494,15824,844],{"class":513},[494,15826,15827],{"class":576},"space-y-4",[494,15829,844],{"class":513},[494,15831,4565],{"class":513},[494,15833,15834],{"class":496,"line":803},[494,15835,15836],{"class":500}," \u003C!-- Variants -->\n",[494,15838,15839,15841,15843],{"class":496,"line":809},[494,15840,8922],{"class":513},[494,15842,4572],{"class":526},[494,15844,4565],{"class":513},[494,15846,15847,15849,15851,15853,15855,15857,15860,15862,15864,15867,15869,15871],{"class":496,"line":1157},[494,15848,9222],{"class":513},[494,15850,432],{"class":526},[494,15852,4541],{"class":3857},[494,15854,4544],{"class":513},[494,15856,844],{"class":513},[494,15858,15859],{"class":576},"text-sm text-neutral-500 mb-2",[494,15861,844],{"class":513},[494,15863,4554],{"class":513},[494,15865,15866],{"class":650},"Variants",[494,15868,4560],{"class":513},[494,15870,432],{"class":526},[494,15872,4565],{"class":513},[494,15874,15875,15877,15879,15881,15883,15885,15887,15889],{"class":496,"line":1163},[494,15876,9222],{"class":513},[494,15878,4572],{"class":526},[494,15880,4541],{"class":3857},[494,15882,4544],{"class":513},[494,15884,844],{"class":513},[494,15886,8913],{"class":576},[494,15888,844],{"class":513},[494,15890,4565],{"class":513},[494,15892,15893,15895,15897,15899,15901,15903,15905,15907,15909,15911,15913,15915],{"class":496,"line":1169},[494,15894,9241],{"class":513},[494,15896,8925],{"class":526},[494,15898,4541],{"class":3857},[494,15900,4544],{"class":513},[494,15902,844],{"class":513},[494,15904,8934],{"class":576},[494,15906,844],{"class":513},[494,15908,4554],{"class":513},[494,15910,8941],{"class":650},[494,15912,4560],{"class":513},[494,15914,8925],{"class":526},[494,15916,4565],{"class":513},[494,15918,15919,15921,15923,15925,15927,15929,15931,15933,15935,15937,15939,15941],{"class":496,"line":2313},[494,15920,9241],{"class":513},[494,15922,8925],{"class":526},[494,15924,4541],{"class":3857},[494,15926,4544],{"class":513},[494,15928,844],{"class":513},[494,15930,8962],{"class":576},[494,15932,844],{"class":513},[494,15934,4554],{"class":513},[494,15936,8969],{"class":650},[494,15938,4560],{"class":513},[494,15940,8925],{"class":526},[494,15942,4565],{"class":513},[494,15944,15945,15947,15949,15951,15953,15955,15957,15959,15961,15963,15965,15967],{"class":496,"line":2331},[494,15946,9241],{"class":513},[494,15948,8925],{"class":526},[494,15950,4541],{"class":3857},[494,15952,4544],{"class":513},[494,15954,844],{"class":513},[494,15956,8990],{"class":576},[494,15958,844],{"class":513},[494,15960,4554],{"class":513},[494,15962,8997],{"class":650},[494,15964,4560],{"class":513},[494,15966,8925],{"class":526},[494,15968,4565],{"class":513},[494,15970,15971,15973,15975,15977,15979,15981,15984,15986,15988,15991,15993,15995],{"class":496,"line":2336},[494,15972,9241],{"class":513},[494,15974,8925],{"class":526},[494,15976,4541],{"class":3857},[494,15978,4544],{"class":513},[494,15980,844],{"class":513},[494,15982,15983],{"class":576},"btn btn-danger",[494,15985,844],{"class":513},[494,15987,4554],{"class":513},[494,15989,15990],{"class":650},"Danger",[494,15992,4560],{"class":513},[494,15994,8925],{"class":526},[494,15996,4565],{"class":513},[494,15998,15999,16001,16003,16005,16007,16009,16011,16013,16015,16017,16019,16021,16023],{"class":496,"line":2342},[494,16000,9241],{"class":513},[494,16002,8925],{"class":526},[494,16004,4541],{"class":3857},[494,16006,4544],{"class":513},[494,16008,844],{"class":513},[494,16010,8934],{"class":576},[494,16012,844],{"class":513},[494,16014,9106],{"class":3857},[494,16016,4554],{"class":513},[494,16018,9111],{"class":650},[494,16020,4560],{"class":513},[494,16022,8925],{"class":526},[494,16024,4565],{"class":513},[494,16026,16027,16029,16031],{"class":496,"line":2361},[494,16028,9270],{"class":513},[494,16030,4572],{"class":526},[494,16032,4565],{"class":513},[494,16034,16035,16037,16039],{"class":496,"line":2379},[494,16036,9387],{"class":513},[494,16038,4572],{"class":526},[494,16040,4565],{"class":513},[494,16042,16043],{"class":496,"line":2398},[494,16044,872],{"emptyLinePlaceholder":871},[494,16046,16047],{"class":496,"line":2418},[494,16048,16049],{"class":500}," \u003C!-- Sizes -->\n",[494,16051,16052,16054,16056],{"class":496,"line":2437},[494,16053,8922],{"class":513},[494,16055,4572],{"class":526},[494,16057,4565],{"class":513},[494,16059,16060,16062,16064,16066,16068,16070,16072,16074,16076,16079,16081,16083],{"class":496,"line":2455},[494,16061,9222],{"class":513},[494,16063,432],{"class":526},[494,16065,4541],{"class":3857},[494,16067,4544],{"class":513},[494,16069,844],{"class":513},[494,16071,15859],{"class":576},[494,16073,844],{"class":513},[494,16075,4554],{"class":513},[494,16077,16078],{"class":650},"Sizes",[494,16080,4560],{"class":513},[494,16082,432],{"class":526},[494,16084,4565],{"class":513},[494,16086,16087,16089,16091,16093,16095,16097,16100,16102],{"class":496,"line":2473},[494,16088,9222],{"class":513},[494,16090,4572],{"class":526},[494,16092,4541],{"class":3857},[494,16094,4544],{"class":513},[494,16096,844],{"class":513},[494,16098,16099],{"class":576},"flex flex-wrap items-center gap-3",[494,16101,844],{"class":513},[494,16103,4565],{"class":513},[494,16105,16106,16108,16110,16112,16114,16116,16118,16120,16122,16124,16126,16128],{"class":496,"line":2492},[494,16107,9241],{"class":513},[494,16109,8925],{"class":526},[494,16111,4541],{"class":3857},[494,16113,4544],{"class":513},[494,16115,844],{"class":513},[494,16117,9018],{"class":576},[494,16119,844],{"class":513},[494,16121,4554],{"class":513},[494,16123,9025],{"class":650},[494,16125,4560],{"class":513},[494,16127,8925],{"class":526},[494,16129,4565],{"class":513},[494,16131,16132,16134,16136,16138,16140,16142,16144,16146,16148,16151,16153,16155],{"class":496,"line":2511},[494,16133,9241],{"class":513},[494,16135,8925],{"class":526},[494,16137,4541],{"class":3857},[494,16139,4544],{"class":513},[494,16141,844],{"class":513},[494,16143,8934],{"class":576},[494,16145,844],{"class":513},[494,16147,4554],{"class":513},[494,16149,16150],{"class":650},"Default",[494,16152,4560],{"class":513},[494,16154,8925],{"class":526},[494,16156,4565],{"class":513},[494,16158,16159,16161,16163,16165,16167,16169,16171,16173,16175,16177,16179,16181],{"class":496,"line":2516},[494,16160,9241],{"class":513},[494,16162,8925],{"class":526},[494,16164,4541],{"class":3857},[494,16166,4544],{"class":513},[494,16168,844],{"class":513},[494,16170,9046],{"class":576},[494,16172,844],{"class":513},[494,16174,4554],{"class":513},[494,16176,9053],{"class":650},[494,16178,4560],{"class":513},[494,16180,8925],{"class":526},[494,16182,4565],{"class":513},[494,16184,16185,16187,16189],{"class":496,"line":2522},[494,16186,9270],{"class":513},[494,16188,4572],{"class":526},[494,16190,4565],{"class":513},[494,16192,16193,16195,16197],{"class":496,"line":2542},[494,16194,9387],{"class":513},[494,16196,4572],{"class":526},[494,16198,4565],{"class":513},[494,16200,16201,16203,16205],{"class":496,"line":2561},[494,16202,9122],{"class":513},[494,16204,4572],{"class":526},[494,16206,4565],{"class":513},[494,16208,16209,16211,16213],{"class":496,"line":2579},[494,16210,9131],{"class":513},[494,16212,8867],{"class":526},[494,16214,4565],{"class":513},[494,16216,16217],{"class":496,"line":2597},[494,16218,872],{"emptyLinePlaceholder":871},[494,16220,16221],{"class":496,"line":2615},[494,16222,16223],{"class":500}," \u003C!-- Cards Section -->\n",[494,16225,16226,16228,16230],{"class":496,"line":2634},[494,16227,8864],{"class":513},[494,16229,8867],{"class":526},[494,16231,4565],{"class":513},[494,16233,16234,16236,16238,16240,16242,16244,16246,16248,16250,16252,16254,16256],{"class":496,"line":2653},[494,16235,8874],{"class":513},[494,16237,427],{"class":526},[494,16239,4541],{"class":3857},[494,16241,4544],{"class":513},[494,16243,844],{"class":513},[494,16245,15795],{"class":576},[494,16247,844],{"class":513},[494,16249,4554],{"class":513},[494,16251,9173],{"class":650},[494,16253,4560],{"class":513},[494,16255,427],{"class":526},[494,16257,4565],{"class":513},[494,16259,16260],{"class":496,"line":2672},[494,16261,15812],{"class":650},[494,16263,16264,16266,16268,16270,16272,16274,16277,16279],{"class":496,"line":2691},[494,16265,8874],{"class":513},[494,16267,4572],{"class":526},[494,16269,4541],{"class":3857},[494,16271,4544],{"class":513},[494,16273,844],{"class":513},[494,16275,16276],{"class":576},"grid grid-cols-1 md:grid-cols-3 gap-4",[494,16278,844],{"class":513},[494,16280,4565],{"class":513},[494,16282,16283,16285,16287,16289,16291,16293,16296,16298],{"class":496,"line":2709},[494,16284,8922],{"class":513},[494,16286,4572],{"class":526},[494,16288,4541],{"class":3857},[494,16290,4544],{"class":513},[494,16292,844],{"class":513},[494,16294,16295],{"class":576},"card card-interactive",[494,16297,844],{"class":513},[494,16299,4565],{"class":513},[494,16301,16302,16304,16306,16308,16310,16312,16314,16316],{"class":496,"line":2727},[494,16303,9222],{"class":513},[494,16305,4572],{"class":526},[494,16307,4541],{"class":3857},[494,16309,4544],{"class":513},[494,16311,844],{"class":513},[494,16313,7768],{"class":576},[494,16315,844],{"class":513},[494,16317,4565],{"class":513},[494,16319,16320,16322,16324,16326,16328,16330,16333,16335,16337,16340,16342,16344],{"class":496,"line":2732},[494,16321,9241],{"class":513},[494,16323,494],{"class":526},[494,16325,4541],{"class":3857},[494,16327,4544],{"class":513},[494,16329,844],{"class":513},[494,16331,16332],{"class":576},"badge badge-primary mb-3",[494,16334,844],{"class":513},[494,16336,4554],{"class":513},[494,16338,16339],{"class":650},"New",[494,16341,4560],{"class":513},[494,16343,494],{"class":526},[494,16345,4565],{"class":513},[494,16347,16348,16350,16352,16354,16356,16358,16361,16363,16365,16368,16370,16372],{"class":496,"line":2738},[494,16349,9241],{"class":513},[494,16351,480],{"class":526},[494,16353,4541],{"class":3857},[494,16355,4544],{"class":513},[494,16357,844],{"class":513},[494,16359,16360],{"class":576},"font-semibold text-lg text-neutral-900 mb-1",[494,16362,844],{"class":513},[494,16364,4554],{"class":513},[494,16366,16367],{"class":650},"Basic Card",[494,16369,4560],{"class":513},[494,16371,480],{"class":526},[494,16373,4565],{"class":513},[494,16375,16376,16378,16380,16382,16384,16386,16389,16391,16393,16396,16398,16400],{"class":496,"line":2758},[494,16377,9241],{"class":513},[494,16379,432],{"class":526},[494,16381,4541],{"class":3857},[494,16383,4544],{"class":513},[494,16385,844],{"class":513},[494,16387,16388],{"class":576},"text-sm text-neutral-600",[494,16390,844],{"class":513},[494,16392,4554],{"class":513},[494,16394,16395],{"class":650},"Simple card with badge and interactive hover.",[494,16397,4560],{"class":513},[494,16399,432],{"class":526},[494,16401,4565],{"class":513},[494,16403,16404,16406,16408],{"class":496,"line":2777},[494,16405,9270],{"class":513},[494,16407,4572],{"class":526},[494,16409,4565],{"class":513},[494,16411,16412,16414,16416],{"class":496,"line":2796},[494,16413,9387],{"class":513},[494,16415,4572],{"class":526},[494,16417,4565],{"class":513},[494,16419,16420],{"class":496,"line":2815},[494,16421,872],{"emptyLinePlaceholder":871},[494,16423,16424,16426,16428,16430,16432,16434,16436,16438],{"class":496,"line":2820},[494,16425,8922],{"class":513},[494,16427,4572],{"class":526},[494,16429,4541],{"class":3857},[494,16431,4544],{"class":513},[494,16433,844],{"class":513},[494,16435,5591],{"class":576},[494,16437,844],{"class":513},[494,16439,4565],{"class":513},[494,16441,16442,16444,16446,16448,16450,16452,16454,16456],{"class":496,"line":2826},[494,16443,9222],{"class":513},[494,16445,4572],{"class":526},[494,16447,4541],{"class":3857},[494,16449,4544],{"class":513},[494,16451,844],{"class":513},[494,16453,7741],{"class":576},[494,16455,844],{"class":513},[494,16457,4565],{"class":513},[494,16459,16460,16462,16464,16466,16468,16470,16473,16475,16477,16480,16482,16484],{"class":496,"line":2832},[494,16461,9241],{"class":513},[494,16463,480],{"class":526},[494,16465,4541],{"class":3857},[494,16467,4544],{"class":513},[494,16469,844],{"class":513},[494,16471,16472],{"class":576},"font-semibold text-lg text-neutral-900",[494,16474,844],{"class":513},[494,16476,4554],{"class":513},[494,16478,16479],{"class":650},"Card with Header",[494,16481,4560],{"class":513},[494,16483,480],{"class":526},[494,16485,4565],{"class":513},[494,16487,16488,16490,16492],{"class":496,"line":2850},[494,16489,9270],{"class":513},[494,16491,4572],{"class":526},[494,16493,4565],{"class":513},[494,16495,16496,16498,16500,16502,16504,16506,16508,16510],{"class":496,"line":2868},[494,16497,9222],{"class":513},[494,16499,4572],{"class":526},[494,16501,4541],{"class":3857},[494,16503,4544],{"class":513},[494,16505,844],{"class":513},[494,16507,7768],{"class":576},[494,16509,844],{"class":513},[494,16511,4565],{"class":513},[494,16513,16514,16516,16518,16520,16522,16524,16526,16528,16530,16533,16535,16537],{"class":496,"line":2886},[494,16515,9241],{"class":513},[494,16517,432],{"class":526},[494,16519,4541],{"class":3857},[494,16521,4544],{"class":513},[494,16523,844],{"class":513},[494,16525,16388],{"class":576},[494,16527,844],{"class":513},[494,16529,4554],{"class":513},[494,16531,16532],{"class":650},"Card có header + body + footer rõ ràng.",[494,16534,4560],{"class":513},[494,16536,432],{"class":526},[494,16538,4565],{"class":513},[494,16540,16541,16543,16545],{"class":496,"line":2891},[494,16542,9270],{"class":513},[494,16544,4572],{"class":526},[494,16546,4565],{"class":513},[494,16548,16549,16551,16553,16555,16557,16559,16562,16564],{"class":496,"line":2897},[494,16550,9222],{"class":513},[494,16552,4572],{"class":526},[494,16554,4541],{"class":3857},[494,16556,4544],{"class":513},[494,16558,844],{"class":513},[494,16560,16561],{"class":576},"card-footer flex justify-end",[494,16563,844],{"class":513},[494,16565,4565],{"class":513},[494,16567,16568,16570,16572,16574,16576,16578,16580,16582,16584,16587,16589,16591],{"class":496,"line":2919},[494,16569,9241],{"class":513},[494,16571,8925],{"class":526},[494,16573,4541],{"class":3857},[494,16575,4544],{"class":513},[494,16577,844],{"class":513},[494,16579,9361],{"class":576},[494,16581,844],{"class":513},[494,16583,4554],{"class":513},[494,16585,16586],{"class":650},"Cancel",[494,16588,4560],{"class":513},[494,16590,8925],{"class":526},[494,16592,4565],{"class":513},[494,16594,16595,16597,16599,16601,16603,16605,16607,16609,16611,16614,16616,16618],{"class":496,"line":2933},[494,16596,9241],{"class":513},[494,16598,8925],{"class":526},[494,16600,4541],{"class":3857},[494,16602,4544],{"class":513},[494,16604,844],{"class":513},[494,16606,9018],{"class":576},[494,16608,844],{"class":513},[494,16610,4554],{"class":513},[494,16612,16613],{"class":650},"Save",[494,16615,4560],{"class":513},[494,16617,8925],{"class":526},[494,16619,4565],{"class":513},[494,16621,16622,16624,16626],{"class":496,"line":2948},[494,16623,9270],{"class":513},[494,16625,4572],{"class":526},[494,16627,4565],{"class":513},[494,16629,16630,16632,16634],{"class":496,"line":2953},[494,16631,9387],{"class":513},[494,16633,4572],{"class":526},[494,16635,4565],{"class":513},[494,16637,16638],{"class":496,"line":2959},[494,16639,872],{"emptyLinePlaceholder":871},[494,16641,16642,16644,16646,16648,16650,16652,16655,16657],{"class":496,"line":2965},[494,16643,8922],{"class":513},[494,16645,4572],{"class":526},[494,16647,4541],{"class":3857},[494,16649,4544],{"class":513},[494,16651,844],{"class":513},[494,16653,16654],{"class":576},"card p-6 text-center",[494,16656,844],{"class":513},[494,16658,4565],{"class":513},[494,16660,16661,16663,16665,16667,16669,16671,16674,16676],{"class":496,"line":2971},[494,16662,9222],{"class":513},[494,16664,4572],{"class":526},[494,16666,4541],{"class":3857},[494,16668,4544],{"class":513},[494,16670,844],{"class":513},[494,16672,16673],{"class":576},"w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3",[494,16675,844],{"class":513},[494,16677,4565],{"class":513},[494,16679,16680,16682,16684,16686,16688,16690,16693,16695,16697,16700,16702,16704],{"class":496,"line":2977},[494,16681,9241],{"class":513},[494,16683,494],{"class":526},[494,16685,4541],{"class":3857},[494,16687,4544],{"class":513},[494,16689,844],{"class":513},[494,16691,16692],{"class":576},"text-primary-600 text-xl",[494,16694,844],{"class":513},[494,16696,4554],{"class":513},[494,16698,16699],{"class":650},"✓",[494,16701,4560],{"class":513},[494,16703,494],{"class":526},[494,16705,4565],{"class":513},[494,16707,16708,16710,16712],{"class":496,"line":2983},[494,16709,9270],{"class":513},[494,16711,4572],{"class":526},[494,16713,4565],{"class":513},[494,16715,16716,16718,16720,16722,16724,16726,16729,16731,16733,16736,16738,16740],{"class":496,"line":2989},[494,16717,9222],{"class":513},[494,16719,480],{"class":526},[494,16721,4541],{"class":3857},[494,16723,4544],{"class":513},[494,16725,844],{"class":513},[494,16727,16728],{"class":576},"font-semibold text-neutral-900 mb-1",[494,16730,844],{"class":513},[494,16732,4554],{"class":513},[494,16734,16735],{"class":650},"Success Card",[494,16737,4560],{"class":513},[494,16739,480],{"class":526},[494,16741,4565],{"class":513},[494,16743,16744,16746,16748,16750,16752,16754,16756,16758,16760,16763,16765,16767],{"class":496,"line":2995},[494,16745,9222],{"class":513},[494,16747,432],{"class":526},[494,16749,4541],{"class":3857},[494,16751,4544],{"class":513},[494,16753,844],{"class":513},[494,16755,16388],{"class":576},[494,16757,844],{"class":513},[494,16759,4554],{"class":513},[494,16761,16762],{"class":650},"Centered content with icon.",[494,16764,4560],{"class":513},[494,16766,432],{"class":526},[494,16768,4565],{"class":513},[494,16770,16771,16773,16775],{"class":496,"line":3001},[494,16772,9387],{"class":513},[494,16774,4572],{"class":526},[494,16776,4565],{"class":513},[494,16778,16779,16781,16783],{"class":496,"line":3007},[494,16780,9122],{"class":513},[494,16782,4572],{"class":526},[494,16784,4565],{"class":513},[494,16786,16787,16789,16791],{"class":496,"line":3013},[494,16788,9131],{"class":513},[494,16790,8867],{"class":526},[494,16792,4565],{"class":513},[494,16794,16795],{"class":496,"line":3019},[494,16796,872],{"emptyLinePlaceholder":871},[494,16798,16799],{"class":496,"line":3025},[494,16800,16801],{"class":500}," \u003C!-- Inputs Section -->\n",[494,16803,16804,16806,16808],{"class":496,"line":3031},[494,16805,8864],{"class":513},[494,16807,8867],{"class":526},[494,16809,4565],{"class":513},[494,16811,16812,16814,16816,16818,16820,16822,16824,16826,16828,16830,16832,16834],{"class":496,"line":3036},[494,16813,8874],{"class":513},[494,16815,427],{"class":526},[494,16817,4541],{"class":3857},[494,16819,4544],{"class":513},[494,16821,844],{"class":513},[494,16823,15795],{"class":576},[494,16825,844],{"class":513},[494,16827,4554],{"class":513},[494,16829,9531],{"class":650},[494,16831,4560],{"class":513},[494,16833,427],{"class":526},[494,16835,4565],{"class":513},[494,16837,16838],{"class":496,"line":3042},[494,16839,15812],{"class":650},[494,16841,16842,16844,16846,16848,16850,16852,16855,16857],{"class":496,"line":3047},[494,16843,8874],{"class":513},[494,16845,4572],{"class":526},[494,16847,4541],{"class":3857},[494,16849,4544],{"class":513},[494,16851,844],{"class":513},[494,16853,16854],{"class":576},"max-w-md space-y-4",[494,16856,844],{"class":513},[494,16858,4565],{"class":513},[494,16860,16861,16863,16865],{"class":496,"line":3053},[494,16862,8922],{"class":513},[494,16864,4572],{"class":526},[494,16866,4565],{"class":513},[494,16868,16869,16871,16873,16875,16877,16879,16882,16884,16886,16889,16891,16893],{"class":496,"line":3059},[494,16870,9222],{"class":513},[494,16872,9571],{"class":526},[494,16874,4541],{"class":3857},[494,16876,4544],{"class":513},[494,16878,844],{"class":513},[494,16880,16881],{"class":576},"block text-sm font-medium text-neutral-700 mb-1.5",[494,16883,844],{"class":513},[494,16885,4554],{"class":513},[494,16887,16888],{"class":650},"Email address",[494,16890,4560],{"class":513},[494,16892,9571],{"class":526},[494,16894,4565],{"class":513},[494,16896,16897,16899,16901,16903,16905,16907,16909,16911,16913,16915,16917,16919,16921,16923,16925,16927,16930,16932],{"class":496,"line":3065},[494,16898,9222],{"class":513},[494,16900,7827],{"class":526},[494,16902,9602],{"class":3857},[494,16904,4544],{"class":513},[494,16906,844],{"class":513},[494,16908,9609],{"class":576},[494,16910,844],{"class":513},[494,16912,4541],{"class":3857},[494,16914,4544],{"class":513},[494,16916,844],{"class":513},[494,16918,7827],{"class":576},[494,16920,844],{"class":513},[494,16922,9624],{"class":3857},[494,16924,4544],{"class":513},[494,16926,844],{"class":513},[494,16928,16929],{"class":576},"you@example.com",[494,16931,844],{"class":513},[494,16933,4565],{"class":513},[494,16935,16936,16938,16940],{"class":496,"line":3071},[494,16937,9387],{"class":513},[494,16939,4572],{"class":526},[494,16941,4565],{"class":513},[494,16943,16944,16946,16948],{"class":496,"line":3077},[494,16945,8922],{"class":513},[494,16947,4572],{"class":526},[494,16949,4565],{"class":513},[494,16951,16952,16954,16956,16958,16960,16962,16964,16966,16968,16971,16973,16975],{"class":496,"line":3082},[494,16953,9222],{"class":513},[494,16955,9571],{"class":526},[494,16957,4541],{"class":3857},[494,16959,4544],{"class":513},[494,16961,844],{"class":513},[494,16963,16881],{"class":576},[494,16965,844],{"class":513},[494,16967,4554],{"class":513},[494,16969,16970],{"class":650},"Password",[494,16972,4560],{"class":513},[494,16974,9571],{"class":526},[494,16976,4565],{"class":513},[494,16978,16979,16981,16983,16985,16987,16989,16992,16994,16996,16998,17000,17002,17004,17006,17008,17010,17013,17015],{"class":496,"line":3088},[494,16980,9222],{"class":513},[494,16982,7827],{"class":526},[494,16984,9602],{"class":3857},[494,16986,4544],{"class":513},[494,16988,844],{"class":513},[494,16990,16991],{"class":576},"password",[494,16993,844],{"class":513},[494,16995,4541],{"class":3857},[494,16997,4544],{"class":513},[494,16999,844],{"class":513},[494,17001,7827],{"class":576},[494,17003,844],{"class":513},[494,17005,9624],{"class":3857},[494,17007,4544],{"class":513},[494,17009,844],{"class":513},[494,17011,17012],{"class":576},"Enter your password",[494,17014,844],{"class":513},[494,17016,4565],{"class":513},[494,17018,17019,17021,17023],{"class":496,"line":3094},[494,17020,9387],{"class":513},[494,17022,4572],{"class":526},[494,17024,4565],{"class":513},[494,17026,17027,17029,17031],{"class":496,"line":3100},[494,17028,8922],{"class":513},[494,17030,4572],{"class":526},[494,17032,4565],{"class":513},[494,17034,17035,17037,17039,17041,17043,17045,17047,17049,17051,17053,17055,17057],{"class":496,"line":3106},[494,17036,9222],{"class":513},[494,17038,9571],{"class":526},[494,17040,4541],{"class":3857},[494,17042,4544],{"class":513},[494,17044,844],{"class":513},[494,17046,16881],{"class":576},[494,17048,844],{"class":513},[494,17050,4554],{"class":513},[494,17052,9672],{"class":650},[494,17054,4560],{"class":513},[494,17056,9571],{"class":526},[494,17058,4565],{"class":513},[494,17060,17061,17063,17065,17067,17069,17071,17073,17075,17077,17079,17081,17083,17085,17087,17089,17091,17094,17096],{"class":496,"line":3112},[494,17062,9222],{"class":513},[494,17064,7827],{"class":526},[494,17066,9602],{"class":3857},[494,17068,4544],{"class":513},[494,17070,844],{"class":513},[494,17072,1537],{"class":576},[494,17074,844],{"class":513},[494,17076,4541],{"class":3857},[494,17078,4544],{"class":513},[494,17080,844],{"class":513},[494,17082,9703],{"class":576},[494,17084,844],{"class":513},[494,17086,9719],{"class":3857},[494,17088,4544],{"class":513},[494,17090,844],{"class":513},[494,17092,17093],{"class":576},"invalid-value",[494,17095,844],{"class":513},[494,17097,4565],{"class":513},[494,17099,17100,17102,17104,17106,17108,17110,17113,17115,17117,17120,17122,17124],{"class":496,"line":3118},[494,17101,9222],{"class":513},[494,17103,432],{"class":526},[494,17105,4541],{"class":3857},[494,17107,4544],{"class":513},[494,17109,844],{"class":513},[494,17111,17112],{"class":576},"text-error-600 text-xs mt-1.5",[494,17114,844],{"class":513},[494,17116,4554],{"class":513},[494,17118,17119],{"class":650},"Please enter a valid value.",[494,17121,4560],{"class":513},[494,17123,432],{"class":526},[494,17125,4565],{"class":513},[494,17127,17128,17130,17132],{"class":496,"line":3124},[494,17129,9387],{"class":513},[494,17131,4572],{"class":526},[494,17133,4565],{"class":513},[494,17135,17136,17138,17140],{"class":496,"line":3130},[494,17137,8922],{"class":513},[494,17139,4572],{"class":526},[494,17141,4565],{"class":513},[494,17143,17144,17146,17148,17150,17152,17154,17156,17158,17160,17162,17164,17166],{"class":496,"line":3135},[494,17145,9222],{"class":513},[494,17147,9571],{"class":526},[494,17149,4541],{"class":3857},[494,17151,4544],{"class":513},[494,17153,844],{"class":513},[494,17155,16881],{"class":576},[494,17157,844],{"class":513},[494,17159,4554],{"class":513},[494,17161,9111],{"class":650},[494,17163,4560],{"class":513},[494,17165,9571],{"class":526},[494,17167,4565],{"class":513},[494,17169,17170,17172,17174,17176,17178,17180,17182,17184,17186,17188,17190,17192,17194,17196,17198,17200,17203,17205,17207],{"class":496,"line":3141},[494,17171,9222],{"class":513},[494,17173,7827],{"class":526},[494,17175,9602],{"class":3857},[494,17177,4544],{"class":513},[494,17179,844],{"class":513},[494,17181,1537],{"class":576},[494,17183,844],{"class":513},[494,17185,4541],{"class":3857},[494,17187,4544],{"class":513},[494,17189,844],{"class":513},[494,17191,7827],{"class":576},[494,17193,844],{"class":513},[494,17195,9624],{"class":3857},[494,17197,4544],{"class":513},[494,17199,844],{"class":513},[494,17201,17202],{"class":576},"Cannot edit this field",[494,17204,844],{"class":513},[494,17206,9106],{"class":3857},[494,17208,4565],{"class":513},[494,17210,17211,17213,17215],{"class":496,"line":3160},[494,17212,9387],{"class":513},[494,17214,4572],{"class":526},[494,17216,4565],{"class":513},[494,17218,17219,17221,17223],{"class":496,"line":3180},[494,17220,9122],{"class":513},[494,17222,4572],{"class":526},[494,17224,4565],{"class":513},[494,17226,17227,17229,17231],{"class":496,"line":3192},[494,17228,9131],{"class":513},[494,17230,8867],{"class":526},[494,17232,4565],{"class":513},[494,17234,17235],{"class":496,"line":3205},[494,17236,872],{"emptyLinePlaceholder":871},[494,17238,17239],{"class":496,"line":3210},[494,17240,17241],{"class":500}," \u003C!-- Badges Section -->\n",[494,17243,17244,17246,17248],{"class":496,"line":3216},[494,17245,8864],{"class":513},[494,17247,8867],{"class":526},[494,17249,4565],{"class":513},[494,17251,17252,17254,17256,17258,17260,17262,17264,17266,17268,17270,17272,17274],{"class":496,"line":3237},[494,17253,8874],{"class":513},[494,17255,427],{"class":526},[494,17257,4541],{"class":3857},[494,17259,4544],{"class":513},[494,17261,844],{"class":513},[494,17263,15795],{"class":576},[494,17265,844],{"class":513},[494,17267,4554],{"class":513},[494,17269,9903],{"class":650},[494,17271,4560],{"class":513},[494,17273,427],{"class":526},[494,17275,4565],{"class":513},[494,17277,17278,17280,17282,17284,17286,17288,17290,17292],{"class":496,"line":3257},[494,17279,8874],{"class":513},[494,17281,4572],{"class":526},[494,17283,4541],{"class":3857},[494,17285,4544],{"class":513},[494,17287,844],{"class":513},[494,17289,9924],{"class":576},[494,17291,844],{"class":513},[494,17293,4565],{"class":513},[494,17295,17296,17298,17300,17302,17304,17306,17308,17310,17312,17314,17316,17318],{"class":496,"line":3276},[494,17297,8922],{"class":513},[494,17299,494],{"class":526},[494,17301,4541],{"class":3857},[494,17303,4544],{"class":513},[494,17305,844],{"class":513},[494,17307,9943],{"class":576},[494,17309,844],{"class":513},[494,17311,4554],{"class":513},[494,17313,8941],{"class":650},[494,17315,4560],{"class":513},[494,17317,494],{"class":526},[494,17319,4565],{"class":513},[494,17321,17322,17324,17326,17328,17330,17332,17334,17336,17338,17340,17342,17344],{"class":496,"line":3296},[494,17323,8922],{"class":513},[494,17325,494],{"class":526},[494,17327,4541],{"class":3857},[494,17329,4544],{"class":513},[494,17331,844],{"class":513},[494,17333,9970],{"class":576},[494,17335,844],{"class":513},[494,17337,4554],{"class":513},[494,17339,9977],{"class":650},[494,17341,4560],{"class":513},[494,17343,494],{"class":526},[494,17345,4565],{"class":513},[494,17347,17348,17350,17352,17354,17356,17358,17360,17362,17364,17366,17368,17370],{"class":496,"line":3301},[494,17349,8922],{"class":513},[494,17351,494],{"class":526},[494,17353,4541],{"class":3857},[494,17355,4544],{"class":513},[494,17357,844],{"class":513},[494,17359,9998],{"class":576},[494,17361,844],{"class":513},[494,17363,4554],{"class":513},[494,17365,10005],{"class":650},[494,17367,4560],{"class":513},[494,17369,494],{"class":526},[494,17371,4565],{"class":513},[494,17373,17374,17376,17378,17380,17382,17384,17386,17388,17390,17392,17394,17396],{"class":496,"line":3307},[494,17375,8922],{"class":513},[494,17377,494],{"class":526},[494,17379,4541],{"class":3857},[494,17381,4544],{"class":513},[494,17383,844],{"class":513},[494,17385,10026],{"class":576},[494,17387,844],{"class":513},[494,17389,4554],{"class":513},[494,17391,10033],{"class":650},[494,17393,4560],{"class":513},[494,17395,494],{"class":526},[494,17397,4565],{"class":513},[494,17399,17400,17402,17404,17406,17408,17410,17413,17415,17417,17420,17422,17424],{"class":496,"line":3313},[494,17401,8922],{"class":513},[494,17403,494],{"class":526},[494,17405,4541],{"class":3857},[494,17407,4544],{"class":513},[494,17409,844],{"class":513},[494,17411,17412],{"class":576},"badge badge-info",[494,17414,844],{"class":513},[494,17416,4554],{"class":513},[494,17418,17419],{"class":650},"Info",[494,17421,4560],{"class":513},[494,17423,494],{"class":526},[494,17425,4565],{"class":513},[494,17427,17428,17430,17432],{"class":496,"line":3319},[494,17429,9122],{"class":513},[494,17431,4572],{"class":526},[494,17433,4565],{"class":513},[494,17435,17436,17438,17440],{"class":496,"line":3325},[494,17437,9131],{"class":513},[494,17439,8867],{"class":526},[494,17441,4565],{"class":513},[494,17443,17444],{"class":496,"line":3331},[494,17445,872],{"emptyLinePlaceholder":871},[494,17447,17448],{"class":496,"line":3337},[494,17449,17450],{"class":500}," \u003C!-- Color Palette -->\n",[494,17452,17453,17455,17457],{"class":496,"line":3343},[494,17454,8864],{"class":513},[494,17456,8867],{"class":526},[494,17458,4565],{"class":513},[494,17460,17461,17463,17465,17467,17469,17471,17473,17475,17477,17480,17482,17484],{"class":496,"line":3349},[494,17462,8874],{"class":513},[494,17464,427],{"class":526},[494,17466,4541],{"class":3857},[494,17468,4544],{"class":513},[494,17470,844],{"class":513},[494,17472,15795],{"class":576},[494,17474,844],{"class":513},[494,17476,4554],{"class":513},[494,17478,17479],{"class":650},"Color Palette",[494,17481,4560],{"class":513},[494,17483,427],{"class":526},[494,17485,4565],{"class":513},[494,17487,17488],{"class":496,"line":3354},[494,17489,15812],{"class":650},[494,17491,17492,17494,17496,17498,17500,17502,17504,17506],{"class":496,"line":3360},[494,17493,8874],{"class":513},[494,17495,4572],{"class":526},[494,17497,4541],{"class":3857},[494,17499,4544],{"class":513},[494,17501,844],{"class":513},[494,17503,15827],{"class":576},[494,17505,844],{"class":513},[494,17507,4565],{"class":513},[494,17509,17510],{"class":496,"line":3366},[494,17511,17512],{"class":500}," \u003C!-- Primary -->\n",[494,17514,17515,17517,17519],{"class":496,"line":3372},[494,17516,8922],{"class":513},[494,17518,4572],{"class":526},[494,17520,4565],{"class":513},[494,17522,17523,17525,17527,17529,17531,17533,17536,17538,17540,17542,17544,17546],{"class":496,"line":3378},[494,17524,9222],{"class":513},[494,17526,432],{"class":526},[494,17528,4541],{"class":3857},[494,17530,4544],{"class":513},[494,17532,844],{"class":513},[494,17534,17535],{"class":576},"text-sm font-medium text-neutral-600 mb-2",[494,17537,844],{"class":513},[494,17539,4554],{"class":513},[494,17541,8941],{"class":650},[494,17543,4560],{"class":513},[494,17545,432],{"class":526},[494,17547,4565],{"class":513},[494,17549,17550,17552,17554,17556,17558,17560,17563,17565],{"class":496,"line":3383},[494,17551,9222],{"class":513},[494,17553,4572],{"class":526},[494,17555,4541],{"class":3857},[494,17557,4544],{"class":513},[494,17559,844],{"class":513},[494,17561,17562],{"class":576},"flex gap-1",[494,17564,844],{"class":513},[494,17566,4565],{"class":513},[494,17568,17569,17571,17573,17575,17577,17579,17582,17584,17587,17589,17591,17593,17595,17598,17600],{"class":496,"line":3388},[494,17570,9241],{"class":513},[494,17572,4572],{"class":526},[494,17574,4541],{"class":3857},[494,17576,4544],{"class":513},[494,17578,844],{"class":513},[494,17580,17581],{"class":576},"w-10 h-10 rounded bg-primary-50",[494,17583,844],{"class":513},[494,17585,17586],{"class":3857}," title",[494,17588,4544],{"class":513},[494,17590,844],{"class":513},[494,17592,11174],{"class":576},[494,17594,844],{"class":513},[494,17596,17597],{"class":513},">\u003C\u002F",[494,17599,4572],{"class":526},[494,17601,4565],{"class":513},[494,17603,17604,17606,17608,17610,17612,17614,17617,17619,17621,17623,17625,17628,17630,17632,17634],{"class":496,"line":3394},[494,17605,9241],{"class":513},[494,17607,4572],{"class":526},[494,17609,4541],{"class":3857},[494,17611,4544],{"class":513},[494,17613,844],{"class":513},[494,17615,17616],{"class":576},"w-10 h-10 rounded bg-primary-100",[494,17618,844],{"class":513},[494,17620,17586],{"class":3857},[494,17622,4544],{"class":513},[494,17624,844],{"class":513},[494,17626,17627],{"class":576},"100",[494,17629,844],{"class":513},[494,17631,17597],{"class":513},[494,17633,4572],{"class":526},[494,17635,4565],{"class":513},[494,17637,17638,17640,17642,17644,17646,17648,17651,17653,17655,17657,17659,17662,17664,17666,17668],{"class":496,"line":3406},[494,17639,9241],{"class":513},[494,17641,4572],{"class":526},[494,17643,4541],{"class":3857},[494,17645,4544],{"class":513},[494,17647,844],{"class":513},[494,17649,17650],{"class":576},"w-10 h-10 rounded bg-primary-200",[494,17652,844],{"class":513},[494,17654,17586],{"class":3857},[494,17656,4544],{"class":513},[494,17658,844],{"class":513},[494,17660,17661],{"class":576},"200",[494,17663,844],{"class":513},[494,17665,17597],{"class":513},[494,17667,4572],{"class":526},[494,17669,4565],{"class":513},[494,17671,17672,17674,17676,17678,17680,17682,17685,17687,17689,17691,17693,17696,17698,17700,17702],{"class":496,"line":3429},[494,17673,9241],{"class":513},[494,17675,4572],{"class":526},[494,17677,4541],{"class":3857},[494,17679,4544],{"class":513},[494,17681,844],{"class":513},[494,17683,17684],{"class":576},"w-10 h-10 rounded bg-primary-300",[494,17686,844],{"class":513},[494,17688,17586],{"class":3857},[494,17690,4544],{"class":513},[494,17692,844],{"class":513},[494,17694,17695],{"class":576},"300",[494,17697,844],{"class":513},[494,17699,17597],{"class":513},[494,17701,4572],{"class":526},[494,17703,4565],{"class":513},[494,17705,17706,17708,17710,17712,17714,17716,17719,17721,17723,17725,17727,17730,17732,17734,17736],{"class":496,"line":3448},[494,17707,9241],{"class":513},[494,17709,4572],{"class":526},[494,17711,4541],{"class":3857},[494,17713,4544],{"class":513},[494,17715,844],{"class":513},[494,17717,17718],{"class":576},"w-10 h-10 rounded bg-primary-400",[494,17720,844],{"class":513},[494,17722,17586],{"class":3857},[494,17724,4544],{"class":513},[494,17726,844],{"class":513},[494,17728,17729],{"class":576},"400",[494,17731,844],{"class":513},[494,17733,17597],{"class":513},[494,17735,4572],{"class":526},[494,17737,4565],{"class":513},[494,17739,17740,17742,17744,17746,17748,17750,17753,17755,17757,17759,17761,17764,17766,17768,17770],{"class":496,"line":3453},[494,17741,9241],{"class":513},[494,17743,4572],{"class":526},[494,17745,4541],{"class":3857},[494,17747,4544],{"class":513},[494,17749,844],{"class":513},[494,17751,17752],{"class":576},"w-10 h-10 rounded bg-primary-500 ring-2 ring-offset-1 ring-black",[494,17754,844],{"class":513},[494,17756,17586],{"class":3857},[494,17758,4544],{"class":513},[494,17760,844],{"class":513},[494,17762,17763],{"class":576},"500 BASE",[494,17765,844],{"class":513},[494,17767,17597],{"class":513},[494,17769,4572],{"class":526},[494,17771,4565],{"class":513},[494,17773,17774,17776,17778,17780,17782,17784,17787,17789,17791,17793,17795,17798,17800,17802,17804],{"class":496,"line":3458},[494,17775,9241],{"class":513},[494,17777,4572],{"class":526},[494,17779,4541],{"class":3857},[494,17781,4544],{"class":513},[494,17783,844],{"class":513},[494,17785,17786],{"class":576},"w-10 h-10 rounded bg-primary-600",[494,17788,844],{"class":513},[494,17790,17586],{"class":3857},[494,17792,4544],{"class":513},[494,17794,844],{"class":513},[494,17796,17797],{"class":576},"600",[494,17799,844],{"class":513},[494,17801,17597],{"class":513},[494,17803,4572],{"class":526},[494,17805,4565],{"class":513},[494,17807,17808,17810,17812,17814,17816,17818,17821,17823,17825,17827,17829,17832,17834,17836,17838],{"class":496,"line":3468},[494,17809,9241],{"class":513},[494,17811,4572],{"class":526},[494,17813,4541],{"class":3857},[494,17815,4544],{"class":513},[494,17817,844],{"class":513},[494,17819,17820],{"class":576},"w-10 h-10 rounded bg-primary-700",[494,17822,844],{"class":513},[494,17824,17586],{"class":3857},[494,17826,4544],{"class":513},[494,17828,844],{"class":513},[494,17830,17831],{"class":576},"700",[494,17833,844],{"class":513},[494,17835,17597],{"class":513},[494,17837,4572],{"class":526},[494,17839,4565],{"class":513},[494,17841,17842,17844,17846,17848,17850,17852,17855,17857,17859,17861,17863,17866,17868,17870,17872],{"class":496,"line":3501},[494,17843,9241],{"class":513},[494,17845,4572],{"class":526},[494,17847,4541],{"class":3857},[494,17849,4544],{"class":513},[494,17851,844],{"class":513},[494,17853,17854],{"class":576},"w-10 h-10 rounded bg-primary-800",[494,17856,844],{"class":513},[494,17858,17586],{"class":3857},[494,17860,4544],{"class":513},[494,17862,844],{"class":513},[494,17864,17865],{"class":576},"800",[494,17867,844],{"class":513},[494,17869,17597],{"class":513},[494,17871,4572],{"class":526},[494,17873,4565],{"class":513},[494,17875,17876,17878,17880,17882,17884,17886,17889,17891,17893,17895,17897,17900,17902,17904,17906],{"class":496,"line":3531},[494,17877,9241],{"class":513},[494,17879,4572],{"class":526},[494,17881,4541],{"class":3857},[494,17883,4544],{"class":513},[494,17885,844],{"class":513},[494,17887,17888],{"class":576},"w-10 h-10 rounded bg-primary-900",[494,17890,844],{"class":513},[494,17892,17586],{"class":3857},[494,17894,4544],{"class":513},[494,17896,844],{"class":513},[494,17898,17899],{"class":576},"900",[494,17901,844],{"class":513},[494,17903,17597],{"class":513},[494,17905,4572],{"class":526},[494,17907,4565],{"class":513},[494,17909,17910,17912,17914],{"class":496,"line":3536},[494,17911,9270],{"class":513},[494,17913,4572],{"class":526},[494,17915,4565],{"class":513},[494,17917,17918,17920,17922],{"class":496,"line":3541},[494,17919,9387],{"class":513},[494,17921,4572],{"class":526},[494,17923,4565],{"class":513},[494,17925,17926],{"class":496,"line":3551},[494,17927,872],{"emptyLinePlaceholder":871},[494,17929,17930],{"class":496,"line":3581},[494,17931,17932],{"class":500}," \u003C!-- Neutral -->\n",[494,17934,17935,17937,17939],{"class":496,"line":3610},[494,17936,8922],{"class":513},[494,17938,4572],{"class":526},[494,17940,4565],{"class":513},[494,17942,17943,17945,17947,17949,17951,17953,17955,17957,17959,17962,17964,17966],{"class":496,"line":3615},[494,17944,9222],{"class":513},[494,17946,432],{"class":526},[494,17948,4541],{"class":3857},[494,17950,4544],{"class":513},[494,17952,844],{"class":513},[494,17954,17535],{"class":576},[494,17956,844],{"class":513},[494,17958,4554],{"class":513},[494,17960,17961],{"class":650},"Neutral",[494,17963,4560],{"class":513},[494,17965,432],{"class":526},[494,17967,4565],{"class":513},[494,17969,17970,17972,17974,17976,17978,17980,17982,17984],{"class":496,"line":3620},[494,17971,9222],{"class":513},[494,17973,4572],{"class":526},[494,17975,4541],{"class":3857},[494,17977,4544],{"class":513},[494,17979,844],{"class":513},[494,17981,17562],{"class":576},[494,17983,844],{"class":513},[494,17985,4565],{"class":513},[494,17987,17988,17990,17992,17994,17996,17998,18001,18003,18005,18007,18009,18011,18013,18015,18017],{"class":496,"line":3630},[494,17989,9241],{"class":513},[494,17991,4572],{"class":526},[494,17993,4541],{"class":3857},[494,17995,4544],{"class":513},[494,17997,844],{"class":513},[494,17999,18000],{"class":576},"w-10 h-10 rounded bg-neutral-50 border border-neutral-200",[494,18002,844],{"class":513},[494,18004,17586],{"class":3857},[494,18006,4544],{"class":513},[494,18008,844],{"class":513},[494,18010,11174],{"class":576},[494,18012,844],{"class":513},[494,18014,17597],{"class":513},[494,18016,4572],{"class":526},[494,18018,4565],{"class":513},[494,18020,18021,18023,18025,18027,18029,18031,18034,18036,18038,18040,18042,18044,18046,18048,18050],{"class":496,"line":3661},[494,18022,9241],{"class":513},[494,18024,4572],{"class":526},[494,18026,4541],{"class":3857},[494,18028,4544],{"class":513},[494,18030,844],{"class":513},[494,18032,18033],{"class":576},"w-10 h-10 rounded bg-neutral-100",[494,18035,844],{"class":513},[494,18037,17586],{"class":3857},[494,18039,4544],{"class":513},[494,18041,844],{"class":513},[494,18043,17627],{"class":576},[494,18045,844],{"class":513},[494,18047,17597],{"class":513},[494,18049,4572],{"class":526},[494,18051,4565],{"class":513},[494,18053,18054,18056,18058,18060,18062,18064,18067,18069,18071,18073,18075,18077,18079,18081,18083],{"class":496,"line":3690},[494,18055,9241],{"class":513},[494,18057,4572],{"class":526},[494,18059,4541],{"class":3857},[494,18061,4544],{"class":513},[494,18063,844],{"class":513},[494,18065,18066],{"class":576},"w-10 h-10 rounded bg-neutral-200",[494,18068,844],{"class":513},[494,18070,17586],{"class":3857},[494,18072,4544],{"class":513},[494,18074,844],{"class":513},[494,18076,17661],{"class":576},[494,18078,844],{"class":513},[494,18080,17597],{"class":513},[494,18082,4572],{"class":526},[494,18084,4565],{"class":513},[494,18086,18087,18089,18091,18093,18095,18097,18100,18102,18104,18106,18108,18110,18112,18114,18116],{"class":496,"line":3695},[494,18088,9241],{"class":513},[494,18090,4572],{"class":526},[494,18092,4541],{"class":3857},[494,18094,4544],{"class":513},[494,18096,844],{"class":513},[494,18098,18099],{"class":576},"w-10 h-10 rounded bg-neutral-300",[494,18101,844],{"class":513},[494,18103,17586],{"class":3857},[494,18105,4544],{"class":513},[494,18107,844],{"class":513},[494,18109,17695],{"class":576},[494,18111,844],{"class":513},[494,18113,17597],{"class":513},[494,18115,4572],{"class":526},[494,18117,4565],{"class":513},[494,18119,18120,18122,18124,18126,18128,18130,18133,18135,18137,18139,18141,18143,18145,18147,18149],{"class":496,"line":3700},[494,18121,9241],{"class":513},[494,18123,4572],{"class":526},[494,18125,4541],{"class":3857},[494,18127,4544],{"class":513},[494,18129,844],{"class":513},[494,18131,18132],{"class":576},"w-10 h-10 rounded bg-neutral-400",[494,18134,844],{"class":513},[494,18136,17586],{"class":3857},[494,18138,4544],{"class":513},[494,18140,844],{"class":513},[494,18142,17729],{"class":576},[494,18144,844],{"class":513},[494,18146,17597],{"class":513},[494,18148,4572],{"class":526},[494,18150,4565],{"class":513},[494,18152,18153,18155,18157,18159,18161,18163,18166,18168,18170,18172,18174,18177,18179,18181,18183],{"class":496,"line":3706},[494,18154,9241],{"class":513},[494,18156,4572],{"class":526},[494,18158,4541],{"class":3857},[494,18160,4544],{"class":513},[494,18162,844],{"class":513},[494,18164,18165],{"class":576},"w-10 h-10 rounded bg-neutral-500 ring-2 ring-offset-1 ring-black",[494,18167,844],{"class":513},[494,18169,17586],{"class":3857},[494,18171,4544],{"class":513},[494,18173,844],{"class":513},[494,18175,18176],{"class":576},"500",[494,18178,844],{"class":513},[494,18180,17597],{"class":513},[494,18182,4572],{"class":526},[494,18184,4565],{"class":513},[494,18186,18187,18189,18191,18193,18195,18197,18200,18202,18204,18206,18208,18210,18212,18214,18216],{"class":496,"line":3718},[494,18188,9241],{"class":513},[494,18190,4572],{"class":526},[494,18192,4541],{"class":3857},[494,18194,4544],{"class":513},[494,18196,844],{"class":513},[494,18198,18199],{"class":576},"w-10 h-10 rounded bg-neutral-600",[494,18201,844],{"class":513},[494,18203,17586],{"class":3857},[494,18205,4544],{"class":513},[494,18207,844],{"class":513},[494,18209,17797],{"class":576},[494,18211,844],{"class":513},[494,18213,17597],{"class":513},[494,18215,4572],{"class":526},[494,18217,4565],{"class":513},[494,18219,18220,18222,18224,18226,18228,18230,18233,18235,18237,18239,18241,18243,18245,18247,18249],{"class":496,"line":3726},[494,18221,9241],{"class":513},[494,18223,4572],{"class":526},[494,18225,4541],{"class":3857},[494,18227,4544],{"class":513},[494,18229,844],{"class":513},[494,18231,18232],{"class":576},"w-10 h-10 rounded bg-neutral-700",[494,18234,844],{"class":513},[494,18236,17586],{"class":3857},[494,18238,4544],{"class":513},[494,18240,844],{"class":513},[494,18242,17831],{"class":576},[494,18244,844],{"class":513},[494,18246,17597],{"class":513},[494,18248,4572],{"class":526},[494,18250,4565],{"class":513},[494,18252,18253,18255,18257,18259,18261,18263,18266,18268,18270,18272,18274,18276,18278,18280,18282],{"class":496,"line":3739},[494,18254,9241],{"class":513},[494,18256,4572],{"class":526},[494,18258,4541],{"class":3857},[494,18260,4544],{"class":513},[494,18262,844],{"class":513},[494,18264,18265],{"class":576},"w-10 h-10 rounded bg-neutral-800",[494,18267,844],{"class":513},[494,18269,17586],{"class":3857},[494,18271,4544],{"class":513},[494,18273,844],{"class":513},[494,18275,17865],{"class":576},[494,18277,844],{"class":513},[494,18279,17597],{"class":513},[494,18281,4572],{"class":526},[494,18283,4565],{"class":513},[494,18285,18286,18288,18290,18292,18294,18296,18299,18301,18303,18305,18307,18309,18311,18313,18315],{"class":496,"line":3752},[494,18287,9241],{"class":513},[494,18289,4572],{"class":526},[494,18291,4541],{"class":3857},[494,18293,4544],{"class":513},[494,18295,844],{"class":513},[494,18297,18298],{"class":576},"w-10 h-10 rounded bg-neutral-900",[494,18300,844],{"class":513},[494,18302,17586],{"class":3857},[494,18304,4544],{"class":513},[494,18306,844],{"class":513},[494,18308,17899],{"class":576},[494,18310,844],{"class":513},[494,18312,17597],{"class":513},[494,18314,4572],{"class":526},[494,18316,4565],{"class":513},[494,18318,18319,18321,18323,18325,18327,18329,18332,18334,18336,18338,18340,18343,18345,18347,18349],{"class":496,"line":3765},[494,18320,9241],{"class":513},[494,18322,4572],{"class":526},[494,18324,4541],{"class":3857},[494,18326,4544],{"class":513},[494,18328,844],{"class":513},[494,18330,18331],{"class":576},"w-10 h-10 rounded bg-neutral-950",[494,18333,844],{"class":513},[494,18335,17586],{"class":3857},[494,18337,4544],{"class":513},[494,18339,844],{"class":513},[494,18341,18342],{"class":576},"950",[494,18344,844],{"class":513},[494,18346,17597],{"class":513},[494,18348,4572],{"class":526},[494,18350,4565],{"class":513},[494,18352,18353,18355,18357],{"class":496,"line":3771},[494,18354,9270],{"class":513},[494,18356,4572],{"class":526},[494,18358,4565],{"class":513},[494,18360,18361,18363,18365],{"class":496,"line":3776},[494,18362,9387],{"class":513},[494,18364,4572],{"class":526},[494,18366,4565],{"class":513},[494,18368,18369],{"class":496,"line":3784},[494,18370,872],{"emptyLinePlaceholder":871},[494,18372,18373],{"class":496,"line":3801},[494,18374,18375],{"class":500}," \u003C!-- Semantic -->\n",[494,18377,18378,18380,18382],{"class":496,"line":3818},[494,18379,8922],{"class":513},[494,18381,4572],{"class":526},[494,18383,4565],{"class":513},[494,18385,18386,18388,18390,18392,18394,18396,18398,18400,18402,18405,18407,18409],{"class":496,"line":3835},[494,18387,9222],{"class":513},[494,18389,432],{"class":526},[494,18391,4541],{"class":3857},[494,18393,4544],{"class":513},[494,18395,844],{"class":513},[494,18397,17535],{"class":576},[494,18399,844],{"class":513},[494,18401,4554],{"class":513},[494,18403,18404],{"class":650},"Semantic",[494,18406,4560],{"class":513},[494,18408,432],{"class":526},[494,18410,4565],{"class":513},[494,18412,18413,18415,18417,18419,18421,18423,18426,18428],{"class":496,"line":3840},[494,18414,9222],{"class":513},[494,18416,4572],{"class":526},[494,18418,4541],{"class":3857},[494,18420,4544],{"class":513},[494,18422,844],{"class":513},[494,18424,18425],{"class":576},"flex gap-3",[494,18427,844],{"class":513},[494,18429,4565],{"class":513},[494,18431,18432,18434,18436,18438,18440,18442,18445,18447],{"class":496,"line":3845},[494,18433,9241],{"class":513},[494,18435,4572],{"class":526},[494,18437,4541],{"class":3857},[494,18439,4544],{"class":513},[494,18441,844],{"class":513},[494,18443,18444],{"class":576},"flex items-center gap-2",[494,18446,844],{"class":513},[494,18448,4565],{"class":513},[494,18450,18451,18454,18456,18458,18460,18462,18465,18467,18469,18471],{"class":496,"line":3851},[494,18452,18453],{"class":513}," \u003C",[494,18455,4572],{"class":526},[494,18457,4541],{"class":3857},[494,18459,4544],{"class":513},[494,18461,844],{"class":513},[494,18463,18464],{"class":576},"w-8 h-8 rounded bg-success-500",[494,18466,844],{"class":513},[494,18468,17597],{"class":513},[494,18470,4572],{"class":526},[494,18472,4565],{"class":513},[494,18474,18475,18477,18479,18481,18483,18485,18488,18490,18492,18494,18496,18498],{"class":496,"line":3863},[494,18476,18453],{"class":513},[494,18478,494],{"class":526},[494,18480,4541],{"class":3857},[494,18482,4544],{"class":513},[494,18484,844],{"class":513},[494,18486,18487],{"class":576},"text-xs text-neutral-500",[494,18489,844],{"class":513},[494,18491,4554],{"class":513},[494,18493,9977],{"class":650},[494,18495,4560],{"class":513},[494,18497,494],{"class":526},[494,18499,4565],{"class":513},[494,18501,18502,18505,18507],{"class":496,"line":3887},[494,18503,18504],{"class":513}," \u003C\u002F",[494,18506,4572],{"class":526},[494,18508,4565],{"class":513},[494,18510,18511,18513,18515,18517,18519,18521,18523,18525],{"class":496,"line":3899},[494,18512,9241],{"class":513},[494,18514,4572],{"class":526},[494,18516,4541],{"class":3857},[494,18518,4544],{"class":513},[494,18520,844],{"class":513},[494,18522,18444],{"class":576},[494,18524,844],{"class":513},[494,18526,4565],{"class":513},[494,18528,18529,18531,18533,18535,18537,18539,18542,18544,18546,18548],{"class":496,"line":3916},[494,18530,18453],{"class":513},[494,18532,4572],{"class":526},[494,18534,4541],{"class":3857},[494,18536,4544],{"class":513},[494,18538,844],{"class":513},[494,18540,18541],{"class":576},"w-8 h-8 rounded bg-warning-500",[494,18543,844],{"class":513},[494,18545,17597],{"class":513},[494,18547,4572],{"class":526},[494,18549,4565],{"class":513},[494,18551,18552,18554,18556,18558,18560,18562,18564,18566,18568,18570,18572,18574],{"class":496,"line":3921},[494,18553,18453],{"class":513},[494,18555,494],{"class":526},[494,18557,4541],{"class":3857},[494,18559,4544],{"class":513},[494,18561,844],{"class":513},[494,18563,18487],{"class":576},[494,18565,844],{"class":513},[494,18567,4554],{"class":513},[494,18569,10005],{"class":650},[494,18571,4560],{"class":513},[494,18573,494],{"class":526},[494,18575,4565],{"class":513},[494,18577,18578,18580,18582],{"class":496,"line":8496},[494,18579,18504],{"class":513},[494,18581,4572],{"class":526},[494,18583,4565],{"class":513},[494,18585,18586,18588,18590,18592,18594,18596,18598,18600],{"class":496,"line":8536},[494,18587,9241],{"class":513},[494,18589,4572],{"class":526},[494,18591,4541],{"class":3857},[494,18593,4544],{"class":513},[494,18595,844],{"class":513},[494,18597,18444],{"class":576},[494,18599,844],{"class":513},[494,18601,4565],{"class":513},[494,18603,18604,18606,18608,18610,18612,18614,18617,18619,18621,18623],{"class":496,"line":8558},[494,18605,18453],{"class":513},[494,18607,4572],{"class":526},[494,18609,4541],{"class":3857},[494,18611,4544],{"class":513},[494,18613,844],{"class":513},[494,18615,18616],{"class":576},"w-8 h-8 rounded bg-error-500",[494,18618,844],{"class":513},[494,18620,17597],{"class":513},[494,18622,4572],{"class":526},[494,18624,4565],{"class":513},[494,18626,18627,18629,18631,18633,18635,18637,18639,18641,18643,18645,18647,18649],{"class":496,"line":8563},[494,18628,18453],{"class":513},[494,18630,494],{"class":526},[494,18632,4541],{"class":3857},[494,18634,4544],{"class":513},[494,18636,844],{"class":513},[494,18638,18487],{"class":576},[494,18640,844],{"class":513},[494,18642,4554],{"class":513},[494,18644,10033],{"class":650},[494,18646,4560],{"class":513},[494,18648,494],{"class":526},[494,18650,4565],{"class":513},[494,18652,18653,18655,18657],{"class":496,"line":8568},[494,18654,18504],{"class":513},[494,18656,4572],{"class":526},[494,18658,4565],{"class":513},[494,18660,18661,18663,18665,18667,18669,18671,18673,18675],{"class":496,"line":8578},[494,18662,9241],{"class":513},[494,18664,4572],{"class":526},[494,18666,4541],{"class":3857},[494,18668,4544],{"class":513},[494,18670,844],{"class":513},[494,18672,18444],{"class":576},[494,18674,844],{"class":513},[494,18676,4565],{"class":513},[494,18678,18679,18681,18683,18685,18687,18689,18692,18694,18696,18698],{"class":496,"line":8615},[494,18680,18453],{"class":513},[494,18682,4572],{"class":526},[494,18684,4541],{"class":3857},[494,18686,4544],{"class":513},[494,18688,844],{"class":513},[494,18690,18691],{"class":576},"w-8 h-8 rounded bg-info-500",[494,18693,844],{"class":513},[494,18695,17597],{"class":513},[494,18697,4572],{"class":526},[494,18699,4565],{"class":513},[494,18701,18702,18704,18706,18708,18710,18712,18714,18716,18718,18720,18722,18724],{"class":496,"line":8635},[494,18703,18453],{"class":513},[494,18705,494],{"class":526},[494,18707,4541],{"class":3857},[494,18709,4544],{"class":513},[494,18711,844],{"class":513},[494,18713,18487],{"class":576},[494,18715,844],{"class":513},[494,18717,4554],{"class":513},[494,18719,17419],{"class":650},[494,18721,4560],{"class":513},[494,18723,494],{"class":526},[494,18725,4565],{"class":513},[494,18727,18728,18730,18732],{"class":496,"line":8640},[494,18729,18504],{"class":513},[494,18731,4572],{"class":526},[494,18733,4565],{"class":513},[494,18735,18736,18738,18740],{"class":496,"line":14086},[494,18737,9270],{"class":513},[494,18739,4572],{"class":526},[494,18741,4565],{"class":513},[494,18743,18744,18746,18748],{"class":496,"line":14091},[494,18745,9387],{"class":513},[494,18747,4572],{"class":526},[494,18749,4565],{"class":513},[494,18751,18752,18754,18756],{"class":496,"line":14096},[494,18753,9122],{"class":513},[494,18755,4572],{"class":526},[494,18757,4565],{"class":513},[494,18759,18760,18762,18764],{"class":496,"line":14102},[494,18761,9131],{"class":513},[494,18763,8867],{"class":526},[494,18765,4565],{"class":513},[494,18767,18768],{"class":496,"line":14111},[494,18769,872],{"emptyLinePlaceholder":871},[494,18771,18772,18774,18776],{"class":496,"line":14124},[494,18773,10064],{"class":513},[494,18775,4572],{"class":526},[494,18777,4565],{"class":513},[494,18779,18780],{"class":496,"line":14140},[494,18781,872],{"emptyLinePlaceholder":871},[494,18783,18784,18786,18788],{"class":496,"line":14156},[494,18785,4560],{"class":513},[494,18787,8814],{"class":526},[494,18789,4565],{"class":513},[494,18791,18792,18794,18796],{"class":496,"line":14161},[494,18793,4560],{"class":513},[494,18795,4523],{"class":526},[494,18797,4565],{"class":513},[432,18799,18800],{},[436,18801,18802],{},"Giải thích key decisions cho toàn bộ design system:",[1883,18804,18805,18811,18818,18823,18831],{},[1886,18806,18807,18808,18810],{},"Tất cả tokens tập trung trong ",[441,18809,877],{}," -> single source of truth.",[1886,18812,18813,18814,18817],{},"Component classes dùng ",[441,18815,18816],{},"var(--token-name)"," để tham chiếu -> đổi token ở một chỗ, tất cả component tự update.",[1886,18819,18820,18822],{},[441,18821,10109],{}," cho badge backgrounds -> giữ nguyên hue, chỉ giảm opacity.",[1886,18824,18825,18827,18828,18830],{},[441,18826,10115],{}," thay ",[441,18829,10119],{}," -> accessibility tốt hơn.",[1886,18832,18833,18836],{},[441,18834,18835],{},"100dvh"," cho body -> tránh vấn đề 100vh trên mobile browser (address bar ẩn\u002Fhiện).",[4411,18838],{},[427,18840,18842],{"id":18841},"tổng-kết","Tổng Kết",[18844,18845,18846,18857,18861,18866,18871,18879],"card-group",{},[5591,18847,18850,18851,18853,18854,18856],{"icon":18848,"title":18849},"i-lucide-file-code","CSS-first Config","Bỏ ",[441,18852,443],{},". Mọi thứ trong ",[441,18855,877],{}," block — colors, fonts, spacing, shadows, animations. Tự động expose thành CSS variables.",[5591,18858,18860],{"icon":1649,"title":18859},"OKLCH Colors","Color space mới mặc định. Perceptually uniform, P3-ready. Tạo color scale bằng cách thay đổi Lightness, giữ Chroma và Hue.",[5591,18862,18865],{"icon":18863,"title":18864},"i-lucide-wrench","@utility & @custom-variant","Tạo utility class và variant selector riêng. @utility hỗ trợ nested selectors với &. Stacked + compound variants từ v4.3.",[5591,18867,18870],{"icon":18868,"title":18869},"i-lucide-layers","@layer Architecture","base -> components -> utilities. CSS cascade tự động. @layer components cho reusable classes, @layer base cho global styles.",[5591,18872,18875,18876,18878],{"icon":18873,"title":18874},"i-lucide-component","Component Classes","Dùng CSS variable + pseudo-classes. Không @apply. color-mix() cho transparency. ",[3858,18877],{}," cho accessibility.",[5591,18880,18883],{"icon":18881,"title":18882},"i-lucide-package","Design System","Single @theme chứa tất cả tokens. Component classes tham chiếu tokens qua var(). Đổi token ở 1 chỗ -> toàn bộ system update.",[446,18885,18887,18888,18890],{"color":1303,"icon":18886},"i-lucide-arrow-right","Tiếp theo: ",[10147,18889,417],{"href":418}," — 3 dự án thực tế: Landing Page, Dashboard, E-commerce Product Card.",[18892,18893,18894],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":490,"searchDepth":504,"depth":504,"links":18896},[18897,18906,18915,18924,18939,18943,18951],{"id":429,"depth":504,"text":430,"children":18898},[18899,18900,18901,18903,18904,18905],{"id":482,"depth":510,"text":483},{"id":1174,"depth":510,"text":1175},{"id":1315,"depth":510,"text":18902},"1.3. Namespace Trong @theme",{"id":1527,"depth":510,"text":1528},{"id":1874,"depth":510,"text":1875},{"id":3963,"depth":510,"text":3964},{"id":4415,"depth":504,"text":18907,"children":18908},"2. Custom Utilities (@utility)",[18909,18910,18912,18914],{"id":4427,"depth":510,"text":4428},{"id":4597,"depth":510,"text":18911},"2.2. BÀI TẬP 3 — Custom scrollbar-hide Utility",{"id":4764,"depth":510,"text":18913},"2.3. BÀI TẬP 4 — Custom text-gradient Utility cho Gradient Text",{"id":4898,"depth":510,"text":4899},{"id":4943,"depth":504,"text":18916,"children":18917},"3. Custom Variants (@custom-variant)",[18918,18920,18922],{"id":4953,"depth":510,"text":18919},"3.1. Các Pattern @custom-variant Phổ Biến",{"id":5051,"depth":510,"text":18921},"3.2. BÀI TẬP 5 — Multi-Theme System với @custom-variant",{"id":5192,"depth":510,"text":18923},"3.3. BÀI TẬP 6 — Custom child:* Variant cho Direct Child Styling",{"id":5400,"depth":504,"text":5401,"children":18925},[18926,18928,18930,18932,18934,18936,18937],{"id":5404,"depth":510,"text":18927},"4.1. @import \"tailwindcss\" — All-in-One",{"id":5463,"depth":510,"text":18929},"4.2. @layer — Tổ Chức CSS",{"id":5845,"depth":510,"text":18931},"4.3. theme() Function",{"id":6026,"depth":510,"text":18933},"4.4. --value() Helper",{"id":6090,"depth":510,"text":18935},"4.5. --default() (v4.3)",{"id":6128,"depth":510,"text":6129},{"id":6741,"depth":510,"text":18938},"4.7. BÀI TẬP 8 — Reusable Component Class với @layer components",{"id":10137,"depth":504,"text":10138,"children":18940},[18941,18942],{"id":10155,"depth":510,"text":10156},{"id":10255,"depth":510,"text":10256},{"id":10444,"depth":504,"text":10445,"children":18944},[18945,18946,18947,18948,18949],{"id":10454,"depth":510,"text":10455},{"id":11368,"depth":510,"text":11369},{"id":11701,"depth":510,"text":11702},{"id":11964,"depth":510,"text":11965},{"id":12265,"depth":510,"text":18950},"6.5. BÀI TẬP 13 — Full Design System (All Components in One @theme)",{"id":18841,"depth":504,"text":18842},"Tailwind CSS v4 CSS-first config — @theme, @utility, @plugin, @custom-variant, custom colors, fonts, breakpoints. Bài tập custom design system.","md",null,{},{"title":412,"icon":415},{"title":422,"description":18952},"uMdkYg9A4csMra2BLZCvNAosjgqyqltiqbuuyuEshX4",[18960,18962],{"title":407,"path":408,"stem":409,"description":18961,"icon":410,"children":-1},"Tailwind CSS v4 — responsive breakpoints, container queries, dark mode, custom variants. Bài tập responsive layout và dark mode theme.",{"title":417,"path":418,"stem":419,"description":18963,"icon":181,"children":-1},"Áp dụng toàn bộ Tailwind CSS v4 vào 3 dự án thực tế — landing page hoàn chỉnh, dashboard layout, e-commerce product card với interactive states.",1783490362875]