<!-- ======================================================== --> <!-- LỊCH SỬ BÁT TỰ TỬ BÌNH — 6 phần + 10 câu trắc nghiệm --> <!-- WordPress safe iframe (JNews compatible) + scroll-to-iframe --> <!-- Paste into Custom HTML block in Gutenberg --> <!-- ======================================================== --> <style> .lt-wrap-lt-ls-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-ls-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-ls-frame"> <iframe id="lt-ls-frame" height="7200" 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>Luận Quẻ Theo Phương Pháp Lục Hào — Từ Dụng Thần đến Thực Hành</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600;1,700&family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <style> :root { --bg: #0b0812; --bg-2: #15101f; --bg-3: #1c1528; --ink: #f2e8d1; --ink-dim: #a89878; --ink-soft: #c7b88f; --gold: #d4af37; --gold-bright: #f5d061; --gold-soft: rgba(212, 175, 55, 0.35); --crimson: #9e1b3f; --deep-red: #5c0a1a; --warn: #e08eaa; --green: #7ed39e; --red: #ef6a6a; } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--bg); } body { background: var(--bg); color: var(--ink); font-family: 'Be Vietnam Pro', -apple-system, sans-serif; overflow-x: hidden; line-height: 1.65; font-size: 15px; -webkit-font-smoothing: antialiased; position: relative; min-height: 0; } .bg-gradient { position: fixed; inset: 0; z-index: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(139, 30, 63, 0.18), transparent 60%), radial-gradient(ellipse 60% 40% at 100% 50%, rgba(212, 175, 55, 0.08), transparent 60%), radial-gradient(ellipse 70% 50% at 0% 100%, rgba(92, 10, 26, 0.22), transparent 60%); pointer-events: none; } .stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: radial-gradient(1.2px 1.2px at 23px 34px, rgba(212,175,55,0.6), transparent), radial-gradient(1px 1px at 67px 128px, rgba(244,234,213,0.45), transparent), radial-gradient(1.5px 1.5px at 142px 76px, rgba(212,175,55,0.55), transparent), radial-gradient(1px 1px at 198px 199px, rgba(244,234,213,0.35), transparent), radial-gradient(1px 1px at 253px 54px, rgba(212,175,55,0.45), transparent); background-size: 300px 280px; animation: twinkle 6s ease-in-out infinite; } @keyframes twinkle { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes correctPop { 0% { transform: scale(0.95); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .app { position: relative; z-index: 5; max-width: 460px; margin: 0 auto; padding: 28px 22px 60px; } .view { display: none; animation: fadeIn 0.4s ease; } .view.active { display: block; } /* HERO */ .hero { text-align: center; padding: 24px 0 30px; } .hero-tag { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; display: block; } .hero-tag::before, .hero-tag::after { content: '⟢'; margin: 0 10px; opacity: 0.7; } .hero-chinese { font-family: 'Cormorant Garamond', serif; font-size: 56px; line-height: 1; font-weight: 400; color: transparent; background: linear-gradient(180deg, var(--gold-bright), var(--gold), rgba(212,175,55,0.3)); -webkit-background-clip: text; background-clip: text; margin: 12px 0 14px; letter-spacing: 8px; padding-left: 8px; text-shadow: 0 0 30px rgba(212,175,55,0.3); } .hero h1 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 30px; line-height: 1.18; color: var(--ink); margin: 4px 0 6px; } .hero h1 em { font-style: italic; color: var(--gold-bright); } .hero-rule { width: 80px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 18px auto 22px; } .hero-intro { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; color: var(--ink-soft); line-height: 1.6; padding: 0 4px; max-width: 380px; margin: 0 auto; } .hero-intro em { color: var(--gold-bright); font-weight: 600; } .hero-author { margin-top: 22px; font-family: 'Cormorant Garamond', serif; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; } .hero-author::before, .hero-author::after { content: ''; display: inline-block; width: 22px; height: 1px; background: var(--gold); margin: 0 10px; vertical-align: middle; } /* PROGRESS DOTS */ .part-progress { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 30px 0 24px; flex-wrap: wrap; } .part-progress .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(212,175,55,0.2); border: 1px solid rgba(212,175,55,0.3); transition: all 0.3s ease; } .part-progress .dot.done { background: var(--gold); box-shadow: 0 0 8px rgba(212,175,55,0.5); } .part-progress .dot.current { background: var(--gold-bright); box-shadow: 0 0 12px rgba(245,208,97,0.7); transform: scale(1.4); border-color: var(--gold-bright); } .part-progress .label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 2px; color: var(--gold); margin-left: 8px; } .part-progress .label strong { color: var(--gold-bright); font-weight: 700; } /* PART CARD */ .part-card { background: linear-gradient(155deg, rgba(28,21,40,0.88), rgba(21,16,31,0.65)); border: 1px solid rgba(212,175,55,0.22); border-radius: 6px; padding: 32px 24px 28px; position: relative; overflow: hidden; animation: fadeUp 0.5s ease; } .part-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0.5; } .part-card-header { text-align: center; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(212,175,55,0.15); } .part-card .seal { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(145deg, var(--crimson), var(--deep-red)); border: 2px solid var(--gold); color: var(--gold-bright); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 20px; box-shadow: 0 0 0 2px var(--bg), 0 0 18px rgba(158,27,63,0.5), inset 0 0 12px rgba(0,0,0,0.4); margin-bottom: 14px; position: relative; } .part-card .seal::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 1px dashed var(--gold-soft); animation: rotate 40s linear infinite; } .part-card .lbl { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; } .part-card h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--ink); margin-bottom: 4px; } .part-card h2 em { color: var(--gold-bright); font-style: italic; } .part-card .subtitle { display: block; margin-top: 6px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; color: var(--ink-dim); letter-spacing: 1px; } .part-card .body { font-size: 15px; line-height: 1.75; color: var(--ink-soft); } .part-card .body p { margin-bottom: 14px; } .part-card .body p:last-child { margin-bottom: 0; } .part-card .body p strong { color: var(--ink); font-weight: 600; } .part-card .body em { color: var(--gold-bright); font-style: italic; } .part-card .body .hl { color: var(--gold-bright); font-weight: 500; font-style: italic; } .part-card .body .inline-sub { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 22px 0 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(212,175,55,0.2); text-align: center; } .kp { margin: 16px 0; padding: 14px 16px; background: rgba(212,175,55,0.07); border-left: 3px solid var(--gold); border-radius: 0 2px 2px 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; line-height: 1.6; color: var(--ink); } .kp strong { color: var(--gold-bright); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 14px; } .compare-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; } .compare-cell { padding: 14px; border-radius: 4px; border: 1px solid; } .compare-cell.bad { background: rgba(158,27,63,0.1); border-color: rgba(158,27,63,0.4); } .compare-cell.good { background: rgba(126,211,158,0.08); border-color: rgba(126,211,158,0.4); } .compare-cell .c-lbl { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .compare-cell.bad .c-lbl { color: var(--warn); } .compare-cell.good .c-lbl { color: var(--green); } .compare-cell .c-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); } .persons-grid { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; } .person-row { padding: 12px 14px; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.18); border-radius: 3px; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; } .person-row.tragic { border-color: rgba(158,27,63,0.4); background: rgba(158,27,63,0.08); } .person-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: italic; font-size: 14.5px; color: var(--gold-bright); } .person-row.tragic .person-name { color: var(--warn); } .person-father { font-size: 12.5px; color: var(--ink-soft); font-style: italic; font-family: 'Cormorant Garamond', serif; text-align: right; } .person-fate { grid-column: 1 / -1; font-size: 13px; color: var(--ink-soft); padding-top: 4px; border-top: 1px dashed rgba(212,175,55,0.15); } .person-fate strong { color: var(--ink); font-weight: 600; } /* Nav buttons */ .part-nav { margin-top: 32px; display: flex; gap: 10px; flex-wrap: wrap; } .part-nav-btn { flex: 1; min-width: 130px; padding: 14px 18px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14.5px; letter-spacing: 2px; border-radius: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.2s ease; text-align: center; text-transform: uppercase; } .part-nav-btn.prev { background: transparent; border: 1px solid rgba(212,175,55,0.4); color: var(--gold); } .part-nav-btn.prev:hover { background: rgba(212,175,55,0.08); color: var(--gold-bright); border-color: var(--gold); } .part-nav-btn.prev:disabled { opacity: 0.3; cursor: not-allowed; } .part-nav-btn.next { background: linear-gradient(145deg, var(--crimson), var(--deep-red)); border: 1px solid var(--gold); color: var(--gold-bright); box-shadow: 0 0 18px rgba(158,27,63,0.3), inset 0 0 12px rgba(0,0,0,0.3); } .part-nav-btn.next:hover { transform: translateY(-2px); box-shadow: 0 4px 24px rgba(158,27,63,0.5), inset 0 0 12px rgba(0,0,0,0.3); } /* CLOSING + CTA */ .closing { margin: 30px 0 0; padding: 30px 22px; background: radial-gradient(ellipse at top, rgba(212,175,55,0.1), transparent 70%), linear-gradient(165deg, rgba(28,21,40,0.95), rgba(21,16,31,0.85)); border: 1px solid var(--gold-soft); border-radius: 4px; text-align: center; position: relative; overflow: hidden; } .closing::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(212,175,55,0.15); border-radius: 2px; pointer-events: none; } .closing-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .closing-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; line-height: 1.65; color: var(--ink); } .closing-text em { color: var(--gold-bright); font-weight: 600; } .closing-mark { margin-top: 16px; font-size: 16px; color: var(--gold); letter-spacing: 12px; } .cta { margin: 30px 0 0; padding: 30px 22px; background: linear-gradient(155deg, rgba(28,21,40,0.92), rgba(21,16,31,0.75)); border: 1px solid rgba(212,175,55,0.4); border-radius: 4px; text-align: center; } .cta-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .cta h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 24px; line-height: 1.2; color: var(--ink); margin-bottom: 8px; } .cta h3 em { color: var(--gold-bright); font-style: italic; } .cta-desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; max-width: 360px; margin-left: auto; margin-right: auto; } .cta-meta { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; } .cta-meta-item { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); padding: 4px 12px; background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.3); border-radius: 2px; } .btn-primary { display: block; width: 100%; margin: 0 auto; padding: 16px 24px; background: linear-gradient(145deg, var(--crimson), var(--deep-red)); border: 1px solid var(--gold); border-radius: 4px; color: var(--gold-bright); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 17px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; box-shadow: 0 0 24px rgba(158,27,63,0.4), inset 0 0 15px rgba(0,0,0,0.3); -webkit-tap-highlight-color: transparent; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn-primary:hover, .btn-primary:active { transform: translateY(-2px); box-shadow: 0 6px 32px rgba(158,27,63,0.6), inset 0 0 15px rgba(0,0,0,0.3); } /* QUIZ */ .quiz-back { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid rgba(212,175,55,0.4); border-radius: 2px; padding: 8px 14px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; letter-spacing: 1.5px; color: var(--gold); cursor: pointer; transition: all 0.25s ease; margin-bottom: 20px; -webkit-tap-highlight-color: transparent; } .quiz-back:hover { background: rgba(212,175,55,0.08); color: var(--gold-bright); } .progress-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0 24px; } .progress-track { flex: 1; height: 4px; background: rgba(212,175,55,0.15); border-radius: 2px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--crimson), var(--gold)); border-radius: 2px; transition: width 0.4s ease; box-shadow: 0 0 6px var(--gold); } .progress-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; color: var(--gold); white-space: nowrap; } .progress-text strong { color: var(--gold-bright); font-weight: 700; } .q-card { background: linear-gradient(155deg, rgba(28,21,40,0.92), rgba(21,16,31,0.75)); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; padding: 24px 22px; margin-bottom: 20px; position: relative; animation: fadeUp 0.5s ease; } .q-card::before { content: ''; position: absolute; top: 0; left: 24px; width: 30px; height: 1px; background: var(--gold); box-shadow: 0 0 6px var(--gold); } .q-card .q-num { position: absolute; top: -14px; left: 18px; background: var(--bg); padding: 0 10px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 2px; color: var(--gold); text-transform: uppercase; } .q-card h2 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 19px; line-height: 1.4; color: var(--ink); } .q-card h2 em { font-style: italic; color: var(--gold-bright); } .options { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .opt-btn { width: 100%; text-align: left; background: linear-gradient(155deg, rgba(15,11,22,0.7), rgba(11,8,18,0.5)); border: 1px solid rgba(212,175,55,0.2); border-radius: 4px; padding: 13px 14px 13px 48px; font-family: 'Be Vietnam Pro', sans-serif; font-size: 15px; line-height: 1.5; color: var(--ink-soft); cursor: pointer; position: relative; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .opt-btn:hover:not(:disabled) { border-color: var(--gold-soft); background: linear-gradient(155deg, rgba(28,21,40,0.85), rgba(21,16,31,0.65)); color: var(--ink); transform: translateX(2px); } .opt-btn .opt-letter { position: absolute; left: 14px; top: 14px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(212,175,55,0.4); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 13px; color: var(--gold); background: rgba(212,175,55,0.05); transition: all 0.2s ease; } .opt-btn:hover:not(:disabled) .opt-letter { border-color: var(--gold); background: rgba(212,175,55,0.15); color: var(--gold-bright); } .opt-btn:disabled { cursor: default; } .opt-btn.correct { background: linear-gradient(155deg, rgba(126,211,158,0.18), rgba(74,133,116,0.1)); border-color: var(--green); color: var(--ink); animation: correctPop 0.4s ease; } .opt-btn.correct .opt-letter { background: var(--green); border-color: var(--green); color: var(--bg); } .opt-btn.correct::after { content: '✓'; position: absolute; right: 14px; top: 14px; color: var(--green); font-weight: 700; font-size: 18px; } .opt-btn.wrong { background: linear-gradient(155deg, rgba(239,106,106,0.15), rgba(158,27,63,0.08)); border-color: var(--red); color: var(--ink); animation: shake 0.4s ease; } .opt-btn.wrong .opt-letter { background: var(--red); border-color: var(--red); color: var(--bg); } .opt-btn.wrong::after { content: '✕'; position: absolute; right: 14px; top: 14px; color: var(--red); font-weight: 700; font-size: 18px; } .opt-btn.dimmed { opacity: 0.4; } .explain { margin-top: 16px; padding: 14px 16px; background: rgba(212,175,55,0.06); border-left: 3px solid var(--gold); border-radius: 0 2px 2px 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; line-height: 1.55; color: var(--ink); display: none; animation: fadeUp 0.4s ease; } .explain.visible { display: block; } .explain strong { color: var(--gold-bright); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 14.5px; } .explain em { color: var(--gold-bright); font-weight: 600; font-style: italic; } .explain .verdict { display: inline-block; padding: 2px 10px; border-radius: 2px; font-family: 'Be Vietnam Pro', sans-serif; font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; } .explain.is-correct .verdict { background: rgba(126,211,158,0.15); border: 1px solid var(--green); color: var(--green); } .explain.is-wrong .verdict { background: rgba(239,106,106,0.12); border: 1px solid var(--red); color: var(--red); } .next-btn { display: none; width: 100%; margin-top: 18px; padding: 14px 20px; background: linear-gradient(145deg, var(--crimson), var(--deep-red)); border: 1px solid var(--gold); border-radius: 4px; color: var(--gold-bright); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.2s ease; } .next-btn.visible { display: block; animation: fadeUp 0.4s ease; } .next-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(158,27,63,0.5); } .result-hero { text-align: center; padding: 30px 0 20px; } .result-circle { width: 160px; height: 160px; margin: 0 auto 24px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(212,175,55,0.25), transparent 60%), linear-gradient(145deg, var(--bg-3), var(--bg-2)); border: 2px solid var(--gold); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 0 6px rgba(212,175,55,0.05), 0 0 40px rgba(212,175,55,0.2), inset 0 0 30px rgba(212,175,55,0.1); animation: correctPop 0.6s ease; } .result-circle::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 1px dashed var(--gold-soft); animation: rotate 60s linear infinite; } .result-score { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 56px; line-height: 1; color: var(--gold-bright); text-shadow: 0 0 20px rgba(245,208,97,0.4); } .result-total { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; color: var(--ink-dim); margin-top: 4px; letter-spacing: 2px; } .result-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; } .result-title { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 26px; line-height: 1.2; color: var(--ink); margin-bottom: 8px; } .result-title em { font-style: italic; color: var(--gold-bright); } .result-msg { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 380px; margin: 14px auto 0; } .action-row { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; } .btn-secondary { flex: 1; min-width: 130px; padding: 12px 16px; background: transparent; border: 1px solid var(--gold); border-radius: 4px; color: var(--gold); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 600; font-size: 13px; letter-spacing: 1.5px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: all 0.2s ease; text-align: center; } .btn-secondary:hover { background: rgba(212,175,55,0.08); color: var(--gold-bright); } @media (max-width: 400px) { .app { padding: 24px 16px 50px; } .hero h1 { font-size: 26px; } .hero-chinese { font-size: 46px; letter-spacing: 6px; } .part-card { padding: 28px 18px 24px; } .part-card h2 { font-size: 21px; } .part-card .body { font-size: 14.5px; } .compare-pair { grid-template-columns: 1fr; } .person-row { grid-template-columns: 1fr; } .person-father { text-align: left; } .q-card { padding: 22px 18px; } .q-card h2 { font-size: 17px; } .opt-btn { font-size: 14.5px; padding: 12px 12px 12px 44px; } .result-circle { width: 140px; height: 140px; } .result-score { font-size: 48px; } } /* CHI TABLE */ .chi-table { margin: 16px 0; display: flex; flex-direction: column; gap: 4px; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; padding: 8px; } .chi-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 9px 12px; border-radius: 3px; align-items: center; background: rgba(28,21,40,0.5); border-left: 3px solid; } .chi-row.chi-header { background: linear-gradient(145deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04)); border-left-color: var(--gold); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); } .chi-row.chi-thuy { border-left-color: #86bfe0; } .chi-row.chi-moc { border-left-color: #7ed39e; } .chi-row.chi-hoa { border-left-color: #ef6a6a; } .chi-row.chi-tho { border-left-color: #e0b256; } .chi-row.chi-kim { border-left-color: #d8d8e0; } .chi-row .chi-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: italic; font-size: 17px; color: var(--gold-bright); } .chi-row.chi-header .chi-name { color: var(--gold); font-size: 12px; } .chi-row .chi-hanh { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14.5px; color: var(--ink); } .chi-row.chi-thuy .chi-hanh { color: #86bfe0; } .chi-row.chi-moc .chi-hanh { color: #7ed39e; } .chi-row.chi-hoa .chi-hanh { color: #ef6a6a; } .chi-row.chi-tho .chi-hanh { color: #e0b256; } .chi-row.chi-kim .chi-hanh { color: #d8d8e0; } .chi-row.chi-header .chi-hanh { color: var(--gold); font-size: 12px; } .chi-row .chi-am { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13.5px; color: var(--ink-soft); text-align: right; } .chi-row.chi-header .chi-am { color: var(--gold); font-size: 12px; text-align: right; } @media (max-width: 400px) { .chi-row { padding: 8px 10px; gap: 4px; } .chi-row .chi-name { font-size: 15px; } .chi-row .chi-hanh { font-size: 13.5px; } .chi-row .chi-am { font-size: 12.5px; } } /* PAIR GRID — for xung & hợp */ .pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; } .pair-row { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; background: rgba(28,21,40,0.6); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15px; } .pair-row.hop { border-color: rgba(126,211,158,0.35); background: rgba(126,211,158,0.06); } .pair-row .pair-a, .pair-row .pair-b { color: var(--gold-bright); min-width: 30px; text-align: center; } .pair-row.hop .pair-a, .pair-row.hop .pair-b { color: #aae5bf; } .pair-row .pair-arrow { color: var(--crimson); font-size: 14px; font-style: normal; } .pair-row.hop .pair-arrow { color: var(--green); } /* HINH CARD */ .hinh-card { margin: 10px 0; padding: 12px 14px; background: linear-gradient(155deg, rgba(28,21,40,0.7), rgba(21,16,31,0.5)); border: 1px solid rgba(212,175,55,0.2); border-left: 3px solid var(--gold); border-radius: 4px; } .hinh-card .hinh-label { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } .hinh-card .hinh-desc { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; } .hinh-card .hinh-content { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15px; color: var(--gold-bright); } /* QUAD GRID — for tứ hành xung */ .quad-grid { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 16px; } .quad-row { padding: 10px 14px; background: rgba(158,27,63,0.08); border: 1px dashed rgba(158,27,63,0.4); border-radius: 3px; text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; color: var(--ink); letter-spacing: 1px; } .quad-row strong { color: var(--warn); font-weight: 700; font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-size: 14.5px; } /* WARN BOX */ .warn-box { margin: 16px 0; padding: 14px 16px; background: linear-gradient(155deg, rgba(158,27,63,0.18), rgba(92,10,26,0.08)); border: 1px solid rgba(158,27,63,0.5); border-left: 3px solid var(--crimson); border-radius: 4px; } .warn-box .warn-label { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--warn); margin-bottom: 6px; } .warn-box p { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14.5px; line-height: 1.55; color: var(--ink); margin: 0; } .warn-box p strong { color: var(--warn); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; } @media (max-width: 400px) { .pair-grid { grid-template-columns: 1fr; } .pair-row { font-size: 14.5px; } } /* AD GRID — âm dương table */ .ad-grid { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; } .ad-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 12px 14px; border-radius: 4px; border: 1px solid; align-items: center; } .ad-row.duong { background: rgba(245,208,97,0.08); border-color: rgba(245,208,97,0.4); } .ad-row.am { background: rgba(134,191,224,0.08); border-color: rgba(134,191,224,0.4); } .ad-row .ad-lbl { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: 2px; text-transform: uppercase; text-align: center; padding: 4px 0; border-radius: 3px; } .ad-row.duong .ad-lbl { color: var(--gold-bright); background: rgba(245,208,97,0.15); border: 1px solid rgba(245,208,97,0.4); } .ad-row.am .ad-lbl { color: #b8d8f0; background: rgba(134,191,224,0.12); border: 1px solid rgba(134,191,224,0.4); } .ad-row .ad-items { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: 1px; } .ad-row.duong .ad-items { color: var(--ink); } .ad-row.am .ad-items { color: var(--ink-soft); } /* DYAD GRID — giữ nguyên vs thay đổi */ .dyad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; } .dyad-cell { padding: 14px 14px; border-radius: 4px; border: 1px solid; } .dyad-cell.tinh { background: rgba(134,191,224,0.06); border-color: rgba(134,191,224,0.4); } .dyad-cell.dong { background: rgba(245,208,97,0.06); border-color: rgba(245,208,97,0.4); } .dyad-cell .dyad-lbl { display: block; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .dyad-cell.tinh .dyad-lbl { color: #b8d8f0; } .dyad-cell.dong .dyad-lbl { color: var(--gold-bright); } .dyad-cell .dyad-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; line-height: 1.55; color: var(--ink-soft); } .dyad-cell .dyad-text strong { color: var(--ink); font-style: normal; font-family: 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 13.5px; } .dyad-cell.tinh .dyad-text strong { color: #b8d8f0; } .dyad-cell.dong .dyad-text strong { color: var(--gold-bright); } @media (max-width: 400px) { .ad-row { grid-template-columns: 70px 1fr; gap: 10px; padding: 10px 12px; } .ad-row .ad-items { font-size: 14.5px; } .dyad-grid { grid-template-columns: 1fr; } } /* HOUR TABLE - 12 giờ × 10 ngày, ghép cặp can hợp */ .hour-table-wrap { margin: 14px -8px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 8px; } .hour-table { display: inline-flex; flex-direction: column; gap: 2px; min-width: 100%; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; padding: 6px; } .hr-header, .hr-row { display: flex; align-items: stretch; gap: 2px; } .hr-corner, .hr-chi { flex: 0 0 42px; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 13px; border-radius: 2px; padding: 4px 0; } .hr-corner { background: linear-gradient(145deg, rgba(212,175,55,0.18), rgba(212,175,55,0.06)); color: var(--gold); letter-spacing: 1.5px; text-transform: uppercase; font-size: 10px; } .hr-chi { background: rgba(28,21,40,0.7); color: var(--gold-bright); font-size: 13px; } .hr-pair { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 2px; overflow: hidden; min-width: 0; } .hr-pair.p1 { background: rgba(126,211,158,0.22); } .hr-pair.p2 { background: rgba(245,208,97,0.22); } .hr-pair.p3 { background: rgba(239,106,106,0.22); } .hr-pair.p4 { background: rgba(134,191,224,0.22); } .hr-pair.p5 { background: rgba(216,184,224,0.22); } .hr-d, .hr-c { display: flex; align-items: center; justify-content: center; padding: 4px 2px; font-family: 'Cormorant Garamond', serif; font-style: italic; text-align: center; font-size: 11.5px; line-height: 1.1; background: rgba(11,8,18,0.6); min-width: 0; } .hr-d { font-weight: 700; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; } .hr-pair.p1 .hr-d { color: #aae5bf; background: rgba(126,211,158,0.12); } .hr-pair.p2 .hr-d { color: var(--gold-bright); background: rgba(245,208,97,0.12); } .hr-pair.p3 .hr-d { color: #f4a0a0; background: rgba(239,106,106,0.12); } .hr-pair.p4 .hr-d { color: #b8d8f0; background: rgba(134,191,224,0.12); } .hr-pair.p5 .hr-d { color: #d8b8e0; background: rgba(216,184,224,0.12); } .hr-c { color: var(--ink); font-weight: 600; } .hr-pair.p1 .hr-c { color: #c8eed5; } .hr-pair.p2 .hr-c { color: #f5d894; } .hr-pair.p3 .hr-c { color: #f5b8b8; } .hr-pair.p4 .hr-c { color: #c8dff0; } .hr-pair.p5 .hr-c { color: #e0c8e8; } @media (max-width: 480px) { .hr-corner, .hr-chi { flex: 0 0 36px; font-size: 12px; } .hr-d { font-size: 9.5px; padding: 3px 1px; } .hr-c { font-size: 10px; padding: 3px 1px; } } /* CAN TABLE — bảng 10 thiên can */ .can-table { margin: 16px 0; display: flex; flex-direction: column; gap: 4px; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; padding: 8px; } .can-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 9px 12px; border-radius: 3px; align-items: center; background: rgba(28,21,40,0.5); border-left: 3px solid; } .can-row.can-header { background: linear-gradient(145deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04)); border-left-color: var(--gold); font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); } .can-row.can-moc { border-left-color: #7ed39e; } .can-row.can-hoa { border-left-color: #ef6a6a; } .can-row.can-tho { border-left-color: #e0b256; } .can-row.can-kim { border-left-color: #d8d8e0; } .can-row.can-thuy { border-left-color: #86bfe0; } .can-row .can-hanh { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14.5px; color: var(--ink); } .can-row.can-moc .can-hanh { color: #7ed39e; } .can-row.can-hoa .can-hanh { color: #ef6a6a; } .can-row.can-tho .can-hanh { color: #e0b256; } .can-row.can-kim .can-hanh { color: #d8d8e0; } .can-row.can-thuy .can-hanh { color: #86bfe0; } .can-row.can-header .can-hanh { color: var(--gold); font-size: 12px; } .can-row .can-duong, .can-row .can-am { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: italic; font-size: 16px; text-align: center; } .can-row .can-duong { color: var(--gold-bright); } .can-row .can-am { color: #b8d8f0; } .can-row.can-header .can-duong, .can-row.can-header .can-am { color: var(--gold); font-size: 12px; } @media (max-width: 400px) { .can-row { padding: 8px 10px; gap: 4px; } .can-row .can-hanh { font-size: 13.5px; } .can-row .can-duong, .can-row .can-am { font-size: 15px; } } /* STEP GRID — minh họa cách 5 bước */ .step-grid { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 16px; } .step-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: center; padding: 9px 14px; background: rgba(126,211,158,0.06); border: 1px solid rgba(126,211,158,0.25); border-radius: 3px; } .step-row .step-a, .step-row .step-b { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15px; color: var(--gold-bright); } .step-row .step-a { text-align: right; } .step-row .step-a small, .step-row .step-b small { color: var(--ink-dim); font-size: 11px; font-weight: 400; margin-left: 2px; } .step-row .step-arrow { color: var(--green); font-size: 14px; font-style: normal; } .step-row .step-tag { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--green); padding: 2px 8px; background: rgba(126,211,158,0.1); border: 1px solid rgba(126,211,158,0.3); border-radius: 2px; white-space: nowrap; } @media (max-width: 400px) { .step-row { grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 8px 10px; } .step-row .step-tag { display: none; } .step-row .step-a, .step-row .step-b { font-size: 14px; } } /* LINEAGE GRID — truyền thừa qua các thế hệ */ .lineage-grid { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; align-items: center; } .lineage-row { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: rgba(28,21,40,0.7); border: 1px solid rgba(212,175,55,0.3); border-radius: 4px; min-width: 200px; } .lineage-num { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(145deg, var(--crimson), var(--deep-red)); border: 1px solid var(--gold); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 12px; } .lineage-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: italic; font-size: 15px; color: var(--gold-bright); } .lineage-arrow { color: var(--gold); font-size: 14px; opacity: 0.7; } /* HIERARCHY BOX — chủ đạo, phụ trợ, thứ yếu */ .hierarchy-box { margin: 14px 0; display: flex; flex-direction: column; gap: 4px; padding: 10px; background: rgba(15,11,22,0.5); border: 1px solid rgba(212,175,55,0.25); border-radius: 4px; } .hier-row { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 9px 12px; border-radius: 3px; align-items: center; } .hier-row.main { background: rgba(245,208,97,0.12); border-left: 3px solid var(--gold-bright); } .hier-row.aux { background: rgba(212,175,55,0.06); border-left: 3px solid rgba(212,175,55,0.5); } .hier-row.minor { background: rgba(28,21,40,0.6); border-left: 3px solid rgba(212,175,55,0.25); } .hier-row .hier-tag { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; } .hier-row.main .hier-tag { color: var(--gold-bright); } .hier-row.aux .hier-tag { color: var(--gold); } .hier-row.minor .hier-tag { color: var(--ink-dim); } .hier-row .hier-name { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 15.5px; color: var(--ink); } .hier-row.main .hier-name { color: var(--gold-bright); } .hier-row.minor .hier-name { color: var(--ink-soft); } /* FIGURE CARD — chân dung nhân vật */ .figure-card { margin: 14px 0; padding: 16px 18px; background: linear-gradient(155deg, rgba(28,21,40,0.85), rgba(21,16,31,0.6)); border: 1px solid rgba(212,175,55,0.25); border-left: 3px solid var(--gold); border-radius: 4px; } .figure-card .figure-name { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-style: italic; font-size: 18px; color: var(--gold-bright); margin-bottom: 8px; } .figure-card .figure-year { font-size: 13px; font-weight: 400; color: var(--ink-dim); margin-left: 4px; } .figure-card .figure-body { font-family: 'Be Vietnam Pro', sans-serif; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; } .figure-card .figure-body strong { color: var(--ink); font-weight: 600; } .figure-card .figure-body em { color: var(--gold-bright); font-style: italic; } /* FINDING CARD — kết luận nghiên cứu */ .finding-card { margin: 14px 0; padding: 16px 18px 16px 70px; position: relative; background: linear-gradient(155deg, rgba(126,211,158,0.08), rgba(74,133,116,0.04)); border: 1px solid rgba(126,211,158,0.3); border-radius: 4px; } .finding-card .finding-num { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(145deg, rgba(126,211,158,0.2), rgba(74,133,116,0.1)); border: 1px solid var(--green); color: #aae5bf; display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: 1px; } .finding-card .finding-body { font-family: 'Be Vietnam Pro', sans-serif; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin: 0; } .finding-card .finding-body strong { color: var(--ink); font-weight: 600; } .finding-card .finding-body em { color: #c8eed5; font-style: italic; } @media (max-width: 400px) { .hier-row { grid-template-columns: 80px 1fr; gap: 8px; padding: 7px 10px; } .hier-row .hier-tag { font-size: 9.5px; } .hier-row .hier-name { font-size: 14.5px; } .figure-card { padding: 14px 16px; } .figure-card .figure-name { font-size: 16.5px; } .finding-card { padding: 14px 14px 14px 60px; } .finding-card .finding-num { width: 38px; height: 38px; font-size: 12.5px; left: 11px; } } </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">Lục Hào · Kinh Dịch</span> <div class="hero-chinese">六爻論卦</div> <h1>Luận Quẻ Lục Hào<br><em>Từ Dụng Thần đến thực hành</em></h1> <div class="hero-rule"></div> <p class="hero-intro"> Muốn luận quẻ đúng, trước tiên phải biết <em>Dụng Thần là gì và cách đọc sức mạnh của nó</em>. Không phải để học thuộc lòng — mà vì không có nền tảng thì người ta dễ <em>luận sai ngay từ bước đầu tiên</em>. </p> <div class="hero-author">Biên soạn</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="label">Phần <strong id="partNumDisplay">1</strong> / 6</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 nhắc ⟢</div> <p class="closing-text"> Hai bước — <em>Chọn Dụng Thần</em> và <em>Xem mạnh hay yếu</em>.<br><br> Lục Hào không phải môn học để <em>đọc thuộc lòng</em> — mà là môn học để <em>thực hành và kiểm chứng</em>. Mỗi lần chiêm quẻ là một lần rèn luyện. </p> <div class="closing-mark">⟢ ◈ ⟢</div> </section> <section class="cta"> <div class="cta-label">⟢ Tự kiểm tra ⟢</div> <h3>Đã hiểu? <em>Kiểm tra ngay</em></h3> <p class="cta-desc"> Mười câu hỏi để củng cố kiến thức về Dụng Thần và cách luận quẻ Lục Hào. Phản hồi 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: 'Bắt đầu đơn giản —<br><em>Hai bước cốt lõi</em>', subtitle: 'Nền tảng luận quẻ · Không phức tạp từ đầu', body: ` <p>Khi mới học Kinh Dịch, nhiều người cảm thấy sợ vì quá nhiều khái niệm. Thực ra, bạn hoàn toàn có thể bắt đầu một cách đơn giản và dễ hiểu.</p> <p>Để luận quẻ, chúng ta không cần phức tạp ngay từ đầu. Chỉ cần nắm vững <strong>hai bước cốt lõi</strong>:</p> <div class="kp"> <strong>Bước 1:</strong> Chọn Dụng Thần<br> <strong>Bước 2:</strong> Xem Dụng Thần mạnh hay yếu </div> <p>Hai bước này là nền tảng quan trọng nhất.</p> <h3 class="inline-sub">⟢ Cấu trúc một bảng an quẻ dịch ⟢</h3> <p>Trong một bảng an quẻ dịch, mỗi hào ứng với <em>một địa chi</em>, <em>một lục thân</em>, và có ký hiệu hào thế, ứng nữa.</p> <p>Ví dụ — quẻ <strong>Phong Lôi Ích</strong>:</p> <div class="chi-table"> <div class="chi-row chi-header"> <div class="chi-name">Hào</div> <div class="chi-hanh">Lục Thân · Địa Chi</div> <div class="chi-am">Ghi chú</div> </div> <div class="chi-row chi-moc"> <div class="chi-name">Hào 6</div> <div class="chi-hanh">Huynh Đệ Mão Mộc</div> <div class="chi-am">Hào Ứng</div> </div> <div class="chi-row chi-hoa"> <div class="chi-name">Hào 5</div> <div class="chi-hanh">Tử Tôn Tỵ Hỏa</div> <div class="chi-am"></div> </div> <div class="chi-row chi-tho"> <div class="chi-name">Hào 4</div> <div class="chi-hanh">Thê Tài Mùi Thổ</div> <div class="chi-am"></div> </div> <div class="chi-row chi-tho"> <div class="chi-name">Hào 3</div> <div class="chi-hanh">Thê Tài Thìn Thổ</div> <div class="chi-am">Hào Thế · Quan Quỷ Dậu Kim phục</div> </div> <div class="chi-row chi-moc"> <div class="chi-name">Hào 2</div> <div class="chi-hanh">Huynh Đệ Dần Mộc</div> <div class="chi-am"></div> </div> <div class="chi-row chi-thuy"> <div class="chi-name">Hào 1</div> <div class="chi-hanh">Phụ Mẫu Tý Thủy</div> <div class="chi-am"></div> </div> </div> <p>Chúng ta sẽ chọn <strong>1 trong số các hào này</strong> — hào nào ứng với việc cần xem — gọi đó là <em>Dụng Thần</em>.</p> <div class="kp"> Dụng là <em>sử dụng</em>, Thần là <em>thành phần trong quẻ</em>. Hỏi việc nào, dùng hào ứng với việc đó để xem. </div> ` }, { title: 'Dụng Thần là gì —<br><em>Công cụ then chốt</em>', subtitle: 'Định nghĩa và hình ảnh minh họa · Nắm chắc trước khi đi xa', body: ` <h3 class="inline-sub">⟢ Định nghĩa Dụng Thần ⟢</h3> <p><em>Dụng Thần</em> là <strong>hào mang ý nghĩa ứng với sự việc cần hỏi</strong>. Nó chính là công cụ then chốt đại diện cho vấn đề bạn đang quan tâm trong quẻ.</p> <p>Dụng Thần có thể là một hào thuộc <strong>Lục Thân</strong> — Thê Tài, Quan Quỷ, Tử Tôn, Phụ Mẫu, Huynh Đệ — hoặc đôi khi là <em>hào Thế</em>, hay hào có vị trí đặc biệt như hào hai, hào năm, hào sáu.</p> <div class="kp"> Mỗi sự việc sẽ có cách lấy Dụng Thần riêng. Bài này giới thiệu cách lấy phổ biến nhất — đủ để bạn bắt đầu thực hành. </div> <h3 class="inline-sub">⟢ Hình ảnh minh họa ⟢</h3> <p>Chọn Dụng Thần có thể ví von giống như <strong>người nông dân khi ra đồng</strong>, họ phải chọn một món công cụ chính phù hợp với việc cần làm hôm đó:</p> <div class="persons-grid"> <div class="person-row"> <span class="person-name">🌾 Cuốc đất</span> <span class="person-father">→ Dùng cuốc</span> <div class="person-fate">Chọn đúng công cụ → làm đúng việc</div> </div> <div class="person-row"> <span class="person-name">🕳 Đào hố</span> <span class="person-father">→ Dùng xẻng</span> <div class="person-fate">Sai công cụ → mất công sức, sai kết quả</div> </div> <div class="person-row"> <span class="person-name">🪵 Chặt cây</span> <span class="person-father">→ Dùng rìu</span> <div class="person-fate">Đúng công cụ → việc nhanh chóng xong xuôi</div> </div> </div> <p>Chọn Dụng Thần cũng chính là như vậy. <em>Hỏi việc nào, dùng hào ứng với việc đó.</em> Chọn sai hào — kết luận sẽ sai dù đọc quẻ giỏi đến đâu.</p> <div class="kp"> Bước này tưởng đơn giản nhưng là <strong>điểm sai phổ biến nhất</strong> của người mới. Nắm chắc Dụng Thần trước khi học thêm kỹ thuật. </div> ` }, { title: 'Cách lấy Dụng Thần —<br><em>Bảng tra phổ biến</em>', subtitle: 'Sáu loại việc · Sáu cách chọn hào · Dễ áp dụng', body: ` <p>Dưới đây là những cách chọn Dụng Thần được sử dụng rộng rãi và dễ áp dụng cho người mới. Hãy ghi nhớ bảng này — đây là thứ bạn dùng hàng ngày.</p> <h3 class="inline-sub">⟢ Bảng lấy Dụng Thần theo loại việc ⟢</h3> <div class="chi-table"> <div class="chi-row chi-header"> <div class="chi-name">Dụng Thần</div> <div class="chi-hanh">Dùng khi hỏi về</div> <div class="chi-am">Ghi chú</div> </div> <div class="chi-row chi-tho"> <div class="chi-name">Thê Tài</div> <div class="chi-hanh">Tiền bạc, tài lộc, kinh doanh, mua bán</div> <div class="chi-am">Tài vật</div> </div> <div class="chi-row chi-kim"> <div class="chi-name">Quan Quỷ</div> <div class="chi-hanh">Công việc, sự nghiệp, thi cử, thăng tiến</div> <div class="chi-am">Cũng dùng cho bệnh tật</div> </div> <div class="chi-row chi-hoa"> <div class="chi-name">Tử Tôn</div> <div class="chi-hanh">Con cái, học hành, kết quả</div> <div class="chi-am">Phúc đức</div> </div> <div class="chi-row chi-thuy"> <div class="chi-name">Phụ Mẫu</div> <div class="chi-hanh">Cha mẹ, nhà cửa, giấy tờ</div> <div class="chi-am">Văn thư</div> </div> <div class="chi-row chi-moc"> <div class="chi-name">Hào Thế</div> <div class="chi-hanh">Bản thân, hôn nhân, đi xa, an nguy</div> <div class="chi-am">Đại diện bản thân</div> </div> </div> <div class="warn-box"> <span class="warn-label">⚠ Lưu ý quan trọng</span> <p>Đây là cách lấy Dụng Thần <strong>phổ biến và phù hợp người mới</strong>. Một số trường hợp phức tạp sẽ có quy tắc riêng — sẽ học ở các bài chuyên sâu hơn.</p> </div> <h3 class="inline-sub">⟢ Ví dụ thực hành ⟢</h3> <p>Quay lại quẻ Phong Lôi Ích — nếu người hỏi muốn biết về <em>việc kinh doanh</em>:</p> <div class="kp"> Dụng Thần = <strong>Thê Tài</strong> → Tìm hào Thê Tài trong quẻ → Hào 4 (Thê Tài Mùi Thổ) hoặc Hào 3 (Thê Tài Thìn Thổ) → Chọn hào không phục để xem. </div> ` }, { title: 'Đánh giá Dụng Thần —<br><em>Mạnh hay yếu?</em>', subtitle: 'Ba bước khái quát · Nguyệt lệnh · Nhật thần · Hào động', body: ` <p>Sau khi chọn được Dụng Thần, ta chuyển sang bước thứ hai: <strong>đánh giá sức mạnh của nó</strong> trong hoàn cảnh cụ thể.</p> <h3 class="inline-sub">⟢ Ba bước đánh giá cơ bản ⟢</h3> <div class="step-grid"> <div class="step-row"> <span class="step-a">Bước 1<small> kiểm tra</small></span> <span class="step-arrow">→</span> <span class="step-b">Nguyệt lệnh hỗ trợ?</span> <span class="step-tag">Quan trọng nhất</span> </div> <div class="step-row"> <span class="step-a">Bước 2<small> kiểm tra</small></span> <span class="step-arrow">→</span> <span class="step-b">Nhật thần hỗ trợ?</span> <span class="step-tag">Quan trọng thứ hai</span> </div> <div class="step-row"> <span class="step-a">Bước 3<small> kiểm tra</small></span> <span class="step-arrow">→</span> <span class="step-b">Hào động hỗ trợ?</span> <span class="step-tag">Yếu tố bổ sung</span> </div> </div> <p>Sự hỗ trợ này được xác định <strong>chủ yếu dựa trên quan hệ ngũ hành của các địa chi</strong> — sinh, khắc, hợp, hình — và một vài trường hợp đặc biệt khác.</p> <div class="kp"> Bạn cần nắm rõ <em>ngũ hành can chi</em>, <em>ngũ hành sinh khắc</em>, và một vài thần sát để tự tin xử lý bước này. </div> <h3 class="inline-sub">⟢ Cụ thể: Sự hỗ trợ nghĩa là gì? ⟢</h3> <p><strong>Nguyệt lệnh</strong> là địa chi của tháng chiêm quẻ. Nếu Nguyệt lệnh <em>sinh</em> với địa chi của Dụng Thần → được hỗ trợ. Nếu <em>khắc hoặc mộ</em> → bị suy yếu.</p> <p><strong>Nhật thần</strong> là địa chi ngày chiêm quẻ — cũng xét tương tự theo quan hệ ngũ hành với Dụng Thần.</p> <p><strong>Hào động</strong> là hào có biến hóa trong quẻ — xem hào động có <em>sinh</em> với Dụng Thần hay không, dựa trên quan hệ ngũ hành của địa chi.</p> ` }, { title: 'Kết luận thực hành —<br><em>Mạnh, trung bình, yếu</em>', subtitle: 'Ba mức độ · Ý nghĩa trong luận đoán · Ví dụ cụ thể', body: ` <p>Sau khi kiểm tra ba bước, ta sẽ có kết luận về sức mạnh của Dụng Thần. Đây là bước <strong>chuyển hóa từ kỹ thuật sang ý nghĩa</strong>.</p> <h3 class="inline-sub">⟢ Ba mức độ sức mạnh ⟢</h3> <div class="persons-grid"> <div class="person-row"> <span class="person-name" style="color: var(--green)">● Mạnh (Vượng)</span> <span class="person-father"></span> <div class="person-fate"><strong>Hợp Nguyệt lệnh sinh + được hào động sinh</strong> → Việc thuận lợi, dễ thành.</div> </div> <div class="person-row"> <span class="person-name" style="color: var(--gold)">● Trung bình</span> <span class="person-father"></span> <div class="person-fate"><strong>Đi sinh Nguyệt lệnh, Nhật thần khắc, hào động sinh</strong> → Việc chậm rãi, cần kiên trì.</div> </div> <div class="person-row tragic"> <span class="person-name">● Yếu</span> <span class="person-father"></span> <div class="person-fate"><strong>Nguyệt lệnh khắc, không được Nhật thần và hào động sinh</strong> → Việc khó khăn, dễ trở ngại.</div> </div> </div> <h3 class="inline-sub">⟢ Ví dụ thực hành ⟢</h3> <p>Quẻ <strong>Phong Lôi Ích</strong>, hỏi về kinh doanh. Dụng Thần là <em>Thê Tài Mùi Thổ</em> (Hào 4).</p> <p>Giả sử chiếm vào <strong>tháng Dần</strong> (Mộc lệnh), ngày <strong>Đinh Mão</strong> (Mộc nhật), không có hào động sinh Thổ:</p> <div class="compare-pair"> <div class="compare-cell bad"> <span class="c-lbl">Nguyệt Lệnh</span> <div class="c-text">Dần Mộc khắc Mùi Thổ → <em>Suy</em></div> </div> <div class="compare-cell bad"> <span class="c-lbl">Nhật Thần</span> <div class="c-text">Mão Mộc khắc Mùi Thổ → <em>Bị khắc</em></div> </div> </div> <div class="kp"> Kết luận: Dụng Thần <strong>yếu</strong>. Việc kinh doanh giai đoạn này <em>khó khăn, nhiều trở ngại</em>. Nên chờ tháng Thổ vượng hoặc Kim vượng. </div> ` }, { title: 'Tổng kết —<br><em>Hai bước, một nền tảng</em>', subtitle: 'Nhắc lại cốt lõi · Bước tiếp theo · Tinh thần học đúng', body: ` <h3 class="inline-sub">⟢ Nhắc lại hai bước cốt lõi ⟢</h3> <p><strong>Dụng Thần là trọng tâm của việc luận quẻ.</strong></p> <div class="dyad-grid"> <div class="dyad-cell tinh"> <span class="dyad-lbl">Bước một</span> <div class="dyad-text"><strong>Chọn Dụng Thần</strong> — Tìm đúng hào trọng tâm ứng với việc cần hỏi.</div> </div> <div class="dyad-cell dong"> <span class="dyad-lbl">Bước hai</span> <div class="dyad-text"><strong>Xem mạnh hay yếu</strong> — Hiểu rõ hào trọng tâm đó đang ở thế nào.</div> </div> </div> <p>Khi nắm chắc hai bước này, bạn đã có <em>nền tảng vững vàng</em> để đi sâu hơn vào phương pháp Lục Hào Kinh Dịch.</p> <h3 class="inline-sub">⟢ Kiến thức cần bổ sung ⟢</h3> <p>Để thực hành tốt hai bước trên, bạn cần trang bị thêm:</p> <div class="hierarchy-box"> <div class="hier-row main"><span class="hier-tag">Nền tảng</span><span class="hier-name">Ngũ Hành Can Chi</span></div> <div class="hier-row aux"><span class="hier-tag">Kỹ thuật</span><span class="hier-name">Ngũ Hành Sinh Khắc</span></div> <div class="hier-row aux"><span class="hier-tag">Mở rộng</span><span class="hier-name">Thần Sát liên quan</span></div> <div class="hier-row minor"><span class="hier-tag">Nâng cao</span><span class="hier-name">Lục Thân chi tiết</span></div> </div> <div class="kp"> Đọc ít, suy diễn nhiều là thảm họa. Đọc nhiều, suy diễn ít thì không phải trí tuệ. Học đúng phương pháp và <em>thực hành đủ nhiều</em> mới là con đường bền vững. </div> <h3 class="inline-sub">⟢ Lời nhắc cuối ⟢</h3> <p>Lục Hào không phải môn học để <em>đọc thuộc lòng</em> — mà là môn học để <em>thực hành và kiểm chứng</em>. Mỗi lần chiêm quẻ là một lần rèn luyện.</p> <p>Hãy bắt đầu từ <strong>hai bước đơn giản này</strong> và kiên trì trước khi học thêm kỹ thuật phức tạp hơn.</p> ` } ]; const QUESTIONS = [ { text: 'Theo bài viết, để luận quẻ theo phương pháp Lục Hào, người mới học chỉ cần nắm vững hai bước cốt lõi nào?', options: [ 'Xác định quẻ đơn và quẻ kép', 'Chọn Dụng Thần và xem Dụng Thần mạnh hay yếu', 'Tính Nguyệt lệnh và Nhật thần', 'Tìm hào Thế và hào Ứng' ], correct: 1, explain: '<strong>Chọn Dụng Thần + Xem mạnh hay yếu.</strong> Đây là hai bước cốt lõi được nhấn mạnh ngay từ đầu bài. <em>Bước một</em> giúp tìm đúng hào trọng tâm. <em>Bước hai</em> giúp hiểu hào đó đang ở thế nào.' }, { text: 'Trong bảng an quẻ dịch, mỗi hào thường ứng với những thông tin gì?', options: [ 'Một Thiên Can và một Địa Chi', 'Một con số và một màu sắc', 'Một địa chi, một lục thân, và ký hiệu hào thế, ứng', 'Một ngũ hành và một hướng' ], correct: 2, explain: '<strong>Địa chi + Lục thân + ký hiệu hào thế, ứng.</strong> Mỗi hào trong bảng an quẻ mang ba lớp thông tin này. Ví dụ quẻ Phong Lôi Ích: Hào 6 là <em>Huynh Đệ Mão Mộc — Hào Ứng</em>.' }, { text: 'Theo bài viết, khi hỏi về bản thân, hôn nhân, đi xa hoặc an nguy, Dụng Thần thường được lấy là hào nào?', options: [ 'Thê Tài', 'Quan Quỷ', 'Hào Thế', 'Phụ Mẫu' ], correct: 2, explain: '<strong>Hào Thế</strong> đại diện cho bản thân người hỏi. Khi câu hỏi liên quan trực tiếp đến <em>bản thân, hôn nhân, đi xa, an nguy</em> — tức các vấn đề gắn liền với chủ thể — thì Hào Thế là Dụng Thần phù hợp nhất.' }, { text: 'Tác giả ví von việc chọn Dụng Thần giống với hình ảnh nào?', options: [ 'Người thợ xây chọn thước đo', 'Người nông dân chọn một món công cụ chính phù hợp với việc cần làm (cuốc, xẻng, rìu)', 'Người đi biển chọn la bàn', 'Người học sinh chọn sách để học' ], correct: 1, explain: '<strong>Người nông dân chọn công cụ.</strong> Cuốc cho cuốc đất, xẻng cho đào hố, rìu cho chặt cây. Chọn Dụng Thần cũng vậy: hỏi việc nào, dùng hào ứng với việc đó. <em>Chọn sai hào — kết luận sai dù đọc quẻ giỏi đến đâu.</em>' }, { text: 'Dụng Thần được định nghĩa là gì?', options: [ 'Hào có vị trí chính giữa quẻ', 'Hào mạnh nhất trong quẻ', 'Hào mang ý nghĩa ứng với sự việc cần hỏi, là công cụ then chốt đại diện cho vấn đề đang quan tâm', 'Hào thuộc hào Ứng của quẻ' ], correct: 2, explain: '<strong>Hào mang ý nghĩa ứng với sự việc cần hỏi.</strong> Không phải hào mạnh nhất, không phải hào ở giữa — mà là hào <em>đúng với nội dung câu hỏi</em>. Đây là điểm mấu chốt của toàn bộ phép luận quẻ.' }, { text: 'Theo bài viết, khi hỏi về công việc, sự nghiệp, thi cử, thăng tiến thì nên lấy Dụng Thần nào?', options: [ 'Thê Tài', 'Quan Quỷ', 'Tử Tôn', 'Phụ Mẫu' ], correct: 1, explain: '<strong>Quan Quỷ</strong> là Dụng Thần cho các vấn đề liên quan đến <em>công việc, sự nghiệp, thi cử, thăng tiến</em>. Ngoài ra, Quan Quỷ cũng được dùng để xem bệnh tật.' }, { text: 'Hỏi về con cái, học hành, kết quả thì Dụng Thần thường là gì?', options: [ 'Huynh Đệ', 'Quan Quỷ', 'Hào Thế', 'Tử Tôn' ], correct: 3, explain: '<strong>Tử Tôn</strong> — còn gọi là hào Phúc Đức — là Dụng Thần khi hỏi về <em>con cái, học hành, kết quả</em>. Tử Tôn mang ý nghĩa những gì ta tạo ra, sinh thành, và những thành quả đạt được.' }, { text: 'Sau khi chọn được Dụng Thần, bước đánh giá sức mạnh gồm những bước khái quát nào?', options: [ 'Xem có được Thái Tuế, Nguyệt lệnh, Nhật thần hỗ trợ không', 'Xem có được Nguyệt lệnh, Nhật thần, hào động hỗ trợ không', 'Xem có được hào Thế, hào Ứng, hào động hỗ trợ không', 'Xem có được tam hợp, lục hợp hỗ trợ không' ], correct: 1, explain: '<strong>Nguyệt lệnh → Nhật thần → Hào động.</strong> Ba bước theo thứ tự ưu tiên giảm dần. Nguyệt lệnh quan trọng nhất. Nhật thần là yếu tố trực tiếp ngày chiếm. Hào động là yếu tố bổ sung, thể hiện sự chuyển hóa trong quẻ.' }, { text: 'Làm sao để biết Dụng Thần có được Nguyệt lệnh hỗ trợ hay không?', options: [ 'Dựa vào quan hệ ngũ hành giữa địa chi của Dụng Thần và địa chi Nguyệt lệnh — Nguyệt lệnh sinh với Dụng Thần', 'Xem Nguyệt lệnh có cùng số với hào Dụng Thần không', 'Xem Nguyệt lệnh có phải là hào Thế không', 'Xem Nguyệt lệnh có ở vị trí trung tâm không' ], correct: 0, explain: '<strong>Quan hệ ngũ hành của địa chi.</strong> Nếu địa chi Nguyệt lệnh <em>sinh</em> với địa chi Dụng Thần → được hỗ trợ. Nếu <em>khắc hoặc mộ</em> → Dụng Thần bị suy yếu. Đây là kiến thức nền bắt buộc phải nắm.' }, { text: 'Làm sao biết Dụng Thần có được hào động hỗ trợ hay không?', options: [ 'Xem hào động có cùng màu với Dụng Thần không', 'Xem hào động có sinh với Dụng Thần dựa trên quan hệ ngũ hành của địa chi', 'Xem hào động có phải là hào Ứng không', 'Xem hào động ở trên hay dưới Dụng Thần' ], correct: 1, explain: '<strong>Quan hệ ngũ hành của địa chi.</strong> Hào động có <em>sinh</em> với Dụng Thần → hỗ trợ, tăng sức mạnh. Hào động <em>khắc</em> Dụng Thần → gây trở ngại. Nguyên tắc xét hào động giống với xét Nguyệt lệnh và Nhật 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() { // Try iframe-internal scroll first (works in standalone) 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); } } // Also tell parent (WordPress page) to scroll to iframe top — works inside iframe try { if (window.parent && window.parent !== window) { window.parent.postMessage({ ltTcScrollToFrame: true }, '*'); } } catch(e) {} } 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); } } // Tell parent to scroll to CTA position try { if (window.parent && window.parent !== window) { window.parent.postMessage({ ltTcScrollToCTA: true }, '*'); } } catch(e) {} } 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 nền tảng Lục Hào — Dụng Thần và cách đánh giá sức mạnh. Bước tiếp theo là thực hành chiêm quẻ thực tế.'; } else if (totalCorrect >= 8) { title = 'Xuất <em>sắc</em>'; msg = 'Bạn đã nắm được hai bước cốt lõi của Lục Hào. Vài câu sai chỉ là chi tiết nhỏ — xem lại giải thích để hoàn thiện.'; } else if (totalCorrect >= 6) { title = '<em>Khá</em> tốt'; msg = 'Đã có khái niệm cơ bản. Nên đọc lại phần III (bảng Dụng Thần) và phần IV (ba bước đánh giá) — đây là hai phần cốt lõi nhất.'; } else if (totalCorrect >= 4) { title = 'Còn <em>chỗ trống</em>'; msg = 'Nền tảng chưa thật vững. Khuyến nghị: đọc lại sáu phần một lần nữa, đặc biệt chú ý bảng lấy Dụng Thần và ba bước đánh giá sức mạnh.'; } 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 sáu phần, ghi nhớ hai bước: Chọn Dụng Thần → Xem mạnh hay yếu, 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({ ltLsHeight: 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: 7200px !important; min-height: 7200px !important; max-height: none !important; border: 0 !important; display: block !important; background: transparent !important; margin: 0 !important; padding: 0 !important;" title="Luận Quẻ Lục Hào - Dụng Thần Cơ Bản"> </iframe> </div> <script> (function() { var IFRAME_ID = 'lt-ls-frame'; var INITIAL_H = 7200; 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); } function scrollParentToFrameTop(offsetPx) { var f = document.getElementById(IFRAME_ID); if (!f) return; setTimeout(function() { var rect = f.getBoundingClientRect(); var iframeTopInPage = rect.top + (window.pageYOffset || document.documentElement.scrollTop || 0); var targetY = Math.max(iframeTopInPage - (offsetPx || 20), 0); try { window.scrollTo({ top: targetY, behavior: 'smooth' }); } catch(e) { window.scrollTo(0, targetY); } }, 150); } window.addEventListener('message', function(e) { if (!e || !e.data) return; if (typeof e.data.ltLsHeight === 'number') setH(e.data.ltLsHeight, e.data.viewId); if (e.data.ltTcScrollToFrame === true || e.data.ltLsScrollToFrame === true) scrollParentToFrameTop(20); if (e.data.ltTcScrollToCTA === true || e.data.ltLsScrollToCTA === true) scrollParentToFrameTop(20); }); 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 LỊCH SỬ TỬ BÌNH -->
