@extends('layouts.front-master')
@section('content')
    <main>
        <style data-emotion="css 5cqqik">
            .css-5cqqik {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                width: 100%;
                box-sizing: border-box;
                -webkit-flex-shrink: 0;
                -ms-flex-negative: 0;
                flex-shrink: 0;
                position: -webkit-sticky;
                position: sticky;
                z-index: 1100;
                top: 0;
                left: auto;
                right: 0;
                background-color: #f5f5f5;
                color: rgba(0, 0, 0, 0.87);
                background-image: none;
                background-color: #FFFFFF;
                box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
            }
        </style>
        <style data-emotion="css fu1e4i">
            .css-fu1e4i {
                background-color: #FFFFFF;
                color: rgba(0, 0, 0, 0.87);
                -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                width: 100%;
                box-sizing: border-box;
                -webkit-flex-shrink: 0;
                -ms-flex-negative: 0;
                flex-shrink: 0;
                position: -webkit-sticky;
                position: sticky;
                z-index: 1100;
                top: 0;
                left: auto;
                right: 0;
                background-color: #f5f5f5;
                color: rgba(0, 0, 0, 0.87);
                background-image: none;
                background-color: #FFFFFF;
                box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
            }
        </style>
        <style data-emotion="css 8pm8n8">
            .css-8pm8n8 {
                width: 100%;
                margin-left: auto;
                box-sizing: border-box;
                margin-right: auto;
                display: block;
                padding-left: 16px;
                padding-right: 16px;
                padding-left: 24px;
                padding-right: 24px;
            }

            @media (min-width:428px) {
                .css-8pm8n8 {
                    padding-left: 24px;
                    padding-right: 24px;
                }
            }

            @media (min-width:1200px) {
                .css-8pm8n8 {
                    max-width: 1200px;
                }
            }

            @media (min-width:768px) {
                .css-8pm8n8 {
                    padding-left: 40px;
                    padding-right: 40px;
                }
            }

            @media (min-width:1200px) {
                .css-8pm8n8 {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }
        </style>
        <div class="MuiContainer-root MuiContainer-maxWidthLg css-8pm8n8">
            <style data-emotion="css 8el2c7">
                .css-8el2c7 {
                    margin-top: 80px;
                    text-align: center;
                }
            </style>
            <style data-emotion="css 1jk42bk">
                .css-1jk42bk {
                    margin-top: 80px;
                    text-align: center;
                }
            </style>
            <div class="MuiBox-root css-1jk42bk">
                <style data-emotion="css 1q7gyzr">
                    .css-1q7gyzr {
                        margin: 0;
                        font-size: 30px;
                        line-height: 1.333;
                        font-weight: bold;
                        font-family: Poppins, Noto Sans Thai, sans-serif;
                    }

                    @media (min-width:768px) {
                        .css-1q7gyzr {
                            font-size: 40px;
                            line-height: 1.2;
                        }
                    }
                </style>
                <h3 class="MuiTypography-root MuiTypography-h3 css-1q7gyzr" data-testid="invest-headline">
                    <style data-emotion="css 1rreq7x">
                        .css-1rreq7x {
                            background: linear-gradient(180deg, transparent 50%, #5DF591 50% 90%, rgba(0, 0, 0, 0) 90%);
                        }
                    </style><span class="css-1rreq7x">Investments Made Easy</span> at<br />TESLA THAILAND!
                </h3>
            </div>
            <style data-emotion="css 158tgzx">
                .css-158tgzx {
                    margin-top: 40px;
                    margin-bottom: 68px;
                    text-align: center;
                }

                @media (min-width:768px) {
                    .css-158tgzx {
                        margin-bottom: 80px;
                    }
                }
            </style>
            <style data-emotion="css 1x7wa3d">
                .css-1x7wa3d {
                    margin-top: 40px;
                    margin-bottom: 68px;
                    text-align: center;
                }

                @media (min-width:768px) {
                    .css-1x7wa3d {
                        margin-bottom: 80px;
                    }
                }
            </style>
            <div class="MuiBox-root css-1x7wa3d">
                <style data-emotion="css a92i68">
                    .css-a92i68 {
                        margin-bottom: 12px;
                    }

                    @media (min-width:768px) {
                        .css-a92i68 {
                            margin-bottom: 0;
                            margin-right: 24px;
                        }
                    }

                    .css-a92i68:hover {
                        background: #111111;
                        color: #FFFFFF;
                    }
                </style>
                <style data-emotion="css enbso0">
                    .css-enbso0 {
                        text-transform: none;
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 1.714;
                        font-family: Poppins, Noto Sans Thai, sans-serif;
                        min-height: auto;
                        -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                        border-radius: 24px;
                        padding: 0 16px;
                        min-width: 48px;
                        width: auto;
                        height: 48px;
                        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                        color: rgba(0, 0, 0, 0.87);
                        background-color: #e0e0e0;
                        color: #FFFFFF;
                        background-color: #1E7BFE;
                        padding-left: 8px;
                        padding-right: 16px;
                        background-color: #ffffff;
                        border-style: solid;
                        border-width: 1px;
                        border-color: #111111;
                        box-shadow: none;
                        color: #111111;
                        margin-bottom: 12px;
                    }

                    .css-enbso0:active {
                        box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
                    }

                    .css-enbso0:hover {
                        background-color: #f5f5f5;
                        -webkit-text-decoration: none;
                        text-decoration: none;
                    }

                    @media (hover: none) {
                        .css-enbso0:hover {
                            background-color: #e0e0e0;
                        }
                    }

                    .css-enbso0.Mui-focusVisible {
                        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                    }

                    .css-enbso0.Mui-disabled {
                        color: rgba(0, 0, 0, 0.26);
                        box-shadow: none;
                        background-color: rgba(0, 0, 0, 0.12);
                    }

                    .css-enbso0:hover {
                        background-color: rgb(21, 86, 177);
                    }

                    @media (hover: none) {
                        .css-enbso0:hover {
                            background-color: #1E7BFE;
                        }
                    }

                    .css-enbso0:hover {
                        background-color: #ffffff;
                    }

                    @media (min-width:768px) {
                        .css-enbso0 {
                            margin-bottom: 0;
                            margin-right: 24px;
                        }
                    }

                    .css-enbso0:hover {
                        background: #111111;
                        color: #FFFFFF;
                    }
                </style>
                <style data-emotion="css fmg0w6">
                    .css-fmg0w6 {
                        display: -webkit-inline-box;
                        display: -webkit-inline-flex;
                        display: -ms-inline-flexbox;
                        display: inline-flex;
                        -webkit-align-items: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        -webkit-justify-content: center;
                        justify-content: center;
                        position: relative;
                        box-sizing: border-box;
                        -webkit-tap-highlight-color: transparent;
                        background-color: transparent;
                        outline: 0;
                        border: 0;
                        margin: 0;
                        border-radius: 0;
                        padding: 0;
                        cursor: pointer;
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                        vertical-align: middle;
                        -moz-appearance: none;
                        -webkit-appearance: none;
                        -webkit-text-decoration: none;
                        text-decoration: none;
                        color: inherit;
                        text-transform: none;
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 1.714;
                        font-family: Poppins, Noto Sans Thai, sans-serif;
                        min-height: auto;
                        -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                        border-radius: 24px;
                        padding: 0 16px;
                        min-width: 48px;
                        width: auto;
                        height: 48px;
                        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                        color: rgba(0, 0, 0, 0.87);
                        background-color: #e0e0e0;
                        color: #FFFFFF;
                        background-color: #1E7BFE;
                        padding-left: 8px;
                        padding-right: 16px;
                        background-color: #ffffff;
                        border-style: solid;
                        border-width: 1px;
                        border-color: #111111;
                        box-shadow: none;
                        color: #111111;
                        margin-bottom: 12px;
                    }

                    .css-fmg0w6::-moz-focus-inner {
                        border-style: none;
                    }

                    .css-fmg0w6.Mui-disabled {
                        pointer-events: none;
                        cursor: default;
                    }

                    @media print {
                        .css-fmg0w6 {
                            -webkit-print-color-adjust: exact;
                            color-adjust: exact;
                        }
                    }

                    .css-fmg0w6:active {
                        box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
                    }

                    .css-fmg0w6:hover {
                        background-color: #f5f5f5;
                        -webkit-text-decoration: none;
                        text-decoration: none;
                    }

                    @media (hover: none) {
                        .css-fmg0w6:hover {
                            background-color: #e0e0e0;
                        }
                    }

                    .css-fmg0w6.Mui-focusVisible {
                        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                    }

                    .css-fmg0w6.Mui-disabled {
                        color: rgba(0, 0, 0, 0.26);
                        box-shadow: none;
                        background-color: rgba(0, 0, 0, 0.12);
                    }

                    .css-fmg0w6:hover {
                        background-color: rgb(21, 86, 177);
                    }

                    @media (hover: none) {
                        .css-fmg0w6:hover {
                            background-color: #1E7BFE;
                        }
                    }

                    .css-fmg0w6:hover {
                        background-color: #ffffff;
                    }

                    @media (min-width:768px) {
                        .css-fmg0w6 {
                            margin-bottom: 0;
                            margin-right: 24px;
                        }
                    }

                    .css-fmg0w6:hover {
                        background: #111111;
                        color: #FFFFFF;
                    }
                </style>
                <a class="MuiButtonBase-root MuiFab-root MuiFab-extended MuiFab-sizeLarge MuiFab-secondary css-fmg0w6 "
                    tabindex="0" href="{{ route('investment') }}">
                    <style data-emotion="css 1fw3xt3">
                        .css-1fw3xt3 {
                            width: 32px;
                            height: 32px;
                            margin-right: 8px;
                            margin: auto;
                        }

                        @media (min-width:768px) {
                            .css-1fw3xt3 {
                                margin-right: 16px;
                            }
                        }
                    </style>
                    <style data-emotion="css 63860r">
                        .css-63860r {
                            width: 32px;
                            height: 32px;
                            margin-right: 8px;
                            margin: auto;
                        }

                        @media (min-width:768px) {
                            .css-63860r {
                                margin-right: 16px;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-63860r"><span
                            style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span
                                style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%">
                                <img style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"
                                    alt="" aria-hidden="true" src="{{ asset('images/stock-icon.webp') }}" /></span>
                            <img alt="stock-icon" src="{{ asset('images/stock-icon.webp') }}" decoding="async"
                                data-nimg="intrinsic"
                                style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" /><noscript><img
                                    alt="stock-icon" srcSet="{{ asset('images/stock-icon.webp') }}"
                                    src="{{ asset('images/stock-icon.webp') }}" decoding="async" data-nimg="intrinsic"
                                    style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
                                    loading="lazy" /></noscript></span>
                    </div>
                    <style data-emotion="css 1r4zjy4">
                        .css-1r4zjy4 {
                            margin-left: 8px;
                        }

                        @media (min-width:768px) {
                            .css-1r4zjy4 {
                                margin-left: 0px;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-l34jet">
                        <style>
                            .css-l34jet {
                                margin-left: 8px;
                            }

                            @media (min-width:768px) {
                                .css-l34jet {
                                    margin-left: 0px;
                                }
                            }

                            .css-1056duf {
                                width: 110px;
                                text-align: center;
                            }

                            .css-1nufrzo {
                                margin: 0;
                                font-size: 13px;
                                line-height: 1.692;
                                font-weight: 600;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                width: 110px;
                                text-align: center;
                            }

                            @media (min-width:428px) {
                                .css-1nufrzo {
                                    font-size: 14px;
                                    line-height: 1.714;
                                }
                            }
                        </style>
                        <h6 class="MuiTypography-root MuiTypography-subtitle2 css-1nufrzo" data-testid="button-stock">US
                            Stocks</h6>
                    </div>
                </a>
                <style data-emotion="css 6tiyn5">
                    .css-6tiyn5 {
                        display: block;
                    }

                    @media (min-width:768px) {
                        .css-6tiyn5 {
                            display: none;
                        }
                    }
                </style><br class="css-6tiyn5" />
                <style data-emotion="css kxcxo3">
                    .css-kxcxo3:hover {
                        background: #111111;
                        color: #FFFFFF;
                    }
                </style>
                <style data-emotion="css 13awkfh">
                    .css-13awkfh {
                        text-transform: none;
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 1.714;
                        font-family: Poppins, Noto Sans Thai, sans-serif;
                        min-height: auto;
                        -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                        border-radius: 24px;
                        padding: 0 16px;
                        min-width: 48px;
                        width: auto;
                        height: 48px;
                        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                        color: rgba(0, 0, 0, 0.87);
                        background-color: #e0e0e0;
                        color: #111111;
                        background-color: #5DF591;
                        padding-left: 8px;
                        padding-right: 16px;
                        background-color: #111111;
                        box-shadow: none;
                        color: #ffffff;
                    }

                    .css-13awkfh:active {
                        box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
                    }

                    .css-13awkfh:hover {
                        background-color: #f5f5f5;
                        -webkit-text-decoration: none;
                        text-decoration: none;
                    }

                    @media (hover: none) {
                        .css-13awkfh:hover {
                            background-color: #e0e0e0;
                        }
                    }

                    .css-13awkfh.Mui-focusVisible {
                        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                    }

                    .css-13awkfh.Mui-disabled {
                        color: rgba(0, 0, 0, 0.26);
                        box-shadow: none;
                        background-color: rgba(0, 0, 0, 0.12);
                    }

                    .css-13awkfh:hover {
                        background-color: rgb(65, 171, 101);
                    }

                    @media (hover: none) {
                        .css-13awkfh:hover {
                            background-color: #5DF591;
                        }
                    }

                    .css-13awkfh:hover {
                        background-color: #111111;
                    }

                    .css-13awkfh:hover {
                        background: #111111;
                        color: #FFFFFF;
                    }
                </style>
                <style data-emotion="css zdlrht">
                    .css-zdlrht {
                        display: -webkit-inline-box;
                        display: -webkit-inline-flex;
                        display: -ms-inline-flexbox;
                        display: inline-flex;
                        -webkit-align-items: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        align-items: center;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        -webkit-justify-content: center;
                        justify-content: center;
                        position: relative;
                        box-sizing: border-box;
                        -webkit-tap-highlight-color: transparent;
                        background-color: transparent;
                        outline: 0;
                        border: 0;
                        margin: 0;
                        border-radius: 0;
                        padding: 0;
                        cursor: pointer;
                        -webkit-user-select: none;
                        -moz-user-select: none;
                        -ms-user-select: none;
                        user-select: none;
                        vertical-align: middle;
                        -moz-appearance: none;
                        -webkit-appearance: none;
                        -webkit-text-decoration: none;
                        text-decoration: none;
                        color: inherit;
                        text-transform: none;
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 1.714;
                        font-family: Poppins, Noto Sans Thai, sans-serif;
                        min-height: auto;
                        -webkit-transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                        border-radius: 24px;
                        padding: 0 16px;
                        min-width: 48px;
                        width: auto;
                        height: 48px;
                        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                        color: rgba(0, 0, 0, 0.87);
                        background-color: #e0e0e0;
                        color: #111111;
                        background-color: #5DF591;
                        padding-left: 8px;
                        padding-right: 16px;
                        background-color: #111111;
                        box-shadow: none;
                        color: #ffffff;
                    }

                    .css-zdlrht::-moz-focus-inner {
                        border-style: none;
                    }

                    .css-zdlrht.Mui-disabled {
                        pointer-events: none;
                        cursor: default;
                    }

                    @media print {
                        .css-zdlrht {
                            -webkit-print-color-adjust: exact;
                            color-adjust: exact;
                        }
                    }

                    .css-zdlrht:active {
                        box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
                    }

                    .css-zdlrht:hover {
                        background-color: #f5f5f5;
                        -webkit-text-decoration: none;
                        text-decoration: none;
                    }

                    @media (hover: none) {
                        .css-zdlrht:hover {
                            background-color: #e0e0e0;
                        }
                    }

                    .css-zdlrht.Mui-focusVisible {
                        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
                    }

                    .css-zdlrht.Mui-disabled {
                        color: rgba(0, 0, 0, 0.26);
                        box-shadow: none;
                        background-color: rgba(0, 0, 0, 0.12);
                    }

                    .css-zdlrht:hover {
                        background-color: rgb(65, 171, 101);
                    }

                    @media (hover: none) {
                        .css-zdlrht:hover {
                            background-color: #5DF591;
                        }
                    }

                    .css-zdlrht:hover {
                        background-color: #111111;
                    }

                    .css-zdlrht:hover {
                        background: #111111;
                        color: #FFFFFF;
                    }
                </style>
                <a class="MuiButtonBase-root MuiFab-root MuiFab-extended MuiFab-sizeLarge MuiFab-primary css-zdlrht"
                    tabindex="0" href="{{ route('fund') }}">
                    <div class="MuiBox-root css-63860r"><span
                            style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span
                                style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img
                                    style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"
                                    alt="" aria-hidden="true"
                                    src="{{ asset('images/fund-icon.webp') }}" /></span><img alt="fund-icon"
                                src="{{ asset('images/fund-icon.webp') }}" decoding="async" data-nimg="intrinsic"
                                style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" /><noscript><img
                                    alt="fund-icon" srcSet="{{ asset('images/fund-icon.webp') }}"
                                    src="{{ asset('images/fund-icon.webp') }}" decoding="async" data-nimg="intrinsic"
                                    style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
                                    loading="lazy" /></noscript></span>
                    </div>
                    <div class="MuiBox-root css-l34jet">
                        <h6 class="MuiTypography-root MuiTypography-subtitle2 css-1nufrzo" data-testid="button-fund">
                            Mutual Funds</h6>
                    </div>
                </a>
            </div>
        </div>
        <style data-emotion="css ngfm3y">
            .css-ngfm3y {
                background-color: #00040E;
                -webkit-background-size: cover;
                background-size: cover;
                background-repeat: no-repeat;
                -webkit-background-position: center;
                background-position: center;
                background-image: url("/fund-bg-xs.webp");
                height: 240px;
            }

            @media (min-width:768px) {
                .css-ngfm3y {
                    background-image: url("/fund-bg-md.webp");
                    height: 280px;
                }
            }

            @media (min-width:1200px) {
                .css-ngfm3y {
                    background-image: url("/fund-bg-lg.webp");
                }
            }

            @media (min-width:1536px) {
                .css-ngfm3y {
                    background-image: url("/fund-bg-xl.webp");
                }
            }
        </style>
        <style data-emotion="css pu0qiv">
            .css-pu0qiv {
                background-color: #00040E;
                -webkit-background-size: cover;
                background-size: cover;
                background-repeat: no-repeat;
                -webkit-background-position: center;
                background-position: center;
                background-image: url("/fund-bg-xs.webp");
                height: 240px;
            }

            @media (min-width:768px) {
                .css-pu0qiv {
                    background-image: url("/fund-bg-md.webp");
                    height: 280px;
                }
            }

            @media (min-width:1200px) {
                .css-pu0qiv {
                    background-image: url("/fund-bg-lg.webp");
                }
            }

            @media (min-width:1536px) {
                .css-pu0qiv {
                    background-image: url("/fund-bg-xl.webp");
                }
            }
        </style>
        <div class="MuiBox-root css-pu0qiv"></div>
        <style data-emotion="css 1dt8d30">
            .css-1dt8d30 {
                margin-top: 40px;
            }

            @media (min-width:768px) {
                .css-1dt8d30 {
                    margin-top: 80px;
                }
            }
        </style>
        <style data-emotion="css i5weh5">
            .css-i5weh5 {
                width: 100%;
                margin-left: auto;
                box-sizing: border-box;
                margin-right: auto;
                display: block;
                padding-left: 16px;
                padding-right: 16px;
                padding-left: 24px;
                padding-right: 24px;
                margin-top: 40px;
            }

            @media (min-width:428px) {
                .css-i5weh5 {
                    padding-left: 24px;
                    padding-right: 24px;
                }
            }

            @media (min-width:1200px) {
                .css-i5weh5 {
                    max-width: 1200px;
                }
            }

            @media (min-width:768px) {
                .css-i5weh5 {
                    padding-left: 40px;
                    padding-right: 40px;
                }
            }

            @media (min-width:1200px) {
                .css-i5weh5 {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }

            @media (min-width:768px) {
                .css-i5weh5 {
                    margin-top: 80px;
                }
            }
        </style>
        <div class="MuiContainer-root MuiContainer-maxWidthLg css-i5weh5">
            <style data-emotion="css swhs1s">
                .css-swhs1s {
                    margin: 0;
                    font-size: 40px;
                    line-height: 1.1;
                    font-weight: bold;
                    font-family: Poppins, Noto Sans Thai, sans-serif;
                    color: #1E7BFE;
                    text-align: center;
                }

                @media (min-width:768px) {
                    .css-swhs1s {
                        font-size: 72px;
                        line-height: 1;
                    }
                }
            </style>
            <h2 class="MuiTypography-root MuiTypography-h2 css-swhs1s" data-testid="fund-headline">Mutual Funds</h2>
            <style data-emotion="css 1b7daxv">
                .css-1b7daxv {
                    margin: 32px 0px 0px 0px;
                    text-align: center;
                }

                @media (min-width:1200px) {
                    .css-1b7daxv {
                        margin: 48px 240px;
                    }
                }
            </style>
            <style data-emotion="css 1utogu1">
                .css-1utogu1 {
                    margin: 0;
                    font-size: 14px;
                    line-height: 1.714;
                    font-weight: 400;
                    font-family: Poppins, Noto Sans Thai, sans-serif;
                    color: #898989;
                    margin: 32px 0px 0px 0px;
                    text-align: center;
                }

                @media (min-width:768px) {
                    .css-1utogu1 {
                        font-size: 16px;
                        line-height: 1.75;
                    }
                }

                @media (min-width:1200px) {
                    .css-1utogu1 {
                        margin: 48px 240px;
                    }
                }
            </style>
            <p class="MuiTypography-root MuiTypography-body1 css-1utogu1" data-testid="fund-sub-headline">Achieve your
                investment goals with more than 1,700 mutual funds from 20 asset management companies.</p>
        </div>
        <style data-emotion="css 8pm8n8">
            .css-8pm8n8 {
                width: 100%;
                margin-left: auto;
                box-sizing: border-box;
                margin-right: auto;
                display: block;
                padding-left: 16px;
                padding-right: 16px;
                padding-left: 24px;
                padding-right: 24px;
            }

            @media (min-width:428px) {
                .css-8pm8n8 {
                    padding-left: 24px;
                    padding-right: 24px;
                }
            }

            @media (min-width:1200px) {
                .css-8pm8n8 {
                    max-width: 1200px;
                }
            }

            @media (min-width:768px) {
                .css-8pm8n8 {
                    padding-left: 40px;
                    padding-right: 40px;
                }
            }

            @media (min-width:1200px) {
                .css-8pm8n8 {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }
        </style>
        <div class="MuiContainer-root MuiContainer-maxWidthLg css-8pm8n8">
            <style data-emotion="css 4ti29g">
                .css-4ti29g {
                    display: grid;
                    padding-bottom: 56px;
                    text-align: center;
                }

                @media (min-width:1200px) {
                    .css-4ti29g {
                        grid-template-columns: 1fr 1fr;
                        gap: 40px;
                        padding: 0px;
                        text-align: left;
                    }
                }
            </style>

            <style data-emotion="css 97gdid">
                .css-97gdid {
                    display: grid;
                    padding-bottom: 56px;
                    text-align: center;
                }

                @media (min-width:1200px) {
                    .css-97gdid {
                        grid-template-columns: 1fr 1fr;
                        gap: 40px;
                        padding: 0px;
                        text-align: left;
                    }
                }
            </style>
            <div class="MuiBox-root css-97gdid">
                <style data-emotion="css dhcfph">
                    .css-dhcfph {
                        position: relative;
                        margin: auto;
                        padding: 0px 16px;
                    }
                </style>
                <style data-emotion="css b92mrp">
                    .css-b92mrp {
                        position: relative;
                        margin: auto;
                        padding: 0px 16px;
                    }
                </style>
                <div class="MuiBox-root css-b92mrp">
                    <style data-emotion="css bej6eo">
                        .css-bej6eo {
                            position: absolute;
                            margin-right: 16px;
                        }
                    </style>
                    <style data-emotion="css 1yico7t">
                        .css-1yico7t {
                            position: absolute;
                            margin-right: 16px;
                        }
                    </style>
                    <div class="MuiBox-root css-1yico7t"><span
                            style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span
                                style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img
                                    style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"
                                    alt="" aria-hidden="true" src="{{ asset('images/fund-1.gif') }}" />
                                </span>
                                <img
                                alt="animation background" src="{{ asset('images/fund-1.gif') }}" decoding="async"
                                data-nimg="intrinsic"
                                style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" />
                                <noscript>
                                    <img
                                    alt="animation background" srcSet="{{ asset('images/fund-1.gif') }}"
                                    src="{{ asset('images/fund-1.gif') }}" decoding="async" data-nimg="intrinsic"
                                    style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
                                    loading="lazy" />
                                </noscript>
                            </span>
                    </div>
                    <style data-emotion="css byfgqi">
                        .css-byfgqi {
                            width: 295px;
                            height: 524.5px;
                            margin: auto;
                        }

                        @media (min-width:768px) {
                            .css-byfgqi {
                                width: 350px;
                                height: 622px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-byfgqi {
                                width: 468px;
                                height: 832px;
                            }
                        }
                    </style>
                    <style data-emotion="css 1p41hm6">
                        .css-1p41hm6 {
                            width: 295px;
                            height: 524.5px;
                            margin: auto;
                        }

                        @media (min-width:768px) {
                            .css-1p41hm6 {
                                width: 350px;
                                height: 622px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-1p41hm6 {
                                width: 468px;
                                height: 832px;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-1p41hm6"></div>
                </div>
                <style data-emotion="css 10lrf1j">
                    .css-10lrf1j {
                        color: #898989;
                        margin: auto;
                    }

                    @media (min-width:768px) {
                        .css-10lrf1j {
                            padding-left: 16px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-10lrf1j {
                            padding-left: 72px;
                        }
                    }
                </style>
                <style data-emotion="css 1gptgbn">
                    .css-1gptgbn {
                        color: #898989;
                        margin: auto;
                    }

                    @media (min-width:768px) {
                        .css-1gptgbn {
                            padding-left: 16px;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-1gptgbn {
                            padding-left: 72px;
                        }
                    }
                </style>
                <div class="MuiBox-root css-1gptgbn">
                    <style data-emotion="css 1tmli6w">
                        .css-1tmli6w {
                            margin: 0;
                            font-size: 14px;
                            line-height: 1.714;
                            font-weight: 400;
                            font-family: Poppins, Noto Sans Thai, sans-serif;
                        }

                        @media (min-width:768px) {
                            .css-1tmli6w {
                                font-size: 16px;
                                line-height: 1.75;
                            }
                        }
                    </style><span class="MuiTypography-root MuiTypography-body1 css-1tmli6w"
                        data-testid="fund-advantage-description">
                        <style data-emotion="css 9gkufl">
                            .css-9gkufl {
                                color: #111111;
                            }
                        </style>
                        <style data-emotion="css 17xkqdb">
                            .css-17xkqdb {
                                margin: 0;
                                font-size: 30px;
                                line-height: 1.333;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                color: #111111;
                            }

                            @media (min-width:768px) {
                                .css-17xkqdb {
                                    font-size: 40px;
                                    line-height: 1.2;
                                }
                            }
                        </style>
                        <h3 class="MuiTypography-root MuiTypography-h3 css-17xkqdb"
                            data-testid="fund-advantage-description-headline">
                            <style data-emotion="css 1rreq7x">
                                .css-1rreq7x {
                                    background: linear-gradient(180deg, transparent 50%, #5DF591 50% 90%, rgba(0, 0, 0, 0) 90%);
                                }
                            </style><span class="css-1rreq7x">1,700 Mutual Funds</span><br /> from 20 AMCs
                        </h3>
                        <style data-emotion="css i3pbo">
                            .css-i3pbo {
                                margin-bottom: 24px;
                            }
                        </style>
                        <div class="MuiBox-root css-i3pbo"></div>Achieve your investment goals with more than 1,700 mutual
                        funds from 20 asset management companies at your fingertips - bond mutual funds, equity mutual
                        funds, foreign mutual funds, or tax-saving mutual funds.
                    </span>
                </div>
            </div>
        </div>
        <style data-emotion="css 1f0nce4">
            .css-1f0nce4 {
                padding: 0;
                margin-top: 24px;
            }

            @media (min-width:768px) {
                .css-1f0nce4 {
                    padding: 0;
                }
            }
        </style>
        <style data-emotion="css osz1fg">
            .css-osz1fg {
                width: 100%;
                margin-left: auto;
                box-sizing: border-box;
                margin-right: auto;
                display: block;
                padding-left: 16px;
                padding-right: 16px;
                padding-left: 24px;
                padding-right: 24px;
                padding: 0;
                margin-top: 24px;
            }

            @media (min-width:428px) {
                .css-osz1fg {
                    padding-left: 24px;
                    padding-right: 24px;
                }
            }

            @media (min-width:1200px) {
                .css-osz1fg {
                    max-width: 1200px;
                }
            }

            @media (min-width:768px) {
                .css-osz1fg {
                    padding-left: 40px;
                    padding-right: 40px;
                }
            }

            @media (min-width:1200px) {
                .css-osz1fg {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }

            @media (min-width:768px) {
                .css-osz1fg {
                    padding: 0;
                }
            }
        </style>
      
        
        <style data-emotion="css vz4s70">
            .css-vz4s70 {
                margin-top: 80px;
                padding: 16px;
                overflow: hidden;
                background-color: #FFFFFF;
                -webkit-background-size: cover;
                background-size: cover;
                background-repeat: no-repeat;
                -webkit-background-position: center;
                background-position: center;
            }

            @media (min-width:768px) {
                .css-vz4s70 {
                    padding-left: 120px;
                    padding-right: 120px;
                }
            }

            @media (min-width:1200px) {
                .css-vz4s70 {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }
        </style>
        <style data-emotion="css 1rpagzx">
            .css-1rpagzx {
                background-color: #111111;
                color: #fff;
                -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                box-shadow: none;
                background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
                margin-top: 80px;
                padding: 16px;
                overflow: hidden;
                background-color: #FFFFFF;
                -webkit-background-size: cover;
                background-size: cover;
                background-repeat: no-repeat;
                -webkit-background-position: center;
                background-position: center;
            }

            @media (min-width:768px) {
                .css-1rpagzx {
                    padding-left: 120px;
                    padding-right: 120px;
                }
            }

            @media (min-width:1200px) {
                .css-1rpagzx {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }
        </style>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-1rpagzx">
            <style data-emotion="css 1ydepa1">
                .css-1ydepa1 {
                    padding: 0;
                }

                @media (min-width:768px) {
                    .css-1ydepa1 {
                        padding: 0px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1ydepa1 {
                        padding: 0px 40px;
                    }
                }

                @media (min-width:1536px) {
                    .css-1ydepa1 {
                        padding: 0px 80px;
                    }
                }
            </style>
            <style data-emotion="css 1lsil8c">
                .css-1lsil8c {
                    width: 100%;
                    margin-left: auto;
                    box-sizing: border-box;
                    margin-right: auto;
                    display: block;
                    padding-left: 16px;
                    padding-right: 16px;
                    padding-left: 24px;
                    padding-right: 24px;
                    padding: 0;
                }

                @media (min-width:428px) {
                    .css-1lsil8c {
                        padding-left: 24px;
                        padding-right: 24px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1lsil8c {
                        max-width: 1200px;
                    }
                }

                @media (min-width:768px) {
                    .css-1lsil8c {
                        padding-left: 40px;
                        padding-right: 40px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1lsil8c {
                        padding-left: 80px;
                        padding-right: 80px;
                    }
                }

                @media (min-width:768px) {
                    .css-1lsil8c {
                        padding: 0px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1lsil8c {
                        padding: 0px 40px;
                    }
                }

                @media (min-width:1536px) {
                    .css-1lsil8c {
                        padding: 0px 80px;
                    }
                }
            </style>
            <div class="MuiContainer-root MuiContainer-maxWidthLg css-1lsil8c">
                <style data-emotion="css 1t3dt61">
                    .css-1t3dt61 {
                        display: grid;
                        grid-template-columns: 1fr;
                        padding-left: 16px;
                        padding-right: 16px;
                        margin: auto;
                        background-color: #111111;
                        border-radius: 40px;
                        width: 100%;
                        height: -webkit-fit-content;
                        height: -moz-fit-content;
                        height: fit-content;
                    }

                    @media (min-width:428px) {
                        .css-1t3dt61 {
                            padding-left: 40px;
                            padding-right: 40px;
                        }
                    }

                    @media (min-width:768px) {
                        .css-1t3dt61 {
                            width: 100%;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-1t3dt61 {
                            grid-template-columns: 0.5fr 5.5fr 4fr;
                            row-gap: 8px;
                            height: 90%;
                        }
                    }
                </style>
                <style data-emotion="css m19gur">
                    .css-m19gur {
                        display: grid;
                        grid-template-columns: 1fr;
                        padding-left: 16px;
                        padding-right: 16px;
                        margin: auto;
                        background-color: #111111;
                        border-radius: 40px;
                        width: 100%;
                        height: -webkit-fit-content;
                        height: -moz-fit-content;
                        height: fit-content;
                    }

                    @media (min-width:428px) {
                        .css-m19gur {
                            padding-left: 40px;
                            padding-right: 40px;
                        }
                    }

                    @media (min-width:768px) {
                        .css-m19gur {
                            width: 100%;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-m19gur {
                            grid-template-columns: 0.5fr 5.5fr 4fr;
                            row-gap: 8px;
                            height: 90%;
                        }
                    }
                </style>
                <div class="MuiBox-root css-m19gur">
                    <div class="MuiBox-root css-0"></div>
                    <style data-emotion="css imu5jw">
                        .css-imu5jw {
                            text-align: center;
                        }

                        @media (min-width:1200px) {
                            .css-imu5jw {
                                margin-top: 80px;
                                padding-right: 40px;
                                text-align: left;
                            }
                        }
                    </style>
                    <style data-emotion="css qwwtrg">
                        .css-qwwtrg {
                            text-align: center;
                        }

                        @media (min-width:1200px) {
                            .css-qwwtrg {
                                margin-top: 80px;
                                padding-right: 40px;
                                text-align: left;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-qwwtrg">
                        <style data-emotion="css 1yyqhcl">
                            .css-1yyqhcl {
                                margin: 0;
                                font-size: 24px;
                                line-height: 1.25;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                            }

                            @media (min-width:768px) {
                                .css-1yyqhcl {
                                    font-size: 30px;
                                    line-height: 1.267;
                                }
                            }
                        </style>
                        <h4 class="MuiTypography-root MuiTypography-h4 css-1yyqhcl" data-testid="fund-dime-fast-title">
                            TESLA THAILAND! Fast
                            <style data-emotion="css eo2cz2">
                                .css-eo2cz2 {
                                    margin: 0;
                                    font-size: 24px;
                                    line-height: 1.25;
                                    font-weight: bold;
                                    font-family: Poppins, Noto Sans Thai, sans-serif;
                                    color: #5DF591;
                                }

                                @media (min-width:768px) {
                                    .css-eo2cz2 {
                                        font-size: 30px;
                                        line-height: 1.267;
                                    }
                                }
                            </style><span class="MuiTypography-root MuiTypography-h4 css-eo2cz2">- Get Your Money
                                Faster</span>
                        </h4>
                        <style data-emotion="css y1gt6f">
                            .css-y1gt6f {
                                margin-top: 40px;
                            }
                        </style>
                        <style data-emotion="css muesss">
                            .css-muesss {
                                margin-top: 40px;
                            }
                        </style>
                        <div class="MuiBox-root css-muesss"></div>
                        <style data-emotion="css 1tmli6w">
                            .css-1tmli6w {
                                margin: 0;
                                font-size: 14px;
                                line-height: 1.714;
                                font-weight: 400;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                            }

                            @media (min-width:768px) {
                                .css-1tmli6w {
                                    font-size: 16px;
                                    line-height: 1.75;
                                }
                            }
                        </style><span class="MuiTypography-root MuiTypography-body1 css-1tmli6w"
                            data-testid="fund-dime-fast-description">Every minute counts when it comes to money. Our TESLA THAILAND!
                            Fast service will get your money from selling mutual funds back within 1 – 3* business days from
                            the maximum of 7 business days.<style data-emotion="css 178yklu">
                                .css-178yklu {
                                    margin-top: 24px;
                                }
                            </style>
                            <div class="MuiBox-root css-178yklu"></div>*Excluding the mutual funds that allot their units
                            after 2 business days.
                        </span>
                        <style data-emotion="css 1oll9to">
                            .css-1oll9to {
                                padding-bottom: 56px;
                            }

                            @media (min-width:768px) {
                                .css-1oll9to {
                                    padding-bottom: 80px;
                                }
                            }
                        </style>
                        <style data-emotion="css 1gonyzs">
                            .css-1gonyzs {
                                padding-bottom: 56px;
                            }

                            @media (min-width:768px) {
                                .css-1gonyzs {
                                    padding-bottom: 80px;
                                }
                            }
                        </style>
                        <div class="MuiBox-root css-1gonyzs"></div>
                    </div>
                    <style data-emotion="css mbc5d6">
                        .css-mbc5d6 {
                            grid-row-start: 1;
                            margin: auto;
                            width: 200px;
                            height: 200px;
                        }

                        @media (min-width:768px) {
                            .css-mbc5d6 {
                                width: 280px;
                                height: 280px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-mbc5d6 {
                                grid-column: 3;
                            }
                        }
                    </style>
                    <style data-emotion="css hkxops">
                        .css-hkxops {
                            grid-row-start: 1;
                            margin: auto;
                            width: 200px;
                            height: 200px;
                        }

                        @media (min-width:768px) {
                            .css-hkxops {
                                width: 280px;
                                height: 280px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-hkxops {
                                grid-column: 3;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-hkxops"><span
                            style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span
                                style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img
                                    style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"
                                    alt="" aria-hidden="true"
                                    src="{{ asset('images/invest-dime-fast.webp') }}" /></span><img alt="dime-fast-image"
                                src="{{ asset('images/invest-dime-fast.webp') }}" decoding="async" data-nimg="intrinsic"
                                style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" /><noscript><img
                                    alt="dime-fast-image" srcSet="{{ asset('images/invest-dime-fast.webp') }}"
                                    src="{{ asset('images/invest-dime-fast.webp') }}" decoding="async"
                                    data-nimg="intrinsic"
                                    style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
                                    loading="lazy" /></noscript></span>
                    </div>
                </div>
            </div>
        </div>
        <style data-emotion="css 1ikja1s">
            .css-1ikja1s {
                margin-top: 16px;
                padding: 16px;
                overflow: hidden;
                background-color: #FFFFFF;
                -webkit-background-size: cover;
                background-size: cover;
                background-repeat: no-repeat;
                -webkit-background-position: center;
                background-position: center;
            }

            @media (min-width:768px) {
                .css-1ikja1s {
                    padding-left: 120px;
                    padding-right: 120px;
                }
            }

            @media (min-width:1200px) {
                .css-1ikja1s {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }
        </style>
        <style data-emotion="css 1p7b022">
            .css-1p7b022 {
                background-color: #FFFFFF;
                color: rgba(0, 0, 0, 0.87);
                -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
                box-shadow: none;
                margin-top: 16px;
                padding: 16px;
                overflow: hidden;
                background-color: #FFFFFF;
                -webkit-background-size: cover;
                background-size: cover;
                background-repeat: no-repeat;
                -webkit-background-position: center;
                background-position: center;
            }

            @media (min-width:768px) {
                .css-1p7b022 {
                    padding-left: 120px;
                    padding-right: 120px;
                }
            }

            @media (min-width:1200px) {
                .css-1p7b022 {
                    padding-left: 80px;
                    padding-right: 80px;
                }
            }
        </style>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-1p7b022">
            <style data-emotion="css 1ydepa1">
                .css-1ydepa1 {
                    padding: 0;
                }

                @media (min-width:768px) {
                    .css-1ydepa1 {
                        padding: 0px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1ydepa1 {
                        padding: 0px 40px;
                    }
                }

                @media (min-width:1536px) {
                    .css-1ydepa1 {
                        padding: 0px 80px;
                    }
                }
            </style>
            <style data-emotion="css 1lsil8c">
                .css-1lsil8c {
                    width: 100%;
                    margin-left: auto;
                    box-sizing: border-box;
                    margin-right: auto;
                    display: block;
                    padding-left: 16px;
                    padding-right: 16px;
                    padding-left: 24px;
                    padding-right: 24px;
                    padding: 0;
                }

                @media (min-width:428px) {
                    .css-1lsil8c {
                        padding-left: 24px;
                        padding-right: 24px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1lsil8c {
                        max-width: 1200px;
                    }
                }

                @media (min-width:768px) {
                    .css-1lsil8c {
                        padding-left: 40px;
                        padding-right: 40px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1lsil8c {
                        padding-left: 80px;
                        padding-right: 80px;
                    }
                }

                @media (min-width:768px) {
                    .css-1lsil8c {
                        padding: 0px;
                    }
                }

                @media (min-width:1200px) {
                    .css-1lsil8c {
                        padding: 0px 40px;
                    }
                }

                @media (min-width:1536px) {
                    .css-1lsil8c {
                        padding: 0px 80px;
                    }
                }
            </style>
            <div class="MuiContainer-root MuiContainer-maxWidthLg css-1lsil8c">
                <style data-emotion="css 1nb7m99">
                    .css-1nb7m99 {
                        display: grid;
                        grid-template-columns: 1fr;
                        padding-left: 16px;
                        padding-right: 16px;
                        margin: auto;
                        border-radius: 40px;
                        width: 100%;
                        height: -webkit-fit-content;
                        height: -moz-fit-content;
                        height: fit-content;
                    }

                    @media (min-width:428px) {
                        .css-1nb7m99 {
                            padding-left: 40px;
                            padding-right: 40px;
                        }
                    }

                    @media (min-width:768px) {
                        .css-1nb7m99 {
                            width: 100%;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-1nb7m99 {
                            grid-template-columns: 5fr 0.5fr 4.5fr;
                            row-gap: 8px;
                            padding-left: 16px;
                            padding-right: 16px;
                            height: 90%;
                        }
                    }
                </style>
                <style data-emotion="css jdp3c3">
                    .css-jdp3c3 {
                        display: grid;
                        grid-template-columns: 1fr;
                        padding-left: 16px;
                        padding-right: 16px;
                        margin: auto;
                        border-radius: 40px;
                        width: 100%;
                        height: -webkit-fit-content;
                        height: -moz-fit-content;
                        height: fit-content;
                    }

                    @media (min-width:428px) {
                        .css-jdp3c3 {
                            padding-left: 40px;
                            padding-right: 40px;
                        }
                    }

                    @media (min-width:768px) {
                        .css-jdp3c3 {
                            width: 100%;
                        }
                    }

                    @media (min-width:1200px) {
                        .css-jdp3c3 {
                            grid-template-columns: 5fr 0.5fr 4.5fr;
                            row-gap: 8px;
                            padding-left: 16px;
                            padding-right: 16px;
                            height: 90%;
                        }
                    }
                </style>
                <div class="MuiBox-root css-jdp3c3">
                    <style data-emotion="css 1bnn9o1">
                        .css-1bnn9o1 {
                            margin: auto;
                            margin-top: 40px;
                            margin-bottom: 40px;
                            width: 200px;
                            height: 200px;
                        }

                        @media (min-width:768px) {
                            .css-1bnn9o1 {
                                width: 424px;
                                height: 424px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-1bnn9o1 {
                                width: 512px;
                                height: 512px;
                            }
                        }
                    </style>
                    <style data-emotion="css hzlowq">
                        .css-hzlowq {
                            margin: auto;
                            margin-top: 40px;
                            margin-bottom: 40px;
                            width: 200px;
                            height: 200px;
                        }

                        @media (min-width:768px) {
                            .css-hzlowq {
                                width: 424px;
                                height: 424px;
                            }
                        }

                        @media (min-width:1200px) {
                            .css-hzlowq {
                                width: 512px;
                                height: 512px;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-hzlowq"><span
                            style="box-sizing:border-box;display:inline-block;overflow:hidden;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;position:relative;max-width:100%"><span
                                style="box-sizing:border-box;display:block;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0;max-width:100%"><img
                                    style="display:block;max-width:100%;width:initial;height:initial;background:none;opacity:1;border:0;margin:0;padding:0"
                                    alt="" aria-hidden="true"
                                    src="{{ asset('images/dime-fund-competency.webp') }}" /></span><img
                                alt="dime-compentency-image" src="{{ asset('images/dime-fund-competency.webp') }}"
                                decoding="async" data-nimg="intrinsic"
                                style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%" /><noscript><img
                                    alt="dime-compentency-image" srcSet="{{ asset('images/dime-fund-competency.webp') }}"
                                    src="{{ asset('images/dime-fund-competency.webp') }}" decoding="async"
                                    data-nimg="intrinsic"
                                    style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
                                    loading="lazy" /></noscript></span>
                    </div>
                    <div class="MuiBox-root css-0"></div>
                    <style data-emotion="css earnqa">
                        .css-earnqa {
                            text-align: center;
                        }

                        @media (min-width:1200px) {
                            .css-earnqa {
                                margin-top: 180px;
                                padding-right: 20px;
                                text-align: left;
                            }
                        }
                    </style>
                    <style data-emotion="css 16d9qdx">
                        .css-16d9qdx {
                            text-align: center;
                        }

                        @media (min-width:1200px) {
                            .css-16d9qdx {
                                margin-top: 180px;
                                padding-right: 20px;
                                text-align: left;
                            }
                        }
                    </style>
                    <div class="MuiBox-root css-16d9qdx">
                        <style data-emotion="css 1q7gyzr">
                            .css-1q7gyzr {
                                margin: 0;
                                font-size: 30px;
                                line-height: 1.333;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                            }

                            @media (min-width:768px) {
                                .css-1q7gyzr {
                                    font-size: 40px;
                                    line-height: 1.2;
                                }
                            }
                        </style>
                        <h3 class="MuiTypography-root MuiTypography-h3 css-1q7gyzr" data-testid="fund-dime-pick-title">
                            Mutual Fund
                            <style data-emotion="css 1rreq7x">
                                .css-1rreq7x {
                                    background: linear-gradient(180deg, transparent 50%, #5DF591 50% 90%, rgba(0, 0, 0, 0) 90%);
                                }
                            </style><span class="css-1rreq7x">Recommendations</span>
                        </h3>
                        <style data-emotion="css y1gt6f">
                            .css-y1gt6f {
                                margin-top: 40px;
                            }
                        </style>
                        <style data-emotion="css muesss">
                            .css-muesss {
                                margin-top: 40px;
                            }
                        </style>
                        <div class="MuiBox-root css-muesss"></div>
                        <style data-emotion="css 13oi0x9">
                            .css-13oi0x9 {
                                margin: 0;
                                font-size: 14px;
                                line-height: 1.714;
                                font-weight: 400;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                color: #898989;
                            }

                            @media (min-width:768px) {
                                .css-13oi0x9 {
                                    font-size: 16px;
                                    line-height: 1.75;
                                }
                            }
                        </style>
                        <span class="MuiTypography-root MuiTypography-body1 css-13oi0x9"
                            data-testid="fund-dime-pick-description">Discover mutual funds from our carefully crafted
                            recommendations whether you fancy growth, love dividends, hate risks, or have any investment
                            theme in mind.</span>
                        <style data-emotion="css 1gonyzs">
                            .css-1oll9to {
                                padding-bottom: 56px;
                            }

                            @media (min-width:768px) {
                                .css-1oll9to {
                                    padding-bottom: 80px;
                                }
                            }

                            .css-1gonyzs {
                                padding-bottom: 56px;
                            }

                            @media (min-width:768px) {
                                .css-1gonyzs {
                                    padding-bottom: 80px;
                                }
                            }
                        </style>
                        <div class="MuiBox-root css-1gonyzs"></div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection