[{"data":1,"prerenderedAt":17625},["ShallowReactive",2],{"navigation_docs":3,"-tu-hoc-tailwindcss-typography-colors":420,"-tu-hoc-tailwindcss-typography-colors-surround":17620},[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":17613,"extension":17614,"links":17615,"meta":17616,"navigation":17617,"path":398,"seo":17618,"stem":399,"__hash__":17619},"docs\u002F2.tu-hoc\u002F6.tailwindcss\u002F2.typography-colors.md","Typography, Colors & Backgrounds",{"type":424,"value":425,"toc":17542},"minimark",[426,447,451,516,522,644,650,748,766,773,786,795,925,930,983,988,1058,1062,1067,1097,1339,1342,1359,1372,1739,1743,1873,1877,1888,1930,1934,1939,2217,2219,2223,2230,2403,2410,2583,2587,2760,2767,2823,2827,2832,2843,3347,3351,3356,3604,3606,3610,3614,3877,3881,3998,4002,4126,4130,4135,4554,4556,4560,4864,4880,4884,4889,5467,5469,5473,5480,5624,5629,5692,5753,5757,5762,6045,6047,6051,6058,6073,6077,6080,6179,6183,6351,6358,6368,6517,6521,6529,6543,6661,6925,6929,6934,8406,8417,8427,8756,8758,8771,8775,8891,8895,9009,9023,9214,9218,9645,9649,9654,10026,10030,10035,10623,10630,10635,11568,11570,11574,11578,11897,11901,12195,12199,12319,12338,12427,12431,12436,12934,12938,12943,13804,13808,13813,14920,14922,14926,14930,15229,15233,15460,15555,15559,15564,16721,16725,16730,17530,17532,17539],[427,428,430,431,435,436,435,439,442,443,446],"h2",{"id":429},"_1-font-family-font-sans-font-serif-font-mono-custom-fonts-trong-theme","1. Font Family (",[432,433,434],"code",{},"font-sans",", ",[432,437,438],{},"font-serif",[432,440,441],{},"font-mono",", custom fonts trong ",[432,444,445],{},"@theme",")",[448,449,450],"p",{},"Tailwind CSS cung cấp sẵn 3 font stack mặc định:",[452,453,454,470],"table",{},[455,456,457],"thead",{},[458,459,460,464,467],"tr",{},[461,462,463],"th",{},"Class",[461,465,466],{},"CSS",[461,468,469],{},"Mô tả",[471,472,473,488,502],"tbody",{},[458,474,475,480,485],{},[476,477,478],"td",{},[432,479,434],{},[476,481,482],{},[432,483,484],{},"ui-sans-serif, system-ui, sans-serif, ...",[476,486,487],{},"Font không chân, tối ưu cho UI",[458,489,490,494,499],{},[476,491,492],{},[432,493,438],{},[476,495,496],{},[432,497,498],{},"ui-serif, Georgia, Cambria, ...",[476,500,501],{},"Font có chân, dùng cho bài viết dài",[458,503,504,508,513],{},[476,505,506],{},[432,507,441],{},[476,509,510],{},[432,511,512],{},"ui-monospace, SFMono-Regular, ...",[476,514,515],{},"Font monospace, dùng cho code",[448,517,518,519,521],{},"Trong Tailwind CSS v4, bạn có thể thêm custom font family thông qua ",[432,520,445],{}," directive trong CSS:",[523,524,529],"pre",{"className":525,"code":526,"language":527,"meta":528,"style":528},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* app\u002Fassets\u002Fcss\u002Fmain.css *\u002F\n@import \"tailwindcss\";\n\n@theme {\n  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;\n  --font-display: 'Clash Display', ui-sans-serif, system-ui, sans-serif;\n  --font-mono: 'JetBrains Mono', ui-monospace, monospace;\n}\n","css","",[432,530,531,540,561,568,576,602,622,638],{"__ignoreMap":528},[532,533,536],"span",{"class":534,"line":535},"line",1,[532,537,539],{"class":538},"sHwdD","\u002F* app\u002Fassets\u002Fcss\u002Fmain.css *\u002F\n",[532,541,543,547,551,555,558],{"class":534,"line":542},2,[532,544,546],{"class":545},"s7zQu","@import",[532,548,550],{"class":549},"sMK4o"," \"",[532,552,554],{"class":553},"sfazB","tailwindcss",[532,556,557],{"class":549},"\"",[532,559,560],{"class":549},";\n",[532,562,564],{"class":534,"line":563},3,[532,565,567],{"emptyLinePlaceholder":566},true,"\n",[532,569,571,573],{"class":534,"line":570},4,[532,572,445],{"class":545},[532,574,575],{"class":549}," {\n",[532,577,579,583,586,590,592,595,597,600],{"class":534,"line":578},5,[532,580,582],{"class":581},"sTEyZ","  --font-sans: 'Inter'",[532,584,585],{"class":549},",",[532,587,589],{"class":588},"sBMFI"," ui-sans-serif",[532,591,585],{"class":549},[532,593,594],{"class":588}," system-ui",[532,596,585],{"class":549},[532,598,599],{"class":588}," sans-serif",[532,601,560],{"class":581},[532,603,605,608,610,612,614,616,618,620],{"class":534,"line":604},6,[532,606,607],{"class":581},"  --font-display: 'Clash Display'",[532,609,585],{"class":549},[532,611,589],{"class":588},[532,613,585],{"class":549},[532,615,594],{"class":588},[532,617,585],{"class":549},[532,619,599],{"class":588},[532,621,560],{"class":581},[532,623,625,628,630,633,635],{"class":534,"line":624},7,[532,626,627],{"class":581},"  --font-mono: 'JetBrains Mono'",[532,629,585],{"class":549},[532,631,632],{"class":588}," ui-monospace",[532,634,585],{"class":549},[532,636,637],{"class":581}," monospace;\n",[532,639,641],{"class":534,"line":640},8,[532,642,643],{"class":581},"}\n",[448,645,646,647,649],{},"Sau khi định nghĩa trong ",[432,648,445],{},", bạn dùng class tương ứng:",[523,651,655],{"className":652,"code":653,"language":654,"meta":528,"style":528},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ch1 class=\"font-sans\">Heading với Inter\u003C\u002Fh1>\n\u003Ch2 class=\"font-display\">Display heading\u003C\u002Fh2>\n\u003Ccode class=\"font-mono\">console.log('hello')\u003C\u002Fcode>\n","html",[432,656,657,693,721],{"__ignoreMap":528},[532,658,659,662,666,670,673,675,677,679,682,685,688,690],{"class":534,"line":535},[532,660,661],{"class":549},"\u003C",[532,663,665],{"class":664},"swJcz","h1",[532,667,669],{"class":668},"spNyl"," class",[532,671,672],{"class":549},"=",[532,674,557],{"class":549},[532,676,434],{"class":553},[532,678,557],{"class":549},[532,680,681],{"class":549},">",[532,683,684],{"class":581},"Heading với Inter",[532,686,687],{"class":549},"\u003C\u002F",[532,689,665],{"class":664},[532,691,692],{"class":549},">\n",[532,694,695,697,699,701,703,705,708,710,712,715,717,719],{"class":534,"line":542},[532,696,661],{"class":549},[532,698,427],{"class":664},[532,700,669],{"class":668},[532,702,672],{"class":549},[532,704,557],{"class":549},[532,706,707],{"class":553},"font-display",[532,709,557],{"class":549},[532,711,681],{"class":549},[532,713,714],{"class":581},"Display heading",[532,716,687],{"class":549},[532,718,427],{"class":664},[532,720,692],{"class":549},[532,722,723,725,727,729,731,733,735,737,739,742,744,746],{"class":534,"line":563},[532,724,661],{"class":549},[532,726,432],{"class":664},[532,728,669],{"class":668},[532,730,672],{"class":549},[532,732,557],{"class":549},[532,734,441],{"class":553},[532,736,557],{"class":549},[532,738,681],{"class":549},[532,740,741],{"class":581},"console.log('hello')",[532,743,687],{"class":549},[532,745,432],{"class":664},[532,747,692],{"class":549},[749,750,753,754,758,759,762,763,765],"callout",{"color":751,"icon":752},"warning","i-lucide-lightbulb","⭐ ",[755,756,757],"strong",{},"Key concept:"," Tailwind v4 dùng CSS-based configuration thay vì ",[432,760,761],{},"tailwind.config.js",". Mọi custom đều định nghĩa trong ",[432,764,445],{}," block — gọn hơn, type-safe hơn, và tận dụng CSS cascade tự nhiên.",[767,768,770,771],"h3",{"id":769},"bài-tập-1-setup-custom-google-font-inter-trong-theme","Bài tập 1: Setup custom Google Font (Inter) trong ",[432,772,445],{},[448,774,775,778,779,782,783,785],{},[755,776,777],{},"Yêu cầu:"," Import Google Font Inter vào project Nuxt, định nghĩa ",[432,780,781],{},"--font-sans"," trong ",[432,784,445],{},", và áp dụng cho toàn bộ body.",[448,787,788],{},[755,789,790,791,794],{},"Bước 1 — Import font trong ",[432,792,793],{},"nuxt.config.ts",":",[523,796,800],{"className":797,"code":798,"language":799,"meta":528,"style":528},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  app: {\n    head: {\n      link: [\n        {\n          rel: 'stylesheet',\n          href: 'https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&display=swap'\n        }\n      ]\n    }\n  }\n})\n","typescript",[432,801,802,807,825,834,843,853,858,877,892,898,904,910,916],{"__ignoreMap":528},[532,803,804],{"class":534,"line":535},[532,805,806],{"class":538},"\u002F\u002F nuxt.config.ts\n",[532,808,809,812,815,819,822],{"class":534,"line":542},[532,810,811],{"class":545},"export",[532,813,814],{"class":545}," default",[532,816,818],{"class":817},"s2Zo4"," defineNuxtConfig",[532,820,821],{"class":581},"(",[532,823,824],{"class":549},"{\n",[532,826,827,830,832],{"class":534,"line":563},[532,828,829],{"class":664},"  app",[532,831,794],{"class":549},[532,833,575],{"class":549},[532,835,836,839,841],{"class":534,"line":570},[532,837,838],{"class":664},"    head",[532,840,794],{"class":549},[532,842,575],{"class":549},[532,844,845,848,850],{"class":534,"line":578},[532,846,847],{"class":664},"      link",[532,849,794],{"class":549},[532,851,852],{"class":581}," [\n",[532,854,855],{"class":534,"line":604},[532,856,857],{"class":549},"        {\n",[532,859,860,863,865,868,871,874],{"class":534,"line":624},[532,861,862],{"class":664},"          rel",[532,864,794],{"class":549},[532,866,867],{"class":549}," '",[532,869,870],{"class":553},"stylesheet",[532,872,873],{"class":549},"'",[532,875,876],{"class":549},",\n",[532,878,879,882,884,886,889],{"class":534,"line":640},[532,880,881],{"class":664},"          href",[532,883,794],{"class":549},[532,885,867],{"class":549},[532,887,888],{"class":553},"https:\u002F\u002Ffonts.googleapis.com\u002Fcss2?family=Inter:wght@400;500;600;700&display=swap",[532,890,891],{"class":549},"'\n",[532,893,895],{"class":534,"line":894},9,[532,896,897],{"class":549},"        }\n",[532,899,901],{"class":534,"line":900},10,[532,902,903],{"class":581},"      ]\n",[532,905,907],{"class":534,"line":906},11,[532,908,909],{"class":549},"    }\n",[532,911,913],{"class":534,"line":912},12,[532,914,915],{"class":549},"  }\n",[532,917,919,922],{"class":534,"line":918},13,[532,920,921],{"class":549},"}",[532,923,924],{"class":581},")\n",[448,926,927],{},[755,928,929],{},"Bước 2 — Khai báo trong CSS:",[523,931,933],{"className":525,"code":932,"language":527,"meta":528,"style":528},"\u002F* app\u002Fassets\u002Fcss\u002Fmain.css *\u002F\n@import \"tailwindcss\";\n\n@theme {\n  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;\n}\n",[432,934,935,939,951,955,961,979],{"__ignoreMap":528},[532,936,937],{"class":534,"line":535},[532,938,539],{"class":538},[532,940,941,943,945,947,949],{"class":534,"line":542},[532,942,546],{"class":545},[532,944,550],{"class":549},[532,946,554],{"class":553},[532,948,557],{"class":549},[532,950,560],{"class":549},[532,952,953],{"class":534,"line":563},[532,954,567],{"emptyLinePlaceholder":566},[532,956,957,959],{"class":534,"line":570},[532,958,445],{"class":545},[532,960,575],{"class":549},[532,962,963,965,967,969,971,973,975,977],{"class":534,"line":578},[532,964,582],{"class":581},[532,966,585],{"class":549},[532,968,589],{"class":588},[532,970,585],{"class":549},[532,972,594],{"class":588},[532,974,585],{"class":549},[532,976,599],{"class":588},[532,978,560],{"class":581},[532,980,981],{"class":534,"line":604},[532,982,643],{"class":581},[448,984,985],{},[755,986,987],{},"Bước 3 — Áp dụng cho body trong layout:",[523,989,993],{"className":990,"code":991,"language":992,"meta":528,"style":528},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- app\u002Flayouts\u002Fdefault.vue -->\n\u003Ctemplate>\n  \u003Cbody class=\"font-sans antialiased\">\n    \u003Cslot \u002F>\n  \u003C\u002Fbody>\n\u003C\u002Ftemplate>\n","vue",[432,994,995,1000,1009,1030,1041,1050],{"__ignoreMap":528},[532,996,997],{"class":534,"line":535},[532,998,999],{"class":538},"\u003C!-- app\u002Flayouts\u002Fdefault.vue -->\n",[532,1001,1002,1004,1007],{"class":534,"line":542},[532,1003,661],{"class":549},[532,1005,1006],{"class":664},"template",[532,1008,692],{"class":549},[532,1010,1011,1014,1017,1019,1021,1023,1026,1028],{"class":534,"line":563},[532,1012,1013],{"class":549},"  \u003C",[532,1015,1016],{"class":664},"body",[532,1018,669],{"class":668},[532,1020,672],{"class":549},[532,1022,557],{"class":549},[532,1024,1025],{"class":553},"font-sans antialiased",[532,1027,557],{"class":549},[532,1029,692],{"class":549},[532,1031,1032,1035,1038],{"class":534,"line":570},[532,1033,1034],{"class":549},"    \u003C",[532,1036,1037],{"class":664},"slot",[532,1039,1040],{"class":549}," \u002F>\n",[532,1042,1043,1046,1048],{"class":534,"line":578},[532,1044,1045],{"class":549},"  \u003C\u002F",[532,1047,1016],{"class":664},[532,1049,692],{"class":549},[532,1051,1052,1054,1056],{"class":534,"line":604},[532,1053,687],{"class":549},[532,1055,1006],{"class":664},[532,1057,692],{"class":549},[767,1059,1061],{"id":1060},"bài-tập-2-typography-scale-cho-headings-body-text","Bài tập 2: Typography scale cho headings + body text",[448,1063,1064,1066],{},[755,1065,777],{}," Tạo một typography system gồm:",[1068,1069,1070,1076,1081,1086,1091],"ul",{},[1071,1072,1073,1075],"li",{},[432,1074,665],{},": font-display, 48px, bold",[1071,1077,1078,1080],{},[432,1079,427],{},": font-display, 36px, semibold",[1071,1082,1083,1085],{},[432,1084,767],{},": font-sans, 24px, semibold",[1071,1087,1088,1090],{},[432,1089,1016],{},": font-sans, 16px, leading-relaxed",[1071,1092,1093,1096],{},[432,1094,1095],{},"small",": font-sans, 14px, text-gray-500",[523,1098,1100],{"className":990,"code":1099,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Carticle class=\"max-w-3xl mx-auto px-6 py-12\">\n    \u003Ch1 class=\"font-display text-5xl font-bold tracking-tight text-gray-900\">\n      Tiêu đề bài viết chính\n    \u003C\u002Fh1>\n\n    \u003Ch2 class=\"font-display text-4xl font-semibold tracking-tight text-gray-800 mt-12\">\n      Section heading cấp 2\n    \u003C\u002Fh2>\n\n    \u003Ch3 class=\"font-sans text-2xl font-semibold text-gray-800 mt-8\">\n      Sub-section cấp 3\n    \u003C\u002Fh3>\n\n    \u003Cp class=\"text-base leading-relaxed text-gray-700 mt-4\">\n      Nội dung body text với leading-relaxed để đọc thoải mái hơn.\n      Khoảng cách dòng 1.625 giúp mắt không bị mỏi khi đọc đoạn văn dài.\n    \u003C\u002Fp>\n\n    \u003Csmall class=\"block text-sm text-gray-500 mt-2\">\n      Caption hoặc ghi chú nhỏ đi kèm\n    \u003C\u002Fsmall>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[432,1101,1102,1110,1130,1149,1154,1163,1167,1186,1191,1199,1203,1222,1227,1235,1240,1260,1266,1272,1281,1286,1306,1312,1321,1330],{"__ignoreMap":528},[532,1103,1104,1106,1108],{"class":534,"line":535},[532,1105,661],{"class":549},[532,1107,1006],{"class":664},[532,1109,692],{"class":549},[532,1111,1112,1114,1117,1119,1121,1123,1126,1128],{"class":534,"line":542},[532,1113,1013],{"class":549},[532,1115,1116],{"class":664},"article",[532,1118,669],{"class":668},[532,1120,672],{"class":549},[532,1122,557],{"class":549},[532,1124,1125],{"class":553},"max-w-3xl mx-auto px-6 py-12",[532,1127,557],{"class":549},[532,1129,692],{"class":549},[532,1131,1132,1134,1136,1138,1140,1142,1145,1147],{"class":534,"line":563},[532,1133,1034],{"class":549},[532,1135,665],{"class":664},[532,1137,669],{"class":668},[532,1139,672],{"class":549},[532,1141,557],{"class":549},[532,1143,1144],{"class":553},"font-display text-5xl font-bold tracking-tight text-gray-900",[532,1146,557],{"class":549},[532,1148,692],{"class":549},[532,1150,1151],{"class":534,"line":570},[532,1152,1153],{"class":581},"      Tiêu đề bài viết chính\n",[532,1155,1156,1159,1161],{"class":534,"line":578},[532,1157,1158],{"class":549},"    \u003C\u002F",[532,1160,665],{"class":664},[532,1162,692],{"class":549},[532,1164,1165],{"class":534,"line":604},[532,1166,567],{"emptyLinePlaceholder":566},[532,1168,1169,1171,1173,1175,1177,1179,1182,1184],{"class":534,"line":624},[532,1170,1034],{"class":549},[532,1172,427],{"class":664},[532,1174,669],{"class":668},[532,1176,672],{"class":549},[532,1178,557],{"class":549},[532,1180,1181],{"class":553},"font-display text-4xl font-semibold tracking-tight text-gray-800 mt-12",[532,1183,557],{"class":549},[532,1185,692],{"class":549},[532,1187,1188],{"class":534,"line":640},[532,1189,1190],{"class":581},"      Section heading cấp 2\n",[532,1192,1193,1195,1197],{"class":534,"line":894},[532,1194,1158],{"class":549},[532,1196,427],{"class":664},[532,1198,692],{"class":549},[532,1200,1201],{"class":534,"line":900},[532,1202,567],{"emptyLinePlaceholder":566},[532,1204,1205,1207,1209,1211,1213,1215,1218,1220],{"class":534,"line":906},[532,1206,1034],{"class":549},[532,1208,767],{"class":664},[532,1210,669],{"class":668},[532,1212,672],{"class":549},[532,1214,557],{"class":549},[532,1216,1217],{"class":553},"font-sans text-2xl font-semibold text-gray-800 mt-8",[532,1219,557],{"class":549},[532,1221,692],{"class":549},[532,1223,1224],{"class":534,"line":912},[532,1225,1226],{"class":581},"      Sub-section cấp 3\n",[532,1228,1229,1231,1233],{"class":534,"line":918},[532,1230,1158],{"class":549},[532,1232,767],{"class":664},[532,1234,692],{"class":549},[532,1236,1238],{"class":534,"line":1237},14,[532,1239,567],{"emptyLinePlaceholder":566},[532,1241,1243,1245,1247,1249,1251,1253,1256,1258],{"class":534,"line":1242},15,[532,1244,1034],{"class":549},[532,1246,448],{"class":664},[532,1248,669],{"class":668},[532,1250,672],{"class":549},[532,1252,557],{"class":549},[532,1254,1255],{"class":553},"text-base leading-relaxed text-gray-700 mt-4",[532,1257,557],{"class":549},[532,1259,692],{"class":549},[532,1261,1263],{"class":534,"line":1262},16,[532,1264,1265],{"class":581},"      Nội dung body text với leading-relaxed để đọc thoải mái hơn.\n",[532,1267,1269],{"class":534,"line":1268},17,[532,1270,1271],{"class":581},"      Khoảng cách dòng 1.625 giúp mắt không bị mỏi khi đọc đoạn văn dài.\n",[532,1273,1275,1277,1279],{"class":534,"line":1274},18,[532,1276,1158],{"class":549},[532,1278,448],{"class":664},[532,1280,692],{"class":549},[532,1282,1284],{"class":534,"line":1283},19,[532,1285,567],{"emptyLinePlaceholder":566},[532,1287,1289,1291,1293,1295,1297,1299,1302,1304],{"class":534,"line":1288},20,[532,1290,1034],{"class":549},[532,1292,1095],{"class":664},[532,1294,669],{"class":668},[532,1296,672],{"class":549},[532,1298,557],{"class":549},[532,1300,1301],{"class":553},"block text-sm text-gray-500 mt-2",[532,1303,557],{"class":549},[532,1305,692],{"class":549},[532,1307,1309],{"class":534,"line":1308},21,[532,1310,1311],{"class":581},"      Caption hoặc ghi chú nhỏ đi kèm\n",[532,1313,1315,1317,1319],{"class":534,"line":1314},22,[532,1316,1158],{"class":549},[532,1318,1095],{"class":664},[532,1320,692],{"class":549},[532,1322,1324,1326,1328],{"class":534,"line":1323},23,[532,1325,1045],{"class":549},[532,1327,1116],{"class":664},[532,1329,692],{"class":549},[532,1331,1333,1335,1337],{"class":534,"line":1332},24,[532,1334,687],{"class":549},[532,1336,1006],{"class":664},[532,1338,692],{"class":549},[1340,1341],"hr",{},[427,1343,1345,1346,1349,1350,435,1353,1349,1356,446],{"id":1344},"_2-font-size-weight-text-xs-text-9xl-font-thin-font-black","2. Font Size & Weight (",[432,1347,1348],{},"text-xs"," -> ",[432,1351,1352],{},"text-9xl",[432,1354,1355],{},"font-thin",[432,1357,1358],{},"font-black",[448,1360,1361,1362,1364,1365,1367,1368,1371],{},"Tailwind cung cấp scale từ ",[432,1363,1348],{}," (12px) đến ",[432,1366,1352],{}," (128px). Mỗi level đi kèm ",[432,1369,1370],{},"line-height"," tối ưu.",[523,1373,1375],{"className":652,"code":1374,"language":654,"meta":528,"style":528},"\u003Cp class=\"text-xs\">Extra small — 12px \u002F line-height 1rem\u003C\u002Fp>\n\u003Cp class=\"text-sm\">Small — 14px \u002F line-height 1.25rem\u003C\u002Fp>\n\u003Cp class=\"text-base\">Base — 16px \u002F line-height 1.5rem\u003C\u002Fp>\n\u003Cp class=\"text-lg\">Large — 18px \u002F line-height 1.75rem\u003C\u002Fp>\n\u003Cp class=\"text-xl\">Extra large — 20px \u002F line-height 1.75rem\u003C\u002Fp>\n\u003Cp class=\"text-2xl\">2XL — 24px \u002F line-height 2rem\u003C\u002Fp>\n\u003Cp class=\"text-3xl\">3XL — 30px \u002F line-height 2.25rem\u003C\u002Fp>\n\u003Cp class=\"text-4xl\">4XL — 36px \u002F line-height 2.5rem\u003C\u002Fp>\n\u003Cp class=\"text-5xl\">5XL — 48px \u002F line-height 1\u003C\u002Fp>\n\u003Cp class=\"text-6xl\">6XL — 60px \u002F line-height 1\u003C\u002Fp>\n\u003Cp class=\"text-7xl\">7XL — 72px \u002F line-height 1\u003C\u002Fp>\n\u003Cp class=\"text-8xl\">8XL — 96px \u002F line-height 1\u003C\u002Fp>\n\u003Cp class=\"text-9xl\">9XL — 128px \u002F line-height 1\u003C\u002Fp>\n",[432,1376,1377,1404,1432,1460,1488,1516,1544,1572,1600,1628,1656,1684,1712],{"__ignoreMap":528},[532,1378,1379,1381,1383,1385,1387,1389,1391,1393,1395,1398,1400,1402],{"class":534,"line":535},[532,1380,661],{"class":549},[532,1382,448],{"class":664},[532,1384,669],{"class":668},[532,1386,672],{"class":549},[532,1388,557],{"class":549},[532,1390,1348],{"class":553},[532,1392,557],{"class":549},[532,1394,681],{"class":549},[532,1396,1397],{"class":581},"Extra small — 12px \u002F line-height 1rem",[532,1399,687],{"class":549},[532,1401,448],{"class":664},[532,1403,692],{"class":549},[532,1405,1406,1408,1410,1412,1414,1416,1419,1421,1423,1426,1428,1430],{"class":534,"line":542},[532,1407,661],{"class":549},[532,1409,448],{"class":664},[532,1411,669],{"class":668},[532,1413,672],{"class":549},[532,1415,557],{"class":549},[532,1417,1418],{"class":553},"text-sm",[532,1420,557],{"class":549},[532,1422,681],{"class":549},[532,1424,1425],{"class":581},"Small — 14px \u002F line-height 1.25rem",[532,1427,687],{"class":549},[532,1429,448],{"class":664},[532,1431,692],{"class":549},[532,1433,1434,1436,1438,1440,1442,1444,1447,1449,1451,1454,1456,1458],{"class":534,"line":563},[532,1435,661],{"class":549},[532,1437,448],{"class":664},[532,1439,669],{"class":668},[532,1441,672],{"class":549},[532,1443,557],{"class":549},[532,1445,1446],{"class":553},"text-base",[532,1448,557],{"class":549},[532,1450,681],{"class":549},[532,1452,1453],{"class":581},"Base — 16px \u002F line-height 1.5rem",[532,1455,687],{"class":549},[532,1457,448],{"class":664},[532,1459,692],{"class":549},[532,1461,1462,1464,1466,1468,1470,1472,1475,1477,1479,1482,1484,1486],{"class":534,"line":570},[532,1463,661],{"class":549},[532,1465,448],{"class":664},[532,1467,669],{"class":668},[532,1469,672],{"class":549},[532,1471,557],{"class":549},[532,1473,1474],{"class":553},"text-lg",[532,1476,557],{"class":549},[532,1478,681],{"class":549},[532,1480,1481],{"class":581},"Large — 18px \u002F line-height 1.75rem",[532,1483,687],{"class":549},[532,1485,448],{"class":664},[532,1487,692],{"class":549},[532,1489,1490,1492,1494,1496,1498,1500,1503,1505,1507,1510,1512,1514],{"class":534,"line":578},[532,1491,661],{"class":549},[532,1493,448],{"class":664},[532,1495,669],{"class":668},[532,1497,672],{"class":549},[532,1499,557],{"class":549},[532,1501,1502],{"class":553},"text-xl",[532,1504,557],{"class":549},[532,1506,681],{"class":549},[532,1508,1509],{"class":581},"Extra large — 20px \u002F line-height 1.75rem",[532,1511,687],{"class":549},[532,1513,448],{"class":664},[532,1515,692],{"class":549},[532,1517,1518,1520,1522,1524,1526,1528,1531,1533,1535,1538,1540,1542],{"class":534,"line":604},[532,1519,661],{"class":549},[532,1521,448],{"class":664},[532,1523,669],{"class":668},[532,1525,672],{"class":549},[532,1527,557],{"class":549},[532,1529,1530],{"class":553},"text-2xl",[532,1532,557],{"class":549},[532,1534,681],{"class":549},[532,1536,1537],{"class":581},"2XL — 24px \u002F line-height 2rem",[532,1539,687],{"class":549},[532,1541,448],{"class":664},[532,1543,692],{"class":549},[532,1545,1546,1548,1550,1552,1554,1556,1559,1561,1563,1566,1568,1570],{"class":534,"line":624},[532,1547,661],{"class":549},[532,1549,448],{"class":664},[532,1551,669],{"class":668},[532,1553,672],{"class":549},[532,1555,557],{"class":549},[532,1557,1558],{"class":553},"text-3xl",[532,1560,557],{"class":549},[532,1562,681],{"class":549},[532,1564,1565],{"class":581},"3XL — 30px \u002F line-height 2.25rem",[532,1567,687],{"class":549},[532,1569,448],{"class":664},[532,1571,692],{"class":549},[532,1573,1574,1576,1578,1580,1582,1584,1587,1589,1591,1594,1596,1598],{"class":534,"line":640},[532,1575,661],{"class":549},[532,1577,448],{"class":664},[532,1579,669],{"class":668},[532,1581,672],{"class":549},[532,1583,557],{"class":549},[532,1585,1586],{"class":553},"text-4xl",[532,1588,557],{"class":549},[532,1590,681],{"class":549},[532,1592,1593],{"class":581},"4XL — 36px \u002F line-height 2.5rem",[532,1595,687],{"class":549},[532,1597,448],{"class":664},[532,1599,692],{"class":549},[532,1601,1602,1604,1606,1608,1610,1612,1615,1617,1619,1622,1624,1626],{"class":534,"line":894},[532,1603,661],{"class":549},[532,1605,448],{"class":664},[532,1607,669],{"class":668},[532,1609,672],{"class":549},[532,1611,557],{"class":549},[532,1613,1614],{"class":553},"text-5xl",[532,1616,557],{"class":549},[532,1618,681],{"class":549},[532,1620,1621],{"class":581},"5XL — 48px \u002F line-height 1",[532,1623,687],{"class":549},[532,1625,448],{"class":664},[532,1627,692],{"class":549},[532,1629,1630,1632,1634,1636,1638,1640,1643,1645,1647,1650,1652,1654],{"class":534,"line":900},[532,1631,661],{"class":549},[532,1633,448],{"class":664},[532,1635,669],{"class":668},[532,1637,672],{"class":549},[532,1639,557],{"class":549},[532,1641,1642],{"class":553},"text-6xl",[532,1644,557],{"class":549},[532,1646,681],{"class":549},[532,1648,1649],{"class":581},"6XL — 60px \u002F line-height 1",[532,1651,687],{"class":549},[532,1653,448],{"class":664},[532,1655,692],{"class":549},[532,1657,1658,1660,1662,1664,1666,1668,1671,1673,1675,1678,1680,1682],{"class":534,"line":906},[532,1659,661],{"class":549},[532,1661,448],{"class":664},[532,1663,669],{"class":668},[532,1665,672],{"class":549},[532,1667,557],{"class":549},[532,1669,1670],{"class":553},"text-7xl",[532,1672,557],{"class":549},[532,1674,681],{"class":549},[532,1676,1677],{"class":581},"7XL — 72px \u002F line-height 1",[532,1679,687],{"class":549},[532,1681,448],{"class":664},[532,1683,692],{"class":549},[532,1685,1686,1688,1690,1692,1694,1696,1699,1701,1703,1706,1708,1710],{"class":534,"line":912},[532,1687,661],{"class":549},[532,1689,448],{"class":664},[532,1691,669],{"class":668},[532,1693,672],{"class":549},[532,1695,557],{"class":549},[532,1697,1698],{"class":553},"text-8xl",[532,1700,557],{"class":549},[532,1702,681],{"class":549},[532,1704,1705],{"class":581},"8XL — 96px \u002F line-height 1",[532,1707,687],{"class":549},[532,1709,448],{"class":664},[532,1711,692],{"class":549},[532,1713,1714,1716,1718,1720,1722,1724,1726,1728,1730,1733,1735,1737],{"class":534,"line":918},[532,1715,661],{"class":549},[532,1717,448],{"class":664},[532,1719,669],{"class":668},[532,1721,672],{"class":549},[532,1723,557],{"class":549},[532,1725,1352],{"class":553},[532,1727,557],{"class":549},[532,1729,681],{"class":549},[532,1731,1732],{"class":581},"9XL — 128px \u002F line-height 1",[532,1734,687],{"class":549},[532,1736,448],{"class":664},[532,1738,692],{"class":549},[767,1740,1742],{"id":1741},"font-weight","Font Weight",[452,1744,1745,1756],{},[455,1746,1747],{},[458,1748,1749,1751,1754],{},[461,1750,463],{},[461,1752,1753],{},"Weight",[461,1755,469],{},[471,1757,1758,1770,1783,1796,1809,1822,1835,1848,1861],{},[458,1759,1760,1764,1767],{},[476,1761,1762],{},[432,1763,1355],{},[476,1765,1766],{},"100",[476,1768,1769],{},"Mỏng nhất, dùng cho display text lớn",[458,1771,1772,1777,1780],{},[476,1773,1774],{},[432,1775,1776],{},"font-extralight",[476,1778,1779],{},"200",[476,1781,1782],{},"Rất nhẹ",[458,1784,1785,1790,1793],{},[476,1786,1787],{},[432,1788,1789],{},"font-light",[476,1791,1792],{},"300",[476,1794,1795],{},"Nhẹ",[458,1797,1798,1803,1806],{},[476,1799,1800],{},[432,1801,1802],{},"font-normal",[476,1804,1805],{},"400",[476,1807,1808],{},"Bình thường (default)",[458,1810,1811,1816,1819],{},[476,1812,1813],{},[432,1814,1815],{},"font-medium",[476,1817,1818],{},"500",[476,1820,1821],{},"Vừa phải, phổ biến cho UI text",[458,1823,1824,1829,1832],{},[476,1825,1826],{},[432,1827,1828],{},"font-semibold",[476,1830,1831],{},"600",[476,1833,1834],{},"Hơi đậm, heading phụ",[458,1836,1837,1842,1845],{},[476,1838,1839],{},[432,1840,1841],{},"font-bold",[476,1843,1844],{},"700",[476,1846,1847],{},"Đậm, heading chính",[458,1849,1850,1855,1858],{},[476,1851,1852],{},[432,1853,1854],{},"font-extrabold",[476,1856,1857],{},"800",[476,1859,1860],{},"Rất đậm",[458,1862,1863,1867,1870],{},[476,1864,1865],{},[432,1866,1358],{},[476,1868,1869],{},"900",[476,1871,1872],{},"Đậm nhất, hero text",[767,1874,1876],{"id":1875},"responsive-modifiers","Responsive modifiers",[448,1878,1879,1880,1883,1884,1887],{},"Mọi utility ",[432,1881,1882],{},"text-*"," và ",[432,1885,1886],{},"font-*"," đều có thể kết hợp với responsive prefix:",[523,1889,1891],{"className":652,"code":1890,"language":654,"meta":528,"style":528},"\u003C!-- Nhỏ hơn trên mobile, lớn dần theo breakpoint -->\n\u003Ch1 class=\"text-3xl md:text-4xl lg:text-5xl xl:text-6xl\">\n  Responsive heading\n\u003C\u002Fh1>\n",[432,1892,1893,1898,1917,1922],{"__ignoreMap":528},[532,1894,1895],{"class":534,"line":535},[532,1896,1897],{"class":538},"\u003C!-- Nhỏ hơn trên mobile, lớn dần theo breakpoint -->\n",[532,1899,1900,1902,1904,1906,1908,1910,1913,1915],{"class":534,"line":542},[532,1901,661],{"class":549},[532,1903,665],{"class":664},[532,1905,669],{"class":668},[532,1907,672],{"class":549},[532,1909,557],{"class":549},[532,1911,1912],{"class":553},"text-3xl md:text-4xl lg:text-5xl xl:text-6xl",[532,1914,557],{"class":549},[532,1916,692],{"class":549},[532,1918,1919],{"class":534,"line":563},[532,1920,1921],{"class":581},"  Responsive heading\n",[532,1923,1924,1926,1928],{"class":534,"line":570},[532,1925,687],{"class":549},[532,1927,665],{"class":664},[532,1929,692],{"class":549},[767,1931,1933],{"id":1932},"bài-tập-3-responsive-heading-sizes-nhỏ-hơn-trên-mobile","Bài tập 3: Responsive heading sizes (nhỏ hơn trên mobile)",[448,1935,1936,1938],{},[755,1937,777],{}," Tạo hero section với heading và subheading có kích thước responsive theo từng breakpoint.",[523,1940,1942],{"className":990,"code":1941,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Csection class=\"bg-gradient-to-br from-indigo-50 to-white py-20 px-6\">\n    \u003Cdiv class=\"max-w-4xl mx-auto text-center\">\n      \u003Ch1 class=\"text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black tracking-tight text-gray-900\">\n        Xây dựng sản phẩm\n        \u003Cspan class=\"text-indigo-600\">nhanh hơn\u003C\u002Fspan>\n      \u003C\u002Fh1>\n\n      \u003Cp class=\"mt-6 text-base sm:text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed\">\n        Nền tảng giúp team của bạn ship code nhanh gấp 3 lần.\n        Không cần config phức tạp, chỉ cần code.\n      \u003C\u002Fp>\n\n      \u003Cdiv class=\"mt-10 flex flex-col sm:flex-row gap-4 justify-center\">\n        \u003Cbutton class=\"px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg text-sm sm:text-base hover:bg-indigo-700 transition-colors\">\n          Bắt đầu miễn phí\n        \u003C\u002Fbutton>\n        \u003Cbutton class=\"px-6 py-3 border border-gray-300 text-gray-700 font-semibold rounded-lg text-sm sm:text-base hover:bg-gray-50 transition-colors\">\n          Xem demo\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[432,1943,1944,1952,1972,1992,2012,2017,2046,2055,2059,2078,2083,2088,2096,2100,2119,2139,2144,2153,2172,2177,2185,2193,2201,2209],{"__ignoreMap":528},[532,1945,1946,1948,1950],{"class":534,"line":535},[532,1947,661],{"class":549},[532,1949,1006],{"class":664},[532,1951,692],{"class":549},[532,1953,1954,1956,1959,1961,1963,1965,1968,1970],{"class":534,"line":542},[532,1955,1013],{"class":549},[532,1957,1958],{"class":664},"section",[532,1960,669],{"class":668},[532,1962,672],{"class":549},[532,1964,557],{"class":549},[532,1966,1967],{"class":553},"bg-gradient-to-br from-indigo-50 to-white py-20 px-6",[532,1969,557],{"class":549},[532,1971,692],{"class":549},[532,1973,1974,1976,1979,1981,1983,1985,1988,1990],{"class":534,"line":563},[532,1975,1034],{"class":549},[532,1977,1978],{"class":664},"div",[532,1980,669],{"class":668},[532,1982,672],{"class":549},[532,1984,557],{"class":549},[532,1986,1987],{"class":553},"max-w-4xl mx-auto text-center",[532,1989,557],{"class":549},[532,1991,692],{"class":549},[532,1993,1994,1997,1999,2001,2003,2005,2008,2010],{"class":534,"line":570},[532,1995,1996],{"class":549},"      \u003C",[532,1998,665],{"class":664},[532,2000,669],{"class":668},[532,2002,672],{"class":549},[532,2004,557],{"class":549},[532,2006,2007],{"class":553},"text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black tracking-tight text-gray-900",[532,2009,557],{"class":549},[532,2011,692],{"class":549},[532,2013,2014],{"class":534,"line":578},[532,2015,2016],{"class":581},"        Xây dựng sản phẩm\n",[532,2018,2019,2022,2024,2026,2028,2030,2033,2035,2037,2040,2042,2044],{"class":534,"line":604},[532,2020,2021],{"class":549},"        \u003C",[532,2023,532],{"class":664},[532,2025,669],{"class":668},[532,2027,672],{"class":549},[532,2029,557],{"class":549},[532,2031,2032],{"class":553},"text-indigo-600",[532,2034,557],{"class":549},[532,2036,681],{"class":549},[532,2038,2039],{"class":581},"nhanh hơn",[532,2041,687],{"class":549},[532,2043,532],{"class":664},[532,2045,692],{"class":549},[532,2047,2048,2051,2053],{"class":534,"line":624},[532,2049,2050],{"class":549},"      \u003C\u002F",[532,2052,665],{"class":664},[532,2054,692],{"class":549},[532,2056,2057],{"class":534,"line":640},[532,2058,567],{"emptyLinePlaceholder":566},[532,2060,2061,2063,2065,2067,2069,2071,2074,2076],{"class":534,"line":894},[532,2062,1996],{"class":549},[532,2064,448],{"class":664},[532,2066,669],{"class":668},[532,2068,672],{"class":549},[532,2070,557],{"class":549},[532,2072,2073],{"class":553},"mt-6 text-base sm:text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed",[532,2075,557],{"class":549},[532,2077,692],{"class":549},[532,2079,2080],{"class":534,"line":900},[532,2081,2082],{"class":581},"        Nền tảng giúp team của bạn ship code nhanh gấp 3 lần.\n",[532,2084,2085],{"class":534,"line":906},[532,2086,2087],{"class":581},"        Không cần config phức tạp, chỉ cần code.\n",[532,2089,2090,2092,2094],{"class":534,"line":912},[532,2091,2050],{"class":549},[532,2093,448],{"class":664},[532,2095,692],{"class":549},[532,2097,2098],{"class":534,"line":918},[532,2099,567],{"emptyLinePlaceholder":566},[532,2101,2102,2104,2106,2108,2110,2112,2115,2117],{"class":534,"line":1237},[532,2103,1996],{"class":549},[532,2105,1978],{"class":664},[532,2107,669],{"class":668},[532,2109,672],{"class":549},[532,2111,557],{"class":549},[532,2113,2114],{"class":553},"mt-10 flex flex-col sm:flex-row gap-4 justify-center",[532,2116,557],{"class":549},[532,2118,692],{"class":549},[532,2120,2121,2123,2126,2128,2130,2132,2135,2137],{"class":534,"line":1242},[532,2122,2021],{"class":549},[532,2124,2125],{"class":664},"button",[532,2127,669],{"class":668},[532,2129,672],{"class":549},[532,2131,557],{"class":549},[532,2133,2134],{"class":553},"px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg text-sm sm:text-base hover:bg-indigo-700 transition-colors",[532,2136,557],{"class":549},[532,2138,692],{"class":549},[532,2140,2141],{"class":534,"line":1262},[532,2142,2143],{"class":581},"          Bắt đầu miễn phí\n",[532,2145,2146,2149,2151],{"class":534,"line":1268},[532,2147,2148],{"class":549},"        \u003C\u002F",[532,2150,2125],{"class":664},[532,2152,692],{"class":549},[532,2154,2155,2157,2159,2161,2163,2165,2168,2170],{"class":534,"line":1274},[532,2156,2021],{"class":549},[532,2158,2125],{"class":664},[532,2160,669],{"class":668},[532,2162,672],{"class":549},[532,2164,557],{"class":549},[532,2166,2167],{"class":553},"px-6 py-3 border border-gray-300 text-gray-700 font-semibold rounded-lg text-sm sm:text-base hover:bg-gray-50 transition-colors",[532,2169,557],{"class":549},[532,2171,692],{"class":549},[532,2173,2174],{"class":534,"line":1283},[532,2175,2176],{"class":581},"          Xem demo\n",[532,2178,2179,2181,2183],{"class":534,"line":1288},[532,2180,2148],{"class":549},[532,2182,2125],{"class":664},[532,2184,692],{"class":549},[532,2186,2187,2189,2191],{"class":534,"line":1308},[532,2188,2050],{"class":549},[532,2190,1978],{"class":664},[532,2192,692],{"class":549},[532,2194,2195,2197,2199],{"class":534,"line":1314},[532,2196,1158],{"class":549},[532,2198,1978],{"class":664},[532,2200,692],{"class":549},[532,2202,2203,2205,2207],{"class":534,"line":1323},[532,2204,1045],{"class":549},[532,2206,1958],{"class":664},[532,2208,692],{"class":549},[532,2210,2211,2213,2215],{"class":534,"line":1332},[532,2212,687],{"class":549},[532,2214,1006],{"class":664},[532,2216,692],{"class":549},[1340,2218],{},[427,2220,2222],{"id":2221},"_3-line-height-letter-spacing-text-align-vertical-align","3. Line Height, Letter Spacing, Text Align, Vertical Align",[767,2224,2226,2227,446],{"id":2225},"line-height-leading","Line Height (",[432,2228,2229],{},"leading-*",[523,2231,2233],{"className":652,"code":2232,"language":654,"meta":528,"style":528},"\u003Cp class=\"leading-none\">line-height: 1 — tiêu đề lớn\u003C\u002Fp>\n\u003Cp class=\"leading-tight\">line-height: 1.25 — heading\u003C\u002Fp>\n\u003Cp class=\"leading-snug\">line-height: 1.375 — subheading\u003C\u002Fp>\n\u003Cp class=\"leading-normal\">line-height: 1.5 — body text tiêu chuẩn\u003C\u002Fp>\n\u003Cp class=\"leading-relaxed\">line-height: 1.625 — bài viết dài\u003C\u002Fp>\n\u003Cp class=\"leading-loose\">line-height: 2 — text thoáng\u003C\u002Fp>\n",[432,2234,2235,2263,2291,2319,2347,2375],{"__ignoreMap":528},[532,2236,2237,2239,2241,2243,2245,2247,2250,2252,2254,2257,2259,2261],{"class":534,"line":535},[532,2238,661],{"class":549},[532,2240,448],{"class":664},[532,2242,669],{"class":668},[532,2244,672],{"class":549},[532,2246,557],{"class":549},[532,2248,2249],{"class":553},"leading-none",[532,2251,557],{"class":549},[532,2253,681],{"class":549},[532,2255,2256],{"class":581},"line-height: 1 — tiêu đề lớn",[532,2258,687],{"class":549},[532,2260,448],{"class":664},[532,2262,692],{"class":549},[532,2264,2265,2267,2269,2271,2273,2275,2278,2280,2282,2285,2287,2289],{"class":534,"line":542},[532,2266,661],{"class":549},[532,2268,448],{"class":664},[532,2270,669],{"class":668},[532,2272,672],{"class":549},[532,2274,557],{"class":549},[532,2276,2277],{"class":553},"leading-tight",[532,2279,557],{"class":549},[532,2281,681],{"class":549},[532,2283,2284],{"class":581},"line-height: 1.25 — heading",[532,2286,687],{"class":549},[532,2288,448],{"class":664},[532,2290,692],{"class":549},[532,2292,2293,2295,2297,2299,2301,2303,2306,2308,2310,2313,2315,2317],{"class":534,"line":563},[532,2294,661],{"class":549},[532,2296,448],{"class":664},[532,2298,669],{"class":668},[532,2300,672],{"class":549},[532,2302,557],{"class":549},[532,2304,2305],{"class":553},"leading-snug",[532,2307,557],{"class":549},[532,2309,681],{"class":549},[532,2311,2312],{"class":581},"line-height: 1.375 — subheading",[532,2314,687],{"class":549},[532,2316,448],{"class":664},[532,2318,692],{"class":549},[532,2320,2321,2323,2325,2327,2329,2331,2334,2336,2338,2341,2343,2345],{"class":534,"line":570},[532,2322,661],{"class":549},[532,2324,448],{"class":664},[532,2326,669],{"class":668},[532,2328,672],{"class":549},[532,2330,557],{"class":549},[532,2332,2333],{"class":553},"leading-normal",[532,2335,557],{"class":549},[532,2337,681],{"class":549},[532,2339,2340],{"class":581},"line-height: 1.5 — body text tiêu chuẩn",[532,2342,687],{"class":549},[532,2344,448],{"class":664},[532,2346,692],{"class":549},[532,2348,2349,2351,2353,2355,2357,2359,2362,2364,2366,2369,2371,2373],{"class":534,"line":578},[532,2350,661],{"class":549},[532,2352,448],{"class":664},[532,2354,669],{"class":668},[532,2356,672],{"class":549},[532,2358,557],{"class":549},[532,2360,2361],{"class":553},"leading-relaxed",[532,2363,557],{"class":549},[532,2365,681],{"class":549},[532,2367,2368],{"class":581},"line-height: 1.625 — bài viết dài",[532,2370,687],{"class":549},[532,2372,448],{"class":664},[532,2374,692],{"class":549},[532,2376,2377,2379,2381,2383,2385,2387,2390,2392,2394,2397,2399,2401],{"class":534,"line":604},[532,2378,661],{"class":549},[532,2380,448],{"class":664},[532,2382,669],{"class":668},[532,2384,672],{"class":549},[532,2386,557],{"class":549},[532,2388,2389],{"class":553},"leading-loose",[532,2391,557],{"class":549},[532,2393,681],{"class":549},[532,2395,2396],{"class":581},"line-height: 2 — text thoáng",[532,2398,687],{"class":549},[532,2400,448],{"class":664},[532,2402,692],{"class":549},[767,2404,2406,2407,446],{"id":2405},"letter-spacing-tracking","Letter Spacing (",[432,2408,2409],{},"tracking-*",[523,2411,2413],{"className":652,"code":2412,"language":654,"meta":528,"style":528},"\u003Cp class=\"tracking-tighter\">-0.05em — heading lớn\u003C\u002Fp>\n\u003Cp class=\"tracking-tight\">-0.025em — heading vừa\u003C\u002Fp>\n\u003Cp class=\"tracking-normal\">0 — body text\u003C\u002Fp>\n\u003Cp class=\"tracking-wide\">0.025em — subheading\u003C\u002Fp>\n\u003Cp class=\"tracking-wider\">0.05em — label nhỏ\u003C\u002Fp>\n\u003Cp class=\"tracking-widest\">0.1em — uppercase label\u003C\u002Fp>\n",[432,2414,2415,2443,2471,2499,2527,2555],{"__ignoreMap":528},[532,2416,2417,2419,2421,2423,2425,2427,2430,2432,2434,2437,2439,2441],{"class":534,"line":535},[532,2418,661],{"class":549},[532,2420,448],{"class":664},[532,2422,669],{"class":668},[532,2424,672],{"class":549},[532,2426,557],{"class":549},[532,2428,2429],{"class":553},"tracking-tighter",[532,2431,557],{"class":549},[532,2433,681],{"class":549},[532,2435,2436],{"class":581},"-0.05em — heading lớn",[532,2438,687],{"class":549},[532,2440,448],{"class":664},[532,2442,692],{"class":549},[532,2444,2445,2447,2449,2451,2453,2455,2458,2460,2462,2465,2467,2469],{"class":534,"line":542},[532,2446,661],{"class":549},[532,2448,448],{"class":664},[532,2450,669],{"class":668},[532,2452,672],{"class":549},[532,2454,557],{"class":549},[532,2456,2457],{"class":553},"tracking-tight",[532,2459,557],{"class":549},[532,2461,681],{"class":549},[532,2463,2464],{"class":581},"-0.025em — heading vừa",[532,2466,687],{"class":549},[532,2468,448],{"class":664},[532,2470,692],{"class":549},[532,2472,2473,2475,2477,2479,2481,2483,2486,2488,2490,2493,2495,2497],{"class":534,"line":563},[532,2474,661],{"class":549},[532,2476,448],{"class":664},[532,2478,669],{"class":668},[532,2480,672],{"class":549},[532,2482,557],{"class":549},[532,2484,2485],{"class":553},"tracking-normal",[532,2487,557],{"class":549},[532,2489,681],{"class":549},[532,2491,2492],{"class":581},"0 — body text",[532,2494,687],{"class":549},[532,2496,448],{"class":664},[532,2498,692],{"class":549},[532,2500,2501,2503,2505,2507,2509,2511,2514,2516,2518,2521,2523,2525],{"class":534,"line":570},[532,2502,661],{"class":549},[532,2504,448],{"class":664},[532,2506,669],{"class":668},[532,2508,672],{"class":549},[532,2510,557],{"class":549},[532,2512,2513],{"class":553},"tracking-wide",[532,2515,557],{"class":549},[532,2517,681],{"class":549},[532,2519,2520],{"class":581},"0.025em — subheading",[532,2522,687],{"class":549},[532,2524,448],{"class":664},[532,2526,692],{"class":549},[532,2528,2529,2531,2533,2535,2537,2539,2542,2544,2546,2549,2551,2553],{"class":534,"line":578},[532,2530,661],{"class":549},[532,2532,448],{"class":664},[532,2534,669],{"class":668},[532,2536,672],{"class":549},[532,2538,557],{"class":549},[532,2540,2541],{"class":553},"tracking-wider",[532,2543,557],{"class":549},[532,2545,681],{"class":549},[532,2547,2548],{"class":581},"0.05em — label nhỏ",[532,2550,687],{"class":549},[532,2552,448],{"class":664},[532,2554,692],{"class":549},[532,2556,2557,2559,2561,2563,2565,2567,2570,2572,2574,2577,2579,2581],{"class":534,"line":604},[532,2558,661],{"class":549},[532,2560,448],{"class":664},[532,2562,669],{"class":668},[532,2564,672],{"class":549},[532,2566,557],{"class":549},[532,2568,2569],{"class":553},"tracking-widest",[532,2571,557],{"class":549},[532,2573,681],{"class":549},[532,2575,2576],{"class":581},"0.1em — uppercase label",[532,2578,687],{"class":549},[532,2580,448],{"class":664},[532,2582,692],{"class":549},[767,2584,2586],{"id":2585},"text-align","Text Align",[523,2588,2590],{"className":652,"code":2589,"language":654,"meta":528,"style":528},"\u003Cp class=\"text-left\">Căn trái (default)\u003C\u002Fp>\n\u003Cp class=\"text-center\">Căn giữa\u003C\u002Fp>\n\u003Cp class=\"text-right\">Căn phải\u003C\u002Fp>\n\u003Cp class=\"text-justify\">Căn đều hai bên\u003C\u002Fp>\n\u003Cp class=\"text-start\">Theo hướng viết (LTR = left)\u003C\u002Fp>\n\u003Cp class=\"text-end\">Ngược hướng viết (LTR = right)\u003C\u002Fp>\n",[432,2591,2592,2620,2648,2676,2704,2732],{"__ignoreMap":528},[532,2593,2594,2596,2598,2600,2602,2604,2607,2609,2611,2614,2616,2618],{"class":534,"line":535},[532,2595,661],{"class":549},[532,2597,448],{"class":664},[532,2599,669],{"class":668},[532,2601,672],{"class":549},[532,2603,557],{"class":549},[532,2605,2606],{"class":553},"text-left",[532,2608,557],{"class":549},[532,2610,681],{"class":549},[532,2612,2613],{"class":581},"Căn trái (default)",[532,2615,687],{"class":549},[532,2617,448],{"class":664},[532,2619,692],{"class":549},[532,2621,2622,2624,2626,2628,2630,2632,2635,2637,2639,2642,2644,2646],{"class":534,"line":542},[532,2623,661],{"class":549},[532,2625,448],{"class":664},[532,2627,669],{"class":668},[532,2629,672],{"class":549},[532,2631,557],{"class":549},[532,2633,2634],{"class":553},"text-center",[532,2636,557],{"class":549},[532,2638,681],{"class":549},[532,2640,2641],{"class":581},"Căn giữa",[532,2643,687],{"class":549},[532,2645,448],{"class":664},[532,2647,692],{"class":549},[532,2649,2650,2652,2654,2656,2658,2660,2663,2665,2667,2670,2672,2674],{"class":534,"line":563},[532,2651,661],{"class":549},[532,2653,448],{"class":664},[532,2655,669],{"class":668},[532,2657,672],{"class":549},[532,2659,557],{"class":549},[532,2661,2662],{"class":553},"text-right",[532,2664,557],{"class":549},[532,2666,681],{"class":549},[532,2668,2669],{"class":581},"Căn phải",[532,2671,687],{"class":549},[532,2673,448],{"class":664},[532,2675,692],{"class":549},[532,2677,2678,2680,2682,2684,2686,2688,2691,2693,2695,2698,2700,2702],{"class":534,"line":570},[532,2679,661],{"class":549},[532,2681,448],{"class":664},[532,2683,669],{"class":668},[532,2685,672],{"class":549},[532,2687,557],{"class":549},[532,2689,2690],{"class":553},"text-justify",[532,2692,557],{"class":549},[532,2694,681],{"class":549},[532,2696,2697],{"class":581},"Căn đều hai bên",[532,2699,687],{"class":549},[532,2701,448],{"class":664},[532,2703,692],{"class":549},[532,2705,2706,2708,2710,2712,2714,2716,2719,2721,2723,2726,2728,2730],{"class":534,"line":578},[532,2707,661],{"class":549},[532,2709,448],{"class":664},[532,2711,669],{"class":668},[532,2713,672],{"class":549},[532,2715,557],{"class":549},[532,2717,2718],{"class":553},"text-start",[532,2720,557],{"class":549},[532,2722,681],{"class":549},[532,2724,2725],{"class":581},"Theo hướng viết (LTR = left)",[532,2727,687],{"class":549},[532,2729,448],{"class":664},[532,2731,692],{"class":549},[532,2733,2734,2736,2738,2740,2742,2744,2747,2749,2751,2754,2756,2758],{"class":534,"line":604},[532,2735,661],{"class":549},[532,2737,448],{"class":664},[532,2739,669],{"class":668},[532,2741,672],{"class":549},[532,2743,557],{"class":549},[532,2745,2746],{"class":553},"text-end",[532,2748,557],{"class":549},[532,2750,681],{"class":549},[532,2752,2753],{"class":581},"Ngược hướng viết (LTR = right)",[532,2755,687],{"class":549},[532,2757,448],{"class":664},[532,2759,692],{"class":549},[767,2761,2763,2764],{"id":2762},"line-clamp-truncate-nhiều-dòng-line-clamp","Line Clamp (truncate nhiều dòng) — ",[432,2765,2766],{},"line-clamp-*",[523,2768,2770],{"className":652,"code":2769,"language":654,"meta":528,"style":528},"\u003C!-- Giới hạn 3 dòng, thêm \"...\" ở cuối -->\n\u003Cp class=\"line-clamp-3\">\n  Đoạn văn rất dài sẽ bị cắt sau 3 dòng và thêm dấu ba chấm ở cuối...\n\u003C\u002Fp>\n\n\u003C!-- Có sẵn: line-clamp-1 đến line-clamp-6 -->\n\u003C!-- Hoặc line-clamp-none để bỏ giới hạn -->\n",[432,2771,2772,2777,2796,2801,2809,2813,2818],{"__ignoreMap":528},[532,2773,2774],{"class":534,"line":535},[532,2775,2776],{"class":538},"\u003C!-- Giới hạn 3 dòng, thêm \"...\" ở cuối -->\n",[532,2778,2779,2781,2783,2785,2787,2789,2792,2794],{"class":534,"line":542},[532,2780,661],{"class":549},[532,2782,448],{"class":664},[532,2784,669],{"class":668},[532,2786,672],{"class":549},[532,2788,557],{"class":549},[532,2790,2791],{"class":553},"line-clamp-3",[532,2793,557],{"class":549},[532,2795,692],{"class":549},[532,2797,2798],{"class":534,"line":563},[532,2799,2800],{"class":581},"  Đoạn văn rất dài sẽ bị cắt sau 3 dòng và thêm dấu ba chấm ở cuối...\n",[532,2802,2803,2805,2807],{"class":534,"line":570},[532,2804,687],{"class":549},[532,2806,448],{"class":664},[532,2808,692],{"class":549},[532,2810,2811],{"class":534,"line":578},[532,2812,567],{"emptyLinePlaceholder":566},[532,2814,2815],{"class":534,"line":604},[532,2816,2817],{"class":538},"\u003C!-- Có sẵn: line-clamp-1 đến line-clamp-6 -->\n",[532,2819,2820],{"class":534,"line":624},[532,2821,2822],{"class":538},"\u003C!-- Hoặc line-clamp-none để bỏ giới hạn -->\n",[767,2824,2826],{"id":2825},"bài-tập-4-blog-card-với-3-line-title-truncation","Bài tập 4: Blog card với 3-line title truncation",[448,2828,2829,2831],{},[755,2830,777],{}," Thiết kế blog card với:",[1068,2833,2834,2837,2840],{},[1071,2835,2836],{},"Title bị giới hạn 2 dòng",[1071,2838,2839],{},"Description bị giới hạn 3 dòng",[1071,2841,2842],{},"Ảnh thumbnail, category tag, date",[523,2844,2846],{"className":990,"code":2845,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Carticle class=\"group bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow\">\n    \u003Cdiv class=\"aspect-[16\u002F9] overflow-hidden\">\n      \u003Cimg\n        src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085\"\n        alt=\"Blog thumbnail\"\n        class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300\"\n      \u002F>\n    \u003C\u002Fdiv>\n\n    \u003Cdiv class=\"p-5\">\n      \u003Cdiv class=\"flex items-center gap-2 mb-3\">\n        \u003Cspan class=\"px-2.5 py-0.5 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-full\">\n          Nuxt 4\n        \u003C\u002Fspan>\n        \u003Cspan class=\"text-xs text-gray-400\">12 Tháng 7, 2026\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Title — giới hạn 2 dòng -->\n      \u003Ch3 class=\"text-lg font-semibold text-gray-900 line-clamp-2 leading-snug group-hover:text-indigo-600 transition-colors\">\n        Hướng dẫn tối ưu SEO cho Nuxt 4 với useSeoMeta, Server Routes và Dynamic Rendering\n      \u003C\u002Fh3>\n\n      \u003C!-- Description — giới hạn 3 dòng -->\n      \u003Cp class=\"mt-2 text-sm text-gray-600 line-clamp-3 leading-relaxed\">\n        Tìm hiểu cách tận dụng useSeoMeta để tạo meta tags động,\n        kết hợp Server Routes để generate sitemap XML, và dùng\n        Hybrid Rendering để tối ưu tốc độ tải trang blog.\n        Hướng dẫn chi tiết từ cơ bản đến nâng cao.\n      \u003C\u002Fp>\n\n      \u003Cdiv class=\"mt-4 flex items-center gap-3\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fi.pravatar.cc\u002F40?img=1\"\n          alt=\"Author\"\n          class=\"w-8 h-8 rounded-full\"\n        \u002F>\n        \u003Cspan class=\"text-sm font-medium text-gray-700\">Nguyen Van A\u003C\u002Fspan>\n        \u003Cspan class=\"text-xs text-gray-400 ml-auto\">8 phút đọc\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[432,2847,2848,2856,2875,2894,2901,2916,2930,2944,2949,2957,2961,2980,2999,3018,3023,3031,3059,3067,3071,3076,3095,3100,3108,3112,3117,3137,3143,3149,3155,3161,3170,3175,3195,3202,3217,3232,3247,3253,3282,3311,3320,3329,3338],{"__ignoreMap":528},[532,2849,2850,2852,2854],{"class":534,"line":535},[532,2851,661],{"class":549},[532,2853,1006],{"class":664},[532,2855,692],{"class":549},[532,2857,2858,2860,2862,2864,2866,2868,2871,2873],{"class":534,"line":542},[532,2859,1013],{"class":549},[532,2861,1116],{"class":664},[532,2863,669],{"class":668},[532,2865,672],{"class":549},[532,2867,557],{"class":549},[532,2869,2870],{"class":553},"group bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden hover:shadow-md transition-shadow",[532,2872,557],{"class":549},[532,2874,692],{"class":549},[532,2876,2877,2879,2881,2883,2885,2887,2890,2892],{"class":534,"line":563},[532,2878,1034],{"class":549},[532,2880,1978],{"class":664},[532,2882,669],{"class":668},[532,2884,672],{"class":549},[532,2886,557],{"class":549},[532,2888,2889],{"class":553},"aspect-[16\u002F9] overflow-hidden",[532,2891,557],{"class":549},[532,2893,692],{"class":549},[532,2895,2896,2898],{"class":534,"line":570},[532,2897,1996],{"class":549},[532,2899,2900],{"class":664},"img\n",[532,2902,2903,2906,2908,2910,2913],{"class":534,"line":578},[532,2904,2905],{"class":668},"        src",[532,2907,672],{"class":549},[532,2909,557],{"class":549},[532,2911,2912],{"class":553},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1498050108023-c5249f4df085",[532,2914,2915],{"class":549},"\"\n",[532,2917,2918,2921,2923,2925,2928],{"class":534,"line":604},[532,2919,2920],{"class":668},"        alt",[532,2922,672],{"class":549},[532,2924,557],{"class":549},[532,2926,2927],{"class":553},"Blog thumbnail",[532,2929,2915],{"class":549},[532,2931,2932,2935,2937,2939,2942],{"class":534,"line":624},[532,2933,2934],{"class":668},"        class",[532,2936,672],{"class":549},[532,2938,557],{"class":549},[532,2940,2941],{"class":553},"w-full h-full object-cover group-hover:scale-105 transition-transform duration-300",[532,2943,2915],{"class":549},[532,2945,2946],{"class":534,"line":640},[532,2947,2948],{"class":549},"      \u002F>\n",[532,2950,2951,2953,2955],{"class":534,"line":894},[532,2952,1158],{"class":549},[532,2954,1978],{"class":664},[532,2956,692],{"class":549},[532,2958,2959],{"class":534,"line":900},[532,2960,567],{"emptyLinePlaceholder":566},[532,2962,2963,2965,2967,2969,2971,2973,2976,2978],{"class":534,"line":906},[532,2964,1034],{"class":549},[532,2966,1978],{"class":664},[532,2968,669],{"class":668},[532,2970,672],{"class":549},[532,2972,557],{"class":549},[532,2974,2975],{"class":553},"p-5",[532,2977,557],{"class":549},[532,2979,692],{"class":549},[532,2981,2982,2984,2986,2988,2990,2992,2995,2997],{"class":534,"line":912},[532,2983,1996],{"class":549},[532,2985,1978],{"class":664},[532,2987,669],{"class":668},[532,2989,672],{"class":549},[532,2991,557],{"class":549},[532,2993,2994],{"class":553},"flex items-center gap-2 mb-3",[532,2996,557],{"class":549},[532,2998,692],{"class":549},[532,3000,3001,3003,3005,3007,3009,3011,3014,3016],{"class":534,"line":918},[532,3002,2021],{"class":549},[532,3004,532],{"class":664},[532,3006,669],{"class":668},[532,3008,672],{"class":549},[532,3010,557],{"class":549},[532,3012,3013],{"class":553},"px-2.5 py-0.5 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-full",[532,3015,557],{"class":549},[532,3017,692],{"class":549},[532,3019,3020],{"class":534,"line":1237},[532,3021,3022],{"class":581},"          Nuxt 4\n",[532,3024,3025,3027,3029],{"class":534,"line":1242},[532,3026,2148],{"class":549},[532,3028,532],{"class":664},[532,3030,692],{"class":549},[532,3032,3033,3035,3037,3039,3041,3043,3046,3048,3050,3053,3055,3057],{"class":534,"line":1262},[532,3034,2021],{"class":549},[532,3036,532],{"class":664},[532,3038,669],{"class":668},[532,3040,672],{"class":549},[532,3042,557],{"class":549},[532,3044,3045],{"class":553},"text-xs text-gray-400",[532,3047,557],{"class":549},[532,3049,681],{"class":549},[532,3051,3052],{"class":581},"12 Tháng 7, 2026",[532,3054,687],{"class":549},[532,3056,532],{"class":664},[532,3058,692],{"class":549},[532,3060,3061,3063,3065],{"class":534,"line":1268},[532,3062,2050],{"class":549},[532,3064,1978],{"class":664},[532,3066,692],{"class":549},[532,3068,3069],{"class":534,"line":1274},[532,3070,567],{"emptyLinePlaceholder":566},[532,3072,3073],{"class":534,"line":1283},[532,3074,3075],{"class":538},"      \u003C!-- Title — giới hạn 2 dòng -->\n",[532,3077,3078,3080,3082,3084,3086,3088,3091,3093],{"class":534,"line":1288},[532,3079,1996],{"class":549},[532,3081,767],{"class":664},[532,3083,669],{"class":668},[532,3085,672],{"class":549},[532,3087,557],{"class":549},[532,3089,3090],{"class":553},"text-lg font-semibold text-gray-900 line-clamp-2 leading-snug group-hover:text-indigo-600 transition-colors",[532,3092,557],{"class":549},[532,3094,692],{"class":549},[532,3096,3097],{"class":534,"line":1308},[532,3098,3099],{"class":581},"        Hướng dẫn tối ưu SEO cho Nuxt 4 với useSeoMeta, Server Routes và Dynamic Rendering\n",[532,3101,3102,3104,3106],{"class":534,"line":1314},[532,3103,2050],{"class":549},[532,3105,767],{"class":664},[532,3107,692],{"class":549},[532,3109,3110],{"class":534,"line":1323},[532,3111,567],{"emptyLinePlaceholder":566},[532,3113,3114],{"class":534,"line":1332},[532,3115,3116],{"class":538},"      \u003C!-- Description — giới hạn 3 dòng -->\n",[532,3118,3120,3122,3124,3126,3128,3130,3133,3135],{"class":534,"line":3119},25,[532,3121,1996],{"class":549},[532,3123,448],{"class":664},[532,3125,669],{"class":668},[532,3127,672],{"class":549},[532,3129,557],{"class":549},[532,3131,3132],{"class":553},"mt-2 text-sm text-gray-600 line-clamp-3 leading-relaxed",[532,3134,557],{"class":549},[532,3136,692],{"class":549},[532,3138,3140],{"class":534,"line":3139},26,[532,3141,3142],{"class":581},"        Tìm hiểu cách tận dụng useSeoMeta để tạo meta tags động,\n",[532,3144,3146],{"class":534,"line":3145},27,[532,3147,3148],{"class":581},"        kết hợp Server Routes để generate sitemap XML, và dùng\n",[532,3150,3152],{"class":534,"line":3151},28,[532,3153,3154],{"class":581},"        Hybrid Rendering để tối ưu tốc độ tải trang blog.\n",[532,3156,3158],{"class":534,"line":3157},29,[532,3159,3160],{"class":581},"        Hướng dẫn chi tiết từ cơ bản đến nâng cao.\n",[532,3162,3164,3166,3168],{"class":534,"line":3163},30,[532,3165,2050],{"class":549},[532,3167,448],{"class":664},[532,3169,692],{"class":549},[532,3171,3173],{"class":534,"line":3172},31,[532,3174,567],{"emptyLinePlaceholder":566},[532,3176,3178,3180,3182,3184,3186,3188,3191,3193],{"class":534,"line":3177},32,[532,3179,1996],{"class":549},[532,3181,1978],{"class":664},[532,3183,669],{"class":668},[532,3185,672],{"class":549},[532,3187,557],{"class":549},[532,3189,3190],{"class":553},"mt-4 flex items-center gap-3",[532,3192,557],{"class":549},[532,3194,692],{"class":549},[532,3196,3198,3200],{"class":534,"line":3197},33,[532,3199,2021],{"class":549},[532,3201,2900],{"class":664},[532,3203,3205,3208,3210,3212,3215],{"class":534,"line":3204},34,[532,3206,3207],{"class":668},"          src",[532,3209,672],{"class":549},[532,3211,557],{"class":549},[532,3213,3214],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F40?img=1",[532,3216,2915],{"class":549},[532,3218,3220,3223,3225,3227,3230],{"class":534,"line":3219},35,[532,3221,3222],{"class":668},"          alt",[532,3224,672],{"class":549},[532,3226,557],{"class":549},[532,3228,3229],{"class":553},"Author",[532,3231,2915],{"class":549},[532,3233,3235,3238,3240,3242,3245],{"class":534,"line":3234},36,[532,3236,3237],{"class":668},"          class",[532,3239,672],{"class":549},[532,3241,557],{"class":549},[532,3243,3244],{"class":553},"w-8 h-8 rounded-full",[532,3246,2915],{"class":549},[532,3248,3250],{"class":534,"line":3249},37,[532,3251,3252],{"class":549},"        \u002F>\n",[532,3254,3256,3258,3260,3262,3264,3266,3269,3271,3273,3276,3278,3280],{"class":534,"line":3255},38,[532,3257,2021],{"class":549},[532,3259,532],{"class":664},[532,3261,669],{"class":668},[532,3263,672],{"class":549},[532,3265,557],{"class":549},[532,3267,3268],{"class":553},"text-sm font-medium text-gray-700",[532,3270,557],{"class":549},[532,3272,681],{"class":549},[532,3274,3275],{"class":581},"Nguyen Van A",[532,3277,687],{"class":549},[532,3279,532],{"class":664},[532,3281,692],{"class":549},[532,3283,3285,3287,3289,3291,3293,3295,3298,3300,3302,3305,3307,3309],{"class":534,"line":3284},39,[532,3286,2021],{"class":549},[532,3288,532],{"class":664},[532,3290,669],{"class":668},[532,3292,672],{"class":549},[532,3294,557],{"class":549},[532,3296,3297],{"class":553},"text-xs text-gray-400 ml-auto",[532,3299,557],{"class":549},[532,3301,681],{"class":549},[532,3303,3304],{"class":581},"8 phút đọc",[532,3306,687],{"class":549},[532,3308,532],{"class":664},[532,3310,692],{"class":549},[532,3312,3314,3316,3318],{"class":534,"line":3313},40,[532,3315,2050],{"class":549},[532,3317,1978],{"class":664},[532,3319,692],{"class":549},[532,3321,3323,3325,3327],{"class":534,"line":3322},41,[532,3324,1158],{"class":549},[532,3326,1978],{"class":664},[532,3328,692],{"class":549},[532,3330,3332,3334,3336],{"class":534,"line":3331},42,[532,3333,1045],{"class":549},[532,3335,1116],{"class":664},[532,3337,692],{"class":549},[532,3339,3341,3343,3345],{"class":534,"line":3340},43,[532,3342,687],{"class":549},[532,3344,1006],{"class":664},[532,3346,692],{"class":549},[767,3348,3350],{"id":3349},"bài-tập-5-centered-hero-text-với-proper-line-height","Bài tập 5: Centered hero text với proper line-height",[448,3352,3353,3355],{},[755,3354,777],{}," Hero section với heading lớn, subheading, mỗi loại có line-height và letter-spacing riêng.",[523,3357,3359],{"className":990,"code":3358,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Csection class=\"min-h-[80vh] flex items-center justify-center bg-slate-900 px-6\">\n    \u003Cdiv class=\"text-center max-w-3xl\">\n      \u003Ch1 class=\"text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white leading-none tracking-tighter\">\n        Design that\n        \u003Cspan class=\"bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent\">\n          speaks\n        \u003C\u002Fspan>\n        for itself\n      \u003C\u002Fh1>\n\n      \u003Cp class=\"mt-8 text-lg sm:text-xl text-slate-400 leading-relaxed max-w-xl mx-auto\">\n        Ship beautiful interfaces faster with a utility-first CSS framework\n        that lets you stay in your HTML and never leave your flow.\n      \u003C\u002Fp>\n\n      \u003Cdiv class=\"mt-10\">\n        \u003Cbutton class=\"px-8 py-3.5 bg-white text-slate-900 font-semibold rounded-xl text-base tracking-wide hover:bg-slate-200 transition-colors\">\n          Get started\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[432,3360,3361,3369,3388,3407,3426,3431,3450,3455,3463,3468,3476,3480,3499,3504,3509,3517,3521,3540,3559,3564,3572,3580,3588,3596],{"__ignoreMap":528},[532,3362,3363,3365,3367],{"class":534,"line":535},[532,3364,661],{"class":549},[532,3366,1006],{"class":664},[532,3368,692],{"class":549},[532,3370,3371,3373,3375,3377,3379,3381,3384,3386],{"class":534,"line":542},[532,3372,1013],{"class":549},[532,3374,1958],{"class":664},[532,3376,669],{"class":668},[532,3378,672],{"class":549},[532,3380,557],{"class":549},[532,3382,3383],{"class":553},"min-h-[80vh] flex items-center justify-center bg-slate-900 px-6",[532,3385,557],{"class":549},[532,3387,692],{"class":549},[532,3389,3390,3392,3394,3396,3398,3400,3403,3405],{"class":534,"line":563},[532,3391,1034],{"class":549},[532,3393,1978],{"class":664},[532,3395,669],{"class":668},[532,3397,672],{"class":549},[532,3399,557],{"class":549},[532,3401,3402],{"class":553},"text-center max-w-3xl",[532,3404,557],{"class":549},[532,3406,692],{"class":549},[532,3408,3409,3411,3413,3415,3417,3419,3422,3424],{"class":534,"line":570},[532,3410,1996],{"class":549},[532,3412,665],{"class":664},[532,3414,669],{"class":668},[532,3416,672],{"class":549},[532,3418,557],{"class":549},[532,3420,3421],{"class":553},"text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white leading-none tracking-tighter",[532,3423,557],{"class":549},[532,3425,692],{"class":549},[532,3427,3428],{"class":534,"line":578},[532,3429,3430],{"class":581},"        Design that\n",[532,3432,3433,3435,3437,3439,3441,3443,3446,3448],{"class":534,"line":604},[532,3434,2021],{"class":549},[532,3436,532],{"class":664},[532,3438,669],{"class":668},[532,3440,672],{"class":549},[532,3442,557],{"class":549},[532,3444,3445],{"class":553},"bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text text-transparent",[532,3447,557],{"class":549},[532,3449,692],{"class":549},[532,3451,3452],{"class":534,"line":624},[532,3453,3454],{"class":581},"          speaks\n",[532,3456,3457,3459,3461],{"class":534,"line":640},[532,3458,2148],{"class":549},[532,3460,532],{"class":664},[532,3462,692],{"class":549},[532,3464,3465],{"class":534,"line":894},[532,3466,3467],{"class":581},"        for itself\n",[532,3469,3470,3472,3474],{"class":534,"line":900},[532,3471,2050],{"class":549},[532,3473,665],{"class":664},[532,3475,692],{"class":549},[532,3477,3478],{"class":534,"line":906},[532,3479,567],{"emptyLinePlaceholder":566},[532,3481,3482,3484,3486,3488,3490,3492,3495,3497],{"class":534,"line":912},[532,3483,1996],{"class":549},[532,3485,448],{"class":664},[532,3487,669],{"class":668},[532,3489,672],{"class":549},[532,3491,557],{"class":549},[532,3493,3494],{"class":553},"mt-8 text-lg sm:text-xl text-slate-400 leading-relaxed max-w-xl mx-auto",[532,3496,557],{"class":549},[532,3498,692],{"class":549},[532,3500,3501],{"class":534,"line":918},[532,3502,3503],{"class":581},"        Ship beautiful interfaces faster with a utility-first CSS framework\n",[532,3505,3506],{"class":534,"line":1237},[532,3507,3508],{"class":581},"        that lets you stay in your HTML and never leave your flow.\n",[532,3510,3511,3513,3515],{"class":534,"line":1242},[532,3512,2050],{"class":549},[532,3514,448],{"class":664},[532,3516,692],{"class":549},[532,3518,3519],{"class":534,"line":1262},[532,3520,567],{"emptyLinePlaceholder":566},[532,3522,3523,3525,3527,3529,3531,3533,3536,3538],{"class":534,"line":1268},[532,3524,1996],{"class":549},[532,3526,1978],{"class":664},[532,3528,669],{"class":668},[532,3530,672],{"class":549},[532,3532,557],{"class":549},[532,3534,3535],{"class":553},"mt-10",[532,3537,557],{"class":549},[532,3539,692],{"class":549},[532,3541,3542,3544,3546,3548,3550,3552,3555,3557],{"class":534,"line":1274},[532,3543,2021],{"class":549},[532,3545,2125],{"class":664},[532,3547,669],{"class":668},[532,3549,672],{"class":549},[532,3551,557],{"class":549},[532,3553,3554],{"class":553},"px-8 py-3.5 bg-white text-slate-900 font-semibold rounded-xl text-base tracking-wide hover:bg-slate-200 transition-colors",[532,3556,557],{"class":549},[532,3558,692],{"class":549},[532,3560,3561],{"class":534,"line":1283},[532,3562,3563],{"class":581},"          Get started\n",[532,3565,3566,3568,3570],{"class":534,"line":1288},[532,3567,2148],{"class":549},[532,3569,2125],{"class":664},[532,3571,692],{"class":549},[532,3573,3574,3576,3578],{"class":534,"line":1308},[532,3575,2050],{"class":549},[532,3577,1978],{"class":664},[532,3579,692],{"class":549},[532,3581,3582,3584,3586],{"class":534,"line":1314},[532,3583,1158],{"class":549},[532,3585,1978],{"class":664},[532,3587,692],{"class":549},[532,3589,3590,3592,3594],{"class":534,"line":1323},[532,3591,1045],{"class":549},[532,3593,1958],{"class":664},[532,3595,692],{"class":549},[532,3597,3598,3600,3602],{"class":534,"line":1332},[532,3599,687],{"class":549},[532,3601,1006],{"class":664},[532,3603,692],{"class":549},[1340,3605],{},[427,3607,3609],{"id":3608},"_4-text-decoration-transform-overflow","4. Text Decoration, Transform, Overflow",[767,3611,3613],{"id":3612},"decoration","Decoration",[523,3615,3617],{"className":652,"code":3616,"language":654,"meta":528,"style":528},"\u003Cp class=\"underline\">Gạch chân\u003C\u002Fp>\n\u003Cp class=\"line-through\">Gạch ngang\u003C\u002Fp>\n\u003Cp class=\"overline\">Gạch trên\u003C\u002Fp>\n\u003Cp class=\"no-underline\">Bỏ gạch chân (hữu ích cho link)\u003C\u002Fp>\n\n\u003C!-- Kiểm soát style, color, thickness, offset -->\n\u003Ca href=\"#\" class=\"underline decoration-indigo-500 decoration-2 underline-offset-4\">\n  Link với gạch chân tùy chỉnh\n\u003C\u002Fa>\n\n\u003Ca href=\"#\" class=\"underline decoration-wavy decoration-amber-400 underline-offset-2\">\n  Link với gạch chân lượn sóng\n\u003C\u002Fa>\n\n\u003Ca href=\"#\" class=\"underline decoration-dotted decoration-pink-400\">\n  Link với gạch chân chấm chấm\n\u003C\u002Fa>\n",[432,3618,3619,3647,3675,3703,3731,3735,3740,3772,3777,3785,3789,3818,3823,3831,3835,3864,3869],{"__ignoreMap":528},[532,3620,3621,3623,3625,3627,3629,3631,3634,3636,3638,3641,3643,3645],{"class":534,"line":535},[532,3622,661],{"class":549},[532,3624,448],{"class":664},[532,3626,669],{"class":668},[532,3628,672],{"class":549},[532,3630,557],{"class":549},[532,3632,3633],{"class":553},"underline",[532,3635,557],{"class":549},[532,3637,681],{"class":549},[532,3639,3640],{"class":581},"Gạch chân",[532,3642,687],{"class":549},[532,3644,448],{"class":664},[532,3646,692],{"class":549},[532,3648,3649,3651,3653,3655,3657,3659,3662,3664,3666,3669,3671,3673],{"class":534,"line":542},[532,3650,661],{"class":549},[532,3652,448],{"class":664},[532,3654,669],{"class":668},[532,3656,672],{"class":549},[532,3658,557],{"class":549},[532,3660,3661],{"class":553},"line-through",[532,3663,557],{"class":549},[532,3665,681],{"class":549},[532,3667,3668],{"class":581},"Gạch ngang",[532,3670,687],{"class":549},[532,3672,448],{"class":664},[532,3674,692],{"class":549},[532,3676,3677,3679,3681,3683,3685,3687,3690,3692,3694,3697,3699,3701],{"class":534,"line":563},[532,3678,661],{"class":549},[532,3680,448],{"class":664},[532,3682,669],{"class":668},[532,3684,672],{"class":549},[532,3686,557],{"class":549},[532,3688,3689],{"class":553},"overline",[532,3691,557],{"class":549},[532,3693,681],{"class":549},[532,3695,3696],{"class":581},"Gạch trên",[532,3698,687],{"class":549},[532,3700,448],{"class":664},[532,3702,692],{"class":549},[532,3704,3705,3707,3709,3711,3713,3715,3718,3720,3722,3725,3727,3729],{"class":534,"line":570},[532,3706,661],{"class":549},[532,3708,448],{"class":664},[532,3710,669],{"class":668},[532,3712,672],{"class":549},[532,3714,557],{"class":549},[532,3716,3717],{"class":553},"no-underline",[532,3719,557],{"class":549},[532,3721,681],{"class":549},[532,3723,3724],{"class":581},"Bỏ gạch chân (hữu ích cho link)",[532,3726,687],{"class":549},[532,3728,448],{"class":664},[532,3730,692],{"class":549},[532,3732,3733],{"class":534,"line":578},[532,3734,567],{"emptyLinePlaceholder":566},[532,3736,3737],{"class":534,"line":604},[532,3738,3739],{"class":538},"\u003C!-- Kiểm soát style, color, thickness, offset -->\n",[532,3741,3742,3744,3747,3750,3752,3754,3757,3759,3761,3763,3765,3768,3770],{"class":534,"line":624},[532,3743,661],{"class":549},[532,3745,3746],{"class":664},"a",[532,3748,3749],{"class":668}," href",[532,3751,672],{"class":549},[532,3753,557],{"class":549},[532,3755,3756],{"class":553},"#",[532,3758,557],{"class":549},[532,3760,669],{"class":668},[532,3762,672],{"class":549},[532,3764,557],{"class":549},[532,3766,3767],{"class":553},"underline decoration-indigo-500 decoration-2 underline-offset-4",[532,3769,557],{"class":549},[532,3771,692],{"class":549},[532,3773,3774],{"class":534,"line":640},[532,3775,3776],{"class":581},"  Link với gạch chân tùy chỉnh\n",[532,3778,3779,3781,3783],{"class":534,"line":894},[532,3780,687],{"class":549},[532,3782,3746],{"class":664},[532,3784,692],{"class":549},[532,3786,3787],{"class":534,"line":900},[532,3788,567],{"emptyLinePlaceholder":566},[532,3790,3791,3793,3795,3797,3799,3801,3803,3805,3807,3809,3811,3814,3816],{"class":534,"line":906},[532,3792,661],{"class":549},[532,3794,3746],{"class":664},[532,3796,3749],{"class":668},[532,3798,672],{"class":549},[532,3800,557],{"class":549},[532,3802,3756],{"class":553},[532,3804,557],{"class":549},[532,3806,669],{"class":668},[532,3808,672],{"class":549},[532,3810,557],{"class":549},[532,3812,3813],{"class":553},"underline decoration-wavy decoration-amber-400 underline-offset-2",[532,3815,557],{"class":549},[532,3817,692],{"class":549},[532,3819,3820],{"class":534,"line":912},[532,3821,3822],{"class":581},"  Link với gạch chân lượn sóng\n",[532,3824,3825,3827,3829],{"class":534,"line":918},[532,3826,687],{"class":549},[532,3828,3746],{"class":664},[532,3830,692],{"class":549},[532,3832,3833],{"class":534,"line":1237},[532,3834,567],{"emptyLinePlaceholder":566},[532,3836,3837,3839,3841,3843,3845,3847,3849,3851,3853,3855,3857,3860,3862],{"class":534,"line":1242},[532,3838,661],{"class":549},[532,3840,3746],{"class":664},[532,3842,3749],{"class":668},[532,3844,672],{"class":549},[532,3846,557],{"class":549},[532,3848,3756],{"class":553},[532,3850,557],{"class":549},[532,3852,669],{"class":668},[532,3854,672],{"class":549},[532,3856,557],{"class":549},[532,3858,3859],{"class":553},"underline decoration-dotted decoration-pink-400",[532,3861,557],{"class":549},[532,3863,692],{"class":549},[532,3865,3866],{"class":534,"line":1262},[532,3867,3868],{"class":581},"  Link với gạch chân chấm chấm\n",[532,3870,3871,3873,3875],{"class":534,"line":1268},[532,3872,687],{"class":549},[532,3874,3746],{"class":664},[532,3876,692],{"class":549},[767,3878,3880],{"id":3879},"text-transform","Text Transform",[523,3882,3884],{"className":652,"code":3883,"language":654,"meta":528,"style":528},"\u003Cp class=\"uppercase\">CHỮ IN HOA — label, badge\u003C\u002Fp>\n\u003Cp class=\"lowercase\">chữ thường\u003C\u002Fp>\n\u003Cp class=\"capitalize\">Mỗi Từ Viết Hoa Chữ Cái Đầu\u003C\u002Fp>\n\u003Cp class=\"normal-case\">Bỏ transform — revert về mặc định\u003C\u002Fp>\n",[432,3885,3886,3914,3942,3970],{"__ignoreMap":528},[532,3887,3888,3890,3892,3894,3896,3898,3901,3903,3905,3908,3910,3912],{"class":534,"line":535},[532,3889,661],{"class":549},[532,3891,448],{"class":664},[532,3893,669],{"class":668},[532,3895,672],{"class":549},[532,3897,557],{"class":549},[532,3899,3900],{"class":553},"uppercase",[532,3902,557],{"class":549},[532,3904,681],{"class":549},[532,3906,3907],{"class":581},"CHỮ IN HOA — label, badge",[532,3909,687],{"class":549},[532,3911,448],{"class":664},[532,3913,692],{"class":549},[532,3915,3916,3918,3920,3922,3924,3926,3929,3931,3933,3936,3938,3940],{"class":534,"line":542},[532,3917,661],{"class":549},[532,3919,448],{"class":664},[532,3921,669],{"class":668},[532,3923,672],{"class":549},[532,3925,557],{"class":549},[532,3927,3928],{"class":553},"lowercase",[532,3930,557],{"class":549},[532,3932,681],{"class":549},[532,3934,3935],{"class":581},"chữ thường",[532,3937,687],{"class":549},[532,3939,448],{"class":664},[532,3941,692],{"class":549},[532,3943,3944,3946,3948,3950,3952,3954,3957,3959,3961,3964,3966,3968],{"class":534,"line":563},[532,3945,661],{"class":549},[532,3947,448],{"class":664},[532,3949,669],{"class":668},[532,3951,672],{"class":549},[532,3953,557],{"class":549},[532,3955,3956],{"class":553},"capitalize",[532,3958,557],{"class":549},[532,3960,681],{"class":549},[532,3962,3963],{"class":581},"Mỗi Từ Viết Hoa Chữ Cái Đầu",[532,3965,687],{"class":549},[532,3967,448],{"class":664},[532,3969,692],{"class":549},[532,3971,3972,3974,3976,3978,3980,3982,3985,3987,3989,3992,3994,3996],{"class":534,"line":570},[532,3973,661],{"class":549},[532,3975,448],{"class":664},[532,3977,669],{"class":668},[532,3979,672],{"class":549},[532,3981,557],{"class":549},[532,3983,3984],{"class":553},"normal-case",[532,3986,557],{"class":549},[532,3988,681],{"class":549},[532,3990,3991],{"class":581},"Bỏ transform — revert về mặc định",[532,3993,687],{"class":549},[532,3995,448],{"class":664},[532,3997,692],{"class":549},[767,3999,4001],{"id":4000},"text-overflow","Text Overflow",[523,4003,4005],{"className":652,"code":4004,"language":654,"meta":528,"style":528},"\u003C!-- truncate = text-ellipsis + overflow-hidden + whitespace-nowrap -->\n\u003Cp class=\"truncate w-64\">\n  Đoạn text rất dài chỉ hiển thị 1 dòng và bị cắt với dấu ba chấm...\n\u003C\u002Fp>\n\n\u003C!-- text-ellipsis: thêm \"...\" ở cuối -->\n\u003Cp class=\"text-ellipsis overflow-hidden whitespace-nowrap w-64\">\n  Đoạn text bị cắt và thêm dấu ...\n\u003C\u002Fp>\n\n\u003C!-- text-clip: cắt cứng không thêm dấu -->\n\u003Cp class=\"text-clip overflow-hidden whitespace-nowrap w-64\">\n  Đoạn text bị cắt cứng không dấu\n\u003C\u002Fp>\n",[432,4006,4007,4012,4031,4036,4044,4048,4053,4072,4077,4085,4089,4094,4113,4118],{"__ignoreMap":528},[532,4008,4009],{"class":534,"line":535},[532,4010,4011],{"class":538},"\u003C!-- truncate = text-ellipsis + overflow-hidden + whitespace-nowrap -->\n",[532,4013,4014,4016,4018,4020,4022,4024,4027,4029],{"class":534,"line":542},[532,4015,661],{"class":549},[532,4017,448],{"class":664},[532,4019,669],{"class":668},[532,4021,672],{"class":549},[532,4023,557],{"class":549},[532,4025,4026],{"class":553},"truncate w-64",[532,4028,557],{"class":549},[532,4030,692],{"class":549},[532,4032,4033],{"class":534,"line":563},[532,4034,4035],{"class":581},"  Đoạn text rất dài chỉ hiển thị 1 dòng và bị cắt với dấu ba chấm...\n",[532,4037,4038,4040,4042],{"class":534,"line":570},[532,4039,687],{"class":549},[532,4041,448],{"class":664},[532,4043,692],{"class":549},[532,4045,4046],{"class":534,"line":578},[532,4047,567],{"emptyLinePlaceholder":566},[532,4049,4050],{"class":534,"line":604},[532,4051,4052],{"class":538},"\u003C!-- text-ellipsis: thêm \"...\" ở cuối -->\n",[532,4054,4055,4057,4059,4061,4063,4065,4068,4070],{"class":534,"line":624},[532,4056,661],{"class":549},[532,4058,448],{"class":664},[532,4060,669],{"class":668},[532,4062,672],{"class":549},[532,4064,557],{"class":549},[532,4066,4067],{"class":553},"text-ellipsis overflow-hidden whitespace-nowrap w-64",[532,4069,557],{"class":549},[532,4071,692],{"class":549},[532,4073,4074],{"class":534,"line":640},[532,4075,4076],{"class":581},"  Đoạn text bị cắt và thêm dấu ...\n",[532,4078,4079,4081,4083],{"class":534,"line":894},[532,4080,687],{"class":549},[532,4082,448],{"class":664},[532,4084,692],{"class":549},[532,4086,4087],{"class":534,"line":900},[532,4088,567],{"emptyLinePlaceholder":566},[532,4090,4091],{"class":534,"line":906},[532,4092,4093],{"class":538},"\u003C!-- text-clip: cắt cứng không thêm dấu -->\n",[532,4095,4096,4098,4100,4102,4104,4106,4109,4111],{"class":534,"line":912},[532,4097,661],{"class":549},[532,4099,448],{"class":664},[532,4101,669],{"class":668},[532,4103,672],{"class":549},[532,4105,557],{"class":549},[532,4107,4108],{"class":553},"text-clip overflow-hidden whitespace-nowrap w-64",[532,4110,557],{"class":549},[532,4112,692],{"class":549},[532,4114,4115],{"class":534,"line":918},[532,4116,4117],{"class":581},"  Đoạn text bị cắt cứng không dấu\n",[532,4119,4120,4122,4124],{"class":534,"line":1237},[532,4121,687],{"class":549},[532,4123,448],{"class":664},[532,4125,692],{"class":549},[767,4127,4129],{"id":4128},"bài-tập-6-styled-link-hover-effects-underline-animation","Bài tập 6: Styled link hover effects (underline animation)",[448,4131,4132,4134],{},[755,4133,777],{}," Tạo link có hiệu ứng gạch chân trượt từ trái qua phải khi hover.",[523,4136,4138],{"className":990,"code":4137,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-2xl mx-auto p-12 space-y-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900\">Link Hover Effects\u003C\u002Fh2>\n\n    \u003C!-- Effect 1: Gạch chân mở rộng từ giữa -->\n    \u003Ca href=\"#\"\n      class=\"relative inline-block text-lg font-medium text-indigo-600\n             after:absolute after:bottom-0 after:left-1\u002F2 after:-translate-x-1\u002F2\n             after:h-[2px] after:w-0 after:bg-indigo-600\n             after:transition-all after:duration-300\n             hover:after:w-full pb-1\">\n      Underline mở rộng từ giữa\n    \u003C\u002Fa>\n\n    \u003C!-- Effect 2: Gạch chân trượt từ trái -->\n    \u003Cdiv>\n      \u003Ca href=\"#\"\n        class=\"relative inline-block text-lg font-medium text-emerald-600\n               after:absolute after:bottom-0 after:left-0\n               after:h-[2px] after:w-0 after:bg-emerald-600\n               after:transition-all after:duration-300\n               hover:after:w-full pb-1\">\n        Underline trượt từ trái\n      \u003C\u002Fa>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Effect 3: Đổi màu + gạch chân đứt đoạn -->\n    \u003Cdiv>\n      \u003Ca href=\"#\"\n        class=\"text-lg font-medium text-gray-500 no-underline\n               hover:text-rose-500 hover:underline hover:decoration-dashed\n               hover:decoration-rose-400 hover:underline-offset-4\n               transition-all duration-200\">\n        Dashed underline + đổi màu\n      \u003C\u002Fa>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Effect 4: Highlight background khi hover -->\n    \u003Cdiv>\n      \u003Ca href=\"#\"\n        class=\"relative inline-block text-lg font-medium text-gray-900\n               before:absolute before:bottom-1 before:left-0 before:w-full\n               before:h-2 before:bg-amber-200\u002F50 before:-z-10\n               before:transition-all before:duration-300\n               hover:before:h-full hover:before:bottom-0 px-1\">\n        Highlight nền lan từ dưới lên\n      \u003C\u002Fa>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,4139,4140,4148,4167,4195,4199,4204,4220,4232,4237,4242,4247,4256,4261,4269,4273,4278,4286,4302,4313,4318,4323,4328,4337,4342,4350,4358,4362,4367,4375,4391,4402,4407,4412,4421,4426,4434,4442,4446,4451,4459,4475,4486,4491,4496,4502,4512,4518,4527,4536,4545],{"__ignoreMap":528},[532,4141,4142,4144,4146],{"class":534,"line":535},[532,4143,661],{"class":549},[532,4145,1006],{"class":664},[532,4147,692],{"class":549},[532,4149,4150,4152,4154,4156,4158,4160,4163,4165],{"class":534,"line":542},[532,4151,1013],{"class":549},[532,4153,1978],{"class":664},[532,4155,669],{"class":668},[532,4157,672],{"class":549},[532,4159,557],{"class":549},[532,4161,4162],{"class":553},"max-w-2xl mx-auto p-12 space-y-8",[532,4164,557],{"class":549},[532,4166,692],{"class":549},[532,4168,4169,4171,4173,4175,4177,4179,4182,4184,4186,4189,4191,4193],{"class":534,"line":563},[532,4170,1034],{"class":549},[532,4172,427],{"class":664},[532,4174,669],{"class":668},[532,4176,672],{"class":549},[532,4178,557],{"class":549},[532,4180,4181],{"class":553},"text-2xl font-bold text-gray-900",[532,4183,557],{"class":549},[532,4185,681],{"class":549},[532,4187,4188],{"class":581},"Link Hover Effects",[532,4190,687],{"class":549},[532,4192,427],{"class":664},[532,4194,692],{"class":549},[532,4196,4197],{"class":534,"line":570},[532,4198,567],{"emptyLinePlaceholder":566},[532,4200,4201],{"class":534,"line":578},[532,4202,4203],{"class":538},"    \u003C!-- Effect 1: Gạch chân mở rộng từ giữa -->\n",[532,4205,4206,4208,4210,4212,4214,4216,4218],{"class":534,"line":604},[532,4207,1034],{"class":549},[532,4209,3746],{"class":664},[532,4211,3749],{"class":668},[532,4213,672],{"class":549},[532,4215,557],{"class":549},[532,4217,3756],{"class":553},[532,4219,2915],{"class":549},[532,4221,4222,4225,4227,4229],{"class":534,"line":624},[532,4223,4224],{"class":668},"      class",[532,4226,672],{"class":549},[532,4228,557],{"class":549},[532,4230,4231],{"class":553},"relative inline-block text-lg font-medium text-indigo-600\n",[532,4233,4234],{"class":534,"line":640},[532,4235,4236],{"class":553},"             after:absolute after:bottom-0 after:left-1\u002F2 after:-translate-x-1\u002F2\n",[532,4238,4239],{"class":534,"line":894},[532,4240,4241],{"class":553},"             after:h-[2px] after:w-0 after:bg-indigo-600\n",[532,4243,4244],{"class":534,"line":900},[532,4245,4246],{"class":553},"             after:transition-all after:duration-300\n",[532,4248,4249,4252,4254],{"class":534,"line":906},[532,4250,4251],{"class":553},"             hover:after:w-full pb-1",[532,4253,557],{"class":549},[532,4255,692],{"class":549},[532,4257,4258],{"class":534,"line":912},[532,4259,4260],{"class":581},"      Underline mở rộng từ giữa\n",[532,4262,4263,4265,4267],{"class":534,"line":918},[532,4264,1158],{"class":549},[532,4266,3746],{"class":664},[532,4268,692],{"class":549},[532,4270,4271],{"class":534,"line":1237},[532,4272,567],{"emptyLinePlaceholder":566},[532,4274,4275],{"class":534,"line":1242},[532,4276,4277],{"class":538},"    \u003C!-- Effect 2: Gạch chân trượt từ trái -->\n",[532,4279,4280,4282,4284],{"class":534,"line":1262},[532,4281,1034],{"class":549},[532,4283,1978],{"class":664},[532,4285,692],{"class":549},[532,4287,4288,4290,4292,4294,4296,4298,4300],{"class":534,"line":1268},[532,4289,1996],{"class":549},[532,4291,3746],{"class":664},[532,4293,3749],{"class":668},[532,4295,672],{"class":549},[532,4297,557],{"class":549},[532,4299,3756],{"class":553},[532,4301,2915],{"class":549},[532,4303,4304,4306,4308,4310],{"class":534,"line":1274},[532,4305,2934],{"class":668},[532,4307,672],{"class":549},[532,4309,557],{"class":549},[532,4311,4312],{"class":553},"relative inline-block text-lg font-medium text-emerald-600\n",[532,4314,4315],{"class":534,"line":1283},[532,4316,4317],{"class":553},"               after:absolute after:bottom-0 after:left-0\n",[532,4319,4320],{"class":534,"line":1288},[532,4321,4322],{"class":553},"               after:h-[2px] after:w-0 after:bg-emerald-600\n",[532,4324,4325],{"class":534,"line":1308},[532,4326,4327],{"class":553},"               after:transition-all after:duration-300\n",[532,4329,4330,4333,4335],{"class":534,"line":1314},[532,4331,4332],{"class":553},"               hover:after:w-full pb-1",[532,4334,557],{"class":549},[532,4336,692],{"class":549},[532,4338,4339],{"class":534,"line":1323},[532,4340,4341],{"class":581},"        Underline trượt từ trái\n",[532,4343,4344,4346,4348],{"class":534,"line":1332},[532,4345,2050],{"class":549},[532,4347,3746],{"class":664},[532,4349,692],{"class":549},[532,4351,4352,4354,4356],{"class":534,"line":3119},[532,4353,1158],{"class":549},[532,4355,1978],{"class":664},[532,4357,692],{"class":549},[532,4359,4360],{"class":534,"line":3139},[532,4361,567],{"emptyLinePlaceholder":566},[532,4363,4364],{"class":534,"line":3145},[532,4365,4366],{"class":538},"    \u003C!-- Effect 3: Đổi màu + gạch chân đứt đoạn -->\n",[532,4368,4369,4371,4373],{"class":534,"line":3151},[532,4370,1034],{"class":549},[532,4372,1978],{"class":664},[532,4374,692],{"class":549},[532,4376,4377,4379,4381,4383,4385,4387,4389],{"class":534,"line":3157},[532,4378,1996],{"class":549},[532,4380,3746],{"class":664},[532,4382,3749],{"class":668},[532,4384,672],{"class":549},[532,4386,557],{"class":549},[532,4388,3756],{"class":553},[532,4390,2915],{"class":549},[532,4392,4393,4395,4397,4399],{"class":534,"line":3163},[532,4394,2934],{"class":668},[532,4396,672],{"class":549},[532,4398,557],{"class":549},[532,4400,4401],{"class":553},"text-lg font-medium text-gray-500 no-underline\n",[532,4403,4404],{"class":534,"line":3172},[532,4405,4406],{"class":553},"               hover:text-rose-500 hover:underline hover:decoration-dashed\n",[532,4408,4409],{"class":534,"line":3177},[532,4410,4411],{"class":553},"               hover:decoration-rose-400 hover:underline-offset-4\n",[532,4413,4414,4417,4419],{"class":534,"line":3197},[532,4415,4416],{"class":553},"               transition-all duration-200",[532,4418,557],{"class":549},[532,4420,692],{"class":549},[532,4422,4423],{"class":534,"line":3204},[532,4424,4425],{"class":581},"        Dashed underline + đổi màu\n",[532,4427,4428,4430,4432],{"class":534,"line":3219},[532,4429,2050],{"class":549},[532,4431,3746],{"class":664},[532,4433,692],{"class":549},[532,4435,4436,4438,4440],{"class":534,"line":3234},[532,4437,1158],{"class":549},[532,4439,1978],{"class":664},[532,4441,692],{"class":549},[532,4443,4444],{"class":534,"line":3249},[532,4445,567],{"emptyLinePlaceholder":566},[532,4447,4448],{"class":534,"line":3255},[532,4449,4450],{"class":538},"    \u003C!-- Effect 4: Highlight background khi hover -->\n",[532,4452,4453,4455,4457],{"class":534,"line":3284},[532,4454,1034],{"class":549},[532,4456,1978],{"class":664},[532,4458,692],{"class":549},[532,4460,4461,4463,4465,4467,4469,4471,4473],{"class":534,"line":3313},[532,4462,1996],{"class":549},[532,4464,3746],{"class":664},[532,4466,3749],{"class":668},[532,4468,672],{"class":549},[532,4470,557],{"class":549},[532,4472,3756],{"class":553},[532,4474,2915],{"class":549},[532,4476,4477,4479,4481,4483],{"class":534,"line":3322},[532,4478,2934],{"class":668},[532,4480,672],{"class":549},[532,4482,557],{"class":549},[532,4484,4485],{"class":553},"relative inline-block text-lg font-medium text-gray-900\n",[532,4487,4488],{"class":534,"line":3331},[532,4489,4490],{"class":553},"               before:absolute before:bottom-1 before:left-0 before:w-full\n",[532,4492,4493],{"class":534,"line":3340},[532,4494,4495],{"class":553},"               before:h-2 before:bg-amber-200\u002F50 before:-z-10\n",[532,4497,4499],{"class":534,"line":4498},44,[532,4500,4501],{"class":553},"               before:transition-all before:duration-300\n",[532,4503,4505,4508,4510],{"class":534,"line":4504},45,[532,4506,4507],{"class":553},"               hover:before:h-full hover:before:bottom-0 px-1",[532,4509,557],{"class":549},[532,4511,692],{"class":549},[532,4513,4515],{"class":534,"line":4514},46,[532,4516,4517],{"class":581},"        Highlight nền lan từ dưới lên\n",[532,4519,4521,4523,4525],{"class":534,"line":4520},47,[532,4522,2050],{"class":549},[532,4524,3746],{"class":664},[532,4526,692],{"class":549},[532,4528,4530,4532,4534],{"class":534,"line":4529},48,[532,4531,1158],{"class":549},[532,4533,1978],{"class":664},[532,4535,692],{"class":549},[532,4537,4539,4541,4543],{"class":534,"line":4538},49,[532,4540,1045],{"class":549},[532,4542,1978],{"class":664},[532,4544,692],{"class":549},[532,4546,4548,4550,4552],{"class":534,"line":4547},50,[532,4549,687],{"class":549},[532,4551,1006],{"class":664},[532,4553,692],{"class":549},[1340,4555],{},[427,4557,4559],{"id":4558},"_5-list-style","5. List Style",[523,4561,4563],{"className":652,"code":4562,"language":654,"meta":528,"style":528},"\u003C!-- Danh sách có dấu chấm (default) -->\n\u003Cul class=\"list-disc list-inside space-y-2\">\n  \u003Cli>Item thứ nhất\u003C\u002Fli>\n  \u003Cli>Item thứ hai\u003C\u002Fli>\n  \u003Cli>Item thứ ba\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003C!-- Danh sách đánh số -->\n\u003Col class=\"list-decimal list-inside space-y-2\">\n  \u003Cli>Bước 1: Cài đặt\u003C\u002Fli>\n  \u003Cli>Bước 2: Cấu hình\u003C\u002Fli>\n  \u003Cli>Bước 3: Deploy\u003C\u002Fli>\n\u003C\u002Fol>\n\n\u003C!-- Bỏ marker -->\n\u003Cul class=\"list-none space-y-2\">\n  \u003Cli>Item không có marker — thường dùng custom marker\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003C!-- list-inside: marker nằm trong flow text -->\n\u003C!-- list-outside: marker nằm ngoài (default) -->\n\u003Cul class=\"list-disc list-outside ml-5 space-y-2\">\n  \u003Cli>Marker nằm bên trái, text thẳng hàng\u003C\u002Fli>\n  \u003Cli>Phù hợp cho nội dung dài nhiều dòng\u003C\u002Fli>\n\u003C\u002Ful>\n",[432,4564,4565,4570,4589,4606,4623,4640,4648,4652,4657,4677,4694,4711,4728,4736,4740,4745,4764,4781,4789,4793,4798,4803,4822,4839,4856],{"__ignoreMap":528},[532,4566,4567],{"class":534,"line":535},[532,4568,4569],{"class":538},"\u003C!-- Danh sách có dấu chấm (default) -->\n",[532,4571,4572,4574,4576,4578,4580,4582,4585,4587],{"class":534,"line":542},[532,4573,661],{"class":549},[532,4575,1068],{"class":664},[532,4577,669],{"class":668},[532,4579,672],{"class":549},[532,4581,557],{"class":549},[532,4583,4584],{"class":553},"list-disc list-inside space-y-2",[532,4586,557],{"class":549},[532,4588,692],{"class":549},[532,4590,4591,4593,4595,4597,4600,4602,4604],{"class":534,"line":563},[532,4592,1013],{"class":549},[532,4594,1071],{"class":664},[532,4596,681],{"class":549},[532,4598,4599],{"class":581},"Item thứ nhất",[532,4601,687],{"class":549},[532,4603,1071],{"class":664},[532,4605,692],{"class":549},[532,4607,4608,4610,4612,4614,4617,4619,4621],{"class":534,"line":570},[532,4609,1013],{"class":549},[532,4611,1071],{"class":664},[532,4613,681],{"class":549},[532,4615,4616],{"class":581},"Item thứ hai",[532,4618,687],{"class":549},[532,4620,1071],{"class":664},[532,4622,692],{"class":549},[532,4624,4625,4627,4629,4631,4634,4636,4638],{"class":534,"line":578},[532,4626,1013],{"class":549},[532,4628,1071],{"class":664},[532,4630,681],{"class":549},[532,4632,4633],{"class":581},"Item thứ ba",[532,4635,687],{"class":549},[532,4637,1071],{"class":664},[532,4639,692],{"class":549},[532,4641,4642,4644,4646],{"class":534,"line":604},[532,4643,687],{"class":549},[532,4645,1068],{"class":664},[532,4647,692],{"class":549},[532,4649,4650],{"class":534,"line":624},[532,4651,567],{"emptyLinePlaceholder":566},[532,4653,4654],{"class":534,"line":640},[532,4655,4656],{"class":538},"\u003C!-- Danh sách đánh số -->\n",[532,4658,4659,4661,4664,4666,4668,4670,4673,4675],{"class":534,"line":894},[532,4660,661],{"class":549},[532,4662,4663],{"class":664},"ol",[532,4665,669],{"class":668},[532,4667,672],{"class":549},[532,4669,557],{"class":549},[532,4671,4672],{"class":553},"list-decimal list-inside space-y-2",[532,4674,557],{"class":549},[532,4676,692],{"class":549},[532,4678,4679,4681,4683,4685,4688,4690,4692],{"class":534,"line":900},[532,4680,1013],{"class":549},[532,4682,1071],{"class":664},[532,4684,681],{"class":549},[532,4686,4687],{"class":581},"Bước 1: Cài đặt",[532,4689,687],{"class":549},[532,4691,1071],{"class":664},[532,4693,692],{"class":549},[532,4695,4696,4698,4700,4702,4705,4707,4709],{"class":534,"line":906},[532,4697,1013],{"class":549},[532,4699,1071],{"class":664},[532,4701,681],{"class":549},[532,4703,4704],{"class":581},"Bước 2: Cấu hình",[532,4706,687],{"class":549},[532,4708,1071],{"class":664},[532,4710,692],{"class":549},[532,4712,4713,4715,4717,4719,4722,4724,4726],{"class":534,"line":912},[532,4714,1013],{"class":549},[532,4716,1071],{"class":664},[532,4718,681],{"class":549},[532,4720,4721],{"class":581},"Bước 3: Deploy",[532,4723,687],{"class":549},[532,4725,1071],{"class":664},[532,4727,692],{"class":549},[532,4729,4730,4732,4734],{"class":534,"line":918},[532,4731,687],{"class":549},[532,4733,4663],{"class":664},[532,4735,692],{"class":549},[532,4737,4738],{"class":534,"line":1237},[532,4739,567],{"emptyLinePlaceholder":566},[532,4741,4742],{"class":534,"line":1242},[532,4743,4744],{"class":538},"\u003C!-- Bỏ marker -->\n",[532,4746,4747,4749,4751,4753,4755,4757,4760,4762],{"class":534,"line":1262},[532,4748,661],{"class":549},[532,4750,1068],{"class":664},[532,4752,669],{"class":668},[532,4754,672],{"class":549},[532,4756,557],{"class":549},[532,4758,4759],{"class":553},"list-none space-y-2",[532,4761,557],{"class":549},[532,4763,692],{"class":549},[532,4765,4766,4768,4770,4772,4775,4777,4779],{"class":534,"line":1268},[532,4767,1013],{"class":549},[532,4769,1071],{"class":664},[532,4771,681],{"class":549},[532,4773,4774],{"class":581},"Item không có marker — thường dùng custom marker",[532,4776,687],{"class":549},[532,4778,1071],{"class":664},[532,4780,692],{"class":549},[532,4782,4783,4785,4787],{"class":534,"line":1274},[532,4784,687],{"class":549},[532,4786,1068],{"class":664},[532,4788,692],{"class":549},[532,4790,4791],{"class":534,"line":1283},[532,4792,567],{"emptyLinePlaceholder":566},[532,4794,4795],{"class":534,"line":1288},[532,4796,4797],{"class":538},"\u003C!-- list-inside: marker nằm trong flow text -->\n",[532,4799,4800],{"class":534,"line":1308},[532,4801,4802],{"class":538},"\u003C!-- list-outside: marker nằm ngoài (default) -->\n",[532,4804,4805,4807,4809,4811,4813,4815,4818,4820],{"class":534,"line":1314},[532,4806,661],{"class":549},[532,4808,1068],{"class":664},[532,4810,669],{"class":668},[532,4812,672],{"class":549},[532,4814,557],{"class":549},[532,4816,4817],{"class":553},"list-disc list-outside ml-5 space-y-2",[532,4819,557],{"class":549},[532,4821,692],{"class":549},[532,4823,4824,4826,4828,4830,4833,4835,4837],{"class":534,"line":1323},[532,4825,1013],{"class":549},[532,4827,1071],{"class":664},[532,4829,681],{"class":549},[532,4831,4832],{"class":581},"Marker nằm bên trái, text thẳng hàng",[532,4834,687],{"class":549},[532,4836,1071],{"class":664},[532,4838,692],{"class":549},[532,4840,4841,4843,4845,4847,4850,4852,4854],{"class":534,"line":1332},[532,4842,1013],{"class":549},[532,4844,1071],{"class":664},[532,4846,681],{"class":549},[532,4848,4849],{"class":581},"Phù hợp cho nội dung dài nhiều dòng",[532,4851,687],{"class":549},[532,4853,1071],{"class":664},[532,4855,692],{"class":549},[532,4857,4858,4860,4862],{"class":534,"line":3119},[532,4859,687],{"class":549},[532,4861,1068],{"class":664},[532,4863,692],{"class":549},[749,4865,4868,4871,4872,4875,4876,4879],{"color":4866,"icon":4867},"primary","i-lucide-info",[432,4869,4870],{},"list-image-*"," cho phép dùng ảnh tùy chỉnh làm marker: ",[432,4873,4874],{},"list-image-[url('\u002Fcheck.svg')]"," hoặc ",[432,4877,4878],{},"list-image-none",".",[767,4881,4883],{"id":4882},"bài-tập-7-styled-unordered-list-với-custom-markers","Bài tập 7: Styled unordered list với custom markers",[448,4885,4886,4888],{},[755,4887,777],{}," Tạo danh sách với custom marker sử dụng pseudo-element hoặc icon.",[523,4890,4892],{"className":990,"code":4891,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-xl mx-auto p-8\">\n    \u003Ch2 class=\"text-xl font-bold text-gray-900 mb-6\">Lợi ích khi dùng Tailwind CSS\u003C\u002Fh2>\n\n    \u003C!-- Custom marker với custom class -->\n    \u003Cul class=\"space-y-4\">\n      \u003Cli class=\"flex items-start gap-3\">\n        \u003Cspan class=\"flex-shrink-0 w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-sm font-bold mt-0.5\">\n          ✓\n        \u003C\u002Fspan>\n        \u003Cspan class=\"text-gray-700\">\n          \u003Cstrong class=\"text-gray-900\">Utility-first:\u003C\u002Fstrong> Không cần đặt tên class, code nhanh hơn 3x.\n        \u003C\u002Fspan>\n      \u003C\u002Fli>\n\n      \u003Cli class=\"flex items-start gap-3\">\n        \u003Cspan class=\"flex-shrink-0 w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-sm font-bold mt-0.5\">\n          ✓\n        \u003C\u002Fspan>\n        \u003Cspan class=\"text-gray-700\">\n          \u003Cstrong class=\"text-gray-900\">Bundle size:\u003C\u002Fstrong> Chỉ giữ CSS bạn dùng — production thường vài KB.\n        \u003C\u002Fspan>\n      \u003C\u002Fli>\n\n      \u003Cli class=\"flex items-start gap-3\">\n        \u003Cspan class=\"flex-shrink-0 w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-sm font-bold mt-0.5\">\n          ✓\n        \u003C\u002Fspan>\n        \u003Cspan class=\"text-gray-700\">\n          \u003Cstrong class=\"text-gray-900\">Responsive:\u003C\u002Fstrong> Prefix `sm:` `md:` `lg:` giúp responsive ngay trong HTML.\n        \u003C\u002Fspan>\n      \u003C\u002Fli>\n\n      \u003Cli class=\"flex items-start gap-3\">\n        \u003Cspan class=\"flex-shrink-0 w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-sm font-bold mt-0.5\">\n          ✓\n        \u003C\u002Fspan>\n        \u003Cspan class=\"text-gray-700\">\n          \u003Cstrong class=\"text-gray-900\">Design system:\u003C\u002Fstrong> Scale có sẵn (spacing, color, typography) giúp consistent.\n        \u003C\u002Fspan>\n      \u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,4893,4894,4902,4921,4949,4953,4958,4977,4996,5015,5020,5028,5047,5079,5087,5095,5099,5117,5135,5139,5147,5165,5195,5203,5211,5215,5233,5251,5255,5263,5281,5311,5319,5327,5331,5349,5367,5371,5379,5397,5427,5435,5443,5451,5459],{"__ignoreMap":528},[532,4895,4896,4898,4900],{"class":534,"line":535},[532,4897,661],{"class":549},[532,4899,1006],{"class":664},[532,4901,692],{"class":549},[532,4903,4904,4906,4908,4910,4912,4914,4917,4919],{"class":534,"line":542},[532,4905,1013],{"class":549},[532,4907,1978],{"class":664},[532,4909,669],{"class":668},[532,4911,672],{"class":549},[532,4913,557],{"class":549},[532,4915,4916],{"class":553},"max-w-xl mx-auto p-8",[532,4918,557],{"class":549},[532,4920,692],{"class":549},[532,4922,4923,4925,4927,4929,4931,4933,4936,4938,4940,4943,4945,4947],{"class":534,"line":563},[532,4924,1034],{"class":549},[532,4926,427],{"class":664},[532,4928,669],{"class":668},[532,4930,672],{"class":549},[532,4932,557],{"class":549},[532,4934,4935],{"class":553},"text-xl font-bold text-gray-900 mb-6",[532,4937,557],{"class":549},[532,4939,681],{"class":549},[532,4941,4942],{"class":581},"Lợi ích khi dùng Tailwind CSS",[532,4944,687],{"class":549},[532,4946,427],{"class":664},[532,4948,692],{"class":549},[532,4950,4951],{"class":534,"line":570},[532,4952,567],{"emptyLinePlaceholder":566},[532,4954,4955],{"class":534,"line":578},[532,4956,4957],{"class":538},"    \u003C!-- Custom marker với custom class -->\n",[532,4959,4960,4962,4964,4966,4968,4970,4973,4975],{"class":534,"line":604},[532,4961,1034],{"class":549},[532,4963,1068],{"class":664},[532,4965,669],{"class":668},[532,4967,672],{"class":549},[532,4969,557],{"class":549},[532,4971,4972],{"class":553},"space-y-4",[532,4974,557],{"class":549},[532,4976,692],{"class":549},[532,4978,4979,4981,4983,4985,4987,4989,4992,4994],{"class":534,"line":624},[532,4980,1996],{"class":549},[532,4982,1071],{"class":664},[532,4984,669],{"class":668},[532,4986,672],{"class":549},[532,4988,557],{"class":549},[532,4990,4991],{"class":553},"flex items-start gap-3",[532,4993,557],{"class":549},[532,4995,692],{"class":549},[532,4997,4998,5000,5002,5004,5006,5008,5011,5013],{"class":534,"line":640},[532,4999,2021],{"class":549},[532,5001,532],{"class":664},[532,5003,669],{"class":668},[532,5005,672],{"class":549},[532,5007,557],{"class":549},[532,5009,5010],{"class":553},"flex-shrink-0 w-6 h-6 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center text-sm font-bold mt-0.5",[532,5012,557],{"class":549},[532,5014,692],{"class":549},[532,5016,5017],{"class":534,"line":894},[532,5018,5019],{"class":581},"          ✓\n",[532,5021,5022,5024,5026],{"class":534,"line":900},[532,5023,2148],{"class":549},[532,5025,532],{"class":664},[532,5027,692],{"class":549},[532,5029,5030,5032,5034,5036,5038,5040,5043,5045],{"class":534,"line":906},[532,5031,2021],{"class":549},[532,5033,532],{"class":664},[532,5035,669],{"class":668},[532,5037,672],{"class":549},[532,5039,557],{"class":549},[532,5041,5042],{"class":553},"text-gray-700",[532,5044,557],{"class":549},[532,5046,692],{"class":549},[532,5048,5049,5052,5054,5056,5058,5060,5063,5065,5067,5070,5072,5074,5076],{"class":534,"line":912},[532,5050,5051],{"class":549},"          \u003C",[532,5053,755],{"class":664},[532,5055,669],{"class":668},[532,5057,672],{"class":549},[532,5059,557],{"class":549},[532,5061,5062],{"class":553},"text-gray-900",[532,5064,557],{"class":549},[532,5066,681],{"class":549},[532,5068,5069],{"class":581},"Utility-first:",[532,5071,687],{"class":549},[532,5073,755],{"class":664},[532,5075,681],{"class":549},[532,5077,5078],{"class":581}," Không cần đặt tên class, code nhanh hơn 3x.\n",[532,5080,5081,5083,5085],{"class":534,"line":918},[532,5082,2148],{"class":549},[532,5084,532],{"class":664},[532,5086,692],{"class":549},[532,5088,5089,5091,5093],{"class":534,"line":1237},[532,5090,2050],{"class":549},[532,5092,1071],{"class":664},[532,5094,692],{"class":549},[532,5096,5097],{"class":534,"line":1242},[532,5098,567],{"emptyLinePlaceholder":566},[532,5100,5101,5103,5105,5107,5109,5111,5113,5115],{"class":534,"line":1262},[532,5102,1996],{"class":549},[532,5104,1071],{"class":664},[532,5106,669],{"class":668},[532,5108,672],{"class":549},[532,5110,557],{"class":549},[532,5112,4991],{"class":553},[532,5114,557],{"class":549},[532,5116,692],{"class":549},[532,5118,5119,5121,5123,5125,5127,5129,5131,5133],{"class":534,"line":1268},[532,5120,2021],{"class":549},[532,5122,532],{"class":664},[532,5124,669],{"class":668},[532,5126,672],{"class":549},[532,5128,557],{"class":549},[532,5130,5010],{"class":553},[532,5132,557],{"class":549},[532,5134,692],{"class":549},[532,5136,5137],{"class":534,"line":1274},[532,5138,5019],{"class":581},[532,5140,5141,5143,5145],{"class":534,"line":1283},[532,5142,2148],{"class":549},[532,5144,532],{"class":664},[532,5146,692],{"class":549},[532,5148,5149,5151,5153,5155,5157,5159,5161,5163],{"class":534,"line":1288},[532,5150,2021],{"class":549},[532,5152,532],{"class":664},[532,5154,669],{"class":668},[532,5156,672],{"class":549},[532,5158,557],{"class":549},[532,5160,5042],{"class":553},[532,5162,557],{"class":549},[532,5164,692],{"class":549},[532,5166,5167,5169,5171,5173,5175,5177,5179,5181,5183,5186,5188,5190,5192],{"class":534,"line":1308},[532,5168,5051],{"class":549},[532,5170,755],{"class":664},[532,5172,669],{"class":668},[532,5174,672],{"class":549},[532,5176,557],{"class":549},[532,5178,5062],{"class":553},[532,5180,557],{"class":549},[532,5182,681],{"class":549},[532,5184,5185],{"class":581},"Bundle size:",[532,5187,687],{"class":549},[532,5189,755],{"class":664},[532,5191,681],{"class":549},[532,5193,5194],{"class":581}," Chỉ giữ CSS bạn dùng — production thường vài KB.\n",[532,5196,5197,5199,5201],{"class":534,"line":1314},[532,5198,2148],{"class":549},[532,5200,532],{"class":664},[532,5202,692],{"class":549},[532,5204,5205,5207,5209],{"class":534,"line":1323},[532,5206,2050],{"class":549},[532,5208,1071],{"class":664},[532,5210,692],{"class":549},[532,5212,5213],{"class":534,"line":1332},[532,5214,567],{"emptyLinePlaceholder":566},[532,5216,5217,5219,5221,5223,5225,5227,5229,5231],{"class":534,"line":3119},[532,5218,1996],{"class":549},[532,5220,1071],{"class":664},[532,5222,669],{"class":668},[532,5224,672],{"class":549},[532,5226,557],{"class":549},[532,5228,4991],{"class":553},[532,5230,557],{"class":549},[532,5232,692],{"class":549},[532,5234,5235,5237,5239,5241,5243,5245,5247,5249],{"class":534,"line":3139},[532,5236,2021],{"class":549},[532,5238,532],{"class":664},[532,5240,669],{"class":668},[532,5242,672],{"class":549},[532,5244,557],{"class":549},[532,5246,5010],{"class":553},[532,5248,557],{"class":549},[532,5250,692],{"class":549},[532,5252,5253],{"class":534,"line":3145},[532,5254,5019],{"class":581},[532,5256,5257,5259,5261],{"class":534,"line":3151},[532,5258,2148],{"class":549},[532,5260,532],{"class":664},[532,5262,692],{"class":549},[532,5264,5265,5267,5269,5271,5273,5275,5277,5279],{"class":534,"line":3157},[532,5266,2021],{"class":549},[532,5268,532],{"class":664},[532,5270,669],{"class":668},[532,5272,672],{"class":549},[532,5274,557],{"class":549},[532,5276,5042],{"class":553},[532,5278,557],{"class":549},[532,5280,692],{"class":549},[532,5282,5283,5285,5287,5289,5291,5293,5295,5297,5299,5302,5304,5306,5308],{"class":534,"line":3163},[532,5284,5051],{"class":549},[532,5286,755],{"class":664},[532,5288,669],{"class":668},[532,5290,672],{"class":549},[532,5292,557],{"class":549},[532,5294,5062],{"class":553},[532,5296,557],{"class":549},[532,5298,681],{"class":549},[532,5300,5301],{"class":581},"Responsive:",[532,5303,687],{"class":549},[532,5305,755],{"class":664},[532,5307,681],{"class":549},[532,5309,5310],{"class":581}," Prefix `sm:` `md:` `lg:` giúp responsive ngay trong HTML.\n",[532,5312,5313,5315,5317],{"class":534,"line":3172},[532,5314,2148],{"class":549},[532,5316,532],{"class":664},[532,5318,692],{"class":549},[532,5320,5321,5323,5325],{"class":534,"line":3177},[532,5322,2050],{"class":549},[532,5324,1071],{"class":664},[532,5326,692],{"class":549},[532,5328,5329],{"class":534,"line":3197},[532,5330,567],{"emptyLinePlaceholder":566},[532,5332,5333,5335,5337,5339,5341,5343,5345,5347],{"class":534,"line":3204},[532,5334,1996],{"class":549},[532,5336,1071],{"class":664},[532,5338,669],{"class":668},[532,5340,672],{"class":549},[532,5342,557],{"class":549},[532,5344,4991],{"class":553},[532,5346,557],{"class":549},[532,5348,692],{"class":549},[532,5350,5351,5353,5355,5357,5359,5361,5363,5365],{"class":534,"line":3219},[532,5352,2021],{"class":549},[532,5354,532],{"class":664},[532,5356,669],{"class":668},[532,5358,672],{"class":549},[532,5360,557],{"class":549},[532,5362,5010],{"class":553},[532,5364,557],{"class":549},[532,5366,692],{"class":549},[532,5368,5369],{"class":534,"line":3234},[532,5370,5019],{"class":581},[532,5372,5373,5375,5377],{"class":534,"line":3249},[532,5374,2148],{"class":549},[532,5376,532],{"class":664},[532,5378,692],{"class":549},[532,5380,5381,5383,5385,5387,5389,5391,5393,5395],{"class":534,"line":3255},[532,5382,2021],{"class":549},[532,5384,532],{"class":664},[532,5386,669],{"class":668},[532,5388,672],{"class":549},[532,5390,557],{"class":549},[532,5392,5042],{"class":553},[532,5394,557],{"class":549},[532,5396,692],{"class":549},[532,5398,5399,5401,5403,5405,5407,5409,5411,5413,5415,5418,5420,5422,5424],{"class":534,"line":3284},[532,5400,5051],{"class":549},[532,5402,755],{"class":664},[532,5404,669],{"class":668},[532,5406,672],{"class":549},[532,5408,557],{"class":549},[532,5410,5062],{"class":553},[532,5412,557],{"class":549},[532,5414,681],{"class":549},[532,5416,5417],{"class":581},"Design system:",[532,5419,687],{"class":549},[532,5421,755],{"class":664},[532,5423,681],{"class":549},[532,5425,5426],{"class":581}," Scale có sẵn (spacing, color, typography) giúp consistent.\n",[532,5428,5429,5431,5433],{"class":534,"line":3313},[532,5430,2148],{"class":549},[532,5432,532],{"class":664},[532,5434,692],{"class":549},[532,5436,5437,5439,5441],{"class":534,"line":3322},[532,5438,2050],{"class":549},[532,5440,1071],{"class":664},[532,5442,692],{"class":549},[532,5444,5445,5447,5449],{"class":534,"line":3331},[532,5446,1158],{"class":549},[532,5448,1068],{"class":664},[532,5450,692],{"class":549},[532,5452,5453,5455,5457],{"class":534,"line":3340},[532,5454,1045],{"class":549},[532,5456,1978],{"class":664},[532,5458,692],{"class":549},[532,5460,5461,5463,5465],{"class":534,"line":4498},[532,5462,687],{"class":549},[532,5464,1006],{"class":664},[532,5466,692],{"class":549},[1340,5468],{},[427,5470,5472],{"id":5471},"_6-text-shadow-v41-new","6. Text Shadow (v4.1 NEW)",[448,5474,5475,5476,5479],{},"Tailwind CSS v4.1 giới thiệu utility ",[432,5477,5478],{},"text-shadow"," — thay thế hoàn toàn cho việc phải dùng custom CSS.",[523,5481,5483],{"className":652,"code":5482,"language":654,"meta":528,"style":528},"\u003Ch1 class=\"text-shadow\">Text shadow mặc định\u003C\u002Fh1>\n\u003Ch1 class=\"text-shadow-sm\">Shadow nhỏ\u003C\u002Fh1>\n\u003Ch1 class=\"text-shadow-md\">Shadow vừa\u003C\u002Fh1>\n\u003Ch1 class=\"text-shadow-lg\">Shadow lớn\u003C\u002Fh1>\n\u003Ch1 class=\"text-shadow-none\">Không shadow\u003C\u002Fh1>\n",[432,5484,5485,5512,5540,5568,5596],{"__ignoreMap":528},[532,5486,5487,5489,5491,5493,5495,5497,5499,5501,5503,5506,5508,5510],{"class":534,"line":535},[532,5488,661],{"class":549},[532,5490,665],{"class":664},[532,5492,669],{"class":668},[532,5494,672],{"class":549},[532,5496,557],{"class":549},[532,5498,5478],{"class":553},[532,5500,557],{"class":549},[532,5502,681],{"class":549},[532,5504,5505],{"class":581},"Text shadow mặc định",[532,5507,687],{"class":549},[532,5509,665],{"class":664},[532,5511,692],{"class":549},[532,5513,5514,5516,5518,5520,5522,5524,5527,5529,5531,5534,5536,5538],{"class":534,"line":542},[532,5515,661],{"class":549},[532,5517,665],{"class":664},[532,5519,669],{"class":668},[532,5521,672],{"class":549},[532,5523,557],{"class":549},[532,5525,5526],{"class":553},"text-shadow-sm",[532,5528,557],{"class":549},[532,5530,681],{"class":549},[532,5532,5533],{"class":581},"Shadow nhỏ",[532,5535,687],{"class":549},[532,5537,665],{"class":664},[532,5539,692],{"class":549},[532,5541,5542,5544,5546,5548,5550,5552,5555,5557,5559,5562,5564,5566],{"class":534,"line":563},[532,5543,661],{"class":549},[532,5545,665],{"class":664},[532,5547,669],{"class":668},[532,5549,672],{"class":549},[532,5551,557],{"class":549},[532,5553,5554],{"class":553},"text-shadow-md",[532,5556,557],{"class":549},[532,5558,681],{"class":549},[532,5560,5561],{"class":581},"Shadow vừa",[532,5563,687],{"class":549},[532,5565,665],{"class":664},[532,5567,692],{"class":549},[532,5569,5570,5572,5574,5576,5578,5580,5583,5585,5587,5590,5592,5594],{"class":534,"line":570},[532,5571,661],{"class":549},[532,5573,665],{"class":664},[532,5575,669],{"class":668},[532,5577,672],{"class":549},[532,5579,557],{"class":549},[532,5581,5582],{"class":553},"text-shadow-lg",[532,5584,557],{"class":549},[532,5586,681],{"class":549},[532,5588,5589],{"class":581},"Shadow lớn",[532,5591,687],{"class":549},[532,5593,665],{"class":664},[532,5595,692],{"class":549},[532,5597,5598,5600,5602,5604,5606,5608,5611,5613,5615,5618,5620,5622],{"class":534,"line":578},[532,5599,661],{"class":549},[532,5601,665],{"class":664},[532,5603,669],{"class":668},[532,5605,672],{"class":549},[532,5607,557],{"class":549},[532,5609,5610],{"class":553},"text-shadow-none",[532,5612,557],{"class":549},[532,5614,681],{"class":549},[532,5616,5617],{"class":581},"Không shadow",[532,5619,687],{"class":549},[532,5621,665],{"class":664},[532,5623,692],{"class":549},[448,5625,5626,5627,794],{},"Custom text shadow qua ",[432,5628,445],{},[523,5630,5632],{"className":525,"code":5631,"language":527,"meta":528,"style":528},"@theme {\n  --text-shadow-glow: 0 0 10px rgba(59, 130, 246, 0.5);\n  --text-shadow-neon: 0 0 5px #0ff, 0 0 10px #0ff;\n}\n",[432,5633,5634,5640,5668,5688],{"__ignoreMap":528},[532,5635,5636,5638],{"class":534,"line":535},[532,5637,445],{"class":545},[532,5639,575],{"class":549},[532,5641,5642,5645,5647,5650,5652,5655,5657,5660,5662,5665],{"class":534,"line":542},[532,5643,5644],{"class":581},"  --text-shadow-glow: 0 0 10px rgba(59",[532,5646,585],{"class":549},[532,5648,5649],{"class":581}," 130",[532,5651,585],{"class":549},[532,5653,5654],{"class":581}," 246",[532,5656,585],{"class":549},[532,5658,5659],{"class":581}," 0",[532,5661,4879],{"class":549},[532,5663,5664],{"class":588},"5",[532,5666,5667],{"class":581},");\n",[532,5669,5670,5673,5675,5678,5680,5683,5685],{"class":534,"line":563},[532,5671,5672],{"class":581},"  --text-shadow-neon: 0 0 5px ",[532,5674,3756],{"class":549},[532,5676,5677],{"class":581},"0ff",[532,5679,585],{"class":549},[532,5681,5682],{"class":581}," 0 0 10px ",[532,5684,3756],{"class":549},[532,5686,5687],{"class":581},"0ff;\n",[532,5689,5690],{"class":534,"line":570},[532,5691,643],{"class":581},[523,5693,5695],{"className":652,"code":5694,"language":654,"meta":528,"style":528},"\u003Ch1 class=\"text-shadow-glow\">Glow effect\u003C\u002Fh1>\n\u003Ch1 class=\"text-shadow-neon\">Neon text\u003C\u002Fh1>\n",[432,5696,5697,5725],{"__ignoreMap":528},[532,5698,5699,5701,5703,5705,5707,5709,5712,5714,5716,5719,5721,5723],{"class":534,"line":535},[532,5700,661],{"class":549},[532,5702,665],{"class":664},[532,5704,669],{"class":668},[532,5706,672],{"class":549},[532,5708,557],{"class":549},[532,5710,5711],{"class":553},"text-shadow-glow",[532,5713,557],{"class":549},[532,5715,681],{"class":549},[532,5717,5718],{"class":581},"Glow effect",[532,5720,687],{"class":549},[532,5722,665],{"class":664},[532,5724,692],{"class":549},[532,5726,5727,5729,5731,5733,5735,5737,5740,5742,5744,5747,5749,5751],{"class":534,"line":542},[532,5728,661],{"class":549},[532,5730,665],{"class":664},[532,5732,669],{"class":668},[532,5734,672],{"class":549},[532,5736,557],{"class":549},[532,5738,5739],{"class":553},"text-shadow-neon",[532,5741,557],{"class":549},[532,5743,681],{"class":549},[532,5745,5746],{"class":581},"Neon text",[532,5748,687],{"class":549},[532,5750,665],{"class":664},[532,5752,692],{"class":549},[767,5754,5756],{"id":5755},"bài-tập-8-hero-text-với-text-shadow-để-dễ-đọc-trên-ảnh","Bài tập 8: Hero text với text shadow để dễ đọc trên ảnh",[448,5758,5759,5761],{},[755,5760,777],{}," Hero section có background image, text đọc được nhờ text-shadow.",[523,5763,5765],{"className":990,"code":5764,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Csection class=\"relative min-h-[70vh] flex items-center justify-center overflow-hidden\">\n    \u003C!-- Background image -->\n    \u003Cimg\n      src=\"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1506905925346-21bda4d32df4\"\n      alt=\"Mountain landscape\"\n      class=\"absolute inset-0 w-full h-full object-cover\"\n    \u002F>\n\n    \u003C!-- Overlay tối -->\n    \u003Cdiv class=\"absolute inset-0 bg-black\u002F40\">\u003C\u002Fdiv>\n\n    \u003C!-- Nội dung -->\n    \u003Cdiv class=\"relative z-10 text-center px-6 max-w-4xl\">\n      \u003Ch1 class=\"text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white leading-none tracking-tighter text-shadow-lg\">\n        Khám phá thế giới\n      \u003C\u002Fh1>\n\n      \u003Cp class=\"mt-6 text-lg sm:text-xl text-white\u002F90 leading-relaxed max-w-2xl mx-auto text-shadow-sm\">\n        Những chuyến phiêu lưu đáng nhớ bắt đầu từ một bước chân.\n        Cùng chúng tôi khám phá những vùng đất mới.\n      \u003C\u002Fp>\n\n      \u003Cbutton class=\"mt-10 px-8 py-3.5 bg-white text-gray-900 font-semibold rounded-xl text-base hover:bg-gray-100 transition-colors text-shadow-none\">\n        Bắt đầu hành trình\n      \u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[432,5766,5767,5775,5794,5799,5805,5819,5833,5846,5851,5855,5860,5884,5888,5893,5912,5931,5936,5944,5948,5967,5972,5977,5985,5989,6008,6013,6021,6029,6037],{"__ignoreMap":528},[532,5768,5769,5771,5773],{"class":534,"line":535},[532,5770,661],{"class":549},[532,5772,1006],{"class":664},[532,5774,692],{"class":549},[532,5776,5777,5779,5781,5783,5785,5787,5790,5792],{"class":534,"line":542},[532,5778,1013],{"class":549},[532,5780,1958],{"class":664},[532,5782,669],{"class":668},[532,5784,672],{"class":549},[532,5786,557],{"class":549},[532,5788,5789],{"class":553},"relative min-h-[70vh] flex items-center justify-center overflow-hidden",[532,5791,557],{"class":549},[532,5793,692],{"class":549},[532,5795,5796],{"class":534,"line":563},[532,5797,5798],{"class":538},"    \u003C!-- Background image -->\n",[532,5800,5801,5803],{"class":534,"line":570},[532,5802,1034],{"class":549},[532,5804,2900],{"class":664},[532,5806,5807,5810,5812,5814,5817],{"class":534,"line":578},[532,5808,5809],{"class":668},"      src",[532,5811,672],{"class":549},[532,5813,557],{"class":549},[532,5815,5816],{"class":553},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1506905925346-21bda4d32df4",[532,5818,2915],{"class":549},[532,5820,5821,5824,5826,5828,5831],{"class":534,"line":604},[532,5822,5823],{"class":668},"      alt",[532,5825,672],{"class":549},[532,5827,557],{"class":549},[532,5829,5830],{"class":553},"Mountain landscape",[532,5832,2915],{"class":549},[532,5834,5835,5837,5839,5841,5844],{"class":534,"line":624},[532,5836,4224],{"class":668},[532,5838,672],{"class":549},[532,5840,557],{"class":549},[532,5842,5843],{"class":553},"absolute inset-0 w-full h-full object-cover",[532,5845,2915],{"class":549},[532,5847,5848],{"class":534,"line":640},[532,5849,5850],{"class":549},"    \u002F>\n",[532,5852,5853],{"class":534,"line":894},[532,5854,567],{"emptyLinePlaceholder":566},[532,5856,5857],{"class":534,"line":900},[532,5858,5859],{"class":538},"    \u003C!-- Overlay tối -->\n",[532,5861,5862,5864,5866,5868,5870,5872,5875,5877,5880,5882],{"class":534,"line":906},[532,5863,1034],{"class":549},[532,5865,1978],{"class":664},[532,5867,669],{"class":668},[532,5869,672],{"class":549},[532,5871,557],{"class":549},[532,5873,5874],{"class":553},"absolute inset-0 bg-black\u002F40",[532,5876,557],{"class":549},[532,5878,5879],{"class":549},">\u003C\u002F",[532,5881,1978],{"class":664},[532,5883,692],{"class":549},[532,5885,5886],{"class":534,"line":912},[532,5887,567],{"emptyLinePlaceholder":566},[532,5889,5890],{"class":534,"line":918},[532,5891,5892],{"class":538},"    \u003C!-- Nội dung -->\n",[532,5894,5895,5897,5899,5901,5903,5905,5908,5910],{"class":534,"line":1237},[532,5896,1034],{"class":549},[532,5898,1978],{"class":664},[532,5900,669],{"class":668},[532,5902,672],{"class":549},[532,5904,557],{"class":549},[532,5906,5907],{"class":553},"relative z-10 text-center px-6 max-w-4xl",[532,5909,557],{"class":549},[532,5911,692],{"class":549},[532,5913,5914,5916,5918,5920,5922,5924,5927,5929],{"class":534,"line":1242},[532,5915,1996],{"class":549},[532,5917,665],{"class":664},[532,5919,669],{"class":668},[532,5921,672],{"class":549},[532,5923,557],{"class":549},[532,5925,5926],{"class":553},"text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black text-white leading-none tracking-tighter text-shadow-lg",[532,5928,557],{"class":549},[532,5930,692],{"class":549},[532,5932,5933],{"class":534,"line":1262},[532,5934,5935],{"class":581},"        Khám phá thế giới\n",[532,5937,5938,5940,5942],{"class":534,"line":1268},[532,5939,2050],{"class":549},[532,5941,665],{"class":664},[532,5943,692],{"class":549},[532,5945,5946],{"class":534,"line":1274},[532,5947,567],{"emptyLinePlaceholder":566},[532,5949,5950,5952,5954,5956,5958,5960,5963,5965],{"class":534,"line":1283},[532,5951,1996],{"class":549},[532,5953,448],{"class":664},[532,5955,669],{"class":668},[532,5957,672],{"class":549},[532,5959,557],{"class":549},[532,5961,5962],{"class":553},"mt-6 text-lg sm:text-xl text-white\u002F90 leading-relaxed max-w-2xl mx-auto text-shadow-sm",[532,5964,557],{"class":549},[532,5966,692],{"class":549},[532,5968,5969],{"class":534,"line":1288},[532,5970,5971],{"class":581},"        Những chuyến phiêu lưu đáng nhớ bắt đầu từ một bước chân.\n",[532,5973,5974],{"class":534,"line":1308},[532,5975,5976],{"class":581},"        Cùng chúng tôi khám phá những vùng đất mới.\n",[532,5978,5979,5981,5983],{"class":534,"line":1314},[532,5980,2050],{"class":549},[532,5982,448],{"class":664},[532,5984,692],{"class":549},[532,5986,5987],{"class":534,"line":1323},[532,5988,567],{"emptyLinePlaceholder":566},[532,5990,5991,5993,5995,5997,5999,6001,6004,6006],{"class":534,"line":1332},[532,5992,1996],{"class":549},[532,5994,2125],{"class":664},[532,5996,669],{"class":668},[532,5998,672],{"class":549},[532,6000,557],{"class":549},[532,6002,6003],{"class":553},"mt-10 px-8 py-3.5 bg-white text-gray-900 font-semibold rounded-xl text-base hover:bg-gray-100 transition-colors text-shadow-none",[532,6005,557],{"class":549},[532,6007,692],{"class":549},[532,6009,6010],{"class":534,"line":3119},[532,6011,6012],{"class":581},"        Bắt đầu hành trình\n",[532,6014,6015,6017,6019],{"class":534,"line":3139},[532,6016,2050],{"class":549},[532,6018,2125],{"class":664},[532,6020,692],{"class":549},[532,6022,6023,6025,6027],{"class":534,"line":3145},[532,6024,1158],{"class":549},[532,6026,1978],{"class":664},[532,6028,692],{"class":549},[532,6030,6031,6033,6035],{"class":534,"line":3151},[532,6032,1045],{"class":549},[532,6034,1958],{"class":664},[532,6036,692],{"class":549},[532,6038,6039,6041,6043],{"class":534,"line":3157},[532,6040,687],{"class":549},[532,6042,1006],{"class":664},[532,6044,692],{"class":549},[1340,6046],{},[427,6048,6050],{"id":6049},"_7-colors-oklch-system-v40-new","7. Colors -- OKLCH System (v4.0 NEW)",[448,6052,6053,6054,6057],{},"Tailwind CSS v4 chuyển hoàn toàn sang ",[755,6055,6056],{},"OKLCH color space"," — một cuộc cách mạng về màu sắc.",[749,6059,753,6061,6064,6065,6068,6069,6072],{"color":751,"icon":6060},"i-lucide-star",[755,6062,6063],{},"OKLCH là gì?"," OKLCH là không gian màu ",[755,6066,6067],{},"perceptually uniform"," (đồng nhất về cảm nhận) — 2 màu có cùng \"khoảng cách số\" sẽ trông giống nhau về độ khác biệt với mắt người. Hỗ trợ ",[755,6070,6071],{},"P3 wide gamut"," — hiển thị được nhiều màu hơn sRGB trên màn hình hiện đại.",[767,6074,6076],{"id":6075},"full-default-color-palette","Full default color palette",[448,6078,6079],{},"Tailwind cung cấp 22 họ màu, mỗi họ có scale từ 50 -> 950:",[6081,6082,6083,6104,6120,6163],"card-group",{},[6084,6085,6088,435,6091,435,6094,435,6097,435,6100,6103],"card",{"icon":6086,"title":6087},"i-lucide-palette","Neutral \u002F Gray tones",[432,6089,6090],{},"slate",[432,6092,6093],{},"gray",[432,6095,6096],{},"zinc",[432,6098,6099],{},"neutral",[432,6101,6102],{},"stone"," — dùng cho text, background, border. Mỗi loại có undertone khác nhau (slate hơi xanh, stone hơi ấm).",[6084,6105,6107,435,6110,435,6113,435,6116,6119],{"icon":6086,"title":6106},"Warm colors",[432,6108,6109],{},"red",[432,6111,6112],{},"orange",[432,6114,6115],{},"amber",[432,6117,6118],{},"yellow"," — cảnh báo, CTA, nhấn mạnh.",[6084,6121,6123,435,6126,435,6129,435,6132,435,6135,435,6138,435,6141,435,6144,435,6147,435,6150,435,6153,435,6156,435,6159,6162],{"icon":6086,"title":6122},"Cool colors",[432,6124,6125],{},"lime",[432,6127,6128],{},"green",[432,6130,6131],{},"emerald",[432,6133,6134],{},"teal",[432,6136,6137],{},"cyan",[432,6139,6140],{},"sky",[432,6142,6143],{},"blue",[432,6145,6146],{},"indigo",[432,6148,6149],{},"violet",[432,6151,6152],{},"purple",[432,6154,6155],{},"fuchsia",[432,6157,6158],{},"pink",[432,6160,6161],{},"rose"," — brand, link, accent.",[6084,6164,6166,435,6169,435,6172,435,6175,6178],{"icon":405,"title":6165},"NEW v4.2",[432,6167,6168],{},"mauve",[432,6170,6171],{},"olive",[432,6173,6174],{},"mist",[432,6176,6177],{},"taupe"," — 4 họ màu mới, tinh tế hơn cho thiết kế hiện đại.",[767,6180,6182],{"id":6181},"cú-pháp-sử-dụng","Cú pháp sử dụng",[523,6184,6186],{"className":652,"code":6185,"language":654,"meta":528,"style":528},"\u003C!-- Text color -->\n\u003Cp class=\"text-red-500\">Chữ đỏ\u003C\u002Fp>\n\u003Cp class=\"text-blue-600\">Chữ xanh dương\u003C\u002Fp>\n\n\u003C!-- Background color -->\n\u003Cdiv class=\"bg-emerald-500\">Nền xanh lá\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-slate-100\">Nền xám nhạt\u003C\u002Fdiv>\n\n\u003C!-- Border color -->\n\u003Cdiv class=\"border border-indigo-400\">Viền tím\u003C\u002Fdiv>\n",[432,6187,6188,6193,6221,6249,6253,6258,6286,6314,6318,6323],{"__ignoreMap":528},[532,6189,6190],{"class":534,"line":535},[532,6191,6192],{"class":538},"\u003C!-- Text color -->\n",[532,6194,6195,6197,6199,6201,6203,6205,6208,6210,6212,6215,6217,6219],{"class":534,"line":542},[532,6196,661],{"class":549},[532,6198,448],{"class":664},[532,6200,669],{"class":668},[532,6202,672],{"class":549},[532,6204,557],{"class":549},[532,6206,6207],{"class":553},"text-red-500",[532,6209,557],{"class":549},[532,6211,681],{"class":549},[532,6213,6214],{"class":581},"Chữ đỏ",[532,6216,687],{"class":549},[532,6218,448],{"class":664},[532,6220,692],{"class":549},[532,6222,6223,6225,6227,6229,6231,6233,6236,6238,6240,6243,6245,6247],{"class":534,"line":563},[532,6224,661],{"class":549},[532,6226,448],{"class":664},[532,6228,669],{"class":668},[532,6230,672],{"class":549},[532,6232,557],{"class":549},[532,6234,6235],{"class":553},"text-blue-600",[532,6237,557],{"class":549},[532,6239,681],{"class":549},[532,6241,6242],{"class":581},"Chữ xanh dương",[532,6244,687],{"class":549},[532,6246,448],{"class":664},[532,6248,692],{"class":549},[532,6250,6251],{"class":534,"line":570},[532,6252,567],{"emptyLinePlaceholder":566},[532,6254,6255],{"class":534,"line":578},[532,6256,6257],{"class":538},"\u003C!-- Background color -->\n",[532,6259,6260,6262,6264,6266,6268,6270,6273,6275,6277,6280,6282,6284],{"class":534,"line":604},[532,6261,661],{"class":549},[532,6263,1978],{"class":664},[532,6265,669],{"class":668},[532,6267,672],{"class":549},[532,6269,557],{"class":549},[532,6271,6272],{"class":553},"bg-emerald-500",[532,6274,557],{"class":549},[532,6276,681],{"class":549},[532,6278,6279],{"class":581},"Nền xanh lá",[532,6281,687],{"class":549},[532,6283,1978],{"class":664},[532,6285,692],{"class":549},[532,6287,6288,6290,6292,6294,6296,6298,6301,6303,6305,6308,6310,6312],{"class":534,"line":624},[532,6289,661],{"class":549},[532,6291,1978],{"class":664},[532,6293,669],{"class":668},[532,6295,672],{"class":549},[532,6297,557],{"class":549},[532,6299,6300],{"class":553},"bg-slate-100",[532,6302,557],{"class":549},[532,6304,681],{"class":549},[532,6306,6307],{"class":581},"Nền xám nhạt",[532,6309,687],{"class":549},[532,6311,1978],{"class":664},[532,6313,692],{"class":549},[532,6315,6316],{"class":534,"line":640},[532,6317,567],{"emptyLinePlaceholder":566},[532,6319,6320],{"class":534,"line":894},[532,6321,6322],{"class":538},"\u003C!-- Border color -->\n",[532,6324,6325,6327,6329,6331,6333,6335,6338,6340,6342,6345,6347,6349],{"class":534,"line":900},[532,6326,661],{"class":549},[532,6328,1978],{"class":664},[532,6330,669],{"class":668},[532,6332,672],{"class":549},[532,6334,557],{"class":549},[532,6336,6337],{"class":553},"border border-indigo-400",[532,6339,557],{"class":549},[532,6341,681],{"class":549},[532,6343,6344],{"class":581},"Viền tím",[532,6346,687],{"class":549},[532,6348,1978],{"class":664},[532,6350,692],{"class":549},[767,6352,6354,6355,446],{"id":6353},"opacity-modifier-cú-pháp","Opacity modifier (cú pháp ",[432,6356,6357],{},"\u002F",[448,6359,6360,6361,6364,6365,6367],{},"Thay vì dùng ",[432,6362,6363],{},"bg-opacity-*"," riêng, Tailwind v4 dùng cú pháp ",[432,6366,6357],{}," gọn hơn:",[523,6369,6371],{"className":652,"code":6370,"language":654,"meta":528,"style":528},"\u003C!-- Opacity 75% -->\n\u003Cdiv class=\"bg-red-500\u002F75\">Nền đỏ 75% opacity\u003C\u002Fdiv>\n\n\u003C!-- Opacity 50% -->\n\u003Cp class=\"text-blue-600\u002F50\">Chữ xanh 50% opacity\u003C\u002Fp>\n\n\u003C!-- Opacity 25% -->\n\u003Cdiv class=\"border-purple-400\u002F25\">Viền tím 25% opacity\u003C\u002Fdiv>\n\n\u003C!-- Opacity 10% cho overlay nhẹ -->\n\u003Cdiv class=\"bg-black\u002F10\">Overlay đen 10%\u003C\u002Fdiv>\n",[432,6372,6373,6378,6406,6410,6415,6443,6447,6452,6480,6484,6489],{"__ignoreMap":528},[532,6374,6375],{"class":534,"line":535},[532,6376,6377],{"class":538},"\u003C!-- Opacity 75% -->\n",[532,6379,6380,6382,6384,6386,6388,6390,6393,6395,6397,6400,6402,6404],{"class":534,"line":542},[532,6381,661],{"class":549},[532,6383,1978],{"class":664},[532,6385,669],{"class":668},[532,6387,672],{"class":549},[532,6389,557],{"class":549},[532,6391,6392],{"class":553},"bg-red-500\u002F75",[532,6394,557],{"class":549},[532,6396,681],{"class":549},[532,6398,6399],{"class":581},"Nền đỏ 75% opacity",[532,6401,687],{"class":549},[532,6403,1978],{"class":664},[532,6405,692],{"class":549},[532,6407,6408],{"class":534,"line":563},[532,6409,567],{"emptyLinePlaceholder":566},[532,6411,6412],{"class":534,"line":570},[532,6413,6414],{"class":538},"\u003C!-- Opacity 50% -->\n",[532,6416,6417,6419,6421,6423,6425,6427,6430,6432,6434,6437,6439,6441],{"class":534,"line":578},[532,6418,661],{"class":549},[532,6420,448],{"class":664},[532,6422,669],{"class":668},[532,6424,672],{"class":549},[532,6426,557],{"class":549},[532,6428,6429],{"class":553},"text-blue-600\u002F50",[532,6431,557],{"class":549},[532,6433,681],{"class":549},[532,6435,6436],{"class":581},"Chữ xanh 50% opacity",[532,6438,687],{"class":549},[532,6440,448],{"class":664},[532,6442,692],{"class":549},[532,6444,6445],{"class":534,"line":604},[532,6446,567],{"emptyLinePlaceholder":566},[532,6448,6449],{"class":534,"line":624},[532,6450,6451],{"class":538},"\u003C!-- Opacity 25% -->\n",[532,6453,6454,6456,6458,6460,6462,6464,6467,6469,6471,6474,6476,6478],{"class":534,"line":640},[532,6455,661],{"class":549},[532,6457,1978],{"class":664},[532,6459,669],{"class":668},[532,6461,672],{"class":549},[532,6463,557],{"class":549},[532,6465,6466],{"class":553},"border-purple-400\u002F25",[532,6468,557],{"class":549},[532,6470,681],{"class":549},[532,6472,6473],{"class":581},"Viền tím 25% opacity",[532,6475,687],{"class":549},[532,6477,1978],{"class":664},[532,6479,692],{"class":549},[532,6481,6482],{"class":534,"line":894},[532,6483,567],{"emptyLinePlaceholder":566},[532,6485,6486],{"class":534,"line":900},[532,6487,6488],{"class":538},"\u003C!-- Opacity 10% cho overlay nhẹ -->\n",[532,6490,6491,6493,6495,6497,6499,6501,6504,6506,6508,6511,6513,6515],{"class":534,"line":906},[532,6492,661],{"class":549},[532,6494,1978],{"class":664},[532,6496,669],{"class":668},[532,6498,672],{"class":549},[532,6500,557],{"class":549},[532,6502,6503],{"class":553},"bg-black\u002F10",[532,6505,557],{"class":549},[532,6507,681],{"class":549},[532,6509,6510],{"class":581},"Overlay đen 10%",[532,6512,687],{"class":549},[532,6514,1978],{"class":664},[532,6516,692],{"class":549},[767,6518,6520],{"id":6519},"bài-tập-9-color-palette-cho-1-landing-page-primarysecondaryaccent","Bài tập 9: Color palette cho 1 landing page (primary\u002Fsecondary\u002Faccent)",[448,6522,6523,6525,6526,6528],{},[755,6524,777],{}," Định nghĩa color system trong ",[432,6527,445],{}," cho landing page SaaS với:",[1068,6530,6531,6534,6537,6540],{},[1071,6532,6533],{},"Primary: Indigo",[1071,6535,6536],{},"Secondary: Teal",[1071,6538,6539],{},"Accent: Amber",[1071,6541,6542],{},"Neutral: Slate",[523,6544,6546],{"className":525,"code":6545,"language":527,"meta":528,"style":528},"\u002F* app\u002Fassets\u002Fcss\u002Fmain.css *\u002F\n@import \"tailwindcss\";\n\n@theme {\n  --color-primary-50: var(--color-indigo-50);\n  --color-primary-100: var(--color-indigo-100);\n  --color-primary-200: var(--color-indigo-200);\n  --color-primary-300: var(--color-indigo-300);\n  --color-primary-400: var(--color-indigo-400);\n  --color-primary-500: var(--color-indigo-500);\n  --color-primary-600: var(--color-indigo-600);\n  --color-primary-700: var(--color-indigo-700);\n  --color-primary-800: var(--color-indigo-800);\n  --color-primary-900: var(--color-indigo-900);\n  --color-primary-950: var(--color-indigo-950);\n\n  --color-secondary-500: var(--color-teal-500);\n  --color-secondary-600: var(--color-teal-600);\n\n  --color-accent-400: var(--color-amber-400);\n  --color-accent-500: var(--color-amber-500);\n}\n",[432,6547,6548,6552,6564,6568,6574,6579,6584,6589,6594,6599,6604,6609,6614,6619,6624,6629,6633,6638,6643,6647,6652,6657],{"__ignoreMap":528},[532,6549,6550],{"class":534,"line":535},[532,6551,539],{"class":538},[532,6553,6554,6556,6558,6560,6562],{"class":534,"line":542},[532,6555,546],{"class":545},[532,6557,550],{"class":549},[532,6559,554],{"class":553},[532,6561,557],{"class":549},[532,6563,560],{"class":549},[532,6565,6566],{"class":534,"line":563},[532,6567,567],{"emptyLinePlaceholder":566},[532,6569,6570,6572],{"class":534,"line":570},[532,6571,445],{"class":545},[532,6573,575],{"class":549},[532,6575,6576],{"class":534,"line":578},[532,6577,6578],{"class":581},"  --color-primary-50: var(--color-indigo-50);\n",[532,6580,6581],{"class":534,"line":604},[532,6582,6583],{"class":581},"  --color-primary-100: var(--color-indigo-100);\n",[532,6585,6586],{"class":534,"line":624},[532,6587,6588],{"class":581},"  --color-primary-200: var(--color-indigo-200);\n",[532,6590,6591],{"class":534,"line":640},[532,6592,6593],{"class":581},"  --color-primary-300: var(--color-indigo-300);\n",[532,6595,6596],{"class":534,"line":894},[532,6597,6598],{"class":581},"  --color-primary-400: var(--color-indigo-400);\n",[532,6600,6601],{"class":534,"line":900},[532,6602,6603],{"class":581},"  --color-primary-500: var(--color-indigo-500);\n",[532,6605,6606],{"class":534,"line":906},[532,6607,6608],{"class":581},"  --color-primary-600: var(--color-indigo-600);\n",[532,6610,6611],{"class":534,"line":912},[532,6612,6613],{"class":581},"  --color-primary-700: var(--color-indigo-700);\n",[532,6615,6616],{"class":534,"line":918},[532,6617,6618],{"class":581},"  --color-primary-800: var(--color-indigo-800);\n",[532,6620,6621],{"class":534,"line":1237},[532,6622,6623],{"class":581},"  --color-primary-900: var(--color-indigo-900);\n",[532,6625,6626],{"class":534,"line":1242},[532,6627,6628],{"class":581},"  --color-primary-950: var(--color-indigo-950);\n",[532,6630,6631],{"class":534,"line":1262},[532,6632,567],{"emptyLinePlaceholder":566},[532,6634,6635],{"class":534,"line":1268},[532,6636,6637],{"class":581},"  --color-secondary-500: var(--color-teal-500);\n",[532,6639,6640],{"class":534,"line":1274},[532,6641,6642],{"class":581},"  --color-secondary-600: var(--color-teal-600);\n",[532,6644,6645],{"class":534,"line":1283},[532,6646,567],{"emptyLinePlaceholder":566},[532,6648,6649],{"class":534,"line":1288},[532,6650,6651],{"class":581},"  --color-accent-400: var(--color-amber-400);\n",[532,6653,6654],{"class":534,"line":1308},[532,6655,6656],{"class":581},"  --color-accent-500: var(--color-amber-500);\n",[532,6658,6659],{"class":534,"line":1314},[532,6660,643],{"class":549},[523,6662,6664],{"className":990,"code":6663,"language":992,"meta":528,"style":528},"\u003C!-- Sử dụng trong component -->\n\u003Ctemplate>\n  \u003Cdiv class=\"max-w-4xl mx-auto p-8 space-y-6\">\n    \u003C!-- Primary button -->\n    \u003Cbutton class=\"px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 transition-colors\">\n      CTA chinh — Primary\n    \u003C\u002Fbutton>\n\n    \u003C!-- Secondary button -->\n    \u003Cbutton class=\"px-6 py-3 bg-secondary-500 text-white font-semibold rounded-lg hover:bg-secondary-600 transition-colors\">\n      Hành động phụ — Secondary\n    \u003C\u002Fbutton>\n\n    \u003C!-- Accent badge -->\n    \u003Cspan class=\"inline-flex px-3 py-1 bg-accent-400\u002F20 text-accent-500 text-sm font-medium rounded-full\">\n      Mới ra mắt\n    \u003C\u002Fspan>\n\n    \u003C!-- Section với nền primary nhạt -->\n    \u003Csection class=\"bg-primary-50 rounded-2xl p-8\">\n      \u003Ch2 class=\"text-primary-900 text-2xl font-bold\">Tính năng nổi bật\u003C\u002Fh2>\n      \u003Cp class=\"text-primary-700 mt-2\">Mô tả ngắn gọn về tính năng.\u003C\u002Fp>\n    \u003C\u002Fsection>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,6665,6666,6671,6679,6698,6703,6722,6727,6735,6739,6744,6763,6768,6776,6780,6785,6804,6809,6817,6821,6826,6845,6873,6901,6909,6917],{"__ignoreMap":528},[532,6667,6668],{"class":534,"line":535},[532,6669,6670],{"class":538},"\u003C!-- Sử dụng trong component -->\n",[532,6672,6673,6675,6677],{"class":534,"line":542},[532,6674,661],{"class":549},[532,6676,1006],{"class":664},[532,6678,692],{"class":549},[532,6680,6681,6683,6685,6687,6689,6691,6694,6696],{"class":534,"line":563},[532,6682,1013],{"class":549},[532,6684,1978],{"class":664},[532,6686,669],{"class":668},[532,6688,672],{"class":549},[532,6690,557],{"class":549},[532,6692,6693],{"class":553},"max-w-4xl mx-auto p-8 space-y-6",[532,6695,557],{"class":549},[532,6697,692],{"class":549},[532,6699,6700],{"class":534,"line":570},[532,6701,6702],{"class":538},"    \u003C!-- Primary button -->\n",[532,6704,6705,6707,6709,6711,6713,6715,6718,6720],{"class":534,"line":578},[532,6706,1034],{"class":549},[532,6708,2125],{"class":664},[532,6710,669],{"class":668},[532,6712,672],{"class":549},[532,6714,557],{"class":549},[532,6716,6717],{"class":553},"px-6 py-3 bg-primary-600 text-white font-semibold rounded-lg hover:bg-primary-700 transition-colors",[532,6719,557],{"class":549},[532,6721,692],{"class":549},[532,6723,6724],{"class":534,"line":604},[532,6725,6726],{"class":581},"      CTA chinh — Primary\n",[532,6728,6729,6731,6733],{"class":534,"line":624},[532,6730,1158],{"class":549},[532,6732,2125],{"class":664},[532,6734,692],{"class":549},[532,6736,6737],{"class":534,"line":640},[532,6738,567],{"emptyLinePlaceholder":566},[532,6740,6741],{"class":534,"line":894},[532,6742,6743],{"class":538},"    \u003C!-- Secondary button -->\n",[532,6745,6746,6748,6750,6752,6754,6756,6759,6761],{"class":534,"line":900},[532,6747,1034],{"class":549},[532,6749,2125],{"class":664},[532,6751,669],{"class":668},[532,6753,672],{"class":549},[532,6755,557],{"class":549},[532,6757,6758],{"class":553},"px-6 py-3 bg-secondary-500 text-white font-semibold rounded-lg hover:bg-secondary-600 transition-colors",[532,6760,557],{"class":549},[532,6762,692],{"class":549},[532,6764,6765],{"class":534,"line":906},[532,6766,6767],{"class":581},"      Hành động phụ — Secondary\n",[532,6769,6770,6772,6774],{"class":534,"line":912},[532,6771,1158],{"class":549},[532,6773,2125],{"class":664},[532,6775,692],{"class":549},[532,6777,6778],{"class":534,"line":918},[532,6779,567],{"emptyLinePlaceholder":566},[532,6781,6782],{"class":534,"line":1237},[532,6783,6784],{"class":538},"    \u003C!-- Accent badge -->\n",[532,6786,6787,6789,6791,6793,6795,6797,6800,6802],{"class":534,"line":1242},[532,6788,1034],{"class":549},[532,6790,532],{"class":664},[532,6792,669],{"class":668},[532,6794,672],{"class":549},[532,6796,557],{"class":549},[532,6798,6799],{"class":553},"inline-flex px-3 py-1 bg-accent-400\u002F20 text-accent-500 text-sm font-medium rounded-full",[532,6801,557],{"class":549},[532,6803,692],{"class":549},[532,6805,6806],{"class":534,"line":1262},[532,6807,6808],{"class":581},"      Mới ra mắt\n",[532,6810,6811,6813,6815],{"class":534,"line":1268},[532,6812,1158],{"class":549},[532,6814,532],{"class":664},[532,6816,692],{"class":549},[532,6818,6819],{"class":534,"line":1274},[532,6820,567],{"emptyLinePlaceholder":566},[532,6822,6823],{"class":534,"line":1283},[532,6824,6825],{"class":538},"    \u003C!-- Section với nền primary nhạt -->\n",[532,6827,6828,6830,6832,6834,6836,6838,6841,6843],{"class":534,"line":1288},[532,6829,1034],{"class":549},[532,6831,1958],{"class":664},[532,6833,669],{"class":668},[532,6835,672],{"class":549},[532,6837,557],{"class":549},[532,6839,6840],{"class":553},"bg-primary-50 rounded-2xl p-8",[532,6842,557],{"class":549},[532,6844,692],{"class":549},[532,6846,6847,6849,6851,6853,6855,6857,6860,6862,6864,6867,6869,6871],{"class":534,"line":1308},[532,6848,1996],{"class":549},[532,6850,427],{"class":664},[532,6852,669],{"class":668},[532,6854,672],{"class":549},[532,6856,557],{"class":549},[532,6858,6859],{"class":553},"text-primary-900 text-2xl font-bold",[532,6861,557],{"class":549},[532,6863,681],{"class":549},[532,6865,6866],{"class":581},"Tính năng nổi bật",[532,6868,687],{"class":549},[532,6870,427],{"class":664},[532,6872,692],{"class":549},[532,6874,6875,6877,6879,6881,6883,6885,6888,6890,6892,6895,6897,6899],{"class":534,"line":1314},[532,6876,1996],{"class":549},[532,6878,448],{"class":664},[532,6880,669],{"class":668},[532,6882,672],{"class":549},[532,6884,557],{"class":549},[532,6886,6887],{"class":553},"text-primary-700 mt-2",[532,6889,557],{"class":549},[532,6891,681],{"class":549},[532,6893,6894],{"class":581},"Mô tả ngắn gọn về tính năng.",[532,6896,687],{"class":549},[532,6898,448],{"class":664},[532,6900,692],{"class":549},[532,6902,6903,6905,6907],{"class":534,"line":1323},[532,6904,1158],{"class":549},[532,6906,1958],{"class":664},[532,6908,692],{"class":549},[532,6910,6911,6913,6915],{"class":534,"line":1332},[532,6912,1045],{"class":549},[532,6914,1978],{"class":664},[532,6916,692],{"class":549},[532,6918,6919,6921,6923],{"class":534,"line":3119},[532,6920,687],{"class":549},[532,6922,1006],{"class":664},[532,6924,692],{"class":549},[767,6926,6928],{"id":6927},"bài-tập-10-accessible-color-contrast-checker-concept","Bài tập 10: Accessible color contrast checker concept",[448,6930,6931,6933],{},[755,6932,777],{}," Tạo component minh họa các cặp màu đạt chuẩn WCAG AA\u002FAAA.",[523,6935,6937],{"className":990,"code":6936,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-3xl mx-auto p-8 space-y-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900\">Kiểm tra độ tương phản màu (WCAG)\u003C\u002Fh2>\n\n    \u003Cp class=\"text-gray-600\">\n      WCAG yêu cầu contrast ratio tối thiểu \u003Cstrong>4.5:1\u003C\u002Fstrong> cho text thường và \u003Cstrong>3:1\u003C\u002Fstrong> cho text lớn (>=18px bold hoặc >=24px).\n    \u003C\u002Fp>\n\n    \u003C!-- Pass AA: text-gray-900 trên bg-white = ratio ~15:1 -->\n    \u003Cdiv class=\"p-6 bg-white border rounded-xl\">\n      \u003Cp class=\"text-sm text-gray-500 mb-2\">Pass AA (ratio ~15:1)\u003C\u002Fp>\n      \u003Cp class=\"text-gray-900 text-lg font-medium\">Text đen chuẩn trên nền trắng — luôn đạt AA\u002FAAA\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Pass AA: text-white trên bg-indigo-600 = ratio ~6.2:1 -->\n    \u003Cdiv class=\"p-6 bg-indigo-600 rounded-xl\">\n      \u003Cp class=\"text-sm text-indigo-200 mb-2\">Pass AA (ratio ~6.2:1)\u003C\u002Fp>\n      \u003Cp class=\"text-white text-lg font-medium\">Chữ trắng trên nền indigo-600 — đạt AA\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Fail: text-gray-400 trên bg-white = ratio ~2.6:1 -->\n    \u003Cdiv class=\"p-6 bg-white border rounded-xl\">\n      \u003Cp class=\"text-sm text-red-500 mb-2\">Fail AA (ratio ~2.6:1) — Không nên dùng!\u003C\u002Fp>\n      \u003Cp class=\"text-gray-400 text-lg\">Chữ xám nhạt trên nền trắng — khó đọc\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Pass AA: text-gray-600 trên bg-white = ratio ~5.4:1 -->\n    \u003Cdiv class=\"p-6 bg-white border rounded-xl\">\n      \u003Cp class=\"text-sm text-emerald-600 mb-2\">Pass AA (ratio ~5.4:1) — Tối thiểu cho body text\u003C\u002Fp>\n      \u003Cp class=\"text-gray-600 text-base\">Nên dùng text-gray-600 trở lên cho body text trên nền trắng.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Bảng tham khảo nhanh -->\n    \u003Cdiv class=\"overflow-x-auto\">\n      \u003Ctable class=\"w-full text-sm border-collapse\">\n        \u003Cthead>\n          \u003Ctr class=\"bg-gray-50\">\n            \u003Cth class=\"border px-4 py-2 text-left\">Text Color\u003C\u002Fth>\n            \u003Cth class=\"border px-4 py-2 text-left\">Background\u003C\u002Fth>\n            \u003Cth class=\"border px-4 py-2 text-left\">Ratio (xấp xỉ)\u003C\u002Fth>\n            \u003Cth class=\"border px-4 py-2 text-left\">WCAG AA\u003C\u002Fth>\n          \u003C\u002Ftr>\n        \u003C\u002Fthead>\n        \u003Ctbody>\n          \u003Ctr>\n            \u003Ctd class=\"border px-4 py-2\">\u003Ccode>text-gray-900\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2\">\u003Ccode>bg-white\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2\">15:1\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2 text-emerald-600 font-medium\">Pass AAA\u003C\u002Ftd>\n          \u003C\u002Ftr>\n          \u003Ctr>\n            \u003Ctd class=\"border px-4 py-2\">\u003Ccode>text-gray-600\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2\">\u003Ccode>bg-white\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2\">5.4:1\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2 text-emerald-600 font-medium\">Pass AA\u003C\u002Ftd>\n          \u003C\u002Ftr>\n          \u003Ctr>\n            \u003Ctd class=\"border px-4 py-2\">\u003Ccode>text-white\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2\">\u003Ccode>bg-blue-600\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2\">5.1:1\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2 text-emerald-600 font-medium\">Pass AA\u003C\u002Ftd>\n          \u003C\u002Ftr>\n          \u003Ctr>\n            \u003Ctd class=\"border px-4 py-2\">\u003Ccode>text-gray-500\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2\">\u003Ccode>bg-white\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2\">3.5:1\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2 text-red-500 font-medium\">Fail\u003C\u002Ftd>\n          \u003C\u002Ftr>\n          \u003Ctr>\n            \u003Ctd class=\"border px-4 py-2\">\u003Ccode>text-gray-400\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2\">\u003Ccode>bg-white\u003C\u002Fcode>\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2\">2.6:1\u003C\u002Ftd>\n            \u003Ctd class=\"border px-4 py-2 text-red-500 font-medium\">Fail\u003C\u002Ftd>\n          \u003C\u002Ftr>\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,6938,6939,6947,6966,6993,6997,7016,7057,7065,7069,7074,7093,7121,7149,7157,7161,7166,7185,7213,7241,7249,7253,7258,7276,7304,7332,7340,7344,7349,7367,7395,7423,7431,7435,7440,7459,7478,7486,7505,7534,7561,7588,7615,7624,7632,7640,7648,7684,7719,7746,7774,7782,7791,7826,7861,7889,7917,7926,7935,7971,8007,8035,8062,8071,8080,8116,8151,8179,8208,8217,8226,8262,8297,8325,8352,8361,8370,8379,8388,8397],{"__ignoreMap":528},[532,6940,6941,6943,6945],{"class":534,"line":535},[532,6942,661],{"class":549},[532,6944,1006],{"class":664},[532,6946,692],{"class":549},[532,6948,6949,6951,6953,6955,6957,6959,6962,6964],{"class":534,"line":542},[532,6950,1013],{"class":549},[532,6952,1978],{"class":664},[532,6954,669],{"class":668},[532,6956,672],{"class":549},[532,6958,557],{"class":549},[532,6960,6961],{"class":553},"max-w-3xl mx-auto p-8 space-y-8",[532,6963,557],{"class":549},[532,6965,692],{"class":549},[532,6967,6968,6970,6972,6974,6976,6978,6980,6982,6984,6987,6989,6991],{"class":534,"line":563},[532,6969,1034],{"class":549},[532,6971,427],{"class":664},[532,6973,669],{"class":668},[532,6975,672],{"class":549},[532,6977,557],{"class":549},[532,6979,4181],{"class":553},[532,6981,557],{"class":549},[532,6983,681],{"class":549},[532,6985,6986],{"class":581},"Kiểm tra độ tương phản màu (WCAG)",[532,6988,687],{"class":549},[532,6990,427],{"class":664},[532,6992,692],{"class":549},[532,6994,6995],{"class":534,"line":570},[532,6996,567],{"emptyLinePlaceholder":566},[532,6998,6999,7001,7003,7005,7007,7009,7012,7014],{"class":534,"line":578},[532,7000,1034],{"class":549},[532,7002,448],{"class":664},[532,7004,669],{"class":668},[532,7006,672],{"class":549},[532,7008,557],{"class":549},[532,7010,7011],{"class":553},"text-gray-600",[532,7013,557],{"class":549},[532,7015,692],{"class":549},[532,7017,7018,7021,7023,7025,7027,7030,7032,7034,7036,7039,7041,7043,7045,7048,7050,7052,7054],{"class":534,"line":604},[532,7019,7020],{"class":581},"      WCAG yêu cầu contrast ratio tối thiểu ",[532,7022,661],{"class":549},[532,7024,755],{"class":664},[532,7026,681],{"class":549},[532,7028,7029],{"class":581},"4.5:1",[532,7031,687],{"class":549},[532,7033,755],{"class":664},[532,7035,681],{"class":549},[532,7037,7038],{"class":581}," cho text thường và ",[532,7040,661],{"class":549},[532,7042,755],{"class":664},[532,7044,681],{"class":549},[532,7046,7047],{"class":581},"3:1",[532,7049,687],{"class":549},[532,7051,755],{"class":664},[532,7053,681],{"class":549},[532,7055,7056],{"class":581}," cho text lớn (>=18px bold hoặc >=24px).\n",[532,7058,7059,7061,7063],{"class":534,"line":624},[532,7060,1158],{"class":549},[532,7062,448],{"class":664},[532,7064,692],{"class":549},[532,7066,7067],{"class":534,"line":640},[532,7068,567],{"emptyLinePlaceholder":566},[532,7070,7071],{"class":534,"line":894},[532,7072,7073],{"class":538},"    \u003C!-- Pass AA: text-gray-900 trên bg-white = ratio ~15:1 -->\n",[532,7075,7076,7078,7080,7082,7084,7086,7089,7091],{"class":534,"line":900},[532,7077,1034],{"class":549},[532,7079,1978],{"class":664},[532,7081,669],{"class":668},[532,7083,672],{"class":549},[532,7085,557],{"class":549},[532,7087,7088],{"class":553},"p-6 bg-white border rounded-xl",[532,7090,557],{"class":549},[532,7092,692],{"class":549},[532,7094,7095,7097,7099,7101,7103,7105,7108,7110,7112,7115,7117,7119],{"class":534,"line":906},[532,7096,1996],{"class":549},[532,7098,448],{"class":664},[532,7100,669],{"class":668},[532,7102,672],{"class":549},[532,7104,557],{"class":549},[532,7106,7107],{"class":553},"text-sm text-gray-500 mb-2",[532,7109,557],{"class":549},[532,7111,681],{"class":549},[532,7113,7114],{"class":581},"Pass AA (ratio ~15:1)",[532,7116,687],{"class":549},[532,7118,448],{"class":664},[532,7120,692],{"class":549},[532,7122,7123,7125,7127,7129,7131,7133,7136,7138,7140,7143,7145,7147],{"class":534,"line":912},[532,7124,1996],{"class":549},[532,7126,448],{"class":664},[532,7128,669],{"class":668},[532,7130,672],{"class":549},[532,7132,557],{"class":549},[532,7134,7135],{"class":553},"text-gray-900 text-lg font-medium",[532,7137,557],{"class":549},[532,7139,681],{"class":549},[532,7141,7142],{"class":581},"Text đen chuẩn trên nền trắng — luôn đạt AA\u002FAAA",[532,7144,687],{"class":549},[532,7146,448],{"class":664},[532,7148,692],{"class":549},[532,7150,7151,7153,7155],{"class":534,"line":918},[532,7152,1158],{"class":549},[532,7154,1978],{"class":664},[532,7156,692],{"class":549},[532,7158,7159],{"class":534,"line":1237},[532,7160,567],{"emptyLinePlaceholder":566},[532,7162,7163],{"class":534,"line":1242},[532,7164,7165],{"class":538},"    \u003C!-- Pass AA: text-white trên bg-indigo-600 = ratio ~6.2:1 -->\n",[532,7167,7168,7170,7172,7174,7176,7178,7181,7183],{"class":534,"line":1262},[532,7169,1034],{"class":549},[532,7171,1978],{"class":664},[532,7173,669],{"class":668},[532,7175,672],{"class":549},[532,7177,557],{"class":549},[532,7179,7180],{"class":553},"p-6 bg-indigo-600 rounded-xl",[532,7182,557],{"class":549},[532,7184,692],{"class":549},[532,7186,7187,7189,7191,7193,7195,7197,7200,7202,7204,7207,7209,7211],{"class":534,"line":1268},[532,7188,1996],{"class":549},[532,7190,448],{"class":664},[532,7192,669],{"class":668},[532,7194,672],{"class":549},[532,7196,557],{"class":549},[532,7198,7199],{"class":553},"text-sm text-indigo-200 mb-2",[532,7201,557],{"class":549},[532,7203,681],{"class":549},[532,7205,7206],{"class":581},"Pass AA (ratio ~6.2:1)",[532,7208,687],{"class":549},[532,7210,448],{"class":664},[532,7212,692],{"class":549},[532,7214,7215,7217,7219,7221,7223,7225,7228,7230,7232,7235,7237,7239],{"class":534,"line":1274},[532,7216,1996],{"class":549},[532,7218,448],{"class":664},[532,7220,669],{"class":668},[532,7222,672],{"class":549},[532,7224,557],{"class":549},[532,7226,7227],{"class":553},"text-white text-lg font-medium",[532,7229,557],{"class":549},[532,7231,681],{"class":549},[532,7233,7234],{"class":581},"Chữ trắng trên nền indigo-600 — đạt AA",[532,7236,687],{"class":549},[532,7238,448],{"class":664},[532,7240,692],{"class":549},[532,7242,7243,7245,7247],{"class":534,"line":1283},[532,7244,1158],{"class":549},[532,7246,1978],{"class":664},[532,7248,692],{"class":549},[532,7250,7251],{"class":534,"line":1288},[532,7252,567],{"emptyLinePlaceholder":566},[532,7254,7255],{"class":534,"line":1308},[532,7256,7257],{"class":538},"    \u003C!-- Fail: text-gray-400 trên bg-white = ratio ~2.6:1 -->\n",[532,7259,7260,7262,7264,7266,7268,7270,7272,7274],{"class":534,"line":1314},[532,7261,1034],{"class":549},[532,7263,1978],{"class":664},[532,7265,669],{"class":668},[532,7267,672],{"class":549},[532,7269,557],{"class":549},[532,7271,7088],{"class":553},[532,7273,557],{"class":549},[532,7275,692],{"class":549},[532,7277,7278,7280,7282,7284,7286,7288,7291,7293,7295,7298,7300,7302],{"class":534,"line":1323},[532,7279,1996],{"class":549},[532,7281,448],{"class":664},[532,7283,669],{"class":668},[532,7285,672],{"class":549},[532,7287,557],{"class":549},[532,7289,7290],{"class":553},"text-sm text-red-500 mb-2",[532,7292,557],{"class":549},[532,7294,681],{"class":549},[532,7296,7297],{"class":581},"Fail AA (ratio ~2.6:1) — Không nên dùng!",[532,7299,687],{"class":549},[532,7301,448],{"class":664},[532,7303,692],{"class":549},[532,7305,7306,7308,7310,7312,7314,7316,7319,7321,7323,7326,7328,7330],{"class":534,"line":1332},[532,7307,1996],{"class":549},[532,7309,448],{"class":664},[532,7311,669],{"class":668},[532,7313,672],{"class":549},[532,7315,557],{"class":549},[532,7317,7318],{"class":553},"text-gray-400 text-lg",[532,7320,557],{"class":549},[532,7322,681],{"class":549},[532,7324,7325],{"class":581},"Chữ xám nhạt trên nền trắng — khó đọc",[532,7327,687],{"class":549},[532,7329,448],{"class":664},[532,7331,692],{"class":549},[532,7333,7334,7336,7338],{"class":534,"line":3119},[532,7335,1158],{"class":549},[532,7337,1978],{"class":664},[532,7339,692],{"class":549},[532,7341,7342],{"class":534,"line":3139},[532,7343,567],{"emptyLinePlaceholder":566},[532,7345,7346],{"class":534,"line":3145},[532,7347,7348],{"class":538},"    \u003C!-- Pass AA: text-gray-600 trên bg-white = ratio ~5.4:1 -->\n",[532,7350,7351,7353,7355,7357,7359,7361,7363,7365],{"class":534,"line":3151},[532,7352,1034],{"class":549},[532,7354,1978],{"class":664},[532,7356,669],{"class":668},[532,7358,672],{"class":549},[532,7360,557],{"class":549},[532,7362,7088],{"class":553},[532,7364,557],{"class":549},[532,7366,692],{"class":549},[532,7368,7369,7371,7373,7375,7377,7379,7382,7384,7386,7389,7391,7393],{"class":534,"line":3157},[532,7370,1996],{"class":549},[532,7372,448],{"class":664},[532,7374,669],{"class":668},[532,7376,672],{"class":549},[532,7378,557],{"class":549},[532,7380,7381],{"class":553},"text-sm text-emerald-600 mb-2",[532,7383,557],{"class":549},[532,7385,681],{"class":549},[532,7387,7388],{"class":581},"Pass AA (ratio ~5.4:1) — Tối thiểu cho body text",[532,7390,687],{"class":549},[532,7392,448],{"class":664},[532,7394,692],{"class":549},[532,7396,7397,7399,7401,7403,7405,7407,7410,7412,7414,7417,7419,7421],{"class":534,"line":3163},[532,7398,1996],{"class":549},[532,7400,448],{"class":664},[532,7402,669],{"class":668},[532,7404,672],{"class":549},[532,7406,557],{"class":549},[532,7408,7409],{"class":553},"text-gray-600 text-base",[532,7411,557],{"class":549},[532,7413,681],{"class":549},[532,7415,7416],{"class":581},"Nên dùng text-gray-600 trở lên cho body text trên nền trắng.",[532,7418,687],{"class":549},[532,7420,448],{"class":664},[532,7422,692],{"class":549},[532,7424,7425,7427,7429],{"class":534,"line":3172},[532,7426,1158],{"class":549},[532,7428,1978],{"class":664},[532,7430,692],{"class":549},[532,7432,7433],{"class":534,"line":3177},[532,7434,567],{"emptyLinePlaceholder":566},[532,7436,7437],{"class":534,"line":3197},[532,7438,7439],{"class":538},"    \u003C!-- Bảng tham khảo nhanh -->\n",[532,7441,7442,7444,7446,7448,7450,7452,7455,7457],{"class":534,"line":3204},[532,7443,1034],{"class":549},[532,7445,1978],{"class":664},[532,7447,669],{"class":668},[532,7449,672],{"class":549},[532,7451,557],{"class":549},[532,7453,7454],{"class":553},"overflow-x-auto",[532,7456,557],{"class":549},[532,7458,692],{"class":549},[532,7460,7461,7463,7465,7467,7469,7471,7474,7476],{"class":534,"line":3219},[532,7462,1996],{"class":549},[532,7464,452],{"class":664},[532,7466,669],{"class":668},[532,7468,672],{"class":549},[532,7470,557],{"class":549},[532,7472,7473],{"class":553},"w-full text-sm border-collapse",[532,7475,557],{"class":549},[532,7477,692],{"class":549},[532,7479,7480,7482,7484],{"class":534,"line":3234},[532,7481,2021],{"class":549},[532,7483,455],{"class":664},[532,7485,692],{"class":549},[532,7487,7488,7490,7492,7494,7496,7498,7501,7503],{"class":534,"line":3249},[532,7489,5051],{"class":549},[532,7491,458],{"class":664},[532,7493,669],{"class":668},[532,7495,672],{"class":549},[532,7497,557],{"class":549},[532,7499,7500],{"class":553},"bg-gray-50",[532,7502,557],{"class":549},[532,7504,692],{"class":549},[532,7506,7507,7510,7512,7514,7516,7518,7521,7523,7525,7528,7530,7532],{"class":534,"line":3255},[532,7508,7509],{"class":549},"            \u003C",[532,7511,461],{"class":664},[532,7513,669],{"class":668},[532,7515,672],{"class":549},[532,7517,557],{"class":549},[532,7519,7520],{"class":553},"border px-4 py-2 text-left",[532,7522,557],{"class":549},[532,7524,681],{"class":549},[532,7526,7527],{"class":581},"Text Color",[532,7529,687],{"class":549},[532,7531,461],{"class":664},[532,7533,692],{"class":549},[532,7535,7536,7538,7540,7542,7544,7546,7548,7550,7552,7555,7557,7559],{"class":534,"line":3284},[532,7537,7509],{"class":549},[532,7539,461],{"class":664},[532,7541,669],{"class":668},[532,7543,672],{"class":549},[532,7545,557],{"class":549},[532,7547,7520],{"class":553},[532,7549,557],{"class":549},[532,7551,681],{"class":549},[532,7553,7554],{"class":581},"Background",[532,7556,687],{"class":549},[532,7558,461],{"class":664},[532,7560,692],{"class":549},[532,7562,7563,7565,7567,7569,7571,7573,7575,7577,7579,7582,7584,7586],{"class":534,"line":3313},[532,7564,7509],{"class":549},[532,7566,461],{"class":664},[532,7568,669],{"class":668},[532,7570,672],{"class":549},[532,7572,557],{"class":549},[532,7574,7520],{"class":553},[532,7576,557],{"class":549},[532,7578,681],{"class":549},[532,7580,7581],{"class":581},"Ratio (xấp xỉ)",[532,7583,687],{"class":549},[532,7585,461],{"class":664},[532,7587,692],{"class":549},[532,7589,7590,7592,7594,7596,7598,7600,7602,7604,7606,7609,7611,7613],{"class":534,"line":3322},[532,7591,7509],{"class":549},[532,7593,461],{"class":664},[532,7595,669],{"class":668},[532,7597,672],{"class":549},[532,7599,557],{"class":549},[532,7601,7520],{"class":553},[532,7603,557],{"class":549},[532,7605,681],{"class":549},[532,7607,7608],{"class":581},"WCAG AA",[532,7610,687],{"class":549},[532,7612,461],{"class":664},[532,7614,692],{"class":549},[532,7616,7617,7620,7622],{"class":534,"line":3331},[532,7618,7619],{"class":549},"          \u003C\u002F",[532,7621,458],{"class":664},[532,7623,692],{"class":549},[532,7625,7626,7628,7630],{"class":534,"line":3340},[532,7627,2148],{"class":549},[532,7629,455],{"class":664},[532,7631,692],{"class":549},[532,7633,7634,7636,7638],{"class":534,"line":4498},[532,7635,2021],{"class":549},[532,7637,471],{"class":664},[532,7639,692],{"class":549},[532,7641,7642,7644,7646],{"class":534,"line":4504},[532,7643,5051],{"class":549},[532,7645,458],{"class":664},[532,7647,692],{"class":549},[532,7649,7650,7652,7654,7656,7658,7660,7663,7665,7668,7670,7672,7674,7676,7678,7680,7682],{"class":534,"line":4514},[532,7651,7509],{"class":549},[532,7653,476],{"class":664},[532,7655,669],{"class":668},[532,7657,672],{"class":549},[532,7659,557],{"class":549},[532,7661,7662],{"class":553},"border px-4 py-2",[532,7664,557],{"class":549},[532,7666,7667],{"class":549},">\u003C",[532,7669,432],{"class":664},[532,7671,681],{"class":549},[532,7673,5062],{"class":581},[532,7675,687],{"class":549},[532,7677,432],{"class":664},[532,7679,5879],{"class":549},[532,7681,476],{"class":664},[532,7683,692],{"class":549},[532,7685,7686,7688,7690,7692,7694,7696,7698,7700,7702,7704,7706,7709,7711,7713,7715,7717],{"class":534,"line":4520},[532,7687,7509],{"class":549},[532,7689,476],{"class":664},[532,7691,669],{"class":668},[532,7693,672],{"class":549},[532,7695,557],{"class":549},[532,7697,7662],{"class":553},[532,7699,557],{"class":549},[532,7701,7667],{"class":549},[532,7703,432],{"class":664},[532,7705,681],{"class":549},[532,7707,7708],{"class":581},"bg-white",[532,7710,687],{"class":549},[532,7712,432],{"class":664},[532,7714,5879],{"class":549},[532,7716,476],{"class":664},[532,7718,692],{"class":549},[532,7720,7721,7723,7725,7727,7729,7731,7733,7735,7737,7740,7742,7744],{"class":534,"line":4529},[532,7722,7509],{"class":549},[532,7724,476],{"class":664},[532,7726,669],{"class":668},[532,7728,672],{"class":549},[532,7730,557],{"class":549},[532,7732,7662],{"class":553},[532,7734,557],{"class":549},[532,7736,681],{"class":549},[532,7738,7739],{"class":581},"15:1",[532,7741,687],{"class":549},[532,7743,476],{"class":664},[532,7745,692],{"class":549},[532,7747,7748,7750,7752,7754,7756,7758,7761,7763,7765,7768,7770,7772],{"class":534,"line":4538},[532,7749,7509],{"class":549},[532,7751,476],{"class":664},[532,7753,669],{"class":668},[532,7755,672],{"class":549},[532,7757,557],{"class":549},[532,7759,7760],{"class":553},"border px-4 py-2 text-emerald-600 font-medium",[532,7762,557],{"class":549},[532,7764,681],{"class":549},[532,7766,7767],{"class":581},"Pass AAA",[532,7769,687],{"class":549},[532,7771,476],{"class":664},[532,7773,692],{"class":549},[532,7775,7776,7778,7780],{"class":534,"line":4547},[532,7777,7619],{"class":549},[532,7779,458],{"class":664},[532,7781,692],{"class":549},[532,7783,7785,7787,7789],{"class":534,"line":7784},51,[532,7786,5051],{"class":549},[532,7788,458],{"class":664},[532,7790,692],{"class":549},[532,7792,7794,7796,7798,7800,7802,7804,7806,7808,7810,7812,7814,7816,7818,7820,7822,7824],{"class":534,"line":7793},52,[532,7795,7509],{"class":549},[532,7797,476],{"class":664},[532,7799,669],{"class":668},[532,7801,672],{"class":549},[532,7803,557],{"class":549},[532,7805,7662],{"class":553},[532,7807,557],{"class":549},[532,7809,7667],{"class":549},[532,7811,432],{"class":664},[532,7813,681],{"class":549},[532,7815,7011],{"class":581},[532,7817,687],{"class":549},[532,7819,432],{"class":664},[532,7821,5879],{"class":549},[532,7823,476],{"class":664},[532,7825,692],{"class":549},[532,7827,7829,7831,7833,7835,7837,7839,7841,7843,7845,7847,7849,7851,7853,7855,7857,7859],{"class":534,"line":7828},53,[532,7830,7509],{"class":549},[532,7832,476],{"class":664},[532,7834,669],{"class":668},[532,7836,672],{"class":549},[532,7838,557],{"class":549},[532,7840,7662],{"class":553},[532,7842,557],{"class":549},[532,7844,7667],{"class":549},[532,7846,432],{"class":664},[532,7848,681],{"class":549},[532,7850,7708],{"class":581},[532,7852,687],{"class":549},[532,7854,432],{"class":664},[532,7856,5879],{"class":549},[532,7858,476],{"class":664},[532,7860,692],{"class":549},[532,7862,7864,7866,7868,7870,7872,7874,7876,7878,7880,7883,7885,7887],{"class":534,"line":7863},54,[532,7865,7509],{"class":549},[532,7867,476],{"class":664},[532,7869,669],{"class":668},[532,7871,672],{"class":549},[532,7873,557],{"class":549},[532,7875,7662],{"class":553},[532,7877,557],{"class":549},[532,7879,681],{"class":549},[532,7881,7882],{"class":581},"5.4:1",[532,7884,687],{"class":549},[532,7886,476],{"class":664},[532,7888,692],{"class":549},[532,7890,7892,7894,7896,7898,7900,7902,7904,7906,7908,7911,7913,7915],{"class":534,"line":7891},55,[532,7893,7509],{"class":549},[532,7895,476],{"class":664},[532,7897,669],{"class":668},[532,7899,672],{"class":549},[532,7901,557],{"class":549},[532,7903,7760],{"class":553},[532,7905,557],{"class":549},[532,7907,681],{"class":549},[532,7909,7910],{"class":581},"Pass AA",[532,7912,687],{"class":549},[532,7914,476],{"class":664},[532,7916,692],{"class":549},[532,7918,7920,7922,7924],{"class":534,"line":7919},56,[532,7921,7619],{"class":549},[532,7923,458],{"class":664},[532,7925,692],{"class":549},[532,7927,7929,7931,7933],{"class":534,"line":7928},57,[532,7930,5051],{"class":549},[532,7932,458],{"class":664},[532,7934,692],{"class":549},[532,7936,7938,7940,7942,7944,7946,7948,7950,7952,7954,7956,7958,7961,7963,7965,7967,7969],{"class":534,"line":7937},58,[532,7939,7509],{"class":549},[532,7941,476],{"class":664},[532,7943,669],{"class":668},[532,7945,672],{"class":549},[532,7947,557],{"class":549},[532,7949,7662],{"class":553},[532,7951,557],{"class":549},[532,7953,7667],{"class":549},[532,7955,432],{"class":664},[532,7957,681],{"class":549},[532,7959,7960],{"class":581},"text-white",[532,7962,687],{"class":549},[532,7964,432],{"class":664},[532,7966,5879],{"class":549},[532,7968,476],{"class":664},[532,7970,692],{"class":549},[532,7972,7974,7976,7978,7980,7982,7984,7986,7988,7990,7992,7994,7997,7999,8001,8003,8005],{"class":534,"line":7973},59,[532,7975,7509],{"class":549},[532,7977,476],{"class":664},[532,7979,669],{"class":668},[532,7981,672],{"class":549},[532,7983,557],{"class":549},[532,7985,7662],{"class":553},[532,7987,557],{"class":549},[532,7989,7667],{"class":549},[532,7991,432],{"class":664},[532,7993,681],{"class":549},[532,7995,7996],{"class":581},"bg-blue-600",[532,7998,687],{"class":549},[532,8000,432],{"class":664},[532,8002,5879],{"class":549},[532,8004,476],{"class":664},[532,8006,692],{"class":549},[532,8008,8010,8012,8014,8016,8018,8020,8022,8024,8026,8029,8031,8033],{"class":534,"line":8009},60,[532,8011,7509],{"class":549},[532,8013,476],{"class":664},[532,8015,669],{"class":668},[532,8017,672],{"class":549},[532,8019,557],{"class":549},[532,8021,7662],{"class":553},[532,8023,557],{"class":549},[532,8025,681],{"class":549},[532,8027,8028],{"class":581},"5.1:1",[532,8030,687],{"class":549},[532,8032,476],{"class":664},[532,8034,692],{"class":549},[532,8036,8038,8040,8042,8044,8046,8048,8050,8052,8054,8056,8058,8060],{"class":534,"line":8037},61,[532,8039,7509],{"class":549},[532,8041,476],{"class":664},[532,8043,669],{"class":668},[532,8045,672],{"class":549},[532,8047,557],{"class":549},[532,8049,7760],{"class":553},[532,8051,557],{"class":549},[532,8053,681],{"class":549},[532,8055,7910],{"class":581},[532,8057,687],{"class":549},[532,8059,476],{"class":664},[532,8061,692],{"class":549},[532,8063,8065,8067,8069],{"class":534,"line":8064},62,[532,8066,7619],{"class":549},[532,8068,458],{"class":664},[532,8070,692],{"class":549},[532,8072,8074,8076,8078],{"class":534,"line":8073},63,[532,8075,5051],{"class":549},[532,8077,458],{"class":664},[532,8079,692],{"class":549},[532,8081,8083,8085,8087,8089,8091,8093,8095,8097,8099,8101,8103,8106,8108,8110,8112,8114],{"class":534,"line":8082},64,[532,8084,7509],{"class":549},[532,8086,476],{"class":664},[532,8088,669],{"class":668},[532,8090,672],{"class":549},[532,8092,557],{"class":549},[532,8094,7662],{"class":553},[532,8096,557],{"class":549},[532,8098,7667],{"class":549},[532,8100,432],{"class":664},[532,8102,681],{"class":549},[532,8104,8105],{"class":581},"text-gray-500",[532,8107,687],{"class":549},[532,8109,432],{"class":664},[532,8111,5879],{"class":549},[532,8113,476],{"class":664},[532,8115,692],{"class":549},[532,8117,8119,8121,8123,8125,8127,8129,8131,8133,8135,8137,8139,8141,8143,8145,8147,8149],{"class":534,"line":8118},65,[532,8120,7509],{"class":549},[532,8122,476],{"class":664},[532,8124,669],{"class":668},[532,8126,672],{"class":549},[532,8128,557],{"class":549},[532,8130,7662],{"class":553},[532,8132,557],{"class":549},[532,8134,7667],{"class":549},[532,8136,432],{"class":664},[532,8138,681],{"class":549},[532,8140,7708],{"class":581},[532,8142,687],{"class":549},[532,8144,432],{"class":664},[532,8146,5879],{"class":549},[532,8148,476],{"class":664},[532,8150,692],{"class":549},[532,8152,8154,8156,8158,8160,8162,8164,8166,8168,8170,8173,8175,8177],{"class":534,"line":8153},66,[532,8155,7509],{"class":549},[532,8157,476],{"class":664},[532,8159,669],{"class":668},[532,8161,672],{"class":549},[532,8163,557],{"class":549},[532,8165,7662],{"class":553},[532,8167,557],{"class":549},[532,8169,681],{"class":549},[532,8171,8172],{"class":581},"3.5:1",[532,8174,687],{"class":549},[532,8176,476],{"class":664},[532,8178,692],{"class":549},[532,8180,8182,8184,8186,8188,8190,8192,8195,8197,8199,8202,8204,8206],{"class":534,"line":8181},67,[532,8183,7509],{"class":549},[532,8185,476],{"class":664},[532,8187,669],{"class":668},[532,8189,672],{"class":549},[532,8191,557],{"class":549},[532,8193,8194],{"class":553},"border px-4 py-2 text-red-500 font-medium",[532,8196,557],{"class":549},[532,8198,681],{"class":549},[532,8200,8201],{"class":581},"Fail",[532,8203,687],{"class":549},[532,8205,476],{"class":664},[532,8207,692],{"class":549},[532,8209,8211,8213,8215],{"class":534,"line":8210},68,[532,8212,7619],{"class":549},[532,8214,458],{"class":664},[532,8216,692],{"class":549},[532,8218,8220,8222,8224],{"class":534,"line":8219},69,[532,8221,5051],{"class":549},[532,8223,458],{"class":664},[532,8225,692],{"class":549},[532,8227,8229,8231,8233,8235,8237,8239,8241,8243,8245,8247,8249,8252,8254,8256,8258,8260],{"class":534,"line":8228},70,[532,8230,7509],{"class":549},[532,8232,476],{"class":664},[532,8234,669],{"class":668},[532,8236,672],{"class":549},[532,8238,557],{"class":549},[532,8240,7662],{"class":553},[532,8242,557],{"class":549},[532,8244,7667],{"class":549},[532,8246,432],{"class":664},[532,8248,681],{"class":549},[532,8250,8251],{"class":581},"text-gray-400",[532,8253,687],{"class":549},[532,8255,432],{"class":664},[532,8257,5879],{"class":549},[532,8259,476],{"class":664},[532,8261,692],{"class":549},[532,8263,8265,8267,8269,8271,8273,8275,8277,8279,8281,8283,8285,8287,8289,8291,8293,8295],{"class":534,"line":8264},71,[532,8266,7509],{"class":549},[532,8268,476],{"class":664},[532,8270,669],{"class":668},[532,8272,672],{"class":549},[532,8274,557],{"class":549},[532,8276,7662],{"class":553},[532,8278,557],{"class":549},[532,8280,7667],{"class":549},[532,8282,432],{"class":664},[532,8284,681],{"class":549},[532,8286,7708],{"class":581},[532,8288,687],{"class":549},[532,8290,432],{"class":664},[532,8292,5879],{"class":549},[532,8294,476],{"class":664},[532,8296,692],{"class":549},[532,8298,8300,8302,8304,8306,8308,8310,8312,8314,8316,8319,8321,8323],{"class":534,"line":8299},72,[532,8301,7509],{"class":549},[532,8303,476],{"class":664},[532,8305,669],{"class":668},[532,8307,672],{"class":549},[532,8309,557],{"class":549},[532,8311,7662],{"class":553},[532,8313,557],{"class":549},[532,8315,681],{"class":549},[532,8317,8318],{"class":581},"2.6:1",[532,8320,687],{"class":549},[532,8322,476],{"class":664},[532,8324,692],{"class":549},[532,8326,8328,8330,8332,8334,8336,8338,8340,8342,8344,8346,8348,8350],{"class":534,"line":8327},73,[532,8329,7509],{"class":549},[532,8331,476],{"class":664},[532,8333,669],{"class":668},[532,8335,672],{"class":549},[532,8337,557],{"class":549},[532,8339,8194],{"class":553},[532,8341,557],{"class":549},[532,8343,681],{"class":549},[532,8345,8201],{"class":581},[532,8347,687],{"class":549},[532,8349,476],{"class":664},[532,8351,692],{"class":549},[532,8353,8355,8357,8359],{"class":534,"line":8354},74,[532,8356,7619],{"class":549},[532,8358,458],{"class":664},[532,8360,692],{"class":549},[532,8362,8364,8366,8368],{"class":534,"line":8363},75,[532,8365,2148],{"class":549},[532,8367,471],{"class":664},[532,8369,692],{"class":549},[532,8371,8373,8375,8377],{"class":534,"line":8372},76,[532,8374,2050],{"class":549},[532,8376,452],{"class":664},[532,8378,692],{"class":549},[532,8380,8382,8384,8386],{"class":534,"line":8381},77,[532,8383,1158],{"class":549},[532,8385,1978],{"class":664},[532,8387,692],{"class":549},[532,8389,8391,8393,8395],{"class":534,"line":8390},78,[532,8392,1045],{"class":549},[532,8394,1978],{"class":664},[532,8396,692],{"class":549},[532,8398,8400,8402,8404],{"class":534,"line":8399},79,[532,8401,687],{"class":549},[532,8403,1006],{"class":664},[532,8405,692],{"class":549},[767,8407,8409,8410,8413,8414],{"id":8408},"bài-tập-11-gradient-text-sử-dụng-bg-gradient-to-r-bg-clip-text","Bài tập 11: Gradient text sử dụng ",[432,8411,8412],{},"bg-gradient-to-r"," + ",[432,8415,8416],{},"bg-clip-text",[448,8418,8419,8421,8422,8413,8424,4879],{},[755,8420,777],{}," Tạo heading với chữ gradient, sử dụng ",[432,8423,8416],{},[432,8425,8426],{},"text-transparent",[523,8428,8430],{"className":990,"code":8429,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-3xl mx-auto p-12 space-y-12 bg-slate-900 rounded-2xl\">\n    \u003C!-- Gradient text cơ bản: xanh -> tím -->\n    \u003Ch2 class=\"text-4xl font-black bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent\">\n      Gradient từ xanh sang tím\n    \u003C\u002Fh2>\n\n    \u003C!-- Gradient text 3 màu -->\n    \u003Ch2 class=\"text-4xl font-black bg-gradient-to-r from-rose-400 via-fuchsia-400 to-indigo-400 bg-clip-text text-transparent\">\n      Gradient 3 màu qua fuchsia\n    \u003C\u002Fh2>\n\n    \u003C!-- Gradient text với hướng khác -->\n    \u003Ch2 class=\"text-4xl font-black bg-gradient-to-br from-emerald-300 to-teal-500 bg-clip-text text-transparent\">\n      Gradient chéo xuống phải\n    \u003C\u002Fh2>\n\n    \u003C!-- Gradient text kết hợp animation (concept) -->\n    \u003Ch2 class=\"text-4xl font-black bg-gradient-to-r from-amber-400 via-orange-500 to-red-500 bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient\">\n      Gradient có animation\n    \u003C\u002Fh2>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n@keyframes gradient-shift {\n  0% { background-position: 0% center; }\n  100% { background-position: 200% center; }\n}\n\n.animate-gradient {\n  animation: gradient-shift 3s linear infinite;\n}\n\u003C\u002Fstyle>\n",[432,8431,8432,8440,8459,8464,8483,8488,8496,8500,8505,8524,8529,8537,8541,8546,8565,8570,8578,8582,8587,8606,8611,8619,8627,8635,8639,8651,8662,8689,8709,8713,8717,8726,8744,8748],{"__ignoreMap":528},[532,8433,8434,8436,8438],{"class":534,"line":535},[532,8435,661],{"class":549},[532,8437,1006],{"class":664},[532,8439,692],{"class":549},[532,8441,8442,8444,8446,8448,8450,8452,8455,8457],{"class":534,"line":542},[532,8443,1013],{"class":549},[532,8445,1978],{"class":664},[532,8447,669],{"class":668},[532,8449,672],{"class":549},[532,8451,557],{"class":549},[532,8453,8454],{"class":553},"max-w-3xl mx-auto p-12 space-y-12 bg-slate-900 rounded-2xl",[532,8456,557],{"class":549},[532,8458,692],{"class":549},[532,8460,8461],{"class":534,"line":563},[532,8462,8463],{"class":538},"    \u003C!-- Gradient text cơ bản: xanh -> tím -->\n",[532,8465,8466,8468,8470,8472,8474,8476,8479,8481],{"class":534,"line":570},[532,8467,1034],{"class":549},[532,8469,427],{"class":664},[532,8471,669],{"class":668},[532,8473,672],{"class":549},[532,8475,557],{"class":549},[532,8477,8478],{"class":553},"text-4xl font-black bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent",[532,8480,557],{"class":549},[532,8482,692],{"class":549},[532,8484,8485],{"class":534,"line":578},[532,8486,8487],{"class":581},"      Gradient từ xanh sang tím\n",[532,8489,8490,8492,8494],{"class":534,"line":604},[532,8491,1158],{"class":549},[532,8493,427],{"class":664},[532,8495,692],{"class":549},[532,8497,8498],{"class":534,"line":624},[532,8499,567],{"emptyLinePlaceholder":566},[532,8501,8502],{"class":534,"line":640},[532,8503,8504],{"class":538},"    \u003C!-- Gradient text 3 màu -->\n",[532,8506,8507,8509,8511,8513,8515,8517,8520,8522],{"class":534,"line":894},[532,8508,1034],{"class":549},[532,8510,427],{"class":664},[532,8512,669],{"class":668},[532,8514,672],{"class":549},[532,8516,557],{"class":549},[532,8518,8519],{"class":553},"text-4xl font-black bg-gradient-to-r from-rose-400 via-fuchsia-400 to-indigo-400 bg-clip-text text-transparent",[532,8521,557],{"class":549},[532,8523,692],{"class":549},[532,8525,8526],{"class":534,"line":900},[532,8527,8528],{"class":581},"      Gradient 3 màu qua fuchsia\n",[532,8530,8531,8533,8535],{"class":534,"line":906},[532,8532,1158],{"class":549},[532,8534,427],{"class":664},[532,8536,692],{"class":549},[532,8538,8539],{"class":534,"line":912},[532,8540,567],{"emptyLinePlaceholder":566},[532,8542,8543],{"class":534,"line":918},[532,8544,8545],{"class":538},"    \u003C!-- Gradient text với hướng khác -->\n",[532,8547,8548,8550,8552,8554,8556,8558,8561,8563],{"class":534,"line":1237},[532,8549,1034],{"class":549},[532,8551,427],{"class":664},[532,8553,669],{"class":668},[532,8555,672],{"class":549},[532,8557,557],{"class":549},[532,8559,8560],{"class":553},"text-4xl font-black bg-gradient-to-br from-emerald-300 to-teal-500 bg-clip-text text-transparent",[532,8562,557],{"class":549},[532,8564,692],{"class":549},[532,8566,8567],{"class":534,"line":1242},[532,8568,8569],{"class":581},"      Gradient chéo xuống phải\n",[532,8571,8572,8574,8576],{"class":534,"line":1262},[532,8573,1158],{"class":549},[532,8575,427],{"class":664},[532,8577,692],{"class":549},[532,8579,8580],{"class":534,"line":1268},[532,8581,567],{"emptyLinePlaceholder":566},[532,8583,8584],{"class":534,"line":1274},[532,8585,8586],{"class":538},"    \u003C!-- Gradient text kết hợp animation (concept) -->\n",[532,8588,8589,8591,8593,8595,8597,8599,8602,8604],{"class":534,"line":1283},[532,8590,1034],{"class":549},[532,8592,427],{"class":664},[532,8594,669],{"class":668},[532,8596,672],{"class":549},[532,8598,557],{"class":549},[532,8600,8601],{"class":553},"text-4xl font-black bg-gradient-to-r from-amber-400 via-orange-500 to-red-500 bg-clip-text text-transparent bg-[length:200%_auto] animate-gradient",[532,8603,557],{"class":549},[532,8605,692],{"class":549},[532,8607,8608],{"class":534,"line":1288},[532,8609,8610],{"class":581},"      Gradient có animation\n",[532,8612,8613,8615,8617],{"class":534,"line":1308},[532,8614,1158],{"class":549},[532,8616,427],{"class":664},[532,8618,692],{"class":549},[532,8620,8621,8623,8625],{"class":534,"line":1314},[532,8622,1045],{"class":549},[532,8624,1978],{"class":664},[532,8626,692],{"class":549},[532,8628,8629,8631,8633],{"class":534,"line":1323},[532,8630,687],{"class":549},[532,8632,1006],{"class":664},[532,8634,692],{"class":549},[532,8636,8637],{"class":534,"line":1332},[532,8638,567],{"emptyLinePlaceholder":566},[532,8640,8641,8643,8646,8649],{"class":534,"line":3119},[532,8642,661],{"class":549},[532,8644,8645],{"class":664},"style",[532,8647,8648],{"class":668}," scoped",[532,8650,692],{"class":549},[532,8652,8653,8656,8660],{"class":534,"line":3139},[532,8654,8655],{"class":545},"@keyframes",[532,8657,8659],{"class":8658},"sHdIc"," gradient-shift",[532,8661,575],{"class":549},[532,8663,8664,8667,8670,8674,8676,8680,8683,8686],{"class":534,"line":3145},[532,8665,8666],{"class":588},"  0%",[532,8668,8669],{"class":549}," {",[532,8671,8673],{"class":8672},"sqsOY"," background-position",[532,8675,794],{"class":549},[532,8677,8679],{"class":8678},"sbssI"," 0%",[532,8681,8682],{"class":581}," center",[532,8684,8685],{"class":549},";",[532,8687,8688],{"class":549}," }\n",[532,8690,8691,8694,8696,8698,8700,8703,8705,8707],{"class":534,"line":3151},[532,8692,8693],{"class":588},"  100%",[532,8695,8669],{"class":549},[532,8697,8673],{"class":8672},[532,8699,794],{"class":549},[532,8701,8702],{"class":8678}," 200%",[532,8704,8682],{"class":581},[532,8706,8685],{"class":549},[532,8708,8688],{"class":549},[532,8710,8711],{"class":534,"line":3157},[532,8712,643],{"class":549},[532,8714,8715],{"class":534,"line":3163},[532,8716,567],{"emptyLinePlaceholder":566},[532,8718,8719,8721,8724],{"class":534,"line":3172},[532,8720,4879],{"class":549},[532,8722,8723],{"class":588},"animate-gradient",[532,8725,575],{"class":549},[532,8727,8728,8731,8733,8736,8739,8742],{"class":534,"line":3177},[532,8729,8730],{"class":8672},"  animation",[532,8732,794],{"class":549},[532,8734,8735],{"class":581}," gradient-shift ",[532,8737,8738],{"class":8678},"3s",[532,8740,8741],{"class":581}," linear infinite",[532,8743,560],{"class":549},[532,8745,8746],{"class":534,"line":3197},[532,8747,643],{"class":549},[532,8749,8750,8752,8754],{"class":534,"line":3204},[532,8751,687],{"class":549},[532,8753,8645],{"class":664},[532,8755,692],{"class":549},[1340,8757],{},[427,8759,8761,8762,435,8765,435,8768,446],{"id":8760},"_8-background-bg-bg-gradient-bg-opacity","8. Background (",[432,8763,8764],{},"bg-*",[432,8766,8767],{},"bg-gradient-*",[432,8769,8770],{},"bg-opacity",[767,8772,8774],{"id":8773},"background-cơ-bản","Background cơ bản",[523,8776,8778],{"className":652,"code":8777,"language":654,"meta":528,"style":528},"\u003Cdiv class=\"bg-red-500\">Màu nền đơn\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-white\">Nền trắng\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-transparent\">Nền trong suốt\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-current\">Dùng màu text hiện tại\u003C\u002Fdiv>\n",[432,8779,8780,8808,8835,8863],{"__ignoreMap":528},[532,8781,8782,8784,8786,8788,8790,8792,8795,8797,8799,8802,8804,8806],{"class":534,"line":535},[532,8783,661],{"class":549},[532,8785,1978],{"class":664},[532,8787,669],{"class":668},[532,8789,672],{"class":549},[532,8791,557],{"class":549},[532,8793,8794],{"class":553},"bg-red-500",[532,8796,557],{"class":549},[532,8798,681],{"class":549},[532,8800,8801],{"class":581},"Màu nền đơn",[532,8803,687],{"class":549},[532,8805,1978],{"class":664},[532,8807,692],{"class":549},[532,8809,8810,8812,8814,8816,8818,8820,8822,8824,8826,8829,8831,8833],{"class":534,"line":542},[532,8811,661],{"class":549},[532,8813,1978],{"class":664},[532,8815,669],{"class":668},[532,8817,672],{"class":549},[532,8819,557],{"class":549},[532,8821,7708],{"class":553},[532,8823,557],{"class":549},[532,8825,681],{"class":549},[532,8827,8828],{"class":581},"Nền trắng",[532,8830,687],{"class":549},[532,8832,1978],{"class":664},[532,8834,692],{"class":549},[532,8836,8837,8839,8841,8843,8845,8847,8850,8852,8854,8857,8859,8861],{"class":534,"line":563},[532,8838,661],{"class":549},[532,8840,1978],{"class":664},[532,8842,669],{"class":668},[532,8844,672],{"class":549},[532,8846,557],{"class":549},[532,8848,8849],{"class":553},"bg-transparent",[532,8851,557],{"class":549},[532,8853,681],{"class":549},[532,8855,8856],{"class":581},"Nền trong suốt",[532,8858,687],{"class":549},[532,8860,1978],{"class":664},[532,8862,692],{"class":549},[532,8864,8865,8867,8869,8871,8873,8875,8878,8880,8882,8885,8887,8889],{"class":534,"line":570},[532,8866,661],{"class":549},[532,8868,1978],{"class":664},[532,8870,669],{"class":668},[532,8872,672],{"class":549},[532,8874,557],{"class":549},[532,8876,8877],{"class":553},"bg-current",[532,8879,557],{"class":549},[532,8881,681],{"class":549},[532,8883,8884],{"class":581},"Dùng màu text hiện tại",[532,8886,687],{"class":549},[532,8888,1978],{"class":664},[532,8890,692],{"class":549},[767,8892,8894],{"id":8893},"gradient-linear-radial-conic","Gradient (Linear, Radial, Conic)",[523,8896,8898],{"className":652,"code":8897,"language":654,"meta":528,"style":528},"\u003C!-- Linear gradient -->\n\u003Cdiv class=\"bg-gradient-to-r from-cyan-500 to-blue-500\">\n  Gradient trái -> phải\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"bg-gradient-to-b from-white to-gray-100\">\n  Gradient trên -> dưới\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"bg-gradient-to-tr from-pink-500 via-red-500 to-yellow-500\">\n  Gradient chéo với via (middle stop)\n\u003C\u002Fdiv>\n",[432,8899,8900,8905,8924,8929,8937,8941,8960,8965,8973,8977,8996,9001],{"__ignoreMap":528},[532,8901,8902],{"class":534,"line":535},[532,8903,8904],{"class":538},"\u003C!-- Linear gradient -->\n",[532,8906,8907,8909,8911,8913,8915,8917,8920,8922],{"class":534,"line":542},[532,8908,661],{"class":549},[532,8910,1978],{"class":664},[532,8912,669],{"class":668},[532,8914,672],{"class":549},[532,8916,557],{"class":549},[532,8918,8919],{"class":553},"bg-gradient-to-r from-cyan-500 to-blue-500",[532,8921,557],{"class":549},[532,8923,692],{"class":549},[532,8925,8926],{"class":534,"line":563},[532,8927,8928],{"class":581},"  Gradient trái -> phải\n",[532,8930,8931,8933,8935],{"class":534,"line":570},[532,8932,687],{"class":549},[532,8934,1978],{"class":664},[532,8936,692],{"class":549},[532,8938,8939],{"class":534,"line":578},[532,8940,567],{"emptyLinePlaceholder":566},[532,8942,8943,8945,8947,8949,8951,8953,8956,8958],{"class":534,"line":604},[532,8944,661],{"class":549},[532,8946,1978],{"class":664},[532,8948,669],{"class":668},[532,8950,672],{"class":549},[532,8952,557],{"class":549},[532,8954,8955],{"class":553},"bg-gradient-to-b from-white to-gray-100",[532,8957,557],{"class":549},[532,8959,692],{"class":549},[532,8961,8962],{"class":534,"line":624},[532,8963,8964],{"class":581},"  Gradient trên -> dưới\n",[532,8966,8967,8969,8971],{"class":534,"line":640},[532,8968,687],{"class":549},[532,8970,1978],{"class":664},[532,8972,692],{"class":549},[532,8974,8975],{"class":534,"line":894},[532,8976,567],{"emptyLinePlaceholder":566},[532,8978,8979,8981,8983,8985,8987,8989,8992,8994],{"class":534,"line":900},[532,8980,661],{"class":549},[532,8982,1978],{"class":664},[532,8984,669],{"class":668},[532,8986,672],{"class":549},[532,8988,557],{"class":549},[532,8990,8991],{"class":553},"bg-gradient-to-tr from-pink-500 via-red-500 to-yellow-500",[532,8993,557],{"class":549},[532,8995,692],{"class":549},[532,8997,8998],{"class":534,"line":906},[532,8999,9000],{"class":581},"  Gradient chéo với via (middle stop)\n",[532,9002,9003,9005,9007],{"class":534,"line":912},[532,9004,687],{"class":549},[532,9006,1978],{"class":664},[532,9008,692],{"class":549},[749,9010,9012,9015,9016,1883,9019,9022],{"color":9011,"icon":405},"success",[755,9013,9014],{},"NEW v4.0 — Radial và Conic gradients:"," Tailwind v4 hỗ trợ ",[432,9017,9018],{},"bg-radial-*",[432,9020,9021],{},"bg-conic-*"," mà không cần custom CSS.",[523,9024,9026],{"className":652,"code":9025,"language":654,"meta":528,"style":528},"\u003C!-- Radial gradient -->\n\u003Cdiv class=\"bg-radial from-white to-slate-300\">\n  Radial gradient từ tâm\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"bg-radial from-blue-100 via-blue-200 to-blue-400\">\n  Radial gradient 3 stops\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"bg-radial-[at_25%_25%] from-white to-slate-300\">\n  Radial gradient với tâm tại 25% 25%\n\u003C\u002Fdiv>\n\n\u003C!-- Conic gradient -->\n\u003Cdiv class=\"bg-conic from-red-500 via-yellow-500 to-red-500\">\n  Conic gradient — hiệu ứng vòng tròn\n\u003C\u002Fdiv>\n\n\u003Cdiv class=\"bg-conic\u002F[at_50%] from-sky-400 via-indigo-400 to-sky-400\">\n  Conic với tâm xác định\n\u003C\u002Fdiv>\n",[432,9027,9028,9033,9052,9057,9065,9069,9088,9093,9101,9105,9124,9129,9137,9141,9146,9165,9170,9178,9182,9201,9206],{"__ignoreMap":528},[532,9029,9030],{"class":534,"line":535},[532,9031,9032],{"class":538},"\u003C!-- Radial gradient -->\n",[532,9034,9035,9037,9039,9041,9043,9045,9048,9050],{"class":534,"line":542},[532,9036,661],{"class":549},[532,9038,1978],{"class":664},[532,9040,669],{"class":668},[532,9042,672],{"class":549},[532,9044,557],{"class":549},[532,9046,9047],{"class":553},"bg-radial from-white to-slate-300",[532,9049,557],{"class":549},[532,9051,692],{"class":549},[532,9053,9054],{"class":534,"line":563},[532,9055,9056],{"class":581},"  Radial gradient từ tâm\n",[532,9058,9059,9061,9063],{"class":534,"line":570},[532,9060,687],{"class":549},[532,9062,1978],{"class":664},[532,9064,692],{"class":549},[532,9066,9067],{"class":534,"line":578},[532,9068,567],{"emptyLinePlaceholder":566},[532,9070,9071,9073,9075,9077,9079,9081,9084,9086],{"class":534,"line":604},[532,9072,661],{"class":549},[532,9074,1978],{"class":664},[532,9076,669],{"class":668},[532,9078,672],{"class":549},[532,9080,557],{"class":549},[532,9082,9083],{"class":553},"bg-radial from-blue-100 via-blue-200 to-blue-400",[532,9085,557],{"class":549},[532,9087,692],{"class":549},[532,9089,9090],{"class":534,"line":624},[532,9091,9092],{"class":581},"  Radial gradient 3 stops\n",[532,9094,9095,9097,9099],{"class":534,"line":640},[532,9096,687],{"class":549},[532,9098,1978],{"class":664},[532,9100,692],{"class":549},[532,9102,9103],{"class":534,"line":894},[532,9104,567],{"emptyLinePlaceholder":566},[532,9106,9107,9109,9111,9113,9115,9117,9120,9122],{"class":534,"line":900},[532,9108,661],{"class":549},[532,9110,1978],{"class":664},[532,9112,669],{"class":668},[532,9114,672],{"class":549},[532,9116,557],{"class":549},[532,9118,9119],{"class":553},"bg-radial-[at_25%_25%] from-white to-slate-300",[532,9121,557],{"class":549},[532,9123,692],{"class":549},[532,9125,9126],{"class":534,"line":906},[532,9127,9128],{"class":581},"  Radial gradient với tâm tại 25% 25%\n",[532,9130,9131,9133,9135],{"class":534,"line":912},[532,9132,687],{"class":549},[532,9134,1978],{"class":664},[532,9136,692],{"class":549},[532,9138,9139],{"class":534,"line":918},[532,9140,567],{"emptyLinePlaceholder":566},[532,9142,9143],{"class":534,"line":1237},[532,9144,9145],{"class":538},"\u003C!-- Conic gradient -->\n",[532,9147,9148,9150,9152,9154,9156,9158,9161,9163],{"class":534,"line":1242},[532,9149,661],{"class":549},[532,9151,1978],{"class":664},[532,9153,669],{"class":668},[532,9155,672],{"class":549},[532,9157,557],{"class":549},[532,9159,9160],{"class":553},"bg-conic from-red-500 via-yellow-500 to-red-500",[532,9162,557],{"class":549},[532,9164,692],{"class":549},[532,9166,9167],{"class":534,"line":1262},[532,9168,9169],{"class":581},"  Conic gradient — hiệu ứng vòng tròn\n",[532,9171,9172,9174,9176],{"class":534,"line":1268},[532,9173,687],{"class":549},[532,9175,1978],{"class":664},[532,9177,692],{"class":549},[532,9179,9180],{"class":534,"line":1274},[532,9181,567],{"emptyLinePlaceholder":566},[532,9183,9184,9186,9188,9190,9192,9194,9197,9199],{"class":534,"line":1283},[532,9185,661],{"class":549},[532,9187,1978],{"class":664},[532,9189,669],{"class":668},[532,9191,672],{"class":549},[532,9193,557],{"class":549},[532,9195,9196],{"class":553},"bg-conic\u002F[at_50%] from-sky-400 via-indigo-400 to-sky-400",[532,9198,557],{"class":549},[532,9200,692],{"class":549},[532,9202,9203],{"class":534,"line":1288},[532,9204,9205],{"class":581},"  Conic với tâm xác định\n",[532,9207,9208,9210,9212],{"class":534,"line":1308},[532,9209,687],{"class":549},[532,9211,1978],{"class":664},[532,9213,692],{"class":549},[767,9215,9217],{"id":9216},"background-clip-origin-position","Background Clip, Origin, Position",[523,9219,9221],{"className":652,"code":9220,"language":654,"meta":528,"style":528},"\u003C!-- bg-clip: kiểm soát vùng background chiếm -->\n\u003Cdiv class=\"bg-clip-border\">Background đến border (default)\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-clip-padding\">Background đến padding\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-clip-content\">Background chỉ trong content box\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-clip-text\">Background chỉ hiển thị trên text\u003C\u002Fdiv>\n\n\u003C!-- bg-origin: kiểm soát gốc tọa độ background -->\n\u003Cdiv class=\"bg-origin-border\">Gốc từ border\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-origin-padding\">Gốc từ padding (default)\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-origin-content\">Gốc từ content\u003C\u002Fdiv>\n\n\u003C!-- bg-position -->\n\u003Cdiv class=\"bg-center\">Căn giữa\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-top\">Căn trên\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-right-bottom\">Góc phải dưới\u003C\u002Fdiv>\n\n\u003C!-- bg-repeat -->\n\u003Cdiv class=\"bg-repeat\">Lặp\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-no-repeat\">Không lặp\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-repeat-x\">Lặp ngang\u003C\u002Fdiv>\n\u003Cdiv class=\"bg-repeat-y\">Lặp dọc\u003C\u002Fdiv>\n",[432,9222,9223,9228,9256,9284,9312,9339,9343,9348,9376,9404,9432,9436,9441,9468,9496,9524,9528,9533,9561,9589,9617],{"__ignoreMap":528},[532,9224,9225],{"class":534,"line":535},[532,9226,9227],{"class":538},"\u003C!-- bg-clip: kiểm soát vùng background chiếm -->\n",[532,9229,9230,9232,9234,9236,9238,9240,9243,9245,9247,9250,9252,9254],{"class":534,"line":542},[532,9231,661],{"class":549},[532,9233,1978],{"class":664},[532,9235,669],{"class":668},[532,9237,672],{"class":549},[532,9239,557],{"class":549},[532,9241,9242],{"class":553},"bg-clip-border",[532,9244,557],{"class":549},[532,9246,681],{"class":549},[532,9248,9249],{"class":581},"Background đến border (default)",[532,9251,687],{"class":549},[532,9253,1978],{"class":664},[532,9255,692],{"class":549},[532,9257,9258,9260,9262,9264,9266,9268,9271,9273,9275,9278,9280,9282],{"class":534,"line":563},[532,9259,661],{"class":549},[532,9261,1978],{"class":664},[532,9263,669],{"class":668},[532,9265,672],{"class":549},[532,9267,557],{"class":549},[532,9269,9270],{"class":553},"bg-clip-padding",[532,9272,557],{"class":549},[532,9274,681],{"class":549},[532,9276,9277],{"class":581},"Background đến padding",[532,9279,687],{"class":549},[532,9281,1978],{"class":664},[532,9283,692],{"class":549},[532,9285,9286,9288,9290,9292,9294,9296,9299,9301,9303,9306,9308,9310],{"class":534,"line":570},[532,9287,661],{"class":549},[532,9289,1978],{"class":664},[532,9291,669],{"class":668},[532,9293,672],{"class":549},[532,9295,557],{"class":549},[532,9297,9298],{"class":553},"bg-clip-content",[532,9300,557],{"class":549},[532,9302,681],{"class":549},[532,9304,9305],{"class":581},"Background chỉ trong content box",[532,9307,687],{"class":549},[532,9309,1978],{"class":664},[532,9311,692],{"class":549},[532,9313,9314,9316,9318,9320,9322,9324,9326,9328,9330,9333,9335,9337],{"class":534,"line":578},[532,9315,661],{"class":549},[532,9317,1978],{"class":664},[532,9319,669],{"class":668},[532,9321,672],{"class":549},[532,9323,557],{"class":549},[532,9325,8416],{"class":553},[532,9327,557],{"class":549},[532,9329,681],{"class":549},[532,9331,9332],{"class":581},"Background chỉ hiển thị trên text",[532,9334,687],{"class":549},[532,9336,1978],{"class":664},[532,9338,692],{"class":549},[532,9340,9341],{"class":534,"line":604},[532,9342,567],{"emptyLinePlaceholder":566},[532,9344,9345],{"class":534,"line":624},[532,9346,9347],{"class":538},"\u003C!-- bg-origin: kiểm soát gốc tọa độ background -->\n",[532,9349,9350,9352,9354,9356,9358,9360,9363,9365,9367,9370,9372,9374],{"class":534,"line":640},[532,9351,661],{"class":549},[532,9353,1978],{"class":664},[532,9355,669],{"class":668},[532,9357,672],{"class":549},[532,9359,557],{"class":549},[532,9361,9362],{"class":553},"bg-origin-border",[532,9364,557],{"class":549},[532,9366,681],{"class":549},[532,9368,9369],{"class":581},"Gốc từ border",[532,9371,687],{"class":549},[532,9373,1978],{"class":664},[532,9375,692],{"class":549},[532,9377,9378,9380,9382,9384,9386,9388,9391,9393,9395,9398,9400,9402],{"class":534,"line":894},[532,9379,661],{"class":549},[532,9381,1978],{"class":664},[532,9383,669],{"class":668},[532,9385,672],{"class":549},[532,9387,557],{"class":549},[532,9389,9390],{"class":553},"bg-origin-padding",[532,9392,557],{"class":549},[532,9394,681],{"class":549},[532,9396,9397],{"class":581},"Gốc từ padding (default)",[532,9399,687],{"class":549},[532,9401,1978],{"class":664},[532,9403,692],{"class":549},[532,9405,9406,9408,9410,9412,9414,9416,9419,9421,9423,9426,9428,9430],{"class":534,"line":900},[532,9407,661],{"class":549},[532,9409,1978],{"class":664},[532,9411,669],{"class":668},[532,9413,672],{"class":549},[532,9415,557],{"class":549},[532,9417,9418],{"class":553},"bg-origin-content",[532,9420,557],{"class":549},[532,9422,681],{"class":549},[532,9424,9425],{"class":581},"Gốc từ content",[532,9427,687],{"class":549},[532,9429,1978],{"class":664},[532,9431,692],{"class":549},[532,9433,9434],{"class":534,"line":906},[532,9435,567],{"emptyLinePlaceholder":566},[532,9437,9438],{"class":534,"line":912},[532,9439,9440],{"class":538},"\u003C!-- bg-position -->\n",[532,9442,9443,9445,9447,9449,9451,9453,9456,9458,9460,9462,9464,9466],{"class":534,"line":918},[532,9444,661],{"class":549},[532,9446,1978],{"class":664},[532,9448,669],{"class":668},[532,9450,672],{"class":549},[532,9452,557],{"class":549},[532,9454,9455],{"class":553},"bg-center",[532,9457,557],{"class":549},[532,9459,681],{"class":549},[532,9461,2641],{"class":581},[532,9463,687],{"class":549},[532,9465,1978],{"class":664},[532,9467,692],{"class":549},[532,9469,9470,9472,9474,9476,9478,9480,9483,9485,9487,9490,9492,9494],{"class":534,"line":1237},[532,9471,661],{"class":549},[532,9473,1978],{"class":664},[532,9475,669],{"class":668},[532,9477,672],{"class":549},[532,9479,557],{"class":549},[532,9481,9482],{"class":553},"bg-top",[532,9484,557],{"class":549},[532,9486,681],{"class":549},[532,9488,9489],{"class":581},"Căn trên",[532,9491,687],{"class":549},[532,9493,1978],{"class":664},[532,9495,692],{"class":549},[532,9497,9498,9500,9502,9504,9506,9508,9511,9513,9515,9518,9520,9522],{"class":534,"line":1242},[532,9499,661],{"class":549},[532,9501,1978],{"class":664},[532,9503,669],{"class":668},[532,9505,672],{"class":549},[532,9507,557],{"class":549},[532,9509,9510],{"class":553},"bg-right-bottom",[532,9512,557],{"class":549},[532,9514,681],{"class":549},[532,9516,9517],{"class":581},"Góc phải dưới",[532,9519,687],{"class":549},[532,9521,1978],{"class":664},[532,9523,692],{"class":549},[532,9525,9526],{"class":534,"line":1262},[532,9527,567],{"emptyLinePlaceholder":566},[532,9529,9530],{"class":534,"line":1268},[532,9531,9532],{"class":538},"\u003C!-- bg-repeat -->\n",[532,9534,9535,9537,9539,9541,9543,9545,9548,9550,9552,9555,9557,9559],{"class":534,"line":1274},[532,9536,661],{"class":549},[532,9538,1978],{"class":664},[532,9540,669],{"class":668},[532,9542,672],{"class":549},[532,9544,557],{"class":549},[532,9546,9547],{"class":553},"bg-repeat",[532,9549,557],{"class":549},[532,9551,681],{"class":549},[532,9553,9554],{"class":581},"Lặp",[532,9556,687],{"class":549},[532,9558,1978],{"class":664},[532,9560,692],{"class":549},[532,9562,9563,9565,9567,9569,9571,9573,9576,9578,9580,9583,9585,9587],{"class":534,"line":1283},[532,9564,661],{"class":549},[532,9566,1978],{"class":664},[532,9568,669],{"class":668},[532,9570,672],{"class":549},[532,9572,557],{"class":549},[532,9574,9575],{"class":553},"bg-no-repeat",[532,9577,557],{"class":549},[532,9579,681],{"class":549},[532,9581,9582],{"class":581},"Không lặp",[532,9584,687],{"class":549},[532,9586,1978],{"class":664},[532,9588,692],{"class":549},[532,9590,9591,9593,9595,9597,9599,9601,9604,9606,9608,9611,9613,9615],{"class":534,"line":1288},[532,9592,661],{"class":549},[532,9594,1978],{"class":664},[532,9596,669],{"class":668},[532,9598,672],{"class":549},[532,9600,557],{"class":549},[532,9602,9603],{"class":553},"bg-repeat-x",[532,9605,557],{"class":549},[532,9607,681],{"class":549},[532,9609,9610],{"class":581},"Lặp ngang",[532,9612,687],{"class":549},[532,9614,1978],{"class":664},[532,9616,692],{"class":549},[532,9618,9619,9621,9623,9625,9627,9629,9632,9634,9636,9639,9641,9643],{"class":534,"line":1308},[532,9620,661],{"class":549},[532,9622,1978],{"class":664},[532,9624,669],{"class":668},[532,9626,672],{"class":549},[532,9628,557],{"class":549},[532,9630,9631],{"class":553},"bg-repeat-y",[532,9633,557],{"class":549},[532,9635,681],{"class":549},[532,9637,9638],{"class":581},"Lặp dọc",[532,9640,687],{"class":549},[532,9642,1978],{"class":664},[532,9644,692],{"class":549},[767,9646,9648],{"id":9647},"bài-tập-12-hero-section-với-gradient-overlay-trên-ảnh","Bài tập 12: Hero section với gradient overlay trên ảnh",[448,9650,9651,9653],{},[755,9652,777],{}," Hero section có background image + gradient overlay + nội dung text.",[523,9655,9657],{"className":990,"code":9656,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Csection class=\"relative min-h-[80vh] flex items-center bg-cover bg-center\"\n    style=\"background-image: url('https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1522071820081-009f0129c71c')\">\n    \u003C!-- Gradient overlay: tối dần từ trái sang phải -->\n    \u003Cdiv class=\"absolute inset-0 bg-gradient-to-r from-slate-900\u002F90 via-slate-900\u002F50 to-transparent\">\u003C\u002Fdiv>\n\n    \u003C!-- Nội dung nằm trên overlay -->\n    \u003Cdiv class=\"relative z-10 max-w-2xl px-8 lg:px-16 py-20\">\n      \u003Cspan class=\"inline-block px-3 py-1 bg-indigo-500\u002F20 text-indigo-300 text-sm font-medium rounded-full mb-6\">\n        Ra mắt tháng 7\u002F2026\n      \u003C\u002Fspan>\n\n      \u003Ch1 class=\"text-4xl sm:text-5xl lg:text-6xl font-black text-white leading-none tracking-tight\">\n        Làm việc nhóm\n        \u003Cbr\u002F>\n        \u003Cspan class=\"bg-gradient-to-r from-indigo-400 to-cyan-400 bg-clip-text text-transparent\">\n          hiệu quả hơn\n        \u003C\u002Fspan>\n      \u003C\u002Fh1>\n\n      \u003Cp class=\"mt-6 text-lg text-slate-300 leading-relaxed max-w-lg\">\n        Nền tảng collaboration thế hệ mới — real-time editing,\n        video call tích hợp, và AI assistant trong cùng một workspace.\n      \u003C\u002Fp>\n\n      \u003Cdiv class=\"mt-8 flex gap-4\">\n        \u003Cbutton class=\"px-6 py-3 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-600 transition-colors\">\n          Dùng thử miễn phí\n        \u003C\u002Fbutton>\n        \u003Cbutton class=\"px-6 py-3 border border-white\u002F30 text-white font-semibold rounded-lg hover:bg-white\u002F10 transition-colors\">\n          Xem video\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fsection>\n\u003C\u002Ftemplate>\n",[432,9658,9659,9667,9684,9700,9705,9728,9732,9737,9756,9775,9780,9788,9792,9811,9816,9826,9845,9850,9858,9866,9870,9889,9894,9899,9907,9911,9930,9949,9954,9962,9981,9986,9994,10002,10010,10018],{"__ignoreMap":528},[532,9660,9661,9663,9665],{"class":534,"line":535},[532,9662,661],{"class":549},[532,9664,1006],{"class":664},[532,9666,692],{"class":549},[532,9668,9669,9671,9673,9675,9677,9679,9682],{"class":534,"line":542},[532,9670,1013],{"class":549},[532,9672,1958],{"class":664},[532,9674,669],{"class":668},[532,9676,672],{"class":549},[532,9678,557],{"class":549},[532,9680,9681],{"class":553},"relative min-h-[80vh] flex items-center bg-cover bg-center",[532,9683,2915],{"class":549},[532,9685,9686,9689,9691,9693,9696,9698],{"class":534,"line":563},[532,9687,9688],{"class":668},"    style",[532,9690,672],{"class":549},[532,9692,557],{"class":549},[532,9694,9695],{"class":553},"background-image: url('https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1522071820081-009f0129c71c')",[532,9697,557],{"class":549},[532,9699,692],{"class":549},[532,9701,9702],{"class":534,"line":570},[532,9703,9704],{"class":538},"    \u003C!-- Gradient overlay: tối dần từ trái sang phải -->\n",[532,9706,9707,9709,9711,9713,9715,9717,9720,9722,9724,9726],{"class":534,"line":578},[532,9708,1034],{"class":549},[532,9710,1978],{"class":664},[532,9712,669],{"class":668},[532,9714,672],{"class":549},[532,9716,557],{"class":549},[532,9718,9719],{"class":553},"absolute inset-0 bg-gradient-to-r from-slate-900\u002F90 via-slate-900\u002F50 to-transparent",[532,9721,557],{"class":549},[532,9723,5879],{"class":549},[532,9725,1978],{"class":664},[532,9727,692],{"class":549},[532,9729,9730],{"class":534,"line":604},[532,9731,567],{"emptyLinePlaceholder":566},[532,9733,9734],{"class":534,"line":624},[532,9735,9736],{"class":538},"    \u003C!-- Nội dung nằm trên overlay -->\n",[532,9738,9739,9741,9743,9745,9747,9749,9752,9754],{"class":534,"line":640},[532,9740,1034],{"class":549},[532,9742,1978],{"class":664},[532,9744,669],{"class":668},[532,9746,672],{"class":549},[532,9748,557],{"class":549},[532,9750,9751],{"class":553},"relative z-10 max-w-2xl px-8 lg:px-16 py-20",[532,9753,557],{"class":549},[532,9755,692],{"class":549},[532,9757,9758,9760,9762,9764,9766,9768,9771,9773],{"class":534,"line":894},[532,9759,1996],{"class":549},[532,9761,532],{"class":664},[532,9763,669],{"class":668},[532,9765,672],{"class":549},[532,9767,557],{"class":549},[532,9769,9770],{"class":553},"inline-block px-3 py-1 bg-indigo-500\u002F20 text-indigo-300 text-sm font-medium rounded-full mb-6",[532,9772,557],{"class":549},[532,9774,692],{"class":549},[532,9776,9777],{"class":534,"line":900},[532,9778,9779],{"class":581},"        Ra mắt tháng 7\u002F2026\n",[532,9781,9782,9784,9786],{"class":534,"line":906},[532,9783,2050],{"class":549},[532,9785,532],{"class":664},[532,9787,692],{"class":549},[532,9789,9790],{"class":534,"line":912},[532,9791,567],{"emptyLinePlaceholder":566},[532,9793,9794,9796,9798,9800,9802,9804,9807,9809],{"class":534,"line":918},[532,9795,1996],{"class":549},[532,9797,665],{"class":664},[532,9799,669],{"class":668},[532,9801,672],{"class":549},[532,9803,557],{"class":549},[532,9805,9806],{"class":553},"text-4xl sm:text-5xl lg:text-6xl font-black text-white leading-none tracking-tight",[532,9808,557],{"class":549},[532,9810,692],{"class":549},[532,9812,9813],{"class":534,"line":1237},[532,9814,9815],{"class":581},"        Làm việc nhóm\n",[532,9817,9818,9820,9823],{"class":534,"line":1242},[532,9819,2021],{"class":549},[532,9821,9822],{"class":664},"br",[532,9824,9825],{"class":549},"\u002F>\n",[532,9827,9828,9830,9832,9834,9836,9838,9841,9843],{"class":534,"line":1262},[532,9829,2021],{"class":549},[532,9831,532],{"class":664},[532,9833,669],{"class":668},[532,9835,672],{"class":549},[532,9837,557],{"class":549},[532,9839,9840],{"class":553},"bg-gradient-to-r from-indigo-400 to-cyan-400 bg-clip-text text-transparent",[532,9842,557],{"class":549},[532,9844,692],{"class":549},[532,9846,9847],{"class":534,"line":1268},[532,9848,9849],{"class":581},"          hiệu quả hơn\n",[532,9851,9852,9854,9856],{"class":534,"line":1274},[532,9853,2148],{"class":549},[532,9855,532],{"class":664},[532,9857,692],{"class":549},[532,9859,9860,9862,9864],{"class":534,"line":1283},[532,9861,2050],{"class":549},[532,9863,665],{"class":664},[532,9865,692],{"class":549},[532,9867,9868],{"class":534,"line":1288},[532,9869,567],{"emptyLinePlaceholder":566},[532,9871,9872,9874,9876,9878,9880,9882,9885,9887],{"class":534,"line":1308},[532,9873,1996],{"class":549},[532,9875,448],{"class":664},[532,9877,669],{"class":668},[532,9879,672],{"class":549},[532,9881,557],{"class":549},[532,9883,9884],{"class":553},"mt-6 text-lg text-slate-300 leading-relaxed max-w-lg",[532,9886,557],{"class":549},[532,9888,692],{"class":549},[532,9890,9891],{"class":534,"line":1314},[532,9892,9893],{"class":581},"        Nền tảng collaboration thế hệ mới — real-time editing,\n",[532,9895,9896],{"class":534,"line":1323},[532,9897,9898],{"class":581},"        video call tích hợp, và AI assistant trong cùng một workspace.\n",[532,9900,9901,9903,9905],{"class":534,"line":1332},[532,9902,2050],{"class":549},[532,9904,448],{"class":664},[532,9906,692],{"class":549},[532,9908,9909],{"class":534,"line":3119},[532,9910,567],{"emptyLinePlaceholder":566},[532,9912,9913,9915,9917,9919,9921,9923,9926,9928],{"class":534,"line":3139},[532,9914,1996],{"class":549},[532,9916,1978],{"class":664},[532,9918,669],{"class":668},[532,9920,672],{"class":549},[532,9922,557],{"class":549},[532,9924,9925],{"class":553},"mt-8 flex gap-4",[532,9927,557],{"class":549},[532,9929,692],{"class":549},[532,9931,9932,9934,9936,9938,9940,9942,9945,9947],{"class":534,"line":3145},[532,9933,2021],{"class":549},[532,9935,2125],{"class":664},[532,9937,669],{"class":668},[532,9939,672],{"class":549},[532,9941,557],{"class":549},[532,9943,9944],{"class":553},"px-6 py-3 bg-indigo-500 text-white font-semibold rounded-lg hover:bg-indigo-600 transition-colors",[532,9946,557],{"class":549},[532,9948,692],{"class":549},[532,9950,9951],{"class":534,"line":3151},[532,9952,9953],{"class":581},"          Dùng thử miễn phí\n",[532,9955,9956,9958,9960],{"class":534,"line":3157},[532,9957,2148],{"class":549},[532,9959,2125],{"class":664},[532,9961,692],{"class":549},[532,9963,9964,9966,9968,9970,9972,9974,9977,9979],{"class":534,"line":3163},[532,9965,2021],{"class":549},[532,9967,2125],{"class":664},[532,9969,669],{"class":668},[532,9971,672],{"class":549},[532,9973,557],{"class":549},[532,9975,9976],{"class":553},"px-6 py-3 border border-white\u002F30 text-white font-semibold rounded-lg hover:bg-white\u002F10 transition-colors",[532,9978,557],{"class":549},[532,9980,692],{"class":549},[532,9982,9983],{"class":534,"line":3172},[532,9984,9985],{"class":581},"          Xem video\n",[532,9987,9988,9990,9992],{"class":534,"line":3177},[532,9989,2148],{"class":549},[532,9991,2125],{"class":664},[532,9993,692],{"class":549},[532,9995,9996,9998,10000],{"class":534,"line":3197},[532,9997,2050],{"class":549},[532,9999,1978],{"class":664},[532,10001,692],{"class":549},[532,10003,10004,10006,10008],{"class":534,"line":3204},[532,10005,1158],{"class":549},[532,10007,1978],{"class":664},[532,10009,692],{"class":549},[532,10011,10012,10014,10016],{"class":534,"line":3219},[532,10013,1045],{"class":549},[532,10015,1958],{"class":664},[532,10017,692],{"class":549},[532,10019,10020,10022,10024],{"class":534,"line":3234},[532,10021,687],{"class":549},[532,10023,1006],{"class":664},[532,10025,692],{"class":549},[767,10027,10029],{"id":10028},"bài-tập-13-card-với-radial-gradient-background","Bài tập 13: Card với radial gradient background",[448,10031,10032,10034],{},[755,10033,777],{}," Thiết kế pricing card với radial gradient nền tạo điểm nhấn.",[523,10036,10038],{"className":990,"code":10037,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-sm mx-auto\">\n    \u003Cdiv class=\"relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-8\">\n      \u003C!-- Radial gradient accent ở góc trên phải -->\n      \u003Cdiv class=\"absolute -top-20 -right-20 w-60 h-60 bg-radial from-indigo-100 to-transparent rounded-full\">\u003C\u002Fdiv>\n\n      \u003C!-- Nội dung -->\n      \u003Cdiv class=\"relative z-10\">\n        \u003Cspan class=\"text-sm font-semibold text-indigo-600 uppercase tracking-wider\">Pro Plan\u003C\u002Fspan>\n\n        \u003Cdiv class=\"mt-4\">\n          \u003Cspan class=\"text-5xl font-black text-gray-900\">$29\u003C\u002Fspan>\n          \u003Cspan class=\"text-gray-500 text-lg\">\u002Ftháng\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n\n        \u003Cp class=\"mt-4 text-gray-600 text-sm leading-relaxed\">\n          Dành cho freelancer và team nhỏ cần đầy đủ tính năng.\n        \u003C\u002Fp>\n\n        \u003Cul class=\"mt-6 space-y-3\">\n          \u003Cli class=\"flex items-center gap-2 text-sm text-gray-700\">\n            \u003Cspan class=\"text-emerald-500 font-bold\">✓\u003C\u002Fspan>\n            Unlimited projects\n          \u003C\u002Fli>\n          \u003Cli class=\"flex items-center gap-2 text-sm text-gray-700\">\n            \u003Cspan class=\"text-emerald-500 font-bold\">✓\u003C\u002Fspan>\n            50GB storage\n          \u003C\u002Fli>\n          \u003Cli class=\"flex items-center gap-2 text-sm text-gray-700\">\n            \u003Cspan class=\"text-emerald-500 font-bold\">✓\u003C\u002Fspan>\n            Priority support\n          \u003C\u002Fli>\n          \u003Cli class=\"flex items-center gap-2 text-sm text-gray-700\">\n            \u003Cspan class=\"text-emerald-500 font-bold\">✓\u003C\u002Fspan>\n            API access\n          \u003C\u002Fli>\n        \u003C\u002Ful>\n\n        \u003Cbutton class=\"mt-8 w-full py-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors\">\n          Bắt đầu dùng thử\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,10039,10040,10048,10067,10086,10091,10114,10118,10123,10142,10170,10174,10193,10221,10249,10257,10261,10280,10285,10293,10297,10316,10335,10363,10368,10376,10394,10420,10425,10433,10451,10477,10482,10490,10508,10534,10539,10547,10555,10559,10578,10583,10591,10599,10607,10615],{"__ignoreMap":528},[532,10041,10042,10044,10046],{"class":534,"line":535},[532,10043,661],{"class":549},[532,10045,1006],{"class":664},[532,10047,692],{"class":549},[532,10049,10050,10052,10054,10056,10058,10060,10063,10065],{"class":534,"line":542},[532,10051,1013],{"class":549},[532,10053,1978],{"class":664},[532,10055,669],{"class":668},[532,10057,672],{"class":549},[532,10059,557],{"class":549},[532,10061,10062],{"class":553},"max-w-sm mx-auto",[532,10064,557],{"class":549},[532,10066,692],{"class":549},[532,10068,10069,10071,10073,10075,10077,10079,10082,10084],{"class":534,"line":563},[532,10070,1034],{"class":549},[532,10072,1978],{"class":664},[532,10074,669],{"class":668},[532,10076,672],{"class":549},[532,10078,557],{"class":549},[532,10080,10081],{"class":553},"relative overflow-hidden rounded-2xl border border-slate-200 bg-white p-8",[532,10083,557],{"class":549},[532,10085,692],{"class":549},[532,10087,10088],{"class":534,"line":570},[532,10089,10090],{"class":538},"      \u003C!-- Radial gradient accent ở góc trên phải -->\n",[532,10092,10093,10095,10097,10099,10101,10103,10106,10108,10110,10112],{"class":534,"line":578},[532,10094,1996],{"class":549},[532,10096,1978],{"class":664},[532,10098,669],{"class":668},[532,10100,672],{"class":549},[532,10102,557],{"class":549},[532,10104,10105],{"class":553},"absolute -top-20 -right-20 w-60 h-60 bg-radial from-indigo-100 to-transparent rounded-full",[532,10107,557],{"class":549},[532,10109,5879],{"class":549},[532,10111,1978],{"class":664},[532,10113,692],{"class":549},[532,10115,10116],{"class":534,"line":604},[532,10117,567],{"emptyLinePlaceholder":566},[532,10119,10120],{"class":534,"line":624},[532,10121,10122],{"class":538},"      \u003C!-- Nội dung -->\n",[532,10124,10125,10127,10129,10131,10133,10135,10138,10140],{"class":534,"line":640},[532,10126,1996],{"class":549},[532,10128,1978],{"class":664},[532,10130,669],{"class":668},[532,10132,672],{"class":549},[532,10134,557],{"class":549},[532,10136,10137],{"class":553},"relative z-10",[532,10139,557],{"class":549},[532,10141,692],{"class":549},[532,10143,10144,10146,10148,10150,10152,10154,10157,10159,10161,10164,10166,10168],{"class":534,"line":894},[532,10145,2021],{"class":549},[532,10147,532],{"class":664},[532,10149,669],{"class":668},[532,10151,672],{"class":549},[532,10153,557],{"class":549},[532,10155,10156],{"class":553},"text-sm font-semibold text-indigo-600 uppercase tracking-wider",[532,10158,557],{"class":549},[532,10160,681],{"class":549},[532,10162,10163],{"class":581},"Pro Plan",[532,10165,687],{"class":549},[532,10167,532],{"class":664},[532,10169,692],{"class":549},[532,10171,10172],{"class":534,"line":900},[532,10173,567],{"emptyLinePlaceholder":566},[532,10175,10176,10178,10180,10182,10184,10186,10189,10191],{"class":534,"line":906},[532,10177,2021],{"class":549},[532,10179,1978],{"class":664},[532,10181,669],{"class":668},[532,10183,672],{"class":549},[532,10185,557],{"class":549},[532,10187,10188],{"class":553},"mt-4",[532,10190,557],{"class":549},[532,10192,692],{"class":549},[532,10194,10195,10197,10199,10201,10203,10205,10208,10210,10212,10215,10217,10219],{"class":534,"line":912},[532,10196,5051],{"class":549},[532,10198,532],{"class":664},[532,10200,669],{"class":668},[532,10202,672],{"class":549},[532,10204,557],{"class":549},[532,10206,10207],{"class":553},"text-5xl font-black text-gray-900",[532,10209,557],{"class":549},[532,10211,681],{"class":549},[532,10213,10214],{"class":581},"$29",[532,10216,687],{"class":549},[532,10218,532],{"class":664},[532,10220,692],{"class":549},[532,10222,10223,10225,10227,10229,10231,10233,10236,10238,10240,10243,10245,10247],{"class":534,"line":918},[532,10224,5051],{"class":549},[532,10226,532],{"class":664},[532,10228,669],{"class":668},[532,10230,672],{"class":549},[532,10232,557],{"class":549},[532,10234,10235],{"class":553},"text-gray-500 text-lg",[532,10237,557],{"class":549},[532,10239,681],{"class":549},[532,10241,10242],{"class":581},"\u002Ftháng",[532,10244,687],{"class":549},[532,10246,532],{"class":664},[532,10248,692],{"class":549},[532,10250,10251,10253,10255],{"class":534,"line":1237},[532,10252,2148],{"class":549},[532,10254,1978],{"class":664},[532,10256,692],{"class":549},[532,10258,10259],{"class":534,"line":1242},[532,10260,567],{"emptyLinePlaceholder":566},[532,10262,10263,10265,10267,10269,10271,10273,10276,10278],{"class":534,"line":1262},[532,10264,2021],{"class":549},[532,10266,448],{"class":664},[532,10268,669],{"class":668},[532,10270,672],{"class":549},[532,10272,557],{"class":549},[532,10274,10275],{"class":553},"mt-4 text-gray-600 text-sm leading-relaxed",[532,10277,557],{"class":549},[532,10279,692],{"class":549},[532,10281,10282],{"class":534,"line":1268},[532,10283,10284],{"class":581},"          Dành cho freelancer và team nhỏ cần đầy đủ tính năng.\n",[532,10286,10287,10289,10291],{"class":534,"line":1274},[532,10288,2148],{"class":549},[532,10290,448],{"class":664},[532,10292,692],{"class":549},[532,10294,10295],{"class":534,"line":1283},[532,10296,567],{"emptyLinePlaceholder":566},[532,10298,10299,10301,10303,10305,10307,10309,10312,10314],{"class":534,"line":1288},[532,10300,2021],{"class":549},[532,10302,1068],{"class":664},[532,10304,669],{"class":668},[532,10306,672],{"class":549},[532,10308,557],{"class":549},[532,10310,10311],{"class":553},"mt-6 space-y-3",[532,10313,557],{"class":549},[532,10315,692],{"class":549},[532,10317,10318,10320,10322,10324,10326,10328,10331,10333],{"class":534,"line":1308},[532,10319,5051],{"class":549},[532,10321,1071],{"class":664},[532,10323,669],{"class":668},[532,10325,672],{"class":549},[532,10327,557],{"class":549},[532,10329,10330],{"class":553},"flex items-center gap-2 text-sm text-gray-700",[532,10332,557],{"class":549},[532,10334,692],{"class":549},[532,10336,10337,10339,10341,10343,10345,10347,10350,10352,10354,10357,10359,10361],{"class":534,"line":1314},[532,10338,7509],{"class":549},[532,10340,532],{"class":664},[532,10342,669],{"class":668},[532,10344,672],{"class":549},[532,10346,557],{"class":549},[532,10348,10349],{"class":553},"text-emerald-500 font-bold",[532,10351,557],{"class":549},[532,10353,681],{"class":549},[532,10355,10356],{"class":581},"✓",[532,10358,687],{"class":549},[532,10360,532],{"class":664},[532,10362,692],{"class":549},[532,10364,10365],{"class":534,"line":1323},[532,10366,10367],{"class":581},"            Unlimited projects\n",[532,10369,10370,10372,10374],{"class":534,"line":1332},[532,10371,7619],{"class":549},[532,10373,1071],{"class":664},[532,10375,692],{"class":549},[532,10377,10378,10380,10382,10384,10386,10388,10390,10392],{"class":534,"line":3119},[532,10379,5051],{"class":549},[532,10381,1071],{"class":664},[532,10383,669],{"class":668},[532,10385,672],{"class":549},[532,10387,557],{"class":549},[532,10389,10330],{"class":553},[532,10391,557],{"class":549},[532,10393,692],{"class":549},[532,10395,10396,10398,10400,10402,10404,10406,10408,10410,10412,10414,10416,10418],{"class":534,"line":3139},[532,10397,7509],{"class":549},[532,10399,532],{"class":664},[532,10401,669],{"class":668},[532,10403,672],{"class":549},[532,10405,557],{"class":549},[532,10407,10349],{"class":553},[532,10409,557],{"class":549},[532,10411,681],{"class":549},[532,10413,10356],{"class":581},[532,10415,687],{"class":549},[532,10417,532],{"class":664},[532,10419,692],{"class":549},[532,10421,10422],{"class":534,"line":3145},[532,10423,10424],{"class":581},"            50GB storage\n",[532,10426,10427,10429,10431],{"class":534,"line":3151},[532,10428,7619],{"class":549},[532,10430,1071],{"class":664},[532,10432,692],{"class":549},[532,10434,10435,10437,10439,10441,10443,10445,10447,10449],{"class":534,"line":3157},[532,10436,5051],{"class":549},[532,10438,1071],{"class":664},[532,10440,669],{"class":668},[532,10442,672],{"class":549},[532,10444,557],{"class":549},[532,10446,10330],{"class":553},[532,10448,557],{"class":549},[532,10450,692],{"class":549},[532,10452,10453,10455,10457,10459,10461,10463,10465,10467,10469,10471,10473,10475],{"class":534,"line":3163},[532,10454,7509],{"class":549},[532,10456,532],{"class":664},[532,10458,669],{"class":668},[532,10460,672],{"class":549},[532,10462,557],{"class":549},[532,10464,10349],{"class":553},[532,10466,557],{"class":549},[532,10468,681],{"class":549},[532,10470,10356],{"class":581},[532,10472,687],{"class":549},[532,10474,532],{"class":664},[532,10476,692],{"class":549},[532,10478,10479],{"class":534,"line":3172},[532,10480,10481],{"class":581},"            Priority support\n",[532,10483,10484,10486,10488],{"class":534,"line":3177},[532,10485,7619],{"class":549},[532,10487,1071],{"class":664},[532,10489,692],{"class":549},[532,10491,10492,10494,10496,10498,10500,10502,10504,10506],{"class":534,"line":3197},[532,10493,5051],{"class":549},[532,10495,1071],{"class":664},[532,10497,669],{"class":668},[532,10499,672],{"class":549},[532,10501,557],{"class":549},[532,10503,10330],{"class":553},[532,10505,557],{"class":549},[532,10507,692],{"class":549},[532,10509,10510,10512,10514,10516,10518,10520,10522,10524,10526,10528,10530,10532],{"class":534,"line":3204},[532,10511,7509],{"class":549},[532,10513,532],{"class":664},[532,10515,669],{"class":668},[532,10517,672],{"class":549},[532,10519,557],{"class":549},[532,10521,10349],{"class":553},[532,10523,557],{"class":549},[532,10525,681],{"class":549},[532,10527,10356],{"class":581},[532,10529,687],{"class":549},[532,10531,532],{"class":664},[532,10533,692],{"class":549},[532,10535,10536],{"class":534,"line":3219},[532,10537,10538],{"class":581},"            API access\n",[532,10540,10541,10543,10545],{"class":534,"line":3234},[532,10542,7619],{"class":549},[532,10544,1071],{"class":664},[532,10546,692],{"class":549},[532,10548,10549,10551,10553],{"class":534,"line":3249},[532,10550,2148],{"class":549},[532,10552,1068],{"class":664},[532,10554,692],{"class":549},[532,10556,10557],{"class":534,"line":3255},[532,10558,567],{"emptyLinePlaceholder":566},[532,10560,10561,10563,10565,10567,10569,10571,10574,10576],{"class":534,"line":3284},[532,10562,2021],{"class":549},[532,10564,2125],{"class":664},[532,10566,669],{"class":668},[532,10568,672],{"class":549},[532,10570,557],{"class":549},[532,10572,10573],{"class":553},"mt-8 w-full py-3 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 transition-colors",[532,10575,557],{"class":549},[532,10577,692],{"class":549},[532,10579,10580],{"class":534,"line":3313},[532,10581,10582],{"class":581},"          Bắt đầu dùng thử\n",[532,10584,10585,10587,10589],{"class":534,"line":3322},[532,10586,2148],{"class":549},[532,10588,2125],{"class":664},[532,10590,692],{"class":549},[532,10592,10593,10595,10597],{"class":534,"line":3331},[532,10594,2050],{"class":549},[532,10596,1978],{"class":664},[532,10598,692],{"class":549},[532,10600,10601,10603,10605],{"class":534,"line":3340},[532,10602,1158],{"class":549},[532,10604,1978],{"class":664},[532,10606,692],{"class":549},[532,10608,10609,10611,10613],{"class":534,"line":4498},[532,10610,1045],{"class":549},[532,10612,1978],{"class":664},[532,10614,692],{"class":549},[532,10616,10617,10619,10621],{"class":534,"line":4504},[532,10618,687],{"class":549},[532,10620,1006],{"class":664},[532,10622,692],{"class":549},[767,10624,10626,10627],{"id":10625},"bài-tập-14-striped-table-rows-với-evenbg-gray-50","Bài tập 14: Striped table rows với ",[432,10628,10629],{},"even:bg-gray-50",[448,10631,10632,10634],{},[755,10633,777],{}," Bảng dữ liệu với hàng xen kẽ màu, header nổi bật.",[523,10636,10638],{"className":990,"code":10637,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-3xl mx-auto p-8\">\n    \u003Cdiv class=\"overflow-hidden rounded-xl border border-gray-200\">\n      \u003Ctable class=\"w-full text-sm\">\n        \u003Cthead>\n          \u003Ctr class=\"bg-gray-900 text-white\">\n            \u003Cth class=\"px-6 py-3.5 text-left font-semibold\">Tên dự án\u003C\u002Fth>\n            \u003Cth class=\"px-6 py-3.5 text-left font-semibold\">Trạng thái\u003C\u002Fth>\n            \u003Cth class=\"px-6 py-3.5 text-left font-semibold\">Thành viên\u003C\u002Fth>\n            \u003Cth class=\"px-6 py-3.5 text-right font-semibold\">Tiến độ\u003C\u002Fth>\n          \u003C\u002Ftr>\n        \u003C\u002Fthead>\n        \u003Ctbody class=\"divide-y divide-gray-200\">\n          \u003Ctr class=\"even:bg-gray-50 hover:bg-indigo-50\u002F50 transition-colors\">\n            \u003Ctd class=\"px-6 py-4 font-medium text-gray-900\">Redesign Website\u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4\">\n              \u003Cspan class=\"px-2.5 py-0.5 bg-emerald-100 text-emerald-700 text-xs font-medium rounded-full\">Active\u003C\u002Fspan>\n            \u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4 text-gray-600\">8 người\u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4 text-right font-medium text-gray-900\">75%\u003C\u002Ftd>\n          \u003C\u002Ftr>\n          \u003Ctr class=\"even:bg-gray-50 hover:bg-indigo-50\u002F50 transition-colors\">\n            \u003Ctd class=\"px-6 py-4 font-medium text-gray-900\">Mobile App v2\u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4\">\n              \u003Cspan class=\"px-2.5 py-0.5 bg-amber-100 text-amber-700 text-xs font-medium rounded-full\">Review\u003C\u002Fspan>\n            \u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4 text-gray-600\">5 người\u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4 text-right font-medium text-gray-900\">90%\u003C\u002Ftd>\n          \u003C\u002Ftr>\n          \u003Ctr class=\"even:bg-gray-50 hover:bg-indigo-50\u002F50 transition-colors\">\n            \u003Ctd class=\"px-6 py-4 font-medium text-gray-900\">API Integration\u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4\">\n              \u003Cspan class=\"px-2.5 py-0.5 bg-blue-100 text-blue-700 text-xs font-medium rounded-full\">In Progress\u003C\u002Fspan>\n            \u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4 text-gray-600\">3 người\u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4 text-right font-medium text-gray-900\">45%\u003C\u002Ftd>\n          \u003C\u002Ftr>\n          \u003Ctr class=\"even:bg-gray-50 hover:bg-indigo-50\u002F50 transition-colors\">\n            \u003Ctd class=\"px-6 py-4 font-medium text-gray-900\">Documentation\u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4\">\n              \u003Cspan class=\"px-2.5 py-0.5 bg-gray-100 text-gray-600 text-xs font-medium rounded-full\">Draft\u003C\u002Fspan>\n            \u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4 text-gray-600\">2 người\u003C\u002Ftd>\n            \u003Ctd class=\"px-6 py-4 text-right font-medium text-gray-900\">20%\u003C\u002Ftd>\n          \u003C\u002Ftr>\n        \u003C\u002Ftbody>\n      \u003C\u002Ftable>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,10639,10640,10648,10667,10686,10705,10713,10732,10760,10787,10814,10842,10850,10858,10877,10896,10924,10943,10972,10981,11009,11037,11045,11063,11090,11108,11136,11144,11171,11198,11206,11224,11251,11269,11297,11305,11332,11359,11367,11385,11412,11430,11458,11466,11493,11520,11528,11536,11544,11552,11560],{"__ignoreMap":528},[532,10641,10642,10644,10646],{"class":534,"line":535},[532,10643,661],{"class":549},[532,10645,1006],{"class":664},[532,10647,692],{"class":549},[532,10649,10650,10652,10654,10656,10658,10660,10663,10665],{"class":534,"line":542},[532,10651,1013],{"class":549},[532,10653,1978],{"class":664},[532,10655,669],{"class":668},[532,10657,672],{"class":549},[532,10659,557],{"class":549},[532,10661,10662],{"class":553},"max-w-3xl mx-auto p-8",[532,10664,557],{"class":549},[532,10666,692],{"class":549},[532,10668,10669,10671,10673,10675,10677,10679,10682,10684],{"class":534,"line":563},[532,10670,1034],{"class":549},[532,10672,1978],{"class":664},[532,10674,669],{"class":668},[532,10676,672],{"class":549},[532,10678,557],{"class":549},[532,10680,10681],{"class":553},"overflow-hidden rounded-xl border border-gray-200",[532,10683,557],{"class":549},[532,10685,692],{"class":549},[532,10687,10688,10690,10692,10694,10696,10698,10701,10703],{"class":534,"line":570},[532,10689,1996],{"class":549},[532,10691,452],{"class":664},[532,10693,669],{"class":668},[532,10695,672],{"class":549},[532,10697,557],{"class":549},[532,10699,10700],{"class":553},"w-full text-sm",[532,10702,557],{"class":549},[532,10704,692],{"class":549},[532,10706,10707,10709,10711],{"class":534,"line":578},[532,10708,2021],{"class":549},[532,10710,455],{"class":664},[532,10712,692],{"class":549},[532,10714,10715,10717,10719,10721,10723,10725,10728,10730],{"class":534,"line":604},[532,10716,5051],{"class":549},[532,10718,458],{"class":664},[532,10720,669],{"class":668},[532,10722,672],{"class":549},[532,10724,557],{"class":549},[532,10726,10727],{"class":553},"bg-gray-900 text-white",[532,10729,557],{"class":549},[532,10731,692],{"class":549},[532,10733,10734,10736,10738,10740,10742,10744,10747,10749,10751,10754,10756,10758],{"class":534,"line":624},[532,10735,7509],{"class":549},[532,10737,461],{"class":664},[532,10739,669],{"class":668},[532,10741,672],{"class":549},[532,10743,557],{"class":549},[532,10745,10746],{"class":553},"px-6 py-3.5 text-left font-semibold",[532,10748,557],{"class":549},[532,10750,681],{"class":549},[532,10752,10753],{"class":581},"Tên dự án",[532,10755,687],{"class":549},[532,10757,461],{"class":664},[532,10759,692],{"class":549},[532,10761,10762,10764,10766,10768,10770,10772,10774,10776,10778,10781,10783,10785],{"class":534,"line":640},[532,10763,7509],{"class":549},[532,10765,461],{"class":664},[532,10767,669],{"class":668},[532,10769,672],{"class":549},[532,10771,557],{"class":549},[532,10773,10746],{"class":553},[532,10775,557],{"class":549},[532,10777,681],{"class":549},[532,10779,10780],{"class":581},"Trạng thái",[532,10782,687],{"class":549},[532,10784,461],{"class":664},[532,10786,692],{"class":549},[532,10788,10789,10791,10793,10795,10797,10799,10801,10803,10805,10808,10810,10812],{"class":534,"line":894},[532,10790,7509],{"class":549},[532,10792,461],{"class":664},[532,10794,669],{"class":668},[532,10796,672],{"class":549},[532,10798,557],{"class":549},[532,10800,10746],{"class":553},[532,10802,557],{"class":549},[532,10804,681],{"class":549},[532,10806,10807],{"class":581},"Thành viên",[532,10809,687],{"class":549},[532,10811,461],{"class":664},[532,10813,692],{"class":549},[532,10815,10816,10818,10820,10822,10824,10826,10829,10831,10833,10836,10838,10840],{"class":534,"line":900},[532,10817,7509],{"class":549},[532,10819,461],{"class":664},[532,10821,669],{"class":668},[532,10823,672],{"class":549},[532,10825,557],{"class":549},[532,10827,10828],{"class":553},"px-6 py-3.5 text-right font-semibold",[532,10830,557],{"class":549},[532,10832,681],{"class":549},[532,10834,10835],{"class":581},"Tiến độ",[532,10837,687],{"class":549},[532,10839,461],{"class":664},[532,10841,692],{"class":549},[532,10843,10844,10846,10848],{"class":534,"line":906},[532,10845,7619],{"class":549},[532,10847,458],{"class":664},[532,10849,692],{"class":549},[532,10851,10852,10854,10856],{"class":534,"line":912},[532,10853,2148],{"class":549},[532,10855,455],{"class":664},[532,10857,692],{"class":549},[532,10859,10860,10862,10864,10866,10868,10870,10873,10875],{"class":534,"line":918},[532,10861,2021],{"class":549},[532,10863,471],{"class":664},[532,10865,669],{"class":668},[532,10867,672],{"class":549},[532,10869,557],{"class":549},[532,10871,10872],{"class":553},"divide-y divide-gray-200",[532,10874,557],{"class":549},[532,10876,692],{"class":549},[532,10878,10879,10881,10883,10885,10887,10889,10892,10894],{"class":534,"line":1237},[532,10880,5051],{"class":549},[532,10882,458],{"class":664},[532,10884,669],{"class":668},[532,10886,672],{"class":549},[532,10888,557],{"class":549},[532,10890,10891],{"class":553},"even:bg-gray-50 hover:bg-indigo-50\u002F50 transition-colors",[532,10893,557],{"class":549},[532,10895,692],{"class":549},[532,10897,10898,10900,10902,10904,10906,10908,10911,10913,10915,10918,10920,10922],{"class":534,"line":1242},[532,10899,7509],{"class":549},[532,10901,476],{"class":664},[532,10903,669],{"class":668},[532,10905,672],{"class":549},[532,10907,557],{"class":549},[532,10909,10910],{"class":553},"px-6 py-4 font-medium text-gray-900",[532,10912,557],{"class":549},[532,10914,681],{"class":549},[532,10916,10917],{"class":581},"Redesign Website",[532,10919,687],{"class":549},[532,10921,476],{"class":664},[532,10923,692],{"class":549},[532,10925,10926,10928,10930,10932,10934,10936,10939,10941],{"class":534,"line":1262},[532,10927,7509],{"class":549},[532,10929,476],{"class":664},[532,10931,669],{"class":668},[532,10933,672],{"class":549},[532,10935,557],{"class":549},[532,10937,10938],{"class":553},"px-6 py-4",[532,10940,557],{"class":549},[532,10942,692],{"class":549},[532,10944,10945,10948,10950,10952,10954,10956,10959,10961,10963,10966,10968,10970],{"class":534,"line":1268},[532,10946,10947],{"class":549},"              \u003C",[532,10949,532],{"class":664},[532,10951,669],{"class":668},[532,10953,672],{"class":549},[532,10955,557],{"class":549},[532,10957,10958],{"class":553},"px-2.5 py-0.5 bg-emerald-100 text-emerald-700 text-xs font-medium rounded-full",[532,10960,557],{"class":549},[532,10962,681],{"class":549},[532,10964,10965],{"class":581},"Active",[532,10967,687],{"class":549},[532,10969,532],{"class":664},[532,10971,692],{"class":549},[532,10973,10974,10977,10979],{"class":534,"line":1274},[532,10975,10976],{"class":549},"            \u003C\u002F",[532,10978,476],{"class":664},[532,10980,692],{"class":549},[532,10982,10983,10985,10987,10989,10991,10993,10996,10998,11000,11003,11005,11007],{"class":534,"line":1283},[532,10984,7509],{"class":549},[532,10986,476],{"class":664},[532,10988,669],{"class":668},[532,10990,672],{"class":549},[532,10992,557],{"class":549},[532,10994,10995],{"class":553},"px-6 py-4 text-gray-600",[532,10997,557],{"class":549},[532,10999,681],{"class":549},[532,11001,11002],{"class":581},"8 người",[532,11004,687],{"class":549},[532,11006,476],{"class":664},[532,11008,692],{"class":549},[532,11010,11011,11013,11015,11017,11019,11021,11024,11026,11028,11031,11033,11035],{"class":534,"line":1288},[532,11012,7509],{"class":549},[532,11014,476],{"class":664},[532,11016,669],{"class":668},[532,11018,672],{"class":549},[532,11020,557],{"class":549},[532,11022,11023],{"class":553},"px-6 py-4 text-right font-medium text-gray-900",[532,11025,557],{"class":549},[532,11027,681],{"class":549},[532,11029,11030],{"class":581},"75%",[532,11032,687],{"class":549},[532,11034,476],{"class":664},[532,11036,692],{"class":549},[532,11038,11039,11041,11043],{"class":534,"line":1308},[532,11040,7619],{"class":549},[532,11042,458],{"class":664},[532,11044,692],{"class":549},[532,11046,11047,11049,11051,11053,11055,11057,11059,11061],{"class":534,"line":1314},[532,11048,5051],{"class":549},[532,11050,458],{"class":664},[532,11052,669],{"class":668},[532,11054,672],{"class":549},[532,11056,557],{"class":549},[532,11058,10891],{"class":553},[532,11060,557],{"class":549},[532,11062,692],{"class":549},[532,11064,11065,11067,11069,11071,11073,11075,11077,11079,11081,11084,11086,11088],{"class":534,"line":1323},[532,11066,7509],{"class":549},[532,11068,476],{"class":664},[532,11070,669],{"class":668},[532,11072,672],{"class":549},[532,11074,557],{"class":549},[532,11076,10910],{"class":553},[532,11078,557],{"class":549},[532,11080,681],{"class":549},[532,11082,11083],{"class":581},"Mobile App v2",[532,11085,687],{"class":549},[532,11087,476],{"class":664},[532,11089,692],{"class":549},[532,11091,11092,11094,11096,11098,11100,11102,11104,11106],{"class":534,"line":1332},[532,11093,7509],{"class":549},[532,11095,476],{"class":664},[532,11097,669],{"class":668},[532,11099,672],{"class":549},[532,11101,557],{"class":549},[532,11103,10938],{"class":553},[532,11105,557],{"class":549},[532,11107,692],{"class":549},[532,11109,11110,11112,11114,11116,11118,11120,11123,11125,11127,11130,11132,11134],{"class":534,"line":3119},[532,11111,10947],{"class":549},[532,11113,532],{"class":664},[532,11115,669],{"class":668},[532,11117,672],{"class":549},[532,11119,557],{"class":549},[532,11121,11122],{"class":553},"px-2.5 py-0.5 bg-amber-100 text-amber-700 text-xs font-medium rounded-full",[532,11124,557],{"class":549},[532,11126,681],{"class":549},[532,11128,11129],{"class":581},"Review",[532,11131,687],{"class":549},[532,11133,532],{"class":664},[532,11135,692],{"class":549},[532,11137,11138,11140,11142],{"class":534,"line":3139},[532,11139,10976],{"class":549},[532,11141,476],{"class":664},[532,11143,692],{"class":549},[532,11145,11146,11148,11150,11152,11154,11156,11158,11160,11162,11165,11167,11169],{"class":534,"line":3145},[532,11147,7509],{"class":549},[532,11149,476],{"class":664},[532,11151,669],{"class":668},[532,11153,672],{"class":549},[532,11155,557],{"class":549},[532,11157,10995],{"class":553},[532,11159,557],{"class":549},[532,11161,681],{"class":549},[532,11163,11164],{"class":581},"5 người",[532,11166,687],{"class":549},[532,11168,476],{"class":664},[532,11170,692],{"class":549},[532,11172,11173,11175,11177,11179,11181,11183,11185,11187,11189,11192,11194,11196],{"class":534,"line":3151},[532,11174,7509],{"class":549},[532,11176,476],{"class":664},[532,11178,669],{"class":668},[532,11180,672],{"class":549},[532,11182,557],{"class":549},[532,11184,11023],{"class":553},[532,11186,557],{"class":549},[532,11188,681],{"class":549},[532,11190,11191],{"class":581},"90%",[532,11193,687],{"class":549},[532,11195,476],{"class":664},[532,11197,692],{"class":549},[532,11199,11200,11202,11204],{"class":534,"line":3157},[532,11201,7619],{"class":549},[532,11203,458],{"class":664},[532,11205,692],{"class":549},[532,11207,11208,11210,11212,11214,11216,11218,11220,11222],{"class":534,"line":3163},[532,11209,5051],{"class":549},[532,11211,458],{"class":664},[532,11213,669],{"class":668},[532,11215,672],{"class":549},[532,11217,557],{"class":549},[532,11219,10891],{"class":553},[532,11221,557],{"class":549},[532,11223,692],{"class":549},[532,11225,11226,11228,11230,11232,11234,11236,11238,11240,11242,11245,11247,11249],{"class":534,"line":3172},[532,11227,7509],{"class":549},[532,11229,476],{"class":664},[532,11231,669],{"class":668},[532,11233,672],{"class":549},[532,11235,557],{"class":549},[532,11237,10910],{"class":553},[532,11239,557],{"class":549},[532,11241,681],{"class":549},[532,11243,11244],{"class":581},"API Integration",[532,11246,687],{"class":549},[532,11248,476],{"class":664},[532,11250,692],{"class":549},[532,11252,11253,11255,11257,11259,11261,11263,11265,11267],{"class":534,"line":3177},[532,11254,7509],{"class":549},[532,11256,476],{"class":664},[532,11258,669],{"class":668},[532,11260,672],{"class":549},[532,11262,557],{"class":549},[532,11264,10938],{"class":553},[532,11266,557],{"class":549},[532,11268,692],{"class":549},[532,11270,11271,11273,11275,11277,11279,11281,11284,11286,11288,11291,11293,11295],{"class":534,"line":3197},[532,11272,10947],{"class":549},[532,11274,532],{"class":664},[532,11276,669],{"class":668},[532,11278,672],{"class":549},[532,11280,557],{"class":549},[532,11282,11283],{"class":553},"px-2.5 py-0.5 bg-blue-100 text-blue-700 text-xs font-medium rounded-full",[532,11285,557],{"class":549},[532,11287,681],{"class":549},[532,11289,11290],{"class":581},"In Progress",[532,11292,687],{"class":549},[532,11294,532],{"class":664},[532,11296,692],{"class":549},[532,11298,11299,11301,11303],{"class":534,"line":3204},[532,11300,10976],{"class":549},[532,11302,476],{"class":664},[532,11304,692],{"class":549},[532,11306,11307,11309,11311,11313,11315,11317,11319,11321,11323,11326,11328,11330],{"class":534,"line":3219},[532,11308,7509],{"class":549},[532,11310,476],{"class":664},[532,11312,669],{"class":668},[532,11314,672],{"class":549},[532,11316,557],{"class":549},[532,11318,10995],{"class":553},[532,11320,557],{"class":549},[532,11322,681],{"class":549},[532,11324,11325],{"class":581},"3 người",[532,11327,687],{"class":549},[532,11329,476],{"class":664},[532,11331,692],{"class":549},[532,11333,11334,11336,11338,11340,11342,11344,11346,11348,11350,11353,11355,11357],{"class":534,"line":3234},[532,11335,7509],{"class":549},[532,11337,476],{"class":664},[532,11339,669],{"class":668},[532,11341,672],{"class":549},[532,11343,557],{"class":549},[532,11345,11023],{"class":553},[532,11347,557],{"class":549},[532,11349,681],{"class":549},[532,11351,11352],{"class":581},"45%",[532,11354,687],{"class":549},[532,11356,476],{"class":664},[532,11358,692],{"class":549},[532,11360,11361,11363,11365],{"class":534,"line":3249},[532,11362,7619],{"class":549},[532,11364,458],{"class":664},[532,11366,692],{"class":549},[532,11368,11369,11371,11373,11375,11377,11379,11381,11383],{"class":534,"line":3255},[532,11370,5051],{"class":549},[532,11372,458],{"class":664},[532,11374,669],{"class":668},[532,11376,672],{"class":549},[532,11378,557],{"class":549},[532,11380,10891],{"class":553},[532,11382,557],{"class":549},[532,11384,692],{"class":549},[532,11386,11387,11389,11391,11393,11395,11397,11399,11401,11403,11406,11408,11410],{"class":534,"line":3284},[532,11388,7509],{"class":549},[532,11390,476],{"class":664},[532,11392,669],{"class":668},[532,11394,672],{"class":549},[532,11396,557],{"class":549},[532,11398,10910],{"class":553},[532,11400,557],{"class":549},[532,11402,681],{"class":549},[532,11404,11405],{"class":581},"Documentation",[532,11407,687],{"class":549},[532,11409,476],{"class":664},[532,11411,692],{"class":549},[532,11413,11414,11416,11418,11420,11422,11424,11426,11428],{"class":534,"line":3313},[532,11415,7509],{"class":549},[532,11417,476],{"class":664},[532,11419,669],{"class":668},[532,11421,672],{"class":549},[532,11423,557],{"class":549},[532,11425,10938],{"class":553},[532,11427,557],{"class":549},[532,11429,692],{"class":549},[532,11431,11432,11434,11436,11438,11440,11442,11445,11447,11449,11452,11454,11456],{"class":534,"line":3322},[532,11433,10947],{"class":549},[532,11435,532],{"class":664},[532,11437,669],{"class":668},[532,11439,672],{"class":549},[532,11441,557],{"class":549},[532,11443,11444],{"class":553},"px-2.5 py-0.5 bg-gray-100 text-gray-600 text-xs font-medium rounded-full",[532,11446,557],{"class":549},[532,11448,681],{"class":549},[532,11450,11451],{"class":581},"Draft",[532,11453,687],{"class":549},[532,11455,532],{"class":664},[532,11457,692],{"class":549},[532,11459,11460,11462,11464],{"class":534,"line":3331},[532,11461,10976],{"class":549},[532,11463,476],{"class":664},[532,11465,692],{"class":549},[532,11467,11468,11470,11472,11474,11476,11478,11480,11482,11484,11487,11489,11491],{"class":534,"line":3340},[532,11469,7509],{"class":549},[532,11471,476],{"class":664},[532,11473,669],{"class":668},[532,11475,672],{"class":549},[532,11477,557],{"class":549},[532,11479,10995],{"class":553},[532,11481,557],{"class":549},[532,11483,681],{"class":549},[532,11485,11486],{"class":581},"2 người",[532,11488,687],{"class":549},[532,11490,476],{"class":664},[532,11492,692],{"class":549},[532,11494,11495,11497,11499,11501,11503,11505,11507,11509,11511,11514,11516,11518],{"class":534,"line":4498},[532,11496,7509],{"class":549},[532,11498,476],{"class":664},[532,11500,669],{"class":668},[532,11502,672],{"class":549},[532,11504,557],{"class":549},[532,11506,11023],{"class":553},[532,11508,557],{"class":549},[532,11510,681],{"class":549},[532,11512,11513],{"class":581},"20%",[532,11515,687],{"class":549},[532,11517,476],{"class":664},[532,11519,692],{"class":549},[532,11521,11522,11524,11526],{"class":534,"line":4504},[532,11523,7619],{"class":549},[532,11525,458],{"class":664},[532,11527,692],{"class":549},[532,11529,11530,11532,11534],{"class":534,"line":4514},[532,11531,2148],{"class":549},[532,11533,471],{"class":664},[532,11535,692],{"class":549},[532,11537,11538,11540,11542],{"class":534,"line":4520},[532,11539,2050],{"class":549},[532,11541,452],{"class":664},[532,11543,692],{"class":549},[532,11545,11546,11548,11550],{"class":534,"line":4529},[532,11547,1158],{"class":549},[532,11549,1978],{"class":664},[532,11551,692],{"class":549},[532,11553,11554,11556,11558],{"class":534,"line":4538},[532,11555,1045],{"class":549},[532,11557,1978],{"class":664},[532,11559,692],{"class":549},[532,11561,11562,11564,11566],{"class":534,"line":4547},[532,11563,687],{"class":549},[532,11565,1006],{"class":664},[532,11567,692],{"class":549},[1340,11569],{},[427,11571,11573],{"id":11572},"_9-border-outline","9. Border & Outline",[767,11575,11577],{"id":11576},"border","Border",[523,11579,11581],{"className":652,"code":11580,"language":654,"meta":528,"style":528},"\u003C!-- Border cơ bản -->\n\u003Cdiv class=\"border\">Border 1px solid (default)\u003C\u002Fdiv>\n\u003Cdiv class=\"border-2\">Border 2px\u003C\u002Fdiv>\n\u003Cdiv class=\"border-4\">Border 4px\u003C\u002Fdiv>\n\u003Cdiv class=\"border-0\">Không border\u003C\u002Fdiv>\n\n\u003C!-- Border color -->\n\u003Cdiv class=\"border border-red-500\">Border đỏ\u003C\u002Fdiv>\n\u003Cdiv class=\"border border-slate-200\">Border xám nhạt\u003C\u002Fdiv>\n\n\u003C!-- Border style -->\n\u003Cdiv class=\"border border-dashed\">Border đứt đoạn\u003C\u002Fdiv>\n\u003Cdiv class=\"border border-dotted\">Border chấm\u003C\u002Fdiv>\n\u003Cdiv class=\"border border-double\">Border đôi\u003C\u002Fdiv>\n\n\u003C!-- Border từng cạnh -->\n\u003Cdiv class=\"border-t-2 border-b border-l-4 border-r-0\">\n  Mỗi cạnh độ dày khác nhau\n\u003C\u002Fdiv>\n",[432,11582,11583,11588,11615,11643,11671,11699,11703,11707,11735,11763,11767,11772,11800,11828,11856,11860,11865,11884,11889],{"__ignoreMap":528},[532,11584,11585],{"class":534,"line":535},[532,11586,11587],{"class":538},"\u003C!-- Border cơ bản -->\n",[532,11589,11590,11592,11594,11596,11598,11600,11602,11604,11606,11609,11611,11613],{"class":534,"line":542},[532,11591,661],{"class":549},[532,11593,1978],{"class":664},[532,11595,669],{"class":668},[532,11597,672],{"class":549},[532,11599,557],{"class":549},[532,11601,11576],{"class":553},[532,11603,557],{"class":549},[532,11605,681],{"class":549},[532,11607,11608],{"class":581},"Border 1px solid (default)",[532,11610,687],{"class":549},[532,11612,1978],{"class":664},[532,11614,692],{"class":549},[532,11616,11617,11619,11621,11623,11625,11627,11630,11632,11634,11637,11639,11641],{"class":534,"line":563},[532,11618,661],{"class":549},[532,11620,1978],{"class":664},[532,11622,669],{"class":668},[532,11624,672],{"class":549},[532,11626,557],{"class":549},[532,11628,11629],{"class":553},"border-2",[532,11631,557],{"class":549},[532,11633,681],{"class":549},[532,11635,11636],{"class":581},"Border 2px",[532,11638,687],{"class":549},[532,11640,1978],{"class":664},[532,11642,692],{"class":549},[532,11644,11645,11647,11649,11651,11653,11655,11658,11660,11662,11665,11667,11669],{"class":534,"line":570},[532,11646,661],{"class":549},[532,11648,1978],{"class":664},[532,11650,669],{"class":668},[532,11652,672],{"class":549},[532,11654,557],{"class":549},[532,11656,11657],{"class":553},"border-4",[532,11659,557],{"class":549},[532,11661,681],{"class":549},[532,11663,11664],{"class":581},"Border 4px",[532,11666,687],{"class":549},[532,11668,1978],{"class":664},[532,11670,692],{"class":549},[532,11672,11673,11675,11677,11679,11681,11683,11686,11688,11690,11693,11695,11697],{"class":534,"line":578},[532,11674,661],{"class":549},[532,11676,1978],{"class":664},[532,11678,669],{"class":668},[532,11680,672],{"class":549},[532,11682,557],{"class":549},[532,11684,11685],{"class":553},"border-0",[532,11687,557],{"class":549},[532,11689,681],{"class":549},[532,11691,11692],{"class":581},"Không border",[532,11694,687],{"class":549},[532,11696,1978],{"class":664},[532,11698,692],{"class":549},[532,11700,11701],{"class":534,"line":604},[532,11702,567],{"emptyLinePlaceholder":566},[532,11704,11705],{"class":534,"line":624},[532,11706,6322],{"class":538},[532,11708,11709,11711,11713,11715,11717,11719,11722,11724,11726,11729,11731,11733],{"class":534,"line":640},[532,11710,661],{"class":549},[532,11712,1978],{"class":664},[532,11714,669],{"class":668},[532,11716,672],{"class":549},[532,11718,557],{"class":549},[532,11720,11721],{"class":553},"border border-red-500",[532,11723,557],{"class":549},[532,11725,681],{"class":549},[532,11727,11728],{"class":581},"Border đỏ",[532,11730,687],{"class":549},[532,11732,1978],{"class":664},[532,11734,692],{"class":549},[532,11736,11737,11739,11741,11743,11745,11747,11750,11752,11754,11757,11759,11761],{"class":534,"line":894},[532,11738,661],{"class":549},[532,11740,1978],{"class":664},[532,11742,669],{"class":668},[532,11744,672],{"class":549},[532,11746,557],{"class":549},[532,11748,11749],{"class":553},"border border-slate-200",[532,11751,557],{"class":549},[532,11753,681],{"class":549},[532,11755,11756],{"class":581},"Border xám nhạt",[532,11758,687],{"class":549},[532,11760,1978],{"class":664},[532,11762,692],{"class":549},[532,11764,11765],{"class":534,"line":900},[532,11766,567],{"emptyLinePlaceholder":566},[532,11768,11769],{"class":534,"line":906},[532,11770,11771],{"class":538},"\u003C!-- Border style -->\n",[532,11773,11774,11776,11778,11780,11782,11784,11787,11789,11791,11794,11796,11798],{"class":534,"line":912},[532,11775,661],{"class":549},[532,11777,1978],{"class":664},[532,11779,669],{"class":668},[532,11781,672],{"class":549},[532,11783,557],{"class":549},[532,11785,11786],{"class":553},"border border-dashed",[532,11788,557],{"class":549},[532,11790,681],{"class":549},[532,11792,11793],{"class":581},"Border đứt đoạn",[532,11795,687],{"class":549},[532,11797,1978],{"class":664},[532,11799,692],{"class":549},[532,11801,11802,11804,11806,11808,11810,11812,11815,11817,11819,11822,11824,11826],{"class":534,"line":918},[532,11803,661],{"class":549},[532,11805,1978],{"class":664},[532,11807,669],{"class":668},[532,11809,672],{"class":549},[532,11811,557],{"class":549},[532,11813,11814],{"class":553},"border border-dotted",[532,11816,557],{"class":549},[532,11818,681],{"class":549},[532,11820,11821],{"class":581},"Border chấm",[532,11823,687],{"class":549},[532,11825,1978],{"class":664},[532,11827,692],{"class":549},[532,11829,11830,11832,11834,11836,11838,11840,11843,11845,11847,11850,11852,11854],{"class":534,"line":1237},[532,11831,661],{"class":549},[532,11833,1978],{"class":664},[532,11835,669],{"class":668},[532,11837,672],{"class":549},[532,11839,557],{"class":549},[532,11841,11842],{"class":553},"border border-double",[532,11844,557],{"class":549},[532,11846,681],{"class":549},[532,11848,11849],{"class":581},"Border đôi",[532,11851,687],{"class":549},[532,11853,1978],{"class":664},[532,11855,692],{"class":549},[532,11857,11858],{"class":534,"line":1242},[532,11859,567],{"emptyLinePlaceholder":566},[532,11861,11862],{"class":534,"line":1262},[532,11863,11864],{"class":538},"\u003C!-- Border từng cạnh -->\n",[532,11866,11867,11869,11871,11873,11875,11877,11880,11882],{"class":534,"line":1268},[532,11868,661],{"class":549},[532,11870,1978],{"class":664},[532,11872,669],{"class":668},[532,11874,672],{"class":549},[532,11876,557],{"class":549},[532,11878,11879],{"class":553},"border-t-2 border-b border-l-4 border-r-0",[532,11881,557],{"class":549},[532,11883,692],{"class":549},[532,11885,11886],{"class":534,"line":1274},[532,11887,11888],{"class":581},"  Mỗi cạnh độ dày khác nhau\n",[532,11890,11891,11893,11895],{"class":534,"line":1283},[532,11892,687],{"class":549},[532,11894,1978],{"class":664},[532,11896,692],{"class":549},[767,11898,11900],{"id":11899},"border-radius","Border Radius",[523,11902,11904],{"className":652,"code":11903,"language":654,"meta":528,"style":528},"\u003Cdiv class=\"rounded-sm\">Bo góc nhỏ (2px)\u003C\u002Fdiv>\n\u003Cdiv class=\"rounded\">Bo góc vừa (4px)\u003C\u002Fdiv>\n\u003Cdiv class=\"rounded-md\">Bo góc trung bình (6px)\u003C\u002Fdiv>\n\u003Cdiv class=\"rounded-lg\">Bo góc lớn (8px)\u003C\u002Fdiv>\n\u003Cdiv class=\"rounded-xl\">Bo góc XL (12px)\u003C\u002Fdiv>\n\u003Cdiv class=\"rounded-2xl\">Bo góc 2XL (16px)\u003C\u002Fdiv>\n\u003Cdiv class=\"rounded-3xl\">Bo góc 3XL (24px)\u003C\u002Fdiv>\n\u003Cdiv class=\"rounded-full\">Bo tròn hoàn toàn (circle\u002Fpill)\u003C\u002Fdiv>\n\n\u003C!-- Bo góc từng góc -->\n\u003Cdiv class=\"rounded-t-xl rounded-b-sm\">Bo góc riêng biệt\u003C\u002Fdiv>\n\u003Cdiv class=\"rounded-tl-lg rounded-br-lg\">Chỉ bo 2 góc chéo\u003C\u002Fdiv>\n",[432,11905,11906,11934,11962,11990,12018,12046,12074,12102,12130,12134,12139,12167],{"__ignoreMap":528},[532,11907,11908,11910,11912,11914,11916,11918,11921,11923,11925,11928,11930,11932],{"class":534,"line":535},[532,11909,661],{"class":549},[532,11911,1978],{"class":664},[532,11913,669],{"class":668},[532,11915,672],{"class":549},[532,11917,557],{"class":549},[532,11919,11920],{"class":553},"rounded-sm",[532,11922,557],{"class":549},[532,11924,681],{"class":549},[532,11926,11927],{"class":581},"Bo góc nhỏ (2px)",[532,11929,687],{"class":549},[532,11931,1978],{"class":664},[532,11933,692],{"class":549},[532,11935,11936,11938,11940,11942,11944,11946,11949,11951,11953,11956,11958,11960],{"class":534,"line":542},[532,11937,661],{"class":549},[532,11939,1978],{"class":664},[532,11941,669],{"class":668},[532,11943,672],{"class":549},[532,11945,557],{"class":549},[532,11947,11948],{"class":553},"rounded",[532,11950,557],{"class":549},[532,11952,681],{"class":549},[532,11954,11955],{"class":581},"Bo góc vừa (4px)",[532,11957,687],{"class":549},[532,11959,1978],{"class":664},[532,11961,692],{"class":549},[532,11963,11964,11966,11968,11970,11972,11974,11977,11979,11981,11984,11986,11988],{"class":534,"line":563},[532,11965,661],{"class":549},[532,11967,1978],{"class":664},[532,11969,669],{"class":668},[532,11971,672],{"class":549},[532,11973,557],{"class":549},[532,11975,11976],{"class":553},"rounded-md",[532,11978,557],{"class":549},[532,11980,681],{"class":549},[532,11982,11983],{"class":581},"Bo góc trung bình (6px)",[532,11985,687],{"class":549},[532,11987,1978],{"class":664},[532,11989,692],{"class":549},[532,11991,11992,11994,11996,11998,12000,12002,12005,12007,12009,12012,12014,12016],{"class":534,"line":570},[532,11993,661],{"class":549},[532,11995,1978],{"class":664},[532,11997,669],{"class":668},[532,11999,672],{"class":549},[532,12001,557],{"class":549},[532,12003,12004],{"class":553},"rounded-lg",[532,12006,557],{"class":549},[532,12008,681],{"class":549},[532,12010,12011],{"class":581},"Bo góc lớn (8px)",[532,12013,687],{"class":549},[532,12015,1978],{"class":664},[532,12017,692],{"class":549},[532,12019,12020,12022,12024,12026,12028,12030,12033,12035,12037,12040,12042,12044],{"class":534,"line":578},[532,12021,661],{"class":549},[532,12023,1978],{"class":664},[532,12025,669],{"class":668},[532,12027,672],{"class":549},[532,12029,557],{"class":549},[532,12031,12032],{"class":553},"rounded-xl",[532,12034,557],{"class":549},[532,12036,681],{"class":549},[532,12038,12039],{"class":581},"Bo góc XL (12px)",[532,12041,687],{"class":549},[532,12043,1978],{"class":664},[532,12045,692],{"class":549},[532,12047,12048,12050,12052,12054,12056,12058,12061,12063,12065,12068,12070,12072],{"class":534,"line":604},[532,12049,661],{"class":549},[532,12051,1978],{"class":664},[532,12053,669],{"class":668},[532,12055,672],{"class":549},[532,12057,557],{"class":549},[532,12059,12060],{"class":553},"rounded-2xl",[532,12062,557],{"class":549},[532,12064,681],{"class":549},[532,12066,12067],{"class":581},"Bo góc 2XL (16px)",[532,12069,687],{"class":549},[532,12071,1978],{"class":664},[532,12073,692],{"class":549},[532,12075,12076,12078,12080,12082,12084,12086,12089,12091,12093,12096,12098,12100],{"class":534,"line":624},[532,12077,661],{"class":549},[532,12079,1978],{"class":664},[532,12081,669],{"class":668},[532,12083,672],{"class":549},[532,12085,557],{"class":549},[532,12087,12088],{"class":553},"rounded-3xl",[532,12090,557],{"class":549},[532,12092,681],{"class":549},[532,12094,12095],{"class":581},"Bo góc 3XL (24px)",[532,12097,687],{"class":549},[532,12099,1978],{"class":664},[532,12101,692],{"class":549},[532,12103,12104,12106,12108,12110,12112,12114,12117,12119,12121,12124,12126,12128],{"class":534,"line":640},[532,12105,661],{"class":549},[532,12107,1978],{"class":664},[532,12109,669],{"class":668},[532,12111,672],{"class":549},[532,12113,557],{"class":549},[532,12115,12116],{"class":553},"rounded-full",[532,12118,557],{"class":549},[532,12120,681],{"class":549},[532,12122,12123],{"class":581},"Bo tròn hoàn toàn (circle\u002Fpill)",[532,12125,687],{"class":549},[532,12127,1978],{"class":664},[532,12129,692],{"class":549},[532,12131,12132],{"class":534,"line":894},[532,12133,567],{"emptyLinePlaceholder":566},[532,12135,12136],{"class":534,"line":900},[532,12137,12138],{"class":538},"\u003C!-- Bo góc từng góc -->\n",[532,12140,12141,12143,12145,12147,12149,12151,12154,12156,12158,12161,12163,12165],{"class":534,"line":906},[532,12142,661],{"class":549},[532,12144,1978],{"class":664},[532,12146,669],{"class":668},[532,12148,672],{"class":549},[532,12150,557],{"class":549},[532,12152,12153],{"class":553},"rounded-t-xl rounded-b-sm",[532,12155,557],{"class":549},[532,12157,681],{"class":549},[532,12159,12160],{"class":581},"Bo góc riêng biệt",[532,12162,687],{"class":549},[532,12164,1978],{"class":664},[532,12166,692],{"class":549},[532,12168,12169,12171,12173,12175,12177,12179,12182,12184,12186,12189,12191,12193],{"class":534,"line":912},[532,12170,661],{"class":549},[532,12172,1978],{"class":664},[532,12174,669],{"class":668},[532,12176,672],{"class":549},[532,12178,557],{"class":549},[532,12180,12181],{"class":553},"rounded-tl-lg rounded-br-lg",[532,12183,557],{"class":549},[532,12185,681],{"class":549},[532,12187,12188],{"class":581},"Chỉ bo 2 góc chéo",[532,12190,687],{"class":549},[532,12192,1978],{"class":664},[532,12194,692],{"class":549},[767,12196,12198],{"id":12197},"outline-ring","Outline & Ring",[523,12200,12202],{"className":652,"code":12201,"language":654,"meta":528,"style":528},"\u003C!-- Outline (không chiếm không gian, nằm ngoài border) -->\n\u003Cbutton class=\"outline outline-2 outline-offset-2 outline-blue-500\">\n  Outline style\n\u003C\u002Fbutton>\n\n\u003C!-- Ring (thay thế outline với box-shadow — đẹp hơn) -->\n\u003Cinput class=\"ring-2 ring-blue-500 focus:ring-4\" placeholder=\"Ring focus\" \u002F>\n\n\u003C!-- Ring inset -->\n\u003Cdiv class=\"ring-2 ring-inset ring-indigo-500\">Ring inset\u003C\u002Fdiv>\n",[432,12203,12204,12209,12228,12233,12241,12245,12250,12282,12286,12291],{"__ignoreMap":528},[532,12205,12206],{"class":534,"line":535},[532,12207,12208],{"class":538},"\u003C!-- Outline (không chiếm không gian, nằm ngoài border) -->\n",[532,12210,12211,12213,12215,12217,12219,12221,12224,12226],{"class":534,"line":542},[532,12212,661],{"class":549},[532,12214,2125],{"class":664},[532,12216,669],{"class":668},[532,12218,672],{"class":549},[532,12220,557],{"class":549},[532,12222,12223],{"class":553},"outline outline-2 outline-offset-2 outline-blue-500",[532,12225,557],{"class":549},[532,12227,692],{"class":549},[532,12229,12230],{"class":534,"line":563},[532,12231,12232],{"class":581},"  Outline style\n",[532,12234,12235,12237,12239],{"class":534,"line":570},[532,12236,687],{"class":549},[532,12238,2125],{"class":664},[532,12240,692],{"class":549},[532,12242,12243],{"class":534,"line":578},[532,12244,567],{"emptyLinePlaceholder":566},[532,12246,12247],{"class":534,"line":604},[532,12248,12249],{"class":538},"\u003C!-- Ring (thay thế outline với box-shadow — đẹp hơn) -->\n",[532,12251,12252,12254,12257,12259,12261,12263,12266,12268,12271,12273,12275,12278,12280],{"class":534,"line":624},[532,12253,661],{"class":549},[532,12255,12256],{"class":664},"input",[532,12258,669],{"class":668},[532,12260,672],{"class":549},[532,12262,557],{"class":549},[532,12264,12265],{"class":553},"ring-2 ring-blue-500 focus:ring-4",[532,12267,557],{"class":549},[532,12269,12270],{"class":668}," placeholder",[532,12272,672],{"class":549},[532,12274,557],{"class":549},[532,12276,12277],{"class":553},"Ring focus",[532,12279,557],{"class":549},[532,12281,1040],{"class":549},[532,12283,12284],{"class":534,"line":640},[532,12285,567],{"emptyLinePlaceholder":566},[532,12287,12288],{"class":534,"line":894},[532,12289,12290],{"class":538},"\u003C!-- Ring inset -->\n",[532,12292,12293,12295,12297,12299,12301,12303,12306,12308,12310,12313,12315,12317],{"class":534,"line":900},[532,12294,661],{"class":549},[532,12296,1978],{"class":664},[532,12298,669],{"class":668},[532,12300,672],{"class":549},[532,12302,557],{"class":549},[532,12304,12305],{"class":553},"ring-2 ring-inset ring-indigo-500",[532,12307,557],{"class":549},[532,12309,681],{"class":549},[532,12311,12312],{"class":581},"Ring inset",[532,12314,687],{"class":549},[532,12316,1978],{"class":664},[532,12318,692],{"class":549},[749,12320,12321,12330,12331,1883,12334,12337],{"color":9011,"icon":405},[755,12322,12323,12324,1883,12327,794],{},"NEW v4.0 — ",[432,12325,12326],{},"inset-shadow-*",[432,12328,12329],{},"inset-ring-*"," Thay thế hoàn toàn cho ",[432,12332,12333],{},"shadow-inner",[432,12335,12336],{},"ring-inset"," cũ. Cú pháp độc lập, rõ ràng hơn.",[523,12339,12341],{"className":652,"code":12340,"language":654,"meta":528,"style":528},"\u003Cdiv class=\"inset-shadow-sm\">Inner shadow nhỏ\u003C\u002Fdiv>\n\u003Cdiv class=\"inset-shadow-md\">Inner shadow vừa\u003C\u002Fdiv>\n\u003Cdiv class=\"inset-ring-2 inset-ring-indigo-500\">Inner ring\u003C\u002Fdiv>\n",[432,12342,12343,12371,12399],{"__ignoreMap":528},[532,12344,12345,12347,12349,12351,12353,12355,12358,12360,12362,12365,12367,12369],{"class":534,"line":535},[532,12346,661],{"class":549},[532,12348,1978],{"class":664},[532,12350,669],{"class":668},[532,12352,672],{"class":549},[532,12354,557],{"class":549},[532,12356,12357],{"class":553},"inset-shadow-sm",[532,12359,557],{"class":549},[532,12361,681],{"class":549},[532,12363,12364],{"class":581},"Inner shadow nhỏ",[532,12366,687],{"class":549},[532,12368,1978],{"class":664},[532,12370,692],{"class":549},[532,12372,12373,12375,12377,12379,12381,12383,12386,12388,12390,12393,12395,12397],{"class":534,"line":542},[532,12374,661],{"class":549},[532,12376,1978],{"class":664},[532,12378,669],{"class":668},[532,12380,672],{"class":549},[532,12382,557],{"class":549},[532,12384,12385],{"class":553},"inset-shadow-md",[532,12387,557],{"class":549},[532,12389,681],{"class":549},[532,12391,12392],{"class":581},"Inner shadow vừa",[532,12394,687],{"class":549},[532,12396,1978],{"class":664},[532,12398,692],{"class":549},[532,12400,12401,12403,12405,12407,12409,12411,12414,12416,12418,12421,12423,12425],{"class":534,"line":563},[532,12402,661],{"class":549},[532,12404,1978],{"class":664},[532,12406,669],{"class":668},[532,12408,672],{"class":549},[532,12410,557],{"class":549},[532,12412,12413],{"class":553},"inset-ring-2 inset-ring-indigo-500",[532,12415,557],{"class":549},[532,12417,681],{"class":549},[532,12419,12420],{"class":581},"Inner ring",[532,12422,687],{"class":549},[532,12424,1978],{"class":664},[532,12426,692],{"class":549},[767,12428,12430],{"id":12429},"bài-tập-15-input-field-với-focus-ring-styling","Bài tập 15: Input field với focus ring styling",[448,12432,12433,12435],{},[755,12434,777],{}," Form input field với trạng thái mặc định, focus, error.",[523,12437,12439],{"className":990,"code":12438,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-md mx-auto p-8 space-y-6\">\n    \u003Ch2 class=\"text-xl font-bold text-gray-900\">Form đăng nhập\u003C\u002Fh2>\n\n    \u003C!-- Input mặc định -->\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        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               focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\n               transition-shadow duration-200\"\n      \u002F>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Input với error state -->\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        placeholder=\"Nhập mật khẩu\"\n        class=\"w-full px-4 py-2.5 border border-red-300 rounded-lg text-sm\n               placeholder:text-gray-400\n               focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500\n               transition-shadow duration-200\"\n      \u002F>\n      \u003Cp class=\"mt-1 text-xs text-red-600\">Mật khẩu phải có ít nhất 8 ký tự\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Input disabled -->\n    \u003Cdiv>\n      \u003Clabel class=\"block text-sm font-medium text-gray-400 mb-1.5\">Username (khóa)\u003C\u002Flabel>\n      \u003Cinput\n        type=\"text\"\n        value=\"nguyenvana\"\n        disabled\n        class=\"w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm\n               bg-gray-50 text-gray-400 cursor-not-allowed\"\n      \u002F>\n    \u003C\u002Fdiv>\n\n    \u003Cbutton class=\"w-full py-2.5 bg-indigo-600 text-white font-semibold rounded-lg\n                   hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\n                   transition-colors duration-200\">\n      Đăng nhập\n    \u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,12440,12441,12449,12468,12496,12500,12505,12513,12542,12549,12563,12577,12588,12593,12598,12605,12609,12617,12621,12626,12634,12661,12667,12680,12693,12704,12708,12713,12719,12723,12751,12759,12763,12768,12776,12804,12810,12823,12837,12842,12853,12860,12864,12872,12876,12891,12896,12905,12910,12918,12926],{"__ignoreMap":528},[532,12442,12443,12445,12447],{"class":534,"line":535},[532,12444,661],{"class":549},[532,12446,1006],{"class":664},[532,12448,692],{"class":549},[532,12450,12451,12453,12455,12457,12459,12461,12464,12466],{"class":534,"line":542},[532,12452,1013],{"class":549},[532,12454,1978],{"class":664},[532,12456,669],{"class":668},[532,12458,672],{"class":549},[532,12460,557],{"class":549},[532,12462,12463],{"class":553},"max-w-md mx-auto p-8 space-y-6",[532,12465,557],{"class":549},[532,12467,692],{"class":549},[532,12469,12470,12472,12474,12476,12478,12480,12483,12485,12487,12490,12492,12494],{"class":534,"line":563},[532,12471,1034],{"class":549},[532,12473,427],{"class":664},[532,12475,669],{"class":668},[532,12477,672],{"class":549},[532,12479,557],{"class":549},[532,12481,12482],{"class":553},"text-xl font-bold text-gray-900",[532,12484,557],{"class":549},[532,12486,681],{"class":549},[532,12488,12489],{"class":581},"Form đăng nhập",[532,12491,687],{"class":549},[532,12493,427],{"class":664},[532,12495,692],{"class":549},[532,12497,12498],{"class":534,"line":570},[532,12499,567],{"emptyLinePlaceholder":566},[532,12501,12502],{"class":534,"line":578},[532,12503,12504],{"class":538},"    \u003C!-- Input mặc định -->\n",[532,12506,12507,12509,12511],{"class":534,"line":604},[532,12508,1034],{"class":549},[532,12510,1978],{"class":664},[532,12512,692],{"class":549},[532,12514,12515,12517,12520,12522,12524,12526,12529,12531,12533,12536,12538,12540],{"class":534,"line":624},[532,12516,1996],{"class":549},[532,12518,12519],{"class":664},"label",[532,12521,669],{"class":668},[532,12523,672],{"class":549},[532,12525,557],{"class":549},[532,12527,12528],{"class":553},"block text-sm font-medium text-gray-700 mb-1.5",[532,12530,557],{"class":549},[532,12532,681],{"class":549},[532,12534,12535],{"class":581},"Email",[532,12537,687],{"class":549},[532,12539,12519],{"class":664},[532,12541,692],{"class":549},[532,12543,12544,12546],{"class":534,"line":640},[532,12545,1996],{"class":549},[532,12547,12548],{"class":664},"input\n",[532,12550,12551,12554,12556,12558,12561],{"class":534,"line":894},[532,12552,12553],{"class":668},"        type",[532,12555,672],{"class":549},[532,12557,557],{"class":549},[532,12559,12560],{"class":553},"email",[532,12562,2915],{"class":549},[532,12564,12565,12568,12570,12572,12575],{"class":534,"line":900},[532,12566,12567],{"class":668},"        placeholder",[532,12569,672],{"class":549},[532,12571,557],{"class":549},[532,12573,12574],{"class":553},"you@example.com",[532,12576,2915],{"class":549},[532,12578,12579,12581,12583,12585],{"class":534,"line":906},[532,12580,2934],{"class":668},[532,12582,672],{"class":549},[532,12584,557],{"class":549},[532,12586,12587],{"class":553},"w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm\n",[532,12589,12590],{"class":534,"line":912},[532,12591,12592],{"class":553},"               placeholder:text-gray-400\n",[532,12594,12595],{"class":534,"line":918},[532,12596,12597],{"class":553},"               focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\n",[532,12599,12600,12603],{"class":534,"line":1237},[532,12601,12602],{"class":553},"               transition-shadow duration-200",[532,12604,2915],{"class":549},[532,12606,12607],{"class":534,"line":1242},[532,12608,2948],{"class":549},[532,12610,12611,12613,12615],{"class":534,"line":1262},[532,12612,1158],{"class":549},[532,12614,1978],{"class":664},[532,12616,692],{"class":549},[532,12618,12619],{"class":534,"line":1268},[532,12620,567],{"emptyLinePlaceholder":566},[532,12622,12623],{"class":534,"line":1274},[532,12624,12625],{"class":538},"    \u003C!-- Input với error state -->\n",[532,12627,12628,12630,12632],{"class":534,"line":1283},[532,12629,1034],{"class":549},[532,12631,1978],{"class":664},[532,12633,692],{"class":549},[532,12635,12636,12638,12640,12642,12644,12646,12648,12650,12652,12655,12657,12659],{"class":534,"line":1288},[532,12637,1996],{"class":549},[532,12639,12519],{"class":664},[532,12641,669],{"class":668},[532,12643,672],{"class":549},[532,12645,557],{"class":549},[532,12647,12528],{"class":553},[532,12649,557],{"class":549},[532,12651,681],{"class":549},[532,12653,12654],{"class":581},"Mật khẩu",[532,12656,687],{"class":549},[532,12658,12519],{"class":664},[532,12660,692],{"class":549},[532,12662,12663,12665],{"class":534,"line":1308},[532,12664,1996],{"class":549},[532,12666,12548],{"class":664},[532,12668,12669,12671,12673,12675,12678],{"class":534,"line":1314},[532,12670,12553],{"class":668},[532,12672,672],{"class":549},[532,12674,557],{"class":549},[532,12676,12677],{"class":553},"password",[532,12679,2915],{"class":549},[532,12681,12682,12684,12686,12688,12691],{"class":534,"line":1323},[532,12683,12567],{"class":668},[532,12685,672],{"class":549},[532,12687,557],{"class":549},[532,12689,12690],{"class":553},"Nhập mật khẩu",[532,12692,2915],{"class":549},[532,12694,12695,12697,12699,12701],{"class":534,"line":1332},[532,12696,2934],{"class":668},[532,12698,672],{"class":549},[532,12700,557],{"class":549},[532,12702,12703],{"class":553},"w-full px-4 py-2.5 border border-red-300 rounded-lg text-sm\n",[532,12705,12706],{"class":534,"line":3119},[532,12707,12592],{"class":553},[532,12709,12710],{"class":534,"line":3139},[532,12711,12712],{"class":553},"               focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500\n",[532,12714,12715,12717],{"class":534,"line":3145},[532,12716,12602],{"class":553},[532,12718,2915],{"class":549},[532,12720,12721],{"class":534,"line":3151},[532,12722,2948],{"class":549},[532,12724,12725,12727,12729,12731,12733,12735,12738,12740,12742,12745,12747,12749],{"class":534,"line":3157},[532,12726,1996],{"class":549},[532,12728,448],{"class":664},[532,12730,669],{"class":668},[532,12732,672],{"class":549},[532,12734,557],{"class":549},[532,12736,12737],{"class":553},"mt-1 text-xs text-red-600",[532,12739,557],{"class":549},[532,12741,681],{"class":549},[532,12743,12744],{"class":581},"Mật khẩu phải có ít nhất 8 ký tự",[532,12746,687],{"class":549},[532,12748,448],{"class":664},[532,12750,692],{"class":549},[532,12752,12753,12755,12757],{"class":534,"line":3163},[532,12754,1158],{"class":549},[532,12756,1978],{"class":664},[532,12758,692],{"class":549},[532,12760,12761],{"class":534,"line":3172},[532,12762,567],{"emptyLinePlaceholder":566},[532,12764,12765],{"class":534,"line":3177},[532,12766,12767],{"class":538},"    \u003C!-- Input disabled -->\n",[532,12769,12770,12772,12774],{"class":534,"line":3197},[532,12771,1034],{"class":549},[532,12773,1978],{"class":664},[532,12775,692],{"class":549},[532,12777,12778,12780,12782,12784,12786,12788,12791,12793,12795,12798,12800,12802],{"class":534,"line":3204},[532,12779,1996],{"class":549},[532,12781,12519],{"class":664},[532,12783,669],{"class":668},[532,12785,672],{"class":549},[532,12787,557],{"class":549},[532,12789,12790],{"class":553},"block text-sm font-medium text-gray-400 mb-1.5",[532,12792,557],{"class":549},[532,12794,681],{"class":549},[532,12796,12797],{"class":581},"Username (khóa)",[532,12799,687],{"class":549},[532,12801,12519],{"class":664},[532,12803,692],{"class":549},[532,12805,12806,12808],{"class":534,"line":3219},[532,12807,1996],{"class":549},[532,12809,12548],{"class":664},[532,12811,12812,12814,12816,12818,12821],{"class":534,"line":3234},[532,12813,12553],{"class":668},[532,12815,672],{"class":549},[532,12817,557],{"class":549},[532,12819,12820],{"class":553},"text",[532,12822,2915],{"class":549},[532,12824,12825,12828,12830,12832,12835],{"class":534,"line":3249},[532,12826,12827],{"class":668},"        value",[532,12829,672],{"class":549},[532,12831,557],{"class":549},[532,12833,12834],{"class":553},"nguyenvana",[532,12836,2915],{"class":549},[532,12838,12839],{"class":534,"line":3255},[532,12840,12841],{"class":668},"        disabled\n",[532,12843,12844,12846,12848,12850],{"class":534,"line":3284},[532,12845,2934],{"class":668},[532,12847,672],{"class":549},[532,12849,557],{"class":549},[532,12851,12852],{"class":553},"w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm\n",[532,12854,12855,12858],{"class":534,"line":3313},[532,12856,12857],{"class":553},"               bg-gray-50 text-gray-400 cursor-not-allowed",[532,12859,2915],{"class":549},[532,12861,12862],{"class":534,"line":3322},[532,12863,2948],{"class":549},[532,12865,12866,12868,12870],{"class":534,"line":3331},[532,12867,1158],{"class":549},[532,12869,1978],{"class":664},[532,12871,692],{"class":549},[532,12873,12874],{"class":534,"line":3340},[532,12875,567],{"emptyLinePlaceholder":566},[532,12877,12878,12880,12882,12884,12886,12888],{"class":534,"line":4498},[532,12879,1034],{"class":549},[532,12881,2125],{"class":664},[532,12883,669],{"class":668},[532,12885,672],{"class":549},[532,12887,557],{"class":549},[532,12889,12890],{"class":553},"w-full py-2.5 bg-indigo-600 text-white font-semibold rounded-lg\n",[532,12892,12893],{"class":534,"line":4504},[532,12894,12895],{"class":553},"                   hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\n",[532,12897,12898,12901,12903],{"class":534,"line":4514},[532,12899,12900],{"class":553},"                   transition-colors duration-200",[532,12902,557],{"class":549},[532,12904,692],{"class":549},[532,12906,12907],{"class":534,"line":4520},[532,12908,12909],{"class":581},"      Đăng nhập\n",[532,12911,12912,12914,12916],{"class":534,"line":4529},[532,12913,1158],{"class":549},[532,12915,2125],{"class":664},[532,12917,692],{"class":549},[532,12919,12920,12922,12924],{"class":534,"line":4538},[532,12921,1045],{"class":549},[532,12923,1978],{"class":664},[532,12925,692],{"class":549},[532,12927,12928,12930,12932],{"class":534,"line":4547},[532,12929,687],{"class":549},[532,12931,1006],{"class":664},[532,12933,692],{"class":549},[767,12935,12937],{"id":12936},"bài-tập-16-card-với-hover-border-effect","Bài tập 16: Card với hover border effect",[448,12939,12940,12942],{},[755,12941,777],{}," Grid card có border chuyển màu và nổi shadow khi hover.",[523,12944,12946],{"className":990,"code":12945,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-5xl mx-auto p-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-8\">Dịch vụ của chúng tôi\u003C\u002Fh2>\n\n    \u003Cdiv class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n      \u003C!-- Card 1 -->\n      \u003Cdiv class=\"group p-6 bg-white rounded-xl border border-gray-200\n                  hover:border-indigo-400 hover:shadow-lg\n                  transition-all duration-300 cursor-pointer\">\n        \u003Cdiv class=\"w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4\n                    group-hover:bg-indigo-200 transition-colors\">\n          \u003Csvg class=\"w-6 h-6 text-indigo-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                  d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" \u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors\">\n          Web Development\n        \u003C\u002Fh3>\n        \u003Cp class=\"mt-2 text-sm text-gray-600 leading-relaxed\">\n          Xây dựng website chuẩn SEO, tốc độ cao với công nghệ mới nhất.\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 2 -->\n      \u003Cdiv class=\"group p-6 bg-white rounded-xl border border-gray-200\n                  hover:border-emerald-400 hover:shadow-lg\n                  transition-all duration-300 cursor-pointer\">\n        \u003Cdiv class=\"w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mb-4\n                    group-hover:bg-emerald-200 transition-colors\">\n          \u003Csvg class=\"w-6 h-6 text-emerald-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                  d=\"M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z\" \u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 group-hover:text-emerald-600 transition-colors\">\n          Mobile Apps\n        \u003C\u002Fh3>\n        \u003Cp class=\"mt-2 text-sm text-gray-600 leading-relaxed\">\n          Ứng dụng iOS và Android native, hiệu năng cao, UX mượt mà.\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- Card 3 -->\n      \u003Cdiv class=\"group p-6 bg-white rounded-xl border border-gray-200\n                  hover:border-purple-400 hover:shadow-lg\n                  transition-all duration-300 cursor-pointer\">\n        \u003Cdiv class=\"w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4\n                    group-hover:bg-purple-200 transition-colors\">\n          \u003Csvg class=\"w-6 h-6 text-purple-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                  d=\"M13 10V3L4 14h7v7l9-11h-7z\" \u002F>\n          \u003C\u002Fsvg>\n        \u003C\u002Fdiv>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 group-hover:text-purple-600 transition-colors\">\n          AI Solutions\n        \u003C\u002Fh3>\n        \u003Cp class=\"mt-2 text-sm text-gray-600 leading-relaxed\">\n          Tích hợp AI\u002FML vào sản phẩm — chatbot, recommendation, automation.\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,12947,12948,12956,12975,13003,13007,13026,13031,13046,13051,13060,13075,13084,13140,13182,13198,13206,13214,13233,13238,13246,13265,13270,13278,13286,13290,13295,13309,13314,13322,13337,13346,13395,13431,13446,13454,13462,13481,13486,13494,13512,13517,13525,13533,13537,13542,13556,13561,13569,13584,13593,13642,13678,13693,13701,13709,13728,13733,13741,13759,13764,13772,13780,13788,13796],{"__ignoreMap":528},[532,12949,12950,12952,12954],{"class":534,"line":535},[532,12951,661],{"class":549},[532,12953,1006],{"class":664},[532,12955,692],{"class":549},[532,12957,12958,12960,12962,12964,12966,12968,12971,12973],{"class":534,"line":542},[532,12959,1013],{"class":549},[532,12961,1978],{"class":664},[532,12963,669],{"class":668},[532,12965,672],{"class":549},[532,12967,557],{"class":549},[532,12969,12970],{"class":553},"max-w-5xl mx-auto p-8",[532,12972,557],{"class":549},[532,12974,692],{"class":549},[532,12976,12977,12979,12981,12983,12985,12987,12990,12992,12994,12997,12999,13001],{"class":534,"line":563},[532,12978,1034],{"class":549},[532,12980,427],{"class":664},[532,12982,669],{"class":668},[532,12984,672],{"class":549},[532,12986,557],{"class":549},[532,12988,12989],{"class":553},"text-2xl font-bold text-gray-900 mb-8",[532,12991,557],{"class":549},[532,12993,681],{"class":549},[532,12995,12996],{"class":581},"Dịch vụ của chúng tôi",[532,12998,687],{"class":549},[532,13000,427],{"class":664},[532,13002,692],{"class":549},[532,13004,13005],{"class":534,"line":570},[532,13006,567],{"emptyLinePlaceholder":566},[532,13008,13009,13011,13013,13015,13017,13019,13022,13024],{"class":534,"line":578},[532,13010,1034],{"class":549},[532,13012,1978],{"class":664},[532,13014,669],{"class":668},[532,13016,672],{"class":549},[532,13018,557],{"class":549},[532,13020,13021],{"class":553},"grid grid-cols-1 md:grid-cols-3 gap-6",[532,13023,557],{"class":549},[532,13025,692],{"class":549},[532,13027,13028],{"class":534,"line":604},[532,13029,13030],{"class":538},"      \u003C!-- Card 1 -->\n",[532,13032,13033,13035,13037,13039,13041,13043],{"class":534,"line":624},[532,13034,1996],{"class":549},[532,13036,1978],{"class":664},[532,13038,669],{"class":668},[532,13040,672],{"class":549},[532,13042,557],{"class":549},[532,13044,13045],{"class":553},"group p-6 bg-white rounded-xl border border-gray-200\n",[532,13047,13048],{"class":534,"line":640},[532,13049,13050],{"class":553},"                  hover:border-indigo-400 hover:shadow-lg\n",[532,13052,13053,13056,13058],{"class":534,"line":894},[532,13054,13055],{"class":553},"                  transition-all duration-300 cursor-pointer",[532,13057,557],{"class":549},[532,13059,692],{"class":549},[532,13061,13062,13064,13066,13068,13070,13072],{"class":534,"line":900},[532,13063,2021],{"class":549},[532,13065,1978],{"class":664},[532,13067,669],{"class":668},[532,13069,672],{"class":549},[532,13071,557],{"class":549},[532,13073,13074],{"class":553},"w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4\n",[532,13076,13077,13080,13082],{"class":534,"line":906},[532,13078,13079],{"class":553},"                    group-hover:bg-indigo-200 transition-colors",[532,13081,557],{"class":549},[532,13083,692],{"class":549},[532,13085,13086,13088,13091,13093,13095,13097,13100,13102,13105,13107,13109,13112,13114,13117,13119,13121,13124,13126,13129,13131,13133,13136,13138],{"class":534,"line":912},[532,13087,5051],{"class":549},[532,13089,13090],{"class":664},"svg",[532,13092,669],{"class":668},[532,13094,672],{"class":549},[532,13096,557],{"class":549},[532,13098,13099],{"class":553},"w-6 h-6 text-indigo-600",[532,13101,557],{"class":549},[532,13103,13104],{"class":668}," fill",[532,13106,672],{"class":549},[532,13108,557],{"class":549},[532,13110,13111],{"class":553},"none",[532,13113,557],{"class":549},[532,13115,13116],{"class":668}," stroke",[532,13118,672],{"class":549},[532,13120,557],{"class":549},[532,13122,13123],{"class":553},"currentColor",[532,13125,557],{"class":549},[532,13127,13128],{"class":668}," viewBox",[532,13130,672],{"class":549},[532,13132,557],{"class":549},[532,13134,13135],{"class":553},"0 0 24 24",[532,13137,557],{"class":549},[532,13139,692],{"class":549},[532,13141,13142,13144,13147,13150,13152,13154,13157,13159,13162,13164,13166,13168,13170,13173,13175,13177,13180],{"class":534,"line":918},[532,13143,7509],{"class":549},[532,13145,13146],{"class":664},"path",[532,13148,13149],{"class":668}," stroke-linecap",[532,13151,672],{"class":549},[532,13153,557],{"class":549},[532,13155,13156],{"class":553},"round",[532,13158,557],{"class":549},[532,13160,13161],{"class":668}," stroke-linejoin",[532,13163,672],{"class":549},[532,13165,557],{"class":549},[532,13167,13156],{"class":553},[532,13169,557],{"class":549},[532,13171,13172],{"class":668}," stroke-width",[532,13174,672],{"class":549},[532,13176,557],{"class":549},[532,13178,13179],{"class":553},"2",[532,13181,2915],{"class":549},[532,13183,13184,13187,13189,13191,13194,13196],{"class":534,"line":1237},[532,13185,13186],{"class":668},"                  d",[532,13188,672],{"class":549},[532,13190,557],{"class":549},[532,13192,13193],{"class":553},"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z",[532,13195,557],{"class":549},[532,13197,1040],{"class":549},[532,13199,13200,13202,13204],{"class":534,"line":1242},[532,13201,7619],{"class":549},[532,13203,13090],{"class":664},[532,13205,692],{"class":549},[532,13207,13208,13210,13212],{"class":534,"line":1262},[532,13209,2148],{"class":549},[532,13211,1978],{"class":664},[532,13213,692],{"class":549},[532,13215,13216,13218,13220,13222,13224,13226,13229,13231],{"class":534,"line":1268},[532,13217,2021],{"class":549},[532,13219,767],{"class":664},[532,13221,669],{"class":668},[532,13223,672],{"class":549},[532,13225,557],{"class":549},[532,13227,13228],{"class":553},"text-lg font-semibold text-gray-900 group-hover:text-indigo-600 transition-colors",[532,13230,557],{"class":549},[532,13232,692],{"class":549},[532,13234,13235],{"class":534,"line":1274},[532,13236,13237],{"class":581},"          Web Development\n",[532,13239,13240,13242,13244],{"class":534,"line":1283},[532,13241,2148],{"class":549},[532,13243,767],{"class":664},[532,13245,692],{"class":549},[532,13247,13248,13250,13252,13254,13256,13258,13261,13263],{"class":534,"line":1288},[532,13249,2021],{"class":549},[532,13251,448],{"class":664},[532,13253,669],{"class":668},[532,13255,672],{"class":549},[532,13257,557],{"class":549},[532,13259,13260],{"class":553},"mt-2 text-sm text-gray-600 leading-relaxed",[532,13262,557],{"class":549},[532,13264,692],{"class":549},[532,13266,13267],{"class":534,"line":1308},[532,13268,13269],{"class":581},"          Xây dựng website chuẩn SEO, tốc độ cao với công nghệ mới nhất.\n",[532,13271,13272,13274,13276],{"class":534,"line":1314},[532,13273,2148],{"class":549},[532,13275,448],{"class":664},[532,13277,692],{"class":549},[532,13279,13280,13282,13284],{"class":534,"line":1323},[532,13281,2050],{"class":549},[532,13283,1978],{"class":664},[532,13285,692],{"class":549},[532,13287,13288],{"class":534,"line":1332},[532,13289,567],{"emptyLinePlaceholder":566},[532,13291,13292],{"class":534,"line":3119},[532,13293,13294],{"class":538},"      \u003C!-- Card 2 -->\n",[532,13296,13297,13299,13301,13303,13305,13307],{"class":534,"line":3139},[532,13298,1996],{"class":549},[532,13300,1978],{"class":664},[532,13302,669],{"class":668},[532,13304,672],{"class":549},[532,13306,557],{"class":549},[532,13308,13045],{"class":553},[532,13310,13311],{"class":534,"line":3145},[532,13312,13313],{"class":553},"                  hover:border-emerald-400 hover:shadow-lg\n",[532,13315,13316,13318,13320],{"class":534,"line":3151},[532,13317,13055],{"class":553},[532,13319,557],{"class":549},[532,13321,692],{"class":549},[532,13323,13324,13326,13328,13330,13332,13334],{"class":534,"line":3157},[532,13325,2021],{"class":549},[532,13327,1978],{"class":664},[532,13329,669],{"class":668},[532,13331,672],{"class":549},[532,13333,557],{"class":549},[532,13335,13336],{"class":553},"w-12 h-12 bg-emerald-100 rounded-lg flex items-center justify-center mb-4\n",[532,13338,13339,13342,13344],{"class":534,"line":3163},[532,13340,13341],{"class":553},"                    group-hover:bg-emerald-200 transition-colors",[532,13343,557],{"class":549},[532,13345,692],{"class":549},[532,13347,13348,13350,13352,13354,13356,13358,13361,13363,13365,13367,13369,13371,13373,13375,13377,13379,13381,13383,13385,13387,13389,13391,13393],{"class":534,"line":3172},[532,13349,5051],{"class":549},[532,13351,13090],{"class":664},[532,13353,669],{"class":668},[532,13355,672],{"class":549},[532,13357,557],{"class":549},[532,13359,13360],{"class":553},"w-6 h-6 text-emerald-600",[532,13362,557],{"class":549},[532,13364,13104],{"class":668},[532,13366,672],{"class":549},[532,13368,557],{"class":549},[532,13370,13111],{"class":553},[532,13372,557],{"class":549},[532,13374,13116],{"class":668},[532,13376,672],{"class":549},[532,13378,557],{"class":549},[532,13380,13123],{"class":553},[532,13382,557],{"class":549},[532,13384,13128],{"class":668},[532,13386,672],{"class":549},[532,13388,557],{"class":549},[532,13390,13135],{"class":553},[532,13392,557],{"class":549},[532,13394,692],{"class":549},[532,13396,13397,13399,13401,13403,13405,13407,13409,13411,13413,13415,13417,13419,13421,13423,13425,13427,13429],{"class":534,"line":3177},[532,13398,7509],{"class":549},[532,13400,13146],{"class":664},[532,13402,13149],{"class":668},[532,13404,672],{"class":549},[532,13406,557],{"class":549},[532,13408,13156],{"class":553},[532,13410,557],{"class":549},[532,13412,13161],{"class":668},[532,13414,672],{"class":549},[532,13416,557],{"class":549},[532,13418,13156],{"class":553},[532,13420,557],{"class":549},[532,13422,13172],{"class":668},[532,13424,672],{"class":549},[532,13426,557],{"class":549},[532,13428,13179],{"class":553},[532,13430,2915],{"class":549},[532,13432,13433,13435,13437,13439,13442,13444],{"class":534,"line":3197},[532,13434,13186],{"class":668},[532,13436,672],{"class":549},[532,13438,557],{"class":549},[532,13440,13441],{"class":553},"M12 18h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z",[532,13443,557],{"class":549},[532,13445,1040],{"class":549},[532,13447,13448,13450,13452],{"class":534,"line":3204},[532,13449,7619],{"class":549},[532,13451,13090],{"class":664},[532,13453,692],{"class":549},[532,13455,13456,13458,13460],{"class":534,"line":3219},[532,13457,2148],{"class":549},[532,13459,1978],{"class":664},[532,13461,692],{"class":549},[532,13463,13464,13466,13468,13470,13472,13474,13477,13479],{"class":534,"line":3234},[532,13465,2021],{"class":549},[532,13467,767],{"class":664},[532,13469,669],{"class":668},[532,13471,672],{"class":549},[532,13473,557],{"class":549},[532,13475,13476],{"class":553},"text-lg font-semibold text-gray-900 group-hover:text-emerald-600 transition-colors",[532,13478,557],{"class":549},[532,13480,692],{"class":549},[532,13482,13483],{"class":534,"line":3249},[532,13484,13485],{"class":581},"          Mobile Apps\n",[532,13487,13488,13490,13492],{"class":534,"line":3255},[532,13489,2148],{"class":549},[532,13491,767],{"class":664},[532,13493,692],{"class":549},[532,13495,13496,13498,13500,13502,13504,13506,13508,13510],{"class":534,"line":3284},[532,13497,2021],{"class":549},[532,13499,448],{"class":664},[532,13501,669],{"class":668},[532,13503,672],{"class":549},[532,13505,557],{"class":549},[532,13507,13260],{"class":553},[532,13509,557],{"class":549},[532,13511,692],{"class":549},[532,13513,13514],{"class":534,"line":3313},[532,13515,13516],{"class":581},"          Ứng dụng iOS và Android native, hiệu năng cao, UX mượt mà.\n",[532,13518,13519,13521,13523],{"class":534,"line":3322},[532,13520,2148],{"class":549},[532,13522,448],{"class":664},[532,13524,692],{"class":549},[532,13526,13527,13529,13531],{"class":534,"line":3331},[532,13528,2050],{"class":549},[532,13530,1978],{"class":664},[532,13532,692],{"class":549},[532,13534,13535],{"class":534,"line":3340},[532,13536,567],{"emptyLinePlaceholder":566},[532,13538,13539],{"class":534,"line":4498},[532,13540,13541],{"class":538},"      \u003C!-- Card 3 -->\n",[532,13543,13544,13546,13548,13550,13552,13554],{"class":534,"line":4504},[532,13545,1996],{"class":549},[532,13547,1978],{"class":664},[532,13549,669],{"class":668},[532,13551,672],{"class":549},[532,13553,557],{"class":549},[532,13555,13045],{"class":553},[532,13557,13558],{"class":534,"line":4514},[532,13559,13560],{"class":553},"                  hover:border-purple-400 hover:shadow-lg\n",[532,13562,13563,13565,13567],{"class":534,"line":4520},[532,13564,13055],{"class":553},[532,13566,557],{"class":549},[532,13568,692],{"class":549},[532,13570,13571,13573,13575,13577,13579,13581],{"class":534,"line":4529},[532,13572,2021],{"class":549},[532,13574,1978],{"class":664},[532,13576,669],{"class":668},[532,13578,672],{"class":549},[532,13580,557],{"class":549},[532,13582,13583],{"class":553},"w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4\n",[532,13585,13586,13589,13591],{"class":534,"line":4538},[532,13587,13588],{"class":553},"                    group-hover:bg-purple-200 transition-colors",[532,13590,557],{"class":549},[532,13592,692],{"class":549},[532,13594,13595,13597,13599,13601,13603,13605,13608,13610,13612,13614,13616,13618,13620,13622,13624,13626,13628,13630,13632,13634,13636,13638,13640],{"class":534,"line":4547},[532,13596,5051],{"class":549},[532,13598,13090],{"class":664},[532,13600,669],{"class":668},[532,13602,672],{"class":549},[532,13604,557],{"class":549},[532,13606,13607],{"class":553},"w-6 h-6 text-purple-600",[532,13609,557],{"class":549},[532,13611,13104],{"class":668},[532,13613,672],{"class":549},[532,13615,557],{"class":549},[532,13617,13111],{"class":553},[532,13619,557],{"class":549},[532,13621,13116],{"class":668},[532,13623,672],{"class":549},[532,13625,557],{"class":549},[532,13627,13123],{"class":553},[532,13629,557],{"class":549},[532,13631,13128],{"class":668},[532,13633,672],{"class":549},[532,13635,557],{"class":549},[532,13637,13135],{"class":553},[532,13639,557],{"class":549},[532,13641,692],{"class":549},[532,13643,13644,13646,13648,13650,13652,13654,13656,13658,13660,13662,13664,13666,13668,13670,13672,13674,13676],{"class":534,"line":7784},[532,13645,7509],{"class":549},[532,13647,13146],{"class":664},[532,13649,13149],{"class":668},[532,13651,672],{"class":549},[532,13653,557],{"class":549},[532,13655,13156],{"class":553},[532,13657,557],{"class":549},[532,13659,13161],{"class":668},[532,13661,672],{"class":549},[532,13663,557],{"class":549},[532,13665,13156],{"class":553},[532,13667,557],{"class":549},[532,13669,13172],{"class":668},[532,13671,672],{"class":549},[532,13673,557],{"class":549},[532,13675,13179],{"class":553},[532,13677,2915],{"class":549},[532,13679,13680,13682,13684,13686,13689,13691],{"class":534,"line":7793},[532,13681,13186],{"class":668},[532,13683,672],{"class":549},[532,13685,557],{"class":549},[532,13687,13688],{"class":553},"M13 10V3L4 14h7v7l9-11h-7z",[532,13690,557],{"class":549},[532,13692,1040],{"class":549},[532,13694,13695,13697,13699],{"class":534,"line":7828},[532,13696,7619],{"class":549},[532,13698,13090],{"class":664},[532,13700,692],{"class":549},[532,13702,13703,13705,13707],{"class":534,"line":7863},[532,13704,2148],{"class":549},[532,13706,1978],{"class":664},[532,13708,692],{"class":549},[532,13710,13711,13713,13715,13717,13719,13721,13724,13726],{"class":534,"line":7891},[532,13712,2021],{"class":549},[532,13714,767],{"class":664},[532,13716,669],{"class":668},[532,13718,672],{"class":549},[532,13720,557],{"class":549},[532,13722,13723],{"class":553},"text-lg font-semibold text-gray-900 group-hover:text-purple-600 transition-colors",[532,13725,557],{"class":549},[532,13727,692],{"class":549},[532,13729,13730],{"class":534,"line":7919},[532,13731,13732],{"class":581},"          AI Solutions\n",[532,13734,13735,13737,13739],{"class":534,"line":7928},[532,13736,2148],{"class":549},[532,13738,767],{"class":664},[532,13740,692],{"class":549},[532,13742,13743,13745,13747,13749,13751,13753,13755,13757],{"class":534,"line":7937},[532,13744,2021],{"class":549},[532,13746,448],{"class":664},[532,13748,669],{"class":668},[532,13750,672],{"class":549},[532,13752,557],{"class":549},[532,13754,13260],{"class":553},[532,13756,557],{"class":549},[532,13758,692],{"class":549},[532,13760,13761],{"class":534,"line":7973},[532,13762,13763],{"class":581},"          Tích hợp AI\u002FML vào sản phẩm — chatbot, recommendation, automation.\n",[532,13765,13766,13768,13770],{"class":534,"line":8009},[532,13767,2148],{"class":549},[532,13769,448],{"class":664},[532,13771,692],{"class":549},[532,13773,13774,13776,13778],{"class":534,"line":8037},[532,13775,2050],{"class":549},[532,13777,1978],{"class":664},[532,13779,692],{"class":549},[532,13781,13782,13784,13786],{"class":534,"line":8064},[532,13783,1158],{"class":549},[532,13785,1978],{"class":664},[532,13787,692],{"class":549},[532,13789,13790,13792,13794],{"class":534,"line":8073},[532,13791,1045],{"class":549},[532,13793,1978],{"class":664},[532,13795,692],{"class":549},[532,13797,13798,13800,13802],{"class":534,"line":8082},[532,13799,687],{"class":549},[532,13801,1006],{"class":664},[532,13803,692],{"class":549},[767,13805,13807],{"id":13806},"bài-tập-17-avatar-với-rounded-full-ring","Bài tập 17: Avatar với rounded-full + ring",[448,13809,13810,13812],{},[755,13811,777],{}," Avatar group với ring, online indicator, và stacked layout.",[523,13814,13816],{"className":990,"code":13815,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-md mx-auto p-8 space-y-8\">\n    \u003Ch2 class=\"text-xl font-bold text-gray-900\">Avatar Styles\u003C\u002Fh2>\n\n    \u003C!-- Avatar đơn với ring -->\n    \u003Cdiv class=\"flex items-center gap-4\">\n      \u003Cimg\n        src=\"https:\u002F\u002Fi.pravatar.cc\u002F80?img=1\"\n        alt=\"User\"\n        class=\"w-12 h-12 rounded-full ring-2 ring-white shadow-sm\"\n      \u002F>\n      \u003Cdiv>\n        \u003Cp class=\"text-sm font-semibold text-gray-900\">Nguyen Van A\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-gray-500\">Fullstack Developer\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Avatar với online indicator -->\n    \u003Cdiv class=\"flex items-center gap-4\">\n      \u003Cdiv class=\"relative\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fi.pravatar.cc\u002F80?img=5\"\n          alt=\"User\"\n          class=\"w-12 h-12 rounded-full ring-2 ring-white\"\n        \u002F>\n        \u003Cspan class=\"absolute bottom-0 right-0 w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full\">\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv>\n        \u003Cp class=\"text-sm font-semibold text-gray-900\">Tran Thi B\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-emerald-600 font-medium\">Online\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Avatar với offline indicator -->\n    \u003Cdiv class=\"flex items-center gap-4\">\n      \u003Cdiv class=\"relative\">\n        \u003Cimg\n          src=\"https:\u002F\u002Fi.pravatar.cc\u002F80?img=8\"\n          alt=\"User\"\n          class=\"w-12 h-12 rounded-full ring-2 ring-white\"\n        \u002F>\n        \u003Cspan class=\"absolute bottom-0 right-0 w-3.5 h-3.5 bg-gray-400 border-2 border-white rounded-full\">\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cdiv>\n        \u003Cp class=\"text-sm font-semibold text-gray-900\">Le Van C\u003C\u002Fp>\n        \u003Cp class=\"text-xs text-gray-400\">Offline\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Stacked avatar group -->\n    \u003Cdiv>\n      \u003Cp class=\"text-sm text-gray-500 mb-3\">12 thành viên trong team\u003C\u002Fp>\n      \u003Cdiv class=\"flex -space-x-2\">\n        \u003Cimg src=\"https:\u002F\u002Fi.pravatar.cc\u002F40?img=1\" class=\"w-10 h-10 rounded-full ring-2 ring-white\" alt=\"\" \u002F>\n        \u003Cimg src=\"https:\u002F\u002Fi.pravatar.cc\u002F40?img=2\" class=\"w-10 h-10 rounded-full ring-2 ring-white\" alt=\"\" \u002F>\n        \u003Cimg src=\"https:\u002F\u002Fi.pravatar.cc\u002F40?img=3\" class=\"w-10 h-10 rounded-full ring-2 ring-white\" alt=\"\" \u002F>\n        \u003Cimg src=\"https:\u002F\u002Fi.pravatar.cc\u002F40?img=4\" class=\"w-10 h-10 rounded-full ring-2 ring-white\" alt=\"\" \u002F>\n        \u003Cdiv class=\"w-10 h-10 rounded-full ring-2 ring-white bg-indigo-100 flex items-center justify-center text-xs font-bold text-indigo-600\">\n          +8\n        \u003C\u002Fdiv>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n\n    \u003C!-- Avatar sizes -->\n    \u003Cdiv class=\"flex items-end gap-4\">\n      \u003Cimg src=\"https:\u002F\u002Fi.pravatar.cc\u002F24?img=6\" class=\"w-6 h-6 rounded-full ring-1 ring-white\" alt=\"\" \u002F>\n      \u003Cimg src=\"https:\u002F\u002Fi.pravatar.cc\u002F32?img=6\" class=\"w-8 h-8 rounded-full ring-2 ring-white\" alt=\"\" \u002F>\n      \u003Cimg src=\"https:\u002F\u002Fi.pravatar.cc\u002F48?img=6\" class=\"w-12 h-12 rounded-full ring-2 ring-white\" alt=\"\" \u002F>\n      \u003Cimg src=\"https:\u002F\u002Fi.pravatar.cc\u002F64?img=6\" class=\"w-16 h-16 rounded-full ring-2 ring-white\" alt=\"\" \u002F>\n      \u003Cimg src=\"https:\u002F\u002Fi.pravatar.cc\u002F96?img=6\" class=\"w-24 h-24 rounded-full ring-2 ring-white\" alt=\"\" \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,13817,13818,13826,13845,13872,13876,13881,13900,13906,13919,13932,13945,13949,13957,13984,14012,14020,14028,14032,14037,14055,14074,14080,14093,14105,14118,14122,14145,14153,14161,14188,14216,14224,14232,14236,14241,14259,14277,14283,14296,14308,14320,14324,14347,14355,14363,14390,14417,14425,14433,14437,14442,14450,14478,14497,14536,14571,14606,14641,14660,14665,14673,14681,14689,14693,14698,14717,14753,14789,14824,14860,14896,14904,14912],{"__ignoreMap":528},[532,13819,13820,13822,13824],{"class":534,"line":535},[532,13821,661],{"class":549},[532,13823,1006],{"class":664},[532,13825,692],{"class":549},[532,13827,13828,13830,13832,13834,13836,13838,13841,13843],{"class":534,"line":542},[532,13829,1013],{"class":549},[532,13831,1978],{"class":664},[532,13833,669],{"class":668},[532,13835,672],{"class":549},[532,13837,557],{"class":549},[532,13839,13840],{"class":553},"max-w-md mx-auto p-8 space-y-8",[532,13842,557],{"class":549},[532,13844,692],{"class":549},[532,13846,13847,13849,13851,13853,13855,13857,13859,13861,13863,13866,13868,13870],{"class":534,"line":563},[532,13848,1034],{"class":549},[532,13850,427],{"class":664},[532,13852,669],{"class":668},[532,13854,672],{"class":549},[532,13856,557],{"class":549},[532,13858,12482],{"class":553},[532,13860,557],{"class":549},[532,13862,681],{"class":549},[532,13864,13865],{"class":581},"Avatar Styles",[532,13867,687],{"class":549},[532,13869,427],{"class":664},[532,13871,692],{"class":549},[532,13873,13874],{"class":534,"line":570},[532,13875,567],{"emptyLinePlaceholder":566},[532,13877,13878],{"class":534,"line":578},[532,13879,13880],{"class":538},"    \u003C!-- Avatar đơn với ring -->\n",[532,13882,13883,13885,13887,13889,13891,13893,13896,13898],{"class":534,"line":604},[532,13884,1034],{"class":549},[532,13886,1978],{"class":664},[532,13888,669],{"class":668},[532,13890,672],{"class":549},[532,13892,557],{"class":549},[532,13894,13895],{"class":553},"flex items-center gap-4",[532,13897,557],{"class":549},[532,13899,692],{"class":549},[532,13901,13902,13904],{"class":534,"line":624},[532,13903,1996],{"class":549},[532,13905,2900],{"class":664},[532,13907,13908,13910,13912,13914,13917],{"class":534,"line":640},[532,13909,2905],{"class":668},[532,13911,672],{"class":549},[532,13913,557],{"class":549},[532,13915,13916],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F80?img=1",[532,13918,2915],{"class":549},[532,13920,13921,13923,13925,13927,13930],{"class":534,"line":894},[532,13922,2920],{"class":668},[532,13924,672],{"class":549},[532,13926,557],{"class":549},[532,13928,13929],{"class":553},"User",[532,13931,2915],{"class":549},[532,13933,13934,13936,13938,13940,13943],{"class":534,"line":900},[532,13935,2934],{"class":668},[532,13937,672],{"class":549},[532,13939,557],{"class":549},[532,13941,13942],{"class":553},"w-12 h-12 rounded-full ring-2 ring-white shadow-sm",[532,13944,2915],{"class":549},[532,13946,13947],{"class":534,"line":906},[532,13948,2948],{"class":549},[532,13950,13951,13953,13955],{"class":534,"line":912},[532,13952,1996],{"class":549},[532,13954,1978],{"class":664},[532,13956,692],{"class":549},[532,13958,13959,13961,13963,13965,13967,13969,13972,13974,13976,13978,13980,13982],{"class":534,"line":918},[532,13960,2021],{"class":549},[532,13962,448],{"class":664},[532,13964,669],{"class":668},[532,13966,672],{"class":549},[532,13968,557],{"class":549},[532,13970,13971],{"class":553},"text-sm font-semibold text-gray-900",[532,13973,557],{"class":549},[532,13975,681],{"class":549},[532,13977,3275],{"class":581},[532,13979,687],{"class":549},[532,13981,448],{"class":664},[532,13983,692],{"class":549},[532,13985,13986,13988,13990,13992,13994,13996,13999,14001,14003,14006,14008,14010],{"class":534,"line":1237},[532,13987,2021],{"class":549},[532,13989,448],{"class":664},[532,13991,669],{"class":668},[532,13993,672],{"class":549},[532,13995,557],{"class":549},[532,13997,13998],{"class":553},"text-xs text-gray-500",[532,14000,557],{"class":549},[532,14002,681],{"class":549},[532,14004,14005],{"class":581},"Fullstack Developer",[532,14007,687],{"class":549},[532,14009,448],{"class":664},[532,14011,692],{"class":549},[532,14013,14014,14016,14018],{"class":534,"line":1242},[532,14015,2050],{"class":549},[532,14017,1978],{"class":664},[532,14019,692],{"class":549},[532,14021,14022,14024,14026],{"class":534,"line":1262},[532,14023,1158],{"class":549},[532,14025,1978],{"class":664},[532,14027,692],{"class":549},[532,14029,14030],{"class":534,"line":1268},[532,14031,567],{"emptyLinePlaceholder":566},[532,14033,14034],{"class":534,"line":1274},[532,14035,14036],{"class":538},"    \u003C!-- Avatar với online indicator -->\n",[532,14038,14039,14041,14043,14045,14047,14049,14051,14053],{"class":534,"line":1283},[532,14040,1034],{"class":549},[532,14042,1978],{"class":664},[532,14044,669],{"class":668},[532,14046,672],{"class":549},[532,14048,557],{"class":549},[532,14050,13895],{"class":553},[532,14052,557],{"class":549},[532,14054,692],{"class":549},[532,14056,14057,14059,14061,14063,14065,14067,14070,14072],{"class":534,"line":1288},[532,14058,1996],{"class":549},[532,14060,1978],{"class":664},[532,14062,669],{"class":668},[532,14064,672],{"class":549},[532,14066,557],{"class":549},[532,14068,14069],{"class":553},"relative",[532,14071,557],{"class":549},[532,14073,692],{"class":549},[532,14075,14076,14078],{"class":534,"line":1308},[532,14077,2021],{"class":549},[532,14079,2900],{"class":664},[532,14081,14082,14084,14086,14088,14091],{"class":534,"line":1314},[532,14083,3207],{"class":668},[532,14085,672],{"class":549},[532,14087,557],{"class":549},[532,14089,14090],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F80?img=5",[532,14092,2915],{"class":549},[532,14094,14095,14097,14099,14101,14103],{"class":534,"line":1323},[532,14096,3222],{"class":668},[532,14098,672],{"class":549},[532,14100,557],{"class":549},[532,14102,13929],{"class":553},[532,14104,2915],{"class":549},[532,14106,14107,14109,14111,14113,14116],{"class":534,"line":1332},[532,14108,3237],{"class":668},[532,14110,672],{"class":549},[532,14112,557],{"class":549},[532,14114,14115],{"class":553},"w-12 h-12 rounded-full ring-2 ring-white",[532,14117,2915],{"class":549},[532,14119,14120],{"class":534,"line":3119},[532,14121,3252],{"class":549},[532,14123,14124,14126,14128,14130,14132,14134,14137,14139,14141,14143],{"class":534,"line":3139},[532,14125,2021],{"class":549},[532,14127,532],{"class":664},[532,14129,669],{"class":668},[532,14131,672],{"class":549},[532,14133,557],{"class":549},[532,14135,14136],{"class":553},"absolute bottom-0 right-0 w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full",[532,14138,557],{"class":549},[532,14140,5879],{"class":549},[532,14142,532],{"class":664},[532,14144,692],{"class":549},[532,14146,14147,14149,14151],{"class":534,"line":3145},[532,14148,2050],{"class":549},[532,14150,1978],{"class":664},[532,14152,692],{"class":549},[532,14154,14155,14157,14159],{"class":534,"line":3151},[532,14156,1996],{"class":549},[532,14158,1978],{"class":664},[532,14160,692],{"class":549},[532,14162,14163,14165,14167,14169,14171,14173,14175,14177,14179,14182,14184,14186],{"class":534,"line":3157},[532,14164,2021],{"class":549},[532,14166,448],{"class":664},[532,14168,669],{"class":668},[532,14170,672],{"class":549},[532,14172,557],{"class":549},[532,14174,13971],{"class":553},[532,14176,557],{"class":549},[532,14178,681],{"class":549},[532,14180,14181],{"class":581},"Tran Thi B",[532,14183,687],{"class":549},[532,14185,448],{"class":664},[532,14187,692],{"class":549},[532,14189,14190,14192,14194,14196,14198,14200,14203,14205,14207,14210,14212,14214],{"class":534,"line":3163},[532,14191,2021],{"class":549},[532,14193,448],{"class":664},[532,14195,669],{"class":668},[532,14197,672],{"class":549},[532,14199,557],{"class":549},[532,14201,14202],{"class":553},"text-xs text-emerald-600 font-medium",[532,14204,557],{"class":549},[532,14206,681],{"class":549},[532,14208,14209],{"class":581},"Online",[532,14211,687],{"class":549},[532,14213,448],{"class":664},[532,14215,692],{"class":549},[532,14217,14218,14220,14222],{"class":534,"line":3172},[532,14219,2050],{"class":549},[532,14221,1978],{"class":664},[532,14223,692],{"class":549},[532,14225,14226,14228,14230],{"class":534,"line":3177},[532,14227,1158],{"class":549},[532,14229,1978],{"class":664},[532,14231,692],{"class":549},[532,14233,14234],{"class":534,"line":3197},[532,14235,567],{"emptyLinePlaceholder":566},[532,14237,14238],{"class":534,"line":3204},[532,14239,14240],{"class":538},"    \u003C!-- Avatar với offline indicator -->\n",[532,14242,14243,14245,14247,14249,14251,14253,14255,14257],{"class":534,"line":3219},[532,14244,1034],{"class":549},[532,14246,1978],{"class":664},[532,14248,669],{"class":668},[532,14250,672],{"class":549},[532,14252,557],{"class":549},[532,14254,13895],{"class":553},[532,14256,557],{"class":549},[532,14258,692],{"class":549},[532,14260,14261,14263,14265,14267,14269,14271,14273,14275],{"class":534,"line":3234},[532,14262,1996],{"class":549},[532,14264,1978],{"class":664},[532,14266,669],{"class":668},[532,14268,672],{"class":549},[532,14270,557],{"class":549},[532,14272,14069],{"class":553},[532,14274,557],{"class":549},[532,14276,692],{"class":549},[532,14278,14279,14281],{"class":534,"line":3249},[532,14280,2021],{"class":549},[532,14282,2900],{"class":664},[532,14284,14285,14287,14289,14291,14294],{"class":534,"line":3255},[532,14286,3207],{"class":668},[532,14288,672],{"class":549},[532,14290,557],{"class":549},[532,14292,14293],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F80?img=8",[532,14295,2915],{"class":549},[532,14297,14298,14300,14302,14304,14306],{"class":534,"line":3284},[532,14299,3222],{"class":668},[532,14301,672],{"class":549},[532,14303,557],{"class":549},[532,14305,13929],{"class":553},[532,14307,2915],{"class":549},[532,14309,14310,14312,14314,14316,14318],{"class":534,"line":3313},[532,14311,3237],{"class":668},[532,14313,672],{"class":549},[532,14315,557],{"class":549},[532,14317,14115],{"class":553},[532,14319,2915],{"class":549},[532,14321,14322],{"class":534,"line":3322},[532,14323,3252],{"class":549},[532,14325,14326,14328,14330,14332,14334,14336,14339,14341,14343,14345],{"class":534,"line":3331},[532,14327,2021],{"class":549},[532,14329,532],{"class":664},[532,14331,669],{"class":668},[532,14333,672],{"class":549},[532,14335,557],{"class":549},[532,14337,14338],{"class":553},"absolute bottom-0 right-0 w-3.5 h-3.5 bg-gray-400 border-2 border-white rounded-full",[532,14340,557],{"class":549},[532,14342,5879],{"class":549},[532,14344,532],{"class":664},[532,14346,692],{"class":549},[532,14348,14349,14351,14353],{"class":534,"line":3340},[532,14350,2050],{"class":549},[532,14352,1978],{"class":664},[532,14354,692],{"class":549},[532,14356,14357,14359,14361],{"class":534,"line":4498},[532,14358,1996],{"class":549},[532,14360,1978],{"class":664},[532,14362,692],{"class":549},[532,14364,14365,14367,14369,14371,14373,14375,14377,14379,14381,14384,14386,14388],{"class":534,"line":4504},[532,14366,2021],{"class":549},[532,14368,448],{"class":664},[532,14370,669],{"class":668},[532,14372,672],{"class":549},[532,14374,557],{"class":549},[532,14376,13971],{"class":553},[532,14378,557],{"class":549},[532,14380,681],{"class":549},[532,14382,14383],{"class":581},"Le Van C",[532,14385,687],{"class":549},[532,14387,448],{"class":664},[532,14389,692],{"class":549},[532,14391,14392,14394,14396,14398,14400,14402,14404,14406,14408,14411,14413,14415],{"class":534,"line":4514},[532,14393,2021],{"class":549},[532,14395,448],{"class":664},[532,14397,669],{"class":668},[532,14399,672],{"class":549},[532,14401,557],{"class":549},[532,14403,3045],{"class":553},[532,14405,557],{"class":549},[532,14407,681],{"class":549},[532,14409,14410],{"class":581},"Offline",[532,14412,687],{"class":549},[532,14414,448],{"class":664},[532,14416,692],{"class":549},[532,14418,14419,14421,14423],{"class":534,"line":4520},[532,14420,2050],{"class":549},[532,14422,1978],{"class":664},[532,14424,692],{"class":549},[532,14426,14427,14429,14431],{"class":534,"line":4529},[532,14428,1158],{"class":549},[532,14430,1978],{"class":664},[532,14432,692],{"class":549},[532,14434,14435],{"class":534,"line":4538},[532,14436,567],{"emptyLinePlaceholder":566},[532,14438,14439],{"class":534,"line":4547},[532,14440,14441],{"class":538},"    \u003C!-- Stacked avatar group -->\n",[532,14443,14444,14446,14448],{"class":534,"line":7784},[532,14445,1034],{"class":549},[532,14447,1978],{"class":664},[532,14449,692],{"class":549},[532,14451,14452,14454,14456,14458,14460,14462,14465,14467,14469,14472,14474,14476],{"class":534,"line":7793},[532,14453,1996],{"class":549},[532,14455,448],{"class":664},[532,14457,669],{"class":668},[532,14459,672],{"class":549},[532,14461,557],{"class":549},[532,14463,14464],{"class":553},"text-sm text-gray-500 mb-3",[532,14466,557],{"class":549},[532,14468,681],{"class":549},[532,14470,14471],{"class":581},"12 thành viên trong team",[532,14473,687],{"class":549},[532,14475,448],{"class":664},[532,14477,692],{"class":549},[532,14479,14480,14482,14484,14486,14488,14490,14493,14495],{"class":534,"line":7828},[532,14481,1996],{"class":549},[532,14483,1978],{"class":664},[532,14485,669],{"class":668},[532,14487,672],{"class":549},[532,14489,557],{"class":549},[532,14491,14492],{"class":553},"flex -space-x-2",[532,14494,557],{"class":549},[532,14496,692],{"class":549},[532,14498,14499,14501,14504,14507,14509,14511,14513,14515,14517,14519,14521,14524,14526,14529,14531,14534],{"class":534,"line":7863},[532,14500,2021],{"class":549},[532,14502,14503],{"class":664},"img",[532,14505,14506],{"class":668}," src",[532,14508,672],{"class":549},[532,14510,557],{"class":549},[532,14512,3214],{"class":553},[532,14514,557],{"class":549},[532,14516,669],{"class":668},[532,14518,672],{"class":549},[532,14520,557],{"class":549},[532,14522,14523],{"class":553},"w-10 h-10 rounded-full ring-2 ring-white",[532,14525,557],{"class":549},[532,14527,14528],{"class":668}," alt",[532,14530,672],{"class":549},[532,14532,14533],{"class":549},"\"\"",[532,14535,1040],{"class":549},[532,14537,14538,14540,14542,14544,14546,14548,14551,14553,14555,14557,14559,14561,14563,14565,14567,14569],{"class":534,"line":7891},[532,14539,2021],{"class":549},[532,14541,14503],{"class":664},[532,14543,14506],{"class":668},[532,14545,672],{"class":549},[532,14547,557],{"class":549},[532,14549,14550],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F40?img=2",[532,14552,557],{"class":549},[532,14554,669],{"class":668},[532,14556,672],{"class":549},[532,14558,557],{"class":549},[532,14560,14523],{"class":553},[532,14562,557],{"class":549},[532,14564,14528],{"class":668},[532,14566,672],{"class":549},[532,14568,14533],{"class":549},[532,14570,1040],{"class":549},[532,14572,14573,14575,14577,14579,14581,14583,14586,14588,14590,14592,14594,14596,14598,14600,14602,14604],{"class":534,"line":7919},[532,14574,2021],{"class":549},[532,14576,14503],{"class":664},[532,14578,14506],{"class":668},[532,14580,672],{"class":549},[532,14582,557],{"class":549},[532,14584,14585],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F40?img=3",[532,14587,557],{"class":549},[532,14589,669],{"class":668},[532,14591,672],{"class":549},[532,14593,557],{"class":549},[532,14595,14523],{"class":553},[532,14597,557],{"class":549},[532,14599,14528],{"class":668},[532,14601,672],{"class":549},[532,14603,14533],{"class":549},[532,14605,1040],{"class":549},[532,14607,14608,14610,14612,14614,14616,14618,14621,14623,14625,14627,14629,14631,14633,14635,14637,14639],{"class":534,"line":7928},[532,14609,2021],{"class":549},[532,14611,14503],{"class":664},[532,14613,14506],{"class":668},[532,14615,672],{"class":549},[532,14617,557],{"class":549},[532,14619,14620],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F40?img=4",[532,14622,557],{"class":549},[532,14624,669],{"class":668},[532,14626,672],{"class":549},[532,14628,557],{"class":549},[532,14630,14523],{"class":553},[532,14632,557],{"class":549},[532,14634,14528],{"class":668},[532,14636,672],{"class":549},[532,14638,14533],{"class":549},[532,14640,1040],{"class":549},[532,14642,14643,14645,14647,14649,14651,14653,14656,14658],{"class":534,"line":7937},[532,14644,2021],{"class":549},[532,14646,1978],{"class":664},[532,14648,669],{"class":668},[532,14650,672],{"class":549},[532,14652,557],{"class":549},[532,14654,14655],{"class":553},"w-10 h-10 rounded-full ring-2 ring-white bg-indigo-100 flex items-center justify-center text-xs font-bold text-indigo-600",[532,14657,557],{"class":549},[532,14659,692],{"class":549},[532,14661,14662],{"class":534,"line":7973},[532,14663,14664],{"class":581},"          +8\n",[532,14666,14667,14669,14671],{"class":534,"line":8009},[532,14668,2148],{"class":549},[532,14670,1978],{"class":664},[532,14672,692],{"class":549},[532,14674,14675,14677,14679],{"class":534,"line":8037},[532,14676,2050],{"class":549},[532,14678,1978],{"class":664},[532,14680,692],{"class":549},[532,14682,14683,14685,14687],{"class":534,"line":8064},[532,14684,1158],{"class":549},[532,14686,1978],{"class":664},[532,14688,692],{"class":549},[532,14690,14691],{"class":534,"line":8073},[532,14692,567],{"emptyLinePlaceholder":566},[532,14694,14695],{"class":534,"line":8082},[532,14696,14697],{"class":538},"    \u003C!-- Avatar sizes -->\n",[532,14699,14700,14702,14704,14706,14708,14710,14713,14715],{"class":534,"line":8118},[532,14701,1034],{"class":549},[532,14703,1978],{"class":664},[532,14705,669],{"class":668},[532,14707,672],{"class":549},[532,14709,557],{"class":549},[532,14711,14712],{"class":553},"flex items-end gap-4",[532,14714,557],{"class":549},[532,14716,692],{"class":549},[532,14718,14719,14721,14723,14725,14727,14729,14732,14734,14736,14738,14740,14743,14745,14747,14749,14751],{"class":534,"line":8153},[532,14720,1996],{"class":549},[532,14722,14503],{"class":664},[532,14724,14506],{"class":668},[532,14726,672],{"class":549},[532,14728,557],{"class":549},[532,14730,14731],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F24?img=6",[532,14733,557],{"class":549},[532,14735,669],{"class":668},[532,14737,672],{"class":549},[532,14739,557],{"class":549},[532,14741,14742],{"class":553},"w-6 h-6 rounded-full ring-1 ring-white",[532,14744,557],{"class":549},[532,14746,14528],{"class":668},[532,14748,672],{"class":549},[532,14750,14533],{"class":549},[532,14752,1040],{"class":549},[532,14754,14755,14757,14759,14761,14763,14765,14768,14770,14772,14774,14776,14779,14781,14783,14785,14787],{"class":534,"line":8181},[532,14756,1996],{"class":549},[532,14758,14503],{"class":664},[532,14760,14506],{"class":668},[532,14762,672],{"class":549},[532,14764,557],{"class":549},[532,14766,14767],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F32?img=6",[532,14769,557],{"class":549},[532,14771,669],{"class":668},[532,14773,672],{"class":549},[532,14775,557],{"class":549},[532,14777,14778],{"class":553},"w-8 h-8 rounded-full ring-2 ring-white",[532,14780,557],{"class":549},[532,14782,14528],{"class":668},[532,14784,672],{"class":549},[532,14786,14533],{"class":549},[532,14788,1040],{"class":549},[532,14790,14791,14793,14795,14797,14799,14801,14804,14806,14808,14810,14812,14814,14816,14818,14820,14822],{"class":534,"line":8210},[532,14792,1996],{"class":549},[532,14794,14503],{"class":664},[532,14796,14506],{"class":668},[532,14798,672],{"class":549},[532,14800,557],{"class":549},[532,14802,14803],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F48?img=6",[532,14805,557],{"class":549},[532,14807,669],{"class":668},[532,14809,672],{"class":549},[532,14811,557],{"class":549},[532,14813,14115],{"class":553},[532,14815,557],{"class":549},[532,14817,14528],{"class":668},[532,14819,672],{"class":549},[532,14821,14533],{"class":549},[532,14823,1040],{"class":549},[532,14825,14826,14828,14830,14832,14834,14836,14839,14841,14843,14845,14847,14850,14852,14854,14856,14858],{"class":534,"line":8219},[532,14827,1996],{"class":549},[532,14829,14503],{"class":664},[532,14831,14506],{"class":668},[532,14833,672],{"class":549},[532,14835,557],{"class":549},[532,14837,14838],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F64?img=6",[532,14840,557],{"class":549},[532,14842,669],{"class":668},[532,14844,672],{"class":549},[532,14846,557],{"class":549},[532,14848,14849],{"class":553},"w-16 h-16 rounded-full ring-2 ring-white",[532,14851,557],{"class":549},[532,14853,14528],{"class":668},[532,14855,672],{"class":549},[532,14857,14533],{"class":549},[532,14859,1040],{"class":549},[532,14861,14862,14864,14866,14868,14870,14872,14875,14877,14879,14881,14883,14886,14888,14890,14892,14894],{"class":534,"line":8228},[532,14863,1996],{"class":549},[532,14865,14503],{"class":664},[532,14867,14506],{"class":668},[532,14869,672],{"class":549},[532,14871,557],{"class":549},[532,14873,14874],{"class":553},"https:\u002F\u002Fi.pravatar.cc\u002F96?img=6",[532,14876,557],{"class":549},[532,14878,669],{"class":668},[532,14880,672],{"class":549},[532,14882,557],{"class":549},[532,14884,14885],{"class":553},"w-24 h-24 rounded-full ring-2 ring-white",[532,14887,557],{"class":549},[532,14889,14528],{"class":668},[532,14891,672],{"class":549},[532,14893,14533],{"class":549},[532,14895,1040],{"class":549},[532,14897,14898,14900,14902],{"class":534,"line":8264},[532,14899,1158],{"class":549},[532,14901,1978],{"class":664},[532,14903,692],{"class":549},[532,14905,14906,14908,14910],{"class":534,"line":8299},[532,14907,1045],{"class":549},[532,14909,1978],{"class":664},[532,14911,692],{"class":549},[532,14913,14914,14916,14918],{"class":534,"line":8327},[532,14915,687],{"class":549},[532,14917,1006],{"class":664},[532,14919,692],{"class":549},[1340,14921],{},[427,14923,14925],{"id":14924},"_10-divide-box-shadow","10. Divide & Box Shadow",[767,14927,14929],{"id":14928},"divide","Divide",[523,14931,14933],{"className":652,"code":14932,"language":654,"meta":528,"style":528},"\u003C!-- Divide ngang giữa các item -->\n\u003Cul class=\"divide-y divide-gray-200\">\n  \u003Cli class=\"py-3\">Item 1\u003C\u002Fli>\n  \u003Cli class=\"py-3\">Item 2\u003C\u002Fli>\n  \u003Cli class=\"py-3\">Item 3\u003C\u002Fli>\n\u003C\u002Ful>\n\n\u003C!-- Divide dọc giữa các item trong flex row -->\n\u003Cdiv class=\"flex divide-x divide-gray-300\">\n  \u003Cdiv class=\"px-4\">Column 1\u003C\u002Fdiv>\n  \u003Cdiv class=\"px-4\">Column 2\u003C\u002Fdiv>\n  \u003Cdiv class=\"px-4\">Column 3\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- Đảo chiều divide -->\n\u003Cdiv class=\"flex flex-row-reverse divide-x divide-x-reverse\">\n  \u003Cdiv class=\"px-4\">RTL column\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[432,14934,14935,14940,14958,14986,15013,15040,15048,15052,15057,15076,15104,15131,15158,15166,15170,15175,15194,15221],{"__ignoreMap":528},[532,14936,14937],{"class":534,"line":535},[532,14938,14939],{"class":538},"\u003C!-- Divide ngang giữa các item -->\n",[532,14941,14942,14944,14946,14948,14950,14952,14954,14956],{"class":534,"line":542},[532,14943,661],{"class":549},[532,14945,1068],{"class":664},[532,14947,669],{"class":668},[532,14949,672],{"class":549},[532,14951,557],{"class":549},[532,14953,10872],{"class":553},[532,14955,557],{"class":549},[532,14957,692],{"class":549},[532,14959,14960,14962,14964,14966,14968,14970,14973,14975,14977,14980,14982,14984],{"class":534,"line":563},[532,14961,1013],{"class":549},[532,14963,1071],{"class":664},[532,14965,669],{"class":668},[532,14967,672],{"class":549},[532,14969,557],{"class":549},[532,14971,14972],{"class":553},"py-3",[532,14974,557],{"class":549},[532,14976,681],{"class":549},[532,14978,14979],{"class":581},"Item 1",[532,14981,687],{"class":549},[532,14983,1071],{"class":664},[532,14985,692],{"class":549},[532,14987,14988,14990,14992,14994,14996,14998,15000,15002,15004,15007,15009,15011],{"class":534,"line":570},[532,14989,1013],{"class":549},[532,14991,1071],{"class":664},[532,14993,669],{"class":668},[532,14995,672],{"class":549},[532,14997,557],{"class":549},[532,14999,14972],{"class":553},[532,15001,557],{"class":549},[532,15003,681],{"class":549},[532,15005,15006],{"class":581},"Item 2",[532,15008,687],{"class":549},[532,15010,1071],{"class":664},[532,15012,692],{"class":549},[532,15014,15015,15017,15019,15021,15023,15025,15027,15029,15031,15034,15036,15038],{"class":534,"line":578},[532,15016,1013],{"class":549},[532,15018,1071],{"class":664},[532,15020,669],{"class":668},[532,15022,672],{"class":549},[532,15024,557],{"class":549},[532,15026,14972],{"class":553},[532,15028,557],{"class":549},[532,15030,681],{"class":549},[532,15032,15033],{"class":581},"Item 3",[532,15035,687],{"class":549},[532,15037,1071],{"class":664},[532,15039,692],{"class":549},[532,15041,15042,15044,15046],{"class":534,"line":604},[532,15043,687],{"class":549},[532,15045,1068],{"class":664},[532,15047,692],{"class":549},[532,15049,15050],{"class":534,"line":624},[532,15051,567],{"emptyLinePlaceholder":566},[532,15053,15054],{"class":534,"line":640},[532,15055,15056],{"class":538},"\u003C!-- Divide dọc giữa các item trong flex row -->\n",[532,15058,15059,15061,15063,15065,15067,15069,15072,15074],{"class":534,"line":894},[532,15060,661],{"class":549},[532,15062,1978],{"class":664},[532,15064,669],{"class":668},[532,15066,672],{"class":549},[532,15068,557],{"class":549},[532,15070,15071],{"class":553},"flex divide-x divide-gray-300",[532,15073,557],{"class":549},[532,15075,692],{"class":549},[532,15077,15078,15080,15082,15084,15086,15088,15091,15093,15095,15098,15100,15102],{"class":534,"line":900},[532,15079,1013],{"class":549},[532,15081,1978],{"class":664},[532,15083,669],{"class":668},[532,15085,672],{"class":549},[532,15087,557],{"class":549},[532,15089,15090],{"class":553},"px-4",[532,15092,557],{"class":549},[532,15094,681],{"class":549},[532,15096,15097],{"class":581},"Column 1",[532,15099,687],{"class":549},[532,15101,1978],{"class":664},[532,15103,692],{"class":549},[532,15105,15106,15108,15110,15112,15114,15116,15118,15120,15122,15125,15127,15129],{"class":534,"line":906},[532,15107,1013],{"class":549},[532,15109,1978],{"class":664},[532,15111,669],{"class":668},[532,15113,672],{"class":549},[532,15115,557],{"class":549},[532,15117,15090],{"class":553},[532,15119,557],{"class":549},[532,15121,681],{"class":549},[532,15123,15124],{"class":581},"Column 2",[532,15126,687],{"class":549},[532,15128,1978],{"class":664},[532,15130,692],{"class":549},[532,15132,15133,15135,15137,15139,15141,15143,15145,15147,15149,15152,15154,15156],{"class":534,"line":912},[532,15134,1013],{"class":549},[532,15136,1978],{"class":664},[532,15138,669],{"class":668},[532,15140,672],{"class":549},[532,15142,557],{"class":549},[532,15144,15090],{"class":553},[532,15146,557],{"class":549},[532,15148,681],{"class":549},[532,15150,15151],{"class":581},"Column 3",[532,15153,687],{"class":549},[532,15155,1978],{"class":664},[532,15157,692],{"class":549},[532,15159,15160,15162,15164],{"class":534,"line":918},[532,15161,687],{"class":549},[532,15163,1978],{"class":664},[532,15165,692],{"class":549},[532,15167,15168],{"class":534,"line":1237},[532,15169,567],{"emptyLinePlaceholder":566},[532,15171,15172],{"class":534,"line":1242},[532,15173,15174],{"class":538},"\u003C!-- Đảo chiều divide -->\n",[532,15176,15177,15179,15181,15183,15185,15187,15190,15192],{"class":534,"line":1262},[532,15178,661],{"class":549},[532,15180,1978],{"class":664},[532,15182,669],{"class":668},[532,15184,672],{"class":549},[532,15186,557],{"class":549},[532,15188,15189],{"class":553},"flex flex-row-reverse divide-x divide-x-reverse",[532,15191,557],{"class":549},[532,15193,692],{"class":549},[532,15195,15196,15198,15200,15202,15204,15206,15208,15210,15212,15215,15217,15219],{"class":534,"line":1268},[532,15197,1013],{"class":549},[532,15199,1978],{"class":664},[532,15201,669],{"class":668},[532,15203,672],{"class":549},[532,15205,557],{"class":549},[532,15207,15090],{"class":553},[532,15209,557],{"class":549},[532,15211,681],{"class":549},[532,15213,15214],{"class":581},"RTL column",[532,15216,687],{"class":549},[532,15218,1978],{"class":664},[532,15220,692],{"class":549},[532,15222,15223,15225,15227],{"class":534,"line":1274},[532,15224,687],{"class":549},[532,15226,1978],{"class":664},[532,15228,692],{"class":549},[767,15230,15232],{"id":15231},"box-shadow","Box Shadow",[523,15234,15236],{"className":652,"code":15235,"language":654,"meta":528,"style":528},"\u003Cdiv class=\"shadow-sm\">Shadow nhỏ — card tinh tế\u003C\u002Fdiv>\n\u003Cdiv class=\"shadow\">Shadow vừa (default)\u003C\u002Fdiv>\n\u003Cdiv class=\"shadow-md\">Shadow trung bình — card nổi\u003C\u002Fdiv>\n\u003Cdiv class=\"shadow-lg\">Shadow lớn — modal, dropdown\u003C\u002Fdiv>\n\u003Cdiv class=\"shadow-xl\">Shadow XL — elevated component\u003C\u002Fdiv>\n\u003Cdiv class=\"shadow-2xl\">Shadow 2XL — floating element\u003C\u002Fdiv>\n\u003Cdiv class=\"shadow-inner\">Shadow bên trong\u003C\u002Fdiv>\n\u003Cdiv class=\"shadow-none\">Không shadow\u003C\u002Fdiv>\n",[432,15237,15238,15266,15294,15322,15350,15378,15406,15433],{"__ignoreMap":528},[532,15239,15240,15242,15244,15246,15248,15250,15253,15255,15257,15260,15262,15264],{"class":534,"line":535},[532,15241,661],{"class":549},[532,15243,1978],{"class":664},[532,15245,669],{"class":668},[532,15247,672],{"class":549},[532,15249,557],{"class":549},[532,15251,15252],{"class":553},"shadow-sm",[532,15254,557],{"class":549},[532,15256,681],{"class":549},[532,15258,15259],{"class":581},"Shadow nhỏ — card tinh tế",[532,15261,687],{"class":549},[532,15263,1978],{"class":664},[532,15265,692],{"class":549},[532,15267,15268,15270,15272,15274,15276,15278,15281,15283,15285,15288,15290,15292],{"class":534,"line":542},[532,15269,661],{"class":549},[532,15271,1978],{"class":664},[532,15273,669],{"class":668},[532,15275,672],{"class":549},[532,15277,557],{"class":549},[532,15279,15280],{"class":553},"shadow",[532,15282,557],{"class":549},[532,15284,681],{"class":549},[532,15286,15287],{"class":581},"Shadow vừa (default)",[532,15289,687],{"class":549},[532,15291,1978],{"class":664},[532,15293,692],{"class":549},[532,15295,15296,15298,15300,15302,15304,15306,15309,15311,15313,15316,15318,15320],{"class":534,"line":563},[532,15297,661],{"class":549},[532,15299,1978],{"class":664},[532,15301,669],{"class":668},[532,15303,672],{"class":549},[532,15305,557],{"class":549},[532,15307,15308],{"class":553},"shadow-md",[532,15310,557],{"class":549},[532,15312,681],{"class":549},[532,15314,15315],{"class":581},"Shadow trung bình — card nổi",[532,15317,687],{"class":549},[532,15319,1978],{"class":664},[532,15321,692],{"class":549},[532,15323,15324,15326,15328,15330,15332,15334,15337,15339,15341,15344,15346,15348],{"class":534,"line":570},[532,15325,661],{"class":549},[532,15327,1978],{"class":664},[532,15329,669],{"class":668},[532,15331,672],{"class":549},[532,15333,557],{"class":549},[532,15335,15336],{"class":553},"shadow-lg",[532,15338,557],{"class":549},[532,15340,681],{"class":549},[532,15342,15343],{"class":581},"Shadow lớn — modal, dropdown",[532,15345,687],{"class":549},[532,15347,1978],{"class":664},[532,15349,692],{"class":549},[532,15351,15352,15354,15356,15358,15360,15362,15365,15367,15369,15372,15374,15376],{"class":534,"line":578},[532,15353,661],{"class":549},[532,15355,1978],{"class":664},[532,15357,669],{"class":668},[532,15359,672],{"class":549},[532,15361,557],{"class":549},[532,15363,15364],{"class":553},"shadow-xl",[532,15366,557],{"class":549},[532,15368,681],{"class":549},[532,15370,15371],{"class":581},"Shadow XL — elevated component",[532,15373,687],{"class":549},[532,15375,1978],{"class":664},[532,15377,692],{"class":549},[532,15379,15380,15382,15384,15386,15388,15390,15393,15395,15397,15400,15402,15404],{"class":534,"line":604},[532,15381,661],{"class":549},[532,15383,1978],{"class":664},[532,15385,669],{"class":668},[532,15387,672],{"class":549},[532,15389,557],{"class":549},[532,15391,15392],{"class":553},"shadow-2xl",[532,15394,557],{"class":549},[532,15396,681],{"class":549},[532,15398,15399],{"class":581},"Shadow 2XL — floating element",[532,15401,687],{"class":549},[532,15403,1978],{"class":664},[532,15405,692],{"class":549},[532,15407,15408,15410,15412,15414,15416,15418,15420,15422,15424,15427,15429,15431],{"class":534,"line":624},[532,15409,661],{"class":549},[532,15411,1978],{"class":664},[532,15413,669],{"class":668},[532,15415,672],{"class":549},[532,15417,557],{"class":549},[532,15419,12333],{"class":553},[532,15421,557],{"class":549},[532,15423,681],{"class":549},[532,15425,15426],{"class":581},"Shadow bên trong",[532,15428,687],{"class":549},[532,15430,1978],{"class":664},[532,15432,692],{"class":549},[532,15434,15435,15437,15439,15441,15443,15445,15448,15450,15452,15454,15456,15458],{"class":534,"line":640},[532,15436,661],{"class":549},[532,15438,1978],{"class":664},[532,15440,669],{"class":668},[532,15442,672],{"class":549},[532,15444,557],{"class":549},[532,15446,15447],{"class":553},"shadow-none",[532,15449,557],{"class":549},[532,15451,681],{"class":549},[532,15453,5617],{"class":581},[532,15455,687],{"class":549},[532,15457,1978],{"class":664},[532,15459,692],{"class":549},[523,15461,15463],{"className":525,"code":15462,"language":527,"meta":528,"style":528},"\u002F* Custom shadow trong @theme *\u002F\n@theme {\n  --shadow-card: 0 2px 15px -3px rgba(0, 0, 0, 0.07),\n                 0 10px 20px -2px rgba(0, 0, 0, 0.04);\n  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);\n}\n",[432,15464,15465,15470,15476,15501,15525,15551],{"__ignoreMap":528},[532,15466,15467],{"class":534,"line":535},[532,15468,15469],{"class":538},"\u002F* Custom shadow trong @theme *\u002F\n",[532,15471,15472,15474],{"class":534,"line":542},[532,15473,445],{"class":545},[532,15475,575],{"class":549},[532,15477,15478,15481,15483,15485,15487,15489,15491,15493,15495,15498],{"class":534,"line":563},[532,15479,15480],{"class":581},"  --shadow-card: 0 2px 15px -3px rgba(0",[532,15482,585],{"class":549},[532,15484,5659],{"class":581},[532,15486,585],{"class":549},[532,15488,5659],{"class":581},[532,15490,585],{"class":549},[532,15492,5659],{"class":581},[532,15494,4879],{"class":549},[532,15496,15497],{"class":588},"07",[532,15499,15500],{"class":581},"),\n",[532,15502,15503,15506,15508,15510,15512,15514,15516,15518,15520,15523],{"class":534,"line":570},[532,15504,15505],{"class":581},"                 0 10px 20px -2px rgba(0",[532,15507,585],{"class":549},[532,15509,5659],{"class":581},[532,15511,585],{"class":549},[532,15513,5659],{"class":581},[532,15515,585],{"class":549},[532,15517,5659],{"class":581},[532,15519,4879],{"class":549},[532,15521,15522],{"class":588},"04",[532,15524,5667],{"class":581},[532,15526,15527,15530,15532,15535,15537,15540,15542,15544,15546,15549],{"class":534,"line":578},[532,15528,15529],{"class":581},"  --shadow-glow: 0 0 20px rgba(99",[532,15531,585],{"class":549},[532,15533,15534],{"class":581}," 102",[532,15536,585],{"class":549},[532,15538,15539],{"class":581}," 241",[532,15541,585],{"class":549},[532,15543,5659],{"class":581},[532,15545,4879],{"class":549},[532,15547,15548],{"class":588},"3",[532,15550,5667],{"class":581},[532,15552,15553],{"class":534,"line":604},[532,15554,643],{"class":549},[767,15556,15558],{"id":15557},"bài-tập-18-stacked-list-với-divider-lines","Bài tập 18: Stacked list với divider lines",[448,15560,15561,15563],{},[755,15562,777],{}," Danh sách notification với divider giữa các item.",[523,15565,15567],{"className":990,"code":15566,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-lg mx-auto p-8\">\n    \u003Cdiv class=\"bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden\">\n      \u003C!-- Header -->\n      \u003Cdiv class=\"px-5 py-4 border-b border-gray-200\">\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900\">Thông báo\u003C\u002Fh3>\n      \u003C\u002Fdiv>\n\n      \u003C!-- List với divide -->\n      \u003Cul class=\"divide-y divide-gray-100\">\n        \u003Cli class=\"px-5 py-4 hover:bg-gray-50 transition-colors cursor-pointer\">\n          \u003Cdiv class=\"flex items-start gap-3\">\n            \u003Cdiv class=\"flex-shrink-0 w-9 h-9 bg-blue-100 rounded-full flex items-center justify-center\">\n              \u003Cspan class=\"text-blue-600 text-sm\">💬\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"flex-1 min-w-0\">\n              \u003Cp class=\"text-sm font-medium text-gray-900\">Bình luận mới\u003C\u002Fp>\n              \u003Cp class=\"text-sm text-gray-600 truncate\">Nguyen Van A đã bình luận vào bài viết của bạn\u003C\u002Fp>\n              \u003Cp class=\"text-xs text-gray-400 mt-1\">5 phút trước\u003C\u002Fp>\n            \u003C\u002Fdiv>\n            \u003Cspan class=\"flex-shrink-0 w-2 h-2 bg-blue-500 rounded-full mt-2\">\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n        \u003C\u002Fli>\n\n        \u003Cli class=\"px-5 py-4 hover:bg-gray-50 transition-colors cursor-pointer\">\n          \u003Cdiv class=\"flex items-start gap-3\">\n            \u003Cdiv class=\"flex-shrink-0 w-9 h-9 bg-emerald-100 rounded-full flex items-center justify-center\">\n              \u003Cspan class=\"text-emerald-600 text-sm\">✓\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"flex-1 min-w-0\">\n              \u003Cp class=\"text-sm font-medium text-gray-900\">Deploy thành công\u003C\u002Fp>\n              \u003Cp class=\"text-sm text-gray-600 truncate\">Production build #142 đã deploy thành công\u003C\u002Fp>\n              \u003Cp class=\"text-xs text-gray-400 mt-1\">1 giờ trước\u003C\u002Fp>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fli>\n\n        \u003Cli class=\"px-5 py-4 hover:bg-gray-50 transition-colors cursor-pointer\">\n          \u003Cdiv class=\"flex items-start gap-3\">\n            \u003Cdiv class=\"flex-shrink-0 w-9 h-9 bg-amber-100 rounded-full flex items-center justify-center\">\n              \u003Cspan class=\"text-amber-600 text-sm\">⚠\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"flex-1 min-w-0\">\n              \u003Cp class=\"text-sm font-medium text-gray-900\">Cảnh báo billing\u003C\u002Fp>\n              \u003Cp class=\"text-sm text-gray-600 truncate\">Gói Pro của bạn sẽ hết hạn sau 3 ngày\u003C\u002Fp>\n              \u003Cp class=\"text-xs text-gray-400 mt-1\">3 giờ trước\u003C\u002Fp>\n            \u003C\u002Fdiv>\n            \u003Cspan class=\"flex-shrink-0 w-2 h-2 bg-amber-500 rounded-full mt-2\">\u003C\u002Fspan>\n          \u003C\u002Fdiv>\n        \u003C\u002Fli>\n\n        \u003Cli class=\"px-5 py-4 hover:bg-gray-50 transition-colors cursor-pointer\">\n          \u003Cdiv class=\"flex items-start gap-3\">\n            \u003Cdiv class=\"flex-shrink-0 w-9 h-9 bg-purple-100 rounded-full flex items-center justify-center\">\n              \u003Cspan class=\"text-purple-600 text-sm\">🚀\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003Cdiv class=\"flex-1 min-w-0\">\n              \u003Cp class=\"text-sm font-medium text-gray-900\">Tính năng mới\u003C\u002Fp>\n              \u003Cp class=\"text-sm text-gray-600 truncate\">AI code review đã sẵn sàng trên workspace của bạn\u003C\u002Fp>\n              \u003Cp class=\"text-xs text-gray-400 mt-1\">1 ngày trước\u003C\u002Fp>\n            \u003C\u002Fdiv>\n          \u003C\u002Fdiv>\n        \u003C\u002Fli>\n      \u003C\u002Ful>\n\n      \u003C!-- Footer -->\n      \u003Cdiv class=\"px-5 py-3 border-t border-gray-200 bg-gray-50\">\n        \u003Cbutton class=\"text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors\">\n          Xem tất cả thông báo\n        \u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,15568,15569,15577,15596,15615,15620,15639,15667,15675,15679,15684,15703,15722,15740,15759,15787,15795,15814,15842,15870,15898,15906,15929,15937,15945,15949,15967,15985,16004,16031,16039,16057,16084,16111,16138,16146,16154,16162,16166,16184,16202,16221,16249,16257,16275,16302,16329,16356,16364,16387,16395,16403,16407,16425,16443,16462,16490,16498,16516,16543,16570,16597,16605,16613,16621,16629,16633,16638,16657,16676,16681,16689,16697,16705,16713],{"__ignoreMap":528},[532,15570,15571,15573,15575],{"class":534,"line":535},[532,15572,661],{"class":549},[532,15574,1006],{"class":664},[532,15576,692],{"class":549},[532,15578,15579,15581,15583,15585,15587,15589,15592,15594],{"class":534,"line":542},[532,15580,1013],{"class":549},[532,15582,1978],{"class":664},[532,15584,669],{"class":668},[532,15586,672],{"class":549},[532,15588,557],{"class":549},[532,15590,15591],{"class":553},"max-w-lg mx-auto p-8",[532,15593,557],{"class":549},[532,15595,692],{"class":549},[532,15597,15598,15600,15602,15604,15606,15608,15611,15613],{"class":534,"line":563},[532,15599,1034],{"class":549},[532,15601,1978],{"class":664},[532,15603,669],{"class":668},[532,15605,672],{"class":549},[532,15607,557],{"class":549},[532,15609,15610],{"class":553},"bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden",[532,15612,557],{"class":549},[532,15614,692],{"class":549},[532,15616,15617],{"class":534,"line":570},[532,15618,15619],{"class":538},"      \u003C!-- Header -->\n",[532,15621,15622,15624,15626,15628,15630,15632,15635,15637],{"class":534,"line":578},[532,15623,1996],{"class":549},[532,15625,1978],{"class":664},[532,15627,669],{"class":668},[532,15629,672],{"class":549},[532,15631,557],{"class":549},[532,15633,15634],{"class":553},"px-5 py-4 border-b border-gray-200",[532,15636,557],{"class":549},[532,15638,692],{"class":549},[532,15640,15641,15643,15645,15647,15649,15651,15654,15656,15658,15661,15663,15665],{"class":534,"line":604},[532,15642,2021],{"class":549},[532,15644,767],{"class":664},[532,15646,669],{"class":668},[532,15648,672],{"class":549},[532,15650,557],{"class":549},[532,15652,15653],{"class":553},"text-lg font-semibold text-gray-900",[532,15655,557],{"class":549},[532,15657,681],{"class":549},[532,15659,15660],{"class":581},"Thông báo",[532,15662,687],{"class":549},[532,15664,767],{"class":664},[532,15666,692],{"class":549},[532,15668,15669,15671,15673],{"class":534,"line":624},[532,15670,2050],{"class":549},[532,15672,1978],{"class":664},[532,15674,692],{"class":549},[532,15676,15677],{"class":534,"line":640},[532,15678,567],{"emptyLinePlaceholder":566},[532,15680,15681],{"class":534,"line":894},[532,15682,15683],{"class":538},"      \u003C!-- List với divide -->\n",[532,15685,15686,15688,15690,15692,15694,15696,15699,15701],{"class":534,"line":900},[532,15687,1996],{"class":549},[532,15689,1068],{"class":664},[532,15691,669],{"class":668},[532,15693,672],{"class":549},[532,15695,557],{"class":549},[532,15697,15698],{"class":553},"divide-y divide-gray-100",[532,15700,557],{"class":549},[532,15702,692],{"class":549},[532,15704,15705,15707,15709,15711,15713,15715,15718,15720],{"class":534,"line":906},[532,15706,2021],{"class":549},[532,15708,1071],{"class":664},[532,15710,669],{"class":668},[532,15712,672],{"class":549},[532,15714,557],{"class":549},[532,15716,15717],{"class":553},"px-5 py-4 hover:bg-gray-50 transition-colors cursor-pointer",[532,15719,557],{"class":549},[532,15721,692],{"class":549},[532,15723,15724,15726,15728,15730,15732,15734,15736,15738],{"class":534,"line":912},[532,15725,5051],{"class":549},[532,15727,1978],{"class":664},[532,15729,669],{"class":668},[532,15731,672],{"class":549},[532,15733,557],{"class":549},[532,15735,4991],{"class":553},[532,15737,557],{"class":549},[532,15739,692],{"class":549},[532,15741,15742,15744,15746,15748,15750,15752,15755,15757],{"class":534,"line":918},[532,15743,7509],{"class":549},[532,15745,1978],{"class":664},[532,15747,669],{"class":668},[532,15749,672],{"class":549},[532,15751,557],{"class":549},[532,15753,15754],{"class":553},"flex-shrink-0 w-9 h-9 bg-blue-100 rounded-full flex items-center justify-center",[532,15756,557],{"class":549},[532,15758,692],{"class":549},[532,15760,15761,15763,15765,15767,15769,15771,15774,15776,15778,15781,15783,15785],{"class":534,"line":1237},[532,15762,10947],{"class":549},[532,15764,532],{"class":664},[532,15766,669],{"class":668},[532,15768,672],{"class":549},[532,15770,557],{"class":549},[532,15772,15773],{"class":553},"text-blue-600 text-sm",[532,15775,557],{"class":549},[532,15777,681],{"class":549},[532,15779,15780],{"class":581},"💬",[532,15782,687],{"class":549},[532,15784,532],{"class":664},[532,15786,692],{"class":549},[532,15788,15789,15791,15793],{"class":534,"line":1242},[532,15790,10976],{"class":549},[532,15792,1978],{"class":664},[532,15794,692],{"class":549},[532,15796,15797,15799,15801,15803,15805,15807,15810,15812],{"class":534,"line":1262},[532,15798,7509],{"class":549},[532,15800,1978],{"class":664},[532,15802,669],{"class":668},[532,15804,672],{"class":549},[532,15806,557],{"class":549},[532,15808,15809],{"class":553},"flex-1 min-w-0",[532,15811,557],{"class":549},[532,15813,692],{"class":549},[532,15815,15816,15818,15820,15822,15824,15826,15829,15831,15833,15836,15838,15840],{"class":534,"line":1268},[532,15817,10947],{"class":549},[532,15819,448],{"class":664},[532,15821,669],{"class":668},[532,15823,672],{"class":549},[532,15825,557],{"class":549},[532,15827,15828],{"class":553},"text-sm font-medium text-gray-900",[532,15830,557],{"class":549},[532,15832,681],{"class":549},[532,15834,15835],{"class":581},"Bình luận mới",[532,15837,687],{"class":549},[532,15839,448],{"class":664},[532,15841,692],{"class":549},[532,15843,15844,15846,15848,15850,15852,15854,15857,15859,15861,15864,15866,15868],{"class":534,"line":1274},[532,15845,10947],{"class":549},[532,15847,448],{"class":664},[532,15849,669],{"class":668},[532,15851,672],{"class":549},[532,15853,557],{"class":549},[532,15855,15856],{"class":553},"text-sm text-gray-600 truncate",[532,15858,557],{"class":549},[532,15860,681],{"class":549},[532,15862,15863],{"class":581},"Nguyen Van A đã bình luận vào bài viết của bạn",[532,15865,687],{"class":549},[532,15867,448],{"class":664},[532,15869,692],{"class":549},[532,15871,15872,15874,15876,15878,15880,15882,15885,15887,15889,15892,15894,15896],{"class":534,"line":1283},[532,15873,10947],{"class":549},[532,15875,448],{"class":664},[532,15877,669],{"class":668},[532,15879,672],{"class":549},[532,15881,557],{"class":549},[532,15883,15884],{"class":553},"text-xs text-gray-400 mt-1",[532,15886,557],{"class":549},[532,15888,681],{"class":549},[532,15890,15891],{"class":581},"5 phút trước",[532,15893,687],{"class":549},[532,15895,448],{"class":664},[532,15897,692],{"class":549},[532,15899,15900,15902,15904],{"class":534,"line":1288},[532,15901,10976],{"class":549},[532,15903,1978],{"class":664},[532,15905,692],{"class":549},[532,15907,15908,15910,15912,15914,15916,15918,15921,15923,15925,15927],{"class":534,"line":1308},[532,15909,7509],{"class":549},[532,15911,532],{"class":664},[532,15913,669],{"class":668},[532,15915,672],{"class":549},[532,15917,557],{"class":549},[532,15919,15920],{"class":553},"flex-shrink-0 w-2 h-2 bg-blue-500 rounded-full mt-2",[532,15922,557],{"class":549},[532,15924,5879],{"class":549},[532,15926,532],{"class":664},[532,15928,692],{"class":549},[532,15930,15931,15933,15935],{"class":534,"line":1314},[532,15932,7619],{"class":549},[532,15934,1978],{"class":664},[532,15936,692],{"class":549},[532,15938,15939,15941,15943],{"class":534,"line":1323},[532,15940,2148],{"class":549},[532,15942,1071],{"class":664},[532,15944,692],{"class":549},[532,15946,15947],{"class":534,"line":1332},[532,15948,567],{"emptyLinePlaceholder":566},[532,15950,15951,15953,15955,15957,15959,15961,15963,15965],{"class":534,"line":3119},[532,15952,2021],{"class":549},[532,15954,1071],{"class":664},[532,15956,669],{"class":668},[532,15958,672],{"class":549},[532,15960,557],{"class":549},[532,15962,15717],{"class":553},[532,15964,557],{"class":549},[532,15966,692],{"class":549},[532,15968,15969,15971,15973,15975,15977,15979,15981,15983],{"class":534,"line":3139},[532,15970,5051],{"class":549},[532,15972,1978],{"class":664},[532,15974,669],{"class":668},[532,15976,672],{"class":549},[532,15978,557],{"class":549},[532,15980,4991],{"class":553},[532,15982,557],{"class":549},[532,15984,692],{"class":549},[532,15986,15987,15989,15991,15993,15995,15997,16000,16002],{"class":534,"line":3145},[532,15988,7509],{"class":549},[532,15990,1978],{"class":664},[532,15992,669],{"class":668},[532,15994,672],{"class":549},[532,15996,557],{"class":549},[532,15998,15999],{"class":553},"flex-shrink-0 w-9 h-9 bg-emerald-100 rounded-full flex items-center justify-center",[532,16001,557],{"class":549},[532,16003,692],{"class":549},[532,16005,16006,16008,16010,16012,16014,16016,16019,16021,16023,16025,16027,16029],{"class":534,"line":3151},[532,16007,10947],{"class":549},[532,16009,532],{"class":664},[532,16011,669],{"class":668},[532,16013,672],{"class":549},[532,16015,557],{"class":549},[532,16017,16018],{"class":553},"text-emerald-600 text-sm",[532,16020,557],{"class":549},[532,16022,681],{"class":549},[532,16024,10356],{"class":581},[532,16026,687],{"class":549},[532,16028,532],{"class":664},[532,16030,692],{"class":549},[532,16032,16033,16035,16037],{"class":534,"line":3157},[532,16034,10976],{"class":549},[532,16036,1978],{"class":664},[532,16038,692],{"class":549},[532,16040,16041,16043,16045,16047,16049,16051,16053,16055],{"class":534,"line":3163},[532,16042,7509],{"class":549},[532,16044,1978],{"class":664},[532,16046,669],{"class":668},[532,16048,672],{"class":549},[532,16050,557],{"class":549},[532,16052,15809],{"class":553},[532,16054,557],{"class":549},[532,16056,692],{"class":549},[532,16058,16059,16061,16063,16065,16067,16069,16071,16073,16075,16078,16080,16082],{"class":534,"line":3172},[532,16060,10947],{"class":549},[532,16062,448],{"class":664},[532,16064,669],{"class":668},[532,16066,672],{"class":549},[532,16068,557],{"class":549},[532,16070,15828],{"class":553},[532,16072,557],{"class":549},[532,16074,681],{"class":549},[532,16076,16077],{"class":581},"Deploy thành công",[532,16079,687],{"class":549},[532,16081,448],{"class":664},[532,16083,692],{"class":549},[532,16085,16086,16088,16090,16092,16094,16096,16098,16100,16102,16105,16107,16109],{"class":534,"line":3177},[532,16087,10947],{"class":549},[532,16089,448],{"class":664},[532,16091,669],{"class":668},[532,16093,672],{"class":549},[532,16095,557],{"class":549},[532,16097,15856],{"class":553},[532,16099,557],{"class":549},[532,16101,681],{"class":549},[532,16103,16104],{"class":581},"Production build #142 đã deploy thành công",[532,16106,687],{"class":549},[532,16108,448],{"class":664},[532,16110,692],{"class":549},[532,16112,16113,16115,16117,16119,16121,16123,16125,16127,16129,16132,16134,16136],{"class":534,"line":3197},[532,16114,10947],{"class":549},[532,16116,448],{"class":664},[532,16118,669],{"class":668},[532,16120,672],{"class":549},[532,16122,557],{"class":549},[532,16124,15884],{"class":553},[532,16126,557],{"class":549},[532,16128,681],{"class":549},[532,16130,16131],{"class":581},"1 giờ trước",[532,16133,687],{"class":549},[532,16135,448],{"class":664},[532,16137,692],{"class":549},[532,16139,16140,16142,16144],{"class":534,"line":3204},[532,16141,10976],{"class":549},[532,16143,1978],{"class":664},[532,16145,692],{"class":549},[532,16147,16148,16150,16152],{"class":534,"line":3219},[532,16149,7619],{"class":549},[532,16151,1978],{"class":664},[532,16153,692],{"class":549},[532,16155,16156,16158,16160],{"class":534,"line":3234},[532,16157,2148],{"class":549},[532,16159,1071],{"class":664},[532,16161,692],{"class":549},[532,16163,16164],{"class":534,"line":3249},[532,16165,567],{"emptyLinePlaceholder":566},[532,16167,16168,16170,16172,16174,16176,16178,16180,16182],{"class":534,"line":3255},[532,16169,2021],{"class":549},[532,16171,1071],{"class":664},[532,16173,669],{"class":668},[532,16175,672],{"class":549},[532,16177,557],{"class":549},[532,16179,15717],{"class":553},[532,16181,557],{"class":549},[532,16183,692],{"class":549},[532,16185,16186,16188,16190,16192,16194,16196,16198,16200],{"class":534,"line":3284},[532,16187,5051],{"class":549},[532,16189,1978],{"class":664},[532,16191,669],{"class":668},[532,16193,672],{"class":549},[532,16195,557],{"class":549},[532,16197,4991],{"class":553},[532,16199,557],{"class":549},[532,16201,692],{"class":549},[532,16203,16204,16206,16208,16210,16212,16214,16217,16219],{"class":534,"line":3313},[532,16205,7509],{"class":549},[532,16207,1978],{"class":664},[532,16209,669],{"class":668},[532,16211,672],{"class":549},[532,16213,557],{"class":549},[532,16215,16216],{"class":553},"flex-shrink-0 w-9 h-9 bg-amber-100 rounded-full flex items-center justify-center",[532,16218,557],{"class":549},[532,16220,692],{"class":549},[532,16222,16223,16225,16227,16229,16231,16233,16236,16238,16240,16243,16245,16247],{"class":534,"line":3322},[532,16224,10947],{"class":549},[532,16226,532],{"class":664},[532,16228,669],{"class":668},[532,16230,672],{"class":549},[532,16232,557],{"class":549},[532,16234,16235],{"class":553},"text-amber-600 text-sm",[532,16237,557],{"class":549},[532,16239,681],{"class":549},[532,16241,16242],{"class":581},"⚠",[532,16244,687],{"class":549},[532,16246,532],{"class":664},[532,16248,692],{"class":549},[532,16250,16251,16253,16255],{"class":534,"line":3331},[532,16252,10976],{"class":549},[532,16254,1978],{"class":664},[532,16256,692],{"class":549},[532,16258,16259,16261,16263,16265,16267,16269,16271,16273],{"class":534,"line":3340},[532,16260,7509],{"class":549},[532,16262,1978],{"class":664},[532,16264,669],{"class":668},[532,16266,672],{"class":549},[532,16268,557],{"class":549},[532,16270,15809],{"class":553},[532,16272,557],{"class":549},[532,16274,692],{"class":549},[532,16276,16277,16279,16281,16283,16285,16287,16289,16291,16293,16296,16298,16300],{"class":534,"line":4498},[532,16278,10947],{"class":549},[532,16280,448],{"class":664},[532,16282,669],{"class":668},[532,16284,672],{"class":549},[532,16286,557],{"class":549},[532,16288,15828],{"class":553},[532,16290,557],{"class":549},[532,16292,681],{"class":549},[532,16294,16295],{"class":581},"Cảnh báo billing",[532,16297,687],{"class":549},[532,16299,448],{"class":664},[532,16301,692],{"class":549},[532,16303,16304,16306,16308,16310,16312,16314,16316,16318,16320,16323,16325,16327],{"class":534,"line":4504},[532,16305,10947],{"class":549},[532,16307,448],{"class":664},[532,16309,669],{"class":668},[532,16311,672],{"class":549},[532,16313,557],{"class":549},[532,16315,15856],{"class":553},[532,16317,557],{"class":549},[532,16319,681],{"class":549},[532,16321,16322],{"class":581},"Gói Pro của bạn sẽ hết hạn sau 3 ngày",[532,16324,687],{"class":549},[532,16326,448],{"class":664},[532,16328,692],{"class":549},[532,16330,16331,16333,16335,16337,16339,16341,16343,16345,16347,16350,16352,16354],{"class":534,"line":4514},[532,16332,10947],{"class":549},[532,16334,448],{"class":664},[532,16336,669],{"class":668},[532,16338,672],{"class":549},[532,16340,557],{"class":549},[532,16342,15884],{"class":553},[532,16344,557],{"class":549},[532,16346,681],{"class":549},[532,16348,16349],{"class":581},"3 giờ trước",[532,16351,687],{"class":549},[532,16353,448],{"class":664},[532,16355,692],{"class":549},[532,16357,16358,16360,16362],{"class":534,"line":4520},[532,16359,10976],{"class":549},[532,16361,1978],{"class":664},[532,16363,692],{"class":549},[532,16365,16366,16368,16370,16372,16374,16376,16379,16381,16383,16385],{"class":534,"line":4529},[532,16367,7509],{"class":549},[532,16369,532],{"class":664},[532,16371,669],{"class":668},[532,16373,672],{"class":549},[532,16375,557],{"class":549},[532,16377,16378],{"class":553},"flex-shrink-0 w-2 h-2 bg-amber-500 rounded-full mt-2",[532,16380,557],{"class":549},[532,16382,5879],{"class":549},[532,16384,532],{"class":664},[532,16386,692],{"class":549},[532,16388,16389,16391,16393],{"class":534,"line":4538},[532,16390,7619],{"class":549},[532,16392,1978],{"class":664},[532,16394,692],{"class":549},[532,16396,16397,16399,16401],{"class":534,"line":4547},[532,16398,2148],{"class":549},[532,16400,1071],{"class":664},[532,16402,692],{"class":549},[532,16404,16405],{"class":534,"line":7784},[532,16406,567],{"emptyLinePlaceholder":566},[532,16408,16409,16411,16413,16415,16417,16419,16421,16423],{"class":534,"line":7793},[532,16410,2021],{"class":549},[532,16412,1071],{"class":664},[532,16414,669],{"class":668},[532,16416,672],{"class":549},[532,16418,557],{"class":549},[532,16420,15717],{"class":553},[532,16422,557],{"class":549},[532,16424,692],{"class":549},[532,16426,16427,16429,16431,16433,16435,16437,16439,16441],{"class":534,"line":7828},[532,16428,5051],{"class":549},[532,16430,1978],{"class":664},[532,16432,669],{"class":668},[532,16434,672],{"class":549},[532,16436,557],{"class":549},[532,16438,4991],{"class":553},[532,16440,557],{"class":549},[532,16442,692],{"class":549},[532,16444,16445,16447,16449,16451,16453,16455,16458,16460],{"class":534,"line":7863},[532,16446,7509],{"class":549},[532,16448,1978],{"class":664},[532,16450,669],{"class":668},[532,16452,672],{"class":549},[532,16454,557],{"class":549},[532,16456,16457],{"class":553},"flex-shrink-0 w-9 h-9 bg-purple-100 rounded-full flex items-center justify-center",[532,16459,557],{"class":549},[532,16461,692],{"class":549},[532,16463,16464,16466,16468,16470,16472,16474,16477,16479,16481,16484,16486,16488],{"class":534,"line":7891},[532,16465,10947],{"class":549},[532,16467,532],{"class":664},[532,16469,669],{"class":668},[532,16471,672],{"class":549},[532,16473,557],{"class":549},[532,16475,16476],{"class":553},"text-purple-600 text-sm",[532,16478,557],{"class":549},[532,16480,681],{"class":549},[532,16482,16483],{"class":581},"🚀",[532,16485,687],{"class":549},[532,16487,532],{"class":664},[532,16489,692],{"class":549},[532,16491,16492,16494,16496],{"class":534,"line":7919},[532,16493,10976],{"class":549},[532,16495,1978],{"class":664},[532,16497,692],{"class":549},[532,16499,16500,16502,16504,16506,16508,16510,16512,16514],{"class":534,"line":7928},[532,16501,7509],{"class":549},[532,16503,1978],{"class":664},[532,16505,669],{"class":668},[532,16507,672],{"class":549},[532,16509,557],{"class":549},[532,16511,15809],{"class":553},[532,16513,557],{"class":549},[532,16515,692],{"class":549},[532,16517,16518,16520,16522,16524,16526,16528,16530,16532,16534,16537,16539,16541],{"class":534,"line":7937},[532,16519,10947],{"class":549},[532,16521,448],{"class":664},[532,16523,669],{"class":668},[532,16525,672],{"class":549},[532,16527,557],{"class":549},[532,16529,15828],{"class":553},[532,16531,557],{"class":549},[532,16533,681],{"class":549},[532,16535,16536],{"class":581},"Tính năng mới",[532,16538,687],{"class":549},[532,16540,448],{"class":664},[532,16542,692],{"class":549},[532,16544,16545,16547,16549,16551,16553,16555,16557,16559,16561,16564,16566,16568],{"class":534,"line":7973},[532,16546,10947],{"class":549},[532,16548,448],{"class":664},[532,16550,669],{"class":668},[532,16552,672],{"class":549},[532,16554,557],{"class":549},[532,16556,15856],{"class":553},[532,16558,557],{"class":549},[532,16560,681],{"class":549},[532,16562,16563],{"class":581},"AI code review đã sẵn sàng trên workspace của bạn",[532,16565,687],{"class":549},[532,16567,448],{"class":664},[532,16569,692],{"class":549},[532,16571,16572,16574,16576,16578,16580,16582,16584,16586,16588,16591,16593,16595],{"class":534,"line":8009},[532,16573,10947],{"class":549},[532,16575,448],{"class":664},[532,16577,669],{"class":668},[532,16579,672],{"class":549},[532,16581,557],{"class":549},[532,16583,15884],{"class":553},[532,16585,557],{"class":549},[532,16587,681],{"class":549},[532,16589,16590],{"class":581},"1 ngày trước",[532,16592,687],{"class":549},[532,16594,448],{"class":664},[532,16596,692],{"class":549},[532,16598,16599,16601,16603],{"class":534,"line":8037},[532,16600,10976],{"class":549},[532,16602,1978],{"class":664},[532,16604,692],{"class":549},[532,16606,16607,16609,16611],{"class":534,"line":8064},[532,16608,7619],{"class":549},[532,16610,1978],{"class":664},[532,16612,692],{"class":549},[532,16614,16615,16617,16619],{"class":534,"line":8073},[532,16616,2148],{"class":549},[532,16618,1071],{"class":664},[532,16620,692],{"class":549},[532,16622,16623,16625,16627],{"class":534,"line":8082},[532,16624,2050],{"class":549},[532,16626,1068],{"class":664},[532,16628,692],{"class":549},[532,16630,16631],{"class":534,"line":8118},[532,16632,567],{"emptyLinePlaceholder":566},[532,16634,16635],{"class":534,"line":8153},[532,16636,16637],{"class":538},"      \u003C!-- Footer -->\n",[532,16639,16640,16642,16644,16646,16648,16650,16653,16655],{"class":534,"line":8181},[532,16641,1996],{"class":549},[532,16643,1978],{"class":664},[532,16645,669],{"class":668},[532,16647,672],{"class":549},[532,16649,557],{"class":549},[532,16651,16652],{"class":553},"px-5 py-3 border-t border-gray-200 bg-gray-50",[532,16654,557],{"class":549},[532,16656,692],{"class":549},[532,16658,16659,16661,16663,16665,16667,16669,16672,16674],{"class":534,"line":8210},[532,16660,2021],{"class":549},[532,16662,2125],{"class":664},[532,16664,669],{"class":668},[532,16666,672],{"class":549},[532,16668,557],{"class":549},[532,16670,16671],{"class":553},"text-sm font-medium text-indigo-600 hover:text-indigo-700 transition-colors",[532,16673,557],{"class":549},[532,16675,692],{"class":549},[532,16677,16678],{"class":534,"line":8219},[532,16679,16680],{"class":581},"          Xem tất cả thông báo\n",[532,16682,16683,16685,16687],{"class":534,"line":8228},[532,16684,2148],{"class":549},[532,16686,2125],{"class":664},[532,16688,692],{"class":549},[532,16690,16691,16693,16695],{"class":534,"line":8264},[532,16692,2050],{"class":549},[532,16694,1978],{"class":664},[532,16696,692],{"class":549},[532,16698,16699,16701,16703],{"class":534,"line":8299},[532,16700,1158],{"class":549},[532,16702,1978],{"class":664},[532,16704,692],{"class":549},[532,16706,16707,16709,16711],{"class":534,"line":8327},[532,16708,1045],{"class":549},[532,16710,1978],{"class":664},[532,16712,692],{"class":549},[532,16714,16715,16717,16719],{"class":534,"line":8354},[532,16716,687],{"class":549},[532,16718,1006],{"class":664},[532,16720,692],{"class":549},[767,16722,16724],{"id":16723},"bài-tập-19-card-elevation-system-sm-2xl","Bài tập 19: Card elevation system (sm -> 2xl)",[448,16726,16727,16729],{},[755,16728,777],{}," Demo toàn bộ 6 level shadow của Tailwind trên card giống hệt nhau.",[523,16731,16733],{"className":990,"code":16732,"language":992,"meta":528,"style":528},"\u003Ctemplate>\n  \u003Cdiv class=\"max-w-5xl mx-auto p-8\">\n    \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-8\">Card Elevation System\u003C\u002Fh2>\n\n    \u003Cdiv class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8\">\n      \u003C!-- shadow-sm -->\n      \u003Cdiv class=\"shadow-sm bg-white rounded-xl p-6\">\n        \u003Cspan class=\"text-xs font-semibold text-gray-400 uppercase tracking-wider\">Level 1\u003C\u002Fspan>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mt-1\">shadow-sm\u003C\u002Fh3>\n        \u003Cp class=\"text-sm text-gray-500 mt-2\">Tinh tế, nhẹ nhàng. Dùng cho card trong layout phẳng.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- shadow -->\n      \u003Cdiv class=\"shadow bg-white rounded-xl p-6\">\n        \u003Cspan class=\"text-xs font-semibold text-gray-400 uppercase tracking-wider\">Level 2\u003C\u002Fspan>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mt-1\">shadow\u003C\u002Fh3>\n        \u003Cp class=\"text-sm text-gray-500 mt-2\">Default elevation. Card cơ bản, section container.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- shadow-md -->\n      \u003Cdiv class=\"shadow-md bg-white rounded-xl p-6\">\n        \u003Cspan class=\"text-xs font-semibold text-gray-400 uppercase tracking-wider\">Level 3\u003C\u002Fspan>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mt-1\">shadow-md\u003C\u002Fh3>\n        \u003Cp class=\"text-sm text-gray-500 mt-2\">Card nổi vừa. Dùng cho card tương tác được.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- shadow-lg -->\n      \u003Cdiv class=\"shadow-lg bg-white rounded-xl p-6\">\n        \u003Cspan class=\"text-xs font-semibold text-gray-400 uppercase tracking-wider\">Level 4\u003C\u002Fspan>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mt-1\">shadow-lg\u003C\u002Fh3>\n        \u003Cp class=\"text-sm text-gray-500 mt-2\">Dropdown menu, popover, card hover state.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- shadow-xl -->\n      \u003Cdiv class=\"shadow-xl bg-white rounded-xl p-6\">\n        \u003Cspan class=\"text-xs font-semibold text-gray-400 uppercase tracking-wider\">Level 5\u003C\u002Fspan>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mt-1\">shadow-xl\u003C\u002Fh3>\n        \u003Cp class=\"text-sm text-gray-500 mt-2\">Modal, dialog, sticky header khi scroll.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n\n      \u003C!-- shadow-2xl -->\n      \u003Cdiv class=\"shadow-2xl bg-white rounded-xl p-6\">\n        \u003Cspan class=\"text-xs font-semibold text-gray-400 uppercase tracking-wider\">Level 6\u003C\u002Fspan>\n        \u003Ch3 class=\"text-lg font-semibold text-gray-900 mt-1\">shadow-2xl\u003C\u002Fh3>\n        \u003Cp class=\"text-sm text-gray-500 mt-2\">Floating action button, toast notification, tooltip.\u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[432,16734,16735,16743,16761,16788,16792,16811,16816,16835,16863,16890,16918,16926,16930,16935,16954,16981,17007,17034,17042,17046,17051,17070,17097,17123,17150,17158,17162,17167,17186,17213,17239,17266,17274,17278,17283,17302,17329,17355,17382,17390,17394,17399,17418,17445,17471,17498,17506,17514,17522],{"__ignoreMap":528},[532,16736,16737,16739,16741],{"class":534,"line":535},[532,16738,661],{"class":549},[532,16740,1006],{"class":664},[532,16742,692],{"class":549},[532,16744,16745,16747,16749,16751,16753,16755,16757,16759],{"class":534,"line":542},[532,16746,1013],{"class":549},[532,16748,1978],{"class":664},[532,16750,669],{"class":668},[532,16752,672],{"class":549},[532,16754,557],{"class":549},[532,16756,12970],{"class":553},[532,16758,557],{"class":549},[532,16760,692],{"class":549},[532,16762,16763,16765,16767,16769,16771,16773,16775,16777,16779,16782,16784,16786],{"class":534,"line":563},[532,16764,1034],{"class":549},[532,16766,427],{"class":664},[532,16768,669],{"class":668},[532,16770,672],{"class":549},[532,16772,557],{"class":549},[532,16774,12989],{"class":553},[532,16776,557],{"class":549},[532,16778,681],{"class":549},[532,16780,16781],{"class":581},"Card Elevation System",[532,16783,687],{"class":549},[532,16785,427],{"class":664},[532,16787,692],{"class":549},[532,16789,16790],{"class":534,"line":570},[532,16791,567],{"emptyLinePlaceholder":566},[532,16793,16794,16796,16798,16800,16802,16804,16807,16809],{"class":534,"line":578},[532,16795,1034],{"class":549},[532,16797,1978],{"class":664},[532,16799,669],{"class":668},[532,16801,672],{"class":549},[532,16803,557],{"class":549},[532,16805,16806],{"class":553},"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8",[532,16808,557],{"class":549},[532,16810,692],{"class":549},[532,16812,16813],{"class":534,"line":604},[532,16814,16815],{"class":538},"      \u003C!-- shadow-sm -->\n",[532,16817,16818,16820,16822,16824,16826,16828,16831,16833],{"class":534,"line":624},[532,16819,1996],{"class":549},[532,16821,1978],{"class":664},[532,16823,669],{"class":668},[532,16825,672],{"class":549},[532,16827,557],{"class":549},[532,16829,16830],{"class":553},"shadow-sm bg-white rounded-xl p-6",[532,16832,557],{"class":549},[532,16834,692],{"class":549},[532,16836,16837,16839,16841,16843,16845,16847,16850,16852,16854,16857,16859,16861],{"class":534,"line":640},[532,16838,2021],{"class":549},[532,16840,532],{"class":664},[532,16842,669],{"class":668},[532,16844,672],{"class":549},[532,16846,557],{"class":549},[532,16848,16849],{"class":553},"text-xs font-semibold text-gray-400 uppercase tracking-wider",[532,16851,557],{"class":549},[532,16853,681],{"class":549},[532,16855,16856],{"class":581},"Level 1",[532,16858,687],{"class":549},[532,16860,532],{"class":664},[532,16862,692],{"class":549},[532,16864,16865,16867,16869,16871,16873,16875,16878,16880,16882,16884,16886,16888],{"class":534,"line":894},[532,16866,2021],{"class":549},[532,16868,767],{"class":664},[532,16870,669],{"class":668},[532,16872,672],{"class":549},[532,16874,557],{"class":549},[532,16876,16877],{"class":553},"text-lg font-semibold text-gray-900 mt-1",[532,16879,557],{"class":549},[532,16881,681],{"class":549},[532,16883,15252],{"class":581},[532,16885,687],{"class":549},[532,16887,767],{"class":664},[532,16889,692],{"class":549},[532,16891,16892,16894,16896,16898,16900,16902,16905,16907,16909,16912,16914,16916],{"class":534,"line":900},[532,16893,2021],{"class":549},[532,16895,448],{"class":664},[532,16897,669],{"class":668},[532,16899,672],{"class":549},[532,16901,557],{"class":549},[532,16903,16904],{"class":553},"text-sm text-gray-500 mt-2",[532,16906,557],{"class":549},[532,16908,681],{"class":549},[532,16910,16911],{"class":581},"Tinh tế, nhẹ nhàng. Dùng cho card trong layout phẳng.",[532,16913,687],{"class":549},[532,16915,448],{"class":664},[532,16917,692],{"class":549},[532,16919,16920,16922,16924],{"class":534,"line":906},[532,16921,2050],{"class":549},[532,16923,1978],{"class":664},[532,16925,692],{"class":549},[532,16927,16928],{"class":534,"line":912},[532,16929,567],{"emptyLinePlaceholder":566},[532,16931,16932],{"class":534,"line":918},[532,16933,16934],{"class":538},"      \u003C!-- shadow -->\n",[532,16936,16937,16939,16941,16943,16945,16947,16950,16952],{"class":534,"line":1237},[532,16938,1996],{"class":549},[532,16940,1978],{"class":664},[532,16942,669],{"class":668},[532,16944,672],{"class":549},[532,16946,557],{"class":549},[532,16948,16949],{"class":553},"shadow bg-white rounded-xl p-6",[532,16951,557],{"class":549},[532,16953,692],{"class":549},[532,16955,16956,16958,16960,16962,16964,16966,16968,16970,16972,16975,16977,16979],{"class":534,"line":1242},[532,16957,2021],{"class":549},[532,16959,532],{"class":664},[532,16961,669],{"class":668},[532,16963,672],{"class":549},[532,16965,557],{"class":549},[532,16967,16849],{"class":553},[532,16969,557],{"class":549},[532,16971,681],{"class":549},[532,16973,16974],{"class":581},"Level 2",[532,16976,687],{"class":549},[532,16978,532],{"class":664},[532,16980,692],{"class":549},[532,16982,16983,16985,16987,16989,16991,16993,16995,16997,16999,17001,17003,17005],{"class":534,"line":1262},[532,16984,2021],{"class":549},[532,16986,767],{"class":664},[532,16988,669],{"class":668},[532,16990,672],{"class":549},[532,16992,557],{"class":549},[532,16994,16877],{"class":553},[532,16996,557],{"class":549},[532,16998,681],{"class":549},[532,17000,15280],{"class":581},[532,17002,687],{"class":549},[532,17004,767],{"class":664},[532,17006,692],{"class":549},[532,17008,17009,17011,17013,17015,17017,17019,17021,17023,17025,17028,17030,17032],{"class":534,"line":1268},[532,17010,2021],{"class":549},[532,17012,448],{"class":664},[532,17014,669],{"class":668},[532,17016,672],{"class":549},[532,17018,557],{"class":549},[532,17020,16904],{"class":553},[532,17022,557],{"class":549},[532,17024,681],{"class":549},[532,17026,17027],{"class":581},"Default elevation. Card cơ bản, section container.",[532,17029,687],{"class":549},[532,17031,448],{"class":664},[532,17033,692],{"class":549},[532,17035,17036,17038,17040],{"class":534,"line":1274},[532,17037,2050],{"class":549},[532,17039,1978],{"class":664},[532,17041,692],{"class":549},[532,17043,17044],{"class":534,"line":1283},[532,17045,567],{"emptyLinePlaceholder":566},[532,17047,17048],{"class":534,"line":1288},[532,17049,17050],{"class":538},"      \u003C!-- shadow-md -->\n",[532,17052,17053,17055,17057,17059,17061,17063,17066,17068],{"class":534,"line":1308},[532,17054,1996],{"class":549},[532,17056,1978],{"class":664},[532,17058,669],{"class":668},[532,17060,672],{"class":549},[532,17062,557],{"class":549},[532,17064,17065],{"class":553},"shadow-md bg-white rounded-xl p-6",[532,17067,557],{"class":549},[532,17069,692],{"class":549},[532,17071,17072,17074,17076,17078,17080,17082,17084,17086,17088,17091,17093,17095],{"class":534,"line":1314},[532,17073,2021],{"class":549},[532,17075,532],{"class":664},[532,17077,669],{"class":668},[532,17079,672],{"class":549},[532,17081,557],{"class":549},[532,17083,16849],{"class":553},[532,17085,557],{"class":549},[532,17087,681],{"class":549},[532,17089,17090],{"class":581},"Level 3",[532,17092,687],{"class":549},[532,17094,532],{"class":664},[532,17096,692],{"class":549},[532,17098,17099,17101,17103,17105,17107,17109,17111,17113,17115,17117,17119,17121],{"class":534,"line":1323},[532,17100,2021],{"class":549},[532,17102,767],{"class":664},[532,17104,669],{"class":668},[532,17106,672],{"class":549},[532,17108,557],{"class":549},[532,17110,16877],{"class":553},[532,17112,557],{"class":549},[532,17114,681],{"class":549},[532,17116,15308],{"class":581},[532,17118,687],{"class":549},[532,17120,767],{"class":664},[532,17122,692],{"class":549},[532,17124,17125,17127,17129,17131,17133,17135,17137,17139,17141,17144,17146,17148],{"class":534,"line":1332},[532,17126,2021],{"class":549},[532,17128,448],{"class":664},[532,17130,669],{"class":668},[532,17132,672],{"class":549},[532,17134,557],{"class":549},[532,17136,16904],{"class":553},[532,17138,557],{"class":549},[532,17140,681],{"class":549},[532,17142,17143],{"class":581},"Card nổi vừa. Dùng cho card tương tác được.",[532,17145,687],{"class":549},[532,17147,448],{"class":664},[532,17149,692],{"class":549},[532,17151,17152,17154,17156],{"class":534,"line":3119},[532,17153,2050],{"class":549},[532,17155,1978],{"class":664},[532,17157,692],{"class":549},[532,17159,17160],{"class":534,"line":3139},[532,17161,567],{"emptyLinePlaceholder":566},[532,17163,17164],{"class":534,"line":3145},[532,17165,17166],{"class":538},"      \u003C!-- shadow-lg -->\n",[532,17168,17169,17171,17173,17175,17177,17179,17182,17184],{"class":534,"line":3151},[532,17170,1996],{"class":549},[532,17172,1978],{"class":664},[532,17174,669],{"class":668},[532,17176,672],{"class":549},[532,17178,557],{"class":549},[532,17180,17181],{"class":553},"shadow-lg bg-white rounded-xl p-6",[532,17183,557],{"class":549},[532,17185,692],{"class":549},[532,17187,17188,17190,17192,17194,17196,17198,17200,17202,17204,17207,17209,17211],{"class":534,"line":3157},[532,17189,2021],{"class":549},[532,17191,532],{"class":664},[532,17193,669],{"class":668},[532,17195,672],{"class":549},[532,17197,557],{"class":549},[532,17199,16849],{"class":553},[532,17201,557],{"class":549},[532,17203,681],{"class":549},[532,17205,17206],{"class":581},"Level 4",[532,17208,687],{"class":549},[532,17210,532],{"class":664},[532,17212,692],{"class":549},[532,17214,17215,17217,17219,17221,17223,17225,17227,17229,17231,17233,17235,17237],{"class":534,"line":3163},[532,17216,2021],{"class":549},[532,17218,767],{"class":664},[532,17220,669],{"class":668},[532,17222,672],{"class":549},[532,17224,557],{"class":549},[532,17226,16877],{"class":553},[532,17228,557],{"class":549},[532,17230,681],{"class":549},[532,17232,15336],{"class":581},[532,17234,687],{"class":549},[532,17236,767],{"class":664},[532,17238,692],{"class":549},[532,17240,17241,17243,17245,17247,17249,17251,17253,17255,17257,17260,17262,17264],{"class":534,"line":3172},[532,17242,2021],{"class":549},[532,17244,448],{"class":664},[532,17246,669],{"class":668},[532,17248,672],{"class":549},[532,17250,557],{"class":549},[532,17252,16904],{"class":553},[532,17254,557],{"class":549},[532,17256,681],{"class":549},[532,17258,17259],{"class":581},"Dropdown menu, popover, card hover state.",[532,17261,687],{"class":549},[532,17263,448],{"class":664},[532,17265,692],{"class":549},[532,17267,17268,17270,17272],{"class":534,"line":3177},[532,17269,2050],{"class":549},[532,17271,1978],{"class":664},[532,17273,692],{"class":549},[532,17275,17276],{"class":534,"line":3197},[532,17277,567],{"emptyLinePlaceholder":566},[532,17279,17280],{"class":534,"line":3204},[532,17281,17282],{"class":538},"      \u003C!-- shadow-xl -->\n",[532,17284,17285,17287,17289,17291,17293,17295,17298,17300],{"class":534,"line":3219},[532,17286,1996],{"class":549},[532,17288,1978],{"class":664},[532,17290,669],{"class":668},[532,17292,672],{"class":549},[532,17294,557],{"class":549},[532,17296,17297],{"class":553},"shadow-xl bg-white rounded-xl p-6",[532,17299,557],{"class":549},[532,17301,692],{"class":549},[532,17303,17304,17306,17308,17310,17312,17314,17316,17318,17320,17323,17325,17327],{"class":534,"line":3234},[532,17305,2021],{"class":549},[532,17307,532],{"class":664},[532,17309,669],{"class":668},[532,17311,672],{"class":549},[532,17313,557],{"class":549},[532,17315,16849],{"class":553},[532,17317,557],{"class":549},[532,17319,681],{"class":549},[532,17321,17322],{"class":581},"Level 5",[532,17324,687],{"class":549},[532,17326,532],{"class":664},[532,17328,692],{"class":549},[532,17330,17331,17333,17335,17337,17339,17341,17343,17345,17347,17349,17351,17353],{"class":534,"line":3249},[532,17332,2021],{"class":549},[532,17334,767],{"class":664},[532,17336,669],{"class":668},[532,17338,672],{"class":549},[532,17340,557],{"class":549},[532,17342,16877],{"class":553},[532,17344,557],{"class":549},[532,17346,681],{"class":549},[532,17348,15364],{"class":581},[532,17350,687],{"class":549},[532,17352,767],{"class":664},[532,17354,692],{"class":549},[532,17356,17357,17359,17361,17363,17365,17367,17369,17371,17373,17376,17378,17380],{"class":534,"line":3255},[532,17358,2021],{"class":549},[532,17360,448],{"class":664},[532,17362,669],{"class":668},[532,17364,672],{"class":549},[532,17366,557],{"class":549},[532,17368,16904],{"class":553},[532,17370,557],{"class":549},[532,17372,681],{"class":549},[532,17374,17375],{"class":581},"Modal, dialog, sticky header khi scroll.",[532,17377,687],{"class":549},[532,17379,448],{"class":664},[532,17381,692],{"class":549},[532,17383,17384,17386,17388],{"class":534,"line":3284},[532,17385,2050],{"class":549},[532,17387,1978],{"class":664},[532,17389,692],{"class":549},[532,17391,17392],{"class":534,"line":3313},[532,17393,567],{"emptyLinePlaceholder":566},[532,17395,17396],{"class":534,"line":3322},[532,17397,17398],{"class":538},"      \u003C!-- shadow-2xl -->\n",[532,17400,17401,17403,17405,17407,17409,17411,17414,17416],{"class":534,"line":3331},[532,17402,1996],{"class":549},[532,17404,1978],{"class":664},[532,17406,669],{"class":668},[532,17408,672],{"class":549},[532,17410,557],{"class":549},[532,17412,17413],{"class":553},"shadow-2xl bg-white rounded-xl p-6",[532,17415,557],{"class":549},[532,17417,692],{"class":549},[532,17419,17420,17422,17424,17426,17428,17430,17432,17434,17436,17439,17441,17443],{"class":534,"line":3340},[532,17421,2021],{"class":549},[532,17423,532],{"class":664},[532,17425,669],{"class":668},[532,17427,672],{"class":549},[532,17429,557],{"class":549},[532,17431,16849],{"class":553},[532,17433,557],{"class":549},[532,17435,681],{"class":549},[532,17437,17438],{"class":581},"Level 6",[532,17440,687],{"class":549},[532,17442,532],{"class":664},[532,17444,692],{"class":549},[532,17446,17447,17449,17451,17453,17455,17457,17459,17461,17463,17465,17467,17469],{"class":534,"line":4498},[532,17448,2021],{"class":549},[532,17450,767],{"class":664},[532,17452,669],{"class":668},[532,17454,672],{"class":549},[532,17456,557],{"class":549},[532,17458,16877],{"class":553},[532,17460,557],{"class":549},[532,17462,681],{"class":549},[532,17464,15392],{"class":581},[532,17466,687],{"class":549},[532,17468,767],{"class":664},[532,17470,692],{"class":549},[532,17472,17473,17475,17477,17479,17481,17483,17485,17487,17489,17492,17494,17496],{"class":534,"line":4504},[532,17474,2021],{"class":549},[532,17476,448],{"class":664},[532,17478,669],{"class":668},[532,17480,672],{"class":549},[532,17482,557],{"class":549},[532,17484,16904],{"class":553},[532,17486,557],{"class":549},[532,17488,681],{"class":549},[532,17490,17491],{"class":581},"Floating action button, toast notification, tooltip.",[532,17493,687],{"class":549},[532,17495,448],{"class":664},[532,17497,692],{"class":549},[532,17499,17500,17502,17504],{"class":534,"line":4514},[532,17501,2050],{"class":549},[532,17503,1978],{"class":664},[532,17505,692],{"class":549},[532,17507,17508,17510,17512],{"class":534,"line":4520},[532,17509,1158],{"class":549},[532,17511,1978],{"class":664},[532,17513,692],{"class":549},[532,17515,17516,17518,17520],{"class":534,"line":4529},[532,17517,1045],{"class":549},[532,17519,1978],{"class":664},[532,17521,692],{"class":549},[532,17523,17524,17526,17528],{"class":534,"line":4538},[532,17525,687],{"class":549},[532,17527,1006],{"class":664},[532,17529,692],{"class":549},[1340,17531],{},[749,17533,17535,17536],{"color":4866,"icon":17534},"i-lucide-arrow-right","Tiếp theo: ",[3746,17537,17538],{"href":403},"Interactive States, Transitions & Animations",[8645,17540,17541],{},"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 .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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":528,"searchDepth":542,"depth":542,"links":17543},[17544,17550,17556,17567,17573,17576,17579,17589,17599,17607],{"id":429,"depth":542,"text":17545,"children":17546},"1. Font Family (font-sans, font-serif, font-mono, custom fonts trong @theme)",[17547,17549],{"id":769,"depth":563,"text":17548},"Bài tập 1: Setup custom Google Font (Inter) trong @theme",{"id":1060,"depth":563,"text":1061},{"id":1344,"depth":542,"text":17551,"children":17552},"2. Font Size & Weight (text-xs -> text-9xl, font-thin -> font-black)",[17553,17554,17555],{"id":1741,"depth":563,"text":1742},{"id":1875,"depth":563,"text":1876},{"id":1932,"depth":563,"text":1933},{"id":2221,"depth":542,"text":2222,"children":17557},[17558,17560,17562,17563,17565,17566],{"id":2225,"depth":563,"text":17559},"Line Height (leading-*)",{"id":2405,"depth":563,"text":17561},"Letter Spacing (tracking-*)",{"id":2585,"depth":563,"text":2586},{"id":2762,"depth":563,"text":17564},"Line Clamp (truncate nhiều dòng) — line-clamp-*",{"id":2825,"depth":563,"text":2826},{"id":3349,"depth":563,"text":3350},{"id":3608,"depth":542,"text":3609,"children":17568},[17569,17570,17571,17572],{"id":3612,"depth":563,"text":3613},{"id":3879,"depth":563,"text":3880},{"id":4000,"depth":563,"text":4001},{"id":4128,"depth":563,"text":4129},{"id":4558,"depth":542,"text":4559,"children":17574},[17575],{"id":4882,"depth":563,"text":4883},{"id":5471,"depth":542,"text":5472,"children":17577},[17578],{"id":5755,"depth":563,"text":5756},{"id":6049,"depth":542,"text":6050,"children":17580},[17581,17582,17583,17585,17586,17587],{"id":6075,"depth":563,"text":6076},{"id":6181,"depth":563,"text":6182},{"id":6353,"depth":563,"text":17584},"Opacity modifier (cú pháp \u002F)",{"id":6519,"depth":563,"text":6520},{"id":6927,"depth":563,"text":6928},{"id":8408,"depth":563,"text":17588},"Bài tập 11: Gradient text sử dụng bg-gradient-to-r + bg-clip-text",{"id":8760,"depth":542,"text":17590,"children":17591},"8. Background (bg-*, bg-gradient-*, bg-opacity)",[17592,17593,17594,17595,17596,17597],{"id":8773,"depth":563,"text":8774},{"id":8893,"depth":563,"text":8894},{"id":9216,"depth":563,"text":9217},{"id":9647,"depth":563,"text":9648},{"id":10028,"depth":563,"text":10029},{"id":10625,"depth":563,"text":17598},"Bài tập 14: Striped table rows với even:bg-gray-50",{"id":11572,"depth":542,"text":11573,"children":17600},[17601,17602,17603,17604,17605,17606],{"id":11576,"depth":563,"text":11577},{"id":11899,"depth":563,"text":11900},{"id":12197,"depth":563,"text":12198},{"id":12429,"depth":563,"text":12430},{"id":12936,"depth":563,"text":12937},{"id":13806,"depth":563,"text":13807},{"id":14924,"depth":542,"text":14925,"children":17608},[17609,17610,17611,17612],{"id":14928,"depth":563,"text":14929},{"id":15231,"depth":563,"text":15232},{"id":15557,"depth":563,"text":15558},{"id":16723,"depth":563,"text":16724},"Tailwind CSS v4 — font, text, color (OKLCH), background, gradient, border, outline. Bài tập thiết kế typography system và color palette.","md",null,{},{"title":397,"icon":400},{"title":422,"description":17613},"Vcv1d5GUv2hfrnUkfvGw8o-DPai5KzWJ505K5I0PDVA",[17621,17623],{"title":392,"path":393,"stem":394,"description":17622,"icon":395,"children":-1},"Tailwind CSS v4 layout system — container queries, display types, flexbox, grid, spacing (padding, margin, gap). Bài tập từng khái niệm.",{"title":402,"path":403,"stem":404,"description":17624,"icon":405,"children":-1},"Tailwind CSS v4 — hover\u002Ffocus\u002Factive states, transitions, transforms 3D, animations, filters, backdrop. Bài tập interactive components.",1783490361667]