{"id":19356,"date":"2024-10-27T18:47:25","date_gmt":"2024-10-27T11:47:25","guid":{"rendered":"https:\/\/i-clc.edu.vn\/?page_id=19356"},"modified":"2024-10-27T18:48:48","modified_gmt":"2024-10-27T11:48:48","slug":"dang-ky-khoa-hoc","status":"publish","type":"page","link":"https:\/\/i-clc.edu.vn\/en\/dang-ky-khoa-hoc\/","title":{"rendered":"\u0110\u0103ng k\u00fd kho\u00e1 h\u1ecdc"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"19356\" class=\"elementor elementor-19356\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-1166b0c elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1166b0c\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-20e9301\" data-id=\"20e9301\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8fd68c8 elementor-widget elementor-widget-shortcode\" data-id=\"8fd68c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><style>\r\n.checkbox-wrapper-47 input[type=\"checkbox\"] {\r\n    display: none;\r\n    visibility: hidden;\r\n}\r\n\r\n.checkbox-wrapper-47 label {\r\n    position: relative;\r\n    padding-left: 2em;\r\n    padding-right: 1em;\r\n    line-height: 2;\r\n    cursor: pointer;\r\n    display: inline-flex;\r\n}\r\n\r\n.checkbox-wrapper-47 label:before {\r\n    box-sizing: border-box;\r\n    content: \" \";\r\n    position: absolute;\r\n    top: 0.3em;\r\n    left: 0;\r\n    display: block;\r\n    width: 1.4em;\r\n    height: 1.4em;\r\n    border: 2px solid #9098A9;\r\n    border-radius: 6px;\r\n    z-index: -1;\r\n}\r\n\r\n.checkbox-wrapper-47 input[type=checkbox]:checked+label {\r\n    padding-left: 1em;\r\n    color: #0f5229;\r\n}\r\n\r\n.checkbox-wrapper-47 input[type=checkbox]:checked+label:before {\r\n    top: 0;\r\n    width: 100%;\r\n    height: 2em;\r\n    background: #b7e6c9;\r\n    border-color: #2cbc63;\r\n}\r\n\r\n.checkbox-wrapper-47 label,\r\n.checkbox-wrapper-47 label::before {\r\n    transition: 0.25s all ease;\r\n}\r\n\r\n.float-right {\r\n    float: right;\r\n}\r\n\r\nol {\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n\r\n.accordion-button {\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    width: 100%;\r\n    padding: 1rem 1.25rem;\r\n    font-size: 1rem;\r\n    color: #212529;\r\n    text-align: left;\r\n    background-color: #fff;\r\n    border: 0;\r\n    border-radius: 0;\r\n    overflow-anchor: none;\r\n    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;\r\n\r\n}\r\n\r\n.accordion {\r\n    margin-bottom: 30px;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n    .accordion-button {\r\n        transition: none;\r\n    }\r\n}\r\n\r\n.accordion-button:not(.collapsed) {\r\n    color: #0c63e4;\r\n    background-color: #e7f1ff;\r\n    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125);\r\n}\r\n\r\n.accordion-button:not(.collapsed)::after {\r\n    background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n    transform: rotate(-180deg);\r\n}\r\n\r\n.accordion-button::after {\r\n    flex-shrink: 0;\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n    margin-left: auto;\r\n    content: \"\";\r\n    background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'\/%3e%3c\/svg%3e\");\r\n    background-repeat: no-repeat;\r\n    background-size: 1.25rem;\r\n    transition: transform 0.2s ease-in-out;\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n    .accordion-button::after {\r\n        transition: none;\r\n    }\r\n}\r\n\r\n.accordion-button:hover {\r\n    z-index: 2;\r\n}\r\n\r\n.accordion-button:focus {\r\n    z-index: 3;\r\n    border-color: #86b7fe;\r\n    outline: 0;\r\n    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);\r\n}\r\n\r\n.accordion-header {\r\n    margin-bottom: 0;\r\n}\r\n\r\n.accordion-item {\r\n    background-color: #fff;\r\n    border: 1px solid rgba(0, 0, 0, 0.125);\r\n}\r\n\r\n.accordion-item:first-of-type {\r\n    border-top-left-radius: 0.25rem;\r\n    border-top-right-radius: 0.25rem;\r\n}\r\n\r\n.accordion-item:first-of-type .accordion-button {\r\n    border-top-left-radius: calc(0.25rem - 1px);\r\n    border-top-right-radius: calc(0.25rem - 1px);\r\n}\r\n\r\n.accordion-item:not(:first-of-type) {\r\n    border-top: 0;\r\n}\r\n\r\n.accordion-item:last-of-type {\r\n    border-bottom-right-radius: 0.25rem;\r\n    border-bottom-left-radius: 0.25rem;\r\n}\r\n\r\n.accordion-item:last-of-type .accordion-button.collapsed {\r\n    border-bottom-right-radius: calc(0.25rem - 1px);\r\n    border-bottom-left-radius: calc(0.25rem - 1px);\r\n}\r\n\r\n.accordion-item:last-of-type .accordion-collapse {\r\n    border-bottom-right-radius: 0.25rem;\r\n    border-bottom-left-radius: 0.25rem;\r\n}\r\n\r\n.accordion-body {\r\n    padding: 1rem 1.25rem;\r\n}\r\n\r\n.accordion-flush .accordion-collapse {\r\n    border-width: 0;\r\n}\r\n\r\n.accordion-flush .accordion-item {\r\n    border-right: 0;\r\n    border-left: 0;\r\n    border-radius: 0;\r\n}\r\n\r\n.accordion-flush .accordion-item:first-child {\r\n    border-top: 0;\r\n}\r\n\r\n.accordion-flush .accordion-item:last-child {\r\n    border-bottom: 0;\r\n}\r\n\r\n.accordion-flush .accordion-item .accordion-button {\r\n    border-radius: 0;\r\n}\r\n\r\n.accordion-collapse:not(.show) {\r\n    display: none;\r\n}\r\n\r\n.collapsing {\r\n    height: 0;\r\n    overflow: hidden;\r\n    transition: height 0.35s ease;\r\n}\r\n\r\n.collapse {\r\n    visibility: unset;\r\n}\r\n\r\n.row {\r\n    display: flex;\r\n}\r\n\r\n.col {\r\n    flex: 1;\r\n    padding: 5px;\r\n}\r\n\r\n.text-danger {\r\n    color: red;\r\n}\r\n\r\n.text-success {\r\n    color: blue;\r\n}\r\n\r\n.form-row {\r\n    margin-bottom: 15px;\r\n}\r\n\r\n.form-row label {\r\n    display: block;\r\n    margin-bottom: 5px;\r\n}\r\n\r\n.form-row input {\r\n    width: 100%;\r\n    padding: 8px;\r\n}\r\n\r\n.order-summary {\r\n    margin: 20px 0;\r\n    padding: 15px;\r\n    background: #f5f5f5;\r\n}\r\n\r\n.submit-button {\r\n    background: #0073aa;\r\n    color: white;\r\n    padding: 10px 20px;\r\n    border: none;\r\n    cursor: pointer;\r\n}\r\n\r\n#apply-voucher {\r\n    width: 20%;\r\n}\r\n\r\n.flex {\r\n    display: flex;\r\n    \/* Enable flexbox layout *\/\r\n}\r\n\r\n.flex-col {\r\n    flex-direction: column;\r\n}\r\n\r\n.justify-center {\r\n    justify-content: center;\r\n    \/* Center items horizontally *\/\r\n}\r\n\r\n.justify-space-between {\r\n    justify-content: space-between;\r\n    \/* Distribute items evenly with space between *\/\r\n}\r\n\r\n.items-center {\r\n    align-items: center;\r\n    \/* Center items vertically *\/\r\n}\r\n\r\n.flex-center {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n}\r\n\r\n.form-contact {\r\n    min-width: 520px;\r\n}\r\n\r\n\/* Container Styles *\/\r\n.p-2 {\r\n    padding: 0.5rem;\r\n}\r\n\r\n.p-4 {\r\n    padding: 1rem;\r\n}\r\n\r\n.mr-2 {\r\n    margin-right: 0.5rem\r\n}\r\n\r\n.bg-white {\r\n    background-color: #ffffff;\r\n}\r\n\r\n.border {\r\n    border-width: 1px;\r\n}\r\n\r\n.border-2 {\r\n    border-width: 2px;\r\n    border-style: solid;\r\n}\r\n\r\n.border-gray-200 {\r\n    border-color: #e5e7eb;\r\n}\r\n\r\n.rounded-lg {\r\n    border-radius: 0.5rem;\r\n}\r\n\r\n.shadow {\r\n    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;\r\n}\r\n\r\n.mb-4 {\r\n    margin-bottom: 1rem;\r\n}\r\n\r\n.mt-4 {\r\n    margin-top: 1rem;\r\n}\r\n\r\n\/* Navigation & Progress Bar *\/\r\n.divide-y> :not([hidden])~ :not([hidden]) {\r\n    border-top-width: 1px;\r\n}\r\n\r\n.divide-gray-300> :not([hidden])~ :not([hidden]) {\r\n    border-color: #d1d5db;\r\n}\r\n\r\n.border-gray-300 {\r\n    border-color: #d1d5db;\r\n}\r\n\r\n.md\\\\:flex {\r\n    display: flex;\r\n}\r\n\r\n.md\\\\:divide-y-0> :not([hidden])~ :not([hidden]) {\r\n    border-top-width: 0;\r\n}\r\n\r\n\/* List Item Styling *\/\r\n.relative {\r\n    position: relative;\r\n}\r\n\r\n.flex-1 {\r\n    flex: 1 1 0%;\r\n}\r\n\r\n.flex {\r\n    display: flex;\r\n}\r\n\r\n.items-center {\r\n    align-items: center;\r\n}\r\n\r\n.px-6 {\r\n    padding-left: 1.5rem;\r\n    padding-right: 1.5rem;\r\n}\r\n\r\n.py-4 {\r\n    padding-top: 1rem;\r\n    padding-bottom: 1rem;\r\n}\r\n\r\n.text-base {\r\n    font-size: 1rem;\r\n    line-height: 1.5rem;\r\n}\r\n\r\n.font-medium {\r\n    font-weight: 500;\r\n}\r\n\r\n\/* Step Number Circle *\/\r\n.h-10 {\r\n    height: 2.5rem;\r\n}\r\n\r\n.w-10 {\r\n    width: 2.5rem;\r\n}\r\n\r\n.flex-shrink-0 {\r\n    flex-shrink: 0;\r\n}\r\n\r\n.justify-center {\r\n    justify-content: center;\r\n}\r\n\r\n.rounded-full {\r\n    border-radius: 9999px;\r\n}\r\n\r\n\/* Step Colors *\/\r\n.border-red-500 {\r\n    border-color: #ef4444;\r\n}\r\n\r\n.text-red-700 {\r\n    color: #b91c1c;\r\n}\r\n\r\n\r\n.text-right {\r\n    text-align: right\r\n}\r\n\r\n.text-bold {\r\n    font-weight: bold;\r\n}\r\n\r\n.font-bold {\r\n    font-weight: 700;\r\n}\r\n\r\n.text-gray-500 {\r\n    color: #6b7280;\r\n}\r\n\r\n.text-center {\r\n    text-align: center;\r\n}\r\n\r\n.text-gray-600 {\r\n    color: #4b5563;\r\n}\r\n\r\n.group:hover .text-gray-900 {\r\n    color: #111827;\r\n}\r\n\r\n\/* Arrow Separator for Larger Screens *\/\r\n.md\\\\:block {\r\n    display: block;\r\n}\r\n\r\n.h-full {\r\n    height: 100%;\r\n}\r\n\r\n.w-full {\r\n    width: 100%;\r\n}\r\n\r\n.text-gray-300 {\r\n    color: #d1d5db;\r\n}\r\n\r\n\/* SVG Line for Arrow *\/\r\n.svg-line {\r\n    vector-effect: non-scaling-stroke;\r\n    stroke: currentColor;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n\/* Link Styling *\/\r\n.group {\r\n    display: flex;\r\n}\r\n\r\n.group:hover .border-gray-400 {\r\n    border-color: #9ca3af;\r\n}\r\n\r\n.button {\r\n    background-color: #4CAF50;\r\n    \/* M\u00e0u n\u1ec1n *\/\r\n    color: white;\r\n    \/* M\u00e0u ch\u1eef *\/\r\n    padding: 18px 38px;\r\n    \/* Kho\u1ea3ng c\u00e1ch b\u00ean trong *\/\r\n    font-size: 16px;\r\n    \/* C\u1ee1 ch\u1eef *\/\r\n    font-weight: bold;\r\n    \/* \u0110\u1eadm ch\u1eef *\/\r\n    border: none;\r\n    \/* B\u1ecf vi\u1ec1n *\/\r\n    border-radius: 8px;\r\n    \/* Bo tr\u00f2n g\u00f3c *\/\r\n    cursor: pointer;\r\n    \/* Con tr\u1ecf h\u00ecnh b\u00e0n tay khi hover *\/\r\n    transition: background-color 0.3s ease, transform 0.2s ease;\r\n    \/* Hi\u1ec7u \u1ee9ng chuy\u1ec3n \u0111\u1ed9ng *\/\r\n}\r\n\r\n.button:hover {\r\n    background-color: #45a049;\r\n    \/* M\u00e0u n\u1ec1n khi hover *\/\r\n    transform: scale(1.05);\r\n    \/* T\u0103ng nh\u1eb9 k\u00edch th\u01b0\u1edbc *\/\r\n}\r\n\r\n.button:active {\r\n    background-color: #3e8e41;\r\n    \/* M\u00e0u n\u1ec1n khi nh\u1ea5n gi\u1eef *\/\r\n    transform: scale(0.98);\r\n    \/* Gi\u1ea3m nh\u1eb9 k\u00edch th\u01b0\u1edbc *\/\r\n}\r\n\r\n.button:disabled {\r\n    background-color: #cccccc;\r\n    \/* M\u00e0u n\u1ec1n khi disabled *\/\r\n    color: #666666;\r\n    \/* M\u00e0u ch\u1eef khi disabled *\/\r\n    cursor: not-allowed;\r\n    \/* Con tr\u1ecf kh\u00f4ng cho ph\u00e9p *\/\r\n    opacity: 0.6;\r\n    \/* \u0110\u1ed9 m\u1edd *\/\r\n}\r\n\r\n.button:disabled:hover,\r\n.button:disabled:active {\r\n    background-color: #cccccc;\r\n    \/* Gi\u1eef m\u00e0u n\u1ec1n khi hover v\u00e0 active *\/\r\n    transform: none;\r\n    \/* Kh\u00f4ng c\u00f3 hi\u1ec7u \u1ee9ng khi hover v\u00e0 active *\/\r\n}\r\n<\/style>\r\n<div id=\"root\"><\/div>\r\n\r\n<script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.development.js\"><\/script>\r\n<script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.development.js\"><\/script>\r\n<script type=\"text\/javascript\" src=\"https:\/\/unpkg.com\/babel-standalone@6\/babel.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\"\r\n    integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\" crossorigin=\"anonymous\">\r\n<\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\r\n<script>\r\nfunction printDiv(id) {\r\n    var divContents = document.getElementById(id).innerHTML;\r\n    var a = window.open('', '');\r\n    a.document.write('<html>');\r\n    a.document.write('<body >');\r\n    a.document.write(divContents);\r\n    a.document.write('<\/body><\/html>');\r\n    a.document.close();\r\n    a.print();\r\n}\r\n<\/script>\r\n<script type=\"text\/babel\">\r\n\r\n    function formatVND(amount){\r\n        const number = Number(amount) || 0; \/\/ Chuy\u1ec3n \u0111\u1ed5i sang s\u1ed1 ho\u1eb7c 0 n\u1ebfu kh\u00f4ng h\u1ee3p l\u1ec7\r\n        return number.toLocaleString('vi-VN', { style: 'currency', currency: 'VND' });\r\n    }\r\n\r\nfunction convertNumberToWords(number) {\r\n    const units = [\"\", \"m\u1ed9t\", \"hai\", \"ba\", \"b\u1ed1n\", \"n\u0103m\", \"s\u00e1u\", \"b\u1ea3y\", \"t\u00e1m\", \"ch\u00edn\"];\r\n    const tens = [\"\", \"m\u01b0\u1eddi\", \"hai m\u01b0\u01a1i\", \"ba m\u01b0\u01a1i\", \"b\u1ed1n m\u01b0\u01a1i\", \"n\u0103m m\u01b0\u01a1i\", \"s\u00e1u m\u01b0\u01a1i\", \"b\u1ea3y m\u01b0\u01a1i\", \"t\u00e1m m\u01b0\u01a1i\", \"ch\u00edn m\u01b0\u01a1i\"];\r\n    const bigUnits = [\"\", \" ngh\u00ecn\", \" tri\u1ec7u\", \" t\u1ef7\", \" ngh\u00ecn t\u1ef7\", \" tri\u1ec7u t\u1ef7\", \" t\u1ef7 t\u1ef7\"];\r\n\r\n    function getHundreds(n) {\r\n        const hundred = Math.floor(n \/ 100);\r\n        const ten = Math.floor((n % 100) \/ 10);\r\n        const unit = n % 10;\r\n        let result = \"\";\r\n\r\n        if (hundred > 0) result += units[hundred] + \" tr\u0103m\";\r\n        if (ten > 1) result += (hundred > 0 ? \" \" : \"\") + tens[ten] + (unit > 0 ? \" \" + units[unit] : \"\");\r\n        else if (ten === 1) result += (hundred > 0 ? \" \" : \"\") + \"m\u01b0\u1eddi\" + (unit > 0 ? \" \" + units[unit] : \"\");\r\n        else if (unit > 0) result += (hundred > 0 ? \" l\u1ebb \" : \"\") + units[unit];\r\n\r\n        return result.trim();\r\n    }\r\n\r\n    function getThousands(n) {\r\n        if (n === 0) return \"\";\r\n        let result = \"\";\r\n        let i = 0;\r\n\r\n        while (n > 0) {\r\n            const chunk = n % 1000;\r\n            if (chunk > 0 || (i > 0 && result.trim().length > 0)) { \/\/ N\u1ebfu chunk == 0, v\u1eabn c\u1ea7n th\u00eam \u0111\u01a1n v\u1ecb l\u1edbn\r\n                result = getHundreds(chunk) + bigUnits[i] + (result ? \" \" + result : \"\");\r\n            }\r\n            n = Math.floor(n \/ 1000);\r\n            i++;\r\n        }\r\n\r\n        return result.trim();\r\n    }\r\n\r\n    return getThousands(number) + \" \u0111\u1ed3ng\";\r\n}\r\nfunction calculateVoucher(voucher, subtotal){\r\n    if(!voucher || !subtotal || subtotal == 0){\r\n        return 0;\r\n    }\r\n    if(voucher.type = 'VND'){\r\n        return Number(voucher.number) || 0;\r\n    }\r\n    if(voucher.type = 'PERCENT'){\r\n        return subtotal\/100*Number(voucher.number);\r\n    }\r\n    return 0;\r\n}\r\n\r\nfunction isPastEvent(startDate) {\r\n    return new Date(startDate) < new Date();\r\n}\r\n\r\nfunction scrollToHeaderPayment(id) {\r\n    const element = document.getElementById('nav-form-step');\r\n    element.scrollIntoView({ behavior: 'smooth' });\r\n}\r\n    <\/script>\r\n\r\n<script type=\"text\/babel\">\r\n    function TextDanger() {\r\n        return <span className=\"text-danger\"> *<\/span>;\r\n    }\r\n\r\n    function IconNextProcess() {\r\n        return (\r\n            <div\r\n                className=\"absolute right-0 top-0 hidden h-full w-5 md:block\"\r\n                aria-hidden=\"true\"\r\n            >\r\n                <svg\r\n                    className=\"h-full w-full text-gray-300\"\r\n                    viewBox=\"0 0 22 80\"\r\n                    fill=\"none\"\r\n                    preserveAspectRatio=\"none\"\r\n                >\r\n                    <path\r\n                        d=\"M0 -2L20 40L0 82\"\r\n                        vectorEffect=\"non-scaling-stroke\"\r\n                        stroke=\"currentColor\"\r\n                        strokeLinejoin=\"round\"\r\n                    \/>\r\n                <\/svg>\r\n            <\/div>\r\n        );\r\n    }\r\n\r\n    function NavFormStep({ step }) {\r\n        return (\r\n            <div className=\"p-2 bg-white border border-gray-200 rounded-lg shadow mb-4 mt-4 flex-center\" id=\"nav-form-step\">\r\n                <nav aria-label=\"Progress\">\r\n                    <ol\r\n                        role=\"list\"\r\n                        style={{ maxHeight: \"50px\" }}\r\n                        className=\"divide-y divide-gray-300 rounded-md border border-gray-300 flex md:divide-y-0\"\r\n                    >\r\n                        {[\r\n                            { id: 1, label: \"Th\u00f4ng tin kho\u00e1 h\u1ecdc\" },\r\n                            { id: 2, label: \"Th\u00f4ng tin h\u1ecdc vi\u00ean\" },\r\n                            { id: 3, label: \"Bi\u00ean nh\u1eadn h\u1ecdc ph\u00ed\" },\r\n                            { id: 4, label: \"Thanh to\u00e1n\" },\r\n                        ].map(({ id, label }) => (\r\n                            <li key={id} className=\"relative flex-1 flex flex-1\">\r\n                                <a\r\n                                    href=\"#\"\r\n                                    className={`group flex items-center px-6 py-4 text-base font-medium ${step === id ? \"text-red-700\" : \"text-gray-600\"\r\n                                        }`}\r\n                                    aria-current={step === id ? \"step\" : undefined}\r\n                                >\r\n                                    <span\r\n                                        className={`flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full border-2 ${step === id\r\n                                                ? \"border-red-500 text-red-700\"\r\n                                                : \"border-gray-300 text-gray-500 group-hover:border-gray-400 group-hover:text-gray-900\"\r\n                                            } mr-2 font-bold`}\r\n                                    >\r\n                                        {id}\r\n                                    <\/span>\r\n                                    <div className=\"flex flex-col\">\r\n                                        <span className=\"ml-4 text-base font-medium\">{label}<\/span>\r\n                                    <\/div>\r\n                                <\/a>\r\n                                {id !== 4 && <IconNextProcess \/>}\r\n                            <\/li>\r\n                        ))}\r\n                    <\/ol>\r\n                <\/nav>\r\n            <\/div>\r\n        );\r\n    }\r\n    function redirectToCompletedPayment(order){\r\n        window.location.href = `https:\/\/i-clc.edu.vn\/dang-ky-khoa-hoc?reference_number=${order.order_code}&status=1`\r\n    }\r\n\r\n    function showLoading() {\r\n        Swal.fire({\r\n            title: '\u0110ang th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u \u0111\u0103ng k\u00fd',\r\n            html: 'Vui l\u00f2ng \u0111\u1ee3i trong gi\u00e2y l\u00e1t, \u0111ang th\u1ef1c hi\u1ec7n y\u00eau c\u1ea7u \u0111\u0103ng k\u00fd',\r\n            didOpen: () => {\r\n                Swal.showLoading();\r\n            },\r\n            allowOutsideClick: false, \/\/ Ng\u0103n kh\u00f4ng cho ng\u01b0\u1eddi d\u00f9ng b\u1ea5m ra ngo\u00e0i \u0111\u1ec3 \u0111\u00f3ng h\u1ed9p tho\u1ea1i\r\n        });\r\n    }\r\n\r\n    function hideLoading(){\r\n        Swal.close(); \/\/ \u0110\u00f3ng ho\u00e0n to\u00e0n h\u1ed9p tho\u1ea1i khi ho\u00e0n t\u1ea5t\r\n    }\r\n\r\n    function isValidEmail(email) {\r\n        const emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/; \/\/ Bi\u1ec3u th\u1ee9c ch\u00ednh quy cho email\r\n        return emailPattern.test(email); \/\/ Ki\u1ec3m tra email\r\n    }\r\n\r\n    function isValidPhoneNumber(phone) {\r\n        const phonePattern = \/^[0-9\\s\\-()+]*$\/; \/\/ Kh\u1edbp v\u1edbi c\u00e1c k\u00fd t\u1ef1 s\u1ed1, kho\u1ea3ng tr\u1eafng, g\u1ea1ch n\u1ed1i, ngo\u1eb7c\r\n        return phonePattern.test(phone); \/\/ Ki\u1ec3m tra s\u1ed1 \u0111i\u1ec7n tho\u1ea1i\r\n    }\r\n\r\n    function isValidOrder(userInfo) {\r\n        \/\/ Ki\u1ec3m tra t\u00ednh h\u1ee3p l\u1ec7 c\u1ee7a email v\u00e0 s\u1ed1 \u0111i\u1ec7n tho\u1ea1i\r\n        const isEmailValid = isValidEmail(userInfo.email);\r\n        const isPhoneValid = isValidPhoneNumber(userInfo.phone);\r\n\r\n        console.log(isEmailValid, isPhoneValid);\r\n\r\n        if (isEmailValid && isPhoneValid) {\r\n            return true; \/\/ N\u1ebfu c\u1ea3 email v\u00e0 s\u1ed1 \u0111i\u1ec7n tho\u1ea1i \u0111\u1ec1u h\u1ee3p l\u1ec7\r\n        } else {\r\n            alert(\"Th\u00f4ng tin kh\u00f4ng h\u1ee3p l\u1ec7. Vui l\u00f2ng ki\u1ec3m tra l\u1ea1i email v\u00e0 s\u1ed1 \u0111i\u1ec7n tho\u1ea1i.\"); \/\/ Th\u00f4ng b\u00e1o khi kh\u00f4ng h\u1ee3p l\u1ec7\r\n            return false; \/\/ N\u1ebfu kh\u00f4ng\r\n        }\r\n    }\r\n\r\n    \r\n\r\n<\/script>\r\n<script type=\"text\/babel\">\r\n    const contactApiUrl = 'https:\/\/anhnguiclc.com\/rest\/1\/z6j1e8kdzjcjegok\/crm.contact.add.json';\r\n    const dealApiUrl = 'https:\/\/anhnguiclc.com\/rest\/1\/dcqn591zbut35f5u\/crm.deal.add.json';\r\n    const dealApiUpdateUrl = 'https:\/\/anhnguiclc.com\/rest\/1\/dcqn591zbut35f5u\/crm.deal.update.json';\r\n    const PAYMENT_METHOD = {\r\n        BANK_TRANFER: 208,\r\n        CASH: 209,\r\n        PAYMENT_ONLINE: 1039\r\n    }\r\n    const PAYMENT_STATUS = {\r\n        SUCCESS: 147,\r\n        PENDING: 146\r\n    }\r\n    \r\n    var dealId = null;\r\n    async function addContact(order){\r\n        const contactData = {\r\n            FIELDS: {\r\n                TITLE: \"Contact create a new contact by API from \"+ window.location.hostname ,\r\n                NAME: order.parent_name,\r\n                LAST_NAME: '',\r\n                EMAIL: [{ VALUE: order.email, VALUE_TYPE: 'WORK' }],\r\n                PHONE: [{ VALUE: order.phone, VALUE_TYPE: 'WORK' }],\r\n                UF_CRM_6178C6D20C089: order.school,\r\n                UF_CRM_6178C6D22B7E4: order.class,\r\n                UF_CRM_6178C6D238A3A: order.parent_name,\r\n                UF_CRM_6178C6D246758: order.address,\r\n                UF_CRM_1718419837: order.parent_name,\r\n                UF_CRM_1715670465: order.phone\r\n            },\r\n        };\r\n        return await fetch(contactApiUrl, {\r\n                method: 'POST',\r\n                headers: { 'Content-Type': 'application\/json' },\r\n                body: JSON.stringify(contactData),\r\n        });\r\n    }\r\n    async function createDealICLC(order) {\r\n        try {\r\n            const contactResponse = await addContact(order);\r\n            const contactResult = await contactResponse.json();\r\n\r\n            if (contactResult.result) {\r\n                const mapGrade = {\r\n                    1: 488,\r\n                    2: 489,\r\n                    3: 490,\r\n                    4: 491,\r\n                    5: 492,\r\n                };\r\n\r\n                const dealData = {\r\n                    FIELDS: {\r\n                        TITLE: `${order.parentName} \u0111\u0103ng k\u00fd kho\u00e1 ${order.products[0].name}`,\r\n                        \/\/OPPORTUNITY: this.amount,\r\n                        CATEGORY_ID: 22,\r\n                        CONTACT_ID: contactResult.result,\r\n                        UF_CRM_6178C6D2EDA26: order.school,\r\n                        UF_CRM_6178C6D3035AF: order.class,\r\n                        UF_CRM_6178C6D30C6A9: order.parentName,\r\n                        UF_CRM_6178C6D31587F: order.address,\r\n                        UF_CRM_6199CA3593568: order.grade && mapGrade[order.grade] ? mapGrade[order.grade] : order.grade,\r\n                        UF_CRM_61653C5983EAA: 146,\r\n                        UF_CRM_6178C6D32EE13: 209,\r\n                        UF_CRM_61868E169A47F: order.address,\r\n                        UF_CRM_61868E16A2A99: order.parentName,\r\n                        UF_CRM_61868E16A74FF: order.phone,\r\n                        UF_CRM_DEAL_1717076519247: order.phone,\r\n                        UF_CRM_1717051189: order.parentName,\r\n                        UF_CRM_1637679301: 'iclc',\r\n                        UF_CRM_1637677099: '\u0111\u0103ng k\u00fd',\r\n                        UF_CRM_1718936236: order.products[0].name,\r\n                        UF_CRM_1718938262: order.childName,\r\n                    },\r\n                };\r\n\r\n                const dealResponse = await fetch(dealApiUrl, {\r\n                    method: 'POST',\r\n                    headers: { 'Content-Type': 'application\/json' },\r\n                    body: JSON.stringify(dealData),\r\n                });\r\n\r\n                const dealResult = await dealResponse.json();\r\n                dealId = dealResult.result;\r\n                return dealResult;\r\n                \/\/ Handle the deal response if necessary\r\n            }\r\n        } catch (error) {\r\n            console.error('Error:', error);\r\n        }\r\n    }\r\n    async function addDealSNS(order) {\r\n        try {\r\n            const contactResponse = await addContact(order);\r\n            const contactResult = await contactResponse.json();\r\n\r\n            if (contactResult.result) {\r\n                const dealData = {\r\n                    FIELDS: {\r\n                        TITLE: `${order.parentName} \u0111\u0103ng k\u00fd kho\u00e1 h\u1ecdc \"K\u1ef9 n\u0103ng cho th\u1ebf h\u1ec7 t\u01b0\u01a1ng lai\" t\u1ea1i Soul and Skills v\u1edbi c\u00e1c ch\u1ee7 \u0111\u1ec1`,\r\n                        CATEGORY_ID: 19,\r\n                        CONTACT_ID: contactResult.result,\r\n                        UF_CRM_6178C6D30C6A9: order.parentName,\r\n                        UF_CRM_DEAL_1717076519247: order.phone,\r\n                        UF_CRM_DEAL_1717076457153: order.email,\r\n                        UF_CRM_1718695910: order.products.map(p => `${p.name}-${p.price}`).join(\", \\n\"),\r\n                        UF_CRM_1637679301: \"Soul and Skills\",\r\n                        UF_CRM_1637677099: \"\u0110\u0103ng k\u00fd nh\u1eadn t\u01b0 v\u1ea5n \",\r\n                    },\r\n                };\r\n\r\n                const dealResponse = await fetch(dealApiUrl, {\r\n                    method: \"POST\",\r\n                    headers: { \"Content-Type\": \"application\/json\" },\r\n                    body: JSON.stringify(dealData),\r\n                });\r\n\r\n                const dealResult = await dealResponse.json();\r\n                dealId = dealResult.result;\r\n                return dealResult;\r\n            }\r\n        } catch (error) {\r\n            console.error(\"Error:\", error);\r\n        }\r\n    }\r\n    async function updateDealPaymentMethod(id, method)\r\n    {\r\n        const dealData = {\r\n                id,\r\n                    FIELDS: {\r\n                        UF_CRM_6178C6D32EE13: method,\r\n                        UF_CRM_61653C5983EAA: PAYMENT_STATUS.PENDING\r\n                    },\r\n                };\r\n\r\n                const dealResponse = await fetch(dealApiUpdateUrl, {\r\n                    method: \"POST\",\r\n                    headers: { \"Content-Type\": \"application\/json\" },\r\n                    body: JSON.stringify(dealData),\r\n                });\r\n\r\n                const dealResult = await dealResponse.json();\r\n                dealId = dealResult.result;\r\n                return dealResult;\r\n    }\r\n    async function updateDealPaymentStatus(id, status)\r\n    {\r\n        const dealData = {\r\n                id,\r\n                    FIELDS: {\r\n                        UF_CRM_61653C5983EAA: status,\r\n                    },\r\n                };\r\n\r\n                const dealResponse = await fetch(dealApiUpdateUrl, {\r\n                    method: \"POST\",\r\n                    headers: { \"Content-Type\": \"application\/json\" },\r\n                    body: JSON.stringify(dealData),\r\n                });\r\n\r\n                const dealResult = await dealResponse.json();\r\n                dealId = dealResult.result;\r\n                return dealResult;\r\n    }\r\n<\/script><script type=\"text\/babel\">\r\n  function OrderForm() {\r\n    const params = new URLSearchParams(window.location.search);\r\n    const [step, setStep] = React.useState(1);\r\n    const [course, setCourse] = React.useState(null);\r\n    const [productsSelected, setProductsSelected] = React.useState([]);\r\n    const [userInfo, setUserInfo] = React.useState({\r\n        email: params.get(\"email\") || \"\",\r\n        childName: \"\",\r\n        school: \"\",\r\n        grade: \"1\",\r\n        class: \"\",\r\n        parentName: params.get(\"fullname\") || \"\",\r\n        phone: params.get(\"phone\") || \"\",\r\n        address: \"\",\r\n        note: \"\",\r\n    });\r\n    const [products, setProducts] = React.useState([]);\r\n    const [voucher, setVoucher] = React.useState(null);\r\n    const [isCheckedAccept, setIsCheckedAccept] = React.useState(false);\r\n    const [selectedOption, setSelectedOption] = React.useState(\"bank_tranfer\");\r\n    React.useEffect(() => {\r\n      fetchProducts();\r\n    }, []);\r\n\r\n    const fetchProducts = async () => {\r\n      try {\r\n        const response = await fetch(\"\/wp-json\/oms\/v1\/products?per_page=100\");\r\n        if (!response.ok) {\r\n          throw new Error(`HTTP error! status: ${response.status}`);\r\n        }\r\n        const dataRes = await response.json(); \/\/ Parse the JSON data\r\n        const data = dataRes.filter(t => t.start_date != \"0000-00-00 00:00:00\");\r\n        setProducts(data); \/\/ Set the products state with the fetched data\r\n        setCourse(data[0]);\r\n        setProductsSelected([data[0]]);\r\n      } catch (error) {\r\n        console.error(\"Error fetching products:\", error);\r\n      }\r\n    };\r\n\r\n    const fetchVoucherByCode = async (code) => {\r\n      try {\r\n        const response = await fetch(\"\/wp-json\/oms\/v1\/vouchers\/validate\", {\r\n          method: \"POST\",\r\n          headers: {\r\n            \"Content-Type\": \"application\/json\", \/\/ Ensure the server expects JSON\r\n          },\r\n          body: JSON.stringify({ code }), \/\/ Send code in JSON format\r\n        });\r\n\r\n        if (!response.ok) {\r\n          throw new Error(\"M\u00e3 gi\u1ea3m gi\u00e1 kh\u00f4ng h\u1ee3p l\u1ec7!\"); \/\/ Throw an error if the response is not OK\r\n        }\r\n\r\n        const voucher = await response.json(); \/\/ Parse the JSON response\r\n        setVoucher(voucher); \/\/ Update the voucher in state\r\n      } catch (error) {\r\n        alert(error.message); \/\/ Show the error message in an alert\r\n      }\r\n    };\r\n\r\n    function createOrder() {\r\n      \r\n      const subtotal = productsSelected.reduce(\r\n        (sum, product) => sum + Number(product.price),\r\n        0\r\n      );\r\n      const discountTotal = calculateVoucher(voucher, subtotal);\r\n\r\n      fetch(\"\/wp-json\/oms\/v1\/orders\", {\r\n        method: \"POST\",\r\n        headers: {\r\n          \"Content-Type\": \"application\/json\",\r\n        },\r\n        body: JSON.stringify({\r\n          ...userInfo,\r\n          subtotal,\r\n          discount_total: discountTotal,\r\n          total: subtotal - discountTotal,\r\n          payment_method: selectedOption,\r\n          voucher_id: voucher ? voucher.id : \"\",\r\n          products: productsSelected,\r\n          dealId\r\n        }),\r\n      })\r\n        .then((response) => response.json())\r\n        .then((data) => {\r\n          console.log(\"Success:\", data);\r\n          \r\n          if (selectedOption != \"bank_tranfer\") {\r\n            handleCreateOrderCompleted(data);\r\n            updateDealPaymentMethod(dealId, PAYMENT_METHOD.PAYMENT_ONLINE)\r\n          }else{\r\n            hideLoading();\r\n            redirectToCompletedPayment(data);\r\n            updateDealPaymentMethod(dealId, PAYMENT_METHOD.BANK_TRANFER)\r\n          }\r\n        })\r\n        .catch((error) => {\r\n          console.error(\"Error:\", error);\r\n          alert(\"C\u00f3 l\u1ed7i x\u1ea3y ra khi t\u1ea1o thanh to\u00e1n!\");\r\n        });\r\n    }\r\n\r\n    const handleCreateOrderCompleted = (order) => {\r\n      const currentUrl = window.location.href;\r\n      const url = new URL(currentUrl);\r\n      const urlWithoutParams = url.origin + url.pathname;\r\n      fetch(\"\/wp-json\/oms\/v1\/vtc-pay\", {\r\n        method: \"POST\",\r\n        headers: {\r\n          \"Content-Type\": \"application\/json\",\r\n        },\r\n        body: JSON.stringify({\r\n          amount: order.total,\r\n          payment_method: selectedOption,\r\n          lang: \"vn\",\r\n          order_id: order.order_code,\r\n          url_return: urlWithoutParams,\r\n        }),\r\n      })\r\n        .then((response) => response.json())\r\n        .then((data) => {\r\n          console.log(\"Success:\", data);\r\n          hideLoading();\r\n          window.location.href = data.payment_url;\r\n        })\r\n        .catch((error) => {\r\n          hideLoading();\r\n          console.error(\"Error:\", error);\r\n        });\r\n    };\r\n\r\n    \/\/ Handle next step\r\n    const nextStep = async () => {\r\n      if (step < 4) {\r\n        if (validateStep(step + 1)) \r\n        {\r\n          if (step + 1 == 3) {\r\n            showLoading();\r\n            await createDealICLC({\r\n              ...userInfo,\r\n              products: productsSelected,\r\n            })\r\n            hideLoading();\r\n          }\r\n          scrollToHeaderPayment()\r\n          setStep(step + 1)\r\n        }\r\n      }\r\n    };\r\n\r\n    \/\/ Handle previous step\r\n    const prevStep = () => {\r\n      if (step > 1) {\r\n        setStep(step - 1);\r\n      }\r\n    };\r\n\r\n    const validateStep = (step) => {\r\n      switch (step) {\r\n        case 2:\r\n          if (!productsSelected || productsSelected.length == 0) {\r\n            alert(\"Vui L\u00f2ng ch\u1ecdn kho\u00e1 h\u1ecdc\");\r\n            return false;\r\n          }\r\n          return true;\r\n          break;\r\n        case 3:\r\n          if (\r\n            !userInfo.childName ||\r\n            userInfo.childName == \"\" ||\r\n            !userInfo.parentName ||\r\n            userInfo.parentName == \"\" ||\r\n            !userInfo.grade ||\r\n            userInfo.grade == \"\" ||\r\n            !userInfo.phone ||\r\n            userInfo.phone == \"\" ||\r\n            !userInfo.email ||\r\n            userInfo.email == \"\" ||\r\n            !userInfo.address ||\r\n            userInfo.address == \"\"\r\n          ) {\r\n            console.log(userInfo);\r\n            alert(\"Vui L\u00f2ng nh\u1eadp \u0111\u1ea7y \u0111\u1ee7 th\u00f4ng tin\");\r\n            return false;\r\n          }\r\n          return isValidOrder(userInfo);\r\n          break;\r\n      }\r\n      return true;\r\n    };\r\n\r\n    \/\/ Handle course selection\r\n    const handleCourseSelect = (event) => {\r\n      setProductsSelected([products.find((p) => p.id == event.target.value)]);\r\n    };\r\n\r\n    \/\/ Handle user info input\r\n    const handleInputChange = (event) => {\r\n      const { name, value } = event.target;\r\n      setUserInfo({ ...userInfo, [name]: value });\r\n    };\r\n\r\n    const handlePay = () => {\r\n      showLoading();\r\n      createOrder();\r\n    };\r\n\r\n    const subtotal = React.useMemo(() => {\r\n      return productsSelected.reduce((sum, product) => sum + product.price, 0);\r\n    }, [productsSelected]);\r\n\r\n\r\n    \/\/ Render the appropriate step\r\n    const renderStep = () => {\r\n      switch (step) {\r\n        case 1:\r\n          return (\r\n            <div className=\"flex flex-col justify-center items-center\">\r\n              <h2>CH\u1eccN KHO\u00c1 H\u1eccC<\/h2>\r\n              <div class=\"row\">\r\n                <div class=\"logo flex-col flex items-center justify-center mr-2\">\r\n                  <img decoding=\"async\"\r\n                    width=\"300\"\r\n                    src=\"https:\/\/i-clc.edu.vn\/wp-content\/uploads\/2024\/10\/LOGO-ICLC.png\"\r\n                    alt=\"\"\r\n                  \/>\r\n                <\/div>\r\n                <div className=\"flex flex-col \">\r\n                  <label htmlFor=\"select-course\"> Ch\u1ecdn kho\u00e1 h\u1ecdc<\/label>\r\n                  <select\r\n                    onChange={handleCourseSelect}\r\n                    value={productsSelected[0] && productsSelected[0].id}\r\n                    id=\"select-course\"\r\n                  >\r\n                    {products.map((product) => (\r\n                      <option key={product.id} value={product.id}>\r\n                        {product.name} (Khai gi\u1ea3ng: {new Date(product.start_date.replace(\" \", \"T\")).toLocaleDateString('vi-VN')})\r\n                      <\/option> \/\/ Ensure unique key\r\n                    ))}\r\n                  <\/select>\r\n                  <p>\r\n                    Ng\u00e0y D\u1ef1 ki\u1ebfn khai gi\u1ea3ng:{\" \"}\r\n                    <strong>\r\n                      {productsSelected[0] && productsSelected[0].start_date && new Date(productsSelected[0].start_date.replace(\" \", \"T\")).toLocaleDateString('vi-VN')}\r\n                    <\/strong>{\" \"}\r\n                  <\/p>\r\n                  <p>\r\n                    Th\u1eddi gian h\u1ecdc:{\" \"}\r\n                    <strong>\r\n                      {productsSelected[0] && productsSelected[0].description}\r\n                    <\/strong>{\" \"}\r\n                  <\/p>\r\n                  <p>\r\n                    T\u1ed5ng h\u1ecdc ph\u00ed (t\u1ea1m t\u00ednh):{\" \"}\r\n                    <strong>\r\n                      {productsSelected[0] &&\r\n                        formatVND(productsSelected[0].price)}\r\n                    <\/strong>{\" \"}\r\n                  <\/p>\r\n                <\/div>\r\n              <\/div>\r\n\r\n              <button className=\"button\" onClick={nextStep}>\r\n                Ti\u1ebfp t\u1ee5c\r\n              <\/button>\r\n            <\/div>\r\n          );\r\n\r\n        case 2:\r\n          return (\r\n            <div className=\"flex flex-col justify-center items-center\">\r\n              <h2>TH\u00d4NG TIN H\u1eccC VI\u00caN<\/h2>\r\n              <div className=\"form-contact\">\r\n                <div className=\"row\">\r\n                  <div className=\"form-row col\">\r\n                    <label htmlFor=\"childName\">\r\n                      H\u1ecd t\u00ean B\u00e9 <TextDanger \/>\r\n                    <\/label>\r\n                    <input\r\n                      type=\"text\"\r\n                      id=\"childName\"\r\n                      name=\"childName\"\r\n                      value={userInfo.childName}\r\n                      onChange={handleInputChange}\r\n                      required\r\n                    \/>\r\n                  <\/div>\r\n                <\/div>\r\n                <div className=\"row\">\r\n                  <div className=\"form-row col\">\r\n                    <label htmlFor=\"school\">Tr\u01b0\u1eddng<\/label>\r\n                    <input\r\n                      type=\"text\"\r\n                      id=\"school\"\r\n                      name=\"school\"\r\n                      value={userInfo.school}\r\n                      onChange={handleInputChange}\r\n                    \/>\r\n                  <\/div>\r\n                <\/div>\r\n                <div className=\"row\">\r\n                  <div className=\"form-row col\">\r\n                    <label htmlFor=\"grade\">Kh\u1ed1i<\/label>\r\n                    <select\r\n                      name=\"grade\"\r\n                      id=\"grade\"\r\n                      value={userInfo.grade}\r\n                      onChange={handleInputChange}\r\n                      style={{ width: \"100%\", borderRadius:'24px', padding: '14px 24px'}}\r\n                    >\r\n                      <option value=\"1\">1<\/option>\r\n                      <option value=\"2\">2<\/option>\r\n                      <option value=\"3\">3<\/option>\r\n                      <option value=\"4\">4<\/option>\r\n                      <option value=\"5\">5<\/option>\r\n                    <\/select>\r\n                  <\/div>\r\n\r\n                  <div className=\"form-row col\">\r\n                    <label htmlFor=\"class\">L\u1edbp<\/label>\r\n                    <input\r\n                      type=\"text\"\r\n                      id=\"class\"\r\n                      name=\"class\"\r\n                      value={userInfo.class}\r\n                      onChange={handleInputChange}\r\n                    \/>\r\n                  <\/div>\r\n                <\/div>\r\n                <div className=\"row\">\r\n                  <div className=\"form-row col\">\r\n                    <label htmlFor=\"parentName\">\r\n                      H\u1ecd t\u00ean ph\u1ee5 huynh <TextDanger \/>\r\n                    <\/label>\r\n                    <input\r\n                      type=\"text\"\r\n                      id=\"parentName\"\r\n                      name=\"parentName\"\r\n                      value={userInfo.parentName}\r\n                      onChange={handleInputChange}\r\n                      required\r\n                    \/>\r\n                  <\/div>\r\n                <\/div>\r\n                <div className=\"row\">\r\n                  <div className=\"form-row col\">\r\n                    <label htmlFor=\"phone\">\r\n                      S\u1ed1 \u0111i\u1ec7n tho\u1ea1i <TextDanger \/>\r\n                    <\/label>\r\n                    <input\r\n                      type=\"tel\"\r\n                      id=\"phone\"\r\n                      name=\"phone\"\r\n                      value={userInfo.phone}\r\n                      onChange={handleInputChange}\r\n                      required\r\n                    \/>\r\n                  <\/div>\r\n                <\/div>\r\n                <div className=\"row\">\r\n                  <div className=\"form-row col\">\r\n                    <label htmlFor=\"email\">\r\n                      Email <TextDanger \/>\r\n                    <\/label>\r\n                    <input\r\n                      type=\"email\"\r\n                      id=\"email\"\r\n                      name=\"email\"\r\n                      value={userInfo.email}\r\n                      onChange={handleInputChange}\r\n                    \/>\r\n                  <\/div>\r\n                <\/div>\r\n                <div className=\"row\">\r\n                  <div className=\"form-row col\">\r\n                    <label htmlFor=\"address\">\r\n                      \u0110\u1ecba ch\u1ec9 <TextDanger \/>\r\n                    <\/label>\r\n                    <input\r\n                      type=\"text\"\r\n                      id=\"address\"\r\n                      name=\"address\"\r\n                      value={userInfo.address}\r\n                      onChange={handleInputChange}\r\n                    \/>\r\n                  <\/div>\r\n                <\/div>\r\n                <div className=\"row\">\r\n                  <div className=\"form-row col\">\r\n                    <label htmlFor=\"note\">Ghi ch\u00fa<\/label>\r\n                    <input\r\n                      type=\"text\"\r\n                      id=\"note\"\r\n                      name=\"note\"\r\n                      value={userInfo.note}\r\n                      onChange={handleInputChange}\r\n                    \/>\r\n                  <\/div>\r\n                <\/div>\r\n                <div className=\"row justify-space-between items-center\">\r\n                  <button className=\"button\" onClick={prevStep}>\r\n                  Tr\u1edf l\u1ea1i\r\n                  <\/button>\r\n                  <button className=\"button\" onClick={nextStep}>\r\n                  Ti\u1ebfp t\u1ee5c\r\n                  <\/button>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          );\r\n\r\n        case 3:\r\n          return (\r\n            <div className=\"flex flex-col justify-center items-center\">\r\n              <div>\r\n                <h2 className=\"text-center\">BI\u00caN NH\u1eacN H\u1eccC PH\u00cd<\/h2>\r\n                <div className=\"form-contact\">\r\n                  <table>\r\n                    <tbody>\r\n                      <tr>\r\n                        <td className=\"text-bold\">S\u1ed1 BL:<\/td>\r\n                        <td>\u0110\u01b0\u1ee3c c\u1eadp nh\u1eadt sau khi thanh to\u00e1n th\u00e0nh c\u00f4ng<\/td>\r\n                      <\/tr>\r\n                      <tr>\r\n                        <td className=\"text-bold\">H\u1ecd t\u00ean b\u00e9:<\/td>\r\n                        <td>{userInfo.childName}<\/td>\r\n                      <\/tr>\r\n                      <tr>\r\n                        <td className=\"text-bold\">H\u1ecd t\u00ean ph\u1ee5 huynh:<\/td>\r\n                        <td>{userInfo.parentName}<\/td>\r\n                      <\/tr>\r\n                      <tr>\r\n                        <td className=\"text-bold\">Email:<\/td>\r\n                        <td>{userInfo.email}<\/td>\r\n                      <\/tr>\r\n                      <tr>\r\n                        <td className=\"text-bold\">S\u1ed1 \u0111i\u1ec7n tho\u1ea1i:<\/td>\r\n                        <td>{userInfo.phone}<\/td>\r\n                      <\/tr>\r\n                      <tr>\r\n                        <td className=\"text-bold\">\u0110\u1ecba ch\u1ec9:<\/td>\r\n                        <td>{userInfo.address}<\/td>\r\n                      <\/tr>\r\n                      <tr>\r\n                        <td className=\"text-bold\">S\u1ed1 ti\u1ec1n:<\/td>\r\n                        <td>\r\n                          {formatVND(subtotal)} (\r\n                          {convertNumberToWords(subtotal)})\r\n                        <\/td>\r\n                      <\/tr>\r\n                      <tr>\r\n                        <td className=\"text-bold\">Kho\u00e1 h\u1ecdc:<\/td>\r\n                        <td>{productsSelected[0].name}<\/td>\r\n                      <\/tr>\r\n                    <\/tbody>\r\n                  <\/table>\r\n                  <div style={{ marginBottom: \"20px\" }}>\r\n                    <input\r\n                      type=\"checkbox\"\r\n                      id=\"check-accept\"\r\n                      style={{ marginRight: \"10px\" }}\r\n                      checked={isCheckedAccept}\r\n                      onChange={() => setIsCheckedAccept(!isCheckedAccept)}\r\n                    \/>\r\n                    <label htmlFor=\"check-accept\" className=\"text-bold\">\r\n                      T\u00f4i \u0111\u00e3 \u0111\u1ecdc k\u1ef9 n\u1ed9i dung \u0111\u0103ng k\u00fd.\r\n                    <\/label>\r\n                  <\/div>\r\n                  <div className=\"row justify-space-between items-center\">\r\n                    <button className=\"button\" onClick={prevStep}>\r\n                      Tr\u1edf l\u1ea1i\r\n                    <\/button>\r\n                    <button\r\n                      className=\"button\"\r\n                      onClick={nextStep}\r\n                      disabled={!isCheckedAccept}\r\n                    >\r\n                      Ti\u1ebfp t\u1ee5c\r\n                    <\/button>\r\n                  <\/div>\r\n                <\/div>\r\n              <\/div>\r\n            <\/div>\r\n          );\r\n\r\n        case 4:\r\n          return (\r\n            <div>\r\n              <h2 className=\"text-center\">PH\u01af\u01a0NG TH\u1ee8C THANH TO\u00c1N<\/h2>\r\n              <PaymentSate\r\n                selectedOption={selectedOption}\r\n                setSelectedOption={setSelectedOption}\r\n              \/>\r\n              <div className=\"row justify-space-between items-center\">\r\n                <button className=\"button\" onClick={prevStep}>\r\n                Tr\u1edf l\u1ea1i\r\n                <\/button>\r\n                <button\r\n                  className=\"button\"\r\n                  onClick={handlePay}\r\n                  disabled={!isCheckedAccept}\r\n                >\r\n                  Thanh to\u00e1n\r\n                <\/button>\r\n              <\/div>\r\n            <\/div>\r\n          );\r\n\r\n        default:\r\n          return null;\r\n      }\r\n    };\r\n\r\n    return (\r\n      <div>\r\n        <NavFormStep step={step} \/>\r\n        <div className=\"bg-white p-4 rounded-lg shadow\">\r\n            {renderStep()}\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  }\r\n  function PaymentSate({ selectedOption, setSelectedOption }) {\r\n    return (\r\n      <div className=\"accordion\" id=\"accordionExample\">\r\n        <div className=\"accordion-item\">\r\n          <h2 className=\"accordion-header\" id=\"headingTwo\">\r\n            <button\r\n              className=\"accordion-button collapsed\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"collapse\"\r\n              data-bs-target=\"#collapseTwo\"\r\n              aria-expanded=\"false\"\r\n              aria-controls=\"collapseTwo\"\r\n              onClick={() => {\r\n                setSelectedOption(\"bank_tranfer\");\r\n              }}\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                className=\"mr-2\"\r\n                value={\"bank_tranfer\"}\r\n                checked={selectedOption === \"bank_tranfer\"}\r\n                onChange={(e) => setSelectedOption(\"bank_tranfer\")}\r\n              \/>\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/i-clc.edu.vn\/wp-content\/themes\/astra-child\/img\/chuyen-khoan.png\"\r\n                width={50}\r\n                height={100}\r\n                style={{ marginRight: \"1rem\" }}\r\n              \/>\r\n              Chuy\u1ec3n kho\u1ea3n ng\u00e2n h\u00e0ng\r\n            <\/button>\r\n          <\/h2>\r\n          <div\r\n            id=\"collapseTwo\"\r\n            className=\"accordion-collapse collapsed\"\r\n            aria-labelledby=\"headingTwo\"\r\n            data-bs-parent=\"#accordionExample\"\r\n          >\r\n            <div className=\"accordion-body\">\r\n              <div className=\"flex\">\r\n                <img decoding=\"async\"\r\n                  src=\"https:\/\/i-clc.edu.vn\/wp-content\/themes\/astra-child\/img\/acb.png\"\r\n                  width={200}\r\n                  style={{ marginRight: \"2rem\" }}\r\n                \/>\r\n                <div>\r\n                  <p>\r\n                    T\u00ean t\u00e0i kho\u1ea3n:{\" \"}\r\n                    <strong>C\u00f4ng ty TNHH th\u01b0\u01a1ng m\u1ea1i v\u00e0 d\u1ecbch v\u1ee5 Tri Linh<\/strong>\r\n                  <\/p>\r\n                  <p>\r\n                    S\u1ed1 t\u00e0i kho\u1ea3n: <strong>57008919<\/strong>\r\n                  <\/p>\r\n                  <p>\r\n                    Ng\u00e2n h\u00e0ng:{\" \"}\r\n                    <strong>\r\n                      Ng\u00e2n h\u00e0ng \u00c1 Ch\u00e2u (ACB) - Chi nh\u00e1nh Nam S\u00e0i G\u00f2n - HCM\r\n                    <\/strong>\r\n                  <\/p>\r\n                  <p>\r\n                    N\u1ed9i dung chuy\u1ec3n kho\u1ea3n:{\" \"}\r\n                    <strong>ICLC - H\u1ecd t\u00ean - S\u1ed1 \u0111i\u1ec7n tho\u1ea1i li\u00ean h\u1ec7<\/strong>\r\n                  <\/p>\r\n                <\/div>\r\n              <\/div>\r\n              <br \/>\r\n              <p>\r\n                Anh\/Ch\u1ecb l\u01b0u \u00fd vi\u1ebft ch\u00ednh x\u00e1c t\u00ean t\u00e0i kho\u1ea3n v\u00e0 s\u1ed1 t\u00e0i kho\u1ea3n \u0111\u1ec3\r\n                \u0111\u1ea3m b\u1ea3o h\u1ecdc ph\u00ed \u0111\u01b0\u1ee3c chuy\u1ec3n kho\u1ea3n \u0111\u1ebfn \u0111\u00fang n\u01a1i.\r\n              <\/p>\r\n              <ul style={{ listStyle: \"circle\", paddingLeft: \"1rem\" }}>\r\n                <li>\r\n                  Trong n\u1ed9i dung chuy\u1ec3n kho\u1ea3n, Anh\/Ch\u1ecb vui l\u00f2ng \u0111i\u1ec1n \u0111\u1ea7y \u0111\u1ee7\r\n                  th\u00f4ng tin:\r\n                  <strong>ICLC - H\u1ecd t\u00ean - S\u1ed1 \u0111i\u1ec7n tho\u1ea1i li\u00ean h\u1ec7<\/strong>\r\n                <\/li>\r\n                <li>\r\n                  \u0110\u1ec3 ti\u1ec7n cho vi\u1ec7c \u0111\u1ed1i chi\u1ebfu xu\u1ea5t bi\u00ean lai, Anh\/Ch\u1ecb nh\u1edb ch\u1ee5p l\u1ea1i\r\n                  th\u00f4ng tin chuy\u1ec3n kho\u1ea3n v\u00e0 g\u1eedi email v\u1ec1{\" \"}\r\n                  <a link=\"mailto:info@baigiangso.vn\">\r\n                    <strong>info@baigiangso.vn<\/strong>\r\n                  <\/a>{\" \"}\r\n                  (B\u1ed9 ph\u1eadn Ghi danh).\r\n                <\/li>\r\n                <li>\r\n                  Ch\u00fang t\u00f4i lu\u00f4n ki\u1ec3m tra c\u00e1c giao d\u1ecbch chuy\u1ec3n kho\u1ea3n m\u1ed7i ng\u00e0y\r\n                  (t\u1eeb Th\u1ee9 2 \u0111\u1ebfn Th\u1ee9 6) v\u00e0 s\u1ebd li\u00ean h\u1ec7 v\u1edbi Anh\/Ch\u1ecb ngay khi nh\u1eadn\r\n                  \u0111\u01b0\u1ee3c chuy\u1ec3n kho\u1ea3n c\u1ee7a Anh\/Ch\u1ecb (t\u1ed1i \u0111a kho\u1ea3ng 3 ng\u00e0y).\r\n                <\/li>\r\n              <\/ul>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div className=\"accordion-item\">\r\n          <h2 className=\"accordion-header\" id=\"heading-visa\">\r\n            <button\r\n              className=\"accordion-button collapsed\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"collapse\"\r\n              data-bs-target=\"#collapse-visa\"\r\n              aria-expanded=\"false\"\r\n              aria-controls=\"collapse-visa\"\r\n              onClick={() => {\r\n                setSelectedOption(\"VTC_international\");\r\n              }}\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                className=\"mr-2\"\r\n                value={\"VTC_international\"}\r\n                checked={selectedOption === \"VTC_international\"}\r\n                onChange={(e) => setSelectedOption(\"VTC_international\")}\r\n              \/>\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/i-clc.edu.vn\/wp-content\/themes\/astra-child\/img\/chuyen-khoan.png\"\r\n                width={50}\r\n                height={100}\r\n                style={{ marginRight: \"1rem\" }}\r\n              \/>\r\n              VISA \/ MASTERCARD \/ JCB\r\n            <\/button>\r\n          <\/h2>\r\n          <div\r\n            id=\"collapse-visa\"\r\n            className=\"accordion-collapse collapsed\"\r\n            aria-labelledby=\"heading-visa\"\r\n            data-bs-parent=\"#accordionExample\"\r\n          >\r\n            <div className=\"accordion-body\">\r\n              Thanh to\u00e1n qua th\u1ebb VISA\/MASTERCARD\/JCB\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div className=\"accordion-item\">\r\n          <h2 className=\"accordion-header\" id=\"heading-atm\">\r\n            <button\r\n              className=\"accordion-button collapsed\"\r\n              type=\"button\"\r\n              data-bs-toggle=\"collapse\"\r\n              data-bs-target=\"#collapse-atm\"\r\n              aria-expanded=\"false\"\r\n              aria-controls=\"collapse-atm\"\r\n              onClick={() => {\r\n                setSelectedOption(\"VTC_domestic\");\r\n              }}\r\n            >\r\n              <input\r\n                type=\"radio\"\r\n                className=\"mr-2\"\r\n                value={\"VTC_domestic\"}\r\n                checked={selectedOption === \"VTC_domestic\"}\r\n                onChange={(e) => setSelectedOption(\"VTC_domestic\")}\r\n              \/>\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/i-clc.edu.vn\/wp-content\/themes\/astra-child\/img\/chuyen-khoan.png\"\r\n                width={50}\r\n                height={100}\r\n                style={{ marginRight: \"1rem\" }}\r\n              \/>\r\n              ATM \/ QRCODE\r\n            <\/button>\r\n          <\/h2>\r\n          <div\r\n            id=\"collapse-atm\"\r\n            className=\"accordion-collapse collapsed\"\r\n            aria-labelledby=\"heading-atm\"\r\n            data-bs-parent=\"#accordionExample\"\r\n          >\r\n            <div className=\"accordion-body\">\r\n              Thanh to\u00e1n qua th\u1ebb ATM v\u00e0 QR code\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    );\r\n  }\r\n\r\n  ReactDOM.render(\r\n    <div>\r\n      <OrderForm \/>\r\n    <\/div>,\r\n    document.getElementById(\"root\")\r\n  );\r\n<\/script>\r\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":426,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","footnotes":""},"class_list":["post-19356","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/i-clc.edu.vn\/en\/wp-json\/wp\/v2\/pages\/19356","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/i-clc.edu.vn\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/i-clc.edu.vn\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/i-clc.edu.vn\/en\/wp-json\/wp\/v2\/users\/426"}],"replies":[{"embeddable":true,"href":"https:\/\/i-clc.edu.vn\/en\/wp-json\/wp\/v2\/comments?post=19356"}],"version-history":[{"count":0,"href":"https:\/\/i-clc.edu.vn\/en\/wp-json\/wp\/v2\/pages\/19356\/revisions"}],"wp:attachment":[{"href":"https:\/\/i-clc.edu.vn\/en\/wp-json\/wp\/v2\/media?parent=19356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}