<!-- ======================================================== --> <!-- TAM HỢP ĐỊA CHI — Kiềng ba chân + Bán hợp + Trắc nghiệm 10 câu --> <!-- WordPress safe iframe (JNews compatible) - không có scroll-to-iframe --> <!-- Paste into Custom HTML block in Gutenberg --> <!-- ======================================================== --> <style> .lt-wrap-lt-thop-frame { display: block !important; width: 100% !important; max-width: 100% !important; margin: 30px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; position: relative !important; overflow: visible !important; box-sizing: border-box !important; height: auto !important; max-height: none !important; contain: none !important; } .lt-wrap-lt-thop-frame > iframe { width: 100% !important; max-width: 100% !important; border: 0 !important; display: block !important; background: transparent !important; padding: 0 !important; margin: 0 !important; max-height: none !important; min-height: 0 !important; vertical-align: top !important; } </style> <div class="lt-wrap-lt-thop-frame"> <iframe id="lt-thop-frame" height="4200" loading="eager" scrolling="no" srcdoc="<!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <title>Tam Hợp Địa Chi — Bốn cục bốn ngũ hành</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> :root { --bg: #0b0812; --bg-2: #15101f; --bg-3: #1c1528; --ink: #f2e8d1; --ink-dim: #a89878; --ink-soft: #c7b88f; --gold: #d4af37; --gold-bright: #f5d061; --gold-soft: rgba(212, 175, 55, 0.35); --crimson: #9e1b3f; --deep-red: #5c0a1a; --warn: #e08eaa; --green: #7ed39e; --red: #ef6a6a; } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); } body { background: var(--bg); color: var(--ink); font-family: 'Be Vietnam Pro', -apple-system, sans-serif; overflow-x: hidden; line-height: 1.65; font-size: 15px; -webkit-font-smoothing: antialiased; position: relative; min-height: 0; } .bg-gradient { position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(139, 30, 63, 0.18), transparent 60%), radial-gradient(ellipse 60% 40% at 100% 50%, rgba(212, 175, 55, 0.08), transparent 60%), radial-gradient(ellipse 70% 50% at 0% 100%, rgba(92, 10, 26, 0.22), transparent 60%); pointer-events: none; } .stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(1.2px 1.2px at 23px 34px, rgba(212,175,55,0.6), transparent), radial-gradient(1px 1px at 67px 128px, rgba(244,234,213,0.45), transparent), radial-gradient(1.5px 1.5px at 142px 76px, rgba(212,175,55,0.55), transparent), radial-gradient(1px 1px at 198px 199px, rgba(244,234,213,0.35), transparent), radial-gradient(1px 1px at 253px 54px, rgba(212,175,55,0.45), transparent); background-size: 300px 280px; animation: twinkle 6s ease-in-out infinite; } @keyframes twinkle { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes correctPop { 0% { transform: scale(0.95); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .app { position: relative; z-index: 5; max-width: 460px; margin: 0 auto; padding: 28px 22px 60px; } .view { display: none; animation: fadeIn 0.4s ease; } .view.active { display: block; } /* HERO */ .hero { text-align: center; padding: 24px 0 30px; } .hero-tag { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; display: block; } .hero-tag::before, .hero-tag::after { content: '⟢'; margin: 0 10px; opacity: 0.7; } .hero-chinese { font-family: 'Cormorant Garamond', serif; font-size: 56px; line-height: 1; font-weight: 400; color: transparent; background: linear-gradient(180deg, var(--gold-bright), var(--gold), rgba(212,175,55,0.3)); -webkit-background-clip: text; background-clip: text; margin: 12px 0 14px; letter-spacing: 8px; padding-left: 8px; text-shadow: 0 0 30px rgba(212,175,55,0.3); } .hero h1 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 30px; line-height: 1.18; color: var(--ink); margin: 4px 0 6px; } .hero h1 em { font-style: italic; color: var(--gold-bright); } .hero-rule { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 18px auto 22px; } .hero-intro { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; color: var(--ink-soft); line-height: 1.6; padding: 0 4px; max-width: 380px; margin: 0 auto; } .hero-intro em { color: var(--gold-bright); font-weight: 600; } .hero-author { margin-top: 22px; font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; } .hero-author::before, .hero-author::after { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--gold); margin: 0 10px; vertical-align: middle; } /* PROGRESS DOTS */ .part-progress { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 30px 0 24px; flex-wrap: wrap; } .part-progress .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(212,175,55,0.2); border: 1px solid rgba(212,175,55,0.3); transition: all 0.3s ease; } .part-progress .dot.done { background: var(--gold); box-shadow: 0 0 8px rgba(212,175,55,0.5); } .part-progress .dot.current { background: var(--gold-bright); box-shadow: 0 0 12px rgba(245,208,97,0.7); transform: scale(1.4); border-color: var(--gold-bright); } .part-progress .label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 2px; color: var(--gold); margin-left: 8px; } .part-progress .label strong { color: var(--gold-bright); font-weight: 700; } /* PART CARD */ .part-card { background: linear-gradient(155deg, rgba(28,21,40,0.88), rgba(21,16,31,0.65)); border: 1px solid rgba(212,175,55,0.22); border-radius: 6px; padding: 32px 24px 28px; position: relative; overflow: hidden; animation: fadeUp 0.5s ease; } .part-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.5; } .part-card-header { text-align: center; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(212,175,55,0.15); } .part-card .seal { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(145deg, var(--crimson), var(--deep-red)); border: 2px solid var(--gold); color: var(--gold-bright); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 20px; box-shadow: 0 0 0 2px var(--bg), 0 0 18px rgba(158,27,63,0.5), inset 0 0 12px rgba(0,0,0,0.4); margin-bottom: 14px; position: relative; } .part-card .seal::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed var(--gold-soft); animation: rotate 40s linear infinite; } .part-card .lbl { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; } .part-card h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--ink); margin-bottom: 4px; } .part-card h2 em { color: var(--gold-bright); font-style: italic; } .part-card .subtitle { display: block; margin-top: 6px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; color: var(--ink-dim); letter-spacing: 1px; } .part-card .body { font-size: 15px; line-height: 1.75; color: var(--ink-soft); } .part-card .body p { margin-bottom: 14px; } .part-card .body p:last-child { margin-bottom: 0; } .part-card .body p strong { color: var(--ink); font-weight: 600; } .part-card .body em { color: var(--gold-bright); font-style: italic; } .part-card .body .hl { color: var(--gold-bright); font-weight: 500; font-style: italic; } .part-card .body .inline-sub { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(212,175,55,0.2); text-align: center; } .kp { margin: 16px 0; padding: 14px 16px; background: rgba(212,175,55,0.07); border-left: 3px solid var(--gold); border-radius: 0 2px 2px 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; line-height: 1.6; color: var(--ink); } .kp strong { color: var(--gold-bright); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 14px; } .compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; } .compare-cell { padding: 14px; border-radius: 4px; border: 1px solid; } .compare-cell.bad { background: rgba(158,27,63,0.1); border-color: rgba(158,27,63,0.4); } .compare-cell.good { background: rgba(126,211,158,0.08); border-color: rgba(126,211,158,0.4); } .compare-cell .c-lbl { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .compare-cell.bad .c-lbl { color: var(--warn); } .compare-cell.good .c-lbl { color: var(--green); } .compare-cell .c-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } .persons-grid { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; } .person-row { padding: 12px 14px; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.18); border-radius: 3px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; } .person-row.tragic { border-color: rgba(158,27,63,0.4); background: rgba(158,27,63,0.08); } .person-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: italic; font-size: 14.5px; color: var(--gold-bright); } .person-row.tragic .person-name { color: var(--warn); } .person-father { font-size: 12.5px; color: var(--ink-soft); font-style: italic; font-family: 'Cormorant Garamond', serif; text-align: right; } .person-fate { grid-column: 1 / -1; font-size: 13px; color: var(--ink-soft); padding-top: 4px; border-top: 1px dashed rgba(212,175,55,0.15); } .person-fate strong { color: var(--ink); font-weight: 600; } /* Nav buttons */ .part-nav { margin-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; } .part-nav-btn { flex: 1; min-width: 130px; padding: 14px 18px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14.5px; letter-spacing: 2px; border-radius: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.2s ease; text-align: center; text-transform: uppercase; } .part-nav-btn.prev { background: transparent; border: 1px solid rgba(212,175,55,0.4); color: var(--gold); } .part-nav-btn.prev:hover { background: rgba(212,175,55,0.08); color: var(--gold-bright); border-color: var(--gold); } .part-nav-btn.prev:disabled { opacity: 0.3; cursor: not-allowed; } .part-nav-btn.next { background: linear-gradient(145deg, var(--crimson), var(--deep-red)); border: 1px solid var(--gold); color: var(--gold-bright); box-shadow: 0 0 18px rgba(158,27,63,0.3), inset 0 0 12px rgba(0,0,0,0.3); } .part-nav-btn.next:hover { transform: translateY(-2px); box-shadow: 0 4px 24px rgba(158,27,63,0.5), inset 0 0 12px rgba(0,0,0,0.3); } /* CLOSING + CTA */ .closing { margin: 30px 0 0; padding: 30px 22px; background: radial-gradient(ellipse at top, rgba(212,175,55,0.1), transparent 70%), linear-gradient(165deg, rgba(28,21,40,0.95), rgba(21,16,31,0.85)); border: 1px solid var(--gold-soft); border-radius: 4px; text-align: center; position: relative; overflow: hidden; } .closing::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(212,175,55,0.15); border-radius: 2px; pointer-events: none; } .closing-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .closing-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; line-height: 1.65; color: var(--ink); } .closing-text em { color: var(--gold-bright); font-weight: 600; } .closing-mark { margin-top: 16px; font-size: 16px; color: var(--gold); letter-spacing: 12px; } .cta { margin: 30px 0 0; padding: 30px 22px; background: linear-gradient(155deg, rgba(28,21,40,0.92), rgba(21,16,31,0.75)); border: 1px solid rgba(212,175,55,0.4); border-radius: 4px; text-align: center; } .cta-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .cta h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--ink); margin-bottom: 8px; } .cta h3 em { color: var(--gold-bright); font-style: italic; } .cta-desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; max-width: 360px; margin-left: auto; margin-right: auto; } .cta-meta { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; } .cta-meta-item { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); padding: 4px 12px; background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.3); border-radius: 2px; } .btn-primary { display: block; width: 100%; margin: 0 auto; padding: 16px 24px; background: linear-gradient(145deg, var(--crimson), var(--deep-red)); border: 1px solid var(--gold); border-radius: 4px; color: var(--gold-bright); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 17px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 24px rgba(158,27,63,0.4), inset 0 0 15px rgba(0,0,0,0.3); -webkit-tap-highlight-color: transparent; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-primary:hover, .btn-primary:active { transform: translateY(-2px); box-shadow: 0 6px 32px rgba(158,27,63,0.6), inset 0 0 15px rgba(0,0,0,0.3); } /* QUIZ */ .quiz-back { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(212,175,55,0.4); border-radius: 2px; padding: 8px 14px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; letter-spacing: 1.5px; color: var(--gold); cursor: pointer; transition: all 0.25s ease; margin-bottom: 20px; -webkit-tap-highlight-color: transparent; } .quiz-back:hover { background: rgba(212,175,55,0.08); color: var(--gold-bright); } .progress-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0 24px; } .progress-track { flex: 1; height: 4px; background: rgba(212,175,55,0.15); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--crimson), var(--gold)); border-radius: 2px; transition: width 0.4s ease; box-shadow: 0 0 6px var(--gold); } .progress-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; color: var(--gold); white-space: nowrap; } .progress-text strong { color: var(--gold-bright); font-weight: 700; } .q-card { background: linear-gradient(155deg, rgba(28,21,40,0.92), rgba(21,16,31,0.75)); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; padding: 24px 22px; margin-bottom: 20px; position: relative; animation: fadeUp 0.5s ease; } .q-card::before { content: ''; position: absolute; top: 0; left: 24px; width: 30px; height: 1px; background: var(--gold); box-shadow: 0 0 6px var(--gold); } .q-card .q-num { position: absolute; top: -14px; left: 18px; background: var(--bg); padding: 0 10px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; } .q-card h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 19px; line-height: 1.4; color: var(--ink); } .q-card h2 em { font-style: italic; color: var(--gold-bright); } .options { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .opt-btn { width: 100%; text-align: left; background: linear-gradient(155deg, rgba(15,11,22,0.7), rgba(11,8,18,0.5)); border: 1px solid rgba(212,175,55,0.2); border-radius: 4px; padding: 13px 14px 13px 48px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 15px; line-height: 1.5; color: var(--ink-soft); cursor: pointer; position: relative; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .opt-btn:hover:not(:disabled) { border-color: var(--gold-soft); background: linear-gradient(155deg, rgba(28,21,40,0.85), rgba(21,16,31,0.65)); color: var(--ink); transform: translateX(2px); } .opt-btn .opt-letter { position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(212,175,55,0.4); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 13px; color: var(--gold); background: rgba(212,175,55,0.05); transition: all 0.2s ease; } .opt-btn:hover:not(:disabled) .opt-letter { border-color: var(--gold); background: rgba(212,175,55,0.15); color: var(--gold-bright); } .opt-btn:disabled { cursor: default; } .opt-btn.correct { background: linear-gradient(155deg, rgba(126,211,158,0.18), rgba(74,133,116,0.1)); border-color: var(--green); color: var(--ink); animation: correctPop 0.4s ease; } .opt-btn.correct .opt-letter { background: var(--green); border-color: var(--green); color: var(--bg); } .opt-btn.correct::after { content: '✓'; position: absolute; right: 14px; top: 14px; color: var(--green); font-weight: 700; font-size: 18px; } .opt-btn.wrong { background: linear-gradient(155deg, rgba(239,106,106,0.15), rgba(158,27,63,0.08)); border-color: var(--red); color: var(--ink); animation: shake 0.4s ease; } .opt-btn.wrong .opt-letter { background: var(--red); border-color: var(--red); color: var(--bg); } .opt-btn.wrong::after { content: '✕'; position: absolute; right: 14px; top: 14px; color: var(--red); font-weight: 700; font-size: 18px; } .opt-btn.dimmed { opacity: 0.4; } .explain { margin-top: 16px; padding: 14px 16px; background: rgba(212,175,55,0.06); border-left: 3px solid var(--gold); border-radius: 0 2px 2px 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; line-height: 1.55; color: var(--ink); display: none; animation: fadeUp 0.4s ease; } .explain.visible { display: block; } .explain strong { color: var(--gold-bright); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 14.5px; } .explain em { color: var(--gold-bright); font-weight: 600; font-style: italic; } .explain .verdict { display: inline-block; padding: 2px 10px; border-radius: 2px; font-family: 'Be Vietnam Pro', sans-serif; font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; } .explain.is-correct .verdict { background: rgba(126,211,158,0.15); border: 1px solid var(--green); color: var(--green); } .explain.is-wrong .verdict { background: rgba(239,106,106,0.12); border: 1px solid var(--red); color: var(--red); } .next-btn { display: none; width: 100%; margin-top: 18px; padding: 14px 20px; background: linear-gradient(145deg, var(--crimson), var(--deep-red)); border: 1px solid var(--gold); border-radius: 4px; color: var(--gold-bright); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.2s ease; } .next-btn.visible { display: block; animation: fadeUp 0.4s ease; } .next-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(158,27,63,0.5); } .result-hero { text-align: center; padding: 30px 0 20px; } .result-circle { width: 160px; height: 160px; margin: 0 auto 24px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(212,175,55,0.25), transparent 60%), linear-gradient(145deg, var(--bg-3), var(--bg-2)); border: 2px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 0 6px rgba(212,175,55,0.05), 0 0 40px rgba(212,175,55,0.2), inset 0 0 30px rgba(212,175,55,0.1); animation: correctPop 0.6s ease; } .result-circle::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1px dashed var(--gold-soft); animation: rotate 60s linear infinite; } .result-score { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 56px; line-height: 1; color: var(--gold-bright); text-shadow: 0 0 20px rgba(245,208,97,0.4); } .result-total { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: var(--ink-dim); margin-top: 4px; letter-spacing: 2px; } .result-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; } .result-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 26px; line-height: 1.2; color: var(--ink); margin-bottom: 8px; } .result-title em { font-style: italic; color: var(--gold-bright); } .result-msg { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 380px; margin: 14px auto 0; } .action-row { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; } .btn-secondary { flex: 1; min-width: 130px; padding: 12px 16px; background: transparent; border: 1px solid var(--gold); border-radius: 4px; color: var(--gold); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 13px; letter-spacing: 1.5px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.2s ease; text-align: center; } .btn-secondary:hover { background: rgba(212,175,55,0.08); color: var(--gold-bright); } @media (max-width: 400px) { .app { padding: 24px 16px 50px; } .hero h1 { font-size: 26px; } .hero-chinese { font-size: 46px; letter-spacing: 6px; } .part-card { padding: 28px 18px 24px; } .part-card h2 { font-size: 21px; } .part-card .body { font-size: 14.5px; } .compare-pair { grid-template-columns: 1fr; } .person-row { grid-template-columns: 1fr; } .person-father { text-align: left; } .q-card { padding: 22px 18px; } .q-card h2 { font-size: 17px; } .opt-btn { font-size: 14.5px; padding: 12px 12px 12px 44px; } .result-circle { width: 140px; height: 140px; } .result-score { font-size: 48px; } } /* CHI TABLE */ .chi-table { margin: 16px 0; display: flex; flex-direction: column; gap: 4px; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; padding: 8px; } .chi-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 9px 12px; border-radius: 3px; align-items: center; background: rgba(28,21,40,0.5); border-left: 3px solid; } .chi-row.chi-header { background: linear-gradient(145deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04)); border-left-color: var(--gold); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); } .chi-row.chi-thuy { border-left-color: #86bfe0; } .chi-row.chi-moc { border-left-color: #7ed39e; } .chi-row.chi-hoa { border-left-color: #ef6a6a; } .chi-row.chi-tho { border-left-color: #e0b256; } .chi-row.chi-kim { border-left-color: #d8d8e0; } .chi-row .chi-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: italic; font-size: 17px; color: var(--gold-bright); } .chi-row.chi-header .chi-name { color: var(--gold); font-size: 12px; } .chi-row .chi-hanh { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14.5px; color: var(--ink); } .chi-row.chi-thuy .chi-hanh { color: #86bfe0; } .chi-row.chi-moc .chi-hanh { color: #7ed39e; } .chi-row.chi-hoa .chi-hanh { color: #ef6a6a; } .chi-row.chi-tho .chi-hanh { color: #e0b256; } .chi-row.chi-kim .chi-hanh { color: #d8d8e0; } .chi-row.chi-header .chi-hanh { color: var(--gold); font-size: 12px; } .chi-row .chi-am { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13.5px; color: var(--ink-soft); text-align: right; } .chi-row.chi-header .chi-am { color: var(--gold); font-size: 12px; text-align: right; } @media (max-width: 400px) { .chi-row { padding: 8px 10px; gap: 4px; } .chi-row .chi-name { font-size: 15px; } .chi-row .chi-hanh { font-size: 13.5px; } .chi-row .chi-am { font-size: 12.5px; } } /* PAIR GRID — for xung & hợp */ .pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; } .pair-row { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; background: rgba(28,21,40,0.6); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15px; } .pair-row.hop { border-color: rgba(126,211,158,0.35); background: rgba(126,211,158,0.06); } .pair-row .pair-a, .pair-row .pair-b { color: var(--gold-bright); min-width: 30px; text-align: center; } .pair-row.hop .pair-a, .pair-row.hop .pair-b { color: #aae5bf; } .pair-row .pair-arrow { color: var(--crimson); font-size: 14px; font-style: normal; } .pair-row.hop .pair-arrow { color: var(--green); } /* HINH CARD */ .hinh-card { margin: 10px 0; padding: 12px 14px; background: linear-gradient(155deg, rgba(28,21,40,0.7), rgba(21,16,31,0.5)); border: 1px solid rgba(212,175,55,0.2); border-left: 3px solid var(--gold); border-radius: 4px; } .hinh-card .hinh-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } .hinh-card .hinh-desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; } .hinh-card .hinh-content { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15px; color: var(--gold-bright); } /* QUAD GRID — for tứ hành xung */ .quad-grid { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 16px; } .quad-row { padding: 10px 14px; background: rgba(158,27,63,0.08); border: 1px dashed rgba(158,27,63,0.4); border-radius: 3px; text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; color: var(--ink); letter-spacing: 1px; } .quad-row strong { color: var(--warn); font-weight: 700; font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-size: 14.5px; } /* WARN BOX */ .warn-box { margin: 16px 0; padding: 14px 16px; background: linear-gradient(155deg, rgba(158,27,63,0.18), rgba(92,10,26,0.08)); border: 1px solid rgba(158,27,63,0.5); border-left: 3px solid var(--crimson); border-radius: 4px; } .warn-box .warn-label { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--warn); margin-bottom: 6px; } .warn-box p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0; } .warn-box p strong { color: var(--warn); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; } @media (max-width: 400px) { .pair-grid { grid-template-columns: 1fr; } .pair-row { font-size: 14.5px; } } /* AD GRID — âm dương table */ .ad-grid { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; } .ad-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 12px 14px; border-radius: 4px; border: 1px solid; align-items: center; } .ad-row.duong { background: rgba(245,208,97,0.08); border-color: rgba(245,208,97,0.4); } .ad-row.am { background: rgba(134,191,224,0.08); border-color: rgba(134,191,224,0.4); } .ad-row .ad-lbl { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; text-align: center; padding: 4px 0; border-radius: 3px; } .ad-row.duong .ad-lbl { color: var(--gold-bright); background: rgba(245,208,97,0.15); border: 1px solid rgba(245,208,97,0.4); } .ad-row.am .ad-lbl { color: #b8d8f0; background: rgba(134,191,224,0.12); border: 1px solid rgba(134,191,224,0.4); } .ad-row .ad-items { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: 1px; } .ad-row.duong .ad-items { color: var(--ink); } .ad-row.am .ad-items { color: var(--ink-soft); } /* DYAD GRID — giữ nguyên vs thay đổi */ .dyad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; } .dyad-cell { padding: 14px 14px; border-radius: 4px; border: 1px solid; } .dyad-cell.tinh { background: rgba(134,191,224,0.06); border-color: rgba(134,191,224,0.4); } .dyad-cell.dong { background: rgba(245,208,97,0.06); border-color: rgba(245,208,97,0.4); } .dyad-cell .dyad-lbl { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .dyad-cell.tinh .dyad-lbl { color: #b8d8f0; } .dyad-cell.dong .dyad-lbl { color: var(--gold-bright); } .dyad-cell .dyad-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; line-height: 1.55; color: var(--ink-soft); } .dyad-cell .dyad-text strong { color: var(--ink); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 13.5px; } .dyad-cell.tinh .dyad-text strong { color: #b8d8f0; } .dyad-cell.dong .dyad-text strong { color: var(--gold-bright); } @media (max-width: 400px) { .ad-row { grid-template-columns: 70px 1fr; gap: 10px; padding: 10px 12px; } .ad-row .ad-items { font-size: 14.5px; } .dyad-grid { grid-template-columns: 1fr; } } /* HOUR TABLE - 12 giờ × 10 ngày, ghép cặp can hợp */ .hour-table-wrap { margin: 14px -8px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 8px; } .hour-table { display: inline-flex; flex-direction: column; gap: 2px; min-width: 100%; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; padding: 6px; } .hr-header, .hr-row { display: flex; align-items: stretch; gap: 2px; } .hr-corner, .hr-chi { flex: 0 0 42px; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 13px; border-radius: 2px; padding: 4px 0; } .hr-corner { background: linear-gradient(145deg, rgba(212,175,55,0.18), rgba(212,175,55,0.06)); color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; font-size: 10px; } .hr-chi { background: rgba(28,21,40,0.7); color: var(--gold-bright); font-size: 13px; } .hr-pair { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 2px; overflow: hidden; min-width: 0; } .hr-pair.p1 { background: rgba(126,211,158,0.22); } .hr-pair.p2 { background: rgba(245,208,97,0.22); } .hr-pair.p3 { background: rgba(239,106,106,0.22); } .hr-pair.p4 { background: rgba(134,191,224,0.22); } .hr-pair.p5 { background: rgba(216,184,224,0.22); } .hr-d, .hr-c { display: flex; align-items: center; justify-content: center; padding: 4px 2px; font-family: 'Cormorant Garamond', serif; font-style: italic; text-align: center; font-size: 11.5px; line-height: 1.1; background: rgba(11,8,18,0.6); min-width: 0; } .hr-d { font-weight: 700; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; } .hr-pair.p1 .hr-d { color: #aae5bf; background: rgba(126,211,158,0.12); } .hr-pair.p2 .hr-d { color: var(--gold-bright); background: rgba(245,208,97,0.12); } .hr-pair.p3 .hr-d { color: #f4a0a0; background: rgba(239,106,106,0.12); } .hr-pair.p4 .hr-d { color: #b8d8f0; background: rgba(134,191,224,0.12); } .hr-pair.p5 .hr-d { color: #d8b8e0; background: rgba(216,184,224,0.12); } .hr-c { color: var(--ink); font-weight: 600; } .hr-pair.p1 .hr-c { color: #c8eed5; } .hr-pair.p2 .hr-c { color: #f5d894; } .hr-pair.p3 .hr-c { color: #f5b8b8; } .hr-pair.p4 .hr-c { color: #c8dff0; } .hr-pair.p5 .hr-c { color: #e0c8e8; } @media (max-width: 480px) { .hr-corner, .hr-chi { flex: 0 0 36px; font-size: 12px; } .hr-d { font-size: 9.5px; padding: 3px 1px; } .hr-c { font-size: 10px; padding: 3px 1px; } } /* CAN TABLE — bảng 10 thiên can */ .can-table { margin: 16px 0; display: flex; flex-direction: column; gap: 4px; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; padding: 8px; } .can-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 9px 12px; border-radius: 3px; align-items: center; background: rgba(28,21,40,0.5); border-left: 3px solid; } .can-row.can-header { background: linear-gradient(145deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04)); border-left-color: var(--gold); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); } .can-row.can-moc { border-left-color: #7ed39e; } .can-row.can-hoa { border-left-color: #ef6a6a; } .can-row.can-tho { border-left-color: #e0b256; } .can-row.can-kim { border-left-color: #d8d8e0; } .can-row.can-thuy { border-left-color: #86bfe0; } .can-row .can-hanh { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14.5px; color: var(--ink); } .can-row.can-moc .can-hanh { color: #7ed39e; } .can-row.can-hoa .can-hanh { color: #ef6a6a; } .can-row.can-tho .can-hanh { color: #e0b256; } .can-row.can-kim .can-hanh { color: #d8d8e0; } .can-row.can-thuy .can-hanh { color: #86bfe0; } .can-row.can-header .can-hanh { color: var(--gold); font-size: 12px; } .can-row .can-duong, .can-row .can-am { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: italic; font-size: 16px; text-align: center; } .can-row .can-duong { color: var(--gold-bright); } .can-row .can-am { color: #b8d8f0; } .can-row.can-header .can-duong, .can-row.can-header .can-am { color: var(--gold); font-size: 12px; } @media (max-width: 400px) { .can-row { padding: 8px 10px; gap: 4px; } .can-row .can-hanh { font-size: 13.5px; } .can-row .can-duong, .can-row .can-am { font-size: 15px; } } /* STEP GRID — minh họa cách 5 bước */ .step-grid { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 16px; } .step-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; background: rgba(126,211,158,0.06); border: 1px solid rgba(126,211,158,0.25); border-radius: 3px; } .step-row .step-a, .step-row .step-b { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15px; color: var(--gold-bright); } .step-row .step-a { text-align: right; } .step-row .step-a small, .step-row .step-b small { color: var(--ink-dim); font-size: 11px; font-weight: 400; margin-left: 2px; } .step-row .step-arrow { color: var(--green); font-size: 14px; font-style: normal; } .step-row .step-tag { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); padding: 2px 8px; background: rgba(126,211,158,0.1); border: 1px solid rgba(126,211,158,0.3); border-radius: 2px; white-space: nowrap; } @media (max-width: 400px) { .step-row { grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 8px 10px; } .step-row .step-tag { display: none; } .step-row .step-a, .step-row .step-b { font-size: 14px; } } /* LINEAGE GRID — truyền thừa qua các thế hệ */ .lineage-grid { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; align-items: center; } .lineage-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: rgba(28,21,40,0.7); border: 1px solid rgba(212,175,55,0.3); border-radius: 4px; min-width: 200px; } .lineage-num { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(145deg, var(--crimson), var(--deep-red)); border: 1px solid var(--gold); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 12px; } .lineage-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: italic; font-size: 15px; color: var(--gold-bright); } .lineage-arrow { color: var(--gold); font-size: 14px; opacity: 0.7; } /* HIERARCHY BOX — chủ đạo, phụ trợ, thứ yếu */ .hierarchy-box { margin: 14px 0; display: flex; flex-direction: column; gap: 4px; padding: 10px; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; } .hier-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 9px 12px; border-radius: 3px; align-items: center; } .hier-row.main { background: rgba(245,208,97,0.12); border-left: 3px solid var(--gold-bright); } .hier-row.aux { background: rgba(212,175,55,0.06); border-left: 3px solid rgba(212,175,55,0.5); } .hier-row.minor { background: rgba(28,21,40,0.6); border-left: 3px solid rgba(212,175,55,0.25); } .hier-row .hier-tag { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; } .hier-row.main .hier-tag { color: var(--gold-bright); } .hier-row.aux .hier-tag { color: var(--gold); } .hier-row.minor .hier-tag { color: var(--ink-dim); } .hier-row .hier-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15.5px; color: var(--ink); } .hier-row.main .hier-name { color: var(--gold-bright); } .hier-row.minor .hier-name { color: var(--ink-soft); } /* FIGURE CARD — chân dung nhân vật */ .figure-card { margin: 14px 0; padding: 16px 18px; background: linear-gradient(155deg, rgba(28,21,40,0.85), rgba(21,16,31,0.6)); border: 1px solid rgba(212,175,55,0.25); border-left: 3px solid var(--gold); border-radius: 4px; } .figure-card .figure-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: italic; font-size: 18px; color: var(--gold-bright); margin-bottom: 8px; } .figure-card .figure-year { font-size: 13px; font-weight: 400; color: var(--ink-dim); margin-left: 4px; } .figure-card .figure-body { font-family: 'Be Vietnam Pro', sans-serif; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; } .figure-card .figure-body strong { color: var(--ink); font-weight: 600; } .figure-card .figure-body em { color: var(--gold-bright); font-style: italic; } /* FINDING CARD — kết luận nghiên cứu */ .finding-card { margin: 14px 0; padding: 16px 18px 16px 70px; position: relative; background: linear-gradient(155deg, rgba(126,211,158,0.08), rgba(74,133,116,0.04)); border: 1px solid rgba(126,211,158,0.3); border-radius: 4px; } .finding-card .finding-num { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(145deg, rgba(126,211,158,0.2), rgba(74,133,116,0.1)); border: 1px solid var(--green); color: #aae5bf; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: 1px; } .finding-card .finding-body { font-family: 'Be Vietnam Pro', sans-serif; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; } .finding-card .finding-body strong { color: var(--ink); font-weight: 600; } .finding-card .finding-body em { color: #c8eed5; font-style: italic; } @media (max-width: 400px) { .hier-row { grid-template-columns: 80px 1fr; gap: 8px; padding: 7px 10px; } .hier-row .hier-tag { font-size: 9.5px; } .hier-row .hier-name { font-size: 14.5px; } .figure-card { padding: 14px 16px; } .figure-card .figure-name { font-size: 16.5px; } .finding-card { padding: 14px 14px 14px 60px; } .finding-card .finding-num { width: 38px; height: 38px; font-size: 12.5px; left: 11px; } } /* STAGE GOAL — mục tiêu giai đoạn */ .stage-goal { margin: 14px 0 18px; padding: 16px 18px; background: linear-gradient(155deg, rgba(245,208,97,0.12), rgba(212,175,55,0.04)); border: 1px solid rgba(245,208,97,0.4); border-left: 4px solid var(--gold-bright); border-radius: 4px; } .stage-goal .goal-label { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 8px; } .stage-goal .goal-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; line-height: 1.55; color: var(--ink); margin: 0; } .stage-goal .goal-text strong { color: var(--gold-bright); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 14.5px; } .stage-goal .goal-text em { color: var(--gold-bright); font-style: italic; } /* CONCEPT GRID — danh sách khái niệm */ .concept-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 14px 0; } .concept-cell { padding: 10px 12px; background: rgba(28,21,40,0.7); border: 1px solid rgba(212,175,55,0.3); border-radius: 3px; text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14.5px; color: var(--gold-bright); letter-spacing: 0.5px; } /* CRITERIA GRID — 3 tiêu chí đánh giá */ .criteria-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0; } .criteria-cell { padding: 16px 10px; background: linear-gradient(155deg, rgba(126,211,158,0.1), rgba(74,133,116,0.04)); border: 1px solid rgba(126,211,158,0.4); border-radius: 4px; text-align: center; position: relative; } .criteria-cell::before { content: ''; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 30px; height: 1px; background: rgba(126,211,158,0.4); } .criteria-cell .criteria-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 18px; color: #aae5bf; letter-spacing: 1px; } /* CALLOUT BOX — tài liệu */ .callout-box { margin: 16px 0; padding: 14px 16px; background: linear-gradient(155deg, rgba(134,191,224,0.1), rgba(74,116,148,0.04)); border: 1px solid rgba(134,191,224,0.4); border-left: 3px solid #86bfe0; border-radius: 4px; } .callout-box .callout-label { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #b8d8f0; margin-bottom: 6px; } .callout-box p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0; } .callout-box p strong { color: #b8d8f0; font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 14px; } .callout-box p em { color: #c8dff0; font-style: italic; font-weight: 600; } @media (max-width: 400px) { .concept-grid { gap: 6px; } .concept-cell { padding: 8px 10px; font-size: 13.5px; } .criteria-cell { padding: 12px 8px; } .criteria-cell .criteria-name { font-size: 16px; } } /* SEASON TABLE */ .season-table { margin: 14px 0; display: flex; flex-direction: column; gap: 4px; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; padding: 8px; } .season-row { display: grid; grid-template-columns: 0.8fr 2fr 0.9fr 0.7fr; gap: 8px; align-items: center; padding: 9px 12px; border-radius: 3px; background: rgba(28,21,40,0.5); border-left: 3px solid; } .season-row.season-header { background: linear-gradient(145deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04)); border-left-color: var(--gold); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold); } .season-row.season-xuan { border-left-color: #7ed39e; } .season-row.season-ha { border-left-color: #ef6a6a; } .season-row.season-thu { border-left-color: #d8d8e0; } .season-row.season-dong { border-left-color: #86bfe0; } .season-row .season-mua { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 16px; color: var(--gold-bright); } .season-row.season-header .season-mua { font-size: 11px; color: var(--gold); } .season-row .season-chi { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 14px; color: var(--ink); } .season-row.season-header .season-chi { font-size: 11px; color: var(--gold); font-weight: 700; } .season-row .season-hanh { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14.5px; text-align: center; } .season-row.season-xuan .season-hanh { color: #7ed39e; } .season-row.season-ha .season-hanh { color: #ef6a6a; } .season-row.season-thu .season-hanh { color: #d8d8e0; } .season-row.season-dong .season-hanh { color: #86bfe0; } .season-row.season-header .season-hanh { font-size: 11px; color: var(--gold); } .season-row .season-phuong { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13.5px; color: var(--ink-soft); text-align: right; } .season-row.season-header .season-phuong { font-size: 11px; color: var(--gold); font-weight: 700; } /* MEMO GRID */ .memo-grid { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; } .memo-cell { display: grid; grid-template-columns: 60px 1fr; grid-template-rows: auto auto; column-gap: 12px; padding: 11px 14px; border-radius: 3px; border: 1px solid; border-left-width: 3px; } .memo-cell.memo-xuan { background: rgba(126,211,158,0.06); border-color: rgba(126,211,158,0.35); } .memo-cell.memo-ha { background: rgba(239,106,106,0.06); border-color: rgba(239,106,106,0.35); } .memo-cell.memo-thu { background: rgba(216,216,224,0.05); border-color: rgba(216,216,224,0.3); } .memo-cell.memo-dong { background: rgba(134,191,224,0.06); border-color: rgba(134,191,224,0.35); } .memo-cell .memo-mua { grid-row: 1 / 3; align-self: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 19px; text-align: center; letter-spacing: 1px; } .memo-cell.memo-xuan .memo-mua { color: #aae5bf; } .memo-cell.memo-ha .memo-mua { color: #f4a0a0; } .memo-cell.memo-thu .memo-mua { color: #e0e0e8; } .memo-cell.memo-dong .memo-mua { color: #b8d8f0; } .memo-cell .memo-image { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: var(--ink-soft); line-height: 1.3; } .memo-cell .memo-result { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 13.5px; color: var(--gold-bright); margin-top: 2px; } /* STRENGTH CARD */ .strength-card { margin: 10px 0; padding: 14px 16px; border-radius: 4px; border: 1px solid; border-left-width: 3px; } .strength-card.strong { background: linear-gradient(155deg, rgba(126,211,158,0.12), rgba(74,133,116,0.04)); border-color: rgba(126,211,158,0.45); } .strength-card.medium { background: linear-gradient(155deg, rgba(245,208,97,0.1), rgba(212,175,55,0.04)); border-color: rgba(245,208,97,0.45); } .strength-card.weak { background: linear-gradient(155deg, rgba(239,106,106,0.1), rgba(158,27,63,0.04)); border-color: rgba(239,106,106,0.45); } .strength-card .strength-head { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed; } .strength-card.strong .strength-head { border-bottom-color: rgba(126,211,158,0.3); } .strength-card.medium .strength-head { border-bottom-color: rgba(245,208,97,0.3); } .strength-card.weak .strength-head { border-bottom-color: rgba(239,106,106,0.3); } .strength-card .strength-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; } .strength-card.strong .strength-label { color: #aae5bf; } .strength-card.medium .strength-label { color: var(--gold-bright); } .strength-card.weak .strength-label { color: #f4a0a0; } .strength-card .strength-cond, .strength-card .strength-result { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 4px 0; } .strength-card .strength-result { margin-top: 6px; color: var(--ink); } .strength-card .strength-result strong { font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; } .strength-card.strong .strength-result strong { color: #aae5bf; } .strength-card.medium .strength-result strong { color: var(--gold-bright); } .strength-card.weak .strength-result strong { color: #f4a0a0; } /* BAZI CARD */ .bazi-card { margin: 14px 0; padding: 10px; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.3); border-radius: 4px; display: flex; flex-direction: column; gap: 4px; } .bazi-row { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; padding: 8px 12px; background: rgba(28,21,40,0.6); border-radius: 3px; border-left: 2px solid var(--gold); } .bazi-row .bazi-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); } .bazi-row .bazi-value { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; color: var(--ink); letter-spacing: 1px; } .bazi-row .bazi-value strong { color: var(--gold-bright); font-style: normal; font-family: 'Cormorant Garamond', serif; font-weight: 700; } /* VERDICT KP */ .kp.verdict-good { background: linear-gradient(155deg, rgba(126,211,158,0.15), rgba(74,133,116,0.05)); border-left-color: var(--green); color: var(--ink); } .kp.verdict-good strong { color: #aae5bf; } .kp.verdict-bad { background: linear-gradient(155deg, rgba(239,106,106,0.15), rgba(158,27,63,0.05)); border-left-color: var(--red); color: var(--ink); } .kp.verdict-bad strong { color: #f4a0a0; } @media (max-width: 400px) { .season-row { grid-template-columns: 0.7fr 2fr 0.7fr 0.6fr; gap: 6px; padding: 7px 9px; } .season-row .season-mua { font-size: 14.5px; } .season-row .season-chi { font-size: 12.5px; } .season-row .season-hanh { font-size: 13px; } .season-row .season-phuong { font-size: 12px; } .memo-cell { grid-template-columns: 50px 1fr; padding: 9px 12px; } .memo-cell .memo-mua { font-size: 17px; } .memo-cell .memo-image { font-size: 13px; } .memo-cell .memo-result { font-size: 12.5px; } .bazi-row { grid-template-columns: 60px 1fr; gap: 10px; padding: 7px 10px; } .bazi-row .bazi-label { font-size: 11px; } .bazi-row .bazi-value { font-size: 14.5px; } } .kp.verdict-medium { background: linear-gradient(155deg, rgba(245,208,97,0.12), rgba(212,175,55,0.04)); border-left-color: var(--gold); color: var(--ink); } .kp.verdict-medium strong { color: var(--gold-bright); } </style> </head> <body> <div class="bg-gradient"></div> <div class="stars"></div> <div class="app"> <div class="view active" id="view-article"> <section class="hero"> <span class="hero-tag">Bát Tự · Cơ bản</span> <div class="hero-chinese">三合地支</div> <h1>Tam Hợp Địa Chi<br><em>Kiềng ba chân vững chãi</em></h1> <div class="hero-rule"></div> <p class="hero-intro"> Mười hai địa chi chia thành <em>bốn bộ tam hợp</em> — mỗi bộ là <em>ba chi cách đều nhau</em>, tạo thành một <em>cục ngũ hành</em> hài hòa và mạnh mẽ. </p> <div class="hero-author">Hoàng Trung</div> </section> <div class="part-progress"> <span class="dot current"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="label">Phần <strong id="partNumDisplay">1</strong> / 4</span> </div> <article class="part-card"> <div class="part-card-header"> <div class="seal" id="partSeal">I</div> <span class="lbl" id="partLbl">Phần thứ nhất</span> <h2 id="partTitle">…</h2> <span class="subtitle" id="partSubtitle">…</span> </div> <div class="body" id="partBody">…</div> <div class="part-nav"> <button class="part-nav-btn prev" id="prevPartBtn" onclick="prevPart()">← Phần trước</button> <button class="part-nav-btn next" id="nextPartBtn" onclick="nextPart()">Xem tiếp →</button> </div> </article> <div id="endSection" style="display: none;"> <section class="closing"> <div class="closing-label">⟢ Lời gửi gắm ⟢</div> <p class="closing-text"> <em>Mộc cục</em> — Hợi Mão Mùi.<br> <em>Hỏa cục</em> — Dần Ngọ Tuất.<br> <em>Kim cục</em> — Tỵ Dậu Sửu.<br> <em>Thủy cục</em> — Thân Tý Thìn.<br><br> Tam hợp đủ là <em>kiềng ba chân</em>, có can dẫn thì <em>cực mạnh</em>, bán hợp đủ chi trung tâm vẫn là một <em>thế lực đáng kể</em>. </p> <div class="closing-mark">⟢ ◈ ⟢</div> </section> <section class="cta"> <div class="cta-label">⟢ Tự kiểm tra ⟢</div> <h3>Đã hiểu? <em>Thử ngay</em></h3> <p class="cta-desc"> Mười câu hỏi để củng cố bốn phần vừa đọc. Trả lời từng câu, xem giải thích ngay lập tức. </p> <div class="cta-meta"> <span class="cta-meta-item">10 câu hỏi</span> <span class="cta-meta-item">Phản hồi ngay</span> <span class="cta-meta-item">Không tính giờ</span> </div> <button class="btn-primary" onclick="startQuiz()">⟢ Bắt đầu trắc nghiệm ⟢</button> </section> </div> </div> <div class="view" id="view-quiz"> <button class="quiz-back" onclick="backToArticle()">← Quay về bài viết</button> <div class="progress-bar"> <div class="progress-track"> <div class="progress-fill" id="progressFill" style="width: 0%"></div> </div> <div class="progress-text">Câu <strong id="qNumDisplay">1</strong> / 10</div> </div> <div class="q-card"> <div class="q-num" id="qLabel">Câu 1</div> <h2 id="qText">…</h2> <div class="options" id="qOptions"></div> <div class="explain" id="qExplain"></div> <button class="next-btn" id="nextBtn" onclick="nextQuestion()">Câu tiếp →</button> </div> </div> <div class="view" id="view-result"> <section class="result-hero"> <div class="result-circle"> <div class="result-score"><span id="finalScore">0</span></div> <div class="result-total">/ 10</div> </div> <span class="result-label">⟢ Kết quả ⟢</span> <h2 class="result-title" id="resultTitle">…</h2> <p class="result-msg" id="resultMsg">…</p> </section> <div class="action-row"> <button class="btn-secondary" onclick="restartQuiz()">⟲ Làm lại</button> <button class="btn-secondary" onclick="backToArticle()">← Đọc lại bài</button> </div> </div> </div> <script> const ROMAN = ['', 'I', 'II', 'III', 'IV', 'V', 'VI']; const ORDINAL = ['', 'thứ nhất', 'thứ hai', 'thứ ba', 'thứ tư', 'thứ năm', 'thứ sáu']; const PARTS = [ { title: '<em>Tam hợp</em> địa chi là gì?', subtitle: 'Bốn bộ tam hợp · Bốn cục ngũ hành', body: ` <div class="kp"> <strong>Tam hợp địa chi</strong> là cách kết hợp <em>3 địa chi cách đều nhau</em> trên vòng 12 chi, tạo thành một <strong>cục</strong> (thế lực) ngũ hành <em>hài hòa và mạnh mẽ</em>. </div> <p>· 12 địa chi được chia thành <strong>4 tam hợp</strong>, mỗi tam hợp gồm 3 chi <em>cách nhau 4 vị trí</em> — mỗi chi cách chi tiếp theo 120 độ nếu tưởng tượng là một vòng tròn 360 độ chia 3 phần.</p> <p>· Nó giống như một <strong>chiếc kiềng 3 chân</strong> — phân bổ lực lượng đều ra 3 hướng, tạo nên <em>sự vững chãi và hỗ trợ lẫn nhau</em> rất tốt.</p> <h3 class="inline-sub">⟢ Bốn bộ tam hợp chính ⟢</h3> <div class="season-table"> <div class="season-row season-header"> <span class="season-mua">Cục</span> <span class="season-chi">Tam hợp (3 chi)</span> <span class="season-hanh">Ngũ hành</span> <span class="season-phuong">Đặc điểm</span> </div> <div class="season-row season-xuan"> <span class="season-mua">Mộc</span> <span class="season-chi">Hợi – Mão – Mùi</span> <span class="season-hanh">Mộc</span> <span class="season-phuong">Mộc mạnh</span> </div> <div class="season-row season-ha"> <span class="season-mua">Hỏa</span> <span class="season-chi">Dần – Ngọ – Tuất</span> <span class="season-hanh">Hỏa</span> <span class="season-phuong">Hỏa mạnh</span> </div> <div class="season-row season-thu"> <span class="season-mua">Kim</span> <span class="season-chi">Tỵ – Dậu – Sửu</span> <span class="season-hanh">Kim</span> <span class="season-phuong">Kim mạnh</span> </div> <div class="season-row season-dong"> <span class="season-mua">Thủy</span> <span class="season-chi">Thân – Tý – Thìn</span> <span class="season-hanh">Thủy</span> <span class="season-phuong">Thủy mạnh</span> </div> </div> <h3 class="inline-sub">⟢ Cách nhớ ⟢</h3> <p>Dựa trên chu kỳ <strong>Trường sinh – Đế vượng – Mộ khố</strong> của mỗi hành:</p> <div class="memo-grid"> <div class="memo-cell memo-xuan"> <span class="memo-mua">Đầu</span> <span class="memo-image">Trường sinh</span> <span class="memo-result">→ Nơi hành đó <em>sinh ra</em></span> </div> <div class="memo-cell memo-ha"> <span class="memo-mua">Giữa</span> <span class="memo-image">Đế vượng</span> <span class="memo-result">→ Nơi hành đó <em>vượng nhất</em> · chi trung tâm</span> </div> <div class="memo-cell memo-thu"> <span class="memo-mua">Cuối</span> <span class="memo-image">Mộ khố</span> <span class="memo-result">→ Nơi hành đó <em>tàng giấu</em></span> </div> </div> <div class="kp"> Ví dụ Thủy cục: <strong>Thân</strong> (Trường sinh) – <strong>Tý</strong> (Đế vượng) – <strong>Thìn</strong> (Mộ khố). Bốn chi trung tâm của bốn cục là <em>Tý, Ngọ, Mão, Dậu</em>. </div> ` }, { title: 'Vai trò trong <em>Bát tự</em>', subtitle: 'Tam hợp là nền tảng rất mạnh của thiên can', body: ` <p>Khi bát tự xuất hiện đủ <strong>3 chi của một bộ tam hợp</strong>, ý nghĩa thay đổi tùy theo <em>thiên can</em>:</p> <h3 class="inline-sub">⟢ Ba trường hợp ⟢</h3> <div class="strength-card strong"> <div class="strength-head"> <span class="strength-label">1 can dẫn cùng hành</span> </div> <p class="strength-cond">Thiên can có <em>1 can cùng hành</em> với cục — ví dụ tam hợp Thủy Thân-Tý-Thìn xuất hiện <em>1 can Nhâm</em> hoặc <em>1 can Quý</em>.</p> <p class="strength-result">→ Can dẫn này có <strong>lực rất mạnh</strong>. Cục liên kết, nội lực mạnh.</p> </div> <div class="strength-card medium"> <div class="strength-head"> <span class="strength-label">Không có can dẫn</span> </div> <p class="strength-cond"><em>Không có can</em> nào cùng ngũ hành thấu ra.</p> <p class="strength-result">→ Vẫn tạo thành <strong>tổ hợp mạnh</strong>, ảnh hưởng lớn — tuy nhiên cần <em>một số giai đoạn nhất định</em> mới thể hiện đầy đủ đặc tính.</p> </div> <div class="strength-card weak"> <div class="strength-head"> <span class="strength-label">2–3 can cùng hành</span> </div> <p class="strength-cond">Xuất hiện <em>2 hoặc 3 can</em> cùng ngũ hành.</p> <p class="strength-result">→ Có thể trở nên <strong>rối loạn</strong>. Đội nhóm <em>nhiều lãnh đạo</em> dẫn đến thất thường, vô tổ chức.</p> </div> <div class="kp"> Quy luật: <em>1 can dẫn — cực mạnh, không can dẫn — vẫn mạnh nhưng cần thời cơ, nhiều can dẫn — loạn</em>. </div> ` }, { title: '<em>Bán hợp</em><br>Chỉ có 2 trong 3 chi', subtitle: 'Mạnh khi có chi trung tâm · Yếu khi không có', body: ` <p>Khi bát tự <strong>chỉ có 2 trong 3 chi</strong> của một bộ tam hợp, gọi là <em>bán hợp</em>. Tác dụng phụ thuộc vào việc có chi trung tâm hay không.</p> <h3 class="inline-sub">⟢ Bán hợp mạnh ⟢</h3> <div class="strength-card strong"> <div class="strength-head"> <span class="strength-label">Có chi trung tâm</span> </div> <p class="strength-cond"><strong>Điều kiện:</strong> 2 chi đó có chứa <em>chi trung tâm</em> — Tý, Ngọ, Mão, hoặc Dậu.</p> <p class="strength-cond"><strong>Ví dụ:</strong> Thân + Tý · Tý + Thìn · Dần + Ngọ · Ngọ + Tuất · Hợi + Mão · Mão + Mùi · Tỵ + Dậu · Dậu + Sửu.</p> <p class="strength-result">→ Tạo thành <strong>thế lực khá mạnh</strong> — khoảng <em>50–70% so với tam hợp đầy đủ</em>.</p> </div> <h3 class="inline-sub">⟢ Bán hợp yếu ⟢</h3> <div class="strength-card weak"> <div class="strength-head"> <span class="strength-label">Đầu và cuối · Không có chi trung tâm</span> </div> <p class="strength-cond"><strong>Điều kiện:</strong> 2 chi là <em>đầu và cuối</em> của tam hợp — <em>không có</em> chi trung tâm.</p> <p class="strength-cond"><strong>Ví dụ:</strong> Thân + Thìn · Dần + Tuất · Hợi + Mùi · Tỵ + Sửu.</p> <p class="strength-result">→ Có lực <em>nếu có thiên can cùng ngũ hành thấu</em>. Không có can dẫn — <strong>liên kết không thực sự mạnh</strong>.</p> </div> <div class="kp"> Tóm tắt: bán hợp mạnh hay yếu phụ thuộc vào <strong>chi trung tâm</strong> (Tý, Ngọ, Mão, Dậu) — bốn chi này là <em>tâm điểm Đế vượng</em> của bốn cục. </div> ` }, { title: 'Ví dụ <em>minh họa</em>', subtitle: 'Tam hợp đủ · Tam hợp thiếu can dẫn · Bán hợp mạnh · Bán hợp yếu', body: ` <h3 class="inline-sub">⟢ Ví dụ 1 — Tam hợp Thủy + 1 can dẫn ⟢</h3> <div class="bazi-card"> <div class="bazi-row"> <span class="bazi-label">Năm</span> <span class="bazi-value"><strong>Nhâm</strong> Thân</span> </div> <div class="bazi-row"> <span class="bazi-label">Tháng</span> <span class="bazi-value">Giáp Thìn</span> </div> <div class="bazi-row"> <span class="bazi-label">Ngày</span> <span class="bazi-value">Giáp Tý</span> </div> <div class="bazi-row"> <span class="bazi-label">Giờ</span> <span class="bazi-value">Giáp Tý</span> </div> </div> <p>· Địa chi: <strong>Thân – Tý – Thìn</strong> → tam hợp Thủy đầy đủ.</p> <p>· Thiên can: <strong>Nhâm</strong> (Thủy) dẫn.</p> <div class="kp verdict-good"> ✓ <strong>Thủy mạnh và ổn định</strong> — có cục, có can dẫn, đoàn kết tốt. </div> <h3 class="inline-sub">⟢ Ví dụ 2 — Tam hợp Hỏa, không can dẫn ⟢</h3> <div class="bazi-card"> <div class="bazi-row"> <span class="bazi-label">Năm</span> <span class="bazi-value">Mậu Dần</span> </div> <div class="bazi-row"> <span class="bazi-label">Tháng</span> <span class="bazi-value">Mậu Tuất</span> </div> <div class="bazi-row"> <span class="bazi-label">Ngày</span> <span class="bazi-value">Giáp Dần, giờ Ngọ</span> </div> </div> <p>· Địa chi: <strong>Dần — Tuấ — Ngọ t</strong> (cần thêm giờ Ngọ mới đủ bộ) → tam hợp Hỏa <em>chưa đầy đủ</em>.</p> <p>· Thiên can: <em>không có</em> can Hỏa dẫn.</p> <div class="kp verdict-medium"> ◐ Cần xét bán hợp Dần–Tuất (đầu–cuối) — <strong>không có chi trung tâm Ngọ</strong>, không có can Hỏa — lực hạn chế. </div> <h3 class="inline-sub">⟢ Ví dụ 3 — Bán hợp mạnh (Ngọ + Tuất) ⟢</h3> <div class="bazi-card"> <div class="bazi-row"> <span class="bazi-label">Năm</span> <span class="bazi-value"><strong>Bính</strong> Ngọ</span> </div> <div class="bazi-row"> <span class="bazi-label">Tháng</span> <span class="bazi-value">Tuất</span> </div> <div class="bazi-row"> <span class="bazi-label">Ngày</span> <span class="bazi-value">Canh Thân</span> </div> </div> <p>· Địa chi: <strong>Ngọ + Tuất</strong> (có Ngọ — chi trung tâm) → <em>bán hợp Hỏa mạnh</em>.</p> <p>· Can <strong>Bính</strong> dẫn.</p> <div class="kp verdict-good"> ✓ <strong>Hỏa khá vượng</strong> — bán hợp có chi trung tâm + có can dẫn. </div> <h3 class="inline-sub">⟢ Ví dụ 4 — Bán hợp yếu (không có chi trung tâm) ⟢</h3> <div class="bazi-card"> <div class="bazi-row"> <span class="bazi-label">Năm</span> <span class="bazi-value">Canh Thân</span> </div> <div class="bazi-row"> <span class="bazi-label">Tháng</span> <span class="bazi-value">Canh Thìn</span> </div> <div class="bazi-row"> <span class="bazi-label">Ngày</span> <span class="bazi-value">Canh Tuất</span> </div> <div class="bazi-row"> <span class="bazi-label">Giờ</span> <span class="bazi-value">Đinh Sửu</span> </div> </div> <p>· Địa chi: <strong>Thân + Thìn</strong> (thiếu Tý) → bán hợp Thủy <em>đầu–cuối</em>.</p> <p>· Thiên can: <em>không có</em> Nhâm hay Quý.</p> <div class="kp verdict-bad"> ⚠ <strong>Bán hợp Thủy mức trung bình</strong> — thiếu chi trung tâm Tý, lại không có can Thủy dẫn. Liên kết tồn tại nhưng <em>kém chủ động</em>. </div> ` } ]; const QUESTIONS = [ { text: 'Có bao nhiêu <em>bộ tam hợp</em> chính thức trong Địa chi?', options: ['2', '3', '4', '6'], correct: 2, explain: '<strong>4 bộ tam hợp.</strong> Mỗi bộ là 3 chi cách đều nhau, ứng với 4 ngũ hành chính: <em>Mộc cục (Hợi-Mão-Mùi), Hỏa cục (Dần-Ngọ-Tuất), Kim cục (Tỵ-Dậu-Sửu), Thủy cục (Thân-Tý-Thìn)</em>.' }, { text: 'Bộ <em>tam hợp Thủy</em> gồm những chi nào?', options: ['Dần – Ngọ – Tuất', 'Hợi – Mão – Mùi', 'Thân – Tý – Thìn', 'Tỵ – Dậu – Sửu'], correct: 2, explain: '<strong>Thân – Tý – Thìn.</strong> Theo chu kỳ Trường sinh – Đế vượng – Mộ khố: <em>Thân</em> (Thủy sinh) — <em>Tý</em> (Thủy vượng) — <em>Thìn</em> (Thủy mộ). Đáp án A là Hỏa, B là Mộc, D là Kim.' }, { text: 'Chi nào là <em>chi trung tâm</em> của tam hợp Mộc?', options: ['Hợi', 'Mão', 'Mùi', 'Dần'], correct: 1, explain: '<strong>Mão.</strong> Trong tam hợp Mộc (Hợi-Mão-Mùi), <em>Mão</em> đứng giữa — là chi <em>Đế vượng</em> của Mộc. Bốn chi trung tâm của bốn cục là <strong>Tý, Ngọ, Mão, Dậu</strong> — chìa khóa để phân biệt bán hợp mạnh/yếu.' }, { text: 'Thế nào là <em>bán hợp mạnh</em>?', options: [ 'Có 2 chi bất kỳ trong cùng một tam hợp', 'Có 2 chi không chứa Tý, Ngọ, Mão, Dậu', 'Có 2 chi trong tam hợp và chứa ít nhất một trong bốn chi Tý, Ngọ, Mão, Dậu', 'Có đủ 3 chi nhưng thiếu can dẫn' ], correct: 2, explain: '<strong>Có chi trung tâm.</strong> Bán hợp mạnh = 2 chi trong tam hợp + <em>chứa chi trung tâm</em> (Tý/Ngọ/Mão/Dậu). Lực khoảng 50–70% so với tam hợp đầy đủ. Đáp án D là sai vì 3 chi đầy đủ vẫn là <em>tam hợp</em>, không phải bán hợp.' }, { text: 'Cặp địa chi nào sau đây tạo thành <em>bán hợp mạnh</em>?', options: ['Thân – Thìn', 'Dần – Tuất', 'Hợi – Mùi', 'Tỵ – Dậu'], correct: 3, explain: '<strong>Tỵ – Dậu</strong> vì có <em>Dậu</em> — chi trung tâm của Kim cục (Tỵ-Dậu-Sửu). Ba đáp án còn lại đều là cặp <em>đầu–cuối</em>, không có chi trung tâm: Thân-Thìn (thiếu Tý), Dần-Tuất (thiếu Ngọ), Hợi-Mùi (thiếu Mão) — đều là bán hợp yếu.' }, { text: 'Bát tự có địa chi <em>Dần, Ngọ</em> và thiên can có <em>Bính</em> (Hỏa). Nhận định nào đúng?', options: [ 'Có tam hợp yếu', 'Có tam hợp Hỏa nhưng không có can dẫn nên yếu', 'Có bán hợp Hỏa, có can Bính dẫn → hành Hỏa khá mạnh', 'Chỉ là bán hợp' ], correct: 2, explain: '<strong>Bán hợp Hỏa mạnh + can Bính dẫn.</strong> Dần + Ngọ có <em>Ngọ là chi trung tâm</em> của Hỏa cục (Dần-Ngọ-Tuất) → bán hợp mạnh. Cộng thêm can Bính (Hỏa) thấu → Hỏa khá vượng. Đáp án A và B sai vì chưa đủ 3 chi để là tam hợp.' }, { text: 'Bát tự có địa chi <em>Thân, Thìn</em>, thiên can có <em>Nhâm</em> (Thủy). Đây là trường hợp gì?', options: [ 'Tam hợp Thủy đầy đủ', 'Bán hợp khá vững và có can dẫn → tương đối mạnh', 'Bán hợp yếu, không đáng kể', 'Không có kết hợp gì' ], correct: 1, explain: '<strong>Bán hợp đầu–cuối + can Nhâm dẫn.</strong> Thân-Thìn thiếu Tý (chi trung tâm) → bản thân là bán hợp yếu. Nhưng có <em>can Nhâm Thủy dẫn</em> → liên kết trở nên tương đối mạnh. Đáp án C đúng cho trường hợp <em>không có can dẫn</em>; có can dẫn thì khác.' }, { text: 'Bát tự có địa chi <em>Tỵ, Sửu</em> (thiếu Dậu), trên thiên can <em>không có Kim</em>. Nhận định đúng nhất?', options: [ 'Đây là tam hợp Kim đầy đủ', 'Đây là bán hợp yếu (vì không có Dậu) và không có can dẫn → hầu như không có tác dụng', 'Đây là bán hợp mạnh vì Tỵ và Sửu đều thuộc Kim cục', 'Tạo thành thế lực Hỏa' ], correct: 1, explain: '<strong>Bán hợp yếu + không can dẫn.</strong> Tỵ-Sửu không có Dậu (chi trung tâm) → bán hợp đầu–cuối, vốn đã yếu. Lại không có can Kim dẫn → <em>ảnh hưởng rất yếu</em>. Đáp án C sai vì bán hợp mạnh đòi hỏi <em>chứa chi trung tâm</em>, không chỉ "cùng cục".' }, { text: 'Bát tự: <em>Năm Quý Hợi, tháng Đinh Mão, ngày Kỷ Mùi, giờ Mậu Thìn</em>. Nhận xét về tam hợp?', options: [ 'Có tam hợp Mộc (Hợi – Mão – Mùi) đầy đủ, thiên can không có Mộc', 'Có tam hợp Mộc và thấu Quý Thủy, Đinh Hỏa → không có can Mộc dẫn vẫn tạo thành mộc cục mạnh', 'Có tam hợp Thủy (Hợi – Thìn – ?)', 'Không có tam hợp nào' ], correct: 0, explain: '<strong>Tam hợp Mộc đầy đủ, không có can Mộc.</strong> Đủ <em>Hợi, Mão, Mùi</em> → tam hợp Mộc. Thiên can: Quý (Thủy), Đinh (Hỏa), Kỷ (Thổ), Mậu (Thổ) → <em>không có can Mộc</em>. Vẫn là thế lực Mộc mạnh nhưng <em>thiếu chủ động</em> — cần thời cơ mới phát huy.' }, { text: 'Bát tự: <em>Năm Nhâm Thân, tháng Nhâm Tý, ngày Bính Thìn, giờ Canh Dần</em>. Nhận định nào đúng?', options: [ 'Có tam hợp Thủy (Thân – Tý – Thìn) và thấu 2 can Nhâm (Thủy) → Thủy cực vượng', 'Có tam hợp Hỏa (Dần – Ngọ – Tuất) nhưng thiếu Ngọ', 'Chỉ có bán hợp Thân – Tý (mạnh)', 'Không có bất kỳ liên kết nào' ], correct: 0, explain: '<strong>Tam hợp Thủy + 2 can Nhâm.</strong> Đủ <em>Thân, Tý, Thìn</em> → tam hợp Thủy. Thấu <em>2 can Nhâm Thủy</em> → Thủy <strong>cực vượng</strong>. Chi Dần ở giờ không phá tam hợp Thủy. Lưu ý: 2 can dẫn vẫn được, sẽ trở thành "loạn" khi nhiều hơn — ở đây Nhâm-Nhâm hỗ trợ nhau nên vẫn mạnh.' } ]; let currentPart = 0; let currentQ = 0; let answers = []; let answered = false; function renderPart() { const p = PARTS[currentPart]; document.getElementById('partSeal').textContent = ROMAN[currentPart + 1]; document.getElementById('partLbl').textContent = 'Phần ' + ORDINAL[currentPart + 1]; document.getElementById('partTitle').innerHTML = p.title; document.getElementById('partSubtitle').textContent = p.subtitle; document.getElementById('partBody').innerHTML = p.body; document.getElementById('partNumDisplay').textContent = currentPart + 1; document.querySelectorAll('.part-progress .dot').forEach((d, i) => { d.classList.remove('current', 'done'); if (i < currentPart) d.classList.add('done'); else if (i === currentPart) d.classList.add('current'); }); document.getElementById('prevPartBtn').disabled = currentPart === 0; const nextBtn = document.getElementById('nextPartBtn'); if (currentPart === PARTS.length - 1) { nextBtn.textContent = '⟢ Hoàn tất ⟢'; document.getElementById('endSection').style.display = 'block'; } else { nextBtn.textContent = 'Xem tiếp →'; document.getElementById('endSection').style.display = 'none'; } } function nextPart() { if (currentPart < PARTS.length - 1) { currentPart++; renderPart(); scrollPartIntoView(); } else { scrollToCTA(); } } function prevPart() { if (currentPart > 0) { currentPart--; renderPart(); scrollPartIntoView(); } } function scrollPartIntoView() { const card = document.querySelector('.part-card'); if (card) { const rect = card.getBoundingClientRect(); const top = rect.top + window.pageYOffset - 80; try { window.scrollTo({ top: top, behavior: 'smooth' }); } catch(e) { window.scrollTo(0, top); } } } function scrollToCTA() { const cta = document.querySelector('.cta'); if (cta) { const rect = cta.getBoundingClientRect(); const top = rect.top + window.pageYOffset - 30; try { window.scrollTo({ top: top, behavior: 'smooth' }); } catch(e) { window.scrollTo(0, top); } } } function startQuiz() { currentQ = 0; answers = []; document.getElementById('view-article').classList.remove('active'); document.getElementById('view-quiz').classList.add('active'); renderQuestion(); scrollToTop(); } function backToArticle() { document.getElementById('view-quiz').classList.remove('active'); document.getElementById('view-result').classList.remove('active'); document.getElementById('view-article').classList.add('active'); scrollToTop(); } function renderQuestion() { answered = false; const q = QUESTIONS[currentQ]; const total = QUESTIONS.length; document.getElementById('progressFill').style.width = ((currentQ) / total * 100) + '%'; document.getElementById('qNumDisplay').textContent = currentQ + 1; document.getElementById('qLabel').textContent = 'Câu ' + (currentQ + 1); document.getElementById('qText').innerHTML = q.text; const letters = ['A', 'B', 'C', 'D']; document.getElementById('qOptions').innerHTML = q.options.map((opt, i) => ` <button class="opt-btn" data-idx="${i}" onclick="selectAnswer(${i})"> <span class="opt-letter">${letters[i]}</span>${opt} </button> `).join(''); const explain = document.getElementById('qExplain'); explain.classList.remove('visible', 'is-correct', 'is-wrong'); explain.innerHTML = ''; document.getElementById('nextBtn').classList.remove('visible'); document.getElementById('nextBtn').textContent = (currentQ === QUESTIONS.length - 1) ? '⟢ Xem kết quả ⟢' : 'Câu tiếp →'; } function selectAnswer(idx) { if (answered) return; answered = true; const q = QUESTIONS[currentQ]; const isCorrect = idx === q.correct; answers.push({ correct: isCorrect }); document.querySelectorAll('.opt-btn').forEach((btn, i) => { btn.disabled = true; if (i === q.correct) btn.classList.add('correct'); else if (i === idx) btn.classList.add('wrong'); else btn.classList.add('dimmed'); }); const explain = document.getElementById('qExplain'); explain.innerHTML = `<span class="verdict">${isCorrect ? '✓ Chính xác' : '✕ Chưa đúng'}</span><br>${q.explain}`; explain.classList.add('visible'); explain.classList.add(isCorrect ? 'is-correct' : 'is-wrong'); document.getElementById('nextBtn').classList.add('visible'); document.getElementById('progressFill').style.width = ((currentQ + 1) / QUESTIONS.length * 100) + '%'; } function nextQuestion() { if (currentQ < QUESTIONS.length - 1) { currentQ++; renderQuestion(); scrollToTop(); } else { showResult(); } } function showResult() { let totalCorrect = 0; answers.forEach(a => { if (a.correct) totalCorrect++; }); document.getElementById('finalScore').textContent = totalCorrect; let title, msg; if (totalCorrect === 10) { title = 'Toàn <em>thập</em>!'; msg = 'Hoàn hảo. Bạn đã nắm vững tam hợp đầy đủ và phân biệt được bán hợp mạnh/yếu. Đây là phần kiến thức cốt lõi để đọc cấu trúc bát tự.'; } else if (totalCorrect >= 8) { title = 'Xuất <em>sắc</em>'; msg = 'Bạn đã nắm được tam hợp và bán hợp. Vài câu sai chỉ là chi tiết — xem lại giải thích để hoàn thiện.'; } else if (totalCorrect >= 6) { title = '<em>Khá</em> tốt'; msg = 'Đã hiểu sơ lược. Nên đọc lại bảng 4 bộ tam hợp và phần bán hợp mạnh/yếu — đây là nội dung dễ nhầm lẫn nhất.'; } else if (totalCorrect >= 4) { title = 'Còn <em>chỗ trống</em>'; msg = 'Nền tảng chưa vững. Khuyến nghị: học thuộc 4 bộ tam hợp (Mộc Hợi-Mão-Mùi / Hỏa Dần-Ngọ-Tuất / Kim Tỵ-Dậu-Sửu / Thủy Thân-Tý-Thìn) trước.'; } else { title = '<em>Khởi đầu</em>'; msg = 'Đây mới là bước đầu — không sao cả. Học thuộc 4 chi trung tâm Tý-Ngọ-Mão-Dậu (Đế vượng) trước, đây là chìa khóa của tam hợp và bán hợp.'; } document.getElementById('resultTitle').innerHTML = title; document.getElementById('resultMsg').innerHTML = msg; document.getElementById('view-quiz').classList.remove('active'); document.getElementById('view-result').classList.add('active'); scrollToTop(); } function restartQuiz() { currentQ = 0; answers = []; document.getElementById('view-result').classList.remove('active'); document.getElementById('view-quiz').classList.add('active'); renderQuestion(); scrollToTop(); } function scrollToTop() { try { window.scrollTo({ top: 0, behavior: 'instant' }); } catch(e) { window.scrollTo(0, 0); } } renderPart(); </script> <script> (function(){ function getH() { var app = document.querySelector('.app'); if (app) { var rect = app.getBoundingClientRect(); var appTop = rect.top + (window.pageYOffset || document.documentElement.scrollTop); return Math.ceil(appTop + app.scrollHeight + 40); } return Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight); } function postH(){ try { if (window.parent && window.parent !== window) { var activeView = document.querySelector('.view.active'); var viewId = activeView ? activeView.id : ''; if (viewId === 'view-article') { var endVisible = document.getElementById('endSection').style.display !== 'none'; viewId = 'view-article-p' + (typeof currentPart !== 'undefined' ? currentPart : 0) + (endVisible ? 'e' : ''); } window.parent.postMessage({ ltThopHeight: getH(), viewId: viewId }, '*'); } } catch(e){} } function init() { postH(); [50, 200, 500, 1000, 2000, 3500, 5000, 8000, 12000].forEach(function(t){ setTimeout(postH, t); }); if (typeof ResizeObserver !== 'undefined') { try { var ro = new ResizeObserver(postH); var app = document.querySelector('.app'); if (app) ro.observe(app); ro.observe(document.body); } catch(e){} } if (typeof MutationObserver !== 'undefined') { try { new MutationObserver(postH).observe(document.body, { childList: true, subtree: true, attributes: true }); } catch(e){} } setInterval(postH, 1000); window.addEventListener('resize', postH); window.addEventListener('load', postH); if (document.fonts && document.fonts.ready) document.fonts.ready.then(postH); ['nextPart', 'prevPart', 'startQuiz', 'backToArticle', 'selectAnswer', 'nextQuestion', 'restartQuiz'].forEach(function(name) { var orig = window[name]; if (orig) { window[name] = function() { var r = orig.apply(this, arguments); [50, 200, 500, 1000].forEach(function(t){ setTimeout(postH, t); }); return r; }; } }); } if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', init); else init(); })(); </script> </body> </html> " style="width: 100% !important; height: 4200px !important; min-height: 4200px !important; max-height: none !important; border: 0 !important; display: block !important; background: transparent !important; margin: 0 !important; padding: 0 !important;" title="Tam Hợp Địa Chi - Hoàng Trung"> </iframe> </div> <script> (function() { var IFRAME_ID = 'lt-thop-frame'; var INITIAL_H = 4200; var currentH = INITIAL_H; var heightsByView = {}; var currentViewId = 'view-article-p0'; function applyH(h) { var f = document.getElementById(IFRAME_ID); if (!f) return; var newH = h + 50; if (newH < 200) return; if (newH === currentH) return; currentH = newH; f.style.setProperty('height', newH + 'px', 'important'); f.style.setProperty('min-height', newH + 'px', 'important'); f.style.setProperty('max-height', 'none', 'important'); f.setAttribute('height', newH); var parent = f.parentElement; while (parent && parent !== document.body) { var cs = window.getComputedStyle(parent); if (cs.maxHeight !== 'none' && cs.maxHeight !== '' && parseInt(cs.maxHeight) < newH) parent.style.setProperty('max-height', 'none', 'important'); if (cs.overflow === 'hidden') parent.style.setProperty('overflow', 'visible', 'important'); parent = parent.parentElement; } } function setH(h, viewId) { if (!h || h < 100) return; if (viewId) { if (!heightsByView[viewId] || h > heightsByView[viewId]) heightsByView[viewId] = h; currentViewId = viewId; } var targetH = heightsByView[currentViewId] || h; applyH(targetH); } window.addEventListener('message', function(e) { if (e && e.data && typeof e.data.ltThopHeight === 'number') setH(e.data.ltThopHeight, e.data.viewId); }); function pollHeight() { var f = document.getElementById(IFRAME_ID); if (!f || !f.contentWindow) return; try { var doc = f.contentWindow.document; if (doc) { var app = doc.querySelector('.app'); var activeView = doc.querySelector('.view.active'); var viewId = activeView ? activeView.id : ''; var h; if (app) { var rect = app.getBoundingClientRect(); var appTop = rect.top + (f.contentWindow.pageYOffset || doc.documentElement.scrollTop); h = Math.ceil(appTop + app.scrollHeight + 40); } else if (doc.body) { h = Math.max(doc.body.scrollHeight, doc.body.offsetHeight, doc.documentElement.scrollHeight, doc.documentElement.offsetHeight); } if (h) setH(h, viewId); } } catch(e) {} } function breakParents() { var f = document.getElementById(IFRAME_ID); if (!f) return; var parent = f.parentElement; while (parent && parent !== document.body) { var cs = window.getComputedStyle(parent); if (cs.maxHeight !== 'none' && cs.maxHeight !== '' && parseInt(cs.maxHeight) < INITIAL_H) parent.style.setProperty('max-height', 'none', 'important'); if (cs.overflow === 'hidden') parent.style.setProperty('overflow', 'visible', 'important'); parent = parent.parentElement; } } breakParents(); [100, 500, 1000, 2000, 4000, 7000, 11000].forEach(function(t) { setTimeout(function() { breakParents(); pollHeight(); }, t); }); setInterval(pollHeight, 800); window.addEventListener('resize', pollHeight); window.addEventListener('load', pollHeight); })(); </script> <!-- End of TAM HỢP ĐỊA CHI -->
