.elementor-152 .elementor-element.elementor-element-165c073{--display:flex;--min-height:340px;--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;--align-items:center;--overlay-opacity:0.92;--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-152 .elementor-element.elementor-element-165c073:not(.elementor-motion-effects-element-type-background), .elementor-152 .elementor-element.elementor-element-165c073 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://grassjp.com/wp-content/uploads/2025/10/z7093284254914_24ba317c5d977c224c6ae377d3982260.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-152 .elementor-element.elementor-element-165c073::before, .elementor-152 .elementor-element.elementor-element-165c073 > .elementor-background-video-container::before, .elementor-152 .elementor-element.elementor-element-165c073 > .e-con-inner > .elementor-background-video-container::before, .elementor-152 .elementor-element.elementor-element-165c073 > .elementor-background-slideshow::before, .elementor-152 .elementor-element.elementor-element-165c073 > .e-con-inner > .elementor-background-slideshow::before, .elementor-152 .elementor-element.elementor-element-165c073 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#16171A4D;--background-overlay:'';}.elementor-152 .elementor-element.elementor-element-2a50d1b{--display:flex;}.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-152 .elementor-element.elementor-element-659056b .elementor-heading-title{font-size:16px;font-weight:bold;color:#FFFFFF;}.elementor-152 .elementor-element.elementor-element-2146a8d .elementor-heading-title{font-size:40px;font-weight:bold;color:#FFFFFF;}.elementor-152 .elementor-element.elementor-element-65741c4{--display:flex;--min-height:110px;--justify-content:flex-end;--align-items:flex-end;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-152 .elementor-element.elementor-element-5e67573f{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-152 .elementor-element.elementor-element-43e71e8f{padding:40px 0px 0px 0px;text-align:center;}.elementor-152 .elementor-element.elementor-element-43e71e8f .elementor-heading-title{color:#000000;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );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-152 .elementor-element.elementor-element-1aa17a5{width:var( --container-widget-width, 50% );max-width:50%;--container-widget-width:50%;--container-widget-flex-grow:0;text-align:justify;color:#000000;}.elementor-152 .elementor-element.elementor-element-1aa17a5.elementor-element{--align-self:center;}.elementor-152 .elementor-element.elementor-element-1f2a670d{--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;--margin-top:80px;--margin-bottom:120px;--margin-left:0px;--margin-right:0px;}.elementor-152 .elementor-element.elementor-element-27437390{--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;border-style:solid;--border-style:solid;border-width:2px 2px 2px 2px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:2px;--border-left-width:2px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--border-radius:4px 4px 4px 4px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-152 .elementor-element.elementor-element-6c2b5029{--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-152 .elementor-element.elementor-element-d9bdf0c{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-152 .elementor-element.elementor-element-13c14352{--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:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-152 .elementor-element.elementor-element-13c14352.e-con{--align-self:flex-start;}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-152 .elementor-element.elementor-element-127349db{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-152 .elementor-element.elementor-element-127349db .elementor-icon-wrapper{text-align:left;}.elementor-152 .elementor-element.elementor-element-127349db.elementor-view-stacked .elementor-icon:hover{background-color:#FFFFFF;}.elementor-152 .elementor-element.elementor-element-127349db.elementor-view-framed .elementor-icon:hover, .elementor-152 .elementor-element.elementor-element-127349db.elementor-view-default .elementor-icon:hover{color:#FFFFFF;border-color:#FFFFFF;}.elementor-152 .elementor-element.elementor-element-127349db.elementor-view-framed .elementor-icon:hover, .elementor-152 .elementor-element.elementor-element-127349db.elementor-view-default .elementor-icon:hover svg{fill:#FFFFFF;}.elementor-152 .elementor-element.elementor-element-e6c36aa img{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-152 .elementor-element.elementor-element-592afacf{--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;--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-152 .elementor-element.elementor-element-45f89e9{text-align:left;}.elementor-152 .elementor-element.elementor-element-45f89e9 .elementor-heading-title{color:#FFC800;}.elementor-152 .elementor-element.elementor-element-53b7aa11{color:#000000;}.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-152 .elementor-element.elementor-element-3cf51da1 .elementor-button{background-color:var( --e-global-color-primary );box-shadow:2px 2px 2px 0px rgba(0,0,0,0.5);}.elementor-152 .elementor-element.elementor-element-3cf51da1 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-152 .elementor-element.elementor-element-ec28050{--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;border-style:solid;--border-style:solid;border-width:2px 2px 2px 2px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:2px;--border-left-width:2px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--border-radius:4px 4px 4px 4px;}.elementor-152 .elementor-element.elementor-element-b7d2566 img{height:207px;object-fit:cover;object-position:center center;}.elementor-152 .elementor-element.elementor-element-fb654f1{--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-152 .elementor-element.elementor-element-2f4d3c0{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-152 .elementor-element.elementor-element-6ee7857{--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:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-152 .elementor-element.elementor-element-6ee7857.e-con{--align-self:flex-start;}.elementor-152 .elementor-element.elementor-element-7ec3567{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-152 .elementor-element.elementor-element-7ec3567 .elementor-icon-wrapper{text-align:left;}.elementor-152 .elementor-element.elementor-element-7ec3567.elementor-view-stacked .elementor-icon:hover{background-color:#FFFFFF;}.elementor-152 .elementor-element.elementor-element-7ec3567.elementor-view-framed .elementor-icon:hover, .elementor-152 .elementor-element.elementor-element-7ec3567.elementor-view-default .elementor-icon:hover{color:#FFFFFF;border-color:#FFFFFF;}.elementor-152 .elementor-element.elementor-element-7ec3567.elementor-view-framed .elementor-icon:hover, .elementor-152 .elementor-element.elementor-element-7ec3567.elementor-view-default .elementor-icon:hover svg{fill:#FFFFFF;}.elementor-152 .elementor-element.elementor-element-fa14a3d img{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-152 .elementor-element.elementor-element-31d16b6{--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;--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-152 .elementor-element.elementor-element-ef7d704{text-align:left;}.elementor-152 .elementor-element.elementor-element-ef7d704 .elementor-heading-title{color:#FFC800;}.elementor-152 .elementor-element.elementor-element-e877c86{color:#000000;}.elementor-152 .elementor-element.elementor-element-a185054 .elementor-button{background-color:var( --e-global-color-primary );box-shadow:2px 2px 2px 0px rgba(0,0,0,0.5);}.elementor-152 .elementor-element.elementor-element-a185054 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-152 .elementor-element.elementor-element-c617d5c{--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;border-style:solid;--border-style:solid;border-width:2px 2px 2px 2px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:2px;--border-left-width:2px;border-color:var( --e-global-color-primary );--border-color:var( --e-global-color-primary );--border-radius:4px 4px 4px 4px;}.elementor-152 .elementor-element.elementor-element-7a80685 img{height:207px;object-fit:cover;object-position:center center;}.elementor-152 .elementor-element.elementor-element-69bcfba{--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-152 .elementor-element.elementor-element-679d30e{--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;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-152 .elementor-element.elementor-element-1eb4ca2{--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:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-152 .elementor-element.elementor-element-1eb4ca2.e-con{--align-self:flex-start;}.elementor-152 .elementor-element.elementor-element-eb64652{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-152 .elementor-element.elementor-element-eb64652 .elementor-icon-wrapper{text-align:left;}.elementor-152 .elementor-element.elementor-element-eb64652.elementor-view-stacked .elementor-icon:hover{background-color:#FFFFFF;}.elementor-152 .elementor-element.elementor-element-eb64652.elementor-view-framed .elementor-icon:hover, .elementor-152 .elementor-element.elementor-element-eb64652.elementor-view-default .elementor-icon:hover{color:#FFFFFF;border-color:#FFFFFF;}.elementor-152 .elementor-element.elementor-element-eb64652.elementor-view-framed .elementor-icon:hover, .elementor-152 .elementor-element.elementor-element-eb64652.elementor-view-default .elementor-icon:hover svg{fill:#FFFFFF;}.elementor-152 .elementor-element.elementor-element-260e09a img{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-152 .elementor-element.elementor-element-3b4c3be{--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;--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-152 .elementor-element.elementor-element-87a5ef3{text-align:left;}.elementor-152 .elementor-element.elementor-element-87a5ef3 .elementor-heading-title{color:#FFC800;}.elementor-152 .elementor-element.elementor-element-9d12364{color:#000000;}.elementor-152 .elementor-element.elementor-element-a65cbf7 .elementor-button{background-color:var( --e-global-color-primary );box-shadow:2px 2px 2px 0px rgba(0,0,0,0.5);}.elementor-152 .elementor-element.elementor-element-a65cbf7 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(min-width:768px){.elementor-152 .elementor-element.elementor-element-165c073{--content-width:1370px;}.elementor-152 .elementor-element.elementor-element-5e67573f{--content-width:1270px;}.elementor-152 .elementor-element.elementor-element-1f2a670d{--content-width:1200px;}}@media(max-width:1366px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}}@media(max-width:767px){.elementor-152 .elementor-element.elementor-element-165c073{--min-height:250px;}.elementor-152 .elementor-element.elementor-element-165c073:not(.elementor-motion-effects-element-type-background), .elementor-152 .elementor-element.elementor-element-165c073 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:cover;}.elementor-152 .elementor-element.elementor-element-65741c4{--min-height:0px;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );}.elementor-152 .elementor-element.elementor-element-1aa17a5{width:100%;max-width:100%;}.elementor-widget-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}}/* Start custom CSS for container, class: .elementor-element-5e67573f *//* ===== ST Human – Service Cards hover (Elementor V4) ===== */
.services-wrap .st-card{
  position:relative; overflow:hidden; background:#fff;
  border:1px solid rgba(226,28,33,.35); border-radius:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.04); transition:.25s ease;
}
.services-wrap .st-card:hover{ box-shadow:0 10px 28px rgba(0,0,0,.08) }

