/* ========================================
   THẦN SỐ HỌC PITAGO - Mystic Cosmos Theme
   ======================================== */

/* === Reset & Container === */
.tsh-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: #e8e0f0;
    background: linear-gradient(135deg, #0a0a2e 0%, #1a1a4e 50%, #0d0d35 100%);
    min-height: 100vh;
    overflow: hidden;
    line-height: 1.6;
    box-sizing: border-box;
}
.tsh-container *, .tsh-container *::before, .tsh-container *::after {
    box-sizing: border-box;
}

/* === Starfield Animation === */
.tsh-stars {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    overflow: hidden;
}
.tsh-stars::before, .tsh-stars::after {
    content: '';
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        25px 50px #fff, 80px 120px #fff, 150px 30px #fff, 200px 180px #fff,
        300px 80px #fff, 350px 200px #fff, 420px 50px #fff, 500px 150px #fff,
        50px 250px #fff, 180px 300px #fff, 280px 280px #fff, 400px 320px #fff,
        550px 100px #fff, 620px 250px #fff, 700px 60px #fff, 750px 300px #fff,
        100px 400px #fff, 250px 450px #fff, 450px 400px #fff, 600px 350px #fff,
        800px 180px #fff, 850px 350px #fff, 900px 100px #fff, 950px 280px #fff,
        1000px 50px #fff, 1050px 200px #fff, 1100px 120px #fff, 1150px 300px #fff;
    animation: tsh-twinkle 4s ease-in-out infinite alternate;
}
.tsh-stars::after {
    width: 1px; height: 1px;
    box-shadow:
        30px 80px rgba(255,255,255,0.6), 120px 200px rgba(255,255,255,0.5),
        220px 60px rgba(255,255,255,0.7), 310px 150px rgba(255,255,255,0.4),
        450px 90px rgba(255,255,255,0.6), 580px 220px rgba(255,255,255,0.5),
        650px 40px rgba(255,255,255,0.7), 800px 270px rgba(255,255,255,0.4),
        900px 150px rgba(255,255,255,0.6), 1050px 80px rgba(255,255,255,0.5);
    animation: tsh-twinkle 6s ease-in-out infinite alternate-reverse;
}
.tsh-stars-2::before {
    animation-delay: 1s;
    box-shadow:
        60px 100px #fff, 130px 250px #fff, 250px 80px #fff, 380px 220px #fff,
        500px 40px #fff, 650px 180px #fff, 780px 90px #fff, 900px 250px #fff,
        1050px 130px #fff, 1100px 280px #fff, 40px 350px #fff, 200px 380px #fff;
}
.tsh-stars-3::before {
    animation-delay: 2s;
    width: 3px; height: 3px;
    box-shadow:
        100px 150px rgba(255,200,100,0.8), 400px 100px rgba(200,180,255,0.6),
        700px 200px rgba(255,200,100,0.7), 1000px 150px rgba(200,180,255,0.5);
}
@keyframes tsh-twinkle {
    0% { opacity: 0.3; }
    100% { opacity: 1; }
}

/* === Header === */
.tsh-header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}
.tsh-title {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd700, #ff8c00, #ff6b6b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 10px 0;
    text-shadow: none;
    line-height: 1.3;
}
.tsh-subtitle {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.6);
    margin: 0;
}

/* === Cards === */
.tsh-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 30px;
    position: relative;
    z-index: 1;
}

