{"id":8996,"date":"2026-04-02T17:49:57","date_gmt":"2026-04-02T09:49:57","guid":{"rendered":"https:\/\/www.champion-chem.com\/?page_id=8996"},"modified":"2026-04-02T17:49:57","modified_gmt":"2026-04-02T09:49:57","slug":"champion-%e8%8a%82%e8%83%bd%e8%ae%a1%e7%ae%97%e5%99%a8","status":"publish","type":"page","link":"https:\/\/champion-chem.com\/cn\/champion-%e8%8a%82%e8%83%bd%e8%ae%a1%e7%ae%97%e5%99%a8\/","title":{"rendered":"Champion \u8282\u80fd\u8ba1\u7b97\u5668"},"content":{"rendered":"<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.7\/dist\/chart.umd.min.js\"><\/script>\r\n<style>\r\n  \/* \u2500\u2500 All styles scoped under #champion-calc for WordPress specificity \u2500\u2500 *\/\r\n  #champion-calc {\r\n    --gold: #F6B329;\r\n    --gold-hover: #E5A520;\r\n    --navy: #003C72;\r\n    --navy-dark: #00264A;\r\n    --navy-deeper: #001B36;\r\n    --navy-light: #0A5694;\r\n    --green: #10B981;\r\n    --green-dark: #059669;\r\n    --green-deeper: #047857;\r\n    --red: #EF4444;\r\n    --amber: #F59E0B;\r\n    --g50: #F9FAFB; --g100: #F3F4F6; --g200: #E5E7EB; --g300: #D1D5DB;\r\n    --g400: #9CA3AF; --g500: #6B7280; --g600: #4B5563; --g700: #374151;\r\n    --g800: #1F2937; --g900: #111827;\r\n    --radius: 14px;\r\n    --radius-sm: 10px;\r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;\r\n    color: var(--g800);\r\n    line-height: 1.6 !important;\r\n    max-width: 940px;\r\n    margin: 0 auto;\r\n    padding: 28px 16px;\r\n  }\r\n  #champion-calc *, #champion-calc *::before, #champion-calc *::after {\r\n    box-sizing: border-box !important;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  #champion-calc .hero {\r\n    position: relative;\r\n    background: linear-gradient(160deg, var(--navy-deeper) 0%, var(--navy) 50%, var(--navy-light) 100%) !important;\r\n    border-radius: 20px 20px 0 0;\r\n    padding: 32px 40px 28px !important;\r\n    overflow: hidden;\r\n  }\r\n  #champion-calc .hero::before {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background:\r\n      radial-gradient(ellipse 600px 400px at 85% 20%, rgba(246,179,41,0.12) 0%, transparent 70%),\r\n      radial-gradient(ellipse 300px 300px at 10% 80%, rgba(10,86,148,0.3) 0%, transparent 70%);\r\n    pointer-events: none;\r\n  }\r\n  #champion-calc .hero::after {\r\n    content: '';\r\n    position: absolute;\r\n    inset: 0;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg width='40' height='40' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cpath d='M0 0h40v40H0z' fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='0.5'\/%3E%3C\/svg%3E\");\r\n    pointer-events: none;\r\n  }\r\n  #champion-calc .hero-content { position: relative; z-index: 1; }\r\n  #champion-calc .hero-top {\r\n    display: flex !important;\r\n    align-items: center;\r\n    gap: 16px;\r\n    margin-bottom: 16px;\r\n  }\r\n  #champion-calc .hero-logo { height: 32px; filter: brightness(0) invert(1); flex-shrink: 0; }\r\n  #champion-calc .hero-logo-fallback {\r\n    display: none;\r\n    font-size: 18px !important;\r\n    font-weight: 900 !important;\r\n    color: #fff !important;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n  }\r\n  #champion-calc .hero-sep { width: 1px; height: 28px; background: rgba(255,255,255,0.15); flex-shrink: 0; }\r\n  #champion-calc .hero-badge {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    background: rgba(246,179,41,0.15) !important;\r\n    border: 1px solid rgba(246,179,41,0.25) !important;\r\n    border-radius: 999px !important;\r\n    padding: 4px 14px !important;\r\n    font-size: 11px !important;\r\n    font-weight: 700 !important;\r\n    color: var(--gold) !important;\r\n    letter-spacing: 0.5px;\r\n    text-transform: uppercase;\r\n  }\r\n  #champion-calc .hero h1 {\r\n    font-size: 26px !important;\r\n    font-weight: 900 !important;\r\n    color: #fff !important;\r\n    letter-spacing: -0.5px;\r\n    line-height: 1.2 !important;\r\n  }\r\n  #champion-calc .hero h1 .gold { color: var(--gold) !important; }\r\n  #champion-calc .hero p {\r\n    color: rgba(255,255,255,0.55) !important;\r\n    font-size: 14px !important;\r\n    font-weight: 400 !important;\r\n    margin-top: 6px;\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 MAIN BODY \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  #champion-calc .calc-body {\r\n    background: #fff !important;\r\n    border-radius: 0 0 20px 20px;\r\n    box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);\r\n    overflow: hidden;\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 SECTION TITLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  #champion-calc .sec-head {\r\n    display: flex !important;\r\n    align-items: center;\r\n    gap: 12px;\r\n    margin-bottom: 24px !important;\r\n  }\r\n  #champion-calc .sec-num {\r\n    width: 30px !important;\r\n    height: 30px !important;\r\n    display: inline-flex !important;\r\n    align-items: center;\r\n    justify-content: center;\r\n    border-radius: var(--radius-sm);\r\n    font-size: 13px !important;\r\n    font-weight: 800 !important;\r\n    color: #fff !important;\r\n    flex-shrink: 0;\r\n    line-height: 1 !important;\r\n  }\r\n  #champion-calc .sec-head h2 {\r\n    font-size: 16px !important;\r\n    font-weight: 700 !important;\r\n    color: var(--g800) !important;\r\n    letter-spacing: -0.2px;\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 INPUT SECTION \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  #champion-calc .inputs-sec { padding: 32px 40px 28px !important; }\r\n  #champion-calc .input-row-full { margin-bottom: 20px; }\r\n  #champion-calc .input-row-full .fi { max-width: 360px !important; }\r\n  #champion-calc .input-grid {\r\n    display: grid !important;\r\n    grid-template-columns: repeat(3, 1fr);\r\n    gap: 20px;\r\n  }\r\n\r\n  #champion-calc .fi-label {\r\n    display: block !important;\r\n    font-size: 10px !important;\r\n    font-weight: 700 !important;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.6px;\r\n    color: var(--g400) !important;\r\n    margin-bottom: 7px !important;\r\n    padding: 0 !important;\r\n  }\r\n\r\n  \/* \u2500\u2500 KEY FIX: Input fields with !important to override WP theme \u2500\u2500 *\/\r\n  #champion-calc .fi {\r\n    width: 100% !important;\r\n    height: 44px !important;\r\n    border: 1.5px solid var(--g200) !important;\r\n    border-radius: var(--radius-sm) !important;\r\n    padding: 0 14px !important;\r\n    font-family: inherit !important;\r\n    font-size: 14px !important;\r\n    font-weight: 500 !important;\r\n    color: var(--g800) !important;\r\n    background: #fff !important;\r\n    outline: none !important;\r\n    transition: all 0.2s !important;\r\n    -webkit-appearance: none !important;\r\n    appearance: none !important;\r\n    min-width: 0 !important;\r\n  }\r\n  #champion-calc .fi:hover { border-color: var(--g300) !important; }\r\n  #champion-calc .fi:focus { border-color: var(--navy) !important; box-shadow: 0 0 0 3px rgba(0,60,114,0.08) !important; }\r\n  #champion-calc select.fi {\r\n    cursor: pointer;\r\n    background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\") !important;\r\n    background-repeat: no-repeat !important;\r\n    background-position: right 12px center !important;\r\n    padding-right: 32px !important;\r\n  }\r\n\r\n  \/* \u2500\u2500 KEY FIX: Combo fields - number input + select toggle \u2500\u2500 *\/\r\n  #champion-calc .combo {\r\n    display: flex !important;\r\n    flex-wrap: nowrap !important;\r\n  }\r\n  #champion-calc .combo .fi {\r\n    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;\r\n    flex: 1 1 auto !important;\r\n    width: auto !important;\r\n    min-width: 60px !important;\r\n  }\r\n  #champion-calc .combo-r {\r\n    border: 1.5px solid var(--g200) !important;\r\n    border-left: 0 !important;\r\n    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;\r\n    background: var(--g50) !important;\r\n    padding: 0 10px !important;\r\n    font-family: inherit !important;\r\n    font-size: 11px !important;\r\n    font-weight: 600 !important;\r\n    color: var(--g500) !important;\r\n    cursor: pointer;\r\n    outline: none !important;\r\n    white-space: nowrap;\r\n    min-width: 0 !important;\r\n    width: auto !important;\r\n    max-width: 90px !important;\r\n    flex: 0 0 auto !important;\r\n    height: 44px !important;\r\n    -webkit-appearance: none !important;\r\n    appearance: none !important;\r\n  }\r\n\r\n  \/* \u2500\u2500 Tariff combo \u2500\u2500 *\/\r\n  #champion-calc .tariff-wrap { display: flex !important; flex-wrap: nowrap !important; }\r\n  #champion-calc .tariff-pre, #champion-calc .tariff-suf {\r\n    display: flex !important;\r\n    align-items: center;\r\n    padding: 0 10px !important;\r\n    border: 1.5px solid var(--g200) !important;\r\n    background: var(--g50) !important;\r\n    font-size: 13px !important;\r\n    font-weight: 600 !important;\r\n    color: var(--g400) !important;\r\n    white-space: nowrap;\r\n    height: 44px !important;\r\n    flex: 0 0 auto !important;\r\n  }\r\n  #champion-calc .tariff-pre { border-right: 0 !important; border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }\r\n  #champion-calc .tariff-suf { border-left: 0 !important; border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; font-size: 11px !important; }\r\n  #champion-calc .tariff-wrap .fi { border-radius: 0 !important; flex: 1 1 auto !important; width: auto !important; min-width: 50px !important; }\r\n\r\n  #champion-calc .fi-hint {\r\n    font-size: 11px !important;\r\n    color: var(--g400) !important;\r\n    margin-top: 5px;\r\n    min-height: 17px;\r\n    padding: 0 !important;\r\n    border: none !important;\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 RESULTS SECTION \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  #champion-calc .results-sec {\r\n    padding: 32px 40px 36px !important;\r\n    background: linear-gradient(180deg, var(--g50) 0%, #fff 100%) !important;\r\n    border-top: 1px solid var(--g100) !important;\r\n  }\r\n  #champion-calc .model-pill {\r\n    display: inline-flex !important;\r\n    align-items: center;\r\n    gap: 8px;\r\n    background: linear-gradient(135deg, rgba(0,60,114,0.07) 0%, rgba(0,60,114,0.02) 100%) !important;\r\n    border: 1px solid rgba(0,60,114,0.1) !important;\r\n    border-radius: var(--radius-sm) !important;\r\n    padding: 8px 16px !important;\r\n    font-size: 13px !important;\r\n    color: var(--g600) !important;\r\n    margin-bottom: 24px;\r\n  }\r\n  #champion-calc .model-pill strong { color: var(--navy) !important; font-weight: 700 !important; }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 CHART \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  #champion-calc .chart-card {\r\n    background: #fff !important;\r\n    border: 1px solid var(--g200) !important;\r\n    border-radius: var(--radius) !important;\r\n    padding: 24px !important;\r\n    margin-bottom: 24px;\r\n    box-shadow: 0 1px 3px rgba(0,0,0,0.04);\r\n  }\r\n  #champion-calc .chart-label {\r\n    font-size: 11px !important;\r\n    font-weight: 700 !important;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.5px;\r\n    color: var(--g400) !important;\r\n    margin-bottom: 12px;\r\n  }\r\n  #champion-calc .chart-wrap { position: relative; height: 210px; }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 SAVINGS CARDS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  #champion-calc .cards-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; }\r\n  @media (max-width: 640px) { #champion-calc .cards-row { grid-template-columns: 1fr !important; } }\r\n\r\n  #champion-calc .sc {\r\n    border-radius: var(--radius) !important;\r\n    overflow: hidden;\r\n    background: #fff !important;\r\n    border: 1px solid var(--g200) !important;\r\n    box-shadow: 0 1px 3px rgba(0,0,0,0.04);\r\n    transition: box-shadow 0.25s, transform 0.25s;\r\n  }\r\n  #champion-calc .sc:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); transform: translateY(-2px); }\r\n\r\n  #champion-calc .sc-head {\r\n    padding: 12px 18px !important;\r\n    display: flex !important;\r\n    align-items: center;\r\n    gap: 10px;\r\n    font-size: 11px !important;\r\n    font-weight: 700 !important;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.3px;\r\n    color: var(--g700) !important;\r\n  }\r\n  #champion-calc .sc.t-ex .sc-head { background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%) !important; border-bottom: 1px solid #FECACA !important; }\r\n  #champion-calc .sc.t-mkt .sc-head { background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%) !important; border-bottom: 1px solid #FDE68A !important; }\r\n  #champion-calc .sc-icon {\r\n    width: 26px; height: 26px;\r\n    border-radius: 8px;\r\n    display: flex !important;\r\n    align-items: center;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n  }\r\n  #champion-calc .t-ex .sc-icon { background: rgba(239,68,68,0.1) !important; }\r\n  #champion-calc .t-mkt .sc-icon { background: rgba(245,158,11,0.1) !important; }\r\n\r\n  #champion-calc .sc-body { padding: 16px 18px 20px !important; }\r\n  #champion-calc .sc-row {\r\n    display: flex !important;\r\n    align-items: center;\r\n    padding: 10px 0 !important;\r\n    border-bottom: 1px solid var(--g100) !important;\r\n  }\r\n  #champion-calc .sc-row:last-of-type { border-bottom: none !important; }\r\n  #champion-calc .sc-row-l { flex: 1; display: flex !important; align-items: center; gap: 8px; }\r\n  #champion-calc .sc-dot { width: 8px !important; height: 8px !important; border-radius: 50% !important; flex-shrink: 0; }\r\n  #champion-calc .sc-row-l span { font-size: 12px !important; color: var(--g600) !important; font-weight: 500 !important; }\r\n  #champion-calc .sc-row-l.champ span { color: var(--green-deeper) !important; font-weight: 700 !important; }\r\n  #champion-calc .sc-row-r { text-align: right; }\r\n  #champion-calc .sc-row-r .v1 { font-size: 14px !important; font-weight: 700 !important; color: var(--g800) !important; }\r\n  #champion-calc .sc-row-r .v2 { font-size: 11px !important; color: var(--g400) !important; font-weight: 500 !important; }\r\n  #champion-calc .champ-v .v1 { color: var(--green-deeper) !important; }\r\n  #champion-calc .champ-v .v2 { color: var(--green) !important; }\r\n\r\n  #champion-calc .sc-hl {\r\n    margin-top: 14px;\r\n    border-radius: var(--radius-sm) !important;\r\n    padding: 14px 16px !important;\r\n    display: flex !important;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 12px;\r\n  }\r\n  #champion-calc .sc-hl.pos { background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%) !important; border: 1px solid #A7F3D0 !important; }\r\n  #champion-calc .sc-hl.neg { background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%) !important; border: 1px solid #FECACA !important; }\r\n  #champion-calc .sc-hl-lbl { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.5px; color: var(--g500) !important; }\r\n  #champion-calc .sc-hl-amt { font-size: 24px !important; font-weight: 900 !important; letter-spacing: -0.5px; margin-top: 2px; line-height: 1.1 !important; }\r\n  #champion-calc .sc-hl-amt.pos { color: var(--green-deeper) !important; }\r\n  #champion-calc .sc-hl-amt.neg { color: var(--red) !important; }\r\n  #champion-calc .sc-hl-r { text-align: right; }\r\n  #champion-calc .sc-hl-kwh { font-size: 12px !important; font-weight: 700 !important; }\r\n  #champion-calc .sc-hl-kwh.pos { color: var(--green) !important; }\r\n  #champion-calc .sc-hl-kwh.neg { color: var(--red) !important; }\r\n  #champion-calc .sc-hl-pct {\r\n    display: inline-block;\r\n    margin-top: 4px;\r\n    font-size: 11px !important;\r\n    font-weight: 700 !important;\r\n    padding: 2px 10px !important;\r\n    border-radius: 999px !important;\r\n  }\r\n  #champion-calc .sc-hl-pct.pos { background: #A7F3D0 !important; color: #065F46 !important; }\r\n  #champion-calc .sc-hl-pct.neg { background: #FECACA !important; color: #991B1B !important; }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 ACTIONS \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  #champion-calc .actions-sec {\r\n    padding: 20px 40px !important;\r\n    border-top: 1px solid var(--g200) !important;\r\n    background: var(--g50) !important;\r\n    text-align: center;\r\n  }\r\n  #champion-calc .btn-print {\r\n    height: 44px !important;\r\n    display: inline-flex !important;\r\n    align-items: center;\r\n    gap: 8px;\r\n    padding: 0 32px !important;\r\n    background: var(--gold) !important;\r\n    color: var(--navy-deeper) !important;\r\n    border: none !important;\r\n    border-radius: var(--radius-sm) !important;\r\n    font-family: inherit !important;\r\n    font-size: 14px !important;\r\n    font-weight: 700 !important;\r\n    cursor: pointer;\r\n    transition: all 0.2s;\r\n    white-space: nowrap;\r\n    box-shadow: 0 2px 8px rgba(246,179,41,0.3);\r\n    text-decoration: none !important;\r\n  }\r\n  #champion-calc .btn-print:hover { background: var(--gold-hover) !important; box-shadow: 0 4px 16px rgba(246,179,41,0.4); transform: translateY(-1px); }\r\n  #champion-calc .btn-print:active { transform: translateY(0); }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  #champion-calc .calc-footer {\r\n    text-align: center;\r\n    font-size: 11px !important;\r\n    color: var(--g400) !important;\r\n    padding: 16px !important;\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 MOBILE RESPONSIVE \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  @media (max-width: 600px) {\r\n    #champion-calc { padding: 12px 8px !important; }\r\n    #champion-calc .hero { padding: 24px 20px 20px !important; border-radius: 14px 14px 0 0; }\r\n    #champion-calc .hero h1 { font-size: 20px !important; }\r\n    #champion-calc .hero p { font-size: 12px !important; }\r\n    #champion-calc .hero-top { gap: 10px; margin-bottom: 12px; }\r\n    #champion-calc .hero-badge { padding: 3px 10px !important; font-size: 9px !important; }\r\n    #champion-calc .hero-logo { height: 24px; }\r\n    #champion-calc .calc-body { border-radius: 0 0 14px 14px; }\r\n    #champion-calc .inputs-sec { padding: 20px 16px 16px !important; }\r\n    #champion-calc .input-row-full .fi { max-width: 100% !important; }\r\n    #champion-calc .input-grid { grid-template-columns: 1fr !important; gap: 14px; }\r\n    #champion-calc .sec-head { margin-bottom: 16px !important; }\r\n    #champion-calc .sec-head h2 { font-size: 14px !important; }\r\n    #champion-calc .results-sec { padding: 20px 16px 24px !important; }\r\n    #champion-calc .chart-card { padding: 16px !important; }\r\n    #champion-calc .chart-wrap { height: 180px; }\r\n    #champion-calc .cards-row { grid-template-columns: 1fr !important; gap: 14px; }\r\n    #champion-calc .sc-head { padding: 10px 14px !important; font-size: 10px !important; }\r\n    #champion-calc .sc-body { padding: 12px 14px 16px !important; }\r\n    #champion-calc .sc-hl { padding: 12px !important; flex-direction: column; align-items: flex-start; gap: 8px; }\r\n    #champion-calc .sc-hl-r { text-align: left; display: flex; align-items: center; gap: 8px; }\r\n    #champion-calc .sc-hl-amt { font-size: 20px !important; }\r\n    #champion-calc .actions-sec { padding: 16px !important; }\r\n    #champion-calc .btn-print { width: 100%; justify-content: center; }\r\n    #champion-calc .model-pill { font-size: 11px !important; padding: 6px 12px !important; }\r\n  }\r\n  @media (max-width: 380px) {\r\n    #champion-calc .hero h1 { font-size: 18px !important; }\r\n    #champion-calc .hero-badge { display: none !important; }\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PRINT STYLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  #champion-calc .print-block { display: none; }\r\n\r\n  @media print {\r\n    @page { size: A4; margin: 10mm 10mm; }\r\n    body { background: #fff !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }\r\n    #champion-calc { max-width: 100% !important; padding: 0 !important; }\r\n    #champion-calc .hero { border-radius: 0 !important; padding: 20px 28px 16px !important; }\r\n    #champion-calc .hero h1 { font-size: 20px !important; }\r\n    #champion-calc .calc-body { border-radius: 0 !important; box-shadow: none !important; }\r\n    #champion-calc .inputs-sec { padding: 16px 28px 14px !important; }\r\n    #champion-calc .results-sec { padding: 16px 28px 20px !important; }\r\n    #champion-calc .actions-sec { display: none !important; }\r\n    #champion-calc .chart-wrap { height: 150px !important; }\r\n    #champion-calc .calc-footer { padding: 8px 28px !important; }\r\n    #champion-calc .sec-head { margin-bottom: 16px !important; }\r\n    #champion-calc .cards-row { gap: 12px; }\r\n    #champion-calc .sc:hover { box-shadow: none !important; transform: none !important; }\r\n    #champion-calc .sc-body { padding: 10px 14px 14px !important; }\r\n    #champion-calc .sc-hl { padding: 10px 12px !important; margin-top: 10px; }\r\n    #champion-calc .model-pill { margin-bottom: 16px; }\r\n\r\n    #champion-calc .print-block { display: block !important; }\r\n    #champion-calc .print-report-header {\r\n      display: flex !important;\r\n      align-items: center;\r\n      gap: 16px;\r\n      padding: 16px 28px !important;\r\n      border-bottom: 3px solid var(--navy) !important;\r\n      margin-bottom: 0;\r\n    }\r\n    #champion-calc .print-report-header img { height: 44px; }\r\n    #champion-calc .print-report-header .prh-text { flex: 1; }\r\n    #champion-calc .print-report-header .prh-title { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 1px; color: var(--g400) !important; }\r\n    #champion-calc .print-report-header .prh-date { font-size: 11px !important; color: var(--g500) !important; margin-top: 2px; }\r\n    #champion-calc .print-report-header .prh-right { text-align: right; }\r\n\r\n    #champion-calc .print-contact {\r\n      padding: 16px 28px !important;\r\n      border-top: 2px solid var(--navy) !important;\r\n      background: var(--g50) !important;\r\n    }\r\n    #champion-calc .print-contact-title { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.8px; color: var(--g400) !important; margin-bottom: 8px; }\r\n    #champion-calc .print-contact-grid { display: flex !important; gap: 24px; }\r\n    #champion-calc .print-contact-col { flex: 1; }\r\n    #champion-calc .print-contact-col .pcc-name { font-size: 12px !important; font-weight: 700 !important; color: var(--navy) !important; margin-bottom: 3px; }\r\n    #champion-calc .print-contact-col .pcc-detail { font-size: 11px !important; color: var(--g600) !important; line-height: 1.5 !important; }\r\n    #champion-calc .print-contact-col .pcc-email { color: var(--navy) !important; font-weight: 600 !important; }\r\n  }\r\n<\/style>\r\n\r\n\r\n<div id=\"champion-calc\">\r\n  <!-- \u2550\u2550 PRINT: Report Header \u2550\u2550 -->\r\n  <div class=\"print-block print-report-header\">\r\n    <img decoding=\"async\" src=\"https:\/\/www.champion-chem.com\/wp-content\/uploads\/2024\/11\/champion-logo-color.svg\" alt=\"Champion\" onerror=\"this.outerHTML='<span style=\\'font-size:20px;font-weight:900;color:#003C72;letter-spacing:2px\\'>CHAMPION<\/span>'\" data-no-translation=\"\" data-no-auto-translation=\"\">\r\n    <div class=\"prh-text\"><\/div>\r\n    <div class=\"prh-right\">\r\n      <div class=\"prh-title\" data-i18n=\"printReportTitle\"><\/div>\r\n      <div class=\"prh-date\" id=\"printDate\"><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- \u2550\u2550 HERO HEADER \u2550\u2550 -->\r\n  <div class=\"hero\">\r\n    <div class=\"hero-content\">\r\n      <div class=\"hero-top\">\r\n        <img decoding=\"async\" class=\"hero-logo\" src=\"https:\/\/www.champion-chem.com\/wp-content\/uploads\/2024\/11\/champion-logo-color.svg\" alt=\"Champion\" onerror=\"this.style.display='none';this.nextElementSibling.style.display='inline'\" data-no-translation=\"\" data-no-auto-translation=\"\">\r\n        <span class=\"hero-logo-fallback\">CHAMPION<\/span>\r\n        <div class=\"hero-sep\"><\/div>\r\n        <div class=\"hero-badge\">\r\n          <svg width=\"12\" height=\"12\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\" fill=\"#F6B329\"\/><\/svg>\r\n          <span data-i18n=\"heroBadge\"><\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <h1 data-i18n-html=\"heroTitle\"><\/h1>\r\n      <p data-i18n=\"heroSubtitle\"><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"calc-body\">\r\n    <!-- \u2550\u2550 INPUTS \u2550\u2550 -->\r\n    <div class=\"inputs-sec\">\r\n      <div class=\"sec-head\">\r\n        <span class=\"sec-num\" style=\"background:var(--navy);\">1<\/span>\r\n        <h2 data-i18n=\"sec1Title\"><\/h2>\r\n      <\/div>\r\n      <div class=\"input-row-full\">\r\n        <label class=\"fi-label\" data-i18n=\"labelDishType\"><\/label>\r\n        <select class=\"fi\" id=\"dishType\" onchange=\"onTypeChange()\">\r\n          <option value=\"0\" selected data-i18n=\"optDoorHood\"><\/option>\r\n          <option value=\"1\" data-i18n=\"optSingleTank\"><\/option>\r\n          <option value=\"2\" data-i18n=\"optDoubleTank\"><\/option>\r\n        <\/select>\r\n      <\/div>\r\n      <div class=\"input-grid\">\r\n        <div>\r\n          <label class=\"fi-label\" id=\"energyLabel\" data-i18n=\"labelPowerKw\"><\/label>\r\n          <div class=\"combo\">\r\n            <input class=\"fi\" type=\"number\" id=\"energyInput\" min=\"0\" step=\"0.1\" value=\"15\" oninput=\"calc()\">\r\n            <select class=\"combo-r\" id=\"energyMethod\" onchange=\"onEnergyMethodChange()\">\r\n              <option value=\"kwh\" data-i18n=\"unitKwh\"><\/option>\r\n              <option value=\"total_power\" selected data-i18n=\"unitKwTotal\"><\/option>\r\n            <\/select>\r\n          <\/div>\r\n          <div class=\"fi-hint\" id=\"energyHint\"><\/div>\r\n        <\/div>\r\n        <div>\r\n          <label class=\"fi-label\" data-i18n=\"labelUsage\"><\/label>\r\n          <div class=\"combo\">\r\n            <input class=\"fi\" type=\"number\" id=\"usageInput\" min=\"0\" step=\"0.5\" value=\"6\" oninput=\"calc()\">\r\n            <select class=\"combo-r\" id=\"usageMethod\" onchange=\"onUsageMethodChange()\">\r\n              <option value=\"hours\" selected data-i18n=\"unitHrsDay\"><\/option>\r\n              <option value=\"racks\" data-i18n=\"unitRacksDay\"><\/option>\r\n            <\/select>\r\n          <\/div>\r\n          <div class=\"fi-hint\" id=\"usageHint\"><\/div>\r\n        <\/div>\r\n        <div>\r\n          <label class=\"fi-label\" data-i18n=\"labelTariff\"><\/label>\r\n          <div class=\"tariff-wrap\">\r\n            <span class=\"tariff-pre\">$<\/span>\r\n            <input class=\"fi\" type=\"number\" id=\"tariffInput\" min=\"0\" step=\"0.01\" value=\"1.38\" oninput=\"calc()\">\r\n            <span class=\"tariff-suf\">\/kWh<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 RESULTS \u2550\u2550 -->\r\n    <div class=\"results-sec\">\r\n      <div class=\"sec-head\">\r\n        <span class=\"sec-num\" style=\"background:var(--green);\">2<\/span>\r\n        <h2 data-i18n=\"sec2Title\"><\/h2>\r\n      <\/div>\r\n      <div class=\"model-pill\">\r\n        <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--navy)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5\"\/><\/svg>\r\n        <span data-i18n=\"championModel\"><\/span> <strong id=\"modelLabel\"><\/strong>\r\n      <\/div>\r\n      <div class=\"chart-card\">\r\n        <div class=\"chart-label\" data-i18n=\"chartLabel\"><\/div>\r\n        <div class=\"chart-wrap\"><canvas id=\"energyChart\"><\/canvas><\/div>\r\n      <\/div>\r\n      <div class=\"cards-row\">\r\n        <div class=\"sc t-ex\" id=\"cardExisting\"><\/div>\r\n        <div class=\"sc t-mkt\" id=\"cardMarket\"><\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 ACTIONS \u2550\u2550 -->\r\n    <div class=\"actions-sec\">\r\n      <button class=\"btn-print\" onclick=\"printReport()\">\r\n        <svg width=\"16\" height=\"16\" viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2\"\/><rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"\/><\/svg>\r\n        <span data-i18n=\"btnPrint\"><\/span>\r\n      <\/button>\r\n    <\/div>\r\n\r\n    <!-- \u2550\u2550 PRINT: Contact \/ Sales \u2550\u2550 -->\r\n    <div class=\"print-block print-contact\">\r\n      <div class=\"print-contact-grid\">\r\n        <div class=\"print-contact-col\">\r\n          <div class=\"pcc-name\">Champion Industries International<\/div>\r\n          <div class=\"pcc-detail\">www.champion-chem.com<\/div>\r\n        <\/div>\r\n        <div class=\"print-contact-col\">\r\n          <div class=\"pcc-detail\"><span class=\"pcc-email\">enquiry_apac@champion-chem.com<\/span><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <p class=\"calc-footer\" data-i18n=\"footer\"><\/p>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     i18n - Translations Dictionary\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  var I18N = {\r\n    'zh-TW': {\r\n      heroBadge: '\u71b1\u56de\u6536\u6280\u8853',\r\n      heroTitle: '\u7bc0\u80fd<span class=\"gold\">\u8a08\u7b97\u5668<\/span>',\r\n      heroSubtitle: '\u4e86\u89e3\u4f7f\u7528 Champion \u71b1\u56de\u6536\u6d17\u7897\u6a5f\u53ef\u4ee5\u70ba\u60a8\u7bc0\u7701\u591a\u5c11\u80fd\u6e90',\r\n      sec1Title: '\u60a8\u73fe\u6709\u7684\u6d17\u7897\u6a5f',\r\n      labelDishType: '\u6d17\u7897\u6a5f\u985e\u578b',\r\n      optDoorHood: '\u63ed\u84cb\u5f0f \/ \u7f69\u5f0f',\r\n      optSingleTank: '\u55ae\u7f38\u8f38\u9001\u5e36\u5f0f',\r\n      optDoubleTank: '\u96d9\u7f38\u8f38\u9001\u5e36\u5f0f',\r\n      labelPowerKw: '\u529f\u7387\u8ca0\u8f09 (kW)',\r\n      labelEnergyKwh: '\u80fd\u8017 (kWh\/hr)',\r\n      unitKwh: 'kWh\/hr',\r\n      unitKwTotal: 'kW \u7e3d\u529f\u7387',\r\n      labelUsage: '\u6bcf\u65e5\u4f7f\u7528\u91cf',\r\n      unitHrsDay: '\u5c0f\u6642\/\u5929',\r\n      unitRacksDay: '\u7c43\/\u5929',\r\n      labelTariff: '\u96fb\u8cbb\u8cbb\u7387',\r\n      sec2Title: '\u5e74\u5ea6\u7bc0\u7701',\r\n      championModel: 'Champion \u578b\u865f\uff1a',\r\n      chartLabel: '\u5e74\u5ea6\u80fd\u8017 (kWh \/ \u5e74)',\r\n      chartYourExisting: '\u60a8\u73fe\u6709\u7684',\r\n      chartMarketAvg: '\u5e02\u5834\u5e73\u5747',\r\n      chartChampion: 'Champion',\r\n      cardVsExisting: 'Champion \u5c0d\u6bd4\u60a8\u73fe\u6709\u7684',\r\n      cardVsMarket: 'Champion \u5c0d\u6bd4\u5e02\u5834\u5e73\u5747',\r\n      labelYourExisting: '\u60a8\u73fe\u6709\u7684',\r\n      labelMarketAvg: '\u5e02\u5834\u5e73\u5747',\r\n      labelAnnualSaving: '\u5e74\u5ea6\u7bc0\u7701',\r\n      btnPrint: '\u5217\u5370 \/ \u5132\u5b58\u5831\u544a',\r\n      printReportTitle: '\u7bc0\u80fd\u5831\u544a',\r\n      footer: '* \u4ee5\u6bcf\u5e74 365 \u500b\u71df\u696d\u65e5\u8a08\u7b97\u3002\u5be6\u969b\u7bc0\u7701\u91d1\u984d\u56e0\u71df\u904b\u689d\u4ef6\u548c\u7576\u5730\u96fb\u8cbb\u800c\u7570\u3002',\r\n      hintUtilization: '\u2248 {val} kWh\/hr (80% \u5229\u7528\u7387)',\r\n      hintRacksDay: '\u2248 {racks} \u7c43\/\u5929 @ {rate} \u7c43\/\u5c0f\u6642',\r\n      hintHrsDay: '\u2248 {hrs} \u5c0f\u6642\/\u5929 @ {rate} \u7c43\/\u5c0f\u6642',\r\n      tooltipKwhYear: '{val} kWh\/\u5e74'\r\n    },\r\n    'en': {\r\n      heroBadge: 'Heat Recovery Technology',\r\n      heroTitle: 'Energy Saving <span class=\"gold\">Calculator<\/span>',\r\n      heroSubtitle: 'Discover how much you can save with Champion Heat Recovery dishwashers',\r\n      sec1Title: 'Your Existing Dishwasher',\r\n      labelDishType: 'Dishwasher Type',\r\n      optDoorHood: 'Door \/ Hood Type',\r\n      optSingleTank: 'Single Tank Conveyor',\r\n      optDoubleTank: 'Double Tank Conveyor',\r\n      labelPowerKw: 'Power Loading (kW)',\r\n      labelEnergyKwh: 'Energy (kWh\/hr)',\r\n      unitKwh: 'kWh\/hr',\r\n      unitKwTotal: 'kW Total',\r\n      labelUsage: 'Daily Usage',\r\n      unitHrsDay: 'hrs\/day',\r\n      unitRacksDay: 'racks\/day',\r\n      labelTariff: 'Energy Tariff',\r\n      sec2Title: 'Annual Savings',\r\n      championModel: 'Champion Model:',\r\n      chartLabel: 'Annual Energy Consumption (kWh \/ year)',\r\n      chartYourExisting: 'Your Existing',\r\n      chartMarketAvg: 'Market Average',\r\n      chartChampion: 'Champion',\r\n      cardVsExisting: 'Champion vs Your Existing',\r\n      cardVsMarket: 'Champion vs Market Average',\r\n      labelYourExisting: 'Your Existing',\r\n      labelMarketAvg: 'Market Average',\r\n      labelAnnualSaving: 'Annual Saving',\r\n      btnPrint: 'Print \/ Save Report',\r\n      printReportTitle: 'Energy Saving Report',\r\n      footer: '* Based on 365 operating days\/year. Actual savings vary by operating conditions and local utility rates.',\r\n      hintUtilization: '\u2248 {val} kWh\/hr (80% utilization)',\r\n      hintRacksDay: '\u2248 {racks} racks\/day @ {rate} racks\/hr',\r\n      hintHrsDay: '\u2248 {hrs} hrs\/day @ {rate} racks\/hr',\r\n      tooltipKwhYear: '{val} kWh\/year'\r\n    },\r\n    'zh-CN': {\r\n      heroBadge: '\u70ed\u56de\u6536\u6280\u672f',\r\n      heroTitle: '\u8282\u80fd<span class=\"gold\">\u8ba1\u7b97\u5668<\/span>',\r\n      heroSubtitle: '\u4e86\u89e3\u4f7f\u7528 Champion \u70ed\u56de\u6536\u6d17\u7897\u673a\u53ef\u4ee5\u4e3a\u60a8\u8282\u7701\u591a\u5c11\u80fd\u6e90',\r\n      sec1Title: '\u60a8\u73b0\u6709\u7684\u6d17\u7897\u673a',\r\n      labelDishType: '\u6d17\u7897\u673a\u7c7b\u578b',\r\n      optDoorHood: '\u63ed\u76d6\u5f0f \/ \u7f69\u5f0f',\r\n      optSingleTank: '\u5355\u7f38\u8f93\u9001\u5e26\u5f0f',\r\n      optDoubleTank: '\u53cc\u7f38\u8f93\u9001\u5e26\u5f0f',\r\n      labelPowerKw: '\u529f\u7387\u8d1f\u8f7d (kW)',\r\n      labelEnergyKwh: '\u80fd\u8017 (kWh\/hr)',\r\n      unitKwh: 'kWh\/hr',\r\n      unitKwTotal: 'kW \u603b\u529f\u7387',\r\n      labelUsage: '\u6bcf\u65e5\u4f7f\u7528\u91cf',\r\n      unitHrsDay: '\u5c0f\u65f6\/\u5929',\r\n      unitRacksDay: '\u7bee\/\u5929',\r\n      labelTariff: '\u7535\u8d39\u8d39\u7387',\r\n      sec2Title: '\u5e74\u5ea6\u8282\u7701',\r\n      championModel: 'Champion \u578b\u53f7\uff1a',\r\n      chartLabel: '\u5e74\u5ea6\u80fd\u8017 (kWh \/ \u5e74)',\r\n      chartYourExisting: '\u60a8\u73b0\u6709\u7684',\r\n      chartMarketAvg: '\u5e02\u573a\u5e73\u5747',\r\n      chartChampion: 'Champion',\r\n      cardVsExisting: 'Champion \u5bf9\u6bd4\u60a8\u73b0\u6709\u7684',\r\n      cardVsMarket: 'Champion \u5bf9\u6bd4\u5e02\u573a\u5e73\u5747',\r\n      labelYourExisting: '\u60a8\u73b0\u6709\u7684',\r\n      labelMarketAvg: '\u5e02\u573a\u5e73\u5747',\r\n      labelAnnualSaving: '\u5e74\u5ea6\u8282\u7701',\r\n      btnPrint: '\u6253\u5370 \/ \u4fdd\u5b58\u62a5\u544a',\r\n      printReportTitle: '\u8282\u80fd\u62a5\u544a',\r\n      footer: '* \u4ee5\u6bcf\u5e74 365 \u4e2a\u8425\u4e1a\u65e5\u8ba1\u7b97\u3002\u5b9e\u9645\u8282\u7701\u91d1\u989d\u56e0\u8fd0\u8425\u6761\u4ef6\u548c\u5f53\u5730\u7535\u8d39\u800c\u5f02\u3002',\r\n      hintUtilization: '\u2248 {val} kWh\/hr (80% \u5229\u7528\u7387)',\r\n      hintRacksDay: '\u2248 {racks} \u7bee\/\u5929 @ {rate} \u7bee\/\u5c0f\u65f6',\r\n      hintHrsDay: '\u2248 {hrs} \u5c0f\u65f6\/\u5929 @ {rate} \u7bee\/\u5c0f\u65f6',\r\n      tooltipKwhYear: '{val} kWh\/\u5e74'\r\n    }\r\n  };\r\n\r\n  \/* \u2500\u2500 Detect language from URL path \u2500\u2500 *\/\r\n  var path = window.location.pathname;\r\n  var LANG = 'zh-TW'; \/\/ default: Traditional Chinese (Hong Kong)\r\n  if (path.indexOf('\/en\/') !== -1) LANG = 'en';\r\n  else if (path.indexOf('\/cn\/') !== -1) LANG = 'zh-CN';\r\n\r\n  function t(key) { return I18N[LANG][key] || I18N['en'][key] || key; }\r\n\r\n  \/* \u2500\u2500 Apply translations to all data-i18n elements \u2500\u2500 *\/\r\n  function applyI18n() {\r\n    var els = document.querySelectorAll('#champion-calc [data-i18n]');\r\n    for (var i = 0; i < els.length; i++) {\r\n      els[i].textContent = t(els[i].getAttribute('data-i18n'));\r\n    }\r\n    var htmlEls = document.querySelectorAll('#champion-calc [data-i18n-html]');\r\n    for (var j = 0; j < htmlEls.length; j++) {\r\n      htmlEls[j].innerHTML = t(htmlEls[j].getAttribute('data-i18n-html'));\r\n    }\r\n  }\r\n\r\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     Calculator Data & Logic\r\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n  var SPECS = [\r\n    { type: 'Door\/Hood Type', championKwh: 2.7, marketKwh: 11, racksHr: 60, model: 'AS-100 (HeatPlus)', modelFull: 'AS-100 (HeatPlus) Door Type Dishwasher (Heat Recovery)' },\r\n    { type: 'Single Tank Conveyor Type', championKwh: 18.18, marketKwh: 36, racksHr: 230, model: 'AS-44B(G)', modelFull: 'AS-44B(G) Single Tank Conveyor (Heat Recovery)' },\r\n    { type: 'Double Tank Conveyor Type', championKwh: 25, marketKwh: 44, racksHr: 268, model: 'AS-64B(G)', modelFull: 'AS-64B(G) Double Tank Conveyor (Heat Recovery)' }\r\n  ];\r\n  var chart = null;\r\n\r\n  function $(id) { return document.getElementById(id); }\r\n  function spec() { return SPECS[parseInt($('dishType').value)]; }\r\n  function em() { return $('energyMethod').value; }\r\n  function um() { return $('usageMethod').value; }\r\n  function ei() { return parseFloat($('energyInput').value) || 0; }\r\n  function ui() { return parseFloat($('usageInput').value) || 0; }\r\n  function tr() { return parseFloat($('tariffInput').value) || 0; }\r\n  function fmt(v) { return Math.round(v).toLocaleString('en-US'); }\r\n  function fmtD(v) { return '$' + Math.abs(v).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }\r\n\r\n  window.onTypeChange = function() {\r\n    var s = spec(), m = em();\r\n    $('energyInput').value = m === 'kwh' ? s.marketKwh : Math.round((s.marketKwh \/ 0.8) * 100) \/ 100;\r\n    calc();\r\n  };\r\n  window.onEnergyMethodChange = function() {\r\n    var m = em(), v = ei();\r\n    if (m === 'kwh') { $('energyInput').value = Math.round(v * 0.8 * 100) \/ 100; $('energyLabel').textContent = t('labelEnergyKwh'); }\r\n    else { $('energyInput').value = Math.round((v \/ 0.8) * 100) \/ 100; $('energyLabel').textContent = t('labelPowerKw'); }\r\n    calc();\r\n  };\r\n  window.onUsageMethodChange = function() {\r\n    var m = um(), v = ui(), s = spec();\r\n    if (m === 'racks') { $('usageInput').value = Math.round(v * s.racksHr); $('usageInput').step = '1'; }\r\n    else { $('usageInput').value = Math.round((v \/ s.racksHr) * 100) \/ 100; $('usageInput').step = '0.5'; }\r\n    calc();\r\n  };\r\n\r\n  window.printReport = function() {\r\n    var dateLocale = LANG === 'en' ? 'en-US' : (LANG === 'zh-CN' ? 'zh-CN' : 'zh-TW');\r\n    $('printDate').textContent = new Date().toLocaleDateString(dateLocale, { year: 'numeric', month: 'long', day: 'numeric' });\r\n    window.print();\r\n  };\r\n\r\n  var iconEx = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#EF4444\" stroke-width=\"2.5\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M15 9l-6 6M9 9l6 6\"\/><\/svg>';\r\n  var iconMkt = '<svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F59E0B\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M12 9v4M12 17h.01\"\/><circle cx=\"12\" cy=\"12\" r=\"10\"\/><\/svg>';\r\n\r\n  function renderCard(el, title, icon, oLabel, cLabel, aO, aC, cO, cC, sK, sP, cS, dc) {\r\n    var p = sK >= 0;\r\n    el.innerHTML =\r\n      '<div class=\"sc-head\"><div class=\"sc-icon\">' + icon + '<\/div>' + title + '<\/div>' +\r\n      '<div class=\"sc-body\">' +\r\n        '<div class=\"sc-row\"><div class=\"sc-row-l\"><span class=\"sc-dot\" style=\"background:' + dc + '\"><\/span><span>' + oLabel + '<\/span><\/div>' +\r\n          '<div class=\"sc-row-r\"><div class=\"v1\">' + fmt(aO) + ' <small style=\"font-size:10px;font-weight:500;color:#9CA3AF\">kWh<\/small><\/div><div class=\"v2\">' + fmtD(cO) + ' \/yr<\/div><\/div><\/div>' +\r\n        '<div class=\"sc-row\"><div class=\"sc-row-l champ\"><span class=\"sc-dot\" style=\"background:#10B981\"><\/span><span>' + cLabel + '<\/span><\/div>' +\r\n          '<div class=\"sc-row-r champ-v\"><div class=\"v1\">' + fmt(aC) + ' <small style=\"font-size:10px;font-weight:500;color:#10B981\">kWh<\/small><\/div><div class=\"v2\">' + fmtD(cC) + ' \/yr<\/div><\/div><\/div>' +\r\n        '<div class=\"sc-hl ' + (p?'pos':'neg') + '\">' +\r\n          '<div><div class=\"sc-hl-lbl\">' + t('labelAnnualSaving') + '<\/div><div class=\"sc-hl-amt ' + (p?'pos':'neg') + '\">' + (p?'':'\\u2212') + fmtD(cS) + '<\/div><\/div>' +\r\n          '<div class=\"sc-hl-r\"><div class=\"sc-hl-kwh ' + (p?'pos':'neg') + '\">' + fmt(Math.abs(Math.round(sK))) + ' kWh<\/div>' +\r\n            '<div class=\"sc-hl-pct ' + (p?'pos':'neg') + '\">' + (p?'\\u2193':'\\u2191') + ' ' + Math.abs(sP).toFixed(0) + '%<\/div><\/div>' +\r\n        '<\/div>' +\r\n      '<\/div>';\r\n  }\r\n\r\n  window.calc = function() {\r\n    var s = spec(), _em = em(), _um = um(), _ei = ei(), _ui = ui(), _tr = tr();\r\n    $('modelLabel').textContent = s.modelFull;\r\n    $('energyLabel').textContent = _em === 'kwh' ? t('labelEnergyKwh') : t('labelPowerKw');\r\n\r\n    if (_em === 'total_power') $('energyHint').textContent = t('hintUtilization').replace('{val}', (_ei * 0.8).toFixed(1));\r\n    else $('energyHint').textContent = '';\r\n\r\n    var dH = _um === 'hours' ? _ui : _ui \/ s.racksHr;\r\n    var dR = _um === 'racks' ? _ui : _ui * s.racksHr;\r\n    if (_um === 'hours') {\r\n      $('usageHint').textContent = t('hintRacksDay').replace('{racks}', fmt(Math.round(dR))).replace('{rate}', s.racksHr);\r\n    } else {\r\n      $('usageHint').textContent = t('hintHrsDay').replace('{hrs}', dH.toFixed(1)).replace('{rate}', s.racksHr);\r\n    }\r\n\r\n    var exK = _em === 'kwh' ? _ei : _ei * 0.8;\r\n    var aEx = exK * dH * 365, aMk = s.marketKwh * dH * 365, aCh = s.championKwh * dH * 365;\r\n    var sE = aEx - aCh, sEP = aEx > 0 ? (sE\/aEx)*100 : 0;\r\n    var sM = aMk - aCh, sMP = aMk > 0 ? (sM\/aMk)*100 : 0;\r\n\r\n    var chartLabels = [t('chartYourExisting'), t('chartMarketAvg'), t('chartChampion')];\r\n    var data = [Math.max(0,Math.round(aEx)), Math.max(0,Math.round(aMk)), Math.max(0,Math.round(aCh))];\r\n    var colors = ['#EF4444','#F59E0B','#10B981'];\r\n\r\n    if (chart) {\r\n      chart.data.labels = chartLabels;\r\n      chart.data.datasets[0].data = data;\r\n      chart.update('none');\r\n    } else {\r\n      chart = new Chart($('energyChart').getContext('2d'), {\r\n        type: 'bar',\r\n        data: { labels: chartLabels, datasets: [{ data: data, backgroundColor: colors, borderRadius: 8, maxBarThickness: 52 }] },\r\n        options: {\r\n          responsive: true, maintainAspectRatio: false,\r\n          plugins: {\r\n            legend: { display: false },\r\n            tooltip: { backgroundColor: '#1F2937', titleFont: { family:'Inter', size:12 }, bodyFont: { family:'Inter', size:12 }, cornerRadius: 8, padding: 10,\r\n              callbacks: { label: function(c) { return t('tooltipKwhYear').replace('{val}', fmt(c.raw)); } } }\r\n          },\r\n          scales: {\r\n            x: { grid: { display: false }, ticks: { font: { family:'Inter', size:11, weight:'500' }, color: '#6B7280' }, border: { display: false } },\r\n            y: { grid: { color: '#F3F4F6' }, ticks: { font: { family:'Inter', size:10 }, color: '#9CA3AF', callback: function(v) { return v>=1000?(v\/1000).toFixed(0)+'k':v; } }, border: { display: false } }\r\n          },\r\n          animation: { duration: 300 }\r\n        },\r\n        plugins: [{\r\n          afterDatasetsDraw: function(ch) {\r\n            var ctx = ch.ctx; ctx.save();\r\n            ctx.font = '700 12px Inter, sans-serif';\r\n            ctx.fillStyle = '#374151';\r\n            ctx.textAlign = 'center';\r\n            ch.getDatasetMeta(0).data.forEach(function(bar, i) {\r\n              ctx.fillText(fmt(ch.data.datasets[0].data[i]), bar.x, bar.y - 8);\r\n            });\r\n            ctx.restore();\r\n          }\r\n        }]\r\n      });\r\n    }\r\n\r\n    renderCard($('cardExisting'), t('cardVsExisting'), iconEx,\r\n      t('labelYourExisting'), 'Champion ' + s.model,\r\n      aEx, aCh, aEx*_tr, aCh*_tr, sE, sEP, sE*_tr, '#EF4444');\r\n    renderCard($('cardMarket'), t('cardVsMarket'), iconMkt,\r\n      t('labelMarketAvg'), 'Champion ' + s.model,\r\n      aMk, aCh, aMk*_tr, aCh*_tr, sM, sMP, sM*_tr, '#F59E0B');\r\n  };\r\n\r\n  \/* \u2500\u2500 Init \u2500\u2500 *\/\r\n  applyI18n();\r\n  calc();\r\n})();\r\n<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8996","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/champion-chem.com\/cn\/wp-json\/wp\/v2\/pages\/8996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/champion-chem.com\/cn\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/champion-chem.com\/cn\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/champion-chem.com\/cn\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/champion-chem.com\/cn\/wp-json\/wp\/v2\/comments?post=8996"}],"version-history":[{"count":2,"href":"https:\/\/champion-chem.com\/cn\/wp-json\/wp\/v2\/pages\/8996\/revisions"}],"predecessor-version":[{"id":8998,"href":"https:\/\/champion-chem.com\/cn\/wp-json\/wp\/v2\/pages\/8996\/revisions\/8998"}],"wp:attachment":[{"href":"https:\/\/champion-chem.com\/cn\/wp-json\/wp\/v2\/media?parent=8996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}