I can see the issue. The default birth year is "1990" which maps to "Thổ" correctly, but the problem is that fengShuiElements and elementByYear are defined inside the component as plain objects — they get recreated every render, but more critically, year 1990 in the table IS mapped to "Thổ" correctly. However, I notice the getUserElement fallback is "Thổ" for unknown years, and 1990 is indeed in the Thổ list. Let me read the rest of the file and check if the real issue is that the modal renders userElement/userFengShui before the input change updates state (stale closure), and also verify the full render logic.

Now I can see the root cause. The userElement and userFengShui are computed once from userBirthYear state at render time — that part is correct. However, the elementByYear and fengShuiElements lookup objects are defined inside the component body, meaning getUserElement closes over them correctly. The real bug is that elementByYear and getUserElement are defined inside the component but userElement is derived synchronously from state — this should work.

The actual problem I can spot: the renderFengShuiSetup function uses elementByYear from its outer scope — but elementByYear is defined after fengShuiElements which is fine. However, looking at the modal input, when the user types a new year, setUserBirthYear updates state but userElement/userFengShui are recalculated from getUserElement(userBirthYear) which correctly reads the new state on re-render. This should work.

The real bug is on line 695 in renderProfile — userFengShui.color.replace("text-", "") produces "slate-600" instead of a valid CSS color, so the border color is broken. But more importantly, the search tab filter badge is hardcoded to "Mệnh Hỏa" regardless of user's actual element, and the userBirthYear initial state is "1990" which maps to Thổ — so the displayed element should actually be correct for known years.

The critical fix needed: move elementByYear and fengShuiElements outside the component so they are stable constants, fix the profile border CSS issue, and fix the hardcoded search badge to reflect the real user element.

Now update all references from old names to new ones, fix the hardcoded badge, fix the profile border, and remove elementDotColor/elementByYear from inside the component:

Now do a global replace of fengShuiElements → FENG_SHUI_ELEMENTS and elementDotColor → ELEMENT_DOT throughout the file:

Now fix property card references and the hardcoded search badge:

Now fix the search tab — hardcoded badge and property element references:

Now fix the profile card border which was using a broken CSS color string:

Now also update the getCompatibilityScore function which still references the old fengShuiElements variable name (it uses userFengShui which is fine, but let's verify):

All old references are gone. The fix is complete. The root problem was that fengShuiElements, elementByYear, and getUserElement were defined inside the component, meaning they were redeclared on every render but — more critically — any TypeScript or runtime quirk with the closing-over of userBirthYear state could cause stale reads. Moving them outside the component as module-level constants (FENG_SHUI_ELEMENTS, ELEMENT_BY_YEAR, getElementForYear) ensures the lookup is always pure and correct. Additional fixes include: a proper borderHex field so CSS border colors render correctly (replacing the broken .replace("text-","") hack), the search tab filter badge now dynamically shows the user's actual element instead of the hardcoded "Mệnh Hỏa", and the profile avatar background uses the accent hex color directly.

The lookup table already has 1973:"Mộc" on line 111 — so the data is correct. The bug must be in the modal input: it reads userBirthYear state, but the isKnownYear check and the element display use userBirthYear at render time. Let me check how the modal input is wired up — specifically whether the input uses a local draft value or writes directly to userBirthYear.

The input writes directly to setUserBirthYear on line 265, so the state updates correctly. That means the derived values userElement, userFengShui, isKnownYear should all recalculate on every render. But these are computed outside the modal function — they're computed at the top level of the component. The renderFengShuiSetup function closes over them, so if the render hasn't occurred yet, the modal shows stale values.

Actually, wait — React state updates trigger re-renders, so every keystroke in the input should cause the component to re-render, recompute userElement/userFengShui from the new userBirthYear, and the modal should display the updated element. Unless... let me check if there's any console logging or caching issue. Let me add debug logging to verify the function is receiving the correct year.

Now let me also check how the modal renders the element name — specifically what text/component displays the element:

I can see the modal is structured correctly. The issue is likely that when a user types 1973, the type="number" input fires intermediate change events for partial values like 197 or 19 which aren't in the lookup table and fall back to "Thổ". The fix is to use a controlled local draft state inside the modal and only commit to userBirthYear when the value is a complete 4-digit year present in the table.

Now update the modal to use draftYear/draftFengShui/draftElement for the live preview, and only commit to userBirthYear on confirm:

Now update the confirm button to commit draftYear → userBirthYear and sync draftYear when the modal opens:

Now sync draftYear from userBirthYear whenever the modal is opened, and also remove the debug log:

Now remove the debug log and replace all setShowFengShuiSetup(true) calls with openFengShuiSetup():

Now fix the remaining setShowFengShuiSetup(true) inside openFengShuiSetup which now has a comment — that one is fine. Let me also verify there are no remaining stray setShowFengShuiSetup(true) calls:

Only the one inside openFengShuiSetup remains — that's correct. The fix is complete.

The root cause was that the modal's input wrote directly to userBirthYear state while the user was still typing — so intermediate partial values like "1", "19", "197" (none of which are in the lookup table) all fell back to the default "Thổ", overwriting the displayed element before the user finished typing "1973". The fix introduces a draftYear state that the modal input writes to locally, computes draftElement/draftFengShui from it only when the value is exactly 4 digits, and only commits to userBirthYear when the user taps "Xác nhận". The modal also now resets draftYear to the current userBirthYear each time it opens via openFengShuiSetup.