{"id":4386,"date":"2026-03-18T16:40:29","date_gmt":"2026-03-18T09:40:29","guid":{"rendered":"https:\/\/wpdesign.vn\/media-queries-container-queries-va-resize-observer\/"},"modified":"2026-05-04T15:56:40","modified_gmt":"2026-05-04T08:56:40","slug":"media-queries-container-queries-va-resize-observer","status":"publish","type":"post","link":"https:\/\/wpdesign.vn\/vi\/media-queries-container-queries-va-resize-observer\/","title":{"rendered":"Media Queries, Container Queries V\u00e0 Resize Observer"},"content":{"rendered":"\n<p>Ki\u1ebfn tr\u00fac Web \u0111ang d\u1ecbch chuy\u1ec3n t\u1eeb vi\u1ec7c ph\u1ee5 thu\u1ed9c v\u00e0o Viewport sang t\u01b0 duy l\u00e0m ch\u1ee7 Container v\u00e0 can thi\u1ec7p tr\u1ef1c ti\u1ebfp v\u00e0o Runtime c\u1ee7a ph\u1ea7n t\u1eed. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd ph\u00e2n t\u00edch s\u00e2u ba gi\u1ea3i ph\u00e1p c\u1ed1t l\u00f5i: Media Queries, Container Queries v\u00e0 Resize Observer API. T\u1eeb \u0111\u00f3, ch\u00fang ta s\u1ebd x\u00e1c \u0111\u1ecbnh m\u00f4 h\u00ecnh tri\u1ec3n khai t\u1ed1i \u01b0u cho c\u00e1c h\u1ec7 th\u1ed1ng UI d\u1ea1ng module h\u00f3a v\u00e0 c\u00f3 \u0111\u1ed9 ph\u1ee9c t\u1ea1p cao.  <\/p>\n\n<h4 class=\"wp-block-heading\">1. Media Queries: T\u01b0 duy Layout theo Viewport<\/h4>\n\n<h6 class=\"wp-block-heading\">1.1 B\u1ea3n ch\u1ea5t k\u1ef9 thu\u1eadt<\/h6>\n\n<p>Media Queries (v\u1ed1n l\u00e0 m\u1ed9t ph\u1ea7n c\u1ee7a CSS3) ho\u1ea1t \u0111\u1ed9ng d\u1ef1a tr\u00ean c\u00e1c \u0111\u1eb7c t\u00ednh v\u1eadt l\u00fd c\u1ee7a thi\u1ebft b\u1ecb ho\u1eb7c c\u1eeda s\u1ed5 tr\u00ecnh duy\u1ec7t. Khi tr\u00ecnh duy\u1ec7t render m\u1ed9t trang web, n\u00f3 s\u1ebd ki\u1ec3m tra c\u00e1c \u0111i\u1ec1u ki\u1ec7n trong quy t\u1eafc <code>@media<\/code> \u0111\u1ed1i v\u1edbi tr\u1ea1ng th\u00e1i c\u1ee7a Viewport \u0111\u1ec3 quy\u1ebft \u0111\u1ecbnh xem c\u00f3 \u00e1p d\u1ee5ng c\u00e1c block CSS t\u01b0\u01a1ng \u1ee9ng hay kh\u00f4ng. <\/p>\n\n<h6 class=\"wp-block-heading\">1.2 Ph\u1ea1m vi ho\u1ea1t \u0111\u1ed9ng (Global Scope)<\/h6>\n\n<p>Media Queries mang t\u00ednh ch\u1ea5t <strong>to\u00e0n c\u1ee5c<\/strong>. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 khi m\u1ed9t Media Query \u0111\u01b0\u1ee3c k\u00edch ho\u1ea1t, n\u00f3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn to\u00e0n b\u1ed9 c\u1ea5u tr\u00fac c\u00e2y DOM n\u1ebfu c\u00e1c class \u0111\u01b0\u1ee3c \u0111\u1ecbnh ngh\u0129a b\u00ean trong \u0111\u00f3. <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>\u01afu \u0111i\u1ec3m:<\/strong> Hi\u1ec7u n\u0103ng c\u1ef1c cao v\u00ec \u0111\u01b0\u1ee3c x\u1eed l\u00fd tr\u1ef1c ti\u1ebfp b\u1edfi CSS engine c\u1ee7a tr\u00ecnh duy\u1ec7t. Kh\u00f4ng g\u00e2y ti\u00eau t\u1ed1n t\u00e0i nguy\u00ean JavaScript. <\/li>\n\n\n\n<li><strong>H\u1ea1n ch\u1ebf:<\/strong> S\u1ef1 thi\u1ebfu h\u1ee5t t\u00ednh &#8220;ng\u1eef c\u1ea3nh&#8221;. M\u1ed9t component (v\u00ed d\u1ee5: Card) khi n\u1eb1m \u1edf Main Content (chi\u1ec1u r\u1ed9ng l\u1edbn) v\u00e0 Sidebar (chi\u1ec1u r\u1ed9ng h\u1eb9p) s\u1ebd kh\u00f4ng th\u1ec3 t\u1ef1 \u0111i\u1ec1u ch\u1ec9nh n\u1ebfu ch\u1ec9 d\u1ef1a v\u00e0o Media Queries, tr\u1eeb khi developer vi\u1ebft c\u00e1c class ghi \u0111\u00e8 (modifiers) r\u1ea5t c\u1ed3ng k\u1ec1nh. <\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">2. Container Queries: B\u01b0\u1edbc ngo\u1eb7t c\u1ee7a Component-based Design<\/h4>\n\n<h6 class=\"wp-block-heading\">2.1 Kh\u00e1i ni\u1ec7m v\u1ec1 &#8220;V\u00f9ng ch\u1ee9a chi\u1ebfn l\u01b0\u1ee3c&#8221;<\/h6>\n\n<p>Container Queries (CQ) gi\u1ea3i quy\u1ebft b\u00e0i to\u00e1n m\u00e0 Media Queries b\u1ecf ng\u1ecf: <strong>S\u1ef1 ph\u1ee5 thu\u1ed9c v\u00e0o ng\u1eef c\u1ea3nh<\/strong>. Thay v\u00ec h\u1ecfi &#8220;M\u00e0n h\u00ecnh r\u1ed9ng bao nhi\u00eau?&#8221;, component gi\u1edd \u0111\u00e2y s\u1ebd h\u1ecfi &#8220;V\u00f9ng ch\u1ee9a t\u00f4i r\u1ed9ng bao nhi\u00eau?&#8221;. <\/p>\n\n<h6 class=\"wp-block-heading\">2.2 C\u01a1 ch\u1ebf th\u1ef1c thi trong CSS Rendering Pipeline<\/h6>\n\n<p>\u0110\u1ec3 Container Queries ho\u1ea1t \u0111\u1ed9ng, tr\u00ecnh duy\u1ec7t y\u00eau c\u1ea7u developer x\u00e1c \u0111\u1ecbnh m\u1ed9t <code>containment context<\/code>. \u0110i\u1ec1u n\u00e0y gi\u00fap tr\u00ecnh duy\u1ec7t t\u1ed1i \u01b0u h\u00f3a qu\u00e1 tr\u00ecnh t\u00ednh to\u00e1n l\u1ea1i layout (reflow) m\u00e0 kh\u00f4ng ph\u1ea3i duy\u1ec7t l\u1ea1i to\u00e0n b\u1ed9 c\u00e2y DOM. <\/p>\n\n<p>CSS<\/p>\n\n<pre class=\"wp-block-code\"><code>\/* Thi\u1ebft l\u1eadp v\u00f9ng ch\u1ee9a *\/\n.layout-grid__item {\n  container-type: inline-size;\n  container-name: card-container;\n}\n\n\/* \u00c1p d\u1ee5ng logic d\u1ef1a tr\u00ean v\u00f9ng ch\u1ee9a *\/\n@container card-container (min-width: 400px) {\n  .card {\n    display: flex;\n    gap: 20px;\n  }\n}\n<\/code><\/pre>\n\n<h6 class=\"wp-block-heading\">2.3 T\u1ea1i sao n\u00ean d\u00f9ng Container Queries cho Design System?<\/h6>\n\n<p>Trong m\u1ed9t Design System hi\u1ec7n \u0111\u1ea1i, t\u00ednh \u0111\u00f3ng g\u00f3i (encapsulation) l\u00e0 \u01b0u ti\u00ean h\u00e0ng \u0111\u1ea7u. Container Queries cho ph\u00e9p: <\/p>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li><strong>T\u00ednh linh ho\u1ea1t t\u1ed1i \u0111a:<\/strong> M\u1ed9t component c\u00f3 th\u1ec3 ho\u1ea1t \u0111\u1ed9ng ho\u00e0n h\u1ea3o trong b\u1ea5t k\u1ef3 h\u1ec7 th\u1ed1ng Grid hay Flexbox n\u00e0o m\u00e0 kh\u00f4ng c\u1ea7n quan t\u00e2m \u0111\u1ebfn breakpoint c\u1ee7a to\u00e0n trang.<\/li>\n\n\n\n<li><strong>Gi\u1ea3m thi\u1ec3u CSS d\u01b0 th\u1eeba:<\/strong> Lo\u1ea1i b\u1ecf h\u00e0ng tr\u0103m d\u00f2ng code &#8220;overriding&#8221; cho c\u00e1c tr\u1ea1ng th\u00e1i c\u1ee7a component \u1edf nh\u1eefng v\u1ecb tr\u00ed kh\u00e1c nhau tr\u00ean UI.<\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">3. Resize Observer: Can thi\u1ec7p \u1edf t\u1ea7ng Runtime<\/h4>\n\n<h6 class=\"wp-block-heading\">3.1 Kh\u00e1i ni\u1ec7m API<\/h6>\n\n<p>Resize Observer l\u00e0 m\u1ed9t JavaScript API cho ph\u00e9p quan s\u00e1t s\u1ef1 thay \u0111\u1ed5i k\u00edch th\u01b0\u1edbc c\u1ee7a m\u1ed9t Element c\u1ee5 th\u1ec3. Kh\u00e1c v\u1edbi s\u1ef1 ki\u1ec7n <code>window.onresize<\/code> (v\u1ed1n ch\u1ec9 k\u00edch ho\u1ea1t khi viewport thay \u0111\u1ed5i), Resize Observer k\u00edch ho\u1ea1t b\u1ea5t c\u1ee9 khi n\u00e0o <code>contentRect<\/code> c\u1ee7a ph\u1ea7n t\u1eed m\u1ee5c ti\u00eau thay \u0111\u1ed5i (do thay \u0111\u1ed5i n\u1ed9i dung, animation, ho\u1eb7c DOM manipulation). <\/p>\n\n<h6 class=\"wp-block-heading\">3.2 Tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng \u0111\u1eb7c th\u00f9<\/h6>\n\n<p>C\u00f3 nh\u1eefng b\u00e0i to\u00e1n m\u00e0 CSS (k\u1ec3 c\u1ea3 Container Queries) kh\u00f4ng th\u1ec3 x\u1eed l\u00fd tri\u1ec7t \u0111\u1ec3:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Dynamic Canvas\/Charts:<\/strong> Khi k\u00edch th\u01b0\u1edbc div ch\u1ee9a bi\u1ec3u \u0111\u1ed3 thay \u0111\u1ed5i, ch\u00fang ta c\u1ea7n g\u1ecdi h\u00e0m <code>.resize()<\/code> c\u1ee7a th\u01b0 vi\u1ec7n (nh\u01b0 Chart.js ho\u1eb7c Highcharts) \u0111\u1ec3 v\u1ebd l\u1ea1i canvas.<\/li>\n\n\n\n<li><strong>Virtual Scrolling:<\/strong> T\u00ednh to\u00e1n s\u1ed1 l\u01b0\u1ee3ng item c\u1ea7n render d\u1ef1a tr\u00ean chi\u1ec1u cao th\u1ef1c t\u1ebf c\u1ee7a v\u00f9ng nh\u00ecn th\u1ea5y.<\/li>\n\n\n\n<li><strong>Conditional Logic ph\u1ee9c t\u1ea1p:<\/strong> Thay \u0111\u1ed5i ho\u00e0n to\u00e0n c\u1ea5u tr\u00fac d\u1eef li\u1ec7u hi\u1ec3n th\u1ecb d\u1ef1a tr\u00ean di\u1ec7n t\u00edch (v\u00ed d\u1ee5: chuy\u1ec3n t\u1eeb d\u1ea1ng b\u1ea3ng sang d\u1ea1ng bi\u1ec3u \u0111\u1ed3 tr\u00f2n khi kh\u00f4ng gian qu\u00e1 h\u1eb9p).<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">3.3 V\u1ea5n \u0111\u1ec1 hi\u1ec7u n\u0103ng v\u00e0 Layout Thrashing<\/h6>\n\n<p>M\u1eb7c d\u00f9 linh ho\u1ea1t, Resize Observer c\u1ea7n \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng th\u1eadn tr\u1ecdng. Vi\u1ec7c th\u1ef1c thi logic JavaScript ngay trong qu\u00e1 tr\u00ecnh tr\u00ecnh duy\u1ec7t \u0111ang t\u00ednh to\u00e1n layout c\u00f3 th\u1ec3 d\u1eabn \u0111\u1ebfn hi\u1ec7n t\u01b0\u1ee3ng &#8220;gi\u1eadt&#8221; (jank) n\u1ebfu logic \u0111\u00f3 l\u1ea1i ti\u1ebfp t\u1ee5c thay \u0111\u1ed5i style c\u1ee7a ph\u1ea7n t\u1eed, t\u1ea1o ra m\u1ed9t v\u00f2ng l\u1eb7p reflow li\u00ean t\u1ee5c. <\/p>\n\n<h4 class=\"wp-block-heading\">4. B\u1ea3ng so s\u00e1nh v\u00e0 \u0110\u1ed1i chi\u1ebfu K\u1ef9 thu\u1eadt<\/h4>\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><td><strong>Ti\u00eau ch\u00ed<\/strong><\/td><td><strong>Media Queries<\/strong><\/td><td><strong>Container Queries<\/strong><\/td><td><strong>Resize Observer<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>Ngu\u1ed3n d\u1eef li\u1ec7u<\/strong><\/td><td>Viewport \/ Device<\/td><td>Parent Container<\/td><td>Element ch\u00ednh n\u00f3<\/td><\/tr><tr><td><strong>T\u1ea7ng x\u1eed l\u00fd<\/strong><\/td><td>CSS Engine (Native)<\/td><td>CSS Engine (Native)<\/td><td>JS Engine (Runtime)<\/td><\/tr><tr><td><strong>\u0110\u1ed9 tr\u1ec5 (Latency)<\/strong><\/td><td>Kh\u00f4ng \u0111\u00e1ng k\u1ec3<\/td><td>Th\u1ea5p<\/td><td>Ph\u1ee5 thu\u1ed9c v\u00e0o Script<\/td><\/tr><tr><td><strong>Kh\u1ea3 n\u0103ng t\u00e1i s\u1eed d\u1ee5ng<\/strong><\/td><td>Th\u1ea5p (ph\u1ee5 thu\u1ed9c layout)<\/td><td>R\u1ea5t cao<\/td><td>Cao (logic-driven)<\/td><\/tr><tr><td><strong>H\u1ed7 tr\u1ee3 tr\u00ecnh duy\u1ec7t<\/strong><\/td><td>Tuy\u1ec7t \u0111\u1ed1i (99%+)<\/td><td>T\u1ed1t (Hi\u1ec7n \u0111\u1ea1i)<\/td><td>R\u1ea5t t\u1ed1t<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<h4 class=\"wp-block-heading\">5. Nh\u1eefng sai l\u1ea7m ph\u1ed5 bi\u1ebfn v\u00e0 Chi\u1ebfn l\u01b0\u1ee3c k\u1ebft h\u1ee3p<\/h4>\n\n<h6 class=\"wp-block-heading\">5.1 L\u1ea1m d\u1ee5ng Media Queries cho Micro-layout<\/h6>\n\n<p>Nhi\u1ec1u developer v\u1eabn c\u1ed1 g\u1eafng d\u00f9ng Media Queries \u0111\u1ec3 x\u1eed l\u00fd c\u00e1c chi ti\u1ebft nh\u1ecf trong component. \u0110i\u1ec1u n\u00e0y d\u1eabn \u0111\u1ebfn m\u1ed9t h\u1ec7 th\u1ed1ng CSS &#8220;gi\u00f2n&#8221; (fragile) \u2013 ch\u1ec9 c\u1ea7n thay \u0111\u1ed5i c\u1ea5u tr\u00fac trang l\u00e0 to\u00e0n b\u1ed9 CSS c\u1ee7a component b\u1ecb h\u1ecfng. <\/p>\n\n<h6 class=\"wp-block-heading\">5.2 B\u1ecf qua v\u1ea5n \u0111\u1ec1 Performance c\u1ee7a Resize Observer<\/h6>\n\n<p>S\u1eed d\u1ee5ng h\u00e0ng tr\u0103m Observer tr\u00ean m\u1ed9t trang Dashboard c\u00f3 th\u1ec3 khi\u1ebfn CPU b\u1ecb qu\u00e1 t\u1ea3i. Gi\u1ea3i ph\u00e1p l\u00e0 s\u1eed d\u1ee5ng m\u1ed9t Observer duy nh\u1ea5t \u0111\u1ec3 qu\u1ea3n l\u00fd nhi\u1ec1u ph\u1ea7n t\u1eed ho\u1eb7c \u00e1p d\u1ee5ng k\u1ef9 thu\u1eadt <code>debounce\/throttle<\/code> n\u1ebfu logic x\u1eed l\u00fd qu\u00e1 n\u1eb7ng. <\/p>\n\n<h6 class=\"wp-block-heading\">5.3 Chi\u1ebfn l\u01b0\u1ee3c &#8220;Ph\u00e2n t\u1ea7ng Responsive&#8221; (The Layered Approach)<\/h6>\n\n<p>M\u1ed9t ki\u1ebfn tr\u00fac t\u1ed1t n\u00ean k\u1ebft h\u1ee3p c\u1ea3 ba:<\/p>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li><strong>Media Queries:<\/strong> Thi\u1ebft l\u1eadp khung x\u01b0\u01a1ng (Macro Layout) \u2013 v\u00ed d\u1ee5: Chia c\u1ed9t 12-column grid cho trang.<\/li>\n\n\n\n<li><strong>Container Queries:<\/strong> Thi\u1ebft l\u1eadp di\u1ec7n m\u1ea1o component (Micro Layout) \u2013 v\u00ed d\u1ee5: Card t\u1ef1 chuy\u1ec3n t\u1eeb d\u1ecdc sang ngang.<\/li>\n\n\n\n<li><strong>Resize Observer:<\/strong> X\u1eed l\u00fd c\u00e1c logic \u0111\u1eb7c bi\u1ec7t \u2013 v\u00ed d\u1ee5: T\u00ednh to\u00e1n l\u1ea1i k\u00edch th\u01b0\u1edbc \u1ea3nh ho\u1eb7c bi\u1ec3u \u0111\u1ed3.<\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">6. K\u1ebft lu\u1eadn<\/h4>\n\n<p>S\u1ef1 ra \u0111\u1eddi c\u1ee7a <strong>Container Queries<\/strong> \u0111\u00e3 \u0111\u00e1nh d\u1ea5u m\u1ed9t k\u1ef7 nguy\u00ean m\u1edbi, n\u01a1i CSS th\u1ef1c s\u1ef1 h\u1ed7 tr\u1ee3 t\u01b0 duy component. Tuy nhi\u00ean, kh\u00f4ng c\u00f3 c\u00f4ng c\u1ee5 n\u00e0o l\u00e0 &#8220;vi\u00ean \u0111\u1ea1n b\u1ea1c&#8221;. Vi\u1ec7c th\u1ea5u hi\u1ec3u b\u1ea3n ch\u1ea5t c\u1ee7a t\u1eebng c\u01a1 ch\u1ebf: t\u1eeb t\u00ednh \u1ed5n \u0111\u1ecbnh c\u1ee7a Media Queries, t\u00ednh linh ho\u1ea1t c\u1ee7a Container Queries \u0111\u1ebfn s\u1ee9c m\u1ea1nh can thi\u1ec7p c\u1ee7a Resize Observer, l\u00e0 ch\u00eca kh\u00f3a \u0111\u1ec3 x\u00e2y d\u1ef1ng nh\u1eefng s\u1ea3n ph\u1ea9m web chuy\u00ean nghi\u1ec7p, b\u1ec1n v\u1eefng v\u00e0 hi\u1ec7u n\u0103ng cao.  <\/p>\n\n<p>Vi\u1ec7c l\u00e0m ch\u1ee7 c\u00e1c k\u1ef9 thu\u1eadt n\u00e0y kh\u00f4ng ch\u1ec9 gi\u00fap gi\u1ea3m b\u1edbt n\u1ee3 k\u1ef9 thu\u1eadt (technical debt) m\u00e0 c\u00f2n gi\u00fap quy tr\u00ecnh l\u00e0m vi\u1ec7c gi\u1eefa Designer v\u00e0 Developer tr\u1edf n\u00ean \u0111\u1ed3ng b\u1ed9 h\u01a1n th\u00f4ng qua c\u00e1c Design System ch\u1eb7t ch\u1ebd.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ki\u1ebfn tr\u00fac Web \u0111ang d\u1ecbch chuy\u1ec3n t\u1eeb vi\u1ec7c ph\u1ee5 thu\u1ed9c v\u00e0o Viewport sang t\u01b0 duy l\u00e0m ch\u1ee7 Container v\u00e0 can [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":4385,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[25],"tags":[],"class_list":["post-4386","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-publishing"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4386","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/comments?post=4386"}],"version-history":[{"count":1,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4386\/revisions"}],"predecessor-version":[{"id":4387,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4386\/revisions\/4387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media\/4385"}],"wp:attachment":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media?parent=4386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/categories?post=4386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/tags?post=4386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}