/* Biến nội bộ cho tool Xem Ngày Sinh */
.dob-neo-wrapper {
    --bg-white: #ffffff;
    --border-ink: 3px solid #111111;
    --shadow-solid: 5px 5px 0px #111111;
    
    /* Bảng màu */
    --clr-primary: #ff9f1c;  /* Cam */
    --clr-result: #06d6a0;   /* Xanh lá */
    --clr-bg: #f8f9fa;

    max-width: 600px;
    margin: 0 auto;
    font-family: system-ui, -apple-system, sans-serif;
    color: #111111;
    background: var(--clr-bg);
    padding: 20px;
    border: var(--border-ink);
    border-radius: 16px;
    box-shadow: 8px 8px 0px #111;
}

.dob-neo-wrapper * { box-sizing: border-box; }

.dob-neo-header { 
    background: var(--clr-primary); 
    color: #111; 
    border: var(--border-ink); 
    box-shadow: 5px 5px 0px #111; 
    padding: 20px; 
    border-radius: 12px; 
    text-align: center; 
    margin-bottom: 25px; 
}
.dob-neo-header h2 { margin: 0 0 10px 0; font-size: 1.8rem; font-weight: 900; text-transform: uppercase; }
.dob-neo-header p { margin: 0; font-weight: 800; font-size: 0.95rem; }

.dob-neo-form { display: flex; flex-direction: column; gap: 20px; }
.dob-group { display: flex; flex-direction: column; gap: 8px; }
.dob-group label { font-weight: 900; font-size: 1.05rem; color: #111; }

.input-with-select { 
    display: flex; 
    border: var(--border-ink); 
    border-radius: 12px; 
    box-shadow: 4px 4px 0px #111; 
    background: #fff; 
    overflow: hidden; 
    width: 100%; 
}
.input-with-select input { 
    border: none !important; 
    padding: 16px 15px !important; 
    font-size: 1.25rem !important; 
    font-weight: 900; 
    color: #111; 
    outline: none; 
    width: 100%;
    font-family: inherit;
}
.input-with-select input:focus { background: #e0fbfc; }

/* Button */
.dob-neo-btn { 
    padding: 18px; 
    font-size: 1.2rem; 
    font-weight: 900; 
    background: #111; 
    color: #fff; 
    border: var(--border-ink); 
    border-radius: 12px; 
    box-shadow: 5px 5px 0px var(--clr-primary); 
    cursor: pointer; 
    text-transform: uppercase; 
    transition: all 0.1s; 
    margin-top: 5px; 
    letter-spacing: 1px;
}
.dob-neo-btn:active { box-shadow: 2px 2px 0px var(--clr-primary); transform: translate(3px, 3px); }

/* Result Layout */
.dob-neo-result { 
    margin-top: 30px; 
    padding-top: 25px; 
    border-top: 4px dashed #111; 
    display: flex; 
    flex-direction: column; 
    gap: 20px;
}
.dob-neo-result.active { display: block !important; animation: dobAnim 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }

.dob-card { 
    border: var(--border-ink); 
    box-shadow: var(--shadow-solid); 
    border-radius: 12px; 
    padding: 30px 20px; 
    text-align: center; 
}
.card-result { background: var(--clr-result); color: #111; }
.card-result h4 { margin: 0 0 15px 0; font-size: 1.2rem; font-weight: 900; text-transform: uppercase; }

.val-text { font-size: 2.5rem; font-weight: 900; line-height: 1.2; margin-bottom: 5px; text-transform: uppercase; color: #111;}
.result-message { font-weight: 800; font-size: 1.05rem; margin-top: 15px; color: #111; background: rgba(255,255,255,0.5); padding: 10px; border-radius: 8px; border: 2px dashed #111;}

@keyframes dobAnim { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }