.elementor-10 .elementor-element.elementor-element-f42ed7f{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-10 .elementor-element.elementor-element-d3cfb95{--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-10 .elementor-element.elementor-element-a42b180{text-align:center;}.elementor-10 .elementor-element.elementor-element-a42b180 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-10 .elementor-element.elementor-element-62b993c{--display:flex;}.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-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-10 .elementor-element.elementor-element-f53aba7{--display:flex;}.elementor-10 .elementor-element.elementor-element-df1c2f4{text-align:center;}.elementor-10 .elementor-element.elementor-element-df1c2f4 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-weight:600;}.elementor-10 .elementor-element.elementor-element-b581bf6{--display:flex;}.elementor-10 .elementor-element.elementor-element-7878e5c{--display:flex;}.elementor-10 .elementor-element.elementor-element-b14040a{text-align:center;}.elementor-10 .elementor-element.elementor-element-66df1d4{--display:flex;}.elementor-10 .elementor-element.elementor-element-0b39399{--display:flex;}.elementor-10 .elementor-element.elementor-element-4cf8d97{--display:flex;}.elementor-10 .elementor-element.elementor-element-4344f66{text-align:center;}.elementor-10 .elementor-element.elementor-element-269b161{--display:flex;}.elementor-10 .elementor-element.elementor-element-f094211{--display:flex;}.elementor-10 .elementor-element.elementor-element-3965543{--display:flex;}.elementor-10 .elementor-element.elementor-element-b5a5d90{text-align:center;}.elementor-10 .elementor-element.elementor-element-0193797{--display:flex;}.elementor-10 .elementor-element.elementor-element-c8bed79{--display:flex;}.elementor-10 .elementor-element.elementor-element-0724593{--display:flex;}.elementor-10 .elementor-element.elementor-element-62d2cd5{text-align:center;}.elementor-10 .elementor-element.elementor-element-2157b8f{--display:flex;}.elementor-10 .elementor-element.elementor-element-7f324e6{--display:flex;}.elementor-10 .elementor-element.elementor-element-6b4e842{text-align:center;}.elementor-10 .elementor-element.elementor-element-4ed8608{--display:flex;}.elementor-10 .elementor-element.elementor-element-3008cdd{--display:flex;}.elementor-10 .elementor-element.elementor-element-33f228c{--display:flex;}.elementor-10 .elementor-element.elementor-element-0b60117{--display:flex;}.elementor-10 .elementor-element.elementor-element-a97a247{--display:flex;}.elementor-10 .elementor-element.elementor-element-fbc4c92{text-align:center;}.elementor-10 .elementor-element.elementor-element-eeb2f77{--display:flex;}.elementor-10 .elementor-element.elementor-element-a23a9f2{--display:flex;}.elementor-10 .elementor-element.elementor-element-c677793{text-align:center;}.elementor-10 .elementor-element.elementor-element-910cae0{--display:flex;}.elementor-10 .elementor-element.elementor-element-1854b79{--display:flex;}.elementor-10 .elementor-element.elementor-element-cfce15c{text-align:center;}.elementor-10 .elementor-element.elementor-element-fa350e1{--display:flex;}.elementor-10 .elementor-element.elementor-element-21a2d82{--display:flex;}.elementor-10 .elementor-element.elementor-element-807bec2{--display:flex;}.elementor-10 .elementor-element.elementor-element-3a3a3ba{--display:flex;}@media(max-width:1024px){.elementor-10 .elementor-element.elementor-element-f42ed7f{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-10 .elementor-element.elementor-element-f42ed7f{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for shortcode, class: .elementor-element-3b2a356 *//* ================================
   MAMA555 ARTICLES - BLUE STYLE
================================ */

.mama555-articles-v3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    width: 100%;
}

/* การ์ดบทความ */
.mama555-card-v3 {
    background: #ffffff;
    border: 1px solid #d9ecff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 123, 255, 0.08);
    transition: all 0.3s ease;
}

/* Hover */
.mama555-card-v3:hover {
    transform: translateY(-5px);
    border-color: #2196f3;
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.18);
}

/* รูปบทความ */
.mama555-thumb-v3 {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eaf6ff;
}

.mama555-thumb-v3 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.mama555-card-v3:hover .mama555-thumb-v3 img {
    transform: scale(1.06);
}

/* เนื้อหา */
.mama555-info-v3 {
    padding: 20px;
}

/* วันที่ */
.mama555-date-v3 {
    color: #2196f3;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

/* หัวข้อ */
.mama555-title-v3 {
    margin: 0 0 10px;
    font-size: 20px;
    line-height: 1.5;
}

.mama555-title-v3 a {
    color: #123b5d;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mama555-title-v3 a:hover {
    color: #008cff;
}

/* เนื้อหาย่อ */
.mama555-excerpt-v3 {
    color: #607d8b;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 16px;
}

/* ปุ่มอ่านต่อ */
.mama555-read-v3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 17px;
    background: linear-gradient(135deg, #008cff, #0066cc);
    color: #ffffff !important;
    border-radius: 7px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.mama555-read-v3:hover {
    background: linear-gradient(135deg, #0066cc, #004c99);
    transform: translateX(3px);
    color: #ffffff !important;
}

/* เส้นด้านบนการ์ด */
.mama555-card-v3 {
    position: relative;
}

.mama555-card-v3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        #00aaff,
        #0066ff,
        #00c6ff
    );
    z-index: 2;
}


/* ================================
   TABLET
================================ */

@media (max-width: 991px) {

    .mama555-articles-v3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

}


/* ================================
   MOBILE
================================ */

@media (max-width: 600px) {

    .mama555-articles-v3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mama555-info-v3 {
        padding: 16px;
    }

    .mama555-title-v3 {
        font-size: 18px;
    }

    .mama555-excerpt-v3 {
        font-size: 14px;
    }

}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-0edf3c2 *//* =====================================
   MAMA555 COMMENT SYSTEM
===================================== */

.mama555-comment-box {
    width: 100%;
    margin: 35px auto;
    padding: 25px;
    background: #ffffff;
    border: 1px solid #dceeff;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 123, 255, 0.08);
}


/* HEADER */

.mama555-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 2px solid #e6f3ff;
}

.mama555-comment-header h2 {
    margin: 0;
    color: #123b5d;
    font-size: 24px;
    font-weight: 700;
}

.mama555-comment-header span {
    color: #2196f3;
    font-size: 14px;
    font-weight: 600;
}


/* COMMENT */

.mama555-comment {
    display: flex;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid #edf5fb;
}

.mama555-comment-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.mama555-comment-content {
    flex: 1;
}

.mama555-comment-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}

.mama555-comment-top strong {
    color: #123b5d;
    font-size: 16px;
}

.mama555-comment-top span {
    color: #9aa9b5;
    font-size: 12px;
}

.mama555-comment-text {
    color: #526b7a;
    font-size: 15px;
    line-height: 1.7;
}


/* NO COMMENT */

.mama555-no-comment {
    padding: 25px;
    text-align: center;
    color: #78909c;
    background: #f7fbff;
    border-radius: 10px;
}


/* FORM */

.mama555-comment-form {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 2px solid #e6f3ff;
}

.mama555-comment-form h3 {
    margin: 0 0 20px;
    color: #123b5d;
    font-size: 21px;
}


/* FIELD */

.mama555-field {
    margin-bottom: 16px;
}

.mama555-field label {
    display: block;
    margin-bottom: 7px;
    color: #31566f;
    font-size: 14px;
    font-weight: 600;
}

.mama555-field input,
.mama555-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #cfe6f8;
    border-radius: 8px;
    background: #fbfdff;
    color: #333;
    font-size: 15px;
    outline: none;
    transition: all .25s ease;
}

