.elementor-283 .elementor-element.elementor-element-7b6ee25{--display:flex;--min-height:475px;--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:center;--align-items:center;--overlay-opacity:0.85;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-283 .elementor-element.elementor-element-7b6ee25:not(.elementor-motion-effects-element-type-background), .elementor-283 .elementor-element.elementor-element-7b6ee25 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/08/Maycare-Lab-7.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-283 .elementor-element.elementor-element-7b6ee25::before, .elementor-283 .elementor-element.elementor-element-7b6ee25 > .elementor-background-video-container::before, .elementor-283 .elementor-element.elementor-element-7b6ee25 > .e-con-inner > .elementor-background-video-container::before, .elementor-283 .elementor-element.elementor-element-7b6ee25 > .elementor-background-slideshow::before, .elementor-283 .elementor-element.elementor-element-7b6ee25 > .e-con-inner > .elementor-background-slideshow::before, .elementor-283 .elementor-element.elementor-element-7b6ee25 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(270deg, #FFFFFF00 0%, #0F172B 100%);}.elementor-283 .elementor-element.elementor-element-8152dca{--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:center;--align-items:center;}.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-283 .elementor-element.elementor-element-54a1abe{text-align:center;}.elementor-283 .elementor-element.elementor-element-54a1abe .elementor-heading-title{font-family:"Noto Sans Thai", Sans-serif;font-size:60px;font-weight:700;line-height:1.2em;color:#FFFFFF;}.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-283 .elementor-element.elementor-element-04f694d{text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:400;line-height:15px;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-9abeed2{--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;}.elementor-283 .elementor-element.elementor-element-d6deaea{--display:flex;--border-radius:20px 20px 20px 20px;}.elementor-283 .elementor-element.elementor-element-d6deaea:not(.elementor-motion-effects-element-type-background), .elementor-283 .elementor-element.elementor-element-d6deaea > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/08/Maycare-Lab-7-768x576.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-283 .elementor-element.elementor-element-25d02a4{--display:flex;}.elementor-283 .elementor-element.elementor-element-2cdc2ba .elementor-heading-title{font-family:"Noto Sans Thai", Sans-serif;font-size:50px;font-weight:700;color:#101828;}.elementor-283 .elementor-element.elementor-element-bfd00f1{font-family:"Noto Sans Thai", Sans-serif;font-size:18px;font-weight:400;}.elementor-283 .elementor-element.elementor-element-7e6bb58{--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-283 .elementor-element.elementor-element-eeb2473 .elementor-heading-title{color:#101828;}.elementor-283 .elementor-element.elementor-element-b27fdfd{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-283 .elementor-element.elementor-element-6355f4f{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_04_43-PM-1.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-2c5badd{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_04_43-PM-4.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-fe95e00{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_04_43-PM-3.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-050a42c{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_04_43-PM-2.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-fc81d60{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_04_43-PM-5.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-ec8856a{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_04_43-PM-6.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-d1c0604{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_04_43-PM-7.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-1f09849{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-03_58_32-PM.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-f5070cc{--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-283 .elementor-element.elementor-element-e34755e .elementor-heading-title{font-family:"Noto Sans Thai", Sans-serif;font-size:15px;font-weight:500;text-transform:uppercase;line-height:17px;letter-spacing:1.1px;color:#165EFB;}.elementor-283 .elementor-element.elementor-element-9dcbf83 .elementor-heading-title{font-family:"Noto Sans Thai", Sans-serif;font-size:26px;font-weight:700;text-transform:uppercase;color:#101828;}.elementor-283 .elementor-element.elementor-element-4660100{--display:grid;--e-con-grid-template-columns:repeat(4, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--grid-auto-flow:row;}.elementor-283 .elementor-element.elementor-element-5141e58{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_07_33-PM-1.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-0a0e636{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_07_34-PM-2.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-ec6de55{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_07_34-PM-3.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-8651a82{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_07_35-PM-4.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-06fd725{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_07_35-PM-5.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-90653d1{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_07_36-PM-6.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-77f77c1{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_07_36-PM-7.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-78dbf5e{background-image:url("https://www.maycarelab.com/wp-content/uploads/2026/09/ChatGPT-Image-Sep-14-2026-12_07_37-PM-8.png");padding:110px 20px 110px 20px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:10px 10px 10px 10px;text-align:center;font-family:"Noto Sans Thai", Sans-serif;font-size:20px;font-weight:600;color:#FFFFFF;}.elementor-283 .elementor-element.elementor-element-56d8168{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-283 .elementor-element.elementor-element-8711eba{width:100%;max-width:100%;}@media(min-width:768px){.elementor-283 .elementor-element.elementor-element-7b6ee25{--width:100%;}.elementor-283 .elementor-element.elementor-element-d6deaea{--width:40%;}.elementor-283 .elementor-element.elementor-element-25d02a4{--width:60%;}.elementor-283 .elementor-element.elementor-element-56d8168{--width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-283 .elementor-element.elementor-element-7b6ee25{--width:100%;}.elementor-283 .elementor-element.elementor-element-8152dca{--content-width:100%;}}@media(max-width:1024px){.elementor-283 .elementor-element.elementor-element-7b6ee25{--min-height:345px;--overlay-opacity:0.81;}.elementor-283 .elementor-element.elementor-element-7b6ee25::before, .elementor-283 .elementor-element.elementor-element-7b6ee25 > .elementor-background-video-container::before, .elementor-283 .elementor-element.elementor-element-7b6ee25 > .e-con-inner > .elementor-background-video-container::before, .elementor-283 .elementor-element.elementor-element-7b6ee25 > .elementor-background-slideshow::before, .elementor-283 .elementor-element.elementor-element-7b6ee25 > .e-con-inner > .elementor-background-slideshow::before, .elementor-283 .elementor-element.elementor-element-7b6ee25 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;background-image:linear-gradient(270deg, #FFFFFF00 0%, #0F172B 50%);}.elementor-283 .elementor-element.elementor-element-8152dca{--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-283 .elementor-element.elementor-element-54a1abe .elementor-heading-title{font-size:48px;}.elementor-283 .elementor-element.elementor-element-04f694d{font-size:18px;}.elementor-283 .elementor-element.elementor-element-b27fdfd{--grid-auto-flow:row;}.elementor-283 .elementor-element.elementor-element-4660100{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-283 .elementor-element.elementor-element-7b6ee25{--min-height:300px;}.elementor-283 .elementor-element.elementor-element-54a1abe .elementor-heading-title{font-size:21px;}.elementor-283 .elementor-element.elementor-element-04f694d{font-size:14px;}.elementor-283 .elementor-element.elementor-element-2cdc2ba .elementor-heading-title{font-size:26px;}.elementor-283 .elementor-element.elementor-element-bfd00f1{font-size:16px;}.elementor-283 .elementor-element.elementor-element-b27fdfd{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-283 .elementor-element.elementor-element-4660100{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-283 .elementor-element.elementor-element-56d8168{--margin-top:80px;--margin-bottom:80px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for container, class: .elementor-element-9abeed2 */.elementor-283 .elementor-element.elementor-element-9abeed2 {
padding-top: 64px;
padding-bottom: 64px;
background: #FFFFFF;
}
.elementor-283 .elementor-element.elementor-element-9abeed2 > .e-con-inner {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 32px;
padding-right: 32px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px;
align-items: center;
}
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-d6deaea {
width: 100%;
aspect-ratio: 4 / 3;
min-height: 0;
overflow: hidden;
border-radius: 16px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-d6deaea.e-con {
min-height: 0;
}
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-25d02a4 {
width: 100%;
min-width: 0;
padding: 0;
gap: 0;
}
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-2cdc2ba {
margin: 0 0 20px;
}
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-2cdc2ba .elementor-heading-title {
margin: 0;
color: #111827;
font-size: 36px;
line-height: 1.25;
font-weight: 700;
}
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-bfd00f1 {
margin: 0;
}
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-bfd00f1 .elementor-widget-container {
margin: 0;
}
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-bfd00f1 p {
margin-top: 0;
margin-bottom: 16px;
color: #4B5563;
font-size: 18px;
line-height: 1.625;
font-weight: 400;
}
/* Figma paragraph สุดท้ายไม่มี mb-4 */
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-bfd00f1 p:last-child {
margin-bottom: 0;
}
/* =========================================================
* TABLET
*
* Figma:
* sm:px-6 = 24px
*
* md:grid-cols-2 เริ่มตั้งแต่ 768px
* ดังนั้น Tablet ยังคง 2 columns
* ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
.elementor-283 .elementor-element.elementor-element-9abeed2 > .e-con-inner {
padding-left: 24px;
padding-right: 24px;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
}
}
/* =========================================================
* MOBILE
*
* Figma:
* px-4 = 16px
*
* ก่อน md:
* grid = 1 column
*
* Heading:
* text-3xl = 30px
* ========================================================= */
@media (max-width: 767px) {
.elementor-283 .elementor-element.elementor-element-9abeed2 {
padding-top: 64px;
padding-bottom: 64px;
}
.elementor-283 .elementor-element.elementor-element-9abeed2 > .e-con-inner {
padding-left: 16px;
padding-right: 16px;
grid-template-columns: 1fr;
gap: 48px;
}
/* Image อยู่ด้านบน */
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-d6deaea {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 16px;
}
/* Heading */
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-2cdc2ba .elementor-heading-title {
font-size: 30px;
}
/* กันกรณี Elementor ยังทิ้ง hidden mobile class อยู่
* แต่ทางที่ถูกต้องคือปิด Hide On Mobile ใน Elementor ด้วย
*/
.elementor-283 .elementor-element.elementor-element-9abeed2 .elementor-element-bfd00f1.elementor-hidden-mobile {
display: block;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6bb58 *//* =========================================================
* MAYCARE — INNOVATION INGREDIENT GRID
*
* Section : 7e6bb58
* Heading : eeb2473
* Grid : b27fdfd
*
* ใช้ Background Image ที่ตั้งใน Elementor ของแต่ละ Card
* ไม่ต้องใส่ URL รูปใน CSS
* ========================================================= */
/* =========================================================
* SECTION
* Figma:
* py-16
* bg-gray-50
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-7e6bb58 {
padding-top: 64px;
padding-bottom: 64px;
background-color: #F9FAFB;
}
/* =========================================================
* INNER
* Figma:
* max-w-7xl
* lg:px-8
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-7e6bb58 > .e-con-inner {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 32px;
padding-right: 32px;
}
/* =========================================================
* HEADING
* Elementor: eeb2473
*
* Figma:
* text-3xl desktop
* text-2xl mobile
* mb-8
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-eeb2473 {
margin: 0 0 32px;
}
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-eeb2473 .elementor-heading-title {
margin: 0;
color: #111827;
font-size: 30px;
line-height: 1.3;
font-weight: 700;
}
/* =========================================================
* GRID
*
* Desktop / Tablet >= 768:
* 4 columns
*
* Mobile:
* 2 columns
*
* gap-3 = 12px
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
/* =========================================================
* CARD
*
* Background Image ยังมาจาก Elementor เดิม
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd > .elementor-widget-text-editor {
position: relative;
width: 100%;
min-width: 0;
aspect-ratio: 1 / 1;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border-radius: 12px;
cursor: pointer;
isolation: isolate;
/* รูปจริงที่ตั้งไว้ใน Elementor */
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
/* =========================================================
* IMAGE HOVER LAYER
*
* ดึง background-image เดิมของ Elementor มาใช้ซ้ำ
* แล้ว scale layer นี้แทนการ animate background-size
*
* ผลคือ hover จะ smooth กว่าเดิมมาก
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd > .elementor-widget-text-editor::after {
content: "";
position: absolute;
inset: -1px;
z-index: 0;
background-image: inherit;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transform: scale(1);
transform-origin: center center;
backface-visibility: hidden;
will-change: transform;
transition:
transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* =========================================================
* DARK OVERLAY
*
* Figma:
* bg-black/40
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd > .elementor-widget-text-editor::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.40);
pointer-events: none;
transition:
background-color 500ms ease;
}
/* =========================================================
* ELEMENTOR WIDGET CONTAINER
*
* ไม่ใช้ wrapper นี้ควบคุม alignment แล้ว
* ป้องกัน Elementor ดันข้อความขึ้นด้านบน
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd
> .elementor-widget-text-editor
> .elementor-widget-container {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
* TEXT
*
* จุดสำคัญ:
* absolute เต็ม Card แล้ว Flex center โดยตรง
*
* ทำให้ไม่ว่า Elementor wrapper จะสูงเท่าไร
* Text ก็อยู่กลาง Card แน่นอน
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd
> .elementor-widget-text-editor p {
position: absolute !important;
inset: 0;
z-index: 3;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100%;
height: 100%;
margin: 0 !important;
padding: 12px 16px !important;
color: #FFFFFF;
font-size: 24px;
line-height: 1.25;
font-weight: 600;
text-align: center !important;
pointer-events: none;
box-sizing: border-box;
}
/* =========================================================
* HOVER
*
* Figma:
* scale 1.05
* duration 500
*
* ใช้ 1.06 + easing นุ่มขึ้นเล็กน้อย
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd
> .elementor-widget-text-editor:hover::after {
transform: scale(1.06);
}
/* Overlay ไม่ต้องกระชาก
* เพิ่มความเข้มนิดเดียวแบบ smooth
*/
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd
> .elementor-widget-text-editor:hover::before {
background: rgba(0, 0, 0, 0.44);
}
/* =========================================================
* TABLET
* 768 — 1023
*
* Figma md:grid-cols-4
* ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
.elementor-283 .elementor-element.elementor-element-7e6bb58 > .e-con-inner {
padding-left: 24px;
padding-right: 24px;
}
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
/*
* Tablet 4 columns ทำให้ Card แคบลง
* ลด text ลงเล็กน้อยเพื่อไม่อึดอัด
*/
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd
> .elementor-widget-text-editor p {
font-size: 20px;
padding: 10px 12px !important;
}
}
/* =========================================================
* MOBILE
* < 768
*
* Figma:
* grid-cols-2
* px-4
* ========================================================= */
@media (max-width: 767px) {
.elementor-283 .elementor-element.elementor-element-7e6bb58 {
padding-top: 64px;
padding-bottom: 64px;
}
.elementor-283 .elementor-element.elementor-element-7e6bb58 > .e-con-inner {
padding-left: 16px;
padding-right: 16px;
}
/* Heading */
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-eeb2473 .elementor-heading-title {
font-size: 24px;
}
/* Grid */
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
/* Card text */
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd
> .elementor-widget-text-editor p {
font-size: 20px;
line-height: 1.2;
padding: 10px 12px !important;
}
/*
* มือถือไม่มี hover จริงเป็นหลัก
* ตัด will-change เพื่อประหยัด rendering
*/
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd
> .elementor-widget-text-editor::after {
will-change: auto;
}
}
/* =========================================================
* SMALL MOBILE
* ========================================================= */
@media (max-width: 380px) {
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd
> .elementor-widget-text-editor p {
font-size: 18px;
}
}
/* =========================================================
* REDUCED MOTION
* รองรับคนที่ตั้งลด Animation ในระบบ
* ========================================================= */
@media (prefers-reduced-motion: reduce) {
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd
> .elementor-widget-text-editor::after,
.elementor-283 .elementor-element.elementor-element-7e6bb58 .elementor-element-b27fdfd
> .elementor-widget-text-editor::before {
transition: none;
}
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f5070cc *//* =========================================================
* MAYCARE — WORLD CLASS TECHNOLOGY
* BEST ACTIVE INGREDIENTS
*
* Section : f5070cc
* Eyebrow : e34755e
* Heading : 9dcbf83
* Grid : 4660100
*
* ใช้ Background Image ที่ตั้งใน Elementor ของแต่ละ Card
* ========================================================= */
/* =========================================================
* SECTION
* Figma:
* py-16
* bg-white
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc {
padding-top: 64px;
padding-bottom: 64px;
background-color: #FFFFFF;
}
/* =========================================================
* INNER
* Figma:
* max-w-7xl
* lg:px-8
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc > .e-con-inner {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 32px;
padding-right: 32px;
}
/* =========================================================
* EYEBROW
* Elementor: e34755e
*
* Figma:
* text-[#165efb]
* text-sm
* font-semibold
* uppercase
* tracking-widest
* mb-2
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-e34755e {
margin: 0 0 8px;
}
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-e34755e .elementor-heading-title {
margin: 0;
color: #165EFB;
font-size: 14px;
line-height: 1.5;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* =========================================================
* MAIN HEADING
* Elementor: 9dcbf83
*
* Figma:
* text-2xl mobile
* md:text-3xl desktop
* mb-8
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-9dcbf83 {
margin: 0 0 32px;
}
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-9dcbf83 .elementor-heading-title {
margin: 0;
color: #111827;
font-size: 30px;
line-height: 1.3;
font-weight: 700;
}
/* =========================================================
* GRID
*
* Desktop / Tablet >= 768:
* 4 columns
*
* Mobile:
* 2 columns
*
* gap-3 = 12px
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100 {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
width: 100%;
}
/* =========================================================
* CARD
*
* Background Image มาจาก Elementor เดิม
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100 > .elementor-widget-text-editor {
position: relative;
width: 100%;
min-width: 0;
aspect-ratio: 1 / 1;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border-radius: 12px;
cursor: pointer;
isolation: isolate;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
/* =========================================================
* IMAGE HOVER LAYER
*
* ใช้วิธีเดียวกับ Ingredient Grid ที่ใช้งานได้
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100 > .elementor-widget-text-editor::after {
content: "";
position: absolute;
inset: -1px;
z-index: 0;
background-image: inherit;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
transform: scale(1);
transform-origin: center center;
backface-visibility: hidden;
will-change: transform;
transition:
transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* =========================================================
* DARK OVERLAY
*
* Figma:
* bg-black/40
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100 > .elementor-widget-text-editor::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: rgba(0, 0, 0, 0.40);
pointer-events: none;
transition:
background-color 500ms ease;
}
/* =========================================================
* ELEMENTOR WIDGET CONTAINER
*
* ไม่ให้ Elementor wrapper มารบกวนตำแหน่ง
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100
> .elementor-widget-text-editor
> .elementor-widget-container {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
* TEXT
*
* Card ปกติที่มี
*
* absolute เต็ม Card
* แล้ว center แนวตั้ง + แนวนอน
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100
> .elementor-widget-text-editor p {
position: absolute !important;
inset: 0;
z-index: 3;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100%;
height: 100%;
margin: 0 !important;
padding: 12px 16px !important;
color: #FFFFFF !important;
font-size: 24px;
line-height: 1.25;
font-weight: 600;
text-align: center !important;
pointer-events: none;
box-sizing: border-box;
/* เพิ่มความชัดบนภาพสว่าง */
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.35),
0 2px 8px rgba(0, 0, 0, 0.20);
}
/* =========================================================
* AIR WHIPPING
* Elementor: 06fd725
*
* HTML ตัวนี้ไม่มี
* จึงต้อง center .elementor-widget-container โดยตรง
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-06fd725
> .elementor-widget-container {
position: absolute !important;
inset: 0 !important;
z-index: 3;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 12px 16px !important;
box-sizing: border-box;
color: #FFFFFF !important;
font-size: 24px !important;
line-height: 1.25 !important;
font-weight: 600 !important;
text-align: center !important;
pointer-events: none;
text-shadow:
0 1px 3px rgba(0, 0, 0, 0.35),
0 2px 8px rgba(0, 0, 0, 0.20);
}
/* =========================================================
* HOVER
*
* Figma:
* scale 1.05
*
* ใช้ 1.06 + easing นุ่ม
* ========================================================= */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100
> .elementor-widget-text-editor:hover::after {
transform: scale(1.06);
}
/* Overlay เข้มขึ้นเล็กน้อยเมื่อ Hover */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100
> .elementor-widget-text-editor:hover::before {
background: rgba(0, 0, 0, 0.44);
}
/* =========================================================
* TABLET
* 768 — 1023
*
* Figma md:grid-cols-4
* ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
.elementor-283 .elementor-element.elementor-element-f5070cc > .e-con-inner {
padding-left: 24px;
padding-right: 24px;
}
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100 {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
/* Card ที่มี
*/
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100
> .elementor-widget-text-editor p {
font-size: 20px;
padding: 10px 12px !important;
}
/* Air Whipping */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-06fd725
> .elementor-widget-container {
font-size: 20px !important;
padding: 10px 12px !important;
}
}
/* =========================================================
* MOBILE
* < 768
*
* Figma:
* grid-cols-2
* px-4
* ========================================================= */
@media (max-width: 767px) {
.elementor-283 .elementor-element.elementor-element-f5070cc {
padding-top: 64px;
padding-bottom: 64px;
}
.elementor-283 .elementor-element.elementor-element-f5070cc > .e-con-inner {
padding-left: 16px;
padding-right: 16px;
}
/* Eyebrow */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-e34755e .elementor-heading-title {
font-size: 14px;
}
/* Heading */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-9dcbf83 .elementor-heading-title {
font-size: 24px;
}
/* Grid */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
/* Card text */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100
> .elementor-widget-text-editor p {
font-size: 20px;
line-height: 1.2;
padding: 10px 12px !important;
}
/* Air Whipping */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-06fd725
> .elementor-widget-container {
font-size: 20px !important;
line-height: 1.2 !important;
padding: 10px 12px !important;
}
/* Mobile ไม่ต้อง reserve GPU */
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100
> .elementor-widget-text-editor::after {
will-change: auto;
}
}
/* =========================================================
* SMALL MOBILE
* ========================================================= */
@media (max-width: 380px) {
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100
> .elementor-widget-text-editor p {
font-size: 18px;
}
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-06fd725
> .elementor-widget-container {
font-size: 18px !important;
}
}
/* =========================================================
* REDUCED MOTION
* ========================================================= */
@media (prefers-reduced-motion: reduce) {
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100
> .elementor-widget-text-editor::after,
.elementor-283 .elementor-element.elementor-element-f5070cc .elementor-element-4660100
> .elementor-widget-text-editor::before {
transition: none;
}
}/* End custom CSS */