CINXE.COM

<!doctype html><html amp lang="vi" i-amphtml-binding i-amphtml-layout i-amphtml-no-boilerplate transformed="self;v=1"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="preload" href="/static/fonts/poppins-v5-latin-700.woff2" as="font" crossorigin><link rel="preload" href="/static/fonts/noto-sans-v7-latin-700.woff2" as="font" crossorigin><meta name="theme-color" content="#005af0"><meta name="robots" content="noindex,follow"><meta name="description" content="Provides the ability to collect and store a user's consent through a UI control. Also provides the ability to block other AMP components based on the user's consent."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="Provides the ability to collect and store a user's consent through a UI control. Also provides the ability to block other AMP components based on the user's consent."><meta name="twitter:title" content="Tài liệu: amp-consent"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-component-600x314.png"><meta property="og:title" content="Tài liệu: <amp-consent>"><meta property="og:url" content="https://amp.dev/vi/documentation/components/amp-consent/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-component-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites,stories"><meta name="page-locale" content="vi"><meta http-equiv="origin-trial" content="AviuuiVhVdQ3GpVtxSpyMT+XsL/qGGYmyiyLvYSKPL3rRDLipe/ard5x+DXVlrATtolwX75VtpSKc9IEzLDd4AkAAABmeyJvcmlnaW4iOiJodHRwczovL2FtcC5kZXY6NDQzIiwiZmVhdHVyZSI6IkV4cGVyaW1lbnRhbEF1dG9wbGF5RHluYW1pY0RlbGVnYXRpb24iLCJleHBpcnkiOjE1NzA1Nzg0NDF9"><style amp-runtime i-amphtml-version="012406131415000">html{overflow-x:hidden!important}html.i-amphtml-fie{height:100%!important;width:100%!important}html:not([amp4ads]),html:not([amp4ads]) body{height:auto!important}html:not([amp4ads]) body{margin:0!important}body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html.i-amphtml-singledoc.i-amphtml-embedded{-ms-touch-action:pan-y pinch-zoom;touch-action:pan-y pinch-zoom}html.i-amphtml-fie>body,html.i-amphtml-singledoc>body{overflow:visible!important}html.i-amphtml-fie:not(.i-amphtml-inabox)>body,html.i-amphtml-singledoc:not(.i-amphtml-inabox)>body{position:relative!important}html.i-amphtml-ios-embed-legacy>body{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important}html.i-amphtml-ios-embed{overflow-y:auto!important;position:static}#i-amphtml-wrapper{overflow-x:hidden!important;overflow-y:auto!important;position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;margin:0!important;display:block!important}html.i-amphtml-ios-embed.i-amphtml-ios-overscroll,html.i-amphtml-ios-embed.i-amphtml-ios-overscroll>#i-amphtml-wrapper{-webkit-overflow-scrolling:touch!important}#i-amphtml-wrapper>body{position:relative!important;border-top:1px solid transparent!important}#i-amphtml-wrapper+body{visibility:visible}#i-amphtml-wrapper+body .i-amphtml-lightbox-element,#i-amphtml-wrapper+body[i-amphtml-lightbox]{visibility:hidden}#i-amphtml-wrapper+body[i-amphtml-lightbox] .i-amphtml-lightbox-element{visibility:visible}#i-amphtml-wrapper.i-amphtml-scroll-disabled,.i-amphtml-scroll-disabled{overflow-x:hidden!important;overflow-y:hidden!important}amp-instagram{padding:54px 0px 0px!important;background-color:#fff}amp-iframe iframe{box-sizing:border-box!important}[amp-access][amp-access-hide]{display:none}[subscriptions-dialog],body:not(.i-amphtml-subs-ready) [subscriptions-action],body:not(.i-amphtml-subs-ready) [subscriptions-section]{display:none!important}amp-experiment,amp-live-list>[update]{display:none}amp-list[resizable-children]>.i-amphtml-loading-container.amp-hidden{display:none!important}amp-list [fetch-error],amp-list[load-more] [load-more-button],amp-list[load-more] [load-more-end],amp-list[load-more] [load-more-failed],amp-list[load-more] [load-more-loading]{display:none}amp-list[diffable] div[role=list]{display:block}amp-story-page,amp-story[standalone]{min-height:1px!important;display:block!important;height:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;width:100%!important}amp-story[standalone]{background-color:#000!important;position:relative!important}amp-story-page{background-color:#757575}amp-story .amp-active>div,amp-story .i-amphtml-loader-background{display:none!important}amp-story-page:not(:first-of-type):not([distance]):not([active]){transform:translateY(1000vh)!important}amp-autocomplete{position:relative!important;display:inline-block!important}amp-autocomplete>input,amp-autocomplete>textarea{padding:0.5rem;border:1px solid rgba(0,0,0,.33)}.i-amphtml-autocomplete-results,amp-autocomplete>input,amp-autocomplete>textarea{font-size:1rem;line-height:1.5rem}[amp-fx^=fly-in]{visibility:hidden}amp-script[nodom],amp-script[sandboxed]{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden} /*# sourceURL=/css/ampdoc.css*/[hidden]{display:none!important}.i-amphtml-element{display:inline-block}.i-amphtml-blurry-placeholder{transition:opacity 0.3s cubic-bezier(0.0,0.0,0.2,1)!important;pointer-events:none}[layout=nodisplay]:not(.i-amphtml-element){display:none!important}.i-amphtml-layout-fixed,[layout=fixed][width][height]:not(.i-amphtml-layout-fixed){display:inline-block;position:relative}.i-amphtml-layout-responsive,[layout=responsive][width][height]:not(.i-amphtml-layout-responsive),[width][height][heights]:not([layout]):not(.i-amphtml-layout-responsive),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-layout-responsive){display:block;position:relative}.i-amphtml-layout-intrinsic,[layout=intrinsic][width][height]:not(.i-amphtml-layout-intrinsic){display:inline-block;position:relative;max-width:100%}.i-amphtml-layout-intrinsic .i-amphtml-sizer{max-width:100%}.i-amphtml-intrinsic-sizer{max-width:100%;display:block!important}.i-amphtml-layout-container,.i-amphtml-layout-fixed-height,[layout=container],[layout=fixed-height][height]:not(.i-amphtml-layout-fixed-height){display:block;position:relative}.i-amphtml-layout-fill,.i-amphtml-layout-fill.i-amphtml-notbuilt,[layout=fill]:not(.i-amphtml-layout-fill),body noscript>*{display:block;overflow:hidden!important;position:absolute;top:0;left:0;bottom:0;right:0}body noscript>*{position:absolute!important;width:100%;height:100%;z-index:2}body noscript{display:inline!important}.i-amphtml-layout-flex-item,[layout=flex-item]:not(.i-amphtml-layout-flex-item){display:block;position:relative;-ms-flex:1 1 auto;flex:1 1 auto}.i-amphtml-layout-fluid{position:relative}.i-amphtml-layout-size-defined{overflow:hidden!important}.i-amphtml-layout-awaiting-size{position:absolute!important;top:auto!important;bottom:auto!important}i-amphtml-sizer{display:block!important}@supports (aspect-ratio:1/1){i-amphtml-sizer.i-amphtml-disable-ar{display:none!important}}.i-amphtml-blurry-placeholder,.i-amphtml-fill-content{display:block;height:0;max-height:100%;max-width:100%;min-height:100%;min-width:100%;width:0;margin:auto}.i-amphtml-layout-size-defined .i-amphtml-fill-content{position:absolute;top:0;left:0;bottom:0;right:0}.i-amphtml-replaced-content,.i-amphtml-screen-reader{padding:0!important;border:none!important}.i-amphtml-screen-reader{position:fixed!important;top:0px!important;left:0px!important;width:4px!important;height:4px!important;opacity:0!important;overflow:hidden!important;margin:0!important;display:block!important;visibility:visible!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:8px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:12px!important}.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader~.i-amphtml-screen-reader{left:16px!important}.i-amphtml-unresolved{position:relative;overflow:hidden!important}.i-amphtml-select-disabled{-webkit-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.i-amphtml-notbuilt,[layout]:not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){position:relative;overflow:hidden!important;color:transparent!important}.i-amphtml-notbuilt:not(.i-amphtml-layout-container)>*,[layout]:not([layout=container]):not(.i-amphtml-element)>*,[width][height][heights]:not([layout]):not(.i-amphtml-element)>*,[width][height][sizes]:not([layout]):not(.i-amphtml-element)>*{display:none}amp-img:not(.i-amphtml-element)[i-amphtml-ssr]>img.i-amphtml-fill-content{display:block}.i-amphtml-notbuilt:not(.i-amphtml-layout-container),[layout]:not([layout=container]):not(.i-amphtml-element),[width][height][heights]:not([layout]):not(.i-amphtml-element),[width][height][sizes]:not(img):not([layout]):not(.i-amphtml-element){color:transparent!important;line-height:0!important}.i-amphtml-ghost{visibility:hidden!important}.i-amphtml-element>[placeholder],[layout]:not(.i-amphtml-element)>[placeholder],[width][height][heights]:not([layout]):not(.i-amphtml-element)>[placeholder],[width][height][sizes]:not([layout]):not(.i-amphtml-element)>[placeholder]{display:block;line-height:normal}.i-amphtml-element>[placeholder].amp-hidden,.i-amphtml-element>[placeholder].hidden{visibility:hidden}.i-amphtml-element:not(.amp-notsupported)>[fallback],.i-amphtml-layout-container>[placeholder].amp-hidden,.i-amphtml-layout-container>[placeholder].hidden{display:none}.i-amphtml-layout-size-defined>[fallback],.i-amphtml-layout-size-defined>[placeholder]{position:absolute!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:1}amp-img[i-amphtml-ssr]:not(.i-amphtml-element)>[placeholder]{z-index:auto}.i-amphtml-notbuilt>[placeholder]{display:block!important}.i-amphtml-hidden-by-media-query{display:none!important}.i-amphtml-element-error{background:red!important;color:#fff!important;position:relative!important}.i-amphtml-element-error:before{content:attr(error-message)}i-amp-scroll-container,i-amphtml-scroll-container{position:absolute;top:0;left:0;right:0;bottom:0;display:block}i-amp-scroll-container.amp-active,i-amphtml-scroll-container.amp-active{overflow:auto;-webkit-overflow-scrolling:touch}.i-amphtml-loading-container{display:block!important;pointer-events:none;z-index:1}.i-amphtml-notbuilt>.i-amphtml-loading-container{display:block!important}.i-amphtml-loading-container.amp-hidden{visibility:hidden}.i-amphtml-element>[overflow]{cursor:pointer;position:relative;z-index:2;visibility:hidden;display:initial;line-height:normal}.i-amphtml-layout-size-defined>[overflow]{position:absolute}.i-amphtml-element>[overflow].amp-visible{visibility:visible}template{display:none!important}.amp-border-box,.amp-border-box *,.amp-border-box :after,.amp-border-box :before{box-sizing:border-box}amp-pixel{display:none!important}amp-analytics,amp-auto-ads,amp-story-auto-ads{position:fixed!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;visibility:hidden}amp-story{visibility:hidden!important}html.i-amphtml-fie>amp-analytics{position:initial!important}[visible-when-invalid]:not(.visible),form [submit-error],form [submit-success],form [submitting]{display:none}amp-accordion{display:block!important}@media (min-width:1px){:where(amp-accordion>section)>:first-child{margin:0;background-color:#efefef;padding-right:20px;border:1px solid #dfdfdf}:where(amp-accordion>section)>:last-child{margin:0}}amp-accordion>section{float:none!important}amp-accordion>section>*{float:none!important;display:block!important;overflow:hidden!important;position:relative!important}amp-accordion,amp-accordion>section{margin:0}amp-accordion:not(.i-amphtml-built)>section>:last-child{display:none!important}amp-accordion:not(.i-amphtml-built)>section[expanded]>:last-child{display:block!important} /*# sourceURL=/css/ampshared.css*/</style><script async src="https://cdn.ampproject.org/v0.mjs" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0.js" crossorigin="anonymous"></script><script async src="https://cdn.ampproject.org/v0/amp-analytics-0.1.mjs" custom-element="amp-analytics" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js" crossorigin="anonymous" custom-element="amp-analytics"></script><script async src="https://cdn.ampproject.org/v0/amp-animation-0.1.mjs" custom-element="amp-animation" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" crossorigin="anonymous" custom-element="amp-animation"></script><script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.mjs" custom-element="amp-bind" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" crossorigin="anonymous" custom-element="amp-bind"></script><script async src="https://cdn.ampproject.org/v0/amp-consent-0.1.mjs" custom-element="amp-consent" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-consent-0.1.js" crossorigin="anonymous" custom-element="amp-consent"></script><script async src="https://cdn.ampproject.org/v0/amp-geo-0.1.mjs" custom-element="amp-geo" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-geo-0.1.js" crossorigin="anonymous" custom-element="amp-geo"></script><script custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.mjs" async type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" crossorigin="anonymous" custom-element="amp-iframe"></script><script async src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.mjs" custom-element="amp-install-serviceworker" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js" crossorigin="anonymous" custom-element="amp-install-serviceworker"></script><script async src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.mjs" custom-element="amp-position-observer" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-position-observer-0.1.js" crossorigin="anonymous" custom-element="amp-position-observer"></script><script async src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.mjs" custom-element="amp-sidebar" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js" crossorigin="anonymous" custom-element="amp-sidebar"></script><script async src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.mjs" custom-element="amp-user-notification" type="module" crossorigin="anonymous"></script><script async nomodule src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js" crossorigin="anonymous" custom-element="amp-user-notification"></script><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/vi/documentation/components/amp-consent/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/components/amp-consent/"><title>Tài liệu: <amp-consent> - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/vi/documentation/components/amp-consent/ ","name":"amp.dev","headline":"Tài liệu: \u0026lt;amp-consent\u0026gt;","description":"Provides the ability to collect and store a user\u0026#39;s consent through a UI control. Also provides the ability to block other AMP components based on the user\u0026#39;s consent.","mainEntityOfPage":{"@type":"WebPage","@id":"https://amp.dev"},"publisher":{"@type":"Organization","name":"AMP Project","logo":{"url":"https://amp.dev/static/img/icons/icon-512x512.png","width":512,"height":512,"@type":"ImageObject"}},"image":{"@type":"ImageObject","url":"https://amp.dev/static/img/sharing/docs-component-600x314.png","width":600,"height":314}}</script><style amp-custom>@font-face{font-family:system;font-style:normal;font-weight:300;src:local(".SFNSText-Light"),local(".HelveticaNeueDeskInterface-Light"),local(".LucidaGrandeUI"),local("Ubuntu Light"),local("Segoe UI Light"),local("Roboto-Light"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:300;src:local(".SFNSText-LightItalic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Light Italic"),local("Segoe UI Light Italic"),local("Roboto-LightItalic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:400;src:local(".SFNSText-Regular"),local(".HelveticaNeueDeskInterface-Regular"),local(".LucidaGrandeUI"),local("Ubuntu"),local("Segoe UI"),local("Roboto-Regular"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:italic;font-weight:400;src:local(".SFNSText-Italic"),local(".HelveticaNeueDeskInterface-Italic"),local(".LucidaGrandeUI"),local("Ubuntu Italic"),local("Segoe UI Italic"),local("Roboto-Italic"),local("DroidSans"),local("Tahoma")}@font-face{font-family:system;font-style:normal;font-weight:500;src:local(".SFNSText-Medium"),local(".HelveticaNeueDeskInterface-MediumP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium"),local("Segoe UI Semibold"),local("Roboto-Medium"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:500;src:local(".SFNSText-MediumItalic"),local(".HelveticaNeueDeskInterface-MediumItalicP4"),local(".LucidaGrandeUI"),local("Ubuntu Medium Italic"),local("Segoe UI Semibold Italic"),local("Roboto-MediumItalic"),local("DroidSans-Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:normal;font-weight:700;src:local(".SFNSText-Bold"),local(".HelveticaNeueDeskInterface-Bold"),local(".LucidaGrandeUI"),local("Ubuntu Bold"),local("Roboto-Bold"),local("DroidSans-Bold"),local("Segoe UI Bold"),local("Tahoma Bold")}@font-face{font-family:system;font-style:italic;font-weight:700;src:local(".SFNSText-BoldItalic"),local(".HelveticaNeueDeskInterface-BoldItalic"),local(".LucidaGrandeUI"),local("Ubuntu Bold Italic"),local("Roboto-BoldItalic"),local("DroidSans-Bold"),local("Segoe UI Bold Italic"),local("Tahoma Bold")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:400;font-display:optional;src:local("Noto Sans"),local("NotoSans"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-regular.woff) format("woff")}@font-face{font-family:Noto Sans;font-style:normal;font-weight:700;font-display:optional;src:local("Noto Sans Bold"),local("NotoSans-Bold"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/noto-sans-v7-latin-700.woff) format("woff")}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:optional;src:local("Poppins Bold"),local("Poppins-Bold"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff2) format("woff2"),url(https://amp.dev/static/fonts/poppins-v5-latin-700.woff) format("woff")}@font-face{font-family:Fira Mono;font-style:normal;font-weight:400;font-display:optional;src:local("Fira Mono"),local("FiraMono"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff2) format("woff2"),url(https://amp.dev/static/fonts/fira-mono-v7-latin-500.woff) format("woff")}*{box-sizing:border-box}body,html{padding:0;margin:0;min-width:240px;color:#48525c;background-color:#fff;font-size:16px;font-family:Noto Sans,system;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation}@media(max-width:240px){body,html{font-size:14px}}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button{width:3em;height:3em;border-radius:50%;box-shadow:0 10px 15px 0 rgba(0,0,0,.4);transition:.4s;background-color:#fff;position:relative;box-sizing:border-box;margin:1em;border-style:none;background-position:50% 50%;background-repeat:no-repeat;z-index:10;pointer-events:all}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0'%3E%3Cpath d='M15 8.25H5.87l4.19-4.19L9 3 3 9l6 6 1.06-1.06-4.19-4.19H15v-1.5z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23005AF0' %3E%3Cpath d='M9 3L7.94 4.06l4.19 4.19H3v1.5h9.13l-4.19 4.19L9 15l6-6z'/%3E%3C/svg%3E")}body>*>:not(.ap-o-code-preview)>*>.amp-carousel-button:hover{cursor:pointer;box-shadow:0 20px 30px 0 rgba(0,0,0,.2);background-color:#fff}:target:before{content:"";display:block;visibility:hidden;height:120px;margin-top:-120px}@media(min-width:1024px){h1:target:before{height:75px;margin-top:-75px}h2:target:before{height:81px;margin-top:-81px}h3:target:before{height:87px;margin-top:-87px}h4:target:before{height:90px;margin-top:-90px}h5:target:before{height:93px;margin-top:-93px}h6:target:before{height:97px;margin-top:-97px}}h1,h2,h3,h4,h5{margin-top:1.5rem;margin-bottom:.75em;font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}h1{font-size:2.2rem;margin-top:3rem}section.-t h1:first-of-type{margin-top:0}@media(min-width:768px){section.-t h1:first-of-type{margin-bottom:2rem}}h2{font-size:1.8rem;margin-top:2rem}h3{font-size:1.414rem;margin-top:1.8rem}h4{font-size:1.2rem}h5{font-size:1rem}.-t .intro,.ap--section .intro{font-size:1rem;padding:0}.-t .intro *,.ap--section .intro *{font-size:inherit}.-t p,.ap--section p{line-height:1.6rem;font-weight:400;color:#48525c;display:block;margin-top:1.1em;margin-bottom:0;font-size:1rem}.-t p small,.ap--section p small{font-size:.875rem}.-t code,.ap--section code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em}.-t code,.-t p,.ap--section code,.ap--section p{overflow-wrap:break-word}.-t a,.ap--section a{position:relative;z-index:10}.-t a code,.ap--section a code{color:#005af0;z-index:-1}.-t pre,.ap--section pre{font-family:Fira Mono,monospace;font-weight:500;font-size:1rem;white-space:pre-wrap}.-t>ol,.-t>ul,.ap--section>ol,.ap--section>ul{line-height:1.6rem;font-weight:400;color:#48525c;display:block;padding-left:2em;margin:1.5em 0}.-t>ol ol,.-t>ol ul,.-t>ul ol,.-t>ul ul,.ap--section>ol ol,.ap--section>ol ul,.ap--section>ul ol,.ap--section>ul ul{padding-left:2em;margin:0}.-t>ol li,.-t>ul li,.ap--section>ol li,.ap--section>ul li{padding-left:.5em}.-t>ol li p,.-t>ul li p,.ap--section>ol li p,.ap--section>ul li p{font-size:1em}.-t figure figcaption,.ap--section figure figcaption{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;margin-top:.3em}.-t hr,.ap--section hr{height:1px;margin:.75em 0;background-color:#ebebf0;border:none}.-n{display:flex;align-items:center;text-decoration:none;padding:0 0 1.5em;margin:0}.-r{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;color:#005af0;line-height:1.3;transition:transform .3s ease}.-i{fill:#005af0;padding:.438em 0;margin-bottom:auto;margin-right:.625em;box-sizing:initial;transition:transform .3s ease}.-n:hover .-i,.-n:hover .-r{transform:translateX(10px)}.-s{border-bottom:1px solid #ebebf0}.-s .-r{font-size:1rem;font-family:Poppins,system;font-weight:700;color:#000;padding-left:10px}.-s .-i{width:1.375em;height:1.375em;fill:#fff;background-color:#005af0;overflow:hidden;padding:.563em}.-s .-i,.-s:hover .-i{box-shadow:0 10px 20px 0 rgba(0,0,0,.25)}.-s:hover .-i svg{animation:duepduep .3s ease}a{font-weight:700;text-decoration:none;color:#005af0}a code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}.ap-a-ico{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:1em;height:1em}.ap-a-btn{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1em;color:#fff;display:inline-block;max-width:100%;width:auto;height:auto;padding:.75em 1.75em;margin:0;text-decoration:none;text-align:center;border-radius:3px;background-color:#005af0;border:none;cursor:pointer;box-shadow:0 15px 35px -5px rgba(0,0,0,.25);transition:transform .3s ease,box-shadow .3s ease}.ap-a-btn:hover{transform:translateY(-.125em);box-shadow:0 25px 20px -15px rgba(0,0,0,.15)}@media(min-width:768px){.ap-a-btn{padding:1em 2em}}.-o{right:20px;left:auto;bottom:20px;width:calc(100% - 40px);padding:15px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;background-color:#fff;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);border-radius:8px}@media(min-width:768px){.-o{max-width:500px}}.-u{position:absolute;right:15px;top:15px;-webkit-appearance:none;background-color:transparent;border:none;padding:0}.-u svg{width:10px;height:10px}.-o button{cursor:pointer}.ap-o-translation-hint{position:fixed;z-index:100;width:100%;left:0;bottom:0}@media(max-width:767px){.ap-o-translation-hint{display:none}}.ap-o-translation-hint-wrapper{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;max-width:1440px;margin:0 auto;padding:1em 30px;background-color:#fff;border-top:5px solid #ffdc00;box-shadow:0 -2px 10px 0 rgba(0,0,0,.07)}.ap-o-translation-hint-link{display:inline-block}.-am+.ap-o-translation-hint{bottom:25px}.ap--footer{position:relative;z-index:15;padding:3em 0 2em;line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem;color:#fff;background:linear-gradient(45deg,#48525c,#20202a)}.-a{width:100%;max-width:1440px;padding:0 20px;margin:0 auto}.-f{padding-bottom:4em}@media(min-width:768px){.-f{display:flex;align-items:center}}.-l{display:flex;flex-direction:column;margin-left:auto}@media(min-width:1024px){.-l{flex-direction:row}}.-c{margin:3em 2em 1em 0;color:#fff}@media(min-width:768px){.-c{margin:auto 2em auto 1em}}.-h{display:flex;list-style:none;padding:0;margin:0}.-p{flex:1 0 auto}@media(min-width:768px){.-p{margin:16px}}.-d{width:2.5em;height:2.5em;fill:#fff}@media(max-width:240px){.-d{font-size:14px}}@media(min-width:768px){.-v{display:grid;grid-gap:30px;grid-template-columns:repeat(12,1fr)}}.-m{flex:1 1 100%}.-m:nth-child(odd){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(odd){grid-column:span 6}}.-m:nth-child(2n+2){grid-column:span 3}@media(max-width:1023px){.-m:nth-child(2n+2){grid-column:span 6}}.-g{color:#fff}.-y{list-style:none;padding:0}@media(min-width:768px){.-y+.-g{margin-top:2.5em}}.-b{position:relative}.-w{padding-left:35px;font-size:.8125rem;color:#fff}.-x{position:absolute;left:10px;top:8px;width:12px;height:12px;fill:#fff}.-k{display:flex;flex-direction:column;padding-top:4em}@media(min-width:768px){.-k{flex-direction:row;align-items:flex-end}}.-_{width:50%;max-width:200px;margin-bottom:40px;margin-right:auto}@media(min-width:768px){.-_{margin-bottom:0}}.-j{list-style:none;padding:0;margin:0}.-q{display:inline-block;margin-right:1em}.-z{font-size:.8125rem;font-weight:400;color:#fff}.-te{display:block;font-size:.875rem;margin-top:2em;color:#e2e5e6}.-te a{color:#fafafc}.ap-m-format-toggle{position:-webkit-sticky;position:sticky;top:0;margin:0 10px;padding:10px 0 0;width:100%;max-width:85%;z-index:12}@media(min-width:768px){.ap-m-format-toggle{padding:0;margin:0 15px 0 0;max-width:100%}}.ap-m-format-toggle-selected{border:0}.amp-mode-touch .ap-m-format-toggle-selected{position:relative}.ap-m-format-toggle-selected:focus:after,.ap-m-format-toggle-selected:hover:after{position:absolute;top:0;left:0;content:"";display:block;height:300%;width:100%}.ap-m-format-toggle-link,.ap-m-format-toggle-selected{z-index:3;display:flex;align-items:center;width:100%;margin:0 0 2px;padding:5px 8px;overflow:hidden;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Poppins,system;font-weight:700;font-size:12px;text-align:left;border-radius:4px;color:#000;background:#ebebf0;transition:opacity .2s ease;box-shadow:0 5px 15px -5px rgba(0,0,0,.25)}.ap-m-format-toggle-link .ap-a-ico,.ap-m-format-toggle-selected .ap-a-ico{width:14px;height:14px;margin-right:8px;fill:#000}.ap-m-format-toggle-link{color:#000;background:#ebebf0}.ap-m-format-toggle-link .ap-a-ico{fill:#000}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected,.ap-m-format-toggle-link-websites:hover{background:linear-gradient(225deg,#00dcc0,#005af0 75%);color:#fff}.ap-m-format-toggle-link-websites.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-websites:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected,.ap-m-format-toggle-link-stories:hover{background:linear-gradient(225deg,#ec6600,#ffdc00 75%);color:#20202a}.ap-m-format-toggle-link-stories.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-stories:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected,.ap-m-format-toggle-link-ads:hover{background:linear-gradient(225deg,#eb49e1,#5500d7 75%);color:#fff}.ap-m-format-toggle-link-ads.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-ads:hover .ap-a-ico{fill:#fff}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected,.ap-m-format-toggle-link-email:hover{background:linear-gradient(225deg,#09a600,#e1eb64 75%);color:#20202a}.ap-m-format-toggle-link-email.ap-m-format-toggle-selected .ap-a-ico,.ap-m-format-toggle-link-email:hover .ap-a-ico{fill:#20202a}.ap-m-format-toggle-angle{margin-right:0;margin-left:auto}.ap-m-format-toggle-formats{position:absolute;width:100%;z-index:2;pointer-events:none;opacity:0;transform:translateY(-20px);transition:all .2s ease;transition-delay:.05s}.ap-m-format-toggle-formats:focus-within,.ap-m-format-toggle-formats:hover,.ap-m-format-toggle-selected:focus+.ap-m-format-toggle-formats,.ap-m-format-toggle-selected:hover+.ap-m-format-toggle-formats{pointer-events:auto;opacity:1;transform:translateY(0)}body{top:0;left:0;background-repeat:no-repeat;background-size:100% auto;background-position:100% 0;background-attachment:fixed}body.ap--websites{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' y1='855.23' x2='606.28' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d5e6f2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--ads{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ddd3eb'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--stories{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23ebdfd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}body.ap--email{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 768'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='239.67' x2='606.28' y1='855.23' y2='-152.04' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23d7ebd3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath fill='url(%23a)' d='M0 0h1024v214L786.37 768H0V0z'/%3E%3C/g%3E%3C/svg%3E%0A")}.ap--ampsidebar{width:100%;max-width:90vw;background:#fafafc}.ap--ampsidebar-toolbar{top:86px;height:100vh;max-height:calc(100vh - 86px)}@media(min-width:768px){.ap--ampsidebar-toolbar{position:-webkit-sticky;position:sticky;overflow:auto}}.ap--ampsidebar-toolbar>ul{-webkit-overflow-scrolling:touch;margin:0;padding:0}@media(min-width:768px){.ap--ampsidebar-toolbar>ul{overflow:auto;max-height:100%}}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar{width:6px;height:6px}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-corner{background-color:transparent}.ap--ampsidebar-toolbar>ul::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}.ap-o-sidebar-component{max-width:100%}@media(min-width:768px){.ap-o-sidebar-component .ap-o-sidebar{width:auto;min-height:400px;padding-bottom:0;margin-right:0;margin-left:-10px;background:0 0;box-shadow:none}}.ap-o-sidebar-component .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-component .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-component .nav-list.level-1{margin:0 15px}.ap-o-sidebar-component .nav-list .nav-list{padding-bottom:10px;margin-bottom:10px}.ap-o-sidebar-component .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-component .nav-item.level-1{pointer-events:none}.ap-o-sidebar-component .nav-item.level-1 .nav-link{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1.8rem;padding:0;margin:0;line-height:1;word-break:break-all;pointer-events:auto;color:#e2e5e6}.ap-o-sidebar-component .nav-item.level-1 .nav-link:only-child:not(a){margin:-20px;font-size:0;pointer-events:none;z-index:-1}.ap-o-sidebar-component .nav-item.level-1>.nav-link{padding-top:10px;pointer-events:none;z-index:1;transition:color .15s ease}.ap-o-sidebar-component .nav-item.level-1.active>.nav-link,.ap-o-sidebar-component .nav-item.level-1:hover>.nav-link{color:#91979d}.ap-o-sidebar-component .nav-item.level-2 .nav-link{text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em;padding:3px 25px 3px 0;margin:0}.ap-o-sidebar-component .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-component .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-component .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.ap-a-img{position:relative}.image-preview-1 .ap-a-img{overflow:hidden;border-radius:50%}.image-preview-2 .ap-a-img{margin-right:-30px;filter:drop-shadow(0 30px 30px -15px rgba(0,0,0,.25))}@media(min-width:768px){.image-preview-2 .ap-a-img{margin-right:0}}.-so{display:block;width:100%;height:1px;margin-bottom:.813em;background-color:#fafafc}@media(min-width:768px){.-so{display:none}.-su{display:block}}.-li{padding:84px 15px 0}@media(min-width:768px){.-li{padding-left:0;padding-right:0}}.-ls{margin-bottom:.75em;font-size:1.8rem;margin-top:2rem;padding:20px 0}.-ls,.-lo{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a}.-lo{margin-top:1.5rem;font-size:1.2rem;padding-left:20px;margin-bottom:0}.-lu{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}.-la{display:block;background-color:#ebebf0;height:1px;margin:30px 20px 30px 0}.ap-m-clip{position:relative}.ap-m-clip-expand{position:absolute;z-index:10;bottom:0;left:0;display:flex;justify-content:center;align-items:flex-end;height:65px;width:100%;border:none;background:#fff;background:linear-gradient(180deg,hsla(0,0%,100%,0),#fff 40%);cursor:pointer}.ap-m-clip-expand-icon{max-height:21px;max-width:21px;margin-top:35px;fill:#48525c;transition:transform .3s}.ap-m-clip-expand:hover .ap-m-clip-expand-icon{fill:#005af0;transform:translate3d(0,-2px,0)}.ap-a-pill{display:inline-block;margin:5px;padding:5px 10px;border:none;border-radius:25px;background:var(--background-color,#fff);line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;box-shadow:0 10px 25px 0 rgba(0,0,0,.15);color:var(--color,#8c8f94);font-family:Noto Sans,system;transition:background-color .2s ease-in,color .2s ease-in,box-shadow .25s ease-in;cursor:pointer}@media(min-width:550px){.ap-a-pill{padding:5px 20px;margin:5px 10px}}@media(min-width:768px){.ap-a-pill{margin:5px;padding:5px 20px}}.ap-a-pill.filtered,.ap-a-pill:hover{box-shadow:0 2px 5px 0 rgba(0,0,0,.15);background:#005af0;color:#fff}.ap-a-pill-link{color:#005af0}.ap-a-pill-small{padding:2px 12px}.ap-a-pill-flat{box-shadow:none;background-color:#ebebf0}.ap-a-pill-meta{box-shadow:none;background-color:#48525c;color:#fff;pointer-events:none}.ap-a-pill-bento{background-color:#d45a5a;color:#fff}.ap-a-copy-script{display:flex;align-items:center;flex-basis:100%}.ap-a-copy-script pre{overflow-x:scroll;flex:1 0;margin:6px 8px 6px 0;padding:4px 6px;white-space:wrap;background:#e2e5e6;font-size:12.6px}.ap-a-copy-script pre::-webkit-scrollbar{width:6px;height:6px}.ap-a-copy-script pre::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-a-copy-script pre::-webkit-scrollbar-corner{background-color:transparent}.ap-a-copy-script pre::-webkit-scrollbar{height:4px}.ap-a-copy-script pre::-webkit-scrollbar-thumb{border-radius:0}.ap-o-component-intro-row{padding:15px;background-color:#fff;border:1px solid #e2e5e6}.ap-o-component-intro-row+.ap-o-component-intro-row{margin-top:10px}@media(min-width:768px){.ap-o-component-intro-row-inline{display:flex;align-items:baseline;flex-wrap:wrap}}.ap-o-component-intro-headline{font-size:16px;margin:0 0 10px}.ap-o-component-intro-row-inline .ap-o-component-intro-headline{white-space:nowrap;margin-right:10px}.ap-o-component-intro-headline .active{color:#00f}.ap-o-component-intro-filter{margin-left:auto}.ap-o-component-intro-filter *{font-size:.875rem}.ap-o-component-intro-text{margin:5px 0}.ap-o-component-intro-list{max-height:142px;overflow:hidden}@media(min-width:768px){.ap-o-component-intro-list{display:flex;flex-wrap:wrap}}.ap-o-component-intro-list-item{display:block;margin-bottom:6px;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(min-width:768px){.ap-o-component-intro-list-item{width:50%;padding-right:12px}}.expanded .ap-o-component-intro-list{max-height:none}.ap-m-tip{display:flex;padding:15px;margin-bottom:20px;border-radius:4px;background-color:#ebebf0;border:1px solid #e2e5e6}@media(min-width:768px){.ap-m-tip{padding:30px}}.ap-m-tip code{white-space:normal}.ap-m-tip-icon{width:36px;height:36px;margin-top:5px;margin-right:14px}@media(min-width:768px){.ap-m-tip-icon{margin-right:26px}}.ap-m-tip-content{font-size:.875rem;min-width:0}.ap-m-tip-content h4{font-size:1rem;margin:0 0 .75em}.ap-m-tip-content ol,.ap-m-tip-content p,.ap-m-tip-content ul{font-size:.875rem}.ap-m-tip-content ol:first-child,.ap-m-tip-content p:first-child,.ap-m-tip-content ul:first-child{margin-top:0}.ap-breadcrumbs,.-ut{display:flex;align-items:center;font-family:Poppins,system;font-weight:700;font-size:.8125rem}.ap-breadcrumbs-angle,.-un{width:10px;height:10px;margin:0 6px;transform:rotate(-90deg)}.ap--toc{width:100%}@media(min-width:1024px){.ap--toc{background:0 0;box-shadow:none;padding-right:10px}}.ap-o-toc{--spacing-top:90px;position:relative;z-index:1;top:0;right:0;width:calc(100% - 20px);overflow-y:auto;-webkit-overflow-scrolling:touch;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07);border-radius:8px;padding:15px;margin-bottom:10px}.ap-o-toc::-webkit-scrollbar{width:6px;height:6px}.ap-o-toc::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.ap-o-toc::-webkit-scrollbar-corner{background-color:transparent}.ap-o-toc::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.1)}@media(min-width:768px){.ap-o-toc{width:100%}}@media(min-width:1024px){.ap-o-toc{position:-webkit-sticky;position:sticky;z-index:1;padding:0 10px 0 0;margin:0;height:auto;top:var(--spacing-top);right:auto;padding-bottom:var(--spacing-top);background:0 0;box-shadow:none;overflow-y:scroll;max-height:calc(100vh - var(--spacing-top))}}.ap-o-toc-hl{font-family:Poppins,system;font-weight:700;cursor:pointer;width:100%;margin-bottom:0}@media(min-width:1024px){.ap-o-toc-hl{margin-bottom:10px}}.ap-o-toc-toggle{display:flex;align-items:center;justify-content:space-between;outline:0}@media(min-width:1024px){.ap-o-toc-toggle{position:-webkit-sticky;position:sticky;top:0;background:#fafafc}}.ap-o-toc ul{list-style:none;margin:0;padding:0;transition:.4s}.ap-o-toc ul>li a{display:block;padding-bottom:20px;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;font-weight:700;line-height:1rem}.ap-o-toc ul>li>ul{padding-left:10px;text-transform:none}.ap-o-toc ul>li>ul li a{font-weight:400}@media(max-width:1023px){.ap-o-toc .-ur:not(:checked)+ul{display:none;transition:.2s}.ap-o-toc .-ur:checked+ul{margin-top:15px}}.ap-o-toc .nav-icon svg{width:15px;height:15px}@media(min-width:1024px){.ap-o-toc .nav-icon{display:none}}.ap-o-toc .nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.ap-o-toc.contentmenuopen .nav-icon .ap-a-ico{transform:rotate(0)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ui{animation:moveSidebarToggleBackwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ui .label-icon svg{transform:rotate(180deg)}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ui .label-title{transform:translateX(0) scaleX(1);transform-origin:left center}#sidebar-left[open]~.ap--main .-ui{left:0;margin-left:0;animation:moveSidebarToggleForwards .233s cubic-bezier(0,0,.21,1) forwards}#sidebar-left[open]~.ap--main .-ui .label-icon svg{transform:rotate(0)}#sidebar-left[open]~.ap--main .-ui .label-title{transform:translateX(-150vw) scaleX(0);transform-origin:left center}#sidebar-left[aria-hidden=true]:not([hidden])~.ap--main .-ui,#sidebar-left[open]~.ap--main .-ui{z-index:9999999999}.-us{position:absolute;top:50px}.-uo{position:fixed;top:-99px}.-uu{position:fixed;z-index:15;font-size:12px;font-family:Poppins,system;font-weight:700;color:#fff;fill:#fff;cursor:pointer;display:flex;align-items:center}.-uu .label-icon{border-radius:4px;background:#005af0;height:35px;width:32px;padding-left:2px;display:flex;justify-content:center;align-items:center;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);z-index:1}.-uu .label-icon svg{height:14px;width:14px;transition:transform .233s cubic-bezier(0,0,.21,1)}.-uu .label-title{left:32px;display:flex;align-items:center;height:35px;margin-left:-5px;padding:5px 10px 5px 5px;white-space:nowrap;border-radius:0 4px 4px 0;background:#005af0;box-shadow:0 10px 20px -5px rgba(0,0,0,.25);transform:scaleX(0);transform-origin:left;transition:transform .233s cubic-bezier(0,0,.21,1)}.-ua{position:fixed;top:-99px}.-ui{margin-top:-52px;margin-left:-25px}@media(min-width:768px){.-ui{display:none}}.-ui .label-icon svg{transform:rotate(180deg)}.-uf{display:none}.-ul{position:fixed;top:-99px}.-uc{display:none}@media(min-width:768px)and (max-width:1440px){.-uf{display:inline-block}.-uc{position:-webkit-sticky;position:sticky;top:138px;display:inline-flex;transform:translate(-40px,-52px)}.-ul:checked~.-uh{grid-column:1/2}.-ul:checked~.-uh nav{display:none}.-ul:checked~.-uh svg{transform:rotate(180deg)}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-ul:checked~.ap--toc{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-ul:checked~.ap--toc~.-t{padding-left:80px;padding-right:80px;grid-column:2/20}}@media(min-width:768px)and (max-width:1440px)and (max-width:1023px){.-ul:checked~.ap--toc~.-t{grid-column:2/25}}@media(min-width:768px)and (max-width:1440px){.-ul:checked~.-t,.-ul:checked~.ap--help{grid-column-start:2;padding-left:80px;padding-right:80px}.-ul:checked~.-t .-uc,.-ul:checked~.ap--help .-uc{margin-left:-88px}.-ul:checked~.-t .-uc .label-icon svg,.-ul:checked~.ap--help .-uc .label-icon svg{transform:rotate(180deg)}}.-lf{display:none}.-ll.amp-active~.-lf{height:42px;max-width:2020px;margin:0 auto;color:#fff;background-color:#20202a;font-size:.875rem;z-index:100;position:absolute;width:100%;left:0;right:0}@media(min-width:768px){.-ll.amp-active~.-lf{display:block}}.-ll.amp-active~.-lf .-lc{position:relative;display:flex;align-items:center;width:100%;height:100%;max-width:1440px;padding:0 30px;margin:0 auto}@media(min-width:1024px){.-ll.amp-active~.-lf .-lc{padding:0 15px}}.-ll.amp-active~.-lf .-lc:after{position:absolute;content:"";top:42px;left:50px;width:0;height:0;border-color:#20202a transparent transparent;border-style:solid;border-width:8px 10px 0}.-ll.amp-active~.-lf .-lh{flex:1 0;padding-right:10px}.-ll.amp-active~.-lf .-lp{height:20px;width:20px;background-color:transparent;border:0;cursor:pointer;padding:3px}.-ll.amp-active~.-lf .-lp svg{fill:#fff;width:100%;height:100%}.ap-o-burger-menu{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;padding:110px 20px 80px;z-index:16;background-color:#fff}@media(max-width:240px){.ap-o-burger-menu{padding:37px 20px 0}.has-banner~.ap-o-burger-menu{padding:calc(37px + 31px) 0 0 20px}}.ap-o-burger-menu-label{position:fixed;z-index:1001;top:12px;right:20px;cursor:pointer}.ap-o-burger-menu-label.mainmenuopen{z-index:1004}.has-banner+.ap-o-burger-menu-label{top:calc(12px + 31px)}.amp-hidden+.has-banner+.ap-o-burger-menu-label,amp-user-notification[hidden]+.has-banner+.ap-o-burger-menu-label{top:12px}@media(min-width:768px){.ap-o-burger-menu-label{right:30px}}@media(min-width:1024px){.ap-o-burger-menu-label{display:none}}.ap-o-burger-menu-icon{width:30px;height:30px}@media(min-width:1024px){.ap-o-burger-menu{display:none}}.ap-o-burger-menu.mainmenuopen{display:block;z-index:1003}.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px)}.has-banner+.ap-o-burger-menu.mainmenuopen~.ap--main{max-height:calc(100vh - 55px - 31px)}.ap-o-burger-menu.mainmenuopen~.ap--footer{display:none}.-th{list-style:none;display:flex;flex-direction:column;height:100%;margin:1rem 0 0;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media(max-width:240px){.-th{padding:1rem 0}}.-th .-th{margin-top:1rem}.-th .-th .-tp:last-child{margin-bottom:0}.-tp{margin-bottom:1rem;position:relative}.-tp:last-child{margin-top:auto}.-tp ul{display:none}.-td{position:absolute;left:0;top:0;width:100%;height:36px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer;-webkit-appearance:none}.-td:focus{outline:5px auto -webkit-focus-ring-color}.-td:checked~ul{display:block}.-td:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.-td+.nav-icon .ap-a-ico{display:inline-block;transform:rotate(-90deg)}.-tp .ap-a-ico{height:.6em;margin-bottom:.3em;margin-left:.3em;width:.6em}.-tv{position:relative;margin-right:20px;padding-bottom:10px;display:none}@media(max-width:240px){.-tv{margin-right:0}}@media(min-width:1024px){.-tv{margin-right:0;padding-right:30px;display:block}}.-tm{display:flex;align-items:center;font-size:11px;border:none;background:0 0}.-tm:hover{color:#005af0}.-tg{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;border:0;-webkit-appearance:none}@media(min-width:1024px){.-tg{width:calc(100% - 30px)}}.-ty{width:10px;height:10px;margin-left:5px}.-tb{list-style:none;display:none;position:absolute;right:15%;margin:0;padding:2px 8px;background:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}@media(max-width:240px){.-tb{overflow:auto;max-height:calc(100vh - 55px - 31px)}}.-tb:hover,.-tg:checked~.-tb,.-tg:hover~.-tb,.-tv .-tw{display:block}.-tb:focus-within{display:block}.mainmenuopen .-tv{display:block}.-tw{font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#000}@media(min-width:1024px){.-tw{font-size:1rem}}.-tx{line-height:1.6rem;font-weight:400;color:#48525c;font-size:1rem}@media(min-width:1024px){.-tx{font-size:.875rem}}.-tx.active{text-decoration:underline}.-tw:hover{color:#005af0}.-tw.active{font-weight:700;color:#005af0}.ap--header{width:100%;max-width:2020px;margin:0 auto;position:-webkit-sticky;position:sticky;top:0;z-index:1001;background-color:#fff;box-shadow:0 2px 10px 0 rgba(0,0,0,.07)}.ap--header.mainmenuopen{z-index:1004}.ap--header.mainmenuopen~.ap--main{max-width:100vw;overflow-x:hidden}@media(min-width:1024px){.ap--header{top:0}.ap--header.has-banner{top:-31px}}.ap-o-header{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;max-width:1460px;padding:10px 0 0 20px;margin:0 auto}@media(min-width:1024px){.ap-o-header{display:flex;padding-left:30px}}.ap-o-header-home{position:-webkit-sticky;position:sticky;top:10px;display:flex;align-items:center;margin-right:auto;padding-bottom:10px;overflow:hidden}.ap-o-header-home-logo{height:30px;margin-right:6px;width:30px}.ap-o-header-home-sub-title,.ap-o-header-home-title{margin-left:4px;font-family:Poppins,system;font-weight:700;font-size:1.5em;color:#005af0}@media(min-width:1024px){.ap-o-header-home-sub-title,.ap-o-header-home-title{font-size:1.125rem}}.ap-o-header-home-sub-title{color:#000;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ap-o-header-main{display:none;flex:1 1 auto;padding:0 30px}@media(min-width:1024px){.ap-o-header-main{display:flex}}.ap-o-header-main-item{position:relative;display:flex;align-items:center;margin:0 18px -5px}.ap-o-header-main-link{display:flex;align-items:center;padding:0 0 14px;border:0;background:0 0}.ap-o-header-main-link-icon{font-size:8px;margin-left:5px;transform:rotate(0);transition:transform .2s ease}.ap-o-header-flyout:hover,.ap-o-header-main-link:focus~.ap-o-header-flyout,.ap-o-header-main-link:hover~.ap-o-header-flyout{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout:focus-within{opacity:1;pointer-events:all;transition:opacity .2s ease}.ap-o-header-flyout{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);position:absolute;top:95%;left:0;margin:0;padding:0 0 10px;pointer-events:none;opacity:0;list-style:none;background:#fff;border-radius:0 0 4px 4px;transition:opacity .2s ease}.ap-o-header-flyout:before{content:"";display:block;background:linear-gradient(180deg,rgba(0,0,0,.07) 0,hsla(0,0%,100%,.07));height:8px;margin-bottom:10px}.ap-o-header-flyout-item-secondary{margin:20px 0;white-space:nowrap;min-width:200px}.ap-o-header-flyout-item-secondary a:hover{color:#005af0}.ap-o-header-flyout-item-title{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Poppins,system;font-weight:700;color:#000;line-height:1.4em}.ap-o-header-flyout-item-title.secondary{padding:0 15px}.ap-o-header-flyout-item-description{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;opacity:.75;line-height:1.25em}.ap-o-header-flyout-primary-item{position:relative;width:300px}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link{box-shadow:0 10px 25px 0 rgba(0,0,0,.2);background-color:#005af0}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info>*{color:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-stories .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-description,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-info-email .ap-o-header-flyout-item-title{color:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon{fill:#fff}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.email,.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link-icon.stories{fill:#20202a}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.websites{background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.stories{background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.ads{background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-o-header-flyout-primary-item:hover .ap-o-header-flyout-primary-item-link.email{background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-o-header-flyout-primary-item-link{display:flex;align-items:center;border-radius:4px;padding:10px;margin:0 5px}.ap-o-header-flyout-primary-item-link-info{margin:0 20px 0 15px}.ap-o-header-flyout-primary-item-link-icon{display:flex;font-size:medium;box-sizing:initial;justify-content:center;width:2em;height:2em}.ap-o-header-flyout-primary-item-link-icon.websites{fill:url(#gradient-websites) #000}.ap-o-header-flyout-primary-item-link-icon.stories{fill:url(#gradient-stories) #000}.ap-o-header-flyout-primary-item-link-icon.ads{fill:url(#gradient-ads) #000}.ap-o-header-flyout-primary-item-link-icon.email{fill:url(#gradient-email) #000}#blm-banner{background:#111;color:#eee;display:block;text-align:center;padding:.5em}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}body{background-color:#fafafc}.-ld .-tf{position:relative;display:flex;flex-wrap:wrap;width:100%;max-width:1440px;padding:0 20px;margin-left:auto;margin-right:auto}@media(max-width:767px){.-ld .-tf{padding:0 15px}.-ld .-tf>div,.-ld .-tf section{min-width:0}}@media(min-width:768px){.-ld .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-ld .-tf{padding:0 15px}}.-ld .-t,.-ld .ap--help{grid-column:1;position:relative;width:100%;background:#fafafc;box-shadow:0 25px 40px 0 rgba(0,0,0,.05);padding-left:0;padding-right:0}@media(min-width:768px){.-ld .-t,.-ld .ap--help{grid-column:9/25}}@media(min-width:1024px){.-ld .-t,.-ld .ap--help{grid-column:7/25}.-ld .-t p.limit,.-ld .ap--help p.limit{max-width:70%}}@media(min-width:768px){.-ld .-t,.-ld .ap--help{grid-column:8/25}}@media(min-width:1024px){.-ld .-t,.-ld .ap--help{grid-column:6/25}}.-ld .-uh{grid-column:auto;padding:0}@media(min-width:768px){.-ld .-uh{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-ld .-uh{grid-column:1/6}}.-ld .ap--toc{box-shadow:20px 25px 40px 0 rgba(0,0,0,.05)}.-ld .ap--toc~.-t{box-shadow:-30px -5px 30px -20px rgba(0,0,0,.05)}@media(min-width:768px){.-ld .ap--toc{grid-column:8/25}.-ld .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-ld .ap--toc~.-t{grid-column:8/25;padding-left:30px}}@media(min-width:768px)and (min-width:1024px){.-ld .ap--toc~.-t{grid-column:6/20;padding-left:30px;padding-right:30px}}@media(min-width:768px)and (min-width:768px){.-ld .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:768px)and (min-width:1024px){.-ld .ap--toc~.ap--help~.-t{grid-column-end:25}}@media(min-width:1024px){.-ld .ap--toc{background:#fafafc;grid-column:20/25;grid-row:span 3;padding-top:93px;padding-bottom:25px}.-ld .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-ld .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-ld .-uh+.-t,.-ld .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-ld .-uh+.-t,.-ld .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-ld .-uh+.-t:nth-of-type(2),.-ld .-uh+.-t:nth-of-type(3),.-ld .ap--toc+.-t:nth-of-type(2),.-ld .ap--toc+.-t:nth-of-type(3){grid-row:1}}.-ld .ap--versions{position:relative;display:inline-flex;align-items:center;background:#fff;border:1px solid #e2e5e6;margin-top:5px}.-ld .ap--versions-toggle{border:0;padding:0 32px 0 8px;background:#fff;font-family:inherit;font-size:inherit;font-weight:inherit;-moz-appearance:none;-webkit-appearance:none;appearance:none}.-ld .ap--versions:after{content:"";position:absolute;right:8px;width:16px;height:35px;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%2320202A'%3E%3Cpath d='M59.863 17.14l4.137 5.488-32 24.232-32-24.232 4.137-5.488 27.863 21.108z'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:50%;pointer-events:none}.-ld .ap--component-tags{margin-top:-1.5rem;margin-bottom:2rem}@media(min-width:768px){.-ld .-t,.-ld .ap--help{padding-left:30px;padding-right:30px}}.-ta{display:flex;overflow-x:auto;margin:1.1rem 0 0;padding:0 1em;color:#fff;line-height:1.3em;background:#20202a;font-size:.9em}.-ta:after{content:" ";-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.-ta::-webkit-scrollbar{width:6px;height:6px}.-ta::-webkit-scrollbar-thumb{border-radius:3px;background-color:#91979d}.-ta::-webkit-scrollbar-corner{background-color:transparent}.-ta::-webkit-scrollbar-thumb{border-radius:0}@media(min-width:768px){.-ta{max-width:100%;margin-right:-30px}}.-ta code,.-ta pre{font-family:Fira Mono,monospace;font-weight:500;white-space:pre;font-size:.9rem;padding:unset;word-break:normal;color:inherit;background:0 0}.-ta .hll{background-color:#49483e}.-ta .c{color:#75715e}.-ta .k{color:#66d9ef}.-ta .l{color:#ae81ff}.-ta .n{color:#f8f8f2}.-ta .o{color:#f15a5a}.-ta .p{color:#f8f8f2}.-ta .c1,.-ta .ch,.-ta .cm,.-ta .cp,.-ta .cpf,.-ta .cs{color:#75715e}.-ta .gd{color:#f15a5a}.-ta .ge{font-style:italic}.-ta .gi{color:#a6e22e}.-ta .gs{font-weight:700}.-ta .gu{color:#75715e}.-ta .kc,.-ta .kd{color:#66d9ef}.-ta .kn{color:#f15a5a}.-ta .kp,.-ta .kr,.-ta .kt{color:#66d9ef}.-ta .ld{color:#e6db74}.-ta .m{color:#ae81ff}.-ta .s{color:#e6db74}.-ta .na{color:#a6e22e}.-ta .nb{color:#f8f8f2}.-ta .nc{color:#a6e22e}.-ta .no{color:#66d9ef}.-ta .nd{color:#a6e22e}.-ta .ni{color:#f8f8f2}.-ta .ne,.-ta .nf{color:#a6e22e}.-ta .nl,.-ta .nn{color:#f8f8f2}.-ta .nx{color:#fff}.-ta .py{color:#f8f8f2}.-ta .nt{color:#f15a5a}.-ta .nv{color:#f8f8f2}.-ta .ow{color:#f15a5a}.-ta .w{color:#f8f8f2}.-ta .mb,.-ta .mf,.-ta .mh,.-ta .mi,.-ta .mo{color:#ae81ff}.-ta .dl,.-ta .s2,.-ta .sa,.-ta .sb,.-ta .sc,.-ta .sd{color:#e6db74}.-ta .se{color:#ae81ff}.-ta .s1,.-ta .sh,.-ta .si,.-ta .sr,.-ta .ss,.-ta .sx{color:#e6db74}.-ta .bp{color:#f8f8f2}.-ta .fm{color:#a6e22e}.-ta .vc,.-ta .vg,.-ta .vi,.-ta .vm{color:#f8f8f2}.-ta .il{color:#ae81ff}table{table-layout:fixed;width:100%;position:relative;border-collapse:collapse;padding:0 0 0 20px;margin:1.5em -20px 2em;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem}@media(min-width:768px){table{padding:0;margin:1.5em 0 2em}}thead{font-weight:700}thead tr{text-align:left}thead tr th{padding:20px}tbody tr,thead tr th{border-bottom:1px solid #e2e5e6}tbody tr:nth-child(odd){background-color:hsla(0,0%,100%,.5)}tbody tr td:first-child{border-right:1px solid #e2e5e6}tbody td{padding:10px 20px;text-align:left;vertical-align:top;width:50%}@media(min-width:768px){tbody td{padding:20px}}@media(min-width:1024px){tbody td{width:25%}}tbody td code{display:inline;padding:2px 4px;font-family:Fira Mono,monospace;font-weight:500;word-break:normal;color:#000;background-color:#e2e5e6;font-size:.9em;color:#005af0}</style><link rel="manifest" href="/manifest.json"></head><body class="ap--websites"> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <symbol id="stackoverflow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 25"><path d="M14.2 14.7h1.6V25H0V14.7h1.6v8.6h12.5c.1-2.8.1-5.7.1-8.6zM9.5 3.2c1.8 2.7 3.6 5.4 5.4 8.2.6-.4 1.1-.8 1.7-1.2C14.8 7.5 13 4.8 11.2 2c-.5.5-1.1.8-1.7 1.2zm5.1 8.5c-2.8-1.7-5.5-3.3-8.2-5-.4.6-.7 1.2-1.1 1.8 2.7 1.7 5.5 3.3 8.2 5 .4-.6.8-1.2 1.1-1.8zM17.4 0c-.7.1-1.3.2-2 .4.5 3.2 1.1 6.5 1.6 9.7.7-.1 1.3-.2 2-.4-.5-3.2-1.1-6.5-1.6-9.7zm-4 14.1c-3.1-.9-6.2-1.7-9.2-2.6-.2.7-.4 1.4-.5 2 3.1.9 6.2 1.7 9.2 2.6.1-.6.3-1.3.5-2zm-.9 5.5H3v2.1h9.5v-2.1zm.3-2.7c-3.2-.3-6.3-.6-9.5-.9-.1.7-.1 1.4-.2 2.1 3.2.3 6.3.6 9.5.9 0-.8.1-1.4.2-2.1z"/></symbol><symbol id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M32 0.792c-17.68 0-32 14.328-32 32 0 14.141 9.168 26.133 21.88 30.36 1.6 0.301 2.187-0.688 2.187-1.539 0-0.76-0.027-2.773-0.040-5.44-8.901 1.931-10.779-4.293-10.779-4.293-1.456-3.693-3.56-4.68-3.56-4.68-2.899-1.984 0.224-1.944 0.224-1.944 3.213 0.224 4.901 3.296 4.901 3.296 2.853 4.893 7.491 3.48 9.32 2.661 0.288-2.069 1.112-3.48 2.027-4.28-7.107-0.8-14.576-3.552-14.576-15.813 0-3.493 1.24-6.347 3.293-8.587-0.36-0.808-1.44-4.061 0.28-8.469 0 0 2.68-0.859 8.8 3.28 2.56-0.712 5.28-1.064 8-1.080 2.72 0.016 5.44 0.368 8 1.080 6.080-4.139 8.76-3.28 8.76-3.28 1.72 4.408 0.64 7.661 0.32 8.469 2.040 2.24 3.28 5.093 3.28 8.587 0 12.293-7.48 15-14.6 15.787 1.12 0.96 2.16 2.923 2.16 5.92 0 4.283-0.040 7.723-0.040 8.763 0 0.84 0.56 1.84 2.2 1.52 12.803-4.197 21.963-16.197 21.963-30.317 0-17.672-14.328-32-32-32z"/> </symbol><symbol id="wordpress" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M57.251 18.2A28.688 28.688 0 0 1 60.766 32c0 10.611-5.749 19.883-14.301 24.867l8.787-25.405c1.64-4.107 2.187-7.389 2.187-10.304 0-1.08-.069-2.08-.187-2.96zm-21.283.277c1.725-.08 3.285-.28 3.285-.28 1.552-.2 1.371-2.48-.179-2.397 0 0-4.68.36-7.68.36-2.837 0-7.6-.4-7.6-.4-1.56-.08-1.763 2.28-.2 2.36 0 0 1.44.163 3 .24l4.48 12.28-6.32 18.88L14.277 18.4c1.731-.08 3.291-.267 3.291-.267 1.56-.2 1.376-2.48-.173-2.389 0 0-4.656.368-7.664.368-.533 0-1.168-.021-1.84-.04C13.096 8.4 21.96 3.24 32 3.24a28.642 28.642 0 0 1 19.429 7.555c-.123-.008-.243-.024-.376-.024-2.827 0-4.832 2.461-4.832 5.104 0 2.373 1.368 4.381 2.827 6.749 1.096 1.92 2.373 4.381 2.373 7.939 0 2.44-.944 5.317-2.189 9.277l-2.867 9.56-10.4-30.96.003.037zM32 60.757c-2.824 0-5.549-.408-8.128-1.165l8.632-25.083 8.84 24.232c.064.141.133.269.208.397A28.794 28.794 0 0 1 32 60.762zM3.229 32c0-4.171.896-8.133 2.493-11.707L19.439 57.89C9.85 53.226 3.231 43.389 3.228 31.999zM32 0C14.36 0 0 14.36 0 32s14.36 32 32 32 32-14.36 32-32S49.64 0 32 0z"/></symbol><symbol id="youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M62.664 16.542c-.773-2.708-2.862-4.797-5.514-5.556l-.057-.014c-4.989-1.336-25.065-1.336-25.065-1.336s-20.026-.027-25.065 1.337c-2.708.773-4.797 2.862-5.556 5.514l-.014.057C.507 21.107 0 26.354 0 31.72l.001.327v-.017.252a83.84 83.84 0 0 0 1.475 15.695l-.083-.521c.773 2.708 2.862 4.797 5.513 5.556l.057.014c4.983 1.339 25.065 1.339 25.065 1.339s20.023 0 25.065-1.339c2.708-.773 4.797-2.862 5.556-5.514l.014-.057c.85-4.469 1.336-9.609 1.336-14.863l-.002-.595v.03c.002-.184.002-.403.002-.621 0-5.255-.486-10.396-1.416-15.38l.08.515zM25.621 41.608V22.42l16.71 9.609z"/></symbol><symbol id="twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M63.875 12.186c-2.36 1.037-4.88 1.744-7.533 2.067 2.704-1.629 4.784-4.197 5.768-7.261-2.536 1.48-5.346 2.557-8.338 3.157-2.389-2.557-5.794-4.157-9.576-4.157-7.245 0-13.119 5.874-13.119 13.111 0 1.040 0.12 2.040 0.339 2.997-10.906-0.515-20.572-5.752-27.042-13.669-1.139 1.925-1.776 4.162-1.776 6.6 0 4.56 2.32 8.568 5.834 10.922-2.152-0.069-4.176-0.661-5.941-1.643v0.163c0 6.36 4.514 11.663 10.522 12.871-1.101 0.296-2.264 0.456-3.456 0.456-0.837 0-1.64-0.080-2.443-0.229 1.683 5.208 6.52 9.005 12.277 9.112-4.48 3.517-10.157 5.613-16.271 5.613-1.040 0-2.077-0.061-3.12-0.179 5.837 3.717 12.714 5.89 20.151 5.89 24.143 0 37.329-19.989 37.329-37.294 0-0.557 0-1.12-0.040-1.68 2.563-1.837 4.8-4.16 6.56-6.794l-0.125-0.053z"/> </symbol><symbol id="download" viewBox="0 0 64 64"> <path d="M8.8 62.32c0-0.88 0.72-1.68 1.68-1.68 10.8 0 32.32 0 43.040 0 0.88 0 1.68 0.72 1.68 1.68 0 0.88-0.72 1.68-1.68 1.68-10.8 0-32.32 0-43.040 0-0.96 0-1.68-0.72-1.68-1.68z"/> <path d="M49.44 34.56c0.72-0.72 0.72-1.84 0-2.56s-1.84-0.72-2.56 0l-13.040 13.040v-43.28c0-0.96-0.88-1.76-1.84-1.76-1.040 0-1.84 0.8-1.84 1.76v43.28l-13.040-13.12c-0.72-0.72-1.84-0.72-2.56 0s-0.72 1.84 0 2.56l16.24 16.24c0.72 0.72 1.84 0.72 2.56 0l16.080-16.16z"/> </symbol><symbol id="internal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M43.16 10.18c-0.881-0.881-2.322-0.881-3.203 0s-0.881 2.322 0 3.203l16.335 16.335h-54.051c-1.281 0-2.242 1.041-2.242 2.242 0 1.281 0.961 2.322 2.242 2.322h54.051l-16.415 16.335c-0.881 0.881-0.881 2.322 0 3.203s2.322 0.881 3.203 0l20.259-20.259c0.881-0.881 0.881-2.322 0-3.203l-20.179-20.179z"/></symbol><symbol id="external" viewBox="0 0 64 64"> <path d="M28.879 11.24c-0.841-0.841-2.206-0.841-3.048 0s-0.841 2.207 0 3.048l15.543 15.543h-39.241c-1.219 0-2.133 0.987-2.133 2.133 0 1.219 0.914 2.207 2.133 2.207h39.241l-15.616 15.543c-0.841 0.841-0.841 2.206 0 3.048 0.835 0.841 2.206 0.841 3.048 0l19.273-19.279c0.841-0.841 0.841-2.206 0-3.048l-19.2-19.194zM59.429 27.392c2.511 0 4.571 2.060 4.571 4.571s-2.060 4.571-4.571 4.571-4.571-2.060-4.571-4.571 2.060-4.571 4.571-4.571z"/> </symbol><symbol id="warning-sign" viewBox="0 0 38 38"><g fill="none" fill-rule="evenodd"><path stroke="#F3C000" stroke-width="2" d="M19.843 2.29l16.643 33.671c.177.356.03.788-.326.964-.1.05-.208.075-.319.075H2.171c-.398 0-.72-.322-.72-.72 0-.113.026-.224.077-.325l17.028-33.67c.179-.355.612-.497.967-.318.139.07.251.184.32.324z"/><path fill="#F3C000" fill-rule="nonzero" d="M17.621 32.71h-1.14l1.127-6.824-3.49.005-.049.001c-.314 0-.569-.255-.569-.57 0-.134.126-.362.126-.362l6.272-10.46 1.159.005-1.156 6.834 3.509-.004.055-.001c.315 0 .57.254.57.569 0 .127-.05.24-.122.335L17.621 32.71z"/></g></symbol><symbol id="sidebar-toggle" viewBox="0 0 64 64"> <path d="M36.032 7.9c0.985-0.996 2.624-0.996 3.643 0 0.985 0.963 0.985 2.565 0 3.526l-18.471 18.060h40.246c1.421 0.002 2.55 1.107 2.55 2.496s-1.129 2.529-2.55 2.529h-40.246l18.471 18.026c0.985 0.996 0.985 2.601 0 3.562-1.019 0.996-2.66 0.996-3.643 0l-22.844-22.336c-1.019-0.963-1.019-2.565 0-3.526l22.844-22.338z"/> <path d="M2.071 3.012c1.144 0 2.071 0.927 2.071 2.071v53.835c0 1.144-0.927 2.071-2.071 2.071s-2.071-0.927-2.071-2.071v-53.835c0-1.144 0.927-2.071 2.071-2.071z"/> </symbol><symbol id="contentmenu" viewBox="0 0 64 64"> <path d="M1.351 46.865h36.036c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-36.036c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 14.432h40.541c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-40.541c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 38.757h31.532c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-31.532c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 30.649h37.838c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-37.838c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM1.351 22.541h34.234c0.746 0 1.351 0.605 1.351 1.351s-0.605 1.351-1.351 1.351h-34.234c-0.746 0-1.351-0.605-1.351-1.351s0.605-1.351 1.351-1.351zM52.249 29.371c-0.992 0-1.231-0.566-0.525-1.272l5.296-5.296c0.353-0.353 0.931-0.348 1.279 0l5.296 5.296c0.702 0.702 0.466 1.272-0.525 1.272h-10.822zM63.069 35.153c0.992 0 1.231 0.566 0.525 1.272l-5.296 5.296c-0.353 0.353-0.931 0.348-1.279 0l-5.296-5.296c-0.702-0.702-0.466-1.272 0.525-1.272h10.822z"/> </symbol><symbol id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M39.503 32l22.963-22.963c2.046-2.046 2.046-5.457 0-7.503s-5.456-2.046-7.503 0l-22.963 22.963-22.963-22.963c-2.046-2.046-5.457-2.046-7.503 0s-2.046 5.457 0 7.503l22.963 22.963-22.963 22.963c-2.046 2.046-2.046 5.456 0 7.503s5.457 2.046 7.503 0l22.963-22.963 22.963 22.963c2.046 2.046 5.456 2.046 7.503 0s2.046-5.456 0-7.503l-22.963-22.963z"/> </symbol><symbol id="menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M2.133 13.867h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 28.8h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> <path d="M2.133 43.733h59.733c1.178 0 2.133 0.955 2.133 2.133v2.133c0 1.178-0.955 2.133-2.133 2.133h-59.733c-1.178 0-2.133-0.955-2.133-2.133v-2.133c0-1.178 0.955-2.133 2.133-2.133z"/> </symbol><symbol id="wrench" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M64 18.267c0 1.608-0.214 3.21-0.636 4.767l0.008 0.169c0.028 0.598-0.186 1.18-0.592 1.619-2.713 7.035-9.527 11.712-17.107 11.712-1.852 0-3.671-0.275-5.427-0.819l-25.943 25.854c-1.573 1.567-3.667 2.431-5.889 2.431s-4.318-0.864-5.89-2.431l-0.087-0.087c-3.25-3.238-3.25-8.508 0-11.747l23.75-23.669c0.66-0.657 1.046-1.529 1.090-2.456l0.173-3.404c-0.070-0.657-0.105-1.308-0.105-1.939 0-10.074 8.221-18.267 18.327-18.267 3.298 0 6.532 0.883 9.353 2.555 0.602 0.357 1.005 0.979 1.083 1.675 0.011 0.098 0.017 0.161 0.020 0.237 0.044 1.158-0.297 1.536-9.858 10.586l3.847 3.921c1.149-1.058 3.185-2.929 8.997-8.27 0.542-0.497 1.293-0.697 2.010-0.534 0.719 0.163 1.311 0.668 1.583 1.351 0.856 2.147 1.291 4.418 1.292 6.745zM59.819 22.4c0.395-1.346 0.595-2.737 0.594-4.132 0-1.194-0.141-2.367-0.422-3.507-2.922 2.685-8.959 8.231-9.040 8.307-0.536 0.494-1.37 0.474-1.88-0.046l-6.953-7.087c-0.252-0.258-0.39-0.605-0.384-0.965s0.158-0.702 0.42-0.95c2.985-2.825 7.47-7.107 9.54-9.166-1.884-0.84-3.936-1.278-6.022-1.278-8.129 0-14.742 6.59-14.742 14.691 0 0.533 0.032 1.090 0.096 1.654 0.007 0.071 0.010 0.142 0.007 0.214l-0.174 3.646c-0.087 1.818-0.847 3.528-2.138 4.816l-23.75 23.668c-1.85 1.844-1.85 4.844 0 6.688l0.087 0.087c0.897 0.893 2.088 1.385 3.356 1.385s2.46-0.492 3.355-1.385l26.429-26.338c0.2-0.199 0.419-0.39 0.693-0.601 0.377-0.292 0.882-0.363 1.326-0.187 1.743 0.692 3.578 1.044 5.456 1.044 6.243 0 11.831-3.943 13.905-9.811 0.044-0.126 0.107-0.244 0.187-0.351-0.002-0.134 0.016-0.268 0.054-0.396z"/> </symbol><symbol id="template" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M1.44 0h62.56v64h-64v-64h1.44zM20.64 60.88v-39.52h-17.76v39.6h17.76zM23.44 21.36v39.6h37.44v-39.6h-37.44zM2.88 18.24h58.080v-15.36h-58.080v15.36z"/></symbol><symbol id="learn" viewBox="0 0 64 64"> <path d="M57.674 35.257c0 1.779 1.416 3.221 3.163 3.221s3.163-1.442 3.163-3.221c0-1.155-0.602-2.16-1.498-2.728v-8.973c0-0.682-0.401-1.297-1.018-1.563l-29.585-12.716c-0.413-0.178-0.881-0.178-1.295 0l-29.586 12.716c-0.617 0.265-1.018 0.881-1.018 1.563s0.401 1.297 1.018 1.562l6.662 2.863v17.587c0 4.624 7.288 9.29 23.571 9.29s23.571-4.666 23.571-9.29v-17.587l4.349-1.869v6.417c-0.896 0.569-1.497 1.573-1.497 2.728zM51.491 45.567c0 1.575-4.797 5.898-20.24 5.898s-20.24-4.323-20.24-5.898v-16.155l19.593 8.421c0.207 0.089 0.427 0.134 0.647 0.134s0.441-0.045 0.647-0.134l19.593-8.421v16.155zM31.251 34.43l-25.303-10.875 25.303-10.875 25.302 10.875-25.302 10.875z"/> </symbol><symbol id="examples-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 20"><g><path d="M20 19.3a.9.9 0 1 1 0-1.7 1.9 1.9 0 0 0 1.9-1.9v-3a3.6 3.6 0 0 1 1.3-2.7 3.6 3.6 0 0 1-1.3-2.8v-3A1.9 1.9 0 0 0 20 2.3a.9.9 0 1 1 0-1.7 3.6 3.6 0 0 1 3.6 3.6v3a1.9 1.9 0 0 0 2 2v1.6a1.9 1.9 0 0 0-2 2v3a3.6 3.6 0 0 1-3.6 3.5zm-14 0a3.6 3.6 0 0 1-3.6-3.6v-3a1.9 1.9 0 0 0-2-1.9V9.1a1.9 1.9 0 0 0 2-1.9v-3A3.6 3.6 0 0 1 6 .6a.9.9 0 1 1 0 1.8A1.9 1.9 0 0 0 4 4.2v3A3.6 3.6 0 0 1 2.8 10a3.6 3.6 0 0 1 1.3 2.7v3A1.9 1.9 0 0 0 6 17.6a.9.9 0 1 1 0 1.7z"/><g transform="translate(5.8 8.5)"><circle cx="12.3" cy="1.4" r="1.4"/><circle cx="7.3" cy="1.4" r="1.4"/><circle cx="2.2" cy="1.4" r="1.4"/></g></g></symbol><symbol id="components-flyout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 22"><path d="M8.7 17l-2.5-2.2-4-3.5-.9-.8v1l2.5-2.2 4-3.5 1-.8c.2-.3.2-.8 0-1a.8.8 0 0 0-1.2 0L5.1 6l-4 3.6-.8.8c-.3.2-.3.8 0 1l2.5 2.2 4 3.6.8.8c.3.2.8.3 1.1 0 .3-.3.3-.8 0-1.1zM19.3 5l2.5 2.2 4 3.5.9.8v-1l-2.5 2.2-4 3.5-.9.8c-.3.3-.3.8 0 1 .3.4.8.3 1 0L23 16l4-3.6.9-.8c.3-.2.3-.8 0-1l-2.5-2.3-4-3.5-1-.8c-.2-.3-.7-.3-1 0-.3.3-.3.8 0 1zm-8 16.4l.7-2 1.6-5a3563.7 3563.7 0 0 1 2-5.8l1.7-5.1.8-2.5c.2-.4-.1-.9-.5-1a.8.8 0 0 0-1 .6c-.1.7-.4 1.3-.6 2l-1.6 4.9-2 5.9-1.7 5-.8 2.6c-.2.4.1.8.5 1a.8.8 0 0 0 1-.6z"/></symbol><symbol id="guides-documents" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 31 32"><path d="M6.7 28H1.2c-.4 0-.6-.4-.6-.8L.5.7c0-.4.3-.7.7-.7h21.1c.5 0 .7.3.7.7V2c0 .5-.2.7-.7.7-.4 0-.6-.2-.6-.7v-.6H1.8L2 26.6h4.8c.4 0 .7.2.7.6 0 .4-.3.7-.7.7z"/><path d="M8 6.8H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 10.9H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 15H6c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7zM8 19H6c-.4 0-.7-.2-.7-.6 0-.4.3-.7.7-.7h2c.5 0 .7.3.7.7 0 .4-.2.7-.7.7z"/><path d="M29.8 4H8.7c-.5 0-.7.4-.7.8v26.5c0 .4.3.7.7.7h21.1c.4 0 .7-.3.7-.7V4.8c0-.4-.3-.7-.7-.7zm-.6 26.6H9.4V5.4h19.8v25.2z"/><path d="M18.1 22.8h-.6l.6-3.8h-1.9c-.2 0-.3-.1-.3-.3v-.2l3.4-5.8h.7l-.7 3.8h2c.2 0 .3.1.3.3v.2L18 22.8z"/></symbol><symbol id="start" viewBox="0 0 64 64"> <path d="M63.195 1.874c-0.143-0.52-0.549-0.926-1.069-1.069-10.765-2.978-20.385 2.978-24.355 6.948l-11.452 11.452-5.421-1.756c-3.551-1.163-7.454-0.217-10.078 2.443l-3.359 3.359c-0.582 0.594-0.582 1.544 0 2.138l7.329 7.329-4.199 6.948c-0.343 0.593-0.25 1.342 0.229 1.832l11.681 11.605c0.471 0.504 1.223 0.63 1.832 0.305l6.948-4.123h0.076l7.329 7.329c0.594 0.582 1.544 0.582 2.138 0l3.359-3.359c2.66-2.624 3.606-6.527 2.443-10.078l-1.756-5.421 11.452-11.452c3.894-4.047 9.849-13.666 6.871-24.431zM23.799 50.126l-9.925-9.925 3.13-5.268 12.063 12.063-5.268 3.13zM54.109 24.015l-12.139 12.139c-0.4 0.399-0.547 0.987-0.382 1.527l2.061 6.337c0.783 2.448 0.136 5.128-1.68 6.948l-2.29 2.29-29.012-29.012 2.29-2.29c1.819-1.815 4.5-2.463 6.948-1.68l6.337 2.061c0.54 0.165 1.128 0.018 1.527-0.382l12.216-12.063c3.436-3.359 11.452-8.398 20.461-6.337 2.061 9.085-2.978 17.102-6.337 20.461z"/> <path d="M10.667 51.195l-9.009 9.009c-0.478 0.358-0.703 0.963-0.576 1.547s0.583 1.040 1.167 1.167c0.584 0.127 1.188-0.098 1.547-0.576l9.009-9.009c0.456-0.608 0.396-1.459-0.142-1.996s-1.388-0.598-1.996-0.142z"/> <path d="M11.66 63.563c0.594 0.582 1.544 0.582 2.138 0l4.581-4.581c0.456-0.608 0.395-1.459-0.142-1.996s-1.388-0.598-1.996-0.142l-4.581 4.581c-0.582 0.594-0.582 1.544 0 2.138z"/> <path d="M1.505 52.798c0.403-0.006 0.787-0.17 1.069-0.458l4.581-4.581c0.478-0.358 0.703-0.963 0.576-1.547s-0.583-1.040-1.167-1.167c-0.584-0.127-1.188 0.098-1.547 0.576l-4.581 4.581c-0.428 0.436-0.554 1.086-0.322 1.65s0.78 0.937 1.391 0.945z"/> <path d="M43.726 13.021c-2.003 2.003-2.003 5.25 0 7.253s5.25 2.003 7.253 0c2.003-2.003 2.003-5.25 0-7.253s-5.25-2.003-7.253 0zM48.841 18.136c-0.699 0.692-1.79 0.794-2.605 0.243s-1.127-1.601-0.745-2.508c0.382-0.907 1.351-1.417 2.315-1.219s1.653 1.050 1.646 2.033c-0.004 0.545-0.223 1.067-0.611 1.451z"/> </symbol><symbol id="amp-email" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-email" x1="76.2776137%" x2="20.8316146%" y1="-25.8400575%" y2="121.578822%"> <stop offset="0%" stop-color="#F1F068"/> <stop offset="46.2139774%" stop-color="#96D64F"/> <stop offset="100%" stop-color="#2DB932"/> </linearGradient> </defs> <path d="M64 14.080c0-3.291-2.56-5.851-5.851-5.851h-52.297c-3.291 0-5.851 2.56-5.851 5.851v35.84c0 3.291 2.56 5.851 5.851 5.851h52.297c3.291 0 5.851-2.56 5.851-5.851v-35.84zM5.851 11.154h52.297c0.183 0 0.366 0 0.549 0l-24.503 25.417c-0.549 0.549-1.28 0.914-2.194 0.914-0.731 0-1.646-0.366-2.194-0.914l-24.32-25.417c0 0 0.183 0 0.366 0zM2.926 14.080c0-0.366 0-0.731 0.183-1.097l15.36 16.091-15.543 19.2v-34.194zM58.149 52.846h-52.297c-0.731 0-1.646-0.366-2.194-0.914l16.823-20.663 7.131 7.497c1.097 1.097 2.56 1.829 4.206 1.829s3.109-0.731 4.206-1.829l6.583-6.949 17.371 20.114c-0.366 0.549-1.097 0.914-1.829 0.914v0zM61.074 48.274l-16.091-18.834 15.909-16.64c0.183 0.366 0.183 0.731 0.183 1.097v34.377z"/> </symbol><symbol id="amp-ads" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-ads" x1="100%" x2="14.5415777%" y1="0%" y2="123.368881%"> <stop offset="0%" stop-color="#FF52E1"/> <stop offset="100%" stop-color="#5500D7"/> </linearGradient> </defs> <path d="M56.399 14.68c3.654-3.846 9.616-10.963 6.924-13.847-2.885-2.885-10.001 3.269-13.847 6.731l-0.577-0.577c-0.385-0.385-0.962-0.577-1.539-0.385l-15.963 3.077c-0.385 0-0.577 0.192-0.769 0.385l-30.195 30.195c-0.577 0.577-0.577 1.731 0 2.308l20.963 20.963c0.385 0.385 0.769 0.385 1.154 0.385s0.769-0.192 1.154-0.385l30.003-30.003c0.192-0.192 0.385-0.577 0.385-0.769v0l3.077-15.963c0.192-0.577 0-1.154-0.385-1.539l-0.385-0.577zM53.899 16.988l-2.885 14.424-28.464 28.656-18.655-18.655 28.656-28.656 14.424-2.885c-1.539 1.731-4.039 4.423-5.962 7.116-1.923-0.192-3.654 0.385-5.193 1.923-2.5 2.5-2.5 6.731 0 9.232s6.731 2.5 9.232 0c1.346-1.346 2.116-3.27 1.923-5.193-0.192-1.154-0.577-2.308-1.154-3.077-0.192-0.385-0.385-0.577-0.769-0.769-0.192-0.192-0.577-0.577-0.769-0.769 1.154-1.731 2.885-3.654 5.193-5.962l2.5 2.5 1.923 2.116zM43.321 24.873c-0.192 0.385-0.385 0.577-0.577 0.962-1.346 1.346-3.27 1.346-4.616 0s-1.346-3.27 0-4.616c0.192-0.192 0.577-0.385 0.962-0.577 1.154-0.577 2.308-0.385 3.462 0.385 0.192 0 0.192 0.192 0.385 0.192 0 0 0.192 0.192 0.192 0.385 0.577 0.962 0.769 2.116 0.192 3.27zM54.091 12.372l-2.5-2.5c4.039-3.846 7.308-5.77 8.847-6.347-0.577 1.539-2.5 4.616-6.347 8.847z"/> </symbol><symbol id="amp-stories" viewBox="0 0 36 32"> <defs> <linearGradient id="gradient-stories" x1="81.726943%" x2="23.7165981%" y1="-28.3832685%" y2="119.978062%"> <stop offset="0%" stop-color="#FFF300"/> <stop offset="100%" stop-color="#FF8F00"/> </linearGradient> </defs> <path d="M7.111 0h21.333v32h-21.333v-32zM9.481 2.37v27.259h16.593v-27.259h-16.593zM0 4.741h2.37v22.519h-2.37v-22.519zM33.185 4.741h2.37v22.519h-2.37v-22.519z"/> </symbol><symbol id="amp-websites" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <defs> <linearGradient id="gradient-websites" x1="81.8129399%" x2="33.8766928%" y1="0%" y2="94.4849088%"> <stop offset="0%" stop-color="#00DCC0"/> <stop offset="100%" stop-color="#005AF0"/> </linearGradient> </defs> <path d="M63.196 4.646h-62.253c-0.566 0-0.943 0.377-0.943 0.755v53.010c0 0.566 0.377 0.943 0.943 0.943h62.253c0.566 0 0.755-0.377 0.755-0.755v-53.198c0.189-0.377-0.189-0.755-0.755-0.755zM3.395 18.040h57.348v33.202h-57.348v-33.202zM60.744 7.853v6.98h-57.348v-6.98h57.348zM3.395 56.147v-1.509h57.348v1.509h-57.348zM9.055 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM12.828 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM18.487 7.853c1.132 0 1.886 0.754 1.886 1.886s-0.755 1.886-1.886 1.886-1.886-0.755-1.886-1.886 0.943-1.886 1.886-1.886zM51.123 39.734l-11.13-13.96c-0.189-0.189-0.377-0.377-0.755-0.377v0c-0.189 0-0.566 0-0.755 0.377l-8.3 9.621-4.716-6.225c-0.189-0.189-0.377-0.377-0.755-0.377s-0.566 0-0.755 0.377l-8.866 10.376c-0.377 0.377-0.189 0.943 0 1.132s0.377 0.189 0.566 0.189c0.189 0 0.566 0 0.754-0.377l8.3-9.621 4.528 5.471-2.452 3.018c-0.377 0.377-0.189 0.943 0 1.132 0.377 0.189 0.943 0.189 1.132 0l11.319-13.017 10.376 13.205c0.189 0.189 0.377 0.377 0.755 0.377 0.189 0 0.377 0 0.566-0.189 0.377-0.377 0.566-0.943 0.189-1.132zM27.165 26.718c1.509 0 2.641-1.132 2.641-2.641 0-1.321-1.132-2.641-2.641-2.641s-2.641 1.132-2.641 2.641c0 1.509 1.132 2.641 2.641 2.641zM27.165 23.322c0.566 0 0.943 0.377 0.943 0.943s-0.377 0.943-0.943 0.943-0.943-0.377-0.943-0.943c0-0.566 0.377-0.943 0.943-0.943z"/> </symbol><symbol id="angle-down-solid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <path d="M56.293 16.003c1.761-1.645 4.553-1.645 6.314 0 1.857 1.734 1.857 4.623 0 6.357l-27.45 25.638c-1.761 1.645-4.553 1.645-6.314 0l-27.45-25.638c-0.899-0.839-1.393-1.963-1.393-3.178s0.494-2.339 1.393-3.178c1.761-1.645 4.553-1.645 6.314 0l24.293 22.689 24.293-22.689z"/> </symbol><symbol id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><g fill="none" fill-rule="evenodd"><path fill="#FFF" d="M0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15C6.716 0 0 6.716 0 15z"/><path fill="#005AF0" fill-rule="nonzero" d="M13.85 24.098h-1.14l1.128-6.823-3.49.005h-.05a.57.57 0 0 1-.568-.569c0-.135.125-.363.125-.363l6.272-10.46 1.16.005-1.156 6.834 3.508-.004h.056c.314 0 .569.254.569.568 0 .128-.05.24-.121.335L13.85 24.098zM15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.285 0 15-6.716 15-15 0-8.284-6.715-15-15-15z"/></g></symbol> </defs> </svg> <header class="ap--header " [class]="'ap--header ' + (mainmenuopen ? 'mainmenuopen' : '')" i-amphtml-binding> <div class="ap-o-header"> <a class="ap-o-header-home" href="/vi/"> <svg class="ap-o-header-home-logo"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"/></svg> <span class="ap-o-header-home-title">AMP</span> </a> <nav class="ap-o-header-main"> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Giới thiệu <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link websites" href="/vi/about/websites/"> <div class="ap-o-header-flyout-primary-item-link-icon websites"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-websites"> <div class="ap-o-header-flyout-item-title">Website AMP</div> <div class="ap-o-header-flyout-item-description">Tạo các trải nghiệm web hoàn hảo</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link stories" href="/vi/about/stories/"> <div class="ap-o-header-flyout-primary-item-link-icon stories"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-stories"> <div class="ap-o-header-flyout-item-title">Web Stories</div> <div class="ap-o-header-flyout-item-description">Câu chuyện Ăn liền cho tất cả mọi người</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link ads" href="/vi/about/ads/"> <div class="ap-o-header-flyout-primary-item-link-icon ads"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-ads"> <div class="ap-o-header-flyout-item-title">Quảng cáo AMP</div> <div class="ap-o-header-flyout-item-description">Quảng cáo cực nhanh trên web</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link email" href="/vi/about/email/"> <div class="ap-o-header-flyout-primary-item-link-icon email"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info ap-o-header-flyout-primary-item-link-info-email"> <div class="ap-o-header-flyout-item-title">Email AMP</div> <div class="ap-o-header-flyout-item-description">Email thế hệ kế tiếp</div> </div> </a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/about/how-amp-works/">Cách thức hoạt động của AMP</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/about/mission-and-vision/">Tầm nhìn & Sứ mệnh</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/about/use-cases/">Trường hợp sử dụng</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/success-stories/">Câu chuyện thành công</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Tài liệu <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/documentation/">Bắt đầu</a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/guides-and-tutorials/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#guides-documents"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Hướng dẫn & Tập luyện</div> <div class="ap-o-header-flyout-item-description">Bắt đầu với AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/components/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#components-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Thành phần</div> <div class="ap-o-header-flyout-item-description">Thư viện AMP hoàn chỉnh</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/examples/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#examples-flyout"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Ví dụ</div> <div class="ap-o-header-flyout-item-description">Hands-on introduction to AMP</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/courses/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#learn"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Khóa học</div> <div class="ap-o-header-flyout-item-description">Tìm hiểu về AMP thông qua các khóa học miễn phí</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/templates/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#template"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Khuôn mẫu</div> <div class="ap-o-header-flyout-item-description">Sẵn sàng sử dụng</div> </div> </a> </li> <li class="ap-o-header-flyout-primary-item"> <a class="ap-o-header-flyout-primary-item-link " href="/vi/documentation/tools/"> <div class="ap-o-header-flyout-primary-item-link-icon "> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wrench"/></svg> </div> <div class="ap-o-header-flyout-primary-item-link-info"> <div class="ap-o-header-flyout-item-title">Công cụ</div> <div class="ap-o-header-flyout-item-description">Bắt đầu tạo</div> </div> </a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Cộng đồng <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/documentation/guides-and-tutorials/contribute/">Đóng góp</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/community/roadmap/">Lộ trình</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/community/governance/">Quản lý</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/community/working-groups/access-subscriptions/">Nhóm làm việc</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Sự kiện <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/events/amp-fest-2020/">AMP Fest 2020</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/events/amp-roadshow/">AMP Roadshow</a> </li> </ul> </div> <div class="ap-o-header-main-item"> <a class="ap-o-header-main-link -tw" href="https://blog.amp.dev">Blog</a> </div> <div class="ap-o-header-main-item"> <button class="ap-o-header-main-link -tw "> Hỗ trợ <div class="ap-a-ico ap-o-header-main-link-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </button> <ul class="ap-o-header-flyout"> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/support/">Trợ giúp</a> </li> <li class="ap-o-header-flyout-item-secondary"> <a class="ap-o-header-flyout-item-title secondary" href="/vi/support/faq/">Câu hỏi thường gặp</a> </li> </ul> </div> </nav> <div class="-tv"> <span class="-tm" aria-label="Chọn một ngôn ngữ" tabindex="-1"> <span class="-tw">VI</span> <div class="ap-a-ico -ty"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </div> </span> <input class="-tg" type="checkbox" name="language-selector"> <div class="-tb" role="list"> <a class="-tw" href="/documentation/components/amp-consent/" role="listitem">English</a> <a class="-tw" href="/de/documentation/components/amp-consent/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/documentation/components/amp-consent/" role="listitem">Français</a> <a class="-tw" href="/ar/documentation/components/amp-consent/" role="listitem">العربية</a> <a class="-tw" href="/es/documentation/components/amp-consent/" role="listitem">Español</a> <a class="-tw" href="/it/documentation/components/amp-consent/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/components/amp-consent/" role="listitem">Indonesia</a> <a class="-tw" href="/ja/documentation/components/amp-consent/" role="listitem">日本語</a> <a class="-tw" href="/ko/documentation/components/amp-consent/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/components/amp-consent/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/components/amp-consent/" role="listitem">Русский</a> <a class="-tw" href="/tr/documentation/components/amp-consent/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/documentation/components/amp-consent/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/components/amp-consent/" role="listitem">Polski</a> </div> </div> </div> </header> <label class="ap-o-burger-menu-label" on="tap:AMP.setState({mainmenuopen: !mainmenuopen, noScrollState: !noScrollState})" [class]="'ap-o-burger-menu-label ' + (mainmenuopen ? 'mainmenuopen ' : '')" for="burger-menu" tabindex="0" role="button" aria-label="Menu Burger" i-amphtml-binding> <div class="ap-a-ico ap-o-burger-menu-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu"/></svg> </div> </label> <nav class="ap-o-burger-menu" [class]="mainmenuopen ? 'ap-o-burger-menu mainmenuopen' : 'ap-o-burger-menu'" i-amphtml-binding> <ul class="-th"> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Giới thiệu </label> <input class="-td" type="checkbox" aria-label="About"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/websites/"> Website AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/stories/"> Web Stories </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/ads/"> Quảng cáo AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/email/"> Email AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/how-amp-works/"> Cách thức hoạt động của AMP </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/mission-and-vision/"> Tầm nhìn & Sứ mệnh </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/about/use-cases/"> Trường hợp sử dụng </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/success-stories/"> Câu chuyện thành công </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Tài liệu </label> <input class="-td" type="checkbox" aria-label="Documentation"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/"> Bắt đầu </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/guides-and-tutorials/"> Hướng dẫn & Tập luyện </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/components/"> Thành phần </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/examples/"> Ví dụ </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/courses/"> Khóa học </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/templates/"> Khuôn mẫu </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/tools/"> Công cụ </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Cộng đồng </label> <input class="-td" type="checkbox" aria-label="Community"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/documentation/guides-and-tutorials/contribute/"> Đóng góp </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/community/roadmap/"> Lộ trình </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/community/governance/"> Quản lý </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/community/working-groups/access-subscriptions/"> Nhóm làm việc </a> </li> </ul> </li> <li class="-tp"> <label class="ap-o-burger-menu-link -tw "> Sự kiện </label> <input class="-td" type="checkbox" aria-label="Events"> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <ul class="-th"> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/events/amp-fest-2020/"> AMP Fest 2020 </a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tx" href="/vi/events/amp-roadshow/"> AMP Roadshow </a> </li> </ul> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw" href="https://blog.amp.dev">Blog</a> </li> <li class="-tp"> <a class="ap-o-burger-menu-link -tw " href="/vi/support/"> Trợ giúp </a> </li> </ul> </nav> <div class="-us"> <amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse" intersection-ratios="1" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-position-observer> <amp-animation id="slideTransition" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"duration":"150ms","fill":"both","easing":"ease-out","iterations":"1","animations":[{"selector":".label-title","keyframes":[{"transform":"scale3d(0, 1, 1)"},{"transform":"scale3d(1, 1, 1)"}]}]}</script> </amp-animation> </div> <amp-user-notification class="-ll i-amphtml-layout-nodisplay" id="format-filter-hint" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> </amp-user-notification> <div class="-lf" aria-hidden="true"> <div class="-lc"> <div class="-lh">Chọn định dạng của bạn để có một trải nghiệm giản lược hơn</div> <button class="-lp" on="tap:format-filter-hint.dismiss"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> </div> </div> <main class="ap--main -ld"> <div class="-tf"> <input class="-ua ap-a-sidebar-mobile-toggle-input-sidebar" type="checkbox" name="sidebar" id="sidebar" autocomplete="off"> <input class="-ul ap-a-sidebar-desktop-toggle-input-sidebar" type="checkbox" name="sidebar-desktop" id="sidebar-desktop" autocomplete="off"> <span id="ap--sidebar-content" class="-uh"></span> <section class="ap--toc"> <div class="ap-o-toc" [class]="contentmenuopen ? 'ap-o-toc contentmenuopen' : 'ap-o-toc'" i-amphtml-binding> <label class="ap-o-toc-toggle" for="toc" on="tap:AMP.setState({contentmenuopen: !contentmenuopen})" role="contentmenutrigger" tabindex="0"> <span class="ap-o-toc-hl">Mục lục</span> <span class="nav-icon"> <svg class="ap-a-ico"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </label> <input class="-uo -ur" type="checkbox" name="toc" id="toc" autocomplete="off"> <ul><li><a href="#overview">Overview</a></li> <li><a href="#usage">Usage</a></li> <li><a href="#granular-and-global-consent">Granular and global consent</a></li> <li><a href="#consent-configuration">Consent configuration</a><ul> <li><a href="#consent-instance">Consent Instance</a><ul> <li><a href="#consent-instance-id">Consent instance ID</a></li> <li><a href="#checkconsenthref">checkConsentHref</a><ul> <li><a href="#request">Request</a></li> <li><a href="#response">Response</a></li> </ul> </li> <li><a href="#consentrequired">consentRequired</a></li> <li><a href="#purposeconsentrequired">purposeConsentRequired</a></li> <li><a href="#onupdatehref">onUpdateHref</a></li> <li><a href="#promptui">promptUI</a></li> <li><a href="#geooverride">geoOverride</a></li> <li><a href="#xssiprefix">xssiPrefix</a></li> <li><a href="#uiconfig">uiConfig</a></li> <li><a href="#captions">captions</a></li> </ul> </li> </ul> </li> <li><a href="#consent-management">Consent Management</a><ul> <li><a href="#styling">Styling</a></li> <li><a href="#prompt-ui">Prompt UI</a><ul> <li><a href="#prompt-ui-for-stories">Prompt UI for Stories</a></li> <li><a href="#prompt-actions">Prompt Actions</a></li> </ul> </li> <li><a href="#post-prompt-ui-(optional)">Post-prompt UI (optional)</a><ul> <li><a href="#post-prompt-action">Post-prompt action</a></li> </ul> </li> </ul> </li> <li><a href="#blocking-behaviors">Blocking behaviors</a><ul> <li><a href="#client-caching">Client caching</a></li> <li><a href="#basic-blocking-behaviors">Basic blocking behaviors</a></li> <li><a href="#advanced-predefined-consent-blocking-behaviors">Advanced predefined consent blocking behaviors</a></li> <li><a href="#customize-consent-blocking-behaviors">Customize Consent Blocking Behaviors</a></li> <li><a href="#policy-instance-(optional)">Policy Instance (optional)</a><ul> <li><a href="#waitfor">waitFor</a></li> <li><a href="#timeout-(optional)">timeout (optional)</a></li> </ul> </li> </ul> </li> <li><a href="#integrations-and-availability">Integrations and availability</a></li> <li><a href="#faqs">FAQs</a><ul> <li><a href="#will-amp-change-any-behavior-by-default-on-may-25th?">Will AMP change any behavior by default on May 25th?</a></li> <li><a href="#how-can-i-stop-making-ad-and-analytics-calls-on-all-my-amp-pages?">How can I stop making ad and analytics calls on all my AMP pages?</a></li> <li><a href="#how-can-i-gather-consent-from-all-users-on-amp-pages?">How can I gather consent from all users on AMP pages?</a></li> <li><a href="#how-can-i-stop-showing-all-of-my-content-to-users-from-the-eea?">How can I stop showing all of my content to users from the EEA?</a></li> <li><a href="#how-can-i-target-consent-for-only-eea-users?">How can I target consent for only EEA users?</a></li> <li><a href="#can-i-make-the-consent-ui-blocking?">Can I make the consent UI blocking?</a></li> <li><a href="#what-is-checkconsenthref?-and-is-it-mandatory?">What is checkConsentHref? And is it mandatory?</a></li> <li><a href="#what-is-consentrequired?">What is consentRequired?</a></li> <li><a href="#i-also-manage-consent-on-non-amp-pages,-how-can-i-reconcile-the-two?">I also manage consent on non-AMP pages, how can I reconcile the two?</a></li> <li><a href="#how-can-i-send-additional-information-to-an-ad-network/analytics-provider?">How can I send additional information to an ad network/analytics provider?</a></li> <li><a href="#i-have-a-complicated-consent-ui,-will-it-work?">I have a complicated consent UI, will it work?</a></li> <li><a href="#how-can-i-show-a-persistent-ux-element-for-users-to-update-their-consent-preferences?">How can I show a persistent UX element for users to update their consent preferences?</a></li> <li><a href="#can-i-keep-the-non-eu-experience-unchanged-and-just-deliver-an-"opt-out"-experience-to-all-eu-users?">Can I keep the non-EU experience unchanged and just deliver an "opt-out" experience to all EU users?</a></li> <li><a href="#can-the-consent-be-set-via-amp-geo,-either-directly-or-through-amp-bind?-if-not,-can-it-be-set-in-the-response-from-checkconsenthref?">Can the consent be set via amp-geo, either directly or through amp-bind? If not, can it be set in the response from checkConsentHref?</a></li> <li><a href="#is-"checkconsenthref"-called-on-every-page-view-or-during-every-user-action?">Is "checkConsentHref" called on every page view or during every user action?</a></li> <li><a href="#can-amp-geo-work-with-amp-consent-so-that-it-only-shows-consent-for-a-user-that's-accessing-my-content-from-a-certain-country?">Can amp-geo work with amp-consent so that it only shows consent for a user that's accessing my content from a certain country?</a></li> <li><a href="#does-amp-support-the-iab-tcf?">Does AMP support the IAB TCF?</a></li> <li><a href="#i-have-a-cmp-implemented-with-amp-but-for-tcf-v2-what-do-i-need-to-do-to-support-tcf-v2.2?">I have a CMP implemented with AMP but for TCF v2 what do I need to do to support TCF v2.2?</a></li> <li><a href="#i-can't-see-feature-x-being-supported,-what-can-i-do?">I can't see feature X being supported, what can I do?</a></li> </ul> </li> <li><a href="#related-resources">Related resources</a></li> <li><a href="#supported-consent-management-platforms">Supported Consent Management Platforms</a></li></ul> </div> </section> <section class="-t"> <label class="-uu -ui ap-a-sidebar-mobile-toggle-label-sidebar" for="sidebar" on="tap:sidebar-left.toggle" role="categoriemenutrigger" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Thanh bên Bật/Tắt</span> </label> <label class="-uu -uc ap-a-sidebar-desktop-toggle-label-sidebar" for="sidebar-desktop" role="categoriemenutrigger-desktop" tabindex="0"> <span class="label-icon"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sidebar-toggle"/></svg></span> <span class="label-title">Thanh bên Bật/Tắt</span> </label> <nav class="-ut"> <a class="ap-m-breadcrumbs-crumb" href="/vi/documentation/">Tài liệu</a> <span class="ap-m-breadcrumbs-divider"> <svg class="ap-a-ico -un"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> <a class="ap-m-breadcrumbs-crumb" href="/vi/documentation/components/">Thành phần</a> </nav> <h1> amp-consent </h1> <div class="ap-o-component-intro"> <div class="ap-o-component-intro-row"> <h4 class="ap-o-component-intro-headline">Description</h4> <p class="ap-o-component-intro-text">Provides the ability to collect and store a user's consent through a UI control. Also provides the ability to block other AMP components based on the user's consent.</p> </div>   <div class="ap-o-component-intro-row ap-o-component-intro-row-inline"> <h4 class="ap-o-component-intro-headline">Required Scripts</h4> <div id="amp-script" class="ap-a-copy-script"> <pre><script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script></pre> <amp-iframe width="24" height="24" layout="fixed" sandbox="allow-scripts" src="https://amp.dev/shared/copy-script/#%3Cscript%20async%20custom-element%3D%22amp-consent%22%20src%3D%22https%3A//cdn.ampproject.org/v0/amp-consent-0.1.js%22%3E%3C/script%3E" class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:24px;height:24px;" i-amphtml-layout="fixed"> <div placeholder></div> </amp-iframe> </div> </div> <div class="ap-o-component-intro-row ap-o-component-intro-row-inline"> <h4 class="ap-o-component-intro-headline">Supported Layouts</h4> <div> <a class='ap-a-pill ap-a-pill-flat ap-a-pill-small ap-a-pill-link' href='/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated#nodisplay'>nodisplay</a> </div> </div> <div class="ap-o-component-intro-row"> <div id="examples" class="ap-m-clip"> <h4 class="ap-o-component-intro-headline">Ví dụ</h4> <div class="ap-o-component-intro-list"> <a class='ap-o-component-intro-list-item' href='/documentation/examples/user-consent/advanced_user_consent_flow/'>Advanced User Consent Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/user-consent/client_side_user_consent_flow/'>Client Side User Consent Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/user-consent/external_user_consent_flow/'>External User Consent Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/user-consent/geolocation-based_consent_flow/'>Geolocation-based Consent Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/user-consent/granular_user_consent/'>Granular User Consent</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/user-consent/server_side_user_consent_flow/'>Server Side User Consent Flow</a> <a class='ap-o-component-intro-list-item' href='/documentation/examples/user-consent/user_consent_modal_ui/'>User Consent Modal UI</a> </div> <button id="examples-expand" class="ap-m-clip-expand" on="tap:examples.toggleClass(class='expanded', force=true),examples-expand.hide()"> <svg class="ap-m-clip-expand-icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </button> </div> </div> </div> <h2 id="overview">Overview</h2> <p>As a publisher, you can use the <code><amp-consent></code> component to implement user controls. The component allows you to:</p> <ul> <li>Determine if the user should be asked to interact with the control.</li> <li>Capture the user’s consent decision.</li> <li>Makes the user’s setting available to elements on the AMP page to modify the page’s behavior.</li> </ul> <p>If you are a vendor that wants to customize your component's behavior based on amp-consent, or need to collect more advanced consent information you can read more <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/customizing-extension-behaviors-on-consent.md">here</a>.</p> <h2 id="usage">Usage</h2> <p>Only a single <code><amp-consent></code> element is allowed on the page, and that element must specify a unique <code>id</code>.</p> <p>If you also include an <code><amp-user-notification></code> element on the page, the UI associated with the <code><amp-consent></code> and <code><amp-user-notification></code> will not be deterministic. Avoid using <code><amp-consent></code> with <code><amp-user-notification></code> if this would be problematic.</p> <h2 id="granular-and-global-consent">Granular and global consent</h2> <p><code><amp-consent></code> supports <strong>global consent</strong>, in which users can make a single consent choice for a website. It also supports <strong>granular consent</strong>, allowing users to make a set of choices.</p> <p>To implement granular consent, define a set of <strong>consent purposes</strong>. Choose a name for each purpose. Create a UI that allows the user to make choices for each, and use the <code>setPurpose()</code> action to save each choice.</p> <p>The other actions that <code><amp-consent></code> supports apply to both granular and global consent. Thus, a webpage can implement both types simultaneously.</p> <h2 id="consent-configuration">Consent configuration</h2> <p>The <code><amp-consent></code> element requires a JSON configuration object that specifies the extension's behavior.</p> <p>Example:</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-consent</span> <span class="na">layout</span><span class="o">=</span><span class="s">"nodisplay"</span> <span class="na">id</span><span class="o">=</span><span class="s">"consent-element"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"consentInstanceId"</span><span class="o">:</span> <span class="s2">"my-consent"</span><span class="p">,</span> <span class="s2">"consentRequired"</span><span class="o">:</span> <span class="s2">"remote"</span><span class="p">,</span> <span class="s2">"checkConsentHref"</span><span class="o">:</span> <span class="s2">"https://example.com/api/check-consent"</span><span class="p">,</span> <span class="s2">"promptUI"</span><span class="o">:</span> <span class="s2">"consent-ui"</span><span class="p">,</span> <span class="s2">"onUpdateHref"</span><span class="o">:</span> <span class="s2">"https://example.com/update-consent"</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"consent-ui"</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:consent-element.accept"</span><span class="p">></span>Accept<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:consent-element.reject"</span><span class="p">></span>Reject<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:consent-element.dismiss"</span><span class="p">></span>Dismiss<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-consent</span><span class="p">></span> </pre></div> <h3 id="consent-instance">Consent Instance</h3> <h4 id="consent-instance-id">Consent instance ID</h4> <p><code>consentInstanceId</code>: The identifier of a consent configuration.</p> <h4 id="checkconsenthref">checkConsentHref</h4> <p><code>checkConsentHref</code>: Instructs AMP to make a CORS POST request with credentials to the specified URL to remotely configure the consent. The purpose can be any of 1) determine if consent is required for the user, 2) get the consent state from server, 3) get extra <code>sharedData</code> from server to share with AMP components.</p> <h5 id="request">Request</h5> <p>AMP sends the consent instance ID in the <code>consentInstanceId</code> field with the POST request.</p> <div class="-ta"><pre><span></span>{ "consentInstanceId": {string}, "consentStateValue": {enum}, // the stored consent state in client cache // takes value of ["accepted", "rejected", "unknown"] "consentString": {string}, // the stored consent string in client cache "matchedGeoGroup": {string}, // (new) the user's geoGroup detected by AMP. } </pre></div> <h5 id="response">Response</h5> <p>AMP expects the response to be a JSON object like the following:</p> <div class="-ta"><pre><span></span>{ "consentRequired": {boolean} // Whether consent is required from the user. // The value is required it is used to // determine if consent is required. If not // found, AMP will unblock content as consent is not required. "consentStateValue": {?enum} [default: null], // The latest consent state known // by the server // Takes value of ["accepted", "rejected", // "unknown"]. // The value will be ignored if // "consentRequired: false". // If the value is non-null, it will be cached at client. "consentString": {?string} [default: null], // The latest consent string known by the server. // If the value is non-null, // and if the consentStateValue is "accepted" or "rejected", // the value will be cached at client. "expireCache": {boolean} [default: false] // Indicate that the cache needs to be cleared // Set to `true` in conjunction with // consentStateValue='accepted'/'rejected' // to enforce server side consent state } </pre></div> <p>For granular consent, this response can also contain a map of <code>purposeConsent</code> choices.</p> <p><strong>Note: The legacy <code>promptIfUnknown</code> is migrating to <code>consentRequired</code> as prompt is no longer strictly required to manage consents.</strong></p> <p>The <code>consentStateValue</code> can be thought of as a signal for the runtime to block and unblock components. The value <code>accepted</code> instructs AMP that the user has given consent (or doesn't revoke consent in the opt-out case). This can be used to serve personalized ads in some scenarios. The value <code>rejected</code> means the user doesn't give consent (or has revoked consent in the opt-out case) and vendors may decide to not serve personalized ads.</p> <p>Optionally, additional key-value pairs can be returned in the response as the <code>sharedData</code> field.</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="nt">"consentRequire"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nt">"sharedData"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"a-key"</span><span class="p">:</span> <span class="s2">"some-string-value"</span><span class="p">,</span> <span class="nt">"key-with-bool-value"</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nt">"key-with-numeric-value"</span><span class="p">:</span> <span class="mi">123</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>The <code>sharedData</code> is made available to other AMP extensions just like the consent state. It's up to the 3rd party vendor extensions and the <code>checkConsentHref</code> remote endpoint to agree on particular meaning of those key-value pairs. One example use case is for the remote endpoint to convey extra consent related info of the current user to the 3rd party vendor extensions.</p> <p>Unlike consent state, this <code>shareData</code> is not persisted in client side storage.</p> <h4 id="consentrequired">consentRequired</h4> <p><code>consentRequired</code>: It accepts a boolean value indicating if a consent is required. <code><amp-consent></code> will unblock components with an <code>UNKNOWN_NOT_REQUIRED</code> state if <code>consentRequired: false</code> and there's no previous consent decision stored in client cache. It makes sense mostly with a combination of <a href="#geooverride">geoOverride</a> config so that only a certain regions require consent.</p> <p>It can also be set to <code>consentRequired: "remote"</code> to fetch the value remotely from the <code>checkConsentHref</code> endpoint. This is useful when publishers want to use their own server to decide if consent is required. For example, they want to have their own geo detection, or use the existing consent state for a known user. When used without <code>geoOverride</code>(#geooverride), the <code>consentRequired</code> value is set to <code>remote</code> by default if not specified.</p> <p>Note that this value will be ignored if there is previous consent state stored in client cache (see <a href="#client-caching">Client caching</a> section for examples).</p> <h4 id="purposeconsentrequired">purposeConsentRequired</h4> <p>For <a href="#granular-and-global-consent">granular consent</a>, <code>purposeConsentRequired</code> lets you specify an array of consent purposes. Until the user has made a choice for each, the <a href="#prompt-ui">consent UI</a> will appear each time they visit your webpage.</p> <p>For example, if you want to make sure the user makes a choice for consent purposes you've called <code>purpose-analytics</code> and <code>purpose-marketing</code>, your JSON would include:</p> <div class="-ta"><pre><span></span><span class="nt">"purposeConsentRequired"</span><span class="p">:</span> <span class="p">[</span><span class="s2">"purpose-analytics"</span><span class="p">,</span> <span class="s2">"purpose-marketing"</span><span class="p">]</span> </pre></div> <h4 id="onupdatehref">onUpdateHref</h4> <p><code>onUpdateHref</code>: Instructs AMP to make a CORS HTTPS POST request with credentials to the specified URL whenever the stored consent state changes.</p> <p>AMP sends the consent instance ID, a generated user id only for this usage and the consent state along with the POST request.</p> <div class="-ta"><pre><span></span>{ "consentInstanceId": "my-consent", "ampUserId": "xxx", "consentStateValue": "accepted"/"rejected"/"unknown" } </pre></div> <h4 id="promptui">promptUI</h4> <p><code>promptUI</code>: Specifies the prompt element that is shown to collect the user's consent. The prompt element should be child element of <code><amp-consent></code> with an <code>id</code> that is referenced by the <code>promptUI</code>. See the <a href="#prompt-ui">Prompt UI</a> section for details on how a user interacts with the prompt UI.</p> <p>The consent decisions collected from user via this prompt UI will be stored in <code>localStorage</code> as client cache. See the <a href="#client-caching">Client caching</a> section for how the cache is used.</p> <h4 id="geooverride">geoOverride</h4> <p><code>geoOverride</code> provides a way to utilize the <code><amp-geo></code> component to detect user's geo location to assist client side decisions.</p> <p><code>geoOverride</code> is a JSON object keyed by geo group codes which are defined in <code><amp-geo></code> (details <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-geo/amp-geo.md">here</a>). Each geo override should be a valid <code><amp-consent></code> config object. AMP will take all the values in the corresponding <code>geoOverride</code> to override the existing config. The only exception here is that the <code>consentInstanceId</code> cannot be overwritten by <code>geoOverride</code> config, because AMP only manage and store consent information in a single instance.</p> <p>Two important tips when configuring <code>amp-geo</code>:</p> <ul> <li>All geo groups should be mutually exclusive. The behavior is undetermined if a user falls into multiple geo override.</li> <li>Provide an <code>geoGroupUnknown</code> override for users that are failed be be identified by <code><amp-geo></code>.</li> </ul> <p>Take the following config as an example:</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="nt">"onUpdateHref"</span><span class="p">:</span> <span class="s2">"https://example.com/update-consent"</span><span class="p">,</span> <span class="nt">"promptUI"</span><span class="p">:</span> <span class="s2">"consent-ui"</span><span class="p">,</span> <span class="nt">"consentRequired"</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="nt">"geoOverride"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"geoGroup1"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"consentRequired"</span><span class="p">:</span> <span class="kc">true</span> <span class="p">},</span> <span class="nt">"geoGroup2"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"checkConsentHref"</span><span class="p">:</span> <span class="s2">"https://example.com/check-consent"</span><span class="p">,</span> <span class="nt">"consentRequired"</span><span class="p">:</span> <span class="s2">"remote"</span> <span class="p">},</span> <span class="nt">"geoGroupUnknown"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"checkConsentHref"</span><span class="p">:</span> <span class="s2">"https://example.com/check-consent"</span><span class="p">,</span> <span class="nt">"consentRequired"</span><span class="p">:</span> <span class="kc">true</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <p>For users outside <code>geoGroup1</code>, <code>geoGroup2</code> & <code>geoGroupUknown</code>, the merged config is</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="nt">"onUpdateHref"</span><span class="p">:</span> <span class="s2">"https://example.com/update-consent"</span><span class="p">,</span> <span class="nt">"promptUI"</span><span class="p">:</span> <span class="s2">"consent-ui"</span><span class="p">,</span> <span class="nt">"consentRequired"</span><span class="p">:</span> <span class="kc">false</span> <span class="p">}</span> </pre></div> <p><code><amp-consent></code> does nothing because <code>"consentRequired": false</code>.</p> <p>For users in <code>geoGroup1</code>, the merged config is</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="nt">"onUpdateHref"</span><span class="p">:</span> <span class="s2">"https://example.com/update-consent"</span><span class="p">,</span> <span class="nt">"promptUI"</span><span class="p">:</span> <span class="s2">"consent-ui"</span><span class="p">,</span> <span class="nt">"consentRequired"</span><span class="p">:</span> <span class="kc">true</span> <span class="p">}</span> </pre></div> <p>Because <code>checkConsentHref</code> is not specified, both consent collection and storage are completely handled at client side. AMP will prompt the consent UI if and only if the client cache is empty.</p> <p>For users in <code>geoGroup2</code>, the merged config is</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="nt">"onUpdateHref"</span><span class="p">:</span> <span class="s2">"https://example.com/update-consent"</span><span class="p">,</span> <span class="nt">"promptUI"</span><span class="p">:</span> <span class="s2">"consent-ui"</span><span class="p">,</span> <span class="nt">"checkConsentHref"</span><span class="p">:</span> <span class="s2">"https://example.com/check-consent"</span><span class="p">,</span> <span class="nt">"consentRequired"</span><span class="p">:</span> <span class="s2">"remote"</span> <span class="p">}</span> </pre></div> <p>If client cache is empty, AMP will wait for <code>checkConsentHref</code> response to decide whether a consent is required from the user. If the response contains <code>consentRequired: true</code> and <code>consentStateValue: unknown</code>, then AMP will collect consent via the specified prompt UI. If <code>consentStateValue</code> is 'accepted' or 'rejected', then it will use this value and also sync to cache.</p> <p>For users in <code>geoGroupUnknown</code>, the merged config is</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="nt">"onUpdateHref"</span><span class="p">:</span> <span class="s2">"https://example.com/update-consent"</span><span class="p">,</span> <span class="nt">"promptUI"</span><span class="p">:</span> <span class="s2">"consent-ui"</span><span class="p">,</span> <span class="nt">"checkConsentHref"</span><span class="p">:</span> <span class="s2">"https://example.com/check-consent"</span><span class="p">,</span> <span class="nt">"consentRequired"</span><span class="p">:</span> <span class="kc">true</span> <span class="p">}</span> </pre></div> <p>AMP will check client cache and server in parallel to find the previous consent state. Because <code>"consentRequired": true</code> it will collect consent via the specified prompt UI if cache is empty w/o waiting for the server response. The server response is mainly for cache refresh or fetching <code>shareData</code>.</p> <h4 id="xssiprefix">xssiPrefix</h4> <p><code>xssiPrefix</code>: Causes <code><amp-consent></code> to strip a prefix from the <code>checkConsentHref</code> endpoint's response. If the prefix is not present in the response, then this option will have no effect. <code>xssiPrefix</code> can be useful for APIs that include <a href="http://patorjk.com/blog/2013/02/05/crafty-tricks-for-avoiding-xssi/">security prefixes</a> like <code>)]}</code> to help prevent cross site scripting attacks.</p> <h4 id="uiconfig">uiConfig</h4> <p><code>uiConfig</code> provides extra UI and behaviors to <code><amp-consent></code>. <code>uiConfig</code> is an optional JSON object that can contain the key <code>overlay</code> which is a boolean. <code>overlay: true</code> will add a light black overlay behind the consent prompt to help users focus on the prompt. Additionally, this will stop user interaction with the contents beneath the consent prompt (such as scrolling). <code>overlay: false</code> is the default.</p> <h4 id="captions">captions</h4> <p><code>captions</code> provides accessibility features for screen reader users for <code><amp-consent></code>. <code>captions</code> is an optional JSON an object that can contain the <code>consentPromptCaption</code> and <code>buttonActionCaption</code> strings. The default values for these fields are 'User Consent Prompt' and 'Focus Prompt' respectivly, but they can be overriden and customized for your use case (such as localization). When a consent prompt in an iframe is loaded, the screen reader will read the <code>consentPromptCaption</code> and then the <code>buttonActionCaption</code>. The <code>consentPromptCaption</code> should act as a title for the consent prompt, while the <code>buttonActionCaption</code> should inform the user that they can interact with the iframe.</p> <div class="-ta"><pre><span></span><span class="p">{</span> <span class="nt">"captions"</span><span class="p">:</span> <span class="p">{</span> <span class="nt">"consentPromptCaption"</span><span class="p">:</span> <span class="s2">"This is an example user consent prompt"</span><span class="p">,</span> <span class="nt">"buttonActionCaption"</span><span class="p">:</span> <span class="s2">"Click to interact with the prompt"</span> <span class="p">}</span> <span class="p">}</span> </pre></div> <h2 id="consent-management">Consent Management</h2> <p>The <code><amp-consent></code> element supports customizing the consent prompt UI and post-prompt UI, which can be used to manage consent.</p> <h3 id="styling">Styling</h3> <p>The <code><amp-consent></code> element is set to <code>position: fixed</code> after layout occurs (default is bottom: 0, which can be overridden).</p> <p>By default, all UI elements contained within <code>amp-consent</code> have <code>display:none</code> and have <code>display</code> set to <code>display:block</code> when it is shown. No two UI elements are shown at the same time. When displayed, the UI element is fixed to the bottom of the page by default.</p> <h3 id="prompt-ui">Prompt UI</h3> <p>The prompt UI is defined within the consent instance config. The <code>promptUI</code> attribute refers to a child element of <code><amp-consent></code> by its <code>id</code>.</p> <p><em>Example</em>: Displays a prompt user interface</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-consent</span> <span class="na">layout</span><span class="o">=</span><span class="s">"nodisplay"</span> <span class="na">id</span><span class="o">=</span><span class="s">"consent-element"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"consentInstanceId"</span><span class="o">:</span> <span class="s2">"my-consent"</span><span class="p">,</span> <span class="s2">"checkConsentHref"</span><span class="o">:</span> <span class="s2">"https://foo.com/api/show-consent"</span><span class="p">,</span> <span class="s2">"promptUI"</span><span class="o">:</span> <span class="s2">"consent-ui"</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"consent-ui"</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:consent-element.accept"</span><span class="p">></span>Accept<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:consent-element.reject"</span><span class="p">></span>Reject<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:consent-element.dismiss"</span><span class="p">></span>Dismiss<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-consent</span><span class="p">></span> </pre></div> <p>AMP displays prompt UI on page load or by user interaction. The prompt UI is hidden based on the three user actions described below.</p> <p>AMP also supports external consent UI flow via <code>promptUiSrc</code> which will load your custom iframe. More information about the communication of user actions can be found <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./integrating-consent.md#Informing-Consent-response">here</a>.</p> <h4 id="prompt-ui-for-stories">Prompt UI for Stories</h4> <p>The <code>amp-story</code> extension provides a <a href="https://user-images.githubusercontent.com/1492044/40135514-8ab56d10-5913-11e8-95a2-72ac01ff31e0.png">default prompt UI</a>, that requires using a <code><amp-story-consent></code> component as the prompt UI. This component content requires a <code>title</code>, a <code>message</code>, and a list of <code>vendors</code>, and has to be specified in its own component configuration. The decline button can be hidden by adding an optional <code>onlyAccept</code> boolean parameter. Additionally, an optional templated external link to the privacy policy or settings can be configured, by adding <code>"externalLink": {"title": "Privacy Settings", "href": "https://example.com"}</code> to the consent configuration.</p> <p><em>Example</em>: Displays a prompt user interface on an AMP Story</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-consent</span> <span class="na">layout</span><span class="o">=</span><span class="s">"nodisplay"</span> <span class="na">id</span><span class="o">=</span><span class="s">"consent-element"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"checkConsentHref"</span><span class="o">:</span> <span class="s2">"https://foo.com/api/show-consent"</span><span class="p">,</span> <span class="s2">"promptUI"</span><span class="o">:</span> <span class="s2">"consent-ui"</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">amp-story-consent</span> <span class="na">id</span><span class="o">=</span><span class="s">"consent-ui"</span> <span class="na">layout</span><span class="o">=</span><span class="s">"nodisplay"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"title"</span><span class="o">:</span> <span class="s2">"My title"</span><span class="p">,</span> <span class="s2">"message"</span><span class="o">:</span> <span class="s2">"My example message."</span><span class="p">,</span> <span class="s2">"vendors"</span><span class="o">:</span> <span class="p">[</span><span class="s2">"Item 1"</span><span class="p">,</span> <span class="s2">"Item 2"</span><span class="p">,</span> <span class="s2">"Item 3"</span><span class="p">,</span> <span class="s2">"Item 4"</span><span class="p">]</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-story-consent</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-consent</span><span class="p">></span> </pre></div> <h4 id="prompt-actions">Prompt Actions</h4> <p>Three user actions apply to both granular and global consent: <code>accept</code>, <code>reject</code> and <code>dismiss</code>.</p> <p>To enable the user to choose a consent state and hide the prompt UI, add an <code>on</code> attribute to a button with the following value scheme <code>on="event:idOfAmpConsentElement.accept/reject/dismiss"</code></p> <ul> <li> <p><code>accept</code>: publisher instructs AMP to remember the accept decision to the consent, unblocks components waiting for the consent, and hides the prompt UI.</p> </li> <li> <p><code>reject</code>: publisher instructs AMP to remember the reject decision to the consent, cancels <code>buildCallback</code> (AMP lifecycle callback to <a href="https://github.com/ampproject/amphtml/blob/main/docs/building-an-amp-extension.md#buildcallback">build AMP components</a>) of components waiting for the consent, and hides the prompt UI.</p> </li> <li> <p><code>dismiss</code>: instruct AMP to cancel <code>buildCallback</code> of components waiting for the consent, and hides the prompt UI.</p> </li> </ul> <p>The <code>setPurpose</code> action is used in <a href="#granular-and-global-consent">granular consent</a>. You can use it to temporarily store the user's choice for an individual consent purpose. This action takes the form <code>setPurpose({purpose name}={boolean value})</code>. Setting a purpose to <code>true</code> marks it as accepted; setting it to <code>false</code> marks it as rejected.</p> <p>For example, to mark a consent purpose called <code>performanceCookies</code> as <code>true</code>, you would use</p> <div class="-ta"><pre><span></span><span class="nx">myConsent</span><span class="p">.</span><span class="nx">setPurpose</span><span class="p">(</span><span class="nx">performanceCookies</span><span class="o">=</span><span class="kc">true</span><span class="p">)</span> </pre></div> <p>The <code>accept</code> and <code>reject</code> actions, which accept or deny global consent, both save granular consent choices as well. If you pass either of these the argument <code>(purposeConsentDefault={boolean value})</code>, any consent purposes for which the user has not made a choice will be assigned that boolean value.</p> <p>For example, the action</p> <div class="-ta"><pre><span></span><span class="nx">myConsent</span><span class="p">.</span><span class="nx">accept</span><span class="p">(</span><span class="nx">purposeConsentDefault</span><span class="o">=</span><span class="kc">false</span><span class="p">)</span> </pre></div> <p>will reject any consent purposes for which the user has not made a choice.</p> <p>If you don't use <code>purposeConsentDefault</code>, any purposes for which the user has not made a choice will remain unset. For this reason, especially when the prompt UI is a form with checkboxes, it's generally recommended that you include this argument.</p> <h3 id="post-prompt-ui-(optional)">Post-prompt UI (optional)</h3> <p>You can provide a UI after collecting the initial consent. For example, you can provide a UI for the user to manage their consent (e.g., change their "reject" to "accept"). The post-prompt UI is defined with the <code><amp-consent></code> JSON configuration object. The <code>postPromptUI</code> refers to an element by id. If the element is a child element of the <code><amp-consent></code>, it will be fixed to the bottom of the page same as prompt UIs. You can also inline the <code>postPromptUI</code> in the document, but please be aware of the potential layout shift caused by toggling the display of this element.</p> <p>When defined, the post-prompt UI is shown when all prompt UIs have been hidden, or initially on page load if no prompt UI was triggered.</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-consent</span> <span class="na">layout</span><span class="o">=</span><span class="s">"nodisplay"</span> <span class="na">id</span><span class="o">=</span><span class="s">"consent-element"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"consentInstanceId"</span><span class="o">:</span> <span class="s2">"consent-foo"</span><span class="p">,</span> <span class="s2">"promptUI"</span><span class="o">:</span> <span class="s2">"consent-ui"</span><span class="p">,</span> <span class="s2">"postPromptUI"</span><span class="o">:</span> <span class="s2">"post-consent-ui"</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"consent-ui"</span><span class="p">></span> ... <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"post-consent-ui"</span><span class="p">></span> <span class="p"><</span><span class="nt">button</span> <span class="na">on</span><span class="o">=</span><span class="s">"tap:consent-element.dismiss"</span><span class="p">></span>Settings<span class="p"></</span><span class="nt">button</span><span class="p">></span> <span class="p"></</span><span class="nt">div</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-consent</span><span class="p">></span> </pre></div> <h4 id="post-prompt-action">Post-prompt action</h4> <p>The post-prompt UI provides one user action type that can be used to allow the user to manage a previously set consent. Use <code>prompt</code> to display a prompt for a given consent instance. Add an <code>on</code> attribute to a button with the following value scheme <code>on="event:idOfAmpConsentElement.prompt"</code>.</p> <h2 id="blocking-behaviors">Blocking behaviors</h2> <p>The <code><amp-consent></code> element can be used to block any other AMP components on the page from loading (except <code><amp-consent></code> itself).</p> <h3 id="client-caching">Client caching</h3> <p>The consent information (from the response or from user action on client side) will be cached on client side in localStorage. The cached value if exist will always be used by <code><amp-consent></code> to unblock content for performance optimization. Server endpoint can instruct <code><amp-consent></code> to erase the stored value so that it won't be used to unblock content the next visit using the <code>expireCache: true</code>.</p> <p>A couple of implications with this behavior:</p> <ul> <li>When stored user consent no longer applies, the change will be synced through <code>checkConsentHref</code> response. But the change will be applied one-time off due to the client cache.</li> <li>When a user travels, <code><amp-consent></code> will use the stored consent. It's up to the <code>checkConsentHref</code> response to erase stored value using <code>expireCache: true</code> and <code>consentRequired: false</code>.</li> <li>If a promptUI is used to collect user consent. Using <code>expireCache: true</code> will prompt consent dialog and block users from content on their following visits.</li> </ul> <p><code><amp-consent></code> stores consent choices in a key called <code>amp-store:{xxx}</code>, where <code>{xxx}</code> is your domain. The value is base64-encoded JSON.</p> <h3 id="basic-blocking-behaviors">Basic blocking behaviors</h3> <p>In global consent, to block components, either add the <code>data-block-on-consent</code> attribute to the AMP component or add the <code>amp-consent-blocking</code> meta tag with the list of extensions to be blocked. Note, that if you're using the <code>type</code> attribute for CMP integration, you must also include the <code>amp-consent-blocking</code> meta tag. This ensures that <code>buildCallback</code> of the component isn't called until consent has been accepted, or if consent is not required for the user based on the <code>consentRequired</code> value. In effect, this means that all behaviors of the element (e.g. sending analytics pings for <code><amp-analytics></code> or the loading of an <code><amp-ad></code>) are delayed until the relevant consent instance is accepted.</p> <p>Individual components may override this behavior to provide more specialized handling. Please refer to each component's documentation for details.</p> <p><em>Example: Blocking the analytics until user accepts consent</em></p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-analytics</span> <span class="na">data-block-on-consent</span> <span class="na">type</span><span class="o">=</span><span class="s">"googleanalytics"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-analytics</span><span class="p">></span> </pre></div> <p>or</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"amp-consent-blocking"</span> <span class="na">content</span><span class="o">=</span><span class="s">"amp-analytics,amp-ad"</span> <span class="p">/></span> </pre></div> <p>For granular consent, use the <code>data-block-on-consent-purposes</code> attribute with a comma-separated list of consent purposes. For example, the following will block an <code>amp-pixel</code> component until the user accepts purposes named <code>performance</code> and <code>marketing</code>:</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-pixel</span> <span class="na">data-block-on-consent-purposes</span><span class="o">=</span><span class="s">"performance, marketing"</span><span class="p">></</span><span class="nt">amp-pixel</span><span class="p">></span> </pre></div> <h3 id="advanced-predefined-consent-blocking-behaviors">Advanced predefined consent blocking behaviors</h3> <p>AMP provides a list of pre-defined <a href="#policy-instance-optional">consent policy instances</a> for publishers to easily define consent blocking behaviors to individual components.</p> <p>Set the value to the <code>data-block-on-consent</code> attribute to use the pre-defined consent blocking behavior policy.</p> <p><em>Example: Blocking the analytics until user respond to consent</em></p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-analytics</span> <span class="na">data-block-on-consent</span><span class="o">=</span><span class="s">"_till_responded"</span> <span class="na">type</span><span class="o">=</span><span class="s">"googleanalytics"</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-analytics</span><span class="p">></span> </pre></div> <p>AMP may support more advanced pre-defined blocking behaviors in the future. Because of this, the value of <code>data-block-on-consent</code> is reserved only for the following supported pre-defined attributes:</p> <ul> <li><code>_till_responded</code> : Unblock the component until the user has responded to the consent prompt, or the consent prompt has been skipped.</li> <li><code>_till_accepted</code> : <a href="#basic-blocking-behaviors">Default basic blocking behavior</a>, expect that when <code>_till_accepted</code> is explicitly added, individual components cannot override the blocking behavior.</li> <li><code>_auto_reject</code> : Always reject the consent automatically if consent is required but unknown. The reject consent decision will not be stored. It is recommended not to specify a consent prompt UI when auto rejecting consent for every components.</li> </ul> <p>When one of the pre-defined attributes is used, AMP assumes that the publisher takes final control on the consent blocking behaviors. Individual components cannot override the blocking behaviors brought by pre-defined consent policy, they can however still customize components' behaviors after having been unblocked.</p> <h3 id="customize-consent-blocking-behaviors">Customize Consent Blocking Behaviors</h3> <p>An optional <code>policy</code> property can be added to the <code><amp-consent></code> element's JSON configuration object. Its value is an object that customizes consent blocking behaviors.</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-consent</span> <span class="na">layout</span><span class="o">=</span><span class="s">"nodisplay"</span> <span class="na">id</span><span class="o">=</span><span class="s">"consent-element"</span><span class="p">></span> <span class="p"><</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">"application/json"</span><span class="p">></span> <span class="p">{</span> <span class="s2">"consentInstanceId"</span><span class="o">:</span> <span class="nx">xxx</span> <span class="s2">"checkConsentHref"</span><span class="o">:</span> <span class="s2">"https://example.com/api/show-consent"</span> <span class="s2">"policy"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"default"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"timeout"</span><span class="o">:</span> <span class="p">{</span> <span class="s2">"seconds"</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="s2">"fallbackAction"</span><span class="o">:</span> <span class="s2">"reject"</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="p"></</span><span class="nt">script</span><span class="p">></span> <span class="p"></</span><span class="nt">amp-consent</span><span class="p">></span> </pre></div> <p>The <code>default</code> policy is the only one allowed to be configured. This policy applies to every element that is blocked by the <code>data-block-on-consent</code> attribute.</p> <h3 id="policy-instance-(optional)">Policy Instance (optional)</h3> <h4 id="waitfor">waitFor</h4> <p><code>waitFor</code> object specifies the consent instance that needs to wait. Each consent instance requires an array value. AMP may support sub item lists under an consent instance, but right now only empty array is expected, and the value will be ignored.</p> <h4 id="timeout-(optional)">timeout (optional)</h4> <p><code>timeout</code> can be used to inform components the current consent state status after specified time.</p> <p>When used as a single value, <code>timeout</code> equals the timeout value in second.</p> <div class="-ta"><pre><span></span>"default": { "waitFor": { "my-consent": [] }, "timeout": 2 } </pre></div> <p>When used as an object. <code>timeout</code> object supports two attributes</p> <ul> <li><code>seconds</code>: timeout value in second</li> <li><code>fallbackAction</code> (optional): the fallback action at timeout if no user action is taken and no state has been stored. The fallback actions supported are <code>reject</code> and <code>dismiss</code>. Default action is <code>dismiss</code> if not configured. Note the consent state changed due to fallback action at timeout will not be stored on client side.</li> </ul> <div class="-ta"><pre><span></span>"default": { "waitFor": { "my-consent": [] }, "timeout": { "seconds": 2, "fallbackAction": "reject" } } </pre></div> <h2 id="integrations-and-availability">Integrations and availability</h2> <p>The table below lists the vendors and components that are integrated with amp-consent</p> <table> <thead> <tr> <th>Integration</th> <th>Prod Availability</th> <th>Documentation</th> <th>Ready For Testing</th> </tr> </thead> <tbody> <tr> <td>DoubleClick & AdSense Integration</td> <td>05/10/18</td> <td><a href="https://support.google.com/dfp_premium/answer/7678538">Link</a></td> <td>Yes</td> </tr> <tr> <td>AMP IMA Video Integration</td> <td>05/15/18</td> <td><a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-ima-video/consent-blocking.md">Link</a></td> <td>Yes</td> </tr> <tr> <td>AMP Geo</td> <td>05/10/18</td> <td><a href="https://amp.dev/documentation/examples/user-consent/geolocation-based_consent_flow/">Link</a></td> <td>Yes</td> </tr> <tr> <td>AMP Stories</td> <td>05/15/18</td> <td><a href="#prompt-ui-for-stories">Link</a></td> <td>Yes</td> </tr> </tbody> </table> <h2 id="faqs">FAQs</h2> <h5 id="will-amp-change-any-behavior-by-default-on-may-25th?">Will AMP change any behavior by default on May 25th?</h5> <p>No. All desired behavior on AMP pages is managed by publishers and this is no different.</p> <h5 id="how-can-i-stop-making-ad-and-analytics-calls-on-all-my-amp-pages?">How can I stop making ad and analytics calls on all my AMP pages?</h5> <p>Use the <a href="#blocking-behaviors"><code>data-block-on-consent</code></a> attribute on the <a href="https://amp.dev/documentation/components/amp-ad"><code><amp-ad></code></a> or <a href="https://amp.dev/documentation/components/amp-analytics"><code><amp-analytics></code></a> component.</p> <p>Example:</p> <div class="-ta"><pre><span></span><span class="p"><</span><span class="nt">amp-ad</span> <span class="na">data-block-on-consent</span> <span class="na">width</span><span class="o">=</span><span class="s">"320"</span> <span class="na">height</span><span class="o">=</span><span class="s">"50"</span> <span class="na">type</span><span class="o">=</span><span class="s">"doubleclick"</span> <span class="na">data-slot</span><span class="o">=</span><span class="s">"/4119129/mobile_ad_banner"</span> <span class="p">></span> <span class="p"></</span><span class="nt">amp-ad</span><span class="p">></span> </pre></div> <p><strong>Note</strong>: For some vendors, the <code>data-block-on-consent</code> attribute only works in conjunction with <code><amp-consent></code>. Consult with your ad or analytics vendor for implementation details.</p> <h5 id="how-can-i-gather-consent-from-all-users-on-amp-pages?">How can I gather consent from all users on AMP pages?</h5> <p>Use the <code><amp-consent></code> component which allows configuring a custom UI with <code>Accept</code>, <code>Reject</code> and <code>Dismiss</code> states. It is up to each amp-component vendor how they interpret these states, so please read your vendor's documentation carefully.</p> <h5 id="how-can-i-stop-showing-all-of-my-content-to-users-from-the-eea?">How can I stop showing all of my content to users from the EEA?</h5> <p>You could consider hiding all your content for EEA users by implementing <a href="https://amp.dev/documentation/components/amp-geo"><code><amp-geo></code></a>. See <a href="https://www.ampproject.org/latest/blog/dynamic-geo-personalization/">this blog post</a> for more details.</p> <h5 id="how-can-i-target-consent-for-only-eea-users?">How can I target consent for only EEA users?</h5> <p>Use <a href="https://amp.dev/documentation/components/amp-geo"><code><amp-geo></code></a> to configure a country group and hook up the country group to <code>geoOverride</code> attribute in <code><amp-consent></code>. If the user accesses the AMP page from a country that's configured in the list, the appropriate consent UI will be invoked.</p> <h5 id="can-i-make-the-consent-ui-blocking?">Can I make the consent UI blocking?</h5> <p>Yes. The UI is not prescriptive. If you do end up providing a non-blocking version of the UI, dismissing the UI will lead to a <code>dismiss</code> state. It is up to each vendor (ads & analytics) how they would process <code>accept</code>, <code>reject</code> and <code>dismiss</code>.</p> <h5 id="what-is-checkconsenthref?-and-is-it-mandatory?">What is <code>checkConsentHref</code>? And is it mandatory?</h5> <p>Note that <a href="#checkconsenthref"><code>checkConsentHref</code></a> is not mandatory if you collect consent and store consent completely at client side.</p> <p><code>checkConsentHref</code> gives you, the publisher, the ability to know if a consent must be shown to the user. For example, by using this call, you may determine the user's geo-location on the server-side, allowing you to suppress the consent. You can also instead use <code><amp-geo></code> and <code>geoOverride</code> to achieve the same result without any server-side setup.</p> <p>You may also choose to suppress the consent if you detect that the user doesn't need consent because they accepted consent on a different property or for alternate reasons.</p> <h5 id="what-is-consentrequired?">What is <code>consentRequired</code>?</h5> <p><a href="#consentRequired"><code>consentRequired</code></a> is used to determine if consent is required for the user. It can be specified in the config of <code><amp-consent></code> for different geo regions, it can also be retrieved from the <code>checkConsentHref</code> endpoint.</p> <h5 id="i-also-manage-consent-on-non-amp-pages,-how-can-i-reconcile-the-two?">I also manage consent on non-AMP pages, how can I reconcile the two?</h5> <p>You can configure <code>checkConsentHref</code> to call your own server-side endpoint to detect consent state for the user and reconcile how you want AMP to behave with using a response from the <a href="#checkConsentHref"><code>checkConsentHref</code></a>.</p> <h5 id="how-can-i-send-additional-information-to-an-ad-network/analytics-provider?">How can I send additional information to an ad network/analytics provider?</h5> <p>The response on <code>checkConsentHref</code> also accepts values for the key <a href="#response"><code>sharedData</code></a> on the response which will be made available to all vendor components being blocked by the consent logic. It is up to the vendor how they process this sharedData. DoubleClick/AdSense expect specific key-values, refer to their <a href="https://support.google.com/dfp_premium/answer/7678538#amp-pages">documentation</a> for details.</p> <h5 id="i-have-a-complicated-consent-ui,-will-it-work?">I have a complicated consent UI, will it work?</h5> <p>You should try out the <a href="https://amp.dev/documentation/examples/user-consent/advanced_user_consent_flow/">advanced consent flows</a> to see how it's implemented. You could also consider using the <a href="https://amp.dev/documentation/components/amp-selector"><code><amp-selector></code></a> component.</p> <h5 id="how-can-i-show-a-persistent-ux-element-for-users-to-update-their-consent-preferences?">How can I show a persistent UX element for users to update their consent preferences?</h5> <p>You can use the optional <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/<#post-prompt-ui-(optional)>">post-prompt UI</a> to accomplish this. View this <a href="https://amp.dev/documentation/examples/user-consent/client_side_user_consent_flow/">sample on AMP By Example</a> for a similar implementation.</p> <h5 id="can-i-keep-the-non-eu-experience-unchanged-and-just-deliver-an-"opt-out"-experience-to-all-eu-users?">Can I keep the non-EU experience unchanged and just deliver an "opt-out" experience to all EU users?</h5> <p>You can configure <code><amp-consent></code> and <a href="https://amp.dev/documentation/components/amp-geo"><code><amp-geo></code></a> to show consent to users in specific countries (e.g., via a list of EEA countries that you configure). The <code><amp-consent></code> component can also be configured to automatically "reject" consent on behalf of the user, if the publisher so desires. The way to do this is by setting the <a href="#timeout-optional"><code>timeout</code></a> seconds to <code>0</code> and <code>fallbackAction</code> to <code>reject</code>. Note that the <code>fallbackAction</code> state won't be stored across sessions. Note also that each ad network will have its own implementation for how it interprets a "reject" action from a user. There is no way to automatically 'accept' consent on behalf of the user.</p> <p>You can <a href="https://support.google.com/dfp_premium/answer/7678538">learn more</a> about how Google AdSense and DoubleClick plan to handle a 'reject', and any configuration available to serve non-personalized ads.</p> <h5 id="can-the-consent-be-set-via-amp-geo,-either-directly-or-through-amp-bind?-if-not,-can-it-be-set-in-the-response-from-checkconsenthref?">Can the consent be set via amp-geo, either directly or through amp-bind? If not, can it be set in the response from checkConsentHref?</h5> <p>You can use the response of <code>checkConsentHref</code> to show a consent to the user if there is no previous consent state, which allows the user to go through the consent flow. For details on how to reject consent by default, see the opt-out question above. It isn't possible to "accept" consent by default.</p> <h5 id="is-"checkconsenthref"-called-on-every-page-view-or-during-every-user-action?">Is "checkConsentHref" called on every page view or during every user action?</h5> <p><code>checkConsentHref</code> is called on every page view before the consent UI is displayed to the user.</p> <h5 id="can-amp-geo-work-with-amp-consent-so-that-it-only-shows-consent-for-a-user-that's-accessing-my-content-from-a-certain-country?">Can amp-geo work with amp-consent so that it only shows consent for a user that's accessing my content from a certain country?</h5> <p>Yes. See example <a href="https://amp.dev/documentation/examples/user-consent/geolocation-based_consent_flow/">here</a>.</p> <h5 id="does-amp-support-the-iab-tcf?">Does AMP support the IAB TCF?</h5> <p>AMP supports popular transparency consent frameworks including the IAB TCF v1, TCF v2, TCF v2.2, the IAB US Privacy String, and the IAB Global Privacy Platform string. Please check with your consent management platform (CMP) and ad networks on their AMP support. AMP will read and pass the strings passed by the frameworks (IAB TCF v1, TCF v2, TCF v2.2, the IAB US Privacy String and the IAB Global Privacy Platorm string) when received by CMPs/ad networks.</p> <h5 id="i-have-a-cmp-implemented-with-amp-but-for-tcf-v2-what-do-i-need-to-do-to-support-tcf-v2.2?">I have a CMP implemented with AMP but for TCF v2 what do I need to do to support TCF v2.2?</h5> <p>For AMP integration, the only thing you need to do is provide the value of <code>tcfPolicyVersion</code> during the client-side <code>postMessage</code>, and in case you also use <code>checkConsentHref</code> you need to provide it in the response, and you can also update it directly from the response too via the <code>tcfPolicyVersion</code> field in the response from your server, this will allow you to update consents in case you have not added the tcfPolicyVersion field before the transaction to TCF v2.2.</p> <h5 id="i-can't-see-feature-x-being-supported,-what-can-i-do?">I can't see feature X being supported, what can I do?</h5> <p>Join in on the discussion where we are discussing <a href="https://github.com/ampproject/amphtml/issues/13716#issuecomment-382474345">upcoming potential features</a>. Please chime in on the thread if something isn't supported yet.</p> <h2 id="related-resources">Related resources</h2> <ul> <li>Blog post: <a href="https://www.ampproject.org/latest/blog/new-functionality-to-help-manage-user-choice-in-amp-pages/">New functionality to help manage user choice in AMP pages</a></li> <li>Blog post: <a href="https://www.ampproject.org/latest/blog/dynamic-geo-personalization/">Dynamic geo-personalization</a></li> <li><a href="https://amp.dev/documentation/components/amp-geo"><code><amp-geo></code> documentation</a></li> <li><a href="https://support.google.com/dfp_premium/answer/7678538#amp-pages">DoubleClick/ AdSense documentation </a></li> <li><a href="https://github.com/ampproject/amphtml/issues/13716#issuecomment-382474345">New feature discussion for amp-consent</a></li> </ul> <h2 id="supported-consent-management-platforms">Supported Consent Management Platforms</h2> <ul> <li>AppConsent : <a href="https://sfbx.io/en/produits/">Website</a> - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/appconsent.md">Documentation</a></li> <li>ConsentManager : <a href="https://www.consentmanager.net/">Website</a> - <a href="https://help.consentmanager.net/books/cmp/page/using-the-cmp-with-amp-websites">Documentation</a></li> <li>Didomi : <a href="https://www.didomi.io/">Website</a> - <a href="https://developers.didomi.io/cmp/amp">Documentation</a></li> <li>Funding Choices : <a href="https://fundingchoices.google.com/start">Website</a> - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/googlefc.md">Documentation</a></li> <li>iubenda : <a href="https://www.iubenda.com/">Website</a> - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/iubenda.md">Documentation</a></li> <li>LiveRamp : <a href="https://liveramp.com/our-platform/preference-consent-management/">Website</a> - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/liveramp.md">Documentation</a></li> <li>Marfeel : <a href="https://www.marfeel.com/">Website</a> - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/marfeel.md">Documentation</a></li> <li>Ogury : <a href="https://www.ogury.com/">Website</a> - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/ogury.md">Documentation</a></li> <li>OneTrust: <a href="https://www.onetrust.com/">Website</a> - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/onetrust.md">Documentation</a></li> <li>opencmp : <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/opencmp.md">Documentation</a></li> <li>Pubtech : <a href="https://www.pubtech.ai/">Website</a> - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/pubtech.md">Documentation</a></li> <li>Quantcast : <a href="https://www.quantcast.com">Website</a> - <a href="https://help.quantcast.com/hc/en-us/categories/360002940873-Quantcast-Choice">Documentation</a></li> <li>Sirdata : <a href="http://www.sirdata.com/">Website</a> - <a href="https://cmp.sirdata.com/#/docs">Documentation</a></li> <li>SourcePoint : <a href="https://www.sourcepoint.com/">Website</a> - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/sourcepoint.md">Documentation</a></li> <li>UniConsent : <a href="http://www.uniconsent.com/">Website</a> - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/uniconsent.md">Documentation</a></li> <li> <p>Usercentrics : <a href="https://www.usercentrics.com/">Website</a> - <a href="https://github.com/ampproject/amphtml/blob/main/extensions/amp-consent/./cmps/usercentrics.md">Documentation</a></p> </li> <li> <p>Your Integrated platform here!</p> </li> </ul> </section> <section class="ap--help"> <div class="-li"> <span class="-ls">Bạn cần được trợ giúp thêm?</span> <p class="-lu">Bạn đã đọc tài liệu này hàng chục lần, nhưng nó không thật sự trả lời mọi thắc mắc của bạn? Có lẽ những người khác cũng cảm thấy như vậy: hãy liên hệ với họ trên Stack Overflow.</p> <a href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" class="-n"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">Truy cập Stack Overflow</span> </a> <div class="-la"></div> <span class="-ls">Bạn tìm thấy một lỗi hoặc cần bổ sung một tính năng?</span> <p class="-lu">Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.</p> <a href="https://github.com/ampproject/amphtml" rel="noopener" class="-n link-preview-1"> <svg class="ap-a-ico -i"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#external"/></svg> <span class="-r">Truy cập GitHub</span> </a> <div class="-la"></div> </div> </section> </div> </main> <amp-sidebar id="sidebar-left" class="ap--ampsidebar i-amphtml-layout-nodisplay" layout="nodisplay" side="left" hidden="hidden" i-amphtml-layout="nodisplay"> <nav class="ap--ampsidebar-toolbar" toolbar="(min-width: 768px)" toolbar-target="ap--sidebar-content"> <ul> <div class="ap-m-format-toggle"> <button class="ap-m-format-toggle-selected ap-m-format-toggle-link-websites"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-websites"/></svg> </span> <span>websites</span> <span class="ap-a-ico ap-m-format-toggle-angle"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/></svg> </span> </button> <div class="ap-m-format-toggle-formats"> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-stories" href="/vi/documentation/components/stories/amp-consent/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-stories"/></svg> </span> <span>stories</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-ads" href="/vi/documentation/components/ads/amp-consent/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-ads"/></svg> </span> <span>ads</span> </a> <a class="ap-m-format-toggle-link ap-m-format-toggle-link-email" href="/vi/documentation/components/email/amp-consent/"> <span class="ap-a-ico"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#amp-email"/></svg> </span> <span>email</span> </a> </div> </div> <div class="ap-o-sidebar-component"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">3</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-3d-gltf/">amp-3d-gltf</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-3q-player/">amp-3q-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">A</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-access-fewcents/">amp-access-fewcents</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-access-laterpay/">amp-access-laterpay</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-access-poool/">amp-access-poool</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-access-scroll/">amp-access-scroll</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-access/">amp-access</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-accordion/">amp-accordion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-action-macro/">amp-action-macro</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-ad-exit/">amp-ad-exit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-ad/">amp-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-addthis/">amp-addthis</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-analytics/">amp-analytics</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-anim/">amp-anim</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-animation/">amp-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-apester-media/">amp-apester-media</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-app-banner/">amp-app-banner</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-audio/">amp-audio</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-auto-ads/">amp-auto-ads</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-autocomplete/">amp-autocomplete</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">B</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-base-carousel/">amp-base-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-beopinion/">amp-beopinion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-bind/">amp-bind</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-bodymovin-animation/">amp-bodymovin-animation</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-brid-player/">amp-brid-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-brightcove/">amp-brightcove</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-byside-content/">amp-byside-content</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">C</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-call-tracking/">amp-call-tracking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-carousel/">amp-carousel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-connatix-player/">amp-connatix-player</a> </li> <li class="nav-item level-2 active" autoscroll> <a class="nav-link" href="/vi/documentation/components/websites/amp-consent/">amp-consent</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">D</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-dailymotion/">amp-dailymotion</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-date-countdown/">amp-date-countdown</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-date-display/">amp-date-display</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-date-picker/">amp-date-picker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-delight-player/">amp-delight-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-dynamic-css-classes/">amp-dynamic-css-classes</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">E</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-embedly-card/">amp-embedly-card</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-experiment/">amp-experiment</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">F</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-facebook-comments/">amp-facebook-comments</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-facebook-like/">amp-facebook-like</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-facebook-page/">amp-facebook-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-facebook/">amp-facebook</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-fit-text/">amp-fit-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-font/">amp-font</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-form/">amp-form</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-fx-collection/">amp-fx-collection</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-fx-flying-carpet/">amp-fx-flying-carpet</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">G</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-geo/">amp-geo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-gfycat/">amp-gfycat</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-gist/">amp-gist</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-google-document-embed/">amp-google-document-embed</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-google-read-aloud-player/">amp-google-read-aloud-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">H</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-hulu/">amp-hulu</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">I</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-iframe/">amp-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-iframely/">amp-iframely</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-ima-video/">amp-ima-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-image-lightbox/">amp-image-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-image-slider/">amp-image-slider</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-img/">amp-img</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-imgur/">amp-imgur</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-inline-gallery/">amp-inline-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-inputmask/">amp-inputmask</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-instagram/">amp-instagram</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-install-serviceworker/">amp-install-serviceworker</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-izlesene/">amp-izlesene</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">J</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-jwplayer/">amp-jwplayer</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">K</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-kaltura-player/">amp-kaltura-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">L</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-layout/">amp-layout</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-lightbox-gallery/">amp-lightbox-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-lightbox/">amp-lightbox</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-link-rewriter/">amp-link-rewriter</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-list/">amp-list</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-live-list/">amp-live-list</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">M</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-mathml/">amp-mathml</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-mega-menu/">amp-mega-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-megaphone/">amp-megaphone</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-minute-media-player/">amp-minute-media-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-mowplayer/">amp-mowplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-mustache/">amp-mustache</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">N</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-nested-menu/">amp-nested-menu</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-next-page/">amp-next-page</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-nexxtv-player/">amp-nexxtv-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">O</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-o2-player/">amp-o2-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-onetap-google/">amp-onetap-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-ooyala-player/">amp-ooyala-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-orientation-observer/">amp-orientation-observer</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">P</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-pan-zoom/">amp-pan-zoom</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-pinterest/">amp-pinterest</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-pixel/">amp-pixel</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-playbuzz/">amp-playbuzz</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-position-observer/">amp-position-observer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-powr-player/">amp-powr-player</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">R</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-reach-player/">amp-reach-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-recaptcha-input/">amp-recaptcha-input</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-reddit/">amp-reddit</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-render/">amp-render</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-riddle-quiz/">amp-riddle-quiz</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">S</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-script/">amp-script</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-selector/">amp-selector</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-sidebar/">amp-sidebar</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-skimlinks/">amp-skimlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-slikeplayer/">amp-slikeplayer</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-smartlinks/">amp-smartlinks</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-social-share/">amp-social-share</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-soundcloud/">amp-soundcloud</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-springboard-player/">amp-springboard-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-sticky-ad/">amp-sticky-ad</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-stream-gallery/">amp-stream-gallery</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-subscriptions-google/">amp-subscriptions-google</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-subscriptions/">amp-subscriptions</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">T</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-tiktok/">amp-tiktok</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-timeago/">amp-timeago</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-truncate-text/">amp-truncate-text</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-twitter/">amp-twitter</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">U</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-user-notification/">amp-user-notification</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">V</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-video-docking/">amp-video-docking</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-video-iframe/">amp-video-iframe</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-video/">amp-video</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-vimeo/">amp-vimeo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-vine/">amp-vine</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-viqeo-player/">amp-viqeo-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-vk/">amp-vk</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">W</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-web-push/">amp-web-push</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-wistia-player/">amp-wistia-player</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-wordpress-embed/">amp-wordpress-embed</a> </li> </ul> </li> <li class="nav-item level-1"> <ul class="nav-list level-2"> <li class="nav-link">Y</li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-yotpo/">amp-yotpo</a> </li> <li class="nav-item level-2 "> <a class="nav-link" href="/vi/documentation/components/websites/amp-youtube/">amp-youtube</a> </li> </ul> </li> </ul> </div> </div> </div> </ul> </nav> </amp-sidebar> <footer class="ap--footer"> <div class="-a"> <div class="-f"> <div class="ap-o-footer-hint">Dĩ nhiên, website này được tạo bằng AMP!</div> <div class="-l"> <h5 class="-c">Theo dõi chúng tôi</h5> <ul class="-h"> <li class="-p"> <a class="ap-a-ico -d" href="https://twitter.com/AMPhtml" rel="noopener" title="Twitter"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://www.youtube.com/channel/UCXPBsjgKKG2HqsKBhWA4uQw" rel="noopener" title="YouTube"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#youtube"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://blog.amp.dev/" rel="noopener"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#wordpress" title="WordPress"/></svg> </a> </li> <li class="-p"> <a class="ap-a-ico -d" href="https://github.com/ampproject" title="GitHub"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#github"/></svg> </a></li> <li class="-p"> <a class="ap-a-ico -d" href="https://stackoverflow.com/questions/tagged/amp-html" rel="noopener" title="Stackoverflow"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#stackoverflow"/></svg></a> </li> </ul> </div> </div> <div class="-v"> <div class="-m"> <h5 class="-g">Tổng quan</h5> <ul class="-y"> <li class="-b"><a href="/vi/about/websites/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Khung AMP</a></li> <li class="-b"><a href="/vi/about/use-cases/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trường hợp sử dụng</a></li> <li class="-b"><a href="/vi/success-stories/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Câu chuyện thành công</a></li> <li class="-b"><a href="/vi/about/how-amp-works/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Chức năng</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Tài liệu</h5> <ul class="-y"> <li class="-b"><a href="/vi/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Bắt đầu</a></li> <li class="-b"><a href="/vi/documentation/guides-and-tutorials/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Hướng dẫn và Tập luyện</a></li> <li class="-b"><a href="/vi/documentation/components/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Thành phần</a></li> <li class="-b"><a href="/vi/documentation/examples/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Ví dụ</a></li> <li class="-b"><a href="/vi/documentation/templates/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Khuôn mẫu Thiết kế</a></li> <li class="-b"><a href="/vi/documentation/tools/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Công cụ</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Cộng đồng</h5> <ul class="-y"> <li class="-b"><a href="/vi/support/faq/platform-and-vendor-partners/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Nền tảng và Đối tác Cung cấp</a></li> <li class="-b"><a href="/vi/documentation/guides-and-tutorials/contribute/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Đóng góp</a></li> <li class="-b"><a href="/vi/community/roadmap/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Lộ trình</a></li> </ul> <h5 class="-g">OpenJS Foundation</h5> <ul class="-y"> <li class="-b"><a class="-w" href="https://openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>The OpenJS Foundation</a></li> <li class="-b"><a class="-w" href="https://bylaws.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>OpenJS Foundation Bylaws</a></li> <li class="-b"><a class="-w" href="https://trademark-policy.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark Policy</a></li> <li class="-b"><a class="-w" href="https://trademark-list.openjsf.org" rel="noopener"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Trademark List</a></li> </ul> </div> <div class="-m"> <h5 class="-g">Sự kiện</h5> <ul class="-y"> <li class="-b"><a href="https://blog.amp.dev/2020/02/20/amp-conf-2020-return-to-nyc/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>Hội nghị AMP 2020</a></li> <li class="-b"><a href="/vi/events/amp-cs-2019/" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg></div>AMP Contributor Summit 2019</a></li> </ul> <h5 class="-g">Tài liệu Thương hiệu AMP</h5> <ul class="-y"> <li class="-b"><a href="/static/files/brand-material/AMP_Mini_Styleguide.pdf" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Hướng dẫn phong cách</a></li> <li class="-b"><a href="/static/files/brand-material/AMP_Logo_Rebrush.zip" class="-w"><div class="ap-a-ico -x"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#download"/></svg></div>Logo</a></li> </ul> </div> </div> <div class="-k"> <div class="-_"> <amp-img src="/static/img/logo-openjsf.svg" alt="Logo of the OpenJS Foundation" width="315" height="100" layout="responsive" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive"><i-amphtml-sizer slot="i-amphtml-svc" style="display:block;padding-top:31.746%"></i-amphtml-sizer></amp-img> </div> <ul class="-j"> <li class="-q"><a class="-z" href="https://terms-of-use.openjsf.org" rel="noopener">Terms of Use</a></li> <li class="-q"><a class="-z" href="https://privacy-policy.openjsf.org" rel="noopener">Chính sách Quyền Riêng tư</a></li> <li class="-q"><a class="-z" href="https://www.linuxfoundation.org/cookies" rel="noopener">Cookie Policy</a></li> </ul> </div> <div class="-te"> © <a href="https://openjsf.org">OpenJS Foundation</a> and AMP Project contributors. All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. <br><br> The services available at <a href="https://cdn.ampproject.org">cdn.ampproject.org</a> are provided by Google and the respective <a href="https://policies.google.com/privacy?hl=en">privacy policy</a> applies. </div> </div> </footer> <aside class="ap-o-translation-hint"> <p class="ap-o-translation-hint-wrapper">Sadly this page isn't translated yet, but will be shortly - check back soon!</p> </aside> <amp-analytics type="gtag" data-credentials="include" data-block-on-consent class="i-amphtml-layout-fixed i-amphtml-layout-size-defined" style="width:1px;height:1px;" i-amphtml-layout="fixed"> <script type="application/json">{"extraUrlParams":{"cd2":"${ampdocHost}"},"requests":{"CWV_EVENT":"${base}?v=1\u0026t=event\u0026tid=${gtag_id}\u0026cid=0\u0026ec=cwv","base":"https://google-analytics.com/collect/"},"triggers":{"banner":{"on":"click","selector":"#top-banner","vars":{"event_action":"click","event_category":"components","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"components","event_label":"breadcrumbs","event_name":"breadcrumbs"}},"cls":{"extraUrlParams":{"cls":"${cumulativeLayoutShift}"},"on":"visible","request":"CWV_EVENT"},"defaultPageview":{"on":"visible","request":"pageview","vars":{"title":"{{title}}"}},"fid":{"extraUrlParams":{"fid":"${firstInputDelay}"},"on":"visible","request":"CWV_EVENT"},"formatToggle":{"on":"click","selector":".ap-m-format-toggle-link","vars":{"event_action":"link","event_category":"components","event_label":"format-toggle","event_name":"format-toggle"}},"lcp":{"extraUrlParams":{"lcp":"${largestContentfulPaint}"},"on":"visible","request":"CWV_EVENT"},"navigation":{"on":"click","selector":".ap--header a, .ap-o-burger-menu-link","vars":{"event_action":"link","event_category":"components","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"components","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"components","event_label":"scroll","event_name":"scroll"}},"searchButton":{"on":"click","selector":"#searchTriggerOpen","vars":{"event_action":"open","event_category":"search","event_label":"search","event_name":"search"}},"sidebarLink":{"on":"click","selector":".ap-o-sidebar a","vars":{"event_action":"link","event_category":"components","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"components","event_label":"sidebar","event_name":"sidebar"}},"tocLink":{"on":"click","selector":".ap-o-toc a","vars":{"event_action":"link","event_category":"components","event_label":"toc","event_name":"toc"}},"tocToggle":{"on":"click","selector":".ap-o-toc label","vars":{"event_action":"toggle","event_category":"components","event_label":"toc","event_name":"toc"}}},"vars":{"config":{"G-TYM9BH1XCX":{"groups":"default"}},"gtag_id":"G-TYM9BH1XCX"}}</script> </amp-analytics><amp-geo layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"ISOCountryGroups":{"eu":["preset-eea"],"doubleOptIn":["de","at","no","gr","lu"]}}</script> </amp-geo> <amp-consent id="consent" class="-o i-amphtml-layout-nodisplay" layout="nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"> <script type="application/json">{"consentInstanceId":"consent","promptUI":"consent-popup","consentRequired":false,"geoOverride":{"eu":{"consentRequired":true}}}</script> <div id="consent-popup" class="consent-popup"> <button type="reset" class="-u" on="tap:consent.dismiss" role="button" tabindex="0" aria-label="Chấp thuận và đóng"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close"/></svg> </button> <p class="ap-o-consent-text"> We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our <a href="https://policies.google.com/technologies/cookies">use of cookies</a> and <a href="https://policies.google.com/privacy">privacy policy</a>. </p> <button on="tap:consent.accept" class="ap-a-btn" role="button" aria-label="Chấp nhận việc sử dụng cookie">Đã hiểu!</button> </div> </amp-consent> <amp-install-serviceworker src="/serviceworker.js" data-iframe-src="https://amp.dev/serviceworker.html" layout="nodisplay" class="i-amphtml-layout-nodisplay" hidden="hidden" i-amphtml-layout="nodisplay"></amp-install-serviceworker> <style amp-keyframes>@keyframes duepduep{0%{transform:translate(0)}49%{transform:translate(40px)}50%{transform:translate(-40px)}to{transform:translate(0)}}@keyframes moveSidebarToggleBackwards{0%{transform:translateX(calc(90vw - 50%))}to{transform:translateX(0)}}@keyframes moveSidebarToggleForwards{0%{transform:translateX(0)}to{transform:translateX(calc(90vw - 50%))}}</style></body></html>