/* === Form === */
.tsh-form-card {
    max-width: 700px;
    margin: 0 auto 40px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 60px rgba(138,43,226,0.1);
}
.tsh-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.tsh-form-full {
    grid-column: 1 / -1;
}
.tsh-form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.tsh-required {
    color: #ff6b6b;
}
.tsh-form-group input[type="text"],
.tsh-form-group input[type="number"],
.tsh-form-group select {
    width: 100%;
    padding: 6px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(138,43,226,0.3);
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
    font-family: inherit;
}
.tsh-form-group input:focus,
.tsh-form-group select:focus {
    border-color: rgba(200,100,255,0.6);
    box-shadow: 0 0 20px rgba(138,43,226,0.3);
    background: rgba(255,255,255,0.1);
}
.tsh-form-group select option {
    background: #1a1a4e;
    color: #fff;
}
.tsh-date-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
/* Radio */
.tsh-radio-group {
    display: flex;
    gap: 20px;
    padding-top: 6px;
}
.tsh-radio-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
    font-weight: 400 !important;
}
.tsh-radio-label input[type="radio"] {
    display: none;
}
.tsh-radio-custom {
    width: 18px; height: 18px;
    border: 2px solid rgba(138,43,226,0.5);
    border-radius: 50%;
    position: relative;
    transition: all 0.3s;
    flex-shrink: 0;
}
.tsh-radio-label input:checked + .tsh-radio-custom {
    border-color: #ffd700;
    box-shadow: 0 0 10px rgba(255,215,0,0.3);
}
.tsh-radio-label input:checked + .tsh-radio-custom::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ffd700;
}

/* Submit Button */
.tsh-submit-btn {
    display: block;
    width: 100%;
    margin-top: 25px;
    padding: 16px 30px;
    background: linear-gradient(135deg, #f4a460, #ff6b6b);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(244,164,96,0.3);
    font-family: inherit;
    letter-spacing: 0.5px;
}
.tsh-submit-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 30px rgba(244,164,96,0.5);
}
.tsh-submit-btn:active {
    transform: scale(0.98);
}

/* === Results Section === */
.tsh-results {
    position: relative;
    z-index: 1;
}

/* === Tab Navigation === */
.tsh-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 25px;
    background: rgba(255,255,255,0.03);
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.06);
}
.tsh-tab {
    flex: 1;
    min-width: 120px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
    white-space: nowrap;
}
.tsh-tab:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.05);
}
.tsh-tab.active {
    background: linear-gradient(135deg, rgba(138,43,226,0.3), rgba(200,100,255,0.2));
    color: #ffd700;
    box-shadow: 0 2px 15px rgba(138,43,226,0.2);
}
.tsh-tab-content {
    display: none;
    animation: tsh-fadeIn 0.4s ease;
}
.tsh-tab-content.active {
    display: block;
}
@keyframes tsh-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Overview Tab === */
.tsh-hero-number {
    text-align: center;
    margin-bottom: 35px;
}
.tsh-hero-value {
    font-size: 100px;
    font-weight: 900;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    animation: tsh-pulse 2s ease-in-out infinite;
    display: inline-block;
    filter: drop-shadow(0 0 30px rgba(255,215,0,0.4));
}
@keyframes tsh-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
.tsh-hero-label {
    font-size: 1.3rem;
    color: rgba(255,255,255,0.7);
    margin-top: 5px;
}
.tsh-hero-meaning {
    max-width: 700px;
    margin: 15px auto 0;
    font-size: 0.95rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
}

/* Indicator Grid */
.tsh-indicator-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 20px;
}
.tsh-indicator-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 20px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.tsh-indicator-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,215,0,0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}
.tsh-indicator-card .tsh-ind-number {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffd700;
    line-height: 1;
    margin-bottom: 6px;
}
.tsh-indicator-card .tsh-ind-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    margin-bottom: 2px;
}
.tsh-indicator-card .tsh-ind-name-en {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 8px;
}
.tsh-indicator-card .tsh-ind-meaning {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}

/* Badges */
.tsh-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-top: 8px;
    letter-spacing: 0.5px;
}
.tsh-badge-master {
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,140,0,0.2));
    color: #ffd700;
    border: 1px solid rgba(255,215,0,0.3);
}
.tsh-badge-karmic {
    background: linear-gradient(135deg, rgba(255,107,107,0.2), rgba(255,0,0,0.2));
    color: #ff6b6b;
    border: 1px solid rgba(255,107,107,0.3);
}