.mama555-field input:focus,
.mama555-field textarea:focus {
    border-color: #2196f3;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, .10);
}

.mama555-field textarea {
    min-height: 130px;
    resize: vertical;
}


/* NAME + EMAIL */

.comment-form-author,
.comment-form-email {
    width: calc(50% - 8px);
    display: inline-block;
    vertical-align: top;
}

.comment-form-author {
    margin-right: 12px;
}


/* SUBMIT */

.mama555-submit {
    border: none !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
    background: linear-gradient(
        135deg,
        #00aaff,
        #0066cc
    ) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all .3s ease;
}

.mama555-submit:hover {
    transform: translateY(-2px);
    background: linear-gradient(
        135deg,
        #0088dd,
        #004c99
    ) !important;
    box-shadow: 0 6px 15px rgba(0, 102, 204, .25);
}


/* MOBILE */

@media (max-width: 600px) {

    .mama555-comment-box {
        padding: 18px;
    }

    .mama555-comment-header h2 {
        font-size: 20px;
    }

    .mama555-comment {
        gap: 10px;
    }

    .mama555-comment-avatar img {
        width: 40px;
        height: 40px;
    }

    .mama555-comment-top {
        display: block;
    }

    .mama555-comment-top span {
        display: block;
        margin-top: 3px;
    }

    .comment-form-author,
    .comment-form-email {
        width: 100%;
        margin-right: 0;
    }

}/* End custom CSS */