Danh s\u00e1ch c\u00f4ng vi\u1ec7c<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&display=swap&font-display=swap\" rel=\"stylesheet\">\n <style>\n .job-listing-page body {\n font-family: 'Roboto', sans-serif;\n margin: 10px;\n }\n .job-listing-page .search-container {\n background-color: #032554;\n padding: 20px;\n border-radius: 5px;\n margin-bottom: 20px;\n }\n .job-listing-page .search-bar {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n }\n .job-listing-page .search-bar input, .job-listing-page .search-bar select, .job-listing-page .search-bar button {\n font-size: 16px;\n border: 1px solid #ccc;\n border-radius: 20px;\n margin-bottom: 10px;\n height: 45px;\n }\n .job-listing-page .search-bar input, .job-listing-page .search-bar select {\n width: calc(100% \/ 4 - 10px);\n }\n .job-listing-page .search-bar button {\n width: calc(100% \/ 4 - 10px);\n background-color: white;\n color: #00395d;\n cursor: pointer;\n border-radius: 20px;\n height: 45px;\n transition: background-color 0.3s, color 0.3s;\n }\n .job-listing-page .search-bar button:hover {\n background-color: #00395d;\n color: white;\n }\n .job-listing-page .job-listing {\n position: relative;\n margin-bottom: 20px;\n border: 1px solid #032554;\n padding: 20px;\n overflow: hidden;\n background-color: white;\n border-radius: 5px;\n }\n .job-listing-page .job-listing h1 {\n color: #032554;\n display: inline-block;\n margin-right: 20px;\n }\n .job-listing-page .job-listing p {\n margin: 5px 0;\n }\n .job-listing-page .job-detail {\n display: flex;\n justify-content: space-between;\n align-items: center;\n white-space: nowrap;\n }\n .job-listing-page .job-info {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n align-items: flex-start; \n }\n .job-listing-page .job-info > div {\n flex: 1;\n min-width: 150px;\n margin-right: 10px;\n margin-bottom: 5px; \n color: #666666; \/* M\u00e0u ch\u1eef ph\u1ea7n th\u00f4ng tin *\/\n }\n .job-listing-page .job-info > div:last-child {\n margin-right: 0;\n }\n .job-listing-page .detail-button {\n background-color: #FFFFFF;\n color: #032554;\n padding: 5px 15px;\n text-align: center;\n display: inline-block;\n cursor: pointer;\n border: 1px solid #032554;\n border-radius: 30px;\n transition: background-color 0.3s;\n margin-bottom: 10px;\n position: absolute;\n right: 15px;\n }\n .job-listing-page .detail-button:hover {\n background-color: #032554;\n color: white;\n }\n\n @media (max-width: 768px) {\n .job-listing-page .search-bar {\n flex-direction: column;\n }\n .job-listing-page .search-bar input, .job-listing-page .search-bar select, .job-listing-page .search-bar button {\n width: 100%;\n margin-right: 0;\n margin-bottom: 5px;\n height: 40px;\n }\n .job-listing-page .search-bar button {\n width: 100%;\n height: 45px;\n }\n .job-listing-page .job-detail {\n flex-direction: column;\n align-items: flex-start;\n white-space: normal;\n }\n .job-listing-page .job-info {\n flex-direction: column;\n align-items: flex-start;\n }\n .job-listing-page .job-info > div {\n display: inline-block; \n margin-right: 0;\n margin-bottom: 5px;\n }\n .job-listing-page .job-info > div > strong {\n display: inline; \n }\n .job-listing-page .job-info > div br {\n display: none; \n }\n .job-listing-page .detail-button {\n position: static;\n margin-top: 10px;\n width: 100%;\n max-width: none;\n }\n }\n .job-listing-page .popup {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n justify-content: center;\n align-items: center;\n z-index: 1000;\n }\n .job-listing-page .popup-content {\n background-color: white;\n padding: 25px;\n padding-bottom: 85px;\n border-radius: 0px;\n max-width: 1080px;\n width: 100%;\n height: 100vh;\n overflow-y: auto;\n position: relative;\n margin-bottom: 0px;\n }\n .job-listing-page .action-buttons {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 15px;\n background-color: white;\n border-top: 1px solid #ccc;\n box-shadow: 0 -2px 5px rgba(0,0,0,0.1);\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n text-align: center;\n }\n .job-listing-page .action-buttons button {\n background-color: #FF6347;\n color: white;\n padding: 10px 20px;\n text-align: center;\n display: inline-block;\n cursor: pointer;\n border-radius: 30px;\n transition: background-color 0.3s;\n margin: 0 10px;\n }\n .job-listing-page .action-buttons button.close-button {\n background-color: #032554;\n }\n .job-listing-page .action-buttons button.close-button:hover {\n background-color: #00395d;\n }\n .job-listing-page .action-buttons button.apply-button:hover {\n background-color: #FF4500;\n }\n body.popup-open {\n overflow: hidden;\n }\n\n .pagination {\n display: flex;\n justify-content: flex-end; \n align-items: center;\n margin-top: 10px;\n gap: 0px;\n padding: 1px;\n flex-wrap: nowrap;\n overflow-x: auto; \n }\n\n .pagination button {\n background-color: white;\n border: 1px solid #ccc;\n padding: 2px 10px;\n border-radius: 5px;\n cursor: pointer;\n font-size: 12px;\n }\n\n .pagination button.active {\n background-color: #032554;\n color: white;\n border: 1px solid #032554;\n }\n\n <\/style>\n<\/head>\n<body>\n <div class=\"job-listing-page\">\n <h1>CAREER OPPORTUNITIES<\/h1>\n <p>H\u00e0ng ng\u00e0n vi\u1ec7c l\u00e0m v\u1edbi m\u1ee9c l\u01b0\u01a1ng cao v\u00e0 ch\u1ebf \u0111\u1ed9 \u0111\u00e3i ng\u1ed9 c\u1ef1c t\u1ed1t \u0111ang ch\u1edd b\u1ea1n!<\/p>\n <div class=\"search-container\">\n <div class=\"search-bar\">\n <input type=\"text\" id=\"keyword\" placeholder=\"Job\">\n <select id=\"industry\">\n <option value=\"\">Career<\/option>\n <\/select>\n <select id=\"location\">\n <option value=\"\">Workplace<\/option>\n <\/select>\n <button onclick=\"searchJobs()\">SEARCH<\/button>\n <\/div>\n <\/div>\n <div id=\"pagination\" class=\"pagination\"><\/div>\n <div id=\"job-list\"><\/div>\n <div class=\"popup\" id=\"job-popup\">\n <div class=\"popup-content\">\n <h3 id=\"popup-jobname\"><\/h3>\n <p><strong>M\u00e3 job:<\/strong> <span id=\"popup-jobcode\"><\/span><\/p>\n <p><strong>Workplace:<\/strong> <span id=\"popup-location\"><\/span><\/p>\n <p><strong>Wage:<\/strong> <span id=\"popup-salary\"><\/span><\/p>\n <p><strong>M\u00f4 t\u1ea3 c\u00f4ng vi\u1ec7c:<\/strong> <br><span id=\"popup-description\"><\/span><\/p>\n <p><strong>Y\u00eau c\u1ea7u:<\/strong><br> <span id=\"popup-requirements\"><\/span><\/p>\n <p><strong>Welfare:<\/strong><br> <span id=\"popup-benefits\"><\/span><\/p>\n <\/div>\n <div class=\"action-buttons\">\n <button class=\"close-button\" onclick=\"closePopup()\">Close<\/button>\n <button class=\"apply-button\" onclick=\"applyNow()\">Apply now<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let allJobs = [];\n let currentPage = 1;\n const jobsPerPage = 15;\n let showingAllJobs = false;\n document.addEventListener(\"DOMContentLoaded\", function() {\n const cachedJobs = sessionStorage.getItem('allJobs');\n if (cachedJobs) {\n allJobs = JSON.parse(cachedJobs);\n populateFilters(allJobs);\n displayJobs(allJobs);\n } else {\n fetch('https:\/\/script.google.com\/macros\/s\/AKfycbzaRyUGFX1C1bJbhmLZuPEl_fP_tEdVCZt8Z6jEVQT-hrcT32DabDPT9DOIIXjaUCQ1Tw\/exec')\n .then(response => response.json())\n .then(jobs => {\n allJobs = jobs;\n sessionStorage.setItem('allJobs', JSON.stringify(jobs));\n populateFilters(jobs);\n displayJobs(jobs);\n })\n .catch(error => console.error('Error:', error));\n }\n });\n\n function formatDate(dateString) {\n const date = new Date(dateString);\n const day = String(date.getDate()).padStart(2, '0');\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const year = date.getFullYear();\n return `${day}\/${month}\/${year}`;\n }\n\n function populateFilters(jobs) {\n const industrySelect = document.getElementById('industry');\n const locationSelect = document.getElementById('location'); \n const industries = [...new Set(jobs.map(job => job.industry))];\n const locations = [...new Set(jobs.flatMap(job => job.location.split(',').map(loc => loc.trim())))];\n\n industries.forEach(industry => {\n const option = document.createElement('option');\n option.value = industry;\n option.textContent = industry;\n industrySelect.appendChild(option);\n });\n\n locations.forEach(location => {\n const option = document.createElement('option');\n option.value = location;\n option.textContent = location;\n locationSelect.appendChild(option);\n });\n }\n\nfunction displayJobs(jobs) {\n const container = document.getElementById('job-list');\n const pagination = document.getElementById('pagination');\n container.innerHTML = '';\n pagination.innerHTML = '';\n\n \/\/ S\u1eafp x\u1ebfp c\u00f4ng vi\u1ec7c theo ng\u00e0y m\u1edbi nh\u1ea5t \u0111\u1ebfn c\u0169 nh\u1ea5t\n jobs.sort((a, b) => new Date(b.creatdate) - new Date(a.creatdate));\n\n const totalJobs = jobs.length;\n const totalPages = Math.ceil(totalJobs \/ jobsPerPage);\n const pagesToShow = 4; \/\/ S\u1ed1 l\u01b0\u1ee3ng trang hi\u1ec3n th\u1ecb t\u1ed1i \u0111a\n\n \/\/ X\u00e1c \u0111\u1ecbnh danh s\u00e1ch job trong trang hi\u1ec7n t\u1ea1i\n const startIndex = (currentPage - 1) * jobsPerPage;\n const endIndex = Math.min(startIndex + jobsPerPage, totalJobs);\n const jobsToShow = jobs.slice(startIndex, endIndex);\n\n \/\/ Hi\u1ec3n th\u1ecb danh s\u00e1ch c\u00f4ng vi\u1ec7c\n jobsToShow.forEach(job => {\n const jobElement = document.createElement('div');\n jobElement.classList.add('job-listing');\n jobElement.innerHTML = `\n <div class=\"job-detail\">\n <h3>${job.jobname}<\/h3>\n <\/div>\n <div class=\"job-info\">\n <div><strong>M\u00e3 job<\/strong><br> ${job.jobcode}<\/div>\n <div><strong>\u0110\u1ecba \u0111i\u1ec3m<\/strong><br> ${job.location}<\/div>\n <div><strong>M\u1ee9c l\u01b0\u01a1ng<\/strong><br> ${job.salary}<\/div>\n <div><strong>Ng\u00e0y c\u1eadp nh\u1eadt<\/strong><br> ${formatDate(job.creatdate)}<\/div>\n <div><button class=\"detail-button\" onclick=\"showJobDetails('${job.jobcode}')\">Xem chi ti\u1ebft<\/button><\/div>\n <\/div>\n `;\n container.appendChild(jobElement);\n });\n\n \/\/ Hi\u1ec3n th\u1ecb c\u00e1c n\u00fat ph\u00e2n trang\n const firstButton = createPageButton('\u00ab', () => {\n currentPage = 1;\n displayJobs(jobs);\n });\n pagination.appendChild(firstButton);\n\n const prevButton = createPageButton('\u2039', () => {\n if (currentPage > 1) currentPage--;\n displayJobs(jobs);\n });\n pagination.appendChild(prevButton);\n\n \/\/ T\u00ednh to\u00e1n trang b\u1eaft \u0111\u1ea7u v\u00e0 trang k\u1ebft th\u00fac hi\u1ec3n th\u1ecb\n let startPage = Math.max(1, currentPage - Math.floor(pagesToShow \/ 2));\n let endPage = Math.min(totalPages, startPage + pagesToShow - 1);\n\n \/\/ \u0110i\u1ec1u ch\u1ec9nh n\u1ebfu t\u1ed5ng s\u1ed1 trang nh\u1ecf h\u01a1n `pagesToShow`\n if (endPage - startPage + 1 < pagesToShow) {\n startPage = Math.max(1, endPage - pagesToShow + 1);\n }\n\n \/\/ Hi\u1ec3n th\u1ecb d\u1ea5u `...` n\u1ebfu c\u00f3 trang ph\u00eda tr\u01b0\u1edbc\n if (startPage > 1) {\n pagination.appendChild(createEllipsis());\n }\n\n for (let i = startPage; i <= endPage; i++) {\n const pageButton = createPageButton(i, () => {\n currentPage = i;\n displayJobs(jobs);\n }, i === currentPage);\n pagination.appendChild(pageButton);\n }\n\n \/\/ Hi\u1ec3n th\u1ecb d\u1ea5u `...` n\u1ebfu c\u00f3 trang ph\u00eda sau\n if (endPage < totalPages) {\n pagination.appendChild(createEllipsis());\n }\n\n const nextButton = createPageButton('\u203a', () => {\n if (currentPage < totalPages) currentPage++;\n displayJobs(jobs);\n });\n pagination.appendChild(nextButton);\n\n const lastButton = createPageButton('\u00bb', () => {\n currentPage = totalPages;\n displayJobs(jobs);\n });\n pagination.appendChild(lastButton);\n}\n\nfunction createPageButton(text, onClick, isActive = false) {\n const button = document.createElement('button');\n button.textContent = text;\n button.className = isActive ? 'active' : '';\n button.onclick = onClick;\n return button;\n}\n\nfunction createEllipsis() {\n const ellipsis = document.createElement('span');\n ellipsis.textContent = '...';\n ellipsis.style.margin = '1 1px';\n return ellipsis;\n}\n\n function searchJobs() {\n const keyword = document.getElementById('keyword').value.toLowerCase();\n const industry = document.getElementById('industry').value;\n const location = document.getElementById('location').value.toLowerCase();\n\n const filteredJobs = allJobs.filter(job => {\n const matchesKeyword = job.jobname.toLowerCase().includes(keyword);\n const matchesIndustry = !industry || job.industry.includes(industry);\n const matchesLocation = !location || job.location.split(',').map(loc => loc.trim().toLowerCase()).includes(location);\n return matchesKeyword && matchesIndustry && matchesLocation;\n });\n\n currentPage = 1; \/\/ Reset v\u1ec1 trang 1\n displayJobs(filteredJobs);\n}\n\n\n function showJobDetails(jobcode) {\n const job = allJobs.find(job => job.jobcode === jobcode);\n if (job) {\n document.getElementById('popup-jobname').textContent = job.jobname;\n document.getElementById('popup-jobcode').textContent = job.jobcode;\n document.getElementById('popup-location').textContent = job.location;\n document.getElementById('popup-salary').textContent = job.salary;\n document.getElementById('popup-benefits').innerHTML = job.benefits;\n document.getElementById('popup-description').innerHTML = job.jobdescription;\n document.getElementById('popup-requirements').innerHTML = job.jobrequirements;\n document.getElementById('job-popup').style.display = 'flex';\n document.body.classList.add('popup-open');\n sessionStorage.setItem('jobcode', job.jobcode);\n }\n }\n\n function closePopup() {\n document.getElementById('job-popup').style.display = 'none';\n document.body.classList.remove('popup-open');\n }\n\n function applyNow() {\n const jobcode = sessionStorage.getItem('jobcode');\n const jobApplyLink = 'https:\/\/jobbank.com.vn\/dang-ky\/';\n window.open(jobApplyLink, '_blank');\n }\n\n function showAllJobs() {\n showingAllJobs = true;\n displayJobs(allJobs);\n }\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Danh s\u00e1ch c\u00f4ng vi\u1ec7c C\u01a1 h\u1ed9i vi\u1ec7c l\u00e0m H\u00e0ng ng\u00e0n vi\u1ec7c l\u00e0m v\u1edbi m\u1ee9c l\u01b0\u01a1ng cao v\u00e0 ch\u1ebf \u0111\u1ed9 \u0111\u00e3i ng\u1ed9 c\u1ef1c t\u1ed1t \u0111ang ch\u1edd b\u1ea1n! Ng\u00e0nh ngh\u1ec1 N\u01a1i l\u00e0m vi\u1ec7c T\u00ccM KI\u1ebeM M\u00e3 job: \u0110\u1ecba \u0111i\u1ec3m: M\u1ee9c l\u01b0\u01a1ng: M\u00f4 t\u1ea3 c\u00f4ng vi\u1ec7c: Y\u00eau c\u1ea7u: Ph\u00fac l\u1ee3i: \u0110\u00f3ng \u1ee8ng tuy\u1ec3n ngay<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-32","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":89,"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":1059,"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/pages\/32\/revisions\/1059"}],"wp:attachment":[{"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/media?parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":32,"date":"2024-07-11T23:15:07","date_gmt":"2024-07-11T16:15:07","guid":{"rendered":"https:\/\/jobbank.com.vn\/?page_id=32"},"modified":"2024-11-21T10:47:12","modified_gmt":"2024-11-21T03:47:12","slug":"thu-nghiem","status":"publish","type":"page","link":"https:\/\/jobbank.com.vn\/en\/thu-nghiem\/","title":{"rendered":"Th\u1eed nghi\u1ec7m"},"content":{"rendered":"\n\n\n \n \n Danh s\u00e1ch c\u00f4ng vi\u1ec7c<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&display=swap&font-display=swap\" rel=\"stylesheet\">\n <style>\n .job-listing-page body {\n font-family: 'Roboto', sans-serif;\n margin: 10px;\n }\n .job-listing-page .search-container {\n background-color: #032554;\n padding: 20px;\n border-radius: 5px;\n margin-bottom: 20px;\n }\n .job-listing-page .search-bar {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n }\n .job-listing-page .search-bar input, .job-listing-page .search-bar select, .job-listing-page .search-bar button {\n font-size: 16px;\n border: 1px solid #ccc;\n border-radius: 20px;\n margin-bottom: 10px;\n height: 45px;\n }\n .job-listing-page .search-bar input, .job-listing-page .search-bar select {\n width: calc(100% \/ 4 - 10px);\n }\n .job-listing-page .search-bar button {\n width: calc(100% \/ 4 - 10px);\n background-color: white;\n color: #00395d;\n cursor: pointer;\n border-radius: 20px;\n height: 45px;\n transition: background-color 0.3s, color 0.3s;\n }\n .job-listing-page .search-bar button:hover {\n background-color: #00395d;\n color: white;\n }\n .job-listing-page .job-listing {\n position: relative;\n margin-bottom: 20px;\n border: 1px solid #032554;\n padding: 20px;\n overflow: hidden;\n background-color: white;\n border-radius: 5px;\n }\n .job-listing-page .job-listing h1 {\n color: #032554;\n display: inline-block;\n margin-right: 20px;\n }\n .job-listing-page .job-listing p {\n margin: 5px 0;\n }\n .job-listing-page .job-detail {\n display: flex;\n justify-content: space-between;\n align-items: center;\n white-space: nowrap;\n }\n .job-listing-page .job-info {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n align-items: flex-start; \n }\n .job-listing-page .job-info > div {\n flex: 1;\n min-width: 150px;\n margin-right: 10px;\n margin-bottom: 5px; \n color: #666666; \/* M\u00e0u ch\u1eef ph\u1ea7n th\u00f4ng tin *\/\n }\n .job-listing-page .job-info > div:last-child {\n margin-right: 0;\n }\n .job-listing-page .detail-button {\n background-color: #FFFFFF;\n color: #032554;\n padding: 5px 15px;\n text-align: center;\n display: inline-block;\n cursor: pointer;\n border: 1px solid #032554;\n border-radius: 30px;\n transition: background-color 0.3s;\n margin-bottom: 10px;\n position: absolute;\n right: 15px;\n }\n .job-listing-page .detail-button:hover {\n background-color: #032554;\n color: white;\n }\n\n @media (max-width: 768px) {\n .job-listing-page .search-bar {\n flex-direction: column;\n }\n .job-listing-page .search-bar input, .job-listing-page .search-bar select, .job-listing-page .search-bar button {\n width: 100%;\n margin-right: 0;\n margin-bottom: 5px;\n height: 40px;\n }\n .job-listing-page .search-bar button {\n width: 100%;\n height: 45px;\n }\n .job-listing-page .job-detail {\n flex-direction: column;\n align-items: flex-start;\n white-space: normal;\n }\n .job-listing-page .job-info {\n flex-direction: column;\n align-items: flex-start;\n }\n .job-listing-page .job-info > div {\n display: inline-block; \n margin-right: 0;\n margin-bottom: 5px;\n }\n .job-listing-page .job-info > div > strong {\n display: inline; \n }\n .job-listing-page .job-info > div br {\n display: none; \n }\n .job-listing-page .detail-button {\n position: static;\n margin-top: 10px;\n width: 100%;\n max-width: none;\n }\n }\n .job-listing-page .popup {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n justify-content: center;\n align-items: center;\n z-index: 1000;\n }\n .job-listing-page .popup-content {\n background-color: white;\n padding: 25px;\n padding-bottom: 85px;\n border-radius: 0px;\n max-width: 1080px;\n width: 100%;\n height: 100vh;\n overflow-y: auto;\n position: relative;\n margin-bottom: 0px;\n }\n .job-listing-page .action-buttons {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n padding: 15px;\n background-color: white;\n border-top: 1px solid #ccc;\n box-shadow: 0 -2px 5px rgba(0,0,0,0.1);\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n text-align: center;\n }\n .job-listing-page .action-buttons button {\n background-color: #FF6347;\n color: white;\n padding: 10px 20px;\n text-align: center;\n display: inline-block;\n cursor: pointer;\n border-radius: 30px;\n transition: background-color 0.3s;\n margin: 0 10px;\n }\n .job-listing-page .action-buttons button.close-button {\n background-color: #032554;\n }\n .job-listing-page .action-buttons button.close-button:hover {\n background-color: #00395d;\n }\n .job-listing-page .action-buttons button.apply-button:hover {\n background-color: #FF4500;\n }\n body.popup-open {\n overflow: hidden;\n }\n\n .pagination {\n display: flex;\n justify-content: flex-end; \n align-items: center;\n margin-top: 10px;\n gap: 0px;\n padding: 1px;\n flex-wrap: nowrap;\n overflow-x: auto; \n }\n\n .pagination button {\n background-color: white;\n border: 1px solid #ccc;\n padding: 2px 10px;\n border-radius: 5px;\n cursor: pointer;\n font-size: 12px;\n }\n\n .pagination button.active {\n background-color: #032554;\n color: white;\n border: 1px solid #032554;\n }\n\n <\/style>\n<\/head>\n<body>\n <div class=\"job-listing-page\">\n <h1>CAREER OPPORTUNITIES<\/h1>\n <p>H\u00e0ng ng\u00e0n vi\u1ec7c l\u00e0m v\u1edbi m\u1ee9c l\u01b0\u01a1ng cao v\u00e0 ch\u1ebf \u0111\u1ed9 \u0111\u00e3i ng\u1ed9 c\u1ef1c t\u1ed1t \u0111ang ch\u1edd b\u1ea1n!<\/p>\n <div class=\"search-container\">\n <div class=\"search-bar\">\n <input type=\"text\" id=\"keyword\" placeholder=\"Job\">\n <select id=\"industry\">\n <option value=\"\">Career<\/option>\n <\/select>\n <select id=\"location\">\n <option value=\"\">Workplace<\/option>\n <\/select>\n <button onclick=\"searchJobs()\">SEARCH<\/button>\n <\/div>\n <\/div>\n <div id=\"pagination\" class=\"pagination\"><\/div>\n <div id=\"job-list\"><\/div>\n <div class=\"popup\" id=\"job-popup\">\n <div class=\"popup-content\">\n <h3 id=\"popup-jobname\"><\/h3>\n <p><strong>M\u00e3 job:<\/strong> <span id=\"popup-jobcode\"><\/span><\/p>\n <p><strong>Workplace:<\/strong> <span id=\"popup-location\"><\/span><\/p>\n <p><strong>Wage:<\/strong> <span id=\"popup-salary\"><\/span><\/p>\n <p><strong>M\u00f4 t\u1ea3 c\u00f4ng vi\u1ec7c:<\/strong> <br><span id=\"popup-description\"><\/span><\/p>\n <p><strong>Y\u00eau c\u1ea7u:<\/strong><br> <span id=\"popup-requirements\"><\/span><\/p>\n <p><strong>Welfare:<\/strong><br> <span id=\"popup-benefits\"><\/span><\/p>\n <\/div>\n <div class=\"action-buttons\">\n <button class=\"close-button\" onclick=\"closePopup()\">Close<\/button>\n <button class=\"apply-button\" onclick=\"applyNow()\">Apply now<\/button>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n let allJobs = [];\n let currentPage = 1;\n const jobsPerPage = 15;\n let showingAllJobs = false;\n document.addEventListener(\"DOMContentLoaded\", function() {\n const cachedJobs = sessionStorage.getItem('allJobs');\n if (cachedJobs) {\n allJobs = JSON.parse(cachedJobs);\n populateFilters(allJobs);\n displayJobs(allJobs);\n } else {\n fetch('https:\/\/script.google.com\/macros\/s\/AKfycbzaRyUGFX1C1bJbhmLZuPEl_fP_tEdVCZt8Z6jEVQT-hrcT32DabDPT9DOIIXjaUCQ1Tw\/exec')\n .then(response => response.json())\n .then(jobs => {\n allJobs = jobs;\n sessionStorage.setItem('allJobs', JSON.stringify(jobs));\n populateFilters(jobs);\n displayJobs(jobs);\n })\n .catch(error => console.error('Error:', error));\n }\n });\n\n function formatDate(dateString) {\n const date = new Date(dateString);\n const day = String(date.getDate()).padStart(2, '0');\n const month = String(date.getMonth() + 1).padStart(2, '0');\n const year = date.getFullYear();\n return `${day}\/${month}\/${year}`;\n }\n\n function populateFilters(jobs) {\n const industrySelect = document.getElementById('industry');\n const locationSelect = document.getElementById('location'); \n const industries = [...new Set(jobs.map(job => job.industry))];\n const locations = [...new Set(jobs.flatMap(job => job.location.split(',').map(loc => loc.trim())))];\n\n industries.forEach(industry => {\n const option = document.createElement('option');\n option.value = industry;\n option.textContent = industry;\n industrySelect.appendChild(option);\n });\n\n locations.forEach(location => {\n const option = document.createElement('option');\n option.value = location;\n option.textContent = location;\n locationSelect.appendChild(option);\n });\n }\n\nfunction displayJobs(jobs) {\n const container = document.getElementById('job-list');\n const pagination = document.getElementById('pagination');\n container.innerHTML = '';\n pagination.innerHTML = '';\n\n \/\/ S\u1eafp x\u1ebfp c\u00f4ng vi\u1ec7c theo ng\u00e0y m\u1edbi nh\u1ea5t \u0111\u1ebfn c\u0169 nh\u1ea5t\n jobs.sort((a, b) => new Date(b.creatdate) - new Date(a.creatdate));\n\n const totalJobs = jobs.length;\n const totalPages = Math.ceil(totalJobs \/ jobsPerPage);\n const pagesToShow = 4; \/\/ S\u1ed1 l\u01b0\u1ee3ng trang hi\u1ec3n th\u1ecb t\u1ed1i \u0111a\n\n \/\/ X\u00e1c \u0111\u1ecbnh danh s\u00e1ch job trong trang hi\u1ec7n t\u1ea1i\n const startIndex = (currentPage - 1) * jobsPerPage;\n const endIndex = Math.min(startIndex + jobsPerPage, totalJobs);\n const jobsToShow = jobs.slice(startIndex, endIndex);\n\n \/\/ Hi\u1ec3n th\u1ecb danh s\u00e1ch c\u00f4ng vi\u1ec7c\n jobsToShow.forEach(job => {\n const jobElement = document.createElement('div');\n jobElement.classList.add('job-listing');\n jobElement.innerHTML = `\n <div class=\"job-detail\">\n <h3>${job.jobname}<\/h3>\n <\/div>\n <div class=\"job-info\">\n <div><strong>M\u00e3 job<\/strong><br> ${job.jobcode}<\/div>\n <div><strong>\u0110\u1ecba \u0111i\u1ec3m<\/strong><br> ${job.location}<\/div>\n <div><strong>M\u1ee9c l\u01b0\u01a1ng<\/strong><br> ${job.salary}<\/div>\n <div><strong>Ng\u00e0y c\u1eadp nh\u1eadt<\/strong><br> ${formatDate(job.creatdate)}<\/div>\n <div><button class=\"detail-button\" onclick=\"showJobDetails('${job.jobcode}')\">Xem chi ti\u1ebft<\/button><\/div>\n <\/div>\n `;\n container.appendChild(jobElement);\n });\n\n \/\/ Hi\u1ec3n th\u1ecb c\u00e1c n\u00fat ph\u00e2n trang\n const firstButton = createPageButton('\u00ab', () => {\n currentPage = 1;\n displayJobs(jobs);\n });\n pagination.appendChild(firstButton);\n\n const prevButton = createPageButton('\u2039', () => {\n if (currentPage > 1) currentPage--;\n displayJobs(jobs);\n });\n pagination.appendChild(prevButton);\n\n \/\/ T\u00ednh to\u00e1n trang b\u1eaft \u0111\u1ea7u v\u00e0 trang k\u1ebft th\u00fac hi\u1ec3n th\u1ecb\n let startPage = Math.max(1, currentPage - Math.floor(pagesToShow \/ 2));\n let endPage = Math.min(totalPages, startPage + pagesToShow - 1);\n\n \/\/ \u0110i\u1ec1u ch\u1ec9nh n\u1ebfu t\u1ed5ng s\u1ed1 trang nh\u1ecf h\u01a1n `pagesToShow`\n if (endPage - startPage + 1 < pagesToShow) {\n startPage = Math.max(1, endPage - pagesToShow + 1);\n }\n\n \/\/ Hi\u1ec3n th\u1ecb d\u1ea5u `...` n\u1ebfu c\u00f3 trang ph\u00eda tr\u01b0\u1edbc\n if (startPage > 1) {\n pagination.appendChild(createEllipsis());\n }\n\n for (let i = startPage; i <= endPage; i++) {\n const pageButton = createPageButton(i, () => {\n currentPage = i;\n displayJobs(jobs);\n }, i === currentPage);\n pagination.appendChild(pageButton);\n }\n\n \/\/ Hi\u1ec3n th\u1ecb d\u1ea5u `...` n\u1ebfu c\u00f3 trang ph\u00eda sau\n if (endPage < totalPages) {\n pagination.appendChild(createEllipsis());\n }\n\n const nextButton = createPageButton('\u203a', () => {\n if (currentPage < totalPages) currentPage++;\n displayJobs(jobs);\n });\n pagination.appendChild(nextButton);\n\n const lastButton = createPageButton('\u00bb', () => {\n currentPage = totalPages;\n displayJobs(jobs);\n });\n pagination.appendChild(lastButton);\n}\n\nfunction createPageButton(text, onClick, isActive = false) {\n const button = document.createElement('button');\n button.textContent = text;\n button.className = isActive ? 'active' : '';\n button.onclick = onClick;\n return button;\n}\n\nfunction createEllipsis() {\n const ellipsis = document.createElement('span');\n ellipsis.textContent = '...';\n ellipsis.style.margin = '1 1px';\n return ellipsis;\n}\n\n function searchJobs() {\n const keyword = document.getElementById('keyword').value.toLowerCase();\n const industry = document.getElementById('industry').value;\n const location = document.getElementById('location').value.toLowerCase();\n\n const filteredJobs = allJobs.filter(job => {\n const matchesKeyword = job.jobname.toLowerCase().includes(keyword);\n const matchesIndustry = !industry || job.industry.includes(industry);\n const matchesLocation = !location || job.location.split(',').map(loc => loc.trim().toLowerCase()).includes(location);\n return matchesKeyword && matchesIndustry && matchesLocation;\n });\n\n currentPage = 1; \/\/ Reset v\u1ec1 trang 1\n displayJobs(filteredJobs);\n}\n\n\n function showJobDetails(jobcode) {\n const job = allJobs.find(job => job.jobcode === jobcode);\n if (job) {\n document.getElementById('popup-jobname').textContent = job.jobname;\n document.getElementById('popup-jobcode').textContent = job.jobcode;\n document.getElementById('popup-location').textContent = job.location;\n document.getElementById('popup-salary').textContent = job.salary;\n document.getElementById('popup-benefits').innerHTML = job.benefits;\n document.getElementById('popup-description').innerHTML = job.jobdescription;\n document.getElementById('popup-requirements').innerHTML = job.jobrequirements;\n document.getElementById('job-popup').style.display = 'flex';\n document.body.classList.add('popup-open');\n sessionStorage.setItem('jobcode', job.jobcode);\n }\n }\n\n function closePopup() {\n document.getElementById('job-popup').style.display = 'none';\n document.body.classList.remove('popup-open');\n }\n\n function applyNow() {\n const jobcode = sessionStorage.getItem('jobcode');\n const jobApplyLink = 'https:\/\/jobbank.com.vn\/dang-ky\/';\n window.open(jobApplyLink, '_blank');\n }\n\n function showAllJobs() {\n showingAllJobs = true;\n displayJobs(allJobs);\n }\n <\/script>\n<\/body>\n<\/html>","protected":false},"excerpt":{"rendered":"<p>Danh s\u00e1ch c\u00f4ng vi\u1ec7c C\u01a1 h\u1ed9i vi\u1ec7c l\u00e0m H\u00e0ng ng\u00e0n vi\u1ec7c l\u00e0m v\u1edbi m\u1ee9c l\u01b0\u01a1ng cao v\u00e0 ch\u1ebf \u0111\u1ed9 \u0111\u00e3i ng\u1ed9 c\u1ef1c t\u1ed1t \u0111ang ch\u1edd b\u1ea1n! Ng\u00e0nh ngh\u1ec1 N\u01a1i l\u00e0m vi\u1ec7c T\u00ccM KI\u1ebeM M\u00e3 job: \u0110\u1ecba \u0111i\u1ec3m: M\u1ee9c l\u01b0\u01a1ng: M\u00f4 t\u1ea3 c\u00f4ng vi\u1ec7c: Y\u00eau c\u1ea7u: Ph\u00fac l\u1ee3i: \u0110\u00f3ng \u1ee8ng tuy\u1ec3n ngay<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-32","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/pages\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/comments?post=32"}],"version-history":[{"count":89,"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/pages\/32\/revisions"}],"predecessor-version":[{"id":1059,"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/pages\/32\/revisions\/1059"}],"wp:attachment":[{"href":"https:\/\/jobbank.com.vn\/en\/wp-json\/wp\/v2\/media?parent=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}