.elementor-3280 .elementor-element.elementor-element-6d4ff4ca{--display:flex;--overlay-opacity:0.5;}.elementor-3280 .elementor-element.elementor-element-6d4ff4ca::before, .elementor-3280 .elementor-element.elementor-element-6d4ff4ca > .elementor-background-video-container::before, .elementor-3280 .elementor-element.elementor-element-6d4ff4ca > .e-con-inner > .elementor-background-video-container::before, .elementor-3280 .elementor-element.elementor-element-6d4ff4ca > .elementor-background-slideshow::before, .elementor-3280 .elementor-element.elementor-element-6d4ff4ca > .e-con-inner > .elementor-background-slideshow::before, .elementor-3280 .elementor-element.elementor-element-6d4ff4ca > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-3280 .elementor-element.elementor-element-560400fc{--display:flex;--min-height:120px;}.elementor-3280 .elementor-element.elementor-element-560400fc:not(.elementor-motion-effects-element-type-background), .elementor-3280 .elementor-element.elementor-element-560400fc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, #087B5F 0%, #00281E 100%);}.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 );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );text-decoration:var( --e-global-typography-text-text-decoration );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );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-3280 .elementor-element.elementor-element-0aeb52e{--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:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-3280 .elementor-element.elementor-element-0954093{--display:flex;}body.elementor-page-3280:not(.elementor-motion-effects-element-type-background), body.elementor-page-3280 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );letter-spacing:var( --e-global-typography-text-letter-spacing );}}/* Start custom CSS for html, class: .elementor-element-bb61e97 *//* ======== DESKTOP ======== */
.svc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 176px; /* Đã rút 20% */
    gap: 20px;
    width: 100%;
}
.svc-grid a{
    color: black;
}
/* Style chung */
.svc-item {
    border-radius: 14px;
    padding: 0px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.category_img{
    margin-top: 20px;
    width: 120%;
}


/* Cột 1 – cao 3 hàng */
.col1 {
    grid-row: span 3;
}
.dothiluc_wrapper {
    display: flex;
    justify-content: space-between; /* Chữ sát bên trái – Ảnh sát bên phải */
    align-items: center; /* Căn giữa theo trục dọc */
    width: 100%; 
}

.dothiluc_wrapper h3 {
    margin: 0; /* Cho chữ gọn gàng hơn */
    font-family:Saira Light;
}

/* Cột 2 */
.col2-1 {
    grid-row: span 2; /* cao bằng 2 ô đầu cột 3 */
}
.col2-2 {
    grid-row: span 1;
}

/* Cột 3 */
.col3-1 { grid-row: span 1; }
.col3-2 { grid-row: span 1; }

/* Ô thứ 3 cột 3 span sang cột 4 */
.col3-3 {
    grid-row: span 1;
    grid-column: 3 / span 2;
}

/* Cột 4 */
.col4-1 {
    grid-row: 1 / span 2;
    grid-column: 4;
}

@media (max-width: 1200px) {
    .svc-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: 150px;
        gap: 16px;
    }

    /* Ảnh thu nhỏ lại để không tràn layout */
    .svc-item-img {
        width: 200px;
        max-width: 60%;
    }

    /* Cột 4 đưa xuống dưới vì tablet chỉ còn 3 cột */
    .col4-1 {
        grid-column: span 1;
        grid-row: auto;
    }

    /* Ô span ở cột 3 thu lại còn span 1 */
    .col3-3 {
        grid-column: span 1;
    }
}

/* =====================================================
                MOBILE – max-width 768px
===================================================== */
@media (max-width: 768px) {

    .svc-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: auto;
        gap: 14px;
    }

    .svc-item {
        min-height: 180px;
        padding: 16px;
    }

    /* Ảnh nhỏ gọn lại */
    .svc-item-img {
        width: 160px;
        right: 8px;
        bottom: 8px;
    }

    /* Bỏ hết span để layout xếp tự nhiên */
    .col1,
    .col2-1,
    .col2-2,
    .col3-1,
    .col3-2,
    .col3-3,
    .col4-1 {
        grid-row: auto !important;
        grid-column: auto !important;
    }
}

/* =====================================================
                MOBILE NHỎ – max-width 480px
===================================================== */
@media (max-width: 480px) {

    .svc-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .svc-item-img {
        width: 140px;
    }
}/* End custom CSS */