/* === Lo Shu Grid === */
.tsh-loshu-section {
    margin-bottom: 30px;
}
.tsh-loshu-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: rgba(255,255,255,0.9);
}
.tsh-loshu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 320px;
    margin: 0 auto 15px;
}
.tsh-loshu-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.3rem;
    font-weight: 700;
    transition: all 0.3s;
    min-height: 80px;
}
.tsh-loshu-cell.filled {
    background: linear-gradient(135deg, rgba(255,215,0,0.25), rgba(255,140,0,0.2));
    color: #ffd700;
    border: 1px solid rgba(255,215,0,0.3);
    box-shadow: 0 0 15px rgba(255,215,0,0.1);
}
.tsh-loshu-cell.empty {
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.06);
}
.tsh-loshu-labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
}

/* Arrows */
.tsh-arrows-section {
    margin-top: 25px;
}
.tsh-arrow-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.tsh-arrow-item {
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
}
.tsh-arrow-present {
    background: rgba(76,175,80,0.15);
    color: #81c784;
    border: 1px solid rgba(76,175,80,0.2);
}
.tsh-arrow-missing {
    background: rgba(255,107,107,0.1);
    color: rgba(255,107,107,0.7);
    border: 1px solid rgba(255,107,107,0.15);
}

/* === Pyramid === */
.tsh-pyramid {
    text-align: center;
    margin: 30px auto;
    max-width: 400px;
}
.tsh-pyramid-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}
.tsh-pyramid-node {
    width: 60px; height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.3rem;
    font-weight: 800;
}
.tsh-pyramid-peak {
    background: linear-gradient(135deg, rgba(255,215,0,0.3), rgba(255,140,0,0.25));
    color: #ffd700;
    border: 2px solid rgba(255,215,0,0.4);
    box-shadow: 0 0 20px rgba(255,215,0,0.2);
}
.tsh-pyramid-mid {
    background: rgba(138,43,226,0.2);
    color: #c88bff;
    border: 2px solid rgba(138,43,226,0.3);
}
.tsh-pyramid-base {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    border: 2px solid rgba(255,255,255,0.15);
}
.tsh-pyramid-age {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
    text-align: center;
}

/* === Pinnacles / Challenges Timeline === */
.tsh-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 20px 0;
}
.tsh-timeline-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s;
}
.tsh-timeline-card:hover {
    background: rgba(255,255,255,0.08);
    transform: translateY(-3px);
}
.tsh-timeline-card .tsh-tl-number {
    font-size: 2rem;
    font-weight: 800;
    color: #ffd700;
    margin-bottom: 6px;
}
.tsh-timeline-card .tsh-tl-period {
    font-size: 0.8rem;
    color: rgba(200,139,255,0.8);
    font-weight: 600;
    margin-bottom: 8px;
}
.tsh-timeline-card .tsh-tl-meaning {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}
.tsh-section-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #ffd700;
    margin: 30px 0 15px;
}
.tsh-section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    margin: 20px 0 10px;
}

/* Life Cycles */
.tsh-cycles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 15px 0;
}

/* === Career List === */
.tsh-career-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.tsh-career-list li {
    padding: 10px 16px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    font-size: 0.9rem;
    border: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.75);
}

/* Personal Year/Month/Day */
.tsh-personal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 15px 0;
}
.tsh-personal-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
}
.tsh-personal-card .tsh-pc-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 4px;
}
.tsh-personal-card .tsh-pc-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: #c88bff;
}
.tsh-personal-card.tsh-pc-highlight .tsh-pc-number {
    color: #ffd700;
    font-size: 2rem;
}

