@extends('layouts.front-master')
@section('content')
    <main class="css-i6bazn" style="min-height: 100px">
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-152vl0h">

            <div class="MuiBox-root css-1qlurlt">
                <div class="panel-container show mb-5">
                    <div class="panel-content mb-2">
                        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                            {{-- <ol class="carousel-indicators">
                            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                        </ol> --}}
                            <div class="carousel-inner">
                                @foreach ($slides as $key => $slide)
                                    <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                        <img class="d-block w-100 " src="{{ asset($slide->image) ?? 'no_image.png' }}"
                                            data-src="holder.js/800x400?auto=yes&bg=5a636d&fg=7f8995&text=First slide"
                                            alt="First slide">
                                        {{-- <div class="carousel-caption d-none d-md-block">
                                    <h5>First slide label</h5>
                                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                                </div> --}}
                                    </div>
                                @endforeach
                            </div>
                            <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
                                data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
                                data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-rycext">

            <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-2wx3ud">
                <div class="MuiBox-root">

                    <h3 class="MuiTypography-root MuiTypography-h3 css-9n03pa" data-testid="home-story-title"
                        style="opacity: 1; transform: none;"><span class="css-1rreq7x">{{ __('message.open-your-account')  }}</span>
                        <style data-emotion="css 1rreq7x">
                            .css-1rreq7x {
                                background: linear-gradient(180deg, transparent 80%, #5DF591 50% 90%, rgba(0, 0, 0, 0) 90%);
                            }
                        </style> <br>
                        {{ __('message.save now and invest for your future')  }}
                    </h3>
                </div>


                <div class="MuiBox-root css-1c30oiq">

                    <h5 class="MuiTypography-root MuiTypography-h5 css-j97px5" data-testid="home-story-subtitle"
                        style="line-height:1.5;opacity: 1; transform: none; margin-top: 40px;">
                        {{ __('message.no-bank branch visit necessary')  }}
                    </h5>
                </div>
                <div class="MuiBox-root css-2yt759">
                    <p class="MuiTypography-root MuiTypography-body1 css-c1znai" data-testid="home-story-desc"
                        style="opacity: 1; transform: none;">ดาวน์โหลดแอปพลิเคชัน CPALL! จาก App Store
                        หรือ Play
                        Store แล้วเปิดบัญชีลงทุนได้เลย</p>
                </div>

                <div class="css-1cd1i9r">
                    <a href="https://line.me/R/ti/p/@fns.eu?oat_content=url" id="button-app-store-ios-home">
                        <div class="MuiBox-root css-wwelcj" style="opacity: 1; transform: none;">
                            <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('banner-app-store.webp') }}" /></span><img alt="dime-banner-app-store"
                                    src="{{ asset('banner-app-store.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%" /><img
                                    alt="dime-banner-app-store" srcSet="/banner-app-store.webp" src="/banner-app-store.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%" /></span>
                        </div>
                    </a>
                    <a href="https://line.me/R/ti/p/@fns.eu?oat_content=url" id="button-app-store-android-home">
                        <div class="MuiBox-root css-wwelcj" style="opacity: 1; transform: none;">
                            <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('banner-play-store.webp') }}" /></span>
                                <img alt="" src="{{ asset('banner-play-store.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%" /><img
                                    alt="" srcSet="" src="{{ asset('images/banner-play-store.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%" /></span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-1ewkffg">
            <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-dmw2ly">
                <div class="MuiBox-root css-ccslr6" style="display: flex !important">
                    <div class="MuiBox-root css-0">
                        <div class="saving-product MuiBox-root css-1xg1oyx" style="opacity: 1; transform: none;">
                            <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="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM2IiBoZWlnaHQ9IjMzNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=" /></span><img
                                    alt="บัญชีออมทรัพย์ดอกเบี้ยสูง CPALL! Save"
                                    src="{{ asset('images/investment-product-saving.png') }}" 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%" />
                                <img alt="บัญชีออมทรัพย์ดอกเบี้ยสูง CPALL! Save" srcSet=""
                                    src="{{ asset('images/investment-product-saving.png') }}" 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%" /></span>
                        </div>
                        <div class="MuiBox-root css-y50vlu"></div>
                        <div class="saving-product MuiBox-root css-1bn0048">
                            <div class="MuiBox-root css-c7eftt">
                                <style data-emotion="css ridrp8">
                                    .css-ridrp8.stock-product {
                                        color: #FFFFFF;
                                    }
                                </style>
                                <h5 class="MuiTypography-root MuiTypography-h5 saving-product css-bpvz3"
                                    data-testid="home-product-saving-title">เงินฝากออมทรัพย์ดอกเบี้ยสูง CPALL! Save
                                </h5>
                            </div>
                            <div class="MuiBox-root css-rt8617">
                                <p class="MuiTypography-root MuiTypography-body1 saving-product css-75a343"
                                    data-testid="home-product-saving-desc">ออมเงินกับบัญชีเงินฝากออมทรัพย์ CPALL!
                                    Save ฝากง่าย จ่ายคล่อง
                                    รับดอกเบี้ยสูงสุด 3% ต่อปี จากธนาคารเกียรตินาคินภัทร</p>
                            </div>
                            <a href="/save-money">
                                <img class="saving-product css-e8trh" src="{{ asset('images/rounded-enter-icon.svg') }}"
                                    alt="icon-quote" />
                            </a>
                        </div>
                    </div>
                    <div class="MuiBox-root css-0">
                        <div class="fund-product MuiBox-root css-1xg1oyx" style="opacity: 1; transform: none;"><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="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM2IiBoZWlnaHQ9IjMzNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=" /></span><img
                                    alt="กองทุนรวม"
                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                    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%" /><img
                                    alt="กองทุนรวม" srcSet="/images/investment-product-fund.png"
                                    src="/images/investment-product-fund.png" 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%" /></span>
                        </div>
                        <div class="MuiBox-root css-y50vlu"></div>
                        <div class="fund-product MuiBox-root css-1bn0048">
                            <div class="MuiBox-root css-c7eftt">
                                <h5 class="MuiTypography-root MuiTypography-h5 fund-product css-bpvz3"
                                    data-testid="home-product-fund-title">กองทุนรวม</h5>
                            </div>
                            <div class="MuiBox-root css-rt8617">
                                <p class="MuiTypography-root MuiTypography-body1 fund-product css-75a343"
                                    data-testid="home-product-fund-desc">
                                <div class="fund-product MuiBox-root css-smitfb"></div>ลงทุนในกองทุนรวมได้มากกว่า
                                1,700 กองทุน จาก 20
                                บลจ. ตอบโจทย์ทุกเป้าหมายการลงทุน พร้อมรับเงินค่าขายคืนไวกว่าใคร</p>
                            </div>
                            <a href="/invest/fund">
                                <img class="fund-product css-e8trh" src="{{ asset('images/rounded-enter-icon.svg') }}"
                                    alt="icon-quote" />
                            </a>
                        </div>
                    </div>
                    <div class="MuiBox-root css-0">
                        <div class="stock-product MuiBox-root css-1xg1oyx" style="opacity: 1; transform: none;">
                            <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="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzM2IiBoZWlnaHQ9IjMzNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=" /></span><img
                                    alt="หุ้นต่างประเทศ"
                                    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                    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%" /><img
                                    alt="หุ้นต่างประเทศ" srcSet="/investment-product-stock.webp"
                                    src="/investment-product-stock.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%" /></span>
                        </div>
                        <div class="MuiBox-root css-y50vlu"></div>
                        <div class="stock-product MuiBox-root css-1bn0048">
                            <div class="MuiBox-root css-c7eftt">
                                <h5 class="MuiTypography-root MuiTypography-h5 stock-product css-bpvz3"
                                    data-testid="home-product-stock-title">หุ้นต่างประเทศ</h5>
                            </div>
                            <div class="MuiBox-root css-rt8617">
                                <p class="MuiTypography-root MuiTypography-body1 stock-product css-75a343"
                                    data-testid="home-product-stock-desc">
                                <div class="stock-product MuiBox-root css-smitfb"></div>ลงทุนในหุ้นสหรัฐอเมริกา
                                เริ่มต้นที่ 50 บาท
                                ฟรีค่าคอมมิชชันสำหรับรายการซื้อขายแรกของเดือน ไม่เสียค่าธรรมเนียมแลกเงินหรือโอนเงิน
                                ไม่มีค่าธรรมเนียมยื่นแบบภาษี W-8BEN</p>
                            </div>
                            <a href="/invest/stock">
                                <img class="stock-product css-e8trh" src="{{ asset('images/rounded-enter-icon.svg') }}"
                                    alt="icon-quote" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-6948dy">
            <div class="MuiContainer-root MuiContainer-maxWidthLg css-1lsil8c">
                <div class="MuiBox-root css-1kgotci">

                    <p class="MuiTypography-root MuiTypography-body1 css-1wdjozx" data-testid="home-feature-headline">
                        <style data-emotion="css 1tyfenn">
                            .css-1tyfenn {
                                font-size: 16px;
                                line-height: 1.625;
                                font-weight: bold;
                                font-family: Poppins, Noto Sans Thai, sans-serif;
                                color: #5DF591;
                            }

                            @media (min-width:768px) {
                                .css-1tyfenn {
                                    font-size: 18px;
                                    line-height: 1.667;
                                }
                            }
                        </style><span class="css-1tyfenn">แอปพลิเคชัน CPALL!</span> ได้รวบรวมผลิตภัณฑ์ บริการ
                        ความรู้ ข้อมูล
                        และเครื่องมือการเงินการลงทุนไว้ครบ จบในที่เดียว ให้ทุกคนเข้าถึงได้ง่าย
                        เสียค่าใช้จ่ายน้อยที่สุด
                        และตอบโจทย์ไลฟ์สไตล์ในยุคดิจิทัล
                    </p>
                </div>
                <div class="MuiBox-root css-zfthzs">
                    <!--  <img src="/home-feature-right-icon.webp" alt="Rocket icon"
                                                                                                                                                                                                                    style="opacity: 1; transform: none;" class="css-mrpnef" />
                                                                                                                                                                                                                <img src="/home-feature-left-icon.webp" alt="Double book icon"
                                                                                                                                                                                                                    style="opacity: 1; transform: none;" class="css-1d2d9w4" /> -->
                    <div class="MuiBox-root css-ezx0qy">

                        <h3 class="MuiTypography-root MuiTypography-h3 css-1fc6d14" data-testid="home-feature-title">
                            ออมเงิน<span class="MuiTypography-root MuiTypography-h3 css-6t59qi">.</span></h3>
                    </div>
                    <div class="MuiBox-root css-1nfizxu">
                        <p class="MuiTypography-root MuiTypography-body2 css-17bgzv" data-testid="home-feature-desc">
                            ต่อยอดเงินให้งอกเงย ด้วยบัญชีออมทรัพย์ดอกเบี้ยสูง CPALL! Save จากธนาคารเกียรตินาคินภัทร
                        </p>
                    </div>
                    <div class="MuiBox-root css-ezx0qy">
                        <h3 class="MuiTypography-root MuiTypography-h3 css-1fc6d14" data-testid="home-feature-title-2">
                            ลงทุน<span class="MuiTypography-root MuiTypography-h3 css-6t59qi">.</span></h3>
                    </div>
                    <div class="MuiBox-root css-1nfizxu">
                        <p class="MuiTypography-root MuiTypography-body2 css-17bgzv" data-testid="home-feature-desc-2">
                            เทรดหุ้นต่างประเทศ ลงทุนในกองทุนรวม เพิ่มโอกาสรับผลตอบแทนง่าย แค่ปลายนิ้ว</p>
                    </div>
                    <div class="MuiBox-root css-ezx0qy">
                        <h3 class="MuiTypography-root MuiTypography-h3 css-1fc6d14" data-testid="home-feature-title-3">
                            เรียนรู้<span class="MuiTypography-root MuiTypography-h3 css-6t59qi">.</span></h3>
                    </div>
                    <div class="MuiBox-root css-1nfizxu">
                        <p class="MuiTypography-root MuiTypography-body2 css-17bgzv" data-testid="home-feature-desc-3">
                            อัปเดตข้อมูลข่าวสารการเงินการลงทุนก่อนใคร ผ่านคอนเทนต์ที่ CPALL! จัดให้คุณ</p>
                    </div>
                    <div class="MuiBox-root css-ezx0qy">
                        <h3 class="MuiTypography-root MuiTypography-h3 css-1fc6d14" data-testid="home-feature-title-4">
                            จัดการ<span class="MuiTypography-root MuiTypography-h3 css-6t59qi">.</span></h3>
                    </div>
                    <div class="MuiBox-root css-1nfizxu">
                        <p class="MuiTypography-root MuiTypography-body2 css-17bgzv" data-testid="home-feature-desc-4">
                            จัดการการเงิน บริหารการลงทุน ด้วยเครื่องมือสุดล้ำบนแอปพลิเคชัน CPALL!</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-rycext">
            <div class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed css-1xrj2ek">
                <div class="MuiBox-root css-163t08v">
                    <style data-emotion="css 10ib5jr">
                        .css-10ib5jr {
                            margin-bottom: 40px;
                        }
                    </style>
                    <style data-emotion="css 1y11ixe">
                        .css-1y11ixe {
                            margin-bottom: 40px;
                        }
                    </style>
                    <div class="MuiBox-root css-1y11ixe">
                        <h3 class="MuiTypography-root MuiTypography-h3 css-9n03pa" data-testid="home-knowledge-headline">
                            การลงทุนในความรู้<span class="css-1rreq7x">ให้กำไรดีที่สุด</span></h3>
                    </div>

                    <div class="MuiBox-root css-853lrt">
                        <p class="MuiTypography-root MuiTypography-body1 css-c1znai"
                            data-testid="home-knowledge-sub-headline">
                            จุดเริ่มต้นของการบริหารการเงินการลงทุนที่ดี คือ
                            ความรู้ทางการเงินการลงทุนที่ครบถ้วนถูกต้องและทันสมัย
                            CPALL!
                            จึงให้ความสำคัญกับการสร้างและเผยแพร่ความรู้และข้อมูลการเงินการลงทุนให้กับลูกค้าทุกคน
                            ผ่านฟีเจอร์ต่าง ๆ ของแอปพลิเคชัน CPALL!</p>
                    </div>


                    <div class="MuiMasonry-root main css-163t08v">
                        <div class="MuiBox-root ">
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1jkx15r">
                                <div class="MuiCardContent-root css-11w1e1v">
                                    <h3 class="MuiTypography-root MuiTypography-h5 css-o8xdls bold"
                                        data-testid="home-knowledge-article-title" style="opacity: 1; transform: none;">
                                        <strong>{{ __('message.article')  }}</strong></h3>
                                    <ul class="MuiList-root MuiList-padding css-199phte">
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w"
                                                data-testid="home-knowledge-article-desc"
                                                style="opacity: 1; transform: none;">{{ __('message.article-body')  }}</p>
                                        </li>
                                    </ul>
                                    <div class="MuiBox-root css-1a2hzbp" style="opacity: 1; transform: none;"><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/home-article-icon.webp') }}"></span><img
                                                alt="icon-article" src="{{ asset('images/home-article-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%"
                                                srcset="{{ asset('images/home-article-icon.webp') }}"><noscript><img
                                                    alt="icon-article"
                                                    srcSet="{{ asset('images/home-article-icon.webp') }}"
                                                    src="{{ asset('images/home-article-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>
                            </div>
                        </div>
                        <div class="MuiBox-root css-0">
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1p8ubwn">
                                <div class="MuiCardContent-root css-11w1e1v">
                                    <h3 class="MuiTypography-root MuiTypography-h5 css-o8xdls"
                                        data-testid="home-knowledge-fund-data-title" style="opacity: 1; transform: none;">
                                        <strong>{{ __('message.world-renowned investors portfolios')  }}</strong></h3>
                                    <ul class="MuiList-root MuiList-padding css-199phte">
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w"
                                                data-testid="home-knowledge-fund-data-desc"
                                                style="opacity: 1; transform: none;">{{ __('message.world-renowned investors portfolios-body')  }}</p>
                                        </li>
                                    </ul>
                                    <div class="MuiBox-root css-1aoy00l" style="opacity: 1; transform: none;"><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/home-fund-icon.webp') }}"></span><img
                                                alt="icon-fund-data" src="{{ asset('images/home-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%"
                                                srcset="{{ asset('images/home-fund-icon.webp') }}">
                                            <noscript><img alt="icon-fund-data"
                                                    srcSet="{{ asset('images/home-fund-icon.webp') }}"
                                                    src="{{ asset('images/home-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>
                            </div>
                        </div>
                        <div class="MuiBox-root css-0">
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-1jkx15r">
                                <div class="MuiCardContent-root css-11w1e1v">
                                    <h3 class="MuiTypography-root MuiTypography-h5 css-o8xdls"
                                        data-testid="home-knowledge-stock-data-title"
                                        style="opacity: 1; transform: none;"><strong>{{ __('message.securities information')  }}</strong>
                                        </h3>
                                    <ul class="MuiList-root MuiList-padding css-199phte">
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w"
                                                data-testid="home-knowledge-stock-data-desc"
                                                style="opacity: 1; transform: none;">{{ __('message.securities information-body')  }}</p>
                                        </li>
                                    </ul>
                                    <div class="MuiBox-root css-hdi1q5" style="opacity: 1; transform: none;"><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/home-stock-icon.webp') }}"></span>
                                            <img alt="icon-stock-data" src="{{ asset('images/home-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%"
                                                srcset="{{ asset('images/home-stock-icon.webp') }}">
                                            <noscript>
                                                <img alt="icon-stock-data"
                                                    srcSet="{{ asset('images/home-stock-icon.webp') }}"
                                                    src="{{ asset('images/home-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>
                                </div>
                            </div>
                        </div>
                        <div class="MuiBox-root css-0">
                            <div
                                class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root css-h7ewq1">
                                <div class="MuiCardContent-root css-11w1e1v">
                                    <h3 class="MuiTypography-root MuiTypography-h5 css-o8xdls"
                                        data-testid="home-knowledge-dictionary-title"
                                        style="opacity: 1; transform: none;">
                                        <strong>Dime! Dictionary</strong></h3>
                                    <ul class="MuiList-root MuiList-padding css-199phte">
                                        <li class="MuiListItem-root MuiListItem-gutters MuiListItem-padding css-1cwykng">
                                            <p class="MuiTypography-root MuiTypography-body1 css-1tmli6w"
                                                data-testid="home-knowledge-dictionary-desc"
                                                style="opacity: 1; transform: none;">{{ __('message.dime-dictionary-body1')  }}
                                                <span><img src="{{ asset('images/info-icon.webp') }}" alt="" srcset=""></span>
                                            {{-- <div class="MuiBox-root css-0"
                                                style="display: inline-block; vertical-align: sub;">
                                                <span
                                                    style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"><span
                                                        style="box-sizing: border-box; display: block; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; max-width: 100%;"><img
                                                            alt="" aria-hidden="true"
                                                            src="{{ asset('images/info-icon.webp') }}"
                                                            style="display: block; max-width: 100%; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px;"></span><img
                                                        alt="info icon" src="{{ asset('images/info-icon.webp') }}"
                                                        decoding="async" data-nimg="intrinsic"
                                                        style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"
                                                        srcset="{{ asset('images/info-icon.webp') }}">
                                                </span>
                                            </div>  --}}
                                            {{ __('message.dime-dictionary-body2')  }}</p>
                                        </li>
                                    </ul>
                                    <div class="MuiBox-root css-lfkaf9" style="opacity: 1; transform: none;"><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/home-dict-icon.webp') }}"></span><img
                                                alt="icon-dictionary" src="{{ asset('images/home-dict-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%"
                                                srcset="{{ asset('images/home-dict-icon.webp') }}">
                                            <noscript>
                                                <img alt="icon-dictionary"
                                                    srcSet="{{ asset('images/home-dict-icon.webp') }}"
                                                    src="{{ asset('images/home-dict-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>
                            </div>
                        </div><span data-class="line-break"
                            style="flex-basis: 100%; width: 0px; margin: 0px; padding: 0px; order: 1;"></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 css-1yf8s27">
            <div class="MuiContainer-root MuiContainer-maxWidthLg css-1lsil8c">
                <div class="MuiBox-root css-rnguwo">
                    <div class="MuiBox-root css-0"></div>
                    <div class="MuiBox-root css-bptnxr" style="opacity: 1; transform: none;"><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/show_model.gif') }}" /></span><img alt="manage animation"
                                src="{{ asset('images/show_model.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%" /><img
                                alt="manage animation" srcSet="{{ asset('images/show_model.gif') }}"
                                src="{{ asset('images/show_model.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%" /></span>
                    </div>
                    <div class="MuiBox-root css-0"></div>
                    <div class="MuiBox-root css-13fhkq8">
                        <h3 class="MuiTypography-root MuiTypography-h3 css-9n03pa" data-testid="home-asset-tracker-title"
                            style="opacity: 1; transform: none;">มากกว่าการลงทุน คือ <span
                                class="MuiTypography-root MuiTypography-h3 css-6t59qi">การจัดการการลงทุน</span>
                        </h3>
                        <div class="MuiBox-root css-muesss"></div>
                        <p class="MuiTypography-root MuiTypography-body1 css-o6u0hi" data-testid="home-asset-tracker-desc"
                            style="opacity: 1; transform: none;">

                            <span class="MuiTypography-root MuiTypography-subtitle1 css-1b4yfmm">แอปพลิเคชัน
                                CPALL!</span>
                            ช่วยให้คุณบริหารจัดการชีวิตการเงินการลงทุนของคุณได้ง่ายขึ้น
                            ด้วยฟีเจอร์เครื่องมือสุดล้ำไม่เหมือนใคร
                            อย่างเครื่องมือบันทึกสินทรัพย์ Asset Tracker หรือลองทำแบบทดสอบเพื่อค้นหาตัวละคร CPALL!
                            ของคุณ
                            รับคำแนะนำการลงทุนเพื่อคุณโดยเฉพาะ
                        </p>
                        <div class="MuiBox-root css-muesss"></div><a aria-label="Manage page"
                            style="text-decoration:none" href="/manage">
                            <button
                                class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  css-123pepk"
                                tabindex="0" type="button" style="opacity: 1; transform: none;">
                                <h6 class="MuiTypography-root MuiTypography-h6 css-q06a2j"
                                    data-testid="home-asset-tracker-button">
                                    ดูเพิ่มเติม</h6>
                            </button>
                        </a>
                        <div class="MuiBox-root css-19ismxc"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="MuiContainer-root MuiContainer-maxWidthLg css-7pjp03">
            <div class="MuiBox-root css-m9qmdp">
                <h3 class="MuiTypography-root MuiTypography-h3 css-9n03pa" data-testid="home-trust-headline"
                    style="transform:translate3d(0,50px,0)"><span class="css-1rreq7x">ปลอดภัย</span>
                    ไร้กังวล</h3>
            </div>

            <div class="MuiBox-root css-4j9w0w">
                <p class="MuiTypography-root MuiTypography-body1 css-c1znai" data-testid="home-trust-desc"
                    style="transform:translate3d(0,50px,0)">บริษัทหลักทรัพย์ เคเคพี ไดม์ (KKP CPALL)
                    ผู้ให้บริการแอปพลิเคชัน CPALL! ได้รับใบอนุญาตประกอบธุรกิจหลักทรัพย์จากสำนักงาน ก.ล.ต.

                    บัญชีออมทรัพย์ CPALL! Save ให้บริการโดยธนาคารเกียรตินาคินภัทร ได้รับความคุ้มครองภายใต้ พ.ร.บ.
                    สถาบันคุ้มครองเงินฝากในวงเงิน 1 ล้านบาท ต่อ 1 รายผู้ฝากเงิน ต่อ 1 สถาบันการเงิน

                    หลักทรัพย์และเงินลงทุนสกุลดอลลาร์สหรัฐมีผู้รับฝากทรัพย์สิน (Custodian Bank) ช่วยดูแลและเก็บรักษา
                    และได้รับการคุ้มครองโดย SIPC
                    องค์กรไม่แสวงหาผลกำไรของสหรัฐอเมริกาซึ่งมีหน้าที่คุ้มครองหลักทรัพย์และเงินลงทุนของผู้ลงทุนในบริษัทหลักทรัพย์ที่เป็นสมาชิกของ
                    SIPC วงเงินสูงสุด 500,000 ดอลลาร์สหรัฐต่อนักลงทุนหนึ่งราย</p>
            </div>

            <div class="css-1ddr2v5">
                <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/kkp-logo.webp') }}" /></span><img
                        alt="kkp-logo" src="{{ asset('images/kkp-logo.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%" /><img
                        alt="kkp-logo" srcSet="{{ asset('images/kkp-logo.webp') }}"
                        src="{{ asset('images/kkp-logo.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%" /></span>
                {{-- <style data-emotion="css 42igfv">
                .css-42igfv {
                    margin: auto;
                }
            </style> --}}
                <div class="MuiBox-root css-42igfv"><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/logo.png') }}" /></span><img
                            alt="dime-logo" src="{{ asset('images/logo.png') }}" 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%" /><img
                            alt="dime-logo" srcSet="{{ asset('images/logo.png') }}"
                            src="{{ asset('images/logo.png') }}" 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%" /></span>
                </div>
            </div>
        </div>
    </main>
    <style>
        .css-6o0j8s {
            width: 100%;
            display: flex;
            flex-flow: column wrap;
            align-content: space-between;
            box-sizing: border-box;
        }

        .css-h9po7m {
            margin: -8px;
            height: 692px;
        }

        @media (min-width: 0px) {
            .css-h9po7m {
                margin: -8px;
                height: 692px;
            }
        }

        .css-h9po7m {
            width: 100%;
            display: flex;
            flex-flow: column wrap;
            box-sizing: border-box;
            justify-content: flex-start;
            align-items: flex-end
        }

        .css-1vb4tyu {
            margin: -8px;
            height: 880px;
        }

        @media (min-width: 0px) {
            .css-1vb4tyu {
                margin: -8px;
                height: 880px;
            }
        }

        @media (min-width: 360px) {

            /* .css-1vb4tyu {
                                                        margin: -8px;
                                                        height: 880px;
                                                    } */
            .css-h9po7m {
                width: 100%;
                display: flex;
                flex-flow: column wrap;
                box-sizing: border-box;
                align-items: flex-end;
                flex-direction: row-reverse;
                align-content: space-between;
            }

            .css-1wju2v1 {
                width: 100%;
                display: flex;
                flex-flow: column wrap;
                align-content: space-between;
                box-sizing: border-box;
            }
        }

        .css-11w1e1v:last-child {
            padding-bottom: 24px;
            margin-bottom: 10px;
        }


        @media (min-width: 1200px) {
            css-1jkx15r {
                width: 424px;
                margin-left: auto;
                padding: 24px;
            }
        }

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

        @media (min-width: 768px) {
            .css-1jkx15r {
                border-radius: 20px;
            }
        }
    </style>
@endsection