/* Ảnh + overlay tối + zoom khi hover (cho card có class .hoverable) */
.services-wrap .st-card .elementor-widget-image{ position:relative }
.services-wrap .st-card .elementor-widget-image img{
  width:100%; display:block; transition:transform .5s ease;
}
.services-wrap .st-card.hoverable:hover .elementor-widget-image img{ transform:scale(1.08) }
.services-wrap .st-card .elementor-widget-image:after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.35);
  opacity:0; transition:opacity .35s ease;
}
.services-wrap .st-card.hoverable:hover .elementor-widget-image:after{ opacity:1 }

/* Badge icon “đè” lên mép ảnh */
.services-wrap .st-card .elementor-widget-icon{ 
  margin-top:-30px; /* kéo lên chồng vào ảnh */
  z-index:2;
}
.services-wrap .st-card .elementor-widget-icon .elementor-icon{
  width:64px; height:64px; line-height:64px; text-align:center;
  border-radius:50%; background:#e21c21; color:#fff; font-size:26px;
  border:6px solid #fff; box-shadow:0 6px 20px rgba(0,0,0,.12);
}

/* Tiêu đề + mô tả */
.services-wrap .st-card .elementor-widget-heading .elementor-heading-title{ margin:8px 0 10px }
.services-wrap .st-card .elementor-widget-text-editor{ color:#515c6d }

/* Nút “詳しく見る”:
   - Card KHÔNG hoverable (card #1): hiện kiểu link dưới nội dung.
   - Card hoverable (card #2,#3): ẩn mặc định, chỉ hiện overlay ở giữa khi hover. */
.services-wrap .st-card .st-view-btn{ transition:.35s }
.services-wrap .st-card:not(.hoverable) .st-view-btn{
  position:static; transform:none; opacity:1; pointer-events:auto; margin-top:8px;
}
.services-wrap .st-card:not(.hoverable) .st-view-btn .elementor-button{
  background:transparent; color:#e21c21; padding:0; box-shadow:none; border:none;
}
.services-wrap .st-card:not(.hoverable) .st-view-btn .elementor-button:hover{ opacity:.8 }
.services-wrap .st-card:not(.hoverable) .st-view-btn .elementor-button:after{
  content:"\f061"; /* Font Awesome arrow-right */
  font-family:"Font Awesome 6 Free"; font-weight:900; margin-left:10px;
}

/* Nút overlay giữa ảnh cho card hoverable */
.services-wrap .st-card .st-view-btn{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-40%); opacity:0; pointer-events:none; z-index:5;
}
.services-wrap .st-card.hoverable:hover .st-view-btn{
  opacity:1; transform:translate(-50%,-50%); pointer-events:auto;
}
.services-wrap .st-card .st-view-btn .elementor-button{
  padding:.8em 1.6em; border-radius:999px; background:#e21c21; color:#fff; border:none;
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-e6c36aa */.elementor-152 .elementor-element.elementor-element-e6c36aa img{
  filter: brightness(0) saturate(100%) invert(74%) sepia(96%) saturate(650%) hue-rotate(360deg) brightness(102%) contrast(104%)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-13c14352 *//* Container icon (data-id=13c14352) đặt chồng lên thumbnail */
.elementor-element[data-id="13c14352"] {
  position: absolute;
  top: -100px;        /* số âm để vòng tròn cắn xuống thumb */
  left: 24px;        /* sát mép trái */
  width: 120px;
  height: 120px;
  z-index: 10;       /* cao hơn ảnh */
  margin: 0 !important;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-3cf51da1 *//* Button CTA: icon-only -> reveal text on hover (với inline SVG) */

/* 0) Đảm bảo widget hoạt động như mong muốn */
.tp-service-arrow.elementor-widget-button { display: block; }

/* 1) Reset nút, chỉ dùng màu chữ/icon, không nền */
.tp-service-arrow .elementor-button{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  color: #FFC800; /* màu icon & text CTA */
}

/* 2) Inline SVG phải ăn theo color */
.tp-service-arrow .elementor-button .elementor-button-icon svg,
.tp-service-arrow .elementor-button .elementor-button-icon svg path{
  fill: currentColor !important;
  stroke: none !important;
  transition: transform .25s ease; /* để trượt mũi tên */
}

/* 3) Wrapper nội dung: luôn 1 hàng */
.tp-service-arrow .elementor-button .elementor-button-content-wrapper{
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;
}

/* 4) Text: ẩn mặc định nhưng vẫn chiếm 0 chiều rộng để animate */
.tp-service-arrow .elementor-button .elementor-button-text{
  display: inline-block !important;  /* QUAN TRỌNG */
  flex: 0 0 auto !important;
  max-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transform: translateX(-6px);
  margin-left: 0 !important;
  transition:
    max-width .35s ease,
    opacity .25s ease,
    transform .25s ease,
    margin-left .25s ease !important;
}

/* 5) Hover card HOẶC hover trực tiếp nút -> hiện text + icon trượt */
.tp-service-item:hover .tp-service-arrow .elementor-button .elementor-button-text,
.tp-service-arrow .elementor-button:hover .elementor-button-text,
.elementor-element[data-id="3cf51da1"]:hover .elementor-button-text{
  max-width: 180px !important;  /* đủ chứa “詳しく見る” */
  opacity: 1 !important;
  transform: translateX(0);
  margin-left: 10px !important; /* khoảng cách giữa icon và chữ */
}

.tp-service-item:hover .elementor-element[data-id="3cf51da1"] .elementor-button .elementor-button-icon svg,
.tp-service-arrow .elementor-button:hover .elementor-button-icon svg,
.elementor-element[data-id="3cf51da1"]:hover .elementor-button .elementor-button-icon svg{
  transform: translateX(4px);
}

/* 6) Không đổi nền khi hover */
.tp-service-arrow .elementor-button:hover{
  background: transparent !important;
  box-shadow: none !important;
}
.elementor-element[data-id="27437390"]:hover .elementor-element[data-id="3cf51da1"] .elementor-button-text{
  max-width:180px!important; opacity:1!important; transform:translateX(0); margin-left:10px!important;
}
.elementor-element[data-id="27437390"]:hover .elementor-element[data-id="3cf51da1"] .elementor-button-icon svg{
  transform:translateX(4px);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d9bdf0c *//* ===============================
   ICON CIRCLE (chuẩn cuối)
   Thường: vòng tròn TRẮNG, icon VÀNG
   Hover card: vòng tròn VÀNG, icon TRẮNG
   Căn TRÁI, chồng lên mép ảnh
================================= */

/* Màu vàng chuẩn */
:root { --icon-accent: #ffc107; }

/* (khuyến nghị) thumbnail relative để xếp lớp an toàn */
.tp-service-thumb { position: relative; overflow: hidden; }

/* Cho phép đặt icon absolute trong vùng content */
.tp-service-content { position: relative; }

/* Container bọc icon + shape (đặt TRÁI, chồng lên thumb) */
.elementor-element[data-id="13c14352"]{
  position: absolute;          /* chồng lên */
  left: 24px;                  /* chỉnh theo layout: 16–28px */
  top: -100px;                 /* âm để ăn vào thumbnail (bạn confirm đẹp) */
  width: 120px;
  height: 120px;
  z-index: 10;
  margin: 0 !important;        /* bỏ căn giữa */
}

/* Vòng tròn icon chính (Elementor render .elementor-icon) */
.tp-service-icon-fa .elementor-icon{
  width: 100px; height: 100px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff;                 /* TRẮNG mặc định */
  color: var(--icon-accent);        /* icon VÀNG mặc định */
  font-size: 40px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  position: relative;
  z-index: 2;                       /* nằm trên shape */
  transition:
    background-color .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

/* Đảm bảo inline SVG ăn màu theo color */
.tp-service-icon-fa .elementor-icon svg,
.tp-service-icon-fa .elementor-icon svg path{
  fill: currentColor !important;
  stroke: none !important;
}

/* Shape PNG phía sau (ẩn mặc định) */
.tp-service-icon-shape{
  position: absolute !important;
  top: 50%; left: 50%;
  width: 120px; height: 120px;
  transform: translate(-50%,-50%) scale(.88) rotate(-6deg);
  opacity: 0;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    opacity .35s ease;
  z-index: 1;
  pointer-events: none;
}
.tp-service-icon-shape img{ width:100%; height:100%; object-fit:contain; }

/* ---- HOVER (ưu tiên theo class card) ---- */
.tp-service-item:hover .tp-service-icon-fa .elementor-icon{
  background: var(--icon-accent);    /* NỀN VÀNG */
  color: #fff;                       /* ICON TRẮNG */
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}
.tp-service-item:hover .tp-service-icon-shape{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1) rotate(0deg);
}

/* Fallback nếu card CHƯA có .tp-service-item — dùng đúng data-id của card */
.elementor-element[data-id="27437390"]:hover .tp-service-icon-fa .elementor-icon{
  background: var(--icon-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}
.elementor-element[data-id="27437390"]:hover .tp-service-icon-shape{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1) rotate(0);
}

/* === Icon “mục trên” cũng là SVG → mặc định VÀNG, hover TRẮNG ===
   (không ảnh hưởng CTA vì CTA là .elementor-widget-button) */
.tp-service-item .elementor-widget-icon .elementor-icon{
  color: var(--icon-accent);
  transition: color .25s ease;
}
.tp-service-item .elementor-widget-icon .elementor-icon svg,
.tp-service-item .elementor-widget-icon .elementor-icon svg path{
  fill: currentColor !important;
}
.tp-service-item:hover .elementor-widget-icon .elementor-icon{
  color: #fff;
}

/* (tuỳ chọn) nếu chỉ muốn áp cho 1 icon cụ thể, gắn class 'tp-icon-top' vào widget icon đó:
.tp-icon-top .elementor-icon{ color: var(--icon-accent); transition: color .25s ease; }
.tp-icon-top .elementor-icon svg, .tp-icon-top .elementor-icon svg path{ fill: currentColor !important; }
.tp-service-item:hover .tp-icon-top .elementor-icon{ color:#fff; }
*//* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-fa14a3d */.elementor-152 .elementor-element.elementor-element-fa14a3d img{
  filter: brightness(0) saturate(100%) invert(74%) sepia(96%) saturate(650%) hue-rotate(360deg) brightness(102%) contrast(104%)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-6ee7857 *//* Container icon (data-id=13c14352) đặt chồng lên thumbnail */
.elementor-element[data-id="13c14352"] {
  position: absolute;
  top: -100px;        /* số âm để vòng tròn cắn xuống thumb */
  left: 24px;        /* sát mép trái */
  width: 120px;
  height: 120px;
  z-index: 10;       /* cao hơn ảnh */
  margin: 0 !important;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a185054 *//* Button CTA: icon-only -> reveal text on hover (với inline SVG) */

/* 0) Đảm bảo widget hoạt động như mong muốn */
.tp-service-arrow.elementor-widget-button { display: block; }

/* 1) Reset nút, chỉ dùng màu chữ/icon, không nền */
.tp-service-arrow .elementor-button{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  color: #FFC800; /* màu icon & text CTA */
}

/* 2) Inline SVG phải ăn theo color */
.tp-service-arrow .elementor-button .elementor-button-icon svg,
.tp-service-arrow .elementor-button .elementor-button-icon svg path{
  fill: currentColor !important;
  stroke: none !important;
  transition: transform .25s ease; /* để trượt mũi tên */
}

/* 3) Wrapper nội dung: luôn 1 hàng */
.tp-service-arrow .elementor-button .elementor-button-content-wrapper{
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;
}

/* 4) Text: ẩn mặc định nhưng vẫn chiếm 0 chiều rộng để animate */
.tp-service-arrow .elementor-button .elementor-button-text{
  display: inline-block !important;  /* QUAN TRỌNG */
  flex: 0 0 auto !important;
  max-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transform: translateX(-6px);
  margin-left: 0 !important;
  transition:
    max-width .35s ease,
    opacity .25s ease,
    transform .25s ease,
    margin-left .25s ease !important;
}

/* 5) Hover card HOẶC hover trực tiếp nút -> hiện text + icon trượt */
.tp-service-item:hover .tp-service-arrow .elementor-button .elementor-button-text,
.tp-service-arrow .elementor-button:hover .elementor-button-text,
.elementor-element[data-id="3cf51da1"]:hover .elementor-button-text{
  max-width: 180px !important;  /* đủ chứa “詳しく見る” */
  opacity: 1 !important;
  transform: translateX(0);
  margin-left: 10px !important; /* khoảng cách giữa icon và chữ */
}

.tp-service-item:hover .elementor-element[data-id="3cf51da1"] .elementor-button .elementor-button-icon svg,
.tp-service-arrow .elementor-button:hover .elementor-button-icon svg,
.elementor-element[data-id="3cf51da1"]:hover .elementor-button .elementor-button-icon svg{
  transform: translateX(4px);
}

/* 6) Không đổi nền khi hover */
.tp-service-arrow .elementor-button:hover{
  background: transparent !important;
  box-shadow: none !important;
}
/* Hover card (id=ec28050) */
.elementor-element[data-id="ec28050"]:hover .elementor-element[data-id="a185054"] .elementor-button-text{
  max-width:180px!important; opacity:1!important; transform:translateX(0); margin-left:10px!important;
}
.elementor-element[data-id="ec28050"]:hover .elementor-element[data-id="a185054"] .elementor-button-icon svg{
  transform:translateX(4px);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2f4d3c0 *//* ===============================
   ICON CIRCLE (chuẩn cuối)
   Thường: vòng tròn TRẮNG, icon VÀNG
   Hover card: vòng tròn VÀNG, icon TRẮNG
   Căn TRÁI, chồng lên mép ảnh
================================= */

/* Màu vàng chuẩn */
:root { --icon-accent: #ffc107; }

/* (khuyến nghị) thumbnail relative để xếp lớp an toàn */
.tp-service-thumb { position: relative; overflow: hidden; }

/* Cho phép đặt icon absolute trong vùng content */
.tp-service-content { position: relative; }

/* Container bọc icon + shape (đặt TRÁI, chồng lên thumb) */
.elementor-element[data-id="13c14352"]{
  position: absolute;          /* chồng lên */
  left: 24px;                  /* chỉnh theo layout: 16–28px */
  top: -100px;                 /* âm để ăn vào thumbnail (bạn confirm đẹp) */
  width: 120px;
  height: 120px;
  z-index: 10;
  margin: 0 !important;        /* bỏ căn giữa */
}

/* Vòng tròn icon chính (Elementor render .elementor-icon) */
.tp-service-icon-fa .elementor-icon{
  width: 100px; height: 100px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff;                 /* TRẮNG mặc định */
  color: var(--icon-accent);        /* icon VÀNG mặc định */
  font-size: 40px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  position: relative;
  z-index: 2;                       /* nằm trên shape */
  transition:
    background-color .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

/* Đảm bảo inline SVG ăn màu theo color */
.tp-service-icon-fa .elementor-icon svg,
.tp-service-icon-fa .elementor-icon svg path{
  fill: currentColor !important;
  stroke: none !important;
}

/* Shape PNG phía sau (ẩn mặc định) */
.tp-service-icon-shape{
  position: absolute !important;
  top: 50%; left: 50%;
  width: 120px; height: 120px;
  transform: translate(-50%,-50%) scale(.88) rotate(-6deg);
  opacity: 0;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    opacity .35s ease;
  z-index: 1;
  pointer-events: none;
}
.tp-service-icon-shape img{ width:100%; height:100%; object-fit:contain; }

/* ---- HOVER (ưu tiên theo class card) ---- */
.tp-service-item:hover .tp-service-icon-fa .elementor-icon{
  background: var(--icon-accent);    /* NỀN VÀNG */
  color: #fff;                       /* ICON TRẮNG */
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}
.tp-service-item:hover .tp-service-icon-shape{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1) rotate(0deg);
}

/* Fallback nếu card CHƯA có .tp-service-item — dùng đúng data-id của card */
.elementor-element[data-id="27437390"]:hover .tp-service-icon-fa .elementor-icon{
  background: var(--icon-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}
.elementor-element[data-id="27437390"]:hover .tp-service-icon-shape{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1) rotate(0);
}

/* === Icon “mục trên” cũng là SVG → mặc định VÀNG, hover TRẮNG ===
   (không ảnh hưởng CTA vì CTA là .elementor-widget-button) */
.tp-service-item .elementor-widget-icon .elementor-icon{
  color: var(--icon-accent);
  transition: color .25s ease;
}
.tp-service-item .elementor-widget-icon .elementor-icon svg,
.tp-service-item .elementor-widget-icon .elementor-icon svg path{
  fill: currentColor !important;
}
.tp-service-item:hover .elementor-widget-icon .elementor-icon{
  color: #fff;
}

/* (tuỳ chọn) nếu chỉ muốn áp cho 1 icon cụ thể, gắn class 'tp-icon-top' vào widget icon đó:
.tp-icon-top .elementor-icon{ color: var(--icon-accent); transition: color .25s ease; }
.tp-icon-top .elementor-icon svg, .tp-icon-top .elementor-icon svg path{ fill: currentColor !important; }
.tp-service-item:hover .tp-icon-top .elementor-icon{ color:#fff; }
*//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ec28050 *//* Icon (icon container id=6ee7857, icon widget .tp-service-icon-fa, shape id=fa14a3d) */
.elementor-element[data-id="6ee7857"]{
  position:absolute;
  left:24px; top:-100px;
  width:120px; height:120px;
  z-index:20;                     /* cao hơn overlay/line */
  margin:0 !important;
}

/* Vòng tròn icon: nằm TRÊN shape */
.elementor-element[data-id="ec28050"] .tp-service-icon-fa .elementor-icon{
  width:100px; height:100px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#ffc107; font-size:40px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  transition:background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
  position:relative; z-index:2;   /* <- icon ở trên */
}
.elementor-element[data-id="ec28050"] .tp-service-icon-fa .elementor-icon svg,
.elementor-element[data-id="ec28050"] .tp-service-icon-fa .elementor-icon svg path{
  fill:currentColor !important; stroke:none !important;
}

/* SHAPE: lấp đầy khung 120x120, nằm SAU icon */
.elementor-element[data-id="fa14a3d"]{
  position:absolute !important;
  inset:0 !important;             /* fill đúng wrapper 6ee7857 */
  width:100% !important; height:100% !important;
  z-index:1 !important;           /* <- ở dưới icon */
  transform:scale(.88) rotate(-6deg);
  opacity:0;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.08));
  transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
  pointer-events:none;
}
.elementor-element[data-id="fa14a3d"] img{
  width:100%; height:100%; object-fit:contain;
}

/* Hover card (id=ec28050) */
.elementor-element[data-id="ec28050"]:hover .tp-service-icon-fa .elementor-icon{
  background:#ffc107; color:#fff; transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.15);
}
.elementor-element[data-id="ec28050"]:hover .elementor-element[data-id="fa14a3d"]{
  opacity:1; transform:scale(1) rotate(0);
}/* End custom CSS */
/* Start custom CSS for image, class: .elementor-element-260e09a */.elementor-152 .elementor-element.elementor-element-260e09a img{
  filter: brightness(0) saturate(100%) invert(74%) sepia(96%) saturate(650%) hue-rotate(360deg) brightness(102%) contrast(104%)!important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1eb4ca2 *//* Container icon (data-id=13c14352) đặt chồng lên thumbnail */
.elementor-element[data-id="13c14352"] {
  position: absolute;
  top: -100px;        /* số âm để vòng tròn cắn xuống thumb */
  left: 24px;        /* sát mép trái */
  width: 120px;
  height: 120px;
  z-index: 10;       /* cao hơn ảnh */
  margin: 0 !important;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-a65cbf7 *//* Button CTA: icon-only -> reveal text on hover (với inline SVG) */

/* 0) Đảm bảo widget hoạt động như mong muốn */
.tp-service-arrow.elementor-widget-button { display: block; }

/* 1) Reset nút, chỉ dùng màu chữ/icon, không nền */
.tp-service-arrow .elementor-button{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  line-height: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  color: #FFC800; /* màu icon & text CTA */
}

/* 2) Inline SVG phải ăn theo color */
.tp-service-arrow .elementor-button .elementor-button-icon svg,
.tp-service-arrow .elementor-button .elementor-button-icon svg path{
  fill: currentColor !important;
  stroke: none !important;
  transition: transform .25s ease; /* để trượt mũi tên */
}

/* 3) Wrapper nội dung: luôn 1 hàng */
.tp-service-arrow .elementor-button .elementor-button-content-wrapper{
  display: inline-flex !important;
  align-items: center;
  gap: 0 !important;
}

/* 4) Text: ẩn mặc định nhưng vẫn chiếm 0 chiều rộng để animate */
.tp-service-arrow .elementor-button .elementor-button-text{
  display: inline-block !important;  /* QUAN TRỌNG */
  flex: 0 0 auto !important;
  max-width: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  transform: translateX(-6px);
  margin-left: 0 !important;
  transition:
    max-width .35s ease,
    opacity .25s ease,
    transform .25s ease,
    margin-left .25s ease !important;
}

/* 5) Hover card HOẶC hover trực tiếp nút -> hiện text + icon trượt */
.tp-service-item:hover .tp-service-arrow .elementor-button .elementor-button-text,
.tp-service-arrow .elementor-button:hover .elementor-button-text,
.elementor-element[data-id="3cf51da1"]:hover .elementor-button-text{
  max-width: 180px !important;  /* đủ chứa “詳しく見る” */
  opacity: 1 !important;
  transform: translateX(0);
  margin-left: 10px !important; /* khoảng cách giữa icon và chữ */
}

.tp-service-item:hover .elementor-element[data-id="3cf51da1"] .elementor-button .elementor-button-icon svg,
.tp-service-arrow .elementor-button:hover .elementor-button-icon svg,
.elementor-element[data-id="3cf51da1"]:hover .elementor-button .elementor-button-icon svg{
  transform: translateX(4px);
}

/* 6) Không đổi nền khi hover */
.tp-service-arrow .elementor-button:hover{
  background: transparent !important;
  box-shadow: none !important;
}
/* Hover card (id=c617d5c) */
.elementor-element[data-id="c617d5c"]:hover .elementor-element[data-id="a65cbf7"] .elementor-button-text{
  max-width:180px!important; opacity:1!important; transform:translateX(0); margin-left:10px!important;
}
.elementor-element[data-id="c617d5c"]:hover .elementor-element[data-id="a65cbf7"] .elementor-button-icon svg{
  transform:translateX(4px);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-679d30e *//* ===============================
   ICON CIRCLE (chuẩn cuối)
   Thường: vòng tròn TRẮNG, icon VÀNG
   Hover card: vòng tròn VÀNG, icon TRẮNG
   Căn TRÁI, chồng lên mép ảnh
================================= */

/* Màu vàng chuẩn */
:root { --icon-accent: #ffc107; }

/* (khuyến nghị) thumbnail relative để xếp lớp an toàn */
.tp-service-thumb { position: relative; overflow: hidden; }

/* Cho phép đặt icon absolute trong vùng content */
.tp-service-content { position: relative; }

/* Container bọc icon + shape (đặt TRÁI, chồng lên thumb) */
.elementor-element[data-id="13c14352"]{
  position: absolute;          /* chồng lên */
  left: 24px;                  /* chỉnh theo layout: 16–28px */
  top: -100px;                 /* âm để ăn vào thumbnail (bạn confirm đẹp) */
  width: 120px;
  height: 120px;
  z-index: 10;
  margin: 0 !important;        /* bỏ căn giữa */
}

/* Vòng tròn icon chính (Elementor render .elementor-icon) */
.tp-service-icon-fa .elementor-icon{
  width: 100px; height: 100px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff;                 /* TRẮNG mặc định */
  color: var(--icon-accent);        /* icon VÀNG mặc định */
  font-size: 40px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  position: relative;
  z-index: 2;                       /* nằm trên shape */
  transition:
    background-color .3s ease,
    color .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

/* Đảm bảo inline SVG ăn màu theo color */
.tp-service-icon-fa .elementor-icon svg,
.tp-service-icon-fa .elementor-icon svg path{
  fill: currentColor !important;
  stroke: none !important;
}

/* Shape PNG phía sau (ẩn mặc định) */
.tp-service-icon-shape{
  position: absolute !important;
  top: 50%; left: 50%;
  width: 120px; height: 120px;
  transform: translate(-50%,-50%) scale(.88) rotate(-6deg);
  opacity: 0;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    opacity .35s ease;
  z-index: 1;
  pointer-events: none;
}
.tp-service-icon-shape img{ width:100%; height:100%; object-fit:contain; }

/* ---- HOVER (ưu tiên theo class card) ---- */
.tp-service-item:hover .tp-service-icon-fa .elementor-icon{
  background: var(--icon-accent);    /* NỀN VÀNG */
  color: #fff;                       /* ICON TRẮNG */
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}
.tp-service-item:hover .tp-service-icon-shape{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1) rotate(0deg);
}

/* Fallback nếu card CHƯA có .tp-service-item — dùng đúng data-id của card */
.elementor-element[data-id="27437390"]:hover .tp-service-icon-fa .elementor-icon{
  background: var(--icon-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.15);
}
.elementor-element[data-id="27437390"]:hover .tp-service-icon-shape{
  opacity: 1;
  transform: translate(-50%,-50%) scale(1) rotate(0);
}

/* === Icon “mục trên” cũng là SVG → mặc định VÀNG, hover TRẮNG ===
   (không ảnh hưởng CTA vì CTA là .elementor-widget-button) */
.tp-service-item .elementor-widget-icon .elementor-icon{
  color: var(--icon-accent);
  transition: color .25s ease;
}
.tp-service-item .elementor-widget-icon .elementor-icon svg,
.tp-service-item .elementor-widget-icon .elementor-icon svg path{
  fill: currentColor !important;
}
.tp-service-item:hover .elementor-widget-icon .elementor-icon{
  color: #fff;
}

/* (tuỳ chọn) nếu chỉ muốn áp cho 1 icon cụ thể, gắn class 'tp-icon-top' vào widget icon đó:
.tp-icon-top .elementor-icon{ color: var(--icon-accent); transition: color .25s ease; }
.tp-icon-top .elementor-icon svg, .tp-icon-top .elementor-icon svg path{ fill: currentColor !important; }
.tp-service-item:hover .tp-icon-top .elementor-icon{ color:#fff; }
*//* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c617d5c *//*************** COLUMN 3 – ICON ***************/
 /* Wrapper icon (container id=1eb4ca2) – neo tại mép ảnh */
.elementor-element[data-id="1eb4ca2"]{
  position:absolute;
  left:24px; top:-100px;
  width:120px; height:120px;
  z-index:20;
  margin:0 !important;
}

/* Vòng tròn icon: TRÊN shape */
.elementor-element[data-id="c617d5c"] .tp-service-icon-fa .elementor-icon{
  width:100px; height:100px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color:#ffc107; font-size:40px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  transition:background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
  position:relative; z-index:2;
}
/* SVG ăn màu theo color */
.elementor-element[data-id="c617d5c"] .tp-service-icon-fa .elementor-icon svg,
.elementor-element[data-id="c617d5c"] .tp-service-icon-fa .elementor-icon svg path{
  fill: currentColor !important;
  stroke: none !important;
}

/* SHAPE (id=260e09a): fill khung, Ở DƯỚI icon */
.elementor-element[data-id="260e09a"]{
  position:absolute !important;
  inset:0 !important;
  width:100% !important; height:100% !important;
  z-index:1 !important;
  transform: scale(.88) rotate(-6deg);
  opacity: 0;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
  transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
  pointer-events: none;
}
.elementor-element[data-id="260e09a"] img{
  width:100%; height:100%; object-fit:contain;
}

/* Hover toàn card (id=c617d5c) */
.elementor-element[data-id="c617d5c"]:hover .tp-service-icon-fa .elementor-icon{
  background:#ffc107; color:#fff;
  transform: translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.15);
}
.elementor-element[data-id="c617d5c"]:hover .elementor-element[data-id="260e09a"]{
  opacity:1; transform: scale(1) rotate(0);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1f2a670d *//* Emergency: nếu JS chưa gỡ elementor-invisible thì cứ cho nó hiện */
.elementor-invisible { visibility: visible !important; }


/* Bọc & ảnh */
.tp-service-thumb {
  position: relative;
  overflow: hidden;
}
.tp-service-thumb img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
  transition: transform .35s ease; /* zoom nhẹ */
}

/* Overlay (trong suốt) */
.tp-service-thumb::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(22,22,22,.4);
  opacity: 0;
  visibility: hidden;            /* Không animate cái này */
  transition: opacity .35s ease; /* chỉ animate opacity */
  z-index: 2;
  pointer-events: none;          /* không chặn hover */
}

/* Thanh đỏ đáy – animate bằng transform thay vì width */
.tp-service-thumb::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 6px; width: 100%;
  background: #FFC800;
  opacity: 0;                    /* bật/tắt kèm transform */
  visibility: hidden;
  transform: scaleX(0);          /* từ 0 → 1 */
  transform-origin: left center;
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    opacity .3s ease;
  z-index: 3;
  pointer-events: none;          /* không chặn hover */
  will-change: transform;
}

/* Anchor hover – nếu card có class .tp-service-item */
.tp-service-item:hover .tp-service-thumb::before {
  opacity: 1; visibility: visible;
}
.tp-service-item:hover .tp-service-thumb::after {
  transform: scaleX(1);
  opacity: 1; visibility: visible;
}
.tp-service-item:hover .tp-service-thumb img {
  transform: scale(1.05);
}

/* Nếu bạn CHƯA gắn class .tp-service-item cho card
   hãy dùng data-id card của bạn thay cho .elementor-152 .elementor-element.elementor-element-1f2a670d dưới: */
.elementor-element[data-id="27437390"]:hover .tp-service-thumb::before {
  opacity: 1; visibility: visible;
}
.elementor-element[data-id="27437390"]:hover .tp-service-thumb::after {
  transform: scaleX(1);
  opacity: 1; visibility: visible;
}
.elementor-element[data-id="27437390"]:hover .tp-service-thumb img {
  transform: scale(1.05);
}/* End custom CSS */