/* === Wealth & Health Sections === */
.tsh-analysis-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 16px;
}
.tsh-analysis-card h3 {
    font-size: 1.1rem;
    color: #ffd700;
    margin: 0 0 12px;
}
.tsh-analysis-card p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.7;
    margin: 0 0 10px;
}
.tsh-analysis-card ul {
    padding-left: 20px;
    margin: 10px 0;
}
.tsh-analysis-card li {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 5px;
    line-height: 1.5;
}
.tsh-health-row-indicator {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 15px 0;
}
.tsh-health-bar {
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}
.tsh-health-bar .tsh-hb-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.tsh-health-bar .tsh-hb-value {
    font-size: 1.4rem;
    font-weight: 800;
}
.tsh-health-strong {
    background: rgba(76,175,80,0.15);
    border: 1px solid rgba(76,175,80,0.2);
    color: #81c784;
}
.tsh-health-normal {
    background: rgba(255,193,7,0.15);
    border: 1px solid rgba(255,193,7,0.2);
    color: #ffd54f;
}
.tsh-health-weak {
    background: rgba(255,107,107,0.12);
    border: 1px solid rgba(255,107,107,0.15);
    color: #ff8a80;
}

/* === Love Tab === */
.tsh-love-form {
    max-width: 600px;
    margin: 0 auto 30px;
}
.tsh-love-form .tsh-form-grid {
    grid-template-columns: 1fr 1fr;
}
.tsh-love-vs {
    text-align: center;
    font-size: 2rem;
    margin: 20px 0;
    color: #ff6b9d;
}
.tsh-love-pair {
    margin-bottom: 20px;
}
.tsh-love-pair .tsh-lp-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: rgba(255,255,255,0.7);
}
.tsh-love-pair .tsh-lp-numbers {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 4px;
}
.tsh-progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(255,255,255,0.06);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 6px;
}
.tsh-progress-fill {
    height: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #ff6b9d, #c88bff, #6bc5ff);
    transition: width 1s ease;
}
.tsh-love-pair .tsh-lp-comment {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.5;
}
.tsh-love-total {
    text-align: center;
    margin-top: 30px;
    padding: 25px;
    background: rgba(255,107,157,0.08);
    border-radius: 16px;
    border: 1px solid rgba(255,107,157,0.15);
}
.tsh-love-total .tsh-lt-score {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #ff6b9d, #c88bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tsh-love-total .tsh-lt-label {
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    margin-top: 5px;
}
.tsh-love-total .tsh-lt-comment {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
    margin-top: 10px;
    line-height: 1.6;
}

/* === Section Divider === */
.tsh-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(138,43,226,0.3), transparent);
    margin: 30px 0;
}

/* === Advice Box === */
.tsh-advice-box {
    background: linear-gradient(135deg, rgba(138,43,226,0.1), rgba(200,100,255,0.05));
    border: 1px solid rgba(138,43,226,0.2);
    border-radius: 14px;
    padding: 25px;
    margin-top: 20px;
}
.tsh-advice-box h3 {
    color: #c88bff;
    font-size: 1.1rem;
    margin: 0 0 12px;
}
.tsh-advice-box p {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    margin: 0;
}

/* === Responsive === */
@media (max-width: 1024px) {
    .tsh-indicator-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tsh-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .tsh-container {
        padding: 20px 15px;
    }
    .tsh-title {
        font-size: 1.8rem;
    }
    .tsh-hero-value {
        font-size: 70px;
    }
    .tsh-form-grid {
        grid-template-columns: 1fr;
    }
    .tsh-form-full {
        grid-column: 1;
    }
    .tsh-tabs {
        flex-direction: column;
    }
    .tsh-tab {
        min-width: auto;
    }
    .tsh-indicator-grid {
        grid-template-columns: 1fr;
    }
    .tsh-timeline {
        grid-template-columns: 1fr 1fr;
    }
    .tsh-cycles {
        grid-template-columns: 1fr;
    }
    .tsh-career-list {
        grid-template-columns: 1fr;
    }
    .tsh-personal-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .tsh-arrow-list {
        grid-template-columns: 1fr;
    }
    .tsh-health-row-indicator {
        grid-template-columns: 1fr;
    }
    .tsh-card {
        padding: 20px;
    }
    .tsh-love-form .tsh-form-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 480px) {
    .tsh-title {
        font-size: 1.4rem;
    }
    .tsh-hero-value {
        font-size: 56px;
    }
    .tsh-timeline {
        grid-template-columns: 1fr;
    }
    .tsh-personal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tsh-date-group {
        grid-template-columns: 1fr;
    }
}