Kalkulator Kad Perubatan | Urus Wang Mudah

Urus Wang Mudah

Berapa Kos Kad Perubatan Kita?

2 minit je — kita boleh tahu anggaran caruman bulanan kad perubatan. Percuma, takde komitmen.

Saya seorang…

Umur tahun depan

Pilih tahap perlindungan

Nak naikkan had tahunan?

Naikkan had tahunan

Had boleh naik sehingga RM825,000 🚀

⚠️ Booster ni kena tambah masa mula-mula apply je. Lepas tu tak boleh dah.

Sanggup tanggung sendiri?

ℹ️ Kalau masuk hospital kerajaan, deductible ni tak dikenakan.

Dikira oleh Urus Wang Mudah (UWM). Ini anggaran je — caruman sebenar bergantung kepada kesihatan, pekerjaan & keputusan underwriting. Nak faham lebih? Jom sembang.

Urus Wang Mudah

Panduan Pemasangan Kalkulator MediValue

Ikut langkah demi langkah — siap dalam 10-15 minit!

Panduan ini menerangkan cara memasang Kalkulator Kad Perubatan MediValue (Individual) ke website WordPress anda. Sebelum mula, pastikan anda ada:

☐ Fail kalkulator: medivalue-calculator-blue.html

☐ Code Apps Script (disertakan dalam Lampiran 1 di bawah)

☐ Akses admin WordPress website anda

☐ Google account (untuk Google Sheet)

☐ Nombor WhatsApp anda

Bahagian A: Setup Google Sheet

Google Sheet digunakan untuk simpan data leads yang masuk dari kalkulator.

1Buat Google Sheet Baru

Pergi ke sheets.google.com dan buat spreadsheet baru. Namakan “MediValue Leads” atau nama yang sesuai.

2Tambah Header (Row 1)

Di Row 1, masukkan header berikut dalam setiap column:

Col	Header	Col	Header
A	Timestamp	I	Deductible
B	Nama	J	Caruman (RM)
C	Pekerjaan	K	Tinggi
D	WhatsApp	L	Berat
E	Umur	M	BMI
F	Jantina	N	BMI Kategori
G	Pelan	O	Mod Bayaran
H	Booster

3Buka Apps Script

Di Google Sheet, pergi ke Extensions → Apps Script. Ini akan buka editor baru dalam tab baru.

4Paste Code Apps Script

Delete semua code sedia ada dalam editor. Pergi ke Lampiran 1 di bawah, copy code Apps Script, dan paste ke dalam editor. Klik butang Save (💾).

5Deploy sebagai Web App

Klik Deploy → New deployment. Kemudian set seperti berikut:

Type: Web app

Execute as: Me

Who has access: Anyone

Klik Deploy.

⚠️ PENTING

Pastikan pilih “New deployment” (bukan “Manage deployments”). Setiap kali update code, kena buat New deployment baru.

6Copy URL Web App

Selepas deploy, Google akan tunjukkan URL. Copy URL tersebut dan simpan di tempat selamat. Anda perlukan ia di Bahagian B.

💡 URL bermula dengan: https://script.google.com/macros/s/...

Bahagian B: Update Fail Kalkulator

Sebelum upload ke WordPress, anda perlu update 2 benda dalam fail kalkulator.

7Buka Fail HTML

Buka fail medivalue-calculator-blue.html menggunakan text editor (Notepad, VS Code, atau mana-mana text editor). Jangan guna Microsoft Word.

💡 Windows: Klik kanan fail → Open with → Notepad

8Update Nombor WhatsApp

Guna Ctrl+H (Find & Replace) untuk cari dan tukar semua 601XXXXXXXX kepada nombor WhatsApp anda.

❌ Sebelum:

601XXXXXXXX

✅ Selepas:

60123456789

Format nombor: 60 + nombor tanpa 0 depan. Contoh: 0123456789 → 60123456789

⚠️ Ada 2 tempat nombor WhatsApp

Nombor WhatsApp ada di 2 tempat: (1) butang WhatsApp utama, dan (2) link WhatsApp untuk anak bawah 6 tahun. Guna Ctrl+H → Replace All untuk tukar semua sekali gus.

9Update Google Sheet URL

Cari text SHEET_URL dalam fail dan masukkan URL Web App dari Langkah 6.

❌ Sebelum:

var SHEET_URL = "";

✅ Selepas:

var SHEET_URL = "https://script.google.com/macros/s/ABC.../exec";

10Save Fail

Save fail HTML tersebut (Ctrl+S). Pastikan extension kekal .html (bukan .txt).

Bahagian C: Pasang di WordPress

Sekarang kita masukkan kalkulator ke dalam website WordPress.

11Login WordPress

12Buat Page Baru

Pergi ke Pages → Add New. Namakan page tersebut (contoh: “Kalkulator Kad Perubatan”).

13Tambah Custom HTML Block

Dalam editor, klik butang “+” untuk tambah block baru. Cari dan pilih “Custom HTML”.

ℹ️ Guna Page Builder Lain?

Elementor: Tambah widget “HTML” atau “Custom Code”
Divi: Tambah module “Code”
Konsepnya sama — cari widget yang terima raw HTML code.

14Paste Code Kalkulator

Buka fail medivalue-calculator-blue.html yang sudah di-update. Tekan Ctrl+A (select all) → Ctrl+C (copy). Kemudian Ctrl+V (paste) ke dalam Custom HTML block di WordPress.

15Preview & Publish

Klik Preview untuk pastikan kalkulator dipaparkan dengan betul. Kalau semua okay, klik Publish.

Bahagian D: Testing

Pastikan semua berfungsi sebelum share link kepada leads.

16Test Kalkulator

Buka page kalkulator di browser. Isi semua field: jantina, umur, plan, contact details. Klik “Tunjukkan Harga” dan pastikan result muncul.

17Test WhatsApp Button

Klik butang “Jom Sembang di WhatsApp”. Pastikan ia buka WhatsApp dengan nombor anda dan mesej yang betul.

18Test Google Sheet

Semak Google Sheet anda. Pastikan data dari form test sudah masuk dengan betul di semua column (A-O).

19Test Mobile

Buka page di telefon. Kalkulator ini responsive, tapi pastikan ia display dengan baik di screen telefon anda.

Troubleshooting

Masalah	Penyelesaian
Kalkulator tak muncul	Pastikan guna Custom HTML block (bukan Paragraph). Pastikan semua code di-paste termasuk <style> dan <script>.
Style pecah / tak cantik	Theme WordPress mungkin ada CSS conflict. Cuba guna page template tanpa sidebar (Full Width).
Data tak masuk Sheet	Pastikan URL Web App betul dan bermula dengan `https://script.google.com/`. Pastikan deploy sebagai “Anyone” access.
WhatsApp tak buka	Nombor mesti bermula dengan 60 (bukan 0). Contoh: 60123456789, bukan 0123456789.
Error “Authorization”	Pergi ke Apps Script → Deploy → New deployment (bukan Manage). Deploy semula dan copy URL baru.
Sheet kosong	Buka Apps Script → Executions (sidebar kiri). Tengok error log. Biasanya header column tak matching dengan code.

Lampiran 1: Code Google Apps Script

Copy code di bawah dan paste ke dalam Apps Script editor (Langkah 4). Code ini menerima data dari kalkulator dan simpan ke Google Sheet.

Klik dalam box di bawah → Ctrl+A (select all) → Ctrl+C (copy)

function doPost(e) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var data = JSON.parse(e.postData.contents);

  sheet.appendRow([
    data.timestamp,       // A – Timestamp
    data.nama,            // B – Nama
    data.pekerjaan,       // C – Pekerjaan
    data.whatsapp,        // D – WhatsApp
    data.jantina,         // E – Jantina
    data.umur,            // F – Umur
    data.pelan,           // G – Pelan
    data.booster,         // H – Booster
    data.deductible,      // I – Deductible
    data.anggaran,        // J – Caruman (RM)
    data.tinggi,          // K – Tinggi
    data.berat,           // L – Berat
    data.bmi,             // M – BMI
    data.bmi_kategori,    // N – BMI Kategori
    data.mod_bayaran      // O – Mod Bayaran
  ]);

  return ContentService
    .createTextOutput(JSON.stringify({ status: “ok” }))
    .setMimeType(ContentService.MimeType.JSON);
}

Lampiran 2: Code Kalkulator (HTML)

Code kalkulator ini perlu di-paste ke dalam Custom HTML block di WordPress (Langkah 14). Oleh kerana code ini sangat panjang (~1,300 baris), ikut arahan di bawah:

Klik dalam box di bawah → Ctrl+A (select all) → Ctrl+C (copy)

