@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

:root {
    --primary: #10b981; 
    --primary-light: #ecfdf5; 
    --text-dark: #374151;
    --gray-border: #e5e7eb; 
    --white: #ffffff; 
    --shadow: 0 4px 20px rgba(0,0,0,0.05);
}

/* --- CẤU TRÚC CHUNG --- */
.gt-wrapper { 
    max-width: 800px; 
    margin: 0 auto; 
    font-family: 'Nunito', sans-serif; 
    color: var(--text-dark); 
    padding: 15px; 
}
.hidden { display: none !important; }

/* Responsive Mobile: Padding lề trái phải 10px */
@media (max-width: 600px) {
    .gt-wrapper { padding: 15px 10px !important; }
    .gt-card { padding: 20px 15px !important; }
    .gt-title { font-size: 1.2rem !important; }
    .gt-select-clean { font-size: 0.9rem !important; }
}

.gt-card { 
    background: var(--white); 
    border-radius: 16px; 
    padding: 25px; 
    box-shadow: var(--shadow); 
    margin-bottom: 20px; 
    border: 2px solid var(--primary); 
}

/* Fix viền khung kết quả */
.result-card-fix { 
    border-color: var(--primary) !important; 
    border-width: 2px !important; 
    border-style: solid !important; 
}

.gt-title { 
    text-align: center; 
    color: var(--primary); 
    font-weight: 800; 
    margin-bottom: 10px; 
    text-transform: uppercase; 
    font-size: 1.4rem; 
}

.who-trust-badge { 
    display: flex; align-items: center; justify-content: center; gap: 6px; 
    background: #fffbeb; border: 1px solid #fcd34d; 
    padding: 6px 12px; border-radius: 20px; 
    width: fit-content; margin: 0 auto 20px auto; 
}
.who-trust-badge span { font-weight: 700; color: #b45309; font-size: 0.8rem; }

/* --- FORM NHẬP LIỆU --- */
.gt-form-grid { display: flex; flex-direction: column; gap: 18px; }

.gt-input-group label { display: block; font-weight: 700; margin-bottom: 6px; font-size: 0.95rem; color: #111; }

.gt-input { 
    width: 100%; padding: 12px 15px; 
    border: 1px solid #d1d5db; border-radius: 10px; 
    font-size: 1rem; color: #111; background: #fff; 
    transition: all 0.2s; 
}
.gt-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); outline: none; }

.gt-note-box { 
    display: flex; gap: 8px; align-items: flex-start; 
    margin-top: 8px; padding: 10px; 
    background: #f0f9ff; border-radius: 8px; 
    font-size: 0.85rem; color: #0369a1; line-height: 1.4; 
}
.gt-tiny-note { font-size: 0.8rem; color: #6b7280; margin-top: 4px; font-style: italic; }

/* --- NÚT GIỚI TÍNH (ICON TRÊN, CHỮ DƯỚI, CĂN GIỮA) --- */
.gender-segmented-control { 
    display: flex; 
    background: #f3f4f6; 
    padding: 4px; 
    border-radius: 12px; 
    gap: 8px; 
}
.gender-segmented-control input { display: none; }

.gender-segment { 
    flex: 1; 
    display: flex; 
    flex-direction: column; /* Xếp dọc: Icon trên chữ dưới */
    align-items: center;    /* Căn giữa ngang */
    justify-content: center; /* Căn giữa dọc */
    gap: 4px; 
    padding: 8px 4px; 
    border-radius: 10px; 
    font-weight: 700; 
    font-size: 0.9rem; 
    color: #6b7280; 
    cursor: pointer; 
    transition: all 0.2s; 
    border: 1px solid transparent; 
}

.gender-icon { 
    width: 18px; /* Icon nhỏ gọn cho mobile */
    height: 18px; 
    display: block; 
    margin: 0 auto;
}

.gender-segment span { 
    line-height: 1.2; 
    margin-top: 2px;
    text-align: center;
}

.gender-segmented-control input:checked + .gender-segment { 
    background: var(--white); 
    color: #111; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); 
    border-color: #e5e7eb; 
}

/* --- NGÀY SINH (CĂN GIỮA TEXT) --- */
.dob-unified { display: flex; gap: 10px; }
.select-wrap { 
    flex: 1; position: relative; 
    border: 1px solid #d1d5db; border-radius: 10px; background: #fff; 
    height: 50px; 
}
.gt-select-clean { 
    width: 100%; height: 100%; border: none; background: transparent; 
    padding: 18px 5px 2px 5px; 
    font-size: 1rem; font-weight: 700; color: #333; cursor: pointer; 
    -webkit-appearance: none; appearance: none; z-index: 2; position: relative; 
    text-align: center;      /* Căn giữa */
    text-align-last: center; /* Căn giữa cho Safari/Chrome */
}
.select-label { 
    position: absolute; top: 6px; left: 0; width: 100%; 
    text-align: center; /* Label nhỏ cũng căn giữa */
    font-size: 0.7rem; color: #9ca3af; text-transform: uppercase; font-weight: 700; z-index: 1; 
}

.gt-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

.gt-btn-primary { 
    width: 100%; margin-top: 10px; background: var(--primary); color: white; 
    padding: 15px; border: none; border-radius: 12px; 
    font-weight: 800; font-size: 1.1rem; cursor: pointer; 
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: transform 0.2s; 
}

/* --- KHU VỰC KẾT QUẢ --- */
.chart-container { height: 320px; position: relative; margin-top: 15px; }
.section-title { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.2rem; color: var(--primary); }
.centered-title { justify-content: center; }

.chart-trust-badge { 
    display: flex; align-items: center; gap: 5px; 
    margin-top: 5px; margin-bottom: 10px; 
    font-size: 0.85rem; color: #059669; font-weight: 700; 
}
.centered-badge { justify-content: center; }

/* Lời khuyên chuyên gia */
.advice-box { 
    background: white; border-radius: 16px; overflow: hidden; 
    box-shadow: var(--shadow); border: 2px solid var(--primary); margin-top: 25px; 
}
.advice-header { 
    padding: 15px; color: white; 
    background: var(--primary) !important; /* Luôn là màu xanh */
    font-weight: 800; font-size: 1.1rem; 
    display: flex; align-items: center; justify-content: center; gap: 10px; 
}
.advice-content { padding: 15px; }

.advice-block { margin-bottom: 20px; }
.advice-block-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.advice-icon-inline { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.advice-block-title { margin: 0; font-size: 1rem; color: #111; font-weight: 700; }
.advice-text { margin: 0; font-size: 0.95rem; color: #4b5563; line-height: 1.5; }

.product-recommend { 
    background: #f0fdf4; border-radius: 12px; padding: 15px; 
    border: 2px dashed var(--primary); text-align: center; margin-top: 10px; 
}
.product-text { font-size: 0.95rem; margin-bottom: 10px; display: block; }
.product-btn { 
    display: block; width: 100%; background: var(--primary); color: white; 
    padding: 12px; border-radius: 10px; text-decoration: none; 
    font-weight: 800; font-size: 1rem; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2); 
}