<head>
    <link href="https://kit-pro.fontawesome.com/releases/v6.4.0/css/pro.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
    <script src="Cruz.js"></script>

    <link rel="stylesheet" href="Custom.css" type="text/css">
    <script src="https://code.iconify.design/iconify-icon/1.0.0-beta.3/iconify-icon.min.js"></script>
    
</head>

<body>
    <div class="full-screen">
        
        <div class="shop-container" id="Main">
            <div class="headertext">
                <div class="dotall">
                    <div class="dot1"><i class="fa-solid fa-square"></i></div>
                    <div class="dot2"><i class="fa-solid fa-square"></i></div>
                    <div class="dot3"><i class="fa-solid fa-square"></i></div>
                </div>
                <div class="close"><i class="fa-sharp fa-solid fa-x"></i></div>
                <div class="headertitle">
                    <i class="fa-solid fa-square"></i><div id="Shopname"></div><i class="fa-solid fa-square"></i>
                </div>
                <div class="info"><div class="linearleft"></div>CHOOSE  <span> PRODUCT </span> TO SHOPPING CART<div class="linearright"></div></div>
            </div>
            <div class="HeaderMenu">
                <div class="header">
                    <div class="Category" id="category">
                        <div id="Listcategory">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="All-Page">
                <div class="Item-Page">
                    <div class="product_box">
                    </div>
                </div>
                <div class="Cart-Page">
                    <div class="Menu-Cart">
    
                        <div class="title"> <i class="fad fa-shopping-cart"></i> Shopping Cart </div>
                        <div class="clear"><i class="fa-solid fa-trash-can"></i></div>
    
                    </div>
                    <div class="cart-body"></div>
                    <div class="Cart-Bottom">
                        <div class="textall">
                            <div>All Price</div>
                            <div><i class="fad fa-cash-register"></i> <span class="total_price" data-totalPrice="0">0$</span></div>
                        </div>

                        <button class="button-buy">ยืนยัน</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="popup-container" id="popup">
            <div class="headerpopup"><span class="textheaderpop"><i class="fad fa-cash-register"></i> ต้องการชำระเงินด้วย</span></div>
            <div class="popup">
                
            </div>
        </div>
    </div>

    <audio id="Click">
        <source src="./Sound/click.mp3" type="audio/mp3">
    </audio>

    <audio id="Open">
        <source src="./Sound/open.mp3" type="audio/mp3">
    </audio>

    <script src="nui://game/ui/jquery.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="Function.js" type="text/javascript"></script>
    <script>
        $('.btn').on('click', function(){
            $('.btn').removeClass('selected');
            $(this).addClass('selected');
        });
    </script>
</body>