.elementor-24 .elementor-element.elementor-element-f4495a0{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-24 .elementor-element.elementor-element-b1fa5b5{--display:flex;}.elementor-24 .elementor-element.elementor-element-b1fa5b5:not(.elementor-motion-effects-element-type-background), .elementor-24 .elementor-element.elementor-element-b1fa5b5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-24 .elementor-element.elementor-element-b30ddd2 img{width:100%;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-d23fee0 */.sgx-main-content {
    font-family: Arial, sans-serif;
    padding: 0 20px 20px 20px;
    background-color: white;
}
.sgx-section-title {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
}
.sgx-price-section {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}


.sgx-left-data {
    width: 300px; 
    padding-right: 20px;
}
.sgx-current-price {
    font-size: 2.2em;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}
.sgx-change {
    color: #008000; 
    font-weight: bold;
    margin-bottom: 20px;
}

/* ตารางสถิติ */
.sgx-data-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9em;
}
.sgx-data-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}
.sgx-label {
    color: #666;
}
.sgx-value {
    font-weight: 500;
}



.sgx-chart-area {
    flex-grow: 1;
    min-width: 0; 
}
.sgx-chart-controls {
    display: flex;
    justify-content: flex-end; 
    gap: 1px;
    margin-bottom: 10px;
}
.sgx-chart-controls button {
    background-color: white;
    border: 1px solid #ccc;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.8em;
    font-weight: bold;
    color: #666;
    transition: all 0.2s;
    border-radius: 0; 
}
.sgx-chart-controls button.day-active {
    border-left: 1px solid #008000; 
    border-top: 1px solid #008000;
    border-bottom: 2px solid #008000;
    color: #333;
    font-weight: bold;
}

#myChart { 
    height: 300px !important; 
    max-height: 300px; 
    width: 100%;
    border-left: 1px solid #eee; 
    border-bottom: 1px solid #eee; 
    padding-left: 10px; 
    padding-bottom: 10px;
}


.sgx-bottom-table-wrapper {
    margin-top: 15px;
    width: 100%;
}
.custom-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    border: 1px solid #ccc;
}
.custom-table th, .custom-table td {
    border: none; 
    border-right: 1px solid #ccc; 
    padding: 8px 0;
    background-color: #f7f7f7;
    font-size: 0.85em;
    font-weight: bold;
}
.custom-table td:last-child, .custom-table th:last-child {
    border-right: none;
}
.custom-table thead {
    display: none; 
}
.sgx-bottom-data-row {
    text-align: right;
    font-size: 0.75em;
    color: #999;
    margin-top: 5px;
    padding-right: 10px;
}

@media (max-width: 768px) {
    .sgx-price-section {
        flex-direction: column; 
        gap: 10px;
    }
    .sgx-left-data {
        width: 100%;
        padding-right: 0;
    }
}
<h5 class="sgx-history-title">Result Number History</h5>

<table id="sgxHistoryTable" class="sgx-history-table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Afternoon Top</th>
            <th>Afternoon Bottom</th>
        </tr>
    </thead>
    <tbody>
        <tr><td colspan="3">Loading data...</td></tr>
    </tbody>
</table>

<script>
    const tableID = '#sgxHistoryTable';
    
   
    const apiHistoryBaseURL = "https://supercore-node.net/public_api/stock/get_history_result.php"; 
    
    async function fetchDataFromAPI() {
       
        const lottoCodeValue = window.lottoCode || "stock_uk_v"; 
        const apiHistoryURL = ${apiHistoryBaseURL}?code=${lottoCodeValue};
        
        try {
            const response = await fetch(apiHistoryURL);
            let data = await response.json();

            const tableBody = document.querySelector(tableID + ' tbody');
            
           
            if (!Array.isArray(data)) {
                 if (data && Array.isArray(data.data)) {
                     data = data.data;
                 } else {
                     tableBody.innerHTML = '<tr><td colspan="3">ไม่สามารถโหลดข้อมูลได้: API ไม่ได้ส่งข้อมูลเป็นอาร์เรย์</td></tr>';
                     return;
                 }
            }

            const now = new Date();
            const currentHours = now.getHours();
            const currentMinutes = now.getMinutes();
            
           
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const todayISO = ${year}-${month}-${day}; 
            
           
            const shouldShowTodayData = (currentHours > 21 || (currentHours === 21 && currentMinutes >= 50));
            
            const uniqueByDate = {};
            
            data.forEach(row => {
                const apiDate = (row.entry_date  row.lotto_date  '').slice(0, 10); 
                
                if (!uniqueByDate[apiDate] || parseInt(row.id) > parseInt(uniqueByDate[apiDate].id)) {
                    const prize5d = row.prize_5d || '';
                    const first3 = prize5d.substring(0, 3); 
                    const last2 = prize5d.substring(3, 5); 

                    uniqueByDate[apiDate] = { 
                        ...row, 
                        entry_date: apiDate, 
                        first3: first3, 
                        last2: last2 
                    }; 
                }
            });
            let filteredData = Object.values(uniqueByDate);

           
            const filteredDataForDisplay = filteredData.filter(row => {
                const isTodayRow = (row.entry_date === todayISO);
                
                if (isTodayRow) {
                   
                    return shouldShowTodayData;
                }
               
                return true;
            });

          
            const finalData = filteredDataForDisplay
                .sort((a, b) => new Date(b.entry_date) - new Date(a.entry_date))
                .slice(0, 15);

            tableBody.innerHTML = ''; 
            
            if (finalData.length === 0) {
                tableBody.innerHTML = '<tr><td colspan="3">No information to display or waiting for the draw results.</td></tr>';
            } else {
                finalData.forEach(row => {
                    const tr = document.createElement('tr');
                    
                    tr.appendChild(createCell(row.entry_date));
                    tr.appendChild(createCell(row.first3));
                    tr.appendChild(createCell(row.last2));
                    tableBody.appendChild(tr);
                });
            }

        } catch (err) {
            console.error("❌ เกิดข้อผิดพลาดในการโหลดประวัติ:", err);
            const tableBody = document.querySelector(tableID + ' tbody');
            tableBody.innerHTML = '<tr><td colspan="3">เกิดข้อผิดพลาดในการโหลดข้อมูล</td></tr>';
        }
    }
    function createCell(text) {
        const td = document.createElement('td');
        td.textContent = text || "-";
        return td;
    }

    document.addEventListener('DOMContentLoaded', () => {
        fetchDataFromAPI();
        setInterval(fetchDataFromAPI, 60 * 1000); 
    });
