.elementor-5358 .elementor-element.elementor-element-235dbda{--display:flex;--min-height:75vh;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:60px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-5358 .elementor-element.elementor-element-95a5789 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-5358 .elementor-element.elementor-element-95a5789{text-align:center;}.elementor-5358 .elementor-element.elementor-element-95a5789 .elementor-heading-title{color:#000000;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5358 .elementor-element.elementor-element-4c52839{width:var( --container-widget-width, 59% );max-width:59%;--container-widget-width:59%;--container-widget-flex-grow:0;text-align:center;color:#000000;}.elementor-5358 .elementor-element.elementor-element-4c52839.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-4c52839 p{margin-block-end:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button{background-color:#0D1D1A;font-family:"Poppins", Sans-serif;font-weight:500;}.elementor-5358 .elementor-element.elementor-element-f1f30e2{width:var( --container-widget-width, 26% );max-width:26%;--container-widget-width:26%;--container-widget-flex-grow:0;}.elementor-5358 .elementor-element.elementor-element-f1f30e2.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-57583f4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-5358 .elementor-element.elementor-element-893f2a6{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;}.elementor-5358 .elementor-element.elementor-element-05a5ca0 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:24px;font-weight:600;color:#000000;}.elementor-5358 .elementor-element.elementor-element-aa16fb1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5358 .elementor-element.elementor-element-be81879{text-align:start;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;color:#676767;}.elementor-5358 .elementor-element.elementor-element-be81879 p{margin-block-end:0px;}.elementor-5358 .elementor-element.elementor-element-c3be3bb{--display:flex;}.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-5358 .elementor-element.elementor-element-0fd1f76 .gallery-item{padding:0 11px 11px 0;}.elementor-5358 .elementor-element.elementor-element-0fd1f76 .gallery{margin:0 -11px -11px 0;}.elementor-5358 .elementor-element.elementor-element-0fd1f76 .gallery-item img{border-radius:12px 12px 12px 12px;}.elementor-5358 .elementor-element.elementor-element-0fd1f76 .gallery-item .gallery-caption{text-align:center;}.elementor-5358 .elementor-element.elementor-element-ee1f035{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5358 .elementor-element.elementor-element-2f059bb.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-2f059bb.ha-has-bg-overlay:hover > .elementor-widget-container::before{transition:background 0.3s;}.elementor-5358 .elementor-element.elementor-element-2f059bb{text-align:center;}.elementor-5358 .elementor-element.elementor-element-2f059bb .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:600;color:#182228;}.elementor-5358 .elementor-element.elementor-element-38f1fad{width:var( --container-widget-width, 51% );max-width:51%;--container-widget-width:51%;--container-widget-flex-grow:0;text-align:center;}.elementor-5358 .elementor-element.elementor-element-38f1fad.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-38f1fad .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:28px;font-weight:600;line-height:1.6em;color:#000000;}.elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button{background-color:#0D1D1A;font-family:"Poppins", Sans-serif;font-weight:500;}.elementor-5358 .elementor-element.elementor-element-c711f45{width:var( --container-widget-width, 26% );max-width:26%;--container-widget-width:26%;--container-widget-flex-grow:0;}.elementor-5358 .elementor-element.elementor-element-c711f45.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-9633374{--display:grid;--e-con-grid-template-columns:repeat(3, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;--padding-top:60px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-5358 .elementor-element.elementor-element-c27bbfc{--display:flex;}.elementor-5358 .elementor-element.elementor-element-f14102f{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;}.elementor-5358 .elementor-element.elementor-element-f14102f.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-f14102f .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:17px;font-weight:600;color:#000000;}.elementor-5358 .elementor-element.elementor-element-7a30648{text-align:start;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;color:#676767;}.elementor-5358 .elementor-element.elementor-element-7a30648 p{margin-block-end:0px;}.elementor-5358 .elementor-element.elementor-element-bf1eaf3{--display:flex;}.elementor-5358 .elementor-element.elementor-element-d719cb7{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;}.elementor-5358 .elementor-element.elementor-element-d719cb7.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-d719cb7 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:17px;font-weight:600;color:#000000;}.elementor-5358 .elementor-element.elementor-element-7579476{text-align:start;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;color:#676767;}.elementor-5358 .elementor-element.elementor-element-7579476 p{margin-block-end:0px;}.elementor-5358 .elementor-element.elementor-element-d373ce4{--display:flex;}.elementor-5358 .elementor-element.elementor-element-012caba{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;}.elementor-5358 .elementor-element.elementor-element-012caba.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-012caba .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:17px;font-weight:600;color:#000000;}.elementor-5358 .elementor-element.elementor-element-2e4edff{text-align:start;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;color:#676767;}.elementor-5358 .elementor-element.elementor-element-2e4edff p{margin-block-end:0px;}.elementor-5358 .elementor-element.elementor-element-52acda2{--display:flex;}.elementor-5358 .elementor-element.elementor-element-c5e9dd5{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;}.elementor-5358 .elementor-element.elementor-element-c5e9dd5.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-c5e9dd5 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:17px;font-weight:600;color:#000000;}.elementor-5358 .elementor-element.elementor-element-fc62a28{text-align:start;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;color:#676767;}.elementor-5358 .elementor-element.elementor-element-fc62a28 p{margin-block-end:0px;}.elementor-5358 .elementor-element.elementor-element-bfe0013{--display:flex;}.elementor-5358 .elementor-element.elementor-element-1b29721{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;}.elementor-5358 .elementor-element.elementor-element-1b29721.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-1b29721 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:17px;font-weight:600;color:#000000;}.elementor-5358 .elementor-element.elementor-element-54d1581{text-align:start;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;color:#676767;}.elementor-5358 .elementor-element.elementor-element-54d1581 p{margin-block-end:0px;}.elementor-5358 .elementor-element.elementor-element-ce2e8fb{--display:flex;}.elementor-5358 .elementor-element.elementor-element-ec0e90c{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;text-align:start;}.elementor-5358 .elementor-element.elementor-element-ec0e90c.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-ec0e90c .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:17px;font-weight:600;color:#000000;}.elementor-5358 .elementor-element.elementor-element-08d470d{text-align:start;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;color:#676767;}.elementor-5358 .elementor-element.elementor-element-08d470d p{margin-block-end:0px;}.elementor-5358 .elementor-element.elementor-element-f40fe39{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:80px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-5358 .elementor-element.elementor-element-1b274ab.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-1b274ab.ha-has-bg-overlay:hover > .elementor-widget-container::before{transition:background 0.3s;}.elementor-5358 .elementor-element.elementor-element-1b274ab{text-align:center;}.elementor-5358 .elementor-element.elementor-element-1b274ab .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:15px;font-weight:600;color:#182228;}.elementor-5358 .elementor-element.elementor-element-376f55e{width:var( --container-widget-width, 51% );max-width:51%;--container-widget-width:51%;--container-widget-flex-grow:0;text-align:center;}.elementor-5358 .elementor-element.elementor-element-376f55e.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-376f55e .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:28px;font-weight:600;line-height:1.6em;color:#000000;}.elementor-5358 .elementor-element.elementor-element-969ef51{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:60px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-5358 .elementor-element.elementor-element-66b08bc{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#67D9C8;--border-color:#67D9C8;--padding-top:0px;--padding-bottom:010px;--padding-left:0px;--padding-right:0px;}.elementor-5358 .elementor-element.elementor-element-66b08bc.e-con{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-9afcade{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-5358 .elementor-element.elementor-element-9afcade.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-9afcade .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:18px;font-weight:500;color:#000000;}.elementor-5358 .elementor-element.elementor-element-52aa094{text-align:start;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;color:#676767;}.elementor-5358 .elementor-element.elementor-element-52aa094 p{margin-block-end:0px;}.elementor-5358 .elementor-element.elementor-element-b6db817{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#67D9C8;--border-color:#67D9C8;--padding-top:0px;--padding-bottom:010px;--padding-left:0px;--padding-right:0px;}.elementor-5358 .elementor-element.elementor-element-b6db817.e-con{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-fccc4be{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-5358 .elementor-element.elementor-element-fccc4be.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-fccc4be .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:18px;font-weight:500;color:#000000;}.elementor-5358 .elementor-element.elementor-element-47ad7bc{text-align:start;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;color:#676767;}.elementor-5358 .elementor-element.elementor-element-47ad7bc p{margin-block-end:0px;}.elementor-5358 .elementor-element.elementor-element-62cda78{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:0px 0px 1px 0px;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:1px;--border-left-width:0px;border-color:#67D9C8;--border-color:#67D9C8;--padding-top:0px;--padding-bottom:010px;--padding-left:0px;--padding-right:0px;}.elementor-5358 .elementor-element.elementor-element-62cda78.e-con{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-635d3c1{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-5358 .elementor-element.elementor-element-635d3c1.elementor-element{--align-self:center;}.elementor-5358 .elementor-element.elementor-element-635d3c1 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:18px;font-weight:500;color:#000000;}.elementor-5358 .elementor-element.elementor-element-d2b3f06{text-align:start;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;color:#676767;}.elementor-5358 .elementor-element.elementor-element-d2b3f06 p{margin-block-end:0px;}body.elementor-page-5358:not(.elementor-motion-effects-element-type-background), body.elementor-page-5358 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(max-width:1024px){.elementor-5358 .elementor-element.elementor-element-9633374{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-5358 .elementor-element.elementor-element-235dbda{--min-height:0vh;}.elementor-5358 .elementor-element.elementor-element-f1f30e2{--container-widget-width:150px;--container-widget-flex-grow:0;width:var( --container-widget-width, 150px );max-width:150px;}.elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button{font-size:9px;}.elementor-5358 .elementor-element.elementor-element-c711f45{--container-widget-width:150px;--container-widget-flex-grow:0;width:var( --container-widget-width, 150px );max-width:150px;}.elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button{font-size:9px;}.elementor-5358 .elementor-element.elementor-element-9633374{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}}@media(min-width:768px){.elementor-5358 .elementor-element.elementor-element-893f2a6{--width:33.3333%;}.elementor-5358 .elementor-element.elementor-element-aa16fb1{--width:66.6666%;}.elementor-5358 .elementor-element.elementor-element-66b08bc{--width:66%;}.elementor-5358 .elementor-element.elementor-element-b6db817{--width:66%;}.elementor-5358 .elementor-element.elementor-element-62cda78{--width:66%;}}/* Start custom CSS for heading, class: .elementor-element-95a5789 */.elementor-5358 .elementor-element.elementor-element-95a5789 span { color: #67D9C8 !important; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f1f30e2 *//* --- 1. ประกาศตัวแปรสี --- */ .elementor-5358 .elementor-element.elementor-element-f1f30e2 { --tech-mint: #5CE1C6; --tech-mint-rgb: 92, 225, 198; --tech-dark: #182228; } /* --- 2. สถานะ "ปกติ" (บังคับทับทั้งโหมดปกติและ Dark Mode) --- */ .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button, html[data-wp-dark-mode-active="1"] .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button, .wp-dark-mode-active .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button, [data-theme="dark"] .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button, html.dark .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button, body.dark .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button { background-color: var(--tech-dark) !important; color: var(--tech-mint) !important; border: 2px solid rgba(var(--tech-mint-rgb), 0.4) !important; border-radius: 8px !important; padding: 14px 32px !important; font-weight: 700 !important; letter-spacing: 1px; transition: all 0.15s ease-in !important; } /* --- 3. สถานะ "เปิดไฟ" (เมื่อ Hover) --- */ .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover, html[data-wp-dark-mode-active="1"] .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover, .wp-dark-mode-active .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover, [data-theme="dark"] .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover, html.dark .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover, body.dark .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover { color: #ffffff !important; border-color: var(--tech-mint) !important; background-color: var(--tech-dark) !important; text-shadow: 0 0 8px var(--tech-mint) !important; box-shadow: inset 0 0 15px rgba(var(--tech-mint-rgb), 0.4), 0 0 10px rgba(var(--tech-mint-rgb), 0.6), 0 0 25px rgba(var(--tech-mint-rgb), 0.4), 0 0 50px rgba(var(--tech-mint-rgb), 0.2) !important; transform: translateY(-2px); } /* --- 4. ไอคอนเรืองแสงและขยับไปด้านขวา --- */ .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover .elementor-button-icon, html[data-wp-dark-mode-active="1"] .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover .elementor-button-icon, .wp-dark-mode-active .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover .elementor-button-icon, [data-theme="dark"] .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover .elementor-button-icon, html.dark .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover .elementor-button-icon, body.dark .elementor-5358 .elementor-element.elementor-element-f1f30e2 .elementor-button:hover .elementor-button-icon { transform: translateX(5px); text-shadow: 0 0 8px var(--tech-mint) !important; transition: all 0.2s ease; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-235dbda */.elementor-5358 .elementor-element.elementor-element-235dbda { position: relative; overflow: hidden; } .elementor-5358 .elementor-element.elementor-element-235dbda > * { position: relative; z-index: 1; } .elementor-5358 .elementor-element.elementor-element-235dbda::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle 5px at 20% 25%, rgba(0,119,255,1) 0%, rgba(0,119,255,0.6) 40%, transparent 70%), radial-gradient(circle 28px at 20% 25%, rgba(0,119,255,0.22) 0%, transparent 100%), radial-gradient(circle 5px at 75% 15%, rgba(103,217,200,1) 0%, rgba(103,217,200,0.6) 40%, transparent 70%), radial-gradient(circle 26px at 75% 15%, rgba(103,217,200,0.22) 0%, transparent 100%), radial-gradient(circle 4.5px at 55% 70%, rgba(0,119,255,1) 0%, rgba(0,119,255,0.5) 40%, transparent 70%), radial-gradient(circle 22px at 55% 70%, rgba(0,119,255,0.18) 0%, transparent 100%), radial-gradient(circle 5px at 35% 60%, rgba(103,217,200,1) 0%, rgba(103,217,200,0.5) 40%, transparent 70%), radial-gradient(circle 24px at 35% 60%, rgba(103,217,200,0.18) 0%, transparent 100%), radial-gradient(circle 4px at 82% 55%, rgba(0,119,255,1) 0%, rgba(0,119,255,0.5) 40%, transparent 70%), radial-gradient(circle 20px at 82% 55%, rgba(0,119,255,0.16) 0%, transparent 100%), radial-gradient(circle 4px at 48% 38%, rgba(103,217,200,1) 0%, rgba(103,217,200,0.5) 40%, transparent 70%), radial-gradient(circle 20px at 48% 38%, rgba(103,217,200,0.16) 0%, transparent 100%); animation: techFloat1 9s ease-in-out infinite alternate; } .elementor-5358 .elementor-element.elementor-element-235dbda::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(circle 4.5px at 65% 80%, rgba(0,119,255,1) 0%, rgba(0,119,255,0.5) 40%, transparent 70%), radial-gradient(circle 22px at 65% 80%, rgba(0,119,255,0.18) 0%, transparent 100%), radial-gradient(circle 5px at 28% 42%, rgba(103,217,200,1) 0%, rgba(103,217,200,0.6) 40%, transparent 70%), radial-gradient(circle 26px at 28% 42%, rgba(103,217,200,0.20) 0%, transparent 100%), radial-gradient(circle 4px at 88% 30%, rgba(103,217,200,1) 0%, rgba(103,217,200,0.5) 40%, transparent 70%), radial-gradient(circle 20px at 88% 30%, rgba(103,217,200,0.16) 0%, transparent 100%), radial-gradient(circle 4px at 42% 85%, rgba(0,119,255,1) 0%, rgba(0,119,255,0.5) 40%, transparent 70%), radial-gradient(circle 20px at 42% 85%, rgba(0,119,255,0.16) 0%, transparent 100%); animation: techFloat2 12s ease-in-out infinite alternate; } @keyframes techFloat1 { 0% { transform: translate(0px, 0px); } 25% { transform: translate(8px, -12px); } 50% { transform: translate(-6px, -20px); } 75% { transform: translate(10px, -8px); } 100% { transform: translate(-4px, -16px); } } @keyframes techFloat2 { 0% { transform: translate(0px, 0px); } 25% { transform: translate(-10px, -8px); } 50% { transform: translate(8px, -18px); } 75% { transform: translate(-6px, -12px); } 100% { transform: translate(12px, -22px); } }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-2f059bb *//* 1. ประกาศตัวแปรองศาสำหรับการหมุนของ Pill */ @property --pill-angle { syntax: ''; inherits: false; initial-value: 0deg; } /* 2. กำหนด Style ทั้งหมด และสีตั้งต้น (Light Mode) ไว้ใน .elementor-5358 .elementor-element.elementor-element-2f059bb */ .elementor-5358 .elementor-element.elementor-element-2f059bb { /* กำหนดสีตั้งต้น (Light Mode) */ --pill-text: #0077ff; --neon-light: #67D9C8; --pill-bg: #ffffff; display: inline-block; padding: 4px 14px; border-radius: 100px; border: 1.5px solid transparent; /* ดึงตัวแปรมาใช้ */ background-image: linear-gradient(var(--pill-bg), var(--pill-bg)), conic-gradient( from var(--pill-angle), transparent 30%, rgba(103, 217, 200, 0.2), var(--neon-light), var(--pill-text), transparent 60% ); background-origin: padding-box, border-box; background-clip: padding-box, border-box; color: var(--pill-text); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2; box-shadow: 0 0 10px rgba(103, 217, 200, 0.15); animation: pillSpin 3s linear infinite; } /* 3. สลับสีเมื่ออยู่ใน Dark Mode (รวม Class ยอดฮิตของปลั๊กอินหลายๆ ตัว และบังคับ !important เพื่อกัน Elementor ทับ) */ html[data-wp-dark-mode-active="1"] .elementor-5358 .elementor-element.elementor-element-2f059bb, .wp-dark-mode-active .elementor-5358 .elementor-element.elementor-element-2f059bb, [data-theme="dark"] .elementor-5358 .elementor-element.elementor-element-2f059bb, html.dark .elementor-5358 .elementor-element.elementor-element-2f059bb, body.dark .elementor-5358 .elementor-element.elementor-element-2f059bb, .darkmode--activated .elementor-5358 .elementor-element.elementor-element-2f059bb { --pill-text: #ffffff !important; /* เปลี่ยน #1a1a1a เป็นสีพื้นหลังเว็บไซต์ของคุณในโหมดมืด เพื่อให้กลืนไปกับฉาก */ --pill-bg: #1a1a1a !important; } /* 4. คีย์เฟรมหมุนไฟ */ @keyframes pillSpin { to { --pill-angle: 360deg; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-c711f45 *//* --- 1. ประกาศตัวแปรสี --- */ .elementor-5358 .elementor-element.elementor-element-c711f45 { --tech-mint: #5CE1C6; --tech-mint-rgb: 92, 225, 198; --tech-dark: #182228; } /* --- 2. สถานะ "ปกติ" (บังคับทับทั้งโหมดปกติและ Dark Mode) --- */ .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button, html[data-wp-dark-mode-active="1"] .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button, .wp-dark-mode-active .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button, [data-theme="dark"] .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button, html.dark .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button, body.dark .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button { background-color: var(--tech-dark) !important; color: var(--tech-mint) !important; border: 2px solid rgba(var(--tech-mint-rgb), 0.4) !important; border-radius: 8px !important; padding: 14px 32px !important; font-weight: 700 !important; letter-spacing: 1px; transition: all 0.15s ease-in !important; } /* --- 3. สถานะ "เปิดไฟ" (เมื่อ Hover) --- */ .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover, html[data-wp-dark-mode-active="1"] .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover, .wp-dark-mode-active .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover, [data-theme="dark"] .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover, html.dark .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover, body.dark .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover { color: #ffffff !important; border-color: var(--tech-mint) !important; background-color: var(--tech-dark) !important; text-shadow: 0 0 8px var(--tech-mint) !important; box-shadow: inset 0 0 15px rgba(var(--tech-mint-rgb), 0.4), 0 0 10px rgba(var(--tech-mint-rgb), 0.6), 0 0 25px rgba(var(--tech-mint-rgb), 0.4), 0 0 50px rgba(var(--tech-mint-rgb), 0.2) !important; transform: translateY(-2px); } /* --- 4. ไอคอนเรืองแสงและขยับไปด้านขวา --- */ .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover .elementor-button-icon, html[data-wp-dark-mode-active="1"] .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover .elementor-button-icon, .wp-dark-mode-active .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover .elementor-button-icon, [data-theme="dark"] .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover .elementor-button-icon, html.dark .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover .elementor-button-icon, body.dark .elementor-5358 .elementor-element.elementor-element-c711f45 .elementor-button:hover .elementor-button-icon { transform: translateX(5px); text-shadow: 0 0 8px var(--tech-mint) !important; transition: all 0.2s ease; }/* End custom CSS */ /* Start custom CSS for heading, class: .elementor-element-1b274ab *//* 1. ประกาศตัวแปรองศาสำหรับการหมุนของ Pill */ @property --pill-angle { syntax: ''; inherits: false; initial-value: 0deg; } /* 2. กำหนด Style ทั้งหมด และสีตั้งต้น (Light Mode) ไว้ใน .elementor-5358 .elementor-element.elementor-element-1b274ab */ .elementor-5358 .elementor-element.elementor-element-1b274ab { /* กำหนดสีตั้งต้น (Light Mode) */ --pill-text: #0077ff; --neon-light: #67D9C8; --pill-bg: #ffffff; display: inline-block; padding: 4px 14px; border-radius: 100px; border: 1.5px solid transparent; /* ดึงตัวแปรมาใช้ */ background-image: linear-gradient(var(--pill-bg), var(--pill-bg)), conic-gradient( from var(--pill-angle), transparent 30%, rgba(103, 217, 200, 0.2), var(--neon-light), var(--pill-text), transparent 60% ); background-origin: padding-box, border-box; background-clip: padding-box, border-box; color: var(--pill-text); font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2; box-shadow: 0 0 10px rgba(103, 217, 200, 0.15); animation: pillSpin 3s linear infinite; } /* 3. สลับสีเมื่ออยู่ใน Dark Mode (รวม Class ยอดฮิตของปลั๊กอินหลายๆ ตัว และบังคับ !important เพื่อกัน Elementor ทับ) */ html[data-wp-dark-mode-active="1"] .elementor-5358 .elementor-element.elementor-element-1b274ab, .wp-dark-mode-active .elementor-5358 .elementor-element.elementor-element-1b274ab, [data-theme="dark"] .elementor-5358 .elementor-element.elementor-element-1b274ab, html.dark .elementor-5358 .elementor-element.elementor-element-1b274ab, body.dark .elementor-5358 .elementor-element.elementor-element-1b274ab, .darkmode--activated .elementor-5358 .elementor-element.elementor-element-1b274ab { --pill-text: #ffffff !important; /* เปลี่ยน #1a1a1a เป็นสีพื้นหลังเว็บไซต์ของคุณในโหมดมืด เพื่อให้กลืนไปกับฉาก */ --pill-bg: #1a1a1a !important; } /* 4. คีย์เฟรมหมุนไฟ */ @keyframes pillSpin { to { --pill-angle: 360deg; } }/* End custom CSS */ /* Start custom CSS */body.elementor-page-5358 { /* --- ตัวแปรควบคุมสี --- */ --bg-white: #ffffff; --tech-blue: #0077ff; --tech-mint: #67D9C8; background-color: var(--bg-white); /* [LAYER BACKGROUND] วางซ้อนกันเพื่อสร้างมิติแบบละเอียด ไม่รกตา */ background-image: /* ชั้นที่ 1: แสงออร่าสีน้ำเงิน/มินต์จางๆ ด้านบนและล่าง (เอา Glow ออกแล้ว) */ linear-gradient(90deg, rgba(0, 119, 255, 0.05) 0%, transparent 20%, transparent 80%, rgba(103, 217, 200, 0.05) 100%), /* ชั้นที่ 2: ลายจุดแบบ Micro Dot Grid จางๆ ทั่วพื้นหลัง */ radial-gradient(rgba(0, 119, 255, 0.08) 1px, transparent 1px), /* ชั้นที่ 3: เส้นแผงวงจรที่ซับซ้อนแบบ Modern Tech Circuit Board (เพิ่มความเข้มขึ้นนิดนึง) */ url("data:image/svg+xml,%3Csvg width='300' height='300' viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%230077ff' stroke-width='0.75' stroke-opacity='0.15' fill='none'%3E%3Cpath d='M10 10l50 50h100l50-50M10 40l50 50h100l50-50M290 10v100h-100l-50 50h-50M290 40v100h-100l-50 50h-50M150 150l50-50v-100' /%3E%3Cpath d='M10 290l50-50h100l50 50M10 260l50-50h100l50 50M290 290v-100h-100l-50-50h-50M290 260v-100h-100l-50-50h-50M150 150l-50 50v100' /%3E%3C/g%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%2367D9C8' fill-opacity='0.3' /%3E%3Ccircle cx='290' cy='10' r='1.5' fill='%2367D9C8' fill-opacity='0.3' /%3E%3Ccircle cx='10' cy='290' r='1.5' fill='%2367D9C8' fill-opacity='0.3' /%3E%3Ccircle cx='290' cy='290' r='1.5' fill='%2367D9C8' fill-opacity='0.3' /%3E%3C/svg%3E"), /* ชั้นที่ 4: กลุ่มจุดและเส้นโค้งที่ซับซ้อนแบบ cloud/dots มุมขวาบน (เพิ่มความเข้มขึ้นนิดนึง) */ url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230077ff' fill-opacity='0.08'%3E%3Ccircle cx='180' cy='180' r='2' /%3E%3Ccircle cx='160' cy='180' r='1.5' /%3E%3Ccircle cx='140' cy='180' r='1' /%3E%3Ccircle cx='180' cy='160' r='1.5' /%3E%3Ccircle cx='160' cy='160' r='1' /%3E%3Ccircle cx='140' cy='160' r='0.75' /%3E%3Ccircle cx='180' cy='140' r='1' /%3E%3Ccircle cx='160' cy='140' r='0.75' /%3E%3Ccircle cx='140' cy='140' r='0.5' /%3E%3Ccircle cx='170' cy='170' r='2' /%3E%3Ccircle cx='150' cy='170' r='1.5' /%3E%3Ccircle cx='130' cy='170' r='1' /%3E%3Ccircle cx='170' cy='150' r='1.5' /%3E%3Ccircle cx='150' cy='150' r='1' /%3E%3Ccircle cx='130' cy='150' r='0.75' /%3E%3Ccircle cx='170' cy='130' r='1' /%3E%3Ccircle cx='150' cy='130' r='0.75' /%3E%3Ccircle cx='130' cy='130' r='0.5' /%3E%3C/g%3E%3C/svg%3E"), /* ชั้นที่ 5: เส้นโค้งโปร่งๆ (Flowing Curves) ทั่วพื้นหลัง (เพิ่มความเข้มขึ้นนิดนึง) */ url("data:image/svg+xml,%3Csvg width='600' height='300' viewBox='0 0 600 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 150c200-100 400 100 600 0 M0 160c200-100 400 100 600 0' stroke='%230077ff' stroke-width='0.75' stroke-opacity='0.05' fill='none' /%3E%3Cpath d='M0 140c200-100 400 100 600 0 M0 130c200-100 400 100 600 0' stroke='%2367D9C8' stroke-width='0.75' stroke-opacity='0.05' fill='none' /%3E%3C/svg%3E"); /* ตั้งค่าขนาดของแพทเทิร์น (ปรับลดให้เหลือ 5 ค่าตามเลเยอร์ของพื้นหลัง) */ background-size: 100% 100%, 24px 24px, 300px 300px, 200px 200px, 600px 300px; background-position: top center, center, center, top right, center; background-repeat: no-repeat, repeat, repeat, no-repeat, repeat; position: relative; z-index: 1; } /* --- แถบเส้นขอบนำสายตาสไตล์ Tech ด้านบน --- */ body.elementor-page-5358::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--tech-blue), var(--tech-mint)); opacity: 0.5; z-index: 2; } /* เส้นตารางขอบบางๆ (Grid Borders) ซ้าย-ขวา */ body.elementor-page-5358 { border-left: 1px dashed rgba(0, 119, 255, 0.08); border-right: 1px dashed rgba(0, 119, 255, 0.08); }/* End custom CSS */