{\rtf1\ansi\ansicpg1252\cocoartf2865
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 Menlo-Regular;}
{\colortbl;\red255\green255\blue255;\red109\green109\blue109;\red236\green241\blue247;\red251\green0\blue7;
\red0\green0\blue0;\red42\green42\blue42;\red107\green0\blue1;\red0\green0\blue255;\red77\green80\blue85;
\red24\green112\blue43;\red9\green60\blue148;\red19\green118\blue70;\red111\green14\blue195;\red14\green110\blue109;
\red164\green69\blue11;}
{\*\expandedcolortbl;;\cssrgb\c50196\c50196\c50196;\cssrgb\c94118\c95686\c97647;\cssrgb\c100000\c0\c0;
\cssrgb\c0\c0\c0;\cssrgb\c21961\c21961\c21961;\cssrgb\c50196\c0\c0;\cssrgb\c0\c0\c100000;\cssrgb\c37255\c38824\c40784;
\cssrgb\c9412\c50196\c21961;\cssrgb\c1569\c31765\c64706;\cssrgb\c3529\c52549\c34510;\cssrgb\c51765\c18824\c80784;\cssrgb\c0\c50196\c50196;
\cssrgb\c70980\c34902\c3137;}
\paperw11900\paperh16840\margl1440\margr1440\vieww28600\viewh15940\viewkind0
\deftab720
\pard\pardeftab720\partightenfactor0