</script>
.sgx-history-title {
        font-size: 1.5em;
        color: #333; 
        text-align: left;
        margin-top: 20px;
        margin-bottom: 15px;
        font-family: 'Arial', sans-serif;
        font-weight: bold;
        padding-left: 5px;
    }

    .sgx-history-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 16px;
        text-align: center;
        table-layout: fixed;
        border: 1px solid #ddd;
        font-family: Arial, sans-serif;
    }

    .sgx-history-table th, .sgx-history-table td {
        border: 1px solid #ddd;
        padding: 8px 5px;
        color: #333; 
        height: 40px; 
    }

    .sgx-history-table th {
        background-color: #f0f0f0;  
        color: #333; 
        font-size: 0.9em;
        font-weight: bold;
    }

   
    @media (max-width: 768px) {
        .sgx-history-table th, .sgx-history-table td {
            font-size: 14px;
            padding: 5px;
        }
        .sgx-history-title {
            font-size: 1.3em;
        }
    }
    @media (max-width: 480px) {
        .sgx-history-table th, .sgx-history-table td {
            font-size: 12px;
            padding: 4px;
        }
    }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-057713d */.nebula-stream {
        width: 100%;
        overflow: hidden;
        background-color: #f8f9fa; /* สีพื้นหลังขาวอมเทาอ่อนๆ ตามภาพ */
        border-top: 1px solid #e9ecef;
        border-bottom: 1px solid #e9ecef;
        padding: 12px 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        box-sizing: border-box;
    }


    .cosmos-ticker {
        display: inline-block;
        white-space: nowrap;
        padding-left: 100%; 
        animation: aether-drift 25s linear infinite; 
    }

    .astral-asset {
        display: inline-flex;
        align-items: center;
        margin-right: 35px; /* ระยะห่างระหว่างหุ้นแต่ละตัว */
        font-size: 15px;
        font-weight: 500;
        color: #333333;
    }

    .asset-sign {
        margin-right: 6px;
        color: #111111;
    }
    
    .asset-name {
        margin-right: 6px;
        font-weight: bold;
        color: #4a5568;
    }

    .asset-value {
        font-weight: 500;
        margin-right: 6px;
    }

 
    .pulse-up {
        color: #1e7e34;
        font-weight: bold;
    }

 
    .pulse-down {
        color: #bd2130;
        font-weight: bold;
    }

    .badge-gain {
        background-color: #e6f4ea;
        color: #137333;
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 13px;
        font-weight: 600;
        margin-left: 4px;
    }

    .cosmic-gate {
        display: inline-block;
        height: 20px;
        width: 1px;
        background-color: #cccccc;
        margin: 0 25px;
        vertical-align: middle;
    }

    @keyframes aether-drift {
        0% {
            transform: translate3d(0, 0, 0);
        }
        100% {
            transform: translate3d(-100%, 0, 0);
        }
    }

    .nebula-stream:hover .cosmos-ticker {
        animation-play-state: paused;
    }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ed2ee6c */.sgx-history-title {
        font-size: 1.5em;
        color: #333; 
        text-align: left;
        margin-top: 20px;
        margin-bottom: 15px;
        font-family: 'Arial', sans-serif;
        font-weight: bold;
        padding-left: 5px;
    }

    .sgx-history-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 16px;
        text-align: center;
        table-layout: fixed;
        border: 1px solid #ddd;
        font-family: Arial, sans-serif;
    }

    .sgx-history-table th, .sgx-history-table td {
        border: 1px solid #ddd;
        padding: 8px 5px;
        color: #333; 
        height: 40px; 
    }

    .sgx-history-table th {
        background-color: #f0f0f0;  
        color: #333; 
        font-size: 0.9em;
        font-weight: bold;
    }

   
    @media (max-width: 768px) {
        .sgx-history-table th, .sgx-history-table td {
            font-size: 14px;
            padding: 5px;
        }
        .sgx-history-title {
            font-size: 1.3em;
        }
    }
    @media (max-width: 480px) {
        .sgx-history-table th, .sgx-history-table td {
            font-size: 12px;
            padding: 4px;
        }
    }/* End custom CSS */