/* Bản đồ khám phá 3D (guide.js): mặt cắt khu rừng, camera bay theo cuộn / kéo */
.gd { position: fixed; inset: 0; z-index: 3000; overflow: hidden; color: #3d2a12; font-family: Inter, "Segoe UI", system-ui, sans-serif; background: #bfe7d2; animation: gd-in .5s ease both; touch-action: none; user-select: none; -webkit-user-select: none; }
.gd.closing { opacity: 0; transition: opacity .25s; }
.gd.drag { cursor: grabbing; }
@keyframes gd-in { from { opacity: 0; } to { opacity: 1; } }

.gd-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky1, #bfe7d2), var(--sky2, #f9f3da)); }
.gd-sun { position: absolute; right: 12%; top: 6%; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 190, .95), rgba(255, 246, 190, 0) 68%); opacity: var(--sun, .3); }
.gd-view { position: absolute; inset: 0; perspective: 1200px; overflow: hidden; }
.gd-cam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.gd-l { position: absolute; left: 0; top: 0; }
.gd-l svg { display: block; overflow: visible; }

/* Đất (mặt cắt) */
.gd-soil { width: 7000px; height: 1800px; background:
  radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .06) 0 2px, transparent 3px) 0 0 / 46px 46px,
  radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .12) 0 3px, transparent 4px) 0 0 / 64px 64px,
  linear-gradient(180deg, #6a4526 0%, #4a2f18 38%, #2a1a0e 100%); }
.gd-soil::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 160px; background: linear-gradient(180deg, rgba(120, 190, 90, .25), transparent); }

