[{"data":1,"prerenderedAt":24376},["ShallowReactive",2],{"navigation_docs":3,"-tu-hoc-tailwindcss-interactive-effects":420,"-tu-hoc-tailwindcss-interactive-effects-surround":24371},[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":24364,"extension":24365,"links":24366,"meta":24367,"navigation":24368,"path":403,"seo":24369,"stem":404,"__hash__":24370},"docs\u002F2.tu-hoc\u002F6.tailwindcss\u002F3.interactive-effects.md","Interactive States, Transitions & Animations",{"type":424,"value":425,"toc":24308},"minimark",[426,452,461,823,828,963,967,1067,1071,1229,1256,1306,1310,1396,1400,1406,2327,2331,2336,2903,2907,2918,3879,3883,3888,5601,5604,5623,5626,5791,5795,6135,6153,6157,6231,6235,6240,6791,6795,6800,7694,7698,7703,8255,8257,8279,8885,8889,8910,9132,9135,9252,9256,9261,9742,9746,9751,10437,10441,10446,11549,11551,11567,11570,11749,11756,12058,12151,12155,12238,12242,12247,12900,12904,12909,13979,13983,13988,14580,14582,14586,14829,14833,14838,15489,15491,15522,15525,16242,16246,16253,16416,16420,16425,17164,17168,17173,17895,17899,17904,18542,18544,18548,18987,18991,18996,20009,20011,20015,20024,20028,20033,20049,20882,20886,20891,20902,22260,22264,22269,22283,24299,24301,24305],[427,428,430,431,435,436,435,439,435,442,435,445,435,448,451],"h2",{"id":429},"_1-state-variants-hover-focus-active-visited-focus-visible-focus-within","1. State Variants (",[432,433,434],"code",{},"hover:",", ",[432,437,438],{},"focus:",[432,440,441],{},"active:",[432,443,444],{},"visited:",[432,446,447],{},"focus-visible:",[432,449,450],{},"focus-within:",")",[453,454,455,456,460],"p",{},"Mọi utility trong Tailwind đều có thể gắn với ",[457,458,459],"strong",{},"state variant"," — class chỉ áp dụng khi element ở trạng thái cụ thể.",[462,463,468],"pre",{"className":464,"code":465,"language":466,"meta":467,"style":467},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Hover: đổi màu nền khi rê chuột -->\n\u003Cbutton class=\"bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg\">\n  Hover me\n\u003C\u002Fbutton>\n\n\u003C!-- Focus: áp dụng khi element được focus -->\n\u003Cinput class=\"border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200\" \u002F>\n\n\u003C!-- Active: áp dụng khi đang click\u002Fgiữ -->\n\u003Cbutton class=\"bg-blue-500 active:bg-blue-700 active:scale-95 text-white px-4 py-2 rounded-lg\">\n  Click me\n\u003C\u002Fbutton>\n\n\u003C!-- Visited: áp dụng cho link đã click -->\n\u003Ca href=\"#\" class=\"text-blue-600 visited:text-purple-600\">Visited link\u003C\u002Fa>\n\n\u003C!-- focus-visible: chỉ hiện focus ring khi dùng keyboard (không phải mouse) -->\n\u003Cbutton class=\"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none\">\n  Keyboard accessible\n\u003C\u002Fbutton>\n\n\u003C!-- focus-within: áp dụng khi bất kỳ child nào được focus -->\n\u003Cdiv class=\"border border-gray-200 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-200 rounded-lg p-4\">\n  \u003Clabel class=\"block text-sm text-gray-500 focus-within:text-blue-600\">Search\u003C\u002Flabel>\n  \u003Cinput type=\"text\" class=\"w-full outline-none\" placeholder=\"Type to search...\" \u002F>\n\u003C\u002Fdiv>\n","html","",[432,469,470,479,509,516,526,533,539,561,566,572,592,598,607,612,618,661,666,672,692,698,707,712,718,739,770,814],{"__ignoreMap":467},[471,472,475],"span",{"class":473,"line":474},"line",1,[471,476,478],{"class":477},"sHwdD","\u003C!-- Hover: đổi màu nền khi rê chuột -->\n",[471,480,482,486,490,494,497,500,504,506],{"class":473,"line":481},2,[471,483,485],{"class":484},"sMK4o","\u003C",[471,487,489],{"class":488},"swJcz","button",[471,491,493],{"class":492},"spNyl"," class",[471,495,496],{"class":484},"=",[471,498,499],{"class":484},"\"",[471,501,503],{"class":502},"sfazB","bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg",[471,505,499],{"class":484},[471,507,508],{"class":484},">\n",[471,510,512],{"class":473,"line":511},3,[471,513,515],{"class":514},"sTEyZ","  Hover me\n",[471,517,519,522,524],{"class":473,"line":518},4,[471,520,521],{"class":484},"\u003C\u002F",[471,523,489],{"class":488},[471,525,508],{"class":484},[471,527,529],{"class":473,"line":528},5,[471,530,532],{"emptyLinePlaceholder":531},true,"\n",[471,534,536],{"class":473,"line":535},6,[471,537,538],{"class":477},"\u003C!-- Focus: áp dụng khi element được focus -->\n",[471,540,542,544,547,549,551,553,556,558],{"class":473,"line":541},7,[471,543,485],{"class":484},[471,545,546],{"class":488},"input",[471,548,493],{"class":492},[471,550,496],{"class":484},[471,552,499],{"class":484},[471,554,555],{"class":502},"border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200",[471,557,499],{"class":484},[471,559,560],{"class":484}," \u002F>\n",[471,562,564],{"class":473,"line":563},8,[471,565,532],{"emptyLinePlaceholder":531},[471,567,569],{"class":473,"line":568},9,[471,570,571],{"class":477},"\u003C!-- Active: áp dụng khi đang click\u002Fgiữ -->\n",[471,573,575,577,579,581,583,585,588,590],{"class":473,"line":574},10,[471,576,485],{"class":484},[471,578,489],{"class":488},[471,580,493],{"class":492},[471,582,496],{"class":484},[471,584,499],{"class":484},[471,586,587],{"class":502},"bg-blue-500 active:bg-blue-700 active:scale-95 text-white px-4 py-2 rounded-lg",[471,589,499],{"class":484},[471,591,508],{"class":484},[471,593,595],{"class":473,"line":594},11,[471,596,597],{"class":514},"  Click me\n",[471,599,601,603,605],{"class":473,"line":600},12,[471,602,521],{"class":484},[471,604,489],{"class":488},[471,606,508],{"class":484},[471,608,610],{"class":473,"line":609},13,[471,611,532],{"emptyLinePlaceholder":531},[471,613,615],{"class":473,"line":614},14,[471,616,617],{"class":477},"\u003C!-- Visited: áp dụng cho link đã click -->\n",[471,619,621,623,626,629,631,633,636,638,640,642,644,647,649,652,655,657,659],{"class":473,"line":620},15,[471,622,485],{"class":484},[471,624,625],{"class":488},"a",[471,627,628],{"class":492}," href",[471,630,496],{"class":484},[471,632,499],{"class":484},[471,634,635],{"class":502},"#",[471,637,499],{"class":484},[471,639,493],{"class":492},[471,641,496],{"class":484},[471,643,499],{"class":484},[471,645,646],{"class":502},"text-blue-600 visited:text-purple-600",[471,648,499],{"class":484},[471,650,651],{"class":484},">",[471,653,654],{"class":514},"Visited link",[471,656,521],{"class":484},[471,658,625],{"class":488},[471,660,508],{"class":484},[471,662,664],{"class":473,"line":663},16,[471,665,532],{"emptyLinePlaceholder":531},[471,667,669],{"class":473,"line":668},17,[471,670,671],{"class":477},"\u003C!-- focus-visible: chỉ hiện focus ring khi dùng keyboard (không phải mouse) -->\n",[471,673,675,677,679,681,683,685,688,690],{"class":473,"line":674},18,[471,676,485],{"class":484},[471,678,489],{"class":488},[471,680,493],{"class":492},[471,682,496],{"class":484},[471,684,499],{"class":484},[471,686,687],{"class":502},"focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none",[471,689,499],{"class":484},[471,691,508],{"class":484},[471,693,695],{"class":473,"line":694},19,[471,696,697],{"class":514},"  Keyboard accessible\n",[471,699,701,703,705],{"class":473,"line":700},20,[471,702,521],{"class":484},[471,704,489],{"class":488},[471,706,508],{"class":484},[471,708,710],{"class":473,"line":709},21,[471,711,532],{"emptyLinePlaceholder":531},[471,713,715],{"class":473,"line":714},22,[471,716,717],{"class":477},"\u003C!-- focus-within: áp dụng khi bất kỳ child nào được focus -->\n",[471,719,721,723,726,728,730,732,735,737],{"class":473,"line":720},23,[471,722,485],{"class":484},[471,724,725],{"class":488},"div",[471,727,493],{"class":492},[471,729,496],{"class":484},[471,731,499],{"class":484},[471,733,734],{"class":502},"border border-gray-200 focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-200 rounded-lg p-4",[471,736,499],{"class":484},[471,738,508],{"class":484},[471,740,742,745,748,750,752,754,757,759,761,764,766,768],{"class":473,"line":741},24,[471,743,744],{"class":484},"  \u003C",[471,746,747],{"class":488},"label",[471,749,493],{"class":492},[471,751,496],{"class":484},[471,753,499],{"class":484},[471,755,756],{"class":502},"block text-sm text-gray-500 focus-within:text-blue-600",[471,758,499],{"class":484},[471,760,651],{"class":484},[471,762,763],{"class":514},"Search",[471,765,521],{"class":484},[471,767,747],{"class":488},[471,769,508],{"class":484},[471,771,773,775,777,780,782,784,787,789,791,793,795,798,800,803,805,807,810,812],{"class":473,"line":772},25,[471,774,744],{"class":484},[471,776,546],{"class":488},[471,778,779],{"class":492}," type",[471,781,496],{"class":484},[471,783,499],{"class":484},[471,785,786],{"class":502},"text",[471,788,499],{"class":484},[471,790,493],{"class":492},[471,792,496],{"class":484},[471,794,499],{"class":484},[471,796,797],{"class":502},"w-full outline-none",[471,799,499],{"class":484},[471,801,802],{"class":492}," placeholder",[471,804,496],{"class":484},[471,806,499],{"class":484},[471,808,809],{"class":502},"Type to search...",[471,811,499],{"class":484},[471,813,560],{"class":484},[471,815,817,819,821],{"class":473,"line":816},26,[471,818,521],{"class":484},[471,820,725],{"class":488},[471,822,508],{"class":484},[824,825,827],"h3",{"id":826},"group-hover-group-focus-parent-state-affects-children","group-hover \u002F group-focus — Parent state affects children",[462,829,831],{"className":464,"code":830,"language":466,"meta":467,"style":467},"\u003C!-- Khi hover vào parent (.group), thay đổi child -->\n\u003Cdiv class=\"group p-6 bg-white rounded-xl border border-gray-200 hover:shadow-lg transition-shadow cursor-pointer\">\n  \u003Ch3 class=\"text-lg font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors\">\n    Tiêu đề card\n  \u003C\u002Fh3>\n  \u003Cp class=\"text-sm text-gray-500 mt-2 group-hover:text-gray-700 transition-colors\">\n    Mô tả cũng đổi màu khi hover vào toàn bộ card.\n  \u003C\u002Fp>\n  \u003Csvg class=\"w-5 h-5 text-gray-400 group-hover:text-indigo-500 group-hover:translate-x-1 transition-all mt-4\">\n    \u003C!-- arrow icon -->\n  \u003C\u002Fsvg>\n\u003C\u002Fdiv>\n",[432,832,833,838,857,876,881,890,909,914,922,942,947,955],{"__ignoreMap":467},[471,834,835],{"class":473,"line":474},[471,836,837],{"class":477},"\u003C!-- Khi hover vào parent (.group), thay đổi child -->\n",[471,839,840,842,844,846,848,850,853,855],{"class":473,"line":481},[471,841,485],{"class":484},[471,843,725],{"class":488},[471,845,493],{"class":492},[471,847,496],{"class":484},[471,849,499],{"class":484},[471,851,852],{"class":502},"group p-6 bg-white rounded-xl border border-gray-200 hover:shadow-lg transition-shadow cursor-pointer",[471,854,499],{"class":484},[471,856,508],{"class":484},[471,858,859,861,863,865,867,869,872,874],{"class":473,"line":511},[471,860,744],{"class":484},[471,862,824],{"class":488},[471,864,493],{"class":492},[471,866,496],{"class":484},[471,868,499],{"class":484},[471,870,871],{"class":502},"text-lg font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors",[471,873,499],{"class":484},[471,875,508],{"class":484},[471,877,878],{"class":473,"line":518},[471,879,880],{"class":514},"    Tiêu đề card\n",[471,882,883,886,888],{"class":473,"line":528},[471,884,885],{"class":484},"  \u003C\u002F",[471,887,824],{"class":488},[471,889,508],{"class":484},[471,891,892,894,896,898,900,902,905,907],{"class":473,"line":535},[471,893,744],{"class":484},[471,895,453],{"class":488},[471,897,493],{"class":492},[471,899,496],{"class":484},[471,901,499],{"class":484},[471,903,904],{"class":502},"text-sm text-gray-500 mt-2 group-hover:text-gray-700 transition-colors",[471,906,499],{"class":484},[471,908,508],{"class":484},[471,910,911],{"class":473,"line":541},[471,912,913],{"class":514},"    Mô tả cũng đổi màu khi hover vào toàn bộ card.\n",[471,915,916,918,920],{"class":473,"line":563},[471,917,885],{"class":484},[471,919,453],{"class":488},[471,921,508],{"class":484},[471,923,924,926,929,931,933,935,938,940],{"class":473,"line":568},[471,925,744],{"class":484},[471,927,928],{"class":488},"svg",[471,930,493],{"class":492},[471,932,496],{"class":484},[471,934,499],{"class":484},[471,936,937],{"class":502},"w-5 h-5 text-gray-400 group-hover:text-indigo-500 group-hover:translate-x-1 transition-all mt-4",[471,939,499],{"class":484},[471,941,508],{"class":484},[471,943,944],{"class":473,"line":574},[471,945,946],{"class":477},"    \u003C!-- arrow icon -->\n",[471,948,949,951,953],{"class":473,"line":594},[471,950,885],{"class":484},[471,952,928],{"class":488},[471,954,508],{"class":484},[471,956,957,959,961],{"class":473,"line":600},[471,958,521],{"class":484},[471,960,725],{"class":488},[471,962,508],{"class":484},[824,964,966],{"id":965},"peer-sibling-state","peer-* — Sibling state",[462,968,970],{"className":464,"code":969,"language":466,"meta":467,"style":467},"\u003C!-- Label thay đổi style khi input bên cạnh được focus -->\n\u003Clabel class=\"block\">\n  \u003Cspan class=\"text-sm text-gray-500 peer-focus:text-blue-600\">Email\u003C\u002Fspan>\n  \u003Cinput type=\"email\" class=\"peer mt-1 w-full border border-gray-300 rounded-lg px-3 py-2\n                              focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none\" \u002F>\n\u003C\u002Flabel>\n",[432,971,972,977,996,1024,1050,1059],{"__ignoreMap":467},[471,973,974],{"class":473,"line":474},[471,975,976],{"class":477},"\u003C!-- Label thay đổi style khi input bên cạnh được focus -->\n",[471,978,979,981,983,985,987,989,992,994],{"class":473,"line":481},[471,980,485],{"class":484},[471,982,747],{"class":488},[471,984,493],{"class":492},[471,986,496],{"class":484},[471,988,499],{"class":484},[471,990,991],{"class":502},"block",[471,993,499],{"class":484},[471,995,508],{"class":484},[471,997,998,1000,1002,1004,1006,1008,1011,1013,1015,1018,1020,1022],{"class":473,"line":511},[471,999,744],{"class":484},[471,1001,471],{"class":488},[471,1003,493],{"class":492},[471,1005,496],{"class":484},[471,1007,499],{"class":484},[471,1009,1010],{"class":502},"text-sm text-gray-500 peer-focus:text-blue-600",[471,1012,499],{"class":484},[471,1014,651],{"class":484},[471,1016,1017],{"class":514},"Email",[471,1019,521],{"class":484},[471,1021,471],{"class":488},[471,1023,508],{"class":484},[471,1025,1026,1028,1030,1032,1034,1036,1039,1041,1043,1045,1047],{"class":473,"line":518},[471,1027,744],{"class":484},[471,1029,546],{"class":488},[471,1031,779],{"class":492},[471,1033,496],{"class":484},[471,1035,499],{"class":484},[471,1037,1038],{"class":502},"email",[471,1040,499],{"class":484},[471,1042,493],{"class":492},[471,1044,496],{"class":484},[471,1046,499],{"class":484},[471,1048,1049],{"class":502},"peer mt-1 w-full border border-gray-300 rounded-lg px-3 py-2\n",[471,1051,1052,1055,1057],{"class":473,"line":528},[471,1053,1054],{"class":502},"                              focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none",[471,1056,499],{"class":484},[471,1058,560],{"class":484},[471,1060,1061,1063,1065],{"class":473,"line":535},[471,1062,521],{"class":484},[471,1064,747],{"class":488},[471,1066,508],{"class":484},[824,1068,1070],{"id":1069},"disabled-checked-required-invalid-user-validuser-invalid","disabled:, checked:, required:, invalid:, user-valid:\u002Fuser-invalid:",[462,1072,1074],{"className":464,"code":1073,"language":466,"meta":467,"style":467},"\u003C!-- Disabled state -->\n\u003Cbutton class=\"bg-blue-500 text-white px-4 py-2 rounded-lg\n               disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed\" disabled>\n  Submit\n\u003C\u002Fbutton>\n\n\u003C!-- Checked state (checkbox\u002Fradio) -->\n\u003Cinput type=\"checkbox\" class=\"checked:bg-blue-500 checked:border-blue-500\" \u002F>\n\n\u003C!-- Required indicator -->\n\u003Cinput required class=\"required:border-red-500\" \u002F>\n\n\u003C!-- Invalid state (HTML5 validation) -->\n\u003Cinput type=\"email\" class=\"invalid:border-red-500 invalid:text-red-600\" \u002F>\n",[432,1075,1076,1081,1096,1108,1113,1121,1125,1130,1160,1164,1169,1191,1195,1200],{"__ignoreMap":467},[471,1077,1078],{"class":473,"line":474},[471,1079,1080],{"class":477},"\u003C!-- Disabled state -->\n",[471,1082,1083,1085,1087,1089,1091,1093],{"class":473,"line":481},[471,1084,485],{"class":484},[471,1086,489],{"class":488},[471,1088,493],{"class":492},[471,1090,496],{"class":484},[471,1092,499],{"class":484},[471,1094,1095],{"class":502},"bg-blue-500 text-white px-4 py-2 rounded-lg\n",[471,1097,1098,1101,1103,1106],{"class":473,"line":511},[471,1099,1100],{"class":502},"               disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed",[471,1102,499],{"class":484},[471,1104,1105],{"class":492}," disabled",[471,1107,508],{"class":484},[471,1109,1110],{"class":473,"line":518},[471,1111,1112],{"class":514},"  Submit\n",[471,1114,1115,1117,1119],{"class":473,"line":528},[471,1116,521],{"class":484},[471,1118,489],{"class":488},[471,1120,508],{"class":484},[471,1122,1123],{"class":473,"line":535},[471,1124,532],{"emptyLinePlaceholder":531},[471,1126,1127],{"class":473,"line":541},[471,1128,1129],{"class":477},"\u003C!-- Checked state (checkbox\u002Fradio) -->\n",[471,1131,1132,1134,1136,1138,1140,1142,1145,1147,1149,1151,1153,1156,1158],{"class":473,"line":563},[471,1133,485],{"class":484},[471,1135,546],{"class":488},[471,1137,779],{"class":492},[471,1139,496],{"class":484},[471,1141,499],{"class":484},[471,1143,1144],{"class":502},"checkbox",[471,1146,499],{"class":484},[471,1148,493],{"class":492},[471,1150,496],{"class":484},[471,1152,499],{"class":484},[471,1154,1155],{"class":502},"checked:bg-blue-500 checked:border-blue-500",[471,1157,499],{"class":484},[471,1159,560],{"class":484},[471,1161,1162],{"class":473,"line":568},[471,1163,532],{"emptyLinePlaceholder":531},[471,1165,1166],{"class":473,"line":574},[471,1167,1168],{"class":477},"\u003C!-- Required indicator -->\n",[471,1170,1171,1173,1175,1178,1180,1182,1184,1187,1189],{"class":473,"line":594},[471,1172,485],{"class":484},[471,1174,546],{"class":488},[471,1176,1177],{"class":492}," required",[471,1179,493],{"class":492},[471,1181,496],{"class":484},[471,1183,499],{"class":484},[471,1185,1186],{"class":502},"required:border-red-500",[471,1188,499],{"class":484},[471,1190,560],{"class":484},[471,1192,1193],{"class":473,"line":600},[471,1194,532],{"emptyLinePlaceholder":531},[471,1196,1197],{"class":473,"line":609},[471,1198,1199],{"class":477},"\u003C!-- Invalid state (HTML5 validation) -->\n",[471,1201,1202,1204,1206,1208,1210,1212,1214,1216,1218,1220,1222,1225,1227],{"class":473,"line":614},[471,1203,485],{"class":484},[471,1205,546],{"class":488},[471,1207,779],{"class":492},[471,1209,496],{"class":484},[471,1211,499],{"class":484},[471,1213,1038],{"class":502},[471,1215,499],{"class":484},[471,1217,493],{"class":492},[471,1219,496],{"class":484},[471,1221,499],{"class":484},[471,1223,1224],{"class":502},"invalid:border-red-500 invalid:text-red-600",[471,1226,499],{"class":484},[471,1228,560],{"class":484},[1230,1231,1233,1244,1245,1239,1248,1251,1252,1255],"callout",{"color":1232,"icon":405},"success",[457,1234,1235,1236,1239,1240,1243],{},"NEW v4.0 — ",[432,1237,1238],{},"user-valid:"," \u002F ",[432,1241,1242],{},"user-invalid:",":"," Khác với ",[432,1246,1247],{},"valid:",[432,1249,1250],{},"invalid:"," (chạy ngay khi load), các variant này chỉ kích hoạt ",[457,1253,1254],{},"sau khi user đã tương tác"," với input. Đây là behavior chuẩn cho UX form hiện đại.",[462,1257,1259],{"className":464,"code":1258,"language":466,"meta":467,"style":467},"\u003Cinput type=\"email\" required\n  class=\"border border-gray-300 rounded-lg px-3 py-2\n         user-invalid:border-red-500 user-invalid:ring-2 user-invalid:ring-red-200\n         user-valid:border-emerald-500 user-valid:ring-2 user-valid:ring-emerald-200\" \u002F>\n",[432,1260,1261,1280,1292,1297],{"__ignoreMap":467},[471,1262,1263,1265,1267,1269,1271,1273,1275,1277],{"class":473,"line":474},[471,1264,485],{"class":484},[471,1266,546],{"class":488},[471,1268,779],{"class":492},[471,1270,496],{"class":484},[471,1272,499],{"class":484},[471,1274,1038],{"class":502},[471,1276,499],{"class":484},[471,1278,1279],{"class":492}," required\n",[471,1281,1282,1285,1287,1289],{"class":473,"line":481},[471,1283,1284],{"class":492},"  class",[471,1286,496],{"class":484},[471,1288,499],{"class":484},[471,1290,1291],{"class":502},"border border-gray-300 rounded-lg px-3 py-2\n",[471,1293,1294],{"class":473,"line":511},[471,1295,1296],{"class":502},"         user-invalid:border-red-500 user-invalid:ring-2 user-invalid:ring-red-200\n",[471,1298,1299,1302,1304],{"class":473,"line":518},[471,1300,1301],{"class":502},"         user-valid:border-emerald-500 user-valid:ring-2 user-valid:ring-emerald-200",[471,1303,499],{"class":484},[471,1305,560],{"class":484},[824,1307,1309],{"id":1308},"inert-v40-new-và-not-v40-new","inert: (v4.0 NEW) và not-* (v4.0 NEW)",[462,1311,1313],{"className":464,"code":1312,"language":466,"meta":467,"style":467},"\u003C!-- inert: — element được browser bỏ qua (không tương tác được) -->\n\u003Cdiv class=\"inert:opacity-50 inert:cursor-not-allowed\" inert>\n  Nội dung bị vô hiệu hóa\n\u003C\u002Fdiv>\n\n\u003C!-- not-* — áp dụng style khi KHÔNG ở trạng thái đó -->\n\u003Cdiv class=\"not-disabled:bg-blue-500 not-disabled:hover:bg-blue-600 ...\">\n  Chỉ có style khi không disabled\n\u003C\u002Fdiv>\n",[432,1314,1315,1320,1342,1347,1355,1359,1364,1383,1388],{"__ignoreMap":467},[471,1316,1317],{"class":473,"line":474},[471,1318,1319],{"class":477},"\u003C!-- inert: — element được browser bỏ qua (không tương tác được) -->\n",[471,1321,1322,1324,1326,1328,1330,1332,1335,1337,1340],{"class":473,"line":481},[471,1323,485],{"class":484},[471,1325,725],{"class":488},[471,1327,493],{"class":492},[471,1329,496],{"class":484},[471,1331,499],{"class":484},[471,1333,1334],{"class":502},"inert:opacity-50 inert:cursor-not-allowed",[471,1336,499],{"class":484},[471,1338,1339],{"class":492}," inert",[471,1341,508],{"class":484},[471,1343,1344],{"class":473,"line":511},[471,1345,1346],{"class":514},"  Nội dung bị vô hiệu hóa\n",[471,1348,1349,1351,1353],{"class":473,"line":518},[471,1350,521],{"class":484},[471,1352,725],{"class":488},[471,1354,508],{"class":484},[471,1356,1357],{"class":473,"line":528},[471,1358,532],{"emptyLinePlaceholder":531},[471,1360,1361],{"class":473,"line":535},[471,1362,1363],{"class":477},"\u003C!-- not-* — áp dụng style khi KHÔNG ở trạng thái đó -->\n",[471,1365,1366,1368,1370,1372,1374,1376,1379,1381],{"class":473,"line":541},[471,1367,485],{"class":484},[471,1369,725],{"class":488},[471,1371,493],{"class":492},[471,1373,496],{"class":484},[471,1375,499],{"class":484},[471,1377,1378],{"class":502},"not-disabled:bg-blue-500 not-disabled:hover:bg-blue-600 ...",[471,1380,499],{"class":484},[471,1382,508],{"class":484},[471,1384,1385],{"class":473,"line":563},[471,1386,1387],{"class":514},"  Chỉ có style khi không disabled\n",[471,1389,1390,1392,1394],{"class":473,"line":568},[471,1391,521],{"class":484},[471,1393,725],{"class":488},[471,1395,508],{"class":484},[824,1397,1399],{"id":1398},"bài-tập-1-button-với-hover-active-focus-visible-disabled-states","Bài tập 1: Button với hover, active, focus-visible, disabled states",[453,1401,1402,1405],{},[457,1403,1404],{},"Yêu cầu:"," Thiết kế button system với đầy đủ 4 trạng thái tương tác.",[462,1407,1411],{"className":1408,"code":1409,"language":1410,"meta":467,"style":467},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv class=\"max-w-2xl mx-auto p-8 space-y-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-6\">Button State System\u003C\u002Fh2>\n\n    \u003C!-- Primary button — đầy đủ states -->\n    \u003Cdiv class=\"space-y-4\">\n      \u003Ch3 class=\"text-sm font-semibold text-gray-500 uppercase tracking-wider\">Primary Button\u003C\u002Fh3>\n\n      \u003C!-- Normal -->\n      \u003Cbutton class=\"inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white text-sm font-semibold rounded-lg\n                     hover:bg-indigo-700\n                     active:bg-indigo-800 active:scale-[0.97]\n                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2\n                     disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:scale-100\n                     transition-all duration-150\">\n        \u003Cspan>Primary Action\u003C\u002Fspan>\n        \u003Csvg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14M12 5l7 7-7 7\" \u002F>\n        \u003C\u002Fsvg>\n      \u003C\u002Fbutton>\n\n      \u003C!-- Disabled -->\n      \u003Cdiv>\n        \u003Cbutton disabled class=\"inline-flex items-center gap-2 px-5 py-2.5 bg-gray-300 text-gray-500 text-sm font-semibold rounded-lg cursor-not-allowed transition-all duration-150\">\n          \u003Cspan>Disabled State\u003C\u002Fspan>\n          \u003Csvg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14M12 5l7 7-7 7\" \u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Secondary \u002F Outline button -->\n    \u003Cdiv class=\"space-y-4\">\n      \u003Ch3 class=\"text-sm font-semibold text-gray-500 uppercase tracking-wider\">Secondary Button\u003C\u002Fh3>\n\n      \u003Cbutton class=\"inline-flex items-center gap-2 px-5 py-2.5 border border-gray-300 text-gray-700 text-sm font-semibold rounded-lg\n                     hover:bg-gray-50 hover:border-gray-400\n                     active:bg-gray-100 active:scale-[0.97]\n                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2\n                     transition-all duration-150\">\n        Secondary Action\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Ghost \u002F Text button -->\n    \u003Cdiv class=\"space-y-4\">\n      \u003Ch3 class=\"text-sm font-semibold text-gray-500 uppercase tracking-wider\">Ghost Button\u003C\u002Fh3>\n\n      \u003Cbutton class=\"inline-flex items-center gap-2 px-4 py-2 text-indigo-600 text-sm font-semibold rounded-lg\n                     hover:bg-indigo-50\n                     active:bg-indigo-100\n                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500\n                     transition-all duration-150\">\n        Ghost Action\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Danger button -->\n    \u003Cdiv class=\"space-y-4\">\n      \u003Ch3 class=\"text-sm font-semibold text-gray-500 uppercase tracking-wider\">Danger Button\u003C\u002Fh3>\n\n      \u003Cbutton class=\"inline-flex items-center gap-2 px-5 py-2.5 bg-red-600 text-white text-sm font-semibold rounded-lg\n                     hover:bg-red-700\n                     active:bg-red-800 active:scale-[0.97]\n                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2\n                     transition-all duration-150\">\n        Delete Account\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","vue",[432,1412,1413,1422,1441,1470,1474,1479,1498,1527,1531,1536,1551,1556,1561,1566,1571,1580,1598,1653,1710,1719,1728,1732,1737,1745,1766,1783,1831,1881,1891,1900,1909,1919,1924,1930,1949,1977,1982,1998,2004,2010,2016,2025,2031,2040,2049,2054,2060,2079,2107,2112,2128,2134,2140,2146,2155,2161,2170,2179,2184,2190,2209,2237,2242,2258,2264,2270,2276,2285,2291,2300,2309,2318],{"__ignoreMap":467},[471,1414,1415,1417,1420],{"class":473,"line":474},[471,1416,485],{"class":484},[471,1418,1419],{"class":488},"template",[471,1421,508],{"class":484},[471,1423,1424,1426,1428,1430,1432,1434,1437,1439],{"class":473,"line":481},[471,1425,744],{"class":484},[471,1427,725],{"class":488},[471,1429,493],{"class":492},[471,1431,496],{"class":484},[471,1433,499],{"class":484},[471,1435,1436],{"class":502},"max-w-2xl mx-auto p-8 space-y-8",[471,1438,499],{"class":484},[471,1440,508],{"class":484},[471,1442,1443,1446,1448,1450,1452,1454,1457,1459,1461,1464,1466,1468],{"class":473,"line":511},[471,1444,1445],{"class":484},"    \u003C",[471,1447,427],{"class":488},[471,1449,493],{"class":492},[471,1451,496],{"class":484},[471,1453,499],{"class":484},[471,1455,1456],{"class":502},"text-2xl font-bold text-gray-900 mb-6",[471,1458,499],{"class":484},[471,1460,651],{"class":484},[471,1462,1463],{"class":514},"Button State System",[471,1465,521],{"class":484},[471,1467,427],{"class":488},[471,1469,508],{"class":484},[471,1471,1472],{"class":473,"line":518},[471,1473,532],{"emptyLinePlaceholder":531},[471,1475,1476],{"class":473,"line":528},[471,1477,1478],{"class":477},"    \u003C!-- Primary button — đầy đủ states -->\n",[471,1480,1481,1483,1485,1487,1489,1491,1494,1496],{"class":473,"line":535},[471,1482,1445],{"class":484},[471,1484,725],{"class":488},[471,1486,493],{"class":492},[471,1488,496],{"class":484},[471,1490,499],{"class":484},[471,1492,1493],{"class":502},"space-y-4",[471,1495,499],{"class":484},[471,1497,508],{"class":484},[471,1499,1500,1503,1505,1507,1509,1511,1514,1516,1518,1521,1523,1525],{"class":473,"line":541},[471,1501,1502],{"class":484},"      \u003C",[471,1504,824],{"class":488},[471,1506,493],{"class":492},[471,1508,496],{"class":484},[471,1510,499],{"class":484},[471,1512,1513],{"class":502},"text-sm font-semibold text-gray-500 uppercase tracking-wider",[471,1515,499],{"class":484},[471,1517,651],{"class":484},[471,1519,1520],{"class":514},"Primary Button",[471,1522,521],{"class":484},[471,1524,824],{"class":488},[471,1526,508],{"class":484},[471,1528,1529],{"class":473,"line":563},[471,1530,532],{"emptyLinePlaceholder":531},[471,1532,1533],{"class":473,"line":568},[471,1534,1535],{"class":477},"      \u003C!-- Normal -->\n",[471,1537,1538,1540,1542,1544,1546,1548],{"class":473,"line":574},[471,1539,1502],{"class":484},[471,1541,489],{"class":488},[471,1543,493],{"class":492},[471,1545,496],{"class":484},[471,1547,499],{"class":484},[471,1549,1550],{"class":502},"inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white text-sm font-semibold rounded-lg\n",[471,1552,1553],{"class":473,"line":594},[471,1554,1555],{"class":502},"                     hover:bg-indigo-700\n",[471,1557,1558],{"class":473,"line":600},[471,1559,1560],{"class":502},"                     active:bg-indigo-800 active:scale-[0.97]\n",[471,1562,1563],{"class":473,"line":609},[471,1564,1565],{"class":502},"                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2\n",[471,1567,1568],{"class":473,"line":614},[471,1569,1570],{"class":502},"                     disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:scale-100\n",[471,1572,1573,1576,1578],{"class":473,"line":620},[471,1574,1575],{"class":502},"                     transition-all duration-150",[471,1577,499],{"class":484},[471,1579,508],{"class":484},[471,1581,1582,1585,1587,1589,1592,1594,1596],{"class":473,"line":663},[471,1583,1584],{"class":484},"        \u003C",[471,1586,471],{"class":488},[471,1588,651],{"class":484},[471,1590,1591],{"class":514},"Primary Action",[471,1593,521],{"class":484},[471,1595,471],{"class":488},[471,1597,508],{"class":484},[471,1599,1600,1602,1604,1606,1608,1610,1613,1615,1618,1620,1622,1625,1627,1630,1632,1634,1637,1639,1642,1644,1646,1649,1651],{"class":473,"line":668},[471,1601,1584],{"class":484},[471,1603,928],{"class":488},[471,1605,493],{"class":492},[471,1607,496],{"class":484},[471,1609,499],{"class":484},[471,1611,1612],{"class":502},"w-4 h-4",[471,1614,499],{"class":484},[471,1616,1617],{"class":492}," fill",[471,1619,496],{"class":484},[471,1621,499],{"class":484},[471,1623,1624],{"class":502},"none",[471,1626,499],{"class":484},[471,1628,1629],{"class":492}," stroke",[471,1631,496],{"class":484},[471,1633,499],{"class":484},[471,1635,1636],{"class":502},"currentColor",[471,1638,499],{"class":484},[471,1640,1641],{"class":492}," viewBox",[471,1643,496],{"class":484},[471,1645,499],{"class":484},[471,1647,1648],{"class":502},"0 0 24 24",[471,1650,499],{"class":484},[471,1652,508],{"class":484},[471,1654,1655,1658,1661,1664,1666,1668,1671,1673,1676,1678,1680,1682,1684,1687,1689,1691,1694,1696,1699,1701,1703,1706,1708],{"class":473,"line":674},[471,1656,1657],{"class":484},"          \u003C",[471,1659,1660],{"class":488},"path",[471,1662,1663],{"class":492}," stroke-linecap",[471,1665,496],{"class":484},[471,1667,499],{"class":484},[471,1669,1670],{"class":502},"round",[471,1672,499],{"class":484},[471,1674,1675],{"class":492}," stroke-linejoin",[471,1677,496],{"class":484},[471,1679,499],{"class":484},[471,1681,1670],{"class":502},[471,1683,499],{"class":484},[471,1685,1686],{"class":492}," stroke-width",[471,1688,496],{"class":484},[471,1690,499],{"class":484},[471,1692,1693],{"class":502},"2",[471,1695,499],{"class":484},[471,1697,1698],{"class":492}," d",[471,1700,496],{"class":484},[471,1702,499],{"class":484},[471,1704,1705],{"class":502},"M5 12h14M12 5l7 7-7 7",[471,1707,499],{"class":484},[471,1709,560],{"class":484},[471,1711,1712,1715,1717],{"class":473,"line":694},[471,1713,1714],{"class":484},"        \u003C\u002F",[471,1716,928],{"class":488},[471,1718,508],{"class":484},[471,1720,1721,1724,1726],{"class":473,"line":700},[471,1722,1723],{"class":484},"      \u003C\u002F",[471,1725,489],{"class":488},[471,1727,508],{"class":484},[471,1729,1730],{"class":473,"line":709},[471,1731,532],{"emptyLinePlaceholder":531},[471,1733,1734],{"class":473,"line":714},[471,1735,1736],{"class":477},"      \u003C!-- Disabled -->\n",[471,1738,1739,1741,1743],{"class":473,"line":720},[471,1740,1502],{"class":484},[471,1742,725],{"class":488},[471,1744,508],{"class":484},[471,1746,1747,1749,1751,1753,1755,1757,1759,1762,1764],{"class":473,"line":741},[471,1748,1584],{"class":484},[471,1750,489],{"class":488},[471,1752,1105],{"class":492},[471,1754,493],{"class":492},[471,1756,496],{"class":484},[471,1758,499],{"class":484},[471,1760,1761],{"class":502},"inline-flex items-center gap-2 px-5 py-2.5 bg-gray-300 text-gray-500 text-sm font-semibold rounded-lg cursor-not-allowed transition-all duration-150",[471,1763,499],{"class":484},[471,1765,508],{"class":484},[471,1767,1768,1770,1772,1774,1777,1779,1781],{"class":473,"line":772},[471,1769,1657],{"class":484},[471,1771,471],{"class":488},[471,1773,651],{"class":484},[471,1775,1776],{"class":514},"Disabled State",[471,1778,521],{"class":484},[471,1780,471],{"class":488},[471,1782,508],{"class":484},[471,1784,1785,1787,1789,1791,1793,1795,1797,1799,1801,1803,1805,1807,1809,1811,1813,1815,1817,1819,1821,1823,1825,1827,1829],{"class":473,"line":816},[471,1786,1657],{"class":484},[471,1788,928],{"class":488},[471,1790,493],{"class":492},[471,1792,496],{"class":484},[471,1794,499],{"class":484},[471,1796,1612],{"class":502},[471,1798,499],{"class":484},[471,1800,1617],{"class":492},[471,1802,496],{"class":484},[471,1804,499],{"class":484},[471,1806,1624],{"class":502},[471,1808,499],{"class":484},[471,1810,1629],{"class":492},[471,1812,496],{"class":484},[471,1814,499],{"class":484},[471,1816,1636],{"class":502},[471,1818,499],{"class":484},[471,1820,1641],{"class":492},[471,1822,496],{"class":484},[471,1824,499],{"class":484},[471,1826,1648],{"class":502},[471,1828,499],{"class":484},[471,1830,508],{"class":484},[471,1832,1834,1837,1839,1841,1843,1845,1847,1849,1851,1853,1855,1857,1859,1861,1863,1865,1867,1869,1871,1873,1875,1877,1879],{"class":473,"line":1833},27,[471,1835,1836],{"class":484},"            \u003C",[471,1838,1660],{"class":488},[471,1840,1663],{"class":492},[471,1842,496],{"class":484},[471,1844,499],{"class":484},[471,1846,1670],{"class":502},[471,1848,499],{"class":484},[471,1850,1675],{"class":492},[471,1852,496],{"class":484},[471,1854,499],{"class":484},[471,1856,1670],{"class":502},[471,1858,499],{"class":484},[471,1860,1686],{"class":492},[471,1862,496],{"class":484},[471,1864,499],{"class":484},[471,1866,1693],{"class":502},[471,1868,499],{"class":484},[471,1870,1698],{"class":492},[471,1872,496],{"class":484},[471,1874,499],{"class":484},[471,1876,1705],{"class":502},[471,1878,499],{"class":484},[471,1880,560],{"class":484},[471,1882,1884,1887,1889],{"class":473,"line":1883},28,[471,1885,1886],{"class":484},"          \u003C\u002F",[471,1888,928],{"class":488},[471,1890,508],{"class":484},[471,1892,1894,1896,1898],{"class":473,"line":1893},29,[471,1895,1714],{"class":484},[471,1897,489],{"class":488},[471,1899,508],{"class":484},[471,1901,1903,1905,1907],{"class":473,"line":1902},30,[471,1904,1723],{"class":484},[471,1906,725],{"class":488},[471,1908,508],{"class":484},[471,1910,1912,1915,1917],{"class":473,"line":1911},31,[471,1913,1914],{"class":484},"    \u003C\u002F",[471,1916,725],{"class":488},[471,1918,508],{"class":484},[471,1920,1922],{"class":473,"line":1921},32,[471,1923,532],{"emptyLinePlaceholder":531},[471,1925,1927],{"class":473,"line":1926},33,[471,1928,1929],{"class":477},"    \u003C!-- Secondary \u002F Outline button -->\n",[471,1931,1933,1935,1937,1939,1941,1943,1945,1947],{"class":473,"line":1932},34,[471,1934,1445],{"class":484},[471,1936,725],{"class":488},[471,1938,493],{"class":492},[471,1940,496],{"class":484},[471,1942,499],{"class":484},[471,1944,1493],{"class":502},[471,1946,499],{"class":484},[471,1948,508],{"class":484},[471,1950,1952,1954,1956,1958,1960,1962,1964,1966,1968,1971,1973,1975],{"class":473,"line":1951},35,[471,1953,1502],{"class":484},[471,1955,824],{"class":488},[471,1957,493],{"class":492},[471,1959,496],{"class":484},[471,1961,499],{"class":484},[471,1963,1513],{"class":502},[471,1965,499],{"class":484},[471,1967,651],{"class":484},[471,1969,1970],{"class":514},"Secondary Button",[471,1972,521],{"class":484},[471,1974,824],{"class":488},[471,1976,508],{"class":484},[471,1978,1980],{"class":473,"line":1979},36,[471,1981,532],{"emptyLinePlaceholder":531},[471,1983,1985,1987,1989,1991,1993,1995],{"class":473,"line":1984},37,[471,1986,1502],{"class":484},[471,1988,489],{"class":488},[471,1990,493],{"class":492},[471,1992,496],{"class":484},[471,1994,499],{"class":484},[471,1996,1997],{"class":502},"inline-flex items-center gap-2 px-5 py-2.5 border border-gray-300 text-gray-700 text-sm font-semibold rounded-lg\n",[471,1999,2001],{"class":473,"line":2000},38,[471,2002,2003],{"class":502},"                     hover:bg-gray-50 hover:border-gray-400\n",[471,2005,2007],{"class":473,"line":2006},39,[471,2008,2009],{"class":502},"                     active:bg-gray-100 active:scale-[0.97]\n",[471,2011,2013],{"class":473,"line":2012},40,[471,2014,2015],{"class":502},"                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2\n",[471,2017,2019,2021,2023],{"class":473,"line":2018},41,[471,2020,1575],{"class":502},[471,2022,499],{"class":484},[471,2024,508],{"class":484},[471,2026,2028],{"class":473,"line":2027},42,[471,2029,2030],{"class":514},"        Secondary Action\n",[471,2032,2034,2036,2038],{"class":473,"line":2033},43,[471,2035,1723],{"class":484},[471,2037,489],{"class":488},[471,2039,508],{"class":484},[471,2041,2043,2045,2047],{"class":473,"line":2042},44,[471,2044,1914],{"class":484},[471,2046,725],{"class":488},[471,2048,508],{"class":484},[471,2050,2052],{"class":473,"line":2051},45,[471,2053,532],{"emptyLinePlaceholder":531},[471,2055,2057],{"class":473,"line":2056},46,[471,2058,2059],{"class":477},"    \u003C!-- Ghost \u002F Text button -->\n",[471,2061,2063,2065,2067,2069,2071,2073,2075,2077],{"class":473,"line":2062},47,[471,2064,1445],{"class":484},[471,2066,725],{"class":488},[471,2068,493],{"class":492},[471,2070,496],{"class":484},[471,2072,499],{"class":484},[471,2074,1493],{"class":502},[471,2076,499],{"class":484},[471,2078,508],{"class":484},[471,2080,2082,2084,2086,2088,2090,2092,2094,2096,2098,2101,2103,2105],{"class":473,"line":2081},48,[471,2083,1502],{"class":484},[471,2085,824],{"class":488},[471,2087,493],{"class":492},[471,2089,496],{"class":484},[471,2091,499],{"class":484},[471,2093,1513],{"class":502},[471,2095,499],{"class":484},[471,2097,651],{"class":484},[471,2099,2100],{"class":514},"Ghost Button",[471,2102,521],{"class":484},[471,2104,824],{"class":488},[471,2106,508],{"class":484},[471,2108,2110],{"class":473,"line":2109},49,[471,2111,532],{"emptyLinePlaceholder":531},[471,2113,2115,2117,2119,2121,2123,2125],{"class":473,"line":2114},50,[471,2116,1502],{"class":484},[471,2118,489],{"class":488},[471,2120,493],{"class":492},[471,2122,496],{"class":484},[471,2124,499],{"class":484},[471,2126,2127],{"class":502},"inline-flex items-center gap-2 px-4 py-2 text-indigo-600 text-sm font-semibold rounded-lg\n",[471,2129,2131],{"class":473,"line":2130},51,[471,2132,2133],{"class":502},"                     hover:bg-indigo-50\n",[471,2135,2137],{"class":473,"line":2136},52,[471,2138,2139],{"class":502},"                     active:bg-indigo-100\n",[471,2141,2143],{"class":473,"line":2142},53,[471,2144,2145],{"class":502},"                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500\n",[471,2147,2149,2151,2153],{"class":473,"line":2148},54,[471,2150,1575],{"class":502},[471,2152,499],{"class":484},[471,2154,508],{"class":484},[471,2156,2158],{"class":473,"line":2157},55,[471,2159,2160],{"class":514},"        Ghost Action\n",[471,2162,2164,2166,2168],{"class":473,"line":2163},56,[471,2165,1723],{"class":484},[471,2167,489],{"class":488},[471,2169,508],{"class":484},[471,2171,2173,2175,2177],{"class":473,"line":2172},57,[471,2174,1914],{"class":484},[471,2176,725],{"class":488},[471,2178,508],{"class":484},[471,2180,2182],{"class":473,"line":2181},58,[471,2183,532],{"emptyLinePlaceholder":531},[471,2185,2187],{"class":473,"line":2186},59,[471,2188,2189],{"class":477},"    \u003C!-- Danger button -->\n",[471,2191,2193,2195,2197,2199,2201,2203,2205,2207],{"class":473,"line":2192},60,[471,2194,1445],{"class":484},[471,2196,725],{"class":488},[471,2198,493],{"class":492},[471,2200,496],{"class":484},[471,2202,499],{"class":484},[471,2204,1493],{"class":502},[471,2206,499],{"class":484},[471,2208,508],{"class":484},[471,2210,2212,2214,2216,2218,2220,2222,2224,2226,2228,2231,2233,2235],{"class":473,"line":2211},61,[471,2213,1502],{"class":484},[471,2215,824],{"class":488},[471,2217,493],{"class":492},[471,2219,496],{"class":484},[471,2221,499],{"class":484},[471,2223,1513],{"class":502},[471,2225,499],{"class":484},[471,2227,651],{"class":484},[471,2229,2230],{"class":514},"Danger Button",[471,2232,521],{"class":484},[471,2234,824],{"class":488},[471,2236,508],{"class":484},[471,2238,2240],{"class":473,"line":2239},62,[471,2241,532],{"emptyLinePlaceholder":531},[471,2243,2245,2247,2249,2251,2253,2255],{"class":473,"line":2244},63,[471,2246,1502],{"class":484},[471,2248,489],{"class":488},[471,2250,493],{"class":492},[471,2252,496],{"class":484},[471,2254,499],{"class":484},[471,2256,2257],{"class":502},"inline-flex items-center gap-2 px-5 py-2.5 bg-red-600 text-white text-sm font-semibold rounded-lg\n",[471,2259,2261],{"class":473,"line":2260},64,[471,2262,2263],{"class":502},"                     hover:bg-red-700\n",[471,2265,2267],{"class":473,"line":2266},65,[471,2268,2269],{"class":502},"                     active:bg-red-800 active:scale-[0.97]\n",[471,2271,2273],{"class":473,"line":2272},66,[471,2274,2275],{"class":502},"                     focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2\n",[471,2277,2279,2281,2283],{"class":473,"line":2278},67,[471,2280,1575],{"class":502},[471,2282,499],{"class":484},[471,2284,508],{"class":484},[471,2286,2288],{"class":473,"line":2287},68,[471,2289,2290],{"class":514},"        Delete Account\n",[471,2292,2294,2296,2298],{"class":473,"line":2293},69,[471,2295,1723],{"class":484},[471,2297,489],{"class":488},[471,2299,508],{"class":484},[471,2301,2303,2305,2307],{"class":473,"line":2302},70,[471,2304,1914],{"class":484},[471,2306,725],{"class":488},[471,2308,508],{"class":484},[471,2310,2312,2314,2316],{"class":473,"line":2311},71,[471,2313,885],{"class":484},[471,2315,725],{"class":488},[471,2317,508],{"class":484},[471,2319,2321,2323,2325],{"class":473,"line":2320},72,[471,2322,521],{"class":484},[471,2324,1419],{"class":488},[471,2326,508],{"class":484},[824,2328,2330],{"id":2329},"bài-tập-2-card-reveals-details-on-hover-group-hover","Bài tập 2: Card reveals details on hover (group-hover)",[453,2332,2333,2335],{},[457,2334,1404],{}," Card sản phẩm — khi hover hiện overlay với nút \"Thêm vào giỏ\" và thông tin giá.",[462,2337,2339],{"className":1408,"code":2338,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-xs mx-auto\">\n    \u003Cdiv class=\"group relative overflow-hidden rounded-2xl bg-white border border-gray-200 shadow-sm hover:shadow-lg transition-shadow\">\n\n      \u003C!-- Ảnh sản phẩm -->\n      \u003Cdiv class=\"aspect-square overflow-hidden bg-gray-100\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1523275335684-37898b6baf30\"\n          alt=\"Product\"\n          class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-500\"\n        \u002F>\n\n        \u003C!-- Overlay — hiện khi hover -->\n        \u003Cdiv class=\"absolute inset-0 bg-black\u002F40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center\">\n          \u003Cbutton class=\"px-6 py-2.5 bg-white text-gray-900 text-sm font-semibold rounded-lg\n                         hover:bg-gray-100 transform translate-y-4 group-hover:translate-y-0\n                         transition-all duration-300\">\n            Thêm vào giỏ\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Badge giảm giá -->\n        \u003Cspan class=\"absolute top-3 left-3 px-2.5 py-0.5 bg-red-500 text-white text-xs font-bold rounded-full\">\n          -30%\n        \u003C\u002Fspan>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Thông tin sản phẩm -->\n      \u003Cdiv class=\"p-4\">\n        \u003Cp class=\"text-xs text-gray-400 uppercase tracking-wider\">Thương hiệu\u003C\u002Fp>\n        \u003Ch3 class=\"text-sm font-semibold text-gray-900 mt-1 group-hover:text-indigo-600 transition-colors\">\n          Tên sản phẩm cao cấp phiên bản giới hạn\n        \u003C\u002Fh3>\n\n        \u003Cdiv class=\"mt-3 flex items-center justify-between\">\n          \u003Cdiv>\n            \u003Cspan class=\"text-lg font-bold text-gray-900\">790.000đ\u003C\u002Fspan>\n            \u003Cspan class=\"ml-2 text-sm text-gray-400 line-through\">1.150.000đ\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n          \u003Cdiv class=\"flex items-center gap-0.5\">\n            \u003Cspan class=\"text-amber-400 text-sm\">★\u003C\u002Fspan>\n            \u003Cspan class=\"text-xs text-gray-500\">4.8\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,2340,2341,2349,2368,2387,2391,2396,2415,2422,2437,2451,2465,2470,2474,2479,2498,2513,2518,2527,2532,2540,2548,2552,2557,2576,2581,2589,2597,2601,2606,2625,2653,2672,2677,2685,2689,2708,2716,2744,2772,2780,2799,2827,2855,2863,2871,2879,2887,2895],{"__ignoreMap":467},[471,2342,2343,2345,2347],{"class":473,"line":474},[471,2344,485],{"class":484},[471,2346,1419],{"class":488},[471,2348,508],{"class":484},[471,2350,2351,2353,2355,2357,2359,2361,2364,2366],{"class":473,"line":481},[471,2352,744],{"class":484},[471,2354,725],{"class":488},[471,2356,493],{"class":492},[471,2358,496],{"class":484},[471,2360,499],{"class":484},[471,2362,2363],{"class":502},"max-w-xs mx-auto",[471,2365,499],{"class":484},[471,2367,508],{"class":484},[471,2369,2370,2372,2374,2376,2378,2380,2383,2385],{"class":473,"line":511},[471,2371,1445],{"class":484},[471,2373,725],{"class":488},[471,2375,493],{"class":492},[471,2377,496],{"class":484},[471,2379,499],{"class":484},[471,2381,2382],{"class":502},"group relative overflow-hidden rounded-2xl bg-white border border-gray-200 shadow-sm hover:shadow-lg transition-shadow",[471,2384,499],{"class":484},[471,2386,508],{"class":484},[471,2388,2389],{"class":473,"line":518},[471,2390,532],{"emptyLinePlaceholder":531},[471,2392,2393],{"class":473,"line":528},[471,2394,2395],{"class":477},"      \u003C!-- Ảnh sản phẩm -->\n",[471,2397,2398,2400,2402,2404,2406,2408,2411,2413],{"class":473,"line":535},[471,2399,1502],{"class":484},[471,2401,725],{"class":488},[471,2403,493],{"class":492},[471,2405,496],{"class":484},[471,2407,499],{"class":484},[471,2409,2410],{"class":502},"aspect-square overflow-hidden bg-gray-100",[471,2412,499],{"class":484},[471,2414,508],{"class":484},[471,2416,2417,2419],{"class":473,"line":541},[471,2418,1584],{"class":484},[471,2420,2421],{"class":488},"img\n",[471,2423,2424,2427,2429,2431,2434],{"class":473,"line":563},[471,2425,2426],{"class":492},"          src",[471,2428,496],{"class":484},[471,2430,499],{"class":484},[471,2432,2433],{"class":502},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1523275335684-37898b6baf30",[471,2435,2436],{"class":484},"\"\n",[471,2438,2439,2442,2444,2446,2449],{"class":473,"line":568},[471,2440,2441],{"class":492},"          alt",[471,2443,496],{"class":484},[471,2445,499],{"class":484},[471,2447,2448],{"class":502},"Product",[471,2450,2436],{"class":484},[471,2452,2453,2456,2458,2460,2463],{"class":473,"line":574},[471,2454,2455],{"class":492},"          class",[471,2457,496],{"class":484},[471,2459,499],{"class":484},[471,2461,2462],{"class":502},"w-full h-full object-cover group-hover:scale-110 transition-transform duration-500",[471,2464,2436],{"class":484},[471,2466,2467],{"class":473,"line":594},[471,2468,2469],{"class":484},"        \u002F>\n",[471,2471,2472],{"class":473,"line":600},[471,2473,532],{"emptyLinePlaceholder":531},[471,2475,2476],{"class":473,"line":609},[471,2477,2478],{"class":477},"        \u003C!-- Overlay — hiện khi hover -->\n",[471,2480,2481,2483,2485,2487,2489,2491,2494,2496],{"class":473,"line":614},[471,2482,1584],{"class":484},[471,2484,725],{"class":488},[471,2486,493],{"class":492},[471,2488,496],{"class":484},[471,2490,499],{"class":484},[471,2492,2493],{"class":502},"absolute inset-0 bg-black\u002F40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",[471,2495,499],{"class":484},[471,2497,508],{"class":484},[471,2499,2500,2502,2504,2506,2508,2510],{"class":473,"line":620},[471,2501,1657],{"class":484},[471,2503,489],{"class":488},[471,2505,493],{"class":492},[471,2507,496],{"class":484},[471,2509,499],{"class":484},[471,2511,2512],{"class":502},"px-6 py-2.5 bg-white text-gray-900 text-sm font-semibold rounded-lg\n",[471,2514,2515],{"class":473,"line":663},[471,2516,2517],{"class":502},"                         hover:bg-gray-100 transform translate-y-4 group-hover:translate-y-0\n",[471,2519,2520,2523,2525],{"class":473,"line":668},[471,2521,2522],{"class":502},"                         transition-all duration-300",[471,2524,499],{"class":484},[471,2526,508],{"class":484},[471,2528,2529],{"class":473,"line":674},[471,2530,2531],{"class":514},"            Thêm vào giỏ\n",[471,2533,2534,2536,2538],{"class":473,"line":694},[471,2535,1886],{"class":484},[471,2537,489],{"class":488},[471,2539,508],{"class":484},[471,2541,2542,2544,2546],{"class":473,"line":700},[471,2543,1714],{"class":484},[471,2545,725],{"class":488},[471,2547,508],{"class":484},[471,2549,2550],{"class":473,"line":709},[471,2551,532],{"emptyLinePlaceholder":531},[471,2553,2554],{"class":473,"line":714},[471,2555,2556],{"class":477},"        \u003C!-- Badge giảm giá -->\n",[471,2558,2559,2561,2563,2565,2567,2569,2572,2574],{"class":473,"line":720},[471,2560,1584],{"class":484},[471,2562,471],{"class":488},[471,2564,493],{"class":492},[471,2566,496],{"class":484},[471,2568,499],{"class":484},[471,2570,2571],{"class":502},"absolute top-3 left-3 px-2.5 py-0.5 bg-red-500 text-white text-xs font-bold rounded-full",[471,2573,499],{"class":484},[471,2575,508],{"class":484},[471,2577,2578],{"class":473,"line":741},[471,2579,2580],{"class":514},"          -30%\n",[471,2582,2583,2585,2587],{"class":473,"line":772},[471,2584,1714],{"class":484},[471,2586,471],{"class":488},[471,2588,508],{"class":484},[471,2590,2591,2593,2595],{"class":473,"line":816},[471,2592,1723],{"class":484},[471,2594,725],{"class":488},[471,2596,508],{"class":484},[471,2598,2599],{"class":473,"line":1833},[471,2600,532],{"emptyLinePlaceholder":531},[471,2602,2603],{"class":473,"line":1883},[471,2604,2605],{"class":477},"      \u003C!-- Thông tin sản phẩm -->\n",[471,2607,2608,2610,2612,2614,2616,2618,2621,2623],{"class":473,"line":1893},[471,2609,1502],{"class":484},[471,2611,725],{"class":488},[471,2613,493],{"class":492},[471,2615,496],{"class":484},[471,2617,499],{"class":484},[471,2619,2620],{"class":502},"p-4",[471,2622,499],{"class":484},[471,2624,508],{"class":484},[471,2626,2627,2629,2631,2633,2635,2637,2640,2642,2644,2647,2649,2651],{"class":473,"line":1902},[471,2628,1584],{"class":484},[471,2630,453],{"class":488},[471,2632,493],{"class":492},[471,2634,496],{"class":484},[471,2636,499],{"class":484},[471,2638,2639],{"class":502},"text-xs text-gray-400 uppercase tracking-wider",[471,2641,499],{"class":484},[471,2643,651],{"class":484},[471,2645,2646],{"class":514},"Thương hiệu",[471,2648,521],{"class":484},[471,2650,453],{"class":488},[471,2652,508],{"class":484},[471,2654,2655,2657,2659,2661,2663,2665,2668,2670],{"class":473,"line":1911},[471,2656,1584],{"class":484},[471,2658,824],{"class":488},[471,2660,493],{"class":492},[471,2662,496],{"class":484},[471,2664,499],{"class":484},[471,2666,2667],{"class":502},"text-sm font-semibold text-gray-900 mt-1 group-hover:text-indigo-600 transition-colors",[471,2669,499],{"class":484},[471,2671,508],{"class":484},[471,2673,2674],{"class":473,"line":1921},[471,2675,2676],{"class":514},"          Tên sản phẩm cao cấp phiên bản giới hạn\n",[471,2678,2679,2681,2683],{"class":473,"line":1926},[471,2680,1714],{"class":484},[471,2682,824],{"class":488},[471,2684,508],{"class":484},[471,2686,2687],{"class":473,"line":1932},[471,2688,532],{"emptyLinePlaceholder":531},[471,2690,2691,2693,2695,2697,2699,2701,2704,2706],{"class":473,"line":1951},[471,2692,1584],{"class":484},[471,2694,725],{"class":488},[471,2696,493],{"class":492},[471,2698,496],{"class":484},[471,2700,499],{"class":484},[471,2702,2703],{"class":502},"mt-3 flex items-center justify-between",[471,2705,499],{"class":484},[471,2707,508],{"class":484},[471,2709,2710,2712,2714],{"class":473,"line":1979},[471,2711,1657],{"class":484},[471,2713,725],{"class":488},[471,2715,508],{"class":484},[471,2717,2718,2720,2722,2724,2726,2728,2731,2733,2735,2738,2740,2742],{"class":473,"line":1984},[471,2719,1836],{"class":484},[471,2721,471],{"class":488},[471,2723,493],{"class":492},[471,2725,496],{"class":484},[471,2727,499],{"class":484},[471,2729,2730],{"class":502},"text-lg font-bold text-gray-900",[471,2732,499],{"class":484},[471,2734,651],{"class":484},[471,2736,2737],{"class":514},"790.000đ",[471,2739,521],{"class":484},[471,2741,471],{"class":488},[471,2743,508],{"class":484},[471,2745,2746,2748,2750,2752,2754,2756,2759,2761,2763,2766,2768,2770],{"class":473,"line":2000},[471,2747,1836],{"class":484},[471,2749,471],{"class":488},[471,2751,493],{"class":492},[471,2753,496],{"class":484},[471,2755,499],{"class":484},[471,2757,2758],{"class":502},"ml-2 text-sm text-gray-400 line-through",[471,2760,499],{"class":484},[471,2762,651],{"class":484},[471,2764,2765],{"class":514},"1.150.000đ",[471,2767,521],{"class":484},[471,2769,471],{"class":488},[471,2771,508],{"class":484},[471,2773,2774,2776,2778],{"class":473,"line":2006},[471,2775,1886],{"class":484},[471,2777,725],{"class":488},[471,2779,508],{"class":484},[471,2781,2782,2784,2786,2788,2790,2792,2795,2797],{"class":473,"line":2012},[471,2783,1657],{"class":484},[471,2785,725],{"class":488},[471,2787,493],{"class":492},[471,2789,496],{"class":484},[471,2791,499],{"class":484},[471,2793,2794],{"class":502},"flex items-center gap-0.5",[471,2796,499],{"class":484},[471,2798,508],{"class":484},[471,2800,2801,2803,2805,2807,2809,2811,2814,2816,2818,2821,2823,2825],{"class":473,"line":2018},[471,2802,1836],{"class":484},[471,2804,471],{"class":488},[471,2806,493],{"class":492},[471,2808,496],{"class":484},[471,2810,499],{"class":484},[471,2812,2813],{"class":502},"text-amber-400 text-sm",[471,2815,499],{"class":484},[471,2817,651],{"class":484},[471,2819,2820],{"class":514},"★",[471,2822,521],{"class":484},[471,2824,471],{"class":488},[471,2826,508],{"class":484},[471,2828,2829,2831,2833,2835,2837,2839,2842,2844,2846,2849,2851,2853],{"class":473,"line":2027},[471,2830,1836],{"class":484},[471,2832,471],{"class":488},[471,2834,493],{"class":492},[471,2836,496],{"class":484},[471,2838,499],{"class":484},[471,2840,2841],{"class":502},"text-xs text-gray-500",[471,2843,499],{"class":484},[471,2845,651],{"class":484},[471,2847,2848],{"class":514},"4.8",[471,2850,521],{"class":484},[471,2852,471],{"class":488},[471,2854,508],{"class":484},[471,2856,2857,2859,2861],{"class":473,"line":2033},[471,2858,1886],{"class":484},[471,2860,725],{"class":488},[471,2862,508],{"class":484},[471,2864,2865,2867,2869],{"class":473,"line":2042},[471,2866,1714],{"class":484},[471,2868,725],{"class":488},[471,2870,508],{"class":484},[471,2872,2873,2875,2877],{"class":473,"line":2051},[471,2874,1723],{"class":484},[471,2876,725],{"class":488},[471,2878,508],{"class":484},[471,2880,2881,2883,2885],{"class":473,"line":2056},[471,2882,1914],{"class":484},[471,2884,725],{"class":488},[471,2886,508],{"class":484},[471,2888,2889,2891,2893],{"class":473,"line":2062},[471,2890,885],{"class":484},[471,2892,725],{"class":488},[471,2894,508],{"class":484},[471,2896,2897,2899,2901],{"class":473,"line":2081},[471,2898,521],{"class":484},[471,2900,1419],{"class":488},[471,2902,508],{"class":484},[824,2904,2906],{"id":2905},"bài-tập-3-form-input-với-validation-states-validinvalid","Bài tập 3: Form input với validation states (valid\u002Finvalid)",[453,2908,2909,2911,2912,2914,2915,2917],{},[457,2910,1404],{}," Form đăng ký với real-time validation feedback sử dụng ",[432,2913,1238],{}," và ",[432,2916,1242],{},".",[462,2919,2921],{"className":1408,"code":2920,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-md mx-auto p-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-8\">Đăng ký tài khoản\u003C\u002Fh2>\n\n    \u003Cform class=\"space-y-5\" @submit.prevent>\n      \u003C!-- Full Name -->\n      \u003Cdiv>\n        \u003Clabel class=\"block text-sm font-medium text-gray-700 mb-1.5\">Họ và tên\u003C\u002Flabel>\n        \u003Cinput\n          type=\"text\"\n          required\n          minlength=\"3\"\n          placeholder=\"Nguyen Van A\"\n          class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm\n                 placeholder:text-gray-400\n                 user-invalid:border-red-400 user-invalid:ring-2 user-invalid:ring-red-100\n                 user-valid:border-emerald-400 user-valid:ring-2 user-valid:ring-emerald-100\n                 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400\n                 transition-all duration-200\"\n        \u002F>\n        \u003Cp class=\"mt-1 text-xs text-gray-400 hidden user-invalid:block peer-invalid:block\">\n          Vui lòng nhập ít nhất 3 ký tự\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Email -->\n      \u003Cdiv>\n        \u003Clabel class=\"block text-sm font-medium text-gray-700 mb-1.5\">Email\u003C\u002Flabel>\n        \u003Cinput\n          type=\"email\"\n          required\n          placeholder=\"you@example.com\"\n          class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm\n                 placeholder:text-gray-400\n                 user-invalid:border-red-400 user-invalid:ring-2 user-invalid:ring-red-100\n                 user-valid:border-emerald-400 user-valid:ring-2 user-valid:ring-emerald-100\n                 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400\n                 transition-all duration-200\"\n        \u002F>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Password -->\n      \u003Cdiv>\n        \u003Clabel class=\"block text-sm font-medium text-gray-700 mb-1.5\">Mật khẩu\u003C\u002Flabel>\n        \u003Cinput\n          type=\"password\"\n          required\n          minlength=\"8\"\n          placeholder=\"Ít nhất 8 ký tự\"\n          class=\"w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm\n                 placeholder:text-gray-400\n                 user-invalid:border-red-400 user-invalid:ring-2 user-invalid:ring-red-100\n                 user-valid:border-emerald-400 user-valid:ring-2 user-valid:ring-emerald-100\n                 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400\n                 transition-all duration-200\"\n        \u002F>\n        \u003C!-- Password strength indicator -->\n        \u003Cdiv class=\"mt-2 flex gap-1\">\n          \u003Cdiv class=\"h-1 flex-1 rounded-full bg-gray-200\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"h-1 flex-1 rounded-full bg-gray-200\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"h-1 flex-1 rounded-full bg-gray-200\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"h-1 flex-1 rounded-full bg-gray-200\">\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Checkbox — checked style -->\n      \u003Clabel class=\"flex items-start gap-3 cursor-pointer group\">\n        \u003Cinput\n          type=\"checkbox\"\n          required\n          class=\"mt-0.5 w-4 h-4 rounded border-gray-300 text-indigo-600\n                 checked:bg-indigo-600 checked:border-indigo-600\n                 focus:ring-2 focus:ring-indigo-200 focus:ring-offset-0\"\n        \u002F>\n        \u003Cspan class=\"text-sm text-gray-600 group-has-[:checked]:text-gray-900\">\n          Tôi đồng ý với \u003Ca href=\"#\" class=\"text-indigo-600 hover:underline\">Điều khoản dịch vụ\u003C\u002Fa> và\n          \u003Ca href=\"#\" class=\"text-indigo-600 hover:underline\">Chính sách bảo mật\u003C\u002Fa>\n        \u003C\u002Fspan>\n      \u003C\u002Flabel>\n\n      \u003Cbutton\n        type=\"submit\"\n        class=\"w-full py-2.5 bg-indigo-600 text-white font-semibold rounded-lg\n               hover:bg-indigo-700\n               active:bg-indigo-800 active:scale-[0.98]\n               focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2\n               disabled:bg-gray-300 disabled:cursor-not-allowed\n               transition-all duration-150\">\n        Tạo tài khoản\n      \u003C\u002Fbutton>\n    \u003C\u002Fform>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,2922,2923,2931,2950,2978,2982,3005,3010,3018,3046,3053,3066,3071,3085,3099,3110,3115,3120,3125,3130,3137,3141,3160,3165,3173,3181,3185,3190,3198,3224,3230,3242,3246,3259,3269,3273,3277,3281,3285,3291,3295,3303,3307,3312,3320,3347,3353,3366,3370,3383,3396,3406,3410,3414,3418,3422,3428,3432,3437,3456,3480,3502,3524,3546,3554,3562,3566,3571,3590,3596,3608,3612,3623,3628,3636,3641,3661,3706,3744,3753,3762,3767,3775,3790,3803,3809,3815,3821,3827,3837,3843,3852,3861,3870],{"__ignoreMap":467},[471,2924,2925,2927,2929],{"class":473,"line":474},[471,2926,485],{"class":484},[471,2928,1419],{"class":488},[471,2930,508],{"class":484},[471,2932,2933,2935,2937,2939,2941,2943,2946,2948],{"class":473,"line":481},[471,2934,744],{"class":484},[471,2936,725],{"class":488},[471,2938,493],{"class":492},[471,2940,496],{"class":484},[471,2942,499],{"class":484},[471,2944,2945],{"class":502},"max-w-md mx-auto p-8",[471,2947,499],{"class":484},[471,2949,508],{"class":484},[471,2951,2952,2954,2956,2958,2960,2962,2965,2967,2969,2972,2974,2976],{"class":473,"line":511},[471,2953,1445],{"class":484},[471,2955,427],{"class":488},[471,2957,493],{"class":492},[471,2959,496],{"class":484},[471,2961,499],{"class":484},[471,2963,2964],{"class":502},"text-2xl font-bold text-gray-900 mb-8",[471,2966,499],{"class":484},[471,2968,651],{"class":484},[471,2970,2971],{"class":514},"Đăng ký tài khoản",[471,2973,521],{"class":484},[471,2975,427],{"class":488},[471,2977,508],{"class":484},[471,2979,2980],{"class":473,"line":518},[471,2981,532],{"emptyLinePlaceholder":531},[471,2983,2984,2986,2989,2991,2993,2995,2998,3000,3003],{"class":473,"line":528},[471,2985,1445],{"class":484},[471,2987,2988],{"class":488},"form",[471,2990,493],{"class":492},[471,2992,496],{"class":484},[471,2994,499],{"class":484},[471,2996,2997],{"class":502},"space-y-5",[471,2999,499],{"class":484},[471,3001,3002],{"class":492}," @submit.prevent",[471,3004,508],{"class":484},[471,3006,3007],{"class":473,"line":535},[471,3008,3009],{"class":477},"      \u003C!-- Full Name -->\n",[471,3011,3012,3014,3016],{"class":473,"line":541},[471,3013,1502],{"class":484},[471,3015,725],{"class":488},[471,3017,508],{"class":484},[471,3019,3020,3022,3024,3026,3028,3030,3033,3035,3037,3040,3042,3044],{"class":473,"line":563},[471,3021,1584],{"class":484},[471,3023,747],{"class":488},[471,3025,493],{"class":492},[471,3027,496],{"class":484},[471,3029,499],{"class":484},[471,3031,3032],{"class":502},"block text-sm font-medium text-gray-700 mb-1.5",[471,3034,499],{"class":484},[471,3036,651],{"class":484},[471,3038,3039],{"class":514},"Họ và tên",[471,3041,521],{"class":484},[471,3043,747],{"class":488},[471,3045,508],{"class":484},[471,3047,3048,3050],{"class":473,"line":568},[471,3049,1584],{"class":484},[471,3051,3052],{"class":488},"input\n",[471,3054,3055,3058,3060,3062,3064],{"class":473,"line":574},[471,3056,3057],{"class":492},"          type",[471,3059,496],{"class":484},[471,3061,499],{"class":484},[471,3063,786],{"class":502},[471,3065,2436],{"class":484},[471,3067,3068],{"class":473,"line":594},[471,3069,3070],{"class":492},"          required\n",[471,3072,3073,3076,3078,3080,3083],{"class":473,"line":600},[471,3074,3075],{"class":492},"          minlength",[471,3077,496],{"class":484},[471,3079,499],{"class":484},[471,3081,3082],{"class":502},"3",[471,3084,2436],{"class":484},[471,3086,3087,3090,3092,3094,3097],{"class":473,"line":609},[471,3088,3089],{"class":492},"          placeholder",[471,3091,496],{"class":484},[471,3093,499],{"class":484},[471,3095,3096],{"class":502},"Nguyen Van A",[471,3098,2436],{"class":484},[471,3100,3101,3103,3105,3107],{"class":473,"line":614},[471,3102,2455],{"class":492},[471,3104,496],{"class":484},[471,3106,499],{"class":484},[471,3108,3109],{"class":502},"w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm\n",[471,3111,3112],{"class":473,"line":620},[471,3113,3114],{"class":502},"                 placeholder:text-gray-400\n",[471,3116,3117],{"class":473,"line":663},[471,3118,3119],{"class":502},"                 user-invalid:border-red-400 user-invalid:ring-2 user-invalid:ring-red-100\n",[471,3121,3122],{"class":473,"line":668},[471,3123,3124],{"class":502},"                 user-valid:border-emerald-400 user-valid:ring-2 user-valid:ring-emerald-100\n",[471,3126,3127],{"class":473,"line":674},[471,3128,3129],{"class":502},"                 focus:outline-none focus:ring-2 focus:ring-indigo-200 focus:border-indigo-400\n",[471,3131,3132,3135],{"class":473,"line":694},[471,3133,3134],{"class":502},"                 transition-all duration-200",[471,3136,2436],{"class":484},[471,3138,3139],{"class":473,"line":700},[471,3140,2469],{"class":484},[471,3142,3143,3145,3147,3149,3151,3153,3156,3158],{"class":473,"line":709},[471,3144,1584],{"class":484},[471,3146,453],{"class":488},[471,3148,493],{"class":492},[471,3150,496],{"class":484},[471,3152,499],{"class":484},[471,3154,3155],{"class":502},"mt-1 text-xs text-gray-400 hidden user-invalid:block peer-invalid:block",[471,3157,499],{"class":484},[471,3159,508],{"class":484},[471,3161,3162],{"class":473,"line":714},[471,3163,3164],{"class":514},"          Vui lòng nhập ít nhất 3 ký tự\n",[471,3166,3167,3169,3171],{"class":473,"line":720},[471,3168,1714],{"class":484},[471,3170,453],{"class":488},[471,3172,508],{"class":484},[471,3174,3175,3177,3179],{"class":473,"line":741},[471,3176,1723],{"class":484},[471,3178,725],{"class":488},[471,3180,508],{"class":484},[471,3182,3183],{"class":473,"line":772},[471,3184,532],{"emptyLinePlaceholder":531},[471,3186,3187],{"class":473,"line":816},[471,3188,3189],{"class":477},"      \u003C!-- Email -->\n",[471,3191,3192,3194,3196],{"class":473,"line":1833},[471,3193,1502],{"class":484},[471,3195,725],{"class":488},[471,3197,508],{"class":484},[471,3199,3200,3202,3204,3206,3208,3210,3212,3214,3216,3218,3220,3222],{"class":473,"line":1883},[471,3201,1584],{"class":484},[471,3203,747],{"class":488},[471,3205,493],{"class":492},[471,3207,496],{"class":484},[471,3209,499],{"class":484},[471,3211,3032],{"class":502},[471,3213,499],{"class":484},[471,3215,651],{"class":484},[471,3217,1017],{"class":514},[471,3219,521],{"class":484},[471,3221,747],{"class":488},[471,3223,508],{"class":484},[471,3225,3226,3228],{"class":473,"line":1893},[471,3227,1584],{"class":484},[471,3229,3052],{"class":488},[471,3231,3232,3234,3236,3238,3240],{"class":473,"line":1902},[471,3233,3057],{"class":492},[471,3235,496],{"class":484},[471,3237,499],{"class":484},[471,3239,1038],{"class":502},[471,3241,2436],{"class":484},[471,3243,3244],{"class":473,"line":1911},[471,3245,3070],{"class":492},[471,3247,3248,3250,3252,3254,3257],{"class":473,"line":1921},[471,3249,3089],{"class":492},[471,3251,496],{"class":484},[471,3253,499],{"class":484},[471,3255,3256],{"class":502},"you@example.com",[471,3258,2436],{"class":484},[471,3260,3261,3263,3265,3267],{"class":473,"line":1926},[471,3262,2455],{"class":492},[471,3264,496],{"class":484},[471,3266,499],{"class":484},[471,3268,3109],{"class":502},[471,3270,3271],{"class":473,"line":1932},[471,3272,3114],{"class":502},[471,3274,3275],{"class":473,"line":1951},[471,3276,3119],{"class":502},[471,3278,3279],{"class":473,"line":1979},[471,3280,3124],{"class":502},[471,3282,3283],{"class":473,"line":1984},[471,3284,3129],{"class":502},[471,3286,3287,3289],{"class":473,"line":2000},[471,3288,3134],{"class":502},[471,3290,2436],{"class":484},[471,3292,3293],{"class":473,"line":2006},[471,3294,2469],{"class":484},[471,3296,3297,3299,3301],{"class":473,"line":2012},[471,3298,1723],{"class":484},[471,3300,725],{"class":488},[471,3302,508],{"class":484},[471,3304,3305],{"class":473,"line":2018},[471,3306,532],{"emptyLinePlaceholder":531},[471,3308,3309],{"class":473,"line":2027},[471,3310,3311],{"class":477},"      \u003C!-- Password -->\n",[471,3313,3314,3316,3318],{"class":473,"line":2033},[471,3315,1502],{"class":484},[471,3317,725],{"class":488},[471,3319,508],{"class":484},[471,3321,3322,3324,3326,3328,3330,3332,3334,3336,3338,3341,3343,3345],{"class":473,"line":2042},[471,3323,1584],{"class":484},[471,3325,747],{"class":488},[471,3327,493],{"class":492},[471,3329,496],{"class":484},[471,3331,499],{"class":484},[471,3333,3032],{"class":502},[471,3335,499],{"class":484},[471,3337,651],{"class":484},[471,3339,3340],{"class":514},"Mật khẩu",[471,3342,521],{"class":484},[471,3344,747],{"class":488},[471,3346,508],{"class":484},[471,3348,3349,3351],{"class":473,"line":2051},[471,3350,1584],{"class":484},[471,3352,3052],{"class":488},[471,3354,3355,3357,3359,3361,3364],{"class":473,"line":2056},[471,3356,3057],{"class":492},[471,3358,496],{"class":484},[471,3360,499],{"class":484},[471,3362,3363],{"class":502},"password",[471,3365,2436],{"class":484},[471,3367,3368],{"class":473,"line":2062},[471,3369,3070],{"class":492},[471,3371,3372,3374,3376,3378,3381],{"class":473,"line":2081},[471,3373,3075],{"class":492},[471,3375,496],{"class":484},[471,3377,499],{"class":484},[471,3379,3380],{"class":502},"8",[471,3382,2436],{"class":484},[471,3384,3385,3387,3389,3391,3394],{"class":473,"line":2109},[471,3386,3089],{"class":492},[471,3388,496],{"class":484},[471,3390,499],{"class":484},[471,3392,3393],{"class":502},"Ít nhất 8 ký tự",[471,3395,2436],{"class":484},[471,3397,3398,3400,3402,3404],{"class":473,"line":2114},[471,3399,2455],{"class":492},[471,3401,496],{"class":484},[471,3403,499],{"class":484},[471,3405,3109],{"class":502},[471,3407,3408],{"class":473,"line":2130},[471,3409,3114],{"class":502},[471,3411,3412],{"class":473,"line":2136},[471,3413,3119],{"class":502},[471,3415,3416],{"class":473,"line":2142},[471,3417,3124],{"class":502},[471,3419,3420],{"class":473,"line":2148},[471,3421,3129],{"class":502},[471,3423,3424,3426],{"class":473,"line":2157},[471,3425,3134],{"class":502},[471,3427,2436],{"class":484},[471,3429,3430],{"class":473,"line":2163},[471,3431,2469],{"class":484},[471,3433,3434],{"class":473,"line":2172},[471,3435,3436],{"class":477},"        \u003C!-- Password strength indicator -->\n",[471,3438,3439,3441,3443,3445,3447,3449,3452,3454],{"class":473,"line":2181},[471,3440,1584],{"class":484},[471,3442,725],{"class":488},[471,3444,493],{"class":492},[471,3446,496],{"class":484},[471,3448,499],{"class":484},[471,3450,3451],{"class":502},"mt-2 flex gap-1",[471,3453,499],{"class":484},[471,3455,508],{"class":484},[471,3457,3458,3460,3462,3464,3466,3468,3471,3473,3476,3478],{"class":473,"line":2186},[471,3459,1657],{"class":484},[471,3461,725],{"class":488},[471,3463,493],{"class":492},[471,3465,496],{"class":484},[471,3467,499],{"class":484},[471,3469,3470],{"class":502},"h-1 flex-1 rounded-full bg-gray-200",[471,3472,499],{"class":484},[471,3474,3475],{"class":484},">\u003C\u002F",[471,3477,725],{"class":488},[471,3479,508],{"class":484},[471,3481,3482,3484,3486,3488,3490,3492,3494,3496,3498,3500],{"class":473,"line":2192},[471,3483,1657],{"class":484},[471,3485,725],{"class":488},[471,3487,493],{"class":492},[471,3489,496],{"class":484},[471,3491,499],{"class":484},[471,3493,3470],{"class":502},[471,3495,499],{"class":484},[471,3497,3475],{"class":484},[471,3499,725],{"class":488},[471,3501,508],{"class":484},[471,3503,3504,3506,3508,3510,3512,3514,3516,3518,3520,3522],{"class":473,"line":2211},[471,3505,1657],{"class":484},[471,3507,725],{"class":488},[471,3509,493],{"class":492},[471,3511,496],{"class":484},[471,3513,499],{"class":484},[471,3515,3470],{"class":502},[471,3517,499],{"class":484},[471,3519,3475],{"class":484},[471,3521,725],{"class":488},[471,3523,508],{"class":484},[471,3525,3526,3528,3530,3532,3534,3536,3538,3540,3542,3544],{"class":473,"line":2239},[471,3527,1657],{"class":484},[471,3529,725],{"class":488},[471,3531,493],{"class":492},[471,3533,496],{"class":484},[471,3535,499],{"class":484},[471,3537,3470],{"class":502},[471,3539,499],{"class":484},[471,3541,3475],{"class":484},[471,3543,725],{"class":488},[471,3545,508],{"class":484},[471,3547,3548,3550,3552],{"class":473,"line":2244},[471,3549,1714],{"class":484},[471,3551,725],{"class":488},[471,3553,508],{"class":484},[471,3555,3556,3558,3560],{"class":473,"line":2260},[471,3557,1723],{"class":484},[471,3559,725],{"class":488},[471,3561,508],{"class":484},[471,3563,3564],{"class":473,"line":2266},[471,3565,532],{"emptyLinePlaceholder":531},[471,3567,3568],{"class":473,"line":2272},[471,3569,3570],{"class":477},"      \u003C!-- Checkbox — checked style -->\n",[471,3572,3573,3575,3577,3579,3581,3583,3586,3588],{"class":473,"line":2278},[471,3574,1502],{"class":484},[471,3576,747],{"class":488},[471,3578,493],{"class":492},[471,3580,496],{"class":484},[471,3582,499],{"class":484},[471,3584,3585],{"class":502},"flex items-start gap-3 cursor-pointer group",[471,3587,499],{"class":484},[471,3589,508],{"class":484},[471,3591,3592,3594],{"class":473,"line":2287},[471,3593,1584],{"class":484},[471,3595,3052],{"class":488},[471,3597,3598,3600,3602,3604,3606],{"class":473,"line":2293},[471,3599,3057],{"class":492},[471,3601,496],{"class":484},[471,3603,499],{"class":484},[471,3605,1144],{"class":502},[471,3607,2436],{"class":484},[471,3609,3610],{"class":473,"line":2302},[471,3611,3070],{"class":492},[471,3613,3614,3616,3618,3620],{"class":473,"line":2311},[471,3615,2455],{"class":492},[471,3617,496],{"class":484},[471,3619,499],{"class":484},[471,3621,3622],{"class":502},"mt-0.5 w-4 h-4 rounded border-gray-300 text-indigo-600\n",[471,3624,3625],{"class":473,"line":2320},[471,3626,3627],{"class":502},"                 checked:bg-indigo-600 checked:border-indigo-600\n",[471,3629,3631,3634],{"class":473,"line":3630},73,[471,3632,3633],{"class":502},"                 focus:ring-2 focus:ring-indigo-200 focus:ring-offset-0",[471,3635,2436],{"class":484},[471,3637,3639],{"class":473,"line":3638},74,[471,3640,2469],{"class":484},[471,3642,3644,3646,3648,3650,3652,3654,3657,3659],{"class":473,"line":3643},75,[471,3645,1584],{"class":484},[471,3647,471],{"class":488},[471,3649,493],{"class":492},[471,3651,496],{"class":484},[471,3653,499],{"class":484},[471,3655,3656],{"class":502},"text-sm text-gray-600 group-has-[:checked]:text-gray-900",[471,3658,499],{"class":484},[471,3660,508],{"class":484},[471,3662,3664,3667,3669,3671,3673,3675,3677,3679,3681,3683,3685,3687,3690,3692,3694,3697,3699,3701,3703],{"class":473,"line":3663},76,[471,3665,3666],{"class":514},"          Tôi đồng ý với ",[471,3668,485],{"class":484},[471,3670,625],{"class":488},[471,3672,628],{"class":492},[471,3674,496],{"class":484},[471,3676,499],{"class":484},[471,3678,635],{"class":502},[471,3680,499],{"class":484},[471,3682,493],{"class":492},[471,3684,496],{"class":484},[471,3686,499],{"class":484},[471,3688,3689],{"class":502},"text-indigo-600 hover:underline",[471,3691,499],{"class":484},[471,3693,651],{"class":484},[471,3695,3696],{"class":514},"Điều khoản dịch vụ",[471,3698,521],{"class":484},[471,3700,625],{"class":488},[471,3702,651],{"class":484},[471,3704,3705],{"class":514}," và\n",[471,3707,3709,3711,3713,3715,3717,3719,3721,3723,3725,3727,3729,3731,3733,3735,3738,3740,3742],{"class":473,"line":3708},77,[471,3710,1657],{"class":484},[471,3712,625],{"class":488},[471,3714,628],{"class":492},[471,3716,496],{"class":484},[471,3718,499],{"class":484},[471,3720,635],{"class":502},[471,3722,499],{"class":484},[471,3724,493],{"class":492},[471,3726,496],{"class":484},[471,3728,499],{"class":484},[471,3730,3689],{"class":502},[471,3732,499],{"class":484},[471,3734,651],{"class":484},[471,3736,3737],{"class":514},"Chính sách bảo mật",[471,3739,521],{"class":484},[471,3741,625],{"class":488},[471,3743,508],{"class":484},[471,3745,3747,3749,3751],{"class":473,"line":3746},78,[471,3748,1714],{"class":484},[471,3750,471],{"class":488},[471,3752,508],{"class":484},[471,3754,3756,3758,3760],{"class":473,"line":3755},79,[471,3757,1723],{"class":484},[471,3759,747],{"class":488},[471,3761,508],{"class":484},[471,3763,3765],{"class":473,"line":3764},80,[471,3766,532],{"emptyLinePlaceholder":531},[471,3768,3770,3772],{"class":473,"line":3769},81,[471,3771,1502],{"class":484},[471,3773,3774],{"class":488},"button\n",[471,3776,3778,3781,3783,3785,3788],{"class":473,"line":3777},82,[471,3779,3780],{"class":492},"        type",[471,3782,496],{"class":484},[471,3784,499],{"class":484},[471,3786,3787],{"class":502},"submit",[471,3789,2436],{"class":484},[471,3791,3793,3796,3798,3800],{"class":473,"line":3792},83,[471,3794,3795],{"class":492},"        class",[471,3797,496],{"class":484},[471,3799,499],{"class":484},[471,3801,3802],{"class":502},"w-full py-2.5 bg-indigo-600 text-white font-semibold rounded-lg\n",[471,3804,3806],{"class":473,"line":3805},84,[471,3807,3808],{"class":502},"               hover:bg-indigo-700\n",[471,3810,3812],{"class":473,"line":3811},85,[471,3813,3814],{"class":502},"               active:bg-indigo-800 active:scale-[0.98]\n",[471,3816,3818],{"class":473,"line":3817},86,[471,3819,3820],{"class":502},"               focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2\n",[471,3822,3824],{"class":473,"line":3823},87,[471,3825,3826],{"class":502},"               disabled:bg-gray-300 disabled:cursor-not-allowed\n",[471,3828,3830,3833,3835],{"class":473,"line":3829},88,[471,3831,3832],{"class":502},"               transition-all duration-150",[471,3834,499],{"class":484},[471,3836,508],{"class":484},[471,3838,3840],{"class":473,"line":3839},89,[471,3841,3842],{"class":514},"        Tạo tài khoản\n",[471,3844,3846,3848,3850],{"class":473,"line":3845},90,[471,3847,1723],{"class":484},[471,3849,489],{"class":488},[471,3851,508],{"class":484},[471,3853,3855,3857,3859],{"class":473,"line":3854},91,[471,3856,1914],{"class":484},[471,3858,2988],{"class":488},[471,3860,508],{"class":484},[471,3862,3864,3866,3868],{"class":473,"line":3863},92,[471,3865,885],{"class":484},[471,3867,725],{"class":488},[471,3869,508],{"class":484},[471,3871,3873,3875,3877],{"class":473,"line":3872},93,[471,3874,521],{"class":484},[471,3876,1419],{"class":488},[471,3878,508],{"class":484},[824,3880,3882],{"id":3881},"bài-tập-4-parent-card-highlights-child-icon-on-hover","Bài tập 4: Parent card highlights child icon on hover",[453,3884,3885,3887],{},[457,3886,1404],{}," Feature card — khi hover toàn bộ card, icon trong card phóng to + đổi màu nền.",[462,3889,3891],{"className":1408,"code":3890,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-4xl mx-auto p-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-8\">Tính năng nổi bật\u003C\u002Fh2>\n\n    \u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n      \u003Cdiv class=\"group flex gap-5 p-6 bg-white rounded-xl border border-gray-200\n                  hover:border-indigo-300 hover:shadow-md transition-all duration-300 cursor-pointer\">\n        \u003C!-- Icon — được scale khi hover card -->\n        \u003Cdiv class=\"flex-shrink-0 w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center\n                    group-hover:bg-indigo-100 group-hover:scale-110 transition-all duration-300\">\n          \u003Csvg class=\"w-6 h-6 text-indigo-600 group-hover:text-indigo-700 transition-colors\" 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\n        \u003Cdiv>\n          \u003Ch3 class=\"text-lg font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors\">\n            Tốc độ vượt trội\n          \u003C\u002Fh3>\n          \u003Cp class=\"mt-1 text-sm text-gray-600 leading-relaxed\">\n            Hệ thống được tối ưu để xử lý 10,000 request mỗi giây với độ trễ dưới 50ms.\n          \u003C\u002Fp>\n          \u003Cspan class=\"inline-flex items-center gap-1 mt-3 text-sm font-medium text-indigo-600\n                       opacity-0 group-hover:opacity-100 transition-opacity duration-300\">\n            Tìm hiểu thêm\n            \u003Csvg class=\"w-4 h-4 group-hover:translate-x-1 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \u002F>\n            \u003C\u002Fsvg>\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"group flex gap-5 p-6 bg-white rounded-xl border border-gray-200\n                  hover:border-emerald-300 hover:shadow-md transition-all duration-300 cursor-pointer\">\n        \u003Cdiv class=\"flex-shrink-0 w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center\n                    group-hover:bg-emerald-100 group-hover:scale-110 transition-all duration-300\">\n          \u003Csvg class=\"w-6 h-6 text-emerald-600 group-hover:text-emerald-700 transition-colors\" 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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z\" \u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n\n        \u003Cdiv>\n          \u003Ch3 class=\"text-lg font-semibold text-gray-900 group-hover:text-emerald-600 transition-colors\">\n            Bảo mật tối đa\n          \u003C\u002Fh3>\n          \u003Cp class=\"mt-1 text-sm text-gray-600 leading-relaxed\">\n            Mã hóa end-to-end AES-256, SOC 2 Type II certified, GDPR compliant.\n          \u003C\u002Fp>\n          \u003Cspan class=\"inline-flex items-center gap-1 mt-3 text-sm font-medium text-emerald-600\n                       opacity-0 group-hover:opacity-100 transition-opacity duration-300\">\n            Tìm hiểu thêm\n            \u003Csvg class=\"w-4 h-4 group-hover:translate-x-1 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \u002F>\n            \u003C\u002Fsvg>\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"group flex gap-5 p-6 bg-white rounded-xl border border-gray-200\n                  hover:border-purple-300 hover:shadow-md transition-all duration-300 cursor-pointer\">\n        \u003Cdiv class=\"flex-shrink-0 w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center\n                    group-hover:bg-purple-100 group-hover:scale-110 transition-all duration-300\">\n          \u003Csvg class=\"w-6 h-6 text-purple-600 group-hover:text-purple-700 transition-colors\" 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\n        \u003Cdiv>\n          \u003Ch3 class=\"text-lg font-semibold text-gray-900 group-hover:text-purple-600 transition-colors\">\n            Tùy chỉnh linh hoạt\n          \u003C\u002Fh3>\n          \u003Cp class=\"mt-1 text-sm text-gray-600 leading-relaxed\">\n            API mở, webhooks, và 200+ integration sẵn có để kết nối với stack của bạn.\n          \u003C\u002Fp>\n          \u003Cspan class=\"inline-flex items-center gap-1 mt-3 text-sm font-medium text-purple-600\n                       opacity-0 group-hover:opacity-100 transition-opacity duration-300\">\n            Tìm hiểu thêm\n            \u003Csvg class=\"w-4 h-4 group-hover:translate-x-1 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \u002F>\n            \u003C\u002Fsvg>\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"group flex gap-5 p-6 bg-white rounded-xl border border-gray-200\n                  hover:border-amber-300 hover:shadow-md transition-all duration-300 cursor-pointer\">\n        \u003Cdiv class=\"flex-shrink-0 w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center\n                    group-hover:bg-amber-100 group-hover:scale-110 transition-all duration-300\">\n          \u003Csvg class=\"w-6 h-6 text-amber-600 group-hover:text-amber-700 transition-colors\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z\" \u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n\n        \u003Cdiv>\n          \u003Ch3 class=\"text-lg font-semibold text-gray-900 group-hover:text-amber-600 transition-colors\">\n            Hỗ trợ 24\u002F7\n          \u003C\u002Fh3>\n          \u003Cp class=\"mt-1 text-sm text-gray-600 leading-relaxed\">\n            Đội ngũ support qua chat, email, và phone — thời gian phản hồi trung bình dưới 5 phút.\n          \u003C\u002Fp>\n          \u003Cspan class=\"inline-flex items-center gap-1 mt-3 text-sm font-medium text-amber-600\n                       opacity-0 group-hover:opacity-100 transition-opacity duration-300\">\n            Tìm hiểu thêm\n            \u003Csvg class=\"w-4 h-4 group-hover:translate-x-1 transition-transform\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5l7 7-7 7\" \u002F>\n            \u003C\u002Fsvg>\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,3892,3893,3901,3920,3947,3951,3970,3985,3994,3999,4014,4023,4072,4121,4129,4137,4141,4149,4167,4172,4180,4199,4204,4212,4227,4236,4241,4290,4340,4349,4357,4365,4373,4377,4391,4400,4415,4424,4473,4522,4530,4538,4542,4550,4569,4574,4582,4600,4605,4613,4628,4636,4640,4688,4736,4744,4752,4760,4768,4772,4786,4795,4810,4819,4868,4917,4925,4933,4937,4945,4964,4969,4977,4995,5000,5008,5023,5031,5035,5083,5131,5139,5147,5155,5163,5167,5181,5190,5205,5214,5263,5312,5320,5328,5332,5341,5361,5367,5376,5395,5401,5410,5426,5435,5440,5489,5538,5547,5556,5565,5574,5583,5592],{"__ignoreMap":467},[471,3894,3895,3897,3899],{"class":473,"line":474},[471,3896,485],{"class":484},[471,3898,1419],{"class":488},[471,3900,508],{"class":484},[471,3902,3903,3905,3907,3909,3911,3913,3916,3918],{"class":473,"line":481},[471,3904,744],{"class":484},[471,3906,725],{"class":488},[471,3908,493],{"class":492},[471,3910,496],{"class":484},[471,3912,499],{"class":484},[471,3914,3915],{"class":502},"max-w-4xl mx-auto p-8",[471,3917,499],{"class":484},[471,3919,508],{"class":484},[471,3921,3922,3924,3926,3928,3930,3932,3934,3936,3938,3941,3943,3945],{"class":473,"line":511},[471,3923,1445],{"class":484},[471,3925,427],{"class":488},[471,3927,493],{"class":492},[471,3929,496],{"class":484},[471,3931,499],{"class":484},[471,3933,2964],{"class":502},[471,3935,499],{"class":484},[471,3937,651],{"class":484},[471,3939,3940],{"class":514},"Tính năng nổi bật",[471,3942,521],{"class":484},[471,3944,427],{"class":488},[471,3946,508],{"class":484},[471,3948,3949],{"class":473,"line":518},[471,3950,532],{"emptyLinePlaceholder":531},[471,3952,3953,3955,3957,3959,3961,3963,3966,3968],{"class":473,"line":528},[471,3954,1445],{"class":484},[471,3956,725],{"class":488},[471,3958,493],{"class":492},[471,3960,496],{"class":484},[471,3962,499],{"class":484},[471,3964,3965],{"class":502},"grid grid-cols-1 md:grid-cols-2 gap-6",[471,3967,499],{"class":484},[471,3969,508],{"class":484},[471,3971,3972,3974,3976,3978,3980,3982],{"class":473,"line":535},[471,3973,1502],{"class":484},[471,3975,725],{"class":488},[471,3977,493],{"class":492},[471,3979,496],{"class":484},[471,3981,499],{"class":484},[471,3983,3984],{"class":502},"group flex gap-5 p-6 bg-white rounded-xl border border-gray-200\n",[471,3986,3987,3990,3992],{"class":473,"line":541},[471,3988,3989],{"class":502},"                  hover:border-indigo-300 hover:shadow-md transition-all duration-300 cursor-pointer",[471,3991,499],{"class":484},[471,3993,508],{"class":484},[471,3995,3996],{"class":473,"line":563},[471,3997,3998],{"class":477},"        \u003C!-- Icon — được scale khi hover card -->\n",[471,4000,4001,4003,4005,4007,4009,4011],{"class":473,"line":568},[471,4002,1584],{"class":484},[471,4004,725],{"class":488},[471,4006,493],{"class":492},[471,4008,496],{"class":484},[471,4010,499],{"class":484},[471,4012,4013],{"class":502},"flex-shrink-0 w-12 h-12 bg-indigo-50 rounded-xl flex items-center justify-center\n",[471,4015,4016,4019,4021],{"class":473,"line":574},[471,4017,4018],{"class":502},"                    group-hover:bg-indigo-100 group-hover:scale-110 transition-all duration-300",[471,4020,499],{"class":484},[471,4022,508],{"class":484},[471,4024,4025,4027,4029,4031,4033,4035,4038,4040,4042,4044,4046,4048,4050,4052,4054,4056,4058,4060,4062,4064,4066,4068,4070],{"class":473,"line":594},[471,4026,1657],{"class":484},[471,4028,928],{"class":488},[471,4030,493],{"class":492},[471,4032,496],{"class":484},[471,4034,499],{"class":484},[471,4036,4037],{"class":502},"w-6 h-6 text-indigo-600 group-hover:text-indigo-700 transition-colors",[471,4039,499],{"class":484},[471,4041,1617],{"class":492},[471,4043,496],{"class":484},[471,4045,499],{"class":484},[471,4047,1624],{"class":502},[471,4049,499],{"class":484},[471,4051,1629],{"class":492},[471,4053,496],{"class":484},[471,4055,499],{"class":484},[471,4057,1636],{"class":502},[471,4059,499],{"class":484},[471,4061,1641],{"class":492},[471,4063,496],{"class":484},[471,4065,499],{"class":484},[471,4067,1648],{"class":502},[471,4069,499],{"class":484},[471,4071,508],{"class":484},[471,4073,4074,4076,4078,4080,4082,4084,4086,4088,4090,4092,4094,4096,4098,4100,4102,4104,4106,4108,4110,4112,4114,4117,4119],{"class":473,"line":600},[471,4075,1836],{"class":484},[471,4077,1660],{"class":488},[471,4079,1663],{"class":492},[471,4081,496],{"class":484},[471,4083,499],{"class":484},[471,4085,1670],{"class":502},[471,4087,499],{"class":484},[471,4089,1675],{"class":492},[471,4091,496],{"class":484},[471,4093,499],{"class":484},[471,4095,1670],{"class":502},[471,4097,499],{"class":484},[471,4099,1686],{"class":492},[471,4101,496],{"class":484},[471,4103,499],{"class":484},[471,4105,1693],{"class":502},[471,4107,499],{"class":484},[471,4109,1698],{"class":492},[471,4111,496],{"class":484},[471,4113,499],{"class":484},[471,4115,4116],{"class":502},"M13 10V3L4 14h7v7l9-11h-7z",[471,4118,499],{"class":484},[471,4120,560],{"class":484},[471,4122,4123,4125,4127],{"class":473,"line":609},[471,4124,1886],{"class":484},[471,4126,928],{"class":488},[471,4128,508],{"class":484},[471,4130,4131,4133,4135],{"class":473,"line":614},[471,4132,1714],{"class":484},[471,4134,725],{"class":488},[471,4136,508],{"class":484},[471,4138,4139],{"class":473,"line":620},[471,4140,532],{"emptyLinePlaceholder":531},[471,4142,4143,4145,4147],{"class":473,"line":663},[471,4144,1584],{"class":484},[471,4146,725],{"class":488},[471,4148,508],{"class":484},[471,4150,4151,4153,4155,4157,4159,4161,4163,4165],{"class":473,"line":668},[471,4152,1657],{"class":484},[471,4154,824],{"class":488},[471,4156,493],{"class":492},[471,4158,496],{"class":484},[471,4160,499],{"class":484},[471,4162,871],{"class":502},[471,4164,499],{"class":484},[471,4166,508],{"class":484},[471,4168,4169],{"class":473,"line":674},[471,4170,4171],{"class":514},"            Tốc độ vượt trội\n",[471,4173,4174,4176,4178],{"class":473,"line":694},[471,4175,1886],{"class":484},[471,4177,824],{"class":488},[471,4179,508],{"class":484},[471,4181,4182,4184,4186,4188,4190,4192,4195,4197],{"class":473,"line":700},[471,4183,1657],{"class":484},[471,4185,453],{"class":488},[471,4187,493],{"class":492},[471,4189,496],{"class":484},[471,4191,499],{"class":484},[471,4193,4194],{"class":502},"mt-1 text-sm text-gray-600 leading-relaxed",[471,4196,499],{"class":484},[471,4198,508],{"class":484},[471,4200,4201],{"class":473,"line":709},[471,4202,4203],{"class":514},"            Hệ thống được tối ưu để xử lý 10,000 request mỗi giây với độ trễ dưới 50ms.\n",[471,4205,4206,4208,4210],{"class":473,"line":714},[471,4207,1886],{"class":484},[471,4209,453],{"class":488},[471,4211,508],{"class":484},[471,4213,4214,4216,4218,4220,4222,4224],{"class":473,"line":720},[471,4215,1657],{"class":484},[471,4217,471],{"class":488},[471,4219,493],{"class":492},[471,4221,496],{"class":484},[471,4223,499],{"class":484},[471,4225,4226],{"class":502},"inline-flex items-center gap-1 mt-3 text-sm font-medium text-indigo-600\n",[471,4228,4229,4232,4234],{"class":473,"line":741},[471,4230,4231],{"class":502},"                       opacity-0 group-hover:opacity-100 transition-opacity duration-300",[471,4233,499],{"class":484},[471,4235,508],{"class":484},[471,4237,4238],{"class":473,"line":772},[471,4239,4240],{"class":514},"            Tìm hiểu thêm\n",[471,4242,4243,4245,4247,4249,4251,4253,4256,4258,4260,4262,4264,4266,4268,4270,4272,4274,4276,4278,4280,4282,4284,4286,4288],{"class":473,"line":816},[471,4244,1836],{"class":484},[471,4246,928],{"class":488},[471,4248,493],{"class":492},[471,4250,496],{"class":484},[471,4252,499],{"class":484},[471,4254,4255],{"class":502},"w-4 h-4 group-hover:translate-x-1 transition-transform",[471,4257,499],{"class":484},[471,4259,1617],{"class":492},[471,4261,496],{"class":484},[471,4263,499],{"class":484},[471,4265,1624],{"class":502},[471,4267,499],{"class":484},[471,4269,1629],{"class":492},[471,4271,496],{"class":484},[471,4273,499],{"class":484},[471,4275,1636],{"class":502},[471,4277,499],{"class":484},[471,4279,1641],{"class":492},[471,4281,496],{"class":484},[471,4283,499],{"class":484},[471,4285,1648],{"class":502},[471,4287,499],{"class":484},[471,4289,508],{"class":484},[471,4291,4292,4295,4297,4299,4301,4303,4305,4307,4309,4311,4313,4315,4317,4319,4321,4323,4325,4327,4329,4331,4333,4336,4338],{"class":473,"line":1833},[471,4293,4294],{"class":484},"              \u003C",[471,4296,1660],{"class":488},[471,4298,1663],{"class":492},[471,4300,496],{"class":484},[471,4302,499],{"class":484},[471,4304,1670],{"class":502},[471,4306,499],{"class":484},[471,4308,1675],{"class":492},[471,4310,496],{"class":484},[471,4312,499],{"class":484},[471,4314,1670],{"class":502},[471,4316,499],{"class":484},[471,4318,1686],{"class":492},[471,4320,496],{"class":484},[471,4322,499],{"class":484},[471,4324,1693],{"class":502},[471,4326,499],{"class":484},[471,4328,1698],{"class":492},[471,4330,496],{"class":484},[471,4332,499],{"class":484},[471,4334,4335],{"class":502},"M9 5l7 7-7 7",[471,4337,499],{"class":484},[471,4339,560],{"class":484},[471,4341,4342,4345,4347],{"class":473,"line":1883},[471,4343,4344],{"class":484},"            \u003C\u002F",[471,4346,928],{"class":488},[471,4348,508],{"class":484},[471,4350,4351,4353,4355],{"class":473,"line":1893},[471,4352,1886],{"class":484},[471,4354,471],{"class":488},[471,4356,508],{"class":484},[471,4358,4359,4361,4363],{"class":473,"line":1902},[471,4360,1714],{"class":484},[471,4362,725],{"class":488},[471,4364,508],{"class":484},[471,4366,4367,4369,4371],{"class":473,"line":1911},[471,4368,1723],{"class":484},[471,4370,725],{"class":488},[471,4372,508],{"class":484},[471,4374,4375],{"class":473,"line":1921},[471,4376,532],{"emptyLinePlaceholder":531},[471,4378,4379,4381,4383,4385,4387,4389],{"class":473,"line":1926},[471,4380,1502],{"class":484},[471,4382,725],{"class":488},[471,4384,493],{"class":492},[471,4386,496],{"class":484},[471,4388,499],{"class":484},[471,4390,3984],{"class":502},[471,4392,4393,4396,4398],{"class":473,"line":1932},[471,4394,4395],{"class":502},"                  hover:border-emerald-300 hover:shadow-md transition-all duration-300 cursor-pointer",[471,4397,499],{"class":484},[471,4399,508],{"class":484},[471,4401,4402,4404,4406,4408,4410,4412],{"class":473,"line":1951},[471,4403,1584],{"class":484},[471,4405,725],{"class":488},[471,4407,493],{"class":492},[471,4409,496],{"class":484},[471,4411,499],{"class":484},[471,4413,4414],{"class":502},"flex-shrink-0 w-12 h-12 bg-emerald-50 rounded-xl flex items-center justify-center\n",[471,4416,4417,4420,4422],{"class":473,"line":1979},[471,4418,4419],{"class":502},"                    group-hover:bg-emerald-100 group-hover:scale-110 transition-all duration-300",[471,4421,499],{"class":484},[471,4423,508],{"class":484},[471,4425,4426,4428,4430,4432,4434,4436,4439,4441,4443,4445,4447,4449,4451,4453,4455,4457,4459,4461,4463,4465,4467,4469,4471],{"class":473,"line":1984},[471,4427,1657],{"class":484},[471,4429,928],{"class":488},[471,4431,493],{"class":492},[471,4433,496],{"class":484},[471,4435,499],{"class":484},[471,4437,4438],{"class":502},"w-6 h-6 text-emerald-600 group-hover:text-emerald-700 transition-colors",[471,4440,499],{"class":484},[471,4442,1617],{"class":492},[471,4444,496],{"class":484},[471,4446,499],{"class":484},[471,4448,1624],{"class":502},[471,4450,499],{"class":484},[471,4452,1629],{"class":492},[471,4454,496],{"class":484},[471,4456,499],{"class":484},[471,4458,1636],{"class":502},[471,4460,499],{"class":484},[471,4462,1641],{"class":492},[471,4464,496],{"class":484},[471,4466,499],{"class":484},[471,4468,1648],{"class":502},[471,4470,499],{"class":484},[471,4472,508],{"class":484},[471,4474,4475,4477,4479,4481,4483,4485,4487,4489,4491,4493,4495,4497,4499,4501,4503,4505,4507,4509,4511,4513,4515,4518,4520],{"class":473,"line":2000},[471,4476,1836],{"class":484},[471,4478,1660],{"class":488},[471,4480,1663],{"class":492},[471,4482,496],{"class":484},[471,4484,499],{"class":484},[471,4486,1670],{"class":502},[471,4488,499],{"class":484},[471,4490,1675],{"class":492},[471,4492,496],{"class":484},[471,4494,499],{"class":484},[471,4496,1670],{"class":502},[471,4498,499],{"class":484},[471,4500,1686],{"class":492},[471,4502,496],{"class":484},[471,4504,499],{"class":484},[471,4506,1693],{"class":502},[471,4508,499],{"class":484},[471,4510,1698],{"class":492},[471,4512,496],{"class":484},[471,4514,499],{"class":484},[471,4516,4517],{"class":502},"M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z",[471,4519,499],{"class":484},[471,4521,560],{"class":484},[471,4523,4524,4526,4528],{"class":473,"line":2006},[471,4525,1886],{"class":484},[471,4527,928],{"class":488},[471,4529,508],{"class":484},[471,4531,4532,4534,4536],{"class":473,"line":2012},[471,4533,1714],{"class":484},[471,4535,725],{"class":488},[471,4537,508],{"class":484},[471,4539,4540],{"class":473,"line":2018},[471,4541,532],{"emptyLinePlaceholder":531},[471,4543,4544,4546,4548],{"class":473,"line":2027},[471,4545,1584],{"class":484},[471,4547,725],{"class":488},[471,4549,508],{"class":484},[471,4551,4552,4554,4556,4558,4560,4562,4565,4567],{"class":473,"line":2033},[471,4553,1657],{"class":484},[471,4555,824],{"class":488},[471,4557,493],{"class":492},[471,4559,496],{"class":484},[471,4561,499],{"class":484},[471,4563,4564],{"class":502},"text-lg font-semibold text-gray-900 group-hover:text-emerald-600 transition-colors",[471,4566,499],{"class":484},[471,4568,508],{"class":484},[471,4570,4571],{"class":473,"line":2042},[471,4572,4573],{"class":514},"            Bảo mật tối đa\n",[471,4575,4576,4578,4580],{"class":473,"line":2051},[471,4577,1886],{"class":484},[471,4579,824],{"class":488},[471,4581,508],{"class":484},[471,4583,4584,4586,4588,4590,4592,4594,4596,4598],{"class":473,"line":2056},[471,4585,1657],{"class":484},[471,4587,453],{"class":488},[471,4589,493],{"class":492},[471,4591,496],{"class":484},[471,4593,499],{"class":484},[471,4595,4194],{"class":502},[471,4597,499],{"class":484},[471,4599,508],{"class":484},[471,4601,4602],{"class":473,"line":2062},[471,4603,4604],{"class":514},"            Mã hóa end-to-end AES-256, SOC 2 Type II certified, GDPR compliant.\n",[471,4606,4607,4609,4611],{"class":473,"line":2081},[471,4608,1886],{"class":484},[471,4610,453],{"class":488},[471,4612,508],{"class":484},[471,4614,4615,4617,4619,4621,4623,4625],{"class":473,"line":2109},[471,4616,1657],{"class":484},[471,4618,471],{"class":488},[471,4620,493],{"class":492},[471,4622,496],{"class":484},[471,4624,499],{"class":484},[471,4626,4627],{"class":502},"inline-flex items-center gap-1 mt-3 text-sm font-medium text-emerald-600\n",[471,4629,4630,4632,4634],{"class":473,"line":2114},[471,4631,4231],{"class":502},[471,4633,499],{"class":484},[471,4635,508],{"class":484},[471,4637,4638],{"class":473,"line":2130},[471,4639,4240],{"class":514},[471,4641,4642,4644,4646,4648,4650,4652,4654,4656,4658,4660,4662,4664,4666,4668,4670,4672,4674,4676,4678,4680,4682,4684,4686],{"class":473,"line":2136},[471,4643,1836],{"class":484},[471,4645,928],{"class":488},[471,4647,493],{"class":492},[471,4649,496],{"class":484},[471,4651,499],{"class":484},[471,4653,4255],{"class":502},[471,4655,499],{"class":484},[471,4657,1617],{"class":492},[471,4659,496],{"class":484},[471,4661,499],{"class":484},[471,4663,1624],{"class":502},[471,4665,499],{"class":484},[471,4667,1629],{"class":492},[471,4669,496],{"class":484},[471,4671,499],{"class":484},[471,4673,1636],{"class":502},[471,4675,499],{"class":484},[471,4677,1641],{"class":492},[471,4679,496],{"class":484},[471,4681,499],{"class":484},[471,4683,1648],{"class":502},[471,4685,499],{"class":484},[471,4687,508],{"class":484},[471,4689,4690,4692,4694,4696,4698,4700,4702,4704,4706,4708,4710,4712,4714,4716,4718,4720,4722,4724,4726,4728,4730,4732,4734],{"class":473,"line":2142},[471,4691,4294],{"class":484},[471,4693,1660],{"class":488},[471,4695,1663],{"class":492},[471,4697,496],{"class":484},[471,4699,499],{"class":484},[471,4701,1670],{"class":502},[471,4703,499],{"class":484},[471,4705,1675],{"class":492},[471,4707,496],{"class":484},[471,4709,499],{"class":484},[471,4711,1670],{"class":502},[471,4713,499],{"class":484},[471,4715,1686],{"class":492},[471,4717,496],{"class":484},[471,4719,499],{"class":484},[471,4721,1693],{"class":502},[471,4723,499],{"class":484},[471,4725,1698],{"class":492},[471,4727,496],{"class":484},[471,4729,499],{"class":484},[471,4731,4335],{"class":502},[471,4733,499],{"class":484},[471,4735,560],{"class":484},[471,4737,4738,4740,4742],{"class":473,"line":2148},[471,4739,4344],{"class":484},[471,4741,928],{"class":488},[471,4743,508],{"class":484},[471,4745,4746,4748,4750],{"class":473,"line":2157},[471,4747,1886],{"class":484},[471,4749,471],{"class":488},[471,4751,508],{"class":484},[471,4753,4754,4756,4758],{"class":473,"line":2163},[471,4755,1714],{"class":484},[471,4757,725],{"class":488},[471,4759,508],{"class":484},[471,4761,4762,4764,4766],{"class":473,"line":2172},[471,4763,1723],{"class":484},[471,4765,725],{"class":488},[471,4767,508],{"class":484},[471,4769,4770],{"class":473,"line":2181},[471,4771,532],{"emptyLinePlaceholder":531},[471,4773,4774,4776,4778,4780,4782,4784],{"class":473,"line":2186},[471,4775,1502],{"class":484},[471,4777,725],{"class":488},[471,4779,493],{"class":492},[471,4781,496],{"class":484},[471,4783,499],{"class":484},[471,4785,3984],{"class":502},[471,4787,4788,4791,4793],{"class":473,"line":2192},[471,4789,4790],{"class":502},"                  hover:border-purple-300 hover:shadow-md transition-all duration-300 cursor-pointer",[471,4792,499],{"class":484},[471,4794,508],{"class":484},[471,4796,4797,4799,4801,4803,4805,4807],{"class":473,"line":2211},[471,4798,1584],{"class":484},[471,4800,725],{"class":488},[471,4802,493],{"class":492},[471,4804,496],{"class":484},[471,4806,499],{"class":484},[471,4808,4809],{"class":502},"flex-shrink-0 w-12 h-12 bg-purple-50 rounded-xl flex items-center justify-center\n",[471,4811,4812,4815,4817],{"class":473,"line":2239},[471,4813,4814],{"class":502},"                    group-hover:bg-purple-100 group-hover:scale-110 transition-all duration-300",[471,4816,499],{"class":484},[471,4818,508],{"class":484},[471,4820,4821,4823,4825,4827,4829,4831,4834,4836,4838,4840,4842,4844,4846,4848,4850,4852,4854,4856,4858,4860,4862,4864,4866],{"class":473,"line":2244},[471,4822,1657],{"class":484},[471,4824,928],{"class":488},[471,4826,493],{"class":492},[471,4828,496],{"class":484},[471,4830,499],{"class":484},[471,4832,4833],{"class":502},"w-6 h-6 text-purple-600 group-hover:text-purple-700 transition-colors",[471,4835,499],{"class":484},[471,4837,1617],{"class":492},[471,4839,496],{"class":484},[471,4841,499],{"class":484},[471,4843,1624],{"class":502},[471,4845,499],{"class":484},[471,4847,1629],{"class":492},[471,4849,496],{"class":484},[471,4851,499],{"class":484},[471,4853,1636],{"class":502},[471,4855,499],{"class":484},[471,4857,1641],{"class":492},[471,4859,496],{"class":484},[471,4861,499],{"class":484},[471,4863,1648],{"class":502},[471,4865,499],{"class":484},[471,4867,508],{"class":484},[471,4869,4870,4872,4874,4876,4878,4880,4882,4884,4886,4888,4890,4892,4894,4896,4898,4900,4902,4904,4906,4908,4910,4913,4915],{"class":473,"line":2260},[471,4871,1836],{"class":484},[471,4873,1660],{"class":488},[471,4875,1663],{"class":492},[471,4877,496],{"class":484},[471,4879,499],{"class":484},[471,4881,1670],{"class":502},[471,4883,499],{"class":484},[471,4885,1675],{"class":492},[471,4887,496],{"class":484},[471,4889,499],{"class":484},[471,4891,1670],{"class":502},[471,4893,499],{"class":484},[471,4895,1686],{"class":492},[471,4897,496],{"class":484},[471,4899,499],{"class":484},[471,4901,1693],{"class":502},[471,4903,499],{"class":484},[471,4905,1698],{"class":492},[471,4907,496],{"class":484},[471,4909,499],{"class":484},[471,4911,4912],{"class":502},"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",[471,4914,499],{"class":484},[471,4916,560],{"class":484},[471,4918,4919,4921,4923],{"class":473,"line":2266},[471,4920,1886],{"class":484},[471,4922,928],{"class":488},[471,4924,508],{"class":484},[471,4926,4927,4929,4931],{"class":473,"line":2272},[471,4928,1714],{"class":484},[471,4930,725],{"class":488},[471,4932,508],{"class":484},[471,4934,4935],{"class":473,"line":2278},[471,4936,532],{"emptyLinePlaceholder":531},[471,4938,4939,4941,4943],{"class":473,"line":2287},[471,4940,1584],{"class":484},[471,4942,725],{"class":488},[471,4944,508],{"class":484},[471,4946,4947,4949,4951,4953,4955,4957,4960,4962],{"class":473,"line":2293},[471,4948,1657],{"class":484},[471,4950,824],{"class":488},[471,4952,493],{"class":492},[471,4954,496],{"class":484},[471,4956,499],{"class":484},[471,4958,4959],{"class":502},"text-lg font-semibold text-gray-900 group-hover:text-purple-600 transition-colors",[471,4961,499],{"class":484},[471,4963,508],{"class":484},[471,4965,4966],{"class":473,"line":2302},[471,4967,4968],{"class":514},"            Tùy chỉnh linh hoạt\n",[471,4970,4971,4973,4975],{"class":473,"line":2311},[471,4972,1886],{"class":484},[471,4974,824],{"class":488},[471,4976,508],{"class":484},[471,4978,4979,4981,4983,4985,4987,4989,4991,4993],{"class":473,"line":2320},[471,4980,1657],{"class":484},[471,4982,453],{"class":488},[471,4984,493],{"class":492},[471,4986,496],{"class":484},[471,4988,499],{"class":484},[471,4990,4194],{"class":502},[471,4992,499],{"class":484},[471,4994,508],{"class":484},[471,4996,4997],{"class":473,"line":3630},[471,4998,4999],{"class":514},"            API mở, webhooks, và 200+ integration sẵn có để kết nối với stack của bạn.\n",[471,5001,5002,5004,5006],{"class":473,"line":3638},[471,5003,1886],{"class":484},[471,5005,453],{"class":488},[471,5007,508],{"class":484},[471,5009,5010,5012,5014,5016,5018,5020],{"class":473,"line":3643},[471,5011,1657],{"class":484},[471,5013,471],{"class":488},[471,5015,493],{"class":492},[471,5017,496],{"class":484},[471,5019,499],{"class":484},[471,5021,5022],{"class":502},"inline-flex items-center gap-1 mt-3 text-sm font-medium text-purple-600\n",[471,5024,5025,5027,5029],{"class":473,"line":3663},[471,5026,4231],{"class":502},[471,5028,499],{"class":484},[471,5030,508],{"class":484},[471,5032,5033],{"class":473,"line":3708},[471,5034,4240],{"class":514},[471,5036,5037,5039,5041,5043,5045,5047,5049,5051,5053,5055,5057,5059,5061,5063,5065,5067,5069,5071,5073,5075,5077,5079,5081],{"class":473,"line":3746},[471,5038,1836],{"class":484},[471,5040,928],{"class":488},[471,5042,493],{"class":492},[471,5044,496],{"class":484},[471,5046,499],{"class":484},[471,5048,4255],{"class":502},[471,5050,499],{"class":484},[471,5052,1617],{"class":492},[471,5054,496],{"class":484},[471,5056,499],{"class":484},[471,5058,1624],{"class":502},[471,5060,499],{"class":484},[471,5062,1629],{"class":492},[471,5064,496],{"class":484},[471,5066,499],{"class":484},[471,5068,1636],{"class":502},[471,5070,499],{"class":484},[471,5072,1641],{"class":492},[471,5074,496],{"class":484},[471,5076,499],{"class":484},[471,5078,1648],{"class":502},[471,5080,499],{"class":484},[471,5082,508],{"class":484},[471,5084,5085,5087,5089,5091,5093,5095,5097,5099,5101,5103,5105,5107,5109,5111,5113,5115,5117,5119,5121,5123,5125,5127,5129],{"class":473,"line":3755},[471,5086,4294],{"class":484},[471,5088,1660],{"class":488},[471,5090,1663],{"class":492},[471,5092,496],{"class":484},[471,5094,499],{"class":484},[471,5096,1670],{"class":502},[471,5098,499],{"class":484},[471,5100,1675],{"class":492},[471,5102,496],{"class":484},[471,5104,499],{"class":484},[471,5106,1670],{"class":502},[471,5108,499],{"class":484},[471,5110,1686],{"class":492},[471,5112,496],{"class":484},[471,5114,499],{"class":484},[471,5116,1693],{"class":502},[471,5118,499],{"class":484},[471,5120,1698],{"class":492},[471,5122,496],{"class":484},[471,5124,499],{"class":484},[471,5126,4335],{"class":502},[471,5128,499],{"class":484},[471,5130,560],{"class":484},[471,5132,5133,5135,5137],{"class":473,"line":3764},[471,5134,4344],{"class":484},[471,5136,928],{"class":488},[471,5138,508],{"class":484},[471,5140,5141,5143,5145],{"class":473,"line":3769},[471,5142,1886],{"class":484},[471,5144,471],{"class":488},[471,5146,508],{"class":484},[471,5148,5149,5151,5153],{"class":473,"line":3777},[471,5150,1714],{"class":484},[471,5152,725],{"class":488},[471,5154,508],{"class":484},[471,5156,5157,5159,5161],{"class":473,"line":3792},[471,5158,1723],{"class":484},[471,5160,725],{"class":488},[471,5162,508],{"class":484},[471,5164,5165],{"class":473,"line":3805},[471,5166,532],{"emptyLinePlaceholder":531},[471,5168,5169,5171,5173,5175,5177,5179],{"class":473,"line":3811},[471,5170,1502],{"class":484},[471,5172,725],{"class":488},[471,5174,493],{"class":492},[471,5176,496],{"class":484},[471,5178,499],{"class":484},[471,5180,3984],{"class":502},[471,5182,5183,5186,5188],{"class":473,"line":3817},[471,5184,5185],{"class":502},"                  hover:border-amber-300 hover:shadow-md transition-all duration-300 cursor-pointer",[471,5187,499],{"class":484},[471,5189,508],{"class":484},[471,5191,5192,5194,5196,5198,5200,5202],{"class":473,"line":3823},[471,5193,1584],{"class":484},[471,5195,725],{"class":488},[471,5197,493],{"class":492},[471,5199,496],{"class":484},[471,5201,499],{"class":484},[471,5203,5204],{"class":502},"flex-shrink-0 w-12 h-12 bg-amber-50 rounded-xl flex items-center justify-center\n",[471,5206,5207,5210,5212],{"class":473,"line":3829},[471,5208,5209],{"class":502},"                    group-hover:bg-amber-100 group-hover:scale-110 transition-all duration-300",[471,5211,499],{"class":484},[471,5213,508],{"class":484},[471,5215,5216,5218,5220,5222,5224,5226,5229,5231,5233,5235,5237,5239,5241,5243,5245,5247,5249,5251,5253,5255,5257,5259,5261],{"class":473,"line":3839},[471,5217,1657],{"class":484},[471,5219,928],{"class":488},[471,5221,493],{"class":492},[471,5223,496],{"class":484},[471,5225,499],{"class":484},[471,5227,5228],{"class":502},"w-6 h-6 text-amber-600 group-hover:text-amber-700 transition-colors",[471,5230,499],{"class":484},[471,5232,1617],{"class":492},[471,5234,496],{"class":484},[471,5236,499],{"class":484},[471,5238,1624],{"class":502},[471,5240,499],{"class":484},[471,5242,1629],{"class":492},[471,5244,496],{"class":484},[471,5246,499],{"class":484},[471,5248,1636],{"class":502},[471,5250,499],{"class":484},[471,5252,1641],{"class":492},[471,5254,496],{"class":484},[471,5256,499],{"class":484},[471,5258,1648],{"class":502},[471,5260,499],{"class":484},[471,5262,508],{"class":484},[471,5264,5265,5267,5269,5271,5273,5275,5277,5279,5281,5283,5285,5287,5289,5291,5293,5295,5297,5299,5301,5303,5305,5308,5310],{"class":473,"line":3845},[471,5266,1836],{"class":484},[471,5268,1660],{"class":488},[471,5270,1663],{"class":492},[471,5272,496],{"class":484},[471,5274,499],{"class":484},[471,5276,1670],{"class":502},[471,5278,499],{"class":484},[471,5280,1675],{"class":492},[471,5282,496],{"class":484},[471,5284,499],{"class":484},[471,5286,1670],{"class":502},[471,5288,499],{"class":484},[471,5290,1686],{"class":492},[471,5292,496],{"class":484},[471,5294,499],{"class":484},[471,5296,1693],{"class":502},[471,5298,499],{"class":484},[471,5300,1698],{"class":492},[471,5302,496],{"class":484},[471,5304,499],{"class":484},[471,5306,5307],{"class":502},"M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z",[471,5309,499],{"class":484},[471,5311,560],{"class":484},[471,5313,5314,5316,5318],{"class":473,"line":3854},[471,5315,1886],{"class":484},[471,5317,928],{"class":488},[471,5319,508],{"class":484},[471,5321,5322,5324,5326],{"class":473,"line":3863},[471,5323,1714],{"class":484},[471,5325,725],{"class":488},[471,5327,508],{"class":484},[471,5329,5330],{"class":473,"line":3872},[471,5331,532],{"emptyLinePlaceholder":531},[471,5333,5335,5337,5339],{"class":473,"line":5334},94,[471,5336,1584],{"class":484},[471,5338,725],{"class":488},[471,5340,508],{"class":484},[471,5342,5344,5346,5348,5350,5352,5354,5357,5359],{"class":473,"line":5343},95,[471,5345,1657],{"class":484},[471,5347,824],{"class":488},[471,5349,493],{"class":492},[471,5351,496],{"class":484},[471,5353,499],{"class":484},[471,5355,5356],{"class":502},"text-lg font-semibold text-gray-900 group-hover:text-amber-600 transition-colors",[471,5358,499],{"class":484},[471,5360,508],{"class":484},[471,5362,5364],{"class":473,"line":5363},96,[471,5365,5366],{"class":514},"            Hỗ trợ 24\u002F7\n",[471,5368,5370,5372,5374],{"class":473,"line":5369},97,[471,5371,1886],{"class":484},[471,5373,824],{"class":488},[471,5375,508],{"class":484},[471,5377,5379,5381,5383,5385,5387,5389,5391,5393],{"class":473,"line":5378},98,[471,5380,1657],{"class":484},[471,5382,453],{"class":488},[471,5384,493],{"class":492},[471,5386,496],{"class":484},[471,5388,499],{"class":484},[471,5390,4194],{"class":502},[471,5392,499],{"class":484},[471,5394,508],{"class":484},[471,5396,5398],{"class":473,"line":5397},99,[471,5399,5400],{"class":514},"            Đội ngũ support qua chat, email, và phone — thời gian phản hồi trung bình dưới 5 phút.\n",[471,5402,5404,5406,5408],{"class":473,"line":5403},100,[471,5405,1886],{"class":484},[471,5407,453],{"class":488},[471,5409,508],{"class":484},[471,5411,5413,5415,5417,5419,5421,5423],{"class":473,"line":5412},101,[471,5414,1657],{"class":484},[471,5416,471],{"class":488},[471,5418,493],{"class":492},[471,5420,496],{"class":484},[471,5422,499],{"class":484},[471,5424,5425],{"class":502},"inline-flex items-center gap-1 mt-3 text-sm font-medium text-amber-600\n",[471,5427,5429,5431,5433],{"class":473,"line":5428},102,[471,5430,4231],{"class":502},[471,5432,499],{"class":484},[471,5434,508],{"class":484},[471,5436,5438],{"class":473,"line":5437},103,[471,5439,4240],{"class":514},[471,5441,5443,5445,5447,5449,5451,5453,5455,5457,5459,5461,5463,5465,5467,5469,5471,5473,5475,5477,5479,5481,5483,5485,5487],{"class":473,"line":5442},104,[471,5444,1836],{"class":484},[471,5446,928],{"class":488},[471,5448,493],{"class":492},[471,5450,496],{"class":484},[471,5452,499],{"class":484},[471,5454,4255],{"class":502},[471,5456,499],{"class":484},[471,5458,1617],{"class":492},[471,5460,496],{"class":484},[471,5462,499],{"class":484},[471,5464,1624],{"class":502},[471,5466,499],{"class":484},[471,5468,1629],{"class":492},[471,5470,496],{"class":484},[471,5472,499],{"class":484},[471,5474,1636],{"class":502},[471,5476,499],{"class":484},[471,5478,1641],{"class":492},[471,5480,496],{"class":484},[471,5482,499],{"class":484},[471,5484,1648],{"class":502},[471,5486,499],{"class":484},[471,5488,508],{"class":484},[471,5490,5492,5494,5496,5498,5500,5502,5504,5506,5508,5510,5512,5514,5516,5518,5520,5522,5524,5526,5528,5530,5532,5534,5536],{"class":473,"line":5491},105,[471,5493,4294],{"class":484},[471,5495,1660],{"class":488},[471,5497,1663],{"class":492},[471,5499,496],{"class":484},[471,5501,499],{"class":484},[471,5503,1670],{"class":502},[471,5505,499],{"class":484},[471,5507,1675],{"class":492},[471,5509,496],{"class":484},[471,5511,499],{"class":484},[471,5513,1670],{"class":502},[471,5515,499],{"class":484},[471,5517,1686],{"class":492},[471,5519,496],{"class":484},[471,5521,499],{"class":484},[471,5523,1693],{"class":502},[471,5525,499],{"class":484},[471,5527,1698],{"class":492},[471,5529,496],{"class":484},[471,5531,499],{"class":484},[471,5533,4335],{"class":502},[471,5535,499],{"class":484},[471,5537,560],{"class":484},[471,5539,5541,5543,5545],{"class":473,"line":5540},106,[471,5542,4344],{"class":484},[471,5544,928],{"class":488},[471,5546,508],{"class":484},[471,5548,5550,5552,5554],{"class":473,"line":5549},107,[471,5551,1886],{"class":484},[471,5553,471],{"class":488},[471,5555,508],{"class":484},[471,5557,5559,5561,5563],{"class":473,"line":5558},108,[471,5560,1714],{"class":484},[471,5562,725],{"class":488},[471,5564,508],{"class":484},[471,5566,5568,5570,5572],{"class":473,"line":5567},109,[471,5569,1723],{"class":484},[471,5571,725],{"class":488},[471,5573,508],{"class":484},[471,5575,5577,5579,5581],{"class":473,"line":5576},110,[471,5578,1914],{"class":484},[471,5580,725],{"class":488},[471,5582,508],{"class":484},[471,5584,5586,5588,5590],{"class":473,"line":5585},111,[471,5587,885],{"class":484},[471,5589,725],{"class":488},[471,5591,508],{"class":484},[471,5593,5595,5597,5599],{"class":473,"line":5594},112,[471,5596,521],{"class":484},[471,5598,1419],{"class":488},[471,5600,508],{"class":484},[5602,5603],"hr",{},[427,5605,5607,5608,435,5611,435,5614,435,5617,435,5620,451],{"id":5606},"_2-transitions-transition-transition-all-transition-colors-transition-opacity-transition-transform","2. Transitions (",[432,5609,5610],{},"transition",[432,5612,5613],{},"transition-all",[432,5615,5616],{},"transition-colors",[432,5618,5619],{},"transition-opacity",[432,5621,5622],{},"transition-transform",[453,5624,5625],{},"Transitions giúp thay đổi CSS diễn ra mượt mà thay vì đột ngột.",[462,5627,5629],{"className":464,"code":5628,"language":466,"meta":467,"style":467},"\u003C!-- transition-all: animate mọi property thay đổi -->\n\u003Cbutton class=\"bg-blue-500 hover:bg-blue-600 transition-all duration-300\">\n  Mượt mà mọi thứ\n\u003C\u002Fbutton>\n\n\u003C!-- transition-colors: chỉ animate color (hiệu năng tốt hơn) -->\n\u003Cbutton class=\"bg-blue-500 hover:bg-blue-600 text-white hover:text-blue-100 transition-colors duration-200\">\n  Chỉ animate màu\n\u003C\u002Fbutton>\n\n\u003C!-- transition-opacity: animate opacity -->\n\u003Cdiv class=\"opacity-0 hover:opacity-100 transition-opacity duration-300\">\n  Fade in\n\u003C\u002Fdiv>\n\n\u003C!-- transition-transform: animate transform -->\n\u003Cdiv class=\"hover:scale-110 transition-transform duration-300\">\n  Phóng to mượt\n\u003C\u002Fdiv>\n",[432,5630,5631,5636,5655,5660,5668,5672,5677,5696,5701,5709,5713,5718,5737,5742,5750,5754,5759,5778,5783],{"__ignoreMap":467},[471,5632,5633],{"class":473,"line":474},[471,5634,5635],{"class":477},"\u003C!-- transition-all: animate mọi property thay đổi -->\n",[471,5637,5638,5640,5642,5644,5646,5648,5651,5653],{"class":473,"line":481},[471,5639,485],{"class":484},[471,5641,489],{"class":488},[471,5643,493],{"class":492},[471,5645,496],{"class":484},[471,5647,499],{"class":484},[471,5649,5650],{"class":502},"bg-blue-500 hover:bg-blue-600 transition-all duration-300",[471,5652,499],{"class":484},[471,5654,508],{"class":484},[471,5656,5657],{"class":473,"line":511},[471,5658,5659],{"class":514},"  Mượt mà mọi thứ\n",[471,5661,5662,5664,5666],{"class":473,"line":518},[471,5663,521],{"class":484},[471,5665,489],{"class":488},[471,5667,508],{"class":484},[471,5669,5670],{"class":473,"line":528},[471,5671,532],{"emptyLinePlaceholder":531},[471,5673,5674],{"class":473,"line":535},[471,5675,5676],{"class":477},"\u003C!-- transition-colors: chỉ animate color (hiệu năng tốt hơn) -->\n",[471,5678,5679,5681,5683,5685,5687,5689,5692,5694],{"class":473,"line":541},[471,5680,485],{"class":484},[471,5682,489],{"class":488},[471,5684,493],{"class":492},[471,5686,496],{"class":484},[471,5688,499],{"class":484},[471,5690,5691],{"class":502},"bg-blue-500 hover:bg-blue-600 text-white hover:text-blue-100 transition-colors duration-200",[471,5693,499],{"class":484},[471,5695,508],{"class":484},[471,5697,5698],{"class":473,"line":563},[471,5699,5700],{"class":514},"  Chỉ animate màu\n",[471,5702,5703,5705,5707],{"class":473,"line":568},[471,5704,521],{"class":484},[471,5706,489],{"class":488},[471,5708,508],{"class":484},[471,5710,5711],{"class":473,"line":574},[471,5712,532],{"emptyLinePlaceholder":531},[471,5714,5715],{"class":473,"line":594},[471,5716,5717],{"class":477},"\u003C!-- transition-opacity: animate opacity -->\n",[471,5719,5720,5722,5724,5726,5728,5730,5733,5735],{"class":473,"line":600},[471,5721,485],{"class":484},[471,5723,725],{"class":488},[471,5725,493],{"class":492},[471,5727,496],{"class":484},[471,5729,499],{"class":484},[471,5731,5732],{"class":502},"opacity-0 hover:opacity-100 transition-opacity duration-300",[471,5734,499],{"class":484},[471,5736,508],{"class":484},[471,5738,5739],{"class":473,"line":609},[471,5740,5741],{"class":514},"  Fade in\n",[471,5743,5744,5746,5748],{"class":473,"line":614},[471,5745,521],{"class":484},[471,5747,725],{"class":488},[471,5749,508],{"class":484},[471,5751,5752],{"class":473,"line":620},[471,5753,532],{"emptyLinePlaceholder":531},[471,5755,5756],{"class":473,"line":663},[471,5757,5758],{"class":477},"\u003C!-- transition-transform: animate transform -->\n",[471,5760,5761,5763,5765,5767,5769,5771,5774,5776],{"class":473,"line":668},[471,5762,485],{"class":484},[471,5764,725],{"class":488},[471,5766,493],{"class":492},[471,5768,496],{"class":484},[471,5770,499],{"class":484},[471,5772,5773],{"class":502},"hover:scale-110 transition-transform duration-300",[471,5775,499],{"class":484},[471,5777,508],{"class":484},[471,5779,5780],{"class":473,"line":674},[471,5781,5782],{"class":514},"  Phóng to mượt\n",[471,5784,5785,5787,5789],{"class":473,"line":694},[471,5786,521],{"class":484},[471,5788,725],{"class":488},[471,5790,508],{"class":484},[824,5792,5794],{"id":5793},"duration-easing-delay","Duration, Easing, Delay",[462,5796,5798],{"className":464,"code":5797,"language":466,"meta":467,"style":467},"\u003C!-- duration: kiểm soát thời gian transition -->\n\u003Cdiv class=\"transition-all duration-75\">75ms — gần như tức thì\u003C\u002Fdiv>\n\u003Cdiv class=\"transition-all duration-150\">150ms — nhanh, cho micro-interaction\u003C\u002Fdiv>\n\u003Cdiv class=\"transition-all duration-300\">300ms — tiêu chuẩn cho hover\u003C\u002Fdiv>\n\u003Cdiv class=\"transition-all duration-500\">500ms — chậm, cho animation lớn\u003C\u002Fdiv>\n\u003Cdiv class=\"transition-all duration-700\">700ms — rất chậm\u003C\u002Fdiv>\n\u003Cdiv class=\"transition-all duration-1000\">1000ms — 1 giây\u003C\u002Fdiv>\n\n\u003C!-- ease: kiểm soát acceleration curve -->\n\u003Cdiv class=\"transition-all duration-300 ease-linear\">Tốc độ đều\u003C\u002Fdiv>\n\u003Cdiv class=\"transition-all duration-300 ease-in\">Bắt đầu chậm\u003C\u002Fdiv>\n\u003Cdiv class=\"transition-all duration-300 ease-out\">Kết thúc chậm\u003C\u002Fdiv>\n\u003Cdiv class=\"transition-all duration-300 ease-in-out\">Chậm ở 2 đầu (phổ biến nhất)\u003C\u002Fdiv>\n\n\u003C!-- delay: trễ trước khi bắt đầu transition -->\n\u003Cdiv class=\"hover:scale-110 transition-transform duration-300 delay-100\">\n  Delay 100ms trước khi phóng to\n\u003C\u002Fdiv>\n",[432,5799,5800,5805,5833,5861,5889,5917,5945,5973,5977,5982,6010,6038,6066,6094,6098,6103,6122,6127],{"__ignoreMap":467},[471,5801,5802],{"class":473,"line":474},[471,5803,5804],{"class":477},"\u003C!-- duration: kiểm soát thời gian transition -->\n",[471,5806,5807,5809,5811,5813,5815,5817,5820,5822,5824,5827,5829,5831],{"class":473,"line":481},[471,5808,485],{"class":484},[471,5810,725],{"class":488},[471,5812,493],{"class":492},[471,5814,496],{"class":484},[471,5816,499],{"class":484},[471,5818,5819],{"class":502},"transition-all duration-75",[471,5821,499],{"class":484},[471,5823,651],{"class":484},[471,5825,5826],{"class":514},"75ms — gần như tức thì",[471,5828,521],{"class":484},[471,5830,725],{"class":488},[471,5832,508],{"class":484},[471,5834,5835,5837,5839,5841,5843,5845,5848,5850,5852,5855,5857,5859],{"class":473,"line":511},[471,5836,485],{"class":484},[471,5838,725],{"class":488},[471,5840,493],{"class":492},[471,5842,496],{"class":484},[471,5844,499],{"class":484},[471,5846,5847],{"class":502},"transition-all duration-150",[471,5849,499],{"class":484},[471,5851,651],{"class":484},[471,5853,5854],{"class":514},"150ms — nhanh, cho micro-interaction",[471,5856,521],{"class":484},[471,5858,725],{"class":488},[471,5860,508],{"class":484},[471,5862,5863,5865,5867,5869,5871,5873,5876,5878,5880,5883,5885,5887],{"class":473,"line":518},[471,5864,485],{"class":484},[471,5866,725],{"class":488},[471,5868,493],{"class":492},[471,5870,496],{"class":484},[471,5872,499],{"class":484},[471,5874,5875],{"class":502},"transition-all duration-300",[471,5877,499],{"class":484},[471,5879,651],{"class":484},[471,5881,5882],{"class":514},"300ms — tiêu chuẩn cho hover",[471,5884,521],{"class":484},[471,5886,725],{"class":488},[471,5888,508],{"class":484},[471,5890,5891,5893,5895,5897,5899,5901,5904,5906,5908,5911,5913,5915],{"class":473,"line":528},[471,5892,485],{"class":484},[471,5894,725],{"class":488},[471,5896,493],{"class":492},[471,5898,496],{"class":484},[471,5900,499],{"class":484},[471,5902,5903],{"class":502},"transition-all duration-500",[471,5905,499],{"class":484},[471,5907,651],{"class":484},[471,5909,5910],{"class":514},"500ms — chậm, cho animation lớn",[471,5912,521],{"class":484},[471,5914,725],{"class":488},[471,5916,508],{"class":484},[471,5918,5919,5921,5923,5925,5927,5929,5932,5934,5936,5939,5941,5943],{"class":473,"line":535},[471,5920,485],{"class":484},[471,5922,725],{"class":488},[471,5924,493],{"class":492},[471,5926,496],{"class":484},[471,5928,499],{"class":484},[471,5930,5931],{"class":502},"transition-all duration-700",[471,5933,499],{"class":484},[471,5935,651],{"class":484},[471,5937,5938],{"class":514},"700ms — rất chậm",[471,5940,521],{"class":484},[471,5942,725],{"class":488},[471,5944,508],{"class":484},[471,5946,5947,5949,5951,5953,5955,5957,5960,5962,5964,5967,5969,5971],{"class":473,"line":541},[471,5948,485],{"class":484},[471,5950,725],{"class":488},[471,5952,493],{"class":492},[471,5954,496],{"class":484},[471,5956,499],{"class":484},[471,5958,5959],{"class":502},"transition-all duration-1000",[471,5961,499],{"class":484},[471,5963,651],{"class":484},[471,5965,5966],{"class":514},"1000ms — 1 giây",[471,5968,521],{"class":484},[471,5970,725],{"class":488},[471,5972,508],{"class":484},[471,5974,5975],{"class":473,"line":563},[471,5976,532],{"emptyLinePlaceholder":531},[471,5978,5979],{"class":473,"line":568},[471,5980,5981],{"class":477},"\u003C!-- ease: kiểm soát acceleration curve -->\n",[471,5983,5984,5986,5988,5990,5992,5994,5997,5999,6001,6004,6006,6008],{"class":473,"line":574},[471,5985,485],{"class":484},[471,5987,725],{"class":488},[471,5989,493],{"class":492},[471,5991,496],{"class":484},[471,5993,499],{"class":484},[471,5995,5996],{"class":502},"transition-all duration-300 ease-linear",[471,5998,499],{"class":484},[471,6000,651],{"class":484},[471,6002,6003],{"class":514},"Tốc độ đều",[471,6005,521],{"class":484},[471,6007,725],{"class":488},[471,6009,508],{"class":484},[471,6011,6012,6014,6016,6018,6020,6022,6025,6027,6029,6032,6034,6036],{"class":473,"line":594},[471,6013,485],{"class":484},[471,6015,725],{"class":488},[471,6017,493],{"class":492},[471,6019,496],{"class":484},[471,6021,499],{"class":484},[471,6023,6024],{"class":502},"transition-all duration-300 ease-in",[471,6026,499],{"class":484},[471,6028,651],{"class":484},[471,6030,6031],{"class":514},"Bắt đầu chậm",[471,6033,521],{"class":484},[471,6035,725],{"class":488},[471,6037,508],{"class":484},[471,6039,6040,6042,6044,6046,6048,6050,6053,6055,6057,6060,6062,6064],{"class":473,"line":600},[471,6041,485],{"class":484},[471,6043,725],{"class":488},[471,6045,493],{"class":492},[471,6047,496],{"class":484},[471,6049,499],{"class":484},[471,6051,6052],{"class":502},"transition-all duration-300 ease-out",[471,6054,499],{"class":484},[471,6056,651],{"class":484},[471,6058,6059],{"class":514},"Kết thúc chậm",[471,6061,521],{"class":484},[471,6063,725],{"class":488},[471,6065,508],{"class":484},[471,6067,6068,6070,6072,6074,6076,6078,6081,6083,6085,6088,6090,6092],{"class":473,"line":609},[471,6069,485],{"class":484},[471,6071,725],{"class":488},[471,6073,493],{"class":492},[471,6075,496],{"class":484},[471,6077,499],{"class":484},[471,6079,6080],{"class":502},"transition-all duration-300 ease-in-out",[471,6082,499],{"class":484},[471,6084,651],{"class":484},[471,6086,6087],{"class":514},"Chậm ở 2 đầu (phổ biến nhất)",[471,6089,521],{"class":484},[471,6091,725],{"class":488},[471,6093,508],{"class":484},[471,6095,6096],{"class":473,"line":614},[471,6097,532],{"emptyLinePlaceholder":531},[471,6099,6100],{"class":473,"line":620},[471,6101,6102],{"class":477},"\u003C!-- delay: trễ trước khi bắt đầu transition -->\n",[471,6104,6105,6107,6109,6111,6113,6115,6118,6120],{"class":473,"line":663},[471,6106,485],{"class":484},[471,6108,725],{"class":488},[471,6110,493],{"class":492},[471,6112,496],{"class":484},[471,6114,499],{"class":484},[471,6116,6117],{"class":502},"hover:scale-110 transition-transform duration-300 delay-100",[471,6119,499],{"class":484},[471,6121,508],{"class":484},[471,6123,6124],{"class":473,"line":668},[471,6125,6126],{"class":514},"  Delay 100ms trước khi phóng to\n",[471,6128,6129,6131,6133],{"class":473,"line":674},[471,6130,521],{"class":484},[471,6132,725],{"class":488},[471,6134,508],{"class":484},[1230,6136,6139,6142,6143,435,6145,435,6147,6149,6150,6152],{"color":6137,"icon":6138},"primary","i-lucide-info",[457,6140,6141],{},"Pro tip:"," Luôn dùng transition cụ thể (",[432,6144,5616],{},[432,6146,5619],{},[432,6148,5622],{},") thay vì ",[432,6151,5613],{}," để có performance tốt hơn — browser chỉ phải tính toán property thay đổi.",[824,6154,6156],{"id":6155},"transition-behavior-v40-new","transition-behavior (v4.0 NEW)",[462,6158,6160],{"className":464,"code":6159,"language":466,"meta":467,"style":467},"\u003C!-- transition-behavior: kiểm soát transition khi element đang có animation khác -->\n\u003Cdiv class=\"transition-all duration-300 transition-behavior-normal\">\n  Normal behavior\n\u003C\u002Fdiv>\n\u003Cdiv class=\"transition-all duration-300 transition-behavior-allow-discrete\">\n  Cho phép transition discrete properties (như display: none \u003C-> block)\n\u003C\u002Fdiv>\n",[432,6161,6162,6167,6186,6191,6199,6218,6223],{"__ignoreMap":467},[471,6163,6164],{"class":473,"line":474},[471,6165,6166],{"class":477},"\u003C!-- transition-behavior: kiểm soát transition khi element đang có animation khác -->\n",[471,6168,6169,6171,6173,6175,6177,6179,6182,6184],{"class":473,"line":481},[471,6170,485],{"class":484},[471,6172,725],{"class":488},[471,6174,493],{"class":492},[471,6176,496],{"class":484},[471,6178,499],{"class":484},[471,6180,6181],{"class":502},"transition-all duration-300 transition-behavior-normal",[471,6183,499],{"class":484},[471,6185,508],{"class":484},[471,6187,6188],{"class":473,"line":511},[471,6189,6190],{"class":514},"  Normal behavior\n",[471,6192,6193,6195,6197],{"class":473,"line":518},[471,6194,521],{"class":484},[471,6196,725],{"class":488},[471,6198,508],{"class":484},[471,6200,6201,6203,6205,6207,6209,6211,6214,6216],{"class":473,"line":528},[471,6202,485],{"class":484},[471,6204,725],{"class":488},[471,6206,493],{"class":492},[471,6208,496],{"class":484},[471,6210,499],{"class":484},[471,6212,6213],{"class":502},"transition-all duration-300 transition-behavior-allow-discrete",[471,6215,499],{"class":484},[471,6217,508],{"class":484},[471,6219,6220],{"class":473,"line":535},[471,6221,6222],{"class":514},"  Cho phép transition discrete properties (như display: none \u003C-> block)\n",[471,6224,6225,6227,6229],{"class":473,"line":541},[471,6226,521],{"class":484},[471,6228,725],{"class":488},[471,6230,508],{"class":484},[824,6232,6234],{"id":6233},"bài-tập-5-smooth-button-hover-color-transition","Bài tập 5: Smooth button hover color transition",[453,6236,6237,6239],{},[457,6238,1404],{}," Các button với hiệu ứng chuyển màu mượt, mỗi button có duration và easing khác nhau.",[462,6241,6243],{"className":1408,"code":6242,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-2xl mx-auto p-8 space-y-6\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-6\">Button Transition Gallery\u003C\u002Fh2>\n\n    \u003C!-- Fast transition: 150ms -->\n    \u003Cdiv>\n      \u003Cp class=\"text-xs text-gray-400 mb-2\">duration-150 ease-in-out (Fast — micro-interaction)\u003C\u002Fp>\n      \u003Cbutton class=\"px-6 py-2.5 bg-indigo-600 text-white font-semibold rounded-lg\n                     hover:bg-indigo-700 hover:shadow-md\n                     transition-colors duration-150 ease-in-out\">\n        Hover me (150ms)\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Standard transition: 300ms -->\n    \u003Cdiv>\n      \u003Cp class=\"text-xs text-gray-400 mb-2\">duration-300 ease-out (Standard — UI hover)\u003C\u002Fp>\n      \u003Cbutton class=\"px-6 py-2.5 bg-emerald-600 text-white font-semibold rounded-lg\n                     hover:bg-emerald-700 hover:shadow-lg hover:-translate-y-0.5\n                     transition-all duration-300 ease-out\">\n        Hover me (300ms)\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Slow transition: 500ms -->\n    \u003Cdiv>\n      \u003Cp class=\"text-xs text-gray-400 mb-2\">duration-500 ease-in-out (Slow — dramatic effect)\u003C\u002Fp>\n      \u003Cbutton class=\"px-6 py-2.5 bg-purple-600 text-white font-semibold rounded-lg\n                     hover:bg-purple-700 hover:rounded-2xl hover:shadow-xl\n                     transition-all duration-500 ease-in-out\">\n        Hover me (500ms)\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Transition with delay -->\n    \u003Cdiv>\n      \u003Cp class=\"text-xs text-gray-400 mb-2\">duration-300 delay-100 (có độ trễ trước khi transition)\u003C\u002Fp>\n      \u003Cbutton class=\"px-6 py-2.5 border-2 border-rose-500 text-rose-500 font-semibold rounded-lg\n                     hover:bg-rose-500 hover:text-white\n                     transition-all duration-300 delay-100 ease-out\">\n        Hover me (delay 100ms)\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Spring-like with custom cubic-bezier concept -->\n    \u003Cdiv>\n      \u003Cp class=\"text-xs text-gray-400 mb-2\">duration-200 + hover:scale-105 (scale effect)\u003C\u002Fp>\n      \u003Cbutton class=\"px-6 py-2.5 bg-amber-500 text-white font-semibold rounded-full\n                     hover:bg-amber-600 hover:scale-105\n                     transition-all duration-200 ease-out\n                     active:scale-95\">\n        Scale on hover\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,6244,6245,6253,6272,6299,6303,6308,6316,6344,6359,6364,6373,6378,6386,6394,6398,6403,6411,6438,6453,6458,6467,6472,6480,6488,6492,6497,6505,6532,6547,6552,6561,6566,6574,6582,6586,6591,6599,6626,6641,6646,6655,6660,6668,6676,6680,6685,6693,6720,6735,6740,6745,6754,6759,6767,6775,6783],{"__ignoreMap":467},[471,6246,6247,6249,6251],{"class":473,"line":474},[471,6248,485],{"class":484},[471,6250,1419],{"class":488},[471,6252,508],{"class":484},[471,6254,6255,6257,6259,6261,6263,6265,6268,6270],{"class":473,"line":481},[471,6256,744],{"class":484},[471,6258,725],{"class":488},[471,6260,493],{"class":492},[471,6262,496],{"class":484},[471,6264,499],{"class":484},[471,6266,6267],{"class":502},"max-w-2xl mx-auto p-8 space-y-6",[471,6269,499],{"class":484},[471,6271,508],{"class":484},[471,6273,6274,6276,6278,6280,6282,6284,6286,6288,6290,6293,6295,6297],{"class":473,"line":511},[471,6275,1445],{"class":484},[471,6277,427],{"class":488},[471,6279,493],{"class":492},[471,6281,496],{"class":484},[471,6283,499],{"class":484},[471,6285,1456],{"class":502},[471,6287,499],{"class":484},[471,6289,651],{"class":484},[471,6291,6292],{"class":514},"Button Transition Gallery",[471,6294,521],{"class":484},[471,6296,427],{"class":488},[471,6298,508],{"class":484},[471,6300,6301],{"class":473,"line":518},[471,6302,532],{"emptyLinePlaceholder":531},[471,6304,6305],{"class":473,"line":528},[471,6306,6307],{"class":477},"    \u003C!-- Fast transition: 150ms -->\n",[471,6309,6310,6312,6314],{"class":473,"line":535},[471,6311,1445],{"class":484},[471,6313,725],{"class":488},[471,6315,508],{"class":484},[471,6317,6318,6320,6322,6324,6326,6328,6331,6333,6335,6338,6340,6342],{"class":473,"line":541},[471,6319,1502],{"class":484},[471,6321,453],{"class":488},[471,6323,493],{"class":492},[471,6325,496],{"class":484},[471,6327,499],{"class":484},[471,6329,6330],{"class":502},"text-xs text-gray-400 mb-2",[471,6332,499],{"class":484},[471,6334,651],{"class":484},[471,6336,6337],{"class":514},"duration-150 ease-in-out (Fast — micro-interaction)",[471,6339,521],{"class":484},[471,6341,453],{"class":488},[471,6343,508],{"class":484},[471,6345,6346,6348,6350,6352,6354,6356],{"class":473,"line":563},[471,6347,1502],{"class":484},[471,6349,489],{"class":488},[471,6351,493],{"class":492},[471,6353,496],{"class":484},[471,6355,499],{"class":484},[471,6357,6358],{"class":502},"px-6 py-2.5 bg-indigo-600 text-white font-semibold rounded-lg\n",[471,6360,6361],{"class":473,"line":568},[471,6362,6363],{"class":502},"                     hover:bg-indigo-700 hover:shadow-md\n",[471,6365,6366,6369,6371],{"class":473,"line":574},[471,6367,6368],{"class":502},"                     transition-colors duration-150 ease-in-out",[471,6370,499],{"class":484},[471,6372,508],{"class":484},[471,6374,6375],{"class":473,"line":594},[471,6376,6377],{"class":514},"        Hover me (150ms)\n",[471,6379,6380,6382,6384],{"class":473,"line":600},[471,6381,1723],{"class":484},[471,6383,489],{"class":488},[471,6385,508],{"class":484},[471,6387,6388,6390,6392],{"class":473,"line":609},[471,6389,1914],{"class":484},[471,6391,725],{"class":488},[471,6393,508],{"class":484},[471,6395,6396],{"class":473,"line":614},[471,6397,532],{"emptyLinePlaceholder":531},[471,6399,6400],{"class":473,"line":620},[471,6401,6402],{"class":477},"    \u003C!-- Standard transition: 300ms -->\n",[471,6404,6405,6407,6409],{"class":473,"line":663},[471,6406,1445],{"class":484},[471,6408,725],{"class":488},[471,6410,508],{"class":484},[471,6412,6413,6415,6417,6419,6421,6423,6425,6427,6429,6432,6434,6436],{"class":473,"line":668},[471,6414,1502],{"class":484},[471,6416,453],{"class":488},[471,6418,493],{"class":492},[471,6420,496],{"class":484},[471,6422,499],{"class":484},[471,6424,6330],{"class":502},[471,6426,499],{"class":484},[471,6428,651],{"class":484},[471,6430,6431],{"class":514},"duration-300 ease-out (Standard — UI hover)",[471,6433,521],{"class":484},[471,6435,453],{"class":488},[471,6437,508],{"class":484},[471,6439,6440,6442,6444,6446,6448,6450],{"class":473,"line":674},[471,6441,1502],{"class":484},[471,6443,489],{"class":488},[471,6445,493],{"class":492},[471,6447,496],{"class":484},[471,6449,499],{"class":484},[471,6451,6452],{"class":502},"px-6 py-2.5 bg-emerald-600 text-white font-semibold rounded-lg\n",[471,6454,6455],{"class":473,"line":694},[471,6456,6457],{"class":502},"                     hover:bg-emerald-700 hover:shadow-lg hover:-translate-y-0.5\n",[471,6459,6460,6463,6465],{"class":473,"line":700},[471,6461,6462],{"class":502},"                     transition-all duration-300 ease-out",[471,6464,499],{"class":484},[471,6466,508],{"class":484},[471,6468,6469],{"class":473,"line":709},[471,6470,6471],{"class":514},"        Hover me (300ms)\n",[471,6473,6474,6476,6478],{"class":473,"line":714},[471,6475,1723],{"class":484},[471,6477,489],{"class":488},[471,6479,508],{"class":484},[471,6481,6482,6484,6486],{"class":473,"line":720},[471,6483,1914],{"class":484},[471,6485,725],{"class":488},[471,6487,508],{"class":484},[471,6489,6490],{"class":473,"line":741},[471,6491,532],{"emptyLinePlaceholder":531},[471,6493,6494],{"class":473,"line":772},[471,6495,6496],{"class":477},"    \u003C!-- Slow transition: 500ms -->\n",[471,6498,6499,6501,6503],{"class":473,"line":816},[471,6500,1445],{"class":484},[471,6502,725],{"class":488},[471,6504,508],{"class":484},[471,6506,6507,6509,6511,6513,6515,6517,6519,6521,6523,6526,6528,6530],{"class":473,"line":1833},[471,6508,1502],{"class":484},[471,6510,453],{"class":488},[471,6512,493],{"class":492},[471,6514,496],{"class":484},[471,6516,499],{"class":484},[471,6518,6330],{"class":502},[471,6520,499],{"class":484},[471,6522,651],{"class":484},[471,6524,6525],{"class":514},"duration-500 ease-in-out (Slow — dramatic effect)",[471,6527,521],{"class":484},[471,6529,453],{"class":488},[471,6531,508],{"class":484},[471,6533,6534,6536,6538,6540,6542,6544],{"class":473,"line":1883},[471,6535,1502],{"class":484},[471,6537,489],{"class":488},[471,6539,493],{"class":492},[471,6541,496],{"class":484},[471,6543,499],{"class":484},[471,6545,6546],{"class":502},"px-6 py-2.5 bg-purple-600 text-white font-semibold rounded-lg\n",[471,6548,6549],{"class":473,"line":1893},[471,6550,6551],{"class":502},"                     hover:bg-purple-700 hover:rounded-2xl hover:shadow-xl\n",[471,6553,6554,6557,6559],{"class":473,"line":1902},[471,6555,6556],{"class":502},"                     transition-all duration-500 ease-in-out",[471,6558,499],{"class":484},[471,6560,508],{"class":484},[471,6562,6563],{"class":473,"line":1911},[471,6564,6565],{"class":514},"        Hover me (500ms)\n",[471,6567,6568,6570,6572],{"class":473,"line":1921},[471,6569,1723],{"class":484},[471,6571,489],{"class":488},[471,6573,508],{"class":484},[471,6575,6576,6578,6580],{"class":473,"line":1926},[471,6577,1914],{"class":484},[471,6579,725],{"class":488},[471,6581,508],{"class":484},[471,6583,6584],{"class":473,"line":1932},[471,6585,532],{"emptyLinePlaceholder":531},[471,6587,6588],{"class":473,"line":1951},[471,6589,6590],{"class":477},"    \u003C!-- Transition with delay -->\n",[471,6592,6593,6595,6597],{"class":473,"line":1979},[471,6594,1445],{"class":484},[471,6596,725],{"class":488},[471,6598,508],{"class":484},[471,6600,6601,6603,6605,6607,6609,6611,6613,6615,6617,6620,6622,6624],{"class":473,"line":1984},[471,6602,1502],{"class":484},[471,6604,453],{"class":488},[471,6606,493],{"class":492},[471,6608,496],{"class":484},[471,6610,499],{"class":484},[471,6612,6330],{"class":502},[471,6614,499],{"class":484},[471,6616,651],{"class":484},[471,6618,6619],{"class":514},"duration-300 delay-100 (có độ trễ trước khi transition)",[471,6621,521],{"class":484},[471,6623,453],{"class":488},[471,6625,508],{"class":484},[471,6627,6628,6630,6632,6634,6636,6638],{"class":473,"line":2000},[471,6629,1502],{"class":484},[471,6631,489],{"class":488},[471,6633,493],{"class":492},[471,6635,496],{"class":484},[471,6637,499],{"class":484},[471,6639,6640],{"class":502},"px-6 py-2.5 border-2 border-rose-500 text-rose-500 font-semibold rounded-lg\n",[471,6642,6643],{"class":473,"line":2006},[471,6644,6645],{"class":502},"                     hover:bg-rose-500 hover:text-white\n",[471,6647,6648,6651,6653],{"class":473,"line":2012},[471,6649,6650],{"class":502},"                     transition-all duration-300 delay-100 ease-out",[471,6652,499],{"class":484},[471,6654,508],{"class":484},[471,6656,6657],{"class":473,"line":2018},[471,6658,6659],{"class":514},"        Hover me (delay 100ms)\n",[471,6661,6662,6664,6666],{"class":473,"line":2027},[471,6663,1723],{"class":484},[471,6665,489],{"class":488},[471,6667,508],{"class":484},[471,6669,6670,6672,6674],{"class":473,"line":2033},[471,6671,1914],{"class":484},[471,6673,725],{"class":488},[471,6675,508],{"class":484},[471,6677,6678],{"class":473,"line":2042},[471,6679,532],{"emptyLinePlaceholder":531},[471,6681,6682],{"class":473,"line":2051},[471,6683,6684],{"class":477},"    \u003C!-- Spring-like with custom cubic-bezier concept -->\n",[471,6686,6687,6689,6691],{"class":473,"line":2056},[471,6688,1445],{"class":484},[471,6690,725],{"class":488},[471,6692,508],{"class":484},[471,6694,6695,6697,6699,6701,6703,6705,6707,6709,6711,6714,6716,6718],{"class":473,"line":2062},[471,6696,1502],{"class":484},[471,6698,453],{"class":488},[471,6700,493],{"class":492},[471,6702,496],{"class":484},[471,6704,499],{"class":484},[471,6706,6330],{"class":502},[471,6708,499],{"class":484},[471,6710,651],{"class":484},[471,6712,6713],{"class":514},"duration-200 + hover:scale-105 (scale effect)",[471,6715,521],{"class":484},[471,6717,453],{"class":488},[471,6719,508],{"class":484},[471,6721,6722,6724,6726,6728,6730,6732],{"class":473,"line":2081},[471,6723,1502],{"class":484},[471,6725,489],{"class":488},[471,6727,493],{"class":492},[471,6729,496],{"class":484},[471,6731,499],{"class":484},[471,6733,6734],{"class":502},"px-6 py-2.5 bg-amber-500 text-white font-semibold rounded-full\n",[471,6736,6737],{"class":473,"line":2109},[471,6738,6739],{"class":502},"                     hover:bg-amber-600 hover:scale-105\n",[471,6741,6742],{"class":473,"line":2114},[471,6743,6744],{"class":502},"                     transition-all duration-200 ease-out\n",[471,6746,6747,6750,6752],{"class":473,"line":2130},[471,6748,6749],{"class":502},"                     active:scale-95",[471,6751,499],{"class":484},[471,6753,508],{"class":484},[471,6755,6756],{"class":473,"line":2136},[471,6757,6758],{"class":514},"        Scale on hover\n",[471,6760,6761,6763,6765],{"class":473,"line":2142},[471,6762,1723],{"class":484},[471,6764,489],{"class":488},[471,6766,508],{"class":484},[471,6768,6769,6771,6773],{"class":473,"line":2148},[471,6770,1914],{"class":484},[471,6772,725],{"class":488},[471,6774,508],{"class":484},[471,6776,6777,6779,6781],{"class":473,"line":2157},[471,6778,885],{"class":484},[471,6780,725],{"class":488},[471,6782,508],{"class":484},[471,6784,6785,6787,6789],{"class":473,"line":2163},[471,6786,521],{"class":484},[471,6788,1419],{"class":488},[471,6790,508],{"class":484},[824,6792,6794],{"id":6793},"bài-tập-6-modal-fade-infade-out","Bài tập 6: Modal fade-in\u002Ffade-out",[453,6796,6797,6799],{},[457,6798,1404],{}," Modal với hiệu ứng fade-in khi mở + overlay mờ dần. Sử dụng transition-opacity.",[462,6801,6803],{"className":1408,"code":6802,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-lg mx-auto p-8\">\n    \u003C!-- Trigger button -->\n    \u003Cbutton\n      @click=\"isOpen = true\"\n      class=\"px-6 py-2.5 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors\">\n      Mở Modal\n    \u003C\u002Fbutton>\n\n    \u003C!-- Modal overlay + content -->\n    \u003Cdiv v-if=\"isOpen\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4\">\n      \u003C!-- Overlay — transition opacity -->\n      \u003Cdiv\n        class=\"absolute inset-0 bg-black\u002F50 transition-opacity duration-300\"\n        :class=\"showModal ? 'opacity-100' : 'opacity-0'\"\n        @click=\"closeModal\">\n      \u003C\u002Fdiv>\n\n      \u003C!-- Modal content — transition opacity + scale -->\n      \u003Cdiv\n        class=\"relative bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 transition-all duration-300\"\n        :class=\"showModal ? 'opacity-100 scale-100' : 'opacity-0 scale-95'\">\n        \u003Cdiv class=\"flex items-center justify-between mb-4\">\n          \u003Ch3 class=\"text-lg font-semibold text-gray-900\">Xác nhận xóa\u003C\u002Fh3>\n          \u003Cbutton\n            @click=\"closeModal\"\n            class=\"w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors\">\n            \u003Cspan class=\"text-gray-400 text-xl\">×\u003C\u002Fspan>\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n\n        \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n          Bạn có chắc chắn muốn xóa mục này? Hành động này không thể hoàn tác.\n        \u003C\u002Fp>\n\n        \u003Cdiv class=\"mt-6 flex gap-3 justify-end\">\n          \u003Cbutton\n            @click=\"closeModal\"\n            class=\"px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg\n                   hover:bg-gray-50 transition-colors\">\n            Hủy\n          \u003C\u002Fbutton>\n          \u003Cbutton\n            @click=\"confirmDelete\"\n            class=\"px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg\n                   hover:bg-red-700 transition-colors\">\n            Xóa\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, watch, nextTick } from 'vue'\n\nconst isOpen = ref(false)\nconst showModal = ref(false)\n\nfunction closeModal() {\n  showModal.value = false\n  setTimeout(() => {\n    isOpen.value = false\n  }, 300) \u002F\u002F khớp với duration-300\n}\n\nfunction confirmDelete() {\n  \u002F\u002F Xử lý xóa\n  closeModal()\n}\n\nwatch(isOpen, async (val) => {\n  if (val) {\n    await nextTick()\n    \u002F\u002F Trigger transition sau khi mount\n    requestAnimationFrame(() => {\n      showModal.value = true\n    })\n  }\n})\n\u003C\u002Fscript>\n",[432,6804,6805,6813,6832,6837,6843,6857,6873,6878,6886,6890,6895,6926,6931,6938,6951,6965,6981,6989,6993,6998,7004,7017,7032,7051,7079,7085,7098,7114,7142,7150,7158,7162,7181,7186,7194,7198,7217,7223,7235,7246,7255,7260,7268,7274,7287,7298,7307,7312,7320,7328,7336,7344,7352,7360,7364,7388,7425,7429,7452,7469,7473,7487,7503,7517,7530,7545,7550,7554,7565,7570,7578,7582,7586,7612,7626,7635,7640,7653,7667,7674,7679,7686],{"__ignoreMap":467},[471,6806,6807,6809,6811],{"class":473,"line":474},[471,6808,485],{"class":484},[471,6810,1419],{"class":488},[471,6812,508],{"class":484},[471,6814,6815,6817,6819,6821,6823,6825,6828,6830],{"class":473,"line":481},[471,6816,744],{"class":484},[471,6818,725],{"class":488},[471,6820,493],{"class":492},[471,6822,496],{"class":484},[471,6824,499],{"class":484},[471,6826,6827],{"class":502},"max-w-lg mx-auto p-8",[471,6829,499],{"class":484},[471,6831,508],{"class":484},[471,6833,6834],{"class":473,"line":511},[471,6835,6836],{"class":477},"    \u003C!-- Trigger button -->\n",[471,6838,6839,6841],{"class":473,"line":518},[471,6840,1445],{"class":484},[471,6842,3774],{"class":488},[471,6844,6845,6848,6850,6852,6855],{"class":473,"line":528},[471,6846,6847],{"class":492},"      @click",[471,6849,496],{"class":484},[471,6851,499],{"class":484},[471,6853,6854],{"class":502},"isOpen = true",[471,6856,2436],{"class":484},[471,6858,6859,6862,6864,6866,6869,6871],{"class":473,"line":535},[471,6860,6861],{"class":492},"      class",[471,6863,496],{"class":484},[471,6865,499],{"class":484},[471,6867,6868],{"class":502},"px-6 py-2.5 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors",[471,6870,499],{"class":484},[471,6872,508],{"class":484},[471,6874,6875],{"class":473,"line":541},[471,6876,6877],{"class":514},"      Mở Modal\n",[471,6879,6880,6882,6884],{"class":473,"line":563},[471,6881,1914],{"class":484},[471,6883,489],{"class":488},[471,6885,508],{"class":484},[471,6887,6888],{"class":473,"line":568},[471,6889,532],{"emptyLinePlaceholder":531},[471,6891,6892],{"class":473,"line":574},[471,6893,6894],{"class":477},"    \u003C!-- Modal overlay + content -->\n",[471,6896,6897,6899,6901,6904,6906,6908,6911,6913,6915,6917,6919,6922,6924],{"class":473,"line":594},[471,6898,1445],{"class":484},[471,6900,725],{"class":488},[471,6902,6903],{"class":492}," v-if",[471,6905,496],{"class":484},[471,6907,499],{"class":484},[471,6909,6910],{"class":502},"isOpen",[471,6912,499],{"class":484},[471,6914,493],{"class":492},[471,6916,496],{"class":484},[471,6918,499],{"class":484},[471,6920,6921],{"class":502},"fixed inset-0 z-50 flex items-center justify-center p-4",[471,6923,499],{"class":484},[471,6925,508],{"class":484},[471,6927,6928],{"class":473,"line":600},[471,6929,6930],{"class":477},"      \u003C!-- Overlay — transition opacity -->\n",[471,6932,6933,6935],{"class":473,"line":609},[471,6934,1502],{"class":484},[471,6936,6937],{"class":488},"div\n",[471,6939,6940,6942,6944,6946,6949],{"class":473,"line":614},[471,6941,3795],{"class":492},[471,6943,496],{"class":484},[471,6945,499],{"class":484},[471,6947,6948],{"class":502},"absolute inset-0 bg-black\u002F50 transition-opacity duration-300",[471,6950,2436],{"class":484},[471,6952,6953,6956,6958,6960,6963],{"class":473,"line":620},[471,6954,6955],{"class":492},"        :class",[471,6957,496],{"class":484},[471,6959,499],{"class":484},[471,6961,6962],{"class":502},"showModal ? 'opacity-100' : 'opacity-0'",[471,6964,2436],{"class":484},[471,6966,6967,6970,6972,6974,6977,6979],{"class":473,"line":663},[471,6968,6969],{"class":492},"        @click",[471,6971,496],{"class":484},[471,6973,499],{"class":484},[471,6975,6976],{"class":502},"closeModal",[471,6978,499],{"class":484},[471,6980,508],{"class":484},[471,6982,6983,6985,6987],{"class":473,"line":668},[471,6984,1723],{"class":484},[471,6986,725],{"class":488},[471,6988,508],{"class":484},[471,6990,6991],{"class":473,"line":674},[471,6992,532],{"emptyLinePlaceholder":531},[471,6994,6995],{"class":473,"line":694},[471,6996,6997],{"class":477},"      \u003C!-- Modal content — transition opacity + scale -->\n",[471,6999,7000,7002],{"class":473,"line":700},[471,7001,1502],{"class":484},[471,7003,6937],{"class":488},[471,7005,7006,7008,7010,7012,7015],{"class":473,"line":709},[471,7007,3795],{"class":492},[471,7009,496],{"class":484},[471,7011,499],{"class":484},[471,7013,7014],{"class":502},"relative bg-white rounded-2xl shadow-2xl max-w-md w-full p-6 transition-all duration-300",[471,7016,2436],{"class":484},[471,7018,7019,7021,7023,7025,7028,7030],{"class":473,"line":714},[471,7020,6955],{"class":492},[471,7022,496],{"class":484},[471,7024,499],{"class":484},[471,7026,7027],{"class":502},"showModal ? 'opacity-100 scale-100' : 'opacity-0 scale-95'",[471,7029,499],{"class":484},[471,7031,508],{"class":484},[471,7033,7034,7036,7038,7040,7042,7044,7047,7049],{"class":473,"line":720},[471,7035,1584],{"class":484},[471,7037,725],{"class":488},[471,7039,493],{"class":492},[471,7041,496],{"class":484},[471,7043,499],{"class":484},[471,7045,7046],{"class":502},"flex items-center justify-between mb-4",[471,7048,499],{"class":484},[471,7050,508],{"class":484},[471,7052,7053,7055,7057,7059,7061,7063,7066,7068,7070,7073,7075,7077],{"class":473,"line":741},[471,7054,1657],{"class":484},[471,7056,824],{"class":488},[471,7058,493],{"class":492},[471,7060,496],{"class":484},[471,7062,499],{"class":484},[471,7064,7065],{"class":502},"text-lg font-semibold text-gray-900",[471,7067,499],{"class":484},[471,7069,651],{"class":484},[471,7071,7072],{"class":514},"Xác nhận xóa",[471,7074,521],{"class":484},[471,7076,824],{"class":488},[471,7078,508],{"class":484},[471,7080,7081,7083],{"class":473,"line":772},[471,7082,1657],{"class":484},[471,7084,3774],{"class":488},[471,7086,7087,7090,7092,7094,7096],{"class":473,"line":816},[471,7088,7089],{"class":492},"            @click",[471,7091,496],{"class":484},[471,7093,499],{"class":484},[471,7095,6976],{"class":502},[471,7097,2436],{"class":484},[471,7099,7100,7103,7105,7107,7110,7112],{"class":473,"line":1833},[471,7101,7102],{"class":492},"            class",[471,7104,496],{"class":484},[471,7106,499],{"class":484},[471,7108,7109],{"class":502},"w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors",[471,7111,499],{"class":484},[471,7113,508],{"class":484},[471,7115,7116,7118,7120,7122,7124,7126,7129,7131,7133,7136,7138,7140],{"class":473,"line":1883},[471,7117,1836],{"class":484},[471,7119,471],{"class":488},[471,7121,493],{"class":492},[471,7123,496],{"class":484},[471,7125,499],{"class":484},[471,7127,7128],{"class":502},"text-gray-400 text-xl",[471,7130,499],{"class":484},[471,7132,651],{"class":484},[471,7134,7135],{"class":514},"×",[471,7137,521],{"class":484},[471,7139,471],{"class":488},[471,7141,508],{"class":484},[471,7143,7144,7146,7148],{"class":473,"line":1893},[471,7145,1886],{"class":484},[471,7147,489],{"class":488},[471,7149,508],{"class":484},[471,7151,7152,7154,7156],{"class":473,"line":1902},[471,7153,1714],{"class":484},[471,7155,725],{"class":488},[471,7157,508],{"class":484},[471,7159,7160],{"class":473,"line":1911},[471,7161,532],{"emptyLinePlaceholder":531},[471,7163,7164,7166,7168,7170,7172,7174,7177,7179],{"class":473,"line":1921},[471,7165,1584],{"class":484},[471,7167,453],{"class":488},[471,7169,493],{"class":492},[471,7171,496],{"class":484},[471,7173,499],{"class":484},[471,7175,7176],{"class":502},"text-sm text-gray-600 leading-relaxed",[471,7178,499],{"class":484},[471,7180,508],{"class":484},[471,7182,7183],{"class":473,"line":1926},[471,7184,7185],{"class":514},"          Bạn có chắc chắn muốn xóa mục này? Hành động này không thể hoàn tác.\n",[471,7187,7188,7190,7192],{"class":473,"line":1932},[471,7189,1714],{"class":484},[471,7191,453],{"class":488},[471,7193,508],{"class":484},[471,7195,7196],{"class":473,"line":1951},[471,7197,532],{"emptyLinePlaceholder":531},[471,7199,7200,7202,7204,7206,7208,7210,7213,7215],{"class":473,"line":1979},[471,7201,1584],{"class":484},[471,7203,725],{"class":488},[471,7205,493],{"class":492},[471,7207,496],{"class":484},[471,7209,499],{"class":484},[471,7211,7212],{"class":502},"mt-6 flex gap-3 justify-end",[471,7214,499],{"class":484},[471,7216,508],{"class":484},[471,7218,7219,7221],{"class":473,"line":1984},[471,7220,1657],{"class":484},[471,7222,3774],{"class":488},[471,7224,7225,7227,7229,7231,7233],{"class":473,"line":2000},[471,7226,7089],{"class":492},[471,7228,496],{"class":484},[471,7230,499],{"class":484},[471,7232,6976],{"class":502},[471,7234,2436],{"class":484},[471,7236,7237,7239,7241,7243],{"class":473,"line":2006},[471,7238,7102],{"class":492},[471,7240,496],{"class":484},[471,7242,499],{"class":484},[471,7244,7245],{"class":502},"px-4 py-2 border border-gray-300 text-gray-700 text-sm font-medium rounded-lg\n",[471,7247,7248,7251,7253],{"class":473,"line":2012},[471,7249,7250],{"class":502},"                   hover:bg-gray-50 transition-colors",[471,7252,499],{"class":484},[471,7254,508],{"class":484},[471,7256,7257],{"class":473,"line":2018},[471,7258,7259],{"class":514},"            Hủy\n",[471,7261,7262,7264,7266],{"class":473,"line":2027},[471,7263,1886],{"class":484},[471,7265,489],{"class":488},[471,7267,508],{"class":484},[471,7269,7270,7272],{"class":473,"line":2033},[471,7271,1657],{"class":484},[471,7273,3774],{"class":488},[471,7275,7276,7278,7280,7282,7285],{"class":473,"line":2042},[471,7277,7089],{"class":492},[471,7279,496],{"class":484},[471,7281,499],{"class":484},[471,7283,7284],{"class":502},"confirmDelete",[471,7286,2436],{"class":484},[471,7288,7289,7291,7293,7295],{"class":473,"line":2051},[471,7290,7102],{"class":492},[471,7292,496],{"class":484},[471,7294,499],{"class":484},[471,7296,7297],{"class":502},"px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg\n",[471,7299,7300,7303,7305],{"class":473,"line":2056},[471,7301,7302],{"class":502},"                   hover:bg-red-700 transition-colors",[471,7304,499],{"class":484},[471,7306,508],{"class":484},[471,7308,7309],{"class":473,"line":2062},[471,7310,7311],{"class":514},"            Xóa\n",[471,7313,7314,7316,7318],{"class":473,"line":2081},[471,7315,1886],{"class":484},[471,7317,489],{"class":488},[471,7319,508],{"class":484},[471,7321,7322,7324,7326],{"class":473,"line":2109},[471,7323,1714],{"class":484},[471,7325,725],{"class":488},[471,7327,508],{"class":484},[471,7329,7330,7332,7334],{"class":473,"line":2114},[471,7331,1723],{"class":484},[471,7333,725],{"class":488},[471,7335,508],{"class":484},[471,7337,7338,7340,7342],{"class":473,"line":2130},[471,7339,1914],{"class":484},[471,7341,725],{"class":488},[471,7343,508],{"class":484},[471,7345,7346,7348,7350],{"class":473,"line":2136},[471,7347,885],{"class":484},[471,7349,725],{"class":488},[471,7351,508],{"class":484},[471,7353,7354,7356,7358],{"class":473,"line":2142},[471,7355,521],{"class":484},[471,7357,1419],{"class":488},[471,7359,508],{"class":484},[471,7361,7362],{"class":473,"line":2148},[471,7363,532],{"emptyLinePlaceholder":531},[471,7365,7366,7368,7371,7374,7377,7379,7381,7384,7386],{"class":473,"line":2157},[471,7367,485],{"class":484},[471,7369,7370],{"class":488},"script",[471,7372,7373],{"class":492}," setup",[471,7375,7376],{"class":492}," lang",[471,7378,496],{"class":484},[471,7380,499],{"class":484},[471,7382,7383],{"class":502},"ts",[471,7385,499],{"class":484},[471,7387,508],{"class":484},[471,7389,7390,7394,7397,7400,7403,7406,7408,7411,7414,7417,7420,7422],{"class":473,"line":2163},[471,7391,7393],{"class":7392},"s7zQu","import",[471,7395,7396],{"class":484}," {",[471,7398,7399],{"class":514}," ref",[471,7401,7402],{"class":484},",",[471,7404,7405],{"class":514}," watch",[471,7407,7402],{"class":484},[471,7409,7410],{"class":514}," nextTick",[471,7412,7413],{"class":484}," }",[471,7415,7416],{"class":7392}," from",[471,7418,7419],{"class":484}," '",[471,7421,1410],{"class":502},[471,7423,7424],{"class":484},"'\n",[471,7426,7427],{"class":473,"line":2172},[471,7428,532],{"emptyLinePlaceholder":531},[471,7430,7431,7434,7437,7439,7442,7445,7449],{"class":473,"line":2181},[471,7432,7433],{"class":492},"const",[471,7435,7436],{"class":514}," isOpen ",[471,7438,496],{"class":484},[471,7440,7399],{"class":7441},"s2Zo4",[471,7443,7444],{"class":514},"(",[471,7446,7448],{"class":7447},"sfNiH","false",[471,7450,7451],{"class":514},")\n",[471,7453,7454,7456,7459,7461,7463,7465,7467],{"class":473,"line":2186},[471,7455,7433],{"class":492},[471,7457,7458],{"class":514}," showModal ",[471,7460,496],{"class":484},[471,7462,7399],{"class":7441},[471,7464,7444],{"class":514},[471,7466,7448],{"class":7447},[471,7468,7451],{"class":514},[471,7470,7471],{"class":473,"line":2192},[471,7472,532],{"emptyLinePlaceholder":531},[471,7474,7475,7478,7481,7484],{"class":473,"line":2211},[471,7476,7477],{"class":492},"function",[471,7479,7480],{"class":7441}," closeModal",[471,7482,7483],{"class":484},"()",[471,7485,7486],{"class":484}," {\n",[471,7488,7489,7492,7494,7497,7500],{"class":473,"line":2239},[471,7490,7491],{"class":514},"  showModal",[471,7493,2917],{"class":484},[471,7495,7496],{"class":514},"value",[471,7498,7499],{"class":484}," =",[471,7501,7502],{"class":7447}," false\n",[471,7504,7505,7508,7510,7512,7515],{"class":473,"line":2244},[471,7506,7507],{"class":7441},"  setTimeout",[471,7509,7444],{"class":488},[471,7511,7483],{"class":484},[471,7513,7514],{"class":492}," =>",[471,7516,7486],{"class":484},[471,7518,7519,7522,7524,7526,7528],{"class":473,"line":2260},[471,7520,7521],{"class":514},"    isOpen",[471,7523,2917],{"class":484},[471,7525,7496],{"class":514},[471,7527,7499],{"class":484},[471,7529,7502],{"class":7447},[471,7531,7532,7535,7539,7542],{"class":473,"line":2266},[471,7533,7534],{"class":484},"  },",[471,7536,7538],{"class":7537},"sbssI"," 300",[471,7540,7541],{"class":488},") ",[471,7543,7544],{"class":477},"\u002F\u002F khớp với duration-300\n",[471,7546,7547],{"class":473,"line":2272},[471,7548,7549],{"class":484},"}\n",[471,7551,7552],{"class":473,"line":2278},[471,7553,532],{"emptyLinePlaceholder":531},[471,7555,7556,7558,7561,7563],{"class":473,"line":2287},[471,7557,7477],{"class":492},[471,7559,7560],{"class":7441}," confirmDelete",[471,7562,7483],{"class":484},[471,7564,7486],{"class":484},[471,7566,7567],{"class":473,"line":2293},[471,7568,7569],{"class":477},"  \u002F\u002F Xử lý xóa\n",[471,7571,7572,7575],{"class":473,"line":2302},[471,7573,7574],{"class":7441},"  closeModal",[471,7576,7577],{"class":488},"()\n",[471,7579,7580],{"class":473,"line":2311},[471,7581,7549],{"class":484},[471,7583,7584],{"class":473,"line":2320},[471,7585,532],{"emptyLinePlaceholder":531},[471,7587,7588,7591,7594,7596,7599,7602,7606,7608,7610],{"class":473,"line":3630},[471,7589,7590],{"class":7441},"watch",[471,7592,7593],{"class":514},"(isOpen",[471,7595,7402],{"class":484},[471,7597,7598],{"class":492}," async",[471,7600,7601],{"class":484}," (",[471,7603,7605],{"class":7604},"sHdIc","val",[471,7607,451],{"class":484},[471,7609,7514],{"class":492},[471,7611,7486],{"class":484},[471,7613,7614,7617,7619,7621,7623],{"class":473,"line":3638},[471,7615,7616],{"class":7392},"  if",[471,7618,7601],{"class":488},[471,7620,7605],{"class":514},[471,7622,7541],{"class":488},[471,7624,7625],{"class":484},"{\n",[471,7627,7628,7631,7633],{"class":473,"line":3643},[471,7629,7630],{"class":7392},"    await",[471,7632,7410],{"class":7441},[471,7634,7577],{"class":488},[471,7636,7637],{"class":473,"line":3663},[471,7638,7639],{"class":477},"    \u002F\u002F Trigger transition sau khi mount\n",[471,7641,7642,7645,7647,7649,7651],{"class":473,"line":3708},[471,7643,7644],{"class":7441},"    requestAnimationFrame",[471,7646,7444],{"class":488},[471,7648,7483],{"class":484},[471,7650,7514],{"class":492},[471,7652,7486],{"class":484},[471,7654,7655,7658,7660,7662,7664],{"class":473,"line":3746},[471,7656,7657],{"class":514},"      showModal",[471,7659,2917],{"class":484},[471,7661,7496],{"class":514},[471,7663,7499],{"class":484},[471,7665,7666],{"class":7447}," true\n",[471,7668,7669,7672],{"class":473,"line":3755},[471,7670,7671],{"class":484},"    }",[471,7673,7451],{"class":488},[471,7675,7676],{"class":473,"line":3764},[471,7677,7678],{"class":484},"  }\n",[471,7680,7681,7684],{"class":473,"line":3769},[471,7682,7683],{"class":484},"}",[471,7685,7451],{"class":514},[471,7687,7688,7690,7692],{"class":473,"line":3777},[471,7689,521],{"class":484},[471,7691,7370],{"class":488},[471,7693,508],{"class":484},[824,7695,7697],{"id":7696},"bài-tập-7-dropdown-menu-với-slide-down-transition","Bài tập 7: Dropdown menu với slide-down transition",[453,7699,7700,7702],{},[457,7701,1404],{}," Dropdown menu hiện ra với hiệu ứng trượt xuống + fade in.",[462,7704,7706],{"className":1408,"code":7705,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-sm mx-auto p-8\">\n    \u003Cdiv class=\"relative\">\n      \u003C!-- Trigger -->\n      \u003Cbutton\n        @click=\"isOpen = !isOpen\"\n        class=\"w-full flex items-center justify-between px-4 py-2.5 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors\">\n        \u003Cspan>Chọn danh mục\u003C\u002Fspan>\n        \u003Csvg\n          class=\"w-4 h-4 text-gray-400 transition-transform duration-200\"\n          :class=\"{ 'rotate-180': isOpen }\"\n          fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \u002F>\n        \u003C\u002Fsvg>\n      \u003C\u002Fbutton>\n\n      \u003C!-- Dropdown menu -->\n      \u003Cdiv\n        v-if=\"isOpen\"\n        class=\"absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden\n               transition-all duration-200 ease-out origin-top\"\n        :class=\"isOpen ? 'opacity-100 scale-y-100' : 'opacity-0 scale-y-0'\">\n        \u003Cdiv class=\"py-1\">\n          \u003Cbutton\n            v-for=\"item in menuItems\"\n            :key=\"item\"\n            class=\"w-full text-left px-4 py-2.5 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition-colors\">\n            {{ item }}\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\nconst menuItems = ['Frontend Development', 'Backend Development', 'DevOps', 'UI\u002FUX Design', 'Data Science']\n\u003C\u002Fscript>\n",[432,7707,7708,7716,7735,7754,7759,7765,7778,7793,7810,7817,7830,7844,7879,7928,7936,7944,7948,7953,7959,7972,7983,7990,8005,8024,8030,8044,8058,8073,8078,8086,8094,8102,8110,8118,8126,8130,8150,8168,8172,8188,8247],{"__ignoreMap":467},[471,7709,7710,7712,7714],{"class":473,"line":474},[471,7711,485],{"class":484},[471,7713,1419],{"class":488},[471,7715,508],{"class":484},[471,7717,7718,7720,7722,7724,7726,7728,7731,7733],{"class":473,"line":481},[471,7719,744],{"class":484},[471,7721,725],{"class":488},[471,7723,493],{"class":492},[471,7725,496],{"class":484},[471,7727,499],{"class":484},[471,7729,7730],{"class":502},"max-w-sm mx-auto p-8",[471,7732,499],{"class":484},[471,7734,508],{"class":484},[471,7736,7737,7739,7741,7743,7745,7747,7750,7752],{"class":473,"line":511},[471,7738,1445],{"class":484},[471,7740,725],{"class":488},[471,7742,493],{"class":492},[471,7744,496],{"class":484},[471,7746,499],{"class":484},[471,7748,7749],{"class":502},"relative",[471,7751,499],{"class":484},[471,7753,508],{"class":484},[471,7755,7756],{"class":473,"line":518},[471,7757,7758],{"class":477},"      \u003C!-- Trigger -->\n",[471,7760,7761,7763],{"class":473,"line":528},[471,7762,1502],{"class":484},[471,7764,3774],{"class":488},[471,7766,7767,7769,7771,7773,7776],{"class":473,"line":535},[471,7768,6969],{"class":492},[471,7770,496],{"class":484},[471,7772,499],{"class":484},[471,7774,7775],{"class":502},"isOpen = !isOpen",[471,7777,2436],{"class":484},[471,7779,7780,7782,7784,7786,7789,7791],{"class":473,"line":541},[471,7781,3795],{"class":492},[471,7783,496],{"class":484},[471,7785,499],{"class":484},[471,7787,7788],{"class":502},"w-full flex items-center justify-between px-4 py-2.5 bg-white border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors",[471,7790,499],{"class":484},[471,7792,508],{"class":484},[471,7794,7795,7797,7799,7801,7804,7806,7808],{"class":473,"line":563},[471,7796,1584],{"class":484},[471,7798,471],{"class":488},[471,7800,651],{"class":484},[471,7802,7803],{"class":514},"Chọn danh mục",[471,7805,521],{"class":484},[471,7807,471],{"class":488},[471,7809,508],{"class":484},[471,7811,7812,7814],{"class":473,"line":568},[471,7813,1584],{"class":484},[471,7815,7816],{"class":488},"svg\n",[471,7818,7819,7821,7823,7825,7828],{"class":473,"line":574},[471,7820,2455],{"class":492},[471,7822,496],{"class":484},[471,7824,499],{"class":484},[471,7826,7827],{"class":502},"w-4 h-4 text-gray-400 transition-transform duration-200",[471,7829,2436],{"class":484},[471,7831,7832,7835,7837,7839,7842],{"class":473,"line":594},[471,7833,7834],{"class":492},"          :class",[471,7836,496],{"class":484},[471,7838,499],{"class":484},[471,7840,7841],{"class":502},"{ 'rotate-180': isOpen }",[471,7843,2436],{"class":484},[471,7845,7846,7849,7851,7853,7855,7857,7859,7861,7863,7865,7867,7869,7871,7873,7875,7877],{"class":473,"line":600},[471,7847,7848],{"class":492},"          fill",[471,7850,496],{"class":484},[471,7852,499],{"class":484},[471,7854,1624],{"class":502},[471,7856,499],{"class":484},[471,7858,1629],{"class":492},[471,7860,496],{"class":484},[471,7862,499],{"class":484},[471,7864,1636],{"class":502},[471,7866,499],{"class":484},[471,7868,1641],{"class":492},[471,7870,496],{"class":484},[471,7872,499],{"class":484},[471,7874,1648],{"class":502},[471,7876,499],{"class":484},[471,7878,508],{"class":484},[471,7880,7881,7883,7885,7887,7889,7891,7893,7895,7897,7899,7901,7903,7905,7907,7909,7911,7913,7915,7917,7919,7921,7924,7926],{"class":473,"line":609},[471,7882,1657],{"class":484},[471,7884,1660],{"class":488},[471,7886,1663],{"class":492},[471,7888,496],{"class":484},[471,7890,499],{"class":484},[471,7892,1670],{"class":502},[471,7894,499],{"class":484},[471,7896,1675],{"class":492},[471,7898,496],{"class":484},[471,7900,499],{"class":484},[471,7902,1670],{"class":502},[471,7904,499],{"class":484},[471,7906,1686],{"class":492},[471,7908,496],{"class":484},[471,7910,499],{"class":484},[471,7912,1693],{"class":502},[471,7914,499],{"class":484},[471,7916,1698],{"class":492},[471,7918,496],{"class":484},[471,7920,499],{"class":484},[471,7922,7923],{"class":502},"M19 9l-7 7-7-7",[471,7925,499],{"class":484},[471,7927,560],{"class":484},[471,7929,7930,7932,7934],{"class":473,"line":614},[471,7931,1714],{"class":484},[471,7933,928],{"class":488},[471,7935,508],{"class":484},[471,7937,7938,7940,7942],{"class":473,"line":620},[471,7939,1723],{"class":484},[471,7941,489],{"class":488},[471,7943,508],{"class":484},[471,7945,7946],{"class":473,"line":663},[471,7947,532],{"emptyLinePlaceholder":531},[471,7949,7950],{"class":473,"line":668},[471,7951,7952],{"class":477},"      \u003C!-- Dropdown menu -->\n",[471,7954,7955,7957],{"class":473,"line":674},[471,7956,1502],{"class":484},[471,7958,6937],{"class":488},[471,7960,7961,7964,7966,7968,7970],{"class":473,"line":694},[471,7962,7963],{"class":492},"        v-if",[471,7965,496],{"class":484},[471,7967,499],{"class":484},[471,7969,6910],{"class":502},[471,7971,2436],{"class":484},[471,7973,7974,7976,7978,7980],{"class":473,"line":700},[471,7975,3795],{"class":492},[471,7977,496],{"class":484},[471,7979,499],{"class":484},[471,7981,7982],{"class":502},"absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg overflow-hidden\n",[471,7984,7985,7988],{"class":473,"line":709},[471,7986,7987],{"class":502},"               transition-all duration-200 ease-out origin-top",[471,7989,2436],{"class":484},[471,7991,7992,7994,7996,7998,8001,8003],{"class":473,"line":714},[471,7993,6955],{"class":492},[471,7995,496],{"class":484},[471,7997,499],{"class":484},[471,7999,8000],{"class":502},"isOpen ? 'opacity-100 scale-y-100' : 'opacity-0 scale-y-0'",[471,8002,499],{"class":484},[471,8004,508],{"class":484},[471,8006,8007,8009,8011,8013,8015,8017,8020,8022],{"class":473,"line":720},[471,8008,1584],{"class":484},[471,8010,725],{"class":488},[471,8012,493],{"class":492},[471,8014,496],{"class":484},[471,8016,499],{"class":484},[471,8018,8019],{"class":502},"py-1",[471,8021,499],{"class":484},[471,8023,508],{"class":484},[471,8025,8026,8028],{"class":473,"line":741},[471,8027,1657],{"class":484},[471,8029,3774],{"class":488},[471,8031,8032,8035,8037,8039,8042],{"class":473,"line":772},[471,8033,8034],{"class":492},"            v-for",[471,8036,496],{"class":484},[471,8038,499],{"class":484},[471,8040,8041],{"class":502},"item in menuItems",[471,8043,2436],{"class":484},[471,8045,8046,8049,8051,8053,8056],{"class":473,"line":816},[471,8047,8048],{"class":492},"            :key",[471,8050,496],{"class":484},[471,8052,499],{"class":484},[471,8054,8055],{"class":502},"item",[471,8057,2436],{"class":484},[471,8059,8060,8062,8064,8066,8069,8071],{"class":473,"line":1833},[471,8061,7102],{"class":492},[471,8063,496],{"class":484},[471,8065,499],{"class":484},[471,8067,8068],{"class":502},"w-full text-left px-4 py-2.5 text-sm text-gray-700 hover:bg-indigo-50 hover:text-indigo-600 transition-colors",[471,8070,499],{"class":484},[471,8072,508],{"class":484},[471,8074,8075],{"class":473,"line":1883},[471,8076,8077],{"class":514},"            {{ item }}\n",[471,8079,8080,8082,8084],{"class":473,"line":1893},[471,8081,1886],{"class":484},[471,8083,489],{"class":488},[471,8085,508],{"class":484},[471,8087,8088,8090,8092],{"class":473,"line":1902},[471,8089,1714],{"class":484},[471,8091,725],{"class":488},[471,8093,508],{"class":484},[471,8095,8096,8098,8100],{"class":473,"line":1911},[471,8097,1723],{"class":484},[471,8099,725],{"class":488},[471,8101,508],{"class":484},[471,8103,8104,8106,8108],{"class":473,"line":1921},[471,8105,1914],{"class":484},[471,8107,725],{"class":488},[471,8109,508],{"class":484},[471,8111,8112,8114,8116],{"class":473,"line":1926},[471,8113,885],{"class":484},[471,8115,725],{"class":488},[471,8117,508],{"class":484},[471,8119,8120,8122,8124],{"class":473,"line":1932},[471,8121,521],{"class":484},[471,8123,1419],{"class":488},[471,8125,508],{"class":484},[471,8127,8128],{"class":473,"line":1951},[471,8129,532],{"emptyLinePlaceholder":531},[471,8131,8132,8134,8136,8138,8140,8142,8144,8146,8148],{"class":473,"line":1979},[471,8133,485],{"class":484},[471,8135,7370],{"class":488},[471,8137,7373],{"class":492},[471,8139,7376],{"class":492},[471,8141,496],{"class":484},[471,8143,499],{"class":484},[471,8145,7383],{"class":502},[471,8147,499],{"class":484},[471,8149,508],{"class":484},[471,8151,8152,8154,8156,8158,8160,8162,8164,8166],{"class":473,"line":1984},[471,8153,7393],{"class":7392},[471,8155,7396],{"class":484},[471,8157,7399],{"class":514},[471,8159,7413],{"class":484},[471,8161,7416],{"class":7392},[471,8163,7419],{"class":484},[471,8165,1410],{"class":502},[471,8167,7424],{"class":484},[471,8169,8170],{"class":473,"line":2000},[471,8171,532],{"emptyLinePlaceholder":531},[471,8173,8174,8176,8178,8180,8182,8184,8186],{"class":473,"line":2006},[471,8175,7433],{"class":492},[471,8177,7436],{"class":514},[471,8179,496],{"class":484},[471,8181,7399],{"class":7441},[471,8183,7444],{"class":514},[471,8185,7448],{"class":7447},[471,8187,7451],{"class":514},[471,8189,8190,8192,8195,8197,8200,8203,8206,8208,8210,8212,8215,8217,8219,8221,8224,8226,8228,8230,8233,8235,8237,8239,8242,8244],{"class":473,"line":2012},[471,8191,7433],{"class":492},[471,8193,8194],{"class":514}," menuItems ",[471,8196,496],{"class":484},[471,8198,8199],{"class":514}," [",[471,8201,8202],{"class":484},"'",[471,8204,8205],{"class":502},"Frontend Development",[471,8207,8202],{"class":484},[471,8209,7402],{"class":484},[471,8211,7419],{"class":484},[471,8213,8214],{"class":502},"Backend Development",[471,8216,8202],{"class":484},[471,8218,7402],{"class":484},[471,8220,7419],{"class":484},[471,8222,8223],{"class":502},"DevOps",[471,8225,8202],{"class":484},[471,8227,7402],{"class":484},[471,8229,7419],{"class":484},[471,8231,8232],{"class":502},"UI\u002FUX Design",[471,8234,8202],{"class":484},[471,8236,7402],{"class":484},[471,8238,7419],{"class":484},[471,8240,8241],{"class":502},"Data Science",[471,8243,8202],{"class":484},[471,8245,8246],{"class":514},"]\n",[471,8248,8249,8251,8253],{"class":473,"line":2018},[471,8250,521],{"class":484},[471,8252,7370],{"class":488},[471,8254,508],{"class":484},[5602,8256],{},[427,8258,8260,8261,435,8264,435,8267,435,8270,435,8273,435,8276,451],{"id":8259},"_3-transforms-scale-rotate-translate-x-translate-y-skew-transform-origin","3. Transforms (",[432,8262,8263],{},"scale-*",[432,8265,8266],{},"rotate-*",[432,8268,8269],{},"translate-x-*",[432,8271,8272],{},"translate-y-*",[432,8274,8275],{},"skew-*",[432,8277,8278],{},"transform-origin",[462,8280,8282],{"className":464,"code":8281,"language":466,"meta":467,"style":467},"\u003C!-- Scale -->\n\u003Cdiv class=\"scale-50\">Thu nhỏ 50%\u003C\u002Fdiv>\n\u003Cdiv class=\"scale-75\">Thu nhỏ 75%\u003C\u002Fdiv>\n\u003Cdiv class=\"scale-90\">Thu nhỏ 90%\u003C\u002Fdiv>\n\u003Cdiv class=\"scale-100\">Kích thước gốc (default)\u003C\u002Fdiv>\n\u003Cdiv class=\"scale-105\">Phóng to 5%\u003C\u002Fdiv>\n\u003Cdiv class=\"scale-110\">Phóng to 10%\u003C\u002Fdiv>\n\u003Cdiv class=\"scale-125\">Phóng to 25%\u003C\u002Fdiv>\n\u003Cdiv class=\"scale-150\">Phóng to 50%\u003C\u002Fdiv>\n\n\u003C!-- Scale riêng từng trục -->\n\u003Cdiv class=\"scale-x-50 scale-y-110\">Scale X 50%, Y 110%\u003C\u002Fdiv>\n\n\u003C!-- Rotate -->\n\u003Cdiv class=\"rotate-0\">0 deg (default)\u003C\u002Fdiv>\n\u003Cdiv class=\"rotate-45\">45 deg\u003C\u002Fdiv>\n\u003Cdiv class=\"rotate-90\">90 deg\u003C\u002Fdiv>\n\u003Cdiv class=\"rotate-180\">180 deg\u003C\u002Fdiv>\n\n\u003C!-- Translate -->\n\u003Cdiv class=\"translate-x-4\">Dịch phải 1rem\u003C\u002Fdiv>\n\u003Cdiv class=\"-translate-x-4\">Dịch trái 1rem\u003C\u002Fdiv>\n\u003Cdiv class=\"translate-y-2\">Dịch xuống 0.5rem\u003C\u002Fdiv>\n\u003Cdiv class=\"-translate-y-2\">Dịch lên 0.5rem\u003C\u002Fdiv>\n\u003Cdiv class=\"translate-x-1\u002F2\">Dịch phải 50% width của element\u003C\u002Fdiv>\n\n\u003C!-- Skew -->\n\u003Cdiv class=\"skew-x-3\">Nghiêng X 3 deg\u003C\u002Fdiv>\n\u003Cdiv class=\"skew-y-6\">Nghiêng Y 6 deg\u003C\u002Fdiv>\n",[432,8283,8284,8289,8317,8345,8373,8401,8429,8457,8485,8513,8517,8522,8550,8554,8559,8587,8615,8643,8671,8675,8680,8708,8736,8764,8792,8820,8824,8829,8857],{"__ignoreMap":467},[471,8285,8286],{"class":473,"line":474},[471,8287,8288],{"class":477},"\u003C!-- Scale -->\n",[471,8290,8291,8293,8295,8297,8299,8301,8304,8306,8308,8311,8313,8315],{"class":473,"line":481},[471,8292,485],{"class":484},[471,8294,725],{"class":488},[471,8296,493],{"class":492},[471,8298,496],{"class":484},[471,8300,499],{"class":484},[471,8302,8303],{"class":502},"scale-50",[471,8305,499],{"class":484},[471,8307,651],{"class":484},[471,8309,8310],{"class":514},"Thu nhỏ 50%",[471,8312,521],{"class":484},[471,8314,725],{"class":488},[471,8316,508],{"class":484},[471,8318,8319,8321,8323,8325,8327,8329,8332,8334,8336,8339,8341,8343],{"class":473,"line":511},[471,8320,485],{"class":484},[471,8322,725],{"class":488},[471,8324,493],{"class":492},[471,8326,496],{"class":484},[471,8328,499],{"class":484},[471,8330,8331],{"class":502},"scale-75",[471,8333,499],{"class":484},[471,8335,651],{"class":484},[471,8337,8338],{"class":514},"Thu nhỏ 75%",[471,8340,521],{"class":484},[471,8342,725],{"class":488},[471,8344,508],{"class":484},[471,8346,8347,8349,8351,8353,8355,8357,8360,8362,8364,8367,8369,8371],{"class":473,"line":518},[471,8348,485],{"class":484},[471,8350,725],{"class":488},[471,8352,493],{"class":492},[471,8354,496],{"class":484},[471,8356,499],{"class":484},[471,8358,8359],{"class":502},"scale-90",[471,8361,499],{"class":484},[471,8363,651],{"class":484},[471,8365,8366],{"class":514},"Thu nhỏ 90%",[471,8368,521],{"class":484},[471,8370,725],{"class":488},[471,8372,508],{"class":484},[471,8374,8375,8377,8379,8381,8383,8385,8388,8390,8392,8395,8397,8399],{"class":473,"line":528},[471,8376,485],{"class":484},[471,8378,725],{"class":488},[471,8380,493],{"class":492},[471,8382,496],{"class":484},[471,8384,499],{"class":484},[471,8386,8387],{"class":502},"scale-100",[471,8389,499],{"class":484},[471,8391,651],{"class":484},[471,8393,8394],{"class":514},"Kích thước gốc (default)",[471,8396,521],{"class":484},[471,8398,725],{"class":488},[471,8400,508],{"class":484},[471,8402,8403,8405,8407,8409,8411,8413,8416,8418,8420,8423,8425,8427],{"class":473,"line":535},[471,8404,485],{"class":484},[471,8406,725],{"class":488},[471,8408,493],{"class":492},[471,8410,496],{"class":484},[471,8412,499],{"class":484},[471,8414,8415],{"class":502},"scale-105",[471,8417,499],{"class":484},[471,8419,651],{"class":484},[471,8421,8422],{"class":514},"Phóng to 5%",[471,8424,521],{"class":484},[471,8426,725],{"class":488},[471,8428,508],{"class":484},[471,8430,8431,8433,8435,8437,8439,8441,8444,8446,8448,8451,8453,8455],{"class":473,"line":541},[471,8432,485],{"class":484},[471,8434,725],{"class":488},[471,8436,493],{"class":492},[471,8438,496],{"class":484},[471,8440,499],{"class":484},[471,8442,8443],{"class":502},"scale-110",[471,8445,499],{"class":484},[471,8447,651],{"class":484},[471,8449,8450],{"class":514},"Phóng to 10%",[471,8452,521],{"class":484},[471,8454,725],{"class":488},[471,8456,508],{"class":484},[471,8458,8459,8461,8463,8465,8467,8469,8472,8474,8476,8479,8481,8483],{"class":473,"line":563},[471,8460,485],{"class":484},[471,8462,725],{"class":488},[471,8464,493],{"class":492},[471,8466,496],{"class":484},[471,8468,499],{"class":484},[471,8470,8471],{"class":502},"scale-125",[471,8473,499],{"class":484},[471,8475,651],{"class":484},[471,8477,8478],{"class":514},"Phóng to 25%",[471,8480,521],{"class":484},[471,8482,725],{"class":488},[471,8484,508],{"class":484},[471,8486,8487,8489,8491,8493,8495,8497,8500,8502,8504,8507,8509,8511],{"class":473,"line":568},[471,8488,485],{"class":484},[471,8490,725],{"class":488},[471,8492,493],{"class":492},[471,8494,496],{"class":484},[471,8496,499],{"class":484},[471,8498,8499],{"class":502},"scale-150",[471,8501,499],{"class":484},[471,8503,651],{"class":484},[471,8505,8506],{"class":514},"Phóng to 50%",[471,8508,521],{"class":484},[471,8510,725],{"class":488},[471,8512,508],{"class":484},[471,8514,8515],{"class":473,"line":574},[471,8516,532],{"emptyLinePlaceholder":531},[471,8518,8519],{"class":473,"line":594},[471,8520,8521],{"class":477},"\u003C!-- Scale riêng từng trục -->\n",[471,8523,8524,8526,8528,8530,8532,8534,8537,8539,8541,8544,8546,8548],{"class":473,"line":600},[471,8525,485],{"class":484},[471,8527,725],{"class":488},[471,8529,493],{"class":492},[471,8531,496],{"class":484},[471,8533,499],{"class":484},[471,8535,8536],{"class":502},"scale-x-50 scale-y-110",[471,8538,499],{"class":484},[471,8540,651],{"class":484},[471,8542,8543],{"class":514},"Scale X 50%, Y 110%",[471,8545,521],{"class":484},[471,8547,725],{"class":488},[471,8549,508],{"class":484},[471,8551,8552],{"class":473,"line":609},[471,8553,532],{"emptyLinePlaceholder":531},[471,8555,8556],{"class":473,"line":614},[471,8557,8558],{"class":477},"\u003C!-- Rotate -->\n",[471,8560,8561,8563,8565,8567,8569,8571,8574,8576,8578,8581,8583,8585],{"class":473,"line":620},[471,8562,485],{"class":484},[471,8564,725],{"class":488},[471,8566,493],{"class":492},[471,8568,496],{"class":484},[471,8570,499],{"class":484},[471,8572,8573],{"class":502},"rotate-0",[471,8575,499],{"class":484},[471,8577,651],{"class":484},[471,8579,8580],{"class":514},"0 deg (default)",[471,8582,521],{"class":484},[471,8584,725],{"class":488},[471,8586,508],{"class":484},[471,8588,8589,8591,8593,8595,8597,8599,8602,8604,8606,8609,8611,8613],{"class":473,"line":663},[471,8590,485],{"class":484},[471,8592,725],{"class":488},[471,8594,493],{"class":492},[471,8596,496],{"class":484},[471,8598,499],{"class":484},[471,8600,8601],{"class":502},"rotate-45",[471,8603,499],{"class":484},[471,8605,651],{"class":484},[471,8607,8608],{"class":514},"45 deg",[471,8610,521],{"class":484},[471,8612,725],{"class":488},[471,8614,508],{"class":484},[471,8616,8617,8619,8621,8623,8625,8627,8630,8632,8634,8637,8639,8641],{"class":473,"line":668},[471,8618,485],{"class":484},[471,8620,725],{"class":488},[471,8622,493],{"class":492},[471,8624,496],{"class":484},[471,8626,499],{"class":484},[471,8628,8629],{"class":502},"rotate-90",[471,8631,499],{"class":484},[471,8633,651],{"class":484},[471,8635,8636],{"class":514},"90 deg",[471,8638,521],{"class":484},[471,8640,725],{"class":488},[471,8642,508],{"class":484},[471,8644,8645,8647,8649,8651,8653,8655,8658,8660,8662,8665,8667,8669],{"class":473,"line":674},[471,8646,485],{"class":484},[471,8648,725],{"class":488},[471,8650,493],{"class":492},[471,8652,496],{"class":484},[471,8654,499],{"class":484},[471,8656,8657],{"class":502},"rotate-180",[471,8659,499],{"class":484},[471,8661,651],{"class":484},[471,8663,8664],{"class":514},"180 deg",[471,8666,521],{"class":484},[471,8668,725],{"class":488},[471,8670,508],{"class":484},[471,8672,8673],{"class":473,"line":694},[471,8674,532],{"emptyLinePlaceholder":531},[471,8676,8677],{"class":473,"line":700},[471,8678,8679],{"class":477},"\u003C!-- Translate -->\n",[471,8681,8682,8684,8686,8688,8690,8692,8695,8697,8699,8702,8704,8706],{"class":473,"line":709},[471,8683,485],{"class":484},[471,8685,725],{"class":488},[471,8687,493],{"class":492},[471,8689,496],{"class":484},[471,8691,499],{"class":484},[471,8693,8694],{"class":502},"translate-x-4",[471,8696,499],{"class":484},[471,8698,651],{"class":484},[471,8700,8701],{"class":514},"Dịch phải 1rem",[471,8703,521],{"class":484},[471,8705,725],{"class":488},[471,8707,508],{"class":484},[471,8709,8710,8712,8714,8716,8718,8720,8723,8725,8727,8730,8732,8734],{"class":473,"line":714},[471,8711,485],{"class":484},[471,8713,725],{"class":488},[471,8715,493],{"class":492},[471,8717,496],{"class":484},[471,8719,499],{"class":484},[471,8721,8722],{"class":502},"-translate-x-4",[471,8724,499],{"class":484},[471,8726,651],{"class":484},[471,8728,8729],{"class":514},"Dịch trái 1rem",[471,8731,521],{"class":484},[471,8733,725],{"class":488},[471,8735,508],{"class":484},[471,8737,8738,8740,8742,8744,8746,8748,8751,8753,8755,8758,8760,8762],{"class":473,"line":720},[471,8739,485],{"class":484},[471,8741,725],{"class":488},[471,8743,493],{"class":492},[471,8745,496],{"class":484},[471,8747,499],{"class":484},[471,8749,8750],{"class":502},"translate-y-2",[471,8752,499],{"class":484},[471,8754,651],{"class":484},[471,8756,8757],{"class":514},"Dịch xuống 0.5rem",[471,8759,521],{"class":484},[471,8761,725],{"class":488},[471,8763,508],{"class":484},[471,8765,8766,8768,8770,8772,8774,8776,8779,8781,8783,8786,8788,8790],{"class":473,"line":741},[471,8767,485],{"class":484},[471,8769,725],{"class":488},[471,8771,493],{"class":492},[471,8773,496],{"class":484},[471,8775,499],{"class":484},[471,8777,8778],{"class":502},"-translate-y-2",[471,8780,499],{"class":484},[471,8782,651],{"class":484},[471,8784,8785],{"class":514},"Dịch lên 0.5rem",[471,8787,521],{"class":484},[471,8789,725],{"class":488},[471,8791,508],{"class":484},[471,8793,8794,8796,8798,8800,8802,8804,8807,8809,8811,8814,8816,8818],{"class":473,"line":772},[471,8795,485],{"class":484},[471,8797,725],{"class":488},[471,8799,493],{"class":492},[471,8801,496],{"class":484},[471,8803,499],{"class":484},[471,8805,8806],{"class":502},"translate-x-1\u002F2",[471,8808,499],{"class":484},[471,8810,651],{"class":484},[471,8812,8813],{"class":514},"Dịch phải 50% width của element",[471,8815,521],{"class":484},[471,8817,725],{"class":488},[471,8819,508],{"class":484},[471,8821,8822],{"class":473,"line":816},[471,8823,532],{"emptyLinePlaceholder":531},[471,8825,8826],{"class":473,"line":1833},[471,8827,8828],{"class":477},"\u003C!-- Skew -->\n",[471,8830,8831,8833,8835,8837,8839,8841,8844,8846,8848,8851,8853,8855],{"class":473,"line":1883},[471,8832,485],{"class":484},[471,8834,725],{"class":488},[471,8836,493],{"class":492},[471,8838,496],{"class":484},[471,8840,499],{"class":484},[471,8842,8843],{"class":502},"skew-x-3",[471,8845,499],{"class":484},[471,8847,651],{"class":484},[471,8849,8850],{"class":514},"Nghiêng X 3 deg",[471,8852,521],{"class":484},[471,8854,725],{"class":488},[471,8856,508],{"class":484},[471,8858,8859,8861,8863,8865,8867,8869,8872,8874,8876,8879,8881,8883],{"class":473,"line":1893},[471,8860,485],{"class":484},[471,8862,725],{"class":488},[471,8864,493],{"class":492},[471,8866,496],{"class":484},[471,8868,499],{"class":484},[471,8870,8871],{"class":502},"skew-y-6",[471,8873,499],{"class":484},[471,8875,651],{"class":484},[471,8877,8878],{"class":514},"Nghiêng Y 6 deg",[471,8880,521],{"class":484},[471,8882,725],{"class":488},[471,8884,508],{"class":484},[824,8886,8888],{"id":8887},"_3d-transforms-v40-new","3D Transforms (v4.0 NEW)",[1230,8890,8891,8894,8895,435,8898,435,8901,435,8904,435,8907,2917],{"color":1232,"icon":405},[457,8892,8893],{},"NEW v4.0"," — Tailwind hỗ trợ đầy đủ 3D transforms: ",[432,8896,8897],{},"rotate-x-*",[432,8899,8900],{},"rotate-y-*",[432,8902,8903],{},"rotate-z-*",[432,8905,8906],{},"perspective-*",[432,8908,8909],{},"backface-visible",[462,8911,8913],{"className":464,"code":8912,"language":466,"meta":467,"style":467},"\u003C!-- Rotate 3D -->\n\u003Cdiv class=\"rotate-x-45\">Xoay quanh trục X 45 deg\u003C\u002Fdiv>\n\u003Cdiv class=\"rotate-y-180\">Xoay quanh trục Y 180 deg (lật ngang)\u003C\u002Fdiv>\n\u003Cdiv class=\"rotate-z-90\">Xoay quanh trục Z 90 deg (giống rotate-90)\u003C\u002Fdiv>\n\n\u003C!-- Perspective — cần cho container cha -->\n\u003Cdiv class=\"perspective-[800px]\">\n  \u003Cdiv class=\"rotate-y-45\">Con xoay 3D với perspective 800px\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- backface-visibility -->\n\u003Cdiv class=\"backface-visible\">Mặt sau hiển thị\u003C\u002Fdiv>\n\u003Cdiv class=\"backface-hidden\">Mặt sau ẩn (cần cho card flip)\u003C\u002Fdiv>\n",[432,8914,8915,8920,8948,8976,9004,9008,9013,9032,9060,9068,9072,9077,9104],{"__ignoreMap":467},[471,8916,8917],{"class":473,"line":474},[471,8918,8919],{"class":477},"\u003C!-- Rotate 3D -->\n",[471,8921,8922,8924,8926,8928,8930,8932,8935,8937,8939,8942,8944,8946],{"class":473,"line":481},[471,8923,485],{"class":484},[471,8925,725],{"class":488},[471,8927,493],{"class":492},[471,8929,496],{"class":484},[471,8931,499],{"class":484},[471,8933,8934],{"class":502},"rotate-x-45",[471,8936,499],{"class":484},[471,8938,651],{"class":484},[471,8940,8941],{"class":514},"Xoay quanh trục X 45 deg",[471,8943,521],{"class":484},[471,8945,725],{"class":488},[471,8947,508],{"class":484},[471,8949,8950,8952,8954,8956,8958,8960,8963,8965,8967,8970,8972,8974],{"class":473,"line":511},[471,8951,485],{"class":484},[471,8953,725],{"class":488},[471,8955,493],{"class":492},[471,8957,496],{"class":484},[471,8959,499],{"class":484},[471,8961,8962],{"class":502},"rotate-y-180",[471,8964,499],{"class":484},[471,8966,651],{"class":484},[471,8968,8969],{"class":514},"Xoay quanh trục Y 180 deg (lật ngang)",[471,8971,521],{"class":484},[471,8973,725],{"class":488},[471,8975,508],{"class":484},[471,8977,8978,8980,8982,8984,8986,8988,8991,8993,8995,8998,9000,9002],{"class":473,"line":518},[471,8979,485],{"class":484},[471,8981,725],{"class":488},[471,8983,493],{"class":492},[471,8985,496],{"class":484},[471,8987,499],{"class":484},[471,8989,8990],{"class":502},"rotate-z-90",[471,8992,499],{"class":484},[471,8994,651],{"class":484},[471,8996,8997],{"class":514},"Xoay quanh trục Z 90 deg (giống rotate-90)",[471,8999,521],{"class":484},[471,9001,725],{"class":488},[471,9003,508],{"class":484},[471,9005,9006],{"class":473,"line":528},[471,9007,532],{"emptyLinePlaceholder":531},[471,9009,9010],{"class":473,"line":535},[471,9011,9012],{"class":477},"\u003C!-- Perspective — cần cho container cha -->\n",[471,9014,9015,9017,9019,9021,9023,9025,9028,9030],{"class":473,"line":541},[471,9016,485],{"class":484},[471,9018,725],{"class":488},[471,9020,493],{"class":492},[471,9022,496],{"class":484},[471,9024,499],{"class":484},[471,9026,9027],{"class":502},"perspective-[800px]",[471,9029,499],{"class":484},[471,9031,508],{"class":484},[471,9033,9034,9036,9038,9040,9042,9044,9047,9049,9051,9054,9056,9058],{"class":473,"line":563},[471,9035,744],{"class":484},[471,9037,725],{"class":488},[471,9039,493],{"class":492},[471,9041,496],{"class":484},[471,9043,499],{"class":484},[471,9045,9046],{"class":502},"rotate-y-45",[471,9048,499],{"class":484},[471,9050,651],{"class":484},[471,9052,9053],{"class":514},"Con xoay 3D với perspective 800px",[471,9055,521],{"class":484},[471,9057,725],{"class":488},[471,9059,508],{"class":484},[471,9061,9062,9064,9066],{"class":473,"line":568},[471,9063,521],{"class":484},[471,9065,725],{"class":488},[471,9067,508],{"class":484},[471,9069,9070],{"class":473,"line":574},[471,9071,532],{"emptyLinePlaceholder":531},[471,9073,9074],{"class":473,"line":594},[471,9075,9076],{"class":477},"\u003C!-- backface-visibility -->\n",[471,9078,9079,9081,9083,9085,9087,9089,9091,9093,9095,9098,9100,9102],{"class":473,"line":600},[471,9080,485],{"class":484},[471,9082,725],{"class":488},[471,9084,493],{"class":492},[471,9086,496],{"class":484},[471,9088,499],{"class":484},[471,9090,8909],{"class":502},[471,9092,499],{"class":484},[471,9094,651],{"class":484},[471,9096,9097],{"class":514},"Mặt sau hiển thị",[471,9099,521],{"class":484},[471,9101,725],{"class":488},[471,9103,508],{"class":484},[471,9105,9106,9108,9110,9112,9114,9116,9119,9121,9123,9126,9128,9130],{"class":473,"line":609},[471,9107,485],{"class":484},[471,9109,725],{"class":488},[471,9111,493],{"class":492},[471,9113,496],{"class":484},[471,9115,499],{"class":484},[471,9117,9118],{"class":502},"backface-hidden",[471,9120,499],{"class":484},[471,9122,651],{"class":484},[471,9124,9125],{"class":514},"Mặt sau ẩn (cần cho card flip)",[471,9127,521],{"class":484},[471,9129,725],{"class":488},[471,9131,508],{"class":484},[824,9133,9134],{"id":8278},"Transform Origin",[462,9136,9138],{"className":464,"code":9137,"language":466,"meta":467,"style":467},"\u003Cdiv class=\"origin-center\">Tâm (default)\u003C\u002Fdiv>\n\u003Cdiv class=\"origin-top\">Đỉnh\u003C\u002Fdiv>\n\u003Cdiv class=\"origin-bottom-right\">Góc dưới phải\u003C\u002Fdiv>\n\u003Cdiv class=\"origin-top-left\">Góc trên trái\u003C\u002Fdiv>\n",[432,9139,9140,9168,9196,9224],{"__ignoreMap":467},[471,9141,9142,9144,9146,9148,9150,9152,9155,9157,9159,9162,9164,9166],{"class":473,"line":474},[471,9143,485],{"class":484},[471,9145,725],{"class":488},[471,9147,493],{"class":492},[471,9149,496],{"class":484},[471,9151,499],{"class":484},[471,9153,9154],{"class":502},"origin-center",[471,9156,499],{"class":484},[471,9158,651],{"class":484},[471,9160,9161],{"class":514},"Tâm (default)",[471,9163,521],{"class":484},[471,9165,725],{"class":488},[471,9167,508],{"class":484},[471,9169,9170,9172,9174,9176,9178,9180,9183,9185,9187,9190,9192,9194],{"class":473,"line":481},[471,9171,485],{"class":484},[471,9173,725],{"class":488},[471,9175,493],{"class":492},[471,9177,496],{"class":484},[471,9179,499],{"class":484},[471,9181,9182],{"class":502},"origin-top",[471,9184,499],{"class":484},[471,9186,651],{"class":484},[471,9188,9189],{"class":514},"Đỉnh",[471,9191,521],{"class":484},[471,9193,725],{"class":488},[471,9195,508],{"class":484},[471,9197,9198,9200,9202,9204,9206,9208,9211,9213,9215,9218,9220,9222],{"class":473,"line":511},[471,9199,485],{"class":484},[471,9201,725],{"class":488},[471,9203,493],{"class":492},[471,9205,496],{"class":484},[471,9207,499],{"class":484},[471,9209,9210],{"class":502},"origin-bottom-right",[471,9212,499],{"class":484},[471,9214,651],{"class":484},[471,9216,9217],{"class":514},"Góc dưới phải",[471,9219,521],{"class":484},[471,9221,725],{"class":488},[471,9223,508],{"class":484},[471,9225,9226,9228,9230,9232,9234,9236,9239,9241,9243,9246,9248,9250],{"class":473,"line":518},[471,9227,485],{"class":484},[471,9229,725],{"class":488},[471,9231,493],{"class":492},[471,9233,496],{"class":484},[471,9235,499],{"class":484},[471,9237,9238],{"class":502},"origin-top-left",[471,9240,499],{"class":484},[471,9242,651],{"class":484},[471,9244,9245],{"class":514},"Góc trên trái",[471,9247,521],{"class":484},[471,9249,725],{"class":488},[471,9251,508],{"class":484},[824,9253,9255],{"id":9254},"bài-tập-8-card-flip-animation-3d-rotate-y","Bài tập 8: Card flip animation (3D rotate-y)",[453,9257,9258,9260],{},[457,9259,1404],{}," Card có 2 mặt (trước\u002Fsau), lật 180deg khi hover sử dụng 3D transform.",[462,9262,9264],{"className":1408,"code":9263,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-sm mx-auto p-8\">\n    \u003Ch2 class=\"text-xl font-bold text-gray-900 mb-6\">Card Flip 3D\u003C\u002Fh2>\n\n    \u003C!-- Container với perspective -->\n    \u003Cdiv class=\"group perspective-[1000px]\">\n      \u003Cdiv class=\"relative w-full aspect-[4\u002F3] transition-transform duration-700 ease-in-out transform-gpu group-hover:[transform:rotateY(180deg)]\" style=\"transform-style: preserve-3d;\">\n\n        \u003C!-- Mặt trước -->\n        \u003Cdiv class=\"absolute inset-0 backface-hidden rounded-2xl overflow-hidden shadow-lg\">\n          \u003Cimg\n            src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1506905925346-21bda4d32df4\"\n            alt=\"Front\"\n            class=\"w-full h-full object-cover\"\n          \u002F>\n          \u003Cdiv class=\"absolute inset-0 bg-gradient-to-t from-black\u002F60 to-transparent flex items-end p-6\">\n            \u003Cdiv>\n              \u003Ch3 class=\"text-white text-xl font-bold\">Núi Phú Sĩ\u003C\u002Fh3>\n              \u003Cp class=\"text-white\u002F80 text-sm mt-1\">Nhật Bản\u003C\u002Fp>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Mặt sau -->\n        \u003Cdiv class=\"absolute inset-0 backface-hidden rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg flex flex-col items-center justify-center p-6 text-center text-white\" style=\"transform: rotateY(180deg);\">\n          \u003Ch3 class=\"text-xl font-bold\">Thông tin chi tiết\u003C\u002Fh3>\n          \u003Cp class=\"mt-3 text-white\u002F80 text-sm leading-relaxed\">\n            Núi Phú Sĩ cao 3,776m — ngọn núi cao nhất Nhật Bản.\n            Được UNESCO công nhận là Di sản Văn hóa Thế giới năm 2013.\n          \u003C\u002Fp>\n          \u003Cbutton class=\"mt-6 px-5 py-2 bg-white text-indigo-600 text-sm font-semibold rounded-lg hover:bg-indigo-50 transition-colors\">\n            Khám phá ngay\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,9265,9266,9274,9292,9320,9324,9329,9348,9379,9383,9388,9407,9413,9427,9441,9454,9459,9478,9486,9514,9542,9550,9558,9566,9570,9575,9605,9633,9652,9657,9662,9670,9689,9694,9702,9710,9718,9726,9734],{"__ignoreMap":467},[471,9267,9268,9270,9272],{"class":473,"line":474},[471,9269,485],{"class":484},[471,9271,1419],{"class":488},[471,9273,508],{"class":484},[471,9275,9276,9278,9280,9282,9284,9286,9288,9290],{"class":473,"line":481},[471,9277,744],{"class":484},[471,9279,725],{"class":488},[471,9281,493],{"class":492},[471,9283,496],{"class":484},[471,9285,499],{"class":484},[471,9287,7730],{"class":502},[471,9289,499],{"class":484},[471,9291,508],{"class":484},[471,9293,9294,9296,9298,9300,9302,9304,9307,9309,9311,9314,9316,9318],{"class":473,"line":511},[471,9295,1445],{"class":484},[471,9297,427],{"class":488},[471,9299,493],{"class":492},[471,9301,496],{"class":484},[471,9303,499],{"class":484},[471,9305,9306],{"class":502},"text-xl font-bold text-gray-900 mb-6",[471,9308,499],{"class":484},[471,9310,651],{"class":484},[471,9312,9313],{"class":514},"Card Flip 3D",[471,9315,521],{"class":484},[471,9317,427],{"class":488},[471,9319,508],{"class":484},[471,9321,9322],{"class":473,"line":518},[471,9323,532],{"emptyLinePlaceholder":531},[471,9325,9326],{"class":473,"line":528},[471,9327,9328],{"class":477},"    \u003C!-- Container với perspective -->\n",[471,9330,9331,9333,9335,9337,9339,9341,9344,9346],{"class":473,"line":535},[471,9332,1445],{"class":484},[471,9334,725],{"class":488},[471,9336,493],{"class":492},[471,9338,496],{"class":484},[471,9340,499],{"class":484},[471,9342,9343],{"class":502},"group perspective-[1000px]",[471,9345,499],{"class":484},[471,9347,508],{"class":484},[471,9349,9350,9352,9354,9356,9358,9360,9363,9365,9368,9370,9372,9375,9377],{"class":473,"line":541},[471,9351,1502],{"class":484},[471,9353,725],{"class":488},[471,9355,493],{"class":492},[471,9357,496],{"class":484},[471,9359,499],{"class":484},[471,9361,9362],{"class":502},"relative w-full aspect-[4\u002F3] transition-transform duration-700 ease-in-out transform-gpu group-hover:[transform:rotateY(180deg)]",[471,9364,499],{"class":484},[471,9366,9367],{"class":492}," style",[471,9369,496],{"class":484},[471,9371,499],{"class":484},[471,9373,9374],{"class":502},"transform-style: preserve-3d;",[471,9376,499],{"class":484},[471,9378,508],{"class":484},[471,9380,9381],{"class":473,"line":563},[471,9382,532],{"emptyLinePlaceholder":531},[471,9384,9385],{"class":473,"line":568},[471,9386,9387],{"class":477},"        \u003C!-- Mặt trước -->\n",[471,9389,9390,9392,9394,9396,9398,9400,9403,9405],{"class":473,"line":574},[471,9391,1584],{"class":484},[471,9393,725],{"class":488},[471,9395,493],{"class":492},[471,9397,496],{"class":484},[471,9399,499],{"class":484},[471,9401,9402],{"class":502},"absolute inset-0 backface-hidden rounded-2xl overflow-hidden shadow-lg",[471,9404,499],{"class":484},[471,9406,508],{"class":484},[471,9408,9409,9411],{"class":473,"line":594},[471,9410,1657],{"class":484},[471,9412,2421],{"class":488},[471,9414,9415,9418,9420,9422,9425],{"class":473,"line":600},[471,9416,9417],{"class":492},"            src",[471,9419,496],{"class":484},[471,9421,499],{"class":484},[471,9423,9424],{"class":502},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1506905925346-21bda4d32df4",[471,9426,2436],{"class":484},[471,9428,9429,9432,9434,9436,9439],{"class":473,"line":609},[471,9430,9431],{"class":492},"            alt",[471,9433,496],{"class":484},[471,9435,499],{"class":484},[471,9437,9438],{"class":502},"Front",[471,9440,2436],{"class":484},[471,9442,9443,9445,9447,9449,9452],{"class":473,"line":614},[471,9444,7102],{"class":492},[471,9446,496],{"class":484},[471,9448,499],{"class":484},[471,9450,9451],{"class":502},"w-full h-full object-cover",[471,9453,2436],{"class":484},[471,9455,9456],{"class":473,"line":620},[471,9457,9458],{"class":484},"          \u002F>\n",[471,9460,9461,9463,9465,9467,9469,9471,9474,9476],{"class":473,"line":663},[471,9462,1657],{"class":484},[471,9464,725],{"class":488},[471,9466,493],{"class":492},[471,9468,496],{"class":484},[471,9470,499],{"class":484},[471,9472,9473],{"class":502},"absolute inset-0 bg-gradient-to-t from-black\u002F60 to-transparent flex items-end p-6",[471,9475,499],{"class":484},[471,9477,508],{"class":484},[471,9479,9480,9482,9484],{"class":473,"line":668},[471,9481,1836],{"class":484},[471,9483,725],{"class":488},[471,9485,508],{"class":484},[471,9487,9488,9490,9492,9494,9496,9498,9501,9503,9505,9508,9510,9512],{"class":473,"line":674},[471,9489,4294],{"class":484},[471,9491,824],{"class":488},[471,9493,493],{"class":492},[471,9495,496],{"class":484},[471,9497,499],{"class":484},[471,9499,9500],{"class":502},"text-white text-xl font-bold",[471,9502,499],{"class":484},[471,9504,651],{"class":484},[471,9506,9507],{"class":514},"Núi Phú Sĩ",[471,9509,521],{"class":484},[471,9511,824],{"class":488},[471,9513,508],{"class":484},[471,9515,9516,9518,9520,9522,9524,9526,9529,9531,9533,9536,9538,9540],{"class":473,"line":694},[471,9517,4294],{"class":484},[471,9519,453],{"class":488},[471,9521,493],{"class":492},[471,9523,496],{"class":484},[471,9525,499],{"class":484},[471,9527,9528],{"class":502},"text-white\u002F80 text-sm mt-1",[471,9530,499],{"class":484},[471,9532,651],{"class":484},[471,9534,9535],{"class":514},"Nhật Bản",[471,9537,521],{"class":484},[471,9539,453],{"class":488},[471,9541,508],{"class":484},[471,9543,9544,9546,9548],{"class":473,"line":700},[471,9545,4344],{"class":484},[471,9547,725],{"class":488},[471,9549,508],{"class":484},[471,9551,9552,9554,9556],{"class":473,"line":709},[471,9553,1886],{"class":484},[471,9555,725],{"class":488},[471,9557,508],{"class":484},[471,9559,9560,9562,9564],{"class":473,"line":714},[471,9561,1714],{"class":484},[471,9563,725],{"class":488},[471,9565,508],{"class":484},[471,9567,9568],{"class":473,"line":720},[471,9569,532],{"emptyLinePlaceholder":531},[471,9571,9572],{"class":473,"line":741},[471,9573,9574],{"class":477},"        \u003C!-- Mặt sau -->\n",[471,9576,9577,9579,9581,9583,9585,9587,9590,9592,9594,9596,9598,9601,9603],{"class":473,"line":772},[471,9578,1584],{"class":484},[471,9580,725],{"class":488},[471,9582,493],{"class":492},[471,9584,496],{"class":484},[471,9586,499],{"class":484},[471,9588,9589],{"class":502},"absolute inset-0 backface-hidden rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-lg flex flex-col items-center justify-center p-6 text-center text-white",[471,9591,499],{"class":484},[471,9593,9367],{"class":492},[471,9595,496],{"class":484},[471,9597,499],{"class":484},[471,9599,9600],{"class":502},"transform: rotateY(180deg);",[471,9602,499],{"class":484},[471,9604,508],{"class":484},[471,9606,9607,9609,9611,9613,9615,9617,9620,9622,9624,9627,9629,9631],{"class":473,"line":816},[471,9608,1657],{"class":484},[471,9610,824],{"class":488},[471,9612,493],{"class":492},[471,9614,496],{"class":484},[471,9616,499],{"class":484},[471,9618,9619],{"class":502},"text-xl font-bold",[471,9621,499],{"class":484},[471,9623,651],{"class":484},[471,9625,9626],{"class":514},"Thông tin chi tiết",[471,9628,521],{"class":484},[471,9630,824],{"class":488},[471,9632,508],{"class":484},[471,9634,9635,9637,9639,9641,9643,9645,9648,9650],{"class":473,"line":1833},[471,9636,1657],{"class":484},[471,9638,453],{"class":488},[471,9640,493],{"class":492},[471,9642,496],{"class":484},[471,9644,499],{"class":484},[471,9646,9647],{"class":502},"mt-3 text-white\u002F80 text-sm leading-relaxed",[471,9649,499],{"class":484},[471,9651,508],{"class":484},[471,9653,9654],{"class":473,"line":1883},[471,9655,9656],{"class":514},"            Núi Phú Sĩ cao 3,776m — ngọn núi cao nhất Nhật Bản.\n",[471,9658,9659],{"class":473,"line":1893},[471,9660,9661],{"class":514},"            Được UNESCO công nhận là Di sản Văn hóa Thế giới năm 2013.\n",[471,9663,9664,9666,9668],{"class":473,"line":1902},[471,9665,1886],{"class":484},[471,9667,453],{"class":488},[471,9669,508],{"class":484},[471,9671,9672,9674,9676,9678,9680,9682,9685,9687],{"class":473,"line":1911},[471,9673,1657],{"class":484},[471,9675,489],{"class":488},[471,9677,493],{"class":492},[471,9679,496],{"class":484},[471,9681,499],{"class":484},[471,9683,9684],{"class":502},"mt-6 px-5 py-2 bg-white text-indigo-600 text-sm font-semibold rounded-lg hover:bg-indigo-50 transition-colors",[471,9686,499],{"class":484},[471,9688,508],{"class":484},[471,9690,9691],{"class":473,"line":1921},[471,9692,9693],{"class":514},"            Khám phá ngay\n",[471,9695,9696,9698,9700],{"class":473,"line":1926},[471,9697,1886],{"class":484},[471,9699,489],{"class":488},[471,9701,508],{"class":484},[471,9703,9704,9706,9708],{"class":473,"line":1932},[471,9705,1714],{"class":484},[471,9707,725],{"class":488},[471,9709,508],{"class":484},[471,9711,9712,9714,9716],{"class":473,"line":1951},[471,9713,1723],{"class":484},[471,9715,725],{"class":488},[471,9717,508],{"class":484},[471,9719,9720,9722,9724],{"class":473,"line":1979},[471,9721,1914],{"class":484},[471,9723,725],{"class":488},[471,9725,508],{"class":484},[471,9727,9728,9730,9732],{"class":473,"line":1984},[471,9729,885],{"class":484},[471,9731,725],{"class":488},[471,9733,508],{"class":484},[471,9735,9736,9738,9740],{"class":473,"line":2000},[471,9737,521],{"class":484},[471,9739,1419],{"class":488},[471,9741,508],{"class":484},[824,9743,9745],{"id":9744},"bài-tập-9-hover-scale-effect-on-image-cards","Bài tập 9: Hover scale effect on image cards",[453,9747,9748,9750],{},[457,9749,1404],{}," Grid ảnh — mỗi ảnh phóng to nhẹ khi hover, kèm overlay caption trượt lên.",[462,9752,9754],{"className":1408,"code":9753,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-5xl mx-auto p-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-8\">Bộ sưu tập\u003C\u002Fh2>\n\n    \u003Cdiv class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n      \u003C!-- Card 1 -->\n      \u003Cdiv class=\"group relative overflow-hidden rounded-xl aspect-[4\u002F5] cursor-pointer\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1506744038136-46273834b3fb\"\n          alt=\"\"\n          class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-500\"\n        \u002F>\n        \u003Cdiv class=\"absolute inset-0 bg-gradient-to-t from-black\u002F70 via-black\u002F20 to-transparent\n                    opacity-0 group-hover:opacity-100 transition-opacity duration-300\">\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"absolute bottom-0 left-0 right-0 p-5 translate-y-4 group-hover:translate-y-0\n                    transition-transform duration-300\">\n          \u003Ch3 class=\"text-white font-semibold text-lg\">Hồ Moraine\u003C\u002Fh3>\n          \u003Cp class=\"text-white\u002F70 text-sm mt-1\">Banff, Canada\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 2 -->\n      \u003Cdiv class=\"group relative overflow-hidden rounded-xl aspect-[4\u002F5] cursor-pointer\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1469474968028-56623f02e42e\"\n          alt=\"\"\n          class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-500\"\n        \u002F>\n        \u003Cdiv class=\"absolute inset-0 bg-gradient-to-t from-black\u002F70 via-black\u002F20 to-transparent\n                    opacity-0 group-hover:opacity-100 transition-opacity duration-300\">\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"absolute bottom-0 left-0 right-0 p-5 translate-y-4 group-hover:translate-y-0\n                    transition-transform duration-300\">\n          \u003Ch3 class=\"text-white font-semibold text-lg\">Rừng nhiệt đới\u003C\u002Fh3>\n          \u003Cp class=\"text-white\u002F70 text-sm mt-1\">Costa Rica\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 3 -->\n      \u003Cdiv class=\"group relative overflow-hidden rounded-xl aspect-[4\u002F5] cursor-pointer\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1472214103451-9374bd1c798e\"\n          alt=\"\"\n          class=\"w-full h-full object-cover group-hover:scale-110 transition-transform duration-500\"\n        \u002F>\n        \u003Cdiv class=\"absolute inset-0 bg-gradient-to-t from-black\u002F70 via-black\u002F20 to-transparent\n                    opacity-0 group-hover:opacity-100 transition-opacity duration-300\">\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"absolute bottom-0 left-0 right-0 p-5 translate-y-4 group-hover:translate-y-0\n                    transition-transform duration-300\">\n          \u003Ch3 class=\"text-white font-semibold text-lg\">Đồng cỏ mùa thu\u003C\u002Fh3>\n          \u003Cp class=\"text-white\u002F70 text-sm mt-1\">Tuscany, Italy\u003C\u002Fp>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,9755,9756,9764,9783,9810,9814,9833,9838,9857,9863,9876,9885,9897,9901,9916,9925,9933,9948,9957,9985,10013,10021,10029,10033,10038,10056,10062,10075,10083,10095,10099,10113,10121,10129,10143,10151,10178,10205,10213,10221,10225,10230,10248,10254,10267,10275,10287,10291,10305,10313,10321,10335,10343,10370,10397,10405,10413,10421,10429],{"__ignoreMap":467},[471,9757,9758,9760,9762],{"class":473,"line":474},[471,9759,485],{"class":484},[471,9761,1419],{"class":488},[471,9763,508],{"class":484},[471,9765,9766,9768,9770,9772,9774,9776,9779,9781],{"class":473,"line":481},[471,9767,744],{"class":484},[471,9769,725],{"class":488},[471,9771,493],{"class":492},[471,9773,496],{"class":484},[471,9775,499],{"class":484},[471,9777,9778],{"class":502},"max-w-5xl mx-auto p-8",[471,9780,499],{"class":484},[471,9782,508],{"class":484},[471,9784,9785,9787,9789,9791,9793,9795,9797,9799,9801,9804,9806,9808],{"class":473,"line":511},[471,9786,1445],{"class":484},[471,9788,427],{"class":488},[471,9790,493],{"class":492},[471,9792,496],{"class":484},[471,9794,499],{"class":484},[471,9796,2964],{"class":502},[471,9798,499],{"class":484},[471,9800,651],{"class":484},[471,9802,9803],{"class":514},"Bộ sưu tập",[471,9805,521],{"class":484},[471,9807,427],{"class":488},[471,9809,508],{"class":484},[471,9811,9812],{"class":473,"line":518},[471,9813,532],{"emptyLinePlaceholder":531},[471,9815,9816,9818,9820,9822,9824,9826,9829,9831],{"class":473,"line":528},[471,9817,1445],{"class":484},[471,9819,725],{"class":488},[471,9821,493],{"class":492},[471,9823,496],{"class":484},[471,9825,499],{"class":484},[471,9827,9828],{"class":502},"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",[471,9830,499],{"class":484},[471,9832,508],{"class":484},[471,9834,9835],{"class":473,"line":535},[471,9836,9837],{"class":477},"      \u003C!-- Card 1 -->\n",[471,9839,9840,9842,9844,9846,9848,9850,9853,9855],{"class":473,"line":541},[471,9841,1502],{"class":484},[471,9843,725],{"class":488},[471,9845,493],{"class":492},[471,9847,496],{"class":484},[471,9849,499],{"class":484},[471,9851,9852],{"class":502},"group relative overflow-hidden rounded-xl aspect-[4\u002F5] cursor-pointer",[471,9854,499],{"class":484},[471,9856,508],{"class":484},[471,9858,9859,9861],{"class":473,"line":563},[471,9860,1584],{"class":484},[471,9862,2421],{"class":488},[471,9864,9865,9867,9869,9871,9874],{"class":473,"line":568},[471,9866,2426],{"class":492},[471,9868,496],{"class":484},[471,9870,499],{"class":484},[471,9872,9873],{"class":502},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1506744038136-46273834b3fb",[471,9875,2436],{"class":484},[471,9877,9878,9880,9882],{"class":473,"line":574},[471,9879,2441],{"class":492},[471,9881,496],{"class":484},[471,9883,9884],{"class":484},"\"\"\n",[471,9886,9887,9889,9891,9893,9895],{"class":473,"line":594},[471,9888,2455],{"class":492},[471,9890,496],{"class":484},[471,9892,499],{"class":484},[471,9894,2462],{"class":502},[471,9896,2436],{"class":484},[471,9898,9899],{"class":473,"line":600},[471,9900,2469],{"class":484},[471,9902,9903,9905,9907,9909,9911,9913],{"class":473,"line":609},[471,9904,1584],{"class":484},[471,9906,725],{"class":488},[471,9908,493],{"class":492},[471,9910,496],{"class":484},[471,9912,499],{"class":484},[471,9914,9915],{"class":502},"absolute inset-0 bg-gradient-to-t from-black\u002F70 via-black\u002F20 to-transparent\n",[471,9917,9918,9921,9923],{"class":473,"line":614},[471,9919,9920],{"class":502},"                    opacity-0 group-hover:opacity-100 transition-opacity duration-300",[471,9922,499],{"class":484},[471,9924,508],{"class":484},[471,9926,9927,9929,9931],{"class":473,"line":620},[471,9928,1714],{"class":484},[471,9930,725],{"class":488},[471,9932,508],{"class":484},[471,9934,9935,9937,9939,9941,9943,9945],{"class":473,"line":663},[471,9936,1584],{"class":484},[471,9938,725],{"class":488},[471,9940,493],{"class":492},[471,9942,496],{"class":484},[471,9944,499],{"class":484},[471,9946,9947],{"class":502},"absolute bottom-0 left-0 right-0 p-5 translate-y-4 group-hover:translate-y-0\n",[471,9949,9950,9953,9955],{"class":473,"line":668},[471,9951,9952],{"class":502},"                    transition-transform duration-300",[471,9954,499],{"class":484},[471,9956,508],{"class":484},[471,9958,9959,9961,9963,9965,9967,9969,9972,9974,9976,9979,9981,9983],{"class":473,"line":674},[471,9960,1657],{"class":484},[471,9962,824],{"class":488},[471,9964,493],{"class":492},[471,9966,496],{"class":484},[471,9968,499],{"class":484},[471,9970,9971],{"class":502},"text-white font-semibold text-lg",[471,9973,499],{"class":484},[471,9975,651],{"class":484},[471,9977,9978],{"class":514},"Hồ Moraine",[471,9980,521],{"class":484},[471,9982,824],{"class":488},[471,9984,508],{"class":484},[471,9986,9987,9989,9991,9993,9995,9997,10000,10002,10004,10007,10009,10011],{"class":473,"line":694},[471,9988,1657],{"class":484},[471,9990,453],{"class":488},[471,9992,493],{"class":492},[471,9994,496],{"class":484},[471,9996,499],{"class":484},[471,9998,9999],{"class":502},"text-white\u002F70 text-sm mt-1",[471,10001,499],{"class":484},[471,10003,651],{"class":484},[471,10005,10006],{"class":514},"Banff, Canada",[471,10008,521],{"class":484},[471,10010,453],{"class":488},[471,10012,508],{"class":484},[471,10014,10015,10017,10019],{"class":473,"line":700},[471,10016,1714],{"class":484},[471,10018,725],{"class":488},[471,10020,508],{"class":484},[471,10022,10023,10025,10027],{"class":473,"line":709},[471,10024,1723],{"class":484},[471,10026,725],{"class":488},[471,10028,508],{"class":484},[471,10030,10031],{"class":473,"line":714},[471,10032,532],{"emptyLinePlaceholder":531},[471,10034,10035],{"class":473,"line":720},[471,10036,10037],{"class":477},"      \u003C!-- Card 2 -->\n",[471,10039,10040,10042,10044,10046,10048,10050,10052,10054],{"class":473,"line":741},[471,10041,1502],{"class":484},[471,10043,725],{"class":488},[471,10045,493],{"class":492},[471,10047,496],{"class":484},[471,10049,499],{"class":484},[471,10051,9852],{"class":502},[471,10053,499],{"class":484},[471,10055,508],{"class":484},[471,10057,10058,10060],{"class":473,"line":772},[471,10059,1584],{"class":484},[471,10061,2421],{"class":488},[471,10063,10064,10066,10068,10070,10073],{"class":473,"line":816},[471,10065,2426],{"class":492},[471,10067,496],{"class":484},[471,10069,499],{"class":484},[471,10071,10072],{"class":502},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1469474968028-56623f02e42e",[471,10074,2436],{"class":484},[471,10076,10077,10079,10081],{"class":473,"line":1833},[471,10078,2441],{"class":492},[471,10080,496],{"class":484},[471,10082,9884],{"class":484},[471,10084,10085,10087,10089,10091,10093],{"class":473,"line":1883},[471,10086,2455],{"class":492},[471,10088,496],{"class":484},[471,10090,499],{"class":484},[471,10092,2462],{"class":502},[471,10094,2436],{"class":484},[471,10096,10097],{"class":473,"line":1893},[471,10098,2469],{"class":484},[471,10100,10101,10103,10105,10107,10109,10111],{"class":473,"line":1902},[471,10102,1584],{"class":484},[471,10104,725],{"class":488},[471,10106,493],{"class":492},[471,10108,496],{"class":484},[471,10110,499],{"class":484},[471,10112,9915],{"class":502},[471,10114,10115,10117,10119],{"class":473,"line":1911},[471,10116,9920],{"class":502},[471,10118,499],{"class":484},[471,10120,508],{"class":484},[471,10122,10123,10125,10127],{"class":473,"line":1921},[471,10124,1714],{"class":484},[471,10126,725],{"class":488},[471,10128,508],{"class":484},[471,10130,10131,10133,10135,10137,10139,10141],{"class":473,"line":1926},[471,10132,1584],{"class":484},[471,10134,725],{"class":488},[471,10136,493],{"class":492},[471,10138,496],{"class":484},[471,10140,499],{"class":484},[471,10142,9947],{"class":502},[471,10144,10145,10147,10149],{"class":473,"line":1932},[471,10146,9952],{"class":502},[471,10148,499],{"class":484},[471,10150,508],{"class":484},[471,10152,10153,10155,10157,10159,10161,10163,10165,10167,10169,10172,10174,10176],{"class":473,"line":1951},[471,10154,1657],{"class":484},[471,10156,824],{"class":488},[471,10158,493],{"class":492},[471,10160,496],{"class":484},[471,10162,499],{"class":484},[471,10164,9971],{"class":502},[471,10166,499],{"class":484},[471,10168,651],{"class":484},[471,10170,10171],{"class":514},"Rừng nhiệt đới",[471,10173,521],{"class":484},[471,10175,824],{"class":488},[471,10177,508],{"class":484},[471,10179,10180,10182,10184,10186,10188,10190,10192,10194,10196,10199,10201,10203],{"class":473,"line":1979},[471,10181,1657],{"class":484},[471,10183,453],{"class":488},[471,10185,493],{"class":492},[471,10187,496],{"class":484},[471,10189,499],{"class":484},[471,10191,9999],{"class":502},[471,10193,499],{"class":484},[471,10195,651],{"class":484},[471,10197,10198],{"class":514},"Costa Rica",[471,10200,521],{"class":484},[471,10202,453],{"class":488},[471,10204,508],{"class":484},[471,10206,10207,10209,10211],{"class":473,"line":1984},[471,10208,1714],{"class":484},[471,10210,725],{"class":488},[471,10212,508],{"class":484},[471,10214,10215,10217,10219],{"class":473,"line":2000},[471,10216,1723],{"class":484},[471,10218,725],{"class":488},[471,10220,508],{"class":484},[471,10222,10223],{"class":473,"line":2006},[471,10224,532],{"emptyLinePlaceholder":531},[471,10226,10227],{"class":473,"line":2012},[471,10228,10229],{"class":477},"      \u003C!-- Card 3 -->\n",[471,10231,10232,10234,10236,10238,10240,10242,10244,10246],{"class":473,"line":2018},[471,10233,1502],{"class":484},[471,10235,725],{"class":488},[471,10237,493],{"class":492},[471,10239,496],{"class":484},[471,10241,499],{"class":484},[471,10243,9852],{"class":502},[471,10245,499],{"class":484},[471,10247,508],{"class":484},[471,10249,10250,10252],{"class":473,"line":2027},[471,10251,1584],{"class":484},[471,10253,2421],{"class":488},[471,10255,10256,10258,10260,10262,10265],{"class":473,"line":2033},[471,10257,2426],{"class":492},[471,10259,496],{"class":484},[471,10261,499],{"class":484},[471,10263,10264],{"class":502},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1472214103451-9374bd1c798e",[471,10266,2436],{"class":484},[471,10268,10269,10271,10273],{"class":473,"line":2042},[471,10270,2441],{"class":492},[471,10272,496],{"class":484},[471,10274,9884],{"class":484},[471,10276,10277,10279,10281,10283,10285],{"class":473,"line":2051},[471,10278,2455],{"class":492},[471,10280,496],{"class":484},[471,10282,499],{"class":484},[471,10284,2462],{"class":502},[471,10286,2436],{"class":484},[471,10288,10289],{"class":473,"line":2056},[471,10290,2469],{"class":484},[471,10292,10293,10295,10297,10299,10301,10303],{"class":473,"line":2062},[471,10294,1584],{"class":484},[471,10296,725],{"class":488},[471,10298,493],{"class":492},[471,10300,496],{"class":484},[471,10302,499],{"class":484},[471,10304,9915],{"class":502},[471,10306,10307,10309,10311],{"class":473,"line":2081},[471,10308,9920],{"class":502},[471,10310,499],{"class":484},[471,10312,508],{"class":484},[471,10314,10315,10317,10319],{"class":473,"line":2109},[471,10316,1714],{"class":484},[471,10318,725],{"class":488},[471,10320,508],{"class":484},[471,10322,10323,10325,10327,10329,10331,10333],{"class":473,"line":2114},[471,10324,1584],{"class":484},[471,10326,725],{"class":488},[471,10328,493],{"class":492},[471,10330,496],{"class":484},[471,10332,499],{"class":484},[471,10334,9947],{"class":502},[471,10336,10337,10339,10341],{"class":473,"line":2130},[471,10338,9952],{"class":502},[471,10340,499],{"class":484},[471,10342,508],{"class":484},[471,10344,10345,10347,10349,10351,10353,10355,10357,10359,10361,10364,10366,10368],{"class":473,"line":2136},[471,10346,1657],{"class":484},[471,10348,824],{"class":488},[471,10350,493],{"class":492},[471,10352,496],{"class":484},[471,10354,499],{"class":484},[471,10356,9971],{"class":502},[471,10358,499],{"class":484},[471,10360,651],{"class":484},[471,10362,10363],{"class":514},"Đồng cỏ mùa thu",[471,10365,521],{"class":484},[471,10367,824],{"class":488},[471,10369,508],{"class":484},[471,10371,10372,10374,10376,10378,10380,10382,10384,10386,10388,10391,10393,10395],{"class":473,"line":2142},[471,10373,1657],{"class":484},[471,10375,453],{"class":488},[471,10377,493],{"class":492},[471,10379,496],{"class":484},[471,10381,499],{"class":484},[471,10383,9999],{"class":502},[471,10385,499],{"class":484},[471,10387,651],{"class":484},[471,10389,10390],{"class":514},"Tuscany, Italy",[471,10392,521],{"class":484},[471,10394,453],{"class":488},[471,10396,508],{"class":484},[471,10398,10399,10401,10403],{"class":473,"line":2148},[471,10400,1714],{"class":484},[471,10402,725],{"class":488},[471,10404,508],{"class":484},[471,10406,10407,10409,10411],{"class":473,"line":2157},[471,10408,1723],{"class":484},[471,10410,725],{"class":488},[471,10412,508],{"class":484},[471,10414,10415,10417,10419],{"class":473,"line":2163},[471,10416,1914],{"class":484},[471,10418,725],{"class":488},[471,10420,508],{"class":484},[471,10422,10423,10425,10427],{"class":473,"line":2172},[471,10424,885],{"class":484},[471,10426,725],{"class":488},[471,10428,508],{"class":484},[471,10430,10431,10433,10435],{"class":473,"line":2181},[471,10432,521],{"class":484},[471,10434,1419],{"class":488},[471,10436,508],{"class":484},[824,10438,10440],{"id":10439},"bài-tập-10-slide-in-panel-from-right","Bài tập 10: Slide-in panel from right",[453,10442,10443,10445],{},[457,10444,1404],{}," Side panel trượt từ phải vào khi click nút, kèm overlay.",[462,10447,10449],{"className":1408,"code":10448,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-lg mx-auto p-8\">\n    \u003Cbutton\n      @click=\"isOpen = true\"\n      class=\"px-6 py-2.5 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors\">\n      Mở Side Panel\n    \u003C\u002Fbutton>\n\n    \u003C!-- Overlay -->\n    \u003Cdiv\n      v-if=\"isOpen\"\n      class=\"fixed inset-0 z-40 bg-black\u002F30 transition-opacity duration-300\"\n      :class=\"showPanel ? 'opacity-100' : 'opacity-0'\"\n      @click=\"closePanel\">\n    \u003C\u002Fdiv>\n\n    \u003C!-- Side Panel -->\n    \u003Cdiv\n      v-if=\"isOpen\"\n      class=\"fixed top-0 right-0 z-50 h-full w-80 bg-white shadow-2xl\n             transition-transform duration-300 ease-in-out\"\n      :class=\"showPanel ? 'translate-x-0' : 'translate-x-full'\">\n      \u003Cdiv class=\"flex items-center justify-between p-5 border-b border-gray-200\">\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900\">Giỏ hàng\u003C\u002Fh3>\n        \u003Cbutton\n          @click=\"closePanel\"\n          class=\"w-8 h-8 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors\">\n          \u003Cspan class=\"text-gray-400 text-xl\">×\u003C\u002Fspan>\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"p-5 space-y-4\">\n        \u003Cdiv class=\"flex gap-3\">\n          \u003Cdiv class=\"w-16 h-16 bg-gray-100 rounded-lg flex-shrink-0\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"flex-1 min-w-0\">\n            \u003Cp class=\"text-sm font-medium text-gray-900 truncate\">Sản phẩm A\u003C\u002Fp>\n            \u003Cp class=\"text-sm text-gray-500\">Số lượng: 1\u003C\u002Fp>\n            \u003Cp class=\"text-sm font-semibold text-gray-900 mt-1\">350.000đ\u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n\n        \u003Cdiv class=\"flex gap-3\">\n          \u003Cdiv class=\"w-16 h-16 bg-gray-100 rounded-lg flex-shrink-0\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"flex-1 min-w-0\">\n            \u003Cp class=\"text-sm font-medium text-gray-900 truncate\">Sản phẩm B\u003C\u002Fp>\n            \u003Cp class=\"text-sm text-gray-500\">Số lượng: 2\u003C\u002Fp>\n            \u003Cp class=\"text-sm font-semibold text-gray-900 mt-1\">590.000đ\u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003Cdiv class=\"absolute bottom-0 left-0 right-0 p-5 border-t border-gray-200\">\n        \u003Cdiv class=\"flex justify-between mb-4\">\n          \u003Cspan class=\"text-sm text-gray-600\">Tổng cộng\u003C\u002Fspan>\n          \u003Cspan class=\"text-lg font-bold text-gray-900\">940.000đ\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cbutton class=\"w-full py-2.5 bg-indigo-600 text-white font-semibold rounded-lg\n                       hover:bg-indigo-700 transition-colors\">\n          Thanh toán\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, watch, nextTick } from 'vue'\n\nconst isOpen = ref(false)\nconst showPanel = ref(false)\n\nfunction closePanel() {\n  showPanel.value = false\n  setTimeout(() => {\n    isOpen.value = false\n  }, 300)\n}\n\nwatch(isOpen, async (val) => {\n  if (val) {\n    await nextTick()\n    requestAnimationFrame(() => {\n      showPanel.value = true\n    })\n  }\n})\n\u003C\u002Fscript>\n",[432,10450,10451,10459,10477,10483,10495,10509,10514,10522,10526,10531,10537,10550,10563,10577,10592,10600,10604,10609,10615,10627,10638,10645,10660,10679,10706,10712,10725,10739,10765,10773,10781,10785,10804,10823,10846,10865,10893,10921,10949,10957,10965,10969,10987,11009,11027,11054,11081,11108,11116,11124,11132,11136,11155,11174,11202,11229,11237,11251,11260,11265,11273,11281,11289,11297,11305,11309,11329,11355,11359,11375,11392,11396,11407,11420,11432,11444,11452,11456,11460,11480,11492,11500,11512,11525,11531,11535,11541],{"__ignoreMap":467},[471,10452,10453,10455,10457],{"class":473,"line":474},[471,10454,485],{"class":484},[471,10456,1419],{"class":488},[471,10458,508],{"class":484},[471,10460,10461,10463,10465,10467,10469,10471,10473,10475],{"class":473,"line":481},[471,10462,744],{"class":484},[471,10464,725],{"class":488},[471,10466,493],{"class":492},[471,10468,496],{"class":484},[471,10470,499],{"class":484},[471,10472,6827],{"class":502},[471,10474,499],{"class":484},[471,10476,508],{"class":484},[471,10478,10479,10481],{"class":473,"line":511},[471,10480,1445],{"class":484},[471,10482,3774],{"class":488},[471,10484,10485,10487,10489,10491,10493],{"class":473,"line":518},[471,10486,6847],{"class":492},[471,10488,496],{"class":484},[471,10490,499],{"class":484},[471,10492,6854],{"class":502},[471,10494,2436],{"class":484},[471,10496,10497,10499,10501,10503,10505,10507],{"class":473,"line":528},[471,10498,6861],{"class":492},[471,10500,496],{"class":484},[471,10502,499],{"class":484},[471,10504,6868],{"class":502},[471,10506,499],{"class":484},[471,10508,508],{"class":484},[471,10510,10511],{"class":473,"line":535},[471,10512,10513],{"class":514},"      Mở Side Panel\n",[471,10515,10516,10518,10520],{"class":473,"line":541},[471,10517,1914],{"class":484},[471,10519,489],{"class":488},[471,10521,508],{"class":484},[471,10523,10524],{"class":473,"line":563},[471,10525,532],{"emptyLinePlaceholder":531},[471,10527,10528],{"class":473,"line":568},[471,10529,10530],{"class":477},"    \u003C!-- Overlay -->\n",[471,10532,10533,10535],{"class":473,"line":574},[471,10534,1445],{"class":484},[471,10536,6937],{"class":488},[471,10538,10539,10542,10544,10546,10548],{"class":473,"line":594},[471,10540,10541],{"class":492},"      v-if",[471,10543,496],{"class":484},[471,10545,499],{"class":484},[471,10547,6910],{"class":502},[471,10549,2436],{"class":484},[471,10551,10552,10554,10556,10558,10561],{"class":473,"line":600},[471,10553,6861],{"class":492},[471,10555,496],{"class":484},[471,10557,499],{"class":484},[471,10559,10560],{"class":502},"fixed inset-0 z-40 bg-black\u002F30 transition-opacity duration-300",[471,10562,2436],{"class":484},[471,10564,10565,10568,10570,10572,10575],{"class":473,"line":609},[471,10566,10567],{"class":492},"      :class",[471,10569,496],{"class":484},[471,10571,499],{"class":484},[471,10573,10574],{"class":502},"showPanel ? 'opacity-100' : 'opacity-0'",[471,10576,2436],{"class":484},[471,10578,10579,10581,10583,10585,10588,10590],{"class":473,"line":614},[471,10580,6847],{"class":492},[471,10582,496],{"class":484},[471,10584,499],{"class":484},[471,10586,10587],{"class":502},"closePanel",[471,10589,499],{"class":484},[471,10591,508],{"class":484},[471,10593,10594,10596,10598],{"class":473,"line":620},[471,10595,1914],{"class":484},[471,10597,725],{"class":488},[471,10599,508],{"class":484},[471,10601,10602],{"class":473,"line":663},[471,10603,532],{"emptyLinePlaceholder":531},[471,10605,10606],{"class":473,"line":668},[471,10607,10608],{"class":477},"    \u003C!-- Side Panel -->\n",[471,10610,10611,10613],{"class":473,"line":674},[471,10612,1445],{"class":484},[471,10614,6937],{"class":488},[471,10616,10617,10619,10621,10623,10625],{"class":473,"line":694},[471,10618,10541],{"class":492},[471,10620,496],{"class":484},[471,10622,499],{"class":484},[471,10624,6910],{"class":502},[471,10626,2436],{"class":484},[471,10628,10629,10631,10633,10635],{"class":473,"line":700},[471,10630,6861],{"class":492},[471,10632,496],{"class":484},[471,10634,499],{"class":484},[471,10636,10637],{"class":502},"fixed top-0 right-0 z-50 h-full w-80 bg-white shadow-2xl\n",[471,10639,10640,10643],{"class":473,"line":709},[471,10641,10642],{"class":502},"             transition-transform duration-300 ease-in-out",[471,10644,2436],{"class":484},[471,10646,10647,10649,10651,10653,10656,10658],{"class":473,"line":714},[471,10648,10567],{"class":492},[471,10650,496],{"class":484},[471,10652,499],{"class":484},[471,10654,10655],{"class":502},"showPanel ? 'translate-x-0' : 'translate-x-full'",[471,10657,499],{"class":484},[471,10659,508],{"class":484},[471,10661,10662,10664,10666,10668,10670,10672,10675,10677],{"class":473,"line":720},[471,10663,1502],{"class":484},[471,10665,725],{"class":488},[471,10667,493],{"class":492},[471,10669,496],{"class":484},[471,10671,499],{"class":484},[471,10673,10674],{"class":502},"flex items-center justify-between p-5 border-b border-gray-200",[471,10676,499],{"class":484},[471,10678,508],{"class":484},[471,10680,10681,10683,10685,10687,10689,10691,10693,10695,10697,10700,10702,10704],{"class":473,"line":741},[471,10682,1584],{"class":484},[471,10684,824],{"class":488},[471,10686,493],{"class":492},[471,10688,496],{"class":484},[471,10690,499],{"class":484},[471,10692,7065],{"class":502},[471,10694,499],{"class":484},[471,10696,651],{"class":484},[471,10698,10699],{"class":514},"Giỏ hàng",[471,10701,521],{"class":484},[471,10703,824],{"class":488},[471,10705,508],{"class":484},[471,10707,10708,10710],{"class":473,"line":772},[471,10709,1584],{"class":484},[471,10711,3774],{"class":488},[471,10713,10714,10717,10719,10721,10723],{"class":473,"line":816},[471,10715,10716],{"class":492},"          @click",[471,10718,496],{"class":484},[471,10720,499],{"class":484},[471,10722,10587],{"class":502},[471,10724,2436],{"class":484},[471,10726,10727,10729,10731,10733,10735,10737],{"class":473,"line":1833},[471,10728,2455],{"class":492},[471,10730,496],{"class":484},[471,10732,499],{"class":484},[471,10734,7109],{"class":502},[471,10736,499],{"class":484},[471,10738,508],{"class":484},[471,10740,10741,10743,10745,10747,10749,10751,10753,10755,10757,10759,10761,10763],{"class":473,"line":1883},[471,10742,1657],{"class":484},[471,10744,471],{"class":488},[471,10746,493],{"class":492},[471,10748,496],{"class":484},[471,10750,499],{"class":484},[471,10752,7128],{"class":502},[471,10754,499],{"class":484},[471,10756,651],{"class":484},[471,10758,7135],{"class":514},[471,10760,521],{"class":484},[471,10762,471],{"class":488},[471,10764,508],{"class":484},[471,10766,10767,10769,10771],{"class":473,"line":1893},[471,10768,1714],{"class":484},[471,10770,489],{"class":488},[471,10772,508],{"class":484},[471,10774,10775,10777,10779],{"class":473,"line":1902},[471,10776,1723],{"class":484},[471,10778,725],{"class":488},[471,10780,508],{"class":484},[471,10782,10783],{"class":473,"line":1911},[471,10784,532],{"emptyLinePlaceholder":531},[471,10786,10787,10789,10791,10793,10795,10797,10800,10802],{"class":473,"line":1921},[471,10788,1502],{"class":484},[471,10790,725],{"class":488},[471,10792,493],{"class":492},[471,10794,496],{"class":484},[471,10796,499],{"class":484},[471,10798,10799],{"class":502},"p-5 space-y-4",[471,10801,499],{"class":484},[471,10803,508],{"class":484},[471,10805,10806,10808,10810,10812,10814,10816,10819,10821],{"class":473,"line":1926},[471,10807,1584],{"class":484},[471,10809,725],{"class":488},[471,10811,493],{"class":492},[471,10813,496],{"class":484},[471,10815,499],{"class":484},[471,10817,10818],{"class":502},"flex gap-3",[471,10820,499],{"class":484},[471,10822,508],{"class":484},[471,10824,10825,10827,10829,10831,10833,10835,10838,10840,10842,10844],{"class":473,"line":1932},[471,10826,1657],{"class":484},[471,10828,725],{"class":488},[471,10830,493],{"class":492},[471,10832,496],{"class":484},[471,10834,499],{"class":484},[471,10836,10837],{"class":502},"w-16 h-16 bg-gray-100 rounded-lg flex-shrink-0",[471,10839,499],{"class":484},[471,10841,3475],{"class":484},[471,10843,725],{"class":488},[471,10845,508],{"class":484},[471,10847,10848,10850,10852,10854,10856,10858,10861,10863],{"class":473,"line":1951},[471,10849,1657],{"class":484},[471,10851,725],{"class":488},[471,10853,493],{"class":492},[471,10855,496],{"class":484},[471,10857,499],{"class":484},[471,10859,10860],{"class":502},"flex-1 min-w-0",[471,10862,499],{"class":484},[471,10864,508],{"class":484},[471,10866,10867,10869,10871,10873,10875,10877,10880,10882,10884,10887,10889,10891],{"class":473,"line":1979},[471,10868,1836],{"class":484},[471,10870,453],{"class":488},[471,10872,493],{"class":492},[471,10874,496],{"class":484},[471,10876,499],{"class":484},[471,10878,10879],{"class":502},"text-sm font-medium text-gray-900 truncate",[471,10881,499],{"class":484},[471,10883,651],{"class":484},[471,10885,10886],{"class":514},"Sản phẩm A",[471,10888,521],{"class":484},[471,10890,453],{"class":488},[471,10892,508],{"class":484},[471,10894,10895,10897,10899,10901,10903,10905,10908,10910,10912,10915,10917,10919],{"class":473,"line":1984},[471,10896,1836],{"class":484},[471,10898,453],{"class":488},[471,10900,493],{"class":492},[471,10902,496],{"class":484},[471,10904,499],{"class":484},[471,10906,10907],{"class":502},"text-sm text-gray-500",[471,10909,499],{"class":484},[471,10911,651],{"class":484},[471,10913,10914],{"class":514},"Số lượng: 1",[471,10916,521],{"class":484},[471,10918,453],{"class":488},[471,10920,508],{"class":484},[471,10922,10923,10925,10927,10929,10931,10933,10936,10938,10940,10943,10945,10947],{"class":473,"line":2000},[471,10924,1836],{"class":484},[471,10926,453],{"class":488},[471,10928,493],{"class":492},[471,10930,496],{"class":484},[471,10932,499],{"class":484},[471,10934,10935],{"class":502},"text-sm font-semibold text-gray-900 mt-1",[471,10937,499],{"class":484},[471,10939,651],{"class":484},[471,10941,10942],{"class":514},"350.000đ",[471,10944,521],{"class":484},[471,10946,453],{"class":488},[471,10948,508],{"class":484},[471,10950,10951,10953,10955],{"class":473,"line":2006},[471,10952,1886],{"class":484},[471,10954,725],{"class":488},[471,10956,508],{"class":484},[471,10958,10959,10961,10963],{"class":473,"line":2012},[471,10960,1714],{"class":484},[471,10962,725],{"class":488},[471,10964,508],{"class":484},[471,10966,10967],{"class":473,"line":2018},[471,10968,532],{"emptyLinePlaceholder":531},[471,10970,10971,10973,10975,10977,10979,10981,10983,10985],{"class":473,"line":2027},[471,10972,1584],{"class":484},[471,10974,725],{"class":488},[471,10976,493],{"class":492},[471,10978,496],{"class":484},[471,10980,499],{"class":484},[471,10982,10818],{"class":502},[471,10984,499],{"class":484},[471,10986,508],{"class":484},[471,10988,10989,10991,10993,10995,10997,10999,11001,11003,11005,11007],{"class":473,"line":2033},[471,10990,1657],{"class":484},[471,10992,725],{"class":488},[471,10994,493],{"class":492},[471,10996,496],{"class":484},[471,10998,499],{"class":484},[471,11000,10837],{"class":502},[471,11002,499],{"class":484},[471,11004,3475],{"class":484},[471,11006,725],{"class":488},[471,11008,508],{"class":484},[471,11010,11011,11013,11015,11017,11019,11021,11023,11025],{"class":473,"line":2042},[471,11012,1657],{"class":484},[471,11014,725],{"class":488},[471,11016,493],{"class":492},[471,11018,496],{"class":484},[471,11020,499],{"class":484},[471,11022,10860],{"class":502},[471,11024,499],{"class":484},[471,11026,508],{"class":484},[471,11028,11029,11031,11033,11035,11037,11039,11041,11043,11045,11048,11050,11052],{"class":473,"line":2051},[471,11030,1836],{"class":484},[471,11032,453],{"class":488},[471,11034,493],{"class":492},[471,11036,496],{"class":484},[471,11038,499],{"class":484},[471,11040,10879],{"class":502},[471,11042,499],{"class":484},[471,11044,651],{"class":484},[471,11046,11047],{"class":514},"Sản phẩm B",[471,11049,521],{"class":484},[471,11051,453],{"class":488},[471,11053,508],{"class":484},[471,11055,11056,11058,11060,11062,11064,11066,11068,11070,11072,11075,11077,11079],{"class":473,"line":2056},[471,11057,1836],{"class":484},[471,11059,453],{"class":488},[471,11061,493],{"class":492},[471,11063,496],{"class":484},[471,11065,499],{"class":484},[471,11067,10907],{"class":502},[471,11069,499],{"class":484},[471,11071,651],{"class":484},[471,11073,11074],{"class":514},"Số lượng: 2",[471,11076,521],{"class":484},[471,11078,453],{"class":488},[471,11080,508],{"class":484},[471,11082,11083,11085,11087,11089,11091,11093,11095,11097,11099,11102,11104,11106],{"class":473,"line":2062},[471,11084,1836],{"class":484},[471,11086,453],{"class":488},[471,11088,493],{"class":492},[471,11090,496],{"class":484},[471,11092,499],{"class":484},[471,11094,10935],{"class":502},[471,11096,499],{"class":484},[471,11098,651],{"class":484},[471,11100,11101],{"class":514},"590.000đ",[471,11103,521],{"class":484},[471,11105,453],{"class":488},[471,11107,508],{"class":484},[471,11109,11110,11112,11114],{"class":473,"line":2081},[471,11111,1886],{"class":484},[471,11113,725],{"class":488},[471,11115,508],{"class":484},[471,11117,11118,11120,11122],{"class":473,"line":2109},[471,11119,1714],{"class":484},[471,11121,725],{"class":488},[471,11123,508],{"class":484},[471,11125,11126,11128,11130],{"class":473,"line":2114},[471,11127,1723],{"class":484},[471,11129,725],{"class":488},[471,11131,508],{"class":484},[471,11133,11134],{"class":473,"line":2130},[471,11135,532],{"emptyLinePlaceholder":531},[471,11137,11138,11140,11142,11144,11146,11148,11151,11153],{"class":473,"line":2136},[471,11139,1502],{"class":484},[471,11141,725],{"class":488},[471,11143,493],{"class":492},[471,11145,496],{"class":484},[471,11147,499],{"class":484},[471,11149,11150],{"class":502},"absolute bottom-0 left-0 right-0 p-5 border-t border-gray-200",[471,11152,499],{"class":484},[471,11154,508],{"class":484},[471,11156,11157,11159,11161,11163,11165,11167,11170,11172],{"class":473,"line":2142},[471,11158,1584],{"class":484},[471,11160,725],{"class":488},[471,11162,493],{"class":492},[471,11164,496],{"class":484},[471,11166,499],{"class":484},[471,11168,11169],{"class":502},"flex justify-between mb-4",[471,11171,499],{"class":484},[471,11173,508],{"class":484},[471,11175,11176,11178,11180,11182,11184,11186,11189,11191,11193,11196,11198,11200],{"class":473,"line":2148},[471,11177,1657],{"class":484},[471,11179,471],{"class":488},[471,11181,493],{"class":492},[471,11183,496],{"class":484},[471,11185,499],{"class":484},[471,11187,11188],{"class":502},"text-sm text-gray-600",[471,11190,499],{"class":484},[471,11192,651],{"class":484},[471,11194,11195],{"class":514},"Tổng cộng",[471,11197,521],{"class":484},[471,11199,471],{"class":488},[471,11201,508],{"class":484},[471,11203,11204,11206,11208,11210,11212,11214,11216,11218,11220,11223,11225,11227],{"class":473,"line":2157},[471,11205,1657],{"class":484},[471,11207,471],{"class":488},[471,11209,493],{"class":492},[471,11211,496],{"class":484},[471,11213,499],{"class":484},[471,11215,2730],{"class":502},[471,11217,499],{"class":484},[471,11219,651],{"class":484},[471,11221,11222],{"class":514},"940.000đ",[471,11224,521],{"class":484},[471,11226,471],{"class":488},[471,11228,508],{"class":484},[471,11230,11231,11233,11235],{"class":473,"line":2163},[471,11232,1714],{"class":484},[471,11234,725],{"class":488},[471,11236,508],{"class":484},[471,11238,11239,11241,11243,11245,11247,11249],{"class":473,"line":2172},[471,11240,1584],{"class":484},[471,11242,489],{"class":488},[471,11244,493],{"class":492},[471,11246,496],{"class":484},[471,11248,499],{"class":484},[471,11250,3802],{"class":502},[471,11252,11253,11256,11258],{"class":473,"line":2181},[471,11254,11255],{"class":502},"                       hover:bg-indigo-700 transition-colors",[471,11257,499],{"class":484},[471,11259,508],{"class":484},[471,11261,11262],{"class":473,"line":2186},[471,11263,11264],{"class":514},"          Thanh toán\n",[471,11266,11267,11269,11271],{"class":473,"line":2192},[471,11268,1714],{"class":484},[471,11270,489],{"class":488},[471,11272,508],{"class":484},[471,11274,11275,11277,11279],{"class":473,"line":2211},[471,11276,1723],{"class":484},[471,11278,725],{"class":488},[471,11280,508],{"class":484},[471,11282,11283,11285,11287],{"class":473,"line":2239},[471,11284,1914],{"class":484},[471,11286,725],{"class":488},[471,11288,508],{"class":484},[471,11290,11291,11293,11295],{"class":473,"line":2244},[471,11292,885],{"class":484},[471,11294,725],{"class":488},[471,11296,508],{"class":484},[471,11298,11299,11301,11303],{"class":473,"line":2260},[471,11300,521],{"class":484},[471,11302,1419],{"class":488},[471,11304,508],{"class":484},[471,11306,11307],{"class":473,"line":2266},[471,11308,532],{"emptyLinePlaceholder":531},[471,11310,11311,11313,11315,11317,11319,11321,11323,11325,11327],{"class":473,"line":2272},[471,11312,485],{"class":484},[471,11314,7370],{"class":488},[471,11316,7373],{"class":492},[471,11318,7376],{"class":492},[471,11320,496],{"class":484},[471,11322,499],{"class":484},[471,11324,7383],{"class":502},[471,11326,499],{"class":484},[471,11328,508],{"class":484},[471,11330,11331,11333,11335,11337,11339,11341,11343,11345,11347,11349,11351,11353],{"class":473,"line":2278},[471,11332,7393],{"class":7392},[471,11334,7396],{"class":484},[471,11336,7399],{"class":514},[471,11338,7402],{"class":484},[471,11340,7405],{"class":514},[471,11342,7402],{"class":484},[471,11344,7410],{"class":514},[471,11346,7413],{"class":484},[471,11348,7416],{"class":7392},[471,11350,7419],{"class":484},[471,11352,1410],{"class":502},[471,11354,7424],{"class":484},[471,11356,11357],{"class":473,"line":2287},[471,11358,532],{"emptyLinePlaceholder":531},[471,11360,11361,11363,11365,11367,11369,11371,11373],{"class":473,"line":2293},[471,11362,7433],{"class":492},[471,11364,7436],{"class":514},[471,11366,496],{"class":484},[471,11368,7399],{"class":7441},[471,11370,7444],{"class":514},[471,11372,7448],{"class":7447},[471,11374,7451],{"class":514},[471,11376,11377,11379,11382,11384,11386,11388,11390],{"class":473,"line":2302},[471,11378,7433],{"class":492},[471,11380,11381],{"class":514}," showPanel ",[471,11383,496],{"class":484},[471,11385,7399],{"class":7441},[471,11387,7444],{"class":514},[471,11389,7448],{"class":7447},[471,11391,7451],{"class":514},[471,11393,11394],{"class":473,"line":2311},[471,11395,532],{"emptyLinePlaceholder":531},[471,11397,11398,11400,11403,11405],{"class":473,"line":2320},[471,11399,7477],{"class":492},[471,11401,11402],{"class":7441}," closePanel",[471,11404,7483],{"class":484},[471,11406,7486],{"class":484},[471,11408,11409,11412,11414,11416,11418],{"class":473,"line":3630},[471,11410,11411],{"class":514},"  showPanel",[471,11413,2917],{"class":484},[471,11415,7496],{"class":514},[471,11417,7499],{"class":484},[471,11419,7502],{"class":7447},[471,11421,11422,11424,11426,11428,11430],{"class":473,"line":3638},[471,11423,7507],{"class":7441},[471,11425,7444],{"class":488},[471,11427,7483],{"class":484},[471,11429,7514],{"class":492},[471,11431,7486],{"class":484},[471,11433,11434,11436,11438,11440,11442],{"class":473,"line":3643},[471,11435,7521],{"class":514},[471,11437,2917],{"class":484},[471,11439,7496],{"class":514},[471,11441,7499],{"class":484},[471,11443,7502],{"class":7447},[471,11445,11446,11448,11450],{"class":473,"line":3663},[471,11447,7534],{"class":484},[471,11449,7538],{"class":7537},[471,11451,7451],{"class":488},[471,11453,11454],{"class":473,"line":3708},[471,11455,7549],{"class":484},[471,11457,11458],{"class":473,"line":3746},[471,11459,532],{"emptyLinePlaceholder":531},[471,11461,11462,11464,11466,11468,11470,11472,11474,11476,11478],{"class":473,"line":3755},[471,11463,7590],{"class":7441},[471,11465,7593],{"class":514},[471,11467,7402],{"class":484},[471,11469,7598],{"class":492},[471,11471,7601],{"class":484},[471,11473,7605],{"class":7604},[471,11475,451],{"class":484},[471,11477,7514],{"class":492},[471,11479,7486],{"class":484},[471,11481,11482,11484,11486,11488,11490],{"class":473,"line":3764},[471,11483,7616],{"class":7392},[471,11485,7601],{"class":488},[471,11487,7605],{"class":514},[471,11489,7541],{"class":488},[471,11491,7625],{"class":484},[471,11493,11494,11496,11498],{"class":473,"line":3769},[471,11495,7630],{"class":7392},[471,11497,7410],{"class":7441},[471,11499,7577],{"class":488},[471,11501,11502,11504,11506,11508,11510],{"class":473,"line":3777},[471,11503,7644],{"class":7441},[471,11505,7444],{"class":488},[471,11507,7483],{"class":484},[471,11509,7514],{"class":492},[471,11511,7486],{"class":484},[471,11513,11514,11517,11519,11521,11523],{"class":473,"line":3792},[471,11515,11516],{"class":514},"      showPanel",[471,11518,2917],{"class":484},[471,11520,7496],{"class":514},[471,11522,7499],{"class":484},[471,11524,7666],{"class":7447},[471,11526,11527,11529],{"class":473,"line":3805},[471,11528,7671],{"class":484},[471,11530,7451],{"class":488},[471,11532,11533],{"class":473,"line":3811},[471,11534,7678],{"class":484},[471,11536,11537,11539],{"class":473,"line":3817},[471,11538,7683],{"class":484},[471,11540,7451],{"class":514},[471,11542,11543,11545,11547],{"class":473,"line":3823},[471,11544,521],{"class":484},[471,11546,7370],{"class":488},[471,11548,508],{"class":484},[5602,11550],{},[427,11552,11554,11555,435,11558,435,11561,435,11564,451],{"id":11553},"_4-animations-animate-spin-animate-ping-animate-pulse-animate-bounce","4. Animations (",[432,11556,11557],{},"animate-spin",[432,11559,11560],{},"animate-ping",[432,11562,11563],{},"animate-pulse",[432,11565,11566],{},"animate-bounce",[453,11568,11569],{},"Tailwind cung cấp sẵn 4 animation cơ bản:",[462,11571,11573],{"className":464,"code":11572,"language":466,"meta":467,"style":467},"\u003C!-- Spin: xoay tròn (dùng cho loading spinner) -->\n\u003Cdiv class=\"animate-spin w-8 h-8 border-4 border-blue-200 border-t-blue-600 rounded-full\">\u003C\u002Fdiv>\n\n\u003C!-- Ping: lan tỏa (dùng cho notification dot) -->\n\u003Cspan class=\"relative flex h-3 w-3\">\n  \u003Cspan class=\"animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75\">\u003C\u002Fspan>\n  \u003Cspan class=\"relative inline-flex rounded-full h-3 w-3 bg-red-500\">\u003C\u002Fspan>\n\u003C\u002Fspan>\n\n\u003C!-- Pulse: nhấp nháy (dùng cho skeleton loading) -->\n\u003Cdiv class=\"animate-pulse bg-gray-200 rounded-lg h-4 w-3\u002F4\">\u003C\u002Fdiv>\n\n\u003C!-- Bounce: nảy lên (dùng cho scroll indicator, chat typing) -->\n\u003Cdiv class=\"animate-bounce w-4 h-4 bg-indigo-500 rounded-full\">\u003C\u002Fdiv>\n",[432,11574,11575,11580,11603,11607,11612,11631,11654,11677,11685,11689,11694,11717,11721,11726],{"__ignoreMap":467},[471,11576,11577],{"class":473,"line":474},[471,11578,11579],{"class":477},"\u003C!-- Spin: xoay tròn (dùng cho loading spinner) -->\n",[471,11581,11582,11584,11586,11588,11590,11592,11595,11597,11599,11601],{"class":473,"line":481},[471,11583,485],{"class":484},[471,11585,725],{"class":488},[471,11587,493],{"class":492},[471,11589,496],{"class":484},[471,11591,499],{"class":484},[471,11593,11594],{"class":502},"animate-spin w-8 h-8 border-4 border-blue-200 border-t-blue-600 rounded-full",[471,11596,499],{"class":484},[471,11598,3475],{"class":484},[471,11600,725],{"class":488},[471,11602,508],{"class":484},[471,11604,11605],{"class":473,"line":511},[471,11606,532],{"emptyLinePlaceholder":531},[471,11608,11609],{"class":473,"line":518},[471,11610,11611],{"class":477},"\u003C!-- Ping: lan tỏa (dùng cho notification dot) -->\n",[471,11613,11614,11616,11618,11620,11622,11624,11627,11629],{"class":473,"line":528},[471,11615,485],{"class":484},[471,11617,471],{"class":488},[471,11619,493],{"class":492},[471,11621,496],{"class":484},[471,11623,499],{"class":484},[471,11625,11626],{"class":502},"relative flex h-3 w-3",[471,11628,499],{"class":484},[471,11630,508],{"class":484},[471,11632,11633,11635,11637,11639,11641,11643,11646,11648,11650,11652],{"class":473,"line":535},[471,11634,744],{"class":484},[471,11636,471],{"class":488},[471,11638,493],{"class":492},[471,11640,496],{"class":484},[471,11642,499],{"class":484},[471,11644,11645],{"class":502},"animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75",[471,11647,499],{"class":484},[471,11649,3475],{"class":484},[471,11651,471],{"class":488},[471,11653,508],{"class":484},[471,11655,11656,11658,11660,11662,11664,11666,11669,11671,11673,11675],{"class":473,"line":541},[471,11657,744],{"class":484},[471,11659,471],{"class":488},[471,11661,493],{"class":492},[471,11663,496],{"class":484},[471,11665,499],{"class":484},[471,11667,11668],{"class":502},"relative inline-flex rounded-full h-3 w-3 bg-red-500",[471,11670,499],{"class":484},[471,11672,3475],{"class":484},[471,11674,471],{"class":488},[471,11676,508],{"class":484},[471,11678,11679,11681,11683],{"class":473,"line":563},[471,11680,521],{"class":484},[471,11682,471],{"class":488},[471,11684,508],{"class":484},[471,11686,11687],{"class":473,"line":568},[471,11688,532],{"emptyLinePlaceholder":531},[471,11690,11691],{"class":473,"line":574},[471,11692,11693],{"class":477},"\u003C!-- Pulse: nhấp nháy (dùng cho skeleton loading) -->\n",[471,11695,11696,11698,11700,11702,11704,11706,11709,11711,11713,11715],{"class":473,"line":594},[471,11697,485],{"class":484},[471,11699,725],{"class":488},[471,11701,493],{"class":492},[471,11703,496],{"class":484},[471,11705,499],{"class":484},[471,11707,11708],{"class":502},"animate-pulse bg-gray-200 rounded-lg h-4 w-3\u002F4",[471,11710,499],{"class":484},[471,11712,3475],{"class":484},[471,11714,725],{"class":488},[471,11716,508],{"class":484},[471,11718,11719],{"class":473,"line":600},[471,11720,532],{"emptyLinePlaceholder":531},[471,11722,11723],{"class":473,"line":609},[471,11724,11725],{"class":477},"\u003C!-- Bounce: nảy lên (dùng cho scroll indicator, chat typing) -->\n",[471,11727,11728,11730,11732,11734,11736,11738,11741,11743,11745,11747],{"class":473,"line":614},[471,11729,485],{"class":484},[471,11731,725],{"class":488},[471,11733,493],{"class":492},[471,11735,496],{"class":484},[471,11737,499],{"class":484},[471,11739,11740],{"class":502},"animate-bounce w-4 h-4 bg-indigo-500 rounded-full",[471,11742,499],{"class":484},[471,11744,3475],{"class":484},[471,11746,725],{"class":488},[471,11748,508],{"class":484},[824,11750,11752,11753],{"id":11751},"custom-animations-via-theme","Custom animations via ",[432,11754,11755],{},"@theme",[462,11757,11761],{"className":11758,"code":11759,"language":11760,"meta":467,"style":467},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","@theme {\n  \u002F* Định nghĩa keyframes *\u002F\n  --keyframes-fade-in-up: {\n    from {\n      opacity: 0;\n      transform: translateY(20px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  };\n\n  --keyframes-slide-in-right: {\n    from {\n      transform: translateX(100%);\n    }\n    to {\n      transform: translateX(0);\n    }\n  };\n\n  --keyframes-shimmer: {\n    0% {\n      background-position: -200% 0;\n    }\n    100% {\n      background-position: 200% 0;\n    }\n  };\n\n  \u002F* Định nghĩa animation (shortcut) *\u002F\n  --animation-fade-in-up: fade-in-up 0.5s ease-out;\n  --animation-slide-in-right: slide-in-right 0.3s ease-out;\n  --animation-shimmer: shimmer 1.5s infinite;\n}\n","css",[432,11762,11763,11769,11774,11781,11786,11800,11818,11823,11830,11841,11856,11860,11867,11871,11878,11882,11898,11902,11908,11922,11926,11931,11935,11942,11947,11961,11965,11972,11985,11989,11993,11997,12002,12023,12042,12054],{"__ignoreMap":467},[471,11764,11765,11767],{"class":473,"line":474},[471,11766,11755],{"class":7392},[471,11768,7486],{"class":484},[471,11770,11771],{"class":473,"line":481},[471,11772,11773],{"class":477},"  \u002F* Định nghĩa keyframes *\u002F\n",[471,11775,11776,11779],{"class":473,"line":511},[471,11777,11778],{"class":514},"  --keyframes-fade-in-up: ",[471,11780,7625],{"class":484},[471,11782,11783],{"class":473,"line":518},[471,11784,11785],{"class":514},"    from {\n",[471,11787,11788,11792,11794,11797],{"class":473,"line":528},[471,11789,11791],{"class":11790},"sqsOY","      opacity",[471,11793,1243],{"class":484},[471,11795,11796],{"class":7537}," 0",[471,11798,11799],{"class":484},";\n",[471,11801,11802,11805,11807,11810,11812,11815],{"class":473,"line":535},[471,11803,11804],{"class":11790},"      transform",[471,11806,1243],{"class":484},[471,11808,11809],{"class":7441}," translateY",[471,11811,7444],{"class":484},[471,11813,11814],{"class":7537},"20px",[471,11816,11817],{"class":484},");\n",[471,11819,11820],{"class":473,"line":541},[471,11821,11822],{"class":484},"    }\n",[471,11824,11825,11828],{"class":473,"line":563},[471,11826,11827],{"class":514},"    to ",[471,11829,7625],{"class":484},[471,11831,11832,11834,11836,11839],{"class":473,"line":568},[471,11833,11791],{"class":11790},[471,11835,1243],{"class":484},[471,11837,11838],{"class":7537}," 1",[471,11840,11799],{"class":484},[471,11842,11843,11845,11847,11849,11851,11854],{"class":473,"line":574},[471,11844,11804],{"class":11790},[471,11846,1243],{"class":484},[471,11848,11809],{"class":7441},[471,11850,7444],{"class":484},[471,11852,11853],{"class":7537},"0",[471,11855,11817],{"class":484},[471,11857,11858],{"class":473,"line":594},[471,11859,11822],{"class":484},[471,11861,11862,11865],{"class":473,"line":600},[471,11863,11864],{"class":484},"  }",[471,11866,11799],{"class":514},[471,11868,11869],{"class":473,"line":609},[471,11870,532],{"emptyLinePlaceholder":531},[471,11872,11873,11876],{"class":473,"line":614},[471,11874,11875],{"class":514},"  --keyframes-slide-in-right: ",[471,11877,7625],{"class":484},[471,11879,11880],{"class":473,"line":620},[471,11881,11785],{"class":514},[471,11883,11884,11886,11888,11891,11893,11896],{"class":473,"line":663},[471,11885,11804],{"class":11790},[471,11887,1243],{"class":484},[471,11889,11890],{"class":7441}," translateX",[471,11892,7444],{"class":484},[471,11894,11895],{"class":7537},"100%",[471,11897,11817],{"class":484},[471,11899,11900],{"class":473,"line":668},[471,11901,11822],{"class":484},[471,11903,11904,11906],{"class":473,"line":674},[471,11905,11827],{"class":514},[471,11907,7625],{"class":484},[471,11909,11910,11912,11914,11916,11918,11920],{"class":473,"line":694},[471,11911,11804],{"class":11790},[471,11913,1243],{"class":484},[471,11915,11890],{"class":7441},[471,11917,7444],{"class":484},[471,11919,11853],{"class":7537},[471,11921,11817],{"class":484},[471,11923,11924],{"class":473,"line":700},[471,11925,11822],{"class":484},[471,11927,11928],{"class":473,"line":709},[471,11929,11930],{"class":514},"  };\n",[471,11932,11933],{"class":473,"line":714},[471,11934,532],{"emptyLinePlaceholder":531},[471,11936,11937,11940],{"class":473,"line":720},[471,11938,11939],{"class":514},"  --keyframes-shimmer: ",[471,11941,7625],{"class":484},[471,11943,11944],{"class":473,"line":741},[471,11945,11946],{"class":514},"    0% {\n",[471,11948,11949,11952,11954,11957,11959],{"class":473,"line":772},[471,11950,11951],{"class":11790},"      background-position",[471,11953,1243],{"class":484},[471,11955,11956],{"class":7537}," -200%",[471,11958,11796],{"class":7537},[471,11960,11799],{"class":484},[471,11962,11963],{"class":473,"line":816},[471,11964,11822],{"class":484},[471,11966,11967,11970],{"class":473,"line":1833},[471,11968,11969],{"class":514},"    100% ",[471,11971,7625],{"class":484},[471,11973,11974,11976,11978,11981,11983],{"class":473,"line":1883},[471,11975,11951],{"class":11790},[471,11977,1243],{"class":484},[471,11979,11980],{"class":7537}," 200%",[471,11982,11796],{"class":7537},[471,11984,11799],{"class":484},[471,11986,11987],{"class":473,"line":1893},[471,11988,11822],{"class":484},[471,11990,11991],{"class":473,"line":1902},[471,11992,11930],{"class":514},[471,11994,11995],{"class":473,"line":1911},[471,11996,532],{"emptyLinePlaceholder":531},[471,11998,11999],{"class":473,"line":1921},[471,12000,12001],{"class":477},"  \u002F* Định nghĩa animation (shortcut) *\u002F\n",[471,12003,12004,12007,12011,12013,12015,12018,12021],{"class":473,"line":1926},[471,12005,12006],{"class":514},"  --animation-fade-in-up: ",[471,12008,12010],{"class":12009},"sBMFI","fade-in-up",[471,12012,11796],{"class":514},[471,12014,2917],{"class":484},[471,12016,12017],{"class":12009},"5s",[471,12019,12020],{"class":12009}," ease-out",[471,12022,11799],{"class":514},[471,12024,12025,12028,12031,12033,12035,12038,12040],{"class":473,"line":1932},[471,12026,12027],{"class":514},"  --animation-slide-in-right: ",[471,12029,12030],{"class":12009},"slide-in-right",[471,12032,11796],{"class":514},[471,12034,2917],{"class":484},[471,12036,12037],{"class":12009},"3s",[471,12039,12020],{"class":12009},[471,12041,11799],{"class":514},[471,12043,12044,12047,12049,12051],{"class":473,"line":1951},[471,12045,12046],{"class":514},"  --animation-shimmer: shimmer 1",[471,12048,2917],{"class":484},[471,12050,12017],{"class":12009},[471,12052,12053],{"class":514}," infinite;\n",[471,12055,12056],{"class":473,"line":1979},[471,12057,7549],{"class":514},[462,12059,12061],{"className":464,"code":12060,"language":466,"meta":467,"style":467},"\u003Cdiv class=\"animate-fade-in-up\">Fade in + trượt lên\u003C\u002Fdiv>\n\u003Cdiv class=\"animate-slide-in-right\">Trượt từ phải vào\u003C\u002Fdiv>\n\u003Cdiv class=\"animate-shimmer bg-gradient-to-r from-transparent via-white\u002F20 to-transparent bg-[length:200%_100%]\">\n  Shimmer loading effect\n\u003C\u002Fdiv>\n",[432,12062,12063,12091,12119,12138,12143],{"__ignoreMap":467},[471,12064,12065,12067,12069,12071,12073,12075,12078,12080,12082,12085,12087,12089],{"class":473,"line":474},[471,12066,485],{"class":484},[471,12068,725],{"class":488},[471,12070,493],{"class":492},[471,12072,496],{"class":484},[471,12074,499],{"class":484},[471,12076,12077],{"class":502},"animate-fade-in-up",[471,12079,499],{"class":484},[471,12081,651],{"class":484},[471,12083,12084],{"class":514},"Fade in + trượt lên",[471,12086,521],{"class":484},[471,12088,725],{"class":488},[471,12090,508],{"class":484},[471,12092,12093,12095,12097,12099,12101,12103,12106,12108,12110,12113,12115,12117],{"class":473,"line":481},[471,12094,485],{"class":484},[471,12096,725],{"class":488},[471,12098,493],{"class":492},[471,12100,496],{"class":484},[471,12102,499],{"class":484},[471,12104,12105],{"class":502},"animate-slide-in-right",[471,12107,499],{"class":484},[471,12109,651],{"class":484},[471,12111,12112],{"class":514},"Trượt từ phải vào",[471,12114,521],{"class":484},[471,12116,725],{"class":488},[471,12118,508],{"class":484},[471,12120,12121,12123,12125,12127,12129,12131,12134,12136],{"class":473,"line":511},[471,12122,485],{"class":484},[471,12124,725],{"class":488},[471,12126,493],{"class":492},[471,12128,496],{"class":484},[471,12130,499],{"class":484},[471,12132,12133],{"class":502},"animate-shimmer bg-gradient-to-r from-transparent via-white\u002F20 to-transparent bg-[length:200%_100%]",[471,12135,499],{"class":484},[471,12137,508],{"class":484},[471,12139,12140],{"class":473,"line":518},[471,12141,12142],{"class":514},"  Shimmer loading effect\n",[471,12144,12145,12147,12149],{"class":473,"line":528},[471,12146,521],{"class":484},[471,12148,725],{"class":488},[471,12150,508],{"class":484},[824,12152,12154],{"id":12153},"motion-safe-motion-reduce-accessibility","motion-safe: \u002F motion-reduce: (Accessibility)",[462,12156,12158],{"className":464,"code":12157,"language":466,"meta":467,"style":467},"\u003C!-- Chỉ chạy animation khi user không bật \"prefers-reduced-motion\" -->\n\u003Cdiv class=\"motion-safe:animate-bounce\">\n  Chỉ nảy khi user không giảm chuyển động\n\u003C\u002Fdiv>\n\n\u003C!-- Thay thế animation bằng static style khi user giảm chuyển động -->\n\u003Cdiv class=\"animate-spin motion-reduce:animate-none motion-reduce:opacity-100\">\n  Spinner — nhưng thành static nếu user cần\n\u003C\u002Fdiv>\n",[432,12159,12160,12165,12184,12189,12197,12201,12206,12225,12230],{"__ignoreMap":467},[471,12161,12162],{"class":473,"line":474},[471,12163,12164],{"class":477},"\u003C!-- Chỉ chạy animation khi user không bật \"prefers-reduced-motion\" -->\n",[471,12166,12167,12169,12171,12173,12175,12177,12180,12182],{"class":473,"line":481},[471,12168,485],{"class":484},[471,12170,725],{"class":488},[471,12172,493],{"class":492},[471,12174,496],{"class":484},[471,12176,499],{"class":484},[471,12178,12179],{"class":502},"motion-safe:animate-bounce",[471,12181,499],{"class":484},[471,12183,508],{"class":484},[471,12185,12186],{"class":473,"line":511},[471,12187,12188],{"class":514},"  Chỉ nảy khi user không giảm chuyển động\n",[471,12190,12191,12193,12195],{"class":473,"line":518},[471,12192,521],{"class":484},[471,12194,725],{"class":488},[471,12196,508],{"class":484},[471,12198,12199],{"class":473,"line":528},[471,12200,532],{"emptyLinePlaceholder":531},[471,12202,12203],{"class":473,"line":535},[471,12204,12205],{"class":477},"\u003C!-- Thay thế animation bằng static style khi user giảm chuyển động -->\n",[471,12207,12208,12210,12212,12214,12216,12218,12221,12223],{"class":473,"line":541},[471,12209,485],{"class":484},[471,12211,725],{"class":488},[471,12213,493],{"class":492},[471,12215,496],{"class":484},[471,12217,499],{"class":484},[471,12219,12220],{"class":502},"animate-spin motion-reduce:animate-none motion-reduce:opacity-100",[471,12222,499],{"class":484},[471,12224,508],{"class":484},[471,12226,12227],{"class":473,"line":563},[471,12228,12229],{"class":514},"  Spinner — nhưng thành static nếu user cần\n",[471,12231,12232,12234,12236],{"class":473,"line":568},[471,12233,521],{"class":484},[471,12235,725],{"class":488},[471,12237,508],{"class":484},[824,12239,12241],{"id":12240},"bài-tập-11-loading-spinner-component","Bài tập 11: Loading spinner component",[453,12243,12244,12246],{},[457,12245,1404],{}," Spinner component với nhiều kích thước và màu sắc.",[462,12248,12250],{"className":1408,"code":12249,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-md mx-auto p-8 space-y-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-6\">Loading Spinner Gallery\u003C\u002Fh2>\n\n    \u003C!-- Spinner nhỏ -->\n    \u003Cdiv class=\"flex items-center gap-4\">\n      \u003Cdiv class=\"animate-spin w-4 h-4 border-2 border-gray-200 border-t-indigo-600 rounded-full\">\u003C\u002Fdiv>\n      \u003Cspan class=\"text-sm text-gray-600\">sm — 16px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Spinner vừa -->\n    \u003Cdiv class=\"flex items-center gap-4\">\n      \u003Cdiv class=\"animate-spin w-8 h-8 border-[3px] border-gray-200 border-t-indigo-600 rounded-full\">\u003C\u002Fdiv>\n      \u003Cspan class=\"text-sm text-gray-600\">md — 32px (mặc định)\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Spinner lớn -->\n    \u003Cdiv class=\"flex items-center gap-4\">\n      \u003Cdiv class=\"animate-spin w-12 h-12 border-4 border-gray-200 border-t-indigo-600 rounded-full\">\u003C\u002Fdiv>\n      \u003Cspan class=\"text-sm text-gray-600\">lg — 48px\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Spinner với màu khác -->\n    \u003Cdiv class=\"flex items-center gap-4\">\n      \u003Cdiv class=\"animate-spin w-8 h-8 border-[3px] border-emerald-200 border-t-emerald-600 rounded-full\">\u003C\u002Fdiv>\n      \u003Cspan class=\"text-sm text-gray-600\">Success spinner\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"flex items-center gap-4\">\n      \u003Cdiv class=\"animate-spin w-8 h-8 border-[3px] border-red-200 border-t-red-600 rounded-full\">\u003C\u002Fdiv>\n      \u003Cspan class=\"text-sm text-gray-600\">Danger spinner\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Full-page loading overlay -->\n    \u003Cdiv>\n      \u003Cp class=\"text-sm text-gray-500 mb-3\">Full-page loading overlay:\u003C\u002Fp>\n      \u003Cdiv class=\"relative h-32 bg-gray-100 rounded-xl overflow-hidden\">\n        \u003Cdiv class=\"absolute inset-0 bg-white\u002F80 flex items-center justify-center gap-3\">\n          \u003Cdiv class=\"animate-spin w-8 h-8 border-[3px] border-gray-200 border-t-indigo-600 rounded-full\">\u003C\u002Fdiv>\n          \u003Cspan class=\"text-sm font-medium text-gray-700\">Đang tải dữ liệu...\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,12251,12252,12260,12279,12306,12310,12315,12334,12357,12384,12392,12396,12401,12419,12442,12469,12477,12481,12486,12504,12527,12554,12562,12566,12571,12589,12612,12639,12647,12651,12669,12692,12719,12727,12731,12736,12744,12772,12791,12810,12832,12860,12868,12876,12884,12892],{"__ignoreMap":467},[471,12253,12254,12256,12258],{"class":473,"line":474},[471,12255,485],{"class":484},[471,12257,1419],{"class":488},[471,12259,508],{"class":484},[471,12261,12262,12264,12266,12268,12270,12272,12275,12277],{"class":473,"line":481},[471,12263,744],{"class":484},[471,12265,725],{"class":488},[471,12267,493],{"class":492},[471,12269,496],{"class":484},[471,12271,499],{"class":484},[471,12273,12274],{"class":502},"max-w-md mx-auto p-8 space-y-8",[471,12276,499],{"class":484},[471,12278,508],{"class":484},[471,12280,12281,12283,12285,12287,12289,12291,12293,12295,12297,12300,12302,12304],{"class":473,"line":511},[471,12282,1445],{"class":484},[471,12284,427],{"class":488},[471,12286,493],{"class":492},[471,12288,496],{"class":484},[471,12290,499],{"class":484},[471,12292,1456],{"class":502},[471,12294,499],{"class":484},[471,12296,651],{"class":484},[471,12298,12299],{"class":514},"Loading Spinner Gallery",[471,12301,521],{"class":484},[471,12303,427],{"class":488},[471,12305,508],{"class":484},[471,12307,12308],{"class":473,"line":518},[471,12309,532],{"emptyLinePlaceholder":531},[471,12311,12312],{"class":473,"line":528},[471,12313,12314],{"class":477},"    \u003C!-- Spinner nhỏ -->\n",[471,12316,12317,12319,12321,12323,12325,12327,12330,12332],{"class":473,"line":535},[471,12318,1445],{"class":484},[471,12320,725],{"class":488},[471,12322,493],{"class":492},[471,12324,496],{"class":484},[471,12326,499],{"class":484},[471,12328,12329],{"class":502},"flex items-center gap-4",[471,12331,499],{"class":484},[471,12333,508],{"class":484},[471,12335,12336,12338,12340,12342,12344,12346,12349,12351,12353,12355],{"class":473,"line":541},[471,12337,1502],{"class":484},[471,12339,725],{"class":488},[471,12341,493],{"class":492},[471,12343,496],{"class":484},[471,12345,499],{"class":484},[471,12347,12348],{"class":502},"animate-spin w-4 h-4 border-2 border-gray-200 border-t-indigo-600 rounded-full",[471,12350,499],{"class":484},[471,12352,3475],{"class":484},[471,12354,725],{"class":488},[471,12356,508],{"class":484},[471,12358,12359,12361,12363,12365,12367,12369,12371,12373,12375,12378,12380,12382],{"class":473,"line":563},[471,12360,1502],{"class":484},[471,12362,471],{"class":488},[471,12364,493],{"class":492},[471,12366,496],{"class":484},[471,12368,499],{"class":484},[471,12370,11188],{"class":502},[471,12372,499],{"class":484},[471,12374,651],{"class":484},[471,12376,12377],{"class":514},"sm — 16px",[471,12379,521],{"class":484},[471,12381,471],{"class":488},[471,12383,508],{"class":484},[471,12385,12386,12388,12390],{"class":473,"line":568},[471,12387,1914],{"class":484},[471,12389,725],{"class":488},[471,12391,508],{"class":484},[471,12393,12394],{"class":473,"line":574},[471,12395,532],{"emptyLinePlaceholder":531},[471,12397,12398],{"class":473,"line":594},[471,12399,12400],{"class":477},"    \u003C!-- Spinner vừa -->\n",[471,12402,12403,12405,12407,12409,12411,12413,12415,12417],{"class":473,"line":600},[471,12404,1445],{"class":484},[471,12406,725],{"class":488},[471,12408,493],{"class":492},[471,12410,496],{"class":484},[471,12412,499],{"class":484},[471,12414,12329],{"class":502},[471,12416,499],{"class":484},[471,12418,508],{"class":484},[471,12420,12421,12423,12425,12427,12429,12431,12434,12436,12438,12440],{"class":473,"line":609},[471,12422,1502],{"class":484},[471,12424,725],{"class":488},[471,12426,493],{"class":492},[471,12428,496],{"class":484},[471,12430,499],{"class":484},[471,12432,12433],{"class":502},"animate-spin w-8 h-8 border-[3px] border-gray-200 border-t-indigo-600 rounded-full",[471,12435,499],{"class":484},[471,12437,3475],{"class":484},[471,12439,725],{"class":488},[471,12441,508],{"class":484},[471,12443,12444,12446,12448,12450,12452,12454,12456,12458,12460,12463,12465,12467],{"class":473,"line":614},[471,12445,1502],{"class":484},[471,12447,471],{"class":488},[471,12449,493],{"class":492},[471,12451,496],{"class":484},[471,12453,499],{"class":484},[471,12455,11188],{"class":502},[471,12457,499],{"class":484},[471,12459,651],{"class":484},[471,12461,12462],{"class":514},"md — 32px (mặc định)",[471,12464,521],{"class":484},[471,12466,471],{"class":488},[471,12468,508],{"class":484},[471,12470,12471,12473,12475],{"class":473,"line":620},[471,12472,1914],{"class":484},[471,12474,725],{"class":488},[471,12476,508],{"class":484},[471,12478,12479],{"class":473,"line":663},[471,12480,532],{"emptyLinePlaceholder":531},[471,12482,12483],{"class":473,"line":668},[471,12484,12485],{"class":477},"    \u003C!-- Spinner lớn -->\n",[471,12487,12488,12490,12492,12494,12496,12498,12500,12502],{"class":473,"line":674},[471,12489,1445],{"class":484},[471,12491,725],{"class":488},[471,12493,493],{"class":492},[471,12495,496],{"class":484},[471,12497,499],{"class":484},[471,12499,12329],{"class":502},[471,12501,499],{"class":484},[471,12503,508],{"class":484},[471,12505,12506,12508,12510,12512,12514,12516,12519,12521,12523,12525],{"class":473,"line":694},[471,12507,1502],{"class":484},[471,12509,725],{"class":488},[471,12511,493],{"class":492},[471,12513,496],{"class":484},[471,12515,499],{"class":484},[471,12517,12518],{"class":502},"animate-spin w-12 h-12 border-4 border-gray-200 border-t-indigo-600 rounded-full",[471,12520,499],{"class":484},[471,12522,3475],{"class":484},[471,12524,725],{"class":488},[471,12526,508],{"class":484},[471,12528,12529,12531,12533,12535,12537,12539,12541,12543,12545,12548,12550,12552],{"class":473,"line":700},[471,12530,1502],{"class":484},[471,12532,471],{"class":488},[471,12534,493],{"class":492},[471,12536,496],{"class":484},[471,12538,499],{"class":484},[471,12540,11188],{"class":502},[471,12542,499],{"class":484},[471,12544,651],{"class":484},[471,12546,12547],{"class":514},"lg — 48px",[471,12549,521],{"class":484},[471,12551,471],{"class":488},[471,12553,508],{"class":484},[471,12555,12556,12558,12560],{"class":473,"line":709},[471,12557,1914],{"class":484},[471,12559,725],{"class":488},[471,12561,508],{"class":484},[471,12563,12564],{"class":473,"line":714},[471,12565,532],{"emptyLinePlaceholder":531},[471,12567,12568],{"class":473,"line":720},[471,12569,12570],{"class":477},"    \u003C!-- Spinner với màu khác -->\n",[471,12572,12573,12575,12577,12579,12581,12583,12585,12587],{"class":473,"line":741},[471,12574,1445],{"class":484},[471,12576,725],{"class":488},[471,12578,493],{"class":492},[471,12580,496],{"class":484},[471,12582,499],{"class":484},[471,12584,12329],{"class":502},[471,12586,499],{"class":484},[471,12588,508],{"class":484},[471,12590,12591,12593,12595,12597,12599,12601,12604,12606,12608,12610],{"class":473,"line":772},[471,12592,1502],{"class":484},[471,12594,725],{"class":488},[471,12596,493],{"class":492},[471,12598,496],{"class":484},[471,12600,499],{"class":484},[471,12602,12603],{"class":502},"animate-spin w-8 h-8 border-[3px] border-emerald-200 border-t-emerald-600 rounded-full",[471,12605,499],{"class":484},[471,12607,3475],{"class":484},[471,12609,725],{"class":488},[471,12611,508],{"class":484},[471,12613,12614,12616,12618,12620,12622,12624,12626,12628,12630,12633,12635,12637],{"class":473,"line":816},[471,12615,1502],{"class":484},[471,12617,471],{"class":488},[471,12619,493],{"class":492},[471,12621,496],{"class":484},[471,12623,499],{"class":484},[471,12625,11188],{"class":502},[471,12627,499],{"class":484},[471,12629,651],{"class":484},[471,12631,12632],{"class":514},"Success spinner",[471,12634,521],{"class":484},[471,12636,471],{"class":488},[471,12638,508],{"class":484},[471,12640,12641,12643,12645],{"class":473,"line":1833},[471,12642,1914],{"class":484},[471,12644,725],{"class":488},[471,12646,508],{"class":484},[471,12648,12649],{"class":473,"line":1883},[471,12650,532],{"emptyLinePlaceholder":531},[471,12652,12653,12655,12657,12659,12661,12663,12665,12667],{"class":473,"line":1893},[471,12654,1445],{"class":484},[471,12656,725],{"class":488},[471,12658,493],{"class":492},[471,12660,496],{"class":484},[471,12662,499],{"class":484},[471,12664,12329],{"class":502},[471,12666,499],{"class":484},[471,12668,508],{"class":484},[471,12670,12671,12673,12675,12677,12679,12681,12684,12686,12688,12690],{"class":473,"line":1902},[471,12672,1502],{"class":484},[471,12674,725],{"class":488},[471,12676,493],{"class":492},[471,12678,496],{"class":484},[471,12680,499],{"class":484},[471,12682,12683],{"class":502},"animate-spin w-8 h-8 border-[3px] border-red-200 border-t-red-600 rounded-full",[471,12685,499],{"class":484},[471,12687,3475],{"class":484},[471,12689,725],{"class":488},[471,12691,508],{"class":484},[471,12693,12694,12696,12698,12700,12702,12704,12706,12708,12710,12713,12715,12717],{"class":473,"line":1911},[471,12695,1502],{"class":484},[471,12697,471],{"class":488},[471,12699,493],{"class":492},[471,12701,496],{"class":484},[471,12703,499],{"class":484},[471,12705,11188],{"class":502},[471,12707,499],{"class":484},[471,12709,651],{"class":484},[471,12711,12712],{"class":514},"Danger spinner",[471,12714,521],{"class":484},[471,12716,471],{"class":488},[471,12718,508],{"class":484},[471,12720,12721,12723,12725],{"class":473,"line":1921},[471,12722,1914],{"class":484},[471,12724,725],{"class":488},[471,12726,508],{"class":484},[471,12728,12729],{"class":473,"line":1926},[471,12730,532],{"emptyLinePlaceholder":531},[471,12732,12733],{"class":473,"line":1932},[471,12734,12735],{"class":477},"    \u003C!-- Full-page loading overlay -->\n",[471,12737,12738,12740,12742],{"class":473,"line":1951},[471,12739,1445],{"class":484},[471,12741,725],{"class":488},[471,12743,508],{"class":484},[471,12745,12746,12748,12750,12752,12754,12756,12759,12761,12763,12766,12768,12770],{"class":473,"line":1979},[471,12747,1502],{"class":484},[471,12749,453],{"class":488},[471,12751,493],{"class":492},[471,12753,496],{"class":484},[471,12755,499],{"class":484},[471,12757,12758],{"class":502},"text-sm text-gray-500 mb-3",[471,12760,499],{"class":484},[471,12762,651],{"class":484},[471,12764,12765],{"class":514},"Full-page loading overlay:",[471,12767,521],{"class":484},[471,12769,453],{"class":488},[471,12771,508],{"class":484},[471,12773,12774,12776,12778,12780,12782,12784,12787,12789],{"class":473,"line":1984},[471,12775,1502],{"class":484},[471,12777,725],{"class":488},[471,12779,493],{"class":492},[471,12781,496],{"class":484},[471,12783,499],{"class":484},[471,12785,12786],{"class":502},"relative h-32 bg-gray-100 rounded-xl overflow-hidden",[471,12788,499],{"class":484},[471,12790,508],{"class":484},[471,12792,12793,12795,12797,12799,12801,12803,12806,12808],{"class":473,"line":2000},[471,12794,1584],{"class":484},[471,12796,725],{"class":488},[471,12798,493],{"class":492},[471,12800,496],{"class":484},[471,12802,499],{"class":484},[471,12804,12805],{"class":502},"absolute inset-0 bg-white\u002F80 flex items-center justify-center gap-3",[471,12807,499],{"class":484},[471,12809,508],{"class":484},[471,12811,12812,12814,12816,12818,12820,12822,12824,12826,12828,12830],{"class":473,"line":2006},[471,12813,1657],{"class":484},[471,12815,725],{"class":488},[471,12817,493],{"class":492},[471,12819,496],{"class":484},[471,12821,499],{"class":484},[471,12823,12433],{"class":502},[471,12825,499],{"class":484},[471,12827,3475],{"class":484},[471,12829,725],{"class":488},[471,12831,508],{"class":484},[471,12833,12834,12836,12838,12840,12842,12844,12847,12849,12851,12854,12856,12858],{"class":473,"line":2012},[471,12835,1657],{"class":484},[471,12837,471],{"class":488},[471,12839,493],{"class":492},[471,12841,496],{"class":484},[471,12843,499],{"class":484},[471,12845,12846],{"class":502},"text-sm font-medium text-gray-700",[471,12848,499],{"class":484},[471,12850,651],{"class":484},[471,12852,12853],{"class":514},"Đang tải dữ liệu...",[471,12855,521],{"class":484},[471,12857,471],{"class":488},[471,12859,508],{"class":484},[471,12861,12862,12864,12866],{"class":473,"line":2018},[471,12863,1714],{"class":484},[471,12865,725],{"class":488},[471,12867,508],{"class":484},[471,12869,12870,12872,12874],{"class":473,"line":2027},[471,12871,1723],{"class":484},[471,12873,725],{"class":488},[471,12875,508],{"class":484},[471,12877,12878,12880,12882],{"class":473,"line":2033},[471,12879,1914],{"class":484},[471,12881,725],{"class":488},[471,12883,508],{"class":484},[471,12885,12886,12888,12890],{"class":473,"line":2042},[471,12887,885],{"class":484},[471,12889,725],{"class":488},[471,12891,508],{"class":484},[471,12893,12894,12896,12898],{"class":473,"line":2051},[471,12895,521],{"class":484},[471,12897,1419],{"class":488},[471,12899,508],{"class":484},[824,12901,12903],{"id":12902},"bài-tập-12-skeleton-loading-screen-với-pulse","Bài tập 12: Skeleton loading screen với pulse",[453,12905,12906,12908],{},[457,12907,1404],{}," Màn hình skeleton loading cho 1 trang blog list — các block xám nhấp nháy.",[462,12910,12912],{"className":1408,"code":12911,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-4xl mx-auto p-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-8\">Skeleton Loading — Blog List\u003C\u002Fh2>\n\n    \u003Cdiv class=\"space-y-8\">\n      \u003C!-- Skeleton card 1 -->\n      \u003Cdiv class=\"flex gap-6 p-4 bg-white rounded-xl border border-gray-100\">\n        \u003C!-- Thumbnail skeleton -->\n        \u003Cdiv class=\"animate-pulse bg-gray-200 rounded-lg w-48 h-32 flex-shrink-0\">\u003C\u002Fdiv>\n\n        \u003C!-- Content skeleton -->\n        \u003Cdiv class=\"flex-1 space-y-3\">\n          \u003C!-- Category tag -->\n          \u003Cdiv class=\"animate-pulse bg-gray-200 rounded-full w-20 h-5\">\u003C\u002Fdiv>\n\n          \u003C!-- Title (2 dòng) -->\n          \u003Cdiv class=\"animate-pulse bg-gray-200 rounded h-5 w-3\u002F4\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-200 rounded h-5 w-1\u002F2\">\u003C\u002Fdiv>\n\n          \u003C!-- Description (3 dòng) -->\n          \u003Cdiv class=\"animate-pulse bg-gray-100 rounded h-3 w-full\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-100 rounded h-3 w-5\u002F6\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-100 rounded h-3 w-2\u002F3\">\u003C\u002Fdiv>\n\n          \u003C!-- Author + date -->\n          \u003Cdiv class=\"flex gap-4\">\n            \u003Cdiv class=\"animate-pulse bg-gray-200 rounded-full w-8 h-8\">\u003C\u002Fdiv>\n            \u003Cdiv class=\"animate-pulse bg-gray-200 rounded h-3 w-24\">\u003C\u002Fdiv>\n            \u003Cdiv class=\"animate-pulse bg-gray-200 rounded h-3 w-16\">\u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Skeleton card 2 -->\n      \u003Cdiv class=\"flex gap-6 p-4 bg-white rounded-xl border border-gray-100\">\n        \u003Cdiv class=\"animate-pulse bg-gray-200 rounded-lg w-48 h-32 flex-shrink-0\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"flex-1 space-y-3\">\n          \u003Cdiv class=\"animate-pulse bg-gray-200 rounded-full w-16 h-5\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-200 rounded h-5 w-2\u002F3\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-200 rounded h-5 w-1\u002F3\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-100 rounded h-3 w-full\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-100 rounded h-3 w-4\u002F5\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-100 rounded h-3 w-1\u002F2\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"flex gap-4\">\n            \u003Cdiv class=\"animate-pulse bg-gray-200 rounded-full w-8 h-8\">\u003C\u002Fdiv>\n            \u003Cdiv class=\"animate-pulse bg-gray-200 rounded h-3 w-24\">\u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Skeleton card 3 -->\n      \u003Cdiv class=\"flex gap-6 p-4 bg-white rounded-xl border border-gray-100\">\n        \u003Cdiv class=\"animate-pulse bg-gray-200 rounded-lg w-48 h-32 flex-shrink-0\">\u003C\u002Fdiv>\n        \u003Cdiv class=\"flex-1 space-y-3\">\n          \u003Cdiv class=\"animate-pulse bg-gray-200 rounded-full w-24 h-5\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-200 rounded h-5 w-4\u002F5\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-200 rounded h-5 w-1\u002F2\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-100 rounded h-3 w-full\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-100 rounded h-3 w-3\u002F4\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"animate-pulse bg-gray-100 rounded h-3 w-1\u002F3\">\u003C\u002Fdiv>\n          \u003Cdiv class=\"flex gap-4\">\n            \u003Cdiv class=\"animate-pulse bg-gray-200 rounded-full w-8 h-8\">\u003C\u002Fdiv>\n            \u003Cdiv class=\"animate-pulse bg-gray-200 rounded h-3 w-20\">\u003C\u002Fdiv>\n            \u003Cdiv class=\"animate-pulse bg-gray-200 rounded h-3 w-14\">\u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,12913,12914,12922,12940,12967,12971,12990,12995,13014,13019,13042,13046,13051,13070,13075,13098,13102,13107,13130,13153,13157,13162,13185,13208,13231,13235,13240,13259,13282,13305,13328,13336,13344,13352,13356,13361,13379,13401,13419,13442,13465,13488,13510,13533,13556,13574,13596,13618,13626,13634,13642,13646,13651,13669,13691,13709,13732,13755,13777,13799,13822,13845,13863,13885,13908,13931,13939,13947,13955,13963,13971],{"__ignoreMap":467},[471,12915,12916,12918,12920],{"class":473,"line":474},[471,12917,485],{"class":484},[471,12919,1419],{"class":488},[471,12921,508],{"class":484},[471,12923,12924,12926,12928,12930,12932,12934,12936,12938],{"class":473,"line":481},[471,12925,744],{"class":484},[471,12927,725],{"class":488},[471,12929,493],{"class":492},[471,12931,496],{"class":484},[471,12933,499],{"class":484},[471,12935,3915],{"class":502},[471,12937,499],{"class":484},[471,12939,508],{"class":484},[471,12941,12942,12944,12946,12948,12950,12952,12954,12956,12958,12961,12963,12965],{"class":473,"line":511},[471,12943,1445],{"class":484},[471,12945,427],{"class":488},[471,12947,493],{"class":492},[471,12949,496],{"class":484},[471,12951,499],{"class":484},[471,12953,2964],{"class":502},[471,12955,499],{"class":484},[471,12957,651],{"class":484},[471,12959,12960],{"class":514},"Skeleton Loading — Blog List",[471,12962,521],{"class":484},[471,12964,427],{"class":488},[471,12966,508],{"class":484},[471,12968,12969],{"class":473,"line":518},[471,12970,532],{"emptyLinePlaceholder":531},[471,12972,12973,12975,12977,12979,12981,12983,12986,12988],{"class":473,"line":528},[471,12974,1445],{"class":484},[471,12976,725],{"class":488},[471,12978,493],{"class":492},[471,12980,496],{"class":484},[471,12982,499],{"class":484},[471,12984,12985],{"class":502},"space-y-8",[471,12987,499],{"class":484},[471,12989,508],{"class":484},[471,12991,12992],{"class":473,"line":535},[471,12993,12994],{"class":477},"      \u003C!-- Skeleton card 1 -->\n",[471,12996,12997,12999,13001,13003,13005,13007,13010,13012],{"class":473,"line":541},[471,12998,1502],{"class":484},[471,13000,725],{"class":488},[471,13002,493],{"class":492},[471,13004,496],{"class":484},[471,13006,499],{"class":484},[471,13008,13009],{"class":502},"flex gap-6 p-4 bg-white rounded-xl border border-gray-100",[471,13011,499],{"class":484},[471,13013,508],{"class":484},[471,13015,13016],{"class":473,"line":563},[471,13017,13018],{"class":477},"        \u003C!-- Thumbnail skeleton -->\n",[471,13020,13021,13023,13025,13027,13029,13031,13034,13036,13038,13040],{"class":473,"line":568},[471,13022,1584],{"class":484},[471,13024,725],{"class":488},[471,13026,493],{"class":492},[471,13028,496],{"class":484},[471,13030,499],{"class":484},[471,13032,13033],{"class":502},"animate-pulse bg-gray-200 rounded-lg w-48 h-32 flex-shrink-0",[471,13035,499],{"class":484},[471,13037,3475],{"class":484},[471,13039,725],{"class":488},[471,13041,508],{"class":484},[471,13043,13044],{"class":473,"line":574},[471,13045,532],{"emptyLinePlaceholder":531},[471,13047,13048],{"class":473,"line":594},[471,13049,13050],{"class":477},"        \u003C!-- Content skeleton -->\n",[471,13052,13053,13055,13057,13059,13061,13063,13066,13068],{"class":473,"line":600},[471,13054,1584],{"class":484},[471,13056,725],{"class":488},[471,13058,493],{"class":492},[471,13060,496],{"class":484},[471,13062,499],{"class":484},[471,13064,13065],{"class":502},"flex-1 space-y-3",[471,13067,499],{"class":484},[471,13069,508],{"class":484},[471,13071,13072],{"class":473,"line":609},[471,13073,13074],{"class":477},"          \u003C!-- Category tag -->\n",[471,13076,13077,13079,13081,13083,13085,13087,13090,13092,13094,13096],{"class":473,"line":614},[471,13078,1657],{"class":484},[471,13080,725],{"class":488},[471,13082,493],{"class":492},[471,13084,496],{"class":484},[471,13086,499],{"class":484},[471,13088,13089],{"class":502},"animate-pulse bg-gray-200 rounded-full w-20 h-5",[471,13091,499],{"class":484},[471,13093,3475],{"class":484},[471,13095,725],{"class":488},[471,13097,508],{"class":484},[471,13099,13100],{"class":473,"line":620},[471,13101,532],{"emptyLinePlaceholder":531},[471,13103,13104],{"class":473,"line":663},[471,13105,13106],{"class":477},"          \u003C!-- Title (2 dòng) -->\n",[471,13108,13109,13111,13113,13115,13117,13119,13122,13124,13126,13128],{"class":473,"line":668},[471,13110,1657],{"class":484},[471,13112,725],{"class":488},[471,13114,493],{"class":492},[471,13116,496],{"class":484},[471,13118,499],{"class":484},[471,13120,13121],{"class":502},"animate-pulse bg-gray-200 rounded h-5 w-3\u002F4",[471,13123,499],{"class":484},[471,13125,3475],{"class":484},[471,13127,725],{"class":488},[471,13129,508],{"class":484},[471,13131,13132,13134,13136,13138,13140,13142,13145,13147,13149,13151],{"class":473,"line":674},[471,13133,1657],{"class":484},[471,13135,725],{"class":488},[471,13137,493],{"class":492},[471,13139,496],{"class":484},[471,13141,499],{"class":484},[471,13143,13144],{"class":502},"animate-pulse bg-gray-200 rounded h-5 w-1\u002F2",[471,13146,499],{"class":484},[471,13148,3475],{"class":484},[471,13150,725],{"class":488},[471,13152,508],{"class":484},[471,13154,13155],{"class":473,"line":694},[471,13156,532],{"emptyLinePlaceholder":531},[471,13158,13159],{"class":473,"line":700},[471,13160,13161],{"class":477},"          \u003C!-- Description (3 dòng) -->\n",[471,13163,13164,13166,13168,13170,13172,13174,13177,13179,13181,13183],{"class":473,"line":709},[471,13165,1657],{"class":484},[471,13167,725],{"class":488},[471,13169,493],{"class":492},[471,13171,496],{"class":484},[471,13173,499],{"class":484},[471,13175,13176],{"class":502},"animate-pulse bg-gray-100 rounded h-3 w-full",[471,13178,499],{"class":484},[471,13180,3475],{"class":484},[471,13182,725],{"class":488},[471,13184,508],{"class":484},[471,13186,13187,13189,13191,13193,13195,13197,13200,13202,13204,13206],{"class":473,"line":714},[471,13188,1657],{"class":484},[471,13190,725],{"class":488},[471,13192,493],{"class":492},[471,13194,496],{"class":484},[471,13196,499],{"class":484},[471,13198,13199],{"class":502},"animate-pulse bg-gray-100 rounded h-3 w-5\u002F6",[471,13201,499],{"class":484},[471,13203,3475],{"class":484},[471,13205,725],{"class":488},[471,13207,508],{"class":484},[471,13209,13210,13212,13214,13216,13218,13220,13223,13225,13227,13229],{"class":473,"line":720},[471,13211,1657],{"class":484},[471,13213,725],{"class":488},[471,13215,493],{"class":492},[471,13217,496],{"class":484},[471,13219,499],{"class":484},[471,13221,13222],{"class":502},"animate-pulse bg-gray-100 rounded h-3 w-2\u002F3",[471,13224,499],{"class":484},[471,13226,3475],{"class":484},[471,13228,725],{"class":488},[471,13230,508],{"class":484},[471,13232,13233],{"class":473,"line":741},[471,13234,532],{"emptyLinePlaceholder":531},[471,13236,13237],{"class":473,"line":772},[471,13238,13239],{"class":477},"          \u003C!-- Author + date -->\n",[471,13241,13242,13244,13246,13248,13250,13252,13255,13257],{"class":473,"line":816},[471,13243,1657],{"class":484},[471,13245,725],{"class":488},[471,13247,493],{"class":492},[471,13249,496],{"class":484},[471,13251,499],{"class":484},[471,13253,13254],{"class":502},"flex gap-4",[471,13256,499],{"class":484},[471,13258,508],{"class":484},[471,13260,13261,13263,13265,13267,13269,13271,13274,13276,13278,13280],{"class":473,"line":1833},[471,13262,1836],{"class":484},[471,13264,725],{"class":488},[471,13266,493],{"class":492},[471,13268,496],{"class":484},[471,13270,499],{"class":484},[471,13272,13273],{"class":502},"animate-pulse bg-gray-200 rounded-full w-8 h-8",[471,13275,499],{"class":484},[471,13277,3475],{"class":484},[471,13279,725],{"class":488},[471,13281,508],{"class":484},[471,13283,13284,13286,13288,13290,13292,13294,13297,13299,13301,13303],{"class":473,"line":1883},[471,13285,1836],{"class":484},[471,13287,725],{"class":488},[471,13289,493],{"class":492},[471,13291,496],{"class":484},[471,13293,499],{"class":484},[471,13295,13296],{"class":502},"animate-pulse bg-gray-200 rounded h-3 w-24",[471,13298,499],{"class":484},[471,13300,3475],{"class":484},[471,13302,725],{"class":488},[471,13304,508],{"class":484},[471,13306,13307,13309,13311,13313,13315,13317,13320,13322,13324,13326],{"class":473,"line":1893},[471,13308,1836],{"class":484},[471,13310,725],{"class":488},[471,13312,493],{"class":492},[471,13314,496],{"class":484},[471,13316,499],{"class":484},[471,13318,13319],{"class":502},"animate-pulse bg-gray-200 rounded h-3 w-16",[471,13321,499],{"class":484},[471,13323,3475],{"class":484},[471,13325,725],{"class":488},[471,13327,508],{"class":484},[471,13329,13330,13332,13334],{"class":473,"line":1902},[471,13331,1886],{"class":484},[471,13333,725],{"class":488},[471,13335,508],{"class":484},[471,13337,13338,13340,13342],{"class":473,"line":1911},[471,13339,1714],{"class":484},[471,13341,725],{"class":488},[471,13343,508],{"class":484},[471,13345,13346,13348,13350],{"class":473,"line":1921},[471,13347,1723],{"class":484},[471,13349,725],{"class":488},[471,13351,508],{"class":484},[471,13353,13354],{"class":473,"line":1926},[471,13355,532],{"emptyLinePlaceholder":531},[471,13357,13358],{"class":473,"line":1932},[471,13359,13360],{"class":477},"      \u003C!-- Skeleton card 2 -->\n",[471,13362,13363,13365,13367,13369,13371,13373,13375,13377],{"class":473,"line":1951},[471,13364,1502],{"class":484},[471,13366,725],{"class":488},[471,13368,493],{"class":492},[471,13370,496],{"class":484},[471,13372,499],{"class":484},[471,13374,13009],{"class":502},[471,13376,499],{"class":484},[471,13378,508],{"class":484},[471,13380,13381,13383,13385,13387,13389,13391,13393,13395,13397,13399],{"class":473,"line":1979},[471,13382,1584],{"class":484},[471,13384,725],{"class":488},[471,13386,493],{"class":492},[471,13388,496],{"class":484},[471,13390,499],{"class":484},[471,13392,13033],{"class":502},[471,13394,499],{"class":484},[471,13396,3475],{"class":484},[471,13398,725],{"class":488},[471,13400,508],{"class":484},[471,13402,13403,13405,13407,13409,13411,13413,13415,13417],{"class":473,"line":1984},[471,13404,1584],{"class":484},[471,13406,725],{"class":488},[471,13408,493],{"class":492},[471,13410,496],{"class":484},[471,13412,499],{"class":484},[471,13414,13065],{"class":502},[471,13416,499],{"class":484},[471,13418,508],{"class":484},[471,13420,13421,13423,13425,13427,13429,13431,13434,13436,13438,13440],{"class":473,"line":2000},[471,13422,1657],{"class":484},[471,13424,725],{"class":488},[471,13426,493],{"class":492},[471,13428,496],{"class":484},[471,13430,499],{"class":484},[471,13432,13433],{"class":502},"animate-pulse bg-gray-200 rounded-full w-16 h-5",[471,13435,499],{"class":484},[471,13437,3475],{"class":484},[471,13439,725],{"class":488},[471,13441,508],{"class":484},[471,13443,13444,13446,13448,13450,13452,13454,13457,13459,13461,13463],{"class":473,"line":2006},[471,13445,1657],{"class":484},[471,13447,725],{"class":488},[471,13449,493],{"class":492},[471,13451,496],{"class":484},[471,13453,499],{"class":484},[471,13455,13456],{"class":502},"animate-pulse bg-gray-200 rounded h-5 w-2\u002F3",[471,13458,499],{"class":484},[471,13460,3475],{"class":484},[471,13462,725],{"class":488},[471,13464,508],{"class":484},[471,13466,13467,13469,13471,13473,13475,13477,13480,13482,13484,13486],{"class":473,"line":2012},[471,13468,1657],{"class":484},[471,13470,725],{"class":488},[471,13472,493],{"class":492},[471,13474,496],{"class":484},[471,13476,499],{"class":484},[471,13478,13479],{"class":502},"animate-pulse bg-gray-200 rounded h-5 w-1\u002F3",[471,13481,499],{"class":484},[471,13483,3475],{"class":484},[471,13485,725],{"class":488},[471,13487,508],{"class":484},[471,13489,13490,13492,13494,13496,13498,13500,13502,13504,13506,13508],{"class":473,"line":2018},[471,13491,1657],{"class":484},[471,13493,725],{"class":488},[471,13495,493],{"class":492},[471,13497,496],{"class":484},[471,13499,499],{"class":484},[471,13501,13176],{"class":502},[471,13503,499],{"class":484},[471,13505,3475],{"class":484},[471,13507,725],{"class":488},[471,13509,508],{"class":484},[471,13511,13512,13514,13516,13518,13520,13522,13525,13527,13529,13531],{"class":473,"line":2027},[471,13513,1657],{"class":484},[471,13515,725],{"class":488},[471,13517,493],{"class":492},[471,13519,496],{"class":484},[471,13521,499],{"class":484},[471,13523,13524],{"class":502},"animate-pulse bg-gray-100 rounded h-3 w-4\u002F5",[471,13526,499],{"class":484},[471,13528,3475],{"class":484},[471,13530,725],{"class":488},[471,13532,508],{"class":484},[471,13534,13535,13537,13539,13541,13543,13545,13548,13550,13552,13554],{"class":473,"line":2033},[471,13536,1657],{"class":484},[471,13538,725],{"class":488},[471,13540,493],{"class":492},[471,13542,496],{"class":484},[471,13544,499],{"class":484},[471,13546,13547],{"class":502},"animate-pulse bg-gray-100 rounded h-3 w-1\u002F2",[471,13549,499],{"class":484},[471,13551,3475],{"class":484},[471,13553,725],{"class":488},[471,13555,508],{"class":484},[471,13557,13558,13560,13562,13564,13566,13568,13570,13572],{"class":473,"line":2042},[471,13559,1657],{"class":484},[471,13561,725],{"class":488},[471,13563,493],{"class":492},[471,13565,496],{"class":484},[471,13567,499],{"class":484},[471,13569,13254],{"class":502},[471,13571,499],{"class":484},[471,13573,508],{"class":484},[471,13575,13576,13578,13580,13582,13584,13586,13588,13590,13592,13594],{"class":473,"line":2051},[471,13577,1836],{"class":484},[471,13579,725],{"class":488},[471,13581,493],{"class":492},[471,13583,496],{"class":484},[471,13585,499],{"class":484},[471,13587,13273],{"class":502},[471,13589,499],{"class":484},[471,13591,3475],{"class":484},[471,13593,725],{"class":488},[471,13595,508],{"class":484},[471,13597,13598,13600,13602,13604,13606,13608,13610,13612,13614,13616],{"class":473,"line":2056},[471,13599,1836],{"class":484},[471,13601,725],{"class":488},[471,13603,493],{"class":492},[471,13605,496],{"class":484},[471,13607,499],{"class":484},[471,13609,13296],{"class":502},[471,13611,499],{"class":484},[471,13613,3475],{"class":484},[471,13615,725],{"class":488},[471,13617,508],{"class":484},[471,13619,13620,13622,13624],{"class":473,"line":2062},[471,13621,1886],{"class":484},[471,13623,725],{"class":488},[471,13625,508],{"class":484},[471,13627,13628,13630,13632],{"class":473,"line":2081},[471,13629,1714],{"class":484},[471,13631,725],{"class":488},[471,13633,508],{"class":484},[471,13635,13636,13638,13640],{"class":473,"line":2109},[471,13637,1723],{"class":484},[471,13639,725],{"class":488},[471,13641,508],{"class":484},[471,13643,13644],{"class":473,"line":2114},[471,13645,532],{"emptyLinePlaceholder":531},[471,13647,13648],{"class":473,"line":2130},[471,13649,13650],{"class":477},"      \u003C!-- Skeleton card 3 -->\n",[471,13652,13653,13655,13657,13659,13661,13663,13665,13667],{"class":473,"line":2136},[471,13654,1502],{"class":484},[471,13656,725],{"class":488},[471,13658,493],{"class":492},[471,13660,496],{"class":484},[471,13662,499],{"class":484},[471,13664,13009],{"class":502},[471,13666,499],{"class":484},[471,13668,508],{"class":484},[471,13670,13671,13673,13675,13677,13679,13681,13683,13685,13687,13689],{"class":473,"line":2142},[471,13672,1584],{"class":484},[471,13674,725],{"class":488},[471,13676,493],{"class":492},[471,13678,496],{"class":484},[471,13680,499],{"class":484},[471,13682,13033],{"class":502},[471,13684,499],{"class":484},[471,13686,3475],{"class":484},[471,13688,725],{"class":488},[471,13690,508],{"class":484},[471,13692,13693,13695,13697,13699,13701,13703,13705,13707],{"class":473,"line":2148},[471,13694,1584],{"class":484},[471,13696,725],{"class":488},[471,13698,493],{"class":492},[471,13700,496],{"class":484},[471,13702,499],{"class":484},[471,13704,13065],{"class":502},[471,13706,499],{"class":484},[471,13708,508],{"class":484},[471,13710,13711,13713,13715,13717,13719,13721,13724,13726,13728,13730],{"class":473,"line":2157},[471,13712,1657],{"class":484},[471,13714,725],{"class":488},[471,13716,493],{"class":492},[471,13718,496],{"class":484},[471,13720,499],{"class":484},[471,13722,13723],{"class":502},"animate-pulse bg-gray-200 rounded-full w-24 h-5",[471,13725,499],{"class":484},[471,13727,3475],{"class":484},[471,13729,725],{"class":488},[471,13731,508],{"class":484},[471,13733,13734,13736,13738,13740,13742,13744,13747,13749,13751,13753],{"class":473,"line":2163},[471,13735,1657],{"class":484},[471,13737,725],{"class":488},[471,13739,493],{"class":492},[471,13741,496],{"class":484},[471,13743,499],{"class":484},[471,13745,13746],{"class":502},"animate-pulse bg-gray-200 rounded h-5 w-4\u002F5",[471,13748,499],{"class":484},[471,13750,3475],{"class":484},[471,13752,725],{"class":488},[471,13754,508],{"class":484},[471,13756,13757,13759,13761,13763,13765,13767,13769,13771,13773,13775],{"class":473,"line":2172},[471,13758,1657],{"class":484},[471,13760,725],{"class":488},[471,13762,493],{"class":492},[471,13764,496],{"class":484},[471,13766,499],{"class":484},[471,13768,13144],{"class":502},[471,13770,499],{"class":484},[471,13772,3475],{"class":484},[471,13774,725],{"class":488},[471,13776,508],{"class":484},[471,13778,13779,13781,13783,13785,13787,13789,13791,13793,13795,13797],{"class":473,"line":2181},[471,13780,1657],{"class":484},[471,13782,725],{"class":488},[471,13784,493],{"class":492},[471,13786,496],{"class":484},[471,13788,499],{"class":484},[471,13790,13176],{"class":502},[471,13792,499],{"class":484},[471,13794,3475],{"class":484},[471,13796,725],{"class":488},[471,13798,508],{"class":484},[471,13800,13801,13803,13805,13807,13809,13811,13814,13816,13818,13820],{"class":473,"line":2186},[471,13802,1657],{"class":484},[471,13804,725],{"class":488},[471,13806,493],{"class":492},[471,13808,496],{"class":484},[471,13810,499],{"class":484},[471,13812,13813],{"class":502},"animate-pulse bg-gray-100 rounded h-3 w-3\u002F4",[471,13815,499],{"class":484},[471,13817,3475],{"class":484},[471,13819,725],{"class":488},[471,13821,508],{"class":484},[471,13823,13824,13826,13828,13830,13832,13834,13837,13839,13841,13843],{"class":473,"line":2192},[471,13825,1657],{"class":484},[471,13827,725],{"class":488},[471,13829,493],{"class":492},[471,13831,496],{"class":484},[471,13833,499],{"class":484},[471,13835,13836],{"class":502},"animate-pulse bg-gray-100 rounded h-3 w-1\u002F3",[471,13838,499],{"class":484},[471,13840,3475],{"class":484},[471,13842,725],{"class":488},[471,13844,508],{"class":484},[471,13846,13847,13849,13851,13853,13855,13857,13859,13861],{"class":473,"line":2211},[471,13848,1657],{"class":484},[471,13850,725],{"class":488},[471,13852,493],{"class":492},[471,13854,496],{"class":484},[471,13856,499],{"class":484},[471,13858,13254],{"class":502},[471,13860,499],{"class":484},[471,13862,508],{"class":484},[471,13864,13865,13867,13869,13871,13873,13875,13877,13879,13881,13883],{"class":473,"line":2239},[471,13866,1836],{"class":484},[471,13868,725],{"class":488},[471,13870,493],{"class":492},[471,13872,496],{"class":484},[471,13874,499],{"class":484},[471,13876,13273],{"class":502},[471,13878,499],{"class":484},[471,13880,3475],{"class":484},[471,13882,725],{"class":488},[471,13884,508],{"class":484},[471,13886,13887,13889,13891,13893,13895,13897,13900,13902,13904,13906],{"class":473,"line":2244},[471,13888,1836],{"class":484},[471,13890,725],{"class":488},[471,13892,493],{"class":492},[471,13894,496],{"class":484},[471,13896,499],{"class":484},[471,13898,13899],{"class":502},"animate-pulse bg-gray-200 rounded h-3 w-20",[471,13901,499],{"class":484},[471,13903,3475],{"class":484},[471,13905,725],{"class":488},[471,13907,508],{"class":484},[471,13909,13910,13912,13914,13916,13918,13920,13923,13925,13927,13929],{"class":473,"line":2260},[471,13911,1836],{"class":484},[471,13913,725],{"class":488},[471,13915,493],{"class":492},[471,13917,496],{"class":484},[471,13919,499],{"class":484},[471,13921,13922],{"class":502},"animate-pulse bg-gray-200 rounded h-3 w-14",[471,13924,499],{"class":484},[471,13926,3475],{"class":484},[471,13928,725],{"class":488},[471,13930,508],{"class":484},[471,13932,13933,13935,13937],{"class":473,"line":2266},[471,13934,1886],{"class":484},[471,13936,725],{"class":488},[471,13938,508],{"class":484},[471,13940,13941,13943,13945],{"class":473,"line":2272},[471,13942,1714],{"class":484},[471,13944,725],{"class":488},[471,13946,508],{"class":484},[471,13948,13949,13951,13953],{"class":473,"line":2278},[471,13950,1723],{"class":484},[471,13952,725],{"class":488},[471,13954,508],{"class":484},[471,13956,13957,13959,13961],{"class":473,"line":2287},[471,13958,1914],{"class":484},[471,13960,725],{"class":488},[471,13962,508],{"class":484},[471,13964,13965,13967,13969],{"class":473,"line":2293},[471,13966,885],{"class":484},[471,13968,725],{"class":488},[471,13970,508],{"class":484},[471,13972,13973,13975,13977],{"class":473,"line":2302},[471,13974,521],{"class":484},[471,13976,1419],{"class":488},[471,13978,508],{"class":484},[824,13980,13982],{"id":13981},"bài-tập-13-fade-in-up-animation-cho-page-sections-scroll-reveal-concept","Bài tập 13: Fade-in-up animation cho page sections (scroll reveal concept)",[453,13984,13985,13987],{},[457,13986,1404],{}," Các section xuất hiện với hiệu ứng fade-in + trượt lên khi scroll (dùng CSS animation).",[462,13989,13991],{"className":1408,"code":13990,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-3xl mx-auto p-8 space-y-16\">\n    \u003C!-- Section 1 -->\n    \u003Csection class=\"animate-fade-in-up\">\n      \u003Cspan class=\"text-sm font-semibold text-indigo-600 uppercase tracking-wider\">Section 1\u003C\u002Fspan>\n      \u003Ch2 class=\"text-3xl font-bold text-gray-900 mt-2\">Tại sao chọn chúng tôi?\u003C\u002Fh2>\n      \u003Cp class=\"mt-4 text-gray-600 leading-relaxed\">\n        Với hơn 10 năm kinh nghiệm trong ngành, chúng tôi đã giúp hơn 500 doanh nghiệp\n        chuyển đổi số thành công. Đội ngũ 200+ kỹ sư luôn sẵn sàng đồng hành cùng bạn.\n      \u003C\u002Fp>\n    \u003C\u002Fsection>\n\n    \u003C!-- Section 2 — delay -->\n    \u003Csection class=\"animate-fade-in-up\" style=\"animation-delay: 0.2s; animation-fill-mode: both;\">\n      \u003Cspan class=\"text-sm font-semibold text-emerald-600 uppercase tracking-wider\">Section 2\u003C\u002Fspan>\n      \u003Ch2 class=\"text-3xl font-bold text-gray-900 mt-2\">Công nghệ hiện đại\u003C\u002Fh2>\n      \u003Cp class=\"mt-4 text-gray-600 leading-relaxed\">\n        Sử dụng stack công nghệ mới nhất: Nuxt 4, TypeScript, PostgreSQL,\n        Docker, Kubernetes — đảm bảo sản phẩm luôn ở trạng thái tốt nhất.\n      \u003C\u002Fp>\n    \u003C\u002Fsection>\n\n    \u003C!-- Section 3 — delay thêm -->\n    \u003Csection class=\"animate-fade-in-up\" style=\"animation-delay: 0.4s; animation-fill-mode: both;\">\n      \u003Cspan class=\"text-sm font-semibold text-purple-600 uppercase tracking-wider\">Section 3\u003C\u002Fspan>\n      \u003Ch2 class=\"text-3xl font-bold text-gray-900 mt-2\">Bảo mật và tin cậy\u003C\u002Fh2>\n      \u003Cp class=\"mt-4 text-gray-600 leading-relaxed\">\n        SOC 2 Type II certified, GDPR compliant. Dữ liệu của bạn được mã hóa\n        end-to-end và lưu trữ trên hạ tầng đạt chuẩn quốc tế.\n      \u003C\u002Fp>\n    \u003C\u002Fsection>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n@keyframes fade-in-up {\n  from {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.animate-fade-in-up {\n  animation: fade-in-up 0.6s ease-out both;\n}\n\u003C\u002Fstyle>\n",[432,13992,13993,14001,14020,14025,14044,14072,14100,14119,14124,14129,14137,14145,14149,14154,14183,14211,14238,14256,14261,14266,14274,14282,14286,14291,14320,14348,14375,14393,14398,14403,14411,14419,14427,14435,14439,14451,14461,14468,14479,14495,14499,14506,14516,14530,14534,14538,14542,14550,14568,14572],{"__ignoreMap":467},[471,13994,13995,13997,13999],{"class":473,"line":474},[471,13996,485],{"class":484},[471,13998,1419],{"class":488},[471,14000,508],{"class":484},[471,14002,14003,14005,14007,14009,14011,14013,14016,14018],{"class":473,"line":481},[471,14004,744],{"class":484},[471,14006,725],{"class":488},[471,14008,493],{"class":492},[471,14010,496],{"class":484},[471,14012,499],{"class":484},[471,14014,14015],{"class":502},"max-w-3xl mx-auto p-8 space-y-16",[471,14017,499],{"class":484},[471,14019,508],{"class":484},[471,14021,14022],{"class":473,"line":511},[471,14023,14024],{"class":477},"    \u003C!-- Section 1 -->\n",[471,14026,14027,14029,14032,14034,14036,14038,14040,14042],{"class":473,"line":518},[471,14028,1445],{"class":484},[471,14030,14031],{"class":488},"section",[471,14033,493],{"class":492},[471,14035,496],{"class":484},[471,14037,499],{"class":484},[471,14039,12077],{"class":502},[471,14041,499],{"class":484},[471,14043,508],{"class":484},[471,14045,14046,14048,14050,14052,14054,14056,14059,14061,14063,14066,14068,14070],{"class":473,"line":528},[471,14047,1502],{"class":484},[471,14049,471],{"class":488},[471,14051,493],{"class":492},[471,14053,496],{"class":484},[471,14055,499],{"class":484},[471,14057,14058],{"class":502},"text-sm font-semibold text-indigo-600 uppercase tracking-wider",[471,14060,499],{"class":484},[471,14062,651],{"class":484},[471,14064,14065],{"class":514},"Section 1",[471,14067,521],{"class":484},[471,14069,471],{"class":488},[471,14071,508],{"class":484},[471,14073,14074,14076,14078,14080,14082,14084,14087,14089,14091,14094,14096,14098],{"class":473,"line":535},[471,14075,1502],{"class":484},[471,14077,427],{"class":488},[471,14079,493],{"class":492},[471,14081,496],{"class":484},[471,14083,499],{"class":484},[471,14085,14086],{"class":502},"text-3xl font-bold text-gray-900 mt-2",[471,14088,499],{"class":484},[471,14090,651],{"class":484},[471,14092,14093],{"class":514},"Tại sao chọn chúng tôi?",[471,14095,521],{"class":484},[471,14097,427],{"class":488},[471,14099,508],{"class":484},[471,14101,14102,14104,14106,14108,14110,14112,14115,14117],{"class":473,"line":541},[471,14103,1502],{"class":484},[471,14105,453],{"class":488},[471,14107,493],{"class":492},[471,14109,496],{"class":484},[471,14111,499],{"class":484},[471,14113,14114],{"class":502},"mt-4 text-gray-600 leading-relaxed",[471,14116,499],{"class":484},[471,14118,508],{"class":484},[471,14120,14121],{"class":473,"line":563},[471,14122,14123],{"class":514},"        Với hơn 10 năm kinh nghiệm trong ngành, chúng tôi đã giúp hơn 500 doanh nghiệp\n",[471,14125,14126],{"class":473,"line":568},[471,14127,14128],{"class":514},"        chuyển đổi số thành công. Đội ngũ 200+ kỹ sư luôn sẵn sàng đồng hành cùng bạn.\n",[471,14130,14131,14133,14135],{"class":473,"line":574},[471,14132,1723],{"class":484},[471,14134,453],{"class":488},[471,14136,508],{"class":484},[471,14138,14139,14141,14143],{"class":473,"line":594},[471,14140,1914],{"class":484},[471,14142,14031],{"class":488},[471,14144,508],{"class":484},[471,14146,14147],{"class":473,"line":600},[471,14148,532],{"emptyLinePlaceholder":531},[471,14150,14151],{"class":473,"line":609},[471,14152,14153],{"class":477},"    \u003C!-- Section 2 — delay -->\n",[471,14155,14156,14158,14160,14162,14164,14166,14168,14170,14172,14174,14176,14179,14181],{"class":473,"line":614},[471,14157,1445],{"class":484},[471,14159,14031],{"class":488},[471,14161,493],{"class":492},[471,14163,496],{"class":484},[471,14165,499],{"class":484},[471,14167,12077],{"class":502},[471,14169,499],{"class":484},[471,14171,9367],{"class":492},[471,14173,496],{"class":484},[471,14175,499],{"class":484},[471,14177,14178],{"class":502},"animation-delay: 0.2s; animation-fill-mode: both;",[471,14180,499],{"class":484},[471,14182,508],{"class":484},[471,14184,14185,14187,14189,14191,14193,14195,14198,14200,14202,14205,14207,14209],{"class":473,"line":620},[471,14186,1502],{"class":484},[471,14188,471],{"class":488},[471,14190,493],{"class":492},[471,14192,496],{"class":484},[471,14194,499],{"class":484},[471,14196,14197],{"class":502},"text-sm font-semibold text-emerald-600 uppercase tracking-wider",[471,14199,499],{"class":484},[471,14201,651],{"class":484},[471,14203,14204],{"class":514},"Section 2",[471,14206,521],{"class":484},[471,14208,471],{"class":488},[471,14210,508],{"class":484},[471,14212,14213,14215,14217,14219,14221,14223,14225,14227,14229,14232,14234,14236],{"class":473,"line":663},[471,14214,1502],{"class":484},[471,14216,427],{"class":488},[471,14218,493],{"class":492},[471,14220,496],{"class":484},[471,14222,499],{"class":484},[471,14224,14086],{"class":502},[471,14226,499],{"class":484},[471,14228,651],{"class":484},[471,14230,14231],{"class":514},"Công nghệ hiện đại",[471,14233,521],{"class":484},[471,14235,427],{"class":488},[471,14237,508],{"class":484},[471,14239,14240,14242,14244,14246,14248,14250,14252,14254],{"class":473,"line":668},[471,14241,1502],{"class":484},[471,14243,453],{"class":488},[471,14245,493],{"class":492},[471,14247,496],{"class":484},[471,14249,499],{"class":484},[471,14251,14114],{"class":502},[471,14253,499],{"class":484},[471,14255,508],{"class":484},[471,14257,14258],{"class":473,"line":674},[471,14259,14260],{"class":514},"        Sử dụng stack công nghệ mới nhất: Nuxt 4, TypeScript, PostgreSQL,\n",[471,14262,14263],{"class":473,"line":694},[471,14264,14265],{"class":514},"        Docker, Kubernetes — đảm bảo sản phẩm luôn ở trạng thái tốt nhất.\n",[471,14267,14268,14270,14272],{"class":473,"line":700},[471,14269,1723],{"class":484},[471,14271,453],{"class":488},[471,14273,508],{"class":484},[471,14275,14276,14278,14280],{"class":473,"line":709},[471,14277,1914],{"class":484},[471,14279,14031],{"class":488},[471,14281,508],{"class":484},[471,14283,14284],{"class":473,"line":714},[471,14285,532],{"emptyLinePlaceholder":531},[471,14287,14288],{"class":473,"line":720},[471,14289,14290],{"class":477},"    \u003C!-- Section 3 — delay thêm -->\n",[471,14292,14293,14295,14297,14299,14301,14303,14305,14307,14309,14311,14313,14316,14318],{"class":473,"line":741},[471,14294,1445],{"class":484},[471,14296,14031],{"class":488},[471,14298,493],{"class":492},[471,14300,496],{"class":484},[471,14302,499],{"class":484},[471,14304,12077],{"class":502},[471,14306,499],{"class":484},[471,14308,9367],{"class":492},[471,14310,496],{"class":484},[471,14312,499],{"class":484},[471,14314,14315],{"class":502},"animation-delay: 0.4s; animation-fill-mode: both;",[471,14317,499],{"class":484},[471,14319,508],{"class":484},[471,14321,14322,14324,14326,14328,14330,14332,14335,14337,14339,14342,14344,14346],{"class":473,"line":772},[471,14323,1502],{"class":484},[471,14325,471],{"class":488},[471,14327,493],{"class":492},[471,14329,496],{"class":484},[471,14331,499],{"class":484},[471,14333,14334],{"class":502},"text-sm font-semibold text-purple-600 uppercase tracking-wider",[471,14336,499],{"class":484},[471,14338,651],{"class":484},[471,14340,14341],{"class":514},"Section 3",[471,14343,521],{"class":484},[471,14345,471],{"class":488},[471,14347,508],{"class":484},[471,14349,14350,14352,14354,14356,14358,14360,14362,14364,14366,14369,14371,14373],{"class":473,"line":816},[471,14351,1502],{"class":484},[471,14353,427],{"class":488},[471,14355,493],{"class":492},[471,14357,496],{"class":484},[471,14359,499],{"class":484},[471,14361,14086],{"class":502},[471,14363,499],{"class":484},[471,14365,651],{"class":484},[471,14367,14368],{"class":514},"Bảo mật và tin cậy",[471,14370,521],{"class":484},[471,14372,427],{"class":488},[471,14374,508],{"class":484},[471,14376,14377,14379,14381,14383,14385,14387,14389,14391],{"class":473,"line":1833},[471,14378,1502],{"class":484},[471,14380,453],{"class":488},[471,14382,493],{"class":492},[471,14384,496],{"class":484},[471,14386,499],{"class":484},[471,14388,14114],{"class":502},[471,14390,499],{"class":484},[471,14392,508],{"class":484},[471,14394,14395],{"class":473,"line":1883},[471,14396,14397],{"class":514},"        SOC 2 Type II certified, GDPR compliant. Dữ liệu của bạn được mã hóa\n",[471,14399,14400],{"class":473,"line":1893},[471,14401,14402],{"class":514},"        end-to-end và lưu trữ trên hạ tầng đạt chuẩn quốc tế.\n",[471,14404,14405,14407,14409],{"class":473,"line":1902},[471,14406,1723],{"class":484},[471,14408,453],{"class":488},[471,14410,508],{"class":484},[471,14412,14413,14415,14417],{"class":473,"line":1911},[471,14414,1914],{"class":484},[471,14416,14031],{"class":488},[471,14418,508],{"class":484},[471,14420,14421,14423,14425],{"class":473,"line":1921},[471,14422,885],{"class":484},[471,14424,725],{"class":488},[471,14426,508],{"class":484},[471,14428,14429,14431,14433],{"class":473,"line":1926},[471,14430,521],{"class":484},[471,14432,1419],{"class":488},[471,14434,508],{"class":484},[471,14436,14437],{"class":473,"line":1932},[471,14438,532],{"emptyLinePlaceholder":531},[471,14440,14441,14443,14446,14449],{"class":473,"line":1951},[471,14442,485],{"class":484},[471,14444,14445],{"class":488},"style",[471,14447,14448],{"class":492}," scoped",[471,14450,508],{"class":484},[471,14452,14453,14456,14459],{"class":473,"line":1979},[471,14454,14455],{"class":7392},"@keyframes",[471,14457,14458],{"class":7604}," fade-in-up",[471,14460,7486],{"class":484},[471,14462,14463,14466],{"class":473,"line":1984},[471,14464,14465],{"class":12009},"  from",[471,14467,7486],{"class":484},[471,14469,14470,14473,14475,14477],{"class":473,"line":2000},[471,14471,14472],{"class":11790},"    opacity",[471,14474,1243],{"class":484},[471,14476,11796],{"class":7537},[471,14478,11799],{"class":484},[471,14480,14481,14484,14486,14488,14490,14493],{"class":473,"line":2006},[471,14482,14483],{"class":11790},"    transform",[471,14485,1243],{"class":484},[471,14487,11809],{"class":7441},[471,14489,7444],{"class":484},[471,14491,14492],{"class":7537},"30px",[471,14494,11817],{"class":484},[471,14496,14497],{"class":473,"line":2012},[471,14498,7678],{"class":484},[471,14500,14501,14504],{"class":473,"line":2018},[471,14502,14503],{"class":12009},"  to",[471,14505,7486],{"class":484},[471,14507,14508,14510,14512,14514],{"class":473,"line":2027},[471,14509,14472],{"class":11790},[471,14511,1243],{"class":484},[471,14513,11838],{"class":7537},[471,14515,11799],{"class":484},[471,14517,14518,14520,14522,14524,14526,14528],{"class":473,"line":2033},[471,14519,14483],{"class":11790},[471,14521,1243],{"class":484},[471,14523,11809],{"class":7441},[471,14525,7444],{"class":484},[471,14527,11853],{"class":7537},[471,14529,11817],{"class":484},[471,14531,14532],{"class":473,"line":2042},[471,14533,7678],{"class":484},[471,14535,14536],{"class":473,"line":2051},[471,14537,7549],{"class":484},[471,14539,14540],{"class":473,"line":2056},[471,14541,532],{"emptyLinePlaceholder":531},[471,14543,14544,14546,14548],{"class":473,"line":2062},[471,14545,2917],{"class":484},[471,14547,12077],{"class":12009},[471,14549,7486],{"class":484},[471,14551,14552,14555,14557,14560,14563,14566],{"class":473,"line":2081},[471,14553,14554],{"class":11790},"  animation",[471,14556,1243],{"class":484},[471,14558,14559],{"class":514}," fade-in-up ",[471,14561,14562],{"class":7537},"0.6s",[471,14564,14565],{"class":514}," ease-out both",[471,14567,11799],{"class":484},[471,14569,14570],{"class":473,"line":2109},[471,14571,7549],{"class":484},[471,14573,14574,14576,14578],{"class":473,"line":2114},[471,14575,521],{"class":484},[471,14577,14445],{"class":488},[471,14579,508],{"class":484},[5602,14581],{},[427,14583,14585],{"id":14584},"_5-opacity-visibility","5. Opacity & Visibility",[462,14587,14589],{"className":464,"code":14588,"language":466,"meta":467,"style":467},"\u003C!-- Opacity -->\n\u003Cdiv class=\"opacity-100\">Hiển thị đầy đủ\u003C\u002Fdiv>\n\u003Cdiv class=\"opacity-75\">75% opacity\u003C\u002Fdiv>\n\u003Cdiv class=\"opacity-50\">50% opacity\u003C\u002Fdiv>\n\u003Cdiv class=\"opacity-25\">25% opacity\u003C\u002Fdiv>\n\u003Cdiv class=\"opacity-0\">Ẩn hoàn toàn (vẫn chiếm không gian)\u003C\u002Fdiv>\n\n\u003C!-- Visibility -->\n\u003Cdiv class=\"visible\">Hiển thị (default)\u003C\u002Fdiv>\n\u003Cdiv class=\"invisible\">Ẩn nhưng vẫn chiếm không gian\u003C\u002Fdiv>\n\u003Cdiv class=\"collapse\">Ẩn + không chiếm không gian (nhưng khác display:none)\u003C\u002Fdiv>\n",[432,14590,14591,14596,14624,14652,14680,14708,14736,14740,14745,14773,14801],{"__ignoreMap":467},[471,14592,14593],{"class":473,"line":474},[471,14594,14595],{"class":477},"\u003C!-- Opacity -->\n",[471,14597,14598,14600,14602,14604,14606,14608,14611,14613,14615,14618,14620,14622],{"class":473,"line":481},[471,14599,485],{"class":484},[471,14601,725],{"class":488},[471,14603,493],{"class":492},[471,14605,496],{"class":484},[471,14607,499],{"class":484},[471,14609,14610],{"class":502},"opacity-100",[471,14612,499],{"class":484},[471,14614,651],{"class":484},[471,14616,14617],{"class":514},"Hiển thị đầy đủ",[471,14619,521],{"class":484},[471,14621,725],{"class":488},[471,14623,508],{"class":484},[471,14625,14626,14628,14630,14632,14634,14636,14639,14641,14643,14646,14648,14650],{"class":473,"line":511},[471,14627,485],{"class":484},[471,14629,725],{"class":488},[471,14631,493],{"class":492},[471,14633,496],{"class":484},[471,14635,499],{"class":484},[471,14637,14638],{"class":502},"opacity-75",[471,14640,499],{"class":484},[471,14642,651],{"class":484},[471,14644,14645],{"class":514},"75% opacity",[471,14647,521],{"class":484},[471,14649,725],{"class":488},[471,14651,508],{"class":484},[471,14653,14654,14656,14658,14660,14662,14664,14667,14669,14671,14674,14676,14678],{"class":473,"line":518},[471,14655,485],{"class":484},[471,14657,725],{"class":488},[471,14659,493],{"class":492},[471,14661,496],{"class":484},[471,14663,499],{"class":484},[471,14665,14666],{"class":502},"opacity-50",[471,14668,499],{"class":484},[471,14670,651],{"class":484},[471,14672,14673],{"class":514},"50% opacity",[471,14675,521],{"class":484},[471,14677,725],{"class":488},[471,14679,508],{"class":484},[471,14681,14682,14684,14686,14688,14690,14692,14695,14697,14699,14702,14704,14706],{"class":473,"line":528},[471,14683,485],{"class":484},[471,14685,725],{"class":488},[471,14687,493],{"class":492},[471,14689,496],{"class":484},[471,14691,499],{"class":484},[471,14693,14694],{"class":502},"opacity-25",[471,14696,499],{"class":484},[471,14698,651],{"class":484},[471,14700,14701],{"class":514},"25% opacity",[471,14703,521],{"class":484},[471,14705,725],{"class":488},[471,14707,508],{"class":484},[471,14709,14710,14712,14714,14716,14718,14720,14723,14725,14727,14730,14732,14734],{"class":473,"line":535},[471,14711,485],{"class":484},[471,14713,725],{"class":488},[471,14715,493],{"class":492},[471,14717,496],{"class":484},[471,14719,499],{"class":484},[471,14721,14722],{"class":502},"opacity-0",[471,14724,499],{"class":484},[471,14726,651],{"class":484},[471,14728,14729],{"class":514},"Ẩn hoàn toàn (vẫn chiếm không gian)",[471,14731,521],{"class":484},[471,14733,725],{"class":488},[471,14735,508],{"class":484},[471,14737,14738],{"class":473,"line":541},[471,14739,532],{"emptyLinePlaceholder":531},[471,14741,14742],{"class":473,"line":563},[471,14743,14744],{"class":477},"\u003C!-- Visibility -->\n",[471,14746,14747,14749,14751,14753,14755,14757,14760,14762,14764,14767,14769,14771],{"class":473,"line":568},[471,14748,485],{"class":484},[471,14750,725],{"class":488},[471,14752,493],{"class":492},[471,14754,496],{"class":484},[471,14756,499],{"class":484},[471,14758,14759],{"class":502},"visible",[471,14761,499],{"class":484},[471,14763,651],{"class":484},[471,14765,14766],{"class":514},"Hiển thị (default)",[471,14768,521],{"class":484},[471,14770,725],{"class":488},[471,14772,508],{"class":484},[471,14774,14775,14777,14779,14781,14783,14785,14788,14790,14792,14795,14797,14799],{"class":473,"line":574},[471,14776,485],{"class":484},[471,14778,725],{"class":488},[471,14780,493],{"class":492},[471,14782,496],{"class":484},[471,14784,499],{"class":484},[471,14786,14787],{"class":502},"invisible",[471,14789,499],{"class":484},[471,14791,651],{"class":484},[471,14793,14794],{"class":514},"Ẩn nhưng vẫn chiếm không gian",[471,14796,521],{"class":484},[471,14798,725],{"class":488},[471,14800,508],{"class":484},[471,14802,14803,14805,14807,14809,14811,14813,14816,14818,14820,14823,14825,14827],{"class":473,"line":594},[471,14804,485],{"class":484},[471,14806,725],{"class":488},[471,14808,493],{"class":492},[471,14810,496],{"class":484},[471,14812,499],{"class":484},[471,14814,14815],{"class":502},"collapse",[471,14817,499],{"class":484},[471,14819,651],{"class":484},[471,14821,14822],{"class":514},"Ẩn + không chiếm không gian (nhưng khác display:none)",[471,14824,521],{"class":484},[471,14826,725],{"class":488},[471,14828,508],{"class":484},[824,14830,14832],{"id":14831},"bài-tập-14-tooltip-showhide-on-hover","Bài tập 14: Tooltip show\u002Fhide on hover",[453,14834,14835,14837],{},[457,14836,1404],{}," Tooltip xuất hiện khi hover vào icon với transition opacity + translate.",[462,14839,14841],{"className":1408,"code":14840,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-md mx-auto p-8 pt-16\">\n    \u003Ch2 class=\"text-xl font-bold text-gray-900 mb-8\">Tooltip trên hover\u003C\u002Fh2>\n\n    \u003Cdiv class=\"flex gap-8 justify-center\">\n      \u003C!-- Tooltip top -->\n      \u003Cdiv class=\"relative group\">\n        \u003Cbutton class=\"w-10 h-10 bg-indigo-100 text-indigo-600 rounded-lg flex items-center justify-center\n                       hover:bg-indigo-200 transition-colors text-lg font-bold\">\n          ?\n        \u003C\u002Fbutton>\n        \u003Cdiv class=\"absolute bottom-full left-1\u002F2 -translate-x-1\u002F2 mb-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg\n                    opacity-0 invisible group-hover:opacity-100 group-hover:visible\n                    transition-all duration-200 whitespace-nowrap\">\n          Tooltip phía trên\n          \u003C!-- Arrow -->\n          \u003Cdiv class=\"absolute top-full left-1\u002F2 -translate-x-1\u002F2 border-4 border-transparent border-t-gray-900\">\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Tooltip bottom -->\n      \u003Cdiv class=\"relative group\">\n        \u003Cbutton class=\"w-10 h-10 bg-emerald-100 text-emerald-600 rounded-lg flex items-center justify-center\n                       hover:bg-emerald-200 transition-colors text-lg\">\n          ⓘ\n        \u003C\u002Fbutton>\n        \u003Cdiv class=\"absolute top-full left-1\u002F2 -translate-x-1\u002F2 mt-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg\n                    opacity-0 invisible group-hover:opacity-100 group-hover:visible\n                    transition-all duration-200 whitespace-nowrap\">\n          Thông tin chi tiết\n          \u003Cdiv class=\"absolute bottom-full left-1\u002F2 -translate-x-1\u002F2 border-4 border-transparent border-b-gray-900\">\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Tooltip left -->\n      \u003Cdiv class=\"relative group\">\n        \u003Cbutton class=\"w-10 h-10 bg-amber-100 text-amber-600 rounded-lg flex items-center justify-center\n                       hover:bg-amber-200 transition-colors text-lg\">\n          ⚠\n        \u003C\u002Fbutton>\n        \u003Cdiv class=\"absolute right-full top-1\u002F2 -translate-y-1\u002F2 mr-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg\n                    opacity-0 invisible group-hover:opacity-100 group-hover:visible\n                    transition-all duration-200 whitespace-nowrap\">\n          Cảnh báo\n          \u003Cdiv class=\"absolute left-full top-1\u002F2 -translate-y-1\u002F2 border-4 border-transparent border-l-gray-900\">\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Tooltip right -->\n      \u003Cdiv class=\"relative group\">\n        \u003Cbutton class=\"w-10 h-10 bg-rose-100 text-rose-600 rounded-lg flex items-center justify-center\n                       hover:bg-rose-200 transition-colors text-lg font-bold\">\n          !\n        \u003C\u002Fbutton>\n        \u003Cdiv class=\"absolute left-full top-1\u002F2 -translate-y-1\u002F2 ml-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg\n                    opacity-0 invisible group-hover:opacity-100 group-hover:visible\n                    transition-all duration-200 whitespace-nowrap\">\n          Lỗi hệ thống\n          \u003Cdiv class=\"absolute right-full top-1\u002F2 -translate-y-1\u002F2 border-4 border-transparent border-r-gray-900\">\u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,14842,14843,14851,14870,14898,14902,14921,14926,14945,14960,14969,14974,14982,14997,15002,15011,15016,15021,15044,15052,15060,15064,15069,15087,15102,15111,15116,15124,15139,15143,15151,15156,15179,15187,15195,15199,15204,15222,15237,15246,15251,15259,15274,15278,15286,15291,15314,15322,15330,15334,15339,15357,15372,15381,15386,15394,15409,15413,15421,15426,15449,15457,15465,15473,15481],{"__ignoreMap":467},[471,14844,14845,14847,14849],{"class":473,"line":474},[471,14846,485],{"class":484},[471,14848,1419],{"class":488},[471,14850,508],{"class":484},[471,14852,14853,14855,14857,14859,14861,14863,14866,14868],{"class":473,"line":481},[471,14854,744],{"class":484},[471,14856,725],{"class":488},[471,14858,493],{"class":492},[471,14860,496],{"class":484},[471,14862,499],{"class":484},[471,14864,14865],{"class":502},"max-w-md mx-auto p-8 pt-16",[471,14867,499],{"class":484},[471,14869,508],{"class":484},[471,14871,14872,14874,14876,14878,14880,14882,14885,14887,14889,14892,14894,14896],{"class":473,"line":511},[471,14873,1445],{"class":484},[471,14875,427],{"class":488},[471,14877,493],{"class":492},[471,14879,496],{"class":484},[471,14881,499],{"class":484},[471,14883,14884],{"class":502},"text-xl font-bold text-gray-900 mb-8",[471,14886,499],{"class":484},[471,14888,651],{"class":484},[471,14890,14891],{"class":514},"Tooltip trên hover",[471,14893,521],{"class":484},[471,14895,427],{"class":488},[471,14897,508],{"class":484},[471,14899,14900],{"class":473,"line":518},[471,14901,532],{"emptyLinePlaceholder":531},[471,14903,14904,14906,14908,14910,14912,14914,14917,14919],{"class":473,"line":528},[471,14905,1445],{"class":484},[471,14907,725],{"class":488},[471,14909,493],{"class":492},[471,14911,496],{"class":484},[471,14913,499],{"class":484},[471,14915,14916],{"class":502},"flex gap-8 justify-center",[471,14918,499],{"class":484},[471,14920,508],{"class":484},[471,14922,14923],{"class":473,"line":535},[471,14924,14925],{"class":477},"      \u003C!-- Tooltip top -->\n",[471,14927,14928,14930,14932,14934,14936,14938,14941,14943],{"class":473,"line":541},[471,14929,1502],{"class":484},[471,14931,725],{"class":488},[471,14933,493],{"class":492},[471,14935,496],{"class":484},[471,14937,499],{"class":484},[471,14939,14940],{"class":502},"relative group",[471,14942,499],{"class":484},[471,14944,508],{"class":484},[471,14946,14947,14949,14951,14953,14955,14957],{"class":473,"line":563},[471,14948,1584],{"class":484},[471,14950,489],{"class":488},[471,14952,493],{"class":492},[471,14954,496],{"class":484},[471,14956,499],{"class":484},[471,14958,14959],{"class":502},"w-10 h-10 bg-indigo-100 text-indigo-600 rounded-lg flex items-center justify-center\n",[471,14961,14962,14965,14967],{"class":473,"line":568},[471,14963,14964],{"class":502},"                       hover:bg-indigo-200 transition-colors text-lg font-bold",[471,14966,499],{"class":484},[471,14968,508],{"class":484},[471,14970,14971],{"class":473,"line":574},[471,14972,14973],{"class":514},"          ?\n",[471,14975,14976,14978,14980],{"class":473,"line":594},[471,14977,1714],{"class":484},[471,14979,489],{"class":488},[471,14981,508],{"class":484},[471,14983,14984,14986,14988,14990,14992,14994],{"class":473,"line":600},[471,14985,1584],{"class":484},[471,14987,725],{"class":488},[471,14989,493],{"class":492},[471,14991,496],{"class":484},[471,14993,499],{"class":484},[471,14995,14996],{"class":502},"absolute bottom-full left-1\u002F2 -translate-x-1\u002F2 mb-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg\n",[471,14998,14999],{"class":473,"line":609},[471,15000,15001],{"class":502},"                    opacity-0 invisible group-hover:opacity-100 group-hover:visible\n",[471,15003,15004,15007,15009],{"class":473,"line":614},[471,15005,15006],{"class":502},"                    transition-all duration-200 whitespace-nowrap",[471,15008,499],{"class":484},[471,15010,508],{"class":484},[471,15012,15013],{"class":473,"line":620},[471,15014,15015],{"class":514},"          Tooltip phía trên\n",[471,15017,15018],{"class":473,"line":663},[471,15019,15020],{"class":477},"          \u003C!-- Arrow -->\n",[471,15022,15023,15025,15027,15029,15031,15033,15036,15038,15040,15042],{"class":473,"line":668},[471,15024,1657],{"class":484},[471,15026,725],{"class":488},[471,15028,493],{"class":492},[471,15030,496],{"class":484},[471,15032,499],{"class":484},[471,15034,15035],{"class":502},"absolute top-full left-1\u002F2 -translate-x-1\u002F2 border-4 border-transparent border-t-gray-900",[471,15037,499],{"class":484},[471,15039,3475],{"class":484},[471,15041,725],{"class":488},[471,15043,508],{"class":484},[471,15045,15046,15048,15050],{"class":473,"line":674},[471,15047,1714],{"class":484},[471,15049,725],{"class":488},[471,15051,508],{"class":484},[471,15053,15054,15056,15058],{"class":473,"line":694},[471,15055,1723],{"class":484},[471,15057,725],{"class":488},[471,15059,508],{"class":484},[471,15061,15062],{"class":473,"line":700},[471,15063,532],{"emptyLinePlaceholder":531},[471,15065,15066],{"class":473,"line":709},[471,15067,15068],{"class":477},"      \u003C!-- Tooltip bottom -->\n",[471,15070,15071,15073,15075,15077,15079,15081,15083,15085],{"class":473,"line":714},[471,15072,1502],{"class":484},[471,15074,725],{"class":488},[471,15076,493],{"class":492},[471,15078,496],{"class":484},[471,15080,499],{"class":484},[471,15082,14940],{"class":502},[471,15084,499],{"class":484},[471,15086,508],{"class":484},[471,15088,15089,15091,15093,15095,15097,15099],{"class":473,"line":720},[471,15090,1584],{"class":484},[471,15092,489],{"class":488},[471,15094,493],{"class":492},[471,15096,496],{"class":484},[471,15098,499],{"class":484},[471,15100,15101],{"class":502},"w-10 h-10 bg-emerald-100 text-emerald-600 rounded-lg flex items-center justify-center\n",[471,15103,15104,15107,15109],{"class":473,"line":741},[471,15105,15106],{"class":502},"                       hover:bg-emerald-200 transition-colors text-lg",[471,15108,499],{"class":484},[471,15110,508],{"class":484},[471,15112,15113],{"class":473,"line":772},[471,15114,15115],{"class":514},"          ⓘ\n",[471,15117,15118,15120,15122],{"class":473,"line":816},[471,15119,1714],{"class":484},[471,15121,489],{"class":488},[471,15123,508],{"class":484},[471,15125,15126,15128,15130,15132,15134,15136],{"class":473,"line":1833},[471,15127,1584],{"class":484},[471,15129,725],{"class":488},[471,15131,493],{"class":492},[471,15133,496],{"class":484},[471,15135,499],{"class":484},[471,15137,15138],{"class":502},"absolute top-full left-1\u002F2 -translate-x-1\u002F2 mt-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg\n",[471,15140,15141],{"class":473,"line":1883},[471,15142,15001],{"class":502},[471,15144,15145,15147,15149],{"class":473,"line":1893},[471,15146,15006],{"class":502},[471,15148,499],{"class":484},[471,15150,508],{"class":484},[471,15152,15153],{"class":473,"line":1902},[471,15154,15155],{"class":514},"          Thông tin chi tiết\n",[471,15157,15158,15160,15162,15164,15166,15168,15171,15173,15175,15177],{"class":473,"line":1911},[471,15159,1657],{"class":484},[471,15161,725],{"class":488},[471,15163,493],{"class":492},[471,15165,496],{"class":484},[471,15167,499],{"class":484},[471,15169,15170],{"class":502},"absolute bottom-full left-1\u002F2 -translate-x-1\u002F2 border-4 border-transparent border-b-gray-900",[471,15172,499],{"class":484},[471,15174,3475],{"class":484},[471,15176,725],{"class":488},[471,15178,508],{"class":484},[471,15180,15181,15183,15185],{"class":473,"line":1921},[471,15182,1714],{"class":484},[471,15184,725],{"class":488},[471,15186,508],{"class":484},[471,15188,15189,15191,15193],{"class":473,"line":1926},[471,15190,1723],{"class":484},[471,15192,725],{"class":488},[471,15194,508],{"class":484},[471,15196,15197],{"class":473,"line":1932},[471,15198,532],{"emptyLinePlaceholder":531},[471,15200,15201],{"class":473,"line":1951},[471,15202,15203],{"class":477},"      \u003C!-- Tooltip left -->\n",[471,15205,15206,15208,15210,15212,15214,15216,15218,15220],{"class":473,"line":1979},[471,15207,1502],{"class":484},[471,15209,725],{"class":488},[471,15211,493],{"class":492},[471,15213,496],{"class":484},[471,15215,499],{"class":484},[471,15217,14940],{"class":502},[471,15219,499],{"class":484},[471,15221,508],{"class":484},[471,15223,15224,15226,15228,15230,15232,15234],{"class":473,"line":1984},[471,15225,1584],{"class":484},[471,15227,489],{"class":488},[471,15229,493],{"class":492},[471,15231,496],{"class":484},[471,15233,499],{"class":484},[471,15235,15236],{"class":502},"w-10 h-10 bg-amber-100 text-amber-600 rounded-lg flex items-center justify-center\n",[471,15238,15239,15242,15244],{"class":473,"line":2000},[471,15240,15241],{"class":502},"                       hover:bg-amber-200 transition-colors text-lg",[471,15243,499],{"class":484},[471,15245,508],{"class":484},[471,15247,15248],{"class":473,"line":2006},[471,15249,15250],{"class":514},"          ⚠\n",[471,15252,15253,15255,15257],{"class":473,"line":2012},[471,15254,1714],{"class":484},[471,15256,489],{"class":488},[471,15258,508],{"class":484},[471,15260,15261,15263,15265,15267,15269,15271],{"class":473,"line":2018},[471,15262,1584],{"class":484},[471,15264,725],{"class":488},[471,15266,493],{"class":492},[471,15268,496],{"class":484},[471,15270,499],{"class":484},[471,15272,15273],{"class":502},"absolute right-full top-1\u002F2 -translate-y-1\u002F2 mr-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg\n",[471,15275,15276],{"class":473,"line":2027},[471,15277,15001],{"class":502},[471,15279,15280,15282,15284],{"class":473,"line":2033},[471,15281,15006],{"class":502},[471,15283,499],{"class":484},[471,15285,508],{"class":484},[471,15287,15288],{"class":473,"line":2042},[471,15289,15290],{"class":514},"          Cảnh báo\n",[471,15292,15293,15295,15297,15299,15301,15303,15306,15308,15310,15312],{"class":473,"line":2051},[471,15294,1657],{"class":484},[471,15296,725],{"class":488},[471,15298,493],{"class":492},[471,15300,496],{"class":484},[471,15302,499],{"class":484},[471,15304,15305],{"class":502},"absolute left-full top-1\u002F2 -translate-y-1\u002F2 border-4 border-transparent border-l-gray-900",[471,15307,499],{"class":484},[471,15309,3475],{"class":484},[471,15311,725],{"class":488},[471,15313,508],{"class":484},[471,15315,15316,15318,15320],{"class":473,"line":2056},[471,15317,1714],{"class":484},[471,15319,725],{"class":488},[471,15321,508],{"class":484},[471,15323,15324,15326,15328],{"class":473,"line":2062},[471,15325,1723],{"class":484},[471,15327,725],{"class":488},[471,15329,508],{"class":484},[471,15331,15332],{"class":473,"line":2081},[471,15333,532],{"emptyLinePlaceholder":531},[471,15335,15336],{"class":473,"line":2109},[471,15337,15338],{"class":477},"      \u003C!-- Tooltip right -->\n",[471,15340,15341,15343,15345,15347,15349,15351,15353,15355],{"class":473,"line":2114},[471,15342,1502],{"class":484},[471,15344,725],{"class":488},[471,15346,493],{"class":492},[471,15348,496],{"class":484},[471,15350,499],{"class":484},[471,15352,14940],{"class":502},[471,15354,499],{"class":484},[471,15356,508],{"class":484},[471,15358,15359,15361,15363,15365,15367,15369],{"class":473,"line":2130},[471,15360,1584],{"class":484},[471,15362,489],{"class":488},[471,15364,493],{"class":492},[471,15366,496],{"class":484},[471,15368,499],{"class":484},[471,15370,15371],{"class":502},"w-10 h-10 bg-rose-100 text-rose-600 rounded-lg flex items-center justify-center\n",[471,15373,15374,15377,15379],{"class":473,"line":2136},[471,15375,15376],{"class":502},"                       hover:bg-rose-200 transition-colors text-lg font-bold",[471,15378,499],{"class":484},[471,15380,508],{"class":484},[471,15382,15383],{"class":473,"line":2142},[471,15384,15385],{"class":514},"          !\n",[471,15387,15388,15390,15392],{"class":473,"line":2148},[471,15389,1714],{"class":484},[471,15391,489],{"class":488},[471,15393,508],{"class":484},[471,15395,15396,15398,15400,15402,15404,15406],{"class":473,"line":2157},[471,15397,1584],{"class":484},[471,15399,725],{"class":488},[471,15401,493],{"class":492},[471,15403,496],{"class":484},[471,15405,499],{"class":484},[471,15407,15408],{"class":502},"absolute left-full top-1\u002F2 -translate-y-1\u002F2 ml-2 px-3 py-1.5 bg-gray-900 text-white text-xs rounded-lg\n",[471,15410,15411],{"class":473,"line":2163},[471,15412,15001],{"class":502},[471,15414,15415,15417,15419],{"class":473,"line":2172},[471,15416,15006],{"class":502},[471,15418,499],{"class":484},[471,15420,508],{"class":484},[471,15422,15423],{"class":473,"line":2181},[471,15424,15425],{"class":514},"          Lỗi hệ thống\n",[471,15427,15428,15430,15432,15434,15436,15438,15441,15443,15445,15447],{"class":473,"line":2186},[471,15429,1657],{"class":484},[471,15431,725],{"class":488},[471,15433,493],{"class":492},[471,15435,496],{"class":484},[471,15437,499],{"class":484},[471,15439,15440],{"class":502},"absolute right-full top-1\u002F2 -translate-y-1\u002F2 border-4 border-transparent border-r-gray-900",[471,15442,499],{"class":484},[471,15444,3475],{"class":484},[471,15446,725],{"class":488},[471,15448,508],{"class":484},[471,15450,15451,15453,15455],{"class":473,"line":2192},[471,15452,1714],{"class":484},[471,15454,725],{"class":488},[471,15456,508],{"class":484},[471,15458,15459,15461,15463],{"class":473,"line":2211},[471,15460,1723],{"class":484},[471,15462,725],{"class":488},[471,15464,508],{"class":484},[471,15466,15467,15469,15471],{"class":473,"line":2239},[471,15468,1914],{"class":484},[471,15470,725],{"class":488},[471,15472,508],{"class":484},[471,15474,15475,15477,15479],{"class":473,"line":2244},[471,15476,885],{"class":484},[471,15478,725],{"class":488},[471,15480,508],{"class":484},[471,15482,15483,15485,15487],{"class":473,"line":2260},[471,15484,521],{"class":484},[471,15486,1419],{"class":488},[471,15488,508],{"class":484},[5602,15490],{},[427,15492,15494,15495,435,15498,435,15501,435,15504,435,15507,435,15510,435,15513,435,15516,435,15519,451],{"id":15493},"_6-filters-blur-brightness-contrast-grayscale-hue-rotate-invert-saturate-sepia-drop-shadow","6. Filters (",[432,15496,15497],{},"blur-*",[432,15499,15500],{},"brightness-*",[432,15502,15503],{},"contrast-*",[432,15505,15506],{},"grayscale-*",[432,15508,15509],{},"hue-rotate-*",[432,15511,15512],{},"invert-*",[432,15514,15515],{},"saturate-*",[432,15517,15518],{},"sepia-*",[432,15520,15521],{},"drop-shadow-*",[453,15523,15524],{},"CSS filters cho phép áp dụng hiệu ứng đồ họa lên element — cực kỳ hữu ích cho hiệu ứng hover ảnh.",[462,15526,15528],{"className":464,"code":15527,"language":466,"meta":467,"style":467},"\u003C!-- Blur -->\n\u003Cdiv class=\"blur-sm\">Làm mờ nhẹ\u003C\u002Fdiv>\n\u003Cdiv class=\"blur\">Làm mờ vừa\u003C\u002Fdiv>\n\u003Cdiv class=\"blur-md\">Làm mờ trung bình\u003C\u002Fdiv>\n\u003Cdiv class=\"blur-lg\">Làm mờ nhiều\u003C\u002Fdiv>\n\u003Cdiv class=\"blur-xl\">Làm mờ rất nhiều\u003C\u002Fdiv>\n\u003Cdiv class=\"blur-2xl\">Làm mờ tối đa\u003C\u002Fdiv>\n\u003Cdiv class=\"blur-3xl\">Làm mờ cực đại\u003C\u002Fdiv>\n\n\u003C!-- Brightness -->\n\u003Cdiv class=\"brightness-50\">Tối 50%\u003C\u002Fdiv>\n\u003Cdiv class=\"brightness-75\">Tối 25%\u003C\u002Fdiv>\n\u003Cdiv class=\"brightness-100\">Bình thường\u003C\u002Fdiv>\n\u003Cdiv class=\"brightness-125\">Sáng 25%\u003C\u002Fdiv>\n\u003Cdiv class=\"brightness-150\">Sáng 50%\u003C\u002Fdiv>\n\u003Cdiv class=\"brightness-200\">Sáng gấp đôi\u003C\u002Fdiv>\n\n\u003C!-- Contrast -->\n\u003Cdiv class=\"contrast-50\">Tương phản thấp\u003C\u002Fdiv>\n\u003Cdiv class=\"contrast-100\">Bình thường\u003C\u002Fdiv>\n\u003Cdiv class=\"contrast-150\">Tương phản cao\u003C\u002Fdiv>\n\u003Cdiv class=\"contrast-200\">Tương phản rất cao\u003C\u002Fdiv>\n\n\u003C!-- Grayscale -->\n\u003Cdiv class=\"grayscale-0\">Không grayscale (default)\u003C\u002Fdiv>\n\u003Cdiv class=\"grayscale\">Grayscale 100%\u003C\u002Fdiv>\n\n\u003C!-- Các filter khác -->\n\u003Cdiv class=\"hue-rotate-60\">Xoay hue 60 deg\u003C\u002Fdiv>\n\u003Cdiv class=\"invert\">Đảo màu\u003C\u002Fdiv>\n\u003Cdiv class=\"saturate-50\">Giảm bão hòa\u003C\u002Fdiv>\n\u003Cdiv class=\"saturate-150\">Tăng bão hòa\u003C\u002Fdiv>\n\u003Cdiv class=\"sepia\">Hiệu ứng ảnh cũ\u003C\u002Fdiv>\n",[432,15529,15530,15535,15563,15591,15619,15647,15675,15703,15731,15735,15740,15768,15796,15824,15852,15880,15908,15912,15917,15945,15972,16000,16028,16032,16037,16065,16093,16097,16102,16130,16158,16186,16214],{"__ignoreMap":467},[471,15531,15532],{"class":473,"line":474},[471,15533,15534],{"class":477},"\u003C!-- Blur -->\n",[471,15536,15537,15539,15541,15543,15545,15547,15550,15552,15554,15557,15559,15561],{"class":473,"line":481},[471,15538,485],{"class":484},[471,15540,725],{"class":488},[471,15542,493],{"class":492},[471,15544,496],{"class":484},[471,15546,499],{"class":484},[471,15548,15549],{"class":502},"blur-sm",[471,15551,499],{"class":484},[471,15553,651],{"class":484},[471,15555,15556],{"class":514},"Làm mờ nhẹ",[471,15558,521],{"class":484},[471,15560,725],{"class":488},[471,15562,508],{"class":484},[471,15564,15565,15567,15569,15571,15573,15575,15578,15580,15582,15585,15587,15589],{"class":473,"line":511},[471,15566,485],{"class":484},[471,15568,725],{"class":488},[471,15570,493],{"class":492},[471,15572,496],{"class":484},[471,15574,499],{"class":484},[471,15576,15577],{"class":502},"blur",[471,15579,499],{"class":484},[471,15581,651],{"class":484},[471,15583,15584],{"class":514},"Làm mờ vừa",[471,15586,521],{"class":484},[471,15588,725],{"class":488},[471,15590,508],{"class":484},[471,15592,15593,15595,15597,15599,15601,15603,15606,15608,15610,15613,15615,15617],{"class":473,"line":518},[471,15594,485],{"class":484},[471,15596,725],{"class":488},[471,15598,493],{"class":492},[471,15600,496],{"class":484},[471,15602,499],{"class":484},[471,15604,15605],{"class":502},"blur-md",[471,15607,499],{"class":484},[471,15609,651],{"class":484},[471,15611,15612],{"class":514},"Làm mờ trung bình",[471,15614,521],{"class":484},[471,15616,725],{"class":488},[471,15618,508],{"class":484},[471,15620,15621,15623,15625,15627,15629,15631,15634,15636,15638,15641,15643,15645],{"class":473,"line":528},[471,15622,485],{"class":484},[471,15624,725],{"class":488},[471,15626,493],{"class":492},[471,15628,496],{"class":484},[471,15630,499],{"class":484},[471,15632,15633],{"class":502},"blur-lg",[471,15635,499],{"class":484},[471,15637,651],{"class":484},[471,15639,15640],{"class":514},"Làm mờ nhiều",[471,15642,521],{"class":484},[471,15644,725],{"class":488},[471,15646,508],{"class":484},[471,15648,15649,15651,15653,15655,15657,15659,15662,15664,15666,15669,15671,15673],{"class":473,"line":535},[471,15650,485],{"class":484},[471,15652,725],{"class":488},[471,15654,493],{"class":492},[471,15656,496],{"class":484},[471,15658,499],{"class":484},[471,15660,15661],{"class":502},"blur-xl",[471,15663,499],{"class":484},[471,15665,651],{"class":484},[471,15667,15668],{"class":514},"Làm mờ rất nhiều",[471,15670,521],{"class":484},[471,15672,725],{"class":488},[471,15674,508],{"class":484},[471,15676,15677,15679,15681,15683,15685,15687,15690,15692,15694,15697,15699,15701],{"class":473,"line":541},[471,15678,485],{"class":484},[471,15680,725],{"class":488},[471,15682,493],{"class":492},[471,15684,496],{"class":484},[471,15686,499],{"class":484},[471,15688,15689],{"class":502},"blur-2xl",[471,15691,499],{"class":484},[471,15693,651],{"class":484},[471,15695,15696],{"class":514},"Làm mờ tối đa",[471,15698,521],{"class":484},[471,15700,725],{"class":488},[471,15702,508],{"class":484},[471,15704,15705,15707,15709,15711,15713,15715,15718,15720,15722,15725,15727,15729],{"class":473,"line":563},[471,15706,485],{"class":484},[471,15708,725],{"class":488},[471,15710,493],{"class":492},[471,15712,496],{"class":484},[471,15714,499],{"class":484},[471,15716,15717],{"class":502},"blur-3xl",[471,15719,499],{"class":484},[471,15721,651],{"class":484},[471,15723,15724],{"class":514},"Làm mờ cực đại",[471,15726,521],{"class":484},[471,15728,725],{"class":488},[471,15730,508],{"class":484},[471,15732,15733],{"class":473,"line":568},[471,15734,532],{"emptyLinePlaceholder":531},[471,15736,15737],{"class":473,"line":574},[471,15738,15739],{"class":477},"\u003C!-- Brightness -->\n",[471,15741,15742,15744,15746,15748,15750,15752,15755,15757,15759,15762,15764,15766],{"class":473,"line":594},[471,15743,485],{"class":484},[471,15745,725],{"class":488},[471,15747,493],{"class":492},[471,15749,496],{"class":484},[471,15751,499],{"class":484},[471,15753,15754],{"class":502},"brightness-50",[471,15756,499],{"class":484},[471,15758,651],{"class":484},[471,15760,15761],{"class":514},"Tối 50%",[471,15763,521],{"class":484},[471,15765,725],{"class":488},[471,15767,508],{"class":484},[471,15769,15770,15772,15774,15776,15778,15780,15783,15785,15787,15790,15792,15794],{"class":473,"line":600},[471,15771,485],{"class":484},[471,15773,725],{"class":488},[471,15775,493],{"class":492},[471,15777,496],{"class":484},[471,15779,499],{"class":484},[471,15781,15782],{"class":502},"brightness-75",[471,15784,499],{"class":484},[471,15786,651],{"class":484},[471,15788,15789],{"class":514},"Tối 25%",[471,15791,521],{"class":484},[471,15793,725],{"class":488},[471,15795,508],{"class":484},[471,15797,15798,15800,15802,15804,15806,15808,15811,15813,15815,15818,15820,15822],{"class":473,"line":609},[471,15799,485],{"class":484},[471,15801,725],{"class":488},[471,15803,493],{"class":492},[471,15805,496],{"class":484},[471,15807,499],{"class":484},[471,15809,15810],{"class":502},"brightness-100",[471,15812,499],{"class":484},[471,15814,651],{"class":484},[471,15816,15817],{"class":514},"Bình thường",[471,15819,521],{"class":484},[471,15821,725],{"class":488},[471,15823,508],{"class":484},[471,15825,15826,15828,15830,15832,15834,15836,15839,15841,15843,15846,15848,15850],{"class":473,"line":614},[471,15827,485],{"class":484},[471,15829,725],{"class":488},[471,15831,493],{"class":492},[471,15833,496],{"class":484},[471,15835,499],{"class":484},[471,15837,15838],{"class":502},"brightness-125",[471,15840,499],{"class":484},[471,15842,651],{"class":484},[471,15844,15845],{"class":514},"Sáng 25%",[471,15847,521],{"class":484},[471,15849,725],{"class":488},[471,15851,508],{"class":484},[471,15853,15854,15856,15858,15860,15862,15864,15867,15869,15871,15874,15876,15878],{"class":473,"line":620},[471,15855,485],{"class":484},[471,15857,725],{"class":488},[471,15859,493],{"class":492},[471,15861,496],{"class":484},[471,15863,499],{"class":484},[471,15865,15866],{"class":502},"brightness-150",[471,15868,499],{"class":484},[471,15870,651],{"class":484},[471,15872,15873],{"class":514},"Sáng 50%",[471,15875,521],{"class":484},[471,15877,725],{"class":488},[471,15879,508],{"class":484},[471,15881,15882,15884,15886,15888,15890,15892,15895,15897,15899,15902,15904,15906],{"class":473,"line":663},[471,15883,485],{"class":484},[471,15885,725],{"class":488},[471,15887,493],{"class":492},[471,15889,496],{"class":484},[471,15891,499],{"class":484},[471,15893,15894],{"class":502},"brightness-200",[471,15896,499],{"class":484},[471,15898,651],{"class":484},[471,15900,15901],{"class":514},"Sáng gấp đôi",[471,15903,521],{"class":484},[471,15905,725],{"class":488},[471,15907,508],{"class":484},[471,15909,15910],{"class":473,"line":668},[471,15911,532],{"emptyLinePlaceholder":531},[471,15913,15914],{"class":473,"line":674},[471,15915,15916],{"class":477},"\u003C!-- Contrast -->\n",[471,15918,15919,15921,15923,15925,15927,15929,15932,15934,15936,15939,15941,15943],{"class":473,"line":694},[471,15920,485],{"class":484},[471,15922,725],{"class":488},[471,15924,493],{"class":492},[471,15926,496],{"class":484},[471,15928,499],{"class":484},[471,15930,15931],{"class":502},"contrast-50",[471,15933,499],{"class":484},[471,15935,651],{"class":484},[471,15937,15938],{"class":514},"Tương phản thấp",[471,15940,521],{"class":484},[471,15942,725],{"class":488},[471,15944,508],{"class":484},[471,15946,15947,15949,15951,15953,15955,15957,15960,15962,15964,15966,15968,15970],{"class":473,"line":700},[471,15948,485],{"class":484},[471,15950,725],{"class":488},[471,15952,493],{"class":492},[471,15954,496],{"class":484},[471,15956,499],{"class":484},[471,15958,15959],{"class":502},"contrast-100",[471,15961,499],{"class":484},[471,15963,651],{"class":484},[471,15965,15817],{"class":514},[471,15967,521],{"class":484},[471,15969,725],{"class":488},[471,15971,508],{"class":484},[471,15973,15974,15976,15978,15980,15982,15984,15987,15989,15991,15994,15996,15998],{"class":473,"line":709},[471,15975,485],{"class":484},[471,15977,725],{"class":488},[471,15979,493],{"class":492},[471,15981,496],{"class":484},[471,15983,499],{"class":484},[471,15985,15986],{"class":502},"contrast-150",[471,15988,499],{"class":484},[471,15990,651],{"class":484},[471,15992,15993],{"class":514},"Tương phản cao",[471,15995,521],{"class":484},[471,15997,725],{"class":488},[471,15999,508],{"class":484},[471,16001,16002,16004,16006,16008,16010,16012,16015,16017,16019,16022,16024,16026],{"class":473,"line":714},[471,16003,485],{"class":484},[471,16005,725],{"class":488},[471,16007,493],{"class":492},[471,16009,496],{"class":484},[471,16011,499],{"class":484},[471,16013,16014],{"class":502},"contrast-200",[471,16016,499],{"class":484},[471,16018,651],{"class":484},[471,16020,16021],{"class":514},"Tương phản rất cao",[471,16023,521],{"class":484},[471,16025,725],{"class":488},[471,16027,508],{"class":484},[471,16029,16030],{"class":473,"line":720},[471,16031,532],{"emptyLinePlaceholder":531},[471,16033,16034],{"class":473,"line":741},[471,16035,16036],{"class":477},"\u003C!-- Grayscale -->\n",[471,16038,16039,16041,16043,16045,16047,16049,16052,16054,16056,16059,16061,16063],{"class":473,"line":772},[471,16040,485],{"class":484},[471,16042,725],{"class":488},[471,16044,493],{"class":492},[471,16046,496],{"class":484},[471,16048,499],{"class":484},[471,16050,16051],{"class":502},"grayscale-0",[471,16053,499],{"class":484},[471,16055,651],{"class":484},[471,16057,16058],{"class":514},"Không grayscale (default)",[471,16060,521],{"class":484},[471,16062,725],{"class":488},[471,16064,508],{"class":484},[471,16066,16067,16069,16071,16073,16075,16077,16080,16082,16084,16087,16089,16091],{"class":473,"line":816},[471,16068,485],{"class":484},[471,16070,725],{"class":488},[471,16072,493],{"class":492},[471,16074,496],{"class":484},[471,16076,499],{"class":484},[471,16078,16079],{"class":502},"grayscale",[471,16081,499],{"class":484},[471,16083,651],{"class":484},[471,16085,16086],{"class":514},"Grayscale 100%",[471,16088,521],{"class":484},[471,16090,725],{"class":488},[471,16092,508],{"class":484},[471,16094,16095],{"class":473,"line":1833},[471,16096,532],{"emptyLinePlaceholder":531},[471,16098,16099],{"class":473,"line":1883},[471,16100,16101],{"class":477},"\u003C!-- Các filter khác -->\n",[471,16103,16104,16106,16108,16110,16112,16114,16117,16119,16121,16124,16126,16128],{"class":473,"line":1893},[471,16105,485],{"class":484},[471,16107,725],{"class":488},[471,16109,493],{"class":492},[471,16111,496],{"class":484},[471,16113,499],{"class":484},[471,16115,16116],{"class":502},"hue-rotate-60",[471,16118,499],{"class":484},[471,16120,651],{"class":484},[471,16122,16123],{"class":514},"Xoay hue 60 deg",[471,16125,521],{"class":484},[471,16127,725],{"class":488},[471,16129,508],{"class":484},[471,16131,16132,16134,16136,16138,16140,16142,16145,16147,16149,16152,16154,16156],{"class":473,"line":1902},[471,16133,485],{"class":484},[471,16135,725],{"class":488},[471,16137,493],{"class":492},[471,16139,496],{"class":484},[471,16141,499],{"class":484},[471,16143,16144],{"class":502},"invert",[471,16146,499],{"class":484},[471,16148,651],{"class":484},[471,16150,16151],{"class":514},"Đảo màu",[471,16153,521],{"class":484},[471,16155,725],{"class":488},[471,16157,508],{"class":484},[471,16159,16160,16162,16164,16166,16168,16170,16173,16175,16177,16180,16182,16184],{"class":473,"line":1911},[471,16161,485],{"class":484},[471,16163,725],{"class":488},[471,16165,493],{"class":492},[471,16167,496],{"class":484},[471,16169,499],{"class":484},[471,16171,16172],{"class":502},"saturate-50",[471,16174,499],{"class":484},[471,16176,651],{"class":484},[471,16178,16179],{"class":514},"Giảm bão hòa",[471,16181,521],{"class":484},[471,16183,725],{"class":488},[471,16185,508],{"class":484},[471,16187,16188,16190,16192,16194,16196,16198,16201,16203,16205,16208,16210,16212],{"class":473,"line":1921},[471,16189,485],{"class":484},[471,16191,725],{"class":488},[471,16193,493],{"class":492},[471,16195,496],{"class":484},[471,16197,499],{"class":484},[471,16199,16200],{"class":502},"saturate-150",[471,16202,499],{"class":484},[471,16204,651],{"class":484},[471,16206,16207],{"class":514},"Tăng bão hòa",[471,16209,521],{"class":484},[471,16211,725],{"class":488},[471,16213,508],{"class":484},[471,16215,16216,16218,16220,16222,16224,16226,16229,16231,16233,16236,16238,16240],{"class":473,"line":1926},[471,16217,485],{"class":484},[471,16219,725],{"class":488},[471,16221,493],{"class":492},[471,16223,496],{"class":484},[471,16225,499],{"class":484},[471,16227,16228],{"class":502},"sepia",[471,16230,499],{"class":484},[471,16232,651],{"class":484},[471,16234,16235],{"class":514},"Hiệu ứng ảnh cũ",[471,16237,521],{"class":484},[471,16239,725],{"class":488},[471,16241,508],{"class":484},[824,16243,16245],{"id":16244},"backdrop-filters","Backdrop Filters",[453,16247,16248,16249,16252],{},"Backdrop filters áp dụng hiệu ứng lên ",[457,16250,16251],{},"vùng phía sau"," element — thường dùng cho glassmorphism.",[462,16254,16256],{"className":464,"code":16255,"language":466,"meta":467,"style":467},"\u003C!-- Backdrop blur (glass effect) -->\n\u003Cdiv class=\"backdrop-blur-sm bg-white\u002F30\">Glass nhẹ\u003C\u002Fdiv>\n\u003Cdiv class=\"backdrop-blur-md bg-white\u002F40\">Glass vừa\u003C\u002Fdiv>\n\u003Cdiv class=\"backdrop-blur-lg bg-white\u002F50\">Glass mạnh\u003C\u002Fdiv>\n\u003Cdiv class=\"backdrop-blur-xl bg-white\u002F60\">Glass rất mạnh\u003C\u002Fdiv>\n\n\u003C!-- Kết hợp backdrop filters -->\n\u003Cdiv class=\"backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-white\u002F30\">\n  Glassmorphism đầy đủ\n\u003C\u002Fdiv>\n",[432,16257,16258,16263,16291,16319,16347,16375,16379,16384,16403,16408],{"__ignoreMap":467},[471,16259,16260],{"class":473,"line":474},[471,16261,16262],{"class":477},"\u003C!-- Backdrop blur (glass effect) -->\n",[471,16264,16265,16267,16269,16271,16273,16275,16278,16280,16282,16285,16287,16289],{"class":473,"line":481},[471,16266,485],{"class":484},[471,16268,725],{"class":488},[471,16270,493],{"class":492},[471,16272,496],{"class":484},[471,16274,499],{"class":484},[471,16276,16277],{"class":502},"backdrop-blur-sm bg-white\u002F30",[471,16279,499],{"class":484},[471,16281,651],{"class":484},[471,16283,16284],{"class":514},"Glass nhẹ",[471,16286,521],{"class":484},[471,16288,725],{"class":488},[471,16290,508],{"class":484},[471,16292,16293,16295,16297,16299,16301,16303,16306,16308,16310,16313,16315,16317],{"class":473,"line":511},[471,16294,485],{"class":484},[471,16296,725],{"class":488},[471,16298,493],{"class":492},[471,16300,496],{"class":484},[471,16302,499],{"class":484},[471,16304,16305],{"class":502},"backdrop-blur-md bg-white\u002F40",[471,16307,499],{"class":484},[471,16309,651],{"class":484},[471,16311,16312],{"class":514},"Glass vừa",[471,16314,521],{"class":484},[471,16316,725],{"class":488},[471,16318,508],{"class":484},[471,16320,16321,16323,16325,16327,16329,16331,16334,16336,16338,16341,16343,16345],{"class":473,"line":518},[471,16322,485],{"class":484},[471,16324,725],{"class":488},[471,16326,493],{"class":492},[471,16328,496],{"class":484},[471,16330,499],{"class":484},[471,16332,16333],{"class":502},"backdrop-blur-lg bg-white\u002F50",[471,16335,499],{"class":484},[471,16337,651],{"class":484},[471,16339,16340],{"class":514},"Glass mạnh",[471,16342,521],{"class":484},[471,16344,725],{"class":488},[471,16346,508],{"class":484},[471,16348,16349,16351,16353,16355,16357,16359,16362,16364,16366,16369,16371,16373],{"class":473,"line":528},[471,16350,485],{"class":484},[471,16352,725],{"class":488},[471,16354,493],{"class":492},[471,16356,496],{"class":484},[471,16358,499],{"class":484},[471,16360,16361],{"class":502},"backdrop-blur-xl bg-white\u002F60",[471,16363,499],{"class":484},[471,16365,651],{"class":484},[471,16367,16368],{"class":514},"Glass rất mạnh",[471,16370,521],{"class":484},[471,16372,725],{"class":488},[471,16374,508],{"class":484},[471,16376,16377],{"class":473,"line":535},[471,16378,532],{"emptyLinePlaceholder":531},[471,16380,16381],{"class":473,"line":541},[471,16382,16383],{"class":477},"\u003C!-- Kết hợp backdrop filters -->\n",[471,16385,16386,16388,16390,16392,16394,16396,16399,16401],{"class":473,"line":563},[471,16387,485],{"class":484},[471,16389,725],{"class":488},[471,16391,493],{"class":492},[471,16393,496],{"class":484},[471,16395,499],{"class":484},[471,16397,16398],{"class":502},"backdrop-blur-md backdrop-brightness-110 backdrop-saturate-150 bg-white\u002F30",[471,16400,499],{"class":484},[471,16402,508],{"class":484},[471,16404,16405],{"class":473,"line":568},[471,16406,16407],{"class":514},"  Glassmorphism đầy đủ\n",[471,16409,16410,16412,16414],{"class":473,"line":574},[471,16411,521],{"class":484},[471,16413,725],{"class":488},[471,16415,508],{"class":484},[824,16417,16419],{"id":16418},"bài-tập-15-image-hover-effects-grayscale-color-blur-overlay","Bài tập 15: Image hover effects (grayscale -> color, blur overlay)",[453,16421,16422,16424],{},[457,16423,1404],{}," Grid ảnh với các hiệu ứng filter khác nhau khi hover.",[462,16426,16428],{"className":1408,"code":16427,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-5xl mx-auto p-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-8\">Image Filter Effects on Hover\u003C\u002Fh2>\n\n    \u003Cdiv class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\">\n      \u003C!-- Effect 1: Grayscale -> Color -->\n      \u003Cdiv class=\"overflow-hidden rounded-xl\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1542291026-7eec264c27ff\"\n          alt=\"\"\n          class=\"w-full aspect-square object-cover grayscale hover:grayscale-0 transition-all duration-500\"\n        \u002F>\n        \u003Cp class=\"mt-2 text-sm text-center text-gray-500\">Grayscale → Color\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Effect 2: Blur -> Sharp -->\n      \u003Cdiv class=\"overflow-hidden rounded-xl\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1560769629-975ec94e6a86\"\n          alt=\"\"\n          class=\"w-full aspect-square object-cover blur-sm hover:blur-0 transition-all duration-500\"\n        \u002F>\n        \u003Cp class=\"mt-2 text-sm text-center text-gray-500\">Blur → Sharp\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Effect 3: Brightness -->\n      \u003Cdiv class=\"overflow-hidden rounded-xl\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1572635196237-14b3f281503f\"\n          alt=\"\"\n          class=\"w-full aspect-square object-cover brightness-75 hover:brightness-110 transition-all duration-500\"\n        \u002F>\n        \u003Cp class=\"mt-2 text-sm text-center text-gray-500\">Dark → Bright\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Effect 4: Saturate -->\n      \u003Cdiv class=\"overflow-hidden rounded-xl\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1585386959984-a4155224a1ad\"\n          alt=\"\"\n          class=\"w-full aspect-square object-cover saturate-0 hover:saturate-150 transition-all duration-500\"\n        \u002F>\n        \u003Cp class=\"mt-2 text-sm text-center text-gray-500\">B&W → Saturated\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Effect 5: Sepia -->\n      \u003Cdiv class=\"overflow-hidden rounded-xl\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1491553895911-0055eca6402d\"\n          alt=\"\"\n          class=\"w-full aspect-square object-cover sepia-0 hover:sepia transition-all duration-500\"\n        \u002F>\n        \u003Cp class=\"mt-2 text-sm text-center text-gray-500\">Normal → Sepia\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Effect 6: Hue rotate -->\n      \u003Cdiv class=\"overflow-hidden rounded-xl\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1526170375885-4d8ecf77b99f\"\n          alt=\"\"\n          class=\"w-full aspect-square object-cover hover:hue-rotate-180 transition-all duration-700\"\n        \u002F>\n        \u003Cp class=\"mt-2 text-sm text-center text-gray-500\">Hue Rotate 180 deg\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,16429,16430,16438,16456,16483,16487,16506,16511,16530,16536,16549,16557,16570,16574,16602,16610,16614,16619,16637,16643,16656,16664,16677,16681,16708,16716,16720,16725,16743,16749,16762,16770,16783,16787,16814,16822,16826,16831,16849,16855,16868,16876,16889,16893,16920,16928,16932,16937,16955,16961,16974,16982,16995,16999,17026,17034,17038,17043,17061,17067,17080,17088,17101,17105,17132,17140,17148,17156],{"__ignoreMap":467},[471,16431,16432,16434,16436],{"class":473,"line":474},[471,16433,485],{"class":484},[471,16435,1419],{"class":488},[471,16437,508],{"class":484},[471,16439,16440,16442,16444,16446,16448,16450,16452,16454],{"class":473,"line":481},[471,16441,744],{"class":484},[471,16443,725],{"class":488},[471,16445,493],{"class":492},[471,16447,496],{"class":484},[471,16449,499],{"class":484},[471,16451,9778],{"class":502},[471,16453,499],{"class":484},[471,16455,508],{"class":484},[471,16457,16458,16460,16462,16464,16466,16468,16470,16472,16474,16477,16479,16481],{"class":473,"line":511},[471,16459,1445],{"class":484},[471,16461,427],{"class":488},[471,16463,493],{"class":492},[471,16465,496],{"class":484},[471,16467,499],{"class":484},[471,16469,2964],{"class":502},[471,16471,499],{"class":484},[471,16473,651],{"class":484},[471,16475,16476],{"class":514},"Image Filter Effects on Hover",[471,16478,521],{"class":484},[471,16480,427],{"class":488},[471,16482,508],{"class":484},[471,16484,16485],{"class":473,"line":518},[471,16486,532],{"emptyLinePlaceholder":531},[471,16488,16489,16491,16493,16495,16497,16499,16502,16504],{"class":473,"line":528},[471,16490,1445],{"class":484},[471,16492,725],{"class":488},[471,16494,493],{"class":492},[471,16496,496],{"class":484},[471,16498,499],{"class":484},[471,16500,16501],{"class":502},"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6",[471,16503,499],{"class":484},[471,16505,508],{"class":484},[471,16507,16508],{"class":473,"line":535},[471,16509,16510],{"class":477},"      \u003C!-- Effect 1: Grayscale -> Color -->\n",[471,16512,16513,16515,16517,16519,16521,16523,16526,16528],{"class":473,"line":541},[471,16514,1502],{"class":484},[471,16516,725],{"class":488},[471,16518,493],{"class":492},[471,16520,496],{"class":484},[471,16522,499],{"class":484},[471,16524,16525],{"class":502},"overflow-hidden rounded-xl",[471,16527,499],{"class":484},[471,16529,508],{"class":484},[471,16531,16532,16534],{"class":473,"line":563},[471,16533,1584],{"class":484},[471,16535,2421],{"class":488},[471,16537,16538,16540,16542,16544,16547],{"class":473,"line":568},[471,16539,2426],{"class":492},[471,16541,496],{"class":484},[471,16543,499],{"class":484},[471,16545,16546],{"class":502},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1542291026-7eec264c27ff",[471,16548,2436],{"class":484},[471,16550,16551,16553,16555],{"class":473,"line":574},[471,16552,2441],{"class":492},[471,16554,496],{"class":484},[471,16556,9884],{"class":484},[471,16558,16559,16561,16563,16565,16568],{"class":473,"line":594},[471,16560,2455],{"class":492},[471,16562,496],{"class":484},[471,16564,499],{"class":484},[471,16566,16567],{"class":502},"w-full aspect-square object-cover grayscale hover:grayscale-0 transition-all duration-500",[471,16569,2436],{"class":484},[471,16571,16572],{"class":473,"line":600},[471,16573,2469],{"class":484},[471,16575,16576,16578,16580,16582,16584,16586,16589,16591,16593,16596,16598,16600],{"class":473,"line":609},[471,16577,1584],{"class":484},[471,16579,453],{"class":488},[471,16581,493],{"class":492},[471,16583,496],{"class":484},[471,16585,499],{"class":484},[471,16587,16588],{"class":502},"mt-2 text-sm text-center text-gray-500",[471,16590,499],{"class":484},[471,16592,651],{"class":484},[471,16594,16595],{"class":514},"Grayscale → Color",[471,16597,521],{"class":484},[471,16599,453],{"class":488},[471,16601,508],{"class":484},[471,16603,16604,16606,16608],{"class":473,"line":614},[471,16605,1723],{"class":484},[471,16607,725],{"class":488},[471,16609,508],{"class":484},[471,16611,16612],{"class":473,"line":620},[471,16613,532],{"emptyLinePlaceholder":531},[471,16615,16616],{"class":473,"line":663},[471,16617,16618],{"class":477},"      \u003C!-- Effect 2: Blur -> Sharp -->\n",[471,16620,16621,16623,16625,16627,16629,16631,16633,16635],{"class":473,"line":668},[471,16622,1502],{"class":484},[471,16624,725],{"class":488},[471,16626,493],{"class":492},[471,16628,496],{"class":484},[471,16630,499],{"class":484},[471,16632,16525],{"class":502},[471,16634,499],{"class":484},[471,16636,508],{"class":484},[471,16638,16639,16641],{"class":473,"line":674},[471,16640,1584],{"class":484},[471,16642,2421],{"class":488},[471,16644,16645,16647,16649,16651,16654],{"class":473,"line":694},[471,16646,2426],{"class":492},[471,16648,496],{"class":484},[471,16650,499],{"class":484},[471,16652,16653],{"class":502},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1560769629-975ec94e6a86",[471,16655,2436],{"class":484},[471,16657,16658,16660,16662],{"class":473,"line":700},[471,16659,2441],{"class":492},[471,16661,496],{"class":484},[471,16663,9884],{"class":484},[471,16665,16666,16668,16670,16672,16675],{"class":473,"line":709},[471,16667,2455],{"class":492},[471,16669,496],{"class":484},[471,16671,499],{"class":484},[471,16673,16674],{"class":502},"w-full aspect-square object-cover blur-sm hover:blur-0 transition-all duration-500",[471,16676,2436],{"class":484},[471,16678,16679],{"class":473,"line":714},[471,16680,2469],{"class":484},[471,16682,16683,16685,16687,16689,16691,16693,16695,16697,16699,16702,16704,16706],{"class":473,"line":720},[471,16684,1584],{"class":484},[471,16686,453],{"class":488},[471,16688,493],{"class":492},[471,16690,496],{"class":484},[471,16692,499],{"class":484},[471,16694,16588],{"class":502},[471,16696,499],{"class":484},[471,16698,651],{"class":484},[471,16700,16701],{"class":514},"Blur → Sharp",[471,16703,521],{"class":484},[471,16705,453],{"class":488},[471,16707,508],{"class":484},[471,16709,16710,16712,16714],{"class":473,"line":741},[471,16711,1723],{"class":484},[471,16713,725],{"class":488},[471,16715,508],{"class":484},[471,16717,16718],{"class":473,"line":772},[471,16719,532],{"emptyLinePlaceholder":531},[471,16721,16722],{"class":473,"line":816},[471,16723,16724],{"class":477},"      \u003C!-- Effect 3: Brightness -->\n",[471,16726,16727,16729,16731,16733,16735,16737,16739,16741],{"class":473,"line":1833},[471,16728,1502],{"class":484},[471,16730,725],{"class":488},[471,16732,493],{"class":492},[471,16734,496],{"class":484},[471,16736,499],{"class":484},[471,16738,16525],{"class":502},[471,16740,499],{"class":484},[471,16742,508],{"class":484},[471,16744,16745,16747],{"class":473,"line":1883},[471,16746,1584],{"class":484},[471,16748,2421],{"class":488},[471,16750,16751,16753,16755,16757,16760],{"class":473,"line":1893},[471,16752,2426],{"class":492},[471,16754,496],{"class":484},[471,16756,499],{"class":484},[471,16758,16759],{"class":502},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1572635196237-14b3f281503f",[471,16761,2436],{"class":484},[471,16763,16764,16766,16768],{"class":473,"line":1902},[471,16765,2441],{"class":492},[471,16767,496],{"class":484},[471,16769,9884],{"class":484},[471,16771,16772,16774,16776,16778,16781],{"class":473,"line":1911},[471,16773,2455],{"class":492},[471,16775,496],{"class":484},[471,16777,499],{"class":484},[471,16779,16780],{"class":502},"w-full aspect-square object-cover brightness-75 hover:brightness-110 transition-all duration-500",[471,16782,2436],{"class":484},[471,16784,16785],{"class":473,"line":1921},[471,16786,2469],{"class":484},[471,16788,16789,16791,16793,16795,16797,16799,16801,16803,16805,16808,16810,16812],{"class":473,"line":1926},[471,16790,1584],{"class":484},[471,16792,453],{"class":488},[471,16794,493],{"class":492},[471,16796,496],{"class":484},[471,16798,499],{"class":484},[471,16800,16588],{"class":502},[471,16802,499],{"class":484},[471,16804,651],{"class":484},[471,16806,16807],{"class":514},"Dark → Bright",[471,16809,521],{"class":484},[471,16811,453],{"class":488},[471,16813,508],{"class":484},[471,16815,16816,16818,16820],{"class":473,"line":1932},[471,16817,1723],{"class":484},[471,16819,725],{"class":488},[471,16821,508],{"class":484},[471,16823,16824],{"class":473,"line":1951},[471,16825,532],{"emptyLinePlaceholder":531},[471,16827,16828],{"class":473,"line":1979},[471,16829,16830],{"class":477},"      \u003C!-- Effect 4: Saturate -->\n",[471,16832,16833,16835,16837,16839,16841,16843,16845,16847],{"class":473,"line":1984},[471,16834,1502],{"class":484},[471,16836,725],{"class":488},[471,16838,493],{"class":492},[471,16840,496],{"class":484},[471,16842,499],{"class":484},[471,16844,16525],{"class":502},[471,16846,499],{"class":484},[471,16848,508],{"class":484},[471,16850,16851,16853],{"class":473,"line":2000},[471,16852,1584],{"class":484},[471,16854,2421],{"class":488},[471,16856,16857,16859,16861,16863,16866],{"class":473,"line":2006},[471,16858,2426],{"class":492},[471,16860,496],{"class":484},[471,16862,499],{"class":484},[471,16864,16865],{"class":502},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1585386959984-a4155224a1ad",[471,16867,2436],{"class":484},[471,16869,16870,16872,16874],{"class":473,"line":2012},[471,16871,2441],{"class":492},[471,16873,496],{"class":484},[471,16875,9884],{"class":484},[471,16877,16878,16880,16882,16884,16887],{"class":473,"line":2018},[471,16879,2455],{"class":492},[471,16881,496],{"class":484},[471,16883,499],{"class":484},[471,16885,16886],{"class":502},"w-full aspect-square object-cover saturate-0 hover:saturate-150 transition-all duration-500",[471,16888,2436],{"class":484},[471,16890,16891],{"class":473,"line":2027},[471,16892,2469],{"class":484},[471,16894,16895,16897,16899,16901,16903,16905,16907,16909,16911,16914,16916,16918],{"class":473,"line":2033},[471,16896,1584],{"class":484},[471,16898,453],{"class":488},[471,16900,493],{"class":492},[471,16902,496],{"class":484},[471,16904,499],{"class":484},[471,16906,16588],{"class":502},[471,16908,499],{"class":484},[471,16910,651],{"class":484},[471,16912,16913],{"class":514},"B&W → Saturated",[471,16915,521],{"class":484},[471,16917,453],{"class":488},[471,16919,508],{"class":484},[471,16921,16922,16924,16926],{"class":473,"line":2042},[471,16923,1723],{"class":484},[471,16925,725],{"class":488},[471,16927,508],{"class":484},[471,16929,16930],{"class":473,"line":2051},[471,16931,532],{"emptyLinePlaceholder":531},[471,16933,16934],{"class":473,"line":2056},[471,16935,16936],{"class":477},"      \u003C!-- Effect 5: Sepia -->\n",[471,16938,16939,16941,16943,16945,16947,16949,16951,16953],{"class":473,"line":2062},[471,16940,1502],{"class":484},[471,16942,725],{"class":488},[471,16944,493],{"class":492},[471,16946,496],{"class":484},[471,16948,499],{"class":484},[471,16950,16525],{"class":502},[471,16952,499],{"class":484},[471,16954,508],{"class":484},[471,16956,16957,16959],{"class":473,"line":2081},[471,16958,1584],{"class":484},[471,16960,2421],{"class":488},[471,16962,16963,16965,16967,16969,16972],{"class":473,"line":2109},[471,16964,2426],{"class":492},[471,16966,496],{"class":484},[471,16968,499],{"class":484},[471,16970,16971],{"class":502},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1491553895911-0055eca6402d",[471,16973,2436],{"class":484},[471,16975,16976,16978,16980],{"class":473,"line":2114},[471,16977,2441],{"class":492},[471,16979,496],{"class":484},[471,16981,9884],{"class":484},[471,16983,16984,16986,16988,16990,16993],{"class":473,"line":2130},[471,16985,2455],{"class":492},[471,16987,496],{"class":484},[471,16989,499],{"class":484},[471,16991,16992],{"class":502},"w-full aspect-square object-cover sepia-0 hover:sepia transition-all duration-500",[471,16994,2436],{"class":484},[471,16996,16997],{"class":473,"line":2136},[471,16998,2469],{"class":484},[471,17000,17001,17003,17005,17007,17009,17011,17013,17015,17017,17020,17022,17024],{"class":473,"line":2142},[471,17002,1584],{"class":484},[471,17004,453],{"class":488},[471,17006,493],{"class":492},[471,17008,496],{"class":484},[471,17010,499],{"class":484},[471,17012,16588],{"class":502},[471,17014,499],{"class":484},[471,17016,651],{"class":484},[471,17018,17019],{"class":514},"Normal → Sepia",[471,17021,521],{"class":484},[471,17023,453],{"class":488},[471,17025,508],{"class":484},[471,17027,17028,17030,17032],{"class":473,"line":2148},[471,17029,1723],{"class":484},[471,17031,725],{"class":488},[471,17033,508],{"class":484},[471,17035,17036],{"class":473,"line":2157},[471,17037,532],{"emptyLinePlaceholder":531},[471,17039,17040],{"class":473,"line":2163},[471,17041,17042],{"class":477},"      \u003C!-- Effect 6: Hue rotate -->\n",[471,17044,17045,17047,17049,17051,17053,17055,17057,17059],{"class":473,"line":2172},[471,17046,1502],{"class":484},[471,17048,725],{"class":488},[471,17050,493],{"class":492},[471,17052,496],{"class":484},[471,17054,499],{"class":484},[471,17056,16525],{"class":502},[471,17058,499],{"class":484},[471,17060,508],{"class":484},[471,17062,17063,17065],{"class":473,"line":2181},[471,17064,1584],{"class":484},[471,17066,2421],{"class":488},[471,17068,17069,17071,17073,17075,17078],{"class":473,"line":2186},[471,17070,2426],{"class":492},[471,17072,496],{"class":484},[471,17074,499],{"class":484},[471,17076,17077],{"class":502},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1526170375885-4d8ecf77b99f",[471,17079,2436],{"class":484},[471,17081,17082,17084,17086],{"class":473,"line":2192},[471,17083,2441],{"class":492},[471,17085,496],{"class":484},[471,17087,9884],{"class":484},[471,17089,17090,17092,17094,17096,17099],{"class":473,"line":2211},[471,17091,2455],{"class":492},[471,17093,496],{"class":484},[471,17095,499],{"class":484},[471,17097,17098],{"class":502},"w-full aspect-square object-cover hover:hue-rotate-180 transition-all duration-700",[471,17100,2436],{"class":484},[471,17102,17103],{"class":473,"line":2239},[471,17104,2469],{"class":484},[471,17106,17107,17109,17111,17113,17115,17117,17119,17121,17123,17126,17128,17130],{"class":473,"line":2244},[471,17108,1584],{"class":484},[471,17110,453],{"class":488},[471,17112,493],{"class":492},[471,17114,496],{"class":484},[471,17116,499],{"class":484},[471,17118,16588],{"class":502},[471,17120,499],{"class":484},[471,17122,651],{"class":484},[471,17124,17125],{"class":514},"Hue Rotate 180 deg",[471,17127,521],{"class":484},[471,17129,453],{"class":488},[471,17131,508],{"class":484},[471,17133,17134,17136,17138],{"class":473,"line":2260},[471,17135,1723],{"class":484},[471,17137,725],{"class":488},[471,17139,508],{"class":484},[471,17141,17142,17144,17146],{"class":473,"line":2266},[471,17143,1914],{"class":484},[471,17145,725],{"class":488},[471,17147,508],{"class":484},[471,17149,17150,17152,17154],{"class":473,"line":2272},[471,17151,885],{"class":484},[471,17153,725],{"class":488},[471,17155,508],{"class":484},[471,17157,17158,17160,17162],{"class":473,"line":2278},[471,17159,521],{"class":484},[471,17161,1419],{"class":488},[471,17163,508],{"class":484},[824,17165,17167],{"id":17166},"bài-tập-16-glassmorphism-card-với-backdrop-blur-bg-opacity","Bài tập 16: Glassmorphism card với backdrop-blur + bg-opacity",[453,17169,17170,17172],{},[457,17171,1404],{}," Card với hiệu ứng kính mờ (glassmorphism) trên nền gradient\u002Fảnh.",[462,17174,17176],{"className":1408,"code":17175,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"relative max-w-2xl mx-auto min-h-[500px] rounded-2xl overflow-hidden\">\n    \u003C!-- Background -->\n    \u003Cdiv class=\"absolute inset-0 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500\">\n      \u003C!-- Decorative circles -->\n      \u003Cdiv class=\"absolute -top-20 -left-20 w-64 h-64 bg-white\u002F10 rounded-full\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"absolute -bottom-20 -right-20 w-80 h-80 bg-white\u002F10 rounded-full\">\u003C\u002Fdiv>\n      \u003Cdiv class=\"absolute top-1\u002F2 left-1\u002F2 -translate-x-1\u002F2 -translate-y-1\u002F2 w-48 h-48 bg-white\u002F5 rounded-full\">\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Glass card -->\n    \u003Cdiv class=\"relative z-10 max-w-sm mx-auto mt-20 p-8 rounded-2xl\n                bg-white\u002F20 backdrop-blur-xl backdrop-saturate-150\n                border border-white\u002F30 shadow-2xl\">\n      \u003Cdiv class=\"w-16 h-16 bg-white\u002F30 rounded-2xl flex items-center justify-center mb-6\n                  backdrop-blur-sm\">\n        \u003Csvg class=\"w-8 h-8 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\" \u002F>\n        \u003C\u002Fsvg>\n      \u003C\u002Fdiv>\n\n      \u003Ch2 class=\"text-2xl font-bold text-white\">Glassmorphism Card\u003C\u002Fh2>\n      \u003Cp class=\"mt-3 text-white\u002F80 text-sm leading-relaxed\">\n        Hiệu ứng kính mờ (frosted glass) được tạo bằng cách kết hợp\n        backdrop-blur, background opacity, và border trong suốt.\n      \u003C\u002Fp>\n\n      \u003Cdiv class=\"mt-6 space-y-3\">\n        \u003Cdiv class=\"flex items-center gap-3\">\n          \u003Cdiv class=\"w-10 h-10 bg-white\u002F10 rounded-lg backdrop-blur-sm flex items-center justify-center text-white text-sm font-bold\">1\u003C\u002Fdiv>\n          \u003Cspan class=\"text-white\u002F90 text-sm\">backdrop-blur-xl\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"flex items-center gap-3\">\n          \u003Cdiv class=\"w-10 h-10 bg-white\u002F10 rounded-lg backdrop-blur-sm flex items-center justify-center text-white text-sm font-bold\">2\u003C\u002Fdiv>\n          \u003Cspan class=\"text-white\u002F90 text-sm\">bg-white\u002F20\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cdiv class=\"flex items-center gap-3\">\n          \u003Cdiv class=\"w-10 h-10 bg-white\u002F10 rounded-lg backdrop-blur-sm flex items-center justify-center text-white text-sm font-bold\">3\u003C\u002Fdiv>\n          \u003Cspan class=\"text-white\u002F90 text-sm\">border-white\u002F30\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n\n      \u003Cbutton class=\"mt-8 w-full py-2.5 bg-white\u002F25 backdrop-blur-sm text-white font-semibold rounded-xl\n                     border border-white\u002F30 hover:bg-white\u002F35 transition-colors\">\n        Khám phá ngay\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,17177,17178,17186,17205,17210,17229,17234,17257,17280,17303,17311,17315,17320,17335,17340,17349,17364,17373,17422,17458,17474,17482,17490,17494,17522,17540,17545,17550,17558,17562,17581,17600,17628,17656,17664,17682,17708,17735,17743,17761,17787,17814,17822,17830,17834,17849,17858,17863,17871,17879,17887],{"__ignoreMap":467},[471,17179,17180,17182,17184],{"class":473,"line":474},[471,17181,485],{"class":484},[471,17183,1419],{"class":488},[471,17185,508],{"class":484},[471,17187,17188,17190,17192,17194,17196,17198,17201,17203],{"class":473,"line":481},[471,17189,744],{"class":484},[471,17191,725],{"class":488},[471,17193,493],{"class":492},[471,17195,496],{"class":484},[471,17197,499],{"class":484},[471,17199,17200],{"class":502},"relative max-w-2xl mx-auto min-h-[500px] rounded-2xl overflow-hidden",[471,17202,499],{"class":484},[471,17204,508],{"class":484},[471,17206,17207],{"class":473,"line":511},[471,17208,17209],{"class":477},"    \u003C!-- Background -->\n",[471,17211,17212,17214,17216,17218,17220,17222,17225,17227],{"class":473,"line":518},[471,17213,1445],{"class":484},[471,17215,725],{"class":488},[471,17217,493],{"class":492},[471,17219,496],{"class":484},[471,17221,499],{"class":484},[471,17223,17224],{"class":502},"absolute inset-0 bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500",[471,17226,499],{"class":484},[471,17228,508],{"class":484},[471,17230,17231],{"class":473,"line":528},[471,17232,17233],{"class":477},"      \u003C!-- Decorative circles -->\n",[471,17235,17236,17238,17240,17242,17244,17246,17249,17251,17253,17255],{"class":473,"line":535},[471,17237,1502],{"class":484},[471,17239,725],{"class":488},[471,17241,493],{"class":492},[471,17243,496],{"class":484},[471,17245,499],{"class":484},[471,17247,17248],{"class":502},"absolute -top-20 -left-20 w-64 h-64 bg-white\u002F10 rounded-full",[471,17250,499],{"class":484},[471,17252,3475],{"class":484},[471,17254,725],{"class":488},[471,17256,508],{"class":484},[471,17258,17259,17261,17263,17265,17267,17269,17272,17274,17276,17278],{"class":473,"line":541},[471,17260,1502],{"class":484},[471,17262,725],{"class":488},[471,17264,493],{"class":492},[471,17266,496],{"class":484},[471,17268,499],{"class":484},[471,17270,17271],{"class":502},"absolute -bottom-20 -right-20 w-80 h-80 bg-white\u002F10 rounded-full",[471,17273,499],{"class":484},[471,17275,3475],{"class":484},[471,17277,725],{"class":488},[471,17279,508],{"class":484},[471,17281,17282,17284,17286,17288,17290,17292,17295,17297,17299,17301],{"class":473,"line":563},[471,17283,1502],{"class":484},[471,17285,725],{"class":488},[471,17287,493],{"class":492},[471,17289,496],{"class":484},[471,17291,499],{"class":484},[471,17293,17294],{"class":502},"absolute top-1\u002F2 left-1\u002F2 -translate-x-1\u002F2 -translate-y-1\u002F2 w-48 h-48 bg-white\u002F5 rounded-full",[471,17296,499],{"class":484},[471,17298,3475],{"class":484},[471,17300,725],{"class":488},[471,17302,508],{"class":484},[471,17304,17305,17307,17309],{"class":473,"line":568},[471,17306,1914],{"class":484},[471,17308,725],{"class":488},[471,17310,508],{"class":484},[471,17312,17313],{"class":473,"line":574},[471,17314,532],{"emptyLinePlaceholder":531},[471,17316,17317],{"class":473,"line":594},[471,17318,17319],{"class":477},"    \u003C!-- Glass card -->\n",[471,17321,17322,17324,17326,17328,17330,17332],{"class":473,"line":600},[471,17323,1445],{"class":484},[471,17325,725],{"class":488},[471,17327,493],{"class":492},[471,17329,496],{"class":484},[471,17331,499],{"class":484},[471,17333,17334],{"class":502},"relative z-10 max-w-sm mx-auto mt-20 p-8 rounded-2xl\n",[471,17336,17337],{"class":473,"line":609},[471,17338,17339],{"class":502},"                bg-white\u002F20 backdrop-blur-xl backdrop-saturate-150\n",[471,17341,17342,17345,17347],{"class":473,"line":614},[471,17343,17344],{"class":502},"                border border-white\u002F30 shadow-2xl",[471,17346,499],{"class":484},[471,17348,508],{"class":484},[471,17350,17351,17353,17355,17357,17359,17361],{"class":473,"line":620},[471,17352,1502],{"class":484},[471,17354,725],{"class":488},[471,17356,493],{"class":492},[471,17358,496],{"class":484},[471,17360,499],{"class":484},[471,17362,17363],{"class":502},"w-16 h-16 bg-white\u002F30 rounded-2xl flex items-center justify-center mb-6\n",[471,17365,17366,17369,17371],{"class":473,"line":663},[471,17367,17368],{"class":502},"                  backdrop-blur-sm",[471,17370,499],{"class":484},[471,17372,508],{"class":484},[471,17374,17375,17377,17379,17381,17383,17385,17388,17390,17392,17394,17396,17398,17400,17402,17404,17406,17408,17410,17412,17414,17416,17418,17420],{"class":473,"line":668},[471,17376,1584],{"class":484},[471,17378,928],{"class":488},[471,17380,493],{"class":492},[471,17382,496],{"class":484},[471,17384,499],{"class":484},[471,17386,17387],{"class":502},"w-8 h-8 text-white",[471,17389,499],{"class":484},[471,17391,1617],{"class":492},[471,17393,496],{"class":484},[471,17395,499],{"class":484},[471,17397,1624],{"class":502},[471,17399,499],{"class":484},[471,17401,1629],{"class":492},[471,17403,496],{"class":484},[471,17405,499],{"class":484},[471,17407,1636],{"class":502},[471,17409,499],{"class":484},[471,17411,1641],{"class":492},[471,17413,496],{"class":484},[471,17415,499],{"class":484},[471,17417,1648],{"class":502},[471,17419,499],{"class":484},[471,17421,508],{"class":484},[471,17423,17424,17426,17428,17430,17432,17434,17436,17438,17440,17442,17444,17446,17448,17450,17452,17454,17456],{"class":473,"line":674},[471,17425,1657],{"class":484},[471,17427,1660],{"class":488},[471,17429,1663],{"class":492},[471,17431,496],{"class":484},[471,17433,499],{"class":484},[471,17435,1670],{"class":502},[471,17437,499],{"class":484},[471,17439,1675],{"class":492},[471,17441,496],{"class":484},[471,17443,499],{"class":484},[471,17445,1670],{"class":502},[471,17447,499],{"class":484},[471,17449,1686],{"class":492},[471,17451,496],{"class":484},[471,17453,499],{"class":484},[471,17455,1693],{"class":502},[471,17457,2436],{"class":484},[471,17459,17460,17463,17465,17467,17470,17472],{"class":473,"line":694},[471,17461,17462],{"class":492},"                d",[471,17464,496],{"class":484},[471,17466,499],{"class":484},[471,17468,17469],{"class":502},"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z",[471,17471,499],{"class":484},[471,17473,560],{"class":484},[471,17475,17476,17478,17480],{"class":473,"line":700},[471,17477,1714],{"class":484},[471,17479,928],{"class":488},[471,17481,508],{"class":484},[471,17483,17484,17486,17488],{"class":473,"line":709},[471,17485,1723],{"class":484},[471,17487,725],{"class":488},[471,17489,508],{"class":484},[471,17491,17492],{"class":473,"line":714},[471,17493,532],{"emptyLinePlaceholder":531},[471,17495,17496,17498,17500,17502,17504,17506,17509,17511,17513,17516,17518,17520],{"class":473,"line":720},[471,17497,1502],{"class":484},[471,17499,427],{"class":488},[471,17501,493],{"class":492},[471,17503,496],{"class":484},[471,17505,499],{"class":484},[471,17507,17508],{"class":502},"text-2xl font-bold text-white",[471,17510,499],{"class":484},[471,17512,651],{"class":484},[471,17514,17515],{"class":514},"Glassmorphism Card",[471,17517,521],{"class":484},[471,17519,427],{"class":488},[471,17521,508],{"class":484},[471,17523,17524,17526,17528,17530,17532,17534,17536,17538],{"class":473,"line":741},[471,17525,1502],{"class":484},[471,17527,453],{"class":488},[471,17529,493],{"class":492},[471,17531,496],{"class":484},[471,17533,499],{"class":484},[471,17535,9647],{"class":502},[471,17537,499],{"class":484},[471,17539,508],{"class":484},[471,17541,17542],{"class":473,"line":772},[471,17543,17544],{"class":514},"        Hiệu ứng kính mờ (frosted glass) được tạo bằng cách kết hợp\n",[471,17546,17547],{"class":473,"line":816},[471,17548,17549],{"class":514},"        backdrop-blur, background opacity, và border trong suốt.\n",[471,17551,17552,17554,17556],{"class":473,"line":1833},[471,17553,1723],{"class":484},[471,17555,453],{"class":488},[471,17557,508],{"class":484},[471,17559,17560],{"class":473,"line":1883},[471,17561,532],{"emptyLinePlaceholder":531},[471,17563,17564,17566,17568,17570,17572,17574,17577,17579],{"class":473,"line":1893},[471,17565,1502],{"class":484},[471,17567,725],{"class":488},[471,17569,493],{"class":492},[471,17571,496],{"class":484},[471,17573,499],{"class":484},[471,17575,17576],{"class":502},"mt-6 space-y-3",[471,17578,499],{"class":484},[471,17580,508],{"class":484},[471,17582,17583,17585,17587,17589,17591,17593,17596,17598],{"class":473,"line":1902},[471,17584,1584],{"class":484},[471,17586,725],{"class":488},[471,17588,493],{"class":492},[471,17590,496],{"class":484},[471,17592,499],{"class":484},[471,17594,17595],{"class":502},"flex items-center gap-3",[471,17597,499],{"class":484},[471,17599,508],{"class":484},[471,17601,17602,17604,17606,17608,17610,17612,17615,17617,17619,17622,17624,17626],{"class":473,"line":1911},[471,17603,1657],{"class":484},[471,17605,725],{"class":488},[471,17607,493],{"class":492},[471,17609,496],{"class":484},[471,17611,499],{"class":484},[471,17613,17614],{"class":502},"w-10 h-10 bg-white\u002F10 rounded-lg backdrop-blur-sm flex items-center justify-center text-white text-sm font-bold",[471,17616,499],{"class":484},[471,17618,651],{"class":484},[471,17620,17621],{"class":514},"1",[471,17623,521],{"class":484},[471,17625,725],{"class":488},[471,17627,508],{"class":484},[471,17629,17630,17632,17634,17636,17638,17640,17643,17645,17647,17650,17652,17654],{"class":473,"line":1921},[471,17631,1657],{"class":484},[471,17633,471],{"class":488},[471,17635,493],{"class":492},[471,17637,496],{"class":484},[471,17639,499],{"class":484},[471,17641,17642],{"class":502},"text-white\u002F90 text-sm",[471,17644,499],{"class":484},[471,17646,651],{"class":484},[471,17648,17649],{"class":514},"backdrop-blur-xl",[471,17651,521],{"class":484},[471,17653,471],{"class":488},[471,17655,508],{"class":484},[471,17657,17658,17660,17662],{"class":473,"line":1926},[471,17659,1714],{"class":484},[471,17661,725],{"class":488},[471,17663,508],{"class":484},[471,17665,17666,17668,17670,17672,17674,17676,17678,17680],{"class":473,"line":1932},[471,17667,1584],{"class":484},[471,17669,725],{"class":488},[471,17671,493],{"class":492},[471,17673,496],{"class":484},[471,17675,499],{"class":484},[471,17677,17595],{"class":502},[471,17679,499],{"class":484},[471,17681,508],{"class":484},[471,17683,17684,17686,17688,17690,17692,17694,17696,17698,17700,17702,17704,17706],{"class":473,"line":1951},[471,17685,1657],{"class":484},[471,17687,725],{"class":488},[471,17689,493],{"class":492},[471,17691,496],{"class":484},[471,17693,499],{"class":484},[471,17695,17614],{"class":502},[471,17697,499],{"class":484},[471,17699,651],{"class":484},[471,17701,1693],{"class":514},[471,17703,521],{"class":484},[471,17705,725],{"class":488},[471,17707,508],{"class":484},[471,17709,17710,17712,17714,17716,17718,17720,17722,17724,17726,17729,17731,17733],{"class":473,"line":1979},[471,17711,1657],{"class":484},[471,17713,471],{"class":488},[471,17715,493],{"class":492},[471,17717,496],{"class":484},[471,17719,499],{"class":484},[471,17721,17642],{"class":502},[471,17723,499],{"class":484},[471,17725,651],{"class":484},[471,17727,17728],{"class":514},"bg-white\u002F20",[471,17730,521],{"class":484},[471,17732,471],{"class":488},[471,17734,508],{"class":484},[471,17736,17737,17739,17741],{"class":473,"line":1984},[471,17738,1714],{"class":484},[471,17740,725],{"class":488},[471,17742,508],{"class":484},[471,17744,17745,17747,17749,17751,17753,17755,17757,17759],{"class":473,"line":2000},[471,17746,1584],{"class":484},[471,17748,725],{"class":488},[471,17750,493],{"class":492},[471,17752,496],{"class":484},[471,17754,499],{"class":484},[471,17756,17595],{"class":502},[471,17758,499],{"class":484},[471,17760,508],{"class":484},[471,17762,17763,17765,17767,17769,17771,17773,17775,17777,17779,17781,17783,17785],{"class":473,"line":2006},[471,17764,1657],{"class":484},[471,17766,725],{"class":488},[471,17768,493],{"class":492},[471,17770,496],{"class":484},[471,17772,499],{"class":484},[471,17774,17614],{"class":502},[471,17776,499],{"class":484},[471,17778,651],{"class":484},[471,17780,3082],{"class":514},[471,17782,521],{"class":484},[471,17784,725],{"class":488},[471,17786,508],{"class":484},[471,17788,17789,17791,17793,17795,17797,17799,17801,17803,17805,17808,17810,17812],{"class":473,"line":2012},[471,17790,1657],{"class":484},[471,17792,471],{"class":488},[471,17794,493],{"class":492},[471,17796,496],{"class":484},[471,17798,499],{"class":484},[471,17800,17642],{"class":502},[471,17802,499],{"class":484},[471,17804,651],{"class":484},[471,17806,17807],{"class":514},"border-white\u002F30",[471,17809,521],{"class":484},[471,17811,471],{"class":488},[471,17813,508],{"class":484},[471,17815,17816,17818,17820],{"class":473,"line":2018},[471,17817,1714],{"class":484},[471,17819,725],{"class":488},[471,17821,508],{"class":484},[471,17823,17824,17826,17828],{"class":473,"line":2027},[471,17825,1723],{"class":484},[471,17827,725],{"class":488},[471,17829,508],{"class":484},[471,17831,17832],{"class":473,"line":2033},[471,17833,532],{"emptyLinePlaceholder":531},[471,17835,17836,17838,17840,17842,17844,17846],{"class":473,"line":2042},[471,17837,1502],{"class":484},[471,17839,489],{"class":488},[471,17841,493],{"class":492},[471,17843,496],{"class":484},[471,17845,499],{"class":484},[471,17847,17848],{"class":502},"mt-8 w-full py-2.5 bg-white\u002F25 backdrop-blur-sm text-white font-semibold rounded-xl\n",[471,17850,17851,17854,17856],{"class":473,"line":2051},[471,17852,17853],{"class":502},"                     border border-white\u002F30 hover:bg-white\u002F35 transition-colors",[471,17855,499],{"class":484},[471,17857,508],{"class":484},[471,17859,17860],{"class":473,"line":2056},[471,17861,17862],{"class":514},"        Khám phá ngay\n",[471,17864,17865,17867,17869],{"class":473,"line":2062},[471,17866,1723],{"class":484},[471,17868,489],{"class":488},[471,17870,508],{"class":484},[471,17872,17873,17875,17877],{"class":473,"line":2081},[471,17874,1914],{"class":484},[471,17876,725],{"class":488},[471,17878,508],{"class":484},[471,17880,17881,17883,17885],{"class":473,"line":2109},[471,17882,885],{"class":484},[471,17884,725],{"class":488},[471,17886,508],{"class":484},[471,17888,17889,17891,17893],{"class":473,"line":2114},[471,17890,521],{"class":484},[471,17892,1419],{"class":488},[471,17894,508],{"class":484},[824,17896,17898],{"id":17897},"bài-tập-17-navbar-với-backdrop-blur-frosted-glass-effect","Bài tập 17: Navbar với backdrop-blur (frosted glass effect)",[453,17900,17901,17903],{},[457,17902,1404],{}," Thanh navbar cố định với hiệu ứng kính mờ khi scroll.",[462,17905,17907],{"className":1408,"code":17906,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-4xl mx-auto\">\n    \u003C!-- Navbar -->\n    \u003Cnav class=\"sticky top-0 z-50 bg-white\u002F70 backdrop-blur-lg backdrop-saturate-150 border-b border-gray-200\u002F50\">\n      \u003Cdiv class=\"max-w-5xl mx-auto px-4 sm:px-6\">\n        \u003Cdiv class=\"flex items-center justify-between h-16\">\n          \u003C!-- Logo -->\n          \u003Ca href=\"#\" class=\"text-xl font-black text-gray-900 tracking-tight\">\n            Brand\u003Cspan class=\"text-indigo-600\">.\u003C\u002Fspan>\n          \u003C\u002Fa>\n\n          \u003C!-- Nav links -->\n          \u003Cdiv class=\"hidden md:flex items-center gap-1\">\n            \u003Ca href=\"#\" class=\"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 rounded-lg hover:bg-gray-100\u002F80 transition-colors\">Home\u003C\u002Fa>\n            \u003Ca href=\"#\" class=\"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 rounded-lg hover:bg-gray-100\u002F80 transition-colors\">Features\u003C\u002Fa>\n            \u003Ca href=\"#\" class=\"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 rounded-lg hover:bg-gray-100\u002F80 transition-colors\">Pricing\u003C\u002Fa>\n            \u003Ca href=\"#\" class=\"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 rounded-lg hover:bg-gray-100\u002F80 transition-colors\">Blog\u003C\u002Fa>\n          \u003C\u002Fdiv>\n\n          \u003C!-- Right actions -->\n          \u003Cdiv class=\"flex items-center gap-3\">\n            \u003Cbutton class=\"hidden sm:block px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors\">\n              Sign in\n            \u003C\u002Fbutton>\n            \u003Cbutton class=\"px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg\n                           hover:bg-gray-800 transition-colors\">\n              Get started\n            \u003C\u002Fbutton>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fnav>\n\n    \u003C!-- Content để demo scroll -->\n    \u003Cdiv class=\"px-6 py-12 space-y-8\">\n      \u003Cdiv v-for=\"i in 10\" :key=\"i\" class=\"p-6 bg-white rounded-xl border border-gray-200\">\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900\">Section {{ i }}\u003C\u002Fh3>\n        \u003Cp class=\"mt-2 text-gray-600\">Nội dung demo để thấy hiệu ứng backdrop-blur của navbar khi scroll qua.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,17908,17909,17917,17936,17941,17961,17980,17999,18004,18033,18063,18071,18075,18080,18099,18137,18174,18211,18248,18256,18260,18265,18283,18302,18307,18315,18330,18339,18344,18352,18360,18368,18376,18384,18388,18393,18412,18455,18482,18510,18518,18526,18534],{"__ignoreMap":467},[471,17910,17911,17913,17915],{"class":473,"line":474},[471,17912,485],{"class":484},[471,17914,1419],{"class":488},[471,17916,508],{"class":484},[471,17918,17919,17921,17923,17925,17927,17929,17932,17934],{"class":473,"line":481},[471,17920,744],{"class":484},[471,17922,725],{"class":488},[471,17924,493],{"class":492},[471,17926,496],{"class":484},[471,17928,499],{"class":484},[471,17930,17931],{"class":502},"max-w-4xl mx-auto",[471,17933,499],{"class":484},[471,17935,508],{"class":484},[471,17937,17938],{"class":473,"line":511},[471,17939,17940],{"class":477},"    \u003C!-- Navbar -->\n",[471,17942,17943,17945,17948,17950,17952,17954,17957,17959],{"class":473,"line":518},[471,17944,1445],{"class":484},[471,17946,17947],{"class":488},"nav",[471,17949,493],{"class":492},[471,17951,496],{"class":484},[471,17953,499],{"class":484},[471,17955,17956],{"class":502},"sticky top-0 z-50 bg-white\u002F70 backdrop-blur-lg backdrop-saturate-150 border-b border-gray-200\u002F50",[471,17958,499],{"class":484},[471,17960,508],{"class":484},[471,17962,17963,17965,17967,17969,17971,17973,17976,17978],{"class":473,"line":528},[471,17964,1502],{"class":484},[471,17966,725],{"class":488},[471,17968,493],{"class":492},[471,17970,496],{"class":484},[471,17972,499],{"class":484},[471,17974,17975],{"class":502},"max-w-5xl mx-auto px-4 sm:px-6",[471,17977,499],{"class":484},[471,17979,508],{"class":484},[471,17981,17982,17984,17986,17988,17990,17992,17995,17997],{"class":473,"line":535},[471,17983,1584],{"class":484},[471,17985,725],{"class":488},[471,17987,493],{"class":492},[471,17989,496],{"class":484},[471,17991,499],{"class":484},[471,17993,17994],{"class":502},"flex items-center justify-between h-16",[471,17996,499],{"class":484},[471,17998,508],{"class":484},[471,18000,18001],{"class":473,"line":541},[471,18002,18003],{"class":477},"          \u003C!-- Logo -->\n",[471,18005,18006,18008,18010,18012,18014,18016,18018,18020,18022,18024,18026,18029,18031],{"class":473,"line":563},[471,18007,1657],{"class":484},[471,18009,625],{"class":488},[471,18011,628],{"class":492},[471,18013,496],{"class":484},[471,18015,499],{"class":484},[471,18017,635],{"class":502},[471,18019,499],{"class":484},[471,18021,493],{"class":492},[471,18023,496],{"class":484},[471,18025,499],{"class":484},[471,18027,18028],{"class":502},"text-xl font-black text-gray-900 tracking-tight",[471,18030,499],{"class":484},[471,18032,508],{"class":484},[471,18034,18035,18038,18040,18042,18044,18046,18048,18051,18053,18055,18057,18059,18061],{"class":473,"line":568},[471,18036,18037],{"class":514},"            Brand",[471,18039,485],{"class":484},[471,18041,471],{"class":488},[471,18043,493],{"class":492},[471,18045,496],{"class":484},[471,18047,499],{"class":484},[471,18049,18050],{"class":502},"text-indigo-600",[471,18052,499],{"class":484},[471,18054,651],{"class":484},[471,18056,2917],{"class":514},[471,18058,521],{"class":484},[471,18060,471],{"class":488},[471,18062,508],{"class":484},[471,18064,18065,18067,18069],{"class":473,"line":574},[471,18066,1886],{"class":484},[471,18068,625],{"class":488},[471,18070,508],{"class":484},[471,18072,18073],{"class":473,"line":594},[471,18074,532],{"emptyLinePlaceholder":531},[471,18076,18077],{"class":473,"line":600},[471,18078,18079],{"class":477},"          \u003C!-- Nav links -->\n",[471,18081,18082,18084,18086,18088,18090,18092,18095,18097],{"class":473,"line":609},[471,18083,1657],{"class":484},[471,18085,725],{"class":488},[471,18087,493],{"class":492},[471,18089,496],{"class":484},[471,18091,499],{"class":484},[471,18093,18094],{"class":502},"hidden md:flex items-center gap-1",[471,18096,499],{"class":484},[471,18098,508],{"class":484},[471,18100,18101,18103,18105,18107,18109,18111,18113,18115,18117,18119,18121,18124,18126,18128,18131,18133,18135],{"class":473,"line":614},[471,18102,1836],{"class":484},[471,18104,625],{"class":488},[471,18106,628],{"class":492},[471,18108,496],{"class":484},[471,18110,499],{"class":484},[471,18112,635],{"class":502},[471,18114,499],{"class":484},[471,18116,493],{"class":492},[471,18118,496],{"class":484},[471,18120,499],{"class":484},[471,18122,18123],{"class":502},"px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 rounded-lg hover:bg-gray-100\u002F80 transition-colors",[471,18125,499],{"class":484},[471,18127,651],{"class":484},[471,18129,18130],{"class":514},"Home",[471,18132,521],{"class":484},[471,18134,625],{"class":488},[471,18136,508],{"class":484},[471,18138,18139,18141,18143,18145,18147,18149,18151,18153,18155,18157,18159,18161,18163,18165,18168,18170,18172],{"class":473,"line":620},[471,18140,1836],{"class":484},[471,18142,625],{"class":488},[471,18144,628],{"class":492},[471,18146,496],{"class":484},[471,18148,499],{"class":484},[471,18150,635],{"class":502},[471,18152,499],{"class":484},[471,18154,493],{"class":492},[471,18156,496],{"class":484},[471,18158,499],{"class":484},[471,18160,18123],{"class":502},[471,18162,499],{"class":484},[471,18164,651],{"class":484},[471,18166,18167],{"class":514},"Features",[471,18169,521],{"class":484},[471,18171,625],{"class":488},[471,18173,508],{"class":484},[471,18175,18176,18178,18180,18182,18184,18186,18188,18190,18192,18194,18196,18198,18200,18202,18205,18207,18209],{"class":473,"line":663},[471,18177,1836],{"class":484},[471,18179,625],{"class":488},[471,18181,628],{"class":492},[471,18183,496],{"class":484},[471,18185,499],{"class":484},[471,18187,635],{"class":502},[471,18189,499],{"class":484},[471,18191,493],{"class":492},[471,18193,496],{"class":484},[471,18195,499],{"class":484},[471,18197,18123],{"class":502},[471,18199,499],{"class":484},[471,18201,651],{"class":484},[471,18203,18204],{"class":514},"Pricing",[471,18206,521],{"class":484},[471,18208,625],{"class":488},[471,18210,508],{"class":484},[471,18212,18213,18215,18217,18219,18221,18223,18225,18227,18229,18231,18233,18235,18237,18239,18242,18244,18246],{"class":473,"line":668},[471,18214,1836],{"class":484},[471,18216,625],{"class":488},[471,18218,628],{"class":492},[471,18220,496],{"class":484},[471,18222,499],{"class":484},[471,18224,635],{"class":502},[471,18226,499],{"class":484},[471,18228,493],{"class":492},[471,18230,496],{"class":484},[471,18232,499],{"class":484},[471,18234,18123],{"class":502},[471,18236,499],{"class":484},[471,18238,651],{"class":484},[471,18240,18241],{"class":514},"Blog",[471,18243,521],{"class":484},[471,18245,625],{"class":488},[471,18247,508],{"class":484},[471,18249,18250,18252,18254],{"class":473,"line":674},[471,18251,1886],{"class":484},[471,18253,725],{"class":488},[471,18255,508],{"class":484},[471,18257,18258],{"class":473,"line":694},[471,18259,532],{"emptyLinePlaceholder":531},[471,18261,18262],{"class":473,"line":700},[471,18263,18264],{"class":477},"          \u003C!-- Right actions -->\n",[471,18266,18267,18269,18271,18273,18275,18277,18279,18281],{"class":473,"line":709},[471,18268,1657],{"class":484},[471,18270,725],{"class":488},[471,18272,493],{"class":492},[471,18274,496],{"class":484},[471,18276,499],{"class":484},[471,18278,17595],{"class":502},[471,18280,499],{"class":484},[471,18282,508],{"class":484},[471,18284,18285,18287,18289,18291,18293,18295,18298,18300],{"class":473,"line":714},[471,18286,1836],{"class":484},[471,18288,489],{"class":488},[471,18290,493],{"class":492},[471,18292,496],{"class":484},[471,18294,499],{"class":484},[471,18296,18297],{"class":502},"hidden sm:block px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors",[471,18299,499],{"class":484},[471,18301,508],{"class":484},[471,18303,18304],{"class":473,"line":720},[471,18305,18306],{"class":514},"              Sign in\n",[471,18308,18309,18311,18313],{"class":473,"line":741},[471,18310,4344],{"class":484},[471,18312,489],{"class":488},[471,18314,508],{"class":484},[471,18316,18317,18319,18321,18323,18325,18327],{"class":473,"line":772},[471,18318,1836],{"class":484},[471,18320,489],{"class":488},[471,18322,493],{"class":492},[471,18324,496],{"class":484},[471,18326,499],{"class":484},[471,18328,18329],{"class":502},"px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg\n",[471,18331,18332,18335,18337],{"class":473,"line":816},[471,18333,18334],{"class":502},"                           hover:bg-gray-800 transition-colors",[471,18336,499],{"class":484},[471,18338,508],{"class":484},[471,18340,18341],{"class":473,"line":1833},[471,18342,18343],{"class":514},"              Get started\n",[471,18345,18346,18348,18350],{"class":473,"line":1883},[471,18347,4344],{"class":484},[471,18349,489],{"class":488},[471,18351,508],{"class":484},[471,18353,18354,18356,18358],{"class":473,"line":1893},[471,18355,1886],{"class":484},[471,18357,725],{"class":488},[471,18359,508],{"class":484},[471,18361,18362,18364,18366],{"class":473,"line":1902},[471,18363,1714],{"class":484},[471,18365,725],{"class":488},[471,18367,508],{"class":484},[471,18369,18370,18372,18374],{"class":473,"line":1911},[471,18371,1723],{"class":484},[471,18373,725],{"class":488},[471,18375,508],{"class":484},[471,18377,18378,18380,18382],{"class":473,"line":1921},[471,18379,1914],{"class":484},[471,18381,17947],{"class":488},[471,18383,508],{"class":484},[471,18385,18386],{"class":473,"line":1926},[471,18387,532],{"emptyLinePlaceholder":531},[471,18389,18390],{"class":473,"line":1932},[471,18391,18392],{"class":477},"    \u003C!-- Content để demo scroll -->\n",[471,18394,18395,18397,18399,18401,18403,18405,18408,18410],{"class":473,"line":1951},[471,18396,1445],{"class":484},[471,18398,725],{"class":488},[471,18400,493],{"class":492},[471,18402,496],{"class":484},[471,18404,499],{"class":484},[471,18406,18407],{"class":502},"px-6 py-12 space-y-8",[471,18409,499],{"class":484},[471,18411,508],{"class":484},[471,18413,18414,18416,18418,18421,18423,18425,18428,18430,18433,18435,18437,18440,18442,18444,18446,18448,18451,18453],{"class":473,"line":1979},[471,18415,1502],{"class":484},[471,18417,725],{"class":488},[471,18419,18420],{"class":492}," v-for",[471,18422,496],{"class":484},[471,18424,499],{"class":484},[471,18426,18427],{"class":502},"i in 10",[471,18429,499],{"class":484},[471,18431,18432],{"class":492}," :key",[471,18434,496],{"class":484},[471,18436,499],{"class":484},[471,18438,18439],{"class":502},"i",[471,18441,499],{"class":484},[471,18443,493],{"class":492},[471,18445,496],{"class":484},[471,18447,499],{"class":484},[471,18449,18450],{"class":502},"p-6 bg-white rounded-xl border border-gray-200",[471,18452,499],{"class":484},[471,18454,508],{"class":484},[471,18456,18457,18459,18461,18463,18465,18467,18469,18471,18473,18476,18478,18480],{"class":473,"line":1984},[471,18458,1584],{"class":484},[471,18460,824],{"class":488},[471,18462,493],{"class":492},[471,18464,496],{"class":484},[471,18466,499],{"class":484},[471,18468,7065],{"class":502},[471,18470,499],{"class":484},[471,18472,651],{"class":484},[471,18474,18475],{"class":514},"Section {{ i }}",[471,18477,521],{"class":484},[471,18479,824],{"class":488},[471,18481,508],{"class":484},[471,18483,18484,18486,18488,18490,18492,18494,18497,18499,18501,18504,18506,18508],{"class":473,"line":2000},[471,18485,1584],{"class":484},[471,18487,453],{"class":488},[471,18489,493],{"class":492},[471,18491,496],{"class":484},[471,18493,499],{"class":484},[471,18495,18496],{"class":502},"mt-2 text-gray-600",[471,18498,499],{"class":484},[471,18500,651],{"class":484},[471,18502,18503],{"class":514},"Nội dung demo để thấy hiệu ứng backdrop-blur của navbar khi scroll qua.",[471,18505,521],{"class":484},[471,18507,453],{"class":488},[471,18509,508],{"class":484},[471,18511,18512,18514,18516],{"class":473,"line":2006},[471,18513,1723],{"class":484},[471,18515,725],{"class":488},[471,18517,508],{"class":484},[471,18519,18520,18522,18524],{"class":473,"line":2012},[471,18521,1914],{"class":484},[471,18523,725],{"class":488},[471,18525,508],{"class":484},[471,18527,18528,18530,18532],{"class":473,"line":2018},[471,18529,885],{"class":484},[471,18531,725],{"class":488},[471,18533,508],{"class":484},[471,18535,18536,18538,18540],{"class":473,"line":2027},[471,18537,521],{"class":484},[471,18539,1419],{"class":488},[471,18541,508],{"class":484},[5602,18543],{},[427,18545,18547],{"id":18546},"_7-cursor-pointer-events","7. Cursor & Pointer Events",[462,18549,18551],{"className":464,"code":18550,"language":466,"meta":467,"style":467},"\u003C!-- Cursor styles -->\n\u003Cdiv class=\"cursor-auto\">Browser tự chọn (default)\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-default\">Con trỏ mặc định\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-pointer\">Bàn tay (link, button)\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-wait\">Đồng hồ cát — loading\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-text\">Con trỏ văn bản\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-move\">Con trỏ di chuyển\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-not-allowed\">Cấm — disabled state\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-zoom-in\">Kính lúp +\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-grab\">Bàn tay nắm\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-grabbing\">Bàn tay đang nắm\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-help\">Dấu hỏi\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-crosshair\">Dấu thập\u003C\u002Fdiv>\n\u003Cdiv class=\"cursor-none\">Ẩn con trỏ\u003C\u002Fdiv>\n\n\u003C!-- Pointer events -->\n\u003Cdiv class=\"pointer-events-none\">Không nhận click\u002Fhover (click xuyên qua)\u003C\u002Fdiv>\n\u003Cdiv class=\"pointer-events-auto\">Nhận click\u002Fhover bình thường\u003C\u002Fdiv>\n",[432,18552,18553,18558,18586,18614,18642,18670,18698,18726,18754,18782,18810,18838,18866,18894,18922,18926,18931,18959],{"__ignoreMap":467},[471,18554,18555],{"class":473,"line":474},[471,18556,18557],{"class":477},"\u003C!-- Cursor styles -->\n",[471,18559,18560,18562,18564,18566,18568,18570,18573,18575,18577,18580,18582,18584],{"class":473,"line":481},[471,18561,485],{"class":484},[471,18563,725],{"class":488},[471,18565,493],{"class":492},[471,18567,496],{"class":484},[471,18569,499],{"class":484},[471,18571,18572],{"class":502},"cursor-auto",[471,18574,499],{"class":484},[471,18576,651],{"class":484},[471,18578,18579],{"class":514},"Browser tự chọn (default)",[471,18581,521],{"class":484},[471,18583,725],{"class":488},[471,18585,508],{"class":484},[471,18587,18588,18590,18592,18594,18596,18598,18601,18603,18605,18608,18610,18612],{"class":473,"line":511},[471,18589,485],{"class":484},[471,18591,725],{"class":488},[471,18593,493],{"class":492},[471,18595,496],{"class":484},[471,18597,499],{"class":484},[471,18599,18600],{"class":502},"cursor-default",[471,18602,499],{"class":484},[471,18604,651],{"class":484},[471,18606,18607],{"class":514},"Con trỏ mặc định",[471,18609,521],{"class":484},[471,18611,725],{"class":488},[471,18613,508],{"class":484},[471,18615,18616,18618,18620,18622,18624,18626,18629,18631,18633,18636,18638,18640],{"class":473,"line":518},[471,18617,485],{"class":484},[471,18619,725],{"class":488},[471,18621,493],{"class":492},[471,18623,496],{"class":484},[471,18625,499],{"class":484},[471,18627,18628],{"class":502},"cursor-pointer",[471,18630,499],{"class":484},[471,18632,651],{"class":484},[471,18634,18635],{"class":514},"Bàn tay (link, button)",[471,18637,521],{"class":484},[471,18639,725],{"class":488},[471,18641,508],{"class":484},[471,18643,18644,18646,18648,18650,18652,18654,18657,18659,18661,18664,18666,18668],{"class":473,"line":528},[471,18645,485],{"class":484},[471,18647,725],{"class":488},[471,18649,493],{"class":492},[471,18651,496],{"class":484},[471,18653,499],{"class":484},[471,18655,18656],{"class":502},"cursor-wait",[471,18658,499],{"class":484},[471,18660,651],{"class":484},[471,18662,18663],{"class":514},"Đồng hồ cát — loading",[471,18665,521],{"class":484},[471,18667,725],{"class":488},[471,18669,508],{"class":484},[471,18671,18672,18674,18676,18678,18680,18682,18685,18687,18689,18692,18694,18696],{"class":473,"line":535},[471,18673,485],{"class":484},[471,18675,725],{"class":488},[471,18677,493],{"class":492},[471,18679,496],{"class":484},[471,18681,499],{"class":484},[471,18683,18684],{"class":502},"cursor-text",[471,18686,499],{"class":484},[471,18688,651],{"class":484},[471,18690,18691],{"class":514},"Con trỏ văn bản",[471,18693,521],{"class":484},[471,18695,725],{"class":488},[471,18697,508],{"class":484},[471,18699,18700,18702,18704,18706,18708,18710,18713,18715,18717,18720,18722,18724],{"class":473,"line":541},[471,18701,485],{"class":484},[471,18703,725],{"class":488},[471,18705,493],{"class":492},[471,18707,496],{"class":484},[471,18709,499],{"class":484},[471,18711,18712],{"class":502},"cursor-move",[471,18714,499],{"class":484},[471,18716,651],{"class":484},[471,18718,18719],{"class":514},"Con trỏ di chuyển",[471,18721,521],{"class":484},[471,18723,725],{"class":488},[471,18725,508],{"class":484},[471,18727,18728,18730,18732,18734,18736,18738,18741,18743,18745,18748,18750,18752],{"class":473,"line":563},[471,18729,485],{"class":484},[471,18731,725],{"class":488},[471,18733,493],{"class":492},[471,18735,496],{"class":484},[471,18737,499],{"class":484},[471,18739,18740],{"class":502},"cursor-not-allowed",[471,18742,499],{"class":484},[471,18744,651],{"class":484},[471,18746,18747],{"class":514},"Cấm — disabled state",[471,18749,521],{"class":484},[471,18751,725],{"class":488},[471,18753,508],{"class":484},[471,18755,18756,18758,18760,18762,18764,18766,18769,18771,18773,18776,18778,18780],{"class":473,"line":568},[471,18757,485],{"class":484},[471,18759,725],{"class":488},[471,18761,493],{"class":492},[471,18763,496],{"class":484},[471,18765,499],{"class":484},[471,18767,18768],{"class":502},"cursor-zoom-in",[471,18770,499],{"class":484},[471,18772,651],{"class":484},[471,18774,18775],{"class":514},"Kính lúp +",[471,18777,521],{"class":484},[471,18779,725],{"class":488},[471,18781,508],{"class":484},[471,18783,18784,18786,18788,18790,18792,18794,18797,18799,18801,18804,18806,18808],{"class":473,"line":574},[471,18785,485],{"class":484},[471,18787,725],{"class":488},[471,18789,493],{"class":492},[471,18791,496],{"class":484},[471,18793,499],{"class":484},[471,18795,18796],{"class":502},"cursor-grab",[471,18798,499],{"class":484},[471,18800,651],{"class":484},[471,18802,18803],{"class":514},"Bàn tay nắm",[471,18805,521],{"class":484},[471,18807,725],{"class":488},[471,18809,508],{"class":484},[471,18811,18812,18814,18816,18818,18820,18822,18825,18827,18829,18832,18834,18836],{"class":473,"line":594},[471,18813,485],{"class":484},[471,18815,725],{"class":488},[471,18817,493],{"class":492},[471,18819,496],{"class":484},[471,18821,499],{"class":484},[471,18823,18824],{"class":502},"cursor-grabbing",[471,18826,499],{"class":484},[471,18828,651],{"class":484},[471,18830,18831],{"class":514},"Bàn tay đang nắm",[471,18833,521],{"class":484},[471,18835,725],{"class":488},[471,18837,508],{"class":484},[471,18839,18840,18842,18844,18846,18848,18850,18853,18855,18857,18860,18862,18864],{"class":473,"line":600},[471,18841,485],{"class":484},[471,18843,725],{"class":488},[471,18845,493],{"class":492},[471,18847,496],{"class":484},[471,18849,499],{"class":484},[471,18851,18852],{"class":502},"cursor-help",[471,18854,499],{"class":484},[471,18856,651],{"class":484},[471,18858,18859],{"class":514},"Dấu hỏi",[471,18861,521],{"class":484},[471,18863,725],{"class":488},[471,18865,508],{"class":484},[471,18867,18868,18870,18872,18874,18876,18878,18881,18883,18885,18888,18890,18892],{"class":473,"line":609},[471,18869,485],{"class":484},[471,18871,725],{"class":488},[471,18873,493],{"class":492},[471,18875,496],{"class":484},[471,18877,499],{"class":484},[471,18879,18880],{"class":502},"cursor-crosshair",[471,18882,499],{"class":484},[471,18884,651],{"class":484},[471,18886,18887],{"class":514},"Dấu thập",[471,18889,521],{"class":484},[471,18891,725],{"class":488},[471,18893,508],{"class":484},[471,18895,18896,18898,18900,18902,18904,18906,18909,18911,18913,18916,18918,18920],{"class":473,"line":614},[471,18897,485],{"class":484},[471,18899,725],{"class":488},[471,18901,493],{"class":492},[471,18903,496],{"class":484},[471,18905,499],{"class":484},[471,18907,18908],{"class":502},"cursor-none",[471,18910,499],{"class":484},[471,18912,651],{"class":484},[471,18914,18915],{"class":514},"Ẩn con trỏ",[471,18917,521],{"class":484},[471,18919,725],{"class":488},[471,18921,508],{"class":484},[471,18923,18924],{"class":473,"line":620},[471,18925,532],{"emptyLinePlaceholder":531},[471,18927,18928],{"class":473,"line":663},[471,18929,18930],{"class":477},"\u003C!-- Pointer events -->\n",[471,18932,18933,18935,18937,18939,18941,18943,18946,18948,18950,18953,18955,18957],{"class":473,"line":668},[471,18934,485],{"class":484},[471,18936,725],{"class":488},[471,18938,493],{"class":492},[471,18940,496],{"class":484},[471,18942,499],{"class":484},[471,18944,18945],{"class":502},"pointer-events-none",[471,18947,499],{"class":484},[471,18949,651],{"class":484},[471,18951,18952],{"class":514},"Không nhận click\u002Fhover (click xuyên qua)",[471,18954,521],{"class":484},[471,18956,725],{"class":488},[471,18958,508],{"class":484},[471,18960,18961,18963,18965,18967,18969,18971,18974,18976,18978,18981,18983,18985],{"class":473,"line":674},[471,18962,485],{"class":484},[471,18964,725],{"class":488},[471,18966,493],{"class":492},[471,18968,496],{"class":484},[471,18970,499],{"class":484},[471,18972,18973],{"class":502},"pointer-events-auto",[471,18975,499],{"class":484},[471,18977,651],{"class":484},[471,18979,18980],{"class":514},"Nhận click\u002Fhover bình thường",[471,18982,521],{"class":484},[471,18984,725],{"class":488},[471,18986,508],{"class":484},[824,18988,18990],{"id":18989},"bài-tập-18-custom-cursor-states-cho-các-interactive-element-khác-nhau","Bài tập 18: Custom cursor states cho các interactive element khác nhau",[453,18992,18993,18995],{},[457,18994,1404],{}," Component demo tất cả các cursor states với context sử dụng thực tế.",[462,18997,18999],{"className":1408,"code":18998,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-2xl mx-auto p-8 space-y-6\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-6\">Cursor States Reference\u003C\u002Fh2>\n\n    \u003Cdiv class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n      \u003C!-- cursor-pointer -->\n      \u003Cdiv class=\"cursor-pointer p-4 bg-indigo-50 border border-indigo-200 rounded-lg hover:bg-indigo-100 transition-colors\">\n        \u003Cp class=\"text-sm font-medium text-indigo-900\">cursor-pointer\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-indigo-600 mt-1\">Link, button, element clickable\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- cursor-not-allowed -->\n      \u003Cdiv class=\"cursor-not-allowed p-4 bg-gray-50 border border-gray-200 rounded-lg\">\n        \u003Cp class=\"text-sm font-medium text-gray-500\">cursor-not-allowed\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-gray-400 mt-1\">Disabled button \u002F input\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- cursor-wait -->\n      \u003Cdiv class=\"cursor-wait p-4 bg-amber-50 border border-amber-200 rounded-lg\">\n        \u003Cp class=\"text-sm font-medium text-amber-900\">cursor-wait\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-amber-600 mt-1\">Đang xử lý, chờ đợi\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- cursor-text -->\n      \u003Cdiv class=\"cursor-text p-4 bg-emerald-50 border border-emerald-200 rounded-lg\">\n        \u003Cp class=\"text-sm font-medium text-emerald-900\">cursor-text\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-emerald-600 mt-1\">Vùng text có thể chọn \u002F input\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- cursor-move -->\n      \u003Cdiv class=\"cursor-move p-4 bg-purple-50 border border-purple-200 rounded-lg\">\n        \u003Cp class=\"text-sm font-medium text-purple-900\">cursor-move\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-purple-600 mt-1\">Element có thể kéo thả\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- cursor-grab -->\n      \u003Cdiv class=\"cursor-grab p-4 bg-rose-50 border border-rose-200 rounded-lg active:cursor-grabbing\">\n        \u003Cp class=\"text-sm font-medium text-rose-900\">cursor-grab (click để thấy grabbing)\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-rose-600 mt-1\">Drag handle, slider thumb\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- cursor-zoom-in -->\n      \u003Cdiv class=\"cursor-zoom-in p-4 bg-cyan-50 border border-cyan-200 rounded-lg\">\n        \u003Cp class=\"text-sm font-medium text-cyan-900\">cursor-zoom-in\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-cyan-600 mt-1\">Ảnh có thể phóng to\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- cursor-help -->\n      \u003Cdiv class=\"cursor-help p-4 bg-teal-50 border border-teal-200 rounded-lg\">\n        \u003Cp class=\"text-sm font-medium text-teal-900\">cursor-help\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-teal-600 mt-1\">Icon tooltip, trợ giúp\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003C!-- pointer-events demo -->\n    \u003Cdiv class=\"mt-8 p-6 bg-gray-900 rounded-xl text-white\">\n      \u003Ch3 class=\"text-lg font-semibold mb-3\">pointer-events Demo\u003C\u002Fh3>\n      \u003Cdiv class=\"relative p-4 bg-gray-800 rounded-lg\">\n        \u003Cp class=\"text-sm text-gray-300\">\n          Text này nằm phía dưới overlay trong suốt\n        \u003C\u002Fp>\n        \u003C!-- Overlay không chặn click -->\n        \u003Cdiv class=\"absolute inset-0 bg-indigo-500\u002F20 pointer-events-none rounded-lg flex items-center justify-center\">\n          \u003Cspan class=\"text-xs text-indigo-300 font-medium\">Overlay với pointer-events-none — click xuyên qua được\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,19000,19001,19009,19027,19054,19058,19077,19082,19101,19128,19156,19164,19168,19173,19192,19219,19247,19255,19259,19264,19283,19310,19338,19346,19350,19355,19374,19401,19429,19437,19441,19446,19465,19492,19520,19528,19532,19537,19556,19584,19612,19620,19624,19629,19648,19675,19703,19711,19715,19720,19739,19766,19794,19802,19810,19814,19819,19838,19866,19885,19904,19909,19917,19922,19941,19969,19977,19985,19993,20001],{"__ignoreMap":467},[471,19002,19003,19005,19007],{"class":473,"line":474},[471,19004,485],{"class":484},[471,19006,1419],{"class":488},[471,19008,508],{"class":484},[471,19010,19011,19013,19015,19017,19019,19021,19023,19025],{"class":473,"line":481},[471,19012,744],{"class":484},[471,19014,725],{"class":488},[471,19016,493],{"class":492},[471,19018,496],{"class":484},[471,19020,499],{"class":484},[471,19022,6267],{"class":502},[471,19024,499],{"class":484},[471,19026,508],{"class":484},[471,19028,19029,19031,19033,19035,19037,19039,19041,19043,19045,19048,19050,19052],{"class":473,"line":511},[471,19030,1445],{"class":484},[471,19032,427],{"class":488},[471,19034,493],{"class":492},[471,19036,496],{"class":484},[471,19038,499],{"class":484},[471,19040,1456],{"class":502},[471,19042,499],{"class":484},[471,19044,651],{"class":484},[471,19046,19047],{"class":514},"Cursor States Reference",[471,19049,521],{"class":484},[471,19051,427],{"class":488},[471,19053,508],{"class":484},[471,19055,19056],{"class":473,"line":518},[471,19057,532],{"emptyLinePlaceholder":531},[471,19059,19060,19062,19064,19066,19068,19070,19073,19075],{"class":473,"line":528},[471,19061,1445],{"class":484},[471,19063,725],{"class":488},[471,19065,493],{"class":492},[471,19067,496],{"class":484},[471,19069,499],{"class":484},[471,19071,19072],{"class":502},"grid grid-cols-1 sm:grid-cols-2 gap-4",[471,19074,499],{"class":484},[471,19076,508],{"class":484},[471,19078,19079],{"class":473,"line":535},[471,19080,19081],{"class":477},"      \u003C!-- cursor-pointer -->\n",[471,19083,19084,19086,19088,19090,19092,19094,19097,19099],{"class":473,"line":541},[471,19085,1502],{"class":484},[471,19087,725],{"class":488},[471,19089,493],{"class":492},[471,19091,496],{"class":484},[471,19093,499],{"class":484},[471,19095,19096],{"class":502},"cursor-pointer p-4 bg-indigo-50 border border-indigo-200 rounded-lg hover:bg-indigo-100 transition-colors",[471,19098,499],{"class":484},[471,19100,508],{"class":484},[471,19102,19103,19105,19107,19109,19111,19113,19116,19118,19120,19122,19124,19126],{"class":473,"line":563},[471,19104,1584],{"class":484},[471,19106,453],{"class":488},[471,19108,493],{"class":492},[471,19110,496],{"class":484},[471,19112,499],{"class":484},[471,19114,19115],{"class":502},"text-sm font-medium text-indigo-900",[471,19117,499],{"class":484},[471,19119,651],{"class":484},[471,19121,18628],{"class":514},[471,19123,521],{"class":484},[471,19125,453],{"class":488},[471,19127,508],{"class":484},[471,19129,19130,19132,19134,19136,19138,19140,19143,19145,19147,19150,19152,19154],{"class":473,"line":568},[471,19131,1584],{"class":484},[471,19133,453],{"class":488},[471,19135,493],{"class":492},[471,19137,496],{"class":484},[471,19139,499],{"class":484},[471,19141,19142],{"class":502},"text-xs text-indigo-600 mt-1",[471,19144,499],{"class":484},[471,19146,651],{"class":484},[471,19148,19149],{"class":514},"Link, button, element clickable",[471,19151,521],{"class":484},[471,19153,453],{"class":488},[471,19155,508],{"class":484},[471,19157,19158,19160,19162],{"class":473,"line":574},[471,19159,1723],{"class":484},[471,19161,725],{"class":488},[471,19163,508],{"class":484},[471,19165,19166],{"class":473,"line":594},[471,19167,532],{"emptyLinePlaceholder":531},[471,19169,19170],{"class":473,"line":600},[471,19171,19172],{"class":477},"      \u003C!-- cursor-not-allowed -->\n",[471,19174,19175,19177,19179,19181,19183,19185,19188,19190],{"class":473,"line":609},[471,19176,1502],{"class":484},[471,19178,725],{"class":488},[471,19180,493],{"class":492},[471,19182,496],{"class":484},[471,19184,499],{"class":484},[471,19186,19187],{"class":502},"cursor-not-allowed p-4 bg-gray-50 border border-gray-200 rounded-lg",[471,19189,499],{"class":484},[471,19191,508],{"class":484},[471,19193,19194,19196,19198,19200,19202,19204,19207,19209,19211,19213,19215,19217],{"class":473,"line":614},[471,19195,1584],{"class":484},[471,19197,453],{"class":488},[471,19199,493],{"class":492},[471,19201,496],{"class":484},[471,19203,499],{"class":484},[471,19205,19206],{"class":502},"text-sm font-medium text-gray-500",[471,19208,499],{"class":484},[471,19210,651],{"class":484},[471,19212,18740],{"class":514},[471,19214,521],{"class":484},[471,19216,453],{"class":488},[471,19218,508],{"class":484},[471,19220,19221,19223,19225,19227,19229,19231,19234,19236,19238,19241,19243,19245],{"class":473,"line":620},[471,19222,1584],{"class":484},[471,19224,453],{"class":488},[471,19226,493],{"class":492},[471,19228,496],{"class":484},[471,19230,499],{"class":484},[471,19232,19233],{"class":502},"text-xs text-gray-400 mt-1",[471,19235,499],{"class":484},[471,19237,651],{"class":484},[471,19239,19240],{"class":514},"Disabled button \u002F input",[471,19242,521],{"class":484},[471,19244,453],{"class":488},[471,19246,508],{"class":484},[471,19248,19249,19251,19253],{"class":473,"line":663},[471,19250,1723],{"class":484},[471,19252,725],{"class":488},[471,19254,508],{"class":484},[471,19256,19257],{"class":473,"line":668},[471,19258,532],{"emptyLinePlaceholder":531},[471,19260,19261],{"class":473,"line":674},[471,19262,19263],{"class":477},"      \u003C!-- cursor-wait -->\n",[471,19265,19266,19268,19270,19272,19274,19276,19279,19281],{"class":473,"line":694},[471,19267,1502],{"class":484},[471,19269,725],{"class":488},[471,19271,493],{"class":492},[471,19273,496],{"class":484},[471,19275,499],{"class":484},[471,19277,19278],{"class":502},"cursor-wait p-4 bg-amber-50 border border-amber-200 rounded-lg",[471,19280,499],{"class":484},[471,19282,508],{"class":484},[471,19284,19285,19287,19289,19291,19293,19295,19298,19300,19302,19304,19306,19308],{"class":473,"line":700},[471,19286,1584],{"class":484},[471,19288,453],{"class":488},[471,19290,493],{"class":492},[471,19292,496],{"class":484},[471,19294,499],{"class":484},[471,19296,19297],{"class":502},"text-sm font-medium text-amber-900",[471,19299,499],{"class":484},[471,19301,651],{"class":484},[471,19303,18656],{"class":514},[471,19305,521],{"class":484},[471,19307,453],{"class":488},[471,19309,508],{"class":484},[471,19311,19312,19314,19316,19318,19320,19322,19325,19327,19329,19332,19334,19336],{"class":473,"line":709},[471,19313,1584],{"class":484},[471,19315,453],{"class":488},[471,19317,493],{"class":492},[471,19319,496],{"class":484},[471,19321,499],{"class":484},[471,19323,19324],{"class":502},"text-xs text-amber-600 mt-1",[471,19326,499],{"class":484},[471,19328,651],{"class":484},[471,19330,19331],{"class":514},"Đang xử lý, chờ đợi",[471,19333,521],{"class":484},[471,19335,453],{"class":488},[471,19337,508],{"class":484},[471,19339,19340,19342,19344],{"class":473,"line":714},[471,19341,1723],{"class":484},[471,19343,725],{"class":488},[471,19345,508],{"class":484},[471,19347,19348],{"class":473,"line":720},[471,19349,532],{"emptyLinePlaceholder":531},[471,19351,19352],{"class":473,"line":741},[471,19353,19354],{"class":477},"      \u003C!-- cursor-text -->\n",[471,19356,19357,19359,19361,19363,19365,19367,19370,19372],{"class":473,"line":772},[471,19358,1502],{"class":484},[471,19360,725],{"class":488},[471,19362,493],{"class":492},[471,19364,496],{"class":484},[471,19366,499],{"class":484},[471,19368,19369],{"class":502},"cursor-text p-4 bg-emerald-50 border border-emerald-200 rounded-lg",[471,19371,499],{"class":484},[471,19373,508],{"class":484},[471,19375,19376,19378,19380,19382,19384,19386,19389,19391,19393,19395,19397,19399],{"class":473,"line":816},[471,19377,1584],{"class":484},[471,19379,453],{"class":488},[471,19381,493],{"class":492},[471,19383,496],{"class":484},[471,19385,499],{"class":484},[471,19387,19388],{"class":502},"text-sm font-medium text-emerald-900",[471,19390,499],{"class":484},[471,19392,651],{"class":484},[471,19394,18684],{"class":514},[471,19396,521],{"class":484},[471,19398,453],{"class":488},[471,19400,508],{"class":484},[471,19402,19403,19405,19407,19409,19411,19413,19416,19418,19420,19423,19425,19427],{"class":473,"line":1833},[471,19404,1584],{"class":484},[471,19406,453],{"class":488},[471,19408,493],{"class":492},[471,19410,496],{"class":484},[471,19412,499],{"class":484},[471,19414,19415],{"class":502},"text-xs text-emerald-600 mt-1",[471,19417,499],{"class":484},[471,19419,651],{"class":484},[471,19421,19422],{"class":514},"Vùng text có thể chọn \u002F input",[471,19424,521],{"class":484},[471,19426,453],{"class":488},[471,19428,508],{"class":484},[471,19430,19431,19433,19435],{"class":473,"line":1883},[471,19432,1723],{"class":484},[471,19434,725],{"class":488},[471,19436,508],{"class":484},[471,19438,19439],{"class":473,"line":1893},[471,19440,532],{"emptyLinePlaceholder":531},[471,19442,19443],{"class":473,"line":1902},[471,19444,19445],{"class":477},"      \u003C!-- cursor-move -->\n",[471,19447,19448,19450,19452,19454,19456,19458,19461,19463],{"class":473,"line":1911},[471,19449,1502],{"class":484},[471,19451,725],{"class":488},[471,19453,493],{"class":492},[471,19455,496],{"class":484},[471,19457,499],{"class":484},[471,19459,19460],{"class":502},"cursor-move p-4 bg-purple-50 border border-purple-200 rounded-lg",[471,19462,499],{"class":484},[471,19464,508],{"class":484},[471,19466,19467,19469,19471,19473,19475,19477,19480,19482,19484,19486,19488,19490],{"class":473,"line":1921},[471,19468,1584],{"class":484},[471,19470,453],{"class":488},[471,19472,493],{"class":492},[471,19474,496],{"class":484},[471,19476,499],{"class":484},[471,19478,19479],{"class":502},"text-sm font-medium text-purple-900",[471,19481,499],{"class":484},[471,19483,651],{"class":484},[471,19485,18712],{"class":514},[471,19487,521],{"class":484},[471,19489,453],{"class":488},[471,19491,508],{"class":484},[471,19493,19494,19496,19498,19500,19502,19504,19507,19509,19511,19514,19516,19518],{"class":473,"line":1926},[471,19495,1584],{"class":484},[471,19497,453],{"class":488},[471,19499,493],{"class":492},[471,19501,496],{"class":484},[471,19503,499],{"class":484},[471,19505,19506],{"class":502},"text-xs text-purple-600 mt-1",[471,19508,499],{"class":484},[471,19510,651],{"class":484},[471,19512,19513],{"class":514},"Element có thể kéo thả",[471,19515,521],{"class":484},[471,19517,453],{"class":488},[471,19519,508],{"class":484},[471,19521,19522,19524,19526],{"class":473,"line":1932},[471,19523,1723],{"class":484},[471,19525,725],{"class":488},[471,19527,508],{"class":484},[471,19529,19530],{"class":473,"line":1951},[471,19531,532],{"emptyLinePlaceholder":531},[471,19533,19534],{"class":473,"line":1979},[471,19535,19536],{"class":477},"      \u003C!-- cursor-grab -->\n",[471,19538,19539,19541,19543,19545,19547,19549,19552,19554],{"class":473,"line":1984},[471,19540,1502],{"class":484},[471,19542,725],{"class":488},[471,19544,493],{"class":492},[471,19546,496],{"class":484},[471,19548,499],{"class":484},[471,19550,19551],{"class":502},"cursor-grab p-4 bg-rose-50 border border-rose-200 rounded-lg active:cursor-grabbing",[471,19553,499],{"class":484},[471,19555,508],{"class":484},[471,19557,19558,19560,19562,19564,19566,19568,19571,19573,19575,19578,19580,19582],{"class":473,"line":2000},[471,19559,1584],{"class":484},[471,19561,453],{"class":488},[471,19563,493],{"class":492},[471,19565,496],{"class":484},[471,19567,499],{"class":484},[471,19569,19570],{"class":502},"text-sm font-medium text-rose-900",[471,19572,499],{"class":484},[471,19574,651],{"class":484},[471,19576,19577],{"class":514},"cursor-grab (click để thấy grabbing)",[471,19579,521],{"class":484},[471,19581,453],{"class":488},[471,19583,508],{"class":484},[471,19585,19586,19588,19590,19592,19594,19596,19599,19601,19603,19606,19608,19610],{"class":473,"line":2006},[471,19587,1584],{"class":484},[471,19589,453],{"class":488},[471,19591,493],{"class":492},[471,19593,496],{"class":484},[471,19595,499],{"class":484},[471,19597,19598],{"class":502},"text-xs text-rose-600 mt-1",[471,19600,499],{"class":484},[471,19602,651],{"class":484},[471,19604,19605],{"class":514},"Drag handle, slider thumb",[471,19607,521],{"class":484},[471,19609,453],{"class":488},[471,19611,508],{"class":484},[471,19613,19614,19616,19618],{"class":473,"line":2012},[471,19615,1723],{"class":484},[471,19617,725],{"class":488},[471,19619,508],{"class":484},[471,19621,19622],{"class":473,"line":2018},[471,19623,532],{"emptyLinePlaceholder":531},[471,19625,19626],{"class":473,"line":2027},[471,19627,19628],{"class":477},"      \u003C!-- cursor-zoom-in -->\n",[471,19630,19631,19633,19635,19637,19639,19641,19644,19646],{"class":473,"line":2033},[471,19632,1502],{"class":484},[471,19634,725],{"class":488},[471,19636,493],{"class":492},[471,19638,496],{"class":484},[471,19640,499],{"class":484},[471,19642,19643],{"class":502},"cursor-zoom-in p-4 bg-cyan-50 border border-cyan-200 rounded-lg",[471,19645,499],{"class":484},[471,19647,508],{"class":484},[471,19649,19650,19652,19654,19656,19658,19660,19663,19665,19667,19669,19671,19673],{"class":473,"line":2042},[471,19651,1584],{"class":484},[471,19653,453],{"class":488},[471,19655,493],{"class":492},[471,19657,496],{"class":484},[471,19659,499],{"class":484},[471,19661,19662],{"class":502},"text-sm font-medium text-cyan-900",[471,19664,499],{"class":484},[471,19666,651],{"class":484},[471,19668,18768],{"class":514},[471,19670,521],{"class":484},[471,19672,453],{"class":488},[471,19674,508],{"class":484},[471,19676,19677,19679,19681,19683,19685,19687,19690,19692,19694,19697,19699,19701],{"class":473,"line":2051},[471,19678,1584],{"class":484},[471,19680,453],{"class":488},[471,19682,493],{"class":492},[471,19684,496],{"class":484},[471,19686,499],{"class":484},[471,19688,19689],{"class":502},"text-xs text-cyan-600 mt-1",[471,19691,499],{"class":484},[471,19693,651],{"class":484},[471,19695,19696],{"class":514},"Ảnh có thể phóng to",[471,19698,521],{"class":484},[471,19700,453],{"class":488},[471,19702,508],{"class":484},[471,19704,19705,19707,19709],{"class":473,"line":2056},[471,19706,1723],{"class":484},[471,19708,725],{"class":488},[471,19710,508],{"class":484},[471,19712,19713],{"class":473,"line":2062},[471,19714,532],{"emptyLinePlaceholder":531},[471,19716,19717],{"class":473,"line":2081},[471,19718,19719],{"class":477},"      \u003C!-- cursor-help -->\n",[471,19721,19722,19724,19726,19728,19730,19732,19735,19737],{"class":473,"line":2109},[471,19723,1502],{"class":484},[471,19725,725],{"class":488},[471,19727,493],{"class":492},[471,19729,496],{"class":484},[471,19731,499],{"class":484},[471,19733,19734],{"class":502},"cursor-help p-4 bg-teal-50 border border-teal-200 rounded-lg",[471,19736,499],{"class":484},[471,19738,508],{"class":484},[471,19740,19741,19743,19745,19747,19749,19751,19754,19756,19758,19760,19762,19764],{"class":473,"line":2114},[471,19742,1584],{"class":484},[471,19744,453],{"class":488},[471,19746,493],{"class":492},[471,19748,496],{"class":484},[471,19750,499],{"class":484},[471,19752,19753],{"class":502},"text-sm font-medium text-teal-900",[471,19755,499],{"class":484},[471,19757,651],{"class":484},[471,19759,18852],{"class":514},[471,19761,521],{"class":484},[471,19763,453],{"class":488},[471,19765,508],{"class":484},[471,19767,19768,19770,19772,19774,19776,19778,19781,19783,19785,19788,19790,19792],{"class":473,"line":2130},[471,19769,1584],{"class":484},[471,19771,453],{"class":488},[471,19773,493],{"class":492},[471,19775,496],{"class":484},[471,19777,499],{"class":484},[471,19779,19780],{"class":502},"text-xs text-teal-600 mt-1",[471,19782,499],{"class":484},[471,19784,651],{"class":484},[471,19786,19787],{"class":514},"Icon tooltip, trợ giúp",[471,19789,521],{"class":484},[471,19791,453],{"class":488},[471,19793,508],{"class":484},[471,19795,19796,19798,19800],{"class":473,"line":2136},[471,19797,1723],{"class":484},[471,19799,725],{"class":488},[471,19801,508],{"class":484},[471,19803,19804,19806,19808],{"class":473,"line":2142},[471,19805,1914],{"class":484},[471,19807,725],{"class":488},[471,19809,508],{"class":484},[471,19811,19812],{"class":473,"line":2148},[471,19813,532],{"emptyLinePlaceholder":531},[471,19815,19816],{"class":473,"line":2157},[471,19817,19818],{"class":477},"    \u003C!-- pointer-events demo -->\n",[471,19820,19821,19823,19825,19827,19829,19831,19834,19836],{"class":473,"line":2163},[471,19822,1445],{"class":484},[471,19824,725],{"class":488},[471,19826,493],{"class":492},[471,19828,496],{"class":484},[471,19830,499],{"class":484},[471,19832,19833],{"class":502},"mt-8 p-6 bg-gray-900 rounded-xl text-white",[471,19835,499],{"class":484},[471,19837,508],{"class":484},[471,19839,19840,19842,19844,19846,19848,19850,19853,19855,19857,19860,19862,19864],{"class":473,"line":2172},[471,19841,1502],{"class":484},[471,19843,824],{"class":488},[471,19845,493],{"class":492},[471,19847,496],{"class":484},[471,19849,499],{"class":484},[471,19851,19852],{"class":502},"text-lg font-semibold mb-3",[471,19854,499],{"class":484},[471,19856,651],{"class":484},[471,19858,19859],{"class":514},"pointer-events Demo",[471,19861,521],{"class":484},[471,19863,824],{"class":488},[471,19865,508],{"class":484},[471,19867,19868,19870,19872,19874,19876,19878,19881,19883],{"class":473,"line":2181},[471,19869,1502],{"class":484},[471,19871,725],{"class":488},[471,19873,493],{"class":492},[471,19875,496],{"class":484},[471,19877,499],{"class":484},[471,19879,19880],{"class":502},"relative p-4 bg-gray-800 rounded-lg",[471,19882,499],{"class":484},[471,19884,508],{"class":484},[471,19886,19887,19889,19891,19893,19895,19897,19900,19902],{"class":473,"line":2186},[471,19888,1584],{"class":484},[471,19890,453],{"class":488},[471,19892,493],{"class":492},[471,19894,496],{"class":484},[471,19896,499],{"class":484},[471,19898,19899],{"class":502},"text-sm text-gray-300",[471,19901,499],{"class":484},[471,19903,508],{"class":484},[471,19905,19906],{"class":473,"line":2192},[471,19907,19908],{"class":514},"          Text này nằm phía dưới overlay trong suốt\n",[471,19910,19911,19913,19915],{"class":473,"line":2211},[471,19912,1714],{"class":484},[471,19914,453],{"class":488},[471,19916,508],{"class":484},[471,19918,19919],{"class":473,"line":2239},[471,19920,19921],{"class":477},"        \u003C!-- Overlay không chặn click -->\n",[471,19923,19924,19926,19928,19930,19932,19934,19937,19939],{"class":473,"line":2244},[471,19925,1584],{"class":484},[471,19927,725],{"class":488},[471,19929,493],{"class":492},[471,19931,496],{"class":484},[471,19933,499],{"class":484},[471,19935,19936],{"class":502},"absolute inset-0 bg-indigo-500\u002F20 pointer-events-none rounded-lg flex items-center justify-center",[471,19938,499],{"class":484},[471,19940,508],{"class":484},[471,19942,19943,19945,19947,19949,19951,19953,19956,19958,19960,19963,19965,19967],{"class":473,"line":2260},[471,19944,1657],{"class":484},[471,19946,471],{"class":488},[471,19948,493],{"class":492},[471,19950,496],{"class":484},[471,19952,499],{"class":484},[471,19954,19955],{"class":502},"text-xs text-indigo-300 font-medium",[471,19957,499],{"class":484},[471,19959,651],{"class":484},[471,19961,19962],{"class":514},"Overlay với pointer-events-none — click xuyên qua được",[471,19964,521],{"class":484},[471,19966,471],{"class":488},[471,19968,508],{"class":484},[471,19970,19971,19973,19975],{"class":473,"line":2266},[471,19972,1714],{"class":484},[471,19974,725],{"class":488},[471,19976,508],{"class":484},[471,19978,19979,19981,19983],{"class":473,"line":2272},[471,19980,1723],{"class":484},[471,19982,725],{"class":488},[471,19984,508],{"class":484},[471,19986,19987,19989,19991],{"class":473,"line":2278},[471,19988,1914],{"class":484},[471,19990,725],{"class":488},[471,19992,508],{"class":484},[471,19994,19995,19997,19999],{"class":473,"line":2287},[471,19996,885],{"class":484},[471,19998,725],{"class":488},[471,20000,508],{"class":484},[471,20002,20003,20005,20007],{"class":473,"line":2293},[471,20004,521],{"class":484},[471,20006,1419],{"class":488},[471,20008,508],{"class":484},[5602,20010],{},[427,20012,20014],{"id":20013},"_8-comprehensive-exercise-interactive-components","8. COMPREHENSIVE EXERCISE — Interactive Components",[1230,20016,20019,20020,20023],{"color":20017,"icon":20018},"warning","i-lucide-star","⭐ ",[457,20021,20022],{},"Tổng hợp:"," Các bài tập dưới đây kết hợp nhiều kiến thức đã học — states, transitions, transforms, animations — để xây dựng component tương tác hoàn chỉnh thường gặp trong dự án thực tế.",[824,20025,20027],{"id":20026},"bài-tập-19-accordion-collapsible-faq-section-transition-rotate","Bài tập 19: Accordion (collapsible FAQ section) — transition + rotate",[453,20029,20030,20032],{},[457,20031,1404],{}," FAQ accordion với:",[20034,20035,20036,20040,20043,20046],"ul",{},[20037,20038,20039],"li",{},"Click để mở\u002Fđóng",[20037,20041,20042],{},"Nội dung trượt xuống mượt (max-height transition)",[20037,20044,20045],{},"Icon mũi tên xoay 180deg khi mở",[20037,20047,20048],{},"Chỉ 1 item mở tại 1 thời điểm",[462,20050,20052],{"className":1408,"code":20051,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-2xl mx-auto p-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-8\">Câu hỏi thường gặp\u003C\u002Fh2>\n\n    \u003Cdiv class=\"space-y-3\">\n      \u003Cdiv\n        v-for=\"(faq, index) in faqs\"\n        :key=\"index\"\n        class=\"bg-white rounded-xl border border-gray-200 overflow-hidden\n               transition-shadow duration-300\"\n        :class=\"{ 'shadow-md border-gray-300': activeIndex === index }\">\n        \u003C!-- Header -->\n        \u003Cbutton\n          @click=\"toggle(index)\"\n          class=\"w-full flex items-center justify-between px-6 py-4 text-left\n                 hover:bg-gray-50 transition-colors duration-200\">\n          \u003Cspan class=\"text-base font-semibold text-gray-900 pr-4\">\n            {{ faq.question }}\n          \u003C\u002Fspan>\n          \u003C!-- Icon xoay -->\n          \u003Csvg\n            class=\"w-5 h-5 text-gray-400 flex-shrink-0 transition-transform duration-300\"\n            :class=\"{ 'rotate-180': activeIndex === index }\"\n            fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" \u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fbutton>\n\n        \u003C!-- Content (collapsible) -->\n        \u003Cdiv\n          class=\"transition-all duration-300 ease-in-out overflow-hidden\"\n          :style=\"{ maxHeight: activeIndex === index ? $refs[`content-${index}`]?.scrollHeight + 'px' : '0px' }\">\n          \u003Cdiv :ref=\"`content-${index}`\" class=\"px-6 pb-5\">\n            \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n              {{ faq.answer }}\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\nconst activeIndex = ref\u003Cnumber | null>(null)\n\nconst faqs = [\n  {\n    question: 'Tailwind CSS có phù hợp cho dự án lớn không?',\n    answer: 'Có. Tailwind rất phù hợp cho dự án lớn nhờ tính nhất quán của design system. Bạn có thể extract component (Vue\u002FReact) để tái sử dụng, dùng @apply cho pattern lặp lại, và bundle size chỉ giữ những class bạn thực sự dùng. Nhiều công ty lớn như GitHub, Shopify, NASA đều dùng Tailwind.'\n  },\n  {\n    question: 'Làm sao để custom theme trong Tailwind v4?',\n    answer: 'Trong Tailwind v4, bạn dùng CSS-based configuration với @theme directive trong file CSS chính. Không cần tailwind.config.js nữa. Định nghĩa custom colors, fonts, spacing, shadows... trực tiếp trong @theme block, tận dụng CSS cascade và CSS variables. Cách này type-safe hơn và dễ maintain hơn so với config JS.'\n  },\n  {\n    question: 'Tailwind có hỗ trợ dark mode không?',\n    answer: 'Có, Tailwind hỗ trợ dark mode qua variant dark:. Mặc định dùng media query prefers-color-scheme, hoặc bạn có thể config thành class-based (thêm class=\"dark\" vào html element). Tất cả utility đều có thể dùng với dark: prefix — vd: dark:bg-gray-900 dark:text-white.'\n  },\n  {\n    question: 'Khác biệt chính giữa Tailwind v3 và v4 là gì?',\n    answer: 'Tailwind v4 chuyển sang CSS-based configuration (bỏ tailwind.config.js), dùng OKLCH color space (perceptually uniform, P3 wide gamut), build nhanh hơn nhờ Rust-based engine (Oxide), hỗ trợ 3D transforms, radial\u002Fconic gradients, inset-shadow\u002Finset-ring, user-valid\u002Fuser-invalid states, và nhiều cải tiến về variant như not-*, inert:.'\n  }\n]\n\nfunction toggle(index: number) {\n  activeIndex.value = activeIndex.value === index ? null : index\n}\n\u003C\u002Fscript>\n",[432,20053,20054,20062,20081,20108,20112,20131,20137,20151,20165,20176,20183,20198,20203,20209,20222,20233,20242,20261,20266,20274,20279,20285,20298,20312,20347,20395,20403,20411,20415,20420,20426,20439,20455,20486,20504,20509,20517,20525,20533,20541,20549,20557,20565,20569,20589,20607,20611,20642,20646,20658,20663,20680,20694,20699,20703,20718,20731,20735,20739,20754,20767,20771,20775,20790,20803,20807,20811,20815,20835,20870,20874],{"__ignoreMap":467},[471,20055,20056,20058,20060],{"class":473,"line":474},[471,20057,485],{"class":484},[471,20059,1419],{"class":488},[471,20061,508],{"class":484},[471,20063,20064,20066,20068,20070,20072,20074,20077,20079],{"class":473,"line":481},[471,20065,744],{"class":484},[471,20067,725],{"class":488},[471,20069,493],{"class":492},[471,20071,496],{"class":484},[471,20073,499],{"class":484},[471,20075,20076],{"class":502},"max-w-2xl mx-auto p-8",[471,20078,499],{"class":484},[471,20080,508],{"class":484},[471,20082,20083,20085,20087,20089,20091,20093,20095,20097,20099,20102,20104,20106],{"class":473,"line":511},[471,20084,1445],{"class":484},[471,20086,427],{"class":488},[471,20088,493],{"class":492},[471,20090,496],{"class":484},[471,20092,499],{"class":484},[471,20094,2964],{"class":502},[471,20096,499],{"class":484},[471,20098,651],{"class":484},[471,20100,20101],{"class":514},"Câu hỏi thường gặp",[471,20103,521],{"class":484},[471,20105,427],{"class":488},[471,20107,508],{"class":484},[471,20109,20110],{"class":473,"line":518},[471,20111,532],{"emptyLinePlaceholder":531},[471,20113,20114,20116,20118,20120,20122,20124,20127,20129],{"class":473,"line":528},[471,20115,1445],{"class":484},[471,20117,725],{"class":488},[471,20119,493],{"class":492},[471,20121,496],{"class":484},[471,20123,499],{"class":484},[471,20125,20126],{"class":502},"space-y-3",[471,20128,499],{"class":484},[471,20130,508],{"class":484},[471,20132,20133,20135],{"class":473,"line":535},[471,20134,1502],{"class":484},[471,20136,6937],{"class":488},[471,20138,20139,20142,20144,20146,20149],{"class":473,"line":541},[471,20140,20141],{"class":492},"        v-for",[471,20143,496],{"class":484},[471,20145,499],{"class":484},[471,20147,20148],{"class":502},"(faq, index) in faqs",[471,20150,2436],{"class":484},[471,20152,20153,20156,20158,20160,20163],{"class":473,"line":563},[471,20154,20155],{"class":492},"        :key",[471,20157,496],{"class":484},[471,20159,499],{"class":484},[471,20161,20162],{"class":502},"index",[471,20164,2436],{"class":484},[471,20166,20167,20169,20171,20173],{"class":473,"line":568},[471,20168,3795],{"class":492},[471,20170,496],{"class":484},[471,20172,499],{"class":484},[471,20174,20175],{"class":502},"bg-white rounded-xl border border-gray-200 overflow-hidden\n",[471,20177,20178,20181],{"class":473,"line":574},[471,20179,20180],{"class":502},"               transition-shadow duration-300",[471,20182,2436],{"class":484},[471,20184,20185,20187,20189,20191,20194,20196],{"class":473,"line":594},[471,20186,6955],{"class":492},[471,20188,496],{"class":484},[471,20190,499],{"class":484},[471,20192,20193],{"class":502},"{ 'shadow-md border-gray-300': activeIndex === index }",[471,20195,499],{"class":484},[471,20197,508],{"class":484},[471,20199,20200],{"class":473,"line":600},[471,20201,20202],{"class":477},"        \u003C!-- Header -->\n",[471,20204,20205,20207],{"class":473,"line":609},[471,20206,1584],{"class":484},[471,20208,3774],{"class":488},[471,20210,20211,20213,20215,20217,20220],{"class":473,"line":614},[471,20212,10716],{"class":492},[471,20214,496],{"class":484},[471,20216,499],{"class":484},[471,20218,20219],{"class":502},"toggle(index)",[471,20221,2436],{"class":484},[471,20223,20224,20226,20228,20230],{"class":473,"line":620},[471,20225,2455],{"class":492},[471,20227,496],{"class":484},[471,20229,499],{"class":484},[471,20231,20232],{"class":502},"w-full flex items-center justify-between px-6 py-4 text-left\n",[471,20234,20235,20238,20240],{"class":473,"line":663},[471,20236,20237],{"class":502},"                 hover:bg-gray-50 transition-colors duration-200",[471,20239,499],{"class":484},[471,20241,508],{"class":484},[471,20243,20244,20246,20248,20250,20252,20254,20257,20259],{"class":473,"line":668},[471,20245,1657],{"class":484},[471,20247,471],{"class":488},[471,20249,493],{"class":492},[471,20251,496],{"class":484},[471,20253,499],{"class":484},[471,20255,20256],{"class":502},"text-base font-semibold text-gray-900 pr-4",[471,20258,499],{"class":484},[471,20260,508],{"class":484},[471,20262,20263],{"class":473,"line":674},[471,20264,20265],{"class":514},"            {{ faq.question }}\n",[471,20267,20268,20270,20272],{"class":473,"line":694},[471,20269,1886],{"class":484},[471,20271,471],{"class":488},[471,20273,508],{"class":484},[471,20275,20276],{"class":473,"line":700},[471,20277,20278],{"class":477},"          \u003C!-- Icon xoay -->\n",[471,20280,20281,20283],{"class":473,"line":709},[471,20282,1657],{"class":484},[471,20284,7816],{"class":488},[471,20286,20287,20289,20291,20293,20296],{"class":473,"line":714},[471,20288,7102],{"class":492},[471,20290,496],{"class":484},[471,20292,499],{"class":484},[471,20294,20295],{"class":502},"w-5 h-5 text-gray-400 flex-shrink-0 transition-transform duration-300",[471,20297,2436],{"class":484},[471,20299,20300,20303,20305,20307,20310],{"class":473,"line":720},[471,20301,20302],{"class":492},"            :class",[471,20304,496],{"class":484},[471,20306,499],{"class":484},[471,20308,20309],{"class":502},"{ 'rotate-180': activeIndex === index }",[471,20311,2436],{"class":484},[471,20313,20314,20317,20319,20321,20323,20325,20327,20329,20331,20333,20335,20337,20339,20341,20343,20345],{"class":473,"line":741},[471,20315,20316],{"class":492},"            fill",[471,20318,496],{"class":484},[471,20320,499],{"class":484},[471,20322,1624],{"class":502},[471,20324,499],{"class":484},[471,20326,1629],{"class":492},[471,20328,496],{"class":484},[471,20330,499],{"class":484},[471,20332,1636],{"class":502},[471,20334,499],{"class":484},[471,20336,1641],{"class":492},[471,20338,496],{"class":484},[471,20340,499],{"class":484},[471,20342,1648],{"class":502},[471,20344,499],{"class":484},[471,20346,508],{"class":484},[471,20348,20349,20351,20353,20355,20357,20359,20361,20363,20365,20367,20369,20371,20373,20375,20377,20379,20381,20383,20385,20387,20389,20391,20393],{"class":473,"line":772},[471,20350,1836],{"class":484},[471,20352,1660],{"class":488},[471,20354,1663],{"class":492},[471,20356,496],{"class":484},[471,20358,499],{"class":484},[471,20360,1670],{"class":502},[471,20362,499],{"class":484},[471,20364,1675],{"class":492},[471,20366,496],{"class":484},[471,20368,499],{"class":484},[471,20370,1670],{"class":502},[471,20372,499],{"class":484},[471,20374,1686],{"class":492},[471,20376,496],{"class":484},[471,20378,499],{"class":484},[471,20380,1693],{"class":502},[471,20382,499],{"class":484},[471,20384,1698],{"class":492},[471,20386,496],{"class":484},[471,20388,499],{"class":484},[471,20390,7923],{"class":502},[471,20392,499],{"class":484},[471,20394,560],{"class":484},[471,20396,20397,20399,20401],{"class":473,"line":816},[471,20398,1886],{"class":484},[471,20400,928],{"class":488},[471,20402,508],{"class":484},[471,20404,20405,20407,20409],{"class":473,"line":1833},[471,20406,1714],{"class":484},[471,20408,489],{"class":488},[471,20410,508],{"class":484},[471,20412,20413],{"class":473,"line":1883},[471,20414,532],{"emptyLinePlaceholder":531},[471,20416,20417],{"class":473,"line":1893},[471,20418,20419],{"class":477},"        \u003C!-- Content (collapsible) -->\n",[471,20421,20422,20424],{"class":473,"line":1902},[471,20423,1584],{"class":484},[471,20425,6937],{"class":488},[471,20427,20428,20430,20432,20434,20437],{"class":473,"line":1911},[471,20429,2455],{"class":492},[471,20431,496],{"class":484},[471,20433,499],{"class":484},[471,20435,20436],{"class":502},"transition-all duration-300 ease-in-out overflow-hidden",[471,20438,2436],{"class":484},[471,20440,20441,20444,20446,20448,20451,20453],{"class":473,"line":1921},[471,20442,20443],{"class":492},"          :style",[471,20445,496],{"class":484},[471,20447,499],{"class":484},[471,20449,20450],{"class":502},"{ maxHeight: activeIndex === index ? $refs[`content-${index}`]?.scrollHeight + 'px' : '0px' }",[471,20452,499],{"class":484},[471,20454,508],{"class":484},[471,20456,20457,20459,20461,20464,20466,20468,20471,20473,20475,20477,20479,20482,20484],{"class":473,"line":1926},[471,20458,1657],{"class":484},[471,20460,725],{"class":488},[471,20462,20463],{"class":492}," :ref",[471,20465,496],{"class":484},[471,20467,499],{"class":484},[471,20469,20470],{"class":502},"`content-${index}`",[471,20472,499],{"class":484},[471,20474,493],{"class":492},[471,20476,496],{"class":484},[471,20478,499],{"class":484},[471,20480,20481],{"class":502},"px-6 pb-5",[471,20483,499],{"class":484},[471,20485,508],{"class":484},[471,20487,20488,20490,20492,20494,20496,20498,20500,20502],{"class":473,"line":1932},[471,20489,1836],{"class":484},[471,20491,453],{"class":488},[471,20493,493],{"class":492},[471,20495,496],{"class":484},[471,20497,499],{"class":484},[471,20499,7176],{"class":502},[471,20501,499],{"class":484},[471,20503,508],{"class":484},[471,20505,20506],{"class":473,"line":1951},[471,20507,20508],{"class":514},"              {{ faq.answer }}\n",[471,20510,20511,20513,20515],{"class":473,"line":1979},[471,20512,4344],{"class":484},[471,20514,453],{"class":488},[471,20516,508],{"class":484},[471,20518,20519,20521,20523],{"class":473,"line":1984},[471,20520,1886],{"class":484},[471,20522,725],{"class":488},[471,20524,508],{"class":484},[471,20526,20527,20529,20531],{"class":473,"line":2000},[471,20528,1714],{"class":484},[471,20530,725],{"class":488},[471,20532,508],{"class":484},[471,20534,20535,20537,20539],{"class":473,"line":2006},[471,20536,1723],{"class":484},[471,20538,725],{"class":488},[471,20540,508],{"class":484},[471,20542,20543,20545,20547],{"class":473,"line":2012},[471,20544,1914],{"class":484},[471,20546,725],{"class":488},[471,20548,508],{"class":484},[471,20550,20551,20553,20555],{"class":473,"line":2018},[471,20552,885],{"class":484},[471,20554,725],{"class":488},[471,20556,508],{"class":484},[471,20558,20559,20561,20563],{"class":473,"line":2027},[471,20560,521],{"class":484},[471,20562,1419],{"class":488},[471,20564,508],{"class":484},[471,20566,20567],{"class":473,"line":2033},[471,20568,532],{"emptyLinePlaceholder":531},[471,20570,20571,20573,20575,20577,20579,20581,20583,20585,20587],{"class":473,"line":2042},[471,20572,485],{"class":484},[471,20574,7370],{"class":488},[471,20576,7373],{"class":492},[471,20578,7376],{"class":492},[471,20580,496],{"class":484},[471,20582,499],{"class":484},[471,20584,7383],{"class":502},[471,20586,499],{"class":484},[471,20588,508],{"class":484},[471,20590,20591,20593,20595,20597,20599,20601,20603,20605],{"class":473,"line":2051},[471,20592,7393],{"class":7392},[471,20594,7396],{"class":484},[471,20596,7399],{"class":514},[471,20598,7413],{"class":484},[471,20600,7416],{"class":7392},[471,20602,7419],{"class":484},[471,20604,1410],{"class":502},[471,20606,7424],{"class":484},[471,20608,20609],{"class":473,"line":2056},[471,20610,532],{"emptyLinePlaceholder":531},[471,20612,20613,20615,20618,20620,20622,20624,20627,20630,20633,20635,20637,20640],{"class":473,"line":2062},[471,20614,7433],{"class":492},[471,20616,20617],{"class":514}," activeIndex ",[471,20619,496],{"class":484},[471,20621,7399],{"class":7441},[471,20623,485],{"class":484},[471,20625,20626],{"class":12009},"number",[471,20628,20629],{"class":484}," |",[471,20631,20632],{"class":12009}," null",[471,20634,651],{"class":484},[471,20636,7444],{"class":514},[471,20638,20639],{"class":484},"null",[471,20641,7451],{"class":514},[471,20643,20644],{"class":473,"line":2081},[471,20645,532],{"emptyLinePlaceholder":531},[471,20647,20648,20650,20653,20655],{"class":473,"line":2109},[471,20649,7433],{"class":492},[471,20651,20652],{"class":514}," faqs ",[471,20654,496],{"class":484},[471,20656,20657],{"class":514}," [\n",[471,20659,20660],{"class":473,"line":2114},[471,20661,20662],{"class":484},"  {\n",[471,20664,20665,20668,20670,20672,20675,20677],{"class":473,"line":2130},[471,20666,20667],{"class":488},"    question",[471,20669,1243],{"class":484},[471,20671,7419],{"class":484},[471,20673,20674],{"class":502},"Tailwind CSS có phù hợp cho dự án lớn không?",[471,20676,8202],{"class":484},[471,20678,20679],{"class":484},",\n",[471,20681,20682,20685,20687,20689,20692],{"class":473,"line":2136},[471,20683,20684],{"class":488},"    answer",[471,20686,1243],{"class":484},[471,20688,7419],{"class":484},[471,20690,20691],{"class":502},"Có. Tailwind rất phù hợp cho dự án lớn nhờ tính nhất quán của design system. Bạn có thể extract component (Vue\u002FReact) để tái sử dụng, dùng @apply cho pattern lặp lại, và bundle size chỉ giữ những class bạn thực sự dùng. Nhiều công ty lớn như GitHub, Shopify, NASA đều dùng Tailwind.",[471,20693,7424],{"class":484},[471,20695,20696],{"class":473,"line":2142},[471,20697,20698],{"class":484},"  },\n",[471,20700,20701],{"class":473,"line":2148},[471,20702,20662],{"class":484},[471,20704,20705,20707,20709,20711,20714,20716],{"class":473,"line":2157},[471,20706,20667],{"class":488},[471,20708,1243],{"class":484},[471,20710,7419],{"class":484},[471,20712,20713],{"class":502},"Làm sao để custom theme trong Tailwind v4?",[471,20715,8202],{"class":484},[471,20717,20679],{"class":484},[471,20719,20720,20722,20724,20726,20729],{"class":473,"line":2163},[471,20721,20684],{"class":488},[471,20723,1243],{"class":484},[471,20725,7419],{"class":484},[471,20727,20728],{"class":502},"Trong Tailwind v4, bạn dùng CSS-based configuration với @theme directive trong file CSS chính. Không cần tailwind.config.js nữa. Định nghĩa custom colors, fonts, spacing, shadows... trực tiếp trong @theme block, tận dụng CSS cascade và CSS variables. Cách này type-safe hơn và dễ maintain hơn so với config JS.",[471,20730,7424],{"class":484},[471,20732,20733],{"class":473,"line":2172},[471,20734,20698],{"class":484},[471,20736,20737],{"class":473,"line":2181},[471,20738,20662],{"class":484},[471,20740,20741,20743,20745,20747,20750,20752],{"class":473,"line":2186},[471,20742,20667],{"class":488},[471,20744,1243],{"class":484},[471,20746,7419],{"class":484},[471,20748,20749],{"class":502},"Tailwind có hỗ trợ dark mode không?",[471,20751,8202],{"class":484},[471,20753,20679],{"class":484},[471,20755,20756,20758,20760,20762,20765],{"class":473,"line":2192},[471,20757,20684],{"class":488},[471,20759,1243],{"class":484},[471,20761,7419],{"class":484},[471,20763,20764],{"class":502},"Có, Tailwind hỗ trợ dark mode qua variant dark:. Mặc định dùng media query prefers-color-scheme, hoặc bạn có thể config thành class-based (thêm class=\"dark\" vào html element). Tất cả utility đều có thể dùng với dark: prefix — vd: dark:bg-gray-900 dark:text-white.",[471,20766,7424],{"class":484},[471,20768,20769],{"class":473,"line":2211},[471,20770,20698],{"class":484},[471,20772,20773],{"class":473,"line":2239},[471,20774,20662],{"class":484},[471,20776,20777,20779,20781,20783,20786,20788],{"class":473,"line":2244},[471,20778,20667],{"class":488},[471,20780,1243],{"class":484},[471,20782,7419],{"class":484},[471,20784,20785],{"class":502},"Khác biệt chính giữa Tailwind v3 và v4 là gì?",[471,20787,8202],{"class":484},[471,20789,20679],{"class":484},[471,20791,20792,20794,20796,20798,20801],{"class":473,"line":2260},[471,20793,20684],{"class":488},[471,20795,1243],{"class":484},[471,20797,7419],{"class":484},[471,20799,20800],{"class":502},"Tailwind v4 chuyển sang CSS-based configuration (bỏ tailwind.config.js), dùng OKLCH color space (perceptually uniform, P3 wide gamut), build nhanh hơn nhờ Rust-based engine (Oxide), hỗ trợ 3D transforms, radial\u002Fconic gradients, inset-shadow\u002Finset-ring, user-valid\u002Fuser-invalid states, và nhiều cải tiến về variant như not-*, inert:.",[471,20802,7424],{"class":484},[471,20804,20805],{"class":473,"line":2266},[471,20806,7678],{"class":484},[471,20808,20809],{"class":473,"line":2272},[471,20810,8246],{"class":514},[471,20812,20813],{"class":473,"line":2278},[471,20814,532],{"emptyLinePlaceholder":531},[471,20816,20817,20819,20822,20824,20826,20828,20831,20833],{"class":473,"line":2287},[471,20818,7477],{"class":492},[471,20820,20821],{"class":7441}," toggle",[471,20823,7444],{"class":484},[471,20825,20162],{"class":7604},[471,20827,1243],{"class":484},[471,20829,20830],{"class":12009}," number",[471,20832,451],{"class":484},[471,20834,7486],{"class":484},[471,20836,20837,20840,20842,20844,20846,20849,20851,20853,20856,20859,20862,20864,20867],{"class":473,"line":2293},[471,20838,20839],{"class":514},"  activeIndex",[471,20841,2917],{"class":484},[471,20843,7496],{"class":514},[471,20845,7499],{"class":484},[471,20847,20848],{"class":514}," activeIndex",[471,20850,2917],{"class":484},[471,20852,7496],{"class":514},[471,20854,20855],{"class":484}," ===",[471,20857,20858],{"class":514}," index",[471,20860,20861],{"class":484}," ?",[471,20863,20632],{"class":484},[471,20865,20866],{"class":484}," :",[471,20868,20869],{"class":514}," index\n",[471,20871,20872],{"class":473,"line":2302},[471,20873,7549],{"class":484},[471,20875,20876,20878,20880],{"class":473,"line":2311},[471,20877,521],{"class":484},[471,20879,7370],{"class":488},[471,20881,508],{"class":484},[824,20883,20885],{"id":20884},"bài-tập-20-tabs-component-active-state-content-switching","Bài tập 20: Tabs component — active state + content switching",[453,20887,20888,20890],{},[457,20889,1404],{}," Tabs component với:",[20034,20892,20893,20896,20899],{},[20037,20894,20895],{},"Tab active có style khác biệt (bg-white, shadow, border)",[20037,20897,20898],{},"Indicator trượt khi chuyển tab",[20037,20900,20901],{},"Nội dung chuyển đổi với fade transition",[462,20903,20905],{"className":1408,"code":20904,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-2xl mx-auto p-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-8\">Tabs Component\u003C\u002Fh2>\n\n    \u003C!-- Tab buttons -->\n    \u003Cdiv class=\"relative flex bg-gray-100 rounded-xl p-1\">\n      \u003C!-- Sliding indicator -->\n      \u003Cdiv\n        class=\"absolute top-1 bottom-1 bg-white rounded-lg shadow-sm border border-gray-200 transition-all duration-300 ease-in-out\"\n        :style=\"indicatorStyle\">\n      \u003C\u002Fdiv>\n\n      \u003Cbutton\n        v-for=\"(tab, index) in tabs\"\n        :key=\"tab.id\"\n        @click=\"activeTab = tab.id\"\n        class=\"relative z-10 flex-1 py-2.5 text-sm font-medium rounded-lg transition-colors duration-200\"\n        :class=\"activeTab === tab.id ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700'\">\n        {{ tab.label }}\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Tab content -->\n    \u003Cdiv class=\"mt-6 relative\">\n      \u003Cdiv\n        v-for=\"tab in tabs\"\n        :key=\"tab.id\"\n        class=\"transition-all duration-300\"\n        :class=\"activeTab === tab.id\n          ? 'opacity-100 translate-y-0 relative'\n          : 'opacity-0 translate-y-2 absolute inset-0 pointer-events-none'\">\n        \u003Cdiv class=\"p-6 bg-white rounded-xl border border-gray-200 shadow-sm\">\n          \u003Ch3 class=\"text-lg font-semibold text-gray-900\">{{ tab.title }}\u003C\u002Fh3>\n          \u003Cp class=\"mt-3 text-sm text-gray-600 leading-relaxed\">{{ tab.content }}\u003C\u002Fp>\n\n          \u003Cdiv v-if=\"tab.stats\" class=\"mt-6 grid grid-cols-3 gap-4\">\n            \u003Cdiv v-for=\"stat in tab.stats\" :key=\"stat.label\" class=\"text-center p-3 bg-gray-50 rounded-lg\">\n              \u003Cp class=\"text-2xl font-bold text-gray-900\">{{ stat.value }}\u003C\u002Fp>\n              \u003Cp class=\"text-xs text-gray-500 mt-1\">{{ stat.label }}\u003C\u002Fp>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref, computed } from 'vue'\n\nconst activeTab = ref('overview')\n\nconst tabs = [\n  {\n    id: 'overview',\n    label: 'Tổng quan',\n    title: 'Tổng quan dự án',\n    content: 'Dự án được xây dựng với Nuxt 4 và Tailwind CSS v4, sử dụng kiến trúc hybrid rendering để tối ưu cả SEO và performance. Backend API được xây dựng trên Nitro server với PostgreSQL làm database chính.',\n    stats: [\n      { label: 'Thành viên', value: '12' },\n      { label: 'Sprint', value: '8' },\n      { label: 'Commits', value: '1.2k' }\n    ]\n  },\n  {\n    id: 'features',\n    label: 'Tính năng',\n    title: 'Tính năng chính',\n    content: 'Hệ thống bao gồm authentication với JWT, real-time notifications qua WebSocket, file upload với Cloudflare R2, full-text search với PostgreSQL, và admin dashboard để quản lý nội dung.',\n    stats: [\n      { label: 'Modules', value: '24' },\n      { label: 'API Routes', value: '56' },\n      { label: 'Components', value: '89' }\n    ]\n  },\n  {\n    id: 'tech',\n    label: 'Công nghệ',\n    title: 'Stack công nghệ',\n    content: 'Frontend: Nuxt 4 + Vue 3 Composition API + Tailwind CSS v4 + TypeScript. Backend: Nitro server + PostgreSQL + Redis. DevOps: Docker + GitHub Actions + Cloudflare Pages. Monitoring: Sentry + Grafana.',\n    stats: [\n      { label: 'Languages', value: '3' },\n      { label: 'Services', value: '7' },\n      { label: 'Uptime', value: '99.9%' }\n    ]\n  }\n]\n\nconst indicatorStyle = computed(() => {\n  const index = tabs.findIndex(t => t.id === activeTab.value)\n  const width = 100 \u002F tabs.length\n  return {\n    width: `${width}%`,\n    left: `${index * width}%`\n  }\n})\n\u003C\u002Fscript>\n",[432,20906,20907,20915,20933,20960,20964,20969,20988,20993,20999,21012,21028,21036,21040,21046,21059,21072,21085,21098,21113,21118,21126,21134,21138,21143,21162,21168,21181,21193,21205,21216,21221,21230,21249,21276,21304,21308,21338,21379,21407,21435,21443,21451,21459,21467,21475,21483,21491,21495,21515,21538,21542,21564,21568,21579,21583,21598,21613,21629,21645,21654,21688,21717,21748,21753,21757,21761,21776,21791,21806,21821,21829,21859,21889,21919,21923,21927,21931,21946,21961,21976,21991,21999,22028,22058,22088,22092,22096,22100,22104,22123,22166,22188,22195,22218,22242,22246,22252],{"__ignoreMap":467},[471,20908,20909,20911,20913],{"class":473,"line":474},[471,20910,485],{"class":484},[471,20912,1419],{"class":488},[471,20914,508],{"class":484},[471,20916,20917,20919,20921,20923,20925,20927,20929,20931],{"class":473,"line":481},[471,20918,744],{"class":484},[471,20920,725],{"class":488},[471,20922,493],{"class":492},[471,20924,496],{"class":484},[471,20926,499],{"class":484},[471,20928,20076],{"class":502},[471,20930,499],{"class":484},[471,20932,508],{"class":484},[471,20934,20935,20937,20939,20941,20943,20945,20947,20949,20951,20954,20956,20958],{"class":473,"line":511},[471,20936,1445],{"class":484},[471,20938,427],{"class":488},[471,20940,493],{"class":492},[471,20942,496],{"class":484},[471,20944,499],{"class":484},[471,20946,2964],{"class":502},[471,20948,499],{"class":484},[471,20950,651],{"class":484},[471,20952,20953],{"class":514},"Tabs Component",[471,20955,521],{"class":484},[471,20957,427],{"class":488},[471,20959,508],{"class":484},[471,20961,20962],{"class":473,"line":518},[471,20963,532],{"emptyLinePlaceholder":531},[471,20965,20966],{"class":473,"line":528},[471,20967,20968],{"class":477},"    \u003C!-- Tab buttons -->\n",[471,20970,20971,20973,20975,20977,20979,20981,20984,20986],{"class":473,"line":535},[471,20972,1445],{"class":484},[471,20974,725],{"class":488},[471,20976,493],{"class":492},[471,20978,496],{"class":484},[471,20980,499],{"class":484},[471,20982,20983],{"class":502},"relative flex bg-gray-100 rounded-xl p-1",[471,20985,499],{"class":484},[471,20987,508],{"class":484},[471,20989,20990],{"class":473,"line":541},[471,20991,20992],{"class":477},"      \u003C!-- Sliding indicator -->\n",[471,20994,20995,20997],{"class":473,"line":563},[471,20996,1502],{"class":484},[471,20998,6937],{"class":488},[471,21000,21001,21003,21005,21007,21010],{"class":473,"line":568},[471,21002,3795],{"class":492},[471,21004,496],{"class":484},[471,21006,499],{"class":484},[471,21008,21009],{"class":502},"absolute top-1 bottom-1 bg-white rounded-lg shadow-sm border border-gray-200 transition-all duration-300 ease-in-out",[471,21011,2436],{"class":484},[471,21013,21014,21017,21019,21021,21024,21026],{"class":473,"line":574},[471,21015,21016],{"class":492},"        :style",[471,21018,496],{"class":484},[471,21020,499],{"class":484},[471,21022,21023],{"class":502},"indicatorStyle",[471,21025,499],{"class":484},[471,21027,508],{"class":484},[471,21029,21030,21032,21034],{"class":473,"line":594},[471,21031,1723],{"class":484},[471,21033,725],{"class":488},[471,21035,508],{"class":484},[471,21037,21038],{"class":473,"line":600},[471,21039,532],{"emptyLinePlaceholder":531},[471,21041,21042,21044],{"class":473,"line":609},[471,21043,1502],{"class":484},[471,21045,3774],{"class":488},[471,21047,21048,21050,21052,21054,21057],{"class":473,"line":614},[471,21049,20141],{"class":492},[471,21051,496],{"class":484},[471,21053,499],{"class":484},[471,21055,21056],{"class":502},"(tab, index) in tabs",[471,21058,2436],{"class":484},[471,21060,21061,21063,21065,21067,21070],{"class":473,"line":620},[471,21062,20155],{"class":492},[471,21064,496],{"class":484},[471,21066,499],{"class":484},[471,21068,21069],{"class":502},"tab.id",[471,21071,2436],{"class":484},[471,21073,21074,21076,21078,21080,21083],{"class":473,"line":663},[471,21075,6969],{"class":492},[471,21077,496],{"class":484},[471,21079,499],{"class":484},[471,21081,21082],{"class":502},"activeTab = tab.id",[471,21084,2436],{"class":484},[471,21086,21087,21089,21091,21093,21096],{"class":473,"line":668},[471,21088,3795],{"class":492},[471,21090,496],{"class":484},[471,21092,499],{"class":484},[471,21094,21095],{"class":502},"relative z-10 flex-1 py-2.5 text-sm font-medium rounded-lg transition-colors duration-200",[471,21097,2436],{"class":484},[471,21099,21100,21102,21104,21106,21109,21111],{"class":473,"line":674},[471,21101,6955],{"class":492},[471,21103,496],{"class":484},[471,21105,499],{"class":484},[471,21107,21108],{"class":502},"activeTab === tab.id ? 'text-gray-900' : 'text-gray-500 hover:text-gray-700'",[471,21110,499],{"class":484},[471,21112,508],{"class":484},[471,21114,21115],{"class":473,"line":694},[471,21116,21117],{"class":514},"        {{ tab.label }}\n",[471,21119,21120,21122,21124],{"class":473,"line":700},[471,21121,1723],{"class":484},[471,21123,489],{"class":488},[471,21125,508],{"class":484},[471,21127,21128,21130,21132],{"class":473,"line":709},[471,21129,1914],{"class":484},[471,21131,725],{"class":488},[471,21133,508],{"class":484},[471,21135,21136],{"class":473,"line":714},[471,21137,532],{"emptyLinePlaceholder":531},[471,21139,21140],{"class":473,"line":720},[471,21141,21142],{"class":477},"    \u003C!-- Tab content -->\n",[471,21144,21145,21147,21149,21151,21153,21155,21158,21160],{"class":473,"line":741},[471,21146,1445],{"class":484},[471,21148,725],{"class":488},[471,21150,493],{"class":492},[471,21152,496],{"class":484},[471,21154,499],{"class":484},[471,21156,21157],{"class":502},"mt-6 relative",[471,21159,499],{"class":484},[471,21161,508],{"class":484},[471,21163,21164,21166],{"class":473,"line":772},[471,21165,1502],{"class":484},[471,21167,6937],{"class":488},[471,21169,21170,21172,21174,21176,21179],{"class":473,"line":816},[471,21171,20141],{"class":492},[471,21173,496],{"class":484},[471,21175,499],{"class":484},[471,21177,21178],{"class":502},"tab in tabs",[471,21180,2436],{"class":484},[471,21182,21183,21185,21187,21189,21191],{"class":473,"line":1833},[471,21184,20155],{"class":492},[471,21186,496],{"class":484},[471,21188,499],{"class":484},[471,21190,21069],{"class":502},[471,21192,2436],{"class":484},[471,21194,21195,21197,21199,21201,21203],{"class":473,"line":1883},[471,21196,3795],{"class":492},[471,21198,496],{"class":484},[471,21200,499],{"class":484},[471,21202,5875],{"class":502},[471,21204,2436],{"class":484},[471,21206,21207,21209,21211,21213],{"class":473,"line":1893},[471,21208,6955],{"class":492},[471,21210,496],{"class":484},[471,21212,499],{"class":484},[471,21214,21215],{"class":502},"activeTab === tab.id\n",[471,21217,21218],{"class":473,"line":1902},[471,21219,21220],{"class":502},"          ? 'opacity-100 translate-y-0 relative'\n",[471,21222,21223,21226,21228],{"class":473,"line":1911},[471,21224,21225],{"class":502},"          : 'opacity-0 translate-y-2 absolute inset-0 pointer-events-none'",[471,21227,499],{"class":484},[471,21229,508],{"class":484},[471,21231,21232,21234,21236,21238,21240,21242,21245,21247],{"class":473,"line":1921},[471,21233,1584],{"class":484},[471,21235,725],{"class":488},[471,21237,493],{"class":492},[471,21239,496],{"class":484},[471,21241,499],{"class":484},[471,21243,21244],{"class":502},"p-6 bg-white rounded-xl border border-gray-200 shadow-sm",[471,21246,499],{"class":484},[471,21248,508],{"class":484},[471,21250,21251,21253,21255,21257,21259,21261,21263,21265,21267,21270,21272,21274],{"class":473,"line":1926},[471,21252,1657],{"class":484},[471,21254,824],{"class":488},[471,21256,493],{"class":492},[471,21258,496],{"class":484},[471,21260,499],{"class":484},[471,21262,7065],{"class":502},[471,21264,499],{"class":484},[471,21266,651],{"class":484},[471,21268,21269],{"class":514},"{{ tab.title }}",[471,21271,521],{"class":484},[471,21273,824],{"class":488},[471,21275,508],{"class":484},[471,21277,21278,21280,21282,21284,21286,21288,21291,21293,21295,21298,21300,21302],{"class":473,"line":1932},[471,21279,1657],{"class":484},[471,21281,453],{"class":488},[471,21283,493],{"class":492},[471,21285,496],{"class":484},[471,21287,499],{"class":484},[471,21289,21290],{"class":502},"mt-3 text-sm text-gray-600 leading-relaxed",[471,21292,499],{"class":484},[471,21294,651],{"class":484},[471,21296,21297],{"class":514},"{{ tab.content }}",[471,21299,521],{"class":484},[471,21301,453],{"class":488},[471,21303,508],{"class":484},[471,21305,21306],{"class":473,"line":1951},[471,21307,532],{"emptyLinePlaceholder":531},[471,21309,21310,21312,21314,21316,21318,21320,21323,21325,21327,21329,21331,21334,21336],{"class":473,"line":1979},[471,21311,1657],{"class":484},[471,21313,725],{"class":488},[471,21315,6903],{"class":492},[471,21317,496],{"class":484},[471,21319,499],{"class":484},[471,21321,21322],{"class":502},"tab.stats",[471,21324,499],{"class":484},[471,21326,493],{"class":492},[471,21328,496],{"class":484},[471,21330,499],{"class":484},[471,21332,21333],{"class":502},"mt-6 grid grid-cols-3 gap-4",[471,21335,499],{"class":484},[471,21337,508],{"class":484},[471,21339,21340,21342,21344,21346,21348,21350,21353,21355,21357,21359,21361,21364,21366,21368,21370,21372,21375,21377],{"class":473,"line":1984},[471,21341,1836],{"class":484},[471,21343,725],{"class":488},[471,21345,18420],{"class":492},[471,21347,496],{"class":484},[471,21349,499],{"class":484},[471,21351,21352],{"class":502},"stat in tab.stats",[471,21354,499],{"class":484},[471,21356,18432],{"class":492},[471,21358,496],{"class":484},[471,21360,499],{"class":484},[471,21362,21363],{"class":502},"stat.label",[471,21365,499],{"class":484},[471,21367,493],{"class":492},[471,21369,496],{"class":484},[471,21371,499],{"class":484},[471,21373,21374],{"class":502},"text-center p-3 bg-gray-50 rounded-lg",[471,21376,499],{"class":484},[471,21378,508],{"class":484},[471,21380,21381,21383,21385,21387,21389,21391,21394,21396,21398,21401,21403,21405],{"class":473,"line":2000},[471,21382,4294],{"class":484},[471,21384,453],{"class":488},[471,21386,493],{"class":492},[471,21388,496],{"class":484},[471,21390,499],{"class":484},[471,21392,21393],{"class":502},"text-2xl font-bold text-gray-900",[471,21395,499],{"class":484},[471,21397,651],{"class":484},[471,21399,21400],{"class":514},"{{ stat.value }}",[471,21402,521],{"class":484},[471,21404,453],{"class":488},[471,21406,508],{"class":484},[471,21408,21409,21411,21413,21415,21417,21419,21422,21424,21426,21429,21431,21433],{"class":473,"line":2006},[471,21410,4294],{"class":484},[471,21412,453],{"class":488},[471,21414,493],{"class":492},[471,21416,496],{"class":484},[471,21418,499],{"class":484},[471,21420,21421],{"class":502},"text-xs text-gray-500 mt-1",[471,21423,499],{"class":484},[471,21425,651],{"class":484},[471,21427,21428],{"class":514},"{{ stat.label }}",[471,21430,521],{"class":484},[471,21432,453],{"class":488},[471,21434,508],{"class":484},[471,21436,21437,21439,21441],{"class":473,"line":2012},[471,21438,4344],{"class":484},[471,21440,725],{"class":488},[471,21442,508],{"class":484},[471,21444,21445,21447,21449],{"class":473,"line":2018},[471,21446,1886],{"class":484},[471,21448,725],{"class":488},[471,21450,508],{"class":484},[471,21452,21453,21455,21457],{"class":473,"line":2027},[471,21454,1714],{"class":484},[471,21456,725],{"class":488},[471,21458,508],{"class":484},[471,21460,21461,21463,21465],{"class":473,"line":2033},[471,21462,1723],{"class":484},[471,21464,725],{"class":488},[471,21466,508],{"class":484},[471,21468,21469,21471,21473],{"class":473,"line":2042},[471,21470,1914],{"class":484},[471,21472,725],{"class":488},[471,21474,508],{"class":484},[471,21476,21477,21479,21481],{"class":473,"line":2051},[471,21478,885],{"class":484},[471,21480,725],{"class":488},[471,21482,508],{"class":484},[471,21484,21485,21487,21489],{"class":473,"line":2056},[471,21486,521],{"class":484},[471,21488,1419],{"class":488},[471,21490,508],{"class":484},[471,21492,21493],{"class":473,"line":2062},[471,21494,532],{"emptyLinePlaceholder":531},[471,21496,21497,21499,21501,21503,21505,21507,21509,21511,21513],{"class":473,"line":2081},[471,21498,485],{"class":484},[471,21500,7370],{"class":488},[471,21502,7373],{"class":492},[471,21504,7376],{"class":492},[471,21506,496],{"class":484},[471,21508,499],{"class":484},[471,21510,7383],{"class":502},[471,21512,499],{"class":484},[471,21514,508],{"class":484},[471,21516,21517,21519,21521,21523,21525,21528,21530,21532,21534,21536],{"class":473,"line":2109},[471,21518,7393],{"class":7392},[471,21520,7396],{"class":484},[471,21522,7399],{"class":514},[471,21524,7402],{"class":484},[471,21526,21527],{"class":514}," computed",[471,21529,7413],{"class":484},[471,21531,7416],{"class":7392},[471,21533,7419],{"class":484},[471,21535,1410],{"class":502},[471,21537,7424],{"class":484},[471,21539,21540],{"class":473,"line":2114},[471,21541,532],{"emptyLinePlaceholder":531},[471,21543,21544,21546,21549,21551,21553,21555,21557,21560,21562],{"class":473,"line":2130},[471,21545,7433],{"class":492},[471,21547,21548],{"class":514}," activeTab ",[471,21550,496],{"class":484},[471,21552,7399],{"class":7441},[471,21554,7444],{"class":514},[471,21556,8202],{"class":484},[471,21558,21559],{"class":502},"overview",[471,21561,8202],{"class":484},[471,21563,7451],{"class":514},[471,21565,21566],{"class":473,"line":2136},[471,21567,532],{"emptyLinePlaceholder":531},[471,21569,21570,21572,21575,21577],{"class":473,"line":2142},[471,21571,7433],{"class":492},[471,21573,21574],{"class":514}," tabs ",[471,21576,496],{"class":484},[471,21578,20657],{"class":514},[471,21580,21581],{"class":473,"line":2148},[471,21582,20662],{"class":484},[471,21584,21585,21588,21590,21592,21594,21596],{"class":473,"line":2157},[471,21586,21587],{"class":488},"    id",[471,21589,1243],{"class":484},[471,21591,7419],{"class":484},[471,21593,21559],{"class":502},[471,21595,8202],{"class":484},[471,21597,20679],{"class":484},[471,21599,21600,21603,21605,21607,21609,21611],{"class":473,"line":2163},[471,21601,21602],{"class":488},"    label",[471,21604,1243],{"class":484},[471,21606,7419],{"class":484},[471,21608,11],{"class":502},[471,21610,8202],{"class":484},[471,21612,20679],{"class":484},[471,21614,21615,21618,21620,21622,21625,21627],{"class":473,"line":2172},[471,21616,21617],{"class":488},"    title",[471,21619,1243],{"class":484},[471,21621,7419],{"class":484},[471,21623,21624],{"class":502},"Tổng quan dự án",[471,21626,8202],{"class":484},[471,21628,20679],{"class":484},[471,21630,21631,21634,21636,21638,21641,21643],{"class":473,"line":2181},[471,21632,21633],{"class":488},"    content",[471,21635,1243],{"class":484},[471,21637,7419],{"class":484},[471,21639,21640],{"class":502},"Dự án được xây dựng với Nuxt 4 và Tailwind CSS v4, sử dụng kiến trúc hybrid rendering để tối ưu cả SEO và performance. Backend API được xây dựng trên Nitro server với PostgreSQL làm database chính.",[471,21642,8202],{"class":484},[471,21644,20679],{"class":484},[471,21646,21647,21650,21652],{"class":473,"line":2186},[471,21648,21649],{"class":488},"    stats",[471,21651,1243],{"class":484},[471,21653,20657],{"class":514},[471,21655,21656,21659,21662,21664,21666,21669,21671,21673,21676,21678,21680,21683,21685],{"class":473,"line":2192},[471,21657,21658],{"class":484},"      {",[471,21660,21661],{"class":488}," label",[471,21663,1243],{"class":484},[471,21665,7419],{"class":484},[471,21667,21668],{"class":502},"Thành viên",[471,21670,8202],{"class":484},[471,21672,7402],{"class":484},[471,21674,21675],{"class":488}," value",[471,21677,1243],{"class":484},[471,21679,7419],{"class":484},[471,21681,21682],{"class":502},"12",[471,21684,8202],{"class":484},[471,21686,21687],{"class":484}," },\n",[471,21689,21690,21692,21694,21696,21698,21701,21703,21705,21707,21709,21711,21713,21715],{"class":473,"line":2211},[471,21691,21658],{"class":484},[471,21693,21661],{"class":488},[471,21695,1243],{"class":484},[471,21697,7419],{"class":484},[471,21699,21700],{"class":502},"Sprint",[471,21702,8202],{"class":484},[471,21704,7402],{"class":484},[471,21706,21675],{"class":488},[471,21708,1243],{"class":484},[471,21710,7419],{"class":484},[471,21712,3380],{"class":502},[471,21714,8202],{"class":484},[471,21716,21687],{"class":484},[471,21718,21719,21721,21723,21725,21727,21730,21732,21734,21736,21738,21740,21743,21745],{"class":473,"line":2239},[471,21720,21658],{"class":484},[471,21722,21661],{"class":488},[471,21724,1243],{"class":484},[471,21726,7419],{"class":484},[471,21728,21729],{"class":502},"Commits",[471,21731,8202],{"class":484},[471,21733,7402],{"class":484},[471,21735,21675],{"class":488},[471,21737,1243],{"class":484},[471,21739,7419],{"class":484},[471,21741,21742],{"class":502},"1.2k",[471,21744,8202],{"class":484},[471,21746,21747],{"class":484}," }\n",[471,21749,21750],{"class":473,"line":2244},[471,21751,21752],{"class":514},"    ]\n",[471,21754,21755],{"class":473,"line":2260},[471,21756,20698],{"class":484},[471,21758,21759],{"class":473,"line":2266},[471,21760,20662],{"class":484},[471,21762,21763,21765,21767,21769,21772,21774],{"class":473,"line":2272},[471,21764,21587],{"class":488},[471,21766,1243],{"class":484},[471,21768,7419],{"class":484},[471,21770,21771],{"class":502},"features",[471,21773,8202],{"class":484},[471,21775,20679],{"class":484},[471,21777,21778,21780,21782,21784,21787,21789],{"class":473,"line":2278},[471,21779,21602],{"class":488},[471,21781,1243],{"class":484},[471,21783,7419],{"class":484},[471,21785,21786],{"class":502},"Tính năng",[471,21788,8202],{"class":484},[471,21790,20679],{"class":484},[471,21792,21793,21795,21797,21799,21802,21804],{"class":473,"line":2287},[471,21794,21617],{"class":488},[471,21796,1243],{"class":484},[471,21798,7419],{"class":484},[471,21800,21801],{"class":502},"Tính năng chính",[471,21803,8202],{"class":484},[471,21805,20679],{"class":484},[471,21807,21808,21810,21812,21814,21817,21819],{"class":473,"line":2293},[471,21809,21633],{"class":488},[471,21811,1243],{"class":484},[471,21813,7419],{"class":484},[471,21815,21816],{"class":502},"Hệ thống bao gồm authentication với JWT, real-time notifications qua WebSocket, file upload với Cloudflare R2, full-text search với PostgreSQL, và admin dashboard để quản lý nội dung.",[471,21818,8202],{"class":484},[471,21820,20679],{"class":484},[471,21822,21823,21825,21827],{"class":473,"line":2302},[471,21824,21649],{"class":488},[471,21826,1243],{"class":484},[471,21828,20657],{"class":514},[471,21830,21831,21833,21835,21837,21839,21842,21844,21846,21848,21850,21852,21855,21857],{"class":473,"line":2311},[471,21832,21658],{"class":484},[471,21834,21661],{"class":488},[471,21836,1243],{"class":484},[471,21838,7419],{"class":484},[471,21840,21841],{"class":502},"Modules",[471,21843,8202],{"class":484},[471,21845,7402],{"class":484},[471,21847,21675],{"class":488},[471,21849,1243],{"class":484},[471,21851,7419],{"class":484},[471,21853,21854],{"class":502},"24",[471,21856,8202],{"class":484},[471,21858,21687],{"class":484},[471,21860,21861,21863,21865,21867,21869,21872,21874,21876,21878,21880,21882,21885,21887],{"class":473,"line":2320},[471,21862,21658],{"class":484},[471,21864,21661],{"class":488},[471,21866,1243],{"class":484},[471,21868,7419],{"class":484},[471,21870,21871],{"class":502},"API Routes",[471,21873,8202],{"class":484},[471,21875,7402],{"class":484},[471,21877,21675],{"class":488},[471,21879,1243],{"class":484},[471,21881,7419],{"class":484},[471,21883,21884],{"class":502},"56",[471,21886,8202],{"class":484},[471,21888,21687],{"class":484},[471,21890,21891,21893,21895,21897,21899,21902,21904,21906,21908,21910,21912,21915,21917],{"class":473,"line":3630},[471,21892,21658],{"class":484},[471,21894,21661],{"class":488},[471,21896,1243],{"class":484},[471,21898,7419],{"class":484},[471,21900,21901],{"class":502},"Components",[471,21903,8202],{"class":484},[471,21905,7402],{"class":484},[471,21907,21675],{"class":488},[471,21909,1243],{"class":484},[471,21911,7419],{"class":484},[471,21913,21914],{"class":502},"89",[471,21916,8202],{"class":484},[471,21918,21747],{"class":484},[471,21920,21921],{"class":473,"line":3638},[471,21922,21752],{"class":514},[471,21924,21925],{"class":473,"line":3643},[471,21926,20698],{"class":484},[471,21928,21929],{"class":473,"line":3663},[471,21930,20662],{"class":484},[471,21932,21933,21935,21937,21939,21942,21944],{"class":473,"line":3708},[471,21934,21587],{"class":488},[471,21936,1243],{"class":484},[471,21938,7419],{"class":484},[471,21940,21941],{"class":502},"tech",[471,21943,8202],{"class":484},[471,21945,20679],{"class":484},[471,21947,21948,21950,21952,21954,21957,21959],{"class":473,"line":3746},[471,21949,21602],{"class":488},[471,21951,1243],{"class":484},[471,21953,7419],{"class":484},[471,21955,21956],{"class":502},"Công nghệ",[471,21958,8202],{"class":484},[471,21960,20679],{"class":484},[471,21962,21963,21965,21967,21969,21972,21974],{"class":473,"line":3755},[471,21964,21617],{"class":488},[471,21966,1243],{"class":484},[471,21968,7419],{"class":484},[471,21970,21971],{"class":502},"Stack công nghệ",[471,21973,8202],{"class":484},[471,21975,20679],{"class":484},[471,21977,21978,21980,21982,21984,21987,21989],{"class":473,"line":3764},[471,21979,21633],{"class":488},[471,21981,1243],{"class":484},[471,21983,7419],{"class":484},[471,21985,21986],{"class":502},"Frontend: Nuxt 4 + Vue 3 Composition API + Tailwind CSS v4 + TypeScript. Backend: Nitro server + PostgreSQL + Redis. DevOps: Docker + GitHub Actions + Cloudflare Pages. Monitoring: Sentry + Grafana.",[471,21988,8202],{"class":484},[471,21990,20679],{"class":484},[471,21992,21993,21995,21997],{"class":473,"line":3769},[471,21994,21649],{"class":488},[471,21996,1243],{"class":484},[471,21998,20657],{"class":514},[471,22000,22001,22003,22005,22007,22009,22012,22014,22016,22018,22020,22022,22024,22026],{"class":473,"line":3777},[471,22002,21658],{"class":484},[471,22004,21661],{"class":488},[471,22006,1243],{"class":484},[471,22008,7419],{"class":484},[471,22010,22011],{"class":502},"Languages",[471,22013,8202],{"class":484},[471,22015,7402],{"class":484},[471,22017,21675],{"class":488},[471,22019,1243],{"class":484},[471,22021,7419],{"class":484},[471,22023,3082],{"class":502},[471,22025,8202],{"class":484},[471,22027,21687],{"class":484},[471,22029,22030,22032,22034,22036,22038,22041,22043,22045,22047,22049,22051,22054,22056],{"class":473,"line":3792},[471,22031,21658],{"class":484},[471,22033,21661],{"class":488},[471,22035,1243],{"class":484},[471,22037,7419],{"class":484},[471,22039,22040],{"class":502},"Services",[471,22042,8202],{"class":484},[471,22044,7402],{"class":484},[471,22046,21675],{"class":488},[471,22048,1243],{"class":484},[471,22050,7419],{"class":484},[471,22052,22053],{"class":502},"7",[471,22055,8202],{"class":484},[471,22057,21687],{"class":484},[471,22059,22060,22062,22064,22066,22068,22071,22073,22075,22077,22079,22081,22084,22086],{"class":473,"line":3805},[471,22061,21658],{"class":484},[471,22063,21661],{"class":488},[471,22065,1243],{"class":484},[471,22067,7419],{"class":484},[471,22069,22070],{"class":502},"Uptime",[471,22072,8202],{"class":484},[471,22074,7402],{"class":484},[471,22076,21675],{"class":488},[471,22078,1243],{"class":484},[471,22080,7419],{"class":484},[471,22082,22083],{"class":502},"99.9%",[471,22085,8202],{"class":484},[471,22087,21747],{"class":484},[471,22089,22090],{"class":473,"line":3811},[471,22091,21752],{"class":514},[471,22093,22094],{"class":473,"line":3817},[471,22095,7678],{"class":484},[471,22097,22098],{"class":473,"line":3823},[471,22099,8246],{"class":514},[471,22101,22102],{"class":473,"line":3829},[471,22103,532],{"emptyLinePlaceholder":531},[471,22105,22106,22108,22111,22113,22115,22117,22119,22121],{"class":473,"line":3839},[471,22107,7433],{"class":492},[471,22109,22110],{"class":514}," indicatorStyle ",[471,22112,496],{"class":484},[471,22114,21527],{"class":7441},[471,22116,7444],{"class":514},[471,22118,7483],{"class":484},[471,22120,7514],{"class":492},[471,22122,7486],{"class":484},[471,22124,22125,22128,22130,22132,22135,22137,22140,22142,22145,22147,22150,22152,22155,22157,22160,22162,22164],{"class":473,"line":3845},[471,22126,22127],{"class":492},"  const",[471,22129,20858],{"class":514},[471,22131,7499],{"class":484},[471,22133,22134],{"class":514}," tabs",[471,22136,2917],{"class":484},[471,22138,22139],{"class":7441},"findIndex",[471,22141,7444],{"class":488},[471,22143,22144],{"class":7604},"t",[471,22146,7514],{"class":492},[471,22148,22149],{"class":514}," t",[471,22151,2917],{"class":484},[471,22153,22154],{"class":514},"id",[471,22156,20855],{"class":484},[471,22158,22159],{"class":514}," activeTab",[471,22161,2917],{"class":484},[471,22163,7496],{"class":514},[471,22165,7451],{"class":488},[471,22167,22168,22170,22173,22175,22178,22181,22183,22185],{"class":473,"line":3854},[471,22169,22127],{"class":492},[471,22171,22172],{"class":514}," width",[471,22174,7499],{"class":484},[471,22176,22177],{"class":7537}," 100",[471,22179,22180],{"class":484}," \u002F",[471,22182,22134],{"class":514},[471,22184,2917],{"class":484},[471,22186,22187],{"class":514},"length\n",[471,22189,22190,22193],{"class":473,"line":3863},[471,22191,22192],{"class":7392},"  return",[471,22194,7486],{"class":484},[471,22196,22197,22200,22202,22205,22208,22210,22213,22216],{"class":473,"line":3872},[471,22198,22199],{"class":488},"    width",[471,22201,1243],{"class":484},[471,22203,22204],{"class":484}," `${",[471,22206,22207],{"class":514},"width",[471,22209,7683],{"class":484},[471,22211,22212],{"class":502},"%",[471,22214,22215],{"class":484},"`",[471,22217,20679],{"class":484},[471,22219,22220,22223,22225,22227,22230,22233,22235,22237,22239],{"class":473,"line":5334},[471,22221,22222],{"class":488},"    left",[471,22224,1243],{"class":484},[471,22226,22204],{"class":484},[471,22228,22229],{"class":514},"index ",[471,22231,22232],{"class":484},"*",[471,22234,22172],{"class":514},[471,22236,7683],{"class":484},[471,22238,22212],{"class":502},[471,22240,22241],{"class":484},"`\n",[471,22243,22244],{"class":473,"line":5343},[471,22245,7678],{"class":484},[471,22247,22248,22250],{"class":473,"line":5363},[471,22249,7683],{"class":484},[471,22251,7451],{"class":514},[471,22253,22254,22256,22258],{"class":473,"line":5369},[471,22255,521],{"class":484},[471,22257,7370],{"class":488},[471,22259,508],{"class":484},[824,22261,22263],{"id":22262},"bài-tập-21-toast-notification-slide-in-auto-dismiss-animation","Bài tập 21: Toast notification — slide-in + auto-dismiss animation",[453,22265,22266,22268],{},[457,22267,1404],{}," Toast notification component với:",[20034,22270,22271,22274,22277,22280],{},[20037,22272,22273],{},"Trượt từ phải vào (slide-in-right)",[20037,22275,22276],{},"Auto dismiss sau 4 giây với fade-out",[20037,22278,22279],{},"Nhiều loại: success, error, warning, info",[20037,22281,22282],{},"Progress bar đếm ngược thời gian",[462,22284,22286],{"className":1408,"code":22285,"language":1410,"meta":467,"style":467},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-lg mx-auto p-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-8\">Toast Notification System\u003C\u002Fh2>\n\n    \u003C!-- Trigger buttons -->\n    \u003Cdiv class=\"flex flex-wrap gap-3\">\n      \u003Cbutton @click=\"addToast('success')\"\n        class=\"px-4 py-2 bg-emerald-600 text-white text-sm font-medium rounded-lg\n               hover:bg-emerald-700 transition-colors\">\n        Success Toast\n      \u003C\u002Fbutton>\n      \u003Cbutton @click=\"addToast('error')\"\n        class=\"px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg\n               hover:bg-red-700 transition-colors\">\n        Error Toast\n      \u003C\u002Fbutton>\n      \u003Cbutton @click=\"addToast('warning')\"\n        class=\"px-4 py-2 bg-amber-500 text-white text-sm font-medium rounded-lg\n               hover:bg-amber-600 transition-colors\">\n        Warning Toast\n      \u003C\u002Fbutton>\n      \u003Cbutton @click=\"addToast('info')\"\n        class=\"px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg\n               hover:bg-blue-700 transition-colors\">\n        Info Toast\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Toast container -->\n    \u003Cdiv class=\"fixed top-4 right-4 z-50 space-y-3 w-80\">\n      \u003Cdiv\n        v-for=\"toast in toasts\"\n        :key=\"toast.id\"\n        class=\"relative overflow-hidden bg-white rounded-xl border border-gray-200 shadow-lg p-4\n               transition-all duration-300\"\n        :class=\"toast.isLeaving\n          ? 'opacity-0 translate-x-full'\n          : 'opacity-100 translate-x-0'\">\n\n        \u003Cdiv class=\"flex items-start gap-3\">\n          \u003C!-- Icon -->\n          \u003Cdiv class=\"flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center\"\n               :class=\"iconBgClass(toast.type)\">\n            \u003Cspan class=\"text-lg\">{{ iconMap[toast.type] }}\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n\n          \u003C!-- Content -->\n          \u003Cdiv class=\"flex-1 min-w-0\">\n            \u003Cp class=\"text-sm font-semibold text-gray-900\">\n              {{ titleMap[toast.type] }}\n            \u003C\u002Fp>\n            \u003Cp class=\"text-sm text-gray-600 mt-0.5\">\n              {{ messageMap[toast.type] }}\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n\n          \u003C!-- Close button -->\n          \u003Cbutton\n            @click=\"removeToast(toast.id)\"\n            class=\"flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-md\n                   hover:bg-gray-100 transition-colors\">\n            \u003Cspan class=\"text-gray-400 text-sm\">×\u003C\u002Fspan>\n          \u003C\u002Fbutton>\n        \u003C\u002Fdiv>\n\n        \u003C!-- Progress bar -->\n        \u003Cdiv class=\"absolute bottom-0 left-0 right-0 h-1 bg-gray-100\">\n          \u003Cdiv\n            class=\"h-full transition-all duration-[4000ms] ease-linear\"\n            :class=\"progressBarClass(toast.type)\"\n            :style=\"{ width: toast.isLeaving ? '100%' : '0%' }\">\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\n\ninterface Toast {\n  id: number\n  type: 'success' | 'error' | 'warning' | 'info'\n  isLeaving: boolean\n}\n\nconst toasts = ref\u003CToast[]>([])\nlet nextId = 0\n\nconst iconMap: Record\u003Cstring, string> = {\n  success: '✅',\n  error: '❌',\n  warning: '⚠️',\n  info: 'ℹ️'\n}\n\nconst titleMap: Record\u003Cstring, string> = {\n  success: 'Thanh cong',\n  error: 'Loi',\n  warning: 'Canh bao',\n  info: 'Thong tin'\n}\n\nconst messageMap: Record\u003Cstring, string> = {\n  success: 'Thao tac da duoc thuc hien thanh cong.',\n  error: 'Da xay ra loi. Vui long thu lai sau.',\n  warning: 'He thong sap bao tri vao luc 2:00 AM.',\n  info: 'Phien ban moi v2.4.0 da san sang.'\n}\n\nfunction iconBgClass(type: string): string {\n  const map: Record\u003Cstring, string> = {\n    success: 'bg-emerald-100',\n    error: 'bg-red-100',\n    warning: 'bg-amber-100',\n    info: 'bg-blue-100'\n  }\n  return map[type] || 'bg-gray-100'\n}\n\nfunction progressBarClass(type: string): string {\n  const map: Record\u003Cstring, string> = {\n    success: 'bg-emerald-500',\n    error: 'bg-red-500',\n    warning: 'bg-amber-500',\n    info: 'bg-blue-500'\n  }\n  return map[type] || 'bg-gray-500'\n}\n\nfunction addToast(type: 'success' | 'error' | 'warning' | 'info') {\n  const id = nextId++\n  const toast: Toast = { id, type, isLeaving: false }\n  toasts.value.push(toast)\n\n  \u002F\u002F Auto dismiss sau 4 giây\n  setTimeout(() => {\n    const t = toasts.value.find(t => t.id === id)\n    if (t) t.isLeaving = true\n\n    \u002F\u002F Xóa khỏi array sau khi transition kết thúc\n    setTimeout(() => {\n      toasts.value = toasts.value.filter(t => t.id !== id)\n    }, 300)\n  }, 4000)\n}\n\nfunction removeToast(id: number) {\n  const t = toasts.value.find(t => t.id === id)\n  if (t) t.isLeaving = true\n\n  setTimeout(() => {\n    toasts.value = toasts.value.filter(t => t.id !== id)\n  }, 300)\n}\n\u003C\u002Fscript>\n",[432,22287,22288,22296,22314,22341,22345,22350,22369,22387,22398,22407,22412,22420,22437,22447,22456,22461,22469,22486,22497,22506,22511,22519,22536,22547,22556,22561,22569,22577,22581,22586,22605,22611,22624,22637,22648,22655,22666,22671,22680,22684,22703,22708,22725,22741,22769,22777,22781,22786,22804,22823,22828,22836,22855,22860,22868,22876,22880,22885,22891,22904,22915,22924,22951,22959,22967,22971,22976,22995,23001,23014,23027,23043,23051,23059,23067,23075,23083,23091,23095,23115,23133,23137,23147,23157,23196,23206,23210,23214,23238,23251,23255,23283,23299,23315,23331,23345,23349,23353,23378,23393,23408,23423,23436,23440,23444,23469,23484,23499,23514,23527,23531,23535,23558,23584,23601,23618,23635,23650,23655,23680,23685,23690,23712,23737,23753,23769,23785,23799,23804,23826,23831,23836,23884,23900,23934,23956,23961,23967,23980,24020,24043,24048,24054,24068,24110,24120,24130,24135,24140,24160,24197,24218,24223,24236,24276,24285,24290],{"__ignoreMap":467},[471,22289,22290,22292,22294],{"class":473,"line":474},[471,22291,485],{"class":484},[471,22293,1419],{"class":488},[471,22295,508],{"class":484},[471,22297,22298,22300,22302,22304,22306,22308,22310,22312],{"class":473,"line":481},[471,22299,744],{"class":484},[471,22301,725],{"class":488},[471,22303,493],{"class":492},[471,22305,496],{"class":484},[471,22307,499],{"class":484},[471,22309,6827],{"class":502},[471,22311,499],{"class":484},[471,22313,508],{"class":484},[471,22315,22316,22318,22320,22322,22324,22326,22328,22330,22332,22335,22337,22339],{"class":473,"line":511},[471,22317,1445],{"class":484},[471,22319,427],{"class":488},[471,22321,493],{"class":492},[471,22323,496],{"class":484},[471,22325,499],{"class":484},[471,22327,2964],{"class":502},[471,22329,499],{"class":484},[471,22331,651],{"class":484},[471,22333,22334],{"class":514},"Toast Notification System",[471,22336,521],{"class":484},[471,22338,427],{"class":488},[471,22340,508],{"class":484},[471,22342,22343],{"class":473,"line":518},[471,22344,532],{"emptyLinePlaceholder":531},[471,22346,22347],{"class":473,"line":528},[471,22348,22349],{"class":477},"    \u003C!-- Trigger buttons -->\n",[471,22351,22352,22354,22356,22358,22360,22362,22365,22367],{"class":473,"line":535},[471,22353,1445],{"class":484},[471,22355,725],{"class":488},[471,22357,493],{"class":492},[471,22359,496],{"class":484},[471,22361,499],{"class":484},[471,22363,22364],{"class":502},"flex flex-wrap gap-3",[471,22366,499],{"class":484},[471,22368,508],{"class":484},[471,22370,22371,22373,22375,22378,22380,22382,22385],{"class":473,"line":541},[471,22372,1502],{"class":484},[471,22374,489],{"class":488},[471,22376,22377],{"class":492}," @click",[471,22379,496],{"class":484},[471,22381,499],{"class":484},[471,22383,22384],{"class":502},"addToast('success')",[471,22386,2436],{"class":484},[471,22388,22389,22391,22393,22395],{"class":473,"line":563},[471,22390,3795],{"class":492},[471,22392,496],{"class":484},[471,22394,499],{"class":484},[471,22396,22397],{"class":502},"px-4 py-2 bg-emerald-600 text-white text-sm font-medium rounded-lg\n",[471,22399,22400,22403,22405],{"class":473,"line":568},[471,22401,22402],{"class":502},"               hover:bg-emerald-700 transition-colors",[471,22404,499],{"class":484},[471,22406,508],{"class":484},[471,22408,22409],{"class":473,"line":574},[471,22410,22411],{"class":514},"        Success Toast\n",[471,22413,22414,22416,22418],{"class":473,"line":594},[471,22415,1723],{"class":484},[471,22417,489],{"class":488},[471,22419,508],{"class":484},[471,22421,22422,22424,22426,22428,22430,22432,22435],{"class":473,"line":600},[471,22423,1502],{"class":484},[471,22425,489],{"class":488},[471,22427,22377],{"class":492},[471,22429,496],{"class":484},[471,22431,499],{"class":484},[471,22433,22434],{"class":502},"addToast('error')",[471,22436,2436],{"class":484},[471,22438,22439,22441,22443,22445],{"class":473,"line":609},[471,22440,3795],{"class":492},[471,22442,496],{"class":484},[471,22444,499],{"class":484},[471,22446,7297],{"class":502},[471,22448,22449,22452,22454],{"class":473,"line":614},[471,22450,22451],{"class":502},"               hover:bg-red-700 transition-colors",[471,22453,499],{"class":484},[471,22455,508],{"class":484},[471,22457,22458],{"class":473,"line":620},[471,22459,22460],{"class":514},"        Error Toast\n",[471,22462,22463,22465,22467],{"class":473,"line":663},[471,22464,1723],{"class":484},[471,22466,489],{"class":488},[471,22468,508],{"class":484},[471,22470,22471,22473,22475,22477,22479,22481,22484],{"class":473,"line":668},[471,22472,1502],{"class":484},[471,22474,489],{"class":488},[471,22476,22377],{"class":492},[471,22478,496],{"class":484},[471,22480,499],{"class":484},[471,22482,22483],{"class":502},"addToast('warning')",[471,22485,2436],{"class":484},[471,22487,22488,22490,22492,22494],{"class":473,"line":674},[471,22489,3795],{"class":492},[471,22491,496],{"class":484},[471,22493,499],{"class":484},[471,22495,22496],{"class":502},"px-4 py-2 bg-amber-500 text-white text-sm font-medium rounded-lg\n",[471,22498,22499,22502,22504],{"class":473,"line":694},[471,22500,22501],{"class":502},"               hover:bg-amber-600 transition-colors",[471,22503,499],{"class":484},[471,22505,508],{"class":484},[471,22507,22508],{"class":473,"line":700},[471,22509,22510],{"class":514},"        Warning Toast\n",[471,22512,22513,22515,22517],{"class":473,"line":709},[471,22514,1723],{"class":484},[471,22516,489],{"class":488},[471,22518,508],{"class":484},[471,22520,22521,22523,22525,22527,22529,22531,22534],{"class":473,"line":714},[471,22522,1502],{"class":484},[471,22524,489],{"class":488},[471,22526,22377],{"class":492},[471,22528,496],{"class":484},[471,22530,499],{"class":484},[471,22532,22533],{"class":502},"addToast('info')",[471,22535,2436],{"class":484},[471,22537,22538,22540,22542,22544],{"class":473,"line":720},[471,22539,3795],{"class":492},[471,22541,496],{"class":484},[471,22543,499],{"class":484},[471,22545,22546],{"class":502},"px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg\n",[471,22548,22549,22552,22554],{"class":473,"line":741},[471,22550,22551],{"class":502},"               hover:bg-blue-700 transition-colors",[471,22553,499],{"class":484},[471,22555,508],{"class":484},[471,22557,22558],{"class":473,"line":772},[471,22559,22560],{"class":514},"        Info Toast\n",[471,22562,22563,22565,22567],{"class":473,"line":816},[471,22564,1723],{"class":484},[471,22566,489],{"class":488},[471,22568,508],{"class":484},[471,22570,22571,22573,22575],{"class":473,"line":1833},[471,22572,1914],{"class":484},[471,22574,725],{"class":488},[471,22576,508],{"class":484},[471,22578,22579],{"class":473,"line":1883},[471,22580,532],{"emptyLinePlaceholder":531},[471,22582,22583],{"class":473,"line":1893},[471,22584,22585],{"class":477},"    \u003C!-- Toast container -->\n",[471,22587,22588,22590,22592,22594,22596,22598,22601,22603],{"class":473,"line":1902},[471,22589,1445],{"class":484},[471,22591,725],{"class":488},[471,22593,493],{"class":492},[471,22595,496],{"class":484},[471,22597,499],{"class":484},[471,22599,22600],{"class":502},"fixed top-4 right-4 z-50 space-y-3 w-80",[471,22602,499],{"class":484},[471,22604,508],{"class":484},[471,22606,22607,22609],{"class":473,"line":1911},[471,22608,1502],{"class":484},[471,22610,6937],{"class":488},[471,22612,22613,22615,22617,22619,22622],{"class":473,"line":1921},[471,22614,20141],{"class":492},[471,22616,496],{"class":484},[471,22618,499],{"class":484},[471,22620,22621],{"class":502},"toast in toasts",[471,22623,2436],{"class":484},[471,22625,22626,22628,22630,22632,22635],{"class":473,"line":1926},[471,22627,20155],{"class":492},[471,22629,496],{"class":484},[471,22631,499],{"class":484},[471,22633,22634],{"class":502},"toast.id",[471,22636,2436],{"class":484},[471,22638,22639,22641,22643,22645],{"class":473,"line":1932},[471,22640,3795],{"class":492},[471,22642,496],{"class":484},[471,22644,499],{"class":484},[471,22646,22647],{"class":502},"relative overflow-hidden bg-white rounded-xl border border-gray-200 shadow-lg p-4\n",[471,22649,22650,22653],{"class":473,"line":1951},[471,22651,22652],{"class":502},"               transition-all duration-300",[471,22654,2436],{"class":484},[471,22656,22657,22659,22661,22663],{"class":473,"line":1979},[471,22658,6955],{"class":492},[471,22660,496],{"class":484},[471,22662,499],{"class":484},[471,22664,22665],{"class":502},"toast.isLeaving\n",[471,22667,22668],{"class":473,"line":1984},[471,22669,22670],{"class":502},"          ? 'opacity-0 translate-x-full'\n",[471,22672,22673,22676,22678],{"class":473,"line":2000},[471,22674,22675],{"class":502},"          : 'opacity-100 translate-x-0'",[471,22677,499],{"class":484},[471,22679,508],{"class":484},[471,22681,22682],{"class":473,"line":2006},[471,22683,532],{"emptyLinePlaceholder":531},[471,22685,22686,22688,22690,22692,22694,22696,22699,22701],{"class":473,"line":2012},[471,22687,1584],{"class":484},[471,22689,725],{"class":488},[471,22691,493],{"class":492},[471,22693,496],{"class":484},[471,22695,499],{"class":484},[471,22697,22698],{"class":502},"flex items-start gap-3",[471,22700,499],{"class":484},[471,22702,508],{"class":484},[471,22704,22705],{"class":473,"line":2018},[471,22706,22707],{"class":477},"          \u003C!-- Icon -->\n",[471,22709,22710,22712,22714,22716,22718,22720,22723],{"class":473,"line":2027},[471,22711,1657],{"class":484},[471,22713,725],{"class":488},[471,22715,493],{"class":492},[471,22717,496],{"class":484},[471,22719,499],{"class":484},[471,22721,22722],{"class":502},"flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center",[471,22724,2436],{"class":484},[471,22726,22727,22730,22732,22734,22737,22739],{"class":473,"line":2033},[471,22728,22729],{"class":492},"               :class",[471,22731,496],{"class":484},[471,22733,499],{"class":484},[471,22735,22736],{"class":502},"iconBgClass(toast.type)",[471,22738,499],{"class":484},[471,22740,508],{"class":484},[471,22742,22743,22745,22747,22749,22751,22753,22756,22758,22760,22763,22765,22767],{"class":473,"line":2042},[471,22744,1836],{"class":484},[471,22746,471],{"class":488},[471,22748,493],{"class":492},[471,22750,496],{"class":484},[471,22752,499],{"class":484},[471,22754,22755],{"class":502},"text-lg",[471,22757,499],{"class":484},[471,22759,651],{"class":484},[471,22761,22762],{"class":514},"{{ iconMap[toast.type] }}",[471,22764,521],{"class":484},[471,22766,471],{"class":488},[471,22768,508],{"class":484},[471,22770,22771,22773,22775],{"class":473,"line":2051},[471,22772,1886],{"class":484},[471,22774,725],{"class":488},[471,22776,508],{"class":484},[471,22778,22779],{"class":473,"line":2056},[471,22780,532],{"emptyLinePlaceholder":531},[471,22782,22783],{"class":473,"line":2062},[471,22784,22785],{"class":477},"          \u003C!-- Content -->\n",[471,22787,22788,22790,22792,22794,22796,22798,22800,22802],{"class":473,"line":2081},[471,22789,1657],{"class":484},[471,22791,725],{"class":488},[471,22793,493],{"class":492},[471,22795,496],{"class":484},[471,22797,499],{"class":484},[471,22799,10860],{"class":502},[471,22801,499],{"class":484},[471,22803,508],{"class":484},[471,22805,22806,22808,22810,22812,22814,22816,22819,22821],{"class":473,"line":2109},[471,22807,1836],{"class":484},[471,22809,453],{"class":488},[471,22811,493],{"class":492},[471,22813,496],{"class":484},[471,22815,499],{"class":484},[471,22817,22818],{"class":502},"text-sm font-semibold text-gray-900",[471,22820,499],{"class":484},[471,22822,508],{"class":484},[471,22824,22825],{"class":473,"line":2114},[471,22826,22827],{"class":514},"              {{ titleMap[toast.type] }}\n",[471,22829,22830,22832,22834],{"class":473,"line":2130},[471,22831,4344],{"class":484},[471,22833,453],{"class":488},[471,22835,508],{"class":484},[471,22837,22838,22840,22842,22844,22846,22848,22851,22853],{"class":473,"line":2136},[471,22839,1836],{"class":484},[471,22841,453],{"class":488},[471,22843,493],{"class":492},[471,22845,496],{"class":484},[471,22847,499],{"class":484},[471,22849,22850],{"class":502},"text-sm text-gray-600 mt-0.5",[471,22852,499],{"class":484},[471,22854,508],{"class":484},[471,22856,22857],{"class":473,"line":2142},[471,22858,22859],{"class":514},"              {{ messageMap[toast.type] }}\n",[471,22861,22862,22864,22866],{"class":473,"line":2148},[471,22863,4344],{"class":484},[471,22865,453],{"class":488},[471,22867,508],{"class":484},[471,22869,22870,22872,22874],{"class":473,"line":2157},[471,22871,1886],{"class":484},[471,22873,725],{"class":488},[471,22875,508],{"class":484},[471,22877,22878],{"class":473,"line":2163},[471,22879,532],{"emptyLinePlaceholder":531},[471,22881,22882],{"class":473,"line":2172},[471,22883,22884],{"class":477},"          \u003C!-- Close button -->\n",[471,22886,22887,22889],{"class":473,"line":2181},[471,22888,1657],{"class":484},[471,22890,3774],{"class":488},[471,22892,22893,22895,22897,22899,22902],{"class":473,"line":2186},[471,22894,7089],{"class":492},[471,22896,496],{"class":484},[471,22898,499],{"class":484},[471,22900,22901],{"class":502},"removeToast(toast.id)",[471,22903,2436],{"class":484},[471,22905,22906,22908,22910,22912],{"class":473,"line":2192},[471,22907,7102],{"class":492},[471,22909,496],{"class":484},[471,22911,499],{"class":484},[471,22913,22914],{"class":502},"flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-md\n",[471,22916,22917,22920,22922],{"class":473,"line":2211},[471,22918,22919],{"class":502},"                   hover:bg-gray-100 transition-colors",[471,22921,499],{"class":484},[471,22923,508],{"class":484},[471,22925,22926,22928,22930,22932,22934,22936,22939,22941,22943,22945,22947,22949],{"class":473,"line":2239},[471,22927,1836],{"class":484},[471,22929,471],{"class":488},[471,22931,493],{"class":492},[471,22933,496],{"class":484},[471,22935,499],{"class":484},[471,22937,22938],{"class":502},"text-gray-400 text-sm",[471,22940,499],{"class":484},[471,22942,651],{"class":484},[471,22944,7135],{"class":514},[471,22946,521],{"class":484},[471,22948,471],{"class":488},[471,22950,508],{"class":484},[471,22952,22953,22955,22957],{"class":473,"line":2244},[471,22954,1886],{"class":484},[471,22956,489],{"class":488},[471,22958,508],{"class":484},[471,22960,22961,22963,22965],{"class":473,"line":2260},[471,22962,1714],{"class":484},[471,22964,725],{"class":488},[471,22966,508],{"class":484},[471,22968,22969],{"class":473,"line":2266},[471,22970,532],{"emptyLinePlaceholder":531},[471,22972,22973],{"class":473,"line":2272},[471,22974,22975],{"class":477},"        \u003C!-- Progress bar -->\n",[471,22977,22978,22980,22982,22984,22986,22988,22991,22993],{"class":473,"line":2278},[471,22979,1584],{"class":484},[471,22981,725],{"class":488},[471,22983,493],{"class":492},[471,22985,496],{"class":484},[471,22987,499],{"class":484},[471,22989,22990],{"class":502},"absolute bottom-0 left-0 right-0 h-1 bg-gray-100",[471,22992,499],{"class":484},[471,22994,508],{"class":484},[471,22996,22997,22999],{"class":473,"line":2287},[471,22998,1657],{"class":484},[471,23000,6937],{"class":488},[471,23002,23003,23005,23007,23009,23012],{"class":473,"line":2293},[471,23004,7102],{"class":492},[471,23006,496],{"class":484},[471,23008,499],{"class":484},[471,23010,23011],{"class":502},"h-full transition-all duration-[4000ms] ease-linear",[471,23013,2436],{"class":484},[471,23015,23016,23018,23020,23022,23025],{"class":473,"line":2302},[471,23017,20302],{"class":492},[471,23019,496],{"class":484},[471,23021,499],{"class":484},[471,23023,23024],{"class":502},"progressBarClass(toast.type)",[471,23026,2436],{"class":484},[471,23028,23029,23032,23034,23036,23039,23041],{"class":473,"line":2311},[471,23030,23031],{"class":492},"            :style",[471,23033,496],{"class":484},[471,23035,499],{"class":484},[471,23037,23038],{"class":502},"{ width: toast.isLeaving ? '100%' : '0%' }",[471,23040,499],{"class":484},[471,23042,508],{"class":484},[471,23044,23045,23047,23049],{"class":473,"line":2320},[471,23046,1886],{"class":484},[471,23048,725],{"class":488},[471,23050,508],{"class":484},[471,23052,23053,23055,23057],{"class":473,"line":3630},[471,23054,1714],{"class":484},[471,23056,725],{"class":488},[471,23058,508],{"class":484},[471,23060,23061,23063,23065],{"class":473,"line":3638},[471,23062,1723],{"class":484},[471,23064,725],{"class":488},[471,23066,508],{"class":484},[471,23068,23069,23071,23073],{"class":473,"line":3643},[471,23070,1914],{"class":484},[471,23072,725],{"class":488},[471,23074,508],{"class":484},[471,23076,23077,23079,23081],{"class":473,"line":3663},[471,23078,885],{"class":484},[471,23080,725],{"class":488},[471,23082,508],{"class":484},[471,23084,23085,23087,23089],{"class":473,"line":3708},[471,23086,521],{"class":484},[471,23088,1419],{"class":488},[471,23090,508],{"class":484},[471,23092,23093],{"class":473,"line":3746},[471,23094,532],{"emptyLinePlaceholder":531},[471,23096,23097,23099,23101,23103,23105,23107,23109,23111,23113],{"class":473,"line":3755},[471,23098,485],{"class":484},[471,23100,7370],{"class":488},[471,23102,7373],{"class":492},[471,23104,7376],{"class":492},[471,23106,496],{"class":484},[471,23108,499],{"class":484},[471,23110,7383],{"class":502},[471,23112,499],{"class":484},[471,23114,508],{"class":484},[471,23116,23117,23119,23121,23123,23125,23127,23129,23131],{"class":473,"line":3764},[471,23118,7393],{"class":7392},[471,23120,7396],{"class":484},[471,23122,7399],{"class":514},[471,23124,7413],{"class":484},[471,23126,7416],{"class":7392},[471,23128,7419],{"class":484},[471,23130,1410],{"class":502},[471,23132,7424],{"class":484},[471,23134,23135],{"class":473,"line":3769},[471,23136,532],{"emptyLinePlaceholder":531},[471,23138,23139,23142,23145],{"class":473,"line":3777},[471,23140,23141],{"class":492},"interface",[471,23143,23144],{"class":12009}," Toast",[471,23146,7486],{"class":484},[471,23148,23149,23152,23154],{"class":473,"line":3792},[471,23150,23151],{"class":488},"  id",[471,23153,1243],{"class":484},[471,23155,23156],{"class":12009}," number\n",[471,23158,23159,23162,23164,23166,23168,23170,23172,23174,23177,23179,23181,23183,23185,23187,23189,23191,23194],{"class":473,"line":3805},[471,23160,23161],{"class":488},"  type",[471,23163,1243],{"class":484},[471,23165,7419],{"class":484},[471,23167,1232],{"class":502},[471,23169,8202],{"class":484},[471,23171,20629],{"class":484},[471,23173,7419],{"class":484},[471,23175,23176],{"class":502},"error",[471,23178,8202],{"class":484},[471,23180,20629],{"class":484},[471,23182,7419],{"class":484},[471,23184,20017],{"class":502},[471,23186,8202],{"class":484},[471,23188,20629],{"class":484},[471,23190,7419],{"class":484},[471,23192,23193],{"class":502},"info",[471,23195,7424],{"class":484},[471,23197,23198,23201,23203],{"class":473,"line":3811},[471,23199,23200],{"class":488},"  isLeaving",[471,23202,1243],{"class":484},[471,23204,23205],{"class":12009}," boolean\n",[471,23207,23208],{"class":473,"line":3817},[471,23209,7549],{"class":484},[471,23211,23212],{"class":473,"line":3823},[471,23213,532],{"emptyLinePlaceholder":531},[471,23215,23216,23218,23221,23223,23225,23227,23230,23233,23235],{"class":473,"line":3829},[471,23217,7433],{"class":492},[471,23219,23220],{"class":514}," toasts ",[471,23222,496],{"class":484},[471,23224,7399],{"class":7441},[471,23226,485],{"class":484},[471,23228,23229],{"class":12009},"Toast",[471,23231,23232],{"class":514},"[]",[471,23234,651],{"class":484},[471,23236,23237],{"class":514},"([])\n",[471,23239,23240,23243,23246,23248],{"class":473,"line":3839},[471,23241,23242],{"class":492},"let",[471,23244,23245],{"class":514}," nextId ",[471,23247,496],{"class":484},[471,23249,23250],{"class":7537}," 0\n",[471,23252,23253],{"class":473,"line":3845},[471,23254,532],{"emptyLinePlaceholder":531},[471,23256,23257,23259,23262,23264,23267,23269,23272,23274,23277,23279,23281],{"class":473,"line":3854},[471,23258,7433],{"class":492},[471,23260,23261],{"class":514}," iconMap",[471,23263,1243],{"class":484},[471,23265,23266],{"class":12009}," Record",[471,23268,485],{"class":484},[471,23270,23271],{"class":12009},"string",[471,23273,7402],{"class":484},[471,23275,23276],{"class":12009}," string",[471,23278,651],{"class":484},[471,23280,7499],{"class":484},[471,23282,7486],{"class":484},[471,23284,23285,23288,23290,23292,23295,23297],{"class":473,"line":3863},[471,23286,23287],{"class":488},"  success",[471,23289,1243],{"class":484},[471,23291,7419],{"class":484},[471,23293,23294],{"class":502},"✅",[471,23296,8202],{"class":484},[471,23298,20679],{"class":484},[471,23300,23301,23304,23306,23308,23311,23313],{"class":473,"line":3872},[471,23302,23303],{"class":488},"  error",[471,23305,1243],{"class":484},[471,23307,7419],{"class":484},[471,23309,23310],{"class":502},"❌",[471,23312,8202],{"class":484},[471,23314,20679],{"class":484},[471,23316,23317,23320,23322,23324,23327,23329],{"class":473,"line":5334},[471,23318,23319],{"class":488},"  warning",[471,23321,1243],{"class":484},[471,23323,7419],{"class":484},[471,23325,23326],{"class":502},"⚠️",[471,23328,8202],{"class":484},[471,23330,20679],{"class":484},[471,23332,23333,23336,23338,23340,23343],{"class":473,"line":5343},[471,23334,23335],{"class":488},"  info",[471,23337,1243],{"class":484},[471,23339,7419],{"class":484},[471,23341,23342],{"class":502},"ℹ️",[471,23344,7424],{"class":484},[471,23346,23347],{"class":473,"line":5363},[471,23348,7549],{"class":484},[471,23350,23351],{"class":473,"line":5369},[471,23352,532],{"emptyLinePlaceholder":531},[471,23354,23355,23357,23360,23362,23364,23366,23368,23370,23372,23374,23376],{"class":473,"line":5378},[471,23356,7433],{"class":492},[471,23358,23359],{"class":514}," titleMap",[471,23361,1243],{"class":484},[471,23363,23266],{"class":12009},[471,23365,485],{"class":484},[471,23367,23271],{"class":12009},[471,23369,7402],{"class":484},[471,23371,23276],{"class":12009},[471,23373,651],{"class":484},[471,23375,7499],{"class":484},[471,23377,7486],{"class":484},[471,23379,23380,23382,23384,23386,23389,23391],{"class":473,"line":5397},[471,23381,23287],{"class":488},[471,23383,1243],{"class":484},[471,23385,7419],{"class":484},[471,23387,23388],{"class":502},"Thanh cong",[471,23390,8202],{"class":484},[471,23392,20679],{"class":484},[471,23394,23395,23397,23399,23401,23404,23406],{"class":473,"line":5403},[471,23396,23303],{"class":488},[471,23398,1243],{"class":484},[471,23400,7419],{"class":484},[471,23402,23403],{"class":502},"Loi",[471,23405,8202],{"class":484},[471,23407,20679],{"class":484},[471,23409,23410,23412,23414,23416,23419,23421],{"class":473,"line":5412},[471,23411,23319],{"class":488},[471,23413,1243],{"class":484},[471,23415,7419],{"class":484},[471,23417,23418],{"class":502},"Canh bao",[471,23420,8202],{"class":484},[471,23422,20679],{"class":484},[471,23424,23425,23427,23429,23431,23434],{"class":473,"line":5428},[471,23426,23335],{"class":488},[471,23428,1243],{"class":484},[471,23430,7419],{"class":484},[471,23432,23433],{"class":502},"Thong tin",[471,23435,7424],{"class":484},[471,23437,23438],{"class":473,"line":5437},[471,23439,7549],{"class":484},[471,23441,23442],{"class":473,"line":5442},[471,23443,532],{"emptyLinePlaceholder":531},[471,23445,23446,23448,23451,23453,23455,23457,23459,23461,23463,23465,23467],{"class":473,"line":5491},[471,23447,7433],{"class":492},[471,23449,23450],{"class":514}," messageMap",[471,23452,1243],{"class":484},[471,23454,23266],{"class":12009},[471,23456,485],{"class":484},[471,23458,23271],{"class":12009},[471,23460,7402],{"class":484},[471,23462,23276],{"class":12009},[471,23464,651],{"class":484},[471,23466,7499],{"class":484},[471,23468,7486],{"class":484},[471,23470,23471,23473,23475,23477,23480,23482],{"class":473,"line":5540},[471,23472,23287],{"class":488},[471,23474,1243],{"class":484},[471,23476,7419],{"class":484},[471,23478,23479],{"class":502},"Thao tac da duoc thuc hien thanh cong.",[471,23481,8202],{"class":484},[471,23483,20679],{"class":484},[471,23485,23486,23488,23490,23492,23495,23497],{"class":473,"line":5549},[471,23487,23303],{"class":488},[471,23489,1243],{"class":484},[471,23491,7419],{"class":484},[471,23493,23494],{"class":502},"Da xay ra loi. Vui long thu lai sau.",[471,23496,8202],{"class":484},[471,23498,20679],{"class":484},[471,23500,23501,23503,23505,23507,23510,23512],{"class":473,"line":5558},[471,23502,23319],{"class":488},[471,23504,1243],{"class":484},[471,23506,7419],{"class":484},[471,23508,23509],{"class":502},"He thong sap bao tri vao luc 2:00 AM.",[471,23511,8202],{"class":484},[471,23513,20679],{"class":484},[471,23515,23516,23518,23520,23522,23525],{"class":473,"line":5567},[471,23517,23335],{"class":488},[471,23519,1243],{"class":484},[471,23521,7419],{"class":484},[471,23523,23524],{"class":502},"Phien ban moi v2.4.0 da san sang.",[471,23526,7424],{"class":484},[471,23528,23529],{"class":473,"line":5576},[471,23530,7549],{"class":484},[471,23532,23533],{"class":473,"line":5585},[471,23534,532],{"emptyLinePlaceholder":531},[471,23536,23537,23539,23542,23544,23547,23549,23551,23554,23556],{"class":473,"line":5594},[471,23538,7477],{"class":492},[471,23540,23541],{"class":7441}," iconBgClass",[471,23543,7444],{"class":484},[471,23545,23546],{"class":7604},"type",[471,23548,1243],{"class":484},[471,23550,23276],{"class":12009},[471,23552,23553],{"class":484},"):",[471,23555,23276],{"class":12009},[471,23557,7486],{"class":484},[471,23559,23561,23563,23566,23568,23570,23572,23574,23576,23578,23580,23582],{"class":473,"line":23560},113,[471,23562,22127],{"class":492},[471,23564,23565],{"class":514}," map",[471,23567,1243],{"class":484},[471,23569,23266],{"class":12009},[471,23571,485],{"class":484},[471,23573,23271],{"class":12009},[471,23575,7402],{"class":484},[471,23577,23276],{"class":12009},[471,23579,651],{"class":484},[471,23581,7499],{"class":484},[471,23583,7486],{"class":484},[471,23585,23587,23590,23592,23594,23597,23599],{"class":473,"line":23586},114,[471,23588,23589],{"class":488},"    success",[471,23591,1243],{"class":484},[471,23593,7419],{"class":484},[471,23595,23596],{"class":502},"bg-emerald-100",[471,23598,8202],{"class":484},[471,23600,20679],{"class":484},[471,23602,23604,23607,23609,23611,23614,23616],{"class":473,"line":23603},115,[471,23605,23606],{"class":488},"    error",[471,23608,1243],{"class":484},[471,23610,7419],{"class":484},[471,23612,23613],{"class":502},"bg-red-100",[471,23615,8202],{"class":484},[471,23617,20679],{"class":484},[471,23619,23621,23624,23626,23628,23631,23633],{"class":473,"line":23620},116,[471,23622,23623],{"class":488},"    warning",[471,23625,1243],{"class":484},[471,23627,7419],{"class":484},[471,23629,23630],{"class":502},"bg-amber-100",[471,23632,8202],{"class":484},[471,23634,20679],{"class":484},[471,23636,23638,23641,23643,23645,23648],{"class":473,"line":23637},117,[471,23639,23640],{"class":488},"    info",[471,23642,1243],{"class":484},[471,23644,7419],{"class":484},[471,23646,23647],{"class":502},"bg-blue-100",[471,23649,7424],{"class":484},[471,23651,23653],{"class":473,"line":23652},118,[471,23654,7678],{"class":484},[471,23656,23658,23660,23662,23665,23667,23670,23673,23675,23678],{"class":473,"line":23657},119,[471,23659,22192],{"class":7392},[471,23661,23565],{"class":514},[471,23663,23664],{"class":488},"[",[471,23666,23546],{"class":514},[471,23668,23669],{"class":488},"] ",[471,23671,23672],{"class":484},"||",[471,23674,7419],{"class":484},[471,23676,23677],{"class":502},"bg-gray-100",[471,23679,7424],{"class":484},[471,23681,23683],{"class":473,"line":23682},120,[471,23684,7549],{"class":484},[471,23686,23688],{"class":473,"line":23687},121,[471,23689,532],{"emptyLinePlaceholder":531},[471,23691,23693,23695,23698,23700,23702,23704,23706,23708,23710],{"class":473,"line":23692},122,[471,23694,7477],{"class":492},[471,23696,23697],{"class":7441}," progressBarClass",[471,23699,7444],{"class":484},[471,23701,23546],{"class":7604},[471,23703,1243],{"class":484},[471,23705,23276],{"class":12009},[471,23707,23553],{"class":484},[471,23709,23276],{"class":12009},[471,23711,7486],{"class":484},[471,23713,23715,23717,23719,23721,23723,23725,23727,23729,23731,23733,23735],{"class":473,"line":23714},123,[471,23716,22127],{"class":492},[471,23718,23565],{"class":514},[471,23720,1243],{"class":484},[471,23722,23266],{"class":12009},[471,23724,485],{"class":484},[471,23726,23271],{"class":12009},[471,23728,7402],{"class":484},[471,23730,23276],{"class":12009},[471,23732,651],{"class":484},[471,23734,7499],{"class":484},[471,23736,7486],{"class":484},[471,23738,23740,23742,23744,23746,23749,23751],{"class":473,"line":23739},124,[471,23741,23589],{"class":488},[471,23743,1243],{"class":484},[471,23745,7419],{"class":484},[471,23747,23748],{"class":502},"bg-emerald-500",[471,23750,8202],{"class":484},[471,23752,20679],{"class":484},[471,23754,23756,23758,23760,23762,23765,23767],{"class":473,"line":23755},125,[471,23757,23606],{"class":488},[471,23759,1243],{"class":484},[471,23761,7419],{"class":484},[471,23763,23764],{"class":502},"bg-red-500",[471,23766,8202],{"class":484},[471,23768,20679],{"class":484},[471,23770,23772,23774,23776,23778,23781,23783],{"class":473,"line":23771},126,[471,23773,23623],{"class":488},[471,23775,1243],{"class":484},[471,23777,7419],{"class":484},[471,23779,23780],{"class":502},"bg-amber-500",[471,23782,8202],{"class":484},[471,23784,20679],{"class":484},[471,23786,23788,23790,23792,23794,23797],{"class":473,"line":23787},127,[471,23789,23640],{"class":488},[471,23791,1243],{"class":484},[471,23793,7419],{"class":484},[471,23795,23796],{"class":502},"bg-blue-500",[471,23798,7424],{"class":484},[471,23800,23802],{"class":473,"line":23801},128,[471,23803,7678],{"class":484},[471,23805,23807,23809,23811,23813,23815,23817,23819,23821,23824],{"class":473,"line":23806},129,[471,23808,22192],{"class":7392},[471,23810,23565],{"class":514},[471,23812,23664],{"class":488},[471,23814,23546],{"class":514},[471,23816,23669],{"class":488},[471,23818,23672],{"class":484},[471,23820,7419],{"class":484},[471,23822,23823],{"class":502},"bg-gray-500",[471,23825,7424],{"class":484},[471,23827,23829],{"class":473,"line":23828},130,[471,23830,7549],{"class":484},[471,23832,23834],{"class":473,"line":23833},131,[471,23835,532],{"emptyLinePlaceholder":531},[471,23837,23839,23841,23844,23846,23848,23850,23852,23854,23856,23858,23860,23862,23864,23866,23868,23870,23872,23874,23876,23878,23880,23882],{"class":473,"line":23838},132,[471,23840,7477],{"class":492},[471,23842,23843],{"class":7441}," addToast",[471,23845,7444],{"class":484},[471,23847,23546],{"class":7604},[471,23849,1243],{"class":484},[471,23851,7419],{"class":484},[471,23853,1232],{"class":502},[471,23855,8202],{"class":484},[471,23857,20629],{"class":484},[471,23859,7419],{"class":484},[471,23861,23176],{"class":502},[471,23863,8202],{"class":484},[471,23865,20629],{"class":484},[471,23867,7419],{"class":484},[471,23869,20017],{"class":502},[471,23871,8202],{"class":484},[471,23873,20629],{"class":484},[471,23875,7419],{"class":484},[471,23877,23193],{"class":502},[471,23879,8202],{"class":484},[471,23881,451],{"class":484},[471,23883,7486],{"class":484},[471,23885,23887,23889,23892,23894,23897],{"class":473,"line":23886},133,[471,23888,22127],{"class":492},[471,23890,23891],{"class":514}," id",[471,23893,7499],{"class":484},[471,23895,23896],{"class":514}," nextId",[471,23898,23899],{"class":484},"++\n",[471,23901,23903,23905,23908,23910,23912,23914,23916,23918,23920,23922,23924,23927,23929,23932],{"class":473,"line":23902},134,[471,23904,22127],{"class":492},[471,23906,23907],{"class":514}," toast",[471,23909,1243],{"class":484},[471,23911,23144],{"class":12009},[471,23913,7499],{"class":484},[471,23915,7396],{"class":484},[471,23917,23891],{"class":514},[471,23919,7402],{"class":484},[471,23921,779],{"class":514},[471,23923,7402],{"class":484},[471,23925,23926],{"class":488}," isLeaving",[471,23928,1243],{"class":484},[471,23930,23931],{"class":7447}," false",[471,23933,21747],{"class":484},[471,23935,23937,23940,23942,23944,23946,23949,23951,23954],{"class":473,"line":23936},135,[471,23938,23939],{"class":514},"  toasts",[471,23941,2917],{"class":484},[471,23943,7496],{"class":514},[471,23945,2917],{"class":484},[471,23947,23948],{"class":7441},"push",[471,23950,7444],{"class":488},[471,23952,23953],{"class":514},"toast",[471,23955,7451],{"class":488},[471,23957,23959],{"class":473,"line":23958},136,[471,23960,532],{"emptyLinePlaceholder":531},[471,23962,23964],{"class":473,"line":23963},137,[471,23965,23966],{"class":477},"  \u002F\u002F Auto dismiss sau 4 giây\n",[471,23968,23970,23972,23974,23976,23978],{"class":473,"line":23969},138,[471,23971,7507],{"class":7441},[471,23973,7444],{"class":488},[471,23975,7483],{"class":484},[471,23977,7514],{"class":492},[471,23979,7486],{"class":484},[471,23981,23983,23986,23988,23990,23993,23995,23997,23999,24002,24004,24006,24008,24010,24012,24014,24016,24018],{"class":473,"line":23982},139,[471,23984,23985],{"class":492},"    const",[471,23987,22149],{"class":514},[471,23989,7499],{"class":484},[471,23991,23992],{"class":514}," toasts",[471,23994,2917],{"class":484},[471,23996,7496],{"class":514},[471,23998,2917],{"class":484},[471,24000,24001],{"class":7441},"find",[471,24003,7444],{"class":488},[471,24005,22144],{"class":7604},[471,24007,7514],{"class":492},[471,24009,22149],{"class":514},[471,24011,2917],{"class":484},[471,24013,22154],{"class":514},[471,24015,20855],{"class":484},[471,24017,23891],{"class":514},[471,24019,7451],{"class":488},[471,24021,24023,24026,24028,24030,24032,24034,24036,24039,24041],{"class":473,"line":24022},140,[471,24024,24025],{"class":7392},"    if",[471,24027,7601],{"class":488},[471,24029,22144],{"class":514},[471,24031,7541],{"class":488},[471,24033,22144],{"class":514},[471,24035,2917],{"class":484},[471,24037,24038],{"class":514},"isLeaving",[471,24040,7499],{"class":484},[471,24042,7666],{"class":7447},[471,24044,24046],{"class":473,"line":24045},141,[471,24047,532],{"emptyLinePlaceholder":531},[471,24049,24051],{"class":473,"line":24050},142,[471,24052,24053],{"class":477},"    \u002F\u002F Xóa khỏi array sau khi transition kết thúc\n",[471,24055,24057,24060,24062,24064,24066],{"class":473,"line":24056},143,[471,24058,24059],{"class":7441},"    setTimeout",[471,24061,7444],{"class":488},[471,24063,7483],{"class":484},[471,24065,7514],{"class":492},[471,24067,7486],{"class":484},[471,24069,24071,24074,24076,24078,24080,24082,24084,24086,24088,24091,24093,24095,24097,24099,24101,24103,24106,24108],{"class":473,"line":24070},144,[471,24072,24073],{"class":514},"      toasts",[471,24075,2917],{"class":484},[471,24077,7496],{"class":514},[471,24079,7499],{"class":484},[471,24081,23992],{"class":514},[471,24083,2917],{"class":484},[471,24085,7496],{"class":514},[471,24087,2917],{"class":484},[471,24089,24090],{"class":7441},"filter",[471,24092,7444],{"class":488},[471,24094,22144],{"class":7604},[471,24096,7514],{"class":492},[471,24098,22149],{"class":514},[471,24100,2917],{"class":484},[471,24102,22154],{"class":514},[471,24104,24105],{"class":484}," !==",[471,24107,23891],{"class":514},[471,24109,7451],{"class":488},[471,24111,24113,24116,24118],{"class":473,"line":24112},145,[471,24114,24115],{"class":484},"    },",[471,24117,7538],{"class":7537},[471,24119,7451],{"class":488},[471,24121,24123,24125,24128],{"class":473,"line":24122},146,[471,24124,7534],{"class":484},[471,24126,24127],{"class":7537}," 4000",[471,24129,7451],{"class":488},[471,24131,24133],{"class":473,"line":24132},147,[471,24134,7549],{"class":484},[471,24136,24138],{"class":473,"line":24137},148,[471,24139,532],{"emptyLinePlaceholder":531},[471,24141,24143,24145,24148,24150,24152,24154,24156,24158],{"class":473,"line":24142},149,[471,24144,7477],{"class":492},[471,24146,24147],{"class":7441}," removeToast",[471,24149,7444],{"class":484},[471,24151,22154],{"class":7604},[471,24153,1243],{"class":484},[471,24155,20830],{"class":12009},[471,24157,451],{"class":484},[471,24159,7486],{"class":484},[471,24161,24163,24165,24167,24169,24171,24173,24175,24177,24179,24181,24183,24185,24187,24189,24191,24193,24195],{"class":473,"line":24162},150,[471,24164,22127],{"class":492},[471,24166,22149],{"class":514},[471,24168,7499],{"class":484},[471,24170,23992],{"class":514},[471,24172,2917],{"class":484},[471,24174,7496],{"class":514},[471,24176,2917],{"class":484},[471,24178,24001],{"class":7441},[471,24180,7444],{"class":488},[471,24182,22144],{"class":7604},[471,24184,7514],{"class":492},[471,24186,22149],{"class":514},[471,24188,2917],{"class":484},[471,24190,22154],{"class":514},[471,24192,20855],{"class":484},[471,24194,23891],{"class":514},[471,24196,7451],{"class":488},[471,24198,24200,24202,24204,24206,24208,24210,24212,24214,24216],{"class":473,"line":24199},151,[471,24201,7616],{"class":7392},[471,24203,7601],{"class":488},[471,24205,22144],{"class":514},[471,24207,7541],{"class":488},[471,24209,22144],{"class":514},[471,24211,2917],{"class":484},[471,24213,24038],{"class":514},[471,24215,7499],{"class":484},[471,24217,7666],{"class":7447},[471,24219,24221],{"class":473,"line":24220},152,[471,24222,532],{"emptyLinePlaceholder":531},[471,24224,24226,24228,24230,24232,24234],{"class":473,"line":24225},153,[471,24227,7507],{"class":7441},[471,24229,7444],{"class":488},[471,24231,7483],{"class":484},[471,24233,7514],{"class":492},[471,24235,7486],{"class":484},[471,24237,24239,24242,24244,24246,24248,24250,24252,24254,24256,24258,24260,24262,24264,24266,24268,24270,24272,24274],{"class":473,"line":24238},154,[471,24240,24241],{"class":514},"    toasts",[471,24243,2917],{"class":484},[471,24245,7496],{"class":514},[471,24247,7499],{"class":484},[471,24249,23992],{"class":514},[471,24251,2917],{"class":484},[471,24253,7496],{"class":514},[471,24255,2917],{"class":484},[471,24257,24090],{"class":7441},[471,24259,7444],{"class":488},[471,24261,22144],{"class":7604},[471,24263,7514],{"class":492},[471,24265,22149],{"class":514},[471,24267,2917],{"class":484},[471,24269,22154],{"class":514},[471,24271,24105],{"class":484},[471,24273,23891],{"class":514},[471,24275,7451],{"class":488},[471,24277,24279,24281,24283],{"class":473,"line":24278},155,[471,24280,7534],{"class":484},[471,24282,7538],{"class":7537},[471,24284,7451],{"class":488},[471,24286,24288],{"class":473,"line":24287},156,[471,24289,7549],{"class":484},[471,24291,24293,24295,24297],{"class":473,"line":24292},157,[471,24294,521],{"class":484},[471,24296,7370],{"class":488},[471,24298,508],{"class":484},[5602,24300],{},[1230,24302,24304],{"color":6137,"icon":24303},"i-lucide-arrow-right","Tiếp theo: Tiếp tục học về Layout (Flexbox, Grid, Spacing, Sizing) và Responsive Design trong phần tiếp theo.",[14445,24306,24307],{},"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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":467,"searchDepth":481,"depth":481,"links":24309},[24310,24321,24329,24337,24346,24349,24356,24359],{"id":429,"depth":481,"text":24311,"children":24312},"1. State Variants (hover:, focus:, active:, visited:, focus-visible:, focus-within:)",[24313,24314,24315,24316,24317,24318,24319,24320],{"id":826,"depth":511,"text":827},{"id":965,"depth":511,"text":966},{"id":1069,"depth":511,"text":1070},{"id":1308,"depth":511,"text":1309},{"id":1398,"depth":511,"text":1399},{"id":2329,"depth":511,"text":2330},{"id":2905,"depth":511,"text":2906},{"id":3881,"depth":511,"text":3882},{"id":5606,"depth":481,"text":24322,"children":24323},"2. Transitions (transition, transition-all, transition-colors, transition-opacity, transition-transform)",[24324,24325,24326,24327,24328],{"id":5793,"depth":511,"text":5794},{"id":6155,"depth":511,"text":6156},{"id":6233,"depth":511,"text":6234},{"id":6793,"depth":511,"text":6794},{"id":7696,"depth":511,"text":7697},{"id":8259,"depth":481,"text":24330,"children":24331},"3. Transforms (scale-*, rotate-*, translate-x-*, translate-y-*, skew-*, transform-origin)",[24332,24333,24334,24335,24336],{"id":8887,"depth":511,"text":8888},{"id":8278,"depth":511,"text":9134},{"id":9254,"depth":511,"text":9255},{"id":9744,"depth":511,"text":9745},{"id":10439,"depth":511,"text":10440},{"id":11553,"depth":481,"text":24338,"children":24339},"4. Animations (animate-spin, animate-ping, animate-pulse, animate-bounce)",[24340,24342,24343,24344,24345],{"id":11751,"depth":511,"text":24341},"Custom animations via @theme",{"id":12153,"depth":511,"text":12154},{"id":12240,"depth":511,"text":12241},{"id":12902,"depth":511,"text":12903},{"id":13981,"depth":511,"text":13982},{"id":14584,"depth":481,"text":14585,"children":24347},[24348],{"id":14831,"depth":511,"text":14832},{"id":15493,"depth":481,"text":24350,"children":24351},"6. Filters (blur-*, brightness-*, contrast-*, grayscale-*, hue-rotate-*, invert-*, saturate-*, sepia-*, drop-shadow-*)",[24352,24353,24354,24355],{"id":16244,"depth":511,"text":16245},{"id":16418,"depth":511,"text":16419},{"id":17166,"depth":511,"text":17167},{"id":17897,"depth":511,"text":17898},{"id":18546,"depth":481,"text":18547,"children":24357},[24358],{"id":18989,"depth":511,"text":18990},{"id":20013,"depth":481,"text":20014,"children":24360},[24361,24362,24363],{"id":20026,"depth":511,"text":20027},{"id":20884,"depth":511,"text":20885},{"id":22262,"depth":511,"text":22263},"Tailwind CSS v4 — hover\u002Ffocus\u002Factive states, transitions, transforms 3D, animations, filters, backdrop. Bài tập interactive components.","md",null,{},{"title":402,"icon":405},{"title":422,"description":24364},"oyAggOB4P7dlV73l8VIpjSIxcu_3KGkfqizKUNVa7dQ",[24372,24374],{"title":397,"path":398,"stem":399,"description":24373,"icon":400,"children":-1},"Tailwind CSS v4 — font, text, color (OKLCH), background, gradient, border, outline. Bài tập thiết kế typography system và color palette.",{"title":407,"path":408,"stem":409,"description":24375,"icon":410,"children":-1},"Tailwind CSS v4 — responsive breakpoints, container queries, dark mode, custom variants. Bài tập responsive layout và dark mode theme.",1783490362036]