test.html

<style>#html-body [data-pb-style=C8PG98K]{justify-content:center;display:flex;flex-direction:column;background-position:center center;background-size:cover;background-repeat:no-repeat;background-attachment:scroll;border-style:none;border-width:1px;border-radius:0;margin:0;padding:0}#html-body [data-pb-style=KN3WQ28]{background-position:left top;background-size:cover;background-repeat:no-repeat}#html-body [data-pb-style=YBA15C5]{background-color:transparent}#html-body [data-pb-style=VPAQ1CW]{background-position:left top;background-size:cover;background-repeat:no-repeat}#html-body [data-pb-style=R6L3U04]{background-color:transparent}#html-body [data-pb-style=C64VV8P]{background-position:left top;background-size:cover;background-repeat:no-repeat}#html-body [data-pb-style=NULGWPY]{background-color:transparent}#html-body [data-pb-style=HRBNL8W]{background-position:left top;background-size:cover;background-repeat:no-repeat}#html-body [data-pb-style=DFYRHRV]{background-color:transparent}#html-body [data-pb-style=I4MYHPQ]{background-position:left top;background-size:cover;background-repeat:no-repeat}#html-body [data-pb-style=B8VRSLD]{background-color:transparent}</style><div class="main-hero-banner" data-content-type="row" data-appearance="full-bleed" data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="main" data-pb-style="C8PG98K"><div data-content-type="html" data-appearance="default" data-element="main">&lt;style&gt;
    .main-hero-banner .pagebuilder-poster-content {opacity: 0; padding-left: 8.4%;}
    .main-hero-banner .pagebuilder-poster-content div[data-element='content'] h1:first-child {margin-bottom: 0;}
    .main-hero-banner .pagebuilder-poster-content p {letter-spacing: -0.4px; margin-bottom: 0px;}
    .main-hero-banner .slick-arrow {width: auto; height: auto; display: inline-block; position: relative; top: auto; bottom: auto; transform: none; left: auto; right: auto;}
    .main-hero-banner .slick-arrow:before {font-size: 24px !important; line-height: 24px !important; color: rgba(0, 0, 0, 0.51) !important; font-weight: bold !important;}
    .main-hero-banner .slick-button {position: absolute;}
    .main-hero-banner .slick-current .pagebuilder-poster-content {left: 0; -webkit-animation: move 2s forwards; -moz-animation: move 2s forwards; animation: move 2s forwards;}

    .main-hero-banner .pagebuilder-slider {line-height: 0;}
    @media (max-width: 767px) {
    .main-hero-banner .pagebuilder-poster-content {box-sizing: border-box; padding-right: 8.4%;}
    .main-hero-banner .pagebuilder-slide-wrapper.jarallax [id*='jarallax-container'] &gt; iframe,
    .main-hero-banner .pagebuilder-slider, .main-hero-banner .pagebuilder-overlay, .main-hero-banner .pagebuilder-slide-wrapper {min-height: 486px !important;}
    .main-hero-banner .pagebuilder-slide-wrapper .pagebuilder-overlay.pagebuilder-poster-overlay {align-items: flex-start; justify-content: flex-start; padding-top: 47px !important;}
    .main-hero-banner .pagebuilder-poster-content h1 span {font-size: 28px !important;}
    .main-hero-banner .pagebuilder-poster-content p {font-size: 18px; line-height: 26px;}
    .main-hero-banner .slick-button {bottom: 25px;}
    }
    @media (min-width: 767px) {
    .main-hero-banner .pagebuilder-poster-content p {font-size: 22px; line-height: 30px;}
    .main-hero-banner .slick-button {bottom: 20px;}
    }
    @keyframes move {
    from { transform: translateX(100px); opacity: 0;}
    to { transform: translateX(0); opacity: 1;}
    }
    &lt;/style&gt;</div><div data-content-type="html" data-appearance="default" data-element="main">&lt;script type="text/javascript" xml="space"&gt;
    require(['jquery','slick'],function($,slick){
    $(document).ready(function() {
    if(isApplication()) {
    $(".hero-pagebuilder-slider").on("afterChange", function (event, slick, currentSlide){
    $(".hero-pagebuilder-slider .slick-active .pagebuilder-poster-content").animate({opacity: '1'}, 1500);
    })

    $(".hero-pagebuilder-slider").on("beforeChange", function (event, slick, currentSlide){
    $(".hero-pagebuilder-slider .pagebuilder-overlay").css('opacity','0');
    $(".hero-pagebuilder-slider .pagebuilder-poster-content").css('opacity','0');
    })
    }else {
    $(".hero-pagebuilder-slider").on("afterChange", function (event, slick, currentSlide){
    if($(window).width() &gt;= 768){
    $(".hero-pagebuilder-slider .slick-active .pagebuilder-overlay").animate({width: "43.5%", opacity: '1'}, 1000 , function() {
    if($(".hero-pagebuilder-slider .slick-active .pagebuilder-overlay").css('opacity') == 1) {
    $(".hero-pagebuilder-slider .slick-active .pagebuilder-poster-content").animate({opacity: '1'}, 1500);
    }
    });
    }else {
    $(".hero-pagebuilder-slider .slick-active .pagebuilder-poster-content").animate({opacity: '1'}, 1500);
    }
    })

    $(".hero-pagebuilder-slider").on("beforeChange", function (event, slick, currentSlide){
    if($(window).width() &gt;= 768){
    $(".hero-pagebuilder-slider .pagebuilder-overlay").css('width','0');
    }

    $(".hero-pagebuilder-slider .pagebuilder-overlay").css('opacity','0');
    $(".hero-pagebuilder-slider .pagebuilder-poster-content").css('opacity','0');
    })
    }
    });

    function isApplication()
    {
    var isMobile = false;
    if(navigator.userAgent.match(/Android|Mobile|iP(hone|od|ad)|BlackBerry|IEMobile|Kindle|NetFront|Silk-Accelerated|(hpw|web)OS|Fennec|Minimo|Opera M(obi|ini)|Blazer|Dolfin|Dolphin|Skyfire|Zune/) || $(window).width() &lt; 768){
    if($(window).width() &lt; 768){
    isMobile = true;
    }
    }
    return isMobile;
    }
    });
    &lt;/script&gt;
    &lt;style&gt;
    .hero-pagebuilder-slider .slick-arrow {z-index: 1 !important;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] h1,
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] p,
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] button {color: #fff}
    .hero-pagebuilder-slider .pagebuilder-button-link {text-transform: uppercase; font-size: 15px; width: 135px; margin-top: 7%; text-align: center;}
    @media (max-width: 767px) {
    .main-hero-slider {margin-bottom: 22% !important;}
    .hero-pagebuilder-slider .slick-button {bottom: -14%;}
    .hero-pagebuilder-slider .slick-button li button {background: #eee;}
    .hero-pagebuilder-slider .slick-pause:after {color: #eee;}
    .hero-pagebuilder-slider .slick-arrow {display: none !important;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper {text-align: center !important; position: relative;}
    .hero-pagebuilder-slider .pagebuilder-slide-button {display: none;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] h1 {font-size: 6vw; margin-bottom: 0;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] h1 + p {margin-top: 5px;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] p {font-size: 3.5vw;}
    .hero-pagebuilder-slider  .pagebuilder-overlay.pagebuilder-poster-overlay {min-height: auto !important; position: absolute; bottom: 0; width: 100% !important; opacity: 1 !important;}
    .hero-pagebuilder-slider .pagebuilder-poster-content {padding: 4% 0};
    }
    @media (max-width: 500px) {
    .hero-pagebuilder-slider .slick-button {bottom: -10%;}
    }
    @media (min-width: 768px) {
    .navigation &gt; ul:after {content: ''; box-sizing: border-box; display: block !important; max-width: 1100px; margin: auto; border-bottom: 1px solid #ffffff;}
    .navigation:hover &gt; ul:after {border-bottom-color: #eeeeee;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper {position: relative;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] h1 {font-size: 32px; margin-bottom: 0;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] h1 + p {margin: 30px 0 0 0;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] p {font-size: 16px;}
    .hero-pagebuilder-slider .pagebuilder-poster-overlay {width: 43.5%; margin: 0 0 0 auto; position: absolute; right: 0; bottom: 0; top: 0;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper .pagebuilder-poster-content {padding: 0 42% 0 3%; box-sizing: border-box}
    .hero-pagebuilder-slider .slick-button li button {background: #fff;}
    .hero-pagebuilder-slider .slick-pause:after {color: #fff;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper h1{margin-bottom: 20px !important;}
    }
    @media (min-width: 1024px) {
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] h1 {font-size: 40px;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] h1 + p {margin: 45px 0 0 0;}
    .hero-pagebuilder-slider .pagebuilder-slide-wrapper [data-element='content'] p {font-size: 20px;}
    }
    &lt;/style&gt;</div><div class="pagebuilder-slider" data-content-type="slider" data-appearance="default" data-autoplay="true" data-autoplay-speed="5000" data-fade="true" data-infinite-loop="true" data-show-arrows="true" data-show-dots="true" data-element="main"><div data-content-type="slide" data-slide-name="" data-appearance="poster" data-show-button="never" data-show-overlay="never" data-element="main"><a href="https://www.laneige.com.vn/skin-care/product-series/water-bank.html" target="" data-link-type="default" data-element="link"><div class="pagebuilder-slide-wrapper" data-background-images="{\&quot;desktop_image\&quot;:\&quot;{{media url=wysiwyg/WB_Line-2.jpg}}\&quot;,\&quot;mobile_image\&quot;:\&quot;{{media url=wysiwyg/Mobile-WB_Banner.jpg}}\&quot;}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="wrapper" data-pb-style="KN3WQ28"><div class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="" data-element="overlay" data-pb-style="YBA15C5"><div class="pagebuilder-poster-content"><div data-element="content"><p style="text-align: left;"><span style="font-size: 40px; color: #000000;"><strong>WATER BANK BLUE HA</strong></span></p><p style="text-align: left;"><span style="font-size: 24px; color: #000000;">Blue Hyaluronic bằng 1/</span><span style="font-size: 24px; color: #000000; background-color: transparent;">2000</span></p><p style="text-align: left;"><span style="font-size: 24px; color: #000000; background-color: transparent;">lần </span><span style="font-size: 24px; color: #000000; background-color: transparent;">so với Hyaluronic</span></p></div></div></div></div></a></div><div data-content-type="slide" data-slide-name="" data-appearance="poster" data-show-button="never" data-show-overlay="never" data-element="main"><a href="https://www.laneige.com.vn/laneige-radian-c-vitamin-spot-serum-10-g.html" target="" data-link-type="default" data-element="link"><div class="pagebuilder-slide-wrapper" data-background-images="{\&quot;desktop_image\&quot;:\&quot;{{media url=wysiwyg/Radian-2_1.jpg}}\&quot;,\&quot;mobile_image\&quot;:\&quot;{{media url=wysiwyg/Mobile-RC_Banner.jpg}}\&quot;}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="wrapper" data-pb-style="VPAQ1CW"><div class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="" data-element="overlay" data-pb-style="R6L3U04"><div class="pagebuilder-poster-content"><div data-element="content"><p style="text-align: left;"><strong><span style="font-size: 40px;">RADIAN-C SPOT SERUM</span></strong></p><p style="text-align: left;"><span style="font-size: 24px;">Vitamin C tinh khiết tới 15,2% </span></p><p style="text-align: left;"><span style="font-size: 24px;">làm mờ đốm nâu rõ rệt</span></p></div></div></div></div></a></div><div data-content-type="slide" data-slide-name="" data-appearance="poster" data-show-button="never" data-show-overlay="never" data-element="main"><a href="https://www.laneige.com.vn/laneige-perfect-renew-youth-retinol-30-ml.html" target="" data-link-type="default" data-element="link"><div class="pagebuilder-slide-wrapper" data-background-images="{\&quot;desktop_image\&quot;:\&quot;{{media url=wysiwyg/Perfect_Renew-2.jpg}}\&quot;,\&quot;mobile_image\&quot;:\&quot;{{media url=wysiwyg/Mobile-PRN_Banner.jpg}}\&quot;}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="wrapper" data-pb-style="C64VV8P"><div class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="" data-element="overlay" data-pb-style="NULGWPY"><div class="pagebuilder-poster-content"><div data-element="content"><p style="text-align: left;"><strong><span style="font-size: 40px;">PERFECT RENEW RETINOL</span></strong></p><p style="text-align: left;"><span style="font-size: 24px;">Retinol tinh khiết tới 95%</span></p><p style="text-align: left;"><span style="font-size: 24px;">giúp làn da săn chắc</span></p></div></div></div></div></a></div><div data-content-type="slide" data-slide-name="" data-appearance="poster" data-show-button="never" data-show-overlay="never" data-element="main"><a href="https://www.laneige.com.vn/skin-care/product-type/lip-care.html" target="" data-link-type="default" data-element="link"><div class="pagebuilder-slide-wrapper" data-background-images="{\&quot;desktop_image\&quot;:\&quot;{{media url=wysiwyg/PC-LSM_Banner_1.jpg}}\&quot;,\&quot;mobile_image\&quot;:\&quot;{{media url=wysiwyg/Mobile-LSM_Banner_2.jpg}}\&quot;}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="wrapper" data-pb-style="HRBNL8W"><div class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="" data-element="overlay" data-pb-style="DFYRHRV"><div class="pagebuilder-poster-content"><div data-element="content"><p style="text-align: left;"><strong><span style="font-size: 40px;">LIP SLEEPING MASK EX</span></strong></p><p style="text-align: left;"><span style="font-size: 24px;">Dưỡng môi với công nghệ</span></p><p style="text-align: left;"><span style="font-size: 24px;">khoá ẩm suốt cả đêm</span></p></div></div></div></div></a></div><div data-content-type="slide" data-slide-name="" data-appearance="poster" data-show-button="never" data-show-overlay="never" data-element="main"><a href="https://www.laneige.com.vn/laneige-neo-cushion-matte-15-g-2.html" target="" data-link-type="default" data-element="link"><div class="pagebuilder-slide-wrapper" data-background-images="{\&quot;desktop_image\&quot;:\&quot;{{media url=wysiwyg/Neo_Cushion-2.jpg}}\&quot;,\&quot;mobile_image\&quot;:\&quot;{{media url=wysiwyg/Mobile-Neo_Banner.jpg}}\&quot;}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="wrapper" data-pb-style="I4MYHPQ"><div class="pagebuilder-overlay pagebuilder-poster-overlay" data-overlay-color="" data-element="overlay" data-pb-style="B8VRSLD"><div class="pagebuilder-poster-content"><div data-element="content"><p style="text-align: left;"><strong><span style="font-size: 40px;">NEO CUSHION MATTE</span></strong></p><p style="text-align: left;"><span style="font-size: 24px;">Cushion siêu nhẹ cho </span><span style="font-size: 24px;">lớp</span></p><p style="text-align: left;"><span style="font-size: 24px;">nền </span><span style="font-size: 24px;">hoàn hảo suốt 24h</span></p></div></div></div></div></a></div></div><div data-content-type="html" data-appearance="default" data-element="main">&lt;script type="text/javascript" xml="space"&gt;
    require(['jquery', 'slick', 'matchMedia', 'domReady!'], function($, slick, mediaCheck) {

    // Add AP Tag to HeroBanner
    $(window).on('load', function(){
    var heroSlide = $('.hero-pagebuilder-slider .slick-slide');

    heroSlide.each(function(index, item) {
    var slideName = '',
    hasLink = $(this).find('a');

    if (hasLink.length &gt; 0) {
    slideName = $(this).find('div[data-content-type="slide"]').attr('data-slide-name');

    hasLink.attr('ap-click-area', 'MAIN');
    hasLink.attr('ap-click-name', 'HeroBanner');
    hasLink.attr('ap-click-data', slideName);
    }
    });

    });

    var isChanging = false,
    breakpointMobile = 768,
    i = 0;

    $('.hero-pagebuilder-slider').on('init breakpoint', function(event, slick){
    $('.hide-on-mobile').parents('.slick-slide').addClass('hide-on-mobile');
    $('.hide-on-desktop').parents('.slick-slide').addClass('hide-on-desktop');

    if (!isChanging &amp;&amp; i == 0) {
    isChanging = true;

    if (slick.activeBreakpoint &amp;&amp; slick.activeBreakpoint &lt;= breakpointMobile) {
    i++;
    slick.slickFilter(':not(.hide-on-mobile)');
    } else {
    i++;
    slick.slickFilter(':not(.hide-on-desktop)');
    }

    isChanging = false;
    }
    }).slick({
    autoplay: true,
    dots: true,
    responsive: [
    {breakpoint: 768}
    ]
    });
    });
    &lt;/script&gt;</div></div>