/* Cây */
.gd-tree { filter: none; }
.gd-myc { fill: none; stroke: #ffd877; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 5 16; animation: gd-dash 7s linear infinite; opacity: calc(.25 + var(--glow, .4) * .75); }
.gd-myc.thin { stroke-width: 1.6; animation-duration: 9s; }
@keyframes gd-dash { to { stroke-dashoffset: -210; } }
.gd-weblayer { opacity: var(--web, .5); }
.gd-link { fill: none; stroke-linecap: round; animation: gd-dash 9s linear infinite; }
.gd-link.under { stroke: #ffd877; stroke-width: 3.2; stroke-dasharray: 6 14; }
.gd-link.air { stroke: rgba(255, 252, 220, .9); stroke-width: 3; stroke-dasharray: 2 12; }
.gd-pulse { fill: #fff3b0; } .gd-pulse.gold { fill: #ffd24a; }
.gd-leaf { transform-box: fill-box; transform-origin: 0% 50%; animation: gd-sway 5s ease-in-out infinite; }
@keyframes gd-sway { 0%, 100% { rotate: -5deg; } 50% { rotate: 7deg; } }
.gd-fruit { fill: #f6c445; stroke: rgba(255, 255, 255, .8); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: gd-twk 3.2s ease-in-out infinite; }
@keyframes gd-twk { 0%, 100% { scale: .75; } 50% { scale: 1.25; } }
.gd-rays { opacity: var(--sun, .3); }
.gd-blade:nth-child(3n) { transform-box: fill-box; transform-origin: 50% 100%; animation: gd-grass 4s ease-in-out infinite alternate; }
@keyframes gd-grass { from { rotate: -6deg; } to { rotate: 7deg; } }
.gd-far { pointer-events: none; }
.gd-fg { pointer-events: none; }

/* Chấm đánh dấu từng chặng trên cây */
.gd-mk { cursor: pointer; outline: none; }
.gd-mk .dot { fill: #f6c445; stroke: #fff; stroke-width: 4; transition: fill .3s; }
.gd-mk .ring { fill: none; stroke: rgba(255, 232, 150, .9); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: gd-ring 2.4s ease-out infinite; }
.gd-mk .num { font: 800 22px Inter, sans-serif; fill: #4a2f10; }
.gd-mk .lab { font: 800 28px Inter, sans-serif; fill: #fff; stroke: rgba(40, 25, 10, .75); stroke-width: 7px; paint-order: stroke; }
.gd-mk.on .dot { fill: #7fd36a; }
.gd-mk:focus-visible .dot { stroke: #2f8a4b; }
@keyframes gd-ring { from { scale: .8; opacity: 1; } to { scale: 1.7; opacity: 0; } }

/* Mây, đom đóm / bào tử */
.gd-clouds { position: absolute; left: 0; top: 0; }
.gd-clouds i { position: absolute; height: 130px; border-radius: 70px; background: rgba(255, 255, 255, .6); filter: blur(22px); animation: gd-cloud 120s linear infinite; }
@keyframes gd-cloud { from { translate: -300px 0; } to { translate: 500px 0; } }
.gd-flies { position: absolute; left: 0; top: 0; transform-style: preserve-3d; pointer-events: none; }
.gd-flies i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle, #fff7b8, #ffd24a 55%, transparent 72%); box-shadow: 0 0 14px 5px rgba(255, 214, 90, .5); opacity: var(--glow, .4); animation-name: gd-drift, gd-twk; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
@keyframes gd-drift { to { translate: var(--dx) var(--dy); } }

/* Bảng nội dung */
.gd-panel { position: absolute; top: 50%; translate: 0 -50%; z-index: 4; width: min(580px, 92vw); max-height: 84vh; display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 22px; background: rgba(255, 251, 240, .93); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .85); border-radius: 26px; box-shadow: 0 24px 60px rgba(40, 25, 10, .35), inset 0 1px 0 #fff; will-change: transform, opacity; user-select: text; -webkit-user-select: text; touch-action: pan-y; }
.gd-panel.side-left { left: clamp(16px, 5vw, 80px); } .gd-panel.side-right { right: clamp(56px, 6vw, 110px); }
.gd-kick { font-size: 12px; font-weight: 800; letter-spacing: .8px; color: #b5651d; }
.gd-panel h2 { margin: 0; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.22; color: #2c4a1f; }
.gd-lead { margin: 0; line-height: 1.65; color: #5d4b32; font-size: 15.5px; }
.gd-body { overflow-y: auto; min-height: 0; display: grid; gap: 14px; padding-right: 4px; scrollbar-width: thin; }
.gd-body h4 { margin: 0; font-size: 15px; }
.gd-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gd-trio-i { padding: 12px; border-radius: 16px; display: grid; gap: 4px; font-size: 13.5px; line-height: 1.5; background: #fff; border: 1px solid #ece3cf; }
.gd-trio-i b { font-size: 14px; } .gd-trio-i.root b { color: #8a5a2e; } .gd-trio-i.trunk b { color: #b5651d; } .gd-trio-i.leaf b { color: #2f8a4b; }
.gd-tip { margin: 0; padding: 11px 14px; background: #fff6d8; border: 1px solid #f0dc9a; border-radius: 14px; font-size: 14px; line-height: 1.55; color: #6b4a1a; }
.gd-quote { margin: 4px 0 0; text-align: center; font: italic 700 22px Cambria, "Times New Roman", "Noto Serif", serif; color: #2f8a4b; }
.gd-steps-w { display: grid; gap: 8px; }
.gd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gd-steps li { display: flex; gap: 12px; align-items: flex-start; }
.gd-steps i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; background: #dff0cf; color: #2f6a3a; }
.gd-steps b { display: block; font-size: 14.5px; } .gd-steps span { display: block; font-size: 13.5px; line-height: 1.55; color: #6b5a40; }
.gd-cards { display: grid; gap: 10px; }
.gd-card { padding: 13px 15px; border-radius: 16px; background: #fff; border: 1px solid #ece3cf; box-shadow: 0 2px 0 #eadfc6; }
.gd-card h4 { font-size: 15.5px; } .gd-card p { margin: 3px 0 6px; font-size: 13.5px; color: #6b5a40; }
.gd-card ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.5; }
.gd-next, .gd-cta { justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 800; padding: 11px 22px; border-radius: 999px; color: #fff; background: linear-gradient(180deg, #4faa5c, #2f8a4b); box-shadow: 0 3px 0 #226b39, 0 8px 16px rgba(47, 138, 75, .35); }
.gd-next:hover, .gd-cta:hover { filter: brightness(1.06); }
.gd-cta { font-size: 16px; padding: 13px 28px; background: linear-gradient(180deg, #f2b84a, #d8902a); box-shadow: 0 3px 0 #a86a18, 0 8px 16px rgba(216, 144, 42, .4); }

/* Điều khiển */
.gd-top { position: absolute; top: 0; left: 0; right: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; pointer-events: none; }
.gd-top > * { pointer-events: auto; }
.gd-title { display: grid; color: #fff; text-shadow: 0 2px 10px rgba(30, 20, 10, .6); } .gd-title b { font-size: 17px; } .gd-title small { opacity: .9; }
.gd-tools { display: flex; gap: 8px; }
.gd-tool, .gd-close { border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 13.5px; color: #3d2a12; background: rgba(255, 251, 240, .92); padding: 9px 15px; border-radius: 999px; box-shadow: 0 2px 10px rgba(30, 20, 10, .25); }
.gd-close { width: 40px; height: 40px; padding: 0; font-size: 17px; }
.gd-tool:hover, .gd-close:hover { background: #fff; }
.gd-dots { position: absolute; right: 16px; top: 50%; translate: 0 -50%; z-index: 6; display: grid; gap: 16px; }
.gd-dot { position: relative; width: 16px; height: 16px; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid #fff; background: rgba(60, 40, 20, .45); box-shadow: 0 0 0 2px rgba(30, 20, 10, .25); transition: transform .25s, background .25s; }
.gd-dot.on { background: #f6c445; transform: scale(1.35); }
.gd-dot span { position: absolute; right: 26px; top: 50%; translate: 0 -50%; white-space: nowrap; font-size: 12.5px; font-weight: 700; color: #fff; background: rgba(40, 25, 10, .72); padding: 4px 10px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.gd-dot:hover span, .gd-dot.on span { opacity: 1; }
.gd-arrows { position: absolute; right: 16px; bottom: 16px; z-index: 6; display: grid; gap: 8px; }
.gd-arrows button { width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer; font-size: 14px; color: #3d2a12; background: rgba(255, 251, 240, .92); box-shadow: 0 2px 10px rgba(30, 20, 10, .25); }
.gd-arrows button:disabled { opacity: .35; cursor: default; }
.gd-hint { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; z-index: 6; display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 600; background: rgba(40, 25, 10, .62); transition: opacity .4s; pointer-events: none; }
.gd-hint.gone { opacity: 0; }
.gd-hint .mouse { width: 16px; height: 24px; border: 2px solid #fff; border-radius: 9px; position: relative; flex: none; }
.gd-hint .mouse::after { content: ''; position: absolute; left: 50%; top: 4px; width: 3px; height: 6px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: gd-wheel 1.4s ease-in-out infinite; }
@keyframes gd-wheel { 0% { translate: 0 0; opacity: 1; } 100% { translate: 0 8px; opacity: 0; } }

/* Dạng danh sách (đọc liền, in, hoặc cho người không muốn hiệu ứng) */
.gd.flat { overflow-y: auto; background: #fdfcf9; touch-action: auto; }
.gd.flat .gd-view, .gd.flat .gd-sky, .gd.flat .gd-dots, .gd.flat .gd-arrows, .gd.flat .gd-hint { display: none; }
.gd.flat .gd-top { position: sticky; background: #2f8a4b; padding: 12px 18px; }
.gd.flat .gd-panel { position: relative; inset: auto; translate: none; transform: none !important; opacity: 1 !important; visibility: visible !important; filter: none !important; pointer-events: auto !important; width: min(780px, 92vw); max-height: none; margin: 22px auto; }
.gd.flat .gd-body { overflow: visible; }

@media (max-width: 860px) {
  .gd-panel, .gd-panel.side-left, .gd-panel.side-right { left: 0; right: 0; top: auto; bottom: 0; translate: 0 0; width: auto; max-height: 58vh; border-radius: 24px 24px 0 0; padding: 18px 18px 16px; }
  .gd-trio { grid-template-columns: 1fr; }
  .gd-dots { top: 90px; translate: 0 0; gap: 10px; } .gd-dot span { display: none; }
  .gd-arrows { display: none; } .gd-hint { bottom: auto; top: 64px; font-size: 12px; }
  .gd-title small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gd, .gd * { animation: none !important; transition: none !important; }
}

/* Báo "còn nội dung bên dưới": mờ nhẹ ở đáy bảng khi cần cuộn */
.gd-body:not(.end) { -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
.gd.flat .gd-body { -webkit-mask-image: none; mask-image: none; }

/* ===== Tối ưu độ mượt: chỉ hiệu ứng chạy bằng GPU (transform / opacity), không vẽ lại ảnh lớn mỗi khung hình ===== */
.gd-myc, .gd-link, .gd-leaf, .gd-fruit, .gd-blade { animation: none !important; }
.gd-myc { opacity: .85; } .gd-weblayer { opacity: .5; }
.gd-link.under { stroke-dasharray: 6 12; }
.gd-panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 251, 240, .97); }
.gd-clouds i { filter: none; height: 170px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%); }
.gd-soil { background: linear-gradient(180deg, #6a4526 0%, #4a2f18 38%, #2a1a0e 100%), radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .06) 0 2px, transparent 3px) 0 0 / 46px 46px; background-blend-mode: normal; }
.gd-soil::before { display: none; }
.gd-mycglow { pointer-events: none; } .gd-mycglow i { display: block; width: 1900px; height: 1100px; background: radial-gradient(ellipse at 50% 0%, rgba(255, 214, 120, .28), rgba(255, 214, 120, 0) 60%); }
.gd-raysdiv { pointer-events: none; } .gd-raysdiv i { display: block; width: 1120px; height: 1250px; background: repeating-linear-gradient(105deg, rgba(255, 248, 200, .2) 0 70px, rgba(255, 248, 200, 0) 70px 190px); -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%); }
.gd-tree.sway { transform-origin: 50% 62.5%; animation: gd-tree-sway 12s ease-in-out infinite alternate !important; will-change: transform; }
@keyframes gd-tree-sway { from { rotate: -.35deg; } to { rotate: .35deg; } }
.gd-weblayer .gd-web { animation: gd-breathe 5s ease-in-out infinite alternate; will-change: opacity; }
@keyframes gd-breathe { from { opacity: .72; } to { opacity: 1; } }

/* Dòng sông chảy nhẹ dưới rễ cây, hạt mầm trôi theo dòng */
.gd-river { width: 7000px; height: 280px; pointer-events: none; }
.gd-river-in { position: relative; width: 7000px; height: 280px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent); }
.rv { position: absolute; top: 0; height: 100%; }
.rv.base { left: 0; width: 100%; background: linear-gradient(180deg, rgba(31, 107, 134, 0) 0%, #2f95ad 24%, #3ba9bb 50%, #1f6f8a 82%, rgba(20, 70, 90, 0) 100%); }
.rv.w1 { left: 0; width: 7320px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='70'%3E%3Cpath d='M0 35 Q80 8 160 35 T320 35' fill='none' stroke='white' stroke-opacity='.5' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") repeat 0 12px / 320px 70px; animation: gd-flow1 22s linear infinite; }
.rv.w2 { left: 0; width: 7320px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='56'%3E%3Cpath d='M0 28 Q55 6 110 28 T220 28' fill='none' stroke='%23bff3ff' stroke-opacity='.4' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat 0 34px / 220px 56px; animation: gd-flow2 15s linear infinite; }
.rv.sp { left: 0; width: 7560px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='280'%3E%3Cg fill='white'%3E%3Cellipse cx='40' cy='60' rx='14' ry='2' opacity='.8'/%3E%3Cellipse cx='210' cy='150' rx='18' ry='2.4' opacity='.7'/%3E%3Cellipse cx='380' cy='90' rx='10' ry='2' opacity='.8'/%3E%3Cellipse cx='460' cy='210' rx='16' ry='2.2' opacity='.6'/%3E%3Cellipse cx='120' cy='230' rx='12' ry='2' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") repeat 0 0 / 520px 280px; animation: gd-flow3 30s linear infinite; opacity: .9; }
@keyframes gd-flow1 { to { translate: -320px 0; } } @keyframes gd-flow2 { to { translate: -220px 0; } } @keyframes gd-flow3 { to { translate: -520px 0; } }
.seed { position: absolute; width: 16px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3b0, #f6c445 70%); box-shadow: 0 0 14px 4px rgba(255, 214, 90, .55); animation-name: gd-seed, gd-bob; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite; animation-direction: normal, alternate; }
.seed::after { content: ''; position: absolute; left: 6px; top: -9px; width: 8px; height: 12px; border-radius: 80% 0 80% 0; background: #7fd36a; rotate: -20deg; }
@keyframes gd-seed { from { translate: -700px 0; } to { translate: 900px 0; } } @keyframes gd-bob { from { rotate: -10deg; } to { rotate: 10deg; } }
.gd-knot { fill: #ffe08a; opacity: .9; }

/* ===== Bàn tay nắm kéo + mượt hơn ===== */
.gd { cursor: grab; } .gd.drag { cursor: grabbing; }
.gd.drag * { cursor: grabbing !important; }
.gd-panel { cursor: default; } .gd button, .gd-dot, .gd-mk { cursor: pointer; } .gd-panel .gd-body { cursor: auto; }
.gd-l { will-change: transform; backface-visibility: hidden; }
.gd-river-in { -webkit-mask-image: none; mask-image: none; }
.gd-river-in::before, .gd-river-in::after { content: ''; position: absolute; left: 0; right: 0; height: 70px; z-index: 3; pointer-events: none; }
.gd-river-in::before { top: 0; background: linear-gradient(180deg, #4a2f18, rgba(74, 47, 24, 0)); } .gd-river-in::after { bottom: 0; background: linear-gradient(0deg, #2a1a0e, rgba(42, 26, 14, 0)); }
.gd-river, .gd-river-in { height: 300px; }
/* Tự hạ chất lượng khi máy yếu */
.gd.low .gd-flies, .gd.low .gd-clouds, .gd.low .rv.sp, .gd.low .rv.w2, .gd.low .gd-far.fx { display: none; }
.gd.low .gd-tree.sway { animation: none !important; }
.gd.lowest .nb2, .gd.lowest .gd-fg, .gd.lowest .gd-raysdiv, .gd.lowest .seed, .gd.lowest .gd-weblayer .gd-web { display: none; }
.gd.lowest .rv.w1 { animation: none; }

.sky-s { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.gd-sky { background: #bfe7d2; }