<!-- THẬP THẦN LÀ GÌ — 14 phần · Event delegation · Congrats message --> <style> .lt-wrap-lt-tt-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-tt-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-tt-frame"> <iframe id="lt-tt-frame" height="4600" 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>Thập Thần Là Gì? — Phẩm chất của bài học</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: 6px; height: 6px; 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; } } /* RULE CARD — hai quy tắc vàng */ .rule-card { margin: 14px 0; display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 16px 18px; background: linear-gradient(155deg, rgba(245,208,97,0.1), rgba(212,175,55,0.03)); border: 1px solid rgba(245,208,97,0.4); border-left: 4px solid var(--gold-bright); border-radius: 4px; } .rule-card .rule-num { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(145deg, var(--crimson), var(--deep-red)); border: 2px 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: 24px; letter-spacing: 1px; align-self: center; box-shadow: 0 2px 8px rgba(158,27,63,0.3); } .rule-card .rule-body { min-width: 0; } .rule-card .rule-head { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16.5px; line-height: 1.4; color: var(--ink); margin: 0 0 6px 0; } .rule-card .rule-head strong { color: var(--gold-bright); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 15px; } .rule-card .rule-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 4px 0; } .rule-card .rule-text em { color: var(--gold-bright); font-style: italic; } .rule-card .rule-text strong { color: var(--ink); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 13.5px; } /* CONCEPT GRID 3 columns variant + meaning tag */ .concept-grid.concept-grid-3 { grid-template-columns: repeat(3, 1fr); } .concept-cell .concept-tag { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14.5px; color: var(--gold-bright); margin-bottom: 4px; } .concept-cell .concept-meaning { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12.5px; color: var(--ink-soft); letter-spacing: 1px; text-transform: uppercase; } @media (max-width: 400px) { .rule-card { grid-template-columns: 48px 1fr; gap: 12px; padding: 14px 14px; } .rule-card .rule-num { width: 44px; height: 44px; font-size: 20px; } .rule-card .rule-head { font-size: 15px; } .rule-card .rule-text { font-size: 13.5px; } .concept-grid.concept-grid-3 { grid-template-columns: 1fr; } } .congrats-msg { margin-top: 20px; padding: 14px 18px; background: linear-gradient(155deg, rgba(212,175,55,0.15), rgba(212,175,55,0.05)); border: 1px solid rgba(212,175,55,0.5); border-radius: 6px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; color: var(--gold-bright); line-height: 1.5; text-align: center; } .congrats-msg em { font-style: italic; color: var(--ink); font-weight: 700; font-family: 'Be Vietnam Pro', sans-serif; font-size: 14.5px; } .tru-card { margin: 14px 0; padding: 14px 16px; background: linear-gradient(155deg, rgba(28,21,40,0.7), rgba(21,16,31,0.5)); border: 1px solid rgba(212,175,55,0.3); border-left: 3px solid var(--gold-bright); border-radius: 4px; } .tru-card .tru-head { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed rgba(212,175,55,0.3); } .tru-card .tru-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-bright); } .tru-card p { margin: 5px 0; } /* CAN TABLE */ .can-table { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; } .can-row { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; padding: 10px 14px; background: rgba(28,21,40,0.6); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; border-left: 3px solid; } .can-row:nth-child(1) { border-left-color: #7ed39e; } .can-row:nth-child(2) { border-left-color: #ef6a6a; } .can-row:nth-child(3) { border-left-color: #d4af37; } .can-row:nth-child(4) { border-left-color: #d8d8e0; } .can-row:nth-child(5) { border-left-color: #86bfe0; } .can-row .can-hanh { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 16px; text-align: center; } .can-hanh.hanh-moc { color: #7ed39e; } .can-hanh.hanh-hoa { color: #ef6a6a; } .can-hanh.hanh-tho { color: var(--gold-bright); } .can-hanh.hanh-kim { color: #e0e0e8; } .can-hanh.hanh-thuy { color: #86bfe0; } .can-row .can-pair { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14.5px; color: var(--ink-soft); } /* TT TABLE */ .tt-table { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; } .tt-group { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.2); border-radius: 4px; border-left: 3px solid var(--gold); } .tt-group .tt-rel { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 13px; color: var(--gold); letter-spacing: 0.5px; text-transform: uppercase; } .tt-group .tt-item { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14.5px; color: var(--ink-soft); padding-left: 4px; } .tt-group .tt-item strong { color: var(--gold-bright); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 14px; } /* PAIR ROW */ .pair-row { margin: 12px 0; padding: 14px 16px; background: linear-gradient(155deg, rgba(28,21,40,0.7), rgba(21,16,31,0.5)); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; border-left: 3px solid var(--gold-bright); } .pair-row .pair-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15.5px; color: var(--gold-bright); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed rgba(212,175,55,0.3); letter-spacing: 0.5px; } .pair-row p { margin: 5px 0; } /* GROUP CARD — 5 nhóm thập thần (Phần V) */ .group-card { margin: 14px 0; border: 1px solid rgba(212,175,55,0.3); border-radius: 6px; overflow: hidden; background: rgba(15,11,22,0.5); } .group-card-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(155deg, rgba(28,21,40,0.9), rgba(21,16,31,0.7)); border-bottom: 1px solid rgba(212,175,55,0.25); } .group-card-num { width: 34px; height: 34px; 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: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(158,27,63,0.3); } .group-card-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 16px; color: var(--gold-bright); line-height: 1.3; } .group-card-body { padding: 14px 16px; } .group-card-body p { margin: 5px 0; } /* PAIR CARD — 5 cặp âm dương (Phần VI) */ .pair-card { margin: 14px 0; border: 1px solid rgba(212,175,55,0.3); border-radius: 6px; overflow: hidden; background: rgba(15,11,22,0.5); } .pair-card-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: linear-gradient(155deg, rgba(28,21,40,0.9), rgba(21,16,31,0.7)); border-bottom: 1px solid rgba(212,175,55,0.25); } .pair-card-num { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, rgba(212,175,55,0.3), rgba(212,175,55,0.1)); border: 2px solid var(--gold-bright); color: var(--gold-bright); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pair-card-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 16px; color: var(--gold-bright); line-height: 1.3; } .pair-card-body { padding: 14px 16px; } .pair-card-body p { margin: 5px 0; } @media (max-width: 400px) { .group-card-num, .pair-card-num { width: 28px; height: 28px; font-size: 15px; } .group-card-title, .pair-card-title { 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ự · Thập Thần</span> <div class="hero-chinese">十神</div> <h1>Thập Thần Là Gì?<br><em>Phẩm chất của bài học</em></h1> <div class="hero-rule"></div> <p class="hero-intro"> Nhật can không phải là bản thân bạn. Toàn bộ bát tự là bản thân bạn. </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="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="label">Phần <strong id="partNumDisplay">1</strong> / 14</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" data-action="prevPart">← Phần trước</button> <button class="part-nav-btn next" id="nextPartBtn" data-action="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"> Lưu ý là tên gọi là ý nghĩa ban đầu, còn tùy điều kiện thực tế, không có thần nào là luôn là tốt, cũng không có thần nào luôn là xấu, hôm nay là tỷ kiên, ngày mai là kiếp tài, hôm nay là thiên tài, ngày mai lại là phá tài.<br><br> <em>Cần phải theo cách cục mà luậ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ố cách tính và bản chất của Thập Thần. 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" data-action="startQuiz">⟢ Bắt đầu trắc nghiệm ⟢</button> </section> </div> </div> <div class="view" id="view-quiz"> <button class="quiz-back" data-action="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" data-action="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> <div class="congrats-msg" id="congratsMsg"></div> </section> <div class="action-row"> <button class="btn-secondary" data-action="restartQuiz">⟲ Làm lại</button> <button class="btn-secondary" data-action="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 LESSON_TITLE = 'Thập Thần Là Gì?'; const PARTS = [ { title: 'I. Bát Tự Như Một Não Bộ', subtitle: 'Bản đồ của những gì bạn đã học', body: ` <p>Nhật can không phải là bản thân bạn.</p> <p>Toàn bộ bát tự là bản thân bạn.</p> <p>Hãy hình dung thế này.</p> <p>Não bộ không chỉ xử lý thông tin.</p> <p>Nó <strong>lưu giữ</strong>.</p> <p>Lưu giữ cảm xúc.<br>Lưu giữ ký ức.<br>Lưu giữ những bài học từ các trải nghiệm đã qua.</p> <p>Bát tự cũng vậy.</p> <div class="kp verdict-good">Bát tự là bản đồ của những gì não bộ bạn đã học được — trước khi bạn kịp nhận ra mình đang học.</div> ` }, { title: 'II. Bốn Trụ —<br>Bốn Kho Lưu Trữ', subtitle: 'Năm · Tháng · Ngày · Giờ', body: ` <p>Bát tự có 4 trụ. Năm — Tháng — Ngày — Giờ.</p> <p>Mỗi trụ là một <strong>kho lưu trữ</strong> khác nhau.</p> <p>Trong tất cả các trụ, can đóng vai trò thể hiện phần động, chi thể hiện phần tĩnh.</p> <div class="tru-card"><div class="tru-head"><span class="tru-label">Trụ Năm</span></div> <p><strong>Trụ Năm</strong> lưu giữ những cảm xúc sớm nhất.</p> <p>Cách bạn lớn lên.</p> <p>Cảm xúc về cha mẹ. Về nguồn gốc. Về nơi mình xuất phát.</p> <p>Đó là lớp sâu nhất — hình thành trước khi bạn có ngôn ngữ để diễn đạt nó.</p> </div> <div class="tru-card"><div class="tru-head"><span class="tru-label">Trụ Tháng</span></div> <p><strong>Trụ Tháng</strong> lưu giữ những bài học từ xã hội.</p> <p>Các bạn trưởng thành.</p> <p>Bạn học cách tồn tại giữa người khác ở đây.</p> <p>Là anh em, là bạn bè, đôi khi anh em như bạn bè, đến lúc nào đó bạn bè là anh em.</p> <p>Bạn học: cách cạnh tranh. Cách hợp tác. Cách định vị bản thân trong một tập thể.</p> </div> <div class="tru-card"><div class="tru-head"><span class="tru-label">Trụ Ngày — Trung tâm</span></div> <p><strong>Trụ Ngày</strong> là trung tâm.</p> <p>Người ta vẫn nói: can ngày là bạn — nhưng hãy hiểu rằng: đây là phần "tôi nhận ra tôi".</p> <p>Cái tôi giúp bạn nhận ra mình giữa vô vàn cảm xúc từ thế giới này. Nhật can là thứ giúp phân định các thập thần trong bát tự.</p> <p>Nhật chi là một nửa của bạn. Là cách bạn muốn chọn một nửa của mình.</p> <p>Nên chi ngày là cung hôn phối của bạn.</p> </div> <div class="tru-card"><div class="tru-head"><span class="tru-label">Trụ Giờ</span></div> <p><strong>Trụ Giờ</strong> hướng về phía trước.</p> <p>Lưu giữ nhận thức về con cái, về di sản, về những gì bạn muốn để lại.</p> <p>Nếu trụ năm là nơi bạn đến từ đâu, thì trụ giờ là nơi bạn đang hướng tới.</p> <p>Trụ giờ chính là cung con cái của bạn.</p> </div> ` }, { title: 'III. Thập Thần —<br>Phẩm Chất Của Bài Học', subtitle: 'Ngọt ngào · chấp nhận · đắng cay', body: ` <p>Các can chi nằm trong 4 kho lưu trữ đó.</p> <p>Nhưng có những bài học mang lại trải nghiệm ngọt ngào, có những bài học mang lại sự chấp nhận, có những bài học mang lại sự đắng cay.</p> <p>Các can chi với những quan hệ sinh khắc với nhật can thể hiện ở cung đó — ở vị trí đó — là những bài học gì.</p> <div class="kp verdict-good">Mối quan hệ đó tạo ra <strong>phẩm chất</strong> của từng bài học. Đó chính là Thập Thần.</div> <p>Đây là cách xác định thập thần, nhưng bạn hãy chú ý đến bản chất của chúng ở phần sau nhé.</p> ` }, { title: 'IV. Cách Tính Thập Thần', subtitle: 'Chỉ cần hỏi hai câu', body: ` <p>Hãy cùng liệt kê 10 thiên can và ngũ hành của chúng. Dương ở trước, âm sau, lần lượt như sau:</p> <div class="can-table"> <div class="can-row"><span class="can-hanh hanh-moc">Mộc</span><span class="can-pair">Giáp — Mộc. Ất — Mộc.</span></div> <div class="can-row"><span class="can-hanh hanh-hoa">Hỏa</span><span class="can-pair">Bính — Hỏa. Đinh — Hỏa.</span></div> <div class="can-row"><span class="can-hanh hanh-tho">Thổ</span><span class="can-pair">Mậu — Thổ. Kỷ — Thổ.</span></div> <div class="can-row"><span class="can-hanh hanh-kim">Kim</span><span class="can-pair">Canh — Kim. Tân — Kim.</span></div> <div class="can-row"><span class="can-hanh hanh-thuy">Thủy</span><span class="can-pair">Nhâm — Thủy. Quý — Thủy.</span></div> </div> <p>Vậy đó. Mỗi hành có hai can — một dương một âm. Thế thôi.</p> <p>Bây giờ tùy vào nhật can, chúng ta có 10 thiên can sẽ quy đổi sao cho ứng với 1 thập thần. Sau đây là tên gọi của thập thần và cách tính ra chúng.</p> <p>Chỉ cần hỏi hai câu.</p> <p>Câu một — quan hệ ngũ hành giữa can đó và Nhật can là gì?</p> <p>Câu hai — tính âm dương của hai can có hợp nhau không?</p> <p>Từ hai câu đó, ra ngay tên thập thần.</p> <div class="tt-table"> <div class="tt-group"><span class="tt-rel">Cùng hành với Nhật can</span><span class="tt-item">Cùng hành, cùng tính → <strong>Tỷ Kiên</strong>.</span><span class="tt-item">Cùng hành, khác tính → <strong>Kiếp Tài</strong>.</span></div> <div class="tt-group"><span class="tt-rel">Nhật can sinh can đó</span><span class="tt-item">Nhật can sinh, cùng tính → <strong>Thực Thần</strong>.</span><span class="tt-item">Nhật can sinh, khác tính → <strong>Thương Quan</strong>.</span></div> <div class="tt-group"><span class="tt-rel">Nhật can khắc can đó</span><span class="tt-item">Nhật can khắc, khác tính → <strong>Chính Tài</strong>.</span><span class="tt-item">Nhật can khắc, cùng tính → <strong>Thiên Tài</strong>.</span></div> <div class="tt-group"><span class="tt-rel">Can đó khắc Nhật can</span><span class="tt-item">Khắc Nhật can, khác tính → <strong>Chính Quan</strong>.</span><span class="tt-item">Khắc Nhật can, cùng tính → <strong>Thất Sát</strong>.</span></div> <div class="tt-group"><span class="tt-rel">Can đó sinh Nhật can</span><span class="tt-item">Sinh Nhật can, khác tính → <strong>Chính Ấn</strong>.</span><span class="tt-item">Sinh Nhật can, cùng tính → <strong>Thiên Ấn</strong>.</span></div> </div> <p>Nhìn chung chỉ có năm kiểu quan hệ ngũ hành.</p> <p>Mỗi kiểu lại chia đôi theo tính âm dương.</p> <p>Năm nhân hai — ra đúng mười thần.</p> <h3 class="inline-sub">⟢ Ví dụ: thử tính thập thần với Nhật can là Ất ⟢</h3> <p>Ất là âm Mộc. Đó là điểm xuất phát.</p> <p>Từ đó, lần lượt xét từng can còn lại.</p> <div class="tt-table"> <div class="tt-group"><span class="tt-item">Giáp — dương Mộc. Cùng hành với Ất, nhưng khác tính âm dương → <strong>Kiếp Tài</strong>.</span></div> <div class="tt-group"><span class="tt-item">Ất — âm Mộc. Cùng hành, cùng tính → <strong>Tỷ Kiên</strong>.</span></div> <div class="tt-group"><span class="tt-item">Bính — dương Hỏa. Ất sinh Bính, khác tính → <strong>Thương Quan</strong>.</span></div> <div class="tt-group"><span class="tt-item">Đinh — âm Hỏa. Ất sinh Đinh, cùng tính → <strong>Thực Thần</strong>.</span></div> <div class="tt-group"><span class="tt-item">Mậu — dương Thổ. Ất khắc Mậu, khác tính → <strong>Chính Tài</strong>.</span></div> <div class="tt-group"><span class="tt-item">Kỷ — âm Thổ. Ất khắc Kỷ, cùng tính → <strong>Thiên Tài</strong>.</span></div> <div class="tt-group"><span class="tt-item">Canh — dương Kim. Canh khắc Ất, khác tính → <strong>Chính Quan</strong>.</span></div> <div class="tt-group"><span class="tt-item">Tân — âm Kim. Tân khắc Ất, cùng tính → <strong>Thất Sát</strong>.</span></div> <div class="tt-group"><span class="tt-item">Nhâm — dương Thủy. Nhâm sinh Ất, khác tính → <strong>Chính Ấn</strong>.</span></div> <div class="tt-group"><span class="tt-item">Quý — âm Thủy. Quý sinh Ất, cùng tính → <strong>Thiên Ấn</strong>.</span></div> </div> <p>Với Nhật can bất kỳ, bạn chỉ cần nhớ ba thứ.</p> <p>Hành của can đó là gì.</p> <p>Quan hệ với Nhật can là sinh, khắc, hay cùng hành.</p> <p>Tính âm dương có hợp hay không.</p> ` }, { title: 'V.1 — Nhóm Quan Tinh', subtitle: 'Bài Học Từ Trải Nghiệm Khắc Nghiệt', body: ` <p>Có những thứ trong cuộc đời <strong>khắc vào bạn</strong>.</p> <p>Áp lực. Kỷ luật. Những giới hạn bị áp đặt. Những va chạm làm bạn đau.</p> <p>Trong bát tự, đó là những can chi có ngũ hành <strong>khắc Nhật can</strong>.</p> <p>Chính Quan — sức ép có cấu trúc, có quy tắc.</p> <p>Thất Sát — sức ép dữ dội, không báo trước.</p> <div class="kp">Những bài học khắc nghiệt nhất thường để lại dấu ấn sâu nhất.</div> <p>Cũng giống như câu: sức ép làm nên kim cương — những thập thần như Chính Quan, Thất Sát có thể làm nên sự nghiệp rực rỡ cho bạn, nếu như trong bát tự, chúng ở đúng nơi, đúng chỗ.</p> ` }, { title: 'V.2 — Nhóm Ấn Tinh', subtitle: 'Bài Học Từ Trải Nghiệm Được Dẫn Dắt', body: ` <p>Có những thứ <strong>nuôi dưỡng bạn</strong>.</p> <p>Người thầy. Sự che chở. Tri thức được trao truyền. Nền tảng được xây sẵn cho bạn bước lên.</p> <p>Trong bát tự, đó là những can chi có ngũ hành <strong>sinh Nhật can</strong>.</p> <p>Chính Ấn và Thiên Ấn — bài học đến từ việc được nhận, được bảo bọc, được hướng dẫn.</p> <div class="kp">Không phải ai cũng nhận ra những bài học này. Vì khi được dẫn dắt, ta thường nghĩ đó là điều hiển nhiên.</div> <p>Trong bát tự, chúng đại diện cho trí tuệ, trình độ, sự tích lũy qua việc học hỏi. Nhưng sâu xa hơn, hãy nhớ rằng cha mẹ bạn luôn cố gắng để giúp bạn tránh những rủi ro bạn chưa biết tới. Chính Ấn và Thiên Ấn đại diện cho những giải pháp cho tương lai lâu dài trong cuộc sống của bạn.</p> ` }, { title: 'V.3 — Nhóm Tài Tinh', subtitle: 'Bài Học Từ Trải Nghiệm Khám Phá Và Chiếm Hữu', body: ` <p>Có những thứ bạn <strong>vươn tới và nắm lấy</strong>.</p> <p>Tài nguyên. Cơ hội. Những thứ cần được khai thác, xử lý, biến thành của mình.</p> <p>Tiền tài giống như mớ rau trong khu vườn của bạn, muốn bán nó lấy tiền, bạn phải cắt nó, hái nó, bạn phải khắc nó. Tiền trong cuộc sống hiện đại là biểu tượng của việc bạn đã gặt hái một cái gì đó.</p> <p>Trong bát tự, đó là những can chi có ngũ hành <strong>bị Nhật can khắc</strong>.</p> <p>Chính Tài và Thiên Tài — bài học đến từ hành động, từ việc chủ động chinh phục.</p> <div class="kp">Bài học này không đến khi bạn chờ đợi. Nó chỉ đến khi bạn bước ra.</div> ` }, { title: 'V.4 — Nhóm Thực Thương', subtitle: 'Bài Học Từ Trải Nghiệm Trao Đi', body: ` <p>Có những thứ bạn <strong>sinh ra từ chính mình</strong>.</p> <p>Sức sáng tạo. Tình yêu thương. Sự cống hiến. Những thứ bạn cho đi mà không cần nhận lại.</p> <p>Trong bát tự, đó là những can chi có ngũ hành <strong>được Nhật can sinh</strong>.</p> <p>Thực Thần và Thương Quan — bài học đến từ việc biểu đạt, từ việc đặt cái tôi vào thế giới bên ngoài.</p> <div class="kp">Trao đi không phải mất đi. Đó là cách não bộ học được rằng mình có khả năng tạo ra giá trị.</div> <p>Có một tư tưởng phi chính thống nhưng lại rất phổ biến, đó là đi sinh chắc chắn là hao tổn. Cổ nhân không hề dạy thế — đây là những người không hiểu bản chất, suy diễn linh tinh, lâu dần trở thành lịch sử mà thôi. Từ xa xưa, trong Dịch học, thần ta sinh — tiền thân của Thực Thần và Thương Quan — chính là Tử Tôn. Đó là một phúc thần, là thần sinh tài, cầu an, trừ nguy hại. Tử Tôn giống như của để dành, tiết kiệm hôm nay, phòng ngừa khi khó khăn. Chứ không phải chắc chắn là thần hao tổn.</p> ` }, { title: 'V.5 — Nhóm Tỷ Kiếp', subtitle: 'Bài Học Từ Gương Phản Chiếu', body: ` <p>Và có một loại bài học đặc biệt.</p> <p>Không phải từ người khác hơn bạn. Không phải từ người yếu hơn bạn.</p> <p>Mà từ <strong>người giống bạn</strong>.</p> <p>Tỷ Kiên và Kiếp Tài — cùng hành với Nhật can.</p> <p>Bài học đến từ những va chạm với người có cùng bản chất, cùng khao khát, cùng điểm mạnh — và cũng cùng điểm mù.</p> <div class="kp">Đôi khi người dạy ta nhiều nhất không phải thầy, không phải kẻ thù — mà là người giống ta nhất.</div> <p>Nhưng nguồn tài nguyên đâu phải lúc nào cũng vô tận, kẻ giống ta vừa có thể là đối thủ, vừa có thể là bạn bè.</p> <p>Tỷ Kiên đại diện cho bạn bè.</p> <p>Kiếp Tài đại diện cho đối thủ.</p> <p>Nhưng đừng bị chấp niệm bởi cái tên. Đôi khi bạn bè thành đối thủ, nhiều khi đối thủ thành bạn bè. Tùy vào các cục, tùy vào cách bố trí, mà trong bát tự chúng là bạn bè hay đối thủ. Nhưng mà chúng vẫn có khác biệt.</p> <p>Nếu Tỷ Kiên là kỵ thần, chúng vẫn mềm mại hơn một chút.</p> <p>Nếu Kiếp Tài là hỷ thần, chúng vẫn gai góc hơn một chút.</p> ` }, { title: 'VI.1 — Chính Quan và Thất Sát', subtitle: 'Âm dương trong các cặp · Cặp thứ nhất', body: ` <p>Các thập thần cùng ngũ hành cũng vậy. Chúng đại đồng mà tiểu dị — nhất là Chính Quan và Thất Sát, bởi vì chúng khác tính âm dương với nhau.</p> <p>Trong mỗi cặp thập thần, có một thần <strong>hợp tính âm dương</strong> với Nhật can, và một thần <strong>không hợp tính</strong>.</p> <p>Thập thần có sự phân biệt: 3 nhóm ưu tiên là Tài Tinh, Quan Tinh, Ấn Tinh — và các nhóm còn lại.</p> <p><strong>Với 3 nhóm Tài Tinh, Quan Tinh, Ấn Tinh, quy tắc đơn giản:</strong></p> <p>Nhật can dương + can kia âm = hợp tính → gọi là <strong>Chính</strong>.</p> <p>Nhật can dương + can kia dương = không hợp tính → gọi là <strong>Thiên</strong>.</p> <p><strong>Hình dung thế này.</strong> Nó tương tự như việc:</p> <p>Hai cực nam châm trái dấu thì hút nhau — dễ tiếp xúc, dễ tương tác.</p> <p>Hai cực cùng dấu thì đẩy nhau — có ma sát, có lực cản.</p> <p>Hợp tính âm dương thì mềm mại hơn, dễ đàm phán, thỏa hiệp hơn.</p> <p>Không hợp tính thì có lực cản — nhưng phải tuân theo các nguyên tắc.</p> <h3 class="inline-sub">⟢ Cặp 1 — Chính Quan và Thất Sát ⟢</h3> <p>Chính Quan là khắc Nhật can, nhưng trái dấu — tức là hợp tính âm dương.</p> <p>Thất Sát — hay còn gọi là Thiên Quan — mang ngũ hành khắc Nhật can, nhưng cùng tính âm dương, dương khắc dương, âm khắc âm, nên phải theo quy tắc.</p> <p>Ví dụ: một người sinh ngày can Ất hành mộc.</p> <p>Nhật can Ất (âm Mộc). Kim khắc Mộc, gồm Canh (dương) và Tân (âm).</p> <p>Ất gặp Canh — khác tính → <strong>Chính Quan</strong>: sức ép có cấu trúc, có thể dự đoán, có thể đàm phán.</p> <p>Ất gặp Tân — cùng tính → <strong>Thất Sát</strong>: sức ép không báo trước, khó kiểm soát.</p> <p>Cùng là áp lực từ bên ngoài — một bên có thể đàm phán, một bên thì không.</p> ` }, { title: 'VI.2 — Chính Ấn và Thiên Ấn', subtitle: 'Cặp thứ hai', body: ` <p>Chính Ấn là sinh Nhật can, nhưng trái dấu — tức là hợp tính âm dương.</p> <p>Thiên Ấn — Kiêu Thần — sinh Nhật can, nhưng cùng tính âm dương, dương sinh dương, âm sinh âm, nên phải theo quy tắc. Thiên Ấn còn được gọi là Kiêu Thần — kiêu là tượng con cú, thể hiện sự khôn ngoan nhưng bí hiểm.</p> <p>Ví dụ: một người sinh ngày can Bính hành hỏa.</p> <p>Nhật can Bính (dương Hỏa). Mộc sinh Hỏa, gồm Giáp (dương) và Ất (âm).</p> <p>Bính gặp Ất — khác tính → <strong>Chính Ấn</strong>: nuôi dưỡng thuận tình, như cha mẹ cưng chiều con hết mực.</p> <p>Bính gặp Giáp — cùng tính → <strong>Thiên Ấn</strong>: nuôi dưỡng có điều kiện, giống cha mẹ nghiêm khắc.</p> <p>Cùng là được nhận — một bên dễ đồng hóa, một bên dễ phụ thuộc.</p> ` }, { title: 'VI.3 — Chính Tài và Thiên Tài', subtitle: 'Cặp thứ ba', body: ` <p>Chính Tài là bị Nhật can khắc, nhưng trái dấu — tức là hợp tính âm dương.</p> <p>Thiên Tài bị Nhật can khắc, nhưng cùng tính âm dương, dương khắc dương, âm khắc âm, nên phải theo quy tắc.</p> <p>Ví dụ: một người sinh ngày can Mậu hành thổ.</p> <p>Nhật can Mậu (dương Thổ). Thổ khắc Thủy, gồm Nhâm (dương) và Quý (âm).</p> <p>Mậu gặp Quý — khác tính → <strong>Chính Tài</strong>: tài nguyên ổn định, có thể nắm giữ lâu dài — như lương.</p> <p>Mậu gặp Nhâm — cùng tính → <strong>Thiên Tài</strong>: tài nguyên linh hoạt, khó giữ nhưng di chuyển nhanh — như thưởng.</p> <p>Cùng là thứ mình chinh phục — một bên dễ đoán, một bên khó biết bao giờ về.</p> ` }, { title: 'VI.4 — Thực Thần và Thương Quan', subtitle: 'Cặp thứ tư · Cặp duy nhất đảo ngược quy luật', body: ` <p>Thực Thần được Nhật can sinh, và cùng tính âm dương, dương sinh dương, âm sinh âm — đây là cặp duy nhất đảo ngược quy luật, cùng tính lại mang tính ổn định hơn. Thực Thần có nghĩa là thần được ta cho ăn.</p> <p>Thương Quan được Nhật can sinh, nhưng trái dấu — khác tính âm dương, dương sinh âm, âm sinh dương, nên phải theo quy tắc. Thương Quan được gọi theo quan hệ với Chính Quan: Thương Quan có ngũ hành khắc Chính Quan, lại không hợp tính âm dương, nên gọi là Thương Quan — thần làm tổn hại Quan.</p> <p>Ví dụ: một người sinh ngày can Tân hành kim.</p> <p>Nhật can Tân (âm Kim). Kim sinh Thủy, gồm Nhâm (dương) và Quý (âm).</p> <p>Tân gặp Quý — cùng tính → <strong>Thực Thần</strong>: đứa con được nuôi dưỡng có kỷ luật, phải biết phục vụ lợi ích cha mẹ — chính là "ta".</p> <p>Tân gặp Nhâm — khác tính → <strong>Thương Quan</strong>: đứa con được cưng chiều quá mức, trao đi bằng cách vượt ra ngoài bản thân, có rủi ro là con hư.</p> <p>Thực Thần được trao đi có kiểm soát. Thương Quan trao đi khó biết chừng mực.</p> <p>Nhật can là Tân, thì Chính Quan là Bính. Nhâm dương khắc Bính dương, lại cùng dấu dương khắc dương, nên gọi là Thương Quan.</p> ` }, { title: 'VI.5 — Tỷ Kiên và Kiếp Tài', subtitle: 'Cặp thứ năm', body: ` <p>Tỷ Kiên cùng hành với Nhật can, và cùng tính âm dương, dương với dương, âm với âm. Nên gọi là Tỷ Kiên — mang tính hỗ trợ, gần gũi.</p> <p>Kiếp Tài cùng hành với Nhật can, nhưng trái dấu — cùng hành khác tính, nên phải theo quy tắc. Tên Kiếp Tài được gọi theo quan hệ với Chính Tài: Kiếp Tài cùng dấu, khắc Chính Tài không thương tiếc, nên gọi là Kiếp Tài — cướp tài.</p> <p>Ví dụ: một người sinh ngày can Quý hành thủy.</p> <p>Nhật can Quý (âm Thủy). Cùng hành Thủy gồm Nhâm (dương) và Quý (âm).</p> <p>Quý gặp Quý — cùng tính → <strong>Tỷ Kiên</strong>: đồng điệu, cộng hưởng, củng cố lẫn nhau.</p> <p>Quý gặp Nhâm — khác tính → <strong>Kiếp Tài</strong>: cùng hành nhưng khác cực, dễ sinh cạnh tranh ngầm.</p> <p>Tỷ Kiên đại diện cho đồng minh. Kiếp Tài biểu tượng cho đối thủ.</p> <div class="kp verdict-bad">Lưu ý là tên gọi là ý nghĩa ban đầu, còn tùy điều kiện thực tế, không có thần nào là luôn là tốt, cũng không có thần nào luôn là xấu, hôm nay là tỷ kiên, ngày mai là kiếp tài, hôm nay là thiên tài, ngày mai lại là phá tài. Cần phải theo cách cục mà luận.</div> ` } ]; const QUESTIONS = [ { text: 'Để xác định Thập Thần, cần trả lời <em>hai câu hỏi</em> nào?', options: ['Ngũ hành và trụ', 'Âm dương và khoảng cách', 'Sinh khắc và gốc', 'Quan hệ ngũ hành và hợp âm dương'], correct: 3, explain: '<strong>Quan hệ ngũ hành + hợp âm dương.</strong> Câu một: quan hệ ngũ hành giữa can đó và Nhật can. Câu hai: tính âm dương hai can có hợp nhau không. Từ hai câu đó ra ngay tên thập thần.' }, { text: '<em>Cùng hành, cùng tính</em> với Nhật can → Thập Thần gì?', options: ['Kiếp Tài', 'Thực Thần', 'Chính Tài', 'Tỷ Kiên'], correct: 3, explain: '<strong>Tỷ Kiên.</strong> Cùng hành + cùng tính âm dương → Tỷ Kiên. Nếu cùng hành nhưng <em>khác tính</em> thì là Kiếp Tài.' }, { text: '<em>Nhật can sinh</em> can khác, <em>khác tính</em> → Thập Thần gì?', options: ['Thực Thần', 'Thương Quan', 'Chính Ấn', 'Thiên Ấn'], correct: 1, explain: '<strong>Thương Quan.</strong> Nhật can sinh + khác tính → Thương Quan. Nếu nhật can sinh + <em>cùng tính</em> thì là Thực Thần.' }, { text: 'Nhật can <em>Giáp</em> (dương Mộc), gặp can <em>Giáp</em> (dương Mộc) → Thập Thần gì?', options: ['Kiếp Tài', 'Thực Thần', 'Chính Tài', 'Tỷ Kiên'], correct: 3, explain: '<strong>Tỷ Kiên.</strong> Giáp gặp Giáp: cùng hành Mộc, cùng tính dương → Tỷ Kiên.' }, { text: 'Nhật can <em>Ất</em> (âm Mộc), gặp can <em>Ất</em> (âm Mộc) → Thập Thần gì?', options: ['Kiếp Tài', 'Thực Thần', 'Chính Tài', 'Tỷ Kiên'], correct: 3, explain: '<strong>Tỷ Kiên.</strong> Ất gặp Ất: cùng hành Mộc, cùng tính âm → Tỷ Kiên. Cùng hành cùng tính luôn là Tỷ Kiên, dù can dương hay âm.' }, { text: 'Nhật can <em>Bính</em> (dương Hỏa), gặp can <em>Quý</em> (âm Thủy) → Thập Thần gì?', options: ['Chính Quan', 'Thất Sát', 'Chính Tài', 'Thiên Tài'], correct: 0, explain: '<strong>Chính Quan.</strong> Thủy khắc Hỏa → Quý khắc Bính (khắc Nhật can). Quý âm, Bính dương → khác tính → Chính Quan.' }, { text: 'Nhật can <em>Mậu</em> (dương Thổ), gặp can <em>Quý</em> (âm Thủy) → Thập Thần gì?', options: ['Chính Quan', 'Thất Sát', 'Chính Tài', 'Thiên Tài'], correct: 2, explain: '<strong>Chính Tài.</strong> Thổ khắc Thủy → Mậu khắc Quý (Nhật can khắc). Mậu dương, Quý âm → khác tính → Chính Tài. Khác câu trước: ở đây nhật can <em>đi khắc</em>, không phải <em>bị khắc</em>.' }, { text: 'Nhật can <em>Giáp</em> (dương Mộc), gặp can <em>Kỷ</em> (âm Thổ) → Thập Thần gì?', options: ['Chính Tài', 'Thiên Tài', 'Chính Quan', 'Thất Sát'], correct: 0, explain: '<strong>Chính Tài.</strong> Mộc khắc Thổ → Giáp khắc Kỷ (Nhật can khắc). Giáp dương, Kỷ âm → khác tính → Chính Tài.' }, { text: 'Nhóm Thập Thần nào đại diện cho <em>áp lực, kỷ luật, khắc nghiệt</em>?', options: ['Tài Tinh', 'Ấn Tinh', 'Thực Thương', 'Quan Tinh'], correct: 3, explain: '<strong>Quan Tinh.</strong> Gồm Chính Quan và Thất Sát — những can chi có ngũ hành <em>khắc Nhật can</em>. Sức ép làm nên kim cương.' }, { text: 'Nhật can <em>Tân</em> (âm Kim), gặp can <em>Nhâm</em> (dương Thủy) → Thập Thần gì?', options: ['Thực Thần', 'Thương Quan', 'Chính Ấn', 'Thiên Ấn'], correct: 1, explain: '<strong>Thương Quan.</strong> Kim sinh Thủy → Tân sinh Nhâm (Nhật can sinh). Tân âm, Nhâm dương → khác tính → Thương Quan. Nếu gặp Quý (âm) thì cùng tính → Thực Thần.' } ]; 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-action="answer" data-idx="${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 cách tính và bản chất 10 thập thần. Đây là nền tảng cốt lõi để bước vào phân tích cách cục.'; } else if (totalCorrect >= 8) { title = 'Xuất <em>sắc</em>'; msg = 'Bạn đã nắm được thập thần. Vài câu sai chỉ là chi tiết về quy tắc âm dương Chính/Thiê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 Phần IV (cách tính) và bảng 10 thập thần — luyện tính nhanh với vài nhật can khác nhau.'; } 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 5 quan hệ ngũ hành (cùng hành / ta sinh / ta khắc / khắc ta / sinh ta) trước, rồi mới xét âm dương.'; } else { title = '<em>Khởi đầu</em>'; msg = 'Đây mới là bước đầu — không sao cả. Hãy đọc kỹ lại Phần IV: chỉ cần nhớ hành của can, quan hệ với nhật can, và tính âm dương. Sau đó quay lại làm trắc nghiệm.'; } document.getElementById('resultTitle').innerHTML = title; document.getElementById('resultMsg').innerHTML = msg; document.getElementById('congratsMsg').innerHTML = '🎉 Chúc mừng bạn đã hoàn thành nội dung bài học: <em>' + LESSON_TITLE + '</em>'; 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(); // ===== EVENT DELEGATION (fix for CSP blocking inline onclick in iframe srcdoc) ===== document.addEventListener('click', function(e) { var el = e.target.closest('[data-action]'); if (!el) return; var action = el.getAttribute('data-action'); switch(action) { case 'answer': selectAnswer(parseInt(el.getAttribute('data-idx'), 10)); break; case 'startQuiz': startQuiz(); break; case 'nextQuestion': nextQuestion(); break; case 'nextPart': nextPart(); break; case 'prevPart': prevPart(); break; case 'backToArticle': backToArticle(); break; case 'restartQuiz': restartQuiz(); break; } }); </script> <script> (function(){ function getH(){var a=document.querySelector('.app');if(a){var r=a.getBoundingClientRect();var t=r.top+(window.pageYOffset||document.documentElement.scrollTop);return Math.ceil(t+a.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 av=document.querySelector('.view.active');var vid=av?av.id:'';if(vid==='view-article'){var end=document.getElementById('endSection')&&document.getElementById('endSection').style.display!=='none';vid='view-article-p'+(typeof currentPart!=='undefined'?currentPart:0)+(end?'e':'');}window.parent.postMessage({ltTtHeight:getH(),viewId:vid},'*');}}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 a=document.querySelector('.app');if(a)ro.observe(a);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(n){var o=window[n];if(o){window[n]=function(){var r=o.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:4600px!important;min-height:4600px!important;max-height:none!important;border:0!important;display:block!important;background:transparent!important;margin:0!important;padding:0!important;" title="Thập Thần Là Gì - Hoàng Trung"></iframe> </div> <script> (function(){ var F='lt-tt-frame',IH=4600,cH=IH,hV={},cV='view-article-p0'; function aH(h){var f=document.getElementById(F);if(!f)return;var n=h+50;if(n<200||n===cH)return;cH=n;f.style.setProperty('height',n+'px','important');f.style.setProperty('min-height',n+'px','important');f.style.setProperty('max-height','none','important');f.setAttribute('height',n);var p=f.parentElement;while(p&&p!==document.body){var cs=window.getComputedStyle(p);if(cs.maxHeight!=='none'&&cs.maxHeight!==''&&parseInt(cs.maxHeight)<n)p.style.setProperty('max-height','none','important');if(cs.overflow==='hidden')p.style.setProperty('overflow','visible','important');p=p.parentElement;}} function sH(h,v){if(!h||h<100)return;if(v){if(!hV[v]||h>hV[v])hV[v]=h;cV=v;}aH(hV[cV]||h);} window.addEventListener('message',function(e){if(e&&e.data&&typeof e.data.ltTtHeight==='number')sH(e.data.ltTtHeight,e.data.viewId);}); function pH(){var f=document.getElementById(F);if(!f||!f.contentWindow)return;try{var d=f.contentWindow.document;if(d){var a=d.querySelector('.app'),av=d.querySelector('.view.active'),v=av?av.id:'',h;if(a){var r=a.getBoundingClientRect();var t=r.top+(f.contentWindow.pageYOffset||d.documentElement.scrollTop);h=Math.ceil(t+a.scrollHeight+40);}else if(d.body)h=Math.max(d.body.scrollHeight,d.body.offsetHeight,d.documentElement.scrollHeight,d.documentElement.offsetHeight);if(h)sH(h,v);}}catch(e){}} function bP(){var f=document.getElementById(F);if(!f)return;var p=f.parentElement;while(p&&p!==document.body){var cs=window.getComputedStyle(p);if(cs.maxHeight!=='none'&&cs.maxHeight!==''&&parseInt(cs.maxHeight)<IH)p.style.setProperty('max-height','none','important');if(cs.overflow==='hidden')p.style.setProperty('overflow','visible','important');p=p.parentElement;}} bP();[100,500,1000,2000,4000,7000,11000].forEach(function(t){setTimeout(function(){bP();pH();},t);});setInterval(pH,800);window.addEventListener('resize',pH);window.addEventListener('load',pH); })(); </script>