<!DOCTYPE html>
<html lang="ms">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Kalkulator Kad Perubatan | Urus Wang Mudah</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
<style>
:root {
  –blue: #004AAD;
  –blue-light: #EEF3FB;
  –blue-mid: #d0dff5;
  –blue-wa: #25d366;
  –border: #e2e5ea;
  –text: #1a1a1a;
  –text-muted: #6b7280;
  –radius: 10px;
  –radius-pill: 50px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif !important;
  background: #f5f7fa !important;
  color: var(–text) !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── Scoped WP reset ── */
.gq-wrap {
  font-family: 'Inter', sans-serif !important;
  color: #1a1a1a !important;
  line-height: 1.5 !important;
  -webkit-font-smoothing: antialiased !important;
  font-size: 14px !important;
}
.gq-wrap *, .gq-wrap *::before, .gq-wrap *::after {
  box-sizing: border-box !important;
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}
.gq-wrap p {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
.gq-wrap h1, .gq-wrap h2, .gq-wrap h3, .gq-wrap h4 {
  margin: 0 !important;
  padding: 0 !important;
}
.gq-wrap br { display: none !important; }
.gq-wrap button {
  font-family: 'Inter', sans-serif !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.gq-wrap input {
  font-family: 'Inter', sans-serif !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.gq-wrap *:focus { outline: none !important; box-shadow: none !important; }
.gq-wrap img { max-width: 100% !important; height: auto !important; border: 0 !important; }
.gq-wrap a { text-decoration: none !important; color: inherit !important; }

/* ── Outer ── */
.gq-outer {
  max-width: 520px !important;
  margin: 0 auto !important;
  padding: 12px !important;
}

/* ── Hero card ── */
.gq-hero {
  background: var(–blue) !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 16px 24px 16px !important;
  text-align: center !important;
  color: #fff !important;
}
.gq-hero-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.75) !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  border: 1.5px solid rgba(255,255,255,.25) !important;
  border-radius: 4px !important;
  padding: 3px 10px !important;
  margin-bottom: 4px !important;
}
.gq-hero-title {
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin-top: 0 !important;
  letter-spacing: -.02em !important;
  margin-bottom: 6px !important;
  color: #fff !important;
}
.gq-hero-sub {
  font-size: 13px !important;
  color: rgba(255,255,255,.6) !important;
  line-height: 1.5 !important;
}

/* ── Form card (white) ── */
.gq-card {
  background: #fff !important;
  border-radius: 0 0 16px 16px !important;
  border: 1.5px solid var(–border) !important;
  border-top: none !important;
  padding: 20px 20px 24px !important;
}

/* ── Section label ── */
.gq-label {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(–blue) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  margin-bottom: 8px !important;
}

/* ── Field wrapper ── */
.gq-field { margin-bottom: 14px !important; }

/* ── Text input ── */
.gq-input {
  display: block !important;
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid var(–border) !important;
  border-radius: var(–radius) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(–text) !important;
  background: #fff !important;
  transition: border-color .2s !important;
  font-family: inherit !important;
}
.gq-input::placeholder { color: #adb5bd !important; font-weight: 400 !important; }
.gq-input:focus { border-color: var(–blue) !important; }
.gq-err { color: #dc2626 !important; font-size: 12px !important; margin-top: 5px !important; font-weight: 500 !important; }

/* ── Option buttons ── */
.gq-opt-row {
  display: flex !important;
  gap: 10px !important;
}
.gq-opt {
  flex: 1 1 0% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 10px !important;
  border: 1.5px solid var(–border) !important;
  border-radius: var(–radius) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  color: var(–text-muted) !important;
  background: #fff !important;
  transition: all .15s !important;
  cursor: pointer !important;
  text-align: center !important;
}
.gq-opt svg { flex-shrink: 0 !important; transition: stroke .15s !important; }
.gq-opt:hover:not(.active) {
  border-color: var(–blue) !important;
  color: var(–blue) !important;
}
.gq-opt.active {
  border-color: var(–blue) !important;
  border-width: 2px !important;
  color: var(–blue) !important;
  background: var(–blue-light) !important;
}
.gq-opt.active svg { stroke: var(–blue) !important; }

/* ── Plan cards ── */
.gq-plan-row {
  display: flex !important;
  gap: 10px !important;
}
.gq-plan {
  flex: 1 1 0% !important;
  display: block !important;
  padding: 10px 10px !important;
  border: 1.5px solid var(–border) !important;
  border-radius: var(–radius) !important;
  text-align: left !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: all .15s !important;
}
.gq-plan:hover:not(.active) { border-color: var(–blue) !important; }
.gq-plan.active {
  border-color: var(–blue) !important;
  border-width: 2px !important;
  background: var(–blue-light) !important;
}
.gq-plan-name {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(–text) !important;
  margin-bottom: 7px !important;
}
.gq-plan.active .gq-plan-name { color: var(–blue) !important; }
.gq-plan-rb {
  display: block !important;
  font-size: 11px !important;
  color: var(–text-muted) !important;
  margin-bottom: 1px !important;
  font-weight: 400 !important;
}
.gq-plan-limit {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(–text) !important;
}
.gq-plan.active .gq-plan-limit { color: var(–blue) !important; }

/* ── Toggle ── */
.gq-toggle-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border: 1.5px solid var(–border) !important;
  border-radius: var(–radius) !important;
  background: #fff !important;
}
.gq-toggle-info { flex: 1 !important; min-width: 0 !important; }
.gq-toggle-title { font-size: 13px !important; font-weight: 600 !important; color: var(–text) !important; line-height: 1.3 !important; }
.gq-toggle-sub   { font-size: 11px !important; color: var(–text-muted) !important; margin-top: 2px !important; line-height: 1.3 !important; }
.gq-toggle-warning { font-size: 11px !important; color: #92400e !important; background: #fef3c7 !important; border: 1px solid #fde68a !important; border-radius: 8px !important; padding: 8px 12px !important; margin-top: 8px !important; line-height: 1.4 !important; font-weight: 500 !important; }
.gq-toggle-btn {
  width: 44px !important;
  min-width: 44px !important;
  height: 24px !important;
  border-radius: 12px !important;
  border: none !important;
  background: #d1d5db !important;
  position: relative !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background .2s !important;
  display: block !important;
}
.gq-toggle-btn.on { background: var(–blue) !important; }
.gq-knob {
  width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #fff !important;
  position: absolute !important; top: 3px !important; left: 3px !important;
  transition: left .2s !important; box-shadow: 0 1px 3px rgba(0,0,0,.25) !important;
}
.gq-toggle-btn.on .gq-knob { left: 23px !important; }

/* ── Divider ── */
.gq-divider { height: 1px !important; background: #f0f0f0 !important; margin: 4px 0 14px !important; }

/* ── Gate box ── */
.gq-gate {
  background: var(–blue-light) !important;
  border: 1.5px solid var(–blue-mid) !important;
  border-radius: var(–radius) !important;
  padding: 18px !important;
  margin-top: 10px !important;
}
.gq-gate-title { font-size: 15px !important; font-weight: 700 !important; color: var(–text) !important; margin-bottom: 8px !important; }
.gq-gate-sub   { font-size: 12px !important; color: var(–text-muted) !important; margin-bottom: 40px !important; line-height: 1.4 !important; }
.gq-consent-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  font-size: 12px !important;
  color: var(–text) !important;
  line-height: 1.5 !important;
  cursor: pointer !important;
  background: #dbeafe !important;
  border: 2px solid var(–blue) !important;
  border-radius: 10px !important;
  padding: 12px !important;
}
.gq-consent-row input[type=checkbox] {
  -webkit-appearance: checkbox !important;
  appearance: checkbox !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
  accent-color: var(–blue) !important;
  cursor: pointer !important;
  border: 2px solid #aaa !important;
  border-radius: 4px !important;
}
.gq-phone-err { color: #dc2626 !important; font-size: 11px !important; margin-bottom: 6px !important; font-weight: 500 !important; }

/* ── Lock placeholder ── */
.gq-lock {
  text-align: center !important;
  padding: 18px 16px !important;
  background: var(–blue-light) !important;
  border: 1.5px solid var(–blue-mid) !important;
  border-radius: var(–radius) !important;
  margin-top: 6px !important;
}
.gq-lock-icon { font-size: 24px !important; margin-bottom: 6px !important; }
.gq-lock-text { font-size: 13px !important; color: var(–text-muted) !important; line-height: 1.5 !important; }

/* ── CTA buttons ── */
.gq-cta {
  display: block !important;
  width: 100% !important;
  padding: 14px !important;
  border-radius: var(–radius-pill) !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: opacity .15s, background .15s !important;
  font-family: inherit !important;
  background: #d1d5db !important;
  color: #9ca3af !important;
}
.gq-cta.ready {
  background: var(–blue) !important;
  color: #fff !important;
}
.gq-cta:disabled { cursor: not-allowed !important; }
.gq-cta.ready:hover { opacity: .88 !important; }

.gq-wa-btn {
  display: block !important;
  width: 100% !important;
  padding: 14px !important;
  border-radius: var(–radius-pill) !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  text-align: center !important;
  background: #25D366 !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: opacity .15s !important;
  font-family: inherit !important;
  margin-top: 4px !important;
}
.gq-wa-btn:hover { opacity: .88 !important; }

/* ── Result panel ── */
.gq-result-header {
  text-align: center !important;
  padding: 14px 12px 12px !important;
  background: var(–blue-light) !important;
  border: 1.5px solid var(–blue-mid) !important;
  border-radius: var(–radius) !important;
  margin-bottom: 14px !important;
}
.gq-result-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(–blue) !important;
  margin-bottom: 4px !important;
}
.gq-result-amt {
  font-size: 52px !important;
  font-weight: 800 !important;
  color: var(–blue) !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
}
.gq-result-sub {
  font-size: 12px !important;
  color: var(–text-muted) !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
}
.gq-daily-pill {
  display: inline-block !important;
  background: var(–blue) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 5px 14px !important;
  margin-top: 8px !important;
}

/* ── Feature list ── */
.gq-features { margin-bottom: 12px !important; }
.gq-feature-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}
.gq-feature-row:last-child { border-bottom: none !important; }
.gq-feature-icon {
  width: 28px !important; height: 28px !important; flex-shrink: 0 !important;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px !important; background: var(–blue-light) !important;
  font-size: 14px !important;
}
.gq-feature-text { flex: 1 !important; }
.gq-feature-label { font-size: 13px !important; font-weight: 400 !important; color: var(–text) !important; }
.gq-feature-val   { font-size: 14px !important; font-weight: 700 !important; color: var(–blue) !important; }

/* ── Info boxes ── */
.gq-info-box {
  border-radius: 8px !important;
  padding: 8px 12px !important;
  margin: 10px 0 !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
}
.gq-info-tax {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}
.gq-info-waiting {
  background: #fefce8 !important;
  border: 1px solid #fde68a !important;
  color: #854d0e !important;
}
.gq-info-deductible {
  font-size: 11px !important;
  color: #6b7280 !important;
  margin-top: 6px !important;
}

/* ── Upsell ── */
.gq-upsell {
  background: #fffbea !important;
  border: 1.5px solid #f5d84e !important;
  border-radius: var(–radius) !important;
  padding: 12px 14px !important;
  margin-bottom: 12px !important;
  margin-top: 4px !important;
}
.gq-upsell-badge {
  display: inline-block !important;
  background: #f5d84e !important; color: #5a6000 !important;
  font-size: 9px !important; font-weight: 800 !important;
  letter-spacing: .1em !important; text-transform: uppercase !important;
  border-radius: 4px !important; padding: 2px 8px !important; margin-bottom: 6px !important;
}
.gq-upsell-h { font-size: 13px !important; font-weight: 700 !important; color: var(–text) !important; margin-bottom: 5px !important; }
.gq-upsell-p { font-size: 12px !important; color: var(–text-muted) !important; font-weight: 400 !important; line-height: 1.45 !important; margin-bottom: 8px !important; }
.gq-upsell-row { display: flex !important; gap: 8px !important; align-items: center !important; }
.gq-upsell-col {
  flex: 1 !important; background: #fff !important; border-radius: 8px !important; padding: 10px 8px !important;
  border: 1.5px solid #f0e080 !important; text-align: center !important;
}
.gq-upsell-col.hi { border-color: var(–blue) !important; background: var(–blue) !important; }
.gq-upsell-col-n { font-size: 9px !important; font-weight: 700 !important; color: #aaa !important; text-transform: uppercase !important; margin-bottom: 3px !important; letter-spacing: .08em !important; }
.gq-upsell-col.hi .gq-upsell-col-n { color: rgba(255,255,255,.6) !important; }
.gq-upsell-col-v { font-size: 18px !important; font-weight: 800 !important; color: var(–text) !important; line-height: 1 !important; }
.gq-upsell-col.hi .gq-upsell-col-v { color: #fff !important; }
.gq-upsell-col-s { font-size: 10px !important; color: #aaa !important; margin-top: 2px !important; }
.gq-upsell-col.hi .gq-upsell-col-s { color: rgba(255,255,255,.5) !important; }
.gq-upsell-diff { font-size: 11px !important; color: #5a6000 !important; margin-top: 8px !important; font-weight: 600 !important; text-align: center !important; }
.gq-upgrade-compare { margin: 12px 0 16px !important; border-radius: 10px !important; overflow: hidden !important; border: 1.5px solid #e2e5ea !important; display: table !important; width: 100% !important; }
.gq-uc-row { display: table-row !important; font-size: 12px !important; }
.gq-uc-row:first-child { background: #fff !important; }
.gq-uc-row:last-child { background: #f8f9fa !important; }
.gq-uc-row:first-child > * { border-bottom: 1px solid #eee !important; }
.gq-uc-label, .gq-uc-from, .gq-uc-arrow, .gq-uc-to { display: table-cell !important; padding: 10px 0 !important; vertical-align: middle !important; }
.gq-uc-label { color: #666 !important; font-weight: 700 !important; font-size: 11px !important; white-space: nowrap !important; padding-left: 14px !important; width: 40% !important; }
.gq-uc-from { color: #999 !important; text-decoration: line-through !important; font-size: 12px !important; text-align: right !important; }
.gq-uc-arrow { color: var(–blue) !important; font-weight: 800 !important; font-size: 12px !important; text-align: center !important; padding: 10px 8px !important; }
.gq-uc-to { color: var(–blue) !important; font-weight: 800 !important; font-size: 14px !important; padding-right: 14px !important; }
.gq-arrow { color: #ccc !important; font-size: 18px !important; flex-shrink: 0 !important; }
.gq-upsell-col.hi { cursor: pointer !important; transition: transform .15s, box-shadow .15s !important; position: relative !important; }
.gq-upsell-col.hi:hover { transform: scale(1.05) !important; box-shadow: 0 6px 20px rgba(0,74,173,.35) !important; }
.gq-upsell-col.hi::after { content: "👆 Tap untuk upgrade"; display: block; font-size: 9px; color: rgba(255,255,255,.8); margin-top: 4px; font-weight: 600; letter-spacing: .3px; }
@keyframes gqPulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(0,74,173,.5) !important; } 70%{ box-shadow: 0 0 0 10px rgba(0,74,173,0) !important; } }
.gq-upgrade-btn {
  display: block !important;
  width: 100% !important;
  padding: 16px !important;
  border-radius: var(–radius-pill) !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  text-align: center !important;
  background: linear-gradient(135deg, #004AAD 0%, #0066E0 100%) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: opacity .15s, transform .15s !important;
  font-family: inherit !important;
  margin-top: 14px !important;
  animation: gqPulse 2s infinite !important;
  letter-spacing: .3px !important;
}
.gq-upgrade-btn:hover { opacity: .92 !important; transform: scale(1.03) !important; animation: none !important; }

/* ── Upgrade celebration ── */
.gq-upgraded {
  background: linear-gradient(135deg, #f0f7f4 0%, #e8f5ee 100%) !important;
  border: 1.5px solid #86efac !important;
  border-radius: var(–radius) !important;
  padding: 16px 16px 14px !important;
  margin-bottom: 12px !important;
  margin-top: 4px !important;
  text-align: center !important;
}
.gq-upgraded-icon { font-size: 32px !important; margin-bottom: 6px !important; }
.gq-upgraded-h {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #166534 !important;
  margin-bottom: 6px !important;
}
.gq-upgraded-p {
  font-size: 12px !important;
  color: #3f6b52 !important;
  line-height: 1.6 !important;
  margin-bottom: 0 !important;
}
.gq-upgraded-tag {
  display: inline-block !important;
  background: #166534 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  padding: 3px 10px !important;
  margin-bottom: 8px !important;
}

/* ── Thanks ── */
.gq-thanks { text-align: center !important; padding: 8px 0 4px !important; }
.gq-thanks-h { font-size: 15px !important; font-weight: 700 !important; color: var(–text) !important; margin-bottom: 4px !important; }
.gq-thanks-p { font-size: 12px !important; color: var(–text-muted) !important; line-height: 1.6 !important; }

/* ── Reset link ── */
.gq-reset {
  display: block !important;
  background: none !important;
  border: none !important;
  font-size: 12px !important;
  color: var(–text-muted) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  text-align: center !important;
  margin-top: 14px !important;
  width: 100% !important;
  font-family: inherit !important;
  padding: 0 !important;
}

/* ── Disclaimer ── */
.gq-disclaimer {
  font-size: 10px !important; color: #bbb !important; margin-top: 16px !important; line-height: 1.7 !important; text-align: center !important;
}

/* ── Result card ── */
.gq-side-card {
  background: #fff !important;
  border: 1.5px solid var(–border) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  margin-top: 12px !important;
}

/* ── Inline row (height + weight) ── */
.gq-inline-row {
  display: flex !important;
  gap: 10px !important;
}
.gq-inline-row .gq-field { flex: 1 !important; margin-bottom: 10px !important; }
.gq-bmi-tag {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 3px 10px !important;
  margin-top: 6px !important;
}
.gq-bmi-tag.normal { background: #f0fdf4 !important; color: #166534 !important; }
.gq-bmi-tag.overweight { background: #fefce8 !important; color: #854d0e !important; }
.gq-bmi-tag.obese { background: #fef2f2 !important; color: #991b1b !important; }

.gq-info-bmi {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  margin: 12px 0 !important;
}
.gq-bmi-alert-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
}
.gq-bmi-alert-icon {
  font-size: 20px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.gq-bmi-alert-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #991b1b !important;
}
.gq-bmi-alert-body {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: #7f1d1d !important;
}
.gq-bmi-alert-body strong {
  color: #991b1b !important;
}
.gq-bmi-alert-cta {
  display: inline-block !important;
  margin-top: 8px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #991b1b !important;
  background: rgba(153,27,27,.08) !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
}

.gq-gate-d { display: none !important; }
.gq-gate-m { display: block !important; }

/* ── Payment Mode Toggle (Monthly/Yearly) ── */
.gq-pay-toggle {
  display: flex !important;
  background: #e2e5ea !important;
  border-radius: 12px !important;
  padding: 5px !important;
  margin-bottom: 14px !important;
  gap: 5px !important;
  border: 2px solid #d0d4db !important;
}
.gq-pay-opt {
  flex: 1 !important;
  text-align: center !important;
  padding: 12px 8px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(–text-muted) !important;
  background: transparent !important;
  border: 2px solid transparent !important;
  cursor: pointer !important;
  transition: all .2s !important;
  position: relative !important;
  font-family: inherit !important;
}
.gq-pay-opt:hover:not(.active) {
  background: rgba(255,255,255,.5) !important;
  color: var(–text) !important;
}
.gq-pay-opt.active {
  background: #fff !important;
  color: var(–blue) !important;
  border-color: var(–blue) !important;
  box-shadow: 0 2px 8px rgba(0,74,173,.15) !important;
}
.gq-pay-opt.active.yearly {
  background: var(–blue) !important;
  color: #fff !important;
}
.gq-pay-badge {
  display: inline-block !important;
  background: #22c55e !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  animation: gqBadgePop .6s ease !important;
}
@keyframes gqBadgePop { 0%{transform:scale(0);} 60%{transform:scale(1.2);} 100%{transform:scale(1);} }

/* ── Yearly savings highlight ── */
.gq-yearly-save {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;
  border: 1.5px solid #86efac !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-top: 10px !important;
  text-align: center !important;
}
.gq-yearly-save-icon { font-size: 20px !important; margin-bottom: 4px !important; }
.gq-yearly-save-amt {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #166534 !important;
  line-height: 1.2 !important;
}
.gq-yearly-save-sub {
  font-size: 11px !important;
  color: #3f6b52 !important;
  margin-top: 2px !important;
  line-height: 1.4 !important;
}
.gq-result-yearly-note {
  font-size: 11px !important;
  color: #166534 !important;
  background: #f0fdf4 !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  margin-top: 6px !important;
  display: inline-block !important;
  font-weight: 600 !important;
}
</style>
</head>
<body>

<div class="gq-outer">

  <!– ══ HERO (blue header) ══ –>
  <div class="gq-hero">
    <span class="gq-hero-badge">Urus Wang Mudah</span>
    <h1 class="gq-hero-title">Berapa Kos Kad Perubatan Kita?</h1>
    <p class="gq-hero-sub">2 minit je — kita boleh tahu anggaran caruman bulanan kad perubatan. Percuma, takde komitmen.</p>
  </div>

  <!– ══ FORM (white card) ══ –>
  <div class="gq-card">
    <div class="gq-wrap" style="max-width:500px;margin:0 auto;padding:0 !important;">

    <div id="step-calc">

      <!– Gender –>
      <div class="gq-field">
        <span class="gq-label">Saya seorang…</span>
        <div class="gq-opt-row" id="gender-row">
          <button class="gq-opt active" data-val="M" onclick="selGender(this)">👨 Lelaki</button>
          <button class="gq-opt" data-val="F" onclick="selGender(this)">👩 Perempuan</button>
        </div>
      </div>

      <!– Age –>
      <div class="gq-field">
        <span class="gq-label">Umur tahun depan</span>
        <input class="gq-input" id="age-input" type="number" min="6" max="85"
               placeholder="Taip umur di sini…" oninput="onAge(this)"/>
        <p class="gq-err" id="age-err" style="display:none">⚠️ Umur yang layak: 6 – 85 tahun</p>
        <div id="age-underage-box" style="display:none"></div>
      </div>

      <!– Plan –>
      <div class="gq-field">
        <span class="gq-label">Pilih tahap perlindungan</span>
        <div class="gq-plan-row" id="plan-row">
          <button class="gq-plan" data-idx="0" onclick="selPlan(this)">
            <span class="gq-plan-name">Smart</span>
            <span class="gq-plan-rb">Wad RM100/hari</span>
            <span class="gq-plan-limit" id="pl-0">Had: RM50,000</span>
          </button>
          <button class="gq-plan active" data-idx="1" onclick="selPlan(this)">
            <span class="gq-plan-name">Comfort</span>
            <span class="gq-plan-rb">Wad RM150/hari</span>
            <span class="gq-plan-limit" id="pl-1">Had: RM75,000</span>
          </button>
          <button class="gq-plan" data-idx="2" onclick="selPlan(this)">
            <span class="gq-plan-name">Peace</span>
            <span class="gq-plan-rb">Wad RM200/hari</span>
            <span class="gq-plan-limit" id="pl-2">Had: RM100,000</span>
          </button>
        </div>
      </div>

      <!– Booster –>
      <div class="gq-field">
        <span class="gq-label">Nak naikkan had tahunan?</span>
        <div class="gq-toggle-row">
          <div class="gq-toggle-info">
            <p class="gq-toggle-title">Naikkan had tahunan</p>
            <p class="gq-toggle-sub" id="booster-sub">Had boleh naik sehingga RM825,000 🚀</p>
            <p class="gq-toggle-warning">⚠️ Booster ni kena tambah masa mula-mula apply je. Lepas tu tak boleh dah.</p>
          </div>
          <button class="gq-toggle-btn" id="booster-btn" onclick="togBooster()">
            <span class="gq-knob"></span>
          </button>
        </div>
      </div>

      <div class="gq-divider"></div>

      <!– Deductible –>
      <div class="gq-field">
        <span class="gq-label">Sanggup tanggung sendiri?</span>
        <div class="gq-opt-row" id="ded-row">
          <button class="gq-opt active" style="flex:none !important;padding:13px 20px !important;font-size:14px !important;" data-idx="0" onclick="selDed(this)">Tiada</button>
          <button class="gq-opt" style="flex:none !important;padding:11px 18px !important;flex-direction:column !important;gap:3px !important;font-size:14px !important;" data-idx="1" onclick="selDed(this)">
            <span>RM2,000</span><span style="font-size:10px;font-weight:600;opacity:.7">jimat 20%</span>
          </button>
          <button class="gq-opt" style="flex:none !important;padding:11px 18px !important;flex-direction:column !important;gap:3px !important;font-size:14px !important;" data-idx="2" onclick="selDed(this)">
            <span>RM3,000</span><span style="font-size:10px;font-weight:600;opacity:.7">jimat 30%</span>
          </button>
        </div>
        <div class="gq-info-deductible">ℹ️ Kalau masuk hospital kerajaan, deductible ni tak dikenakan.</div>
      </div>

      <!– Mobile gate –>
      <div class="gq-gate-m" id="gate-m-wrap">
        <div id="lock-m" class="gq-lock" style="display:none">
          <div class="gq-lock-icon">🔒</div>
          <p class="gq-lock-text">Isi nama &amp; nombor di bawah — kita tunjukkan anggaran harga.</p>
        </div>
        <div id="gate-m-form" style="display:none;margin-top:12px">
          <div class="gq-gate">
            <p class="gq-gate-title">Dah nak siap! 🎉</p>
            <p class="gq-gate-sub">Tinggalkan nama &amp; WhatsApp — kita sembang dan explain lebih lanjut.</p>
            <div class="gq-field" style="margin-top:20px !important;"><input class="gq-input" id="gn-m" placeholder="Nama penuh" oninput="chkGate('m')"/></div>
            <div class="gq-field"><input class="gq-input" id="go-m" placeholder="Pekerjaan (cth: Guru, Jurutera)" oninput="chkGate('m')"/></div>
            <div class="gq-inline-row">
              <div class="gq-field"><input class="gq-input" id="gh-m" type="number" min="100" max="220" placeholder="Tinggi (cm)" oninput="chkGate('m')"/></div>
              <div class="gq-field"><input class="gq-input" id="gw-m" type="number" min="20" max="250" placeholder="Berat (kg)" oninput="chkGate('m')"/></div>
            </div>
            <div id="bmi-m" style="text-align:center;margin-bottom:10px"></div>
            <div class="gq-field"><input class="gq-input" id="gp-m" type="tel" placeholder="No. WhatsApp (cth: 0123456789)" oninput="chkGate('m')"/></div>
            <div class="gq-field" style="margin-bottom:4px"><input class="gq-input" id="gp2-m" type="tel" placeholder="Sahkan no. WhatsApp" oninput="chkGate('m')"/></div>
            <p class="gq-phone-err" id="pe-m"  style="display:none">⚠️ Nombor Malaysia tidak sah (cth: 0123456789)</p>
            <p class="gq-phone-err" id="pe2-m" style="display:none">⚠️ Nombor tidak sepadan</p>
            <label class="gq-consent-row">
              <input type="checkbox" id="gc-m" onchange="chkGate('m')"/>
              <span>Saya okay untuk dihubungi oleh team UWM pasal perkhidmatan kewangan.</span>
            </label>
            <button class="gq-cta" id="gcta-m" disabled onclick="unlock('m')">Tunjukkan Harga →</button>
          </div>
        </div>
      </div>

      <!– Result –>
      <div id="step-result" style="display:none;margin-top:16px">
        <div class="gq-side-card">
          <div class="gq-result-header" id="result-header"></div>
          <div id="bmi-warning-box"></div>
          <div class="gq-features" id="result-features"></div>
          <div id="tax-box"></div>
          <div id="waiting-box"></div>
          <div id="upsell-box"></div>
          <button class="gq-wa-btn" id="wa-btn" onclick="openWA()">📲 Jom Sembang di WhatsApp</button>
          <div id="thanks-box" style="display:none" class="gq-thanks">
            <p class="gq-thanks-h" id="thanks-name"></p>
            <p class="gq-thanks-p">Team kita akan reach out tak lama lagi. Nantikan! 🙌</p>
          </div>
          <button class="gq-reset" onclick="resetAll()">Nak kira untuk orang lain?</button>
        </div>
      </div>

    </div><!– /step-calc –>
  </div><!– /gq-wrap –>
  </div><!– /gq-card –>

</div><!– /gq-outer –>

<p class="gq-disclaimer" style="max-width:500px;margin:0 auto;padding:0 20px 24px">
  Dikira oleh <strong>Urus Wang Mudah (UWM)</strong>. Ini anggaran je — caruman sebenar bergantung kepada kesihatan, pekerjaan &amp; keputusan underwriting. Nak faham lebih? Jom sembang.
</p>

<script>
// ─── DATA ────────────────────────────────────────────────────────────────────
var PLANS = [
  {limitBase:"RM50,000",limitBooster:"RM550,000"},
  {limitBase:"RM75,000",limitBooster:"RM825,000"},
  {limitBase:"RM100,000",limitBooster:"RM1,100,000"}
];
var BASE = {
  M:{"6-10":[62.56,63.11,74.89],"11-15":[50.05,50.60,60.08],"16-20":[60.44,60.90,70.38],"21-25":[57.96,64.22,71.21],"26-30":[55.38,61.73,67.99],"31-35":[56.21,62.38,78.11],"36-40":[67.53,74.98,81.33],"41-45":[78.48,87.31,105.06],"46-50":[111.50,124.02,134.14],"51-55":[130.09,144.44,161.28],"56-59":[174.98,194.58,211.88],"60-64":[284.83,316.48,363.40],"65-69":[464.51,546.48,626.70],"70-74":[551.91,689.82,836.56],"75-79":[706.93,1009.70,1196.37],"80-85":[974.92,1218.63,1477.89]},
  F:{"6-10":[54.28,54.92,60.81],"11-15":[42.50,43.15,49.77],"16-20":[52.26,52.81,61.00],"21-25":[49.13,54.65,63.48],"26-30":[51.98,57.78,67.16],"31-35":[60.44,67.16,80.50],"36-40":[67.90,75.44,90.53],"41-45":[87.58,97.24,116.56],"46-50":[114.17,126.87,151.52],"51-55":[135.70,150.88,185.10],"56-59":[182.80,203.14,238.92],"60-64":[306.27,340.40,372.42],"65-69":[447.58,526.61,646.94],"70-74":[594.60,743.27,858.54],"75-79":[691.84,988.17,1170.06],"80-85":[954.13,1192.87,1445.41]}
};
var BOOST = {
  M:{"6-10":[81.33,80.50,91.27],"11-15":[65.14,64.58,73.33],"16-20":[78.10,77.28,85.84],"21-25":[75.81,80.69,86.76],"26-30":[73.23,78.20,83.54],"31-35":[76.73,81.33,96.05],"36-40":[88.87,94.76,100.10],"41-45":[106.08,112.79,129.16],"46-50":[146.74,156.59,164.96],"51-55":[172.41,183.63,198.26],"56-59":[230.55,246.10,260.55],"60-64":[380.14,404.62,446.84],"65-69":[628.91,698.56,770.50],"70-74":[771.33,892.86,1028.56],"75-79":[1020.83,1300.05,1470.99],"80-85":[1362.61,1577.25,1817.09]},
  F:{"6-10":[71.02,70.38,75.53],"11-15":[56.21,55.85,61.82],"16-20":[69.00,68.27,75.72],"21-25":[66.70,70.93,78.84],"26-30":[69.55,74.06,82.52],"31-35":[81.51,86.66,98.90],"36-40":[91.73,97.52,111.41],"41-45":[118.22,125.58,143.33],"46-50":[153.91,163.67,186.39],"51-55":[184.37,195.87,227.60],"56-59":[245.45,261.10,293.75],"60-64":[403.97,430.84,457.89],"65-69":[617.23,683.65,795.43],"70-74":[819.82,951.65,1055.70],"75-79":[998.84,1272.17,1438.70],"80-85":[1333.26,1543.57,1777.16]}
};
var DED = [0, .20, .30];
var PNAMES = ["Smart","Comfort","Peace"];
var BLABELS = ["RM550,000","RM825,000","RM1,100,000"];
var state = {g:"M",age:null,p:1,boost:false,ded:0,unlocked:false,name:"",phone:"",occupation:"",height:null,weight:null,bmi:null,bmiCat:"",upgraded:false,payMode:"monthly"};

function el(id){ return document.getElementById(id); }
function band(a){
  if(a<=10)return"6-10";if(a<=15)return"11-15";if(a<=20)return"16-20";if(a<=25)return"21-25";
  if(a<=30)return"26-30";if(a<=35)return"31-35";if(a<=40)return"36-40";if(a<=45)return"41-45";
  if(a<=50)return"46-50";if(a<=55)return"51-55";if(a<=59)return"56-59";if(a<=64)return"60-64";
  if(a<=69)return"65-69";if(a<=74)return"70-74";if(a<=79)return"75-79";return"80-85";
}
function calc(){
  if(!state.age)return null;
  var t = state.boost ? BOOST : BASE;
  return t[state.g][band(state.age)][state.p] * (1-DED[state.ded]);
}
function fmt(n){ return "RM "+n.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g,","); }
function validPhone(p){ return /^(01)[0-9]{8,9}$/.test(p.replace(/[\s\-]/g,"")); }
function calcBMI(h,w){
  if(!h||!w||h<100||w<20)return null;
  return w/((h/100)*(h/100));
}
function bmiCategory(b){
  if(b<18.5)return"underweight";if(b<25)return"normal";if(b<30)return"overweight";return"obese";
}
function bmiLabel(cat){
  var m={"underweight":"Kurang berat","normal":"Normal ✅","overweight":"Berat berlebihan ⚠️","obese":"Obes ⚠️"};
  return m[cat]||"";
}
function renderBMI(s){
  var hv=parseFloat(el("gh-"+s).value),wv=parseFloat(el("gw-"+s).value);
  var box=el("bmi-"+s);
  if(!hv||!wv||hv<100||wv<20){box.innerHTML="";return;}
  var b=calcBMI(hv,wv),cat=bmiCategory(b);
  var cls=cat==="normal"?"normal":cat==="overweight"?"overweight":"obese";
  if(cat==="underweight")cls="overweight";
  box.innerHTML='<span class="gq-bmi-tag '+cls+'">BMI: '+b.toFixed(1)+' — '+bmiLabel(cat)+'</span>';
}

// ─── PLAN LABELS ─────────────────────────────────────────────────────────────
function updPlanLabels(){
  PLANS.forEach(function(p,i){
    var e=el("pl-"+i); if(e) e.textContent="Had: "+(state.boost?p.limitBooster:p.limitBase);
  });
  var bs=el("booster-sub");
  if(bs) bs.textContent="Had boleh naik sehingga "+BLABELS[state.p]+" 🚀";
}

// ─── GATE VISIBILITY ─────────────────────────────────────────────────────────
function renderGate(){
  updPlanLabels();
  if(state.unlocked) return;
  var lm=el("lock-m"),gm=el("gate-m-form");
  if(lm) lm.style.display = state.age ? "block":"none";
  if(gm) gm.style.display = state.age ? "block":"none";
}

// ─── RESULT ──────────────────────────────────────────────────────────────────
function renderResult(){
  updPlanLabels();
  var monthly = calc();
  var annual  = monthly * 12;
  var daily   = monthly / 30;
  var pname   = PNAMES[state.p] + (state.boost?" + Booster":"");
  var dedLbl  = state.ded>0 ? " · Tanggung Sendiri RM"+(state.ded===1?"2,000":"3,000") : "";

  var comps=[
    {max:3,lbl:"lagi murah dari sebotol air mineral! 💧"},
    {max:5,lbl:"harga sekeping roti canai je! 🫓"},
    {max:8,lbl:"lagi murah dari secawan kopi! ☕"},
    {max:12,lbl:"harga teh tarik + kuih je! 🧋"},
    {max:20,lbl:"lagi jimat dari makan tengahari! 🍱"},
    {max:40,lbl:"lagi jimat dari isi minyak seminggu! ⛽"},
    {max:9999,lbl:"investment paling penting untuk keluarga kita! 🛡️"}
  ];
  var comp = comps.find(function(c){return daily<=c.max;});

  var coverLbl = ["Rawatan hospital &amp; pembedahan umum","Termasuk jantung &amp; kanser","Full coverage termasuk rawatan kritikal"][state.p];
  var hadLbl   = (state.boost ? PLANS[state.p].limitBooster : PLANS[state.p].limitBase);
  var wadLbl   = ["RM100","RM150","RM200"][state.p];
  var dedLabel = state.ded===0 ? "Tiada" : "RM"+(state.ded===1?"2,000":"3,000")+" (dikecualikan di hospital kerajaan)";

  var yearlyDiscount = 0.10; // 10% jimat bayar tahunan
  var yearlyTotal = monthly * 12 * (1 – yearlyDiscount);
  var yearlySaving = (monthly * 12) – yearlyTotal;
  var isYearly = state.payMode === "yearly";

  var payToggle =
    '<div class="gq-pay-toggle">'+
      '<button class="gq-pay-opt'+(isYearly?'':' active')+'" onclick="setPayMode(\'monthly\')">Bulanan</button>'+
      '<button class="gq-pay-opt yearly'+(isYearly?' active':'')+'" onclick="setPayMode(\'yearly\')">Tahunan <span class="gq-pay-badge">JIMAT 10%</span></button>'+
    '</div>';

  var priceDisplay, subDisplay;
  if(isYearly){
    priceDisplay = fmt(yearlyTotal);
    subDisplay = '<p class="gq-result-sub"><s style="color:#aaa !important;font-size:11px !important;">'+fmt(monthly*12)+'</s> → '+fmt(yearlyTotal)+' setahun</p>'+
      '<p class="gq-result-sub" style="margin-top:2px !important;">Pelan '+pname+dedLbl+'</p>'+
      '<span class="gq-result-yearly-note">🎉 Jimat '+fmt(yearlySaving)+' setahun!</span>';
  } else {
    priceDisplay = fmt(monthly);
    subDisplay = '<p class="gq-result-sub">'+fmt(annual)+' setahun</p>'+
      '<p class="gq-result-sub" style="margin-top:2px !important;">Pelan '+pname+dedLbl+'</p>'+
      '<span class="gq-daily-pill">≈ RM'+daily.toFixed(2)+' sehari — '+comp.lbl+'</span>';
  }

  el("result-header").innerHTML = payToggle +
    '<p class="gq-result-label">'+(isYearly?'Anggaran Caruman Tahunan':'Anggaran Caruman Bulanan')+'</p>'+
    '<p class="gq-result-amt">'+priceDisplay+'</p>'+
    subDisplay +
    (isYearly ? '<div class="gq-yearly-save"><div class="gq-yearly-save-icon">💰</div><p class="gq-yearly-save-amt">Jimat '+fmt(yearlySaving)+' setahun!</p><p class="gq-yearly-save-sub">Bayar sekali gus, lebih berbaloi — tak perlu ingat bayar setiap bulan</p></div>' : '<div class="gq-yearly-save" style="background:linear-gradient(135deg,#EEF3FB 0%,#d0dff5 100%) !important;border-color:#b3c8e8 !important;cursor:pointer !important;" onclick="setPayMode(\'yearly\')"><div class="gq-yearly-save-icon">💡</div><p class="gq-yearly-save-amt" style="color:var(–blue) !important;">Bayar tahunan? Jimat 10%!</p><p class="gq-yearly-save-sub" style="color:#4a6fa5 !important;">Tap sini untuk lihat harga tahunan — jimat '+fmt(yearlySaving)+'</p></div>');

  // BMI warning
  var bwb=el("bmi-warning-box");
  if(state.bmi && (state.bmiCat==="overweight"||state.bmiCat==="obese")){
    var isObese = state.bmiCat==="obese";
    var title = isObese
      ? 'BMI '+state.bmi+' — Kategori Obes'
      : 'BMI '+state.bmi+' — Berat Berlebihan';
    var body = isObese
      ? '<span style="display:block;margin-bottom:10px;">Takpe, kita nak jujur — harga di atas tu untuk berat badan normal. Kalau BMI lebih 30, biasanya ada <strong>caj tambahan kecil (loading)</strong>.</span><span style="display:block;margin-bottom:10px;">Tapi jangan risau — walaupun ada loading, harga masih jauh lebih murah dari bayar sendiri kalau masuk hospital.</span><span style="display:block;">Kita settle benda ni sekarang, baru tenang!</span>'
      : '<span style="display:block;margin-bottom:10px;">Kita nak transparent — harga di atas tu untuk berat badan normal. Kalau BMI lebih 25, mungkin ada sedikit <strong>caj tambahan (loading)</strong>.</span><span style="display:block;margin-bottom:10px;">Tapi good news — biasanya tak banyak pun, dan harga tetap mampu milik.</span><span style="display:block;">Janji kita ambil langkah pertama dulu!</span>';
    var cta = 'Jom sembang — kita semak harga sebenar sama-sama! 💪';
    bwb.innerHTML=
      '<div class="gq-info-bmi">'+
        '<div class="gq-bmi-alert-header">'+
          '<span class="gq-bmi-alert-icon">⚠️</span>'+
          '<span class="gq-bmi-alert-title">'+title+'</span>'+
        '</div>'+
        '<p class="gq-bmi-alert-body">'+body+'</p>'+
        '<span class="gq-bmi-alert-cta">'+cta+'</span>'+
      '</div>';
  } else {
    bwb.innerHTML="";
  }

  el("result-features").innerHTML =
    feat("🏥","Bilik & Wad",wadLbl+" / hari")+
    feat("📅","Had Tahunan",hadLbl)+
    feat("💳","Kad Perubatan Elektronik","Kemasukan tanpa tunai di hospital panel")+
    feat("📋","Pra-Kemasukan","60 hari sebelum masuk hospital")+
    feat("🩺","Pasca-Kemasukan","90 hari selepas discaj")+
    feat("♾️","Had Seumur Hidup","Tiada had seumur hidup")+
    feat("🏛️","Elaun Hospital Kerajaan","RM100 / hari")+
    feat("🎗️","Rawatan Kanser Pesakit Luar","Ditanggung")+
    feat("💊","Rawatan Dialisis Pesakit Luar","Ditanggung")+
    feat("🚑","Kecemasan Kemalangan Pesakit Luar","Ditanggung")+
    feat("🛡️","Perlindungan Utama",coverLbl)+
    feat("💳","Tanggung Sendiri (Deductible)",dedLabel);

  el("tax-box").innerHTML =
    '<div class="gq-info-box gq-info-tax">'+
      '💰 <strong>Bonus:</strong> Caruman ni boleh dapat pelepasan cukai pendapatan (tertakluk kelulusan LHDN). Jimat lagi!'+
    '</div>';

  el("waiting-box").innerHTML =
    '<div class="gq-info-box gq-info-waiting">'+
      '⏳ <strong>Tempoh Menunggu:</strong> 30 hari untuk penyakit biasa, 120 hari untuk penyakit tertentu (kencing manis, darah tinggi, kanser). Kemalangan? Terus cover dari hari pertama.'+
    '</div>';

  // Upsell
  var ub=el("upsell-box");
  if(state.p===2){
    if(state.upgraded){
      ub.innerHTML='<div class="gq-upgraded">'+
        '<span class="gq-upgraded-tag">Upgraded!</span>'+
        '<div class="gq-upgraded-icon">🎉</div>'+
        '<p class="gq-upgraded-h">Best decision ever, '+state.name.split(" ")[0]+'!</p>'+
        '<p class="gq-upgraded-p">Kita dah tukar ke Pelan Peace — perlindungan paling lengkap, had paling tinggi. '+
        'Ni bukan sekadar pilih plan, ni kita jaga diri kita dan keluarga kita dengan cara yang paling bijak. '+
        'Tak ramai orang ambil langkah ni — tapi kita buat. Respect! 💪</p>'+
      '</div>';
    } else {
      ub.innerHTML='<div class="gq-upgraded">'+
        '<span class="gq-upgraded-tag">Pilihan Terbaik</span>'+
        '<div class="gq-upgraded-icon">🏆</div>'+
        '<p class="gq-upgraded-h">Kita memang bijak pilih, '+state.name.split(" ")[0]+'!</p>'+
        '<p class="gq-upgraded-p">Pelan Peace — had paling besar, wad paling selesa, coverage paling tenang. '+
        'Ramai orang tangguh benda ni, tapi kita dah ambil langkah pertama. '+
        'Duit sebenarnya senang — janji faham. Dan kita dah faham! 🔥</p>'+
      '</div>';
    }
    return;
  }
  var t2=state.boost?BOOST:BASE;
  var prem=t2[state.g][band(state.age)][2]*(1-DED[state.ded]);
  var diff=prem-monthly,diffD=diff/30;
  var lines=[
    "Tambah <strong>RM"+diff.toFixed(2)+"/bulan</strong> je — had naik dari RM50,000 ke RM100,000. Sangat berbaloi!",
    "Tambah <strong>RM"+diff.toFixed(2)+"/bulan</strong> je untuk had tertinggi RM100,000. Kalau masuk hospital, beza ni boleh jimat puluhan ribu ringgit."
  ][state.p];
  var curHad = state.boost ? PLANS[state.p].limitBooster : PLANS[state.p].limitBase;
  var peaceHad = state.boost ? PLANS[2].limitBooster : PLANS[2].limitBase;
  var curWad = ["RM100","RM150","RM200"][state.p];
  var peaceWad = "RM200";

  ub.innerHTML='<div class="gq-upsell">'+
    '<span class="gq-upsell-badge">💡 Cadangan Kita</span>'+
    '<p class="gq-upsell-h">Nak rasa lebih tenang? Naik ke Peace</p>'+
    '<p class="gq-upsell-p">'+lines+'</p>'+
    '<div class="gq-upgrade-compare">'+
      '<div class="gq-uc-row"><span class="gq-uc-label">🏥 Had Tahunan</span><span class="gq-uc-from">'+curHad+'</span><span class="gq-uc-arrow">→</span><span class="gq-uc-to">'+peaceHad+'</span></div>'+
      '<div class="gq-uc-row"><span class="gq-uc-label">🛏️ Wad Harian</span><span class="gq-uc-from">'+curWad+'</span><span class="gq-uc-arrow">→</span><span class="gq-uc-to">'+peaceWad+'</span></div>'+
    '</div>'+
    '<div class="gq-upsell-row">'+
      '<div class="gq-upsell-col"><p class="gq-upsell-col-n">'+PNAMES[state.p]+' (kini)</p><p class="gq-upsell-col-v">'+(isYearly?fmt(monthly*12*0.9):fmt(monthly))+'</p><p class="gq-upsell-col-s">'+(isYearly?'setahun':'sebulan')+'</p></div>'+
      '<div class="gq-arrow">→</div>'+
      '<div class="gq-upsell-col hi" onclick="upgradeToPeace()"><p class="gq-upsell-col-n">Peace</p><p class="gq-upsell-col-v">'+(isYearly?fmt(prem*12*0.9):fmt(prem))+'</p><p class="gq-upsell-col-s">'+(isYearly?'setahun':'sebulan')+'</p></div>'+
    '</div>'+
    '<p class="gq-upsell-diff">'+(isYearly?'Beza hanya '+fmt(diff*12*0.9)+' setahun — pelaburan paling bijak! 🛡️':'Beza hanya RM'+diffD.toFixed(2)+' sehari — harga gula-gula je 🍬')+'</p>'+
    '<button class="gq-upgrade-btn" onclick="upgradeToPeace()">👉 Tukar ke Peace Sekarang — Tap Sini!</button>'+
  '</div>';
}

function feat(icon,label,val){
  return '<div class="gq-feature-row">'+
    '<div class="gq-feature-icon">'+icon+'</div>'+
    '<div class="gq-feature-text">'+
      '<span class="gq-feature-label">'+label+': </span>'+
      '<span class="gq-feature-val">'+val+'</span>'+
    '</div>'+
  '</div>';
}

// ─── PAYMENT MODE ────────────────────────────────────────────────────────────
function setPayMode(mode){
  state.payMode = mode;
  renderResult();
}

// ─── UPGRADE TO PEACE ────────────────────────────────────────────────────────
function upgradeToPeace(){
  state.p=2;
  state.upgraded=true;
  // Update plan buttons in the form too
  document.querySelectorAll("#plan-row .gq-plan").forEach(function(b){
    b.classList.toggle("active",b.getAttribute("data-idx")==="2");
  });
  renderResult();
  // Scroll to top of result so user sees updated price
  var rh=el("result-header");
  if(rh) rh.scrollIntoView({behavior:"smooth",block:"start"});
}

// ─── GATE CHECK ──────────────────────────────────────────────────────────────
function chkGate(s){
  var name=el("gn-"+s).value.trim();
  var occ=el("go-"+s).value.trim();
  var hv=parseFloat(el("gh-"+s).value)||0;
  var wv=parseFloat(el("gw-"+s).value)||0;
  var ph=el("gp-"+s).value.trim();
  var ph2=el("gp2-"+s).value.trim();
  var ok=validPhone(ph),match=ph===ph2;
  var consent=el("gc-"+s).checked;
  if(ph2.length>0) el("pe2-"+s).style.display=!match?"block":"none";
  else el("pe2-"+s).style.display="none";
  renderBMI(s);
  var hasHW=hv>=100&&wv>=20;
  var ready=name.length>0&&occ.length>0&&hasHW&&ok&&match&&consent;
  el("gcta-"+s).disabled=!ready;
  ready?el("gcta-"+s).classList.add("ready"):el("gcta-"+s).classList.remove("ready");
}

function unlock(s){
  var name=el("gn-"+s).value.trim();
  var ph=el("gp-"+s).value.trim();
  var ph2=el("gp2-"+s).value.trim();
  if(!validPhone(ph)){el("pe-"+s).style.display="block";return;}
  el("pe-"+s).style.display="none";
  if(ph!==ph2){el("pe2-"+s).style.display="block";return;}
  el("pe2-"+s).style.display="none";
  if(!el("gc-"+s).checked)return;
  var occ=el("go-"+s).value.trim();
  var hv=parseFloat(el("gh-"+s).value)||0;
  var wv=parseFloat(el("gw-"+s).value)||0;
  var b=calcBMI(hv,wv);
  state.unlocked=true;state.name=name;state.phone=ph;state.occupation=occ;
  state.height=hv;state.weight=wv;state.bmi=b?parseFloat(b.toFixed(1)):null;state.bmiCat=b?bmiCategory(b):"";
  var mw=el("gate-m-wrap");
  if(mw)mw.style.display="none";
  el("step-result").style.display="block";
  renderResult();
}

// ─── GOOGLE SHEETS ──────────────────────────────────────────────────────────
var SHEET_URL = ""; // ⚠️ LETAK Apps Script Web App URL di sini
function sendToSheet(){
  if(!SHEET_URL) return;
  var m = calc();
  var pname = PNAMES[state.p] + (state.boost?" + Booster":"");
  var dedLbl = state.ded===0 ? "Tiada" : "RM"+(state.ded===1?"2,000":"3,000");
  var data = {
    timestamp: new Date().toLocaleString("ms-MY",{timeZone:"Asia/Kuala_Lumpur"}),
    nama: state.name,
    pekerjaan: state.occupation,
    whatsapp: state.phone,
    jantina: state.g==="M"?"Lelaki":"Perempuan",
    umur: state.age,
    pelan: PNAMES[state.p],
    booster: state.boost ? "Ya" : "Tiada",
    deductible: dedLbl,
    anggaran: m ? "RM "+m.toFixed(2) : "",
    tinggi: state.height ? state.height+" cm" : "",
    berat: state.weight ? state.weight+" kg" : "",
    bmi: state.bmi || "",
    bmi_kategori: state.bmiCat ? bmiLabel(state.bmiCat) : "",
    mod_bayaran: state.payMode==="yearly" ? "Tahunan" : "Bulanan"
  };
  try {
    fetch(SHEET_URL, {
      method: "POST",
      mode: "no-cors",
      headers: {"Content-Type":"application/json"},
      body: JSON.stringify(data)
    });
  } catch(e) { /* silent fail */ }
}

// ─── WHATSAPP ────────────────────────────────────────────────────────────────
function openWA(){
  var m=calc();
  var pname=PNAMES[state.p]+(state.boost?" + Booster":"");
  var dedLbl=state.ded>0?"\nTanggung sendiri: RM"+(state.ded===1?"2,000":"3,000"):"";
  var myNum="601XXXXXXXX"; // ⚠️ TUKAR nombor anda di sini
  var isYr = state.payMode==="yearly";
  var yrTotal = m * 12 * 0.90;
  var payInfo = isYr
    ? "- Bayaran: Tahunan (~"+fmt(yrTotal)+"/tahun, jimat 10%)"
    : "- Bayaran: Bulanan (~"+fmt(m)+"/bulan)";
  var msg=encodeURIComponent(
    "Assalamualaikum! Saya "+state.name+".\n\nBaru je guna kalkulator kad perubatan kat website dan nak tahu lebih lanjut.\n\n"+
    "Info saya:\n- Umur: "+state.age+" tahun | "+(state.g==="M"?"Lelaki":"Perempuan")+"\n"+
    "- Pekerjaan: "+state.occupation+"\n"+
    "- Tinggi/Berat: "+state.height+"cm / "+state.weight+"kg (BMI: "+state.bmi+")\n"+
    "- Pelan: "+pname+dedLbl+"\n"+payInfo+"\n\nBoleh sembang? No. saya: "+state.phone
  );
  sendToSheet();
  window.open("https://wa.me/"+myNum+"?text="+msg,"_blank");
  el("wa-btn").style.display="none";
  el("thanks-box").style.display="block";
  el("thanks-name").textContent="✓ Terima kasih, "+state.name+"!";
}

// ─── EVENT HANDLERS ──────────────────────────────────────────────────────────
function selGender(btn){
  state.g=btn.getAttribute("data-val");
  document.querySelectorAll("#gender-row .gq-opt").forEach(function(b){b.classList.remove("active");});
  btn.classList.add("active"); renderGate();
  if(state.unlocked)renderResult();
}
function onAge(inp){
  var v=parseInt(inp.value);
  var uBox=el("age-underage-box");
  if(!inp.value){state.age=null;el("age-err").style.display="none";uBox.style.display="none";renderGate();return;}
  if(isNaN(v)||v>85){state.age=null;el("age-err").style.display="block";uBox.style.display="none";renderGate();return;}
  if(v<6){
    state.age=null;el("age-err").style.display="none";
    uBox.innerHTML='<div style="background:#eff6ff !important;border:1.5px solid #bfdbfe !important;border-radius:8px !important;padding:10px 12px !important;margin-top:8px !important;font-size:12px !important;line-height:1.5 !important;color:var(–text) !important;">'+
      '<span style="font-weight:600 !important;">Pelan ini untuk umur 6 tahun ke atas.</span> Jangan risau — saya ada akses kepada <strong>9 syarikat takaful</strong>. Saya boleh cadangkan pilihan terbaik untuk anak anda!'+
      '<div style="margin-top:10px !important;"><a href="https://wa.me/601XXXXXXXX?text=Salam%2C%20saya%20nak%20tanya%20pasal%20medical%20card%20untuk%20anak%20bawah%206%20tahun." target="_blank" style="display:inline-block !important;background:#25d366 !important;color:#fff !important;font-size:12px !important;font-weight:700 !important;padding:8px 18px !important;border-radius:20px !important;text-decoration:none !important;">📲 WhatsApp Saya</a></div>'+
    '</div>';
    uBox.style.display="block";renderGate();return;
  }
  el("age-err").style.display="none";uBox.style.display="none";state.age=v;renderGate();
  if(state.unlocked)renderResult();
}
function selPlan(btn){
  state.p=parseInt(btn.getAttribute("data-idx"));
  document.querySelectorAll("#plan-row .gq-plan").forEach(function(b){b.classList.remove("active");});
  btn.classList.add("active"); renderGate();
  if(state.unlocked)renderResult();
}
function togBooster(){
  state.boost=!state.boost;
  el("booster-btn").classList.toggle("on",state.boost);
  renderGate();
  if(state.unlocked)renderResult();
}
function selDed(btn){
  state.ded=parseInt(btn.getAttribute("data-idx"));
  document.querySelectorAll("#ded-row .gq-opt").forEach(function(b){b.classList.remove("active");});
  btn.classList.add("active"); renderGate();
  if(state.unlocked)renderResult();
}

// ─── RESET ───────────────────────────────────────────────────────────────────
function resetAll(){
  state={g:"M",age:null,p:1,boost:false,ded:0,unlocked:false,name:"",phone:"",occupation:"",height:null,weight:null,bmi:null,bmiCat:"",upgraded:false,payMode:"monthly"};
  el("age-input").value="";
  el("age-err").style.display="none";
  el("age-underage-box").style.display="none";
  ["m","d"].forEach(function(s){
    ["gn-","go-","gh-","gw-","gp-","gp2-"].forEach(function(p){var e=el(p+s);if(e)e.value="";});
    var bx=el("bmi-"+s);if(bx)bx.innerHTML="";
    var gc=el("gc-"+s);if(gc)gc.checked=false;
    ["pe-","pe2-"].forEach(function(p){var e=el(p+s);if(e)e.style.display="none";});
    var c=el("gcta-"+s);if(c){c.disabled=true;c.classList.remove("ready");}
  });
  el("step-result").style.display="none";
  el("wa-btn").style.display="block";
  el("thanks-box").style.display="none";
  var mw=el("gate-m-wrap");
  if(mw)mw.style.display="";
  el("booster-btn").classList.remove("on");
  document.querySelectorAll("#gender-row .gq-opt").forEach(function(b){b.classList.toggle("active",b.getAttribute("data-val")==="M");});
  document.querySelectorAll("#plan-row .gq-plan").forEach(function(b){b.classList.toggle("active",b.getAttribute("data-idx")==="1");});
  document.querySelectorAll("#ded-row .gq-opt").forEach(function(b){b.classList.toggle("active",b.getAttribute("data-idx")==="0");});
  PLANS.forEach(function(p,i){var e=el("pl-"+i);if(e)e.textContent="Had: "+p.limitBase;});
  renderGate();
}

</script>
</body>
</html>

ℹ️ Yang perlu diubah dalam code kalkulator:

1. Nombor WhatsApp — Cari 601XXXXXXXX dan tukar kepada nombor anda (ada 2 tempat).

2. Google Sheet URL — Cari SHEET_URL = "" dan masukkan URL Web App dari Langkah 6.

⚠️ JANGAN ubah code lain

Hanya ubah nombor WhatsApp dan Sheet URL sahaja. Jangan edit bahagian lain kerana ia boleh merosakkan kalkulator.

Ringkasan: Cari & Tukar (Ctrl+H)

Cari	Tukar kepada	Nota
`601XXXXXXXX`	`60123456789`	Nombor WA anda (tanpa 0 depan)
`SHEET_URL = ""`	`SHEET_URL = "https://script..."`	URL dari Langkah 6

Ada masalah atau soalan?

Hubungi team Urus Wang Mudah di WhatsApp untuk bantuan teknikal.