<!-- ======================================================== --> <!-- CHƯƠNG 4 — BẢN ĐỒ KHÁM PHÁ BÁT TỰ (5 giai đoạn + Hai quy tắc vàng) --> <!-- WordPress safe iframe (JNews compatible) - không có scroll-to-iframe --> <!-- Paste into Custom HTML block in Gutenberg --> <!-- ======================================================== --> <style> .lt-wrap-lt-c4-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-c4-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-c4-frame"> <iframe id="lt-c4-frame" height="3700" 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>Chương 4 — Bản Đồ Khám Phá Bát Tự (5 giai đoạn)</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; } } /* 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; } } </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">Chương 4 · Lộ trình học</span> <div class="hero-chinese">學習地圖</div> <h1>Bản Đồ Khám Phá Bát Tự<br><em>Hai quy tắc vàng · Năm giai đoạn</em></h1> <div class="hero-rule"></div> <p class="hero-intro"> Học Tử Bình, điều mọi người sợ nhất là <em>"quá nhiều khái niệm một lúc"</em>. Hãy hiểu bát tự như <em>một tổ chức, một công ty</em> — vận hành theo <em>hai quy tắc vàng</em>, học theo <em>năm giai đoạn</em>, từng bước một như leo thang. </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="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 gửi gắm ⟢</div> <p class="closing-text"> <em>Hai quy tắc vàng</em> — mục tiêu chung & quyền lực không chia đều.<br> <em>Giai đoạn 1</em> — lực lượng cơ bản.<br> <em>Giai đoạn 2</em> — liên minh.<br> <em>Giai đoạn 3</em> — cách cục.<br> <em>Giai đoạn 4</em> — thắng bại.<br> <em>Giai đoạn 5</em> — áp dụng cuộc sống.<br><br> Học theo cách này — <em>bớt rối, thấy rõ tiến bộ</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ố sáu phần vừa đọc — hai quy tắc vàng và năm giai đoạ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" 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: 'Hai <em>Quy Tắc Vàng</em>', subtitle: 'Bát tự như một tổ chức · Vận hành theo logic cuộc sống', body: ` <p>Đầu tiên tôi muốn bạn hiểu <strong>tổng quan</strong>. Đừng hiểu mệnh lý theo dạng <em>công thức máy móc, vô lý do</em> kẻ nào đó tùy tiện bịa ra. Hãy hiểu cả bát tự như <strong>một tổ chức, một công ty</strong> — chúng vận hành tương tự như những gì diễn ra ngoài cuộc sống.</p> <h3 class="inline-sub">⟢ Quy tắc 1 — Mục tiêu chung ⟢</h3> <div class="rule-card"> <span class="rule-num">I</span> <div class="rule-body"> <p class="rule-head">Các thành phần theo đuổi <strong>một mục tiêu chung</strong>.</p> <p class="rule-text">Mục tiêu đó là: <em>vị thế — quyền lực</em>, <em>lợi ích — tiền tài</em>, hoặc <em>ưu thế về tương lai — trí tuệ, kiến thức</em>.</p> <p class="rule-text">Bạn thử phản biện xem — con người cuối cùng có thoát khỏi <strong>3 thứ</strong>: <em>tham quyền — tham tiền — tham trí</em> không?</p> </div> </div> <div class="kp"> Hiểu được điều này, bạn sẽ biết <strong>thành phần nào trong bát tự cần được ưu tiên</strong> xem xét hơn các thành phần khác. </div> <h3 class="inline-sub">⟢ Quy tắc 2 — Quyền lực không chia đều ⟢</h3> <div class="rule-card"> <span class="rule-num">II</span> <div class="rule-body"> <p class="rule-head">Quyền lực <strong>không chia đều</strong>.</p> <p class="rule-text">Các thành phần trong tổ chức tuy nhiều đến đâu thì cuối cùng cũng vẫn theo <em>một thế lực thống trị</em>, hoặc <em>2–3 nhóm thống trị</em> — chứ chẳng phải quyền lực chia đều.</p> <p class="rule-text">Cả Liên Hợp Quốc <em>hàng trăm nước</em>, cuối cùng cũng vẫn chỉ có <em>2 hoặc 3 thế lực</em> thực sự điều hành.</p> </div> </div> <div class="kp"> Hiểu được điều này, bạn sẽ chỉ cần tìm <strong>1, 2, hoặc 3 nhóm ngũ hành mạnh nhất</strong> để xem quá trình vận hành trong bát tự thực sự là do nhóm nào làm chủ. </div> <h3 class="inline-sub">⟢ Hai bước chính của luận bát tự ⟢</h3> <p>Luận bát tự cũng tương tự như tìm ra <em>quy luật vận hành của một tổ chức</em> qua <strong>hai bước</strong>:</p> <div class="step-eval"> <div class="step-eval-row"> <span class="step-eval-num">1</span> <span class="step-eval-text">Xác định <strong>các thế lực đang tồn tại</strong>.</span> </div> <div class="step-eval-row"> <span class="step-eval-num">2</span> <span class="step-eval-text">Xác định <strong>thế lực nào đang đem lại lợi ích cho toàn cục</strong> — và thế lực đó có <em>phát triển được không</em>?</span> </div> </div> <p>Nếu thế lực đem lại lợi ích cho toàn cục <em>mạnh</em> thì tổng thể được <strong>phát triển bền vững</strong>. Nếu không thì tất cả sẽ <em>tan đàn xẻ nghé và đổ vỡ</em>.</p> ` }, { title: 'Giai đoạn 1 —<br><em>Xác định lực lượng cơ bản</em>', subtitle: 'Nhận diện Thiên Can, Tàng Can, Thập Thần', body: ` <div class="stage-goal"> <span class="goal-label">⟢ Mục tiêu ⟢</span> <p class="goal-text">Xác định được các <strong>Thiên Can</strong>, <strong>Tàng Can</strong> trong lá số và xem chúng thuộc <strong>Thập Thần</strong> nào.</p> </div> <h3 class="inline-sub">⟢ Khái niệm cần nắm ⟢</h3> <p>Để làm được điều này, bạn cần hiểu:</p> <div class="concept-grid"> <div class="concept-cell">Âm Dương</div> <div class="concept-cell">Ngũ Hành</div> <div class="concept-cell">Thiên Can</div> <div class="concept-cell">Địa Chi</div> <div class="concept-cell">Tàng Can</div> <div class="concept-cell">Sinh – Khắc</div> <div class="concept-cell">Thập Thần</div> <div class="concept-cell">Nhật Can</div> </div> <p>Để hiểu cặn kẽ, chúng ta cũng nên đi sâu vào những <em>kiến thức nền tảng</em> nữa — ví dụ như <strong>tại sao phải dựa vào Nhật Can</strong> (Can Ngày).</p> <div class="kp"> Khi hoàn thành <strong>Giai đoạn 1</strong>, bạn đã có thể <em>sửa soạn hành trang để bắt đầu hành trình luận bát tự</em>. </div> ` }, { title: 'Giai đoạn 2 —<br><em>Nhìn ra các nhóm liên minh</em>', subtitle: 'Lá số không còn là các yếu tố rời rạc', body: ` <div class="stage-goal"> <span class="goal-label">⟢ Mục tiêu ⟢</span> <p class="goal-text">Xem các <strong>Can Chi</strong> có tạo thành <em>nhóm liên minh (đồng minh)</em> với nhau không.</p> </div> <h3 class="inline-sub">⟢ Khái niệm cần nắm ⟢</h3> <p>Để làm được điều này, bạn cần hiểu:</p> <div class="concept-grid"> <div class="concept-cell">Tam hợp</div> <div class="concept-cell">Tam hội</div> <div class="concept-cell">Can có gốc</div> <div class="concept-cell">Can không gốc</div> </div> <p>Cùng với đó là <strong>khả năng tương tác, liên kết</strong> giữa các Can Chi với nhau.</p> <h3 class="inline-sub">⟢ Lưu ý quan trọng ⟢</h3> <div class="kp verdict-good"> Tổ hợp ngũ hành <strong>mạnh nhất</strong> không phải lúc nào cũng là tổ hợp <em>xuất hiện nhiều nhất</em> — mà là tổ hợp vừa <strong>mạnh</strong> vừa <strong>ổn định nhất</strong>: </div> <div class="kp"> Tức là tổ hợp: <em>một can thấu mà nhiều chi làm gốc</em>. </div> <p>Giai đoạn này giúp bạn thấy <strong>lá số không còn là các yếu tố rời rạc</strong> nữa.</p> ` }, { title: 'Giai đoạn 3 —<br><em>Xác định Cách Cục</em>', subtitle: 'Phân loại theo chi tháng · Tìm thần trọng điểm', body: ` <p>Quay lại với <strong>nguyên tắc vàng thứ nhất</strong> — mọi hệ thống đều vận hành để <em>sở hữu tài nguyên</em>. Tài nguyên trong bát tự là <strong>ba nhóm thần</strong>:</p> <div class="concept-grid concept-grid-3"> <div class="concept-cell"> <span class="concept-tag">Quan tinh</span> <span class="concept-meaning">Quyền</span> </div> <div class="concept-cell"> <span class="concept-tag">Tài tinh</span> <span class="concept-meaning">Tiền</span> </div> <div class="concept-cell"> <span class="concept-tag">Ấn tinh</span> <span class="concept-meaning">Trí</span> </div> </div> <h3 class="inline-sub">⟢ Cách phân loại ⟢</h3> <p>Bạn sẽ dựa trên <strong>chi tháng</strong> để phân loại các cách cục, và tìm ra <em>đâu mới là thần trọng điểm</em> để phát triển — và sự phát triển bên trong <em>có tự xung đột hay không</em>?</p> <p>Giai đoạn này bạn hãy tìm hiểu những kiến thức về <strong>tòng cách</strong> và các loại <strong>cách cục theo chi tháng</strong> khác nhau.</p> <h3 class="inline-sub">⟢ Ba phe ⟢</h3> <p>Khi đã tìm được thần trọng điểm, chúng ta sẽ chia bát tự thành <strong>3 phe</strong>:</p> <div class="strength-card strong"> <div class="strength-head"> <span class="strength-label">Phe ta</span> </div> <p class="strength-cond"><em>Phe hỗ trợ</em> — cùng phe với thần trọng điểm.</p> </div> <div class="strength-card weak"> <div class="strength-head"> <span class="strength-label">Phe địch</span> </div> <p class="strength-cond"><em>Phe chống đối</em> — chống lại thần trọng điểm.</p> </div> <div class="strength-card medium"> <div class="strength-head"> <span class="strength-label">Nhàn thần</span> </div> <p class="strength-cond"><em>Phe trung gian</em> — không thuộc bên nào rõ rệt.</p> </div> ` }, { title: 'Giai đoạn 4 —<br><em>Xác định thắng bại</em>', subtitle: 'Phe nào hỗ trợ · Phe nào phá hoại · Phe nào thắng', body: ` <div class="stage-goal"> <span class="goal-label">⟢ Mục tiêu ⟢</span> <p class="goal-text">Xem các liên minh tạo thành <strong>Cách cục</strong> gì? <em>Phe nào hỗ trợ, phe nào phá hoại?</em> Phe nào sẽ thắng? Và cách cục cuối cùng <strong>thành hay bại</strong>?</p> </div> <h3 class="inline-sub">⟢ Khái niệm cần nắm ⟢</h3> <p>Để làm được điều này, bạn cần hiểu:</p> <div class="concept-grid"> <div class="concept-cell">Mức độ ưu tiên tương tác</div> <div class="concept-cell">Các Cách cục chính</div> </div> <p>Cùng với <strong>3 tiêu chí đánh giá cách cục</strong>:</p> <div class="criteria-grid"> <div class="criteria-cell"> <span class="criteria-name">Mạnh</span> </div> <div class="criteria-cell"> <span class="criteria-name">Bền</span> </div> <div class="criteria-cell"> <span class="criteria-name">Linh hoạt</span> </div> </div> <p>Và cuối cùng là <em>mô hình cuộc đời con người qua Bát Tự</em> — cách cục như một <strong>bản tóm tắt về cấu trúc số phận</strong> mà lá số đang nắm bắt.</p> ` }, { title: 'Giai đoạn 5 —<br><em>Áp dụng vào cuộc sống</em>', subtitle: 'Dùng bát tự xem cho chính bạn · Không phải mọi người sinh cùng giờ', body: ` <div class="stage-goal"> <span class="goal-label">⟢ Mục tiêu ⟢</span> <p class="goal-text">Áp dụng vào <em>thực tế cuộc sống</em> để điều chỉnh. Đây là bước <strong>thực sự dùng bát tự xem cho chính bạn</strong>, thay vì dùng lá số xem cho tất cả những người sinh cùng giờ.</p> </div> <h3 class="inline-sub">⟢ Ví dụ minh họa ⟢</h3> <p>Ví dụ: <em>dụng thần của bạn là Chính Quan hành Kim</em> — vậy thì các yếu tố trong cuộc sống bạn:</p> <div class="strength-card strong"> <div class="strength-head"> <span class="strength-label">Câu hỏi 1</span> </div> <p class="strength-cond">Có <em>hỗ trợ</em> Chính Quan hành Kim này không?</p> </div> <div class="strength-card weak"> <div class="strength-head"> <span class="strength-label">Câu hỏi 2</span> </div> <p class="strength-cond">Hay lại hỗ trợ <em>các hành khác chống lại Kim</em>?</p> </div> <div class="kp"> Bước này mới thực sự là <strong>dùng bát tự xem cho chính bạn</strong> — thay vì xem cho tất cả những người sinh cùng giờ với bạn. <em>Bạn hiểu sự khác nhau này chứ?</em> </div> <h3 class="inline-sub">⟢ Lưu ý quan trọng ⟢</h3> <p>Bạn <strong>không cần vội vàng</strong> học hết tất cả các giai đoạn ngay một lúc. Chúng ta sẽ tập trung hoàn thành <em>thật chắc Giai đoạn 1 trước</em>. Khi đã nắm được khái niệm về Can, Tàng Can và Thập Thần, mới chuyển sang giai đoạn tiếp theo.</p> <div class="kp"> Học theo cách này sẽ giúp bạn <strong>bớt rối, thấy rõ tiến bộ</strong> và <em>không bị choáng ngợp</em>. </div> <h3 class="inline-sub">⟢ Công cụ 8THT ⟢</h3> <p>Ngoài ra, những yếu tố như <em>xác định thập thần, tàng can, các nhóm ngũ hành mạnh yếu</em>… cũng đã được lập trình trong <strong>công cụ 8THT</strong>. Bạn chỉ cần <em>hiểu để tự tin sử dụng nó</em>, chứ không cần phải nhớ quá nhiều.</p> ` } ]; const QUESTIONS = [ { text: 'Theo bài viết, con người nói chung theo đuổi <em>ba thứ cốt lõi</em> nào?', options: [ 'Danh – lợi – tình', 'Sức khỏe – giàu sang – tuổi thọ', 'Quyền – tiền – trí', 'Tham quyền – tham tiền – tham trí' ], correct: 3, explain: '<strong>Tham quyền – tham tiền – tham trí.</strong> Bài viết nói: <em>"con người cuối cùng có thoát khỏi 3 thứ: tham quyền — tham tiền — tham trí không?"</em>. Chữ "tham" quan trọng — nó nhấn mạnh đây là <em>động cơ thúc đẩy hành động</em>, không chỉ là 3 thứ trung tính.' }, { text: 'Quy tắc vàng <em>thứ nhất</em> trong bát tự là gì?', options: [ 'Các thành phần luôn chống đối', 'Các thành phần luôn bình đẳng', 'Không có mục tiêu chung', 'Theo đuổi một mục tiêu chung' ], correct: 3, explain: '<strong>Theo đuổi một mục tiêu chung.</strong> Mục tiêu đó là <em>vị thế (quyền), lợi ích (tiền), hoặc trí tuệ (trí)</em>. Hiểu được điều này giúp bạn biết <em>thành phần nào trong bát tự cần ưu tiên</em> xem xét.' }, { text: 'Quy tắc vàng <em>thứ hai</em> là gì?', options: [ 'Quyền lực chia đều', 'Chỉ một nhóm duy nhất', 'Luôn thay đổi', 'Quyền lực không chia đều — chỉ 1-3 nhóm điều hành' ], correct: 3, explain: '<strong>Quyền lực không chia đều.</strong> Bài viết ví dụ: <em>"Cả Liên Hợp Quốc hàng trăm nước, cuối cùng cũng vẫn chỉ có 2 hoặc 3 thế lực thực sự điều hành"</em>. Trong bát tự cũng vậy — chỉ cần tìm <em>1, 2, hoặc 3 nhóm ngũ hành mạnh nhất</em>.' }, { text: 'Hiểu <em>hai nguyên tắc vàng</em> giúp ích gì?', options: [ 'Học thuộc công thức', 'Bỏ qua chi tiết', 'Chỉ xem một yếu tố', 'Biết ưu tiên và tìm 1-3 nhóm mạnh nhất' ], correct: 3, explain: '<strong>Biết ưu tiên + tìm 1-3 nhóm mạnh nhất.</strong> Quy tắc 1 → biết <em>thành phần nào ưu tiên</em>. Quy tắc 2 → biết <em>chỉ cần tìm 1-3 nhóm mạnh nhất</em> để xem ai làm chủ. Hai quy tắc này giúp bạn <em>thoát khỏi tư duy máy móc</em>, không phải học thuộc công thức.' }, { text: 'Một người sống <em>hòa với thiên nhiên</em> có phải cuộc sống tốt nhất, thoát khỏi quyền-tiền-trí?', options: [ 'Có, thiên nhiên là lý tưởng', 'Có, không cần gì hơn', 'Không, nên sống xa rừng', 'Không — bộ lạc trong rừng gặp rủi ro, vẫn cần trí tuệ, tự chủ và nhu cầu cơ bản' ], correct: 3, explain: '<strong>Không thoát khỏi được.</strong> Đây là <em>phản biện</em> mà bài viết gợi ý. Ngay cả bộ lạc trong rừng vẫn cần <em>trí tuệ</em> để sinh tồn, vẫn cần <em>quyền tự chủ</em>, vẫn cần <em>nhu cầu cơ bản</em> (= lợi ích/tiền dưới dạng tài nguyên). <strong>Quyền-Tiền-Trí là phổ quát</strong> — chỉ thay đổi hình thức biểu hiện.' }, { text: 'Học Tử Bình theo bài viết qua <em>mấy giai đoạn</em>?', options: ['3 giai đoạn', '4 giai đoạn', '5 giai đoạn', '6 giai đoạn'], correct: 2, explain: '<strong>5 giai đoạn.</strong> Lần lượt: <em>(1) Lực lượng cơ bản</em> → <em>(2) Liên minh</em> → <em>(3) Cách cục</em> → <em>(4) Thắng bại</em> → <em>(5) Áp dụng cuộc sống</em>. Mỗi giai đoạn chỉ tập trung vào <em>một kỹ năng chính</em>, như leo thang.' }, { text: 'Mục tiêu của <em>Giai đoạn 1</em> là gì?', options: [ 'Tiếp cận các kiến thức cơ bản — Thiên Can, Tàng Can, Thập Thần', 'Xác định cách cục', 'Xác định thắng bại', 'Áp dụng thực tế' ], correct: 0, explain: '<strong>Tiếp cận kiến thức cơ bản.</strong> Cụ thể: xác định <em>Thiên Can, Tàng Can</em> trong lá số và xem chúng thuộc <em>Thập Thần</em> nào. Cần hiểu Âm Dương, Ngũ Hành, Sinh-Khắc, và đặc biệt là <em>tại sao phải dựa vào Nhật Can</em>.' }, { text: 'Tổ hợp ngũ hành <em>mạnh nhất</em> trong Giai đoạn 2 là?', options: [ 'Xuất hiện nhiều nhất', 'Một can thấu, nhiều chi làm gốc', 'Nhiều chi nhất', 'Nhiều can nhất' ], correct: 1, explain: '<strong>Một can thấu, nhiều chi làm gốc.</strong> Bài viết nhấn mạnh: tổ hợp mạnh nhất <em>không phải lúc nào cũng là tổ hợp xuất hiện nhiều nhất</em>, mà là tổ hợp vừa <em>mạnh</em> vừa <em>ổn định nhất</em>. Có can thấu để dẫn (chủ động), có chi làm gốc để bền (ổn định).' }, { text: 'Giai đoạn nào <em>áp dụng bát tự vào chính mình</em>?', options: ['Giai đoạn 5', 'Giai đoạn 3', 'Giai đoạn 4', 'Giai đoạn 2'], correct: 0, explain: '<strong>Giai đoạn 5.</strong> Đây là bước <em>thực sự dùng bát tự xem cho chính bạn</em>, thay vì dùng lá số xem cho tất cả những người sinh cùng giờ. Phải xét xem các yếu tố trong cuộc sống có <em>hỗ trợ dụng thần</em> hay không. Giai đoạn 3-4 mới chỉ làm việc trên lá số tĩnh.' }, { text: 'Các yếu tố như <em>thập thần, tàng can</em> được lập trình ở đâu, giúp bạn không cần nhớ quá nhiều?', options: [ 'Sách giáo khoa', 'Công cụ 8THT', 'Tay người thầy', 'Bảng tra âm lịch' ], correct: 1, explain: '<strong>Công cụ 8THT.</strong> Công cụ này đã tự động xác định thập thần, tàng can, các nhóm ngũ hành mạnh yếu — bạn chỉ cần <em>hiểu để tự tin sử dụng</em>, chứ không cần nhớ thuộc lòng từng chi tiết.' } ]; let currentPart = 0; let currentQ = 0; let answers = []; let answered = false; function renderPart() { const p = PARTS[currentPart]; document.getElementById('partSeal').textContent = ROMAN[currentPart + 1]; document.getElementById('partLbl').textContent = 'Phần ' + ORDINAL[currentPart + 1]; document.getElementById('partTitle').innerHTML = p.title; document.getElementById('partSubtitle').textContent = p.subtitle; document.getElementById('partBody').innerHTML = p.body; document.getElementById('partNumDisplay').textContent = currentPart + 1; document.querySelectorAll('.part-progress .dot').forEach((d, i) => { d.classList.remove('current', 'done'); if (i < currentPart) d.classList.add('done'); else if (i === currentPart) d.classList.add('current'); }); document.getElementById('prevPartBtn').disabled = currentPart === 0; const nextBtn = document.getElementById('nextPartBtn'); if (currentPart === PARTS.length - 1) { nextBtn.textContent = '⟢ Hoàn tất ⟢'; document.getElementById('endSection').style.display = 'block'; } else { nextBtn.textContent = 'Xem tiếp →'; document.getElementById('endSection').style.display = 'none'; } } function nextPart() { if (currentPart < PARTS.length - 1) { currentPart++; renderPart(); scrollPartIntoView(); } else { scrollToCTA(); } } function prevPart() { if (currentPart > 0) { currentPart--; renderPart(); scrollPartIntoView(); } } function scrollPartIntoView() { const card = document.querySelector('.part-card'); if (card) { const rect = card.getBoundingClientRect(); const top = rect.top + window.pageYOffset - 80; try { window.scrollTo({ top: top, behavior: 'smooth' }); } catch(e) { window.scrollTo(0, top); } } } function scrollToCTA() { const cta = document.querySelector('.cta'); if (cta) { const rect = cta.getBoundingClientRect(); const top = rect.top + window.pageYOffset - 30; try { window.scrollTo({ top: top, behavior: 'smooth' }); } catch(e) { window.scrollTo(0, top); } } } function startQuiz() { currentQ = 0; answers = []; document.getElementById('view-article').classList.remove('active'); document.getElementById('view-quiz').classList.add('active'); renderQuestion(); scrollToTop(); } function backToArticle() { document.getElementById('view-quiz').classList.remove('active'); document.getElementById('view-result').classList.remove('active'); document.getElementById('view-article').classList.add('active'); scrollToTop(); } function renderQuestion() { answered = false; const q = QUESTIONS[currentQ]; const total = QUESTIONS.length; document.getElementById('progressFill').style.width = ((currentQ) / total * 100) + '%'; document.getElementById('qNumDisplay').textContent = currentQ + 1; document.getElementById('qLabel').textContent = 'Câu ' + (currentQ + 1); document.getElementById('qText').innerHTML = q.text; const letters = ['A', 'B', 'C', 'D']; document.getElementById('qOptions').innerHTML = q.options.map((opt, i) => ` <button class="opt-btn" data-idx="${i}" onclick="selectAnswer(${i})"> <span class="opt-letter">${letters[i]}</span>${opt} </button> `).join(''); const explain = document.getElementById('qExplain'); explain.classList.remove('visible', 'is-correct', 'is-wrong'); explain.innerHTML = ''; document.getElementById('nextBtn').classList.remove('visible'); document.getElementById('nextBtn').textContent = (currentQ === QUESTIONS.length - 1) ? '⟢ Xem kết quả ⟢' : 'Câu tiếp →'; } function selectAnswer(idx) { if (answered) return; answered = true; const q = QUESTIONS[currentQ]; const isCorrect = idx === q.correct; answers.push({ correct: isCorrect }); document.querySelectorAll('.opt-btn').forEach((btn, i) => { btn.disabled = true; if (i === q.correct) btn.classList.add('correct'); else if (i === idx) btn.classList.add('wrong'); else btn.classList.add('dimmed'); }); const explain = document.getElementById('qExplain'); explain.innerHTML = `<span class="verdict">${isCorrect ? '✓ Chính xác' : '✕ Chưa đúng'}</span><br>${q.explain}`; explain.classList.add('visible'); explain.classList.add(isCorrect ? 'is-correct' : 'is-wrong'); document.getElementById('nextBtn').classList.add('visible'); document.getElementById('progressFill').style.width = ((currentQ + 1) / QUESTIONS.length * 100) + '%'; } function nextQuestion() { if (currentQ < QUESTIONS.length - 1) { currentQ++; renderQuestion(); scrollToTop(); } else { showResult(); } } function showResult() { let totalCorrect = 0; answers.forEach(a => { if (a.correct) totalCorrect++; }); document.getElementById('finalScore').textContent = totalCorrect; let title, msg; if (totalCorrect === 10) { title = 'Toàn <em>thập</em>!'; msg = 'Hoàn hảo. Bạn đã nắm vững hai quy tắc vàng và lộ trình 5 giai đoạn học Bát Tự. Giờ là lúc bắt tay vào Giai đoạn 1 — đọc tài liệu Kiến thức cơ bản và thực hành với công cụ 8THT.'; } else if (totalCorrect >= 8) { title = 'Xuất <em>sắc</em>'; msg = 'Bạn đã nắm được lộ trình chính. Vài câu sai chỉ là chi tiết về mục tiêu/khái niệm từng giai đoạ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 I (hai quy tắc vàng) và Giai đoạn 1 — đây là nền tảng tư duy quan trọng nhất.'; } else if (totalCorrect >= 4) { title = 'Còn <em>chỗ trống</em>'; msg = 'Nền tảng chưa vững. Khuyến nghị: đọc lại sáu phần, ghi nhớ hai quy tắc vàng (Quyền-Tiền-Trí + Quyền lực không chia đều) và mục tiêu của từng giai đoạn.'; } 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 bài, ghi nhớ năm giai đoạn theo thứ tự: Lực lượng → Liên minh → Cách cục → Thắng bại → Áp dụng.'; } 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({ ltC4Height: 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: 3700px !important; min-height: 3700px !important; max-height: none !important; border: 0 !important; display: block !important; background: transparent !important; margin: 0 !important; padding: 0 !important;" title="Chương 4 — Bản Đồ Khám Phá Bát Tự - Hoàng Trung"> </iframe> </div> <script> (function() { var IFRAME_ID = 'lt-c4-frame'; var INITIAL_H = 3700; var currentH = INITIAL_H; var heightsByView = {}; var currentViewId = 'view-article-p0'; function applyH(h) { var f = document.getElementById(IFRAME_ID); if (!f) return; var newH = h + 50; if (newH < 200) return; if (newH === currentH) return; currentH = newH; f.style.setProperty('height', newH + 'px', 'important'); f.style.setProperty('min-height', newH + 'px', 'important'); f.style.setProperty('max-height', 'none', 'important'); f.setAttribute('height', newH); var parent = f.parentElement; while (parent && parent !== document.body) { var cs = window.getComputedStyle(parent); if (cs.maxHeight !== 'none' && cs.maxHeight !== '' && parseInt(cs.maxHeight) < newH) parent.style.setProperty('max-height', 'none', 'important'); if (cs.overflow === 'hidden') parent.style.setProperty('overflow', 'visible', 'important'); parent = parent.parentElement; } } function setH(h, viewId) { if (!h || h < 100) return; if (viewId) { if (!heightsByView[viewId] || h > heightsByView[viewId]) heightsByView[viewId] = h; currentViewId = viewId; } var targetH = heightsByView[currentViewId] || h; applyH(targetH); } window.addEventListener('message', function(e) { if (e && e.data && typeof e.data.ltC4Height === 'number') setH(e.data.ltC4Height, e.data.viewId); }); function pollHeight() { var f = document.getElementById(IFRAME_ID); if (!f || !f.contentWindow) return; try { var doc = f.contentWindow.document; if (doc) { var app = doc.querySelector('.app'); var activeView = doc.querySelector('.view.active'); var viewId = activeView ? activeView.id : ''; var h; if (app) { var rect = app.getBoundingClientRect(); var appTop = rect.top + (f.contentWindow.pageYOffset || doc.documentElement.scrollTop); h = Math.ceil(appTop + app.scrollHeight + 40); } else if (doc.body) { h = Math.max(doc.body.scrollHeight, doc.body.offsetHeight, doc.documentElement.scrollHeight, doc.documentElement.offsetHeight); } if (h) setH(h, viewId); } } catch(e) {} } function breakParents() { var f = document.getElementById(IFRAME_ID); if (!f) return; var parent = f.parentElement; while (parent && parent !== document.body) { var cs = window.getComputedStyle(parent); if (cs.maxHeight !== 'none' && cs.maxHeight !== '' && parseInt(cs.maxHeight) < INITIAL_H) parent.style.setProperty('max-height', 'none', 'important'); if (cs.overflow === 'hidden') parent.style.setProperty('overflow', 'visible', 'important'); parent = parent.parentElement; } } breakParents(); [100, 500, 1000, 2000, 4000, 7000, 11000].forEach(function(t) { setTimeout(function() { breakParents(); pollHeight(); }, t); }); setInterval(pollHeight, 800); window.addEventListener('resize', pollHeight); window.addEventListener('load', pollHeight); })(); </script> <!-- End of CHƯƠNG 4 -->
