{"id":4370,"date":"2026-03-25T15:07:17","date_gmt":"2026-03-25T08:07:17","guid":{"rendered":"https:\/\/wpdesign.vn\/mobile-viewport-units-dynamic-viewport-va-safe-area-insets\/"},"modified":"2026-05-04T15:26:16","modified_gmt":"2026-05-04T08:26:16","slug":"mobile-viewport-units-dynamic-viewport-va-safe-area-insets","status":"publish","type":"post","link":"https:\/\/wpdesign.vn\/vi\/mobile-viewport-units-dynamic-viewport-va-safe-area-insets\/","title":{"rendered":"Mobile: Viewport Units, Dynamic Viewport V\u00e0 Safe Area Insets"},"content":{"rendered":"\n<p>Trong k\u1ef7 nguy\u00ean &#8220;Mobile First&#8221;, vi\u1ec7c ki\u1ec3m so\u00e1t hi\u1ec3n th\u1ecb tr\u00ean c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng kh\u00f4ng ch\u1ec9 d\u1eebng l\u1ea1i \u1edf vi\u1ec7c s\u1eed d\u1ee5ng Media Queries. S\u1ef1 \u0111a d\u1ea1ng v\u1ec1 ph\u1ea7n c\u1ee9ng (Notch, Dynamic Island) v\u00e0 h\u00e0nh vi c\u1ee7a tr\u00ecnh duy\u1ec7t (thanh \u0111\u1ecba ch\u1ec9 \u1ea9n\/hi\u1ec7n) \u0111\u00e3 t\u1ea1o ra nh\u1eefng th\u00e1ch th\u1ee9c l\u1edbn cho c\u00e1c \u0111\u01a1n v\u1ecb \u0111o l\u01b0\u1eddng truy\u1ec1n th\u1ed1ng. B\u00e0i vi\u1ebft n\u00e0y s\u1ebd ph\u00e2n t\u00edch chuy\u00ean s\u00e2u v\u1ec1 s\u1ef1 ti\u1ebfn h\u00f3a c\u1ee7a Viewport Units v\u00e0 c\u00e1ch \u1ee9ng d\u1ee5ng Safe Area Insets \u0111\u1ec3 x\u00e2y d\u1ef1ng giao di\u1ec7n chu\u1ea9n x\u00e1c.  <\/p>\n\n<h4 class=\"wp-block-heading\">1. H\u1ea1n ch\u1ebf c\u1ee7a Viewport Units truy\u1ec1n th\u1ed1ng (vh, vw)<\/h4>\n\n<h6 class=\"wp-block-heading\">1.1 Kh\u00e1i ni\u1ec7m c\u01a1 b\u1ea3n<\/h6>\n\n<p>\u0110\u01a1n v\u1ecb Viewport truy\u1ec1n th\u1ed1ng \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh d\u1ef1a tr\u00ean k\u00edch th\u01b0\u1edbc c\u1ee7a <strong>Initial Containing Block<\/strong>.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>1vh<\/strong>: T\u01b0\u01a1ng \u0111\u01b0\u01a1ng $1\\%$ chi\u1ec1u cao c\u1ee7a viewport.<\/li>\n\n\n\n<li><strong>1vw<\/strong>: T\u01b0\u01a1ng \u0111\u01b0\u01a1ng $1\\%$ chi\u1ec1u r\u1ed9ng c\u1ee7a viewport.<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">1.2 &#8220;C\u01a1n \u00e1c m\u1ed9ng&#8221; tr\u00ean tr\u00ecnh duy\u1ec7t di \u0111\u1ed9ng<\/h6>\n\n<p>V\u1ea5n \u0111\u1ec1 l\u1edbn nh\u1ea5t c\u1ee7a <code>100vh<\/code> tr\u00ean thi\u1ebft b\u1ecb di \u0111\u1ed9ng (\u0111\u1eb7c bi\u1ec7t l\u00e0 Safari tr\u00ean iOS v\u00e0 Chrome tr\u00ean Android) l\u00e0 s\u1ef1 kh\u00f4ng nh\u1ea5t qu\u00e1n khi thanh \u0111\u1ecba ch\u1ec9 (Address Bar) thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Tr\u1ea1ng th\u00e1i thanh \u0111\u1ecba ch\u1ec9 hi\u1ec7n h\u1eefu:<\/strong> Tr\u00ecnh duy\u1ec7t t\u00ednh to\u00e1n <code>100vh<\/code> bao g\u1ed3m c\u1ea3 ph\u1ea7n di\u1ec7n t\u00edch b\u00ean d\u01b0\u1edbi thanh \u0111\u1ecba ch\u1ec9. K\u1ebft qu\u1ea3 l\u00e0 n\u1ed9i dung quan tr\u1ecdng \u1edf cu\u1ed1i trang (nh\u01b0 n\u00fat CTA) th\u01b0\u1eddng b\u1ecb che khu\u1ea5t. <\/li>\n\n\n\n<li><strong>Hi\u1ec7n t\u01b0\u1ee3ng Layout Shift:<\/strong> Khi ng\u01b0\u1eddi d\u00f9ng cu\u1ed9n trang, thanh \u0111\u1ecba ch\u1ec9 thu nh\u1ecf, gi\u00e1 tr\u1ecb th\u1ef1c t\u1ebf c\u1ee7a viewport thay \u0111\u1ed5i nh\u01b0ng <code>vh<\/code> kh\u00f4ng c\u1eadp nh\u1eadt ngay l\u1eadp t\u1ee9c ho\u1eb7c g\u00e2y ra hi\u1ec7n t\u01b0\u1ee3ng gi\u1eadt (flicker) cho giao di\u1ec7n.<\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">2. K\u1ef7 nguy\u00ean m\u1edbi: Dynamic Viewport Units<\/h4>\n\n<p>\u0110\u1ec3 kh\u1eafc ph\u1ee5c c\u00e1c h\u1ea1n ch\u1ebf tr\u00ean, Specification c\u1ee7a CSS \u0111\u00e3 b\u1ed5 sung c\u00e1c \u0111\u01a1n v\u1ecb viewport m\u1edbi, cho ph\u00e9p l\u1eadp tr\u00ecnh vi\u00ean ki\u1ec3m so\u00e1t ch\u00ednh x\u00e1c h\u01a1n d\u1ef1a tr\u00ean tr\u1ea1ng th\u00e1i c\u1ee7a UI tr\u00ecnh duy\u1ec7t.<\/p>\n\n<h6 class=\"wp-block-heading\">2.1 Small Viewport (svh, svw)<\/h6>\n\n<p>\u0110\u01a1n v\u1ecb <strong>Small Viewport<\/strong> \u0111\u01b0\u1ee3c t\u00ednh to\u00e1n khi c\u00e1c th\u00e0nh ph\u1ea7n giao di\u1ec7n c\u1ee7a tr\u00ecnh duy\u1ec7t (thanh \u0111\u1ecba ch\u1ec9, thanh c\u00f4ng c\u1ee5) \u0111ang \u1edf tr\u1ea1ng th\u00e1i <strong>hi\u1ec3n th\u1ecb t\u1ed1i \u0111a<\/strong>.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0110\u1eb7c \u0111i\u1ec3m:<\/strong> \u0110\u00e2y l\u00e0 gi\u00e1 tr\u1ecb &#8220;an to\u00e0n&#8221; nh\u1ea5t. N\u1ebfu b\u1ea1n \u0111\u1eb7t <code>height: 100svh<\/code>, ph\u1ea7n t\u1eed \u0111\u00f3 s\u1ebd lu\u00f4n hi\u1ec3n th\u1ecb \u0111\u1ea7y \u0111\u1ee7 trong v\u00f9ng nh\u00ecn th\u1ea5y m\u00e0 kh\u00f4ng bao gi\u1edd b\u1ecb thanh \u0111\u1ecba ch\u1ec9 che m\u1ea5t. <\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">2.2 Large Viewport (lvh, lvw)<\/h6>\n\n<p>Ng\u01b0\u1ee3c l\u1ea1i, <strong>Large Viewport<\/strong> \u0111\u01b0\u1ee3c t\u00ednh to\u00e1n khi c\u00e1c th\u00e0nh ph\u1ea7n giao di\u1ec7n tr\u00ecnh duy\u1ec7t \u1edf tr\u1ea1ng th\u00e1i <strong>thu nh\u1ecf ho\u1eb7c \u1ea9n ho\u00e0n to\u00e0n<\/strong>.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0110\u1eb7c \u0111i\u1ec3m:<\/strong> <code>100lvh<\/code> t\u01b0\u01a1ng \u0111\u01b0\u01a1ng v\u1edbi c\u00e1ch ho\u1ea1t \u0111\u1ed9ng c\u1ee7a <code>100vh<\/code> c\u0169 tr\u00ean m\u1ed9t s\u1ed1 tr\u00ecnh duy\u1ec7t. N\u00f3 t\u1eadn d\u1ee5ng t\u1ed1i \u0111a kh\u00f4ng gian m\u00e0n h\u00ecnh nh\u01b0ng c\u00f3 r\u1ee7i ro b\u1ecb che khu\u1ea5t n\u1ed9i dung \u1edf c\u00e1c c\u1ea1nh. <\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">2.3 Dynamic Viewport (dvh, dvw)<\/h6>\n\n<p>\u0110\u00e2y l\u00e0 \u0111\u01a1n v\u1ecb linh ho\u1ea1t nh\u1ea5t. Gi\u00e1 tr\u1ecb c\u1ee7a n\u00f3 s\u1ebd <strong>t\u1ef1 \u0111\u1ed9ng \u0111i\u1ec1u ch\u1ec9nh<\/strong> khi thanh \u0111\u1ecba ch\u1ec9 thay \u0111\u1ed5i tr\u1ea1ng th\u00e1i. <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>C\u01a1 ch\u1ebf:<\/strong> Khi thanh \u0111\u1ecba ch\u1ec9 co l\u1ea1i, <code>100dvh<\/code> s\u1ebd gi\u00e3n ra b\u1eb1ng <code>100lvh<\/code>. Khi thanh \u0111\u1ecba ch\u1ec9 hi\u1ec7n l\u00ean, n\u00f3 thu l\u1ea1i b\u1eb1ng <code>100svh<\/code>. <\/li>\n\n\n\n<li><strong>L\u01b0u \u00fd hi\u1ec7u n\u0103ng:<\/strong> Vi\u1ec7c l\u1ea1m d\u1ee5ng <code>dvh<\/code> cho qu\u00e1 nhi\u1ec1u ph\u1ea7n t\u1eed c\u00f3 th\u1ec3 g\u00e2y \u00e1p l\u1ef1c l\u00ean ti\u1ebfn tr\u00ecnh render (Reflow) v\u00ec tr\u00ecnh duy\u1ec7t ph\u1ea3i t\u00ednh to\u00e1n l\u1ea1i k\u00edch th\u01b0\u1edbc li\u00ean t\u1ee5c trong khi cu\u1ed9n.<\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">3. X\u1eed l\u00fd ph\u1ea7n c\u1ee9ng \u0111\u1eb7c th\u00f9 v\u1edbi Safe Area Insets<\/h4>\n\n<p>Ngo\u00e0i c\u00e1c th\u00e0nh ph\u1ea7n ph\u1ea7n m\u1ec1m (UI tr\u00ecnh duy\u1ec7t), l\u1eadp tr\u00ecnh vi\u00ean c\u00f2n ph\u1ea3i \u0111\u1ed1i m\u1eb7t v\u1edbi c\u00e1c y\u1ebfu t\u1ed1 ph\u1ea7n c\u1ee9ng nh\u01b0 &#8220;tai th\u1ecf&#8221; (Notch), camera \u0111\u1ee5c l\u1ed7, ho\u1eb7c thanh \u0111i\u1ec1u h\u01b0\u1edbng h\u1ec7 th\u1ed1ng (Home Indicator).<\/p>\n\n<h6 class=\"wp-block-heading\">3.1 Kh\u00e1i ni\u1ec7m Safe Area<\/h6>\n\n<p><strong>Safe Area<\/strong> l\u00e0 v\u00f9ng hi\u1ec3n th\u1ecb kh\u00f4ng b\u1ecb che khu\u1ea5t b\u1edfi c\u00e1c y\u1ebfu t\u1ed1 thi\u1ebft k\u1ebf ph\u1ea7n c\u1ee9ng ho\u1eb7c giao di\u1ec7n h\u1ec7 th\u1ed1ng. \u0110\u1ec3 truy c\u1eadp v\u00e0o c\u00e1c gi\u00e1 tr\u1ecb n\u00e0y, ch\u00fang ta s\u1eed d\u1ee5ng h\u00e0m <code>env()<\/code> (environment variables) \u0111\u01b0\u1ee3c gi\u1edbi thi\u1ec7u t\u1eeb iOS 11. <\/p>\n\n<h6 class=\"wp-block-heading\">3.2 C\u00e1c bi\u1ebfn m\u00f4i tr\u01b0\u1eddng ph\u1ed5 bi\u1ebfn<\/h6>\n\n<ul class=\"wp-block-list\">\n<li><code>safe-area-inset-top<\/code>: Kho\u1ea3ng c\u00e1ch t\u1eeb m\u00e9p tr\u00ean m\u00e0n h\u00ecnh \u0111\u1ebfn v\u00f9ng an to\u00e0n (th\u01b0\u1eddng d\u00f9ng cho c\u00e1c thi\u1ebft b\u1ecb c\u00f3 Notch).<\/li>\n\n\n\n<li><code>safe-area-inset-bottom<\/code>: Kho\u1ea3ng c\u00e1ch t\u1eeb m\u00e9p d\u01b0\u1edbi (tr\u00e1nh thanh Home Indicator).<\/li>\n\n\n\n<li><code>safe-area-inset-left \/ right<\/code>: C\u1ea7n thi\u1ebft khi ng\u01b0\u1eddi d\u00f9ng xoay ngang \u0111i\u1ec7n tho\u1ea1i (Landscape).<\/li>\n<\/ul>\n\n<h6 class=\"wp-block-heading\">3.3 C\u00e1ch tri\u1ec3n khai k\u1ef9 thu\u1eadt<\/h6>\n\n<p>\u0110\u1ec3 s\u1eed d\u1ee5ng \u0111\u01b0\u1ee3c <code>env()<\/code>, b\u1ea1n b\u1eaft bu\u1ed9c ph\u1ea3i khai b\u00e1o thu\u1ed9c t\u00ednh <code>viewport-fit=cover<\/code> trong th\u1ebb meta:<\/p>\n\n<p>HTML<\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, viewport-fit=cover\"&gt;\n<\/code><\/pre>\n\n<p>Sau \u0111\u00f3, \u00e1p d\u1ee5ng trong CSS \u0111\u1ec3 tr\u00e1nh vi\u1ec7c n\u1ed9i dung b\u1ecb \u0111\u00e8 l\u00ean:<\/p>\n\n<p>CSS<\/p>\n\n<pre class=\"wp-block-code\"><code>header {\n  \/* K\u1ebft h\u1ee3p gi\u1eefa padding chu\u1ea9n v\u00e0 kho\u1ea3ng c\u00e1ch an to\u00e0n *\/\n  padding-top: calc(20px + env(safe-area-inset-top));\n}\n<\/code><\/pre>\n\n<h4 class=\"wp-block-heading\">4. Ph\u00e2n t\u00edch so s\u00e1nh v\u00e0 Chi\u1ebfn l\u01b0\u1ee3c \u00e1p d\u1ee5ng<\/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>vh \/ vw<\/strong><\/td><td><strong>svh \/ svw<\/strong><\/td><td><strong>lvh \/ lvw<\/strong><\/td><td><strong>dvh \/ dvw<\/strong><\/td><\/tr><\/thead><tbody><tr><td><strong>T\u00ednh \u1ed5n \u0111\u1ecbnh<\/strong><\/td><td>Th\u1ea5p (bi\u1ebfn thi\u00ean t\u00f9y tr\u00ecnh duy\u1ec7t)<\/td><td>R\u1ea5t cao (c\u1ed1 \u0111\u1ecbnh theo v\u00f9ng nh\u1ecf nh\u1ea5t)<\/td><td>Cao (c\u1ed1 \u0111\u1ecbnh theo v\u00f9ng l\u1edbn nh\u1ea5t)<\/td><td>Trung b\u00ecnh (thay \u0111\u1ed5i khi cu\u1ed9n)<\/td><\/tr><tr><td><strong>Tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng<\/strong><\/td><td>D\u1ec5 g\u00e2y m\u1ea5t n\u1ed9i dung<\/td><td>An to\u00e0n, d\u1ec5 d\u1ef1 \u0111o\u00e1n<\/td><td>T\u1eadn d\u1ee5ng kh\u00f4ng gian t\u1ed1t<\/td><td>Hi\u1ec7n \u0111\u1ea1i, m\u01b0\u1ee3t m\u00e0<\/td><\/tr><tr><td><strong>Tr\u01b0\u1eddng h\u1ee3p s\u1eed d\u1ee5ng<\/strong><\/td><td>Desktop ho\u1eb7c \u1ee9ng d\u1ee5ng \u0111\u01a1n gi\u1ea3n<\/td><td>C\u00e1c form \u0111\u0103ng nh\u1eadp, Modal, Sidebar<\/td><td>C\u00e1c trang Landing page ngh\u1ec7 thu\u1eadt<\/td><td>Hero Section, Full-screen App<\/td><\/tr><\/tbody><\/table><\/figure>\n\n<h4 class=\"wp-block-heading\">5. C\u00e1c sai l\u1ea7m th\u01b0\u1eddng g\u1eb7p v\u00e0 Gi\u1ea3i ph\u00e1p<\/h4>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li><strong>Ch\u1ec9 s\u1eed d\u1ee5ng <code>100vh<\/code> cho Hero Section:<\/strong> \u0110i\u1ec1u n\u00e0y th\u01b0\u1eddng d\u1eabn \u0111\u1ebfn vi\u1ec7c n\u00fat &#8220;Scroll Down&#8221; b\u1ecb che m\u1ea5t tr\u00ean mobile.\n<ul class=\"wp-block-list\">\n<li><em>Gi\u1ea3i ph\u00e1p:<\/em> Thay th\u1ebf b\u1eb1ng <code>100dvh<\/code> ho\u1eb7c <code>100svh<\/code>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Qu\u00ean khai b\u00e1o <code>viewport-fit=cover<\/code>:<\/strong> Khi\u1ebfn cho c\u00e1c gi\u00e1 tr\u1ecb <code>env()<\/code> lu\u00f4n tr\u1ea3 v\u1ec1 <code>0<\/code>, d\u1eabn \u0111\u1ebfn n\u1ed9i dung b\u1ecb d\u00ednh ch\u1eb7t v\u00e0o m\u00e9p Notch tr\u00ean iPhone.<\/li>\n\n\n\n<li><strong>Kh\u00f4ng c\u00f3 Fallback cho tr\u00ecnh duy\u1ec7t c\u0169:<\/strong> M\u1eb7c d\u00f9 h\u1ed7 tr\u1ee3 hi\u1ec7n nay \u0111\u00e3 r\u1ea5t r\u1ed9ng, nh\u01b0ng v\u1edbi c\u00e1c h\u1ec7 \u0111i\u1ec1u h\u00e0nh c\u0169, b\u1ea1n n\u00ean vi\u1ebft fallback:CSS<code>.element { height: 100vh; \/* Fallback *\/ height: 100dvh; }<\/code><\/li>\n<\/ul>\n\n<h4 class=\"wp-block-heading\">6. K\u1ebft lu\u1eadn<\/h4>\n\n<p>Vi\u1ec7c n\u1eafm v\u1eefng s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa c\u00e1c \u0111\u01a1n v\u1ecb Viewport v\u00e0 Safe Area Insets kh\u00f4ng ch\u1ec9 gi\u00fap b\u1ea1n gi\u1ea3i quy\u1ebft c\u00e1c bug hi\u1ec3n th\u1ecb kh\u00f3 ch\u1ecbu m\u00e0 c\u00f2n n\u00e2ng cao t\u00ednh chuy\u00ean nghi\u1ec7p cho s\u1ea3n ph\u1ea9m. Trong h\u1ea7u h\u1ebft c\u00e1c tr\u01b0\u1eddng h\u1ee3p tr\u00ean mobile: <\/p>\n\n<ul class=\"wp-block-list\">\n<li>H\u00e3y d\u00f9ng <strong>svh<\/strong> n\u1ebfu b\u1ea1n mu\u1ed1n s\u1ef1 ch\u1eafc ch\u1eafn tuy\u1ec7t \u0111\u1ed1i.<\/li>\n\n\n\n<li>H\u00e3y d\u00f9ng <strong>dvh<\/strong> n\u1ebfu b\u1ea1n mu\u1ed1n m\u1ed9t giao di\u1ec7n th\u00edch \u1ee9ng ho\u00e0n h\u1ea3o.<\/li>\n\n\n\n<li>Lu\u00f4n s\u1eed d\u1ee5ng <strong>Safe Area Insets<\/strong> \u0111\u1ec3 t\u00f4n tr\u1ecdng thi\u1ebft k\u1ebf ph\u1ea7n c\u1ee9ng c\u1ee7a thi\u1ebft b\u1ecb.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Trong k\u1ef7 nguy\u00ean &#8220;Mobile First&#8221;, vi\u1ec7c ki\u1ec3m so\u00e1t hi\u1ec3n th\u1ecb tr\u00ean c\u00e1c thi\u1ebft b\u1ecb di \u0111\u1ed9ng kh\u00f4ng ch\u1ec9 d\u1eebng l\u1ea1i [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":4369,"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-4370","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\/4370","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=4370"}],"version-history":[{"count":1,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4370\/revisions"}],"predecessor-version":[{"id":4371,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/posts\/4370\/revisions\/4371"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media\/4369"}],"wp:attachment":[{"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/media?parent=4370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/categories?post=4370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpdesign.vn\/vi\/wp-json\/wp\/v2\/tags?post=4370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}