{"id":539,"date":"2026-01-27T09:04:00","date_gmt":"2026-01-27T09:04:00","guid":{"rendered":"https:\/\/ilsiftransmart.com\/?page_id=539"},"modified":"2026-02-13T15:29:15","modified_gmt":"2026-02-13T15:29:15","slug":"539-2","status":"publish","type":"page","link":"https:\/\/ilsiftransmart.com\/vi\/539-2\/","title":{"rendered":"TRANG THEO D\u00d5I"},"content":{"rendered":"\n<style>\n    \/* --- CSS GIAO DI\u1ec6N --- *\/\n    .ilsi-track-wrapper {\n        font-family: 'Inter', 'Inter';\n        max-width: 800px;\n        margin: 40px auto;\n        background: #fff;\n        border-radius: 12px;\n        box-shadow: 0 10px 40px rgba(0,0,0,0.08);\n        overflow: hidden;\n    }\n\n    \/* HEADER *\/\n    .track-header {\n        background: linear-gradient(135deg, #003366 0%, #00509d 100%);\n        padding: 40px;\n        text-align: center;\n        color: white;\n    }\n    .track-header h2 { margin: 0; font-size: 2rem; }\n    .track-header p { opacity: 0.9; margin-top: 10px; }\n\n    \/* FORM NH\u1eacP M\u00c3 *\/\n    .track-input-box {\n        padding: 30px;\n        background: #f8f9fa;\n        border-bottom: 1px solid #eee;\n        display: flex;\n        gap: 15px;\n        justify-content: center;\n    }\n    .input-code {\n        width: 60%;\n        padding: 15px;\n        border: 2px solid #ddd;\n        border-radius: 8px;\n        font-size: 1.1rem;\n        text-transform: uppercase;\n        font-weight: bold;\n        letter-spacing: 1px;\n    }\n    .input-code:focus { border-color: #003366; outline: none; }\n    \n    .btn-track {\n        padding: 0 30px;\n        background: #FFCC00;\n        color: #003366;\n        font-weight: 800;\n        border: none;\n        border-radius: 8px;\n        cursor: pointer;\n        text-transform: uppercase;\n        font-size: 1rem;\n        transition: 0.3s;\n    }\n    .btn-track:hover { background: #e6b800; transform: translateY(-2px); }\n\n    \/* K\u1ebeT QU\u1ea2 HI\u1ec2N TH\u1eca *\/\n    .track-result {\n        padding: 40px;\n        display: none; \/* M\u1eb7c \u0111\u1ecbnh \u1ea9n *\/\n    }\n    \n    .order-info {\n        display: flex;\n        justify-content: space-between;\n        margin-bottom: 30px;\n        padding-bottom: 20px;\n        border-bottom: 1px dashed #ddd;\n    }\n    .info-group h4 { margin: 0 0 5px 0; color: #666; font-size: 0.9rem; }\n    .info-group span { font-size: 1.2rem; font-weight: bold; color: #003366; }\n\n    \/* TIMELINE D\u1eccC (KI\u1ec2U SHOPEE) *\/\n    .timeline {\n        position: relative;\n        padding-left: 30px;\n        margin-top: 20px;\n    }\n    \/* \u0110\u01b0\u1eddng k\u1ebb d\u1ecdc *\/\n    .timeline::before {\n        content: '';\n        position: absolute;\n        left: 7px;\n        top: 5px;\n        bottom: 0;\n        width: 2px;\n        background: #e0e0e0;\n    }\n\n    .timeline-item {\n        position: relative;\n        margin-bottom: 30px;\n        opacity: 0.5; \/* M\u1edd \u0111i n\u1ebfu ch\u01b0a ho\u00e0n th\u00e0nh *\/\n    }\n    \n    .timeline-item.active {\n        opacity: 1;\n    }\n\n    \/* D\u1ea5u ch\u1ea5m tr\u00f2n *\/\n    .timeline-dot {\n        position: absolute;\n        left: -29px;\n        top: 0;\n        width: 16px;\n        height: 16px;\n        background: #fff;\n        border: 4px solid #ccc;\n        border-radius: 50%;\n        z-index: 2;\n    }\n\n    \/* N\u1ebfu Active th\u00ec ch\u1ea5m m\u00e0u xanh *\/\n    .timeline-item.active .timeline-dot {\n        border-color: #27ae60; \/* M\u00e0u xanh l\u00e1 *\/\n        background: #27ae60;\n        box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.2);\n    }\n    \/* Item m\u1edbi nh\u1ea5t th\u00ec ch\u1ea5m to h\u01a1n *\/\n    .timeline-item.latest .timeline-dot {\n        border-color: #003366;\n        background: #FFCC00;\n        transform: scale(1.2);\n    }\n\n    .timeline-date { font-size: 0.85rem; color: #888; margin-bottom: 5px; }\n    .timeline-status { font-size: 1.1rem; font-weight: bold; color: #333; margin-bottom: 5px; }\n    .timeline-desc { font-size: 0.95rem; color: #666; }\n\n    \/* LOADING *\/\n    .loading-overlay {\n        text-align: center;\n        padding: 50px;\n        display: none;\n    }\n    .spinner {\n        width: 40px; height: 40px; \n        border: 4px solid #f3f3f3; \n        border-top: 4px solid #003366; \n        border-radius: 50%; \n        animation: spin 1s linear infinite; \n        margin: 0 auto 15px auto; \n    }\n    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\n\n    \/* B\u00c1O L\u1ed6I *\/\n    .error-msg { color: red; text-align: center; margin-top: 15px; display: none; }\n<\/style>\n\n<div class=\"ilsi-track-wrapper\">\n    <div class=\"track-header\">\n        <h2>Track Your Shipment<\/h2>\n        <p>Enter your Order ID or Bill of Lading (B\/L) number<\/p>\n    <\/div>\n\n    <div class=\"track-input-box\">\n        <input type=\"text\" id=\"track-code\" class=\"input-code\" placeholder=\"e.g. ILSI-12345\">\n        <button class=\"btn-track\" onclick=\"trackOrder()\">SEARCH<\/button>\n    <\/div>\n    <div id=\"error-box\" class=\"error-msg\">Order ID not found. Please try again.<\/div>\n\n    <div id=\"loader\" class=\"loading-overlay\">\n        <div class=\"spinner\"><\/div>\n        <p>Retrieving shipment data&#8230;<\/p>\n    <\/div>\n\n    <div id=\"result-box\" class=\"track-result\">\n        \n        <div class=\"order-info\">\n            <div class=\"info-group\">\n                <h4>Tracking Number<\/h4>\n                <span id=\"display-code\">ILSI-12345<\/span>\n            <\/div>\n            <div class=\"info-group\">\n                <h4>Estimated Delivery<\/h4>\n                <span id=\"display-date\">Jan 30, 2026<\/span>\n            <\/div>\n            <div class=\"info-group\">\n                <h4>Current Status<\/h4>\n                <span style=\"color:#27ae60; background:#e8f8f5; padding:4px 8px; border-radius:4px;\" id=\"display-status\">IN TRANSIT<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"timeline\" id=\"timeline-container\">\n            <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ --- C\u1ea4U H\u00ccNH D\u1eee LI\u1ec6U GI\u1ea2 L\u1eacP ---\n    \n    \/\/ 1. K\u1ecbch b\u1ea3n: \u0110ang v\u1eadn chuy\u1ec3n (M\u1eb7c \u0111\u1ecbnh cho m\u1ecdi m\u00e3)\n    const scenario_transit = [\n        { date: \"Today, 08:30 AM\", status: \"On Vehicle for Delivery\", desc: \"Shipment is out for delivery in Hanoi.\", active: true, latest: true },\n        { date: \"Yesterday, 19:45 PM\", status: \"Arrived at Destination Hub\", desc: \"Shipment has arrived at Soc Son Distribution Center.\", active: true, latest: false },\n        { date: \"Jan 27, 14:20 PM\", status: \"Departed from Origin Hub\", desc: \"Shipment has left ILSI Warehouse (My Dinh).\", active: true, latest: false },\n        { date: \"Jan 27, 09:15 AM\", status: \"Picked Up\", desc: \"Driver has picked up the shipment.\", active: true, latest: false },\n        { date: \"Jan 26, 10:00 AM\", status: \"Order Placed\", desc: \"Order details received. Waiting for pickup.\", active: true, latest: false }\n    ];\n\n    \/\/ 2. K\u1ecbch b\u1ea3n: \u0110\u00e3 giao h\u00e0ng th\u00e0nh c\u00f4ng (D\u00f9ng khi nh\u1eadp m\u00e3 c\u00f3 ch\u1eef \"DONE\")\n    const scenario_delivered = [\n        { date: \"Today, 10:15 AM\", status: \"Delivered Successfully\", desc: \"Package delivered to Recipient. Signed by: Gate Security.\", active: true, latest: true },\n        { date: \"Today, 07:00 AM\", status: \"Out for Delivery\", desc: \"Shipper Nguyen Van A is delivering your package.\", active: true, latest: false },\n        { date: \"Yesterday, 23:00 PM\", status: \"Arrived at Local Hub\", desc: \"Parcel arrived at Cau Giay Station.\", active: true, latest: false },\n        { date: \"Jan 27, 09:00 AM\", status: \"Order Confirmed\", desc: \"Seller has processed your order.\", active: true, latest: false }\n    ];\n\n    \/\/ 3. K\u1ecbch b\u1ea3n: M\u1edbi t\u1ea1o \u0111\u01a1n (D\u00f9ng khi nh\u1eadp m\u00e3 c\u00f3 ch\u1eef \"NEW\")\n    const scenario_new = [\n        { date: \"Today, 14:00 PM\", status: \"Ready to Ship\", desc: \"Parcel is packed and ready for handover.\", active: true, latest: true },\n        { date: \"Today, 13:30 PM\", status: \"Packing\", desc: \"Staff is packing your items.\", active: true, latest: false },\n        { date: \"Today, 13:00 PM\", status: \"Order Verified\", desc: \"Payment verified successfully.\", active: true, latest: false }\n    ];\n\n    function trackOrder() {\n        const codeInput = document.getElementById('track-code').value.trim().toUpperCase();\n        const errorBox = document.getElementById('error-box');\n        const loader = document.getElementById('loader');\n        const resultBox = document.getElementById('result-box');\n        const timelineContainer = document.getElementById('timeline-container');\n\n        \/\/ Reset\n        resultBox.style.display = 'none';\n        errorBox.style.display = 'none';\n\n        if(codeInput.length < 3) {\n            errorBox.innerText = \"Please enter a valid Tracking ID.\";\n            errorBox.style.display = 'block';\n            return;\n        }\n\n        \/\/ Hi\u1ec7n Loading gi\u1ea3 v\u1edd (cho gi\u1ed1ng th\u1eadt)\n        loader.style.display = 'block';\n\n        setTimeout(() => {\n            loader.style.display = 'none';\n            resultBox.style.display = 'block';\n\n            \/\/ C\u1eadp nh\u1eadt th\u00f4ng tin Header\n            document.getElementById('display-code').innerText = codeInput;\n            \n            \/\/ --- LOGIC CH\u1eccN K\u1ecaCH B\u1ea2N (CHEAT CODES) ---\n            let data = [];\n            let mainStatus = \"\";\n\n            if (codeInput.includes(\"DONE\") || codeInput.includes(\"888\")) {\n                \/\/ N\u1ebfu m\u00e3 ch\u1ee9a ch\u1eef \"DONE\" ho\u1eb7c s\u1ed1 \"888\" -> Hi\u1ec7n k\u1ecbch b\u1ea3n \u0110\u00c3 GIAO\n                data = scenario_delivered;\n                mainStatus = \"DELIVERED\";\n                document.getElementById('display-status').style.color = \"#27ae60\";\n                document.getElementById('display-status').innerText = \"DELIVERED\";\n            } \n            else if (codeInput.includes(\"NEW\") || codeInput.includes(\"111\")) {\n                \/\/ N\u1ebfu m\u00e3 ch\u1ee9a \"NEW\" ho\u1eb7c \"111\" -> Hi\u1ec7n k\u1ecbch b\u1ea3n M\u1edaI\n                data = scenario_new;\n                mainStatus = \"PREPARING\";\n                document.getElementById('display-status').style.color = \"#f39c12\"; \/\/ M\u00e0u cam\n                document.getElementById('display-status').innerText = \"PACKING\";\n            } \n            else {\n                \/\/ M\u1eb7c \u0111\u1ecbnh (nh\u1eadp b\u1ea5t c\u1ee9 s\u1ed1 n\u00e0o kh\u00e1c) -> Hi\u1ec7n k\u1ecbch b\u1ea3n \u0110ANG GIAO\n                data = scenario_transit;\n                mainStatus = \"IN TRANSIT\";\n                document.getElementById('display-status').style.color = \"#2980b9\"; \/\/ M\u00e0u xanh d\u01b0\u01a1ng\n                document.getElementById('display-status').innerText = \"IN TRANSIT\";\n            }\n\n            \/\/ Render Timeline HTML\n            let html = \"\";\n            data.forEach(item => {\n                const activeClass = item.active ? \"active\" : \"\";\n                const latestClass = item.latest ? \"latest\" : \"\";\n                \n                html += `\n                    <div class=\"timeline-item ${activeClass} ${latestClass}\">\n                        <div class=\"timeline-dot\"><\/div>\n                        <div class=\"timeline-date\">${item.date}<\/div>\n                        <div class=\"timeline-status\">${item.status}<\/div>\n                        <div class=\"timeline-desc\">${item.desc}<\/div>\n                    <\/div>\n                `;\n            });\n\n            timelineContainer.innerHTML = html;\n\n        }, 1500); \/\/ Gi\u1ea3 v\u1edd load m\u1ea5t 1.5 gi\u00e2y\n    }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Track Your Shipment Enter your Order ID or Bill of Lading (B\/L) number SEARCH Order ID not found. Please try again. Retrieving shipment data&#8230; Tracking Number ILSI-12345 Estimated Delivery Jan 30, 2026 Current Status IN TRANSIT<\/p>","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-539","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/ilsiftransmart.com\/vi\/wp-json\/wp\/v2\/pages\/539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ilsiftransmart.com\/vi\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ilsiftransmart.com\/vi\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ilsiftransmart.com\/vi\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ilsiftransmart.com\/vi\/wp-json\/wp\/v2\/comments?post=539"}],"version-history":[{"count":4,"href":"https:\/\/ilsiftransmart.com\/vi\/wp-json\/wp\/v2\/pages\/539\/revisions"}],"predecessor-version":[{"id":1833,"href":"https:\/\/ilsiftransmart.com\/vi\/wp-json\/wp\/v2\/pages\/539\/revisions\/1833"}],"wp:attachment":[{"href":"https:\/\/ilsiftransmart.com\/vi\/wp-json\/wp\/v2\/media?parent=539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}