/* ===================================================================== MYSTIC NUMBERS — Telegram Mini App Bảng màu: "trời đêm & ánh sao" — nền chàm/mực đêm, điểm nhấn vàng cổ (màu lộc/vàng kim trong văn hoá Việt), tách riêng 2 màu ngữ nghĩa: ngọc bích (miếu/vượng — tốt) và son (hãm/bất — cần chú ý). Theme đồng bộ với Telegram.WebApp.colorScheme (đặt attribute data-theme trên từ app.js) — KHÔNG phải cơ chế theme của claude.ai. ===================================================================== */ :root { /* --- màu (light) --- */ --ground: #eef1f6; --surface: #ffffff; --surface-2: #e4e8f0; --ink: #1a1e2b; --ink-muted: #5b6070; --hairline: #d7dce6; --gold: #a9761f; --gold-soft: #f3e6cc; --jade: #2f6e56; --jade-soft: #dcefe6; --vermilion: #a4402f; --vermilion-soft: #f6ded7; --shadow: 0 1px 2px rgba(26, 30, 43, 0.06), 0 8px 24px rgba(26, 30, 43, 0.07); /* --- typography --- */ --font-display: "Cormorant Garamond", "Times New Roman", serif; --font-body: "Be Vietnam Pro", -apple-system, "Segoe UI", sans-serif; --radius: 16px; --radius-sm: 10px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ground: #0d1220; --surface: #171d30; --surface-2: #202844; --ink: #edeff7; --ink-muted: #97a0b8; --hairline: #2b3350; --gold: #dcae55; --gold-soft: #3a3120; --jade: #6fbb9e; --jade-soft: #1c3a2f; --vermilion: #e08976; --vermilion-soft: #3e2420; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35); } } :root[data-theme="dark"] { --ground: #0d1220; --surface: #171d30; --surface-2: #202844; --ink: #edeff7; --ink-muted: #97a0b8; --hairline: #2b3350; --gold: #dcae55; --gold-soft: #3a3120; --jade: #6fbb9e; --jade-soft: #1c3a2f; --vermilion: #e08976; --vermilion-soft: #3e2420; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 28px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-tap-highlight-color: transparent; } body { min-height: 100vh; padding: 16px 16px 40px; } h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; } .hidden { display: none !important; } .screen { animation: fade-in .25s ease-out; } @media (prefers-reduced-motion: reduce) { .screen { animation: none; } } @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* ===================== BOOT / LOADING ===================== */ #boot-error, #loading { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; } .notice-glyph { font-size: 40px; color: var(--gold); } .notice-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; } .notice-text { color: var(--ink-muted); max-width: 320px; } .loading-orbit { display: flex; gap: 8px; } .loading-orbit span { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); animation: pulse 1.1s ease-in-out infinite; } .loading-orbit span:nth-child(2) { animation-delay: .15s; } .loading-orbit span:nth-child(3) { animation-delay: .3s; } @keyframes pulse { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .loading-orbit span { animation: none; opacity: .7; } } .loading-text { color: var(--ink-muted); font-size: 14px; } /* ===================== FORM SCREEN ===================== */ .hero { text-align: center; padding: 12px 4px 24px; } .hero-glyph { font-size: 30px; color: var(--gold); margin-bottom: 6px; } .hero-title { font-size: 26px; font-weight: 700; } .hero-sub { color: var(--ink-muted); font-size: 14px; max-width: 320px; margin: 10px auto 0; } .hero-sub strong { color: var(--ink); } .form { display: flex; flex-direction: column; gap: 16px; max-width: 420px; margin: 0 auto; } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); } .field-hint { font-size: 12px; color: var(--ink-muted); } input[type="text"], input[type="date"], input[type="time"], input[type="tel"] { font: inherit; font-family: var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 12px 14px; outline: none; transition: border-color .15s ease; } input:focus-visible { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); } .radio-row { display: flex; gap: 10px; } .radio-pill { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 0; border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; font-weight: 500; } .radio-pill input { position: absolute; opacity: 0; pointer-events: none; } .radio-pill:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); color: var(--gold); font-weight: 700; } .radio-pill:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--gold-soft); } .check-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13.5px; color: var(--ink-muted); cursor: pointer; } .check-row input { accent-color: var(--gold); width: 16px; height: 16px; } fieldset.field { border: none; padding: 0; margin: 0; } .form-error { background: var(--vermilion-soft); color: var(--vermilion); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; margin: 0; } .btn-primary { font: inherit; font-weight: 700; font-size: 15.5px; color: var(--surface); background: var(--gold); border: none; border-radius: var(--radius-sm); padding: 14px; cursor: pointer; transition: transform .1s ease, opacity .15s ease; } .btn-primary:active { transform: scale(.98); } .btn-primary:disabled { opacity: .55; cursor: default; } /* ===================== PROFILE HEADER + TABS ===================== */ .pheader { display: flex; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 14px; } .pheader-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--gold-soft); color: var(--gold); font-family: var(--font-display); font-size: 20px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pheader-info { flex: 1; min-width: 0; } .pheader-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; } .pheader-meta { color: var(--ink-muted); font-size: 12.5px; margin-top: 2px; } .pheader-badge { text-align: center; flex-shrink: 0; } .pheader-badge-num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--gold); font-variant-numeric: tabular-nums; } .pheader-badge-label { display: block; font-size: 10.5px; color: var(--ink-muted); letter-spacing: .03em; } .tabbar { display: flex; gap: 6px; margin-bottom: 14px; background: var(--surface-2); border-radius: 12px; padding: 4px; } .tab { flex: 1; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink-muted); background: transparent; border: none; border-radius: 9px; padding: 9px 0; cursor: pointer; } .tab.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .tabpanel { display: flex; flex-direction: column; gap: 14px; } /* ===================== STAT GRID (thần số học) ===================== */ .stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat-tile { background: var(--surface); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .stat-tile-num { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--gold); font-variant-numeric: tabular-nums; line-height: 1; } .stat-tile-label { font-size: 12px; color: var(--ink-muted); margin-top: 4px; letter-spacing: .01em; } /* ===================== SCORE CARD ===================== */ .score-card { background: var(--surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .score-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .score-row:not(:first-child) { margin-top: 14px; } .score-label { font-size: 13px; color: var(--ink-muted); font-weight: 600; } .score-value { font-family: var(--font-display); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; } .score-value.good { color: var(--jade); } .score-value.bad { color: var(--vermilion); } .score-bar { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; } .score-bar-fill { height: 100%; border-radius: 4px; transition: width .4s ease; } .score-bar-fill.good { background: var(--jade); } .score-bar-fill.bad { background: var(--vermilion); } /* ===================== ACCORDION (chi tiết diễn giải) ===================== */ .detail-accordion { display: flex; flex-direction: column; gap: 8px; } .detail-accordion details { background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); overflow: hidden; } .detail-accordion summary { padding: 13px 16px; font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .detail-accordion summary::-webkit-details-marker { display: none; } .detail-accordion summary::after { content: "⌄"; color: var(--ink-muted); font-size: 16px; transition: transform .15s ease; } .detail-accordion details[open] summary::after { transform: rotate(180deg); } .detail-accordion .accordion-body { padding: 0 16px 16px; color: var(--ink-muted); font-size: 13.5px; white-space: pre-line; } .detail-accordion .accordion-body strong { color: var(--ink); } /* ===================== TỬ VI: SUMMARY ===================== */ .tuvi-summary { background: var(--surface); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; } .tuvi-summary-row { display: flex; justify-content: space-between; gap: 10px; } .tuvi-summary-row span:first-child { color: var(--ink-muted); } .tuvi-summary-row span:last-child { font-weight: 600; text-align: right; } .tuvi-tag { display: inline-block; background: var(--gold-soft); color: var(--gold); border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; margin-top: 4px; } /* ===================== TỬ VI: LÁ SỐ 4×4 ===================== */ .chart-wrap { background: var(--surface); border-radius: var(--radius); padding: 10px; box-shadow: var(--shadow); } .chart-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, minmax(72px, auto)); gap: 4px; } .chart-cell { border-radius: 9px; padding: 6px 6px 5px; background: var(--surface-2); display: flex; flex-direction: column; gap: 3px; cursor: pointer; border: 1.5px solid transparent; transition: border-color .12s ease, background .12s ease; } .chart-cell:active { background: var(--gold-soft); } .chart-cell.is-menh, .chart-cell.is-than { border-color: var(--gold); } .chart-cell-chi { font-size: 10.5px; color: var(--ink-muted); font-weight: 600; } .chart-cell-name { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; line-height: 1.15; } .chart-cell-stars { display: flex; flex-wrap: wrap; gap: 2px; margin-top: auto; } .star-tag { font-size: 9.5px; padding: 1px 5px; border-radius: 999px; font-weight: 600; line-height: 1.4; } .star-tag.tot { background: var(--jade-soft); color: var(--jade); } .star-tag.binh { background: var(--surface); color: var(--ink-muted); } .star-tag.xau { background: var(--vermilion-soft); color: var(--vermilion); } .chart-cell-flag { font-size: 9px; color: var(--gold); font-weight: 700; letter-spacing: .02em; } .chart-center { grid-row: 2 / 4; grid-column: 2 / 4; border-radius: 9px; background: var(--ground); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6px; gap: 2px; } .chart-center-glyph { font-size: 18px; color: var(--gold); } .chart-center-cuc { font-family: var(--font-display); font-weight: 700; font-size: 13px; } .chart-center-sub { font-size: 10px; color: var(--ink-muted); } /* ===================== PALACE DETAIL PANEL ===================== */ .palace-detail { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .palace-detail-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; font-family: var(--font-display); font-weight: 700; font-size: 16px; border-bottom: 1px solid var(--hairline); } .palace-detail-close { background: var(--surface-2); border: none; border-radius: 50%; width: 26px; height: 26px; color: var(--ink-muted); cursor: pointer; font-size: 13px; } .palace-detail-body { padding: 14px 16px; font-size: 13.5px; color: var(--ink-muted); white-space: pre-line; max-height: 40vh; overflow-y: auto; } .palace-detail-body strong { color: var(--ink); } /* ===================== ĐẠI VẬN ===================== */ .daivan-card { background: linear-gradient(135deg, var(--gold-soft), var(--surface)); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); font-size: 13.5px; } .daivan-card b { font-family: var(--font-display); font-size: 16px; color: var(--gold); }