[{"data":1,"prerenderedAt":20547},["ShallowReactive",2],{"navigation_docs":3,"-tu-hoc-tailwindcss-responsive-darkmode":420,"-tu-hoc-tailwindcss-responsive-darkmode-surround":20542},[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":20535,"extension":20536,"links":20537,"meta":20538,"navigation":20539,"path":408,"seo":20540,"stem":409,"__hash__":20541},"docs\u002F2.tu-hoc\u002F6.tailwindcss\u002F4.responsive-darkmode.md","Responsive Design & Dark Mode",{"type":424,"value":425,"toc":20492},"minimark",[426,431,444,449,552,567,570,800,803,825,829,835,903,923,927,934,1033,1049,1053,1483,1487,1493,1504,1509,3438,3443,3481,3485,3490,3504,3508,5825,5829,5862,5865,5869,5880,5884,5900,5909,5913,5987,5990,6113,6128,6132,6151,6248,6252,6257,6268,6272,7765,7769,7804,7808,7813,7821,7825,9474,9478,9507,9509,9513,9523,9530,9554,9659,9663,9713,9734,9738,9741,9854,10007,10011,10016,10030,10034,12390,12394,12436,12440,12445,12449,14429,14433,14467,14469,14473,14478,14482,14540,14544,14547,14620,14624,14688,14696,14705,14709,16270,16274,16302,16304,16308,16315,16458,16462,16467,16475,16479,18398,18402,18441,18443,18447,18458,18531,18541,18616,18620,18625,18629,20362,20366,20406,20408,20412,20482,20489],[427,428,430],"h2",{"id":429},"_1-responsive-design","1. Responsive Design",[432,433,434,435,439,440,443],"p",{},"Responsive design là kỹ năng ",[436,437,438],"strong",{},"bắt buộc"," với mọi frontend developer. Tailwind CSS v4 áp dụng triết lý ",[436,441,442],{},"mobile-first",": bạn viết style cho mobile trước, sau đó dùng breakpoint prefix để override cho màn hình lớn hơn.",[445,446,448],"h3",{"id":447},"_11-breakpoint-system","1.1. Breakpoint System",[450,451,452,468],"table",{},[453,454,455],"thead",{},[456,457,458,462,465],"tr",{},[459,460,461],"th",{},"Prefix",[459,463,464],{},"Min-width",[459,466,467],{},"Thiết bị tiêu biểu",[469,470,471,486,500,513,526,539],"tbody",{},[456,472,473,480,483],{},[474,475,476],"td",{},[477,478,479],"em",{},"(không prefix)",[474,481,482],{},"0px",[474,484,485],{},"Mobile (mặc định)",[456,487,488,494,497],{},[474,489,490],{},[491,492,493],"code",{},"sm:",[474,495,496],{},"640px",[474,498,499],{},"Mobile landscape, tablet nhỏ",[456,501,502,507,510],{},[474,503,504],{},[491,505,506],{},"md:",[474,508,509],{},"768px",[474,511,512],{},"Tablet dọc",[456,514,515,520,523],{},[474,516,517],{},[491,518,519],{},"lg:",[474,521,522],{},"1024px",[474,524,525],{},"Tablet ngang, laptop nhỏ",[456,527,528,533,536],{},[474,529,530],{},[491,531,532],{},"xl:",[474,534,535],{},"1280px",[474,537,538],{},"Laptop, desktop",[456,540,541,546,549],{},[474,542,543],{},[491,544,545],{},"2xl:",[474,547,548],{},"1536px",[474,550,551],{},"Desktop rộng, màn hình lớn",[553,554,557,560,561,563,564,566],"callout",{"color":555,"icon":556},"primary","i-lucide-lightbulb",[436,558,559],{},"Mobile-first là gì?"," Bạn bắt đầu với style cho màn hình nhỏ nhất (mobile), sau đó dùng ",[491,562,506],{},", ",[491,565,519],{}," để override khi màn hình rộng ra. Điều này trái ngược với desktop-first (bắt đầu từ desktop rồi ẩn bớt trên mobile). Mobile-first giúp code ít hơn, tối ưu performance cho mobile devices.",[432,568,569],{},"Ví dụ cơ bản:",[571,572,577],"pre",{"className":573,"code":574,"language":575,"meta":576,"style":576},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Mobile-first: 1 column trên mobile, 2 columns từ md trở lên, 3 columns từ lg -->\n\u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n  \u003Cdiv class=\"bg-blue-100 p-4 rounded\">Card 1\u003C\u002Fdiv>\n  \u003Cdiv class=\"bg-blue-100 p-4 rounded\">Card 2\u003C\u002Fdiv>\n  \u003Cdiv class=\"bg-blue-100 p-4 rounded\">Card 3\u003C\u002Fdiv>\n  \u003Cdiv class=\"bg-blue-100 p-4 rounded\">Card 4\u003C\u002Fdiv>\n  \u003Cdiv class=\"bg-blue-100 p-4 rounded\">Card 5\u003C\u002Fdiv>\n  \u003Cdiv class=\"bg-blue-100 p-4 rounded\">Card 6\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[491,578,579,588,618,651,679,707,735,763,791],{"__ignoreMap":576},[580,581,584],"span",{"class":582,"line":583},"line",1,[580,585,587],{"class":586},"sHwdD","\u003C!-- Mobile-first: 1 column trên mobile, 2 columns từ md trở lên, 3 columns từ lg -->\n",[580,589,591,595,599,603,606,609,613,615],{"class":582,"line":590},2,[580,592,594],{"class":593},"sMK4o","\u003C",[580,596,598],{"class":597},"swJcz","div",[580,600,602],{"class":601},"spNyl"," class",[580,604,605],{"class":593},"=",[580,607,608],{"class":593},"\"",[580,610,612],{"class":611},"sfazB","grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6",[580,614,608],{"class":593},[580,616,617],{"class":593},">\n",[580,619,621,624,626,628,630,632,635,637,640,644,647,649],{"class":582,"line":620},3,[580,622,623],{"class":593},"  \u003C",[580,625,598],{"class":597},[580,627,602],{"class":601},[580,629,605],{"class":593},[580,631,608],{"class":593},[580,633,634],{"class":611},"bg-blue-100 p-4 rounded",[580,636,608],{"class":593},[580,638,639],{"class":593},">",[580,641,643],{"class":642},"sTEyZ","Card 1",[580,645,646],{"class":593},"\u003C\u002F",[580,648,598],{"class":597},[580,650,617],{"class":593},[580,652,654,656,658,660,662,664,666,668,670,673,675,677],{"class":582,"line":653},4,[580,655,623],{"class":593},[580,657,598],{"class":597},[580,659,602],{"class":601},[580,661,605],{"class":593},[580,663,608],{"class":593},[580,665,634],{"class":611},[580,667,608],{"class":593},[580,669,639],{"class":593},[580,671,672],{"class":642},"Card 2",[580,674,646],{"class":593},[580,676,598],{"class":597},[580,678,617],{"class":593},[580,680,682,684,686,688,690,692,694,696,698,701,703,705],{"class":582,"line":681},5,[580,683,623],{"class":593},[580,685,598],{"class":597},[580,687,602],{"class":601},[580,689,605],{"class":593},[580,691,608],{"class":593},[580,693,634],{"class":611},[580,695,608],{"class":593},[580,697,639],{"class":593},[580,699,700],{"class":642},"Card 3",[580,702,646],{"class":593},[580,704,598],{"class":597},[580,706,617],{"class":593},[580,708,710,712,714,716,718,720,722,724,726,729,731,733],{"class":582,"line":709},6,[580,711,623],{"class":593},[580,713,598],{"class":597},[580,715,602],{"class":601},[580,717,605],{"class":593},[580,719,608],{"class":593},[580,721,634],{"class":611},[580,723,608],{"class":593},[580,725,639],{"class":593},[580,727,728],{"class":642},"Card 4",[580,730,646],{"class":593},[580,732,598],{"class":597},[580,734,617],{"class":593},[580,736,738,740,742,744,746,748,750,752,754,757,759,761],{"class":582,"line":737},7,[580,739,623],{"class":593},[580,741,598],{"class":597},[580,743,602],{"class":601},[580,745,605],{"class":593},[580,747,608],{"class":593},[580,749,634],{"class":611},[580,751,608],{"class":593},[580,753,639],{"class":593},[580,755,756],{"class":642},"Card 5",[580,758,646],{"class":593},[580,760,598],{"class":597},[580,762,617],{"class":593},[580,764,766,768,770,772,774,776,778,780,782,785,787,789],{"class":582,"line":765},8,[580,767,623],{"class":593},[580,769,598],{"class":597},[580,771,602],{"class":601},[580,773,605],{"class":593},[580,775,608],{"class":593},[580,777,634],{"class":611},[580,779,608],{"class":593},[580,781,639],{"class":593},[580,783,784],{"class":642},"Card 6",[580,786,646],{"class":593},[580,788,598],{"class":597},[580,790,617],{"class":593},[580,792,794,796,798],{"class":582,"line":793},9,[580,795,646],{"class":593},[580,797,598],{"class":597},[580,799,617],{"class":593},[432,801,802],{},"Giải thích:",[804,805,806,813,819],"ul",{},[807,808,809,812],"li",{},[491,810,811],{},"grid-cols-1"," (mobile): 1 cột",[807,814,815,818],{},[491,816,817],{},"md:grid-cols-2"," (tablet trở lên): 2 cột",[807,820,821,824],{},[491,822,823],{},"lg:grid-cols-3"," (laptop trở lên): 3 cột",[445,826,828],{"id":827},"_12-responsive-utilities-mọi-thứ-đều-responsive-được","1.2. Responsive Utilities — mọi thứ đều responsive được",[432,830,831,834],{},[436,832,833],{},"Hầu như mọi utility class trong Tailwind đều có thể gắn breakpoint prefix."," Bạn có thể thay đổi font size, padding, margin, display, flex direction, color, v.v... dựa trên kích thước màn hình.",[571,836,838],{"className":573,"code":837,"language":575,"meta":576,"style":576},"\u003Cdiv class=\"\n  text-sm md:text-base lg:text-lg\n  px-4 md:px-8 lg:px-16\n  flex flex-col md:flex-row\n  hidden md:block\n  w-full md:w-1\u002F2 lg:w-1\u002F3\n  bg-gray-100 md:bg-white lg:bg-gray-50\n\">\n  Responsive ở mọi khía cạnh\n\u003C\u002Fdiv>\n",[491,839,840,853,858,863,868,873,878,883,889,894],{"__ignoreMap":576},[580,841,842,844,846,848,850],{"class":582,"line":583},[580,843,594],{"class":593},[580,845,598],{"class":597},[580,847,602],{"class":601},[580,849,605],{"class":593},[580,851,852],{"class":593},"\"\n",[580,854,855],{"class":582,"line":590},[580,856,857],{"class":611},"  text-sm md:text-base lg:text-lg\n",[580,859,860],{"class":582,"line":620},[580,861,862],{"class":611},"  px-4 md:px-8 lg:px-16\n",[580,864,865],{"class":582,"line":653},[580,866,867],{"class":611},"  flex flex-col md:flex-row\n",[580,869,870],{"class":582,"line":681},[580,871,872],{"class":611},"  hidden md:block\n",[580,874,875],{"class":582,"line":709},[580,876,877],{"class":611},"  w-full md:w-1\u002F2 lg:w-1\u002F3\n",[580,879,880],{"class":582,"line":737},[580,881,882],{"class":611},"  bg-gray-100 md:bg-white lg:bg-gray-50\n",[580,884,885,887],{"class":582,"line":765},[580,886,608],{"class":593},[580,888,617],{"class":593},[580,890,891],{"class":582,"line":793},[580,892,893],{"class":642},"  Responsive ở mọi khía cạnh\n",[580,895,897,899,901],{"class":582,"line":896},10,[580,898,646],{"class":593},[580,900,598],{"class":597},[580,902,617],{"class":593},[553,904,907,917],{"color":905,"icon":906},"warning","i-lucide-star",[432,908,909,910,913,914],{},"⭐ ",[436,911,912],{},"Câu PV:"," ",[477,915,916],{},"\"Tại sao nói Tailwind khiến responsive design dễ hơn CSS truyền thống?\"",[918,919,920],"blockquote",{},[432,921,922],{},"\"Vì với Tailwind, bạn không cần viết media query riêng. Mỗi class đều có thể responsive bằng cách thêm prefix. Điều này giữ code gần với element — bạn thấy ngay element đó sẽ trông như thế nào ở từng breakpoint, không cần scroll lên xuống giữa HTML và CSS file. Cộng với mobile-first mindset được built-in vào design system — spacing, font size scale được tính toán để hoạt động tốt trên mọi kích thước.\"",[445,924,926],{"id":925},"_13-customizing-breakpoints","1.3. Customizing Breakpoints",[432,928,929,930,933],{},"Trong Tailwind CSS v4, bạn có thể tùy chỉnh breakpoints qua ",[491,931,932],{},"@theme",":",[571,935,939],{"className":936,"code":937,"language":938,"meta":576,"style":576},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@import \"tailwindcss\";\n\n@theme {\n  --breakpoint-xs: 30rem;   \u002F* 480px *\u002F\n  --breakpoint-sm: 40rem;   \u002F* 640px *\u002F\n  --breakpoint-md: 48rem;   \u002F* 768px *\u002F\n  --breakpoint-lg: 64rem;   \u002F* 1024px *\u002F\n  --breakpoint-xl: 80rem;   \u002F* 1280px *\u002F\n  --breakpoint-2xl: 96rem;  \u002F* 1536px *\u002F\n  --breakpoint-3xl: 120rem; \u002F* 1920px — custom mới *\u002F\n}\n","css",[491,940,941,958,964,971,979,987,995,1003,1011,1019,1027],{"__ignoreMap":576},[580,942,943,947,950,953,955],{"class":582,"line":583},[580,944,946],{"class":945},"s7zQu","@import",[580,948,949],{"class":593}," \"",[580,951,952],{"class":611},"tailwindcss",[580,954,608],{"class":593},[580,956,957],{"class":593},";\n",[580,959,960],{"class":582,"line":590},[580,961,963],{"emptyLinePlaceholder":962},true,"\n",[580,965,966,968],{"class":582,"line":620},[580,967,932],{"class":945},[580,969,970],{"class":593}," {\n",[580,972,973,976],{"class":582,"line":653},[580,974,975],{"class":642},"  --breakpoint-xs: 30rem;   ",[580,977,978],{"class":586},"\u002F* 480px *\u002F\n",[580,980,981,984],{"class":582,"line":681},[580,982,983],{"class":642},"  --breakpoint-sm: 40rem;   ",[580,985,986],{"class":586},"\u002F* 640px *\u002F\n",[580,988,989,992],{"class":582,"line":709},[580,990,991],{"class":642},"  --breakpoint-md: 48rem;   ",[580,993,994],{"class":586},"\u002F* 768px *\u002F\n",[580,996,997,1000],{"class":582,"line":737},[580,998,999],{"class":642},"  --breakpoint-lg: 64rem;   ",[580,1001,1002],{"class":586},"\u002F* 1024px *\u002F\n",[580,1004,1005,1008],{"class":582,"line":765},[580,1006,1007],{"class":642},"  --breakpoint-xl: 80rem;   ",[580,1009,1010],{"class":586},"\u002F* 1280px *\u002F\n",[580,1012,1013,1016],{"class":582,"line":793},[580,1014,1015],{"class":642},"  --breakpoint-2xl: 96rem;  ",[580,1017,1018],{"class":586},"\u002F* 1536px *\u002F\n",[580,1020,1021,1024],{"class":582,"line":896},[580,1022,1023],{"class":642},"  --breakpoint-3xl: 120rem; ",[580,1025,1026],{"class":586},"\u002F* 1920px — custom mới *\u002F\n",[580,1028,1030],{"class":582,"line":1029},11,[580,1031,1032],{"class":593},"}\n",[553,1034,1036,1037,1040,1041,1044,1045,1048],{"color":555,"icon":1035},"i-lucide-info","Bạn cũng có thể dùng ",[436,1038,1039],{},"max-width breakpoints"," bằng cách thêm ",[491,1042,1043],{},"max-"," prefix. Tuy nhiên, với mobile-first approach, bạn hiếm khi cần dùng. Max-width breakpoints hữu ích trong vài case đặc biệt: ",[491,1046,1047],{},"max-md:hidden"," (ẩn khi màn hình nhỏ hơn md).",[445,1050,1052],{"id":1051},"_14-responsive-patterns-thường-gặp","1.4. Responsive Patterns Thường Gặp",[571,1054,1056],{"className":573,"code":1055,"language":575,"meta":576,"style":576},"\u003C!-- Pattern 1: Stack trên mobile, side-by-side trên desktop -->\n\u003Cdiv class=\"flex flex-col lg:flex-row gap-4\">\n  \u003Caside class=\"lg:w-1\u002F4 bg-gray-100 p-4\">Sidebar\u003C\u002Faside>\n  \u003Cmain class=\"lg:w-3\u002F4 bg-white p-4\">Main Content\u003C\u002Fmain>\n\u003C\u002Fdiv>\n\n\u003C!-- Pattern 2: Ẩn\u002Fhiện element dựa trên màn hình -->\n\u003Cnav>\n  \u003C!-- Hamburger icon — chỉ hiện trên mobile -->\n  \u003Cbutton class=\"block lg:hidden\">\n    \u003Csvg>\u003C!-- hamburger icon -->\u003C\u002Fsvg>\n  \u003C\u002Fbutton>\n  \u003C!-- Full menu — chỉ hiện từ lg trở lên -->\n  \u003Cul class=\"hidden lg:flex gap-6\">\n    \u003Cli>\u003Ca href=\"#\">Home\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">About\u003C\u002Fa>\u003C\u002Fli>\n    \u003Cli>\u003Ca href=\"#\">Contact\u003C\u002Fa>\u003C\u002Fli>\n  \u003C\u002Ful>\n\u003C\u002Fnav>\n\n\u003C!-- Pattern 3: Font size scale theo màn hình -->\n\u003Ch1 class=\"text-2xl md:text-4xl lg:text-5xl font-bold\">\n  Hero Headline\n\u003C\u002Fh1>\n\n\u003C!-- Pattern 4: Padding tăng dần theo màn hình -->\n\u003Csection class=\"px-4 py-8 md:px-8 md:py-12 lg:px-16 lg:py-20\">\n  \u003Cp>Section với padding responsive\u003C\u002Fp>\n\u003C\u002Fsection>\n",[491,1057,1058,1063,1082,1111,1140,1148,1152,1157,1166,1171,1191,1210,1220,1226,1246,1287,1323,1359,1368,1377,1382,1388,1409,1415,1424,1429,1435,1456,1474],{"__ignoreMap":576},[580,1059,1060],{"class":582,"line":583},[580,1061,1062],{"class":586},"\u003C!-- Pattern 1: Stack trên mobile, side-by-side trên desktop -->\n",[580,1064,1065,1067,1069,1071,1073,1075,1078,1080],{"class":582,"line":590},[580,1066,594],{"class":593},[580,1068,598],{"class":597},[580,1070,602],{"class":601},[580,1072,605],{"class":593},[580,1074,608],{"class":593},[580,1076,1077],{"class":611},"flex flex-col lg:flex-row gap-4",[580,1079,608],{"class":593},[580,1081,617],{"class":593},[580,1083,1084,1086,1089,1091,1093,1095,1098,1100,1102,1105,1107,1109],{"class":582,"line":620},[580,1085,623],{"class":593},[580,1087,1088],{"class":597},"aside",[580,1090,602],{"class":601},[580,1092,605],{"class":593},[580,1094,608],{"class":593},[580,1096,1097],{"class":611},"lg:w-1\u002F4 bg-gray-100 p-4",[580,1099,608],{"class":593},[580,1101,639],{"class":593},[580,1103,1104],{"class":642},"Sidebar",[580,1106,646],{"class":593},[580,1108,1088],{"class":597},[580,1110,617],{"class":593},[580,1112,1113,1115,1118,1120,1122,1124,1127,1129,1131,1134,1136,1138],{"class":582,"line":653},[580,1114,623],{"class":593},[580,1116,1117],{"class":597},"main",[580,1119,602],{"class":601},[580,1121,605],{"class":593},[580,1123,608],{"class":593},[580,1125,1126],{"class":611},"lg:w-3\u002F4 bg-white p-4",[580,1128,608],{"class":593},[580,1130,639],{"class":593},[580,1132,1133],{"class":642},"Main Content",[580,1135,646],{"class":593},[580,1137,1117],{"class":597},[580,1139,617],{"class":593},[580,1141,1142,1144,1146],{"class":582,"line":681},[580,1143,646],{"class":593},[580,1145,598],{"class":597},[580,1147,617],{"class":593},[580,1149,1150],{"class":582,"line":709},[580,1151,963],{"emptyLinePlaceholder":962},[580,1153,1154],{"class":582,"line":737},[580,1155,1156],{"class":586},"\u003C!-- Pattern 2: Ẩn\u002Fhiện element dựa trên màn hình -->\n",[580,1158,1159,1161,1164],{"class":582,"line":765},[580,1160,594],{"class":593},[580,1162,1163],{"class":597},"nav",[580,1165,617],{"class":593},[580,1167,1168],{"class":582,"line":793},[580,1169,1170],{"class":586},"  \u003C!-- Hamburger icon — chỉ hiện trên mobile -->\n",[580,1172,1173,1175,1178,1180,1182,1184,1187,1189],{"class":582,"line":896},[580,1174,623],{"class":593},[580,1176,1177],{"class":597},"button",[580,1179,602],{"class":601},[580,1181,605],{"class":593},[580,1183,608],{"class":593},[580,1185,1186],{"class":611},"block lg:hidden",[580,1188,608],{"class":593},[580,1190,617],{"class":593},[580,1192,1193,1196,1199,1201,1204,1206,1208],{"class":582,"line":1029},[580,1194,1195],{"class":593},"    \u003C",[580,1197,1198],{"class":597},"svg",[580,1200,639],{"class":593},[580,1202,1203],{"class":586},"\u003C!-- hamburger icon -->",[580,1205,646],{"class":593},[580,1207,1198],{"class":597},[580,1209,617],{"class":593},[580,1211,1213,1216,1218],{"class":582,"line":1212},12,[580,1214,1215],{"class":593},"  \u003C\u002F",[580,1217,1177],{"class":597},[580,1219,617],{"class":593},[580,1221,1223],{"class":582,"line":1222},13,[580,1224,1225],{"class":586},"  \u003C!-- Full menu — chỉ hiện từ lg trở lên -->\n",[580,1227,1229,1231,1233,1235,1237,1239,1242,1244],{"class":582,"line":1228},14,[580,1230,623],{"class":593},[580,1232,804],{"class":597},[580,1234,602],{"class":601},[580,1236,605],{"class":593},[580,1238,608],{"class":593},[580,1240,1241],{"class":611},"hidden lg:flex gap-6",[580,1243,608],{"class":593},[580,1245,617],{"class":593},[580,1247,1249,1251,1253,1256,1259,1262,1264,1266,1269,1271,1273,1276,1278,1280,1283,1285],{"class":582,"line":1248},15,[580,1250,1195],{"class":593},[580,1252,807],{"class":597},[580,1254,1255],{"class":593},">\u003C",[580,1257,1258],{"class":597},"a",[580,1260,1261],{"class":601}," href",[580,1263,605],{"class":593},[580,1265,608],{"class":593},[580,1267,1268],{"class":611},"#",[580,1270,608],{"class":593},[580,1272,639],{"class":593},[580,1274,1275],{"class":642},"Home",[580,1277,646],{"class":593},[580,1279,1258],{"class":597},[580,1281,1282],{"class":593},">\u003C\u002F",[580,1284,807],{"class":597},[580,1286,617],{"class":593},[580,1288,1290,1292,1294,1296,1298,1300,1302,1304,1306,1308,1310,1313,1315,1317,1319,1321],{"class":582,"line":1289},16,[580,1291,1195],{"class":593},[580,1293,807],{"class":597},[580,1295,1255],{"class":593},[580,1297,1258],{"class":597},[580,1299,1261],{"class":601},[580,1301,605],{"class":593},[580,1303,608],{"class":593},[580,1305,1268],{"class":611},[580,1307,608],{"class":593},[580,1309,639],{"class":593},[580,1311,1312],{"class":642},"About",[580,1314,646],{"class":593},[580,1316,1258],{"class":597},[580,1318,1282],{"class":593},[580,1320,807],{"class":597},[580,1322,617],{"class":593},[580,1324,1326,1328,1330,1332,1334,1336,1338,1340,1342,1344,1346,1349,1351,1353,1355,1357],{"class":582,"line":1325},17,[580,1327,1195],{"class":593},[580,1329,807],{"class":597},[580,1331,1255],{"class":593},[580,1333,1258],{"class":597},[580,1335,1261],{"class":601},[580,1337,605],{"class":593},[580,1339,608],{"class":593},[580,1341,1268],{"class":611},[580,1343,608],{"class":593},[580,1345,639],{"class":593},[580,1347,1348],{"class":642},"Contact",[580,1350,646],{"class":593},[580,1352,1258],{"class":597},[580,1354,1282],{"class":593},[580,1356,807],{"class":597},[580,1358,617],{"class":593},[580,1360,1362,1364,1366],{"class":582,"line":1361},18,[580,1363,1215],{"class":593},[580,1365,804],{"class":597},[580,1367,617],{"class":593},[580,1369,1371,1373,1375],{"class":582,"line":1370},19,[580,1372,646],{"class":593},[580,1374,1163],{"class":597},[580,1376,617],{"class":593},[580,1378,1380],{"class":582,"line":1379},20,[580,1381,963],{"emptyLinePlaceholder":962},[580,1383,1385],{"class":582,"line":1384},21,[580,1386,1387],{"class":586},"\u003C!-- Pattern 3: Font size scale theo màn hình -->\n",[580,1389,1391,1393,1396,1398,1400,1402,1405,1407],{"class":582,"line":1390},22,[580,1392,594],{"class":593},[580,1394,1395],{"class":597},"h1",[580,1397,602],{"class":601},[580,1399,605],{"class":593},[580,1401,608],{"class":593},[580,1403,1404],{"class":611},"text-2xl md:text-4xl lg:text-5xl font-bold",[580,1406,608],{"class":593},[580,1408,617],{"class":593},[580,1410,1412],{"class":582,"line":1411},23,[580,1413,1414],{"class":642},"  Hero Headline\n",[580,1416,1418,1420,1422],{"class":582,"line":1417},24,[580,1419,646],{"class":593},[580,1421,1395],{"class":597},[580,1423,617],{"class":593},[580,1425,1427],{"class":582,"line":1426},25,[580,1428,963],{"emptyLinePlaceholder":962},[580,1430,1432],{"class":582,"line":1431},26,[580,1433,1434],{"class":586},"\u003C!-- Pattern 4: Padding tăng dần theo màn hình -->\n",[580,1436,1438,1440,1443,1445,1447,1449,1452,1454],{"class":582,"line":1437},27,[580,1439,594],{"class":593},[580,1441,1442],{"class":597},"section",[580,1444,602],{"class":601},[580,1446,605],{"class":593},[580,1448,608],{"class":593},[580,1450,1451],{"class":611},"px-4 py-8 md:px-8 md:py-12 lg:px-16 lg:py-20",[580,1453,608],{"class":593},[580,1455,617],{"class":593},[580,1457,1459,1461,1463,1465,1468,1470,1472],{"class":582,"line":1458},28,[580,1460,623],{"class":593},[580,1462,432],{"class":597},[580,1464,639],{"class":593},[580,1466,1467],{"class":642},"Section với padding responsive",[580,1469,646],{"class":593},[580,1471,432],{"class":597},[580,1473,617],{"class":593},[580,1475,1477,1479,1481],{"class":582,"line":1476},29,[580,1478,646],{"class":593},[580,1480,1442],{"class":597},[580,1482,617],{"class":593},[445,1484,1486],{"id":1485},"_15-bài-tập-1-navigation-hamburger-mobile-full-menu-desktop","1.5. BÀI TẬP 1 — Navigation: Hamburger Mobile → Full Menu Desktop",[432,1488,1489,1492],{},[436,1490,1491],{},"Yêu cầu:"," Xây dựng navigation bar responsive:",[804,1494,1495,1498,1501],{},[807,1496,1497],{},"Mobile (\u003C 768px): Logo bên trái, hamburger button bên phải. Click hamburger → menu dropdown hiện ra.",[807,1499,1500],{},"Tablet\u002FDesktop (>= 768px): Logo + menu items nằm ngang + CTA button.",[807,1502,1503],{},"Fixed top, có backdrop-blur khi scroll.",[432,1505,1506],{},[436,1507,1508],{},"Code đầy đủ:",[571,1510,1512],{"className":573,"code":1511,"language":575,"meta":576,"style":576},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"vi\" class=\"scroll-smooth\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Responsive Navigation - Tailwind CSS v4\u003C\u002Ftitle>\n  \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tailwindcss\u002Fbrowser@4\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody class=\"min-h-screen bg-gray-50\">\n\n  \u003C!-- Navigation -->\n  \u003Cheader class=\"fixed top-0 left-0 right-0 z-50 bg-white\u002F80 backdrop-blur-md border-b border-gray-200\">\n    \u003Cnav class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n      \u003Cdiv class=\"flex items-center justify-between h-16\">\n        \n        \u003C!-- Logo -->\n        \u003Cdiv class=\"flex-shrink-0\">\n          \u003Ca href=\"#\" class=\"text-xl font-bold text-gray-900\">\n            Brand\u003Cspan class=\"text-blue-600\">Name\u003C\u002Fspan>\n          \u003C\u002Fa>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Desktop Menu (hidden on mobile) -->\n        \u003Cdiv class=\"hidden md:flex md:items-center md:gap-8\">\n          \u003Ca href=\"#features\" class=\"text-gray-600 hover:text-gray-900 transition-colors\">Features\u003C\u002Fa>\n          \u003Ca href=\"#pricing\" class=\"text-gray-600 hover:text-gray-900 transition-colors\">Pricing\u003C\u002Fa>\n          \u003Ca href=\"#about\" class=\"text-gray-600 hover:text-gray-900 transition-colors\">About\u003C\u002Fa>\n          \u003Ca href=\"#contact\" class=\"text-gray-600 hover:text-gray-900 transition-colors\">Contact\u003C\u002Fa>\n          \u003Ca href=\"#\" class=\"inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm\">\n            Get Started\n          \u003C\u002Fa>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Mobile Hamburger Button (hidden on desktop) -->\n        \u003Cbutton id=\"menu-toggle\" class=\"md:hidden p-2 rounded-lg text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500\" aria-label=\"Toggle menu\">\n          \u003C!-- Hamburger icon -->\n          \u003Csvg id=\"menu-icon-open\" class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16M4 18h16\"\u002F>\n          \u003C\u002Fsvg>\n          \u003C!-- Close icon (hidden by default) -->\n          \u003Csvg id=\"menu-icon-close\" class=\"w-6 h-6 hidden\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Mobile Menu Dropdown (hidden by default) -->\n      \u003Cdiv id=\"mobile-menu\" class=\"md:hidden hidden pb-4 border-t border-gray-100\">\n        \u003Cdiv class=\"flex flex-col gap-2 pt-4\">\n          \u003Ca href=\"#features\" class=\"block px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors\">Features\u003C\u002Fa>\n          \u003Ca href=\"#pricing\" class=\"block px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors\">Pricing\u003C\u002Fa>\n          \u003Ca href=\"#about\" class=\"block px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors\">About\u003C\u002Fa>\n          \u003Ca href=\"#contact\" class=\"block px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors\">Contact\u003C\u002Fa>\n          \u003Ca href=\"#\" class=\"block px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-center\">\n            Get Started\n          \u003C\u002Fa>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fnav>\n  \u003C\u002Fheader>\n\n  \u003C!-- Spacer để nội dung không bị che bởi fixed header -->\n  \u003Cdiv class=\"h-16\">\u003C\u002Fdiv>\n\n  \u003C!-- Demo Content -->\n  \u003Cmain class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16\">\n    \u003Csection id=\"features\" class=\"py-16\">\n      \u003Ch2 class=\"text-3xl font-bold mb-8\">Features Section\u003C\u002Fh2>\n      \u003Cp class=\"text-gray-600\">Scroll để test fixed header với backdrop-blur.\u003C\u002Fp>\n    \u003C\u002Fsection>\n    \u003Csection id=\"pricing\" class=\"py-16\">\n      \u003Ch2 class=\"text-3xl font-bold mb-8\">Pricing Section\u003C\u002Fh2>\n    \u003C\u002Fsection>\n  \u003C\u002Fmain>\n\n  \u003Cscript>\n    const menuToggle = document.getElementById('menu-toggle');\n    const mobileMenu = document.getElementById('mobile-menu');\n    const iconOpen = document.getElementById('menu-icon-open');\n    const iconClose = document.getElementById('menu-icon-close');\n\n    menuToggle.addEventListener('click', () => {\n      mobileMenu.classList.toggle('hidden');\n      iconOpen.classList.toggle('hidden');\n      iconClose.classList.toggle('hidden');\n    });\n\n    \u002F\u002F Đóng menu khi click vào link\n    mobileMenu.querySelectorAll('a').forEach(link => {\n      link.addEventListener('click', () => {\n        mobileMenu.classList.add('hidden');\n        iconOpen.classList.remove('hidden');\n        iconClose.classList.add('hidden');\n      });\n    });\n  \u003C\u002Fscript>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[491,1513,1514,1527,1558,1567,1588,1620,1638,1663,1671,1691,1695,1700,1720,1739,1759,1764,1769,1789,1819,1850,1859,1868,1872,1877,1896,1935,1973,2010,2047,2076,2082,2091,2100,2105,2111,2155,2161,2228,2287,2296,2302,2363,2413,2422,2431,2441,2446,2452,2483,2503,2541,2578,2615,2652,2682,2687,2696,2705,2714,2724,2733,2738,2744,2768,2773,2779,2799,2830,2859,2888,2897,2927,2955,2964,2973,2978,2987,3023,3051,3079,3107,3112,3143,3172,3198,3224,3234,3239,3245,3281,3307,3334,3361,3387,3397,3406,3415,3420,3429],{"__ignoreMap":576},[580,1515,1516,1519,1522,1525],{"class":582,"line":583},[580,1517,1518],{"class":593},"\u003C!",[580,1520,1521],{"class":597},"DOCTYPE",[580,1523,1524],{"class":601}," html",[580,1526,617],{"class":593},[580,1528,1529,1531,1533,1536,1538,1540,1543,1545,1547,1549,1551,1554,1556],{"class":582,"line":590},[580,1530,594],{"class":593},[580,1532,575],{"class":597},[580,1534,1535],{"class":601}," lang",[580,1537,605],{"class":593},[580,1539,608],{"class":593},[580,1541,1542],{"class":611},"vi",[580,1544,608],{"class":593},[580,1546,602],{"class":601},[580,1548,605],{"class":593},[580,1550,608],{"class":593},[580,1552,1553],{"class":611},"scroll-smooth",[580,1555,608],{"class":593},[580,1557,617],{"class":593},[580,1559,1560,1562,1565],{"class":582,"line":620},[580,1561,594],{"class":593},[580,1563,1564],{"class":597},"head",[580,1566,617],{"class":593},[580,1568,1569,1571,1574,1577,1579,1581,1584,1586],{"class":582,"line":653},[580,1570,623],{"class":593},[580,1572,1573],{"class":597},"meta",[580,1575,1576],{"class":601}," charset",[580,1578,605],{"class":593},[580,1580,608],{"class":593},[580,1582,1583],{"class":611},"UTF-8",[580,1585,608],{"class":593},[580,1587,617],{"class":593},[580,1589,1590,1592,1594,1597,1599,1601,1604,1606,1609,1611,1613,1616,1618],{"class":582,"line":681},[580,1591,623],{"class":593},[580,1593,1573],{"class":597},[580,1595,1596],{"class":601}," name",[580,1598,605],{"class":593},[580,1600,608],{"class":593},[580,1602,1603],{"class":611},"viewport",[580,1605,608],{"class":593},[580,1607,1608],{"class":601}," content",[580,1610,605],{"class":593},[580,1612,608],{"class":593},[580,1614,1615],{"class":611},"width=device-width, initial-scale=1.0",[580,1617,608],{"class":593},[580,1619,617],{"class":593},[580,1621,1622,1624,1627,1629,1632,1634,1636],{"class":582,"line":709},[580,1623,623],{"class":593},[580,1625,1626],{"class":597},"title",[580,1628,639],{"class":593},[580,1630,1631],{"class":642},"Responsive Navigation - Tailwind CSS v4",[580,1633,646],{"class":593},[580,1635,1626],{"class":597},[580,1637,617],{"class":593},[580,1639,1640,1642,1645,1648,1650,1652,1655,1657,1659,1661],{"class":582,"line":737},[580,1641,623],{"class":593},[580,1643,1644],{"class":597},"script",[580,1646,1647],{"class":601}," src",[580,1649,605],{"class":593},[580,1651,608],{"class":593},[580,1653,1654],{"class":611},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tailwindcss\u002Fbrowser@4",[580,1656,608],{"class":593},[580,1658,1282],{"class":593},[580,1660,1644],{"class":597},[580,1662,617],{"class":593},[580,1664,1665,1667,1669],{"class":582,"line":765},[580,1666,646],{"class":593},[580,1668,1564],{"class":597},[580,1670,617],{"class":593},[580,1672,1673,1675,1678,1680,1682,1684,1687,1689],{"class":582,"line":793},[580,1674,594],{"class":593},[580,1676,1677],{"class":597},"body",[580,1679,602],{"class":601},[580,1681,605],{"class":593},[580,1683,608],{"class":593},[580,1685,1686],{"class":611},"min-h-screen bg-gray-50",[580,1688,608],{"class":593},[580,1690,617],{"class":593},[580,1692,1693],{"class":582,"line":896},[580,1694,963],{"emptyLinePlaceholder":962},[580,1696,1697],{"class":582,"line":1029},[580,1698,1699],{"class":586},"  \u003C!-- Navigation -->\n",[580,1701,1702,1704,1707,1709,1711,1713,1716,1718],{"class":582,"line":1212},[580,1703,623],{"class":593},[580,1705,1706],{"class":597},"header",[580,1708,602],{"class":601},[580,1710,605],{"class":593},[580,1712,608],{"class":593},[580,1714,1715],{"class":611},"fixed top-0 left-0 right-0 z-50 bg-white\u002F80 backdrop-blur-md border-b border-gray-200",[580,1717,608],{"class":593},[580,1719,617],{"class":593},[580,1721,1722,1724,1726,1728,1730,1732,1735,1737],{"class":582,"line":1222},[580,1723,1195],{"class":593},[580,1725,1163],{"class":597},[580,1727,602],{"class":601},[580,1729,605],{"class":593},[580,1731,608],{"class":593},[580,1733,1734],{"class":611},"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",[580,1736,608],{"class":593},[580,1738,617],{"class":593},[580,1740,1741,1744,1746,1748,1750,1752,1755,1757],{"class":582,"line":1228},[580,1742,1743],{"class":593},"      \u003C",[580,1745,598],{"class":597},[580,1747,602],{"class":601},[580,1749,605],{"class":593},[580,1751,608],{"class":593},[580,1753,1754],{"class":611},"flex items-center justify-between h-16",[580,1756,608],{"class":593},[580,1758,617],{"class":593},[580,1760,1761],{"class":582,"line":1248},[580,1762,1763],{"class":642},"        \n",[580,1765,1766],{"class":582,"line":1289},[580,1767,1768],{"class":586},"        \u003C!-- Logo -->\n",[580,1770,1771,1774,1776,1778,1780,1782,1785,1787],{"class":582,"line":1325},[580,1772,1773],{"class":593},"        \u003C",[580,1775,598],{"class":597},[580,1777,602],{"class":601},[580,1779,605],{"class":593},[580,1781,608],{"class":593},[580,1783,1784],{"class":611},"flex-shrink-0",[580,1786,608],{"class":593},[580,1788,617],{"class":593},[580,1790,1791,1794,1796,1798,1800,1802,1804,1806,1808,1810,1812,1815,1817],{"class":582,"line":1361},[580,1792,1793],{"class":593},"          \u003C",[580,1795,1258],{"class":597},[580,1797,1261],{"class":601},[580,1799,605],{"class":593},[580,1801,608],{"class":593},[580,1803,1268],{"class":611},[580,1805,608],{"class":593},[580,1807,602],{"class":601},[580,1809,605],{"class":593},[580,1811,608],{"class":593},[580,1813,1814],{"class":611},"text-xl font-bold text-gray-900",[580,1816,608],{"class":593},[580,1818,617],{"class":593},[580,1820,1821,1824,1826,1828,1830,1832,1834,1837,1839,1841,1844,1846,1848],{"class":582,"line":1370},[580,1822,1823],{"class":642},"            Brand",[580,1825,594],{"class":593},[580,1827,580],{"class":597},[580,1829,602],{"class":601},[580,1831,605],{"class":593},[580,1833,608],{"class":593},[580,1835,1836],{"class":611},"text-blue-600",[580,1838,608],{"class":593},[580,1840,639],{"class":593},[580,1842,1843],{"class":642},"Name",[580,1845,646],{"class":593},[580,1847,580],{"class":597},[580,1849,617],{"class":593},[580,1851,1852,1855,1857],{"class":582,"line":1379},[580,1853,1854],{"class":593},"          \u003C\u002F",[580,1856,1258],{"class":597},[580,1858,617],{"class":593},[580,1860,1861,1864,1866],{"class":582,"line":1384},[580,1862,1863],{"class":593},"        \u003C\u002F",[580,1865,598],{"class":597},[580,1867,617],{"class":593},[580,1869,1870],{"class":582,"line":1390},[580,1871,963],{"emptyLinePlaceholder":962},[580,1873,1874],{"class":582,"line":1411},[580,1875,1876],{"class":586},"        \u003C!-- Desktop Menu (hidden on mobile) -->\n",[580,1878,1879,1881,1883,1885,1887,1889,1892,1894],{"class":582,"line":1417},[580,1880,1773],{"class":593},[580,1882,598],{"class":597},[580,1884,602],{"class":601},[580,1886,605],{"class":593},[580,1888,608],{"class":593},[580,1890,1891],{"class":611},"hidden md:flex md:items-center md:gap-8",[580,1893,608],{"class":593},[580,1895,617],{"class":593},[580,1897,1898,1900,1902,1904,1906,1908,1911,1913,1915,1917,1919,1922,1924,1926,1929,1931,1933],{"class":582,"line":1426},[580,1899,1793],{"class":593},[580,1901,1258],{"class":597},[580,1903,1261],{"class":601},[580,1905,605],{"class":593},[580,1907,608],{"class":593},[580,1909,1910],{"class":611},"#features",[580,1912,608],{"class":593},[580,1914,602],{"class":601},[580,1916,605],{"class":593},[580,1918,608],{"class":593},[580,1920,1921],{"class":611},"text-gray-600 hover:text-gray-900 transition-colors",[580,1923,608],{"class":593},[580,1925,639],{"class":593},[580,1927,1928],{"class":642},"Features",[580,1930,646],{"class":593},[580,1932,1258],{"class":597},[580,1934,617],{"class":593},[580,1936,1937,1939,1941,1943,1945,1947,1950,1952,1954,1956,1958,1960,1962,1964,1967,1969,1971],{"class":582,"line":1431},[580,1938,1793],{"class":593},[580,1940,1258],{"class":597},[580,1942,1261],{"class":601},[580,1944,605],{"class":593},[580,1946,608],{"class":593},[580,1948,1949],{"class":611},"#pricing",[580,1951,608],{"class":593},[580,1953,602],{"class":601},[580,1955,605],{"class":593},[580,1957,608],{"class":593},[580,1959,1921],{"class":611},[580,1961,608],{"class":593},[580,1963,639],{"class":593},[580,1965,1966],{"class":642},"Pricing",[580,1968,646],{"class":593},[580,1970,1258],{"class":597},[580,1972,617],{"class":593},[580,1974,1975,1977,1979,1981,1983,1985,1988,1990,1992,1994,1996,1998,2000,2002,2004,2006,2008],{"class":582,"line":1437},[580,1976,1793],{"class":593},[580,1978,1258],{"class":597},[580,1980,1261],{"class":601},[580,1982,605],{"class":593},[580,1984,608],{"class":593},[580,1986,1987],{"class":611},"#about",[580,1989,608],{"class":593},[580,1991,602],{"class":601},[580,1993,605],{"class":593},[580,1995,608],{"class":593},[580,1997,1921],{"class":611},[580,1999,608],{"class":593},[580,2001,639],{"class":593},[580,2003,1312],{"class":642},[580,2005,646],{"class":593},[580,2007,1258],{"class":597},[580,2009,617],{"class":593},[580,2011,2012,2014,2016,2018,2020,2022,2025,2027,2029,2031,2033,2035,2037,2039,2041,2043,2045],{"class":582,"line":1458},[580,2013,1793],{"class":593},[580,2015,1258],{"class":597},[580,2017,1261],{"class":601},[580,2019,605],{"class":593},[580,2021,608],{"class":593},[580,2023,2024],{"class":611},"#contact",[580,2026,608],{"class":593},[580,2028,602],{"class":601},[580,2030,605],{"class":593},[580,2032,608],{"class":593},[580,2034,1921],{"class":611},[580,2036,608],{"class":593},[580,2038,639],{"class":593},[580,2040,1348],{"class":642},[580,2042,646],{"class":593},[580,2044,1258],{"class":597},[580,2046,617],{"class":593},[580,2048,2049,2051,2053,2055,2057,2059,2061,2063,2065,2067,2069,2072,2074],{"class":582,"line":1476},[580,2050,1793],{"class":593},[580,2052,1258],{"class":597},[580,2054,1261],{"class":601},[580,2056,605],{"class":593},[580,2058,608],{"class":593},[580,2060,1268],{"class":611},[580,2062,608],{"class":593},[580,2064,602],{"class":601},[580,2066,605],{"class":593},[580,2068,608],{"class":593},[580,2070,2071],{"class":611},"inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm",[580,2073,608],{"class":593},[580,2075,617],{"class":593},[580,2077,2079],{"class":582,"line":2078},30,[580,2080,2081],{"class":642},"            Get Started\n",[580,2083,2085,2087,2089],{"class":582,"line":2084},31,[580,2086,1854],{"class":593},[580,2088,1258],{"class":597},[580,2090,617],{"class":593},[580,2092,2094,2096,2098],{"class":582,"line":2093},32,[580,2095,1863],{"class":593},[580,2097,598],{"class":597},[580,2099,617],{"class":593},[580,2101,2103],{"class":582,"line":2102},33,[580,2104,963],{"emptyLinePlaceholder":962},[580,2106,2108],{"class":582,"line":2107},34,[580,2109,2110],{"class":586},"        \u003C!-- Mobile Hamburger Button (hidden on desktop) -->\n",[580,2112,2114,2116,2118,2121,2123,2125,2128,2130,2132,2134,2136,2139,2141,2144,2146,2148,2151,2153],{"class":582,"line":2113},35,[580,2115,1773],{"class":593},[580,2117,1177],{"class":597},[580,2119,2120],{"class":601}," id",[580,2122,605],{"class":593},[580,2124,608],{"class":593},[580,2126,2127],{"class":611},"menu-toggle",[580,2129,608],{"class":593},[580,2131,602],{"class":601},[580,2133,605],{"class":593},[580,2135,608],{"class":593},[580,2137,2138],{"class":611},"md:hidden p-2 rounded-lg text-gray-600 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",[580,2140,608],{"class":593},[580,2142,2143],{"class":601}," aria-label",[580,2145,605],{"class":593},[580,2147,608],{"class":593},[580,2149,2150],{"class":611},"Toggle menu",[580,2152,608],{"class":593},[580,2154,617],{"class":593},[580,2156,2158],{"class":582,"line":2157},36,[580,2159,2160],{"class":586},"          \u003C!-- Hamburger icon -->\n",[580,2162,2164,2166,2168,2170,2172,2174,2177,2179,2181,2183,2185,2188,2190,2193,2195,2197,2200,2202,2205,2207,2209,2212,2214,2217,2219,2221,2224,2226],{"class":582,"line":2163},37,[580,2165,1793],{"class":593},[580,2167,1198],{"class":597},[580,2169,2120],{"class":601},[580,2171,605],{"class":593},[580,2173,608],{"class":593},[580,2175,2176],{"class":611},"menu-icon-open",[580,2178,608],{"class":593},[580,2180,602],{"class":601},[580,2182,605],{"class":593},[580,2184,608],{"class":593},[580,2186,2187],{"class":611},"w-6 h-6",[580,2189,608],{"class":593},[580,2191,2192],{"class":601}," fill",[580,2194,605],{"class":593},[580,2196,608],{"class":593},[580,2198,2199],{"class":611},"none",[580,2201,608],{"class":593},[580,2203,2204],{"class":601}," stroke",[580,2206,605],{"class":593},[580,2208,608],{"class":593},[580,2210,2211],{"class":611},"currentColor",[580,2213,608],{"class":593},[580,2215,2216],{"class":601}," viewBox",[580,2218,605],{"class":593},[580,2220,608],{"class":593},[580,2222,2223],{"class":611},"0 0 24 24",[580,2225,608],{"class":593},[580,2227,617],{"class":593},[580,2229,2231,2234,2237,2240,2242,2244,2247,2249,2252,2254,2256,2258,2260,2263,2265,2267,2270,2272,2275,2277,2279,2282,2284],{"class":582,"line":2230},38,[580,2232,2233],{"class":593},"            \u003C",[580,2235,2236],{"class":597},"path",[580,2238,2239],{"class":601}," stroke-linecap",[580,2241,605],{"class":593},[580,2243,608],{"class":593},[580,2245,2246],{"class":611},"round",[580,2248,608],{"class":593},[580,2250,2251],{"class":601}," stroke-linejoin",[580,2253,605],{"class":593},[580,2255,608],{"class":593},[580,2257,2246],{"class":611},[580,2259,608],{"class":593},[580,2261,2262],{"class":601}," stroke-width",[580,2264,605],{"class":593},[580,2266,608],{"class":593},[580,2268,2269],{"class":611},"2",[580,2271,608],{"class":593},[580,2273,2274],{"class":601}," d",[580,2276,605],{"class":593},[580,2278,608],{"class":593},[580,2280,2281],{"class":611},"M4 6h16M4 12h16M4 18h16",[580,2283,608],{"class":593},[580,2285,2286],{"class":593},"\u002F>\n",[580,2288,2290,2292,2294],{"class":582,"line":2289},39,[580,2291,1854],{"class":593},[580,2293,1198],{"class":597},[580,2295,617],{"class":593},[580,2297,2299],{"class":582,"line":2298},40,[580,2300,2301],{"class":586},"          \u003C!-- Close icon (hidden by default) -->\n",[580,2303,2305,2307,2309,2311,2313,2315,2318,2320,2322,2324,2326,2329,2331,2333,2335,2337,2339,2341,2343,2345,2347,2349,2351,2353,2355,2357,2359,2361],{"class":582,"line":2304},41,[580,2306,1793],{"class":593},[580,2308,1198],{"class":597},[580,2310,2120],{"class":601},[580,2312,605],{"class":593},[580,2314,608],{"class":593},[580,2316,2317],{"class":611},"menu-icon-close",[580,2319,608],{"class":593},[580,2321,602],{"class":601},[580,2323,605],{"class":593},[580,2325,608],{"class":593},[580,2327,2328],{"class":611},"w-6 h-6 hidden",[580,2330,608],{"class":593},[580,2332,2192],{"class":601},[580,2334,605],{"class":593},[580,2336,608],{"class":593},[580,2338,2199],{"class":611},[580,2340,608],{"class":593},[580,2342,2204],{"class":601},[580,2344,605],{"class":593},[580,2346,608],{"class":593},[580,2348,2211],{"class":611},[580,2350,608],{"class":593},[580,2352,2216],{"class":601},[580,2354,605],{"class":593},[580,2356,608],{"class":593},[580,2358,2223],{"class":611},[580,2360,608],{"class":593},[580,2362,617],{"class":593},[580,2364,2366,2368,2370,2372,2374,2376,2378,2380,2382,2384,2386,2388,2390,2392,2394,2396,2398,2400,2402,2404,2406,2409,2411],{"class":582,"line":2365},42,[580,2367,2233],{"class":593},[580,2369,2236],{"class":597},[580,2371,2239],{"class":601},[580,2373,605],{"class":593},[580,2375,608],{"class":593},[580,2377,2246],{"class":611},[580,2379,608],{"class":593},[580,2381,2251],{"class":601},[580,2383,605],{"class":593},[580,2385,608],{"class":593},[580,2387,2246],{"class":611},[580,2389,608],{"class":593},[580,2391,2262],{"class":601},[580,2393,605],{"class":593},[580,2395,608],{"class":593},[580,2397,2269],{"class":611},[580,2399,608],{"class":593},[580,2401,2274],{"class":601},[580,2403,605],{"class":593},[580,2405,608],{"class":593},[580,2407,2408],{"class":611},"M6 18L18 6M6 6l12 12",[580,2410,608],{"class":593},[580,2412,2286],{"class":593},[580,2414,2416,2418,2420],{"class":582,"line":2415},43,[580,2417,1854],{"class":593},[580,2419,1198],{"class":597},[580,2421,617],{"class":593},[580,2423,2425,2427,2429],{"class":582,"line":2424},44,[580,2426,1863],{"class":593},[580,2428,1177],{"class":597},[580,2430,617],{"class":593},[580,2432,2434,2437,2439],{"class":582,"line":2433},45,[580,2435,2436],{"class":593},"      \u003C\u002F",[580,2438,598],{"class":597},[580,2440,617],{"class":593},[580,2442,2444],{"class":582,"line":2443},46,[580,2445,963],{"emptyLinePlaceholder":962},[580,2447,2449],{"class":582,"line":2448},47,[580,2450,2451],{"class":586},"      \u003C!-- Mobile Menu Dropdown (hidden by default) -->\n",[580,2453,2455,2457,2459,2461,2463,2465,2468,2470,2472,2474,2476,2479,2481],{"class":582,"line":2454},48,[580,2456,1743],{"class":593},[580,2458,598],{"class":597},[580,2460,2120],{"class":601},[580,2462,605],{"class":593},[580,2464,608],{"class":593},[580,2466,2467],{"class":611},"mobile-menu",[580,2469,608],{"class":593},[580,2471,602],{"class":601},[580,2473,605],{"class":593},[580,2475,608],{"class":593},[580,2477,2478],{"class":611},"md:hidden hidden pb-4 border-t border-gray-100",[580,2480,608],{"class":593},[580,2482,617],{"class":593},[580,2484,2486,2488,2490,2492,2494,2496,2499,2501],{"class":582,"line":2485},49,[580,2487,1773],{"class":593},[580,2489,598],{"class":597},[580,2491,602],{"class":601},[580,2493,605],{"class":593},[580,2495,608],{"class":593},[580,2497,2498],{"class":611},"flex flex-col gap-2 pt-4",[580,2500,608],{"class":593},[580,2502,617],{"class":593},[580,2504,2506,2508,2510,2512,2514,2516,2518,2520,2522,2524,2526,2529,2531,2533,2535,2537,2539],{"class":582,"line":2505},50,[580,2507,1793],{"class":593},[580,2509,1258],{"class":597},[580,2511,1261],{"class":601},[580,2513,605],{"class":593},[580,2515,608],{"class":593},[580,2517,1910],{"class":611},[580,2519,608],{"class":593},[580,2521,602],{"class":601},[580,2523,605],{"class":593},[580,2525,608],{"class":593},[580,2527,2528],{"class":611},"block px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-100 hover:text-gray-900 transition-colors",[580,2530,608],{"class":593},[580,2532,639],{"class":593},[580,2534,1928],{"class":642},[580,2536,646],{"class":593},[580,2538,1258],{"class":597},[580,2540,617],{"class":593},[580,2542,2544,2546,2548,2550,2552,2554,2556,2558,2560,2562,2564,2566,2568,2570,2572,2574,2576],{"class":582,"line":2543},51,[580,2545,1793],{"class":593},[580,2547,1258],{"class":597},[580,2549,1261],{"class":601},[580,2551,605],{"class":593},[580,2553,608],{"class":593},[580,2555,1949],{"class":611},[580,2557,608],{"class":593},[580,2559,602],{"class":601},[580,2561,605],{"class":593},[580,2563,608],{"class":593},[580,2565,2528],{"class":611},[580,2567,608],{"class":593},[580,2569,639],{"class":593},[580,2571,1966],{"class":642},[580,2573,646],{"class":593},[580,2575,1258],{"class":597},[580,2577,617],{"class":593},[580,2579,2581,2583,2585,2587,2589,2591,2593,2595,2597,2599,2601,2603,2605,2607,2609,2611,2613],{"class":582,"line":2580},52,[580,2582,1793],{"class":593},[580,2584,1258],{"class":597},[580,2586,1261],{"class":601},[580,2588,605],{"class":593},[580,2590,608],{"class":593},[580,2592,1987],{"class":611},[580,2594,608],{"class":593},[580,2596,602],{"class":601},[580,2598,605],{"class":593},[580,2600,608],{"class":593},[580,2602,2528],{"class":611},[580,2604,608],{"class":593},[580,2606,639],{"class":593},[580,2608,1312],{"class":642},[580,2610,646],{"class":593},[580,2612,1258],{"class":597},[580,2614,617],{"class":593},[580,2616,2618,2620,2622,2624,2626,2628,2630,2632,2634,2636,2638,2640,2642,2644,2646,2648,2650],{"class":582,"line":2617},53,[580,2619,1793],{"class":593},[580,2621,1258],{"class":597},[580,2623,1261],{"class":601},[580,2625,605],{"class":593},[580,2627,608],{"class":593},[580,2629,2024],{"class":611},[580,2631,608],{"class":593},[580,2633,602],{"class":601},[580,2635,605],{"class":593},[580,2637,608],{"class":593},[580,2639,2528],{"class":611},[580,2641,608],{"class":593},[580,2643,639],{"class":593},[580,2645,1348],{"class":642},[580,2647,646],{"class":593},[580,2649,1258],{"class":597},[580,2651,617],{"class":593},[580,2653,2655,2657,2659,2661,2663,2665,2667,2669,2671,2673,2675,2678,2680],{"class":582,"line":2654},54,[580,2656,1793],{"class":593},[580,2658,1258],{"class":597},[580,2660,1261],{"class":601},[580,2662,605],{"class":593},[580,2664,608],{"class":593},[580,2666,1268],{"class":611},[580,2668,608],{"class":593},[580,2670,602],{"class":601},[580,2672,605],{"class":593},[580,2674,608],{"class":593},[580,2676,2677],{"class":611},"block px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium text-center",[580,2679,608],{"class":593},[580,2681,617],{"class":593},[580,2683,2685],{"class":582,"line":2684},55,[580,2686,2081],{"class":642},[580,2688,2690,2692,2694],{"class":582,"line":2689},56,[580,2691,1854],{"class":593},[580,2693,1258],{"class":597},[580,2695,617],{"class":593},[580,2697,2699,2701,2703],{"class":582,"line":2698},57,[580,2700,1863],{"class":593},[580,2702,598],{"class":597},[580,2704,617],{"class":593},[580,2706,2708,2710,2712],{"class":582,"line":2707},58,[580,2709,2436],{"class":593},[580,2711,598],{"class":597},[580,2713,617],{"class":593},[580,2715,2717,2720,2722],{"class":582,"line":2716},59,[580,2718,2719],{"class":593},"    \u003C\u002F",[580,2721,1163],{"class":597},[580,2723,617],{"class":593},[580,2725,2727,2729,2731],{"class":582,"line":2726},60,[580,2728,1215],{"class":593},[580,2730,1706],{"class":597},[580,2732,617],{"class":593},[580,2734,2736],{"class":582,"line":2735},61,[580,2737,963],{"emptyLinePlaceholder":962},[580,2739,2741],{"class":582,"line":2740},62,[580,2742,2743],{"class":586},"  \u003C!-- Spacer để nội dung không bị che bởi fixed header -->\n",[580,2745,2747,2749,2751,2753,2755,2757,2760,2762,2764,2766],{"class":582,"line":2746},63,[580,2748,623],{"class":593},[580,2750,598],{"class":597},[580,2752,602],{"class":601},[580,2754,605],{"class":593},[580,2756,608],{"class":593},[580,2758,2759],{"class":611},"h-16",[580,2761,608],{"class":593},[580,2763,1282],{"class":593},[580,2765,598],{"class":597},[580,2767,617],{"class":593},[580,2769,2771],{"class":582,"line":2770},64,[580,2772,963],{"emptyLinePlaceholder":962},[580,2774,2776],{"class":582,"line":2775},65,[580,2777,2778],{"class":586},"  \u003C!-- Demo Content -->\n",[580,2780,2782,2784,2786,2788,2790,2792,2795,2797],{"class":582,"line":2781},66,[580,2783,623],{"class":593},[580,2785,1117],{"class":597},[580,2787,602],{"class":601},[580,2789,605],{"class":593},[580,2791,608],{"class":593},[580,2793,2794],{"class":611},"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16",[580,2796,608],{"class":593},[580,2798,617],{"class":593},[580,2800,2802,2804,2806,2808,2810,2812,2815,2817,2819,2821,2823,2826,2828],{"class":582,"line":2801},67,[580,2803,1195],{"class":593},[580,2805,1442],{"class":597},[580,2807,2120],{"class":601},[580,2809,605],{"class":593},[580,2811,608],{"class":593},[580,2813,2814],{"class":611},"features",[580,2816,608],{"class":593},[580,2818,602],{"class":601},[580,2820,605],{"class":593},[580,2822,608],{"class":593},[580,2824,2825],{"class":611},"py-16",[580,2827,608],{"class":593},[580,2829,617],{"class":593},[580,2831,2833,2835,2837,2839,2841,2843,2846,2848,2850,2853,2855,2857],{"class":582,"line":2832},68,[580,2834,1743],{"class":593},[580,2836,427],{"class":597},[580,2838,602],{"class":601},[580,2840,605],{"class":593},[580,2842,608],{"class":593},[580,2844,2845],{"class":611},"text-3xl font-bold mb-8",[580,2847,608],{"class":593},[580,2849,639],{"class":593},[580,2851,2852],{"class":642},"Features Section",[580,2854,646],{"class":593},[580,2856,427],{"class":597},[580,2858,617],{"class":593},[580,2860,2862,2864,2866,2868,2870,2872,2875,2877,2879,2882,2884,2886],{"class":582,"line":2861},69,[580,2863,1743],{"class":593},[580,2865,432],{"class":597},[580,2867,602],{"class":601},[580,2869,605],{"class":593},[580,2871,608],{"class":593},[580,2873,2874],{"class":611},"text-gray-600",[580,2876,608],{"class":593},[580,2878,639],{"class":593},[580,2880,2881],{"class":642},"Scroll để test fixed header với backdrop-blur.",[580,2883,646],{"class":593},[580,2885,432],{"class":597},[580,2887,617],{"class":593},[580,2889,2891,2893,2895],{"class":582,"line":2890},70,[580,2892,2719],{"class":593},[580,2894,1442],{"class":597},[580,2896,617],{"class":593},[580,2898,2900,2902,2904,2906,2908,2910,2913,2915,2917,2919,2921,2923,2925],{"class":582,"line":2899},71,[580,2901,1195],{"class":593},[580,2903,1442],{"class":597},[580,2905,2120],{"class":601},[580,2907,605],{"class":593},[580,2909,608],{"class":593},[580,2911,2912],{"class":611},"pricing",[580,2914,608],{"class":593},[580,2916,602],{"class":601},[580,2918,605],{"class":593},[580,2920,608],{"class":593},[580,2922,2825],{"class":611},[580,2924,608],{"class":593},[580,2926,617],{"class":593},[580,2928,2930,2932,2934,2936,2938,2940,2942,2944,2946,2949,2951,2953],{"class":582,"line":2929},72,[580,2931,1743],{"class":593},[580,2933,427],{"class":597},[580,2935,602],{"class":601},[580,2937,605],{"class":593},[580,2939,608],{"class":593},[580,2941,2845],{"class":611},[580,2943,608],{"class":593},[580,2945,639],{"class":593},[580,2947,2948],{"class":642},"Pricing Section",[580,2950,646],{"class":593},[580,2952,427],{"class":597},[580,2954,617],{"class":593},[580,2956,2958,2960,2962],{"class":582,"line":2957},73,[580,2959,2719],{"class":593},[580,2961,1442],{"class":597},[580,2963,617],{"class":593},[580,2965,2967,2969,2971],{"class":582,"line":2966},74,[580,2968,1215],{"class":593},[580,2970,1117],{"class":597},[580,2972,617],{"class":593},[580,2974,2976],{"class":582,"line":2975},75,[580,2977,963],{"emptyLinePlaceholder":962},[580,2979,2981,2983,2985],{"class":582,"line":2980},76,[580,2982,623],{"class":593},[580,2984,1644],{"class":597},[580,2986,617],{"class":593},[580,2988,2990,2993,2996,2998,3001,3004,3008,3011,3014,3016,3018,3021],{"class":582,"line":2989},77,[580,2991,2992],{"class":601},"    const",[580,2994,2995],{"class":642}," menuToggle ",[580,2997,605],{"class":593},[580,2999,3000],{"class":642}," document",[580,3002,3003],{"class":593},".",[580,3005,3007],{"class":3006},"s2Zo4","getElementById",[580,3009,3010],{"class":642},"(",[580,3012,3013],{"class":593},"'",[580,3015,2127],{"class":611},[580,3017,3013],{"class":593},[580,3019,3020],{"class":642},")",[580,3022,957],{"class":593},[580,3024,3026,3028,3031,3033,3035,3037,3039,3041,3043,3045,3047,3049],{"class":582,"line":3025},78,[580,3027,2992],{"class":601},[580,3029,3030],{"class":642}," mobileMenu ",[580,3032,605],{"class":593},[580,3034,3000],{"class":642},[580,3036,3003],{"class":593},[580,3038,3007],{"class":3006},[580,3040,3010],{"class":642},[580,3042,3013],{"class":593},[580,3044,2467],{"class":611},[580,3046,3013],{"class":593},[580,3048,3020],{"class":642},[580,3050,957],{"class":593},[580,3052,3054,3056,3059,3061,3063,3065,3067,3069,3071,3073,3075,3077],{"class":582,"line":3053},79,[580,3055,2992],{"class":601},[580,3057,3058],{"class":642}," iconOpen ",[580,3060,605],{"class":593},[580,3062,3000],{"class":642},[580,3064,3003],{"class":593},[580,3066,3007],{"class":3006},[580,3068,3010],{"class":642},[580,3070,3013],{"class":593},[580,3072,2176],{"class":611},[580,3074,3013],{"class":593},[580,3076,3020],{"class":642},[580,3078,957],{"class":593},[580,3080,3082,3084,3087,3089,3091,3093,3095,3097,3099,3101,3103,3105],{"class":582,"line":3081},80,[580,3083,2992],{"class":601},[580,3085,3086],{"class":642}," iconClose ",[580,3088,605],{"class":593},[580,3090,3000],{"class":642},[580,3092,3003],{"class":593},[580,3094,3007],{"class":3006},[580,3096,3010],{"class":642},[580,3098,3013],{"class":593},[580,3100,2317],{"class":611},[580,3102,3013],{"class":593},[580,3104,3020],{"class":642},[580,3106,957],{"class":593},[580,3108,3110],{"class":582,"line":3109},81,[580,3111,963],{"emptyLinePlaceholder":962},[580,3113,3115,3118,3120,3123,3125,3127,3130,3132,3135,3138,3141],{"class":582,"line":3114},82,[580,3116,3117],{"class":642},"    menuToggle",[580,3119,3003],{"class":593},[580,3121,3122],{"class":3006},"addEventListener",[580,3124,3010],{"class":642},[580,3126,3013],{"class":593},[580,3128,3129],{"class":611},"click",[580,3131,3013],{"class":593},[580,3133,3134],{"class":593},",",[580,3136,3137],{"class":593}," ()",[580,3139,3140],{"class":601}," =>",[580,3142,970],{"class":593},[580,3144,3146,3149,3151,3154,3156,3159,3161,3163,3166,3168,3170],{"class":582,"line":3145},83,[580,3147,3148],{"class":642},"      mobileMenu",[580,3150,3003],{"class":593},[580,3152,3153],{"class":642},"classList",[580,3155,3003],{"class":593},[580,3157,3158],{"class":3006},"toggle",[580,3160,3010],{"class":597},[580,3162,3013],{"class":593},[580,3164,3165],{"class":611},"hidden",[580,3167,3013],{"class":593},[580,3169,3020],{"class":597},[580,3171,957],{"class":593},[580,3173,3175,3178,3180,3182,3184,3186,3188,3190,3192,3194,3196],{"class":582,"line":3174},84,[580,3176,3177],{"class":642},"      iconOpen",[580,3179,3003],{"class":593},[580,3181,3153],{"class":642},[580,3183,3003],{"class":593},[580,3185,3158],{"class":3006},[580,3187,3010],{"class":597},[580,3189,3013],{"class":593},[580,3191,3165],{"class":611},[580,3193,3013],{"class":593},[580,3195,3020],{"class":597},[580,3197,957],{"class":593},[580,3199,3201,3204,3206,3208,3210,3212,3214,3216,3218,3220,3222],{"class":582,"line":3200},85,[580,3202,3203],{"class":642},"      iconClose",[580,3205,3003],{"class":593},[580,3207,3153],{"class":642},[580,3209,3003],{"class":593},[580,3211,3158],{"class":3006},[580,3213,3010],{"class":597},[580,3215,3013],{"class":593},[580,3217,3165],{"class":611},[580,3219,3013],{"class":593},[580,3221,3020],{"class":597},[580,3223,957],{"class":593},[580,3225,3227,3230,3232],{"class":582,"line":3226},86,[580,3228,3229],{"class":593},"    }",[580,3231,3020],{"class":642},[580,3233,957],{"class":593},[580,3235,3237],{"class":582,"line":3236},87,[580,3238,963],{"emptyLinePlaceholder":962},[580,3240,3242],{"class":582,"line":3241},88,[580,3243,3244],{"class":586},"    \u002F\u002F Đóng menu khi click vào link\n",[580,3246,3248,3251,3253,3256,3258,3260,3262,3264,3266,3268,3271,3273,3277,3279],{"class":582,"line":3247},89,[580,3249,3250],{"class":642},"    mobileMenu",[580,3252,3003],{"class":593},[580,3254,3255],{"class":3006},"querySelectorAll",[580,3257,3010],{"class":642},[580,3259,3013],{"class":593},[580,3261,1258],{"class":611},[580,3263,3013],{"class":593},[580,3265,3020],{"class":642},[580,3267,3003],{"class":593},[580,3269,3270],{"class":3006},"forEach",[580,3272,3010],{"class":642},[580,3274,3276],{"class":3275},"sHdIc","link",[580,3278,3140],{"class":601},[580,3280,970],{"class":593},[580,3282,3284,3287,3289,3291,3293,3295,3297,3299,3301,3303,3305],{"class":582,"line":3283},90,[580,3285,3286],{"class":642},"      link",[580,3288,3003],{"class":593},[580,3290,3122],{"class":3006},[580,3292,3010],{"class":597},[580,3294,3013],{"class":593},[580,3296,3129],{"class":611},[580,3298,3013],{"class":593},[580,3300,3134],{"class":593},[580,3302,3137],{"class":593},[580,3304,3140],{"class":601},[580,3306,970],{"class":593},[580,3308,3310,3313,3315,3317,3319,3322,3324,3326,3328,3330,3332],{"class":582,"line":3309},91,[580,3311,3312],{"class":642},"        mobileMenu",[580,3314,3003],{"class":593},[580,3316,3153],{"class":642},[580,3318,3003],{"class":593},[580,3320,3321],{"class":3006},"add",[580,3323,3010],{"class":597},[580,3325,3013],{"class":593},[580,3327,3165],{"class":611},[580,3329,3013],{"class":593},[580,3331,3020],{"class":597},[580,3333,957],{"class":593},[580,3335,3337,3340,3342,3344,3346,3349,3351,3353,3355,3357,3359],{"class":582,"line":3336},92,[580,3338,3339],{"class":642},"        iconOpen",[580,3341,3003],{"class":593},[580,3343,3153],{"class":642},[580,3345,3003],{"class":593},[580,3347,3348],{"class":3006},"remove",[580,3350,3010],{"class":597},[580,3352,3013],{"class":593},[580,3354,3165],{"class":611},[580,3356,3013],{"class":593},[580,3358,3020],{"class":597},[580,3360,957],{"class":593},[580,3362,3364,3367,3369,3371,3373,3375,3377,3379,3381,3383,3385],{"class":582,"line":3363},93,[580,3365,3366],{"class":642},"        iconClose",[580,3368,3003],{"class":593},[580,3370,3153],{"class":642},[580,3372,3003],{"class":593},[580,3374,3321],{"class":3006},[580,3376,3010],{"class":597},[580,3378,3013],{"class":593},[580,3380,3165],{"class":611},[580,3382,3013],{"class":593},[580,3384,3020],{"class":597},[580,3386,957],{"class":593},[580,3388,3390,3393,3395],{"class":582,"line":3389},94,[580,3391,3392],{"class":593},"      }",[580,3394,3020],{"class":597},[580,3396,957],{"class":593},[580,3398,3400,3402,3404],{"class":582,"line":3399},95,[580,3401,3229],{"class":593},[580,3403,3020],{"class":642},[580,3405,957],{"class":593},[580,3407,3409,3411,3413],{"class":582,"line":3408},96,[580,3410,1215],{"class":593},[580,3412,1644],{"class":597},[580,3414,617],{"class":593},[580,3416,3418],{"class":582,"line":3417},97,[580,3419,963],{"emptyLinePlaceholder":962},[580,3421,3423,3425,3427],{"class":582,"line":3422},98,[580,3424,646],{"class":593},[580,3426,1677],{"class":597},[580,3428,617],{"class":593},[580,3430,3432,3434,3436],{"class":582,"line":3431},99,[580,3433,646],{"class":593},[580,3435,575],{"class":597},[580,3437,617],{"class":593},[432,3439,3440],{},[436,3441,3442],{},"Giải thích key decisions:",[804,3444,3445,3451,3457,3463,3469,3475],{},[807,3446,3447,3450],{},[491,3448,3449],{},"fixed top-0 left-0 right-0 z-50",": Header luôn nằm trên cùng, bất kể scroll.",[807,3452,3453,3456],{},[491,3454,3455],{},"bg-white\u002F80 backdrop-blur-md",": Hiệu ứng glassmorphism — nền trong suốt nhẹ với blur phía sau.",[807,3458,3459,3462],{},[491,3460,3461],{},"hidden md:flex",": Desktop menu ẩn trên mobile, hiện trên tablet trở lên.",[807,3464,3465,3468],{},[491,3466,3467],{},"md:hidden",": Hamburger button chỉ hiện trên mobile.",[807,3470,3471,3474],{},[491,3472,3473],{},"aria-label=\"Toggle menu\"",": Accessibility — screen reader biết đây là nút toggle menu.",[807,3476,3477,3478,3480],{},"JavaScript tối giản: toggle class ",[491,3479,3165],{}," trên mobile menu + đổi icon.",[445,3482,3484],{"id":3483},"_16-bài-tập-2-grid-1-col-mobile-2-cols-tablet-3-cols-desktop-4-cols-wide","1.6. BÀI TẬP 2 — Grid: 1 col Mobile → 2 cols Tablet → 3 cols Desktop → 4 cols Wide",[432,3486,3487,3489],{},[436,3488,1491],{}," Grid layout responsive với 8 card items:",[804,3491,3492,3495,3498,3501],{},[807,3493,3494],{},"Mobile: 1 cột",[807,3496,3497],{},"Tablet (md): 2 cột",[807,3499,3500],{},"Desktop (lg): 3 cột",[807,3502,3503],{},"Wide (xl): 4 cột",[432,3505,3506],{},[436,3507,1508],{},[571,3509,3511],{"className":573,"code":3510,"language":575,"meta":576,"style":576},"\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>Responsive Grid - Tailwind CSS v4\u003C\u002Ftitle>\n  \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tailwindcss\u002Fbrowser@4\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody class=\"min-h-screen bg-gray-50 p-4 md:p-8 lg:p-12\">\n\n  \u003Cdiv class=\"max-w-7xl mx-auto\">\n    \u003Ch1 class=\"text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mb-2\">\n      Responsive Grid Showcase\n    \u003C\u002Fh1>\n    \u003Cp class=\"text-gray-600 mb-8 md:mb-12\">\n      Resize cửa sổ trình duyệt để thấy grid thay đổi: 1 col → 2 cols → 3 cols → 4 cols\n    \u003C\u002Fp>\n\n    \u003C!-- Grid responsive -->\n    \u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 lg:gap-8\">\n      \n      \u003C!-- Card 1 -->\n      \u003Cdiv class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow\">\n        \u003Cdiv class=\"w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4\">\n          \u003Csvg class=\"w-6 h-6 text-blue-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mb-2\">Lightning Fast\u003C\u002Fh3>\n        \u003Cp class=\"text-gray-600 text-sm\">Build nhanh gấp 5x với Oxide Engine viết bằng Rust. Incremental build gần như tức thì.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 2 -->\n      \u003Cdiv class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow\">\n        \u003Cdiv class=\"w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4\">\n          \u003Csvg class=\"w-6 h-6 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mb-2\">CSS-first Config\u003C\u002Fh3>\n        \u003Cp class=\"text-gray-600 text-sm\">Không còn tailwind.config.js. Dùng @theme, @utility trực tiếp trong CSS với full IDE support.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 3 -->\n      \u003Cdiv class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow\">\n        \u003Cdiv class=\"w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4\">\n          \u003Csvg class=\"w-6 h-6 text-purple-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mb-2\">OKLCH Colors\u003C\u002Fh3>\n        \u003Cp class=\"text-gray-600 text-sm\">Color space OKLCH mặc định — perceptually uniform, P3 wide gamut support.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 4 -->\n      \u003Cdiv class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow\">\n        \u003Cdiv class=\"w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4\">\n          \u003Csvg class=\"w-6 h-6 text-orange-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mb-2\">Auto Content Detection\u003C\u002Fh3>\n        \u003Cp class=\"text-gray-600 text-sm\">Không cần cấu hình content path. Tailwind tự scan và generate đúng class bạn dùng.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 5 -->\n      \u003Cdiv class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow\">\n        \u003Cdiv class=\"w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mb-4\">\n          \u003Csvg class=\"w-6 h-6 text-pink-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mb-2\">Container Queries\u003C\u002Fh3>\n        \u003Cp class=\"text-gray-600 text-sm\">@container built-in — component tự thích nghi theo kích thước container, không phải viewport.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 6 -->\n      \u003Cdiv class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow\">\n        \u003Cdiv class=\"w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mb-4\">\n          \u003Csvg class=\"w-6 h-6 text-teal-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mb-2\">3D Transforms\u003C\u002Fh3>\n        \u003Cp class=\"text-gray-600 text-sm\">rotate-x-*, rotate-y-*, rotate-z-* built-in. Transform 3D không cần plugin.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 7 -->\n      \u003Cdiv class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow\">\n        \u003Cdiv class=\"w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4\">\n          \u003Csvg class=\"w-6 h-6 text-indigo-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mb-2\">Radial & Conic Gradients\u003C\u002Fh3>\n        \u003Cp class=\"text-gray-600 text-sm\">bg-radial-* và bg-conic-* cho gradient đa dạng hơn, không chỉ linear.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 8 -->\n      \u003Cdiv class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow\">\n        \u003Cdiv class=\"w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4\">\n          \u003Csvg class=\"w-6 h-6 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mb-2\">V4.3 Scrollbar Styling\u003C\u002Fh3>\n        \u003Cp class=\"text-gray-600 text-sm\">scrollbar-thin, scrollbar-thumb-*, scrollbar-track-* — style scrollbar không cần plugin.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n    \u003C\u002Fdiv>\n\n    \u003C!-- Breakpoint indicator (dev helper) -->\n    \u003Cdiv class=\"fixed bottom-4 right-4 bg-gray-900 text-white text-xs px-3 py-1.5 rounded-full font-mono\">\n      \u003Cspan class=\"sm:hidden\">xs (<640px)\u003C\u002Fspan>\n      \u003Cspan class=\"hidden sm:inline md:hidden\">sm (≥640px)\u003C\u002Fspan>\n      \u003Cspan class=\"hidden md:inline lg:hidden\">md (≥768px)\u003C\u002Fspan>\n      \u003Cspan class=\"hidden lg:inline xl:hidden\">lg (≥1024px)\u003C\u002Fspan>\n      \u003Cspan class=\"hidden xl:inline 2xl:hidden\">xl (≥1280px)\u003C\u002Fspan>\n      \u003Cspan class=\"hidden 2xl:inline\">2xl (≥1536px)\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[491,3512,3513,3523,3541,3549,3567,3595,3612,3634,3642,3661,3665,3684,3703,3708,3716,3735,3740,3748,3752,3757,3776,3781,3786,3805,3824,3873,3922,3930,3938,3966,3994,4002,4006,4011,4029,4048,4097,4146,4154,4162,4189,4216,4224,4228,4233,4251,4270,4319,4368,4376,4384,4411,4438,4446,4450,4455,4473,4492,4541,4590,4598,4606,4633,4660,4668,4672,4677,4695,4714,4763,4812,4820,4828,4855,4882,4890,4894,4899,4917,4936,4985,5034,5042,5050,5077,5104,5112,5116,5121,5139,5158,5207,5256,5264,5272,5299,5326,5334,5338,5343,5362,5382,5432,5482,5491,5500,5528,5556,5565,5570,5579,5584,5590,5610,5639,5668,5697,5726,5755,5784,5793,5802,5807,5816],{"__ignoreMap":576},[580,3514,3515,3517,3519,3521],{"class":582,"line":583},[580,3516,1518],{"class":593},[580,3518,1521],{"class":597},[580,3520,1524],{"class":601},[580,3522,617],{"class":593},[580,3524,3525,3527,3529,3531,3533,3535,3537,3539],{"class":582,"line":590},[580,3526,594],{"class":593},[580,3528,575],{"class":597},[580,3530,1535],{"class":601},[580,3532,605],{"class":593},[580,3534,608],{"class":593},[580,3536,1542],{"class":611},[580,3538,608],{"class":593},[580,3540,617],{"class":593},[580,3542,3543,3545,3547],{"class":582,"line":620},[580,3544,594],{"class":593},[580,3546,1564],{"class":597},[580,3548,617],{"class":593},[580,3550,3551,3553,3555,3557,3559,3561,3563,3565],{"class":582,"line":653},[580,3552,623],{"class":593},[580,3554,1573],{"class":597},[580,3556,1576],{"class":601},[580,3558,605],{"class":593},[580,3560,608],{"class":593},[580,3562,1583],{"class":611},[580,3564,608],{"class":593},[580,3566,617],{"class":593},[580,3568,3569,3571,3573,3575,3577,3579,3581,3583,3585,3587,3589,3591,3593],{"class":582,"line":681},[580,3570,623],{"class":593},[580,3572,1573],{"class":597},[580,3574,1596],{"class":601},[580,3576,605],{"class":593},[580,3578,608],{"class":593},[580,3580,1603],{"class":611},[580,3582,608],{"class":593},[580,3584,1608],{"class":601},[580,3586,605],{"class":593},[580,3588,608],{"class":593},[580,3590,1615],{"class":611},[580,3592,608],{"class":593},[580,3594,617],{"class":593},[580,3596,3597,3599,3601,3603,3606,3608,3610],{"class":582,"line":709},[580,3598,623],{"class":593},[580,3600,1626],{"class":597},[580,3602,639],{"class":593},[580,3604,3605],{"class":642},"Responsive Grid - Tailwind CSS v4",[580,3607,646],{"class":593},[580,3609,1626],{"class":597},[580,3611,617],{"class":593},[580,3613,3614,3616,3618,3620,3622,3624,3626,3628,3630,3632],{"class":582,"line":737},[580,3615,623],{"class":593},[580,3617,1644],{"class":597},[580,3619,1647],{"class":601},[580,3621,605],{"class":593},[580,3623,608],{"class":593},[580,3625,1654],{"class":611},[580,3627,608],{"class":593},[580,3629,1282],{"class":593},[580,3631,1644],{"class":597},[580,3633,617],{"class":593},[580,3635,3636,3638,3640],{"class":582,"line":765},[580,3637,646],{"class":593},[580,3639,1564],{"class":597},[580,3641,617],{"class":593},[580,3643,3644,3646,3648,3650,3652,3654,3657,3659],{"class":582,"line":793},[580,3645,594],{"class":593},[580,3647,1677],{"class":597},[580,3649,602],{"class":601},[580,3651,605],{"class":593},[580,3653,608],{"class":593},[580,3655,3656],{"class":611},"min-h-screen bg-gray-50 p-4 md:p-8 lg:p-12",[580,3658,608],{"class":593},[580,3660,617],{"class":593},[580,3662,3663],{"class":582,"line":896},[580,3664,963],{"emptyLinePlaceholder":962},[580,3666,3667,3669,3671,3673,3675,3677,3680,3682],{"class":582,"line":1029},[580,3668,623],{"class":593},[580,3670,598],{"class":597},[580,3672,602],{"class":601},[580,3674,605],{"class":593},[580,3676,608],{"class":593},[580,3678,3679],{"class":611},"max-w-7xl mx-auto",[580,3681,608],{"class":593},[580,3683,617],{"class":593},[580,3685,3686,3688,3690,3692,3694,3696,3699,3701],{"class":582,"line":1212},[580,3687,1195],{"class":593},[580,3689,1395],{"class":597},[580,3691,602],{"class":601},[580,3693,605],{"class":593},[580,3695,608],{"class":593},[580,3697,3698],{"class":611},"text-2xl md:text-3xl lg:text-4xl font-bold text-gray-900 mb-2",[580,3700,608],{"class":593},[580,3702,617],{"class":593},[580,3704,3705],{"class":582,"line":1222},[580,3706,3707],{"class":642},"      Responsive Grid Showcase\n",[580,3709,3710,3712,3714],{"class":582,"line":1228},[580,3711,2719],{"class":593},[580,3713,1395],{"class":597},[580,3715,617],{"class":593},[580,3717,3718,3720,3722,3724,3726,3728,3731,3733],{"class":582,"line":1248},[580,3719,1195],{"class":593},[580,3721,432],{"class":597},[580,3723,602],{"class":601},[580,3725,605],{"class":593},[580,3727,608],{"class":593},[580,3729,3730],{"class":611},"text-gray-600 mb-8 md:mb-12",[580,3732,608],{"class":593},[580,3734,617],{"class":593},[580,3736,3737],{"class":582,"line":1289},[580,3738,3739],{"class":642},"      Resize cửa sổ trình duyệt để thấy grid thay đổi: 1 col → 2 cols → 3 cols → 4 cols\n",[580,3741,3742,3744,3746],{"class":582,"line":1325},[580,3743,2719],{"class":593},[580,3745,432],{"class":597},[580,3747,617],{"class":593},[580,3749,3750],{"class":582,"line":1361},[580,3751,963],{"emptyLinePlaceholder":962},[580,3753,3754],{"class":582,"line":1370},[580,3755,3756],{"class":586},"    \u003C!-- Grid responsive -->\n",[580,3758,3759,3761,3763,3765,3767,3769,3772,3774],{"class":582,"line":1379},[580,3760,1195],{"class":593},[580,3762,598],{"class":597},[580,3764,602],{"class":601},[580,3766,605],{"class":593},[580,3768,608],{"class":593},[580,3770,3771],{"class":611},"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 lg:gap-8",[580,3773,608],{"class":593},[580,3775,617],{"class":593},[580,3777,3778],{"class":582,"line":1384},[580,3779,3780],{"class":642},"      \n",[580,3782,3783],{"class":582,"line":1390},[580,3784,3785],{"class":586},"      \u003C!-- Card 1 -->\n",[580,3787,3788,3790,3792,3794,3796,3798,3801,3803],{"class":582,"line":1411},[580,3789,1743],{"class":593},[580,3791,598],{"class":597},[580,3793,602],{"class":601},[580,3795,605],{"class":593},[580,3797,608],{"class":593},[580,3799,3800],{"class":611},"bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow",[580,3802,608],{"class":593},[580,3804,617],{"class":593},[580,3806,3807,3809,3811,3813,3815,3817,3820,3822],{"class":582,"line":1417},[580,3808,1773],{"class":593},[580,3810,598],{"class":597},[580,3812,602],{"class":601},[580,3814,605],{"class":593},[580,3816,608],{"class":593},[580,3818,3819],{"class":611},"w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4",[580,3821,608],{"class":593},[580,3823,617],{"class":593},[580,3825,3826,3828,3830,3832,3834,3836,3839,3841,3843,3845,3847,3849,3851,3853,3855,3857,3859,3861,3863,3865,3867,3869,3871],{"class":582,"line":1426},[580,3827,1793],{"class":593},[580,3829,1198],{"class":597},[580,3831,602],{"class":601},[580,3833,605],{"class":593},[580,3835,608],{"class":593},[580,3837,3838],{"class":611},"w-6 h-6 text-blue-600",[580,3840,608],{"class":593},[580,3842,2192],{"class":601},[580,3844,605],{"class":593},[580,3846,608],{"class":593},[580,3848,2199],{"class":611},[580,3850,608],{"class":593},[580,3852,2204],{"class":601},[580,3854,605],{"class":593},[580,3856,608],{"class":593},[580,3858,2211],{"class":611},[580,3860,608],{"class":593},[580,3862,2216],{"class":601},[580,3864,605],{"class":593},[580,3866,608],{"class":593},[580,3868,2223],{"class":611},[580,3870,608],{"class":593},[580,3872,617],{"class":593},[580,3874,3875,3877,3879,3881,3883,3885,3887,3889,3891,3893,3895,3897,3899,3901,3903,3905,3907,3909,3911,3913,3915,3918,3920],{"class":582,"line":1431},[580,3876,2233],{"class":593},[580,3878,2236],{"class":597},[580,3880,2239],{"class":601},[580,3882,605],{"class":593},[580,3884,608],{"class":593},[580,3886,2246],{"class":611},[580,3888,608],{"class":593},[580,3890,2251],{"class":601},[580,3892,605],{"class":593},[580,3894,608],{"class":593},[580,3896,2246],{"class":611},[580,3898,608],{"class":593},[580,3900,2262],{"class":601},[580,3902,605],{"class":593},[580,3904,608],{"class":593},[580,3906,2269],{"class":611},[580,3908,608],{"class":593},[580,3910,2274],{"class":601},[580,3912,605],{"class":593},[580,3914,608],{"class":593},[580,3916,3917],{"class":611},"M13 10V3L4 14h7v7l9-11h-7z",[580,3919,608],{"class":593},[580,3921,2286],{"class":593},[580,3923,3924,3926,3928],{"class":582,"line":1437},[580,3925,1854],{"class":593},[580,3927,1198],{"class":597},[580,3929,617],{"class":593},[580,3931,3932,3934,3936],{"class":582,"line":1458},[580,3933,1863],{"class":593},[580,3935,598],{"class":597},[580,3937,617],{"class":593},[580,3939,3940,3942,3944,3946,3948,3950,3953,3955,3957,3960,3962,3964],{"class":582,"line":1476},[580,3941,1773],{"class":593},[580,3943,445],{"class":597},[580,3945,602],{"class":601},[580,3947,605],{"class":593},[580,3949,608],{"class":593},[580,3951,3952],{"class":611},"text-lg font-semibold text-gray-900 mb-2",[580,3954,608],{"class":593},[580,3956,639],{"class":593},[580,3958,3959],{"class":642},"Lightning Fast",[580,3961,646],{"class":593},[580,3963,445],{"class":597},[580,3965,617],{"class":593},[580,3967,3968,3970,3972,3974,3976,3978,3981,3983,3985,3988,3990,3992],{"class":582,"line":2078},[580,3969,1773],{"class":593},[580,3971,432],{"class":597},[580,3973,602],{"class":601},[580,3975,605],{"class":593},[580,3977,608],{"class":593},[580,3979,3980],{"class":611},"text-gray-600 text-sm",[580,3982,608],{"class":593},[580,3984,639],{"class":593},[580,3986,3987],{"class":642},"Build nhanh gấp 5x với Oxide Engine viết bằng Rust. Incremental build gần như tức thì.",[580,3989,646],{"class":593},[580,3991,432],{"class":597},[580,3993,617],{"class":593},[580,3995,3996,3998,4000],{"class":582,"line":2084},[580,3997,2436],{"class":593},[580,3999,598],{"class":597},[580,4001,617],{"class":593},[580,4003,4004],{"class":582,"line":2093},[580,4005,963],{"emptyLinePlaceholder":962},[580,4007,4008],{"class":582,"line":2102},[580,4009,4010],{"class":586},"      \u003C!-- Card 2 -->\n",[580,4012,4013,4015,4017,4019,4021,4023,4025,4027],{"class":582,"line":2107},[580,4014,1743],{"class":593},[580,4016,598],{"class":597},[580,4018,602],{"class":601},[580,4020,605],{"class":593},[580,4022,608],{"class":593},[580,4024,3800],{"class":611},[580,4026,608],{"class":593},[580,4028,617],{"class":593},[580,4030,4031,4033,4035,4037,4039,4041,4044,4046],{"class":582,"line":2113},[580,4032,1773],{"class":593},[580,4034,598],{"class":597},[580,4036,602],{"class":601},[580,4038,605],{"class":593},[580,4040,608],{"class":593},[580,4042,4043],{"class":611},"w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4",[580,4045,608],{"class":593},[580,4047,617],{"class":593},[580,4049,4050,4052,4054,4056,4058,4060,4063,4065,4067,4069,4071,4073,4075,4077,4079,4081,4083,4085,4087,4089,4091,4093,4095],{"class":582,"line":2157},[580,4051,1793],{"class":593},[580,4053,1198],{"class":597},[580,4055,602],{"class":601},[580,4057,605],{"class":593},[580,4059,608],{"class":593},[580,4061,4062],{"class":611},"w-6 h-6 text-green-600",[580,4064,608],{"class":593},[580,4066,2192],{"class":601},[580,4068,605],{"class":593},[580,4070,608],{"class":593},[580,4072,2199],{"class":611},[580,4074,608],{"class":593},[580,4076,2204],{"class":601},[580,4078,605],{"class":593},[580,4080,608],{"class":593},[580,4082,2211],{"class":611},[580,4084,608],{"class":593},[580,4086,2216],{"class":601},[580,4088,605],{"class":593},[580,4090,608],{"class":593},[580,4092,2223],{"class":611},[580,4094,608],{"class":593},[580,4096,617],{"class":593},[580,4098,4099,4101,4103,4105,4107,4109,4111,4113,4115,4117,4119,4121,4123,4125,4127,4129,4131,4133,4135,4137,4139,4142,4144],{"class":582,"line":2163},[580,4100,2233],{"class":593},[580,4102,2236],{"class":597},[580,4104,2239],{"class":601},[580,4106,605],{"class":593},[580,4108,608],{"class":593},[580,4110,2246],{"class":611},[580,4112,608],{"class":593},[580,4114,2251],{"class":601},[580,4116,605],{"class":593},[580,4118,608],{"class":593},[580,4120,2246],{"class":611},[580,4122,608],{"class":593},[580,4124,2262],{"class":601},[580,4126,605],{"class":593},[580,4128,608],{"class":593},[580,4130,2269],{"class":611},[580,4132,608],{"class":593},[580,4134,2274],{"class":601},[580,4136,605],{"class":593},[580,4138,608],{"class":593},[580,4140,4141],{"class":611},"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z",[580,4143,608],{"class":593},[580,4145,2286],{"class":593},[580,4147,4148,4150,4152],{"class":582,"line":2230},[580,4149,1854],{"class":593},[580,4151,1198],{"class":597},[580,4153,617],{"class":593},[580,4155,4156,4158,4160],{"class":582,"line":2289},[580,4157,1863],{"class":593},[580,4159,598],{"class":597},[580,4161,617],{"class":593},[580,4163,4164,4166,4168,4170,4172,4174,4176,4178,4180,4183,4185,4187],{"class":582,"line":2298},[580,4165,1773],{"class":593},[580,4167,445],{"class":597},[580,4169,602],{"class":601},[580,4171,605],{"class":593},[580,4173,608],{"class":593},[580,4175,3952],{"class":611},[580,4177,608],{"class":593},[580,4179,639],{"class":593},[580,4181,4182],{"class":642},"CSS-first Config",[580,4184,646],{"class":593},[580,4186,445],{"class":597},[580,4188,617],{"class":593},[580,4190,4191,4193,4195,4197,4199,4201,4203,4205,4207,4210,4212,4214],{"class":582,"line":2304},[580,4192,1773],{"class":593},[580,4194,432],{"class":597},[580,4196,602],{"class":601},[580,4198,605],{"class":593},[580,4200,608],{"class":593},[580,4202,3980],{"class":611},[580,4204,608],{"class":593},[580,4206,639],{"class":593},[580,4208,4209],{"class":642},"Không còn tailwind.config.js. Dùng @theme, @utility trực tiếp trong CSS với full IDE support.",[580,4211,646],{"class":593},[580,4213,432],{"class":597},[580,4215,617],{"class":593},[580,4217,4218,4220,4222],{"class":582,"line":2365},[580,4219,2436],{"class":593},[580,4221,598],{"class":597},[580,4223,617],{"class":593},[580,4225,4226],{"class":582,"line":2415},[580,4227,963],{"emptyLinePlaceholder":962},[580,4229,4230],{"class":582,"line":2424},[580,4231,4232],{"class":586},"      \u003C!-- Card 3 -->\n",[580,4234,4235,4237,4239,4241,4243,4245,4247,4249],{"class":582,"line":2433},[580,4236,1743],{"class":593},[580,4238,598],{"class":597},[580,4240,602],{"class":601},[580,4242,605],{"class":593},[580,4244,608],{"class":593},[580,4246,3800],{"class":611},[580,4248,608],{"class":593},[580,4250,617],{"class":593},[580,4252,4253,4255,4257,4259,4261,4263,4266,4268],{"class":582,"line":2443},[580,4254,1773],{"class":593},[580,4256,598],{"class":597},[580,4258,602],{"class":601},[580,4260,605],{"class":593},[580,4262,608],{"class":593},[580,4264,4265],{"class":611},"w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4",[580,4267,608],{"class":593},[580,4269,617],{"class":593},[580,4271,4272,4274,4276,4278,4280,4282,4285,4287,4289,4291,4293,4295,4297,4299,4301,4303,4305,4307,4309,4311,4313,4315,4317],{"class":582,"line":2448},[580,4273,1793],{"class":593},[580,4275,1198],{"class":597},[580,4277,602],{"class":601},[580,4279,605],{"class":593},[580,4281,608],{"class":593},[580,4283,4284],{"class":611},"w-6 h-6 text-purple-600",[580,4286,608],{"class":593},[580,4288,2192],{"class":601},[580,4290,605],{"class":593},[580,4292,608],{"class":593},[580,4294,2199],{"class":611},[580,4296,608],{"class":593},[580,4298,2204],{"class":601},[580,4300,605],{"class":593},[580,4302,608],{"class":593},[580,4304,2211],{"class":611},[580,4306,608],{"class":593},[580,4308,2216],{"class":601},[580,4310,605],{"class":593},[580,4312,608],{"class":593},[580,4314,2223],{"class":611},[580,4316,608],{"class":593},[580,4318,617],{"class":593},[580,4320,4321,4323,4325,4327,4329,4331,4333,4335,4337,4339,4341,4343,4345,4347,4349,4351,4353,4355,4357,4359,4361,4364,4366],{"class":582,"line":2454},[580,4322,2233],{"class":593},[580,4324,2236],{"class":597},[580,4326,2239],{"class":601},[580,4328,605],{"class":593},[580,4330,608],{"class":593},[580,4332,2246],{"class":611},[580,4334,608],{"class":593},[580,4336,2251],{"class":601},[580,4338,605],{"class":593},[580,4340,608],{"class":593},[580,4342,2246],{"class":611},[580,4344,608],{"class":593},[580,4346,2262],{"class":601},[580,4348,605],{"class":593},[580,4350,608],{"class":593},[580,4352,2269],{"class":611},[580,4354,608],{"class":593},[580,4356,2274],{"class":601},[580,4358,605],{"class":593},[580,4360,608],{"class":593},[580,4362,4363],{"class":611},"M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01",[580,4365,608],{"class":593},[580,4367,2286],{"class":593},[580,4369,4370,4372,4374],{"class":582,"line":2485},[580,4371,1854],{"class":593},[580,4373,1198],{"class":597},[580,4375,617],{"class":593},[580,4377,4378,4380,4382],{"class":582,"line":2505},[580,4379,1863],{"class":593},[580,4381,598],{"class":597},[580,4383,617],{"class":593},[580,4385,4386,4388,4390,4392,4394,4396,4398,4400,4402,4405,4407,4409],{"class":582,"line":2543},[580,4387,1773],{"class":593},[580,4389,445],{"class":597},[580,4391,602],{"class":601},[580,4393,605],{"class":593},[580,4395,608],{"class":593},[580,4397,3952],{"class":611},[580,4399,608],{"class":593},[580,4401,639],{"class":593},[580,4403,4404],{"class":642},"OKLCH Colors",[580,4406,646],{"class":593},[580,4408,445],{"class":597},[580,4410,617],{"class":593},[580,4412,4413,4415,4417,4419,4421,4423,4425,4427,4429,4432,4434,4436],{"class":582,"line":2580},[580,4414,1773],{"class":593},[580,4416,432],{"class":597},[580,4418,602],{"class":601},[580,4420,605],{"class":593},[580,4422,608],{"class":593},[580,4424,3980],{"class":611},[580,4426,608],{"class":593},[580,4428,639],{"class":593},[580,4430,4431],{"class":642},"Color space OKLCH mặc định — perceptually uniform, P3 wide gamut support.",[580,4433,646],{"class":593},[580,4435,432],{"class":597},[580,4437,617],{"class":593},[580,4439,4440,4442,4444],{"class":582,"line":2617},[580,4441,2436],{"class":593},[580,4443,598],{"class":597},[580,4445,617],{"class":593},[580,4447,4448],{"class":582,"line":2654},[580,4449,963],{"emptyLinePlaceholder":962},[580,4451,4452],{"class":582,"line":2684},[580,4453,4454],{"class":586},"      \u003C!-- Card 4 -->\n",[580,4456,4457,4459,4461,4463,4465,4467,4469,4471],{"class":582,"line":2689},[580,4458,1743],{"class":593},[580,4460,598],{"class":597},[580,4462,602],{"class":601},[580,4464,605],{"class":593},[580,4466,608],{"class":593},[580,4468,3800],{"class":611},[580,4470,608],{"class":593},[580,4472,617],{"class":593},[580,4474,4475,4477,4479,4481,4483,4485,4488,4490],{"class":582,"line":2698},[580,4476,1773],{"class":593},[580,4478,598],{"class":597},[580,4480,602],{"class":601},[580,4482,605],{"class":593},[580,4484,608],{"class":593},[580,4486,4487],{"class":611},"w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-4",[580,4489,608],{"class":593},[580,4491,617],{"class":593},[580,4493,4494,4496,4498,4500,4502,4504,4507,4509,4511,4513,4515,4517,4519,4521,4523,4525,4527,4529,4531,4533,4535,4537,4539],{"class":582,"line":2707},[580,4495,1793],{"class":593},[580,4497,1198],{"class":597},[580,4499,602],{"class":601},[580,4501,605],{"class":593},[580,4503,608],{"class":593},[580,4505,4506],{"class":611},"w-6 h-6 text-orange-600",[580,4508,608],{"class":593},[580,4510,2192],{"class":601},[580,4512,605],{"class":593},[580,4514,608],{"class":593},[580,4516,2199],{"class":611},[580,4518,608],{"class":593},[580,4520,2204],{"class":601},[580,4522,605],{"class":593},[580,4524,608],{"class":593},[580,4526,2211],{"class":611},[580,4528,608],{"class":593},[580,4530,2216],{"class":601},[580,4532,605],{"class":593},[580,4534,608],{"class":593},[580,4536,2223],{"class":611},[580,4538,608],{"class":593},[580,4540,617],{"class":593},[580,4542,4543,4545,4547,4549,4551,4553,4555,4557,4559,4561,4563,4565,4567,4569,4571,4573,4575,4577,4579,4581,4583,4586,4588],{"class":582,"line":2716},[580,4544,2233],{"class":593},[580,4546,2236],{"class":597},[580,4548,2239],{"class":601},[580,4550,605],{"class":593},[580,4552,608],{"class":593},[580,4554,2246],{"class":611},[580,4556,608],{"class":593},[580,4558,2251],{"class":601},[580,4560,605],{"class":593},[580,4562,608],{"class":593},[580,4564,2246],{"class":611},[580,4566,608],{"class":593},[580,4568,2262],{"class":601},[580,4570,605],{"class":593},[580,4572,608],{"class":593},[580,4574,2269],{"class":611},[580,4576,608],{"class":593},[580,4578,2274],{"class":601},[580,4580,605],{"class":593},[580,4582,608],{"class":593},[580,4584,4585],{"class":611},"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15",[580,4587,608],{"class":593},[580,4589,2286],{"class":593},[580,4591,4592,4594,4596],{"class":582,"line":2726},[580,4593,1854],{"class":593},[580,4595,1198],{"class":597},[580,4597,617],{"class":593},[580,4599,4600,4602,4604],{"class":582,"line":2735},[580,4601,1863],{"class":593},[580,4603,598],{"class":597},[580,4605,617],{"class":593},[580,4607,4608,4610,4612,4614,4616,4618,4620,4622,4624,4627,4629,4631],{"class":582,"line":2740},[580,4609,1773],{"class":593},[580,4611,445],{"class":597},[580,4613,602],{"class":601},[580,4615,605],{"class":593},[580,4617,608],{"class":593},[580,4619,3952],{"class":611},[580,4621,608],{"class":593},[580,4623,639],{"class":593},[580,4625,4626],{"class":642},"Auto Content Detection",[580,4628,646],{"class":593},[580,4630,445],{"class":597},[580,4632,617],{"class":593},[580,4634,4635,4637,4639,4641,4643,4645,4647,4649,4651,4654,4656,4658],{"class":582,"line":2746},[580,4636,1773],{"class":593},[580,4638,432],{"class":597},[580,4640,602],{"class":601},[580,4642,605],{"class":593},[580,4644,608],{"class":593},[580,4646,3980],{"class":611},[580,4648,608],{"class":593},[580,4650,639],{"class":593},[580,4652,4653],{"class":642},"Không cần cấu hình content path. Tailwind tự scan và generate đúng class bạn dùng.",[580,4655,646],{"class":593},[580,4657,432],{"class":597},[580,4659,617],{"class":593},[580,4661,4662,4664,4666],{"class":582,"line":2770},[580,4663,2436],{"class":593},[580,4665,598],{"class":597},[580,4667,617],{"class":593},[580,4669,4670],{"class":582,"line":2775},[580,4671,963],{"emptyLinePlaceholder":962},[580,4673,4674],{"class":582,"line":2781},[580,4675,4676],{"class":586},"      \u003C!-- Card 5 -->\n",[580,4678,4679,4681,4683,4685,4687,4689,4691,4693],{"class":582,"line":2801},[580,4680,1743],{"class":593},[580,4682,598],{"class":597},[580,4684,602],{"class":601},[580,4686,605],{"class":593},[580,4688,608],{"class":593},[580,4690,3800],{"class":611},[580,4692,608],{"class":593},[580,4694,617],{"class":593},[580,4696,4697,4699,4701,4703,4705,4707,4710,4712],{"class":582,"line":2832},[580,4698,1773],{"class":593},[580,4700,598],{"class":597},[580,4702,602],{"class":601},[580,4704,605],{"class":593},[580,4706,608],{"class":593},[580,4708,4709],{"class":611},"w-12 h-12 bg-pink-100 rounded-lg flex items-center justify-center mb-4",[580,4711,608],{"class":593},[580,4713,617],{"class":593},[580,4715,4716,4718,4720,4722,4724,4726,4729,4731,4733,4735,4737,4739,4741,4743,4745,4747,4749,4751,4753,4755,4757,4759,4761],{"class":582,"line":2861},[580,4717,1793],{"class":593},[580,4719,1198],{"class":597},[580,4721,602],{"class":601},[580,4723,605],{"class":593},[580,4725,608],{"class":593},[580,4727,4728],{"class":611},"w-6 h-6 text-pink-600",[580,4730,608],{"class":593},[580,4732,2192],{"class":601},[580,4734,605],{"class":593},[580,4736,608],{"class":593},[580,4738,2199],{"class":611},[580,4740,608],{"class":593},[580,4742,2204],{"class":601},[580,4744,605],{"class":593},[580,4746,608],{"class":593},[580,4748,2211],{"class":611},[580,4750,608],{"class":593},[580,4752,2216],{"class":601},[580,4754,605],{"class":593},[580,4756,608],{"class":593},[580,4758,2223],{"class":611},[580,4760,608],{"class":593},[580,4762,617],{"class":593},[580,4764,4765,4767,4769,4771,4773,4775,4777,4779,4781,4783,4785,4787,4789,4791,4793,4795,4797,4799,4801,4803,4805,4808,4810],{"class":582,"line":2890},[580,4766,2233],{"class":593},[580,4768,2236],{"class":597},[580,4770,2239],{"class":601},[580,4772,605],{"class":593},[580,4774,608],{"class":593},[580,4776,2246],{"class":611},[580,4778,608],{"class":593},[580,4780,2251],{"class":601},[580,4782,605],{"class":593},[580,4784,608],{"class":593},[580,4786,2246],{"class":611},[580,4788,608],{"class":593},[580,4790,2262],{"class":601},[580,4792,605],{"class":593},[580,4794,608],{"class":593},[580,4796,2269],{"class":611},[580,4798,608],{"class":593},[580,4800,2274],{"class":601},[580,4802,605],{"class":593},[580,4804,608],{"class":593},[580,4806,4807],{"class":611},"M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4",[580,4809,608],{"class":593},[580,4811,2286],{"class":593},[580,4813,4814,4816,4818],{"class":582,"line":2899},[580,4815,1854],{"class":593},[580,4817,1198],{"class":597},[580,4819,617],{"class":593},[580,4821,4822,4824,4826],{"class":582,"line":2929},[580,4823,1863],{"class":593},[580,4825,598],{"class":597},[580,4827,617],{"class":593},[580,4829,4830,4832,4834,4836,4838,4840,4842,4844,4846,4849,4851,4853],{"class":582,"line":2957},[580,4831,1773],{"class":593},[580,4833,445],{"class":597},[580,4835,602],{"class":601},[580,4837,605],{"class":593},[580,4839,608],{"class":593},[580,4841,3952],{"class":611},[580,4843,608],{"class":593},[580,4845,639],{"class":593},[580,4847,4848],{"class":642},"Container Queries",[580,4850,646],{"class":593},[580,4852,445],{"class":597},[580,4854,617],{"class":593},[580,4856,4857,4859,4861,4863,4865,4867,4869,4871,4873,4876,4878,4880],{"class":582,"line":2966},[580,4858,1773],{"class":593},[580,4860,432],{"class":597},[580,4862,602],{"class":601},[580,4864,605],{"class":593},[580,4866,608],{"class":593},[580,4868,3980],{"class":611},[580,4870,608],{"class":593},[580,4872,639],{"class":593},[580,4874,4875],{"class":642},"@container built-in — component tự thích nghi theo kích thước container, không phải viewport.",[580,4877,646],{"class":593},[580,4879,432],{"class":597},[580,4881,617],{"class":593},[580,4883,4884,4886,4888],{"class":582,"line":2975},[580,4885,2436],{"class":593},[580,4887,598],{"class":597},[580,4889,617],{"class":593},[580,4891,4892],{"class":582,"line":2980},[580,4893,963],{"emptyLinePlaceholder":962},[580,4895,4896],{"class":582,"line":2989},[580,4897,4898],{"class":586},"      \u003C!-- Card 6 -->\n",[580,4900,4901,4903,4905,4907,4909,4911,4913,4915],{"class":582,"line":3025},[580,4902,1743],{"class":593},[580,4904,598],{"class":597},[580,4906,602],{"class":601},[580,4908,605],{"class":593},[580,4910,608],{"class":593},[580,4912,3800],{"class":611},[580,4914,608],{"class":593},[580,4916,617],{"class":593},[580,4918,4919,4921,4923,4925,4927,4929,4932,4934],{"class":582,"line":3053},[580,4920,1773],{"class":593},[580,4922,598],{"class":597},[580,4924,602],{"class":601},[580,4926,605],{"class":593},[580,4928,608],{"class":593},[580,4930,4931],{"class":611},"w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mb-4",[580,4933,608],{"class":593},[580,4935,617],{"class":593},[580,4937,4938,4940,4942,4944,4946,4948,4951,4953,4955,4957,4959,4961,4963,4965,4967,4969,4971,4973,4975,4977,4979,4981,4983],{"class":582,"line":3081},[580,4939,1793],{"class":593},[580,4941,1198],{"class":597},[580,4943,602],{"class":601},[580,4945,605],{"class":593},[580,4947,608],{"class":593},[580,4949,4950],{"class":611},"w-6 h-6 text-teal-600",[580,4952,608],{"class":593},[580,4954,2192],{"class":601},[580,4956,605],{"class":593},[580,4958,608],{"class":593},[580,4960,2199],{"class":611},[580,4962,608],{"class":593},[580,4964,2204],{"class":601},[580,4966,605],{"class":593},[580,4968,608],{"class":593},[580,4970,2211],{"class":611},[580,4972,608],{"class":593},[580,4974,2216],{"class":601},[580,4976,605],{"class":593},[580,4978,608],{"class":593},[580,4980,2223],{"class":611},[580,4982,608],{"class":593},[580,4984,617],{"class":593},[580,4986,4987,4989,4991,4993,4995,4997,4999,5001,5003,5005,5007,5009,5011,5013,5015,5017,5019,5021,5023,5025,5027,5030,5032],{"class":582,"line":3109},[580,4988,2233],{"class":593},[580,4990,2236],{"class":597},[580,4992,2239],{"class":601},[580,4994,605],{"class":593},[580,4996,608],{"class":593},[580,4998,2246],{"class":611},[580,5000,608],{"class":593},[580,5002,2251],{"class":601},[580,5004,605],{"class":593},[580,5006,608],{"class":593},[580,5008,2246],{"class":611},[580,5010,608],{"class":593},[580,5012,2262],{"class":601},[580,5014,605],{"class":593},[580,5016,608],{"class":593},[580,5018,2269],{"class":611},[580,5020,608],{"class":593},[580,5022,2274],{"class":601},[580,5024,605],{"class":593},[580,5026,608],{"class":593},[580,5028,5029],{"class":611},"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10",[580,5031,608],{"class":593},[580,5033,2286],{"class":593},[580,5035,5036,5038,5040],{"class":582,"line":3114},[580,5037,1854],{"class":593},[580,5039,1198],{"class":597},[580,5041,617],{"class":593},[580,5043,5044,5046,5048],{"class":582,"line":3145},[580,5045,1863],{"class":593},[580,5047,598],{"class":597},[580,5049,617],{"class":593},[580,5051,5052,5054,5056,5058,5060,5062,5064,5066,5068,5071,5073,5075],{"class":582,"line":3174},[580,5053,1773],{"class":593},[580,5055,445],{"class":597},[580,5057,602],{"class":601},[580,5059,605],{"class":593},[580,5061,608],{"class":593},[580,5063,3952],{"class":611},[580,5065,608],{"class":593},[580,5067,639],{"class":593},[580,5069,5070],{"class":642},"3D Transforms",[580,5072,646],{"class":593},[580,5074,445],{"class":597},[580,5076,617],{"class":593},[580,5078,5079,5081,5083,5085,5087,5089,5091,5093,5095,5098,5100,5102],{"class":582,"line":3200},[580,5080,1773],{"class":593},[580,5082,432],{"class":597},[580,5084,602],{"class":601},[580,5086,605],{"class":593},[580,5088,608],{"class":593},[580,5090,3980],{"class":611},[580,5092,608],{"class":593},[580,5094,639],{"class":593},[580,5096,5097],{"class":642},"rotate-x-*, rotate-y-*, rotate-z-* built-in. Transform 3D không cần plugin.",[580,5099,646],{"class":593},[580,5101,432],{"class":597},[580,5103,617],{"class":593},[580,5105,5106,5108,5110],{"class":582,"line":3226},[580,5107,2436],{"class":593},[580,5109,598],{"class":597},[580,5111,617],{"class":593},[580,5113,5114],{"class":582,"line":3236},[580,5115,963],{"emptyLinePlaceholder":962},[580,5117,5118],{"class":582,"line":3241},[580,5119,5120],{"class":586},"      \u003C!-- Card 7 -->\n",[580,5122,5123,5125,5127,5129,5131,5133,5135,5137],{"class":582,"line":3247},[580,5124,1743],{"class":593},[580,5126,598],{"class":597},[580,5128,602],{"class":601},[580,5130,605],{"class":593},[580,5132,608],{"class":593},[580,5134,3800],{"class":611},[580,5136,608],{"class":593},[580,5138,617],{"class":593},[580,5140,5141,5143,5145,5147,5149,5151,5154,5156],{"class":582,"line":3283},[580,5142,1773],{"class":593},[580,5144,598],{"class":597},[580,5146,602],{"class":601},[580,5148,605],{"class":593},[580,5150,608],{"class":593},[580,5152,5153],{"class":611},"w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4",[580,5155,608],{"class":593},[580,5157,617],{"class":593},[580,5159,5160,5162,5164,5166,5168,5170,5173,5175,5177,5179,5181,5183,5185,5187,5189,5191,5193,5195,5197,5199,5201,5203,5205],{"class":582,"line":3309},[580,5161,1793],{"class":593},[580,5163,1198],{"class":597},[580,5165,602],{"class":601},[580,5167,605],{"class":593},[580,5169,608],{"class":593},[580,5171,5172],{"class":611},"w-6 h-6 text-indigo-600",[580,5174,608],{"class":593},[580,5176,2192],{"class":601},[580,5178,605],{"class":593},[580,5180,608],{"class":593},[580,5182,2199],{"class":611},[580,5184,608],{"class":593},[580,5186,2204],{"class":601},[580,5188,605],{"class":593},[580,5190,608],{"class":593},[580,5192,2211],{"class":611},[580,5194,608],{"class":593},[580,5196,2216],{"class":601},[580,5198,605],{"class":593},[580,5200,608],{"class":593},[580,5202,2223],{"class":611},[580,5204,608],{"class":593},[580,5206,617],{"class":593},[580,5208,5209,5211,5213,5215,5217,5219,5221,5223,5225,5227,5229,5231,5233,5235,5237,5239,5241,5243,5245,5247,5249,5252,5254],{"class":582,"line":3336},[580,5210,2233],{"class":593},[580,5212,2236],{"class":597},[580,5214,2239],{"class":601},[580,5216,605],{"class":593},[580,5218,608],{"class":593},[580,5220,2246],{"class":611},[580,5222,608],{"class":593},[580,5224,2251],{"class":601},[580,5226,605],{"class":593},[580,5228,608],{"class":593},[580,5230,2246],{"class":611},[580,5232,608],{"class":593},[580,5234,2262],{"class":601},[580,5236,605],{"class":593},[580,5238,608],{"class":593},[580,5240,2269],{"class":611},[580,5242,608],{"class":593},[580,5244,2274],{"class":601},[580,5246,605],{"class":593},[580,5248,608],{"class":593},[580,5250,5251],{"class":611},"M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122",[580,5253,608],{"class":593},[580,5255,2286],{"class":593},[580,5257,5258,5260,5262],{"class":582,"line":3363},[580,5259,1854],{"class":593},[580,5261,1198],{"class":597},[580,5263,617],{"class":593},[580,5265,5266,5268,5270],{"class":582,"line":3389},[580,5267,1863],{"class":593},[580,5269,598],{"class":597},[580,5271,617],{"class":593},[580,5273,5274,5276,5278,5280,5282,5284,5286,5288,5290,5293,5295,5297],{"class":582,"line":3399},[580,5275,1773],{"class":593},[580,5277,445],{"class":597},[580,5279,602],{"class":601},[580,5281,605],{"class":593},[580,5283,608],{"class":593},[580,5285,3952],{"class":611},[580,5287,608],{"class":593},[580,5289,639],{"class":593},[580,5291,5292],{"class":642},"Radial & Conic Gradients",[580,5294,646],{"class":593},[580,5296,445],{"class":597},[580,5298,617],{"class":593},[580,5300,5301,5303,5305,5307,5309,5311,5313,5315,5317,5320,5322,5324],{"class":582,"line":3408},[580,5302,1773],{"class":593},[580,5304,432],{"class":597},[580,5306,602],{"class":601},[580,5308,605],{"class":593},[580,5310,608],{"class":593},[580,5312,3980],{"class":611},[580,5314,608],{"class":593},[580,5316,639],{"class":593},[580,5318,5319],{"class":642},"bg-radial-* và bg-conic-* cho gradient đa dạng hơn, không chỉ linear.",[580,5321,646],{"class":593},[580,5323,432],{"class":597},[580,5325,617],{"class":593},[580,5327,5328,5330,5332],{"class":582,"line":3417},[580,5329,2436],{"class":593},[580,5331,598],{"class":597},[580,5333,617],{"class":593},[580,5335,5336],{"class":582,"line":3422},[580,5337,963],{"emptyLinePlaceholder":962},[580,5339,5340],{"class":582,"line":3431},[580,5341,5342],{"class":586},"      \u003C!-- Card 8 -->\n",[580,5344,5346,5348,5350,5352,5354,5356,5358,5360],{"class":582,"line":5345},100,[580,5347,1743],{"class":593},[580,5349,598],{"class":597},[580,5351,602],{"class":601},[580,5353,605],{"class":593},[580,5355,608],{"class":593},[580,5357,3800],{"class":611},[580,5359,608],{"class":593},[580,5361,617],{"class":593},[580,5363,5365,5367,5369,5371,5373,5375,5378,5380],{"class":582,"line":5364},101,[580,5366,1773],{"class":593},[580,5368,598],{"class":597},[580,5370,602],{"class":601},[580,5372,605],{"class":593},[580,5374,608],{"class":593},[580,5376,5377],{"class":611},"w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-4",[580,5379,608],{"class":593},[580,5381,617],{"class":593},[580,5383,5385,5387,5389,5391,5393,5395,5398,5400,5402,5404,5406,5408,5410,5412,5414,5416,5418,5420,5422,5424,5426,5428,5430],{"class":582,"line":5384},102,[580,5386,1793],{"class":593},[580,5388,1198],{"class":597},[580,5390,602],{"class":601},[580,5392,605],{"class":593},[580,5394,608],{"class":593},[580,5396,5397],{"class":611},"w-6 h-6 text-red-600",[580,5399,608],{"class":593},[580,5401,2192],{"class":601},[580,5403,605],{"class":593},[580,5405,608],{"class":593},[580,5407,2199],{"class":611},[580,5409,608],{"class":593},[580,5411,2204],{"class":601},[580,5413,605],{"class":593},[580,5415,608],{"class":593},[580,5417,2211],{"class":611},[580,5419,608],{"class":593},[580,5421,2216],{"class":601},[580,5423,605],{"class":593},[580,5425,608],{"class":593},[580,5427,2223],{"class":611},[580,5429,608],{"class":593},[580,5431,617],{"class":593},[580,5433,5435,5437,5439,5441,5443,5445,5447,5449,5451,5453,5455,5457,5459,5461,5463,5465,5467,5469,5471,5473,5475,5478,5480],{"class":582,"line":5434},103,[580,5436,2233],{"class":593},[580,5438,2236],{"class":597},[580,5440,2239],{"class":601},[580,5442,605],{"class":593},[580,5444,608],{"class":593},[580,5446,2246],{"class":611},[580,5448,608],{"class":593},[580,5450,2251],{"class":601},[580,5452,605],{"class":593},[580,5454,608],{"class":593},[580,5456,2246],{"class":611},[580,5458,608],{"class":593},[580,5460,2262],{"class":601},[580,5462,605],{"class":593},[580,5464,608],{"class":593},[580,5466,2269],{"class":611},[580,5468,608],{"class":593},[580,5470,2274],{"class":601},[580,5472,605],{"class":593},[580,5474,608],{"class":593},[580,5476,5477],{"class":611},"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z",[580,5479,608],{"class":593},[580,5481,2286],{"class":593},[580,5483,5485,5487,5489],{"class":582,"line":5484},104,[580,5486,1854],{"class":593},[580,5488,1198],{"class":597},[580,5490,617],{"class":593},[580,5492,5494,5496,5498],{"class":582,"line":5493},105,[580,5495,1863],{"class":593},[580,5497,598],{"class":597},[580,5499,617],{"class":593},[580,5501,5503,5505,5507,5509,5511,5513,5515,5517,5519,5522,5524,5526],{"class":582,"line":5502},106,[580,5504,1773],{"class":593},[580,5506,445],{"class":597},[580,5508,602],{"class":601},[580,5510,605],{"class":593},[580,5512,608],{"class":593},[580,5514,3952],{"class":611},[580,5516,608],{"class":593},[580,5518,639],{"class":593},[580,5520,5521],{"class":642},"V4.3 Scrollbar Styling",[580,5523,646],{"class":593},[580,5525,445],{"class":597},[580,5527,617],{"class":593},[580,5529,5531,5533,5535,5537,5539,5541,5543,5545,5547,5550,5552,5554],{"class":582,"line":5530},107,[580,5532,1773],{"class":593},[580,5534,432],{"class":597},[580,5536,602],{"class":601},[580,5538,605],{"class":593},[580,5540,608],{"class":593},[580,5542,3980],{"class":611},[580,5544,608],{"class":593},[580,5546,639],{"class":593},[580,5548,5549],{"class":642},"scrollbar-thin, scrollbar-thumb-*, scrollbar-track-* — style scrollbar không cần plugin.",[580,5551,646],{"class":593},[580,5553,432],{"class":597},[580,5555,617],{"class":593},[580,5557,5559,5561,5563],{"class":582,"line":5558},108,[580,5560,2436],{"class":593},[580,5562,598],{"class":597},[580,5564,617],{"class":593},[580,5566,5568],{"class":582,"line":5567},109,[580,5569,963],{"emptyLinePlaceholder":962},[580,5571,5573,5575,5577],{"class":582,"line":5572},110,[580,5574,2719],{"class":593},[580,5576,598],{"class":597},[580,5578,617],{"class":593},[580,5580,5582],{"class":582,"line":5581},111,[580,5583,963],{"emptyLinePlaceholder":962},[580,5585,5587],{"class":582,"line":5586},112,[580,5588,5589],{"class":586},"    \u003C!-- Breakpoint indicator (dev helper) -->\n",[580,5591,5593,5595,5597,5599,5601,5603,5606,5608],{"class":582,"line":5592},113,[580,5594,1195],{"class":593},[580,5596,598],{"class":597},[580,5598,602],{"class":601},[580,5600,605],{"class":593},[580,5602,608],{"class":593},[580,5604,5605],{"class":611},"fixed bottom-4 right-4 bg-gray-900 text-white text-xs px-3 py-1.5 rounded-full font-mono",[580,5607,608],{"class":593},[580,5609,617],{"class":593},[580,5611,5613,5615,5617,5619,5621,5623,5626,5628,5630,5633,5635,5637],{"class":582,"line":5612},114,[580,5614,1743],{"class":593},[580,5616,580],{"class":597},[580,5618,602],{"class":601},[580,5620,605],{"class":593},[580,5622,608],{"class":593},[580,5624,5625],{"class":611},"sm:hidden",[580,5627,608],{"class":593},[580,5629,639],{"class":593},[580,5631,5632],{"class":642},"xs (<640px)",[580,5634,646],{"class":593},[580,5636,580],{"class":597},[580,5638,617],{"class":593},[580,5640,5642,5644,5646,5648,5650,5652,5655,5657,5659,5662,5664,5666],{"class":582,"line":5641},115,[580,5643,1743],{"class":593},[580,5645,580],{"class":597},[580,5647,602],{"class":601},[580,5649,605],{"class":593},[580,5651,608],{"class":593},[580,5653,5654],{"class":611},"hidden sm:inline md:hidden",[580,5656,608],{"class":593},[580,5658,639],{"class":593},[580,5660,5661],{"class":642},"sm (≥640px)",[580,5663,646],{"class":593},[580,5665,580],{"class":597},[580,5667,617],{"class":593},[580,5669,5671,5673,5675,5677,5679,5681,5684,5686,5688,5691,5693,5695],{"class":582,"line":5670},116,[580,5672,1743],{"class":593},[580,5674,580],{"class":597},[580,5676,602],{"class":601},[580,5678,605],{"class":593},[580,5680,608],{"class":593},[580,5682,5683],{"class":611},"hidden md:inline lg:hidden",[580,5685,608],{"class":593},[580,5687,639],{"class":593},[580,5689,5690],{"class":642},"md (≥768px)",[580,5692,646],{"class":593},[580,5694,580],{"class":597},[580,5696,617],{"class":593},[580,5698,5700,5702,5704,5706,5708,5710,5713,5715,5717,5720,5722,5724],{"class":582,"line":5699},117,[580,5701,1743],{"class":593},[580,5703,580],{"class":597},[580,5705,602],{"class":601},[580,5707,605],{"class":593},[580,5709,608],{"class":593},[580,5711,5712],{"class":611},"hidden lg:inline xl:hidden",[580,5714,608],{"class":593},[580,5716,639],{"class":593},[580,5718,5719],{"class":642},"lg (≥1024px)",[580,5721,646],{"class":593},[580,5723,580],{"class":597},[580,5725,617],{"class":593},[580,5727,5729,5731,5733,5735,5737,5739,5742,5744,5746,5749,5751,5753],{"class":582,"line":5728},118,[580,5730,1743],{"class":593},[580,5732,580],{"class":597},[580,5734,602],{"class":601},[580,5736,605],{"class":593},[580,5738,608],{"class":593},[580,5740,5741],{"class":611},"hidden xl:inline 2xl:hidden",[580,5743,608],{"class":593},[580,5745,639],{"class":593},[580,5747,5748],{"class":642},"xl (≥1280px)",[580,5750,646],{"class":593},[580,5752,580],{"class":597},[580,5754,617],{"class":593},[580,5756,5758,5760,5762,5764,5766,5768,5771,5773,5775,5778,5780,5782],{"class":582,"line":5757},119,[580,5759,1743],{"class":593},[580,5761,580],{"class":597},[580,5763,602],{"class":601},[580,5765,605],{"class":593},[580,5767,608],{"class":593},[580,5769,5770],{"class":611},"hidden 2xl:inline",[580,5772,608],{"class":593},[580,5774,639],{"class":593},[580,5776,5777],{"class":642},"2xl (≥1536px)",[580,5779,646],{"class":593},[580,5781,580],{"class":597},[580,5783,617],{"class":593},[580,5785,5787,5789,5791],{"class":582,"line":5786},120,[580,5788,2719],{"class":593},[580,5790,598],{"class":597},[580,5792,617],{"class":593},[580,5794,5796,5798,5800],{"class":582,"line":5795},121,[580,5797,1215],{"class":593},[580,5799,598],{"class":597},[580,5801,617],{"class":593},[580,5803,5805],{"class":582,"line":5804},122,[580,5806,963],{"emptyLinePlaceholder":962},[580,5808,5810,5812,5814],{"class":582,"line":5809},123,[580,5811,646],{"class":593},[580,5813,1677],{"class":597},[580,5815,617],{"class":593},[580,5817,5819,5821,5823],{"class":582,"line":5818},124,[580,5820,646],{"class":593},[580,5822,575],{"class":597},[580,5824,617],{"class":593},[432,5826,5827],{},[436,5828,3442],{},[804,5830,5831,5837,5843,5849,5859],{},[807,5832,5833,5836],{},[491,5834,5835],{},"grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",": Quy luật mobile-first rõ ràng — tăng dần số cột.",[807,5838,5839,5842],{},[491,5840,5841],{},"gap-4 md:gap-6 lg:gap-8",": Gap cũng tăng theo màn hình — khoảng cách giữa các card phù hợp với không gian có sẵn.",[807,5844,5845,5848],{},[491,5846,5847],{},"hover:shadow-md transition-shadow",": Micro-interaction — card nổi lên khi hover.",[807,5850,5851,5852,5854,5855,5858],{},"Breakpoint indicator góc phải dưới: công cụ dev để biết đang ở breakpoint nào — dùng ",[491,5853,3165],{},"\u002F",[491,5856,5857],{},"inline"," kết hợp prefix để show\u002Fhide.",[807,5860,5861],{},"Mỗi card có icon trong colored box + title + description — pattern cực phổ biến cho feature grid.",[5863,5864],"hr",{},[427,5866,5868],{"id":5867},"_2-container-queries-v40-new","2. Container Queries (v4.0 NEW)",[432,5870,5871,5872,5875,5876,5879],{},"Container queries là ",[436,5873,5874],{},"một trong những tính năng quan trọng nhất của CSS hiện đại"," và Tailwind CSS v4 hỗ trợ built-in. Không cần plugin ",[491,5877,5878],{},"@tailwindcss\u002Fcontainer-queries"," như v3 nữa.",[445,5881,5883],{"id":5882},"_21-container-queries-là-gì","2.1. Container Queries là gì?",[432,5885,5886,5889,5890,5892,5893,5889,5896,5899],{},[436,5887,5888],{},"Media queries"," respond theo ",[436,5891,1603],{}," (kích thước cửa sổ trình duyệt).\n",[436,5894,5895],{},"Container queries",[436,5897,5898],{},"kích thước của container cha"," (phần tử chứa component).",[553,5901,5902,5905,5906,3003],{"color":555,"icon":556},[436,5903,5904],{},"Tại sao container queries quan trọng?"," Cùng một component card có thể được đặt trong sidebar hẹp (300px) hoặc trong main content rộng (800px). Với media query, bạn chỉ có 1 style cho tất cả. Với container query, component tự thích nghi dựa trên không gian nó thực sự có — tạo ra component ",[436,5907,5908],{},"thực sự reusable",[445,5910,5912],{"id":5911},"_22-cú-pháp-container-queries-trong-tailwind-css-v4","2.2. Cú pháp Container Queries trong Tailwind CSS v4",[571,5914,5916],{"className":573,"code":5915,"language":575,"meta":576,"style":576},"\u003C!-- Bước 1: Đánh dấu container với class @container -->\n\u003Cdiv class=\"@container\">\n  \u003C!-- Bước 2: Dùng @sm:, @md:, @lg:, @xl: prefix cho children -->\n  \u003Cdiv class=\"grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3\">\n    \u003C!-- Nội dung thay đổi dựa trên kích thước CONTAINER, không phải viewport -->\n  \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[491,5917,5918,5923,5942,5947,5966,5971,5979],{"__ignoreMap":576},[580,5919,5920],{"class":582,"line":583},[580,5921,5922],{"class":586},"\u003C!-- Bước 1: Đánh dấu container với class @container -->\n",[580,5924,5925,5927,5929,5931,5933,5935,5938,5940],{"class":582,"line":590},[580,5926,594],{"class":593},[580,5928,598],{"class":597},[580,5930,602],{"class":601},[580,5932,605],{"class":593},[580,5934,608],{"class":593},[580,5936,5937],{"class":611},"@container",[580,5939,608],{"class":593},[580,5941,617],{"class":593},[580,5943,5944],{"class":582,"line":620},[580,5945,5946],{"class":586},"  \u003C!-- Bước 2: Dùng @sm:, @md:, @lg:, @xl: prefix cho children -->\n",[580,5948,5949,5951,5953,5955,5957,5959,5962,5964],{"class":582,"line":653},[580,5950,623],{"class":593},[580,5952,598],{"class":597},[580,5954,602],{"class":601},[580,5956,605],{"class":593},[580,5958,608],{"class":593},[580,5960,5961],{"class":611},"grid grid-cols-1 @md:grid-cols-2 @lg:grid-cols-3",[580,5963,608],{"class":593},[580,5965,617],{"class":593},[580,5967,5968],{"class":582,"line":681},[580,5969,5970],{"class":586},"    \u003C!-- Nội dung thay đổi dựa trên kích thước CONTAINER, không phải viewport -->\n",[580,5972,5973,5975,5977],{"class":582,"line":709},[580,5974,1215],{"class":593},[580,5976,598],{"class":597},[580,5978,617],{"class":593},[580,5980,5981,5983,5985],{"class":582,"line":737},[580,5982,646],{"class":593},[580,5984,598],{"class":597},[580,5986,617],{"class":593},[432,5988,5989],{},"Container query breakpoints mặc định (dựa trên width của container):",[450,5991,5992,6001],{},[453,5993,5994],{},[456,5995,5996,5998],{},[459,5997,461],{},[459,5999,6000],{},"Container width",[469,6002,6003,6013,6023,6033,6043,6053,6063,6073,6083,6093,6103],{},[456,6004,6005,6010],{},[474,6006,6007],{},[491,6008,6009],{},"@xs:",[474,6011,6012],{},"≥ 20rem (320px)",[456,6014,6015,6020],{},[474,6016,6017],{},[491,6018,6019],{},"@sm:",[474,6021,6022],{},"≥ 24rem (384px)",[456,6024,6025,6030],{},[474,6026,6027],{},[491,6028,6029],{},"@md:",[474,6031,6032],{},"≥ 28rem (448px)",[456,6034,6035,6040],{},[474,6036,6037],{},[491,6038,6039],{},"@lg:",[474,6041,6042],{},"≥ 32rem (512px)",[456,6044,6045,6050],{},[474,6046,6047],{},[491,6048,6049],{},"@xl:",[474,6051,6052],{},"≥ 36rem (576px)",[456,6054,6055,6060],{},[474,6056,6057],{},[491,6058,6059],{},"@2xl:",[474,6061,6062],{},"≥ 42rem (672px)",[456,6064,6065,6070],{},[474,6066,6067],{},[491,6068,6069],{},"@3xl:",[474,6071,6072],{},"≥ 48rem (768px)",[456,6074,6075,6080],{},[474,6076,6077],{},[491,6078,6079],{},"@4xl:",[474,6081,6082],{},"≥ 56rem (896px)",[456,6084,6085,6090],{},[474,6086,6087],{},[491,6088,6089],{},"@5xl:",[474,6091,6092],{},"≥ 64rem (1024px)",[456,6094,6095,6100],{},[474,6096,6097],{},[491,6098,6099],{},"@6xl:",[474,6101,6102],{},"≥ 72rem (1152px)",[456,6104,6105,6110],{},[474,6106,6107],{},[491,6108,6109],{},"@7xl:",[474,6111,6112],{},"≥ 80rem (1280px)",[553,6114,6115,6116,6118,6119,6121,6122,6124,6125,3003],{"color":555,"icon":1035},"Phân biệt rõ: ",[491,6117,506],{}," (media query — viewport ≥ 768px) vs ",[491,6120,6029],{}," (container query — container ≥ 448px). Một bên là chữ ",[491,6123,506],{},", một bên có dấu ",[491,6126,6127],{},"@",[445,6129,6131],{"id":6130},"_23-container-size-queries-v43-new","2.3. Container Size Queries (v4.3 NEW)",[432,6133,6134,6135,6138,6139,6142,6143,6146,6147,6150],{},"V4.3 giới thiệu ",[491,6136,6137],{},"@container-size"," cho phép container queries dựa trên ",[436,6140,6141],{},"cả width và height",", kèm theo units ",[491,6144,6145],{},"cqb"," (container query block = height) và ",[491,6148,6149],{},"cqh"," (container query height):",[571,6152,6154],{"className":573,"code":6153,"language":575,"meta":576,"style":576},"\u003Cdiv class=\"@container @container-size\">\n  \u003Cdiv class=\"@sm:flex-col @lg:flex-row\">\n    \u003C!-- Layout thay đổi dựa trên kích thước container -->\n  \u003C\u002Fdiv>\n  \u003C!-- Dùng đơn vị container query -->\n  \u003Cp class=\"text-[cqb]\">Text size dựa trên height của container\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[491,6155,6156,6175,6194,6199,6207,6212,6240],{"__ignoreMap":576},[580,6157,6158,6160,6162,6164,6166,6168,6171,6173],{"class":582,"line":583},[580,6159,594],{"class":593},[580,6161,598],{"class":597},[580,6163,602],{"class":601},[580,6165,605],{"class":593},[580,6167,608],{"class":593},[580,6169,6170],{"class":611},"@container @container-size",[580,6172,608],{"class":593},[580,6174,617],{"class":593},[580,6176,6177,6179,6181,6183,6185,6187,6190,6192],{"class":582,"line":590},[580,6178,623],{"class":593},[580,6180,598],{"class":597},[580,6182,602],{"class":601},[580,6184,605],{"class":593},[580,6186,608],{"class":593},[580,6188,6189],{"class":611},"@sm:flex-col @lg:flex-row",[580,6191,608],{"class":593},[580,6193,617],{"class":593},[580,6195,6196],{"class":582,"line":620},[580,6197,6198],{"class":586},"    \u003C!-- Layout thay đổi dựa trên kích thước container -->\n",[580,6200,6201,6203,6205],{"class":582,"line":653},[580,6202,1215],{"class":593},[580,6204,598],{"class":597},[580,6206,617],{"class":593},[580,6208,6209],{"class":582,"line":681},[580,6210,6211],{"class":586},"  \u003C!-- Dùng đơn vị container query -->\n",[580,6213,6214,6216,6218,6220,6222,6224,6227,6229,6231,6234,6236,6238],{"class":582,"line":709},[580,6215,623],{"class":593},[580,6217,432],{"class":597},[580,6219,602],{"class":601},[580,6221,605],{"class":593},[580,6223,608],{"class":593},[580,6225,6226],{"class":611},"text-[cqb]",[580,6228,608],{"class":593},[580,6230,639],{"class":593},[580,6232,6233],{"class":642},"Text size dựa trên height của container",[580,6235,646],{"class":593},[580,6237,432],{"class":597},[580,6239,617],{"class":593},[580,6241,6242,6244,6246],{"class":582,"line":737},[580,6243,646],{"class":593},[580,6245,598],{"class":597},[580,6247,617],{"class":593},[445,6249,6251],{"id":6250},"_24-bài-tập-3-card-thích-nghi-theo-container-width","2.4. BÀI TẬP 3 — Card thích nghi theo Container Width",[432,6253,6254,6256],{},[436,6255,1491],{}," Tạo một card component dùng container queries:",[804,6258,6259,6262,6265],{},[807,6260,6261],{},"Khi container \u003C 400px: layout dọc (image trên, text dưới), chữ nhỏ.",[807,6263,6264],{},"Khi container 400–600px: layout ngang (image trái, text phải), chữ vừa.",[807,6266,6267],{},"Khi container > 600px: layout ngang, image to hơn, text lớn hơn.",[432,6269,6270],{},[436,6271,1508],{},[571,6273,6275],{"className":573,"code":6274,"language":575,"meta":576,"style":576},"\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>Container Queries Card - Tailwind CSS v4\u003C\u002Ftitle>\n  \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tailwindcss\u002Fbrowser@4\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody class=\"min-h-screen bg-gray-100 p-4 md:p-8\">\n\n  \u003Cdiv class=\"max-w-6xl mx-auto\">\n    \u003Ch1 class=\"text-2xl md:text-3xl font-bold text-gray-900 mb-8\">\n      Container Queries Demo — Resize các container bên dưới\n    \u003C\u002Fh1>\n\n    \u003Cp class=\"text-gray-600 mb-8\">\n      Cùng một card component, nhưng layout tự thay đổi theo kích thước CONTAINER CHA (không phải viewport).\n      Kéo góc phải dưới của mỗi container để resize.\n    \u003C\u002Fp>\n\n    \u003C!-- Container nhỏ (~320px) -->\n    \u003Cdiv class=\"mb-8\">\n      \u003Ch2 class=\"text-sm font-medium text-gray-500 mb-2\">Container ~320px (sidebar)\u003C\u002Fh2>\n      \u003Cdiv class=\"@container border-2 border-dashed border-gray-300 rounded-lg p-4 resize-x overflow-auto min-w-[280px] max-w-[360px]\" style=\"width: 320px\">\n        \u003C!-- CARD COMPONENT -->\n        \u003Carticle class=\"bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden\n                        grid @md:grid-cols-[120px_1fr] @lg:grid-cols-[200px_1fr]\">\n          \u003C!-- Image -->\n          \u003Cdiv class=\"bg-gradient-to-br from-blue-400 to-purple-500 \n                      aspect-video @md:aspect-auto @md:h-full\n                      @lg:aspect-auto @lg:h-full\n                      flex items-center justify-center\">\n            \u003Csvg class=\"w-12 h-12 @lg:w-16 @lg:h-16 text-white\u002F80\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\u002F>\n            \u003C\u002Fsvg>\n          \u003C\u002Fdiv>\n          \u003C!-- Content -->\n          \u003Cdiv class=\"p-3 @lg:p-5\">\n            \u003Cspan class=\"text-xs @lg:text-sm font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full\">\n              Technology\n            \u003C\u002Fspan>\n            \u003Ch3 class=\"text-sm @lg:text-lg font-semibold text-gray-900 mt-2 @lg:mt-3 leading-snug\">\n              Building Responsive Components with Container Queries\n            \u003C\u002Fh3>\n            \u003Cp class=\"text-xs @lg:text-sm text-gray-600 mt-1 @lg:mt-2 line-clamp-2 @lg:line-clamp-2\">\n              Container queries cho phép component tự thích nghi dựa trên không gian thực tế nó có, không phụ thuộc vào viewport.\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Farticle>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Container vừa (~500px) -->\n    \u003Cdiv class=\"mb-8\">\n      \u003Ch2 class=\"text-sm font-medium text-gray-500 mb-2\">Container ~500px (main content 1 cột)\u003C\u002Fh2>\n      \u003Cdiv class=\"@container border-2 border-dashed border-gray-300 rounded-lg p-4 resize-x overflow-auto min-w-[400px] max-w-[550px]\" style=\"width: 500px\">\n        \u003C!-- CARD COMPONENT — IDENTICAL to above! -->\n        \u003Carticle class=\"bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden\n                        grid @md:grid-cols-[120px_1fr] @lg:grid-cols-[200px_1fr]\">\n          \u003Cdiv class=\"bg-gradient-to-br from-blue-400 to-purple-500 \n                      aspect-video @md:aspect-auto @md:h-full\n                      @lg:aspect-auto @lg:h-full\n                      flex items-center justify-center\">\n            \u003Csvg class=\"w-12 h-12 @lg:w-16 @lg:h-16 text-white\u002F80\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\u002F>\n            \u003C\u002Fsvg>\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"p-3 @lg:p-5\">\n            \u003Cspan class=\"text-xs @lg:text-sm font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full\">\n              Technology\n            \u003C\u002Fspan>\n            \u003Ch3 class=\"text-sm @lg:text-lg font-semibold text-gray-900 mt-2 @lg:mt-3 leading-snug\">\n              Building Responsive Components with Container Queries\n            \u003C\u002Fh3>\n            \u003Cp class=\"text-xs @lg:text-sm text-gray-600 mt-1 @lg:mt-2 line-clamp-2\">\n              Container queries cho phép component tự thích nghi dựa trên không gian thực tế nó có, không phụ thuộc vào viewport.\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Farticle>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Container lớn (~750px) -->\n    \u003Cdiv class=\"mb-8\">\n      \u003Ch2 class=\"text-sm font-medium text-gray-500 mb-2\">Container ~750px (full width)\u003C\u002Fh2>\n      \u003Cdiv class=\"@container border-2 border-dashed border-gray-300 rounded-lg p-4 resize-x overflow-auto min-w-[600px] max-w-[800px]\" style=\"width: 750px\">\n        \u003C!-- CARD COMPONENT — IDENTICAL to above! -->\n        \u003Carticle class=\"bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden\n                        grid @md:grid-cols-[120px_1fr] @lg:grid-cols-[200px_1fr]\">\n          \u003Cdiv class=\"bg-gradient-to-br from-blue-400 to-purple-500 \n                      aspect-video @md:aspect-auto @md:h-full\n                      @lg:aspect-auto @lg:h-full\n                      flex items-center justify-center\">\n            \u003Csvg class=\"w-12 h-12 @lg:w-16 @lg:h-16 text-white\u002F80\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\u002F>\n            \u003C\u002Fsvg>\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"p-3 @lg:p-5\">\n            \u003Cspan class=\"text-xs @lg:text-sm font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full\">\n              Technology\n            \u003C\u002Fspan>\n            \u003Ch3 class=\"text-sm @lg:text-lg font-semibold text-gray-900 mt-2 @lg:mt-3 leading-snug\">\n              Building Responsive Components with Container Queries\n            \u003C\u002Fh3>\n            \u003Cp class=\"text-xs @lg:text-sm text-gray-600 mt-1 @lg:mt-2 line-clamp-2\">\n              Container queries cho phép component tự thích nghi dựa trên không gian thực tế nó có, không phụ thuộc vào viewport. Điều này giúp tạo ra component thực sự reusable trong mọi ngữ cảnh layout.\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Farticle>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[491,6276,6277,6287,6305,6313,6331,6359,6376,6398,6406,6425,6429,6448,6467,6472,6480,6484,6503,6508,6513,6521,6525,6530,6549,6577,6608,6613,6629,6638,6643,6658,6663,6668,6677,6726,6777,6786,6794,6799,6818,6837,6842,6850,6869,6874,6882,6901,6906,6914,6922,6930,6938,6946,6950,6955,6973,7000,7030,7035,7049,7057,7071,7075,7079,7087,7135,7183,7191,7199,7217,7235,7239,7247,7265,7269,7277,7296,7300,7308,7316,7324,7332,7340,7344,7349,7367,7394,7424,7428,7442,7450,7464,7468,7472,7480,7528,7576,7584,7592,7610,7628,7632,7640,7658,7662,7670,7688,7693,7701,7709,7717,7725,7733,7737,7745,7749,7757],{"__ignoreMap":576},[580,6278,6279,6281,6283,6285],{"class":582,"line":583},[580,6280,1518],{"class":593},[580,6282,1521],{"class":597},[580,6284,1524],{"class":601},[580,6286,617],{"class":593},[580,6288,6289,6291,6293,6295,6297,6299,6301,6303],{"class":582,"line":590},[580,6290,594],{"class":593},[580,6292,575],{"class":597},[580,6294,1535],{"class":601},[580,6296,605],{"class":593},[580,6298,608],{"class":593},[580,6300,1542],{"class":611},[580,6302,608],{"class":593},[580,6304,617],{"class":593},[580,6306,6307,6309,6311],{"class":582,"line":620},[580,6308,594],{"class":593},[580,6310,1564],{"class":597},[580,6312,617],{"class":593},[580,6314,6315,6317,6319,6321,6323,6325,6327,6329],{"class":582,"line":653},[580,6316,623],{"class":593},[580,6318,1573],{"class":597},[580,6320,1576],{"class":601},[580,6322,605],{"class":593},[580,6324,608],{"class":593},[580,6326,1583],{"class":611},[580,6328,608],{"class":593},[580,6330,617],{"class":593},[580,6332,6333,6335,6337,6339,6341,6343,6345,6347,6349,6351,6353,6355,6357],{"class":582,"line":681},[580,6334,623],{"class":593},[580,6336,1573],{"class":597},[580,6338,1596],{"class":601},[580,6340,605],{"class":593},[580,6342,608],{"class":593},[580,6344,1603],{"class":611},[580,6346,608],{"class":593},[580,6348,1608],{"class":601},[580,6350,605],{"class":593},[580,6352,608],{"class":593},[580,6354,1615],{"class":611},[580,6356,608],{"class":593},[580,6358,617],{"class":593},[580,6360,6361,6363,6365,6367,6370,6372,6374],{"class":582,"line":709},[580,6362,623],{"class":593},[580,6364,1626],{"class":597},[580,6366,639],{"class":593},[580,6368,6369],{"class":642},"Container Queries Card - Tailwind CSS v4",[580,6371,646],{"class":593},[580,6373,1626],{"class":597},[580,6375,617],{"class":593},[580,6377,6378,6380,6382,6384,6386,6388,6390,6392,6394,6396],{"class":582,"line":737},[580,6379,623],{"class":593},[580,6381,1644],{"class":597},[580,6383,1647],{"class":601},[580,6385,605],{"class":593},[580,6387,608],{"class":593},[580,6389,1654],{"class":611},[580,6391,608],{"class":593},[580,6393,1282],{"class":593},[580,6395,1644],{"class":597},[580,6397,617],{"class":593},[580,6399,6400,6402,6404],{"class":582,"line":765},[580,6401,646],{"class":593},[580,6403,1564],{"class":597},[580,6405,617],{"class":593},[580,6407,6408,6410,6412,6414,6416,6418,6421,6423],{"class":582,"line":793},[580,6409,594],{"class":593},[580,6411,1677],{"class":597},[580,6413,602],{"class":601},[580,6415,605],{"class":593},[580,6417,608],{"class":593},[580,6419,6420],{"class":611},"min-h-screen bg-gray-100 p-4 md:p-8",[580,6422,608],{"class":593},[580,6424,617],{"class":593},[580,6426,6427],{"class":582,"line":896},[580,6428,963],{"emptyLinePlaceholder":962},[580,6430,6431,6433,6435,6437,6439,6441,6444,6446],{"class":582,"line":1029},[580,6432,623],{"class":593},[580,6434,598],{"class":597},[580,6436,602],{"class":601},[580,6438,605],{"class":593},[580,6440,608],{"class":593},[580,6442,6443],{"class":611},"max-w-6xl mx-auto",[580,6445,608],{"class":593},[580,6447,617],{"class":593},[580,6449,6450,6452,6454,6456,6458,6460,6463,6465],{"class":582,"line":1212},[580,6451,1195],{"class":593},[580,6453,1395],{"class":597},[580,6455,602],{"class":601},[580,6457,605],{"class":593},[580,6459,608],{"class":593},[580,6461,6462],{"class":611},"text-2xl md:text-3xl font-bold text-gray-900 mb-8",[580,6464,608],{"class":593},[580,6466,617],{"class":593},[580,6468,6469],{"class":582,"line":1222},[580,6470,6471],{"class":642},"      Container Queries Demo — Resize các container bên dưới\n",[580,6473,6474,6476,6478],{"class":582,"line":1228},[580,6475,2719],{"class":593},[580,6477,1395],{"class":597},[580,6479,617],{"class":593},[580,6481,6482],{"class":582,"line":1248},[580,6483,963],{"emptyLinePlaceholder":962},[580,6485,6486,6488,6490,6492,6494,6496,6499,6501],{"class":582,"line":1289},[580,6487,1195],{"class":593},[580,6489,432],{"class":597},[580,6491,602],{"class":601},[580,6493,605],{"class":593},[580,6495,608],{"class":593},[580,6497,6498],{"class":611},"text-gray-600 mb-8",[580,6500,608],{"class":593},[580,6502,617],{"class":593},[580,6504,6505],{"class":582,"line":1325},[580,6506,6507],{"class":642},"      Cùng một card component, nhưng layout tự thay đổi theo kích thước CONTAINER CHA (không phải viewport).\n",[580,6509,6510],{"class":582,"line":1361},[580,6511,6512],{"class":642},"      Kéo góc phải dưới của mỗi container để resize.\n",[580,6514,6515,6517,6519],{"class":582,"line":1370},[580,6516,2719],{"class":593},[580,6518,432],{"class":597},[580,6520,617],{"class":593},[580,6522,6523],{"class":582,"line":1379},[580,6524,963],{"emptyLinePlaceholder":962},[580,6526,6527],{"class":582,"line":1384},[580,6528,6529],{"class":586},"    \u003C!-- Container nhỏ (~320px) -->\n",[580,6531,6532,6534,6536,6538,6540,6542,6545,6547],{"class":582,"line":1390},[580,6533,1195],{"class":593},[580,6535,598],{"class":597},[580,6537,602],{"class":601},[580,6539,605],{"class":593},[580,6541,608],{"class":593},[580,6543,6544],{"class":611},"mb-8",[580,6546,608],{"class":593},[580,6548,617],{"class":593},[580,6550,6551,6553,6555,6557,6559,6561,6564,6566,6568,6571,6573,6575],{"class":582,"line":1411},[580,6552,1743],{"class":593},[580,6554,427],{"class":597},[580,6556,602],{"class":601},[580,6558,605],{"class":593},[580,6560,608],{"class":593},[580,6562,6563],{"class":611},"text-sm font-medium text-gray-500 mb-2",[580,6565,608],{"class":593},[580,6567,639],{"class":593},[580,6569,6570],{"class":642},"Container ~320px (sidebar)",[580,6572,646],{"class":593},[580,6574,427],{"class":597},[580,6576,617],{"class":593},[580,6578,6579,6581,6583,6585,6587,6589,6592,6594,6597,6599,6601,6604,6606],{"class":582,"line":1417},[580,6580,1743],{"class":593},[580,6582,598],{"class":597},[580,6584,602],{"class":601},[580,6586,605],{"class":593},[580,6588,608],{"class":593},[580,6590,6591],{"class":611},"@container border-2 border-dashed border-gray-300 rounded-lg p-4 resize-x overflow-auto min-w-[280px] max-w-[360px]",[580,6593,608],{"class":593},[580,6595,6596],{"class":601}," style",[580,6598,605],{"class":593},[580,6600,608],{"class":593},[580,6602,6603],{"class":611},"width: 320px",[580,6605,608],{"class":593},[580,6607,617],{"class":593},[580,6609,6610],{"class":582,"line":1426},[580,6611,6612],{"class":586},"        \u003C!-- CARD COMPONENT -->\n",[580,6614,6615,6617,6620,6622,6624,6626],{"class":582,"line":1431},[580,6616,1773],{"class":593},[580,6618,6619],{"class":597},"article",[580,6621,602],{"class":601},[580,6623,605],{"class":593},[580,6625,608],{"class":593},[580,6627,6628],{"class":611},"bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden\n",[580,6630,6631,6634,6636],{"class":582,"line":1437},[580,6632,6633],{"class":611},"                        grid @md:grid-cols-[120px_1fr] @lg:grid-cols-[200px_1fr]",[580,6635,608],{"class":593},[580,6637,617],{"class":593},[580,6639,6640],{"class":582,"line":1458},[580,6641,6642],{"class":586},"          \u003C!-- Image -->\n",[580,6644,6645,6647,6649,6651,6653,6655],{"class":582,"line":1476},[580,6646,1793],{"class":593},[580,6648,598],{"class":597},[580,6650,602],{"class":601},[580,6652,605],{"class":593},[580,6654,608],{"class":593},[580,6656,6657],{"class":611},"bg-gradient-to-br from-blue-400 to-purple-500 \n",[580,6659,6660],{"class":582,"line":2078},[580,6661,6662],{"class":611},"                      aspect-video @md:aspect-auto @md:h-full\n",[580,6664,6665],{"class":582,"line":2084},[580,6666,6667],{"class":611},"                      @lg:aspect-auto @lg:h-full\n",[580,6669,6670,6673,6675],{"class":582,"line":2093},[580,6671,6672],{"class":611},"                      flex items-center justify-center",[580,6674,608],{"class":593},[580,6676,617],{"class":593},[580,6678,6679,6681,6683,6685,6687,6689,6692,6694,6696,6698,6700,6702,6704,6706,6708,6710,6712,6714,6716,6718,6720,6722,6724],{"class":582,"line":2102},[580,6680,2233],{"class":593},[580,6682,1198],{"class":597},[580,6684,602],{"class":601},[580,6686,605],{"class":593},[580,6688,608],{"class":593},[580,6690,6691],{"class":611},"w-12 h-12 @lg:w-16 @lg:h-16 text-white\u002F80",[580,6693,608],{"class":593},[580,6695,2192],{"class":601},[580,6697,605],{"class":593},[580,6699,608],{"class":593},[580,6701,2199],{"class":611},[580,6703,608],{"class":593},[580,6705,2204],{"class":601},[580,6707,605],{"class":593},[580,6709,608],{"class":593},[580,6711,2211],{"class":611},[580,6713,608],{"class":593},[580,6715,2216],{"class":601},[580,6717,605],{"class":593},[580,6719,608],{"class":593},[580,6721,2223],{"class":611},[580,6723,608],{"class":593},[580,6725,617],{"class":593},[580,6727,6728,6731,6733,6735,6737,6739,6741,6743,6745,6747,6749,6751,6753,6755,6757,6759,6762,6764,6766,6768,6770,6773,6775],{"class":582,"line":2107},[580,6729,6730],{"class":593},"              \u003C",[580,6732,2236],{"class":597},[580,6734,2239],{"class":601},[580,6736,605],{"class":593},[580,6738,608],{"class":593},[580,6740,2246],{"class":611},[580,6742,608],{"class":593},[580,6744,2251],{"class":601},[580,6746,605],{"class":593},[580,6748,608],{"class":593},[580,6750,2246],{"class":611},[580,6752,608],{"class":593},[580,6754,2262],{"class":601},[580,6756,605],{"class":593},[580,6758,608],{"class":593},[580,6760,6761],{"class":611},"1.5",[580,6763,608],{"class":593},[580,6765,2274],{"class":601},[580,6767,605],{"class":593},[580,6769,608],{"class":593},[580,6771,6772],{"class":611},"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z",[580,6774,608],{"class":593},[580,6776,2286],{"class":593},[580,6778,6779,6782,6784],{"class":582,"line":2113},[580,6780,6781],{"class":593},"            \u003C\u002F",[580,6783,1198],{"class":597},[580,6785,617],{"class":593},[580,6787,6788,6790,6792],{"class":582,"line":2157},[580,6789,1854],{"class":593},[580,6791,598],{"class":597},[580,6793,617],{"class":593},[580,6795,6796],{"class":582,"line":2163},[580,6797,6798],{"class":586},"          \u003C!-- Content -->\n",[580,6800,6801,6803,6805,6807,6809,6811,6814,6816],{"class":582,"line":2230},[580,6802,1793],{"class":593},[580,6804,598],{"class":597},[580,6806,602],{"class":601},[580,6808,605],{"class":593},[580,6810,608],{"class":593},[580,6812,6813],{"class":611},"p-3 @lg:p-5",[580,6815,608],{"class":593},[580,6817,617],{"class":593},[580,6819,6820,6822,6824,6826,6828,6830,6833,6835],{"class":582,"line":2289},[580,6821,2233],{"class":593},[580,6823,580],{"class":597},[580,6825,602],{"class":601},[580,6827,605],{"class":593},[580,6829,608],{"class":593},[580,6831,6832],{"class":611},"text-xs @lg:text-sm font-medium text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full",[580,6834,608],{"class":593},[580,6836,617],{"class":593},[580,6838,6839],{"class":582,"line":2298},[580,6840,6841],{"class":642},"              Technology\n",[580,6843,6844,6846,6848],{"class":582,"line":2304},[580,6845,6781],{"class":593},[580,6847,580],{"class":597},[580,6849,617],{"class":593},[580,6851,6852,6854,6856,6858,6860,6862,6865,6867],{"class":582,"line":2365},[580,6853,2233],{"class":593},[580,6855,445],{"class":597},[580,6857,602],{"class":601},[580,6859,605],{"class":593},[580,6861,608],{"class":593},[580,6863,6864],{"class":611},"text-sm @lg:text-lg font-semibold text-gray-900 mt-2 @lg:mt-3 leading-snug",[580,6866,608],{"class":593},[580,6868,617],{"class":593},[580,6870,6871],{"class":582,"line":2415},[580,6872,6873],{"class":642},"              Building Responsive Components with Container Queries\n",[580,6875,6876,6878,6880],{"class":582,"line":2424},[580,6877,6781],{"class":593},[580,6879,445],{"class":597},[580,6881,617],{"class":593},[580,6883,6884,6886,6888,6890,6892,6894,6897,6899],{"class":582,"line":2433},[580,6885,2233],{"class":593},[580,6887,432],{"class":597},[580,6889,602],{"class":601},[580,6891,605],{"class":593},[580,6893,608],{"class":593},[580,6895,6896],{"class":611},"text-xs @lg:text-sm text-gray-600 mt-1 @lg:mt-2 line-clamp-2 @lg:line-clamp-2",[580,6898,608],{"class":593},[580,6900,617],{"class":593},[580,6902,6903],{"class":582,"line":2443},[580,6904,6905],{"class":642},"              Container queries cho phép component tự thích nghi dựa trên không gian thực tế nó có, không phụ thuộc vào viewport.\n",[580,6907,6908,6910,6912],{"class":582,"line":2448},[580,6909,6781],{"class":593},[580,6911,432],{"class":597},[580,6913,617],{"class":593},[580,6915,6916,6918,6920],{"class":582,"line":2454},[580,6917,1854],{"class":593},[580,6919,598],{"class":597},[580,6921,617],{"class":593},[580,6923,6924,6926,6928],{"class":582,"line":2485},[580,6925,1863],{"class":593},[580,6927,6619],{"class":597},[580,6929,617],{"class":593},[580,6931,6932,6934,6936],{"class":582,"line":2505},[580,6933,2436],{"class":593},[580,6935,598],{"class":597},[580,6937,617],{"class":593},[580,6939,6940,6942,6944],{"class":582,"line":2543},[580,6941,2719],{"class":593},[580,6943,598],{"class":597},[580,6945,617],{"class":593},[580,6947,6948],{"class":582,"line":2580},[580,6949,963],{"emptyLinePlaceholder":962},[580,6951,6952],{"class":582,"line":2617},[580,6953,6954],{"class":586},"    \u003C!-- Container vừa (~500px) -->\n",[580,6956,6957,6959,6961,6963,6965,6967,6969,6971],{"class":582,"line":2654},[580,6958,1195],{"class":593},[580,6960,598],{"class":597},[580,6962,602],{"class":601},[580,6964,605],{"class":593},[580,6966,608],{"class":593},[580,6968,6544],{"class":611},[580,6970,608],{"class":593},[580,6972,617],{"class":593},[580,6974,6975,6977,6979,6981,6983,6985,6987,6989,6991,6994,6996,6998],{"class":582,"line":2684},[580,6976,1743],{"class":593},[580,6978,427],{"class":597},[580,6980,602],{"class":601},[580,6982,605],{"class":593},[580,6984,608],{"class":593},[580,6986,6563],{"class":611},[580,6988,608],{"class":593},[580,6990,639],{"class":593},[580,6992,6993],{"class":642},"Container ~500px (main content 1 cột)",[580,6995,646],{"class":593},[580,6997,427],{"class":597},[580,6999,617],{"class":593},[580,7001,7002,7004,7006,7008,7010,7012,7015,7017,7019,7021,7023,7026,7028],{"class":582,"line":2689},[580,7003,1743],{"class":593},[580,7005,598],{"class":597},[580,7007,602],{"class":601},[580,7009,605],{"class":593},[580,7011,608],{"class":593},[580,7013,7014],{"class":611},"@container border-2 border-dashed border-gray-300 rounded-lg p-4 resize-x overflow-auto min-w-[400px] max-w-[550px]",[580,7016,608],{"class":593},[580,7018,6596],{"class":601},[580,7020,605],{"class":593},[580,7022,608],{"class":593},[580,7024,7025],{"class":611},"width: 500px",[580,7027,608],{"class":593},[580,7029,617],{"class":593},[580,7031,7032],{"class":582,"line":2698},[580,7033,7034],{"class":586},"        \u003C!-- CARD COMPONENT — IDENTICAL to above! -->\n",[580,7036,7037,7039,7041,7043,7045,7047],{"class":582,"line":2707},[580,7038,1773],{"class":593},[580,7040,6619],{"class":597},[580,7042,602],{"class":601},[580,7044,605],{"class":593},[580,7046,608],{"class":593},[580,7048,6628],{"class":611},[580,7050,7051,7053,7055],{"class":582,"line":2716},[580,7052,6633],{"class":611},[580,7054,608],{"class":593},[580,7056,617],{"class":593},[580,7058,7059,7061,7063,7065,7067,7069],{"class":582,"line":2726},[580,7060,1793],{"class":593},[580,7062,598],{"class":597},[580,7064,602],{"class":601},[580,7066,605],{"class":593},[580,7068,608],{"class":593},[580,7070,6657],{"class":611},[580,7072,7073],{"class":582,"line":2735},[580,7074,6662],{"class":611},[580,7076,7077],{"class":582,"line":2740},[580,7078,6667],{"class":611},[580,7080,7081,7083,7085],{"class":582,"line":2746},[580,7082,6672],{"class":611},[580,7084,608],{"class":593},[580,7086,617],{"class":593},[580,7088,7089,7091,7093,7095,7097,7099,7101,7103,7105,7107,7109,7111,7113,7115,7117,7119,7121,7123,7125,7127,7129,7131,7133],{"class":582,"line":2770},[580,7090,2233],{"class":593},[580,7092,1198],{"class":597},[580,7094,602],{"class":601},[580,7096,605],{"class":593},[580,7098,608],{"class":593},[580,7100,6691],{"class":611},[580,7102,608],{"class":593},[580,7104,2192],{"class":601},[580,7106,605],{"class":593},[580,7108,608],{"class":593},[580,7110,2199],{"class":611},[580,7112,608],{"class":593},[580,7114,2204],{"class":601},[580,7116,605],{"class":593},[580,7118,608],{"class":593},[580,7120,2211],{"class":611},[580,7122,608],{"class":593},[580,7124,2216],{"class":601},[580,7126,605],{"class":593},[580,7128,608],{"class":593},[580,7130,2223],{"class":611},[580,7132,608],{"class":593},[580,7134,617],{"class":593},[580,7136,7137,7139,7141,7143,7145,7147,7149,7151,7153,7155,7157,7159,7161,7163,7165,7167,7169,7171,7173,7175,7177,7179,7181],{"class":582,"line":2775},[580,7138,6730],{"class":593},[580,7140,2236],{"class":597},[580,7142,2239],{"class":601},[580,7144,605],{"class":593},[580,7146,608],{"class":593},[580,7148,2246],{"class":611},[580,7150,608],{"class":593},[580,7152,2251],{"class":601},[580,7154,605],{"class":593},[580,7156,608],{"class":593},[580,7158,2246],{"class":611},[580,7160,608],{"class":593},[580,7162,2262],{"class":601},[580,7164,605],{"class":593},[580,7166,608],{"class":593},[580,7168,6761],{"class":611},[580,7170,608],{"class":593},[580,7172,2274],{"class":601},[580,7174,605],{"class":593},[580,7176,608],{"class":593},[580,7178,6772],{"class":611},[580,7180,608],{"class":593},[580,7182,2286],{"class":593},[580,7184,7185,7187,7189],{"class":582,"line":2781},[580,7186,6781],{"class":593},[580,7188,1198],{"class":597},[580,7190,617],{"class":593},[580,7192,7193,7195,7197],{"class":582,"line":2801},[580,7194,1854],{"class":593},[580,7196,598],{"class":597},[580,7198,617],{"class":593},[580,7200,7201,7203,7205,7207,7209,7211,7213,7215],{"class":582,"line":2832},[580,7202,1793],{"class":593},[580,7204,598],{"class":597},[580,7206,602],{"class":601},[580,7208,605],{"class":593},[580,7210,608],{"class":593},[580,7212,6813],{"class":611},[580,7214,608],{"class":593},[580,7216,617],{"class":593},[580,7218,7219,7221,7223,7225,7227,7229,7231,7233],{"class":582,"line":2861},[580,7220,2233],{"class":593},[580,7222,580],{"class":597},[580,7224,602],{"class":601},[580,7226,605],{"class":593},[580,7228,608],{"class":593},[580,7230,6832],{"class":611},[580,7232,608],{"class":593},[580,7234,617],{"class":593},[580,7236,7237],{"class":582,"line":2890},[580,7238,6841],{"class":642},[580,7240,7241,7243,7245],{"class":582,"line":2899},[580,7242,6781],{"class":593},[580,7244,580],{"class":597},[580,7246,617],{"class":593},[580,7248,7249,7251,7253,7255,7257,7259,7261,7263],{"class":582,"line":2929},[580,7250,2233],{"class":593},[580,7252,445],{"class":597},[580,7254,602],{"class":601},[580,7256,605],{"class":593},[580,7258,608],{"class":593},[580,7260,6864],{"class":611},[580,7262,608],{"class":593},[580,7264,617],{"class":593},[580,7266,7267],{"class":582,"line":2957},[580,7268,6873],{"class":642},[580,7270,7271,7273,7275],{"class":582,"line":2966},[580,7272,6781],{"class":593},[580,7274,445],{"class":597},[580,7276,617],{"class":593},[580,7278,7279,7281,7283,7285,7287,7289,7292,7294],{"class":582,"line":2975},[580,7280,2233],{"class":593},[580,7282,432],{"class":597},[580,7284,602],{"class":601},[580,7286,605],{"class":593},[580,7288,608],{"class":593},[580,7290,7291],{"class":611},"text-xs @lg:text-sm text-gray-600 mt-1 @lg:mt-2 line-clamp-2",[580,7293,608],{"class":593},[580,7295,617],{"class":593},[580,7297,7298],{"class":582,"line":2980},[580,7299,6905],{"class":642},[580,7301,7302,7304,7306],{"class":582,"line":2989},[580,7303,6781],{"class":593},[580,7305,432],{"class":597},[580,7307,617],{"class":593},[580,7309,7310,7312,7314],{"class":582,"line":3025},[580,7311,1854],{"class":593},[580,7313,598],{"class":597},[580,7315,617],{"class":593},[580,7317,7318,7320,7322],{"class":582,"line":3053},[580,7319,1863],{"class":593},[580,7321,6619],{"class":597},[580,7323,617],{"class":593},[580,7325,7326,7328,7330],{"class":582,"line":3081},[580,7327,2436],{"class":593},[580,7329,598],{"class":597},[580,7331,617],{"class":593},[580,7333,7334,7336,7338],{"class":582,"line":3109},[580,7335,2719],{"class":593},[580,7337,598],{"class":597},[580,7339,617],{"class":593},[580,7341,7342],{"class":582,"line":3114},[580,7343,963],{"emptyLinePlaceholder":962},[580,7345,7346],{"class":582,"line":3145},[580,7347,7348],{"class":586},"    \u003C!-- Container lớn (~750px) -->\n",[580,7350,7351,7353,7355,7357,7359,7361,7363,7365],{"class":582,"line":3174},[580,7352,1195],{"class":593},[580,7354,598],{"class":597},[580,7356,602],{"class":601},[580,7358,605],{"class":593},[580,7360,608],{"class":593},[580,7362,6544],{"class":611},[580,7364,608],{"class":593},[580,7366,617],{"class":593},[580,7368,7369,7371,7373,7375,7377,7379,7381,7383,7385,7388,7390,7392],{"class":582,"line":3200},[580,7370,1743],{"class":593},[580,7372,427],{"class":597},[580,7374,602],{"class":601},[580,7376,605],{"class":593},[580,7378,608],{"class":593},[580,7380,6563],{"class":611},[580,7382,608],{"class":593},[580,7384,639],{"class":593},[580,7386,7387],{"class":642},"Container ~750px (full width)",[580,7389,646],{"class":593},[580,7391,427],{"class":597},[580,7393,617],{"class":593},[580,7395,7396,7398,7400,7402,7404,7406,7409,7411,7413,7415,7417,7420,7422],{"class":582,"line":3226},[580,7397,1743],{"class":593},[580,7399,598],{"class":597},[580,7401,602],{"class":601},[580,7403,605],{"class":593},[580,7405,608],{"class":593},[580,7407,7408],{"class":611},"@container border-2 border-dashed border-gray-300 rounded-lg p-4 resize-x overflow-auto min-w-[600px] max-w-[800px]",[580,7410,608],{"class":593},[580,7412,6596],{"class":601},[580,7414,605],{"class":593},[580,7416,608],{"class":593},[580,7418,7419],{"class":611},"width: 750px",[580,7421,608],{"class":593},[580,7423,617],{"class":593},[580,7425,7426],{"class":582,"line":3236},[580,7427,7034],{"class":586},[580,7429,7430,7432,7434,7436,7438,7440],{"class":582,"line":3241},[580,7431,1773],{"class":593},[580,7433,6619],{"class":597},[580,7435,602],{"class":601},[580,7437,605],{"class":593},[580,7439,608],{"class":593},[580,7441,6628],{"class":611},[580,7443,7444,7446,7448],{"class":582,"line":3247},[580,7445,6633],{"class":611},[580,7447,608],{"class":593},[580,7449,617],{"class":593},[580,7451,7452,7454,7456,7458,7460,7462],{"class":582,"line":3283},[580,7453,1793],{"class":593},[580,7455,598],{"class":597},[580,7457,602],{"class":601},[580,7459,605],{"class":593},[580,7461,608],{"class":593},[580,7463,6657],{"class":611},[580,7465,7466],{"class":582,"line":3309},[580,7467,6662],{"class":611},[580,7469,7470],{"class":582,"line":3336},[580,7471,6667],{"class":611},[580,7473,7474,7476,7478],{"class":582,"line":3363},[580,7475,6672],{"class":611},[580,7477,608],{"class":593},[580,7479,617],{"class":593},[580,7481,7482,7484,7486,7488,7490,7492,7494,7496,7498,7500,7502,7504,7506,7508,7510,7512,7514,7516,7518,7520,7522,7524,7526],{"class":582,"line":3389},[580,7483,2233],{"class":593},[580,7485,1198],{"class":597},[580,7487,602],{"class":601},[580,7489,605],{"class":593},[580,7491,608],{"class":593},[580,7493,6691],{"class":611},[580,7495,608],{"class":593},[580,7497,2192],{"class":601},[580,7499,605],{"class":593},[580,7501,608],{"class":593},[580,7503,2199],{"class":611},[580,7505,608],{"class":593},[580,7507,2204],{"class":601},[580,7509,605],{"class":593},[580,7511,608],{"class":593},[580,7513,2211],{"class":611},[580,7515,608],{"class":593},[580,7517,2216],{"class":601},[580,7519,605],{"class":593},[580,7521,608],{"class":593},[580,7523,2223],{"class":611},[580,7525,608],{"class":593},[580,7527,617],{"class":593},[580,7529,7530,7532,7534,7536,7538,7540,7542,7544,7546,7548,7550,7552,7554,7556,7558,7560,7562,7564,7566,7568,7570,7572,7574],{"class":582,"line":3399},[580,7531,6730],{"class":593},[580,7533,2236],{"class":597},[580,7535,2239],{"class":601},[580,7537,605],{"class":593},[580,7539,608],{"class":593},[580,7541,2246],{"class":611},[580,7543,608],{"class":593},[580,7545,2251],{"class":601},[580,7547,605],{"class":593},[580,7549,608],{"class":593},[580,7551,2246],{"class":611},[580,7553,608],{"class":593},[580,7555,2262],{"class":601},[580,7557,605],{"class":593},[580,7559,608],{"class":593},[580,7561,6761],{"class":611},[580,7563,608],{"class":593},[580,7565,2274],{"class":601},[580,7567,605],{"class":593},[580,7569,608],{"class":593},[580,7571,6772],{"class":611},[580,7573,608],{"class":593},[580,7575,2286],{"class":593},[580,7577,7578,7580,7582],{"class":582,"line":3408},[580,7579,6781],{"class":593},[580,7581,1198],{"class":597},[580,7583,617],{"class":593},[580,7585,7586,7588,7590],{"class":582,"line":3417},[580,7587,1854],{"class":593},[580,7589,598],{"class":597},[580,7591,617],{"class":593},[580,7593,7594,7596,7598,7600,7602,7604,7606,7608],{"class":582,"line":3422},[580,7595,1793],{"class":593},[580,7597,598],{"class":597},[580,7599,602],{"class":601},[580,7601,605],{"class":593},[580,7603,608],{"class":593},[580,7605,6813],{"class":611},[580,7607,608],{"class":593},[580,7609,617],{"class":593},[580,7611,7612,7614,7616,7618,7620,7622,7624,7626],{"class":582,"line":3431},[580,7613,2233],{"class":593},[580,7615,580],{"class":597},[580,7617,602],{"class":601},[580,7619,605],{"class":593},[580,7621,608],{"class":593},[580,7623,6832],{"class":611},[580,7625,608],{"class":593},[580,7627,617],{"class":593},[580,7629,7630],{"class":582,"line":5345},[580,7631,6841],{"class":642},[580,7633,7634,7636,7638],{"class":582,"line":5364},[580,7635,6781],{"class":593},[580,7637,580],{"class":597},[580,7639,617],{"class":593},[580,7641,7642,7644,7646,7648,7650,7652,7654,7656],{"class":582,"line":5384},[580,7643,2233],{"class":593},[580,7645,445],{"class":597},[580,7647,602],{"class":601},[580,7649,605],{"class":593},[580,7651,608],{"class":593},[580,7653,6864],{"class":611},[580,7655,608],{"class":593},[580,7657,617],{"class":593},[580,7659,7660],{"class":582,"line":5434},[580,7661,6873],{"class":642},[580,7663,7664,7666,7668],{"class":582,"line":5484},[580,7665,6781],{"class":593},[580,7667,445],{"class":597},[580,7669,617],{"class":593},[580,7671,7672,7674,7676,7678,7680,7682,7684,7686],{"class":582,"line":5493},[580,7673,2233],{"class":593},[580,7675,432],{"class":597},[580,7677,602],{"class":601},[580,7679,605],{"class":593},[580,7681,608],{"class":593},[580,7683,7291],{"class":611},[580,7685,608],{"class":593},[580,7687,617],{"class":593},[580,7689,7690],{"class":582,"line":5502},[580,7691,7692],{"class":642},"              Container queries cho phép component tự thích nghi dựa trên không gian thực tế nó có, không phụ thuộc vào viewport. Điều này giúp tạo ra component thực sự reusable trong mọi ngữ cảnh layout.\n",[580,7694,7695,7697,7699],{"class":582,"line":5530},[580,7696,6781],{"class":593},[580,7698,432],{"class":597},[580,7700,617],{"class":593},[580,7702,7703,7705,7707],{"class":582,"line":5558},[580,7704,1854],{"class":593},[580,7706,598],{"class":597},[580,7708,617],{"class":593},[580,7710,7711,7713,7715],{"class":582,"line":5567},[580,7712,1863],{"class":593},[580,7714,6619],{"class":597},[580,7716,617],{"class":593},[580,7718,7719,7721,7723],{"class":582,"line":5572},[580,7720,2436],{"class":593},[580,7722,598],{"class":597},[580,7724,617],{"class":593},[580,7726,7727,7729,7731],{"class":582,"line":5581},[580,7728,2719],{"class":593},[580,7730,598],{"class":597},[580,7732,617],{"class":593},[580,7734,7735],{"class":582,"line":5586},[580,7736,963],{"emptyLinePlaceholder":962},[580,7738,7739,7741,7743],{"class":582,"line":5592},[580,7740,1215],{"class":593},[580,7742,598],{"class":597},[580,7744,617],{"class":593},[580,7746,7747],{"class":582,"line":5612},[580,7748,963],{"emptyLinePlaceholder":962},[580,7750,7751,7753,7755],{"class":582,"line":5641},[580,7752,646],{"class":593},[580,7754,1677],{"class":597},[580,7756,617],{"class":593},[580,7758,7759,7761,7763],{"class":582,"line":5670},[580,7760,646],{"class":593},[580,7762,575],{"class":597},[580,7764,617],{"class":593},[432,7766,7767],{},[436,7768,3442],{},[804,7770,7771,7774,7780,7786,7792,7798],{},[807,7772,7773],{},"Cùng một HTML\u002FCSS cho cả 3 container. Sự khác biệt đến từ container queries, không phải code khác nhau.",[807,7775,7776,7779],{},[491,7777,7778],{},"resize-x overflow-auto",": Cho phép người dùng kéo để resize container và thấy component thay đổi.",[807,7781,7782,7785],{},[491,7783,7784],{},"grid @md:grid-cols-[120px_1fr] @lg:grid-cols-[200px_1fr]",": Dùng container query để chuyển từ layout dọc sang layout ngang, và tăng kích thước ảnh.",[807,7787,7788,7791],{},[491,7789,7790],{},"@md:aspect-auto @md:h-full",": Khi container đủ rộng, ảnh bỏ aspect-video và fill chiều cao card.",[807,7793,7794,7797],{},[491,7795,7796],{},"@lg:w-16 @lg:h-16",": Icon to hơn khi container rộng hơn.",[807,7799,7800,7803],{},[491,7801,7802],{},"text-sm @lg:text-lg",": Font size tăng theo container, không theo viewport.",[445,7805,7807],{"id":7806},"_25-bài-tập-4-sidebar-widget-thích-nghi-theo-available-space","2.5. BÀI TẬP 4 — Sidebar Widget thích nghi theo Available Space",[432,7809,7810,7812],{},[436,7811,1491],{}," Widget trong sidebar:",[804,7814,7815,7818],{},[807,7816,7817],{},"Container rộng (> 400px): layout ngang (icon trái, text phải).",[807,7819,7820],{},"Container hẹp (≤ 400px): layout dọc (icon trên, text dưới), text nhỏ hơn.",[432,7822,7823],{},[436,7824,1508],{},[571,7826,7828],{"className":573,"code":7827,"language":575,"meta":576,"style":576},"\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>Sidebar Widget Container Query - Tailwind CSS v4\u003C\u002Ftitle>\n  \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tailwindcss\u002Fbrowser@4\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody class=\"min-h-screen bg-gray-100 p-4 md:p-8\">\n\n  \u003Cdiv class=\"max-w-6xl mx-auto\">\n    \u003Ch1 class=\"text-2xl md:text-3xl font-bold text-gray-900 mb-2\">\n      Container Queries — Sidebar Widget\n    \u003C\u002Fh1>\n    \u003Cp class=\"text-gray-600 mb-8\">\n      Widget tự chuyển từ horizontal sang vertical layout dựa trên available space.\n      Kéo cạnh phải của sidebar để resize.\n    \u003C\u002Fp>\n\n    \u003C!-- Layout: Sidebar + Content -->\n    \u003Cdiv class=\"flex gap-6\">\n      \n      \u003C!-- Sidebar (resizable) -->\n      \u003Caside class=\"resize-x overflow-auto min-w-[200px] max-w-[500px] border-2 border-dashed border-gray-300 rounded-lg p-4 bg-gray-50\" style=\"width: 300px\">\n        \n        \u003Ch2 class=\"text-xs font-medium text-gray-400 uppercase tracking-wider mb-4\">Sidebar Widgets\u003C\u002Fh2>\n\n        \u003C!-- Widget 1: Weather -->\n        \u003Cdiv class=\"@container mb-4\">\n          \u003Cdiv class=\"bg-white rounded-lg border border-gray-200 p-3\n                      @sm:flex @sm:items-center @sm:gap-3\">\n            \u003C!-- Icon -->\n            \u003Cdiv class=\"flex justify-center @sm:flex-shrink-0 mb-2 @sm:mb-0\">\n              \u003Cdiv class=\"w-10 h-10 @sm:w-12 @sm:h-12 bg-yellow-100 rounded-full flex items-center justify-center\">\n                \u003Csvg class=\"w-5 h-5 @sm:w-6 @sm:h-6 text-yellow-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\u002F>\n                \u003C\u002Fsvg>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003C!-- Text -->\n            \u003Cdiv class=\"text-center @sm:text-left\">\n              \u003Cp class=\"font-semibold text-gray-900 text-sm @sm:text-base\">28°C Nắng\u003C\u002Fp>\n              \u003Cp class=\"text-xs text-gray-500\">Hồ Chí Minh, Việt Nam\u003C\u002Fp>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Widget 2: Recent Posts -->\n        \u003Cdiv class=\"@container mb-4\">\n          \u003Cdiv class=\"bg-white rounded-lg border border-gray-200 p-3\n                      @sm:flex @sm:items-center @sm:gap-3\">\n            \u003Cdiv class=\"flex justify-center @sm:flex-shrink-0 mb-2 @sm:mb-0\">\n              \u003Cdiv class=\"w-10 h-10 @sm:w-12 @sm:h-12 bg-blue-100 rounded-full flex items-center justify-center\">\n                \u003Csvg class=\"w-5 h-5 @sm:w-6 @sm:h-6 text-blue-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z\"\u002F>\n                \u003C\u002Fsvg>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"text-center @sm:text-left\">\n              \u003Cp class=\"font-semibold text-gray-900 text-sm @sm:text-base\">12 Posts\u003C\u002Fp>\n              \u003Cp class=\"text-xs text-gray-500\">3 drafts pending\u003C\u002Fp>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Widget 3: Tasks -->\n        \u003Cdiv class=\"@container mb-4\">\n          \u003Cdiv class=\"bg-white rounded-lg border border-gray-200 p-3\n                      @sm:flex @sm:items-center @sm:gap-3\">\n            \u003Cdiv class=\"flex justify-center @sm:flex-shrink-0 mb-2 @sm:mb-0\">\n              \u003Cdiv class=\"w-10 h-10 @sm:w-12 @sm:h-12 bg-green-100 rounded-full flex items-center justify-center\">\n                \u003Csvg class=\"w-5 h-5 @sm:w-6 @sm:h-6 text-green-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                  \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"\u002F>\n                \u003C\u002Fsvg>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"text-center @sm:text-left\">\n              \u003Cp class=\"font-semibold text-gray-900 text-sm @sm:text-base\">8\u002F12 Tasks\u003C\u002Fp>\n              \u003Cp class=\"text-xs text-gray-500\">67% completed\u003C\u002Fp>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n      \u003C\u002Faside>\n\n      \u003C!-- Main Content -->\n      \u003Cmain class=\"flex-1 bg-white rounded-lg border border-gray-200 p-6\">\n        \u003Ch2 class=\"text-xl font-bold text-gray-900 mb-4\">Main Content Area\u003C\u002Fh2>\n        \u003Cp class=\"text-gray-600 mb-4\">\n          Kéo cạnh phải của sidebar (đường dashed) để resize. \n          Các widget trong sidebar sẽ tự động chuyển đổi layout dựa trên available width.\n        \u003C\u002Fp>\n        \u003Cdiv class=\"bg-gray-50 rounded-lg p-4 border border-gray-200\">\n          \u003Ch3 class=\"font-semibold text-gray-900 mb-2\">Cách hoạt động:\u003C\u002Fh3>\n          \u003Cul class=\"list-disc list-inside text-sm text-gray-600 space-y-1\">\n            \u003Cli>Container \u003Ccode class=\"bg-gray-200 px-1 rounded\">@container\u003C\u002Fcode> trên mỗi widget cha\u003C\u002Fli>\n            \u003Cli>Prefix \u003Ccode class=\"bg-gray-200 px-1 rounded\">@sm:\u003C\u002Fcode> để detect container width ≥ 384px\u003C\u002Fli>\n            \u003Cli>Dưới 384px: layout dọc (icon trên, text dưới, text-center)\u003C\u002Fli>\n            \u003Cli>Từ 384px: layout ngang (icon trái, text phải, text-left, icon to hơn)\u003C\u002Fli>\n            \u003Cli>Không dùng media query — chỉ dùng container query!\u003C\u002Fli>\n          \u003C\u002Ful>\n        \u003C\u002Fdiv>\n      \u003C\u002Fmain>\n\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[491,7829,7830,7840,7858,7866,7884,7912,7929,7951,7959,7977,7981,7999,8018,8023,8031,8049,8054,8059,8067,8071,8076,8095,8099,8104,8134,8138,8166,8170,8175,8194,8209,8218,8223,8242,8261,8311,8361,8370,8379,8387,8392,8411,8439,8467,8475,8483,8491,8495,8500,8518,8532,8540,8558,8577,8626,8675,8683,8691,8699,8717,8744,8771,8779,8787,8795,8799,8804,8822,8836,8844,8862,8881,8930,8979,8987,8995,9003,9021,9048,9075,9083,9091,9099,9103,9111,9115,9120,9139,9167,9186,9191,9196,9204,9223,9251,9270,9315,9359,9376,9393,9410,9418,9426,9434,9438,9446,9454,9458,9466],{"__ignoreMap":576},[580,7831,7832,7834,7836,7838],{"class":582,"line":583},[580,7833,1518],{"class":593},[580,7835,1521],{"class":597},[580,7837,1524],{"class":601},[580,7839,617],{"class":593},[580,7841,7842,7844,7846,7848,7850,7852,7854,7856],{"class":582,"line":590},[580,7843,594],{"class":593},[580,7845,575],{"class":597},[580,7847,1535],{"class":601},[580,7849,605],{"class":593},[580,7851,608],{"class":593},[580,7853,1542],{"class":611},[580,7855,608],{"class":593},[580,7857,617],{"class":593},[580,7859,7860,7862,7864],{"class":582,"line":620},[580,7861,594],{"class":593},[580,7863,1564],{"class":597},[580,7865,617],{"class":593},[580,7867,7868,7870,7872,7874,7876,7878,7880,7882],{"class":582,"line":653},[580,7869,623],{"class":593},[580,7871,1573],{"class":597},[580,7873,1576],{"class":601},[580,7875,605],{"class":593},[580,7877,608],{"class":593},[580,7879,1583],{"class":611},[580,7881,608],{"class":593},[580,7883,617],{"class":593},[580,7885,7886,7888,7890,7892,7894,7896,7898,7900,7902,7904,7906,7908,7910],{"class":582,"line":681},[580,7887,623],{"class":593},[580,7889,1573],{"class":597},[580,7891,1596],{"class":601},[580,7893,605],{"class":593},[580,7895,608],{"class":593},[580,7897,1603],{"class":611},[580,7899,608],{"class":593},[580,7901,1608],{"class":601},[580,7903,605],{"class":593},[580,7905,608],{"class":593},[580,7907,1615],{"class":611},[580,7909,608],{"class":593},[580,7911,617],{"class":593},[580,7913,7914,7916,7918,7920,7923,7925,7927],{"class":582,"line":709},[580,7915,623],{"class":593},[580,7917,1626],{"class":597},[580,7919,639],{"class":593},[580,7921,7922],{"class":642},"Sidebar Widget Container Query - Tailwind CSS v4",[580,7924,646],{"class":593},[580,7926,1626],{"class":597},[580,7928,617],{"class":593},[580,7930,7931,7933,7935,7937,7939,7941,7943,7945,7947,7949],{"class":582,"line":737},[580,7932,623],{"class":593},[580,7934,1644],{"class":597},[580,7936,1647],{"class":601},[580,7938,605],{"class":593},[580,7940,608],{"class":593},[580,7942,1654],{"class":611},[580,7944,608],{"class":593},[580,7946,1282],{"class":593},[580,7948,1644],{"class":597},[580,7950,617],{"class":593},[580,7952,7953,7955,7957],{"class":582,"line":765},[580,7954,646],{"class":593},[580,7956,1564],{"class":597},[580,7958,617],{"class":593},[580,7960,7961,7963,7965,7967,7969,7971,7973,7975],{"class":582,"line":793},[580,7962,594],{"class":593},[580,7964,1677],{"class":597},[580,7966,602],{"class":601},[580,7968,605],{"class":593},[580,7970,608],{"class":593},[580,7972,6420],{"class":611},[580,7974,608],{"class":593},[580,7976,617],{"class":593},[580,7978,7979],{"class":582,"line":896},[580,7980,963],{"emptyLinePlaceholder":962},[580,7982,7983,7985,7987,7989,7991,7993,7995,7997],{"class":582,"line":1029},[580,7984,623],{"class":593},[580,7986,598],{"class":597},[580,7988,602],{"class":601},[580,7990,605],{"class":593},[580,7992,608],{"class":593},[580,7994,6443],{"class":611},[580,7996,608],{"class":593},[580,7998,617],{"class":593},[580,8000,8001,8003,8005,8007,8009,8011,8014,8016],{"class":582,"line":1212},[580,8002,1195],{"class":593},[580,8004,1395],{"class":597},[580,8006,602],{"class":601},[580,8008,605],{"class":593},[580,8010,608],{"class":593},[580,8012,8013],{"class":611},"text-2xl md:text-3xl font-bold text-gray-900 mb-2",[580,8015,608],{"class":593},[580,8017,617],{"class":593},[580,8019,8020],{"class":582,"line":1222},[580,8021,8022],{"class":642},"      Container Queries — Sidebar Widget\n",[580,8024,8025,8027,8029],{"class":582,"line":1228},[580,8026,2719],{"class":593},[580,8028,1395],{"class":597},[580,8030,617],{"class":593},[580,8032,8033,8035,8037,8039,8041,8043,8045,8047],{"class":582,"line":1248},[580,8034,1195],{"class":593},[580,8036,432],{"class":597},[580,8038,602],{"class":601},[580,8040,605],{"class":593},[580,8042,608],{"class":593},[580,8044,6498],{"class":611},[580,8046,608],{"class":593},[580,8048,617],{"class":593},[580,8050,8051],{"class":582,"line":1289},[580,8052,8053],{"class":642},"      Widget tự chuyển từ horizontal sang vertical layout dựa trên available space.\n",[580,8055,8056],{"class":582,"line":1325},[580,8057,8058],{"class":642},"      Kéo cạnh phải của sidebar để resize.\n",[580,8060,8061,8063,8065],{"class":582,"line":1361},[580,8062,2719],{"class":593},[580,8064,432],{"class":597},[580,8066,617],{"class":593},[580,8068,8069],{"class":582,"line":1370},[580,8070,963],{"emptyLinePlaceholder":962},[580,8072,8073],{"class":582,"line":1379},[580,8074,8075],{"class":586},"    \u003C!-- Layout: Sidebar + Content -->\n",[580,8077,8078,8080,8082,8084,8086,8088,8091,8093],{"class":582,"line":1384},[580,8079,1195],{"class":593},[580,8081,598],{"class":597},[580,8083,602],{"class":601},[580,8085,605],{"class":593},[580,8087,608],{"class":593},[580,8089,8090],{"class":611},"flex gap-6",[580,8092,608],{"class":593},[580,8094,617],{"class":593},[580,8096,8097],{"class":582,"line":1390},[580,8098,3780],{"class":642},[580,8100,8101],{"class":582,"line":1411},[580,8102,8103],{"class":586},"      \u003C!-- Sidebar (resizable) -->\n",[580,8105,8106,8108,8110,8112,8114,8116,8119,8121,8123,8125,8127,8130,8132],{"class":582,"line":1417},[580,8107,1743],{"class":593},[580,8109,1088],{"class":597},[580,8111,602],{"class":601},[580,8113,605],{"class":593},[580,8115,608],{"class":593},[580,8117,8118],{"class":611},"resize-x overflow-auto min-w-[200px] max-w-[500px] border-2 border-dashed border-gray-300 rounded-lg p-4 bg-gray-50",[580,8120,608],{"class":593},[580,8122,6596],{"class":601},[580,8124,605],{"class":593},[580,8126,608],{"class":593},[580,8128,8129],{"class":611},"width: 300px",[580,8131,608],{"class":593},[580,8133,617],{"class":593},[580,8135,8136],{"class":582,"line":1426},[580,8137,1763],{"class":642},[580,8139,8140,8142,8144,8146,8148,8150,8153,8155,8157,8160,8162,8164],{"class":582,"line":1431},[580,8141,1773],{"class":593},[580,8143,427],{"class":597},[580,8145,602],{"class":601},[580,8147,605],{"class":593},[580,8149,608],{"class":593},[580,8151,8152],{"class":611},"text-xs font-medium text-gray-400 uppercase tracking-wider mb-4",[580,8154,608],{"class":593},[580,8156,639],{"class":593},[580,8158,8159],{"class":642},"Sidebar Widgets",[580,8161,646],{"class":593},[580,8163,427],{"class":597},[580,8165,617],{"class":593},[580,8167,8168],{"class":582,"line":1437},[580,8169,963],{"emptyLinePlaceholder":962},[580,8171,8172],{"class":582,"line":1458},[580,8173,8174],{"class":586},"        \u003C!-- Widget 1: Weather -->\n",[580,8176,8177,8179,8181,8183,8185,8187,8190,8192],{"class":582,"line":1476},[580,8178,1773],{"class":593},[580,8180,598],{"class":597},[580,8182,602],{"class":601},[580,8184,605],{"class":593},[580,8186,608],{"class":593},[580,8188,8189],{"class":611},"@container mb-4",[580,8191,608],{"class":593},[580,8193,617],{"class":593},[580,8195,8196,8198,8200,8202,8204,8206],{"class":582,"line":2078},[580,8197,1793],{"class":593},[580,8199,598],{"class":597},[580,8201,602],{"class":601},[580,8203,605],{"class":593},[580,8205,608],{"class":593},[580,8207,8208],{"class":611},"bg-white rounded-lg border border-gray-200 p-3\n",[580,8210,8211,8214,8216],{"class":582,"line":2084},[580,8212,8213],{"class":611},"                      @sm:flex @sm:items-center @sm:gap-3",[580,8215,608],{"class":593},[580,8217,617],{"class":593},[580,8219,8220],{"class":582,"line":2093},[580,8221,8222],{"class":586},"            \u003C!-- Icon -->\n",[580,8224,8225,8227,8229,8231,8233,8235,8238,8240],{"class":582,"line":2102},[580,8226,2233],{"class":593},[580,8228,598],{"class":597},[580,8230,602],{"class":601},[580,8232,605],{"class":593},[580,8234,608],{"class":593},[580,8236,8237],{"class":611},"flex justify-center @sm:flex-shrink-0 mb-2 @sm:mb-0",[580,8239,608],{"class":593},[580,8241,617],{"class":593},[580,8243,8244,8246,8248,8250,8252,8254,8257,8259],{"class":582,"line":2107},[580,8245,6730],{"class":593},[580,8247,598],{"class":597},[580,8249,602],{"class":601},[580,8251,605],{"class":593},[580,8253,608],{"class":593},[580,8255,8256],{"class":611},"w-10 h-10 @sm:w-12 @sm:h-12 bg-yellow-100 rounded-full flex items-center justify-center",[580,8258,608],{"class":593},[580,8260,617],{"class":593},[580,8262,8263,8266,8268,8270,8272,8274,8277,8279,8281,8283,8285,8287,8289,8291,8293,8295,8297,8299,8301,8303,8305,8307,8309],{"class":582,"line":2113},[580,8264,8265],{"class":593},"                \u003C",[580,8267,1198],{"class":597},[580,8269,602],{"class":601},[580,8271,605],{"class":593},[580,8273,608],{"class":593},[580,8275,8276],{"class":611},"w-5 h-5 @sm:w-6 @sm:h-6 text-yellow-600",[580,8278,608],{"class":593},[580,8280,2192],{"class":601},[580,8282,605],{"class":593},[580,8284,608],{"class":593},[580,8286,2199],{"class":611},[580,8288,608],{"class":593},[580,8290,2204],{"class":601},[580,8292,605],{"class":593},[580,8294,608],{"class":593},[580,8296,2211],{"class":611},[580,8298,608],{"class":593},[580,8300,2216],{"class":601},[580,8302,605],{"class":593},[580,8304,608],{"class":593},[580,8306,2223],{"class":611},[580,8308,608],{"class":593},[580,8310,617],{"class":593},[580,8312,8313,8316,8318,8320,8322,8324,8326,8328,8330,8332,8334,8336,8338,8340,8342,8344,8346,8348,8350,8352,8354,8357,8359],{"class":582,"line":2157},[580,8314,8315],{"class":593},"                  \u003C",[580,8317,2236],{"class":597},[580,8319,2239],{"class":601},[580,8321,605],{"class":593},[580,8323,608],{"class":593},[580,8325,2246],{"class":611},[580,8327,608],{"class":593},[580,8329,2251],{"class":601},[580,8331,605],{"class":593},[580,8333,608],{"class":593},[580,8335,2246],{"class":611},[580,8337,608],{"class":593},[580,8339,2262],{"class":601},[580,8341,605],{"class":593},[580,8343,608],{"class":593},[580,8345,2269],{"class":611},[580,8347,608],{"class":593},[580,8349,2274],{"class":601},[580,8351,605],{"class":593},[580,8353,608],{"class":593},[580,8355,8356],{"class":611},"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z",[580,8358,608],{"class":593},[580,8360,2286],{"class":593},[580,8362,8363,8366,8368],{"class":582,"line":2163},[580,8364,8365],{"class":593},"                \u003C\u002F",[580,8367,1198],{"class":597},[580,8369,617],{"class":593},[580,8371,8372,8375,8377],{"class":582,"line":2230},[580,8373,8374],{"class":593},"              \u003C\u002F",[580,8376,598],{"class":597},[580,8378,617],{"class":593},[580,8380,8381,8383,8385],{"class":582,"line":2289},[580,8382,6781],{"class":593},[580,8384,598],{"class":597},[580,8386,617],{"class":593},[580,8388,8389],{"class":582,"line":2298},[580,8390,8391],{"class":586},"            \u003C!-- Text -->\n",[580,8393,8394,8396,8398,8400,8402,8404,8407,8409],{"class":582,"line":2304},[580,8395,2233],{"class":593},[580,8397,598],{"class":597},[580,8399,602],{"class":601},[580,8401,605],{"class":593},[580,8403,608],{"class":593},[580,8405,8406],{"class":611},"text-center @sm:text-left",[580,8408,608],{"class":593},[580,8410,617],{"class":593},[580,8412,8413,8415,8417,8419,8421,8423,8426,8428,8430,8433,8435,8437],{"class":582,"line":2365},[580,8414,6730],{"class":593},[580,8416,432],{"class":597},[580,8418,602],{"class":601},[580,8420,605],{"class":593},[580,8422,608],{"class":593},[580,8424,8425],{"class":611},"font-semibold text-gray-900 text-sm @sm:text-base",[580,8427,608],{"class":593},[580,8429,639],{"class":593},[580,8431,8432],{"class":642},"28°C Nắng",[580,8434,646],{"class":593},[580,8436,432],{"class":597},[580,8438,617],{"class":593},[580,8440,8441,8443,8445,8447,8449,8451,8454,8456,8458,8461,8463,8465],{"class":582,"line":2415},[580,8442,6730],{"class":593},[580,8444,432],{"class":597},[580,8446,602],{"class":601},[580,8448,605],{"class":593},[580,8450,608],{"class":593},[580,8452,8453],{"class":611},"text-xs text-gray-500",[580,8455,608],{"class":593},[580,8457,639],{"class":593},[580,8459,8460],{"class":642},"Hồ Chí Minh, Việt Nam",[580,8462,646],{"class":593},[580,8464,432],{"class":597},[580,8466,617],{"class":593},[580,8468,8469,8471,8473],{"class":582,"line":2424},[580,8470,6781],{"class":593},[580,8472,598],{"class":597},[580,8474,617],{"class":593},[580,8476,8477,8479,8481],{"class":582,"line":2433},[580,8478,1854],{"class":593},[580,8480,598],{"class":597},[580,8482,617],{"class":593},[580,8484,8485,8487,8489],{"class":582,"line":2443},[580,8486,1863],{"class":593},[580,8488,598],{"class":597},[580,8490,617],{"class":593},[580,8492,8493],{"class":582,"line":2448},[580,8494,963],{"emptyLinePlaceholder":962},[580,8496,8497],{"class":582,"line":2454},[580,8498,8499],{"class":586},"        \u003C!-- Widget 2: Recent Posts -->\n",[580,8501,8502,8504,8506,8508,8510,8512,8514,8516],{"class":582,"line":2485},[580,8503,1773],{"class":593},[580,8505,598],{"class":597},[580,8507,602],{"class":601},[580,8509,605],{"class":593},[580,8511,608],{"class":593},[580,8513,8189],{"class":611},[580,8515,608],{"class":593},[580,8517,617],{"class":593},[580,8519,8520,8522,8524,8526,8528,8530],{"class":582,"line":2505},[580,8521,1793],{"class":593},[580,8523,598],{"class":597},[580,8525,602],{"class":601},[580,8527,605],{"class":593},[580,8529,608],{"class":593},[580,8531,8208],{"class":611},[580,8533,8534,8536,8538],{"class":582,"line":2543},[580,8535,8213],{"class":611},[580,8537,608],{"class":593},[580,8539,617],{"class":593},[580,8541,8542,8544,8546,8548,8550,8552,8554,8556],{"class":582,"line":2580},[580,8543,2233],{"class":593},[580,8545,598],{"class":597},[580,8547,602],{"class":601},[580,8549,605],{"class":593},[580,8551,608],{"class":593},[580,8553,8237],{"class":611},[580,8555,608],{"class":593},[580,8557,617],{"class":593},[580,8559,8560,8562,8564,8566,8568,8570,8573,8575],{"class":582,"line":2617},[580,8561,6730],{"class":593},[580,8563,598],{"class":597},[580,8565,602],{"class":601},[580,8567,605],{"class":593},[580,8569,608],{"class":593},[580,8571,8572],{"class":611},"w-10 h-10 @sm:w-12 @sm:h-12 bg-blue-100 rounded-full flex items-center justify-center",[580,8574,608],{"class":593},[580,8576,617],{"class":593},[580,8578,8579,8581,8583,8585,8587,8589,8592,8594,8596,8598,8600,8602,8604,8606,8608,8610,8612,8614,8616,8618,8620,8622,8624],{"class":582,"line":2654},[580,8580,8265],{"class":593},[580,8582,1198],{"class":597},[580,8584,602],{"class":601},[580,8586,605],{"class":593},[580,8588,608],{"class":593},[580,8590,8591],{"class":611},"w-5 h-5 @sm:w-6 @sm:h-6 text-blue-600",[580,8593,608],{"class":593},[580,8595,2192],{"class":601},[580,8597,605],{"class":593},[580,8599,608],{"class":593},[580,8601,2199],{"class":611},[580,8603,608],{"class":593},[580,8605,2204],{"class":601},[580,8607,605],{"class":593},[580,8609,608],{"class":593},[580,8611,2211],{"class":611},[580,8613,608],{"class":593},[580,8615,2216],{"class":601},[580,8617,605],{"class":593},[580,8619,608],{"class":593},[580,8621,2223],{"class":611},[580,8623,608],{"class":593},[580,8625,617],{"class":593},[580,8627,8628,8630,8632,8634,8636,8638,8640,8642,8644,8646,8648,8650,8652,8654,8656,8658,8660,8662,8664,8666,8668,8671,8673],{"class":582,"line":2684},[580,8629,8315],{"class":593},[580,8631,2236],{"class":597},[580,8633,2239],{"class":601},[580,8635,605],{"class":593},[580,8637,608],{"class":593},[580,8639,2246],{"class":611},[580,8641,608],{"class":593},[580,8643,2251],{"class":601},[580,8645,605],{"class":593},[580,8647,608],{"class":593},[580,8649,2246],{"class":611},[580,8651,608],{"class":593},[580,8653,2262],{"class":601},[580,8655,605],{"class":593},[580,8657,608],{"class":593},[580,8659,2269],{"class":611},[580,8661,608],{"class":593},[580,8663,2274],{"class":601},[580,8665,605],{"class":593},[580,8667,608],{"class":593},[580,8669,8670],{"class":611},"M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z",[580,8672,608],{"class":593},[580,8674,2286],{"class":593},[580,8676,8677,8679,8681],{"class":582,"line":2689},[580,8678,8365],{"class":593},[580,8680,1198],{"class":597},[580,8682,617],{"class":593},[580,8684,8685,8687,8689],{"class":582,"line":2698},[580,8686,8374],{"class":593},[580,8688,598],{"class":597},[580,8690,617],{"class":593},[580,8692,8693,8695,8697],{"class":582,"line":2707},[580,8694,6781],{"class":593},[580,8696,598],{"class":597},[580,8698,617],{"class":593},[580,8700,8701,8703,8705,8707,8709,8711,8713,8715],{"class":582,"line":2716},[580,8702,2233],{"class":593},[580,8704,598],{"class":597},[580,8706,602],{"class":601},[580,8708,605],{"class":593},[580,8710,608],{"class":593},[580,8712,8406],{"class":611},[580,8714,608],{"class":593},[580,8716,617],{"class":593},[580,8718,8719,8721,8723,8725,8727,8729,8731,8733,8735,8738,8740,8742],{"class":582,"line":2726},[580,8720,6730],{"class":593},[580,8722,432],{"class":597},[580,8724,602],{"class":601},[580,8726,605],{"class":593},[580,8728,608],{"class":593},[580,8730,8425],{"class":611},[580,8732,608],{"class":593},[580,8734,639],{"class":593},[580,8736,8737],{"class":642},"12 Posts",[580,8739,646],{"class":593},[580,8741,432],{"class":597},[580,8743,617],{"class":593},[580,8745,8746,8748,8750,8752,8754,8756,8758,8760,8762,8765,8767,8769],{"class":582,"line":2735},[580,8747,6730],{"class":593},[580,8749,432],{"class":597},[580,8751,602],{"class":601},[580,8753,605],{"class":593},[580,8755,608],{"class":593},[580,8757,8453],{"class":611},[580,8759,608],{"class":593},[580,8761,639],{"class":593},[580,8763,8764],{"class":642},"3 drafts pending",[580,8766,646],{"class":593},[580,8768,432],{"class":597},[580,8770,617],{"class":593},[580,8772,8773,8775,8777],{"class":582,"line":2740},[580,8774,6781],{"class":593},[580,8776,598],{"class":597},[580,8778,617],{"class":593},[580,8780,8781,8783,8785],{"class":582,"line":2746},[580,8782,1854],{"class":593},[580,8784,598],{"class":597},[580,8786,617],{"class":593},[580,8788,8789,8791,8793],{"class":582,"line":2770},[580,8790,1863],{"class":593},[580,8792,598],{"class":597},[580,8794,617],{"class":593},[580,8796,8797],{"class":582,"line":2775},[580,8798,963],{"emptyLinePlaceholder":962},[580,8800,8801],{"class":582,"line":2781},[580,8802,8803],{"class":586},"        \u003C!-- Widget 3: Tasks -->\n",[580,8805,8806,8808,8810,8812,8814,8816,8818,8820],{"class":582,"line":2801},[580,8807,1773],{"class":593},[580,8809,598],{"class":597},[580,8811,602],{"class":601},[580,8813,605],{"class":593},[580,8815,608],{"class":593},[580,8817,8189],{"class":611},[580,8819,608],{"class":593},[580,8821,617],{"class":593},[580,8823,8824,8826,8828,8830,8832,8834],{"class":582,"line":2832},[580,8825,1793],{"class":593},[580,8827,598],{"class":597},[580,8829,602],{"class":601},[580,8831,605],{"class":593},[580,8833,608],{"class":593},[580,8835,8208],{"class":611},[580,8837,8838,8840,8842],{"class":582,"line":2861},[580,8839,8213],{"class":611},[580,8841,608],{"class":593},[580,8843,617],{"class":593},[580,8845,8846,8848,8850,8852,8854,8856,8858,8860],{"class":582,"line":2890},[580,8847,2233],{"class":593},[580,8849,598],{"class":597},[580,8851,602],{"class":601},[580,8853,605],{"class":593},[580,8855,608],{"class":593},[580,8857,8237],{"class":611},[580,8859,608],{"class":593},[580,8861,617],{"class":593},[580,8863,8864,8866,8868,8870,8872,8874,8877,8879],{"class":582,"line":2899},[580,8865,6730],{"class":593},[580,8867,598],{"class":597},[580,8869,602],{"class":601},[580,8871,605],{"class":593},[580,8873,608],{"class":593},[580,8875,8876],{"class":611},"w-10 h-10 @sm:w-12 @sm:h-12 bg-green-100 rounded-full flex items-center justify-center",[580,8878,608],{"class":593},[580,8880,617],{"class":593},[580,8882,8883,8885,8887,8889,8891,8893,8896,8898,8900,8902,8904,8906,8908,8910,8912,8914,8916,8918,8920,8922,8924,8926,8928],{"class":582,"line":2929},[580,8884,8265],{"class":593},[580,8886,1198],{"class":597},[580,8888,602],{"class":601},[580,8890,605],{"class":593},[580,8892,608],{"class":593},[580,8894,8895],{"class":611},"w-5 h-5 @sm:w-6 @sm:h-6 text-green-600",[580,8897,608],{"class":593},[580,8899,2192],{"class":601},[580,8901,605],{"class":593},[580,8903,608],{"class":593},[580,8905,2199],{"class":611},[580,8907,608],{"class":593},[580,8909,2204],{"class":601},[580,8911,605],{"class":593},[580,8913,608],{"class":593},[580,8915,2211],{"class":611},[580,8917,608],{"class":593},[580,8919,2216],{"class":601},[580,8921,605],{"class":593},[580,8923,608],{"class":593},[580,8925,2223],{"class":611},[580,8927,608],{"class":593},[580,8929,617],{"class":593},[580,8931,8932,8934,8936,8938,8940,8942,8944,8946,8948,8950,8952,8954,8956,8958,8960,8962,8964,8966,8968,8970,8972,8975,8977],{"class":582,"line":2957},[580,8933,8315],{"class":593},[580,8935,2236],{"class":597},[580,8937,2239],{"class":601},[580,8939,605],{"class":593},[580,8941,608],{"class":593},[580,8943,2246],{"class":611},[580,8945,608],{"class":593},[580,8947,2251],{"class":601},[580,8949,605],{"class":593},[580,8951,608],{"class":593},[580,8953,2246],{"class":611},[580,8955,608],{"class":593},[580,8957,2262],{"class":601},[580,8959,605],{"class":593},[580,8961,608],{"class":593},[580,8963,2269],{"class":611},[580,8965,608],{"class":593},[580,8967,2274],{"class":601},[580,8969,605],{"class":593},[580,8971,608],{"class":593},[580,8973,8974],{"class":611},"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4",[580,8976,608],{"class":593},[580,8978,2286],{"class":593},[580,8980,8981,8983,8985],{"class":582,"line":2966},[580,8982,8365],{"class":593},[580,8984,1198],{"class":597},[580,8986,617],{"class":593},[580,8988,8989,8991,8993],{"class":582,"line":2975},[580,8990,8374],{"class":593},[580,8992,598],{"class":597},[580,8994,617],{"class":593},[580,8996,8997,8999,9001],{"class":582,"line":2980},[580,8998,6781],{"class":593},[580,9000,598],{"class":597},[580,9002,617],{"class":593},[580,9004,9005,9007,9009,9011,9013,9015,9017,9019],{"class":582,"line":2989},[580,9006,2233],{"class":593},[580,9008,598],{"class":597},[580,9010,602],{"class":601},[580,9012,605],{"class":593},[580,9014,608],{"class":593},[580,9016,8406],{"class":611},[580,9018,608],{"class":593},[580,9020,617],{"class":593},[580,9022,9023,9025,9027,9029,9031,9033,9035,9037,9039,9042,9044,9046],{"class":582,"line":3025},[580,9024,6730],{"class":593},[580,9026,432],{"class":597},[580,9028,602],{"class":601},[580,9030,605],{"class":593},[580,9032,608],{"class":593},[580,9034,8425],{"class":611},[580,9036,608],{"class":593},[580,9038,639],{"class":593},[580,9040,9041],{"class":642},"8\u002F12 Tasks",[580,9043,646],{"class":593},[580,9045,432],{"class":597},[580,9047,617],{"class":593},[580,9049,9050,9052,9054,9056,9058,9060,9062,9064,9066,9069,9071,9073],{"class":582,"line":3053},[580,9051,6730],{"class":593},[580,9053,432],{"class":597},[580,9055,602],{"class":601},[580,9057,605],{"class":593},[580,9059,608],{"class":593},[580,9061,8453],{"class":611},[580,9063,608],{"class":593},[580,9065,639],{"class":593},[580,9067,9068],{"class":642},"67% completed",[580,9070,646],{"class":593},[580,9072,432],{"class":597},[580,9074,617],{"class":593},[580,9076,9077,9079,9081],{"class":582,"line":3081},[580,9078,6781],{"class":593},[580,9080,598],{"class":597},[580,9082,617],{"class":593},[580,9084,9085,9087,9089],{"class":582,"line":3109},[580,9086,1854],{"class":593},[580,9088,598],{"class":597},[580,9090,617],{"class":593},[580,9092,9093,9095,9097],{"class":582,"line":3114},[580,9094,1863],{"class":593},[580,9096,598],{"class":597},[580,9098,617],{"class":593},[580,9100,9101],{"class":582,"line":3145},[580,9102,963],{"emptyLinePlaceholder":962},[580,9104,9105,9107,9109],{"class":582,"line":3174},[580,9106,2436],{"class":593},[580,9108,1088],{"class":597},[580,9110,617],{"class":593},[580,9112,9113],{"class":582,"line":3200},[580,9114,963],{"emptyLinePlaceholder":962},[580,9116,9117],{"class":582,"line":3226},[580,9118,9119],{"class":586},"      \u003C!-- Main Content -->\n",[580,9121,9122,9124,9126,9128,9130,9132,9135,9137],{"class":582,"line":3236},[580,9123,1743],{"class":593},[580,9125,1117],{"class":597},[580,9127,602],{"class":601},[580,9129,605],{"class":593},[580,9131,608],{"class":593},[580,9133,9134],{"class":611},"flex-1 bg-white rounded-lg border border-gray-200 p-6",[580,9136,608],{"class":593},[580,9138,617],{"class":593},[580,9140,9141,9143,9145,9147,9149,9151,9154,9156,9158,9161,9163,9165],{"class":582,"line":3241},[580,9142,1773],{"class":593},[580,9144,427],{"class":597},[580,9146,602],{"class":601},[580,9148,605],{"class":593},[580,9150,608],{"class":593},[580,9152,9153],{"class":611},"text-xl font-bold text-gray-900 mb-4",[580,9155,608],{"class":593},[580,9157,639],{"class":593},[580,9159,9160],{"class":642},"Main Content Area",[580,9162,646],{"class":593},[580,9164,427],{"class":597},[580,9166,617],{"class":593},[580,9168,9169,9171,9173,9175,9177,9179,9182,9184],{"class":582,"line":3247},[580,9170,1773],{"class":593},[580,9172,432],{"class":597},[580,9174,602],{"class":601},[580,9176,605],{"class":593},[580,9178,608],{"class":593},[580,9180,9181],{"class":611},"text-gray-600 mb-4",[580,9183,608],{"class":593},[580,9185,617],{"class":593},[580,9187,9188],{"class":582,"line":3283},[580,9189,9190],{"class":642},"          Kéo cạnh phải của sidebar (đường dashed) để resize. \n",[580,9192,9193],{"class":582,"line":3309},[580,9194,9195],{"class":642},"          Các widget trong sidebar sẽ tự động chuyển đổi layout dựa trên available width.\n",[580,9197,9198,9200,9202],{"class":582,"line":3336},[580,9199,1863],{"class":593},[580,9201,432],{"class":597},[580,9203,617],{"class":593},[580,9205,9206,9208,9210,9212,9214,9216,9219,9221],{"class":582,"line":3363},[580,9207,1773],{"class":593},[580,9209,598],{"class":597},[580,9211,602],{"class":601},[580,9213,605],{"class":593},[580,9215,608],{"class":593},[580,9217,9218],{"class":611},"bg-gray-50 rounded-lg p-4 border border-gray-200",[580,9220,608],{"class":593},[580,9222,617],{"class":593},[580,9224,9225,9227,9229,9231,9233,9235,9238,9240,9242,9245,9247,9249],{"class":582,"line":3389},[580,9226,1793],{"class":593},[580,9228,445],{"class":597},[580,9230,602],{"class":601},[580,9232,605],{"class":593},[580,9234,608],{"class":593},[580,9236,9237],{"class":611},"font-semibold text-gray-900 mb-2",[580,9239,608],{"class":593},[580,9241,639],{"class":593},[580,9243,9244],{"class":642},"Cách hoạt động:",[580,9246,646],{"class":593},[580,9248,445],{"class":597},[580,9250,617],{"class":593},[580,9252,9253,9255,9257,9259,9261,9263,9266,9268],{"class":582,"line":3399},[580,9254,1793],{"class":593},[580,9256,804],{"class":597},[580,9258,602],{"class":601},[580,9260,605],{"class":593},[580,9262,608],{"class":593},[580,9264,9265],{"class":611},"list-disc list-inside text-sm text-gray-600 space-y-1",[580,9267,608],{"class":593},[580,9269,617],{"class":593},[580,9271,9272,9274,9276,9278,9281,9283,9285,9287,9289,9291,9294,9296,9298,9300,9302,9304,9306,9309,9311,9313],{"class":582,"line":3408},[580,9273,2233],{"class":593},[580,9275,807],{"class":597},[580,9277,639],{"class":593},[580,9279,9280],{"class":642},"Container ",[580,9282,594],{"class":593},[580,9284,491],{"class":597},[580,9286,602],{"class":601},[580,9288,605],{"class":593},[580,9290,608],{"class":593},[580,9292,9293],{"class":611},"bg-gray-200 px-1 rounded",[580,9295,608],{"class":593},[580,9297,639],{"class":593},[580,9299,5937],{"class":642},[580,9301,646],{"class":593},[580,9303,491],{"class":597},[580,9305,639],{"class":593},[580,9307,9308],{"class":642}," trên mỗi widget cha",[580,9310,646],{"class":593},[580,9312,807],{"class":597},[580,9314,617],{"class":593},[580,9316,9317,9319,9321,9323,9326,9328,9330,9332,9334,9336,9338,9340,9342,9344,9346,9348,9350,9353,9355,9357],{"class":582,"line":3417},[580,9318,2233],{"class":593},[580,9320,807],{"class":597},[580,9322,639],{"class":593},[580,9324,9325],{"class":642},"Prefix ",[580,9327,594],{"class":593},[580,9329,491],{"class":597},[580,9331,602],{"class":601},[580,9333,605],{"class":593},[580,9335,608],{"class":593},[580,9337,9293],{"class":611},[580,9339,608],{"class":593},[580,9341,639],{"class":593},[580,9343,6019],{"class":642},[580,9345,646],{"class":593},[580,9347,491],{"class":597},[580,9349,639],{"class":593},[580,9351,9352],{"class":642}," để detect container width ≥ 384px",[580,9354,646],{"class":593},[580,9356,807],{"class":597},[580,9358,617],{"class":593},[580,9360,9361,9363,9365,9367,9370,9372,9374],{"class":582,"line":3422},[580,9362,2233],{"class":593},[580,9364,807],{"class":597},[580,9366,639],{"class":593},[580,9368,9369],{"class":642},"Dưới 384px: layout dọc (icon trên, text dưới, text-center)",[580,9371,646],{"class":593},[580,9373,807],{"class":597},[580,9375,617],{"class":593},[580,9377,9378,9380,9382,9384,9387,9389,9391],{"class":582,"line":3431},[580,9379,2233],{"class":593},[580,9381,807],{"class":597},[580,9383,639],{"class":593},[580,9385,9386],{"class":642},"Từ 384px: layout ngang (icon trái, text phải, text-left, icon to hơn)",[580,9388,646],{"class":593},[580,9390,807],{"class":597},[580,9392,617],{"class":593},[580,9394,9395,9397,9399,9401,9404,9406,9408],{"class":582,"line":5345},[580,9396,2233],{"class":593},[580,9398,807],{"class":597},[580,9400,639],{"class":593},[580,9402,9403],{"class":642},"Không dùng media query — chỉ dùng container query!",[580,9405,646],{"class":593},[580,9407,807],{"class":597},[580,9409,617],{"class":593},[580,9411,9412,9414,9416],{"class":582,"line":5364},[580,9413,1854],{"class":593},[580,9415,804],{"class":597},[580,9417,617],{"class":593},[580,9419,9420,9422,9424],{"class":582,"line":5384},[580,9421,1863],{"class":593},[580,9423,598],{"class":597},[580,9425,617],{"class":593},[580,9427,9428,9430,9432],{"class":582,"line":5434},[580,9429,2436],{"class":593},[580,9431,1117],{"class":597},[580,9433,617],{"class":593},[580,9435,9436],{"class":582,"line":5484},[580,9437,963],{"emptyLinePlaceholder":962},[580,9439,9440,9442,9444],{"class":582,"line":5493},[580,9441,2719],{"class":593},[580,9443,598],{"class":597},[580,9445,617],{"class":593},[580,9447,9448,9450,9452],{"class":582,"line":5502},[580,9449,1215],{"class":593},[580,9451,598],{"class":597},[580,9453,617],{"class":593},[580,9455,9456],{"class":582,"line":5530},[580,9457,963],{"emptyLinePlaceholder":962},[580,9459,9460,9462,9464],{"class":582,"line":5558},[580,9461,646],{"class":593},[580,9463,1677],{"class":597},[580,9465,617],{"class":593},[580,9467,9468,9470,9472],{"class":582,"line":5567},[580,9469,646],{"class":593},[580,9471,575],{"class":597},[580,9473,617],{"class":593},[432,9475,9476],{},[436,9477,3442],{},[804,9479,9480,9485,9491,9497,9502],{},[807,9481,9482,9484],{},[491,9483,5937],{}," trên mỗi widget wrapper để tạo container query context.",[807,9486,9487,9490],{},[491,9488,9489],{},"@sm:flex @sm:items-center @sm:gap-3",": Khi container đủ rộng (≥ 384px), chuyển sang flex row.",[807,9492,9493,9496],{},[491,9494,9495],{},"@sm:w-12 @sm:h-12",": Icon to hơn khi có nhiều không gian.",[807,9498,9499,9501],{},[491,9500,8406],{},": Text căn giữa khi hẹp, căn trái khi rộng.",[807,9503,9504,9506],{},[491,9505,7778],{}," trên sidebar để demo tương tác.",[5863,9508],{},[427,9510,9512],{"id":9511},"_3-dark-mode","3. Dark Mode",[432,9514,9515,9516,9519,9520,3003],{},"Dark mode không còn là \"nice to have\" — nó là ",[436,9517,9518],{},"tiêu chuẩn mong đợi"," cho mọi ứng dụng web hiện đại. Tailwind CSS v4 hỗ trợ dark mode qua variant ",[491,9521,9522],{},"dark:",[445,9524,9526,9527,9529],{"id":9525},"_31-cách-dark-hoạt-động","3.1. Cách ",[491,9528,9522],{}," hoạt động",[432,9531,9532,9534,9535,9541,9542,9549,9550,9553],{},[491,9533,9522],{}," variant hoạt động dựa trên ",[436,9536,9537,9538],{},"CSS ",[491,9539,9540],{},"@media (prefers-color-scheme: dark)"," hoặc ",[436,9543,9544,9545,9548],{},"class ",[491,9546,9547],{},"dark"," trên phần tử cha"," (thường là ",[491,9551,9552],{},"\u003Chtml>","):",[571,9555,9557],{"className":573,"code":9556,"language":575,"meta":576,"style":576},"\u003C!-- Dựa trên system preference (media query) — mặc định -->\n\u003Cdiv class=\"bg-white dark:bg-gray-900\">\n  \u003Cp class=\"text-gray-900 dark:text-white\">Nội dung\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003C!-- Dựa trên class \"dark\" (manual toggle) — cần config -->\n\u003Chtml class=\"dark\">\n  \u003C!-- ... -->\n\u003C\u002Fhtml>\n",[491,9558,9559,9564,9583,9611,9619,9623,9628,9646,9651],{"__ignoreMap":576},[580,9560,9561],{"class":582,"line":583},[580,9562,9563],{"class":586},"\u003C!-- Dựa trên system preference (media query) — mặc định -->\n",[580,9565,9566,9568,9570,9572,9574,9576,9579,9581],{"class":582,"line":590},[580,9567,594],{"class":593},[580,9569,598],{"class":597},[580,9571,602],{"class":601},[580,9573,605],{"class":593},[580,9575,608],{"class":593},[580,9577,9578],{"class":611},"bg-white dark:bg-gray-900",[580,9580,608],{"class":593},[580,9582,617],{"class":593},[580,9584,9585,9587,9589,9591,9593,9595,9598,9600,9602,9605,9607,9609],{"class":582,"line":620},[580,9586,623],{"class":593},[580,9588,432],{"class":597},[580,9590,602],{"class":601},[580,9592,605],{"class":593},[580,9594,608],{"class":593},[580,9596,9597],{"class":611},"text-gray-900 dark:text-white",[580,9599,608],{"class":593},[580,9601,639],{"class":593},[580,9603,9604],{"class":642},"Nội dung",[580,9606,646],{"class":593},[580,9608,432],{"class":597},[580,9610,617],{"class":593},[580,9612,9613,9615,9617],{"class":582,"line":653},[580,9614,646],{"class":593},[580,9616,598],{"class":597},[580,9618,617],{"class":593},[580,9620,9621],{"class":582,"line":681},[580,9622,963],{"emptyLinePlaceholder":962},[580,9624,9625],{"class":582,"line":709},[580,9626,9627],{"class":586},"\u003C!-- Dựa trên class \"dark\" (manual toggle) — cần config -->\n",[580,9629,9630,9632,9634,9636,9638,9640,9642,9644],{"class":582,"line":737},[580,9631,594],{"class":593},[580,9633,575],{"class":597},[580,9635,602],{"class":601},[580,9637,605],{"class":593},[580,9639,608],{"class":593},[580,9641,9547],{"class":611},[580,9643,608],{"class":593},[580,9645,617],{"class":593},[580,9647,9648],{"class":582,"line":765},[580,9649,9650],{"class":586},"  \u003C!-- ... -->\n",[580,9652,9653,9655,9657],{"class":582,"line":793},[580,9654,646],{"class":593},[580,9656,575],{"class":597},[580,9658,617],{"class":593},[445,9660,9662],{"id":9661},"_32-configuration-dark-mode-trong-v4-css-first","3.2. Configuration Dark Mode trong v4 (CSS-first)",[571,9664,9666],{"className":936,"code":9665,"language":938,"meta":576,"style":576},"@import \"tailwindcss\";\n\n\u002F* Mặc định: dark mode dựa trên media query (system preference) *\u002F\n\u002F* Không cần config gì thêm *\u002F\n\n\u002F* Để chuyển sang class-based (manual toggle): *\u002F\n@custom-variant dark (&:where(.dark, .dark *));\n",[491,9667,9668,9680,9684,9689,9694,9698,9703],{"__ignoreMap":576},[580,9669,9670,9672,9674,9676,9678],{"class":582,"line":583},[580,9671,946],{"class":945},[580,9673,949],{"class":593},[580,9675,952],{"class":611},[580,9677,608],{"class":593},[580,9679,957],{"class":593},[580,9681,9682],{"class":582,"line":590},[580,9683,963],{"emptyLinePlaceholder":962},[580,9685,9686],{"class":582,"line":620},[580,9687,9688],{"class":586},"\u002F* Mặc định: dark mode dựa trên media query (system preference) *\u002F\n",[580,9690,9691],{"class":582,"line":653},[580,9692,9693],{"class":586},"\u002F* Không cần config gì thêm *\u002F\n",[580,9695,9696],{"class":582,"line":681},[580,9697,963],{"emptyLinePlaceholder":962},[580,9699,9700],{"class":582,"line":709},[580,9701,9702],{"class":586},"\u002F* Để chuyển sang class-based (manual toggle): *\u002F\n",[580,9704,9705,9708,9711],{"class":582,"line":737},[580,9706,9707],{"class":945},"@custom-variant",[580,9709,9710],{"class":642}," dark (&:where(.dark, .dark *))",[580,9712,957],{"class":593},[553,9714,9715,9720],{"color":555,"icon":1035},[432,9716,9717],{},[436,9718,9719],{},"Media vs Class strategy:",[804,9721,9722,9728],{},[807,9723,9724,9727],{},[436,9725,9726],{},"Media (mặc định):"," Theo system preference của OS. Đơn giản, không cần JS. Nhưng user không toggle được trong app.",[807,9729,9730,9733],{},[436,9731,9732],{},"Class-based:"," Bạn control bằng JavaScript. User có thể toggle trong app, preference lưu vào localStorage. Phổ biến hơn trong thực tế.",[445,9735,9737],{"id":9736},"_33-dark-mode-color-patterns","3.3. Dark Mode Color Patterns",[432,9739,9740],{},"Khi thiết kế dark mode, không chỉ đơn giản là đảo màu. Đây là pattern phổ biến:",[450,9742,9743,9756],{},[453,9744,9745],{},[456,9746,9747,9750,9753],{},[459,9748,9749],{},"Element",[459,9751,9752],{},"Light Mode",[459,9754,9755],{},"Dark Mode",[469,9757,9758,9779,9793,9808,9826,9840],{},[456,9759,9760,9763,9771],{},[474,9761,9762],{},"Background chính",[474,9764,9765,9541,9768],{},[491,9766,9767],{},"bg-white",[491,9769,9770],{},"bg-gray-50",[474,9772,9773,9541,9776],{},[491,9774,9775],{},"bg-gray-900",[491,9777,9778],{},"bg-gray-950",[456,9780,9781,9784,9788],{},[474,9782,9783],{},"Surface (card, modal)",[474,9785,9786],{},[491,9787,9767],{},[474,9789,9790],{},[491,9791,9792],{},"bg-gray-800",[456,9794,9795,9798,9803],{},[474,9796,9797],{},"Border",[474,9799,9800],{},[491,9801,9802],{},"border-gray-200",[474,9804,9805],{},[491,9806,9807],{},"border-gray-700",[456,9809,9810,9813,9818],{},[474,9811,9812],{},"Text chính",[474,9814,9815],{},[491,9816,9817],{},"text-gray-900",[474,9819,9820,9541,9823],{},[491,9821,9822],{},"text-gray-100",[491,9824,9825],{},"text-white",[456,9827,9828,9831,9835],{},[474,9829,9830],{},"Text phụ",[474,9832,9833],{},[491,9834,2874],{},[474,9836,9837],{},[491,9838,9839],{},"text-gray-400",[456,9841,9842,9845,9849],{},[474,9843,9844],{},"Text muted",[474,9846,9847],{},[491,9848,9839],{},[474,9850,9851],{},[491,9852,9853],{},"text-gray-500",[571,9855,9857],{"className":573,"code":9856,"language":575,"meta":576,"style":576},"\u003C!-- Pattern: Card component với dark mode -->\n\u003Cdiv class=\"bg-white dark:bg-gray-800 \n            border border-gray-200 dark:border-gray-700 \n            rounded-xl p-6 shadow-sm\">\n  \u003Ch3 class=\"text-lg font-semibold text-gray-900 dark:text-white\">\n    Card Title\n  \u003C\u002Fh3>\n  \u003Cp class=\"text-gray-600 dark:text-gray-400 mt-2\">\n    Card description with muted text that adapts to dark mode.\n  \u003C\u002Fp>\n  \u003Cbutton class=\"mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg \n                 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 \n                 transition-colors\">\n    Action\n  \u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[491,9858,9859,9864,9879,9884,9893,9912,9917,9925,9944,9949,9957,9972,9977,9986,9991,9999],{"__ignoreMap":576},[580,9860,9861],{"class":582,"line":583},[580,9862,9863],{"class":586},"\u003C!-- Pattern: Card component với dark mode -->\n",[580,9865,9866,9868,9870,9872,9874,9876],{"class":582,"line":590},[580,9867,594],{"class":593},[580,9869,598],{"class":597},[580,9871,602],{"class":601},[580,9873,605],{"class":593},[580,9875,608],{"class":593},[580,9877,9878],{"class":611},"bg-white dark:bg-gray-800 \n",[580,9880,9881],{"class":582,"line":620},[580,9882,9883],{"class":611},"            border border-gray-200 dark:border-gray-700 \n",[580,9885,9886,9889,9891],{"class":582,"line":653},[580,9887,9888],{"class":611},"            rounded-xl p-6 shadow-sm",[580,9890,608],{"class":593},[580,9892,617],{"class":593},[580,9894,9895,9897,9899,9901,9903,9905,9908,9910],{"class":582,"line":681},[580,9896,623],{"class":593},[580,9898,445],{"class":597},[580,9900,602],{"class":601},[580,9902,605],{"class":593},[580,9904,608],{"class":593},[580,9906,9907],{"class":611},"text-lg font-semibold text-gray-900 dark:text-white",[580,9909,608],{"class":593},[580,9911,617],{"class":593},[580,9913,9914],{"class":582,"line":709},[580,9915,9916],{"class":642},"    Card Title\n",[580,9918,9919,9921,9923],{"class":582,"line":737},[580,9920,1215],{"class":593},[580,9922,445],{"class":597},[580,9924,617],{"class":593},[580,9926,9927,9929,9931,9933,9935,9937,9940,9942],{"class":582,"line":765},[580,9928,623],{"class":593},[580,9930,432],{"class":597},[580,9932,602],{"class":601},[580,9934,605],{"class":593},[580,9936,608],{"class":593},[580,9938,9939],{"class":611},"text-gray-600 dark:text-gray-400 mt-2",[580,9941,608],{"class":593},[580,9943,617],{"class":593},[580,9945,9946],{"class":582,"line":793},[580,9947,9948],{"class":642},"    Card description with muted text that adapts to dark mode.\n",[580,9950,9951,9953,9955],{"class":582,"line":896},[580,9952,1215],{"class":593},[580,9954,432],{"class":597},[580,9956,617],{"class":593},[580,9958,9959,9961,9963,9965,9967,9969],{"class":582,"line":1029},[580,9960,623],{"class":593},[580,9962,1177],{"class":597},[580,9964,602],{"class":601},[580,9966,605],{"class":593},[580,9968,608],{"class":593},[580,9970,9971],{"class":611},"mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg \n",[580,9973,9974],{"class":582,"line":1212},[580,9975,9976],{"class":611},"                 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 \n",[580,9978,9979,9982,9984],{"class":582,"line":1222},[580,9980,9981],{"class":611},"                 transition-colors",[580,9983,608],{"class":593},[580,9985,617],{"class":593},[580,9987,9988],{"class":582,"line":1228},[580,9989,9990],{"class":642},"    Action\n",[580,9992,9993,9995,9997],{"class":582,"line":1248},[580,9994,1215],{"class":593},[580,9996,1177],{"class":597},[580,9998,617],{"class":593},[580,10000,10001,10003,10005],{"class":582,"line":1289},[580,10002,646],{"class":593},[580,10004,598],{"class":597},[580,10006,617],{"class":593},[445,10008,10010],{"id":10009},"_34-bài-tập-5-full-dark-mode-toggle-button-javascript-logic","3.4. BÀI TẬP 5 — Full Dark Mode Toggle (Button + JavaScript Logic)",[432,10012,10013,10015],{},[436,10014,1491],{}," Trang web có dark mode toggle:",[804,10017,10018,10021,10024,10027],{},[807,10019,10020],{},"Nút toggle ở góc phải trên (icon mặt trời\u002Fmặt trăng).",[807,10022,10023],{},"Mặc định theo system preference.",[807,10025,10026],{},"User click toggle → ghi đè preference, lưu vào localStorage.",[807,10028,10029],{},"Animation mượt khi chuyển đổi.",[432,10031,10032],{},[436,10033,1508],{},[571,10035,10037],{"className":573,"code":10036,"language":575,"meta":576,"style":576},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"vi\" class=\"\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Dark Mode Toggle - Tailwind CSS v4\u003C\u002Ftitle>\n  \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tailwindcss\u002Fbrowser@4\">\u003C\u002Fscript>\n  \u003Cstyle>\n    \u002F* Custom variant cho class-based dark mode *\u002F\n    @custom-variant dark (&:where(.dark, .dark *));\n    \n    \u002F* Transition cho toàn bộ color changes *\u002F\n    *, *::before, *::after {\n      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody class=\"min-h-screen bg-gray-50 dark:bg-gray-950 transition-colors\">\n\n  \u003Cdiv class=\"max-w-4xl mx-auto px-4 py-8\">\n    \n    \u003C!-- Header với Toggle -->\n    \u003Cdiv class=\"flex items-center justify-between mb-12\">\n      \u003Ch1 class=\"text-2xl md:text-3xl font-bold text-gray-900 dark:text-white\">\n        Dark Mode Demo\n      \u003C\u002Fh1>\n      \n      \u003C!-- Toggle Button -->\n      \u003Cbutton id=\"theme-toggle\" \n              class=\"relative inline-flex h-10 w-10 items-center justify-center rounded-lg \n                     bg-white dark:bg-gray-800 \n                     border border-gray-200 dark:border-gray-700\n                     hover:bg-gray-100 dark:hover:bg-gray-700\n                     transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500\"\n              aria-label=\"Toggle dark mode\">\n        \u003C!-- Sun icon (hiện trong dark mode) -->\n        \u003Csvg id=\"sun-icon\" class=\"hidden dark:block w-5 h-5 text-yellow-500\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\"\u002F>\n        \u003C\u002Fsvg>\n        \u003C!-- Moon icon (hiện trong light mode) -->\n        \u003Csvg id=\"moon-icon\" class=\"block dark:hidden w-5 h-5 text-gray-700\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"\u002F>\n        \u003C\u002Fsvg>\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Content Cards -->\n    \u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8\">\n      \n      \u003C!-- Card 1 -->\n      \u003Cdiv class=\"bg-white dark:bg-gray-800 \n                  border border-gray-200 dark:border-gray-700 \n                  rounded-xl p-6 shadow-sm\">\n        \u003Ch2 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-3\">\n          System Preference Detection\n        \u003C\u002Fh2>\n        \u003Cp class=\"text-gray-600 dark:text-gray-400 mb-4\">\n          Trang web tự động detect system preference của bạn qua \n          \u003Ccode class=\"bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded text-sm\">prefers-color-scheme\u003C\u002Fcode>.\n        \u003C\u002Fp>\n        \u003Cdiv class=\"flex items-center gap-2 text-sm\">\n          \u003Cspan class=\"px-2 py-1 bg-green-100 dark:bg-green-900\u002F30 text-green-700 dark:text-green-400 rounded-full font-medium\">\n            Auto-detected\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 2 -->\n      \u003Cdiv class=\"bg-white dark:bg-gray-800 \n                  border border-gray-200 dark:border-gray-700 \n                  rounded-xl p-6 shadow-sm\">\n        \u003Ch2 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-3\">\n          Persistent Preference\n        \u003C\u002Fh2>\n        \u003Cp class=\"text-gray-600 dark:text-gray-400 mb-4\">\n          Lựa chọn của bạn được lưu vào \u003Ccode class=\"bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded text-sm\">localStorage\u003C\u002Fcode> \n          và khôi phục khi quay lại trang.\n        \u003C\u002Fp>\n        \u003Cdiv class=\"flex items-center gap-2 text-sm\">\n          \u003Cspan class=\"px-2 py-1 bg-blue-100 dark:bg-blue-900\u002F30 text-blue-700 dark:text-blue-400 rounded-full font-medium\">\n            localStorage\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n    \u003C\u002Fdiv>\n\n    \u003C!-- Code Block Demo -->\n    \u003Cdiv class=\"bg-white dark:bg-gray-800 \n                border border-gray-200 dark:border-gray-700 \n                rounded-xl p-6 shadow-sm\">\n      \u003Ch2 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-3\">\n        Code Preview\n      \u003C\u002Fh2>\n      \u003Cpre class=\"bg-gray-50 dark:bg-gray-900 \n                  border border-gray-200 dark:border-gray-700 \n                  rounded-lg p-4 overflow-x-auto\">\n\u003Ccode class=\"text-sm text-gray-800 dark:text-gray-300\">\u003Cspan class=\"text-purple-600 dark:text-purple-400\">function\u003C\u002Fspan> \u003Cspan class=\"text-blue-600 dark:text-blue-400\">toggleDarkMode\u003C\u002Fspan>() {\n  \u003Cspan class=\"text-gray-500 dark:text-gray-500\">\u002F\u002F Toggle class 'dark' trên \u003Chtml>\u003C\u002Fspan>\n  document.documentElement.classList.\u003Cspan class=\"text-green-600 dark:text-green-400\">toggle\u003C\u002Fspan>(\u003Cspan class=\"text-orange-600 dark:text-orange-400\">'dark'\u003C\u002Fspan>);\n  \n  \u003Cspan class=\"text-gray-500 dark:text-gray-500\">\u002F\u002F Lưu preference\u003C\u002Fspan>\n  \u003Cspan class=\"text-purple-600 dark:text-purple-400\">const\u003C\u002Fspan> isDark = document.documentElement.classList.\u003Cspan class=\"text-green-600 dark:text-green-400\">contains\u003C\u002Fspan>(\u003Cspan class=\"text-orange-600 dark:text-orange-400\">'dark'\u003C\u002Fspan>);\n  localStorage.\u003Cspan class=\"text-green-600 dark:text-green-400\">setItem\u003C\u002Fspan>(\u003Cspan class=\"text-orange-600 dark:text-orange-400\">'theme'\u003C\u002Fspan>, isDark ? \u003Cspan class=\"text-orange-600 dark:text-orange-400\">'dark'\u003C\u002Fspan> : \u003Cspan class=\"text-orange-600 dark:text-orange-400\">'light'\u003C\u002Fspan>);\n}\u003C\u002Fcode>\n      \u003C\u002Fpre>\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n  \u003Cscript>\n    const themeToggle = document.getElementById('theme-toggle');\n    const html = document.documentElement;\n\n    \u002F\u002F Hàm set theme\n    function setTheme(theme) {\n      if (theme === 'dark') {\n        html.classList.add('dark');\n      } else {\n        html.classList.remove('dark');\n      }\n      localStorage.setItem('theme', theme);\n    }\n\n    \u002F\u002F Hàm get initial theme\n    function getInitialTheme() {\n      \u002F\u002F 1. Check localStorage (user đã chọn trước đó)\n      const savedTheme = localStorage.getItem('theme');\n      if (savedTheme) return savedTheme;\n      \n      \u002F\u002F 2. Check system preference\n      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {\n        return 'dark';\n      }\n      \n      \u002F\u002F 3. Default light\n      return 'light';\n    }\n\n    \u002F\u002F Khởi tạo theme\n    const currentTheme = getInitialTheme();\n    setTheme(currentTheme);\n\n    \u002F\u002F Toggle khi click\n    themeToggle.addEventListener('click', () => {\n      const newTheme = html.classList.contains('dark') ? 'light' : 'dark';\n      setTheme(newTheme);\n    });\n\n    \u002F\u002F Lắng nghe system preference thay đổi (chỉ khi user chưa chọn thủ công)\n    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {\n      \u002F\u002F Chỉ auto-switch nếu user chưa set thủ công\n      if (!localStorage.getItem('theme')) {\n        setTheme(e.matches ? 'dark' : 'light');\n      }\n    });\n  \u003C\u002Fscript>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[491,10038,10039,10049,10074,10082,10100,10128,10145,10167,10176,10181,10190,10195,10200,10228,10267,10272,10280,10288,10307,10311,10330,10334,10339,10358,10377,10382,10390,10394,10399,10419,10431,10436,10441,10446,10453,10469,10474,10534,10582,10590,10595,10655,10704,10712,10720,10728,10732,10737,10756,10760,10764,10778,10783,10792,10811,10816,10824,10843,10848,10879,10887,10906,10925,10930,10938,10946,10954,10958,10962,10976,10980,10988,11006,11011,11019,11037,11069,11074,11082,11100,11119,11124,11132,11140,11148,11152,11160,11164,11169,11183,11188,11197,11215,11220,11228,11243,11247,11256,11329,11361,11422,11427,11454,11537,11651,11662,11670,11678,11682,11690,11694,11702,11729,11747,11751,11756,11773,11799,11824,11833,11857,11862,11888,11892,11896,11902,11915,11921,11953,11972,11977,11983,12018,12032,12037,12042,12048,12063,12068,12073,12079,12095,12106,12111,12117,12143,12193,12208,12217,12222,12228,12274,12280,12309,12344,12349,12358,12367,12372,12381],{"__ignoreMap":576},[580,10040,10041,10043,10045,10047],{"class":582,"line":583},[580,10042,1518],{"class":593},[580,10044,1521],{"class":597},[580,10046,1524],{"class":601},[580,10048,617],{"class":593},[580,10050,10051,10053,10055,10057,10059,10061,10063,10065,10067,10069,10072],{"class":582,"line":590},[580,10052,594],{"class":593},[580,10054,575],{"class":597},[580,10056,1535],{"class":601},[580,10058,605],{"class":593},[580,10060,608],{"class":593},[580,10062,1542],{"class":611},[580,10064,608],{"class":593},[580,10066,602],{"class":601},[580,10068,605],{"class":593},[580,10070,10071],{"class":593},"\"\"",[580,10073,617],{"class":593},[580,10075,10076,10078,10080],{"class":582,"line":620},[580,10077,594],{"class":593},[580,10079,1564],{"class":597},[580,10081,617],{"class":593},[580,10083,10084,10086,10088,10090,10092,10094,10096,10098],{"class":582,"line":653},[580,10085,623],{"class":593},[580,10087,1573],{"class":597},[580,10089,1576],{"class":601},[580,10091,605],{"class":593},[580,10093,608],{"class":593},[580,10095,1583],{"class":611},[580,10097,608],{"class":593},[580,10099,617],{"class":593},[580,10101,10102,10104,10106,10108,10110,10112,10114,10116,10118,10120,10122,10124,10126],{"class":582,"line":681},[580,10103,623],{"class":593},[580,10105,1573],{"class":597},[580,10107,1596],{"class":601},[580,10109,605],{"class":593},[580,10111,608],{"class":593},[580,10113,1603],{"class":611},[580,10115,608],{"class":593},[580,10117,1608],{"class":601},[580,10119,605],{"class":593},[580,10121,608],{"class":593},[580,10123,1615],{"class":611},[580,10125,608],{"class":593},[580,10127,617],{"class":593},[580,10129,10130,10132,10134,10136,10139,10141,10143],{"class":582,"line":709},[580,10131,623],{"class":593},[580,10133,1626],{"class":597},[580,10135,639],{"class":593},[580,10137,10138],{"class":642},"Dark Mode Toggle - Tailwind CSS v4",[580,10140,646],{"class":593},[580,10142,1626],{"class":597},[580,10144,617],{"class":593},[580,10146,10147,10149,10151,10153,10155,10157,10159,10161,10163,10165],{"class":582,"line":737},[580,10148,623],{"class":593},[580,10150,1644],{"class":597},[580,10152,1647],{"class":601},[580,10154,605],{"class":593},[580,10156,608],{"class":593},[580,10158,1654],{"class":611},[580,10160,608],{"class":593},[580,10162,1282],{"class":593},[580,10164,1644],{"class":597},[580,10166,617],{"class":593},[580,10168,10169,10171,10174],{"class":582,"line":765},[580,10170,623],{"class":593},[580,10172,10173],{"class":597},"style",[580,10175,617],{"class":593},[580,10177,10178],{"class":582,"line":793},[580,10179,10180],{"class":586},"    \u002F* Custom variant cho class-based dark mode *\u002F\n",[580,10182,10183,10186,10188],{"class":582,"line":896},[580,10184,10185],{"class":945},"    @custom-variant",[580,10187,9710],{"class":642},[580,10189,957],{"class":593},[580,10191,10192],{"class":582,"line":1029},[580,10193,10194],{"class":642},"    \n",[580,10196,10197],{"class":582,"line":1212},[580,10198,10199],{"class":586},"    \u002F* Transition cho toàn bộ color changes *\u002F\n",[580,10201,10202,10206,10208,10211,10214,10217,10219,10221,10223,10226],{"class":582,"line":1222},[580,10203,10205],{"class":10204},"sBMFI","    *",[580,10207,3134],{"class":593},[580,10209,10210],{"class":10204}," *",[580,10212,10213],{"class":593},"::",[580,10215,10216],{"class":601},"before",[580,10218,3134],{"class":593},[580,10220,10210],{"class":10204},[580,10222,10213],{"class":593},[580,10224,10225],{"class":601},"after",[580,10227,970],{"class":593},[580,10229,10230,10234,10236,10239,10243,10246,10248,10251,10253,10255,10257,10260,10263,10265],{"class":582,"line":1228},[580,10231,10233],{"class":10232},"sqsOY","      transition",[580,10235,933],{"class":593},[580,10237,10238],{"class":642}," background-color ",[580,10240,10242],{"class":10241},"sbssI","0.3s",[580,10244,10245],{"class":642}," ease",[580,10247,3134],{"class":593},[580,10249,10250],{"class":642}," border-color ",[580,10252,10242],{"class":10241},[580,10254,10245],{"class":642},[580,10256,3134],{"class":593},[580,10258,10259],{"class":642}," color ",[580,10261,10262],{"class":10241},"0.2s",[580,10264,10245],{"class":642},[580,10266,957],{"class":593},[580,10268,10269],{"class":582,"line":1248},[580,10270,10271],{"class":593},"    }\n",[580,10273,10274,10276,10278],{"class":582,"line":1289},[580,10275,1215],{"class":593},[580,10277,10173],{"class":597},[580,10279,617],{"class":593},[580,10281,10282,10284,10286],{"class":582,"line":1325},[580,10283,646],{"class":593},[580,10285,1564],{"class":597},[580,10287,617],{"class":593},[580,10289,10290,10292,10294,10296,10298,10300,10303,10305],{"class":582,"line":1361},[580,10291,594],{"class":593},[580,10293,1677],{"class":597},[580,10295,602],{"class":601},[580,10297,605],{"class":593},[580,10299,608],{"class":593},[580,10301,10302],{"class":611},"min-h-screen bg-gray-50 dark:bg-gray-950 transition-colors",[580,10304,608],{"class":593},[580,10306,617],{"class":593},[580,10308,10309],{"class":582,"line":1370},[580,10310,963],{"emptyLinePlaceholder":962},[580,10312,10313,10315,10317,10319,10321,10323,10326,10328],{"class":582,"line":1379},[580,10314,623],{"class":593},[580,10316,598],{"class":597},[580,10318,602],{"class":601},[580,10320,605],{"class":593},[580,10322,608],{"class":593},[580,10324,10325],{"class":611},"max-w-4xl mx-auto px-4 py-8",[580,10327,608],{"class":593},[580,10329,617],{"class":593},[580,10331,10332],{"class":582,"line":1384},[580,10333,10194],{"class":642},[580,10335,10336],{"class":582,"line":1390},[580,10337,10338],{"class":586},"    \u003C!-- Header với Toggle -->\n",[580,10340,10341,10343,10345,10347,10349,10351,10354,10356],{"class":582,"line":1411},[580,10342,1195],{"class":593},[580,10344,598],{"class":597},[580,10346,602],{"class":601},[580,10348,605],{"class":593},[580,10350,608],{"class":593},[580,10352,10353],{"class":611},"flex items-center justify-between mb-12",[580,10355,608],{"class":593},[580,10357,617],{"class":593},[580,10359,10360,10362,10364,10366,10368,10370,10373,10375],{"class":582,"line":1417},[580,10361,1743],{"class":593},[580,10363,1395],{"class":597},[580,10365,602],{"class":601},[580,10367,605],{"class":593},[580,10369,608],{"class":593},[580,10371,10372],{"class":611},"text-2xl md:text-3xl font-bold text-gray-900 dark:text-white",[580,10374,608],{"class":593},[580,10376,617],{"class":593},[580,10378,10379],{"class":582,"line":1426},[580,10380,10381],{"class":642},"        Dark Mode Demo\n",[580,10383,10384,10386,10388],{"class":582,"line":1431},[580,10385,2436],{"class":593},[580,10387,1395],{"class":597},[580,10389,617],{"class":593},[580,10391,10392],{"class":582,"line":1437},[580,10393,3780],{"class":642},[580,10395,10396],{"class":582,"line":1458},[580,10397,10398],{"class":586},"      \u003C!-- Toggle Button -->\n",[580,10400,10401,10403,10405,10407,10409,10411,10414,10416],{"class":582,"line":1476},[580,10402,1743],{"class":593},[580,10404,1177],{"class":597},[580,10406,2120],{"class":601},[580,10408,605],{"class":593},[580,10410,608],{"class":593},[580,10412,10413],{"class":611},"theme-toggle",[580,10415,608],{"class":593},[580,10417,10418],{"class":593}," \n",[580,10420,10421,10424,10426,10428],{"class":582,"line":2078},[580,10422,10423],{"class":601},"              class",[580,10425,605],{"class":593},[580,10427,608],{"class":593},[580,10429,10430],{"class":611},"relative inline-flex h-10 w-10 items-center justify-center rounded-lg \n",[580,10432,10433],{"class":582,"line":2084},[580,10434,10435],{"class":611},"                     bg-white dark:bg-gray-800 \n",[580,10437,10438],{"class":582,"line":2093},[580,10439,10440],{"class":611},"                     border border-gray-200 dark:border-gray-700\n",[580,10442,10443],{"class":582,"line":2102},[580,10444,10445],{"class":611},"                     hover:bg-gray-100 dark:hover:bg-gray-700\n",[580,10447,10448,10451],{"class":582,"line":2107},[580,10449,10450],{"class":611},"                     transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500",[580,10452,852],{"class":593},[580,10454,10455,10458,10460,10462,10465,10467],{"class":582,"line":2113},[580,10456,10457],{"class":601},"              aria-label",[580,10459,605],{"class":593},[580,10461,608],{"class":593},[580,10463,10464],{"class":611},"Toggle dark mode",[580,10466,608],{"class":593},[580,10468,617],{"class":593},[580,10470,10471],{"class":582,"line":2157},[580,10472,10473],{"class":586},"        \u003C!-- Sun icon (hiện trong dark mode) -->\n",[580,10475,10476,10478,10480,10482,10484,10486,10489,10491,10493,10495,10497,10500,10502,10504,10506,10508,10510,10512,10514,10516,10518,10520,10522,10524,10526,10528,10530,10532],{"class":582,"line":2163},[580,10477,1773],{"class":593},[580,10479,1198],{"class":597},[580,10481,2120],{"class":601},[580,10483,605],{"class":593},[580,10485,608],{"class":593},[580,10487,10488],{"class":611},"sun-icon",[580,10490,608],{"class":593},[580,10492,602],{"class":601},[580,10494,605],{"class":593},[580,10496,608],{"class":593},[580,10498,10499],{"class":611},"hidden dark:block w-5 h-5 text-yellow-500",[580,10501,608],{"class":593},[580,10503,2192],{"class":601},[580,10505,605],{"class":593},[580,10507,608],{"class":593},[580,10509,2199],{"class":611},[580,10511,608],{"class":593},[580,10513,2204],{"class":601},[580,10515,605],{"class":593},[580,10517,608],{"class":593},[580,10519,2211],{"class":611},[580,10521,608],{"class":593},[580,10523,2216],{"class":601},[580,10525,605],{"class":593},[580,10527,608],{"class":593},[580,10529,2223],{"class":611},[580,10531,608],{"class":593},[580,10533,617],{"class":593},[580,10535,10536,10538,10540,10542,10544,10546,10548,10550,10552,10554,10556,10558,10560,10562,10564,10566,10568,10570,10572,10574,10576,10578,10580],{"class":582,"line":2230},[580,10537,1793],{"class":593},[580,10539,2236],{"class":597},[580,10541,2239],{"class":601},[580,10543,605],{"class":593},[580,10545,608],{"class":593},[580,10547,2246],{"class":611},[580,10549,608],{"class":593},[580,10551,2251],{"class":601},[580,10553,605],{"class":593},[580,10555,608],{"class":593},[580,10557,2246],{"class":611},[580,10559,608],{"class":593},[580,10561,2262],{"class":601},[580,10563,605],{"class":593},[580,10565,608],{"class":593},[580,10567,2269],{"class":611},[580,10569,608],{"class":593},[580,10571,2274],{"class":601},[580,10573,605],{"class":593},[580,10575,608],{"class":593},[580,10577,8356],{"class":611},[580,10579,608],{"class":593},[580,10581,2286],{"class":593},[580,10583,10584,10586,10588],{"class":582,"line":2289},[580,10585,1863],{"class":593},[580,10587,1198],{"class":597},[580,10589,617],{"class":593},[580,10591,10592],{"class":582,"line":2298},[580,10593,10594],{"class":586},"        \u003C!-- Moon icon (hiện trong light mode) -->\n",[580,10596,10597,10599,10601,10603,10605,10607,10610,10612,10614,10616,10618,10621,10623,10625,10627,10629,10631,10633,10635,10637,10639,10641,10643,10645,10647,10649,10651,10653],{"class":582,"line":2304},[580,10598,1773],{"class":593},[580,10600,1198],{"class":597},[580,10602,2120],{"class":601},[580,10604,605],{"class":593},[580,10606,608],{"class":593},[580,10608,10609],{"class":611},"moon-icon",[580,10611,608],{"class":593},[580,10613,602],{"class":601},[580,10615,605],{"class":593},[580,10617,608],{"class":593},[580,10619,10620],{"class":611},"block dark:hidden w-5 h-5 text-gray-700",[580,10622,608],{"class":593},[580,10624,2192],{"class":601},[580,10626,605],{"class":593},[580,10628,608],{"class":593},[580,10630,2199],{"class":611},[580,10632,608],{"class":593},[580,10634,2204],{"class":601},[580,10636,605],{"class":593},[580,10638,608],{"class":593},[580,10640,2211],{"class":611},[580,10642,608],{"class":593},[580,10644,2216],{"class":601},[580,10646,605],{"class":593},[580,10648,608],{"class":593},[580,10650,2223],{"class":611},[580,10652,608],{"class":593},[580,10654,617],{"class":593},[580,10656,10657,10659,10661,10663,10665,10667,10669,10671,10673,10675,10677,10679,10681,10683,10685,10687,10689,10691,10693,10695,10697,10700,10702],{"class":582,"line":2365},[580,10658,1793],{"class":593},[580,10660,2236],{"class":597},[580,10662,2239],{"class":601},[580,10664,605],{"class":593},[580,10666,608],{"class":593},[580,10668,2246],{"class":611},[580,10670,608],{"class":593},[580,10672,2251],{"class":601},[580,10674,605],{"class":593},[580,10676,608],{"class":593},[580,10678,2246],{"class":611},[580,10680,608],{"class":593},[580,10682,2262],{"class":601},[580,10684,605],{"class":593},[580,10686,608],{"class":593},[580,10688,2269],{"class":611},[580,10690,608],{"class":593},[580,10692,2274],{"class":601},[580,10694,605],{"class":593},[580,10696,608],{"class":593},[580,10698,10699],{"class":611},"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z",[580,10701,608],{"class":593},[580,10703,2286],{"class":593},[580,10705,10706,10708,10710],{"class":582,"line":2415},[580,10707,1863],{"class":593},[580,10709,1198],{"class":597},[580,10711,617],{"class":593},[580,10713,10714,10716,10718],{"class":582,"line":2424},[580,10715,2436],{"class":593},[580,10717,1177],{"class":597},[580,10719,617],{"class":593},[580,10721,10722,10724,10726],{"class":582,"line":2433},[580,10723,2719],{"class":593},[580,10725,598],{"class":597},[580,10727,617],{"class":593},[580,10729,10730],{"class":582,"line":2443},[580,10731,963],{"emptyLinePlaceholder":962},[580,10733,10734],{"class":582,"line":2448},[580,10735,10736],{"class":586},"    \u003C!-- Content Cards -->\n",[580,10738,10739,10741,10743,10745,10747,10749,10752,10754],{"class":582,"line":2454},[580,10740,1195],{"class":593},[580,10742,598],{"class":597},[580,10744,602],{"class":601},[580,10746,605],{"class":593},[580,10748,608],{"class":593},[580,10750,10751],{"class":611},"grid grid-cols-1 md:grid-cols-2 gap-6 mb-8",[580,10753,608],{"class":593},[580,10755,617],{"class":593},[580,10757,10758],{"class":582,"line":2485},[580,10759,3780],{"class":642},[580,10761,10762],{"class":582,"line":2505},[580,10763,3785],{"class":586},[580,10765,10766,10768,10770,10772,10774,10776],{"class":582,"line":2543},[580,10767,1743],{"class":593},[580,10769,598],{"class":597},[580,10771,602],{"class":601},[580,10773,605],{"class":593},[580,10775,608],{"class":593},[580,10777,9878],{"class":611},[580,10779,10780],{"class":582,"line":2580},[580,10781,10782],{"class":611},"                  border border-gray-200 dark:border-gray-700 \n",[580,10784,10785,10788,10790],{"class":582,"line":2617},[580,10786,10787],{"class":611},"                  rounded-xl p-6 shadow-sm",[580,10789,608],{"class":593},[580,10791,617],{"class":593},[580,10793,10794,10796,10798,10800,10802,10804,10807,10809],{"class":582,"line":2654},[580,10795,1773],{"class":593},[580,10797,427],{"class":597},[580,10799,602],{"class":601},[580,10801,605],{"class":593},[580,10803,608],{"class":593},[580,10805,10806],{"class":611},"text-lg font-semibold text-gray-900 dark:text-white mb-3",[580,10808,608],{"class":593},[580,10810,617],{"class":593},[580,10812,10813],{"class":582,"line":2684},[580,10814,10815],{"class":642},"          System Preference Detection\n",[580,10817,10818,10820,10822],{"class":582,"line":2689},[580,10819,1863],{"class":593},[580,10821,427],{"class":597},[580,10823,617],{"class":593},[580,10825,10826,10828,10830,10832,10834,10836,10839,10841],{"class":582,"line":2698},[580,10827,1773],{"class":593},[580,10829,432],{"class":597},[580,10831,602],{"class":601},[580,10833,605],{"class":593},[580,10835,608],{"class":593},[580,10837,10838],{"class":611},"text-gray-600 dark:text-gray-400 mb-4",[580,10840,608],{"class":593},[580,10842,617],{"class":593},[580,10844,10845],{"class":582,"line":2707},[580,10846,10847],{"class":642},"          Trang web tự động detect system preference của bạn qua \n",[580,10849,10850,10852,10854,10856,10858,10860,10863,10865,10867,10870,10872,10874,10876],{"class":582,"line":2716},[580,10851,1793],{"class":593},[580,10853,491],{"class":597},[580,10855,602],{"class":601},[580,10857,605],{"class":593},[580,10859,608],{"class":593},[580,10861,10862],{"class":611},"bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded text-sm",[580,10864,608],{"class":593},[580,10866,639],{"class":593},[580,10868,10869],{"class":642},"prefers-color-scheme",[580,10871,646],{"class":593},[580,10873,491],{"class":597},[580,10875,639],{"class":593},[580,10877,10878],{"class":642},".\n",[580,10880,10881,10883,10885],{"class":582,"line":2726},[580,10882,1863],{"class":593},[580,10884,432],{"class":597},[580,10886,617],{"class":593},[580,10888,10889,10891,10893,10895,10897,10899,10902,10904],{"class":582,"line":2735},[580,10890,1773],{"class":593},[580,10892,598],{"class":597},[580,10894,602],{"class":601},[580,10896,605],{"class":593},[580,10898,608],{"class":593},[580,10900,10901],{"class":611},"flex items-center gap-2 text-sm",[580,10903,608],{"class":593},[580,10905,617],{"class":593},[580,10907,10908,10910,10912,10914,10916,10918,10921,10923],{"class":582,"line":2740},[580,10909,1793],{"class":593},[580,10911,580],{"class":597},[580,10913,602],{"class":601},[580,10915,605],{"class":593},[580,10917,608],{"class":593},[580,10919,10920],{"class":611},"px-2 py-1 bg-green-100 dark:bg-green-900\u002F30 text-green-700 dark:text-green-400 rounded-full font-medium",[580,10922,608],{"class":593},[580,10924,617],{"class":593},[580,10926,10927],{"class":582,"line":2746},[580,10928,10929],{"class":642},"            Auto-detected\n",[580,10931,10932,10934,10936],{"class":582,"line":2770},[580,10933,1854],{"class":593},[580,10935,580],{"class":597},[580,10937,617],{"class":593},[580,10939,10940,10942,10944],{"class":582,"line":2775},[580,10941,1863],{"class":593},[580,10943,598],{"class":597},[580,10945,617],{"class":593},[580,10947,10948,10950,10952],{"class":582,"line":2781},[580,10949,2436],{"class":593},[580,10951,598],{"class":597},[580,10953,617],{"class":593},[580,10955,10956],{"class":582,"line":2801},[580,10957,963],{"emptyLinePlaceholder":962},[580,10959,10960],{"class":582,"line":2832},[580,10961,4010],{"class":586},[580,10963,10964,10966,10968,10970,10972,10974],{"class":582,"line":2861},[580,10965,1743],{"class":593},[580,10967,598],{"class":597},[580,10969,602],{"class":601},[580,10971,605],{"class":593},[580,10973,608],{"class":593},[580,10975,9878],{"class":611},[580,10977,10978],{"class":582,"line":2890},[580,10979,10782],{"class":611},[580,10981,10982,10984,10986],{"class":582,"line":2899},[580,10983,10787],{"class":611},[580,10985,608],{"class":593},[580,10987,617],{"class":593},[580,10989,10990,10992,10994,10996,10998,11000,11002,11004],{"class":582,"line":2929},[580,10991,1773],{"class":593},[580,10993,427],{"class":597},[580,10995,602],{"class":601},[580,10997,605],{"class":593},[580,10999,608],{"class":593},[580,11001,10806],{"class":611},[580,11003,608],{"class":593},[580,11005,617],{"class":593},[580,11007,11008],{"class":582,"line":2957},[580,11009,11010],{"class":642},"          Persistent Preference\n",[580,11012,11013,11015,11017],{"class":582,"line":2966},[580,11014,1863],{"class":593},[580,11016,427],{"class":597},[580,11018,617],{"class":593},[580,11020,11021,11023,11025,11027,11029,11031,11033,11035],{"class":582,"line":2975},[580,11022,1773],{"class":593},[580,11024,432],{"class":597},[580,11026,602],{"class":601},[580,11028,605],{"class":593},[580,11030,608],{"class":593},[580,11032,10838],{"class":611},[580,11034,608],{"class":593},[580,11036,617],{"class":593},[580,11038,11039,11042,11044,11046,11048,11050,11052,11054,11056,11058,11061,11063,11065,11067],{"class":582,"line":2980},[580,11040,11041],{"class":642},"          Lựa chọn của bạn được lưu vào ",[580,11043,594],{"class":593},[580,11045,491],{"class":597},[580,11047,602],{"class":601},[580,11049,605],{"class":593},[580,11051,608],{"class":593},[580,11053,10862],{"class":611},[580,11055,608],{"class":593},[580,11057,639],{"class":593},[580,11059,11060],{"class":642},"localStorage",[580,11062,646],{"class":593},[580,11064,491],{"class":597},[580,11066,639],{"class":593},[580,11068,10418],{"class":642},[580,11070,11071],{"class":582,"line":2989},[580,11072,11073],{"class":642},"          và khôi phục khi quay lại trang.\n",[580,11075,11076,11078,11080],{"class":582,"line":3025},[580,11077,1863],{"class":593},[580,11079,432],{"class":597},[580,11081,617],{"class":593},[580,11083,11084,11086,11088,11090,11092,11094,11096,11098],{"class":582,"line":3053},[580,11085,1773],{"class":593},[580,11087,598],{"class":597},[580,11089,602],{"class":601},[580,11091,605],{"class":593},[580,11093,608],{"class":593},[580,11095,10901],{"class":611},[580,11097,608],{"class":593},[580,11099,617],{"class":593},[580,11101,11102,11104,11106,11108,11110,11112,11115,11117],{"class":582,"line":3081},[580,11103,1793],{"class":593},[580,11105,580],{"class":597},[580,11107,602],{"class":601},[580,11109,605],{"class":593},[580,11111,608],{"class":593},[580,11113,11114],{"class":611},"px-2 py-1 bg-blue-100 dark:bg-blue-900\u002F30 text-blue-700 dark:text-blue-400 rounded-full font-medium",[580,11116,608],{"class":593},[580,11118,617],{"class":593},[580,11120,11121],{"class":582,"line":3109},[580,11122,11123],{"class":642},"            localStorage\n",[580,11125,11126,11128,11130],{"class":582,"line":3114},[580,11127,1854],{"class":593},[580,11129,580],{"class":597},[580,11131,617],{"class":593},[580,11133,11134,11136,11138],{"class":582,"line":3145},[580,11135,1863],{"class":593},[580,11137,598],{"class":597},[580,11139,617],{"class":593},[580,11141,11142,11144,11146],{"class":582,"line":3174},[580,11143,2436],{"class":593},[580,11145,598],{"class":597},[580,11147,617],{"class":593},[580,11149,11150],{"class":582,"line":3200},[580,11151,963],{"emptyLinePlaceholder":962},[580,11153,11154,11156,11158],{"class":582,"line":3226},[580,11155,2719],{"class":593},[580,11157,598],{"class":597},[580,11159,617],{"class":593},[580,11161,11162],{"class":582,"line":3236},[580,11163,963],{"emptyLinePlaceholder":962},[580,11165,11166],{"class":582,"line":3241},[580,11167,11168],{"class":586},"    \u003C!-- Code Block Demo -->\n",[580,11170,11171,11173,11175,11177,11179,11181],{"class":582,"line":3247},[580,11172,1195],{"class":593},[580,11174,598],{"class":597},[580,11176,602],{"class":601},[580,11178,605],{"class":593},[580,11180,608],{"class":593},[580,11182,9878],{"class":611},[580,11184,11185],{"class":582,"line":3283},[580,11186,11187],{"class":611},"                border border-gray-200 dark:border-gray-700 \n",[580,11189,11190,11193,11195],{"class":582,"line":3309},[580,11191,11192],{"class":611},"                rounded-xl p-6 shadow-sm",[580,11194,608],{"class":593},[580,11196,617],{"class":593},[580,11198,11199,11201,11203,11205,11207,11209,11211,11213],{"class":582,"line":3336},[580,11200,1743],{"class":593},[580,11202,427],{"class":597},[580,11204,602],{"class":601},[580,11206,605],{"class":593},[580,11208,608],{"class":593},[580,11210,10806],{"class":611},[580,11212,608],{"class":593},[580,11214,617],{"class":593},[580,11216,11217],{"class":582,"line":3363},[580,11218,11219],{"class":642},"        Code Preview\n",[580,11221,11222,11224,11226],{"class":582,"line":3389},[580,11223,2436],{"class":593},[580,11225,427],{"class":597},[580,11227,617],{"class":593},[580,11229,11230,11232,11234,11236,11238,11240],{"class":582,"line":3399},[580,11231,1743],{"class":593},[580,11233,571],{"class":597},[580,11235,602],{"class":601},[580,11237,605],{"class":593},[580,11239,608],{"class":593},[580,11241,11242],{"class":611},"bg-gray-50 dark:bg-gray-900 \n",[580,11244,11245],{"class":582,"line":3408},[580,11246,10782],{"class":611},[580,11248,11249,11252,11254],{"class":582,"line":3417},[580,11250,11251],{"class":611},"                  rounded-lg p-4 overflow-x-auto",[580,11253,608],{"class":593},[580,11255,617],{"class":593},[580,11257,11258,11260,11262,11264,11266,11268,11271,11273,11275,11277,11279,11281,11283,11286,11288,11290,11293,11295,11297,11299,11302,11304,11306,11308,11310,11313,11315,11317,11320,11322,11324,11326],{"class":582,"line":3422},[580,11259,594],{"class":593},[580,11261,491],{"class":597},[580,11263,602],{"class":601},[580,11265,605],{"class":593},[580,11267,608],{"class":593},[580,11269,11270],{"class":611},"text-sm text-gray-800 dark:text-gray-300",[580,11272,608],{"class":593},[580,11274,1255],{"class":593},[580,11276,580],{"class":597},[580,11278,602],{"class":601},[580,11280,605],{"class":593},[580,11282,608],{"class":593},[580,11284,11285],{"class":611},"text-purple-600 dark:text-purple-400",[580,11287,608],{"class":593},[580,11289,639],{"class":593},[580,11291,11292],{"class":642},"function",[580,11294,646],{"class":593},[580,11296,580],{"class":597},[580,11298,639],{"class":593},[580,11300,11301],{"class":593}," \u003C",[580,11303,580],{"class":597},[580,11305,602],{"class":601},[580,11307,605],{"class":593},[580,11309,608],{"class":593},[580,11311,11312],{"class":611},"text-blue-600 dark:text-blue-400",[580,11314,608],{"class":593},[580,11316,639],{"class":593},[580,11318,11319],{"class":642},"toggleDarkMode",[580,11321,646],{"class":593},[580,11323,580],{"class":597},[580,11325,639],{"class":593},[580,11327,11328],{"class":642},"() {\n",[580,11330,11331,11333,11335,11337,11339,11341,11344,11346,11348,11351,11353,11355,11357,11359],{"class":582,"line":3431},[580,11332,623],{"class":593},[580,11334,580],{"class":597},[580,11336,602],{"class":601},[580,11338,605],{"class":593},[580,11340,608],{"class":593},[580,11342,11343],{"class":611},"text-gray-500 dark:text-gray-500",[580,11345,608],{"class":593},[580,11347,639],{"class":593},[580,11349,11350],{"class":642},"\u002F\u002F Toggle class 'dark' trên ",[580,11352,594],{"class":593},[580,11354,575],{"class":597},[580,11356,1282],{"class":593},[580,11358,580],{"class":597},[580,11360,617],{"class":593},[580,11362,11363,11366,11368,11370,11372,11374,11376,11379,11381,11383,11385,11387,11389,11391,11393,11395,11397,11399,11401,11403,11406,11408,11410,11413,11415,11417,11419],{"class":582,"line":5345},[580,11364,11365],{"class":642},"  document.documentElement.classList.",[580,11367,594],{"class":593},[580,11369,580],{"class":597},[580,11371,602],{"class":601},[580,11373,605],{"class":593},[580,11375,608],{"class":593},[580,11377,11378],{"class":611},"text-green-600 dark:text-green-400",[580,11380,608],{"class":593},[580,11382,639],{"class":593},[580,11384,3158],{"class":642},[580,11386,646],{"class":593},[580,11388,580],{"class":597},[580,11390,639],{"class":593},[580,11392,3010],{"class":642},[580,11394,594],{"class":593},[580,11396,580],{"class":597},[580,11398,602],{"class":601},[580,11400,605],{"class":593},[580,11402,608],{"class":593},[580,11404,11405],{"class":611},"text-orange-600 dark:text-orange-400",[580,11407,608],{"class":593},[580,11409,639],{"class":593},[580,11411,11412],{"class":642},"'dark'",[580,11414,646],{"class":593},[580,11416,580],{"class":597},[580,11418,639],{"class":593},[580,11420,11421],{"class":642},");\n",[580,11423,11424],{"class":582,"line":5364},[580,11425,11426],{"class":642},"  \n",[580,11428,11429,11431,11433,11435,11437,11439,11441,11443,11445,11448,11450,11452],{"class":582,"line":5384},[580,11430,623],{"class":593},[580,11432,580],{"class":597},[580,11434,602],{"class":601},[580,11436,605],{"class":593},[580,11438,608],{"class":593},[580,11440,11343],{"class":611},[580,11442,608],{"class":593},[580,11444,639],{"class":593},[580,11446,11447],{"class":642},"\u002F\u002F Lưu preference",[580,11449,646],{"class":593},[580,11451,580],{"class":597},[580,11453,617],{"class":593},[580,11455,11456,11458,11460,11462,11464,11466,11468,11470,11472,11475,11477,11479,11481,11484,11486,11488,11490,11492,11494,11496,11498,11500,11503,11505,11507,11509,11511,11513,11515,11517,11519,11521,11523,11525,11527,11529,11531,11533,11535],{"class":582,"line":5434},[580,11457,623],{"class":593},[580,11459,580],{"class":597},[580,11461,602],{"class":601},[580,11463,605],{"class":593},[580,11465,608],{"class":593},[580,11467,11285],{"class":611},[580,11469,608],{"class":593},[580,11471,639],{"class":593},[580,11473,11474],{"class":642},"const",[580,11476,646],{"class":593},[580,11478,580],{"class":597},[580,11480,639],{"class":593},[580,11482,11483],{"class":642}," isDark = document.documentElement.classList.",[580,11485,594],{"class":593},[580,11487,580],{"class":597},[580,11489,602],{"class":601},[580,11491,605],{"class":593},[580,11493,608],{"class":593},[580,11495,11378],{"class":611},[580,11497,608],{"class":593},[580,11499,639],{"class":593},[580,11501,11502],{"class":642},"contains",[580,11504,646],{"class":593},[580,11506,580],{"class":597},[580,11508,639],{"class":593},[580,11510,3010],{"class":642},[580,11512,594],{"class":593},[580,11514,580],{"class":597},[580,11516,602],{"class":601},[580,11518,605],{"class":593},[580,11520,608],{"class":593},[580,11522,11405],{"class":611},[580,11524,608],{"class":593},[580,11526,639],{"class":593},[580,11528,11412],{"class":642},[580,11530,646],{"class":593},[580,11532,580],{"class":597},[580,11534,639],{"class":593},[580,11536,11421],{"class":642},[580,11538,11539,11542,11544,11546,11548,11550,11552,11554,11556,11558,11561,11563,11565,11567,11569,11571,11573,11575,11577,11579,11581,11583,11585,11588,11590,11592,11594,11597,11599,11601,11603,11605,11607,11609,11611,11613,11615,11617,11619,11621,11624,11626,11628,11630,11632,11634,11636,11638,11640,11643,11645,11647,11649],{"class":582,"line":5484},[580,11540,11541],{"class":642},"  localStorage.",[580,11543,594],{"class":593},[580,11545,580],{"class":597},[580,11547,602],{"class":601},[580,11549,605],{"class":593},[580,11551,608],{"class":593},[580,11553,11378],{"class":611},[580,11555,608],{"class":593},[580,11557,639],{"class":593},[580,11559,11560],{"class":642},"setItem",[580,11562,646],{"class":593},[580,11564,580],{"class":597},[580,11566,639],{"class":593},[580,11568,3010],{"class":642},[580,11570,594],{"class":593},[580,11572,580],{"class":597},[580,11574,602],{"class":601},[580,11576,605],{"class":593},[580,11578,608],{"class":593},[580,11580,11405],{"class":611},[580,11582,608],{"class":593},[580,11584,639],{"class":593},[580,11586,11587],{"class":642},"'theme'",[580,11589,646],{"class":593},[580,11591,580],{"class":597},[580,11593,639],{"class":593},[580,11595,11596],{"class":642},", isDark ? ",[580,11598,594],{"class":593},[580,11600,580],{"class":597},[580,11602,602],{"class":601},[580,11604,605],{"class":593},[580,11606,608],{"class":593},[580,11608,11405],{"class":611},[580,11610,608],{"class":593},[580,11612,639],{"class":593},[580,11614,11412],{"class":642},[580,11616,646],{"class":593},[580,11618,580],{"class":597},[580,11620,639],{"class":593},[580,11622,11623],{"class":642}," : ",[580,11625,594],{"class":593},[580,11627,580],{"class":597},[580,11629,602],{"class":601},[580,11631,605],{"class":593},[580,11633,608],{"class":593},[580,11635,11405],{"class":611},[580,11637,608],{"class":593},[580,11639,639],{"class":593},[580,11641,11642],{"class":642},"'light'",[580,11644,646],{"class":593},[580,11646,580],{"class":597},[580,11648,639],{"class":593},[580,11650,11421],{"class":642},[580,11652,11653,11656,11658,11660],{"class":582,"line":5493},[580,11654,11655],{"class":642},"}",[580,11657,646],{"class":593},[580,11659,491],{"class":597},[580,11661,617],{"class":593},[580,11663,11664,11666,11668],{"class":582,"line":5502},[580,11665,2436],{"class":593},[580,11667,571],{"class":597},[580,11669,617],{"class":593},[580,11671,11672,11674,11676],{"class":582,"line":5530},[580,11673,2719],{"class":593},[580,11675,598],{"class":597},[580,11677,617],{"class":593},[580,11679,11680],{"class":582,"line":5558},[580,11681,963],{"emptyLinePlaceholder":962},[580,11683,11684,11686,11688],{"class":582,"line":5567},[580,11685,1215],{"class":593},[580,11687,598],{"class":597},[580,11689,617],{"class":593},[580,11691,11692],{"class":582,"line":5572},[580,11693,963],{"emptyLinePlaceholder":962},[580,11695,11696,11698,11700],{"class":582,"line":5581},[580,11697,623],{"class":593},[580,11699,1644],{"class":597},[580,11701,617],{"class":593},[580,11703,11704,11706,11709,11711,11713,11715,11717,11719,11721,11723,11725,11727],{"class":582,"line":5586},[580,11705,2992],{"class":601},[580,11707,11708],{"class":642}," themeToggle ",[580,11710,605],{"class":593},[580,11712,3000],{"class":642},[580,11714,3003],{"class":593},[580,11716,3007],{"class":3006},[580,11718,3010],{"class":642},[580,11720,3013],{"class":593},[580,11722,10413],{"class":611},[580,11724,3013],{"class":593},[580,11726,3020],{"class":642},[580,11728,957],{"class":593},[580,11730,11731,11733,11736,11738,11740,11742,11745],{"class":582,"line":5592},[580,11732,2992],{"class":601},[580,11734,11735],{"class":642}," html ",[580,11737,605],{"class":593},[580,11739,3000],{"class":642},[580,11741,3003],{"class":593},[580,11743,11744],{"class":642},"documentElement",[580,11746,957],{"class":593},[580,11748,11749],{"class":582,"line":5612},[580,11750,963],{"emptyLinePlaceholder":962},[580,11752,11753],{"class":582,"line":5641},[580,11754,11755],{"class":586},"    \u002F\u002F Hàm set theme\n",[580,11757,11758,11761,11764,11766,11769,11771],{"class":582,"line":5670},[580,11759,11760],{"class":601},"    function",[580,11762,11763],{"class":3006}," setTheme",[580,11765,3010],{"class":593},[580,11767,11768],{"class":3275},"theme",[580,11770,3020],{"class":593},[580,11772,970],{"class":593},[580,11774,11775,11778,11781,11783,11786,11789,11791,11793,11796],{"class":582,"line":5699},[580,11776,11777],{"class":945},"      if",[580,11779,11780],{"class":597}," (",[580,11782,11768],{"class":642},[580,11784,11785],{"class":593}," ===",[580,11787,11788],{"class":593}," '",[580,11790,9547],{"class":611},[580,11792,3013],{"class":593},[580,11794,11795],{"class":597},") ",[580,11797,11798],{"class":593},"{\n",[580,11800,11801,11804,11806,11808,11810,11812,11814,11816,11818,11820,11822],{"class":582,"line":5728},[580,11802,11803],{"class":642},"        html",[580,11805,3003],{"class":593},[580,11807,3153],{"class":642},[580,11809,3003],{"class":593},[580,11811,3321],{"class":3006},[580,11813,3010],{"class":597},[580,11815,3013],{"class":593},[580,11817,9547],{"class":611},[580,11819,3013],{"class":593},[580,11821,3020],{"class":597},[580,11823,957],{"class":593},[580,11825,11826,11828,11831],{"class":582,"line":5757},[580,11827,3392],{"class":593},[580,11829,11830],{"class":945}," else",[580,11832,970],{"class":593},[580,11834,11835,11837,11839,11841,11843,11845,11847,11849,11851,11853,11855],{"class":582,"line":5786},[580,11836,11803],{"class":642},[580,11838,3003],{"class":593},[580,11840,3153],{"class":642},[580,11842,3003],{"class":593},[580,11844,3348],{"class":3006},[580,11846,3010],{"class":597},[580,11848,3013],{"class":593},[580,11850,9547],{"class":611},[580,11852,3013],{"class":593},[580,11854,3020],{"class":597},[580,11856,957],{"class":593},[580,11858,11859],{"class":582,"line":5795},[580,11860,11861],{"class":593},"      }\n",[580,11863,11864,11867,11869,11871,11873,11875,11877,11879,11881,11884,11886],{"class":582,"line":5804},[580,11865,11866],{"class":642},"      localStorage",[580,11868,3003],{"class":593},[580,11870,11560],{"class":3006},[580,11872,3010],{"class":597},[580,11874,3013],{"class":593},[580,11876,11768],{"class":611},[580,11878,3013],{"class":593},[580,11880,3134],{"class":593},[580,11882,11883],{"class":642}," theme",[580,11885,3020],{"class":597},[580,11887,957],{"class":593},[580,11889,11890],{"class":582,"line":5809},[580,11891,10271],{"class":593},[580,11893,11894],{"class":582,"line":5818},[580,11895,963],{"emptyLinePlaceholder":962},[580,11897,11899],{"class":582,"line":11898},125,[580,11900,11901],{"class":586},"    \u002F\u002F Hàm get initial theme\n",[580,11903,11905,11907,11910,11913],{"class":582,"line":11904},126,[580,11906,11760],{"class":601},[580,11908,11909],{"class":3006}," getInitialTheme",[580,11911,11912],{"class":593},"()",[580,11914,970],{"class":593},[580,11916,11918],{"class":582,"line":11917},127,[580,11919,11920],{"class":586},"      \u002F\u002F 1. Check localStorage (user đã chọn trước đó)\n",[580,11922,11924,11927,11930,11933,11936,11938,11941,11943,11945,11947,11949,11951],{"class":582,"line":11923},128,[580,11925,11926],{"class":601},"      const",[580,11928,11929],{"class":642}," savedTheme",[580,11931,11932],{"class":593}," =",[580,11934,11935],{"class":642}," localStorage",[580,11937,3003],{"class":593},[580,11939,11940],{"class":3006},"getItem",[580,11942,3010],{"class":597},[580,11944,3013],{"class":593},[580,11946,11768],{"class":611},[580,11948,3013],{"class":593},[580,11950,3020],{"class":597},[580,11952,957],{"class":593},[580,11954,11956,11958,11960,11963,11965,11968,11970],{"class":582,"line":11955},129,[580,11957,11777],{"class":945},[580,11959,11780],{"class":597},[580,11961,11962],{"class":642},"savedTheme",[580,11964,11795],{"class":597},[580,11966,11967],{"class":945},"return",[580,11969,11929],{"class":642},[580,11971,957],{"class":593},[580,11973,11975],{"class":582,"line":11974},130,[580,11976,3780],{"class":597},[580,11978,11980],{"class":582,"line":11979},131,[580,11981,11982],{"class":586},"      \u002F\u002F 2. Check system preference\n",[580,11984,11986,11988,11990,11993,11995,11998,12000,12002,12005,12007,12009,12011,12014,12016],{"class":582,"line":11985},132,[580,11987,11777],{"class":945},[580,11989,11780],{"class":597},[580,11991,11992],{"class":642},"window",[580,11994,3003],{"class":593},[580,11996,11997],{"class":3006},"matchMedia",[580,11999,3010],{"class":597},[580,12001,3013],{"class":593},[580,12003,12004],{"class":611},"(prefers-color-scheme: dark)",[580,12006,3013],{"class":593},[580,12008,3020],{"class":597},[580,12010,3003],{"class":593},[580,12012,12013],{"class":642},"matches",[580,12015,11795],{"class":597},[580,12017,11798],{"class":593},[580,12019,12021,12024,12026,12028,12030],{"class":582,"line":12020},133,[580,12022,12023],{"class":945},"        return",[580,12025,11788],{"class":593},[580,12027,9547],{"class":611},[580,12029,3013],{"class":593},[580,12031,957],{"class":593},[580,12033,12035],{"class":582,"line":12034},134,[580,12036,11861],{"class":593},[580,12038,12040],{"class":582,"line":12039},135,[580,12041,3780],{"class":597},[580,12043,12045],{"class":582,"line":12044},136,[580,12046,12047],{"class":586},"      \u002F\u002F 3. Default light\n",[580,12049,12051,12054,12056,12059,12061],{"class":582,"line":12050},137,[580,12052,12053],{"class":945},"      return",[580,12055,11788],{"class":593},[580,12057,12058],{"class":611},"light",[580,12060,3013],{"class":593},[580,12062,957],{"class":593},[580,12064,12066],{"class":582,"line":12065},138,[580,12067,10271],{"class":593},[580,12069,12071],{"class":582,"line":12070},139,[580,12072,963],{"emptyLinePlaceholder":962},[580,12074,12076],{"class":582,"line":12075},140,[580,12077,12078],{"class":586},"    \u002F\u002F Khởi tạo theme\n",[580,12080,12082,12084,12087,12089,12091,12093],{"class":582,"line":12081},141,[580,12083,2992],{"class":601},[580,12085,12086],{"class":642}," currentTheme ",[580,12088,605],{"class":593},[580,12090,11909],{"class":3006},[580,12092,11912],{"class":642},[580,12094,957],{"class":593},[580,12096,12098,12101,12104],{"class":582,"line":12097},142,[580,12099,12100],{"class":3006},"    setTheme",[580,12102,12103],{"class":642},"(currentTheme)",[580,12105,957],{"class":593},[580,12107,12109],{"class":582,"line":12108},143,[580,12110,963],{"emptyLinePlaceholder":962},[580,12112,12114],{"class":582,"line":12113},144,[580,12115,12116],{"class":586},"    \u002F\u002F Toggle khi click\n",[580,12118,12120,12123,12125,12127,12129,12131,12133,12135,12137,12139,12141],{"class":582,"line":12119},145,[580,12121,12122],{"class":642},"    themeToggle",[580,12124,3003],{"class":593},[580,12126,3122],{"class":3006},[580,12128,3010],{"class":642},[580,12130,3013],{"class":593},[580,12132,3129],{"class":611},[580,12134,3013],{"class":593},[580,12136,3134],{"class":593},[580,12138,3137],{"class":593},[580,12140,3140],{"class":601},[580,12142,970],{"class":593},[580,12144,12146,12148,12151,12153,12155,12157,12159,12161,12163,12165,12167,12169,12171,12173,12176,12178,12180,12182,12185,12187,12189,12191],{"class":582,"line":12145},146,[580,12147,11926],{"class":601},[580,12149,12150],{"class":642}," newTheme",[580,12152,11932],{"class":593},[580,12154,1524],{"class":642},[580,12156,3003],{"class":593},[580,12158,3153],{"class":642},[580,12160,3003],{"class":593},[580,12162,11502],{"class":3006},[580,12164,3010],{"class":597},[580,12166,3013],{"class":593},[580,12168,9547],{"class":611},[580,12170,3013],{"class":593},[580,12172,11795],{"class":597},[580,12174,12175],{"class":593},"?",[580,12177,11788],{"class":593},[580,12179,12058],{"class":611},[580,12181,3013],{"class":593},[580,12183,12184],{"class":593}," :",[580,12186,11788],{"class":593},[580,12188,9547],{"class":611},[580,12190,3013],{"class":593},[580,12192,957],{"class":593},[580,12194,12196,12199,12201,12204,12206],{"class":582,"line":12195},147,[580,12197,12198],{"class":3006},"      setTheme",[580,12200,3010],{"class":597},[580,12202,12203],{"class":642},"newTheme",[580,12205,3020],{"class":597},[580,12207,957],{"class":593},[580,12209,12211,12213,12215],{"class":582,"line":12210},148,[580,12212,3229],{"class":593},[580,12214,3020],{"class":642},[580,12216,957],{"class":593},[580,12218,12220],{"class":582,"line":12219},149,[580,12221,963],{"emptyLinePlaceholder":962},[580,12223,12225],{"class":582,"line":12224},150,[580,12226,12227],{"class":586},"    \u002F\u002F Lắng nghe system preference thay đổi (chỉ khi user chưa chọn thủ công)\n",[580,12229,12231,12234,12236,12238,12240,12242,12244,12246,12248,12250,12252,12254,12256,12259,12261,12263,12265,12268,12270,12272],{"class":582,"line":12230},151,[580,12232,12233],{"class":642},"    window",[580,12235,3003],{"class":593},[580,12237,11997],{"class":3006},[580,12239,3010],{"class":642},[580,12241,3013],{"class":593},[580,12243,12004],{"class":611},[580,12245,3013],{"class":593},[580,12247,3020],{"class":642},[580,12249,3003],{"class":593},[580,12251,3122],{"class":3006},[580,12253,3010],{"class":642},[580,12255,3013],{"class":593},[580,12257,12258],{"class":611},"change",[580,12260,3013],{"class":593},[580,12262,3134],{"class":593},[580,12264,11780],{"class":593},[580,12266,12267],{"class":3275},"e",[580,12269,3020],{"class":593},[580,12271,3140],{"class":601},[580,12273,970],{"class":593},[580,12275,12277],{"class":582,"line":12276},152,[580,12278,12279],{"class":586},"      \u002F\u002F Chỉ auto-switch nếu user chưa set thủ công\n",[580,12281,12283,12285,12287,12290,12292,12294,12296,12298,12300,12302,12304,12307],{"class":582,"line":12282},153,[580,12284,11777],{"class":945},[580,12286,11780],{"class":597},[580,12288,12289],{"class":593},"!",[580,12291,11060],{"class":642},[580,12293,3003],{"class":593},[580,12295,11940],{"class":3006},[580,12297,3010],{"class":597},[580,12299,3013],{"class":593},[580,12301,11768],{"class":611},[580,12303,3013],{"class":593},[580,12305,12306],{"class":597},")) ",[580,12308,11798],{"class":593},[580,12310,12312,12315,12317,12319,12321,12323,12326,12328,12330,12332,12334,12336,12338,12340,12342],{"class":582,"line":12311},154,[580,12313,12314],{"class":3006},"        setTheme",[580,12316,3010],{"class":597},[580,12318,12267],{"class":642},[580,12320,3003],{"class":593},[580,12322,12013],{"class":642},[580,12324,12325],{"class":593}," ?",[580,12327,11788],{"class":593},[580,12329,9547],{"class":611},[580,12331,3013],{"class":593},[580,12333,12184],{"class":593},[580,12335,11788],{"class":593},[580,12337,12058],{"class":611},[580,12339,3013],{"class":593},[580,12341,3020],{"class":597},[580,12343,957],{"class":593},[580,12345,12347],{"class":582,"line":12346},155,[580,12348,11861],{"class":593},[580,12350,12352,12354,12356],{"class":582,"line":12351},156,[580,12353,3229],{"class":593},[580,12355,3020],{"class":642},[580,12357,957],{"class":593},[580,12359,12361,12363,12365],{"class":582,"line":12360},157,[580,12362,1215],{"class":593},[580,12364,1644],{"class":597},[580,12366,617],{"class":593},[580,12368,12370],{"class":582,"line":12369},158,[580,12371,963],{"emptyLinePlaceholder":962},[580,12373,12375,12377,12379],{"class":582,"line":12374},159,[580,12376,646],{"class":593},[580,12378,1677],{"class":597},[580,12380,617],{"class":593},[580,12382,12384,12386,12388],{"class":582,"line":12383},160,[580,12385,646],{"class":593},[580,12387,575],{"class":597},[580,12389,617],{"class":593},[432,12391,12392],{},[436,12393,3442],{},[804,12395,12396,12402,12409,12419,12424,12430],{},[807,12397,12398,12401],{},[491,12399,12400],{},"@custom-variant dark (&:where(.dark, .dark *));",": Cấu hình dark mode dạng class-based qua CSS (v4 style).",[807,12403,12404,12405,12408],{},"Transition trên ",[491,12406,12407],{},"*",": Tất cả color changes có animation mượt 0.3s.",[807,12410,12411,12414,12415,12418],{},[491,12412,12413],{},"hidden dark:block"," \u002F ",[491,12416,12417],{},"block dark:hidden",": Icon mặt trời\u002Fmặt trăng tự đổi.",[807,12420,12421,12423],{},[491,12422,11060],{},": Lưu preference để lần sau vào trang vẫn giữ.",[807,12425,12426,12429],{},[491,12427,12428],{},"matchMedia('(prefers-color-scheme: dark)')",": Detect system preference làm default.",[807,12431,12432,12435],{},[491,12433,12434],{},"matchMedia(...).addEventListener",": Lắng nghe khi user đổi system preference (ví dụ: macOS auto-switch buổi tối).",[445,12437,12439],{"id":12438},"_35-bài-tập-6-card-component-với-lightdark-variants-inline","3.5. BÀI TẬP 6 — Card Component với Light\u002FDark Variants Inline",[432,12441,12442,12444],{},[436,12443,1491],{}," Tạo card component mà mọi style cho cả light và dark mode đều được định nghĩa inline trong HTML, không cần CSS riêng.",[432,12446,12447],{},[436,12448,1508],{},[571,12450,12452],{"className":573,"code":12451,"language":575,"meta":576,"style":576},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"vi\" class=\"dark\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Card Dark Mode Inline - Tailwind CSS v4\u003C\u002Ftitle>\n  \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tailwindcss\u002Fbrowser@4\">\u003C\u002Fscript>\n  \u003Cstyle>\n    @custom-variant dark (&:where(.dark, .dark *));\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody class=\"min-h-screen bg-gray-100 dark:bg-gray-950 p-4 md:p-8 transition-colors\">\n\n  \u003Cdiv class=\"max-w-5xl mx-auto\">\n    \n    \u003Cdiv class=\"flex items-center justify-between mb-8\">\n      \u003Ch1 class=\"text-2xl md:text-3xl font-bold text-gray-900 dark:text-white\">\n        Card Components — Light & Dark Inline\n      \u003C\u002Fh1>\n      \u003Cbutton onclick=\"document.documentElement.classList.toggle('dark')\" \n              class=\"px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors\">\n        Toggle Theme\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Card Grid -->\n    \u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n      \n      \u003C!-- Card 1: Default -->\n      \u003Cdiv class=\"group bg-white dark:bg-gray-800 \n                  border border-gray-200 dark:border-gray-700 \n                  rounded-2xl overflow-hidden\n                  shadow-sm hover:shadow-lg dark:shadow-gray-900\u002F50\n                  transition-all duration-300\">\n        \u003C!-- Image -->\n        \u003Cdiv class=\"h-48 bg-gradient-to-br from-blue-400 to-blue-600 \n                    dark:from-blue-600 dark:to-blue-900 \n                    flex items-center justify-center\">\n          \u003Csvg class=\"w-16 h-16 text-white\u002F80\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003C!-- Content -->\n        \u003Cdiv class=\"p-5\">\n          \u003Cdiv class=\"flex items-center gap-2 mb-3\">\n            \u003Cspan class=\"text-xs font-medium px-2 py-1 rounded-full \n                         bg-blue-100 text-blue-700 \n                         dark:bg-blue-900\u002F40 dark:text-blue-300\">\n              Feature\n            \u003C\u002Fspan>\n            \u003Cspan class=\"text-xs text-gray-400 dark:text-gray-500\">5 min read\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n          \u003Ch3 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-2 \n                     group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors\">\n            Lightning Fast Builds\n          \u003C\u002Fh3>\n          \u003Cp class=\"text-gray-600 dark:text-gray-400 text-sm leading-relaxed\">\n            Oxide Engine viết bằng Rust giúp build nhanh gấp 5x. Incremental build gần như tức thì trong development.\n          \u003C\u002Fp>\n          \u003Cdiv class=\"flex items-center justify-between mt-4 pt-4 \n                      border-t border-gray-100 dark:border-gray-700\">\n            \u003Cdiv class=\"flex items-center gap-2\">\n              \u003Cdiv class=\"w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-600\">\u003C\u002Fdiv>\n              \u003Cspan class=\"text-sm text-gray-700 dark:text-gray-300\">Adam Wathan\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003Cbutton class=\"text-sm font-medium text-blue-600 dark:text-blue-400 \n                           hover:text-blue-700 dark:hover:text-blue-300 transition-colors\">\n              Read more →\n            \u003C\u002Fbutton>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 2: With stats -->\n      \u003Cdiv class=\"group bg-white dark:bg-gray-800 \n                  border border-gray-200 dark:border-gray-700 \n                  rounded-2xl overflow-hidden\n                  shadow-sm hover:shadow-lg dark:shadow-gray-900\u002F50\n                  transition-all duration-300\">\n        \u003Cdiv class=\"h-48 bg-gradient-to-br from-purple-400 to-pink-500 \n                    dark:from-purple-700 dark:to-pink-800 \n                    flex items-center justify-center\">\n          \u003Csvg class=\"w-16 h-16 text-white\u002F80\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"p-5\">\n          \u003Ch3 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-3\">\n            Analytics Dashboard\n          \u003C\u002Fh3>\n          \u003Cdiv class=\"grid grid-cols-2 gap-3 mb-4\">\n            \u003Cdiv class=\"bg-gray-50 dark:bg-gray-900 rounded-lg p-3 text-center\">\n              \u003Cp class=\"text-2xl font-bold text-gray-900 dark:text-white\">12.5K\u003C\u002Fp>\n              \u003Cp class=\"text-xs text-gray-500 dark:text-gray-400\">Users\u003C\u002Fp>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"bg-gray-50 dark:bg-gray-900 rounded-lg p-3 text-center\">\n              \u003Cp class=\"text-2xl font-bold text-gray-900 dark:text-white\">89%\u003C\u002Fp>\n              \u003Cp class=\"text-xs text-gray-500 dark:text-gray-400\">Satisfaction\u003C\u002Fp>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n          \u003Cbutton class=\"w-full py-2 bg-purple-600 dark:bg-purple-500 text-white rounded-lg \n                         hover:bg-purple-700 dark:hover:bg-purple-600 \n                         transition-colors text-sm font-medium\">\n            View Dashboard\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 3: Minimal -->\n      \u003Cdiv class=\"group bg-white dark:bg-gray-800 \n                  border border-gray-200 dark:border-gray-700 \n                  rounded-2xl overflow-hidden\n                  shadow-sm hover:shadow-lg dark:shadow-gray-900\u002F50\n                  transition-all duration-300\">\n        \u003Cdiv class=\"h-48 bg-gradient-to-br from-green-400 to-teal-500 \n                    dark:from-green-700 dark:to-teal-800 \n                    flex items-center justify-center\">\n          \u003Csvg class=\"w-16 h-16 text-white\u002F80\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"1.5\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"\u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"p-5\">\n          \u003Ch3 class=\"text-lg font-semibold text-gray-900 dark:text-white mb-2\">\n            CSS-first Configuration\n          \u003C\u002Fh3>\n          \u003Cp class=\"text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-4\">\n            Không còn tailwind.config.js. Mọi thứ được cấu hình trực tiếp trong CSS với @theme và @utility.\n          \u003C\u002Fp>\n          \u003Cdiv class=\"flex items-center gap-1 text-yellow-500\">\n            \u003Csvg class=\"w-4 h-4 fill-current\" viewBox=\"0 0 20 20\">\u003Cpath d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\u002F>\u003C\u002Fsvg>\n            \u003Csvg class=\"w-4 h-4 fill-current\" viewBox=\"0 0 20 20\">\u003Cpath d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\u002F>\u003C\u002Fsvg>\n            \u003Csvg class=\"w-4 h-4 fill-current\" viewBox=\"0 0 20 20\">\u003Cpath d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\u002F>\u003C\u002Fsvg>\n            \u003Csvg class=\"w-4 h-4 fill-current\" viewBox=\"0 0 20 20\">\u003Cpath d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\u002F>\u003C\u002Fsvg>\n            \u003Csvg class=\"w-4 h-4 fill-current text-gray-300 dark:text-gray-600\" viewBox=\"0 0 20 20\">\u003Cpath d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"\u002F>\u003C\u002Fsvg>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[491,12453,12454,12464,12492,12500,12518,12546,12563,12585,12593,12601,12609,12617,12636,12640,12659,12663,12682,12700,12705,12713,12755,12770,12775,12783,12791,12795,12800,12818,12822,12827,12842,12846,12851,12856,12865,12870,12885,12890,12899,12948,12996,13004,13012,13017,13036,13055,13070,13075,13084,13089,13097,13125,13133,13148,13157,13162,13170,13189,13194,13202,13217,13226,13245,13268,13296,13304,13319,13328,13333,13341,13349,13357,13365,13369,13374,13388,13392,13396,13400,13408,13423,13428,13436,13484,13533,13541,13549,13567,13585,13590,13598,13617,13636,13664,13692,13700,13718,13745,13772,13780,13788,13803,13808,13817,13822,13830,13838,13846,13850,13855,13869,13873,13877,13881,13889,13904,13909,13917,13965,14013,14021,14029,14047,14066,14071,14079,14098,14103,14111,14130,14180,14226,14272,14318,14365,14373,14381,14389,14393,14401,14409,14413,14421],{"__ignoreMap":576},[580,12455,12456,12458,12460,12462],{"class":582,"line":583},[580,12457,1518],{"class":593},[580,12459,1521],{"class":597},[580,12461,1524],{"class":601},[580,12463,617],{"class":593},[580,12465,12466,12468,12470,12472,12474,12476,12478,12480,12482,12484,12486,12488,12490],{"class":582,"line":590},[580,12467,594],{"class":593},[580,12469,575],{"class":597},[580,12471,1535],{"class":601},[580,12473,605],{"class":593},[580,12475,608],{"class":593},[580,12477,1542],{"class":611},[580,12479,608],{"class":593},[580,12481,602],{"class":601},[580,12483,605],{"class":593},[580,12485,608],{"class":593},[580,12487,9547],{"class":611},[580,12489,608],{"class":593},[580,12491,617],{"class":593},[580,12493,12494,12496,12498],{"class":582,"line":620},[580,12495,594],{"class":593},[580,12497,1564],{"class":597},[580,12499,617],{"class":593},[580,12501,12502,12504,12506,12508,12510,12512,12514,12516],{"class":582,"line":653},[580,12503,623],{"class":593},[580,12505,1573],{"class":597},[580,12507,1576],{"class":601},[580,12509,605],{"class":593},[580,12511,608],{"class":593},[580,12513,1583],{"class":611},[580,12515,608],{"class":593},[580,12517,617],{"class":593},[580,12519,12520,12522,12524,12526,12528,12530,12532,12534,12536,12538,12540,12542,12544],{"class":582,"line":681},[580,12521,623],{"class":593},[580,12523,1573],{"class":597},[580,12525,1596],{"class":601},[580,12527,605],{"class":593},[580,12529,608],{"class":593},[580,12531,1603],{"class":611},[580,12533,608],{"class":593},[580,12535,1608],{"class":601},[580,12537,605],{"class":593},[580,12539,608],{"class":593},[580,12541,1615],{"class":611},[580,12543,608],{"class":593},[580,12545,617],{"class":593},[580,12547,12548,12550,12552,12554,12557,12559,12561],{"class":582,"line":709},[580,12549,623],{"class":593},[580,12551,1626],{"class":597},[580,12553,639],{"class":593},[580,12555,12556],{"class":642},"Card Dark Mode Inline - Tailwind CSS v4",[580,12558,646],{"class":593},[580,12560,1626],{"class":597},[580,12562,617],{"class":593},[580,12564,12565,12567,12569,12571,12573,12575,12577,12579,12581,12583],{"class":582,"line":737},[580,12566,623],{"class":593},[580,12568,1644],{"class":597},[580,12570,1647],{"class":601},[580,12572,605],{"class":593},[580,12574,608],{"class":593},[580,12576,1654],{"class":611},[580,12578,608],{"class":593},[580,12580,1282],{"class":593},[580,12582,1644],{"class":597},[580,12584,617],{"class":593},[580,12586,12587,12589,12591],{"class":582,"line":765},[580,12588,623],{"class":593},[580,12590,10173],{"class":597},[580,12592,617],{"class":593},[580,12594,12595,12597,12599],{"class":582,"line":793},[580,12596,10185],{"class":945},[580,12598,9710],{"class":642},[580,12600,957],{"class":593},[580,12602,12603,12605,12607],{"class":582,"line":896},[580,12604,1215],{"class":593},[580,12606,10173],{"class":597},[580,12608,617],{"class":593},[580,12610,12611,12613,12615],{"class":582,"line":1029},[580,12612,646],{"class":593},[580,12614,1564],{"class":597},[580,12616,617],{"class":593},[580,12618,12619,12621,12623,12625,12627,12629,12632,12634],{"class":582,"line":1212},[580,12620,594],{"class":593},[580,12622,1677],{"class":597},[580,12624,602],{"class":601},[580,12626,605],{"class":593},[580,12628,608],{"class":593},[580,12630,12631],{"class":611},"min-h-screen bg-gray-100 dark:bg-gray-950 p-4 md:p-8 transition-colors",[580,12633,608],{"class":593},[580,12635,617],{"class":593},[580,12637,12638],{"class":582,"line":1222},[580,12639,963],{"emptyLinePlaceholder":962},[580,12641,12642,12644,12646,12648,12650,12652,12655,12657],{"class":582,"line":1228},[580,12643,623],{"class":593},[580,12645,598],{"class":597},[580,12647,602],{"class":601},[580,12649,605],{"class":593},[580,12651,608],{"class":593},[580,12653,12654],{"class":611},"max-w-5xl mx-auto",[580,12656,608],{"class":593},[580,12658,617],{"class":593},[580,12660,12661],{"class":582,"line":1248},[580,12662,10194],{"class":642},[580,12664,12665,12667,12669,12671,12673,12675,12678,12680],{"class":582,"line":1289},[580,12666,1195],{"class":593},[580,12668,598],{"class":597},[580,12670,602],{"class":601},[580,12672,605],{"class":593},[580,12674,608],{"class":593},[580,12676,12677],{"class":611},"flex items-center justify-between mb-8",[580,12679,608],{"class":593},[580,12681,617],{"class":593},[580,12683,12684,12686,12688,12690,12692,12694,12696,12698],{"class":582,"line":1325},[580,12685,1743],{"class":593},[580,12687,1395],{"class":597},[580,12689,602],{"class":601},[580,12691,605],{"class":593},[580,12693,608],{"class":593},[580,12695,10372],{"class":611},[580,12697,608],{"class":593},[580,12699,617],{"class":593},[580,12701,12702],{"class":582,"line":1361},[580,12703,12704],{"class":642},"        Card Components — Light & Dark Inline\n",[580,12706,12707,12709,12711],{"class":582,"line":1370},[580,12708,2436],{"class":593},[580,12710,1395],{"class":597},[580,12712,617],{"class":593},[580,12714,12715,12717,12719,12722,12724,12726,12729,12731,12733,12735,12737,12739,12741,12743,12745,12747,12749,12751,12753],{"class":582,"line":1379},[580,12716,1743],{"class":593},[580,12718,1177],{"class":597},[580,12720,12721],{"class":601}," onclick",[580,12723,605],{"class":593},[580,12725,608],{"class":593},[580,12727,12728],{"class":642},"document",[580,12730,3003],{"class":593},[580,12732,11744],{"class":642},[580,12734,3003],{"class":593},[580,12736,3153],{"class":642},[580,12738,3003],{"class":593},[580,12740,3158],{"class":3006},[580,12742,3010],{"class":611},[580,12744,3013],{"class":593},[580,12746,9547],{"class":611},[580,12748,3013],{"class":593},[580,12750,3020],{"class":611},[580,12752,608],{"class":593},[580,12754,10418],{"class":593},[580,12756,12757,12759,12761,12763,12766,12768],{"class":582,"line":1384},[580,12758,10423],{"class":601},[580,12760,605],{"class":593},[580,12762,608],{"class":593},[580,12764,12765],{"class":611},"px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg text-sm font-medium hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors",[580,12767,608],{"class":593},[580,12769,617],{"class":593},[580,12771,12772],{"class":582,"line":1390},[580,12773,12774],{"class":642},"        Toggle Theme\n",[580,12776,12777,12779,12781],{"class":582,"line":1411},[580,12778,2436],{"class":593},[580,12780,1177],{"class":597},[580,12782,617],{"class":593},[580,12784,12785,12787,12789],{"class":582,"line":1417},[580,12786,2719],{"class":593},[580,12788,598],{"class":597},[580,12790,617],{"class":593},[580,12792,12793],{"class":582,"line":1426},[580,12794,963],{"emptyLinePlaceholder":962},[580,12796,12797],{"class":582,"line":1431},[580,12798,12799],{"class":586},"    \u003C!-- Card Grid -->\n",[580,12801,12802,12804,12806,12808,12810,12812,12814,12816],{"class":582,"line":1437},[580,12803,1195],{"class":593},[580,12805,598],{"class":597},[580,12807,602],{"class":601},[580,12809,605],{"class":593},[580,12811,608],{"class":593},[580,12813,612],{"class":611},[580,12815,608],{"class":593},[580,12817,617],{"class":593},[580,12819,12820],{"class":582,"line":1458},[580,12821,3780],{"class":642},[580,12823,12824],{"class":582,"line":1476},[580,12825,12826],{"class":586},"      \u003C!-- Card 1: Default -->\n",[580,12828,12829,12831,12833,12835,12837,12839],{"class":582,"line":2078},[580,12830,1743],{"class":593},[580,12832,598],{"class":597},[580,12834,602],{"class":601},[580,12836,605],{"class":593},[580,12838,608],{"class":593},[580,12840,12841],{"class":611},"group bg-white dark:bg-gray-800 \n",[580,12843,12844],{"class":582,"line":2084},[580,12845,10782],{"class":611},[580,12847,12848],{"class":582,"line":2093},[580,12849,12850],{"class":611},"                  rounded-2xl overflow-hidden\n",[580,12852,12853],{"class":582,"line":2102},[580,12854,12855],{"class":611},"                  shadow-sm hover:shadow-lg dark:shadow-gray-900\u002F50\n",[580,12857,12858,12861,12863],{"class":582,"line":2107},[580,12859,12860],{"class":611},"                  transition-all duration-300",[580,12862,608],{"class":593},[580,12864,617],{"class":593},[580,12866,12867],{"class":582,"line":2113},[580,12868,12869],{"class":586},"        \u003C!-- Image -->\n",[580,12871,12872,12874,12876,12878,12880,12882],{"class":582,"line":2157},[580,12873,1773],{"class":593},[580,12875,598],{"class":597},[580,12877,602],{"class":601},[580,12879,605],{"class":593},[580,12881,608],{"class":593},[580,12883,12884],{"class":611},"h-48 bg-gradient-to-br from-blue-400 to-blue-600 \n",[580,12886,12887],{"class":582,"line":2163},[580,12888,12889],{"class":611},"                    dark:from-blue-600 dark:to-blue-900 \n",[580,12891,12892,12895,12897],{"class":582,"line":2230},[580,12893,12894],{"class":611},"                    flex items-center justify-center",[580,12896,608],{"class":593},[580,12898,617],{"class":593},[580,12900,12901,12903,12905,12907,12909,12911,12914,12916,12918,12920,12922,12924,12926,12928,12930,12932,12934,12936,12938,12940,12942,12944,12946],{"class":582,"line":2289},[580,12902,1793],{"class":593},[580,12904,1198],{"class":597},[580,12906,602],{"class":601},[580,12908,605],{"class":593},[580,12910,608],{"class":593},[580,12912,12913],{"class":611},"w-16 h-16 text-white\u002F80",[580,12915,608],{"class":593},[580,12917,2192],{"class":601},[580,12919,605],{"class":593},[580,12921,608],{"class":593},[580,12923,2199],{"class":611},[580,12925,608],{"class":593},[580,12927,2204],{"class":601},[580,12929,605],{"class":593},[580,12931,608],{"class":593},[580,12933,2211],{"class":611},[580,12935,608],{"class":593},[580,12937,2216],{"class":601},[580,12939,605],{"class":593},[580,12941,608],{"class":593},[580,12943,2223],{"class":611},[580,12945,608],{"class":593},[580,12947,617],{"class":593},[580,12949,12950,12952,12954,12956,12958,12960,12962,12964,12966,12968,12970,12972,12974,12976,12978,12980,12982,12984,12986,12988,12990,12992,12994],{"class":582,"line":2298},[580,12951,2233],{"class":593},[580,12953,2236],{"class":597},[580,12955,2239],{"class":601},[580,12957,605],{"class":593},[580,12959,608],{"class":593},[580,12961,2246],{"class":611},[580,12963,608],{"class":593},[580,12965,2251],{"class":601},[580,12967,605],{"class":593},[580,12969,608],{"class":593},[580,12971,2246],{"class":611},[580,12973,608],{"class":593},[580,12975,2262],{"class":601},[580,12977,605],{"class":593},[580,12979,608],{"class":593},[580,12981,6761],{"class":611},[580,12983,608],{"class":593},[580,12985,2274],{"class":601},[580,12987,605],{"class":593},[580,12989,608],{"class":593},[580,12991,3917],{"class":611},[580,12993,608],{"class":593},[580,12995,2286],{"class":593},[580,12997,12998,13000,13002],{"class":582,"line":2304},[580,12999,1854],{"class":593},[580,13001,1198],{"class":597},[580,13003,617],{"class":593},[580,13005,13006,13008,13010],{"class":582,"line":2365},[580,13007,1863],{"class":593},[580,13009,598],{"class":597},[580,13011,617],{"class":593},[580,13013,13014],{"class":582,"line":2415},[580,13015,13016],{"class":586},"        \u003C!-- Content -->\n",[580,13018,13019,13021,13023,13025,13027,13029,13032,13034],{"class":582,"line":2424},[580,13020,1773],{"class":593},[580,13022,598],{"class":597},[580,13024,602],{"class":601},[580,13026,605],{"class":593},[580,13028,608],{"class":593},[580,13030,13031],{"class":611},"p-5",[580,13033,608],{"class":593},[580,13035,617],{"class":593},[580,13037,13038,13040,13042,13044,13046,13048,13051,13053],{"class":582,"line":2433},[580,13039,1793],{"class":593},[580,13041,598],{"class":597},[580,13043,602],{"class":601},[580,13045,605],{"class":593},[580,13047,608],{"class":593},[580,13049,13050],{"class":611},"flex items-center gap-2 mb-3",[580,13052,608],{"class":593},[580,13054,617],{"class":593},[580,13056,13057,13059,13061,13063,13065,13067],{"class":582,"line":2443},[580,13058,2233],{"class":593},[580,13060,580],{"class":597},[580,13062,602],{"class":601},[580,13064,605],{"class":593},[580,13066,608],{"class":593},[580,13068,13069],{"class":611},"text-xs font-medium px-2 py-1 rounded-full \n",[580,13071,13072],{"class":582,"line":2448},[580,13073,13074],{"class":611},"                         bg-blue-100 text-blue-700 \n",[580,13076,13077,13080,13082],{"class":582,"line":2454},[580,13078,13079],{"class":611},"                         dark:bg-blue-900\u002F40 dark:text-blue-300",[580,13081,608],{"class":593},[580,13083,617],{"class":593},[580,13085,13086],{"class":582,"line":2485},[580,13087,13088],{"class":642},"              Feature\n",[580,13090,13091,13093,13095],{"class":582,"line":2505},[580,13092,6781],{"class":593},[580,13094,580],{"class":597},[580,13096,617],{"class":593},[580,13098,13099,13101,13103,13105,13107,13109,13112,13114,13116,13119,13121,13123],{"class":582,"line":2543},[580,13100,2233],{"class":593},[580,13102,580],{"class":597},[580,13104,602],{"class":601},[580,13106,605],{"class":593},[580,13108,608],{"class":593},[580,13110,13111],{"class":611},"text-xs text-gray-400 dark:text-gray-500",[580,13113,608],{"class":593},[580,13115,639],{"class":593},[580,13117,13118],{"class":642},"5 min read",[580,13120,646],{"class":593},[580,13122,580],{"class":597},[580,13124,617],{"class":593},[580,13126,13127,13129,13131],{"class":582,"line":2580},[580,13128,1854],{"class":593},[580,13130,598],{"class":597},[580,13132,617],{"class":593},[580,13134,13135,13137,13139,13141,13143,13145],{"class":582,"line":2617},[580,13136,1793],{"class":593},[580,13138,445],{"class":597},[580,13140,602],{"class":601},[580,13142,605],{"class":593},[580,13144,608],{"class":593},[580,13146,13147],{"class":611},"text-lg font-semibold text-gray-900 dark:text-white mb-2 \n",[580,13149,13150,13153,13155],{"class":582,"line":2654},[580,13151,13152],{"class":611},"                     group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors",[580,13154,608],{"class":593},[580,13156,617],{"class":593},[580,13158,13159],{"class":582,"line":2684},[580,13160,13161],{"class":642},"            Lightning Fast Builds\n",[580,13163,13164,13166,13168],{"class":582,"line":2689},[580,13165,1854],{"class":593},[580,13167,445],{"class":597},[580,13169,617],{"class":593},[580,13171,13172,13174,13176,13178,13180,13182,13185,13187],{"class":582,"line":2698},[580,13173,1793],{"class":593},[580,13175,432],{"class":597},[580,13177,602],{"class":601},[580,13179,605],{"class":593},[580,13181,608],{"class":593},[580,13183,13184],{"class":611},"text-gray-600 dark:text-gray-400 text-sm leading-relaxed",[580,13186,608],{"class":593},[580,13188,617],{"class":593},[580,13190,13191],{"class":582,"line":2707},[580,13192,13193],{"class":642},"            Oxide Engine viết bằng Rust giúp build nhanh gấp 5x. Incremental build gần như tức thì trong development.\n",[580,13195,13196,13198,13200],{"class":582,"line":2716},[580,13197,1854],{"class":593},[580,13199,432],{"class":597},[580,13201,617],{"class":593},[580,13203,13204,13206,13208,13210,13212,13214],{"class":582,"line":2726},[580,13205,1793],{"class":593},[580,13207,598],{"class":597},[580,13209,602],{"class":601},[580,13211,605],{"class":593},[580,13213,608],{"class":593},[580,13215,13216],{"class":611},"flex items-center justify-between mt-4 pt-4 \n",[580,13218,13219,13222,13224],{"class":582,"line":2735},[580,13220,13221],{"class":611},"                      border-t border-gray-100 dark:border-gray-700",[580,13223,608],{"class":593},[580,13225,617],{"class":593},[580,13227,13228,13230,13232,13234,13236,13238,13241,13243],{"class":582,"line":2740},[580,13229,2233],{"class":593},[580,13231,598],{"class":597},[580,13233,602],{"class":601},[580,13235,605],{"class":593},[580,13237,608],{"class":593},[580,13239,13240],{"class":611},"flex items-center gap-2",[580,13242,608],{"class":593},[580,13244,617],{"class":593},[580,13246,13247,13249,13251,13253,13255,13257,13260,13262,13264,13266],{"class":582,"line":2746},[580,13248,6730],{"class":593},[580,13250,598],{"class":597},[580,13252,602],{"class":601},[580,13254,605],{"class":593},[580,13256,608],{"class":593},[580,13258,13259],{"class":611},"w-8 h-8 rounded-full bg-gray-200 dark:bg-gray-600",[580,13261,608],{"class":593},[580,13263,1282],{"class":593},[580,13265,598],{"class":597},[580,13267,617],{"class":593},[580,13269,13270,13272,13274,13276,13278,13280,13283,13285,13287,13290,13292,13294],{"class":582,"line":2770},[580,13271,6730],{"class":593},[580,13273,580],{"class":597},[580,13275,602],{"class":601},[580,13277,605],{"class":593},[580,13279,608],{"class":593},[580,13281,13282],{"class":611},"text-sm text-gray-700 dark:text-gray-300",[580,13284,608],{"class":593},[580,13286,639],{"class":593},[580,13288,13289],{"class":642},"Adam Wathan",[580,13291,646],{"class":593},[580,13293,580],{"class":597},[580,13295,617],{"class":593},[580,13297,13298,13300,13302],{"class":582,"line":2775},[580,13299,6781],{"class":593},[580,13301,598],{"class":597},[580,13303,617],{"class":593},[580,13305,13306,13308,13310,13312,13314,13316],{"class":582,"line":2781},[580,13307,2233],{"class":593},[580,13309,1177],{"class":597},[580,13311,602],{"class":601},[580,13313,605],{"class":593},[580,13315,608],{"class":593},[580,13317,13318],{"class":611},"text-sm font-medium text-blue-600 dark:text-blue-400 \n",[580,13320,13321,13324,13326],{"class":582,"line":2801},[580,13322,13323],{"class":611},"                           hover:text-blue-700 dark:hover:text-blue-300 transition-colors",[580,13325,608],{"class":593},[580,13327,617],{"class":593},[580,13329,13330],{"class":582,"line":2832},[580,13331,13332],{"class":642},"              Read more →\n",[580,13334,13335,13337,13339],{"class":582,"line":2861},[580,13336,6781],{"class":593},[580,13338,1177],{"class":597},[580,13340,617],{"class":593},[580,13342,13343,13345,13347],{"class":582,"line":2890},[580,13344,1854],{"class":593},[580,13346,598],{"class":597},[580,13348,617],{"class":593},[580,13350,13351,13353,13355],{"class":582,"line":2899},[580,13352,1863],{"class":593},[580,13354,598],{"class":597},[580,13356,617],{"class":593},[580,13358,13359,13361,13363],{"class":582,"line":2929},[580,13360,2436],{"class":593},[580,13362,598],{"class":597},[580,13364,617],{"class":593},[580,13366,13367],{"class":582,"line":2957},[580,13368,963],{"emptyLinePlaceholder":962},[580,13370,13371],{"class":582,"line":2966},[580,13372,13373],{"class":586},"      \u003C!-- Card 2: With stats -->\n",[580,13375,13376,13378,13380,13382,13384,13386],{"class":582,"line":2975},[580,13377,1743],{"class":593},[580,13379,598],{"class":597},[580,13381,602],{"class":601},[580,13383,605],{"class":593},[580,13385,608],{"class":593},[580,13387,12841],{"class":611},[580,13389,13390],{"class":582,"line":2980},[580,13391,10782],{"class":611},[580,13393,13394],{"class":582,"line":2989},[580,13395,12850],{"class":611},[580,13397,13398],{"class":582,"line":3025},[580,13399,12855],{"class":611},[580,13401,13402,13404,13406],{"class":582,"line":3053},[580,13403,12860],{"class":611},[580,13405,608],{"class":593},[580,13407,617],{"class":593},[580,13409,13410,13412,13414,13416,13418,13420],{"class":582,"line":3081},[580,13411,1773],{"class":593},[580,13413,598],{"class":597},[580,13415,602],{"class":601},[580,13417,605],{"class":593},[580,13419,608],{"class":593},[580,13421,13422],{"class":611},"h-48 bg-gradient-to-br from-purple-400 to-pink-500 \n",[580,13424,13425],{"class":582,"line":3109},[580,13426,13427],{"class":611},"                    dark:from-purple-700 dark:to-pink-800 \n",[580,13429,13430,13432,13434],{"class":582,"line":3114},[580,13431,12894],{"class":611},[580,13433,608],{"class":593},[580,13435,617],{"class":593},[580,13437,13438,13440,13442,13444,13446,13448,13450,13452,13454,13456,13458,13460,13462,13464,13466,13468,13470,13472,13474,13476,13478,13480,13482],{"class":582,"line":3145},[580,13439,1793],{"class":593},[580,13441,1198],{"class":597},[580,13443,602],{"class":601},[580,13445,605],{"class":593},[580,13447,608],{"class":593},[580,13449,12913],{"class":611},[580,13451,608],{"class":593},[580,13453,2192],{"class":601},[580,13455,605],{"class":593},[580,13457,608],{"class":593},[580,13459,2199],{"class":611},[580,13461,608],{"class":593},[580,13463,2204],{"class":601},[580,13465,605],{"class":593},[580,13467,608],{"class":593},[580,13469,2211],{"class":611},[580,13471,608],{"class":593},[580,13473,2216],{"class":601},[580,13475,605],{"class":593},[580,13477,608],{"class":593},[580,13479,2223],{"class":611},[580,13481,608],{"class":593},[580,13483,617],{"class":593},[580,13485,13486,13488,13490,13492,13494,13496,13498,13500,13502,13504,13506,13508,13510,13512,13514,13516,13518,13520,13522,13524,13526,13529,13531],{"class":582,"line":3174},[580,13487,2233],{"class":593},[580,13489,2236],{"class":597},[580,13491,2239],{"class":601},[580,13493,605],{"class":593},[580,13495,608],{"class":593},[580,13497,2246],{"class":611},[580,13499,608],{"class":593},[580,13501,2251],{"class":601},[580,13503,605],{"class":593},[580,13505,608],{"class":593},[580,13507,2246],{"class":611},[580,13509,608],{"class":593},[580,13511,2262],{"class":601},[580,13513,605],{"class":593},[580,13515,608],{"class":593},[580,13517,6761],{"class":611},[580,13519,608],{"class":593},[580,13521,2274],{"class":601},[580,13523,605],{"class":593},[580,13525,608],{"class":593},[580,13527,13528],{"class":611},"M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z",[580,13530,608],{"class":593},[580,13532,2286],{"class":593},[580,13534,13535,13537,13539],{"class":582,"line":3200},[580,13536,1854],{"class":593},[580,13538,1198],{"class":597},[580,13540,617],{"class":593},[580,13542,13543,13545,13547],{"class":582,"line":3226},[580,13544,1863],{"class":593},[580,13546,598],{"class":597},[580,13548,617],{"class":593},[580,13550,13551,13553,13555,13557,13559,13561,13563,13565],{"class":582,"line":3236},[580,13552,1773],{"class":593},[580,13554,598],{"class":597},[580,13556,602],{"class":601},[580,13558,605],{"class":593},[580,13560,608],{"class":593},[580,13562,13031],{"class":611},[580,13564,608],{"class":593},[580,13566,617],{"class":593},[580,13568,13569,13571,13573,13575,13577,13579,13581,13583],{"class":582,"line":3241},[580,13570,1793],{"class":593},[580,13572,445],{"class":597},[580,13574,602],{"class":601},[580,13576,605],{"class":593},[580,13578,608],{"class":593},[580,13580,10806],{"class":611},[580,13582,608],{"class":593},[580,13584,617],{"class":593},[580,13586,13587],{"class":582,"line":3247},[580,13588,13589],{"class":642},"            Analytics Dashboard\n",[580,13591,13592,13594,13596],{"class":582,"line":3283},[580,13593,1854],{"class":593},[580,13595,445],{"class":597},[580,13597,617],{"class":593},[580,13599,13600,13602,13604,13606,13608,13610,13613,13615],{"class":582,"line":3309},[580,13601,1793],{"class":593},[580,13603,598],{"class":597},[580,13605,602],{"class":601},[580,13607,605],{"class":593},[580,13609,608],{"class":593},[580,13611,13612],{"class":611},"grid grid-cols-2 gap-3 mb-4",[580,13614,608],{"class":593},[580,13616,617],{"class":593},[580,13618,13619,13621,13623,13625,13627,13629,13632,13634],{"class":582,"line":3336},[580,13620,2233],{"class":593},[580,13622,598],{"class":597},[580,13624,602],{"class":601},[580,13626,605],{"class":593},[580,13628,608],{"class":593},[580,13630,13631],{"class":611},"bg-gray-50 dark:bg-gray-900 rounded-lg p-3 text-center",[580,13633,608],{"class":593},[580,13635,617],{"class":593},[580,13637,13638,13640,13642,13644,13646,13648,13651,13653,13655,13658,13660,13662],{"class":582,"line":3363},[580,13639,6730],{"class":593},[580,13641,432],{"class":597},[580,13643,602],{"class":601},[580,13645,605],{"class":593},[580,13647,608],{"class":593},[580,13649,13650],{"class":611},"text-2xl font-bold text-gray-900 dark:text-white",[580,13652,608],{"class":593},[580,13654,639],{"class":593},[580,13656,13657],{"class":642},"12.5K",[580,13659,646],{"class":593},[580,13661,432],{"class":597},[580,13663,617],{"class":593},[580,13665,13666,13668,13670,13672,13674,13676,13679,13681,13683,13686,13688,13690],{"class":582,"line":3389},[580,13667,6730],{"class":593},[580,13669,432],{"class":597},[580,13671,602],{"class":601},[580,13673,605],{"class":593},[580,13675,608],{"class":593},[580,13677,13678],{"class":611},"text-xs text-gray-500 dark:text-gray-400",[580,13680,608],{"class":593},[580,13682,639],{"class":593},[580,13684,13685],{"class":642},"Users",[580,13687,646],{"class":593},[580,13689,432],{"class":597},[580,13691,617],{"class":593},[580,13693,13694,13696,13698],{"class":582,"line":3399},[580,13695,6781],{"class":593},[580,13697,598],{"class":597},[580,13699,617],{"class":593},[580,13701,13702,13704,13706,13708,13710,13712,13714,13716],{"class":582,"line":3408},[580,13703,2233],{"class":593},[580,13705,598],{"class":597},[580,13707,602],{"class":601},[580,13709,605],{"class":593},[580,13711,608],{"class":593},[580,13713,13631],{"class":611},[580,13715,608],{"class":593},[580,13717,617],{"class":593},[580,13719,13720,13722,13724,13726,13728,13730,13732,13734,13736,13739,13741,13743],{"class":582,"line":3417},[580,13721,6730],{"class":593},[580,13723,432],{"class":597},[580,13725,602],{"class":601},[580,13727,605],{"class":593},[580,13729,608],{"class":593},[580,13731,13650],{"class":611},[580,13733,608],{"class":593},[580,13735,639],{"class":593},[580,13737,13738],{"class":642},"89%",[580,13740,646],{"class":593},[580,13742,432],{"class":597},[580,13744,617],{"class":593},[580,13746,13747,13749,13751,13753,13755,13757,13759,13761,13763,13766,13768,13770],{"class":582,"line":3422},[580,13748,6730],{"class":593},[580,13750,432],{"class":597},[580,13752,602],{"class":601},[580,13754,605],{"class":593},[580,13756,608],{"class":593},[580,13758,13678],{"class":611},[580,13760,608],{"class":593},[580,13762,639],{"class":593},[580,13764,13765],{"class":642},"Satisfaction",[580,13767,646],{"class":593},[580,13769,432],{"class":597},[580,13771,617],{"class":593},[580,13773,13774,13776,13778],{"class":582,"line":3431},[580,13775,6781],{"class":593},[580,13777,598],{"class":597},[580,13779,617],{"class":593},[580,13781,13782,13784,13786],{"class":582,"line":5345},[580,13783,1854],{"class":593},[580,13785,598],{"class":597},[580,13787,617],{"class":593},[580,13789,13790,13792,13794,13796,13798,13800],{"class":582,"line":5364},[580,13791,1793],{"class":593},[580,13793,1177],{"class":597},[580,13795,602],{"class":601},[580,13797,605],{"class":593},[580,13799,608],{"class":593},[580,13801,13802],{"class":611},"w-full py-2 bg-purple-600 dark:bg-purple-500 text-white rounded-lg \n",[580,13804,13805],{"class":582,"line":5384},[580,13806,13807],{"class":611},"                         hover:bg-purple-700 dark:hover:bg-purple-600 \n",[580,13809,13810,13813,13815],{"class":582,"line":5434},[580,13811,13812],{"class":611},"                         transition-colors text-sm font-medium",[580,13814,608],{"class":593},[580,13816,617],{"class":593},[580,13818,13819],{"class":582,"line":5484},[580,13820,13821],{"class":642},"            View Dashboard\n",[580,13823,13824,13826,13828],{"class":582,"line":5493},[580,13825,1854],{"class":593},[580,13827,1177],{"class":597},[580,13829,617],{"class":593},[580,13831,13832,13834,13836],{"class":582,"line":5502},[580,13833,1863],{"class":593},[580,13835,598],{"class":597},[580,13837,617],{"class":593},[580,13839,13840,13842,13844],{"class":582,"line":5530},[580,13841,2436],{"class":593},[580,13843,598],{"class":597},[580,13845,617],{"class":593},[580,13847,13848],{"class":582,"line":5558},[580,13849,963],{"emptyLinePlaceholder":962},[580,13851,13852],{"class":582,"line":5567},[580,13853,13854],{"class":586},"      \u003C!-- Card 3: Minimal -->\n",[580,13856,13857,13859,13861,13863,13865,13867],{"class":582,"line":5572},[580,13858,1743],{"class":593},[580,13860,598],{"class":597},[580,13862,602],{"class":601},[580,13864,605],{"class":593},[580,13866,608],{"class":593},[580,13868,12841],{"class":611},[580,13870,13871],{"class":582,"line":5581},[580,13872,10782],{"class":611},[580,13874,13875],{"class":582,"line":5586},[580,13876,12850],{"class":611},[580,13878,13879],{"class":582,"line":5592},[580,13880,12855],{"class":611},[580,13882,13883,13885,13887],{"class":582,"line":5612},[580,13884,12860],{"class":611},[580,13886,608],{"class":593},[580,13888,617],{"class":593},[580,13890,13891,13893,13895,13897,13899,13901],{"class":582,"line":5641},[580,13892,1773],{"class":593},[580,13894,598],{"class":597},[580,13896,602],{"class":601},[580,13898,605],{"class":593},[580,13900,608],{"class":593},[580,13902,13903],{"class":611},"h-48 bg-gradient-to-br from-green-400 to-teal-500 \n",[580,13905,13906],{"class":582,"line":5670},[580,13907,13908],{"class":611},"                    dark:from-green-700 dark:to-teal-800 \n",[580,13910,13911,13913,13915],{"class":582,"line":5699},[580,13912,12894],{"class":611},[580,13914,608],{"class":593},[580,13916,617],{"class":593},[580,13918,13919,13921,13923,13925,13927,13929,13931,13933,13935,13937,13939,13941,13943,13945,13947,13949,13951,13953,13955,13957,13959,13961,13963],{"class":582,"line":5728},[580,13920,1793],{"class":593},[580,13922,1198],{"class":597},[580,13924,602],{"class":601},[580,13926,605],{"class":593},[580,13928,608],{"class":593},[580,13930,12913],{"class":611},[580,13932,608],{"class":593},[580,13934,2192],{"class":601},[580,13936,605],{"class":593},[580,13938,608],{"class":593},[580,13940,2199],{"class":611},[580,13942,608],{"class":593},[580,13944,2204],{"class":601},[580,13946,605],{"class":593},[580,13948,608],{"class":593},[580,13950,2211],{"class":611},[580,13952,608],{"class":593},[580,13954,2216],{"class":601},[580,13956,605],{"class":593},[580,13958,608],{"class":593},[580,13960,2223],{"class":611},[580,13962,608],{"class":593},[580,13964,617],{"class":593},[580,13966,13967,13969,13971,13973,13975,13977,13979,13981,13983,13985,13987,13989,13991,13993,13995,13997,13999,14001,14003,14005,14007,14009,14011],{"class":582,"line":5757},[580,13968,2233],{"class":593},[580,13970,2236],{"class":597},[580,13972,2239],{"class":601},[580,13974,605],{"class":593},[580,13976,608],{"class":593},[580,13978,2246],{"class":611},[580,13980,608],{"class":593},[580,13982,2251],{"class":601},[580,13984,605],{"class":593},[580,13986,608],{"class":593},[580,13988,2246],{"class":611},[580,13990,608],{"class":593},[580,13992,2262],{"class":601},[580,13994,605],{"class":593},[580,13996,608],{"class":593},[580,13998,6761],{"class":611},[580,14000,608],{"class":593},[580,14002,2274],{"class":601},[580,14004,605],{"class":593},[580,14006,608],{"class":593},[580,14008,4141],{"class":611},[580,14010,608],{"class":593},[580,14012,2286],{"class":593},[580,14014,14015,14017,14019],{"class":582,"line":5786},[580,14016,1854],{"class":593},[580,14018,1198],{"class":597},[580,14020,617],{"class":593},[580,14022,14023,14025,14027],{"class":582,"line":5795},[580,14024,1863],{"class":593},[580,14026,598],{"class":597},[580,14028,617],{"class":593},[580,14030,14031,14033,14035,14037,14039,14041,14043,14045],{"class":582,"line":5804},[580,14032,1773],{"class":593},[580,14034,598],{"class":597},[580,14036,602],{"class":601},[580,14038,605],{"class":593},[580,14040,608],{"class":593},[580,14042,13031],{"class":611},[580,14044,608],{"class":593},[580,14046,617],{"class":593},[580,14048,14049,14051,14053,14055,14057,14059,14062,14064],{"class":582,"line":5809},[580,14050,1793],{"class":593},[580,14052,445],{"class":597},[580,14054,602],{"class":601},[580,14056,605],{"class":593},[580,14058,608],{"class":593},[580,14060,14061],{"class":611},"text-lg font-semibold text-gray-900 dark:text-white mb-2",[580,14063,608],{"class":593},[580,14065,617],{"class":593},[580,14067,14068],{"class":582,"line":5818},[580,14069,14070],{"class":642},"            CSS-first Configuration\n",[580,14072,14073,14075,14077],{"class":582,"line":11898},[580,14074,1854],{"class":593},[580,14076,445],{"class":597},[580,14078,617],{"class":593},[580,14080,14081,14083,14085,14087,14089,14091,14094,14096],{"class":582,"line":11904},[580,14082,1793],{"class":593},[580,14084,432],{"class":597},[580,14086,602],{"class":601},[580,14088,605],{"class":593},[580,14090,608],{"class":593},[580,14092,14093],{"class":611},"text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-4",[580,14095,608],{"class":593},[580,14097,617],{"class":593},[580,14099,14100],{"class":582,"line":11917},[580,14101,14102],{"class":642},"            Không còn tailwind.config.js. Mọi thứ được cấu hình trực tiếp trong CSS với @theme và @utility.\n",[580,14104,14105,14107,14109],{"class":582,"line":11923},[580,14106,1854],{"class":593},[580,14108,432],{"class":597},[580,14110,617],{"class":593},[580,14112,14113,14115,14117,14119,14121,14123,14126,14128],{"class":582,"line":11955},[580,14114,1793],{"class":593},[580,14116,598],{"class":597},[580,14118,602],{"class":601},[580,14120,605],{"class":593},[580,14122,608],{"class":593},[580,14124,14125],{"class":611},"flex items-center gap-1 text-yellow-500",[580,14127,608],{"class":593},[580,14129,617],{"class":593},[580,14131,14132,14134,14136,14138,14140,14142,14145,14147,14149,14151,14153,14156,14158,14160,14162,14164,14166,14168,14171,14173,14176,14178],{"class":582,"line":11974},[580,14133,2233],{"class":593},[580,14135,1198],{"class":597},[580,14137,602],{"class":601},[580,14139,605],{"class":593},[580,14141,608],{"class":593},[580,14143,14144],{"class":611},"w-4 h-4 fill-current",[580,14146,608],{"class":593},[580,14148,2216],{"class":601},[580,14150,605],{"class":593},[580,14152,608],{"class":593},[580,14154,14155],{"class":611},"0 0 20 20",[580,14157,608],{"class":593},[580,14159,1255],{"class":593},[580,14161,2236],{"class":597},[580,14163,2274],{"class":601},[580,14165,605],{"class":593},[580,14167,608],{"class":593},[580,14169,14170],{"class":611},"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z",[580,14172,608],{"class":593},[580,14174,14175],{"class":593},"\u002F>\u003C\u002F",[580,14177,1198],{"class":597},[580,14179,617],{"class":593},[580,14181,14182,14184,14186,14188,14190,14192,14194,14196,14198,14200,14202,14204,14206,14208,14210,14212,14214,14216,14218,14220,14222,14224],{"class":582,"line":11979},[580,14183,2233],{"class":593},[580,14185,1198],{"class":597},[580,14187,602],{"class":601},[580,14189,605],{"class":593},[580,14191,608],{"class":593},[580,14193,14144],{"class":611},[580,14195,608],{"class":593},[580,14197,2216],{"class":601},[580,14199,605],{"class":593},[580,14201,608],{"class":593},[580,14203,14155],{"class":611},[580,14205,608],{"class":593},[580,14207,1255],{"class":593},[580,14209,2236],{"class":597},[580,14211,2274],{"class":601},[580,14213,605],{"class":593},[580,14215,608],{"class":593},[580,14217,14170],{"class":611},[580,14219,608],{"class":593},[580,14221,14175],{"class":593},[580,14223,1198],{"class":597},[580,14225,617],{"class":593},[580,14227,14228,14230,14232,14234,14236,14238,14240,14242,14244,14246,14248,14250,14252,14254,14256,14258,14260,14262,14264,14266,14268,14270],{"class":582,"line":11985},[580,14229,2233],{"class":593},[580,14231,1198],{"class":597},[580,14233,602],{"class":601},[580,14235,605],{"class":593},[580,14237,608],{"class":593},[580,14239,14144],{"class":611},[580,14241,608],{"class":593},[580,14243,2216],{"class":601},[580,14245,605],{"class":593},[580,14247,608],{"class":593},[580,14249,14155],{"class":611},[580,14251,608],{"class":593},[580,14253,1255],{"class":593},[580,14255,2236],{"class":597},[580,14257,2274],{"class":601},[580,14259,605],{"class":593},[580,14261,608],{"class":593},[580,14263,14170],{"class":611},[580,14265,608],{"class":593},[580,14267,14175],{"class":593},[580,14269,1198],{"class":597},[580,14271,617],{"class":593},[580,14273,14274,14276,14278,14280,14282,14284,14286,14288,14290,14292,14294,14296,14298,14300,14302,14304,14306,14308,14310,14312,14314,14316],{"class":582,"line":12020},[580,14275,2233],{"class":593},[580,14277,1198],{"class":597},[580,14279,602],{"class":601},[580,14281,605],{"class":593},[580,14283,608],{"class":593},[580,14285,14144],{"class":611},[580,14287,608],{"class":593},[580,14289,2216],{"class":601},[580,14291,605],{"class":593},[580,14293,608],{"class":593},[580,14295,14155],{"class":611},[580,14297,608],{"class":593},[580,14299,1255],{"class":593},[580,14301,2236],{"class":597},[580,14303,2274],{"class":601},[580,14305,605],{"class":593},[580,14307,608],{"class":593},[580,14309,14170],{"class":611},[580,14311,608],{"class":593},[580,14313,14175],{"class":593},[580,14315,1198],{"class":597},[580,14317,617],{"class":593},[580,14319,14320,14322,14324,14326,14328,14330,14333,14335,14337,14339,14341,14343,14345,14347,14349,14351,14353,14355,14357,14359,14361,14363],{"class":582,"line":12034},[580,14321,2233],{"class":593},[580,14323,1198],{"class":597},[580,14325,602],{"class":601},[580,14327,605],{"class":593},[580,14329,608],{"class":593},[580,14331,14332],{"class":611},"w-4 h-4 fill-current text-gray-300 dark:text-gray-600",[580,14334,608],{"class":593},[580,14336,2216],{"class":601},[580,14338,605],{"class":593},[580,14340,608],{"class":593},[580,14342,14155],{"class":611},[580,14344,608],{"class":593},[580,14346,1255],{"class":593},[580,14348,2236],{"class":597},[580,14350,2274],{"class":601},[580,14352,605],{"class":593},[580,14354,608],{"class":593},[580,14356,14170],{"class":611},[580,14358,608],{"class":593},[580,14360,14175],{"class":593},[580,14362,1198],{"class":597},[580,14364,617],{"class":593},[580,14366,14367,14369,14371],{"class":582,"line":12039},[580,14368,1854],{"class":593},[580,14370,598],{"class":597},[580,14372,617],{"class":593},[580,14374,14375,14377,14379],{"class":582,"line":12044},[580,14376,1863],{"class":593},[580,14378,598],{"class":597},[580,14380,617],{"class":593},[580,14382,14383,14385,14387],{"class":582,"line":12050},[580,14384,2436],{"class":593},[580,14386,598],{"class":597},[580,14388,617],{"class":593},[580,14390,14391],{"class":582,"line":12065},[580,14392,963],{"emptyLinePlaceholder":962},[580,14394,14395,14397,14399],{"class":582,"line":12070},[580,14396,2719],{"class":593},[580,14398,598],{"class":597},[580,14400,617],{"class":593},[580,14402,14403,14405,14407],{"class":582,"line":12075},[580,14404,1215],{"class":593},[580,14406,598],{"class":597},[580,14408,617],{"class":593},[580,14410,14411],{"class":582,"line":12081},[580,14412,963],{"emptyLinePlaceholder":962},[580,14414,14415,14417,14419],{"class":582,"line":12097},[580,14416,646],{"class":593},[580,14418,1677],{"class":597},[580,14420,617],{"class":593},[580,14422,14423,14425,14427],{"class":582,"line":12108},[580,14424,646],{"class":593},[580,14426,575],{"class":597},[580,14428,617],{"class":593},[432,14430,14431],{},[436,14432,3442],{},[804,14434,14435,14438,14448,14454,14461],{},[807,14436,14437],{},"Mỗi card có cặp class light\u002Fdark cho MỌI element: background, border, text, shadow, gradient.",[807,14439,14440,14443,14444,14447],{},[491,14441,14442],{},"group"," + ",[491,14445,14446],{},"group-hover:",": Hiệu ứng hover đồng bộ trên cả card (title đổi màu khi hover card).",[807,14449,14450,14453],{},[491,14451,14452],{},"shadow-sm hover:shadow-lg dark:shadow-gray-900\u002F50",": Shadow dark mode dùng màu tối hơn để shadow vẫn visible trên nền tối.",[807,14455,14456,14457,14460],{},"Star rating dùng SVG inline, sao cuối có ",[491,14458,14459],{},"text-gray-300 dark:text-gray-600"," cho \"empty star\" state.",[807,14462,14463,14466],{},[491,14464,14465],{},"transition-all duration-300",": Mọi thay đổi (bao gồm dark mode switch) có animation.",[5863,14468],{},[427,14470,14472],{"id":14471},"_4-custom-variants-v40","4. Custom Variants (v4.0)",[432,14474,14475,14476,3003],{},"Tailwind CSS v4 cho phép bạn tự định nghĩa variant selector của riêng mình qua ",[491,14477,9707],{},[445,14479,14481],{"id":14480},"_41-custom-variant-cơ-bản","4.1. @custom-variant Cơ Bản",[571,14483,14485],{"className":936,"code":14484,"language":938,"meta":576,"style":576},"@import \"tailwindcss\";\n\n\u002F* Định nghĩa custom variant *\u002F\n@custom-variant theme-a (&:where(.theme-a, .theme-a *));\n@custom-variant theme-b (&:where(.theme-b, .theme-b *));\n\n\u002F* Sử dụng trong HTML *\u002F\n\u002F* \u003Cdiv class=\"bg-white theme-a:bg-blue-50 theme-b:bg-green-50\"> *\u002F\n",[491,14486,14487,14499,14503,14508,14517,14526,14530,14535],{"__ignoreMap":576},[580,14488,14489,14491,14493,14495,14497],{"class":582,"line":583},[580,14490,946],{"class":945},[580,14492,949],{"class":593},[580,14494,952],{"class":611},[580,14496,608],{"class":593},[580,14498,957],{"class":593},[580,14500,14501],{"class":582,"line":590},[580,14502,963],{"emptyLinePlaceholder":962},[580,14504,14505],{"class":582,"line":620},[580,14506,14507],{"class":586},"\u002F* Định nghĩa custom variant *\u002F\n",[580,14509,14510,14512,14515],{"class":582,"line":653},[580,14511,9707],{"class":945},[580,14513,14514],{"class":642}," theme-a (&:where(.theme-a, .theme-a *))",[580,14516,957],{"class":593},[580,14518,14519,14521,14524],{"class":582,"line":681},[580,14520,9707],{"class":945},[580,14522,14523],{"class":642}," theme-b (&:where(.theme-b, .theme-b *))",[580,14525,957],{"class":593},[580,14527,14528],{"class":582,"line":709},[580,14529,963],{"emptyLinePlaceholder":962},[580,14531,14532],{"class":582,"line":737},[580,14533,14534],{"class":586},"\u002F* Sử dụng trong HTML *\u002F\n",[580,14536,14537],{"class":582,"line":765},[580,14538,14539],{"class":586},"\u002F* \u003Cdiv class=\"bg-white theme-a:bg-blue-50 theme-b:bg-green-50\"> *\u002F\n",[445,14541,14543],{"id":14542},"_42-stacked-variants-v43","4.2. Stacked Variants (v4.3)",[432,14545,14546],{},"V4.3 cho phép định nghĩa variant lồng nhau:",[571,14548,14550],{"className":936,"code":14549,"language":938,"meta":576,"style":576},"\u002F* Stacked: apply styles when element is BOTH hovered AND focused *\u002F\n@variant hover:focus {\n  .btn-primary {\n    background-color: var(--color-primary-dark);\n    transform: scale(0.98);\n  }\n}\n",[491,14551,14552,14557,14567,14577,14594,14611,14616],{"__ignoreMap":576},[580,14553,14554],{"class":582,"line":583},[580,14555,14556],{"class":586},"\u002F* Stacked: apply styles when element is BOTH hovered AND focused *\u002F\n",[580,14558,14559,14562,14565],{"class":582,"line":590},[580,14560,14561],{"class":945},"@variant",[580,14563,14564],{"class":642}," hover:focus ",[580,14566,11798],{"class":593},[580,14568,14569,14572,14575],{"class":582,"line":620},[580,14570,14571],{"class":593},"  .",[580,14573,14574],{"class":10204},"btn-primary",[580,14576,970],{"class":593},[580,14578,14579,14582,14584,14587,14589,14592],{"class":582,"line":653},[580,14580,14581],{"class":10232},"    background-color",[580,14583,933],{"class":593},[580,14585,14586],{"class":3006}," var",[580,14588,3010],{"class":593},[580,14590,14591],{"class":642},"--color-primary-dark",[580,14593,11421],{"class":593},[580,14595,14596,14599,14601,14604,14606,14609],{"class":582,"line":681},[580,14597,14598],{"class":10232},"    transform",[580,14600,933],{"class":593},[580,14602,14603],{"class":3006}," scale",[580,14605,3010],{"class":593},[580,14607,14608],{"class":10241},"0.98",[580,14610,11421],{"class":593},[580,14612,14613],{"class":582,"line":709},[580,14614,14615],{"class":593},"  }\n",[580,14617,14618],{"class":582,"line":737},[580,14619,1032],{"class":593},[445,14621,14623],{"id":14622},"_43-compound-variants-v43","4.3. Compound Variants (v4.3)",[571,14625,14627],{"className":936,"code":14626,"language":938,"meta":576,"style":576},"\u002F* Compound: apply styles when element is EITHER hovered OR focused *\u002F\n@variant hover, focus {\n  .btn-primary {\n    box-shadow: 0 0 0 3px var(--color-primary\u002F30%);\n  }\n}\n",[491,14628,14629,14634,14643,14651,14680,14684],{"__ignoreMap":576},[580,14630,14631],{"class":582,"line":583},[580,14632,14633],{"class":586},"\u002F* Compound: apply styles when element is EITHER hovered OR focused *\u002F\n",[580,14635,14636,14638,14641],{"class":582,"line":590},[580,14637,14561],{"class":945},[580,14639,14640],{"class":642}," hover, focus ",[580,14642,11798],{"class":593},[580,14644,14645,14647,14649],{"class":582,"line":620},[580,14646,14571],{"class":593},[580,14648,14574],{"class":10204},[580,14650,970],{"class":593},[580,14652,14653,14656,14658,14661,14663,14665,14668,14670,14672,14675,14678],{"class":582,"line":653},[580,14654,14655],{"class":10232},"    box-shadow",[580,14657,933],{"class":593},[580,14659,14660],{"class":10241}," 0",[580,14662,14660],{"class":10241},[580,14664,14660],{"class":10241},[580,14666,14667],{"class":10241}," 3px",[580,14669,14586],{"class":3006},[580,14671,3010],{"class":593},[580,14673,14674],{"class":642},"--color-primary\u002F",[580,14676,14677],{"class":10241},"30%",[580,14679,11421],{"class":593},[580,14681,14682],{"class":582,"line":681},[580,14683,14615],{"class":593},[580,14685,14686],{"class":582,"line":709},[580,14687,1032],{"class":593},[445,14689,14691,14692,14695],{"id":14690},"_44-bài-tập-7-custom-theme-variant-cho-multi-theme-support","4.4. BÀI TẬP 7 — Custom ",[491,14693,14694],{},"theme-"," Variant cho Multi-Theme Support",[432,14697,14698,14700,14701,14704],{},[436,14699,1491],{}," Tạo 3 theme (default, forest, ocean) với custom variant ",[491,14702,14703],{},"theme-*",". User có thể chọn theme qua button.",[432,14706,14707],{},[436,14708,1508],{},[571,14710,14712],{"className":573,"code":14711,"language":575,"meta":576,"style":576},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"vi\" class=\"\">\n\u003Chead>\n  \u003Cmeta charset=\"UTF-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  \u003Ctitle>Multi-Theme với Custom Variants - Tailwind CSS v4\u003C\u002Ftitle>\n  \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tailwindcss\u002Fbrowser@4\">\u003C\u002Fscript>\n  \u003Cstyle>\n    @import \"tailwindcss\";\n    \n    \u002F* Custom variants cho từng theme *\u002F\n    @custom-variant theme-forest (&:where(.theme-forest, .theme-forest *));\n    @custom-variant theme-ocean (&:where(.theme-ocean, .theme-ocean *));\n    \n    \u002F* Base transitions *\u002F\n    *, *::before, *::after {\n      transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody class=\"min-h-screen bg-gray-50 theme-forest:bg-green-50 theme-ocean:bg-blue-50 p-4 md:p-8\">\n\n  \u003Cdiv class=\"max-w-3xl mx-auto\">\n    \n    \u003Ch1 class=\"text-2xl md:text-3xl font-bold text-gray-900 \n               theme-forest:text-green-900 theme-ocean:text-blue-900 mb-2\">\n      Multi-Theme với Custom Variants\n    \u003C\u002Fh1>\n    \u003Cp class=\"text-gray-600 theme-forest:text-green-700 theme-ocean:text-blue-700 mb-8\">\n      Chọn theme bên dưới. Tất cả component tự động đổi màu theo theme được chọn.\n    \u003C\u002Fp>\n\n    \u003C!-- Theme Selector -->\n    \u003Cdiv class=\"flex flex-wrap gap-3 mb-8\">\n      \u003Cbutton onclick=\"setTheme('')\" \n              class=\"px-4 py-2 rounded-lg text-sm font-medium transition-all\n                     bg-white border-2 border-gray-300 text-gray-700 hover:border-gray-400\n                     theme-forest:border-green-200 theme-forest:text-green-700 theme-forest:bg-green-50\n                     theme-ocean:border-blue-200 theme-ocean:text-blue-700 theme-ocean:bg-blue-50\">\n        ⚪ Default\n      \u003C\u002Fbutton>\n      \u003Cbutton onclick=\"setTheme('theme-forest')\" \n              class=\"px-4 py-2 rounded-lg text-sm font-medium transition-all\n                     bg-white border-2 border-green-300 text-green-700 hover:border-green-400\n                     theme-forest:bg-green-600 theme-forest:text-white theme-forest:border-green-600\n                     theme-ocean:border-blue-200 theme-ocean:text-blue-700\">\n        🌲 Forest\n      \u003C\u002Fbutton>\n      \u003Cbutton onclick=\"setTheme('theme-ocean')\" \n              class=\"px-4 py-2 rounded-lg text-sm font-medium transition-all\n                     bg-white border-2 border-blue-300 text-blue-700 hover:border-blue-400\n                     theme-forest:border-green-200 theme-forest:text-green-700\n                     theme-ocean:bg-blue-600 theme-ocean:text-white theme-ocean:border-blue-600\">\n        🌊 Ocean\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Card -->\n    \u003Cdiv class=\"bg-white theme-forest:bg-green-100\u002F50 theme-ocean:bg-blue-100\u002F50\n                border border-gray-200 theme-forest:border-green-300 theme-ocean:border-blue-300\n                rounded-xl p-6 shadow-sm mb-6\">\n      \u003Ch2 class=\"text-lg font-semibold text-gray-900 \n                 theme-forest:text-green-900 theme-ocean:text-blue-900 mb-3\">\n        Welcome to Multi-Theme\n      \u003C\u002Fh2>\n      \u003Cp class=\"text-gray-600 theme-forest:text-green-800 theme-ocean:text-blue-800\">\n        Card này tự động đổi màu nền, viền, chữ theo theme được chọn. Tất cả từ custom variant.\n      \u003C\u002Fp>\n      \u003Cbutton class=\"mt-4 px-4 py-2 rounded-lg text-sm font-medium text-white transition-all\n                     bg-gray-900 hover:bg-gray-800\n                     theme-forest:bg-green-700 theme-forest:hover:bg-green-800\n                     theme-ocean:bg-blue-700 theme-ocean:hover:bg-blue-800\">\n        Action Button\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Stats -->\n    \u003Cdiv class=\"grid grid-cols-3 gap-4 mb-6\">\n      \u003Cdiv class=\"bg-white theme-forest:bg-green-50 theme-ocean:bg-blue-50\n                  border border-gray-200 theme-forest:border-green-200 theme-ocean:border-blue-200\n                  rounded-xl p-4 text-center\">\n        \u003Cp class=\"text-2xl font-bold text-gray-900 \n                  theme-forest:text-green-700 theme-ocean:text-blue-700\">128\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-gray-500 \n                  theme-forest:text-green-600 theme-ocean:text-blue-600\">Projects\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"bg-white theme-forest:bg-green-50 theme-ocean:bg-blue-50\n                  border border-gray-200 theme-forest:border-green-200 theme-ocean:border-blue-200\n                  rounded-xl p-4 text-center\">\n        \u003Cp class=\"text-2xl font-bold text-gray-900 \n                  theme-forest:text-green-700 theme-ocean:text-blue-700\">3.2K\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-gray-500 \n                  theme-forest:text-green-600 theme-ocean:text-blue-600\">Users\u003C\u002Fp>\n      \u003C\u002Fdiv>\n      \u003Cdiv class=\"bg-white theme-forest:bg-green-50 theme-ocean:bg-blue-50\n                  border border-gray-200 theme-forest:border-green-200 theme-ocean:border-blue-200\n                  rounded-xl p-4 text-center\">\n        \u003Cp class=\"text-2xl font-bold text-gray-900 \n                  theme-forest:text-green-700 theme-ocean:text-blue-700\">99.9%\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-gray-500 \n                  theme-forest:text-green-600 theme-ocean:text-blue-600\">Uptime\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Alert -->\n    \u003Cdiv class=\"bg-amber-50 theme-forest:bg-green-100 theme-ocean:bg-blue-100\n                border border-amber-200 theme-forest:border-green-300 theme-ocean:border-blue-300\n                rounded-xl p-4 flex items-start gap-3\">\n      \u003Cspan class=\"text-amber-600 theme-forest:text-green-700 theme-ocean:text-blue-700 text-lg\">💡\u003C\u002Fspan>\n      \u003Cdiv>\n        \u003Cp class=\"font-medium text-amber-800 theme-forest:text-green-900 theme-ocean:text-blue-900\">\n          Custom Variant Power\n        \u003C\u002Fp>\n        \u003Cp class=\"text-sm text-amber-700 theme-forest:text-green-800 theme-ocean:text-blue-800 mt-1\">\n          Mỗi element có thể có style riêng cho từng theme — tất cả inline, không cần CSS file riêng.\n          Dùng \u003Ccode class=\"bg-amber-200\u002F50 theme-forest:bg-green-200\u002F50 theme-ocean:bg-blue-200\u002F50 px-1 rounded\">@custom-variant\u003C\u002Fcode> trong CSS.\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fdiv>\n\n  \u003Cscript>\n    function setTheme(themeClass) {\n      const html = document.documentElement;\n      \u002F\u002F Remove all theme classes\n      html.classList.remove('theme-forest', 'theme-ocean');\n      \u002F\u002F Add selected theme\n      if (themeClass) {\n        html.classList.add(themeClass);\n      }\n      \u002F\u002F Save preference\n      localStorage.setItem('app-theme', themeClass);\n    }\n\n    \u002F\u002F Restore theme on load\n    const savedTheme = localStorage.getItem('app-theme');\n    if (savedTheme) {\n      setTheme(savedTheme);\n    }\n  \u003C\u002Fscript>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[491,14713,14714,14724,14748,14756,14774,14802,14819,14841,14849,14862,14866,14871,14880,14889,14893,14898,14920,14950,14954,14962,14970,14989,14993,15012,15016,15031,15040,15045,15053,15072,15077,15085,15089,15094,15113,15139,15150,15155,15160,15169,15174,15182,15211,15221,15226,15231,15240,15245,15253,15282,15292,15297,15302,15311,15316,15324,15332,15336,15341,15356,15361,15370,15385,15394,15399,15407,15426,15431,15439,15454,15459,15464,15473,15478,15486,15494,15498,15503,15522,15537,15542,15551,15566,15584,15599,15617,15625,15639,15643,15651,15665,15682,15696,15712,15720,15734,15738,15746,15760,15777,15791,15808,15816,15824,15828,15833,15848,15853,15862,15890,15898,15917,15922,15930,15949,15954,15987,15995,16003,16011,16015,16023,16027,16035,16050,16066,16071,16104,16109,16121,16141,16145,16150,16176,16180,16184,16189,16216,16226,16238,16242,16250,16254,16262],{"__ignoreMap":576},[580,14715,14716,14718,14720,14722],{"class":582,"line":583},[580,14717,1518],{"class":593},[580,14719,1521],{"class":597},[580,14721,1524],{"class":601},[580,14723,617],{"class":593},[580,14725,14726,14728,14730,14732,14734,14736,14738,14740,14742,14744,14746],{"class":582,"line":590},[580,14727,594],{"class":593},[580,14729,575],{"class":597},[580,14731,1535],{"class":601},[580,14733,605],{"class":593},[580,14735,608],{"class":593},[580,14737,1542],{"class":611},[580,14739,608],{"class":593},[580,14741,602],{"class":601},[580,14743,605],{"class":593},[580,14745,10071],{"class":593},[580,14747,617],{"class":593},[580,14749,14750,14752,14754],{"class":582,"line":620},[580,14751,594],{"class":593},[580,14753,1564],{"class":597},[580,14755,617],{"class":593},[580,14757,14758,14760,14762,14764,14766,14768,14770,14772],{"class":582,"line":653},[580,14759,623],{"class":593},[580,14761,1573],{"class":597},[580,14763,1576],{"class":601},[580,14765,605],{"class":593},[580,14767,608],{"class":593},[580,14769,1583],{"class":611},[580,14771,608],{"class":593},[580,14773,617],{"class":593},[580,14775,14776,14778,14780,14782,14784,14786,14788,14790,14792,14794,14796,14798,14800],{"class":582,"line":681},[580,14777,623],{"class":593},[580,14779,1573],{"class":597},[580,14781,1596],{"class":601},[580,14783,605],{"class":593},[580,14785,608],{"class":593},[580,14787,1603],{"class":611},[580,14789,608],{"class":593},[580,14791,1608],{"class":601},[580,14793,605],{"class":593},[580,14795,608],{"class":593},[580,14797,1615],{"class":611},[580,14799,608],{"class":593},[580,14801,617],{"class":593},[580,14803,14804,14806,14808,14810,14813,14815,14817],{"class":582,"line":709},[580,14805,623],{"class":593},[580,14807,1626],{"class":597},[580,14809,639],{"class":593},[580,14811,14812],{"class":642},"Multi-Theme với Custom Variants - Tailwind CSS v4",[580,14814,646],{"class":593},[580,14816,1626],{"class":597},[580,14818,617],{"class":593},[580,14820,14821,14823,14825,14827,14829,14831,14833,14835,14837,14839],{"class":582,"line":737},[580,14822,623],{"class":593},[580,14824,1644],{"class":597},[580,14826,1647],{"class":601},[580,14828,605],{"class":593},[580,14830,608],{"class":593},[580,14832,1654],{"class":611},[580,14834,608],{"class":593},[580,14836,1282],{"class":593},[580,14838,1644],{"class":597},[580,14840,617],{"class":593},[580,14842,14843,14845,14847],{"class":582,"line":765},[580,14844,623],{"class":593},[580,14846,10173],{"class":597},[580,14848,617],{"class":593},[580,14850,14851,14854,14856,14858,14860],{"class":582,"line":793},[580,14852,14853],{"class":945},"    @import",[580,14855,949],{"class":593},[580,14857,952],{"class":611},[580,14859,608],{"class":593},[580,14861,957],{"class":593},[580,14863,14864],{"class":582,"line":896},[580,14865,10194],{"class":642},[580,14867,14868],{"class":582,"line":1029},[580,14869,14870],{"class":586},"    \u002F* Custom variants cho từng theme *\u002F\n",[580,14872,14873,14875,14878],{"class":582,"line":1212},[580,14874,10185],{"class":945},[580,14876,14877],{"class":642}," theme-forest (&:where(.theme-forest, .theme-forest *))",[580,14879,957],{"class":593},[580,14881,14882,14884,14887],{"class":582,"line":1222},[580,14883,10185],{"class":945},[580,14885,14886],{"class":642}," theme-ocean (&:where(.theme-ocean, .theme-ocean *))",[580,14888,957],{"class":593},[580,14890,14891],{"class":582,"line":1228},[580,14892,10194],{"class":642},[580,14894,14895],{"class":582,"line":1248},[580,14896,14897],{"class":586},"    \u002F* Base transitions *\u002F\n",[580,14899,14900,14902,14904,14906,14908,14910,14912,14914,14916,14918],{"class":582,"line":1289},[580,14901,10205],{"class":10204},[580,14903,3134],{"class":593},[580,14905,10210],{"class":10204},[580,14907,10213],{"class":593},[580,14909,10216],{"class":601},[580,14911,3134],{"class":593},[580,14913,10210],{"class":10204},[580,14915,10213],{"class":593},[580,14917,10225],{"class":601},[580,14919,970],{"class":593},[580,14921,14922,14924,14926,14928,14930,14932,14934,14936,14938,14940,14942,14944,14946,14948],{"class":582,"line":1325},[580,14923,10233],{"class":10232},[580,14925,933],{"class":593},[580,14927,10238],{"class":642},[580,14929,10242],{"class":10241},[580,14931,10245],{"class":642},[580,14933,3134],{"class":593},[580,14935,10250],{"class":642},[580,14937,10242],{"class":10241},[580,14939,10245],{"class":642},[580,14941,3134],{"class":593},[580,14943,10259],{"class":642},[580,14945,10262],{"class":10241},[580,14947,10245],{"class":642},[580,14949,957],{"class":593},[580,14951,14952],{"class":582,"line":1361},[580,14953,10271],{"class":593},[580,14955,14956,14958,14960],{"class":582,"line":1370},[580,14957,1215],{"class":593},[580,14959,10173],{"class":597},[580,14961,617],{"class":593},[580,14963,14964,14966,14968],{"class":582,"line":1379},[580,14965,646],{"class":593},[580,14967,1564],{"class":597},[580,14969,617],{"class":593},[580,14971,14972,14974,14976,14978,14980,14982,14985,14987],{"class":582,"line":1384},[580,14973,594],{"class":593},[580,14975,1677],{"class":597},[580,14977,602],{"class":601},[580,14979,605],{"class":593},[580,14981,608],{"class":593},[580,14983,14984],{"class":611},"min-h-screen bg-gray-50 theme-forest:bg-green-50 theme-ocean:bg-blue-50 p-4 md:p-8",[580,14986,608],{"class":593},[580,14988,617],{"class":593},[580,14990,14991],{"class":582,"line":1390},[580,14992,963],{"emptyLinePlaceholder":962},[580,14994,14995,14997,14999,15001,15003,15005,15008,15010],{"class":582,"line":1411},[580,14996,623],{"class":593},[580,14998,598],{"class":597},[580,15000,602],{"class":601},[580,15002,605],{"class":593},[580,15004,608],{"class":593},[580,15006,15007],{"class":611},"max-w-3xl mx-auto",[580,15009,608],{"class":593},[580,15011,617],{"class":593},[580,15013,15014],{"class":582,"line":1417},[580,15015,10194],{"class":642},[580,15017,15018,15020,15022,15024,15026,15028],{"class":582,"line":1426},[580,15019,1195],{"class":593},[580,15021,1395],{"class":597},[580,15023,602],{"class":601},[580,15025,605],{"class":593},[580,15027,608],{"class":593},[580,15029,15030],{"class":611},"text-2xl md:text-3xl font-bold text-gray-900 \n",[580,15032,15033,15036,15038],{"class":582,"line":1431},[580,15034,15035],{"class":611},"               theme-forest:text-green-900 theme-ocean:text-blue-900 mb-2",[580,15037,608],{"class":593},[580,15039,617],{"class":593},[580,15041,15042],{"class":582,"line":1437},[580,15043,15044],{"class":642},"      Multi-Theme với Custom Variants\n",[580,15046,15047,15049,15051],{"class":582,"line":1458},[580,15048,2719],{"class":593},[580,15050,1395],{"class":597},[580,15052,617],{"class":593},[580,15054,15055,15057,15059,15061,15063,15065,15068,15070],{"class":582,"line":1476},[580,15056,1195],{"class":593},[580,15058,432],{"class":597},[580,15060,602],{"class":601},[580,15062,605],{"class":593},[580,15064,608],{"class":593},[580,15066,15067],{"class":611},"text-gray-600 theme-forest:text-green-700 theme-ocean:text-blue-700 mb-8",[580,15069,608],{"class":593},[580,15071,617],{"class":593},[580,15073,15074],{"class":582,"line":2078},[580,15075,15076],{"class":642},"      Chọn theme bên dưới. Tất cả component tự động đổi màu theo theme được chọn.\n",[580,15078,15079,15081,15083],{"class":582,"line":2084},[580,15080,2719],{"class":593},[580,15082,432],{"class":597},[580,15084,617],{"class":593},[580,15086,15087],{"class":582,"line":2093},[580,15088,963],{"emptyLinePlaceholder":962},[580,15090,15091],{"class":582,"line":2102},[580,15092,15093],{"class":586},"    \u003C!-- Theme Selector -->\n",[580,15095,15096,15098,15100,15102,15104,15106,15109,15111],{"class":582,"line":2107},[580,15097,1195],{"class":593},[580,15099,598],{"class":597},[580,15101,602],{"class":601},[580,15103,605],{"class":593},[580,15105,608],{"class":593},[580,15107,15108],{"class":611},"flex flex-wrap gap-3 mb-8",[580,15110,608],{"class":593},[580,15112,617],{"class":593},[580,15114,15115,15117,15119,15121,15123,15125,15128,15130,15133,15135,15137],{"class":582,"line":2113},[580,15116,1743],{"class":593},[580,15118,1177],{"class":597},[580,15120,12721],{"class":601},[580,15122,605],{"class":593},[580,15124,608],{"class":593},[580,15126,15127],{"class":3006},"setTheme",[580,15129,3010],{"class":611},[580,15131,15132],{"class":593},"''",[580,15134,3020],{"class":611},[580,15136,608],{"class":593},[580,15138,10418],{"class":593},[580,15140,15141,15143,15145,15147],{"class":582,"line":2157},[580,15142,10423],{"class":601},[580,15144,605],{"class":593},[580,15146,608],{"class":593},[580,15148,15149],{"class":611},"px-4 py-2 rounded-lg text-sm font-medium transition-all\n",[580,15151,15152],{"class":582,"line":2163},[580,15153,15154],{"class":611},"                     bg-white border-2 border-gray-300 text-gray-700 hover:border-gray-400\n",[580,15156,15157],{"class":582,"line":2230},[580,15158,15159],{"class":611},"                     theme-forest:border-green-200 theme-forest:text-green-700 theme-forest:bg-green-50\n",[580,15161,15162,15165,15167],{"class":582,"line":2289},[580,15163,15164],{"class":611},"                     theme-ocean:border-blue-200 theme-ocean:text-blue-700 theme-ocean:bg-blue-50",[580,15166,608],{"class":593},[580,15168,617],{"class":593},[580,15170,15171],{"class":582,"line":2298},[580,15172,15173],{"class":642},"        ⚪ Default\n",[580,15175,15176,15178,15180],{"class":582,"line":2304},[580,15177,2436],{"class":593},[580,15179,1177],{"class":597},[580,15181,617],{"class":593},[580,15183,15184,15186,15188,15190,15192,15194,15196,15198,15200,15203,15205,15207,15209],{"class":582,"line":2365},[580,15185,1743],{"class":593},[580,15187,1177],{"class":597},[580,15189,12721],{"class":601},[580,15191,605],{"class":593},[580,15193,608],{"class":593},[580,15195,15127],{"class":3006},[580,15197,3010],{"class":611},[580,15199,3013],{"class":593},[580,15201,15202],{"class":611},"theme-forest",[580,15204,3013],{"class":593},[580,15206,3020],{"class":611},[580,15208,608],{"class":593},[580,15210,10418],{"class":593},[580,15212,15213,15215,15217,15219],{"class":582,"line":2415},[580,15214,10423],{"class":601},[580,15216,605],{"class":593},[580,15218,608],{"class":593},[580,15220,15149],{"class":611},[580,15222,15223],{"class":582,"line":2424},[580,15224,15225],{"class":611},"                     bg-white border-2 border-green-300 text-green-700 hover:border-green-400\n",[580,15227,15228],{"class":582,"line":2433},[580,15229,15230],{"class":611},"                     theme-forest:bg-green-600 theme-forest:text-white theme-forest:border-green-600\n",[580,15232,15233,15236,15238],{"class":582,"line":2443},[580,15234,15235],{"class":611},"                     theme-ocean:border-blue-200 theme-ocean:text-blue-700",[580,15237,608],{"class":593},[580,15239,617],{"class":593},[580,15241,15242],{"class":582,"line":2448},[580,15243,15244],{"class":642},"        🌲 Forest\n",[580,15246,15247,15249,15251],{"class":582,"line":2454},[580,15248,2436],{"class":593},[580,15250,1177],{"class":597},[580,15252,617],{"class":593},[580,15254,15255,15257,15259,15261,15263,15265,15267,15269,15271,15274,15276,15278,15280],{"class":582,"line":2485},[580,15256,1743],{"class":593},[580,15258,1177],{"class":597},[580,15260,12721],{"class":601},[580,15262,605],{"class":593},[580,15264,608],{"class":593},[580,15266,15127],{"class":3006},[580,15268,3010],{"class":611},[580,15270,3013],{"class":593},[580,15272,15273],{"class":611},"theme-ocean",[580,15275,3013],{"class":593},[580,15277,3020],{"class":611},[580,15279,608],{"class":593},[580,15281,10418],{"class":593},[580,15283,15284,15286,15288,15290],{"class":582,"line":2505},[580,15285,10423],{"class":601},[580,15287,605],{"class":593},[580,15289,608],{"class":593},[580,15291,15149],{"class":611},[580,15293,15294],{"class":582,"line":2543},[580,15295,15296],{"class":611},"                     bg-white border-2 border-blue-300 text-blue-700 hover:border-blue-400\n",[580,15298,15299],{"class":582,"line":2580},[580,15300,15301],{"class":611},"                     theme-forest:border-green-200 theme-forest:text-green-700\n",[580,15303,15304,15307,15309],{"class":582,"line":2617},[580,15305,15306],{"class":611},"                     theme-ocean:bg-blue-600 theme-ocean:text-white theme-ocean:border-blue-600",[580,15308,608],{"class":593},[580,15310,617],{"class":593},[580,15312,15313],{"class":582,"line":2654},[580,15314,15315],{"class":642},"        🌊 Ocean\n",[580,15317,15318,15320,15322],{"class":582,"line":2684},[580,15319,2436],{"class":593},[580,15321,1177],{"class":597},[580,15323,617],{"class":593},[580,15325,15326,15328,15330],{"class":582,"line":2689},[580,15327,2719],{"class":593},[580,15329,598],{"class":597},[580,15331,617],{"class":593},[580,15333,15334],{"class":582,"line":2698},[580,15335,963],{"emptyLinePlaceholder":962},[580,15337,15338],{"class":582,"line":2707},[580,15339,15340],{"class":586},"    \u003C!-- Card -->\n",[580,15342,15343,15345,15347,15349,15351,15353],{"class":582,"line":2716},[580,15344,1195],{"class":593},[580,15346,598],{"class":597},[580,15348,602],{"class":601},[580,15350,605],{"class":593},[580,15352,608],{"class":593},[580,15354,15355],{"class":611},"bg-white theme-forest:bg-green-100\u002F50 theme-ocean:bg-blue-100\u002F50\n",[580,15357,15358],{"class":582,"line":2726},[580,15359,15360],{"class":611},"                border border-gray-200 theme-forest:border-green-300 theme-ocean:border-blue-300\n",[580,15362,15363,15366,15368],{"class":582,"line":2735},[580,15364,15365],{"class":611},"                rounded-xl p-6 shadow-sm mb-6",[580,15367,608],{"class":593},[580,15369,617],{"class":593},[580,15371,15372,15374,15376,15378,15380,15382],{"class":582,"line":2740},[580,15373,1743],{"class":593},[580,15375,427],{"class":597},[580,15377,602],{"class":601},[580,15379,605],{"class":593},[580,15381,608],{"class":593},[580,15383,15384],{"class":611},"text-lg font-semibold text-gray-900 \n",[580,15386,15387,15390,15392],{"class":582,"line":2746},[580,15388,15389],{"class":611},"                 theme-forest:text-green-900 theme-ocean:text-blue-900 mb-3",[580,15391,608],{"class":593},[580,15393,617],{"class":593},[580,15395,15396],{"class":582,"line":2770},[580,15397,15398],{"class":642},"        Welcome to Multi-Theme\n",[580,15400,15401,15403,15405],{"class":582,"line":2775},[580,15402,2436],{"class":593},[580,15404,427],{"class":597},[580,15406,617],{"class":593},[580,15408,15409,15411,15413,15415,15417,15419,15422,15424],{"class":582,"line":2781},[580,15410,1743],{"class":593},[580,15412,432],{"class":597},[580,15414,602],{"class":601},[580,15416,605],{"class":593},[580,15418,608],{"class":593},[580,15420,15421],{"class":611},"text-gray-600 theme-forest:text-green-800 theme-ocean:text-blue-800",[580,15423,608],{"class":593},[580,15425,617],{"class":593},[580,15427,15428],{"class":582,"line":2801},[580,15429,15430],{"class":642},"        Card này tự động đổi màu nền, viền, chữ theo theme được chọn. Tất cả từ custom variant.\n",[580,15432,15433,15435,15437],{"class":582,"line":2832},[580,15434,2436],{"class":593},[580,15436,432],{"class":597},[580,15438,617],{"class":593},[580,15440,15441,15443,15445,15447,15449,15451],{"class":582,"line":2861},[580,15442,1743],{"class":593},[580,15444,1177],{"class":597},[580,15446,602],{"class":601},[580,15448,605],{"class":593},[580,15450,608],{"class":593},[580,15452,15453],{"class":611},"mt-4 px-4 py-2 rounded-lg text-sm font-medium text-white transition-all\n",[580,15455,15456],{"class":582,"line":2890},[580,15457,15458],{"class":611},"                     bg-gray-900 hover:bg-gray-800\n",[580,15460,15461],{"class":582,"line":2899},[580,15462,15463],{"class":611},"                     theme-forest:bg-green-700 theme-forest:hover:bg-green-800\n",[580,15465,15466,15469,15471],{"class":582,"line":2929},[580,15467,15468],{"class":611},"                     theme-ocean:bg-blue-700 theme-ocean:hover:bg-blue-800",[580,15470,608],{"class":593},[580,15472,617],{"class":593},[580,15474,15475],{"class":582,"line":2957},[580,15476,15477],{"class":642},"        Action Button\n",[580,15479,15480,15482,15484],{"class":582,"line":2966},[580,15481,2436],{"class":593},[580,15483,1177],{"class":597},[580,15485,617],{"class":593},[580,15487,15488,15490,15492],{"class":582,"line":2975},[580,15489,2719],{"class":593},[580,15491,598],{"class":597},[580,15493,617],{"class":593},[580,15495,15496],{"class":582,"line":2980},[580,15497,963],{"emptyLinePlaceholder":962},[580,15499,15500],{"class":582,"line":2989},[580,15501,15502],{"class":586},"    \u003C!-- Stats -->\n",[580,15504,15505,15507,15509,15511,15513,15515,15518,15520],{"class":582,"line":3025},[580,15506,1195],{"class":593},[580,15508,598],{"class":597},[580,15510,602],{"class":601},[580,15512,605],{"class":593},[580,15514,608],{"class":593},[580,15516,15517],{"class":611},"grid grid-cols-3 gap-4 mb-6",[580,15519,608],{"class":593},[580,15521,617],{"class":593},[580,15523,15524,15526,15528,15530,15532,15534],{"class":582,"line":3053},[580,15525,1743],{"class":593},[580,15527,598],{"class":597},[580,15529,602],{"class":601},[580,15531,605],{"class":593},[580,15533,608],{"class":593},[580,15535,15536],{"class":611},"bg-white theme-forest:bg-green-50 theme-ocean:bg-blue-50\n",[580,15538,15539],{"class":582,"line":3081},[580,15540,15541],{"class":611},"                  border border-gray-200 theme-forest:border-green-200 theme-ocean:border-blue-200\n",[580,15543,15544,15547,15549],{"class":582,"line":3109},[580,15545,15546],{"class":611},"                  rounded-xl p-4 text-center",[580,15548,608],{"class":593},[580,15550,617],{"class":593},[580,15552,15553,15555,15557,15559,15561,15563],{"class":582,"line":3114},[580,15554,1773],{"class":593},[580,15556,432],{"class":597},[580,15558,602],{"class":601},[580,15560,605],{"class":593},[580,15562,608],{"class":593},[580,15564,15565],{"class":611},"text-2xl font-bold text-gray-900 \n",[580,15567,15568,15571,15573,15575,15578,15580,15582],{"class":582,"line":3145},[580,15569,15570],{"class":611},"                  theme-forest:text-green-700 theme-ocean:text-blue-700",[580,15572,608],{"class":593},[580,15574,639],{"class":593},[580,15576,15577],{"class":642},"128",[580,15579,646],{"class":593},[580,15581,432],{"class":597},[580,15583,617],{"class":593},[580,15585,15586,15588,15590,15592,15594,15596],{"class":582,"line":3174},[580,15587,1773],{"class":593},[580,15589,432],{"class":597},[580,15591,602],{"class":601},[580,15593,605],{"class":593},[580,15595,608],{"class":593},[580,15597,15598],{"class":611},"text-xs text-gray-500 \n",[580,15600,15601,15604,15606,15608,15611,15613,15615],{"class":582,"line":3200},[580,15602,15603],{"class":611},"                  theme-forest:text-green-600 theme-ocean:text-blue-600",[580,15605,608],{"class":593},[580,15607,639],{"class":593},[580,15609,15610],{"class":642},"Projects",[580,15612,646],{"class":593},[580,15614,432],{"class":597},[580,15616,617],{"class":593},[580,15618,15619,15621,15623],{"class":582,"line":3226},[580,15620,2436],{"class":593},[580,15622,598],{"class":597},[580,15624,617],{"class":593},[580,15626,15627,15629,15631,15633,15635,15637],{"class":582,"line":3236},[580,15628,1743],{"class":593},[580,15630,598],{"class":597},[580,15632,602],{"class":601},[580,15634,605],{"class":593},[580,15636,608],{"class":593},[580,15638,15536],{"class":611},[580,15640,15641],{"class":582,"line":3241},[580,15642,15541],{"class":611},[580,15644,15645,15647,15649],{"class":582,"line":3247},[580,15646,15546],{"class":611},[580,15648,608],{"class":593},[580,15650,617],{"class":593},[580,15652,15653,15655,15657,15659,15661,15663],{"class":582,"line":3283},[580,15654,1773],{"class":593},[580,15656,432],{"class":597},[580,15658,602],{"class":601},[580,15660,605],{"class":593},[580,15662,608],{"class":593},[580,15664,15565],{"class":611},[580,15666,15667,15669,15671,15673,15676,15678,15680],{"class":582,"line":3309},[580,15668,15570],{"class":611},[580,15670,608],{"class":593},[580,15672,639],{"class":593},[580,15674,15675],{"class":642},"3.2K",[580,15677,646],{"class":593},[580,15679,432],{"class":597},[580,15681,617],{"class":593},[580,15683,15684,15686,15688,15690,15692,15694],{"class":582,"line":3336},[580,15685,1773],{"class":593},[580,15687,432],{"class":597},[580,15689,602],{"class":601},[580,15691,605],{"class":593},[580,15693,608],{"class":593},[580,15695,15598],{"class":611},[580,15697,15698,15700,15702,15704,15706,15708,15710],{"class":582,"line":3363},[580,15699,15603],{"class":611},[580,15701,608],{"class":593},[580,15703,639],{"class":593},[580,15705,13685],{"class":642},[580,15707,646],{"class":593},[580,15709,432],{"class":597},[580,15711,617],{"class":593},[580,15713,15714,15716,15718],{"class":582,"line":3389},[580,15715,2436],{"class":593},[580,15717,598],{"class":597},[580,15719,617],{"class":593},[580,15721,15722,15724,15726,15728,15730,15732],{"class":582,"line":3399},[580,15723,1743],{"class":593},[580,15725,598],{"class":597},[580,15727,602],{"class":601},[580,15729,605],{"class":593},[580,15731,608],{"class":593},[580,15733,15536],{"class":611},[580,15735,15736],{"class":582,"line":3408},[580,15737,15541],{"class":611},[580,15739,15740,15742,15744],{"class":582,"line":3417},[580,15741,15546],{"class":611},[580,15743,608],{"class":593},[580,15745,617],{"class":593},[580,15747,15748,15750,15752,15754,15756,15758],{"class":582,"line":3422},[580,15749,1773],{"class":593},[580,15751,432],{"class":597},[580,15753,602],{"class":601},[580,15755,605],{"class":593},[580,15757,608],{"class":593},[580,15759,15565],{"class":611},[580,15761,15762,15764,15766,15768,15771,15773,15775],{"class":582,"line":3431},[580,15763,15570],{"class":611},[580,15765,608],{"class":593},[580,15767,639],{"class":593},[580,15769,15770],{"class":642},"99.9%",[580,15772,646],{"class":593},[580,15774,432],{"class":597},[580,15776,617],{"class":593},[580,15778,15779,15781,15783,15785,15787,15789],{"class":582,"line":5345},[580,15780,1773],{"class":593},[580,15782,432],{"class":597},[580,15784,602],{"class":601},[580,15786,605],{"class":593},[580,15788,608],{"class":593},[580,15790,15598],{"class":611},[580,15792,15793,15795,15797,15799,15802,15804,15806],{"class":582,"line":5364},[580,15794,15603],{"class":611},[580,15796,608],{"class":593},[580,15798,639],{"class":593},[580,15800,15801],{"class":642},"Uptime",[580,15803,646],{"class":593},[580,15805,432],{"class":597},[580,15807,617],{"class":593},[580,15809,15810,15812,15814],{"class":582,"line":5384},[580,15811,2436],{"class":593},[580,15813,598],{"class":597},[580,15815,617],{"class":593},[580,15817,15818,15820,15822],{"class":582,"line":5434},[580,15819,2719],{"class":593},[580,15821,598],{"class":597},[580,15823,617],{"class":593},[580,15825,15826],{"class":582,"line":5484},[580,15827,963],{"emptyLinePlaceholder":962},[580,15829,15830],{"class":582,"line":5493},[580,15831,15832],{"class":586},"    \u003C!-- Alert -->\n",[580,15834,15835,15837,15839,15841,15843,15845],{"class":582,"line":5502},[580,15836,1195],{"class":593},[580,15838,598],{"class":597},[580,15840,602],{"class":601},[580,15842,605],{"class":593},[580,15844,608],{"class":593},[580,15846,15847],{"class":611},"bg-amber-50 theme-forest:bg-green-100 theme-ocean:bg-blue-100\n",[580,15849,15850],{"class":582,"line":5530},[580,15851,15852],{"class":611},"                border border-amber-200 theme-forest:border-green-300 theme-ocean:border-blue-300\n",[580,15854,15855,15858,15860],{"class":582,"line":5558},[580,15856,15857],{"class":611},"                rounded-xl p-4 flex items-start gap-3",[580,15859,608],{"class":593},[580,15861,617],{"class":593},[580,15863,15864,15866,15868,15870,15872,15874,15877,15879,15881,15884,15886,15888],{"class":582,"line":5567},[580,15865,1743],{"class":593},[580,15867,580],{"class":597},[580,15869,602],{"class":601},[580,15871,605],{"class":593},[580,15873,608],{"class":593},[580,15875,15876],{"class":611},"text-amber-600 theme-forest:text-green-700 theme-ocean:text-blue-700 text-lg",[580,15878,608],{"class":593},[580,15880,639],{"class":593},[580,15882,15883],{"class":642},"💡",[580,15885,646],{"class":593},[580,15887,580],{"class":597},[580,15889,617],{"class":593},[580,15891,15892,15894,15896],{"class":582,"line":5572},[580,15893,1743],{"class":593},[580,15895,598],{"class":597},[580,15897,617],{"class":593},[580,15899,15900,15902,15904,15906,15908,15910,15913,15915],{"class":582,"line":5581},[580,15901,1773],{"class":593},[580,15903,432],{"class":597},[580,15905,602],{"class":601},[580,15907,605],{"class":593},[580,15909,608],{"class":593},[580,15911,15912],{"class":611},"font-medium text-amber-800 theme-forest:text-green-900 theme-ocean:text-blue-900",[580,15914,608],{"class":593},[580,15916,617],{"class":593},[580,15918,15919],{"class":582,"line":5586},[580,15920,15921],{"class":642},"          Custom Variant Power\n",[580,15923,15924,15926,15928],{"class":582,"line":5592},[580,15925,1863],{"class":593},[580,15927,432],{"class":597},[580,15929,617],{"class":593},[580,15931,15932,15934,15936,15938,15940,15942,15945,15947],{"class":582,"line":5612},[580,15933,1773],{"class":593},[580,15935,432],{"class":597},[580,15937,602],{"class":601},[580,15939,605],{"class":593},[580,15941,608],{"class":593},[580,15943,15944],{"class":611},"text-sm text-amber-700 theme-forest:text-green-800 theme-ocean:text-blue-800 mt-1",[580,15946,608],{"class":593},[580,15948,617],{"class":593},[580,15950,15951],{"class":582,"line":5641},[580,15952,15953],{"class":642},"          Mỗi element có thể có style riêng cho từng theme — tất cả inline, không cần CSS file riêng.\n",[580,15955,15956,15959,15961,15963,15965,15967,15969,15972,15974,15976,15978,15980,15982,15984],{"class":582,"line":5670},[580,15957,15958],{"class":642},"          Dùng ",[580,15960,594],{"class":593},[580,15962,491],{"class":597},[580,15964,602],{"class":601},[580,15966,605],{"class":593},[580,15968,608],{"class":593},[580,15970,15971],{"class":611},"bg-amber-200\u002F50 theme-forest:bg-green-200\u002F50 theme-ocean:bg-blue-200\u002F50 px-1 rounded",[580,15973,608],{"class":593},[580,15975,639],{"class":593},[580,15977,9707],{"class":642},[580,15979,646],{"class":593},[580,15981,491],{"class":597},[580,15983,639],{"class":593},[580,15985,15986],{"class":642}," trong CSS.\n",[580,15988,15989,15991,15993],{"class":582,"line":5699},[580,15990,1863],{"class":593},[580,15992,432],{"class":597},[580,15994,617],{"class":593},[580,15996,15997,15999,16001],{"class":582,"line":5728},[580,15998,2436],{"class":593},[580,16000,598],{"class":597},[580,16002,617],{"class":593},[580,16004,16005,16007,16009],{"class":582,"line":5757},[580,16006,2719],{"class":593},[580,16008,598],{"class":597},[580,16010,617],{"class":593},[580,16012,16013],{"class":582,"line":5786},[580,16014,963],{"emptyLinePlaceholder":962},[580,16016,16017,16019,16021],{"class":582,"line":5795},[580,16018,1215],{"class":593},[580,16020,598],{"class":597},[580,16022,617],{"class":593},[580,16024,16025],{"class":582,"line":5804},[580,16026,963],{"emptyLinePlaceholder":962},[580,16028,16029,16031,16033],{"class":582,"line":5809},[580,16030,623],{"class":593},[580,16032,1644],{"class":597},[580,16034,617],{"class":593},[580,16036,16037,16039,16041,16043,16046,16048],{"class":582,"line":5818},[580,16038,11760],{"class":601},[580,16040,11763],{"class":3006},[580,16042,3010],{"class":593},[580,16044,16045],{"class":3275},"themeClass",[580,16047,3020],{"class":593},[580,16049,970],{"class":593},[580,16051,16052,16054,16056,16058,16060,16062,16064],{"class":582,"line":11898},[580,16053,11926],{"class":601},[580,16055,1524],{"class":642},[580,16057,11932],{"class":593},[580,16059,3000],{"class":642},[580,16061,3003],{"class":593},[580,16063,11744],{"class":642},[580,16065,957],{"class":593},[580,16067,16068],{"class":582,"line":11904},[580,16069,16070],{"class":586},"      \u002F\u002F Remove all theme classes\n",[580,16072,16073,16076,16078,16080,16082,16084,16086,16088,16090,16092,16094,16096,16098,16100,16102],{"class":582,"line":11917},[580,16074,16075],{"class":642},"      html",[580,16077,3003],{"class":593},[580,16079,3153],{"class":642},[580,16081,3003],{"class":593},[580,16083,3348],{"class":3006},[580,16085,3010],{"class":597},[580,16087,3013],{"class":593},[580,16089,15202],{"class":611},[580,16091,3013],{"class":593},[580,16093,3134],{"class":593},[580,16095,11788],{"class":593},[580,16097,15273],{"class":611},[580,16099,3013],{"class":593},[580,16101,3020],{"class":597},[580,16103,957],{"class":593},[580,16105,16106],{"class":582,"line":11923},[580,16107,16108],{"class":586},"      \u002F\u002F Add selected theme\n",[580,16110,16111,16113,16115,16117,16119],{"class":582,"line":11955},[580,16112,11777],{"class":945},[580,16114,11780],{"class":597},[580,16116,16045],{"class":642},[580,16118,11795],{"class":597},[580,16120,11798],{"class":593},[580,16122,16123,16125,16127,16129,16131,16133,16135,16137,16139],{"class":582,"line":11974},[580,16124,11803],{"class":642},[580,16126,3003],{"class":593},[580,16128,3153],{"class":642},[580,16130,3003],{"class":593},[580,16132,3321],{"class":3006},[580,16134,3010],{"class":597},[580,16136,16045],{"class":642},[580,16138,3020],{"class":597},[580,16140,957],{"class":593},[580,16142,16143],{"class":582,"line":11979},[580,16144,11861],{"class":593},[580,16146,16147],{"class":582,"line":11985},[580,16148,16149],{"class":586},"      \u002F\u002F Save preference\n",[580,16151,16152,16154,16156,16158,16160,16162,16165,16167,16169,16172,16174],{"class":582,"line":12020},[580,16153,11866],{"class":642},[580,16155,3003],{"class":593},[580,16157,11560],{"class":3006},[580,16159,3010],{"class":597},[580,16161,3013],{"class":593},[580,16163,16164],{"class":611},"app-theme",[580,16166,3013],{"class":593},[580,16168,3134],{"class":593},[580,16170,16171],{"class":642}," themeClass",[580,16173,3020],{"class":597},[580,16175,957],{"class":593},[580,16177,16178],{"class":582,"line":12034},[580,16179,10271],{"class":593},[580,16181,16182],{"class":582,"line":12039},[580,16183,963],{"emptyLinePlaceholder":962},[580,16185,16186],{"class":582,"line":12044},[580,16187,16188],{"class":586},"    \u002F\u002F Restore theme on load\n",[580,16190,16191,16193,16196,16198,16200,16202,16204,16206,16208,16210,16212,16214],{"class":582,"line":12050},[580,16192,2992],{"class":601},[580,16194,16195],{"class":642}," savedTheme ",[580,16197,605],{"class":593},[580,16199,11935],{"class":642},[580,16201,3003],{"class":593},[580,16203,11940],{"class":3006},[580,16205,3010],{"class":642},[580,16207,3013],{"class":593},[580,16209,16164],{"class":611},[580,16211,3013],{"class":593},[580,16213,3020],{"class":642},[580,16215,957],{"class":593},[580,16217,16218,16221,16224],{"class":582,"line":12065},[580,16219,16220],{"class":945},"    if",[580,16222,16223],{"class":642}," (savedTheme) ",[580,16225,11798],{"class":593},[580,16227,16228,16230,16232,16234,16236],{"class":582,"line":12070},[580,16229,12198],{"class":3006},[580,16231,3010],{"class":597},[580,16233,11962],{"class":642},[580,16235,3020],{"class":597},[580,16237,957],{"class":593},[580,16239,16240],{"class":582,"line":12075},[580,16241,10271],{"class":593},[580,16243,16244,16246,16248],{"class":582,"line":12081},[580,16245,1215],{"class":593},[580,16247,1644],{"class":597},[580,16249,617],{"class":593},[580,16251,16252],{"class":582,"line":12097},[580,16253,963],{"emptyLinePlaceholder":962},[580,16255,16256,16258,16260],{"class":582,"line":12108},[580,16257,646],{"class":593},[580,16259,1677],{"class":597},[580,16261,617],{"class":593},[580,16263,16264,16266,16268],{"class":582,"line":12113},[580,16265,646],{"class":593},[580,16267,575],{"class":597},[580,16269,617],{"class":593},[432,16271,16272],{},[436,16273,3442],{},[804,16275,16276,16285,16294,16297],{},[807,16277,16278,16281,16282,3003],{},[491,16279,16280],{},"@custom-variant theme-forest (&:where(.theme-forest, .theme-forest *));",": Tạo variant mới kích hoạt khi phần tử nằm trong cây có class ",[491,16283,16284],{},".theme-forest",[807,16286,16287,16288,14443,16291,3003],{},"Mỗi element có 3 style: default + ",[491,16289,16290],{},"theme-forest:",[491,16292,16293],{},"theme-ocean:",[807,16295,16296],{},"Theme selector button cũng đổi style theo theme đang active (active theme button có màu đậm).",[807,16298,16299,16301],{},[491,16300,11060],{},": Lưu theme đã chọn.",[5863,16303],{},[427,16305,16307],{"id":16306},"_5-print-styles","5. Print Styles",[432,16309,16310,16311,16314],{},"Tailwind CSS v4 cung cấp ",[491,16312,16313],{},"print:"," variant để style khi in ấn:",[571,16316,16318],{"className":573,"code":16317,"language":575,"meta":576,"style":576},"\u003Cdiv class=\"bg-gray-100 print:bg-white shadow-lg print:shadow-none\">\n  \u003Cnav class=\"print:hidden\">\u003C!-- Ẩn navigation khi in -->\u003C\u002Fnav>\n  \u003Cmain class=\"p-8 print:p-0\">\n    \u003Ch1 class=\"text-4xl print:text-2xl\">Resume\u003C\u002Fh1>\n    \u003Ctable class=\"border print:border-black\">\u003C!-- Border rõ hơn khi in -->\u003C\u002Ftable>\n  \u003C\u002Fmain>\n\u003C\u002Fdiv>\n",[491,16319,16320,16339,16367,16386,16414,16442,16450],{"__ignoreMap":576},[580,16321,16322,16324,16326,16328,16330,16332,16335,16337],{"class":582,"line":583},[580,16323,594],{"class":593},[580,16325,598],{"class":597},[580,16327,602],{"class":601},[580,16329,605],{"class":593},[580,16331,608],{"class":593},[580,16333,16334],{"class":611},"bg-gray-100 print:bg-white shadow-lg print:shadow-none",[580,16336,608],{"class":593},[580,16338,617],{"class":593},[580,16340,16341,16343,16345,16347,16349,16351,16354,16356,16358,16361,16363,16365],{"class":582,"line":590},[580,16342,623],{"class":593},[580,16344,1163],{"class":597},[580,16346,602],{"class":601},[580,16348,605],{"class":593},[580,16350,608],{"class":593},[580,16352,16353],{"class":611},"print:hidden",[580,16355,608],{"class":593},[580,16357,639],{"class":593},[580,16359,16360],{"class":586},"\u003C!-- Ẩn navigation khi in -->",[580,16362,646],{"class":593},[580,16364,1163],{"class":597},[580,16366,617],{"class":593},[580,16368,16369,16371,16373,16375,16377,16379,16382,16384],{"class":582,"line":620},[580,16370,623],{"class":593},[580,16372,1117],{"class":597},[580,16374,602],{"class":601},[580,16376,605],{"class":593},[580,16378,608],{"class":593},[580,16380,16381],{"class":611},"p-8 print:p-0",[580,16383,608],{"class":593},[580,16385,617],{"class":593},[580,16387,16388,16390,16392,16394,16396,16398,16401,16403,16405,16408,16410,16412],{"class":582,"line":653},[580,16389,1195],{"class":593},[580,16391,1395],{"class":597},[580,16393,602],{"class":601},[580,16395,605],{"class":593},[580,16397,608],{"class":593},[580,16399,16400],{"class":611},"text-4xl print:text-2xl",[580,16402,608],{"class":593},[580,16404,639],{"class":593},[580,16406,16407],{"class":642},"Resume",[580,16409,646],{"class":593},[580,16411,1395],{"class":597},[580,16413,617],{"class":593},[580,16415,16416,16418,16420,16422,16424,16426,16429,16431,16433,16436,16438,16440],{"class":582,"line":681},[580,16417,1195],{"class":593},[580,16419,450],{"class":597},[580,16421,602],{"class":601},[580,16423,605],{"class":593},[580,16425,608],{"class":593},[580,16427,16428],{"class":611},"border print:border-black",[580,16430,608],{"class":593},[580,16432,639],{"class":593},[580,16434,16435],{"class":586},"\u003C!-- Border rõ hơn khi in -->",[580,16437,646],{"class":593},[580,16439,450],{"class":597},[580,16441,617],{"class":593},[580,16443,16444,16446,16448],{"class":582,"line":709},[580,16445,1215],{"class":593},[580,16447,1117],{"class":597},[580,16449,617],{"class":593},[580,16451,16452,16454,16456],{"class":582,"line":737},[580,16453,646],{"class":593},[580,16455,598],{"class":597},[580,16457,617],{"class":593},[445,16459,16461],{"id":16460},"_51-bài-tập-8-print-friendly-resume-layout","5.1. BÀI TẬP 8 — Print-Friendly Resume Layout",[432,16463,16464,16466],{},[436,16465,1491],{}," CV\u002Fresume layout:",[804,16468,16469,16472],{},[807,16470,16471],{},"Trên màn hình: thiết kế đẹp với màu sắc, shadow, navigation.",[807,16473,16474],{},"Khi in: ẩn navigation, tối ưu text size, bỏ shadow\u002Fbackground, hiện link URL.",[432,16476,16477],{},[436,16478,1508],{},[571,16480,16482],{"className":573,"code":16481,"language":575,"meta":576,"style":576},"\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>Print-Friendly Resume - Tailwind CSS v4\u003C\u002Ftitle>\n  \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tailwindcss\u002Fbrowser@4\">\u003C\u002Fscript>\n  \u003Cstyle>\n    @media print {\n      @page {\n        margin: 1.5cm;\n        size: A4;\n      }\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody class=\"min-h-screen bg-gray-100 print:bg-white\">\n\n  \u003C!-- Navigation (hidden when printing) -->\n  \u003Cnav class=\"print:hidden bg-white border-b border-gray-200 sticky top-0 z-10\">\n    \u003Cdiv class=\"max-w-3xl mx-auto px-4 py-3 flex items-center justify-between\">\n      \u003Cspan class=\"font-bold text-gray-900\">Resume Preview\u003C\u002Fspan>\n      \u003Cbutton onclick=\"window.print()\" \n              class=\"px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors\">\n        🖨️ Print \u002F Save PDF\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fnav>\n\n  \u003C!-- Resume Content -->\n  \u003Cmain class=\"max-w-3xl mx-auto my-8 print:my-0\">\n    \u003Cdiv class=\"bg-white shadow-lg print:shadow-none rounded-2xl print:rounded-none overflow-hidden\">\n      \n      \u003C!-- Header -->\n      \u003Cheader class=\"bg-gradient-to-r from-blue-600 to-purple-600 \n                     print:bg-white print:border-b print:border-gray-300\n                     px-8 py-10 print:px-0 print:py-6\">\n        \u003Ch1 class=\"text-4xl print:text-3xl font-bold text-white print:text-gray-900\">\n          Nguyen Van A\n        \u003C\u002Fh1>\n        \u003Cp class=\"text-blue-100 print:text-gray-600 text-lg mt-2 print:mt-1\">\n          Senior Frontend Developer\n        \u003C\u002Fp>\n        \u003Cdiv class=\"flex flex-wrap gap-4 mt-4 print:mt-2 text-sm text-blue-100 print:text-gray-600\">\n          \u003Cspan>📧 email@example.com\u003C\u002Fspan>\n          \u003Cspan>📱 +84 123 456 789\u003C\u002Fspan>\n          \u003Cspan>📍 Ho Chi Minh City\u003C\u002Fspan>\n          \u003Cspan class=\"print:hidden\">🌐 portfolio.dev\u003C\u002Fspan>\n          \u003C!-- Show URL when printing -->\n          \u003Cspan class=\"hidden print:inline\">🔗 https:\u002F\u002Fportfolio.dev\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Fheader>\n\n      \u003C!-- Body -->\n      \u003Cdiv class=\"p-8 print:p-0 print:pt-6\">\n        \n        \u003C!-- Summary -->\n        \u003Csection class=\"mb-8 print:mb-4\">\n          \u003Ch2 class=\"text-lg font-bold text-gray-900 uppercase tracking-wider \n                     border-b-2 border-blue-500 pb-2 mb-3\">\n            Professional Summary\n          \u003C\u002Fh2>\n          \u003Cp class=\"text-gray-700 print:text-gray-900 leading-relaxed\">\n            Frontend developer với 5 năm kinh nghiệm xây dựng web applications sử dụng React, Vue.js, và TypeScript. \n            Đam mê performance optimization, design systems, và developer experience.\n          \u003C\u002Fp>\n        \u003C\u002Fsection>\n\n        \u003C!-- Experience -->\n        \u003Csection class=\"mb-8 print:mb-4\">\n          \u003Ch2 class=\"text-lg font-bold text-gray-900 uppercase tracking-wider \n                     border-b-2 border-blue-500 pb-2 mb-3\">\n            Work Experience\n          \u003C\u002Fh2>\n          \n          \u003Cdiv class=\"mb-4 print:mb-2\">\n            \u003Cdiv class=\"flex justify-between items-baseline\">\n              \u003Ch3 class=\"font-semibold text-gray-900\">Senior Frontend Developer\u003C\u002Fh3>\n              \u003Cspan class=\"text-sm text-gray-500 print:text-gray-700\">2023 — Present\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-blue-600 print:text-gray-700 text-sm font-medium\">Tech Company ABC\u003C\u002Fp>\n            \u003Cul class=\"list-disc list-inside text-gray-700 print:text-gray-900 text-sm mt-2 space-y-1\">\n              \u003Cli>Lead team 4 developers xây dựng design system với React + TypeScript\u003C\u002Fli>\n              \u003Cli>Giảm 40% bundle size qua code splitting và tree shaking\u003C\u002Fli>\n              \u003Cli>Migration từ CSS Modules sang Tailwind CSS — giảm 60% CSS bundle\u003C\u002Fli>\n            \u003C\u002Ful>\n          \u003C\u002Fdiv>\n\n          \u003Cdiv class=\"mb-4 print:mb-2\">\n            \u003Cdiv class=\"flex justify-between items-baseline\">\n              \u003Ch3 class=\"font-semibold text-gray-900\">Frontend Developer\u003C\u002Fh3>\n              \u003Cspan class=\"text-sm text-gray-500 print:text-gray-700\">2020 — 2023\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003Cp class=\"text-blue-600 print:text-gray-700 text-sm font-medium\">Startup XYZ\u003C\u002Fp>\n            \u003Cul class=\"list-disc list-inside text-gray-700 print:text-gray-900 text-sm mt-2 space-y-1\">\n              \u003Cli>Xây dựng SPA với Vue 3 + Pinia — phục vụ 100K+ users\u003C\u002Fli>\n              \u003Cli>Tích hợp CI\u002FCD pipeline với GitHub Actions và Vercel\u003C\u002Fli>\n              \u003Cli>Viết unit\u002Fintegration test với Vitest — coverage 85%+\u003C\u002Fli>\n            \u003C\u002Ful>\n          \u003C\u002Fdiv>\n        \u003C\u002Fsection>\n\n        \u003C!-- Skills -->\n        \u003Csection class=\"mb-8 print:mb-4\">\n          \u003Ch2 class=\"text-lg font-bold text-gray-900 uppercase tracking-wider \n                     border-b-2 border-blue-500 pb-2 mb-3\">\n            Skills\n          \u003C\u002Fh2>\n          \u003Cdiv class=\"flex flex-wrap gap-2\">\n            \u003Cspan class=\"px-3 py-1 bg-blue-100 text-blue-700 \n                         print:bg-gray-100 print:text-gray-900 print:border print:border-gray-300\n                         rounded-full text-sm font-medium\">React\u003C\u002Fspan>\n            \u003Cspan class=\"px-3 py-1 bg-blue-100 text-blue-700 \n                         print:bg-gray-100 print:text-gray-900 print:border print:border-gray-300\n                         rounded-full text-sm font-medium\">Vue.js\u003C\u002Fspan>\n            \u003Cspan class=\"px-3 py-1 bg-blue-100 text-blue-700 \n                         print:bg-gray-100 print:text-gray-900 print:border print:border-gray-300\n                         rounded-full text-sm font-medium\">TypeScript\u003C\u002Fspan>\n            \u003Cspan class=\"px-3 py-1 bg-blue-100 text-blue-700 \n                         print:bg-gray-100 print:text-gray-900 print:border print:border-gray-300\n                         rounded-full text-sm font-medium\">Tailwind CSS\u003C\u002Fspan>\n            \u003Cspan class=\"px-3 py-1 bg-blue-100 text-blue-700 \n                         print:bg-gray-100 print:text-gray-900 print:border print:border-gray-300\n                         rounded-full text-sm font-medium\">Next.js\u003C\u002Fspan>\n            \u003Cspan class=\"px-3 py-1 bg-blue-100 text-blue-700 \n                         print:bg-gray-100 print:text-gray-900 print:border print:border-gray-300\n                         rounded-full text-sm font-medium\">Nuxt\u003C\u002Fspan>\n            \u003Cspan class=\"px-3 py-1 bg-blue-100 text-blue-700 \n                         print:bg-gray-100 print:text-gray-900 print:border print:border-gray-300\n                         rounded-full text-sm font-medium\">Node.js\u003C\u002Fspan>\n            \u003Cspan class=\"px-3 py-1 bg-blue-100 text-blue-700 \n                         print:bg-gray-100 print:text-gray-900 print:border print:border-gray-300\n                         rounded-full text-sm font-medium\">PostgreSQL\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n        \u003C\u002Fsection>\n\n        \u003C!-- Education -->\n        \u003Csection class=\"mb-8 print:mb-4\">\n          \u003Ch2 class=\"text-lg font-bold text-gray-900 uppercase tracking-wider \n                     border-b-2 border-blue-500 pb-2 mb-3\">\n            Education\n          \u003C\u002Fh2>\n          \u003Cdiv class=\"flex justify-between items-baseline\">\n            \u003Cdiv>\n              \u003Ch3 class=\"font-semibold text-gray-900\">Bachelor of Computer Science\u003C\u002Fh3>\n              \u003Cp class=\"text-blue-600 print:text-gray-700 text-sm\">University of Technology\u003C\u002Fp>\n            \u003C\u002Fdiv>\n            \u003Cspan class=\"text-sm text-gray-500 print:text-gray-700\">2016 — 2020\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n        \u003C\u002Fsection>\n\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fmain>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[491,16483,16484,16494,16512,16520,16538,16566,16583,16605,16613,16623,16630,16642,16654,16658,16662,16670,16678,16697,16701,16706,16725,16744,16772,16797,16812,16817,16825,16833,16841,16845,16850,16869,16888,16892,16897,16912,16917,16926,16945,16950,16958,16977,16982,16990,17009,17026,17043,17060,17087,17092,17120,17128,17136,17140,17145,17164,17168,17173,17192,17207,17216,17221,17229,17248,17253,17258,17266,17274,17278,17283,17301,17315,17323,17328,17336,17341,17360,17379,17407,17435,17443,17471,17490,17507,17524,17541,17549,17557,17561,17579,17597,17624,17651,17659,17686,17704,17721,17738,17755,17763,17771,17779,17783,17788,17806,17820,17828,17833,17841,17860,17875,17880,17898,17912,17916,17933,17947,17951,17967,17981,17985,18001,18015,18019,18036,18050,18054,18071,18085,18089,18106,18120,18124,18140,18148,18156,18160,18165,18183,18197,18205,18210,18218,18236,18244,18271,18299,18307,18334,18342,18350,18354,18362,18370,18378,18382,18390],{"__ignoreMap":576},[580,16485,16486,16488,16490,16492],{"class":582,"line":583},[580,16487,1518],{"class":593},[580,16489,1521],{"class":597},[580,16491,1524],{"class":601},[580,16493,617],{"class":593},[580,16495,16496,16498,16500,16502,16504,16506,16508,16510],{"class":582,"line":590},[580,16497,594],{"class":593},[580,16499,575],{"class":597},[580,16501,1535],{"class":601},[580,16503,605],{"class":593},[580,16505,608],{"class":593},[580,16507,1542],{"class":611},[580,16509,608],{"class":593},[580,16511,617],{"class":593},[580,16513,16514,16516,16518],{"class":582,"line":620},[580,16515,594],{"class":593},[580,16517,1564],{"class":597},[580,16519,617],{"class":593},[580,16521,16522,16524,16526,16528,16530,16532,16534,16536],{"class":582,"line":653},[580,16523,623],{"class":593},[580,16525,1573],{"class":597},[580,16527,1576],{"class":601},[580,16529,605],{"class":593},[580,16531,608],{"class":593},[580,16533,1583],{"class":611},[580,16535,608],{"class":593},[580,16537,617],{"class":593},[580,16539,16540,16542,16544,16546,16548,16550,16552,16554,16556,16558,16560,16562,16564],{"class":582,"line":681},[580,16541,623],{"class":593},[580,16543,1573],{"class":597},[580,16545,1596],{"class":601},[580,16547,605],{"class":593},[580,16549,608],{"class":593},[580,16551,1603],{"class":611},[580,16553,608],{"class":593},[580,16555,1608],{"class":601},[580,16557,605],{"class":593},[580,16559,608],{"class":593},[580,16561,1615],{"class":611},[580,16563,608],{"class":593},[580,16565,617],{"class":593},[580,16567,16568,16570,16572,16574,16577,16579,16581],{"class":582,"line":709},[580,16569,623],{"class":593},[580,16571,1626],{"class":597},[580,16573,639],{"class":593},[580,16575,16576],{"class":642},"Print-Friendly Resume - Tailwind CSS v4",[580,16578,646],{"class":593},[580,16580,1626],{"class":597},[580,16582,617],{"class":593},[580,16584,16585,16587,16589,16591,16593,16595,16597,16599,16601,16603],{"class":582,"line":737},[580,16586,623],{"class":593},[580,16588,1644],{"class":597},[580,16590,1647],{"class":601},[580,16592,605],{"class":593},[580,16594,608],{"class":593},[580,16596,1654],{"class":611},[580,16598,608],{"class":593},[580,16600,1282],{"class":593},[580,16602,1644],{"class":597},[580,16604,617],{"class":593},[580,16606,16607,16609,16611],{"class":582,"line":765},[580,16608,623],{"class":593},[580,16610,10173],{"class":597},[580,16612,617],{"class":593},[580,16614,16615,16618,16621],{"class":582,"line":793},[580,16616,16617],{"class":945},"    @media",[580,16619,16620],{"class":642}," print ",[580,16622,11798],{"class":593},[580,16624,16625,16628],{"class":582,"line":896},[580,16626,16627],{"class":945},"      @page",[580,16629,970],{"class":593},[580,16631,16632,16635,16637,16640],{"class":582,"line":1029},[580,16633,16634],{"class":10232},"        margin",[580,16636,933],{"class":593},[580,16638,16639],{"class":10241}," 1.5cm",[580,16641,957],{"class":593},[580,16643,16644,16647,16649,16652],{"class":582,"line":1212},[580,16645,16646],{"class":10232},"        size",[580,16648,933],{"class":593},[580,16650,16651],{"class":642}," A4",[580,16653,957],{"class":593},[580,16655,16656],{"class":582,"line":1222},[580,16657,11861],{"class":593},[580,16659,16660],{"class":582,"line":1228},[580,16661,10271],{"class":593},[580,16663,16664,16666,16668],{"class":582,"line":1248},[580,16665,1215],{"class":593},[580,16667,10173],{"class":597},[580,16669,617],{"class":593},[580,16671,16672,16674,16676],{"class":582,"line":1289},[580,16673,646],{"class":593},[580,16675,1564],{"class":597},[580,16677,617],{"class":593},[580,16679,16680,16682,16684,16686,16688,16690,16693,16695],{"class":582,"line":1325},[580,16681,594],{"class":593},[580,16683,1677],{"class":597},[580,16685,602],{"class":601},[580,16687,605],{"class":593},[580,16689,608],{"class":593},[580,16691,16692],{"class":611},"min-h-screen bg-gray-100 print:bg-white",[580,16694,608],{"class":593},[580,16696,617],{"class":593},[580,16698,16699],{"class":582,"line":1361},[580,16700,963],{"emptyLinePlaceholder":962},[580,16702,16703],{"class":582,"line":1370},[580,16704,16705],{"class":586},"  \u003C!-- Navigation (hidden when printing) -->\n",[580,16707,16708,16710,16712,16714,16716,16718,16721,16723],{"class":582,"line":1379},[580,16709,623],{"class":593},[580,16711,1163],{"class":597},[580,16713,602],{"class":601},[580,16715,605],{"class":593},[580,16717,608],{"class":593},[580,16719,16720],{"class":611},"print:hidden bg-white border-b border-gray-200 sticky top-0 z-10",[580,16722,608],{"class":593},[580,16724,617],{"class":593},[580,16726,16727,16729,16731,16733,16735,16737,16740,16742],{"class":582,"line":1384},[580,16728,1195],{"class":593},[580,16730,598],{"class":597},[580,16732,602],{"class":601},[580,16734,605],{"class":593},[580,16736,608],{"class":593},[580,16738,16739],{"class":611},"max-w-3xl mx-auto px-4 py-3 flex items-center justify-between",[580,16741,608],{"class":593},[580,16743,617],{"class":593},[580,16745,16746,16748,16750,16752,16754,16756,16759,16761,16763,16766,16768,16770],{"class":582,"line":1390},[580,16747,1743],{"class":593},[580,16749,580],{"class":597},[580,16751,602],{"class":601},[580,16753,605],{"class":593},[580,16755,608],{"class":593},[580,16757,16758],{"class":611},"font-bold text-gray-900",[580,16760,608],{"class":593},[580,16762,639],{"class":593},[580,16764,16765],{"class":642},"Resume Preview",[580,16767,646],{"class":593},[580,16769,580],{"class":597},[580,16771,617],{"class":593},[580,16773,16774,16776,16778,16780,16782,16784,16786,16788,16791,16793,16795],{"class":582,"line":1411},[580,16775,1743],{"class":593},[580,16777,1177],{"class":597},[580,16779,12721],{"class":601},[580,16781,605],{"class":593},[580,16783,608],{"class":593},[580,16785,11992],{"class":642},[580,16787,3003],{"class":593},[580,16789,16790],{"class":3006},"print",[580,16792,11912],{"class":611},[580,16794,608],{"class":593},[580,16796,10418],{"class":593},[580,16798,16799,16801,16803,16805,16808,16810],{"class":582,"line":1417},[580,16800,10423],{"class":601},[580,16802,605],{"class":593},[580,16804,608],{"class":593},[580,16806,16807],{"class":611},"px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors",[580,16809,608],{"class":593},[580,16811,617],{"class":593},[580,16813,16814],{"class":582,"line":1426},[580,16815,16816],{"class":642},"        🖨️ Print \u002F Save PDF\n",[580,16818,16819,16821,16823],{"class":582,"line":1431},[580,16820,2436],{"class":593},[580,16822,1177],{"class":597},[580,16824,617],{"class":593},[580,16826,16827,16829,16831],{"class":582,"line":1437},[580,16828,2719],{"class":593},[580,16830,598],{"class":597},[580,16832,617],{"class":593},[580,16834,16835,16837,16839],{"class":582,"line":1458},[580,16836,1215],{"class":593},[580,16838,1163],{"class":597},[580,16840,617],{"class":593},[580,16842,16843],{"class":582,"line":1476},[580,16844,963],{"emptyLinePlaceholder":962},[580,16846,16847],{"class":582,"line":2078},[580,16848,16849],{"class":586},"  \u003C!-- Resume Content -->\n",[580,16851,16852,16854,16856,16858,16860,16862,16865,16867],{"class":582,"line":2084},[580,16853,623],{"class":593},[580,16855,1117],{"class":597},[580,16857,602],{"class":601},[580,16859,605],{"class":593},[580,16861,608],{"class":593},[580,16863,16864],{"class":611},"max-w-3xl mx-auto my-8 print:my-0",[580,16866,608],{"class":593},[580,16868,617],{"class":593},[580,16870,16871,16873,16875,16877,16879,16881,16884,16886],{"class":582,"line":2093},[580,16872,1195],{"class":593},[580,16874,598],{"class":597},[580,16876,602],{"class":601},[580,16878,605],{"class":593},[580,16880,608],{"class":593},[580,16882,16883],{"class":611},"bg-white shadow-lg print:shadow-none rounded-2xl print:rounded-none overflow-hidden",[580,16885,608],{"class":593},[580,16887,617],{"class":593},[580,16889,16890],{"class":582,"line":2102},[580,16891,3780],{"class":642},[580,16893,16894],{"class":582,"line":2107},[580,16895,16896],{"class":586},"      \u003C!-- Header -->\n",[580,16898,16899,16901,16903,16905,16907,16909],{"class":582,"line":2113},[580,16900,1743],{"class":593},[580,16902,1706],{"class":597},[580,16904,602],{"class":601},[580,16906,605],{"class":593},[580,16908,608],{"class":593},[580,16910,16911],{"class":611},"bg-gradient-to-r from-blue-600 to-purple-600 \n",[580,16913,16914],{"class":582,"line":2157},[580,16915,16916],{"class":611},"                     print:bg-white print:border-b print:border-gray-300\n",[580,16918,16919,16922,16924],{"class":582,"line":2163},[580,16920,16921],{"class":611},"                     px-8 py-10 print:px-0 print:py-6",[580,16923,608],{"class":593},[580,16925,617],{"class":593},[580,16927,16928,16930,16932,16934,16936,16938,16941,16943],{"class":582,"line":2230},[580,16929,1773],{"class":593},[580,16931,1395],{"class":597},[580,16933,602],{"class":601},[580,16935,605],{"class":593},[580,16937,608],{"class":593},[580,16939,16940],{"class":611},"text-4xl print:text-3xl font-bold text-white print:text-gray-900",[580,16942,608],{"class":593},[580,16944,617],{"class":593},[580,16946,16947],{"class":582,"line":2289},[580,16948,16949],{"class":642},"          Nguyen Van A\n",[580,16951,16952,16954,16956],{"class":582,"line":2298},[580,16953,1863],{"class":593},[580,16955,1395],{"class":597},[580,16957,617],{"class":593},[580,16959,16960,16962,16964,16966,16968,16970,16973,16975],{"class":582,"line":2304},[580,16961,1773],{"class":593},[580,16963,432],{"class":597},[580,16965,602],{"class":601},[580,16967,605],{"class":593},[580,16969,608],{"class":593},[580,16971,16972],{"class":611},"text-blue-100 print:text-gray-600 text-lg mt-2 print:mt-1",[580,16974,608],{"class":593},[580,16976,617],{"class":593},[580,16978,16979],{"class":582,"line":2365},[580,16980,16981],{"class":642},"          Senior Frontend Developer\n",[580,16983,16984,16986,16988],{"class":582,"line":2415},[580,16985,1863],{"class":593},[580,16987,432],{"class":597},[580,16989,617],{"class":593},[580,16991,16992,16994,16996,16998,17000,17002,17005,17007],{"class":582,"line":2424},[580,16993,1773],{"class":593},[580,16995,598],{"class":597},[580,16997,602],{"class":601},[580,16999,605],{"class":593},[580,17001,608],{"class":593},[580,17003,17004],{"class":611},"flex flex-wrap gap-4 mt-4 print:mt-2 text-sm text-blue-100 print:text-gray-600",[580,17006,608],{"class":593},[580,17008,617],{"class":593},[580,17010,17011,17013,17015,17017,17020,17022,17024],{"class":582,"line":2433},[580,17012,1793],{"class":593},[580,17014,580],{"class":597},[580,17016,639],{"class":593},[580,17018,17019],{"class":642},"📧 email@example.com",[580,17021,646],{"class":593},[580,17023,580],{"class":597},[580,17025,617],{"class":593},[580,17027,17028,17030,17032,17034,17037,17039,17041],{"class":582,"line":2443},[580,17029,1793],{"class":593},[580,17031,580],{"class":597},[580,17033,639],{"class":593},[580,17035,17036],{"class":642},"📱 +84 123 456 789",[580,17038,646],{"class":593},[580,17040,580],{"class":597},[580,17042,617],{"class":593},[580,17044,17045,17047,17049,17051,17054,17056,17058],{"class":582,"line":2448},[580,17046,1793],{"class":593},[580,17048,580],{"class":597},[580,17050,639],{"class":593},[580,17052,17053],{"class":642},"📍 Ho Chi Minh City",[580,17055,646],{"class":593},[580,17057,580],{"class":597},[580,17059,617],{"class":593},[580,17061,17062,17064,17066,17068,17070,17072,17074,17076,17078,17081,17083,17085],{"class":582,"line":2454},[580,17063,1793],{"class":593},[580,17065,580],{"class":597},[580,17067,602],{"class":601},[580,17069,605],{"class":593},[580,17071,608],{"class":593},[580,17073,16353],{"class":611},[580,17075,608],{"class":593},[580,17077,639],{"class":593},[580,17079,17080],{"class":642},"🌐 portfolio.dev",[580,17082,646],{"class":593},[580,17084,580],{"class":597},[580,17086,617],{"class":593},[580,17088,17089],{"class":582,"line":2485},[580,17090,17091],{"class":586},"          \u003C!-- Show URL when printing -->\n",[580,17093,17094,17096,17098,17100,17102,17104,17107,17109,17111,17114,17116,17118],{"class":582,"line":2505},[580,17095,1793],{"class":593},[580,17097,580],{"class":597},[580,17099,602],{"class":601},[580,17101,605],{"class":593},[580,17103,608],{"class":593},[580,17105,17106],{"class":611},"hidden print:inline",[580,17108,608],{"class":593},[580,17110,639],{"class":593},[580,17112,17113],{"class":642},"🔗 https:\u002F\u002Fportfolio.dev",[580,17115,646],{"class":593},[580,17117,580],{"class":597},[580,17119,617],{"class":593},[580,17121,17122,17124,17126],{"class":582,"line":2543},[580,17123,1863],{"class":593},[580,17125,598],{"class":597},[580,17127,617],{"class":593},[580,17129,17130,17132,17134],{"class":582,"line":2580},[580,17131,2436],{"class":593},[580,17133,1706],{"class":597},[580,17135,617],{"class":593},[580,17137,17138],{"class":582,"line":2617},[580,17139,963],{"emptyLinePlaceholder":962},[580,17141,17142],{"class":582,"line":2654},[580,17143,17144],{"class":586},"      \u003C!-- Body -->\n",[580,17146,17147,17149,17151,17153,17155,17157,17160,17162],{"class":582,"line":2684},[580,17148,1743],{"class":593},[580,17150,598],{"class":597},[580,17152,602],{"class":601},[580,17154,605],{"class":593},[580,17156,608],{"class":593},[580,17158,17159],{"class":611},"p-8 print:p-0 print:pt-6",[580,17161,608],{"class":593},[580,17163,617],{"class":593},[580,17165,17166],{"class":582,"line":2689},[580,17167,1763],{"class":642},[580,17169,17170],{"class":582,"line":2698},[580,17171,17172],{"class":586},"        \u003C!-- Summary -->\n",[580,17174,17175,17177,17179,17181,17183,17185,17188,17190],{"class":582,"line":2707},[580,17176,1773],{"class":593},[580,17178,1442],{"class":597},[580,17180,602],{"class":601},[580,17182,605],{"class":593},[580,17184,608],{"class":593},[580,17186,17187],{"class":611},"mb-8 print:mb-4",[580,17189,608],{"class":593},[580,17191,617],{"class":593},[580,17193,17194,17196,17198,17200,17202,17204],{"class":582,"line":2716},[580,17195,1793],{"class":593},[580,17197,427],{"class":597},[580,17199,602],{"class":601},[580,17201,605],{"class":593},[580,17203,608],{"class":593},[580,17205,17206],{"class":611},"text-lg font-bold text-gray-900 uppercase tracking-wider \n",[580,17208,17209,17212,17214],{"class":582,"line":2726},[580,17210,17211],{"class":611},"                     border-b-2 border-blue-500 pb-2 mb-3",[580,17213,608],{"class":593},[580,17215,617],{"class":593},[580,17217,17218],{"class":582,"line":2735},[580,17219,17220],{"class":642},"            Professional Summary\n",[580,17222,17223,17225,17227],{"class":582,"line":2740},[580,17224,1854],{"class":593},[580,17226,427],{"class":597},[580,17228,617],{"class":593},[580,17230,17231,17233,17235,17237,17239,17241,17244,17246],{"class":582,"line":2746},[580,17232,1793],{"class":593},[580,17234,432],{"class":597},[580,17236,602],{"class":601},[580,17238,605],{"class":593},[580,17240,608],{"class":593},[580,17242,17243],{"class":611},"text-gray-700 print:text-gray-900 leading-relaxed",[580,17245,608],{"class":593},[580,17247,617],{"class":593},[580,17249,17250],{"class":582,"line":2770},[580,17251,17252],{"class":642},"            Frontend developer với 5 năm kinh nghiệm xây dựng web applications sử dụng React, Vue.js, và TypeScript. \n",[580,17254,17255],{"class":582,"line":2775},[580,17256,17257],{"class":642},"            Đam mê performance optimization, design systems, và developer experience.\n",[580,17259,17260,17262,17264],{"class":582,"line":2781},[580,17261,1854],{"class":593},[580,17263,432],{"class":597},[580,17265,617],{"class":593},[580,17267,17268,17270,17272],{"class":582,"line":2801},[580,17269,1863],{"class":593},[580,17271,1442],{"class":597},[580,17273,617],{"class":593},[580,17275,17276],{"class":582,"line":2832},[580,17277,963],{"emptyLinePlaceholder":962},[580,17279,17280],{"class":582,"line":2861},[580,17281,17282],{"class":586},"        \u003C!-- Experience -->\n",[580,17284,17285,17287,17289,17291,17293,17295,17297,17299],{"class":582,"line":2890},[580,17286,1773],{"class":593},[580,17288,1442],{"class":597},[580,17290,602],{"class":601},[580,17292,605],{"class":593},[580,17294,608],{"class":593},[580,17296,17187],{"class":611},[580,17298,608],{"class":593},[580,17300,617],{"class":593},[580,17302,17303,17305,17307,17309,17311,17313],{"class":582,"line":2899},[580,17304,1793],{"class":593},[580,17306,427],{"class":597},[580,17308,602],{"class":601},[580,17310,605],{"class":593},[580,17312,608],{"class":593},[580,17314,17206],{"class":611},[580,17316,17317,17319,17321],{"class":582,"line":2929},[580,17318,17211],{"class":611},[580,17320,608],{"class":593},[580,17322,617],{"class":593},[580,17324,17325],{"class":582,"line":2957},[580,17326,17327],{"class":642},"            Work Experience\n",[580,17329,17330,17332,17334],{"class":582,"line":2966},[580,17331,1854],{"class":593},[580,17333,427],{"class":597},[580,17335,617],{"class":593},[580,17337,17338],{"class":582,"line":2975},[580,17339,17340],{"class":642},"          \n",[580,17342,17343,17345,17347,17349,17351,17353,17356,17358],{"class":582,"line":2980},[580,17344,1793],{"class":593},[580,17346,598],{"class":597},[580,17348,602],{"class":601},[580,17350,605],{"class":593},[580,17352,608],{"class":593},[580,17354,17355],{"class":611},"mb-4 print:mb-2",[580,17357,608],{"class":593},[580,17359,617],{"class":593},[580,17361,17362,17364,17366,17368,17370,17372,17375,17377],{"class":582,"line":2989},[580,17363,2233],{"class":593},[580,17365,598],{"class":597},[580,17367,602],{"class":601},[580,17369,605],{"class":593},[580,17371,608],{"class":593},[580,17373,17374],{"class":611},"flex justify-between items-baseline",[580,17376,608],{"class":593},[580,17378,617],{"class":593},[580,17380,17381,17383,17385,17387,17389,17391,17394,17396,17398,17401,17403,17405],{"class":582,"line":3025},[580,17382,6730],{"class":593},[580,17384,445],{"class":597},[580,17386,602],{"class":601},[580,17388,605],{"class":593},[580,17390,608],{"class":593},[580,17392,17393],{"class":611},"font-semibold text-gray-900",[580,17395,608],{"class":593},[580,17397,639],{"class":593},[580,17399,17400],{"class":642},"Senior Frontend Developer",[580,17402,646],{"class":593},[580,17404,445],{"class":597},[580,17406,617],{"class":593},[580,17408,17409,17411,17413,17415,17417,17419,17422,17424,17426,17429,17431,17433],{"class":582,"line":3053},[580,17410,6730],{"class":593},[580,17412,580],{"class":597},[580,17414,602],{"class":601},[580,17416,605],{"class":593},[580,17418,608],{"class":593},[580,17420,17421],{"class":611},"text-sm text-gray-500 print:text-gray-700",[580,17423,608],{"class":593},[580,17425,639],{"class":593},[580,17427,17428],{"class":642},"2023 — Present",[580,17430,646],{"class":593},[580,17432,580],{"class":597},[580,17434,617],{"class":593},[580,17436,17437,17439,17441],{"class":582,"line":3081},[580,17438,6781],{"class":593},[580,17440,598],{"class":597},[580,17442,617],{"class":593},[580,17444,17445,17447,17449,17451,17453,17455,17458,17460,17462,17465,17467,17469],{"class":582,"line":3109},[580,17446,2233],{"class":593},[580,17448,432],{"class":597},[580,17450,602],{"class":601},[580,17452,605],{"class":593},[580,17454,608],{"class":593},[580,17456,17457],{"class":611},"text-blue-600 print:text-gray-700 text-sm font-medium",[580,17459,608],{"class":593},[580,17461,639],{"class":593},[580,17463,17464],{"class":642},"Tech Company ABC",[580,17466,646],{"class":593},[580,17468,432],{"class":597},[580,17470,617],{"class":593},[580,17472,17473,17475,17477,17479,17481,17483,17486,17488],{"class":582,"line":3114},[580,17474,2233],{"class":593},[580,17476,804],{"class":597},[580,17478,602],{"class":601},[580,17480,605],{"class":593},[580,17482,608],{"class":593},[580,17484,17485],{"class":611},"list-disc list-inside text-gray-700 print:text-gray-900 text-sm mt-2 space-y-1",[580,17487,608],{"class":593},[580,17489,617],{"class":593},[580,17491,17492,17494,17496,17498,17501,17503,17505],{"class":582,"line":3145},[580,17493,6730],{"class":593},[580,17495,807],{"class":597},[580,17497,639],{"class":593},[580,17499,17500],{"class":642},"Lead team 4 developers xây dựng design system với React + TypeScript",[580,17502,646],{"class":593},[580,17504,807],{"class":597},[580,17506,617],{"class":593},[580,17508,17509,17511,17513,17515,17518,17520,17522],{"class":582,"line":3174},[580,17510,6730],{"class":593},[580,17512,807],{"class":597},[580,17514,639],{"class":593},[580,17516,17517],{"class":642},"Giảm 40% bundle size qua code splitting và tree shaking",[580,17519,646],{"class":593},[580,17521,807],{"class":597},[580,17523,617],{"class":593},[580,17525,17526,17528,17530,17532,17535,17537,17539],{"class":582,"line":3200},[580,17527,6730],{"class":593},[580,17529,807],{"class":597},[580,17531,639],{"class":593},[580,17533,17534],{"class":642},"Migration từ CSS Modules sang Tailwind CSS — giảm 60% CSS bundle",[580,17536,646],{"class":593},[580,17538,807],{"class":597},[580,17540,617],{"class":593},[580,17542,17543,17545,17547],{"class":582,"line":3226},[580,17544,6781],{"class":593},[580,17546,804],{"class":597},[580,17548,617],{"class":593},[580,17550,17551,17553,17555],{"class":582,"line":3236},[580,17552,1854],{"class":593},[580,17554,598],{"class":597},[580,17556,617],{"class":593},[580,17558,17559],{"class":582,"line":3241},[580,17560,963],{"emptyLinePlaceholder":962},[580,17562,17563,17565,17567,17569,17571,17573,17575,17577],{"class":582,"line":3247},[580,17564,1793],{"class":593},[580,17566,598],{"class":597},[580,17568,602],{"class":601},[580,17570,605],{"class":593},[580,17572,608],{"class":593},[580,17574,17355],{"class":611},[580,17576,608],{"class":593},[580,17578,617],{"class":593},[580,17580,17581,17583,17585,17587,17589,17591,17593,17595],{"class":582,"line":3283},[580,17582,2233],{"class":593},[580,17584,598],{"class":597},[580,17586,602],{"class":601},[580,17588,605],{"class":593},[580,17590,608],{"class":593},[580,17592,17374],{"class":611},[580,17594,608],{"class":593},[580,17596,617],{"class":593},[580,17598,17599,17601,17603,17605,17607,17609,17611,17613,17615,17618,17620,17622],{"class":582,"line":3309},[580,17600,6730],{"class":593},[580,17602,445],{"class":597},[580,17604,602],{"class":601},[580,17606,605],{"class":593},[580,17608,608],{"class":593},[580,17610,17393],{"class":611},[580,17612,608],{"class":593},[580,17614,639],{"class":593},[580,17616,17617],{"class":642},"Frontend Developer",[580,17619,646],{"class":593},[580,17621,445],{"class":597},[580,17623,617],{"class":593},[580,17625,17626,17628,17630,17632,17634,17636,17638,17640,17642,17645,17647,17649],{"class":582,"line":3336},[580,17627,6730],{"class":593},[580,17629,580],{"class":597},[580,17631,602],{"class":601},[580,17633,605],{"class":593},[580,17635,608],{"class":593},[580,17637,17421],{"class":611},[580,17639,608],{"class":593},[580,17641,639],{"class":593},[580,17643,17644],{"class":642},"2020 — 2023",[580,17646,646],{"class":593},[580,17648,580],{"class":597},[580,17650,617],{"class":593},[580,17652,17653,17655,17657],{"class":582,"line":3363},[580,17654,6781],{"class":593},[580,17656,598],{"class":597},[580,17658,617],{"class":593},[580,17660,17661,17663,17665,17667,17669,17671,17673,17675,17677,17680,17682,17684],{"class":582,"line":3389},[580,17662,2233],{"class":593},[580,17664,432],{"class":597},[580,17666,602],{"class":601},[580,17668,605],{"class":593},[580,17670,608],{"class":593},[580,17672,17457],{"class":611},[580,17674,608],{"class":593},[580,17676,639],{"class":593},[580,17678,17679],{"class":642},"Startup XYZ",[580,17681,646],{"class":593},[580,17683,432],{"class":597},[580,17685,617],{"class":593},[580,17687,17688,17690,17692,17694,17696,17698,17700,17702],{"class":582,"line":3399},[580,17689,2233],{"class":593},[580,17691,804],{"class":597},[580,17693,602],{"class":601},[580,17695,605],{"class":593},[580,17697,608],{"class":593},[580,17699,17485],{"class":611},[580,17701,608],{"class":593},[580,17703,617],{"class":593},[580,17705,17706,17708,17710,17712,17715,17717,17719],{"class":582,"line":3408},[580,17707,6730],{"class":593},[580,17709,807],{"class":597},[580,17711,639],{"class":593},[580,17713,17714],{"class":642},"Xây dựng SPA với Vue 3 + Pinia — phục vụ 100K+ users",[580,17716,646],{"class":593},[580,17718,807],{"class":597},[580,17720,617],{"class":593},[580,17722,17723,17725,17727,17729,17732,17734,17736],{"class":582,"line":3417},[580,17724,6730],{"class":593},[580,17726,807],{"class":597},[580,17728,639],{"class":593},[580,17730,17731],{"class":642},"Tích hợp CI\u002FCD pipeline với GitHub Actions và Vercel",[580,17733,646],{"class":593},[580,17735,807],{"class":597},[580,17737,617],{"class":593},[580,17739,17740,17742,17744,17746,17749,17751,17753],{"class":582,"line":3422},[580,17741,6730],{"class":593},[580,17743,807],{"class":597},[580,17745,639],{"class":593},[580,17747,17748],{"class":642},"Viết unit\u002Fintegration test với Vitest — coverage 85%+",[580,17750,646],{"class":593},[580,17752,807],{"class":597},[580,17754,617],{"class":593},[580,17756,17757,17759,17761],{"class":582,"line":3431},[580,17758,6781],{"class":593},[580,17760,804],{"class":597},[580,17762,617],{"class":593},[580,17764,17765,17767,17769],{"class":582,"line":5345},[580,17766,1854],{"class":593},[580,17768,598],{"class":597},[580,17770,617],{"class":593},[580,17772,17773,17775,17777],{"class":582,"line":5364},[580,17774,1863],{"class":593},[580,17776,1442],{"class":597},[580,17778,617],{"class":593},[580,17780,17781],{"class":582,"line":5384},[580,17782,963],{"emptyLinePlaceholder":962},[580,17784,17785],{"class":582,"line":5434},[580,17786,17787],{"class":586},"        \u003C!-- Skills -->\n",[580,17789,17790,17792,17794,17796,17798,17800,17802,17804],{"class":582,"line":5484},[580,17791,1773],{"class":593},[580,17793,1442],{"class":597},[580,17795,602],{"class":601},[580,17797,605],{"class":593},[580,17799,608],{"class":593},[580,17801,17187],{"class":611},[580,17803,608],{"class":593},[580,17805,617],{"class":593},[580,17807,17808,17810,17812,17814,17816,17818],{"class":582,"line":5493},[580,17809,1793],{"class":593},[580,17811,427],{"class":597},[580,17813,602],{"class":601},[580,17815,605],{"class":593},[580,17817,608],{"class":593},[580,17819,17206],{"class":611},[580,17821,17822,17824,17826],{"class":582,"line":5502},[580,17823,17211],{"class":611},[580,17825,608],{"class":593},[580,17827,617],{"class":593},[580,17829,17830],{"class":582,"line":5530},[580,17831,17832],{"class":642},"            Skills\n",[580,17834,17835,17837,17839],{"class":582,"line":5558},[580,17836,1854],{"class":593},[580,17838,427],{"class":597},[580,17840,617],{"class":593},[580,17842,17843,17845,17847,17849,17851,17853,17856,17858],{"class":582,"line":5567},[580,17844,1793],{"class":593},[580,17846,598],{"class":597},[580,17848,602],{"class":601},[580,17850,605],{"class":593},[580,17852,608],{"class":593},[580,17854,17855],{"class":611},"flex flex-wrap gap-2",[580,17857,608],{"class":593},[580,17859,617],{"class":593},[580,17861,17862,17864,17866,17868,17870,17872],{"class":582,"line":5572},[580,17863,2233],{"class":593},[580,17865,580],{"class":597},[580,17867,602],{"class":601},[580,17869,605],{"class":593},[580,17871,608],{"class":593},[580,17873,17874],{"class":611},"px-3 py-1 bg-blue-100 text-blue-700 \n",[580,17876,17877],{"class":582,"line":5581},[580,17878,17879],{"class":611},"                         print:bg-gray-100 print:text-gray-900 print:border print:border-gray-300\n",[580,17881,17882,17885,17887,17889,17892,17894,17896],{"class":582,"line":5586},[580,17883,17884],{"class":611},"                         rounded-full text-sm font-medium",[580,17886,608],{"class":593},[580,17888,639],{"class":593},[580,17890,17891],{"class":642},"React",[580,17893,646],{"class":593},[580,17895,580],{"class":597},[580,17897,617],{"class":593},[580,17899,17900,17902,17904,17906,17908,17910],{"class":582,"line":5592},[580,17901,2233],{"class":593},[580,17903,580],{"class":597},[580,17905,602],{"class":601},[580,17907,605],{"class":593},[580,17909,608],{"class":593},[580,17911,17874],{"class":611},[580,17913,17914],{"class":582,"line":5612},[580,17915,17879],{"class":611},[580,17917,17918,17920,17922,17924,17927,17929,17931],{"class":582,"line":5641},[580,17919,17884],{"class":611},[580,17921,608],{"class":593},[580,17923,639],{"class":593},[580,17925,17926],{"class":642},"Vue.js",[580,17928,646],{"class":593},[580,17930,580],{"class":597},[580,17932,617],{"class":593},[580,17934,17935,17937,17939,17941,17943,17945],{"class":582,"line":5670},[580,17936,2233],{"class":593},[580,17938,580],{"class":597},[580,17940,602],{"class":601},[580,17942,605],{"class":593},[580,17944,608],{"class":593},[580,17946,17874],{"class":611},[580,17948,17949],{"class":582,"line":5699},[580,17950,17879],{"class":611},[580,17952,17953,17955,17957,17959,17961,17963,17965],{"class":582,"line":5728},[580,17954,17884],{"class":611},[580,17956,608],{"class":593},[580,17958,639],{"class":593},[580,17960,288],{"class":642},[580,17962,646],{"class":593},[580,17964,580],{"class":597},[580,17966,617],{"class":593},[580,17968,17969,17971,17973,17975,17977,17979],{"class":582,"line":5757},[580,17970,2233],{"class":593},[580,17972,580],{"class":597},[580,17974,602],{"class":601},[580,17976,605],{"class":593},[580,17978,608],{"class":593},[580,17980,17874],{"class":611},[580,17982,17983],{"class":582,"line":5786},[580,17984,17879],{"class":611},[580,17986,17987,17989,17991,17993,17995,17997,17999],{"class":582,"line":5795},[580,17988,17884],{"class":611},[580,17990,608],{"class":593},[580,17992,639],{"class":593},[580,17994,385],{"class":642},[580,17996,646],{"class":593},[580,17998,580],{"class":597},[580,18000,617],{"class":593},[580,18002,18003,18005,18007,18009,18011,18013],{"class":582,"line":5804},[580,18004,2233],{"class":593},[580,18006,580],{"class":597},[580,18008,602],{"class":601},[580,18010,605],{"class":593},[580,18012,608],{"class":593},[580,18014,17874],{"class":611},[580,18016,18017],{"class":582,"line":5809},[580,18018,17879],{"class":611},[580,18020,18021,18023,18025,18027,18030,18032,18034],{"class":582,"line":5818},[580,18022,17884],{"class":611},[580,18024,608],{"class":593},[580,18026,639],{"class":593},[580,18028,18029],{"class":642},"Next.js",[580,18031,646],{"class":593},[580,18033,580],{"class":597},[580,18035,617],{"class":593},[580,18037,18038,18040,18042,18044,18046,18048],{"class":582,"line":11898},[580,18039,2233],{"class":593},[580,18041,580],{"class":597},[580,18043,602],{"class":601},[580,18045,605],{"class":593},[580,18047,608],{"class":593},[580,18049,17874],{"class":611},[580,18051,18052],{"class":582,"line":11904},[580,18053,17879],{"class":611},[580,18055,18056,18058,18060,18062,18065,18067,18069],{"class":582,"line":11917},[580,18057,17884],{"class":611},[580,18059,608],{"class":593},[580,18061,639],{"class":593},[580,18063,18064],{"class":642},"Nuxt",[580,18066,646],{"class":593},[580,18068,580],{"class":597},[580,18070,617],{"class":593},[580,18072,18073,18075,18077,18079,18081,18083],{"class":582,"line":11923},[580,18074,2233],{"class":593},[580,18076,580],{"class":597},[580,18078,602],{"class":601},[580,18080,605],{"class":593},[580,18082,608],{"class":593},[580,18084,17874],{"class":611},[580,18086,18087],{"class":582,"line":11955},[580,18088,17879],{"class":611},[580,18090,18091,18093,18095,18097,18100,18102,18104],{"class":582,"line":11974},[580,18092,17884],{"class":611},[580,18094,608],{"class":593},[580,18096,639],{"class":593},[580,18098,18099],{"class":642},"Node.js",[580,18101,646],{"class":593},[580,18103,580],{"class":597},[580,18105,617],{"class":593},[580,18107,18108,18110,18112,18114,18116,18118],{"class":582,"line":11979},[580,18109,2233],{"class":593},[580,18111,580],{"class":597},[580,18113,602],{"class":601},[580,18115,605],{"class":593},[580,18117,608],{"class":593},[580,18119,17874],{"class":611},[580,18121,18122],{"class":582,"line":11985},[580,18123,17879],{"class":611},[580,18125,18126,18128,18130,18132,18134,18136,18138],{"class":582,"line":12020},[580,18127,17884],{"class":611},[580,18129,608],{"class":593},[580,18131,639],{"class":593},[580,18133,198],{"class":642},[580,18135,646],{"class":593},[580,18137,580],{"class":597},[580,18139,617],{"class":593},[580,18141,18142,18144,18146],{"class":582,"line":12034},[580,18143,1854],{"class":593},[580,18145,598],{"class":597},[580,18147,617],{"class":593},[580,18149,18150,18152,18154],{"class":582,"line":12039},[580,18151,1863],{"class":593},[580,18153,1442],{"class":597},[580,18155,617],{"class":593},[580,18157,18158],{"class":582,"line":12044},[580,18159,963],{"emptyLinePlaceholder":962},[580,18161,18162],{"class":582,"line":12050},[580,18163,18164],{"class":586},"        \u003C!-- Education -->\n",[580,18166,18167,18169,18171,18173,18175,18177,18179,18181],{"class":582,"line":12065},[580,18168,1773],{"class":593},[580,18170,1442],{"class":597},[580,18172,602],{"class":601},[580,18174,605],{"class":593},[580,18176,608],{"class":593},[580,18178,17187],{"class":611},[580,18180,608],{"class":593},[580,18182,617],{"class":593},[580,18184,18185,18187,18189,18191,18193,18195],{"class":582,"line":12070},[580,18186,1793],{"class":593},[580,18188,427],{"class":597},[580,18190,602],{"class":601},[580,18192,605],{"class":593},[580,18194,608],{"class":593},[580,18196,17206],{"class":611},[580,18198,18199,18201,18203],{"class":582,"line":12075},[580,18200,17211],{"class":611},[580,18202,608],{"class":593},[580,18204,617],{"class":593},[580,18206,18207],{"class":582,"line":12081},[580,18208,18209],{"class":642},"            Education\n",[580,18211,18212,18214,18216],{"class":582,"line":12097},[580,18213,1854],{"class":593},[580,18215,427],{"class":597},[580,18217,617],{"class":593},[580,18219,18220,18222,18224,18226,18228,18230,18232,18234],{"class":582,"line":12108},[580,18221,1793],{"class":593},[580,18223,598],{"class":597},[580,18225,602],{"class":601},[580,18227,605],{"class":593},[580,18229,608],{"class":593},[580,18231,17374],{"class":611},[580,18233,608],{"class":593},[580,18235,617],{"class":593},[580,18237,18238,18240,18242],{"class":582,"line":12113},[580,18239,2233],{"class":593},[580,18241,598],{"class":597},[580,18243,617],{"class":593},[580,18245,18246,18248,18250,18252,18254,18256,18258,18260,18262,18265,18267,18269],{"class":582,"line":12119},[580,18247,6730],{"class":593},[580,18249,445],{"class":597},[580,18251,602],{"class":601},[580,18253,605],{"class":593},[580,18255,608],{"class":593},[580,18257,17393],{"class":611},[580,18259,608],{"class":593},[580,18261,639],{"class":593},[580,18263,18264],{"class":642},"Bachelor of Computer Science",[580,18266,646],{"class":593},[580,18268,445],{"class":597},[580,18270,617],{"class":593},[580,18272,18273,18275,18277,18279,18281,18283,18286,18288,18290,18293,18295,18297],{"class":582,"line":12145},[580,18274,6730],{"class":593},[580,18276,432],{"class":597},[580,18278,602],{"class":601},[580,18280,605],{"class":593},[580,18282,608],{"class":593},[580,18284,18285],{"class":611},"text-blue-600 print:text-gray-700 text-sm",[580,18287,608],{"class":593},[580,18289,639],{"class":593},[580,18291,18292],{"class":642},"University of Technology",[580,18294,646],{"class":593},[580,18296,432],{"class":597},[580,18298,617],{"class":593},[580,18300,18301,18303,18305],{"class":582,"line":12195},[580,18302,6781],{"class":593},[580,18304,598],{"class":597},[580,18306,617],{"class":593},[580,18308,18309,18311,18313,18315,18317,18319,18321,18323,18325,18328,18330,18332],{"class":582,"line":12210},[580,18310,2233],{"class":593},[580,18312,580],{"class":597},[580,18314,602],{"class":601},[580,18316,605],{"class":593},[580,18318,608],{"class":593},[580,18320,17421],{"class":611},[580,18322,608],{"class":593},[580,18324,639],{"class":593},[580,18326,18327],{"class":642},"2016 — 2020",[580,18329,646],{"class":593},[580,18331,580],{"class":597},[580,18333,617],{"class":593},[580,18335,18336,18338,18340],{"class":582,"line":12219},[580,18337,1854],{"class":593},[580,18339,598],{"class":597},[580,18341,617],{"class":593},[580,18343,18344,18346,18348],{"class":582,"line":12224},[580,18345,1863],{"class":593},[580,18347,1442],{"class":597},[580,18349,617],{"class":593},[580,18351,18352],{"class":582,"line":12230},[580,18353,963],{"emptyLinePlaceholder":962},[580,18355,18356,18358,18360],{"class":582,"line":12276},[580,18357,2436],{"class":593},[580,18359,598],{"class":597},[580,18361,617],{"class":593},[580,18363,18364,18366,18368],{"class":582,"line":12282},[580,18365,2719],{"class":593},[580,18367,598],{"class":597},[580,18369,617],{"class":593},[580,18371,18372,18374,18376],{"class":582,"line":12311},[580,18373,1215],{"class":593},[580,18375,1117],{"class":597},[580,18377,617],{"class":593},[580,18379,18380],{"class":582,"line":12346},[580,18381,963],{"emptyLinePlaceholder":962},[580,18383,18384,18386,18388],{"class":582,"line":12351},[580,18385,646],{"class":593},[580,18387,1677],{"class":597},[580,18389,617],{"class":593},[580,18391,18392,18394,18396],{"class":582,"line":12360},[580,18393,646],{"class":593},[580,18395,575],{"class":597},[580,18397,617],{"class":593},[432,18399,18400],{},[436,18401,3442],{},[804,18403,18404,18409,18418,18423,18429,18435],{},[807,18405,18406,18408],{},[491,18407,16353],{}," trên navigation bar — không ai muốn in navigation.",[807,18410,18411,563,18414,18417],{},[491,18412,18413],{},"print:bg-white",[491,18415,18416],{},"print:shadow-none",": Bỏ màu nền gradient và shadow khi in để tiết kiệm mực.",[807,18419,18420,18422],{},[491,18421,17106],{},": Hiện full URL khi in (trên màn hình chỉ hiện text rút gọn).",[807,18424,18425,18428],{},[491,18426,18427],{},"print:text-gray-900",": Text đậm hơn khi in để dễ đọc trên giấy.",[807,18430,18431,18434],{},[491,18432,18433],{},"print:border print:border-gray-300",": Thêm border cho tag skill để phân biệt khi không có màu nền.",[807,18436,18437,18440],{},[491,18438,18439],{},"@page { margin: 1.5cm; size: A4; }",": CSS print media rule cho canh lề và khổ giấy.",[5863,18442],{},[427,18444,18446],{"id":18445},"_6-screen-readers-accessibility","6. Screen Readers & Accessibility",[445,18448,18450,18451,18454,18455],{"id":18449},"_61-sr-only-và-not-sr-only","6.1. ",[491,18452,18453],{},"sr-only"," và ",[491,18456,18457],{},"not-sr-only",[571,18459,18461],{"className":573,"code":18460,"language":575,"meta":576,"style":576},"\u003C!-- Chỉ screen reader thấy -->\n\u003Cspan class=\"sr-only\">Đang tải dữ liệu...\u003C\u002Fspan>\n\n\u003C!-- Ẩn khỏi screen reader nhưng visible trên màn hình -->\n\u003Cdiv class=\"not-sr-only\">Nội dung trực quan\u003C\u002Fdiv>\n",[491,18462,18463,18468,18495,18499,18504],{"__ignoreMap":576},[580,18464,18465],{"class":582,"line":583},[580,18466,18467],{"class":586},"\u003C!-- Chỉ screen reader thấy -->\n",[580,18469,18470,18472,18474,18476,18478,18480,18482,18484,18486,18489,18491,18493],{"class":582,"line":590},[580,18471,594],{"class":593},[580,18473,580],{"class":597},[580,18475,602],{"class":601},[580,18477,605],{"class":593},[580,18479,608],{"class":593},[580,18481,18453],{"class":611},[580,18483,608],{"class":593},[580,18485,639],{"class":593},[580,18487,18488],{"class":642},"Đang tải dữ liệu...",[580,18490,646],{"class":593},[580,18492,580],{"class":597},[580,18494,617],{"class":593},[580,18496,18497],{"class":582,"line":620},[580,18498,963],{"emptyLinePlaceholder":962},[580,18500,18501],{"class":582,"line":653},[580,18502,18503],{"class":586},"\u003C!-- Ẩn khỏi screen reader nhưng visible trên màn hình -->\n",[580,18505,18506,18508,18510,18512,18514,18516,18518,18520,18522,18525,18527,18529],{"class":582,"line":681},[580,18507,594],{"class":593},[580,18509,598],{"class":597},[580,18511,602],{"class":601},[580,18513,605],{"class":593},[580,18515,608],{"class":593},[580,18517,18457],{"class":611},[580,18519,608],{"class":593},[580,18521,639],{"class":593},[580,18523,18524],{"class":642},"Nội dung trực quan",[580,18526,646],{"class":593},[580,18528,598],{"class":597},[580,18530,617],{"class":593},[445,18532,18534,18535,18454,18538],{"id":18533},"_62-motion-safe-và-motion-reduce","6.2. ",[491,18536,18537],{},"motion-safe:",[491,18539,18540],{},"motion-reduce:",[571,18542,18544],{"className":573,"code":18543,"language":575,"meta":576,"style":576},"\u003C!-- Animation chỉ chạy khi user KHÔNG bật reduced motion -->\n\u003Cdiv class=\"motion-safe:animate-spin\">Loading spinner\u003C\u002Fdiv>\n\n\u003C!-- Style riêng cho user bật reduced motion -->\n\u003Cdiv class=\"animate-bounce motion-reduce:animate-none\">Thông báo\u003C\u002Fdiv>\n",[491,18545,18546,18551,18579,18583,18588],{"__ignoreMap":576},[580,18547,18548],{"class":582,"line":583},[580,18549,18550],{"class":586},"\u003C!-- Animation chỉ chạy khi user KHÔNG bật reduced motion -->\n",[580,18552,18553,18555,18557,18559,18561,18563,18566,18568,18570,18573,18575,18577],{"class":582,"line":590},[580,18554,594],{"class":593},[580,18556,598],{"class":597},[580,18558,602],{"class":601},[580,18560,605],{"class":593},[580,18562,608],{"class":593},[580,18564,18565],{"class":611},"motion-safe:animate-spin",[580,18567,608],{"class":593},[580,18569,639],{"class":593},[580,18571,18572],{"class":642},"Loading spinner",[580,18574,646],{"class":593},[580,18576,598],{"class":597},[580,18578,617],{"class":593},[580,18580,18581],{"class":582,"line":620},[580,18582,963],{"emptyLinePlaceholder":962},[580,18584,18585],{"class":582,"line":653},[580,18586,18587],{"class":586},"\u003C!-- Style riêng cho user bật reduced motion -->\n",[580,18589,18590,18592,18594,18596,18598,18600,18603,18605,18607,18610,18612,18614],{"class":582,"line":681},[580,18591,594],{"class":593},[580,18593,598],{"class":597},[580,18595,602],{"class":601},[580,18597,605],{"class":593},[580,18599,608],{"class":593},[580,18601,18602],{"class":611},"animate-bounce motion-reduce:animate-none",[580,18604,608],{"class":593},[580,18606,639],{"class":593},[580,18608,18609],{"class":642},"Thông báo",[580,18611,646],{"class":593},[580,18613,598],{"class":597},[580,18615,617],{"class":593},[445,18617,18619],{"id":18618},"_63-bài-tập-9-accessible-skip-to-content-link","6.3. BÀI TẬP 9 — Accessible Skip-to-Content Link",[432,18621,18622,18624],{},[436,18623,1491],{}," Link \"Skip to main content\" chỉ hiện khi focus (tab), giúp keyboard user bỏ qua navigation.",[432,18626,18627],{},[436,18628,1508],{},[571,18630,18632],{"className":573,"code":18631,"language":575,"meta":576,"style":576},"\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>Accessible Skip Link - Tailwind CSS v4\u003C\u002Ftitle>\n  \u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tailwindcss\u002Fbrowser@4\">\u003C\u002Fscript>\n\u003C\u002Fhead>\n\u003Cbody class=\"min-h-screen bg-gray-50\">\n\n  \u003C!-- Skip to content link — chỉ hiện khi focus (Tab) -->\n  \u003Ca href=\"#main-content\" \n     class=\"sr-only focus:not-sr-only \n            focus:fixed focus:top-4 focus:left-4 \n            focus:bg-blue-600 focus:text-white \n            focus:px-4 focus:py-2 focus:rounded-lg \n            focus:z-50 focus:shadow-lg\n            focus:outline-none focus:ring-2 focus:ring-blue-300\">\n    Bỏ qua và đến nội dung chính\n  \u003C\u002Fa>\n\n  \u003C!-- Navigation (có thể rất dài với nhiều link) -->\n  \u003Cheader class=\"bg-white border-b border-gray-200\">\n    \u003Cnav class=\"max-w-5xl mx-auto px-4 py-3\" aria-label=\"Main navigation\">\n      \u003Cul class=\"flex gap-6\">\n        \u003Cli>\u003Ca href=\"#\" class=\"text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded px-1\">Home\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#\" class=\"text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded px-1\">Products\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#\" class=\"text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded px-1\">Services\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#\" class=\"text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded px-1\">About\u003C\u002Fa>\u003C\u002Fli>\n        \u003Cli>\u003Ca href=\"#\" class=\"text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded px-1\">Contact\u003C\u002Fa>\u003C\u002Fli>\n      \u003C\u002Ful>\n    \u003C\u002Fnav>\n  \u003C\u002Fheader>\n\n  \u003C!-- Main content -->\n  \u003Cmain id=\"main-content\" class=\"max-w-3xl mx-auto px-4 py-12\" tabindex=\"-1\">\n    \n    \u003Ch1 class=\"text-3xl font-bold text-gray-900 mb-4\">Nội dung chính\u003C\u002Fh1>\n    \n    \u003Cp class=\"text-gray-600 mb-6\">\n      Nhấn \u003Ckbd class=\"px-2 py-0.5 bg-gray-200 rounded text-sm font-mono\">Tab\u003C\u002Fkbd> khi trang vừa load. \n      Link \"Bỏ qua và đến nội dung chính\" sẽ xuất hiện ở góc trên bên trái.\n      Nhấn \u003Ckbd class=\"px-2 py-0.5 bg-gray-200 rounded text-sm font-mono\">Enter\u003C\u002Fkbd> để skip navigation.\n    \u003C\u002Fp>\n\n    \u003C!-- Demo content với các interactive elements -->\n    \u003Cdiv class=\"space-y-4\">\n      \u003Cdiv class=\"bg-white border border-gray-200 rounded-xl p-6\">\n        \u003Ch2 class=\"text-lg font-semibold text-gray-900 mb-3\">Accessibility Features\u003C\u002Fh2>\n        \n        \u003Cul class=\"space-y-3 text-sm text-gray-700\">\n          \u003Cli class=\"flex items-start gap-2\">\n            \u003Cspan class=\"text-green-600 mt-0.5\">✓\u003C\u002Fspan>\n            \u003Cspan>\u003Cstrong>Skip link:\u003C\u002Fstrong> Element đầu tiên trong DOM, giúp keyboard user skip navigation dài.\u003C\u002Fspan>\n          \u003C\u002Fli>\n          \u003Cli class=\"flex items-start gap-2\">\n            \u003Cspan class=\"text-green-600 mt-0.5\">✓\u003C\u002Fspan>\n            \u003Cspan>\u003Cstrong>Focus ring:\u003C\u002Fstrong> Tất cả link có \u003Ccode class=\"bg-gray-100 px-1 rounded\">focus:ring-2\u003C\u002Fcode> để visible focus indicator.\u003C\u002Fspan>\n          \u003C\u002Fli>\n          \u003Cli class=\"flex items-start gap-2\">\n            \u003Cspan class=\"text-green-600 mt-0.5\">✓\u003C\u002Fspan>\n            \u003Cspan>\u003Cstrong>aria-label:\u003C\u002Fstrong> Navigation có \u003Ccode class=\"bg-gray-100 px-1 rounded\">aria-label=\"Main navigation\"\u003C\u002Fcode>.\u003C\u002Fspan>\n          \u003C\u002Fli>\n          \u003Cli class=\"flex items-start gap-2\">\n            \u003Cspan class=\"text-green-600 mt-0.5\">✓\u003C\u002Fspan>\n            \u003Cspan>\u003Cstrong>tabindex=\"-1\":\u003C\u002Fstrong> Main content có tabindex để focus sau khi skip.\u003C\u002Fspan>\n          \u003C\u002Fli>\n        \u003C\u002Ful>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Keyboard-test form -->\n      \u003Cdiv class=\"bg-white border border-gray-200 rounded-xl p-6\">\n        \u003Ch2 class=\"text-lg font-semibold text-gray-900 mb-3\">Test Keyboard Navigation\u003C\u002Fh2>\n        \u003Cp class=\"text-sm text-gray-600 mb-4\">Dùng Tab để di chuyển giữa các field bên dưới.\u003C\u002Fp>\n        \n        \u003Cform class=\"space-y-3\" onsubmit=\"event.preventDefault();\">\n          \u003Cdiv>\n            \u003Clabel for=\"name\" class=\"block text-sm font-medium text-gray-700 mb-1\">Họ tên\u003C\u002Flabel>\n            \u003Cinput id=\"name\" type=\"text\" \n                   class=\"w-full px-3 py-2 border border-gray-300 rounded-lg \n                          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\n                          text-sm\" \n                   placeholder=\"Nguyen Van A\">\n          \u003C\u002Fdiv>\n          \u003Cdiv>\n            \u003Clabel for=\"email\" class=\"block text-sm font-medium text-gray-700 mb-1\">Email\u003C\u002Flabel>\n            \u003Cinput id=\"email\" type=\"email\" \n                   class=\"w-full px-3 py-2 border border-gray-300 rounded-lg \n                          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\n                          text-sm\" \n                   placeholder=\"email@example.com\">\n          \u003C\u002Fdiv>\n          \u003Cbutton type=\"submit\" \n                  class=\"px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium\n                         hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\n                         transition-colors\">\n            Submit\n          \u003C\u002Fbutton>\n        \u003C\u002Fform>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n  \u003C\u002Fmain>\n\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[491,18633,18634,18644,18662,18670,18688,18716,18733,18755,18763,18781,18785,18790,18809,18821,18826,18831,18836,18841,18850,18855,18863,18867,18872,18891,18921,18939,18984,19029,19074,19118,19162,19170,19178,19186,19190,19195,19237,19241,19269,19273,19292,19327,19332,19364,19372,19376,19381,19400,19419,19447,19451,19470,19489,19517,19547,19555,19573,19599,19658,19666,19684,19710,19767,19775,19793,19819,19849,19857,19865,19873,19877,19882,19900,19927,19955,19959,19999,20007,20048,20079,20091,20096,20105,20121,20129,20137,20175,20203,20213,20217,20225,20240,20248,20267,20279,20284,20293,20298,20306,20314,20322,20330,20334,20342,20346,20354],{"__ignoreMap":576},[580,18635,18636,18638,18640,18642],{"class":582,"line":583},[580,18637,1518],{"class":593},[580,18639,1521],{"class":597},[580,18641,1524],{"class":601},[580,18643,617],{"class":593},[580,18645,18646,18648,18650,18652,18654,18656,18658,18660],{"class":582,"line":590},[580,18647,594],{"class":593},[580,18649,575],{"class":597},[580,18651,1535],{"class":601},[580,18653,605],{"class":593},[580,18655,608],{"class":593},[580,18657,1542],{"class":611},[580,18659,608],{"class":593},[580,18661,617],{"class":593},[580,18663,18664,18666,18668],{"class":582,"line":620},[580,18665,594],{"class":593},[580,18667,1564],{"class":597},[580,18669,617],{"class":593},[580,18671,18672,18674,18676,18678,18680,18682,18684,18686],{"class":582,"line":653},[580,18673,623],{"class":593},[580,18675,1573],{"class":597},[580,18677,1576],{"class":601},[580,18679,605],{"class":593},[580,18681,608],{"class":593},[580,18683,1583],{"class":611},[580,18685,608],{"class":593},[580,18687,617],{"class":593},[580,18689,18690,18692,18694,18696,18698,18700,18702,18704,18706,18708,18710,18712,18714],{"class":582,"line":681},[580,18691,623],{"class":593},[580,18693,1573],{"class":597},[580,18695,1596],{"class":601},[580,18697,605],{"class":593},[580,18699,608],{"class":593},[580,18701,1603],{"class":611},[580,18703,608],{"class":593},[580,18705,1608],{"class":601},[580,18707,605],{"class":593},[580,18709,608],{"class":593},[580,18711,1615],{"class":611},[580,18713,608],{"class":593},[580,18715,617],{"class":593},[580,18717,18718,18720,18722,18724,18727,18729,18731],{"class":582,"line":709},[580,18719,623],{"class":593},[580,18721,1626],{"class":597},[580,18723,639],{"class":593},[580,18725,18726],{"class":642},"Accessible Skip Link - Tailwind CSS v4",[580,18728,646],{"class":593},[580,18730,1626],{"class":597},[580,18732,617],{"class":593},[580,18734,18735,18737,18739,18741,18743,18745,18747,18749,18751,18753],{"class":582,"line":737},[580,18736,623],{"class":593},[580,18738,1644],{"class":597},[580,18740,1647],{"class":601},[580,18742,605],{"class":593},[580,18744,608],{"class":593},[580,18746,1654],{"class":611},[580,18748,608],{"class":593},[580,18750,1282],{"class":593},[580,18752,1644],{"class":597},[580,18754,617],{"class":593},[580,18756,18757,18759,18761],{"class":582,"line":765},[580,18758,646],{"class":593},[580,18760,1564],{"class":597},[580,18762,617],{"class":593},[580,18764,18765,18767,18769,18771,18773,18775,18777,18779],{"class":582,"line":793},[580,18766,594],{"class":593},[580,18768,1677],{"class":597},[580,18770,602],{"class":601},[580,18772,605],{"class":593},[580,18774,608],{"class":593},[580,18776,1686],{"class":611},[580,18778,608],{"class":593},[580,18780,617],{"class":593},[580,18782,18783],{"class":582,"line":896},[580,18784,963],{"emptyLinePlaceholder":962},[580,18786,18787],{"class":582,"line":1029},[580,18788,18789],{"class":586},"  \u003C!-- Skip to content link — chỉ hiện khi focus (Tab) -->\n",[580,18791,18792,18794,18796,18798,18800,18802,18805,18807],{"class":582,"line":1212},[580,18793,623],{"class":593},[580,18795,1258],{"class":597},[580,18797,1261],{"class":601},[580,18799,605],{"class":593},[580,18801,608],{"class":593},[580,18803,18804],{"class":611},"#main-content",[580,18806,608],{"class":593},[580,18808,10418],{"class":593},[580,18810,18811,18814,18816,18818],{"class":582,"line":1222},[580,18812,18813],{"class":601},"     class",[580,18815,605],{"class":593},[580,18817,608],{"class":593},[580,18819,18820],{"class":611},"sr-only focus:not-sr-only \n",[580,18822,18823],{"class":582,"line":1228},[580,18824,18825],{"class":611},"            focus:fixed focus:top-4 focus:left-4 \n",[580,18827,18828],{"class":582,"line":1248},[580,18829,18830],{"class":611},"            focus:bg-blue-600 focus:text-white \n",[580,18832,18833],{"class":582,"line":1289},[580,18834,18835],{"class":611},"            focus:px-4 focus:py-2 focus:rounded-lg \n",[580,18837,18838],{"class":582,"line":1325},[580,18839,18840],{"class":611},"            focus:z-50 focus:shadow-lg\n",[580,18842,18843,18846,18848],{"class":582,"line":1361},[580,18844,18845],{"class":611},"            focus:outline-none focus:ring-2 focus:ring-blue-300",[580,18847,608],{"class":593},[580,18849,617],{"class":593},[580,18851,18852],{"class":582,"line":1370},[580,18853,18854],{"class":642},"    Bỏ qua và đến nội dung chính\n",[580,18856,18857,18859,18861],{"class":582,"line":1379},[580,18858,1215],{"class":593},[580,18860,1258],{"class":597},[580,18862,617],{"class":593},[580,18864,18865],{"class":582,"line":1384},[580,18866,963],{"emptyLinePlaceholder":962},[580,18868,18869],{"class":582,"line":1390},[580,18870,18871],{"class":586},"  \u003C!-- Navigation (có thể rất dài với nhiều link) -->\n",[580,18873,18874,18876,18878,18880,18882,18884,18887,18889],{"class":582,"line":1411},[580,18875,623],{"class":593},[580,18877,1706],{"class":597},[580,18879,602],{"class":601},[580,18881,605],{"class":593},[580,18883,608],{"class":593},[580,18885,18886],{"class":611},"bg-white border-b border-gray-200",[580,18888,608],{"class":593},[580,18890,617],{"class":593},[580,18892,18893,18895,18897,18899,18901,18903,18906,18908,18910,18912,18914,18917,18919],{"class":582,"line":1417},[580,18894,1195],{"class":593},[580,18896,1163],{"class":597},[580,18898,602],{"class":601},[580,18900,605],{"class":593},[580,18902,608],{"class":593},[580,18904,18905],{"class":611},"max-w-5xl mx-auto px-4 py-3",[580,18907,608],{"class":593},[580,18909,2143],{"class":601},[580,18911,605],{"class":593},[580,18913,608],{"class":593},[580,18915,18916],{"class":611},"Main navigation",[580,18918,608],{"class":593},[580,18920,617],{"class":593},[580,18922,18923,18925,18927,18929,18931,18933,18935,18937],{"class":582,"line":1426},[580,18924,1743],{"class":593},[580,18926,804],{"class":597},[580,18928,602],{"class":601},[580,18930,605],{"class":593},[580,18932,608],{"class":593},[580,18934,8090],{"class":611},[580,18936,608],{"class":593},[580,18938,617],{"class":593},[580,18940,18941,18943,18945,18947,18949,18951,18953,18955,18957,18959,18961,18963,18965,18968,18970,18972,18974,18976,18978,18980,18982],{"class":582,"line":1431},[580,18942,1773],{"class":593},[580,18944,807],{"class":597},[580,18946,1255],{"class":593},[580,18948,1258],{"class":597},[580,18950,1261],{"class":601},[580,18952,605],{"class":593},[580,18954,608],{"class":593},[580,18956,1268],{"class":611},[580,18958,608],{"class":593},[580,18960,602],{"class":601},[580,18962,605],{"class":593},[580,18964,608],{"class":593},[580,18966,18967],{"class":611},"text-gray-600 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded px-1",[580,18969,608],{"class":593},[580,18971,639],{"class":593},[580,18973,1275],{"class":642},[580,18975,646],{"class":593},[580,18977,1258],{"class":597},[580,18979,1282],{"class":593},[580,18981,807],{"class":597},[580,18983,617],{"class":593},[580,18985,18986,18988,18990,18992,18994,18996,18998,19000,19002,19004,19006,19008,19010,19012,19014,19016,19019,19021,19023,19025,19027],{"class":582,"line":1437},[580,18987,1773],{"class":593},[580,18989,807],{"class":597},[580,18991,1255],{"class":593},[580,18993,1258],{"class":597},[580,18995,1261],{"class":601},[580,18997,605],{"class":593},[580,18999,608],{"class":593},[580,19001,1268],{"class":611},[580,19003,608],{"class":593},[580,19005,602],{"class":601},[580,19007,605],{"class":593},[580,19009,608],{"class":593},[580,19011,18967],{"class":611},[580,19013,608],{"class":593},[580,19015,639],{"class":593},[580,19017,19018],{"class":642},"Products",[580,19020,646],{"class":593},[580,19022,1258],{"class":597},[580,19024,1282],{"class":593},[580,19026,807],{"class":597},[580,19028,617],{"class":593},[580,19030,19031,19033,19035,19037,19039,19041,19043,19045,19047,19049,19051,19053,19055,19057,19059,19061,19064,19066,19068,19070,19072],{"class":582,"line":1458},[580,19032,1773],{"class":593},[580,19034,807],{"class":597},[580,19036,1255],{"class":593},[580,19038,1258],{"class":597},[580,19040,1261],{"class":601},[580,19042,605],{"class":593},[580,19044,608],{"class":593},[580,19046,1268],{"class":611},[580,19048,608],{"class":593},[580,19050,602],{"class":601},[580,19052,605],{"class":593},[580,19054,608],{"class":593},[580,19056,18967],{"class":611},[580,19058,608],{"class":593},[580,19060,639],{"class":593},[580,19062,19063],{"class":642},"Services",[580,19065,646],{"class":593},[580,19067,1258],{"class":597},[580,19069,1282],{"class":593},[580,19071,807],{"class":597},[580,19073,617],{"class":593},[580,19075,19076,19078,19080,19082,19084,19086,19088,19090,19092,19094,19096,19098,19100,19102,19104,19106,19108,19110,19112,19114,19116],{"class":582,"line":1476},[580,19077,1773],{"class":593},[580,19079,807],{"class":597},[580,19081,1255],{"class":593},[580,19083,1258],{"class":597},[580,19085,1261],{"class":601},[580,19087,605],{"class":593},[580,19089,608],{"class":593},[580,19091,1268],{"class":611},[580,19093,608],{"class":593},[580,19095,602],{"class":601},[580,19097,605],{"class":593},[580,19099,608],{"class":593},[580,19101,18967],{"class":611},[580,19103,608],{"class":593},[580,19105,639],{"class":593},[580,19107,1312],{"class":642},[580,19109,646],{"class":593},[580,19111,1258],{"class":597},[580,19113,1282],{"class":593},[580,19115,807],{"class":597},[580,19117,617],{"class":593},[580,19119,19120,19122,19124,19126,19128,19130,19132,19134,19136,19138,19140,19142,19144,19146,19148,19150,19152,19154,19156,19158,19160],{"class":582,"line":2078},[580,19121,1773],{"class":593},[580,19123,807],{"class":597},[580,19125,1255],{"class":593},[580,19127,1258],{"class":597},[580,19129,1261],{"class":601},[580,19131,605],{"class":593},[580,19133,608],{"class":593},[580,19135,1268],{"class":611},[580,19137,608],{"class":593},[580,19139,602],{"class":601},[580,19141,605],{"class":593},[580,19143,608],{"class":593},[580,19145,18967],{"class":611},[580,19147,608],{"class":593},[580,19149,639],{"class":593},[580,19151,1348],{"class":642},[580,19153,646],{"class":593},[580,19155,1258],{"class":597},[580,19157,1282],{"class":593},[580,19159,807],{"class":597},[580,19161,617],{"class":593},[580,19163,19164,19166,19168],{"class":582,"line":2084},[580,19165,2436],{"class":593},[580,19167,804],{"class":597},[580,19169,617],{"class":593},[580,19171,19172,19174,19176],{"class":582,"line":2093},[580,19173,2719],{"class":593},[580,19175,1163],{"class":597},[580,19177,617],{"class":593},[580,19179,19180,19182,19184],{"class":582,"line":2102},[580,19181,1215],{"class":593},[580,19183,1706],{"class":597},[580,19185,617],{"class":593},[580,19187,19188],{"class":582,"line":2107},[580,19189,963],{"emptyLinePlaceholder":962},[580,19191,19192],{"class":582,"line":2113},[580,19193,19194],{"class":586},"  \u003C!-- Main content -->\n",[580,19196,19197,19199,19201,19203,19205,19207,19210,19212,19214,19216,19218,19221,19223,19226,19228,19230,19233,19235],{"class":582,"line":2157},[580,19198,623],{"class":593},[580,19200,1117],{"class":597},[580,19202,2120],{"class":601},[580,19204,605],{"class":593},[580,19206,608],{"class":593},[580,19208,19209],{"class":611},"main-content",[580,19211,608],{"class":593},[580,19213,602],{"class":601},[580,19215,605],{"class":593},[580,19217,608],{"class":593},[580,19219,19220],{"class":611},"max-w-3xl mx-auto px-4 py-12",[580,19222,608],{"class":593},[580,19224,19225],{"class":601}," tabindex",[580,19227,605],{"class":593},[580,19229,608],{"class":593},[580,19231,19232],{"class":611},"-1",[580,19234,608],{"class":593},[580,19236,617],{"class":593},[580,19238,19239],{"class":582,"line":2163},[580,19240,10194],{"class":642},[580,19242,19243,19245,19247,19249,19251,19253,19256,19258,19260,19263,19265,19267],{"class":582,"line":2230},[580,19244,1195],{"class":593},[580,19246,1395],{"class":597},[580,19248,602],{"class":601},[580,19250,605],{"class":593},[580,19252,608],{"class":593},[580,19254,19255],{"class":611},"text-3xl font-bold text-gray-900 mb-4",[580,19257,608],{"class":593},[580,19259,639],{"class":593},[580,19261,19262],{"class":642},"Nội dung chính",[580,19264,646],{"class":593},[580,19266,1395],{"class":597},[580,19268,617],{"class":593},[580,19270,19271],{"class":582,"line":2289},[580,19272,10194],{"class":642},[580,19274,19275,19277,19279,19281,19283,19285,19288,19290],{"class":582,"line":2298},[580,19276,1195],{"class":593},[580,19278,432],{"class":597},[580,19280,602],{"class":601},[580,19282,605],{"class":593},[580,19284,608],{"class":593},[580,19286,19287],{"class":611},"text-gray-600 mb-6",[580,19289,608],{"class":593},[580,19291,617],{"class":593},[580,19293,19294,19297,19299,19302,19304,19306,19308,19311,19313,19315,19318,19320,19322,19324],{"class":582,"line":2304},[580,19295,19296],{"class":642},"      Nhấn ",[580,19298,594],{"class":593},[580,19300,19301],{"class":597},"kbd",[580,19303,602],{"class":601},[580,19305,605],{"class":593},[580,19307,608],{"class":593},[580,19309,19310],{"class":611},"px-2 py-0.5 bg-gray-200 rounded text-sm font-mono",[580,19312,608],{"class":593},[580,19314,639],{"class":593},[580,19316,19317],{"class":642},"Tab",[580,19319,646],{"class":593},[580,19321,19301],{"class":597},[580,19323,639],{"class":593},[580,19325,19326],{"class":642}," khi trang vừa load. \n",[580,19328,19329],{"class":582,"line":2365},[580,19330,19331],{"class":642},"      Link \"Bỏ qua và đến nội dung chính\" sẽ xuất hiện ở góc trên bên trái.\n",[580,19333,19334,19336,19338,19340,19342,19344,19346,19348,19350,19352,19355,19357,19359,19361],{"class":582,"line":2415},[580,19335,19296],{"class":642},[580,19337,594],{"class":593},[580,19339,19301],{"class":597},[580,19341,602],{"class":601},[580,19343,605],{"class":593},[580,19345,608],{"class":593},[580,19347,19310],{"class":611},[580,19349,608],{"class":593},[580,19351,639],{"class":593},[580,19353,19354],{"class":642},"Enter",[580,19356,646],{"class":593},[580,19358,19301],{"class":597},[580,19360,639],{"class":593},[580,19362,19363],{"class":642}," để skip navigation.\n",[580,19365,19366,19368,19370],{"class":582,"line":2424},[580,19367,2719],{"class":593},[580,19369,432],{"class":597},[580,19371,617],{"class":593},[580,19373,19374],{"class":582,"line":2433},[580,19375,963],{"emptyLinePlaceholder":962},[580,19377,19378],{"class":582,"line":2443},[580,19379,19380],{"class":586},"    \u003C!-- Demo content với các interactive elements -->\n",[580,19382,19383,19385,19387,19389,19391,19393,19396,19398],{"class":582,"line":2448},[580,19384,1195],{"class":593},[580,19386,598],{"class":597},[580,19388,602],{"class":601},[580,19390,605],{"class":593},[580,19392,608],{"class":593},[580,19394,19395],{"class":611},"space-y-4",[580,19397,608],{"class":593},[580,19399,617],{"class":593},[580,19401,19402,19404,19406,19408,19410,19412,19415,19417],{"class":582,"line":2454},[580,19403,1743],{"class":593},[580,19405,598],{"class":597},[580,19407,602],{"class":601},[580,19409,605],{"class":593},[580,19411,608],{"class":593},[580,19413,19414],{"class":611},"bg-white border border-gray-200 rounded-xl p-6",[580,19416,608],{"class":593},[580,19418,617],{"class":593},[580,19420,19421,19423,19425,19427,19429,19431,19434,19436,19438,19441,19443,19445],{"class":582,"line":2485},[580,19422,1773],{"class":593},[580,19424,427],{"class":597},[580,19426,602],{"class":601},[580,19428,605],{"class":593},[580,19430,608],{"class":593},[580,19432,19433],{"class":611},"text-lg font-semibold text-gray-900 mb-3",[580,19435,608],{"class":593},[580,19437,639],{"class":593},[580,19439,19440],{"class":642},"Accessibility Features",[580,19442,646],{"class":593},[580,19444,427],{"class":597},[580,19446,617],{"class":593},[580,19448,19449],{"class":582,"line":2505},[580,19450,1763],{"class":642},[580,19452,19453,19455,19457,19459,19461,19463,19466,19468],{"class":582,"line":2543},[580,19454,1773],{"class":593},[580,19456,804],{"class":597},[580,19458,602],{"class":601},[580,19460,605],{"class":593},[580,19462,608],{"class":593},[580,19464,19465],{"class":611},"space-y-3 text-sm text-gray-700",[580,19467,608],{"class":593},[580,19469,617],{"class":593},[580,19471,19472,19474,19476,19478,19480,19482,19485,19487],{"class":582,"line":2580},[580,19473,1793],{"class":593},[580,19475,807],{"class":597},[580,19477,602],{"class":601},[580,19479,605],{"class":593},[580,19481,608],{"class":593},[580,19483,19484],{"class":611},"flex items-start gap-2",[580,19486,608],{"class":593},[580,19488,617],{"class":593},[580,19490,19491,19493,19495,19497,19499,19501,19504,19506,19508,19511,19513,19515],{"class":582,"line":2617},[580,19492,2233],{"class":593},[580,19494,580],{"class":597},[580,19496,602],{"class":601},[580,19498,605],{"class":593},[580,19500,608],{"class":593},[580,19502,19503],{"class":611},"text-green-600 mt-0.5",[580,19505,608],{"class":593},[580,19507,639],{"class":593},[580,19509,19510],{"class":642},"✓",[580,19512,646],{"class":593},[580,19514,580],{"class":597},[580,19516,617],{"class":593},[580,19518,19519,19521,19523,19525,19527,19529,19532,19534,19536,19538,19541,19543,19545],{"class":582,"line":2654},[580,19520,2233],{"class":593},[580,19522,580],{"class":597},[580,19524,1255],{"class":593},[580,19526,436],{"class":597},[580,19528,639],{"class":593},[580,19530,19531],{"class":642},"Skip link:",[580,19533,646],{"class":593},[580,19535,436],{"class":597},[580,19537,639],{"class":593},[580,19539,19540],{"class":642}," Element đầu tiên trong DOM, giúp keyboard user skip navigation dài.",[580,19542,646],{"class":593},[580,19544,580],{"class":597},[580,19546,617],{"class":593},[580,19548,19549,19551,19553],{"class":582,"line":2684},[580,19550,1854],{"class":593},[580,19552,807],{"class":597},[580,19554,617],{"class":593},[580,19556,19557,19559,19561,19563,19565,19567,19569,19571],{"class":582,"line":2689},[580,19558,1793],{"class":593},[580,19560,807],{"class":597},[580,19562,602],{"class":601},[580,19564,605],{"class":593},[580,19566,608],{"class":593},[580,19568,19484],{"class":611},[580,19570,608],{"class":593},[580,19572,617],{"class":593},[580,19574,19575,19577,19579,19581,19583,19585,19587,19589,19591,19593,19595,19597],{"class":582,"line":2698},[580,19576,2233],{"class":593},[580,19578,580],{"class":597},[580,19580,602],{"class":601},[580,19582,605],{"class":593},[580,19584,608],{"class":593},[580,19586,19503],{"class":611},[580,19588,608],{"class":593},[580,19590,639],{"class":593},[580,19592,19510],{"class":642},[580,19594,646],{"class":593},[580,19596,580],{"class":597},[580,19598,617],{"class":593},[580,19600,19601,19603,19605,19607,19609,19611,19614,19616,19618,19620,19623,19625,19627,19629,19631,19633,19636,19638,19640,19643,19645,19647,19649,19652,19654,19656],{"class":582,"line":2707},[580,19602,2233],{"class":593},[580,19604,580],{"class":597},[580,19606,1255],{"class":593},[580,19608,436],{"class":597},[580,19610,639],{"class":593},[580,19612,19613],{"class":642},"Focus ring:",[580,19615,646],{"class":593},[580,19617,436],{"class":597},[580,19619,639],{"class":593},[580,19621,19622],{"class":642}," Tất cả link có ",[580,19624,594],{"class":593},[580,19626,491],{"class":597},[580,19628,602],{"class":601},[580,19630,605],{"class":593},[580,19632,608],{"class":593},[580,19634,19635],{"class":611},"bg-gray-100 px-1 rounded",[580,19637,608],{"class":593},[580,19639,639],{"class":593},[580,19641,19642],{"class":642},"focus:ring-2",[580,19644,646],{"class":593},[580,19646,491],{"class":597},[580,19648,639],{"class":593},[580,19650,19651],{"class":642}," để visible focus indicator.",[580,19653,646],{"class":593},[580,19655,580],{"class":597},[580,19657,617],{"class":593},[580,19659,19660,19662,19664],{"class":582,"line":2716},[580,19661,1854],{"class":593},[580,19663,807],{"class":597},[580,19665,617],{"class":593},[580,19667,19668,19670,19672,19674,19676,19678,19680,19682],{"class":582,"line":2726},[580,19669,1793],{"class":593},[580,19671,807],{"class":597},[580,19673,602],{"class":601},[580,19675,605],{"class":593},[580,19677,608],{"class":593},[580,19679,19484],{"class":611},[580,19681,608],{"class":593},[580,19683,617],{"class":593},[580,19685,19686,19688,19690,19692,19694,19696,19698,19700,19702,19704,19706,19708],{"class":582,"line":2735},[580,19687,2233],{"class":593},[580,19689,580],{"class":597},[580,19691,602],{"class":601},[580,19693,605],{"class":593},[580,19695,608],{"class":593},[580,19697,19503],{"class":611},[580,19699,608],{"class":593},[580,19701,639],{"class":593},[580,19703,19510],{"class":642},[580,19705,646],{"class":593},[580,19707,580],{"class":597},[580,19709,617],{"class":593},[580,19711,19712,19714,19716,19718,19720,19722,19725,19727,19729,19731,19734,19736,19738,19740,19742,19744,19746,19748,19750,19753,19755,19757,19759,19761,19763,19765],{"class":582,"line":2740},[580,19713,2233],{"class":593},[580,19715,580],{"class":597},[580,19717,1255],{"class":593},[580,19719,436],{"class":597},[580,19721,639],{"class":593},[580,19723,19724],{"class":642},"aria-label:",[580,19726,646],{"class":593},[580,19728,436],{"class":597},[580,19730,639],{"class":593},[580,19732,19733],{"class":642}," Navigation có ",[580,19735,594],{"class":593},[580,19737,491],{"class":597},[580,19739,602],{"class":601},[580,19741,605],{"class":593},[580,19743,608],{"class":593},[580,19745,19635],{"class":611},[580,19747,608],{"class":593},[580,19749,639],{"class":593},[580,19751,19752],{"class":642},"aria-label=\"Main navigation\"",[580,19754,646],{"class":593},[580,19756,491],{"class":597},[580,19758,639],{"class":593},[580,19760,3003],{"class":642},[580,19762,646],{"class":593},[580,19764,580],{"class":597},[580,19766,617],{"class":593},[580,19768,19769,19771,19773],{"class":582,"line":2746},[580,19770,1854],{"class":593},[580,19772,807],{"class":597},[580,19774,617],{"class":593},[580,19776,19777,19779,19781,19783,19785,19787,19789,19791],{"class":582,"line":2770},[580,19778,1793],{"class":593},[580,19780,807],{"class":597},[580,19782,602],{"class":601},[580,19784,605],{"class":593},[580,19786,608],{"class":593},[580,19788,19484],{"class":611},[580,19790,608],{"class":593},[580,19792,617],{"class":593},[580,19794,19795,19797,19799,19801,19803,19805,19807,19809,19811,19813,19815,19817],{"class":582,"line":2775},[580,19796,2233],{"class":593},[580,19798,580],{"class":597},[580,19800,602],{"class":601},[580,19802,605],{"class":593},[580,19804,608],{"class":593},[580,19806,19503],{"class":611},[580,19808,608],{"class":593},[580,19810,639],{"class":593},[580,19812,19510],{"class":642},[580,19814,646],{"class":593},[580,19816,580],{"class":597},[580,19818,617],{"class":593},[580,19820,19821,19823,19825,19827,19829,19831,19834,19836,19838,19840,19843,19845,19847],{"class":582,"line":2781},[580,19822,2233],{"class":593},[580,19824,580],{"class":597},[580,19826,1255],{"class":593},[580,19828,436],{"class":597},[580,19830,639],{"class":593},[580,19832,19833],{"class":642},"tabindex=\"-1\":",[580,19835,646],{"class":593},[580,19837,436],{"class":597},[580,19839,639],{"class":593},[580,19841,19842],{"class":642}," Main content có tabindex để focus sau khi skip.",[580,19844,646],{"class":593},[580,19846,580],{"class":597},[580,19848,617],{"class":593},[580,19850,19851,19853,19855],{"class":582,"line":2801},[580,19852,1854],{"class":593},[580,19854,807],{"class":597},[580,19856,617],{"class":593},[580,19858,19859,19861,19863],{"class":582,"line":2832},[580,19860,1863],{"class":593},[580,19862,804],{"class":597},[580,19864,617],{"class":593},[580,19866,19867,19869,19871],{"class":582,"line":2861},[580,19868,2436],{"class":593},[580,19870,598],{"class":597},[580,19872,617],{"class":593},[580,19874,19875],{"class":582,"line":2890},[580,19876,963],{"emptyLinePlaceholder":962},[580,19878,19879],{"class":582,"line":2899},[580,19880,19881],{"class":586},"      \u003C!-- Keyboard-test form -->\n",[580,19883,19884,19886,19888,19890,19892,19894,19896,19898],{"class":582,"line":2929},[580,19885,1743],{"class":593},[580,19887,598],{"class":597},[580,19889,602],{"class":601},[580,19891,605],{"class":593},[580,19893,608],{"class":593},[580,19895,19414],{"class":611},[580,19897,608],{"class":593},[580,19899,617],{"class":593},[580,19901,19902,19904,19906,19908,19910,19912,19914,19916,19918,19921,19923,19925],{"class":582,"line":2957},[580,19903,1773],{"class":593},[580,19905,427],{"class":597},[580,19907,602],{"class":601},[580,19909,605],{"class":593},[580,19911,608],{"class":593},[580,19913,19433],{"class":611},[580,19915,608],{"class":593},[580,19917,639],{"class":593},[580,19919,19920],{"class":642},"Test Keyboard Navigation",[580,19922,646],{"class":593},[580,19924,427],{"class":597},[580,19926,617],{"class":593},[580,19928,19929,19931,19933,19935,19937,19939,19942,19944,19946,19949,19951,19953],{"class":582,"line":2966},[580,19930,1773],{"class":593},[580,19932,432],{"class":597},[580,19934,602],{"class":601},[580,19936,605],{"class":593},[580,19938,608],{"class":593},[580,19940,19941],{"class":611},"text-sm text-gray-600 mb-4",[580,19943,608],{"class":593},[580,19945,639],{"class":593},[580,19947,19948],{"class":642},"Dùng Tab để di chuyển giữa các field bên dưới.",[580,19950,646],{"class":593},[580,19952,432],{"class":597},[580,19954,617],{"class":593},[580,19956,19957],{"class":582,"line":2975},[580,19958,1763],{"class":642},[580,19960,19961,19963,19966,19968,19970,19972,19975,19977,19980,19982,19984,19987,19989,19992,19994,19997],{"class":582,"line":2980},[580,19962,1773],{"class":593},[580,19964,19965],{"class":597},"form",[580,19967,602],{"class":601},[580,19969,605],{"class":593},[580,19971,608],{"class":593},[580,19973,19974],{"class":611},"space-y-3",[580,19976,608],{"class":593},[580,19978,19979],{"class":601}," onsubmit",[580,19981,605],{"class":593},[580,19983,608],{"class":593},[580,19985,19986],{"class":642},"event",[580,19988,3003],{"class":593},[580,19990,19991],{"class":3006},"preventDefault",[580,19993,11912],{"class":611},[580,19995,19996],{"class":593},";\"",[580,19998,617],{"class":593},[580,20000,20001,20003,20005],{"class":582,"line":2989},[580,20002,1793],{"class":593},[580,20004,598],{"class":597},[580,20006,617],{"class":593},[580,20008,20009,20011,20014,20017,20019,20021,20024,20026,20028,20030,20032,20035,20037,20039,20042,20044,20046],{"class":582,"line":3025},[580,20010,2233],{"class":593},[580,20012,20013],{"class":597},"label",[580,20015,20016],{"class":601}," for",[580,20018,605],{"class":593},[580,20020,608],{"class":593},[580,20022,20023],{"class":611},"name",[580,20025,608],{"class":593},[580,20027,602],{"class":601},[580,20029,605],{"class":593},[580,20031,608],{"class":593},[580,20033,20034],{"class":611},"block text-sm font-medium text-gray-700 mb-1",[580,20036,608],{"class":593},[580,20038,639],{"class":593},[580,20040,20041],{"class":642},"Họ tên",[580,20043,646],{"class":593},[580,20045,20013],{"class":597},[580,20047,617],{"class":593},[580,20049,20050,20052,20055,20057,20059,20061,20063,20065,20068,20070,20072,20075,20077],{"class":582,"line":3053},[580,20051,2233],{"class":593},[580,20053,20054],{"class":597},"input",[580,20056,2120],{"class":601},[580,20058,605],{"class":593},[580,20060,608],{"class":593},[580,20062,20023],{"class":611},[580,20064,608],{"class":593},[580,20066,20067],{"class":601}," type",[580,20069,605],{"class":593},[580,20071,608],{"class":593},[580,20073,20074],{"class":611},"text",[580,20076,608],{"class":593},[580,20078,10418],{"class":593},[580,20080,20081,20084,20086,20088],{"class":582,"line":3081},[580,20082,20083],{"class":601},"                   class",[580,20085,605],{"class":593},[580,20087,608],{"class":593},[580,20089,20090],{"class":611},"w-full px-3 py-2 border border-gray-300 rounded-lg \n",[580,20092,20093],{"class":582,"line":3109},[580,20094,20095],{"class":611},"                          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\n",[580,20097,20098,20101,20103],{"class":582,"line":3114},[580,20099,20100],{"class":611},"                          text-sm",[580,20102,608],{"class":593},[580,20104,10418],{"class":593},[580,20106,20107,20110,20112,20114,20117,20119],{"class":582,"line":3145},[580,20108,20109],{"class":601},"                   placeholder",[580,20111,605],{"class":593},[580,20113,608],{"class":593},[580,20115,20116],{"class":611},"Nguyen Van A",[580,20118,608],{"class":593},[580,20120,617],{"class":593},[580,20122,20123,20125,20127],{"class":582,"line":3174},[580,20124,1854],{"class":593},[580,20126,598],{"class":597},[580,20128,617],{"class":593},[580,20130,20131,20133,20135],{"class":582,"line":3200},[580,20132,1793],{"class":593},[580,20134,598],{"class":597},[580,20136,617],{"class":593},[580,20138,20139,20141,20143,20145,20147,20149,20152,20154,20156,20158,20160,20162,20164,20166,20169,20171,20173],{"class":582,"line":3226},[580,20140,2233],{"class":593},[580,20142,20013],{"class":597},[580,20144,20016],{"class":601},[580,20146,605],{"class":593},[580,20148,608],{"class":593},[580,20150,20151],{"class":611},"email",[580,20153,608],{"class":593},[580,20155,602],{"class":601},[580,20157,605],{"class":593},[580,20159,608],{"class":593},[580,20161,20034],{"class":611},[580,20163,608],{"class":593},[580,20165,639],{"class":593},[580,20167,20168],{"class":642},"Email",[580,20170,646],{"class":593},[580,20172,20013],{"class":597},[580,20174,617],{"class":593},[580,20176,20177,20179,20181,20183,20185,20187,20189,20191,20193,20195,20197,20199,20201],{"class":582,"line":3236},[580,20178,2233],{"class":593},[580,20180,20054],{"class":597},[580,20182,2120],{"class":601},[580,20184,605],{"class":593},[580,20186,608],{"class":593},[580,20188,20151],{"class":611},[580,20190,608],{"class":593},[580,20192,20067],{"class":601},[580,20194,605],{"class":593},[580,20196,608],{"class":593},[580,20198,20151],{"class":611},[580,20200,608],{"class":593},[580,20202,10418],{"class":593},[580,20204,20205,20207,20209,20211],{"class":582,"line":3241},[580,20206,20083],{"class":601},[580,20208,605],{"class":593},[580,20210,608],{"class":593},[580,20212,20090],{"class":611},[580,20214,20215],{"class":582,"line":3247},[580,20216,20095],{"class":611},[580,20218,20219,20221,20223],{"class":582,"line":3283},[580,20220,20100],{"class":611},[580,20222,608],{"class":593},[580,20224,10418],{"class":593},[580,20226,20227,20229,20231,20233,20236,20238],{"class":582,"line":3309},[580,20228,20109],{"class":601},[580,20230,605],{"class":593},[580,20232,608],{"class":593},[580,20234,20235],{"class":611},"email@example.com",[580,20237,608],{"class":593},[580,20239,617],{"class":593},[580,20241,20242,20244,20246],{"class":582,"line":3336},[580,20243,1854],{"class":593},[580,20245,598],{"class":597},[580,20247,617],{"class":593},[580,20249,20250,20252,20254,20256,20258,20260,20263,20265],{"class":582,"line":3363},[580,20251,1793],{"class":593},[580,20253,1177],{"class":597},[580,20255,20067],{"class":601},[580,20257,605],{"class":593},[580,20259,608],{"class":593},[580,20261,20262],{"class":611},"submit",[580,20264,608],{"class":593},[580,20266,10418],{"class":593},[580,20268,20269,20272,20274,20276],{"class":582,"line":3389},[580,20270,20271],{"class":601},"                  class",[580,20273,605],{"class":593},[580,20275,608],{"class":593},[580,20277,20278],{"class":611},"px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium\n",[580,20280,20281],{"class":582,"line":3399},[580,20282,20283],{"class":611},"                         hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2\n",[580,20285,20286,20289,20291],{"class":582,"line":3408},[580,20287,20288],{"class":611},"                         transition-colors",[580,20290,608],{"class":593},[580,20292,617],{"class":593},[580,20294,20295],{"class":582,"line":3417},[580,20296,20297],{"class":642},"            Submit\n",[580,20299,20300,20302,20304],{"class":582,"line":3422},[580,20301,1854],{"class":593},[580,20303,1177],{"class":597},[580,20305,617],{"class":593},[580,20307,20308,20310,20312],{"class":582,"line":3431},[580,20309,1863],{"class":593},[580,20311,19965],{"class":597},[580,20313,617],{"class":593},[580,20315,20316,20318,20320],{"class":582,"line":5345},[580,20317,2436],{"class":593},[580,20319,598],{"class":597},[580,20321,617],{"class":593},[580,20323,20324,20326,20328],{"class":582,"line":5364},[580,20325,2719],{"class":593},[580,20327,598],{"class":597},[580,20329,617],{"class":593},[580,20331,20332],{"class":582,"line":5384},[580,20333,963],{"emptyLinePlaceholder":962},[580,20335,20336,20338,20340],{"class":582,"line":5434},[580,20337,1215],{"class":593},[580,20339,1117],{"class":597},[580,20341,617],{"class":593},[580,20343,20344],{"class":582,"line":5484},[580,20345,963],{"emptyLinePlaceholder":962},[580,20347,20348,20350,20352],{"class":582,"line":5493},[580,20349,646],{"class":593},[580,20351,1677],{"class":597},[580,20353,617],{"class":593},[580,20355,20356,20358,20360],{"class":582,"line":5502},[580,20357,646],{"class":593},[580,20359,575],{"class":597},[580,20361,617],{"class":593},[432,20363,20364],{},[436,20365,3442],{},[804,20367,20368,20374,20380,20389,20395,20400],{},[807,20369,20370,20373],{},[491,20371,20372],{},"sr-only focus:not-sr-only",": Link ẩn với mọi người, nhưng hiển thị khi nhận focus (Tab tới).",[807,20375,20376,20379],{},[491,20377,20378],{},"focus:fixed focus:top-4 focus:left-4",": Khi hiện, link xuất hiện ở vị trí fixed trên màn hình.",[807,20381,20382,14443,20385,20388],{},[491,20383,20384],{},"id=\"main-content\"",[491,20386,20387],{},"tabindex=\"-1\"",": Cho phép focus vào main content sau khi skip (cần cho keyboard focus management).",[807,20390,20391,20394],{},[491,20392,20393],{},"focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",": Visible focus indicator trên tất cả interactive elements.",[807,20396,20397,20399],{},[491,20398,19752],{},": Cung cấp context cho screen reader.",[807,20401,20402,20405],{},[491,20403,20404],{},"\u003Ckbd>"," styling: Hiển thị phím tắt đẹp mắt.",[5863,20407],{},[427,20409,20411],{"id":20410},"tổng-kết","Tổng Kết",[20413,20414,20415,20434,20449,20455,20462,20469],"card-group",{},[20416,20417,20420,20421,563,20423,563,20425,563,20427,563,20429,20431,20432,3003],"card",{"icon":20418,"title":20419},"i-lucide-smartphone","Responsive Design","Mobile-first với breakpoint prefix (",[491,20422,493],{},[491,20424,506],{},[491,20426,519],{},[491,20428,532],{},[491,20430,545],{},"). Mọi utility đều responsive được. Custom breakpoints qua ",[491,20433,932],{},[20416,20435,20437,14443,20439,563,20441,563,20443,20445,20446,20448],{"icon":20436,"title":4848},"i-lucide-box",[491,20438,5937],{},[491,20440,6019],{},[491,20442,6029],{},[491,20444,6039],{}," prefix. Component tự thích nghi theo container cha, không phải viewport. ",[491,20447,6137],{}," (v4.3) cho size queries.",[20416,20450,20452,20454],{"icon":20451,"title":9755},"i-lucide-moon",[491,20453,9522],{}," variant với media query (mặc định) hoặc class-based. Toggle bằng JS + localStorage. Pattern màu sắc rõ ràng cho light\u002Fdark.",[20416,20456,20459,20461],{"icon":20457,"title":20458},"i-lucide-wand-2","Custom Variants",[491,20460,9707],{}," để tạo variant riêng. Stacked variants (v4.3) và compound variants. Multi-theme support dễ dàng.",[20416,20463,20466,20468],{"icon":20464,"title":20465},"i-lucide-printer","Print Styles",[491,20467,16313],{}," variant cho style khi in. Ẩn navigation, tối ưu text\u002Fcolor, hiện URL đầy đủ.",[20416,20470,20473,12414,20475,563,20477,12414,20479,20481],{"icon":20471,"title":20472},"i-lucide-accessibility","Accessibility",[491,20474,18453],{},[491,20476,18457],{},[491,20478,18537],{},[491,20480,18540],{},", focus ring, skip-to-content link, aria attributes.",[553,20483,20485,20486,20488],{"color":555,"icon":20484},"i-lucide-arrow-right","Tiếp theo: ",[1258,20487,412],{"href":413}," — CSS-first config, @theme, @utility, @plugin và xây dựng design system hoàn chỉnh.",[10173,20490,20491],{},"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":576,"searchDepth":590,"depth":590,"links":20493},[20494,20502,20509,20517,20524,20527,20534],{"id":429,"depth":590,"text":430,"children":20495},[20496,20497,20498,20499,20500,20501],{"id":447,"depth":620,"text":448},{"id":827,"depth":620,"text":828},{"id":925,"depth":620,"text":926},{"id":1051,"depth":620,"text":1052},{"id":1485,"depth":620,"text":1486},{"id":3483,"depth":620,"text":3484},{"id":5867,"depth":590,"text":5868,"children":20503},[20504,20505,20506,20507,20508],{"id":5882,"depth":620,"text":5883},{"id":5911,"depth":620,"text":5912},{"id":6130,"depth":620,"text":6131},{"id":6250,"depth":620,"text":6251},{"id":7806,"depth":620,"text":7807},{"id":9511,"depth":590,"text":9512,"children":20510},[20511,20513,20514,20515,20516],{"id":9525,"depth":620,"text":20512},"3.1. Cách dark: hoạt động",{"id":9661,"depth":620,"text":9662},{"id":9736,"depth":620,"text":9737},{"id":10009,"depth":620,"text":10010},{"id":12438,"depth":620,"text":12439},{"id":14471,"depth":590,"text":14472,"children":20518},[20519,20520,20521,20522],{"id":14480,"depth":620,"text":14481},{"id":14542,"depth":620,"text":14543},{"id":14622,"depth":620,"text":14623},{"id":14690,"depth":620,"text":20523},"4.4. BÀI TẬP 7 — Custom theme- Variant cho Multi-Theme Support",{"id":16306,"depth":590,"text":16307,"children":20525},[20526],{"id":16460,"depth":620,"text":16461},{"id":18445,"depth":590,"text":18446,"children":20528},[20529,20531,20533],{"id":18449,"depth":620,"text":20530},"6.1. sr-only và not-sr-only",{"id":18533,"depth":620,"text":20532},"6.2. motion-safe: và motion-reduce:",{"id":18618,"depth":620,"text":18619},{"id":20410,"depth":590,"text":20411},"Tailwind CSS v4 — responsive breakpoints, container queries, dark mode, custom variants. Bài tập responsive layout và dark mode theme.","md",null,{},{"title":407,"icon":410},{"title":422,"description":20535},"cLpBjXU8hr6fwPRMghz-bXTe3BvoUEO5MygEwelKW0E",[20543,20545],{"title":402,"path":403,"stem":404,"description":20544,"icon":405,"children":-1},"Tailwind CSS v4 — hover\u002Ffocus\u002Factive states, transitions, transforms 3D, animations, filters, backdrop. Bài tập interactive components.",{"title":412,"path":413,"stem":414,"description":20546,"icon":415,"children":-1},"Tailwind CSS v4 CSS-first config — @theme, @utility, @plugin, @custom-variant, custom colors, fonts, breakpoints. Bài tập custom design system.",1783490362461]