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="AMP By Example provides hands-on samples and a playground for using AMP components."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:description" content="AMP By Example provides hands-on samples and a playground for using AMP components."><meta name="twitter:title" content="AMP Websites Examples"><meta name="twitter:creator" content="@ampproject"><meta name="twitter:site" content="@ampproject"><meta name="twitter:image" content="https://amp.dev/static/img/sharing/docs-example-600x314.png"><meta property="og:title" content="AMP Websites Examples"><meta property="og:url" content="https://amp.dev/vi/documentation/examples/"><meta property="og:image" content="https://amp.dev/static/img/sharing/docs-example-600x314.png"><meta property="og:image:width" content="600"><meta property="og:image:height" content="314"><meta name="supported-amp-formats" content="websites,stories,ads,email"><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 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><link rel="shortcut icon" href="/static/img/favicon.png"><link rel="canonical" href="https://amp.dev/vi/documentation/examples/"><link rel="alternate" hreflang="x-default" href="https://amp.dev/documentation/examples/"><title>AMP Websites Examples - amp.dev</title><script type="application/ld+json">{"@context":"http://schema.org","@type":"Webpage","url":"https://amp.dev/vi/documentation/examples/ ","name":"amp.dev","headline":"AMP Websites Examples","description":"AMP By Example provides hands-on samples and a playground for using AMP components.","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-example-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-default{max-width:100%}@media(min-width:768px){.ap-o-sidebar-default .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-default .nav{margin:15px 0 0;padding-bottom:15px}.ap-o-sidebar-default .nav-list{max-width:300px;list-style:none;padding:0;margin:0}.ap-o-sidebar-default .nav-list.level-1{margin:0 15px}.ap-o-sidebar-default .nav-list .nav-list{display:none;margin-bottom:20px}.ap-o-sidebar-default .nav-item{position:relative;margin:0;padding:0}.ap-o-sidebar-default .nav-item.level-1{border-bottom:1px solid rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item.level-1:last-child{border-bottom:none}.ap-o-sidebar-default .nav-item.level-1 .nav-link{padding:10px 25px 10px 20px;text-transform:uppercase;font-size:1.125rem;font-family:Poppins,system;font-weight:700;color:#000}.ap-o-sidebar-default .nav-item.level-1 .nav-icon,.ap-o-sidebar-default .nav-item.level-1 .nav-trigger{height:46px}.ap-o-sidebar-default .nav-item.level-1 .nav-icon .ap-a-ico{margin-top:16px}.ap-o-sidebar-default .nav-item.level-2 .nav-link{padding:7px 25px 8px 20px;text-transform:unset;line-height:1.6rem;font-weight:400;color:#48525c;font-family:Noto Sans,system;font-size:.875rem;line-height:1.4em}.ap-o-sidebar-default .nav-item.level-2 .nav-icon,.ap-o-sidebar-default .nav-item.level-2 .nav-trigger{height:33px}.ap-o-sidebar-default .nav-item.level-2 .nav-icon .ap-a-ico{width:10px;height:10px;margin-top:10px}.ap-o-sidebar-default .nav-item.level-3{margin-left:24px}.ap-o-sidebar-default .nav-item.level-3 .nav-link{padding:7px 25px 8px 20px;font-size:.8125rem}.ap-o-sidebar-default .nav-item.level-3.active{background:rgba(51,61,71,.1);border-radius:4px}.ap-o-sidebar-default .nav-item.active>.nav-link{font-weight:700;color:#005af0}.ap-o-sidebar-default .nav-item:hover>.nav-link{color:#005af0}.ap-o-sidebar-default .nav-item-tutorial-divider{border-bottom:1px dashed rgba(0,0,0,.15)}.ap-o-sidebar-default .nav-item-tutorial-divider:first-child,.ap-o-sidebar-default .nav-item-tutorial-divider:last-child{display:none}.ap-o-sidebar-default .nav-link{position:relative;display:block;padding:0;margin:0;color:rgba(0,0,0,.75);border:none;background-color:transparent}.ap-o-sidebar-default .nav-link-lastword{white-space:nowrap}.ap-o-sidebar-default .nav-icon,.ap-o-sidebar-default .nav-trigger{position:absolute;top:0;width:20px;padding:0;margin:0;background:none transparent;border:none;cursor:pointer}.ap-o-sidebar-default .nav-trigger{-webkit-appearance:none;z-index:1}.ap-o-sidebar-default .nav-trigger:checked~ul{display:block}.ap-o-sidebar-default .nav-trigger:checked+.nav-icon .ap-a-ico{transform:rotate(0)}.ap-o-sidebar-default .nav-trigger:focus{outline:1px dotted #212121;outline:5px auto -webkit-focus-ring-color}.ap-o-sidebar-default .nav-icon .ap-a-ico{width:12px;height:12px;transform:rotate(-90deg)}.ap-o-sidebar-default .nav-type-icon{display:inline-block;vertical-align:top;width:20px;height:20px;margin-left:6px}.ap-o-sidebar-default .nav span.nav-link+.nav-trigger{width:calc(100% + 15px)}.ap-m-tag{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;text-align:center;display:inline-block;min-width:80px;line-height:30px;padding:0 5px}.ap-m-tag:empty{min-width:26px;padding:4px 0}.ap-m-tag-websites{color:#fff;background:linear-gradient(225deg,#00dcc0,#005af0 75%)}.ap-m-tag-stories{color:#20202a;background:linear-gradient(225deg,#ec6600,#ffdc00 75%)}.ap-m-tag-ads{color:#fff;background:linear-gradient(225deg,#eb49e1,#5500d7 75%)}.ap-m-tag-email{color:#20202a;background:linear-gradient(225deg,#09a600,#e1eb64 75%)}.ap-m-tag-general{color:#fff;background-color:#005af0}.-fn.-rt{position:relative;overflow:hidden;margin:0 20px 2em 0;flex:1 0 85%;display:flex;flex-direction:column-reverse;justify-content:flex-end;box-shadow:0 15px 30px 0 rgba(0,0,0,.15);transition:transform .3s ease,box-shadow .3s ease}@media(min-width:575px){.-fn.-rt{margin:0 0 2em}}.-fn.-rt:hover{transform:translate3d(0,-2px,0);box-shadow:0 25px 60px 0 rgba(0,0,0,.1)}.-fn .-fr{width:100%;position:absolute;padding-bottom:41%;z-index:4;transform:translateZ(0);transition:transform .2s ease}.-fn .-fr:before{content:"";width:100%;height:100%;position:absolute;left:0;top:100%;background:#fff;transition:transform .2s ease}.-fn .-od{font-size:0;width:100%;position:absolute;right:0;top:100%;z-index:3;text-align:right}.-fn .-fi{position:relative;height:100%;background:#fff;z-index:1;transition:transform .2s ease}.-fn .-rn{overflow:hidden;position:relative;background-color:#fff}.-fn .-rs{position:relative;padding:20px;z-index:5}.-fn .-om{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:absolute;left:0;top:0;background:#20202a;background:linear-gradient(225deg,#20202a,#48525c 75%);z-index:2}.-fn .-om .ap-a-ico{width:5em;height:5em;fill:#fff}.-fn .-ro{position:relative;padding-bottom:41%}.-fn .-ro:before{content:"";position:absolute;left:-1px;bottom:0;width:calc(100% + 2px);height:150px;background:linear-gradient(0deg,rgba(0,0,0,.12),transparent);z-index:1;height:100%;background:linear-gradient(0deg,rgba(0,0,0,.07),rgba(0,0,0,.02))}.-fn .-ru{font-family:Poppins,system;font-weight:700;line-height:1.2em;color:#20202a;font-size:1rem;margin:0}.-fn .-fs{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.8125rem;color:#000;background-color:#fff;margin-top:auto;padding:1em 20px;text-align:left;border:none;border-top:1px solid #e2e5e6;cursor:pointer;transition:transform .2s ease}.-fn .-fs:focus+.-fo,.-fn .-fs:hover+.-fo{transform:translate3d(0,8px,0)}.-fn .-fs:focus~.-fi .-fr,.-fn .-fs:hover~.-fi .-fr{transform:translate3d(0,-100%,0)}.-fn .-fs:focus~.-fi .-fr:before,.-fn .-fs:hover~.-fi .-fr:before{transform:translateZ(0)}.-fn .-fo{display:flex;flex-direction:column;height:100%;width:100%;position:absolute;top:0;left:0;background-color:#fff;z-index:2;transform:translate3d(0,100%,0);transition:transform .2s ease}.-fn .-fo:focus,.-fn .-fo:hover{transform:translate3d(0,8px,0)}.-fn .-fo:focus+.-fi .-fr,.-fn .-fo:hover+.-fi .-fr{transform:translate3d(0,-100%,0)}.-fn .-fo:focus+.-fi .-fr:before,.-fn .-fo:hover+.-fi .-fr:before{transform:translateZ(0)}.-fn .-fo:focus-within{transform:translate3d(0,8px,0)}.-fn .-fo:focus-within+.-fi .-fr{transform:translate3d(0,-100%,0)}.-fn .-fo:focus-within+.-fi .-fr:before{transform:translateZ(0)}.-fn .-fu{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-weight:700;padding:10px 20px;color:#20202a}.-fn .-fa{padding:10px 20px 20px;margin-top:auto}.-fn .-fa .-n{padding-bottom:0}.-fn .-ff{display:flex;flex-wrap:wrap;flex-direction:column;align-items:flex-start;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;list-style:none;padding:0 20px;margin:0}.-fn .-fl{flex:0 0 auto;padding:0;margin:0 8px 0 0}.-fn .-fc{line-height:1.6rem;font-weight:400;color:#48525c;font-size:.875rem;font-family:Fira Mono,monospace;font-weight:500;display:inline;letter-spacing:.03em;padding:2px 4px;color:#000;background-color:#eee}.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-o-filter-bubbles-list{grid-column:7/19;display:flex;flex-wrap:wrap;padding:15px 0;margin:0 -10px}@media(min-width:550px){.ap-o-filter-bubbles-list{padding:30px 10px;margin:0;width:auto}}@media(min-width:768px){.ap-o-filter-bubbles-list{padding:30px 0}}.ap-m-table-component{margin-bottom:59px}.ap-m-table-component-container{background-color:#fff;margin-top:40px}.ap-m-table-component-container h4{margin:40px 0 18px}.ap-m-table-component-container h4:target:before{content:"";display:block;visibility:hidden;height:250px;margin-top:-250px}.ap-m-table-component-row{position:relative;display:flex;flex-direction:column;width:100%;grid-column-gap:10px}@media(min-width:768px){.ap-m-table-component-row{display:grid;grid-template-columns:2% 43% 55%;justify-content:start}.ap-m-table-component-row-components{display:grid;grid-template-columns:15% 45% 40%;justify-content:start}.ap-m-table-component-copy,.ap-m-table-component-header,.ap-m-table-component-info,.ap-m-table-component-link,.ap-m-table-component-name,.ap-m-table-component-row .-fr{align-self:center}}@media(min-width:1024px){.ap-m-table-component-row-components{grid-template-columns:8% 40% 52%}}.ap-m-table-component-link{display:block;border-bottom:1px solid rgba(0,0,0,.05)}.ap-m-table-component-link:hover{background:#ebebf0}.ap-m-table-component-link:first-of-type{border-top:1px solid rgba(0,0,0,.05)}.ap-m-table-component-tags{position:absolute;right:0;top:0;font-size:0;z-index:1}.ap-m-table-component-tags>.ap-m-tag:not(:last-of-type){margin-right:5px}@media(min-width:768px){.ap-m-table-component .ap-m-tag:empty{min-width:8px}.ap-m-table-component-tags{height:8px;align-self:center;position:relative}.ap-m-table-component-tags>.ap-m-tag{border-radius:50%;min-width:8px;margin-right:3px}}.ap-m-table-component-name{display:flex;justify-self:start;align-items:center;height:100%;padding-top:10px;background:0 0}.ap-m-table-component-name-title{margin:0;font-family:Fira Mono,monospace;font-weight:500;font-size:.875em;font-weight:700;color:#48525c}@media(min-width:768px){.ap-m-table-component-name{width:100%;padding-left:15px;padding-top:0}}.ap-m-table-component-info{padding:11px 0}.ap-m-table-component-info .ap-m-table-component-used-components code{color:#20202a}.ap-m-table-component-copy{font-size:.8125rem;display:block;margin:0;line-height:1.6em;font-weight:400;color:#48525c}.ap-m-table-component-components{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%}.ap-m-table-component-components .ap-m-table-component-link{display:flex;width:100%;border:none}@media(min-width:768px){.ap-m-table-component-components .ap-m-table-component-link{width:calc(50% - 30px);margin-right:30px}}.ap-m-table-component-components .ap-m-table-component-link:first-child .ap-m-table-component-row,.ap-m-table-component-components .ap-m-table-component-link:nth-child(2) .ap-m-table-component-row{border-top:1px solid rgba(0,0,0,.05)}@media(min-width:768px){.ap-m-table-component-components .ap-m-table-component-link .ap-m-tag:empty{min-width:8px}}.ap-m-table-component-components .ap-m-table-component-row{grid-template-columns:5% 85%;padding:10px 0;border-bottom:1px solid rgba(0,0,0,.05)}.-ra{max-width:100%}@media(min-width:768px){.-ra{grid-column:1/-1}}@media(min-width:1024px){.-ra{grid-column:4/22}}.-rf{width:100%;margin-bottom:30px}.-rf>h1,.-rf>h2,.-rf>h3,.-rf>h4,.-rf>h5,.-rf>h6{grid-column:1/14}.-rf .-n{grid-column:16/22}.-rl{grid-column:1/-1;overflow-x:scroll;-webkit-overflow-scrolling:touch;width:auto;display:flex;flex-wrap:nowrap;padding:20px 0;margin:0 -15px}@media(min-width:575px){.-rl{overflow:visible;width:100%;display:grid;grid-gap:30px;grid-template-columns:1fr;grid-template-columns:repeat(2,1fr);grid-template-rows:auto;padding:0;margin:0}}@media(min-width:768px){.-rl{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.-rl{grid-template-columns:repeat(3,1fr)}}@media(min-width:768px){.-rc,.-rh,.-rp{grid-template-columns:repeat(4,1fr)}}.-rc .-ru,.-rh .-ru,.-rp .-ru{font-size:1rem}.-fh{position:relative;display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;margin:0 -60px;padding:0 60px;background-color:#fafafc}@media(min-width:1024px){.-fh{flex-direction:row}}.-fp{display:flex;flex-direction:column;align-content:center;margin-bottom:40px}@media(min-width:1024px){.-fp{width:45%;max-width:330px;margin-bottom:0}}.-fp h2{margin-bottom:11px}.-fp p{margin:0 0 15px}.-fp .-s{border-bottom:none}@media(min-width:1024px){.-fp .-s{border-bottom:1px solid #ebebf0}}.-fd{width:80%;margin-top:20px}@media(min-width:1024px){.-fd{width:55%;margin-top:0}}.ap--card-grid{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-between;margin:0 -30px;padding:40px 30px;background-color:#fff}@media(min-width:600px){.ap--card-grid{flex-direction:row}}@media(min-width:768px){.ap--card-grid{flex-direction:column}}@media(min-width:930px){.ap--card-grid{padding:40px 90px 90px}}@media(min-width:1024px){.ap--card-grid{flex-direction:row}}.ap-o-card-grid-text{width:100%;padding-bottom:10px}.ap-o-card-grid-card{margin:18px 0;position:relative;width:100%;border-bottom:1px solid #e2e5e6}@media(min-width:600px){.ap-o-card-grid-card{max-width:48%}}@media(min-width:768px){.ap-o-card-grid-card{max-width:100%}}@media(min-width:1024px){.ap-o-card-grid-card{max-width:47%}}.ap-o-card-grid-card-icon{position:absolute;top:1.5rem;height:35px;width:35px;fill:#005af0}.ap-o-card-grid-card-headline{font-family:Poppins,system;font-weight:700;padding:10px 0 0 50px}.ap-o-card-grid-card .-n{padding:0 0 10px;width:100%}.ap-o-card-grid-card-tip{margin:0 0 0 5%;border:none}.ap-o-card-grid-card-tip .ap-m-tip{margin:25px 0 0}.ap-o-card-grid-card .ap-a-btn{margin-top:20px}.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)}#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)}}.ap--main>.-tf:first-child{padding-top:54px;padding-bottom:3rem}body{background-color:#fafafc}.-fv .-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){.-fv .-tf{padding:0 15px}.-fv .-tf>div,.-fv .-tf section{min-width:0}}@media(min-width:768px){.-fv .-tf{display:grid;grid-gap:30px;grid-template-columns:repeat(24,minmax(0,1fr));padding:0 30px;grid-gap:0}}@media(min-width:1024px){.-fv .-tf{padding:0 15px}}.-fv .-t,.-fv .ap--help{grid-column:1;position:relative;width:100%;padding-left:60px;padding-right:60px;background:#fff;box-shadow:0 25px 40px 0 rgba(0,0,0,.05)}@media(min-width:768px){.-fv .-t,.-fv .ap--help{grid-column:9/25}}@media(min-width:1024px){.-fv .-t,.-fv .ap--help{grid-column:6/25}}.-fv .-t .-uu,.-fv .ap--help .-uu{margin-left:-25px}@media(min-width:768px){.-fv .-t .-uu,.-fv .ap--help .-uu{margin-left:-30px}}.-fv .-uh{grid-column:auto;padding:0}@media(min-width:768px){.-fv .-uh{grid-column:1/8;grid-row:span 6;margin-right:20px}}@media(min-width:1024px){.-fv .-uh{grid-column:1/6}}@media(min-width:768px){.-fv .ap--toc{grid-column:9/25}.-fv .ap--toc~.-t{padding-top:0}}@media(min-width:768px)and (min-width:768px){.-fv .ap--toc~.-t{grid-column:9/25}}@media(min-width:768px)and (min-width:1024px){.-fv .ap--toc~.-t{grid-column:7/19}}@media(min-width:1024px){.-fv .ap--toc{grid-column:20/25;grid-row:span 3;padding-top:46px}.-fv .ap--toc~.-t{padding-top:62px}}@media(min-width:1024px)and (max-width:767px){.-fv .ap--toc~.-t{padding-left:15px;padding-right:15px}}.-fv .-uh+.-t,.-fv .ap--toc+.-t{padding-top:62px}@media(max-width:767px){.-fv .-uh+.-t,.-fv .ap--toc+.-t{padding-left:15px;padding-right:15px}}@media(min-width:1024px){.-fv .-uh+.-t:nth-of-type(2),.-fv .-uh+.-t:nth-of-type(3),.-fv .ap--toc+.-t:nth-of-type(2),.-fv .ap--toc+.-t:nth-of-type(3){grid-row:1}.-fv .ap--benefits--list{display:flex}}.-fv .ap--benefits--list .-sa{margin:20px 0}@media(min-width:768px){.-fv .ap--benefits--list .-sa{margin-right:40px}}.-fm{position:-webkit-sticky;position:sticky;z-index:2;top:90px;padding:20px 30px;margin:2em -30px;text-align:center;background:linear-gradient(180deg,#fafafc 0,#fafafc 80%,rgba(250,250,252,0))}.-fg{line-height:1.6rem;font-weight:400;color:#48525c}.-fg:not(:last-child):after{color:#e2e5e6;content:" |"}.-fv .-rl{flex-wrap:wrap;margin:0;padding:0}@media(max-width:559px){.-fv .-rl .-fy{margin:0 0 2em}}.-fv .-rl .-fy .-fb{align-items:flex-end;padding-bottom:10px;padding-top:30px;height:auto}.-fv .-rl .-fy .-fw{font-size:1.125em}.-fv .-rl .-fy .-rs{padding:1.25em}.-fv .-fx{position:relative;top:-180px}.-fv .-fx:target:before{height:0;margin:0}.-fv .-rf{margin-bottom:10px}.-fv .ap--card-grid{padding:0;margin:0}.-fv .ap--card-grid h2{margin-bottom:0;padding-bottom:0}.-fv .ap-o-card-grid-card .-n{padding:0}.-fv .ap-o-card-grid-card .-n:last-of-type{padding:0 0 10px}.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}</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="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="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="interaction" viewBox="0 0 64 64"> <path d="M18.722 63.74c-0.734-0.001-1.33-0.596-1.33-1.331 0-0.616 0.419-1.135 0.988-1.286l0.009-0.002 12.671-3.284c0.694-0.163 1.253-0.635 1.533-1.26l0.006-0.014c0.108-0.268 0.17-0.579 0.17-0.905 0-0.424-0.106-0.822-0.293-1.171l0.007 0.013c-0.65-1.018-1.584-1.804-2.69-2.256l-0.038-0.014-4.88 3.658c-0.218 0.163-0.494 0.261-0.792 0.261-0.735 0-1.331-0.596-1.331-1.331 0-0.392 0.17-0.745 0.439-0.988l13.027-11.579c0.406-0.433 0.655-1.017 0.655-1.659 0-0.67-0.271-1.276-0.71-1.715l0 0c-0.41-0.415-0.98-0.672-1.609-0.672-0.665 0-1.264 0.287-1.678 0.745l-0.002 0.002-7.88 7.519c-0.24 0.235-0.569 0.38-0.932 0.38-0.736 0-1.332-0.596-1.332-1.332 0-0.373 0.153-0.71 0.4-0.952l0-0c0.41-0.411 1.264-1.263 1.238-1.556 0 0-0.044-0.225-0.624-0.63-0.655-0.409-1.13-0.184-2.662 1.313-0.246 0.243-0.585 0.394-0.958 0.394-0.099 0-0.196-0.011-0.29-0.031l0.009 0.002c-0.448-0.094-0.807-0.403-0.97-0.811l-0.003-0.009c-0.048-0.196-0.075-0.421-0.075-0.652 0-0.523 0.14-1.014 0.384-1.437l-0.007 0.014c0.043-0.108 0.1-0.253 0.148-0.385-0.13-0.172-0.31-0.3-0.517-0.365l-0.007-0.002c-0.424-0.090-1.198 0.441-1.807 0.86-0.362 0.27-0.771 0.524-1.202 0.741l-0.047 0.022c-0.164 0.078-0.357 0.123-0.56 0.123-0.735 0-1.331-0.596-1.331-1.331 0-0.385 0.164-0.733 0.426-0.976l0.001-0.001c-0.017-0.075-0.042-0.14-0.075-0.201l0.002 0.004c-0.097-0.011-0.209-0.017-0.323-0.017-0.779 0-1.491 0.293-2.029 0.774l0.003-0.003-9.463 11.654c-0.246 0.322-0.629 0.527-1.061 0.527-0.735 0-1.331-0.596-1.331-1.331 0-0.336 0.125-0.643 0.33-0.877l-0.001 0.002 9.549-11.731c0.039-0.049 0.079-0.092 0.122-0.132l0.001-0.001c1.019-0.951 2.391-1.534 3.899-1.534 0.388 0 0.768 0.039 1.134 0.112l-0.037-0.006c0.687 0.211 1.241 0.679 1.56 1.29l0.007 0.014c0.616-0.4 1.369-0.638 2.177-0.638 0.199 0 0.394 0.014 0.585 0.042l-0.022-0.003c1.018 0.236 1.862 0.849 2.395 1.681l0.009 0.015c0.080 0.088 0.15 0.187 0.207 0.294l0.004 0.008c0.39-0.165 0.842-0.261 1.318-0.261 0.745 0 1.434 0.235 1.999 0.635l-0.011-0.007c0.495 0.333 0.916 0.734 1.26 1.194l0.010 0.013 4.534-4.327c0.895-0.926 2.148-1.501 3.535-1.501 1.364 0 2.599 0.556 3.489 1.454l0 0c0.92 0.919 1.489 2.19 1.489 3.593s-0.569 2.674-1.489 3.593v0l-6.615 5.876c1.407 0.745 2.552 1.82 3.359 3.126l0.021 0.037c0.383 0.705 0.608 1.543 0.608 2.434 0 0.695-0.137 1.357-0.385 1.963l0.013-0.035c-0.615 1.407-1.832 2.453-3.316 2.821l-0.034 0.007-12.643 3.278c-0.101 0.029-0.217 0.047-0.337 0.049h-0.001z"/> <path d="M42.808 44.744c-0.004 0-0.009 0-0.014 0-0.735 0-1.331-0.596-1.331-1.331 0-0.524 0.303-0.977 0.743-1.194l0.008-0.004c2.019-1.009 3.381-3.061 3.381-5.43 0-3.342-2.709-6.051-6.051-6.051-2.078 0-3.911 1.047-5.001 2.643l-0.013 0.021c-0.243 0.353-0.645 0.581-1.1 0.581-0.735 0-1.331-0.596-1.331-1.331 0-0.28 0.087-0.54 0.234-0.754l-0.003 0.005c1.59-2.31 4.22-3.806 7.2-3.806 4.812 0 8.713 3.901 8.713 8.713 0 3.403-1.951 6.35-4.795 7.785l-0.050 0.023c-0.169 0.083-0.367 0.132-0.577 0.132-0.004 0-0.008 0-0.013-0h0.001z"/> <path d="M41.858 51.95c-0 0-0 0-0.001 0-0.735 0-1.331-0.596-1.331-1.331 0-0.654 0.472-1.198 1.093-1.31l0.008-0.001c5.948-1.084 10.399-6.225 10.399-12.406 0-6.959-5.641-12.6-12.6-12.6-5.481 0-10.144 3.499-11.878 8.386l-0.027 0.088c-0.186 0.526-0.679 0.895-1.258 0.895-0.735 0-1.331-0.596-1.331-1.331 0-0.156 0.027-0.306 0.076-0.445l-0.003 0.009c2.133-6.026 7.782-10.265 14.421-10.265 8.429 0 15.262 6.833 15.262 15.262 0 7.488-5.392 13.716-12.505 15.013l-0.093 0.014c-0.069 0.014-0.148 0.021-0.23 0.021-0.001 0-0.001 0-0.002 0h0z"/> <path d="M58.677 10.907c-2.94 0-5.323-2.383-5.323-5.323s2.383-5.323 5.323-5.323c2.94 0 5.323 2.383 5.323 5.323v0c0 2.94-2.383 5.323-5.323 5.323v0zM58.677 2.922c-1.47 0-2.662 1.192-2.662 2.662s1.192 2.662 2.662 2.662c1.47 0 2.662-1.192 2.662-2.662v0c0-1.47-1.192-2.662-2.662-2.662v0z"/> <path d="M6.775 21.553c-2.94 0-5.323-2.383-5.323-5.323s2.383-5.323 5.323-5.323c2.94 0 5.323 2.383 5.323 5.323v0c0 2.94-2.383 5.323-5.323 5.323v0zM6.775 13.568c-1.47 0-2.662 1.192-2.662 2.662s1.192 2.662 2.662 2.662c1.47 0 2.662-1.192 2.662-2.662v0c0-1.47-1.192-2.662-2.662-2.662v0z"/> <path d="M32.060 10.907c-2.94 0-5.323-2.383-5.323-5.323s2.383-5.323 5.323-5.323c2.94 0 5.323 2.383 5.323 5.323v0c0 2.94-2.383 5.323-5.323 5.323v0zM32.060 2.922c-1.47 0-2.662 1.192-2.662 2.662s1.192 2.662 2.662 2.662c1.47 0 2.662-1.192 2.662-2.662v0c0-1.47-1.192-2.662-2.662-2.662v0z"/> <path d="M50.692 24.215c-0.735-0-1.331-0.596-1.331-1.331 0-0.367 0.149-0.7 0.39-0.941l7.595-7.595v-4.772c0-0.735 0.596-1.331 1.331-1.331s1.331 0.596 1.331 1.331v0 5.874l-8.375 8.375c-0.241 0.241-0.573 0.39-0.941 0.39v0z"/> <path d="M33.39 21.553c-0.619-0.001-1.139-0.426-1.286-1l-0.002-0.009-1.372-5.645v-5.323c0-0.735 0.596-1.331 1.331-1.331s1.331 0.596 1.331 1.331v0 5.16l1.291 5.165c0.025 0.097 0.040 0.208 0.040 0.322 0 0.62-0.424 1.141-0.998 1.289l-0.009 0.002c-0.097 0.025-0.209 0.040-0.325 0.040h-0z"/> <path d="M25.406 26.876c-0.001 0-0.002 0-0.003 0-0.402 0-0.762-0.18-1.004-0.464l-0.002-0.002-7.588-8.85h-6.042c-0.735 0-1.331-0.596-1.331-1.331s0.596-1.331 1.331-1.331v0h7.266l8.384 9.781c0.199 0.231 0.319 0.534 0.319 0.865 0 0.735-0.596 1.331-1.331 1.331 0 0-0 0-0 0v0z"/> </symbol><symbol id="bar-chart-money" viewBox="0 0 64 64"> <path d="M40.276 63.208h-16.31c-0.819 0-1.483-0.664-1.483-1.483v0-22.241c0-0 0-0 0-0 0-0.558 0.309-1.045 0.765-1.298l0.008-0.004 16.31-8.896c0.205-0.114 0.45-0.181 0.71-0.181 0.819 0 1.483 0.664 1.483 1.483 0 0 0 0 0 0v0 31.138c0 0.819-0.664 1.483-1.483 1.483v0zM25.448 60.243h13.345v-27.157l-13.345 7.279z"/> <path d="M62.517 63.208h-16.31c-0.819 0-1.483-0.664-1.483-1.483v0-35.798c0.001-0.413 0.171-0.787 0.445-1.055l0-0 16.31-16.098c0.267-0.262 0.634-0.424 1.038-0.424 0.818 0 1.481 0.662 1.483 1.479v51.897c0 0.819-0.664 1.483-1.483 1.483v0zM47.69 60.243h13.345v-46.867l-13.345 13.171z"/> <path d="M18.035 63.208h-16.31c-0.819 0-1.483-0.664-1.483-1.483v0-16.31c0-0 0-0 0-0 0-0.68 0.458-1.253 1.082-1.428l0.010-0.002 16.31-4.448c0.117-0.033 0.251-0.052 0.39-0.052 0.819 0 1.483 0.664 1.483 1.483 0 0 0 0 0 0v0 20.759c0 0.819-0.664 1.483-1.483 1.483v0zM3.207 60.243h13.345v-17.333l-13.345 3.639z"/> <path d="M16.997 34.794c-9.388-0.002-16.997-7.613-16.997-17.001 0-9.389 7.612-17.001 17.001-17.001s17.001 7.612 17.001 17.001c0 0.001 0 0.001 0 0.002v-0c-0.011 9.386-7.619 16.992-17.005 17h-0.001zM16.997 3.759c-0 0-0.001 0-0.001 0-7.752 0-14.036 6.284-14.036 14.036s6.284 14.036 14.036 14.036c7.752 0 14.036-6.284 14.036-14.036v0c-0.008-7.748-6.287-14.027-14.033-14.036h-0.001z"/> <path d="M18.785 13.195c0.413 0.282 0.681 0.75 0.681 1.281 0 0.027-0.001 0.054-0.002 0.081l0-0.004h2.546c-0.002-1.296-0.593-2.454-1.52-3.221l-0.007-0.006c-0.617-0.488-1.361-0.843-2.174-1.011l-0.034-0.006v-2.372h-2.546v2.372c-0.846 0.174-1.59 0.53-2.217 1.026l0.011-0.008c-0.936 0.77-1.528 1.929-1.528 3.226s0.592 2.455 1.521 3.22l0.007 0.006c0.909 0.741 2.082 1.19 3.36 1.19 0.070 0 0.14-0.001 0.209-0.004l-0.010 0c0.039-0.002 0.085-0.003 0.131-0.003 0.671 0 1.282 0.26 1.737 0.684l-0.002-0.001c0.414 0.313 0.679 0.804 0.679 1.358s-0.265 1.045-0.675 1.354l-0.004 0.003c-0.51 0.397-1.161 0.637-1.867 0.637s-1.356-0.24-1.874-0.642l0.007 0.005c-0.413-0.281-0.681-0.748-0.681-1.279 0-0.027 0.001-0.055 0.002-0.082l-0 0.004h-2.54c0.002 1.296 0.593 2.454 1.52 3.219l0.007 0.006c0.617 0.487 1.36 0.843 2.172 1.011l0.034 0.006v2.378h2.546v-2.372c0.847-0.174 1.591-0.53 2.219-1.026l-0.011 0.009c0.936-0.77 1.528-1.928 1.528-3.225s-0.592-2.455-1.52-3.219l-0.007-0.006c-0.908-0.741-2.079-1.19-3.356-1.19-0.071 0-0.142 0.001-0.213 0.004l0.010-0c-0.039 0.002-0.085 0.003-0.131 0.003-0.672 0-1.283-0.259-1.739-0.684l0.002 0.001c-0.413-0.281-0.681-0.749-0.681-1.28 0-0.027 0.001-0.054 0.002-0.080l-0 0.004c-0.001-0.023-0.002-0.050-0.002-0.077 0-0.531 0.268-0.999 0.676-1.277l0.005-0.003c0.511-0.398 1.162-0.638 1.869-0.638 0.703 0 1.35 0.237 1.867 0.636l-0.007-0.005z"/> </symbol><symbol id="content-modules" viewBox="0 0 64 64"> <path d="M25.427 29.091h-20.308c-2.424-0.002-4.389-1.967-4.391-4.391v-20.309c0.002-2.424 1.967-4.389 4.391-4.391h20.309c2.424 0.002 4.389 1.967 4.391 4.391v20.309c-0.002 2.424-1.967 4.389-4.391 4.391h-0zM5.119 2.909c-0.818 0.001-1.481 0.664-1.482 1.482v20.308c0.001 0.818 0.664 1.481 1.482 1.482h20.308c0.818-0.001 1.481-0.664 1.482-1.482v-20.308c-0.001-0.818-0.664-1.481-1.482-1.482h-0z"/> <path d="M2.182 26.182c-0.803-0-1.454-0.651-1.454-1.454 0-0.402 0.163-0.765 0.426-1.028l9.756-9.756 4.364 4.364 8.727-8.727 5.392 5.392c0.253 0.261 0.408 0.618 0.408 1.011 0 0.803-0.651 1.454-1.454 1.454-0.393 0-0.749-0.156-1.011-0.409l-3.335-3.335-8.727 8.727-4.364-4.364-7.699 7.699c-0.263 0.263-0.627 0.426-1.028 0.426v0z"/> <path d="M13.818 8c0 1.205-0.977 2.182-2.182 2.182s-2.182-0.977-2.182-2.182c0-1.205 0.977-2.182 2.182-2.182s2.182 0.977 2.182 2.182z"/> <path d="M54.545 10.182h-11.636c-0.803 0-1.455-0.651-1.455-1.454s0.651-1.454 1.455-1.454v0h11.636c0.803 0 1.455 0.651 1.455 1.454s-0.651 1.454-1.455 1.454v0z"/> <path d="M54.545 16h-11.636c-0.803 0-1.455-0.651-1.455-1.454s0.651-1.454 1.455-1.454v0h11.636c0.803 0 1.455 0.651 1.455 1.454s-0.651 1.454-1.455 1.454v0z"/> <path d="M54.545 21.818h-11.636c-0.803 0-1.455-0.651-1.455-1.454s0.651-1.454 1.455-1.454v0h11.636c0.803 0 1.455 0.651 1.455 1.454s-0.651 1.454-1.455 1.454v0z"/> <path d="M58.882 29.091h-20.308c-2.424-0.002-4.389-1.967-4.391-4.391v-20.309c0.002-2.424 1.967-4.389 4.391-4.391h20.309c2.424 0.002 4.389 1.967 4.391 4.391v20.309c-0.002 2.424-1.967 4.389-4.391 4.391h-0zM38.573 2.909c-0.818 0.001-1.481 0.664-1.482 1.482v20.308c0.001 0.818 0.664 1.481 1.482 1.482h20.308c0.818-0.001 1.481-0.664 1.482-1.482v-20.308c-0.001-0.818-0.664-1.481-1.482-1.482h-0z"/> <path d="M58.882 64h-53.763c-2.424-0.002-4.389-1.967-4.391-4.391v-23.218c0.002-2.424 1.967-4.389 4.391-4.391h53.763c2.424 0.002 4.389 1.967 4.391 4.391v23.218c-0.002 2.424-1.967 4.389-4.391 4.391h-0zM5.119 34.909c-0.818 0.001-1.481 0.664-1.482 1.482v23.218c0.001 0.818 0.664 1.481 1.482 1.482h53.763c0.818-0.001 1.481-0.664 1.482-1.482v-23.218c-0.001-0.818-0.664-1.481-1.482-1.482h-0z"/> <path d="M28.364 55.273c-0.803 0-1.454-0.651-1.454-1.455v0-11.539c0-0.803 0.651-1.454 1.454-1.454 0.298 0 0.576 0.090 0.807 0.244l-0.005-0.003 8.727 5.769c0.395 0.264 0.652 0.709 0.652 1.213s-0.257 0.949-0.647 1.21l-0.005 0.003-8.727 5.77c-0.226 0.151-0.503 0.241-0.801 0.241h-0zM29.818 44.985v6.128l4.636-3.065z"/> </symbol><symbol id="optimize-board" viewBox="0 0 34 35"> <g stroke-width="1.8" stroke="#005AF0" fill="none" fill-rule="evenodd" stroke-linejoin="round"><path d="M1 5h32.314v20.057H1z"/><path d="M3.279 28.557h28.553M17.2 1.8v2.4" fill="#FFF" stroke-linecap="round"/> <g fill="none" stroke-linecap="round"><path d="M6.061 25.439v2.122M29.461 25.439v2.122"/></g> <g fill="none" stroke-linecap="round"><path d="M5.535 32.194l1.213-3.487M29.748 32.194l-1.213-3.487"/></g> </g> </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="code" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M36 12l-11.68 38.88 3.68 1.12 11.68-38.88-3.68-1.12zM17.040 16l-17.040 16 1.52 1.36 15.52 14.64 2.64-2.8-14-13.2 14.080-13.2-2.72-2.8zM46.96 16l-2.64 2.8 14 13.2-14.080 13.12 2.64 2.8 15.52-14.56 1.6-1.36-1.52-1.44-15.52-14.56z"/></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="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/examples/" role="listitem">English</a> <a class="-tw" href="/de/documentation/examples/" role="listitem">Deutsch</a> <a class="-tw" href="/fr/documentation/examples/" role="listitem">Français</a> <a class="-tw" href="/ar/documentation/examples/" role="listitem">العربية</a> <a class="-tw" href="/es/documentation/examples/" role="listitem">Español</a> <a class="-tw" href="/it/documentation/examples/" role="listitem">Italiano</a> <a class="-tw" href="/id/documentation/examples/" role="listitem">Indonesia</a> <a class="-tw" href="/ja/documentation/examples/" role="listitem">日本語</a> <a class="-tw" href="/ko/documentation/examples/" role="listitem">한국어</a> <a class="-tw" href="/pt_br/documentation/examples/" role="listitem">Português</a> <a class="-tw" href="/ru/documentation/examples/" role="listitem">Русский</a> <a class="-tw" href="/tr/documentation/examples/" role="listitem">Türkçe</a> <a class="-tw" href="/zh_cn/documentation/examples/" role="listitem">中文</a> <a class="-tw" href="/pl/documentation/examples/" 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><main class="ap--main -fv"> <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="-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/examples/">Ví dụ</a> </nav> <h1>AMP Websites Examples</h1> <section class="ap--card-grid"> <h2 class="ap-o-card-grid-text">Featured examples</h2> <div class="ap-o-card-grid-card"> <div class="ap-a-ico ap-o-card-grid-card-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#code"/></svg> </div> <h4 class="ap-o-card-grid-card-headline">Components</h4> <p class="ap-o-card-grid-card-copy">Create every content, layout and feature on your website with an AMP component.</p> <a href="/vi/documentation/examples/components/amp-autocomplete/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">amp-autocomplete</span> </a> <a href="/vi/documentation/examples/components/amp-bind/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">amp-bind</span> </a> <a href="/vi/documentation/examples/components/amp-carousel/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">amp-carousel</span> </a> <a href="/vi/documentation/examples/components/amp-form/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">amp-form</span> </a> </div> <div class="ap-o-card-grid-card"> <div class="ap-a-ico ap-o-card-grid-card-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#optimize-board"/></svg> </div> <h4 class="ap-o-card-grid-card-headline">Design & Layout</h4> <p class="ap-o-card-grid-card-copy">Examples for modern responsive and modern web pages:</p> <a href="/vi/documentation/examples/style-layout/tab_panels_with_amp-selector/preview/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Tab Panels with amp-selector</span> </a> <a href="/vi/documentation/examples/visual-effects/scroll_to_top/preview/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Scroll to top</span> </a> <a href="/vi/documentation/examples/visual-effects/animated_snackbar/preview/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Animated Snackbar</span> </a> <a href="/vi/documentation/examples/style-layout/how_to_support_images_with_unknown_dimensions/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">How to support Images with unknown Dimensions</span> </a> </div> <div class="ap-o-card-grid-card"> <div class="ap-a-ico ap-o-card-grid-card-icon"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#content-modules"/></svg> </div> <h4 class="ap-o-card-grid-card-headline">Advanced Interactivity</h4> <p class="ap-o-card-grid-card-copy">Build on these user first web experiences, immersive stories, e-commerce systems and dynamic email examples.</p> <a href="/vi/documentation/examples/interactivity-dynamic-content/favorite_button/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Favorite Button</span> </a> <a href="/vi/documentation/examples/interactivity-dynamic-content/multi_page_flow/preview/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Multi Page Flow</span> </a> <a href="/vi/documentation/examples/multimedia-animations/advanced_video_docking/preview/" class="-n"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Advanced Video Docking</span> </a> </div> </section> <section class="-fh"> <div class="-fp"> <h2>Sân thực hành AMP</h2> <p>Thử trải nghiệm với Sân thực hành AMP. Hãy thử trực tiếp các ý tưởng của bạn trong trình duyệt để nhận phản hồi tức thì.</p> <a class="-n -s" href="https://playground.amp.dev/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Mở trong Sân thực hành AMP</span> </a> </div> <div class="-fd"> <amp-img alt="Playground Teaser image" src="/static/img/playground-teaser@3x.png" layout="responsive" width="1668" height="1236" srcset="/static/img/playground-teaser@3x.png 1600w, /static/img/playground-teaser@2x.png 1100w, /static/img/playground-teaser.png 500w" 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:74.1007%"></i-amphtml-sizer> </amp-img> </div> </section> <section id="filter" class="ap-m-table-component-container"> <h2>Lọc theo danh mục</h2> <div class="ap-o-filter-bubbles-list"> <a class="ap-a-pill filtered" href="/vi/documentation/examples/#filter" name="all"> Tất cả </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=introduction#filter" name="introduction"> introduction </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=components#filter" name="components"> components </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=guides#filter" name="guides"> guides </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=advertising-analytics#filter" name="advertising-analytics"> advertising-analytics </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=e-commerce#filter" name="thương mại điện tử"> thương mại điện tử </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=interactivity-dynamic-content#filter" name="interactivity-dynamic-content"> interactivity-dynamic-content </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=multimedia-animations#filter" name="multimedia-animations"> multimedia-animations </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=news-publishing#filter" name="news-publishing"> news-publishing </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=personalization#filter" name="personalization"> personalization </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=style-layout#filter" name="style-layout"> style-layout </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=user-consent#filter" name="user-consent"> user-consent </a> <a class="ap-a-pill " href="/vi/documentation/examples/?category=visual-effects#filter" name="visual-effects"> visual-effects </a> </div> <h4 id="introduction">introduction</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> <div class="-rt -fn" data-category="0-introduction" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != '0-introduction'" i-amphtml-binding> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/introduction/hello_world/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/hello_world.jpg" layout="fill" width="550" height="225" alt="Hello World" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Hello World</h4> </div> </div> </a> </div> </div> </div> <div class="ap-m-table-component"> <a class="ap-m-table-component-link" href="/vi/documentation/examples/introduction/amphtml_ads_hello_world/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-ads ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Hello World</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <p> </p> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/introduction/hello_world_email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Hello World Email</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-carousel</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/introduction/stories_in_amp/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Stories in AMP - Hello World</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-video</code> </div> </div> </div> </a> </div> <h4 id="components">components</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> </div> </div> <div class="ap-m-table-component-components"> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-3d-gltf/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-3d-gltf</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-access-laterpay/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-access-laterpay</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-access/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-access</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-accordion/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-accordion</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-ad/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-ad</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-addthis/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-addthis</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-analytics/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-analytics</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-anim.email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-anim</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-anim/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-anim</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-app-banner/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-app-banner</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-audio/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-audio</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-autocomplete-email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-autocomplete-email</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-autocomplete/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-autocomplete</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-bind-macro.email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-bind-macro</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-bind-macro/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-bind-macro</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-bind-recaptcha/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-bind-recaptcha</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-bind.email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-bind</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-bind/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-bind</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-bodymovin-animation/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-bodymovin-animation</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-brid-player/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-brid-player</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-brightcove/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-brightcove</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-call-tracking/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-call-tracking</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-carousel.email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-carousel</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-carousel/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-carousel</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-dailymotion/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-dailymotion</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-date-countdown/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-date-countdown</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-date-display/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-date-display</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-date-picker/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-date-picker</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-dynamic-css-classes/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-dynamic-css-classes</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-experiment/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-experiment</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-facebook-comments/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-facebook-comments</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-facebook-like/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-facebook-like</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-facebook-page/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-facebook-page</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-facebook/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-facebook</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-fit-text/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-fit-text</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-font/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-font</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-form/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-form</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-fx-collection/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-fx-collection</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-fx-flying-carpet/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-fx-flying-carpet</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-geo/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-geo</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-gfycat/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-gfycat</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-gist/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-gist</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-hulu/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-hulu</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-iframe/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-iframe</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-ima-video/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-ima-video</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-image-lightbox.email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-image-lightbox</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-image-lightbox/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-image-lightbox</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-image-slider/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-image-slider</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-img/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-img</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-inputmask/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-inputmask</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-instagram/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-instagram</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-install-serviceworker/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-install-serviceworker</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-jwplayer/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-jwplayer</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-kaltura-player/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-kaltura-player</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-lightbox-gallery/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-lightbox-gallery</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-lightbox.email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-lightbox</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-lightbox/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-lightbox</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-list.email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-list</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-list/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-list</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-live-list/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-live-list</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-mustache.email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-mustache</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-mustache/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-mustache</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-next-page/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-next-page</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-o2-player/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-o2-player</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-pinterest/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-pinterest</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-pixel/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-pixel</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-reach-player/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-reach-player</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-recaptcha-input/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-recaptcha-input</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-reddit/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-reddit</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-render/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-render</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-script/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-script</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-selector/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-selector</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-sidebar/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-sidebar</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-social-share/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-social-share</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-soundcloud/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-soundcloud</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-springboard-player/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-springboard-player</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-sticky-ad/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-sticky-ad</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-story-360/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-story-360</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-story-interactive-poll/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Interactive polls with results</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-story-interactive-quiz/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Interactive quizzes with results</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-story-shopping/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-story-shopping</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-timeago.email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-timeago</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-timeago/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-timeago</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-twitter/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-twitter</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-user-notification/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-user-notification</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-video-iframe/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-video-iframe</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-video/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-video</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-vimeo/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-vimeo</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-vine/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-vine</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-web-push/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-web-push</span> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/components/amp-youtube/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">amp-youtube</span> </div> </div> </a> </div> <h4 id="guides">guides</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> <div class="-rt -fn" data-category="2-guides" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != '2-guides'" i-amphtml-binding> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/guides/internationalization/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/internationalization.jpg" layout="fill" width="550" height="225" alt="Internationalization" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Internationalization</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="2-guides" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != '2-guides'" i-amphtml-binding> <div class="-fs"> <strong>1 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-iframe/" class="-fc">amp-iframe</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/guides/using_the_amp_url_api/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/guides/using_the_amp_url_api/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/usingthe_amp_url_api.jpg" layout="fill" width="550" height="225" alt="Using the AMP URL API" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Using the AMP URL API</h4> </div> </div> </a> </div> </div> </div> <div class="ap-m-table-component"> <a class="ap-m-table-component-link" href="/vi/documentation/examples/guides/using_the_google_amp_cache/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Using the Google AMP Cache</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <p> </p> </div> </div> </div> </a> </div> <h4 id="advertising-analytics">advertising-analytics</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> <div class="-rt -fn" data-category="advertising-analytics" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'advertising-analytics'" i-amphtml-binding> <div class="-fs"> <strong>1 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-analytics/" class="-fc">amp-analytics</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/advertising-analytics/joining_analytics_sessions/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/advertising-analytics/joining_analytics_sessions/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/joining_analytics_sessions.jpg" layout="fill" width="550" height="225" alt="Joining Analytics Sessions" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Joining Analytics Sessions</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="advertising-analytics" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'advertising-analytics'" i-amphtml-binding> <div class="-fs"> <strong>1 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-analytics/" class="-fc">amp-analytics</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/advertising-analytics/tracking_core_web_vitals/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/advertising-analytics/tracking_core_web_vitals/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/core-web-vitals.png" layout="fill" width="550" height="225" alt="Tracking Core Web Vitals" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Tracking Core Web Vitals</h4> </div> </div> </a> </div> </div> </div> <div class="ap-m-table-component"> <a class="ap-m-table-component-link" href="/vi/documentation/examples/advertising-analytics/amphtml_ads_vs_non_amp_ads/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">AMP Ads vs non-AMP Ads</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <p> </p> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/advertising-analytics/doubleclick_amp_story_ads/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">DoubleClick AMP Story Ads</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-video</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/advertising-analytics/publisher_served_amp_story_ads/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Publisher Served AMP Story Ads</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-mustache</code> <code>amp-video</code> </div> </div> </div> </a> </div> <h4 id="e-commerce">thương mại điện tử</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> <div class="-rt -fn" data-category="e-commerce" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'e-commerce'" i-amphtml-binding> <div class="-fs"> <strong>5 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-iframe/" class="-fc">amp-iframe</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-carousel/" class="-fc">amp-carousel</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/e-commerce/amp_for_e-commerce_getting_started/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/e-commerce/amp_for_e-commerce_getting_started/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/amp_e-commerce_getting_started.jpg" layout="fill" width="550" height="225" alt="AMP for E-Commerce Getting Started" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">AMP for E-Commerce Getting Started</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="e-commerce" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'e-commerce'" i-amphtml-binding> <div class="-fs"> <strong>6 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-access/" class="-fc">amp-access</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-analytics/" class="-fc">amp-analytics</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/e-commerce/checkout_flow/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/e-commerce/checkout_flow/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/checkout_flow.jpg" layout="fill" width="550" height="225" alt="Checkout Flow" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Checkout Flow</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="e-commerce" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'e-commerce'" i-amphtml-binding> <div class="-fs"> <strong>7 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-date-picker/" class="-fc">amp-date-picker</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-lightbox-gallery/" class="-fc">amp-lightbox-gallery</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-fit-text/" class="-fc">amp-fit-text</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/e-commerce/hotel/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/e-commerce/hotel/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/hotel.jpg" layout="fill" width="550" height="225" alt="Hotel" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Hotel</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="e-commerce" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'e-commerce'" i-amphtml-binding> <div class="-fs"> <strong>9 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-carousel/" class="-fc">amp-carousel</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-accordion/" class="-fc">amp-accordion</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-social-share/" class="-fc">amp-social-share</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-iframe/" class="-fc">amp-iframe</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-fit-text/" class="-fc">amp-fit-text</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-analytics/" class="-fc">amp-analytics</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/e-commerce/housing/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/e-commerce/housing/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/housing.jpg" layout="fill" width="550" height="225" alt="Housing" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Housing</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="e-commerce" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'e-commerce'" i-amphtml-binding> <div class="-fs"> <strong>1 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-iframe/" class="-fc">amp-iframe</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/e-commerce/payments_in_amp/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/e-commerce/payments_in_amp/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/payments_in_amp.jpg" layout="fill" width="550" height="225" alt="Payments in AMP" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Payments in AMP</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="e-commerce" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'e-commerce'" i-amphtml-binding> <div class="-fs"> <strong>10 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-carousel/" class="-fc">amp-carousel</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-analytics/" class="-fc">amp-analytics</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-fit-text/" class="-fc">amp-fit-text</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-sidebar/" class="-fc">amp-sidebar</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-lightbox/" class="-fc">amp-lightbox</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-selector/" class="-fc">amp-selector</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/e-commerce/product_browse_page/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/e-commerce/product_browse_page/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/product_browse_page.jpg" layout="fill" width="550" height="225" alt="Product Browse Page" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Product Browse Page</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="e-commerce" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'e-commerce'" i-amphtml-binding> <div class="-fs"> <strong>12 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-carousel/" class="-fc">amp-carousel</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-social-share/" class="-fc">amp-social-share</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-lightbox/" class="-fc">amp-lightbox</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-image-lightbox/" class="-fc">amp-image-lightbox</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-youtube/" class="-fc">amp-youtube</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-sidebar/" class="-fc">amp-sidebar</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-selector/" class="-fc">amp-selector</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-analytics/" class="-fc">amp-analytics</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/e-commerce/product_page/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/e-commerce/product_page/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/product_page.jpg" layout="fill" width="550" height="225" alt="Product Page" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Product Page</h4> </div> </div> </a> </div> </div> </div> <div class="ap-m-table-component"> <a class="ap-m-table-component-link" href="/vi/documentation/examples/e-commerce/shopping_cart/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Shopping Cart</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-list</code> <code>amp-mustache</code> <code>amp-form</code> <code>amp-bind</code> </div> </div> </div> </a> </div> <h4 id="interactivity-dynamic-content">interactivity-dynamic-content</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>3 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/client-side_filtering/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/client-side_filtering/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/client-side_filtering.jpg" layout="fill" width="550" height="225" alt="Client-side filtering" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Client-side filtering</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-autocomplete/" class="-fc">amp-autocomplete</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/combobox/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/combobox/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/combobox.jpg" layout="fill" width="550" height="225" alt="ComboBox" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">ComboBox</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>4 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-access/" class="-fc">amp-access</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/comment_section/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/comment_section/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/comment_section.jpg" layout="fill" width="550" height="225" alt="Comment Section" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Comment Section</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-iframe/" class="-fc">amp-iframe</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/copy_button/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/copy_button/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/copy_button.jpg" layout="fill" width="550" height="225" alt="Copy Button" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Copy Button</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>1 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/dynamic_content_after_user-interaction/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/dynamic_content_after_user-interaction/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/dynamic_content_after_user-interaction.jpg" layout="fill" width="550" height="225" alt="Dynamic Content After User-Interaction" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Dynamic Content After User-Interaction</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>4 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/favorite_button/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/favorite_button/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/favorite_button.jpg" layout="fill" width="550" height="225" alt="Favorite Button" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Favorite Button</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>4 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/linked_dropdowns/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/linked_dropdowns/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/linked_dropdowns.jpg" layout="fill" width="550" height="225" alt="Linked Dropdowns" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Linked Dropdowns</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/mixing_dynamic_and_cached_data/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/mixing_dynamic_and_cached_data/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/mixing_dynamic_and_cached_data.jpg" layout="fill" width="550" height="225" alt="Mixing Dynamic and Cached Data" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Mixing Dynamic and Cached Data</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>3 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-selector/" class="-fc">amp-selector</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/multi_page_flow/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/multi_page_flow/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/multi_page_flow.jpg" layout="fill" width="550" height="225" alt="Multi Page Flow" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Multi Page Flow</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>3 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/paged_list/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/paged_list/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/paged_list.jpg" layout="fill" width="550" height="225" alt="Paged List" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Paged List</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/poll/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/poll/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/poll.jpg" layout="fill" width="550" height="225" alt="Poll" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Poll</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>5 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-pan-zoom/" class="-fc">amp-pan-zoom</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-selector/" class="-fc">amp-selector</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/seatmap/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/seatmap/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/seatmap.jpg" layout="fill" width="550" height="225" alt="SeatMap" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">SeatMap</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>4 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/show_more_button/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/show_more_button/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/show_more_button.jpg" layout="fill" width="550" height="225" alt="Show More Button" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Show More Button</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-form/" class="-fc">amp-form</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/star_rating/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/star_rating/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/star_rating.jpg" layout="fill" width="550" height="225" alt="Star Rating" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Star Rating</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="interactivity-dynamic-content" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'interactivity-dynamic-content'" i-amphtml-binding> <div class="-fs"> <strong>1 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/interactivity-dynamic-content/tic_tac_toe/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/interactivity-dynamic-content/tic_tac_toe/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/tictactoe.png" layout="fill" width="550" height="225" alt="Tic-Tac-Toe" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Tic-Tac-Toe</h4> </div> </div> </a> </div> </div> </div> <div class="ap-m-table-component"> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/advanced_server_request/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Advanced Server Request</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-list</code> <code>amp-form</code> <code>amp-mustache</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/article_bookmark_email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Article Bookmark Email</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-form</code> <code>amp-mustache</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/conditional_state.email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Conditional State</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-bind</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/conditional_state/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Conditional State</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-bind</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/conference_survey_email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Conference Survey Email</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-form</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/currency_conversion/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Currency Conversion</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-bind</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/dynamic_accordion/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Dynamic Accordion</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-accordion</code> <code>amp-bind</code> <code>amp-list</code> <code>amp-mustache</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/dynamically_updating_items_in_a_feed/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Dynamically updating items in a feed</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-list</code> <code>amp-form</code> <code>amp-mustache</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/restrict_duplicate_selection.email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Restrict Duplicate Selection</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-bind</code> <code>amp-list</code> <code>amp-selector</code> <code>amp-mustache</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/restrict_duplicate_selection/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Restrict Duplicate Selection</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-bind</code> <code>amp-list</code> <code>amp-selector</code> <code>amp-mustache</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/seatmap_multiple_selection/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">SeatMap Multiple Selection</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-pan-zoom</code> <code>amp-bind</code> <code>amp-list</code> <code>amp-mustache</code> <code>amp-selector</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/slides_ad/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-ads ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Slides Ad</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-carousel</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/stack_with_bind_ad/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-ads ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Stack With Bind Ad</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <p> </p> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/interactivity-dynamic-content/subscription_settings/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Subscription Settings</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-list</code> <code>amp-mustache</code> <code>amp-form</code> <code>amp-bind</code> </div> </div> </div> </a> </div> <h4 id="multimedia-animations">multimedia-animations</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> <div class="-rt -fn" data-category="multimedia-animations" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'multimedia-animations'" i-amphtml-binding> <div class="-fs"> <strong>3 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-video/" class="-fc">amp-video</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-video-docking/" class="-fc">amp-video-docking</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-animation/" class="-fc">amp-animation</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/multimedia-animations/advanced_video_docking/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/multimedia-animations/advanced_video_docking/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/advanced_video_docking.jpg" layout="fill" width="550" height="225" alt="Advanced Video Docking" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Advanced Video Docking</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="multimedia-animations" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'multimedia-animations'" i-amphtml-binding> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/multimedia-animations/animated_hamburger_menu/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/animated-hamburger-menu.jpg" layout="fill" width="550" height="225" alt="Animated hamburger menu" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Animated hamburger menu</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="multimedia-animations" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'multimedia-animations'" i-amphtml-binding> <div class="-fs"> <strong>1 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-video/" class="-fc">amp-video</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/multimedia-animations/click-to-play_overlay_for_amp-video/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/multimedia-animations/click-to-play_overlay_for_amp-video/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/click-to-play_overlay_for_amp-video.jpg" layout="fill" width="550" height="225" alt="Click-to-play overlay for amp-video" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Click-to-play overlay for amp-video</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="multimedia-animations" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'multimedia-animations'" i-amphtml-binding> <div class="-fs"> <strong>5 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-carousel/" class="-fc">amp-carousel</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-fit-text/" class="-fc">amp-fit-text</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-selector/" class="-fc">amp-selector</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-lightbox-gallery/" class="-fc">amp-lightbox-gallery</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/image_galleries_with_amp-carousel.jpg" layout="fill" width="550" height="225" alt="Image Galleries with amp-carousel" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Image Galleries with amp-carousel</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="multimedia-animations" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'multimedia-animations'" i-amphtml-binding> <div class="-fs"> <strong>10 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-instagram/" class="-fc">amp-instagram</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-vine/" class="-fc">amp-vine</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-youtube/" class="-fc">amp-youtube</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-vimeo/" class="-fc">amp-vimeo</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-dailymotion/" class="-fc">amp-dailymotion</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-twitter/" class="-fc">amp-twitter</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-facebook/" class="-fc">amp-facebook</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-brightcove/" class="-fc">amp-brightcove</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-iframe/" class="-fc">amp-iframe</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-video/" class="-fc">amp-video</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/multimedia-animations/integrating_videos_in_amp_an_overview/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/multimedia-animations/integrating_videos_in_amp_an_overview/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/integrating_videos_in_amp_an_overview.jpg" layout="fill" width="550" height="225" alt="Integrating Videos in AMP an Overview" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Integrating Videos in AMP an Overview</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="multimedia-animations" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'multimedia-animations'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-video/" class="-fc">amp-video</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-audio/" class="-fc">amp-audio</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/multimedia-animations/rich_media_notifications/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/multimedia-animations/rich_media_notifications/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/rich_media_notifications.jpg" layout="fill" width="550" height="225" alt="Rich Media Notifications" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Rich Media Notifications</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="multimedia-animations" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'multimedia-animations'" i-amphtml-binding> <div class="-fs"> <strong>14 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-carousel/" class="-fc">amp-carousel</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-instagram/" class="-fc">amp-instagram</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-vine/" class="-fc">amp-vine</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-youtube/" class="-fc">amp-youtube</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-vimeo/" class="-fc">amp-vimeo</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-dailymotion/" class="-fc">amp-dailymotion</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-twitter/" class="-fc">amp-twitter</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-facebook/" class="-fc">amp-facebook</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-brightcove/" class="-fc">amp-brightcove</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-brid-player/" class="-fc">amp-brid-player</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-reach-player/" class="-fc">amp-reach-player</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-springboard-player/" class="-fc">amp-springboard-player</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-iframe/" class="-fc">amp-iframe</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-video/" class="-fc">amp-video</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/multimedia-animations/video_carousels_with_amp-carousel/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/multimedia-animations/video_carousels_with_amp-carousel/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/video_carousels_with_amp-carousel.jpg" layout="fill" width="550" height="225" alt="Video Carousels with amp-carousel" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Video Carousels with amp-carousel</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="multimedia-animations" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'multimedia-animations'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-video/" class="-fc">amp-video</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-animation/" class="-fc">amp-animation</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/multimedia-animations/video_rotate_to_fullscreen_with_hint/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/multimedia-animations/video_rotate_to_fullscreen_with_hint/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/video_rotate_to_fullscreen_with_hint.jpg" layout="fill" width="550" height="225" alt="Video rotate to fullscreen with hint" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Video rotate to fullscreen with hint</h4> </div> </div> </a> </div> </div> </div> <div class="ap-m-table-component"> <a class="ap-m-table-component-link" href="/vi/documentation/examples/multimedia-animations/custom_loading_indicators/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Custom Loading Indicators</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-list</code> <code>amp-mustache</code> <code>amp-iframe</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/multimedia-animations/scrollbound_video_ad/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-ads ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Scrollbound Video Ad</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-animation</code> <code>amp-video</code> <code>amp-position-observer</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/multimedia-animations/supported_media_types_in_amp_stories/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Supported media types in AMP Stories</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-audio</code> <code>amp-gfycat</code> <code>amp-video</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/multimedia-animations/video_ad/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-ads ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Video Ad</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-video</code> </div> </div> </div> </a> </div> <h4 id="news-publishing">news-publishing</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> <div class="-rt -fn" data-category="news-publishing" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'news-publishing'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-social-share/" class="-fc">amp-social-share</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-live-list/" class="-fc">amp-live-list</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/news-publishing/live_blog/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/news-publishing/live_blog/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/live_blog.jpg" layout="fill" width="550" height="225" alt="Live Blog" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Live Blog</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="news-publishing" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'news-publishing'" i-amphtml-binding> <div class="-fs"> <strong>8 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-social-share/" class="-fc">amp-social-share</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-iframe/" class="-fc">amp-iframe</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-carousel/" class="-fc">amp-carousel</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-user-notification/" class="-fc">amp-user-notification</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-analytics/" class="-fc">amp-analytics</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-ad/" class="-fc">amp-ad</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/news-publishing/news_article/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/news-publishing/news_article/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/samples/img/teaser/news_article.jpg" layout="fill" width="550" height="225" alt="News Article" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">News Article</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="news-publishing" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'news-publishing'" i-amphtml-binding> <div class="-fs"> <strong>5 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-social-share/" class="-fc">amp-social-share</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-carousel/" class="-fc">amp-carousel</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-analytics/" class="-fc">amp-analytics</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/news-publishing/recipe/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/news-publishing/recipe/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/recipe.jpg" layout="fill" width="550" height="225" alt="Recipe" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Recipe</h4> </div> </div> </a> </div> </div> </div> <div class="ap-m-table-component"> </div> <h4 id="personalization">personalization</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> </div> </div> <div class="ap-m-table-component"> <a class="ap-m-table-component-link" href="/vi/documentation/examples/personalization/geolocation_with_amp-list/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Geolocation with amp-list</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-list</code> <code>amp-mustache</code> </div> </div> </div> </a> </div> <h4 id="style-layout">style-layout</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> <div class="-rt -fn" data-category="style-layout" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'style-layout'" i-amphtml-binding> <div class="-fs"> <strong>1 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-carousel/" class="-fc">amp-carousel</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/style-layout/how_to_support_images_with_unknown_dimensions/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/style-layout/how_to_support_images_with_unknown_dimensions/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/how_to_support_images_with_unknown_dimensions_.jpg" layout="fill" width="550" height="225" alt="How to support Images with unknown Dimensions" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">How to support Images with unknown Dimensions</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="style-layout" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'style-layout'" i-amphtml-binding> <div class="-fs"> <strong>1 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-selector/" class="-fc">amp-selector</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/style-layout/tab_panels_with_amp-selector/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/style-layout/tab_panels_with_amp-selector/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/tab_panels_with_amp-selector.jpg" layout="fill" width="550" height="225" alt="Tab Panels with amp-selector" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Tab Panels with amp-selector</h4> </div> </div> </a> </div> </div> </div> <div class="ap-m-table-component"> <a class="ap-m-table-component-link" href="/vi/documentation/examples/style-layout/amp_story_layouts/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">AMP Story Layouts</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <p> </p> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/style-layout/banner_ad/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-ads ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Banner Ad</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <p> </p> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/style-layout/carousel_ad/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-ads ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Carousel Ad</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-carousel</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/style-layout/dark_mode_toggle/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Dark Mode</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <p> </p> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/style-layout/desktop_and_landscape_mode_support/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Desktop and Landscape Mode Support</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <p> </p> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/style-layout/lightbox_ad/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-ads ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Lightbox Ad</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-lightbox</code> </div> </div> </div> </a> </div> <h4 id="user-consent">user-consent</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> <div class="-rt -fn" data-category="user-consent" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'user-consent'" i-amphtml-binding> <div class="-fs"> <strong>4 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-consent/" class="-fc">amp-consent</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-ad/" class="-fc">amp-ad</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/user-consent/advanced_user_consent_flow/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/user-consent/advanced_user_consent_flow/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/advanced_user_consent_flow.jpg" layout="fill" width="550" height="225" alt="Advanced User Consent Flow" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Advanced User Consent Flow</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="user-consent" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'user-consent'" i-amphtml-binding> <div class="-fs"> <strong>4 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-consent/" class="-fc">amp-consent</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-ad/" class="-fc">amp-ad</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-list/" class="-fc">amp-list</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-mustache-v0.1/" class="-fc">amp-mustache</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/user-consent/client_side_user_consent_flow/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/user-consent/client_side_user_consent_flow/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/basic_user_consent_flow.jpg" layout="fill" width="550" height="225" alt="Client Side User Consent Flow" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Client Side User Consent Flow</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="user-consent" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'user-consent'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-consent/" class="-fc">amp-consent</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-iframe/" class="-fc">amp-iframe</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/user-consent/external_user_consent_flow/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/user-consent/external_user_consent_flow/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/external_user_consentflow.jpg" layout="fill" width="550" height="225" alt="External User Consent Flow" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">External User Consent Flow</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="user-consent" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'user-consent'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-consent/" class="-fc">amp-consent</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-geo/" class="-fc">amp-geo</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/user-consent/geolocation-based_consent_flow/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/user-consent/geolocation-based_consent_flow/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/geolocation-based_consent_flow.jpg" layout="fill" width="550" height="225" alt="Geolocation-based Consent Flow" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Geolocation-based Consent Flow</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="user-consent" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'user-consent'" i-amphtml-binding> <div class="-fs"> <strong>1 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-consent/" class="-fc">amp-consent</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/user-consent/server_side_user_consent_flow/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/user-consent/server_side_user_consent_flow/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/geolocation-based_consent_flow.jpg" layout="fill" width="550" height="225" alt="Server Side User Consent Flow" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Server Side User Consent Flow</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="user-consent" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'user-consent'" i-amphtml-binding> <div class="-fs"> <strong>1 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-consent/" class="-fc">amp-consent</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/user-consent/user_consent_modal_ui/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/user-consent/user_consent_modal_ui/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/user_consent_modal_ui.png" layout="fill" width="550" height="225" alt="User Consent Modal UI" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">User Consent Modal UI</h4> </div> </div> </a> </div> </div> </div> <div class="ap-m-table-component"> <a class="ap-m-table-component-link" href="/vi/documentation/examples/user-consent/granular_user_consent/"> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-websites ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Granular User Consent</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-consent</code> <code>amp-fit-text</code> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/user-consent/story_user_consent/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">User Consent</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-mustache</code> <code>amp-video</code> <code>amp-list</code> <code>amp-consent</code> </div> </div> </div> </a> </div> <h4 id="visual-effects">visual-effects</h4> <div class="-rf"> <div class="-rl ap-o-teaser-grid-list-count-9"> <div class="-rt -fn" data-category="visual-effects" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'visual-effects'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-bind/" class="-fc">amp-bind</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-animation/" class="-fc">amp-animation</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/visual-effects/animated_snackbar/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/visual-effects/animated_snackbar/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/animated_snackbar.jpg" layout="fill" width="550" height="225" alt="Animated Snackbar" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Animated Snackbar</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="visual-effects" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'visual-effects'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-orientation-observer/" class="-fc">amp-orientation-observer</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-animation/" class="-fc">amp-animation</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/visual-effects/basics_of_orientation_effects/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/visual-effects/basics_of_orientation_effects/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/basics_of_orientation_effects.jpg" layout="fill" width="550" height="225" alt="Basics of orientation effects" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Basics of orientation effects</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="visual-effects" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'visual-effects'" i-amphtml-binding> <div class="-fs"> <strong>4 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-position-observer/" class="-fc">amp-position-observer</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-animation/" class="-fc">amp-animation</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-fit-text/" class="-fc">amp-fit-text</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-carousel/" class="-fc">amp-carousel</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/visual-effects/basics_of_scrollbound_effects/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/visual-effects/basics_of_scrollbound_effects/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/basics_of_scrollbound_effects.jpg" layout="fill" width="550" height="225" alt="Basics of scrollbound effects" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Basics of scrollbound effects</h4> </div> </div> </a> </div> <div class="-rt -fn" data-category="visual-effects" [hidden]="activeFilter.chosenFilter != 'none' && activeFilter.chosenFilter != 'visual-effects'" i-amphtml-binding> <div class="-fs"> <strong>2 AMP components</strong> used </div> <div class="-fo"> <div class="-fu">Used components</div> <ul class="-ff"> <li class="-fl"> <a href="/vi/documentation/components/amp-position-observer/" class="-fc">amp-position-observer</a> </li> <li class="-fl"> <a href="/vi/documentation/components/amp-animation/" class="-fc">amp-animation</a> </li> </ul> <div class="-fa"> <a class="-n" href="/vi/documentation/examples/visual-effects/scroll_to_top/"> <div class="ap-a-ico -i"> <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#internal"/></svg> </div> <span class="-r">Xem ví dụ</span> </a> </div> </div> <a tabindex="-1" class="-fi" href="/vi/documentation/examples/visual-effects/scroll_to_top/"> <div class="-rn"> <div class="-fr"> <div class="-od"> <div class="ap-m-tag ap-m-tag-websites"></div> </div> </div> <div class="-ro"> <amp-img src="/static/samples/img/teaser/scroll_to_top.jpg" layout="fill" width="550" height="225" alt="Scroll to top" class="i-amphtml-layout-fill i-amphtml-layout-size-defined" i-amphtml-layout="fill"> </amp-img> </div> <div class="-rs"> <h4 class="-ru">Scroll to top</h4> </div> </div> </a> </div> </div> </div> <div class="ap-m-table-component"> <a class="ap-m-table-component-link" href="/vi/documentation/examples/visual-effects/amp_story_animations/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">AMP Story Animations</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <p> </p> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/visual-effects/css_animation_in_email/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-email ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">CSS animation in email</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <p> </p> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/visual-effects/ken_burns/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-stories ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Ken Burns</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <p> </p> </div> </div> </div> </a> <a class="ap-m-table-component-link" href="/vi/documentation/examples/visual-effects/scrollbound_animation_ad/" hidden> <div class="ap-m-table-component-row"> <div class="ap-m-table-component-tags"> <div class="ap-m-tag ap-m-tag-ads ap-m-table-component-tag"></div> </div> <div class="ap-m-table-component-name ap-m-table-component-name-example"> <span class="ap-m-table-component-name-title">Scrollbound Animation Ad</span> </div> <div class="ap-m-table-component-info"> <div class="ap-m-table-component-used-components"> <code>amp-animation</code> <code>amp-position-observer</code> </div> </div> </div> </a> </div> </section> </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/examples/stories/"> <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/examples/ads/"> <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/examples/email/"> <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-default"> <div class="ap-o-sidebar"> <div class="nav"> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>introduction</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/introduction/hello_world/">Hello World</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>components</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-3d-gltf/">amp-3d-gltf</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-access-laterpay/">amp-access-laterpay</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-access/">amp-access</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-accordion/">amp-accordion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-ad/">amp-ad</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-addthis/">amp-addthis</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-analytics/">amp-analytics</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-anim/">amp-anim</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-app-banner/">amp-app-banner</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-audio/">amp-audio</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-autocomplete/">amp-autocomplete</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-bind-macro/">amp-bind-macro</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-bind-recaptcha/">amp-bind-recaptcha</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-bind/">amp-bind</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-bodymovin-animation/">amp-bodymovin-animation</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-brid-player/">amp-brid-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-brightcove/">amp-brightcove</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-call-tracking/">amp-call-tracking</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-carousel/">amp-carousel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-dailymotion/">amp-dailymotion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-date-countdown/">amp-date-countdown</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-date-display/">amp-date-display</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-date-picker/">amp-date-picker</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-dynamic-css-classes/">amp-dynamic-css-classes</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-experiment/">amp-experiment</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-facebook-comments/">amp-facebook-comments</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-facebook-like/">amp-facebook-like</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-facebook-page/">amp-facebook-page</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-facebook/">amp-facebook</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-fit-text/">amp-fit-text</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-font/">amp-font</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-form/">amp-form</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-fx-collection/">amp-fx-collection</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-fx-flying-carpet/">amp-fx-flying-carpet</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-geo/">amp-geo</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-gfycat/">amp-gfycat</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-gist/">amp-gist</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-hulu/">amp-hulu</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-iframe/">amp-iframe</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-ima-video/">amp-ima-video</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-image-lightbox/">amp-image-lightbox</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-image-slider/">amp-image-slider</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-img/">amp-img</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-inputmask/">amp-inputmask</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-instagram/">amp-instagram</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-install-serviceworker/">amp-install-serviceworker</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-jwplayer/">amp-jwplayer</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-kaltura-player/">amp-kaltura-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-lightbox-gallery/">amp-lightbox-gallery</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-lightbox/">amp-lightbox</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-list/">amp-list</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-live-list/">amp-live-list</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-mustache/">amp-mustache</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-next-page/">amp-next-page</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-o2-player/">amp-o2-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-pinterest/">amp-pinterest</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-pixel/">amp-pixel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-reach-player/">amp-reach-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-recaptcha-input/">amp-recaptcha-input</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-reddit/">amp-reddit</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-render/">amp-render</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-script/">amp-script</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-selector/">amp-selector</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-sidebar/">amp-sidebar</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-social-share/">amp-social-share</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-soundcloud/">amp-soundcloud</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-springboard-player/">amp-springboard-player</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-sticky-ad/">amp-sticky-ad</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-timeago/">amp-timeago</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-twitter/">amp-twitter</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-user-notification/">amp-user-notification</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-video-iframe/">amp-video-iframe</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-video/">amp-video</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-vimeo/">amp-vimeo</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-vine/">amp-vine</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-web-push/">amp-web-push</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/components/amp-youtube/">amp-youtube</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>guides</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/guides/internationalization/">Internationalization</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/guides/using_the_amp_url_api/">Using the AMP URL API</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/guides/using_the_google_amp_cache/">Using the Google AMP Cache</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>advertising-analytics</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/advertising-analytics/amphtml_ads_vs_non_amp_ads/">AMP Ads vs non-AMP Ads</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/advertising-analytics/joining_analytics_sessions/">Joining Analytics Sessions</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/advertising-analytics/tracking_core_web_vitals/">Tracking Core Web Vitals</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>thương mại điện tử</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/e-commerce/amp_for_e-commerce_getting_started/">AMP for E-Commerce Getting Started</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/e-commerce/checkout_flow/">Checkout Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/e-commerce/hotel/">Hotel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/e-commerce/housing/">Housing</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/e-commerce/payments_in_amp/">Payments in AMP</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/e-commerce/product_browse_page/">Product Browse Page</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/e-commerce/product_page/">Product Page</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/e-commerce/shopping_cart/">Shopping Cart</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>interactivity-dynamic-content</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/client-side_filtering/">Client-side filtering</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/combobox/">ComboBox</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/comment_section/">Comment Section</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/conditional_state/">Conditional State</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/copy_button/">Copy Button</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/currency_conversion/">Currency Conversion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/dynamic_accordion/">Dynamic Accordion</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/dynamic_content_after_user-interaction/">Dynamic Content After User-Interaction</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/favorite_button/">Favorite Button</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/linked_dropdowns/">Linked Dropdowns</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/mixing_dynamic_and_cached_data/">Mixing Dynamic and Cached Data</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/multi_page_flow/">Multi Page Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/paged_list/">Paged List</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/poll/">Poll</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/restrict_duplicate_selection/">Restrict Duplicate Selection</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/seatmap/">SeatMap</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/seatmap_multiple_selection/">SeatMap Multiple Selection</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/show_more_button/">Show More Button</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/star_rating/">Star Rating</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/interactivity-dynamic-content/tic_tac_toe/">Tic-Tac-Toe</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>multimedia-animations</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/multimedia-animations/advanced_video_docking/">Advanced Video Docking</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/multimedia-animations/animated_hamburger_menu/">Animated hamburger menu</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/multimedia-animations/click-to-play_overlay_for_amp-video/">Click-to-play overlay for amp-video</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/multimedia-animations/custom_loading_indicators/">Custom Loading Indicators</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/multimedia-animations/image_galleries_with_amp-carousel/">Image Galleries with amp-carousel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/multimedia-animations/integrating_videos_in_amp_an_overview/">Integrating Videos in AMP an Overview</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/multimedia-animations/rich_media_notifications/">Rich Media Notifications</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/multimedia-animations/video_carousels_with_amp-carousel/">Video Carousels with amp-carousel</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/multimedia-animations/video_rotate_to_fullscreen_with_hint/">Video rotate to fullscreen with hint</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>news-publishing</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/news-publishing/live_blog/">Live Blog</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/news-publishing/news_article/">News Article</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/news-publishing/recipe/">Recipe</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>personalization</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/personalization/geolocation_with_amp-list/">Geolocation with amp-list</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>style-layout</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/style-layout/dark_mode_toggle/">Dark Mode</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/style-layout/how_to_support_images_with_unknown_dimensions/">How to support Images with unknown Dimensions</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/style-layout/tab_panels_with_amp-selector/">Tab Panels with amp-selector</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>user-consent</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/user-consent/advanced_user_consent_flow/">Advanced User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/user-consent/client_side_user_consent_flow/">Client Side User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/user-consent/external_user_consent_flow/">External User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/user-consent/geolocation-based_consent_flow/">Geolocation-based Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/user-consent/granular_user_consent/">Granular User Consent</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/user-consent/server_side_user_consent_flow/">Server Side User Consent Flow</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/user-consent/user_consent_modal_ui/">User Consent Modal UI</a> </li> </ul> </li> </ul> <ul class="nav-list level-1"> <li class="nav-item level-1"> <span class="nav-link"> <span>visual-effects</span> </span> <input class="nav-trigger" type="checkbox"> <div class="nav-icon"> <svg class="ap-a-ico"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#angle-down-solid"/> </svg> </div> <ul class="nav-list level-2"> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/visual-effects/animated_snackbar/">Animated Snackbar</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/visual-effects/basics_of_orientation_effects/">Basics of orientation effects</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/visual-effects/basics_of_scrollbound_effects/">Basics of scrollbound effects</a> </li> <li class="nav-item level-2"> <a class="nav-link" href="/vi/documentation/examples/websites/visual-effects/scroll_to_top/">Scroll to top</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":"examples","event_label":"banner","event_name":"banner"}},"breadcrumbLink":{"on":"click","selector":".ap-m-breadcrumbs-crumb","vars":{"event_action":"link","event_category":"examples","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":"examples","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":"examples","event_label":"navigation","event_name":"navigation"}},"scrolledEnd":{"on":"scroll","scrollSpec":{"verticalBoundaries":[90]},"vars":{"event_action":"end","event_category":"examples","event_label":"scroll","event_name":"scroll"}},"scrolledHalf":{"on":"scroll","scrollSpec":{"verticalBoundaries":[50]},"vars":{"event_action":"half","event_category":"examples","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":"examples","event_label":"sidebar","event_name":"sidebar"}},"sidebarToggle":{"on":"click","selector":"label[for=\"sidebar-desktop\"], label[for=\"sidebar\"]","vars":{"event_action":"toggle","event_category":"examples","event_label":"sidebar","event_name":"sidebar"}}},"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>