<!-- ======================================================== --> <!-- TAM HỘI ĐỊA CHI — Bốn nhóm bốn mùa + 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-th-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-th-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-th-frame"> <iframe id="lt-th-frame" height="3000" 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ội Địa Chi — Bốn nhóm bốn mùa</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; } } </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ội Địa Chi<br><em>Bốn nhóm · Bốn mùa</em></h1> <div class="hero-rule"></div> <p class="hero-intro"> Mười hai địa chi chia thành <em>bốn nhóm tam hội</em> — mỗi nhóm là <em>ba chi liên tiếp</em>, ứng với một mùa. Khi đầy đủ, ba chi tạo thành <em>thế lực mạnh</em> cùng phương hướng và ngũ hành. </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="label">Phần <strong id="partNumDisplay">1</strong> / 3</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>Xuân Mộc</em> — Dần Mão Thìn.<br> <em>Hạ Hỏa</em> — Tỵ Ngọ Mùi.<br> <em>Thu Kim</em> — Thân Dậu Tuất.<br> <em>Đông Thủy</em> — Hợi Tý Sửu.<br><br> Bốn nhóm — bốn mùa — bốn phương. Tam hội đủ là <em>thế lực mạnh</em>, có can dẫn càng <em>chủ động hơn</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ố ba 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ội</em> địa chi là gì?', subtitle: 'Bốn nhóm tam hội · Bốn mùa trong năm', body: ` <div class="kp"> <strong>Tam hội địa chi</strong> là cách chia 12 địa chi thành <em>4 nhóm</em>, mỗi nhóm gồm <strong>3 chi liên tiếp nhau</strong>, ứng với <em>4 mùa trong năm</em>. </div> <p>Mỗi nhóm tạo thành một <strong>thế lực mạnh</strong>, cùng chung <em>phương hướng</em> và <em>ngũ hành</em>, hỗ trợ lẫn nhau.</p> <h3 class="inline-sub">⟢ Bảng 4 mùa — 4 nhóm tam hội ⟢</h3> <div class="season-table"> <div class="season-row season-header"> <span class="season-mua">Mùa</span> <span class="season-chi">3 chi liên tiếp</span> <span class="season-hanh">Ngũ hành</span> <span class="season-phuong">Phương</span> </div> <div class="season-row season-xuan"> <span class="season-mua">Xuân</span> <span class="season-chi">Dần – Mão – Thìn</span> <span class="season-hanh">Mộc</span> <span class="season-phuong">Đông</span> </div> <div class="season-row season-ha"> <span class="season-mua">Hạ</span> <span class="season-chi">Tỵ – Ngọ – Mùi</span> <span class="season-hanh">Hỏa</span> <span class="season-phuong">Nam</span> </div> <div class="season-row season-thu"> <span class="season-mua">Thu</span> <span class="season-chi">Thân – Dậu – Tuất</span> <span class="season-hanh">Kim</span> <span class="season-phuong">Tây</span> </div> <div class="season-row season-dong"> <span class="season-mua">Đông</span> <span class="season-chi">Hợi – Tý – Sửu</span> <span class="season-hanh">Thủy</span> <span class="season-phuong">Bắc</span> </div> </div> <h3 class="inline-sub">⟢ Cách nhớ dễ dàng ⟢</h3> <div class="memo-grid"> <div class="memo-cell memo-xuan"> <span class="memo-mua">Xuân</span> <span class="memo-image">Cây cối đâm chồi</span> <span class="memo-result">→ Mộc → Dần Mão Thìn</span> </div> <div class="memo-cell memo-ha"> <span class="memo-mua">Hạ</span> <span class="memo-image">Nóng bức</span> <span class="memo-result">→ Hỏa → Tỵ Ngọ Mùi</span> </div> <div class="memo-cell memo-thu"> <span class="memo-mua">Thu</span> <span class="memo-image">Vàng úa, thu hoạch</span> <span class="memo-result">→ Kim → Thân Dậu Tuất</span> </div> <div class="memo-cell memo-dong"> <span class="memo-mua">Đông</span> <span class="memo-image">Lạnh giá, tích nước</span> <span class="memo-result">→ Thủy → Hợi Tý Sửu</span> </div> </div> ` }, { title: 'Vai trò của <em>Tam Hội</em><br>trong Bát tự', subtitle: 'Có can dẫn hay không · Một hay nhiều · Ý nghĩa khác nhau', body: ` <p>Khi bát tự xuất hiện đủ <strong>3 chi liên tiếp</strong> tạo thành tam hội, ý nghĩa thay đổi tùy theo <em>thiên can</em> trên bát tự:</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 cùng hành</span> </div> <p class="strength-cond">Thiên can có <em>1 can cùng hành</em> với tam hội.</p> <p class="strength-result">→ Tổ hợp <strong>cực mạnh</strong>. Can là <em>lãnh đạo</em>, 3 chi là <em>lực lượng đoàn kết hỗ trợ</em>.</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">Thấu <em>2 hoặc 3 can cùng hành</em> với tam hội.</p> <p class="strength-result">→ Dễ gây <strong>rối loạn</strong>, mạnh lúc yếu lúc, <em>khó ổn định</em>.</p> </div> <div class="strength-card medium"> <div class="strength-head"> <span class="strength-label">Không có can cùng hành</span> </div> <p class="strength-cond"><em>Không có can nào</em> cùng hành thấu ra.</p> <p class="strength-result">→ Nhóm tam hội <strong>vẫn là một thế lực đáng kể</strong>, nhưng <em>kém chủ động hơn</em>.</p> </div> <div class="kp"> Tóm lại: <em>can dẫn vừa đủ thì mạnh, can dẫn quá nhiều thì loạn, không có can dẫn thì có lực nhưng kém chủ động</em>. </div> ` }, { title: 'Ví dụ <em>cụ thể</em>', subtitle: 'Đối chiếu lý thuyết với bát tự thật', body: ` <h3 class="inline-sub">⟢ Ví dụ 1 — Tam hội Mộc + 1 can Mộc ⟢</h3> <div class="bazi-card"> <div class="bazi-row"> <span class="bazi-label">Năm</span> <span class="bazi-value"><strong>Giáp</strong> Dần</span> </div> <div class="bazi-row"> <span class="bazi-label">Tháng</span> <span class="bazi-value">Mão</span> </div> <div class="bazi-row"> <span class="bazi-label">Ngày</span> <span class="bazi-value">Thìn</span> </div> </div> <p>· Tam hội <strong>Dần – Mão – Thìn</strong> đầy đủ → hành <em>Mộc</em>.</p> <p>· Can <strong>Giáp</strong> (Mộc) thấu lên trên.</p> <div class="kp verdict-good"> ✓ <strong>Mộc rất mạnh</strong> — can Giáp dẫn đầu, ba chi cùng nhau hỗ trợ. </div> <h3 class="inline-sub">⟢ Ví dụ 2 — Tam hội Hỏa + 2 can Hỏa ⟢</h3> <div class="bazi-card"> <div class="bazi-row"> <span class="bazi-label">Năm</span> <span class="bazi-value"><strong>Đinh</strong> Tỵ</span> </div> <div class="bazi-row"> <span class="bazi-label">Tháng</span> <span class="bazi-value">Mùi</span> </div> <div class="bazi-row"> <span class="bazi-label">Ngày</span> <span class="bazi-value">Thìn</span> </div> <div class="bazi-row"> <span class="bazi-label">Giờ</span> <span class="bazi-value"><strong>Bính</strong> Ngọ</span> </div> </div> <p>· Tam hội <strong>Tỵ – Ngọ – Mùi</strong> đầy đủ → hành <em>Hỏa</em>.</p> <p>· Thấu <strong>2 can Hỏa</strong> (Bính và Đinh).</p> <div class="kp verdict-bad"> ⚠ <strong>Hỏa quá mạnh, dễ loạn</strong> — quá nhiều can dẫn cùng hành dẫn đến mất ổn định. </div> ` } ]; const QUESTIONS = [ { text: 'Tam hội địa chi là cách chia 12 địa chi thành <em>mấy nhóm</em>?', options: ['2 nhóm', '3 nhóm', '5 nhóm', '4 nhóm'], correct: 3, explain: '<strong>4 nhóm</strong> ứng với 4 mùa trong năm: <em>Xuân Mộc, Hạ Hỏa, Thu Kim, Đông Thủy</em>. Mỗi nhóm gồm 3 chi liên tiếp nhau.' }, { text: 'Mỗi nhóm tam hội gồm các địa chi có <em>đặc điểm</em> gì?', options: ['Ba chi cách đều nhau', 'Ba chi bất kỳ', 'Ba chi cùng âm hoặc cùng dương', 'Ba chi liên tiếp nhau'], correct: 3, explain: '<strong>Ba chi liên tiếp nhau.</strong> Ví dụ tam hội Mộc là <em>Dần – Mão – Thìn</em> — ba chi đứng cạnh nhau trên vòng 12 chi. Khác hẳn <em>tam hợp</em> (ba chi cách đều 4 vị trí).' }, { text: 'Tam hội <em>mùa Xuân</em> gồm những địa chi nào và thuộc hành gì?', options: ['Tỵ – Ngọ – Mùi, hành Hỏa', 'Thân – Dậu – Tuất, hành Kim', 'Hợi – Tý – Sửu, hành Thủy', 'Dần – Mão – Thìn, hành Mộc'], correct: 3, explain: '<strong>Dần – Mão – Thìn, hành Mộc.</strong> Cách nhớ: <em>Xuân là mùa cây cối đâm chồi → Mộc</em>. Phương hướng là Đông. Ba đáp án còn lại lần lượt là Hạ Hỏa, Thu Kim, Đông Thủy.' }, { text: 'Tam hội <em>Tỵ – Ngọ – Mùi</em> ứng với mùa nào và phương hướng nào?', options: ['Mùa Thu, phương Tây', 'Mùa Đông, phương Bắc', 'Mùa Xuân, phương Đông', 'Mùa Hạ, phương Nam'], correct: 3, explain: '<strong>Mùa Hạ, phương Nam.</strong> Cách nhớ: <em>Hạ là mùa nóng bức → Hỏa → phương Nam</em> (nơi mặt trời mạnh nhất). Tỵ-Ngọ-Mùi đều là chi của tháng 4-5-6 âm lịch.' }, { text: 'Đâu là các chi tạo thành <em>tam hội Kim</em>?', options: ['Thìn – Tuất – Sửu', 'Hợi – Tý – Sửu', 'Dần – Mão – Thìn', 'Tuất – Thân – Dậu'], correct: 3, explain: '<strong>Tuất – Thân – Dậu</strong> (tức Thân-Dậu-Tuất, viết khác thứ tự không sai). Tam hội Kim ứng với mùa Thu, phương Tây — <em>vàng úa, thu hoạch → Kim</em>.' }, { text: 'Theo bài viết, nếu thiên can có <em>1 can cùng hành</em> với tam hội thì điều gì xảy ra?', options: ['Tạo thành tổ hợp yếu', 'Gây rối loạn, mạnh lúc yếu lúc', 'Không ảnh hưởng gì', 'Tạo thành tổ hợp cực mạnh — can là lãnh đạo, 3 chi là lực lượng đoàn kết'], correct: 3, explain: '<strong>Tổ hợp cực mạnh.</strong> Can dẫn vừa đủ giống như <em>một người lãnh đạo</em> điều phối ba chi đoàn kết hỗ trợ. Đây là tình huống lý tưởng — có lãnh đạo, có lực lượng, không bị nhiễu.' }, { text: 'Nếu thấu <em>2 hoặc 3 can cùng hành</em> với tam hội, hậu quả là gì?', options: ['Cực kỳ ổn định', 'Không có tác dụng', 'Tam hội tự động tan rã', 'Dễ gây rối loạn, mạnh lúc yếu lúc, khó ổn định'], correct: 3, explain: '<strong>Dễ gây rối loạn.</strong> <em>Quá nhiều lãnh đạo</em> tranh giành — không ai chịu ai, lực lượng phân tán. Tổng lực vẫn mạnh nhưng <em>không tập trung</em>, mạnh lúc yếu lúc, khó ổn định.' }, { text: 'Khi tam hội hình thành nhưng <em>không có can nào cùng hành</em> thấu ra, thì nhóm tam hội đó:', options: ['Hoàn toàn vô dụng', 'Mạnh hơn khi có can dẫn', 'Trở thành thế lực xấu', 'Vẫn là một thế lực đáng kể, nhưng kém chủ động hơn'], correct: 3, explain: '<strong>Vẫn là thế lực đáng kể, nhưng kém chủ động.</strong> Có lực lượng nhưng <em>thiếu lãnh đạo</em> — như đoàn quân không có chỉ huy, đứng vững được nhưng không tự đề xuất được hành động.' }, { text: 'Bát tự có các trụ: <em>Bính Thìn — Canh Dần — Tân Mão — Kỷ Sửu</em>. Nhận định nào đúng?', options: ['Không có tam hội', 'Có tam hội, thấu 1 can Mộc', 'Có tam hội, thấu 2 can Mộc', 'Có tam hội nhưng không có can Mộc'], correct: 3, explain: '<strong>Có tam hội nhưng không có can Mộc.</strong> Các chi: <em>Thìn, Dần, Mão, Sửu</em> → đủ tam hội Mộc (Dần-Mão-Thìn). Thiên can: <em>Bính (Hỏa), Canh (Kim), Tân (Kim), Kỷ (Thổ)</em> → <em>không có can Mộc nào</em>. Tam hội Mộc tồn tại nhưng kém chủ động vì thiếu can dẫn.' }, { text: 'Bát tự có các trụ: <em>Bính Thìn — Canh Dần — Tân Mão — Giáp Ngọ</em>. Nhận định nào đúng?', options: ['Không có tam hội', 'Có tam hội, thấu 1 can Mộc', 'Có tam hội, thấu 2 can Mộc', 'Có tam hội nhưng không có can Mộc'], correct: 1, explain: '<strong>Có tam hội, thấu 1 can Mộc.</strong> Các chi: <em>Thìn, Dần, Mão, Ngọ</em> → đủ tam hội Mộc (Dần-Mão-Thìn). Thiên can: <em>Bính (Hỏa), Canh (Kim), Tân (Kim), Giáp (Mộc)</em> → <em>thấu đúng 1 can Mộc (Giáp)</em>. Đây là tổ hợp cực mạnh — Giáp dẫn đầu, ba chi đoàn kết hỗ trợ.' } ]; 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 toàn bộ tam hội địa chi và vai trò của nó trong bát tự. Sẵn sàng học các nhóm hợp xung khác như tam hợp, lục hợp, lục xung.'; } else if (totalCorrect >= 8) { title = 'Xuất <em>sắc</em>'; msg = 'Bạn đã nắm được tam hội. Vài câu sai chỉ là chi tiết về vai trò của can dẫn — 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 mùa và 3 trường hợp can dẫn — đây là nội dung quan trọng và 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 bảng 4 mùa (Xuân Mộc / Hạ Hỏa / Thu Kim / Đông Thủy) trước, sau đó ôn vai trò của can dẫn.'; } else { title = '<em>Khởi đầu</em>'; msg = 'Đây mới là bước đầu — không sao cả. Học thuộc 4 nhóm tam hội theo mùa, sau đó quay lại làm trắc nghiệm.'; } 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({ ltThHeight: 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: 3000px !important; min-height: 3000px !important; max-height: none !important; border: 0 !important; display: block !important; background: transparent !important; margin: 0 !important; padding: 0 !important;" title="Tam Hội Địa Chi - Hoàng Trung"> </iframe> </div> <script> (function() { var IFRAME_ID = 'lt-th-frame'; var INITIAL_H = 3000; 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.ltThHeight === 'number') setH(e.data.ltThHeight, 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ỘI ĐỊA CHI -->
