Thanh to\u00e1n \u2013 Seafood<\/title>\n\n <style>\n .sf-checkout-page {\n max-width: 1100px;\n margin: 40px auto;\n padding: 0 16px 40px;\n font-family: system-ui, -apple-system, BlinkMacSystemFont,\n \"Segoe UI\", Roboto, sans-serif;\n }\n\n .sf-co-head {\n margin-bottom: 22px;\n }\n .sf-co-title {\n font-size: 26px;\n font-weight: 700;\n margin-bottom: 4px;\n }\n .sf-co-sub {\n font-size: 13px;\n color: #64748b;\n }\n\n .sf-co-layout {\n display: grid;\n grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);\n gap: 24px;\n align-items: flex-start;\n }\n\n .sf-co-card {\n background: #ffffff;\n border-radius: 18px;\n box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);\n padding: 20px 22px 22px;\n }\n\n .sf-co-card h3 {\n margin: 0 0 14px 0;\n font-size: 18px;\n }\n .sf-co-card h4 {\n margin: 16px 0 8px;\n font-size: 15px;\n }\n\n .sf-field {\n margin-bottom: 12px;\n }\n .sf-field label {\n display: block;\n font-size: 13px;\n font-weight: 600;\n margin-bottom: 4px;\n }\n .sf-field span.sf-required {\n color: #ef4444;\n }\n .sf-input,\n .sf-textarea,\n .sf-select {\n width: 100%;\n padding: 10px 12px;\n border-radius: 10px;\n border: 1px solid #cbd5f5;\n font-size: 14px;\n outline: none;\n background: #f8fafc;\n transition: border 0.15s, box-shadow 0.15s;\n }\n .sf-input:focus,\n .sf-textarea:focus,\n .sf-select:focus {\n border-color: #0ea5e9;\n box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.4);\n }\n .sf-textarea {\n min-height: 80px;\n resize: vertical;\n }\n .sf-error-text {\n margin-top: 3px;\n color: #ef4444;\n font-size: 12px;\n }\n\n .sf-radio-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n font-size: 14px;\n }\n .sf-radio-label {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n }\n\n \/* BOX ng\u00e2n h\u00e0ng *\/\n .sf-bank-box {\n margin-top: 10px;\n padding: 10px 12px;\n border-radius: 12px;\n background: #f0f9ff;\n border: 1px dashed #38bdf8;\n font-size: 13px;\n color: #0f172a;\n display: none;\n }\n .sf-bank-box strong {\n font-weight: 700;\n }\n .sf-bank-code {\n font-family: monospace;\n font-size: 13px;\n padding: 3px 6px;\n border-radius: 6px;\n background: #e0f2fe;\n }\n .sf-bank-countdown {\n font-weight: 600;\n color: #b91c1c;\n }\n\n .sf-bank-qr{\n margin-top: 10px;\n text-align: center;\n font-size: 13px;\n }\n .sf-bank-qr img{\n margin-top: 6px;\n max-width: 190px;\n border-radius: 12px;\n box-shadow: 0 8px 20px rgba(15,23,42,.25);\n background: #fff;\n }\n\n \/* VOUCHER *\/\n .sf-voucher-row{\n display:flex;\n gap:8px;\n margin-top:4px;\n }\n .sf-voucher-btn{\n padding:9px 14px;\n border-radius:10px;\n border:none;\n font-size:13px;\n font-weight:600;\n cursor:pointer;\n background:#0ea5e9;\n color:#fff;\n }\n .sf-voucher-btn:hover{\n background:#0284c7;\n }\n .sf-voucher-info{\n margin-top:4px;\n font-size:12px;\n color:#16a34a;\n }\n\n \/* T\u00f3m t\u1eaft \u0111\u01a1n *\/\n .sf-summary-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n gap: 10px;\n }\n .sf-summary-header span:first-child {\n font-weight: 600;\n }\n .sf-summary-list {\n border-top: 1px solid #e2e8f0;\n border-bottom: 1px solid #e2e8f0;\n padding: 10px 0;\n max-height: 260px;\n overflow-y: auto;\n }\n .sf-summary-item {\n display: flex;\n justify-content: space-between;\n font-size: 13px;\n padding: 5px 0;\n }\n .sf-summary-item-name {\n max-width: 65%;\n }\n .sf-summary-item-qty {\n color: #6b7280;\n }\n .sf-summary-item-price {\n white-space: nowrap;\n }\n .sf-summary-row {\n display: flex;\n justify-content: space-between;\n font-size: 14px;\n margin-top: 6px;\n }\n .sf-summary-row strong {\n font-size: 15px;\n }\n .sf-summary-total {\n font-size: 18px;\n font-weight: 700;\n margin-top: 6px;\n color: #ef4444;\n }\n\n .sf-co-notice {\n margin-top: 10px;\n font-size: 12px;\n color: #6b7280;\n }\n\n .sf-co-button-wrap {\n margin-top: 18px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n .sf-co-btn {\n width: 100%;\n padding: 11px 16px;\n border-radius: 999px;\n border: none;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: #fff;\n background: linear-gradient(135deg, #ef4444, #f97316);\n }\n .sf-co-btn:hover {\n background: linear-gradient(135deg, #dc2626, #ea580c);\n }\n .sf-co-back-link {\n font-size: 13px;\n text-align: center;\n }\n .sf-co-back-link a {\n color: #0ea5e9;\n text-decoration: none;\n }\n .sf-co-back-link a:hover {\n text-decoration: underline;\n }\n\n .sf-co-alert {\n margin-top: 16px;\n font-size: 13px;\n padding: 10px 12px;\n border-radius: 10px;\n }\n .sf-co-alert.error {\n background: #fef2f2;\n color: #b91c1c;\n border: 1px solid #fecaca;\n }\n\n .sf-co-success {\n display: none;\n margin-top: 20px;\n padding: 18px 20px;\n border-radius: 16px;\n background: #ecfdf5;\n border: 1px solid #bbf7d0;\n color: #166534;\n }\n .sf-co-success-title {\n font-size: 18px;\n font-weight: 700;\n margin-bottom: 6px;\n }\n .sf-co-success small {\n font-size: 12px;\n }\n\n @media (max-width: 900px) {\n .sf-co-layout {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n\n<div class=\"sf-checkout-page\">\n <div class=\"sf-co-head\">\n <div class=\"sf-co-title\">Thanh to\u00e1n<\/div>\n <div class=\"sf-co-sub\">\n Vui l\u00f2ng ki\u1ec3m tra l\u1ea1i th\u00f4ng tin v\u00e0 \u0111\u01a1n h\u00e0ng tr\u01b0\u1edbc khi \u0111\u1eb7t.\n <\/div>\n <\/div>\n\n <div class=\"sf-co-layout\">\n \n <div class=\"sf-co-card\">\n <h3>Th\u00f4ng tin kh\u00e1ch h\u00e0ng<\/h3>\n\n <form id=\"sfCheckoutForm\">\n <div class=\"sf-field\">\n <label>H\u1ecd v\u00e0 t\u00ean <span class=\"sf-required\">*<\/span><\/label>\n <input type=\"text\" id=\"sfFullName\" class=\"sf-input\" \/>\n <div class=\"sf-error-text\" id=\"errName\"><\/div>\n <\/div>\n\n <div class=\"sf-field\">\n <label>S\u1ed1 \u0111i\u1ec7n tho\u1ea1i <span class=\"sf-required\">*<\/span><\/label>\n <input type=\"text\" id=\"sfPhone\" class=\"sf-input\" \/>\n <div class=\"sf-error-text\" id=\"errPhone\"><\/div>\n <\/div>\n\n <div class=\"sf-field\">\n <label>Email<\/label>\n <input type=\"email\" id=\"sfEmail\" class=\"sf-input\" \/>\n <div class=\"sf-error-text\" id=\"errEmail\"><\/div>\n <\/div>\n\n <div class=\"sf-field\">\n <label>\u0110\u1ecba ch\u1ec9 giao h\u00e0ng <span class=\"sf-required\">*<\/span><\/label>\n <textarea\n id=\"sfAddress\"\n class=\"sf-textarea\"\n placeholder=\"S\u1ed1 nh\u00e0, \u0111\u01b0\u1eddng, ph\u01b0\u1eddng\/x\u00e3, qu\u1eadn\/huy\u1ec7n, t\u1ec9nh\/th\u00e0nh\"\n ><\/textarea>\n <div class=\"sf-error-text\" id=\"errAddress\"><\/div>\n <\/div>\n\n <h4>Ph\u01b0\u01a1ng th\u1ee9c thanh to\u00e1n<\/h4>\n <div class=\"sf-field\">\n <div class=\"sf-radio-group\">\n <label class=\"sf-radio-label\">\n <input\n type=\"radio\"\n name=\"sfPaymentMethod\"\n value=\"cod\"\n checked\n \/>\n <span>Thanh to\u00e1n khi nh\u1eadn h\u00e0ng (COD)<\/span>\n <\/label>\n <label class=\"sf-radio-label\">\n <input type=\"radio\" name=\"sfPaymentMethod\" value=\"bank\" \/>\n <span>Chuy\u1ec3n kho\u1ea3n ng\u00e2n h\u00e0ng<\/span>\n <\/label>\n <\/div>\n\n \n <div class=\"sf-bank-box\" id=\"sfBankBox\">\n <div><strong>Th\u00f4ng tin chuy\u1ec3n kho\u1ea3n:<\/strong><\/div>\n <div>Ng\u00e2n h\u00e0ng: <strong>MB – MB Bank<\/strong><\/div>\n <div>Ch\u1ee7 t\u00e0i kho\u1ea3n: <strong>SEAFOOD 3 ANH EM<\/strong><\/div>\n <div>S\u1ed1 t\u00e0i kho\u1ea3n: <strong>913141516<\/strong><\/div>\n <div style=\"margin-top:4px;\">\n N\u1ed9i dung chuy\u1ec3n kho\u1ea3n:\n <span class=\"sf-bank-code\" id=\"sfBankCode\">\u0110ang t\u1ea1o…<\/span>\n <\/div>\n <div style=\"margin-top:6px;\">\n Vui l\u00f2ng chuy\u1ec3n kho\u1ea3n trong\n <span class=\"sf-bank-countdown\" id=\"sfBankCountdown\">05:00<\/span>.\n H\u1ebft th\u1eddi gian trang s\u1ebd t\u1ef1 l\u00e0m m\u1edbi v\u00e0 t\u1ea1o m\u00e3 m\u1edbi.\n <\/div>\n\n <div class=\"sf-bank-qr\">\n <div>Qu\u00e9t m\u00e3 QR \u0111\u1ec3 thanh to\u00e1n nhanh:<\/div>\n <img decoding=\"async\" id=\"sfBankQr\" src=\"\" alt=\"QR thanh to\u00e1n\" \/>\n <\/div>\n <\/div>\n <\/div>\n\n \n <h4>M\u00e3 gi\u1ea3m gi\u00e1<\/h4>\n <div class=\"sf-field\">\n <div class=\"sf-voucher-row\">\n <input type=\"text\" id=\"sfVoucherInput\" class=\"sf-input\" placeholder=\"Nh\u1eadp m\u00e3 voucher (n\u1ebfu c\u00f3)\">\n <button type=\"button\" class=\"sf-voucher-btn\" onclick=\"sfApplyVoucher()\">\u00c1p d\u1ee5ng<\/button>\n <\/div>\n <div class=\"sf-error-text\" id=\"sfVoucherError\"><\/div>\n <div class=\"sf-voucher-info\" id=\"sfVoucherInfo\"><\/div>\n <\/div>\n\n <h4>Ghi ch\u00fa \u0111\u01a1n h\u00e0ng<\/h4>\n <div class=\"sf-field\">\n <textarea\n id=\"sfNote\"\n class=\"sf-textarea\"\n placeholder=\"V\u00ed d\u1ee5: Giao gi\u1edd h\u00e0nh ch\u00ednh, kh\u00f4ng l\u1ea5y n\u01b0\u1edbc ch\u1ea3y t\u1eeb h\u1ea3i s\u1ea3n,...\"\n ><\/textarea>\n <\/div>\n\n <div class=\"sf-co-alert error\" id=\"sfFormError\" style=\"display: none\">\n Vui l\u00f2ng ki\u1ec3m tra l\u1ea1i c\u00e1c tr\u01b0\u1eddng \u0111\u00e1nh d\u1ea5u (*).\n <\/div>\n\n <div class=\"sf-co-button-wrap\">\n <button type=\"submit\" class=\"sf-co-btn\">\n \u0110\u1eb7t h\u00e0ng\n <\/button>\n <div class=\"sf-co-back-link\">\n ho\u1eb7c <a href=\"https:\/\/seafood.anhtu1.id.vn\/index.php\/194-2\/\">quay l\u1ea1i gi\u1ecf h\u00e0ng<\/a> \u0111\u1ec3 ch\u1ec9nh s\u1eeda\n <\/div>\n <\/div>\n <\/form>\n <\/div>\n\n \n <div class=\"sf-co-card\">\n <div class=\"sf-summary-header\">\n <span>\u0110\u01a1n h\u00e0ng c\u1ee7a b\u1ea1n<\/span>\n <span id=\"sfSummaryCount\">0 s\u1ea3n ph\u1ea9m<\/span>\n <\/div>\n\n <div class=\"sf-summary-list\" id=\"sfSummaryList\"><\/div>\n\n <div class=\"sf-summary-row\">\n <span>T\u1ea1m t\u00ednh<\/span>\n <span id=\"sfSubtotal\">0 \u0111<\/span>\n <\/div>\n <div class=\"sf-summary-row\">\n <span>Gi\u1ea3m gi\u00e1<\/span>\n <span id=\"sfDiscount\">0 \u0111<\/span>\n <\/div>\n <div class=\"sf-summary-row\">\n <span>Ph\u00ed giao h\u00e0ng<\/span>\n <span id=\"sfShippingLabel\">\u0110ang t\u00ednh…<\/span>\n <\/div>\n <div class=\"sf-summary-total\">\n T\u1ed5ng thanh to\u00e1n: <span id=\"sfGrandTotal\">0 \u0111<\/span>\n <\/div>\n\n <div class=\"sf-co-notice\">\n * Ph\u00ed giao h\u00e0ng ch\u1ec9 mang t\u00ednh tham kh\u1ea3o. C\u1eeda h\u00e0ng s\u1ebd li\u00ean h\u1ec7 x\u00e1c nh\u1eadn\n l\u1ea1i gi\u00e1 v\u00e0 th\u1eddi gian giao c\u1ee5 th\u1ec3.\n <\/div>\n\n <div class=\"sf-co-success\" id=\"sfSuccessBox\">\n <div class=\"sf-co-success-title\">\u0110\u1eb7t h\u00e0ng th\u00e0nh c\u00f4ng \ud83c\udf89<\/div>\n <div id=\"sfSuccessMsg\"><\/div>\n <small>\n Th\u00f4ng tin \u0111\u01a1n h\u00e0ng ch\u1ec9 \u0111ang \u0111\u01b0\u1ee3c l\u01b0u tr\u00ean tr\u00ecnh duy\u1ec7t (demo). \u0110\u1ec3 d\u00f9ng\n th\u1ef1c t\u1ebf c\u1ea7n k\u1ebft n\u1ed1i v\u1edbi h\u1ec7 th\u1ed1ng backend \/ email.\n <\/small>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ====== BI\u1ebeN TO\u00c0N C\u1ee4C CHO VOUCHER \/ T\u1ed4NG ======\n let sfActiveVoucher = null;\n window.sfRawSubtotal = 0;\n window.sfShipping = 0;\n window.sfOrderTotal = 0;\n window.sfOrderDiscount = 0;\n\n function sfFormatVND(n) {\n return n.toLocaleString(\"vi-VN\") + \" \u0111\";\n }\n\n \/\/ L\u1ea5y user hi\u1ec7n t\u1ea1i t\u1eeb localStorage (g\u1eafn v\u1edbi trang \u0111\u0103ng nh\u1eadp \u0111\u00e3 l\u00e0m)\n function sfGetCurrentUser(){\n const email = localStorage.getItem('currentUser');\n if(!email) return null;\n let users = [];\n try{\n users = JSON.parse(localStorage.getItem('users')) || [];\n }catch(e){}\n return users.find(u => u.email === email) || null;\n }\n\n \/\/ C\u1eadp nh\u1eadt c\u00e1c d\u00f2ng ti\u1ec1n (t\u1ea1m t\u00ednh, gi\u1ea3m gi\u00e1, ph\u00ed ship, t\u1ed5ng)\n function sfUpdateTotalsWithVoucher(){\n const subtotalEl = document.getElementById(\"sfSubtotal\");\n const shippingEl = document.getElementById(\"sfShippingLabel\");\n const discountEl = document.getElementById(\"sfDiscount\");\n const grandTotalEl = document.getElementById(\"sfGrandTotal\");\n\n const subtotal = window.sfRawSubtotal || 0;\n const shipping = window.sfShipping !== undefined ? window.sfShipping : 0;\n\n let discount = 0;\n if(sfActiveVoucher && subtotal >= (sfActiveVoucher.minTotal || 0)){\n if(sfActiveVoucher.type === 'fixed'){\n discount = sfActiveVoucher.value || 0;\n }else if(sfActiveVoucher.type === 'percent'){\n discount = Math.round(subtotal * (sfActiveVoucher.value || 0) \/ 100);\n }\n }\n if(discount > subtotal) discount = subtotal;\n\n const grand = subtotal - discount + shipping;\n\n subtotalEl.textContent = sfFormatVND(subtotal);\n shippingEl.textContent = shipping === 0 ? \"Mi\u1ec5n ph\u00ed\" : sfFormatVND(shipping);\n discountEl.textContent = discount > 0 ? \"- \" + sfFormatVND(discount) : \"0 \u0111\";\n grandTotalEl.textContent = sfFormatVND(grand);\n\n window.sfOrderTotal = grand;\n window.sfOrderDiscount = discount;\n }\n\n \/\/ \u00c1p d\u1ee5ng voucher\n function sfApplyVoucher(){\n const input = document.getElementById('sfVoucherInput');\n const code = (input.value || '').trim().toUpperCase();\n const errEl = document.getElementById('sfVoucherError');\n const infoEl= document.getElementById('sfVoucherInfo');\n errEl.textContent = '';\n infoEl.textContent = '';\n sfActiveVoucher = null;\n\n if(!code){\n errEl.textContent = 'Vui l\u00f2ng nh\u1eadp m\u00e3 voucher.';\n sfUpdateTotalsWithVoucher();\n return;\n }\n\n const user = sfGetCurrentUser();\n if(!user){\n errEl.textContent = 'B\u1ea1n c\u1ea7n \u0111\u0103ng nh\u1eadp \u0111\u1ec3 d\u00f9ng voucher.';\n sfUpdateTotalsWithVoucher();\n return;\n }\n\n const v = (user.vouchers || []).find(x => x.code.toUpperCase() === code && !x.used);\n if(!v){\n errEl.textContent = 'M\u00e3 voucher kh\u00f4ng t\u1ed3n t\u1ea1i ho\u1eb7c \u0111\u00e3 s\u1eed d\u1ee5ng.';\n sfUpdateTotalsWithVoucher();\n return;\n }\n\n sfActiveVoucher = v;\n infoEl.textContent = v.label || ('\u0110\u00e3 \u00e1p d\u1ee5ng voucher ' + v.code);\n sfUpdateTotalsWithVoucher();\n }\n\n \/* ============= T\u00d3M T\u1eaeT GI\u1ece H\u00c0NG ============= *\/\n function sfLoadCheckoutSummary() {\n let cart = [];\n try {\n cart = JSON.parse(localStorage.getItem(\"cart\")) || [];\n } catch (e) {}\n\n const listEl = document.getElementById(\"sfSummaryList\");\n const countEl = document.getElementById(\"sfSummaryCount\");\n const discountEl = document.getElementById(\"sfDiscount\");\n\n listEl.innerHTML = \"\";\n\n if (cart.length === 0) {\n listEl.innerHTML =\n '<div style=\"padding:10px 0;font-size:14px;color:#64748b;\">Gi\u1ecf h\u00e0ng \u0111ang tr\u1ed1ng. Vui l\u00f2ng quay l\u1ea1i <a href=\"https:\/\/seafood.anhtu1.id.vn\/index.php\/194-2\/\">gi\u1ecf h\u00e0ng<\/a>.<\/div>';\n countEl.textContent = \"0 s\u1ea3n ph\u1ea9m\";\n window.sfRawSubtotal = 0;\n window.sfShipping = 0;\n window.sfOrderDiscount = 0;\n window.sfOrderTotal = 0;\n if(discountEl) discountEl.textContent = \"0 \u0111\";\n sfUpdateTotalsWithVoucher();\n return;\n }\n\n let subtotal = 0;\n let totalQty = 0;\n\n cart.forEach((item) => {\n const sub = item.price * item.qty;\n subtotal += sub;\n totalQty += item.qty || 0;\n\n const row = document.createElement(\"div\");\n row.className = \"sf-summary-item\";\n row.innerHTML = `\n <div class=\"sf-summary-item-name\">\n ${item.name}<span class=\"sf-summary-item-qty\"> x${item.qty}<\/span>\n <\/div>\n <div class=\"sf-summary-item-price\">${sfFormatVND(sub)}<\/div>\n `;\n listEl.appendChild(row);\n });\n\n let shipping = 30000;\n if (subtotal >= 500000 || subtotal === 0) shipping = 0;\n\n countEl.textContent = totalQty + \" s\u1ea3n ph\u1ea9m\";\n window.sfRawSubtotal = subtotal;\n window.sfShipping = shipping;\n\n \/\/ c\u1eadp nh\u1eadt c\u00e1c d\u00f2ng ti\u1ec1n (t\u1ea1m t\u00ednh, gi\u1ea3m, ship, t\u1ed5ng)\n sfUpdateTotalsWithVoucher();\n }\n\n \/* ============= VALIDATE FORM ============= *\/\n function sfValidateCheckoutForm() {\n let valid = true;\n\n const name = document.getElementById(\"sfFullName\").value.trim();\n const phone = document.getElementById(\"sfPhone\").value.trim();\n const email = document.getElementById(\"sfEmail\").value.trim();\n const address = document.getElementById(\"sfAddress\").value.trim();\n\n const errName = document.getElementById(\"errName\");\n const errPhone = document.getElementById(\"errPhone\");\n const errEmail = document.getElementById(\"errEmail\");\n const errAddress = document.getElementById(\"errAddress\");\n const formError = document.getElementById(\"sfFormError\");\n\n errName.textContent = \"\";\n errPhone.textContent = \"\";\n errEmail.textContent = \"\";\n errAddress.textContent = \"\";\n formError.style.display = \"none\";\n\n if (!name) {\n errName.textContent = \"Vui l\u00f2ng nh\u1eadp h\u1ecd t\u00ean.\";\n valid = false;\n }\n if (!phone) {\n errPhone.textContent = \"Vui l\u00f2ng nh\u1eadp s\u1ed1 \u0111i\u1ec7n tho\u1ea1i.\";\n valid = false;\n } else if (!\/^[0-9\\+\\-\\s]{8,15}$\/.test(phone)) {\n errPhone.textContent = \"S\u1ed1 \u0111i\u1ec7n tho\u1ea1i kh\u00f4ng h\u1ee3p l\u1ec7.\";\n valid = false;\n }\n if (email && !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\n errEmail.textContent = \"Email kh\u00f4ng h\u1ee3p l\u1ec7.\";\n valid = false;\n }\n if (!address) {\n errAddress.textContent = \"Vui l\u00f2ng nh\u1eadp \u0111\u1ecba ch\u1ec9 giao h\u00e0ng.\";\n valid = false;\n }\n\n if (!valid) {\n formError.style.display = \"block\";\n }\n return valid;\n }\n\n \/* ============= BANK BOX + QR + COUNTDOWN ============= *\/\n let sfBankTimer = null;\n let sfBankExpireAt = null;\n\n function sfGenerateBankCode() {\n return \"SF\" + Date.now().toString().slice(-6);\n }\n\n function sfStartBankCountdown() {\n const box = document.getElementById(\"sfBankBox\");\n const codeEl = document.getElementById(\"sfBankCode\");\n const countdownEl = document.getElementById(\"sfBankCountdown\");\n const qrImg = document.getElementById(\"sfBankQr\");\n\n if (!box) return;\n\n box.style.display = \"block\";\n\n const code = sfGenerateBankCode();\n codeEl.textContent = code;\n\n const amount = window.sfOrderTotal || 0;\n\n const bankId = \"MBBANK\"; \/\/ \ud83d\udd34 \u0110\u1ed4I TH\u00c0NH M\u00c3 NG\u00c2N H\u00c0NG\n const accountNo = \"913141516\"; \/\/ \ud83d\udd34 \u0110\u1ed4I TH\u00c0NH S\u1ed0 TK\n const accountName = \"SEAFOOD 3 ANH EM\"; \/\/ \ud83d\udd34 \u0110\u1ed4I T\u00caN CH\u1ee6 TK\n\n const qrUrl =\n \"https:\/\/img.vietqr.io\/image\/\" +\n bankId + \"-\" + accountNo +\n \"-compact.png?amount=\" + amount +\n \"&addInfo=\" + encodeURIComponent(code) +\n \"&accountName=\" + encodeURIComponent(accountName);\n\n if (qrImg) {\n qrImg.src = qrUrl;\n }\n\n sfBankExpireAt = Date.now() + 5 * 60 * 1000;\n\n if (sfBankTimer) clearInterval(sfBankTimer);\n\n sfBankTimer = setInterval(() => {\n const remain = sfBankExpireAt - Date.now();\n if (remain <= 0) {\n clearInterval(sfBankTimer);\n sfBankTimer = null;\n location.reload();\n return;\n }\n const sec = Math.floor(remain \/ 1000);\n const m = String(Math.floor(sec \/ 60)).padStart(2, \"0\");\n const s = String(sec % 60).padStart(2, \"0\");\n countdownEl.textContent = `${m}:${s}`;\n }, 1000);\n }\n\n function sfHideBankBox() {\n const box = document.getElementById(\"sfBankBox\");\n if (box) box.style.display = \"none\";\n if (sfBankTimer) {\n clearInterval(sfBankTimer);\n sfBankTimer = null;\n }\n }\n\n document\n .querySelectorAll('input[name=\"sfPaymentMethod\"]')\n .forEach((radio) => {\n radio.addEventListener(\"change\", function () {\n if (this.value === \"bank\") {\n sfStartBankCountdown();\n } else {\n sfHideBankBox();\n }\n });\n });\n\n \/* ============= SUBMIT \u0110\u01a0N ============= *\/\n document\n .getElementById(\"sfCheckoutForm\")\n .addEventListener(\"submit\", function (e) {\n e.preventDefault();\n\n let cart = [];\n try {\n cart = JSON.parse(localStorage.getItem(\"cart\")) || [];\n } catch (err) {}\n if (cart.length === 0) {\n alert(\"Gi\u1ecf h\u00e0ng \u0111ang tr\u1ed1ng. Vui l\u00f2ng quay l\u1ea1i gi\u1ecf h\u00e0ng.\");\n return;\n }\n\n if (!sfValidateCheckoutForm()) return;\n\n const name = document.getElementById(\"sfFullName\").value.trim();\n const phone = document.getElementById(\"sfPhone\").value.trim();\n const email = document.getElementById(\"sfEmail\").value.trim();\n const address = document.getElementById(\"sfAddress\").value.trim();\n const note = document.getElementById(\"sfNote\").value.trim();\n const payment = document.querySelector(\n 'input[name=\"sfPaymentMethod\"]:checked'\n ).value;\n\n const subtotal = window.sfRawSubtotal || 0;\n const shipping = window.sfShipping !== undefined ? window.sfShipping : 0;\n const discount = window.sfOrderDiscount || 0;\n const total = subtotal - discount + shipping;\n\n const orderId = \"HD\" + Date.now().toString().slice(-8);\n\n const orderData = {\n id: orderId,\n createdAt: new Date().toISOString(),\n customer: { name, phone, email, address, note },\n paymentMethod: payment,\n subtotal,\n shipping,\n discount,\n total,\n usedVoucher: sfActiveVoucher ? sfActiveVoucher.code : null,\n items: cart,\n };\n\n let orders = [];\n try {\n orders = JSON.parse(localStorage.getItem(\"orders\")) || [];\n } catch (err) {}\n orders.push(orderData);\n localStorage.setItem(\"orders\", JSON.stringify(orders));\n\n \/\/ n\u1ebfu c\u00f3 d\u00f9ng voucher \u2192 \u0111\u00e1nh d\u1ea5u used = true\n if(sfActiveVoucher){\n const emailCurrent = localStorage.getItem('currentUser');\n if(emailCurrent){\n let users = [];\n try{\n users = JSON.parse(localStorage.getItem('users')) || [];\n }catch(e){}\n const u = users.find(x => x.email === emailCurrent);\n if(u && Array.isArray(u.vouchers)){\n const v = u.vouchers.find(x => x.code === sfActiveVoucher.code);\n if(v) v.used = true;\n localStorage.setItem('users', JSON.stringify(users));\n }\n }\n }\n\n localStorage.removeItem(\"cart\");\n sfLoadCheckoutSummary();\n\n const successBox = document.getElementById(\"sfSuccessBox\");\n const msgEl = document.getElementById(\"sfSuccessMsg\");\n successBox.style.display = \"block\";\n\n let extra = \"\";\n if (payment === \"bank\") {\n extra =\n \"<br>Vui l\u00f2ng chuy\u1ec3n kho\u1ea3n theo th\u00f4ng tin \u1edf ph\u1ea7n 'Chuy\u1ec3n kho\u1ea3n ng\u00e2n h\u00e0ng'.\";\n }\n\n msgEl.innerHTML = `C\u1ea3m \u01a1n <strong>${name}<\/strong> \u0111\u00e3 \u0111\u1eb7t h\u00e0ng.<br>M\u00e3 \u0111\u01a1n c\u1ee7a b\u1ea1n l\u00e0 <strong>${orderId}<\/strong> v\u1edbi t\u1ed5ng ti\u1ec1n <strong>${sfFormatVND(\n total\n )}<\/strong>.${extra}`;\n });\n\n \/\/ T\u1ef1 fill th\u00f4ng tin t\u1eeb user \u0111ang \u0111\u0103ng nh\u1eadp (n\u1ebfu c\u00f3)\n function sfPrefillCustomerFromUser(){\n const u = sfGetCurrentUser();\n if(!u) return;\n const nameInput = document.getElementById(\"sfFullName\");\n const emailInput= document.getElementById(\"sfEmail\");\n const phoneInput= document.getElementById(\"sfPhone\");\n\n if(nameInput && !nameInput.value) nameInput.value = u.name || \"\";\n if(emailInput && !emailInput.value)emailInput.value = u.email || \"\";\n if(phoneInput && !phoneInput.value)phoneInput.value = u.phone || \"\";\n }\n\n \/\/ Kh\u1edfi \u0111\u1ed9ng\n sfLoadCheckoutSummary();\n sfPrefillCustomerFromUser();\n\n const defaultPay = document.querySelector(\n 'input[name=\"sfPaymentMethod\"]:checked'\n );\n if (defaultPay && defaultPay.value === \"bank\") {\n sfStartBankCountdown();\n }\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Thanh to\u00e1n \u2013 Seafood Thanh to\u00e1n Vui l\u00f2ng ki\u1ec3m tra l\u1ea1i th\u00f4ng tin v\u00e0 \u0111\u01a1n h\u00e0ng tr\u01b0\u1edbc khi \u0111\u1eb7t. Th\u00f4ng tin kh\u00e1ch h\u00e0ng H\u1ecd v\u00e0 t\u00ean * S\u1ed1 \u0111i\u1ec7n tho\u1ea1i * Email \u0110\u1ecba ch\u1ec9 giao h\u00e0ng * Ph\u01b0\u01a1ng th\u1ee9c thanh to\u00e1n Thanh to\u00e1n khi nh\u1eadn h\u00e0ng (COD) Chuy\u1ec3n kho\u1ea3n ng\u00e2n h\u00e0ng Th\u00f4ng tin chuy\u1ec3n kho\u1ea3n: […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-200","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/pages\/200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/comments?post=200"}],"version-history":[{"count":5,"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/pages\/200\/revisions"}],"predecessor-version":[{"id":328,"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/pages\/200\/revisions\/328"}],"wp:attachment":[{"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/media?parent=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":200,"date":"2025-11-30T04:06:05","date_gmt":"2025-11-30T04:06:05","guid":{"rendered":"https:\/\/seafood.anhtu1.id.vn\/?page_id=200"},"modified":"2026-01-15T06:24:08","modified_gmt":"2026-01-15T06:24:08","slug":"thanh-toan","status":"publish","type":"page","link":"https:\/\/seafood.anhtu1.id.vn\/index.php\/thanh-toan\/","title":{"rendered":"Thanh To\u00e1n"},"content":{"rendered":"\n\n\n\n \n Thanh to\u00e1n \u2013 Seafood<\/title>\n\n <style>\n .sf-checkout-page {\n max-width: 1100px;\n margin: 40px auto;\n padding: 0 16px 40px;\n font-family: system-ui, -apple-system, BlinkMacSystemFont,\n \"Segoe UI\", Roboto, sans-serif;\n }\n\n .sf-co-head {\n margin-bottom: 22px;\n }\n .sf-co-title {\n font-size: 26px;\n font-weight: 700;\n margin-bottom: 4px;\n }\n .sf-co-sub {\n font-size: 13px;\n color: #64748b;\n }\n\n .sf-co-layout {\n display: grid;\n grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);\n gap: 24px;\n align-items: flex-start;\n }\n\n .sf-co-card {\n background: #ffffff;\n border-radius: 18px;\n box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);\n padding: 20px 22px 22px;\n }\n\n .sf-co-card h3 {\n margin: 0 0 14px 0;\n font-size: 18px;\n }\n .sf-co-card h4 {\n margin: 16px 0 8px;\n font-size: 15px;\n }\n\n .sf-field {\n margin-bottom: 12px;\n }\n .sf-field label {\n display: block;\n font-size: 13px;\n font-weight: 600;\n margin-bottom: 4px;\n }\n .sf-field span.sf-required {\n color: #ef4444;\n }\n .sf-input,\n .sf-textarea,\n .sf-select {\n width: 100%;\n padding: 10px 12px;\n border-radius: 10px;\n border: 1px solid #cbd5f5;\n font-size: 14px;\n outline: none;\n background: #f8fafc;\n transition: border 0.15s, box-shadow 0.15s;\n }\n .sf-input:focus,\n .sf-textarea:focus,\n .sf-select:focus {\n border-color: #0ea5e9;\n box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.4);\n }\n .sf-textarea {\n min-height: 80px;\n resize: vertical;\n }\n .sf-error-text {\n margin-top: 3px;\n color: #ef4444;\n font-size: 12px;\n }\n\n .sf-radio-group {\n display: flex;\n flex-direction: column;\n gap: 6px;\n font-size: 14px;\n }\n .sf-radio-label {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n }\n\n \/* BOX ng\u00e2n h\u00e0ng *\/\n .sf-bank-box {\n margin-top: 10px;\n padding: 10px 12px;\n border-radius: 12px;\n background: #f0f9ff;\n border: 1px dashed #38bdf8;\n font-size: 13px;\n color: #0f172a;\n display: none;\n }\n .sf-bank-box strong {\n font-weight: 700;\n }\n .sf-bank-code {\n font-family: monospace;\n font-size: 13px;\n padding: 3px 6px;\n border-radius: 6px;\n background: #e0f2fe;\n }\n .sf-bank-countdown {\n font-weight: 600;\n color: #b91c1c;\n }\n\n .sf-bank-qr{\n margin-top: 10px;\n text-align: center;\n font-size: 13px;\n }\n .sf-bank-qr img{\n margin-top: 6px;\n max-width: 190px;\n border-radius: 12px;\n box-shadow: 0 8px 20px rgba(15,23,42,.25);\n background: #fff;\n }\n\n \/* VOUCHER *\/\n .sf-voucher-row{\n display:flex;\n gap:8px;\n margin-top:4px;\n }\n .sf-voucher-btn{\n padding:9px 14px;\n border-radius:10px;\n border:none;\n font-size:13px;\n font-weight:600;\n cursor:pointer;\n background:#0ea5e9;\n color:#fff;\n }\n .sf-voucher-btn:hover{\n background:#0284c7;\n }\n .sf-voucher-info{\n margin-top:4px;\n font-size:12px;\n color:#16a34a;\n }\n\n \/* T\u00f3m t\u1eaft \u0111\u01a1n *\/\n .sf-summary-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 10px;\n gap: 10px;\n }\n .sf-summary-header span:first-child {\n font-weight: 600;\n }\n .sf-summary-list {\n border-top: 1px solid #e2e8f0;\n border-bottom: 1px solid #e2e8f0;\n padding: 10px 0;\n max-height: 260px;\n overflow-y: auto;\n }\n .sf-summary-item {\n display: flex;\n justify-content: space-between;\n font-size: 13px;\n padding: 5px 0;\n }\n .sf-summary-item-name {\n max-width: 65%;\n }\n .sf-summary-item-qty {\n color: #6b7280;\n }\n .sf-summary-item-price {\n white-space: nowrap;\n }\n .sf-summary-row {\n display: flex;\n justify-content: space-between;\n font-size: 14px;\n margin-top: 6px;\n }\n .sf-summary-row strong {\n font-size: 15px;\n }\n .sf-summary-total {\n font-size: 18px;\n font-weight: 700;\n margin-top: 6px;\n color: #ef4444;\n }\n\n .sf-co-notice {\n margin-top: 10px;\n font-size: 12px;\n color: #6b7280;\n }\n\n .sf-co-button-wrap {\n margin-top: 18px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n .sf-co-btn {\n width: 100%;\n padding: 11px 16px;\n border-radius: 999px;\n border: none;\n font-size: 15px;\n font-weight: 600;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n color: #fff;\n background: linear-gradient(135deg, #ef4444, #f97316);\n }\n .sf-co-btn:hover {\n background: linear-gradient(135deg, #dc2626, #ea580c);\n }\n .sf-co-back-link {\n font-size: 13px;\n text-align: center;\n }\n .sf-co-back-link a {\n color: #0ea5e9;\n text-decoration: none;\n }\n .sf-co-back-link a:hover {\n text-decoration: underline;\n }\n\n .sf-co-alert {\n margin-top: 16px;\n font-size: 13px;\n padding: 10px 12px;\n border-radius: 10px;\n }\n .sf-co-alert.error {\n background: #fef2f2;\n color: #b91c1c;\n border: 1px solid #fecaca;\n }\n\n .sf-co-success {\n display: none;\n margin-top: 20px;\n padding: 18px 20px;\n border-radius: 16px;\n background: #ecfdf5;\n border: 1px solid #bbf7d0;\n color: #166534;\n }\n .sf-co-success-title {\n font-size: 18px;\n font-weight: 700;\n margin-bottom: 6px;\n }\n .sf-co-success small {\n font-size: 12px;\n }\n\n @media (max-width: 900px) {\n .sf-co-layout {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n\n<div class=\"sf-checkout-page\">\n <div class=\"sf-co-head\">\n <div class=\"sf-co-title\">Thanh to\u00e1n<\/div>\n <div class=\"sf-co-sub\">\n Vui l\u00f2ng ki\u1ec3m tra l\u1ea1i th\u00f4ng tin v\u00e0 \u0111\u01a1n h\u00e0ng tr\u01b0\u1edbc khi \u0111\u1eb7t.\n <\/div>\n <\/div>\n\n <div class=\"sf-co-layout\">\n \n <div class=\"sf-co-card\">\n <h3>Th\u00f4ng tin kh\u00e1ch h\u00e0ng<\/h3>\n\n <form id=\"sfCheckoutForm\">\n <div class=\"sf-field\">\n <label>H\u1ecd v\u00e0 t\u00ean <span class=\"sf-required\">*<\/span><\/label>\n <input type=\"text\" id=\"sfFullName\" class=\"sf-input\" \/>\n <div class=\"sf-error-text\" id=\"errName\"><\/div>\n <\/div>\n\n <div class=\"sf-field\">\n <label>S\u1ed1 \u0111i\u1ec7n tho\u1ea1i <span class=\"sf-required\">*<\/span><\/label>\n <input type=\"text\" id=\"sfPhone\" class=\"sf-input\" \/>\n <div class=\"sf-error-text\" id=\"errPhone\"><\/div>\n <\/div>\n\n <div class=\"sf-field\">\n <label>Email<\/label>\n <input type=\"email\" id=\"sfEmail\" class=\"sf-input\" \/>\n <div class=\"sf-error-text\" id=\"errEmail\"><\/div>\n <\/div>\n\n <div class=\"sf-field\">\n <label>\u0110\u1ecba ch\u1ec9 giao h\u00e0ng <span class=\"sf-required\">*<\/span><\/label>\n <textarea\n id=\"sfAddress\"\n class=\"sf-textarea\"\n placeholder=\"S\u1ed1 nh\u00e0, \u0111\u01b0\u1eddng, ph\u01b0\u1eddng\/x\u00e3, qu\u1eadn\/huy\u1ec7n, t\u1ec9nh\/th\u00e0nh\"\n ><\/textarea>\n <div class=\"sf-error-text\" id=\"errAddress\"><\/div>\n <\/div>\n\n <h4>Ph\u01b0\u01a1ng th\u1ee9c thanh to\u00e1n<\/h4>\n <div class=\"sf-field\">\n <div class=\"sf-radio-group\">\n <label class=\"sf-radio-label\">\n <input\n type=\"radio\"\n name=\"sfPaymentMethod\"\n value=\"cod\"\n checked\n \/>\n <span>Thanh to\u00e1n khi nh\u1eadn h\u00e0ng (COD)<\/span>\n <\/label>\n <label class=\"sf-radio-label\">\n <input type=\"radio\" name=\"sfPaymentMethod\" value=\"bank\" \/>\n <span>Chuy\u1ec3n kho\u1ea3n ng\u00e2n h\u00e0ng<\/span>\n <\/label>\n <\/div>\n\n \n <div class=\"sf-bank-box\" id=\"sfBankBox\">\n <div><strong>Th\u00f4ng tin chuy\u1ec3n kho\u1ea3n:<\/strong><\/div>\n <div>Ng\u00e2n h\u00e0ng: <strong>MB – MB Bank<\/strong><\/div>\n <div>Ch\u1ee7 t\u00e0i kho\u1ea3n: <strong>SEAFOOD 3 ANH EM<\/strong><\/div>\n <div>S\u1ed1 t\u00e0i kho\u1ea3n: <strong>913141516<\/strong><\/div>\n <div style=\"margin-top:4px;\">\n N\u1ed9i dung chuy\u1ec3n kho\u1ea3n:\n <span class=\"sf-bank-code\" id=\"sfBankCode\">\u0110ang t\u1ea1o…<\/span>\n <\/div>\n <div style=\"margin-top:6px;\">\n Vui l\u00f2ng chuy\u1ec3n kho\u1ea3n trong\n <span class=\"sf-bank-countdown\" id=\"sfBankCountdown\">05:00<\/span>.\n H\u1ebft th\u1eddi gian trang s\u1ebd t\u1ef1 l\u00e0m m\u1edbi v\u00e0 t\u1ea1o m\u00e3 m\u1edbi.\n <\/div>\n\n <div class=\"sf-bank-qr\">\n <div>Qu\u00e9t m\u00e3 QR \u0111\u1ec3 thanh to\u00e1n nhanh:<\/div>\n <img decoding=\"async\" id=\"sfBankQr\" src=\"\" alt=\"QR thanh to\u00e1n\" \/>\n <\/div>\n <\/div>\n <\/div>\n\n \n <h4>M\u00e3 gi\u1ea3m gi\u00e1<\/h4>\n <div class=\"sf-field\">\n <div class=\"sf-voucher-row\">\n <input type=\"text\" id=\"sfVoucherInput\" class=\"sf-input\" placeholder=\"Nh\u1eadp m\u00e3 voucher (n\u1ebfu c\u00f3)\">\n <button type=\"button\" class=\"sf-voucher-btn\" onclick=\"sfApplyVoucher()\">\u00c1p d\u1ee5ng<\/button>\n <\/div>\n <div class=\"sf-error-text\" id=\"sfVoucherError\"><\/div>\n <div class=\"sf-voucher-info\" id=\"sfVoucherInfo\"><\/div>\n <\/div>\n\n <h4>Ghi ch\u00fa \u0111\u01a1n h\u00e0ng<\/h4>\n <div class=\"sf-field\">\n <textarea\n id=\"sfNote\"\n class=\"sf-textarea\"\n placeholder=\"V\u00ed d\u1ee5: Giao gi\u1edd h\u00e0nh ch\u00ednh, kh\u00f4ng l\u1ea5y n\u01b0\u1edbc ch\u1ea3y t\u1eeb h\u1ea3i s\u1ea3n,...\"\n ><\/textarea>\n <\/div>\n\n <div class=\"sf-co-alert error\" id=\"sfFormError\" style=\"display: none\">\n Vui l\u00f2ng ki\u1ec3m tra l\u1ea1i c\u00e1c tr\u01b0\u1eddng \u0111\u00e1nh d\u1ea5u (*).\n <\/div>\n\n <div class=\"sf-co-button-wrap\">\n <button type=\"submit\" class=\"sf-co-btn\">\n \u0110\u1eb7t h\u00e0ng\n <\/button>\n <div class=\"sf-co-back-link\">\n ho\u1eb7c <a href=\"https:\/\/seafood.anhtu1.id.vn\/index.php\/194-2\/\">quay l\u1ea1i gi\u1ecf h\u00e0ng<\/a> \u0111\u1ec3 ch\u1ec9nh s\u1eeda\n <\/div>\n <\/div>\n <\/form>\n <\/div>\n\n \n <div class=\"sf-co-card\">\n <div class=\"sf-summary-header\">\n <span>\u0110\u01a1n h\u00e0ng c\u1ee7a b\u1ea1n<\/span>\n <span id=\"sfSummaryCount\">0 s\u1ea3n ph\u1ea9m<\/span>\n <\/div>\n\n <div class=\"sf-summary-list\" id=\"sfSummaryList\"><\/div>\n\n <div class=\"sf-summary-row\">\n <span>T\u1ea1m t\u00ednh<\/span>\n <span id=\"sfSubtotal\">0 \u0111<\/span>\n <\/div>\n <div class=\"sf-summary-row\">\n <span>Gi\u1ea3m gi\u00e1<\/span>\n <span id=\"sfDiscount\">0 \u0111<\/span>\n <\/div>\n <div class=\"sf-summary-row\">\n <span>Ph\u00ed giao h\u00e0ng<\/span>\n <span id=\"sfShippingLabel\">\u0110ang t\u00ednh…<\/span>\n <\/div>\n <div class=\"sf-summary-total\">\n T\u1ed5ng thanh to\u00e1n: <span id=\"sfGrandTotal\">0 \u0111<\/span>\n <\/div>\n\n <div class=\"sf-co-notice\">\n * Ph\u00ed giao h\u00e0ng ch\u1ec9 mang t\u00ednh tham kh\u1ea3o. C\u1eeda h\u00e0ng s\u1ebd li\u00ean h\u1ec7 x\u00e1c nh\u1eadn\n l\u1ea1i gi\u00e1 v\u00e0 th\u1eddi gian giao c\u1ee5 th\u1ec3.\n <\/div>\n\n <div class=\"sf-co-success\" id=\"sfSuccessBox\">\n <div class=\"sf-co-success-title\">\u0110\u1eb7t h\u00e0ng th\u00e0nh c\u00f4ng \ud83c\udf89<\/div>\n <div id=\"sfSuccessMsg\"><\/div>\n <small>\n Th\u00f4ng tin \u0111\u01a1n h\u00e0ng ch\u1ec9 \u0111ang \u0111\u01b0\u1ee3c l\u01b0u tr\u00ean tr\u00ecnh duy\u1ec7t (demo). \u0110\u1ec3 d\u00f9ng\n th\u1ef1c t\u1ebf c\u1ea7n k\u1ebft n\u1ed1i v\u1edbi h\u1ec7 th\u1ed1ng backend \/ email.\n <\/small>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<script>\n \/\/ ====== BI\u1ebeN TO\u00c0N C\u1ee4C CHO VOUCHER \/ T\u1ed4NG ======\n let sfActiveVoucher = null;\n window.sfRawSubtotal = 0;\n window.sfShipping = 0;\n window.sfOrderTotal = 0;\n window.sfOrderDiscount = 0;\n\n function sfFormatVND(n) {\n return n.toLocaleString(\"vi-VN\") + \" \u0111\";\n }\n\n \/\/ L\u1ea5y user hi\u1ec7n t\u1ea1i t\u1eeb localStorage (g\u1eafn v\u1edbi trang \u0111\u0103ng nh\u1eadp \u0111\u00e3 l\u00e0m)\n function sfGetCurrentUser(){\n const email = localStorage.getItem('currentUser');\n if(!email) return null;\n let users = [];\n try{\n users = JSON.parse(localStorage.getItem('users')) || [];\n }catch(e){}\n return users.find(u => u.email === email) || null;\n }\n\n \/\/ C\u1eadp nh\u1eadt c\u00e1c d\u00f2ng ti\u1ec1n (t\u1ea1m t\u00ednh, gi\u1ea3m gi\u00e1, ph\u00ed ship, t\u1ed5ng)\n function sfUpdateTotalsWithVoucher(){\n const subtotalEl = document.getElementById(\"sfSubtotal\");\n const shippingEl = document.getElementById(\"sfShippingLabel\");\n const discountEl = document.getElementById(\"sfDiscount\");\n const grandTotalEl = document.getElementById(\"sfGrandTotal\");\n\n const subtotal = window.sfRawSubtotal || 0;\n const shipping = window.sfShipping !== undefined ? window.sfShipping : 0;\n\n let discount = 0;\n if(sfActiveVoucher && subtotal >= (sfActiveVoucher.minTotal || 0)){\n if(sfActiveVoucher.type === 'fixed'){\n discount = sfActiveVoucher.value || 0;\n }else if(sfActiveVoucher.type === 'percent'){\n discount = Math.round(subtotal * (sfActiveVoucher.value || 0) \/ 100);\n }\n }\n if(discount > subtotal) discount = subtotal;\n\n const grand = subtotal - discount + shipping;\n\n subtotalEl.textContent = sfFormatVND(subtotal);\n shippingEl.textContent = shipping === 0 ? \"Mi\u1ec5n ph\u00ed\" : sfFormatVND(shipping);\n discountEl.textContent = discount > 0 ? \"- \" + sfFormatVND(discount) : \"0 \u0111\";\n grandTotalEl.textContent = sfFormatVND(grand);\n\n window.sfOrderTotal = grand;\n window.sfOrderDiscount = discount;\n }\n\n \/\/ \u00c1p d\u1ee5ng voucher\n function sfApplyVoucher(){\n const input = document.getElementById('sfVoucherInput');\n const code = (input.value || '').trim().toUpperCase();\n const errEl = document.getElementById('sfVoucherError');\n const infoEl= document.getElementById('sfVoucherInfo');\n errEl.textContent = '';\n infoEl.textContent = '';\n sfActiveVoucher = null;\n\n if(!code){\n errEl.textContent = 'Vui l\u00f2ng nh\u1eadp m\u00e3 voucher.';\n sfUpdateTotalsWithVoucher();\n return;\n }\n\n const user = sfGetCurrentUser();\n if(!user){\n errEl.textContent = 'B\u1ea1n c\u1ea7n \u0111\u0103ng nh\u1eadp \u0111\u1ec3 d\u00f9ng voucher.';\n sfUpdateTotalsWithVoucher();\n return;\n }\n\n const v = (user.vouchers || []).find(x => x.code.toUpperCase() === code && !x.used);\n if(!v){\n errEl.textContent = 'M\u00e3 voucher kh\u00f4ng t\u1ed3n t\u1ea1i ho\u1eb7c \u0111\u00e3 s\u1eed d\u1ee5ng.';\n sfUpdateTotalsWithVoucher();\n return;\n }\n\n sfActiveVoucher = v;\n infoEl.textContent = v.label || ('\u0110\u00e3 \u00e1p d\u1ee5ng voucher ' + v.code);\n sfUpdateTotalsWithVoucher();\n }\n\n \/* ============= T\u00d3M T\u1eaeT GI\u1ece H\u00c0NG ============= *\/\n function sfLoadCheckoutSummary() {\n let cart = [];\n try {\n cart = JSON.parse(localStorage.getItem(\"cart\")) || [];\n } catch (e) {}\n\n const listEl = document.getElementById(\"sfSummaryList\");\n const countEl = document.getElementById(\"sfSummaryCount\");\n const discountEl = document.getElementById(\"sfDiscount\");\n\n listEl.innerHTML = \"\";\n\n if (cart.length === 0) {\n listEl.innerHTML =\n '<div style=\"padding:10px 0;font-size:14px;color:#64748b;\">Gi\u1ecf h\u00e0ng \u0111ang tr\u1ed1ng. Vui l\u00f2ng quay l\u1ea1i <a href=\"https:\/\/seafood.anhtu1.id.vn\/index.php\/194-2\/\">gi\u1ecf h\u00e0ng<\/a>.<\/div>';\n countEl.textContent = \"0 s\u1ea3n ph\u1ea9m\";\n window.sfRawSubtotal = 0;\n window.sfShipping = 0;\n window.sfOrderDiscount = 0;\n window.sfOrderTotal = 0;\n if(discountEl) discountEl.textContent = \"0 \u0111\";\n sfUpdateTotalsWithVoucher();\n return;\n }\n\n let subtotal = 0;\n let totalQty = 0;\n\n cart.forEach((item) => {\n const sub = item.price * item.qty;\n subtotal += sub;\n totalQty += item.qty || 0;\n\n const row = document.createElement(\"div\");\n row.className = \"sf-summary-item\";\n row.innerHTML = `\n <div class=\"sf-summary-item-name\">\n ${item.name}<span class=\"sf-summary-item-qty\"> x${item.qty}<\/span>\n <\/div>\n <div class=\"sf-summary-item-price\">${sfFormatVND(sub)}<\/div>\n `;\n listEl.appendChild(row);\n });\n\n let shipping = 30000;\n if (subtotal >= 500000 || subtotal === 0) shipping = 0;\n\n countEl.textContent = totalQty + \" s\u1ea3n ph\u1ea9m\";\n window.sfRawSubtotal = subtotal;\n window.sfShipping = shipping;\n\n \/\/ c\u1eadp nh\u1eadt c\u00e1c d\u00f2ng ti\u1ec1n (t\u1ea1m t\u00ednh, gi\u1ea3m, ship, t\u1ed5ng)\n sfUpdateTotalsWithVoucher();\n }\n\n \/* ============= VALIDATE FORM ============= *\/\n function sfValidateCheckoutForm() {\n let valid = true;\n\n const name = document.getElementById(\"sfFullName\").value.trim();\n const phone = document.getElementById(\"sfPhone\").value.trim();\n const email = document.getElementById(\"sfEmail\").value.trim();\n const address = document.getElementById(\"sfAddress\").value.trim();\n\n const errName = document.getElementById(\"errName\");\n const errPhone = document.getElementById(\"errPhone\");\n const errEmail = document.getElementById(\"errEmail\");\n const errAddress = document.getElementById(\"errAddress\");\n const formError = document.getElementById(\"sfFormError\");\n\n errName.textContent = \"\";\n errPhone.textContent = \"\";\n errEmail.textContent = \"\";\n errAddress.textContent = \"\";\n formError.style.display = \"none\";\n\n if (!name) {\n errName.textContent = \"Vui l\u00f2ng nh\u1eadp h\u1ecd t\u00ean.\";\n valid = false;\n }\n if (!phone) {\n errPhone.textContent = \"Vui l\u00f2ng nh\u1eadp s\u1ed1 \u0111i\u1ec7n tho\u1ea1i.\";\n valid = false;\n } else if (!\/^[0-9\\+\\-\\s]{8,15}$\/.test(phone)) {\n errPhone.textContent = \"S\u1ed1 \u0111i\u1ec7n tho\u1ea1i kh\u00f4ng h\u1ee3p l\u1ec7.\";\n valid = false;\n }\n if (email && !\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(email)) {\n errEmail.textContent = \"Email kh\u00f4ng h\u1ee3p l\u1ec7.\";\n valid = false;\n }\n if (!address) {\n errAddress.textContent = \"Vui l\u00f2ng nh\u1eadp \u0111\u1ecba ch\u1ec9 giao h\u00e0ng.\";\n valid = false;\n }\n\n if (!valid) {\n formError.style.display = \"block\";\n }\n return valid;\n }\n\n \/* ============= BANK BOX + QR + COUNTDOWN ============= *\/\n let sfBankTimer = null;\n let sfBankExpireAt = null;\n\n function sfGenerateBankCode() {\n return \"SF\" + Date.now().toString().slice(-6);\n }\n\n function sfStartBankCountdown() {\n const box = document.getElementById(\"sfBankBox\");\n const codeEl = document.getElementById(\"sfBankCode\");\n const countdownEl = document.getElementById(\"sfBankCountdown\");\n const qrImg = document.getElementById(\"sfBankQr\");\n\n if (!box) return;\n\n box.style.display = \"block\";\n\n const code = sfGenerateBankCode();\n codeEl.textContent = code;\n\n const amount = window.sfOrderTotal || 0;\n\n const bankId = \"MBBANK\"; \/\/ \ud83d\udd34 \u0110\u1ed4I TH\u00c0NH M\u00c3 NG\u00c2N H\u00c0NG\n const accountNo = \"913141516\"; \/\/ \ud83d\udd34 \u0110\u1ed4I TH\u00c0NH S\u1ed0 TK\n const accountName = \"SEAFOOD 3 ANH EM\"; \/\/ \ud83d\udd34 \u0110\u1ed4I T\u00caN CH\u1ee6 TK\n\n const qrUrl =\n \"https:\/\/img.vietqr.io\/image\/\" +\n bankId + \"-\" + accountNo +\n \"-compact.png?amount=\" + amount +\n \"&addInfo=\" + encodeURIComponent(code) +\n \"&accountName=\" + encodeURIComponent(accountName);\n\n if (qrImg) {\n qrImg.src = qrUrl;\n }\n\n sfBankExpireAt = Date.now() + 5 * 60 * 1000;\n\n if (sfBankTimer) clearInterval(sfBankTimer);\n\n sfBankTimer = setInterval(() => {\n const remain = sfBankExpireAt - Date.now();\n if (remain <= 0) {\n clearInterval(sfBankTimer);\n sfBankTimer = null;\n location.reload();\n return;\n }\n const sec = Math.floor(remain \/ 1000);\n const m = String(Math.floor(sec \/ 60)).padStart(2, \"0\");\n const s = String(sec % 60).padStart(2, \"0\");\n countdownEl.textContent = `${m}:${s}`;\n }, 1000);\n }\n\n function sfHideBankBox() {\n const box = document.getElementById(\"sfBankBox\");\n if (box) box.style.display = \"none\";\n if (sfBankTimer) {\n clearInterval(sfBankTimer);\n sfBankTimer = null;\n }\n }\n\n document\n .querySelectorAll('input[name=\"sfPaymentMethod\"]')\n .forEach((radio) => {\n radio.addEventListener(\"change\", function () {\n if (this.value === \"bank\") {\n sfStartBankCountdown();\n } else {\n sfHideBankBox();\n }\n });\n });\n\n \/* ============= SUBMIT \u0110\u01a0N ============= *\/\n document\n .getElementById(\"sfCheckoutForm\")\n .addEventListener(\"submit\", function (e) {\n e.preventDefault();\n\n let cart = [];\n try {\n cart = JSON.parse(localStorage.getItem(\"cart\")) || [];\n } catch (err) {}\n if (cart.length === 0) {\n alert(\"Gi\u1ecf h\u00e0ng \u0111ang tr\u1ed1ng. Vui l\u00f2ng quay l\u1ea1i gi\u1ecf h\u00e0ng.\");\n return;\n }\n\n if (!sfValidateCheckoutForm()) return;\n\n const name = document.getElementById(\"sfFullName\").value.trim();\n const phone = document.getElementById(\"sfPhone\").value.trim();\n const email = document.getElementById(\"sfEmail\").value.trim();\n const address = document.getElementById(\"sfAddress\").value.trim();\n const note = document.getElementById(\"sfNote\").value.trim();\n const payment = document.querySelector(\n 'input[name=\"sfPaymentMethod\"]:checked'\n ).value;\n\n const subtotal = window.sfRawSubtotal || 0;\n const shipping = window.sfShipping !== undefined ? window.sfShipping : 0;\n const discount = window.sfOrderDiscount || 0;\n const total = subtotal - discount + shipping;\n\n const orderId = \"HD\" + Date.now().toString().slice(-8);\n\n const orderData = {\n id: orderId,\n createdAt: new Date().toISOString(),\n customer: { name, phone, email, address, note },\n paymentMethod: payment,\n subtotal,\n shipping,\n discount,\n total,\n usedVoucher: sfActiveVoucher ? sfActiveVoucher.code : null,\n items: cart,\n };\n\n let orders = [];\n try {\n orders = JSON.parse(localStorage.getItem(\"orders\")) || [];\n } catch (err) {}\n orders.push(orderData);\n localStorage.setItem(\"orders\", JSON.stringify(orders));\n\n \/\/ n\u1ebfu c\u00f3 d\u00f9ng voucher \u2192 \u0111\u00e1nh d\u1ea5u used = true\n if(sfActiveVoucher){\n const emailCurrent = localStorage.getItem('currentUser');\n if(emailCurrent){\n let users = [];\n try{\n users = JSON.parse(localStorage.getItem('users')) || [];\n }catch(e){}\n const u = users.find(x => x.email === emailCurrent);\n if(u && Array.isArray(u.vouchers)){\n const v = u.vouchers.find(x => x.code === sfActiveVoucher.code);\n if(v) v.used = true;\n localStorage.setItem('users', JSON.stringify(users));\n }\n }\n }\n\n localStorage.removeItem(\"cart\");\n sfLoadCheckoutSummary();\n\n const successBox = document.getElementById(\"sfSuccessBox\");\n const msgEl = document.getElementById(\"sfSuccessMsg\");\n successBox.style.display = \"block\";\n\n let extra = \"\";\n if (payment === \"bank\") {\n extra =\n \"<br>Vui l\u00f2ng chuy\u1ec3n kho\u1ea3n theo th\u00f4ng tin \u1edf ph\u1ea7n 'Chuy\u1ec3n kho\u1ea3n ng\u00e2n h\u00e0ng'.\";\n }\n\n msgEl.innerHTML = `C\u1ea3m \u01a1n <strong>${name}<\/strong> \u0111\u00e3 \u0111\u1eb7t h\u00e0ng.<br>M\u00e3 \u0111\u01a1n c\u1ee7a b\u1ea1n l\u00e0 <strong>${orderId}<\/strong> v\u1edbi t\u1ed5ng ti\u1ec1n <strong>${sfFormatVND(\n total\n )}<\/strong>.${extra}`;\n });\n\n \/\/ T\u1ef1 fill th\u00f4ng tin t\u1eeb user \u0111ang \u0111\u0103ng nh\u1eadp (n\u1ebfu c\u00f3)\n function sfPrefillCustomerFromUser(){\n const u = sfGetCurrentUser();\n if(!u) return;\n const nameInput = document.getElementById(\"sfFullName\");\n const emailInput= document.getElementById(\"sfEmail\");\n const phoneInput= document.getElementById(\"sfPhone\");\n\n if(nameInput && !nameInput.value) nameInput.value = u.name || \"\";\n if(emailInput && !emailInput.value)emailInput.value = u.email || \"\";\n if(phoneInput && !phoneInput.value)phoneInput.value = u.phone || \"\";\n }\n\n \/\/ Kh\u1edfi \u0111\u1ed9ng\n sfLoadCheckoutSummary();\n sfPrefillCustomerFromUser();\n\n const defaultPay = document.querySelector(\n 'input[name=\"sfPaymentMethod\"]:checked'\n );\n if (defaultPay && defaultPay.value === \"bank\") {\n sfStartBankCountdown();\n }\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Thanh to\u00e1n \u2013 Seafood Thanh to\u00e1n Vui l\u00f2ng ki\u1ec3m tra l\u1ea1i th\u00f4ng tin v\u00e0 \u0111\u01a1n h\u00e0ng tr\u01b0\u1edbc khi \u0111\u1eb7t. Th\u00f4ng tin kh\u00e1ch h\u00e0ng H\u1ecd v\u00e0 t\u00ean * S\u1ed1 \u0111i\u1ec7n tho\u1ea1i * Email \u0110\u1ecba ch\u1ec9 giao h\u00e0ng * Ph\u01b0\u01a1ng th\u1ee9c thanh to\u00e1n Thanh to\u00e1n khi nh\u1eadn h\u00e0ng (COD) Chuy\u1ec3n kho\u1ea3n ng\u00e2n h\u00e0ng Th\u00f4ng tin chuy\u1ec3n kho\u1ea3n: […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-200","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/pages\/200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/comments?post=200"}],"version-history":[{"count":5,"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/pages\/200\/revisions"}],"predecessor-version":[{"id":328,"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/pages\/200\/revisions\/328"}],"wp:attachment":[{"href":"https:\/\/seafood.anhtu1.id.vn\/index.php\/wp-json\/wp\/v2\/media?parent=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}