[{"data":1,"prerenderedAt":18964},["ShallowReactive",2],{"navigation_docs":3,"-tu-hoc-tailwindcss-layout-spacing":420,"-tu-hoc-tailwindcss-layout-spacing-surround":18959},[4,153],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":26},"Phỏng vấn .NET","i-lucide-briefcase","\u002Fphong-van","1.phong-van",[10,27,66,111,128],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":26},"Tổng quan","i-lucide-compass","\u002Fphong-van\u002Ftong-quan","1.phong-van\u002F1.tong-quan",[16,21],{"title":17,"path":18,"stem":19,"icon":20},"Thị trường HCM","\u002Fphong-van\u002Ftong-quan\u002Fthi-truong","1.phong-van\u002F1.tong-quan\u002F1.thi-truong","i-lucide-trending-up",{"title":22,"path":23,"stem":24,"icon":25},"Lộ trình 7 ngày","\u002Fphong-van\u002Ftong-quan\u002Flo-trinh","1.phong-van\u002F1.tong-quan\u002F2.lo-trinh","i-lucide-calendar-days",false,{"title":22,"icon":25,"path":28,"stem":29,"children":30,"page":26},"\u002Fphong-van\u002Flo-trinh","1.phong-van\u002F2.lo-trinh",[31,36,41,46,51,56,61],{"title":32,"path":33,"stem":34,"icon":35},"Ngày 1 — C# cơ bản","\u002Fphong-van\u002Flo-trinh\u002Fngay-1-csharp-co-ban","1.phong-van\u002F2.lo-trinh\u002F1.ngay-1-csharp-co-ban","i-lucide-1",{"title":37,"path":38,"stem":39,"icon":40},"Ngày 2 — OOP và SOLID","\u002Fphong-van\u002Flo-trinh\u002Fngay-2-oop-solid","1.phong-van\u002F2.lo-trinh\u002F2.ngay-2-oop-solid","i-lucide-2",{"title":42,"path":43,"stem":44,"icon":45},"Ngày 3 — C# nâng cao","\u002Fphong-van\u002Flo-trinh\u002Fngay-3-csharp-nang-cao","1.phong-van\u002F2.lo-trinh\u002F3.ngay-3-csharp-nang-cao","i-lucide-3",{"title":47,"path":48,"stem":49,"icon":50},"Ngày 4 — Database và SQL","\u002Fphong-van\u002Flo-trinh\u002Fngay-4-database-sql","1.phong-van\u002F2.lo-trinh\u002F4.ngay-4-database-sql","i-lucide-4",{"title":52,"path":53,"stem":54,"icon":55},"Ngày 5 — ASP.NET Core và EF Core","\u002Fphong-van\u002Flo-trinh\u002Fngay-5-aspnet-efcore","1.phong-van\u002F2.lo-trinh\u002F5.ngay-5-aspnet-efcore","i-lucide-5",{"title":57,"path":58,"stem":59,"icon":60},"Ngày 6 — DSA coding","\u002Fphong-van\u002Flo-trinh\u002Fngay-6-dsa","1.phong-van\u002F2.lo-trinh\u002F6.ngay-6-dsa","i-lucide-6",{"title":62,"path":63,"stem":64,"icon":65},"Ngày 7 — Mock và HR","\u002Fphong-van\u002Flo-trinh\u002Fngay-7-mock-interview","1.phong-van\u002F2.lo-trinh\u002F7.ngay-7-mock-interview","i-lucide-7",{"title":67,"icon":68,"path":69,"stem":70,"children":71,"page":26},"Ngân hàng câu hỏi","i-lucide-database","\u002Fphong-van\u002Fngan-hang-cau-hoi","1.phong-van\u002F3.ngan-hang-cau-hoi",[72,77,82,87,92,97,102,107],{"title":73,"path":74,"stem":75,"icon":76},"C# (60+ câu)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Fcsharp","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F1.csharp","i-lucide-hash",{"title":78,"path":79,"stem":80,"icon":81},"OOP và SOLID (40+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Foop","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F2.oop","i-lucide-shapes",{"title":83,"path":84,"stem":85,"icon":86},"SQL (40+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Fsql","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F3.sql","i-lucide-database-zap",{"title":88,"path":89,"stem":90,"icon":91},"ASP.NET và EF (50+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Faspnet-ef","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F4.aspnet-ef","i-lucide-server",{"title":93,"path":94,"stem":95,"icon":96},"DSA và Coding (30+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Fdsa-coding","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F5.dsa-coding","i-lucide-binary",{"title":98,"path":99,"stem":100,"icon":101},"HR và Soft skill (25+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Fhr-behavior","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F6.hr-behavior","i-lucide-users",{"title":103,"path":104,"stem":105,"icon":106},"Design Pattern (55+)","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Fdesign-pattern","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F7.design-pattern","i-lucide-puzzle",{"title":108,"path":109,"stem":110,"icon":91},"ASP.NET MVC và Web API","\u002Fphong-van\u002Fngan-hang-cau-hoi\u002Faspnet-mvc-webapi","1.phong-van\u002F3.ngan-hang-cau-hoi\u002F8.aspnet-mvc-webapi",{"title":112,"itle":113,"icon":114,"path":115,"stem":116,"children":117,"page":26},"Tai Lieu","Tài liệu và Cheat sheet","i-lucide-book-marked","\u002Fphong-van\u002Ftai-lieu","1.phong-van\u002F4.tai-lieu",[118,123],{"title":119,"path":120,"stem":121,"icon":122},"Cheat Sheet","\u002Fphong-van\u002Ftai-lieu\u002Fcheatsheet","1.phong-van\u002F4.tai-lieu\u002F1.cheatsheet","i-lucide-clipboard-list",{"title":124,"path":125,"stem":126,"icon":127},"Nguồn tham khảo","\u002Fphong-van\u002Ftai-lieu\u002Fnguon","1.phong-van\u002F4.tai-lieu\u002F2.nguon","i-lucide-link",{"title":129,"icon":130,"path":131,"stem":132,"children":133,"page":26},"Phỏng vấn English","i-lucide-globe","\u002Fphong-van\u002Fenglish-interview","1.phong-van\u002F5.english-interview",[134,138,143,148],{"title":135,"path":136,"stem":137,"icon":130},"Tổng quan English","\u002Fphong-van\u002Fenglish-interview\u002Ftong-quan","1.phong-van\u002F5.english-interview\u002F1.tong-quan",{"title":139,"path":140,"stem":141,"icon":142},"Vocabulary","\u002Fphong-van\u002Fenglish-interview\u002Fvocabulary","1.phong-van\u002F5.english-interview\u002F2.vocabulary","i-lucide-book-a",{"title":144,"path":145,"stem":146,"icon":147},"Technical Q và A (EN)","\u002Fphong-van\u002Fenglish-interview\u002Ftechnical-en","1.phong-van\u002F5.english-interview\u002F3.technical-en","i-lucide-code",{"title":149,"path":150,"stem":151,"icon":152},"Behavioral (EN)","\u002Fphong-van\u002Fenglish-interview\u002Fbehavioral-en","1.phong-van\u002F5.english-interview\u002F4.behavioral-en","i-lucide-message-square-text",{"title":154,"icon":155,"path":156,"stem":157,"children":158},"Tự học","i-lucide-graduation-cap","\u002Ftu-hoc","2.tu-hoc",[159,161,287,310,333,357,384],{"title":154,"path":156,"stem":160,"icon":155},"2.tu-hoc\u002Findex",{"title":162,"icon":68,"path":163,"stem":164,"children":165},"Database","\u002Ftu-hoc\u002Fdatabase","2.tu-hoc\u002F1.database\u002Findex",[166,167,197,222,243,248],{"title":162,"path":163,"stem":164,"icon":68},{"title":168,"icon":91,"path":169,"stem":170,"children":171,"page":26},"SQL Server","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server","2.tu-hoc\u002F1.database\u002F2.sql-server",[172,177,182,187,192],{"title":173,"path":174,"stem":175,"icon":176},"1. Giới thiệu và Cài đặt","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server\u002Fgioi-thieu-cai-dat","2.tu-hoc\u002F1.database\u002F2.sql-server\u002F1.gioi-thieu-cai-dat","i-lucide-play-circle",{"title":178,"path":179,"stem":180,"icon":181},"2. Cú pháp cơ bản","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server\u002Fcu-phap-co-ban","2.tu-hoc\u002F1.database\u002F2.sql-server\u002F2.cu-phap-co-ban","i-lucide-code-2",{"title":183,"path":184,"stem":185,"icon":186},"3. Truy vấn nâng cao","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server\u002Ftruy-van-nang-cao","2.tu-hoc\u002F1.database\u002F2.sql-server\u002F3.truy-van-nang-cao","i-lucide-git-merge",{"title":188,"path":189,"stem":190,"icon":191},"4. Đặc thù và Performance","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server\u002Fdac-thu-performance","2.tu-hoc\u002F1.database\u002F2.sql-server\u002F4.dac-thu-performance","i-lucide-gauge",{"title":193,"path":194,"stem":195,"icon":196},"5. Q và A phỏng vấn","\u002Ftu-hoc\u002Fdatabase\u002Fsql-server\u002Fcau-hoi-phong-van","2.tu-hoc\u002F1.database\u002F2.sql-server\u002F5.cau-hoi-phong-van","i-lucide-message-circle-question",{"title":198,"icon":199,"path":200,"stem":201,"children":202,"page":26},"PostgreSQL","i-simple-icons-postgresql","\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql","2.tu-hoc\u002F1.database\u002F3.postgresql",[203,206,209,212,215,218],{"title":173,"path":204,"stem":205,"icon":176},"\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Fgioi-thieu-cai-dat","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F1.gioi-thieu-cai-dat",{"title":178,"path":207,"stem":208,"icon":181},"\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Fcu-phap-co-ban","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F2.cu-phap-co-ban",{"title":183,"path":210,"stem":211,"icon":186},"\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Ftruy-van-nang-cao","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F3.truy-van-nang-cao",{"title":188,"path":213,"stem":214,"icon":191},"\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Fdac-thu-performance","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F4.dac-thu-performance",{"title":193,"path":216,"stem":217,"icon":196},"\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Fcau-hoi-phong-van","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F5.cau-hoi-phong-van",{"title":219,"path":220,"stem":221,"icon":96},"6. Tích hợp C# và Postgres","\u002Ftu-hoc\u002Fdatabase\u002Fpostgresql\u002Ftich-hop-csharp","2.tu-hoc\u002F1.database\u002F3.postgresql\u002F6.tich-hop-csharp",{"title":223,"icon":224,"path":225,"stem":226,"children":227,"page":26},"MySQL","i-simple-icons-mysql","\u002Ftu-hoc\u002Fdatabase\u002Fmysql","2.tu-hoc\u002F1.database\u002F4.mysql",[228,231,234,237,240],{"title":173,"path":229,"stem":230,"icon":176},"\u002Ftu-hoc\u002Fdatabase\u002Fmysql\u002Fgioi-thieu-cai-dat","2.tu-hoc\u002F1.database\u002F4.mysql\u002F1.gioi-thieu-cai-dat",{"title":178,"path":232,"stem":233,"icon":181},"\u002Ftu-hoc\u002Fdatabase\u002Fmysql\u002Fcu-phap-co-ban","2.tu-hoc\u002F1.database\u002F4.mysql\u002F2.cu-phap-co-ban",{"title":183,"path":235,"stem":236,"icon":186},"\u002Ftu-hoc\u002Fdatabase\u002Fmysql\u002Ftruy-van-nang-cao","2.tu-hoc\u002F1.database\u002F4.mysql\u002F3.truy-van-nang-cao",{"title":188,"path":238,"stem":239,"icon":191},"\u002Ftu-hoc\u002Fdatabase\u002Fmysql\u002Fdac-thu-performance","2.tu-hoc\u002F1.database\u002F4.mysql\u002F4.dac-thu-performance",{"title":193,"path":241,"stem":242,"icon":196},"\u002Ftu-hoc\u002Fdatabase\u002Fmysql\u002Fcau-hoi-phong-van","2.tu-hoc\u002F1.database\u002F4.mysql\u002F5.cau-hoi-phong-van",{"title":244,"path":245,"stem":246,"icon":247},"So sánh 3 RDBMS","\u002Ftu-hoc\u002Fdatabase\u002Fso-sanh","2.tu-hoc\u002F1.database\u002F5.so-sanh","i-lucide-columns-3",{"title":249,"path":250,"stem":251,"children":252,"icon":254},"Supabase (BaaS)","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase","2.tu-hoc\u002F1.database\u002F6.supabase\u002Findex",[253,255,259,264,269,274,278,283],{"title":249,"path":250,"stem":251,"icon":254},"i-simple-icons-supabase",{"title":256,"path":257,"stem":258,"icon":68},"1. Database","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Fdatabase","2.tu-hoc\u002F1.database\u002F6.supabase\u002F1.database",{"title":260,"path":261,"stem":262,"icon":263},"2. Authentication","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Fauthentication","2.tu-hoc\u002F1.database\u002F6.supabase\u002F2.authentication","i-lucide-key",{"title":265,"path":266,"stem":267,"icon":268},"3. Storage & Realtime","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Fstorage-realtime","2.tu-hoc\u002F1.database\u002F6.supabase\u002F3.storage-realtime","i-lucide-zap",{"title":270,"path":271,"stem":272,"icon":273},"4. Edge Functions & AI","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Ffunctions-ai","2.tu-hoc\u002F1.database\u002F6.supabase\u002F4.functions-ai","i-lucide-brain",{"title":275,"path":276,"stem":277,"icon":181},"5. API & SDKs","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Fapi-sdk","2.tu-hoc\u002F1.database\u002F6.supabase\u002F5.api-sdk",{"title":279,"path":280,"stem":281,"icon":282},"6. Platform & Deploy","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Fplatform-deploy","2.tu-hoc\u002F1.database\u002F6.supabase\u002F6.platform-deploy","i-lucide-cloud",{"title":284,"path":285,"stem":286,"icon":196},"7. Interview & Q&A","\u002Ftu-hoc\u002Fdatabase\u002Fsupabase\u002Finterview","2.tu-hoc\u002F1.database\u002F6.supabase\u002F7.interview",{"title":288,"icon":289,"path":290,"stem":291,"children":292},"TypeScript","i-simple-icons-typescript","\u002Ftu-hoc\u002Ftypescript","2.tu-hoc\u002F2.typescript\u002Findex",[293,294,297,301,306],{"title":288,"path":290,"stem":291,"icon":289},{"title":173,"path":295,"stem":296,"icon":176},"\u002Ftu-hoc\u002Ftypescript\u002Fgioi-thieu-cai-dat","2.tu-hoc\u002F2.typescript\u002F1.gioi-thieu-cai-dat",{"title":298,"path":299,"stem":300,"icon":81},"2. Type System","\u002Ftu-hoc\u002Ftypescript\u002Ftype-system","2.tu-hoc\u002F2.typescript\u002F2.type-system",{"title":302,"path":303,"stem":304,"icon":305},"3. Advanced types","\u002Ftu-hoc\u002Ftypescript\u002Fadvanced-types","2.tu-hoc\u002F2.typescript\u002F3.advanced-types","i-lucide-braces",{"title":307,"path":308,"stem":309,"icon":196},"4. Q và A phỏng vấn","\u002Ftu-hoc\u002Ftypescript\u002Fcau-hoi-phong-van","2.tu-hoc\u002F2.typescript\u002F4.cau-hoi-phong-van",{"title":311,"icon":81,"path":312,"stem":313,"children":314},"OOP","\u002Ftu-hoc\u002Foop","2.tu-hoc\u002F3.oop\u002Findex",[315,316,321,326,330],{"title":311,"path":312,"stem":313,"icon":81},{"title":317,"path":318,"stem":319,"icon":320},"1. Bốn tính chất","\u002Ftu-hoc\u002Foop\u002F4-tinh-chat","2.tu-hoc\u002F3.oop\u002F1.4-tinh-chat","i-lucide-circle-dot",{"title":322,"path":323,"stem":324,"icon":325},"2. SOLID","\u002Ftu-hoc\u002Foop\u002Fsolid","2.tu-hoc\u002F3.oop\u002F2.solid","i-lucide-shield",{"title":327,"path":328,"stem":329,"icon":106},"3. Design Pattern","\u002Ftu-hoc\u002Foop\u002Fdesign-pattern","2.tu-hoc\u002F3.oop\u002F3.design-pattern",{"title":307,"path":331,"stem":332,"icon":196},"\u002Ftu-hoc\u002Foop\u002Fcau-hoi-phong-van","2.tu-hoc\u002F3.oop\u002F4.cau-hoi-phong-van",{"title":334,"icon":305,"path":335,"stem":336,"children":337},"Generic","\u002Ftu-hoc\u002Fgeneric","2.tu-hoc\u002F4.generic\u002Findex",[338,339,344,349,354],{"title":334,"path":335,"stem":336,"icon":305},{"title":340,"path":341,"stem":342,"icon":343},"1. Khái niệm và cú pháp","\u002Ftu-hoc\u002Fgeneric\u002Fkhai-niem","2.tu-hoc\u002F4.generic\u002F1.khai-niem","i-lucide-book",{"title":345,"path":346,"stem":347,"icon":348},"2. Constraint và Variance","\u002Ftu-hoc\u002Fgeneric\u002Fconstraint-variance","2.tu-hoc\u002F4.generic\u002F2.constraint-variance","i-lucide-filter",{"title":350,"path":351,"stem":352,"icon":353},"3. C# vs TS","\u002Ftu-hoc\u002Fgeneric\u002Fso-sanh","2.tu-hoc\u002F4.generic\u002F3.so-sanh","i-lucide-git-compare",{"title":307,"path":355,"stem":356,"icon":196},"\u002Ftu-hoc\u002Fgeneric\u002Fcau-hoi-phong-van","2.tu-hoc\u002F4.generic\u002F4.cau-hoi-phong-van",{"title":358,"icon":359,"path":360,"stem":361,"children":362},"Nuxt 4","i-simple-icons-nuxt","\u002Ftu-hoc\u002Fnuxt-4","2.tu-hoc\u002F5.nuxt-4\u002Findex",[363,364,367,372,376,379],{"title":358,"path":360,"stem":361,"icon":359},{"title":173,"path":365,"stem":366,"icon":176},"\u002Ftu-hoc\u002Fnuxt-4\u002Fgioi-thieu-cai-dat","2.tu-hoc\u002F5.nuxt-4\u002F1.gioi-thieu-cai-dat",{"title":368,"path":369,"stem":370,"icon":371},"2. Routing và Rendering","\u002Ftu-hoc\u002Fnuxt-4\u002Frouting-rendering","2.tu-hoc\u002F5.nuxt-4\u002F2.routing-rendering","i-lucide-route",{"title":373,"path":374,"stem":375,"icon":91},"3. Data và Server","\u002Ftu-hoc\u002Fnuxt-4\u002Fdata-server","2.tu-hoc\u002F5.nuxt-4\u002F3.data-server",{"title":307,"path":377,"stem":378,"icon":196},"\u002Ftu-hoc\u002Fnuxt-4\u002Fcau-hoi-phong-van","2.tu-hoc\u002F5.nuxt-4\u002F4.cau-hoi-phong-van",{"title":380,"path":381,"stem":382,"icon":383},"5. Practical Todo App","\u002Ftu-hoc\u002Fnuxt-4\u002Fpractical-todo-app","2.tu-hoc\u002F5.nuxt-4\u002F5.practical-todo-app","i-lucide-check-square",{"title":385,"path":386,"stem":387,"children":388,"icon":390},"Tailwind CSS","\u002Ftu-hoc\u002Ftailwindcss","2.tu-hoc\u002F6.tailwindcss\u002Findex",[389,391,396,401,406,411,416],{"title":385,"path":386,"stem":387,"icon":390},"i-simple-icons-tailwindcss",{"title":392,"path":393,"stem":394,"icon":395},"1. Layout & Spacing","\u002Ftu-hoc\u002Ftailwindcss\u002Flayout-spacing","2.tu-hoc\u002F6.tailwindcss\u002F1.layout-spacing","i-lucide-layout",{"title":397,"path":398,"stem":399,"icon":400},"2. Typography & Colors","\u002Ftu-hoc\u002Ftailwindcss\u002Ftypography-colors","2.tu-hoc\u002F6.tailwindcss\u002F2.typography-colors","i-lucide-type",{"title":402,"path":403,"stem":404,"icon":405},"3. Interactive & Effects","\u002Ftu-hoc\u002Ftailwindcss\u002Finteractive-effects","2.tu-hoc\u002F6.tailwindcss\u002F3.interactive-effects","i-lucide-sparkles",{"title":407,"path":408,"stem":409,"icon":410},"4. Responsive & Dark Mode","\u002Ftu-hoc\u002Ftailwindcss\u002Fresponsive-darkmode","2.tu-hoc\u002F6.tailwindcss\u002F4.responsive-darkmode","i-lucide-monitor-smartphone",{"title":412,"path":413,"stem":414,"icon":415},"5. Customization & Theme","\u002Ftu-hoc\u002Ftailwindcss\u002Fcustomization","2.tu-hoc\u002F6.tailwindcss\u002F5.customization","i-lucide-settings-2",{"title":417,"path":418,"stem":419,"icon":181},"6. Practical Projects","\u002Ftu-hoc\u002Ftailwindcss\u002Fpractical-projects","2.tu-hoc\u002F6.tailwindcss\u002F6.practical-projects",{"id":421,"title":422,"body":423,"description":18952,"extension":18953,"links":18954,"meta":18955,"navigation":18956,"path":393,"seo":18957,"stem":394,"__hash__":18958},"docs\u002F2.tu-hoc\u002F6.tailwindcss\u002F1.layout-spacing.md","Layout & Spacing — Container, Display, Flexbox, Grid",{"type":424,"value":425,"toc":18884},"minimark",[426,430,434,487,490,494,501,705,710,1028,1042,1052,1058,1533,1542,1549,1554,2033,2046,2048,2052,2124,2143,2286,2290,2491,2495,2500,2970,2983,2987,2992,3661,3674,3678,3689,4283,4300,4302,4306,4313,4317,4402,4572,4576,4581,5407,5429,5436,5503,5505,5509,5513,5662,5666,5822,5826,5882,5886,5891,6174,6187,6191,6196,6784,6808,6814,6819,7538,7547,7553,7558,7852,7861,7863,7867,7871,7987,7991,8066,8070,8162,8165,8688,8692,8697,9305,9309,9314,10143,10164,10168,10173,11698,11712,11714,11718,11722,11798,11802,11875,11879,11882,12005,12147,12151,12200,12408,12412,12562,12588,12592,12597,13484,13500,13504,13509,14026,14044,14046,14050,14054,14152,14156,14249,14269,14273,14339,14345,14350,14779,14792,14796,14801,15461,15503,15505,15509,15616,15620,15625,16949,16970,16972,16976,16979,17073,17259,17263,17268,18751,18767,18769,18773,18783,18840,18873,18880],[427,428,11],"h2",{"id":429},"tổng-quan",[431,432,433],"p",{},"Layout và spacing là nền tảng của mọi giao diện web. Tailwind CSS v4 cung cấp bộ utility cực mạnh cho display, position, flexbox, grid, spacing, sizing, overflow và scrollbar — tất cả đều map trực tiếp đến CSS nhưng nhanh hơn nhờ không phải viết CSS rời.",[435,436,439,451],"callout",{"color":437,"icon":438},"warning","i-lucide-star",[431,440,441,442,446,447],{},"⭐ ",[443,444,445],"strong",{},"Câu PV:"," ",[448,449,450],"em",{},"\"Tailwind CSS xử lý layout như thế nào so với CSS thuần?\"",[452,453,454],"blockquote",{},[431,455,456,457,461,462,465,466,461,469,472,473,465,476,479,480,465,483,486],{},"\"Tailwind cung cấp utility class map 1-1 với CSS properties — ",[458,459,460],"code",{},"flex"," = ",[458,463,464],{},"display: flex",", ",[458,467,468],{},"grid-cols-3",[458,470,471],{},"grid-template-columns: repeat(3, 1fr)",". Điểm mạnh: responsive variants (",[458,474,475],{},"md:flex",[458,477,478],{},"lg:grid-cols-4",") viết ngay trong HTML không cần media query riêng. Container queries cũng có sẵn (",[458,481,482],{},"@container",[458,484,485],{},"@md:grid-cols-2",") từ v4.0.\"",[488,489],"hr",{},[427,491,493],{"id":492},"_1-display","1. Display",[431,495,496,497,500],{},"Các giá trị ",[458,498,499],{},"display"," được ánh xạ thành class:",[502,503,504,520],"table",{},[505,506,507],"thead",{},[508,509,510,514,517],"tr",{},[511,512,513],"th",{},"Class",[511,515,516],{},"CSS",[511,518,519],{},"Ghi chú",[521,522,523,538,552,566,581,593,607,621,636,651,666],"tbody",{},[508,524,525,531,536],{},[526,527,528],"td",{},[458,529,530],{},"block",[526,532,533],{},[458,534,535],{},"display: block",[526,537],{},[508,539,540,545,550],{},[526,541,542],{},[458,543,544],{},"inline",[526,546,547],{},[458,548,549],{},"display: inline",[526,551],{},[508,553,554,559,564],{},[526,555,556],{},[458,557,558],{},"inline-block",[526,560,561],{},[458,562,563],{},"display: inline-block",[526,565],{},[508,567,568,573,578],{},[526,569,570],{},[458,571,572],{},"inline-flex",[526,574,575],{},[458,576,577],{},"display: inline-flex",[526,579,580],{},"Flex container nhưng inline",[508,582,583,587,591],{},[526,584,585],{},[458,586,460],{},[526,588,589],{},[458,590,464],{},[526,592],{},[508,594,595,600,605],{},[526,596,597],{},[458,598,599],{},"inline-grid",[526,601,602],{},[458,603,604],{},"display: inline-grid",[526,606],{},[508,608,609,614,619],{},[526,610,611],{},[458,612,613],{},"grid",[526,615,616],{},[458,617,618],{},"display: grid",[526,620],{},[508,622,623,628,633],{},[526,624,625],{},[458,626,627],{},"flow-root",[526,629,630],{},[458,631,632],{},"display: flow-root",[526,634,635],{},"Clear float không cần clearfix",[508,637,638,643,648],{},[526,639,640],{},[458,641,642],{},"hidden",[526,644,645],{},[458,646,647],{},"display: none",[526,649,650],{},"Ẩn element, xóa khỏi flow",[508,652,653,658,663],{},[526,654,655],{},[458,656,657],{},"contents",[526,659,660],{},[458,661,662],{},"display: contents",[526,664,665],{},"Element bị \"bỏ qua\", children lên thay",[508,667,668,696,702],{},[526,669,670,465,672,465,675,465,678,465,681,465,684,465,687,465,690,465,693],{},[458,671,502],{},[458,673,674],{},"table-row",[458,676,677],{},"table-cell",[458,679,680],{},"table-caption",[458,682,683],{},"table-column",[458,685,686],{},"table-column-group",[458,688,689],{},"table-footer-group",[458,691,692],{},"table-header-group",[458,694,695],{},"table-row-group",[526,697,698,701],{},[458,699,700],{},"display: table;"," v.v...",[526,703,704],{},"Layout kiểu bảng",[706,707,709],"h3",{"id":708},"ví-dụ-cơ-bản","Ví dụ cơ bản",[711,712,717],"pre",{"className":713,"code":714,"language":715,"meta":716,"style":716},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- Block vs Inline -->\n\u003Cdiv class=\"block bg-blue-200 p-2 mb-2\">Block — chiếm full width\u003C\u002Fdiv>\n\u003Cspan class=\"inline bg-green-200 p-2\">Inline 1\u003C\u002Fspan>\n\u003Cspan class=\"inline bg-green-200 p-2\">Inline 2\u003C\u002Fspan>\n\n\u003C!-- Inline-flex — container flex nhưng không ngắt dòng -->\n\u003Cspan class=\"inline-flex items-center gap-2 bg-yellow-200 px-3 py-1 rounded-full\">\n \u003Cspan class=\"w-2 h-2 bg-green-500 rounded-full\">\u003C\u002Fspan>\n Online\n\u003C\u002Fspan>\n\n\u003C!-- Contents — bỏ qua wrapper -->\n\u003Cdiv class=\"grid grid-cols-2 gap-4\">\n \u003Cdiv class=\"contents\">\n \u003Cdiv class=\"bg-red-200 p-4\">Item 1\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-red-200 p-4\">Item 2\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n","html","",[458,718,719,728,770,799,827,834,840,860,886,892,901,906,912,932,951,981,1009,1019],{"__ignoreMap":716},[720,721,724],"span",{"class":722,"line":723},"line",1,[720,725,727],{"class":726},"sHwdD","\u003C!-- Block vs Inline -->\n",[720,729,731,735,739,743,746,749,753,755,758,762,765,767],{"class":722,"line":730},2,[720,732,734],{"class":733},"sMK4o","\u003C",[720,736,738],{"class":737},"swJcz","div",[720,740,742],{"class":741},"spNyl"," class",[720,744,745],{"class":733},"=",[720,747,748],{"class":733},"\"",[720,750,752],{"class":751},"sfazB","block bg-blue-200 p-2 mb-2",[720,754,748],{"class":733},[720,756,757],{"class":733},">",[720,759,761],{"class":760},"sTEyZ","Block — chiếm full width",[720,763,764],{"class":733},"\u003C\u002F",[720,766,738],{"class":737},[720,768,769],{"class":733},">\n",[720,771,773,775,777,779,781,783,786,788,790,793,795,797],{"class":722,"line":772},3,[720,774,734],{"class":733},[720,776,720],{"class":737},[720,778,742],{"class":741},[720,780,745],{"class":733},[720,782,748],{"class":733},[720,784,785],{"class":751},"inline bg-green-200 p-2",[720,787,748],{"class":733},[720,789,757],{"class":733},[720,791,792],{"class":760},"Inline 1",[720,794,764],{"class":733},[720,796,720],{"class":737},[720,798,769],{"class":733},[720,800,802,804,806,808,810,812,814,816,818,821,823,825],{"class":722,"line":801},4,[720,803,734],{"class":733},[720,805,720],{"class":737},[720,807,742],{"class":741},[720,809,745],{"class":733},[720,811,748],{"class":733},[720,813,785],{"class":751},[720,815,748],{"class":733},[720,817,757],{"class":733},[720,819,820],{"class":760},"Inline 2",[720,822,764],{"class":733},[720,824,720],{"class":737},[720,826,769],{"class":733},[720,828,830],{"class":722,"line":829},5,[720,831,833],{"emptyLinePlaceholder":832},true,"\n",[720,835,837],{"class":722,"line":836},6,[720,838,839],{"class":726},"\u003C!-- Inline-flex — container flex nhưng không ngắt dòng -->\n",[720,841,843,845,847,849,851,853,856,858],{"class":722,"line":842},7,[720,844,734],{"class":733},[720,846,720],{"class":737},[720,848,742],{"class":741},[720,850,745],{"class":733},[720,852,748],{"class":733},[720,854,855],{"class":751},"inline-flex items-center gap-2 bg-yellow-200 px-3 py-1 rounded-full",[720,857,748],{"class":733},[720,859,769],{"class":733},[720,861,863,866,868,870,872,874,877,879,882,884],{"class":722,"line":862},8,[720,864,865],{"class":733}," \u003C",[720,867,720],{"class":737},[720,869,742],{"class":741},[720,871,745],{"class":733},[720,873,748],{"class":733},[720,875,876],{"class":751},"w-2 h-2 bg-green-500 rounded-full",[720,878,748],{"class":733},[720,880,881],{"class":733},">\u003C\u002F",[720,883,720],{"class":737},[720,885,769],{"class":733},[720,887,889],{"class":722,"line":888},9,[720,890,891],{"class":760}," Online\n",[720,893,895,897,899],{"class":722,"line":894},10,[720,896,764],{"class":733},[720,898,720],{"class":737},[720,900,769],{"class":733},[720,902,904],{"class":722,"line":903},11,[720,905,833],{"emptyLinePlaceholder":832},[720,907,909],{"class":722,"line":908},12,[720,910,911],{"class":726},"\u003C!-- Contents — bỏ qua wrapper -->\n",[720,913,915,917,919,921,923,925,928,930],{"class":722,"line":914},13,[720,916,734],{"class":733},[720,918,738],{"class":737},[720,920,742],{"class":741},[720,922,745],{"class":733},[720,924,748],{"class":733},[720,926,927],{"class":751},"grid grid-cols-2 gap-4",[720,929,748],{"class":733},[720,931,769],{"class":733},[720,933,935,937,939,941,943,945,947,949],{"class":722,"line":934},14,[720,936,865],{"class":733},[720,938,738],{"class":737},[720,940,742],{"class":741},[720,942,745],{"class":733},[720,944,748],{"class":733},[720,946,657],{"class":751},[720,948,748],{"class":733},[720,950,769],{"class":733},[720,952,954,957,959,961,963,965,968,970,972,975,977,979],{"class":722,"line":953},15,[720,955,956],{"class":733}," \u003C",[720,958,738],{"class":737},[720,960,742],{"class":741},[720,962,745],{"class":733},[720,964,748],{"class":733},[720,966,967],{"class":751},"bg-red-200 p-4",[720,969,748],{"class":733},[720,971,757],{"class":733},[720,973,974],{"class":760},"Item 1",[720,976,764],{"class":733},[720,978,738],{"class":737},[720,980,769],{"class":733},[720,982,984,986,988,990,992,994,996,998,1000,1003,1005,1007],{"class":722,"line":983},16,[720,985,956],{"class":733},[720,987,738],{"class":737},[720,989,742],{"class":741},[720,991,745],{"class":733},[720,993,748],{"class":733},[720,995,967],{"class":751},[720,997,748],{"class":733},[720,999,757],{"class":733},[720,1001,1002],{"class":760},"Item 2",[720,1004,764],{"class":733},[720,1006,738],{"class":737},[720,1008,769],{"class":733},[720,1010,1012,1015,1017],{"class":722,"line":1011},17,[720,1013,1014],{"class":733}," \u003C\u002F",[720,1016,738],{"class":737},[720,1018,769],{"class":733},[720,1020,1022,1024,1026],{"class":722,"line":1021},18,[720,1023,764],{"class":733},[720,1025,738],{"class":737},[720,1027,769],{"class":733},[435,1029,1032,1037,1038,1041],{"color":1030,"icon":1031},"primary","i-lucide-info",[443,1033,1034,1036],{},[458,1035,657],{}," hữu ích khi nào?"," Khi bạn có wrapper component nhưng không muốn nó ảnh hưởng đến grid\u002Fflex layout của parent. Ví dụ: ",[458,1039,1040],{},"\u003CCard>"," component render children trực tiếp vào grid cha mà không tạo wrapper div thừa.",[706,1043,1045,1046,1048,1049,1051],{"id":1044},"bài-tập-1-navigation-bar-với-flex-và-hidden-cho-mobile-toggle","Bài tập 1: Navigation bar với ",[458,1047,460],{}," và ",[458,1050,642],{}," cho mobile toggle",[431,1053,1054,1057],{},[443,1055,1056],{},"Yêu cầu:"," Tạo navigation bar có logo bên trái, menu links ở giữa, button bên phải. Trên mobile (\u003C 768px), menu links ẩn đi và hiển thị hamburger button.",[711,1059,1061],{"className":713,"code":1060,"language":715,"meta":716,"style":716},"\u003Cnav class=\"flex items-center justify-between px-6 py-4 bg-white shadow\">\n \u003C!-- Logo -->\n \u003Ca href=\"#\" class=\"text-xl font-bold text-blue-600\">Brand\u003C\u002Fa>\n\n \u003C!-- Menu links — ẩn trên mobile, hiện từ md trở lên -->\n \u003Cdiv class=\"hidden md:flex items-center gap-6\">\n \u003Ca href=\"#\" class=\"text-gray-700 hover:text-blue-600 transition-colors\">Home\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"text-gray-700 hover:text-blue-600 transition-colors\">Features\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"text-gray-700 hover:text-blue-600 transition-colors\">Pricing\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"text-gray-700 hover:text-blue-600 transition-colors\">About\u003C\u002Fa>\n \u003C\u002Fdiv>\n\n \u003C!-- Button bên phải -->\n \u003Cbutton class=\"hidden md:block bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors\">\n Get Started\n \u003C\u002Fbutton>\n\n \u003C!-- Hamburger — chỉ hiện trên mobile -->\n \u003Cbutton class=\"md:hidden text-gray-700\">\n \u003Csvg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M4 6h16M4 12h16M4 18h16\"\u002F>\n \u003C\u002Fsvg>\n \u003C\u002Fbutton>\n\u003C\u002Fnav>\n",[458,1062,1063,1083,1088,1129,1133,1138,1157,1195,1232,1269,1306,1314,1318,1323,1343,1348,1356,1360,1365,1385,1442,1487,1505,1515,1524],{"__ignoreMap":716},[720,1064,1065,1067,1070,1072,1074,1076,1079,1081],{"class":722,"line":723},[720,1066,734],{"class":733},[720,1068,1069],{"class":737},"nav",[720,1071,742],{"class":741},[720,1073,745],{"class":733},[720,1075,748],{"class":733},[720,1077,1078],{"class":751},"flex items-center justify-between px-6 py-4 bg-white shadow",[720,1080,748],{"class":733},[720,1082,769],{"class":733},[720,1084,1085],{"class":722,"line":730},[720,1086,1087],{"class":726}," \u003C!-- Logo -->\n",[720,1089,1090,1092,1095,1098,1100,1102,1105,1107,1109,1111,1113,1116,1118,1120,1123,1125,1127],{"class":722,"line":772},[720,1091,865],{"class":733},[720,1093,1094],{"class":737},"a",[720,1096,1097],{"class":741}," href",[720,1099,745],{"class":733},[720,1101,748],{"class":733},[720,1103,1104],{"class":751},"#",[720,1106,748],{"class":733},[720,1108,742],{"class":741},[720,1110,745],{"class":733},[720,1112,748],{"class":733},[720,1114,1115],{"class":751},"text-xl font-bold text-blue-600",[720,1117,748],{"class":733},[720,1119,757],{"class":733},[720,1121,1122],{"class":760},"Brand",[720,1124,764],{"class":733},[720,1126,1094],{"class":737},[720,1128,769],{"class":733},[720,1130,1131],{"class":722,"line":801},[720,1132,833],{"emptyLinePlaceholder":832},[720,1134,1135],{"class":722,"line":829},[720,1136,1137],{"class":726}," \u003C!-- Menu links — ẩn trên mobile, hiện từ md trở lên -->\n",[720,1139,1140,1142,1144,1146,1148,1150,1153,1155],{"class":722,"line":836},[720,1141,865],{"class":733},[720,1143,738],{"class":737},[720,1145,742],{"class":741},[720,1147,745],{"class":733},[720,1149,748],{"class":733},[720,1151,1152],{"class":751},"hidden md:flex items-center gap-6",[720,1154,748],{"class":733},[720,1156,769],{"class":733},[720,1158,1159,1161,1163,1165,1167,1169,1171,1173,1175,1177,1179,1182,1184,1186,1189,1191,1193],{"class":722,"line":842},[720,1160,956],{"class":733},[720,1162,1094],{"class":737},[720,1164,1097],{"class":741},[720,1166,745],{"class":733},[720,1168,748],{"class":733},[720,1170,1104],{"class":751},[720,1172,748],{"class":733},[720,1174,742],{"class":741},[720,1176,745],{"class":733},[720,1178,748],{"class":733},[720,1180,1181],{"class":751},"text-gray-700 hover:text-blue-600 transition-colors",[720,1183,748],{"class":733},[720,1185,757],{"class":733},[720,1187,1188],{"class":760},"Home",[720,1190,764],{"class":733},[720,1192,1094],{"class":737},[720,1194,769],{"class":733},[720,1196,1197,1199,1201,1203,1205,1207,1209,1211,1213,1215,1217,1219,1221,1223,1226,1228,1230],{"class":722,"line":862},[720,1198,956],{"class":733},[720,1200,1094],{"class":737},[720,1202,1097],{"class":741},[720,1204,745],{"class":733},[720,1206,748],{"class":733},[720,1208,1104],{"class":751},[720,1210,748],{"class":733},[720,1212,742],{"class":741},[720,1214,745],{"class":733},[720,1216,748],{"class":733},[720,1218,1181],{"class":751},[720,1220,748],{"class":733},[720,1222,757],{"class":733},[720,1224,1225],{"class":760},"Features",[720,1227,764],{"class":733},[720,1229,1094],{"class":737},[720,1231,769],{"class":733},[720,1233,1234,1236,1238,1240,1242,1244,1246,1248,1250,1252,1254,1256,1258,1260,1263,1265,1267],{"class":722,"line":888},[720,1235,956],{"class":733},[720,1237,1094],{"class":737},[720,1239,1097],{"class":741},[720,1241,745],{"class":733},[720,1243,748],{"class":733},[720,1245,1104],{"class":751},[720,1247,748],{"class":733},[720,1249,742],{"class":741},[720,1251,745],{"class":733},[720,1253,748],{"class":733},[720,1255,1181],{"class":751},[720,1257,748],{"class":733},[720,1259,757],{"class":733},[720,1261,1262],{"class":760},"Pricing",[720,1264,764],{"class":733},[720,1266,1094],{"class":737},[720,1268,769],{"class":733},[720,1270,1271,1273,1275,1277,1279,1281,1283,1285,1287,1289,1291,1293,1295,1297,1300,1302,1304],{"class":722,"line":894},[720,1272,956],{"class":733},[720,1274,1094],{"class":737},[720,1276,1097],{"class":741},[720,1278,745],{"class":733},[720,1280,748],{"class":733},[720,1282,1104],{"class":751},[720,1284,748],{"class":733},[720,1286,742],{"class":741},[720,1288,745],{"class":733},[720,1290,748],{"class":733},[720,1292,1181],{"class":751},[720,1294,748],{"class":733},[720,1296,757],{"class":733},[720,1298,1299],{"class":760},"About",[720,1301,764],{"class":733},[720,1303,1094],{"class":737},[720,1305,769],{"class":733},[720,1307,1308,1310,1312],{"class":722,"line":903},[720,1309,1014],{"class":733},[720,1311,738],{"class":737},[720,1313,769],{"class":733},[720,1315,1316],{"class":722,"line":908},[720,1317,833],{"emptyLinePlaceholder":832},[720,1319,1320],{"class":722,"line":914},[720,1321,1322],{"class":726}," \u003C!-- Button bên phải -->\n",[720,1324,1325,1327,1330,1332,1334,1336,1339,1341],{"class":722,"line":934},[720,1326,865],{"class":733},[720,1328,1329],{"class":737},"button",[720,1331,742],{"class":741},[720,1333,745],{"class":733},[720,1335,748],{"class":733},[720,1337,1338],{"class":751},"hidden md:block bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors",[720,1340,748],{"class":733},[720,1342,769],{"class":733},[720,1344,1345],{"class":722,"line":953},[720,1346,1347],{"class":760}," Get Started\n",[720,1349,1350,1352,1354],{"class":722,"line":983},[720,1351,1014],{"class":733},[720,1353,1329],{"class":737},[720,1355,769],{"class":733},[720,1357,1358],{"class":722,"line":1011},[720,1359,833],{"emptyLinePlaceholder":832},[720,1361,1362],{"class":722,"line":1021},[720,1363,1364],{"class":726}," \u003C!-- Hamburger — chỉ hiện trên mobile -->\n",[720,1366,1368,1370,1372,1374,1376,1378,1381,1383],{"class":722,"line":1367},19,[720,1369,865],{"class":733},[720,1371,1329],{"class":737},[720,1373,742],{"class":741},[720,1375,745],{"class":733},[720,1377,748],{"class":733},[720,1379,1380],{"class":751},"md:hidden text-gray-700",[720,1382,748],{"class":733},[720,1384,769],{"class":733},[720,1386,1388,1390,1393,1395,1397,1399,1402,1404,1407,1409,1411,1414,1416,1419,1421,1423,1426,1428,1431,1433,1435,1438,1440],{"class":722,"line":1387},20,[720,1389,956],{"class":733},[720,1391,1392],{"class":737},"svg",[720,1394,742],{"class":741},[720,1396,745],{"class":733},[720,1398,748],{"class":733},[720,1400,1401],{"class":751},"w-6 h-6",[720,1403,748],{"class":733},[720,1405,1406],{"class":741}," fill",[720,1408,745],{"class":733},[720,1410,748],{"class":733},[720,1412,1413],{"class":751},"none",[720,1415,748],{"class":733},[720,1417,1418],{"class":741}," stroke",[720,1420,745],{"class":733},[720,1422,748],{"class":733},[720,1424,1425],{"class":751},"currentColor",[720,1427,748],{"class":733},[720,1429,1430],{"class":741}," viewBox",[720,1432,745],{"class":733},[720,1434,748],{"class":733},[720,1436,1437],{"class":751},"0 0 24 24",[720,1439,748],{"class":733},[720,1441,769],{"class":733},[720,1443,1445,1448,1451,1454,1456,1458,1461,1463,1466,1468,1470,1472,1474,1477,1479,1481,1484],{"class":722,"line":1444},21,[720,1446,1447],{"class":733}," \u003C",[720,1449,1450],{"class":737},"path",[720,1452,1453],{"class":741}," stroke-linecap",[720,1455,745],{"class":733},[720,1457,748],{"class":733},[720,1459,1460],{"class":751},"round",[720,1462,748],{"class":733},[720,1464,1465],{"class":741}," stroke-linejoin",[720,1467,745],{"class":733},[720,1469,748],{"class":733},[720,1471,1460],{"class":751},[720,1473,748],{"class":733},[720,1475,1476],{"class":741}," stroke-width",[720,1478,745],{"class":733},[720,1480,748],{"class":733},[720,1482,1483],{"class":751},"2",[720,1485,1486],{"class":733},"\"\n",[720,1488,1490,1493,1495,1497,1500,1502],{"class":722,"line":1489},22,[720,1491,1492],{"class":741}," d",[720,1494,745],{"class":733},[720,1496,748],{"class":733},[720,1498,1499],{"class":751},"M4 6h16M4 12h16M4 18h16",[720,1501,748],{"class":733},[720,1503,1504],{"class":733},"\u002F>\n",[720,1506,1508,1511,1513],{"class":722,"line":1507},23,[720,1509,1510],{"class":733}," \u003C\u002F",[720,1512,1392],{"class":737},[720,1514,769],{"class":733},[720,1516,1518,1520,1522],{"class":722,"line":1517},24,[720,1519,1014],{"class":733},[720,1521,1329],{"class":737},[720,1523,769],{"class":733},[720,1525,1527,1529,1531],{"class":722,"line":1526},25,[720,1528,764],{"class":733},[720,1530,1069],{"class":737},[720,1532,769],{"class":733},[435,1534,441,1535,446,1538,1541],{"color":437,"icon":438},[443,1536,1537],{},"Ý chính:",[458,1539,1540],{},"hidden md:flex"," là pattern mobile-first kinh điển trong Tailwind — element bắt đầu ở trạng thái ẩn, hiện ra từ breakpoint chỉ định.",[706,1543,1545,1546,1548],{"id":1544},"bài-tập-2-hideshow-sidebar-với-hidden-breakpoint-variants","Bài tập 2: Hide\u002Fshow sidebar với ",[458,1547,642],{}," + breakpoint variants",[431,1550,1551,1553],{},[443,1552,1056],{}," Layout có sidebar bên trái. Trên mobile, sidebar bị ẩn, chỉ hiện khi bấm toggle. Trên desktop (lg), sidebar luôn hiện.",[711,1555,1557],{"className":713,"code":1556,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"flex min-h-screen\">\n \u003C!-- Overlay — chỉ trên mobile khi sidebar mở -->\n \u003Cdiv class=\"fixed inset-0 bg-black\u002F50 z-10 lg:hidden\" id=\"overlay\">\u003C\u002Fdiv>\n\n \u003C!-- Sidebar — ẩn mobile mặc định, luôn hiện trên lg -->\n \u003Caside class=\"fixed lg:static inset-y-0 left-0 z-20 w-64 bg-gray-900 text-white\n -translate-x-full lg:translate-x-0 transition-transform duration-300\"\n id=\"sidebar\">\n \u003Cdiv class=\"p-6\">\n \u003Ch2 class=\"text-xl font-bold mb-6\">Sidebar\u003C\u002Fh2>\n \u003Cnav class=\"flex flex-col gap-3\">\n \u003Ca href=\"#\" class=\"text-gray-300 hover:text-white transition-colors\">Dashboard\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"text-gray-300 hover:text-white transition-colors\">Analytics\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"text-gray-300 hover:text-white transition-colors\">Settings\u003C\u002Fa>\n \u003C\u002Fnav>\n \u003C\u002Fdiv>\n \u003C\u002Faside>\n\n \u003C!-- Main content -->\n \u003Cmain class=\"flex-1 p-6 bg-gray-100\">\n \u003Cbutton class=\"lg:hidden mb-4 px-3 py-2 bg-gray-800 text-white rounded\"\n onclick=\"document.getElementById('sidebar').classList.toggle('-translate-x-full')\">\n Toggle Sidebar\n \u003C\u002Fbutton>\n \u003Ch1 class=\"text-2xl font-bold\">Main Content\u003C\u002Fh1>\n \u003C\u002Fmain>\n\u003C\u002Fdiv>\n",[458,1558,1559,1578,1583,1618,1622,1627,1643,1650,1666,1685,1713,1732,1771,1808,1845,1854,1862,1870,1874,1879,1899,1916,1973,1978,1986,2015,2024],{"__ignoreMap":716},[720,1560,1561,1563,1565,1567,1569,1571,1574,1576],{"class":722,"line":723},[720,1562,734],{"class":733},[720,1564,738],{"class":737},[720,1566,742],{"class":741},[720,1568,745],{"class":733},[720,1570,748],{"class":733},[720,1572,1573],{"class":751},"flex min-h-screen",[720,1575,748],{"class":733},[720,1577,769],{"class":733},[720,1579,1580],{"class":722,"line":730},[720,1581,1582],{"class":726}," \u003C!-- Overlay — chỉ trên mobile khi sidebar mở -->\n",[720,1584,1585,1587,1589,1591,1593,1595,1598,1600,1603,1605,1607,1610,1612,1614,1616],{"class":722,"line":772},[720,1586,865],{"class":733},[720,1588,738],{"class":737},[720,1590,742],{"class":741},[720,1592,745],{"class":733},[720,1594,748],{"class":733},[720,1596,1597],{"class":751},"fixed inset-0 bg-black\u002F50 z-10 lg:hidden",[720,1599,748],{"class":733},[720,1601,1602],{"class":741}," id",[720,1604,745],{"class":733},[720,1606,748],{"class":733},[720,1608,1609],{"class":751},"overlay",[720,1611,748],{"class":733},[720,1613,881],{"class":733},[720,1615,738],{"class":737},[720,1617,769],{"class":733},[720,1619,1620],{"class":722,"line":801},[720,1621,833],{"emptyLinePlaceholder":832},[720,1623,1624],{"class":722,"line":829},[720,1625,1626],{"class":726}," \u003C!-- Sidebar — ẩn mobile mặc định, luôn hiện trên lg -->\n",[720,1628,1629,1631,1634,1636,1638,1640],{"class":722,"line":836},[720,1630,865],{"class":733},[720,1632,1633],{"class":737},"aside",[720,1635,742],{"class":741},[720,1637,745],{"class":733},[720,1639,748],{"class":733},[720,1641,1642],{"class":751},"fixed lg:static inset-y-0 left-0 z-20 w-64 bg-gray-900 text-white\n",[720,1644,1645,1648],{"class":722,"line":842},[720,1646,1647],{"class":751}," -translate-x-full lg:translate-x-0 transition-transform duration-300",[720,1649,1486],{"class":733},[720,1651,1652,1655,1657,1659,1662,1664],{"class":722,"line":862},[720,1653,1654],{"class":741}," id",[720,1656,745],{"class":733},[720,1658,748],{"class":733},[720,1660,1661],{"class":751},"sidebar",[720,1663,748],{"class":733},[720,1665,769],{"class":733},[720,1667,1668,1670,1672,1674,1676,1678,1681,1683],{"class":722,"line":888},[720,1669,956],{"class":733},[720,1671,738],{"class":737},[720,1673,742],{"class":741},[720,1675,745],{"class":733},[720,1677,748],{"class":733},[720,1679,1680],{"class":751},"p-6",[720,1682,748],{"class":733},[720,1684,769],{"class":733},[720,1686,1687,1689,1691,1693,1695,1697,1700,1702,1704,1707,1709,1711],{"class":722,"line":894},[720,1688,1447],{"class":733},[720,1690,427],{"class":737},[720,1692,742],{"class":741},[720,1694,745],{"class":733},[720,1696,748],{"class":733},[720,1698,1699],{"class":751},"text-xl font-bold mb-6",[720,1701,748],{"class":733},[720,1703,757],{"class":733},[720,1705,1706],{"class":760},"Sidebar",[720,1708,764],{"class":733},[720,1710,427],{"class":737},[720,1712,769],{"class":733},[720,1714,1715,1717,1719,1721,1723,1725,1728,1730],{"class":722,"line":903},[720,1716,1447],{"class":733},[720,1718,1069],{"class":737},[720,1720,742],{"class":741},[720,1722,745],{"class":733},[720,1724,748],{"class":733},[720,1726,1727],{"class":751},"flex flex-col gap-3",[720,1729,748],{"class":733},[720,1731,769],{"class":733},[720,1733,1734,1737,1739,1741,1743,1745,1747,1749,1751,1753,1755,1758,1760,1762,1765,1767,1769],{"class":722,"line":908},[720,1735,1736],{"class":733}," \u003C",[720,1738,1094],{"class":737},[720,1740,1097],{"class":741},[720,1742,745],{"class":733},[720,1744,748],{"class":733},[720,1746,1104],{"class":751},[720,1748,748],{"class":733},[720,1750,742],{"class":741},[720,1752,745],{"class":733},[720,1754,748],{"class":733},[720,1756,1757],{"class":751},"text-gray-300 hover:text-white transition-colors",[720,1759,748],{"class":733},[720,1761,757],{"class":733},[720,1763,1764],{"class":760},"Dashboard",[720,1766,764],{"class":733},[720,1768,1094],{"class":737},[720,1770,769],{"class":733},[720,1772,1773,1775,1777,1779,1781,1783,1785,1787,1789,1791,1793,1795,1797,1799,1802,1804,1806],{"class":722,"line":914},[720,1774,1736],{"class":733},[720,1776,1094],{"class":737},[720,1778,1097],{"class":741},[720,1780,745],{"class":733},[720,1782,748],{"class":733},[720,1784,1104],{"class":751},[720,1786,748],{"class":733},[720,1788,742],{"class":741},[720,1790,745],{"class":733},[720,1792,748],{"class":733},[720,1794,1757],{"class":751},[720,1796,748],{"class":733},[720,1798,757],{"class":733},[720,1800,1801],{"class":760},"Analytics",[720,1803,764],{"class":733},[720,1805,1094],{"class":737},[720,1807,769],{"class":733},[720,1809,1810,1812,1814,1816,1818,1820,1822,1824,1826,1828,1830,1832,1834,1836,1839,1841,1843],{"class":722,"line":934},[720,1811,1736],{"class":733},[720,1813,1094],{"class":737},[720,1815,1097],{"class":741},[720,1817,745],{"class":733},[720,1819,748],{"class":733},[720,1821,1104],{"class":751},[720,1823,748],{"class":733},[720,1825,742],{"class":741},[720,1827,745],{"class":733},[720,1829,748],{"class":733},[720,1831,1757],{"class":751},[720,1833,748],{"class":733},[720,1835,757],{"class":733},[720,1837,1838],{"class":760},"Settings",[720,1840,764],{"class":733},[720,1842,1094],{"class":737},[720,1844,769],{"class":733},[720,1846,1847,1850,1852],{"class":722,"line":953},[720,1848,1849],{"class":733}," \u003C\u002F",[720,1851,1069],{"class":737},[720,1853,769],{"class":733},[720,1855,1856,1858,1860],{"class":722,"line":983},[720,1857,1510],{"class":733},[720,1859,738],{"class":737},[720,1861,769],{"class":733},[720,1863,1864,1866,1868],{"class":722,"line":1011},[720,1865,1014],{"class":733},[720,1867,1633],{"class":737},[720,1869,769],{"class":733},[720,1871,1872],{"class":722,"line":1021},[720,1873,833],{"emptyLinePlaceholder":832},[720,1875,1876],{"class":722,"line":1367},[720,1877,1878],{"class":726}," \u003C!-- Main content -->\n",[720,1880,1881,1883,1886,1888,1890,1892,1895,1897],{"class":722,"line":1387},[720,1882,865],{"class":733},[720,1884,1885],{"class":737},"main",[720,1887,742],{"class":741},[720,1889,745],{"class":733},[720,1891,748],{"class":733},[720,1893,1894],{"class":751},"flex-1 p-6 bg-gray-100",[720,1896,748],{"class":733},[720,1898,769],{"class":733},[720,1900,1901,1903,1905,1907,1909,1911,1914],{"class":722,"line":1444},[720,1902,956],{"class":733},[720,1904,1329],{"class":737},[720,1906,742],{"class":741},[720,1908,745],{"class":733},[720,1910,748],{"class":733},[720,1912,1913],{"class":751},"lg:hidden mb-4 px-3 py-2 bg-gray-800 text-white rounded",[720,1915,1486],{"class":733},[720,1917,1918,1921,1923,1925,1928,1931,1935,1938,1941,1943,1945,1948,1950,1953,1955,1958,1960,1962,1965,1967,1969,1971],{"class":722,"line":1489},[720,1919,1920],{"class":741}," onclick",[720,1922,745],{"class":733},[720,1924,748],{"class":733},[720,1926,1927],{"class":760},"document",[720,1929,1930],{"class":733},".",[720,1932,1934],{"class":1933},"s2Zo4","getElementById",[720,1936,1937],{"class":751},"(",[720,1939,1940],{"class":733},"'",[720,1942,1661],{"class":751},[720,1944,1940],{"class":733},[720,1946,1947],{"class":751},")",[720,1949,1930],{"class":733},[720,1951,1952],{"class":760},"classList",[720,1954,1930],{"class":733},[720,1956,1957],{"class":1933},"toggle",[720,1959,1937],{"class":751},[720,1961,1940],{"class":733},[720,1963,1964],{"class":751},"-translate-x-full",[720,1966,1940],{"class":733},[720,1968,1947],{"class":751},[720,1970,748],{"class":733},[720,1972,769],{"class":733},[720,1974,1975],{"class":722,"line":1507},[720,1976,1977],{"class":760}," Toggle Sidebar\n",[720,1979,1980,1982,1984],{"class":722,"line":1517},[720,1981,1510],{"class":733},[720,1983,1329],{"class":737},[720,1985,769],{"class":733},[720,1987,1988,1990,1993,1995,1997,1999,2002,2004,2006,2009,2011,2013],{"class":722,"line":1526},[720,1989,956],{"class":733},[720,1991,1992],{"class":737},"h1",[720,1994,742],{"class":741},[720,1996,745],{"class":733},[720,1998,748],{"class":733},[720,2000,2001],{"class":751},"text-2xl font-bold",[720,2003,748],{"class":733},[720,2005,757],{"class":733},[720,2007,2008],{"class":760},"Main Content",[720,2010,764],{"class":733},[720,2012,1992],{"class":737},[720,2014,769],{"class":733},[720,2016,2018,2020,2022],{"class":722,"line":2017},26,[720,2019,1014],{"class":733},[720,2021,1885],{"class":737},[720,2023,769],{"class":733},[720,2025,2027,2029,2031],{"class":722,"line":2026},27,[720,2028,764],{"class":733},[720,2030,738],{"class":737},[720,2032,769],{"class":733},[435,2034,441,2035,446,2038,2041,2042,2045],{"color":437,"icon":438},[443,2036,2037],{},"Pattern quan trọng:",[458,2039,2040],{},"fixed lg:static"," — thay đổi hoàn toàn positioning context giữa mobile và desktop. Kết hợp ",[458,2043,2044],{},"-translate-x-full lg:translate-x-0"," để slide in\u002Fout trên mobile.",[488,2047],{},[427,2049,2051],{"id":2050},"_2-position","2. Position",[502,2053,2054,2062],{},[505,2055,2056],{},[508,2057,2058,2060],{},[511,2059,513],{},[511,2061,516],{},[521,2063,2064,2076,2088,2100,2112],{},[508,2065,2066,2071],{},[526,2067,2068],{},[458,2069,2070],{},"static",[526,2072,2073],{},[458,2074,2075],{},"position: static",[508,2077,2078,2083],{},[526,2079,2080],{},[458,2081,2082],{},"fixed",[526,2084,2085],{},[458,2086,2087],{},"position: fixed",[508,2089,2090,2095],{},[526,2091,2092],{},[458,2093,2094],{},"absolute",[526,2096,2097],{},[458,2098,2099],{},"position: absolute",[508,2101,2102,2107],{},[526,2103,2104],{},[458,2105,2106],{},"relative",[526,2108,2109],{},[458,2110,2111],{},"position: relative",[508,2113,2114,2119],{},[526,2115,2116],{},[458,2117,2118],{},"sticky",[526,2120,2121],{},[458,2122,2123],{},"position: sticky",[706,2125,2127,2128,465,2131,465,2134,465,2137,465,2140,1947],{"id":2126},"inset-utilities-inset-top-right-bottom-left","Inset utilities (",[458,2129,2130],{},"inset-*",[458,2132,2133],{},"top-*",[458,2135,2136],{},"right-*",[458,2138,2139],{},"bottom-*",[458,2141,2142],{},"left-*",[711,2144,2146],{"className":713,"code":2145,"language":715,"meta":716,"style":716},"\u003C!-- Fixed to top -->\n\u003Cdiv class=\"fixed top-0 inset-x-0 bg-white shadow z-50\">Fixed Header\u003C\u002Fdiv>\n\n\u003C!-- Absolute centered -->\n\u003Cdiv class=\"relative h-64 bg-gray-200\">\n \u003Cdiv class=\"absolute top-1\u002F2 left-1\u002F2 -translate-x-1\u002F2 -translate-y-1\u002F2 bg-blue-500 text-white p-4 rounded\">\n Centered\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- Sticky -->\n\u003Cdiv class=\"sticky top-4 bg-yellow-200 p-2 z-10\">Sticky — dừng ở top 16px\u003C\u002Fdiv>\n",[458,2147,2148,2153,2181,2185,2190,2209,2228,2233,2241,2249,2253,2258],{"__ignoreMap":716},[720,2149,2150],{"class":722,"line":723},[720,2151,2152],{"class":726},"\u003C!-- Fixed to top -->\n",[720,2154,2155,2157,2159,2161,2163,2165,2168,2170,2172,2175,2177,2179],{"class":722,"line":730},[720,2156,734],{"class":733},[720,2158,738],{"class":737},[720,2160,742],{"class":741},[720,2162,745],{"class":733},[720,2164,748],{"class":733},[720,2166,2167],{"class":751},"fixed top-0 inset-x-0 bg-white shadow z-50",[720,2169,748],{"class":733},[720,2171,757],{"class":733},[720,2173,2174],{"class":760},"Fixed Header",[720,2176,764],{"class":733},[720,2178,738],{"class":737},[720,2180,769],{"class":733},[720,2182,2183],{"class":722,"line":772},[720,2184,833],{"emptyLinePlaceholder":832},[720,2186,2187],{"class":722,"line":801},[720,2188,2189],{"class":726},"\u003C!-- Absolute centered -->\n",[720,2191,2192,2194,2196,2198,2200,2202,2205,2207],{"class":722,"line":829},[720,2193,734],{"class":733},[720,2195,738],{"class":737},[720,2197,742],{"class":741},[720,2199,745],{"class":733},[720,2201,748],{"class":733},[720,2203,2204],{"class":751},"relative h-64 bg-gray-200",[720,2206,748],{"class":733},[720,2208,769],{"class":733},[720,2210,2211,2213,2215,2217,2219,2221,2224,2226],{"class":722,"line":836},[720,2212,865],{"class":733},[720,2214,738],{"class":737},[720,2216,742],{"class":741},[720,2218,745],{"class":733},[720,2220,748],{"class":733},[720,2222,2223],{"class":751},"absolute top-1\u002F2 left-1\u002F2 -translate-x-1\u002F2 -translate-y-1\u002F2 bg-blue-500 text-white p-4 rounded",[720,2225,748],{"class":733},[720,2227,769],{"class":733},[720,2229,2230],{"class":722,"line":842},[720,2231,2232],{"class":760}," Centered\n",[720,2234,2235,2237,2239],{"class":722,"line":862},[720,2236,1014],{"class":733},[720,2238,738],{"class":737},[720,2240,769],{"class":733},[720,2242,2243,2245,2247],{"class":722,"line":888},[720,2244,764],{"class":733},[720,2246,738],{"class":737},[720,2248,769],{"class":733},[720,2250,2251],{"class":722,"line":894},[720,2252,833],{"emptyLinePlaceholder":832},[720,2254,2255],{"class":722,"line":903},[720,2256,2257],{"class":726},"\u003C!-- Sticky -->\n",[720,2259,2260,2262,2264,2266,2268,2270,2273,2275,2277,2280,2282,2284],{"class":722,"line":908},[720,2261,734],{"class":733},[720,2263,738],{"class":737},[720,2265,742],{"class":741},[720,2267,745],{"class":733},[720,2269,748],{"class":733},[720,2271,2272],{"class":751},"sticky top-4 bg-yellow-200 p-2 z-10",[720,2274,748],{"class":733},[720,2276,757],{"class":733},[720,2278,2279],{"class":760},"Sticky — dừng ở top 16px",[720,2281,764],{"class":733},[720,2283,738],{"class":737},[720,2285,769],{"class":733},[706,2287,2289],{"id":2288},"z-index","Z-Index",[711,2291,2293],{"className":713,"code":2292,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"z-0 bg-red-200 p-4\">z-0\u003C\u002Fdiv>\n\u003Cdiv class=\"z-10 bg-blue-200 p-4\">z-10\u003C\u002Fdiv>\n\u003Cdiv class=\"z-20 bg-green-200 p-4\">z-20\u003C\u002Fdiv>\n\u003Cdiv class=\"z-30 bg-purple-200 p-4\">z-30\u003C\u002Fdiv>\n\u003Cdiv class=\"z-40 bg-yellow-200 p-4\">z-40\u003C\u002Fdiv>\n\u003Cdiv class=\"z-50 bg-pink-200 p-4\">z-50\u003C\u002Fdiv>\n\u003Cdiv class=\"z-auto bg-gray-200 p-4\">z-auto\u003C\u002Fdiv>\n",[458,2294,2295,2323,2351,2379,2407,2435,2463],{"__ignoreMap":716},[720,2296,2297,2299,2301,2303,2305,2307,2310,2312,2314,2317,2319,2321],{"class":722,"line":723},[720,2298,734],{"class":733},[720,2300,738],{"class":737},[720,2302,742],{"class":741},[720,2304,745],{"class":733},[720,2306,748],{"class":733},[720,2308,2309],{"class":751},"z-0 bg-red-200 p-4",[720,2311,748],{"class":733},[720,2313,757],{"class":733},[720,2315,2316],{"class":760},"z-0",[720,2318,764],{"class":733},[720,2320,738],{"class":737},[720,2322,769],{"class":733},[720,2324,2325,2327,2329,2331,2333,2335,2338,2340,2342,2345,2347,2349],{"class":722,"line":730},[720,2326,734],{"class":733},[720,2328,738],{"class":737},[720,2330,742],{"class":741},[720,2332,745],{"class":733},[720,2334,748],{"class":733},[720,2336,2337],{"class":751},"z-10 bg-blue-200 p-4",[720,2339,748],{"class":733},[720,2341,757],{"class":733},[720,2343,2344],{"class":760},"z-10",[720,2346,764],{"class":733},[720,2348,738],{"class":737},[720,2350,769],{"class":733},[720,2352,2353,2355,2357,2359,2361,2363,2366,2368,2370,2373,2375,2377],{"class":722,"line":772},[720,2354,734],{"class":733},[720,2356,738],{"class":737},[720,2358,742],{"class":741},[720,2360,745],{"class":733},[720,2362,748],{"class":733},[720,2364,2365],{"class":751},"z-20 bg-green-200 p-4",[720,2367,748],{"class":733},[720,2369,757],{"class":733},[720,2371,2372],{"class":760},"z-20",[720,2374,764],{"class":733},[720,2376,738],{"class":737},[720,2378,769],{"class":733},[720,2380,2381,2383,2385,2387,2389,2391,2394,2396,2398,2401,2403,2405],{"class":722,"line":801},[720,2382,734],{"class":733},[720,2384,738],{"class":737},[720,2386,742],{"class":741},[720,2388,745],{"class":733},[720,2390,748],{"class":733},[720,2392,2393],{"class":751},"z-30 bg-purple-200 p-4",[720,2395,748],{"class":733},[720,2397,757],{"class":733},[720,2399,2400],{"class":760},"z-30",[720,2402,764],{"class":733},[720,2404,738],{"class":737},[720,2406,769],{"class":733},[720,2408,2409,2411,2413,2415,2417,2419,2422,2424,2426,2429,2431,2433],{"class":722,"line":829},[720,2410,734],{"class":733},[720,2412,738],{"class":737},[720,2414,742],{"class":741},[720,2416,745],{"class":733},[720,2418,748],{"class":733},[720,2420,2421],{"class":751},"z-40 bg-yellow-200 p-4",[720,2423,748],{"class":733},[720,2425,757],{"class":733},[720,2427,2428],{"class":760},"z-40",[720,2430,764],{"class":733},[720,2432,738],{"class":737},[720,2434,769],{"class":733},[720,2436,2437,2439,2441,2443,2445,2447,2450,2452,2454,2457,2459,2461],{"class":722,"line":836},[720,2438,734],{"class":733},[720,2440,738],{"class":737},[720,2442,742],{"class":741},[720,2444,745],{"class":733},[720,2446,748],{"class":733},[720,2448,2449],{"class":751},"z-50 bg-pink-200 p-4",[720,2451,748],{"class":733},[720,2453,757],{"class":733},[720,2455,2456],{"class":760},"z-50",[720,2458,764],{"class":733},[720,2460,738],{"class":737},[720,2462,769],{"class":733},[720,2464,2465,2467,2469,2471,2473,2475,2478,2480,2482,2485,2487,2489],{"class":722,"line":842},[720,2466,734],{"class":733},[720,2468,738],{"class":737},[720,2470,742],{"class":741},[720,2472,745],{"class":733},[720,2474,748],{"class":733},[720,2476,2477],{"class":751},"z-auto bg-gray-200 p-4",[720,2479,748],{"class":733},[720,2481,757],{"class":733},[720,2483,2484],{"class":760},"z-auto",[720,2486,764],{"class":733},[720,2488,738],{"class":737},[720,2490,769],{"class":733},[706,2492,2494],{"id":2493},"bài-tập-3-fixed-header-luôn-trên-cùng-khi-scroll","Bài tập 3: Fixed header luôn trên cùng khi scroll",[431,2496,2497,2499],{},[443,2498,1056],{}," Header cố định trên cùng, không bị nội dung đè lên khi scroll. Nội dung bên dưới cuộn bình thường.",[711,2501,2503],{"className":713,"code":2502,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"min-h-[200vh]\">\n \u003C!-- Fixed header -->\n \u003Cheader class=\"fixed top-0 inset-x-0 z-50 bg-white\u002F80 backdrop-blur-md shadow-sm\">\n \u003Cdiv class=\"max-w-6xl mx-auto flex items-center justify-between px-6 py-4\">\n \u003Cspan class=\"text-xl font-bold\">My App\u003C\u002Fspan>\n \u003Cnav class=\"flex gap-4\">\n \u003Ca href=\"#\" class=\"text-gray-600 hover:text-gray-900\">Home\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"text-gray-600 hover:text-gray-900\">About\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"text-gray-600 hover:text-gray-900\">Contact\u003C\u002Fa>\n \u003C\u002Fnav>\n \u003C\u002Fdiv>\n \u003C\u002Fheader>\n\n \u003C!-- Nội dung — đẩy xuống bằng pt-20 để không bị header che -->\n \u003Cmain class=\"pt-20 px-6\">\n \u003Ch1 class=\"text-3xl font-bold mb-4\">Page Content\u003C\u002Fh1>\n \u003Cp class=\"text-gray-600 mb-4\">Scroll xuống để thấy header vẫn cố định trên cùng.\u003C\u002Fp>\n \u003C!-- Thêm nhiều nội dung để test scroll -->\n \u003Cdiv class=\"space-y-4\">\n \u003Cdiv class=\"h-48 bg-gray-100 rounded-lg\">\u003C\u002Fdiv>\n \u003Cdiv class=\"h-48 bg-gray-100 rounded-lg\">\u003C\u002Fdiv>\n \u003Cdiv class=\"h-48 bg-gray-100 rounded-lg\">\u003C\u002Fdiv>\n \u003Cdiv class=\"h-48 bg-gray-100 rounded-lg\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fmain>\n\u003C\u002Fdiv>\n",[458,2504,2505,2524,2529,2549,2568,2596,2615,2652,2688,2725,2733,2741,2749,2753,2758,2777,2805,2833,2838,2857,2880,2902,2924,2946,2954,2962],{"__ignoreMap":716},[720,2506,2507,2509,2511,2513,2515,2517,2520,2522],{"class":722,"line":723},[720,2508,734],{"class":733},[720,2510,738],{"class":737},[720,2512,742],{"class":741},[720,2514,745],{"class":733},[720,2516,748],{"class":733},[720,2518,2519],{"class":751},"min-h-[200vh]",[720,2521,748],{"class":733},[720,2523,769],{"class":733},[720,2525,2526],{"class":722,"line":730},[720,2527,2528],{"class":726}," \u003C!-- Fixed header -->\n",[720,2530,2531,2533,2536,2538,2540,2542,2545,2547],{"class":722,"line":772},[720,2532,865],{"class":733},[720,2534,2535],{"class":737},"header",[720,2537,742],{"class":741},[720,2539,745],{"class":733},[720,2541,748],{"class":733},[720,2543,2544],{"class":751},"fixed top-0 inset-x-0 z-50 bg-white\u002F80 backdrop-blur-md shadow-sm",[720,2546,748],{"class":733},[720,2548,769],{"class":733},[720,2550,2551,2553,2555,2557,2559,2561,2564,2566],{"class":722,"line":801},[720,2552,956],{"class":733},[720,2554,738],{"class":737},[720,2556,742],{"class":741},[720,2558,745],{"class":733},[720,2560,748],{"class":733},[720,2562,2563],{"class":751},"max-w-6xl mx-auto flex items-center justify-between px-6 py-4",[720,2565,748],{"class":733},[720,2567,769],{"class":733},[720,2569,2570,2572,2574,2576,2578,2580,2583,2585,2587,2590,2592,2594],{"class":722,"line":829},[720,2571,1447],{"class":733},[720,2573,720],{"class":737},[720,2575,742],{"class":741},[720,2577,745],{"class":733},[720,2579,748],{"class":733},[720,2581,2582],{"class":751},"text-xl font-bold",[720,2584,748],{"class":733},[720,2586,757],{"class":733},[720,2588,2589],{"class":760},"My App",[720,2591,764],{"class":733},[720,2593,720],{"class":737},[720,2595,769],{"class":733},[720,2597,2598,2600,2602,2604,2606,2608,2611,2613],{"class":722,"line":836},[720,2599,1447],{"class":733},[720,2601,1069],{"class":737},[720,2603,742],{"class":741},[720,2605,745],{"class":733},[720,2607,748],{"class":733},[720,2609,2610],{"class":751},"flex gap-4",[720,2612,748],{"class":733},[720,2614,769],{"class":733},[720,2616,2617,2619,2621,2623,2625,2627,2629,2631,2633,2635,2637,2640,2642,2644,2646,2648,2650],{"class":722,"line":842},[720,2618,1736],{"class":733},[720,2620,1094],{"class":737},[720,2622,1097],{"class":741},[720,2624,745],{"class":733},[720,2626,748],{"class":733},[720,2628,1104],{"class":751},[720,2630,748],{"class":733},[720,2632,742],{"class":741},[720,2634,745],{"class":733},[720,2636,748],{"class":733},[720,2638,2639],{"class":751},"text-gray-600 hover:text-gray-900",[720,2641,748],{"class":733},[720,2643,757],{"class":733},[720,2645,1188],{"class":760},[720,2647,764],{"class":733},[720,2649,1094],{"class":737},[720,2651,769],{"class":733},[720,2653,2654,2656,2658,2660,2662,2664,2666,2668,2670,2672,2674,2676,2678,2680,2682,2684,2686],{"class":722,"line":862},[720,2655,1736],{"class":733},[720,2657,1094],{"class":737},[720,2659,1097],{"class":741},[720,2661,745],{"class":733},[720,2663,748],{"class":733},[720,2665,1104],{"class":751},[720,2667,748],{"class":733},[720,2669,742],{"class":741},[720,2671,745],{"class":733},[720,2673,748],{"class":733},[720,2675,2639],{"class":751},[720,2677,748],{"class":733},[720,2679,757],{"class":733},[720,2681,1299],{"class":760},[720,2683,764],{"class":733},[720,2685,1094],{"class":737},[720,2687,769],{"class":733},[720,2689,2690,2692,2694,2696,2698,2700,2702,2704,2706,2708,2710,2712,2714,2716,2719,2721,2723],{"class":722,"line":888},[720,2691,1736],{"class":733},[720,2693,1094],{"class":737},[720,2695,1097],{"class":741},[720,2697,745],{"class":733},[720,2699,748],{"class":733},[720,2701,1104],{"class":751},[720,2703,748],{"class":733},[720,2705,742],{"class":741},[720,2707,745],{"class":733},[720,2709,748],{"class":733},[720,2711,2639],{"class":751},[720,2713,748],{"class":733},[720,2715,757],{"class":733},[720,2717,2718],{"class":760},"Contact",[720,2720,764],{"class":733},[720,2722,1094],{"class":737},[720,2724,769],{"class":733},[720,2726,2727,2729,2731],{"class":722,"line":894},[720,2728,1849],{"class":733},[720,2730,1069],{"class":737},[720,2732,769],{"class":733},[720,2734,2735,2737,2739],{"class":722,"line":903},[720,2736,1510],{"class":733},[720,2738,738],{"class":737},[720,2740,769],{"class":733},[720,2742,2743,2745,2747],{"class":722,"line":908},[720,2744,1014],{"class":733},[720,2746,2535],{"class":737},[720,2748,769],{"class":733},[720,2750,2751],{"class":722,"line":914},[720,2752,833],{"emptyLinePlaceholder":832},[720,2754,2755],{"class":722,"line":934},[720,2756,2757],{"class":726}," \u003C!-- Nội dung — đẩy xuống bằng pt-20 để không bị header che -->\n",[720,2759,2760,2762,2764,2766,2768,2770,2773,2775],{"class":722,"line":953},[720,2761,865],{"class":733},[720,2763,1885],{"class":737},[720,2765,742],{"class":741},[720,2767,745],{"class":733},[720,2769,748],{"class":733},[720,2771,2772],{"class":751},"pt-20 px-6",[720,2774,748],{"class":733},[720,2776,769],{"class":733},[720,2778,2779,2781,2783,2785,2787,2789,2792,2794,2796,2799,2801,2803],{"class":722,"line":983},[720,2780,956],{"class":733},[720,2782,1992],{"class":737},[720,2784,742],{"class":741},[720,2786,745],{"class":733},[720,2788,748],{"class":733},[720,2790,2791],{"class":751},"text-3xl font-bold mb-4",[720,2793,748],{"class":733},[720,2795,757],{"class":733},[720,2797,2798],{"class":760},"Page Content",[720,2800,764],{"class":733},[720,2802,1992],{"class":737},[720,2804,769],{"class":733},[720,2806,2807,2809,2811,2813,2815,2817,2820,2822,2824,2827,2829,2831],{"class":722,"line":1011},[720,2808,956],{"class":733},[720,2810,431],{"class":737},[720,2812,742],{"class":741},[720,2814,745],{"class":733},[720,2816,748],{"class":733},[720,2818,2819],{"class":751},"text-gray-600 mb-4",[720,2821,748],{"class":733},[720,2823,757],{"class":733},[720,2825,2826],{"class":760},"Scroll xuống để thấy header vẫn cố định trên cùng.",[720,2828,764],{"class":733},[720,2830,431],{"class":737},[720,2832,769],{"class":733},[720,2834,2835],{"class":722,"line":1021},[720,2836,2837],{"class":726}," \u003C!-- Thêm nhiều nội dung để test scroll -->\n",[720,2839,2840,2842,2844,2846,2848,2850,2853,2855],{"class":722,"line":1367},[720,2841,956],{"class":733},[720,2843,738],{"class":737},[720,2845,742],{"class":741},[720,2847,745],{"class":733},[720,2849,748],{"class":733},[720,2851,2852],{"class":751},"space-y-4",[720,2854,748],{"class":733},[720,2856,769],{"class":733},[720,2858,2859,2861,2863,2865,2867,2869,2872,2874,2876,2878],{"class":722,"line":1387},[720,2860,1447],{"class":733},[720,2862,738],{"class":737},[720,2864,742],{"class":741},[720,2866,745],{"class":733},[720,2868,748],{"class":733},[720,2870,2871],{"class":751},"h-48 bg-gray-100 rounded-lg",[720,2873,748],{"class":733},[720,2875,881],{"class":733},[720,2877,738],{"class":737},[720,2879,769],{"class":733},[720,2881,2882,2884,2886,2888,2890,2892,2894,2896,2898,2900],{"class":722,"line":1444},[720,2883,1447],{"class":733},[720,2885,738],{"class":737},[720,2887,742],{"class":741},[720,2889,745],{"class":733},[720,2891,748],{"class":733},[720,2893,2871],{"class":751},[720,2895,748],{"class":733},[720,2897,881],{"class":733},[720,2899,738],{"class":737},[720,2901,769],{"class":733},[720,2903,2904,2906,2908,2910,2912,2914,2916,2918,2920,2922],{"class":722,"line":1489},[720,2905,1447],{"class":733},[720,2907,738],{"class":737},[720,2909,742],{"class":741},[720,2911,745],{"class":733},[720,2913,748],{"class":733},[720,2915,2871],{"class":751},[720,2917,748],{"class":733},[720,2919,881],{"class":733},[720,2921,738],{"class":737},[720,2923,769],{"class":733},[720,2925,2926,2928,2930,2932,2934,2936,2938,2940,2942,2944],{"class":722,"line":1507},[720,2927,1447],{"class":733},[720,2929,738],{"class":737},[720,2931,742],{"class":741},[720,2933,745],{"class":733},[720,2935,748],{"class":733},[720,2937,2871],{"class":751},[720,2939,748],{"class":733},[720,2941,881],{"class":733},[720,2943,738],{"class":737},[720,2945,769],{"class":733},[720,2947,2948,2950,2952],{"class":722,"line":1517},[720,2949,1510],{"class":733},[720,2951,738],{"class":737},[720,2953,769],{"class":733},[720,2955,2956,2958,2960],{"class":722,"line":1526},[720,2957,1014],{"class":733},[720,2959,1885],{"class":737},[720,2961,769],{"class":733},[720,2963,2964,2966,2968],{"class":722,"line":2017},[720,2965,764],{"class":733},[720,2967,738],{"class":737},[720,2969,769],{"class":733},[435,2971,2972,446,2975,2978,2979,2982],{"color":1030,"icon":1031},[443,2973,2974],{},"Pattern:",[458,2976,2977],{},"fixed top-0 inset-x-0"," = dính top + full width. ",[458,2980,2981],{},"bg-white\u002F80 backdrop-blur-md"," = header trong suốt nhẹ với blur nền phía sau — hiệu ứng phổ biến trên landing page hiện đại.",[706,2984,2986],{"id":2985},"bài-tập-4-sticky-sidebar-trong-blog-layout","Bài tập 4: Sticky sidebar trong blog layout",[431,2988,2989,2991],{},[443,2990,1056],{}," Blog layout 2 cột — nội dung chính bên trái, sidebar bên phải. Sidebar sticky — luôn trong viewport khi scroll bài viết dài.",[711,2993,2995],{"className":713,"code":2994,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"max-w-6xl mx-auto px-6 py-8\">\n \u003Cdiv class=\"flex flex-col lg:flex-row gap-8\">\n \u003C!-- Main content -->\n \u003Carticle class=\"flex-1 min-w-0\">\n \u003Ch1 class=\"text-3xl font-bold mb-4\">Bài viết dài\u003C\u002Fh1>\n \u003Cdiv class=\"prose max-w-none\">\n \u003Cp class=\"mb-4\">Nội dung bài viết rất dài...\u003C\u002Fp>\n \u003C!-- Giả lập nội dung dài -->\n \u003Cdiv class=\"space-y-4\">\n \u003Cdiv class=\"h-32 bg-gray-100 rounded\">\u003C\u002Fdiv>\n \u003Cdiv class=\"h-32 bg-gray-100 rounded\">\u003C\u002Fdiv>\n \u003Cdiv class=\"h-32 bg-gray-100 rounded\">\u003C\u002Fdiv>\n \u003Cdiv class=\"h-32 bg-gray-100 rounded\">\u003C\u002Fdiv>\n \u003Cdiv class=\"h-32 bg-gray-100 rounded\">\u003C\u002Fdiv>\n \u003Cdiv class=\"h-32 bg-gray-100 rounded\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Farticle>\n\n \u003C!-- Sticky sidebar -->\n \u003Caside class=\"w-full lg:w-80\">\n \u003Cdiv class=\"sticky top-24 space-y-6\">\n \u003Cdiv class=\"bg-gray-50 rounded-lg p-6\">\n \u003Ch3 class=\"font-bold mb-2\">Mục lục\u003C\u002Fh3>\n \u003Cul class=\"space-y-2 text-sm text-gray-600\">\n \u003Cli>Section 1\u003C\u002Fli>\n \u003Cli>Section 2\u003C\u002Fli>\n \u003Cli>Section 3\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"bg-blue-50 rounded-lg p-6\">\n \u003Ch3 class=\"font-bold mb-2\">Bài viết liên quan\u003C\u002Fh3>\n \u003Cul class=\"space-y-2 text-sm text-blue-600\">\n \u003Cli>Bài viết A\u003C\u002Fli>\n \u003Cli>Bài viết B\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Faside>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,2996,2997,3016,3035,3040,3060,3087,3106,3134,3139,3157,3181,3203,3225,3247,3269,3291,3300,3308,3316,3320,3325,3344,3363,3382,3410,3430,3449,3466,3484,3494,3503,3523,3551,3571,3589,3607,3616,3625,3634,3643,3652],{"__ignoreMap":716},[720,2998,2999,3001,3003,3005,3007,3009,3012,3014],{"class":722,"line":723},[720,3000,734],{"class":733},[720,3002,738],{"class":737},[720,3004,742],{"class":741},[720,3006,745],{"class":733},[720,3008,748],{"class":733},[720,3010,3011],{"class":751},"max-w-6xl mx-auto px-6 py-8",[720,3013,748],{"class":733},[720,3015,769],{"class":733},[720,3017,3018,3020,3022,3024,3026,3028,3031,3033],{"class":722,"line":730},[720,3019,865],{"class":733},[720,3021,738],{"class":737},[720,3023,742],{"class":741},[720,3025,745],{"class":733},[720,3027,748],{"class":733},[720,3029,3030],{"class":751},"flex flex-col lg:flex-row gap-8",[720,3032,748],{"class":733},[720,3034,769],{"class":733},[720,3036,3037],{"class":722,"line":772},[720,3038,3039],{"class":726}," \u003C!-- Main content -->\n",[720,3041,3042,3044,3047,3049,3051,3053,3056,3058],{"class":722,"line":801},[720,3043,956],{"class":733},[720,3045,3046],{"class":737},"article",[720,3048,742],{"class":741},[720,3050,745],{"class":733},[720,3052,748],{"class":733},[720,3054,3055],{"class":751},"flex-1 min-w-0",[720,3057,748],{"class":733},[720,3059,769],{"class":733},[720,3061,3062,3064,3066,3068,3070,3072,3074,3076,3078,3081,3083,3085],{"class":722,"line":829},[720,3063,1447],{"class":733},[720,3065,1992],{"class":737},[720,3067,742],{"class":741},[720,3069,745],{"class":733},[720,3071,748],{"class":733},[720,3073,2791],{"class":751},[720,3075,748],{"class":733},[720,3077,757],{"class":733},[720,3079,3080],{"class":760},"Bài viết dài",[720,3082,764],{"class":733},[720,3084,1992],{"class":737},[720,3086,769],{"class":733},[720,3088,3089,3091,3093,3095,3097,3099,3102,3104],{"class":722,"line":836},[720,3090,1447],{"class":733},[720,3092,738],{"class":737},[720,3094,742],{"class":741},[720,3096,745],{"class":733},[720,3098,748],{"class":733},[720,3100,3101],{"class":751},"prose max-w-none",[720,3103,748],{"class":733},[720,3105,769],{"class":733},[720,3107,3108,3110,3112,3114,3116,3118,3121,3123,3125,3128,3130,3132],{"class":722,"line":842},[720,3109,1736],{"class":733},[720,3111,431],{"class":737},[720,3113,742],{"class":741},[720,3115,745],{"class":733},[720,3117,748],{"class":733},[720,3119,3120],{"class":751},"mb-4",[720,3122,748],{"class":733},[720,3124,757],{"class":733},[720,3126,3127],{"class":760},"Nội dung bài viết rất dài...",[720,3129,764],{"class":733},[720,3131,431],{"class":737},[720,3133,769],{"class":733},[720,3135,3136],{"class":722,"line":862},[720,3137,3138],{"class":726}," \u003C!-- Giả lập nội dung dài -->\n",[720,3140,3141,3143,3145,3147,3149,3151,3153,3155],{"class":722,"line":888},[720,3142,1736],{"class":733},[720,3144,738],{"class":737},[720,3146,742],{"class":741},[720,3148,745],{"class":733},[720,3150,748],{"class":733},[720,3152,2852],{"class":751},[720,3154,748],{"class":733},[720,3156,769],{"class":733},[720,3158,3159,3162,3164,3166,3168,3170,3173,3175,3177,3179],{"class":722,"line":894},[720,3160,3161],{"class":733}," \u003C",[720,3163,738],{"class":737},[720,3165,742],{"class":741},[720,3167,745],{"class":733},[720,3169,748],{"class":733},[720,3171,3172],{"class":751},"h-32 bg-gray-100 rounded",[720,3174,748],{"class":733},[720,3176,881],{"class":733},[720,3178,738],{"class":737},[720,3180,769],{"class":733},[720,3182,3183,3185,3187,3189,3191,3193,3195,3197,3199,3201],{"class":722,"line":903},[720,3184,3161],{"class":733},[720,3186,738],{"class":737},[720,3188,742],{"class":741},[720,3190,745],{"class":733},[720,3192,748],{"class":733},[720,3194,3172],{"class":751},[720,3196,748],{"class":733},[720,3198,881],{"class":733},[720,3200,738],{"class":737},[720,3202,769],{"class":733},[720,3204,3205,3207,3209,3211,3213,3215,3217,3219,3221,3223],{"class":722,"line":908},[720,3206,3161],{"class":733},[720,3208,738],{"class":737},[720,3210,742],{"class":741},[720,3212,745],{"class":733},[720,3214,748],{"class":733},[720,3216,3172],{"class":751},[720,3218,748],{"class":733},[720,3220,881],{"class":733},[720,3222,738],{"class":737},[720,3224,769],{"class":733},[720,3226,3227,3229,3231,3233,3235,3237,3239,3241,3243,3245],{"class":722,"line":914},[720,3228,3161],{"class":733},[720,3230,738],{"class":737},[720,3232,742],{"class":741},[720,3234,745],{"class":733},[720,3236,748],{"class":733},[720,3238,3172],{"class":751},[720,3240,748],{"class":733},[720,3242,881],{"class":733},[720,3244,738],{"class":737},[720,3246,769],{"class":733},[720,3248,3249,3251,3253,3255,3257,3259,3261,3263,3265,3267],{"class":722,"line":934},[720,3250,3161],{"class":733},[720,3252,738],{"class":737},[720,3254,742],{"class":741},[720,3256,745],{"class":733},[720,3258,748],{"class":733},[720,3260,3172],{"class":751},[720,3262,748],{"class":733},[720,3264,881],{"class":733},[720,3266,738],{"class":737},[720,3268,769],{"class":733},[720,3270,3271,3273,3275,3277,3279,3281,3283,3285,3287,3289],{"class":722,"line":953},[720,3272,3161],{"class":733},[720,3274,738],{"class":737},[720,3276,742],{"class":741},[720,3278,745],{"class":733},[720,3280,748],{"class":733},[720,3282,3172],{"class":751},[720,3284,748],{"class":733},[720,3286,881],{"class":733},[720,3288,738],{"class":737},[720,3290,769],{"class":733},[720,3292,3293,3296,3298],{"class":722,"line":983},[720,3294,3295],{"class":733}," \u003C\u002F",[720,3297,738],{"class":737},[720,3299,769],{"class":733},[720,3301,3302,3304,3306],{"class":722,"line":1011},[720,3303,1849],{"class":733},[720,3305,738],{"class":737},[720,3307,769],{"class":733},[720,3309,3310,3312,3314],{"class":722,"line":1021},[720,3311,1510],{"class":733},[720,3313,3046],{"class":737},[720,3315,769],{"class":733},[720,3317,3318],{"class":722,"line":1367},[720,3319,833],{"emptyLinePlaceholder":832},[720,3321,3322],{"class":722,"line":1387},[720,3323,3324],{"class":726}," \u003C!-- Sticky sidebar -->\n",[720,3326,3327,3329,3331,3333,3335,3337,3340,3342],{"class":722,"line":1444},[720,3328,956],{"class":733},[720,3330,1633],{"class":737},[720,3332,742],{"class":741},[720,3334,745],{"class":733},[720,3336,748],{"class":733},[720,3338,3339],{"class":751},"w-full lg:w-80",[720,3341,748],{"class":733},[720,3343,769],{"class":733},[720,3345,3346,3348,3350,3352,3354,3356,3359,3361],{"class":722,"line":1489},[720,3347,1447],{"class":733},[720,3349,738],{"class":737},[720,3351,742],{"class":741},[720,3353,745],{"class":733},[720,3355,748],{"class":733},[720,3357,3358],{"class":751},"sticky top-24 space-y-6",[720,3360,748],{"class":733},[720,3362,769],{"class":733},[720,3364,3365,3367,3369,3371,3373,3375,3378,3380],{"class":722,"line":1507},[720,3366,1736],{"class":733},[720,3368,738],{"class":737},[720,3370,742],{"class":741},[720,3372,745],{"class":733},[720,3374,748],{"class":733},[720,3376,3377],{"class":751},"bg-gray-50 rounded-lg p-6",[720,3379,748],{"class":733},[720,3381,769],{"class":733},[720,3383,3384,3386,3388,3390,3392,3394,3397,3399,3401,3404,3406,3408],{"class":722,"line":1517},[720,3385,3161],{"class":733},[720,3387,706],{"class":737},[720,3389,742],{"class":741},[720,3391,745],{"class":733},[720,3393,748],{"class":733},[720,3395,3396],{"class":751},"font-bold mb-2",[720,3398,748],{"class":733},[720,3400,757],{"class":733},[720,3402,3403],{"class":760},"Mục lục",[720,3405,764],{"class":733},[720,3407,706],{"class":737},[720,3409,769],{"class":733},[720,3411,3412,3414,3417,3419,3421,3423,3426,3428],{"class":722,"line":1526},[720,3413,3161],{"class":733},[720,3415,3416],{"class":737},"ul",[720,3418,742],{"class":741},[720,3420,745],{"class":733},[720,3422,748],{"class":733},[720,3424,3425],{"class":751},"space-y-2 text-sm text-gray-600",[720,3427,748],{"class":733},[720,3429,769],{"class":733},[720,3431,3432,3435,3438,3440,3443,3445,3447],{"class":722,"line":2017},[720,3433,3434],{"class":733}," \u003C",[720,3436,3437],{"class":737},"li",[720,3439,757],{"class":733},[720,3441,3442],{"class":760},"Section 1",[720,3444,764],{"class":733},[720,3446,3437],{"class":737},[720,3448,769],{"class":733},[720,3450,3451,3453,3455,3457,3460,3462,3464],{"class":722,"line":2026},[720,3452,3434],{"class":733},[720,3454,3437],{"class":737},[720,3456,757],{"class":733},[720,3458,3459],{"class":760},"Section 2",[720,3461,764],{"class":733},[720,3463,3437],{"class":737},[720,3465,769],{"class":733},[720,3467,3469,3471,3473,3475,3478,3480,3482],{"class":722,"line":3468},28,[720,3470,3434],{"class":733},[720,3472,3437],{"class":737},[720,3474,757],{"class":733},[720,3476,3477],{"class":760},"Section 3",[720,3479,764],{"class":733},[720,3481,3437],{"class":737},[720,3483,769],{"class":733},[720,3485,3487,3490,3492],{"class":722,"line":3486},29,[720,3488,3489],{"class":733}," \u003C\u002F",[720,3491,3416],{"class":737},[720,3493,769],{"class":733},[720,3495,3497,3499,3501],{"class":722,"line":3496},30,[720,3498,3295],{"class":733},[720,3500,738],{"class":737},[720,3502,769],{"class":733},[720,3504,3506,3508,3510,3512,3514,3516,3519,3521],{"class":722,"line":3505},31,[720,3507,1736],{"class":733},[720,3509,738],{"class":737},[720,3511,742],{"class":741},[720,3513,745],{"class":733},[720,3515,748],{"class":733},[720,3517,3518],{"class":751},"bg-blue-50 rounded-lg p-6",[720,3520,748],{"class":733},[720,3522,769],{"class":733},[720,3524,3526,3528,3530,3532,3534,3536,3538,3540,3542,3545,3547,3549],{"class":722,"line":3525},32,[720,3527,3161],{"class":733},[720,3529,706],{"class":737},[720,3531,742],{"class":741},[720,3533,745],{"class":733},[720,3535,748],{"class":733},[720,3537,3396],{"class":751},[720,3539,748],{"class":733},[720,3541,757],{"class":733},[720,3543,3544],{"class":760},"Bài viết liên quan",[720,3546,764],{"class":733},[720,3548,706],{"class":737},[720,3550,769],{"class":733},[720,3552,3554,3556,3558,3560,3562,3564,3567,3569],{"class":722,"line":3553},33,[720,3555,3161],{"class":733},[720,3557,3416],{"class":737},[720,3559,742],{"class":741},[720,3561,745],{"class":733},[720,3563,748],{"class":733},[720,3565,3566],{"class":751},"space-y-2 text-sm text-blue-600",[720,3568,748],{"class":733},[720,3570,769],{"class":733},[720,3572,3574,3576,3578,3580,3583,3585,3587],{"class":722,"line":3573},34,[720,3575,3434],{"class":733},[720,3577,3437],{"class":737},[720,3579,757],{"class":733},[720,3581,3582],{"class":760},"Bài viết A",[720,3584,764],{"class":733},[720,3586,3437],{"class":737},[720,3588,769],{"class":733},[720,3590,3592,3594,3596,3598,3601,3603,3605],{"class":722,"line":3591},35,[720,3593,3434],{"class":733},[720,3595,3437],{"class":737},[720,3597,757],{"class":733},[720,3599,3600],{"class":760},"Bài viết B",[720,3602,764],{"class":733},[720,3604,3437],{"class":737},[720,3606,769],{"class":733},[720,3608,3610,3612,3614],{"class":722,"line":3609},36,[720,3611,3489],{"class":733},[720,3613,3416],{"class":737},[720,3615,769],{"class":733},[720,3617,3619,3621,3623],{"class":722,"line":3618},37,[720,3620,3295],{"class":733},[720,3622,738],{"class":737},[720,3624,769],{"class":733},[720,3626,3628,3630,3632],{"class":722,"line":3627},38,[720,3629,1849],{"class":733},[720,3631,738],{"class":737},[720,3633,769],{"class":733},[720,3635,3637,3639,3641],{"class":722,"line":3636},39,[720,3638,1510],{"class":733},[720,3640,1633],{"class":737},[720,3642,769],{"class":733},[720,3644,3646,3648,3650],{"class":722,"line":3645},40,[720,3647,1014],{"class":733},[720,3649,738],{"class":737},[720,3651,769],{"class":733},[720,3653,3655,3657,3659],{"class":722,"line":3654},41,[720,3656,764],{"class":733},[720,3658,738],{"class":737},[720,3660,769],{"class":733},[435,3662,3663,3670,3671,3673],{"color":1030,"icon":1031},[443,3664,3665,3666,3669],{},"Tại sao ",[458,3667,3668],{},"top-24","?"," Vì thường có fixed header cao ~96px (24 trong scale Tailwind = 6rem). ",[458,3672,3668],{}," giúp sidebar dính ở vị trí ngay dưới header, không bị che.",[706,3675,3677],{"id":3676},"bài-tập-5-absolute-positioned-badge-trên-card","Bài tập 5: Absolute positioned badge trên card",[431,3679,3680,3682,3683,3685,3686,3688],{},[443,3681,1056],{}," Card sản phẩm có badge \"Sale\" hoặc \"New\" ở góc trên bên phải, dùng ",[458,3684,2094],{}," bên trong ",[458,3687,2106],{}," container.",[711,3690,3692],{"className":713,"code":3691,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"grid grid-cols-1 md:grid-cols-3 gap-6 p-6\">\n \u003C!-- Card 1 — badge \"New\" -->\n \u003Cdiv class=\"relative bg-white rounded-xl shadow-md overflow-hidden group\">\n \u003Cspan class=\"absolute top-3 right-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full z-10\">\n New\n \u003C\u002Fspan>\n \u003Cdiv class=\"h-48 bg-gradient-to-br from-blue-400 to-purple-500\">\u003C\u002Fdiv>\n \u003Cdiv class=\"p-4\">\n \u003Ch3 class=\"font-bold\">Sản phẩm A\u003C\u002Fh3>\n \u003Cp class=\"text-gray-600 text-sm\">Mô tả ngắn gọn\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Card 2 — badge \"Sale\" -->\n \u003Cdiv class=\"relative bg-white rounded-xl shadow-md overflow-hidden\">\n \u003Cspan class=\"absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full z-10\">\n -30%\n \u003C\u002Fspan>\n \u003Cdiv class=\"h-48 bg-gradient-to-br from-pink-400 to-orange-400\">\u003C\u002Fdiv>\n \u003Cdiv class=\"p-4\">\n \u003Ch3 class=\"font-bold\">Sản phẩm B\u003C\u002Fh3>\n \u003Cp class=\"text-gray-600 text-sm\">Đang giảm giá\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Card 3 — double badge -->\n \u003Cdiv class=\"relative bg-white rounded-xl shadow-md overflow-hidden\">\n \u003Cdiv class=\"absolute top-3 right-3 flex flex-col gap-1 z-10\">\n \u003Cspan class=\"bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full\">Sale\u003C\u002Fspan>\n \u003Cspan class=\"bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full\">Hot\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"h-48 bg-gradient-to-br from-teal-400 to-cyan-500\">\u003C\u002Fdiv>\n \u003Cdiv class=\"p-4\">\n \u003Ch3 class=\"font-bold\">Sản phẩm C\u003C\u002Fh3>\n \u003Cp class=\"text-gray-600 text-sm\">Bán chạy nhất\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,3693,3694,3713,3718,3737,3756,3761,3769,3792,3811,3839,3867,3875,3883,3887,3892,3911,3930,3935,3943,3966,3984,4011,4038,4046,4054,4058,4063,4081,4100,4128,4156,4164,4187,4205,4232,4259,4267,4275],{"__ignoreMap":716},[720,3695,3696,3698,3700,3702,3704,3706,3709,3711],{"class":722,"line":723},[720,3697,734],{"class":733},[720,3699,738],{"class":737},[720,3701,742],{"class":741},[720,3703,745],{"class":733},[720,3705,748],{"class":733},[720,3707,3708],{"class":751},"grid grid-cols-1 md:grid-cols-3 gap-6 p-6",[720,3710,748],{"class":733},[720,3712,769],{"class":733},[720,3714,3715],{"class":722,"line":730},[720,3716,3717],{"class":726}," \u003C!-- Card 1 — badge \"New\" -->\n",[720,3719,3720,3722,3724,3726,3728,3730,3733,3735],{"class":722,"line":772},[720,3721,865],{"class":733},[720,3723,738],{"class":737},[720,3725,742],{"class":741},[720,3727,745],{"class":733},[720,3729,748],{"class":733},[720,3731,3732],{"class":751},"relative bg-white rounded-xl shadow-md overflow-hidden group",[720,3734,748],{"class":733},[720,3736,769],{"class":733},[720,3738,3739,3741,3743,3745,3747,3749,3752,3754],{"class":722,"line":801},[720,3740,956],{"class":733},[720,3742,720],{"class":737},[720,3744,742],{"class":741},[720,3746,745],{"class":733},[720,3748,748],{"class":733},[720,3750,3751],{"class":751},"absolute top-3 right-3 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full z-10",[720,3753,748],{"class":733},[720,3755,769],{"class":733},[720,3757,3758],{"class":722,"line":829},[720,3759,3760],{"class":760}," New\n",[720,3762,3763,3765,3767],{"class":722,"line":836},[720,3764,1510],{"class":733},[720,3766,720],{"class":737},[720,3768,769],{"class":733},[720,3770,3771,3773,3775,3777,3779,3781,3784,3786,3788,3790],{"class":722,"line":842},[720,3772,956],{"class":733},[720,3774,738],{"class":737},[720,3776,742],{"class":741},[720,3778,745],{"class":733},[720,3780,748],{"class":733},[720,3782,3783],{"class":751},"h-48 bg-gradient-to-br from-blue-400 to-purple-500",[720,3785,748],{"class":733},[720,3787,881],{"class":733},[720,3789,738],{"class":737},[720,3791,769],{"class":733},[720,3793,3794,3796,3798,3800,3802,3804,3807,3809],{"class":722,"line":862},[720,3795,956],{"class":733},[720,3797,738],{"class":737},[720,3799,742],{"class":741},[720,3801,745],{"class":733},[720,3803,748],{"class":733},[720,3805,3806],{"class":751},"p-4",[720,3808,748],{"class":733},[720,3810,769],{"class":733},[720,3812,3813,3815,3817,3819,3821,3823,3826,3828,3830,3833,3835,3837],{"class":722,"line":888},[720,3814,1447],{"class":733},[720,3816,706],{"class":737},[720,3818,742],{"class":741},[720,3820,745],{"class":733},[720,3822,748],{"class":733},[720,3824,3825],{"class":751},"font-bold",[720,3827,748],{"class":733},[720,3829,757],{"class":733},[720,3831,3832],{"class":760},"Sản phẩm A",[720,3834,764],{"class":733},[720,3836,706],{"class":737},[720,3838,769],{"class":733},[720,3840,3841,3843,3845,3847,3849,3851,3854,3856,3858,3861,3863,3865],{"class":722,"line":894},[720,3842,1447],{"class":733},[720,3844,431],{"class":737},[720,3846,742],{"class":741},[720,3848,745],{"class":733},[720,3850,748],{"class":733},[720,3852,3853],{"class":751},"text-gray-600 text-sm",[720,3855,748],{"class":733},[720,3857,757],{"class":733},[720,3859,3860],{"class":760},"Mô tả ngắn gọn",[720,3862,764],{"class":733},[720,3864,431],{"class":737},[720,3866,769],{"class":733},[720,3868,3869,3871,3873],{"class":722,"line":903},[720,3870,1510],{"class":733},[720,3872,738],{"class":737},[720,3874,769],{"class":733},[720,3876,3877,3879,3881],{"class":722,"line":908},[720,3878,1014],{"class":733},[720,3880,738],{"class":737},[720,3882,769],{"class":733},[720,3884,3885],{"class":722,"line":914},[720,3886,833],{"emptyLinePlaceholder":832},[720,3888,3889],{"class":722,"line":934},[720,3890,3891],{"class":726}," \u003C!-- Card 2 — badge \"Sale\" -->\n",[720,3893,3894,3896,3898,3900,3902,3904,3907,3909],{"class":722,"line":953},[720,3895,865],{"class":733},[720,3897,738],{"class":737},[720,3899,742],{"class":741},[720,3901,745],{"class":733},[720,3903,748],{"class":733},[720,3905,3906],{"class":751},"relative bg-white rounded-xl shadow-md overflow-hidden",[720,3908,748],{"class":733},[720,3910,769],{"class":733},[720,3912,3913,3915,3917,3919,3921,3923,3926,3928],{"class":722,"line":983},[720,3914,956],{"class":733},[720,3916,720],{"class":737},[720,3918,742],{"class":741},[720,3920,745],{"class":733},[720,3922,748],{"class":733},[720,3924,3925],{"class":751},"absolute top-3 right-3 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full z-10",[720,3927,748],{"class":733},[720,3929,769],{"class":733},[720,3931,3932],{"class":722,"line":1011},[720,3933,3934],{"class":760}," -30%\n",[720,3936,3937,3939,3941],{"class":722,"line":1021},[720,3938,1510],{"class":733},[720,3940,720],{"class":737},[720,3942,769],{"class":733},[720,3944,3945,3947,3949,3951,3953,3955,3958,3960,3962,3964],{"class":722,"line":1367},[720,3946,956],{"class":733},[720,3948,738],{"class":737},[720,3950,742],{"class":741},[720,3952,745],{"class":733},[720,3954,748],{"class":733},[720,3956,3957],{"class":751},"h-48 bg-gradient-to-br from-pink-400 to-orange-400",[720,3959,748],{"class":733},[720,3961,881],{"class":733},[720,3963,738],{"class":737},[720,3965,769],{"class":733},[720,3967,3968,3970,3972,3974,3976,3978,3980,3982],{"class":722,"line":1387},[720,3969,956],{"class":733},[720,3971,738],{"class":737},[720,3973,742],{"class":741},[720,3975,745],{"class":733},[720,3977,748],{"class":733},[720,3979,3806],{"class":751},[720,3981,748],{"class":733},[720,3983,769],{"class":733},[720,3985,3986,3988,3990,3992,3994,3996,3998,4000,4002,4005,4007,4009],{"class":722,"line":1444},[720,3987,1447],{"class":733},[720,3989,706],{"class":737},[720,3991,742],{"class":741},[720,3993,745],{"class":733},[720,3995,748],{"class":733},[720,3997,3825],{"class":751},[720,3999,748],{"class":733},[720,4001,757],{"class":733},[720,4003,4004],{"class":760},"Sản phẩm B",[720,4006,764],{"class":733},[720,4008,706],{"class":737},[720,4010,769],{"class":733},[720,4012,4013,4015,4017,4019,4021,4023,4025,4027,4029,4032,4034,4036],{"class":722,"line":1489},[720,4014,1447],{"class":733},[720,4016,431],{"class":737},[720,4018,742],{"class":741},[720,4020,745],{"class":733},[720,4022,748],{"class":733},[720,4024,3853],{"class":751},[720,4026,748],{"class":733},[720,4028,757],{"class":733},[720,4030,4031],{"class":760},"Đang giảm giá",[720,4033,764],{"class":733},[720,4035,431],{"class":737},[720,4037,769],{"class":733},[720,4039,4040,4042,4044],{"class":722,"line":1507},[720,4041,1510],{"class":733},[720,4043,738],{"class":737},[720,4045,769],{"class":733},[720,4047,4048,4050,4052],{"class":722,"line":1517},[720,4049,1014],{"class":733},[720,4051,738],{"class":737},[720,4053,769],{"class":733},[720,4055,4056],{"class":722,"line":1526},[720,4057,833],{"emptyLinePlaceholder":832},[720,4059,4060],{"class":722,"line":2017},[720,4061,4062],{"class":726}," \u003C!-- Card 3 — double badge -->\n",[720,4064,4065,4067,4069,4071,4073,4075,4077,4079],{"class":722,"line":2026},[720,4066,865],{"class":733},[720,4068,738],{"class":737},[720,4070,742],{"class":741},[720,4072,745],{"class":733},[720,4074,748],{"class":733},[720,4076,3906],{"class":751},[720,4078,748],{"class":733},[720,4080,769],{"class":733},[720,4082,4083,4085,4087,4089,4091,4093,4096,4098],{"class":722,"line":3468},[720,4084,956],{"class":733},[720,4086,738],{"class":737},[720,4088,742],{"class":741},[720,4090,745],{"class":733},[720,4092,748],{"class":733},[720,4094,4095],{"class":751},"absolute top-3 right-3 flex flex-col gap-1 z-10",[720,4097,748],{"class":733},[720,4099,769],{"class":733},[720,4101,4102,4104,4106,4108,4110,4112,4115,4117,4119,4122,4124,4126],{"class":722,"line":3486},[720,4103,1447],{"class":733},[720,4105,720],{"class":737},[720,4107,742],{"class":741},[720,4109,745],{"class":733},[720,4111,748],{"class":733},[720,4113,4114],{"class":751},"bg-red-500 text-white text-xs font-bold px-2 py-1 rounded-full",[720,4116,748],{"class":733},[720,4118,757],{"class":733},[720,4120,4121],{"class":760},"Sale",[720,4123,764],{"class":733},[720,4125,720],{"class":737},[720,4127,769],{"class":733},[720,4129,4130,4132,4134,4136,4138,4140,4143,4145,4147,4150,4152,4154],{"class":722,"line":3496},[720,4131,1447],{"class":733},[720,4133,720],{"class":737},[720,4135,742],{"class":741},[720,4137,745],{"class":733},[720,4139,748],{"class":733},[720,4141,4142],{"class":751},"bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-full",[720,4144,748],{"class":733},[720,4146,757],{"class":733},[720,4148,4149],{"class":760},"Hot",[720,4151,764],{"class":733},[720,4153,720],{"class":737},[720,4155,769],{"class":733},[720,4157,4158,4160,4162],{"class":722,"line":3505},[720,4159,1510],{"class":733},[720,4161,738],{"class":737},[720,4163,769],{"class":733},[720,4165,4166,4168,4170,4172,4174,4176,4179,4181,4183,4185],{"class":722,"line":3525},[720,4167,956],{"class":733},[720,4169,738],{"class":737},[720,4171,742],{"class":741},[720,4173,745],{"class":733},[720,4175,748],{"class":733},[720,4177,4178],{"class":751},"h-48 bg-gradient-to-br from-teal-400 to-cyan-500",[720,4180,748],{"class":733},[720,4182,881],{"class":733},[720,4184,738],{"class":737},[720,4186,769],{"class":733},[720,4188,4189,4191,4193,4195,4197,4199,4201,4203],{"class":722,"line":3553},[720,4190,956],{"class":733},[720,4192,738],{"class":737},[720,4194,742],{"class":741},[720,4196,745],{"class":733},[720,4198,748],{"class":733},[720,4200,3806],{"class":751},[720,4202,748],{"class":733},[720,4204,769],{"class":733},[720,4206,4207,4209,4211,4213,4215,4217,4219,4221,4223,4226,4228,4230],{"class":722,"line":3573},[720,4208,1447],{"class":733},[720,4210,706],{"class":737},[720,4212,742],{"class":741},[720,4214,745],{"class":733},[720,4216,748],{"class":733},[720,4218,3825],{"class":751},[720,4220,748],{"class":733},[720,4222,757],{"class":733},[720,4224,4225],{"class":760},"Sản phẩm C",[720,4227,764],{"class":733},[720,4229,706],{"class":737},[720,4231,769],{"class":733},[720,4233,4234,4236,4238,4240,4242,4244,4246,4248,4250,4253,4255,4257],{"class":722,"line":3591},[720,4235,1447],{"class":733},[720,4237,431],{"class":737},[720,4239,742],{"class":741},[720,4241,745],{"class":733},[720,4243,748],{"class":733},[720,4245,3853],{"class":751},[720,4247,748],{"class":733},[720,4249,757],{"class":733},[720,4251,4252],{"class":760},"Bán chạy nhất",[720,4254,764],{"class":733},[720,4256,431],{"class":737},[720,4258,769],{"class":733},[720,4260,4261,4263,4265],{"class":722,"line":3609},[720,4262,1510],{"class":733},[720,4264,738],{"class":737},[720,4266,769],{"class":733},[720,4268,4269,4271,4273],{"class":722,"line":3618},[720,4270,1014],{"class":733},[720,4272,738],{"class":737},[720,4274,769],{"class":733},[720,4276,4277,4279,4281],{"class":722,"line":3627},[720,4278,764],{"class":733},[720,4280,738],{"class":737},[720,4282,769],{"class":733},[435,4284,441,4285,446,4288,4290,4291,4293,4294,4296,4297,4299],{"color":437,"icon":438},[443,4286,4287],{},"Nguyên tắc vàng:",[458,4289,2094],{}," luôn cần cha ",[458,4292,2106],{}," (hoặc ",[458,4295,2094],{},"\u002F",[458,4298,2082],{},"). Nếu không có, element sẽ absolute so với viewport.",[488,4301],{},[427,4303,4305],{"id":4304},"_3-container-container-queries-v40-new","3. Container & Container Queries (v4.0 NEW)",[431,4307,4308,4309,4312],{},"Container queries cho phép component responsive dựa trên ",[443,4310,4311],{},"kích thước của chính nó",", không phải viewport.",[706,4314,4316],{"id":4315},"container-class-và-directive","Container class và directive",[502,4318,4319,4329],{},[505,4320,4321],{},[508,4322,4323,4325,4327],{},[511,4324,513],{},[511,4326,516],{},[511,4328,519],{},[521,4330,4331,4345,4360,4382],{},[508,4332,4333,4337,4342],{},[526,4334,4335],{},[458,4336,482],{},[526,4338,4339],{},[458,4340,4341],{},"container-type: inline-size",[526,4343,4344],{},"Kích hoạt container query",[508,4346,4347,4352,4357],{},[526,4348,4349],{},[458,4350,4351],{},"@container-normal",[526,4353,4354],{},[458,4355,4356],{},"container-type: normal",[526,4358,4359],{},"Style container (không query size)",[508,4361,4362,4376,4379],{},[526,4363,4364,465,4367,465,4370,465,4373],{},[458,4365,4366],{},"@sm:",[458,4368,4369],{},"@md:",[458,4371,4372],{},"@lg:",[458,4374,4375],{},"@xl:",[526,4377,4378],{},"Container query variants",[526,4380,4381],{},"Điều kiện dựa trên width của container gần nhất",[508,4383,4384,4390,4393],{},[526,4385,4386,4389],{},[458,4387,4388],{},"@container-size-*"," (v4.3)",[526,4391,4392],{},"Custom container size",[526,4394,4395,465,4398,4401],{},[458,4396,4397],{},"@container-size-md",[458,4399,4400],{},"@container-size-lg","...",[711,4403,4405],{"className":713,"code":4404,"language":715,"meta":716,"style":716},"\u003C!-- Container query: card thay đổi layout dựa trên width của chính nó -->\n\u003Cdiv class=\"@container border rounded-lg p-4\">\n \u003Cdiv class=\"flex flex-col @md:flex-row gap-4\">\n \u003Cdiv class=\"w-full @md:w-1\u002F3 aspect-square bg-gray-200 rounded\">\u003C\u002Fdiv>\n \u003Cdiv class=\"flex-1\">\n \u003Ch3 class=\"text-lg @md:text-xl font-bold\">Card Title\u003C\u002Fh3>\n \u003Cp class=\"text-gray-600 @md:mt-2\">Card description here.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,4406,4407,4412,4431,4450,4473,4492,4520,4548,4556,4564],{"__ignoreMap":716},[720,4408,4409],{"class":722,"line":723},[720,4410,4411],{"class":726},"\u003C!-- Container query: card thay đổi layout dựa trên width của chính nó -->\n",[720,4413,4414,4416,4418,4420,4422,4424,4427,4429],{"class":722,"line":730},[720,4415,734],{"class":733},[720,4417,738],{"class":737},[720,4419,742],{"class":741},[720,4421,745],{"class":733},[720,4423,748],{"class":733},[720,4425,4426],{"class":751},"@container border rounded-lg p-4",[720,4428,748],{"class":733},[720,4430,769],{"class":733},[720,4432,4433,4435,4437,4439,4441,4443,4446,4448],{"class":722,"line":772},[720,4434,865],{"class":733},[720,4436,738],{"class":737},[720,4438,742],{"class":741},[720,4440,745],{"class":733},[720,4442,748],{"class":733},[720,4444,4445],{"class":751},"flex flex-col @md:flex-row gap-4",[720,4447,748],{"class":733},[720,4449,769],{"class":733},[720,4451,4452,4454,4456,4458,4460,4462,4465,4467,4469,4471],{"class":722,"line":801},[720,4453,956],{"class":733},[720,4455,738],{"class":737},[720,4457,742],{"class":741},[720,4459,745],{"class":733},[720,4461,748],{"class":733},[720,4463,4464],{"class":751},"w-full @md:w-1\u002F3 aspect-square bg-gray-200 rounded",[720,4466,748],{"class":733},[720,4468,881],{"class":733},[720,4470,738],{"class":737},[720,4472,769],{"class":733},[720,4474,4475,4477,4479,4481,4483,4485,4488,4490],{"class":722,"line":829},[720,4476,956],{"class":733},[720,4478,738],{"class":737},[720,4480,742],{"class":741},[720,4482,745],{"class":733},[720,4484,748],{"class":733},[720,4486,4487],{"class":751},"flex-1",[720,4489,748],{"class":733},[720,4491,769],{"class":733},[720,4493,4494,4496,4498,4500,4502,4504,4507,4509,4511,4514,4516,4518],{"class":722,"line":836},[720,4495,1447],{"class":733},[720,4497,706],{"class":737},[720,4499,742],{"class":741},[720,4501,745],{"class":733},[720,4503,748],{"class":733},[720,4505,4506],{"class":751},"text-lg @md:text-xl font-bold",[720,4508,748],{"class":733},[720,4510,757],{"class":733},[720,4512,4513],{"class":760},"Card Title",[720,4515,764],{"class":733},[720,4517,706],{"class":737},[720,4519,769],{"class":733},[720,4521,4522,4524,4526,4528,4530,4532,4535,4537,4539,4542,4544,4546],{"class":722,"line":842},[720,4523,1447],{"class":733},[720,4525,431],{"class":737},[720,4527,742],{"class":741},[720,4529,745],{"class":733},[720,4531,748],{"class":733},[720,4533,4534],{"class":751},"text-gray-600 @md:mt-2",[720,4536,748],{"class":733},[720,4538,757],{"class":733},[720,4540,4541],{"class":760},"Card description here.",[720,4543,764],{"class":733},[720,4545,431],{"class":737},[720,4547,769],{"class":733},[720,4549,4550,4552,4554],{"class":722,"line":862},[720,4551,1510],{"class":733},[720,4553,738],{"class":737},[720,4555,769],{"class":733},[720,4557,4558,4560,4562],{"class":722,"line":888},[720,4559,1014],{"class":733},[720,4561,738],{"class":737},[720,4563,769],{"class":733},[720,4565,4566,4568,4570],{"class":722,"line":894},[720,4567,764],{"class":733},[720,4569,738],{"class":737},[720,4571,769],{"class":733},[706,4573,4575],{"id":4574},"bài-tập-6-card-component-thay-đổi-layout-dựa-trên-width-của-chính-nó","Bài tập 6: Card component thay đổi layout dựa trên width của chính nó",[431,4577,4578,4580],{},[443,4579,1056],{}," Card khi nằm trong container nhỏ (\u003C 320px) hiển thị dạng dọc (image trên, text dưới). Khi container > 400px (@md), hiển thị dạng ngang (image trái, text phải). Khi > 640px (@lg), có thêm badge, tag, và nút CTA.",[711,4582,4584],{"className":713,"code":4583,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"grid grid-cols-1 md:grid-cols-2 gap-6 p-6\">\n \u003C!-- Column trái: width nhỏ → card dạng dọc -->\n \u003Cdiv>\n \u003Cdiv class=\"@container\">\n \u003Cdiv class=\"bg-white border rounded-xl overflow-hidden\n flex flex-col @md:flex-row\n @lg:shadow-lg @lg:hover:shadow-xl @lg:transition-shadow\">\n \u003C!-- Image -->\n \u003Cdiv class=\"w-full @md:w-2\u002F5 @lg:w-1\u002F3 aspect-video @md:aspect-square bg-gradient-to-br from-violet-400 to-indigo-500 relative\">\n \u003C!-- Badge chỉ hiện từ @lg -->\n \u003Cspan class=\"hidden @lg:block absolute top-3 left-3 bg-white\u002F90 text-xs font-bold px-2 py-1 rounded-full backdrop-blur-sm\">\n Featured\n \u003C\u002Fspan>\n \u003C\u002Fdiv>\n\n \u003C!-- Content -->\n \u003Cdiv class=\"p-4 @md:p-5 @lg:p-6 flex-1 flex flex-col justify-between\">\n \u003Cdiv>\n \u003C!-- Tags chỉ hiện từ @lg -->\n \u003Cdiv class=\"hidden @lg:flex gap-2 mb-2\">\n \u003Cspan class=\"text-xs bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded-full\">Design\u003C\u002Fspan>\n \u003Cspan class=\"text-xs bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded-full\">UI\u002FUX\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Ch3 class=\"font-bold text-gray-900 @lg:text-lg\">Product Design Principles\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 mt-1 @lg:mt-2 line-clamp-2 @lg:line-clamp-3\">\n Learn how to design better products with proven principles and methodologies\n that top companies use every day.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C!-- CTA button chỉ hiện từ @lg -->\n \u003Cbutton class=\"hidden @lg:inline-flex mt-3 text-sm font-medium text-indigo-600 hover:text-indigo-700\">\n Read more →\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Column phải: width lớn hơn → card dạng ngang với full feature -->\n \u003Cdiv>\n \u003Cdiv class=\"@container\">\n \u003Cdiv class=\"bg-white border rounded-xl overflow-hidden\n flex flex-col @md:flex-row\n @lg:shadow-lg @lg:hover:shadow-xl @lg:transition-shadow\">\n \u003C!-- Image -->\n \u003Cdiv class=\"w-full @md:w-2\u002F5 @lg:w-1\u002F3 aspect-video @md:aspect-square bg-gradient-to-br from-amber-400 to-orange-500 relative\">\n \u003Cspan class=\"hidden @lg:block absolute top-3 left-3 bg-white\u002F90 text-xs font-bold px-2 py-1 rounded-full backdrop-blur-sm\">\n Popular\n \u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C!-- Content -->\n \u003Cdiv class=\"p-4 @md:p-5 @lg:p-6 flex-1 flex flex-col justify-between\">\n \u003Cdiv>\n \u003Cdiv class=\"hidden @lg:flex gap-2 mb-2\">\n \u003Cspan class=\"text-xs bg-orange-50 text-orange-600 px-2 py-0.5 rounded-full\">Development\u003C\u002Fspan>\n \u003Cspan class=\"text-xs bg-orange-50 text-orange-600 px-2 py-0.5 rounded-full\">Frontend\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Ch3 class=\"font-bold text-gray-900 @lg:text-lg\">Modern CSS Techniques\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600 mt-1 @lg:mt-2 line-clamp-2 @lg:line-clamp-3\">\n Explore modern CSS features including container queries, cascade layers,\n and the latest layout techniques for responsive design.\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cbutton class=\"hidden @lg:inline-flex mt-3 text-sm font-medium text-orange-600 hover:text-orange-700\">\n Read more →\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,4585,4586,4605,4610,4618,4636,4651,4656,4665,4670,4689,4694,4713,4718,4726,4734,4738,4743,4762,4770,4775,4794,4823,4850,4859,4887,4906,4911,4916,4924,4932,4937,4956,4961,4969,4977,4985,4993,5001,5005,5010,5018,5036,5051,5056,5065,5070,5090,5109,5115,5124,5133,5138,5157,5166,5185,5214,5242,5251,5279,5298,5304,5310,5319,5328,5348,5353,5362,5371,5380,5389,5398],{"__ignoreMap":716},[720,4587,4588,4590,4592,4594,4596,4598,4601,4603],{"class":722,"line":723},[720,4589,734],{"class":733},[720,4591,738],{"class":737},[720,4593,742],{"class":741},[720,4595,745],{"class":733},[720,4597,748],{"class":733},[720,4599,4600],{"class":751},"grid grid-cols-1 md:grid-cols-2 gap-6 p-6",[720,4602,748],{"class":733},[720,4604,769],{"class":733},[720,4606,4607],{"class":722,"line":730},[720,4608,4609],{"class":726}," \u003C!-- Column trái: width nhỏ → card dạng dọc -->\n",[720,4611,4612,4614,4616],{"class":722,"line":772},[720,4613,865],{"class":733},[720,4615,738],{"class":737},[720,4617,769],{"class":733},[720,4619,4620,4622,4624,4626,4628,4630,4632,4634],{"class":722,"line":801},[720,4621,956],{"class":733},[720,4623,738],{"class":737},[720,4625,742],{"class":741},[720,4627,745],{"class":733},[720,4629,748],{"class":733},[720,4631,482],{"class":751},[720,4633,748],{"class":733},[720,4635,769],{"class":733},[720,4637,4638,4640,4642,4644,4646,4648],{"class":722,"line":829},[720,4639,1447],{"class":733},[720,4641,738],{"class":737},[720,4643,742],{"class":741},[720,4645,745],{"class":733},[720,4647,748],{"class":733},[720,4649,4650],{"class":751},"bg-white border rounded-xl overflow-hidden\n",[720,4652,4653],{"class":722,"line":836},[720,4654,4655],{"class":751}," flex flex-col @md:flex-row\n",[720,4657,4658,4661,4663],{"class":722,"line":842},[720,4659,4660],{"class":751}," @lg:shadow-lg @lg:hover:shadow-xl @lg:transition-shadow",[720,4662,748],{"class":733},[720,4664,769],{"class":733},[720,4666,4667],{"class":722,"line":862},[720,4668,4669],{"class":726}," \u003C!-- Image -->\n",[720,4671,4672,4674,4676,4678,4680,4682,4685,4687],{"class":722,"line":888},[720,4673,1736],{"class":733},[720,4675,738],{"class":737},[720,4677,742],{"class":741},[720,4679,745],{"class":733},[720,4681,748],{"class":733},[720,4683,4684],{"class":751},"w-full @md:w-2\u002F5 @lg:w-1\u002F3 aspect-video @md:aspect-square bg-gradient-to-br from-violet-400 to-indigo-500 relative",[720,4686,748],{"class":733},[720,4688,769],{"class":733},[720,4690,4691],{"class":722,"line":894},[720,4692,4693],{"class":726}," \u003C!-- Badge chỉ hiện từ @lg -->\n",[720,4695,4696,4698,4700,4702,4704,4706,4709,4711],{"class":722,"line":903},[720,4697,3161],{"class":733},[720,4699,720],{"class":737},[720,4701,742],{"class":741},[720,4703,745],{"class":733},[720,4705,748],{"class":733},[720,4707,4708],{"class":751},"hidden @lg:block absolute top-3 left-3 bg-white\u002F90 text-xs font-bold px-2 py-1 rounded-full backdrop-blur-sm",[720,4710,748],{"class":733},[720,4712,769],{"class":733},[720,4714,4715],{"class":722,"line":908},[720,4716,4717],{"class":760}," Featured\n",[720,4719,4720,4722,4724],{"class":722,"line":914},[720,4721,3489],{"class":733},[720,4723,720],{"class":737},[720,4725,769],{"class":733},[720,4727,4728,4730,4732],{"class":722,"line":934},[720,4729,3295],{"class":733},[720,4731,738],{"class":737},[720,4733,769],{"class":733},[720,4735,4736],{"class":722,"line":953},[720,4737,833],{"emptyLinePlaceholder":832},[720,4739,4740],{"class":722,"line":983},[720,4741,4742],{"class":726}," \u003C!-- Content -->\n",[720,4744,4745,4747,4749,4751,4753,4755,4758,4760],{"class":722,"line":1011},[720,4746,1736],{"class":733},[720,4748,738],{"class":737},[720,4750,742],{"class":741},[720,4752,745],{"class":733},[720,4754,748],{"class":733},[720,4756,4757],{"class":751},"p-4 @md:p-5 @lg:p-6 flex-1 flex flex-col justify-between",[720,4759,748],{"class":733},[720,4761,769],{"class":733},[720,4763,4764,4766,4768],{"class":722,"line":1021},[720,4765,3161],{"class":733},[720,4767,738],{"class":737},[720,4769,769],{"class":733},[720,4771,4772],{"class":722,"line":1367},[720,4773,4774],{"class":726}," \u003C!-- Tags chỉ hiện từ @lg -->\n",[720,4776,4777,4779,4781,4783,4785,4787,4790,4792],{"class":722,"line":1387},[720,4778,3434],{"class":733},[720,4780,738],{"class":737},[720,4782,742],{"class":741},[720,4784,745],{"class":733},[720,4786,748],{"class":733},[720,4788,4789],{"class":751},"hidden @lg:flex gap-2 mb-2",[720,4791,748],{"class":733},[720,4793,769],{"class":733},[720,4795,4796,4799,4801,4803,4805,4807,4810,4812,4814,4817,4819,4821],{"class":722,"line":1444},[720,4797,4798],{"class":733}," \u003C",[720,4800,720],{"class":737},[720,4802,742],{"class":741},[720,4804,745],{"class":733},[720,4806,748],{"class":733},[720,4808,4809],{"class":751},"text-xs bg-indigo-50 text-indigo-600 px-2 py-0.5 rounded-full",[720,4811,748],{"class":733},[720,4813,757],{"class":733},[720,4815,4816],{"class":760},"Design",[720,4818,764],{"class":733},[720,4820,720],{"class":737},[720,4822,769],{"class":733},[720,4824,4825,4827,4829,4831,4833,4835,4837,4839,4841,4844,4846,4848],{"class":722,"line":1489},[720,4826,4798],{"class":733},[720,4828,720],{"class":737},[720,4830,742],{"class":741},[720,4832,745],{"class":733},[720,4834,748],{"class":733},[720,4836,4809],{"class":751},[720,4838,748],{"class":733},[720,4840,757],{"class":733},[720,4842,4843],{"class":760},"UI\u002FUX",[720,4845,764],{"class":733},[720,4847,720],{"class":737},[720,4849,769],{"class":733},[720,4851,4852,4855,4857],{"class":722,"line":1507},[720,4853,4854],{"class":733}," \u003C\u002F",[720,4856,738],{"class":737},[720,4858,769],{"class":733},[720,4860,4861,4863,4865,4867,4869,4871,4874,4876,4878,4881,4883,4885],{"class":722,"line":1517},[720,4862,3434],{"class":733},[720,4864,706],{"class":737},[720,4866,742],{"class":741},[720,4868,745],{"class":733},[720,4870,748],{"class":733},[720,4872,4873],{"class":751},"font-bold text-gray-900 @lg:text-lg",[720,4875,748],{"class":733},[720,4877,757],{"class":733},[720,4879,4880],{"class":760},"Product Design Principles",[720,4882,764],{"class":733},[720,4884,706],{"class":737},[720,4886,769],{"class":733},[720,4888,4889,4891,4893,4895,4897,4899,4902,4904],{"class":722,"line":1526},[720,4890,3434],{"class":733},[720,4892,431],{"class":737},[720,4894,742],{"class":741},[720,4896,745],{"class":733},[720,4898,748],{"class":733},[720,4900,4901],{"class":751},"text-sm text-gray-600 mt-1 @lg:mt-2 line-clamp-2 @lg:line-clamp-3",[720,4903,748],{"class":733},[720,4905,769],{"class":733},[720,4907,4908],{"class":722,"line":2017},[720,4909,4910],{"class":760}," Learn how to design better products with proven principles and methodologies\n",[720,4912,4913],{"class":722,"line":2026},[720,4914,4915],{"class":760}," that top companies use every day.\n",[720,4917,4918,4920,4922],{"class":722,"line":3468},[720,4919,4854],{"class":733},[720,4921,431],{"class":737},[720,4923,769],{"class":733},[720,4925,4926,4928,4930],{"class":722,"line":3486},[720,4927,3489],{"class":733},[720,4929,738],{"class":737},[720,4931,769],{"class":733},[720,4933,4934],{"class":722,"line":3496},[720,4935,4936],{"class":726}," \u003C!-- CTA button chỉ hiện từ @lg -->\n",[720,4938,4939,4941,4943,4945,4947,4949,4952,4954],{"class":722,"line":3505},[720,4940,3161],{"class":733},[720,4942,1329],{"class":737},[720,4944,742],{"class":741},[720,4946,745],{"class":733},[720,4948,748],{"class":733},[720,4950,4951],{"class":751},"hidden @lg:inline-flex mt-3 text-sm font-medium text-indigo-600 hover:text-indigo-700",[720,4953,748],{"class":733},[720,4955,769],{"class":733},[720,4957,4958],{"class":722,"line":3525},[720,4959,4960],{"class":760}," Read more →\n",[720,4962,4963,4965,4967],{"class":722,"line":3553},[720,4964,3489],{"class":733},[720,4966,1329],{"class":737},[720,4968,769],{"class":733},[720,4970,4971,4973,4975],{"class":722,"line":3573},[720,4972,3295],{"class":733},[720,4974,738],{"class":737},[720,4976,769],{"class":733},[720,4978,4979,4981,4983],{"class":722,"line":3591},[720,4980,1849],{"class":733},[720,4982,738],{"class":737},[720,4984,769],{"class":733},[720,4986,4987,4989,4991],{"class":722,"line":3609},[720,4988,1510],{"class":733},[720,4990,738],{"class":737},[720,4992,769],{"class":733},[720,4994,4995,4997,4999],{"class":722,"line":3618},[720,4996,1014],{"class":733},[720,4998,738],{"class":737},[720,5000,769],{"class":733},[720,5002,5003],{"class":722,"line":3627},[720,5004,833],{"emptyLinePlaceholder":832},[720,5006,5007],{"class":722,"line":3636},[720,5008,5009],{"class":726}," \u003C!-- Column phải: width lớn hơn → card dạng ngang với full feature -->\n",[720,5011,5012,5014,5016],{"class":722,"line":3645},[720,5013,865],{"class":733},[720,5015,738],{"class":737},[720,5017,769],{"class":733},[720,5019,5020,5022,5024,5026,5028,5030,5032,5034],{"class":722,"line":3654},[720,5021,956],{"class":733},[720,5023,738],{"class":737},[720,5025,742],{"class":741},[720,5027,745],{"class":733},[720,5029,748],{"class":733},[720,5031,482],{"class":751},[720,5033,748],{"class":733},[720,5035,769],{"class":733},[720,5037,5039,5041,5043,5045,5047,5049],{"class":722,"line":5038},42,[720,5040,1447],{"class":733},[720,5042,738],{"class":737},[720,5044,742],{"class":741},[720,5046,745],{"class":733},[720,5048,748],{"class":733},[720,5050,4650],{"class":751},[720,5052,5054],{"class":722,"line":5053},43,[720,5055,4655],{"class":751},[720,5057,5059,5061,5063],{"class":722,"line":5058},44,[720,5060,4660],{"class":751},[720,5062,748],{"class":733},[720,5064,769],{"class":733},[720,5066,5068],{"class":722,"line":5067},45,[720,5069,4669],{"class":726},[720,5071,5073,5075,5077,5079,5081,5083,5086,5088],{"class":722,"line":5072},46,[720,5074,1736],{"class":733},[720,5076,738],{"class":737},[720,5078,742],{"class":741},[720,5080,745],{"class":733},[720,5082,748],{"class":733},[720,5084,5085],{"class":751},"w-full @md:w-2\u002F5 @lg:w-1\u002F3 aspect-video @md:aspect-square bg-gradient-to-br from-amber-400 to-orange-500 relative",[720,5087,748],{"class":733},[720,5089,769],{"class":733},[720,5091,5093,5095,5097,5099,5101,5103,5105,5107],{"class":722,"line":5092},47,[720,5094,3161],{"class":733},[720,5096,720],{"class":737},[720,5098,742],{"class":741},[720,5100,745],{"class":733},[720,5102,748],{"class":733},[720,5104,4708],{"class":751},[720,5106,748],{"class":733},[720,5108,769],{"class":733},[720,5110,5112],{"class":722,"line":5111},48,[720,5113,5114],{"class":760}," Popular\n",[720,5116,5118,5120,5122],{"class":722,"line":5117},49,[720,5119,3489],{"class":733},[720,5121,720],{"class":737},[720,5123,769],{"class":733},[720,5125,5127,5129,5131],{"class":722,"line":5126},50,[720,5128,3295],{"class":733},[720,5130,738],{"class":737},[720,5132,769],{"class":733},[720,5134,5136],{"class":722,"line":5135},51,[720,5137,4742],{"class":726},[720,5139,5141,5143,5145,5147,5149,5151,5153,5155],{"class":722,"line":5140},52,[720,5142,1736],{"class":733},[720,5144,738],{"class":737},[720,5146,742],{"class":741},[720,5148,745],{"class":733},[720,5150,748],{"class":733},[720,5152,4757],{"class":751},[720,5154,748],{"class":733},[720,5156,769],{"class":733},[720,5158,5160,5162,5164],{"class":722,"line":5159},53,[720,5161,3161],{"class":733},[720,5163,738],{"class":737},[720,5165,769],{"class":733},[720,5167,5169,5171,5173,5175,5177,5179,5181,5183],{"class":722,"line":5168},54,[720,5170,3434],{"class":733},[720,5172,738],{"class":737},[720,5174,742],{"class":741},[720,5176,745],{"class":733},[720,5178,748],{"class":733},[720,5180,4789],{"class":751},[720,5182,748],{"class":733},[720,5184,769],{"class":733},[720,5186,5188,5190,5192,5194,5196,5198,5201,5203,5205,5208,5210,5212],{"class":722,"line":5187},55,[720,5189,4798],{"class":733},[720,5191,720],{"class":737},[720,5193,742],{"class":741},[720,5195,745],{"class":733},[720,5197,748],{"class":733},[720,5199,5200],{"class":751},"text-xs bg-orange-50 text-orange-600 px-2 py-0.5 rounded-full",[720,5202,748],{"class":733},[720,5204,757],{"class":733},[720,5206,5207],{"class":760},"Development",[720,5209,764],{"class":733},[720,5211,720],{"class":737},[720,5213,769],{"class":733},[720,5215,5217,5219,5221,5223,5225,5227,5229,5231,5233,5236,5238,5240],{"class":722,"line":5216},56,[720,5218,4798],{"class":733},[720,5220,720],{"class":737},[720,5222,742],{"class":741},[720,5224,745],{"class":733},[720,5226,748],{"class":733},[720,5228,5200],{"class":751},[720,5230,748],{"class":733},[720,5232,757],{"class":733},[720,5234,5235],{"class":760},"Frontend",[720,5237,764],{"class":733},[720,5239,720],{"class":737},[720,5241,769],{"class":733},[720,5243,5245,5247,5249],{"class":722,"line":5244},57,[720,5246,4854],{"class":733},[720,5248,738],{"class":737},[720,5250,769],{"class":733},[720,5252,5254,5256,5258,5260,5262,5264,5266,5268,5270,5273,5275,5277],{"class":722,"line":5253},58,[720,5255,3434],{"class":733},[720,5257,706],{"class":737},[720,5259,742],{"class":741},[720,5261,745],{"class":733},[720,5263,748],{"class":733},[720,5265,4873],{"class":751},[720,5267,748],{"class":733},[720,5269,757],{"class":733},[720,5271,5272],{"class":760},"Modern CSS Techniques",[720,5274,764],{"class":733},[720,5276,706],{"class":737},[720,5278,769],{"class":733},[720,5280,5282,5284,5286,5288,5290,5292,5294,5296],{"class":722,"line":5281},59,[720,5283,3434],{"class":733},[720,5285,431],{"class":737},[720,5287,742],{"class":741},[720,5289,745],{"class":733},[720,5291,748],{"class":733},[720,5293,4901],{"class":751},[720,5295,748],{"class":733},[720,5297,769],{"class":733},[720,5299,5301],{"class":722,"line":5300},60,[720,5302,5303],{"class":760}," Explore modern CSS features including container queries, cascade layers,\n",[720,5305,5307],{"class":722,"line":5306},61,[720,5308,5309],{"class":760}," and the latest layout techniques for responsive design.\n",[720,5311,5313,5315,5317],{"class":722,"line":5312},62,[720,5314,4854],{"class":733},[720,5316,431],{"class":737},[720,5318,769],{"class":733},[720,5320,5322,5324,5326],{"class":722,"line":5321},63,[720,5323,3489],{"class":733},[720,5325,738],{"class":737},[720,5327,769],{"class":733},[720,5329,5331,5333,5335,5337,5339,5341,5344,5346],{"class":722,"line":5330},64,[720,5332,3161],{"class":733},[720,5334,1329],{"class":737},[720,5336,742],{"class":741},[720,5338,745],{"class":733},[720,5340,748],{"class":733},[720,5342,5343],{"class":751},"hidden @lg:inline-flex mt-3 text-sm font-medium text-orange-600 hover:text-orange-700",[720,5345,748],{"class":733},[720,5347,769],{"class":733},[720,5349,5351],{"class":722,"line":5350},65,[720,5352,4960],{"class":760},[720,5354,5356,5358,5360],{"class":722,"line":5355},66,[720,5357,3489],{"class":733},[720,5359,1329],{"class":737},[720,5361,769],{"class":733},[720,5363,5365,5367,5369],{"class":722,"line":5364},67,[720,5366,3295],{"class":733},[720,5368,738],{"class":737},[720,5370,769],{"class":733},[720,5372,5374,5376,5378],{"class":722,"line":5373},68,[720,5375,1849],{"class":733},[720,5377,738],{"class":737},[720,5379,769],{"class":733},[720,5381,5383,5385,5387],{"class":722,"line":5382},69,[720,5384,1510],{"class":733},[720,5386,738],{"class":737},[720,5388,769],{"class":733},[720,5390,5392,5394,5396],{"class":722,"line":5391},70,[720,5393,1014],{"class":733},[720,5395,738],{"class":737},[720,5397,769],{"class":733},[720,5399,5401,5403,5405],{"class":722,"line":5400},71,[720,5402,764],{"class":733},[720,5404,738],{"class":737},[720,5406,769],{"class":733},[435,5408,5409,5416],{"color":437,"icon":438},[431,5410,441,5411,446,5413],{},[443,5412,445],{},[448,5414,5415],{},"\"Container query khác media query thế nào? Khi nào dùng cái nào?\"",[452,5417,5418],{},[431,5419,5420,5421,5424,5425,5428],{},"\"Media query dựa trên ",[443,5422,5423],{},"viewport width",", phù hợp cho page-level layout (sidebar, header, grid columns). Container query dựa trên ",[443,5426,5427],{},"width của phần tử cha",", phù hợp cho component tái sử dụng — cùng một card component nhưng render khác nhau khi nằm trong sidebar hẹp vs main content rộng. Tailwind v4 hỗ trợ cả hai.\"",[706,5430,5432,5435],{"id":5431},"container-size-v43-new",[458,5433,5434],{},"@container-size"," (v4.3 NEW)",[711,5437,5439],{"className":713,"code":5438,"language":715,"meta":716,"style":716},"\u003C!-- Định nghĩa container với custom size -->\n\u003Cdiv class=\"@container-size-md\">\n \u003C!-- Children query dựa trên size này -->\n \u003Cdiv class=\"@md:grid-cols-2\">...\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,5440,5441,5446,5464,5469,5495],{"__ignoreMap":716},[720,5442,5443],{"class":722,"line":723},[720,5444,5445],{"class":726},"\u003C!-- Định nghĩa container với custom size -->\n",[720,5447,5448,5450,5452,5454,5456,5458,5460,5462],{"class":722,"line":730},[720,5449,734],{"class":733},[720,5451,738],{"class":737},[720,5453,742],{"class":741},[720,5455,745],{"class":733},[720,5457,748],{"class":733},[720,5459,4397],{"class":751},[720,5461,748],{"class":733},[720,5463,769],{"class":733},[720,5465,5466],{"class":722,"line":772},[720,5467,5468],{"class":726}," \u003C!-- Children query dựa trên size này -->\n",[720,5470,5471,5473,5475,5477,5479,5481,5483,5485,5487,5489,5491,5493],{"class":722,"line":801},[720,5472,865],{"class":733},[720,5474,738],{"class":737},[720,5476,742],{"class":741},[720,5478,745],{"class":733},[720,5480,748],{"class":733},[720,5482,485],{"class":751},[720,5484,748],{"class":733},[720,5486,757],{"class":733},[720,5488,4401],{"class":760},[720,5490,764],{"class":733},[720,5492,738],{"class":737},[720,5494,769],{"class":733},[720,5496,5497,5499,5501],{"class":722,"line":829},[720,5498,764],{"class":733},[720,5500,738],{"class":737},[720,5502,769],{"class":733},[488,5504],{},[427,5506,5508],{"id":5507},"_4-flexbox","4. Flexbox",[706,5510,5512],{"id":5511},"container-properties-cha","Container properties (cha)",[502,5514,5515,5523],{},[505,5516,5517],{},[508,5518,5519,5521],{},[511,5520,513],{},[511,5522,516],{},[521,5524,5525,5540,5558,5576,5593,5613,5631,5649],{},[508,5526,5527,5534],{},[526,5528,5529,5531,5532],{},[458,5530,460],{}," \u002F ",[458,5533,572],{},[526,5535,5536,5531,5538],{},[458,5537,464],{},[458,5539,577],{},[508,5541,5542,5550],{},[526,5543,5544,5531,5547],{},[458,5545,5546],{},"flex-row",[458,5548,5549],{},"flex-row-reverse",[526,5551,5552,5531,5555],{},[458,5553,5554],{},"flex-direction: row",[458,5556,5557],{},"row-reverse",[508,5559,5560,5568],{},[526,5561,5562,5531,5565],{},[458,5563,5564],{},"flex-col",[458,5566,5567],{},"flex-col-reverse",[526,5569,5570,5531,5573],{},[458,5571,5572],{},"flex-direction: column",[458,5574,5575],{},"column-reverse",[508,5577,5578,5589],{},[526,5579,5580,5531,5583,5531,5586],{},[458,5581,5582],{},"flex-wrap",[458,5584,5585],{},"flex-wrap-reverse",[458,5587,5588],{},"flex-nowrap",[526,5590,5591],{},[458,5592,5582],{},[508,5594,5595,5608],{},[526,5596,5597,5531,5599,5531,5602,5531,5605],{},[458,5598,4487],{},[458,5600,5601],{},"flex-auto",[458,5603,5604],{},"flex-initial",[458,5606,5607],{},"flex-none",[526,5609,5610,5612],{},[458,5611,460],{}," shorthand",[508,5614,5615,5623],{},[526,5616,5617,5531,5620],{},[458,5618,5619],{},"grow",[458,5621,5622],{},"grow-0",[526,5624,5625,5531,5628],{},[458,5626,5627],{},"flex-grow: 1",[458,5629,5630],{},"flex-grow: 0",[508,5632,5633,5641],{},[526,5634,5635,5531,5638],{},[458,5636,5637],{},"shrink",[458,5639,5640],{},"shrink-0",[526,5642,5643,5531,5646],{},[458,5644,5645],{},"flex-shrink: 1",[458,5647,5648],{},"flex-shrink: 0",[508,5650,5651,5657],{},[526,5652,5653,5656],{},[458,5654,5655],{},"basis-*"," (0..96, auto, full, fractions)",[526,5658,5659],{},[458,5660,5661],{},"flex-basis",[706,5663,5665],{"id":5664},"justify-align","Justify & Align",[502,5667,5668,5676],{},[505,5669,5670],{},[508,5671,5672,5674],{},[511,5673,513],{},[511,5675,516],{},[521,5677,5678,5711,5723,5735,5771,5795],{},[508,5679,5680,5706],{},[526,5681,5682,465,5685,465,5688,465,5691,465,5694,465,5697,465,5700,465,5703],{},[458,5683,5684],{},"justify-normal",[458,5686,5687],{},"justify-start",[458,5689,5690],{},"justify-end",[458,5692,5693],{},"justify-center",[458,5695,5696],{},"justify-between",[458,5698,5699],{},"justify-around",[458,5701,5702],{},"justify-evenly",[458,5704,5705],{},"justify-stretch",[526,5707,5708],{},[458,5709,5710],{},"justify-content",[508,5712,5713,5718],{},[526,5714,5715],{},[458,5716,5717],{},"justify-items-*",[526,5719,5720],{},[458,5721,5722],{},"justify-items",[508,5724,5725,5730],{},[526,5726,5727],{},[458,5728,5729],{},"justify-self-*",[526,5731,5732],{},[458,5733,5734],{},"justify-self",[508,5736,5737,5766],{},[526,5738,5739,465,5742,465,5745,465,5748,465,5751,465,5754,465,5757,465,5760,465,5763],{},[458,5740,5741],{},"content-normal",[458,5743,5744],{},"content-start",[458,5746,5747],{},"content-center",[458,5749,5750],{},"content-end",[458,5752,5753],{},"content-between",[458,5755,5756],{},"content-around",[458,5758,5759],{},"content-evenly",[458,5761,5762],{},"content-baseline",[458,5764,5765],{},"content-stretch",[526,5767,5768],{},[458,5769,5770],{},"align-content",[508,5772,5773,5790],{},[526,5774,5775,465,5778,465,5781,465,5784,465,5787],{},[458,5776,5777],{},"items-start",[458,5779,5780],{},"items-end",[458,5782,5783],{},"items-center",[458,5785,5786],{},"items-baseline",[458,5788,5789],{},"items-stretch",[526,5791,5792],{},[458,5793,5794],{},"align-items",[508,5796,5797,5817],{},[526,5798,5799,465,5802,465,5805,465,5808,465,5811,465,5814],{},[458,5800,5801],{},"self-auto",[458,5803,5804],{},"self-start",[458,5806,5807],{},"self-end",[458,5809,5810],{},"self-center",[458,5812,5813],{},"self-stretch",[458,5815,5816],{},"self-baseline",[526,5818,5819],{},[458,5820,5821],{},"align-self",[706,5823,5825],{"id":5824},"order-gap","Order & Gap",[502,5827,5828,5836],{},[505,5829,5830],{},[508,5831,5832,5834],{},[511,5833,513],{},[511,5835,516],{},[521,5837,5838,5851,5864],{},[508,5839,5840,5846],{},[526,5841,5842,5845],{},[458,5843,5844],{},"order-*"," (1..12, first, last, none)",[526,5847,5848],{},[458,5849,5850],{},"order",[508,5852,5853,5859],{},[526,5854,5855,5858],{},[458,5856,5857],{},"gap-*"," (0..96, px, fractions)",[526,5860,5861],{},[458,5862,5863],{},"gap",[508,5865,5866,5874],{},[526,5867,5868,465,5871],{},[458,5869,5870],{},"gap-x-*",[458,5872,5873],{},"gap-y-*",[526,5875,5876,465,5879],{},[458,5877,5878],{},"row-gap",[458,5880,5881],{},"column-gap",[706,5883,5885],{"id":5884},"bài-tập-7-centered-card-cả-ngang-và-dọc","Bài tập 7: Centered card (cả ngang và dọc)",[431,5887,5888,5890],{},[443,5889,1056],{}," Canh giữa một card cả chiều ngang và chiều dọc trong viewport.",[711,5892,5894],{"className":713,"code":5893,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"min-h-screen flex items-center justify-center bg-gray-100 p-6\">\n \u003Cdiv class=\"bg-white rounded-2xl shadow-xl p-8 max-w-md w-full text-center\">\n \u003Cdiv class=\"w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4\">\n \u003Csvg class=\"w-8 h-8 text-blue-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n d=\"M5 13l4 4L19 7\"\u002F>\n \u003C\u002Fsvg>\n \u003C\u002Fdiv>\n \u003Ch2 class=\"text-2xl font-bold text-gray-900 mb-2\">Thành công!\u003C\u002Fh2>\n \u003Cp class=\"text-gray-600 mb-6\">Tài khoản của bạn đã được tạo. Vui lòng kiểm tra email để xác nhận.\u003C\u002Fp>\n \u003Cbutton class=\"w-full bg-blue-600 text-white py-2.5 rounded-lg hover:bg-blue-700 transition-colors font-medium\">\n Đi đến Dashboard\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,5895,5896,5915,5934,5953,6002,6038,6054,6062,6070,6098,6126,6145,6150,6158,6166],{"__ignoreMap":716},[720,5897,5898,5900,5902,5904,5906,5908,5911,5913],{"class":722,"line":723},[720,5899,734],{"class":733},[720,5901,738],{"class":737},[720,5903,742],{"class":741},[720,5905,745],{"class":733},[720,5907,748],{"class":733},[720,5909,5910],{"class":751},"min-h-screen flex items-center justify-center bg-gray-100 p-6",[720,5912,748],{"class":733},[720,5914,769],{"class":733},[720,5916,5917,5919,5921,5923,5925,5927,5930,5932],{"class":722,"line":730},[720,5918,865],{"class":733},[720,5920,738],{"class":737},[720,5922,742],{"class":741},[720,5924,745],{"class":733},[720,5926,748],{"class":733},[720,5928,5929],{"class":751},"bg-white rounded-2xl shadow-xl p-8 max-w-md w-full text-center",[720,5931,748],{"class":733},[720,5933,769],{"class":733},[720,5935,5936,5938,5940,5942,5944,5946,5949,5951],{"class":722,"line":772},[720,5937,956],{"class":733},[720,5939,738],{"class":737},[720,5941,742],{"class":741},[720,5943,745],{"class":733},[720,5945,748],{"class":733},[720,5947,5948],{"class":751},"w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4",[720,5950,748],{"class":733},[720,5952,769],{"class":733},[720,5954,5955,5957,5959,5961,5963,5965,5968,5970,5972,5974,5976,5978,5980,5982,5984,5986,5988,5990,5992,5994,5996,5998,6000],{"class":722,"line":801},[720,5956,1447],{"class":733},[720,5958,1392],{"class":737},[720,5960,742],{"class":741},[720,5962,745],{"class":733},[720,5964,748],{"class":733},[720,5966,5967],{"class":751},"w-8 h-8 text-blue-600",[720,5969,748],{"class":733},[720,5971,1406],{"class":741},[720,5973,745],{"class":733},[720,5975,748],{"class":733},[720,5977,1413],{"class":751},[720,5979,748],{"class":733},[720,5981,1418],{"class":741},[720,5983,745],{"class":733},[720,5985,748],{"class":733},[720,5987,1425],{"class":751},[720,5989,748],{"class":733},[720,5991,1430],{"class":741},[720,5993,745],{"class":733},[720,5995,748],{"class":733},[720,5997,1437],{"class":751},[720,5999,748],{"class":733},[720,6001,769],{"class":733},[720,6003,6004,6006,6008,6010,6012,6014,6016,6018,6020,6022,6024,6026,6028,6030,6032,6034,6036],{"class":722,"line":829},[720,6005,1736],{"class":733},[720,6007,1450],{"class":737},[720,6009,1453],{"class":741},[720,6011,745],{"class":733},[720,6013,748],{"class":733},[720,6015,1460],{"class":751},[720,6017,748],{"class":733},[720,6019,1465],{"class":741},[720,6021,745],{"class":733},[720,6023,748],{"class":733},[720,6025,1460],{"class":751},[720,6027,748],{"class":733},[720,6029,1476],{"class":741},[720,6031,745],{"class":733},[720,6033,748],{"class":733},[720,6035,1483],{"class":751},[720,6037,1486],{"class":733},[720,6039,6040,6043,6045,6047,6050,6052],{"class":722,"line":836},[720,6041,6042],{"class":741}," d",[720,6044,745],{"class":733},[720,6046,748],{"class":733},[720,6048,6049],{"class":751},"M5 13l4 4L19 7",[720,6051,748],{"class":733},[720,6053,1504],{"class":733},[720,6055,6056,6058,6060],{"class":722,"line":842},[720,6057,1849],{"class":733},[720,6059,1392],{"class":737},[720,6061,769],{"class":733},[720,6063,6064,6066,6068],{"class":722,"line":862},[720,6065,1510],{"class":733},[720,6067,738],{"class":737},[720,6069,769],{"class":733},[720,6071,6072,6074,6076,6078,6080,6082,6085,6087,6089,6092,6094,6096],{"class":722,"line":888},[720,6073,956],{"class":733},[720,6075,427],{"class":737},[720,6077,742],{"class":741},[720,6079,745],{"class":733},[720,6081,748],{"class":733},[720,6083,6084],{"class":751},"text-2xl font-bold text-gray-900 mb-2",[720,6086,748],{"class":733},[720,6088,757],{"class":733},[720,6090,6091],{"class":760},"Thành công!",[720,6093,764],{"class":733},[720,6095,427],{"class":737},[720,6097,769],{"class":733},[720,6099,6100,6102,6104,6106,6108,6110,6113,6115,6117,6120,6122,6124],{"class":722,"line":894},[720,6101,956],{"class":733},[720,6103,431],{"class":737},[720,6105,742],{"class":741},[720,6107,745],{"class":733},[720,6109,748],{"class":733},[720,6111,6112],{"class":751},"text-gray-600 mb-6",[720,6114,748],{"class":733},[720,6116,757],{"class":733},[720,6118,6119],{"class":760},"Tài khoản của bạn đã được tạo. Vui lòng kiểm tra email để xác nhận.",[720,6121,764],{"class":733},[720,6123,431],{"class":737},[720,6125,769],{"class":733},[720,6127,6128,6130,6132,6134,6136,6138,6141,6143],{"class":722,"line":903},[720,6129,956],{"class":733},[720,6131,1329],{"class":737},[720,6133,742],{"class":741},[720,6135,745],{"class":733},[720,6137,748],{"class":733},[720,6139,6140],{"class":751},"w-full bg-blue-600 text-white py-2.5 rounded-lg hover:bg-blue-700 transition-colors font-medium",[720,6142,748],{"class":733},[720,6144,769],{"class":733},[720,6146,6147],{"class":722,"line":908},[720,6148,6149],{"class":760}," Đi đến Dashboard\n",[720,6151,6152,6154,6156],{"class":722,"line":914},[720,6153,1510],{"class":733},[720,6155,1329],{"class":737},[720,6157,769],{"class":733},[720,6159,6160,6162,6164],{"class":722,"line":934},[720,6161,1014],{"class":733},[720,6163,738],{"class":737},[720,6165,769],{"class":733},[720,6167,6168,6170,6172],{"class":722,"line":953},[720,6169,764],{"class":733},[720,6171,738],{"class":737},[720,6173,769],{"class":733},[435,6175,6176,446,6179,6182,6183,6186],{"color":1030,"icon":1031},[443,6177,6178],{},"Công thức căn giữa hoàn hảo:",[458,6180,6181],{},"flex items-center justify-center"," trên container + ",[458,6184,6185],{},"min-h-screen"," để có full viewport height.",[706,6188,6190],{"id":6189},"bài-tập-8-holy-grail-layout-với-flexbox","Bài tập 8: Holy Grail layout với flexbox",[431,6192,6193,6195],{},[443,6194,1056],{}," Layout kinh điển: header + 3 cột (nav trái, main giữa, aside phải) + footer. Cột giữa co giãn, 2 cột bên fixed width.",[711,6197,6199],{"className":713,"code":6198,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"min-h-screen flex flex-col\">\n \u003C!-- Header -->\n \u003Cheader class=\"bg-gray-900 text-white px-6 py-4 flex items-center justify-between\">\n \u003Ch1 class=\"text-xl font-bold\">Holy Grail\u003C\u002Fh1>\n \u003Cnav class=\"flex gap-4 text-sm\">\n \u003Ca href=\"#\" class=\"hover:text-gray-300\">Home\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"hover:text-gray-300\">About\u003C\u002Fa>\n \u003C\u002Fnav>\n \u003C\u002Fheader>\n\n \u003C!-- Body: 3 cột -->\n \u003Cdiv class=\"flex flex-1\">\n \u003C!-- Left nav -->\n \u003Cnav class=\"w-64 bg-gray-100 p-6 flex-shrink-0\">\n \u003Ch3 class=\"font-bold mb-4\">Navigation\u003C\u002Fh3>\n \u003Cul class=\"space-y-2\">\n \u003Cli>Link 1\u003C\u002Fli>\n \u003Cli>Link 2\u003C\u002Fli>\n \u003Cli>Link 3\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fnav>\n\n \u003C!-- Main content — flex-1 chiếm hết chỗ còn lại -->\n \u003Cmain class=\"flex-1 p-6 min-w-0\">\n \u003Ch2 class=\"text-2xl font-bold mb-4\">Main Content\u003C\u002Fh2>\n \u003Cp class=\"text-gray-600\">Nội dung chính ở đây. Cột này co giãn theo không gian còn lại.\u003C\u002Fp>\n \u003C\u002Fmain>\n\n \u003C!-- Right aside -->\n \u003Caside class=\"w-72 bg-gray-50 p-6 flex-shrink-0\">\n \u003Ch3 class=\"font-bold mb-4\">Sidebar\u003C\u002Fh3>\n \u003Cp class=\"text-sm text-gray-600\">Thông tin phụ.\u003C\u002Fp>\n \u003C\u002Faside>\n \u003C\u002Fdiv>\n\n \u003C!-- Footer -->\n \u003Cfooter class=\"bg-gray-900 text-gray-400 px-6 py-4 text-center text-sm\">\n © 2026 Holy Grail Layout. Built with Tailwind CSS v4.\n \u003C\u002Ffooter>\n\u003C\u002Fdiv>\n",[458,6200,6201,6220,6225,6244,6271,6290,6327,6363,6371,6379,6383,6388,6407,6412,6431,6459,6478,6495,6512,6529,6537,6545,6549,6554,6573,6600,6628,6636,6640,6645,6664,6690,6718,6726,6734,6738,6743,6763,6768,6776],{"__ignoreMap":716},[720,6202,6203,6205,6207,6209,6211,6213,6216,6218],{"class":722,"line":723},[720,6204,734],{"class":733},[720,6206,738],{"class":737},[720,6208,742],{"class":741},[720,6210,745],{"class":733},[720,6212,748],{"class":733},[720,6214,6215],{"class":751},"min-h-screen flex flex-col",[720,6217,748],{"class":733},[720,6219,769],{"class":733},[720,6221,6222],{"class":722,"line":730},[720,6223,6224],{"class":726}," \u003C!-- Header -->\n",[720,6226,6227,6229,6231,6233,6235,6237,6240,6242],{"class":722,"line":772},[720,6228,865],{"class":733},[720,6230,2535],{"class":737},[720,6232,742],{"class":741},[720,6234,745],{"class":733},[720,6236,748],{"class":733},[720,6238,6239],{"class":751},"bg-gray-900 text-white px-6 py-4 flex items-center justify-between",[720,6241,748],{"class":733},[720,6243,769],{"class":733},[720,6245,6246,6248,6250,6252,6254,6256,6258,6260,6262,6265,6267,6269],{"class":722,"line":801},[720,6247,956],{"class":733},[720,6249,1992],{"class":737},[720,6251,742],{"class":741},[720,6253,745],{"class":733},[720,6255,748],{"class":733},[720,6257,2582],{"class":751},[720,6259,748],{"class":733},[720,6261,757],{"class":733},[720,6263,6264],{"class":760},"Holy Grail",[720,6266,764],{"class":733},[720,6268,1992],{"class":737},[720,6270,769],{"class":733},[720,6272,6273,6275,6277,6279,6281,6283,6286,6288],{"class":722,"line":829},[720,6274,956],{"class":733},[720,6276,1069],{"class":737},[720,6278,742],{"class":741},[720,6280,745],{"class":733},[720,6282,748],{"class":733},[720,6284,6285],{"class":751},"flex gap-4 text-sm",[720,6287,748],{"class":733},[720,6289,769],{"class":733},[720,6291,6292,6294,6296,6298,6300,6302,6304,6306,6308,6310,6312,6315,6317,6319,6321,6323,6325],{"class":722,"line":836},[720,6293,1447],{"class":733},[720,6295,1094],{"class":737},[720,6297,1097],{"class":741},[720,6299,745],{"class":733},[720,6301,748],{"class":733},[720,6303,1104],{"class":751},[720,6305,748],{"class":733},[720,6307,742],{"class":741},[720,6309,745],{"class":733},[720,6311,748],{"class":733},[720,6313,6314],{"class":751},"hover:text-gray-300",[720,6316,748],{"class":733},[720,6318,757],{"class":733},[720,6320,1188],{"class":760},[720,6322,764],{"class":733},[720,6324,1094],{"class":737},[720,6326,769],{"class":733},[720,6328,6329,6331,6333,6335,6337,6339,6341,6343,6345,6347,6349,6351,6353,6355,6357,6359,6361],{"class":722,"line":842},[720,6330,1447],{"class":733},[720,6332,1094],{"class":737},[720,6334,1097],{"class":741},[720,6336,745],{"class":733},[720,6338,748],{"class":733},[720,6340,1104],{"class":751},[720,6342,748],{"class":733},[720,6344,742],{"class":741},[720,6346,745],{"class":733},[720,6348,748],{"class":733},[720,6350,6314],{"class":751},[720,6352,748],{"class":733},[720,6354,757],{"class":733},[720,6356,1299],{"class":760},[720,6358,764],{"class":733},[720,6360,1094],{"class":737},[720,6362,769],{"class":733},[720,6364,6365,6367,6369],{"class":722,"line":862},[720,6366,1510],{"class":733},[720,6368,1069],{"class":737},[720,6370,769],{"class":733},[720,6372,6373,6375,6377],{"class":722,"line":888},[720,6374,1014],{"class":733},[720,6376,2535],{"class":737},[720,6378,769],{"class":733},[720,6380,6381],{"class":722,"line":894},[720,6382,833],{"emptyLinePlaceholder":832},[720,6384,6385],{"class":722,"line":903},[720,6386,6387],{"class":726}," \u003C!-- Body: 3 cột -->\n",[720,6389,6390,6392,6394,6396,6398,6400,6403,6405],{"class":722,"line":908},[720,6391,865],{"class":733},[720,6393,738],{"class":737},[720,6395,742],{"class":741},[720,6397,745],{"class":733},[720,6399,748],{"class":733},[720,6401,6402],{"class":751},"flex flex-1",[720,6404,748],{"class":733},[720,6406,769],{"class":733},[720,6408,6409],{"class":722,"line":914},[720,6410,6411],{"class":726}," \u003C!-- Left nav -->\n",[720,6413,6414,6416,6418,6420,6422,6424,6427,6429],{"class":722,"line":934},[720,6415,956],{"class":733},[720,6417,1069],{"class":737},[720,6419,742],{"class":741},[720,6421,745],{"class":733},[720,6423,748],{"class":733},[720,6425,6426],{"class":751},"w-64 bg-gray-100 p-6 flex-shrink-0",[720,6428,748],{"class":733},[720,6430,769],{"class":733},[720,6432,6433,6435,6437,6439,6441,6443,6446,6448,6450,6453,6455,6457],{"class":722,"line":953},[720,6434,1447],{"class":733},[720,6436,706],{"class":737},[720,6438,742],{"class":741},[720,6440,745],{"class":733},[720,6442,748],{"class":733},[720,6444,6445],{"class":751},"font-bold mb-4",[720,6447,748],{"class":733},[720,6449,757],{"class":733},[720,6451,6452],{"class":760},"Navigation",[720,6454,764],{"class":733},[720,6456,706],{"class":737},[720,6458,769],{"class":733},[720,6460,6461,6463,6465,6467,6469,6471,6474,6476],{"class":722,"line":983},[720,6462,1447],{"class":733},[720,6464,3416],{"class":737},[720,6466,742],{"class":741},[720,6468,745],{"class":733},[720,6470,748],{"class":733},[720,6472,6473],{"class":751},"space-y-2",[720,6475,748],{"class":733},[720,6477,769],{"class":733},[720,6479,6480,6482,6484,6486,6489,6491,6493],{"class":722,"line":1011},[720,6481,1736],{"class":733},[720,6483,3437],{"class":737},[720,6485,757],{"class":733},[720,6487,6488],{"class":760},"Link 1",[720,6490,764],{"class":733},[720,6492,3437],{"class":737},[720,6494,769],{"class":733},[720,6496,6497,6499,6501,6503,6506,6508,6510],{"class":722,"line":1021},[720,6498,1736],{"class":733},[720,6500,3437],{"class":737},[720,6502,757],{"class":733},[720,6504,6505],{"class":760},"Link 2",[720,6507,764],{"class":733},[720,6509,3437],{"class":737},[720,6511,769],{"class":733},[720,6513,6514,6516,6518,6520,6523,6525,6527],{"class":722,"line":1367},[720,6515,1736],{"class":733},[720,6517,3437],{"class":737},[720,6519,757],{"class":733},[720,6521,6522],{"class":760},"Link 3",[720,6524,764],{"class":733},[720,6526,3437],{"class":737},[720,6528,769],{"class":733},[720,6530,6531,6533,6535],{"class":722,"line":1387},[720,6532,1849],{"class":733},[720,6534,3416],{"class":737},[720,6536,769],{"class":733},[720,6538,6539,6541,6543],{"class":722,"line":1444},[720,6540,1510],{"class":733},[720,6542,1069],{"class":737},[720,6544,769],{"class":733},[720,6546,6547],{"class":722,"line":1489},[720,6548,833],{"emptyLinePlaceholder":832},[720,6550,6551],{"class":722,"line":1507},[720,6552,6553],{"class":726}," \u003C!-- Main content — flex-1 chiếm hết chỗ còn lại -->\n",[720,6555,6556,6558,6560,6562,6564,6566,6569,6571],{"class":722,"line":1517},[720,6557,956],{"class":733},[720,6559,1885],{"class":737},[720,6561,742],{"class":741},[720,6563,745],{"class":733},[720,6565,748],{"class":733},[720,6567,6568],{"class":751},"flex-1 p-6 min-w-0",[720,6570,748],{"class":733},[720,6572,769],{"class":733},[720,6574,6575,6577,6579,6581,6583,6585,6588,6590,6592,6594,6596,6598],{"class":722,"line":1526},[720,6576,1447],{"class":733},[720,6578,427],{"class":737},[720,6580,742],{"class":741},[720,6582,745],{"class":733},[720,6584,748],{"class":733},[720,6586,6587],{"class":751},"text-2xl font-bold mb-4",[720,6589,748],{"class":733},[720,6591,757],{"class":733},[720,6593,2008],{"class":760},[720,6595,764],{"class":733},[720,6597,427],{"class":737},[720,6599,769],{"class":733},[720,6601,6602,6604,6606,6608,6610,6612,6615,6617,6619,6622,6624,6626],{"class":722,"line":2017},[720,6603,1447],{"class":733},[720,6605,431],{"class":737},[720,6607,742],{"class":741},[720,6609,745],{"class":733},[720,6611,748],{"class":733},[720,6613,6614],{"class":751},"text-gray-600",[720,6616,748],{"class":733},[720,6618,757],{"class":733},[720,6620,6621],{"class":760},"Nội dung chính ở đây. Cột này co giãn theo không gian còn lại.",[720,6623,764],{"class":733},[720,6625,431],{"class":737},[720,6627,769],{"class":733},[720,6629,6630,6632,6634],{"class":722,"line":2026},[720,6631,1510],{"class":733},[720,6633,1885],{"class":737},[720,6635,769],{"class":733},[720,6637,6638],{"class":722,"line":3468},[720,6639,833],{"emptyLinePlaceholder":832},[720,6641,6642],{"class":722,"line":3486},[720,6643,6644],{"class":726}," \u003C!-- Right aside -->\n",[720,6646,6647,6649,6651,6653,6655,6657,6660,6662],{"class":722,"line":3496},[720,6648,956],{"class":733},[720,6650,1633],{"class":737},[720,6652,742],{"class":741},[720,6654,745],{"class":733},[720,6656,748],{"class":733},[720,6658,6659],{"class":751},"w-72 bg-gray-50 p-6 flex-shrink-0",[720,6661,748],{"class":733},[720,6663,769],{"class":733},[720,6665,6666,6668,6670,6672,6674,6676,6678,6680,6682,6684,6686,6688],{"class":722,"line":3505},[720,6667,1447],{"class":733},[720,6669,706],{"class":737},[720,6671,742],{"class":741},[720,6673,745],{"class":733},[720,6675,748],{"class":733},[720,6677,6445],{"class":751},[720,6679,748],{"class":733},[720,6681,757],{"class":733},[720,6683,1706],{"class":760},[720,6685,764],{"class":733},[720,6687,706],{"class":737},[720,6689,769],{"class":733},[720,6691,6692,6694,6696,6698,6700,6702,6705,6707,6709,6712,6714,6716],{"class":722,"line":3525},[720,6693,1447],{"class":733},[720,6695,431],{"class":737},[720,6697,742],{"class":741},[720,6699,745],{"class":733},[720,6701,748],{"class":733},[720,6703,6704],{"class":751},"text-sm text-gray-600",[720,6706,748],{"class":733},[720,6708,757],{"class":733},[720,6710,6711],{"class":760},"Thông tin phụ.",[720,6713,764],{"class":733},[720,6715,431],{"class":737},[720,6717,769],{"class":733},[720,6719,6720,6722,6724],{"class":722,"line":3553},[720,6721,1510],{"class":733},[720,6723,1633],{"class":737},[720,6725,769],{"class":733},[720,6727,6728,6730,6732],{"class":722,"line":3573},[720,6729,1014],{"class":733},[720,6731,738],{"class":737},[720,6733,769],{"class":733},[720,6735,6736],{"class":722,"line":3591},[720,6737,833],{"emptyLinePlaceholder":832},[720,6739,6740],{"class":722,"line":3609},[720,6741,6742],{"class":726}," \u003C!-- Footer -->\n",[720,6744,6745,6747,6750,6752,6754,6756,6759,6761],{"class":722,"line":3618},[720,6746,865],{"class":733},[720,6748,6749],{"class":737},"footer",[720,6751,742],{"class":741},[720,6753,745],{"class":733},[720,6755,748],{"class":733},[720,6757,6758],{"class":751},"bg-gray-900 text-gray-400 px-6 py-4 text-center text-sm",[720,6760,748],{"class":733},[720,6762,769],{"class":733},[720,6764,6765],{"class":722,"line":3627},[720,6766,6767],{"class":760}," © 2026 Holy Grail Layout. Built with Tailwind CSS v4.\n",[720,6769,6770,6772,6774],{"class":722,"line":3636},[720,6771,1014],{"class":733},[720,6773,6749],{"class":737},[720,6775,769],{"class":733},[720,6777,6778,6780,6782],{"class":722,"line":3645},[720,6779,764],{"class":733},[720,6781,738],{"class":737},[720,6783,769],{"class":733},[435,6785,441,6786,6789,6790,6793,6794,6796,6797,6799,6800,6803,6804,6807],{"color":437,"icon":438},[443,6787,6788],{},"Công thức flex Holy Grail:"," Cha ",[458,6791,6792],{},"flex flex-col min-h-screen",", thân ",[458,6795,6402],{},", main content ",[458,6798,4487],{},", side columns ",[458,6801,6802],{},"w-{value} flex-shrink-0",". ",[458,6805,6806],{},"min-w-0"," trên main để tránh overflow.",[706,6809,6811,6812],{"id":6810},"bài-tập-9-responsive-card-grid-với-flex-wrap","Bài tập 9: Responsive card grid với ",[458,6813,5582],{},[431,6815,6816,6818],{},[443,6817,1056],{}," Grid card dùng flexbox. Card tự xuống dòng khi không đủ chỗ. Mỗi card có min-width, không bóp nhỏ quá.",[711,6820,6822],{"className":713,"code":6821,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"flex flex-wrap gap-6 p-6\">\n \u003C!-- Card 1 -->\n \u003Cdiv class=\"flex-1 min-w-[280px] max-w-sm bg-white rounded-xl shadow-md overflow-hidden\">\n \u003Cdiv class=\"h-40 bg-gradient-to-br from-emerald-400 to-teal-500\">\u003C\u002Fdiv>\n \u003Cdiv class=\"p-4\">\n \u003Ch3 class=\"font-bold\">Card 1\u003C\u002Fh3>\n \u003Cp class=\"text-gray-600 text-sm\">Flex item với min-width 280px.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Card 2 -->\n \u003Cdiv class=\"flex-1 min-w-[280px] max-w-sm bg-white rounded-xl shadow-md overflow-hidden\">\n \u003Cdiv class=\"h-40 bg-gradient-to-br from-rose-400 to-pink-500\">\u003C\u002Fdiv>\n \u003Cdiv class=\"p-4\">\n \u003Ch3 class=\"font-bold\">Card 2\u003C\u002Fh3>\n \u003Cp class=\"text-gray-600 text-sm\">Tự wrap khi không đủ chỗ.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Card 3 -->\n \u003Cdiv class=\"flex-1 min-w-[280px] max-w-sm bg-white rounded-xl shadow-md overflow-hidden\">\n \u003Cdiv class=\"h-40 bg-gradient-to-br from-cyan-400 to-blue-500\">\u003C\u002Fdiv>\n \u003Cdiv class=\"p-4\">\n \u003Ch3 class=\"font-bold\">Card 3\u003C\u002Fh3>\n \u003Cp class=\"text-gray-600 text-sm\">Không cần media query.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Card 4 -->\n \u003Cdiv class=\"flex-1 min-w-[280px] max-w-sm bg-white rounded-xl shadow-md overflow-hidden\">\n \u003Cdiv class=\"h-40 bg-gradient-to-br from-violet-400 to-purple-500\">\u003C\u002Fdiv>\n \u003Cdiv class=\"p-4\">\n \u003Ch3 class=\"font-bold\">Card 4\u003C\u002Fh3>\n \u003Cp class=\"text-gray-600 text-sm\">Tự động responsive.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Card 5 -->\n \u003Cdiv class=\"flex-1 min-w-[280px] max-w-sm bg-white rounded-xl shadow-md overflow-hidden\">\n \u003Cdiv class=\"h-40 bg-gradient-to-br from-amber-400 to-orange-500\">\u003C\u002Fdiv>\n \u003Cdiv class=\"p-4\">\n \u003Ch3 class=\"font-bold\">Card 5\u003C\u002Fh3>\n \u003Cp class=\"text-gray-600 text-sm\">Flex-wrap + min-width = grid không cần breakpoint.\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,6823,6824,6843,6848,6867,6890,6908,6935,6962,6970,6978,6982,6987,7005,7028,7046,7073,7100,7108,7116,7120,7125,7143,7166,7184,7211,7238,7246,7254,7258,7263,7281,7304,7322,7349,7376,7384,7392,7396,7401,7419,7442,7460,7487,7514,7522,7530],{"__ignoreMap":716},[720,6825,6826,6828,6830,6832,6834,6836,6839,6841],{"class":722,"line":723},[720,6827,734],{"class":733},[720,6829,738],{"class":737},[720,6831,742],{"class":741},[720,6833,745],{"class":733},[720,6835,748],{"class":733},[720,6837,6838],{"class":751},"flex flex-wrap gap-6 p-6",[720,6840,748],{"class":733},[720,6842,769],{"class":733},[720,6844,6845],{"class":722,"line":730},[720,6846,6847],{"class":726}," \u003C!-- Card 1 -->\n",[720,6849,6850,6852,6854,6856,6858,6860,6863,6865],{"class":722,"line":772},[720,6851,865],{"class":733},[720,6853,738],{"class":737},[720,6855,742],{"class":741},[720,6857,745],{"class":733},[720,6859,748],{"class":733},[720,6861,6862],{"class":751},"flex-1 min-w-[280px] max-w-sm bg-white rounded-xl shadow-md overflow-hidden",[720,6864,748],{"class":733},[720,6866,769],{"class":733},[720,6868,6869,6871,6873,6875,6877,6879,6882,6884,6886,6888],{"class":722,"line":801},[720,6870,956],{"class":733},[720,6872,738],{"class":737},[720,6874,742],{"class":741},[720,6876,745],{"class":733},[720,6878,748],{"class":733},[720,6880,6881],{"class":751},"h-40 bg-gradient-to-br from-emerald-400 to-teal-500",[720,6883,748],{"class":733},[720,6885,881],{"class":733},[720,6887,738],{"class":737},[720,6889,769],{"class":733},[720,6891,6892,6894,6896,6898,6900,6902,6904,6906],{"class":722,"line":829},[720,6893,956],{"class":733},[720,6895,738],{"class":737},[720,6897,742],{"class":741},[720,6899,745],{"class":733},[720,6901,748],{"class":733},[720,6903,3806],{"class":751},[720,6905,748],{"class":733},[720,6907,769],{"class":733},[720,6909,6910,6912,6914,6916,6918,6920,6922,6924,6926,6929,6931,6933],{"class":722,"line":836},[720,6911,1447],{"class":733},[720,6913,706],{"class":737},[720,6915,742],{"class":741},[720,6917,745],{"class":733},[720,6919,748],{"class":733},[720,6921,3825],{"class":751},[720,6923,748],{"class":733},[720,6925,757],{"class":733},[720,6927,6928],{"class":760},"Card 1",[720,6930,764],{"class":733},[720,6932,706],{"class":737},[720,6934,769],{"class":733},[720,6936,6937,6939,6941,6943,6945,6947,6949,6951,6953,6956,6958,6960],{"class":722,"line":842},[720,6938,1447],{"class":733},[720,6940,431],{"class":737},[720,6942,742],{"class":741},[720,6944,745],{"class":733},[720,6946,748],{"class":733},[720,6948,3853],{"class":751},[720,6950,748],{"class":733},[720,6952,757],{"class":733},[720,6954,6955],{"class":760},"Flex item với min-width 280px.",[720,6957,764],{"class":733},[720,6959,431],{"class":737},[720,6961,769],{"class":733},[720,6963,6964,6966,6968],{"class":722,"line":862},[720,6965,1510],{"class":733},[720,6967,738],{"class":737},[720,6969,769],{"class":733},[720,6971,6972,6974,6976],{"class":722,"line":888},[720,6973,1014],{"class":733},[720,6975,738],{"class":737},[720,6977,769],{"class":733},[720,6979,6980],{"class":722,"line":894},[720,6981,833],{"emptyLinePlaceholder":832},[720,6983,6984],{"class":722,"line":903},[720,6985,6986],{"class":726}," \u003C!-- Card 2 -->\n",[720,6988,6989,6991,6993,6995,6997,6999,7001,7003],{"class":722,"line":908},[720,6990,865],{"class":733},[720,6992,738],{"class":737},[720,6994,742],{"class":741},[720,6996,745],{"class":733},[720,6998,748],{"class":733},[720,7000,6862],{"class":751},[720,7002,748],{"class":733},[720,7004,769],{"class":733},[720,7006,7007,7009,7011,7013,7015,7017,7020,7022,7024,7026],{"class":722,"line":914},[720,7008,956],{"class":733},[720,7010,738],{"class":737},[720,7012,742],{"class":741},[720,7014,745],{"class":733},[720,7016,748],{"class":733},[720,7018,7019],{"class":751},"h-40 bg-gradient-to-br from-rose-400 to-pink-500",[720,7021,748],{"class":733},[720,7023,881],{"class":733},[720,7025,738],{"class":737},[720,7027,769],{"class":733},[720,7029,7030,7032,7034,7036,7038,7040,7042,7044],{"class":722,"line":934},[720,7031,956],{"class":733},[720,7033,738],{"class":737},[720,7035,742],{"class":741},[720,7037,745],{"class":733},[720,7039,748],{"class":733},[720,7041,3806],{"class":751},[720,7043,748],{"class":733},[720,7045,769],{"class":733},[720,7047,7048,7050,7052,7054,7056,7058,7060,7062,7064,7067,7069,7071],{"class":722,"line":953},[720,7049,1447],{"class":733},[720,7051,706],{"class":737},[720,7053,742],{"class":741},[720,7055,745],{"class":733},[720,7057,748],{"class":733},[720,7059,3825],{"class":751},[720,7061,748],{"class":733},[720,7063,757],{"class":733},[720,7065,7066],{"class":760},"Card 2",[720,7068,764],{"class":733},[720,7070,706],{"class":737},[720,7072,769],{"class":733},[720,7074,7075,7077,7079,7081,7083,7085,7087,7089,7091,7094,7096,7098],{"class":722,"line":983},[720,7076,1447],{"class":733},[720,7078,431],{"class":737},[720,7080,742],{"class":741},[720,7082,745],{"class":733},[720,7084,748],{"class":733},[720,7086,3853],{"class":751},[720,7088,748],{"class":733},[720,7090,757],{"class":733},[720,7092,7093],{"class":760},"Tự wrap khi không đủ chỗ.",[720,7095,764],{"class":733},[720,7097,431],{"class":737},[720,7099,769],{"class":733},[720,7101,7102,7104,7106],{"class":722,"line":1011},[720,7103,1510],{"class":733},[720,7105,738],{"class":737},[720,7107,769],{"class":733},[720,7109,7110,7112,7114],{"class":722,"line":1021},[720,7111,1014],{"class":733},[720,7113,738],{"class":737},[720,7115,769],{"class":733},[720,7117,7118],{"class":722,"line":1367},[720,7119,833],{"emptyLinePlaceholder":832},[720,7121,7122],{"class":722,"line":1387},[720,7123,7124],{"class":726}," \u003C!-- Card 3 -->\n",[720,7126,7127,7129,7131,7133,7135,7137,7139,7141],{"class":722,"line":1444},[720,7128,865],{"class":733},[720,7130,738],{"class":737},[720,7132,742],{"class":741},[720,7134,745],{"class":733},[720,7136,748],{"class":733},[720,7138,6862],{"class":751},[720,7140,748],{"class":733},[720,7142,769],{"class":733},[720,7144,7145,7147,7149,7151,7153,7155,7158,7160,7162,7164],{"class":722,"line":1489},[720,7146,956],{"class":733},[720,7148,738],{"class":737},[720,7150,742],{"class":741},[720,7152,745],{"class":733},[720,7154,748],{"class":733},[720,7156,7157],{"class":751},"h-40 bg-gradient-to-br from-cyan-400 to-blue-500",[720,7159,748],{"class":733},[720,7161,881],{"class":733},[720,7163,738],{"class":737},[720,7165,769],{"class":733},[720,7167,7168,7170,7172,7174,7176,7178,7180,7182],{"class":722,"line":1507},[720,7169,956],{"class":733},[720,7171,738],{"class":737},[720,7173,742],{"class":741},[720,7175,745],{"class":733},[720,7177,748],{"class":733},[720,7179,3806],{"class":751},[720,7181,748],{"class":733},[720,7183,769],{"class":733},[720,7185,7186,7188,7190,7192,7194,7196,7198,7200,7202,7205,7207,7209],{"class":722,"line":1517},[720,7187,1447],{"class":733},[720,7189,706],{"class":737},[720,7191,742],{"class":741},[720,7193,745],{"class":733},[720,7195,748],{"class":733},[720,7197,3825],{"class":751},[720,7199,748],{"class":733},[720,7201,757],{"class":733},[720,7203,7204],{"class":760},"Card 3",[720,7206,764],{"class":733},[720,7208,706],{"class":737},[720,7210,769],{"class":733},[720,7212,7213,7215,7217,7219,7221,7223,7225,7227,7229,7232,7234,7236],{"class":722,"line":1526},[720,7214,1447],{"class":733},[720,7216,431],{"class":737},[720,7218,742],{"class":741},[720,7220,745],{"class":733},[720,7222,748],{"class":733},[720,7224,3853],{"class":751},[720,7226,748],{"class":733},[720,7228,757],{"class":733},[720,7230,7231],{"class":760},"Không cần media query.",[720,7233,764],{"class":733},[720,7235,431],{"class":737},[720,7237,769],{"class":733},[720,7239,7240,7242,7244],{"class":722,"line":2017},[720,7241,1510],{"class":733},[720,7243,738],{"class":737},[720,7245,769],{"class":733},[720,7247,7248,7250,7252],{"class":722,"line":2026},[720,7249,1014],{"class":733},[720,7251,738],{"class":737},[720,7253,769],{"class":733},[720,7255,7256],{"class":722,"line":3468},[720,7257,833],{"emptyLinePlaceholder":832},[720,7259,7260],{"class":722,"line":3486},[720,7261,7262],{"class":726}," \u003C!-- Card 4 -->\n",[720,7264,7265,7267,7269,7271,7273,7275,7277,7279],{"class":722,"line":3496},[720,7266,865],{"class":733},[720,7268,738],{"class":737},[720,7270,742],{"class":741},[720,7272,745],{"class":733},[720,7274,748],{"class":733},[720,7276,6862],{"class":751},[720,7278,748],{"class":733},[720,7280,769],{"class":733},[720,7282,7283,7285,7287,7289,7291,7293,7296,7298,7300,7302],{"class":722,"line":3505},[720,7284,956],{"class":733},[720,7286,738],{"class":737},[720,7288,742],{"class":741},[720,7290,745],{"class":733},[720,7292,748],{"class":733},[720,7294,7295],{"class":751},"h-40 bg-gradient-to-br from-violet-400 to-purple-500",[720,7297,748],{"class":733},[720,7299,881],{"class":733},[720,7301,738],{"class":737},[720,7303,769],{"class":733},[720,7305,7306,7308,7310,7312,7314,7316,7318,7320],{"class":722,"line":3525},[720,7307,956],{"class":733},[720,7309,738],{"class":737},[720,7311,742],{"class":741},[720,7313,745],{"class":733},[720,7315,748],{"class":733},[720,7317,3806],{"class":751},[720,7319,748],{"class":733},[720,7321,769],{"class":733},[720,7323,7324,7326,7328,7330,7332,7334,7336,7338,7340,7343,7345,7347],{"class":722,"line":3553},[720,7325,1447],{"class":733},[720,7327,706],{"class":737},[720,7329,742],{"class":741},[720,7331,745],{"class":733},[720,7333,748],{"class":733},[720,7335,3825],{"class":751},[720,7337,748],{"class":733},[720,7339,757],{"class":733},[720,7341,7342],{"class":760},"Card 4",[720,7344,764],{"class":733},[720,7346,706],{"class":737},[720,7348,769],{"class":733},[720,7350,7351,7353,7355,7357,7359,7361,7363,7365,7367,7370,7372,7374],{"class":722,"line":3573},[720,7352,1447],{"class":733},[720,7354,431],{"class":737},[720,7356,742],{"class":741},[720,7358,745],{"class":733},[720,7360,748],{"class":733},[720,7362,3853],{"class":751},[720,7364,748],{"class":733},[720,7366,757],{"class":733},[720,7368,7369],{"class":760},"Tự động responsive.",[720,7371,764],{"class":733},[720,7373,431],{"class":737},[720,7375,769],{"class":733},[720,7377,7378,7380,7382],{"class":722,"line":3591},[720,7379,1510],{"class":733},[720,7381,738],{"class":737},[720,7383,769],{"class":733},[720,7385,7386,7388,7390],{"class":722,"line":3609},[720,7387,1014],{"class":733},[720,7389,738],{"class":737},[720,7391,769],{"class":733},[720,7393,7394],{"class":722,"line":3618},[720,7395,833],{"emptyLinePlaceholder":832},[720,7397,7398],{"class":722,"line":3627},[720,7399,7400],{"class":726}," \u003C!-- Card 5 -->\n",[720,7402,7403,7405,7407,7409,7411,7413,7415,7417],{"class":722,"line":3636},[720,7404,865],{"class":733},[720,7406,738],{"class":737},[720,7408,742],{"class":741},[720,7410,745],{"class":733},[720,7412,748],{"class":733},[720,7414,6862],{"class":751},[720,7416,748],{"class":733},[720,7418,769],{"class":733},[720,7420,7421,7423,7425,7427,7429,7431,7434,7436,7438,7440],{"class":722,"line":3645},[720,7422,956],{"class":733},[720,7424,738],{"class":737},[720,7426,742],{"class":741},[720,7428,745],{"class":733},[720,7430,748],{"class":733},[720,7432,7433],{"class":751},"h-40 bg-gradient-to-br from-amber-400 to-orange-500",[720,7435,748],{"class":733},[720,7437,881],{"class":733},[720,7439,738],{"class":737},[720,7441,769],{"class":733},[720,7443,7444,7446,7448,7450,7452,7454,7456,7458],{"class":722,"line":3654},[720,7445,956],{"class":733},[720,7447,738],{"class":737},[720,7449,742],{"class":741},[720,7451,745],{"class":733},[720,7453,748],{"class":733},[720,7455,3806],{"class":751},[720,7457,748],{"class":733},[720,7459,769],{"class":733},[720,7461,7462,7464,7466,7468,7470,7472,7474,7476,7478,7481,7483,7485],{"class":722,"line":5038},[720,7463,1447],{"class":733},[720,7465,706],{"class":737},[720,7467,742],{"class":741},[720,7469,745],{"class":733},[720,7471,748],{"class":733},[720,7473,3825],{"class":751},[720,7475,748],{"class":733},[720,7477,757],{"class":733},[720,7479,7480],{"class":760},"Card 5",[720,7482,764],{"class":733},[720,7484,706],{"class":737},[720,7486,769],{"class":733},[720,7488,7489,7491,7493,7495,7497,7499,7501,7503,7505,7508,7510,7512],{"class":722,"line":5053},[720,7490,1447],{"class":733},[720,7492,431],{"class":737},[720,7494,742],{"class":741},[720,7496,745],{"class":733},[720,7498,748],{"class":733},[720,7500,3853],{"class":751},[720,7502,748],{"class":733},[720,7504,757],{"class":733},[720,7506,7507],{"class":760},"Flex-wrap + min-width = grid không cần breakpoint.",[720,7509,764],{"class":733},[720,7511,431],{"class":737},[720,7513,769],{"class":733},[720,7515,7516,7518,7520],{"class":722,"line":5058},[720,7517,1510],{"class":733},[720,7519,738],{"class":737},[720,7521,769],{"class":733},[720,7523,7524,7526,7528],{"class":722,"line":5067},[720,7525,1014],{"class":733},[720,7527,738],{"class":737},[720,7529,769],{"class":733},[720,7531,7532,7534,7536],{"class":722,"line":5072},[720,7533,764],{"class":733},[720,7535,738],{"class":737},[720,7537,769],{"class":733},[435,7539,7540,446,7543,7546],{"color":1030,"icon":1031},[443,7541,7542],{},"Pattern này gọi là \"flex-wrap grid\":",[458,7544,7545],{},"flex-1 min-w-[280px]"," — không cần media query, card tự động responsive. Mỗi card rộng ít nhất 280px, co giãn, tự xuống dòng.",[706,7548,7550,7551],{"id":7549},"bài-tập-10-navigation-với-logo-trái-links-phải-dùng-justify-between","Bài tập 10: Navigation với logo trái, links phải, dùng ",[458,7552,5696],{},[431,7554,7555,7557],{},[443,7556,1056],{}," Navbar: logo bên trái, nhóm link bên phải, căn đều 2 đầu.",[711,7559,7561],{"className":713,"code":7560,"language":715,"meta":716,"style":716},"\u003Cnav class=\"flex items-center justify-between px-8 py-4 bg-white border-b\">\n \u003C!-- Logo area — bên trái -->\n \u003Cdiv class=\"flex items-center gap-3\">\n \u003Cdiv class=\"w-8 h-8 bg-blue-600 rounded-lg\">\u003C\u002Fdiv>\n \u003Cspan class=\"font-bold text-lg\">Company\u003C\u002Fspan>\n \u003C\u002Fdiv>\n\n \u003C!-- Links — bên phải, grouped -->\n \u003Cdiv class=\"flex items-center gap-6\">\n \u003Ca href=\"#\" class=\"text-gray-600 hover:text-gray-900 text-sm font-medium\">Products\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"text-gray-600 hover:text-gray-900 text-sm font-medium\">Pricing\u003C\u002Fa>\n \u003Ca href=\"#\" class=\"text-gray-600 hover:text-gray-900 text-sm font-medium\">Docs\u003C\u002Fa>\n \u003Cbutton class=\"bg-gray-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-800\">\n Sign In\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Fnav>\n",[458,7562,7563,7582,7587,7606,7629,7657,7665,7669,7674,7693,7731,7767,7804,7823,7828,7836,7844],{"__ignoreMap":716},[720,7564,7565,7567,7569,7571,7573,7575,7578,7580],{"class":722,"line":723},[720,7566,734],{"class":733},[720,7568,1069],{"class":737},[720,7570,742],{"class":741},[720,7572,745],{"class":733},[720,7574,748],{"class":733},[720,7576,7577],{"class":751},"flex items-center justify-between px-8 py-4 bg-white border-b",[720,7579,748],{"class":733},[720,7581,769],{"class":733},[720,7583,7584],{"class":722,"line":730},[720,7585,7586],{"class":726}," \u003C!-- Logo area — bên trái -->\n",[720,7588,7589,7591,7593,7595,7597,7599,7602,7604],{"class":722,"line":772},[720,7590,865],{"class":733},[720,7592,738],{"class":737},[720,7594,742],{"class":741},[720,7596,745],{"class":733},[720,7598,748],{"class":733},[720,7600,7601],{"class":751},"flex items-center gap-3",[720,7603,748],{"class":733},[720,7605,769],{"class":733},[720,7607,7608,7610,7612,7614,7616,7618,7621,7623,7625,7627],{"class":722,"line":801},[720,7609,956],{"class":733},[720,7611,738],{"class":737},[720,7613,742],{"class":741},[720,7615,745],{"class":733},[720,7617,748],{"class":733},[720,7619,7620],{"class":751},"w-8 h-8 bg-blue-600 rounded-lg",[720,7622,748],{"class":733},[720,7624,881],{"class":733},[720,7626,738],{"class":737},[720,7628,769],{"class":733},[720,7630,7631,7633,7635,7637,7639,7641,7644,7646,7648,7651,7653,7655],{"class":722,"line":829},[720,7632,956],{"class":733},[720,7634,720],{"class":737},[720,7636,742],{"class":741},[720,7638,745],{"class":733},[720,7640,748],{"class":733},[720,7642,7643],{"class":751},"font-bold text-lg",[720,7645,748],{"class":733},[720,7647,757],{"class":733},[720,7649,7650],{"class":760},"Company",[720,7652,764],{"class":733},[720,7654,720],{"class":737},[720,7656,769],{"class":733},[720,7658,7659,7661,7663],{"class":722,"line":836},[720,7660,1014],{"class":733},[720,7662,738],{"class":737},[720,7664,769],{"class":733},[720,7666,7667],{"class":722,"line":842},[720,7668,833],{"emptyLinePlaceholder":832},[720,7670,7671],{"class":722,"line":862},[720,7672,7673],{"class":726}," \u003C!-- Links — bên phải, grouped -->\n",[720,7675,7676,7678,7680,7682,7684,7686,7689,7691],{"class":722,"line":888},[720,7677,865],{"class":733},[720,7679,738],{"class":737},[720,7681,742],{"class":741},[720,7683,745],{"class":733},[720,7685,748],{"class":733},[720,7687,7688],{"class":751},"flex items-center gap-6",[720,7690,748],{"class":733},[720,7692,769],{"class":733},[720,7694,7695,7697,7699,7701,7703,7705,7707,7709,7711,7713,7715,7718,7720,7722,7725,7727,7729],{"class":722,"line":894},[720,7696,956],{"class":733},[720,7698,1094],{"class":737},[720,7700,1097],{"class":741},[720,7702,745],{"class":733},[720,7704,748],{"class":733},[720,7706,1104],{"class":751},[720,7708,748],{"class":733},[720,7710,742],{"class":741},[720,7712,745],{"class":733},[720,7714,748],{"class":733},[720,7716,7717],{"class":751},"text-gray-600 hover:text-gray-900 text-sm font-medium",[720,7719,748],{"class":733},[720,7721,757],{"class":733},[720,7723,7724],{"class":760},"Products",[720,7726,764],{"class":733},[720,7728,1094],{"class":737},[720,7730,769],{"class":733},[720,7732,7733,7735,7737,7739,7741,7743,7745,7747,7749,7751,7753,7755,7757,7759,7761,7763,7765],{"class":722,"line":903},[720,7734,956],{"class":733},[720,7736,1094],{"class":737},[720,7738,1097],{"class":741},[720,7740,745],{"class":733},[720,7742,748],{"class":733},[720,7744,1104],{"class":751},[720,7746,748],{"class":733},[720,7748,742],{"class":741},[720,7750,745],{"class":733},[720,7752,748],{"class":733},[720,7754,7717],{"class":751},[720,7756,748],{"class":733},[720,7758,757],{"class":733},[720,7760,1262],{"class":760},[720,7762,764],{"class":733},[720,7764,1094],{"class":737},[720,7766,769],{"class":733},[720,7768,7769,7771,7773,7775,7777,7779,7781,7783,7785,7787,7789,7791,7793,7795,7798,7800,7802],{"class":722,"line":908},[720,7770,956],{"class":733},[720,7772,1094],{"class":737},[720,7774,1097],{"class":741},[720,7776,745],{"class":733},[720,7778,748],{"class":733},[720,7780,1104],{"class":751},[720,7782,748],{"class":733},[720,7784,742],{"class":741},[720,7786,745],{"class":733},[720,7788,748],{"class":733},[720,7790,7717],{"class":751},[720,7792,748],{"class":733},[720,7794,757],{"class":733},[720,7796,7797],{"class":760},"Docs",[720,7799,764],{"class":733},[720,7801,1094],{"class":737},[720,7803,769],{"class":733},[720,7805,7806,7808,7810,7812,7814,7816,7819,7821],{"class":722,"line":914},[720,7807,956],{"class":733},[720,7809,1329],{"class":737},[720,7811,742],{"class":741},[720,7813,745],{"class":733},[720,7815,748],{"class":733},[720,7817,7818],{"class":751},"bg-gray-900 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-800",[720,7820,748],{"class":733},[720,7822,769],{"class":733},[720,7824,7825],{"class":722,"line":934},[720,7826,7827],{"class":760}," Sign In\n",[720,7829,7830,7832,7834],{"class":722,"line":953},[720,7831,1510],{"class":733},[720,7833,1329],{"class":737},[720,7835,769],{"class":733},[720,7837,7838,7840,7842],{"class":722,"line":983},[720,7839,1014],{"class":733},[720,7841,738],{"class":737},[720,7843,769],{"class":733},[720,7845,7846,7848,7850],{"class":722,"line":1011},[720,7847,764],{"class":733},[720,7849,1069],{"class":737},[720,7851,769],{"class":733},[435,7853,441,7854,446,7857,7860],{"color":437,"icon":438},[443,7855,7856],{},"Pattern cực phổ biến:",[458,7858,7859],{},"flex items-center justify-between"," — logo trái, nav phải. Đây là navbar pattern bạn sẽ viết hàng trăm lần.",[488,7862],{},[427,7864,7866],{"id":7865},"_5-grid","5. Grid",[706,7868,7870],{"id":7869},"grid-container","Grid container",[502,7872,7873,7881],{},[505,7874,7875],{},[508,7876,7877,7879],{},[511,7878,513],{},[511,7880,516],{},[521,7882,7883,7895,7908,7921,7945,7966],{},[508,7884,7885,7891],{},[526,7886,7887,5531,7889],{},[458,7888,613],{},[458,7890,599],{},[526,7892,7893],{},[458,7894,618],{},[508,7896,7897,7903],{},[526,7898,7899,7902],{},[458,7900,7901],{},"grid-cols-*"," (1..12, none, subgrid)",[526,7904,7905],{},[458,7906,7907],{},"grid-template-columns",[508,7909,7910,7916],{},[526,7911,7912,7915],{},[458,7913,7914],{},"grid-rows-*"," (1..6, none, subgrid)",[526,7917,7918],{},[458,7919,7920],{},"grid-template-rows",[508,7922,7923,7940],{},[526,7924,7925,5531,7928,5531,7931,5531,7934,5531,7937],{},[458,7926,7927],{},"grid-flow-row",[458,7929,7930],{},"grid-flow-col",[458,7932,7933],{},"grid-flow-dense",[458,7935,7936],{},"grid-flow-row-dense",[458,7938,7939],{},"grid-flow-col-dense",[526,7941,7942],{},[458,7943,7944],{},"grid-auto-flow",[508,7946,7947,7961],{},[526,7948,7949,5531,7952,5531,7955,5531,7958],{},[458,7950,7951],{},"auto-cols-auto",[458,7953,7954],{},"auto-cols-min",[458,7956,7957],{},"auto-cols-max",[458,7959,7960],{},"auto-cols-fr",[526,7962,7963],{},[458,7964,7965],{},"grid-auto-columns",[508,7967,7968,7982],{},[526,7969,7970,5531,7973,5531,7976,5531,7979],{},[458,7971,7972],{},"auto-rows-auto",[458,7974,7975],{},"auto-rows-min",[458,7977,7978],{},"auto-rows-max",[458,7980,7981],{},"auto-rows-fr",[526,7983,7984],{},[458,7985,7986],{},"grid-auto-rows",[706,7988,7990],{"id":7989},"grid-item-span","Grid item (span)",[502,7992,7993,8001],{},[505,7994,7995],{},[508,7996,7997,7999],{},[511,7998,513],{},[511,8000,516],{},[521,8002,8003,8016,8035,8048],{},[508,8004,8005,8011],{},[526,8006,8007,8010],{},[458,8008,8009],{},"col-span-*"," (1..12, full)",[526,8012,8013],{},[458,8014,8015],{},"grid-column: span N",[508,8017,8018,8027],{},[526,8019,8020,5531,8023,8026],{},[458,8021,8022],{},"col-start-*",[458,8024,8025],{},"col-end-*"," (1..13, auto)",[526,8028,8029,5531,8032],{},[458,8030,8031],{},"grid-column-start",[458,8033,8034],{},"end",[508,8036,8037,8043],{},[526,8038,8039,8042],{},[458,8040,8041],{},"row-span-*"," (1..6, full)",[526,8044,8045],{},[458,8046,8047],{},"grid-row: span N",[508,8049,8050,8059],{},[526,8051,8052,5531,8055,8058],{},[458,8053,8054],{},"row-start-*",[458,8056,8057],{},"row-end-*"," (1..7, auto)",[526,8060,8061,5531,8064],{},[458,8062,8063],{},"grid-row-start",[458,8065,8034],{},[706,8067,8069],{"id":8068},"grid-alignment","Grid alignment",[502,8071,8072,8080],{},[505,8073,8074],{},[508,8075,8076,8078],{},[511,8077,513],{},[511,8079,516],{},[521,8081,8082,8101,8121,8136,8149],{},[508,8083,8084,8097],{},[526,8085,8086,5531,8089,5531,8091,5531,8094],{},[458,8087,8088],{},"justify-items-start",[458,8090,8034],{},[458,8092,8093],{},"center",[458,8095,8096],{},"stretch",[526,8098,8099],{},[458,8100,5722],{},[508,8102,8103,8117],{},[526,8104,8105,5531,8108,5531,8111,5531,8113,5531,8115],{},[458,8106,8107],{},"justify-self-auto",[458,8109,8110],{},"start",[458,8112,8034],{},[458,8114,8093],{},[458,8116,8096],{},[526,8118,8119],{},[458,8120,5734],{},[508,8122,8123,8128],{},[526,8124,8125],{},[458,8126,8127],{},"place-content-*",[526,8129,8130,8131,8133,8134],{},"shorthand ",[458,8132,5770],{}," + ",[458,8135,5710],{},[508,8137,8138,8143],{},[526,8139,8140],{},[458,8141,8142],{},"place-items-*",[526,8144,8130,8145,8133,8147],{},[458,8146,5794],{},[458,8148,5722],{},[508,8150,8151,8156],{},[526,8152,8153],{},[458,8154,8155],{},"place-self-*",[526,8157,8130,8158,8133,8160],{},[458,8159,5821],{},[458,8161,5734],{},[706,8163,709],{"id":8164},"ví-dụ-cơ-bản-1",[711,8166,8168],{"className":713,"code":8167,"language":715,"meta":716,"style":716},"\u003C!-- Grid 3 cột đều -->\n\u003Cdiv class=\"grid grid-cols-3 gap-4\">\n \u003Cdiv class=\"bg-blue-200 p-4\">1\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-blue-200 p-4\">2\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-blue-200 p-4\">3\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- Span columns -->\n\u003Cdiv class=\"grid grid-cols-4 gap-4\">\n \u003Cdiv class=\"col-span-2 bg-green-200 p-4\">Span 2\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-green-200 p-4\">1\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-green-200 p-4\">1\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- Grid flow dense — fill holes -->\n\u003Cdiv class=\"grid grid-cols-3 grid-flow-dense gap-4\">\n \u003Cdiv class=\"col-span-2 bg-purple-200 p-4\">Span 2\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-purple-200 p-4\">3\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-purple-200 p-4\">4\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-purple-200 p-4\">5\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003C!-- Subgrid (dùng với cha grid) -->\n\u003Cdiv class=\"grid grid-cols-3 gap-4\">\n \u003Cdiv class=\"grid grid-cols-subgrid col-span-3 gap-4\">\n \u003Cdiv class=\"bg-yellow-200 p-4\">Sub 1\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-yellow-200 p-4\">Sub 2\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-yellow-200 p-4\">Sub 3\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,8169,8170,8175,8194,8222,8248,8275,8283,8287,8292,8311,8339,8366,8392,8400,8404,8409,8428,8455,8482,8509,8536,8544,8548,8553,8571,8590,8618,8645,8672,8680],{"__ignoreMap":716},[720,8171,8172],{"class":722,"line":723},[720,8173,8174],{"class":726},"\u003C!-- Grid 3 cột đều -->\n",[720,8176,8177,8179,8181,8183,8185,8187,8190,8192],{"class":722,"line":730},[720,8178,734],{"class":733},[720,8180,738],{"class":737},[720,8182,742],{"class":741},[720,8184,745],{"class":733},[720,8186,748],{"class":733},[720,8188,8189],{"class":751},"grid grid-cols-3 gap-4",[720,8191,748],{"class":733},[720,8193,769],{"class":733},[720,8195,8196,8198,8200,8202,8204,8206,8209,8211,8213,8216,8218,8220],{"class":722,"line":772},[720,8197,865],{"class":733},[720,8199,738],{"class":737},[720,8201,742],{"class":741},[720,8203,745],{"class":733},[720,8205,748],{"class":733},[720,8207,8208],{"class":751},"bg-blue-200 p-4",[720,8210,748],{"class":733},[720,8212,757],{"class":733},[720,8214,8215],{"class":760},"1",[720,8217,764],{"class":733},[720,8219,738],{"class":737},[720,8221,769],{"class":733},[720,8223,8224,8226,8228,8230,8232,8234,8236,8238,8240,8242,8244,8246],{"class":722,"line":801},[720,8225,865],{"class":733},[720,8227,738],{"class":737},[720,8229,742],{"class":741},[720,8231,745],{"class":733},[720,8233,748],{"class":733},[720,8235,8208],{"class":751},[720,8237,748],{"class":733},[720,8239,757],{"class":733},[720,8241,1483],{"class":760},[720,8243,764],{"class":733},[720,8245,738],{"class":737},[720,8247,769],{"class":733},[720,8249,8250,8252,8254,8256,8258,8260,8262,8264,8266,8269,8271,8273],{"class":722,"line":829},[720,8251,865],{"class":733},[720,8253,738],{"class":737},[720,8255,742],{"class":741},[720,8257,745],{"class":733},[720,8259,748],{"class":733},[720,8261,8208],{"class":751},[720,8263,748],{"class":733},[720,8265,757],{"class":733},[720,8267,8268],{"class":760},"3",[720,8270,764],{"class":733},[720,8272,738],{"class":737},[720,8274,769],{"class":733},[720,8276,8277,8279,8281],{"class":722,"line":836},[720,8278,764],{"class":733},[720,8280,738],{"class":737},[720,8282,769],{"class":733},[720,8284,8285],{"class":722,"line":842},[720,8286,833],{"emptyLinePlaceholder":832},[720,8288,8289],{"class":722,"line":862},[720,8290,8291],{"class":726},"\u003C!-- Span columns -->\n",[720,8293,8294,8296,8298,8300,8302,8304,8307,8309],{"class":722,"line":888},[720,8295,734],{"class":733},[720,8297,738],{"class":737},[720,8299,742],{"class":741},[720,8301,745],{"class":733},[720,8303,748],{"class":733},[720,8305,8306],{"class":751},"grid grid-cols-4 gap-4",[720,8308,748],{"class":733},[720,8310,769],{"class":733},[720,8312,8313,8315,8317,8319,8321,8323,8326,8328,8330,8333,8335,8337],{"class":722,"line":894},[720,8314,865],{"class":733},[720,8316,738],{"class":737},[720,8318,742],{"class":741},[720,8320,745],{"class":733},[720,8322,748],{"class":733},[720,8324,8325],{"class":751},"col-span-2 bg-green-200 p-4",[720,8327,748],{"class":733},[720,8329,757],{"class":733},[720,8331,8332],{"class":760},"Span 2",[720,8334,764],{"class":733},[720,8336,738],{"class":737},[720,8338,769],{"class":733},[720,8340,8341,8343,8345,8347,8349,8351,8354,8356,8358,8360,8362,8364],{"class":722,"line":903},[720,8342,865],{"class":733},[720,8344,738],{"class":737},[720,8346,742],{"class":741},[720,8348,745],{"class":733},[720,8350,748],{"class":733},[720,8352,8353],{"class":751},"bg-green-200 p-4",[720,8355,748],{"class":733},[720,8357,757],{"class":733},[720,8359,8215],{"class":760},[720,8361,764],{"class":733},[720,8363,738],{"class":737},[720,8365,769],{"class":733},[720,8367,8368,8370,8372,8374,8376,8378,8380,8382,8384,8386,8388,8390],{"class":722,"line":908},[720,8369,865],{"class":733},[720,8371,738],{"class":737},[720,8373,742],{"class":741},[720,8375,745],{"class":733},[720,8377,748],{"class":733},[720,8379,8353],{"class":751},[720,8381,748],{"class":733},[720,8383,757],{"class":733},[720,8385,8215],{"class":760},[720,8387,764],{"class":733},[720,8389,738],{"class":737},[720,8391,769],{"class":733},[720,8393,8394,8396,8398],{"class":722,"line":914},[720,8395,764],{"class":733},[720,8397,738],{"class":737},[720,8399,769],{"class":733},[720,8401,8402],{"class":722,"line":934},[720,8403,833],{"emptyLinePlaceholder":832},[720,8405,8406],{"class":722,"line":953},[720,8407,8408],{"class":726},"\u003C!-- Grid flow dense — fill holes -->\n",[720,8410,8411,8413,8415,8417,8419,8421,8424,8426],{"class":722,"line":983},[720,8412,734],{"class":733},[720,8414,738],{"class":737},[720,8416,742],{"class":741},[720,8418,745],{"class":733},[720,8420,748],{"class":733},[720,8422,8423],{"class":751},"grid grid-cols-3 grid-flow-dense gap-4",[720,8425,748],{"class":733},[720,8427,769],{"class":733},[720,8429,8430,8432,8434,8436,8438,8440,8443,8445,8447,8449,8451,8453],{"class":722,"line":1011},[720,8431,865],{"class":733},[720,8433,738],{"class":737},[720,8435,742],{"class":741},[720,8437,745],{"class":733},[720,8439,748],{"class":733},[720,8441,8442],{"class":751},"col-span-2 bg-purple-200 p-4",[720,8444,748],{"class":733},[720,8446,757],{"class":733},[720,8448,8332],{"class":760},[720,8450,764],{"class":733},[720,8452,738],{"class":737},[720,8454,769],{"class":733},[720,8456,8457,8459,8461,8463,8465,8467,8470,8472,8474,8476,8478,8480],{"class":722,"line":1021},[720,8458,865],{"class":733},[720,8460,738],{"class":737},[720,8462,742],{"class":741},[720,8464,745],{"class":733},[720,8466,748],{"class":733},[720,8468,8469],{"class":751},"bg-purple-200 p-4",[720,8471,748],{"class":733},[720,8473,757],{"class":733},[720,8475,8268],{"class":760},[720,8477,764],{"class":733},[720,8479,738],{"class":737},[720,8481,769],{"class":733},[720,8483,8484,8486,8488,8490,8492,8494,8496,8498,8500,8503,8505,8507],{"class":722,"line":1367},[720,8485,865],{"class":733},[720,8487,738],{"class":737},[720,8489,742],{"class":741},[720,8491,745],{"class":733},[720,8493,748],{"class":733},[720,8495,8469],{"class":751},[720,8497,748],{"class":733},[720,8499,757],{"class":733},[720,8501,8502],{"class":760},"4",[720,8504,764],{"class":733},[720,8506,738],{"class":737},[720,8508,769],{"class":733},[720,8510,8511,8513,8515,8517,8519,8521,8523,8525,8527,8530,8532,8534],{"class":722,"line":1387},[720,8512,865],{"class":733},[720,8514,738],{"class":737},[720,8516,742],{"class":741},[720,8518,745],{"class":733},[720,8520,748],{"class":733},[720,8522,8469],{"class":751},[720,8524,748],{"class":733},[720,8526,757],{"class":733},[720,8528,8529],{"class":760},"5",[720,8531,764],{"class":733},[720,8533,738],{"class":737},[720,8535,769],{"class":733},[720,8537,8538,8540,8542],{"class":722,"line":1444},[720,8539,764],{"class":733},[720,8541,738],{"class":737},[720,8543,769],{"class":733},[720,8545,8546],{"class":722,"line":1489},[720,8547,833],{"emptyLinePlaceholder":832},[720,8549,8550],{"class":722,"line":1507},[720,8551,8552],{"class":726},"\u003C!-- Subgrid (dùng với cha grid) -->\n",[720,8554,8555,8557,8559,8561,8563,8565,8567,8569],{"class":722,"line":1517},[720,8556,734],{"class":733},[720,8558,738],{"class":737},[720,8560,742],{"class":741},[720,8562,745],{"class":733},[720,8564,748],{"class":733},[720,8566,8189],{"class":751},[720,8568,748],{"class":733},[720,8570,769],{"class":733},[720,8572,8573,8575,8577,8579,8581,8583,8586,8588],{"class":722,"line":1526},[720,8574,865],{"class":733},[720,8576,738],{"class":737},[720,8578,742],{"class":741},[720,8580,745],{"class":733},[720,8582,748],{"class":733},[720,8584,8585],{"class":751},"grid grid-cols-subgrid col-span-3 gap-4",[720,8587,748],{"class":733},[720,8589,769],{"class":733},[720,8591,8592,8594,8596,8598,8600,8602,8605,8607,8609,8612,8614,8616],{"class":722,"line":2017},[720,8593,956],{"class":733},[720,8595,738],{"class":737},[720,8597,742],{"class":741},[720,8599,745],{"class":733},[720,8601,748],{"class":733},[720,8603,8604],{"class":751},"bg-yellow-200 p-4",[720,8606,748],{"class":733},[720,8608,757],{"class":733},[720,8610,8611],{"class":760},"Sub 1",[720,8613,764],{"class":733},[720,8615,738],{"class":737},[720,8617,769],{"class":733},[720,8619,8620,8622,8624,8626,8628,8630,8632,8634,8636,8639,8641,8643],{"class":722,"line":2026},[720,8621,956],{"class":733},[720,8623,738],{"class":737},[720,8625,742],{"class":741},[720,8627,745],{"class":733},[720,8629,748],{"class":733},[720,8631,8604],{"class":751},[720,8633,748],{"class":733},[720,8635,757],{"class":733},[720,8637,8638],{"class":760},"Sub 2",[720,8640,764],{"class":733},[720,8642,738],{"class":737},[720,8644,769],{"class":733},[720,8646,8647,8649,8651,8653,8655,8657,8659,8661,8663,8666,8668,8670],{"class":722,"line":3468},[720,8648,956],{"class":733},[720,8650,738],{"class":737},[720,8652,742],{"class":741},[720,8654,745],{"class":733},[720,8656,748],{"class":733},[720,8658,8604],{"class":751},[720,8660,748],{"class":733},[720,8662,757],{"class":733},[720,8664,8665],{"class":760},"Sub 3",[720,8667,764],{"class":733},[720,8669,738],{"class":737},[720,8671,769],{"class":733},[720,8673,8674,8676,8678],{"class":722,"line":3486},[720,8675,1014],{"class":733},[720,8677,738],{"class":737},[720,8679,769],{"class":733},[720,8681,8682,8684,8686],{"class":722,"line":3496},[720,8683,764],{"class":733},[720,8685,738],{"class":737},[720,8687,769],{"class":733},[706,8689,8691],{"id":8690},"bài-tập-11-12-column-grid-system","Bài tập 11: 12-column grid system",[431,8693,8694,8696],{},[443,8695,1056],{}," Tạo layout 12 cột, các phần tử span với độ rộng khác nhau.",[711,8698,8700],{"className":713,"code":8699,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"p-6 space-y-6\">\n \u003Ch2 class=\"text-xl font-bold mb-4\">12-Column Grid System\u003C\u002Fh2>\n\n \u003C!-- Row 1: 3 cột đều nhau (4+4+4) -->\n \u003Cdiv class=\"grid grid-cols-12 gap-4\">\n \u003Cdiv class=\"col-span-4 bg-blue-100 rounded-lg p-4 text-center font-medium text-blue-700\">\n 4 cols\n \u003C\u002Fdiv>\n \u003Cdiv class=\"col-span-4 bg-blue-100 rounded-lg p-4 text-center font-medium text-blue-700\">\n 4 cols\n \u003C\u002Fdiv>\n \u003Cdiv class=\"col-span-4 bg-blue-100 rounded-lg p-4 text-center font-medium text-blue-700\">\n 4 cols\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Row 2: 8+4 -->\n \u003Cdiv class=\"grid grid-cols-12 gap-4\">\n \u003Cdiv class=\"col-span-8 bg-green-100 rounded-lg p-4 text-center font-medium text-green-700\">\n 8 cols — main content\n \u003C\u002Fdiv>\n \u003Cdiv class=\"col-span-4 bg-green-50 rounded-lg p-4 text-center font-medium text-green-600\">\n 4 cols — sidebar\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Row 3: 3+6+3 -->\n \u003Cdiv class=\"grid grid-cols-12 gap-4\">\n \u003Cdiv class=\"col-span-3 bg-purple-100 rounded-lg p-4 text-center font-medium text-purple-700\">\n 3 cols\n \u003C\u002Fdiv>\n \u003Cdiv class=\"col-span-6 bg-purple-100 rounded-lg p-4 text-center font-medium text-purple-700\">\n 6 cols\n \u003C\u002Fdiv>\n \u003Cdiv class=\"col-span-3 bg-purple-100 rounded-lg p-4 text-center font-medium text-purple-700\">\n 3 cols\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Row 4: 2+2+2+2+2+2 -->\n \u003Cdiv class=\"grid grid-cols-12 gap-4\">\n \u003Cdiv class=\"col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm\">2\u003C\u002Fdiv>\n \u003Cdiv class=\"col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm\">2\u003C\u002Fdiv>\n \u003Cdiv class=\"col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm\">2\u003C\u002Fdiv>\n \u003Cdiv class=\"col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm\">2\u003C\u002Fdiv>\n \u003Cdiv class=\"col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm\">2\u003C\u002Fdiv>\n \u003Cdiv class=\"col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm\">2\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,8701,8702,8721,8749,8753,8758,8777,8796,8801,8809,8827,8831,8839,8857,8861,8869,8877,8881,8886,8904,8923,8928,8936,8955,8960,8968,8976,8980,8985,9003,9022,9027,9035,9054,9059,9067,9085,9089,9097,9105,9109,9114,9132,9159,9185,9211,9237,9263,9289,9297],{"__ignoreMap":716},[720,8703,8704,8706,8708,8710,8712,8714,8717,8719],{"class":722,"line":723},[720,8705,734],{"class":733},[720,8707,738],{"class":737},[720,8709,742],{"class":741},[720,8711,745],{"class":733},[720,8713,748],{"class":733},[720,8715,8716],{"class":751},"p-6 space-y-6",[720,8718,748],{"class":733},[720,8720,769],{"class":733},[720,8722,8723,8725,8727,8729,8731,8733,8736,8738,8740,8743,8745,8747],{"class":722,"line":730},[720,8724,865],{"class":733},[720,8726,427],{"class":737},[720,8728,742],{"class":741},[720,8730,745],{"class":733},[720,8732,748],{"class":733},[720,8734,8735],{"class":751},"text-xl font-bold mb-4",[720,8737,748],{"class":733},[720,8739,757],{"class":733},[720,8741,8742],{"class":760},"12-Column Grid System",[720,8744,764],{"class":733},[720,8746,427],{"class":737},[720,8748,769],{"class":733},[720,8750,8751],{"class":722,"line":772},[720,8752,833],{"emptyLinePlaceholder":832},[720,8754,8755],{"class":722,"line":801},[720,8756,8757],{"class":726}," \u003C!-- Row 1: 3 cột đều nhau (4+4+4) -->\n",[720,8759,8760,8762,8764,8766,8768,8770,8773,8775],{"class":722,"line":829},[720,8761,865],{"class":733},[720,8763,738],{"class":737},[720,8765,742],{"class":741},[720,8767,745],{"class":733},[720,8769,748],{"class":733},[720,8771,8772],{"class":751},"grid grid-cols-12 gap-4",[720,8774,748],{"class":733},[720,8776,769],{"class":733},[720,8778,8779,8781,8783,8785,8787,8789,8792,8794],{"class":722,"line":836},[720,8780,956],{"class":733},[720,8782,738],{"class":737},[720,8784,742],{"class":741},[720,8786,745],{"class":733},[720,8788,748],{"class":733},[720,8790,8791],{"class":751},"col-span-4 bg-blue-100 rounded-lg p-4 text-center font-medium text-blue-700",[720,8793,748],{"class":733},[720,8795,769],{"class":733},[720,8797,8798],{"class":722,"line":842},[720,8799,8800],{"class":760}," 4 cols\n",[720,8802,8803,8805,8807],{"class":722,"line":862},[720,8804,1510],{"class":733},[720,8806,738],{"class":737},[720,8808,769],{"class":733},[720,8810,8811,8813,8815,8817,8819,8821,8823,8825],{"class":722,"line":888},[720,8812,956],{"class":733},[720,8814,738],{"class":737},[720,8816,742],{"class":741},[720,8818,745],{"class":733},[720,8820,748],{"class":733},[720,8822,8791],{"class":751},[720,8824,748],{"class":733},[720,8826,769],{"class":733},[720,8828,8829],{"class":722,"line":894},[720,8830,8800],{"class":760},[720,8832,8833,8835,8837],{"class":722,"line":903},[720,8834,1510],{"class":733},[720,8836,738],{"class":737},[720,8838,769],{"class":733},[720,8840,8841,8843,8845,8847,8849,8851,8853,8855],{"class":722,"line":908},[720,8842,956],{"class":733},[720,8844,738],{"class":737},[720,8846,742],{"class":741},[720,8848,745],{"class":733},[720,8850,748],{"class":733},[720,8852,8791],{"class":751},[720,8854,748],{"class":733},[720,8856,769],{"class":733},[720,8858,8859],{"class":722,"line":914},[720,8860,8800],{"class":760},[720,8862,8863,8865,8867],{"class":722,"line":934},[720,8864,1510],{"class":733},[720,8866,738],{"class":737},[720,8868,769],{"class":733},[720,8870,8871,8873,8875],{"class":722,"line":953},[720,8872,1014],{"class":733},[720,8874,738],{"class":737},[720,8876,769],{"class":733},[720,8878,8879],{"class":722,"line":983},[720,8880,833],{"emptyLinePlaceholder":832},[720,8882,8883],{"class":722,"line":1011},[720,8884,8885],{"class":726}," \u003C!-- Row 2: 8+4 -->\n",[720,8887,8888,8890,8892,8894,8896,8898,8900,8902],{"class":722,"line":1021},[720,8889,865],{"class":733},[720,8891,738],{"class":737},[720,8893,742],{"class":741},[720,8895,745],{"class":733},[720,8897,748],{"class":733},[720,8899,8772],{"class":751},[720,8901,748],{"class":733},[720,8903,769],{"class":733},[720,8905,8906,8908,8910,8912,8914,8916,8919,8921],{"class":722,"line":1367},[720,8907,956],{"class":733},[720,8909,738],{"class":737},[720,8911,742],{"class":741},[720,8913,745],{"class":733},[720,8915,748],{"class":733},[720,8917,8918],{"class":751},"col-span-8 bg-green-100 rounded-lg p-4 text-center font-medium text-green-700",[720,8920,748],{"class":733},[720,8922,769],{"class":733},[720,8924,8925],{"class":722,"line":1387},[720,8926,8927],{"class":760}," 8 cols — main content\n",[720,8929,8930,8932,8934],{"class":722,"line":1444},[720,8931,1510],{"class":733},[720,8933,738],{"class":737},[720,8935,769],{"class":733},[720,8937,8938,8940,8942,8944,8946,8948,8951,8953],{"class":722,"line":1489},[720,8939,956],{"class":733},[720,8941,738],{"class":737},[720,8943,742],{"class":741},[720,8945,745],{"class":733},[720,8947,748],{"class":733},[720,8949,8950],{"class":751},"col-span-4 bg-green-50 rounded-lg p-4 text-center font-medium text-green-600",[720,8952,748],{"class":733},[720,8954,769],{"class":733},[720,8956,8957],{"class":722,"line":1507},[720,8958,8959],{"class":760}," 4 cols — sidebar\n",[720,8961,8962,8964,8966],{"class":722,"line":1517},[720,8963,1510],{"class":733},[720,8965,738],{"class":737},[720,8967,769],{"class":733},[720,8969,8970,8972,8974],{"class":722,"line":1526},[720,8971,1014],{"class":733},[720,8973,738],{"class":737},[720,8975,769],{"class":733},[720,8977,8978],{"class":722,"line":2017},[720,8979,833],{"emptyLinePlaceholder":832},[720,8981,8982],{"class":722,"line":2026},[720,8983,8984],{"class":726}," \u003C!-- Row 3: 3+6+3 -->\n",[720,8986,8987,8989,8991,8993,8995,8997,8999,9001],{"class":722,"line":3468},[720,8988,865],{"class":733},[720,8990,738],{"class":737},[720,8992,742],{"class":741},[720,8994,745],{"class":733},[720,8996,748],{"class":733},[720,8998,8772],{"class":751},[720,9000,748],{"class":733},[720,9002,769],{"class":733},[720,9004,9005,9007,9009,9011,9013,9015,9018,9020],{"class":722,"line":3486},[720,9006,956],{"class":733},[720,9008,738],{"class":737},[720,9010,742],{"class":741},[720,9012,745],{"class":733},[720,9014,748],{"class":733},[720,9016,9017],{"class":751},"col-span-3 bg-purple-100 rounded-lg p-4 text-center font-medium text-purple-700",[720,9019,748],{"class":733},[720,9021,769],{"class":733},[720,9023,9024],{"class":722,"line":3496},[720,9025,9026],{"class":760}," 3 cols\n",[720,9028,9029,9031,9033],{"class":722,"line":3505},[720,9030,1510],{"class":733},[720,9032,738],{"class":737},[720,9034,769],{"class":733},[720,9036,9037,9039,9041,9043,9045,9047,9050,9052],{"class":722,"line":3525},[720,9038,956],{"class":733},[720,9040,738],{"class":737},[720,9042,742],{"class":741},[720,9044,745],{"class":733},[720,9046,748],{"class":733},[720,9048,9049],{"class":751},"col-span-6 bg-purple-100 rounded-lg p-4 text-center font-medium text-purple-700",[720,9051,748],{"class":733},[720,9053,769],{"class":733},[720,9055,9056],{"class":722,"line":3553},[720,9057,9058],{"class":760}," 6 cols\n",[720,9060,9061,9063,9065],{"class":722,"line":3573},[720,9062,1510],{"class":733},[720,9064,738],{"class":737},[720,9066,769],{"class":733},[720,9068,9069,9071,9073,9075,9077,9079,9081,9083],{"class":722,"line":3591},[720,9070,956],{"class":733},[720,9072,738],{"class":737},[720,9074,742],{"class":741},[720,9076,745],{"class":733},[720,9078,748],{"class":733},[720,9080,9017],{"class":751},[720,9082,748],{"class":733},[720,9084,769],{"class":733},[720,9086,9087],{"class":722,"line":3609},[720,9088,9026],{"class":760},[720,9090,9091,9093,9095],{"class":722,"line":3618},[720,9092,1510],{"class":733},[720,9094,738],{"class":737},[720,9096,769],{"class":733},[720,9098,9099,9101,9103],{"class":722,"line":3627},[720,9100,1014],{"class":733},[720,9102,738],{"class":737},[720,9104,769],{"class":733},[720,9106,9107],{"class":722,"line":3636},[720,9108,833],{"emptyLinePlaceholder":832},[720,9110,9111],{"class":722,"line":3645},[720,9112,9113],{"class":726}," \u003C!-- Row 4: 2+2+2+2+2+2 -->\n",[720,9115,9116,9118,9120,9122,9124,9126,9128,9130],{"class":722,"line":3654},[720,9117,865],{"class":733},[720,9119,738],{"class":737},[720,9121,742],{"class":741},[720,9123,745],{"class":733},[720,9125,748],{"class":733},[720,9127,8772],{"class":751},[720,9129,748],{"class":733},[720,9131,769],{"class":733},[720,9133,9134,9136,9138,9140,9142,9144,9147,9149,9151,9153,9155,9157],{"class":722,"line":5038},[720,9135,956],{"class":733},[720,9137,738],{"class":737},[720,9139,742],{"class":741},[720,9141,745],{"class":733},[720,9143,748],{"class":733},[720,9145,9146],{"class":751},"col-span-2 bg-orange-100 rounded-lg p-4 text-center font-medium text-orange-700 text-sm",[720,9148,748],{"class":733},[720,9150,757],{"class":733},[720,9152,1483],{"class":760},[720,9154,764],{"class":733},[720,9156,738],{"class":737},[720,9158,769],{"class":733},[720,9160,9161,9163,9165,9167,9169,9171,9173,9175,9177,9179,9181,9183],{"class":722,"line":5053},[720,9162,956],{"class":733},[720,9164,738],{"class":737},[720,9166,742],{"class":741},[720,9168,745],{"class":733},[720,9170,748],{"class":733},[720,9172,9146],{"class":751},[720,9174,748],{"class":733},[720,9176,757],{"class":733},[720,9178,1483],{"class":760},[720,9180,764],{"class":733},[720,9182,738],{"class":737},[720,9184,769],{"class":733},[720,9186,9187,9189,9191,9193,9195,9197,9199,9201,9203,9205,9207,9209],{"class":722,"line":5058},[720,9188,956],{"class":733},[720,9190,738],{"class":737},[720,9192,742],{"class":741},[720,9194,745],{"class":733},[720,9196,748],{"class":733},[720,9198,9146],{"class":751},[720,9200,748],{"class":733},[720,9202,757],{"class":733},[720,9204,1483],{"class":760},[720,9206,764],{"class":733},[720,9208,738],{"class":737},[720,9210,769],{"class":733},[720,9212,9213,9215,9217,9219,9221,9223,9225,9227,9229,9231,9233,9235],{"class":722,"line":5067},[720,9214,956],{"class":733},[720,9216,738],{"class":737},[720,9218,742],{"class":741},[720,9220,745],{"class":733},[720,9222,748],{"class":733},[720,9224,9146],{"class":751},[720,9226,748],{"class":733},[720,9228,757],{"class":733},[720,9230,1483],{"class":760},[720,9232,764],{"class":733},[720,9234,738],{"class":737},[720,9236,769],{"class":733},[720,9238,9239,9241,9243,9245,9247,9249,9251,9253,9255,9257,9259,9261],{"class":722,"line":5072},[720,9240,956],{"class":733},[720,9242,738],{"class":737},[720,9244,742],{"class":741},[720,9246,745],{"class":733},[720,9248,748],{"class":733},[720,9250,9146],{"class":751},[720,9252,748],{"class":733},[720,9254,757],{"class":733},[720,9256,1483],{"class":760},[720,9258,764],{"class":733},[720,9260,738],{"class":737},[720,9262,769],{"class":733},[720,9264,9265,9267,9269,9271,9273,9275,9277,9279,9281,9283,9285,9287],{"class":722,"line":5092},[720,9266,956],{"class":733},[720,9268,738],{"class":737},[720,9270,742],{"class":741},[720,9272,745],{"class":733},[720,9274,748],{"class":733},[720,9276,9146],{"class":751},[720,9278,748],{"class":733},[720,9280,757],{"class":733},[720,9282,1483],{"class":760},[720,9284,764],{"class":733},[720,9286,738],{"class":737},[720,9288,769],{"class":733},[720,9290,9291,9293,9295],{"class":722,"line":5111},[720,9292,1014],{"class":733},[720,9294,738],{"class":737},[720,9296,769],{"class":733},[720,9298,9299,9301,9303],{"class":722,"line":5117},[720,9300,764],{"class":733},[720,9302,738],{"class":737},[720,9304,769],{"class":733},[706,9306,9308],{"id":9307},"bài-tập-12-responsive-gallery-1-col-mobile-2-cols-tablet-3-cols-desktop","Bài tập 12: Responsive gallery — 1 col mobile, 2 cols tablet, 3 cols desktop",[431,9310,9311,9313],{},[443,9312,1056],{}," Gallery ảnh responsive dùng grid, thay đổi số cột theo breakpoint.",[711,9315,9317],{"className":713,"code":9316,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"p-6\">\n \u003Ch2 class=\"text-xl font-bold mb-4\">Responsive Image Gallery\u003C\u002Fh2>\n \u003Cdiv class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\n \u003C!-- Item 1 -->\n \u003Cdiv class=\"group relative aspect-square rounded-xl overflow-hidden bg-gray-200\">\n \u003Cdiv class=\"absolute inset-0 bg-gradient-to-br from-indigo-400 to-blue-500\n flex items-center justify-center text-white text-4xl font-bold\">\n 1\n \u003C\u002Fdiv>\n \u003Cdiv class=\"absolute inset-0 bg-black\u002F40 opacity-0 group-hover:opacity-100\n transition-opacity flex items-center justify-center\">\n \u003Cspan class=\"text-white font-medium\">View Image\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C!-- Item 2 -->\n \u003Cdiv class=\"group relative aspect-square rounded-xl overflow-hidden bg-gray-200\">\n \u003Cdiv class=\"absolute inset-0 bg-gradient-to-br from-rose-400 to-pink-500\n flex items-center justify-center text-white text-4xl font-bold\">\n 2\n \u003C\u002Fdiv>\n \u003Cdiv class=\"absolute inset-0 bg-black\u002F40 opacity-0 group-hover:opacity-100\n transition-opacity flex items-center justify-center\">\n \u003Cspan class=\"text-white font-medium\">View Image\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C!-- Item 3 -->\n \u003Cdiv class=\"group relative aspect-square rounded-xl overflow-hidden bg-gray-200\">\n \u003Cdiv class=\"absolute inset-0 bg-gradient-to-br from-emerald-400 to-teal-500\n flex items-center justify-center text-white text-4xl font-bold\">\n 3\n \u003C\u002Fdiv>\n \u003Cdiv class=\"absolute inset-0 bg-black\u002F40 opacity-0 group-hover:opacity-100\n transition-opacity flex items-center justify-center\">\n \u003Cspan class=\"text-white font-medium\">View Image\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C!-- Item 4 -->\n \u003Cdiv class=\"group relative aspect-square rounded-xl overflow-hidden bg-gray-200\">\n \u003Cdiv class=\"absolute inset-0 bg-gradient-to-br from-amber-400 to-orange-500\n flex items-center justify-center text-white text-4xl font-bold\">\n 4\n \u003C\u002Fdiv>\n \u003Cdiv class=\"absolute inset-0 bg-black\u002F40 opacity-0 group-hover:opacity-100\n transition-opacity flex items-center justify-center\">\n \u003Cspan class=\"text-white font-medium\">View Image\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C!-- Item 5 -->\n \u003Cdiv class=\"group relative aspect-square rounded-xl overflow-hidden bg-gray-200\">\n \u003Cdiv class=\"absolute inset-0 bg-gradient-to-br from-violet-400 to-purple-500\n flex items-center justify-center text-white text-4xl font-bold\">\n 5\n \u003C\u002Fdiv>\n \u003Cdiv class=\"absolute inset-0 bg-black\u002F40 opacity-0 group-hover:opacity-100\n transition-opacity flex items-center justify-center\">\n \u003Cspan class=\"text-white font-medium\">View Image\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C!-- Item 6 -->\n \u003Cdiv class=\"group relative aspect-square rounded-xl overflow-hidden bg-gray-200\">\n \u003Cdiv class=\"absolute inset-0 bg-gradient-to-br from-cyan-400 to-sky-500\n flex items-center justify-center text-white text-4xl font-bold\">\n 6\n \u003C\u002Fdiv>\n \u003Cdiv class=\"absolute inset-0 bg-black\u002F40 opacity-0 group-hover:opacity-100\n transition-opacity flex items-center justify-center\">\n \u003Cspan class=\"text-white font-medium\">View Image\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,9318,9319,9337,9364,9383,9388,9407,9422,9431,9436,9444,9459,9468,9496,9504,9512,9517,9535,9550,9558,9563,9571,9585,9593,9619,9627,9635,9640,9658,9673,9681,9686,9694,9708,9716,9742,9750,9758,9763,9781,9796,9804,9809,9817,9831,9839,9865,9873,9881,9886,9904,9919,9927,9932,9940,9954,9962,9988,9996,10004,10009,10027,10042,10050,10055,10063,10077,10085,10111,10119,10127,10135],{"__ignoreMap":716},[720,9320,9321,9323,9325,9327,9329,9331,9333,9335],{"class":722,"line":723},[720,9322,734],{"class":733},[720,9324,738],{"class":737},[720,9326,742],{"class":741},[720,9328,745],{"class":733},[720,9330,748],{"class":733},[720,9332,1680],{"class":751},[720,9334,748],{"class":733},[720,9336,769],{"class":733},[720,9338,9339,9341,9343,9345,9347,9349,9351,9353,9355,9358,9360,9362],{"class":722,"line":730},[720,9340,865],{"class":733},[720,9342,427],{"class":737},[720,9344,742],{"class":741},[720,9346,745],{"class":733},[720,9348,748],{"class":733},[720,9350,8735],{"class":751},[720,9352,748],{"class":733},[720,9354,757],{"class":733},[720,9356,9357],{"class":760},"Responsive Image Gallery",[720,9359,764],{"class":733},[720,9361,427],{"class":737},[720,9363,769],{"class":733},[720,9365,9366,9368,9370,9372,9374,9376,9379,9381],{"class":722,"line":772},[720,9367,865],{"class":733},[720,9369,738],{"class":737},[720,9371,742],{"class":741},[720,9373,745],{"class":733},[720,9375,748],{"class":733},[720,9377,9378],{"class":751},"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4",[720,9380,748],{"class":733},[720,9382,769],{"class":733},[720,9384,9385],{"class":722,"line":801},[720,9386,9387],{"class":726}," \u003C!-- Item 1 -->\n",[720,9389,9390,9392,9394,9396,9398,9400,9403,9405],{"class":722,"line":829},[720,9391,956],{"class":733},[720,9393,738],{"class":737},[720,9395,742],{"class":741},[720,9397,745],{"class":733},[720,9399,748],{"class":733},[720,9401,9402],{"class":751},"group relative aspect-square rounded-xl overflow-hidden bg-gray-200",[720,9404,748],{"class":733},[720,9406,769],{"class":733},[720,9408,9409,9411,9413,9415,9417,9419],{"class":722,"line":836},[720,9410,1447],{"class":733},[720,9412,738],{"class":737},[720,9414,742],{"class":741},[720,9416,745],{"class":733},[720,9418,748],{"class":733},[720,9420,9421],{"class":751},"absolute inset-0 bg-gradient-to-br from-indigo-400 to-blue-500\n",[720,9423,9424,9427,9429],{"class":722,"line":842},[720,9425,9426],{"class":751}," flex items-center justify-center text-white text-4xl font-bold",[720,9428,748],{"class":733},[720,9430,769],{"class":733},[720,9432,9433],{"class":722,"line":862},[720,9434,9435],{"class":760}," 1\n",[720,9437,9438,9440,9442],{"class":722,"line":888},[720,9439,1849],{"class":733},[720,9441,738],{"class":737},[720,9443,769],{"class":733},[720,9445,9446,9448,9450,9452,9454,9456],{"class":722,"line":894},[720,9447,1447],{"class":733},[720,9449,738],{"class":737},[720,9451,742],{"class":741},[720,9453,745],{"class":733},[720,9455,748],{"class":733},[720,9457,9458],{"class":751},"absolute inset-0 bg-black\u002F40 opacity-0 group-hover:opacity-100\n",[720,9460,9461,9464,9466],{"class":722,"line":903},[720,9462,9463],{"class":751}," transition-opacity flex items-center justify-center",[720,9465,748],{"class":733},[720,9467,769],{"class":733},[720,9469,9470,9472,9474,9476,9478,9480,9483,9485,9487,9490,9492,9494],{"class":722,"line":908},[720,9471,1736],{"class":733},[720,9473,720],{"class":737},[720,9475,742],{"class":741},[720,9477,745],{"class":733},[720,9479,748],{"class":733},[720,9481,9482],{"class":751},"text-white font-medium",[720,9484,748],{"class":733},[720,9486,757],{"class":733},[720,9488,9489],{"class":760},"View Image",[720,9491,764],{"class":733},[720,9493,720],{"class":737},[720,9495,769],{"class":733},[720,9497,9498,9500,9502],{"class":722,"line":914},[720,9499,1849],{"class":733},[720,9501,738],{"class":737},[720,9503,769],{"class":733},[720,9505,9506,9508,9510],{"class":722,"line":934},[720,9507,1510],{"class":733},[720,9509,738],{"class":737},[720,9511,769],{"class":733},[720,9513,9514],{"class":722,"line":953},[720,9515,9516],{"class":726}," \u003C!-- Item 2 -->\n",[720,9518,9519,9521,9523,9525,9527,9529,9531,9533],{"class":722,"line":983},[720,9520,956],{"class":733},[720,9522,738],{"class":737},[720,9524,742],{"class":741},[720,9526,745],{"class":733},[720,9528,748],{"class":733},[720,9530,9402],{"class":751},[720,9532,748],{"class":733},[720,9534,769],{"class":733},[720,9536,9537,9539,9541,9543,9545,9547],{"class":722,"line":1011},[720,9538,1447],{"class":733},[720,9540,738],{"class":737},[720,9542,742],{"class":741},[720,9544,745],{"class":733},[720,9546,748],{"class":733},[720,9548,9549],{"class":751},"absolute inset-0 bg-gradient-to-br from-rose-400 to-pink-500\n",[720,9551,9552,9554,9556],{"class":722,"line":1021},[720,9553,9426],{"class":751},[720,9555,748],{"class":733},[720,9557,769],{"class":733},[720,9559,9560],{"class":722,"line":1367},[720,9561,9562],{"class":760}," 2\n",[720,9564,9565,9567,9569],{"class":722,"line":1387},[720,9566,1849],{"class":733},[720,9568,738],{"class":737},[720,9570,769],{"class":733},[720,9572,9573,9575,9577,9579,9581,9583],{"class":722,"line":1444},[720,9574,1447],{"class":733},[720,9576,738],{"class":737},[720,9578,742],{"class":741},[720,9580,745],{"class":733},[720,9582,748],{"class":733},[720,9584,9458],{"class":751},[720,9586,9587,9589,9591],{"class":722,"line":1489},[720,9588,9463],{"class":751},[720,9590,748],{"class":733},[720,9592,769],{"class":733},[720,9594,9595,9597,9599,9601,9603,9605,9607,9609,9611,9613,9615,9617],{"class":722,"line":1507},[720,9596,1736],{"class":733},[720,9598,720],{"class":737},[720,9600,742],{"class":741},[720,9602,745],{"class":733},[720,9604,748],{"class":733},[720,9606,9482],{"class":751},[720,9608,748],{"class":733},[720,9610,757],{"class":733},[720,9612,9489],{"class":760},[720,9614,764],{"class":733},[720,9616,720],{"class":737},[720,9618,769],{"class":733},[720,9620,9621,9623,9625],{"class":722,"line":1517},[720,9622,1849],{"class":733},[720,9624,738],{"class":737},[720,9626,769],{"class":733},[720,9628,9629,9631,9633],{"class":722,"line":1526},[720,9630,1510],{"class":733},[720,9632,738],{"class":737},[720,9634,769],{"class":733},[720,9636,9637],{"class":722,"line":2017},[720,9638,9639],{"class":726}," \u003C!-- Item 3 -->\n",[720,9641,9642,9644,9646,9648,9650,9652,9654,9656],{"class":722,"line":2026},[720,9643,956],{"class":733},[720,9645,738],{"class":737},[720,9647,742],{"class":741},[720,9649,745],{"class":733},[720,9651,748],{"class":733},[720,9653,9402],{"class":751},[720,9655,748],{"class":733},[720,9657,769],{"class":733},[720,9659,9660,9662,9664,9666,9668,9670],{"class":722,"line":3468},[720,9661,1447],{"class":733},[720,9663,738],{"class":737},[720,9665,742],{"class":741},[720,9667,745],{"class":733},[720,9669,748],{"class":733},[720,9671,9672],{"class":751},"absolute inset-0 bg-gradient-to-br from-emerald-400 to-teal-500\n",[720,9674,9675,9677,9679],{"class":722,"line":3486},[720,9676,9426],{"class":751},[720,9678,748],{"class":733},[720,9680,769],{"class":733},[720,9682,9683],{"class":722,"line":3496},[720,9684,9685],{"class":760}," 3\n",[720,9687,9688,9690,9692],{"class":722,"line":3505},[720,9689,1849],{"class":733},[720,9691,738],{"class":737},[720,9693,769],{"class":733},[720,9695,9696,9698,9700,9702,9704,9706],{"class":722,"line":3525},[720,9697,1447],{"class":733},[720,9699,738],{"class":737},[720,9701,742],{"class":741},[720,9703,745],{"class":733},[720,9705,748],{"class":733},[720,9707,9458],{"class":751},[720,9709,9710,9712,9714],{"class":722,"line":3553},[720,9711,9463],{"class":751},[720,9713,748],{"class":733},[720,9715,769],{"class":733},[720,9717,9718,9720,9722,9724,9726,9728,9730,9732,9734,9736,9738,9740],{"class":722,"line":3573},[720,9719,1736],{"class":733},[720,9721,720],{"class":737},[720,9723,742],{"class":741},[720,9725,745],{"class":733},[720,9727,748],{"class":733},[720,9729,9482],{"class":751},[720,9731,748],{"class":733},[720,9733,757],{"class":733},[720,9735,9489],{"class":760},[720,9737,764],{"class":733},[720,9739,720],{"class":737},[720,9741,769],{"class":733},[720,9743,9744,9746,9748],{"class":722,"line":3591},[720,9745,1849],{"class":733},[720,9747,738],{"class":737},[720,9749,769],{"class":733},[720,9751,9752,9754,9756],{"class":722,"line":3609},[720,9753,1510],{"class":733},[720,9755,738],{"class":737},[720,9757,769],{"class":733},[720,9759,9760],{"class":722,"line":3618},[720,9761,9762],{"class":726}," \u003C!-- Item 4 -->\n",[720,9764,9765,9767,9769,9771,9773,9775,9777,9779],{"class":722,"line":3627},[720,9766,956],{"class":733},[720,9768,738],{"class":737},[720,9770,742],{"class":741},[720,9772,745],{"class":733},[720,9774,748],{"class":733},[720,9776,9402],{"class":751},[720,9778,748],{"class":733},[720,9780,769],{"class":733},[720,9782,9783,9785,9787,9789,9791,9793],{"class":722,"line":3636},[720,9784,1447],{"class":733},[720,9786,738],{"class":737},[720,9788,742],{"class":741},[720,9790,745],{"class":733},[720,9792,748],{"class":733},[720,9794,9795],{"class":751},"absolute inset-0 bg-gradient-to-br from-amber-400 to-orange-500\n",[720,9797,9798,9800,9802],{"class":722,"line":3645},[720,9799,9426],{"class":751},[720,9801,748],{"class":733},[720,9803,769],{"class":733},[720,9805,9806],{"class":722,"line":3654},[720,9807,9808],{"class":760}," 4\n",[720,9810,9811,9813,9815],{"class":722,"line":5038},[720,9812,1849],{"class":733},[720,9814,738],{"class":737},[720,9816,769],{"class":733},[720,9818,9819,9821,9823,9825,9827,9829],{"class":722,"line":5053},[720,9820,1447],{"class":733},[720,9822,738],{"class":737},[720,9824,742],{"class":741},[720,9826,745],{"class":733},[720,9828,748],{"class":733},[720,9830,9458],{"class":751},[720,9832,9833,9835,9837],{"class":722,"line":5058},[720,9834,9463],{"class":751},[720,9836,748],{"class":733},[720,9838,769],{"class":733},[720,9840,9841,9843,9845,9847,9849,9851,9853,9855,9857,9859,9861,9863],{"class":722,"line":5067},[720,9842,1736],{"class":733},[720,9844,720],{"class":737},[720,9846,742],{"class":741},[720,9848,745],{"class":733},[720,9850,748],{"class":733},[720,9852,9482],{"class":751},[720,9854,748],{"class":733},[720,9856,757],{"class":733},[720,9858,9489],{"class":760},[720,9860,764],{"class":733},[720,9862,720],{"class":737},[720,9864,769],{"class":733},[720,9866,9867,9869,9871],{"class":722,"line":5072},[720,9868,1849],{"class":733},[720,9870,738],{"class":737},[720,9872,769],{"class":733},[720,9874,9875,9877,9879],{"class":722,"line":5092},[720,9876,1510],{"class":733},[720,9878,738],{"class":737},[720,9880,769],{"class":733},[720,9882,9883],{"class":722,"line":5111},[720,9884,9885],{"class":726}," \u003C!-- Item 5 -->\n",[720,9887,9888,9890,9892,9894,9896,9898,9900,9902],{"class":722,"line":5117},[720,9889,956],{"class":733},[720,9891,738],{"class":737},[720,9893,742],{"class":741},[720,9895,745],{"class":733},[720,9897,748],{"class":733},[720,9899,9402],{"class":751},[720,9901,748],{"class":733},[720,9903,769],{"class":733},[720,9905,9906,9908,9910,9912,9914,9916],{"class":722,"line":5126},[720,9907,1447],{"class":733},[720,9909,738],{"class":737},[720,9911,742],{"class":741},[720,9913,745],{"class":733},[720,9915,748],{"class":733},[720,9917,9918],{"class":751},"absolute inset-0 bg-gradient-to-br from-violet-400 to-purple-500\n",[720,9920,9921,9923,9925],{"class":722,"line":5135},[720,9922,9426],{"class":751},[720,9924,748],{"class":733},[720,9926,769],{"class":733},[720,9928,9929],{"class":722,"line":5140},[720,9930,9931],{"class":760}," 5\n",[720,9933,9934,9936,9938],{"class":722,"line":5159},[720,9935,1849],{"class":733},[720,9937,738],{"class":737},[720,9939,769],{"class":733},[720,9941,9942,9944,9946,9948,9950,9952],{"class":722,"line":5168},[720,9943,1447],{"class":733},[720,9945,738],{"class":737},[720,9947,742],{"class":741},[720,9949,745],{"class":733},[720,9951,748],{"class":733},[720,9953,9458],{"class":751},[720,9955,9956,9958,9960],{"class":722,"line":5187},[720,9957,9463],{"class":751},[720,9959,748],{"class":733},[720,9961,769],{"class":733},[720,9963,9964,9966,9968,9970,9972,9974,9976,9978,9980,9982,9984,9986],{"class":722,"line":5216},[720,9965,1736],{"class":733},[720,9967,720],{"class":737},[720,9969,742],{"class":741},[720,9971,745],{"class":733},[720,9973,748],{"class":733},[720,9975,9482],{"class":751},[720,9977,748],{"class":733},[720,9979,757],{"class":733},[720,9981,9489],{"class":760},[720,9983,764],{"class":733},[720,9985,720],{"class":737},[720,9987,769],{"class":733},[720,9989,9990,9992,9994],{"class":722,"line":5244},[720,9991,1849],{"class":733},[720,9993,738],{"class":737},[720,9995,769],{"class":733},[720,9997,9998,10000,10002],{"class":722,"line":5253},[720,9999,1510],{"class":733},[720,10001,738],{"class":737},[720,10003,769],{"class":733},[720,10005,10006],{"class":722,"line":5281},[720,10007,10008],{"class":726}," \u003C!-- Item 6 -->\n",[720,10010,10011,10013,10015,10017,10019,10021,10023,10025],{"class":722,"line":5300},[720,10012,956],{"class":733},[720,10014,738],{"class":737},[720,10016,742],{"class":741},[720,10018,745],{"class":733},[720,10020,748],{"class":733},[720,10022,9402],{"class":751},[720,10024,748],{"class":733},[720,10026,769],{"class":733},[720,10028,10029,10031,10033,10035,10037,10039],{"class":722,"line":5306},[720,10030,1447],{"class":733},[720,10032,738],{"class":737},[720,10034,742],{"class":741},[720,10036,745],{"class":733},[720,10038,748],{"class":733},[720,10040,10041],{"class":751},"absolute inset-0 bg-gradient-to-br from-cyan-400 to-sky-500\n",[720,10043,10044,10046,10048],{"class":722,"line":5312},[720,10045,9426],{"class":751},[720,10047,748],{"class":733},[720,10049,769],{"class":733},[720,10051,10052],{"class":722,"line":5321},[720,10053,10054],{"class":760}," 6\n",[720,10056,10057,10059,10061],{"class":722,"line":5330},[720,10058,1849],{"class":733},[720,10060,738],{"class":737},[720,10062,769],{"class":733},[720,10064,10065,10067,10069,10071,10073,10075],{"class":722,"line":5350},[720,10066,1447],{"class":733},[720,10068,738],{"class":737},[720,10070,742],{"class":741},[720,10072,745],{"class":733},[720,10074,748],{"class":733},[720,10076,9458],{"class":751},[720,10078,10079,10081,10083],{"class":722,"line":5355},[720,10080,9463],{"class":751},[720,10082,748],{"class":733},[720,10084,769],{"class":733},[720,10086,10087,10089,10091,10093,10095,10097,10099,10101,10103,10105,10107,10109],{"class":722,"line":5364},[720,10088,1736],{"class":733},[720,10090,720],{"class":737},[720,10092,742],{"class":741},[720,10094,745],{"class":733},[720,10096,748],{"class":733},[720,10098,9482],{"class":751},[720,10100,748],{"class":733},[720,10102,757],{"class":733},[720,10104,9489],{"class":760},[720,10106,764],{"class":733},[720,10108,720],{"class":737},[720,10110,769],{"class":733},[720,10112,10113,10115,10117],{"class":722,"line":5373},[720,10114,1849],{"class":733},[720,10116,738],{"class":737},[720,10118,769],{"class":733},[720,10120,10121,10123,10125],{"class":722,"line":5382},[720,10122,1510],{"class":733},[720,10124,738],{"class":737},[720,10126,769],{"class":733},[720,10128,10129,10131,10133],{"class":722,"line":5391},[720,10130,1014],{"class":733},[720,10132,738],{"class":737},[720,10134,769],{"class":733},[720,10136,10137,10139,10141],{"class":722,"line":5400},[720,10138,764],{"class":733},[720,10140,738],{"class":737},[720,10142,769],{"class":733},[435,10144,441,10145,446,10148,10151,10152,10155,10156,10159,10160,10163],{"color":437,"icon":438},[443,10146,10147],{},"Mobile-first grid pattern:",[458,10149,10150],{},"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"," — bắt đầu từ 1 cột (mobile), tăng dần. Ghi nhớ: trong Tailwind, breakpoint là ",[443,10153,10154],{},"min-width"," — class không prefix = mobile, ",[458,10157,10158],{},"sm:"," = >= 640px, ",[458,10161,10162],{},"lg:"," = >= 1024px.",[706,10165,10167],{"id":10166},"bài-tập-13-dashboard-layout-với-sidebar-header-main-widgets","Bài tập 13: Dashboard layout với sidebar + header + main + widgets",[431,10169,10170,10172],{},[443,10171,1056],{}," Dashboard admin: sidebar trái cố định, header top, main content với grid widgets.",[711,10174,10176],{"className":713,"code":10175,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"min-h-screen flex\">\n \u003C!-- Sidebar — cố định bên trái -->\n \u003Caside class=\"w-64 bg-gray-900 text-white flex-shrink-0 hidden lg:block\">\n \u003Cdiv class=\"p-6\">\n \u003Ch2 class=\"text-lg font-bold mb-8\">Admin Panel\u003C\u002Fh2>\n \u003Cnav class=\"space-y-2\">\n \u003Ca href=\"#\" class=\"flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800 text-white\">\n \u003Cspan class=\"w-5 h-5 bg-blue-400 rounded\">\u003C\u002Fspan> Dashboard\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors\">\n \u003Cspan class=\"w-5 h-5 bg-gray-600 rounded\">\u003C\u002Fspan> Users\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors\">\n \u003Cspan class=\"w-5 h-5 bg-gray-600 rounded\">\u003C\u002Fspan> Products\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors\">\n \u003Cspan class=\"w-5 h-5 bg-gray-600 rounded\">\u003C\u002Fspan> Settings\n \u003C\u002Fa>\n \u003C\u002Fnav>\n \u003C\u002Fdiv>\n \u003C\u002Faside>\n\n \u003C!-- Main area -->\n \u003Cdiv class=\"flex-1 min-w-0 bg-gray-50\">\n \u003C!-- Header -->\n \u003Cheader class=\"bg-white border-b px-6 py-4 flex items-center justify-between\">\n \u003Ch1 class=\"text-xl font-bold text-gray-900\">Dashboard\u003C\u002Fh1>\n \u003Cdiv class=\"flex items-center gap-4\">\n \u003Cspan class=\"text-sm text-gray-600\">Admin User\u003C\u002Fspan>\n \u003Cdiv class=\"w-8 h-8 bg-gray-300 rounded-full\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fheader>\n\n \u003C!-- Content grid -->\n \u003Cmain class=\"p-6\">\n \u003C!-- Stats cards -->\n \u003Cdiv class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6\">\n \u003Cdiv class=\"bg-white rounded-xl p-5 shadow-sm\">\n \u003Cp class=\"text-sm text-gray-500 mb-1\">Total Users\u003C\u002Fp>\n \u003Cp class=\"text-2xl font-bold text-gray-900\">12,543\u003C\u002Fp>\n \u003Cp class=\"text-xs text-green-600 mt-1\">+12.5% from last month\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"bg-white rounded-xl p-5 shadow-sm\">\n \u003Cp class=\"text-sm text-gray-500 mb-1\">Revenue\u003C\u002Fp>\n \u003Cp class=\"text-2xl font-bold text-gray-900\">$45,200\u003C\u002Fp>\n \u003Cp class=\"text-xs text-green-600 mt-1\">+8.2% from last month\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"bg-white rounded-xl p-5 shadow-sm\">\n \u003Cp class=\"text-sm text-gray-500 mb-1\">Active Now\u003C\u002Fp>\n \u003Cp class=\"text-2xl font-bold text-gray-900\">342\u003C\u002Fp>\n \u003Cp class=\"text-xs text-red-600 mt-1\">-3.1% from last hour\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"bg-white rounded-xl p-5 shadow-sm\">\n \u003Cp class=\"text-sm text-gray-500 mb-1\">Conversion\u003C\u002Fp>\n \u003Cp class=\"text-2xl font-bold text-gray-900\">3.24%\u003C\u002Fp>\n \u003Cp class=\"text-xs text-green-600 mt-1\">+0.4% from last week\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Charts & tables area -->\n \u003Cdiv class=\"grid grid-cols-1 lg:grid-cols-3 gap-4\">\n \u003C!-- Main chart — span 2 -->\n \u003Cdiv class=\"lg:col-span-2 bg-white rounded-xl p-5 shadow-sm\">\n \u003Ch3 class=\"font-bold text-gray-900 mb-4\">Revenue Overview\u003C\u002Fh3>\n \u003Cdiv class=\"h-64 bg-gray-100 rounded flex items-center justify-center text-gray-400\">\n Chart Area (span 2 columns)\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C!-- Side widget -->\n \u003Cdiv class=\"bg-white rounded-xl p-5 shadow-sm\">\n \u003Ch3 class=\"font-bold text-gray-900 mb-4\">Recent Activity\u003C\u002Fh3>\n \u003Cdiv class=\"space-y-3\">\n \u003Cdiv class=\"flex gap-3 text-sm\">\n \u003Cdiv class=\"w-2 h-2 bg-blue-500 rounded-full mt-1.5 flex-shrink-0\">\u003C\u002Fdiv>\n \u003Cp class=\"text-gray-600\">New user registered\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"flex gap-3 text-sm\">\n \u003Cdiv class=\"w-2 h-2 bg-green-500 rounded-full mt-1.5 flex-shrink-0\">\u003C\u002Fdiv>\n \u003Cp class=\"text-gray-600\">Order #1234 completed\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"flex gap-3 text-sm\">\n \u003Cdiv class=\"w-2 h-2 bg-orange-500 rounded-full mt-1.5 flex-shrink-0\">\u003C\u002Fdiv>\n \u003Cp class=\"text-gray-600\">Payment pending\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fmain>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,10177,10178,10197,10202,10221,10239,10267,10285,10314,10340,10348,10377,10403,10411,10439,10464,10472,10500,10525,10533,10541,10549,10557,10561,10566,10585,10590,10609,10636,10655,10682,10705,10713,10721,10725,10730,10748,10753,10772,10791,10819,10847,10875,10883,10901,10928,10955,10982,10990,11008,11035,11062,11090,11098,11116,11143,11170,11197,11205,11213,11217,11222,11241,11246,11265,11293,11312,11317,11325,11333,11338,11356,11383,11403,11423,11447,11475,11484,11503,11527,11555,11564,11583,11607,11635,11644,11653,11662,11671,11680,11689],{"__ignoreMap":716},[720,10179,10180,10182,10184,10186,10188,10190,10193,10195],{"class":722,"line":723},[720,10181,734],{"class":733},[720,10183,738],{"class":737},[720,10185,742],{"class":741},[720,10187,745],{"class":733},[720,10189,748],{"class":733},[720,10191,10192],{"class":751},"min-h-screen flex",[720,10194,748],{"class":733},[720,10196,769],{"class":733},[720,10198,10199],{"class":722,"line":730},[720,10200,10201],{"class":726}," \u003C!-- Sidebar — cố định bên trái -->\n",[720,10203,10204,10206,10208,10210,10212,10214,10217,10219],{"class":722,"line":772},[720,10205,865],{"class":733},[720,10207,1633],{"class":737},[720,10209,742],{"class":741},[720,10211,745],{"class":733},[720,10213,748],{"class":733},[720,10215,10216],{"class":751},"w-64 bg-gray-900 text-white flex-shrink-0 hidden lg:block",[720,10218,748],{"class":733},[720,10220,769],{"class":733},[720,10222,10223,10225,10227,10229,10231,10233,10235,10237],{"class":722,"line":801},[720,10224,956],{"class":733},[720,10226,738],{"class":737},[720,10228,742],{"class":741},[720,10230,745],{"class":733},[720,10232,748],{"class":733},[720,10234,1680],{"class":751},[720,10236,748],{"class":733},[720,10238,769],{"class":733},[720,10240,10241,10243,10245,10247,10249,10251,10254,10256,10258,10261,10263,10265],{"class":722,"line":829},[720,10242,1447],{"class":733},[720,10244,427],{"class":737},[720,10246,742],{"class":741},[720,10248,745],{"class":733},[720,10250,748],{"class":733},[720,10252,10253],{"class":751},"text-lg font-bold mb-8",[720,10255,748],{"class":733},[720,10257,757],{"class":733},[720,10259,10260],{"class":760},"Admin Panel",[720,10262,764],{"class":733},[720,10264,427],{"class":737},[720,10266,769],{"class":733},[720,10268,10269,10271,10273,10275,10277,10279,10281,10283],{"class":722,"line":836},[720,10270,1447],{"class":733},[720,10272,1069],{"class":737},[720,10274,742],{"class":741},[720,10276,745],{"class":733},[720,10278,748],{"class":733},[720,10280,6473],{"class":751},[720,10282,748],{"class":733},[720,10284,769],{"class":733},[720,10286,10287,10289,10291,10293,10295,10297,10299,10301,10303,10305,10307,10310,10312],{"class":722,"line":842},[720,10288,1736],{"class":733},[720,10290,1094],{"class":737},[720,10292,1097],{"class":741},[720,10294,745],{"class":733},[720,10296,748],{"class":733},[720,10298,1104],{"class":751},[720,10300,748],{"class":733},[720,10302,742],{"class":741},[720,10304,745],{"class":733},[720,10306,748],{"class":733},[720,10308,10309],{"class":751},"flex items-center gap-3 px-3 py-2 rounded-lg bg-gray-800 text-white",[720,10311,748],{"class":733},[720,10313,769],{"class":733},[720,10315,10316,10318,10320,10322,10324,10326,10329,10331,10333,10335,10337],{"class":722,"line":862},[720,10317,3161],{"class":733},[720,10319,720],{"class":737},[720,10321,742],{"class":741},[720,10323,745],{"class":733},[720,10325,748],{"class":733},[720,10327,10328],{"class":751},"w-5 h-5 bg-blue-400 rounded",[720,10330,748],{"class":733},[720,10332,881],{"class":733},[720,10334,720],{"class":737},[720,10336,757],{"class":733},[720,10338,10339],{"class":760}," Dashboard\n",[720,10341,10342,10344,10346],{"class":722,"line":888},[720,10343,3295],{"class":733},[720,10345,1094],{"class":737},[720,10347,769],{"class":733},[720,10349,10350,10352,10354,10356,10358,10360,10362,10364,10366,10368,10370,10373,10375],{"class":722,"line":894},[720,10351,1736],{"class":733},[720,10353,1094],{"class":737},[720,10355,1097],{"class":741},[720,10357,745],{"class":733},[720,10359,748],{"class":733},[720,10361,1104],{"class":751},[720,10363,748],{"class":733},[720,10365,742],{"class":741},[720,10367,745],{"class":733},[720,10369,748],{"class":733},[720,10371,10372],{"class":751},"flex items-center gap-3 px-3 py-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-800 transition-colors",[720,10374,748],{"class":733},[720,10376,769],{"class":733},[720,10378,10379,10381,10383,10385,10387,10389,10392,10394,10396,10398,10400],{"class":722,"line":903},[720,10380,3161],{"class":733},[720,10382,720],{"class":737},[720,10384,742],{"class":741},[720,10386,745],{"class":733},[720,10388,748],{"class":733},[720,10390,10391],{"class":751},"w-5 h-5 bg-gray-600 rounded",[720,10393,748],{"class":733},[720,10395,881],{"class":733},[720,10397,720],{"class":737},[720,10399,757],{"class":733},[720,10401,10402],{"class":760}," Users\n",[720,10404,10405,10407,10409],{"class":722,"line":908},[720,10406,3295],{"class":733},[720,10408,1094],{"class":737},[720,10410,769],{"class":733},[720,10412,10413,10415,10417,10419,10421,10423,10425,10427,10429,10431,10433,10435,10437],{"class":722,"line":914},[720,10414,1736],{"class":733},[720,10416,1094],{"class":737},[720,10418,1097],{"class":741},[720,10420,745],{"class":733},[720,10422,748],{"class":733},[720,10424,1104],{"class":751},[720,10426,748],{"class":733},[720,10428,742],{"class":741},[720,10430,745],{"class":733},[720,10432,748],{"class":733},[720,10434,10372],{"class":751},[720,10436,748],{"class":733},[720,10438,769],{"class":733},[720,10440,10441,10443,10445,10447,10449,10451,10453,10455,10457,10459,10461],{"class":722,"line":934},[720,10442,3161],{"class":733},[720,10444,720],{"class":737},[720,10446,742],{"class":741},[720,10448,745],{"class":733},[720,10450,748],{"class":733},[720,10452,10391],{"class":751},[720,10454,748],{"class":733},[720,10456,881],{"class":733},[720,10458,720],{"class":737},[720,10460,757],{"class":733},[720,10462,10463],{"class":760}," Products\n",[720,10465,10466,10468,10470],{"class":722,"line":953},[720,10467,3295],{"class":733},[720,10469,1094],{"class":737},[720,10471,769],{"class":733},[720,10473,10474,10476,10478,10480,10482,10484,10486,10488,10490,10492,10494,10496,10498],{"class":722,"line":983},[720,10475,1736],{"class":733},[720,10477,1094],{"class":737},[720,10479,1097],{"class":741},[720,10481,745],{"class":733},[720,10483,748],{"class":733},[720,10485,1104],{"class":751},[720,10487,748],{"class":733},[720,10489,742],{"class":741},[720,10491,745],{"class":733},[720,10493,748],{"class":733},[720,10495,10372],{"class":751},[720,10497,748],{"class":733},[720,10499,769],{"class":733},[720,10501,10502,10504,10506,10508,10510,10512,10514,10516,10518,10520,10522],{"class":722,"line":1011},[720,10503,3161],{"class":733},[720,10505,720],{"class":737},[720,10507,742],{"class":741},[720,10509,745],{"class":733},[720,10511,748],{"class":733},[720,10513,10391],{"class":751},[720,10515,748],{"class":733},[720,10517,881],{"class":733},[720,10519,720],{"class":737},[720,10521,757],{"class":733},[720,10523,10524],{"class":760}," Settings\n",[720,10526,10527,10529,10531],{"class":722,"line":1021},[720,10528,3295],{"class":733},[720,10530,1094],{"class":737},[720,10532,769],{"class":733},[720,10534,10535,10537,10539],{"class":722,"line":1367},[720,10536,1849],{"class":733},[720,10538,1069],{"class":737},[720,10540,769],{"class":733},[720,10542,10543,10545,10547],{"class":722,"line":1387},[720,10544,1510],{"class":733},[720,10546,738],{"class":737},[720,10548,769],{"class":733},[720,10550,10551,10553,10555],{"class":722,"line":1444},[720,10552,1014],{"class":733},[720,10554,1633],{"class":737},[720,10556,769],{"class":733},[720,10558,10559],{"class":722,"line":1489},[720,10560,833],{"emptyLinePlaceholder":832},[720,10562,10563],{"class":722,"line":1507},[720,10564,10565],{"class":726}," \u003C!-- Main area -->\n",[720,10567,10568,10570,10572,10574,10576,10578,10581,10583],{"class":722,"line":1517},[720,10569,865],{"class":733},[720,10571,738],{"class":737},[720,10573,742],{"class":741},[720,10575,745],{"class":733},[720,10577,748],{"class":733},[720,10579,10580],{"class":751},"flex-1 min-w-0 bg-gray-50",[720,10582,748],{"class":733},[720,10584,769],{"class":733},[720,10586,10587],{"class":722,"line":1526},[720,10588,10589],{"class":726}," \u003C!-- Header -->\n",[720,10591,10592,10594,10596,10598,10600,10602,10605,10607],{"class":722,"line":2017},[720,10593,956],{"class":733},[720,10595,2535],{"class":737},[720,10597,742],{"class":741},[720,10599,745],{"class":733},[720,10601,748],{"class":733},[720,10603,10604],{"class":751},"bg-white border-b px-6 py-4 flex items-center justify-between",[720,10606,748],{"class":733},[720,10608,769],{"class":733},[720,10610,10611,10613,10615,10617,10619,10621,10624,10626,10628,10630,10632,10634],{"class":722,"line":2026},[720,10612,1447],{"class":733},[720,10614,1992],{"class":737},[720,10616,742],{"class":741},[720,10618,745],{"class":733},[720,10620,748],{"class":733},[720,10622,10623],{"class":751},"text-xl font-bold text-gray-900",[720,10625,748],{"class":733},[720,10627,757],{"class":733},[720,10629,1764],{"class":760},[720,10631,764],{"class":733},[720,10633,1992],{"class":737},[720,10635,769],{"class":733},[720,10637,10638,10640,10642,10644,10646,10648,10651,10653],{"class":722,"line":3468},[720,10639,1447],{"class":733},[720,10641,738],{"class":737},[720,10643,742],{"class":741},[720,10645,745],{"class":733},[720,10647,748],{"class":733},[720,10649,10650],{"class":751},"flex items-center gap-4",[720,10652,748],{"class":733},[720,10654,769],{"class":733},[720,10656,10657,10659,10661,10663,10665,10667,10669,10671,10673,10676,10678,10680],{"class":722,"line":3486},[720,10658,1736],{"class":733},[720,10660,720],{"class":737},[720,10662,742],{"class":741},[720,10664,745],{"class":733},[720,10666,748],{"class":733},[720,10668,6704],{"class":751},[720,10670,748],{"class":733},[720,10672,757],{"class":733},[720,10674,10675],{"class":760},"Admin User",[720,10677,764],{"class":733},[720,10679,720],{"class":737},[720,10681,769],{"class":733},[720,10683,10684,10686,10688,10690,10692,10694,10697,10699,10701,10703],{"class":722,"line":3496},[720,10685,1736],{"class":733},[720,10687,738],{"class":737},[720,10689,742],{"class":741},[720,10691,745],{"class":733},[720,10693,748],{"class":733},[720,10695,10696],{"class":751},"w-8 h-8 bg-gray-300 rounded-full",[720,10698,748],{"class":733},[720,10700,881],{"class":733},[720,10702,738],{"class":737},[720,10704,769],{"class":733},[720,10706,10707,10709,10711],{"class":722,"line":3505},[720,10708,1849],{"class":733},[720,10710,738],{"class":737},[720,10712,769],{"class":733},[720,10714,10715,10717,10719],{"class":722,"line":3525},[720,10716,1510],{"class":733},[720,10718,2535],{"class":737},[720,10720,769],{"class":733},[720,10722,10723],{"class":722,"line":3553},[720,10724,833],{"emptyLinePlaceholder":832},[720,10726,10727],{"class":722,"line":3573},[720,10728,10729],{"class":726}," \u003C!-- Content grid -->\n",[720,10731,10732,10734,10736,10738,10740,10742,10744,10746],{"class":722,"line":3591},[720,10733,956],{"class":733},[720,10735,1885],{"class":737},[720,10737,742],{"class":741},[720,10739,745],{"class":733},[720,10741,748],{"class":733},[720,10743,1680],{"class":751},[720,10745,748],{"class":733},[720,10747,769],{"class":733},[720,10749,10750],{"class":722,"line":3609},[720,10751,10752],{"class":726}," \u003C!-- Stats cards -->\n",[720,10754,10755,10757,10759,10761,10763,10765,10768,10770],{"class":722,"line":3618},[720,10756,1447],{"class":733},[720,10758,738],{"class":737},[720,10760,742],{"class":741},[720,10762,745],{"class":733},[720,10764,748],{"class":733},[720,10766,10767],{"class":751},"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6",[720,10769,748],{"class":733},[720,10771,769],{"class":733},[720,10773,10774,10776,10778,10780,10782,10784,10787,10789],{"class":722,"line":3627},[720,10775,1736],{"class":733},[720,10777,738],{"class":737},[720,10779,742],{"class":741},[720,10781,745],{"class":733},[720,10783,748],{"class":733},[720,10785,10786],{"class":751},"bg-white rounded-xl p-5 shadow-sm",[720,10788,748],{"class":733},[720,10790,769],{"class":733},[720,10792,10793,10795,10797,10799,10801,10803,10806,10808,10810,10813,10815,10817],{"class":722,"line":3636},[720,10794,3161],{"class":733},[720,10796,431],{"class":737},[720,10798,742],{"class":741},[720,10800,745],{"class":733},[720,10802,748],{"class":733},[720,10804,10805],{"class":751},"text-sm text-gray-500 mb-1",[720,10807,748],{"class":733},[720,10809,757],{"class":733},[720,10811,10812],{"class":760},"Total Users",[720,10814,764],{"class":733},[720,10816,431],{"class":737},[720,10818,769],{"class":733},[720,10820,10821,10823,10825,10827,10829,10831,10834,10836,10838,10841,10843,10845],{"class":722,"line":3645},[720,10822,3161],{"class":733},[720,10824,431],{"class":737},[720,10826,742],{"class":741},[720,10828,745],{"class":733},[720,10830,748],{"class":733},[720,10832,10833],{"class":751},"text-2xl font-bold text-gray-900",[720,10835,748],{"class":733},[720,10837,757],{"class":733},[720,10839,10840],{"class":760},"12,543",[720,10842,764],{"class":733},[720,10844,431],{"class":737},[720,10846,769],{"class":733},[720,10848,10849,10851,10853,10855,10857,10859,10862,10864,10866,10869,10871,10873],{"class":722,"line":3654},[720,10850,3161],{"class":733},[720,10852,431],{"class":737},[720,10854,742],{"class":741},[720,10856,745],{"class":733},[720,10858,748],{"class":733},[720,10860,10861],{"class":751},"text-xs text-green-600 mt-1",[720,10863,748],{"class":733},[720,10865,757],{"class":733},[720,10867,10868],{"class":760},"+12.5% from last month",[720,10870,764],{"class":733},[720,10872,431],{"class":737},[720,10874,769],{"class":733},[720,10876,10877,10879,10881],{"class":722,"line":5038},[720,10878,3295],{"class":733},[720,10880,738],{"class":737},[720,10882,769],{"class":733},[720,10884,10885,10887,10889,10891,10893,10895,10897,10899],{"class":722,"line":5053},[720,10886,1736],{"class":733},[720,10888,738],{"class":737},[720,10890,742],{"class":741},[720,10892,745],{"class":733},[720,10894,748],{"class":733},[720,10896,10786],{"class":751},[720,10898,748],{"class":733},[720,10900,769],{"class":733},[720,10902,10903,10905,10907,10909,10911,10913,10915,10917,10919,10922,10924,10926],{"class":722,"line":5058},[720,10904,3161],{"class":733},[720,10906,431],{"class":737},[720,10908,742],{"class":741},[720,10910,745],{"class":733},[720,10912,748],{"class":733},[720,10914,10805],{"class":751},[720,10916,748],{"class":733},[720,10918,757],{"class":733},[720,10920,10921],{"class":760},"Revenue",[720,10923,764],{"class":733},[720,10925,431],{"class":737},[720,10927,769],{"class":733},[720,10929,10930,10932,10934,10936,10938,10940,10942,10944,10946,10949,10951,10953],{"class":722,"line":5067},[720,10931,3161],{"class":733},[720,10933,431],{"class":737},[720,10935,742],{"class":741},[720,10937,745],{"class":733},[720,10939,748],{"class":733},[720,10941,10833],{"class":751},[720,10943,748],{"class":733},[720,10945,757],{"class":733},[720,10947,10948],{"class":760},"$45,200",[720,10950,764],{"class":733},[720,10952,431],{"class":737},[720,10954,769],{"class":733},[720,10956,10957,10959,10961,10963,10965,10967,10969,10971,10973,10976,10978,10980],{"class":722,"line":5072},[720,10958,3161],{"class":733},[720,10960,431],{"class":737},[720,10962,742],{"class":741},[720,10964,745],{"class":733},[720,10966,748],{"class":733},[720,10968,10861],{"class":751},[720,10970,748],{"class":733},[720,10972,757],{"class":733},[720,10974,10975],{"class":760},"+8.2% from last month",[720,10977,764],{"class":733},[720,10979,431],{"class":737},[720,10981,769],{"class":733},[720,10983,10984,10986,10988],{"class":722,"line":5092},[720,10985,3295],{"class":733},[720,10987,738],{"class":737},[720,10989,769],{"class":733},[720,10991,10992,10994,10996,10998,11000,11002,11004,11006],{"class":722,"line":5111},[720,10993,1736],{"class":733},[720,10995,738],{"class":737},[720,10997,742],{"class":741},[720,10999,745],{"class":733},[720,11001,748],{"class":733},[720,11003,10786],{"class":751},[720,11005,748],{"class":733},[720,11007,769],{"class":733},[720,11009,11010,11012,11014,11016,11018,11020,11022,11024,11026,11029,11031,11033],{"class":722,"line":5117},[720,11011,3161],{"class":733},[720,11013,431],{"class":737},[720,11015,742],{"class":741},[720,11017,745],{"class":733},[720,11019,748],{"class":733},[720,11021,10805],{"class":751},[720,11023,748],{"class":733},[720,11025,757],{"class":733},[720,11027,11028],{"class":760},"Active Now",[720,11030,764],{"class":733},[720,11032,431],{"class":737},[720,11034,769],{"class":733},[720,11036,11037,11039,11041,11043,11045,11047,11049,11051,11053,11056,11058,11060],{"class":722,"line":5126},[720,11038,3161],{"class":733},[720,11040,431],{"class":737},[720,11042,742],{"class":741},[720,11044,745],{"class":733},[720,11046,748],{"class":733},[720,11048,10833],{"class":751},[720,11050,748],{"class":733},[720,11052,757],{"class":733},[720,11054,11055],{"class":760},"342",[720,11057,764],{"class":733},[720,11059,431],{"class":737},[720,11061,769],{"class":733},[720,11063,11064,11066,11068,11070,11072,11074,11077,11079,11081,11084,11086,11088],{"class":722,"line":5135},[720,11065,3161],{"class":733},[720,11067,431],{"class":737},[720,11069,742],{"class":741},[720,11071,745],{"class":733},[720,11073,748],{"class":733},[720,11075,11076],{"class":751},"text-xs text-red-600 mt-1",[720,11078,748],{"class":733},[720,11080,757],{"class":733},[720,11082,11083],{"class":760},"-3.1% from last hour",[720,11085,764],{"class":733},[720,11087,431],{"class":737},[720,11089,769],{"class":733},[720,11091,11092,11094,11096],{"class":722,"line":5140},[720,11093,3295],{"class":733},[720,11095,738],{"class":737},[720,11097,769],{"class":733},[720,11099,11100,11102,11104,11106,11108,11110,11112,11114],{"class":722,"line":5159},[720,11101,1736],{"class":733},[720,11103,738],{"class":737},[720,11105,742],{"class":741},[720,11107,745],{"class":733},[720,11109,748],{"class":733},[720,11111,10786],{"class":751},[720,11113,748],{"class":733},[720,11115,769],{"class":733},[720,11117,11118,11120,11122,11124,11126,11128,11130,11132,11134,11137,11139,11141],{"class":722,"line":5168},[720,11119,3161],{"class":733},[720,11121,431],{"class":737},[720,11123,742],{"class":741},[720,11125,745],{"class":733},[720,11127,748],{"class":733},[720,11129,10805],{"class":751},[720,11131,748],{"class":733},[720,11133,757],{"class":733},[720,11135,11136],{"class":760},"Conversion",[720,11138,764],{"class":733},[720,11140,431],{"class":737},[720,11142,769],{"class":733},[720,11144,11145,11147,11149,11151,11153,11155,11157,11159,11161,11164,11166,11168],{"class":722,"line":5187},[720,11146,3161],{"class":733},[720,11148,431],{"class":737},[720,11150,742],{"class":741},[720,11152,745],{"class":733},[720,11154,748],{"class":733},[720,11156,10833],{"class":751},[720,11158,748],{"class":733},[720,11160,757],{"class":733},[720,11162,11163],{"class":760},"3.24%",[720,11165,764],{"class":733},[720,11167,431],{"class":737},[720,11169,769],{"class":733},[720,11171,11172,11174,11176,11178,11180,11182,11184,11186,11188,11191,11193,11195],{"class":722,"line":5216},[720,11173,3161],{"class":733},[720,11175,431],{"class":737},[720,11177,742],{"class":741},[720,11179,745],{"class":733},[720,11181,748],{"class":733},[720,11183,10861],{"class":751},[720,11185,748],{"class":733},[720,11187,757],{"class":733},[720,11189,11190],{"class":760},"+0.4% from last week",[720,11192,764],{"class":733},[720,11194,431],{"class":737},[720,11196,769],{"class":733},[720,11198,11199,11201,11203],{"class":722,"line":5244},[720,11200,3295],{"class":733},[720,11202,738],{"class":737},[720,11204,769],{"class":733},[720,11206,11207,11209,11211],{"class":722,"line":5253},[720,11208,1849],{"class":733},[720,11210,738],{"class":737},[720,11212,769],{"class":733},[720,11214,11215],{"class":722,"line":5281},[720,11216,833],{"emptyLinePlaceholder":832},[720,11218,11219],{"class":722,"line":5300},[720,11220,11221],{"class":726}," \u003C!-- Charts & tables area -->\n",[720,11223,11224,11226,11228,11230,11232,11234,11237,11239],{"class":722,"line":5306},[720,11225,1447],{"class":733},[720,11227,738],{"class":737},[720,11229,742],{"class":741},[720,11231,745],{"class":733},[720,11233,748],{"class":733},[720,11235,11236],{"class":751},"grid grid-cols-1 lg:grid-cols-3 gap-4",[720,11238,748],{"class":733},[720,11240,769],{"class":733},[720,11242,11243],{"class":722,"line":5312},[720,11244,11245],{"class":726}," \u003C!-- Main chart — span 2 -->\n",[720,11247,11248,11250,11252,11254,11256,11258,11261,11263],{"class":722,"line":5321},[720,11249,1736],{"class":733},[720,11251,738],{"class":737},[720,11253,742],{"class":741},[720,11255,745],{"class":733},[720,11257,748],{"class":733},[720,11259,11260],{"class":751},"lg:col-span-2 bg-white rounded-xl p-5 shadow-sm",[720,11262,748],{"class":733},[720,11264,769],{"class":733},[720,11266,11267,11269,11271,11273,11275,11277,11280,11282,11284,11287,11289,11291],{"class":722,"line":5330},[720,11268,3161],{"class":733},[720,11270,706],{"class":737},[720,11272,742],{"class":741},[720,11274,745],{"class":733},[720,11276,748],{"class":733},[720,11278,11279],{"class":751},"font-bold text-gray-900 mb-4",[720,11281,748],{"class":733},[720,11283,757],{"class":733},[720,11285,11286],{"class":760},"Revenue Overview",[720,11288,764],{"class":733},[720,11290,706],{"class":737},[720,11292,769],{"class":733},[720,11294,11295,11297,11299,11301,11303,11305,11308,11310],{"class":722,"line":5350},[720,11296,3161],{"class":733},[720,11298,738],{"class":737},[720,11300,742],{"class":741},[720,11302,745],{"class":733},[720,11304,748],{"class":733},[720,11306,11307],{"class":751},"h-64 bg-gray-100 rounded flex items-center justify-center text-gray-400",[720,11309,748],{"class":733},[720,11311,769],{"class":733},[720,11313,11314],{"class":722,"line":5355},[720,11315,11316],{"class":760}," Chart Area (span 2 columns)\n",[720,11318,11319,11321,11323],{"class":722,"line":5364},[720,11320,3489],{"class":733},[720,11322,738],{"class":737},[720,11324,769],{"class":733},[720,11326,11327,11329,11331],{"class":722,"line":5373},[720,11328,3295],{"class":733},[720,11330,738],{"class":737},[720,11332,769],{"class":733},[720,11334,11335],{"class":722,"line":5382},[720,11336,11337],{"class":726}," \u003C!-- Side widget -->\n",[720,11339,11340,11342,11344,11346,11348,11350,11352,11354],{"class":722,"line":5391},[720,11341,1736],{"class":733},[720,11343,738],{"class":737},[720,11345,742],{"class":741},[720,11347,745],{"class":733},[720,11349,748],{"class":733},[720,11351,10786],{"class":751},[720,11353,748],{"class":733},[720,11355,769],{"class":733},[720,11357,11358,11360,11362,11364,11366,11368,11370,11372,11374,11377,11379,11381],{"class":722,"line":5400},[720,11359,3161],{"class":733},[720,11361,706],{"class":737},[720,11363,742],{"class":741},[720,11365,745],{"class":733},[720,11367,748],{"class":733},[720,11369,11279],{"class":751},[720,11371,748],{"class":733},[720,11373,757],{"class":733},[720,11375,11376],{"class":760},"Recent Activity",[720,11378,764],{"class":733},[720,11380,706],{"class":737},[720,11382,769],{"class":733},[720,11384,11386,11388,11390,11392,11394,11396,11399,11401],{"class":722,"line":11385},72,[720,11387,3161],{"class":733},[720,11389,738],{"class":737},[720,11391,742],{"class":741},[720,11393,745],{"class":733},[720,11395,748],{"class":733},[720,11397,11398],{"class":751},"space-y-3",[720,11400,748],{"class":733},[720,11402,769],{"class":733},[720,11404,11406,11408,11410,11412,11414,11416,11419,11421],{"class":722,"line":11405},73,[720,11407,3434],{"class":733},[720,11409,738],{"class":737},[720,11411,742],{"class":741},[720,11413,745],{"class":733},[720,11415,748],{"class":733},[720,11417,11418],{"class":751},"flex gap-3 text-sm",[720,11420,748],{"class":733},[720,11422,769],{"class":733},[720,11424,11426,11428,11430,11432,11434,11436,11439,11441,11443,11445],{"class":722,"line":11425},74,[720,11427,4798],{"class":733},[720,11429,738],{"class":737},[720,11431,742],{"class":741},[720,11433,745],{"class":733},[720,11435,748],{"class":733},[720,11437,11438],{"class":751},"w-2 h-2 bg-blue-500 rounded-full mt-1.5 flex-shrink-0",[720,11440,748],{"class":733},[720,11442,881],{"class":733},[720,11444,738],{"class":737},[720,11446,769],{"class":733},[720,11448,11450,11452,11454,11456,11458,11460,11462,11464,11466,11469,11471,11473],{"class":722,"line":11449},75,[720,11451,4798],{"class":733},[720,11453,431],{"class":737},[720,11455,742],{"class":741},[720,11457,745],{"class":733},[720,11459,748],{"class":733},[720,11461,6614],{"class":751},[720,11463,748],{"class":733},[720,11465,757],{"class":733},[720,11467,11468],{"class":760},"New user registered",[720,11470,764],{"class":733},[720,11472,431],{"class":737},[720,11474,769],{"class":733},[720,11476,11478,11480,11482],{"class":722,"line":11477},76,[720,11479,4854],{"class":733},[720,11481,738],{"class":737},[720,11483,769],{"class":733},[720,11485,11487,11489,11491,11493,11495,11497,11499,11501],{"class":722,"line":11486},77,[720,11488,3434],{"class":733},[720,11490,738],{"class":737},[720,11492,742],{"class":741},[720,11494,745],{"class":733},[720,11496,748],{"class":733},[720,11498,11418],{"class":751},[720,11500,748],{"class":733},[720,11502,769],{"class":733},[720,11504,11506,11508,11510,11512,11514,11516,11519,11521,11523,11525],{"class":722,"line":11505},78,[720,11507,4798],{"class":733},[720,11509,738],{"class":737},[720,11511,742],{"class":741},[720,11513,745],{"class":733},[720,11515,748],{"class":733},[720,11517,11518],{"class":751},"w-2 h-2 bg-green-500 rounded-full mt-1.5 flex-shrink-0",[720,11520,748],{"class":733},[720,11522,881],{"class":733},[720,11524,738],{"class":737},[720,11526,769],{"class":733},[720,11528,11530,11532,11534,11536,11538,11540,11542,11544,11546,11549,11551,11553],{"class":722,"line":11529},79,[720,11531,4798],{"class":733},[720,11533,431],{"class":737},[720,11535,742],{"class":741},[720,11537,745],{"class":733},[720,11539,748],{"class":733},[720,11541,6614],{"class":751},[720,11543,748],{"class":733},[720,11545,757],{"class":733},[720,11547,11548],{"class":760},"Order #1234 completed",[720,11550,764],{"class":733},[720,11552,431],{"class":737},[720,11554,769],{"class":733},[720,11556,11558,11560,11562],{"class":722,"line":11557},80,[720,11559,4854],{"class":733},[720,11561,738],{"class":737},[720,11563,769],{"class":733},[720,11565,11567,11569,11571,11573,11575,11577,11579,11581],{"class":722,"line":11566},81,[720,11568,3434],{"class":733},[720,11570,738],{"class":737},[720,11572,742],{"class":741},[720,11574,745],{"class":733},[720,11576,748],{"class":733},[720,11578,11418],{"class":751},[720,11580,748],{"class":733},[720,11582,769],{"class":733},[720,11584,11586,11588,11590,11592,11594,11596,11599,11601,11603,11605],{"class":722,"line":11585},82,[720,11587,4798],{"class":733},[720,11589,738],{"class":737},[720,11591,742],{"class":741},[720,11593,745],{"class":733},[720,11595,748],{"class":733},[720,11597,11598],{"class":751},"w-2 h-2 bg-orange-500 rounded-full mt-1.5 flex-shrink-0",[720,11600,748],{"class":733},[720,11602,881],{"class":733},[720,11604,738],{"class":737},[720,11606,769],{"class":733},[720,11608,11610,11612,11614,11616,11618,11620,11622,11624,11626,11629,11631,11633],{"class":722,"line":11609},83,[720,11611,4798],{"class":733},[720,11613,431],{"class":737},[720,11615,742],{"class":741},[720,11617,745],{"class":733},[720,11619,748],{"class":733},[720,11621,6614],{"class":751},[720,11623,748],{"class":733},[720,11625,757],{"class":733},[720,11627,11628],{"class":760},"Payment pending",[720,11630,764],{"class":733},[720,11632,431],{"class":737},[720,11634,769],{"class":733},[720,11636,11638,11640,11642],{"class":722,"line":11637},84,[720,11639,4854],{"class":733},[720,11641,738],{"class":737},[720,11643,769],{"class":733},[720,11645,11647,11649,11651],{"class":722,"line":11646},85,[720,11648,3489],{"class":733},[720,11650,738],{"class":737},[720,11652,769],{"class":733},[720,11654,11656,11658,11660],{"class":722,"line":11655},86,[720,11657,3295],{"class":733},[720,11659,738],{"class":737},[720,11661,769],{"class":733},[720,11663,11665,11667,11669],{"class":722,"line":11664},87,[720,11666,1849],{"class":733},[720,11668,738],{"class":737},[720,11670,769],{"class":733},[720,11672,11674,11676,11678],{"class":722,"line":11673},88,[720,11675,1510],{"class":733},[720,11677,1885],{"class":737},[720,11679,769],{"class":733},[720,11681,11683,11685,11687],{"class":722,"line":11682},89,[720,11684,1014],{"class":733},[720,11686,738],{"class":737},[720,11688,769],{"class":733},[720,11690,11692,11694,11696],{"class":722,"line":11691},90,[720,11693,764],{"class":733},[720,11695,738],{"class":737},[720,11697,769],{"class":733},[435,11699,11700,11703,11704,11707,11708,11711],{"color":1030,"icon":1031},[443,11701,11702],{},"Dashboard pattern:"," Flex sidebar + flex-1 main. Stats cards dùng ",[458,11705,11706],{},"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"," responsive. Charts dùng ",[458,11709,11710],{},"lg:col-span-2"," cho element chiếm 2\u002F3 grid.",[488,11713],{},[427,11715,11717],{"id":11716},"_6-spacing","6. Spacing",[706,11719,11721],{"id":11720},"padding","Padding",[502,11723,11724,11732],{},[505,11725,11726],{},[508,11727,11728,11730],{},[511,11729,513],{},[511,11731,516],{},[521,11733,11734,11747,11771],{},[508,11735,11736,11742],{},[526,11737,11738,11741],{},[458,11739,11740],{},"p-*"," (0..96, px)",[526,11743,11744,11746],{},[458,11745,11720],{}," 4 phía",[508,11748,11749,11757],{},[526,11750,11751,465,11754],{},[458,11752,11753],{},"px-*",[458,11755,11756],{},"py-*",[526,11758,11759,8133,11762,465,11765,8133,11768],{},[458,11760,11761],{},"padding-left",[458,11763,11764],{},"right",[458,11766,11767],{},"padding-top",[458,11769,11770],{},"bottom",[508,11772,11773,11787],{},[526,11774,11775,465,11778,465,11781,465,11784],{},[458,11776,11777],{},"pt-*",[458,11779,11780],{},"pr-*",[458,11782,11783],{},"pb-*",[458,11785,11786],{},"pl-*",[526,11788,11789,5531,11791,5531,11793,5531,11795],{},[458,11790,11767],{},[458,11792,11764],{},[458,11794,11770],{},[458,11796,11797],{},"left",[706,11799,11801],{"id":11800},"margin","Margin",[502,11803,11804,11812],{},[505,11805,11806],{},[508,11807,11808,11810],{},[511,11809,513],{},[511,11811,516],{},[521,11813,11814,11826,11848],{},[508,11815,11816,11822],{},[526,11817,11818,11821],{},[458,11819,11820],{},"m-*"," (0..96, px, auto)",[526,11823,11824,11746],{},[458,11825,11800],{},[508,11827,11828,11836],{},[526,11829,11830,465,11833],{},[458,11831,11832],{},"mx-*",[458,11834,11835],{},"my-*",[526,11837,11838,8133,11841,465,11843,8133,11846],{},[458,11839,11840],{},"margin-left",[458,11842,11764],{},[458,11844,11845],{},"top",[458,11847,11770],{},[508,11849,11850,11864],{},[526,11851,11852,465,11855,465,11858,465,11861],{},[458,11853,11854],{},"mt-*",[458,11856,11857],{},"mr-*",[458,11859,11860],{},"mb-*",[458,11862,11863],{},"ml-*",[526,11865,11866,5531,11869,5531,11871,5531,11873],{},[458,11867,11868],{},"margin-top",[458,11870,11764],{},[458,11872,11770],{},[458,11874,11797],{},[706,11876,11878],{"id":11877},"logical-properties-v42-new","Logical Properties (v4.2 NEW)",[431,11880,11881],{},"Hỗ trợ layout đa ngôn ngữ (LTR\u002FRTL) — thay vì physical directions:",[502,11883,11884,11894],{},[505,11885,11886],{},[508,11887,11888,11890,11892],{},[511,11889,513],{},[511,11891,516],{},[511,11893,519],{},[521,11895,11896,11917,11938,11959,11980,11993],{},[508,11897,11898,11906,11914],{},[526,11899,11900,465,11903],{},[458,11901,11902],{},"pbs-*",[458,11904,11905],{},"mbs-*",[526,11907,11908,465,11911],{},[458,11909,11910],{},"padding-block-start",[458,11912,11913],{},"margin-block-start",[526,11915,11916],{},"\"Top\" logic",[508,11918,11919,11927,11935],{},[526,11920,11921,465,11924],{},[458,11922,11923],{},"pbe-*",[458,11925,11926],{},"mbe-*",[526,11928,11929,465,11932],{},[458,11930,11931],{},"padding-block-end",[458,11933,11934],{},"margin-block-end",[526,11936,11937],{},"\"Bottom\" logic",[508,11939,11940,11948,11956],{},[526,11941,11942,465,11945],{},[458,11943,11944],{},"pis-*",[458,11946,11947],{},"mis-*",[526,11949,11950,465,11953],{},[458,11951,11952],{},"padding-inline-start",[458,11954,11955],{},"margin-inline-start",[526,11957,11958],{},"\"Left\" logic (start of text direction)",[508,11960,11961,11969,11977],{},[526,11962,11963,465,11966],{},[458,11964,11965],{},"pie-*",[458,11967,11968],{},"mie-*",[526,11970,11971,465,11974],{},[458,11972,11973],{},"padding-inline-end",[458,11975,11976],{},"margin-inline-end",[526,11978,11979],{},"\"Right\" logic (end of text direction)",[508,11981,11982,11987,11990],{},[526,11983,11984],{},[458,11985,11986],{},"inline-*",[526,11988,11989],{},"Logical inline margin\u002Fpadding",[526,11991,11992],{},"Shorthand",[508,11994,11995,12000,12003],{},[526,11996,11997],{},[458,11998,11999],{},"block-*",[526,12001,12002],{},"Logical block margin\u002Fpadding",[526,12004,11992],{},[711,12006,12008],{"className":713,"code":12007,"language":715,"meta":716,"style":716},"\u003C!-- Logical properties: tự động đúng cho mọi ngôn ngữ -->\n\u003Cdiv dir=\"ltr\" class=\"bg-gray-100 p-4 rounded mb-4\">\n \u003Cp class=\"mis-4 text-gray-700\">LTR: mis (margin-inline-start) = margin left\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cdiv dir=\"rtl\" class=\"bg-gray-100 p-4 rounded\">\n \u003Cp class=\"mis-4 text-gray-700\">RTL: mis (margin-inline-start) = margin right\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[458,12009,12010,12015,12046,12074,12082,12112,12139],{"__ignoreMap":716},[720,12011,12012],{"class":722,"line":723},[720,12013,12014],{"class":726},"\u003C!-- Logical properties: tự động đúng cho mọi ngôn ngữ -->\n",[720,12016,12017,12019,12021,12024,12026,12028,12031,12033,12035,12037,12039,12042,12044],{"class":722,"line":730},[720,12018,734],{"class":733},[720,12020,738],{"class":737},[720,12022,12023],{"class":741}," dir",[720,12025,745],{"class":733},[720,12027,748],{"class":733},[720,12029,12030],{"class":751},"ltr",[720,12032,748],{"class":733},[720,12034,742],{"class":741},[720,12036,745],{"class":733},[720,12038,748],{"class":733},[720,12040,12041],{"class":751},"bg-gray-100 p-4 rounded mb-4",[720,12043,748],{"class":733},[720,12045,769],{"class":733},[720,12047,12048,12050,12052,12054,12056,12058,12061,12063,12065,12068,12070,12072],{"class":722,"line":772},[720,12049,865],{"class":733},[720,12051,431],{"class":737},[720,12053,742],{"class":741},[720,12055,745],{"class":733},[720,12057,748],{"class":733},[720,12059,12060],{"class":751},"mis-4 text-gray-700",[720,12062,748],{"class":733},[720,12064,757],{"class":733},[720,12066,12067],{"class":760},"LTR: mis (margin-inline-start) = margin left",[720,12069,764],{"class":733},[720,12071,431],{"class":737},[720,12073,769],{"class":733},[720,12075,12076,12078,12080],{"class":722,"line":801},[720,12077,764],{"class":733},[720,12079,738],{"class":737},[720,12081,769],{"class":733},[720,12083,12084,12086,12088,12090,12092,12094,12097,12099,12101,12103,12105,12108,12110],{"class":722,"line":829},[720,12085,734],{"class":733},[720,12087,738],{"class":737},[720,12089,12023],{"class":741},[720,12091,745],{"class":733},[720,12093,748],{"class":733},[720,12095,12096],{"class":751},"rtl",[720,12098,748],{"class":733},[720,12100,742],{"class":741},[720,12102,745],{"class":733},[720,12104,748],{"class":733},[720,12106,12107],{"class":751},"bg-gray-100 p-4 rounded",[720,12109,748],{"class":733},[720,12111,769],{"class":733},[720,12113,12114,12116,12118,12120,12122,12124,12126,12128,12130,12133,12135,12137],{"class":722,"line":836},[720,12115,865],{"class":733},[720,12117,431],{"class":737},[720,12119,742],{"class":741},[720,12121,745],{"class":733},[720,12123,748],{"class":733},[720,12125,12060],{"class":751},[720,12127,748],{"class":733},[720,12129,757],{"class":733},[720,12131,12132],{"class":760},"RTL: mis (margin-inline-start) = margin right",[720,12134,764],{"class":733},[720,12136,431],{"class":737},[720,12138,769],{"class":733},[720,12140,12141,12143,12145],{"class":722,"line":842},[720,12142,764],{"class":733},[720,12144,738],{"class":737},[720,12146,769],{"class":733},[706,12148,12150],{"id":12149},"space-between","Space Between",[502,12152,12153,12161],{},[505,12154,12155],{},[508,12156,12157,12159],{},[511,12158,513],{},[511,12160,516],{},[521,12162,12163,12176,12187],{},[508,12164,12165,12171],{},[526,12166,12167,12170],{},[458,12168,12169],{},"space-x-*"," (> 0)",[526,12172,12173,12175],{},[458,12174,11840],{}," cho mỗi child trừ child đầu",[508,12177,12178,12183],{},[526,12179,12180,12170],{},[458,12181,12182],{},"space-y-*",[526,12184,12185,12175],{},[458,12186,11868],{},[508,12188,12189,12197],{},[526,12190,12191,465,12194],{},[458,12192,12193],{},"space-x-reverse",[458,12195,12196],{},"space-y-reverse",[526,12198,12199],{},"Đảo chiều space",[711,12201,12203],{"className":713,"code":12202,"language":715,"meta":716,"style":716},"\u003C!-- Dùng space-y cho vertical rhythm -->\n\u003Cdiv class=\"space-y-4\">\n \u003Cp class=\"bg-blue-100 p-3 rounded\">Paragraph 1\u003C\u002Fp>\n \u003Cp class=\"bg-blue-100 p-3 rounded\">Paragraph 2\u003C\u002Fp>\n \u003Cp class=\"bg-blue-100 p-3 rounded\">Paragraph 3\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003C!-- Dùng gap thay thế (khuyến nghị dùng flex\u002Fgrid) -->\n\u003Cdiv class=\"flex gap-4\">\n \u003Cbutton class=\"bg-gray-200 px-4 py-2 rounded\">Button 1\u003C\u002Fbutton>\n \u003Cbutton class=\"bg-gray-200 px-4 py-2 rounded\">Button 2\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[458,12204,12205,12210,12228,12256,12283,12310,12318,12322,12327,12345,12373,12400],{"__ignoreMap":716},[720,12206,12207],{"class":722,"line":723},[720,12208,12209],{"class":726},"\u003C!-- Dùng space-y cho vertical rhythm -->\n",[720,12211,12212,12214,12216,12218,12220,12222,12224,12226],{"class":722,"line":730},[720,12213,734],{"class":733},[720,12215,738],{"class":737},[720,12217,742],{"class":741},[720,12219,745],{"class":733},[720,12221,748],{"class":733},[720,12223,2852],{"class":751},[720,12225,748],{"class":733},[720,12227,769],{"class":733},[720,12229,12230,12232,12234,12236,12238,12240,12243,12245,12247,12250,12252,12254],{"class":722,"line":772},[720,12231,865],{"class":733},[720,12233,431],{"class":737},[720,12235,742],{"class":741},[720,12237,745],{"class":733},[720,12239,748],{"class":733},[720,12241,12242],{"class":751},"bg-blue-100 p-3 rounded",[720,12244,748],{"class":733},[720,12246,757],{"class":733},[720,12248,12249],{"class":760},"Paragraph 1",[720,12251,764],{"class":733},[720,12253,431],{"class":737},[720,12255,769],{"class":733},[720,12257,12258,12260,12262,12264,12266,12268,12270,12272,12274,12277,12279,12281],{"class":722,"line":801},[720,12259,865],{"class":733},[720,12261,431],{"class":737},[720,12263,742],{"class":741},[720,12265,745],{"class":733},[720,12267,748],{"class":733},[720,12269,12242],{"class":751},[720,12271,748],{"class":733},[720,12273,757],{"class":733},[720,12275,12276],{"class":760},"Paragraph 2",[720,12278,764],{"class":733},[720,12280,431],{"class":737},[720,12282,769],{"class":733},[720,12284,12285,12287,12289,12291,12293,12295,12297,12299,12301,12304,12306,12308],{"class":722,"line":829},[720,12286,865],{"class":733},[720,12288,431],{"class":737},[720,12290,742],{"class":741},[720,12292,745],{"class":733},[720,12294,748],{"class":733},[720,12296,12242],{"class":751},[720,12298,748],{"class":733},[720,12300,757],{"class":733},[720,12302,12303],{"class":760},"Paragraph 3",[720,12305,764],{"class":733},[720,12307,431],{"class":737},[720,12309,769],{"class":733},[720,12311,12312,12314,12316],{"class":722,"line":836},[720,12313,764],{"class":733},[720,12315,738],{"class":737},[720,12317,769],{"class":733},[720,12319,12320],{"class":722,"line":842},[720,12321,833],{"emptyLinePlaceholder":832},[720,12323,12324],{"class":722,"line":862},[720,12325,12326],{"class":726},"\u003C!-- Dùng gap thay thế (khuyến nghị dùng flex\u002Fgrid) -->\n",[720,12328,12329,12331,12333,12335,12337,12339,12341,12343],{"class":722,"line":888},[720,12330,734],{"class":733},[720,12332,738],{"class":737},[720,12334,742],{"class":741},[720,12336,745],{"class":733},[720,12338,748],{"class":733},[720,12340,2610],{"class":751},[720,12342,748],{"class":733},[720,12344,769],{"class":733},[720,12346,12347,12349,12351,12353,12355,12357,12360,12362,12364,12367,12369,12371],{"class":722,"line":894},[720,12348,865],{"class":733},[720,12350,1329],{"class":737},[720,12352,742],{"class":741},[720,12354,745],{"class":733},[720,12356,748],{"class":733},[720,12358,12359],{"class":751},"bg-gray-200 px-4 py-2 rounded",[720,12361,748],{"class":733},[720,12363,757],{"class":733},[720,12365,12366],{"class":760},"Button 1",[720,12368,764],{"class":733},[720,12370,1329],{"class":737},[720,12372,769],{"class":733},[720,12374,12375,12377,12379,12381,12383,12385,12387,12389,12391,12394,12396,12398],{"class":722,"line":903},[720,12376,865],{"class":733},[720,12378,1329],{"class":737},[720,12380,742],{"class":741},[720,12382,745],{"class":733},[720,12384,748],{"class":733},[720,12386,12359],{"class":751},[720,12388,748],{"class":733},[720,12390,757],{"class":733},[720,12392,12393],{"class":760},"Button 2",[720,12395,764],{"class":733},[720,12397,1329],{"class":737},[720,12399,769],{"class":733},[720,12401,12402,12404,12406],{"class":722,"line":908},[720,12403,764],{"class":733},[720,12405,738],{"class":737},[720,12407,769],{"class":733},[706,12409,12411],{"id":12410},"negative-margins-auto-margins","Negative Margins & Auto Margins",[711,12413,12415],{"className":713,"code":12414,"language":715,"meta":716,"style":716},"\u003C!-- Auto margin: đẩy element về phía đối diện -->\n\u003Cdiv class=\"flex bg-gray-200 p-2 rounded\">\n \u003Cspan>Left\u003C\u002Fspan>\n \u003Cspan class=\"ml-auto bg-blue-200 px-2 rounded\">Right (ml-auto)\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\n\u003C!-- Negative margin: kéo element ra ngoài container -->\n\u003Cdiv class=\"bg-gray-100 p-8\">\n \u003Cdiv class=\"bg-blue-500 text-white p-4 -mx-4 rounded\">\n Full-width inside padded container (-mx-4)\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,12416,12417,12422,12441,12458,12486,12494,12498,12503,12522,12541,12546,12554],{"__ignoreMap":716},[720,12418,12419],{"class":722,"line":723},[720,12420,12421],{"class":726},"\u003C!-- Auto margin: đẩy element về phía đối diện -->\n",[720,12423,12424,12426,12428,12430,12432,12434,12437,12439],{"class":722,"line":730},[720,12425,734],{"class":733},[720,12427,738],{"class":737},[720,12429,742],{"class":741},[720,12431,745],{"class":733},[720,12433,748],{"class":733},[720,12435,12436],{"class":751},"flex bg-gray-200 p-2 rounded",[720,12438,748],{"class":733},[720,12440,769],{"class":733},[720,12442,12443,12445,12447,12449,12452,12454,12456],{"class":722,"line":772},[720,12444,865],{"class":733},[720,12446,720],{"class":737},[720,12448,757],{"class":733},[720,12450,12451],{"class":760},"Left",[720,12453,764],{"class":733},[720,12455,720],{"class":737},[720,12457,769],{"class":733},[720,12459,12460,12462,12464,12466,12468,12470,12473,12475,12477,12480,12482,12484],{"class":722,"line":801},[720,12461,865],{"class":733},[720,12463,720],{"class":737},[720,12465,742],{"class":741},[720,12467,745],{"class":733},[720,12469,748],{"class":733},[720,12471,12472],{"class":751},"ml-auto bg-blue-200 px-2 rounded",[720,12474,748],{"class":733},[720,12476,757],{"class":733},[720,12478,12479],{"class":760},"Right (ml-auto)",[720,12481,764],{"class":733},[720,12483,720],{"class":737},[720,12485,769],{"class":733},[720,12487,12488,12490,12492],{"class":722,"line":829},[720,12489,764],{"class":733},[720,12491,738],{"class":737},[720,12493,769],{"class":733},[720,12495,12496],{"class":722,"line":836},[720,12497,833],{"emptyLinePlaceholder":832},[720,12499,12500],{"class":722,"line":842},[720,12501,12502],{"class":726},"\u003C!-- Negative margin: kéo element ra ngoài container -->\n",[720,12504,12505,12507,12509,12511,12513,12515,12518,12520],{"class":722,"line":862},[720,12506,734],{"class":733},[720,12508,738],{"class":737},[720,12510,742],{"class":741},[720,12512,745],{"class":733},[720,12514,748],{"class":733},[720,12516,12517],{"class":751},"bg-gray-100 p-8",[720,12519,748],{"class":733},[720,12521,769],{"class":733},[720,12523,12524,12526,12528,12530,12532,12534,12537,12539],{"class":722,"line":888},[720,12525,865],{"class":733},[720,12527,738],{"class":737},[720,12529,742],{"class":741},[720,12531,745],{"class":733},[720,12533,748],{"class":733},[720,12535,12536],{"class":751},"bg-blue-500 text-white p-4 -mx-4 rounded",[720,12538,748],{"class":733},[720,12540,769],{"class":733},[720,12542,12543],{"class":722,"line":894},[720,12544,12545],{"class":760}," Full-width inside padded container (-mx-4)\n",[720,12547,12548,12550,12552],{"class":722,"line":903},[720,12549,1014],{"class":733},[720,12551,738],{"class":737},[720,12553,769],{"class":733},[720,12555,12556,12558,12560],{"class":722,"line":908},[720,12557,764],{"class":733},[720,12559,738],{"class":737},[720,12561,769],{"class":733},[435,12563,441,12564,446,12572,12574,12575,12577,12578,12581,12582,12584,12585,12587],{"color":437,"icon":438},[443,12565,12566,12568,12569,12571],{},[458,12567,12182],{}," vs ",[458,12570,5857],{},":",[458,12573,12182],{}," thêm margin-top cho child (chỉ hoạt động khi children là block\u002Finline). ",[458,12576,5857],{}," dùng với flex\u002Fgrid container. ",[443,12579,12580],{},"Khuyến nghị:"," luôn dùng ",[458,12583,5863],{}," cho flex\u002Fgrid, ",[458,12586,12182],{}," chỉ khi children không phải flex\u002Fgrid item.",[706,12589,12591],{"id":12590},"bài-tập-14-spacing-system-cho-blog-article-consistent-vertical-rhythm","Bài tập 14: Spacing system cho blog article (consistent vertical rhythm)",[431,12593,12594,12596],{},[443,12595,1056],{}," Bài viết blog với khoảng cách dọc nhất quán giữa các phần tử: heading, paragraph, image, blockquote, list.",[711,12598,12600],{"className":713,"code":12599,"language":715,"meta":716,"style":716},"\u003Carticle class=\"max-w-2xl mx-auto px-6 py-12 space-y-8\">\n \u003C!-- Title section -->\n \u003Cheader class=\"space-y-3\">\n \u003Cdiv class=\"flex gap-2\">\n \u003Cspan class=\"text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded-full\">Technology\u003C\u002Fspan>\n \u003Cspan class=\"text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded-full\">CSS\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Ch1 class=\"text-3xl font-bold text-gray-900 leading-tight\">\n Building Consistent Spacing Systems with Tailwind CSS\n \u003C\u002Fh1>\n \u003Cdiv class=\"flex items-center gap-3 text-sm text-gray-500\">\n \u003Cdiv class=\"w-8 h-8 bg-gray-300 rounded-full\">\u003C\u002Fdiv>\n \u003Cspan>John Doe\u003C\u002Fspan>\n \u003Cspan>·\u003C\u002Fspan>\n \u003Cspan>July 8, 2026\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fheader>\n\n \u003C!-- Intro paragraph -->\n \u003Cp class=\"text-lg text-gray-700 leading-relaxed\">\n A well-designed spacing system is the invisible foundation of every great UI.\n In this article, we'll explore how Tailwind CSS v4 helps you maintain consistent\n vertical rhythm across your entire layout.\n \u003C\u002Fp>\n\n \u003C!-- Image placeholder -->\n \u003Cfigure class=\"space-y-2\">\n \u003Cdiv class=\"aspect-video bg-gradient-to-br from-slate-400 to-slate-600 rounded-xl flex items-center justify-center text-white text-lg\">\n Featured Image\n \u003C\u002Fdiv>\n \u003Cfigcaption class=\"text-sm text-gray-500 text-center italic\">\n Figure 1: Consistent spacing makes content more readable.\n \u003C\u002Ffigcaption>\n \u003C\u002Ffigure>\n\n \u003C!-- Section heading + paragraph -->\n \u003Csection class=\"space-y-4\">\n \u003Ch2 class=\"text-2xl font-bold text-gray-900\">Why Spacing Matters\u003C\u002Fh2>\n \u003Cp class=\"text-gray-700 leading-relaxed\">\n Vertical rhythm creates a predictable reading experience. When headings,\n paragraphs, and images all follow the same spacing scale, users can scan\n content faster and focus on what matters.\n \u003C\u002Fp>\n \u003Cp class=\"text-gray-700 leading-relaxed\">\n Tailwind's spacing scale (based on 4px increments) ensures every element\n aligns to the same baseline grid, eliminating uneven gaps.\n \u003C\u002Fp>\n \u003C\u002Fsection>\n\n \u003C!-- Blockquote -->\n \u003Cblockquote class=\"border-l-4 border-blue-500 pl-4 py-2 bg-blue-50 rounded-r-lg\">\n \u003Cp class=\"text-gray-700 italic\">\n \"Design is not just what it looks like and feels like. Design is how it works.\"\n \u003C\u002Fp>\n \u003Cfooter class=\"text-sm text-gray-500 mt-2\">— Steve Jobs\u003C\u002Ffooter>\n \u003C\u002Fblockquote>\n\n \u003C!-- Bullet list -->\n \u003Csection class=\"space-y-3\">\n \u003Ch3 class=\"text-xl font-bold text-gray-900\">Key Principles\u003C\u002Fh3>\n \u003Cul class=\"space-y-2 list-disc list-inside text-gray-700\">\n \u003Cli>Use multiples of 4px (Tailwind's default scale)\u003C\u002Fli>\n \u003Cli>Maintain consistent spacing between same-level elements\u003C\u002Fli>\n \u003Cli>Increase spacing before new sections\u003C\u002Fli>\n \u003Cli>Keep line-height proportional to font-size\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fsection>\n\n \u003C!-- Conclusion -->\n \u003Chr class=\"border-gray-200\">\n \u003Cp class=\"text-gray-700 leading-relaxed\">\n A consistent spacing system is one of the easiest ways to make your designs\n look polished and professional. Tailwind CSS v4 makes it effortless.\n \u003C\u002Fp>\n\u003C\u002Farticle>\n",[458,12601,12602,12621,12626,12644,12663,12691,12718,12726,12745,12750,12758,12777,12799,12816,12833,12850,12858,12866,12870,12875,12894,12899,12904,12909,12917,12921,12926,12945,12964,12969,12977,12997,13002,13010,13018,13022,13027,13046,13073,13092,13097,13102,13107,13115,13133,13138,13143,13151,13159,13163,13168,13187,13206,13211,13219,13247,13255,13259,13264,13282,13309,13328,13345,13362,13379,13396,13404,13412,13416,13421,13440,13458,13463,13468,13476],{"__ignoreMap":716},[720,12603,12604,12606,12608,12610,12612,12614,12617,12619],{"class":722,"line":723},[720,12605,734],{"class":733},[720,12607,3046],{"class":737},[720,12609,742],{"class":741},[720,12611,745],{"class":733},[720,12613,748],{"class":733},[720,12615,12616],{"class":751},"max-w-2xl mx-auto px-6 py-12 space-y-8",[720,12618,748],{"class":733},[720,12620,769],{"class":733},[720,12622,12623],{"class":722,"line":730},[720,12624,12625],{"class":726}," \u003C!-- Title section -->\n",[720,12627,12628,12630,12632,12634,12636,12638,12640,12642],{"class":722,"line":772},[720,12629,865],{"class":733},[720,12631,2535],{"class":737},[720,12633,742],{"class":741},[720,12635,745],{"class":733},[720,12637,748],{"class":733},[720,12639,11398],{"class":751},[720,12641,748],{"class":733},[720,12643,769],{"class":733},[720,12645,12646,12648,12650,12652,12654,12656,12659,12661],{"class":722,"line":801},[720,12647,956],{"class":733},[720,12649,738],{"class":737},[720,12651,742],{"class":741},[720,12653,745],{"class":733},[720,12655,748],{"class":733},[720,12657,12658],{"class":751},"flex gap-2",[720,12660,748],{"class":733},[720,12662,769],{"class":733},[720,12664,12665,12667,12669,12671,12673,12675,12678,12680,12682,12685,12687,12689],{"class":722,"line":829},[720,12666,1447],{"class":733},[720,12668,720],{"class":737},[720,12670,742],{"class":741},[720,12672,745],{"class":733},[720,12674,748],{"class":733},[720,12676,12677],{"class":751},"text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded-full",[720,12679,748],{"class":733},[720,12681,757],{"class":733},[720,12683,12684],{"class":760},"Technology",[720,12686,764],{"class":733},[720,12688,720],{"class":737},[720,12690,769],{"class":733},[720,12692,12693,12695,12697,12699,12701,12703,12706,12708,12710,12712,12714,12716],{"class":722,"line":836},[720,12694,1447],{"class":733},[720,12696,720],{"class":737},[720,12698,742],{"class":741},[720,12700,745],{"class":733},[720,12702,748],{"class":733},[720,12704,12705],{"class":751},"text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded-full",[720,12707,748],{"class":733},[720,12709,757],{"class":733},[720,12711,516],{"class":760},[720,12713,764],{"class":733},[720,12715,720],{"class":737},[720,12717,769],{"class":733},[720,12719,12720,12722,12724],{"class":722,"line":842},[720,12721,1510],{"class":733},[720,12723,738],{"class":737},[720,12725,769],{"class":733},[720,12727,12728,12730,12732,12734,12736,12738,12741,12743],{"class":722,"line":862},[720,12729,956],{"class":733},[720,12731,1992],{"class":737},[720,12733,742],{"class":741},[720,12735,745],{"class":733},[720,12737,748],{"class":733},[720,12739,12740],{"class":751},"text-3xl font-bold text-gray-900 leading-tight",[720,12742,748],{"class":733},[720,12744,769],{"class":733},[720,12746,12747],{"class":722,"line":888},[720,12748,12749],{"class":760}," Building Consistent Spacing Systems with Tailwind CSS\n",[720,12751,12752,12754,12756],{"class":722,"line":894},[720,12753,1510],{"class":733},[720,12755,1992],{"class":737},[720,12757,769],{"class":733},[720,12759,12760,12762,12764,12766,12768,12770,12773,12775],{"class":722,"line":903},[720,12761,956],{"class":733},[720,12763,738],{"class":737},[720,12765,742],{"class":741},[720,12767,745],{"class":733},[720,12769,748],{"class":733},[720,12771,12772],{"class":751},"flex items-center gap-3 text-sm text-gray-500",[720,12774,748],{"class":733},[720,12776,769],{"class":733},[720,12778,12779,12781,12783,12785,12787,12789,12791,12793,12795,12797],{"class":722,"line":908},[720,12780,1447],{"class":733},[720,12782,738],{"class":737},[720,12784,742],{"class":741},[720,12786,745],{"class":733},[720,12788,748],{"class":733},[720,12790,10696],{"class":751},[720,12792,748],{"class":733},[720,12794,881],{"class":733},[720,12796,738],{"class":737},[720,12798,769],{"class":733},[720,12800,12801,12803,12805,12807,12810,12812,12814],{"class":722,"line":914},[720,12802,1447],{"class":733},[720,12804,720],{"class":737},[720,12806,757],{"class":733},[720,12808,12809],{"class":760},"John Doe",[720,12811,764],{"class":733},[720,12813,720],{"class":737},[720,12815,769],{"class":733},[720,12817,12818,12820,12822,12824,12827,12829,12831],{"class":722,"line":934},[720,12819,1447],{"class":733},[720,12821,720],{"class":737},[720,12823,757],{"class":733},[720,12825,12826],{"class":760},"·",[720,12828,764],{"class":733},[720,12830,720],{"class":737},[720,12832,769],{"class":733},[720,12834,12835,12837,12839,12841,12844,12846,12848],{"class":722,"line":953},[720,12836,1447],{"class":733},[720,12838,720],{"class":737},[720,12840,757],{"class":733},[720,12842,12843],{"class":760},"July 8, 2026",[720,12845,764],{"class":733},[720,12847,720],{"class":737},[720,12849,769],{"class":733},[720,12851,12852,12854,12856],{"class":722,"line":983},[720,12853,1510],{"class":733},[720,12855,738],{"class":737},[720,12857,769],{"class":733},[720,12859,12860,12862,12864],{"class":722,"line":1011},[720,12861,1014],{"class":733},[720,12863,2535],{"class":737},[720,12865,769],{"class":733},[720,12867,12868],{"class":722,"line":1021},[720,12869,833],{"emptyLinePlaceholder":832},[720,12871,12872],{"class":722,"line":1367},[720,12873,12874],{"class":726}," \u003C!-- Intro paragraph -->\n",[720,12876,12877,12879,12881,12883,12885,12887,12890,12892],{"class":722,"line":1387},[720,12878,865],{"class":733},[720,12880,431],{"class":737},[720,12882,742],{"class":741},[720,12884,745],{"class":733},[720,12886,748],{"class":733},[720,12888,12889],{"class":751},"text-lg text-gray-700 leading-relaxed",[720,12891,748],{"class":733},[720,12893,769],{"class":733},[720,12895,12896],{"class":722,"line":1444},[720,12897,12898],{"class":760}," A well-designed spacing system is the invisible foundation of every great UI.\n",[720,12900,12901],{"class":722,"line":1489},[720,12902,12903],{"class":760}," In this article, we'll explore how Tailwind CSS v4 helps you maintain consistent\n",[720,12905,12906],{"class":722,"line":1507},[720,12907,12908],{"class":760}," vertical rhythm across your entire layout.\n",[720,12910,12911,12913,12915],{"class":722,"line":1517},[720,12912,1014],{"class":733},[720,12914,431],{"class":737},[720,12916,769],{"class":733},[720,12918,12919],{"class":722,"line":1526},[720,12920,833],{"emptyLinePlaceholder":832},[720,12922,12923],{"class":722,"line":2017},[720,12924,12925],{"class":726}," \u003C!-- Image placeholder -->\n",[720,12927,12928,12930,12933,12935,12937,12939,12941,12943],{"class":722,"line":2026},[720,12929,865],{"class":733},[720,12931,12932],{"class":737},"figure",[720,12934,742],{"class":741},[720,12936,745],{"class":733},[720,12938,748],{"class":733},[720,12940,6473],{"class":751},[720,12942,748],{"class":733},[720,12944,769],{"class":733},[720,12946,12947,12949,12951,12953,12955,12957,12960,12962],{"class":722,"line":3468},[720,12948,956],{"class":733},[720,12950,738],{"class":737},[720,12952,742],{"class":741},[720,12954,745],{"class":733},[720,12956,748],{"class":733},[720,12958,12959],{"class":751},"aspect-video bg-gradient-to-br from-slate-400 to-slate-600 rounded-xl flex items-center justify-center text-white text-lg",[720,12961,748],{"class":733},[720,12963,769],{"class":733},[720,12965,12966],{"class":722,"line":3486},[720,12967,12968],{"class":760}," Featured Image\n",[720,12970,12971,12973,12975],{"class":722,"line":3496},[720,12972,1510],{"class":733},[720,12974,738],{"class":737},[720,12976,769],{"class":733},[720,12978,12979,12981,12984,12986,12988,12990,12993,12995],{"class":722,"line":3505},[720,12980,956],{"class":733},[720,12982,12983],{"class":737},"figcaption",[720,12985,742],{"class":741},[720,12987,745],{"class":733},[720,12989,748],{"class":733},[720,12991,12992],{"class":751},"text-sm text-gray-500 text-center italic",[720,12994,748],{"class":733},[720,12996,769],{"class":733},[720,12998,12999],{"class":722,"line":3525},[720,13000,13001],{"class":760}," Figure 1: Consistent spacing makes content more readable.\n",[720,13003,13004,13006,13008],{"class":722,"line":3553},[720,13005,1510],{"class":733},[720,13007,12983],{"class":737},[720,13009,769],{"class":733},[720,13011,13012,13014,13016],{"class":722,"line":3573},[720,13013,1014],{"class":733},[720,13015,12932],{"class":737},[720,13017,769],{"class":733},[720,13019,13020],{"class":722,"line":3591},[720,13021,833],{"emptyLinePlaceholder":832},[720,13023,13024],{"class":722,"line":3609},[720,13025,13026],{"class":726}," \u003C!-- Section heading + paragraph -->\n",[720,13028,13029,13031,13034,13036,13038,13040,13042,13044],{"class":722,"line":3618},[720,13030,865],{"class":733},[720,13032,13033],{"class":737},"section",[720,13035,742],{"class":741},[720,13037,745],{"class":733},[720,13039,748],{"class":733},[720,13041,2852],{"class":751},[720,13043,748],{"class":733},[720,13045,769],{"class":733},[720,13047,13048,13050,13052,13054,13056,13058,13060,13062,13064,13067,13069,13071],{"class":722,"line":3627},[720,13049,956],{"class":733},[720,13051,427],{"class":737},[720,13053,742],{"class":741},[720,13055,745],{"class":733},[720,13057,748],{"class":733},[720,13059,10833],{"class":751},[720,13061,748],{"class":733},[720,13063,757],{"class":733},[720,13065,13066],{"class":760},"Why Spacing Matters",[720,13068,764],{"class":733},[720,13070,427],{"class":737},[720,13072,769],{"class":733},[720,13074,13075,13077,13079,13081,13083,13085,13088,13090],{"class":722,"line":3636},[720,13076,956],{"class":733},[720,13078,431],{"class":737},[720,13080,742],{"class":741},[720,13082,745],{"class":733},[720,13084,748],{"class":733},[720,13086,13087],{"class":751},"text-gray-700 leading-relaxed",[720,13089,748],{"class":733},[720,13091,769],{"class":733},[720,13093,13094],{"class":722,"line":3645},[720,13095,13096],{"class":760}," Vertical rhythm creates a predictable reading experience. When headings,\n",[720,13098,13099],{"class":722,"line":3654},[720,13100,13101],{"class":760}," paragraphs, and images all follow the same spacing scale, users can scan\n",[720,13103,13104],{"class":722,"line":5038},[720,13105,13106],{"class":760}," content faster and focus on what matters.\n",[720,13108,13109,13111,13113],{"class":722,"line":5053},[720,13110,1510],{"class":733},[720,13112,431],{"class":737},[720,13114,769],{"class":733},[720,13116,13117,13119,13121,13123,13125,13127,13129,13131],{"class":722,"line":5058},[720,13118,956],{"class":733},[720,13120,431],{"class":737},[720,13122,742],{"class":741},[720,13124,745],{"class":733},[720,13126,748],{"class":733},[720,13128,13087],{"class":751},[720,13130,748],{"class":733},[720,13132,769],{"class":733},[720,13134,13135],{"class":722,"line":5067},[720,13136,13137],{"class":760}," Tailwind's spacing scale (based on 4px increments) ensures every element\n",[720,13139,13140],{"class":722,"line":5072},[720,13141,13142],{"class":760}," aligns to the same baseline grid, eliminating uneven gaps.\n",[720,13144,13145,13147,13149],{"class":722,"line":5092},[720,13146,1510],{"class":733},[720,13148,431],{"class":737},[720,13150,769],{"class":733},[720,13152,13153,13155,13157],{"class":722,"line":5111},[720,13154,1014],{"class":733},[720,13156,13033],{"class":737},[720,13158,769],{"class":733},[720,13160,13161],{"class":722,"line":5117},[720,13162,833],{"emptyLinePlaceholder":832},[720,13164,13165],{"class":722,"line":5126},[720,13166,13167],{"class":726}," \u003C!-- Blockquote -->\n",[720,13169,13170,13172,13174,13176,13178,13180,13183,13185],{"class":722,"line":5135},[720,13171,865],{"class":733},[720,13173,452],{"class":737},[720,13175,742],{"class":741},[720,13177,745],{"class":733},[720,13179,748],{"class":733},[720,13181,13182],{"class":751},"border-l-4 border-blue-500 pl-4 py-2 bg-blue-50 rounded-r-lg",[720,13184,748],{"class":733},[720,13186,769],{"class":733},[720,13188,13189,13191,13193,13195,13197,13199,13202,13204],{"class":722,"line":5140},[720,13190,956],{"class":733},[720,13192,431],{"class":737},[720,13194,742],{"class":741},[720,13196,745],{"class":733},[720,13198,748],{"class":733},[720,13200,13201],{"class":751},"text-gray-700 italic",[720,13203,748],{"class":733},[720,13205,769],{"class":733},[720,13207,13208],{"class":722,"line":5159},[720,13209,13210],{"class":760}," \"Design is not just what it looks like and feels like. Design is how it works.\"\n",[720,13212,13213,13215,13217],{"class":722,"line":5168},[720,13214,1510],{"class":733},[720,13216,431],{"class":737},[720,13218,769],{"class":733},[720,13220,13221,13223,13225,13227,13229,13231,13234,13236,13238,13241,13243,13245],{"class":722,"line":5187},[720,13222,956],{"class":733},[720,13224,6749],{"class":737},[720,13226,742],{"class":741},[720,13228,745],{"class":733},[720,13230,748],{"class":733},[720,13232,13233],{"class":751},"text-sm text-gray-500 mt-2",[720,13235,748],{"class":733},[720,13237,757],{"class":733},[720,13239,13240],{"class":760},"— Steve Jobs",[720,13242,764],{"class":733},[720,13244,6749],{"class":737},[720,13246,769],{"class":733},[720,13248,13249,13251,13253],{"class":722,"line":5216},[720,13250,1014],{"class":733},[720,13252,452],{"class":737},[720,13254,769],{"class":733},[720,13256,13257],{"class":722,"line":5244},[720,13258,833],{"emptyLinePlaceholder":832},[720,13260,13261],{"class":722,"line":5253},[720,13262,13263],{"class":726}," \u003C!-- Bullet list -->\n",[720,13265,13266,13268,13270,13272,13274,13276,13278,13280],{"class":722,"line":5281},[720,13267,865],{"class":733},[720,13269,13033],{"class":737},[720,13271,742],{"class":741},[720,13273,745],{"class":733},[720,13275,748],{"class":733},[720,13277,11398],{"class":751},[720,13279,748],{"class":733},[720,13281,769],{"class":733},[720,13283,13284,13286,13288,13290,13292,13294,13296,13298,13300,13303,13305,13307],{"class":722,"line":5300},[720,13285,956],{"class":733},[720,13287,706],{"class":737},[720,13289,742],{"class":741},[720,13291,745],{"class":733},[720,13293,748],{"class":733},[720,13295,10623],{"class":751},[720,13297,748],{"class":733},[720,13299,757],{"class":733},[720,13301,13302],{"class":760},"Key Principles",[720,13304,764],{"class":733},[720,13306,706],{"class":737},[720,13308,769],{"class":733},[720,13310,13311,13313,13315,13317,13319,13321,13324,13326],{"class":722,"line":5306},[720,13312,956],{"class":733},[720,13314,3416],{"class":737},[720,13316,742],{"class":741},[720,13318,745],{"class":733},[720,13320,748],{"class":733},[720,13322,13323],{"class":751},"space-y-2 list-disc list-inside text-gray-700",[720,13325,748],{"class":733},[720,13327,769],{"class":733},[720,13329,13330,13332,13334,13336,13339,13341,13343],{"class":722,"line":5312},[720,13331,1447],{"class":733},[720,13333,3437],{"class":737},[720,13335,757],{"class":733},[720,13337,13338],{"class":760},"Use multiples of 4px (Tailwind's default scale)",[720,13340,764],{"class":733},[720,13342,3437],{"class":737},[720,13344,769],{"class":733},[720,13346,13347,13349,13351,13353,13356,13358,13360],{"class":722,"line":5321},[720,13348,1447],{"class":733},[720,13350,3437],{"class":737},[720,13352,757],{"class":733},[720,13354,13355],{"class":760},"Maintain consistent spacing between same-level elements",[720,13357,764],{"class":733},[720,13359,3437],{"class":737},[720,13361,769],{"class":733},[720,13363,13364,13366,13368,13370,13373,13375,13377],{"class":722,"line":5330},[720,13365,1447],{"class":733},[720,13367,3437],{"class":737},[720,13369,757],{"class":733},[720,13371,13372],{"class":760},"Increase spacing before new sections",[720,13374,764],{"class":733},[720,13376,3437],{"class":737},[720,13378,769],{"class":733},[720,13380,13381,13383,13385,13387,13390,13392,13394],{"class":722,"line":5350},[720,13382,1447],{"class":733},[720,13384,3437],{"class":737},[720,13386,757],{"class":733},[720,13388,13389],{"class":760},"Keep line-height proportional to font-size",[720,13391,764],{"class":733},[720,13393,3437],{"class":737},[720,13395,769],{"class":733},[720,13397,13398,13400,13402],{"class":722,"line":5355},[720,13399,1510],{"class":733},[720,13401,3416],{"class":737},[720,13403,769],{"class":733},[720,13405,13406,13408,13410],{"class":722,"line":5364},[720,13407,1014],{"class":733},[720,13409,13033],{"class":737},[720,13411,769],{"class":733},[720,13413,13414],{"class":722,"line":5373},[720,13415,833],{"emptyLinePlaceholder":832},[720,13417,13418],{"class":722,"line":5382},[720,13419,13420],{"class":726}," \u003C!-- Conclusion -->\n",[720,13422,13423,13425,13427,13429,13431,13433,13436,13438],{"class":722,"line":5391},[720,13424,865],{"class":733},[720,13426,488],{"class":737},[720,13428,742],{"class":741},[720,13430,745],{"class":733},[720,13432,748],{"class":733},[720,13434,13435],{"class":751},"border-gray-200",[720,13437,748],{"class":733},[720,13439,769],{"class":733},[720,13441,13442,13444,13446,13448,13450,13452,13454,13456],{"class":722,"line":5400},[720,13443,865],{"class":733},[720,13445,431],{"class":737},[720,13447,742],{"class":741},[720,13449,745],{"class":733},[720,13451,748],{"class":733},[720,13453,13087],{"class":751},[720,13455,748],{"class":733},[720,13457,769],{"class":733},[720,13459,13460],{"class":722,"line":11385},[720,13461,13462],{"class":760}," A consistent spacing system is one of the easiest ways to make your designs\n",[720,13464,13465],{"class":722,"line":11405},[720,13466,13467],{"class":760}," look polished and professional. Tailwind CSS v4 makes it effortless.\n",[720,13469,13470,13472,13474],{"class":722,"line":11425},[720,13471,1014],{"class":733},[720,13473,431],{"class":737},[720,13475,769],{"class":733},[720,13477,13478,13480,13482],{"class":722,"line":11449},[720,13479,764],{"class":733},[720,13481,3046],{"class":737},[720,13483,769],{"class":733},[435,13485,13486,13489,13490,13493,13494,13496,13497,13499],{"color":1030,"icon":1031},[443,13487,13488],{},"Vertical rhythm pattern:"," Dùng ",[458,13491,13492],{},"space-y-8"," trên container chính (khoảng cách lớn giữa section), ",[458,13495,2852],{}," cho nội dung trong section (paragraphs, heading nhỏ), ",[458,13498,6473],{}," cho list\u002Fdetail. Cấp bậc spacing phản ánh cấp bậc nội dung.",[706,13501,13503],{"id":13502},"bài-tập-15-card-với-internal-spacing-chuẩn-padding-gap","Bài tập 15: Card với internal spacing chuẩn (padding + gap)",[431,13505,13506,13508],{},[443,13507,1056],{}," Card sản phẩm có ảnh, tiêu đề, mô tả, giá, và nút. Internal spacing rõ ràng và nhất quán.",[711,13510,13512],{"className":713,"code":13511,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"max-w-sm mx-auto bg-white rounded-2xl shadow-lg overflow-hidden\">\n \u003C!-- Image -->\n \u003Cdiv class=\"aspect-video bg-gradient-to-br from-blue-400 to-indigo-600 relative\">\n \u003Cspan class=\"absolute top-3 left-3 bg-white\u002F90 text-xs font-bold px-2 py-1 rounded-full backdrop-blur-sm\">\n New Arrival\n \u003C\u002Fspan>\n \u003C\u002Fdiv>\n\n \u003C!-- Content — padding + flex column with gap -->\n \u003Cdiv class=\"p-5 flex flex-col gap-4\">\n \u003C!-- Title + category -->\n \u003Cdiv>\n \u003Cp class=\"text-xs font-medium text-indigo-600 uppercase tracking-wide mb-1\">Electronics\u003C\u002Fp>\n \u003Ch3 class=\"text-lg font-bold text-gray-900\">Wireless Headphones Pro\u003C\u002Fh3>\n \u003C\u002Fdiv>\n\n \u003C!-- Description -->\n \u003Cp class=\"text-sm text-gray-600 leading-relaxed\">\n Premium noise-canceling wireless headphones with 30-hour battery life\n and spatial audio support.\n \u003C\u002Fp>\n\n \u003C!-- Features (dùng gap thay vì space-y) -->\n \u003Cdiv class=\"flex gap-3\">\n \u003Cspan class=\"text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full\">ANC\u003C\u002Fspan>\n \u003Cspan class=\"text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full\">30h Battery\u003C\u002Fspan>\n \u003Cspan class=\"text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full\">Bluetooth 5.3\u003C\u002Fspan>\n \u003C\u002Fdiv>\n\n \u003C!-- Price + CTA -->\n \u003Cdiv class=\"flex items-center justify-between pt-2 border-t border-gray-100\">\n \u003Cdiv>\n \u003Cspan class=\"text-2xl font-bold text-gray-900\">$299\u003C\u002Fspan>\n \u003Cspan class=\"text-sm text-gray-400 line-through ml-2\">$399\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cbutton class=\"bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium\n hover:bg-indigo-700 transition-colors\">\n Add to Cart\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,13513,13514,13533,13538,13557,13576,13581,13589,13597,13601,13606,13625,13630,13638,13666,13694,13702,13706,13711,13730,13735,13740,13748,13752,13757,13776,13804,13831,13858,13866,13870,13875,13894,13902,13929,13957,13965,13980,13989,13994,14002,14010,14018],{"__ignoreMap":716},[720,13515,13516,13518,13520,13522,13524,13526,13529,13531],{"class":722,"line":723},[720,13517,734],{"class":733},[720,13519,738],{"class":737},[720,13521,742],{"class":741},[720,13523,745],{"class":733},[720,13525,748],{"class":733},[720,13527,13528],{"class":751},"max-w-sm mx-auto bg-white rounded-2xl shadow-lg overflow-hidden",[720,13530,748],{"class":733},[720,13532,769],{"class":733},[720,13534,13535],{"class":722,"line":730},[720,13536,13537],{"class":726}," \u003C!-- Image -->\n",[720,13539,13540,13542,13544,13546,13548,13550,13553,13555],{"class":722,"line":772},[720,13541,865],{"class":733},[720,13543,738],{"class":737},[720,13545,742],{"class":741},[720,13547,745],{"class":733},[720,13549,748],{"class":733},[720,13551,13552],{"class":751},"aspect-video bg-gradient-to-br from-blue-400 to-indigo-600 relative",[720,13554,748],{"class":733},[720,13556,769],{"class":733},[720,13558,13559,13561,13563,13565,13567,13569,13572,13574],{"class":722,"line":801},[720,13560,956],{"class":733},[720,13562,720],{"class":737},[720,13564,742],{"class":741},[720,13566,745],{"class":733},[720,13568,748],{"class":733},[720,13570,13571],{"class":751},"absolute top-3 left-3 bg-white\u002F90 text-xs font-bold px-2 py-1 rounded-full backdrop-blur-sm",[720,13573,748],{"class":733},[720,13575,769],{"class":733},[720,13577,13578],{"class":722,"line":829},[720,13579,13580],{"class":760}," New Arrival\n",[720,13582,13583,13585,13587],{"class":722,"line":836},[720,13584,1510],{"class":733},[720,13586,720],{"class":737},[720,13588,769],{"class":733},[720,13590,13591,13593,13595],{"class":722,"line":842},[720,13592,1014],{"class":733},[720,13594,738],{"class":737},[720,13596,769],{"class":733},[720,13598,13599],{"class":722,"line":862},[720,13600,833],{"emptyLinePlaceholder":832},[720,13602,13603],{"class":722,"line":888},[720,13604,13605],{"class":726}," \u003C!-- Content — padding + flex column with gap -->\n",[720,13607,13608,13610,13612,13614,13616,13618,13621,13623],{"class":722,"line":894},[720,13609,865],{"class":733},[720,13611,738],{"class":737},[720,13613,742],{"class":741},[720,13615,745],{"class":733},[720,13617,748],{"class":733},[720,13619,13620],{"class":751},"p-5 flex flex-col gap-4",[720,13622,748],{"class":733},[720,13624,769],{"class":733},[720,13626,13627],{"class":722,"line":903},[720,13628,13629],{"class":726}," \u003C!-- Title + category -->\n",[720,13631,13632,13634,13636],{"class":722,"line":908},[720,13633,956],{"class":733},[720,13635,738],{"class":737},[720,13637,769],{"class":733},[720,13639,13640,13642,13644,13646,13648,13650,13653,13655,13657,13660,13662,13664],{"class":722,"line":914},[720,13641,1447],{"class":733},[720,13643,431],{"class":737},[720,13645,742],{"class":741},[720,13647,745],{"class":733},[720,13649,748],{"class":733},[720,13651,13652],{"class":751},"text-xs font-medium text-indigo-600 uppercase tracking-wide mb-1",[720,13654,748],{"class":733},[720,13656,757],{"class":733},[720,13658,13659],{"class":760},"Electronics",[720,13661,764],{"class":733},[720,13663,431],{"class":737},[720,13665,769],{"class":733},[720,13667,13668,13670,13672,13674,13676,13678,13681,13683,13685,13688,13690,13692],{"class":722,"line":934},[720,13669,1447],{"class":733},[720,13671,706],{"class":737},[720,13673,742],{"class":741},[720,13675,745],{"class":733},[720,13677,748],{"class":733},[720,13679,13680],{"class":751},"text-lg font-bold text-gray-900",[720,13682,748],{"class":733},[720,13684,757],{"class":733},[720,13686,13687],{"class":760},"Wireless Headphones Pro",[720,13689,764],{"class":733},[720,13691,706],{"class":737},[720,13693,769],{"class":733},[720,13695,13696,13698,13700],{"class":722,"line":953},[720,13697,1510],{"class":733},[720,13699,738],{"class":737},[720,13701,769],{"class":733},[720,13703,13704],{"class":722,"line":983},[720,13705,833],{"emptyLinePlaceholder":832},[720,13707,13708],{"class":722,"line":1011},[720,13709,13710],{"class":726}," \u003C!-- Description -->\n",[720,13712,13713,13715,13717,13719,13721,13723,13726,13728],{"class":722,"line":1021},[720,13714,956],{"class":733},[720,13716,431],{"class":737},[720,13718,742],{"class":741},[720,13720,745],{"class":733},[720,13722,748],{"class":733},[720,13724,13725],{"class":751},"text-sm text-gray-600 leading-relaxed",[720,13727,748],{"class":733},[720,13729,769],{"class":733},[720,13731,13732],{"class":722,"line":1367},[720,13733,13734],{"class":760}," Premium noise-canceling wireless headphones with 30-hour battery life\n",[720,13736,13737],{"class":722,"line":1387},[720,13738,13739],{"class":760}," and spatial audio support.\n",[720,13741,13742,13744,13746],{"class":722,"line":1444},[720,13743,1510],{"class":733},[720,13745,431],{"class":737},[720,13747,769],{"class":733},[720,13749,13750],{"class":722,"line":1489},[720,13751,833],{"emptyLinePlaceholder":832},[720,13753,13754],{"class":722,"line":1507},[720,13755,13756],{"class":726}," \u003C!-- Features (dùng gap thay vì space-y) -->\n",[720,13758,13759,13761,13763,13765,13767,13769,13772,13774],{"class":722,"line":1517},[720,13760,956],{"class":733},[720,13762,738],{"class":737},[720,13764,742],{"class":741},[720,13766,745],{"class":733},[720,13768,748],{"class":733},[720,13770,13771],{"class":751},"flex gap-3",[720,13773,748],{"class":733},[720,13775,769],{"class":733},[720,13777,13778,13780,13782,13784,13786,13788,13791,13793,13795,13798,13800,13802],{"class":722,"line":1526},[720,13779,1447],{"class":733},[720,13781,720],{"class":737},[720,13783,742],{"class":741},[720,13785,745],{"class":733},[720,13787,748],{"class":733},[720,13789,13790],{"class":751},"text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded-full",[720,13792,748],{"class":733},[720,13794,757],{"class":733},[720,13796,13797],{"class":760},"ANC",[720,13799,764],{"class":733},[720,13801,720],{"class":737},[720,13803,769],{"class":733},[720,13805,13806,13808,13810,13812,13814,13816,13818,13820,13822,13825,13827,13829],{"class":722,"line":2017},[720,13807,1447],{"class":733},[720,13809,720],{"class":737},[720,13811,742],{"class":741},[720,13813,745],{"class":733},[720,13815,748],{"class":733},[720,13817,13790],{"class":751},[720,13819,748],{"class":733},[720,13821,757],{"class":733},[720,13823,13824],{"class":760},"30h Battery",[720,13826,764],{"class":733},[720,13828,720],{"class":737},[720,13830,769],{"class":733},[720,13832,13833,13835,13837,13839,13841,13843,13845,13847,13849,13852,13854,13856],{"class":722,"line":2026},[720,13834,1447],{"class":733},[720,13836,720],{"class":737},[720,13838,742],{"class":741},[720,13840,745],{"class":733},[720,13842,748],{"class":733},[720,13844,13790],{"class":751},[720,13846,748],{"class":733},[720,13848,757],{"class":733},[720,13850,13851],{"class":760},"Bluetooth 5.3",[720,13853,764],{"class":733},[720,13855,720],{"class":737},[720,13857,769],{"class":733},[720,13859,13860,13862,13864],{"class":722,"line":3468},[720,13861,1510],{"class":733},[720,13863,738],{"class":737},[720,13865,769],{"class":733},[720,13867,13868],{"class":722,"line":3486},[720,13869,833],{"emptyLinePlaceholder":832},[720,13871,13872],{"class":722,"line":3496},[720,13873,13874],{"class":726}," \u003C!-- Price + CTA -->\n",[720,13876,13877,13879,13881,13883,13885,13887,13890,13892],{"class":722,"line":3505},[720,13878,956],{"class":733},[720,13880,738],{"class":737},[720,13882,742],{"class":741},[720,13884,745],{"class":733},[720,13886,748],{"class":733},[720,13888,13889],{"class":751},"flex items-center justify-between pt-2 border-t border-gray-100",[720,13891,748],{"class":733},[720,13893,769],{"class":733},[720,13895,13896,13898,13900],{"class":722,"line":3525},[720,13897,1447],{"class":733},[720,13899,738],{"class":737},[720,13901,769],{"class":733},[720,13903,13904,13906,13908,13910,13912,13914,13916,13918,13920,13923,13925,13927],{"class":722,"line":3553},[720,13905,1736],{"class":733},[720,13907,720],{"class":737},[720,13909,742],{"class":741},[720,13911,745],{"class":733},[720,13913,748],{"class":733},[720,13915,10833],{"class":751},[720,13917,748],{"class":733},[720,13919,757],{"class":733},[720,13921,13922],{"class":760},"$299",[720,13924,764],{"class":733},[720,13926,720],{"class":737},[720,13928,769],{"class":733},[720,13930,13931,13933,13935,13937,13939,13941,13944,13946,13948,13951,13953,13955],{"class":722,"line":3573},[720,13932,1736],{"class":733},[720,13934,720],{"class":737},[720,13936,742],{"class":741},[720,13938,745],{"class":733},[720,13940,748],{"class":733},[720,13942,13943],{"class":751},"text-sm text-gray-400 line-through ml-2",[720,13945,748],{"class":733},[720,13947,757],{"class":733},[720,13949,13950],{"class":760},"$399",[720,13952,764],{"class":733},[720,13954,720],{"class":737},[720,13956,769],{"class":733},[720,13958,13959,13961,13963],{"class":722,"line":3591},[720,13960,1849],{"class":733},[720,13962,738],{"class":737},[720,13964,769],{"class":733},[720,13966,13967,13969,13971,13973,13975,13977],{"class":722,"line":3609},[720,13968,1447],{"class":733},[720,13970,1329],{"class":737},[720,13972,742],{"class":741},[720,13974,745],{"class":733},[720,13976,748],{"class":733},[720,13978,13979],{"class":751},"bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium\n",[720,13981,13982,13985,13987],{"class":722,"line":3618},[720,13983,13984],{"class":751}," hover:bg-indigo-700 transition-colors",[720,13986,748],{"class":733},[720,13988,769],{"class":733},[720,13990,13991],{"class":722,"line":3627},[720,13992,13993],{"class":760}," Add to Cart\n",[720,13995,13996,13998,14000],{"class":722,"line":3636},[720,13997,1849],{"class":733},[720,13999,1329],{"class":737},[720,14001,769],{"class":733},[720,14003,14004,14006,14008],{"class":722,"line":3645},[720,14005,1510],{"class":733},[720,14007,738],{"class":737},[720,14009,769],{"class":733},[720,14011,14012,14014,14016],{"class":722,"line":3654},[720,14013,1014],{"class":733},[720,14015,738],{"class":737},[720,14017,769],{"class":733},[720,14019,14020,14022,14024],{"class":722,"line":5038},[720,14021,764],{"class":733},[720,14023,738],{"class":737},[720,14025,769],{"class":733},[435,14027,441,14028,14031,14032,14035,14036,14039,14040,14043],{"color":437,"icon":438},[443,14029,14030],{},"Internal spacing pattern:"," Container ",[458,14033,14034],{},"p-5"," cho padding đều, bên trong ",[458,14037,14038],{},"flex flex-col gap-4"," cho khoảng cách giữa các phần. ",[458,14041,14042],{},"pt-2 border-t"," cho separator giữa mô tả và giá — phân tách visual rõ ràng.",[488,14045],{},[427,14047,14049],{"id":14048},"_7-sizing","7. Sizing",[706,14051,14053],{"id":14052},"width-height","Width & Height",[502,14055,14056,14066],{},[505,14057,14058],{},[508,14059,14060,14062,14064],{},[511,14061,513],{},[511,14063,516],{},[511,14065,519],{},[521,14067,14068,14083,14097,14116,14136],{},[508,14069,14070,14076,14081],{},[526,14071,14072,14075],{},[458,14073,14074],{},"w-*"," (0..96, auto, full, screen, min, max, fit, fractions)",[526,14077,14078],{},[458,14079,14080],{},"width",[526,14082],{},[508,14084,14085,14090,14095],{},[526,14086,14087,14075],{},[458,14088,14089],{},"h-*",[526,14091,14092],{},[458,14093,14094],{},"height",[526,14096],{},[508,14098,14099,14107,14114],{},[526,14100,14101,465,14104],{},[458,14102,14103],{},"min-w-*",[458,14105,14106],{},"max-w-*",[526,14108,14109,465,14111],{},[458,14110,10154],{},[458,14112,14113],{},"max-width",[526,14115],{},[508,14117,14118,14126,14134],{},[526,14119,14120,465,14123],{},[458,14121,14122],{},"min-h-*",[458,14124,14125],{},"max-h-*",[526,14127,14128,465,14131],{},[458,14129,14130],{},"min-height",[458,14132,14133],{},"max-height",[526,14135],{},[508,14137,14138,14143,14150],{},[526,14139,14140],{},[458,14141,14142],{},"size-*",[526,14144,14145,8133,14147,14149],{},[458,14146,14080],{},[458,14148,14094],{}," cùng lúc",[526,14151],{},[706,14153,14155],{"id":14154},"viewport-units","Viewport Units",[502,14157,14158,14168],{},[505,14159,14160],{},[508,14161,14162,14164,14166],{},[511,14163,513],{},[511,14165,516],{},[511,14167,519],{},[521,14169,14170,14190,14204,14219,14234],{},[508,14171,14172,14180,14188],{},[526,14173,14174,465,14177],{},[458,14175,14176],{},"w-screen",[458,14178,14179],{},"h-screen",[526,14181,14182,465,14185],{},[458,14183,14184],{},"width: 100vw",[458,14186,14187],{},"height: 100vh",[526,14189],{},[508,14191,14192,14196,14201],{},[526,14193,14194],{},[458,14195,6185],{},[526,14197,14198],{},[458,14199,14200],{},"min-height: 100vh",[526,14202,14203],{},"Full height tối thiểu",[508,14205,14206,14211,14216],{},[526,14207,14208],{},[458,14209,14210],{},"h-dvh",[526,14212,14213],{},[458,14214,14215],{},"height: 100dvh",[526,14217,14218],{},"Dynamic viewport height",[508,14220,14221,14226,14231],{},[526,14222,14223],{},[458,14224,14225],{},"h-svh",[526,14227,14228],{},[458,14229,14230],{},"height: 100svh",[526,14232,14233],{},"Small viewport height",[508,14235,14236,14241,14246],{},[526,14237,14238],{},[458,14239,14240],{},"h-lvh",[526,14242,14243],{},[458,14244,14245],{},"height: 100lvh",[526,14247,14248],{},"Large viewport height",[435,14250,14251,446,14254,14257,14258,14261,14262,14265,14266,14268],{"color":1030,"icon":1031},[443,14252,14253],{},"dvh vs svh vs lvh:",[458,14255,14256],{},"dvh"," = dynamic viewport height — tự điều chỉnh khi mobile browser bar show\u002Fhide. ",[458,14259,14260],{},"svh"," = small (bar visible), ",[458,14263,14264],{},"lvh"," = large (bar hidden). Dùng ",[458,14267,14256],{}," cho full-screen layout mobile để tránh bị che bởi browser UI.",[706,14270,14272],{"id":14271},"logical-sizing-v42-new","Logical Sizing (v4.2 NEW)",[502,14274,14275,14283],{},[505,14276,14277],{},[508,14278,14279,14281],{},[511,14280,513],{},[511,14282,516],{},[521,14284,14285,14303,14321],{},[508,14286,14287,14295],{},[526,14288,14289,465,14292],{},[458,14290,14291],{},"inline-size-*",[458,14293,14294],{},"block-size-*",[526,14296,14297,465,14300],{},[458,14298,14299],{},"inline-size",[458,14301,14302],{},"block-size",[508,14304,14305,14313],{},[526,14306,14307,465,14310],{},[458,14308,14309],{},"min-inline-size-*",[458,14311,14312],{},"min-block-size-*",[526,14314,14315,465,14318],{},[458,14316,14317],{},"min-inline-size",[458,14319,14320],{},"min-block-size",[508,14322,14323,14331],{},[526,14324,14325,465,14328],{},[458,14326,14327],{},"max-inline-size-*",[458,14329,14330],{},"max-block-size-*",[526,14332,14333,465,14336],{},[458,14334,14335],{},"max-inline-size",[458,14337,14338],{},"max-block-size",[706,14340,14342,14343],{"id":14341},"bài-tập-16-full-screen-hero-section-với-min-h-screen","Bài tập 16: Full-screen hero section với ",[458,14344,6185],{},[431,14346,14347,14349],{},[443,14348,1056],{}," Hero section full màn hình, nội dung căn giữa, có background gradient, CTA button.",[711,14351,14353],{"className":713,"code":14352,"language":715,"meta":716,"style":716},"\u003Csection class=\"min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 relative overflow-hidden\">\n \u003C!-- Decorative background elements -->\n \u003Cdiv class=\"absolute top-20 left-20 w-72 h-72 bg-purple-500\u002F20 rounded-full blur-3xl\">\u003C\u002Fdiv>\n \u003Cdiv class=\"absolute bottom-20 right-20 w-96 h-96 bg-blue-500\u002F10 rounded-full blur-3xl\">\u003C\u002Fdiv>\n\n \u003C!-- Content -->\n \u003Cdiv class=\"relative z-10 max-w-3xl mx-auto px-6 text-center\">\n \u003Cspan class=\"inline-block text-sm font-medium text-purple-300 bg-white\u002F10 px-3 py-1 rounded-full mb-6 backdrop-blur-sm\">\n Tailwind CSS v4 — Now with Oxide Engine\n \u003C\u002Fspan>\n \u003Ch1 class=\"text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6\">\n Build Faster with\n \u003Cspan class=\"bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent\">\n Utility-First CSS\n \u003C\u002Fspan>\n \u003C\u002Fh1>\n \u003Cp class=\"text-lg text-gray-300 max-w-xl mx-auto mb-8 leading-relaxed\">\n Tailwind CSS v4 is rebuilt from the ground up with the Oxide Engine in Rust,\n delivering 5x faster builds and an all-new CSS-first configuration.\n \u003C\u002Fp>\n \u003Cdiv class=\"flex flex-col sm:flex-row items-center justify-center gap-4\">\n \u003Cbutton class=\"w-full sm:w-auto bg-white text-slate-900 px-8 py-3 rounded-xl font-semibold hover:bg-gray-100 transition-colors\">\n Get Started Free\n \u003C\u002Fbutton>\n \u003Cbutton class=\"w-full sm:w-auto bg-white\u002F10 text-white px-8 py-3 rounded-xl font-semibold hover:bg-white\u002F20 transition-colors backdrop-blur-sm\">\n View Docs\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Scroll indicator -->\n \u003Cdiv class=\"absolute bottom-8 left-1\u002F2 -translate-x-1\u002F2 animate-bounce\">\n \u003Cdiv class=\"w-6 h-10 border-2 border-white\u002F30 rounded-full flex items-start justify-center p-1.5\">\n \u003Cdiv class=\"w-1.5 h-1.5 bg-white\u002F60 rounded-full\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fsection>\n",[458,14354,14355,14374,14379,14402,14425,14429,14434,14453,14472,14477,14485,14504,14509,14528,14533,14541,14549,14568,14573,14578,14586,14605,14624,14629,14637,14656,14661,14669,14677,14685,14689,14694,14713,14732,14755,14763,14771],{"__ignoreMap":716},[720,14356,14357,14359,14361,14363,14365,14367,14370,14372],{"class":722,"line":723},[720,14358,734],{"class":733},[720,14360,13033],{"class":737},[720,14362,742],{"class":741},[720,14364,745],{"class":733},[720,14366,748],{"class":733},[720,14368,14369],{"class":751},"min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 relative overflow-hidden",[720,14371,748],{"class":733},[720,14373,769],{"class":733},[720,14375,14376],{"class":722,"line":730},[720,14377,14378],{"class":726}," \u003C!-- Decorative background elements -->\n",[720,14380,14381,14383,14385,14387,14389,14391,14394,14396,14398,14400],{"class":722,"line":772},[720,14382,865],{"class":733},[720,14384,738],{"class":737},[720,14386,742],{"class":741},[720,14388,745],{"class":733},[720,14390,748],{"class":733},[720,14392,14393],{"class":751},"absolute top-20 left-20 w-72 h-72 bg-purple-500\u002F20 rounded-full blur-3xl",[720,14395,748],{"class":733},[720,14397,881],{"class":733},[720,14399,738],{"class":737},[720,14401,769],{"class":733},[720,14403,14404,14406,14408,14410,14412,14414,14417,14419,14421,14423],{"class":722,"line":801},[720,14405,865],{"class":733},[720,14407,738],{"class":737},[720,14409,742],{"class":741},[720,14411,745],{"class":733},[720,14413,748],{"class":733},[720,14415,14416],{"class":751},"absolute bottom-20 right-20 w-96 h-96 bg-blue-500\u002F10 rounded-full blur-3xl",[720,14418,748],{"class":733},[720,14420,881],{"class":733},[720,14422,738],{"class":737},[720,14424,769],{"class":733},[720,14426,14427],{"class":722,"line":829},[720,14428,833],{"emptyLinePlaceholder":832},[720,14430,14431],{"class":722,"line":836},[720,14432,14433],{"class":726}," \u003C!-- Content -->\n",[720,14435,14436,14438,14440,14442,14444,14446,14449,14451],{"class":722,"line":842},[720,14437,865],{"class":733},[720,14439,738],{"class":737},[720,14441,742],{"class":741},[720,14443,745],{"class":733},[720,14445,748],{"class":733},[720,14447,14448],{"class":751},"relative z-10 max-w-3xl mx-auto px-6 text-center",[720,14450,748],{"class":733},[720,14452,769],{"class":733},[720,14454,14455,14457,14459,14461,14463,14465,14468,14470],{"class":722,"line":862},[720,14456,956],{"class":733},[720,14458,720],{"class":737},[720,14460,742],{"class":741},[720,14462,745],{"class":733},[720,14464,748],{"class":733},[720,14466,14467],{"class":751},"inline-block text-sm font-medium text-purple-300 bg-white\u002F10 px-3 py-1 rounded-full mb-6 backdrop-blur-sm",[720,14469,748],{"class":733},[720,14471,769],{"class":733},[720,14473,14474],{"class":722,"line":888},[720,14475,14476],{"class":760}," Tailwind CSS v4 — Now with Oxide Engine\n",[720,14478,14479,14481,14483],{"class":722,"line":894},[720,14480,1510],{"class":733},[720,14482,720],{"class":737},[720,14484,769],{"class":733},[720,14486,14487,14489,14491,14493,14495,14497,14500,14502],{"class":722,"line":903},[720,14488,956],{"class":733},[720,14490,1992],{"class":737},[720,14492,742],{"class":741},[720,14494,745],{"class":733},[720,14496,748],{"class":733},[720,14498,14499],{"class":751},"text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6",[720,14501,748],{"class":733},[720,14503,769],{"class":733},[720,14505,14506],{"class":722,"line":908},[720,14507,14508],{"class":760}," Build Faster with\n",[720,14510,14511,14513,14515,14517,14519,14521,14524,14526],{"class":722,"line":914},[720,14512,1447],{"class":733},[720,14514,720],{"class":737},[720,14516,742],{"class":741},[720,14518,745],{"class":733},[720,14520,748],{"class":733},[720,14522,14523],{"class":751},"bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent",[720,14525,748],{"class":733},[720,14527,769],{"class":733},[720,14529,14530],{"class":722,"line":934},[720,14531,14532],{"class":760}," Utility-First CSS\n",[720,14534,14535,14537,14539],{"class":722,"line":953},[720,14536,1849],{"class":733},[720,14538,720],{"class":737},[720,14540,769],{"class":733},[720,14542,14543,14545,14547],{"class":722,"line":983},[720,14544,1510],{"class":733},[720,14546,1992],{"class":737},[720,14548,769],{"class":733},[720,14550,14551,14553,14555,14557,14559,14561,14564,14566],{"class":722,"line":1011},[720,14552,956],{"class":733},[720,14554,431],{"class":737},[720,14556,742],{"class":741},[720,14558,745],{"class":733},[720,14560,748],{"class":733},[720,14562,14563],{"class":751},"text-lg text-gray-300 max-w-xl mx-auto mb-8 leading-relaxed",[720,14565,748],{"class":733},[720,14567,769],{"class":733},[720,14569,14570],{"class":722,"line":1021},[720,14571,14572],{"class":760}," Tailwind CSS v4 is rebuilt from the ground up with the Oxide Engine in Rust,\n",[720,14574,14575],{"class":722,"line":1367},[720,14576,14577],{"class":760}," delivering 5x faster builds and an all-new CSS-first configuration.\n",[720,14579,14580,14582,14584],{"class":722,"line":1387},[720,14581,1510],{"class":733},[720,14583,431],{"class":737},[720,14585,769],{"class":733},[720,14587,14588,14590,14592,14594,14596,14598,14601,14603],{"class":722,"line":1444},[720,14589,956],{"class":733},[720,14591,738],{"class":737},[720,14593,742],{"class":741},[720,14595,745],{"class":733},[720,14597,748],{"class":733},[720,14599,14600],{"class":751},"flex flex-col sm:flex-row items-center justify-center gap-4",[720,14602,748],{"class":733},[720,14604,769],{"class":733},[720,14606,14607,14609,14611,14613,14615,14617,14620,14622],{"class":722,"line":1489},[720,14608,1447],{"class":733},[720,14610,1329],{"class":737},[720,14612,742],{"class":741},[720,14614,745],{"class":733},[720,14616,748],{"class":733},[720,14618,14619],{"class":751},"w-full sm:w-auto bg-white text-slate-900 px-8 py-3 rounded-xl font-semibold hover:bg-gray-100 transition-colors",[720,14621,748],{"class":733},[720,14623,769],{"class":733},[720,14625,14626],{"class":722,"line":1507},[720,14627,14628],{"class":760}," Get Started Free\n",[720,14630,14631,14633,14635],{"class":722,"line":1517},[720,14632,1849],{"class":733},[720,14634,1329],{"class":737},[720,14636,769],{"class":733},[720,14638,14639,14641,14643,14645,14647,14649,14652,14654],{"class":722,"line":1526},[720,14640,1447],{"class":733},[720,14642,1329],{"class":737},[720,14644,742],{"class":741},[720,14646,745],{"class":733},[720,14648,748],{"class":733},[720,14650,14651],{"class":751},"w-full sm:w-auto bg-white\u002F10 text-white px-8 py-3 rounded-xl font-semibold hover:bg-white\u002F20 transition-colors backdrop-blur-sm",[720,14653,748],{"class":733},[720,14655,769],{"class":733},[720,14657,14658],{"class":722,"line":2017},[720,14659,14660],{"class":760}," View Docs\n",[720,14662,14663,14665,14667],{"class":722,"line":2026},[720,14664,1849],{"class":733},[720,14666,1329],{"class":737},[720,14668,769],{"class":733},[720,14670,14671,14673,14675],{"class":722,"line":3468},[720,14672,1510],{"class":733},[720,14674,738],{"class":737},[720,14676,769],{"class":733},[720,14678,14679,14681,14683],{"class":722,"line":3486},[720,14680,1014],{"class":733},[720,14682,738],{"class":737},[720,14684,769],{"class":733},[720,14686,14687],{"class":722,"line":3496},[720,14688,833],{"emptyLinePlaceholder":832},[720,14690,14691],{"class":722,"line":3505},[720,14692,14693],{"class":726}," \u003C!-- Scroll indicator -->\n",[720,14695,14696,14698,14700,14702,14704,14706,14709,14711],{"class":722,"line":3525},[720,14697,865],{"class":733},[720,14699,738],{"class":737},[720,14701,742],{"class":741},[720,14703,745],{"class":733},[720,14705,748],{"class":733},[720,14707,14708],{"class":751},"absolute bottom-8 left-1\u002F2 -translate-x-1\u002F2 animate-bounce",[720,14710,748],{"class":733},[720,14712,769],{"class":733},[720,14714,14715,14717,14719,14721,14723,14725,14728,14730],{"class":722,"line":3553},[720,14716,956],{"class":733},[720,14718,738],{"class":737},[720,14720,742],{"class":741},[720,14722,745],{"class":733},[720,14724,748],{"class":733},[720,14726,14727],{"class":751},"w-6 h-10 border-2 border-white\u002F30 rounded-full flex items-start justify-center p-1.5",[720,14729,748],{"class":733},[720,14731,769],{"class":733},[720,14733,14734,14736,14738,14740,14742,14744,14747,14749,14751,14753],{"class":722,"line":3573},[720,14735,1447],{"class":733},[720,14737,738],{"class":737},[720,14739,742],{"class":741},[720,14741,745],{"class":733},[720,14743,748],{"class":733},[720,14745,14746],{"class":751},"w-1.5 h-1.5 bg-white\u002F60 rounded-full",[720,14748,748],{"class":733},[720,14750,881],{"class":733},[720,14752,738],{"class":737},[720,14754,769],{"class":733},[720,14756,14757,14759,14761],{"class":722,"line":3591},[720,14758,1510],{"class":733},[720,14760,738],{"class":737},[720,14762,769],{"class":733},[720,14764,14765,14767,14769],{"class":722,"line":3609},[720,14766,1014],{"class":733},[720,14768,738],{"class":737},[720,14770,769],{"class":733},[720,14772,14773,14775,14777],{"class":722,"line":3618},[720,14774,764],{"class":733},[720,14776,13033],{"class":737},[720,14778,769],{"class":733},[435,14780,441,14781,446,14784,14787,14788,14791],{"color":437,"icon":438},[443,14782,14783],{},"Hero pattern phổ biến:",[458,14785,14786],{},"min-h-screen flex items-center justify-center"," — đảm bảo luôn full viewport. Background gradient + blur decorative circles tạo chiều sâu. ",[458,14789,14790],{},"max-w-3xl mx-auto"," giới hạn text width cho readability.",[706,14793,14795],{"id":14794},"bài-tập-17-image-giữ-aspect-ratio-max-width","Bài tập 17: Image giữ aspect ratio + max-width",[431,14797,14798,14800],{},[443,14799,1056],{}," Container ảnh responsive — ảnh không bị méo, không tràn container, giữ đúng tỉ lệ.",[711,14802,14804],{"className":713,"code":14803,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"max-w-2xl mx-auto p-6 space-y-8\">\n \u003Ch2 class=\"text-xl font-bold\">Responsive Image Patterns\u003C\u002Fh2>\n\n \u003C!-- Pattern 1: Fixed aspect ratio với object-fit -->\n \u003Cdiv>\n \u003Ch3 class=\"font-medium mb-2\">Fixed Aspect Ratio (16:9)\u003C\u002Fh3>\n \u003Cdiv class=\"aspect-video bg-gray-200 rounded-xl overflow-hidden\">\n \u003Cdiv class=\"w-full h-full bg-gradient-to-br from-blue-400 to-purple-500\n flex items-center justify-center text-white text-2xl font-bold\">\n 16:9 Image\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Pattern 2: Square (1:1) -->\n \u003Cdiv>\n \u003Ch3 class=\"font-medium mb-2\">Square (1:1)\u003C\u002Fh3>\n \u003Cdiv class=\"grid grid-cols-3 gap-4\">\n \u003Cdiv class=\"aspect-square bg-gray-200 rounded-lg overflow-hidden\">\n \u003Cdiv class=\"w-full h-full bg-gradient-to-br from-emerald-400 to-teal-500\n flex items-center justify-center text-white font-bold\">1:1\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"aspect-square bg-gray-200 rounded-lg overflow-hidden\">\n \u003Cdiv class=\"w-full h-full bg-gradient-to-br from-rose-400 to-pink-500\n flex items-center justify-center text-white font-bold\">1:1\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"aspect-square bg-gray-200 rounded-lg overflow-hidden\">\n \u003Cdiv class=\"w-full h-full bg-gradient-to-br from-amber-400 to-orange-500\n flex items-center justify-center text-white font-bold\">1:1\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Pattern 3: 4:3 aspect ratio -->\n \u003Cdiv>\n \u003Ch3 class=\"font-medium mb-2\">4:3 Aspect Ratio\u003C\u002Fh3>\n \u003Cdiv class=\"aspect-[4\u002F3] max-w-md bg-gray-200 rounded-xl overflow-hidden\">\n \u003Cdiv class=\"w-full h-full bg-gradient-to-br from-indigo-400 to-cyan-500\n flex items-center justify-center text-white font-bold text-lg\">\n 4:3\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Pattern 4: Full width, auto height, max-width constraint -->\n \u003Cdiv>\n \u003Ch3 class=\"font-medium mb-2\">Full Width with Max Constraint\u003C\u002Fh3>\n \u003Cdiv class=\"w-full max-w-lg bg-gray-200 rounded-xl overflow-hidden\">\n \u003Cdiv class=\"aspect-video bg-gradient-to-br from-violet-400 to-fuchsia-500\n flex items-center justify-center text-white font-bold\">\n w-full + max-w-lg\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,14805,14806,14825,14852,14856,14861,14869,14897,14916,14931,14940,14945,14953,14961,14969,14973,14978,14986,15013,15031,15050,15065,15083,15091,15109,15124,15140,15148,15166,15181,15197,15205,15213,15221,15225,15230,15238,15265,15284,15299,15308,15313,15321,15329,15337,15341,15346,15354,15381,15400,15415,15424,15429,15437,15445,15453],{"__ignoreMap":716},[720,14807,14808,14810,14812,14814,14816,14818,14821,14823],{"class":722,"line":723},[720,14809,734],{"class":733},[720,14811,738],{"class":737},[720,14813,742],{"class":741},[720,14815,745],{"class":733},[720,14817,748],{"class":733},[720,14819,14820],{"class":751},"max-w-2xl mx-auto p-6 space-y-8",[720,14822,748],{"class":733},[720,14824,769],{"class":733},[720,14826,14827,14829,14831,14833,14835,14837,14839,14841,14843,14846,14848,14850],{"class":722,"line":730},[720,14828,865],{"class":733},[720,14830,427],{"class":737},[720,14832,742],{"class":741},[720,14834,745],{"class":733},[720,14836,748],{"class":733},[720,14838,2582],{"class":751},[720,14840,748],{"class":733},[720,14842,757],{"class":733},[720,14844,14845],{"class":760},"Responsive Image Patterns",[720,14847,764],{"class":733},[720,14849,427],{"class":737},[720,14851,769],{"class":733},[720,14853,14854],{"class":722,"line":772},[720,14855,833],{"emptyLinePlaceholder":832},[720,14857,14858],{"class":722,"line":801},[720,14859,14860],{"class":726}," \u003C!-- Pattern 1: Fixed aspect ratio với object-fit -->\n",[720,14862,14863,14865,14867],{"class":722,"line":829},[720,14864,865],{"class":733},[720,14866,738],{"class":737},[720,14868,769],{"class":733},[720,14870,14871,14873,14875,14877,14879,14881,14884,14886,14888,14891,14893,14895],{"class":722,"line":836},[720,14872,956],{"class":733},[720,14874,706],{"class":737},[720,14876,742],{"class":741},[720,14878,745],{"class":733},[720,14880,748],{"class":733},[720,14882,14883],{"class":751},"font-medium mb-2",[720,14885,748],{"class":733},[720,14887,757],{"class":733},[720,14889,14890],{"class":760},"Fixed Aspect Ratio (16:9)",[720,14892,764],{"class":733},[720,14894,706],{"class":737},[720,14896,769],{"class":733},[720,14898,14899,14901,14903,14905,14907,14909,14912,14914],{"class":722,"line":842},[720,14900,956],{"class":733},[720,14902,738],{"class":737},[720,14904,742],{"class":741},[720,14906,745],{"class":733},[720,14908,748],{"class":733},[720,14910,14911],{"class":751},"aspect-video bg-gray-200 rounded-xl overflow-hidden",[720,14913,748],{"class":733},[720,14915,769],{"class":733},[720,14917,14918,14920,14922,14924,14926,14928],{"class":722,"line":862},[720,14919,1447],{"class":733},[720,14921,738],{"class":737},[720,14923,742],{"class":741},[720,14925,745],{"class":733},[720,14927,748],{"class":733},[720,14929,14930],{"class":751},"w-full h-full bg-gradient-to-br from-blue-400 to-purple-500\n",[720,14932,14933,14936,14938],{"class":722,"line":888},[720,14934,14935],{"class":751}," flex items-center justify-center text-white text-2xl font-bold",[720,14937,748],{"class":733},[720,14939,769],{"class":733},[720,14941,14942],{"class":722,"line":894},[720,14943,14944],{"class":760}," 16:9 Image\n",[720,14946,14947,14949,14951],{"class":722,"line":903},[720,14948,1849],{"class":733},[720,14950,738],{"class":737},[720,14952,769],{"class":733},[720,14954,14955,14957,14959],{"class":722,"line":908},[720,14956,1510],{"class":733},[720,14958,738],{"class":737},[720,14960,769],{"class":733},[720,14962,14963,14965,14967],{"class":722,"line":914},[720,14964,1014],{"class":733},[720,14966,738],{"class":737},[720,14968,769],{"class":733},[720,14970,14971],{"class":722,"line":934},[720,14972,833],{"emptyLinePlaceholder":832},[720,14974,14975],{"class":722,"line":953},[720,14976,14977],{"class":726}," \u003C!-- Pattern 2: Square (1:1) -->\n",[720,14979,14980,14982,14984],{"class":722,"line":983},[720,14981,865],{"class":733},[720,14983,738],{"class":737},[720,14985,769],{"class":733},[720,14987,14988,14990,14992,14994,14996,14998,15000,15002,15004,15007,15009,15011],{"class":722,"line":1011},[720,14989,956],{"class":733},[720,14991,706],{"class":737},[720,14993,742],{"class":741},[720,14995,745],{"class":733},[720,14997,748],{"class":733},[720,14999,14883],{"class":751},[720,15001,748],{"class":733},[720,15003,757],{"class":733},[720,15005,15006],{"class":760},"Square (1:1)",[720,15008,764],{"class":733},[720,15010,706],{"class":737},[720,15012,769],{"class":733},[720,15014,15015,15017,15019,15021,15023,15025,15027,15029],{"class":722,"line":1021},[720,15016,956],{"class":733},[720,15018,738],{"class":737},[720,15020,742],{"class":741},[720,15022,745],{"class":733},[720,15024,748],{"class":733},[720,15026,8189],{"class":751},[720,15028,748],{"class":733},[720,15030,769],{"class":733},[720,15032,15033,15035,15037,15039,15041,15043,15046,15048],{"class":722,"line":1367},[720,15034,1447],{"class":733},[720,15036,738],{"class":737},[720,15038,742],{"class":741},[720,15040,745],{"class":733},[720,15042,748],{"class":733},[720,15044,15045],{"class":751},"aspect-square bg-gray-200 rounded-lg overflow-hidden",[720,15047,748],{"class":733},[720,15049,769],{"class":733},[720,15051,15052,15054,15056,15058,15060,15062],{"class":722,"line":1387},[720,15053,1736],{"class":733},[720,15055,738],{"class":737},[720,15057,742],{"class":741},[720,15059,745],{"class":733},[720,15061,748],{"class":733},[720,15063,15064],{"class":751},"w-full h-full bg-gradient-to-br from-emerald-400 to-teal-500\n",[720,15066,15067,15070,15072,15074,15077,15079,15081],{"class":722,"line":1444},[720,15068,15069],{"class":751}," flex items-center justify-center text-white font-bold",[720,15071,748],{"class":733},[720,15073,757],{"class":733},[720,15075,15076],{"class":760},"1:1",[720,15078,764],{"class":733},[720,15080,738],{"class":737},[720,15082,769],{"class":733},[720,15084,15085,15087,15089],{"class":722,"line":1489},[720,15086,1849],{"class":733},[720,15088,738],{"class":737},[720,15090,769],{"class":733},[720,15092,15093,15095,15097,15099,15101,15103,15105,15107],{"class":722,"line":1507},[720,15094,1447],{"class":733},[720,15096,738],{"class":737},[720,15098,742],{"class":741},[720,15100,745],{"class":733},[720,15102,748],{"class":733},[720,15104,15045],{"class":751},[720,15106,748],{"class":733},[720,15108,769],{"class":733},[720,15110,15111,15113,15115,15117,15119,15121],{"class":722,"line":1517},[720,15112,1736],{"class":733},[720,15114,738],{"class":737},[720,15116,742],{"class":741},[720,15118,745],{"class":733},[720,15120,748],{"class":733},[720,15122,15123],{"class":751},"w-full h-full bg-gradient-to-br from-rose-400 to-pink-500\n",[720,15125,15126,15128,15130,15132,15134,15136,15138],{"class":722,"line":1526},[720,15127,15069],{"class":751},[720,15129,748],{"class":733},[720,15131,757],{"class":733},[720,15133,15076],{"class":760},[720,15135,764],{"class":733},[720,15137,738],{"class":737},[720,15139,769],{"class":733},[720,15141,15142,15144,15146],{"class":722,"line":2017},[720,15143,1849],{"class":733},[720,15145,738],{"class":737},[720,15147,769],{"class":733},[720,15149,15150,15152,15154,15156,15158,15160,15162,15164],{"class":722,"line":2026},[720,15151,1447],{"class":733},[720,15153,738],{"class":737},[720,15155,742],{"class":741},[720,15157,745],{"class":733},[720,15159,748],{"class":733},[720,15161,15045],{"class":751},[720,15163,748],{"class":733},[720,15165,769],{"class":733},[720,15167,15168,15170,15172,15174,15176,15178],{"class":722,"line":3468},[720,15169,1736],{"class":733},[720,15171,738],{"class":737},[720,15173,742],{"class":741},[720,15175,745],{"class":733},[720,15177,748],{"class":733},[720,15179,15180],{"class":751},"w-full h-full bg-gradient-to-br from-amber-400 to-orange-500\n",[720,15182,15183,15185,15187,15189,15191,15193,15195],{"class":722,"line":3486},[720,15184,15069],{"class":751},[720,15186,748],{"class":733},[720,15188,757],{"class":733},[720,15190,15076],{"class":760},[720,15192,764],{"class":733},[720,15194,738],{"class":737},[720,15196,769],{"class":733},[720,15198,15199,15201,15203],{"class":722,"line":3496},[720,15200,1849],{"class":733},[720,15202,738],{"class":737},[720,15204,769],{"class":733},[720,15206,15207,15209,15211],{"class":722,"line":3505},[720,15208,1510],{"class":733},[720,15210,738],{"class":737},[720,15212,769],{"class":733},[720,15214,15215,15217,15219],{"class":722,"line":3525},[720,15216,1014],{"class":733},[720,15218,738],{"class":737},[720,15220,769],{"class":733},[720,15222,15223],{"class":722,"line":3553},[720,15224,833],{"emptyLinePlaceholder":832},[720,15226,15227],{"class":722,"line":3573},[720,15228,15229],{"class":726}," \u003C!-- Pattern 3: 4:3 aspect ratio -->\n",[720,15231,15232,15234,15236],{"class":722,"line":3591},[720,15233,865],{"class":733},[720,15235,738],{"class":737},[720,15237,769],{"class":733},[720,15239,15240,15242,15244,15246,15248,15250,15252,15254,15256,15259,15261,15263],{"class":722,"line":3609},[720,15241,956],{"class":733},[720,15243,706],{"class":737},[720,15245,742],{"class":741},[720,15247,745],{"class":733},[720,15249,748],{"class":733},[720,15251,14883],{"class":751},[720,15253,748],{"class":733},[720,15255,757],{"class":733},[720,15257,15258],{"class":760},"4:3 Aspect Ratio",[720,15260,764],{"class":733},[720,15262,706],{"class":737},[720,15264,769],{"class":733},[720,15266,15267,15269,15271,15273,15275,15277,15280,15282],{"class":722,"line":3618},[720,15268,956],{"class":733},[720,15270,738],{"class":737},[720,15272,742],{"class":741},[720,15274,745],{"class":733},[720,15276,748],{"class":733},[720,15278,15279],{"class":751},"aspect-[4\u002F3] max-w-md bg-gray-200 rounded-xl overflow-hidden",[720,15281,748],{"class":733},[720,15283,769],{"class":733},[720,15285,15286,15288,15290,15292,15294,15296],{"class":722,"line":3627},[720,15287,1447],{"class":733},[720,15289,738],{"class":737},[720,15291,742],{"class":741},[720,15293,745],{"class":733},[720,15295,748],{"class":733},[720,15297,15298],{"class":751},"w-full h-full bg-gradient-to-br from-indigo-400 to-cyan-500\n",[720,15300,15301,15304,15306],{"class":722,"line":3636},[720,15302,15303],{"class":751}," flex items-center justify-center text-white font-bold text-lg",[720,15305,748],{"class":733},[720,15307,769],{"class":733},[720,15309,15310],{"class":722,"line":3645},[720,15311,15312],{"class":760}," 4:3\n",[720,15314,15315,15317,15319],{"class":722,"line":3654},[720,15316,1849],{"class":733},[720,15318,738],{"class":737},[720,15320,769],{"class":733},[720,15322,15323,15325,15327],{"class":722,"line":5038},[720,15324,1510],{"class":733},[720,15326,738],{"class":737},[720,15328,769],{"class":733},[720,15330,15331,15333,15335],{"class":722,"line":5053},[720,15332,1014],{"class":733},[720,15334,738],{"class":737},[720,15336,769],{"class":733},[720,15338,15339],{"class":722,"line":5058},[720,15340,833],{"emptyLinePlaceholder":832},[720,15342,15343],{"class":722,"line":5067},[720,15344,15345],{"class":726}," \u003C!-- Pattern 4: Full width, auto height, max-width constraint -->\n",[720,15347,15348,15350,15352],{"class":722,"line":5072},[720,15349,865],{"class":733},[720,15351,738],{"class":737},[720,15353,769],{"class":733},[720,15355,15356,15358,15360,15362,15364,15366,15368,15370,15372,15375,15377,15379],{"class":722,"line":5092},[720,15357,956],{"class":733},[720,15359,706],{"class":737},[720,15361,742],{"class":741},[720,15363,745],{"class":733},[720,15365,748],{"class":733},[720,15367,14883],{"class":751},[720,15369,748],{"class":733},[720,15371,757],{"class":733},[720,15373,15374],{"class":760},"Full Width with Max Constraint",[720,15376,764],{"class":733},[720,15378,706],{"class":737},[720,15380,769],{"class":733},[720,15382,15383,15385,15387,15389,15391,15393,15396,15398],{"class":722,"line":5111},[720,15384,956],{"class":733},[720,15386,738],{"class":737},[720,15388,742],{"class":741},[720,15390,745],{"class":733},[720,15392,748],{"class":733},[720,15394,15395],{"class":751},"w-full max-w-lg bg-gray-200 rounded-xl overflow-hidden",[720,15397,748],{"class":733},[720,15399,769],{"class":733},[720,15401,15402,15404,15406,15408,15410,15412],{"class":722,"line":5117},[720,15403,1447],{"class":733},[720,15405,738],{"class":737},[720,15407,742],{"class":741},[720,15409,745],{"class":733},[720,15411,748],{"class":733},[720,15413,15414],{"class":751},"aspect-video bg-gradient-to-br from-violet-400 to-fuchsia-500\n",[720,15416,15417,15420,15422],{"class":722,"line":5126},[720,15418,15419],{"class":751}," flex items-center justify-center text-white font-bold",[720,15421,748],{"class":733},[720,15423,769],{"class":733},[720,15425,15426],{"class":722,"line":5135},[720,15427,15428],{"class":760}," w-full + max-w-lg\n",[720,15430,15431,15433,15435],{"class":722,"line":5140},[720,15432,1849],{"class":733},[720,15434,738],{"class":737},[720,15436,769],{"class":733},[720,15438,15439,15441,15443],{"class":722,"line":5159},[720,15440,1510],{"class":733},[720,15442,738],{"class":737},[720,15444,769],{"class":733},[720,15446,15447,15449,15451],{"class":722,"line":5168},[720,15448,1014],{"class":733},[720,15450,738],{"class":737},[720,15452,769],{"class":733},[720,15454,15455,15457,15459],{"class":722,"line":5187},[720,15456,764],{"class":733},[720,15458,738],{"class":737},[720,15460,769],{"class":733},[435,15462,15463,15468],{"color":1030,"icon":1031},[431,15464,15465],{},[443,15466,15467],{},"Image patterns cần nhớ:",[3416,15469,15470,15484,15490],{},[3437,15471,15472,15475,15476,15479,15480,15483],{},[458,15473,15474],{},"aspect-video"," = 16:9, ",[458,15477,15478],{},"aspect-square"," = 1:1, ",[458,15481,15482],{},"aspect-[4\u002F3]"," = custom ratio.",[3437,15485,15486,15489],{},[458,15487,15488],{},"w-full max-w-lg"," = responsive full width nhưng không vượt quá max-width.",[3437,15491,15492,8133,15495,15498,15499,15502],{},[458,15493,15494],{},"object-cover",[458,15496,15497],{},"object-center"," cho ảnh thật (thẻ ",[458,15500,15501],{},"\u003Cimg>",") để crop thay vì méo.",[488,15504],{},[427,15506,15508],{"id":15507},"_8-overflow","8. Overflow",[502,15510,15511,15519],{},[505,15512,15513],{},[508,15514,15515,15517],{},[511,15516,513],{},[511,15518,516],{},[521,15520,15521,15534,15547,15560,15572,15585,15598],{},[508,15522,15523,15528],{},[526,15524,15525],{},[458,15526,15527],{},"overflow-auto",[526,15529,15530,15533],{},[458,15531,15532],{},"overflow: auto"," — scrollbar khi cần",[508,15535,15536,15541],{},[526,15537,15538],{},[458,15539,15540],{},"overflow-hidden",[526,15542,15543,15546],{},[458,15544,15545],{},"overflow: hidden"," — cắt nội dung",[508,15548,15549,15554],{},[526,15550,15551],{},[458,15552,15553],{},"overflow-clip",[526,15555,15556,15559],{},[458,15557,15558],{},"overflow: clip"," — giống hidden nhưng không tạo scroll container",[508,15561,15562,15567],{},[526,15563,15564],{},[458,15565,15566],{},"overflow-visible",[526,15568,15569],{},[458,15570,15571],{},"overflow: visible",[508,15573,15574,15579],{},[526,15575,15576],{},[458,15577,15578],{},"overflow-scroll",[526,15580,15581,15584],{},[458,15582,15583],{},"overflow: scroll"," — luôn có scrollbar",[508,15586,15587,15595],{},[526,15588,15589,465,15592],{},[458,15590,15591],{},"overflow-x-*",[458,15593,15594],{},"overflow-y-*",[526,15596,15597],{},"Overflow theo trục",[508,15599,15600,15611],{},[526,15601,15602,465,15605,465,15608],{},[458,15603,15604],{},"overscroll-auto",[458,15606,15607],{},"overscroll-contain",[458,15609,15610],{},"overscroll-none",[526,15612,15613],{},[458,15614,15615],{},"overscroll-behavior",[706,15617,15619],{"id":15618},"bài-tập-18-scrollable-sidebar-với-fixed-height","Bài tập 18: Scrollable sidebar với fixed height",[431,15621,15622,15624],{},[443,15623,1056],{}," Sidebar có chiều cao cố định, nội dung bên trong cuộn được.",[711,15626,15628],{"className":713,"code":15627,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"flex min-h-screen bg-gray-100\">\n \u003C!-- Scrollable sidebar -->\n \u003Caside class=\"w-64 bg-white border-r flex flex-col\">\n \u003C!-- Header sidebar — fixed -->\n \u003Cdiv class=\"p-4 border-b\">\n \u003Ch2 class=\"font-bold text-gray-900\">Channels\u003C\u002Fh2>\n \u003C\u002Fdiv>\n\n \u003C!-- Scrollable content -->\n \u003Cnav class=\"flex-1 overflow-y-auto p-4 space-y-1\">\n \u003C!-- 20 channel items — scroll sẽ xuất hiện -->\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg bg-indigo-50 text-indigo-700 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> general\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> random\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> announcements\n \u003C\u002Fa>\n \u003C!-- Thêm nhiều items để tạo scroll -->\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> design\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> frontend\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> backend\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> devops\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> help\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> jobs\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> projects\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> resources\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> events\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> feedback\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> mentoring\n \u003C\u002Fa>\n \u003Ca href=\"#\" class=\"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm\">\n \u003Cspan class=\"text-lg\">#\u003C\u002Fspan> open-source\n \u003C\u002Fa>\n \u003C\u002Fnav>\n\n \u003C!-- Footer sidebar — fixed -->\n \u003Cdiv class=\"p-4 border-t\">\n \u003Cdiv class=\"flex items-center gap-2\">\n \u003Cdiv class=\"w-8 h-8 bg-indigo-500 rounded-full\">\u003C\u002Fdiv>\n \u003Cspan class=\"text-sm font-medium\">User Name\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Faside>\n\n \u003C!-- Main content -->\n \u003Cmain class=\"flex-1 p-6\">\n \u003Ch1 class=\"text-2xl font-bold\">Main Content Area\u003C\u002Fh1>\n \u003C\u002Fmain>\n\u003C\u002Fdiv>\n",[458,15629,15630,15649,15654,15673,15678,15697,15725,15733,15737,15742,15761,15766,15795,15825,15833,15862,15891,15899,15927,15956,15964,15969,15997,16026,16034,16062,16091,16099,16127,16156,16164,16192,16221,16229,16257,16286,16294,16322,16351,16359,16387,16416,16424,16452,16481,16489,16517,16546,16554,16582,16611,16619,16647,16676,16684,16712,16741,16749,16757,16761,16766,16785,16804,16827,16855,16863,16871,16879,16883,16887,16906,16933,16941],{"__ignoreMap":716},[720,15631,15632,15634,15636,15638,15640,15642,15645,15647],{"class":722,"line":723},[720,15633,734],{"class":733},[720,15635,738],{"class":737},[720,15637,742],{"class":741},[720,15639,745],{"class":733},[720,15641,748],{"class":733},[720,15643,15644],{"class":751},"flex min-h-screen bg-gray-100",[720,15646,748],{"class":733},[720,15648,769],{"class":733},[720,15650,15651],{"class":722,"line":730},[720,15652,15653],{"class":726}," \u003C!-- Scrollable sidebar -->\n",[720,15655,15656,15658,15660,15662,15664,15666,15669,15671],{"class":722,"line":772},[720,15657,865],{"class":733},[720,15659,1633],{"class":737},[720,15661,742],{"class":741},[720,15663,745],{"class":733},[720,15665,748],{"class":733},[720,15667,15668],{"class":751},"w-64 bg-white border-r flex flex-col",[720,15670,748],{"class":733},[720,15672,769],{"class":733},[720,15674,15675],{"class":722,"line":801},[720,15676,15677],{"class":726}," \u003C!-- Header sidebar — fixed -->\n",[720,15679,15680,15682,15684,15686,15688,15690,15693,15695],{"class":722,"line":829},[720,15681,956],{"class":733},[720,15683,738],{"class":737},[720,15685,742],{"class":741},[720,15687,745],{"class":733},[720,15689,748],{"class":733},[720,15691,15692],{"class":751},"p-4 border-b",[720,15694,748],{"class":733},[720,15696,769],{"class":733},[720,15698,15699,15701,15703,15705,15707,15709,15712,15714,15716,15719,15721,15723],{"class":722,"line":836},[720,15700,1447],{"class":733},[720,15702,427],{"class":737},[720,15704,742],{"class":741},[720,15706,745],{"class":733},[720,15708,748],{"class":733},[720,15710,15711],{"class":751},"font-bold text-gray-900",[720,15713,748],{"class":733},[720,15715,757],{"class":733},[720,15717,15718],{"class":760},"Channels",[720,15720,764],{"class":733},[720,15722,427],{"class":737},[720,15724,769],{"class":733},[720,15726,15727,15729,15731],{"class":722,"line":842},[720,15728,1510],{"class":733},[720,15730,738],{"class":737},[720,15732,769],{"class":733},[720,15734,15735],{"class":722,"line":862},[720,15736,833],{"emptyLinePlaceholder":832},[720,15738,15739],{"class":722,"line":888},[720,15740,15741],{"class":726}," \u003C!-- Scrollable content -->\n",[720,15743,15744,15746,15748,15750,15752,15754,15757,15759],{"class":722,"line":894},[720,15745,956],{"class":733},[720,15747,1069],{"class":737},[720,15749,742],{"class":741},[720,15751,745],{"class":733},[720,15753,748],{"class":733},[720,15755,15756],{"class":751},"flex-1 overflow-y-auto p-4 space-y-1",[720,15758,748],{"class":733},[720,15760,769],{"class":733},[720,15762,15763],{"class":722,"line":903},[720,15764,15765],{"class":726}," \u003C!-- 20 channel items — scroll sẽ xuất hiện -->\n",[720,15767,15768,15770,15772,15774,15776,15778,15780,15782,15784,15786,15788,15791,15793],{"class":722,"line":908},[720,15769,1447],{"class":733},[720,15771,1094],{"class":737},[720,15773,1097],{"class":741},[720,15775,745],{"class":733},[720,15777,748],{"class":733},[720,15779,1104],{"class":751},[720,15781,748],{"class":733},[720,15783,742],{"class":741},[720,15785,745],{"class":733},[720,15787,748],{"class":733},[720,15789,15790],{"class":751},"flex items-center gap-2 px-3 py-2 rounded-lg bg-indigo-50 text-indigo-700 font-medium text-sm",[720,15792,748],{"class":733},[720,15794,769],{"class":733},[720,15796,15797,15799,15801,15803,15805,15807,15810,15812,15814,15816,15818,15820,15822],{"class":722,"line":914},[720,15798,1736],{"class":733},[720,15800,720],{"class":737},[720,15802,742],{"class":741},[720,15804,745],{"class":733},[720,15806,748],{"class":733},[720,15808,15809],{"class":751},"text-lg",[720,15811,748],{"class":733},[720,15813,757],{"class":733},[720,15815,1104],{"class":760},[720,15817,764],{"class":733},[720,15819,720],{"class":737},[720,15821,757],{"class":733},[720,15823,15824],{"class":760}," general\n",[720,15826,15827,15829,15831],{"class":722,"line":934},[720,15828,1849],{"class":733},[720,15830,1094],{"class":737},[720,15832,769],{"class":733},[720,15834,15835,15837,15839,15841,15843,15845,15847,15849,15851,15853,15855,15858,15860],{"class":722,"line":953},[720,15836,1447],{"class":733},[720,15838,1094],{"class":737},[720,15840,1097],{"class":741},[720,15842,745],{"class":733},[720,15844,748],{"class":733},[720,15846,1104],{"class":751},[720,15848,748],{"class":733},[720,15850,742],{"class":741},[720,15852,745],{"class":733},[720,15854,748],{"class":733},[720,15856,15857],{"class":751},"flex items-center gap-2 px-3 py-2 rounded-lg text-gray-600 hover:bg-gray-50 font-medium text-sm",[720,15859,748],{"class":733},[720,15861,769],{"class":733},[720,15863,15864,15866,15868,15870,15872,15874,15876,15878,15880,15882,15884,15886,15888],{"class":722,"line":983},[720,15865,1736],{"class":733},[720,15867,720],{"class":737},[720,15869,742],{"class":741},[720,15871,745],{"class":733},[720,15873,748],{"class":733},[720,15875,15809],{"class":751},[720,15877,748],{"class":733},[720,15879,757],{"class":733},[720,15881,1104],{"class":760},[720,15883,764],{"class":733},[720,15885,720],{"class":737},[720,15887,757],{"class":733},[720,15889,15890],{"class":760}," random\n",[720,15892,15893,15895,15897],{"class":722,"line":1011},[720,15894,1849],{"class":733},[720,15896,1094],{"class":737},[720,15898,769],{"class":733},[720,15900,15901,15903,15905,15907,15909,15911,15913,15915,15917,15919,15921,15923,15925],{"class":722,"line":1021},[720,15902,1447],{"class":733},[720,15904,1094],{"class":737},[720,15906,1097],{"class":741},[720,15908,745],{"class":733},[720,15910,748],{"class":733},[720,15912,1104],{"class":751},[720,15914,748],{"class":733},[720,15916,742],{"class":741},[720,15918,745],{"class":733},[720,15920,748],{"class":733},[720,15922,15857],{"class":751},[720,15924,748],{"class":733},[720,15926,769],{"class":733},[720,15928,15929,15931,15933,15935,15937,15939,15941,15943,15945,15947,15949,15951,15953],{"class":722,"line":1367},[720,15930,1736],{"class":733},[720,15932,720],{"class":737},[720,15934,742],{"class":741},[720,15936,745],{"class":733},[720,15938,748],{"class":733},[720,15940,15809],{"class":751},[720,15942,748],{"class":733},[720,15944,757],{"class":733},[720,15946,1104],{"class":760},[720,15948,764],{"class":733},[720,15950,720],{"class":737},[720,15952,757],{"class":733},[720,15954,15955],{"class":760}," announcements\n",[720,15957,15958,15960,15962],{"class":722,"line":1387},[720,15959,1849],{"class":733},[720,15961,1094],{"class":737},[720,15963,769],{"class":733},[720,15965,15966],{"class":722,"line":1444},[720,15967,15968],{"class":726}," \u003C!-- Thêm nhiều items để tạo scroll -->\n",[720,15970,15971,15973,15975,15977,15979,15981,15983,15985,15987,15989,15991,15993,15995],{"class":722,"line":1489},[720,15972,1447],{"class":733},[720,15974,1094],{"class":737},[720,15976,1097],{"class":741},[720,15978,745],{"class":733},[720,15980,748],{"class":733},[720,15982,1104],{"class":751},[720,15984,748],{"class":733},[720,15986,742],{"class":741},[720,15988,745],{"class":733},[720,15990,748],{"class":733},[720,15992,15857],{"class":751},[720,15994,748],{"class":733},[720,15996,769],{"class":733},[720,15998,15999,16001,16003,16005,16007,16009,16011,16013,16015,16017,16019,16021,16023],{"class":722,"line":1507},[720,16000,1736],{"class":733},[720,16002,720],{"class":737},[720,16004,742],{"class":741},[720,16006,745],{"class":733},[720,16008,748],{"class":733},[720,16010,15809],{"class":751},[720,16012,748],{"class":733},[720,16014,757],{"class":733},[720,16016,1104],{"class":760},[720,16018,764],{"class":733},[720,16020,720],{"class":737},[720,16022,757],{"class":733},[720,16024,16025],{"class":760}," design\n",[720,16027,16028,16030,16032],{"class":722,"line":1517},[720,16029,1849],{"class":733},[720,16031,1094],{"class":737},[720,16033,769],{"class":733},[720,16035,16036,16038,16040,16042,16044,16046,16048,16050,16052,16054,16056,16058,16060],{"class":722,"line":1526},[720,16037,1447],{"class":733},[720,16039,1094],{"class":737},[720,16041,1097],{"class":741},[720,16043,745],{"class":733},[720,16045,748],{"class":733},[720,16047,1104],{"class":751},[720,16049,748],{"class":733},[720,16051,742],{"class":741},[720,16053,745],{"class":733},[720,16055,748],{"class":733},[720,16057,15857],{"class":751},[720,16059,748],{"class":733},[720,16061,769],{"class":733},[720,16063,16064,16066,16068,16070,16072,16074,16076,16078,16080,16082,16084,16086,16088],{"class":722,"line":2017},[720,16065,1736],{"class":733},[720,16067,720],{"class":737},[720,16069,742],{"class":741},[720,16071,745],{"class":733},[720,16073,748],{"class":733},[720,16075,15809],{"class":751},[720,16077,748],{"class":733},[720,16079,757],{"class":733},[720,16081,1104],{"class":760},[720,16083,764],{"class":733},[720,16085,720],{"class":737},[720,16087,757],{"class":733},[720,16089,16090],{"class":760}," frontend\n",[720,16092,16093,16095,16097],{"class":722,"line":2026},[720,16094,1849],{"class":733},[720,16096,1094],{"class":737},[720,16098,769],{"class":733},[720,16100,16101,16103,16105,16107,16109,16111,16113,16115,16117,16119,16121,16123,16125],{"class":722,"line":3468},[720,16102,1447],{"class":733},[720,16104,1094],{"class":737},[720,16106,1097],{"class":741},[720,16108,745],{"class":733},[720,16110,748],{"class":733},[720,16112,1104],{"class":751},[720,16114,748],{"class":733},[720,16116,742],{"class":741},[720,16118,745],{"class":733},[720,16120,748],{"class":733},[720,16122,15857],{"class":751},[720,16124,748],{"class":733},[720,16126,769],{"class":733},[720,16128,16129,16131,16133,16135,16137,16139,16141,16143,16145,16147,16149,16151,16153],{"class":722,"line":3486},[720,16130,1736],{"class":733},[720,16132,720],{"class":737},[720,16134,742],{"class":741},[720,16136,745],{"class":733},[720,16138,748],{"class":733},[720,16140,15809],{"class":751},[720,16142,748],{"class":733},[720,16144,757],{"class":733},[720,16146,1104],{"class":760},[720,16148,764],{"class":733},[720,16150,720],{"class":737},[720,16152,757],{"class":733},[720,16154,16155],{"class":760}," backend\n",[720,16157,16158,16160,16162],{"class":722,"line":3496},[720,16159,1849],{"class":733},[720,16161,1094],{"class":737},[720,16163,769],{"class":733},[720,16165,16166,16168,16170,16172,16174,16176,16178,16180,16182,16184,16186,16188,16190],{"class":722,"line":3505},[720,16167,1447],{"class":733},[720,16169,1094],{"class":737},[720,16171,1097],{"class":741},[720,16173,745],{"class":733},[720,16175,748],{"class":733},[720,16177,1104],{"class":751},[720,16179,748],{"class":733},[720,16181,742],{"class":741},[720,16183,745],{"class":733},[720,16185,748],{"class":733},[720,16187,15857],{"class":751},[720,16189,748],{"class":733},[720,16191,769],{"class":733},[720,16193,16194,16196,16198,16200,16202,16204,16206,16208,16210,16212,16214,16216,16218],{"class":722,"line":3525},[720,16195,1736],{"class":733},[720,16197,720],{"class":737},[720,16199,742],{"class":741},[720,16201,745],{"class":733},[720,16203,748],{"class":733},[720,16205,15809],{"class":751},[720,16207,748],{"class":733},[720,16209,757],{"class":733},[720,16211,1104],{"class":760},[720,16213,764],{"class":733},[720,16215,720],{"class":737},[720,16217,757],{"class":733},[720,16219,16220],{"class":760}," devops\n",[720,16222,16223,16225,16227],{"class":722,"line":3553},[720,16224,1849],{"class":733},[720,16226,1094],{"class":737},[720,16228,769],{"class":733},[720,16230,16231,16233,16235,16237,16239,16241,16243,16245,16247,16249,16251,16253,16255],{"class":722,"line":3573},[720,16232,1447],{"class":733},[720,16234,1094],{"class":737},[720,16236,1097],{"class":741},[720,16238,745],{"class":733},[720,16240,748],{"class":733},[720,16242,1104],{"class":751},[720,16244,748],{"class":733},[720,16246,742],{"class":741},[720,16248,745],{"class":733},[720,16250,748],{"class":733},[720,16252,15857],{"class":751},[720,16254,748],{"class":733},[720,16256,769],{"class":733},[720,16258,16259,16261,16263,16265,16267,16269,16271,16273,16275,16277,16279,16281,16283],{"class":722,"line":3591},[720,16260,1736],{"class":733},[720,16262,720],{"class":737},[720,16264,742],{"class":741},[720,16266,745],{"class":733},[720,16268,748],{"class":733},[720,16270,15809],{"class":751},[720,16272,748],{"class":733},[720,16274,757],{"class":733},[720,16276,1104],{"class":760},[720,16278,764],{"class":733},[720,16280,720],{"class":737},[720,16282,757],{"class":733},[720,16284,16285],{"class":760}," help\n",[720,16287,16288,16290,16292],{"class":722,"line":3609},[720,16289,1849],{"class":733},[720,16291,1094],{"class":737},[720,16293,769],{"class":733},[720,16295,16296,16298,16300,16302,16304,16306,16308,16310,16312,16314,16316,16318,16320],{"class":722,"line":3618},[720,16297,1447],{"class":733},[720,16299,1094],{"class":737},[720,16301,1097],{"class":741},[720,16303,745],{"class":733},[720,16305,748],{"class":733},[720,16307,1104],{"class":751},[720,16309,748],{"class":733},[720,16311,742],{"class":741},[720,16313,745],{"class":733},[720,16315,748],{"class":733},[720,16317,15857],{"class":751},[720,16319,748],{"class":733},[720,16321,769],{"class":733},[720,16323,16324,16326,16328,16330,16332,16334,16336,16338,16340,16342,16344,16346,16348],{"class":722,"line":3627},[720,16325,1736],{"class":733},[720,16327,720],{"class":737},[720,16329,742],{"class":741},[720,16331,745],{"class":733},[720,16333,748],{"class":733},[720,16335,15809],{"class":751},[720,16337,748],{"class":733},[720,16339,757],{"class":733},[720,16341,1104],{"class":760},[720,16343,764],{"class":733},[720,16345,720],{"class":737},[720,16347,757],{"class":733},[720,16349,16350],{"class":760}," jobs\n",[720,16352,16353,16355,16357],{"class":722,"line":3636},[720,16354,1849],{"class":733},[720,16356,1094],{"class":737},[720,16358,769],{"class":733},[720,16360,16361,16363,16365,16367,16369,16371,16373,16375,16377,16379,16381,16383,16385],{"class":722,"line":3645},[720,16362,1447],{"class":733},[720,16364,1094],{"class":737},[720,16366,1097],{"class":741},[720,16368,745],{"class":733},[720,16370,748],{"class":733},[720,16372,1104],{"class":751},[720,16374,748],{"class":733},[720,16376,742],{"class":741},[720,16378,745],{"class":733},[720,16380,748],{"class":733},[720,16382,15857],{"class":751},[720,16384,748],{"class":733},[720,16386,769],{"class":733},[720,16388,16389,16391,16393,16395,16397,16399,16401,16403,16405,16407,16409,16411,16413],{"class":722,"line":3654},[720,16390,1736],{"class":733},[720,16392,720],{"class":737},[720,16394,742],{"class":741},[720,16396,745],{"class":733},[720,16398,748],{"class":733},[720,16400,15809],{"class":751},[720,16402,748],{"class":733},[720,16404,757],{"class":733},[720,16406,1104],{"class":760},[720,16408,764],{"class":733},[720,16410,720],{"class":737},[720,16412,757],{"class":733},[720,16414,16415],{"class":760}," projects\n",[720,16417,16418,16420,16422],{"class":722,"line":5038},[720,16419,1849],{"class":733},[720,16421,1094],{"class":737},[720,16423,769],{"class":733},[720,16425,16426,16428,16430,16432,16434,16436,16438,16440,16442,16444,16446,16448,16450],{"class":722,"line":5053},[720,16427,1447],{"class":733},[720,16429,1094],{"class":737},[720,16431,1097],{"class":741},[720,16433,745],{"class":733},[720,16435,748],{"class":733},[720,16437,1104],{"class":751},[720,16439,748],{"class":733},[720,16441,742],{"class":741},[720,16443,745],{"class":733},[720,16445,748],{"class":733},[720,16447,15857],{"class":751},[720,16449,748],{"class":733},[720,16451,769],{"class":733},[720,16453,16454,16456,16458,16460,16462,16464,16466,16468,16470,16472,16474,16476,16478],{"class":722,"line":5058},[720,16455,1736],{"class":733},[720,16457,720],{"class":737},[720,16459,742],{"class":741},[720,16461,745],{"class":733},[720,16463,748],{"class":733},[720,16465,15809],{"class":751},[720,16467,748],{"class":733},[720,16469,757],{"class":733},[720,16471,1104],{"class":760},[720,16473,764],{"class":733},[720,16475,720],{"class":737},[720,16477,757],{"class":733},[720,16479,16480],{"class":760}," resources\n",[720,16482,16483,16485,16487],{"class":722,"line":5067},[720,16484,1849],{"class":733},[720,16486,1094],{"class":737},[720,16488,769],{"class":733},[720,16490,16491,16493,16495,16497,16499,16501,16503,16505,16507,16509,16511,16513,16515],{"class":722,"line":5072},[720,16492,1447],{"class":733},[720,16494,1094],{"class":737},[720,16496,1097],{"class":741},[720,16498,745],{"class":733},[720,16500,748],{"class":733},[720,16502,1104],{"class":751},[720,16504,748],{"class":733},[720,16506,742],{"class":741},[720,16508,745],{"class":733},[720,16510,748],{"class":733},[720,16512,15857],{"class":751},[720,16514,748],{"class":733},[720,16516,769],{"class":733},[720,16518,16519,16521,16523,16525,16527,16529,16531,16533,16535,16537,16539,16541,16543],{"class":722,"line":5092},[720,16520,1736],{"class":733},[720,16522,720],{"class":737},[720,16524,742],{"class":741},[720,16526,745],{"class":733},[720,16528,748],{"class":733},[720,16530,15809],{"class":751},[720,16532,748],{"class":733},[720,16534,757],{"class":733},[720,16536,1104],{"class":760},[720,16538,764],{"class":733},[720,16540,720],{"class":737},[720,16542,757],{"class":733},[720,16544,16545],{"class":760}," events\n",[720,16547,16548,16550,16552],{"class":722,"line":5111},[720,16549,1849],{"class":733},[720,16551,1094],{"class":737},[720,16553,769],{"class":733},[720,16555,16556,16558,16560,16562,16564,16566,16568,16570,16572,16574,16576,16578,16580],{"class":722,"line":5117},[720,16557,1447],{"class":733},[720,16559,1094],{"class":737},[720,16561,1097],{"class":741},[720,16563,745],{"class":733},[720,16565,748],{"class":733},[720,16567,1104],{"class":751},[720,16569,748],{"class":733},[720,16571,742],{"class":741},[720,16573,745],{"class":733},[720,16575,748],{"class":733},[720,16577,15857],{"class":751},[720,16579,748],{"class":733},[720,16581,769],{"class":733},[720,16583,16584,16586,16588,16590,16592,16594,16596,16598,16600,16602,16604,16606,16608],{"class":722,"line":5126},[720,16585,1736],{"class":733},[720,16587,720],{"class":737},[720,16589,742],{"class":741},[720,16591,745],{"class":733},[720,16593,748],{"class":733},[720,16595,15809],{"class":751},[720,16597,748],{"class":733},[720,16599,757],{"class":733},[720,16601,1104],{"class":760},[720,16603,764],{"class":733},[720,16605,720],{"class":737},[720,16607,757],{"class":733},[720,16609,16610],{"class":760}," feedback\n",[720,16612,16613,16615,16617],{"class":722,"line":5135},[720,16614,1849],{"class":733},[720,16616,1094],{"class":737},[720,16618,769],{"class":733},[720,16620,16621,16623,16625,16627,16629,16631,16633,16635,16637,16639,16641,16643,16645],{"class":722,"line":5140},[720,16622,1447],{"class":733},[720,16624,1094],{"class":737},[720,16626,1097],{"class":741},[720,16628,745],{"class":733},[720,16630,748],{"class":733},[720,16632,1104],{"class":751},[720,16634,748],{"class":733},[720,16636,742],{"class":741},[720,16638,745],{"class":733},[720,16640,748],{"class":733},[720,16642,15857],{"class":751},[720,16644,748],{"class":733},[720,16646,769],{"class":733},[720,16648,16649,16651,16653,16655,16657,16659,16661,16663,16665,16667,16669,16671,16673],{"class":722,"line":5159},[720,16650,1736],{"class":733},[720,16652,720],{"class":737},[720,16654,742],{"class":741},[720,16656,745],{"class":733},[720,16658,748],{"class":733},[720,16660,15809],{"class":751},[720,16662,748],{"class":733},[720,16664,757],{"class":733},[720,16666,1104],{"class":760},[720,16668,764],{"class":733},[720,16670,720],{"class":737},[720,16672,757],{"class":733},[720,16674,16675],{"class":760}," mentoring\n",[720,16677,16678,16680,16682],{"class":722,"line":5168},[720,16679,1849],{"class":733},[720,16681,1094],{"class":737},[720,16683,769],{"class":733},[720,16685,16686,16688,16690,16692,16694,16696,16698,16700,16702,16704,16706,16708,16710],{"class":722,"line":5187},[720,16687,1447],{"class":733},[720,16689,1094],{"class":737},[720,16691,1097],{"class":741},[720,16693,745],{"class":733},[720,16695,748],{"class":733},[720,16697,1104],{"class":751},[720,16699,748],{"class":733},[720,16701,742],{"class":741},[720,16703,745],{"class":733},[720,16705,748],{"class":733},[720,16707,15857],{"class":751},[720,16709,748],{"class":733},[720,16711,769],{"class":733},[720,16713,16714,16716,16718,16720,16722,16724,16726,16728,16730,16732,16734,16736,16738],{"class":722,"line":5216},[720,16715,1736],{"class":733},[720,16717,720],{"class":737},[720,16719,742],{"class":741},[720,16721,745],{"class":733},[720,16723,748],{"class":733},[720,16725,15809],{"class":751},[720,16727,748],{"class":733},[720,16729,757],{"class":733},[720,16731,1104],{"class":760},[720,16733,764],{"class":733},[720,16735,720],{"class":737},[720,16737,757],{"class":733},[720,16739,16740],{"class":760}," open-source\n",[720,16742,16743,16745,16747],{"class":722,"line":5244},[720,16744,1849],{"class":733},[720,16746,1094],{"class":737},[720,16748,769],{"class":733},[720,16750,16751,16753,16755],{"class":722,"line":5253},[720,16752,1510],{"class":733},[720,16754,1069],{"class":737},[720,16756,769],{"class":733},[720,16758,16759],{"class":722,"line":5281},[720,16760,833],{"emptyLinePlaceholder":832},[720,16762,16763],{"class":722,"line":5300},[720,16764,16765],{"class":726}," \u003C!-- Footer sidebar — fixed -->\n",[720,16767,16768,16770,16772,16774,16776,16778,16781,16783],{"class":722,"line":5306},[720,16769,956],{"class":733},[720,16771,738],{"class":737},[720,16773,742],{"class":741},[720,16775,745],{"class":733},[720,16777,748],{"class":733},[720,16779,16780],{"class":751},"p-4 border-t",[720,16782,748],{"class":733},[720,16784,769],{"class":733},[720,16786,16787,16789,16791,16793,16795,16797,16800,16802],{"class":722,"line":5312},[720,16788,1447],{"class":733},[720,16790,738],{"class":737},[720,16792,742],{"class":741},[720,16794,745],{"class":733},[720,16796,748],{"class":733},[720,16798,16799],{"class":751},"flex items-center gap-2",[720,16801,748],{"class":733},[720,16803,769],{"class":733},[720,16805,16806,16808,16810,16812,16814,16816,16819,16821,16823,16825],{"class":722,"line":5321},[720,16807,1736],{"class":733},[720,16809,738],{"class":737},[720,16811,742],{"class":741},[720,16813,745],{"class":733},[720,16815,748],{"class":733},[720,16817,16818],{"class":751},"w-8 h-8 bg-indigo-500 rounded-full",[720,16820,748],{"class":733},[720,16822,881],{"class":733},[720,16824,738],{"class":737},[720,16826,769],{"class":733},[720,16828,16829,16831,16833,16835,16837,16839,16842,16844,16846,16849,16851,16853],{"class":722,"line":5330},[720,16830,1736],{"class":733},[720,16832,720],{"class":737},[720,16834,742],{"class":741},[720,16836,745],{"class":733},[720,16838,748],{"class":733},[720,16840,16841],{"class":751},"text-sm font-medium",[720,16843,748],{"class":733},[720,16845,757],{"class":733},[720,16847,16848],{"class":760},"User Name",[720,16850,764],{"class":733},[720,16852,720],{"class":737},[720,16854,769],{"class":733},[720,16856,16857,16859,16861],{"class":722,"line":5350},[720,16858,1849],{"class":733},[720,16860,738],{"class":737},[720,16862,769],{"class":733},[720,16864,16865,16867,16869],{"class":722,"line":5355},[720,16866,1510],{"class":733},[720,16868,738],{"class":737},[720,16870,769],{"class":733},[720,16872,16873,16875,16877],{"class":722,"line":5364},[720,16874,1014],{"class":733},[720,16876,1633],{"class":737},[720,16878,769],{"class":733},[720,16880,16881],{"class":722,"line":5373},[720,16882,833],{"emptyLinePlaceholder":832},[720,16884,16885],{"class":722,"line":5382},[720,16886,1878],{"class":726},[720,16888,16889,16891,16893,16895,16897,16899,16902,16904],{"class":722,"line":5391},[720,16890,865],{"class":733},[720,16892,1885],{"class":737},[720,16894,742],{"class":741},[720,16896,745],{"class":733},[720,16898,748],{"class":733},[720,16900,16901],{"class":751},"flex-1 p-6",[720,16903,748],{"class":733},[720,16905,769],{"class":733},[720,16907,16908,16910,16912,16914,16916,16918,16920,16922,16924,16927,16929,16931],{"class":722,"line":5400},[720,16909,956],{"class":733},[720,16911,1992],{"class":737},[720,16913,742],{"class":741},[720,16915,745],{"class":733},[720,16917,748],{"class":733},[720,16919,2001],{"class":751},[720,16921,748],{"class":733},[720,16923,757],{"class":733},[720,16925,16926],{"class":760},"Main Content Area",[720,16928,764],{"class":733},[720,16930,1992],{"class":737},[720,16932,769],{"class":733},[720,16934,16935,16937,16939],{"class":722,"line":11385},[720,16936,1014],{"class":733},[720,16938,1885],{"class":737},[720,16940,769],{"class":733},[720,16942,16943,16945,16947],{"class":722,"line":11405},[720,16944,764],{"class":733},[720,16946,738],{"class":737},[720,16948,769],{"class":733},[435,16950,441,16951,16954,16955,16958,16959,16962,16963,16965,16966,16969],{"color":437,"icon":438},[443,16952,16953],{},"Scrollable sidebar pattern:"," Cấu trúc ",[458,16956,16957],{},"flex flex-col"," với header (fixed), nav giữa ",[458,16960,16961],{},"flex-1 overflow-y-auto",", footer (fixed). ",[458,16964,4487],{}," làm nav chiếm hết chiều cao còn lại, ",[458,16967,16968],{},"overflow-y-auto"," chỉ hiện scrollbar khi nội dung vượt quá.",[488,16971],{},[427,16973,16975],{"id":16974},"_9-scrollbar-styling-v43-new","9. Scrollbar Styling (v4.3 NEW)",[431,16977,16978],{},"Tailwind CSS v4.3 thêm built-in scrollbar utilities — không cần plugin riêng nữa.",[502,16980,16981,16991],{},[505,16982,16983],{},[508,16984,16985,16987,16989],{},[511,16986,513],{},[511,16988,516],{},[511,16990,519],{},[521,16992,16993,17005,17017,17030,17045,17060],{},[508,16994,16995,17000,17003],{},[526,16996,16997],{},[458,16998,16999],{},"scrollbar-auto",[526,17001,17002],{},"Scrollbar mặc định của OS",[526,17004],{},[508,17006,17007,17012,17015],{},[526,17008,17009],{},[458,17010,17011],{},"scrollbar-thin",[526,17013,17014],{},"Scrollbar mỏng hơn",[526,17016],{},[508,17018,17019,17024,17027],{},[526,17020,17021],{},[458,17022,17023],{},"scrollbar-none",[526,17025,17026],{},"Ẩn scrollbar nhưng vẫn scroll được",[526,17028,17029],{},"Cực kỳ hữu ích",[508,17031,17032,17037,17040],{},[526,17033,17034],{},[458,17035,17036],{},"scrollbar-thumb-*",[526,17038,17039],{},"Màu của thumb (phần kéo)",[526,17041,17042],{},[458,17043,17044],{},"scrollbar-thumb-gray-300",[508,17046,17047,17052,17055],{},[526,17048,17049],{},[458,17050,17051],{},"scrollbar-track-*",[526,17053,17054],{},"Màu của track (rãnh)",[526,17056,17057],{},[458,17058,17059],{},"scrollbar-track-gray-100",[508,17061,17062,17067,17070],{},[526,17063,17064],{},[458,17065,17066],{},"scrollbar-gutter-stable",[526,17068,17069],{},"Dành chỗ cho scrollbar ngay cả khi không scroll",[526,17071,17072],{},"Tránh layout shift",[711,17074,17076],{"className":713,"code":17075,"language":715,"meta":716,"style":716},"\u003C!-- Scrollbar mỏng với màu tùy chỉnh -->\n\u003Cdiv class=\"h-48 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 p-4 bg-white rounded-lg\">\n \u003Cp class=\"text-gray-700\">Nội dung cuộn với scrollbar được style...\u003C\u002Fp>\n \u003C!-- nhiều content -->\n\u003C\u002Fdiv>\n\n\u003C!-- Ẩn scrollbar nhưng vẫn scroll -->\n\u003Cdiv class=\"h-48 overflow-y-auto scrollbar-none p-4 bg-white rounded-lg\">\n \u003Cp class=\"text-gray-700\">Scrollbar bị ẩn nhưng vẫn scroll được bằng touch\u002Fswipe\u002Fwheel...\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003C!-- scrollbar-gutter: tránh layout shift -->\n\u003Cdiv class=\"h-48 overflow-y-auto scrollbar-gutter-stable p-4 bg-white rounded-lg\">\n \u003Cp>Dành chỗ cho scrollbar ngay cả khi chưa đủ nội dung để scroll → không bị giật layout.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[458,17077,17078,17083,17102,17130,17135,17143,17147,17152,17171,17198,17206,17210,17215,17234,17251],{"__ignoreMap":716},[720,17079,17080],{"class":722,"line":723},[720,17081,17082],{"class":726},"\u003C!-- Scrollbar mỏng với màu tùy chỉnh -->\n",[720,17084,17085,17087,17089,17091,17093,17095,17098,17100],{"class":722,"line":730},[720,17086,734],{"class":733},[720,17088,738],{"class":737},[720,17090,742],{"class":741},[720,17092,745],{"class":733},[720,17094,748],{"class":733},[720,17096,17097],{"class":751},"h-48 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-400 scrollbar-track-gray-100 p-4 bg-white rounded-lg",[720,17099,748],{"class":733},[720,17101,769],{"class":733},[720,17103,17104,17106,17108,17110,17112,17114,17117,17119,17121,17124,17126,17128],{"class":722,"line":772},[720,17105,865],{"class":733},[720,17107,431],{"class":737},[720,17109,742],{"class":741},[720,17111,745],{"class":733},[720,17113,748],{"class":733},[720,17115,17116],{"class":751},"text-gray-700",[720,17118,748],{"class":733},[720,17120,757],{"class":733},[720,17122,17123],{"class":760},"Nội dung cuộn với scrollbar được style...",[720,17125,764],{"class":733},[720,17127,431],{"class":737},[720,17129,769],{"class":733},[720,17131,17132],{"class":722,"line":801},[720,17133,17134],{"class":726}," \u003C!-- nhiều content -->\n",[720,17136,17137,17139,17141],{"class":722,"line":829},[720,17138,764],{"class":733},[720,17140,738],{"class":737},[720,17142,769],{"class":733},[720,17144,17145],{"class":722,"line":836},[720,17146,833],{"emptyLinePlaceholder":832},[720,17148,17149],{"class":722,"line":842},[720,17150,17151],{"class":726},"\u003C!-- Ẩn scrollbar nhưng vẫn scroll -->\n",[720,17153,17154,17156,17158,17160,17162,17164,17167,17169],{"class":722,"line":862},[720,17155,734],{"class":733},[720,17157,738],{"class":737},[720,17159,742],{"class":741},[720,17161,745],{"class":733},[720,17163,748],{"class":733},[720,17165,17166],{"class":751},"h-48 overflow-y-auto scrollbar-none p-4 bg-white rounded-lg",[720,17168,748],{"class":733},[720,17170,769],{"class":733},[720,17172,17173,17175,17177,17179,17181,17183,17185,17187,17189,17192,17194,17196],{"class":722,"line":888},[720,17174,865],{"class":733},[720,17176,431],{"class":737},[720,17178,742],{"class":741},[720,17180,745],{"class":733},[720,17182,748],{"class":733},[720,17184,17116],{"class":751},[720,17186,748],{"class":733},[720,17188,757],{"class":733},[720,17190,17191],{"class":760},"Scrollbar bị ẩn nhưng vẫn scroll được bằng touch\u002Fswipe\u002Fwheel...",[720,17193,764],{"class":733},[720,17195,431],{"class":737},[720,17197,769],{"class":733},[720,17199,17200,17202,17204],{"class":722,"line":894},[720,17201,764],{"class":733},[720,17203,738],{"class":737},[720,17205,769],{"class":733},[720,17207,17208],{"class":722,"line":903},[720,17209,833],{"emptyLinePlaceholder":832},[720,17211,17212],{"class":722,"line":908},[720,17213,17214],{"class":726},"\u003C!-- scrollbar-gutter: tránh layout shift -->\n",[720,17216,17217,17219,17221,17223,17225,17227,17230,17232],{"class":722,"line":914},[720,17218,734],{"class":733},[720,17220,738],{"class":737},[720,17222,742],{"class":741},[720,17224,745],{"class":733},[720,17226,748],{"class":733},[720,17228,17229],{"class":751},"h-48 overflow-y-auto scrollbar-gutter-stable p-4 bg-white rounded-lg",[720,17231,748],{"class":733},[720,17233,769],{"class":733},[720,17235,17236,17238,17240,17242,17245,17247,17249],{"class":722,"line":934},[720,17237,865],{"class":733},[720,17239,431],{"class":737},[720,17241,757],{"class":733},[720,17243,17244],{"class":760},"Dành chỗ cho scrollbar ngay cả khi chưa đủ nội dung để scroll → không bị giật layout.",[720,17246,764],{"class":733},[720,17248,431],{"class":737},[720,17250,769],{"class":733},[720,17252,17253,17255,17257],{"class":722,"line":953},[720,17254,764],{"class":733},[720,17256,738],{"class":737},[720,17258,769],{"class":733},[706,17260,17262],{"id":17261},"bài-tập-19-custom-scrollbar-cho-chat-message-list","Bài tập 19: Custom scrollbar cho chat message list",[431,17264,17265,17267],{},[443,17266,1056],{}," Khung chat với danh sách tin nhắn có scrollbar tùy chỉnh — mỏng, màu phù hợp theme, gutter stable.",[711,17269,17271],{"className":713,"code":17270,"language":715,"meta":716,"style":716},"\u003Cdiv class=\"max-w-md mx-auto bg-white rounded-2xl shadow-lg overflow-hidden flex flex-col\" style=\"height: 500px;\">\n \u003C!-- Chat header -->\n \u003Cdiv class=\"px-5 py-4 border-b flex items-center gap-3\">\n \u003Cdiv class=\"w-10 h-10 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full flex items-center justify-center text-white font-bold\">\n A\n \u003C\u002Fdiv>\n \u003Cdiv>\n \u003Ch3 class=\"font-semibold text-gray-900\">Alice Nguyen\u003C\u002Fh3>\n \u003Cp class=\"text-xs text-green-500\">Online\u003C\u002Fp>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Message list — scrollable với custom scrollbar -->\n \u003Cdiv class=\"flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300\n scrollbar-track-transparent scrollbar-gutter-stable\n hover:scrollbar-thumb-gray-400 transition-colors\n px-5 py-4 space-y-4\">\n \u003C!-- Received message -->\n \u003Cdiv class=\"flex gap-3\">\n \u003Cdiv class=\"w-8 h-8 bg-gray-300 rounded-full flex-shrink-0 mt-1\">\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-gray-100 rounded-2xl rounded-tl-sm px-4 py-2.5 max-w-[75%]\">\n \u003Cp class=\"text-sm text-gray-800\">Chào bạn! Khóa học Tailwind CSS v4 thế nào rồi?\u003C\u002Fp>\n \u003Cspan class=\"text-xs text-gray-400 mt-1 block\">10:30 AM\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Sent message -->\n \u003Cdiv class=\"flex gap-3 justify-end\">\n \u003Cdiv class=\"bg-blue-600 text-white rounded-2xl rounded-tr-sm px-4 py-2.5 max-w-[75%]\">\n \u003Cp class=\"text-sm\">Rất hay! Đang học phần Layout & Spacing. Container queries mới cực kỳ hữu ích.\u003C\u002Fp>\n \u003Cspan class=\"text-xs text-blue-200 mt-1 block\">10:31 AM\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"w-8 h-8 bg-blue-500 rounded-full flex-shrink-0 mt-1\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Received message 2 -->\n \u003Cdiv class=\"flex gap-3\">\n \u003Cdiv class=\"w-8 h-8 bg-gray-300 rounded-full flex-shrink-0 mt-1\">\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-gray-100 rounded-2xl rounded-tl-sm px-4 py-2.5 max-w-[75%]\">\n \u003Cp class=\"text-sm text-gray-800\">Tuyệt! Phần scrollbar mới trong v4.3 cũng rất đáng học. Để mình gửi link docs cho.\u003C\u002Fp>\n \u003Cspan class=\"text-xs text-gray-400 mt-1 block\">10:32 AM\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Sent message 2 -->\n \u003Cdiv class=\"flex gap-3 justify-end\">\n \u003Cdiv class=\"bg-blue-600 text-white rounded-2xl rounded-tr-sm px-4 py-2.5 max-w-[75%]\">\n \u003Cp class=\"text-sm\">Cảm ơn bạn! Để mình xem thử.\u003C\u002Fp>\n \u003Cspan class=\"text-xs text-blue-200 mt-1 block\">10:33 AM\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"w-8 h-8 bg-blue-500 rounded-full flex-shrink-0 mt-1\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Tin nhắn dài tạo scroll -->\n \u003Cdiv class=\"flex justify-center\">\n \u003Cspan class=\"text-xs text-gray-400 bg-gray-50 px-3 py-1 rounded-full\">Hôm nay\u003C\u002Fspan>\n \u003C\u002Fdiv>\n\n \u003C!-- Received message 3 -->\n \u003Cdiv class=\"flex gap-3\">\n \u003Cdiv class=\"w-8 h-8 bg-gray-300 rounded-full flex-shrink-0 mt-1\">\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-gray-100 rounded-2xl rounded-tl-sm px-4 py-2.5 max-w-[75%]\">\n \u003Cp class=\"text-sm text-gray-800\">À, bài tập trong tài liệu — nhớ làm hết nhé! Mỗi bài đều có pattern thực tế áp dụng được ngay.\u003C\u002Fp>\n \u003Cspan class=\"text-xs text-gray-400 mt-1 block\">10:35 AM\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Sent message 3 -->\n \u003Cdiv class=\"flex gap-3 justify-end\">\n \u003Cdiv class=\"bg-blue-600 text-white rounded-2xl rounded-tr-sm px-4 py-2.5 max-w-[75%]\">\n \u003Cp class=\"text-sm\">Yes sir! Đang làm đến bài tập 19 luôn nè.\u003C\u002Fp>\n \u003Cspan class=\"text-xs text-blue-200 mt-1 block\">10:36 AM\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003Cdiv class=\"w-8 h-8 bg-blue-500 rounded-full flex-shrink-0 mt-1\">\u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Received message 4 -->\n \u003Cdiv class=\"flex gap-3\">\n \u003Cdiv class=\"w-8 h-8 bg-gray-300 rounded-full flex-shrink-0 mt-1\">\u003C\u002Fdiv>\n \u003Cdiv class=\"bg-gray-100 rounded-2xl rounded-tl-sm px-4 py-2.5 max-w-[75%]\">\n \u003Cp class=\"text-sm text-gray-800\">Good job! Học xong phần này là master layout Tailwind rồi. Tiếp theo là Typography & Colors nhé!\u003C\u002Fp>\n \u003Cspan class=\"text-xs text-gray-400 mt-1 block\">10:37 AM\u003C\u002Fspan>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n \u003C\u002Fdiv>\n\n \u003C!-- Input area -->\n \u003Cdiv class=\"px-5 py-4 border-t flex gap-3\">\n \u003Cinput type=\"text\" placeholder=\"Nhập tin nhắn...\"\n class=\"flex-1 bg-gray-100 rounded-full px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors\">\n \u003Cbutton class=\"bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors flex-shrink-0\">\n \u003Csvg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n \u003Cpath stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14M12 5l7 7-7 7\"\u002F>\n \u003C\u002Fsvg>\n \u003C\u002Fbutton>\n \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[458,17272,17273,17304,17309,17328,17347,17352,17360,17368,17396,17424,17432,17440,17444,17449,17464,17469,17474,17483,17488,17506,17529,17548,17576,17604,17612,17620,17624,17629,17648,17667,17695,17723,17731,17754,17762,17766,17771,17789,17811,17829,17856,17883,17891,17899,17903,17908,17926,17944,17971,17998,18006,18028,18036,18040,18045,18064,18092,18100,18104,18109,18127,18149,18167,18194,18221,18229,18237,18241,18246,18264,18282,18309,18336,18344,18366,18374,18378,18383,18401,18423,18441,18468,18495,18503,18511,18519,18523,18528,18547,18578,18594,18614,18664,18715,18724,18733,18742],{"__ignoreMap":716},[720,17274,17275,17277,17279,17281,17283,17285,17288,17290,17293,17295,17297,17300,17302],{"class":722,"line":723},[720,17276,734],{"class":733},[720,17278,738],{"class":737},[720,17280,742],{"class":741},[720,17282,745],{"class":733},[720,17284,748],{"class":733},[720,17286,17287],{"class":751},"max-w-md mx-auto bg-white rounded-2xl shadow-lg overflow-hidden flex flex-col",[720,17289,748],{"class":733},[720,17291,17292],{"class":741}," style",[720,17294,745],{"class":733},[720,17296,748],{"class":733},[720,17298,17299],{"class":751},"height: 500px;",[720,17301,748],{"class":733},[720,17303,769],{"class":733},[720,17305,17306],{"class":722,"line":730},[720,17307,17308],{"class":726}," \u003C!-- Chat header -->\n",[720,17310,17311,17313,17315,17317,17319,17321,17324,17326],{"class":722,"line":772},[720,17312,865],{"class":733},[720,17314,738],{"class":737},[720,17316,742],{"class":741},[720,17318,745],{"class":733},[720,17320,748],{"class":733},[720,17322,17323],{"class":751},"px-5 py-4 border-b flex items-center gap-3",[720,17325,748],{"class":733},[720,17327,769],{"class":733},[720,17329,17330,17332,17334,17336,17338,17340,17343,17345],{"class":722,"line":801},[720,17331,956],{"class":733},[720,17333,738],{"class":737},[720,17335,742],{"class":741},[720,17337,745],{"class":733},[720,17339,748],{"class":733},[720,17341,17342],{"class":751},"w-10 h-10 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-full flex items-center justify-center text-white font-bold",[720,17344,748],{"class":733},[720,17346,769],{"class":733},[720,17348,17349],{"class":722,"line":829},[720,17350,17351],{"class":760}," A\n",[720,17353,17354,17356,17358],{"class":722,"line":836},[720,17355,1510],{"class":733},[720,17357,738],{"class":737},[720,17359,769],{"class":733},[720,17361,17362,17364,17366],{"class":722,"line":842},[720,17363,956],{"class":733},[720,17365,738],{"class":737},[720,17367,769],{"class":733},[720,17369,17370,17372,17374,17376,17378,17380,17383,17385,17387,17390,17392,17394],{"class":722,"line":862},[720,17371,1447],{"class":733},[720,17373,706],{"class":737},[720,17375,742],{"class":741},[720,17377,745],{"class":733},[720,17379,748],{"class":733},[720,17381,17382],{"class":751},"font-semibold text-gray-900",[720,17384,748],{"class":733},[720,17386,757],{"class":733},[720,17388,17389],{"class":760},"Alice Nguyen",[720,17391,764],{"class":733},[720,17393,706],{"class":737},[720,17395,769],{"class":733},[720,17397,17398,17400,17402,17404,17406,17408,17411,17413,17415,17418,17420,17422],{"class":722,"line":888},[720,17399,1447],{"class":733},[720,17401,431],{"class":737},[720,17403,742],{"class":741},[720,17405,745],{"class":733},[720,17407,748],{"class":733},[720,17409,17410],{"class":751},"text-xs text-green-500",[720,17412,748],{"class":733},[720,17414,757],{"class":733},[720,17416,17417],{"class":760},"Online",[720,17419,764],{"class":733},[720,17421,431],{"class":737},[720,17423,769],{"class":733},[720,17425,17426,17428,17430],{"class":722,"line":894},[720,17427,1510],{"class":733},[720,17429,738],{"class":737},[720,17431,769],{"class":733},[720,17433,17434,17436,17438],{"class":722,"line":903},[720,17435,1014],{"class":733},[720,17437,738],{"class":737},[720,17439,769],{"class":733},[720,17441,17442],{"class":722,"line":908},[720,17443,833],{"emptyLinePlaceholder":832},[720,17445,17446],{"class":722,"line":914},[720,17447,17448],{"class":726}," \u003C!-- Message list — scrollable với custom scrollbar -->\n",[720,17450,17451,17453,17455,17457,17459,17461],{"class":722,"line":934},[720,17452,865],{"class":733},[720,17454,738],{"class":737},[720,17456,742],{"class":741},[720,17458,745],{"class":733},[720,17460,748],{"class":733},[720,17462,17463],{"class":751},"flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300\n",[720,17465,17466],{"class":722,"line":953},[720,17467,17468],{"class":751}," scrollbar-track-transparent scrollbar-gutter-stable\n",[720,17470,17471],{"class":722,"line":983},[720,17472,17473],{"class":751}," hover:scrollbar-thumb-gray-400 transition-colors\n",[720,17475,17476,17479,17481],{"class":722,"line":1011},[720,17477,17478],{"class":751}," px-5 py-4 space-y-4",[720,17480,748],{"class":733},[720,17482,769],{"class":733},[720,17484,17485],{"class":722,"line":1021},[720,17486,17487],{"class":726}," \u003C!-- Received message -->\n",[720,17489,17490,17492,17494,17496,17498,17500,17502,17504],{"class":722,"line":1367},[720,17491,956],{"class":733},[720,17493,738],{"class":737},[720,17495,742],{"class":741},[720,17497,745],{"class":733},[720,17499,748],{"class":733},[720,17501,13771],{"class":751},[720,17503,748],{"class":733},[720,17505,769],{"class":733},[720,17507,17508,17510,17512,17514,17516,17518,17521,17523,17525,17527],{"class":722,"line":1387},[720,17509,1447],{"class":733},[720,17511,738],{"class":737},[720,17513,742],{"class":741},[720,17515,745],{"class":733},[720,17517,748],{"class":733},[720,17519,17520],{"class":751},"w-8 h-8 bg-gray-300 rounded-full flex-shrink-0 mt-1",[720,17522,748],{"class":733},[720,17524,881],{"class":733},[720,17526,738],{"class":737},[720,17528,769],{"class":733},[720,17530,17531,17533,17535,17537,17539,17541,17544,17546],{"class":722,"line":1444},[720,17532,1447],{"class":733},[720,17534,738],{"class":737},[720,17536,742],{"class":741},[720,17538,745],{"class":733},[720,17540,748],{"class":733},[720,17542,17543],{"class":751},"bg-gray-100 rounded-2xl rounded-tl-sm px-4 py-2.5 max-w-[75%]",[720,17545,748],{"class":733},[720,17547,769],{"class":733},[720,17549,17550,17552,17554,17556,17558,17560,17563,17565,17567,17570,17572,17574],{"class":722,"line":1489},[720,17551,1736],{"class":733},[720,17553,431],{"class":737},[720,17555,742],{"class":741},[720,17557,745],{"class":733},[720,17559,748],{"class":733},[720,17561,17562],{"class":751},"text-sm text-gray-800",[720,17564,748],{"class":733},[720,17566,757],{"class":733},[720,17568,17569],{"class":760},"Chào bạn! Khóa học Tailwind CSS v4 thế nào rồi?",[720,17571,764],{"class":733},[720,17573,431],{"class":737},[720,17575,769],{"class":733},[720,17577,17578,17580,17582,17584,17586,17588,17591,17593,17595,17598,17600,17602],{"class":722,"line":1507},[720,17579,1736],{"class":733},[720,17581,720],{"class":737},[720,17583,742],{"class":741},[720,17585,745],{"class":733},[720,17587,748],{"class":733},[720,17589,17590],{"class":751},"text-xs text-gray-400 mt-1 block",[720,17592,748],{"class":733},[720,17594,757],{"class":733},[720,17596,17597],{"class":760},"10:30 AM",[720,17599,764],{"class":733},[720,17601,720],{"class":737},[720,17603,769],{"class":733},[720,17605,17606,17608,17610],{"class":722,"line":1517},[720,17607,1849],{"class":733},[720,17609,738],{"class":737},[720,17611,769],{"class":733},[720,17613,17614,17616,17618],{"class":722,"line":1526},[720,17615,1510],{"class":733},[720,17617,738],{"class":737},[720,17619,769],{"class":733},[720,17621,17622],{"class":722,"line":2017},[720,17623,833],{"emptyLinePlaceholder":832},[720,17625,17626],{"class":722,"line":2026},[720,17627,17628],{"class":726}," \u003C!-- Sent message -->\n",[720,17630,17631,17633,17635,17637,17639,17641,17644,17646],{"class":722,"line":3468},[720,17632,956],{"class":733},[720,17634,738],{"class":737},[720,17636,742],{"class":741},[720,17638,745],{"class":733},[720,17640,748],{"class":733},[720,17642,17643],{"class":751},"flex gap-3 justify-end",[720,17645,748],{"class":733},[720,17647,769],{"class":733},[720,17649,17650,17652,17654,17656,17658,17660,17663,17665],{"class":722,"line":3486},[720,17651,1447],{"class":733},[720,17653,738],{"class":737},[720,17655,742],{"class":741},[720,17657,745],{"class":733},[720,17659,748],{"class":733},[720,17661,17662],{"class":751},"bg-blue-600 text-white rounded-2xl rounded-tr-sm px-4 py-2.5 max-w-[75%]",[720,17664,748],{"class":733},[720,17666,769],{"class":733},[720,17668,17669,17671,17673,17675,17677,17679,17682,17684,17686,17689,17691,17693],{"class":722,"line":3496},[720,17670,1736],{"class":733},[720,17672,431],{"class":737},[720,17674,742],{"class":741},[720,17676,745],{"class":733},[720,17678,748],{"class":733},[720,17680,17681],{"class":751},"text-sm",[720,17683,748],{"class":733},[720,17685,757],{"class":733},[720,17687,17688],{"class":760},"Rất hay! Đang học phần Layout & Spacing. Container queries mới cực kỳ hữu ích.",[720,17690,764],{"class":733},[720,17692,431],{"class":737},[720,17694,769],{"class":733},[720,17696,17697,17699,17701,17703,17705,17707,17710,17712,17714,17717,17719,17721],{"class":722,"line":3505},[720,17698,1736],{"class":733},[720,17700,720],{"class":737},[720,17702,742],{"class":741},[720,17704,745],{"class":733},[720,17706,748],{"class":733},[720,17708,17709],{"class":751},"text-xs text-blue-200 mt-1 block",[720,17711,748],{"class":733},[720,17713,757],{"class":733},[720,17715,17716],{"class":760},"10:31 AM",[720,17718,764],{"class":733},[720,17720,720],{"class":737},[720,17722,769],{"class":733},[720,17724,17725,17727,17729],{"class":722,"line":3525},[720,17726,1849],{"class":733},[720,17728,738],{"class":737},[720,17730,769],{"class":733},[720,17732,17733,17735,17737,17739,17741,17743,17746,17748,17750,17752],{"class":722,"line":3553},[720,17734,1447],{"class":733},[720,17736,738],{"class":737},[720,17738,742],{"class":741},[720,17740,745],{"class":733},[720,17742,748],{"class":733},[720,17744,17745],{"class":751},"w-8 h-8 bg-blue-500 rounded-full flex-shrink-0 mt-1",[720,17747,748],{"class":733},[720,17749,881],{"class":733},[720,17751,738],{"class":737},[720,17753,769],{"class":733},[720,17755,17756,17758,17760],{"class":722,"line":3573},[720,17757,1510],{"class":733},[720,17759,738],{"class":737},[720,17761,769],{"class":733},[720,17763,17764],{"class":722,"line":3591},[720,17765,833],{"emptyLinePlaceholder":832},[720,17767,17768],{"class":722,"line":3609},[720,17769,17770],{"class":726}," \u003C!-- Received message 2 -->\n",[720,17772,17773,17775,17777,17779,17781,17783,17785,17787],{"class":722,"line":3618},[720,17774,956],{"class":733},[720,17776,738],{"class":737},[720,17778,742],{"class":741},[720,17780,745],{"class":733},[720,17782,748],{"class":733},[720,17784,13771],{"class":751},[720,17786,748],{"class":733},[720,17788,769],{"class":733},[720,17790,17791,17793,17795,17797,17799,17801,17803,17805,17807,17809],{"class":722,"line":3627},[720,17792,1447],{"class":733},[720,17794,738],{"class":737},[720,17796,742],{"class":741},[720,17798,745],{"class":733},[720,17800,748],{"class":733},[720,17802,17520],{"class":751},[720,17804,748],{"class":733},[720,17806,881],{"class":733},[720,17808,738],{"class":737},[720,17810,769],{"class":733},[720,17812,17813,17815,17817,17819,17821,17823,17825,17827],{"class":722,"line":3636},[720,17814,1447],{"class":733},[720,17816,738],{"class":737},[720,17818,742],{"class":741},[720,17820,745],{"class":733},[720,17822,748],{"class":733},[720,17824,17543],{"class":751},[720,17826,748],{"class":733},[720,17828,769],{"class":733},[720,17830,17831,17833,17835,17837,17839,17841,17843,17845,17847,17850,17852,17854],{"class":722,"line":3645},[720,17832,1736],{"class":733},[720,17834,431],{"class":737},[720,17836,742],{"class":741},[720,17838,745],{"class":733},[720,17840,748],{"class":733},[720,17842,17562],{"class":751},[720,17844,748],{"class":733},[720,17846,757],{"class":733},[720,17848,17849],{"class":760},"Tuyệt! Phần scrollbar mới trong v4.3 cũng rất đáng học. Để mình gửi link docs cho.",[720,17851,764],{"class":733},[720,17853,431],{"class":737},[720,17855,769],{"class":733},[720,17857,17858,17860,17862,17864,17866,17868,17870,17872,17874,17877,17879,17881],{"class":722,"line":3654},[720,17859,1736],{"class":733},[720,17861,720],{"class":737},[720,17863,742],{"class":741},[720,17865,745],{"class":733},[720,17867,748],{"class":733},[720,17869,17590],{"class":751},[720,17871,748],{"class":733},[720,17873,757],{"class":733},[720,17875,17876],{"class":760},"10:32 AM",[720,17878,764],{"class":733},[720,17880,720],{"class":737},[720,17882,769],{"class":733},[720,17884,17885,17887,17889],{"class":722,"line":5038},[720,17886,1849],{"class":733},[720,17888,738],{"class":737},[720,17890,769],{"class":733},[720,17892,17893,17895,17897],{"class":722,"line":5053},[720,17894,1510],{"class":733},[720,17896,738],{"class":737},[720,17898,769],{"class":733},[720,17900,17901],{"class":722,"line":5058},[720,17902,833],{"emptyLinePlaceholder":832},[720,17904,17905],{"class":722,"line":5067},[720,17906,17907],{"class":726}," \u003C!-- Sent message 2 -->\n",[720,17909,17910,17912,17914,17916,17918,17920,17922,17924],{"class":722,"line":5072},[720,17911,956],{"class":733},[720,17913,738],{"class":737},[720,17915,742],{"class":741},[720,17917,745],{"class":733},[720,17919,748],{"class":733},[720,17921,17643],{"class":751},[720,17923,748],{"class":733},[720,17925,769],{"class":733},[720,17927,17928,17930,17932,17934,17936,17938,17940,17942],{"class":722,"line":5092},[720,17929,1447],{"class":733},[720,17931,738],{"class":737},[720,17933,742],{"class":741},[720,17935,745],{"class":733},[720,17937,748],{"class":733},[720,17939,17662],{"class":751},[720,17941,748],{"class":733},[720,17943,769],{"class":733},[720,17945,17946,17948,17950,17952,17954,17956,17958,17960,17962,17965,17967,17969],{"class":722,"line":5111},[720,17947,1736],{"class":733},[720,17949,431],{"class":737},[720,17951,742],{"class":741},[720,17953,745],{"class":733},[720,17955,748],{"class":733},[720,17957,17681],{"class":751},[720,17959,748],{"class":733},[720,17961,757],{"class":733},[720,17963,17964],{"class":760},"Cảm ơn bạn! Để mình xem thử.",[720,17966,764],{"class":733},[720,17968,431],{"class":737},[720,17970,769],{"class":733},[720,17972,17973,17975,17977,17979,17981,17983,17985,17987,17989,17992,17994,17996],{"class":722,"line":5117},[720,17974,1736],{"class":733},[720,17976,720],{"class":737},[720,17978,742],{"class":741},[720,17980,745],{"class":733},[720,17982,748],{"class":733},[720,17984,17709],{"class":751},[720,17986,748],{"class":733},[720,17988,757],{"class":733},[720,17990,17991],{"class":760},"10:33 AM",[720,17993,764],{"class":733},[720,17995,720],{"class":737},[720,17997,769],{"class":733},[720,17999,18000,18002,18004],{"class":722,"line":5126},[720,18001,1849],{"class":733},[720,18003,738],{"class":737},[720,18005,769],{"class":733},[720,18007,18008,18010,18012,18014,18016,18018,18020,18022,18024,18026],{"class":722,"line":5135},[720,18009,1447],{"class":733},[720,18011,738],{"class":737},[720,18013,742],{"class":741},[720,18015,745],{"class":733},[720,18017,748],{"class":733},[720,18019,17745],{"class":751},[720,18021,748],{"class":733},[720,18023,881],{"class":733},[720,18025,738],{"class":737},[720,18027,769],{"class":733},[720,18029,18030,18032,18034],{"class":722,"line":5140},[720,18031,1510],{"class":733},[720,18033,738],{"class":737},[720,18035,769],{"class":733},[720,18037,18038],{"class":722,"line":5159},[720,18039,833],{"emptyLinePlaceholder":832},[720,18041,18042],{"class":722,"line":5168},[720,18043,18044],{"class":726}," \u003C!-- Tin nhắn dài tạo scroll -->\n",[720,18046,18047,18049,18051,18053,18055,18057,18060,18062],{"class":722,"line":5187},[720,18048,956],{"class":733},[720,18050,738],{"class":737},[720,18052,742],{"class":741},[720,18054,745],{"class":733},[720,18056,748],{"class":733},[720,18058,18059],{"class":751},"flex justify-center",[720,18061,748],{"class":733},[720,18063,769],{"class":733},[720,18065,18066,18068,18070,18072,18074,18076,18079,18081,18083,18086,18088,18090],{"class":722,"line":5216},[720,18067,1447],{"class":733},[720,18069,720],{"class":737},[720,18071,742],{"class":741},[720,18073,745],{"class":733},[720,18075,748],{"class":733},[720,18077,18078],{"class":751},"text-xs text-gray-400 bg-gray-50 px-3 py-1 rounded-full",[720,18080,748],{"class":733},[720,18082,757],{"class":733},[720,18084,18085],{"class":760},"Hôm nay",[720,18087,764],{"class":733},[720,18089,720],{"class":737},[720,18091,769],{"class":733},[720,18093,18094,18096,18098],{"class":722,"line":5244},[720,18095,1510],{"class":733},[720,18097,738],{"class":737},[720,18099,769],{"class":733},[720,18101,18102],{"class":722,"line":5253},[720,18103,833],{"emptyLinePlaceholder":832},[720,18105,18106],{"class":722,"line":5281},[720,18107,18108],{"class":726}," \u003C!-- Received message 3 -->\n",[720,18110,18111,18113,18115,18117,18119,18121,18123,18125],{"class":722,"line":5300},[720,18112,956],{"class":733},[720,18114,738],{"class":737},[720,18116,742],{"class":741},[720,18118,745],{"class":733},[720,18120,748],{"class":733},[720,18122,13771],{"class":751},[720,18124,748],{"class":733},[720,18126,769],{"class":733},[720,18128,18129,18131,18133,18135,18137,18139,18141,18143,18145,18147],{"class":722,"line":5306},[720,18130,1447],{"class":733},[720,18132,738],{"class":737},[720,18134,742],{"class":741},[720,18136,745],{"class":733},[720,18138,748],{"class":733},[720,18140,17520],{"class":751},[720,18142,748],{"class":733},[720,18144,881],{"class":733},[720,18146,738],{"class":737},[720,18148,769],{"class":733},[720,18150,18151,18153,18155,18157,18159,18161,18163,18165],{"class":722,"line":5312},[720,18152,1447],{"class":733},[720,18154,738],{"class":737},[720,18156,742],{"class":741},[720,18158,745],{"class":733},[720,18160,748],{"class":733},[720,18162,17543],{"class":751},[720,18164,748],{"class":733},[720,18166,769],{"class":733},[720,18168,18169,18171,18173,18175,18177,18179,18181,18183,18185,18188,18190,18192],{"class":722,"line":5321},[720,18170,1736],{"class":733},[720,18172,431],{"class":737},[720,18174,742],{"class":741},[720,18176,745],{"class":733},[720,18178,748],{"class":733},[720,18180,17562],{"class":751},[720,18182,748],{"class":733},[720,18184,757],{"class":733},[720,18186,18187],{"class":760},"À, bài tập trong tài liệu — nhớ làm hết nhé! Mỗi bài đều có pattern thực tế áp dụng được ngay.",[720,18189,764],{"class":733},[720,18191,431],{"class":737},[720,18193,769],{"class":733},[720,18195,18196,18198,18200,18202,18204,18206,18208,18210,18212,18215,18217,18219],{"class":722,"line":5330},[720,18197,1736],{"class":733},[720,18199,720],{"class":737},[720,18201,742],{"class":741},[720,18203,745],{"class":733},[720,18205,748],{"class":733},[720,18207,17590],{"class":751},[720,18209,748],{"class":733},[720,18211,757],{"class":733},[720,18213,18214],{"class":760},"10:35 AM",[720,18216,764],{"class":733},[720,18218,720],{"class":737},[720,18220,769],{"class":733},[720,18222,18223,18225,18227],{"class":722,"line":5350},[720,18224,1849],{"class":733},[720,18226,738],{"class":737},[720,18228,769],{"class":733},[720,18230,18231,18233,18235],{"class":722,"line":5355},[720,18232,1510],{"class":733},[720,18234,738],{"class":737},[720,18236,769],{"class":733},[720,18238,18239],{"class":722,"line":5364},[720,18240,833],{"emptyLinePlaceholder":832},[720,18242,18243],{"class":722,"line":5373},[720,18244,18245],{"class":726}," \u003C!-- Sent message 3 -->\n",[720,18247,18248,18250,18252,18254,18256,18258,18260,18262],{"class":722,"line":5382},[720,18249,956],{"class":733},[720,18251,738],{"class":737},[720,18253,742],{"class":741},[720,18255,745],{"class":733},[720,18257,748],{"class":733},[720,18259,17643],{"class":751},[720,18261,748],{"class":733},[720,18263,769],{"class":733},[720,18265,18266,18268,18270,18272,18274,18276,18278,18280],{"class":722,"line":5391},[720,18267,1447],{"class":733},[720,18269,738],{"class":737},[720,18271,742],{"class":741},[720,18273,745],{"class":733},[720,18275,748],{"class":733},[720,18277,17662],{"class":751},[720,18279,748],{"class":733},[720,18281,769],{"class":733},[720,18283,18284,18286,18288,18290,18292,18294,18296,18298,18300,18303,18305,18307],{"class":722,"line":5400},[720,18285,1736],{"class":733},[720,18287,431],{"class":737},[720,18289,742],{"class":741},[720,18291,745],{"class":733},[720,18293,748],{"class":733},[720,18295,17681],{"class":751},[720,18297,748],{"class":733},[720,18299,757],{"class":733},[720,18301,18302],{"class":760},"Yes sir! Đang làm đến bài tập 19 luôn nè.",[720,18304,764],{"class":733},[720,18306,431],{"class":737},[720,18308,769],{"class":733},[720,18310,18311,18313,18315,18317,18319,18321,18323,18325,18327,18330,18332,18334],{"class":722,"line":11385},[720,18312,1736],{"class":733},[720,18314,720],{"class":737},[720,18316,742],{"class":741},[720,18318,745],{"class":733},[720,18320,748],{"class":733},[720,18322,17709],{"class":751},[720,18324,748],{"class":733},[720,18326,757],{"class":733},[720,18328,18329],{"class":760},"10:36 AM",[720,18331,764],{"class":733},[720,18333,720],{"class":737},[720,18335,769],{"class":733},[720,18337,18338,18340,18342],{"class":722,"line":11405},[720,18339,1849],{"class":733},[720,18341,738],{"class":737},[720,18343,769],{"class":733},[720,18345,18346,18348,18350,18352,18354,18356,18358,18360,18362,18364],{"class":722,"line":11425},[720,18347,1447],{"class":733},[720,18349,738],{"class":737},[720,18351,742],{"class":741},[720,18353,745],{"class":733},[720,18355,748],{"class":733},[720,18357,17745],{"class":751},[720,18359,748],{"class":733},[720,18361,881],{"class":733},[720,18363,738],{"class":737},[720,18365,769],{"class":733},[720,18367,18368,18370,18372],{"class":722,"line":11449},[720,18369,1510],{"class":733},[720,18371,738],{"class":737},[720,18373,769],{"class":733},[720,18375,18376],{"class":722,"line":11477},[720,18377,833],{"emptyLinePlaceholder":832},[720,18379,18380],{"class":722,"line":11486},[720,18381,18382],{"class":726}," \u003C!-- Received message 4 -->\n",[720,18384,18385,18387,18389,18391,18393,18395,18397,18399],{"class":722,"line":11505},[720,18386,956],{"class":733},[720,18388,738],{"class":737},[720,18390,742],{"class":741},[720,18392,745],{"class":733},[720,18394,748],{"class":733},[720,18396,13771],{"class":751},[720,18398,748],{"class":733},[720,18400,769],{"class":733},[720,18402,18403,18405,18407,18409,18411,18413,18415,18417,18419,18421],{"class":722,"line":11529},[720,18404,1447],{"class":733},[720,18406,738],{"class":737},[720,18408,742],{"class":741},[720,18410,745],{"class":733},[720,18412,748],{"class":733},[720,18414,17520],{"class":751},[720,18416,748],{"class":733},[720,18418,881],{"class":733},[720,18420,738],{"class":737},[720,18422,769],{"class":733},[720,18424,18425,18427,18429,18431,18433,18435,18437,18439],{"class":722,"line":11557},[720,18426,1447],{"class":733},[720,18428,738],{"class":737},[720,18430,742],{"class":741},[720,18432,745],{"class":733},[720,18434,748],{"class":733},[720,18436,17543],{"class":751},[720,18438,748],{"class":733},[720,18440,769],{"class":733},[720,18442,18443,18445,18447,18449,18451,18453,18455,18457,18459,18462,18464,18466],{"class":722,"line":11566},[720,18444,1736],{"class":733},[720,18446,431],{"class":737},[720,18448,742],{"class":741},[720,18450,745],{"class":733},[720,18452,748],{"class":733},[720,18454,17562],{"class":751},[720,18456,748],{"class":733},[720,18458,757],{"class":733},[720,18460,18461],{"class":760},"Good job! Học xong phần này là master layout Tailwind rồi. Tiếp theo là Typography & Colors nhé!",[720,18463,764],{"class":733},[720,18465,431],{"class":737},[720,18467,769],{"class":733},[720,18469,18470,18472,18474,18476,18478,18480,18482,18484,18486,18489,18491,18493],{"class":722,"line":11585},[720,18471,1736],{"class":733},[720,18473,720],{"class":737},[720,18475,742],{"class":741},[720,18477,745],{"class":733},[720,18479,748],{"class":733},[720,18481,17590],{"class":751},[720,18483,748],{"class":733},[720,18485,757],{"class":733},[720,18487,18488],{"class":760},"10:37 AM",[720,18490,764],{"class":733},[720,18492,720],{"class":737},[720,18494,769],{"class":733},[720,18496,18497,18499,18501],{"class":722,"line":11609},[720,18498,1849],{"class":733},[720,18500,738],{"class":737},[720,18502,769],{"class":733},[720,18504,18505,18507,18509],{"class":722,"line":11637},[720,18506,1510],{"class":733},[720,18508,738],{"class":737},[720,18510,769],{"class":733},[720,18512,18513,18515,18517],{"class":722,"line":11646},[720,18514,1014],{"class":733},[720,18516,738],{"class":737},[720,18518,769],{"class":733},[720,18520,18521],{"class":722,"line":11655},[720,18522,833],{"emptyLinePlaceholder":832},[720,18524,18525],{"class":722,"line":11664},[720,18526,18527],{"class":726}," \u003C!-- Input area -->\n",[720,18529,18530,18532,18534,18536,18538,18540,18543,18545],{"class":722,"line":11673},[720,18531,865],{"class":733},[720,18533,738],{"class":737},[720,18535,742],{"class":741},[720,18537,745],{"class":733},[720,18539,748],{"class":733},[720,18541,18542],{"class":751},"px-5 py-4 border-t flex gap-3",[720,18544,748],{"class":733},[720,18546,769],{"class":733},[720,18548,18549,18551,18554,18557,18559,18561,18564,18566,18569,18571,18573,18576],{"class":722,"line":11682},[720,18550,956],{"class":733},[720,18552,18553],{"class":737},"input",[720,18555,18556],{"class":741}," type",[720,18558,745],{"class":733},[720,18560,748],{"class":733},[720,18562,18563],{"class":751},"text",[720,18565,748],{"class":733},[720,18567,18568],{"class":741}," placeholder",[720,18570,745],{"class":733},[720,18572,748],{"class":733},[720,18574,18575],{"class":751},"Nhập tin nhắn...",[720,18577,1486],{"class":733},[720,18579,18580,18583,18585,18587,18590,18592],{"class":722,"line":11691},[720,18581,18582],{"class":741}," class",[720,18584,745],{"class":733},[720,18586,748],{"class":733},[720,18588,18589],{"class":751},"flex-1 bg-gray-100 rounded-full px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-colors",[720,18591,748],{"class":733},[720,18593,769],{"class":733},[720,18595,18597,18599,18601,18603,18605,18607,18610,18612],{"class":722,"line":18596},91,[720,18598,956],{"class":733},[720,18600,1329],{"class":737},[720,18602,742],{"class":741},[720,18604,745],{"class":733},[720,18606,748],{"class":733},[720,18608,18609],{"class":751},"bg-blue-600 text-white w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors flex-shrink-0",[720,18611,748],{"class":733},[720,18613,769],{"class":733},[720,18615,18617,18619,18621,18623,18625,18627,18630,18632,18634,18636,18638,18640,18642,18644,18646,18648,18650,18652,18654,18656,18658,18660,18662],{"class":722,"line":18616},92,[720,18618,1447],{"class":733},[720,18620,1392],{"class":737},[720,18622,742],{"class":741},[720,18624,745],{"class":733},[720,18626,748],{"class":733},[720,18628,18629],{"class":751},"w-5 h-5",[720,18631,748],{"class":733},[720,18633,1406],{"class":741},[720,18635,745],{"class":733},[720,18637,748],{"class":733},[720,18639,1413],{"class":751},[720,18641,748],{"class":733},[720,18643,1418],{"class":741},[720,18645,745],{"class":733},[720,18647,748],{"class":733},[720,18649,1425],{"class":751},[720,18651,748],{"class":733},[720,18653,1430],{"class":741},[720,18655,745],{"class":733},[720,18657,748],{"class":733},[720,18659,1437],{"class":751},[720,18661,748],{"class":733},[720,18663,769],{"class":733},[720,18665,18667,18669,18671,18673,18675,18677,18679,18681,18683,18685,18687,18689,18691,18693,18695,18697,18699,18701,18704,18706,18708,18711,18713],{"class":722,"line":18666},93,[720,18668,1736],{"class":733},[720,18670,1450],{"class":737},[720,18672,1453],{"class":741},[720,18674,745],{"class":733},[720,18676,748],{"class":733},[720,18678,1460],{"class":751},[720,18680,748],{"class":733},[720,18682,1465],{"class":741},[720,18684,745],{"class":733},[720,18686,748],{"class":733},[720,18688,1460],{"class":751},[720,18690,748],{"class":733},[720,18692,1476],{"class":741},[720,18694,745],{"class":733},[720,18696,748],{"class":733},[720,18698,1483],{"class":751},[720,18700,748],{"class":733},[720,18702,18703],{"class":741}," d",[720,18705,745],{"class":733},[720,18707,748],{"class":733},[720,18709,18710],{"class":751},"M5 12h14M12 5l7 7-7 7",[720,18712,748],{"class":733},[720,18714,1504],{"class":733},[720,18716,18718,18720,18722],{"class":722,"line":18717},94,[720,18719,1849],{"class":733},[720,18721,1392],{"class":737},[720,18723,769],{"class":733},[720,18725,18727,18729,18731],{"class":722,"line":18726},95,[720,18728,1510],{"class":733},[720,18730,1329],{"class":737},[720,18732,769],{"class":733},[720,18734,18736,18738,18740],{"class":722,"line":18735},96,[720,18737,1014],{"class":733},[720,18739,738],{"class":737},[720,18741,769],{"class":733},[720,18743,18745,18747,18749],{"class":722,"line":18744},97,[720,18746,764],{"class":733},[720,18748,738],{"class":737},[720,18750,769],{"class":733},[435,18752,18753,446,18756,18759,18760,18763,18764,18766],{"color":1030,"icon":1031},[443,18754,18755],{},"Chat scrollbar pattern:",[458,18757,18758],{},"scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent"," — scrollbar trong suốt hòa vào nền, chỉ thấy thumb. ",[458,18761,18762],{},"hover:scrollbar-thumb-gray-400"," làm thumb đậm hơn khi hover để dễ nhìn. ",[458,18765,17066],{}," tránh layout shift khi scrollbar xuất hiện.",[488,18768],{},[427,18770,18772],{"id":18771},"tổng-kết","Tổng kết",[431,18774,18775,18776,18779,18780,12571],{},"Bạn đã học qua ",[443,18777,18778],{},"9 nhóm utility"," cho layout và spacing trong Tailwind CSS v4, kèm ",[443,18781,18782],{},"19 bài tập thực hành",[18784,18785,18786,18792,18798,18804,18810,18816,18822,18828,18834],"ol",{},[3437,18787,18788,18791],{},[443,18789,18790],{},"Display"," (Bài tập 1-2): Navigation bar, sidebar toggle",[3437,18793,18794,18797],{},[443,18795,18796],{},"Position"," (Bài tập 3-5): Fixed header, sticky sidebar, absolute badge",[3437,18799,18800,18803],{},[443,18801,18802],{},"Container Queries"," (Bài tập 6): Card responsive theo width của chính nó",[3437,18805,18806,18809],{},[443,18807,18808],{},"Flexbox"," (Bài tập 7-10): Centered card, Holy Grail, flex-wrap grid, navbar",[3437,18811,18812,18815],{},[443,18813,18814],{},"Grid"," (Bài tập 11-13): 12-column system, responsive gallery, dashboard",[3437,18817,18818,18821],{},[443,18819,18820],{},"Spacing"," (Bài tập 14-15): Blog vertical rhythm, card internal spacing",[3437,18823,18824,18827],{},[443,18825,18826],{},"Sizing"," (Bài tập 16-17): Hero section, responsive images",[3437,18829,18830,18833],{},[443,18831,18832],{},"Overflow"," (Bài tập 18): Scrollable sidebar",[3437,18835,18836,18839],{},[443,18837,18838],{},"Scrollbar"," (Bài tập 19): Chat message list custom scrollbar",[435,18841,18842,18850],{"color":437,"icon":438},[431,18843,441,18844,446,18847],{},[443,18845,18846],{},"Câu PV tổng kết Layout:",[448,18848,18849],{},"\"Bạn dùng Tailwind xây layout phức tạp (dashboard, admin panel) như thế nào?\"",[452,18851,18852],{},[431,18853,18854,18855,465,18857,465,18860,18862,18863,18865,18866,18868,18869,18872],{},"\"Tôi kết hợp flexbox cho page-level layout (sidebar + main content), grid cho content-area layout (stats cards, charts), container queries cho component tái sử dụng (card thay đổi trong các ngữ cảnh khác nhau). Mobile-first responsive: bắt đầu với mobile layout, thêm ",[458,18856,10158],{},[458,18858,18859],{},"md:",[458,18861,10162],{}," để enhance khi màn hình lớn hơn. Pattern hay dùng: ",[458,18864,1573],{}," cho app shell, ",[458,18867,11706],{}," cho card grid, ",[458,18870,18871],{},"sticky top-24"," cho sidebar trong blog.\"",[435,18874,18876,18877,18879],{"color":1030,"icon":18875},"i-lucide-arrow-right","Tiếp theo: ",[1094,18878,397],{"href":398}," — Font, text size, OKLCH colors, text shadow (v4.1), dark mode.",[18881,18882,18883],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":716,"searchDepth":730,"depth":730,"links":18885},[18886,18887,18894,18902,18908,18919,18928,18937,18945,18948,18951],{"id":429,"depth":730,"text":11},{"id":492,"depth":730,"text":493,"children":18888},[18889,18890,18892],{"id":708,"depth":772,"text":709},{"id":1044,"depth":772,"text":18891},"Bài tập 1: Navigation bar với flex và hidden cho mobile toggle",{"id":1544,"depth":772,"text":18893},"Bài tập 2: Hide\u002Fshow sidebar với hidden + breakpoint variants",{"id":2050,"depth":730,"text":2051,"children":18895},[18896,18898,18899,18900,18901],{"id":2126,"depth":772,"text":18897},"Inset utilities (inset-*, top-*, right-*, bottom-*, left-*)",{"id":2288,"depth":772,"text":2289},{"id":2493,"depth":772,"text":2494},{"id":2985,"depth":772,"text":2986},{"id":3676,"depth":772,"text":3677},{"id":4304,"depth":730,"text":4305,"children":18903},[18904,18905,18906],{"id":4315,"depth":772,"text":4316},{"id":4574,"depth":772,"text":4575},{"id":5431,"depth":772,"text":18907},"@container-size (v4.3 NEW)",{"id":5507,"depth":730,"text":5508,"children":18909},[18910,18911,18912,18913,18914,18915,18917],{"id":5511,"depth":772,"text":5512},{"id":5664,"depth":772,"text":5665},{"id":5824,"depth":772,"text":5825},{"id":5884,"depth":772,"text":5885},{"id":6189,"depth":772,"text":6190},{"id":6810,"depth":772,"text":18916},"Bài tập 9: Responsive card grid với flex-wrap",{"id":7549,"depth":772,"text":18918},"Bài tập 10: Navigation với logo trái, links phải, dùng justify-between",{"id":7865,"depth":730,"text":7866,"children":18920},[18921,18922,18923,18924,18925,18926,18927],{"id":7869,"depth":772,"text":7870},{"id":7989,"depth":772,"text":7990},{"id":8068,"depth":772,"text":8069},{"id":8164,"depth":772,"text":709},{"id":8690,"depth":772,"text":8691},{"id":9307,"depth":772,"text":9308},{"id":10166,"depth":772,"text":10167},{"id":11716,"depth":730,"text":11717,"children":18929},[18930,18931,18932,18933,18934,18935,18936],{"id":11720,"depth":772,"text":11721},{"id":11800,"depth":772,"text":11801},{"id":11877,"depth":772,"text":11878},{"id":12149,"depth":772,"text":12150},{"id":12410,"depth":772,"text":12411},{"id":12590,"depth":772,"text":12591},{"id":13502,"depth":772,"text":13503},{"id":14048,"depth":730,"text":14049,"children":18938},[18939,18940,18941,18942,18944],{"id":14052,"depth":772,"text":14053},{"id":14154,"depth":772,"text":14155},{"id":14271,"depth":772,"text":14272},{"id":14341,"depth":772,"text":18943},"Bài tập 16: Full-screen hero section với min-h-screen",{"id":14794,"depth":772,"text":14795},{"id":15507,"depth":730,"text":15508,"children":18946},[18947],{"id":15618,"depth":772,"text":15619},{"id":16974,"depth":730,"text":16975,"children":18949},[18950],{"id":17261,"depth":772,"text":17262},{"id":18771,"depth":730,"text":18772},"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.","md",null,{},{"title":392,"icon":395},{"title":422,"description":18952},"Z_IlgwS2WfI0eQHJQEYOIY8DV1NBOxS752QSmrnE4kc",[18960,18962],{"title":385,"path":386,"stem":387,"description":18961,"icon":390,"children":-1},"Học Tailwind CSS v4.3 (2026) — Oxide Engine, CSS-first config, OKLCH colors, container queries, 3D transforms. Từ cơ bản đến practical.",{"title":397,"path":398,"stem":399,"description":18963,"icon":400,"children":-1},"Tailwind CSS v4 — font, text, color (OKLCH), background, gradient, border, outline. Bài tập thiết kế typography system và color palette.",1783490361256]