{"id":2553,"date":"2026-08-11T08:49:09","date_gmt":"2026-08-11T08:49:09","guid":{"rendered":"https:\/\/www.chinaculturepro.com\/?p=2553"},"modified":"2026-08-17T11:49:50","modified_gmt":"2026-08-17T11:49:50","slug":"kalkulator-shio-tiongkok-tanggal-lahir-lunar","status":"publish","type":"post","link":"https:\/\/www.chinaculturepro.com\/id\/chinese-zodiac-lunar-birthday-calculator\/","title":{"rendered":"Kalkulator Shio Tiongkok &amp; Tanggal Lahir Lunar"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2553\" class=\"elementor elementor-2553\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-36595de5 e-flex e-con-boxed e-con e-parent\" data-id=\"36595de5\" 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-6a7948b elementor-widget elementor-widget-html\" data-id=\"6a7948b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section id=\"ccp-birth-calculator\" class=\"ccp-zodiac-tool\" aria-labelledby=\"ccp-tool-title\">\n  <style>\n    #ccp-birth-calculator {\n      --ccp-red: #9f2f25;\n      --ccp-red-dark: #7d211a;\n      --ccp-gold: #b68a43;\n      --ccp-ink: #24201c;\n      --ccp-muted: #6f675f;\n      --ccp-cream: #f7f3eb;\n      --ccp-paper: #fffdf9;\n      --ccp-line: #e7ded1;\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-birth-calculator,\n    #ccp-birth-calculator * {\n      box-sizing: border-box;\n    }\n\n    #ccp-birth-calculator [hidden] {\n      display: none !important;\n    }\n\n    #ccp-birth-calculator .ccp-shell {\n      position: relative;\n      width: 100%;\n      max-width: 1120px;\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-birth-calculator .ccp-shell::before,\n    #ccp-birth-calculator .ccp-shell::after {\n      position: absolute;\n      content: \"\";\n      border-radius: 50%;\n      pointer-events: none;\n    }\n\n    #ccp-birth-calculator .ccp-shell::before {\n      top: -80px;\n      right: -70px;\n      width: 220px;\n      height: 220px;\n      border: 1px solid rgba(159, 47, 37, 0.15);\n    }\n\n    #ccp-birth-calculator .ccp-shell::after {\n      top: -35px;\n      right: -25px;\n      width: 125px;\n      height: 125px;\n      border: 1px solid rgba(182, 138, 67, 0.24);\n    }\n\n    #ccp-birth-calculator .ccp-intro {\n      position: relative;\n      z-index: 1;\n      padding: 48px 48px 30px;\n      text-align: center;\n    }\n\n    #ccp-birth-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: 750;\n      line-height: 1.3;\n      letter-spacing: 0.16em;\n      text-transform: uppercase;\n    }\n\n    #ccp-birth-calculator .ccp-kicker::before,\n    #ccp-birth-calculator .ccp-kicker::after {\n      width: 26px;\n      height: 1px;\n      content: \"\";\n      background: var(--ccp-gold);\n    }\n\n    #ccp-birth-calculator h2,\n    #ccp-birth-calculator h3,\n    #ccp-birth-calculator p {\n      max-width: 100%;\n      min-width: 0;\n      margin-top: 0;\n      overflow-wrap: break-word;\n    }\n\n    #ccp-birth-calculator .ccp-intro h2 {\n      max-width: 760px;\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-birth-calculator .ccp-intro p {\n      max-width: 720px;\n      margin: 0 auto;\n      color: var(--ccp-muted);\n      font-size: 16px;\n      line-height: 1.75;\n    }\n\n    #ccp-birth-calculator .ccp-form-wrap {\n      position: relative;\n      z-index: 2;\n      width: 100%;\n      max-width: 820px;\n      min-width: 0;\n      margin: 0 auto;\n      padding: 0 48px 50px;\n    }\n\n    #ccp-birth-calculator .ccp-form-panel {\n      padding: 24px;\n      border: 1px solid rgba(182, 138, 67, 0.32);\n      border-radius: 18px;\n      background: rgba(255, 255, 255, 0.88);\n      box-shadow: 0 10px 30px rgba(62, 43, 25, 0.07);\n      backdrop-filter: blur(6px);\n    }\n\n    #ccp-birth-calculator .ccp-mode-switch {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 6px;\n      margin-bottom: 22px;\n      padding: 5px;\n      border: 1px solid var(--ccp-line);\n      border-radius: 13px;\n      background: #f3eee6;\n    }\n\n    #ccp-birth-calculator .ccp-mode-button {\n      min-width: 0;\n      min-height: 44px;\n      padding: 9px 14px;\n      border: 0;\n      border-radius: 9px;\n      background: transparent;\n      color: var(--ccp-muted);\n      font: inherit;\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-birth-calculator .ccp-mode-button.is-active {\n      background: #ffffff;\n      color: var(--ccp-red-dark);\n      box-shadow: 0 3px 12px rgba(62, 43, 25, 0.09);\n    }\n\n    #ccp-birth-calculator .ccp-mode-label-mobile {\n      display: none;\n    }\n\n    #ccp-birth-calculator .ccp-mode-button:focus-visible {\n      outline: 3px solid rgba(182, 138, 67, 0.38);\n      outline-offset: 2px;\n    }\n\n    #ccp-birth-calculator .ccp-input-panel {\n      min-width: 0;\n    }\n\n    #ccp-birth-calculator .ccp-field label,\n    #ccp-birth-calculator .ccp-manual-field label {\n      display: block;\n      margin-bottom: 9px;\n      color: var(--ccp-ink);\n      font-size: 14px;\n      font-weight: 700;\n    }\n\n    #ccp-birth-calculator .ccp-field input,\n    #ccp-birth-calculator .ccp-manual-field input {\n      display: block;\n      width: 100%;\n      max-width: 100%;\n      min-width: 0;\n      min-height: 54px;\n      padding: 12px 15px;\n      border: 1px solid #d8cec0;\n      border-radius: 11px;\n      outline: none;\n      background: #ffffff;\n      color: var(--ccp-ink);\n      font: inherit;\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-birth-calculator .ccp-field input:focus,\n    #ccp-birth-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-birth-calculator input[type=\"date\"]::-webkit-date-and-time-value {\n      min-width: 0;\n      text-align: left;\n    }\n\n    #ccp-birth-calculator .ccp-manual-date-grid {\n      display: grid;\n      grid-template-columns: 1.25fr 1fr 1fr;\n      gap: 12px;\n    }\n\n    #ccp-birth-calculator .ccp-manual-hint {\n      margin: 10px 0 0;\n      color: var(--ccp-muted);\n      font-size: 12.5px;\n      line-height: 1.5;\n    }\n\n    #ccp-birth-calculator .ccp-submit,\n    #ccp-birth-calculator .ccp-reset {\n      min-height: 54px;\n      border-radius: 11px;\n      font: inherit;\n      font-size: 15px;\n      font-weight: 750;\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-birth-calculator .ccp-submit {\n      width: 100%;\n      margin-top: 18px;\n      padding: 0 25px;\n      border: 1px solid var(--ccp-red);\n      background: var(--ccp-red);\n      color: #ffffff;\n      box-shadow: 0 8px 20px rgba(159, 47, 37, 0.20);\n    }\n\n    #ccp-birth-calculator .ccp-submit:hover,\n    #ccp-birth-calculator .ccp-submit:focus-visible {\n      background: var(--ccp-red-dark);\n      transform: translateY(-1px);\n    }\n\n    #ccp-birth-calculator .ccp-submit:focus-visible,\n    #ccp-birth-calculator .ccp-reset:focus-visible,\n    #ccp-birth-calculator .ccp-link-card:focus-visible {\n      outline: 3px solid rgba(182, 138, 67, 0.38);\n      outline-offset: 3px;\n    }\n\n    #ccp-birth-calculator .ccp-help {\n      margin: 13px 0 0;\n      color: var(--ccp-muted);\n      font-size: 12.5px;\n      line-height: 1.55;\n    }\n\n    #ccp-birth-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-birth-calculator .ccp-results {\n      border-top: 1px solid var(--ccp-line);\n      background: var(--ccp-paper);\n    }\n\n    #ccp-birth-calculator .ccp-result-inner {\n      width: 100%;\n      max-width: 1024px;\n      min-width: 0;\n      margin: 0 auto;\n      padding: 50px 48px 54px;\n    }\n\n    #ccp-birth-calculator .ccp-result-heading {\n      margin-bottom: 28px;\n      text-align: center;\n    }\n\n    #ccp-birth-calculator .ccp-result-label {\n      display: block;\n      margin-bottom: 9px;\n      color: var(--ccp-gold);\n      font-size: 12px;\n      font-weight: 800;\n      letter-spacing: 0.16em;\n      text-transform: uppercase;\n    }\n\n    #ccp-birth-calculator .ccp-result-heading h3 {\n      margin: 0 0 12px;\n      color: var(--ccp-ink);\n      font-family: var(--e-global-typography-primary-font-family, Georgia), serif;\n      font-size: clamp(25px, 3.5vw, 36px);\n      font-weight: 650;\n      line-height: 1.22;\n    }\n\n    #ccp-birth-calculator .ccp-boundary-note {\n      max-width: 760px;\n      margin: 0 auto;\n      color: var(--ccp-muted);\n      font-size: 15px;\n      line-height: 1.7;\n    }\n\n    #ccp-birth-calculator .ccp-result-grid {\n      display: grid;\n      grid-template-columns: repeat(3, minmax(0, 1fr));\n      gap: 14px;\n    }\n\n    #ccp-birth-calculator .ccp-info-card {\n      min-width: 0;\n      padding: 20px;\n      border: 1px solid var(--ccp-line);\n      border-radius: 14px;\n      background: #ffffff;\n    }\n\n    #ccp-birth-calculator .ccp-card-top {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      margin-bottom: 13px;\n    }\n\n    #ccp-birth-calculator .ccp-card-mark {\n      display: inline-grid;\n      flex: 0 0 34px;\n      width: 34px;\n      height: 34px;\n      place-items: center;\n      border: 1px solid rgba(159, 47, 37, 0.18);\n      border-radius: 50%;\n      background: #fff7f3;\n      color: var(--ccp-red);\n      font-family: Georgia, serif;\n      font-size: 13px;\n      font-weight: 700;\n    }\n\n    #ccp-birth-calculator .ccp-card-label {\n      color: var(--ccp-muted);\n      font-size: 12px;\n      font-weight: 750;\n      letter-spacing: 0.06em;\n      line-height: 1.35;\n      text-transform: uppercase;\n    }\n\n    #ccp-birth-calculator .ccp-card-value {\n      display: block;\n      overflow-wrap: anywhere;\n      color: var(--ccp-ink);\n      font-size: 18px;\n      font-weight: 750;\n      line-height: 1.35;\n    }\n\n    #ccp-birth-calculator .ccp-card-subvalue {\n      display: block;\n      margin-top: 6px;\n      color: var(--ccp-muted);\n      font-size: 13px;\n      line-height: 1.5;\n    }\n\n    #ccp-birth-calculator .ccp-links-section {\n      margin-top: 38px;\n      padding-top: 34px;\n      border-top: 1px solid var(--ccp-line);\n    }\n\n    #ccp-birth-calculator .ccp-links-heading {\n      margin-bottom: 18px;\n    }\n\n    #ccp-birth-calculator .ccp-links-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: 25px;\n      line-height: 1.3;\n    }\n\n    #ccp-birth-calculator .ccp-links-heading p {\n      margin: 0;\n      color: var(--ccp-muted);\n      font-size: 14px;\n      line-height: 1.6;\n    }\n\n    #ccp-birth-calculator .ccp-links-grid {\n      display: grid;\n      grid-template-columns: repeat(2, minmax(0, 1fr));\n      gap: 12px;\n    }\n\n    #ccp-birth-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: #ffffff;\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-birth-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-birth-calculator .ccp-link-card > span:first-child {\n      min-width: 0;\n    }\n\n    #ccp-birth-calculator .ccp-link-title {\n      display: block;\n      min-width: 0;\n      margin-bottom: 4px;\n      color: var(--ccp-red-dark);\n      font-size: 15px;\n      font-weight: 750;\n      line-height: 1.4;\n      overflow-wrap: anywhere;\n    }\n\n    #ccp-birth-calculator .ccp-link-desc {\n      display: block;\n      min-width: 0;\n      color: var(--ccp-muted);\n      font-size: 12.5px;\n      line-height: 1.5;\n      overflow-wrap: anywhere;\n    }\n\n    #ccp-birth-calculator .ccp-link-arrow {\n      color: var(--ccp-gold);\n      font-size: 22px;\n      line-height: 1;\n    }\n\n    #ccp-birth-calculator .ccp-result-actions {\n      margin-top: 26px;\n      text-align: center;\n    }\n\n    #ccp-birth-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-birth-calculator .ccp-reset:hover {\n      border-color: var(--ccp-red);\n      color: var(--ccp-red);\n    }\n\n    #ccp-birth-calculator .ccp-disclaimer {\n      margin: 24px 0 0;\n      color: #847a70;\n      font-size: 11.5px;\n      line-height: 1.6;\n      text-align: center;\n    }\n\n    @media (max-width: 820px) {\n      #ccp-birth-calculator .ccp-intro {\n        padding: 40px 28px 26px;\n      }\n\n      #ccp-birth-calculator .ccp-form-wrap {\n        padding: 0 28px 40px;\n      }\n\n      #ccp-birth-calculator .ccp-result-inner {\n        padding: 42px 28px 46px;\n      }\n\n      #ccp-birth-calculator .ccp-result-grid {\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n      }\n    }\n\n    @media (max-width: 600px) {\n      #ccp-birth-calculator {\n        overflow-x: hidden;\n      }\n\n      #ccp-birth-calculator .ccp-shell {\n        width: 100%;\n        max-width: 100%;\n        border-radius: 16px;\n        box-shadow: 0 12px 32px rgba(62, 43, 25, 0.09);\n      }\n\n      #ccp-birth-calculator .ccp-shell::before {\n        top: -52px;\n        right: -58px;\n        width: 150px;\n        height: 150px;\n      }\n\n      #ccp-birth-calculator .ccp-shell::after {\n        top: -18px;\n        right: -22px;\n        width: 88px;\n        height: 88px;\n      }\n\n      #ccp-birth-calculator .ccp-intro {\n        padding: 28px 16px 20px;\n      }\n\n      #ccp-birth-calculator .ccp-kicker {\n        max-width: 100%;\n        gap: 7px;\n        margin-bottom: 12px;\n        font-size: 10.5px;\n        letter-spacing: 0.12em;\n        white-space: normal;\n      }\n\n      #ccp-birth-calculator .ccp-kicker::before,\n      #ccp-birth-calculator .ccp-kicker::after {\n        flex: 0 0 14px;\n        width: 14px;\n      }\n\n      #ccp-birth-calculator .ccp-intro h2 {\n        margin-bottom: 12px;\n        font-size: clamp(27px, 8vw, 32px);\n        line-height: 1.1;\n        letter-spacing: -0.03em;\n      }\n\n      #ccp-birth-calculator .ccp-intro p {\n        font-size: 14.5px;\n        line-height: 1.62;\n      }\n\n      #ccp-birth-calculator .ccp-form-wrap {\n        width: 100%;\n        max-width: 100%;\n        padding: 0 12px 28px;\n      }\n\n      #ccp-birth-calculator .ccp-form-panel {\n        width: 100%;\n        max-width: 100%;\n        min-width: 0;\n        padding: 14px;\n        border-radius: 14px;\n      }\n\n      #ccp-birth-calculator .ccp-mode-switch {\n        width: 100%;\n        grid-template-columns: repeat(2, minmax(0, 1fr));\n        gap: 4px;\n        margin-bottom: 18px;\n        padding: 4px;\n        border-radius: 11px;\n      }\n\n      #ccp-birth-calculator .ccp-mode-button {\n        width: 100%;\n        min-width: 0;\n        min-height: 48px;\n        padding: 8px 6px;\n        font-size: 13px;\n        line-height: 1.2;\n        white-space: normal !important;\n        overflow: hidden;\n        text-overflow: clip;\n      }\n\n      #ccp-birth-calculator .ccp-mode-label-desktop {\n        display: none;\n      }\n\n      #ccp-birth-calculator .ccp-mode-label-mobile {\n        display: inline;\n      }\n\n      #ccp-birth-calculator .ccp-field label,\n      #ccp-birth-calculator .ccp-manual-field label {\n        margin-bottom: 7px;\n        font-size: 13.5px;\n      }\n\n      #ccp-birth-calculator .ccp-field input,\n      #ccp-birth-calculator .ccp-manual-field input {\n        max-width: 100%;\n        min-width: 0;\n        min-height: 52px;\n        padding: 11px 13px;\n        font-size: 16px;\n      }\n\n      #ccp-birth-calculator .ccp-manual-date-grid {\n        grid-template-columns: 1fr;\n        gap: 10px;\n      }\n\n      #ccp-birth-calculator .ccp-submit {\n        min-height: 52px;\n        margin-top: 16px;\n        padding: 0 16px;\n        font-size: 15px;\n      }\n\n      #ccp-birth-calculator .ccp-help,\n      #ccp-birth-calculator .ccp-manual-hint {\n        font-size: 12px;\n        line-height: 1.5;\n      }\n\n      #ccp-birth-calculator .ccp-result-inner {\n        width: 100%;\n        max-width: 100%;\n        min-width: 0;\n        padding: 30px 12px 34px;\n      }\n\n      #ccp-birth-calculator .ccp-result-heading {\n        margin-bottom: 22px;\n        text-align: left;\n      }\n\n      #ccp-birth-calculator .ccp-result-label {\n        margin-bottom: 7px;\n        font-size: 10.5px;\n        letter-spacing: 0.12em;\n      }\n\n      #ccp-birth-calculator .ccp-result-heading h3 {\n        margin-bottom: 10px;\n        font-size: 26px;\n        line-height: 1.18;\n      }\n\n      #ccp-birth-calculator .ccp-boundary-note {\n        font-size: 14px;\n        line-height: 1.62;\n      }\n\n      #ccp-birth-calculator .ccp-result-grid,\n      #ccp-birth-calculator .ccp-links-grid {\n        width: 100%;\n        min-width: 0;\n        grid-template-columns: minmax(0, 1fr);\n        gap: 10px;\n      }\n\n      #ccp-birth-calculator .ccp-info-card {\n        width: 100%;\n        min-width: 0;\n        padding: 15px;\n      }\n\n      #ccp-birth-calculator .ccp-card-top {\n        margin-bottom: 10px;\n      }\n\n      #ccp-birth-calculator .ccp-card-value {\n        font-size: 17px;\n      }\n\n      #ccp-birth-calculator .ccp-links-section {\n        width: 100%;\n        min-width: 0;\n        margin-top: 28px;\n        padding-top: 26px;\n      }\n\n      #ccp-birth-calculator .ccp-links-heading {\n        width: 100%;\n        min-width: 0;\n        margin-bottom: 16px;\n      }\n\n      #ccp-birth-calculator .ccp-links-heading h3 {\n        margin-bottom: 8px;\n        font-size: 24px;\n        line-height: 1.22;\n      }\n\n      #ccp-birth-calculator .ccp-links-heading p {\n        width: 100%;\n        min-width: 0;\n        font-size: 14px;\n        line-height: 1.58;\n        white-space: normal !important;\n        overflow-wrap: anywhere;\n      }\n\n      #ccp-birth-calculator .ccp-link-card {\n        width: 100%;\n        max-width: 100%;\n        min-width: 0;\n        grid-template-columns: minmax(0, 1fr) 16px;\n        gap: 9px;\n        align-items: start;\n        padding: 15px;\n      }\n\n      #ccp-birth-calculator .ccp-link-title {\n        font-size: 15.5px;\n        line-height: 1.35;\n        white-space: normal !important;\n        overflow-wrap: anywhere;\n      }\n\n      #ccp-birth-calculator .ccp-link-desc {\n        font-size: 13.5px;\n        line-height: 1.5;\n        white-space: normal !important;\n        overflow-wrap: anywhere;\n      }\n\n      #ccp-birth-calculator .ccp-link-arrow {\n        margin-top: 2px;\n        font-size: 18px;\n      }\n\n      #ccp-birth-calculator .ccp-reset {\n        width: 100%;\n      }\n\n      #ccp-birth-calculator .ccp-disclaimer {\n        font-size: 11px;\n      }\n    }\n\n    @media (max-width: 360px) {\n      #ccp-birth-calculator .ccp-mode-switch {\n        grid-template-columns: 1fr;\n      }\n\n      #ccp-birth-calculator .ccp-intro h2 {\n        font-size: 26px;\n      }\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      #ccp-birth-calculator *,\n      #ccp-birth-calculator *::before,\n      #ccp-birth-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 Lunar Birth Calculator<\/span>\n      <h2 id=\"ccp-tool-title\">Find Your Lunar Birthday and Chinese Zodiac<\/h2>\n      <p>Enter your Gregorian birth date to find your Chinese lunar birth date, zodiac animal, Five Elements zodiac, Heavenly Stem and Earthly Branch, and Na Yin element.<\/p>\n    <\/div>\n\n    <div class=\"ccp-form-wrap\">\n      <div class=\"ccp-form-panel\">\n        <form id=\"ccp-birth-form\" novalidate>\n          <div class=\"ccp-mode-switch\" role=\"tablist\" aria-label=\"Birth date entry method\">\n            <button id=\"ccp-picker-tab\" class=\"ccp-mode-button is-active\" type=\"button\" role=\"tab\" aria-selected=\"true\" aria-controls=\"ccp-picker-panel\"><span class=\"ccp-mode-label-desktop\">Select a Date<\/span><span class=\"ccp-mode-label-mobile\">Select Date<\/span><\/button>\n            <button id=\"ccp-manual-tab\" class=\"ccp-mode-button\" type=\"button\" role=\"tab\" aria-selected=\"false\" aria-controls=\"ccp-manual-panel\"><span class=\"ccp-mode-label-desktop\">Enter Year, Month &amp; Day<\/span><span class=\"ccp-mode-label-mobile\">Type Date<\/span><\/button>\n          <\/div>\n\n          <div id=\"ccp-picker-panel\" class=\"ccp-input-panel\" role=\"tabpanel\" aria-labelledby=\"ccp-picker-tab\">\n            <div class=\"ccp-field\">\n              <label for=\"ccp-birth-date\">Your Gregorian Birth Date<\/label>\n              <input id=\"ccp-birth-date\" name=\"birth-date\" type=\"date\" min=\"1900-01-31\" value=\"2000-01-01\" required aria-describedby=\"ccp-date-help ccp-date-error\">\n            <\/div>\n          <\/div>\n\n          <div id=\"ccp-manual-panel\" class=\"ccp-input-panel\" role=\"tabpanel\" aria-labelledby=\"ccp-manual-tab\" hidden>\n            <div class=\"ccp-manual-date-grid\">\n              <div class=\"ccp-manual-field\">\n                <label for=\"ccp-birth-year\">Year<\/label>\n                <input id=\"ccp-birth-year\" type=\"text\" inputmode=\"numeric\" autocomplete=\"bday-year\" maxlength=\"4\" value=\"2000\" placeholder=\"YYYY\" aria-describedby=\"ccp-date-help ccp-date-error\">\n              <\/div>\n\n              <div class=\"ccp-manual-field\">\n                <label for=\"ccp-birth-month\">Month<\/label>\n                <input id=\"ccp-birth-month\" type=\"text\" inputmode=\"numeric\" autocomplete=\"bday-month\" maxlength=\"2\" value=\"01\" placeholder=\"MM\" aria-describedby=\"ccp-date-help ccp-date-error\">\n              <\/div>\n\n              <div class=\"ccp-manual-field\">\n                <label for=\"ccp-birth-day\">Day<\/label>\n                <input id=\"ccp-birth-day\" type=\"text\" inputmode=\"numeric\" autocomplete=\"bday-day\" maxlength=\"2\" value=\"01\" placeholder=\"DD\" aria-describedby=\"ccp-date-help ccp-date-error\">\n              <\/div>\n            <\/div>\n\n            <p class=\"ccp-manual-hint\">Example: 2000 \/ 01 \/ 01. Enter numbers only.<\/p>\n          <\/div>\n\n          <button class=\"ccp-submit\" type=\"submit\">Check My Birth Sign<\/button>\n\n          <p id=\"ccp-date-help\" class=\"ccp-help\">The default date is January 1, 2000. You can select a date or type the year, month, and day directly. The calculation follows the Chinese New Year boundary, not January 1. Supported dates: January 31, 1900 to today.<\/p>\n          <p id=\"ccp-date-error\" class=\"ccp-error\" role=\"alert\" hidden><\/p>\n        <\/form>\n      <\/div>\n    <\/div>\n\n    <div id=\"ccp-results\" class=\"ccp-results\" aria-live=\"polite\" hidden>\n      <div class=\"ccp-result-inner\">\n        <div class=\"ccp-result-heading\">\n          <span class=\"ccp-result-label\">Your Chinese Birth Profile<\/span>\n          <h3 id=\"ccp-result-title\"><\/h3>\n          <p id=\"ccp-boundary-note\" class=\"ccp-boundary-note\"><\/p>\n        <\/div>\n\n        <div id=\"ccp-result-grid\" class=\"ccp-result-grid\"><\/div>\n\n        <div class=\"ccp-links-section\">\n          <div class=\"ccp-links-heading\">\n            <h3>Explore Your Zodiac Results<\/h3>\n            <p>Use these guides to understand your zodiac year, element, Gan Zhi, Na Yin, compatibility, and Ben Ming Nian.<\/p>\n          <\/div>\n          <div id=\"ccp-links-grid\" class=\"ccp-links-grid\"><\/div>\n        <\/div>\n\n        <div class=\"ccp-result-actions\">\n          <button id=\"ccp-reset\" class=\"ccp-reset\" type=\"button\">Check Another Birth Date<\/button>\n        <\/div>\n\n        <p class=\"ccp-disclaimer\">This tool is for traditional Chinese calendar and cultural reference. It does not calculate a complete Ba Zi birth chart, which also requires the birth time and place.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <script data-no-defer=\"1\">\n    \/\/ nowprocket: keep this calculator interactive when WP Rocket delays JavaScript.\n    (function () {\n      \"use strict\";\n\n      const LSCACHE_MARKER = \"ccp-lunar-birth-calculator-init\";\n\n      const root = document.getElementById(\"ccp-birth-calculator\");\n      if (!root) return;\n\n      const form = root.querySelector(\"#ccp-birth-form\");\n      const dateInput = root.querySelector(\"#ccp-birth-date\");\n      const yearInput = root.querySelector(\"#ccp-birth-year\");\n      const monthInput = root.querySelector(\"#ccp-birth-month\");\n      const dayInput = root.querySelector(\"#ccp-birth-day\");\n      const pickerTab = root.querySelector(\"#ccp-picker-tab\");\n      const manualTab = root.querySelector(\"#ccp-manual-tab\");\n      const pickerPanel = root.querySelector(\"#ccp-picker-panel\");\n      const manualPanel = root.querySelector(\"#ccp-manual-panel\");\n      const errorBox = root.querySelector(\"#ccp-date-error\");\n      const results = root.querySelector(\"#ccp-results\");\n      const resultTitle = root.querySelector(\"#ccp-result-title\");\n      const boundaryNote = root.querySelector(\"#ccp-boundary-note\");\n      const resultGrid = root.querySelector(\"#ccp-result-grid\");\n      const linksGrid = root.querySelector(\"#ccp-links-grid\");\n      const resetButton = root.querySelector(\"#ccp-reset\");\n\n      const MIN_DATE = \"1900-01-31\";\n      const DEFAULT_DATE = \"2000-01-01\";\n      const SITE_URL = \"https:\/\/www.chinaculturepro.com\";\n      let activeInputMode = \"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        { en: \"Zi\", zh: \"\u5b50\", animal: \"Rat\", animalZh: \"\u9f20\", slug: \"rat\" },\n        { en: \"Chou\", zh: \"\u4e11\", animal: \"Ox\", animalZh: \"\u725b\", slug: \"ox\" },\n        { en: \"Yin\", zh: \"\u5bc5\", animal: \"Tiger\", animalZh: \"\u864e\", slug: \"tiger\" },\n        { en: \"Mao\", zh: \"\u536f\", animal: \"Rabbit\", animalZh: \"\u5154\", slug: \"rabbit\" },\n        { en: \"Chen\", zh: \"\u8fb0\", animal: \"Dragon\", animalZh: \"\u9f99\", slug: \"dragon\" },\n        { en: \"Si\", zh: \"\u5df3\", animal: \"Snake\", animalZh: \"\u86c7\", slug: \"snake\" },\n        { en: \"Wu\", zh: \"\u5348\", animal: \"Horse\", animalZh: \"\u9a6c\", slug: \"horse\" },\n        { en: \"Wei\", zh: \"\u672a\", animal: \"Goat\", animalZh: \"\u7f8a\", slug: \"goat\" },\n        { en: \"Shen\", zh: \"\u7533\", animal: \"Monkey\", animalZh: \"\u7334\", slug: \"monkey\" },\n        { en: \"You\", zh: \"\u9149\", animal: \"Rooster\", animalZh: \"\u9e21\", slug: \"rooster\" },\n        { en: \"Xu\", zh: \"\u620c\", animal: \"Dog\", animalZh: \"\u72d7\", slug: \"dog\" },\n        { en: \"Hai\", zh: \"\u4ea5\", animal: \"Pig\", animalZh: \"\u732a\", slug: \"pig\" }\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\",\n        \"\u4e00\": \"First Lunar Month\",\n        \"\u4e8c\": \"Second Lunar Month\",\n        \"\u4e09\": \"Third Lunar Month\",\n        \"\u56db\": \"Fourth Lunar Month\",\n        \"\u4e94\": \"Fifth Lunar Month\",\n        \"\u516d\": \"Sixth Lunar Month\",\n        \"\u4e03\": \"Seventh Lunar Month\",\n        \"\u516b\": \"Eighth Lunar Month\",\n        \"\u4e5d\": \"Ninth Lunar Month\",\n        \"\u5341\": \"Tenth Lunar Month\",\n        \"\u5341\u4e00\": \"Eleventh Lunar Month\",\n        \"\u51ac\": \"Eleventh Lunar Month\",\n        \"\u5341\u4e8c\": \"Twelfth Lunar Month\",\n        \"\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      function mod(number, divisor) {\n        return ((number % divisor) + divisor) % divisor;\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 parseDateInput(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        ) {\n          return null;\n        }\n\n        return { date, year, month, day };\n      }\n\n      function syncManualFromISO(value) {\n        const match = \/^(\\d{4})-(\\d{2})-(\\d{2})$\/.exec(value);\n        if (!match) return;\n\n        yearInput.value = match[1];\n        monthInput.value = match[2];\n        dayInput.value = match[3];\n      }\n\n      function getManualISOValue() {\n        const year = yearInput.value.trim();\n        const month = monthInput.value.trim();\n        const day = dayInput.value.trim();\n\n        if (!year || !month || !day) {\n          return { error: \"Please enter your birth year, month, and day.\" };\n        }\n\n        if (!\/^\\d{4}$\/.test(year)) {\n          return { error: \"Please enter the year using four digits, such as 2000.\" };\n        }\n\n        if (!\/^\\d{1,2}$\/.test(month) || Number(month) < 1 || Number(month) > 12) {\n          return { error: \"Please enter a month from 1 to 12.\" };\n        }\n\n        if (!\/^\\d{1,2}$\/.test(day) || Number(day) < 1 || Number(day) > 31) {\n          return { error: \"Please enter a day from 1 to 31.\" };\n        }\n\n        return {\n          value: `${year}-${month.padStart(2, \"0\")}-${day.padStart(2, \"0\")}`\n        };\n      }\n\n      function setInputMode(mode, moveFocus) {\n        activeInputMode = mode === \"manual\" ? \"manual\" : \"picker\";\n        const isPicker = activeInputMode === \"picker\";\n\n        pickerTab.classList.toggle(\"is-active\", isPicker);\n        manualTab.classList.toggle(\"is-active\", !isPicker);\n        pickerTab.setAttribute(\"aria-selected\", String(isPicker));\n        manualTab.setAttribute(\"aria-selected\", String(!isPicker));\n        pickerPanel.hidden = !isPicker;\n        manualPanel.hidden = isPicker;\n\n        if (isPicker) {\n          const manualDate = getManualISOValue();\n          if (manualDate.value && parseDateInput(manualDate.value)) {\n            dateInput.value = manualDate.value;\n          }\n        } else if (dateInput.value) {\n          syncManualFromISO(dateInput.value);\n        }\n\n        clearError();\n\n        if (moveFocus !== false) {\n          window.requestAnimationFrame(function () {\n            if (isPicker) {\n              dateInput.focus();\n            } else {\n              yearInput.focus();\n              yearInput.select();\n            }\n          });\n        }\n      }\n\n      function sanitizeNumericInput(input) {\n        input.value = input.value.replace(\/\\D\/g, \"\");\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 calendar function required by this tool.\");\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 = (type) => {\n          const part = parts.find((item) => item.type === type);\n          return part ? part.value : \"\";\n        };\n\n        const relatedYear = Number(getPart(\"relatedYear\"));\n        const monthChinese = getPart(\"month\");\n        const lunarDay = Number(getPart(\"day\"));\n\n        if (!relatedYear || !monthChinese || !lunarDay) {\n          throw new Error(\"The lunar date could not be calculated in this browser.\");\n        }\n\n        return {\n          lunarYear: relatedYear,\n          monthChinese,\n          lunarDay\n        };\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 getChineseNewYearDate(gregorianYear) {\n        const start = new Date(Date.UTC(gregorianYear, 0, 20, 12, 0, 0));\n\n        for (let offset = 0; offset < 40; offset += 1) {\n          const candidate = new Date(start.getTime() + offset * 86400000);\n          const lunar = getLunarParts(candidate);\n          const isFirstMonth = lunar.monthChinese === \"\u6b63\u6708\";\n\n          if (lunar.lunarYear === gregorianYear && isFirstMonth && lunar.lunarDay === 1) {\n            return candidate;\n          }\n        }\n\n        return null;\n      }\n\n      function formatEnglishDate(date) {\n        return new Intl.DateTimeFormat(\"en-US\", {\n          year: \"numeric\",\n          month: \"long\",\n          day: \"numeric\",\n          timeZone: \"UTC\"\n        }).format(date);\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.animal}`;\n\n        const canonicalMiddleYear = 1960 + mod(lunarYear - 1960, 60);\n        const elementAnimalYears = [\n          canonicalMiddleYear - 60,\n          canonicalMiddleYear,\n          canonicalMiddleYear + 60\n        ];\n\n        return {\n          stem,\n          branch,\n          naYin,\n          elementAnimal,\n          elementAnimalYears,\n          ganZhiEnglish: `${stem.en} ${branch.en}`,\n          ganZhiChinese: `${stem.zh}${branch.zh}`\n        };\n      }\n\n      function infoCard(mark, label, value, subvalue) {\n        return `\n          <article class=\"ccp-info-card\">\n            <div class=\"ccp-card-top\">\n              <span class=\"ccp-card-mark\" aria-hidden=\"true\">${mark}<\/span>\n              <span class=\"ccp-card-label\">${label}<\/span>\n            <\/div>\n            <strong class=\"ccp-card-value\">${value}<\/strong>\n            ${subvalue ? `<span class=\"ccp-card-subvalue\">${subvalue}<\/span>` : \"\"}\n          <\/article>\n        `;\n      }\n\n      function linkCard(title, description, url) {\n        return `\n          <a class=\"ccp-link-card\" href=\"${url}\">\n            <span>\n              <span class=\"ccp-link-title\">${title}<\/span>\n              <span class=\"ccp-link-desc\">${description}<\/span>\n            <\/span>\n            <span class=\"ccp-link-arrow\" aria-hidden=\"true\">\u2192<\/span>\n          <\/a>\n        `;\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 renderResults(parsedDate, lunar, profile) {\n        const { date, year: gregorianYear } = parsedDate;\n        const { lunarYear, monthChinese, lunarDay } = lunar;\n        const { stem, branch, naYin, elementAnimal, elementAnimalYears, ganZhiEnglish, ganZhiChinese } = profile;\n\n        const lunarMonthEnglish = getLunarMonthEnglish(monthChinese);\n        const lunarDayChinese = chineseLunarDays[lunarDay] || String(lunarDay);\n        const chineseLunarDate = `\u519c\u5386${ganZhiChinese}\u5e74${monthChinese}${lunarDayChinese}`;\n        const cnyDate = getChineseNewYearDate(gregorianYear);\n        const cnyText = cnyDate ? formatEnglishDate(cnyDate) : \"Chinese New Year\";\n\n        resultTitle.textContent = `Your Sign Is the ${elementAnimal}`;\n\n        if (lunarYear < gregorianYear) {\n          boundaryNote.textContent = `Chinese New Year in ${gregorianYear} began on ${cnyText}. Because your birthday was before that date, your correct zodiac year is ${lunarYear}, not ${gregorianYear}.`;\n        } else {\n          boundaryNote.textContent = `Chinese New Year in ${gregorianYear} began on ${cnyText}. Your birthday falls within the ${lunarYear} Chinese zodiac year.`;\n        }\n\n        resultGrid.innerHTML = [\n          infoCard(\"\u519c\u5386\", \"Chinese Lunar Birth Date\", `${lunarMonthEnglish}, Day ${lunarDay}`, chineseLunarDate),\n          infoCard(\"\u751f\u8096\", \"Chinese Zodiac\", `${branch.animal} (${branch.animalZh})`, `Lunar zodiac year: ${lunarYear}`),\n          infoCard(\"\u4e94\u884c\", \"Five Elements Zodiac\", elementAnimal, `${stem.polarity} ${stem.element} year`),\n          infoCard(\"\u5e72\u652f\", \"Heavenly Stem & Earthly Branch\", `${ganZhiEnglish} (${ganZhiChinese})`, `${stem.en} is the Heavenly Stem; ${branch.en} is the Earthly Branch.`),\n          infoCard(\"\u7eb3\u97f3\", \"Na Yin Five Elements\", `${naYin.en}`, naYin.zh),\n          infoCard(\"\u516c\u5386\", \"Gregorian Birth Date\", formatEnglishDate(date), `Corresponding Chinese zodiac year: ${lunarYear}`)\n        ].join(\"\");\n\n        const elementSlug = stem.element.toLowerCase();\n        const animalSlug = branch.slug;\n        const yearsText = elementAnimalYears.join(\", \");\n\n        const relatedLinks = [\n          {\n            title: `Year of the ${branch.animal}`,\n            description: `Explore ${branch.animal} years, personality, compatibility, and lucky signs.`,\n            url: `${SITE_URL}\/year-of-the-${animalSlug}\/`\n          },\n          {\n            title: `${lunarYear} Chinese Zodiac`,\n            description: `See the exact date range and zodiac profile for the ${lunarYear} lunar year.`,\n            url: `${SITE_URL}\/${lunarYear}-chinese-zodiac\/`\n          },\n          {\n            title: `${elementAnimal} (${yearsText})`,\n            description: `Learn what the ${elementAnimal} combination means across its 60-year cycle.`,\n            url: `${SITE_URL}\/${elementSlug}-${animalSlug}\/`\n          },\n          {\n            title: \"Heavenly Stems & Earthly Branches\",\n            description: `Understand how ${ganZhiEnglish} fits into the traditional 60-year cycle.`,\n            url: `${SITE_URL}\/heavenly-stems-earthly-branches\/`\n          },\n          {\n            title: \"Five Elements Chinese Zodiac\",\n            description: `Learn how Wood, Fire, Earth, Metal, and Water modify each zodiac animal.`,\n            url: `${SITE_URL}\/five-elements-chinese-zodiac\/`\n          },\n          {\n            title: \"Na Yin Five Elements\",\n            description: `Understand the Na Yin system and the meaning of ${naYin.en}.`,\n            url: `${SITE_URL}\/na-yin-five-elements\/`\n          },\n          {\n            title: \"Chinese Zodiac Compatibility\",\n            description: `Compare the ${branch.animal} with other zodiac signs in love and relationships.`,\n            url: `${SITE_URL}\/chinese-zodiac-compatibility\/`\n          },\n          {\n            title: \"Ben Ming Nian\",\n            description: `Learn what happens when the zodiac year returns to your own birth sign.`,\n            url: `${SITE_URL}\/ben-ming-nian-zodiac-birth-year-meaning-remedies\/`\n          }\n        ];\n\n        linksGrid.innerHTML = relatedLinks\n          .map((link) => linkCard(link.title, link.description, link.url))\n          .join(\"\");\n\n        results.hidden = false;\n\n        const reduceMotion = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n        results.scrollIntoView({ behavior: reduceMotion ? \"auto\" : \"smooth\", block: \"start\" });\n      }\n\n      const today = new Date();\n      const todayUTC = new Date(Date.UTC(today.getFullYear(), today.getMonth(), today.getDate(), 12));\n      const maxDate = toLocalISODate(today);\n\n      dateInput.max = maxDate;\n      dateInput.value = DEFAULT_DATE;\n      yearInput.max = String(today.getFullYear());\n      syncManualFromISO(DEFAULT_DATE);\n\n      pickerTab.addEventListener(\"click\", function () {\n        setInputMode(\"picker\");\n      });\n\n      manualTab.addEventListener(\"click\", function () {\n        setInputMode(\"manual\");\n      });\n\n      dateInput.addEventListener(\"input\", function () {\n        clearError();\n        if (dateInput.value) {\n          syncManualFromISO(dateInput.value);\n        }\n      });\n\n      [yearInput, monthInput, dayInput].forEach(function (input) {\n        input.addEventListener(\"input\", function () {\n          sanitizeNumericInput(input);\n          clearError();\n\n          const manualDate = getManualISOValue();\n          if (manualDate.value && parseDateInput(manualDate.value)) {\n            dateInput.value = manualDate.value;\n          }\n        });\n      });\n\n      form.addEventListener(\"submit\", function (event) {\n        event.preventDefault();\n        clearError();\n\n        let value = dateInput.value;\n        let focusTarget = dateInput;\n\n        if (activeInputMode === \"manual\") {\n          const manualDate = getManualISOValue();\n\n          if (manualDate.error) {\n            showError(manualDate.error);\n            yearInput.focus();\n            return;\n          }\n\n          value = manualDate.value;\n          focusTarget = yearInput;\n        }\n\n        if (!value) {\n          showError(activeInputMode === \"manual\" ? \"Please enter your birth date.\" : \"Please select your birth date.\");\n          focusTarget.focus();\n          return;\n        }\n\n        const parsedDate = parseDateInput(value);\n        if (!parsedDate) {\n          showError(\"Please enter a valid Gregorian date. Check the number of days in the selected month.\");\n          focusTarget.focus();\n          return;\n        }\n\n        if (value < MIN_DATE || value > maxDate) {\n          showError(`Please enter a date between January 31, 1900 and ${formatEnglishDate(todayUTC)}.`);\n          focusTarget.focus();\n          return;\n        }\n\n        dateInput.value = value;\n        syncManualFromISO(value);\n\n        try {\n          const lunar = getLunarParts(parsedDate.date);\n          const profile = getYearProfile(lunar.lunarYear);\n          renderResults(parsedDate, lunar, profile);\n        } catch (error) {\n          showError(error && error.message ? error.message : \"The calculation could not be completed. Please use a current version of Chrome, Safari, Firefox, or Edge.\");\n        }\n      });\n\n      resetButton.addEventListener(\"click\", function () {\n        dateInput.value = DEFAULT_DATE;\n        syncManualFromISO(DEFAULT_DATE);\n        setInputMode(\"picker\", false);\n        clearError();\n        results.hidden = true;\n        root.scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n\n        window.requestAnimationFrame(function () {\n          dateInput.focus();\n        });\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>Masukkan tanggal lahir Anda untuk mengetahui tanggal lahir menurut kalender lunar Tiongkok, hewan shio, shio Lima Elemen, Batang Langit, Cabang Bumi, dan Na Yin.<\/p>","protected":false},"author":1,"featured_media":46,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[226],"tags":[],"class_list":["post-2553","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\/2553","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=2553"}],"version-history":[{"count":15,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/posts\/2553\/revisions"}],"predecessor-version":[{"id":2569,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/posts\/2553\/revisions\/2569"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/media\/46"}],"wp:attachment":[{"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/media?parent=2553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/categories?post=2553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.chinaculturepro.com\/id\/wp-json\/wp\/v2\/tags?post=2553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}