{"id":356,"date":"2026-08-19T07:23:44","date_gmt":"2026-08-19T07:23:44","guid":{"rendered":"https:\/\/nscontinent.com\/?page_id=356"},"modified":"2026-08-29T11:48:16","modified_gmt":"2026-08-29T11:48:16","slug":"tracking","status":"publish","type":"page","link":"https:\/\/nscontinent.com\/id\/tracking\/","title":{"rendered":"Tracking"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"356\" class=\"elementor elementor-356\">\n\t\t\t\t<div class=\"elementor-element elementor-element-529aa2f e-con e-atomic-element e-flexbox-base e-default-div e-722fb8e \" data-id=\"529aa2f\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"529aa2f\">\n    \t\t<div class=\"elementor-element elementor-element-7658946 elementor-widget elementor-widget-html\" data-id=\"7658946\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n\r\n<html lang=\"en\">\r\n\r\n<head>\r\n\r\n<meta charset=\"UTF-8\">\r\n\r\n<meta\r\n    name=\"viewport\"\r\n    content=\"width=device-width, initial-scale=1.0\"\r\n>\r\n\r\n<title>\r\n    Shipment Tracking | NS Continent \u2014 Ocean Freight Visibility\r\n<\/title>\r\n\r\n<meta\r\n    name=\"description\"\r\n    content=\"Track NS Continent shipments by container number, HBL, MBL or booking number. View vessel movements, shipment journey, schedule changes, ETA, delays and shipment details.\"\r\n>\r\n\r\n<meta\r\n    name=\"keywords\"\r\n    content=\"NS Continent tracking, shipment tracking Indonesia, container tracking, vessel tracking, HBL tracking, MBL tracking, booking tracking, ocean freight tracking, shipment ETA, vessel schedule\"\r\n>\r\n\r\n<meta\r\n    name=\"author\"\r\n    content=\"PT Nova Sync Continent\"\r\n>\r\n\r\n<meta\r\n    name=\"robots\"\r\n    content=\"index, follow\"\r\n>\r\n\r\n<link\r\n    rel=\"canonical\"\r\n    href=\"https:\/\/nscontinent.com\/tracking\/\"\r\n>\r\n\r\n\r\n<style>\r\n\r\n\/* =========================================================\r\n   NS CONTINENT\r\n   TRACKING PAGE\r\n\r\n   WEBSITE HEADER \/ MENU REMOVED\r\n\r\n   CUSTOMER NAME:\r\n   REMOVED FROM FRONTEND\r\n\r\n   TRACKING ENGINE:\r\n   LOCKED\r\n========================================================= *\/\r\n\r\n\r\n\/* =========================================================\r\n   MASTER ROOT VARIABLES\r\n========================================================= *\/\r\n\r\n:root {\r\n\r\n    --navy:\r\n        #012d5a;\r\n\r\n    --navy-dark:\r\n        #001b35;\r\n\r\n    --navy-deep:\r\n        #001326;\r\n\r\n    --blue:\r\n        #0b4f8a;\r\n\r\n    --blue-light:\r\n        #eef5fb;\r\n\r\n    --gold:\r\n        #c9a227;\r\n\r\n    --gold-light:\r\n        #e3c65b;\r\n\r\n    --gold-soft:\r\n        #ead8ae;\r\n\r\n    --text:\r\n        #172b3a;\r\n\r\n    --muted:\r\n        #687989;\r\n\r\n    --white:\r\n        #ffffff;\r\n\r\n    --light:\r\n        #f5f8fb;\r\n\r\n    --border:\r\n        #dce5ed;\r\n\r\n    --green:\r\n        #16855b;\r\n\r\n    --green-light:\r\n        #edf8f3;\r\n\r\n    --red:\r\n        #c43d3d;\r\n\r\n    --orange:\r\n        #c87918;\r\n\r\n    --orange-light:\r\n        #fff7e9;\r\n\r\n    --shadow:\r\n        0 15px 45px\r\n        rgba(1,45,90,.08);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GLOBAL RESET\r\n========================================================= *\/\r\n\r\n* {\r\n\r\n    box-sizing:\r\n        border-box;\r\n\r\n}\r\n\r\n\r\nhtml {\r\n\r\n    scroll-behavior:\r\n        smooth;\r\n\r\n}\r\n\r\n\r\nbody {\r\n\r\n    margin:\r\n        0;\r\n\r\n    padding:\r\n        0;\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif;\r\n\r\n    color:\r\n        var(--text);\r\n\r\n    background:\r\n        #eef3f7;\r\n\r\n    line-height:\r\n        1.6;\r\n\r\n}\r\n\r\n\r\na {\r\n\r\n    text-decoration:\r\n        none;\r\n\r\n    color:\r\n        inherit;\r\n\r\n}\r\n\r\n\r\nbutton,\r\ninput,\r\nselect,\r\ntextarea {\r\n\r\n    font-family:\r\n        inherit;\r\n\r\n}\r\n\r\n\r\nimg {\r\n\r\n    max-width:\r\n        100%;\r\n\r\n    display:\r\n        block;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TRACKING APP\r\n========================================================= *\/\r\n\r\n#nsc-tracking-app {\r\n\r\n    --navy-1000:#02070c;\r\n    --navy-950:#06121d;\r\n    --navy-900:#071a2a;\r\n    --navy-800:#012d5a;\r\n    --navy-700:#084c7c;\r\n\r\n    --gold-700:#9a7424;\r\n    --gold-600:#b58b31;\r\n    --gold-500:#c9a24a;\r\n    --gold-400:#dfc77e;\r\n    --gold-300:#ecdaa5;\r\n\r\n    --ivory:#fbfaf7;\r\n    --paper:#f3f4f2;\r\n    --white:#ffffff;\r\n\r\n    --tracking-border:#dce1df;\r\n    --border-light:#e7eae8;\r\n\r\n    --tracking-text:#172732;\r\n    --text-soft:#52616a;\r\n    --tracking-muted:#7b8890;\r\n\r\n    --success:#2f6f61;\r\n    --warning:#9a7424;\r\n    --danger:#9f4d4d;\r\n\r\n    width:\r\n        100%;\r\n\r\n    min-height:\r\n        0;\r\n\r\n    color:\r\n        var(--tracking-text);\r\n\r\n    background:\r\n        var(--paper);\r\n\r\n    font-family:\r\n        Inter,\r\n        -apple-system,\r\n        BlinkMacSystemFont,\r\n        \"Segoe UI\",\r\n        Roboto,\r\n        Arial,\r\n        sans-serif;\r\n\r\n    box-sizing:\r\n        border-box;\r\n\r\n}\r\n\r\n\r\n#nsc-tracking-app * {\r\n    box-sizing:\r\n        border-box;\r\n}\r\n\r\n\r\n#nsc-tracking-app *::before,\r\n#nsc-tracking-app *::after {\r\n\r\n    box-sizing:\r\n        border-box;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PRINT LOCK\r\n========================================================= *\/\r\n\r\n@media print {\r\n\r\n    #nsc-tracking-app {\r\n\r\n        display:\r\n            none !important;\r\n\r\n    }\r\n\r\n    body {\r\n\r\n        padding:\r\n            0;\r\n\r\n        background:\r\n            #ffffff;\r\n\r\n    }\r\n\r\n    body::before {\r\n\r\n        content:\r\n            \"NS CONTINENT \u2014 TRACKING PRINT DISABLED\";\r\n\r\n        display:\r\n            block;\r\n\r\n        padding:\r\n            120px 20px;\r\n\r\n        text-align:\r\n            center;\r\n\r\n        color:\r\n            #012d5a;\r\n\r\n        font-family:\r\n            Arial,\r\n            sans-serif;\r\n\r\n        font-size:\r\n            22px;\r\n\r\n        font-weight:\r\n            800;\r\n\r\n        letter-spacing:\r\n            1px;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TRACKING PAGE\r\n========================================================= *\/\r\n\r\n.nsc-premium-page {\r\n\r\n    width:\r\n        100%;\r\n\r\n    background:\r\n        var(--paper);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TOP BAR\r\n========================================================= *\/\r\n\r\n.nsc-premium-topbar {\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            #02070c,\r\n            #061522,\r\n            #012d5a\r\n        );\r\n\r\n    border-bottom:\r\n        1px solid\r\n        rgba(201,162,74,.18);\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-topbar-inner {\r\n\r\n    width:\r\n        100%;\r\n\r\n    max-width:\r\n        1360px;\r\n\r\n    margin:\r\n        0 auto;\r\n\r\n    padding:\r\n        14px 26px;\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        space-between;\r\n\r\n    gap:\r\n        20px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TRACKING TOP BRAND\r\n========================================================= *\/\r\n\r\n.nsc-top-brand {\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        12px;\r\n\r\n}\r\n\r\n\r\n.nsc-top-logo {\r\n\r\n    width:\r\n        29px;\r\n\r\n    height:\r\n        29px;\r\n\r\n    display:\r\n        grid;\r\n\r\n    place-items:\r\n        center;\r\n\r\n    border:\r\n        1px solid\r\n        var(--gold-500);\r\n\r\n    color:\r\n        var(--gold-300);\r\n\r\n    font-size:\r\n        9px;\r\n\r\n    font-weight:\r\n        900;\r\n\r\n}\r\n\r\n\r\n.nsc-top-name {\r\n\r\n    font-size:\r\n        10px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    letter-spacing:\r\n        2.7px;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n}\r\n\r\n\r\n.nsc-top-system {\r\n\r\n    font-size:\r\n        9px;\r\n\r\n    font-weight:\r\n        700;\r\n\r\n    letter-spacing:\r\n        1.2px;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    color:\r\n        rgba(255,255,255,.48);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO\r\n========================================================= *\/\r\n\r\n.nsc-premium-hero {\r\n\r\n    position:\r\n        relative;\r\n\r\n    overflow:\r\n        hidden;\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n            circle at 84% 16%,\r\n            rgba(201,162,74,.16),\r\n            transparent 23%\r\n        ),\r\n\r\n        radial-gradient(\r\n            circle at 16% 95%,\r\n            rgba(80,160,200,.06),\r\n            transparent 25%\r\n        ),\r\n\r\n        linear-gradient(\r\n            135deg,\r\n            #02070c 0%,\r\n            #071522 48%,\r\n            #012d5a 100%\r\n        );\r\n\r\n}\r\n\r\n\r\n\/*\r\n   Softer hero decoration.\r\n   No large visible frame.\r\n*\/\r\n\r\n.nsc-premium-hero::before {\r\n\r\n    content:\r\n        \"\";\r\n\r\n    position:\r\n        absolute;\r\n\r\n    width:\r\n        820px;\r\n\r\n    height:\r\n        820px;\r\n\r\n    right:\r\n        -470px;\r\n\r\n    top:\r\n        -500px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,162,74,.08);\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-hero::after {\r\n\r\n    content:\r\n        \"\";\r\n\r\n    position:\r\n        absolute;\r\n\r\n    width:\r\n        1100px;\r\n\r\n    height:\r\n        1100px;\r\n\r\n    right:\r\n        -620px;\r\n\r\n    top:\r\n        -680px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255,255,255,.025);\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-hero-inner {\r\n\r\n    width:\r\n        100%;\r\n\r\n    max-width:\r\n        1360px;\r\n\r\n    margin:\r\n        0 auto;\r\n\r\n    padding:\r\n        78px\r\n        26px\r\n        118px;\r\n\r\n    position:\r\n        relative;\r\n\r\n    z-index:\r\n        2;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EYEBROW\r\n========================================================= *\/\r\n\r\n.nsc-eyebrow {\r\n\r\n    display:\r\n        inline-flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        10px;\r\n\r\n    padding:\r\n        8px\r\n        12px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,162,74,.20);\r\n\r\n    border-radius:\r\n        999px;\r\n\r\n    background:\r\n        rgba(201,162,74,.035);\r\n\r\n    color:\r\n        var(--gold-300);\r\n\r\n    font-size:\r\n        9px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    letter-spacing:\r\n        1.7px;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n}\r\n\r\n\r\n.nsc-eyebrow-dot {\r\n\r\n    width:\r\n        6px;\r\n\r\n    height:\r\n        6px;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n        var(--gold-500);\r\n\r\n    box-shadow:\r\n        0 0 8px\r\n        rgba(201,162,74,.50);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   HERO TITLE\r\n========================================================= *\/\r\n\r\n.nsc-premium-title {\r\n\r\n    max-width:\r\n        980px;\r\n\r\n    margin:\r\n        22px 0 0;\r\n\r\n    font-size:\r\n        clamp(\r\n            46px,\r\n            6vw,\r\n            78px\r\n        );\r\n\r\n    line-height:\r\n        .98;\r\n\r\n    letter-spacing:\r\n        -2.7px;\r\n\r\n    font-weight:\r\n        820;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-title span {\r\n\r\n    color:\r\n        var(--gold-300);\r\n\r\n}\r\n\r\n\r\n.nsc-premium-copy {\r\n\r\n    max-width:\r\n        760px;\r\n\r\n    margin:\r\n        25px 0 40px;\r\n\r\n    color:\r\n        rgba(255,255,255,.63);\r\n\r\n    font-size:\r\n        15px;\r\n\r\n    line-height:\r\n        1.85;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SEARCH\r\n   NATURAL \/ SOFT FRAME\r\n========================================================= *\/\r\n\r\n.nsc-premium-search-wrap {\r\n\r\n    max-width:\r\n        1160px;\r\n\r\n    position:\r\n        relative;\r\n\r\n}\r\n\r\n\r\n\/*\r\n   Old strong gradient frame removed.\r\n*\/\r\n\r\n.nsc-premium-search-wrap::before {\r\n\r\n    display:\r\n        none;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-search {\r\n\r\n    position:\r\n        relative;\r\n\r\n    z-index:\r\n        2;\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        205px\r\n        minmax(0,1fr)\r\n        190px;\r\n\r\n    gap:\r\n        6px;\r\n\r\n    padding:\r\n        6px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255,255,255,.13);\r\n\r\n    border-radius:\r\n        13px;\r\n\r\n    background:\r\n        rgba(255,255,255,.97);\r\n\r\n    box-shadow:\r\n        0 16px 36px\r\n        rgba(0,12,24,.18);\r\n\r\n}\r\n\r\n\r\n.nsc-premium-select {\r\n\r\n    width:\r\n        100%;\r\n\r\n    height:\r\n        58px;\r\n\r\n    border:\r\n        1px solid\r\n        #e1e5e3;\r\n\r\n    border-radius:\r\n        9px;\r\n\r\n    padding:\r\n        0 16px;\r\n\r\n    background:\r\n        #f7f8f6;\r\n\r\n    color:\r\n        var(--tracking-text);\r\n\r\n    font-size:\r\n        14px;\r\n\r\n    font-weight:\r\n        700;\r\n\r\n    outline:\r\n        none;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-select:focus {\r\n\r\n    border-color:\r\n        rgba(1,45,90,.38);\r\n\r\n}\r\n\r\n\r\n.nsc-premium-input {\r\n\r\n    width:\r\n        100%;\r\n\r\n    height:\r\n        58px;\r\n\r\n    border:\r\n        0;\r\n\r\n    outline:\r\n        none;\r\n\r\n    background:\r\n        transparent;\r\n\r\n    padding:\r\n        0 18px;\r\n\r\n    color:\r\n        var(--tracking-text);\r\n\r\n    font-size:\r\n        18px;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-input::placeholder {\r\n\r\n    color:\r\n        #a1aaae;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-button {\r\n\r\n    width:\r\n        100%;\r\n\r\n    height:\r\n        58px;\r\n\r\n    border:\r\n        0;\r\n\r\n    border-radius:\r\n        9px;\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            var(--navy-800),\r\n            var(--navy-700)\r\n        );\r\n\r\n    font-size:\r\n        12px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    letter-spacing:\r\n        1.15px;\r\n\r\n    cursor:\r\n        pointer;\r\n\r\n    transition:\r\n        .2s ease;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-button:hover {\r\n\r\n    transform:\r\n        translateY(-1px);\r\n\r\n    box-shadow:\r\n        0 10px 24px\r\n        rgba(1,45,90,.20);\r\n\r\n}\r\n\r\n\r\n.nsc-premium-button:disabled {\r\n\r\n    opacity:\r\n        .60;\r\n\r\n    cursor:\r\n        wait;\r\n\r\n    transform:\r\n        none;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTENT\r\n   REDUCED HERO OVERLAP\r\n========================================================= *\/\r\n\r\n.nsc-premium-content {\r\n\r\n    width:\r\n        100%;\r\n\r\n    max-width:\r\n        1360px;\r\n\r\n    margin:\r\n        -34px auto 100px;\r\n\r\n    padding:\r\n        0 26px;\r\n\r\n    position:\r\n        relative;\r\n\r\n    z-index:\r\n        5;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MESSAGES\r\n========================================================= *\/\r\n\r\n.nsc-premium-message {\r\n\r\n    display:\r\n        none;\r\n\r\n    margin-bottom:\r\n        18px;\r\n\r\n    padding:\r\n        14px 18px;\r\n\r\n    border-radius:\r\n        10px;\r\n\r\n    font-size:\r\n        12px;\r\n\r\n    font-weight:\r\n        700;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-message.success {\r\n\r\n    display:\r\n        block;\r\n\r\n    color:\r\n        var(--gold-700);\r\n\r\n    background:\r\n        #faf5e7;\r\n\r\n    border:\r\n        1px solid\r\n        #e6d5a2;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-message.error {\r\n\r\n    display:\r\n        block;\r\n\r\n    color:\r\n        var(--danger);\r\n\r\n    background:\r\n        #fbf2f1;\r\n\r\n    border:\r\n        1px solid\r\n        #e5cdcc;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LOADING\r\n========================================================= *\/\r\n\r\n.nsc-premium-loading {\r\n\r\n    display:\r\n        none;\r\n\r\n    padding:\r\n        65px 20px;\r\n\r\n    text-align:\r\n        center;\r\n\r\n    background:\r\n        #ffffff;\r\n\r\n    border:\r\n        1px solid\r\n        var(--tracking-border);\r\n\r\n    border-radius:\r\n        14px;\r\n\r\n    box-shadow:\r\n        0 16px 40px\r\n        rgba(4,20,32,.07);\r\n\r\n}\r\n\r\n\r\n.nsc-premium-spinner {\r\n\r\n    width:\r\n        46px;\r\n\r\n    height:\r\n        46px;\r\n\r\n    margin:\r\n        0 auto 17px;\r\n\r\n    border:\r\n        3px solid\r\n        #e1e5e4;\r\n\r\n    border-top-color:\r\n        var(--gold-500);\r\n\r\n    border-right-color:\r\n        var(--navy-800);\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    animation:\r\n        nscPremiumSpin\r\n        .82s linear infinite;\r\n\r\n}\r\n\r\n\r\n@keyframes nscPremiumSpin {\r\n\r\n    to {\r\n\r\n        transform:\r\n            rotate(360deg);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESULT\r\n========================================================= *\/\r\n\r\n#nsc-track-result {\r\n\r\n    display:\r\n        none;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EXECUTIVE RESULT HEADER\r\n========================================================= *\/\r\n\r\n.nsc-result-command {\r\n\r\n    overflow:\r\n        hidden;\r\n\r\n    margin-bottom:\r\n        18px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,162,74,.16);\r\n\r\n    border-radius:\r\n        15px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #02070c,\r\n            #071522 52%,\r\n            #012d5a\r\n        );\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n    box-shadow:\r\n        0 22px 55px\r\n        rgba(2,16,28,.13);\r\n\r\n}\r\n\r\n\r\n.nsc-result-command-top {\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        space-between;\r\n\r\n    gap:\r\n        25px;\r\n\r\n    padding:\r\n        27px\r\n        29px;\r\n\r\n}\r\n\r\n\r\n.nsc-result-caption {\r\n\r\n    font-size:\r\n        9px;\r\n\r\n    color:\r\n        rgba(255,255,255,.41);\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        1.8px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    margin-bottom:\r\n        8px;\r\n\r\n}\r\n\r\n\r\n.nsc-result-reference {\r\n\r\n    font-size:\r\n        30px;\r\n\r\n    line-height:\r\n        1.15;\r\n\r\n    font-weight:\r\n        800;\r\n\r\n    word-break:\r\n        break-word;\r\n\r\n}\r\n\r\n\r\n.nsc-result-status {\r\n\r\n    display:\r\n        inline-flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        9px;\r\n\r\n    padding:\r\n        11px\r\n        16px;\r\n\r\n    border-radius:\r\n        999px;\r\n\r\n    font-size:\r\n        9px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    letter-spacing:\r\n        1px;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    white-space:\r\n        nowrap;\r\n\r\n}\r\n\r\n\r\n.nsc-result-status.arrived {\r\n\r\n    color:\r\n        var(--gold-300);\r\n\r\n    background:\r\n        rgba(201,162,74,.11);\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,162,74,.22);\r\n\r\n}\r\n\r\n\r\n.nsc-result-status.transit,\r\n.nsc-result-status.departed {\r\n\r\n    color:\r\n        #d8e6ef;\r\n\r\n    background:\r\n        rgba(255,255,255,.06);\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255,255,255,.09);\r\n\r\n}\r\n\r\n\r\n.nsc-result-status.scheduled {\r\n\r\n    color:\r\n        #c1cbd1;\r\n\r\n    background:\r\n        rgba(255,255,255,.04);\r\n\r\n    border:\r\n        1px solid\r\n        rgba(255,255,255,.07);\r\n\r\n}\r\n\r\n\r\n.nsc-status-dot {\r\n\r\n    width:\r\n        7px;\r\n\r\n    height:\r\n        7px;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n        currentColor;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESULT METRICS\r\n   CUSTOMER REMOVED\r\n   4 METRICS\r\n========================================================= *\/\r\n\r\n.nsc-result-metrics {\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        repeat(4,1fr);\r\n\r\n    border-top:\r\n        1px solid\r\n        rgba(255,255,255,.08);\r\n\r\n}\r\n\r\n\r\n.nsc-result-metric {\r\n\r\n    padding:\r\n        16px\r\n        18px;\r\n\r\n    border-right:\r\n        1px solid\r\n        rgba(255,255,255,.07);\r\n\r\n}\r\n\r\n\r\n.nsc-result-metric:last-child {\r\n\r\n    border-right:\r\n        0;\r\n\r\n}\r\n\r\n\r\n.nsc-result-metric-label {\r\n\r\n    color:\r\n        rgba(255,255,255,.39);\r\n\r\n    font-size:\r\n        8px;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        1px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    margin-bottom:\r\n        6px;\r\n\r\n}\r\n\r\n\r\n.nsc-result-metric-value {\r\n\r\n    color:\r\n        rgba(255,255,255,.83);\r\n\r\n    font-size:\r\n        12px;\r\n\r\n    font-weight:\r\n        700;\r\n\r\n    line-height:\r\n        1.45;\r\n\r\n    word-break:\r\n        break-word;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN GRID\r\n========================================================= *\/\r\n\r\n.nsc-premium-grid {\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        minmax(0,1.56fr)\r\n        minmax(340px,.84fr);\r\n\r\n    gap:\r\n        20px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   PANEL\r\n========================================================= *\/\r\n\r\n.nsc-premium-panel {\r\n\r\n    background:\r\n        #ffffff;\r\n\r\n    border:\r\n        1px solid\r\n        var(--tracking-border);\r\n\r\n    border-radius:\r\n        15px;\r\n\r\n    box-shadow:\r\n        0 16px 40px\r\n        rgba(11,27,39,.045);\r\n\r\n    overflow:\r\n        hidden;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-panel + .nsc-premium-panel {\r\n\r\n    margin-top:\r\n        20px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SECTION HEADER\r\n========================================================= *\/\r\n\r\n.nsc-panel-header {\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        space-between;\r\n\r\n    gap:\r\n        18px;\r\n\r\n    padding:\r\n        22px\r\n        24px;\r\n\r\n    border-bottom:\r\n        1px solid\r\n        var(--tracking-border);\r\n\r\n}\r\n\r\n\r\n.nsc-panel-title-wrap {\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        12px;\r\n\r\n    min-width:\r\n        0;\r\n\r\n}\r\n\r\n\r\n.nsc-panel-line {\r\n\r\n    width:\r\n        4px;\r\n\r\n    height:\r\n        24px;\r\n\r\n    flex:\r\n        0 0 auto;\r\n\r\n    border-radius:\r\n        999px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            180deg,\r\n            var(--gold-500),\r\n            var(--navy-700)\r\n        );\r\n\r\n}\r\n\r\n\r\n.nsc-panel-title {\r\n\r\n    font-size:\r\n        19px;\r\n\r\n    line-height:\r\n        1.3;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    color:\r\n        var(--navy-800);\r\n\r\n    letter-spacing:\r\n        -.15px;\r\n\r\n}\r\n\r\n\r\n.nsc-panel-code {\r\n\r\n    flex:\r\n        0 0 auto;\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        11px;\r\n\r\n    line-height:\r\n        1.2;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        1.35px;\r\n\r\n    font-weight:\r\n        800;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   JOURNEY\r\n========================================================= *\/\r\n\r\n.nsc-journey-area {\r\n\r\n    padding:\r\n        30px\r\n        24px;\r\n\r\n}\r\n\r\n\r\n.nsc-journey-track {\r\n\r\n    position:\r\n        relative;\r\n\r\n    height:\r\n        3px;\r\n\r\n    margin:\r\n        34px\r\n        5%\r\n        39px;\r\n\r\n    background:\r\n        #e1e4e3;\r\n\r\n}\r\n\r\n\r\n.nsc-journey-fill {\r\n\r\n    position:\r\n        absolute;\r\n\r\n    left:\r\n        0;\r\n\r\n    top:\r\n        0;\r\n\r\n    bottom:\r\n        0;\r\n\r\n    width:\r\n        30%;\r\n\r\n    background:\r\n        linear-gradient(\r\n            90deg,\r\n            var(--navy-800),\r\n            var(--gold-500)\r\n        );\r\n\r\n}\r\n\r\n\r\n.nsc-journey-items {\r\n\r\n    position:\r\n        relative;\r\n\r\n    display:\r\n        flex;\r\n\r\n    justify-content:\r\n        space-between;\r\n\r\n    gap:\r\n        12px;\r\n\r\n    margin-top:\r\n        -55px;\r\n\r\n}\r\n\r\n\r\n.nsc-journey-item {\r\n\r\n    width:\r\n        25%;\r\n\r\n    text-align:\r\n        center;\r\n\r\n}\r\n\r\n\r\n.nsc-journey-point {\r\n\r\n    width:\r\n        22px;\r\n\r\n    height:\r\n        22px;\r\n\r\n    margin:\r\n        0 auto 13px;\r\n\r\n    border:\r\n        5px solid\r\n        #ffffff;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n        var(--navy-800);\r\n\r\n    box-shadow:\r\n        0 0 0 1px\r\n        var(--navy-800);\r\n\r\n}\r\n\r\n\r\n.nsc-journey-item.future\r\n.nsc-journey-point {\r\n\r\n    background:\r\n        #ffffff;\r\n\r\n    box-shadow:\r\n        0 0 0 1px\r\n        var(--gold-500);\r\n\r\n}\r\n\r\n\r\n.nsc-journey-port {\r\n\r\n    font-size:\r\n        13px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    line-height:\r\n        1.45;\r\n\r\n    color:\r\n        var(--tracking-text);\r\n\r\n}\r\n\r\n\r\n.nsc-journey-date {\r\n\r\n    margin-top:\r\n        5px;\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        11px;\r\n\r\n}\r\n\r\n\r\n.nsc-journey-state {\r\n\r\n    margin-top:\r\n        6px;\r\n\r\n    color:\r\n        var(--gold-700);\r\n\r\n    font-size:\r\n        8px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        .9px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EVENT STREAM\r\n========================================================= *\/\r\n\r\n.nsc-event-area {\r\n\r\n    padding:\r\n        29px\r\n        24px;\r\n\r\n    position:\r\n        relative;\r\n\r\n}\r\n\r\n\r\n.nsc-event-area::before {\r\n\r\n    content:\r\n        \"\";\r\n\r\n    position:\r\n        absolute;\r\n\r\n    left:\r\n        35px;\r\n\r\n    top:\r\n        35px;\r\n\r\n    bottom:\r\n        35px;\r\n\r\n    width:\r\n        1px;\r\n\r\n    background:\r\n        var(--tracking-border);\r\n\r\n}\r\n\r\n\r\n.nsc-event {\r\n\r\n    position:\r\n        relative;\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        24px\r\n        minmax(0,1fr);\r\n\r\n    gap:\r\n        16px;\r\n\r\n    padding-bottom:\r\n        30px;\r\n\r\n}\r\n\r\n\r\n.nsc-event:last-child {\r\n\r\n    padding-bottom:\r\n        0;\r\n\r\n}\r\n\r\n\r\n.nsc-event-dot {\r\n\r\n    width:\r\n        23px;\r\n\r\n    height:\r\n        23px;\r\n\r\n    border:\r\n        2px solid\r\n        #ccd5d3;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n        #ffffff;\r\n\r\n    position:\r\n        relative;\r\n\r\n    z-index:\r\n        2;\r\n\r\n}\r\n\r\n\r\n.nsc-event.completed\r\n.nsc-event-dot {\r\n\r\n    background:\r\n        var(--navy-800);\r\n\r\n    border-color:\r\n        var(--navy-800);\r\n\r\n    box-shadow:\r\n        0 0 0 5px\r\n        rgba(1,45,90,.05);\r\n\r\n}\r\n\r\n\r\n.nsc-event-title {\r\n\r\n    font-size:\r\n        16px;\r\n\r\n    font-weight:\r\n        800;\r\n\r\n    color:\r\n        var(--tracking-text);\r\n\r\n    line-height:\r\n        1.45;\r\n\r\n}\r\n\r\n\r\n.nsc-event-meta {\r\n\r\n    margin-top:\r\n        5px;\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        12px;\r\n\r\n    line-height:\r\n        1.7;\r\n\r\n}\r\n\r\n\r\n.nsc-event-state {\r\n\r\n    display:\r\n        inline-flex;\r\n\r\n    margin-top:\r\n        7px;\r\n\r\n    padding:\r\n        5px 9px;\r\n\r\n    border-radius:\r\n        999px;\r\n\r\n    font-size:\r\n        8px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        .7px;\r\n\r\n}\r\n\r\n\r\n.nsc-event-state.completed {\r\n\r\n    color:\r\n        var(--navy-800);\r\n\r\n    background:\r\n        #edf3f7;\r\n\r\n}\r\n\r\n\r\n.nsc-event-state.scheduled {\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    background:\r\n        #f2f4f3;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   OPERATIONAL CHANGE\r\n========================================================= *\/\r\n\r\n.nsc-change-panel {\r\n\r\n    display:\r\n        none;\r\n\r\n}\r\n\r\n\r\n.nsc-change-card {\r\n\r\n    padding:\r\n        22px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #fffdf8,\r\n            #faf3e3\r\n        );\r\n\r\n    border:\r\n        1px solid\r\n        #e3ce96;\r\n\r\n}\r\n\r\n\r\n.nsc-change-card + .nsc-change-card {\r\n\r\n    border-top:\r\n        1px solid\r\n        #e3ce96;\r\n\r\n}\r\n\r\n\r\n.nsc-change-top {\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    justify-content:\r\n        space-between;\r\n\r\n    gap:\r\n        10px;\r\n\r\n    margin-bottom:\r\n        18px;\r\n\r\n}\r\n\r\n\r\n.nsc-change-title {\r\n\r\n    display:\r\n        flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        8px;\r\n\r\n    color:\r\n        var(--gold-700);\r\n\r\n    font-size:\r\n        10px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    letter-spacing:\r\n        1px;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n}\r\n\r\n\r\n.nsc-change-title::before {\r\n\r\n    content:\r\n        \"\u2197\";\r\n\r\n    width:\r\n        22px;\r\n\r\n    height:\r\n        22px;\r\n\r\n    display:\r\n        grid;\r\n\r\n    place-items:\r\n        center;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n    background:\r\n        var(--gold-500);\r\n\r\n    font-size:\r\n        12px;\r\n\r\n}\r\n\r\n\r\n.nsc-change-count {\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        9px;\r\n\r\n    font-weight:\r\n        800;\r\n\r\n}\r\n\r\n\r\n.nsc-change-route {\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        minmax(0,1fr)\r\n        46px\r\n        minmax(0,1fr);\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        10px;\r\n\r\n}\r\n\r\n\r\n.nsc-change-side {\r\n\r\n    min-width:\r\n        0;\r\n\r\n}\r\n\r\n\r\n.nsc-change-side-label {\r\n\r\n    margin-bottom:\r\n        6px;\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        8px;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        .9px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n}\r\n\r\n\r\n.nsc-change-vessel-name {\r\n\r\n    font-size:\r\n        20px;\r\n\r\n    line-height:\r\n        1.25;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    color:\r\n        var(--navy-800);\r\n\r\n    word-break:\r\n        break-word;\r\n\r\n}\r\n\r\n\r\n.nsc-change-voyage {\r\n\r\n    margin-top:\r\n        4px;\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        11px;\r\n\r\n    font-weight:\r\n        700;\r\n\r\n}\r\n\r\n\r\n.nsc-change-arrow {\r\n\r\n    width:\r\n        46px;\r\n\r\n    height:\r\n        46px;\r\n\r\n    border:\r\n        1px solid\r\n        #dfcb91;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    display:\r\n        grid;\r\n\r\n    place-items:\r\n        center;\r\n\r\n    background:\r\n        #ffffff;\r\n\r\n    color:\r\n        var(--gold-700);\r\n\r\n    font-size:\r\n        20px;\r\n\r\n}\r\n\r\n\r\n.nsc-change-reason {\r\n\r\n    margin-top:\r\n        15px;\r\n\r\n    padding:\r\n        12px 13px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,162,74,.25);\r\n\r\n    border-radius:\r\n        8px;\r\n\r\n    background:\r\n        rgba(255,255,255,.56);\r\n\r\n    color:\r\n        var(--text-soft);\r\n\r\n    font-size:\r\n        11px;\r\n\r\n    line-height:\r\n        1.65;\r\n\r\n}\r\n\r\n\r\n.nsc-change-reason strong {\r\n\r\n    color:\r\n        var(--navy-800);\r\n\r\n}\r\n\r\n\r\n.nsc-change-dates {\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        1fr\r\n        1fr;\r\n\r\n    gap:\r\n        10px;\r\n\r\n    margin-top:\r\n        10px;\r\n\r\n}\r\n\r\n\r\n.nsc-change-date-box {\r\n\r\n    padding:\r\n        11px;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(201,162,74,.20);\r\n\r\n    border-radius:\r\n        8px;\r\n\r\n    background:\r\n        rgba(255,255,255,.56);\r\n\r\n}\r\n\r\n\r\n.nsc-change-date-label {\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        8px;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        .8px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    margin-bottom:\r\n        5px;\r\n\r\n}\r\n\r\n\r\n.nsc-change-date-value {\r\n\r\n    font-size:\r\n        10px;\r\n\r\n    color:\r\n        var(--tracking-text);\r\n\r\n    font-weight:\r\n        750;\r\n\r\n}\r\n\r\n\r\n.nsc-change-impact {\r\n\r\n    margin-top:\r\n        10px;\r\n\r\n    color:\r\n        var(--danger);\r\n\r\n    font-size:\r\n        10px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VESSEL SCHEDULE\r\n========================================================= *\/\r\n\r\n.nsc-schedule {\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        1fr\r\n        1fr;\r\n\r\n}\r\n\r\n\r\n.nsc-schedule-side {\r\n\r\n    min-width:\r\n        0;\r\n\r\n}\r\n\r\n\r\n.nsc-schedule-side + .nsc-schedule-side {\r\n\r\n    border-left:\r\n        1px solid\r\n        var(--tracking-border);\r\n\r\n}\r\n\r\n\r\n.nsc-schedule-head {\r\n\r\n    padding:\r\n        15px 18px;\r\n\r\n    background:\r\n        linear-gradient(\r\n            135deg,\r\n            #06121c,\r\n            #012d5a\r\n        );\r\n\r\n    color:\r\n        rgba(255,255,255,.72);\r\n\r\n    font-size:\r\n        10px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        1.15px;\r\n\r\n}\r\n\r\n\r\n.nsc-schedule-side.current\r\n.nsc-schedule-head {\r\n\r\n    color:\r\n        var(--gold-300);\r\n\r\n}\r\n\r\n\r\n.nsc-vessel {\r\n\r\n    padding:\r\n        20px 18px;\r\n\r\n    border-bottom:\r\n        1px solid\r\n        var(--tracking-border);\r\n\r\n}\r\n\r\n\r\n.nsc-vessel:last-child {\r\n\r\n    border-bottom:\r\n        0;\r\n\r\n}\r\n\r\n\r\n.nsc-vessel-name {\r\n\r\n    color:\r\n        var(--navy-800);\r\n\r\n    font-size:\r\n        16px;\r\n\r\n    line-height:\r\n        1.45;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n}\r\n\r\n\r\n.nsc-vessel-voyage {\r\n\r\n    margin-top:\r\n        4px;\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        11px;\r\n\r\n    font-weight:\r\n        700;\r\n\r\n}\r\n\r\n\r\n.nsc-vessel-route {\r\n\r\n    margin-top:\r\n        14px;\r\n\r\n}\r\n\r\n\r\n.nsc-vessel-port-row {\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        36px\r\n        minmax(0,1fr);\r\n\r\n    gap:\r\n        7px;\r\n\r\n}\r\n\r\n\r\n.nsc-vessel-port-label {\r\n\r\n    color:\r\n        var(--gold-700);\r\n\r\n    font-size:\r\n        8px;\r\n\r\n    letter-spacing:\r\n        .8px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n}\r\n\r\n\r\n.nsc-vessel-port {\r\n\r\n    color:\r\n        var(--tracking-text);\r\n\r\n    font-size:\r\n        11px;\r\n\r\n    line-height:\r\n        1.55;\r\n\r\n    font-weight:\r\n        750;\r\n\r\n}\r\n\r\n\r\n.nsc-vessel-date {\r\n\r\n    margin:\r\n        4px\r\n        0\r\n        9px\r\n        43px;\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        10px;\r\n\r\n}\r\n\r\n\r\n.nsc-vessel-status {\r\n\r\n    display:\r\n        inline-flex;\r\n\r\n    align-items:\r\n        center;\r\n\r\n    gap:\r\n        6px;\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        8px;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        .7px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n}\r\n\r\n\r\n.nsc-vessel-status::before {\r\n\r\n    content:\r\n        \"\";\r\n\r\n    width:\r\n        5px;\r\n\r\n    height:\r\n        5px;\r\n\r\n    border-radius:\r\n        50%;\r\n\r\n    background:\r\n        currentColor;\r\n\r\n}\r\n\r\n\r\n.nsc-vessel-status.arrived,\r\n.nsc-vessel-status.departed {\r\n\r\n    color:\r\n        var(--navy-800);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ETA\r\n========================================================= *\/\r\n\r\n.nsc-eta-panel {\r\n\r\n    padding:\r\n        28px;\r\n\r\n    color:\r\n        #ffffff;\r\n\r\n    background:\r\n\r\n        radial-gradient(\r\n            circle at 90% 0%,\r\n            rgba(201,162,74,.20),\r\n            transparent 30%\r\n        ),\r\n\r\n        linear-gradient(\r\n            145deg,\r\n            #02070c,\r\n            #012d5a\r\n        );\r\n\r\n}\r\n\r\n\r\n.nsc-eta-label {\r\n\r\n    color:\r\n        rgba(255,255,255,.43);\r\n\r\n    font-size:\r\n        9px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        1.5px;\r\n\r\n}\r\n\r\n\r\n.nsc-eta-value {\r\n\r\n    margin-top:\r\n        10px;\r\n\r\n    font-size:\r\n        34px;\r\n\r\n    line-height:\r\n        1;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n}\r\n\r\n\r\n.nsc-eta-location {\r\n\r\n    margin-top:\r\n        10px;\r\n\r\n    color:\r\n        rgba(255,255,255,.64);\r\n\r\n    font-size:\r\n        11px;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DELAY\r\n========================================================= *\/\r\n\r\n.nsc-delay-panel {\r\n\r\n    padding:\r\n        22px;\r\n\r\n}\r\n\r\n\r\n.nsc-delay-label {\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        9px;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        1.1px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n}\r\n\r\n\r\n.nsc-delay-value {\r\n\r\n    margin-top:\r\n        6px;\r\n\r\n    color:\r\n        var(--navy-800);\r\n\r\n    font-size:\r\n        29px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n}\r\n\r\n\r\n.nsc-delay-panel.delayed\r\n.nsc-delay-value {\r\n\r\n    color:\r\n        var(--warning);\r\n\r\n}\r\n\r\n\r\n.nsc-delay-description {\r\n\r\n    margin-top:\r\n        4px;\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        11px;\r\n\r\n    line-height:\r\n        1.6;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DETAILS\r\n   CUSTOMER REMOVED\r\n========================================================= *\/\r\n\r\n.nsc-details-grid {\r\n\r\n    display:\r\n        grid;\r\n\r\n    grid-template-columns:\r\n        1fr\r\n        1fr;\r\n\r\n    gap:\r\n        1px;\r\n\r\n    background:\r\n        var(--tracking-border);\r\n\r\n}\r\n\r\n\r\n.nsc-detail {\r\n\r\n    padding:\r\n        15px;\r\n\r\n    background:\r\n        #ffffff;\r\n\r\n    min-width:\r\n        0;\r\n\r\n}\r\n\r\n\r\n.nsc-detail-label {\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        8px;\r\n\r\n    text-transform:\r\n        uppercase;\r\n\r\n    letter-spacing:\r\n        .9px;\r\n\r\n    font-weight:\r\n        850;\r\n\r\n    margin-bottom:\r\n        6px;\r\n\r\n}\r\n\r\n\r\n.nsc-detail-value {\r\n\r\n    color:\r\n        var(--tracking-text);\r\n\r\n    font-size:\r\n        11px;\r\n\r\n    line-height:\r\n        1.6;\r\n\r\n    font-weight:\r\n        750;\r\n\r\n    word-break:\r\n        break-word;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TRACKING FOOTER\r\n========================================================= *\/\r\n\r\n.nsc-premium-footer {\r\n\r\n    margin-top:\r\n        32px;\r\n\r\n    text-align:\r\n        center;\r\n\r\n    color:\r\n        var(--tracking-muted);\r\n\r\n    font-size:\r\n        9px;\r\n\r\n    line-height:\r\n        1.7;\r\n\r\n}\r\n\r\n\r\n.nsc-premium-footer strong {\r\n\r\n    color:\r\n        var(--navy-800);\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width:1050px) {\r\n\r\n    .nsc-premium-search {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n    }\r\n\r\n\r\n    .nsc-premium-grid {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n    }\r\n\r\n\r\n    .nsc-result-metrics {\r\n\r\n        grid-template-columns:\r\n            repeat(2,1fr);\r\n\r\n    }\r\n\r\n\r\n    .nsc-result-metric:nth-child(2n) {\r\n\r\n        border-right:\r\n            0;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media(max-width:700px) {\r\n\r\n    body {\r\n\r\n        padding:\r\n            0;\r\n\r\n    }\r\n\r\n\r\n    #nsc-tracking-app {\r\n\r\n        min-width:\r\n            0;\r\n\r\n    }\r\n\r\n\r\n    .nsc-premium-topbar-inner {\r\n\r\n        padding:\r\n            13px\r\n            16px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-top-system {\r\n\r\n        display:\r\n            none;\r\n\r\n    }\r\n\r\n\r\n    .nsc-premium-hero-inner {\r\n\r\n        padding:\r\n            52px\r\n            16px\r\n            92px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-premium-title {\r\n\r\n        font-size:\r\n            48px;\r\n\r\n        letter-spacing:\r\n            -2px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-premium-copy {\r\n\r\n        font-size:\r\n            14px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-premium-content {\r\n\r\n        margin-top:\r\n            -28px;\r\n\r\n        padding:\r\n            0 13px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-premium-search {\r\n\r\n        border-radius:\r\n            11px;\r\n\r\n        padding:\r\n            5px;\r\n\r\n        gap:\r\n            5px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-premium-select,\r\n    .nsc-premium-input,\r\n    .nsc-premium-button {\r\n\r\n        height:\r\n            56px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-result-command-top {\r\n\r\n        flex-direction:\r\n            column;\r\n\r\n        align-items:\r\n            flex-start;\r\n\r\n    }\r\n\r\n\r\n    .nsc-result-reference {\r\n\r\n        font-size:\r\n            26px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-result-metrics {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n    }\r\n\r\n\r\n    .nsc-result-metric {\r\n\r\n        border-right:\r\n            0;\r\n\r\n        border-bottom:\r\n            1px solid\r\n            rgba(255,255,255,.07);\r\n\r\n    }\r\n\r\n\r\n    .nsc-result-metric:last-child {\r\n\r\n        border-bottom:\r\n            0;\r\n\r\n    }\r\n\r\n\r\n    .nsc-panel-header {\r\n\r\n        padding:\r\n            19px 18px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-panel-title {\r\n\r\n        font-size:\r\n            17px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-panel-code {\r\n\r\n        font-size:\r\n            10px;\r\n\r\n        letter-spacing:\r\n            1.05px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-panel-line {\r\n\r\n        width:\r\n            4px;\r\n\r\n        height:\r\n            21px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-journey-items {\r\n\r\n        display:\r\n            block;\r\n\r\n        margin-top:\r\n            -18px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-journey-track {\r\n\r\n        width:\r\n            1px;\r\n\r\n        height:\r\n            auto;\r\n\r\n        margin:\r\n            10px\r\n            0\r\n            10px\r\n            10px;\r\n\r\n        background:\r\n            #dfe2e1;\r\n\r\n    }\r\n\r\n\r\n    .nsc-journey-fill {\r\n\r\n        width:\r\n            3px;\r\n\r\n        height:\r\n            35%;\r\n\r\n        right:\r\n            auto;\r\n\r\n        bottom:\r\n            auto;\r\n\r\n        background:\r\n            linear-gradient(\r\n                180deg,\r\n                var(--navy-800),\r\n                var(--gold-500)\r\n            );\r\n\r\n    }\r\n\r\n\r\n    .nsc-journey-item {\r\n\r\n        width:\r\n            100%;\r\n\r\n        display:\r\n            grid;\r\n\r\n        grid-template-columns:\r\n            22px\r\n            1fr;\r\n\r\n        gap:\r\n            11px;\r\n\r\n        text-align:\r\n            left;\r\n\r\n        margin-bottom:\r\n            19px;\r\n\r\n    }\r\n\r\n\r\n    .nsc-journey-point {\r\n\r\n        margin:\r\n            0;\r\n\r\n    }\r\n\r\n\r\n    .nsc-journey-date,\r\n    .nsc-journey-state {\r\n\r\n        grid-column:\r\n            2;\r\n\r\n    }\r\n\r\n\r\n    .nsc-schedule {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n    }\r\n\r\n\r\n    .nsc-schedule-side + .nsc-schedule-side {\r\n\r\n        border-left:\r\n            0;\r\n\r\n        border-top:\r\n            1px solid\r\n            var(--tracking-border);\r\n\r\n    }\r\n\r\n\r\n    .nsc-change-route {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n    }\r\n\r\n\r\n    .nsc-change-arrow {\r\n\r\n        margin:\r\n            0 auto;\r\n\r\n    }\r\n\r\n\r\n    .nsc-change-dates {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n    }\r\n\r\n\r\n    .nsc-details-grid {\r\n\r\n        grid-template-columns:\r\n            1fr;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<\/head>\r\n\r\n\r\n<body>\r\n\r\n\r\n<!-- =========================================================\r\n     TRACKING APPLICATION\r\n========================================================= -->\r\n\r\n<div\r\n    id=\"nsc-tracking-app\"\r\n    data-nsc-tracking-app=\"true\"\r\n>\r\n\r\n<div class=\"nsc-premium-page\">\r\n\r\n\r\n<!-- =========================================================\r\n     TOP BAR\r\n========================================================= -->\r\n\r\n<div class=\"nsc-premium-topbar\">\r\n\r\n<div class=\"nsc-premium-topbar-inner\">\r\n\r\n<div class=\"nsc-top-brand\">\r\n\r\n<div class=\"nsc-top-name\">\r\n    PT Nova Sync Continent\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<div class=\"nsc-top-system\">\r\n    Premium Shipment Intelligence\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =========================================================\r\n     HERO\r\n========================================================= -->\r\n\r\n<section class=\"nsc-premium-hero\">\r\n\r\n<div class=\"nsc-premium-hero-inner\">\r\n\r\n<div class=\"nsc-eyebrow\">\r\n\r\n<span class=\"nsc-eyebrow-dot\"><\/span>\r\n\r\nShipment Tracking &amp; Vessel Intelligence\r\n\r\n<\/div>\r\n\r\n\r\n<h1 class=\"nsc-premium-title\">\r\n\r\n    Track your shipment,\r\n    <span>with greater clarity.<\/span>\r\n\r\n<\/h1>\r\n\r\n\r\n<p class=\"nsc-premium-copy\">\r\n\r\n    Track container, HBL, MBL and booking references\r\n    through one logistics intelligence interface.\r\n    Review shipment progress, vessel movements,\r\n    transshipment milestones, schedule changes,\r\n    ETA and delay information from the latest\r\n    available tracking data.\r\n\r\n<\/p>\r\n\r\n\r\n<div class=\"nsc-premium-search-wrap\">\r\n\r\n<form\r\n    id=\"nsc-tracking-form\"\r\n    class=\"nsc-premium-search\"\r\n>\r\n\r\n<select\r\n    id=\"nsc-tracking-type\"\r\n    class=\"nsc-premium-select\"\r\n>\r\n\r\n<option value=\"container\">\r\n    Container Number\r\n<\/option>\r\n\r\n<option value=\"hbl\">\r\n    HBL\r\n<\/option>\r\n\r\n<option value=\"mbl\">\r\n    MBL\r\n<\/option>\r\n\r\n<option value=\"booking\">\r\n    Booking Number\r\n<\/option>\r\n\r\n<\/select>\r\n\r\n\r\n<input\r\n    id=\"nsc-tracking-number\"\r\n    class=\"nsc-premium-input\"\r\n    type=\"text\"\r\n    autocomplete=\"off\"\r\n    placeholder=\"Enter tracking reference\"\r\n    required\r\n>\r\n\r\n\r\n<button\r\n    id=\"nsc-track-button\"\r\n    class=\"nsc-premium-button\"\r\n    type=\"submit\"\r\n>\r\n    TRACK\r\n<\/button>\r\n\r\n\r\n<\/form>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<!-- =========================================================\r\n     CONTENT\r\n========================================================= -->\r\n\r\n<main class=\"nsc-premium-content\">\r\n\r\n\r\n<div\r\n    id=\"nsc-track-status\"\r\n    class=\"nsc-premium-message\"\r\n><\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-track-loading\"\r\n    class=\"nsc-premium-loading\"\r\n>\r\n\r\n<div class=\"nsc-premium-spinner\"><\/div>\r\n\r\n<strong>\r\n    Retrieving Shipment Information\r\n<\/strong>\r\n\r\n<div\r\n    style=\"\r\n        margin-top:8px;\r\n        color:#7b8890;\r\n        font-size:11px;\r\n    \"\r\n>\r\n    Connecting to NS Continent Shipment Tracking System\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<section\r\n    id=\"nsc-track-result\"\r\n>\r\n\r\n\r\n<!-- =====================================================\r\n     COMMAND HEADER\r\n====================================================== -->\r\n\r\n<div class=\"nsc-result-command\">\r\n\r\n\r\n<div class=\"nsc-result-command-top\">\r\n\r\n\r\n<div>\r\n\r\n<div class=\"nsc-result-caption\">\r\n    Tracking Reference\r\n<\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-result-number\"\r\n    class=\"nsc-result-reference\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-result-status\"\r\n    class=\"nsc-result-status transit\"\r\n>\r\n\r\n<span class=\"nsc-status-dot\"><\/span>\r\n\r\n<span\r\n    id=\"nsc-result-status-text\"\r\n>\r\n    IN TRANSIT\r\n<\/span>\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<!-- CUSTOMER REMOVED -->\r\n\r\n<div class=\"nsc-result-metrics\">\r\n\r\n\r\n<div class=\"nsc-result-metric\">\r\n\r\n<div class=\"nsc-result-metric-label\">\r\n    Carrier\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-carrier-metric\"\r\n    class=\"nsc-result-metric-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-result-metric\">\r\n\r\n<div class=\"nsc-result-metric-label\">\r\n    Route\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-route-metric\"\r\n    class=\"nsc-result-metric-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-result-metric\">\r\n\r\n<div class=\"nsc-result-metric-label\">\r\n    ETA\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-eta-metric\"\r\n    class=\"nsc-result-metric-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-result-metric\">\r\n\r\n<div class=\"nsc-result-metric-label\">\r\n    Updated\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-updated-metric\"\r\n    class=\"nsc-result-metric-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =====================================================\r\n     MAIN GRID\r\n===================================================== -->\r\n\r\n<div class=\"nsc-premium-grid\">\r\n\r\n\r\n<!-- ===================================================\r\n     LEFT COLUMN\r\n=================================================== -->\r\n\r\n<div>\r\n\r\n\r\n<!-- =================================================\r\n     JOURNEY\r\n================================================= -->\r\n\r\n<div class=\"nsc-premium-panel\">\r\n\r\n\r\n<div class=\"nsc-panel-header\">\r\n\r\n\r\n<div class=\"nsc-panel-title-wrap\">\r\n\r\n<div class=\"nsc-panel-line\"><\/div>\r\n\r\n<div class=\"nsc-panel-title\">\r\n    Shipment Journey\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-panel-code\">\r\n    ROUTE 01\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-journey-area\">\r\n\r\n\r\n<div\r\n    id=\"nsc-journey-track\"\r\n    class=\"nsc-journey-track\"\r\n>\r\n\r\n<div\r\n    id=\"nsc-journey-fill\"\r\n    class=\"nsc-journey-fill\"\r\n><\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-route-items\"\r\n    class=\"nsc-journey-items\"\r\n><\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =================================================\r\n     PROGRESS\r\n================================================= -->\r\n\r\n<div class=\"nsc-premium-panel\">\r\n\r\n\r\n<div class=\"nsc-panel-header\">\r\n\r\n\r\n<div class=\"nsc-panel-title-wrap\">\r\n\r\n<div class=\"nsc-panel-line\"><\/div>\r\n\r\n<div class=\"nsc-panel-title\">\r\n    Shipment Progress\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-panel-code\">\r\n    EVENTS 02\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-events\"\r\n    class=\"nsc-event-area\"\r\n><\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-completed-box\"\r\n    style=\"\r\n        display:none;\r\n        margin:0 24px 22px;\r\n        padding:12px 14px;\r\n        border-radius:9px;\r\n        background:#f7f0df;\r\n        border:1px solid #e3cd96;\r\n        color:#85651d;\r\n        font-size:9px;\r\n        font-weight:850;\r\n        letter-spacing:.7px;\r\n    \"\r\n>\r\n    \u2713 SHIPMENT COMPLETED\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =================================================\r\n     VESSEL CHANGES\r\n================================================= -->\r\n\r\n<div\r\n    id=\"nsc-vessel-change-card\"\r\n    class=\"nsc-premium-panel nsc-change-panel\"\r\n>\r\n\r\n\r\n<div class=\"nsc-panel-header\">\r\n\r\n\r\n<div class=\"nsc-panel-title-wrap\">\r\n\r\n<div class=\"nsc-panel-line\"><\/div>\r\n\r\n<div class=\"nsc-panel-title\">\r\n    Vessel Change Intelligence\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-panel-code\">\r\n    ALERT 03\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-vessel-change-list\"\r\n><\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =================================================\r\n     SCHEDULE\r\n================================================= -->\r\n\r\n<div class=\"nsc-premium-panel\">\r\n\r\n\r\n<div class=\"nsc-panel-header\">\r\n\r\n\r\n<div class=\"nsc-panel-title-wrap\">\r\n\r\n<div class=\"nsc-panel-line\"><\/div>\r\n\r\n<div class=\"nsc-panel-title\">\r\n    Vessel Schedule\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-panel-code\">\r\n    SCHEDULE 04\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-schedule\">\r\n\r\n\r\n<div class=\"nsc-schedule-side\">\r\n\r\n\r\n<div class=\"nsc-schedule-head\">\r\n    Initial Schedule\r\n<\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-initial-vessels\"\r\n><\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-schedule-side current\">\r\n\r\n\r\n<div class=\"nsc-schedule-head\">\r\n    Current Schedule\r\n<\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-current-vessels\"\r\n><\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<!-- ===================================================\r\n     RIGHT COLUMN\r\n=================================================== -->\r\n\r\n<div>\r\n\r\n\r\n<!-- =================================================\r\n     ETA\r\n================================================= -->\r\n\r\n<div class=\"nsc-premium-panel\">\r\n\r\n\r\n<div class=\"nsc-eta-panel\">\r\n\r\n\r\n<div class=\"nsc-eta-label\">\r\n    Estimated Time of Arrival\r\n<\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-eta\"\r\n    class=\"nsc-eta-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-eta-location\"\r\n    class=\"nsc-eta-location\"\r\n>\r\n    Destination \u2014\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =================================================\r\n     DELAY\r\n================================================= -->\r\n\r\n<div class=\"nsc-premium-panel\">\r\n\r\n\r\n<div\r\n    id=\"nsc-delay-card\"\r\n    class=\"nsc-delay-panel\"\r\n>\r\n\r\n\r\n<div class=\"nsc-delay-label\">\r\n    Schedule Performance\r\n<\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-delay-value\"\r\n    class=\"nsc-delay-value\"\r\n>\r\n    0 DAYS\r\n<\/div>\r\n\r\n\r\n<div\r\n    id=\"nsc-delay-description\"\r\n    class=\"nsc-delay-description\"\r\n>\r\n    On Schedule\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =================================================\r\n     DETAILS\r\n================================================= -->\r\n\r\n<div class=\"nsc-premium-panel\">\r\n\r\n\r\n<div class=\"nsc-panel-header\">\r\n\r\n\r\n<div class=\"nsc-panel-title-wrap\">\r\n\r\n<div class=\"nsc-panel-line\"><\/div>\r\n\r\n<div class=\"nsc-panel-title\">\r\n    Shipment Details\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-panel-code\">\r\n    DATA 05\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-details-grid\">\r\n\r\n\r\n<!-- CUSTOMER REMOVED -->\r\n\r\n\r\n<div class=\"nsc-detail\">\r\n\r\n<div class=\"nsc-detail-label\">\r\n    Carrier\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-carrier\"\r\n    class=\"nsc-detail-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-detail\">\r\n\r\n<div class=\"nsc-detail-label\">\r\n    Origin\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-origin\"\r\n    class=\"nsc-detail-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-detail\">\r\n\r\n<div class=\"nsc-detail-label\">\r\n    Destination\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-destination\"\r\n    class=\"nsc-detail-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-detail\">\r\n\r\n<div class=\"nsc-detail-label\">\r\n    POL\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-pol\"\r\n    class=\"nsc-detail-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-detail\">\r\n\r\n<div class=\"nsc-detail-label\">\r\n    POD\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-pod\"\r\n    class=\"nsc-detail-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-detail\">\r\n\r\n<div class=\"nsc-detail-label\">\r\n    Container\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-container\"\r\n    class=\"nsc-detail-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-detail\">\r\n\r\n<div class=\"nsc-detail-label\">\r\n    HBL\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-hbl\"\r\n    class=\"nsc-detail-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-detail\">\r\n\r\n<div class=\"nsc-detail-label\">\r\n    MBL\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-mbl\"\r\n    class=\"nsc-detail-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-detail\">\r\n\r\n<div class=\"nsc-detail-label\">\r\n    Booking\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-booking\"\r\n    class=\"nsc-detail-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-detail\">\r\n\r\n<div class=\"nsc-detail-label\">\r\n    Last Updated\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-updated\"\r\n    class=\"nsc-detail-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-detail\">\r\n\r\n<div class=\"nsc-detail-label\">\r\n    Delay\r\n<\/div>\r\n\r\n<div\r\n    id=\"nsc-detail-delay\"\r\n    class=\"nsc-detail-value\"\r\n>\r\n    \u2014\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"nsc-premium-footer\">\r\n\r\n    Tracking information is provided by\r\n    <strong>PT Nova Sync Continent<\/strong>.\r\n\r\n    Data availability may vary depending on\r\n    carrier and operational updates.\r\n\r\n<\/div>\r\n\r\n\r\n<\/section>\r\n\r\n\r\n<\/main>\r\n\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<!-- =========================================================\r\n     TRACKING ENGINE\r\n     \r\n     LOCKED MASTER ENGINE\r\n     \r\n     DUPLICATE INSTANCE PROTECTION\r\n     + SINGLE EXECUTION LOCK\r\n========================================================= -->\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n\"use strict\";\r\n\r\n\r\n\/* =========================================================\r\n   MASTER ENGINE LOCK\r\n========================================================= *\/\r\n\r\nconst NSC_TRACKING_ENGINE_LOCK =\r\n    \"__NSC_TRACKING_ENGINE_LOCKED_V1__\";\r\n\r\n\r\nconst NSC_TRACKING_APP_SELECTOR =\r\n    '[data-nsc-tracking-app=\"true\"]';\r\n\r\n\r\n\/* =========================================================\r\n   REMOVE DUPLICATE TRACKING INTERFACES\r\n========================================================= *\/\r\n\r\nconst trackingApps =\r\n    Array.from(\r\n        document.querySelectorAll(\r\n            NSC_TRACKING_APP_SELECTOR\r\n        )\r\n    );\r\n\r\n\r\nif (\r\n    !trackingApps.length\r\n) {\r\n\r\n    console.warn(\r\n        \"NSC Tracking: No tracking application found.\"\r\n    );\r\n\r\n    return;\r\n\r\n}\r\n\r\n\r\ntrackingApps\r\n    .slice(1)\r\n    .forEach(\r\n        function (duplicate) {\r\n\r\n            duplicate.remove();\r\n\r\n        }\r\n    );\r\n\r\n\r\nconst trackingApp =\r\n    trackingApps[0];\r\n\r\n\r\n\/* =========================================================\r\n   SINGLE ENGINE EXECUTION LOCK\r\n========================================================= *\/\r\n\r\nif (\r\n    window[NSC_TRACKING_ENGINE_LOCK]\r\n) {\r\n\r\n    return;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   API\r\n========================================================= *\/\r\n\r\nconst NSC_API_URL =\r\n    \"https:\/\/nscontinent.com\/wp-content\/themes\/popularfx\/nsc-vessel-tracking-api.php\";\r\n\r\n\r\n\/* =========================================================\r\n   ELEMENTS\r\n========================================================= *\/\r\n\r\nconst form =\r\n    document.getElementById(\r\n        \"nsc-tracking-form\"\r\n    );\r\n\r\nconst type =\r\n    document.getElementById(\r\n        \"nsc-tracking-type\"\r\n    );\r\n\r\nconst input =\r\n    document.getElementById(\r\n        \"nsc-tracking-number\"\r\n    );\r\n\r\nconst button =\r\n    document.getElementById(\r\n        \"nsc-track-button\"\r\n    );\r\n\r\nconst loading =\r\n    document.getElementById(\r\n        \"nsc-track-loading\"\r\n    );\r\n\r\nconst result =\r\n    document.getElementById(\r\n        \"nsc-track-result\"\r\n    );\r\n\r\nconst statusMessage =\r\n    document.getElementById(\r\n        \"nsc-track-status\"\r\n    );\r\n\r\n\r\nif (\r\n    !form ||\r\n    !type ||\r\n    !input ||\r\n    !button ||\r\n    !loading ||\r\n    !result ||\r\n    !statusMessage\r\n) {\r\n\r\n    console.error(\r\n        \"NSC Tracking: Required elements missing.\"\r\n    );\r\n\r\n    return;\r\n\r\n}\r\n\r\n\r\nwindow[NSC_TRACKING_ENGINE_LOCK] =\r\n    true;\r\n\r\n\r\n\/* =========================================================\r\n   HELPERS\r\n========================================================= *\/\r\n\r\nfunction cleanText(value) {\r\n\r\n    if (\r\n        value === null ||\r\n        value === undefined\r\n    ) {\r\n\r\n        return \"\";\r\n\r\n    }\r\n\r\n    return String(value)\r\n        .replace(\/\\s+\/g,\" \")\r\n        .trim();\r\n\r\n}\r\n\r\n\r\nfunction escapeHTML(value) {\r\n\r\n    if (\r\n        value === null ||\r\n        value === undefined\r\n    ) {\r\n\r\n        return \"\u2014\";\r\n\r\n    }\r\n\r\n    return String(value)\r\n        .replace(\/&\/g,\"&amp;\")\r\n        .replace(\/<\/g,\"&lt;\")\r\n        .replace(\/>\/g,\"&gt;\")\r\n        .replace(\/\"\/g,\"&quot;\")\r\n        .replace(\/'\/g,\"&#039;\");\r\n\r\n}\r\n\r\n\r\nfunction parseDate(value) {\r\n\r\n    if (!value) {\r\n\r\n        return null;\r\n\r\n    }\r\n\r\n    const d =\r\n        new Date(value);\r\n\r\n    if (\r\n        Number.isNaN(\r\n            d.getTime()\r\n        )\r\n    ) {\r\n\r\n        return null;\r\n\r\n    }\r\n\r\n    return d;\r\n\r\n}\r\n\r\n\r\nfunction formatDate(value) {\r\n\r\n    const d =\r\n        parseDate(value);\r\n\r\n    if (!d) {\r\n\r\n        return \"\u2014\";\r\n\r\n    }\r\n\r\n    return d.toLocaleDateString(\r\n        \"en-GB\",\r\n        {\r\n            day:\"2-digit\",\r\n            month:\"short\",\r\n            year:\"numeric\"\r\n        }\r\n    );\r\n\r\n}\r\n\r\n\r\nfunction formatDateTime(value) {\r\n\r\n    const d =\r\n        parseDate(value);\r\n\r\n    if (!d) {\r\n\r\n        return \"\u2014\";\r\n\r\n    }\r\n\r\n    return d.toLocaleString(\r\n        \"en-GB\",\r\n        {\r\n            day:\"2-digit\",\r\n            month:\"short\",\r\n            year:\"numeric\",\r\n            hour:\"2-digit\",\r\n            minute:\"2-digit\"\r\n        }\r\n    );\r\n\r\n}\r\n\r\n\r\nfunction isPast(value) {\r\n\r\n    const d =\r\n        parseDate(value);\r\n\r\n    return !!(\r\n        d &&\r\n        d <= new Date()\r\n    );\r\n\r\n}\r\n\r\n\r\nfunction legValue(\r\n    leg,\r\n    updatedKey,\r\n    initialKey\r\n) {\r\n\r\n    if (!leg) {\r\n\r\n        return null;\r\n\r\n    }\r\n\r\n    return (\r\n        leg[updatedKey] ||\r\n        leg[initialKey] ||\r\n        null\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MESSAGE\r\n========================================================= *\/\r\n\r\nfunction showMessage(\r\n    text,\r\n    kind\r\n) {\r\n\r\n    statusMessage.textContent =\r\n        text;\r\n\r\n    statusMessage.className =\r\n        \"nsc-premium-message \" +\r\n        kind;\r\n\r\n}\r\n\r\n\r\nfunction hideMessage() {\r\n\r\n    statusMessage.textContent =\r\n        \"\";\r\n\r\n    statusMessage.className =\r\n        \"nsc-premium-message\";\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   AUTO DETECTION\r\n========================================================= *\/\r\n\r\nfunction normalizeReference(\r\n    value\r\n) {\r\n\r\n    return cleanText(\r\n        value\r\n    )\r\n    .toUpperCase()\r\n    .replace(\r\n        \/[\\s\\-_\/\\.]\/g,\r\n        \"\"\r\n    );\r\n\r\n}\r\n\r\n\r\nfunction detectType(\r\n    value\r\n) {\r\n\r\n    const ref =\r\n        normalizeReference(\r\n            value\r\n        );\r\n\r\n\r\n    if (!ref) {\r\n\r\n        return null;\r\n\r\n    }\r\n\r\n\r\n    \/* CONTAINER *\/\r\n\r\n    if (\r\n        \/^[A-Z]{4}\\d{7}$\/.test(\r\n            ref\r\n        )\r\n    ) {\r\n\r\n        return \"container\";\r\n\r\n    }\r\n\r\n\r\n    \/* BOOKING *\/\r\n\r\n    if (\r\n        \/^NSCI[A-Z0-9]+$\/.test(\r\n            ref\r\n        )\r\n    ) {\r\n\r\n        return \"booking\";\r\n\r\n    }\r\n\r\n\r\n    \/* HBL *\/\r\n\r\n    if (\r\n        \/^BL[A-Z0-9]+$\/.test(\r\n            ref\r\n        )\r\n    ) {\r\n\r\n        return \"hbl\";\r\n\r\n    }\r\n\r\n\r\n    if (\r\n        \/^HBL[A-Z0-9]+$\/.test(\r\n            ref\r\n        )\r\n    ) {\r\n\r\n        return \"hbl\";\r\n\r\n    }\r\n\r\n\r\n    \/* COMMON MBL *\/\r\n\r\n    const mblPrefixes = [\r\n\r\n        \"ONEY\",\r\n        \"COSU\",\r\n        \"CMDU\",\r\n        \"HLCU\",\r\n        \"MAEU\",\r\n        \"MSCU\",\r\n        \"OOLU\",\r\n        \"EGLV\",\r\n        \"YMLU\",\r\n        \"SMLU\",\r\n        \"HDMU\",\r\n        \"SEAU\",\r\n        \"TRHU\",\r\n        \"WHLU\",\r\n        \"CAIU\",\r\n        \"CMAU\",\r\n        \"SUDU\",\r\n        \"TCKU\",\r\n        \"KKLU\",\r\n        \"KMTC\",\r\n        \"ZIMU\"\r\n\r\n    ];\r\n\r\n\r\n    for (\r\n        let i=0;\r\n        i<mblPrefixes.length;\r\n        i++\r\n    ) {\r\n\r\n        if (\r\n            ref.indexOf(\r\n                mblPrefixes[i]\r\n            ) === 0\r\n        ) {\r\n\r\n            return \"mbl\";\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    \/* GENERIC MBL *\/\r\n\r\n    if (\r\n        \/^[A-Z]{4}[A-Z0-9]{6,}$\/.test(\r\n            ref\r\n        )\r\n    ) {\r\n\r\n        return \"mbl\";\r\n\r\n    }\r\n\r\n\r\n    return null;\r\n\r\n}\r\n\r\n\r\nfunction updatePlaceholder(\r\n    selectedType\r\n) {\r\n\r\n    const map = {\r\n\r\n        container:\r\n            \"e.g. ONEU5276657\",\r\n\r\n        hbl:\r\n            \"e.g. BL-202607-0005\",\r\n\r\n        mbl:\r\n            \"e.g. ONEYJKTFA1938900\",\r\n\r\n        booking:\r\n            \"e.g. NSCI26071358842\"\r\n\r\n    };\r\n\r\n\r\n    input.placeholder =\r\n        map[\r\n            selectedType\r\n        ] ||\r\n        \"Enter tracking reference\";\r\n\r\n}\r\n\r\n\r\nfunction autoDetect() {\r\n\r\n    const detected =\r\n        detectType(\r\n            input.value\r\n        );\r\n\r\n\r\n    if (\r\n        detected\r\n    ) {\r\n\r\n        type.value =\r\n            detected;\r\n\r\n        updatePlaceholder(\r\n            detected\r\n        );\r\n\r\n    }\r\n\r\n\r\n    return detected;\r\n\r\n}\r\n\r\n\r\ntype.addEventListener(\r\n    \"change\",\r\n    function () {\r\n\r\n        updatePlaceholder(\r\n            type.value\r\n        );\r\n\r\n    }\r\n);\r\n\r\n\r\ninput.addEventListener(\r\n    \"input\",\r\n    function () {\r\n\r\n        autoDetect();\r\n\r\n    }\r\n);\r\n\r\n\r\n\/* =========================================================\r\n   API\r\n========================================================= *\/\r\n\r\nasync function getTrackingData(\r\n    search\r\n) {\r\n\r\n    const url =\r\n        new URL(\r\n            NSC_API_URL\r\n        );\r\n\r\n\r\n    url.searchParams.set(\r\n        \"search\",\r\n        search\r\n    );\r\n\r\n\r\n    const response =\r\n        await fetch(\r\n            url.toString(),\r\n            {\r\n                method:\r\n                    \"GET\",\r\n\r\n                headers:\r\n                    {\r\n                        \"Accept\":\r\n                            \"application\/json\"\r\n                    },\r\n\r\n                cache:\r\n                    \"no-store\"\r\n            }\r\n        );\r\n\r\n\r\n    const raw =\r\n        await response.text();\r\n\r\n\r\n    let data;\r\n\r\n\r\n    try {\r\n\r\n        data =\r\n            JSON.parse(\r\n                raw\r\n            );\r\n\r\n    }\r\n\r\n    catch(error) {\r\n\r\n        console.error(\r\n            \"NSC API RAW RESPONSE:\",\r\n            raw\r\n        );\r\n\r\n        throw new Error(\r\n            \"Tracking API returned invalid JSON.\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    if (\r\n        !response.ok\r\n    ) {\r\n\r\n        throw new Error(\r\n            data.message ||\r\n            (\r\n                \"Tracking API returned HTTP \" +\r\n                response.status\r\n            )\r\n        );\r\n\r\n    }\r\n\r\n\r\n    return data;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   GET SHIPMENT\r\n========================================================= *\/\r\n\r\nfunction getShipment(\r\n    response\r\n) {\r\n\r\n    if (\r\n        response &&\r\n        Array.isArray(\r\n            response.data\r\n        ) &&\r\n        response.data.length\r\n    ) {\r\n\r\n        return response.data[0];\r\n\r\n    }\r\n\r\n    return null;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TIMELINE\r\n========================================================= *\/\r\n\r\nfunction buildTimeline(\r\n    shipment\r\n) {\r\n\r\n    const events = [];\r\n\r\n\r\n    const legs =\r\n        Array.isArray(\r\n            shipment.legs\r\n        )\r\n            ? shipment.legs\r\n            : [];\r\n\r\n\r\n    if (\r\n        !legs.length\r\n    ) {\r\n\r\n        return events;\r\n\r\n    }\r\n\r\n\r\n    const first =\r\n        legs[0];\r\n\r\n\r\n    events.push({\r\n\r\n        location:\r\n            shipment.polName ||\r\n            shipment.pol ||\r\n            \"Origin\",\r\n\r\n        date:\r\n            legValue(\r\n                first,\r\n                \"updatedEtd\",\r\n                \"initialEtd\"\r\n            ),\r\n\r\n        type:\r\n            \"departure\",\r\n\r\n        vessel:\r\n            legValue(\r\n                first,\r\n                \"updatedVesselName\",\r\n                \"initialVesselName\"\r\n            ),\r\n\r\n        voyage:\r\n            legValue(\r\n                first,\r\n                \"updatedVoyageNumber\",\r\n                \"initialVoyageNumber\"\r\n            )\r\n\r\n    });\r\n\r\n\r\n    for (\r\n        let i=0;\r\n        i<legs.length;\r\n        i++\r\n    ) {\r\n\r\n        const leg =\r\n            legs[i];\r\n\r\n\r\n        const tsPort =\r\n            leg.updatedTsPortName ||\r\n            leg.initialTsPortName ||\r\n            \"\";\r\n\r\n\r\n        const eta =\r\n            legValue(\r\n                leg,\r\n                \"updatedEta\",\r\n                \"initialEta\"\r\n            );\r\n\r\n\r\n        if (\r\n            tsPort &&\r\n            eta\r\n        ) {\r\n\r\n            events.push({\r\n\r\n                location:\r\n                    tsPort,\r\n\r\n                date:\r\n                    eta,\r\n\r\n                type:\r\n                    \"arrival\",\r\n\r\n                vessel:\r\n                    legValue(\r\n                        leg,\r\n                        \"updatedVesselName\",\r\n                        \"initialVesselName\"\r\n                    ),\r\n\r\n                voyage:\r\n                    legValue(\r\n                        leg,\r\n                        \"updatedVoyageNumber\",\r\n                        \"initialVoyageNumber\"\r\n                    )\r\n\r\n            });\r\n\r\n\r\n            const next =\r\n                legs[i+1];\r\n\r\n\r\n            if (\r\n                next\r\n            ) {\r\n\r\n                const nextEtd =\r\n                    legValue(\r\n                        next,\r\n                        \"updatedEtd\",\r\n                        \"initialEtd\"\r\n                    );\r\n\r\n\r\n                if (\r\n                    nextEtd\r\n                ) {\r\n\r\n                    events.push({\r\n\r\n                        location:\r\n                            tsPort,\r\n\r\n                        date:\r\n                            nextEtd,\r\n\r\n                        type:\r\n                            \"departure\",\r\n\r\n                        vessel:\r\n                            legValue(\r\n                                next,\r\n                                \"updatedVesselName\",\r\n                                \"initialVesselName\"\r\n                            ),\r\n\r\n                        voyage:\r\n                            legValue(\r\n                                next,\r\n                                \"updatedVoyageNumber\",\r\n                                \"initialVoyageNumber\"\r\n                            )\r\n\r\n                    });\r\n\r\n                }\r\n\r\n            }\r\n\r\n        }\r\n\r\n    }\r\n\r\n\r\n    const last =\r\n        legs[\r\n            legs.length-1\r\n        ];\r\n\r\n\r\n    events.push({\r\n\r\n        location:\r\n            shipment.podName ||\r\n            shipment.pod ||\r\n            \"Destination\",\r\n\r\n        date:\r\n            legValue(\r\n                last,\r\n                \"updatedEta\",\r\n                \"initialEta\"\r\n            ),\r\n\r\n        type:\r\n            \"arrival\",\r\n\r\n        vessel:\r\n            legValue(\r\n                last,\r\n                \"updatedVesselName\",\r\n                \"initialVesselName\"\r\n            ),\r\n\r\n        voyage:\r\n            legValue(\r\n                last,\r\n                \"updatedVoyageNumber\",\r\n                \"initialVoyageNumber\"\r\n            )\r\n\r\n    });\r\n\r\n\r\n    return events;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   JOURNEY\r\n========================================================= *\/\r\n\r\nfunction renderJourney(\r\n    shipment\r\n) {\r\n\r\n    const items =\r\n        document.getElementById(\r\n            \"nsc-route-items\"\r\n        );\r\n\r\n\r\n    const track =\r\n        document.getElementById(\r\n            \"nsc-journey-fill\"\r\n        );\r\n\r\n\r\n    const events =\r\n        buildTimeline(\r\n            shipment\r\n        );\r\n\r\n\r\n    if (\r\n        !events.length\r\n    ) {\r\n\r\n        items.innerHTML =\r\n            \"\";\r\n\r\n        track.style.width =\r\n            \"0%\";\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    const route = [];\r\n\r\n\r\n    events.forEach(\r\n        function(event) {\r\n\r\n            const previous =\r\n                route[\r\n                    route.length-1\r\n                ];\r\n\r\n\r\n            if (\r\n                previous &&\r\n                cleanText(\r\n                    previous.location\r\n                ).toUpperCase() ===\r\n                cleanText(\r\n                    event.location\r\n                ).toUpperCase()\r\n            ) {\r\n\r\n                if (\r\n                    isPast(\r\n                        event.date\r\n                    )\r\n                ) {\r\n\r\n                    previous.date =\r\n                        event.date;\r\n\r\n                }\r\n\r\n                return;\r\n\r\n            }\r\n\r\n\r\n            route.push({\r\n\r\n                location:\r\n                    event.location,\r\n\r\n                date:\r\n                    event.date,\r\n\r\n                completed:\r\n                    isPast(\r\n                        event.date\r\n                    )\r\n\r\n            });\r\n\r\n        }\r\n    );\r\n\r\n\r\n    const visible =\r\n        route.slice(\r\n            0,\r\n            4\r\n        );\r\n\r\n\r\n    const completed =\r\n        visible.filter(\r\n            function(item) {\r\n\r\n                return item.completed;\r\n\r\n            }\r\n        ).length;\r\n\r\n\r\n    const progress =\r\n        visible.length > 1\r\n\r\n            ? (\r\n                Math.max(\r\n                    0,\r\n                    completed-1\r\n                )\r\n                \/\r\n                (\r\n                    visible.length-1\r\n                )\r\n            ) * 100\r\n\r\n            : 0;\r\n\r\n\r\n    track.style.width =\r\n        Math.max(\r\n            0,\r\n            Math.min(\r\n                100,\r\n                progress\r\n            )\r\n        ) +\r\n        \"%\";\r\n\r\n\r\n    items.innerHTML =\r\n        visible.map(\r\n            function(item) {\r\n\r\n                return `\r\n\r\n                    <div\r\n                        class=\"nsc-journey-item ${\r\n                            item.completed\r\n                                ? \"\"\r\n                                : \"future\"\r\n                        }\"\r\n                    >\r\n\r\n                        <div\r\n                            class=\"nsc-journey-point\"\r\n                        ><\/div>\r\n\r\n                        <div>\r\n\r\n                            <div\r\n                                class=\"nsc-journey-port\"\r\n                            >\r\n                                ${escapeHTML(\r\n                                    item.location\r\n                                )}\r\n                            <\/div>\r\n\r\n                            <div\r\n                                class=\"nsc-journey-date\"\r\n                            >\r\n                                ${escapeHTML(\r\n                                    formatDate(\r\n                                        item.date\r\n                                    )\r\n                                )}\r\n                            <\/div>\r\n\r\n                            <div\r\n                                class=\"nsc-journey-state\"\r\n                            >\r\n                                ${\r\n                                    item.completed\r\n                                        ? \"Confirmed\"\r\n                                        : \"Upcoming\"\r\n                                }\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                `;\r\n\r\n            }\r\n        )\r\n        .join(\"\");\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   EVENTS\r\n========================================================= *\/\r\n\r\nfunction renderEvents(\r\n    shipment\r\n) {\r\n\r\n    const container =\r\n        document.getElementById(\r\n            \"nsc-events\"\r\n        );\r\n\r\n\r\n    const completedBox =\r\n        document.getElementById(\r\n            \"nsc-completed-box\"\r\n        );\r\n\r\n\r\n    const events =\r\n        buildTimeline(\r\n            shipment\r\n        );\r\n\r\n\r\n    if (\r\n        !events.length\r\n    ) {\r\n\r\n        container.innerHTML =\r\n            \"<div style='color:#7b8890;font-size:12px;'>No shipment events available.<\/div>\";\r\n\r\n        completedBox.style.display =\r\n            \"none\";\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    let finalArrived =\r\n        false;\r\n\r\n\r\n    container.innerHTML =\r\n        events.map(\r\n            function(\r\n                event,\r\n                index\r\n            ) {\r\n\r\n                const completed =\r\n                    isPast(\r\n                        event.date\r\n                    );\r\n\r\n\r\n                if (\r\n                    index ===\r\n                    events.length-1 &&\r\n                    completed\r\n                ) {\r\n\r\n                    finalArrived =\r\n                        true;\r\n\r\n                }\r\n\r\n\r\n                const state =\r\n                    completed\r\n                        ? \"completed\"\r\n                        : \"scheduled\";\r\n\r\n\r\n                const status =\r\n                    completed\r\n                        ? (\r\n                            event.type ===\r\n                            \"departure\"\r\n                                ? \"Departed\"\r\n                                : \"Arrived\"\r\n                        )\r\n                        : \"Scheduled\";\r\n\r\n\r\n                return `\r\n\r\n                    <div\r\n                        class=\"nsc-event ${state}\"\r\n                    >\r\n\r\n                        <div\r\n                            class=\"nsc-event-dot\"\r\n                        ><\/div>\r\n\r\n                        <div>\r\n\r\n                            <div\r\n                                class=\"nsc-event-title\"\r\n                            >\r\n                                ${escapeHTML(\r\n                                    event.location\r\n                                )}\r\n                            <\/div>\r\n\r\n                            <div\r\n                                class=\"nsc-event-meta\"\r\n                            >\r\n\r\n                                ${escapeHTML(\r\n                                    formatDate(\r\n                                        event.date\r\n                                    )\r\n                                )}\r\n\r\n                                ${\r\n                                    event.vessel\r\n                                        ? \" \u2022 \" +\r\n                                          escapeHTML(\r\n                                              event.vessel\r\n                                          )\r\n                                        : \"\"\r\n                                }\r\n\r\n                                ${\r\n                                    event.voyage\r\n                                        ? \" \/ \" +\r\n                                          escapeHTML(\r\n                                              event.voyage\r\n                                          )\r\n                                        : \"\"\r\n                                }\r\n\r\n                            <\/div>\r\n\r\n                            <div\r\n                                class=\"nsc-event-state ${state}\"\r\n                            >\r\n                                ${status}\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n                    <\/div>\r\n\r\n                `;\r\n\r\n            }\r\n        )\r\n        .join(\"\");\r\n\r\n\r\n    completedBox.style.display =\r\n        finalArrived\r\n            ? \"block\"\r\n            : \"none\";\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   SCHEDULE\r\n========================================================= *\/\r\n\r\nfunction buildSchedule(\r\n    shipment,\r\n    mode\r\n) {\r\n\r\n    const legs =\r\n        Array.isArray(\r\n            shipment.legs\r\n        )\r\n            ? shipment.legs\r\n            : [];\r\n\r\n\r\n    const resultRows = [];\r\n\r\n\r\n    for (\r\n        let i=0;\r\n        i<legs.length;\r\n        i++\r\n    ) {\r\n\r\n        const leg =\r\n            legs[i];\r\n\r\n\r\n        const vessel =\r\n            mode === \"initial\"\r\n\r\n                ? leg.initialVesselName\r\n\r\n                : (\r\n                    leg.updatedVesselName ||\r\n                    leg.initialVesselName\r\n                );\r\n\r\n\r\n        const voyage =\r\n            mode === \"initial\"\r\n\r\n                ? leg.initialVoyageNumber\r\n\r\n                : (\r\n                    leg.updatedVoyageNumber ||\r\n                    leg.initialVoyageNumber\r\n                );\r\n\r\n\r\n        const etd =\r\n            mode === \"initial\"\r\n\r\n                ? leg.initialEtd\r\n\r\n                : (\r\n                    leg.updatedEtd ||\r\n                    leg.initialEtd\r\n                );\r\n\r\n\r\n        const eta =\r\n            mode === \"initial\"\r\n\r\n                ? leg.initialEta\r\n\r\n                : (\r\n                    leg.updatedEta ||\r\n                    leg.initialEta\r\n                );\r\n\r\n\r\n        if (\r\n            !vessel &&\r\n            !voyage\r\n        ) {\r\n\r\n            continue;\r\n\r\n        }\r\n\r\n\r\n        let etdPort;\r\n\r\n\r\n        if (\r\n            i === 0\r\n        ) {\r\n\r\n            etdPort =\r\n                shipment.polName ||\r\n                shipment.pol ||\r\n                \"POL\";\r\n\r\n        }\r\n\r\n        else {\r\n\r\n            const previous =\r\n                legs[\r\n                    i-1\r\n                ];\r\n\r\n\r\n            etdPort =\r\n                mode === \"initial\"\r\n\r\n                    ? (\r\n                        previous.initialTsPortName ||\r\n                        \"\"\r\n                    )\r\n\r\n                    : (\r\n                        previous.updatedTsPortName ||\r\n                        previous.initialTsPortName ||\r\n                        \"\"\r\n                    );\r\n\r\n\r\n            if (\r\n                !etdPort\r\n            ) {\r\n\r\n                etdPort =\r\n                    shipment.polName ||\r\n                    shipment.pol ||\r\n                    \"Origin\";\r\n\r\n            }\r\n\r\n        }\r\n\r\n\r\n        const tsPort =\r\n            mode === \"initial\"\r\n\r\n                ? (\r\n                    leg.initialTsPortName ||\r\n                    \"\"\r\n                )\r\n\r\n                : (\r\n                    leg.updatedTsPortName ||\r\n                    leg.initialTsPortName ||\r\n                    \"\"\r\n                );\r\n\r\n\r\n        const etaPort =\r\n            tsPort &&\r\n            i < legs.length-1\r\n\r\n                ? tsPort\r\n\r\n                : (\r\n                    shipment.podName ||\r\n                    shipment.pod ||\r\n                    \"POD\"\r\n                );\r\n\r\n\r\n        resultRows.push({\r\n\r\n            vessel:\r\n                vessel || \"\u2014\",\r\n\r\n            voyage:\r\n                voyage || \"\u2014\",\r\n\r\n            etd:\r\n                etd,\r\n\r\n            eta:\r\n                eta,\r\n\r\n            etdPort:\r\n                etdPort,\r\n\r\n            etaPort:\r\n                etaPort\r\n\r\n        });\r\n\r\n    }\r\n\r\n\r\n    return resultRows;\r\n\r\n}\r\n\r\n\r\nfunction getScheduleStatus(\r\n    etd,\r\n    eta\r\n) {\r\n\r\n    const etaDate =\r\n        parseDate(\r\n            eta\r\n        );\r\n\r\n\r\n    const etdDate =\r\n        parseDate(\r\n            etd\r\n        );\r\n\r\n\r\n    if (\r\n        etaDate &&\r\n        etaDate <= new Date()\r\n    ) {\r\n\r\n        return \"arrived\";\r\n\r\n    }\r\n\r\n\r\n    if (\r\n        etdDate &&\r\n        etdDate <= new Date()\r\n    ) {\r\n\r\n        return \"departed\";\r\n\r\n    }\r\n\r\n\r\n    return \"scheduled\";\r\n\r\n}\r\n\r\n\r\nfunction renderVessel(\r\n    item\r\n) {\r\n\r\n    const state =\r\n        getScheduleStatus(\r\n            item.etd,\r\n            item.eta\r\n        );\r\n\r\n\r\n    const text =\r\n        state === \"arrived\"\r\n\r\n            ? \"Arrived\"\r\n\r\n            : (\r\n                state === \"departed\"\r\n                    ? \"Departed\"\r\n                    : \"Scheduled\"\r\n            );\r\n\r\n\r\n    return `\r\n\r\n        <div\r\n            class=\"nsc-vessel\"\r\n        >\r\n\r\n            <div\r\n                class=\"nsc-vessel-name\"\r\n            >\r\n                ${escapeHTML(\r\n                    item.vessel\r\n                )}\r\n            <\/div>\r\n\r\n\r\n            <div\r\n                class=\"nsc-vessel-voyage\"\r\n            >\r\n                Voyage\r\n                ${escapeHTML(\r\n                    item.voyage\r\n                )}\r\n            <\/div>\r\n\r\n\r\n            <div\r\n                class=\"nsc-vessel-route\"\r\n            >\r\n\r\n                <div\r\n                    class=\"nsc-vessel-port-row\"\r\n                >\r\n\r\n                    <div\r\n                        class=\"nsc-vessel-port-label\"\r\n                    >\r\n                        ETD\r\n                    <\/div>\r\n\r\n\r\n                    <div\r\n                        class=\"nsc-vessel-port\"\r\n                    >\r\n                        ${escapeHTML(\r\n                            item.etdPort\r\n                        )}\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                    class=\"nsc-vessel-date\"\r\n                >\r\n                    ${escapeHTML(\r\n                        formatDate(\r\n                            item.etd\r\n                        )\r\n                    )}\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                    class=\"nsc-vessel-port-row\"\r\n                >\r\n\r\n                    <div\r\n                        class=\"nsc-vessel-port-label\"\r\n                    >\r\n                        ETA\r\n                    <\/div>\r\n\r\n\r\n                    <div\r\n                        class=\"nsc-vessel-port\"\r\n                    >\r\n                        ${escapeHTML(\r\n                            item.etaPort\r\n                        )}\r\n                    <\/div>\r\n\r\n                <\/div>\r\n\r\n\r\n                <div\r\n                    class=\"nsc-vessel-date\"\r\n                >\r\n                    ${escapeHTML(\r\n                        formatDate(\r\n                            item.eta\r\n                        )\r\n                    )}\r\n                <\/div>\r\n\r\n\r\n            <\/div>\r\n\r\n\r\n            <div\r\n                class=\"nsc-vessel-status ${state}\"\r\n            >\r\n                ${text}\r\n            <\/div>\r\n\r\n        <\/div>\r\n\r\n    `;\r\n\r\n}\r\n\r\n\r\nfunction renderSchedules(\r\n    shipment\r\n) {\r\n\r\n    const initial =\r\n        document.getElementById(\r\n            \"nsc-initial-vessels\"\r\n        );\r\n\r\n\r\n    const current =\r\n        document.getElementById(\r\n            \"nsc-current-vessels\"\r\n        );\r\n\r\n\r\n    const initialRows =\r\n        buildSchedule(\r\n            shipment,\r\n            \"initial\"\r\n        );\r\n\r\n\r\n    const currentRows =\r\n        buildSchedule(\r\n            shipment,\r\n            \"current\"\r\n        );\r\n\r\n\r\n    initial.innerHTML =\r\n        initialRows.length\r\n\r\n            ? initialRows\r\n                .map(\r\n                    renderVessel\r\n                )\r\n                .join(\"\")\r\n\r\n            : `\r\n\r\n                <div\r\n                    style=\"\r\n                        padding:20px;\r\n                        color:#7b8890;\r\n                        font-size:12px;\r\n                    \"\r\n                >\r\n                    No initial schedule available.\r\n                <\/div>\r\n\r\n            `;\r\n\r\n\r\n    current.innerHTML =\r\n        currentRows.length\r\n\r\n            ? currentRows\r\n                .map(\r\n                    renderVessel\r\n                )\r\n                .join(\"\")\r\n\r\n            : `\r\n\r\n                <div\r\n                    style=\"\r\n                        padding:20px;\r\n                        color:#7b8890;\r\n                        font-size:12px;\r\n                    \"\r\n                >\r\n                    No current schedule available.\r\n                <\/div>\r\n\r\n            `;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   VESSEL CHANGES\r\n========================================================= *\/\r\n\r\nfunction renderChanges(\r\n    shipment\r\n) {\r\n\r\n    const section =\r\n        document.getElementById(\r\n            \"nsc-vessel-change-card\"\r\n        );\r\n\r\n\r\n    const list =\r\n        document.getElementById(\r\n            \"nsc-vessel-change-list\"\r\n        );\r\n\r\n\r\n    const changes =\r\n        Array.isArray(\r\n            shipment.vesselChanges\r\n        )\r\n            ? shipment.vesselChanges\r\n            : [];\r\n\r\n\r\n    if (\r\n        !changes.length\r\n    ) {\r\n\r\n        section.style.display =\r\n            \"none\";\r\n\r\n        list.innerHTML =\r\n            \"\";\r\n\r\n        return;\r\n\r\n    }\r\n\r\n\r\n    section.style.display =\r\n        \"block\";\r\n\r\n\r\n    list.innerHTML =\r\n        changes.map(\r\n            function(\r\n                change,\r\n                index\r\n            ) {\r\n\r\n                const oldVessel =\r\n                    cleanText(\r\n                        change.oldVessel\r\n                    ) ||\r\n                    \"\u2014\";\r\n\r\n\r\n                const oldVoyage =\r\n                    cleanText(\r\n                        change.oldVoyage\r\n                    ) ||\r\n                    \"\u2014\";\r\n\r\n\r\n                const newVessel =\r\n                    cleanText(\r\n                        change.newVessel\r\n                    ) ||\r\n                    \"\u2014\";\r\n\r\n\r\n                const newVoyage =\r\n                    cleanText(\r\n                        change.newVoyage\r\n                    ) ||\r\n                    \"\u2014\";\r\n\r\n\r\n                const reason =\r\n                    cleanText(\r\n                        change.reason ||\r\n                        shipment.reason ||\r\n                        \"\"\r\n                    );\r\n\r\n\r\n                const delay =\r\n                    Number(\r\n                        change.delayDays !==\r\n                        undefined\r\n\r\n                            ? change.delayDays\r\n\r\n                            : (\r\n                                shipment.delayDays ||\r\n                                0\r\n                            )\r\n                    );\r\n\r\n\r\n                const oldETD =\r\n                    change.oldEtdFormatted ||\r\n                    formatDate(\r\n                        change.oldEtd\r\n                    ) ||\r\n                    \"\u2014\";\r\n\r\n\r\n                const newETD =\r\n                    change.newEtdFormatted ||\r\n                    formatDate(\r\n                        change.newEtd\r\n                    ) ||\r\n                    \"\u2014\";\r\n\r\n\r\n                const oldETA =\r\n                    change.oldEtaFormatted ||\r\n                    formatDate(\r\n                        change.oldEta\r\n                    ) ||\r\n                    \"\u2014\";\r\n\r\n\r\n                const newETA =\r\n                    change.newEtaFormatted ||\r\n                    formatDate(\r\n                        change.newEta\r\n                    ) ||\r\n                    \"\u2014\";\r\n\r\n\r\n                const changeTitle =\r\n                    change.title ||\r\n                    (\r\n                        change.type ===\r\n                        \"SCHEDULE_CHANGE\"\r\n\r\n                            ? \"Schedule Change Detected\"\r\n\r\n                            : (\r\n                                change.type ===\r\n                                \"TRANSSHIPMENT_CHANGE\"\r\n\r\n                                    ? \"Transshipment Change Detected\"\r\n\r\n                                    : \"Vessel Change \/ Rollover Detected\"\r\n                            )\r\n                    );\r\n\r\n\r\n                return `\r\n\r\n                    <div\r\n                        class=\"nsc-change-card\"\r\n                    >\r\n\r\n                        <div\r\n                            class=\"nsc-change-top\"\r\n                        >\r\n\r\n                            <div\r\n                                class=\"nsc-change-title\"\r\n                            >\r\n                                ${escapeHTML(\r\n                                    changeTitle\r\n                                )}\r\n                            <\/div>\r\n\r\n\r\n                            <div\r\n                                class=\"nsc-change-count\"\r\n                            >\r\n                                CHANGE #${index + 1}\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        <div\r\n                            class=\"nsc-change-route\"\r\n                        >\r\n\r\n                            <div\r\n                                class=\"nsc-change-side\"\r\n                            >\r\n\r\n                                <div\r\n                                    class=\"nsc-change-side-label\"\r\n                                >\r\n                                    Previous Vessel\r\n                                <\/div>\r\n\r\n\r\n                                <div\r\n                                    class=\"nsc-change-vessel-name\"\r\n                                >\r\n                                    ${escapeHTML(\r\n                                        oldVessel\r\n                                    )}\r\n                                <\/div>\r\n\r\n\r\n                                <div\r\n                                    class=\"nsc-change-voyage\"\r\n                                >\r\n                                    Voyage\r\n                                    ${escapeHTML(\r\n                                        oldVoyage\r\n                                    )}\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div\r\n                                class=\"nsc-change-arrow\"\r\n                            >\r\n                                \u2192\r\n                            <\/div>\r\n\r\n\r\n                            <div\r\n                                class=\"nsc-change-side\"\r\n                            >\r\n\r\n                                <div\r\n                                    class=\"nsc-change-side-label\"\r\n                                >\r\n                                    Current Vessel\r\n                                <\/div>\r\n\r\n\r\n                                <div\r\n                                    class=\"nsc-change-vessel-name\"\r\n                                >\r\n                                    ${escapeHTML(\r\n                                        newVessel\r\n                                    )}\r\n                                <\/div>\r\n\r\n\r\n                                <div\r\n                                    class=\"nsc-change-voyage\"\r\n                                >\r\n                                    Voyage\r\n                                    ${escapeHTML(\r\n                                        newVoyage\r\n                                    )}\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        ${\r\n                            reason\r\n                                ? `\r\n\r\n                                    <div\r\n                                        class=\"nsc-change-reason\"\r\n                                    >\r\n\r\n                                        <strong>\r\n                                            Reason:\r\n                                        <\/strong>\r\n\r\n                                        ${escapeHTML(\r\n                                            reason\r\n                                        )}\r\n\r\n                                    <\/div>\r\n\r\n                                `\r\n                                : \"\"\r\n                        }\r\n\r\n\r\n                        <div\r\n                            class=\"nsc-change-dates\"\r\n                        >\r\n\r\n                            <div\r\n                                class=\"nsc-change-date-box\"\r\n                            >\r\n\r\n                                <div\r\n                                    class=\"nsc-change-date-label\"\r\n                                >\r\n                                    ETD\r\n                                <\/div>\r\n\r\n\r\n                                <div\r\n                                    class=\"nsc-change-date-value\"\r\n                                >\r\n\r\n                                    ${escapeHTML(\r\n                                        oldETD\r\n                                    )}\r\n\r\n                                    \u2192\r\n\r\n                                    ${escapeHTML(\r\n                                        newETD\r\n                                    )}\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n\r\n                            <div\r\n                                class=\"nsc-change-date-box\"\r\n                            >\r\n\r\n                                <div\r\n                                    class=\"nsc-change-date-label\"\r\n                                >\r\n                                    ETA\r\n                                <\/div>\r\n\r\n\r\n                                <div\r\n                                    class=\"nsc-change-date-value\"\r\n                                >\r\n\r\n                                    ${escapeHTML(\r\n                                        oldETA\r\n                                    )}\r\n\r\n                                    \u2192\r\n\r\n                                    ${escapeHTML(\r\n                                        newETA\r\n                                    )}\r\n\r\n                                <\/div>\r\n\r\n                            <\/div>\r\n\r\n                        <\/div>\r\n\r\n\r\n                        ${\r\n                            delay !== 0\r\n\r\n                                ? `\r\n\r\n                                    <div\r\n                                        class=\"nsc-change-impact\"\r\n                                    >\r\n\r\n                                        Schedule impact:\r\n                                        ${\r\n                                            delay > 0\r\n                                                ? \"+\" + delay\r\n                                                : delay\r\n                                        }\r\n                                        days\r\n\r\n                                    <\/div>\r\n\r\n                                `\r\n\r\n                                : \"\"\r\n                        }\r\n\r\n\r\n                    <\/div>\r\n\r\n                `;\r\n\r\n            }\r\n        )\r\n        .join(\"\");\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STATUS\r\n========================================================= *\/\r\n\r\nfunction calculateStatus(\r\n    shipment\r\n) {\r\n\r\n    const movement =\r\n        cleanText(\r\n            shipment.movementStatus\r\n        )\r\n        .toUpperCase();\r\n\r\n\r\n    if (\r\n        movement ===\r\n        \"ARRIVED\"\r\n    ) {\r\n\r\n        return {\r\n\r\n            key:\r\n                \"arrived\",\r\n\r\n            text:\r\n                \"ARRIVED\"\r\n\r\n        };\r\n\r\n    }\r\n\r\n\r\n    const legs =\r\n        Array.isArray(\r\n            shipment.legs\r\n        )\r\n            ? shipment.legs\r\n            : [];\r\n\r\n\r\n    if (\r\n        !legs.length\r\n    ) {\r\n\r\n        return {\r\n\r\n            key:\r\n                \"scheduled\",\r\n\r\n            text:\r\n                \"SCHEDULED\"\r\n\r\n        };\r\n\r\n    }\r\n\r\n\r\n    let latestETD =\r\n        null;\r\n\r\n    let latestETA =\r\n        null;\r\n\r\n\r\n    legs.forEach(\r\n        function(leg) {\r\n\r\n            const etd =\r\n                parseDate(\r\n                    leg.updatedEtd ||\r\n                    leg.initialEtd\r\n                );\r\n\r\n\r\n            const eta =\r\n                parseDate(\r\n                    leg.updatedEta ||\r\n                    leg.initialEta\r\n                );\r\n\r\n\r\n            if (\r\n                etd &&\r\n                (\r\n                    !latestETD ||\r\n                    etd > latestETD\r\n                )\r\n            ) {\r\n\r\n                latestETD =\r\n                    etd;\r\n\r\n            }\r\n\r\n\r\n            if (\r\n                eta &&\r\n                (\r\n                    !latestETA ||\r\n                    eta > latestETA\r\n                )\r\n            ) {\r\n\r\n                latestETA =\r\n                    eta;\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    if (\r\n        latestETA &&\r\n        latestETA <= new Date()\r\n    ) {\r\n\r\n        return {\r\n\r\n            key:\r\n                \"arrived\",\r\n\r\n            text:\r\n                \"ARRIVED\"\r\n\r\n        };\r\n\r\n    }\r\n\r\n\r\n    if (\r\n        latestETD &&\r\n        latestETD <= new Date()\r\n    ) {\r\n\r\n        return {\r\n\r\n            key:\r\n                \"transit\",\r\n\r\n            text:\r\n                \"IN TRANSIT\"\r\n\r\n        };\r\n\r\n    }\r\n\r\n\r\n    return {\r\n\r\n        key:\r\n            \"scheduled\",\r\n\r\n        text:\r\n            \"SCHEDULED\"\r\n\r\n    };\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RENDER SHIPMENT\r\n========================================================= *\/\r\n\r\nfunction renderShipment(\r\n    shipment,\r\n    searchedNumber\r\n) {\r\n\r\n    if (\r\n        !shipment\r\n    ) {\r\n\r\n        throw new Error(\r\n            \"Shipment data was not found.\"\r\n        );\r\n\r\n    }\r\n\r\n\r\n    result.style.display =\r\n        \"block\";\r\n\r\n\r\n    document.getElementById(\r\n        \"nsc-result-number\"\r\n    ).textContent =\r\n        searchedNumber;\r\n\r\n\r\n    let carrier =\r\n        shipment.linerName ||\r\n        \"\u2014\";\r\n\r\n\r\n    if (\r\n        carrier\r\n            .toUpperCase()\r\n            .includes(\r\n                \"OCEAN NETWORK EXPRESS\"\r\n            )\r\n    ) {\r\n\r\n        carrier =\r\n            \"ONE\";\r\n\r\n    }\r\n\r\n\r\n    \/*\r\n     * CUSTOMER REMOVED FROM FRONTEND\r\n     *\/\r\n\r\n\r\n    document.getElementById(\r\n        \"nsc-carrier-metric\"\r\n    ).textContent =\r\n        carrier;\r\n\r\n\r\n    document.getElementById(\r\n        \"nsc-route-metric\"\r\n    ).textContent =\r\n\r\n        (\r\n            shipment.polName ||\r\n            shipment.pol ||\r\n            \"\u2014\"\r\n        )\r\n\r\n        +\r\n\r\n        \" \u2192 \"\r\n\r\n        +\r\n\r\n        (\r\n            shipment.podName ||\r\n            shipment.pod ||\r\n            \"\u2014\"\r\n        );\r\n\r\n\r\n    document.getElementById(\r\n        \"nsc-updated-metric\"\r\n    ).textContent =\r\n        formatDateTime(\r\n            shipment.updatedAt\r\n        );\r\n\r\n\r\n    const legs =\r\n        Array.isArray(\r\n            shipment.legs\r\n        )\r\n            ? shipment.legs\r\n            : [];\r\n\r\n\r\n    const lastLeg =\r\n        legs.length\r\n            ? legs[\r\n                legs.length-1\r\n            ]\r\n            : null;\r\n\r\n\r\n    const finalETA =\r\n        lastLeg\r\n            ? (\r\n                lastLeg.updatedEta ||\r\n                lastLeg.initialEta\r\n            )\r\n            : null;\r\n\r\n\r\n    document.getElementById(\r\n        \"nsc-eta-metric\"\r\n    ).textContent =\r\n        formatDate(\r\n            finalETA\r\n        );\r\n\r\n\r\n    const statusData =\r\n        calculateStatus(\r\n            shipment\r\n        );\r\n\r\n\r\n    const status =\r\n        document.getElementById(\r\n            \"nsc-result-status\"\r\n        );\r\n\r\n\r\n    status.className =\r\n        \"nsc-result-status \" +\r\n        statusData.key;\r\n\r\n\r\n    document.getElementById(\r\n        \"nsc-result-status-text\"\r\n    ).textContent =\r\n        statusData.text;\r\n\r\n\r\n    document.getElementById(\r\n        \"nsc-eta\"\r\n    ).textContent =\r\n        formatDate(\r\n            finalETA\r\n        );\r\n\r\n\r\n    document.getElementById(\r\n        \"nsc-eta-location\"\r\n    ).textContent =\r\n        \"Destination: \" +\r\n        (\r\n            shipment.podName ||\r\n            shipment.pod ||\r\n            \"\u2014\"\r\n        );\r\n\r\n\r\n    const delay =\r\n        Number(\r\n            shipment.delayDays ||\r\n            0\r\n        );\r\n\r\n\r\n    const delayCard =\r\n        document.getElementById(\r\n            \"nsc-delay-card\"\r\n        );\r\n\r\n\r\n    const delayValue =\r\n        document.getElementById(\r\n            \"nsc-delay-value\"\r\n        );\r\n\r\n\r\n    const delayDescription =\r\n        document.getElementById(\r\n            \"nsc-delay-description\"\r\n        );\r\n\r\n\r\n    if (\r\n        delay > 0\r\n    ) {\r\n\r\n        delayCard.className =\r\n            \"nsc-delay-panel delayed\";\r\n\r\n        delayValue.textContent =\r\n            \"+\" +\r\n            delay +\r\n            \" DAYS\";\r\n\r\n        delayDescription.textContent =\r\n            \"Shipment delayed according to the latest available schedule.\";\r\n\r\n    }\r\n\r\n    else if (\r\n        delay < 0\r\n    ) {\r\n\r\n        delayCard.className =\r\n            \"nsc-delay-panel\";\r\n\r\n        delayValue.textContent =\r\n            Math.abs(\r\n                delay\r\n            ) +\r\n            \" DAYS EARLY\";\r\n\r\n        delayDescription.textContent =\r\n            \"Shipment is ahead of schedule.\";\r\n\r\n    }\r\n\r\n    else {\r\n\r\n        delayCard.className =\r\n            \"nsc-delay-panel\";\r\n\r\n        delayValue.textContent =\r\n            \"0 DAYS\";\r\n\r\n        delayDescription.textContent =\r\n            \"Shipment is currently on schedule.\";\r\n\r\n    }\r\n\r\n\r\n    const details = {\r\n\r\n        \/*\r\n         * CUSTOMER REMOVED\r\n         *\/\r\n\r\n        \"nsc-carrier\":\r\n            carrier,\r\n\r\n        \"nsc-origin\":\r\n            shipment.polName ||\r\n            shipment.pol ||\r\n            \"\u2014\",\r\n\r\n        \"nsc-destination\":\r\n            shipment.podName ||\r\n            shipment.pod ||\r\n            \"\u2014\",\r\n\r\n        \"nsc-pol\":\r\n            shipment.polName ||\r\n            shipment.pol ||\r\n            \"\u2014\",\r\n\r\n        \"nsc-pod\":\r\n            shipment.podName ||\r\n            shipment.pod ||\r\n            \"\u2014\",\r\n\r\n        \"nsc-container\":\r\n            shipment.containerNo ||\r\n            \"\u2014\",\r\n\r\n        \"nsc-hbl\":\r\n            shipment.hblNo ||\r\n            \"\u2014\",\r\n\r\n        \"nsc-mbl\":\r\n            shipment.carrierBlNo ||\r\n            \"\u2014\",\r\n\r\n        \"nsc-booking\":\r\n            shipment.bookingNo ||\r\n            shipment.jobNumber ||\r\n            \"\u2014\",\r\n\r\n        \"nsc-updated\":\r\n            formatDateTime(\r\n                shipment.updatedAt\r\n            ),\r\n\r\n        \"nsc-detail-delay\":\r\n            delay === 0\r\n\r\n                ? \"0 Days\"\r\n\r\n                : (\r\n                    delay > 0\r\n                        ? \"+\" + delay + \" Days\"\r\n                        : delay + \" Days\"\r\n                )\r\n\r\n    };\r\n\r\n\r\n    Object.keys(\r\n        details\r\n    ).forEach(\r\n        function(id) {\r\n\r\n            const element =\r\n                document.getElementById(\r\n                    id\r\n                );\r\n\r\n\r\n            if (\r\n                element\r\n            ) {\r\n\r\n                element.textContent =\r\n                    details[id];\r\n\r\n            }\r\n\r\n        }\r\n    );\r\n\r\n\r\n    renderJourney(\r\n        shipment\r\n    );\r\n\r\n\r\n    renderEvents(\r\n        shipment\r\n    );\r\n\r\n\r\n    renderChanges(\r\n        shipment\r\n    );\r\n\r\n\r\n    renderSchedules(\r\n        shipment\r\n    );\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FORM SUBMIT\r\n========================================================= *\/\r\n\r\nform.addEventListener(\r\n    \"submit\",\r\n    async function(event) {\r\n\r\n        event.preventDefault();\r\n\r\n\r\n        const search =\r\n            cleanText(\r\n                input.value\r\n            );\r\n\r\n\r\n        if (\r\n            !search\r\n        ) {\r\n\r\n            showMessage(\r\n                \"Please enter a tracking reference.\",\r\n                \"error\"\r\n            );\r\n\r\n            input.focus();\r\n\r\n            return;\r\n\r\n        }\r\n\r\n\r\n        autoDetect();\r\n\r\n\r\n        hideMessage();\r\n\r\n\r\n        result.style.display =\r\n            \"none\";\r\n\r\n\r\n        loading.style.display =\r\n            \"block\";\r\n\r\n\r\n        button.disabled =\r\n            true;\r\n\r\n\r\n        button.textContent =\r\n            \"OPENING...\";\r\n\r\n\r\n        try {\r\n\r\n            const data =\r\n                await getTrackingData(\r\n                    search\r\n                );\r\n\r\n\r\n            if (\r\n                data.success ===\r\n                false\r\n            ) {\r\n\r\n                throw new Error(\r\n                    data.message ||\r\n                    \"Unable to retrieve shipment.\"\r\n                );\r\n\r\n            }\r\n\r\n\r\n            if (\r\n                data.found ===\r\n                false\r\n            ) {\r\n\r\n                throw new Error(\r\n                    \"Shipment not found for: \" +\r\n                    search\r\n                );\r\n\r\n            }\r\n\r\n\r\n            const shipment =\r\n                getShipment(\r\n                    data\r\n                );\r\n\r\n\r\n            if (!shipment) {\r\n\r\n                throw new Error(\r\n                    \"Shipment data was not found.\"\r\n                );\r\n\r\n            }\r\n\r\n\r\n            renderShipment(\r\n                shipment,\r\n                search\r\n            );\r\n\r\n\r\n            showMessage(\r\n                \"Shipment information successfully retrieved.\",\r\n                \"success\"\r\n            );\r\n\r\n\r\n            setTimeout(\r\n                function() {\r\n\r\n                    result.scrollIntoView({\r\n\r\n                        behavior:\r\n                            \"smooth\",\r\n\r\n                        block:\r\n                            \"start\"\r\n\r\n                    });\r\n\r\n                },\r\n                120\r\n            );\r\n\r\n\r\n        }\r\n\r\n        catch(error) {\r\n\r\n            console.error(\r\n                \"NSC TRACKING ERROR:\",\r\n                error\r\n            );\r\n\r\n\r\n            result.style.display =\r\n                \"none\";\r\n\r\n\r\n            showMessage(\r\n                error.message ||\r\n                \"Unable to retrieve shipment tracking.\",\r\n                \"error\"\r\n            );\r\n\r\n        }\r\n\r\n\r\n        finally {\r\n\r\n            loading.style.display =\r\n                \"none\";\r\n\r\n\r\n            button.disabled =\r\n                false;\r\n\r\n\r\n            button.textContent =\r\n                \"OPEN SHIPMENT\";\r\n\r\n        }\r\n\r\n    }\r\n);\r\n\r\n\r\n\/* =========================================================\r\n   INITIAL PLACEHOLDER\r\n========================================================= *\/\r\n\r\nupdatePlaceholder(\r\n    type.value\r\n);\r\n\r\n\r\n\/* =========================================================\r\n   URL SEARCH\r\n========================================================= *\/\r\n\r\ntry {\r\n\r\n    const url =\r\n        new URL(\r\n            window.location.href\r\n        );\r\n\r\n\r\n    const urlSearch =\r\n        url.searchParams.get(\r\n            \"search\"\r\n        );\r\n\r\n\r\n    if (\r\n        urlSearch &&\r\n        cleanText(\r\n            urlSearch\r\n        )\r\n    ) {\r\n\r\n        input.value =\r\n            cleanText(\r\n                urlSearch\r\n            );\r\n\r\n\r\n        autoDetect();\r\n\r\n    }\r\n\r\n}\r\n\r\ncatch(error) {\r\n\r\n    console.warn(\r\n        \"NSC URL SEARCH ERROR:\",\r\n        error\r\n    );\r\n\r\n}\r\n\r\n})();\r\n\r\n<\/script>\r\n\r\n\r\n<\/body>\r\n\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Shipment Tracking | NS Continent \u2014 Ocean Freight Visibility PT Nova Sync Continent Premium Shipment Intelligence Shipment Tracking &amp; Vessel Intelligence Track your shipment, with greater clarity. Track container, HBL, MBL and booking references through one logistics intelligence interface. Review shipment progress, vessel movements, transshipment milestones, schedule changes, ETA and delay information from the latest [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-356","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nscontinent.com\/id\/wp-json\/wp\/v2\/pages\/356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nscontinent.com\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nscontinent.com\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nscontinent.com\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nscontinent.com\/id\/wp-json\/wp\/v2\/comments?post=356"}],"version-history":[{"count":9,"href":"https:\/\/nscontinent.com\/id\/wp-json\/wp\/v2\/pages\/356\/revisions"}],"predecessor-version":[{"id":1102,"href":"https:\/\/nscontinent.com\/id\/wp-json\/wp\/v2\/pages\/356\/revisions\/1102"}],"wp:attachment":[{"href":"https:\/\/nscontinent.com\/id\/wp-json\/wp\/v2\/media?parent=356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}