{"id":1353,"date":"2026-04-10T07:36:29","date_gmt":"2026-04-10T07:36:29","guid":{"rendered":"https:\/\/kopp.kengweb.co.th\/?page_id=1353"},"modified":"2026-04-17T08:42:18","modified_gmt":"2026-04-17T08:42:18","slug":"gallerybatman","status":"publish","type":"page","link":"https:\/\/kopp.kengweb.co.th\/index.php\/gallerybatman\/","title":{"rendered":"GalleryBatman"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1353\" class=\"elementor elementor-1353\" data-elementor-post-type=\"page\">\n\t\t\t\t<header class=\"elementor-element elementor-element-172836c7 e-con-full e-flex e-con e-parent\" data-id=\"172836c7\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;position&quot;:&quot;fixed&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-6cdd69b8 e-con-full e-flex e-con e-child\" data-id=\"6cdd69b8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-77fef53d elementor-widget elementor-widget-image\" data-id=\"77fef53d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/kopp.kengweb.co.th\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"2560\" height=\"2560\" src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/CITYPNG.COMBatman-White-Paint-Splash-Logo-Sign-Icon-PNG-1500x1500-2-scaled.png\" class=\"attachment-full size-full wp-image-407\" alt=\"\" srcset=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/CITYPNG.COMBatman-White-Paint-Splash-Logo-Sign-Icon-PNG-1500x1500-2-scaled.png 2560w, https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/CITYPNG.COMBatman-White-Paint-Splash-Logo-Sign-Icon-PNG-1500x1500-2-300x300.png 300w, https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/CITYPNG.COMBatman-White-Paint-Splash-Logo-Sign-Icon-PNG-1500x1500-2-1024x1024.png 1024w, https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/CITYPNG.COMBatman-White-Paint-Splash-Logo-Sign-Icon-PNG-1500x1500-2-150x150.png 150w, https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/CITYPNG.COMBatman-White-Paint-Splash-Logo-Sign-Icon-PNG-1500x1500-2-768x768.png 768w, https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/CITYPNG.COMBatman-White-Paint-Splash-Logo-Sign-Icon-PNG-1500x1500-2-1536x1536.png 1536w, https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/CITYPNG.COMBatman-White-Paint-Splash-Logo-Sign-Icon-PNG-1500x1500-2-2048x2048.png 2048w\" sizes=\"(max-width: 2560px) 100vw, 2560px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4c19c944 e-con-full e-flex e-con e-child\" data-id=\"4c19c944\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5a561b5f elementor-nav-menu--stretch elementor-widget__width-auto elementor-nav-menu__text-align-center elementor-nav-menu--dropdown-tablet elementor-nav-menu--toggle elementor-nav-menu--burger elementor-widget elementor-widget-nav-menu\" data-id=\"5a561b5f\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;full_width&quot;:&quot;stretch&quot;,&quot;layout&quot;:&quot;horizontal&quot;,&quot;submenu_icon&quot;:{&quot;value&quot;:&quot;&lt;svg aria-hidden=\\&quot;true\\&quot; class=\\&quot;e-font-icon-svg e-fas-caret-down\\&quot; viewBox=\\&quot;0 0 320 512\\&quot; xmlns=\\&quot;http:\\\/\\\/www.w3.org\\\/2000\\\/svg\\&quot;&gt;&lt;path d=\\&quot;M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\&quot;&gt;&lt;\\\/path&gt;&lt;\\\/svg&gt;&quot;,&quot;library&quot;:&quot;fa-solid&quot;},&quot;toggle&quot;:&quot;burger&quot;}\" data-widget_type=\"nav-menu.default\">\n\t\t\t\t\t\t\t\t<nav aria-label=\"Menu\" class=\"elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-horizontal e--pointer-background e--animation-sweep-right\">\n\t\t\t\t<ul id=\"menu-1-5a561b5f\" class=\"elementor-nav-menu\"><li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-1960\"><a href=\"#\" class=\"elementor-item elementor-item-anchor menu-link\">Home<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1958\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/about-us\/\" class=\"elementor-item menu-link\">About Us<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1977\"><a aria-expanded=\"false\" href=\"#\" class=\"elementor-item elementor-item-anchor menu-link\">Pages<span role=\"button\" class=\"dropdown-menu-toggle ast-header-navigation-arrow\" tabindex=\"0\" aria-expanded=\"false\" aria-label=\"Menu Toggle\" aria-haspopup=\"true\"><\/span><\/a>\n<ul class=\"sub-menu elementor-nav-menu--dropdown\">\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3077\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/our-team\/\" class=\"elementor-sub-item menu-link\">Our Team<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3071\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/careers\/\" class=\"elementor-sub-item menu-link\">Careers<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3074\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/career-detail\/\" class=\"elementor-sub-item menu-link\">Career Detail<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3089\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/pricing-table\/\" class=\"elementor-sub-item menu-link\">Pricing Table<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3066\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/faqs\/\" class=\"elementor-sub-item menu-link\">FAQs<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3075\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/404-error\/\" class=\"elementor-sub-item menu-link\">404 Error<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1979\"><a aria-expanded=\"false\" href=\"#\" class=\"elementor-sub-item elementor-item-anchor menu-link\">Shop<span role=\"button\" class=\"dropdown-menu-toggle ast-header-navigation-arrow\" tabindex=\"0\" aria-expanded=\"false\" aria-label=\"Menu Toggle\" aria-haspopup=\"true\"><\/span><\/a>\n\t<ul class=\"sub-menu elementor-nav-menu--dropdown\">\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3065\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/our-products\/\" class=\"elementor-sub-item menu-link\">Our Products<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3088\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/product-detail\/\" class=\"elementor-sub-item menu-link\">Product Detail<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3070\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/cart\/\" class=\"elementor-sub-item menu-link\">Cart<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3069\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/checkout-2\/\" class=\"elementor-sub-item menu-link\">Checkout<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3084\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/wishlist\/\" class=\"elementor-sub-item menu-link\">Wishlist<\/a><\/li>\n\t<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1978\"><a aria-expanded=\"false\" href=\"#blog\" class=\"elementor-item elementor-item-anchor menu-link\">Blog<span role=\"button\" class=\"dropdown-menu-toggle ast-header-navigation-arrow\" tabindex=\"0\" aria-expanded=\"false\" aria-label=\"Menu Toggle\" aria-haspopup=\"true\"><\/span><\/a>\n<ul class=\"sub-menu elementor-nav-menu--dropdown\">\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3072\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/blog-grid\/\" class=\"elementor-sub-item menu-link\">Blog Grid<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1980\"><a aria-expanded=\"false\" href=\"#\" class=\"elementor-sub-item elementor-item-anchor menu-link\">Blog Listing<span role=\"button\" class=\"dropdown-menu-toggle ast-header-navigation-arrow\" tabindex=\"0\" aria-expanded=\"false\" aria-label=\"Menu Toggle\" aria-haspopup=\"true\"><\/span><\/a>\n\t<ul class=\"sub-menu elementor-nav-menu--dropdown\">\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3068\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/circle-left-slidebar\/\" class=\"elementor-sub-item menu-link\">Circle Left Slidebar<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3067\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/circle-right-slidebar\/\" class=\"elementor-sub-item menu-link\">Circle Right Slidebar<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3073\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/circle-no-slidebar\/\" class=\"elementor-sub-item menu-link\">Circle No Slidebar<\/a><\/li>\n\t<\/ul>\n<\/li>\n\t<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1981\"><a aria-expanded=\"false\" href=\"#\" class=\"elementor-sub-item elementor-item-anchor menu-link\">Blog Details<span role=\"button\" class=\"dropdown-menu-toggle ast-header-navigation-arrow\" tabindex=\"0\" aria-expanded=\"false\" aria-label=\"Menu Toggle\" aria-haspopup=\"true\"><\/span><\/a>\n\t<ul class=\"sub-menu elementor-nav-menu--dropdown\">\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3087\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/square-left-slidebar\/\" class=\"elementor-sub-item menu-link\">Square Left Slidebar<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3085\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/square-right-slidebar\/\" class=\"elementor-sub-item menu-link\">Square Right Slidebar<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3086\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/square-no-slidebar\/\" class=\"elementor-sub-item menu-link\">Square No Slidebar<\/a><\/li>\n\t<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1957\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/contact-2\/\" class=\"elementor-item menu-link\">Contact<\/a><\/li>\n<\/ul>\t\t\t<\/nav>\n\t\t\t\t\t<div class=\"elementor-menu-toggle\" role=\"button\" tabindex=\"0\" aria-label=\"Menu Toggle\" aria-expanded=\"false\">\n\t\t\t<svg aria-hidden=\"true\" role=\"presentation\" class=\"elementor-menu-toggle__icon--open e-font-icon-svg e-eicon-menu-bar\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M104 333H896C929 333 958 304 958 271S929 208 896 208H104C71 208 42 237 42 271S71 333 104 333ZM104 583H896C929 583 958 554 958 521S929 458 896 458H104C71 458 42 487 42 521S71 583 104 583ZM104 833H896C929 833 958 804 958 771S929 708 896 708H104C71 708 42 737 42 771S71 833 104 833Z\"><\/path><\/svg><svg aria-hidden=\"true\" role=\"presentation\" class=\"elementor-menu-toggle__icon--close e-font-icon-svg e-eicon-close\" viewBox=\"0 0 1000 1000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M742 167L500 408 258 167C246 154 233 150 217 150 196 150 179 158 167 167 154 179 150 196 150 212 150 229 154 242 171 254L408 500 167 742C138 771 138 800 167 829 196 858 225 858 254 829L496 587 738 829C750 842 767 846 783 846 800 846 817 842 829 829 842 817 846 804 846 783 846 767 842 750 829 737L588 500 833 258C863 229 863 200 833 171 804 137 775 137 742 167Z\"><\/path><\/svg>\t\t<\/div>\n\t\t\t\t\t<nav class=\"elementor-nav-menu--dropdown elementor-nav-menu__container\" aria-hidden=\"true\">\n\t\t\t\t<ul id=\"menu-2-5a561b5f\" class=\"elementor-nav-menu\"><li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-1960\"><a href=\"#\" class=\"elementor-item elementor-item-anchor menu-link\" tabindex=\"-1\">Home<\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1958\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/about-us\/\" class=\"elementor-item menu-link\" tabindex=\"-1\">About Us<\/a><\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1977\"><a aria-expanded=\"false\" href=\"#\" class=\"elementor-item elementor-item-anchor menu-link\" tabindex=\"-1\">Pages<span role=\"button\" class=\"dropdown-menu-toggle ast-header-navigation-arrow\" tabindex=\"0\" aria-expanded=\"false\" aria-label=\"Menu Toggle\" aria-haspopup=\"true\"><\/span><\/a>\n<ul class=\"sub-menu elementor-nav-menu--dropdown\">\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3077\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/our-team\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Our Team<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3071\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/careers\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Careers<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3074\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/career-detail\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Career Detail<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3089\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/pricing-table\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Pricing Table<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3066\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/faqs\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">FAQs<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3075\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/404-error\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">404 Error<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1979\"><a aria-expanded=\"false\" href=\"#\" class=\"elementor-sub-item elementor-item-anchor menu-link\" tabindex=\"-1\">Shop<span role=\"button\" class=\"dropdown-menu-toggle ast-header-navigation-arrow\" tabindex=\"0\" aria-expanded=\"false\" aria-label=\"Menu Toggle\" aria-haspopup=\"true\"><\/span><\/a>\n\t<ul class=\"sub-menu elementor-nav-menu--dropdown\">\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3065\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/our-products\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Our Products<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3088\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/product-detail\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Product Detail<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3070\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/cart\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Cart<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3069\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/checkout-2\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Checkout<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3084\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/wishlist\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Wishlist<\/a><\/li>\n\t<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1978\"><a aria-expanded=\"false\" href=\"#blog\" class=\"elementor-item elementor-item-anchor menu-link\" tabindex=\"-1\">Blog<span role=\"button\" class=\"dropdown-menu-toggle ast-header-navigation-arrow\" tabindex=\"0\" aria-expanded=\"false\" aria-label=\"Menu Toggle\" aria-haspopup=\"true\"><\/span><\/a>\n<ul class=\"sub-menu elementor-nav-menu--dropdown\">\n\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3072\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/blog-grid\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Blog Grid<\/a><\/li>\n\t<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1980\"><a aria-expanded=\"false\" href=\"#\" class=\"elementor-sub-item elementor-item-anchor menu-link\" tabindex=\"-1\">Blog Listing<span role=\"button\" class=\"dropdown-menu-toggle ast-header-navigation-arrow\" tabindex=\"0\" aria-expanded=\"false\" aria-label=\"Menu Toggle\" aria-haspopup=\"true\"><\/span><\/a>\n\t<ul class=\"sub-menu elementor-nav-menu--dropdown\">\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3068\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/circle-left-slidebar\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Circle Left Slidebar<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3067\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/circle-right-slidebar\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Circle Right Slidebar<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3073\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/circle-no-slidebar\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Circle No Slidebar<\/a><\/li>\n\t<\/ul>\n<\/li>\n\t<li class=\"menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1981\"><a aria-expanded=\"false\" href=\"#\" class=\"elementor-sub-item elementor-item-anchor menu-link\" tabindex=\"-1\">Blog Details<span role=\"button\" class=\"dropdown-menu-toggle ast-header-navigation-arrow\" tabindex=\"0\" aria-expanded=\"false\" aria-label=\"Menu Toggle\" aria-haspopup=\"true\"><\/span><\/a>\n\t<ul class=\"sub-menu elementor-nav-menu--dropdown\">\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3087\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/square-left-slidebar\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Square Left Slidebar<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3085\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/square-right-slidebar\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Square Right Slidebar<\/a><\/li>\n\t\t<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-3086\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/square-no-slidebar\/\" class=\"elementor-sub-item menu-link\" tabindex=\"-1\">Square No Slidebar<\/a><\/li>\n\t<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1957\"><a href=\"https:\/\/kopp.kengweb.co.th\/index.php\/contact-2\/\" class=\"elementor-item menu-link\" tabindex=\"-1\">Contact<\/a><\/li>\n<\/ul>\t\t\t<\/nav>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-33c26048 elementor-widget__width-auto elementor-widget elementor-widget-button\" data-id=\"33c26048\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/kopp.kengweb.co.th\/index.php\/explore\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Explore<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/header>\n\t\t<div class=\"elementor-element elementor-element-c1ecfc1 e-con-full e-flex e-con e-parent\" data-id=\"c1ecfc1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a0a5d1 elementor-widget elementor-widget-html\" data-id=\"7a0a5d1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n.dragon-rotate-section {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100vh;\r\n  overflow: hidden;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  perspective: 1800px;\r\n}\r\n\r\n.dragon-stage {\r\n  position: relative;\r\n  width: 1100px;\r\n  height: 760px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transform-style: preserve-3d;\r\n}\r\n\r\n.dragon-ring {\r\n  position: relative;\r\n  width: 520px;\r\n  height: 520px;\r\n  transform-style: preserve-3d;\r\n  transform: rotateX(-15deg) rotateY(0deg);\r\n  will-change: transform;\r\n}\r\n\r\n.dragon-card {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  width: 220px;\r\n  height: 320px;\r\n  margin-left: -110px;\r\n  margin-top: -160px;\r\n  transform-style: preserve-3d;\r\n  will-change: transform;\r\n  transition:\r\n    transform 1.35s cubic-bezier(.22, 1, .36, 1),\r\n    filter 0.55s ease,\r\n    opacity 0.55s ease;\r\n}\r\n\r\n.card-inner {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 100%;\r\n  transform-style: preserve-3d;\r\n  transition: transform 0.9s cubic-bezier(.22, .61, .36, 1);\r\n}\r\n\r\n.card-face {\r\n  position: absolute;\r\n  inset: 0;\r\n  overflow: hidden;\r\n  border-radius: 22px;\r\n  background: #000;\r\n  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.18);\r\n  backface-visibility: hidden;\r\n  -webkit-backface-visibility: hidden;\r\n}\r\n\r\n.card-face img {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n}\r\n\r\n.card-face.front {\r\n  transform: rotateY(0deg);\r\n}\r\n\r\n.card-face.front img {\r\n  object-fit: cover;\r\n  object-position: center center;\r\n  transform: scale(1.14);\r\n  transform-origin: center center;\r\n}\r\n\r\n.card-face.back {\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n.card-face.back img {\r\n  object-fit: cover;\r\n  object-position: center center;\r\n}\r\n\r\n.card-face.back.fallback-back {\r\n  background: linear-gradient(135deg, #1d2238, #3e4868);\r\n}\r\n\r\n.dragon-stage.allow-hover .dragon-card:hover {\r\n  filter: brightness(1.05);\r\n}\r\n\r\n.dragon-card.is-featured {\r\n  filter: brightness(1.10) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.18));\r\n}\r\n\r\n.dragon-card.is-featured .card-inner {\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n.dragon-stage.is-busy .dragon-card {\r\n  pointer-events: none;\r\n}\r\n\r\n.dragon-stage:not(.is-spinning) .dragon-card.is-featured .card-face.back {\r\n  opacity: 1 !important;\r\n  visibility: visible !important;\r\n}\r\n\r\n.dragon-stage:not(.is-spinning) .dragon-card.is-featured .card-inner {\r\n  transform: rotateY(180deg);\r\n}\r\n\r\n@media (max-width: 767px) {\r\n  .dragon-rotate-section {\r\n    height: 680px;\r\n  }\r\n\r\n  .dragon-stage {\r\n    width: 100%;\r\n    height: 500px;\r\n  }\r\n\r\n  .dragon-ring {\r\n    width: 280px;\r\n    height: 280px;\r\n  }\r\n\r\n  .dragon-card {\r\n    width: 140px;\r\n    height: 200px;\r\n    margin-left: -70px;\r\n    margin-top: -100px;\r\n  }\r\n\r\n  .card-face.front img {\r\n    transform: scale(1.1);\r\n  }\r\n}\r\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9d909ff elementor-widget elementor-widget-html\" data-id=\"9d909ff\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"dragon-rotate-section\">\r\n  <div class=\"dragon-stage allow-hover\" id=\"dragonStage\">\r\n    <div class=\"dragon-ring\" id=\"dragonRing\">\r\n\r\n      <!-- 1 -->\r\n      <div class=\"dragon-card\">\r\n        <div class=\"card-inner\">\r\n          <div class=\"card-face front\">\r\n            <img decoding=\"async\" src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\" alt=\"\">\r\n          <\/div>\r\n          <div class=\"card-face back\">\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\"\r\n              data-reveal=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/8759934-jrjrhr.jpg\"\r\n              alt=\"\"\r\n            >\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 2 -->\r\n      <div class=\"dragon-card\">\r\n        <div class=\"card-inner\">\r\n          <div class=\"card-face front\">\r\n            <img decoding=\"async\" src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\" alt=\"\">\r\n          <\/div>\r\n          <div class=\"card-face back\">\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\"\r\n              data-reveal=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/9725017-actioncomics1081davidtalaski.jpg\"\r\n              alt=\"\"\r\n            >\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 3 -->\r\n      <div class=\"dragon-card\">\r\n        <div class=\"card-inner\">\r\n          <div class=\"card-face front\">\r\n            <img decoding=\"async\" src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\" alt=\"\">\r\n          <\/div>\r\n          <div class=\"card-face back\">\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\"\r\n              data-reveal=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/7538232-three-jokers-1-cvr-fnl-1583776056592.jpg\"\r\n              alt=\"\"\r\n            >\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 4 -->\r\n      <div class=\"dragon-card\">\r\n        <div class=\"card-inner\">\r\n          <div class=\"card-face front\">\r\n            <img decoding=\"async\" src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\" alt=\"\">\r\n          <\/div>\r\n          <div class=\"card-face back\">\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\"\r\n              data-reveal=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/8625162-dceased-war-of-the-undead-gods-4-homage-variant-675x1024-1.jpg\"\r\n              alt=\"\"\r\n            >\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 5 -->\r\n      <div class=\"dragon-card\">\r\n        <div class=\"card-inner\">\r\n          <div class=\"card-face front\">\r\n            <img decoding=\"async\" src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\" alt=\"\">\r\n          <\/div>\r\n          <div class=\"card-face back\">\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\"\r\n              data-reveal=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/8057339-e2lokwbxsaazhqn.jpg\"\r\n              alt=\"\"\r\n            >\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 6 -->\r\n      <div class=\"dragon-card\">\r\n        <div class=\"card-inner\">\r\n          <div class=\"card-face front\">\r\n            <img decoding=\"async\" src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\" alt=\"\">\r\n          <\/div>\r\n          <div class=\"card-face back\">\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\"\r\n              data-reveal=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/9537831-the-flash-18-oto-segovia.jpg\"\r\n              alt=\"\"\r\n            >\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 7 -->\r\n      <div class=\"dragon-card\">\r\n        <div class=\"card-inner\">\r\n          <div class=\"card-face front\">\r\n            <img decoding=\"async\" src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\" alt=\"\">\r\n          <\/div>\r\n          <div class=\"card-face back\">\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\"\r\n              data-reveal=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/8988502-ezgif-5-6e9998db59.jpg\"\r\n              alt=\"\"\r\n            >\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- 8 -->\r\n      <div class=\"dragon-card\">\r\n        <div class=\"card-inner\">\r\n          <div class=\"card-face front\">\r\n            <img decoding=\"async\" src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\" alt=\"\">\r\n          <\/div>\r\n          <div class=\"card-face back\">\r\n            <img decoding=\"async\"\r\n              src=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\"\r\n              data-reveal=\"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/9609856-ezgif-3-c48330599a.jpg\"\r\n              alt=\"\"\r\n            >\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-edd0e15 elementor-widget elementor-widget-html\" data-id=\"edd0e15\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n  const ring = document.getElementById(\"dragonRing\");\r\n  const stage = document.getElementById(\"dragonStage\");\r\n  if (!ring || !stage) return;\r\n\r\n  const cards = Array.from(ring.querySelectorAll(\".dragon-card\"));\r\n  if (!cards.length) return;\r\n\r\n  const CARD_BACK_IMAGE = \"https:\/\/kopp.kengweb.co.th\/wp-content\/uploads\/2026\/04\/\u2014Pngtree\u2014tarot-divination-diablo-card-back_6690614.png\";\r\n\r\n  const cardCount = cards.length;\r\n  const angleStep = 360 \/ cardCount;\r\n  const tiltX = -15;\r\n\r\n  const desktopRadius = 430;\r\n  const mobileRadius = 250;\r\n\r\n  const normalSpeed = 720;\r\n  const maxTurboSpeed = 22000;\r\n  const specialEveryMs = 18000;\r\n\r\n  const accelDuration = 2200;\r\n  const decelDuration = 2200;\r\n  const featuredDuration = 1800;\r\n  const redealHoldMs = 650;\r\n\r\n  const alignDuration = 650;\r\n  const gatherStepMs = 180;\r\n  const shuffleStepMs = 190;\r\n  const redealStepMs = 170;\r\n  const preResumeAlignDuration = 1100;\r\n  const resumeDuration = 2400;\r\n\r\n  let currentY = 0;\r\n  let currentSpeed = normalSpeed;\r\n  let lastTime = performance.now();\r\n\r\n  let mode = \"normal\";\r\n  \/\/ normal | accelerating | decelerating | featured | aligning | gathering | shuffling | redealing | preResuming | resuming\r\n\r\n  let nextSequenceAt = performance.now() + specialEveryMs;\r\n\r\n  let selectedIndex = -1;\r\n  let targetStopAngle = 0;\r\n\r\n  let accelStartTime = 0;\r\n  let decelStartTime = 0;\r\n  let featuredStartTime = 0;\r\n  let alignStartTime = 0;\r\n  let gatherStartTime = 0;\r\n  let shuffleStartTime = 0;\r\n  let redealStartTime = 0;\r\n  let preResumeStartTime = 0;\r\n  let resumeStartTime = 0;\r\n\r\n  let decelStartAngle = 0;\r\n  let decelEndAngle = 0;\r\n  let resumeStartSpeed = 0;\r\n\r\n  let originalLayouts = [];\r\n  let alignedLayouts = [];\r\n  let gatheredLayouts = [];\r\n  let shuffledLayouts = [];\r\n  let redealLayouts = [];\r\n\r\n  let gatherOrder = [];\r\n  let shuffleOrder = [];\r\n  let redealOrder = [];\r\n\r\n  let gatheredCount = 0;\r\n  let shuffledCount = 0;\r\n  let redealtCount = 0;\r\n\r\n  function getRadius() {\r\n    return window.innerWidth <= 767 ? mobileRadius : desktopRadius;\r\n  }\r\n\r\n  function normalizeDeg(deg) {\r\n    return ((deg % 360) + 360) % 360;\r\n  }\r\n\r\n  function shortestForwardDelta(current, target) {\r\n    const c = normalizeDeg(current);\r\n    const t = normalizeDeg(target);\r\n    let delta = t - c;\r\n    if (delta < 0) delta += 360;\r\n    return delta;\r\n  }\r\n\r\n  function easeOutCubic(t) {\r\n    return 1 - Math.pow(1 - t, 3);\r\n  }\r\n\r\n  function easeInOutCubic(t) {\r\n    return t < 0.5\r\n      ? 4 * t * t * t\r\n      : 1 - Math.pow(-2 * t + 2, 3) \/ 2;\r\n  }\r\n\r\n  function easeOutQuart(t) {\r\n    return 1 - Math.pow(1 - t, 4);\r\n  }\r\n\r\n  function clearFeatured() {\r\n    cards.forEach(card => card.classList.remove(\"is-featured\"));\r\n  }\r\n\r\n  function setAllCardsToBackFaceImage() {\r\n    cards.forEach((card) => {\r\n      const frontImg = card.querySelector(\".card-face.front img\");\r\n      const backImg = card.querySelector(\".card-face.back img\");\r\n\r\n      if (frontImg) frontImg.src = CARD_BACK_IMAGE;\r\n      if (backImg) backImg.src = CARD_BACK_IMAGE;\r\n    });\r\n  }\r\n\r\n  function revealSelectedCardRealImage(index) {\r\n    const card = cards[index];\r\n    if (!card) return;\r\n\r\n    const backImg = card.querySelector(\".card-face.back img\");\r\n    if (!backImg) return;\r\n\r\n    const revealSrc = backImg.dataset.reveal;\r\n    if (revealSrc) {\r\n      backImg.src = revealSrc;\r\n    }\r\n  }\r\n\r\n  function setRingRotation(deg) {\r\n    ring.style.transform = `rotateX(${tiltX}deg) rotateY(${deg}deg)`;\r\n  }\r\n\r\n  function setFlatRing() {\r\n    ring.style.transform = `rotateX(0deg) rotateY(0deg)`;\r\n  }\r\n\r\n  function resetCardTransitions() {\r\n    cards.forEach((card) => {\r\n      card.style.transition =\r\n        \"transform 1.35s cubic-bezier(.22,1,.36,1), filter 0.55s ease, opacity 0.55s ease\";\r\n      card.style.backfaceVisibility = \"hidden\";\r\n      card.style.transformStyle = \"preserve-3d\";\r\n      card.style.willChange = \"transform\";\r\n    });\r\n  }\r\n\r\n  function resetRingTransition() {\r\n    ring.style.transition = \"\";\r\n    ring.style.willChange = \"transform\";\r\n  }\r\n\r\n  function applyRingLayout() {\r\n    const radius = getRadius();\r\n    originalLayouts = [];\r\n\r\n    cards.forEach((card, i) => {\r\n      const angle = i * angleStep;\r\n      const transform = `rotateY(${angle}deg) translateZ(${radius}px) rotateX(15deg)`;\r\n      originalLayouts.push(transform);\r\n      card.style.transform = transform;\r\n      card.style.zIndex = \"1\";\r\n      card.style.opacity = \"1\";\r\n    });\r\n  }\r\n\r\n  function buildAlignedLayouts() {\r\n    const radius = getRadius();\r\n    alignedLayouts = [];\r\n\r\n    cards.forEach((card, i) => {\r\n      const angle = i * angleStep;\r\n      const x = Math.sin(angle * Math.PI \/ 180) * radius;\r\n      const z = Math.cos(angle * Math.PI \/ 180) * radius * 0.35;\r\n      const y = 0;\r\n\r\n      const transform =\r\n        `translate3d(${x}px, ${y}px, ${z}px) rotateY(180deg) rotateX(0deg) rotateZ(0deg)`;\r\n\r\n      alignedLayouts.push(transform);\r\n    });\r\n  }\r\n\r\n  function getRandomIndex() {\r\n    return Math.floor(Math.random() * cardCount);\r\n  }\r\n\r\n  function shuffledArray(arr) {\r\n    const copy = [...arr];\r\n    for (let i = copy.length - 1; i > 0; i--) {\r\n      const j = Math.floor(Math.random() * (i + 1));\r\n      [copy[i], copy[j]] = [copy[j], copy[i]];\r\n    }\r\n    return copy;\r\n  }\r\n\r\n  function startSpecialSequence(now) {\r\n    setAllCardsToBackFaceImage();\r\n\r\n    mode = \"accelerating\";\r\n    accelStartTime = now;\r\n    currentSpeed = normalSpeed;\r\n\r\n    stage.classList.remove(\"allow-hover\");\r\n    stage.classList.add(\"is-busy\");\r\n    stage.classList.add(\"is-spinning\");\r\n\r\n    clearFeatured();\r\n\r\n    selectedIndex = getRandomIndex();\r\n\r\n    const targetCardAngle = selectedIndex * angleStep;\r\n    const targetRingAngle = 360 - targetCardAngle;\r\n\r\n    const forwardDelta = shortestForwardDelta(currentY, targetRingAngle);\r\n    targetStopAngle = currentY + forwardDelta + (360 * 10);\r\n  }\r\n\r\n  function updateNormal(dt, now) {\r\n    currentY += currentSpeed * dt;\r\n\r\n    if (now >= nextSequenceAt) {\r\n      startSpecialSequence(now);\r\n    }\r\n  }\r\n\r\n  function updateAccelerating(now, dt) {\r\n    const progress = Math.min((now - accelStartTime) \/ accelDuration, 1);\r\n    const eased = easeOutCubic(progress);\r\n\r\n    currentSpeed = normalSpeed + (maxTurboSpeed - normalSpeed) * eased;\r\n    currentY += currentSpeed * dt;\r\n\r\n    if (progress >= 1) {\r\n      mode = \"decelerating\";\r\n      decelStartTime = now;\r\n      decelStartAngle = currentY;\r\n      decelEndAngle = targetStopAngle;\r\n    }\r\n  }\r\n\r\n  function updateDecelerating(now) {\r\n    const progress = Math.min((now - decelStartTime) \/ decelDuration, 1);\r\n    const eased = easeOutQuart(progress);\r\n\r\n    currentY = decelStartAngle + (decelEndAngle - decelStartAngle) * eased;\r\n\r\n    if (progress >= 1) {\r\n      currentY = decelEndAngle;\r\n      currentSpeed = 0.0001;\r\n      mode = \"featured\";\r\n      featuredStartTime = now;\r\n\r\n      stage.classList.remove(\"is-spinning\");\r\n      clearFeatured();\r\n\r\n      revealSelectedCardRealImage(selectedIndex);\r\n\r\n      if (cards[selectedIndex]) {\r\n        cards[selectedIndex].classList.add(\"is-featured\");\r\n      }\r\n    }\r\n  }\r\n\r\n  function updateFeatured(now) {\r\n    if (now - featuredStartTime >= featuredDuration) {\r\n      startAligning(now);\r\n    }\r\n  }\r\n\r\n  function startAligning(now) {\r\n    mode = \"aligning\";\r\n    alignStartTime = now;\r\n\r\n    clearFeatured();\r\n    setAllCardsToBackFaceImage();\r\n\r\n    ring.style.transition = \"\";\r\n    setFlatRing();\r\n    buildAlignedLayouts();\r\n\r\n    cards.forEach((card, i) => {\r\n      card.style.zIndex = String(80 + i);\r\n      card.style.transform = alignedLayouts[i];\r\n    });\r\n  }\r\n\r\n  function updateAligning(now) {\r\n    const progress = Math.min((now - alignStartTime) \/ alignDuration, 1);\r\n\r\n    if (progress >= 1) {\r\n      startGathering(now);\r\n    }\r\n  }\r\n\r\n  function startGathering(now) {\r\n    mode = \"gathering\";\r\n    gatherStartTime = now;\r\n    gatheredCount = 0;\r\n\r\n    const depthStep = window.innerWidth <= 767 ? 10 : 14;\r\n    const floatYBase = window.innerWidth <= 767 ? 26 : 42;\r\n\r\n    gatherOrder = cards.map((_, i) => i);\r\n    gatheredLayouts = [];\r\n\r\n    cards.forEach((card, i) => {\r\n      const x = 0;\r\n      const y = -floatYBase - (i * 3);\r\n      const z = i * depthStep;\r\n      const rotZ = (i - (cardCount - 1) \/ 2) * 0.9;\r\n\r\n      const transform =\r\n        `translate3d(${x}px, ${y}px, ${z}px) rotateY(180deg) rotateX(0deg) rotateZ(${rotZ}deg)`;\r\n\r\n      gatheredLayouts.push(transform);\r\n    });\r\n  }\r\n\r\n  function updateGathering(now) {\r\n    const shouldGather = Math.min(\r\n      cardCount,\r\n      Math.floor((now - gatherStartTime) \/ gatherStepMs) + 1\r\n    );\r\n\r\n    while (gatheredCount < shouldGather) {\r\n      const i = gatherOrder[gatheredCount];\r\n      const card = cards[i];\r\n      card.style.transform = gatheredLayouts[i];\r\n      card.style.zIndex = String(100 + gatheredCount);\r\n      gatheredCount++;\r\n    }\r\n\r\n    if (gatheredCount >= cardCount) {\r\n      startShuffle(now);\r\n    }\r\n  }\r\n\r\n  function startShuffle(now) {\r\n    mode = \"shuffling\";\r\n    shuffleStartTime = now;\r\n    shuffledCount = 0;\r\n\r\n    const stackPositions = shuffledArray(cards.map((_, i) => i));\r\n    shuffleOrder = shuffledArray(cards.map((_, i) => i));\r\n    shuffledLayouts = [];\r\n\r\n    const spread = window.innerWidth <= 767 ? 34 : 48;\r\n    const centerBias = (cardCount - 1) \/ 2;\r\n    const hoverY = window.innerWidth <= 767 ? 18 : 28;\r\n\r\n    cards.forEach((card, i) => {\r\n      const targetPos = stackPositions[i];\r\n      const x = (targetPos - centerBias) * spread;\r\n      const y = (i % 2 === 0 ? -hoverY : hoverY);\r\n      const z = i * 16;\r\n      const rotZ = (Math.random() * 4) - 2;\r\n\r\n      const transform =\r\n        `translate3d(${x}px, ${y}px, ${z}px) rotateY(180deg) rotateX(0deg) rotateZ(${rotZ}deg)`;\r\n\r\n      shuffledLayouts[i] = transform;\r\n    });\r\n\r\n    shuffleOrder.forEach((cardIndex, orderIndex) => {\r\n      cards[cardIndex].style.zIndex = String(140 + orderIndex);\r\n    });\r\n  }\r\n\r\n  function updateShuffling(now) {\r\n    const shouldShuffle = Math.min(\r\n      cardCount,\r\n      Math.floor((now - shuffleStartTime) \/ shuffleStepMs) + 1\r\n    );\r\n\r\n    while (shuffledCount < shouldShuffle) {\r\n      const cardIndex = shuffleOrder[shuffledCount];\r\n      const card = cards[cardIndex];\r\n      card.style.transform = shuffledLayouts[cardIndex];\r\n      card.style.zIndex = String(140 + shuffledCount);\r\n      shuffledCount++;\r\n    }\r\n\r\n    if (shuffledCount >= cardCount) {\r\n      startRedeal(now);\r\n    }\r\n  }\r\n\r\n  function startRedeal(now) {\r\n    mode = \"redealing\";\r\n    redealStartTime = now;\r\n    redealtCount = 0;\r\n    redealLayouts = [];\r\n\r\n    redealOrder = cards.map((_, i) => i);\r\n    const selectedFirst = [selectedIndex];\r\n    const others = redealOrder.filter(i => i !== selectedIndex);\r\n    redealOrder = [...selectedFirst, ...others];\r\n\r\n    const lift = window.innerWidth <= 767 ? 36 : 56;\r\n\r\n    cards.forEach((card, i) => {\r\n      const angle = i * angleStep;\r\n      const radius = getRadius();\r\n\r\n      const y = selectedIndex === i ? lift : -lift * 0.35;\r\n      const transform =\r\n        `translate3d(0px, ${y}px, 0px) rotateY(${angle}deg) translateZ(${radius}px) rotateX(15deg)`;\r\n\r\n      redealLayouts[i] = transform;\r\n    });\r\n  }\r\n\r\n  function updateRedealing(now) {\r\n    const shouldRedeal = Math.min(\r\n      cardCount,\r\n      Math.floor((now - redealStartTime) \/ redealStepMs) + 1\r\n    );\r\n\r\n    while (redealtCount < shouldRedeal) {\r\n      const cardIndex = redealOrder[redealtCount];\r\n      const card = cards[cardIndex];\r\n\r\n      card.style.transform = redealLayouts[cardIndex];\r\n      card.style.zIndex = \"1\";\r\n      redealtCount++;\r\n    }\r\n\r\n    if (redealtCount >= cardCount) {\r\n      const totalRedealTime = (cardCount - 1) * redealStepMs + redealHoldMs;\r\n\r\n      if (now - redealStartTime >= totalRedealTime) {\r\n        startPreResuming(now);\r\n      }\r\n    }\r\n  }\r\n\r\n  function startPreResuming(now) {\r\n    mode = \"preResuming\";\r\n    preResumeStartTime = now;\r\n\r\n    setAllCardsToBackFaceImage();\r\n    applyRingLayout();\r\n\r\n    ring.style.transition = `transform ${preResumeAlignDuration}ms cubic-bezier(.22,1,.36,1)`;\r\n    ring.style.transform = `rotateX(0deg) rotateY(0deg)`;\r\n\r\n    ring.offsetHeight;\r\n\r\n    requestAnimationFrame(() => {\r\n      setRingRotation(currentY);\r\n    });\r\n  }\r\n\r\n  function updatePreResuming(now) {\r\n    const progress = Math.min((now - preResumeStartTime) \/ preResumeAlignDuration, 1);\r\n\r\n    if (progress >= 1) {\r\n      ring.style.transition = \"\";\r\n      mode = \"resuming\";\r\n      resumeStartTime = now;\r\n      resumeStartSpeed = 40;\r\n      currentSpeed = resumeStartSpeed;\r\n      stage.classList.add(\"is-spinning\");\r\n    }\r\n  }\r\n\r\n  function updateResuming(now, dt) {\r\n    const progress = Math.min((now - resumeStartTime) \/ resumeDuration, 1);\r\n    const eased = easeInOutCubic(progress);\r\n\r\n    currentSpeed = resumeStartSpeed + (normalSpeed - resumeStartSpeed) * eased;\r\n    currentY += currentSpeed * dt;\r\n\r\n    if (progress >= 1) {\r\n      currentSpeed = normalSpeed;\r\n      mode = \"normal\";\r\n      stage.classList.add(\"allow-hover\");\r\n      stage.classList.remove(\"is-busy\");\r\n      stage.classList.add(\"is-spinning\");\r\n      nextSequenceAt = now + specialEveryMs;\r\n    }\r\n  }\r\n\r\n  window.addEventListener(\"resize\", () => {\r\n    applyRingLayout();\r\n\r\n    if (\r\n      mode === \"aligning\" ||\r\n      mode === \"gathering\" ||\r\n      mode === \"shuffling\" ||\r\n      mode === \"redealing\"\r\n    ) {\r\n      setFlatRing();\r\n    } else {\r\n      setRingRotation(currentY);\r\n    }\r\n  });\r\n\r\n  function tick(now) {\r\n    const dt = Math.min((now - lastTime) \/ 1000, 0.05);\r\n    lastTime = now;\r\n\r\n    if (mode === \"normal\") {\r\n      updateNormal(dt, now);\r\n    } else if (mode === \"accelerating\") {\r\n      updateAccelerating(now, dt);\r\n    } else if (mode === \"decelerating\") {\r\n      updateDecelerating(now);\r\n    } else if (mode === \"featured\") {\r\n      updateFeatured(now);\r\n    } else if (mode === \"aligning\") {\r\n      updateAligning(now);\r\n    } else if (mode === \"gathering\") {\r\n      updateGathering(now);\r\n    } else if (mode === \"shuffling\") {\r\n      updateShuffling(now);\r\n    } else if (mode === \"redealing\") {\r\n      updateRedealing(now);\r\n    } else if (mode === \"preResuming\") {\r\n      updatePreResuming(now);\r\n    } else if (mode === \"resuming\") {\r\n      updateResuming(now, dt);\r\n    }\r\n\r\n    if (\r\n      mode === \"normal\" ||\r\n      mode === \"accelerating\" ||\r\n      mode === \"decelerating\" ||\r\n      mode === \"featured\" ||\r\n      mode === \"resuming\"\r\n    ) {\r\n      setRingRotation(currentY);\r\n    } else if (\r\n      mode === \"aligning\" ||\r\n      mode === \"gathering\" ||\r\n      mode === \"shuffling\" ||\r\n      mode === \"redealing\"\r\n    ) {\r\n      setFlatRing();\r\n    }\r\n\r\n    requestAnimationFrame(tick);\r\n  }\r\n\r\n  applyRingLayout();\r\n  resetCardTransitions();\r\n  resetRingTransition();\r\n  setAllCardsToBackFaceImage();\r\n  stage.classList.add(\"is-spinning\");\r\n  setRingRotation(currentY);\r\n  requestAnimationFrame(tick);\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Explore<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1353","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kopp.kengweb.co.th\/index.php\/wp-json\/wp\/v2\/pages\/1353","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kopp.kengweb.co.th\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kopp.kengweb.co.th\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kopp.kengweb.co.th\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kopp.kengweb.co.th\/index.php\/wp-json\/wp\/v2\/comments?post=1353"}],"version-history":[{"count":340,"href":"https:\/\/kopp.kengweb.co.th\/index.php\/wp-json\/wp\/v2\/pages\/1353\/revisions"}],"predecessor-version":[{"id":1724,"href":"https:\/\/kopp.kengweb.co.th\/index.php\/wp-json\/wp\/v2\/pages\/1353\/revisions\/1724"}],"wp:attachment":[{"href":"https:\/\/kopp.kengweb.co.th\/index.php\/wp-json\/wp\/v2\/media?parent=1353"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}