/* Phòng kỷ niệm: cây bạch dương đại thụ trên đồi. Ảnh học viên là những "quả" trên tán cây. */
.kn { position: relative; overflow: hidden; background: #6fb1e8; isolation: isolate; }
.kn::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: #6fb1e8 var(--plate) center / cover; filter: blur(26px) saturate(1.1); }
.kn-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.kn-stage { --mx: 0; --my: 0; position: relative; margin: 0 auto; width: min(100%, calc((100svh - 64px) * 16 / 9)); aspect-ratio: 16 / 9; container-type: inline-size; overflow: hidden; }
.kn-plate, .kn-fruits, .kn-fx { position: absolute; inset: 0; }
.kn-plate { width: 100%; height: 100%; display: block; object-fit: cover; transform: translate(calc(var(--mx) * -5px), calc(var(--my) * -4px)) scale(1.04); transition: transform .5s cubic-bezier(.2, .7, .2, 1); user-select: none; -webkit-user-drag: none; }
.kn-fruits { transform: translate(calc(var(--mx) * -10px), calc(var(--my) * -8px)) scale(1.04); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.kn-fx { pointer-events: none; transform: translate(calc(var(--mx) * -18px), calc(var(--my) * -12px)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.kn-glow { position: absolute; inset: 0; background: radial-gradient(48cqw 30cqw at 24% 14%, rgba(255, 246, 196, .55), rgba(255, 246, 196, 0) 70%); mix-blend-mode: screen; animation: knGlow 7s ease-in-out infinite alternate; }
@keyframes knGlow { from { opacity: .55; } to { opacity: 1; } }
.kn-title { position: absolute; z-index: 3; left: 3cqw; top: 3cqw; margin: 0; font: 500 3.9cqw/1.02 var(--serif, Literata, Georgia, serif); letter-spacing: -.012em; color: #123a55; text-shadow: 0 0 1.8cqw rgba(255, 255, 255, .95), 0 0 .5cqw rgba(255, 255, 255, .9); pointer-events: none; }
.kn-title small { display: block; margin-top: .9cqw; font: 600 1.05cqw/1 var(--sans, "Be Vietnam Pro", sans-serif); letter-spacing: .22em; text-transform: uppercase; color: #1e7a2f; text-shadow: none; }

.kn-fx i { position: absolute; border-radius: 50%; background: radial-gradient(circle, #fffbe0 0 35%, rgba(255, 226, 130, .0) 72%); box-shadow: 0 0 .9cqw .35cqw rgba(255, 232, 140, .55); opacity: 0; animation: knMote var(--t, 12s) linear var(--d, 0s) infinite; }
@keyframes knMote { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .95; } 60% { opacity: .8; } 100% { transform: translate(var(--dx, 3cqw), -9cqw); opacity: 0; } }
.kn-fx b { position: absolute; width: 1.5cqw; height: .8cqw; border-radius: 100% 0 100% 0; background: #9ed25a; opacity: 0; animation: knFall var(--t, 18s) ease-in-out var(--d, 0s) infinite; }
@keyframes knFall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .95; } 25% { transform: translate(3cqw, 6cqw) rotate(120deg); } 50% { transform: translate(-1cqw, 14cqw) rotate(240deg); } 75% { transform: translate(4cqw, 21cqw) rotate(360deg); opacity: .9; } 100% { transform: translate(1cqw, 27cqw) rotate(470deg); opacity: 0; } }

.kn-fr { position: absolute; width: 4.8cqw; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: 50% 0; z-index: 4; opacity: 0; animation: knPop .7s cubic-bezier(.2, 1.5, .4, 1) var(--pd, 0s) forwards, knSway var(--o, 5s) ease-in-out var(--d, 0s) infinite alternate; }
.kn-fr img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: .3cqw solid #fff8dc; box-shadow: 0 0 0 .14cqw rgba(214, 160, 40, .9), 0 .3cqw .8cqw rgba(20, 60, 20, .45), 0 0 1.5cqw .3cqw rgba(255, 214, 110, .75); transition: transform .25s, box-shadow .25s; background: #fff; }
.kn-fr::before { content: ""; position: absolute; left: 64%; top: -4%; width: 26%; height: 26%; background: linear-gradient(135deg, #b7e26b, #4f9a46); border-radius: 100% 0 100% 0; transform: rotate(-35deg); z-index: 1; pointer-events: none; }
.kn-fr::after { content: attr(data-n); position: absolute; left: 50%; top: calc(100% + .4cqw); transform: translateX(-50%) translateY(4px); white-space: nowrap; background: #13293d; color: #fff; padding: .45cqw 1.1cqw; border-radius: 99px; font: 600 1.05cqw/1.2 var(--sans, sans-serif); opacity: 0; pointer-events: none; transition: .2s; z-index: 6; }
.kn-fr:hover, .kn-fr:focus-visible { z-index: 8; outline: none; animation-play-state: running, paused; }
.kn-fr:hover img, .kn-fr:focus-visible img { transform: scale(1.5); box-shadow: 0 0 0 .18cqw #f28a2e, 0 .6cqw 1.6cqw rgba(0, 30, 10, .5), 0 0 2.4cqw .6cqw rgba(255, 214, 110, .9); }
.kn-fr:hover::after, .kn-fr:focus-visible::after { opacity: 1; transform: translateX(-50%); top: calc(100% + 2.6cqw); }
.kn-fr:focus-visible img { outline: 3px solid #f28a2e; outline-offset: 3px; }
@keyframes knPop { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }
@keyframes knSway { from { rotate: -1.8deg; } to { rotate: 1.8deg; } }

dialog.kn-card { border: 0; padding: 0; background: transparent; max-width: min(94vw, 560px); max-height: 96svh; overflow: visible; margin: auto; }
dialog.kn-card::backdrop { background: rgba(10, 30, 50, .78); backdrop-filter: blur(3px); }
.kn-card .pic { display: block; width: 100%; max-height: calc(96svh - 70px); height: auto; margin: 0 auto; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); background: #efe2c4; min-height: 180px; object-fit: contain; }
.kn-card .acts { display: flex; gap: 8px; margin-top: 12px; }
.kn-card .acts button { flex: 1; min-height: 46px; border: 0; color: #fff; font: 600 .9375rem var(--sans); cursor: pointer; transition: transform .15s; }
.kn-card .acts .save { background: var(--ink, #13293d); }
.kn-card .acts .share { background: var(--green, #1e7a2f); }
.kn-card .acts .close { flex: 0 0 auto; padding: 0 18px; background: rgba(255, 255, 255, .92); color: #13293d; }
.kn-card .acts button:hover { transform: translateY(-2px); }
.kn-card .acts button:focus-visible { outline: 3px solid var(--orange, #f28a2e); outline-offset: 2px; }
.kn-card .acts button[hidden] { display: none; }
.kn-wait { color: #fff; font: 600 1rem var(--sans); text-align: center; padding: 60px 0; }

.kn-tail { padding: 18px var(--m, 24px) var(--section, 40px); }

@media (max-width: 760px) {
  .kn-stage { width: 920px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kn-glow, .kn-fx i, .kn-fx b, .kn-fr { animation: none !important; opacity: 1; }
  .kn-fx i, .kn-fx b { opacity: 0; }
  .kn-plate, .kn-fruits, .kn-fx { transition: none; }
}