.elementor-1921 .elementor-element.elementor-element-b72f2b3{--display:flex;--justify-content:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-1921 .elementor-element.elementor-element-b72f2b3:not(.elementor-motion-effects-element-type-background), .elementor-1921 .elementor-element.elementor-element-b72f2b3 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#001317;}.elementor-1921 .elementor-element.elementor-element-81b3fb9{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--padding-top:40px;--padding-bottom:20px;--padding-left:32px;--padding-right:32px;}.elementor-1921 .elementor-element.elementor-element-6dea84e1.elementor-element{--align-self:flex-start;--order:-99999 /* order start hack */;}.elementor-1921 .elementor-element.elementor-element-6dea84e1{text-align:left;}.elementor-1921 .elementor-element.elementor-element-6dea84e1 img{width:6vw;opacity:1;filter:brightness( 100% ) contrast( 185% ) saturate( 200% ) blur( 0px ) hue-rotate( 360deg );}.elementor-1921 .elementor-element.elementor-element-cda1741{width:initial;max-width:initial;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 22px;--e-nav-menu-horizontal-menu-item-margin:calc( 42px / 2 );}.elementor-1921 .elementor-element.elementor-element-cda1741.elementor-element{--align-self:center;}.elementor-1921 .elementor-element.elementor-element-cda1741 .elementor-menu-toggle{margin-right:auto;}.elementor-1921 .elementor-element.elementor-element-cda1741 .elementor-nav-menu .elementor-item{font-family:"Rubik", Sans-serif;font-size:1.2rem;font-weight:500;letter-spacing:-0.4px;}.elementor-1921 .elementor-element.elementor-element-cda1741 .elementor-nav-menu--main .elementor-item{color:#FAFAFA;fill:#FAFAFA;padding-top:5px;padding-bottom:5px;}.elementor-1921 .elementor-element.elementor-element-cda1741 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#FAFAFA;}.elementor-1921 .elementor-element.elementor-element-cda1741 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:42px;}.elementor-1921 .elementor-element.elementor-element-57e2d881{--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;--justify-content:flex-end;}.elementor-1921 .elementor-element.elementor-element-57e2d881.e-con{--align-self:center;--order:99999 /* order end hack */;--flex-grow:1;--flex-shrink:0;}.elementor-1921 .elementor-element.elementor-element-10aef8b9.elementor-element{--order:99999 /* order end hack */;}.elementor-1921 .elementor-element.elementor-element-10aef8b9.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-10aef8b9.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-10aef8b9.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-10aef8b9.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-10aef8b9.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-10aef8b9 .elementor-icon{font-size:32px;}.elementor-1921 .elementor-element.elementor-element-10aef8b9 .elementor-icon svg{height:32px;}.elementor-1921 .elementor-element.elementor-element-8dde16c.elementor-element{--align-self:center;--order:99999 /* order end hack */;}.elementor-1921 .elementor-element.elementor-element-8dde16c{--main-alignment:center;--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--toggle-button-icon-color:#FAFAFA;--toggle-button-border-width:0px;--toggle-button-border-radius:0px;--toggle-icon-size:32px;--toggle-icon-padding:0px 0px 0px 0px;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}.elementor-1921 .elementor-element.elementor-element-8dde16c .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-1921 .elementor-element.elementor-element-b1ba734.elementor-element{--order:99999 /* order end hack */;}.elementor-1921 .elementor-element.elementor-element-b1ba734.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-b1ba734.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-b1ba734.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-b1ba734.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-b1ba734.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-b1ba734 .elementor-icon{font-size:32px;}.elementor-1921 .elementor-element.elementor-element-b1ba734 .elementor-icon svg{height:32px;}.elementor-1921 .elementor-element.elementor-element-7cf1f37c.elementor-element{--order:-99999 /* order start hack */;}.elementor-1921 .elementor-element.elementor-element-7cf1f37c .elementor-icon-wrapper{text-align:center;}.elementor-1921 .elementor-element.elementor-element-7cf1f37c.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-7cf1f37c.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-7cf1f37c.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-7cf1f37c.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-7cf1f37c.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-7cf1f37c .elementor-icon{font-size:30px;}.elementor-1921 .elementor-element.elementor-element-7cf1f37c .elementor-icon svg{height:30px;}.elementor-1921 .elementor-element.elementor-element-af14b19 .e-off-canvas__content{background-color:#0D0D0D;border-style:none;}.elementor-1921 .elementor-element.elementor-element-af14b19 .e-off-canvas__overlay{background-color:rgba(0,0,0,.8);}.elementor-1921 .elementor-element.elementor-element-af14b19{--e-off-canvas-justify-content:flex-end;--e-off-canvas-width:100%;--e-off-canvas-height:100vh;--e-off-canvas-content-overflow:auto;--e-off-canvas-overlay-opacity:1;}.elementor-1921 .elementor-element.elementor-element-3b44ee8{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1921 .elementor-element.elementor-element-a31bd82{--display:flex;--justify-content:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-1921 .elementor-element.elementor-element-53d7fcf{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--padding-top:40px;--padding-bottom:20px;--padding-left:32px;--padding-right:32px;}.elementor-1921 .elementor-element.elementor-element-3b20d59.elementor-element{--align-self:flex-start;--order:-99999 /* order start hack */;}.elementor-1921 .elementor-element.elementor-element-3b20d59{text-align:left;}.elementor-1921 .elementor-element.elementor-element-3b20d59 img{width:6vw;opacity:1;filter:brightness( 100% ) contrast( 185% ) saturate( 200% ) blur( 0px ) hue-rotate( 360deg );}.elementor-1921 .elementor-element.elementor-element-c7fcb55{width:initial;max-width:initial;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 22px;--e-nav-menu-horizontal-menu-item-margin:calc( 42px / 2 );}.elementor-1921 .elementor-element.elementor-element-c7fcb55.elementor-element{--align-self:center;}.elementor-1921 .elementor-element.elementor-element-c7fcb55 .elementor-menu-toggle{margin-right:auto;}.elementor-1921 .elementor-element.elementor-element-c7fcb55 .elementor-nav-menu .elementor-item{font-family:"Rubik", Sans-serif;font-size:1.2rem;font-weight:500;letter-spacing:-0.4px;}.elementor-1921 .elementor-element.elementor-element-c7fcb55 .elementor-nav-menu--main .elementor-item{color:#FAFAFA;fill:#FAFAFA;padding-top:5px;padding-bottom:5px;}.elementor-1921 .elementor-element.elementor-element-c7fcb55 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#FAFAFA;}.elementor-1921 .elementor-element.elementor-element-c7fcb55 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:42px;}.elementor-1921 .elementor-element.elementor-element-a0cb455{--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;--justify-content:flex-end;}.elementor-1921 .elementor-element.elementor-element-a0cb455.e-con{--align-self:center;--order:99999 /* order end hack */;--flex-grow:1;--flex-shrink:0;}.elementor-1921 .elementor-element.elementor-element-20da8f1.elementor-element{--order:99999 /* order end hack */;}.elementor-1921 .elementor-element.elementor-element-20da8f1.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-20da8f1.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-20da8f1.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-20da8f1.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-20da8f1.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-20da8f1 .elementor-icon{font-size:32px;}.elementor-1921 .elementor-element.elementor-element-20da8f1 .elementor-icon svg{height:32px;}.elementor-1921 .elementor-element.elementor-element-fddec4f.elementor-element{--align-self:center;--order:99999 /* order end hack */;}.elementor-1921 .elementor-element.elementor-element-fddec4f{--main-alignment:center;--divider-style:solid;--subtotal-divider-style:solid;--elementor-remove-from-cart-button:none;--remove-from-cart-button:block;--toggle-button-icon-color:#FAFAFA;--toggle-button-border-width:0px;--toggle-button-border-radius:0px;--toggle-icon-size:32px;--toggle-icon-padding:0px 0px 0px 0px;--cart-border-style:none;--cart-footer-layout:1fr 1fr;--products-max-height-sidecart:calc(100vh - 240px);--products-max-height-minicart:calc(100vh - 385px);}.elementor-1921 .elementor-element.elementor-element-fddec4f .widget_shopping_cart_content{--subtotal-divider-left-width:0;--subtotal-divider-right-width:0;}.elementor-1921 .elementor-element.elementor-element-789a2f4.elementor-element{--order:99999 /* order end hack */;}.elementor-1921 .elementor-element.elementor-element-789a2f4.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-789a2f4.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-789a2f4.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-789a2f4.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-789a2f4.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-789a2f4 .elementor-icon{font-size:32px;}.elementor-1921 .elementor-element.elementor-element-789a2f4 .elementor-icon svg{height:32px;}.elementor-1921 .elementor-element.elementor-element-789a2f4 .elementor-icon i, .elementor-1921 .elementor-element.elementor-element-789a2f4 .elementor-icon svg{transform:rotate(90deg);}.elementor-1921 .elementor-element.elementor-element-3d702b7.elementor-element{--order:-99999 /* order start hack */;}.elementor-1921 .elementor-element.elementor-element-3d702b7 .elementor-icon-wrapper{text-align:center;}.elementor-1921 .elementor-element.elementor-element-3d702b7.elementor-view-stacked .elementor-icon{background-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-3d702b7.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-3d702b7.elementor-view-default .elementor-icon{color:#FFFFFF;border-color:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-3d702b7.elementor-view-framed .elementor-icon, .elementor-1921 .elementor-element.elementor-element-3d702b7.elementor-view-default .elementor-icon svg{fill:#FFFFFF;}.elementor-1921 .elementor-element.elementor-element-3d702b7 .elementor-icon{font-size:30px;}.elementor-1921 .elementor-element.elementor-element-3d702b7 .elementor-icon svg{height:30px;}.elementor-1921 .elementor-element.elementor-element-3b021c1{--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;--justify-content:center;--gap:50px 50px;--row-gap:50px;--column-gap:50px;--padding-top:84px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-1921 .elementor-element.elementor-element-3b021c1.e-con{--align-self:flex-start;}.elementor-1921 .elementor-element.elementor-element-4cc42d4{width:initial;max-width:initial;--e-nav-menu-horizontal-menu-item-margin:calc( 20px / 2 );}.elementor-1921 .elementor-element.elementor-element-4cc42d4.elementor-element{--align-self:flex-start;}.elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu .elementor-item{font-family:"Rubik", Sans-serif;font-size:33px;font-weight:500;text-transform:uppercase;letter-spacing:-0.4px;}.elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu--main .elementor-item{color:#FAFAFA;fill:#FAFAFA;padding-top:22px;padding-bottom:22px;}.elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu--main .elementor-item.elementor-item-active{color:#FAFAFA;}.elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:20px;}.elementor-1921 .elementor-element.elementor-element-932c505{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:12px 12px 12px 12px;border-style:solid;border-width:2px 2px 2px 2px;border-color:#41A4B7;border-radius:30px 30px 30px 30px;}.elementor-1921 .elementor-element.elementor-element-932c505.elementor-element{--align-self:flex-start;}.elementor-1921 .elementor-element.elementor-element-932c505 .elementor-nav-menu .elementor-item{font-family:"Rubik", Sans-serif;font-size:17px;font-weight:400;}.elementor-1921 .elementor-element.elementor-element-932c505 .elementor-nav-menu--main .elementor-item{color:#348cac;fill:#348cac;padding-left:32px;padding-right:32px;padding-top:10px;padding-bottom:10px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-1921 .elementor-element.elementor-element-b72f2b3{--content-width:1140px;}.elementor-1921 .elementor-element.elementor-element-81b3fb9{--width:100%;}.elementor-1921 .elementor-element.elementor-element-57e2d881{--width:33%;}.elementor-1921 .elementor-element.elementor-element-a31bd82{--content-width:1140px;}.elementor-1921 .elementor-element.elementor-element-53d7fcf{--width:100%;}.elementor-1921 .elementor-element.elementor-element-a0cb455{--width:33%;}.elementor-1921 .elementor-element.elementor-element-3b021c1{--width:100%;}}@media(max-width:1024px){.elementor-1921 .elementor-element.elementor-element-81b3fb9{--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-1921 .elementor-element.elementor-element-6dea84e1 img{width:8vw;}.elementor-1921 .elementor-element.elementor-element-cda1741{--container-widget-width:0px;--container-widget-flex-grow:0;width:var( --container-widget-width, 0px );max-width:0px;}.elementor-1921 .elementor-element.elementor-element-8dde16c{margin:-14px -30px calc(var(--kit-widget-spacing, 0px) + 0px) -30px;--toggle-icon-size:32px;--toggle-icon-padding:0px 0px 0px 0px;}.elementor-1921 .elementor-element.elementor-element-3b44ee8{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1921 .elementor-element.elementor-element-53d7fcf{--padding-top:20px;--padding-bottom:20px;--padding-left:16px;--padding-right:16px;}.elementor-1921 .elementor-element.elementor-element-3b20d59 img{width:8vw;}.elementor-1921 .elementor-element.elementor-element-c7fcb55{--container-widget-width:0px;--container-widget-flex-grow:0;width:var( --container-widget-width, 0px );max-width:0px;}.elementor-1921 .elementor-element.elementor-element-fddec4f{margin:-14px -30px calc(var(--kit-widget-spacing, 0px) + 0px) -30px;--toggle-icon-size:32px;--toggle-icon-padding:0px 0px 0px 0px;}.elementor-1921 .elementor-element.elementor-element-3b021c1{--justify-content:center;--gap:200px 200px;--row-gap:200px;--column-gap:200px;}.elementor-1921 .elementor-element.elementor-element-4cc42d4{--container-widget-width:0px;--container-widget-flex-grow:0;width:var( --container-widget-width, 0px );max-width:0px;--e-nav-menu-horizontal-menu-item-margin:calc( 20px / 2 );}.elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu--main .elementor-item{padding-top:22px;padding-bottom:22px;}.elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:20px;}}@media(max-width:767px){.elementor-1921 .elementor-element.elementor-element-81b3fb9{--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-1921 .elementor-element.elementor-element-6dea84e1 img{width:15vw;}.elementor-1921 .elementor-element.elementor-element-57e2d881{--width:16vw;--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;--justify-content:flex-end;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1921 .elementor-element.elementor-element-57e2d881.e-con{--align-self:center;--order:99999 /* order end hack */;}.elementor-1921 .elementor-element.elementor-element-10aef8b9.elementor-element{--align-self:center;}.elementor-1921 .elementor-element.elementor-element-10aef8b9 .elementor-icon{font-size:30px;}.elementor-1921 .elementor-element.elementor-element-10aef8b9 .elementor-icon svg{height:30px;}.elementor-1921 .elementor-element.elementor-element-b1ba734.elementor-element{--align-self:center;}.elementor-1921 .elementor-element.elementor-element-b1ba734 .elementor-icon{font-size:30px;}.elementor-1921 .elementor-element.elementor-element-b1ba734 .elementor-icon svg{height:30px;}.elementor-1921 .elementor-element.elementor-element-7cf1f37c.elementor-element{--align-self:flex-end;}.elementor-1921 .elementor-element.elementor-element-53d7fcf{--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-1921 .elementor-element.elementor-element-3b20d59 img{width:15vw;}.elementor-1921 .elementor-element.elementor-element-a0cb455{--width:16vw;--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;--justify-content:flex-end;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1921 .elementor-element.elementor-element-a0cb455.e-con{--align-self:center;--order:99999 /* order end hack */;}.elementor-1921 .elementor-element.elementor-element-20da8f1.elementor-element{--align-self:center;}.elementor-1921 .elementor-element.elementor-element-20da8f1 .elementor-icon{font-size:30px;}.elementor-1921 .elementor-element.elementor-element-20da8f1 .elementor-icon svg{height:30px;}.elementor-1921 .elementor-element.elementor-element-789a2f4.elementor-element{--align-self:center;}.elementor-1921 .elementor-element.elementor-element-789a2f4 .elementor-icon{font-size:30px;}.elementor-1921 .elementor-element.elementor-element-789a2f4 .elementor-icon svg{height:30px;}.elementor-1921 .elementor-element.elementor-element-3d702b7.elementor-element{--align-self:flex-end;}.elementor-1921 .elementor-element.elementor-element-3b021c1{--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;--justify-content:center;--gap:50px 50px;--row-gap:50px;--column-gap:50px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu--main .elementor-item{padding-top:22px;padding-bottom:22px;}}/* Start custom CSS for nav-menu, class: .elementor-element-cda1741 *//* * Custom CSS สำหรับ Nav Menu Underline * สำหรับโครงสร้าง Elementor Nav Menu ที่ข้อความอยู่ใน โดยตรง * ทำให้เส้นใต้มีความยาวเท่ากับข้อความเป๊ะๆ * ปรากฏเมื่อ Hover และสำหรับ Active Item */ /* 1. กำหนดให้แท็ก ของแต่ละรายการเมนูมีคุณสมบัติที่จำเป็น */ /* และ "ลบ" padding ซ้ายขวาที่ Elementor อาจเพิ่มมา เพื่อให้ หดตามข้อความ */ .elementor-1921 .elementor-element.elementor-element-cda1741 .elementor-nav-menu--main .elementor-item.menu-link { position: relative; display: inline-block; /* สำคัญ: ทำให้ความกว้างของ หดตามเนื้อหา */ /* ******** สำคัญมาก: ลบ Padding ที่ Elementor ใส่มาให้ ********* */ /* ** คุณต้องไปตรวจสอบใน Elementor UI -> Style -> Main Menu -> Horizontal Padding ** */ /* ** ถ้าคุณตั้งค่า Horizontal Padding ไว้ ให้ใส่ค่านั้นติดลบตรงนี้ (หรือ 0) ** */ /* ** หรือถ้าไม่แน่ใจ ให้ลองใช้ 0px !important ก่อน ** */ padding-left: 0px !important; /* บังคับให้ไม่มี padding ด้านซ้ายในตัวลิงก์ */ padding-right: 0px !important; /* บังคับให้ไม่มี padding ด้านขวาในตัวลิงก์ */ /* เพิ่ม padding-bottom เพื่อสร้างระยะห่างระหว่างข้อความกับเส้นใต้ */ padding-bottom: 5px; /* ปรับค่านี้ตามความเหมาะสม (เช่น 3px, 7px) */ /* overflow: hidden; */ /* อาจไม่จำเป็น แต่ถ้าเส้นใต้ยังเกินขอบ ลองเปิดใช้ */ } /* 2. สร้างเส้นใต้ด้วย pseudo-element ::after ให้กับ */ .elementor-1921 .elementor-element.elementor-element-cda1741 .elementor-nav-menu--main .elementor-item.menu-link::after { content: ''; /* ต้องมีเสมอ */ position: absolute; left: 0; right: 0; margin: 0 auto; /* จัดกึ่งกลางเส้นใต้ */ width: 0; /* เริ่มต้นด้วยความกว้าง 0 */ height: 2px; /* ความหนาของเส้นใต้ (ปรับค่าได้ตามต้องการ) */ background-color: #ffffff; /* สีของเส้นใต้ (ปรับเป็นสีที่คุณต้องการ) */ bottom: 0px; /* ควรเป็น 0px เมื่อ padding-bottom ถูกเพิ่มบน parent */ transform: scaleX(0); /* ซ่อนเส้นใต้เริ่มต้น */ transform-origin: center; /* ขยายจากตรงกลาง */ transition: all 0.3s ease-out; /* Animation การขยายตัว */ } /* 3. เมื่อนำเมาส์ไปชี้ (hover) ให้เส้นใต้ปรากฏขึ้นที่ */ .elementor-1921 .elementor-element.elementor-element-cda1741 .elementor-nav-menu--main .elementor-item.menu-link:hover::after { width: 100%; /* << ให้เส้นใต้ขยายเต็ม 100% ของ ที่หดตามข้อความแล้ว */ transform: scaleX(1); } /* 4. เมื่อเป็นรายการเมนูที่กำลังใช้งานอยู่ (Active Item) ให้เส้นใต้ปรากฏขึ้นที่ */ .elementor-1921 .elementor-element.elementor-element-cda1741 .elementor-nav-menu--main .elementor-item.menu-link.elementor-item-active::after { width: 100%; transform: scaleX(1); } /* ******** สำคัญมาก: ลบ Margin ที่ Elementor อาจเพิ่มให้
  • ********* */ /* ** ตรวจสอบว่ามี Class อะไรที่ Elementor ใช้สำหรับ
  • (รายการเมนูแต่ละตัว) ** */ /* ** ปกติจะเป็น .elementor-nav-menu .menu-item ** */ .elementor-1921 .elementor-element.elementor-element-cda1741 .elementor-nav-menu .menu-item { margin-left: 0px !important; margin-right: 0px !important; }/* End custom CSS */ /* Start custom CSS for nav-menu, class: .elementor-element-c7fcb55 *//* * Custom CSS สำหรับ Nav Menu Underline * สำหรับโครงสร้าง Elementor Nav Menu ที่ข้อความอยู่ใน โดยตรง * ทำให้เส้นใต้มีความยาวเท่ากับข้อความเป๊ะๆ * ปรากฏเมื่อ Hover และสำหรับ Active Item */ /* 1. กำหนดให้แท็ก ของแต่ละรายการเมนูมีคุณสมบัติที่จำเป็น */ /* และ "ลบ" padding ซ้ายขวาที่ Elementor อาจเพิ่มมา เพื่อให้ หดตามข้อความ */ .elementor-1921 .elementor-element.elementor-element-c7fcb55 .elementor-nav-menu--main .elementor-item.menu-link { position: relative; display: inline-block; /* สำคัญ: ทำให้ความกว้างของ หดตามเนื้อหา */ /* ******** สำคัญมาก: ลบ Padding ที่ Elementor ใส่มาให้ ********* */ /* ** คุณต้องไปตรวจสอบใน Elementor UI -> Style -> Main Menu -> Horizontal Padding ** */ /* ** ถ้าคุณตั้งค่า Horizontal Padding ไว้ ให้ใส่ค่านั้นติดลบตรงนี้ (หรือ 0) ** */ /* ** หรือถ้าไม่แน่ใจ ให้ลองใช้ 0px !important ก่อน ** */ padding-left: 0px !important; /* บังคับให้ไม่มี padding ด้านซ้ายในตัวลิงก์ */ padding-right: 0px !important; /* บังคับให้ไม่มี padding ด้านขวาในตัวลิงก์ */ /* เพิ่ม padding-bottom เพื่อสร้างระยะห่างระหว่างข้อความกับเส้นใต้ */ padding-bottom: 5px; /* ปรับค่านี้ตามความเหมาะสม (เช่น 3px, 7px) */ /* overflow: hidden; */ /* อาจไม่จำเป็น แต่ถ้าเส้นใต้ยังเกินขอบ ลองเปิดใช้ */ } /* 2. สร้างเส้นใต้ด้วย pseudo-element ::after ให้กับ */ .elementor-1921 .elementor-element.elementor-element-c7fcb55 .elementor-nav-menu--main .elementor-item.menu-link::after { content: ''; /* ต้องมีเสมอ */ position: absolute; left: 0; right: 0; margin: 0 auto; /* จัดกึ่งกลางเส้นใต้ */ width: 0; /* เริ่มต้นด้วยความกว้าง 0 */ height: 2px; /* ความหนาของเส้นใต้ (ปรับค่าได้ตามต้องการ) */ background-color: #ffffff; /* สีของเส้นใต้ (ปรับเป็นสีที่คุณต้องการ) */ bottom: 0px; /* ควรเป็น 0px เมื่อ padding-bottom ถูกเพิ่มบน parent */ transform: scaleX(0); /* ซ่อนเส้นใต้เริ่มต้น */ transform-origin: center; /* ขยายจากตรงกลาง */ transition: all 0.3s ease-out; /* Animation การขยายตัว */ } /* 3. เมื่อนำเมาส์ไปชี้ (hover) ให้เส้นใต้ปรากฏขึ้นที่ */ .elementor-1921 .elementor-element.elementor-element-c7fcb55 .elementor-nav-menu--main .elementor-item.menu-link:hover::after { width: 100%; /* << ให้เส้นใต้ขยายเต็ม 100% ของ ที่หดตามข้อความแล้ว */ transform: scaleX(1); } /* 4. เมื่อเป็นรายการเมนูที่กำลังใช้งานอยู่ (Active Item) ให้เส้นใต้ปรากฏขึ้นที่ */ .elementor-1921 .elementor-element.elementor-element-c7fcb55 .elementor-nav-menu--main .elementor-item.menu-link.elementor-item-active::after { width: 100%; transform: scaleX(1); } /* ******** สำคัญมาก: ลบ Margin ที่ Elementor อาจเพิ่มให้
  • ********* */ /* ** ตรวจสอบว่ามี Class อะไรที่ Elementor ใช้สำหรับ
  • (รายการเมนูแต่ละตัว) ** */ /* ** ปกติจะเป็น .elementor-nav-menu .menu-item ** */ .elementor-1921 .elementor-element.elementor-element-c7fcb55 .elementor-nav-menu .menu-item { margin-left: 0px !important; margin-right: 0px !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-53d7fcf *//* ลดระยะห่างเมนู */ .elementor-nav-menu--main .elementor-item { padding-left: 16px; padding-right: 16px; } /* ปรับ logo ขนาด */ .header-logo img { max-height: 60px; } /* ปรับ vertical alignment */ .site-header .elementor-container { align-items: center; }/* End custom CSS */ /* Start custom CSS for nav-menu, class: .elementor-element-4cc42d4 *//* * Custom CSS สำหรับ Nav Menu Underline * สำหรับโครงสร้าง Elementor Nav Menu ที่ข้อความอยู่ใน โดยตรง * ทำให้เส้นใต้มีความยาวเท่ากับข้อความเป๊ะๆ * ปรากฏเมื่อ Hover และสำหรับ Active Item */ /* 1. กำหนดให้แท็ก ของแต่ละรายการเมนูมีคุณสมบัติที่จำเป็น */ /* และ "ลบ" padding ซ้ายขวาที่ Elementor อาจเพิ่มมา เพื่อให้ หดตามข้อความ */ .elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu--main .elementor-item.menu-link { position: relative; display: inline-block; /* สำคัญ: ทำให้ความกว้างของ หดตามเนื้อหา */ /* ******** สำคัญมาก: ลบ Padding ที่ Elementor ใส่มาให้ ********* */ /* ** คุณต้องไปตรวจสอบใน Elementor UI -> Style -> Main Menu -> Horizontal Padding ** */ /* ** ถ้าคุณตั้งค่า Horizontal Padding ไว้ ให้ใส่ค่านั้นติดลบตรงนี้ (หรือ 0) ** */ /* ** หรือถ้าไม่แน่ใจ ให้ลองใช้ 0px !important ก่อน ** */ padding-left: 0px !important; /* บังคับให้ไม่มี padding ด้านซ้ายในตัวลิงก์ */ padding-right: 0px !important; /* บังคับให้ไม่มี padding ด้านขวาในตัวลิงก์ */ /* เพิ่ม padding-bottom เพื่อสร้างระยะห่างระหว่างข้อความกับเส้นใต้ */ padding-bottom: 5px; /* ปรับค่านี้ตามความเหมาะสม (เช่น 3px, 7px) */ /* overflow: hidden; */ /* อาจไม่จำเป็น แต่ถ้าเส้นใต้ยังเกินขอบ ลองเปิดใช้ */ } /* 2. สร้างเส้นใต้ด้วย pseudo-element ::after ให้กับ */ .elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu--main .elementor-item.menu-link::after { content: ''; /* ต้องมีเสมอ */ position: absolute; left: 0; right: 0; margin: 0 auto; /* จัดกึ่งกลางเส้นใต้ */ width: 0; /* เริ่มต้นด้วยความกว้าง 0 */ height: 2px; /* ความหนาของเส้นใต้ (ปรับค่าได้ตามต้องการ) */ background-color: #ffffff; /* สีของเส้นใต้ (ปรับเป็นสีที่คุณต้องการ) */ bottom: 0px; /* ควรเป็น 0px เมื่อ padding-bottom ถูกเพิ่มบน parent */ transform: scaleX(0); /* ซ่อนเส้นใต้เริ่มต้น */ transform-origin: center; /* ขยายจากตรงกลาง */ transition: all 0.3s ease-out; /* Animation การขยายตัว */ } /* 3. เมื่อนำเมาส์ไปชี้ (hover) ให้เส้นใต้ปรากฏขึ้นที่ */ .elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu--main .elementor-item.menu-link:hover::after { width: 100%; /* << ให้เส้นใต้ขยายเต็ม 100% ของ ที่หดตามข้อความแล้ว */ transform: scaleX(1); } /* 4. เมื่อเป็นรายการเมนูที่กำลังใช้งานอยู่ (Active Item) ให้เส้นใต้ปรากฏขึ้นที่ */ .elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu--main .elementor-item.menu-link.elementor-item-active::after { width: 100%; transform: scaleX(1); } /* ******** สำคัญมาก: ลบ Margin ที่ Elementor อาจเพิ่มให้
  • ********* */ /* ** ตรวจสอบว่ามี Class อะไรที่ Elementor ใช้สำหรับ
  • (รายการเมนูแต่ละตัว) ** */ /* ** ปกติจะเป็น .elementor-nav-menu .menu-item ** */ .elementor-1921 .elementor-element.elementor-element-4cc42d4 .elementor-nav-menu .menu-item { margin-left: 0px !important; margin-right: 0px !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-81b3fb9 *//* ลดระยะห่างเมนู */ .elementor-nav-menu--main .elementor-item { padding-left: 16px; padding-right: 16px; } /* ปรับ logo ขนาด */ .header-logo img { max-height: 60px; } /* ปรับ vertical alignment */ .site-header .elementor-container { align-items: center; }/* End custom CSS */