{"id":2570,"date":"2026-08-11T09:30:55","date_gmt":"2026-08-11T09:30:55","guid":{"rendered":"https:\/\/www.chinaculturepro.com\/?p=2570"},"modified":"2026-08-17T11:49:33","modified_gmt":"2026-08-17T11:49:33","slug":"kalkulator-kecocokan-shio-tiongkok","status":"publish","type":"post","link":"https:\/\/www.chinaculturepro.com\/id\/chinese-zodiac-compatibility-calculator\/","title":{"rendered":"Kalkulator Kecocokan Shio Tiongkok"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2570\" class=\"elementor elementor-2570\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dddcc2a e-flex e-con-boxed e-con e-parent\" data-id=\"dddcc2a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1709cf8 elementor-widget elementor-widget-html\" data-id=\"1709cf8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"ccp-compatibility-calculator\" class=\"ccp-compatibility-tool\" aria-labelledby=\"ccp-compatibility-title\">\n  <style>\n    #ccp-compatibility-calculator {\n      --ccp-red: #9f2f25;\n      --ccp-red-dark: #7d211a;\n      --ccp-gold: #b68a43;\n      --ccp-gold-soft: #e7d5b6;\n      --ccp-ink: #24201c;\n      --ccp-muted: #70685f;\n      --ccp-cream: #f7f3eb;\n      --ccp-paper: #fffdf9;\n      --ccp-white: #ffffff;\n      --ccp-line: #e7ded1;\n      --ccp-positive: #356d52;\n      --ccp-positive-bg: #eef7f1;\n      --ccp-mixed: #8a5b19;\n      --ccp-mixed-bg: #fff7e8;\n      --ccp-negative: #963328;\n      --ccp-negative-bg: #fff1ee;\n      --ccp-neutral: #5f6570;\n      --ccp-neutral-bg: #f3f4f6;\n      --ccp-shadow: 0 18px 50px rgba(62, 43, 25, 0.10);\n      width: 100%;\n      max-width: 100%;\n      min-width: 0;\n      overflow-x: clip;\n      color: var(--ccp-ink);\n      font-family: var(--e-global-typography-text-font-family, Inter), Arial, sans-serif;\n    }\n\n    #ccp-compatibility-calculator,\n    #ccp-compatibility-calculator * {\n      box-sizing: border-box;\n    }\n\n    #ccp-compatibility-calculator [hidden] {\n      display: none !important;\n    }\n\n    #ccp-compatibility-calculator button,\n    #ccp-compatibility-calculator input,\n    #ccp-compatibility-calculator select {\n      font: inherit;\n    }\n\n    #ccp-compatibility-calculator .ccp-shell {\n      position: relative;\n      width: 100%;\n      max-width: 1160px;\n      min-width: 0;\n      margin: 0 auto;\n      overflow: hidden;\n      border: 1px solid var(--ccp-line);\n      border-radius: 24px;\n      background:\n        radial-gradient(circle at 92% 4%, rgba(182, 138, 67, 0.14), transparent 25%),\n        linear-gradient(145deg, #fffefa 0%, var(--ccp-cream) 100%);\n      box-shadow: var(--ccp-shadow);\n    }\n\n    #ccp-compatibility-calculator .ccp-shell::before,\n    #ccp-compatibility-calculator .ccp-shell::after {\n      position: absolute;\n      content: \"\";\n      border-radius: 50%;\n      pointer-events: none;\n    }\n\n    #ccp-compatibility-calculator .ccp-shell::before {\n      top: -82px;\n      right: -72px;\n      width: 230px;\n      height: 230px;\n      border: 1px solid rgba(159, 47, 37, 0.15);\n    }\n\n    #ccp-compatibility-calculator .ccp-shell::after {\n      top: -36px;\n      right: -26px;\n      width: 132px;\n      height: 132px;\n      border: 1px solid rgba(182, 138, 67, 0.24);\n    }\n\n    #ccp-compatibility-calculator h2,\n    #ccp-compatibility-calculator h3,\n    #ccp-compatibility-calculator h4,\n    #ccp-compatibility-calculator p {\n      max-width: 100%;\n      min-width: 0;\n      margin-top: 0;\n      overflow-wrap: break-word;\n    }\n\n    #ccp-compatibility-calculator .ccp-intro {\n      position: relative;\n      z-index: 1;\n      padding: 48px 48px 30px;\n      text-align: center;\n    }\n\n    #ccp-compatibility-calculator .ccp-kicker {\n      display: inline-flex;\n      align-items: center;\n      gap: 9px;\n      margin-bottom: 14px;\n      color: var(--ccp-red);\n      font-size: 12px;\n      font-weight: 800;\n      line-height: 1.3;\n      letter-spacing: 0.16em;\n      text-transform: uppercase;\n    }\n\n    #ccp-compatibility-calculator .ccp-kicker::before,\n    #ccp-compatibility-calculator .ccp-kicker::after {\n      width: 26px;\n      height: 1px;\n      content: \"\";\n      background: var(--ccp-gold);\n    }\n\n    #ccp-compatibility-calculator .ccp-intro h2 {\n      max-width: 820px;\n      margin: 0 auto 14px;\n      color: var(--ccp-ink);\n      font-family: var(--e-global-typography-primary-font-family, Georgia), serif;\n      font-size: clamp(30px, 4.5vw, 48px);\n      font-weight: 650;\n      line-height: 1.12;\n      letter-spacing: -0.025em;\n    }\n\n    #ccp-compatibility-calculator .ccp-intro p {\n      max-width: 760px;\n      margin: 0 auto;\n      color: var(--ccp-muted);\n      font-size: 16px;\n      line-height: 1.75;\n    }\n\n    #ccp-compatibility-calculator .ccp-form-wrap {\n      position: relative;\n      z-index: 2;\n      width: 100%;\n      max-width: 930px;\n      min-width: 0;\n      margin: 0 auto;\n      padding: 0 48px 50px;\n    }\n\n    #ccp-compatibility-calculator .ccp-form-panel {\n      min-width: 0;\n      padding: 24px;\n      border: 1px solid rgba(182, 138, 67, 0.32);\n      border-radius: 18px;\n      background: rgba(255, 255, 255, 0.9);\n      box-shadow: 0 10px 30px rgba(62, 43, 25, 0.07);\n      backdrop-filter: blur(6px);\n    }\n\n    #ccp-compatibility-calculator .ccp-mode-switch,\n    #ccp-compatibility-calculator .ccp-entry-switch {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 6px;\n      min-width: 0;\n      padding: 5px;\n      border: 1px solid var(--ccp-line);\n      border-radius: 13px;\n      background: #f3eee6;\n    }\n\n    #ccp-compatibility-calculator .ccp-mode-switch {\n      margin-bottom: 22px;\n    }\n\n    #ccp-compatibility-calculator .ccp-entry-switch {\n      max-width: 520px;\n      margin: 0 auto 22px;\n    }\n\n    #ccp-compatibility-calculator .ccp-switch-button {\n      min-width: 0;\n      min-height: 46px;\n      padding: 9px 14px;\n      border: 0;\n      border-radius: 9px;\n      background: transparent;\n      color: var(--ccp-muted);\n      font-size: 14px;\n      font-weight: 750;\n      line-height: 1.25;\n      white-space: normal;\n      overflow-wrap: anywhere;\n      cursor: pointer;\n      transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    #ccp-compatibility-calculator .ccp-switch-button.is-active {\n      background: var(--ccp-white);\n      color: var(--ccp-red-dark);\n      box-shadow: 0 3px 12px rgba(62, 43, 25, 0.09);\n    }\n\n    #ccp-compatibility-calculator .ccp-switch-button:focus-visible,\n    #ccp-compatibility-calculator .ccp-submit:focus-visible,\n    #ccp-compatibility-calculator .ccp-reset:focus-visible,\n    #ccp-compatibility-calculator .ccp-link-card:focus-visible {\n      outline: 3px solid rgba(182, 138, 67, 0.4);\n      outline-offset: 3px;\n    }\n\n    #ccp-compatibility-calculator .ccp-panel,\n    #ccp-compatibility-calculator .ccp-person-input,\n    #ccp-compatibility-calculator .ccp-field,\n    #ccp-compatibility-calculator .ccp-manual-field {\n      min-width: 0;\n    }\n\n    #ccp-compatibility-calculator .ccp-person-input-grid,\n    #ccp-compatibility-calculator .ccp-zodiac-select-grid {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 16px;\n      min-width: 0;\n    }\n\n    #ccp-compatibility-calculator .ccp-person-input {\n      padding: 20px;\n      border: 1px solid var(--ccp-line);\n      border-radius: 14px;\n      background: #fffdfa;\n    }\n\n    #ccp-compatibility-calculator .ccp-person-label {\n      display: flex;\n      align-items: center;\n      gap: 9px;\n      margin-bottom: 15px;\n      color: var(--ccp-red-dark);\n      font-size: 16px;\n      font-weight: 800;\n      line-height: 1.3;\n    }\n\n    #ccp-compatibility-calculator .ccp-person-number {\n      display: inline-grid;\n      flex: 0 0 30px;\n      width: 30px;\n      height: 30px;\n      place-items: center;\n      border-radius: 50%;\n      background: #fff2ed;\n      color: var(--ccp-red);\n      font-size: 13px;\n      font-weight: 800;\n    }\n\n    #ccp-compatibility-calculator .ccp-field label,\n    #ccp-compatibility-calculator .ccp-manual-field label {\n      display: block;\n      margin-bottom: 8px;\n      color: var(--ccp-ink);\n      font-size: 13px;\n      font-weight: 700;\n      line-height: 1.35;\n    }\n\n    #ccp-compatibility-calculator .ccp-field input,\n    #ccp-compatibility-calculator .ccp-field select,\n    #ccp-compatibility-calculator .ccp-manual-field input {\n      display: block;\n      width: 100%;\n      max-width: 100%;\n      min-width: 0;\n      min-height: 52px;\n      padding: 11px 14px;\n      border: 1px solid #d8cec0;\n      border-radius: 11px;\n      outline: none;\n      background: var(--ccp-white);\n      color: var(--ccp-ink);\n      font-size: 16px;\n      line-height: 1.3;\n      transition: border-color 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    #ccp-compatibility-calculator .ccp-field select {\n      padding-right: 38px;\n      cursor: pointer;\n    }\n\n    #ccp-compatibility-calculator .ccp-field input:focus,\n    #ccp-compatibility-calculator .ccp-field select:focus,\n    #ccp-compatibility-calculator .ccp-manual-field input:focus {\n      border-color: var(--ccp-red);\n      box-shadow: 0 0 0 4px rgba(159, 47, 37, 0.10);\n    }\n\n    #ccp-compatibility-calculator input[type=\"date\"]::-webkit-date-and-time-value {\n      min-width: 0;\n      text-align: left;\n    }\n\n    #ccp-compatibility-calculator .ccp-manual-date-grid {\n      display: grid;\n      grid-template-columns: 1.25fr 1fr 1fr;\n      gap: 10px;\n      min-width: 0;\n    }\n\n    #ccp-compatibility-calculator .ccp-form-help {\n      margin: 12px 0 0;\n      color: var(--ccp-muted);\n      font-size: 12.5px;\n      line-height: 1.55;\n      text-align: center;\n    }\n\n    #ccp-compatibility-calculator .ccp-submit,\n    #ccp-compatibility-calculator .ccp-reset {\n      min-height: 54px;\n      border-radius: 11px;\n      font-size: 15px;\n      font-weight: 800;\n      line-height: 1;\n      cursor: pointer;\n      transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;\n    }\n\n    #ccp-compatibility-calculator .ccp-submit {\n      width: 100%;\n      margin-top: 20px;\n      padding: 0 25px;\n      border: 1px solid var(--ccp-red);\n      background: var(--ccp-red);\n      color: var(--ccp-white);\n      box-shadow: 0 8px 20px rgba(159, 47, 37, 0.20);\n    }\n\n    #ccp-compatibility-calculator .ccp-submit:hover,\n    #ccp-compatibility-calculator .ccp-submit:focus-visible {\n      background: var(--ccp-red-dark);\n      transform: translateY(-1px);\n    }\n\n    #ccp-compatibility-calculator .ccp-error {\n      margin: 14px 0 0;\n      padding: 11px 13px;\n      border-left: 3px solid var(--ccp-red);\n      border-radius: 7px;\n      background: #fff2ef;\n      color: #75261f;\n      font-size: 14px;\n      line-height: 1.5;\n    }\n\n    #ccp-compatibility-calculator .ccp-results {\n      min-width: 0;\n      border-top: 1px solid var(--ccp-line);\n      background: var(--ccp-paper);\n    }\n\n    #ccp-compatibility-calculator .ccp-result-inner {\n      width: 100%;\n      max-width: 1050px;\n      min-width: 0;\n      margin: 0 auto;\n      padding: 50px 48px 54px;\n    }\n\n    #ccp-compatibility-calculator .ccp-result-heading {\n      margin-bottom: 28px;\n      text-align: center;\n    }\n\n    #ccp-compatibility-calculator .ccp-result-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      margin-bottom: 12px;\n      padding: 7px 12px;\n      border-radius: 999px;\n      font-size: 12px;\n      font-weight: 850;\n      line-height: 1.2;\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n    }\n\n    #ccp-compatibility-calculator .ccp-result-badge.is-supportive {\n      background: var(--ccp-positive-bg);\n      color: var(--ccp-positive);\n    }\n\n    #ccp-compatibility-calculator .ccp-result-badge.is-mixed {\n      background: var(--ccp-mixed-bg);\n      color: var(--ccp-mixed);\n    }\n\n    #ccp-compatibility-calculator .ccp-result-badge.is-challenging {\n      background: var(--ccp-negative-bg);\n      color: var(--ccp-negative);\n    }\n\n    #ccp-compatibility-calculator .ccp-result-badge.is-neutral,\n    #ccp-compatibility-calculator .ccp-result-badge.is-same {\n      background: var(--ccp-neutral-bg);\n      color: var(--ccp-neutral);\n    }\n\n    #ccp-compatibility-calculator .ccp-result-heading h3 {\n      max-width: 820px;\n      margin: 0 auto 12px;\n      color: var(--ccp-ink);\n      font-family: var(--e-global-typography-primary-font-family, Georgia), serif;\n      font-size: clamp(26px, 3.8vw, 38px);\n      font-weight: 650;\n      line-height: 1.2;\n      letter-spacing: -0.02em;\n    }\n\n    #ccp-compatibility-calculator .ccp-result-summary {\n      max-width: 790px;\n      margin: 0 auto;\n      color: var(--ccp-muted);\n      font-size: 15px;\n      line-height: 1.72;\n    }\n\n    #ccp-compatibility-calculator .ccp-profile-grid {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 16px;\n      min-width: 0;\n      margin-bottom: 38px;\n    }\n\n    #ccp-compatibility-calculator .ccp-profile-card {\n      position: relative;\n      min-width: 0;\n      padding: 22px;\n      overflow: hidden;\n      border: 1px solid var(--ccp-line);\n      border-radius: 15px;\n      background: var(--ccp-white);\n    }\n\n    #ccp-compatibility-calculator .ccp-profile-card::after {\n      position: absolute;\n      top: 13px;\n      right: 17px;\n      color: rgba(159, 47, 37, 0.09);\n      content: attr(data-icon);\n      font-size: 64px;\n      line-height: 1;\n      pointer-events: none;\n    }\n\n    #ccp-compatibility-calculator .ccp-profile-label {\n      display: block;\n      margin-bottom: 8px;\n      color: var(--ccp-gold);\n      font-size: 12px;\n      font-weight: 850;\n      letter-spacing: 0.11em;\n      text-transform: uppercase;\n    }\n\n    #ccp-compatibility-calculator .ccp-profile-card h4 {\n      position: relative;\n      z-index: 1;\n      margin: 0 0 14px;\n      padding-right: 54px;\n      color: var(--ccp-red-dark);\n      font-size: 23px;\n      font-weight: 800;\n      line-height: 1.3;\n    }\n\n    #ccp-compatibility-calculator .ccp-profile-list {\n      position: relative;\n      z-index: 1;\n      display: grid;\n      gap: 8px;\n      margin: 0;\n    }\n\n    #ccp-compatibility-calculator .ccp-profile-row {\n      display: grid;\n      grid-template-columns: minmax(108px, 0.42fr) minmax(0, 1fr);\n      gap: 12px;\n      min-width: 0;\n      padding-top: 8px;\n      border-top: 1px solid #f0e9df;\n    }\n\n    #ccp-compatibility-calculator .ccp-profile-row:first-child {\n      padding-top: 0;\n      border-top: 0;\n    }\n\n    #ccp-compatibility-calculator .ccp-profile-term {\n      color: var(--ccp-muted);\n      font-size: 12.5px;\n      font-weight: 700;\n      line-height: 1.45;\n    }\n\n    #ccp-compatibility-calculator .ccp-profile-value {\n      min-width: 0;\n      color: var(--ccp-ink);\n      font-size: 13.5px;\n      font-weight: 650;\n      line-height: 1.48;\n      overflow-wrap: anywhere;\n    }\n\n    #ccp-compatibility-calculator .ccp-section {\n      min-width: 0;\n      margin-top: 38px;\n      padding-top: 34px;\n      border-top: 1px solid var(--ccp-line);\n    }\n\n    #ccp-compatibility-calculator .ccp-section-heading {\n      margin-bottom: 18px;\n    }\n\n    #ccp-compatibility-calculator .ccp-section-heading h3 {\n      margin: 0 0 7px;\n      color: var(--ccp-ink);\n      font-family: var(--e-global-typography-primary-font-family, Georgia), serif;\n      font-size: 27px;\n      font-weight: 650;\n      line-height: 1.3;\n    }\n\n    #ccp-compatibility-calculator .ccp-section-heading p {\n      margin: 0;\n      color: var(--ccp-muted);\n      font-size: 14px;\n      line-height: 1.65;\n    }\n\n    #ccp-compatibility-calculator .ccp-relation-grid {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 13px;\n      min-width: 0;\n    }\n\n    #ccp-compatibility-calculator .ccp-relation-card {\n      min-width: 0;\n      padding: 19px;\n      border: 1px solid var(--ccp-line);\n      border-radius: 14px;\n      background: var(--ccp-white);\n    }\n\n    #ccp-compatibility-calculator .ccp-relation-card.is-positive {\n      border-left: 4px solid var(--ccp-positive);\n    }\n\n    #ccp-compatibility-calculator .ccp-relation-card.is-negative {\n      border-left: 4px solid var(--ccp-negative);\n    }\n\n    #ccp-compatibility-calculator .ccp-relation-card.is-neutral {\n      border-left: 4px solid var(--ccp-neutral);\n    }\n\n    #ccp-compatibility-calculator .ccp-relation-card h4 {\n      margin: 0 0 8px;\n      color: var(--ccp-red-dark);\n      font-size: 17px;\n      font-weight: 800;\n      line-height: 1.35;\n    }\n\n    #ccp-compatibility-calculator .ccp-relation-card p {\n      margin: 0;\n      color: var(--ccp-muted);\n      font-size: 13.5px;\n      line-height: 1.65;\n    }\n\n    #ccp-compatibility-calculator .ccp-practical-grid {\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n      gap: 13px;\n      min-width: 0;\n    }\n\n    #ccp-compatibility-calculator .ccp-practical-card {\n      min-width: 0;\n      padding: 19px;\n      border: 1px solid var(--ccp-line);\n      border-radius: 14px;\n      background: #fffdfa;\n    }\n\n    #ccp-compatibility-calculator .ccp-practical-card h4 {\n      margin: 0 0 8px;\n      color: var(--ccp-red-dark);\n      font-size: 16px;\n      font-weight: 800;\n      line-height: 1.35;\n    }\n\n    #ccp-compatibility-calculator .ccp-practical-card p {\n      margin: 0;\n      color: var(--ccp-muted);\n      font-size: 13.5px;\n      line-height: 1.62;\n    }\n\n    #ccp-compatibility-calculator .ccp-links-grid {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 12px;\n      min-width: 0;\n    }\n\n    #ccp-compatibility-calculator .ccp-link-card {\n      display: grid;\n      grid-template-columns: minmax(0, 1fr) auto;\n      gap: 14px;\n      align-items: center;\n      min-width: 0;\n      padding: 17px 18px;\n      border: 1px solid var(--ccp-line);\n      border-radius: 12px;\n      background: var(--ccp-white);\n      color: inherit;\n      text-decoration: none;\n      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;\n    }\n\n    #ccp-compatibility-calculator .ccp-link-card:hover {\n      border-color: rgba(159, 47, 37, 0.38);\n      box-shadow: 0 8px 22px rgba(62, 43, 25, 0.08);\n      transform: translateY(-2px);\n    }\n\n    #ccp-compatibility-calculator .ccp-link-title {\n      display: block;\n      margin-bottom: 4px;\n      color: var(--ccp-red-dark);\n      font-size: 15px;\n      font-weight: 800;\n      line-height: 1.4;\n      overflow-wrap: anywhere;\n    }\n\n    #ccp-compatibility-calculator .ccp-link-desc {\n      display: block;\n      color: var(--ccp-muted);\n      font-size: 12.5px;\n      line-height: 1.5;\n      overflow-wrap: anywhere;\n    }\n\n    #ccp-compatibility-calculator .ccp-link-arrow {\n      color: var(--ccp-gold);\n      font-size: 22px;\n      line-height: 1;\n    }\n\n    #ccp-compatibility-calculator .ccp-disclaimer {\n      margin: 28px 0 0;\n      padding: 16px 18px;\n      border: 1px solid #eadfce;\n      border-radius: 12px;\n      background: #faf6ef;\n      color: #746b62;\n      font-size: 12px;\n      line-height: 1.65;\n    }\n\n    #ccp-compatibility-calculator .ccp-result-actions {\n      margin-top: 26px;\n      text-align: center;\n    }\n\n    #ccp-compatibility-calculator .ccp-reset {\n      min-height: 46px;\n      padding: 0 20px;\n      border: 1px solid #cfc3b3;\n      background: transparent;\n      color: var(--ccp-ink);\n    }\n\n    #ccp-compatibility-calculator .ccp-reset:hover {\n      border-color: var(--ccp-red);\n      color: var(--ccp-red);\n    }\n\n    @media (max-width: 820px) {\n      #ccp-compatibility-calculator .ccp-intro {\n        padding: 40px 28px 26px;\n      }\n\n      #ccp-compatibility-calculator .ccp-form-wrap {\n        padding: 0 28px 40px;\n      }\n\n      #ccp-compatibility-calculator .ccp-result-inner {\n        padding: 42px 28px 46px;\n      }\n\n      #ccp-compatibility-calculator .ccp-practical-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n\n    @media (max-width: 640px) {\n      #ccp-compatibility-calculator {\n        overflow-x: hidden;\n      }\n\n      #ccp-compatibility-calculator .ccp-shell {\n        border-radius: 17px;\n      }\n\n      #ccp-compatibility-calculator .ccp-shell::before {\n        top: -70px;\n        right: -98px;\n        width: 190px;\n        height: 190px;\n      }\n\n      #ccp-compatibility-calculator .ccp-shell::after {\n        top: -28px;\n        right: -50px;\n        width: 110px;\n        height: 110px;\n      }\n\n      #ccp-compatibility-calculator .ccp-intro {\n        padding: 34px 18px 22px;\n      }\n\n      #ccp-compatibility-calculator .ccp-kicker {\n        gap: 7px;\n        font-size: 10.5px;\n        letter-spacing: 0.12em;\n      }\n\n      #ccp-compatibility-calculator .ccp-kicker::before,\n      #ccp-compatibility-calculator .ccp-kicker::after {\n        width: 18px;\n      }\n\n      #ccp-compatibility-calculator .ccp-intro h2 {\n        font-size: clamp(29px, 9vw, 38px);\n        line-height: 1.12;\n      }\n\n      #ccp-compatibility-calculator .ccp-intro p {\n        font-size: 14.5px;\n        line-height: 1.65;\n      }\n\n      #ccp-compatibility-calculator .ccp-form-wrap {\n        padding: 0 14px 30px;\n      }\n\n      #ccp-compatibility-calculator .ccp-form-panel {\n        padding: 15px;\n      }\n\n      #ccp-compatibility-calculator .ccp-mode-switch,\n      #ccp-compatibility-calculator .ccp-entry-switch {\n        gap: 4px;\n        padding: 4px;\n      }\n\n      #ccp-compatibility-calculator .ccp-switch-button {\n        min-height: 44px;\n        padding: 8px 7px;\n        font-size: 12.5px;\n      }\n\n      #ccp-compatibility-calculator .ccp-person-input-grid,\n      #ccp-compatibility-calculator .ccp-zodiac-select-grid,\n      #ccp-compatibility-calculator .ccp-profile-grid,\n      #ccp-compatibility-calculator .ccp-relation-grid,\n      #ccp-compatibility-calculator .ccp-links-grid {\n        grid-template-columns: 1fr;\n      }\n\n      #ccp-compatibility-calculator .ccp-person-input {\n        padding: 16px;\n      }\n\n      #ccp-compatibility-calculator .ccp-manual-date-grid {\n        grid-template-columns: 1.15fr 1fr 1fr;\n        gap: 7px;\n      }\n\n      #ccp-compatibility-calculator .ccp-manual-field label {\n        font-size: 11.5px;\n      }\n\n      #ccp-compatibility-calculator .ccp-manual-field input {\n        min-height: 50px;\n        padding: 10px 9px;\n        font-size: 15px;\n      }\n\n      #ccp-compatibility-calculator .ccp-result-inner {\n        padding: 36px 14px 38px;\n      }\n\n      #ccp-compatibility-calculator .ccp-result-heading h3 {\n        font-size: clamp(25px, 8vw, 34px);\n      }\n\n      #ccp-compatibility-calculator .ccp-result-summary {\n        font-size: 14px;\n        line-height: 1.65;\n      }\n\n      #ccp-compatibility-calculator .ccp-profile-card,\n      #ccp-compatibility-calculator .ccp-relation-card,\n      #ccp-compatibility-calculator .ccp-practical-card {\n        padding: 16px;\n      }\n\n      #ccp-compatibility-calculator .ccp-profile-row {\n        grid-template-columns: 1fr;\n        gap: 3px;\n      }\n\n      #ccp-compatibility-calculator .ccp-section {\n        margin-top: 30px;\n        padding-top: 28px;\n      }\n\n      #ccp-compatibility-calculator .ccp-section-heading h3 {\n        font-size: 24px;\n      }\n\n      #ccp-compatibility-calculator .ccp-link-card {\n        padding: 15px;\n      }\n    }\n\n    @media (max-width: 380px) {\n      #ccp-compatibility-calculator .ccp-mode-switch,\n      #ccp-compatibility-calculator .ccp-entry-switch {\n        grid-template-columns: 1fr;\n      }\n\n      #ccp-compatibility-calculator .ccp-manual-date-grid {\n        grid-template-columns: 1fr;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      #ccp-compatibility-calculator *,\n      #ccp-compatibility-calculator *::before,\n      #ccp-compatibility-calculator *::after {\n        scroll-behavior: auto !important;\n        transition: none !important;\n      }\n    }\n  <\/style>\n\n  <div class=\"ccp-shell\">\n    <div class=\"ccp-intro\">\n      <span class=\"ccp-kicker\">Chinese Zodiac Compatibility<\/span>\n      <h2 id=\"ccp-compatibility-title\">Compare Two Chinese Zodiac Signs<\/h2>\n      <p>\n        Enter two birth dates or choose two zodiac animals to identify Six Harmony,\n        Three Harmonies, clash, harm, punishment, break, self-punishment, or a neutral relationship.\n      <\/p>\n    <\/div>\n\n    <div class=\"ccp-form-wrap\">\n      <div class=\"ccp-form-panel\">\n        <form id=\"ccp-compatibility-form\" novalidate>\n          <div class=\"ccp-mode-switch\" role=\"tablist\" aria-label=\"Compatibility input method\">\n            <button\n              class=\"ccp-switch-button is-active\"\n              type=\"button\"\n              role=\"tab\"\n              aria-selected=\"true\"\n              aria-controls=\"ccp-date-panel\"\n              data-main-mode=\"date\"\n            >By Birth Date<\/button>\n            <button\n              class=\"ccp-switch-button\"\n              type=\"button\"\n              role=\"tab\"\n              aria-selected=\"false\"\n              aria-controls=\"ccp-zodiac-panel\"\n              data-main-mode=\"zodiac\"\n            >By Zodiac Sign<\/button>\n          <\/div>\n\n          <div id=\"ccp-date-panel\" class=\"ccp-panel\" role=\"tabpanel\">\n            <div class=\"ccp-entry-switch\" role=\"tablist\" aria-label=\"Birth date entry method\">\n              <button\n                class=\"ccp-switch-button is-active\"\n                type=\"button\"\n                role=\"tab\"\n                aria-selected=\"true\"\n                data-date-mode=\"picker\"\n              >Select Dates<\/button>\n              <button\n                class=\"ccp-switch-button\"\n                type=\"button\"\n                role=\"tab\"\n                aria-selected=\"false\"\n                data-date-mode=\"manual\"\n              >Type Dates<\/button>\n            <\/div>\n\n            <div id=\"ccp-date-picker-inputs\" class=\"ccp-person-input-grid\">\n              <div class=\"ccp-person-input\">\n                <div class=\"ccp-person-label\"><span class=\"ccp-person-number\">A<\/span> Person A<\/div>\n                <div class=\"ccp-field\">\n                  <label for=\"ccp-date-a\">Gregorian Birth Date<\/label>\n                  <input id=\"ccp-date-a\" type=\"date\" value=\"2000-01-01\" min=\"1900-01-31\" required>\n                <\/div>\n              <\/div>\n\n              <div class=\"ccp-person-input\">\n                <div class=\"ccp-person-label\"><span class=\"ccp-person-number\">B<\/span> Person B<\/div>\n                <div class=\"ccp-field\">\n                  <label for=\"ccp-date-b\">Gregorian Birth Date<\/label>\n                  <input id=\"ccp-date-b\" type=\"date\" value=\"2000-01-01\" min=\"1900-01-31\" required>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <div id=\"ccp-date-manual-inputs\" class=\"ccp-person-input-grid\" hidden>\n              <div class=\"ccp-person-input\">\n                <div class=\"ccp-person-label\"><span class=\"ccp-person-number\">A<\/span> Person A<\/div>\n                <div class=\"ccp-manual-date-grid\">\n                  <div class=\"ccp-manual-field\">\n                    <label for=\"ccp-year-a\">Year<\/label>\n                    <input id=\"ccp-year-a\" type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"4\" value=\"2000\">\n                  <\/div>\n                  <div class=\"ccp-manual-field\">\n                    <label for=\"ccp-month-a\">Month<\/label>\n                    <input id=\"ccp-month-a\" type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"2\" value=\"1\">\n                  <\/div>\n                  <div class=\"ccp-manual-field\">\n                    <label for=\"ccp-day-a\">Day<\/label>\n                    <input id=\"ccp-day-a\" type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"2\" value=\"1\">\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <div class=\"ccp-person-input\">\n                <div class=\"ccp-person-label\"><span class=\"ccp-person-number\">B<\/span> Person B<\/div>\n                <div class=\"ccp-manual-date-grid\">\n                  <div class=\"ccp-manual-field\">\n                    <label for=\"ccp-year-b\">Year<\/label>\n                    <input id=\"ccp-year-b\" type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"4\" value=\"2000\">\n                  <\/div>\n                  <div class=\"ccp-manual-field\">\n                    <label for=\"ccp-month-b\">Month<\/label>\n                    <input id=\"ccp-month-b\" type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"2\" value=\"1\">\n                  <\/div>\n                  <div class=\"ccp-manual-field\">\n                    <label for=\"ccp-day-b\">Day<\/label>\n                    <input id=\"ccp-day-b\" type=\"text\" inputmode=\"numeric\" pattern=\"[0-9]*\" maxlength=\"2\" value=\"1\">\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <p class=\"ccp-form-help\">\n              Birth-date results follow the Chinese New Year boundary, not January 1.\n              Supported dates begin on January 31, 1900.\n            <\/p>\n          <\/div>\n\n          <div id=\"ccp-zodiac-panel\" class=\"ccp-panel\" role=\"tabpanel\" hidden>\n            <div class=\"ccp-zodiac-select-grid\">\n              <div class=\"ccp-person-input\">\n                <div class=\"ccp-person-label\"><span class=\"ccp-person-number\">A<\/span> Person A<\/div>\n                <div class=\"ccp-field\">\n                  <label for=\"ccp-zodiac-a\">Chinese Zodiac Sign<\/label>\n                  <select id=\"ccp-zodiac-a\"><\/select>\n                <\/div>\n              <\/div>\n\n              <div class=\"ccp-person-input\">\n                <div class=\"ccp-person-label\"><span class=\"ccp-person-number\">B<\/span> Person B<\/div>\n                <div class=\"ccp-field\">\n                  <label for=\"ccp-zodiac-b\">Chinese Zodiac Sign<\/label>\n                  <select id=\"ccp-zodiac-b\"><\/select>\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <p class=\"ccp-form-help\">\n              Direct zodiac selection compares only the two year branches and does not calculate birth-year elements or Na Yin.\n            <\/p>\n          <\/div>\n\n          <button class=\"ccp-submit\" type=\"submit\">Check Zodiac Compatibility<\/button>\n          <p id=\"ccp-compatibility-error\" class=\"ccp-error\" role=\"alert\" hidden><\/p>\n        <\/form>\n      <\/div>\n    <\/div>\n\n    <div id=\"ccp-compatibility-results\" class=\"ccp-results\" aria-live=\"polite\" hidden>\n      <div class=\"ccp-result-inner\">\n        <div class=\"ccp-result-heading\">\n          <span id=\"ccp-result-badge\" class=\"ccp-result-badge\"><\/span>\n          <h3 id=\"ccp-result-title\"><\/h3>\n          <p id=\"ccp-result-summary\" class=\"ccp-result-summary\"><\/p>\n        <\/div>\n\n        <div id=\"ccp-profile-grid\" class=\"ccp-profile-grid\"><\/div>\n\n        <section class=\"ccp-section\" aria-labelledby=\"ccp-relations-heading\">\n          <div class=\"ccp-section-heading\">\n            <h3 id=\"ccp-relations-heading\">Traditional Branch Relationships<\/h3>\n            <p>The calculator displays every relationship that applies, including combinations with both supportive and challenging signals.<\/p>\n          <\/div>\n          <div id=\"ccp-relation-grid\" class=\"ccp-relation-grid\"><\/div>\n        <\/section>\n\n        <section class=\"ccp-section\" aria-labelledby=\"ccp-practical-heading\">\n          <div class=\"ccp-section-heading\">\n            <h3 id=\"ccp-practical-heading\">How to Read This Match<\/h3>\n            <p>These interpretations describe broad tendencies associated with the two year branches.<\/p>\n          <\/div>\n          <div id=\"ccp-practical-grid\" class=\"ccp-practical-grid\"><\/div>\n        <\/section>\n\n        <section class=\"ccp-section\" aria-labelledby=\"ccp-links-heading\">\n          <div class=\"ccp-section-heading\">\n            <h3 id=\"ccp-links-heading\">Explore the Related Zodiac Guides<\/h3>\n            <p>Read the relevant animal, birth-year, Five Elements, and compatibility pages for more context.<\/p>\n          <\/div>\n          <div id=\"ccp-links-grid\" class=\"ccp-links-grid\"><\/div>\n        <\/section>\n\n        <p class=\"ccp-disclaimer\">\n          Chinese zodiac compatibility compares only the year branches. A complete Ba Zi compatibility reading also considers the year,\n          month, day, and hour pillars. Six Break classifications can vary between traditional schools. Use this result as a cultural\n          reference rather than a final judgment about a marriage, friendship, family relationship, or business partnership.\n        <\/p>\n\n        <div class=\"ccp-result-actions\">\n          <button id=\"ccp-compatibility-reset\" class=\"ccp-reset\" type=\"button\">Check Another Pair<\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <script data-no-defer=\"1\">\n    (function () {\n      \"use strict\";\n\n      \/* ccp-zodiac-compatibility-calculator-init *\/\n\n      const root = document.getElementById(\"ccp-compatibility-calculator\");\n      if (!root || root.dataset.initialized === \"true\") return;\n      root.dataset.initialized = \"true\";\n\n      const form = root.querySelector(\"#ccp-compatibility-form\");\n      const mainModeButtons = Array.from(root.querySelectorAll(\"[data-main-mode]\"));\n      const dateModeButtons = Array.from(root.querySelectorAll(\"[data-date-mode]\"));\n      const datePanel = root.querySelector(\"#ccp-date-panel\");\n      const zodiacPanel = root.querySelector(\"#ccp-zodiac-panel\");\n      const pickerInputs = root.querySelector(\"#ccp-date-picker-inputs\");\n      const manualInputs = root.querySelector(\"#ccp-date-manual-inputs\");\n      const dateA = root.querySelector(\"#ccp-date-a\");\n      const dateB = root.querySelector(\"#ccp-date-b\");\n      const zodiacA = root.querySelector(\"#ccp-zodiac-a\");\n      const zodiacB = root.querySelector(\"#ccp-zodiac-b\");\n      const errorBox = root.querySelector(\"#ccp-compatibility-error\");\n      const results = root.querySelector(\"#ccp-compatibility-results\");\n      const resultBadge = root.querySelector(\"#ccp-result-badge\");\n      const resultTitle = root.querySelector(\"#ccp-result-title\");\n      const resultSummary = root.querySelector(\"#ccp-result-summary\");\n      const profileGrid = root.querySelector(\"#ccp-profile-grid\");\n      const relationGrid = root.querySelector(\"#ccp-relation-grid\");\n      const practicalGrid = root.querySelector(\"#ccp-practical-grid\");\n      const linksGrid = root.querySelector(\"#ccp-links-grid\");\n      const resetButton = root.querySelector(\"#ccp-compatibility-reset\");\n\n      const manualFields = {\n        a: {\n          year: root.querySelector(\"#ccp-year-a\"),\n          month: root.querySelector(\"#ccp-month-a\"),\n          day: root.querySelector(\"#ccp-day-a\")\n        },\n        b: {\n          year: root.querySelector(\"#ccp-year-b\"),\n          month: root.querySelector(\"#ccp-month-b\"),\n          day: root.querySelector(\"#ccp-day-b\")\n        }\n      };\n\n      const SITE_URL = \"https:\/\/www.chinaculturepro.com\";\n      const MIN_DATE = \"1900-01-31\";\n      const DEFAULT_DATE = \"2000-01-01\";\n      let mainMode = \"date\";\n      let dateMode = \"picker\";\n\n      const stems = [\n        { en: \"Jia\", zh: \"\u7532\", element: \"Wood\", polarity: \"Yang\" },\n        { en: \"Yi\", zh: \"\u4e59\", element: \"Wood\", polarity: \"Yin\" },\n        { en: \"Bing\", zh: \"\u4e19\", element: \"Fire\", polarity: \"Yang\" },\n        { en: \"Ding\", zh: \"\u4e01\", element: \"Fire\", polarity: \"Yin\" },\n        { en: \"Wu\", zh: \"\u620a\", element: \"Earth\", polarity: \"Yang\" },\n        { en: \"Ji\", zh: \"\u5df1\", element: \"Earth\", polarity: \"Yin\" },\n        { en: \"Geng\", zh: \"\u5e9a\", element: \"Metal\", polarity: \"Yang\" },\n        { en: \"Xin\", zh: \"\u8f9b\", element: \"Metal\", polarity: \"Yin\" },\n        { en: \"Ren\", zh: \"\u58ec\", element: \"Water\", polarity: \"Yang\" },\n        { en: \"Gui\", zh: \"\u7678\", element: \"Water\", polarity: \"Yin\" }\n      ];\n\n      const branches = [\n        { index: 0, en: \"Rat\", zh: \"\u9f20\", branch: \"Zi\", branchZh: \"\u5b50\", slug: \"rat\", icon: \"\ud83d\udc2d\" },\n        { index: 1, en: \"Ox\", zh: \"\u725b\", branch: \"Chou\", branchZh: \"\u4e11\", slug: \"ox\", icon: \"\ud83d\udc2e\" },\n        { index: 2, en: \"Tiger\", zh: \"\u864e\", branch: \"Yin\", branchZh: \"\u5bc5\", slug: \"tiger\", icon: \"\ud83d\udc2f\" },\n        { index: 3, en: \"Rabbit\", zh: \"\u5154\", branch: \"Mao\", branchZh: \"\u536f\", slug: \"rabbit\", icon: \"\ud83d\udc30\" },\n        { index: 4, en: \"Dragon\", zh: \"\u9f99\", branch: \"Chen\", branchZh: \"\u8fb0\", slug: \"dragon\", icon: \"\ud83d\udc32\" },\n        { index: 5, en: \"Snake\", zh: \"\u86c7\", branch: \"Si\", branchZh: \"\u5df3\", slug: \"snake\", icon: \"\ud83d\udc0d\" },\n        { index: 6, en: \"Horse\", zh: \"\u9a6c\", branch: \"Wu\", branchZh: \"\u5348\", slug: \"horse\", icon: \"\ud83d\udc34\" },\n        { index: 7, en: \"Goat\", zh: \"\u7f8a\", branch: \"Wei\", branchZh: \"\u672a\", slug: \"goat\", icon: \"\ud83d\udc11\" },\n        { index: 8, en: \"Monkey\", zh: \"\u7334\", branch: \"Shen\", branchZh: \"\u7533\", slug: \"monkey\", icon: \"\ud83d\udc35\" },\n        { index: 9, en: \"Rooster\", zh: \"\u9e21\", branch: \"You\", branchZh: \"\u9149\", slug: \"rooster\", icon: \"\ud83d\udc14\" },\n        { index: 10, en: \"Dog\", zh: \"\u72d7\", branch: \"Xu\", branchZh: \"\u620c\", slug: \"dog\", icon: \"\ud83d\udc36\" },\n        { index: 11, en: \"Pig\", zh: \"\u732a\", branch: \"Hai\", branchZh: \"\u4ea5\", slug: \"pig\", icon: \"\ud83d\udc37\" }\n      ];\n\n      const naYinPairs = [\n        { en: \"Gold in the Sea\", zh: \"\u6d77\u4e2d\u91d1\" },\n        { en: \"Fire in the Furnace\", zh: \"\u7089\u4e2d\u706b\" },\n        { en: \"Great Forest Wood\", zh: \"\u5927\u6797\u6728\" },\n        { en: \"Roadside Earth\", zh: \"\u8def\u65c1\u571f\" },\n        { en: \"Sword-Edge Metal\", zh: \"\u5251\u950b\u91d1\" },\n        { en: \"Fire on the Mountain\", zh: \"\u5c71\u5934\u706b\" },\n        { en: \"Stream Below the Valley\", zh: \"\u6da7\u4e0b\u6c34\" },\n        { en: \"City-Wall Earth\", zh: \"\u57ce\u5934\u571f\" },\n        { en: \"White Wax Gold\", zh: \"\u767d\u8721\u91d1\" },\n        { en: \"Willow Wood\", zh: \"\u6768\u67f3\u6728\" },\n        { en: \"Spring Water\", zh: \"\u6cc9\u4e2d\u6c34\" },\n        { en: \"Roof Tile Earth\", zh: \"\u5c4b\u4e0a\u571f\" },\n        { en: \"Thunderbolt Fire\", zh: \"\u9739\u96f3\u706b\" },\n        { en: \"Pine and Cypress Wood\", zh: \"\u677e\u67cf\u6728\" },\n        { en: \"Long-Flowing Water\", zh: \"\u957f\u6d41\u6c34\" },\n        { en: \"Gold in the Sand\", zh: \"\u6c99\u4e2d\u91d1\" },\n        { en: \"Fire at the Foot of the Mountain\", zh: \"\u5c71\u4e0b\u706b\" },\n        { en: \"Flatland Wood\", zh: \"\u5e73\u5730\u6728\" },\n        { en: \"Wall Earth\", zh: \"\u58c1\u4e0a\u571f\" },\n        { en: \"Gold Leaf\", zh: \"\u91d1\u7b94\u91d1\" },\n        { en: \"Buddhist Lamp Fire\", zh: \"\u4f5b\u706f\u706b\" },\n        { en: \"Heavenly River Water\", zh: \"\u5929\u6cb3\u6c34\" },\n        { en: \"Great Post-Road Earth\", zh: \"\u5927\u9a7f\u571f\" },\n        { en: \"Hairpin and Bracelet Gold\", zh: \"\u9497\u948f\u91d1\" },\n        { en: \"Mulberry Wood\", zh: \"\u6851\u67d8\u6728\" },\n        { en: \"Great Stream Water\", zh: \"\u5927\u6eaa\u6c34\" },\n        { en: \"Earth in the Sand\", zh: \"\u6c99\u4e2d\u571f\" },\n        { en: \"Heavenly Fire\", zh: \"\u5929\u4e0a\u706b\" },\n        { en: \"Pomegranate Wood\", zh: \"\u77f3\u69b4\u6728\" },\n        { en: \"Great Sea Water\", zh: \"\u5927\u6d77\u6c34\" }\n      ];\n\n      const lunarMonthNames = {\n        \"\u6b63\": \"First Lunar Month\", \"\u4e00\": \"First Lunar Month\", \"\u4e8c\": \"Second Lunar Month\",\n        \"\u4e09\": \"Third Lunar Month\", \"\u56db\": \"Fourth Lunar Month\", \"\u4e94\": \"Fifth Lunar Month\",\n        \"\u516d\": \"Sixth Lunar Month\", \"\u4e03\": \"Seventh Lunar Month\", \"\u516b\": \"Eighth Lunar Month\",\n        \"\u4e5d\": \"Ninth Lunar Month\", \"\u5341\": \"Tenth Lunar Month\", \"\u5341\u4e00\": \"Eleventh Lunar Month\",\n        \"\u51ac\": \"Eleventh Lunar Month\", \"\u5341\u4e8c\": \"Twelfth Lunar Month\", \"\u814a\": \"Twelfth Lunar Month\"\n      };\n\n      const chineseLunarDays = [\n        \"\", \"\u521d\u4e00\", \"\u521d\u4e8c\", \"\u521d\u4e09\", \"\u521d\u56db\", \"\u521d\u4e94\", \"\u521d\u516d\", \"\u521d\u4e03\", \"\u521d\u516b\", \"\u521d\u4e5d\", \"\u521d\u5341\",\n        \"\u5341\u4e00\", \"\u5341\u4e8c\", \"\u5341\u4e09\", \"\u5341\u56db\", \"\u5341\u4e94\", \"\u5341\u516d\", \"\u5341\u4e03\", \"\u5341\u516b\", \"\u5341\u4e5d\", \"\u4e8c\u5341\",\n        \"\u5eff\u4e00\", \"\u5eff\u4e8c\", \"\u5eff\u4e09\", \"\u5eff\u56db\", \"\u5eff\u4e94\", \"\u5eff\u516d\", \"\u5eff\u4e03\", \"\u5eff\u516b\", \"\u5eff\u4e5d\", \"\u4e09\u5341\"\n      ];\n\n      const sixHarmony = {\n        \"0-1\": \"Rat and Ox form the Zi\u2013Chou Six Harmony, traditionally associated with an Earth transformation. This pairing links adaptability with steadiness and is read as a cooperative one-to-one connection.\",\n        \"2-11\": \"Tiger and Pig form the Yin\u2013Hai Six Harmony, traditionally associated with a Wood transformation. Decisiveness and tolerance can support one another and create a warm, generous connection.\",\n        \"3-10\": \"Rabbit and Dog form the Mao\u2013Xu Six Harmony, traditionally associated with a Fire transformation. Sensitivity and loyalty are read as mutually supportive, with trust as the main strength.\",\n        \"4-9\": \"Dragon and Rooster form the Chen\u2013You Six Harmony, traditionally associated with a Metal transformation. Vision and precision can reinforce one another, favoring clear goals and coordinated action.\",\n        \"5-8\": \"Snake and Monkey form the Si\u2013Shen Six Harmony, traditionally associated with a Water transformation. Strategy and adaptability can create quick understanding, clever cooperation, and strong problem-solving energy.\",\n        \"6-7\": \"Horse and Goat form the Wu\u2013Wei Six Harmony, traditionally associated with an Earth transformation. Initiative and gentleness can balance one another, favoring warmth, accommodation, and shared support.\"\n      };\n\n      const threeHarmonyGroups = [\n        { members: [8, 0, 4], branches: \"Shen\u2013Zi\u2013Chen\", element: \"Water\", theme: \"intelligence, flexibility, and movement\" },\n        { members: [11, 3, 7], branches: \"Hai\u2013Mao\u2013Wei\", element: \"Wood\", theme: \"growth, empathy, and cooperation\" },\n        { members: [2, 6, 10], branches: \"Yin\u2013Wu\u2013Xu\", element: \"Fire\", theme: \"initiative, visibility, and action\" },\n        { members: [5, 9, 1], branches: \"Si\u2013You\u2013Chou\", element: \"Metal\", theme: \"discipline, precision, and organization\" }\n      ];\n\n      const sixClash = {\n        \"0-6\": \"Rat and Horse form the Zi\u2013Wu Six Clash. Water and Fire face one another directly, traditionally indicating different pacing, priorities, or ways of responding.\",\n        \"1-7\": \"Ox and Goat form the Chou\u2013Wei Six Clash. Both are Earth branches, but their traditional qualities differ, which can produce stubborn stand-offs or conflicting expectations.\",\n        \"2-8\": \"Tiger and Monkey form the Yin\u2013Shen Six Clash. Direct action and tactical flexibility may collide, creating rivalry, argument, or repeated changes of direction.\",\n        \"3-9\": \"Rabbit and Rooster form the Mao\u2013You Six Clash. Sensitivity and exacting judgment may pull in opposite directions, especially around criticism and personal boundaries.\",\n        \"4-10\": \"Dragon and Dog form the Chen\u2013Xu Six Clash. Both are storage Earth branches, so the traditional reading emphasizes competing positions, principles, or control of shared ground.\",\n        \"5-11\": \"Snake and Pig form the Si\u2013Hai Six Clash. Fire and Water oppose one another, often symbolizing incompatible rhythms, shifting circumstances, or difficulty reading each other.\"\n      };\n\n      const sixHarm = {\n        \"0-7\": \"Rat and Goat form the Zi\u2013Wei Six Harm. The traditional reading suggests subtle disappointment or an unspoken mismatch rather than direct confrontation.\",\n        \"1-6\": \"Ox and Horse form the Chou\u2013Wu Six Harm. Different work rhythms and expectations can create fatigue, frustration, or a sense that cooperation costs too much effort.\",\n        \"2-5\": \"Tiger and Snake form the Yin\u2013Si Six Harm. Strong intentions may be misread, producing suspicion, defensiveness, or recurring misunderstandings.\",\n        \"3-4\": \"Rabbit and Dragon form the Mao\u2013Chen Six Harm. Differences in status, expression, or personal space can create quiet discomfort even when the surface remains polite.\",\n        \"8-11\": \"Monkey and Pig form the Shen\u2013Hai Six Harm. Cleverness and openness may not always align, making trust, promises, or hidden expectations important areas to manage.\",\n        \"9-10\": \"Rooster and Dog form the You\u2013Xu Six Harm. Close interaction can magnify criticism and small disagreements, so tone and respect matter more than usual.\"\n      };\n\n      const punishment = {\n        \"2-5\": \"Tiger and Snake are part of the Yin\u2013Si\u2013Shen punishment structure. Traditional interpretation associates this pairing with recurring friction, suspicion, or disputes over motives.\",\n        \"5-8\": \"Snake and Monkey are part of the Yin\u2013Si\u2013Shen punishment structure. Their quick strategic energy can be productive, but it may also create testing, maneuvering, or repeated misunderstandings.\",\n        \"2-8\": \"Tiger and Monkey are part of the Yin\u2013Si\u2013Shen punishment structure. In addition to their direct clash, the punishment pattern can intensify rivalry and make old disagreements resurface.\",\n        \"1-10\": \"Ox and Dog are part of the Chou\u2013Xu\u2013Wei punishment structure. Traditional readings emphasize disputes over responsibility, authority, or whose position should prevail.\",\n        \"7-10\": \"Goat and Dog are part of the Chou\u2013Xu\u2013Wei punishment structure. Similar Earth qualities can become rigid, producing pressure, resentment, or disputes over obligations.\",\n        \"1-7\": \"Ox and Goat are part of the Chou\u2013Xu\u2013Wei punishment structure. Their Six Clash is reinforced by a punishment pattern associated with stubbornness and competing expectations.\",\n        \"0-3\": \"Rat and Rabbit form the Zi\u2013Mao punishment, traditionally called the Punishment of Discourtesy. It can point to imbalance in giving, receiving, boundaries, or mutual respect.\"\n      };\n\n      const sixBreak = {\n        \"0-9\": \"Rat and Rooster form a Six Break pairing in the selected system. The traditional image is gradual wear: small differences may weaken trust or coordination if left unattended.\",\n        \"2-11\": \"Tiger and Pig are treated as a Six Break pairing in some traditional systems, even though they also form Six Harmony. This creates a mixed reading: attraction and support may coexist with hidden depletion.\",\n        \"3-6\": \"Rabbit and Horse form a Six Break pairing. One person may unintentionally overfeed the other's momentum, leading to imbalance, overextension, or slowly accumulated frustration.\",\n        \"1-4\": \"Ox and Dragon form a Six Break pairing. Similar Earth qualities may compete over stability, control, or resources, producing gradual rather than openly confrontational strain.\",\n        \"5-8\": \"Snake and Monkey form a Six Break pairing in addition to Six Harmony and Punishment. Strong attraction or cooperation may coexist with hidden testing and repeated energy loss.\",\n        \"7-10\": \"Goat and Dog form a Six Break pairing. Shared Earth qualities can become heavy or rigid, with unresolved obligations slowly damaging goodwill.\"\n      };\n\n      const selfPunishment = {\n        4: \"Dragon with Dragon forms Chen\u2013Chen Self-Punishment. Traditional readings associate it with overthinking, repeated internal pressure, or becoming trapped in the same concerns.\",\n        6: \"Horse with Horse forms Wu\u2013Wu Self-Punishment. Strong Fire energy may amplify impatience, emotional intensity, or mutual exhaustion.\",\n        9: \"Rooster with Rooster forms You\u2013You Self-Punishment. Similar standards can intensify criticism, perfectionism, or repeated focus on small faults.\",\n        11: \"Pig with Pig forms Hai\u2013Hai Self-Punishment. Similar Water energy may magnify uncertainty, emotional drift, or prolonged internal rumination.\"\n      };\n\n      const summaryContent = {\n        supportive: {\n          label: \"Supportive Relationship\",\n          summary: \"Traditional year-branch reading shows a clear supportive affinity without a major clash, harm, punishment, or break pattern. This is a favorable starting signal, not a guarantee of compatibility in every area.\"\n        },\n        mixed: {\n          label: \"Mixed Relationship\",\n          summary: \"This pair carries both supportive and challenging branch relationships. Attraction, cooperation, or shared momentum may be strong, while hidden tension or repeated friction still requires deliberate communication.\"\n        },\n        challenging: {\n          label: \"Challenging Relationship\",\n          summary: \"Traditional year-branch reading shows one or more tension patterns. This does not mean the relationship cannot work, but differences are more likely to require boundaries, patience, and active problem-solving.\"\n        },\n        neutral: {\n          label: \"Neutral Relationship\",\n          summary: \"No major harmony, clash, harm, punishment, or break pattern appears between these two year branches. The zodiac provides no strong signal, so personal values and the wider birth charts matter more.\"\n        },\n        same: {\n          label: \"Same Zodiac Relationship\",\n          summary: \"Sharing the same zodiac animal can create familiarity and mutual recognition, but it can also amplify shared weaknesses. The detailed result notes whether this sign is one of the four self-punishment branches.\"\n        }\n      };\n\n      const practicalContent = {\n        supportive: [\n          [\"Love and Relationships\", \"Cooperation may feel natural, especially when each person respects the other's different strengths. Avoid assuming that an easy zodiac signal removes the need for clear expectations.\"],\n          [\"Friendship and Family\", \"Shared trust and smoother coordination may help this pair recover from ordinary disagreements. Family roles still need to remain balanced rather than taken for granted.\"],\n          [\"Work and Business\", \"This pairing can favor complementary roles, mutual reliability, and faster alignment. Define responsibilities clearly so harmony does not become passive agreement.\"]\n        ],\n        mixed: [\n          [\"Love and Relationships\", \"Strong attraction or familiarity may coexist with recurring pressure points. The relationship benefits from naming disagreements early instead of relying on chemistry to solve them.\"],\n          [\"Friendship and Family\", \"This pair may alternate between closeness and irritation. Consistent boundaries and direct explanations help prevent minor issues from turning into repeated patterns.\"],\n          [\"Work and Business\", \"The same differences that create friction can also produce strong results. Separate decision rights, document agreements, and review unresolved issues before they accumulate.\"]\n        ],\n        challenging: [\n          [\"Love and Relationships\", \"Different reactions, priorities, or communication styles may become obvious quickly. Slow down conflict, avoid absolute judgments, and focus on specific behavior rather than zodiac labels.\"],\n          [\"Friendship and Family\", \"Repeated misunderstandings can become more important than any single disagreement. Respectful distance, clear boundaries, and realistic expectations may improve stability.\"],\n          [\"Work and Business\", \"Clarify authority, deadlines, risk tolerance, and dispute procedures before starting shared work. Structure can reduce the friction associated with a challenging branch pattern.\"]\n        ],\n        neutral: [\n          [\"Love and Relationships\", \"The year branches do not provide a strong positive or negative signal. Communication, values, emotional maturity, and the rest of each birth chart will carry more weight.\"],\n          [\"Friendship and Family\", \"This relationship may develop without a strong zodiac push or obstacle. Shared history and everyday behavior are likely to matter more than the animal signs.\"],\n          [\"Work and Business\", \"Assess skills, reliability, authority, and incentives directly. A neutral zodiac relationship neither predicts success nor warns against cooperation.\"]\n        ],\n        same: [\n          [\"Love and Relationships\", \"Similar traits can create quick recognition, but both people may react in the same unhelpful way under pressure. Deliberately introduce different perspectives and conflict habits.\"],\n          [\"Friendship and Family\", \"Mutual understanding may be high, yet shared sensitivities can also be amplified. Give each person room to express the same trait differently.\"],\n          [\"Work and Business\", \"A similar operating style can improve speed but may leave the same blind spots unchallenged. Assign complementary responsibilities and invite outside review when needed.\"]\n        ]\n      };\n\n      function mod(number, divisor) {\n        return ((number % divisor) + divisor) % divisor;\n      }\n\n      function pairKey(aIndex, bIndex) {\n        return aIndex < bIndex ? `${aIndex}-${bIndex}` : `${bIndex}-${aIndex}`;\n      }\n\n      function toLocalISODate(date) {\n        const year = date.getFullYear();\n        const month = String(date.getMonth() + 1).padStart(2, \"0\");\n        const day = String(date.getDate()).padStart(2, \"0\");\n        return `${year}-${month}-${day}`;\n      }\n\n      function parseISODate(value) {\n        const match = \/^(\\d{4})-(\\d{2})-(\\d{2})$\/.exec(value);\n        if (!match) return null;\n\n        const year = Number(match[1]);\n        const month = Number(match[2]);\n        const day = Number(match[3]);\n        const date = new Date(Date.UTC(year, month - 1, day, 12, 0, 0));\n\n        if (\n          date.getUTCFullYear() !== year ||\n          date.getUTCMonth() !== month - 1 ||\n          date.getUTCDate() !== day\n        ) return null;\n\n        return { date, year, month, day, iso: value };\n      }\n\n      function parseManualDate(fields) {\n        const year = Number(fields.year.value.trim());\n        const month = Number(fields.month.value.trim());\n        const day = Number(fields.day.value.trim());\n\n        if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) return null;\n        const iso = `${String(year).padStart(4, \"0\")}-${String(month).padStart(2, \"0\")}-${String(day).padStart(2, \"0\")}`;\n        return parseISODate(iso);\n      }\n\n      function syncManualFromDate(dateInput, fields) {\n        const parsed = parseISODate(dateInput.value);\n        if (!parsed) return;\n        fields.year.value = String(parsed.year);\n        fields.month.value = String(parsed.month);\n        fields.day.value = String(parsed.day);\n      }\n\n      function syncDateFromManual(fields, dateInput) {\n        const parsed = parseManualDate(fields);\n        if (parsed && parsed.iso >= MIN_DATE && parsed.iso <= dateInput.max) {\n          dateInput.value = parsed.iso;\n        }\n      }\n\n      function getLunarParts(date) {\n        if (!window.Intl || !Intl.DateTimeFormat || !Intl.DateTimeFormat.prototype.formatToParts) {\n          throw new Error(\"Your browser does not support the Chinese calendar function required by this calculator.\");\n        }\n\n        const formatter = new Intl.DateTimeFormat(\"zh-CN-u-ca-chinese-nu-latn\", {\n          calendar: \"chinese\",\n          year: \"numeric\",\n          month: \"long\",\n          day: \"numeric\",\n          timeZone: \"UTC\"\n        });\n\n        const parts = formatter.formatToParts(date);\n        const getPart = function (type) {\n          const part = parts.find(function (item) { return item.type === type; });\n          return part ? part.value : \"\";\n        };\n\n        const lunarYear = Number(getPart(\"relatedYear\"));\n        const monthChinese = getPart(\"month\");\n        const lunarDay = Number(getPart(\"day\"));\n\n        if (!lunarYear || !monthChinese || !lunarDay) {\n          throw new Error(\"The lunar date could not be calculated in this browser.\");\n        }\n\n        return { lunarYear, monthChinese, lunarDay };\n      }\n\n      function getLunarMonthEnglish(monthChinese) {\n        const isLeap = monthChinese.startsWith(\"\u95f0\");\n        const key = monthChinese.replace(\"\u95f0\", \"\").replace(\"\u6708\", \"\");\n        const baseName = lunarMonthNames[key] || `${key} Lunar Month`;\n        return isLeap ? `Leap ${baseName}` : baseName;\n      }\n\n      function formatEnglishDate(date) {\n        return new Intl.DateTimeFormat(\"en-US\", {\n          year: \"numeric\", month: \"long\", day: \"numeric\", timeZone: \"UTC\"\n        }).format(date);\n      }\n\n      function getChineseNewYearDate(gregorianYear) {\n        const start = new Date(Date.UTC(gregorianYear, 0, 20, 12, 0, 0));\n        for (let offset = 0; offset < 40; offset += 1) {\n          const candidate = new Date(start.getTime() + offset * 86400000);\n          const lunar = getLunarParts(candidate);\n          if (\n            lunar.lunarYear === gregorianYear &&\n            lunar.monthChinese === \"\u6b63\u6708\" &&\n            lunar.lunarDay === 1\n          ) return candidate;\n        }\n        return null;\n      }\n\n      function getYearProfile(lunarYear) {\n        const stemIndex = mod(lunarYear - 4, 10);\n        const branchIndex = mod(lunarYear - 4, 12);\n        const cycleIndex = mod(lunarYear - 1984, 60);\n        const stem = stems[stemIndex];\n        const branch = branches[branchIndex];\n        const naYin = naYinPairs[Math.floor(cycleIndex \/ 2)];\n        const elementAnimal = `${stem.element} ${branch.en}`;\n        const middleYear = 1960 + mod(lunarYear - 1960, 60);\n\n        return {\n          stem,\n          branch,\n          naYin,\n          elementAnimal,\n          elementAnimalYears: [middleYear - 60, middleYear, middleYear + 60],\n          ganZhiEnglish: `${stem.en} ${branch.branch}`,\n          ganZhiChinese: `${stem.zh}${branch.branchZh}`\n        };\n      }\n\n      function buildDatePerson(parsedDate, label) {\n        const lunar = getLunarParts(parsedDate.date);\n        const profile = getYearProfile(lunar.lunarYear);\n        const cny = getChineseNewYearDate(parsedDate.year);\n        const beforeCny = lunar.lunarYear < parsedDate.year;\n        const lunarMonthEnglish = getLunarMonthEnglish(lunar.monthChinese);\n        const lunarDayChinese = chineseLunarDays[lunar.lunarDay] || String(lunar.lunarDay);\n\n        return {\n          label,\n          mode: \"date\",\n          parsedDate,\n          lunar,\n          profile,\n          branch: profile.branch,\n          gregorianText: formatEnglishDate(parsedDate.date),\n          lunarText: `${lunarMonthEnglish}, Day ${lunar.lunarDay}`,\n          lunarChinese: `\u519c\u5386${profile.ganZhiChinese}\u5e74${lunar.monthChinese}${lunarDayChinese}`,\n          boundaryText: beforeCny && cny\n            ? `Before Chinese New Year on ${formatEnglishDate(cny)}; correct zodiac year: ${lunar.lunarYear}.`\n            : `Chinese zodiac year: ${lunar.lunarYear}.`\n        };\n      }\n\n      function buildZodiacPerson(branch, label) {\n        return { label, mode: \"zodiac\", branch };\n      }\n\n      function getThreeHarmony(aIndex, bIndex) {\n        return threeHarmonyGroups.find(function (group) {\n          return group.members.includes(aIndex) && group.members.includes(bIndex);\n        }) || null;\n      }\n\n      function getRelations(a, b) {\n        const same = a.index === b.index;\n        const key = pairKey(a.index, b.index);\n        const relations = [];\n\n        if (same) {\n          relations.push({\n            type: \"same\",\n            tone: \"neutral\",\n            title: \"Same Zodiac Sign\",\n            text: `${a.en} and ${b.en} share the same zodiac animal and the same ${a.branch} (${a.branchZh}) year branch. Similar traits may create familiarity, but they can also amplify shared habits and blind spots.`\n          });\n\n          if (selfPunishment[a.index]) {\n            relations.push({\n              type: \"self-punishment\",\n              tone: \"negative\",\n              title: \"Self-Punishment (\u81ea\u5211)\",\n              text: selfPunishment[a.index]\n            });\n          }\n          return relations;\n        }\n\n        if (sixHarmony[key]) {\n          relations.push({ type: \"six-harmony\", tone: \"positive\", title: \"Six Harmony (\u516d\u5408)\", text: sixHarmony[key] });\n        }\n\n        const threeHarmony = getThreeHarmony(a.index, b.index);\n        if (threeHarmony) {\n          relations.push({\n            type: \"three-harmonies\",\n            tone: \"positive\",\n            title: \"Three Harmonies Affinity (\u4e09\u5408)\",\n            text: `${a.en} and ${b.en} belong to the ${threeHarmony.branches} Three Harmonies group, associated with the ${threeHarmony.element} phase and themes of ${threeHarmony.theme}. Two signs share the affinity but do not form the complete three-sign combination by themselves.`\n          });\n        }\n\n        if (sixClash[key]) {\n          relations.push({ type: \"six-clash\", tone: \"negative\", title: \"Six Clash (\u516d\u51b2)\", text: sixClash[key] });\n        }\n\n        if (sixHarm[key]) {\n          relations.push({ type: \"six-harm\", tone: \"negative\", title: \"Six Harm (\u516d\u5bb3)\", text: sixHarm[key] });\n        }\n\n        if (punishment[key]) {\n          relations.push({ type: \"punishment\", tone: \"negative\", title: \"Punishment (\u5211)\", text: punishment[key] });\n        }\n\n        if (sixBreak[key]) {\n          relations.push({ type: \"six-break\", tone: \"negative\", title: \"Six Break (\u516d\u7834)\", text: sixBreak[key] });\n        }\n\n        if (!relations.length) {\n          relations.push({\n            type: \"neutral\",\n            tone: \"neutral\",\n            title: \"Neutral Relationship (\u5e73\u652f)\",\n            text: `${a.en} and ${b.en} do not form a major Six Harmony, Three Harmonies affinity, Six Clash, Six Harm, Punishment, or Six Break relationship in this system. This is a neutral year-branch signal, not a negative judgment.`\n          });\n        }\n\n        return relations;\n      }\n\n      function classifyRelationship(a, b, relations) {\n        if (a.index === b.index) return \"same\";\n        const positive = relations.some(function (item) { return item.tone === \"positive\"; });\n        const negative = relations.some(function (item) { return item.tone === \"negative\"; });\n        if (positive && negative) return \"mixed\";\n        if (positive) return \"supportive\";\n        if (negative) return \"challenging\";\n        return \"neutral\";\n      }\n\n      function profileRow(term, value) {\n        return `<div class=\"ccp-profile-row\"><span class=\"ccp-profile-term\">${term}<\/span><span class=\"ccp-profile-value\">${value}<\/span><\/div>`;\n      }\n\n      function profileCard(person) {\n        const branch = person.branch;\n        let rows = \"\";\n        let title = `${branch.en} (${branch.zh})`;\n\n        if (person.mode === \"date\") {\n          const profile = person.profile;\n          title = profile.elementAnimal;\n          rows += profileRow(\"Gregorian Date\", person.gregorianText);\n          rows += profileRow(\"Lunar Birth Date\", `${person.lunarText}<br>${person.lunarChinese}`);\n          rows += profileRow(\"Chinese Zodiac\", `${branch.en} (${branch.zh})`);\n          rows += profileRow(\"Zodiac Year\", `${person.lunar.lunarYear}<br>${person.boundaryText}`);\n          rows += profileRow(\"Gan Zhi\", `${profile.ganZhiEnglish} (${profile.ganZhiChinese})`);\n          rows += profileRow(\"Na Yin\", `${profile.naYin.en} (${profile.naYin.zh})`);\n        } else {\n          rows += profileRow(\"Chinese Zodiac\", `${branch.en} (${branch.zh})`);\n          rows += profileRow(\"Earthly Branch\", `${branch.branch} (${branch.branchZh})`);\n          rows += profileRow(\"Calculation Basis\", \"Year-branch relationship only\");\n        }\n\n        return `\n          <article class=\"ccp-profile-card\" data-icon=\"${branch.icon}\">\n            <span class=\"ccp-profile-label\">${person.label}<\/span>\n            <h4>${title}<\/h4>\n            <div class=\"ccp-profile-list\">${rows}<\/div>\n          <\/article>\n        `;\n      }\n\n      function relationCard(item) {\n        return `\n          <article class=\"ccp-relation-card is-${item.tone}\">\n            <h4>${item.title}<\/h4>\n            <p>${item.text}<\/p>\n          <\/article>\n        `;\n      }\n\n      function practicalCard(item) {\n        return `<article class=\"ccp-practical-card\"><h4>${item[0]}<\/h4><p>${item[1]}<\/p><\/article>`;\n      }\n\n      function linkCard(title, description, url) {\n        return `\n          <a class=\"ccp-link-card\" href=\"${url}\">\n            <span><span class=\"ccp-link-title\">${title}<\/span><span class=\"ccp-link-desc\">${description}<\/span><\/span>\n            <span class=\"ccp-link-arrow\" aria-hidden=\"true\">\u2192<\/span>\n          <\/a>\n        `;\n      }\n\n      function buildLinks(personA, personB) {\n        const links = new Map();\n        const add = function (title, description, url) {\n          if (!links.has(url)) links.set(url, { title, description, url });\n        };\n\n        [personA, personB].forEach(function (person) {\n          const branch = person.branch;\n          add(\n            `Year of the ${branch.en}`,\n            `Explore ${branch.en} years, personality, compatibility, and traditional meanings.`,\n            `${SITE_URL}\/year-of-the-${branch.slug}\/`\n          );\n\n          if (person.mode === \"date\") {\n            const profile = person.profile;\n            add(\n              `${person.lunar.lunarYear} Chinese Zodiac`,\n              `See the exact zodiac date range and profile for the ${person.lunar.lunarYear} lunar year.`,\n              `${SITE_URL}\/${person.lunar.lunarYear}-chinese-zodiac\/`\n            );\n            add(\n              `${profile.elementAnimal} (${profile.elementAnimalYears.join(\", \")})`,\n              `Learn how the ${profile.stem.element} element modifies the ${profile.branch.en} zodiac sign.`,\n              `${SITE_URL}\/${profile.stem.element.toLowerCase()}-${profile.branch.slug}\/`\n            );\n          }\n        });\n\n        add(\n          \"Chinese Zodiac Compatibility\",\n          \"Understand the traditional principles used to compare Chinese zodiac signs.\",\n          `${SITE_URL}\/chinese-zodiac-compatibility\/`\n        );\n\n        add(\n          \"Heavenly Stems & Earthly Branches\",\n          \"Learn how the twelve branches and ten stems form the traditional 60-year cycle.\",\n          `${SITE_URL}\/heavenly-stems-earthly-branches\/`\n        );\n\n        if (personA.mode === \"date\") {\n          add(\n            \"Five Elements Chinese Zodiac\",\n            \"See how Wood, Fire, Earth, Metal, and Water change each zodiac animal.\",\n            `${SITE_URL}\/five-elements-chinese-zodiac\/`\n          );\n          add(\n            \"Na Yin Five Elements\",\n            \"Understand the 30 Na Yin names used across the 60 Gan Zhi combinations.\",\n            `${SITE_URL}\/na-yin-five-elements\/`\n          );\n        }\n\n        return Array.from(links.values());\n      }\n\n      function renderResults(personA, personB) {\n        const relations = getRelations(personA.branch, personB.branch);\n        const category = classifyRelationship(personA.branch, personB.branch, relations);\n        const content = summaryContent[category];\n\n        resultBadge.className = `ccp-result-badge is-${category}`;\n        resultBadge.textContent = content.label;\n        resultTitle.textContent = `${personA.branch.en} and ${personB.branch.en}: ${content.label}`;\n        resultSummary.textContent = content.summary;\n\n        profileGrid.innerHTML = profileCard(personA) + profileCard(personB);\n        relationGrid.innerHTML = relations.map(relationCard).join(\"\");\n        practicalGrid.innerHTML = practicalContent[category].map(practicalCard).join(\"\");\n        linksGrid.innerHTML = buildLinks(personA, personB).map(function (link) {\n          return linkCard(link.title, link.description, link.url);\n        }).join(\"\");\n\n        results.hidden = false;\n        const reduceMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n        results.scrollIntoView({ behavior: reduceMotion ? \"auto\" : \"smooth\", block: \"start\" });\n      }\n\n      function showError(message) {\n        errorBox.textContent = message;\n        errorBox.hidden = false;\n        results.hidden = true;\n      }\n\n      function clearError() {\n        errorBox.textContent = \"\";\n        errorBox.hidden = true;\n      }\n\n      function setMainMode(mode) {\n        mainMode = mode;\n        mainModeButtons.forEach(function (button) {\n          const active = button.dataset.mainMode === mode;\n          button.classList.toggle(\"is-active\", active);\n          button.setAttribute(\"aria-selected\", String(active));\n        });\n        datePanel.hidden = mode !== \"date\";\n        zodiacPanel.hidden = mode !== \"zodiac\";\n        clearError();\n      }\n\n      function setDateMode(mode) {\n        dateMode = mode;\n        dateModeButtons.forEach(function (button) {\n          const active = button.dataset.dateMode === mode;\n          button.classList.toggle(\"is-active\", active);\n          button.setAttribute(\"aria-selected\", String(active));\n        });\n        pickerInputs.hidden = mode !== \"picker\";\n        manualInputs.hidden = mode !== \"manual\";\n        if (mode === \"manual\") {\n          syncManualFromDate(dateA, manualFields.a);\n          syncManualFromDate(dateB, manualFields.b);\n        } else {\n          syncDateFromManual(manualFields.a, dateA);\n          syncDateFromManual(manualFields.b, dateB);\n        }\n        clearError();\n      }\n\n      function validateDate(parsed, label, maxDate) {\n        if (!parsed) throw new Error(`${label}: enter a valid Gregorian date.`);\n        if (parsed.iso < MIN_DATE || parsed.iso > maxDate) {\n          throw new Error(`${label}: select a date between January 31, 1900 and today.`);\n        }\n        return parsed;\n      }\n\n      function getDatePeople() {\n        const maxDate = dateA.max;\n        let parsedA;\n        let parsedB;\n\n        if (dateMode === \"picker\") {\n          parsedA = parseISODate(dateA.value);\n          parsedB = parseISODate(dateB.value);\n        } else {\n          parsedA = parseManualDate(manualFields.a);\n          parsedB = parseManualDate(manualFields.b);\n        }\n\n        validateDate(parsedA, \"Person A\", maxDate);\n        validateDate(parsedB, \"Person B\", maxDate);\n\n        dateA.value = parsedA.iso;\n        dateB.value = parsedB.iso;\n        syncManualFromDate(dateA, manualFields.a);\n        syncManualFromDate(dateB, manualFields.b);\n\n        return [buildDatePerson(parsedA, \"Person A\"), buildDatePerson(parsedB, \"Person B\")];\n      }\n\n      function populateZodiacSelects() {\n        const options = branches.map(function (branch) {\n          return `<option value=\"${branch.index}\">${branch.icon} ${branch.en} (${branch.zh}) \u2014 ${branch.branch} (${branch.branchZh})<\/option>`;\n        }).join(\"\");\n        zodiacA.innerHTML = options;\n        zodiacB.innerHTML = options;\n        zodiacA.value = \"0\";\n        zodiacB.value = \"1\";\n      }\n\n      const todayISO = toLocalISODate(new Date());\n      dateA.max = todayISO;\n      dateB.max = todayISO;\n      populateZodiacSelects();\n\n      mainModeButtons.forEach(function (button) {\n        button.addEventListener(\"click\", function () { setMainMode(button.dataset.mainMode); });\n      });\n\n      dateModeButtons.forEach(function (button) {\n        button.addEventListener(\"click\", function () { setDateMode(button.dataset.dateMode); });\n      });\n\n      dateA.addEventListener(\"change\", function () { syncManualFromDate(dateA, manualFields.a); });\n      dateB.addEventListener(\"change\", function () { syncManualFromDate(dateB, manualFields.b); });\n\n      Object.keys(manualFields).forEach(function (key) {\n        Object.values(manualFields[key]).forEach(function (field) {\n          field.addEventListener(\"input\", function () {\n            field.value = field.value.replace(\/\\D\/g, \"\");\n            syncDateFromManual(manualFields[key], key === \"a\" ? dateA : dateB);\n          });\n        });\n      });\n\n      form.addEventListener(\"submit\", function (event) {\n        event.preventDefault();\n        clearError();\n\n        try {\n          let people;\n          if (mainMode === \"date\") {\n            people = getDatePeople();\n          } else {\n            people = [\n              buildZodiacPerson(branches[Number(zodiacA.value)], \"Person A\"),\n              buildZodiacPerson(branches[Number(zodiacB.value)], \"Person B\")\n            ];\n          }\n          renderResults(people[0], people[1]);\n        } catch (error) {\n          showError(error && error.message ? error.message : \"The compatibility result could not be calculated.\");\n        }\n      });\n\n      resetButton.addEventListener(\"click\", function () {\n        dateA.value = DEFAULT_DATE;\n        dateB.value = DEFAULT_DATE;\n        syncManualFromDate(dateA, manualFields.a);\n        syncManualFromDate(dateB, manualFields.b);\n        zodiacA.value = \"0\";\n        zodiacB.value = \"1\";\n        setMainMode(\"date\");\n        setDateMode(\"picker\");\n        clearError();\n        results.hidden = true;\n        root.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n      });\n    })();\n  <\/script>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Periksa kecocokan shio Tiongkok berdasarkan tanggal lahir atau shio, termasuk Enam Harmoni, Tiga Harmoni, benturan, saling merugikan, hukuman, pecah, hubungan netral, dan panduan terkait.<\/p>","protected":false},"author":1,"featured_media":2267,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[226],"tags":[],"class_list":["post-2570","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tools"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/posts\/2570","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/comments?post=2570"}],"version-history":[{"count":4,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/posts\/2570\/revisions"}],"predecessor-version":[{"id":2574,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/posts\/2570\/revisions\/2574"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/media\/2267"}],"wp:attachment":[{"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/media?parent=2570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/categories?post=2570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/tags?post=2570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}