{"id":10034,"date":"2026-09-15T14:38:00","date_gmt":"2026-09-15T07:38:00","guid":{"rendered":"https:\/\/www.nppointasia.com\/?page_id=10034"},"modified":"2026-09-18T14:20:34","modified_gmt":"2026-09-18T07:20:34","slug":"card2u-smart-city","status":"publish","type":"page","link":"https:\/\/www.nppointasia.com\/th\/card2u-smart-city\/","title":{"rendered":"Card2U Smart City"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"10034\" class=\"elementor elementor-10034\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16c2431 e-con-full e-flex e-con e-parent\" data-id=\"16c2431\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-342412d elementor-widget elementor-widget-html\" data-id=\"342412d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\"><head><meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\n\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23 CRM CARD2U \u2014 Municipality \/ SAO<\/title>\n<meta name=\"description\" content=\"CARD2U smart city CRM for municipalities and SAOs with digital membership, LINE services, payments, emergency alerts, and citizen engagement.\">\n<meta name=\"robots\" content=\"index, follow\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\/\">\n<link href=\".\/\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23 CRM CARD2U \u2014 \u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25 _ \u0e2d\u0e1a\u0e15._files\/css2\" rel=\"stylesheet\">\n<style>\n  :root{\n    --navy: #0b2545;\n    --navy-2: #123a63;\n    --teal: #0fae9e;\n    --teal-light: #5fd4c7;\n    --gold: #f0a202;\n    --bg: #f5f8fa;\n    --card: #ffffff;\n    --ink: #10233d;\n    --ink-soft: #4c6079;\n    --line: #e2e8ef;\n    --danger: #e0533d;\n    --radius: 18px;\n    --shadow: 0 10px 30px rgba(11,37,69,0.08);\n  }\n  *{box-sizing:border-box; margin:0; padding:0;}\n  html,body{height:100%;}\n  body{\n    font-family:'Sarabun','Prompt',sans-serif;\n    background: var(--bg);\n    color: var(--ink);\n    overflow:hidden;\n  }\n  h1,h2,h3,.headline{font-family:'Prompt',sans-serif;}\n\n  #deck{\n    position:relative;\n    width:100vw;\n    height:100vh;\n  }\n  .slide{\n    position:absolute;\n    inset:0;\n    display:flex;\n    flex-direction:column;\n    padding: 56px 90px;\n    opacity:0;\n    visibility:hidden;\n    transform: translateX(40px);\n    transition: opacity .5s ease, transform .5s ease, visibility .5s;\n    background: var(--bg);\n  }\n  .slide.active{\n    opacity:1;\n    visibility:visible;\n    transform: translateX(0);\n  }\n  .slide-tag{\n    display:inline-flex;\n    align-items:center;\n    gap:8px;\n    align-self:flex-start;\n    background: rgba(15,174,158,0.1);\n    color: var(--teal);\n    font-weight:600;\n    font-size:13px;\n    letter-spacing:.06em;\n    padding:6px 16px;\n    border-radius:999px;\n    margin-bottom:18px;\n  }\n  .slide-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);}\n\n  .headline{\n    font-size:38px;\n    font-weight:700;\n    color:var(--navy);\n    line-height:1.25;\n    margin-bottom:8px;\n  }\n  .sub{\n    font-size:16px;\n    color: var(--ink-soft);\n    margin-bottom:28px;\n    max-width:820px;\n    line-height:1.7;\n  }\n\n  \/* ---------- Cover ---------- *\/\n  #slide-0{\n    background: radial-gradient(circle at 15% 20%, rgba(15,174,158,0.35), transparent 45%),\n                radial-gradient(circle at 85% 80%, rgba(240,162,2,0.25), transparent 45%),\n                linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, #0d3057 100%);\n    color:#fff;\n    justify-content:center;\n    align-items:flex-start;\n    padding:0 100px;\n  }\n  .cover-eyebrow{\n    font-size:14px;\n    letter-spacing:.18em;\n    color: var(--teal-light);\n    font-weight:600;\n    margin-bottom:22px;\n    text-transform:uppercase;\n  }\n  .cover-title{\n    font-size:56px;\n    font-weight:800;\n    line-height:1.18;\n    max-width:900px;\n    margin-bottom:18px;\n  }\n  .cover-title span{color: var(--teal-light);}\n  .cover-sub{\n    font-size:19px;\n    color: rgba(255,255,255,0.78);\n    max-width:680px;\n    line-height:1.8;\n    margin-bottom:34px;\n  }\n  .cover-meta{\n    display:flex;\n    gap:34px;\n    flex-wrap:wrap;\n  }\n  .cover-meta div{\n    border-left:2px solid var(--teal);\n    padding-left:14px;\n  }\n  .cover-meta .k{font-size:12px; color:rgba(255,255,255,0.55); letter-spacing:.08em; margin-bottom:4px;}\n  .cover-meta .v{font-size:17px; font-weight:600;}\n  .cover-badge{\n    position:absolute;\n    right:90px;\n    top:56px;\n    text-align:right;\n  }\n  .cover-badge img{width:64px;opacity:.9;}\n  .cover-tagpill{\n    display:inline-block;\n    border:1px solid rgba(255,255,255,0.35);\n    color: rgba(255,255,255,0.85);\n    padding:5px 14px;\n    border-radius:999px;\n    font-size:12px;\n    letter-spacing:.05em;\n  }\n\n  \/* ---------- Grid helpers ---------- *\/\n  .grid{display:grid; gap:20px; flex:1; min-height:0;}\n  .grid-2{grid-template-columns:1fr 1fr;}\n  .grid-3{grid-template-columns:repeat(3,1fr);}\n  .grid-4{grid-template-columns:repeat(4,1fr);}\n\n  .card{\n    background:var(--card);\n    border:1px solid var(--line);\n    border-radius:var(--radius);\n    padding:22px 24px;\n    box-shadow: var(--shadow);\n  }\n  .card h3{font-size:16px; color:var(--navy); margin-bottom:8px; display:flex; align-items:center; gap:10px;}\n  .card p{font-size:14px; color:var(--ink-soft); line-height:1.65;}\n  .icon-badge{\n    width:38px;height:38px;border-radius:11px;\n    display:flex;align-items:center;justify-content:center;\n    font-size:18px; flex-shrink:0;\n    background: linear-gradient(135deg,var(--teal),var(--navy-2));\n    color:#fff;\n  }\n\n  \/* ---------- Objectives slide ---------- *\/\n  .obj-list{display:flex; flex-direction:column; gap:14px; flex:1; justify-content:center; max-width:920px;}\n  .obj-item{\n    display:flex; gap:18px; align-items:flex-start;\n    background:var(--card); border:1px solid var(--line);\n    border-radius:14px; padding:16px 20px; box-shadow:var(--shadow);\n  }\n  .obj-num{\n    font-family:'Prompt',sans-serif; font-weight:800; font-size:20px;\n    color:var(--teal); width:34px; flex-shrink:0;\n  }\n  .obj-item h4{font-size:16px; color:var(--navy); margin-bottom:4px;}\n  .obj-item p{font-size:14px; color:var(--ink-soft); line-height:1.6;}\n\n  \/* ---------- Feature grid ---------- *\/\n  .feat-card{\n    background:var(--card); border:1px solid var(--line); border-radius:16px;\n    padding:18px 18px; box-shadow:var(--shadow);\n    display:flex; flex-direction:column; gap:8px;\n  }\n  .feat-card .icon-badge{margin-bottom:4px;}\n  .feat-card h4{font-size:14.5px; color:var(--navy); font-weight:600;}\n  .feat-card p{font-size:12.5px; color:var(--ink-soft); line-height:1.55;}\n\n  \/* ---------- Mapping table slide ---------- *\/\n  .table-wrap{\n    flex:1; min-height:0; overflow:auto;\n    background:var(--card); border:1px solid var(--line);\n    border-radius:var(--radius); box-shadow:var(--shadow);\n  }\n  table{width:100%; border-collapse:collapse; font-size:13px;}\n  thead th{\n    position:sticky; top:0;\n    background:var(--navy); color:#fff;\n    text-align:left; padding:12px 16px; font-weight:600;\n    font-family:'Prompt',sans-serif;\n  }\n  tbody td{\n    padding:12px 16px; border-bottom:1px solid var(--line);\n    color:var(--ink); line-height:1.55; vertical-align:top;\n  }\n  tbody tr:nth-child(even){background:#fafcfd;}\n  tbody td:first-child{font-weight:600; color:var(--navy-2); white-space:nowrap;}\n\n  \/* ---------- BENEFITS split ---------- *\/\n  .benefit-col{\n    background:var(--card); border-radius:var(--radius); border:1px solid var(--line);\n    box-shadow:var(--shadow); padding:26px 28px; display:flex; flex-direction:column;\n  }\n  .benefit-col.people{border-top:5px solid var(--teal);}\n  .benefit-col.org{border-top:5px solid var(--gold);}\n  .benefit-head{display:flex; align-items:center; gap:12px; margin-bottom:16px;}\n  .benefit-head .icon-badge{width:46px;height:46px;font-size:22px;}\n  .benefit-head h3{font-size:19px; color:var(--navy);}\n  .benefit-col ul{list-style:none; display:flex; flex-direction:column; gap:12px;}\n  .benefit-col li{\n    display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--ink-soft); line-height:1.6;\n  }\n  .benefit-col li::before{\n    content:\"\u2713\"; color:var(--teal); font-weight:700; flex-shrink:0;\n    background:rgba(15,174,158,0.12); width:20px;height:20px;border-radius:50%;\n    display:flex;align-items:center;justify-content:center; font-size:12px; margin-top:1px;\n  }\n  .benefit-col.org li::before{content:\"\u25c6\"; color:var(--gold); background:rgba(240,162,2,0.12); font-size:10px;}\n\n  \/* ---------- Timeline slide ---------- *\/\n  .tl-progress{display:flex; gap:6px; height:34px; margin-bottom:22px;}\n  .tl-progress-seg{\n    border-radius:8px; display:flex; align-items:center; justify-content:center;\n    font-family:'Prompt',sans-serif; font-size:12.5px; font-weight:600; color:#fff;\n    letter-spacing:.02em;\n  }\n  .tl-progress-seg.dev{background: linear-gradient(90deg,var(--teal),var(--navy-2));}\n  .tl-progress-seg.promo{background: linear-gradient(90deg,#e0900a,var(--gold));}\n\n  .timeline{display:flex; flex:1; gap:20px; align-items:stretch; min-height:0;}\n  .tl-macro{\n    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);\n    box-shadow:var(--shadow); padding:24px 26px; display:flex; flex-direction:column;\n    border-top:5px solid var(--teal); min-width:0;\n  }\n  .tl-macro.alt{border-top-color:var(--gold);}\n  .tl-badge{\n    display:inline-flex; align-self:flex-start; font-family:'Prompt',sans-serif; font-weight:700;\n    font-size:12.5px; color:var(--teal); background:rgba(15,174,158,0.1);\n    padding:5px 12px; border-radius:999px; margin-bottom:12px; letter-spacing:.04em;\n  }\n  .tl-macro.alt .tl-badge{color:var(--gold); background:rgba(240,162,2,0.12);}\n  .tl-macro h3{font-size:19px; color:var(--navy); margin-bottom:8px;}\n  .tl-phase-desc{font-size:13px; color:var(--ink-soft); line-height:1.6; margin-bottom:18px;}\n  .tl-steps{display:flex; flex-direction:column; gap:12px; flex:1; overflow:auto;}\n  .tl-step{display:flex; gap:12px; align-items:flex-start;}\n  .tl-step-month{\n    flex-shrink:0; font-family:'Prompt',sans-serif; font-weight:700; font-size:11.5px;\n    color:#fff; background:var(--navy-2); padding:4px 9px; border-radius:6px; white-space:nowrap; margin-top:1px;\n  }\n  .tl-macro.alt .tl-step-month{background:#c17f04;}\n  .tl-step-text{font-size:13px; color:var(--ink-soft); line-height:1.55;}\n  .tl-step-text b{color:var(--navy); font-weight:600;}\n\n  \/* ---------- Budget slide ---------- *\/\n  .budget-wrap{display:flex; gap:28px; flex:1; min-height:0;}\n  .budget-total{\n    width:270px; flex-shrink:0; background: linear-gradient(160deg,var(--navy),var(--navy-2));\n    border-radius:var(--radius); color:#fff; padding:28px 24px; display:flex; flex-direction:column;\n    justify-content:center; box-shadow:var(--shadow);\n  }\n  .budget-total .k{font-size:12px; letter-spacing:.1em; color:rgba(255,255,255,0.6); margin-bottom:10px;}\n  .budget-total .v{font-family:'Prompt',sans-serif; font-size:34px; font-weight:800; color:var(--teal-light); line-height:1.2;}\n  .budget-total .v small{font-size:16px; color:#fff; font-weight:500;}\n  .budget-total .note{margin-top:16px; font-size:12.5px; color:rgba(255,255,255,0.65); line-height:1.6;}\n  .budget-list{flex:1; display:flex; flex-direction:column; gap:10px; justify-content:center;}\n  .budget-row{\n    display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--line);\n    border-radius:12px; padding:12px 18px; box-shadow:var(--shadow);\n  }\n  .budget-row .label{flex:1; font-size:14px; color:var(--ink); font-weight:500;}\n  .budget-row .bar-wrap{flex:1.4; height:8px; background:#eef2f6; border-radius:6px; overflow:hidden;}\n  .budget-row .bar{height:100%; background: linear-gradient(90deg,var(--teal),var(--navy-2)); border-radius:6px;}\n  .budget-row .amt{width:120px; text-align:right; font-family:'Prompt',sans-serif; font-weight:700; font-size:14px; color:var(--navy);}\n\n  \/* ---------- Closing ---------- *\/\n  #slide-7{\n    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, #0d3057 100%);\n    color:#fff; justify-content:center; align-items:center; text-align:center;\n  }\n  #slide-7 .headline{color:#fff; font-size:40px;}\n  #slide-7 .sub{color:rgba(255,255,255,0.78); margin:0 auto 30px auto; text-align:center;}\n  .cta-row{display:flex; gap:16px;}\n  .cta-btn{\n    padding:14px 30px; border-radius:999px; font-weight:600; font-size:15px;\n    font-family:'Prompt',sans-serif;\n  }\n  .cta-btn.primary{background:var(--teal); color:#062b26;}\n  .cta-btn.ghost{border:1px solid rgba(255,255,255,0.4); color:#fff;}\n  .contact-line{margin-top:36px; font-size:13px; color:rgba(255,255,255,0.55);}\n\n  \/* ---------- Nav ---------- *\/\n  #nav{\n    position:fixed; bottom:26px; left:50%; transform:translateX(-50%);\n    display:flex; align-items:center; gap:18px; z-index:50;\n    background:rgba(255,255,255,0.9); backdrop-filter:blur(6px);\n    padding:10px 18px; border-radius:999px; box-shadow:0 8px 24px rgba(11,37,69,0.15);\n  }\n  #nav button{\n    width:36px;height:36px;border-radius:50%; border:none; cursor:pointer;\n    background:var(--navy); color:#fff; font-size:15px; display:flex; align-items:center; justify-content:center;\n    transition:background .2s;\n  }\n  #nav button:hover{background:var(--teal);}\n  #dots{display:flex; gap:7px;}\n  #dots span{\n    width:8px;height:8px;border-radius:50%; background:#cbd6e2; cursor:pointer; transition:.2s;\n  }\n  #dots span.active{background:var(--teal); width:22px; border-radius:5px;}\n  #counter{font-size:12px; color:var(--ink-soft); font-family:'Prompt',sans-serif; min-width:40px; text-align:center;}\n\n  @media (max-width:1100px){\n    .slide{padding:40px 34px;}\n    .grid-3{grid-template-columns:repeat(2,1fr);}\n    .grid-4{grid-template-columns:repeat(2,1fr);}\n    .timeline{flex-direction:column;}\n    .budget-wrap{flex-direction:column;}\n    .budget-total{width:100%;}\n    .cover-title{font-size:38px;}\n  }\n\n\/* ===== Elementor FULL-WIDTH \/ NO-SIDE-GAP FIX ===== *\/\nhtml, body {\n  width: 100% !important;\n  max-width: 100% !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n}\n\nbody {\n  min-width: 0 !important;\n}\n\n#deck {\n  width: 100% !important;\n  max-width: 100% !important;\n  height: 100vh !important;\n  min-height: 100vh !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n#deck .slide {\n  width: 100% !important;\n  max-width: none !important;\n  box-sizing: border-box !important;\n}\n\n\/* Never create a fake left\/right column from the Elementor widget *\/\n.elementor-widget-html,\n.elementor-widget-html .elementor-widget-container,\n.elementor-element:has(> #deck),\n.elementor-element:has(> .card2u-elementor-en) {\n  width: 100% !important;\n  max-width: 100% !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n}\n\n\/* Keep the original slide spacing on desktop *\/\n#slide-0 {\n  padding-left: clamp(34px, 7vw, 100px) !important;\n  padding-right: clamp(34px, 7vw, 100px) !important;\n}\n\n@media (max-width: 1100px) {\n  #deck .slide {\n    padding-left: 34px !important;\n    padding-right: 34px !important;\n  }\n}\n\n@media (max-width: 600px) {\n  #deck .slide {\n    padding-left: 24px !important;\n    padding-right: 24px !important;\n  }\n}\n\n\n\/* ===== FIX: FIT INSIDE WORDPRESS \/ ELEMENTOR VIEWPORT ===== *\/\nhtml, body {\n  height: 100% !important;\n  min-height: 0 !important;\n}\n\n#deck {\n  \/* The WordPress header occupies space above the HTML widget.\n     90px matches the header shown in the Elementor\/site preview. *\/\n  height: calc(100dvh - 90px) !important;\n  min-height: calc(100dvh - 90px) !important;\n  max-height: calc(100dvh - 90px) !important;\n  width: 100% !important;\n  max-width: 100% !important;\n  overflow: hidden !important;\n}\n\n#deck .slide {\n  width: 100% !important;\n  height: 100% !important;\n  min-height: 0 !important;\n  max-height: 100% !important;\n  overflow: hidden !important;\n  padding-top: clamp(28px, 4vh, 48px) !important;\n  padding-bottom: clamp(28px, 4vh, 48px) !important;\n}\n\n\/* Page 2 \/ Objectives: make all 5 cards fit rather than dropping\n   the last card below the visible viewport. *\/\n#slide-1 .obj-list {\n  min-height: 0 !important;\n  overflow: hidden !important;\n  justify-content: flex-start !important;\n  gap: 12px !important;\n}\n\n#slide-1 .obj-item {\n  flex: 1 1 0 !important;\n  min-height: 0 !important;\n  padding: 12px 18px !important;\n}\n\n#slide-1 .obj-item p {\n  line-height: 1.45 !important;\n}\n\n\/* Feature page: allow the grid to compress to the available height. *\/\n#slide-2 .grid {\n  min-height: 0 !important;\n  overflow: hidden !important;\n}\n\n#slide-2 .feat-card {\n  min-height: 0 !important;\n  padding: 14px 16px !important;\n}\n\n\/* Mapping table stays inside the slide. *\/\n#slide-3 .table-wrap {\n  min-height: 0 !important;\n  overflow: auto !important;\n}\n\n\/* Benefits \/ timeline also stay inside the visible area. *\/\n#slide-4 .grid,\n#slide-5 .timeline,\n#slide-5 .tl-steps {\n  min-height: 0 !important;\n}\n\n\/* Elementor itself must not add another viewport-sized wrapper. *\/\n.elementor-widget-html,\n.elementor-widget-html > .elementor-widget-container {\n  height: auto !important;\n  min-height: 0 !important;\n  max-height: none !important;\n}\n\n\/* Mobile: header is shorter, so use the actual remaining viewport\n   rather than a fixed 90px subtraction. *\/\n@media (max-width: 767px) {\n  #deck {\n    height: calc(100dvh - 70px) !important;\n    min-height: calc(100dvh - 70px) !important;\n    max-height: calc(100dvh - 70px) !important;\n  }\n\n  #deck .slide {\n    padding: 24px 20px !important;\n  }\n\n  #slide-1 .obj-item {\n    flex: 0 0 auto !important;\n  }\n\n  #slide-1 .obj-list {\n    overflow-y: auto !important;\n    padding-bottom: 8px !important;\n  }\n}\n\n\n\/* ===== FINAL: PROJECT SCOPE (SLIDE 2) \u2014 FIT ALL CARDS ===== *\/\n#slide-2 {\n  overflow-y: auto !important;\n  overflow-x: hidden !important;\n  padding-top: 30px !important;\n  padding-bottom: 70px !important;\n}\n\n#slide-2 .slide-tag {\n  margin-bottom: 12px !important;\n}\n\n#slide-2 .headline {\n  margin-bottom: 6px !important;\n}\n\n#slide-2 .sub {\n  margin-bottom: 16px !important;\n  line-height: 1.45 !important;\n}\n\n#slide-2 .grid.grid-4 {\n  flex: 0 0 auto !important;\n  display: grid !important;\n  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;\n  grid-template-rows: repeat(3, minmax(0, auto)) !important;\n  grid-auto-rows: auto !important;\n  gap: 12px !important;\n  height: auto !important;\n  min-height: 0 !important;\n  max-height: none !important;\n  overflow: visible !important;\n  align-content: start !important;\n}\n\n#slide-2 .feat-card {\n  min-width: 0 !important;\n  min-height: 108px !important;\n  height: 108px !important;\n  padding: 11px 14px !important;\n  gap: 4px !important;\n  overflow: hidden !important;\n  justify-content: flex-start !important;\n}\n\n#slide-2 .feat-card .icon-badge {\n  width: 32px !important;\n  height: 32px !important;\n  min-width: 32px !important;\n  min-height: 32px !important;\n  font-size: 15px !important;\n  border-radius: 9px !important;\n  margin-bottom: 2px !important;\n}\n\n#slide-2 .feat-card h4 {\n  font-size: 13px !important;\n  line-height: 1.25 !important;\n  margin: 0 !important;\n}\n\n#slide-2 .feat-card p {\n  font-size: 11px !important;\n  line-height: 1.4 !important;\n  margin: 0 !important;\n}\n\n@media (max-width: 1100px) {\n  #slide-2 {\n    padding-top: 24px !important;\n  }\n\n  #slide-2 .grid.grid-4 {\n    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;\n    grid-template-rows: none !important;\n    grid-auto-rows: minmax(108px, auto) !important;\n  }\n\n  #slide-2 .feat-card {\n    height: auto !important;\n    min-height: 108px !important;\n  }\n}\n\n@media (max-width: 600px) {\n  #slide-2 {\n    padding: 20px 20px 70px !important;\n  }\n\n  #slide-2 .grid.grid-4 {\n    grid-template-columns: 1fr !important;\n    grid-auto-rows: auto !important;\n    gap: 10px !important;\n  }\n\n  #slide-2 .feat-card {\n    height: auto !important;\n    min-height: 0 !important;\n    padding: 12px !important;\n  }\n}\n\n\n\/* ===== FINAL MOBILE FIX \u2014 SLIDE 2 ===== *\/\n@media (max-width: 767px) {\n  \/* Let the Project Scope slide scroll vertically on phones.\n     The desktop slide-deck behavior is retained for larger screens. *\/\n  html, body {\n    overflow: hidden !important;\n  }\n\n  #deck {\n    height: calc(100dvh - 70px) !important;\n    min-height: calc(100dvh - 70px) !important;\n    max-height: calc(100dvh - 70px) !important;\n    overflow: hidden !important;\n  }\n\n  #slide-2 {\n    height: 100% !important;\n    max-height: 100% !important;\n    min-height: 0 !important;\n    overflow-x: hidden !important;\n    overflow-y: auto !important;\n    -webkit-overflow-scrolling: touch !important;\n    overscroll-behavior: contain !important;\n    padding: 22px 20px 120px !important;\n  }\n\n  #slide-2 .slide-tag {\n    font-size: 12px !important;\n    padding: 7px 13px !important;\n    margin-bottom: 18px !important;\n  }\n\n  #slide-2 .headline {\n    font-size: clamp(30px, 9vw, 42px) !important;\n    line-height: 1.12 !important;\n    margin-bottom: 12px !important;\n  }\n\n  #slide-2 .sub {\n    font-size: 15px !important;\n    line-height: 1.55 !important;\n    margin-bottom: 20px !important;\n    max-width: none !important;\n  }\n\n  #slide-2 .grid.grid-4 {\n    display: grid !important;\n    grid-template-columns: 1fr !important;\n    grid-template-rows: none !important;\n    grid-auto-rows: auto !important;\n    gap: 12px !important;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n    flex: none !important;\n  }\n\n  #slide-2 .feat-card {\n    width: 100% !important;\n    height: auto !important;\n    min-height: 0 !important;\n    padding: 14px 16px !important;\n    gap: 7px !important;\n    overflow: visible !important;\n  }\n\n  #slide-2 .feat-card .icon-badge {\n    width: 38px !important;\n    height: 38px !important;\n    min-width: 38px !important;\n    min-height: 38px !important;\n    font-size: 18px !important;\n    margin-bottom: 1px !important;\n  }\n\n  #slide-2 .feat-card h4 {\n    font-size: 15px !important;\n    line-height: 1.3 !important;\n    margin: 0 !important;\n  }\n\n  #slide-2 .feat-card p {\n    font-size: 13px !important;\n    line-height: 1.5 !important;\n    margin: 0 !important;\n  }\n\n  \/* Keep the slide navigation from covering the cards on phones. *\/\n  #nav {\n    bottom: 12px !important;\n    padding: 8px 12px !important;\n    gap: 10px !important;\n    max-width: calc(100vw - 20px) !important;\n  }\n\n  #nav button {\n    width: 34px !important;\n    height: 34px !important;\n  }\n\n  #dots {\n    gap: 5px !important;\n    max-width: 150px !important;\n    overflow: hidden !important;\n  }\n\n  #dots span {\n    width: 7px !important;\n    height: 7px !important;\n    flex-shrink: 0 !important;\n  }\n\n  #dots span.active {\n    width: 20px !important;\n  }\n\n  #counter {\n    min-width: 32px !important;\n    font-size: 11px !important;\n  }\n}\n\n\n\/* ===== FINAL MOBILE BEHAVIOR FIX =====\n   On phones, the active slide becomes a normal-flow section so the\n   document itself can scroll vertically. This avoids the fixed\/absolute\n   slide container preventing touch scrolling in LINE\/iOS browsers.\n*\/\n@media (max-width: 767px) {\n  html, body {\n    height: auto !important;\n    min-height: 100% !important;\n    overflow-x: hidden !important;\n    overflow-y: auto !important;\n    -webkit-overflow-scrolling: touch !important;\n  }\n\n  #deck {\n    position: relative !important;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n  }\n\n  #deck .slide {\n    box-sizing: border-box !important;\n    width: 100% !important;\n    height: auto !important;\n    min-height: calc(100dvh - 70px) !important;\n    max-height: none !important;\n    overflow: visible !important;\n    padding: 22px 20px 120px !important;\n  }\n\n  \/* Only the current slide participates in normal page flow. *\/\n  #deck .slide:not(.active) {\n    position: absolute !important;\n    inset: 0 !important;\n    height: 0 !important;\n    min-height: 0 !important;\n    padding: 0 !important;\n    overflow: hidden !important;\n  }\n\n  #deck .slide.active {\n    position: relative !important;\n    inset: auto !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n    transform: none !important;\n    z-index: 2 !important;\n  }\n\n  \/* Project Scope cards: one column, natural height, no clipping. *\/\n  #slide-2 .grid.grid-4 {\n    display: grid !important;\n    grid-template-columns: 1fr !important;\n    grid-template-rows: none !important;\n    grid-auto-rows: auto !important;\n    gap: 12px !important;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n    flex: none !important;\n  }\n\n  #slide-2 .feat-card {\n    width: 100% !important;\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    box-sizing: border-box !important;\n    padding: 16px !important;\n    overflow: visible !important;\n    flex: none !important;\n  }\n\n  #slide-2 .feat-card h4 {\n    margin: 0 !important;\n  }\n\n  #slide-2 .feat-card p {\n    margin: 0 !important;\n  }\n\n  \/* Keep the bottom controls fixed without covering the content. *\/\n  #nav {\n    position: fixed !important;\n    z-index: 9998 !important;\n    left: 50% !important;\n    bottom: 12px !important;\n    transform: translateX(-50%) !important;\n    max-width: calc(100vw - 20px) !important;\n  }\n\n  \/* Let the language switcher stay above the controls. *\/\n  #lang-switcher, #language-switcher {\n    z-index: 10000 !important;\n  }\n}\n\n\n\/* =========================================================\n   FINAL MOBILE READABILITY \u2014 BENEFITS \/ ALL MOBILE SLIDES\n   ========================================================= *\/\n@media (max-width: 767px) {\n\n  \/* Comfortable page margins and readable typography *\/\n  #deck .slide {\n    padding: 26px 20px 135px !important;\n  }\n\n  #deck .headline {\n    font-size: 32px !important;\n    line-height: 1.18 !important;\n    letter-spacing: -0.02em !important;\n    margin-bottom: 14px !important;\n    overflow-wrap: normal !important;\n    word-break: normal !important;\n  }\n\n  #deck .sub {\n    font-size: 16px !important;\n    line-height: 1.65 !important;\n    margin-bottom: 24px !important;\n    max-width: none !important;\n    overflow-wrap: normal !important;\n    word-break: normal !important;\n  }\n\n  #deck .slide-tag {\n    font-size: 12px !important;\n    padding: 7px 14px !important;\n    margin-bottom: 24px !important;\n  }\n\n  \/* ---------- SLIDE 4: BENEFITS ---------- *\/\n  #slide-4 {\n    overflow-y: auto !important;\n    overflow-x: hidden !important;\n    padding-top: 26px !important;\n    padding-bottom: 150px !important;\n  }\n\n  \/* Critical fix: one card per row on phones *\/\n  #slide-4 > .grid.grid-2 {\n    display: grid !important;\n    grid-template-columns: 1fr !important;\n    grid-template-rows: auto !important;\n    gap: 18px !important;\n    width: 100% !important;\n    height: auto !important;\n    min-height: 0 !important;\n    overflow: visible !important;\n    flex: none !important;\n  }\n\n  #slide-4 .benefit-col {\n    width: 100% !important;\n    min-width: 0 !important;\n    height: auto !important;\n    min-height: 0 !important;\n    padding: 22px 20px !important;\n    display: block !important;\n    overflow: visible !important;\n  }\n\n  #slide-4 .benefit-head {\n    display: flex !important;\n    align-items: center !important;\n    gap: 14px !important;\n    width: 100% !important;\n    margin-bottom: 20px !important;\n  }\n\n  #slide-4 .benefit-head .icon-badge {\n    width: 48px !important;\n    height: 48px !important;\n    min-width: 48px !important;\n    font-size: 22px !important;\n    margin: 0 !important;\n  }\n\n  #slide-4 .benefit-head h3 {\n    flex: 1 1 auto !important;\n    min-width: 0 !important;\n    font-size: 20px !important;\n    line-height: 1.3 !important;\n    margin: 0 !important;\n    overflow-wrap: normal !important;\n    word-break: normal !important;\n  }\n\n  #slide-4 .benefit-col ul {\n    display: flex !important;\n    flex-direction: column !important;\n    gap: 14px !important;\n    width: 100% !important;\n    margin: 0 !important;\n    padding: 0 !important;\n  }\n\n  #slide-4 .benefit-col li {\n    display: grid !important;\n    grid-template-columns: 24px minmax(0, 1fr) !important;\n    column-gap: 10px !important;\n    align-items: start !important;\n    width: 100% !important;\n    font-size: 16px !important;\n    line-height: 1.6 !important;\n    color: var(--ink-soft) !important;\n    overflow-wrap: normal !important;\n    word-break: normal !important;\n  }\n\n  #slide-4 .benefit-col li::before {\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: 2px !important;\n    font-size: 13px !important;\n  }\n\n  \/* ---------- OTHER SLIDES: prevent narrow text columns ---------- *\/\n  #slide-2 .feat-card,\n  #slide-3 .table-wrap,\n  #slide-5 .tl-macro {\n    overflow-wrap: normal !important;\n    word-break: normal !important;\n  }\n\n  \/* Timeline becomes one column and can scroll naturally *\/\n  #slide-5 {\n    overflow-y: auto !important;\n    overflow-x: hidden !important;\n    padding-bottom: 150px !important;\n  }\n\n  #slide-5 .timeline {\n    display: flex !important;\n    flex-direction: column !important;\n    gap: 18px !important;\n    height: auto !important;\n    min-height: 0 !important;\n    overflow: visible !important;\n  }\n\n  #slide-5 .tl-macro {\n    width: 100% !important;\n    flex: none !important;\n    height: auto !important;\n    min-height: 0 !important;\n    padding: 20px !important;\n  }\n\n  #slide-5 .tl-steps {\n    overflow: visible !important;\n    height: auto !important;\n  }\n\n  \/* Keep bottom navigation clear of page content *\/\n  #nav {\n    bottom: 10px !important;\n    max-width: calc(100vw - 20px) !important;\n  }\n}\n\n<\/style>\n<style>\n\/* ===== FINAL DESKTOP LAYOUT FIX ===== *\/\n\/* Keep the slide content balanced at 100% browser zoom and prevent\n   the objective cards from becoming too short and clipping their text. *\/\n\n@media (min-width: 1101px) {\n  #deck .slide {\n    padding: 34px clamp(34px, 5.8vw, 90px) 78px !important;\n  }\n\n  \/* Project Objectives *\/\n  #slide-1 {\n    overflow: hidden !important;\n  }\n\n  #slide-1 .slide-tag {\n    margin-bottom: 12px !important;\n  }\n\n  #slide-1 .headline {\n    margin-bottom: 8px !important;\n  }\n\n  #slide-1 .sub {\n    margin-bottom: 18px !important;\n    line-height: 1.55 !important;\n  }\n\n  #slide-1 .obj-list {\n    display: flex !important;\n    flex-direction: column !important;\n    justify-content: flex-start !important;\n    flex: 0 0 auto !important;\n    width: min(100%, 1150px) !important;\n    max-width: 1150px !important;\n    gap: 10px !important;\n    margin-top: 2px !important;\n    overflow: visible !important;\n  }\n\n  #slide-1 .obj-item {\n    flex: 0 0 auto !important;\n    min-height: 0 !important;\n    height: auto !important;\n    padding: 12px 20px !important;\n    align-items: flex-start !important;\n  }\n\n  #slide-1 .obj-num {\n    font-size: 20px !important;\n    line-height: 1.35 !important;\n  }\n\n  #slide-1 .obj-item h4 {\n    font-size: 16px !important;\n    line-height: 1.35 !important;\n    margin-bottom: 3px !important;\n  }\n\n  #slide-1 .obj-item p {\n    font-size: 13.5px !important;\n    line-height: 1.45 !important;\n    margin: 0 !important;\n  }\n\n  \/* Keep bottom navigation visually separated from slide content. *\/\n  #nav {\n    bottom: 18px !important;\n    padding: 9px 16px !important;\n    gap: 15px !important;\n  }\n\n  #nav button {\n    width: 36px !important;\n    height: 36px !important;\n  }\n\n  #dots {\n    gap: 6px !important;\n  }\n}\n\n\/* Slightly reduce the excessive vertical whitespace on medium screens. *\/\n@media (min-width: 768px) and (max-width: 1100px) {\n  #deck .slide {\n    padding-top: 28px !important;\n    padding-bottom: 72px !important;\n  }\n\n  #slide-1 .obj-list {\n    justify-content: flex-start !important;\n    gap: 10px !important;\n  }\n\n  #slide-1 .obj-item {\n    flex: 0 0 auto !important;\n    padding: 11px 16px !important;\n  }\n}\n<\/style>\n\n<\/head>\n<body>\n\n<div id=\"deck\">\n\n  <!-- SLIDE 0 : COVER -->\n  <section class=\"slide active\" id=\"slide-0\">\n    <div class=\"cover-badge\">\n      <span class=\"cover-tagpill\">Digital Transformation Proposal<\/span>\n    <\/div>\n    <div class=\"cover-eyebrow\">\u0e02\u0e49\u0e2d\u0e40\u0e2a\u0e19\u0e2d\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23 \u00b7 Smart Local Government<\/div>\n    <h1 class=\"cover-title\">\n    <span style=\"color:#fff;\">\u0e23\u0e30\u0e1a\u0e1a CRM \u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19<\/span><br>\n    <span>\u201dCARD2U\u201d<\/span>\n    <span style=\"color:#fff;\"> \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a \u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25 \/ \u0e2d\u0e1a\u0e15.<\/span>\n<\/h1>\n    <p class=\"cover-sub\">Bangplakot Smart Resident Card \u2014 \u0e1a\u0e31\u0e15\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\u0e1c\u0e48\u0e32\u0e19 LINE Official Account \u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e17\u0e38\u0e01\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07 \u0e2d\u0e1a\u0e15. \u0e44\u0e27\u0e49\u0e43\u0e19\u0e17\u0e35\u0e48\u0e40\u0e14\u0e35\u0e22\u0e27 \u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e20\u0e32\u0e29\u0e35 \u0e2a\u0e32\u0e18\u0e32\u0e23\u0e13\u0e2a\u0e38\u0e02 \u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19 \u0e44\u0e1b\u0e08\u0e19\u0e16\u0e36\u0e07\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e02\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19<\/p>\n    <div class=\"cover-meta\">\n      <div><div class=\"k\">\u0e2b\u0e19\u0e48\u0e27\u0e22\u0e07\u0e32\u0e19<\/div><div class=\"v\">\u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25 \/ \u0e2d\u0e1a\u0e15.<\/div><\/div>\n      <div><div class=\"k\">\u0e41\u0e1e\u0e25\u0e15\u0e1f\u0e2d\u0e23\u0e4c\u0e21<\/div><div class=\"v\">LINE Official Account<\/div><\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SLIDE 1 : \u0e27\u0e31\u0e15\u0e16\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c -->\n  <section class=\"slide\" id=\"slide-1\">\n    <div class=\"slide-tag\"><span class=\"dot\"><\/span>01 \u00b7 \u0e27\u0e31\u0e15\u0e16\u0e38\u0e1b\u0e23\u0e30\u0e2a\u0e07\u0e04\u0e4c\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23<\/div>\n    <h2 class=\"headline\">\u0e17\u0e33\u0e44\u0e21 \u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25 \/ \u0e2d\u0e1a\u0e15. \u0e15\u0e49\u0e2d\u0e07\u0e21\u0e35\u0e23\u0e30\u0e1a\u0e1a CRM<\/h2>\n    <p class=\"sub\">\u0e27\u0e32\u0e07\u0e23\u0e32\u0e01\u0e10\u0e32\u0e19\u0e01\u0e32\u0e23\u0e43\u0e2b\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e22\u0e38\u0e04\u0e43\u0e2b\u0e21\u0e48 \u0e14\u0e49\u0e27\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e23\u0e27\u0e21\u0e28\u0e39\u0e19\u0e22\u0e4c \u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22\u0e1c\u0e48\u0e32\u0e19\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e32\u0e07\u0e17\u0e35\u0e48\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e04\u0e38\u0e49\u0e19\u0e40\u0e04\u0e22\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07 LINE<\/p>\n    <div class=\"obj-list\">\n      <div class=\"obj-item\">\n        <div class=\"obj-num\">01<\/div>\n        <div><h4>\u0e22\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e2a\u0e39\u0e48\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\u0e40\u0e15\u0e47\u0e21\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a<\/h4>\n        <p>\u0e43\u0e2b\u0e49\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e02\u0e2d\u0e07 \u0e2d\u0e1a\u0e15. \u0e1c\u0e48\u0e32\u0e19 LineOA \u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27\u0e43\u0e19\u0e0a\u0e35\u0e27\u0e34\u0e15\u0e1b\u0e23\u0e30\u0e08\u0e33\u0e27\u0e31\u0e19 \u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e15\u0e34\u0e14\u0e15\u0e31\u0e49\u0e07\u0e41\u0e2d\u0e1b\u0e1e\u0e25\u0e34\u0e40\u0e04\u0e0a\u0e31\u0e19\u0e43\u0e2b\u0e21\u0e48<\/p><\/div>\n      <\/div>\n      <div class=\"obj-item\">\n        <div class=\"obj-num\">02<\/div>\n        <div><h4>\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e41\u0e1a\u0e1a\u0e23\u0e27\u0e21\u0e28\u0e39\u0e19\u0e22\u0e4c (Unified CRM)<\/h4>\n        <p>\u0e23\u0e27\u0e21\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01 \u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 \u0e41\u0e25\u0e30\u0e1e\u0e24\u0e15\u0e34\u0e01\u0e23\u0e23\u0e21\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e44\u0e27\u0e49\u0e43\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e40\u0e14\u0e35\u0e22\u0e27 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e0a\u0e49\u0e27\u0e32\u0e07\u0e41\u0e1c\u0e19\u0e19\u0e42\u0e22\u0e1a\u0e32\u0e22\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e40\u0e0a\u0e34\u0e07\u0e23\u0e38\u0e01<\/p><\/div>\n      <\/div>\n      <div class=\"obj-item\">\n        <div class=\"obj-num\">03<\/div>\n        <div><h4>\u0e25\u0e14\u0e20\u0e32\u0e23\u0e30\u0e07\u0e32\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23\u0e41\u0e25\u0e30\u0e07\u0e32\u0e19\u0e0b\u0e49\u0e33\u0e0b\u0e49\u0e2d\u0e19\u0e02\u0e2d\u0e07\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48<\/h4>\n        <p>\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e07\u0e32\u0e19\u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19 \u0e07\u0e32\u0e19\u0e15\u0e2d\u0e1a\u0e04\u0e33\u0e16\u0e32\u0e21 \u0e41\u0e25\u0e30\u0e07\u0e32\u0e19\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21 \u0e14\u0e49\u0e27\u0e22\u0e23\u0e30\u0e1a\u0e1a\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\u0e41\u0e17\u0e19\u0e01\u0e23\u0e30\u0e1a\u0e27\u0e19\u0e01\u0e32\u0e23\u0e01\u0e23\u0e30\u0e14\u0e32\u0e29<\/p><\/div>\n      <\/div>\n      <div class=\"obj-item\">\n        <div class=\"obj-num\">04<\/div>\n        <div><h4>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e01\u0e32\u0e23\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e48\u0e27\u0e21\u0e02\u0e2d\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19<\/h4>\n        <p>\u0e01\u0e23\u0e30\u0e15\u0e38\u0e49\u0e19\u0e43\u0e2b\u0e49\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e43\u0e0a\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e23\u0e48\u0e27\u0e21\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e02\u0e2d\u0e07 \u0e2d\u0e1a\u0e15. \u0e21\u0e32\u0e01\u0e02\u0e36\u0e49\u0e19 \u0e1c\u0e48\u0e32\u0e19\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e30\u0e2a\u0e21\u0e41\u0e15\u0e49\u0e21\u0e41\u0e25\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e1e\u0e34\u0e40\u0e28\u0e29<\/p><\/div>\n      <\/div>\n      <div class=\"obj-item\">\n        <div class=\"obj-num\">05<\/div>\n        <div><h4>\u0e22\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e02\u0e2d\u0e07\u0e0a\u0e38\u0e21\u0e0a\u0e19<\/h4>\n        <p>\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e0a\u0e48\u0e2d\u0e07\u0e17\u0e32\u0e07\u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e20\u0e31\u0e22\u0e41\u0e25\u0e30\u0e02\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e09\u0e38\u0e01\u0e40\u0e09\u0e34\u0e19\u0e17\u0e35\u0e48\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35<\/p><\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SLIDE 2 : PROJECT \u0e17\u0e35\u0e48\u0e08\u0e30\u0e17\u0e33 -->\n  <section class=\"slide\" id=\"slide-2\">\n    <div class=\"slide-tag\"><span class=\"dot\"><\/span>02 \u00b7 Project \u0e17\u0e35\u0e48\u0e08\u0e30\u0e17\u0e33<\/div>\n    <h2 class=\"headline\">\u0e1f\u0e35\u0e40\u0e08\u0e2d\u0e23\u0e4c\u0e2b\u0e25\u0e31\u0e01\u0e02\u0e2d\u0e07\u0e23\u0e30\u0e1a\u0e1a CARD2U<\/h2>\n    <p class=\"sub\">\u0e41\u0e1e\u0e25\u0e15\u0e1f\u0e2d\u0e23\u0e4c\u0e21 CRM \u0e17\u0e35\u0e48\u0e1c\u0e39\u0e01\u0e01\u0e31\u0e1a LINE Official Account \u0e04\u0e23\u0e2d\u0e1a\u0e04\u0e25\u0e38\u0e21\u0e15\u0e31\u0e49\u0e07\u0e41\u0e15\u0e48\u0e1a\u0e31\u0e15\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01 \u0e01\u0e32\u0e23\u0e2a\u0e30\u0e2a\u0e21\u0e41\u0e15\u0e49\u0e21 \u0e44\u0e1b\u0e08\u0e19\u0e16\u0e36\u0e07\u0e23\u0e30\u0e1a\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e1b\u0e25\u0e2d\u0e14\u0e20\u0e31\u0e22\u0e09\u0e38\u0e01\u0e40\u0e09\u0e34\u0e19<\/p>\n    <div class=\"grid grid-4\">\n      <div class=\"feat-card\"><div class=\"icon-badge\">\ud83e\udeaa<\/div><h4>\u0e1a\u0e31\u0e15\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25<\/h4><p>\u0e1a\u0e31\u0e15\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01 \u0e2d\u0e1a\u0e15. \u0e1c\u0e48\u0e32\u0e19 LineOA \u0e43\u0e0a\u0e49\u0e22\u0e37\u0e19\u0e22\u0e31\u0e19\u0e15\u0e31\u0e27\u0e15\u0e19\u0e41\u0e25\u0e30\u0e23\u0e31\u0e1a\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e38\u0e01\u0e08\u0e38\u0e14<\/p><\/div>\n      <div class=\"feat-card\"><div class=\"icon-badge\">\u2b50<\/div><h4>\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e30\u0e2a\u0e21\u0e41\u0e15\u0e49\u0e21<\/h4><p>\u0e2a\u0e30\u0e2a\u0e21\u0e41\u0e15\u0e49\u0e21\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e08\u0e48\u0e32\u0e22\u0e20\u0e32\u0e29\u0e35 \u0e08\u0e48\u0e32\u0e22\u0e04\u0e48\u0e32\u0e02\u0e22\u0e30 \u0e2b\u0e23\u0e37\u0e2d\u0e23\u0e48\u0e27\u0e21\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e02\u0e2d\u0e07 \u0e2d\u0e1a\u0e15.<\/p><\/div>\n      <div class=\"feat-card\"><div class=\"icon-badge\">\u2705<\/div><h4>\u0e40\u0e0a\u0e47\u0e04\u0e2d\u0e34\u0e19\u0e43\u0e0a\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23<\/h4><p>\u0e41\u0e2a\u0e14\u0e07\u0e01\u0e32\u0e23\u0e40\u0e02\u0e49\u0e32\u0e43\u0e0a\u0e49\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 \u0e40\u0e0a\u0e48\u0e19 \u0e2b\u0e49\u0e2d\u0e07\u0e2a\u0e21\u0e38\u0e14 \u0e28\u0e39\u0e19\u0e22\u0e4c\u0e1f\u0e34\u0e15\u0e40\u0e19\u0e2a\u0e02\u0e2d\u0e07 \u0e2d\u0e1a\u0e15.<\/p><\/div>\n      <div class=\"feat-card\"><div class=\"icon-badge\">\ud83e\uddfe<\/div><h4>\u0e23\u0e30\u0e1a\u0e1a e-Bill<\/h4><p>\u0e2a\u0e48\u0e07\u0e43\u0e1a\u0e41\u0e08\u0e49\u0e07\u0e0a\u0e33\u0e23\u0e30\u0e04\u0e48\u0e32\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e16\u0e36\u0e07\u0e01\u0e33\u0e2b\u0e19\u0e14 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e0a\u0e33\u0e23\u0e30\u0e1c\u0e48\u0e32\u0e19 QR<\/p><\/div>\n      <div class=\"feat-card\"><div class=\"icon-badge\">\ud83e\udd16<\/div><h4>AI Chatbot<\/h4><p>\u0e15\u0e2d\u0e1a\u0e04\u0e33\u0e16\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e15\u0e25\u0e2d\u0e14 24 \u0e0a\u0e21. \u0e25\u0e14\u0e20\u0e32\u0e23\u0e30\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48<\/p><\/div>\n      <div class=\"feat-card\"><div class=\"icon-badge\">\ud83c\udfaf<\/div><h4>\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21 (Mission)<\/h4><p>\u0e01\u0e33\u0e2b\u0e19\u0e14\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e49\u0e21\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e40\u0e02\u0e49\u0e32\u0e23\u0e48\u0e27\u0e21 \u0e2b\u0e23\u0e37\u0e2d\u0e43\u0e0a\u0e49\u0e41\u0e15\u0e49\u0e21\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e23\u0e48\u0e27\u0e21\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21<\/p><\/div>\n      <div class=\"feat-card\"><div class=\"icon-badge\">\ud83c\udf81<\/div><h4>\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e1e\u0e34\u0e40\u0e28\u0e29<\/h4><p>\u0e41\u0e25\u0e01\u0e41\u0e15\u0e49\u0e21\u0e40\u0e1b\u0e47\u0e19\u0e2a\u0e48\u0e27\u0e19\u0e25\u0e14 \u0e43\u0e0a\u0e49\u0e01\u0e31\u0e1a\u0e23\u0e49\u0e32\u0e19\u0e04\u0e49\u0e32\/\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 OTOP \u0e17\u0e35\u0e48\u0e23\u0e48\u0e27\u0e21\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23<\/p><\/div>\n      <div class=\"feat-card\"><div class=\"icon-badge\">\ud83d\udce2<\/div><h4>Broadcast \u0e41\u0e08\u0e49\u0e07\u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23<\/h4><p>\u0e2a\u0e48\u0e07\u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23\u0e16\u0e36\u0e07\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01\u0e17\u0e32\u0e07 LineOA \u0e01\u0e23\u0e2d\u0e07\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e15\u0e32\u0e21\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48<\/p><\/div>\n      <div class=\"feat-card\"><div class=\"icon-badge\">\ud83d\udea8<\/div><h4>\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e09\u0e38\u0e01\u0e40\u0e09\u0e34\u0e19<\/h4><p>\u0e2a\u0e48\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e20\u0e31\u0e22\u0e09\u0e38\u0e01\u0e40\u0e09\u0e34\u0e19\u0e16\u0e36\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e41\u0e1a\u0e1a\u0e40\u0e23\u0e48\u0e07\u0e14\u0e48\u0e27\u0e19<\/p><\/div>\n      <div class=\"feat-card\"><div class=\"icon-badge\">\ud83d\udcde<\/div><h4>\u0e2a\u0e32\u0e22\u0e14\u0e48\u0e27\u0e19\u0e09\u0e38\u0e01\u0e40\u0e09\u0e34\u0e19<\/h4><p>\u0e1b\u0e38\u0e48\u0e21\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e2a\u0e32\u0e22\u0e15\u0e23\u0e07\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e2b\u0e25\u0e37\u0e2d \u0e40\u0e0a\u0e48\u0e19 \u0e23\u0e16\u0e1e\u0e22\u0e32\u0e1a\u0e32\u0e25 \u0e41\u0e08\u0e49\u0e07\u0e40\u0e2b\u0e15\u0e38\u0e44\u0e1f\u0e44\u0e2b\u0e21\u0e49<\/p><\/div>\n      <div class=\"feat-card\"><div class=\"icon-badge\">\ud83e\uddd1\u200d\ud83e\udd1d\u200d\ud83e\uddd1<\/div><h4>\u0e17\u0e35\u0e21\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e25\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48<\/h4><p>\u0e17\u0e35\u0e21\u0e07\u0e32\u0e19\u0e25\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e41\u0e19\u0e30\u0e19\u0e33\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 \u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01 \u0e41\u0e25\u0e30\u0e42\u0e1b\u0e23\u0e42\u0e21\u0e17\u0e23\u0e30\u0e1a\u0e1a\u0e16\u0e36\u0e07\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e42\u0e14\u0e22\u0e15\u0e23\u0e07<\/p><\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SLIDE 3 : Mapping \u0e20\u0e32\u0e23\u0e01\u0e34\u0e08 -->\n  <section class=\"slide\" id=\"slide-3\">\n    <div class=\"slide-tag\"><span class=\"dot\"><\/span>03 \u00b7 \u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e22\u0e38\u0e01\u0e15\u0e4c\u0e43\u0e0a\u0e49\u0e08\u0e23\u0e34\u0e07<\/div>\n    <h2 class=\"headline\">\u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e1f\u0e35\u0e40\u0e08\u0e2d\u0e23\u0e4c CARD2U \u0e40\u0e02\u0e49\u0e32\u0e01\u0e31\u0e1a\u0e20\u0e32\u0e23\u0e01\u0e34\u0e08\u0e02\u0e2d\u0e07 \u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25 \/ \u0e2d\u0e1a\u0e15.<\/h2>\n    <p class=\"sub\">\u0e17\u0e38\u0e01\u0e1f\u0e35\u0e40\u0e08\u0e2d\u0e23\u0e4c\u0e16\u0e39\u0e01\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e15\u0e2d\u0e1a\u0e42\u0e08\u0e17\u0e22\u0e4c\u0e07\u0e32\u0e19\u0e17\u0e35\u0e48 \u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25 \/ \u0e2d\u0e1a\u0e15. \u0e17\u0e33\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27\u0e43\u0e19\u0e1b\u0e31\u0e08\u0e08\u0e38\u0e1a\u0e31\u0e19 \u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e27\u0e34\u0e18\u0e35\u0e17\u0e33\u0e07\u0e32\u0e19\u0e17\u0e31\u0e49\u0e07\u0e2b\u0e21\u0e14<\/p>\n    <div class=\"table-wrap\">\n      <table>\n        <thead>\n          <tr><th style=\"width:20%\">\u0e20\u0e32\u0e23\u0e01\u0e34\u0e08\/\u0e07\u0e32\u0e19\u0e02\u0e2d\u0e07 \u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25 \/ \u0e2d\u0e1a\u0e15.<\/th><th style=\"width:42%\">CARD2U Application<\/th><th style=\"width:38%\">Expected Outcome<\/th><\/tr>\n        <\/thead>\n        <tbody>\n          <tr><td>\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c \/ \u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e20\u0e31\u0e22<\/td><td>\u0e43\u0e0a\u0e49 Broadcast \u0e2a\u0e48\u0e07\u0e1b\u0e23\u0e30\u0e01\u0e32\u0e28\u0e19\u0e49\u0e33\u0e17\u0e48\u0e27\u0e21 \u0e1b\u0e34\u0e14\u0e16\u0e19\u0e19 \u0e01\u0e33\u0e2b\u0e19\u0e14\u0e0a\u0e33\u0e23\u0e30\u0e20\u0e32\u0e29\u0e35 \u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e48\u0e32\u0e27\u0e40\u0e23\u0e48\u0e07\u0e14\u0e48\u0e27\u0e19 \u0e01\u0e23\u0e2d\u0e07\u0e01\u0e25\u0e38\u0e48\u0e21\u0e40\u0e1b\u0e49\u0e32\u0e2b\u0e21\u0e32\u0e22\u0e15\u0e32\u0e21\u0e2b\u0e21\u0e39\u0e48\u0e1a\u0e49\u0e32\u0e19\/\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e40\u0e2a\u0e35\u0e48\u0e22\u0e07<\/td><td>\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e23\u0e31\u0e1a\u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23\u0e40\u0e23\u0e47\u0e27\u0e02\u0e36\u0e49\u0e19 \u0e25\u0e14\u0e01\u0e32\u0e23\u0e1e\u0e36\u0e48\u0e07\u0e1e\u0e32\u0e40\u0e2a\u0e35\u0e22\u0e07\u0e15\u0e32\u0e21\u0e2a\u0e32\u0e22\u0e40\u0e1e\u0e35\u0e22\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e40\u0e14\u0e35\u0e22\u0e27<\/td><\/tr>\n          <tr><td>\u0e2a\u0e32\u0e18\u0e32\u0e23\u0e13\u0e2a\u0e38\u0e02<\/td><td>\u0e43\u0e0a\u0e49\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e40\u0e1b\u0e34\u0e14\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19\u0e09\u0e35\u0e14\u0e27\u0e31\u0e04\u0e0b\u0e35\u0e19\/\u0e15\u0e23\u0e27\u0e08\u0e2a\u0e38\u0e02\u0e20\u0e32\u0e1e\u0e1c\u0e39\u0e49\u0e2a\u0e39\u0e07\u0e2d\u0e32\u0e22\u0e38 \u0e40\u0e0a\u0e47\u0e04\u0e2d\u0e34\u0e19\u0e14\u0e49\u0e27\u0e22 QR Code \u0e1c\u0e39\u0e01\u0e01\u0e31\u0e1a \u0e23\u0e1e.\u0e2a\u0e15. \u0e43\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48<\/td><td>\u0e25\u0e14\u0e07\u0e32\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e17\u0e23\u0e32\u0e1a\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1c\u0e39\u0e49\u0e40\u0e02\u0e49\u0e32\u0e23\u0e48\u0e27\u0e21\u0e08\u0e23\u0e34\u0e07\u0e41\u0e25\u0e30\u0e27\u0e31\u0e14\u0e1c\u0e25\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35<\/td><\/tr>\n          <tr><td>\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19 (OTOP)<\/td><td>\u0e43\u0e0a\u0e49\u0e23\u0e30\u0e1a\u0e1a\u0e2a\u0e30\u0e2a\u0e21\u0e41\u0e15\u0e49\u0e21\/\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e1e\u0e34\u0e40\u0e28\u0e29 \u0e21\u0e2d\u0e1a\u0e2a\u0e48\u0e27\u0e19\u0e25\u0e14\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e2d\u0e38\u0e14\u0e2b\u0e19\u0e38\u0e19\u0e23\u0e49\u0e32\u0e19\u0e04\u0e49\u0e32\/\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 OTOP \u0e43\u0e19\u0e15\u0e33\u0e1a\u0e25<\/td><td>\u0e01\u0e23\u0e30\u0e15\u0e38\u0e49\u0e19\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e2b\u0e21\u0e38\u0e19\u0e40\u0e27\u0e35\u0e22\u0e19\u0e43\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48 \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e42\u0e20\u0e04\u0e17\u0e49\u0e2d\u0e07\u0e16\u0e34\u0e48\u0e19<\/td><\/tr>\n          <tr><td>\u0e2a\u0e34\u0e48\u0e07\u0e41\u0e27\u0e14\u0e25\u0e49\u0e2d\u0e21\/\u0e23\u0e13\u0e23\u0e07\u0e04\u0e4c<\/td><td>\u0e43\u0e0a\u0e49\u0e1f\u0e35\u0e40\u0e08\u0e2d\u0e23\u0e4c \u201c\u0e20\u0e32\u0e23\u0e01\u0e34\u0e08\u201d (Social Mission) \u0e43\u0e2b\u0e49\u0e16\u0e48\u0e32\u0e22\u0e20\u0e32\u0e1e\/\u0e41\u0e0a\u0e23\u0e4c\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e41\u0e22\u0e01\u0e02\u0e22\u0e30 \u0e1b\u0e25\u0e39\u0e01\u0e15\u0e49\u0e19\u0e44\u0e21\u0e49 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e23\u0e31\u0e1a\u0e04\u0e30\u0e41\u0e19\u0e19<\/td><td>\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e21\u0e35\u0e2a\u0e48\u0e27\u0e19\u0e23\u0e48\u0e27\u0e21\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e41\u0e1a\u0e1a\u0e1b\u0e32\u0e01\u0e15\u0e48\u0e2d\u0e1b\u0e32\u0e01\u0e1a\u0e19\u0e42\u0e0b\u0e40\u0e0a\u0e35\u0e22\u0e25\u0e21\u0e35\u0e40\u0e14\u0e35\u0e22<\/td><\/tr>\n          <tr><td>\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19 (\u0e20\u0e32\u0e29\u0e35\/\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19)<\/td><td>\u0e43\u0e0a\u0e49 e-Bill \u0e2a\u0e48\u0e07\u0e43\u0e1a\u0e41\u0e08\u0e49\u0e07\u0e0a\u0e33\u0e23\u0e30\u0e20\u0e32\u0e29\u0e35\u0e17\u0e35\u0e48\u0e14\u0e34\u0e19\/\u0e1b\u0e49\u0e32\u0e22 \u0e43\u0e2b\u0e49\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19 \u0e0a\u0e33\u0e23\u0e30\u0e1c\u0e48\u0e32\u0e19 QR Code<\/td><td>\u0e25\u0e14\u0e04\u0e27\u0e32\u0e21\u0e41\u0e2d\u0e2d\u0e31\u0e14 \u0e13 \u0e08\u0e38\u0e14\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 \u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e40\u0e27\u0e25\u0e32\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e44\u0e14\u0e49\u0e14\u0e35\u0e02\u0e36\u0e49\u0e19<\/td><\/tr>\n          <tr><td>\u0e28\u0e32\u0e2a\u0e19\u0e32\u0e41\u0e25\u0e30\u0e27\u0e31\u0e12\u0e19\u0e18\u0e23\u0e23\u0e21<\/td><td>\u0e43\u0e0a\u0e49 Event\/Broadcast \u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e07\u0e32\u0e19\u0e1b\u0e23\u0e30\u0e40\u0e1e\u0e13\u0e35 \u0e07\u0e32\u0e19\u0e17\u0e33\u0e1a\u0e38\u0e0d\u0e27\u0e31\u0e14\u0e43\u0e2b\u0e0d\u0e48\u0e1a\u0e32\u0e07\u0e1b\u0e25\u0e32\u0e01\u0e14 \u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e23\u0e30\u0e1a\u0e1a\u0e25\u0e07\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19<\/td><td>\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e08\u0e33\u0e19\u0e27\u0e19\u0e1c\u0e39\u0e49\u0e40\u0e02\u0e49\u0e32\u0e23\u0e48\u0e27\u0e21\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e17\u0e32\u0e07\u0e28\u0e32\u0e2a\u0e19\u0e32\u0e41\u0e25\u0e30\u0e27\u0e31\u0e12\u0e19\u0e18\u0e23\u0e23\u0e21\u0e17\u0e49\u0e2d\u0e07\u0e16\u0e34\u0e48\u0e19<\/td><\/tr>\n          <tr><td>\u0e15\u0e2d\u0e1a\u0e04\u0e33\u0e16\u0e32\u0e21\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19<\/td><td>\u0e43\u0e0a\u0e49 CARD2U AI Chatbot \u0e15\u0e2d\u0e1a\u0e04\u0e33\u0e16\u0e32\u0e21\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 (\u0e40\u0e27\u0e25\u0e32\u0e17\u0e33\u0e01\u0e32\u0e23 \u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e02\u0e2d\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e2d\u0e31\u0e15\u0e23\u0e32\u0e20\u0e32\u0e29\u0e35) \u0e15\u0e25\u0e2d\u0e14 24 \u0e0a\u0e21.<\/td><td>\u0e25\u0e14\u0e20\u0e32\u0e23\u0e30\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e15\u0e2d\u0e1a\u0e04\u0e33\u0e16\u0e32\u0e21\u0e0b\u0e49\u0e33 \u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e04\u0e33\u0e15\u0e2d\u0e1a\u0e17\u0e31\u0e19\u0e17\u0e35\u0e19\u0e2d\u0e01\u0e40\u0e27\u0e25\u0e32\u0e23\u0e32\u0e0a\u0e01\u0e32\u0e23<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n    <\/div>\n  <\/section>\n\n  <!-- SLIDE 4 : BENEFITS -->\n  <section class=\"slide\" id=\"slide-4\">\n    <div class=\"slide-tag\"><span class=\"dot\"><\/span>04 \u00b7 Benefits<\/div>\n    <h2 class=\"headline\">\u0e1c\u0e25\u0e1b\u0e23\u0e30\u0e42\u0e22\u0e0a\u0e19\u0e4c\u0e17\u0e35\u0e48\u0e08\u0e30\u0e40\u0e01\u0e34\u0e14\u0e02\u0e36\u0e49\u0e19<\/h2>\n    <p class=\"sub\">\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\u0e19\u0e35\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e04\u0e38\u0e13\u0e04\u0e48\u0e32\u0e43\u0e2b\u0e49\u0e17\u0e31\u0e49\u0e07\u0e2a\u0e2d\u0e07\u0e1d\u0e31\u0e48\u0e07 \u2014 \u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e30\u0e14\u0e27\u0e01 \u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25 \/ \u0e2d\u0e1a\u0e15. \u0e44\u0e14\u0e49\u0e40\u0e04\u0e23\u0e37\u0e48\u0e2d\u0e07\u0e21\u0e37\u0e2d\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e08\u0e31\u0e14\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e21\u0e35\u0e1b\u0e23\u0e30\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e20\u0e32\u0e1e\u0e02\u0e36\u0e49\u0e19<\/p>\n    <div class=\"grid grid-2\" style=\"flex:1;\">\n      <div class=\"benefit-col people\">\n        <div class=\"benefit-head\"><div class=\"icon-badge\">\ud83d\ude4b<\/div><h3>\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a<\/h3><\/div>\n        <ul>\n          <li>\u0e23\u0e31\u0e1a\u0e02\u0e48\u0e32\u0e27\u0e2a\u0e32\u0e23\u0e41\u0e25\u0e30\u0e41\u0e08\u0e49\u0e07\u0e40\u0e15\u0e37\u0e2d\u0e19\u0e20\u0e31\u0e22\u0e40\u0e23\u0e47\u0e27\u0e02\u0e36\u0e49\u0e19 \u0e1c\u0e48\u0e32\u0e19 LINE \u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e41\u0e25\u0e49\u0e27 \u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e42\u0e2b\u0e25\u0e14\u0e41\u0e2d\u0e1b\u0e43\u0e2b\u0e21\u0e48<\/li>\n          <li>\u0e08\u0e48\u0e32\u0e22\u0e20\u0e32\u0e29\u0e35 \u0e04\u0e48\u0e32\u0e02\u0e22\u0e30 \u0e41\u0e25\u0e30\u0e04\u0e48\u0e32\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e15\u0e48\u0e32\u0e07\u0e46 \u0e2a\u0e30\u0e14\u0e27\u0e01\u0e1c\u0e48\u0e32\u0e19 QR \/ e-Bill \u0e25\u0e14\u0e01\u0e32\u0e23\u0e40\u0e14\u0e34\u0e19\u0e17\u0e32\u0e07<\/li>\n          <li>\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e2a\u0e34\u0e17\u0e18\u0e34\u0e1e\u0e34\u0e40\u0e28\u0e29\u0e41\u0e25\u0e30\u0e2a\u0e48\u0e27\u0e19\u0e25\u0e14\u0e23\u0e49\u0e32\u0e19\u0e04\u0e49\u0e32 OTOP \u0e43\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e08\u0e32\u0e01\u0e41\u0e15\u0e49\u0e21\u0e2a\u0e30\u0e2a\u0e21<\/li>\n          <li>\u0e40\u0e02\u0e49\u0e32\u0e16\u0e36\u0e07\u0e04\u0e27\u0e32\u0e21\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e2b\u0e25\u0e37\u0e2d\u0e09\u0e38\u0e01\u0e40\u0e09\u0e34\u0e19\u0e44\u0e14\u0e49\u0e40\u0e23\u0e47\u0e27\u0e02\u0e36\u0e49\u0e19\u0e14\u0e49\u0e27\u0e22\u0e1b\u0e38\u0e48\u0e21 SOS \u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e2a\u0e32\u0e22\u0e15\u0e23\u0e07<\/li>\n          <li>\u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a\u0e04\u0e33\u0e15\u0e2d\u0e1a\u0e04\u0e33\u0e16\u0e32\u0e21\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\u0e15\u0e25\u0e2d\u0e14 24 \u0e0a\u0e21. \u0e08\u0e32\u0e01 AI Chatbot<\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"benefit-col org\">\n        <div class=\"benefit-head\"><div class=\"icon-badge\">\ud83c\udfdb\ufe0f<\/div><h3>\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48 \u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25 \/ \u0e2d\u0e1a\u0e15. \u0e44\u0e14\u0e49\u0e23\u0e31\u0e1a<\/h3><\/div>\n        <ul>\n          <li>\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\/\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01\u0e17\u0e35\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e1a\u0e1a \u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e01\u0e32\u0e23\u0e1a\u0e23\u0e34\u0e2b\u0e32\u0e23\u0e07\u0e32\u0e19\u0e40\u0e0a\u0e34\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25<\/li>\n          <li>\u0e25\u0e14\u0e20\u0e32\u0e23\u0e30\u0e07\u0e32\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e04\u0e32\u0e19\u0e4c\u0e40\u0e15\u0e2d\u0e23\u0e4c \u0e07\u0e32\u0e19\u0e40\u0e2d\u0e01\u0e2a\u0e32\u0e23 \u0e41\u0e25\u0e30\u0e07\u0e32\u0e19\u0e15\u0e2d\u0e1a\u0e04\u0e33\u0e16\u0e32\u0e21\u0e0b\u0e49\u0e33\u0e46 \u0e02\u0e2d\u0e07\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48<\/li>\n          <li>\u0e27\u0e31\u0e14\u0e1c\u0e25\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23\u0e41\u0e25\u0e30\u0e01\u0e34\u0e08\u0e01\u0e23\u0e23\u0e21\u0e44\u0e14\u0e49\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19\u0e41\u0e1a\u0e1a\u0e40\u0e23\u0e35\u0e22\u0e25\u0e44\u0e17\u0e21\u0e4c (\u0e40\u0e0a\u0e48\u0e19 \u0e08\u0e33\u0e19\u0e27\u0e19\u0e1c\u0e39\u0e49\u0e23\u0e48\u0e27\u0e21\u0e09\u0e35\u0e14\u0e27\u0e31\u0e04\u0e0b\u0e35\u0e19)<\/li>\n          <li>\u0e01\u0e23\u0e30\u0e15\u0e38\u0e49\u0e19\u0e40\u0e28\u0e23\u0e29\u0e10\u0e01\u0e34\u0e08\u0e0a\u0e38\u0e21\u0e0a\u0e19 \u0e2a\u0e23\u0e49\u0e32\u0e07\u0e10\u0e32\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e1c\u0e39\u0e49\u0e1a\u0e23\u0e34\u0e42\u0e20\u0e04\u0e17\u0e49\u0e2d\u0e07\u0e16\u0e34\u0e48\u0e19\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a OTOP<\/li>\n          <li>\u0e22\u0e01\u0e20\u0e32\u0e1e\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c\u0e2d\u0e07\u0e04\u0e4c\u0e01\u0e23\u0e43\u0e2b\u0e49\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22 \u0e15\u0e2d\u0e1a\u0e42\u0e08\u0e17\u0e22\u0e4c Smart City \/ Digital Government<\/li>\n        <\/ul>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SLIDE 5 : Timeline -->\n  <section class=\"slide\" id=\"slide-5\">\n    <div class=\"slide-tag\"><span class=\"dot\"><\/span>05 \u00b7 \u0e23\u0e30\u0e22\u0e30\u0e40\u0e27\u0e25\u0e32\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23<\/div>\n    <h2 class=\"headline\">\u0e41\u0e1c\u0e19\u0e14\u0e33\u0e40\u0e19\u0e34\u0e19\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23 \u0e23\u0e27\u0e21 1 \u0e1b\u0e35<\/h2>\n    <p class=\"sub\">\u0e41\u0e1a\u0e48\u0e07\u0e40\u0e1b\u0e47\u0e19 2 \u0e23\u0e30\u0e22\u0e30\u0e2b\u0e25\u0e31\u0e01 \u2014 \u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a 4 \u0e40\u0e14\u0e37\u0e2d\u0e19 \u0e15\u0e48\u0e2d\u0e14\u0e49\u0e27\u0e22\u0e01\u0e32\u0e23\u0e25\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e41\u0e25\u0e30\u0e42\u0e1b\u0e23\u0e42\u0e21\u0e17\u0e43\u0e2b\u0e49\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07\u0e2d\u0e35\u0e01 8 \u0e40\u0e14\u0e37\u0e2d\u0e19<\/p>\n\n    <div class=\"tl-progress\">\n      <div class=\"tl-progress-seg dev\" style=\"flex:4;\">Develop \u00b7 \u0e40\u0e14\u0e37\u0e2d\u0e19\u0e17\u0e35\u0e48 1\u20134<\/div>\n      <div class=\"tl-progress-seg promo\" style=\"flex:8;\">\u0e25\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48 &amp; \u0e42\u0e1b\u0e23\u0e42\u0e21\u0e17 \u00b7 \u0e40\u0e14\u0e37\u0e2d\u0e19\u0e17\u0e35\u0e48 5\u201312<\/div>\n    <\/div>\n\n    <div class=\"timeline\">\n      <div class=\"tl-macro\" style=\"flex:4;\">\n        <div class=\"tl-badge\">\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e17\u0e35\u0e48 1 \u2013 4<\/div>\n        <h3>Phase 1 \u00b7 \u0e1e\u0e31\u0e12\u0e19\u0e32\u0e23\u0e30\u0e1a\u0e1a (Develop)<\/h3>\n        <p class=\"tl-phase-desc\">\u0e27\u0e32\u0e07\u0e23\u0e30\u0e1a\u0e1a \u0e1e\u0e31\u0e12\u0e19\u0e32 \u0e41\u0e25\u0e30\u0e17\u0e14\u0e2a\u0e2d\u0e1a\u0e43\u0e2b\u0e49\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e08\u0e23\u0e34\u0e07\u0e01\u0e48\u0e2d\u0e19\u0e40\u0e1b\u0e34\u0e14\u0e15\u0e31\u0e27<\/p>\n        <div class=\"tl-steps\">\n          <div class=\"tl-step\"><span class=\"tl-step-month\">\u0e40\u0e14\u0e37\u0e2d\u0e19 1<\/span><span class=\"tl-step-text\"><b>Discovery &amp; Setup<\/b> \u2014 \u0e40\u0e01\u0e47\u0e1a Requirement \u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e25\u0e30\u0e1a\u0e31\u0e15\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01\u0e14\u0e34\u0e08\u0e34\u0e17\u0e31\u0e25\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a \u0e2d\u0e1a\u0e15.<\/span><\/div>\n          <div class=\"tl-step\"><span class=\"tl-step-month\">\u0e40\u0e14\u0e37\u0e2d\u0e19 2\u20133<\/span><span class=\"tl-step-text\"><b>Development &amp; Integration<\/b> \u2014 \u0e1e\u0e31\u0e12\u0e19\u0e32 CRM \u0e2b\u0e25\u0e31\u0e01 \u0e23\u0e30\u0e1a\u0e1a\u0e41\u0e15\u0e49\u0e21 e-Bill AI Chatbot \u0e40\u0e0a\u0e37\u0e48\u0e2d\u0e21\u0e15\u0e48\u0e2d\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e20\u0e32\u0e29\u0e35\/\u0e17\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e19<\/span><\/div>\n          <div class=\"tl-step\"><span class=\"tl-step-month\">Month 4<\/span><span class=\"tl-step-text\"><b>Testing &amp; Training<\/b> \u2014 Conduct UAT and train local authority staff.<\/span><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"tl-macro alt\" style=\"flex:8;\">\n        <div class=\"tl-badge\">\u0e40\u0e14\u0e37\u0e2d\u0e19\u0e17\u0e35\u0e48 5 \u2013 12<\/div>\n        <h3>Phase 2 \u00b7 \u0e25\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48 &amp; \u0e42\u0e1b\u0e23\u0e42\u0e21\u0e17 (Field Rollout)<\/h3>\n        <p class=\"tl-phase-desc\">\u0e17\u0e35\u0e21\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e25\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e08\u0e23\u0e34\u0e07\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e23\u0e48\u0e07\u0e08\u0e33\u0e19\u0e27\u0e19\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01\u0e41\u0e25\u0e30\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e01\u0e32\u0e23\u0e23\u0e31\u0e1a\u0e23\u0e39\u0e49\u0e17\u0e31\u0e48\u0e27\u0e15\u0e33\u0e1a\u0e25 \u0e04\u0e27\u0e1a\u0e04\u0e39\u0e48\u0e01\u0e31\u0e1a\u0e2a\u0e37\u0e48\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c<\/p>\n        <div class=\"tl-steps\">\n          <div class=\"tl-step\"><span class=\"tl-step-month\">\u0e40\u0e14\u0e37\u0e2d\u0e19 5\u20136<\/span><span class=\"tl-step-text\"><b>Pilot &amp; Soft Launch<\/b> \u2014 \u0e40\u0e1b\u0e34\u0e14\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e19\u0e33\u0e23\u0e48\u0e2d\u0e07\u0e43\u0e19\u0e2b\u0e21\u0e39\u0e48\u0e1a\u0e49\u0e32\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07 \u0e40\u0e01\u0e47\u0e1a Feedback \u0e1b\u0e23\u0e31\u0e1a\u0e23\u0e30\u0e1a\u0e1a\u0e01\u0e48\u0e2d\u0e19\u0e02\u0e22\u0e32\u0e22\u0e1c\u0e25<\/span><\/div>\n          <div class=\"tl-step\"><span class=\"tl-step-month\">\u0e40\u0e14\u0e37\u0e2d\u0e19 7\u20138<\/span><span class=\"tl-step-text\"><b>\u0e25\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e17\u0e35\u0e48\u0e40\u0e15\u0e47\u0e21\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a<\/b> \u2014 \u0e17\u0e35\u0e21\u0e40\u0e08\u0e49\u0e32\u0e2b\u0e19\u0e49\u0e32\u0e17\u0e35\u0e48\u0e40\u0e14\u0e34\u0e19\u0e2a\u0e32\u0e22\u0e41\u0e19\u0e30\u0e19\u0e33\u0e23\u0e30\u0e1a\u0e1a \u0e0a\u0e48\u0e27\u0e22\u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01\u0e16\u0e36\u0e07\u0e1a\u0e49\u0e32\u0e19\/\u0e0a\u0e38\u0e21\u0e0a\u0e19\u0e04\u0e23\u0e1a\u0e17\u0e38\u0e01\u0e2b\u0e21\u0e39\u0e48\u0e1a\u0e49\u0e32\u0e19<\/span><\/div>\n          <div class=\"tl-step\"><span class=\"tl-step-month\">\u0e40\u0e14\u0e37\u0e2d\u0e19 9\u201310<\/span><span class=\"tl-step-text\"><b>\u0e41\u0e04\u0e21\u0e40\u0e1b\u0e0d\u0e2a\u0e37\u0e48\u0e2d\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c<\/b> \u2014 \u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e2a\u0e31\u0e21\u0e1e\u0e31\u0e19\u0e18\u0e4c\u0e1c\u0e48\u0e32\u0e19\u0e2a\u0e37\u0e48\u0e2d\u0e17\u0e49\u0e2d\u0e07\u0e16\u0e34\u0e48\u0e19 \u0e40\u0e2a\u0e35\u0e22\u0e07\u0e15\u0e32\u0e21\u0e2a\u0e32\u0e22 \u0e1b\u0e49\u0e32\u0e22 \u0e41\u0e25\u0e30\u0e42\u0e0b\u0e40\u0e0a\u0e35\u0e22\u0e25\u0e21\u0e35\u0e40\u0e14\u0e35\u0e22\u0e02\u0e2d\u0e07 \u0e2d\u0e1a\u0e15.<\/span><\/div>\n          <div class=\"tl-step\"><span class=\"tl-step-month\">\u0e40\u0e14\u0e37\u0e2d\u0e19 11\u201312<\/span><span class=\"tl-step-text\"><b>\u0e15\u0e34\u0e14\u0e15\u0e32\u0e21\u0e1c\u0e25\u0e41\u0e25\u0e30\u0e02\u0e22\u0e32\u0e22\u0e10\u0e32\u0e19\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01<\/b> \u2014 \u0e27\u0e31\u0e14\u0e1c\u0e25\u0e2d\u0e31\u0e15\u0e23\u0e32\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19 \u0e1b\u0e23\u0e31\u0e1a\u0e1b\u0e23\u0e38\u0e07\u0e08\u0e38\u0e14\u0e17\u0e35\u0e48\u0e22\u0e31\u0e07\u0e15\u0e34\u0e14\u0e02\u0e31\u0e14 \u0e41\u0e25\u0e30\u0e27\u0e32\u0e07\u0e41\u0e1c\u0e19\u0e15\u0e48\u0e2d\u0e22\u0e2d\u0e14\u0e1b\u0e35\u0e16\u0e31\u0e14\u0e44\u0e1b<\/span><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- SLIDE 7 : Closing -->\n  <section class=\"slide\" id=\"slide-7\">\n    <div class=\"slide-tag\" style=\"background:rgba(255,255,255,0.12); color:#5fd4c7;\"><span class=\"dot\" style=\"background:#5fd4c7;\"><\/span>\u0e02\u0e2d\u0e1a\u0e04\u0e38\u0e13<\/div>\n    <h2 class=\"headline\">\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e22\u0e01\u0e23\u0e30\u0e14\u0e31\u0e1a\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19<br>\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a \u0e40\u0e17\u0e28\u0e1a\u0e32\u0e25 \/ \u0e2d\u0e1a\u0e15.<\/h2>\n    <p class=\"sub\">CARD2U \u0e04\u0e37\u0e2d\u0e01\u0e49\u0e32\u0e27\u0e41\u0e23\u0e01\u0e02\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e40\u0e1b\u0e47\u0e19 Smart Local Government \u0e17\u0e35\u0e48\u0e43\u0e01\u0e25\u0e49\u0e0a\u0e34\u0e14\u0e1b\u0e23\u0e30\u0e0a\u0e32\u0e0a\u0e19\u0e21\u0e32\u0e01\u0e02\u0e36\u0e49\u0e19 \u0e14\u0e49\u0e27\u0e22\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e41\u0e21\u0e48\u0e19\u0e22\u0e33\u0e41\u0e25\u0e30\u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23\u0e17\u0e35\u0e48\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27\u0e01\u0e27\u0e48\u0e32\u0e40\u0e14\u0e34\u0e21<\/p>\n  <\/section>\n\n<\/div>\n\n<div id=\"nav\">\n  <button id=\"prevBtn\" aria-label=\"Previous\">\u2039<\/button>\n  <div id=\"dots\"><\/div>\n  <span id=\"counter\">1 \/ 1<\/span>\n  <button id=\"nextBtn\" aria-label=\"Next\">\u203a<\/button>\n<\/div>\n\n<script>\n  const slides = document.querySelectorAll('.slide');\n  const dotsWrap = document.getElementById('dots');\n  const counter = document.getElementById('counter');\n  let current = 0;\n\n  \/\/ Generate navigation dots from the actual number of slides.\n  slides.forEach((s, i) => {\n    const dot = document.createElement('span');\n    dot.setAttribute('aria-label', `Go to slide ${i + 1}`);\n    if (i === 0) dot.classList.add('active');\n    dot.addEventListener('click', () => goTo(i));\n    dotsWrap.appendChild(dot);\n  });\n\n  const dots = dotsWrap.querySelectorAll('span');\n  const totalSlides = slides.length;\n  counter.textContent = `1 \/ ${totalSlides}`;\n\n  function goTo(i){\n    if (i < 0 || i >= slides.length) return;\n    slides[current].classList.remove('active');\n    dots[current].classList.remove('active');\n    current = i;\n    slides[current].classList.add('active');\n    dots[current].classList.add('active');\n    counter.textContent = (current+1) + ' \/ ' + slides.length;\n    window.scrollTo({ top: Math.max(0, document.getElementById('deck').offsetTop), behavior: 'smooth' });\n  }\n\n  document.getElementById('prevBtn').addEventListener('click', () => goTo(current-1));\n  document.getElementById('nextBtn').addEventListener('click', () => goTo(current+1));\n\n  document.addEventListener('keydown', (e) => {\n    if (e.key === 'ArrowRight' || e.key === ' ') goTo(current+1);\n    if (e.key === 'ArrowLeft') goTo(current-1);\n  });\n\n  let touchStartX = 0;\n  let touchStartY = 0;\n\n  document.addEventListener('touchstart', e => {\n    const t = e.changedTouches[0];\n    touchStartX = t.screenX;\n    touchStartY = t.screenY;\n  }, {passive:true});\n\n  document.addEventListener('touchend', e => {\n    const t = e.changedTouches[0];\n    const dx = t.screenX - touchStartX;\n    const dy = t.screenY - touchStartY;\n\n    \/* Vertical movement belongs to normal page scrolling. *\/\n    if (Math.abs(dy) > Math.abs(dx)) return;\n\n    \/* Change slide only for a clear horizontal swipe. *\/\n    if (Math.abs(dx) > 60) {\n      if (dx > 0) goTo(current-1);\n      else goTo(current+1);\n    }\n  }, {passive:true});\n<\/script>\n\n\n\n<style>\n\/* =========================================================\n   DESKTOP FINAL FIX\n   - Do not lock the whole page to 100vh.\n   - Only the active slide is in normal document flow.\n   - The browser page can scroll when a slide is taller than the viewport.\n   - This also works when the HTML is placed inside a WordPress page\n     with the WP admin bar\/header taking additional vertical space.\n   ========================================================= *\/\n@media (min-width: 768px) {\n\n  html, body {\n    height: auto !important;\n    min-height: 100% !important;\n    overflow-x: hidden !important;\n    overflow-y: auto !important;\n  }\n\n  #deck {\n    position: relative !important;\n    width: 100% !important;\n    height: auto !important;\n    min-height: calc(100vh - 100px) !important;\n    max-height: none !important;\n    overflow: visible !important;\n  }\n\n  #deck .slide {\n    box-sizing: border-box !important;\n    width: 100% !important;\n    height: auto !important;\n    min-height: calc(100vh - 100px) !important;\n    max-height: none !important;\n    overflow: visible !important;\n  }\n\n  \/* Hidden slides occupy no document space. *\/\n  #deck .slide:not(.active) {\n    position: absolute !important;\n    inset: 0 !important;\n    width: 100% !important;\n    height: 0 !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    padding: 0 !important;\n    overflow: hidden !important;\n    opacity: 0 !important;\n    visibility: hidden !important;\n    pointer-events: none !important;\n    transform: none !important;\n  }\n\n  \/* The selected slide becomes normal-flow content and can scroll. *\/\n  #deck .slide.active {\n    position: relative !important;\n    inset: auto !important;\n    width: 100% !important;\n    height: auto !important;\n    min-height: calc(100vh - 100px) !important;\n    max-height: none !important;\n    overflow: visible !important;\n    opacity: 1 !important;\n    visibility: visible !important;\n    pointer-events: auto !important;\n    transform: none !important;\n    z-index: 2 !important;\n  }\n\n  \/* Don't force internal content to fit into a viewport that may\n     already be reduced by the WordPress header\/admin bar. *\/\n  #slide-1,\n  #slide-2,\n  #slide-3,\n  #slide-4,\n  #slide-5,\n  #slide-7 {\n    justify-content: flex-start !important;\n  }\n\n  \/* Slide 1: comfortable card spacing at 100% zoom. *\/\n  #slide-1 .obj-list {\n    flex: 0 0 auto !important;\n    justify-content: flex-start !important;\n    gap: 10px !important;\n    max-width: 1150px !important;\n  }\n\n  #slide-1 .obj-item {\n    flex: 0 0 auto !important;\n    height: auto !important;\n    min-height: 0 !important;\n    padding: 12px 20px !important;\n  }\n\n  #slide-1 .obj-item p {\n    line-height: 1.45 !important;\n  }\n\n  \/* Slide 2: let all feature cards determine their own height. *\/\n  #slide-2 {\n    padding-bottom: 100px !important;\n  }\n\n  #slide-2 .grid.grid-4 {\n    flex: 0 0 auto !important;\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n    overflow: visible !important;\n    align-content: start !important;\n  }\n\n  #slide-2 .feat-card {\n    height: auto !important;\n    min-height: 108px !important;\n    max-height: none !important;\n    overflow: visible !important;\n  }\n\n  \/* Slide 3 table remains internally scrollable if needed. *\/\n  #slide-3 .table-wrap {\n    flex: 0 0 auto !important;\n    max-height: calc(100vh - 280px) !important;\n    overflow: auto !important;\n  }\n\n  \/* Slide 4: two columns, natural height. *\/\n  #slide-4 > .grid.grid-2 {\n    flex: 0 0 auto !important;\n    height: auto !important;\n    min-height: 0 !important;\n    overflow: visible !important;\n  }\n\n  #slide-4 .benefit-col {\n    height: auto !important;\n    min-height: 0 !important;\n    overflow: visible !important;\n  }\n\n  \/* Slide 5: timeline must not be clipped. *\/\n  #slide-5 {\n    padding-bottom: 110px !important;\n  }\n\n  #slide-5 .timeline {\n    flex: 0 0 auto !important;\n    height: auto !important;\n    min-height: 0 !important;\n    overflow: visible !important;\n  }\n\n  #slide-5 .tl-macro {\n    height: auto !important;\n    min-height: 0 !important;\n    overflow: visible !important;\n  }\n\n  \/* Slide navigation stays at the bottom of the browser viewport,\n     outside the document content, so it does not cover cards. *\/\n  #nav {\n    position: fixed !important;\n    left: 50% !important;\n    bottom: 16px !important;\n    transform: translateX(-50%) !important;\n    z-index: 99999 !important;\n  }\n}\n\n\/* When WordPress admin bar is present, leave a little more room. *\/\n@media (min-width: 768px) {\n  body.admin-bar #deck .slide.active {\n    min-height: calc(100vh - 132px) !important;\n  }\n}\n<\/style>\n\n<\/body><\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u0e42\u0e04\u0e23\u0e07\u0e01\u0e32\u0e23 CRM CARD2U \u2014 Municipality \/ SAO Digital Transformation Proposal PROJECT PROPOSAL \u00b7 SMART LOCAL GOVERNMENT Citizen CRM System \u201dCARD2U\u201d for Municipalities \/ SAOs Bangplakot Smart Resident Card \u2014 Digital membership card via LINE Official Account, connecting local government services in one place \u2014 from tax and public health to community economy and citizen safety&#8230;.<\/p>","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-10034","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.nppointasia.com\/th\/wp-json\/wp\/v2\/pages\/10034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nppointasia.com\/th\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.nppointasia.com\/th\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.nppointasia.com\/th\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nppointasia.com\/th\/wp-json\/wp\/v2\/comments?post=10034"}],"version-history":[{"count":78,"href":"https:\/\/www.nppointasia.com\/th\/wp-json\/wp\/v2\/pages\/10034\/revisions"}],"predecessor-version":[{"id":10380,"href":"https:\/\/www.nppointasia.com\/th\/wp-json\/wp\/v2\/pages\/10034\/revisions\/10380"}],"wp:attachment":[{"href":"https:\/\/www.nppointasia.com\/th\/wp-json\/wp\/v2\/media?parent=10034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}