\f0\fs28 \cf2 \cb3 \expnd0\expndtw0\kerning0
\outl0\strokewidth0 \strokec2 <!DOCTYPE\cf4 \strokec4  html\cf2 \strokec2 >\cf0 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf6 \cb3 \strokec6 <\cf7 \strokec7 html\cf0 \strokec5  \cf4 \strokec4 lang\cf6 \strokec6 =\cf8 \strokec8 "vi"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 <\cf7 \strokec7 head\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf0 \cb3     \cf6 \strokec6 <\cf7 \strokec7 meta\cf0 \strokec5  \cf4 \strokec4 charset\cf6 \strokec6 =\cf8 \strokec8 "UTF-8"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf7 \strokec7 meta\cf0 \strokec5  \cf4 \strokec4 name\cf6 \strokec6 =\cf8 \strokec8 "viewport"\cf0 \strokec5  \cf4 \strokec4 content\cf6 \strokec6 =\cf8 \strokec8 "width=device-width, initial-scale=1.0"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf7 \strokec7 title\cf6 \strokec6 >\cf0 \strokec5 Tra c\uc0\u7913 u Ch\u7913 ng ch\u7881  - AYP.VN\cf6 \strokec6 </\cf7 \strokec7 title\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3     \cb1 \
\cb3     \cf9 \strokec9 <!-- Tailwind CSS for styling -->\cf0 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf7 \strokec7 script\cf0 \strokec5  \cf4 \strokec4 src\cf6 \strokec6 =\cf8 \strokec8 "https://cdn.tailwindcss.com"\cf6 \strokec6 ></\cf7 \strokec7 script\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3     \cb1 \
\cb3     \cf9 \strokec9 <!-- Google Fonts -->\cf0 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf7 \strokec7 link\cf0 \strokec5  \cf4 \strokec4 rel\cf6 \strokec6 =\cf8 \strokec8 "preconnect"\cf0 \strokec5  \cf4 \strokec4 href\cf6 \strokec6 =\cf8 \strokec8 "https://fonts.googleapis.com"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf7 \strokec7 link\cf0 \strokec5  \cf4 \strokec4 rel\cf6 \strokec6 =\cf8 \strokec8 "preconnect"\cf0 \strokec5  \cf4 \strokec4 href\cf6 \strokec6 =\cf8 \strokec8 "https://fonts.gstatic.com"\cf0 \strokec5  \cf4 \strokec4 crossorigin\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3     \cf6 \strokec6 <\cf7 \strokec7 link\cf0 \strokec5  \cf4 \strokec4 href\cf6 \strokec6 =\cf8 \strokec8 "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"\cf0 \strokec5  \cf4 \strokec4 rel\cf6 \strokec6 =\cf8 \strokec8 "stylesheet"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3     \cb1 \
\cb3     \cf6 \strokec6 <\cf7 \strokec7 style\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3         \cf7 \strokec7 body\cf0 \strokec5  \{\cb1 \
\cb3             \cf4 \strokec4 font-family:\cf0 \strokec5  \cf10 \strokec10 'Roboto'\cf0 \strokec5 , \cf11 \strokec11 sans-serif\cf0 \strokec5 ;\cb1 \
\cb3         \}\cb1 \
\cb3         \cf7 \strokec7 .loader\cf0 \strokec5  \{\cb1 \
\cb3             \cf4 \strokec4 border-top-color:\cf0 \strokec5  \cf11 \strokec11 #3498db\cf0 \strokec5 ;\cb1 \
\cb3             \cf4 \strokec4 animation:\cf0 \strokec5  \cf11 \strokec11 spin\cf0 \strokec5  \cf12 \strokec12 1s\cf0 \strokec5  \cf11 \strokec11 linear\cf0 \strokec5  \cf11 \strokec11 infinite\cf0 \strokec5 ;\cb1 \
\cb3         \}\cb1 \
\cb3         \cf13 \strokec13 @keyframes\cf0 \strokec5  \cf11 \strokec11 spin\cf0 \strokec5  \{\cb1 \
\cb3             \cf11 \strokec11 to\cf0 \strokec5  \{\cb1 \
\cb3                 \cf4 \strokec4 transform:\cf0 \strokec5  \cf11 \strokec11 rotate(\cf12 \strokec12 360deg\cf11 \strokec11 )\cf0 \strokec5 ;\cb1 \
\cb3             \}\cb1 \
\cb3         \}\cb1 \
\cb3     \cf6 \strokec6 </\cf7 \strokec7 style\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf6 \cb3 \strokec6 </\cf7 \strokec7 head\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 <\cf7 \strokec7 body\cf0 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf8 \strokec8 "bg-gray-100 flex items-center justify-center min-h-screen p-4"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\
\pard\pardeftab720\partightenfactor0
\cf0 \cb3     \cf6 \strokec6 <\cf7 \strokec7 div\cf0 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf8 \strokec8 "w-full max-w-2xl bg-white rounded-lg shadow-xl p-6 md:p-8"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3         \cb1 \
\cb3         \cf9 \strokec9 <!-- Header -->\cf0 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf7 \strokec7 div\cf0 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf8 \strokec8 "text-center mb-6"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf7 \strokec7 img\cf0 \strokec5  \cf4 \strokec4 src\cf6 \strokec6 =\cf8 \strokec8 "https://placehold.co/150x60/ffffff/1e3a8a?text=AYP+Logo"\cf0 \strokec5  \cf4 \strokec4 alt\cf6 \strokec6 =\cf8 \strokec8 "AYP Logo"\cf0 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf8 \strokec8 "mx-auto h-12 w-auto mb-4"\cf0 \strokec5  \cf4 \strokec4 onerror\cf6 \strokec6 =\cf8 \strokec8 "this.onerror=null;this.src='https://placehold.co/150x60';"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf7 \strokec7 h1\cf0 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf8 \strokec8 "text-2xl md:text-3xl font-bold text-gray-800"\cf6 \strokec6 >\cf0 \strokec5 Tra c\uc0\u7913 u Ch\u7913 ng nh\u7853 n Ho\'e0n th\'e0nh Kh\'f3a h\u7885 c\cf6 \strokec6 </\cf7 \strokec7 h1\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf7 \strokec7 p\cf0 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf8 \strokec8 "text-gray-600 mt-2"\cf6 \strokec6 >\cf0 \strokec5 Vui l\'f2ng nh\uc0\u7853 p \u273 \u7883 a ch\u7881  email b\u7841 n \u273 \'e3 s\u7917  d\u7909 ng \u273 \u7875  \u273 \u259 ng k\'fd kh\'f3a h\u7885 c.\cf6 \strokec6 </\cf7 \strokec7 p\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf7 \strokec7 div\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\
\cb3         \cf9 \strokec9 <!-- Search Form -->\cf0 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf7 \strokec7 form\cf0 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf8 \strokec8 "searchForm"\cf0 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf8 \strokec8 "flex flex-col sm:flex-row gap-3"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf7 \strokec7 input\cf0 \strokec5  \cb1 \
\cb3                 \cf4 \strokec4 type\cf6 \strokec6 =\cf8 \strokec8 "email"\cf0 \strokec5  \cb1 \
\cb3                 \cf4 \strokec4 id\cf6 \strokec6 =\cf8 \strokec8 "emailInput"\cf0 \strokec5  \cb1 \
\cb3                 \cf4 \strokec4 placeholder\cf6 \strokec6 =\cf8 \strokec8 "Nh\uc0\u7853 p email c\u7911 a b\u7841 n..."\cf0 \strokec5  \cb1 \
\cb3                 \cf4 \strokec4 required\cf0 \cb1 \strokec5 \
\cb3                 \cf4 \strokec4 class\cf6 \strokec6 =\cf8 \strokec8 "flex-grow w-full px-4 py-3 text-gray-700 bg-gray-50 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"\cf0 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 <\cf7 \strokec7 button\cf0 \strokec5  \cb1 \
\cb3                 \cf4 \strokec4 type\cf6 \strokec6 =\cf8 \strokec8 "submit"\cf0 \strokec5  \cb1 \
\cb3                 \cf4 \strokec4 id\cf6 \strokec6 =\cf8 \strokec8 "submitButton"\cf0 \cb1 \strokec5 \
\cb3                 \cf4 \strokec4 class\cf6 \strokec6 =\cf8 \strokec8 "bg-blue-600 text-white font-bold py-3 px-6 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-transform transform hover:scale-105 flex items-center justify-center"\cf0 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf7 \strokec7 svg\cf0 \strokec5  \cf4 \strokec4 xmlns\cf6 \strokec6 =\cf8 \strokec8 "http://www.w3.org/2000/svg"\cf0 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf8 \strokec8 "h-5 w-5 mr-2"\cf0 \strokec5  \cf4 \strokec4 viewBox\cf6 \strokec6 =\cf8 \strokec8 "0 0 20 20"\cf0 \strokec5  \cf4 \strokec4 fill\cf6 \strokec6 =\cf8 \strokec8 "currentColor"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3                   \cf6 \strokec6 <\cf7 \strokec7 path\cf0 \strokec5  \cf4 \strokec4 fill-rule\cf6 \strokec6 =\cf8 \strokec8 "evenodd"\cf0 \strokec5  \cf4 \strokec4 d\cf6 \strokec6 =\cf8 \strokec8 "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"\cf0 \strokec5  \cf4 \strokec4 clip-rule\cf6 \strokec6 =\cf8 \strokec8 "evenodd"\cf0 \strokec5  \cf6 \strokec6 />\cf0 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 </\cf7 \strokec7 svg\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3                 \cf6 \strokec6 <\cf7 \strokec7 span\cf6 \strokec6 >\cf0 \strokec5 T\'ecm ki\uc0\u7871 m\cf6 \strokec6 </\cf7 \strokec7 span\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3             \cf6 \strokec6 </\cf7 \strokec7 button\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf7 \strokec7 form\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\
\cb3         \cf9 \strokec9 <!-- Results Area -->\cf0 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 <\cf7 \strokec7 div\cf0 \strokec5  \cf4 \strokec4 id\cf6 \strokec6 =\cf8 \strokec8 "results"\cf0 \strokec5  \cf4 \strokec4 class\cf6 \strokec6 =\cf8 \strokec8 "mt-8"\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3             \cf9 \strokec9 <!-- K\uc0\u7871 t qu\u7843  t\'ecm ki\u7871 m s\u7869  \u273 \u432 \u7907 c hi\u7875 n th\u7883  \u7903  \u273 \'e2y -->\cf0 \cb1 \strokec5 \
\cb3         \cf6 \strokec6 </\cf7 \strokec7 div\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\
\cb3     \cf6 \strokec6 </\cf7 \strokec7 div\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\
\cb3     \cf6 \strokec6 <\cf7 \strokec7 script\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cb3         \cf13 \strokec13 const\cf0 \strokec5  searchForm = document.getElementById(\cf10 \strokec10 'searchForm'\cf0 \strokec5 );\cb1 \
\cb3         \cf13 \strokec13 const\cf0 \strokec5  emailInput = document.getElementById(\cf10 \strokec10 'emailInput'\cf0 \strokec5 );\cb1 \
\cb3         \cf13 \strokec13 const\cf0 \strokec5  resultsDiv = document.getElementById(\cf10 \strokec10 'results'\cf0 \strokec5 );\cb1 \
\cb3         \cf13 \strokec13 const\cf0 \strokec5  submitButton = document.getElementById(\cf10 \strokec10 'submitButton'\cf0 \strokec5 );\cb1 \
\
\cb3         \cf9 \strokec9 // !!! QUAN TR\uc0\u7884 NG: \u272 \'e2y l\'e0 URL backend c\u7911 a b\u7841 n\cf0 \cb1 \strokec5 \
\cb3         \cf13 \strokec13 const\cf0 \strokec5  \cf14 \strokec14 API_URL\cf0 \strokec5  = \cf10 \strokec10 'https://script.google.com/macros/s/AKfycbxfOI7-ekYgiAp61myEFkWMqojL0t0UsQ6A_EUiMhBxO8TEvb5JUrC80JImIxYdvMlD/exec'\cf0 \strokec5 ;\cb1 \
\
\cb3         searchForm.addEventListener(\cf10 \strokec10 'submit'\cf0 \strokec5 , \cf13 \strokec13 function\cf0 \strokec5 (e) \{\cb1 \
\cb3             e.preventDefault();\cb1 \
\cb3             \cf13 \strokec13 const\cf0 \strokec5  email = emailInput.value.trim();\cb1 \
\cb3             \cf13 \strokec13 if\cf0 \strokec5  (!email) \cf13 \strokec13 return\cf0 \strokec5 ;\cb1 \
\
\cb3             \cf9 \strokec9 // Hi\uc0\u7875 n th\u7883  tr\u7841 ng th\'e1i \u273 ang t\u7843 i\cf0 \cb1 \strokec5 \
\cb3             showLoading();\cb1 \
\
\cb3             \cf9 \strokec9 // G\uc0\u7885 i API\cf0 \cb1 \strokec5 \
\cb3             fetch(\cf10 \strokec10 `\cf0 \strokec5 $\{\cf14 \strokec14 API_URL\cf0 \strokec5 \}\cf10 \strokec10 ?email=\cf0 \strokec5 $\{encodeURIComponent(email)\}\cf10 \strokec10 `\cf0 \strokec5 )\cb1 \
\cb3                 .then(response => response.json())\cb1 \
\cb3                 .then(data => \{\cb1 \
\cb3                     displayResults(data);\cb1 \
\cb3                 \})\cb1 \
\cb3                 .\cf13 \strokec13 catch\cf0 \strokec5 (error => \{\cb1 \
\cb3                     console.error(\cf10 \strokec10 'L\uc0\u7895 i khi g\u7885 i API:'\cf0 \strokec5 , error);\cb1 \
\cb3                     showError(\cf10 \strokec10 '\uc0\u272 \'e3 c\'f3 l\u7895 i x\u7843 y ra. Vui l\'f2ng th\u7917  l\u7841 i sau.'\cf0 \strokec5 );\cb1 \
\cb3                 \});\cb1 \
\cb3         \});\cb1 \
\
\cb3         \cf13 \strokec13 function\cf0 \strokec5  showLoading() \{\cb1 \
\cb3             submitButton.disabled = \cf13 \strokec13 true\cf0 \strokec5 ;\cb1 \
\cb3             submitButton.innerHTML = \cf10 \strokec10 `<div class="loader h-5 w-5 border-2 border-white rounded-full"></div><span class="ml-2">\uc0\u272 ang t\'ecm...</span>`\cf0 \strokec5 ;\cb1 \
\cb3             resultsDiv.innerHTML = \cf10 \strokec10 ''\cf0 \strokec5 ;\cb1 \
\cb3         \}\cb1 \
\
\cb3         \cf13 \strokec13 function\cf0 \strokec5  resetSubmitButton() \{\cb1 \
\cb3             submitButton.disabled = \cf13 \strokec13 false\cf0 \strokec5 ;\cb1 \
\cb3             submitButton.innerHTML = \cf10 \strokec10 `\cf0 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf10 \cb3 \strokec10                 <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                   <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                 </svg>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                 <span>T\'ecm ki\uc0\u7871 m</span>`\cf0 \strokec5 ;\cb1 \
\pard\pardeftab720\partightenfactor0
\cf0 \cb3         \}\cb1 \
\cb3         \cb1 \
\cb3         \cf13 \strokec13 function\cf0 \strokec5  displayResults(data) \{\cb1 \
\cb3             resetSubmitButton();\cb1 \
\
\cb3             \cf13 \strokec13 if\cf0 \strokec5  (data.error) \{\cb1 \
\cb3                 showError(data.message);\cb1 \
\cb3                 \cf13 \strokec13 return\cf0 \strokec5 ;\cb1 \
\cb3             \}\cb1 \
\
\cb3             \cf13 \strokec13 if\cf0 \strokec5  (!\cf14 \strokec14 Array\cf0 \strokec5 .isArray(data) || data.length === \cf15 \strokec15 0\cf0 \strokec5 ) \{\cb1 \
\cb3                 resultsDiv.innerHTML = \cf10 \strokec10 `\cf0 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf10 \cb3 \strokec10                     <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded-md" role="alert">\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                         <p class="font-bold">Kh\'f4ng t\'ecm th\uc0\u7845 y</p>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                         <p>Ch\'fang t\'f4i kh\'f4ng t\'ecm th\uc0\u7845 y ch\u7913 ng ch\u7881  n\'e0o kh\u7899 p v\u7899 i email b\u7841 n \u273 \'e3 cung c\u7845 p. Vui l\'f2ng ki\u7875 m tra l\u7841 i ho\u7863 c li\'ean h\u7879  v\u7899 i ch\'fang t\'f4i \u273 \u7875  \u273 \u432 \u7907 c h\u7895  tr\u7907 .</p>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                     </div>`\cf0 \strokec5 ;\cb1 \
\pard\pardeftab720\partightenfactor0
\cf0 \cb3                 \cf13 \strokec13 return\cf0 \strokec5 ;\cb1 \
\cb3             \}\cb1 \
\cb3             \cb1 \
\cb3             \cf9 \strokec9 // N\uc0\u7871 u ch\u7881  c\'f3 1 b\u7857 ng, chuy\u7875 n h\u432 \u7899 ng tr\u7921 c ti\u7871 p\cf0 \cb1 \strokec5 \
\cb3             \cf13 \strokec13 if\cf0 \strokec5  (data.length === \cf15 \strokec15 1\cf0 \strokec5  && data[\cf15 \strokec15 0\cf0 \strokec5 ][\cf10 \strokec10 'LinkBang'\cf0 \strokec5 ]) \{\cb1 \
\cb3                 \cf9 \strokec9 // T\uc0\u7841 o m\u7897 t trang xem b\u7857 ng t\u7841 m th\u7901 i b\u7857 ng c\'e1ch truy\u7873 n d\u7919  li\u7879 u qua URL\cf0 \cb1 \strokec5 \
\cb3                 \cf13 \strokec13 const\cf0 \strokec5  certData = encodeURIComponent(\cf14 \strokec14 JSON\cf0 \strokec5 .stringify(data[\cf15 \strokec15 0\cf0 \strokec5 ]));\cb1 \
\cb3                 window.location.href = \cf10 \strokec10 `view-certificate.html?data=\cf0 \strokec5 $\{certData\}\cf10 \strokec10 `\cf0 \strokec5 ;\cb1 \
\cb3                 \cf13 \strokec13 return\cf0 \strokec5 ;\cb1 \
\cb3             \}\cb1 \
\
\cb3             \cf9 \strokec9 // N\uc0\u7871 u c\'f3 nhi\u7873 u b\u7857 ng, hi\u7875 n th\u7883  danh s\'e1ch\cf0 \cb1 \strokec5 \
\cb3             \cf13 \strokec13 let\cf0 \strokec5  html = \cf10 \strokec10 `\cf0 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf10 \cb3 \strokec10                 <h2 class="text-xl font-bold text-gray-700 mb-4">K\uc0\u7871 t qu\u7843  t\'ecm th\u7845 y (\cf0 \strokec5 $\{data.length\}\cf10 \strokec10 ):</h2>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                 <div class="space-y-4">`\cf0 \strokec5 ;\cb1 \
\
\pard\pardeftab720\partightenfactor0
\cf0 \cb3             data.forEach(cert => \{\cb1 \
\cb3                 \cf13 \strokec13 const\cf0 \strokec5  certData = encodeURIComponent(\cf14 \strokec14 JSON\cf0 \strokec5 .stringify(cert));\cb1 \
\cb3                 \cf13 \strokec13 const\cf0 \strokec5  viewUrl = \cf10 \strokec10 `view-certificate.html?data=\cf0 \strokec5 $\{certData\}\cf10 \strokec10 `\cf0 \strokec5 ;\cb1 \
\
\cb3                 html += \cf10 \strokec10 `\cf0 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf10 \cb3 \strokec10                     <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 flex flex-col sm:flex-row justify-between items-start sm:items-center">\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                         <div>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                             <p class="font-bold text-blue-700">\cf0 \strokec5 $\{cert[\cf10 \strokec10 'TenKhoaHoc'\cf0 \strokec5 ] || \cf10 \strokec10 'Kh\'f4ng c\'f3 t\'ean kh\'f3a h\uc0\u7885 c'\cf0 \strokec5 \}\cf10 \strokec10 </p>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                             <p class="text-sm text-gray-600">H\uc0\u7885  t\'ean: <strong>\cf0 \strokec5 $\{cert[\cf10 \strokec10 'HoVaTen'\cf0 \strokec5 ] || \cf10 \strokec10 'N/A'\cf0 \strokec5 \}\cf10 \strokec10 </strong></p>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                             <p class="text-sm text-gray-600">Ng\'e0y c\uc0\u7845 p: <strong>\cf0 \strokec5 $\{cert[\cf10 \strokec10 'NgayCap'\cf0 \strokec5 ] ? \cf13 \strokec13 new\cf0 \strokec5  \cf14 \strokec14 Date\cf0 \strokec5 (cert[\cf10 \strokec10 'NgayCap'\cf0 \strokec5 ]).toLocaleDateString(\cf10 \strokec10 'vi-VN'\cf0 \strokec5 ) : \cf10 \strokec10 'N/A'\cf0 \strokec5 \}\cf10 \strokec10 </strong></p>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                         </div>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                         <a href="\cf0 \strokec5 $\{viewUrl\}\cf10 \strokec10 " class="mt-3 sm:mt-0 bg-green-500 text-white text-sm font-bold py-2 px-4 rounded-lg hover:bg-green-600 transition-transform transform hover:scale-105">\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                             Xem ch\uc0\u7913 ng ch\u7881 \cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                         </a>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                     </div>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                 `\cf0 \strokec5 ;\cb1 \
\pard\pardeftab720\partightenfactor0
\cf0 \cb3             \});\cb1 \
\
\cb3             html += \cf10 \strokec10 `</div>`\cf0 \strokec5 ;\cb1 \
\cb3             resultsDiv.innerHTML = html;\cb1 \
\cb3         \}\cb1 \
\
\cb3         \cf13 \strokec13 function\cf0 \strokec5  showError(message) \{\cb1 \
\cb3             resetSubmitButton();\cb1 \
\cb3             resultsDiv.innerHTML = \cf10 \strokec10 `\cf0 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf10 \cb3 \strokec10                 <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-md" role="alert">\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                     <p class="font-bold">\uc0\u272 \'e3 c\'f3 l\u7895 i x\u7843 y ra</p>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                     <p>\cf0 \strokec5 $\{message\}\cf10 \strokec10 </p>\cf0 \cb1 \strokec5 \
\cf10 \cb3 \strokec10                 </div>`\cf0 \strokec5 ;\cb1 \
\pard\pardeftab720\partightenfactor0
\cf0 \cb3         \}\cb1 \
\cb3     \cf6 \strokec6 </\cf7 \strokec7 script\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\pard\pardeftab720\partightenfactor0
\cf6 \cb3 \strokec6 </\cf7 \strokec7 body\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\cf6 \cb3 \strokec6 </\cf7 \strokec7 html\cf6 \strokec6 >\cf0 \cb1 \strokec5 \
\
}