\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28 - \u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n prompt: ['Prompt', 'sans-serif'],\r\n },\r\n colors: {\r\n navy: {\r\n 800: '#1e3a8a',\r\n 900: '#0f172a',\r\n },\r\n orange: {\r\n 500: '#f97316',\r\n 600: '#ea580c',\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n body {\r\n font-family: 'Prompt', sans-serif;\r\n background-color: #f8fafc;\r\n }\r\n .custom-shadow {\r\n box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.05);\r\n }\r\n .step-card {\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n .step-card:hover {\r\n transform: translateY(-3px);\r\n border-color: #f97316;\r\n }\r\n\r\n \/* ===== Progress WOW ===== *\/\r\n #scrollBar{position:fixed;top:0;left:0;height:5px;width:0;z-index:70;background:linear-gradient(90deg,#1e3a8a,#3b82f6,#f97316,#fbbf24,#f97316);background-size:200% 100%;animation:shimmer 3s linear infinite;box-shadow:0 0 12px rgba(249,115,22,.7);border-radius:0 4px 4px 0}\r\n @keyframes shimmer{to{background-position:-200% 0}}\r\n .tl-track{position:absolute;left:1.5rem;width:4px;transform:translateX(-50%);margin:0!important;border-radius:4px;z-index:1;pointer-events:none;background:repeating-linear-gradient(to bottom,#bfdbfe 0 6px,transparent 6px 12px)}\r\n @media(min-width:640px){.tl-track{left:50%}}\r\n .tl-fill{position:absolute;top:0;left:0;width:100%;height:0;border-radius:4px;background:linear-gradient(to bottom,#f97316,#fbbf24);box-shadow:0 0 14px 2px rgba(249,115,22,.55);transition:height .15s linear}\r\n .tl-fill::after{content:\"\";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;transform:translateX(-50%);border-radius:50%;background:#fff;border:3px solid #f97316;animation:head 1.6s infinite}\r\n @keyframes head{0%{box-shadow:0 0 0 0 rgba(249,115,22,.6)}70%,100%{box-shadow:0 0 0 14px rgba(249,115,22,0)}}\r\n .step-item .node{transition:background .5s,color .5s,box-shadow .5s,scale .5s}\r\n .step-item.is-todo .node{background:#fff!important;color:#94a3b8!important;box-shadow:0 0 0 2px #cbd5e1}\r\n .step-item.is-done .node,.step-item.is-active .node{background:linear-gradient(135deg,#f97316,#fbbf24)!important;color:#fff!important;box-shadow:0 0 0 4px rgba(249,115,22,.18),0 6px 16px rgba(249,115,22,.45)}\r\n .step-item.is-active .node{scale:1.2}\r\n .step-item.is-active .node::after{content:\"\";position:absolute;inset:-4px;border-radius:inherit;border:2px solid #f97316;animation:ripple 1.6s ease-out infinite}\r\n @keyframes ripple{to{transform:scale(1.7);opacity:0}}\r\n .step-card{position:relative;overflow:hidden}\r\n .step-card::before{content:\"\";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,#f97316,#fbbf24);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1)}\r\n .step-item.is-done .step-card::before,.step-item.is-active .step-card::before{transform:scaleX(1)}\r\n .step-item.is-active .step-card{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.15),0 18px 36px -10px rgba(249,115,22,.35)}\r\n .step-item .step-card{opacity:0;transform:translateX(48px)}\r\n @media(min-width:640px){.step-item:nth-child(odd) .step-card{transform:translateX(-48px)}}\r\n .step-item.in .step-card{opacity:1;transform:none;transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s}\r\n .step-item.in .step-card:hover{transform:translateY(-4px)}\r\n .step-card .fa-rotate-left{display:inline-block;animation:ccw 2.5s linear infinite}\r\n @keyframes ccw{to{transform:rotate(-360deg)}}\r\n #hud{position:fixed;right:1rem;bottom:1rem;z-index:60;display:flex;align-items:center;gap:.75rem;padding:.5rem;background:rgba(15,23,42,.9);backdrop-filter:blur(10px);color:#fff;border-radius:9999px;box-shadow:0 12px 30px rgba(15,23,42,.35);border:1px solid rgba(249,115,22,.45);opacity:0;transform:translateY(20px);pointer-events:none;transition:.4s;max-width:calc(100vw - 2rem)}\r\n #hud.show{opacity:1;transform:none;pointer-events:auto}\r\n #hud .ring{position:relative;width:52px;height:52px;flex:none}\r\n #hud svg{transform:rotate(-90deg)}\r\n #hud #hudRing{transition:stroke-dashoffset .4s}\r\n #hud .ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:.78rem}\r\n #hud .txt{min-width:0;max-width:190px}\r\n #hud .txt small{display:block;color:#fb923c;font-size:.7rem;font-weight:600}\r\n #hud .txt span{display:block;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\r\n #hud button{width:40px;height:40px;border-radius:50%;background:#f97316;color:#fff;flex:none;transition:background .2s,transform .2s}\r\n #hud button:hover{background:#ea580c;transform:scale(1.08)}\r\n .cf{position:fixed;width:8px;height:12px;z-index:80;pointer-events:none;animation:cf 1.7s ease-out forwards}\r\n @keyframes cf{to{transform:translate(var(--dx),var(--dy)) rotate(720deg);opacity:0}}\r\n @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.step-item .step-card{opacity:1;transform:none}}\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800 antialiased min-h-screen flex flex-col\">\r\n\r\n <div id=\"scrollBar\"><\/div>\r\n <div id=\"hud\" role=\"status\" aria-live=\"polite\">\r\n <div class=\"ring\">\r\n <svg width=\"52\" height=\"52\" viewBox=\"0 0 52 52\"><circle cx=\"26\" cy=\"26\" r=\"22\" fill=\"none\" stroke=\"rgba(255,255,255,.15)\" stroke-width=\"5\"\/><circle id=\"hudRing\" cx=\"26\" cy=\"26\" r=\"22\" fill=\"none\" stroke=\"#f97316\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-dasharray=\"138.2\" stroke-dashoffset=\"138.2\"\/><\/svg>\r\n <b id=\"hudPct\">0%<\/b>\r\n <\/div>\r\n <div class=\"txt\"><small id=\"hudStep\">\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e40\u0e23\u0e34\u0e48\u0e21<\/small><span id=\"hudTitle\">\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e25\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19<\/span><\/div>\r\n <button id=\"hudNext\" aria-label=\"\u0e44\u0e1b\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e16\u0e31\u0e14\u0e44\u0e1b\"><i class=\"fa-solid fa-chevron-down\"><\/i><\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"wf-header\" class=\"text-white shadow-xl relative overflow-hidden\" style=\"background:linear-gradient(90deg,#0f172a,#1e3a8a 50%,#0f172a);color:#fff;border-radius:0 0 1.5rem 1.5rem\">\r\n <div class=\"absolute inset-0 opacity-10 bg-[radial-gradient(#f97316_1px,transparent_1px)] [background-size:20px_20px]\"><\/div>\r\n <div class=\"max-w-7xl mx-auto px-4 py-8 sm:px-12 lg:px-16 relative z-10 text-center\">\r\n <span class=\"inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs sm:text-sm font-semibold bg-orange-500\/20 text-orange-400 border border-orange-500\/30 mb-3\">\r\n <i class=\"fa-solid fa-diagram-project\"><\/i> \u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\r\n <\/span>\r\n <h1 class=\"text-2xl sm:text-4xl lg:text-5xl font-bold tracking-tight mb-3\" style=\"color:#fff;margin-top:0\">\r\n \u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\r\n <\/h1>\r\n <p class=\"text-slate-300 max-w-2xl mx-auto text-sm sm:text-base font-light\" style=\"color:#cbd5e1\">\r\n \u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e01\u0e23\u0e2d\u0e1a\u0e40\u0e27\u0e25\u0e32 \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a \u0e41\u0e25\u0e30\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e01\u0e49\u0e44\u0e02\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a\r\n <\/p>\r\n \r\n \r\n <div class=\"flex flex-wrap justify-center gap-2 mt-6\">\r\n <button onclick=\"filterRole('all')\" id=\"btn-all\" class=\"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-orange-500 text-white shadow-md\">\r\n <i class=\"fa-solid fa-layer-group mr-1.5\"><\/i> \u0e41\u0e2a\u0e14\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\r\n <\/button>\r\n <button onclick=\"filterRole('owner')\" id=\"btn-owner\" class=\"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-blue-900\/60 text-slate-200 hover:bg-blue-800 border border-blue-700\/50\">\r\n <i class=\"fa-solid fa-user-tie mr-1.5\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 (Process Owner)\r\n <\/button>\r\n <button onclick=\"filterRole('dev')\" id=\"btn-dev\" class=\"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-blue-900\/60 text-slate-200 hover:bg-blue-800 border border-blue-700\/50\">\r\n <i class=\"fa-solid fa-laptop-code mr-1.5\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\r\n <\/button>\r\n <button onclick=\"filterRole('user')\" id=\"btn-user\" class=\"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-blue-900\/60 text-slate-200 hover:bg-blue-800 border border-blue-700\/50\">\r\n <i class=\"fa-solid fa-users mr-1.5\"><\/i> \u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (End-User)\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <main class=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10 flex-grow w-full\">\r\n \r\n \r\n <div class=\"bg-blue-50 border border-blue-200 rounded-2xl p-4 mb-8 flex items-start gap-3 shadow-sm\">\r\n <div class=\"text-orange-500 text-xl mt-0.5\">\r\n <i class=\"fa-solid fa-circle-info\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"font-semibold text-blue-950 text-sm sm:text-base\">\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01<\/h3>\r\n <p class=\"text-blue-900\/80 text-xs sm:text-sm\">\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e41\u0e15\u0e48\u0e25\u0e30\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e0a\u0e34\u0e07\u0e25\u0e36\u0e01 \u0e40\u0e0a\u0e48\u0e19 \u0e01\u0e23\u0e2d\u0e1a\u0e40\u0e27\u0e25\u0e32\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19 \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07 \u0e41\u0e25\u0e30\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02 (Feedback Loop)<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"process-container\" class=\"space-y-6 relative\">\r\n \r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 1\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(1)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\r\n <\/span>\r\n <span class=\"text-xs text-slate-400\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e15\u0e32\u0e21\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19<\/p>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 2\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(2)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 \u2794 \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e23\u0e31\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 \/ \u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e17\u0e33\u0e01\u0e32\u0e23\u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e41\u0e25\u0e30\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-slate-100 text-slate-700 text-xs px-2 py-0.5 rounded-md font-medium\"><i class=\"fa-solid fa-file-lines text-orange-500 mr-1\"><\/i> \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a \/ \u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 3\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(3)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e08\u0e31\u0e14\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21 \u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c \u0e41\u0e25\u0e30\u0e17\u0e33\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14<\/p>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 4\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(4)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-laptop-code mr-1\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 (Doc1)<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a (SRS \/ Requirement Specification)<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-pdf mr-1\"><\/i> \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Doc1 (\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23)<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 5\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(5)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 \u2794 \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34 Doc1<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Doc1 \u0e2b\u0e32\u0e01\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e1a\u0e01\u0e1e\u0e23\u0e48\u0e2d\u0e07\u0e08\u0e30\u0e2a\u0e48\u0e07\u0e04\u0e37\u0e19\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc1 (Comment)] \u0e08\u0e19\u0e01\u0e27\u0e48\u0e32\u0e08\u0e30\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-lines mr-1\"><\/i> \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Doc1 (Comment)<\/span>\r\n <span class=\"bg-orange-50 text-orange-700 text-xs px-2 py-0.5 rounded-md font-medium\"><i class=\"fa-solid fa-rotate-left mr-1\"><\/i> \u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02: \u0e41\u0e01\u0e49\u0e44\u0e02\u0e27\u0e19\u0e25\u0e39\u0e1b\u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 6\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(6)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-laptop-code mr-1\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e23\u0e30\u0e1a\u0e1a<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e17\u0e33\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e23\u0e30\u0e1a\u0e1a \u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e41\u0e25\u0e30\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (Design & Architecture)<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-pdf mr-1\"><\/i> Doc1 (Final), Doc2, Doc4<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 7\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(7)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-laptop-code mr-1\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e15\u0e32\u0e21\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e0b\u0e2d\u0e1f\u0e15\u0e4c\u0e41\u0e27\u0e23\u0e4c (Implement)<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e40\u0e02\u0e35\u0e22\u0e19\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e15\u0e32\u0e21\u0e41\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e44\u0e27\u0e49<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-code mr-1\"><\/i> Doc2, Doc3<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 8\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(8)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-laptop-code mr-1\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07 Implement \u0e40\u0e2a\u0e23\u0e47\u0e08<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a (Test)<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e20\u0e32\u0e22\u0e43\u0e19 \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e1a\u0e31\u0e4a\u0e01\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07 \u0e2b\u0e32\u0e01\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e08\u0e30\u0e2a\u0e48\u0e07\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc3] \u0e08\u0e19\u0e01\u0e27\u0e48\u0e32\u0e08\u0e30\u0e1c\u0e48\u0e32\u0e19<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-lines mr-1\"><\/i> \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Doc3 (\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a)<\/span>\r\n <span class=\"bg-orange-50 text-orange-700 text-xs px-2 py-0.5 rounded-md font-medium\"><i class=\"fa-solid fa-rotate-left mr-1\"><\/i> \u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02: \u0e41\u0e01\u0e49\u0e44\u0e02 [Doc3] \u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e1c\u0e48\u0e32\u0e19<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 9\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(9)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 1 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d\u0e23\u0e30\u0e1a\u0e1a<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e18\u0e34\u0e15\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e17\u0e23\u0e32\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e2a\u0e39\u0e48\u0e01\u0e32\u0e23\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e08\u0e23\u0e34\u0e07<\/p>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 10\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(10)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07 Implement \u0e40\u0e2a\u0e23\u0e47\u0e08<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e23\u0e30\u0e1a\u0e1a \/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07\u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07 \u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19\u0e08\u0e30\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc4] \u0e41\u0e25\u0e49\u0e27\u0e27\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e02\u0e31\u0e49\u0e19\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a \u0e2b\u0e32\u0e01\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e08\u0e36\u0e07\u0e44\u0e1b\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e14\u0e2a\u0e2d\u0e1a<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-lines mr-1\"><\/i> Doc4 (\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e42\u0e14\u0e22 Process Owner)<\/span>\r\n <span class=\"bg-orange-50 text-orange-700 text-xs px-2 py-0.5 rounded-md font-medium\"><i class=\"fa-solid fa-rotate-left mr-1\"><\/i> \u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02: \u0e41\u0e01\u0e49\u0e44\u0e02 [Doc4] \u0e27\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 11\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(11)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-laptop-code mr-1\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-solid fa-check mr-1\"><\/i> \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a \u0e01\u0e48\u0e2d\u0e19\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e0a\u0e35\u0e49\u0e41\u0e08\u0e07 \/ \u0e2d\u0e1a\u0e23\u0e21<\/p>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev,user\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 12\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(12)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e17\u0e38\u0e01\u0e1d\u0e48\u0e32\u0e22\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (\u0e44\u0e21\u0e48\u0e21\u0e35\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02)<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e0a\u0e35\u0e49\u0e41\u0e08\u0e07 \/ \u0e2d\u0e1a\u0e23\u0e21<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e08\u0e31\u0e14\u0e2d\u0e1a\u0e23\u0e21\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e41\u0e01\u0e48\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e08\u0e31\u0e14\u0e17\u0e33\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-book mr-1\"><\/i> Doc5 (\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19)<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 13\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(13)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 1 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e2d\u0e1a\u0e23\u0e21<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a\u0e07\u0e32\u0e19 \/ \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e43\u0e19\u0e08\u0e23\u0e34\u0e07 (Go-Live)<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-signature mr-1\"><\/i> Doc6 (\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a)<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-navy-900 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-navy-900 text-white rounded-2xl p-5 custom-shadow border border-blue-900 step-card cursor-pointer\" onclick=\"openModal(14)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-900\/60 text-blue-200\">\r\n <i class=\"fa-solid fa-flag-checkered mr-1\"><\/i> \u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\r\n <\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-white mb-1\">\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-300 mb-3\">\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1a\u0e33\u0e23\u0e38\u0e07\u0e23\u0e31\u0e01\u0e29\u0e32\u0e15\u0e48\u0e2d\u0e44\u0e1b<\/p>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-blue-900 text-xs text-slate-400\">\r\n <span class=\"text-orange-400 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tl-track\" id=\"tlTrack\"><div class=\"tl-fill\" id=\"tlFill\"><\/div><\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"mt-16 bg-white rounded-3xl p-6 sm:p-8 custom-shadow border border-slate-100\">\r\n <h3 class=\"text-xl font-bold text-slate-900 mb-4 flex items-center gap-2\">\r\n <i class=\"fa-solid fa-folder-open text-orange-500\"><\/i> \u0e17\u0e33\u0e40\u0e19\u0e35\u0e22\u0e1a\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 (Document Reference)\r\n <\/h3>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 1<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 (SRS)<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e41\u0e25\u0e30\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e08\u0e32\u0e01\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 2<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 SRS \/ \u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e01\u0e32\u0e23\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e23\u0e30\u0e1a\u0e1a<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 3<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a (Developer)<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e20\u0e32\u0e22\u0e43\u0e19\u0e42\u0e14\u0e22\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 4<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a (Process Owner)<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e42\u0e14\u0e22\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 5<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e43\u0e19\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 6<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a\u0e07\u0e32\u0e19\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n \r\n <div class=\"text-slate-400 py-6 mt-16 text-center text-xs sm:text-sm\" style=\"background:#0f172a;color:#94a3b8;border-radius:1.5rem 1.5rem 0 0\">\r\n <p>\u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 • \u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e2d\u0e31\u0e08\u0e09\u0e23\u0e34\u0e22\u0e30<\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"detailModal\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900\/60 backdrop-blur-sm hidden\">\r\n <div class=\"bg-white rounded-3xl max-w-lg w-full p-6 sm:p-8 custom-shadow relative transform transition-all scale-95 opacity-0 duration-300\" id=\"modalContent\">\r\n <button onclick=\"closeModal()\" class=\"absolute top-5 right-5 text-slate-400 hover:text-slate-700 bg-slate-100 hover:bg-slate-200 w-9 h-9 rounded-full flex items-center justify-center transition-all\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/button>\r\n <div id=\"modal-body-content\">\r\n \r\n <\/div>\r\n <div class=\"mt-6 flex justify-end\">\r\n <button onclick=\"closeModal()\" class=\"px-5 py-2.5 rounded-xl bg-orange-500 text-white font-medium text-sm hover:bg-orange-600 transition-all shadow-md\">\r\n \u0e1b\u0e34\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n \/\/ \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e41\u0e15\u0e48\u0e25\u0e30\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\r\n const stepsData = {\r\n 1: {\r\n title: \"\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 (Process Owner)\",\r\n time: \"-\",\r\n doc: \"-\",\r\n condition: \"-\",\r\n desc: \"\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e33\u0e02\u0e2d\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2b\u0e23\u0e37\u0e2d\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e08\u0e32\u0e01\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e20\u0e32\u0e22\u0e43\u0e19\"\r\n },\r\n 2: {\r\n title: \"\u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 \/ \u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e23\u0e31\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\",\r\n doc: \"\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a \/ \u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\",\r\n condition: \"-\",\r\n desc: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e41\u0e25\u0e30\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e33\u0e01\u0e32\u0e23\u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e27\u0e31\u0e19\u0e40\u0e27\u0e25\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e1e\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e01\u0e47\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e34\u0e07\u0e25\u0e36\u0e01\"\r\n },\r\n 3: {\r\n title: \"\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\",\r\n time: \"-\",\r\n doc: \"-\",\r\n condition: \"-\",\r\n desc: \"\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e17\u0e38\u0e01\u0e1d\u0e48\u0e32\u0e22\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e23\u0e31\u0e1a\u0e1f\u0e31\u0e07\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30 \u0e02\u0e2d\u0e1a\u0e40\u0e02\u0e15\u0e07\u0e32\u0e19 \u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 (Business Requirements)\"\r\n },\r\n 4: {\r\n title: \"\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\",\r\n role: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\",\r\n doc: \"Doc 1 (\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \/ SRS)\",\r\n condition: \"-\",\r\n desc: \"\u0e1b\u0e23\u0e30\u0e21\u0e27\u0e25\u0e1c\u0e25\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\"\r\n },\r\n 5: {\r\n title: \"\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34 (Doc 1)\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\",\r\n doc: \"Doc 1 (Comment)\",\r\n condition: \"\u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19 \u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e17\u0e33\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc1 (Comment)] \u0e27\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e43\u0e2b\u0e21\u0e48\u0e08\u0e19\u0e01\u0e27\u0e48\u0e32\u0e08\u0e30\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34\",\r\n desc: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Doc 1 \u0e2b\u0e32\u0e01\u0e1e\u0e1a\u0e08\u0e38\u0e14\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e41\u0e01\u0e49\u0e44\u0e02\u0e08\u0e30\u0e23\u0e30\u0e1a\u0e38\u0e04\u0e2d\u0e21\u0e40\u0e21\u0e19\u0e15\u0e4c\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\"\r\n },\r\n 6: {\r\n title: \"\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\",\r\n role: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\",\r\n doc: \"Doc 1 (Final), Doc 2 (\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 SRS), Doc 4\",\r\n condition: \"-\",\r\n desc: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e23\u0e30\u0e1a\u0e1a \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e41\u0e25\u0e30\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\"\r\n },\r\n 7: {\r\n title: \"\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e0b\u0e2d\u0e1f\u0e15\u0e4c\u0e41\u0e27\u0e23\u0e4c (Implement)\",\r\n role: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"\u0e15\u0e32\u0e21\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e01\u0e07\u0e48\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a\",\r\n doc: \"Doc 2, Doc 3\",\r\n condition: \"-\",\r\n desc: \"\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e40\u0e02\u0e35\u0e22\u0e19\u0e42\u0e04\u0e49\u0e14\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e15\u0e32\u0e21\u0e41\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e44\u0e27\u0e49\u0e43\u0e19\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\"\r\n },\r\n 8: {\r\n title: \"\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a (Test)\",\r\n role: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07 Implement \u0e40\u0e2a\u0e23\u0e47\u0e08\",\r\n doc: \"Doc 3 (\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a)\",\r\n condition: \"\u0e2b\u0e32\u0e01\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e49\u0e27\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19 \u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc3] \u0e41\u0e25\u0e30\u0e17\u0e33\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e0b\u0e49\u0e33\",\r\n desc: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e33\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e20\u0e32\u0e22\u0e43\u0e19 (Internal Testing) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e41\u0e25\u0e30\u0e41\u0e01\u0e49\u0e44\u0e02\u0e02\u0e49\u0e2d\u0e1a\u0e01\u0e1e\u0e23\u0e48\u0e2d\u0e07\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\"\r\n },\r\n 9: {\r\n title: \"\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d\u0e23\u0e30\u0e1a\u0e1a\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 1 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\",\r\n doc: \"-\",\r\n condition: \"-\",\r\n desc: \"\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e41\u0e25\u0e49\u0e27\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e17\u0e23\u0e32\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07\"\r\n },\r\n 10: {\r\n title: \"\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e23\u0e30\u0e1a\u0e1a \/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 (Process Owner)\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07 Implement \u0e40\u0e2a\u0e23\u0e47\u0e08\",\r\n doc: \"Doc 4 (\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e42\u0e14\u0e22 Process Owner)\",\r\n condition: \"\u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19 \u0e43\u0e2b\u0e49\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc4] \u0e41\u0e25\u0e49\u0e27\u0e27\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e02\u0e31\u0e49\u0e19\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a \u0e2b\u0e32\u0e01\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19 \u0e44\u0e1b\u0e02\u0e31\u0e49\u0e19\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e14\u0e2a\u0e2d\u0e1a\",\r\n desc: \"\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e23\u0e34\u0e07 \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\"\r\n },\r\n 11: {\r\n title: \"\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\",\r\n role: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"-\",\r\n doc: \"-\",\r\n condition: \"\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a [Doc4] \u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19\",\r\n desc: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07\u0e01\u0e48\u0e2d\u0e19\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e0a\u0e35\u0e49\u0e41\u0e08\u0e07 \/ \u0e2d\u0e1a\u0e23\u0e21\"\r\n },\r\n 12: {\r\n title: \"\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e0a\u0e35\u0e49\u0e41\u0e08\u0e07 \/ \u0e2d\u0e1a\u0e23\u0e21\",\r\n role: \"\u0e17\u0e38\u0e01\u0e1d\u0e48\u0e32\u0e22\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (\u0e44\u0e21\u0e48\u0e21\u0e35\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02)\",\r\n doc: \"Doc 5 (\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19)\",\r\n condition: \"-\",\r\n desc: \"\u0e08\u0e31\u0e14\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2d\u0e1a\u0e23\u0e21\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e08\u0e01\u0e08\u0e48\u0e32\u0e22\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\"\r\n },\r\n 13: {\r\n title: \"\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a\u0e07\u0e32\u0e19 \/ \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 1 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e0a\u0e35\u0e49\u0e41\u0e08\u0e07 \/ \u0e2d\u0e1a\u0e23\u0e21\",\r\n doc: \"Doc 6 (\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a)\",\r\n condition: \"-\",\r\n desc: \"\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07 (Go-Live)\"\r\n },\r\n 14: {\r\n title: \"\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\",\r\n role: \"\u0e17\u0e38\u0e01\u0e1d\u0e48\u0e32\u0e22\",\r\n time: \"-\",\r\n doc: \"-\",\r\n condition: \"-\",\r\n desc: \"\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\"\r\n }\r\n };\r\n\r\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e01\u0e23\u0e2d\u0e07\u0e15\u0e32\u0e21\u0e1a\u0e17\u0e1a\u0e32\u0e17\r\n function filterRole(role) {\r\n const items = document.querySelectorAll('.step-item');\r\n const buttons = document.querySelectorAll('#wf-header button[onclick^=\"filterRole\"]');\r\n \r\n \/\/ \u0e2a\u0e25\u0e31\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e1b\u0e38\u0e48\u0e21\r\n buttons.forEach(btn => {\r\n btn.className = \"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-blue-900\/60 text-slate-200 hover:bg-blue-800 border border-blue-700\/50\";\r\n });\r\n document.getElementById('btn-' + role).className = \"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-orange-500 text-white shadow-md\";\r\n\r\n \/\/ \u0e01\u0e23\u0e2d\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\r\n items.forEach(item => {\r\n if(role === 'all') {\r\n item.style.display = 'flex';\r\n } else {\r\n const roles = item.getAttribute('data-role');\r\n if(roles.includes(role)) {\r\n item.style.display = 'flex';\r\n } else {\r\n item.style.display = 'none';\r\n }\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e1b\u0e34\u0e14 Modal\r\n function openModal(stepId) {\r\n const data = stepsData[stepId];\r\n const modal = document.getElementById('detailModal');\r\n const modalContent = document.getElementById('modalContent');\r\n const bodyContent = document.getElementById('modal-body-content');\r\n\r\n bodyContent.innerHTML = `\r\n <span class=\"px-3 py-1 rounded-lg text-xs font-bold bg-orange-100 text-orange-800 inline-block mb-3\">\r\n \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 ${stepId}\r\n <\/span>\r\n <h3 class=\"text-xl sm:text-2xl font-bold text-slate-900 mb-3\">${data.title}<\/h3>\r\n \r\n <div class=\"space-y-3 text-sm text-slate-600 mb-4\">\r\n <div class=\"flex items-start gap-2 bg-slate-50 p-3 rounded-xl border border-slate-100\">\r\n <i class=\"fa-solid fa-user-gear text-blue-800 mt-1\"><\/i>\r\n <div>\r\n <strong class=\"text-slate-800 block text-xs uppercase tracking-wider text-slate-400\">\u0e1c\u0e39\u0e49\u0e23\u0e31\u0e1a\u0e1c\u0e34\u0e14\u0e0a\u0e2d\u0e1a<\/strong>\r\n <span>${data.role}<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-2 bg-slate-50 p-3 rounded-xl border border-slate-100\">\r\n <i class=\"fa-regular fa-clock text-orange-600 mt-1\"><\/i>\r\n <div>\r\n <strong class=\"text-slate-800 block text-xs uppercase tracking-wider text-slate-400\">\u0e01\u0e23\u0e2d\u0e1a\u0e23\u0e30\u0e22\u0e30\u0e40\u0e27\u0e25\u0e32<\/strong>\r\n <span>${data.time}<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-2 bg-slate-50 p-3 rounded-xl border border-slate-100\">\r\n <i class=\"fa-solid fa-file-lines text-blue-700 mt-1\"><\/i>\r\n <div>\r\n <strong class=\"text-slate-800 block text-xs uppercase tracking-wider text-slate-400\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07<\/strong>\r\n <span>${data.doc}<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-2 bg-slate-50 p-3 rounded-xl border border-slate-100\">\r\n <i class=\"fa-solid fa-triangle-exclamation text-orange-500 mt-1\"><\/i>\r\n <div>\r\n <strong class=\"text-slate-800 block text-xs uppercase tracking-wider text-slate-400\">\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02 \/ \u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02<\/strong>\r\n <span>${data.condition}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-orange-50\/50 p-4 rounded-2xl border border-orange-100 text-xs sm:text-sm text-orange-950\">\r\n <strong class=\"block font-semibold mb-1 text-orange-900\"><i class=\"fa-solid fa-circle-info mr-1\"><\/i> \u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19:<\/strong>\r\n ${data.desc}\r\n <\/div>\r\n `;\r\n\r\n modal.classList.remove('hidden');\r\n setTimeout(() => {\r\n modalContent.classList.remove('scale-95', 'opacity-0');\r\n modalContent.classList.add('scale-100', 'opacity-100');\r\n }, 10);\r\n }\r\n\r\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e1b\u0e34\u0e14 Modal\r\n function closeModal() {\r\n const modal = document.getElementById('detailModal');\r\n const modalContent = document.getElementById('modalContent');\r\n \r\n modalContent.classList.remove('scale-100', 'opacity-100');\r\n modalContent.classList.add('scale-95', 'opacity-0');\r\n setTimeout(() => {\r\n modal.classList.add('hidden');\r\n }, 200);\r\n }\r\n\r\n window.onclick = function(event) {\r\n const modal = document.getElementById('detailModal');\r\n if (event.target === modal) {\r\n closeModal();\r\n }\r\n }\r\n <\/script>\r\n\r\n <script>\r\n (function(){\r\n const $=id=>document.getElementById(id);\r\n const box=$('process-container'),fill=$('tlFill'),track=$('tlTrack'),bar=$('scrollBar'),hud=$('hud'),\r\n ring=$('hudRing'),pctEl=$('hudPct'),stepEl=$('hudStep'),titleEl=$('hudTitle'),nextBtn=$('hudNext'),\r\n all=[...box.querySelectorAll('.step-item')],C=138.2;\r\n let st={vis:[],cs:[],bt:0,cur:-1},celebrated=false,ticking=false;\r\n\r\n all.forEach((it,i)=>{\r\n const n=it.querySelector(':scope > .absolute');\r\n n.classList.add('node');n.dataset.n=i+1;\r\n it.dataset.title=it.querySelector('h3').textContent.trim();\r\n });\r\n all[all.length-1].classList.add('is-final');\r\n\r\n const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.15});\r\n all.forEach(i=>io.observe(i));\r\n\r\n function celebrate(){\r\n if(matchMedia('(prefers-reduced-motion:reduce)').matches)return;\r\n const r=all[all.length-1].querySelector('.node').getBoundingClientRect();\r\n const colors=['#f97316','#fbbf24','#3b82f6','#1e3a8a','#ffffff'];\r\n for(let i=0;i<40;i++){\r\n const c=document.createElement('i');c.className='cf';\r\n c.style.left=(r.left+r.width\/2)+'px';c.style.top=(r.top+r.height\/2)+'px';\r\n c.style.background=colors[i%colors.length];\r\n c.style.setProperty('--dx',(Math.random()*500-250)+'px');\r\n c.style.setProperty('--dy',(Math.random()*-320-60)+'px');\r\n document.body.appendChild(c);setTimeout(()=>c.remove(),1800);\r\n }\r\n }\r\n\r\n function update(){\r\n ticking=false;\r\n const vis=all.filter(i=>i.offsetParent!==null);\r\n if(!vis.length)return;\r\n const bt=box.getBoundingClientRect().top+scrollY;\r\n const cs=vis.map(i=>{const r=i.querySelector('.node').getBoundingClientRect();return r.top+scrollY+r.height\/2-bt});\r\n const first=cs[0],last=cs[cs.length-1],span=Math.max(last-first,1);\r\n const ref=scrollY+innerHeight*.55-bt;\r\n track.style.top=first+'px';track.style.height=span+'px';\r\n fill.style.height=Math.max(0,Math.min(ref-first,span))+'px';\r\n\r\n let cur=-1;cs.forEach((c,i)=>{if(c<=ref)cur=i});\r\n const end=cur===vis.length-1;\r\n all.forEach(i=>i.classList.remove('is-done','is-active','is-todo'));\r\n vis.forEach((it,i)=>{\r\n const s=(end||i<cur)?'done':i===cur?'active':'todo';\r\n it.classList.add('is-'+s);\r\n const nd=it.querySelector('.node');\r\n if(!it.classList.contains('is-final')&&nd.dataset.s!==s){\r\n nd.dataset.s=s;\r\n nd.innerHTML=s==='done'?'<i class=\"fa-solid fa-check\"><\/i>':nd.dataset.n;\r\n }\r\n });\r\n\r\n const p=Math.max(0,Math.min(1,(ref-first)\/span));\r\n ring.style.strokeDashoffset=C*(1-p);\r\n pctEl.textContent=Math.round(p*100)+'%';\r\n stepEl.textContent=cur<0?'\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e40\u0e23\u0e34\u0e48\u0e21':(end?'\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c \ud83c\udf89':'\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19 '+(cur+1)+' \/ '+vis.length);\r\n titleEl.textContent=cur<0?'\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e25\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19':vis[cur].dataset.title;\r\n nextBtn.firstElementChild.className='fa-solid '+(end?'fa-arrow-up':'fa-chevron-down');\r\n hud.classList.toggle('show',box.getBoundingClientRect().top<innerHeight*.8);\r\n\r\n const max=document.documentElement.scrollHeight-innerHeight;\r\n bar.style.width=(max>0?scrollY\/max*100:0)+'%';\r\n\r\n if(end&&!celebrated){celebrated=true;celebrate()}\r\n if(!end&&cur<vis.length-3)celebrated=false;\r\n st={vis,cs,bt,cur};\r\n }\r\n const tick=()=>{if(!ticking){ticking=true;requestAnimationFrame(update)}};\r\n\r\n nextBtn.addEventListener('click',()=>{\r\n const {cs,bt,cur}=st;\r\n if(cur>=cs.length-1){scrollTo({top:bt-120,behavior:'smooth'});return}\r\n scrollTo({top:cs[cur+1]+bt-innerHeight*.4,behavior:'smooth'});\r\n });\r\n\r\n const _f=window.filterRole;\r\n window.filterRole=function(r){_f(r);celebrated=false;requestAnimationFrame(()=>requestAnimationFrame(update))};\r\n\r\n addEventListener('scroll',tick,{passive:true});\r\n addEventListener('resize',tick);\r\n addEventListener('load',update);\r\n if(document.fonts&&document.fonts.ready)document.fonts.ready.then(update);\r\n update();\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e14\u0e32\u0e27\u0e19\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28 \u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28 – \u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 0% \u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e25\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 \u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28 \u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e01\u0e23\u0e2d\u0e1a\u0e40\u0e27\u0e25\u0e32 \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a \u0e41\u0e25\u0e30\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e01\u0e49\u0e44\u0e02\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a \u0e41\u0e2a\u0e14\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 (Process Owner) \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer) \u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (End-User) \u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01 \u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e41\u0e15\u0e48\u0e25\u0e30\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e0a\u0e34\u0e07\u0e25\u0e36\u0e01 \u0e40\u0e0a\u0e48\u0e19 \u0e01\u0e23\u0e2d\u0e1a\u0e40\u0e27\u0e25\u0e32\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19 \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07 \u0e41\u0e25\u0e30\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02 (Feedback Loop) 1 \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e15\u0e32\u0e21\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19 \u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 2 \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 \u2794 \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 \u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e23\u0e31\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 \u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 \/ \u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e17\u0e33\u0e01\u0e32\u0e23\u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e41\u0e25\u0e30\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a \/ \u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 3 \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 \u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 […]<\/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":{"footnotes":""},"class_list":["post-7770","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages\/7770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7770"}],"version-history":[{"count":23,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages\/7770\/revisions"}],"predecessor-version":[{"id":7794,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages\/7770\/revisions\/7794"}],"wp:attachment":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n \u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28 - \u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Prompt:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n \r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n fontFamily: {\r\n prompt: ['Prompt', 'sans-serif'],\r\n },\r\n colors: {\r\n navy: {\r\n 800: '#1e3a8a',\r\n 900: '#0f172a',\r\n },\r\n orange: {\r\n 500: '#f97316',\r\n 600: '#ea580c',\r\n }\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n <style>\r\n body {\r\n font-family: 'Prompt', sans-serif;\r\n background-color: #f8fafc;\r\n }\r\n .custom-shadow {\r\n box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.05);\r\n }\r\n .step-card {\r\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n .step-card:hover {\r\n transform: translateY(-3px);\r\n border-color: #f97316;\r\n }\r\n\r\n \/* ===== Progress WOW ===== *\/\r\n #scrollBar{position:fixed;top:0;left:0;height:5px;width:0;z-index:70;background:linear-gradient(90deg,#1e3a8a,#3b82f6,#f97316,#fbbf24,#f97316);background-size:200% 100%;animation:shimmer 3s linear infinite;box-shadow:0 0 12px rgba(249,115,22,.7);border-radius:0 4px 4px 0}\r\n @keyframes shimmer{to{background-position:-200% 0}}\r\n .tl-track{position:absolute;left:1.5rem;width:4px;transform:translateX(-50%);margin:0!important;border-radius:4px;z-index:1;pointer-events:none;background:repeating-linear-gradient(to bottom,#bfdbfe 0 6px,transparent 6px 12px)}\r\n @media(min-width:640px){.tl-track{left:50%}}\r\n .tl-fill{position:absolute;top:0;left:0;width:100%;height:0;border-radius:4px;background:linear-gradient(to bottom,#f97316,#fbbf24);box-shadow:0 0 14px 2px rgba(249,115,22,.55);transition:height .15s linear}\r\n .tl-fill::after{content:\"\";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;transform:translateX(-50%);border-radius:50%;background:#fff;border:3px solid #f97316;animation:head 1.6s infinite}\r\n @keyframes head{0%{box-shadow:0 0 0 0 rgba(249,115,22,.6)}70%,100%{box-shadow:0 0 0 14px rgba(249,115,22,0)}}\r\n .step-item .node{transition:background .5s,color .5s,box-shadow .5s,scale .5s}\r\n .step-item.is-todo .node{background:#fff!important;color:#94a3b8!important;box-shadow:0 0 0 2px #cbd5e1}\r\n .step-item.is-done .node,.step-item.is-active .node{background:linear-gradient(135deg,#f97316,#fbbf24)!important;color:#fff!important;box-shadow:0 0 0 4px rgba(249,115,22,.18),0 6px 16px rgba(249,115,22,.45)}\r\n .step-item.is-active .node{scale:1.2}\r\n .step-item.is-active .node::after{content:\"\";position:absolute;inset:-4px;border-radius:inherit;border:2px solid #f97316;animation:ripple 1.6s ease-out infinite}\r\n @keyframes ripple{to{transform:scale(1.7);opacity:0}}\r\n .step-card{position:relative;overflow:hidden}\r\n .step-card::before{content:\"\";position:absolute;left:0;top:0;height:4px;width:100%;background:linear-gradient(90deg,#f97316,#fbbf24);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.2,.8,.2,1)}\r\n .step-item.is-done .step-card::before,.step-item.is-active .step-card::before{transform:scaleX(1)}\r\n .step-item.is-active .step-card{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.15),0 18px 36px -10px rgba(249,115,22,.35)}\r\n .step-item .step-card{opacity:0;transform:translateX(48px)}\r\n @media(min-width:640px){.step-item:nth-child(odd) .step-card{transform:translateX(-48px)}}\r\n .step-item.in .step-card{opacity:1;transform:none;transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s}\r\n .step-item.in .step-card:hover{transform:translateY(-4px)}\r\n .step-card .fa-rotate-left{display:inline-block;animation:ccw 2.5s linear infinite}\r\n @keyframes ccw{to{transform:rotate(-360deg)}}\r\n #hud{position:fixed;right:1rem;bottom:1rem;z-index:60;display:flex;align-items:center;gap:.75rem;padding:.5rem;background:rgba(15,23,42,.9);backdrop-filter:blur(10px);color:#fff;border-radius:9999px;box-shadow:0 12px 30px rgba(15,23,42,.35);border:1px solid rgba(249,115,22,.45);opacity:0;transform:translateY(20px);pointer-events:none;transition:.4s;max-width:calc(100vw - 2rem)}\r\n #hud.show{opacity:1;transform:none;pointer-events:auto}\r\n #hud .ring{position:relative;width:52px;height:52px;flex:none}\r\n #hud svg{transform:rotate(-90deg)}\r\n #hud #hudRing{transition:stroke-dashoffset .4s}\r\n #hud .ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:.78rem}\r\n #hud .txt{min-width:0;max-width:190px}\r\n #hud .txt small{display:block;color:#fb923c;font-size:.7rem;font-weight:600}\r\n #hud .txt span{display:block;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\r\n #hud button{width:40px;height:40px;border-radius:50%;background:#f97316;color:#fff;flex:none;transition:background .2s,transform .2s}\r\n #hud button:hover{background:#ea580c;transform:scale(1.08)}\r\n .cf{position:fixed;width:8px;height:12px;z-index:80;pointer-events:none;animation:cf 1.7s ease-out forwards}\r\n @keyframes cf{to{transform:translate(var(--dx),var(--dy)) rotate(720deg);opacity:0}}\r\n @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.step-item .step-card{opacity:1;transform:none}}\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800 antialiased min-h-screen flex flex-col\">\r\n\r\n <div id=\"scrollBar\"><\/div>\r\n <div id=\"hud\" role=\"status\" aria-live=\"polite\">\r\n <div class=\"ring\">\r\n <svg width=\"52\" height=\"52\" viewBox=\"0 0 52 52\"><circle cx=\"26\" cy=\"26\" r=\"22\" fill=\"none\" stroke=\"rgba(255,255,255,.15)\" stroke-width=\"5\"\/><circle id=\"hudRing\" cx=\"26\" cy=\"26\" r=\"22\" fill=\"none\" stroke=\"#f97316\" stroke-width=\"5\" stroke-linecap=\"round\" stroke-dasharray=\"138.2\" stroke-dashoffset=\"138.2\"\/><\/svg>\r\n <b id=\"hudPct\">0%<\/b>\r\n <\/div>\r\n <div class=\"txt\"><small id=\"hudStep\">\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e40\u0e23\u0e34\u0e48\u0e21<\/small><span id=\"hudTitle\">\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e25\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19<\/span><\/div>\r\n <button id=\"hudNext\" aria-label=\"\u0e44\u0e1b\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e16\u0e31\u0e14\u0e44\u0e1b\"><i class=\"fa-solid fa-chevron-down\"><\/i><\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"wf-header\" class=\"text-white shadow-xl relative overflow-hidden\" style=\"background:linear-gradient(90deg,#0f172a,#1e3a8a 50%,#0f172a);color:#fff;border-radius:0 0 1.5rem 1.5rem\">\r\n <div class=\"absolute inset-0 opacity-10 bg-[radial-gradient(#f97316_1px,transparent_1px)] [background-size:20px_20px]\"><\/div>\r\n <div class=\"max-w-7xl mx-auto px-4 py-8 sm:px-12 lg:px-16 relative z-10 text-center\">\r\n <span class=\"inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs sm:text-sm font-semibold bg-orange-500\/20 text-orange-400 border border-orange-500\/30 mb-3\">\r\n <i class=\"fa-solid fa-diagram-project\"><\/i> \u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\r\n <\/span>\r\n <h1 class=\"text-2xl sm:text-4xl lg:text-5xl font-bold tracking-tight mb-3\" style=\"color:#fff;margin-top:0\">\r\n \u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\r\n <\/h1>\r\n <p class=\"text-slate-300 max-w-2xl mx-auto text-sm sm:text-base font-light\" style=\"color:#cbd5e1\">\r\n \u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e01\u0e23\u0e2d\u0e1a\u0e40\u0e27\u0e25\u0e32 \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a \u0e41\u0e25\u0e30\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e01\u0e49\u0e44\u0e02\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a\r\n <\/p>\r\n \r\n \r\n <div class=\"flex flex-wrap justify-center gap-2 mt-6\">\r\n <button onclick=\"filterRole('all')\" id=\"btn-all\" class=\"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-orange-500 text-white shadow-md\">\r\n <i class=\"fa-solid fa-layer-group mr-1.5\"><\/i> \u0e41\u0e2a\u0e14\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\r\n <\/button>\r\n <button onclick=\"filterRole('owner')\" id=\"btn-owner\" class=\"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-blue-900\/60 text-slate-200 hover:bg-blue-800 border border-blue-700\/50\">\r\n <i class=\"fa-solid fa-user-tie mr-1.5\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 (Process Owner)\r\n <\/button>\r\n <button onclick=\"filterRole('dev')\" id=\"btn-dev\" class=\"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-blue-900\/60 text-slate-200 hover:bg-blue-800 border border-blue-700\/50\">\r\n <i class=\"fa-solid fa-laptop-code mr-1.5\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\r\n <\/button>\r\n <button onclick=\"filterRole('user')\" id=\"btn-user\" class=\"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-blue-900\/60 text-slate-200 hover:bg-blue-800 border border-blue-700\/50\">\r\n <i class=\"fa-solid fa-users mr-1.5\"><\/i> \u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (End-User)\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <main class=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-10 flex-grow w-full\">\r\n \r\n \r\n <div class=\"bg-blue-50 border border-blue-200 rounded-2xl p-4 mb-8 flex items-start gap-3 shadow-sm\">\r\n <div class=\"text-orange-500 text-xl mt-0.5\">\r\n <i class=\"fa-solid fa-circle-info\"><\/i>\r\n <\/div>\r\n <div>\r\n <h3 class=\"font-semibold text-blue-950 text-sm sm:text-base\">\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01<\/h3>\r\n <p class=\"text-blue-900\/80 text-xs sm:text-sm\">\u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e41\u0e15\u0e48\u0e25\u0e30\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e0a\u0e34\u0e07\u0e25\u0e36\u0e01 \u0e40\u0e0a\u0e48\u0e19 \u0e01\u0e23\u0e2d\u0e1a\u0e40\u0e27\u0e25\u0e32\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19 \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07 \u0e41\u0e25\u0e30\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02 (Feedback Loop)<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"process-container\" class=\"space-y-6 relative\">\r\n \r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 1\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(1)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\r\n <\/span>\r\n <span class=\"text-xs text-slate-400\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e15\u0e32\u0e21\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19<\/p>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 2\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(2)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 \u2794 \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e23\u0e31\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 \/ \u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e17\u0e33\u0e01\u0e32\u0e23\u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e41\u0e25\u0e30\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-slate-100 text-slate-700 text-xs px-2 py-0.5 rounded-md font-medium\"><i class=\"fa-solid fa-file-lines text-orange-500 mr-1\"><\/i> \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a \/ \u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 3\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(3)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e08\u0e31\u0e14\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21 \u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c \u0e41\u0e25\u0e30\u0e17\u0e33\u0e04\u0e27\u0e32\u0e21\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14<\/p>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 4\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(4)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-laptop-code mr-1\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 (Doc1)<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a (SRS \/ Requirement Specification)<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-pdf mr-1\"><\/i> \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Doc1 (\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23)<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 5\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(5)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 \u2794 \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34 Doc1<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Doc1 \u0e2b\u0e32\u0e01\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e1a\u0e01\u0e1e\u0e23\u0e48\u0e2d\u0e07\u0e08\u0e30\u0e2a\u0e48\u0e07\u0e04\u0e37\u0e19\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc1 (Comment)] \u0e08\u0e19\u0e01\u0e27\u0e48\u0e32\u0e08\u0e30\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-lines mr-1\"><\/i> \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Doc1 (Comment)<\/span>\r\n <span class=\"bg-orange-50 text-orange-700 text-xs px-2 py-0.5 rounded-md font-medium\"><i class=\"fa-solid fa-rotate-left mr-1\"><\/i> \u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02: \u0e41\u0e01\u0e49\u0e44\u0e02\u0e27\u0e19\u0e25\u0e39\u0e1b\u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 6\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(6)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-laptop-code mr-1\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e23\u0e30\u0e1a\u0e1a<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e17\u0e33\u0e01\u0e32\u0e23\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e23\u0e30\u0e1a\u0e1a \u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e41\u0e25\u0e30\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (Design & Architecture)<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-pdf mr-1\"><\/i> Doc1 (Final), Doc2, Doc4<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 7\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(7)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-laptop-code mr-1\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e15\u0e32\u0e21\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e0b\u0e2d\u0e1f\u0e15\u0e4c\u0e41\u0e27\u0e23\u0e4c (Implement)<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e40\u0e02\u0e35\u0e22\u0e19\u0e42\u0e1b\u0e23\u0e41\u0e01\u0e23\u0e21\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e15\u0e32\u0e21\u0e41\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e44\u0e27\u0e49<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-code mr-1\"><\/i> Doc2, Doc3<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 8\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(8)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-laptop-code mr-1\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07 Implement \u0e40\u0e2a\u0e23\u0e47\u0e08<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a (Test)<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e20\u0e32\u0e22\u0e43\u0e19 \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e1a\u0e31\u0e4a\u0e01\u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07 \u0e2b\u0e32\u0e01\u0e1e\u0e1a\u0e02\u0e49\u0e2d\u0e1c\u0e34\u0e14\u0e1e\u0e25\u0e32\u0e14\u0e08\u0e30\u0e2a\u0e48\u0e07\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc3] \u0e08\u0e19\u0e01\u0e27\u0e48\u0e32\u0e08\u0e30\u0e1c\u0e48\u0e32\u0e19<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-lines mr-1\"><\/i> \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Doc3 (\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a)<\/span>\r\n <span class=\"bg-orange-50 text-orange-700 text-xs px-2 py-0.5 rounded-md font-medium\"><i class=\"fa-solid fa-rotate-left mr-1\"><\/i> \u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02: \u0e41\u0e01\u0e49\u0e44\u0e02 [Doc3] \u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e1c\u0e48\u0e32\u0e19<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 9\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(9)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 1 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d\u0e23\u0e30\u0e1a\u0e1a<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e25\u0e30\u0e2a\u0e32\u0e18\u0e34\u0e15\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e17\u0e23\u0e32\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e2a\u0e39\u0e48\u0e01\u0e32\u0e23\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e08\u0e23\u0e34\u0e07<\/p>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 10\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(10)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07 Implement \u0e40\u0e2a\u0e23\u0e47\u0e08<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e23\u0e30\u0e1a\u0e1a \/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07\u0e41\u0e25\u0e30\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07 \u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19\u0e08\u0e30\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc4] \u0e41\u0e25\u0e49\u0e27\u0e27\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e02\u0e31\u0e49\u0e19\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a \u0e2b\u0e32\u0e01\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e08\u0e36\u0e07\u0e44\u0e1b\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e14\u0e2a\u0e2d\u0e1a<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-lines mr-1\"><\/i> Doc4 (\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e42\u0e14\u0e22 Process Owner)<\/span>\r\n <span class=\"bg-orange-50 text-orange-700 text-xs px-2 py-0.5 rounded-md font-medium\"><i class=\"fa-solid fa-rotate-left mr-1\"><\/i> \u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02: \u0e41\u0e01\u0e49\u0e44\u0e02 [Doc4] \u0e27\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 11\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(11)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-laptop-code mr-1\"><\/i> \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-solid fa-check mr-1\"><\/i> \u0e40\u0e21\u0e37\u0e48\u0e2d\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a \u0e01\u0e48\u0e2d\u0e19\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e0a\u0e35\u0e49\u0e41\u0e08\u0e07 \/ \u0e2d\u0e1a\u0e23\u0e21<\/p>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev,user\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 12\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(12)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e17\u0e38\u0e01\u0e1d\u0e48\u0e32\u0e22\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (\u0e44\u0e21\u0e48\u0e21\u0e35\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02)<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e0a\u0e35\u0e49\u0e41\u0e08\u0e07 \/ \u0e2d\u0e1a\u0e23\u0e21<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e08\u0e31\u0e14\u0e2d\u0e1a\u0e23\u0e21\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e41\u0e01\u0e48\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e08\u0e31\u0e14\u0e17\u0e33\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-book mr-1\"><\/i> Doc5 (\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19)<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner,dev\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-orange-500 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n 13\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-white rounded-2xl p-5 custom-shadow border border-slate-100 step-card cursor-pointer\" onclick=\"openModal(13)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-100 text-blue-800\">\r\n <i class=\"fa-solid fa-user-tie mr-1\"><\/i> \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\r\n <\/span>\r\n <span class=\"text-xs text-orange-600 font-medium\"><i class=\"fa-regular fa-clock mr-1\"><\/i> \u0e20\u0e32\u0e22\u0e43\u0e19 1 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e2d\u0e1a\u0e23\u0e21<\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-slate-900 mb-1\">\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a\u0e07\u0e32\u0e19 \/ \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-600 mb-3\">\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e43\u0e19\u0e08\u0e23\u0e34\u0e07 (Go-Live)<\/p>\r\n <div class=\"flex flex-wrap gap-1.5 mb-3\">\r\n <span class=\"bg-blue-50 text-blue-700 text-xs px-2 py-0.5 rounded-md font-semibold\"><i class=\"fa-solid fa-file-signature mr-1\"><\/i> Doc6 (\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a)<\/span>\r\n <\/div>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-slate-100 text-xs text-slate-500\">\r\n <span class=\"text-orange-600 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"step-item relative flex items-center justify-between sm:justify-normal sm:odd:flex-row-reverse group\" data-role=\"owner\">\r\n <div class=\"hidden sm:block sm:w-1\/2\"><\/div>\r\n <div class=\"absolute left-6 sm:left-1\/2 -translate-x-1\/2 w-10 h-10 rounded-2xl bg-navy-900 text-white flex items-center justify-center font-bold text-sm shadow-md z-10 border-4 border-slate-50\">\r\n <i class=\"fa-solid fa-check\"><\/i>\r\n <\/div>\r\n <div class=\"w-[calc(100%-3.5rem)] sm:w-[calc(50%-2.5rem)] bg-navy-900 text-white rounded-2xl p-5 custom-shadow border border-blue-900 step-card cursor-pointer\" onclick=\"openModal(14)\">\r\n <div class=\"flex items-center justify-between mb-2\">\r\n <span class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-900\/60 text-blue-200\">\r\n <i class=\"fa-solid fa-flag-checkered mr-1\"><\/i> \u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\r\n <\/span>\r\n <\/div>\r\n <h3 class=\"text-base sm:text-lg font-bold text-white mb-1\">\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14<\/h3>\r\n <p class=\"text-xs sm:text-sm text-slate-300 mb-3\">\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e40\u0e02\u0e49\u0e32\u0e2a\u0e39\u0e48\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1a\u0e33\u0e23\u0e38\u0e07\u0e23\u0e31\u0e01\u0e29\u0e32\u0e15\u0e48\u0e2d\u0e44\u0e1b<\/p>\r\n <div class=\"flex items-center justify-between pt-2 border-t border-blue-900 text-xs text-slate-400\">\r\n <span class=\"text-orange-400 font-medium\">\u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 <i class=\"fa-solid fa-arrow-right ml-1\"><\/i><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"tl-track\" id=\"tlTrack\"><div class=\"tl-fill\" id=\"tlFill\"><\/div><\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div class=\"mt-16 bg-white rounded-3xl p-6 sm:p-8 custom-shadow border border-slate-100\">\r\n <h3 class=\"text-xl font-bold text-slate-900 mb-4 flex items-center gap-2\">\r\n <i class=\"fa-solid fa-folder-open text-orange-500\"><\/i> \u0e17\u0e33\u0e40\u0e19\u0e35\u0e22\u0e1a\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 (Document Reference)\r\n <\/h3>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\">\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 1<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 (SRS)<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e23\u0e27\u0e1a\u0e23\u0e27\u0e21\u0e41\u0e25\u0e30\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e08\u0e32\u0e01\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 2<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 SRS \/ \u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e01\u0e32\u0e23\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e23\u0e30\u0e1a\u0e1a<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 3<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a (Developer)<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e20\u0e32\u0e22\u0e43\u0e19\u0e42\u0e14\u0e22\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 4<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a (Process Owner)<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e42\u0e14\u0e22\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 5<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e43\u0e19\u0e01\u0e32\u0e23\u0e28\u0e36\u0e01\u0e29\u0e32\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19<\/p>\r\n <\/div>\r\n <div class=\"bg-slate-50 p-4 rounded-2xl border border-slate-200\">\r\n <span class=\"text-xs font-bold px-2.5 py-1 bg-blue-100 text-blue-800 rounded-lg inline-block mb-2\">Doc 6<\/span>\r\n <h4 class=\"font-bold text-slate-800 text-sm\">\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a<\/h4>\r\n <p class=\"text-xs text-slate-500 mt-1\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a\u0e07\u0e32\u0e19\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n \r\n <div class=\"text-slate-400 py-6 mt-16 text-center text-xs sm:text-sm\" style=\"background:#0f172a;color:#94a3b8;border-radius:1.5rem 1.5rem 0 0\">\r\n <p>\u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 • \u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e2d\u0e31\u0e08\u0e09\u0e23\u0e34\u0e22\u0e30<\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"detailModal\" class=\"fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900\/60 backdrop-blur-sm hidden\">\r\n <div class=\"bg-white rounded-3xl max-w-lg w-full p-6 sm:p-8 custom-shadow relative transform transition-all scale-95 opacity-0 duration-300\" id=\"modalContent\">\r\n <button onclick=\"closeModal()\" class=\"absolute top-5 right-5 text-slate-400 hover:text-slate-700 bg-slate-100 hover:bg-slate-200 w-9 h-9 rounded-full flex items-center justify-center transition-all\">\r\n <i class=\"fa-solid fa-xmark\"><\/i>\r\n <\/button>\r\n <div id=\"modal-body-content\">\r\n \r\n <\/div>\r\n <div class=\"mt-6 flex justify-end\">\r\n <button onclick=\"closeModal()\" class=\"px-5 py-2.5 rounded-xl bg-orange-500 text-white font-medium text-sm hover:bg-orange-600 transition-all shadow-md\">\r\n \u0e1b\u0e34\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n \/\/ \u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e41\u0e15\u0e48\u0e25\u0e30\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\r\n const stepsData = {\r\n 1: {\r\n title: \"\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 (Process Owner)\",\r\n time: \"-\",\r\n doc: \"-\",\r\n condition: \"-\",\r\n desc: \"\u0e08\u0e38\u0e14\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e02\u0e2d\u0e07\u0e04\u0e33\u0e02\u0e2d\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2b\u0e23\u0e37\u0e2d\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e08\u0e32\u0e01\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19\u0e20\u0e32\u0e22\u0e43\u0e19\"\r\n },\r\n 2: {\r\n title: \"\u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 \/ \u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e23\u0e31\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07\",\r\n doc: \"\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a \/ \u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\",\r\n condition: \"-\",\r\n desc: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e41\u0e25\u0e30\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e33\u0e01\u0e32\u0e23\u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e27\u0e31\u0e19\u0e40\u0e27\u0e25\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e1e\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e01\u0e47\u0e1a\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e34\u0e07\u0e25\u0e36\u0e01\"\r\n },\r\n 3: {\r\n title: \"\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\",\r\n time: \"-\",\r\n doc: \"-\",\r\n condition: \"-\",\r\n desc: \"\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e17\u0e38\u0e01\u0e1d\u0e48\u0e32\u0e22\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e23\u0e31\u0e1a\u0e1f\u0e31\u0e07\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e41\u0e19\u0e30 \u0e02\u0e2d\u0e1a\u0e40\u0e02\u0e15\u0e07\u0e32\u0e19 \u0e41\u0e25\u0e30\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e17\u0e32\u0e07\u0e18\u0e38\u0e23\u0e01\u0e34\u0e08 (Business Requirements)\"\r\n },\r\n 4: {\r\n title: \"\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\",\r\n role: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\",\r\n doc: \"Doc 1 (\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \/ SRS)\",\r\n condition: \"-\",\r\n desc: \"\u0e1b\u0e23\u0e30\u0e21\u0e27\u0e25\u0e1c\u0e25\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e08\u0e32\u0e01\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e41\u0e25\u0e30\u0e08\u0e31\u0e14\u0e17\u0e33\u0e40\u0e1b\u0e47\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2a\u0e23\u0e38\u0e1b\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\"\r\n },\r\n 5: {\r\n title: \"\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e30\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34 (Doc 1)\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\",\r\n doc: \"Doc 1 (Comment)\",\r\n condition: \"\u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19 \u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e17\u0e33\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc1 (Comment)] \u0e27\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e21\u0e32\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e43\u0e2b\u0e21\u0e48\u0e08\u0e19\u0e01\u0e27\u0e48\u0e32\u0e08\u0e30\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34\",\r\n desc: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e02\u0e2d\u0e07\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 Doc 1 \u0e2b\u0e32\u0e01\u0e1e\u0e1a\u0e08\u0e38\u0e14\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e41\u0e01\u0e49\u0e44\u0e02\u0e08\u0e30\u0e23\u0e30\u0e1a\u0e38\u0e04\u0e2d\u0e21\u0e40\u0e21\u0e19\u0e15\u0e4c\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\"\r\n },\r\n 6: {\r\n title: \"\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\",\r\n role: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e08\u0e32\u0e01\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e2d\u0e19\u0e38\u0e21\u0e31\u0e15\u0e34\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\",\r\n doc: \"Doc 1 (Final), Doc 2 (\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 SRS), Doc 4\",\r\n condition: \"-\",\r\n desc: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e2a\u0e16\u0e32\u0e1b\u0e31\u0e15\u0e22\u0e01\u0e23\u0e23\u0e21\u0e23\u0e30\u0e1a\u0e1a \u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25 \u0e41\u0e25\u0e30\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\"\r\n },\r\n 7: {\r\n title: \"\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e0b\u0e2d\u0e1f\u0e15\u0e4c\u0e41\u0e27\u0e23\u0e4c (Implement)\",\r\n role: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"\u0e15\u0e32\u0e21\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e40\u0e21\u0e34\u0e19\u0e04\u0e27\u0e32\u0e21\u0e22\u0e32\u0e01\u0e07\u0e48\u0e32\u0e22\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a\",\r\n doc: \"Doc 2, Doc 3\",\r\n condition: \"-\",\r\n desc: \"\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e40\u0e02\u0e35\u0e22\u0e19\u0e42\u0e04\u0e49\u0e14\u0e41\u0e25\u0e30\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e15\u0e32\u0e21\u0e41\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e44\u0e27\u0e49\u0e43\u0e19\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e48\u0e2d\u0e19\u0e2b\u0e19\u0e49\u0e32\"\r\n },\r\n 8: {\r\n title: \"\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a (Test)\",\r\n role: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07 Implement \u0e40\u0e2a\u0e23\u0e47\u0e08\",\r\n doc: \"Doc 3 (\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a)\",\r\n condition: \"\u0e2b\u0e32\u0e01\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e25\u0e49\u0e27\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19 \u0e08\u0e30\u0e15\u0e49\u0e2d\u0e07\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc3] \u0e41\u0e25\u0e30\u0e17\u0e33\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e0b\u0e49\u0e33\",\r\n desc: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e17\u0e33\u0e01\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e20\u0e32\u0e22\u0e43\u0e19 (Internal Testing) \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e41\u0e25\u0e30\u0e41\u0e01\u0e49\u0e44\u0e02\u0e02\u0e49\u0e2d\u0e1a\u0e01\u0e1e\u0e23\u0e48\u0e2d\u0e07\u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\"\r\n },\r\n 9: {\r\n title: \"\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d\u0e23\u0e30\u0e1a\u0e1a\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 1 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\",\r\n doc: \"-\",\r\n condition: \"-\",\r\n desc: \"\u0e19\u0e33\u0e40\u0e2a\u0e19\u0e2d\u0e23\u0e30\u0e1a\u0e1a\u0e17\u0e35\u0e48\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e41\u0e25\u0e49\u0e27\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e17\u0e23\u0e32\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07\"\r\n },\r\n 10: {\r\n title: \"\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e23\u0e30\u0e1a\u0e1a \/ \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 (Process Owner)\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07 Implement \u0e40\u0e2a\u0e23\u0e47\u0e08\",\r\n doc: \"Doc 4 (\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e42\u0e14\u0e22 Process Owner)\",\r\n condition: \"\u0e2b\u0e32\u0e01\u0e44\u0e21\u0e48\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19 \u0e43\u0e2b\u0e49\u0e41\u0e01\u0e49\u0e44\u0e02 [Doc4] \u0e41\u0e25\u0e49\u0e27\u0e27\u0e19\u0e01\u0e25\u0e31\u0e1a\u0e44\u0e1b\u0e02\u0e31\u0e49\u0e19\u0e27\u0e34\u0e40\u0e04\u0e23\u0e32\u0e30\u0e2b\u0e4c\u0e41\u0e25\u0e30\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a \u0e2b\u0e32\u0e01\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19 \u0e44\u0e1b\u0e02\u0e31\u0e49\u0e19\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e14\u0e2a\u0e2d\u0e1a\",\r\n desc: \"\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e08\u0e23\u0e34\u0e07 \u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e41\u0e25\u0e30\u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14\"\r\n },\r\n 11: {\r\n title: \"\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\",\r\n role: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer)\",\r\n time: \"-\",\r\n doc: \"-\",\r\n condition: \"\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e1c\u0e25\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a [Doc4] \u0e16\u0e39\u0e01\u0e15\u0e49\u0e2d\u0e07\u0e04\u0e23\u0e1a\u0e16\u0e49\u0e27\u0e19\",\r\n desc: \"\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e25\u0e49\u0e32\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e23\u0e30\u0e1a\u0e1a \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07\u0e01\u0e48\u0e2d\u0e19\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e0a\u0e35\u0e49\u0e41\u0e08\u0e07 \/ \u0e2d\u0e1a\u0e23\u0e21\"\r\n },\r\n 12: {\r\n title: \"\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e0a\u0e35\u0e49\u0e41\u0e08\u0e07 \/ \u0e2d\u0e1a\u0e23\u0e21\",\r\n role: \"\u0e17\u0e38\u0e01\u0e1d\u0e48\u0e32\u0e22\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 4 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e17\u0e14\u0e25\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (\u0e44\u0e21\u0e48\u0e21\u0e35\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02)\",\r\n doc: \"Doc 5 (\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19)\",\r\n condition: \"-\",\r\n desc: \"\u0e08\u0e31\u0e14\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e2d\u0e1a\u0e23\u0e21\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e01\u0e31\u0e1a\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e41\u0e08\u0e01\u0e08\u0e48\u0e32\u0e22\u0e04\u0e39\u0e48\u0e21\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\"\r\n },\r\n 13: {\r\n title: \"\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a\u0e07\u0e32\u0e19 \/ \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\",\r\n role: \"\u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\",\r\n time: \"\u0e20\u0e32\u0e22\u0e43\u0e19 1 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e0a\u0e35\u0e49\u0e41\u0e08\u0e07 \/ \u0e2d\u0e1a\u0e23\u0e21\",\r\n doc: \"Doc 6 (\u0e2b\u0e19\u0e31\u0e07\u0e2a\u0e37\u0e2d\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a)\",\r\n condition: \"-\",\r\n desc: \"\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e01\u0e32\u0e23\u0e2a\u0e48\u0e07\u0e21\u0e2d\u0e1a\u0e07\u0e32\u0e19\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e17\u0e32\u0e07\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07 (Go-Live)\"\r\n },\r\n 14: {\r\n title: \"\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e38\u0e14\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\",\r\n role: \"\u0e17\u0e38\u0e01\u0e1d\u0e48\u0e32\u0e22\",\r\n time: \"-\",\r\n doc: \"-\",\r\n condition: \"-\",\r\n desc: \"\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e34\u0e49\u0e19\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c\"\r\n }\r\n };\r\n\r\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e01\u0e23\u0e2d\u0e07\u0e15\u0e32\u0e21\u0e1a\u0e17\u0e1a\u0e32\u0e17\r\n function filterRole(role) {\r\n const items = document.querySelectorAll('.step-item');\r\n const buttons = document.querySelectorAll('#wf-header button[onclick^=\"filterRole\"]');\r\n \r\n \/\/ \u0e2a\u0e25\u0e31\u0e1a\u0e2a\u0e16\u0e32\u0e19\u0e30\u0e1b\u0e38\u0e48\u0e21\r\n buttons.forEach(btn => {\r\n btn.className = \"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-blue-900\/60 text-slate-200 hover:bg-blue-800 border border-blue-700\/50\";\r\n });\r\n document.getElementById('btn-' + role).className = \"px-4 py-2 rounded-xl text-xs sm:text-sm font-medium transition-all bg-orange-500 text-white shadow-md\";\r\n\r\n \/\/ \u0e01\u0e23\u0e2d\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\r\n items.forEach(item => {\r\n if(role === 'all') {\r\n item.style.display = 'flex';\r\n } else {\r\n const roles = item.getAttribute('data-role');\r\n if(roles.includes(role)) {\r\n item.style.display = 'flex';\r\n } else {\r\n item.style.display = 'none';\r\n }\r\n }\r\n });\r\n }\r\n\r\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e40\u0e1b\u0e34\u0e14 Modal\r\n function openModal(stepId) {\r\n const data = stepsData[stepId];\r\n const modal = document.getElementById('detailModal');\r\n const modalContent = document.getElementById('modalContent');\r\n const bodyContent = document.getElementById('modal-body-content');\r\n\r\n bodyContent.innerHTML = `\r\n <span class=\"px-3 py-1 rounded-lg text-xs font-bold bg-orange-100 text-orange-800 inline-block mb-3\">\r\n \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e17\u0e35\u0e48 ${stepId}\r\n <\/span>\r\n <h3 class=\"text-xl sm:text-2xl font-bold text-slate-900 mb-3\">${data.title}<\/h3>\r\n \r\n <div class=\"space-y-3 text-sm text-slate-600 mb-4\">\r\n <div class=\"flex items-start gap-2 bg-slate-50 p-3 rounded-xl border border-slate-100\">\r\n <i class=\"fa-solid fa-user-gear text-blue-800 mt-1\"><\/i>\r\n <div>\r\n <strong class=\"text-slate-800 block text-xs uppercase tracking-wider text-slate-400\">\u0e1c\u0e39\u0e49\u0e23\u0e31\u0e1a\u0e1c\u0e34\u0e14\u0e0a\u0e2d\u0e1a<\/strong>\r\n <span>${data.role}<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-2 bg-slate-50 p-3 rounded-xl border border-slate-100\">\r\n <i class=\"fa-regular fa-clock text-orange-600 mt-1\"><\/i>\r\n <div>\r\n <strong class=\"text-slate-800 block text-xs uppercase tracking-wider text-slate-400\">\u0e01\u0e23\u0e2d\u0e1a\u0e23\u0e30\u0e22\u0e30\u0e40\u0e27\u0e25\u0e32<\/strong>\r\n <span>${data.time}<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-2 bg-slate-50 p-3 rounded-xl border border-slate-100\">\r\n <i class=\"fa-solid fa-file-lines text-blue-700 mt-1\"><\/i>\r\n <div>\r\n <strong class=\"text-slate-800 block text-xs uppercase tracking-wider text-slate-400\">\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e17\u0e35\u0e48\u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e02\u0e49\u0e2d\u0e07<\/strong>\r\n <span>${data.doc}<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"flex items-start gap-2 bg-slate-50 p-3 rounded-xl border border-slate-100\">\r\n <i class=\"fa-solid fa-triangle-exclamation text-orange-500 mt-1\"><\/i>\r\n <div>\r\n <strong class=\"text-slate-800 block text-xs uppercase tracking-wider text-slate-400\">\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02 \/ \u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02<\/strong>\r\n <span>${data.condition}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-orange-50\/50 p-4 rounded-2xl border border-orange-100 text-xs sm:text-sm text-orange-950\">\r\n <strong class=\"block font-semibold mb-1 text-orange-900\"><i class=\"fa-solid fa-circle-info mr-1\"><\/i> \u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e01\u0e32\u0e23\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19:<\/strong>\r\n ${data.desc}\r\n <\/div>\r\n `;\r\n\r\n modal.classList.remove('hidden');\r\n setTimeout(() => {\r\n modalContent.classList.remove('scale-95', 'opacity-0');\r\n modalContent.classList.add('scale-100', 'opacity-100');\r\n }, 10);\r\n }\r\n\r\n \/\/ \u0e1f\u0e31\u0e07\u0e01\u0e4c\u0e0a\u0e31\u0e19\u0e1b\u0e34\u0e14 Modal\r\n function closeModal() {\r\n const modal = document.getElementById('detailModal');\r\n const modalContent = document.getElementById('modalContent');\r\n \r\n modalContent.classList.remove('scale-100', 'opacity-100');\r\n modalContent.classList.add('scale-95', 'opacity-0');\r\n setTimeout(() => {\r\n modal.classList.add('hidden');\r\n }, 200);\r\n }\r\n\r\n window.onclick = function(event) {\r\n const modal = document.getElementById('detailModal');\r\n if (event.target === modal) {\r\n closeModal();\r\n }\r\n }\r\n <\/script>\r\n\r\n <script>\r\n (function(){\r\n const $=id=>document.getElementById(id);\r\n const box=$('process-container'),fill=$('tlFill'),track=$('tlTrack'),bar=$('scrollBar'),hud=$('hud'),\r\n ring=$('hudRing'),pctEl=$('hudPct'),stepEl=$('hudStep'),titleEl=$('hudTitle'),nextBtn=$('hudNext'),\r\n all=[...box.querySelectorAll('.step-item')],C=138.2;\r\n let st={vis:[],cs:[],bt:0,cur:-1},celebrated=false,ticking=false;\r\n\r\n all.forEach((it,i)=>{\r\n const n=it.querySelector(':scope > .absolute');\r\n n.classList.add('node');n.dataset.n=i+1;\r\n it.dataset.title=it.querySelector('h3').textContent.trim();\r\n });\r\n all[all.length-1].classList.add('is-final');\r\n\r\n const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){e.target.classList.add('in');io.unobserve(e.target)}}),{threshold:.15});\r\n all.forEach(i=>io.observe(i));\r\n\r\n function celebrate(){\r\n if(matchMedia('(prefers-reduced-motion:reduce)').matches)return;\r\n const r=all[all.length-1].querySelector('.node').getBoundingClientRect();\r\n const colors=['#f97316','#fbbf24','#3b82f6','#1e3a8a','#ffffff'];\r\n for(let i=0;i<40;i++){\r\n const c=document.createElement('i');c.className='cf';\r\n c.style.left=(r.left+r.width\/2)+'px';c.style.top=(r.top+r.height\/2)+'px';\r\n c.style.background=colors[i%colors.length];\r\n c.style.setProperty('--dx',(Math.random()*500-250)+'px');\r\n c.style.setProperty('--dy',(Math.random()*-320-60)+'px');\r\n document.body.appendChild(c);setTimeout(()=>c.remove(),1800);\r\n }\r\n }\r\n\r\n function update(){\r\n ticking=false;\r\n const vis=all.filter(i=>i.offsetParent!==null);\r\n if(!vis.length)return;\r\n const bt=box.getBoundingClientRect().top+scrollY;\r\n const cs=vis.map(i=>{const r=i.querySelector('.node').getBoundingClientRect();return r.top+scrollY+r.height\/2-bt});\r\n const first=cs[0],last=cs[cs.length-1],span=Math.max(last-first,1);\r\n const ref=scrollY+innerHeight*.55-bt;\r\n track.style.top=first+'px';track.style.height=span+'px';\r\n fill.style.height=Math.max(0,Math.min(ref-first,span))+'px';\r\n\r\n let cur=-1;cs.forEach((c,i)=>{if(c<=ref)cur=i});\r\n const end=cur===vis.length-1;\r\n all.forEach(i=>i.classList.remove('is-done','is-active','is-todo'));\r\n vis.forEach((it,i)=>{\r\n const s=(end||i<cur)?'done':i===cur?'active':'todo';\r\n it.classList.add('is-'+s);\r\n const nd=it.querySelector('.node');\r\n if(!it.classList.contains('is-final')&&nd.dataset.s!==s){\r\n nd.dataset.s=s;\r\n nd.innerHTML=s==='done'?'<i class=\"fa-solid fa-check\"><\/i>':nd.dataset.n;\r\n }\r\n });\r\n\r\n const p=Math.max(0,Math.min(1,(ref-first)\/span));\r\n ring.style.strokeDashoffset=C*(1-p);\r\n pctEl.textContent=Math.round(p*100)+'%';\r\n stepEl.textContent=cur<0?'\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e40\u0e23\u0e34\u0e48\u0e21':(end?'\u0e40\u0e2a\u0e23\u0e47\u0e08\u0e2a\u0e21\u0e1a\u0e39\u0e23\u0e13\u0e4c \ud83c\udf89':'\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19 '+(cur+1)+' \/ '+vis.length);\r\n titleEl.textContent=cur<0?'\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e25\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19':vis[cur].dataset.title;\r\n nextBtn.firstElementChild.className='fa-solid '+(end?'fa-arrow-up':'fa-chevron-down');\r\n hud.classList.toggle('show',box.getBoundingClientRect().top<innerHeight*.8);\r\n\r\n const max=document.documentElement.scrollHeight-innerHeight;\r\n bar.style.width=(max>0?scrollY\/max*100:0)+'%';\r\n\r\n if(end&&!celebrated){celebrated=true;celebrate()}\r\n if(!end&&cur<vis.length-3)celebrated=false;\r\n st={vis,cs,bt,cur};\r\n }\r\n const tick=()=>{if(!ticking){ticking=true;requestAnimationFrame(update)}};\r\n\r\n nextBtn.addEventListener('click',()=>{\r\n const {cs,bt,cur}=st;\r\n if(cur>=cs.length-1){scrollTo({top:bt-120,behavior:'smooth'});return}\r\n scrollTo({top:cs[cur+1]+bt-innerHeight*.4,behavior:'smooth'});\r\n });\r\n\r\n const _f=window.filterRole;\r\n window.filterRole=function(r){_f(r);celebrated=false;requestAnimationFrame(()=>requestAnimationFrame(update))};\r\n\r\n addEventListener('scroll',tick,{passive:true});\r\n addEventListener('resize',tick);\r\n addEventListener('load',update);\r\n if(document.fonts&&document.fonts.ready)document.fonts.ready.then(update);\r\n update();\r\n })();\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0e14\u0e32\u0e27\u0e19\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28 \u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28 – \u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 0% \u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e40\u0e23\u0e34\u0e48\u0e21\u0e40\u0e25\u0e37\u0e48\u0e2d\u0e19\u0e25\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e07\u0e32\u0e19\u0e40\u0e17\u0e04\u0e42\u0e19\u0e42\u0e25\u0e22\u0e35\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25 \u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28 \u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e07\u0e32\u0e19\u0e21\u0e32\u0e15\u0e23\u0e10\u0e32\u0e19 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e01\u0e23\u0e2d\u0e1a\u0e40\u0e27\u0e25\u0e32 \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a \u0e41\u0e25\u0e30\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e2d\u0e1a\u0e41\u0e01\u0e49\u0e44\u0e02\u0e22\u0e49\u0e2d\u0e19\u0e01\u0e25\u0e31\u0e1a \u0e41\u0e2a\u0e14\u0e07\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14 \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 (Process Owner) \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 (Team Developer) \u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 (End-User) \u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e2d\u0e34\u0e19\u0e42\u0e1f\u0e01\u0e23\u0e32\u0e1f\u0e34\u0e01 \u0e04\u0e25\u0e34\u0e01\u0e17\u0e35\u0e48\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e41\u0e15\u0e48\u0e25\u0e30\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1b\u0e34\u0e14\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e0a\u0e34\u0e07\u0e25\u0e36\u0e01 \u0e40\u0e0a\u0e48\u0e19 \u0e01\u0e23\u0e2d\u0e1a\u0e40\u0e27\u0e25\u0e32\u0e1b\u0e0f\u0e34\u0e1a\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19 \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e2d\u0e49\u0e32\u0e07\u0e2d\u0e34\u0e07 \u0e41\u0e25\u0e30\u0e40\u0e07\u0e37\u0e48\u0e2d\u0e19\u0e44\u0e02\u0e01\u0e32\u0e23\u0e41\u0e01\u0e49\u0e44\u0e02 (Feedback Loop) 1 \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19 \u0e40\u0e23\u0e34\u0e48\u0e21\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e32\u0e23\u0e2a\u0e19\u0e40\u0e17\u0e28\u0e15\u0e32\u0e21\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19 \u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 2 \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 \u2794 \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 \u0e20\u0e32\u0e22\u0e43\u0e19 2 \u0e2a\u0e31\u0e1b\u0e14\u0e32\u0e2b\u0e4c\u0e2b\u0e25\u0e31\u0e07\u0e23\u0e31\u0e1a\u0e40\u0e23\u0e37\u0e48\u0e2d\u0e07 \u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 \/ \u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \u0e2a\u0e48\u0e07\u0e1a\u0e31\u0e19\u0e17\u0e36\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e17\u0e33\u0e01\u0e32\u0e23\u0e19\u0e31\u0e14\u0e2b\u0e21\u0e32\u0e22\u0e41\u0e25\u0e30\u0e40\u0e15\u0e23\u0e35\u0e22\u0e21\u0e04\u0e27\u0e32\u0e21\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e19\u0e01\u0e32\u0e23\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 \u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a \/ \u0e41\u0e1a\u0e1a\u0e1f\u0e2d\u0e23\u0e4c\u0e21\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e04\u0e25\u0e34\u0e01\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14 3 \u0e40\u0e08\u0e49\u0e32\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23 & \u0e17\u0e35\u0e21\u0e1e\u0e31\u0e12\u0e19\u0e32 \u0e1b\u0e23\u0e30\u0e0a\u0e38\u0e21\u0e40\u0e01\u0e47\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 […]<\/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":{"footnotes":""},"class_list":["post-7770","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages\/7770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7770"}],"version-history":[{"count":23,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages\/7770\/revisions"}],"predecessor-version":[{"id":7794,"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=\/wp\/v2\/pages\/7770\/revisions\/7794"}],"wp:attachment":[{"href":"https:\/\/science.mahidol.ac.th\/sosd\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}