<html lang="en">
<script type="text/javascript"
    src="chrome-extension://ffljdddodmkedhkcjhpmdajhjdbkogke/js/datalayer-checker.js"></script>

<head>
    <meta charset="UTF-8" />
    <title>Not Found</title>
    <meta name="keywords" content="Not Found" />
    <meta name="description" content="Not Found" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <style>
        /* Font-face declarations */
        @font-face {
            font-family: 'Segoe UI';
            src: url('./fonts/segoe-ui/segoe-ui.ttf') format('truetype');
            font-weight: 400;
        }

        @font-face {
            font-family: 'Segoe UI';
            src: url('./fonts/segoe-ui/segoe-ui-semibold.ttf') format('truetype');
            font-weight: 600;
        }

        @font-face {
            font-family: 'Segoe UI';
            src: url('./fonts/segoe-ui/segoe-ui-bold.ttf') format('truetype');
            font-weight: 700;
        }

        @font-face {
            font-family: 'Perpetua';
            src: url('./fonts/perpetua/perpetua.ttf') format('truetype');
        }
    </style>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', sans-serif;
            font-weight: 400;
            color: #3B3A3C;
            line-height: normal;
        }

        main {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100dvh;
        }

        h1,
        h2,
        p {
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        ol,
        ul {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 16px;
        }

        .wrapper {
            display: flex;
            flex-direction: column;
            gap: 40px;
            position: relative;

        }

        .wrapper>svg {
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            width: 75%;
            max-width: 410px;
            height: auto;
            z-index: -1;
        }

        .wrapper>img {
            position: absolute;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: auto;
            z-index: -2;
        }

        .contents {
            display: flex;
            flex-direction: column;
            gap: 40px;
            align-items: center;
            text-align: center;
        }

        .contents_detail>h1 {
            font-size: 48px;
            font-family: 'Perpetua', serif;
            font-weight: 700px;
            color: #EA0D00;
        }

        .contents_detail>p {
            font-size: 18px;
            margin-top: 12px;
        }

        .contents_detail>h1>span {
            display: block;
        }

        .contents_support {
            display: flex;
            flex-direction: column;
            padding: 24px 80px;
            align-items: center;
            text-align: center;
            border-radius: 12px;
            background: #FFEFE9;
        }

        .contents_support>h2 {
            font-size: 18px;
            font-weight: 600;
        }

        .contents_support>a {
            font-size: 24px;
            font-weight: 700;
            color: #C91F26;
            margin-top: 16px;
        }

        .contents_support>p {
            font-size: 14px;
            margin-top: 8px;
        }

        .contents_button {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 226px;
            height: 48px;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 700;
            line-height: 21px;
            text-transform: uppercase;
            color: #FFF;
            background-color: #C91F26;
            position: relative;
            border: 1px solid #C91F26;
            z-index: 1;
            transition-property: all;
        }

        .contents_button::after {
            background-color: #C91F26;
        }

        .contents_button::before {
            background-color: #FFF;
        }

        .contents_button:hover {
            color: #C91F26;
            background-color: #FFF;
        }

        .button-effect::before,
        .button-effect::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        .button-effect::after {
            z-index: -1;
        }

        .button-effect::before {
            z-index: -2;
        }

        .button-mimas {
            overflow: hidden;
        }

        .button-mimas::after {
            content: '';
            width: 130%;
            left: -15%;
            transform: skew(30deg);
            transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
        }

        .button-mimas:hover::after {
            transform: translate3d(100%, 0, 0);
        }

        @media screen and (min-width: 1280px) {
            main {
                background-image: url('https://d21l9vkgwnizti.cloudfront.net/uploads/bg-404-1744593983.jpg');
                background-size: contain;
                background-position: bottom;
                background-repeat: no-repeat;
            }

            .wrapper {
                background-image: none;
            }

            .wrapper>svg {
                width: 90%;
                max-width: 410px;
                top: -155px;
            }

            .wrapper>img {
                display: none;
            }

            .container {
                padding: 0;
            }

            .contents_detail>h1 {
                font-size: 56px;
            }

            .contents_detail>h1>span {
                display: inline-block;
            }

            .contents_support {
                width: 365px;
            }
        }
    </style>
    <script>
        // Function to get cookie value by name
        function getCookie(name) {
            const value = `; ${document.cookie}`
            const parts = value.split(`; ${name}=`)
            if (parts.length === 2) return parts.pop().split(';').shift()
            return ''
        }

        // Function to update the homepage link with language and location from cookies
        async function updateHomepageLink() {
            const lang = getCookie('__language') || 'en'
            const location = getCookie('__location') || 'gx'
            const phoneNumber = getCookie('__phone_number')

            const homepageButton = document.getElementById('homepage-button')
            if (homepageButton) {
                let href = '/'

                // If we have both lang and location
                if (lang && location) {
                    href = `/${lang}-${location}`
                }

                homepageButton.setAttribute('href', href)
            }

            const phoneLink = document.getElementById('phone-number')
            if (phoneLink) {

                if (phoneNumber) {
                    // Decode the phone number if it's URL encoded
                    const decodedPhoneNumber = decodeURIComponent(phoneNumber)
                    phoneLink.setAttribute('href', `tel:${decodedPhoneNumber.replace(/ /g, '')}`)
                    phoneLink.setAttribute('title', decodedPhoneNumber)
                    phoneLink.textContent = decodedPhoneNumber
                }
            }
        }

        // Run when DOM is fully loaded
        document.addEventListener('DOMContentLoaded', updateHomepageLink);
    </script>
</head>

<body>
    <main>
        <div class="container">
            <div class="wrapper">
                <svg xmlns="http://www.w3.org/2000/svg" width="481" height="207" viewBox="0 0 481 207" fill="none">
                    <path
                        d="M127.468 3.34997L127.468 129.532L151.481 129.532L151.481 162.473L127.468 162.473L127.468 203.51L87.2589 203.51L87.2589 162.473L0 162.473L0 127.997C7.72532 119.343 15.7299 109.898 24.0136 99.6615C32.2974 89.3324 40.302 78.7242 48.0273 67.8368C55.7526 56.9494 62.9195 46.0155 69.5279 35.0351C76.2294 23.9616 81.907 13.3999 86.5608 3.34997L127.468 3.34997ZM39.5108 129.532L87.2589 129.532L87.2589 59.6015C84.0012 65.65 80.4643 71.7916 76.6482 78.0263C72.8321 84.1679 68.8298 90.263 64.6414 96.3115C60.4529 102.267 56.218 108.083 51.9365 113.759C47.655 119.343 43.5131 124.6 39.5108 129.532Z"
                        fill="#F3F3F3" />
                    <path
                        d="M240.136 207C192.481 207 168.654 173.547 168.654 106.641C168.654 71.9312 175.076 45.5037 187.921 27.3581C200.858 9.11935 219.567 0 244.046 0C290.584 0 313.853 34.0115 313.853 102.034C313.853 135.906 307.477 161.869 294.726 179.921C282.067 197.974 263.871 207 240.136 207ZM242.091 33.6392C223.01 33.6392 213.47 57.6008 213.47 105.524C213.47 150.655 222.824 173.221 241.533 173.221C259.775 173.221 268.897 149.958 268.897 103.43C268.897 56.9029 259.962 33.6392 242.091 33.6392Z"
                        fill="#F3F3F3" />
                    <path
                        d="M456.399 3.34997L456.399 129.532L480.412 129.532L480.412 162.473L456.399 162.473L456.399 203.51L416.19 203.51L416.19 162.473L328.931 162.473L328.931 127.997C336.656 119.343 344.661 109.898 352.945 99.6615C361.228 89.3324 369.233 78.7242 376.958 67.8368C384.684 56.9494 391.851 46.0155 398.459 35.0351C405.16 23.9616 410.838 13.3999 415.492 3.34997L456.399 3.34997ZM368.442 129.532L416.19 129.532L416.19 59.6015C412.932 65.65 409.395 71.7916 405.579 78.0263C401.763 84.1679 397.761 90.263 393.572 96.3115C389.384 102.267 385.149 108.083 380.868 113.759C376.586 119.343 372.444 124.6 368.442 129.532Z"
                        fill="#F3F3F3" />
                </svg>
                <img src="https://d21l9vkgwnizti.cloudfront.net/test_uploads/bg-404-mobile-1744680107.jpg" alt="404"
                    title="404" class="404" width="375" height="140" />
                <div class="contents">
                    <div class="contents_detail">
                        <h1>Oops! <span>Page Not Found</span></h1>
                        <p>The page you are looking for cannot be found.<br />
                            We are very sorry for the inconvenience.</p>
                    </div>
                    <div class="contents_support">
                        <h2>Need support?<br />
                            Please contact hotline:</h2>
                        <a id="phone-number" href="tel:+85237021796" title="+85237021796" target="_blank">+852 3702
                            1796</a>
                    </div>
                    <a id="homepage-button" class="contents_button button-effect button-mimas" href="/" title="Home"
                        target="_self">
                        BACK TO HOMEPAGE
                    </a>
                </div>
            </div>
        </div>
    </main>
</body>

</html>