{"id":6781,"date":"2024-08-22T05:25:20","date_gmt":"2024-08-22T05:25:20","guid":{"rendered":"https:\/\/tiennong.vn\/test-99\/"},"modified":"2024-08-22T05:25:20","modified_gmt":"2024-08-22T05:25:20","slug":"test-99","status":"publish","type":"page","link":"https:\/\/tiennong.vn\/en\/test-99\/","title":{"rendered":"Test-99"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6781\" class=\"elementor elementor-6781 elementor-4110\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6a91dca elementor-section-stretched elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"6a91dca\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-9ddd0f2\" data-id=\"9ddd0f2\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-section elementor-inner-section elementor-element elementor-element-7bb6c0e elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"7bb6c0e\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-ff33ce1\" data-id=\"ff33ce1\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-29d7b13 elementor-widget elementor-widget-html\" data-id=\"29d7b13\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"gallery--slider\">\r\n    <div class=\"g-slider--title\">\r\n        <div class=\"progress-circle\" style=\"--value:0\"><\/div>\r\n        <h2 class=\"g-title\">Case Study <\/h2>\r\n    <\/div>\r\n    <div class=\"g-slider--one-wrap\" dir=\"ltr\">\r\n        <div class=\"g-slider--one\">\r\n            <a class=\"item\" href=\"#\" target=\"_blank\" rel=\"nofollow\">\r\n                <div class=\"source\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-1.webp\"\r\n                        alt=\"Mastartery\">\r\n                <\/div>\r\n                <div class=\"content-wrap\">\r\n                    <div class=\"icon-wrap\">\r\n                        <div class=\"icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M0.0249186 -2.09988e-06L0.0249182 2.20346L12.2385 2.20346L1.28959e-06 14.4419L1.55808 16L13.7965 3.76154L13.7965 15.9751L16 15.9751L16 6.93295e-07L15.8623 -2.40791e-08L13.7965 3.0803e-07L0.0249186 -2.09988e-06Z\"\r\n                                    fill=\"#121212\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"content\">\r\n                        <h2 class=\"title\">Mastartery <\/h2>\r\n                        <p class=\"desc\">Design - 2019<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n            <a class=\"item\" href=\"#\" target=\"_blank\" rel=\"nofollow\">\r\n                <div class=\"source\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-2.webp\"\r\n                        alt=\"Mastartery\">\r\n                <\/div>\r\n                <div class=\"content-wrap\">\r\n                    <div class=\"icon-wrap\">\r\n                        <div class=\"icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M0.0249186 -2.09988e-06L0.0249182 2.20346L12.2385 2.20346L1.28959e-06 14.4419L1.55808 16L13.7965 3.76154L13.7965 15.9751L16 15.9751L16 6.93295e-07L15.8623 -2.40791e-08L13.7965 3.0803e-07L0.0249186 -2.09988e-06Z\"\r\n                                    fill=\"#121212\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"content\">\r\n                        <h2 class=\"title\">Mastartery <\/h2>\r\n                        <p class=\"desc\">Design - 2019<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n            <a class=\"item\" href=\"#\" target=\"_blank\" rel=\"nofollow\">\r\n                <div class=\"source\">\r\n                    <video muted autoplay loop>\r\n                        <source\r\n                            src=\"https:\/\/crowdytheme.com\/assets\/wp-content\/uploads\/2024\/07\/64c7939a3f3362cd11071c38_618b7703c1a5dd464a740dbe_spark_dribbbles-transcode-transcode.mp4\"\r\n                            type=\"video\/mp4\">\r\n                    <\/video>\r\n                <\/div>\r\n                <div class=\"content-wrap\">\r\n                    <div class=\"icon-wrap\">\r\n                        <div class=\"icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M0.0249186 -2.09988e-06L0.0249182 2.20346L12.2385 2.20346L1.28959e-06 14.4419L1.55808 16L13.7965 3.76154L13.7965 15.9751L16 15.9751L16 6.93295e-07L15.8623 -2.40791e-08L13.7965 3.0803e-07L0.0249186 -2.09988e-06Z\"\r\n                                    fill=\"#121212\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"content\">\r\n                        <h2 class=\"title\">Mastartery <\/h2>\r\n                        <p class=\"desc\">Design - 2019<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n            <a class=\"item\" href=\"#\" target=\"_blank\" rel=\"nofollow\">\r\n                <div class=\"source\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/Rectangle-7031.webp\"\r\n                        alt=\"Agencey \">\r\n                <\/div>\r\n                <div class=\"content-wrap\">\r\n                    <div class=\"icon-wrap\">\r\n                        <div class=\"icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M0.0249186 -2.09988e-06L0.0249182 2.20346L12.2385 2.20346L1.28959e-06 14.4419L1.55808 16L13.7965 3.76154L13.7965 15.9751L16 15.9751L16 6.93295e-07L15.8623 -2.40791e-08L13.7965 3.0803e-07L0.0249186 -2.09988e-06Z\"\r\n                                    fill=\"#121212\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"content\">\r\n                        <h2 class=\"title\">Agencey <\/h2>\r\n                        <p class=\"desc\">Design - 2019<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n            <a class=\"item\" href=\"#\" target=\"_blank\" rel=\"nofollow\">\r\n                <div class=\"source\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/Rectangle-7030.webp\"\r\n                        alt=\"Consultant\">\r\n                <\/div>\r\n                <div class=\"content-wrap\">\r\n                    <div class=\"icon-wrap\">\r\n                        <div class=\"icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M0.0249186 -2.09988e-06L0.0249182 2.20346L12.2385 2.20346L1.28959e-06 14.4419L1.55808 16L13.7965 3.76154L13.7965 15.9751L16 15.9751L16 6.93295e-07L15.8623 -2.40791e-08L13.7965 3.0803e-07L0.0249186 -2.09988e-06Z\"\r\n                                    fill=\"#121212\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"content\">\r\n                        <h2 class=\"title\">Consultant <\/h2>\r\n                        <p class=\"desc\">Design - 2019<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n    <div class=\"g-slider--two-wrap\" dir=\"rtl\">\r\n        <div class=\"g-slider--two\">\r\n            <a class=\"item\" href=\"# #\" target=\"_blank _blank\" rel=\"nofollow nofollow\">\r\n                <div class=\"source\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-4.webp\"\r\n                        alt=\"Mastartery\">\r\n                <\/div>\r\n                <div class=\"content-wrap\">\r\n                    <div class=\"icon-wrap\">\r\n                        <div class=\"icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M0.0249186 -2.09988e-06L0.0249182 2.20346L12.2385 2.20346L1.28959e-06 14.4419L1.55808 16L13.7965 3.76154L13.7965 15.9751L16 15.9751L16 6.93295e-07L15.8623 -2.40791e-08L13.7965 3.0803e-07L0.0249186 -2.09988e-06Z\"\r\n                                    fill=\"#121212\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"content\">\r\n                        <h2 class=\"title\">Mastartery <\/h2>\r\n                        <p class=\"desc\">Design - 2019<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n            <a class=\"item\" href=\"# #\" target=\"_blank _blank\" rel=\"nofollow nofollow\">\r\n                <div class=\"source\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-5.webp\"\r\n                        alt=\"Mastartery\">\r\n                <\/div>\r\n                <div class=\"content-wrap\">\r\n                    <div class=\"icon-wrap\">\r\n                        <div class=\"icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M0.0249186 -2.09988e-06L0.0249182 2.20346L12.2385 2.20346L1.28959e-06 14.4419L1.55808 16L13.7965 3.76154L13.7965 15.9751L16 15.9751L16 6.93295e-07L15.8623 -2.40791e-08L13.7965 3.0803e-07L0.0249186 -2.09988e-06Z\"\r\n                                    fill=\"#121212\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"content\">\r\n                        <h2 class=\"title\">Mastartery <\/h2>\r\n                        <p class=\"desc\">Design - 2019<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n            <a class=\"item\" href=\"# #\" target=\"_blank _blank\" rel=\"nofollow nofollow\">\r\n                <div class=\"source\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/Rectangle-968-2.webp\"\r\n                        alt=\"Mastartery\">\r\n                <\/div>\r\n                <div class=\"content-wrap\">\r\n                    <div class=\"icon-wrap\">\r\n                        <div class=\"icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M0.0249186 -2.09988e-06L0.0249182 2.20346L12.2385 2.20346L1.28959e-06 14.4419L1.55808 16L13.7965 3.76154L13.7965 15.9751L16 15.9751L16 6.93295e-07L15.8623 -2.40791e-08L13.7965 3.0803e-07L0.0249186 -2.09988e-06Z\"\r\n                                    fill=\"#121212\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"content\">\r\n                        <h2 class=\"title\">Mastartery <\/h2>\r\n                        <p class=\"desc\">Design - 2019<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n            <a class=\"item\" href=\"# #\" target=\"_blank _blank\" rel=\"nofollow nofollow\">\r\n                <div class=\"source\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/Rectangle-968-1.webp\"\r\n                        alt=\"Mastartery\">\r\n                <\/div>\r\n                <div class=\"content-wrap\">\r\n                    <div class=\"icon-wrap\">\r\n                        <div class=\"icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M0.0249186 -2.09988e-06L0.0249182 2.20346L12.2385 2.20346L1.28959e-06 14.4419L1.55808 16L13.7965 3.76154L13.7965 15.9751L16 15.9751L16 6.93295e-07L15.8623 -2.40791e-08L13.7965 3.0803e-07L0.0249186 -2.09988e-06Z\"\r\n                                    fill=\"#121212\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"content\">\r\n                        <h2 class=\"title\">Mastartery <\/h2>\r\n                        <p class=\"desc\">Design - 2019<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n            <a class=\"item\" href=\"# #\" target=\"_blank _blank\" rel=\"nofollow nofollow\">\r\n                <div class=\"source\">\r\n                    <img decoding=\"async\"\r\n                        src=\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/Rectangle-968.webp\"\r\n                        alt=\"Mastartery\">\r\n                <\/div>\r\n                <div class=\"content-wrap\">\r\n                    <div class=\"icon-wrap\">\r\n                        <div class=\"icon\">\r\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\r\n                                fill=\"none\">\r\n                                <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n                                    d=\"M0.0249186 -2.09988e-06L0.0249182 2.20346L12.2385 2.20346L1.28959e-06 14.4419L1.55808 16L13.7965 3.76154L13.7965 15.9751L16 15.9751L16 6.93295e-07L15.8623 -2.40791e-08L13.7965 3.0803e-07L0.0249186 -2.09988e-06Z\"\r\n                                    fill=\"#121212\"><\/path>\r\n                            <\/svg>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <div class=\"content\">\r\n                        <h2 class=\"title\">Mastartery <\/h2>\r\n                        <p class=\"desc\">Design - 2019<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/a>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\r\n    horizontal_scrolling = function () {\r\n  gsap.registerPlugin(ScrollTrigger); \/\/ Ensure ScrollTrigger is registered\r\n\r\n  const ArolaxGallery = function ($scope, $) {\r\n    if (typeof gsap === 'object') {\r\n      let gsap_mm = gsap.matchMedia();\r\n\r\n      gsap_mm.add(`(min-width: 768px)`, () => {\r\n        const $progressCircle = $('.progress-circle', $scope);\r\n        const $sections = $('.g-slider--one .item', $scope);\r\n        const $sections2 = $('.g-slider--two .item', $scope);\r\n\r\n        let scrollTimer = -1;\r\n        const updateProgress = function (self) {\r\n          $progressCircle.css('opacity', 1);\r\n\r\n          if (scrollTimer !== -1) {\r\n            clearTimeout(scrollTimer);\r\n          }\r\n          scrollTimer = window.setTimeout(() => {\r\n            $progressCircle.css('opacity', 0);\r\n          }, 300);\r\n\r\n          const scrolled = self.progress * 100;\r\n          $progressCircle.css('--value', scrolled.toFixed(0));\r\n        }\r\n\r\n        gsap.to($sections, {\r\n          xPercent: -150,\r\n          ease: \"none\",\r\n          scrollTrigger: {\r\n            trigger: $scope,\r\n            pin: true,\r\n            pinSpacing: true,\r\n            scrub: 1,\r\n            onUpdate: (self) => {\r\n              updateProgress(self);\r\n            }\r\n            \/\/ end: \"+=3000\",\r\n          }\r\n        });\r\n\r\n        gsap.to($sections2, {\r\n          xPercent: 150,\r\n          ease: \"none\",\r\n          scrollTrigger: {\r\n            trigger: $scope,\r\n            pin: false,\r\n            scrub: 1,\r\n            \/\/ end: \"+=3000\",\r\n          }\r\n        });\r\n      });\r\n    }\r\n  }\r\n};\r\n\r\n<\/script>\r\n\r\n\r\n<style>\r\n    .gallery--slider {\r\n        display: block;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n\r\n    .gallery--slider svg {\r\n        width: 1em;\r\n        height: 1em;\r\n    }\r\n\r\n    .g-slider--title {\r\n        position: absolute;\r\n        width: 420px;\r\n        height: 420px;\r\n        background-color: #C8F31D;\r\n        border-radius: 100%;\r\n        left: 50%;\r\n        top: 50%;\r\n        transform: translate(-50%, -50%);\r\n        display: none;\r\n        align-items: center;\r\n        justify-content: center;\r\n        z-index: 1;\r\n    }\r\n\r\n    .g-slider--title .g-title {\r\n        text-align: center;\r\n    }\r\n\r\n    .g-slider--one,\r\n    .g-slider--two {\r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 10px;\r\n        width: 150%;\r\n    }\r\n\r\n    .g-slider--one {\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .gallery--slider .item {\r\n        flex: 1;\r\n        max-width: 100%;\r\n        position: relative;\r\n        transition: all 0.3s;\r\n    }\r\n\r\n    .gallery--slider .content-wrap {\r\n        position: absolute;\r\n        width: 100%;\r\n        height: 100%;\r\n        left: 0;\r\n        top: 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-between;\r\n        padding: 30px;\r\n        transition: all 0.3s;\r\n    }\r\n\r\n    .gallery--slider .content {\r\n        text-align: left;\r\n    }\r\n\r\n    .gallery--slider .icon-wrap {\r\n        text-align: right;\r\n    }\r\n\r\n    .gallery--slider .icon {\r\n        display: inline-block;\r\n        padding: 12px 24px;\r\n        border: 1px solid #ddd;\r\n        border-radius: 25px;\r\n        transition: all 0.5s;\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        transform: translateY(30px);\r\n    }\r\n\r\n    .gallery--slider .title {\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        transition: all 0.5s;\r\n        transform: translateY(30px);\r\n    }\r\n\r\n    .gallery--slider p {\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        transition: all 0.5s;\r\n        transform: translateY(20px);\r\n    }\r\n\r\n    .gallery--slider .source {\r\n        height: 100%;\r\n        width: 100%;\r\n    }\r\n\r\n    .gallery--slider .source img,\r\n    .gallery--slider .source video {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: cover;\r\n    }\r\n\r\n    .gallery--slider .item:hover .content-wrap {\r\n        background-color: #FFFFFFE5;\r\n    }\r\n\r\n    .gallery--slider .item:hover p,\r\n    .gallery--slider .item:hover .icon,\r\n    .gallery--slider .item:hover .title {\r\n        opacity: 1;\r\n        visibility: visible;\r\n        transform: translateY(0);\r\n    }\r\n\r\n\r\n    \/*progress bar*\/\r\n    .g-slider--title .progress-circle @keyframes growProgressBar {\r\n\r\n        0%,\r\n        33% {\r\n            --pgPercentage: 0;\r\n        }\r\n\r\n        100% {\r\n            --pgPercentage: var(--value);\r\n        }\r\n    }\r\n\r\n    .g-slider--title .progress-circle {\r\n        --fg: #b0d02e;\r\n        --bg: transparent;\r\n        --bg-color: #C8F31D;\r\n        --pgPercentage: var(--value);\r\n        animation: growProgressBar 3s 1 forwards;\r\n        width: calc(100% - 60px);\r\n        height: calc(100% - 60px);\r\n        border-radius: 50%;\r\n        display: grid;\r\n        place-items: center;\r\n        background: radial-gradient(closest-side, var(--bg-color) 98%, transparent 0 99.9%, transparent 0), conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);\r\n        position: absolute;\r\n        left: 50%;\r\n        top: 50%;\r\n        transform: translate(-50%, -50%);\r\n        opacity: 0;\r\n        transition: all 0.3s;\r\n    }\r\n\r\n    .g-slider--title .progress-circle::before {\r\n        counter-reset: percentage var(--value);\r\n        content: counter(percentage) '%';\r\n    }\r\n\r\n\r\n    @media (min-width: 768px) {\r\n        .g-slider--title {\r\n            display: flex;\r\n        }\r\n\r\n        .g-slider--one,\r\n        .g-slider--two {\r\n            flex-direction: row;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 1199px) {\r\n\r\n        .gallery--slider .item p,\r\n        .gallery--slider .item .icon,\r\n        .gallery--slider .item .title {\r\n            opacity: 1;\r\n            visibility: visible;\r\n            transform: translateY(0);\r\n        }\r\n\r\n        .gallery--slider .item .content-wrap {\r\n            background-color: #FFFFFFE5;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 991px) {\r\n\r\n        .g-slider--one,\r\n        .g-slider--two {\r\n            width: 200%;\r\n        }\r\n    }\r\n\r\n    @media (max-width: 767px) {\r\n\r\n        .g-slider--one,\r\n        .g-slider--two {\r\n            width: 100%;\r\n        }\r\n    }\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Case Study Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Agencey Design &#8211; 2019 Consultant Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-6781","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Test-99 - Ti\u00ean N\u00f4ng Group<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tiennong.vn\/en\/test-99\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Test-99 - Ti\u00ean N\u00f4ng Group\" \/>\n<meta property=\"og:description\" content=\"Case Study Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Agencey Design &#8211; 2019 Consultant Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tiennong.vn\/en\/test-99\/\" \/>\n<meta property=\"og:site_name\" content=\"Ti\u00ean N\u00f4ng Group\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-1.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/tiennong.vn\/en\/test-99\/\",\"url\":\"https:\/\/tiennong.vn\/en\/test-99\/\",\"name\":\"Test-99 - Ti\u00ean N\u00f4ng Group\",\"isPartOf\":{\"@id\":\"https:\/\/tiennong.vn\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/tiennong.vn\/en\/test-99\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/tiennong.vn\/en\/test-99\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-1.webp\",\"datePublished\":\"2024-08-22T05:25:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/tiennong.vn\/en\/test-99\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/tiennong.vn\/en\/test-99\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/tiennong.vn\/en\/test-99\/#primaryimage\",\"url\":\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-1.webp\",\"contentUrl\":\"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-1.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/tiennong.vn\/en\/test-99\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/tiennong.vn\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Test-99\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/tiennong.vn\/en\/#website\",\"url\":\"https:\/\/tiennong.vn\/en\/\",\"name\":\"Ti\u00ean N\u00f4ng Group\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/tiennong.vn\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Test-99 - Ti\u00ean N\u00f4ng Group","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tiennong.vn\/en\/test-99\/","og_locale":"en_US","og_type":"article","og_title":"Test-99 - Ti\u00ean N\u00f4ng Group","og_description":"Case Study Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Agencey Design &#8211; 2019 Consultant Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019 Mastartery Design &#8211; 2019","og_url":"https:\/\/tiennong.vn\/en\/test-99\/","og_site_name":"Ti\u00ean N\u00f4ng Group","og_image":[{"url":"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-1.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/tiennong.vn\/en\/test-99\/","url":"https:\/\/tiennong.vn\/en\/test-99\/","name":"Test-99 - Ti\u00ean N\u00f4ng Group","isPartOf":{"@id":"https:\/\/tiennong.vn\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tiennong.vn\/en\/test-99\/#primaryimage"},"image":{"@id":"https:\/\/tiennong.vn\/en\/test-99\/#primaryimage"},"thumbnailUrl":"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-1.webp","datePublished":"2024-08-22T05:25:20+00:00","breadcrumb":{"@id":"https:\/\/tiennong.vn\/en\/test-99\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tiennong.vn\/en\/test-99\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tiennong.vn\/en\/test-99\/#primaryimage","url":"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-1.webp","contentUrl":"https:\/\/crowdytheme.com\/wp\/arolax\/web-development\/wp-content\/uploads\/sites\/29\/2024\/07\/project-1.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/tiennong.vn\/en\/test-99\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/tiennong.vn\/en\/"},{"@type":"ListItem","position":2,"name":"Test-99"}]},{"@type":"WebSite","@id":"https:\/\/tiennong.vn\/en\/#website","url":"https:\/\/tiennong.vn\/en\/","name":"Ti\u00ean N\u00f4ng Group","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tiennong.vn\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/tiennong.vn\/en\/wp-json\/wp\/v2\/pages\/6781","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tiennong.vn\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tiennong.vn\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tiennong.vn\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tiennong.vn\/en\/wp-json\/wp\/v2\/comments?post=6781"}],"version-history":[{"count":0,"href":"https:\/\/tiennong.vn\/en\/wp-json\/wp\/v2\/pages\/6781\/revisions"}],"wp:attachment":[{"href":"https:\/\/tiennong.vn\/en\/wp-json\/wp\/v2\/media?parent=6781"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}