@charset "utf-8";

@font-face {
  font-family: "SVN Gang of Three";
  src: url("../../assets/svn-gang-of-three.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --recap-red: #a93218;
  --recap-deep-red: #7d2414;
  --recap-gold: #f3ae24;
  --recap-amber: #d37a09;
  --recap-cream: #fff1bd;
}

body,
.gl-info {
  font-family: Arial, "Helvetica Neue", sans-serif;
}

#glworld { background: #f7c758; }
#glworld::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 50% 14%, rgba(255,238,163,.28), transparent 38%), linear-gradient(135deg, rgba(255,187,44,.13), rgba(192,66,21,.07));
  mix-blend-mode: color;
}

.gl-info-0,
.gl-info-ring,
.gl-info-ring-L,
.gl-info-ring-R,
.gl-info-block,
.gl-info-6,
.gl-info-6b { letter-spacing: 0; }

.gl-info-0,
.gl-info-ring,
.gl-info-ring-L,
.gl-info-ring-R,
.gl-info-6b,
.gl-hp-btn,
.gl-pageNumIn,
.gl-loadingIn { color: var(--recap-deep-red); }

.gl-scroll-btn,
.gl-hp-btnCircle,
.gl-page-sl { background-color: var(--recap-amber); }
.gl-hp-btn span::after { background: var(--recap-amber); }

.gl-scroll-btn,
.gl-hp-btn,
.gl-pageNum { font-family: Arial, "Helvetica Neue", sans-serif; }
.gl-scroll-btn { box-shadow: 0 10px 30px rgba(117,49,4,.24); }
.gl-pageNum { border-color: rgba(173,89,8,.24); background: rgba(255,245,211,.9); }

.gl-info-ring,
.gl-info-ring-L,
.gl-info-ring-R,
.gl-info-0,
.gl-info-6b {
  filter: drop-shadow(0 0 20px rgba(255,240,176,.95));
  text-shadow: 0 0 16px rgba(255,244,205,.82);
}

.gl-info-ringSpan,
.recap-ring-number {
  font-family: "SVN Gang of Three", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
}
.gl-info-ringSpan { font-size: 1.72em; line-height: .85; }
.recap-ring-number { display: inline-block; font-size: 2.35em; line-height: .7; color: var(--recap-red); }

.recap-info-title {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 8vw;
  font-family: "SVN Gang of Three", Arial, sans-serif;
  font-size: clamp(60px, 6vw, 114px);
  font-style: normal;
  font-weight: 400;
  letter-spacing: .005em;
  line-height: .86;
  white-space: nowrap;
}
.recap-info-title > span:first-child { position: relative; z-index: 2; display: inline-block; text-shadow: 0 5px 0 rgba(117,43,11,.1); }

.recap-em,
.recap-copy b,
.recap-final-number {
  display: inline-block;
  font-family: "SVN Gang of Three", Arial, sans-serif;
  font-weight: 400;
  color: var(--recap-cream);
  text-shadow: 0 4px 0 rgba(116,46,5,.16);
}
.recap-em { margin-right: .12em; font-size: 1.82em; letter-spacing: .015em; line-height: .72; }
.recap-copy { line-height: 2.05em; }
.recap-copy b { margin-right: .08em; font-size: 1.55em; letter-spacing: .01em; line-height: .7; }
.recap-final-number { font-size: 2.25em; letter-spacing: .015em; line-height: .72; }

.gl-glow1,
.gl-glow2,
.gl-glow3,
.gl-glow4,
.gl-glow5,
.gl-info-6 { filter: drop-shadow(1px 3px 7px rgba(132,50,9,.38)); text-shadow: 0 0 15px rgba(255,209,82,.24); }

.recap-scene-art {
  position: absolute !important;
  z-index: 1 !important;
  top: -2.3vw;
  right: 10vw;
  display: block !important;
  width: clamp(200px, 20vw, 380px);
  height: clamp(155px, 14vw, 270px);
  transform: none !important;
  pointer-events: none;
}
.recap-scene-art img { position: absolute; display: block; object-fit: contain; filter: drop-shadow(0 15px 18px rgba(94,35,8,.22)); }
.recap-art-rabbits { right: 0; bottom: 0; width: 93%; height: 78%; }
.recap-art-lantern { top: -4%; right: 5%; width: 22%; height: 55%; animation: recap-lantern-sway 3.8s ease-in-out infinite alternate; transform-origin: 50% 0; }
.recap-art-target { right: 0; bottom: 0; width: 69%; height: 92%; animation: recap-target-float 3s ease-in-out infinite alternate; }
.recap-art-skewer { right: 40%; bottom: -5%; width: 48%; height: 74%; transform: rotate(-18deg); }
.recap-art-cake { width: 42%; height: 56%; }
.recap-art-cake-whole { right: 26%; bottom: 2%; }
.recap-art-cake-left { top: 3%; right: 50%; transform: rotate(-17deg); }
.recap-art-cake-right { top: 2%; right: 9%; transform: rotate(16deg); }
.recap-art-cake-burnt { right: -5%; bottom: 0; width: 28%; height: 38%; opacity: .88; }
.recap-art-moon { right: 2%; bottom: -2%; width: 72%; height: 92%; }
.recap-art-hang-nga { right: 21%; bottom: -4%; width: 55%; height: 100%; animation: recap-hang-nga-float 2.8s ease-in-out infinite alternate; }
.recap-art-mooncake { right: 2%; bottom: 7%; width: 24%; height: 31%; }
.recap-art-children { right: 0; bottom: -2%; width: 92%; height: 70%; }
.recap-art-gift { top: 0; right: 3%; width: 35%; height: 54%; animation: recap-gift-float 2.6s ease-in-out infinite alternate; }

.recap-cuoi-runner {
  position: fixed;
  z-index: 3;
  bottom: 1.5vh;
  left: -180px;
  width: clamp(105px, 9vw, 155px);
  aspect-ratio: 1;
  pointer-events: none;
  background-image: url("../../assets/recap-generated/characters/cuoi-celebration-loop-sheet-v1.webp");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  filter: drop-shadow(0 11px 10px rgba(95,40,9,.23));
  animation: recap-cuoi-frames .72s step-end infinite, recap-cuoi-cross 16s linear infinite;
}

@keyframes recap-cuoi-frames {
  0% { background-position: 0 0; }
  12.5% { background-position: 33.333% 0; }
  25% { background-position: 66.666% 0; }
  37.5% { background-position: 100% 0; }
  50% { background-position: 0 100%; }
  62.5% { background-position: 33.333% 100%; }
  75% { background-position: 66.666% 100%; }
  87.5%, 100% { background-position: 100% 100%; }
}
@keyframes recap-cuoi-cross { 0% { left: -180px; } 42%, 100% { left: calc(100vw + 180px); } }
@keyframes recap-lantern-sway { from { transform: rotate(-6deg); } to { transform: rotate(7deg); } }
@keyframes recap-target-float { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-8px) rotate(2deg); } }
@keyframes recap-hang-nga-float { from { transform: translateY(2px) rotate(-1deg); } to { transform: translateY(-10px) rotate(2deg); } }
@keyframes recap-gift-float { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-9px) rotate(4deg); } }

@media screen and (max-width: 1200px) {
  .recap-info-title { padding: 0 6vw; font-size: clamp(56px, 7vw, 84px); }
  .recap-scene-art { right: 6vw; top: -2.8vw; width: 230px; height: 175px; }
}

@media screen and (max-width: 600px) and (orientation: portrait) {
  .recap-info-title { justify-content: flex-start; padding: 0 0 0 5vw; font-size: clamp(36px, 11vw, 50px); letter-spacing: 0; }
  .recap-scene-art { top: -7vw; right: 2vw; width: 39vw; height: 31vw; }
  .recap-em { font-size: 1.62em; }
  .recap-copy { padding: 0 5vw; line-height: 2.08em; }
  .recap-copy b { font-size: 1.43em; }
  .gl-info-ringSpan { font-size: 1.55em; }
  .recap-ring-number { font-size: 2.1em; }
  .recap-cuoi-runner { bottom: 8.5vh; width: 92px; animation-duration: .72s, 13s; }
  .gl-info-6-1,
  .gl-info-6-2,
  .gl-info-6b-1,
  .gl-info-6b-2 { width: 90%; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .recap-cuoi-runner,
  .recap-scene-art img { animation: none; }
}

/* ===== Lop trang tri man home (dung lai asset cua ban cu) ===== */
.recap-home-decor {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.recap-home-decor img,
.recap-home-decor span { position: absolute; display: block; pointer-events: none; }
.recap-home-decor img { object-fit: contain; }

/* mua goc do */
.recap-hd-corner {
  top: -1%; width: 27%; opacity: .9; filter: saturate(.96);
  -webkit-mask-image: radial-gradient(ellipse 82% 82% at 14% 12%, #000 46%, rgba(0,0,0,.55) 66%, transparent 84%);
          mask-image: radial-gradient(ellipse 82% 82% at 14% 12%, #000 46%, rgba(0,0,0,.55) 66%, transparent 84%);
}
.recap-hd-corner.is-left { left: -2%; }
.recap-hd-corner.is-right { right: -2%; width: 25%; transform: scaleX(-1); }

/* day nui */
.recap-hd-range {
  bottom: -1%; width: 47%; opacity: .82; z-index: 2;
  -webkit-mask-image: linear-gradient(to right, #000 58%, transparent 96%);
          mask-image: linear-gradient(to right, #000 58%, transparent 96%);
}
.recap-hd-range.is-left { left: -7%; }
.recap-hd-range.is-right { right: -7%; width: 45%; transform: scaleX(-1); }

/* dai may do hai ben */
.recap-hd-ribbon {
  top: 20%; height: 66%; width: auto; opacity: .8; z-index: 1;
  -webkit-mask-image: linear-gradient(to right, #000 52%, transparent 92%);
          mask-image: linear-gradient(to right, #000 52%, transparent 92%);
  transform-origin: 50% 70%;
  animation: recap-hd-breathe 10s ease-in-out infinite;
}
.recap-hd-ribbon.is-left { left: -5%; }
.recap-hd-ribbon.is-right { right: -5%; transform: scaleX(-1); animation-delay: -5s; }

/* may troi */
.recap-hd-cloud { opacity: .78; animation: recap-hd-drift 16s ease-in-out infinite; }
.recap-hd-cloud.c1 { width: 24%; left: 10%; top: 28%; }
.recap-hd-cloud.c2 { width: 22%; right: 10%; top: 34%; animation-delay: -6s; }
.recap-hd-cloud.c3 { width: 19%; left: 17%; top: 58%; opacity: .7; animation-delay: -3s; }
.recap-hd-cloud.c4 { width: 18%; right: 17%; top: 61%; opacity: .7; animation-delay: -9s; }
.recap-hd-cloud.c5 { width: 14%; left: 29%; top: 12%; opacity: .6; animation-duration: 12s; }
.recap-hd-cloud.c6 { width: 13%; right: 29%; top: 10%; opacity: .6; animation-delay: -4s; }
.recap-hd-cloud.c7 { width: 36%; left: -8%; bottom: 8%; z-index: 3; opacity: .7; animation-delay: -7s; }
.recap-hd-cloud.c8 { width: 35%; right: -9%; bottom: 6%; z-index: 3; opacity: .7; animation-delay: -2s; }

/* hoa tiet bay: cat tu mid-autumn-floating-atlas-v1 */
.recap-hd-float {
  z-index: 4;
  transform-origin: 50% 0;
  filter: drop-shadow(0 8px 16px rgba(120,48,6,.22));
  animation: recap-hd-sway 9s ease-in-out infinite;
}
.recap-hd-float.is-free {
  transform-origin: 50% 50%;
  animation-name: recap-fly-a;
}
/* treo tren cao */
.recap-hd-float.f1 { width: 6.4%;  left: 10%;   top: 3%;   --tilt: -9deg; }
.recap-hd-float.f2 { width: 5%;    left: 23%;   top: 2%;   --tilt: 7deg;  animation-delay: -4s; }
.recap-hd-float.f3 { width: 6%;    right: 11%;  top: 4%;   --tilt: 10deg; animation-delay: -5s; }
.recap-hd-float.f4 { width: 4.4%;  right: 24%;  top: 2.5%; --tilt: -6deg; animation-delay: -7s; }
/* troi tu do: moi hoa tiet bay theo mot duong rieng, khong chi nhun tai cho */
.recap-hd-float.f5 { width: 5.6%;  left: 4%;    top: 26%;  animation-duration: 17s; animation-name: recap-fly-a; }
.recap-hd-float.f6 { width: 4.6%;  right: 4.5%; top: 23%;  animation-duration: 19s; animation-delay: -3s; animation-name: recap-fly-b; }
.recap-hd-float.f7 { width: 5.2%;  left: 20%;   top: 70%;  animation-duration: 21s; animation-delay: -6s; animation-name: recap-fly-c; }
.recap-hd-float.f8 { width: 4.2%;  right: 21%;  top: 73%;  animation-duration: 16s; animation-delay: -2s; animation-name: recap-fly-d; }
.recap-hd-float.f9 { width: 7%;    left: 31%;   top: 12%;  opacity: .55; animation-duration: 24s; animation-delay: -8s; animation-name: recap-fly-e; }
.recap-hd-float.f10{ width: 6%;    right: 32%;  top: 15%;  opacity: .55; animation-duration: 22s; animation-delay: -1s; animation-name: recap-fly-f; }
.recap-hd-float.f11{ width: 7.4%;  left: 16%;   top: 24%;  animation-duration: 26s; animation-delay: -5s; animation-name: recap-fly-b; }
.recap-hd-float.f12{ width: 5.4%;  right: 18%;  top: 67%;  animation-duration: 20s; animation-delay: -9s; animation-name: recap-fly-d; }

/* 6 duong bay khac nhau: troi lung tung theo vong, khong doi cung chieu, khong dong bo */
@keyframes recap-fly-a {
  0%   { transform: translate3d(0, 0, 0)        rotate(-4deg); }
  25%  { transform: translate3d(5vw, -4vh, 0)   rotate(3deg); }
  50%  { transform: translate3d(9vw, 1vh, 0)    rotate(-3deg); }
  75%  { transform: translate3d(3vw, 5vh, 0)    rotate(4deg); }
  100% { transform: translate3d(0, 0, 0)        rotate(-4deg); }
}
@keyframes recap-fly-b {
  0%   { transform: translate3d(0, 0, 0)        rotate(3deg); }
  25%  { transform: translate3d(-6vw, 3vh, 0)   rotate(-3deg); }
  50%  { transform: translate3d(-2vw, -5vh, 0)  rotate(2deg); }
  75%  { transform: translate3d(-8vw, -1vh, 0)  rotate(-4deg); }
  100% { transform: translate3d(0, 0, 0)        rotate(3deg); }
}
@keyframes recap-fly-c {
  0%   { transform: translate3d(0, 0, 0)        rotate(-2deg); }
  30%  { transform: translate3d(4vw, 6vh, 0)    rotate(4deg); }
  60%  { transform: translate3d(-4vw, 4vh, 0)   rotate(-3deg); }
  100% { transform: translate3d(0, 0, 0)        rotate(-2deg); }
}
@keyframes recap-fly-d {
  0%   { transform: translate3d(0, 0, 0)        rotate(4deg); }
  35%  { transform: translate3d(-5vw, -6vh, 0)  rotate(-4deg); }
  70%  { transform: translate3d(6vw, -2vh, 0)   rotate(3deg); }
  100% { transform: translate3d(0, 0, 0)        rotate(4deg); }
}
@keyframes recap-fly-e {
  0%   { transform: translate3d(0, 0, 0)        rotate(-3deg); }
  20%  { transform: translate3d(7vw, 3vh, 0)    rotate(2deg); }
  45%  { transform: translate3d(10vw, -4vh, 0)  rotate(-2deg); }
  70%  { transform: translate3d(4vw, -7vh, 0)   rotate(3deg); }
  100% { transform: translate3d(0, 0, 0)        rotate(-3deg); }
}
@keyframes recap-fly-f {
  0%   { transform: translate3d(0, 0, 0)        rotate(2deg); }
  25%  { transform: translate3d(-7vw, -5vh, 0)  rotate(-3deg); }
  55%  { transform: translate3d(-10vw, 1vh, 0)  rotate(4deg); }
  80%  { transform: translate3d(-3vw, 6vh, 0)   rotate(-2deg); }
  100% { transform: translate3d(0, 0, 0)        rotate(2deg); }
}

/* dom sang */
.recap-hd-spark {
  width: 1.5%; aspect-ratio: 1;
  background: url("../../assets/recap-generated/particles/p-spark.webp") center/contain no-repeat;
  filter: drop-shadow(0 0 9px rgba(255,190,90,.7));
  animation: recap-hd-twinkle 5.4s ease-in-out infinite;
}
.recap-hd-spark.s1 { left: 17%; top: 30%; }
.recap-hd-spark.s2 { left: 28%; top: 66%; animation-delay: -1.1s; }
.recap-hd-spark.s3 { right: 20%; top: 33%; animation-delay: -2.2s; }
.recap-hd-spark.s4 { right: 30%; top: 64%; animation-delay: -3.3s; }
.recap-hd-spark.s5 { left: 45%; top: 8%;  animation-delay: -4.1s; }
.recap-hd-spark.s6 { right: 12%; top: 48%; animation-delay: -2.7s; }
.recap-hd-spark.s7 { left: 8%;  top: 45%; animation-delay: -1.8s; }

@keyframes recap-hd-sway {
  0%, 100% { transform: translateY(0) rotate(var(--tilt)); }
  50%      { transform: translateY(-12px) rotate(calc(var(--tilt) + 5deg)); }
}
@keyframes recap-hd-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(2.2%, -1.4%, 0); }
}
@keyframes recap-hd-breathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.035) rotate(.8deg); }
}
@keyframes recap-hd-breathe-r {
  0%, 100% { transform: scaleX(-1) scale(1) rotate(0deg); }
  50%      { transform: scaleX(-1) scale(1.035) rotate(.8deg); }
}
.recap-hd-ribbon.is-right { animation-name: recap-hd-breathe-r; }
@keyframes recap-hd-twinkle {
  0%, 100% { opacity: .25; transform: translateY(0) scale(.85); }
  50%      { opacity: 1;   transform: translateY(-9px) scale(1.15); }
}

@media screen and (max-width: 750px) {
  .recap-hd-cloud.c5, .recap-hd-cloud.c6,
  .recap-hd-float.f9, .recap-hd-float.f10,
  .recap-hd-spark.s5, .recap-hd-spark.s7 { display: none; }
  .recap-hd-float.f1 { width: 13%; left: 3%; }
  .recap-hd-float.f3 { width: 12%; right: 4%; }
  .recap-hd-float.f2 { width: 9%;  left: 20%; }
  .recap-hd-float.f4 { width: 8.5%; right: 21%; }
  .recap-hd-float.f5 { width: 11%; }
  .recap-hd-float.f6 { width: 9.5%; }
  .recap-hd-float.f7 { width: 10%; top: 76%; }
  .recap-hd-float.f8 { width: 9%;  top: 79%; }
  .recap-hd-float.f11 { width: 14%; left: 6%; top: 14%; }
  .recap-hd-float.f12 { width: 11%; right: 5%; top: 60%; }
  .recap-hd-spark { width: 3.2%; }
  .recap-hd-corner { width: 44%; }
  .recap-hd-range  { width: 68%; }
  /* .recap-hd-ribbon dung height:66% (theo chieu cao) o desktop; tren man
     doc, 66vh quy sang chieu ngang (ti le anh doc 0.62) thanh ~88vw - ga
     2 dai bang gan het chieu rong, chong len nhau giua man hinh. Chuyen
     sang tinh theo width cho gon trong goc. */
  .recap-hd-ribbon { height: auto; width: 30vw; opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .recap-home-decor * { animation: none !important; }
}

/* --- lop chieu sau them: den long troi, chua, tho, ca koi, quang sang --- */

/* quang sang am sau mat trang */
.recap-hd-glow {
  left: 50%; top: 30%;
  width: 78vmin; height: 78vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,238,178,.55) 0%,
    rgba(255,221,138,.26) 34%,
    rgba(255,205,110,.09) 58%,
    transparent 72%);
  animation: recap-hd-pulse 7.5s ease-in-out infinite;
}

/* chua tren duong chan troi, nam sau day nui */
.recap-hd-temple {
  left: 7%; bottom: 7%; width: 17%;
  z-index: 1; opacity: .5;
  filter: saturate(.72) brightness(1.06);
}

/* tho */
.recap-hd-rabbit { z-index: 4; animation: recap-hd-bob 6.5s ease-in-out infinite; }
.recap-hd-rabbit.is-left  { left: 3.5%; top: 40%; width: 13%; }
.recap-hd-rabbit.is-right { right: 4%;  top: 44%; width: 11%; animation-delay: -3.2s; }

/* logo Ecomobi rieng 1 dong, duoi dong subtitle "RECAP 2026" cua canh 3D */
.recap-hd-wordmark {
  position: fixed;
  display: none;
  pointer-events: none;
  left: 50%;
  top: 70%;
  width: clamp(140px, 17vw, 260px);
  transform: translate(-50%, -50%);
  z-index: 4;
  filter: drop-shadow(0 3px 8px rgba(120,45,8,.28));
}
@media screen and (max-width: 750px) {
  /* mobile: dua logo len tren anh trang vang, khong con nam duoi tieu de nua */
  .recap-hd-wordmark { top: 6%; width: clamp(150px, 42vw, 240px); }
}

/* vien toi nhe o day cho chan trang do */
.recap-hd-vignette {
  inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to top, rgba(176,96,12,.2), rgba(176,96,12,.06) 45%, transparent);
  z-index: 0;
}

@keyframes recap-hd-pulse {
  0%, 100% { opacity: .82; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes recap-hd-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-14px) rotate(2deg); }
}

/* lop cha de dich chuyen theo chuot, tao chieu sau */
.recap-hd-par { position: absolute; inset: 0; will-change: transform; }

@media screen and (max-width: 750px) {
  .recap-hd-temple { width: 30%; left: 2%; }
  .recap-hd-rabbit.is-left  { width: 24%; left: -2%; top: 36%; }
  .recap-hd-rabbit.is-right { width: 21%; right: -1%; top: 62%; }
  .recap-hd-glow { width: 108vmin; height: 108vmin; }
}

/* ===== Hoa tiet bay xuyen suot moi scene ===== */
.recap-float-all {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
.recap-float-all img {
  position: absolute;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 7px 14px rgba(120,48,6,.16));
  animation: recap-fly-a 20s ease-in-out infinite;
}
/* ria trai */
.recap-float-all .g1  { width: 4.6%; left: 3%;    top: 11%; opacity: .72; animation-duration: 19s; animation-name: recap-fly-a; }
.recap-float-all .g2  { width: 3.4%; left: 6.5%;  top: 34%; opacity: .6;  animation-duration: 23s; animation-delay: -4s; animation-name: recap-fly-c; }
.recap-float-all .g3  { width: 4%;   left: 2.5%;  top: 58%; opacity: .66; animation-duration: 21s; animation-delay: -8s; animation-name: recap-fly-e; }
.recap-float-all .g4  { width: 3.2%; left: 7%;    top: 80%; opacity: .55; animation-duration: 25s; animation-delay: -2s; animation-name: recap-fly-a; }
/* ria phai */
.recap-float-all .g5  { width: 4.4%; right: 3%;   top: 14%; opacity: .7;  animation-duration: 20s; animation-delay: -6s; animation-name: recap-fly-b; }
.recap-float-all .g6  { width: 3.6%; right: 6.5%; top: 38%; opacity: .6;  animation-duration: 24s; animation-delay: -1s; animation-name: recap-fly-d; }
.recap-float-all .g7  { width: 4.2%; right: 2.5%; top: 62%; opacity: .66; animation-duration: 18s; animation-delay: -9s; animation-name: recap-fly-f; }
.recap-float-all .g8  { width: 3%;   right: 8%;   top: 84%; opacity: .55; animation-duration: 26s; animation-delay: -5s; animation-name: recap-fly-b; }
/* tren va duoi, mo hon de khong cuop nhin */
.recap-float-all .g9  { width: 5.4%; left: 26%;   top: 4%;  opacity: .4;  animation-duration: 27s; animation-delay: -3s; animation-name: recap-fly-c; }
.recap-float-all .g10 { width: 4.8%; right: 27%;  top: 6%;  opacity: .4;  animation-duration: 24s; animation-delay: -11s; animation-name: recap-fly-e; }
.recap-float-all .g11 { width: 5%;   left: 30%;   bottom: 5%; opacity: .38; animation-duration: 28s; animation-delay: -7s; animation-name: recap-fly-d; }
.recap-float-all .g12 { width: 4.4%; right: 31%;  bottom: 7%; opacity: .38; animation-duration: 22s; animation-delay: -13s; animation-name: recap-fly-f; }

@media screen and (max-width: 750px) {
  .recap-float-all .g9, .recap-float-all .g10,
  .recap-float-all .g11, .recap-float-all .g12 { display: none; }
  .recap-float-all .g1  { width: 11%; }
  .recap-float-all .g2  { width: 8%;  }
  .recap-float-all .g3  { width: 9.5%; }
  .recap-float-all .g4  { width: 7.5%; }
  .recap-float-all .g5  { width: 10.5%; }
  .recap-float-all .g6  { width: 8.5%; }
  .recap-float-all .g7  { width: 10%; }
  .recap-float-all .g8  { width: 7%;  }
}
@media (prefers-reduced-motion: reduce) {
  .recap-float-all img { animation: none !important; }
}

/* Chu tren nen scene moi: nen vang can bong dam, nen do/xanh can bong sau */
#gl-info-block-1 {
  filter: drop-shadow(0 3px 10px rgba(120,45,8,.5));
  text-shadow: 0 2px 10px rgba(120,45,8,.42);
}
#gl-info-block-2,
#gl-info-block-3,
#gl-info-block-4 {
  filter: drop-shadow(0 4px 14px rgba(18,4,2,.62));
  text-shadow: 0 2px 12px rgba(18,4,2,.5);
}

/* ===== Scene TOAN CANH: chu noi bat doi sang do, lay dung mau cua
   "Trang Ram Tuoi Tho" (#b9432c) vi mau kem cu chim vao nen vang ===== */
#gl-info-block-1 .recap-info-title > span:first-child,
#gl-info-block-1 .recap-em,
#gl-info-block-1 .recap-copy b {
  color: #b9432c;
  text-shadow: 0 2px 0 rgba(255,232,181,.9), 0 4px 14px rgba(120,45,8,.28);
}
#gl-info-block-1 { filter: drop-shadow(0 2px 6px rgba(255,240,200,.75)); }

/* Can giua that su: lop goc them padding-left 1vw kieu chu Nhat nen bi lech */
.gl-info-leftJA { padding-left: 0; }

/* Tieu de dai hon (BACH PHAT BANH TRANG, DA TRAM BANH THU, HANG NGA VUOT
   NGUYET) can co chu nho hon de khong tran ngang */
#gl-info-block-2 .recap-info-title,
#gl-info-block-3 .recap-info-title,
#gl-info-block-4 .recap-info-title {
  font-size: clamp(34px, 4.2vw, 82px);
  padding: 0 5vw;
}

@media screen and (max-width: 600px) and (orientation: portrait) {
  .gl-info-leftJA { padding-left: 0; }
  #gl-info-block-2 .recap-info-title,
  #gl-info-block-3 .recap-info-title,
  #gl-info-block-4 .recap-info-title {
    font-size: clamp(22px, 6.6vw, 34px);
    padding: 0 0 0 5vw;
  }
}

/* ===== Man livestream (stage 6): doi quang sang cyan sang do le hoi
   va them Cuoi - Hang Nga - Tho Ngoc dan chuong trinh ===== */
.gl-info-6 {
  filter: drop-shadow(0 3px 14px rgba(90,14,8,.55)) !important;
  text-shadow: 0 2px 12px rgba(90,14,8,.5) !important;
}

.recap-live-art {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}
.recap-live-art img {
  position: absolute;
  display: block;
  object-fit: contain;
}

/* 3 so lieu livestream: moi cai mot dong rieng, xep doc canh giua -
   giong cach cac man tong ket khac trinh bay */
#gl-info-6 .gl-info-6-1,
#gl-info-6 .gl-info-6-2,
#gl-info-6 .gl-info-6-3 {
  position: absolute;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  line-height: 1.45em;
}
#gl-info-6 .gl-info-6-1 { top: 8vh; }
#gl-info-6 .gl-info-6-2 { top: 18vh; }
#gl-info-6 .gl-info-6-3 { top: 28vh; }

@media screen and (max-width: 750px) {
  #gl-info-6 .gl-info-6-1,
  #gl-info-6 .gl-info-6-2,
  #gl-info-6 .gl-info-6-3 { white-space: normal; width: 84%; }
  #gl-info-6 .gl-info-6-1 { top: 6vh; }
  #gl-info-6 .gl-info-6-2 { top: 17vh; }
  #gl-info-6 .gl-info-6-3 { top: 28vh; }
}

/* 88 nguoi choi / 240 Hokoers: hai ben phai cach tam deu nhau */
#gl-info-6b .gl-info-6b-1,
#gl-info-6b .gl-info-6b-2 {
  left: 50%;
  right: auto;
  top: 50%;
}
/* moi khoi cach tam dung 7vw, nen hai ben deu nhau tuyet doi */
#gl-info-6b .gl-info-6b-1 { transform: translate(calc(-100% - 19vw), -50%); }
#gl-info-6b .gl-info-6b-2 { transform: translate(19vw, -50%); }
@media screen and (max-width: 750px) and (orientation: portrait) {
  #gl-info-6b .gl-info-6b-1 { transform: translate(-50%, -50%); top: 38%; }
  #gl-info-6b .gl-info-6b-2 { transform: translate(-50%, -50%); top: 62%; }
}

/* bo ba dan chuong trinh, dat duoi khoi chu */
.recap-live-hosts {
  left: 50%;
  bottom: 7%;
  width: clamp(420px, 48vw, 900px);
  transform: translateX(-50%);
  filter: drop-shadow(0 16px 26px rgba(70,10,6,.4));
  animation: recap-live-bob 4.6s ease-in-out infinite;
}

.recap-live-decor { opacity: .95; filter: drop-shadow(0 10px 18px rgba(70,10,6,.3)); }
.recap-live-plum  { top: -2%;  left: -1%;  width: clamp(160px, 19vw, 340px); animation: recap-live-sway 7s ease-in-out infinite; transform-origin: 20% 0; }
.recap-live-fan   { top: 4%;   right: 1%;  width: clamp(150px, 17vw, 300px); animation: recap-live-bob 6.2s ease-in-out infinite; animation-delay: -2s; }
.recap-live-gifts { bottom: 2%; left: 1.5%; width: clamp(170px, 20vw, 360px); animation: recap-live-bob 5.4s ease-in-out infinite; animation-delay: -3.4s; }

@keyframes recap-live-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
/* bo ba dan chuong trinh da co translateX(-50%) nen can keyframe rieng */
.recap-live-hosts { animation-name: recap-live-bob-center; }
@keyframes recap-live-bob-center {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-12px); }
}
@keyframes recap-live-sway {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2.5deg); }
}

@media screen and (max-width: 750px) {
  .recap-live-hosts { width: 94vw; bottom: 6%; }
  .recap-live-plum  { width: 38vw; top: -1%; left: -4%; }
  .recap-live-fan   { width: 34vw; top: 2%; right: -3%; }
  .recap-live-gifts { width: 40vw; bottom: 1%; left: -4%; opacity: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .recap-live-art img { animation: none !important; }
}

/* ===== 2 ca chep sprite (koi-sprite-fixed-head-v4) boi tren man home =====
   Sheet 1772x886 = luoi 4 cot x 2 hang, moi khung 443x443 (vuong) nen
   phai dung aspect-ratio 1, khong phai 2/1. */
.recap-hd-koi {
  position: absolute;
  display: block;
  z-index: 4;
  aspect-ratio: 1;
  filter: drop-shadow(0 8px 16px rgba(140,55,10,.2));
}
.recap-hd-koi i {
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("../../assets/koi-sprite-fixed-head-v4.webp");
  background-repeat: no-repeat;
  background-size: 400% 200%;
  animation: recap-hd-koi-frames 1.44s steps(1, end) infinite;
}
/* mot con ben trai, mot con ben phai - can giong bo cuc goc koi-left/koi-right */
.recap-hd-koi.k1 { width: 14%; left: 19%;  top: 44%; animation: recap-koi-bob 7s ease-in-out infinite; }
.recap-hd-koi.k2 { width: 14%; right: 19%; top: 44%; animation: recap-koi-bob 7s ease-in-out infinite; }
.recap-hd-koi.k2 i { transform: scaleX(-1); }

@keyframes recap-hd-koi-frames {
  0%,   12.49% { background-position: 0 0; }
  12.5%,24.99% { background-position: 33.333% 0; }
  25%,  37.49% { background-position: 66.667% 0; }
  37.5%,49.99% { background-position: 100% 0; }
  50%,  62.49% { background-position: 0 100%; }
  62.5%,74.99% { background-position: 33.333% 100%; }
  75%,  87.49% { background-position: 66.667% 100%; }
  87.5%,100%   { background-position: 100% 100%; }
}

@media screen and (max-width: 750px) {
  .recap-hd-koi.k1 { width: 18%; left: 9%;  top: 48%; }
  .recap-hd-koi.k2 { width: 18%; right: 9%; top: 48%; }
}
@media (prefers-reduced-motion: reduce) {
  .recap-hd-koi i { animation: none !important; }
}

/* ===== Mobile: can giua theo chieu doc cho cac man tong ket =====
   gl.css dat .gl-info-block{padding-top:40.53vw} - tren man 390px chi ra
   158px nen chu dinh sat dinh, con nua duoi man hinh bo trong. Doi sang
   don vi vh de khoi chu nam giua khung nhin. */
@media screen and (max-width: 750px) and (orientation: portrait) {
  .gl-info-block,
  .gl-info-block-s3,
  .gl-info-block-s5 { padding-top: 46vh; }
  .gl-info-title    { top: 28vh; height: 15vh; }

  /* co chu nho lai + cho xuong dong, khong thi cau dai bi cat o mep phai */
  .gl-info-m,
  .gl-info-base {
    box-sizing: border-box;
    max-width: 92vw;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    white-space: normal;
    overflow-wrap: break-word;
  }
  .gl-info-m   { font-size: 4.6vw; line-height: 1.5em; }
  .gl-info-base{ font-size: 3.4vw; line-height: 1.85em; }
  .recap-em    { font-size: 1.48em; }
  .recap-copy  { padding: 0; }
  .recap-copy b{ font-size: 1.28em; }

  /* trang tri man home to hon cho can voi man doc */
  .recap-hd-corner { width: 58%; }
  .recap-hd-range  { width: 92%; }
  .recap-hd-ribbon { width: 36vw; opacity: .35; }
  .recap-hd-temple { width: 40%; left: 1%; }
  .recap-hd-glow   { width: 126vmin; height: 126vmin; }
  .recap-hd-rabbit.is-left  { width: 32%; left: -4%; top: 35%; }
  .recap-hd-rabbit.is-right { width: 28%; right: -3%; top: 63%; }
  .recap-hd-koi.k1 { width: 30%; left: 7%;  top: 48%; }
  .recap-hd-koi.k2 { width: 30%; right: 7%; top: 48%; }
  .recap-hd-float.f1  { width: 18%; left: 1%; }
  .recap-hd-float.f2  { width: 13%; left: 19%; }
  .recap-hd-float.f3  { width: 17%; right: 2%; }
  .recap-hd-float.f4  { width: 12%; right: 20%; }
  .recap-hd-float.f5  { width: 15%; }
  .recap-hd-float.f6  { width: 13%; }
  .recap-hd-float.f8  { width: 12%; top: 79%; }
  .recap-hd-float.f12 { width: 15%; right: 4%; top: 60%; }
  .recap-hd-spark { width: 4.4%; }
}

/* Cuoi chay ngang mac dinh an, JS chi bat len trong luc loading */
.recap-cuoi-runner { display: none; }

/* Xuong dong tieu de dai chi o mobile (BACH PHAT BANH TRANG, HANG NGA VUOT NGUYET) */
.recap-brm { display: none; }
@media screen and (max-width: 750px) and (orientation: portrait) {
  /* xuong dong o MAN DON (vong ring, chi hien 1 chi so), khong phai
     man tong ket nhieu chi so */
  .recap-brm { display: block; }
  #gl-info-ring-2 .gl-info-ringSpan,
  #gl-info-ring-4 .gl-info-ringSpan { white-space: normal; line-height: 1.12; }
}

/* ===== Nut "Xem danh sach qua" + bang Qua da trao ===== */
.recap-gift-btn {
  display: inline-block;
  margin-top: 1.6em;
  padding: .72em 1.8em;
  border: 1px solid rgba(255,214,140,.85);
  border-radius: 999px;
  background: linear-gradient(180deg, #e2682a, #ab2f18);
  box-shadow: inset 0 0 0 2px rgba(249,161,76,.55), 0 8px 20px rgba(60,12,4,.35);
  color: #fff3d2;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  pointer-events: auto;
}
.recap-gift-btn:hover { background: linear-gradient(180deg, #ee7833, #bd3a1c); }
.recap-gift-btn:focus-visible { outline: 3px solid #fff0bd; outline-offset: 3px; }

.recap-board-dialog {
  width: min(92vw, 560px);
  max-height: 84vh;
  padding: 0;
  border: 1px solid rgba(255,214,140,.5);
  border-radius: 20px;
  background: linear-gradient(160deg, #7d2414, #3d0d07);
  box-shadow: 0 26px 60px rgba(20,4,2,.6);
  color: #ffeec6;
  overflow: hidden;
}
.recap-board-dialog::backdrop { background: rgba(26,5,3,.72); backdrop-filter: blur(4px); }
.recap-board-shell { display: flex; flex-direction: column; max-height: 84vh; }
.recap-board-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,214,140,.22);
}
.recap-board-header span { display: block; color: #eca953; font-size: 10px; font-weight: 700; letter-spacing: .26em; }
.recap-board-header h2 {
  margin: 4px 0 0; color: #ffe9b5;
  font-family: "SVN Gang of Three", Arial, sans-serif;
  font-size: clamp(24px, 3.4vw, 36px); font-weight: 400; line-height: 1;
}
.recap-board-close {
  width: 38px; height: 38px; padding: 0; flex: 0 0 auto;
  border: 1px solid rgba(255,210,138,.4); border-radius: 50%;
  background: rgba(255,244,207,.06); color: #ffe5a8;
  font: 300 26px/1 sans-serif; cursor: pointer;
}
.recap-board-close:hover { background: rgba(255,244,207,.15); }
.recap-board-list { overflow-y: auto; padding: 12px 16px 20px; }
.recap-board-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; margin-bottom: 8px;
  border: 1px solid rgba(255,214,140,.16); border-radius: 12px;
  background: rgba(255,240,200,.05);
}
.recap-board-photo {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 52px; height: 52px; overflow: hidden;
  border-radius: 10px; background: rgba(255,240,200,.1);
}
.recap-board-photo img { width: 100%; height: 100%; object-fit: cover; }
.recap-board-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.recap-board-copy strong { color: #fff1c9; font-size: 14px; font-weight: 700; }
.recap-board-copy small { color: #e8c795; font-size: 11.5px; line-height: 1.45; }
.recap-board-empty { margin: 24px 0; color: #e8c795; font-size: 13px; text-align: center; }

@media screen and (max-width: 750px) and (orientation: portrait) {
  .recap-gift-btn { margin-top: 1.2em; padding: .7em 1.5em; font-size: 13px; }
}

/* Nut bat/tat nhac nen */
.recap-bgm-btn {
  position: fixed;
  z-index: 9;
  right: 18px;
  top: 18px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255,214,140,.55);
  border-radius: 50%;
  background: rgba(125,36,20,.55);
  box-shadow: 0 6px 18px rgba(60,12,4,.3);
  color: #ffe5a8;
  /* can giua that su: flex + line-height 1, khong de glyph nhac tu day len */
  display: flex;
  align-items: center;
  justify-content: center;
  font: 400 19px/1 sans-serif;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.recap-bgm-btn:hover { background: rgba(125,36,20,.75); }
.recap-bgm-btn.is-off { opacity: .45; }
.recap-bgm-btn.is-off::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 26px; height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}
@media screen and (max-width: 750px) {
  .recap-bgm-btn { right: 12px; top: 12px; width: 38px; height: 38px; font-size: 17px; }
}

/* Nut "Cuon de xem": Arial tron nhin nhat, doi sang font tieu de cho dong
   bo voi chu TRUNG THU */
.gl-scroll-btn span {
  font-family: "SVN Gang of Three", Arial, sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .05em;
  color: #fff4d6;
  text-shadow: 0 2px 0 rgba(117,43,11,.25);
}
@media screen and (max-width: 750px) {
  .gl-scroll-btn span { font-size: 17px; }
}

/* 2 ca chep nhip nhang doi xung, cung nhip */
@keyframes recap-koi-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* 2) TOAN CANH: chu than doi tu trang (nhoe tren nen vang) sang nau do am,
   so + tieu de do; bo quang trang de chu gon net */
#gl-info-block-1 { filter: none; text-shadow: none; color: #6e2a12; }
#gl-info-block-1 .gl-info-m,
#gl-info-block-1 .gl-info-base { color: #6e2a12; text-shadow: 0 1px 0 rgba(255,244,214,.8); }
#gl-info-block-1 .recap-info-title > span:first-child,
#gl-info-block-1 .recap-em,
#gl-info-block-1 .recap-copy b {
  color: #b9432c;
  text-shadow: 0 2px 0 rgba(255,236,190,.9);
}

/* can giua tuyet doi o desktop: khong padding/margin lech mot phia */
.gl-info-block .gl-info-m,
.gl-info-block .gl-info-base {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}
.recap-em { margin-left: .06em; margin-right: .06em; }
.recap-info-title { justify-content: center; }

/* 5) bo nut "Xem lai tu dau" o man home */
.gl-hp-btn { display: none !important; }

/* Man mo dau "Mot mua trang ruc ro...": desktop tach 2 dong ra goc tren-phai
   va duoi-trai, om lay mat trang (man nho hon 1200px code goc da xep tren/duoi) */
@media screen and (min-width: 1201px) {
  .gl-info-0 { width: 100%; }
  .gl-info-0-1 {
    top: 12vh; bottom: auto;
    left: auto; right: 8vw;
    text-align: right;
  }
  .gl-info-0-2 {
    top: auto; bottom: 14vh;
    left: 8vw; right: auto;
    padding-top: 0;
    text-align: left;
  }
}

/* May bo sung lap day vung trung tam man home: om quanh mat trang, tranh
   cot giua (tieu de TRUNG THU + logo Ecomobi) */
.recap-hd-cloud.c9  { width: 13%; left: 23%;  top: 45%; opacity: .8;  animation-delay: -2s; }
.recap-hd-cloud.c10 { width: 12%; right: 23%; top: 47%; opacity: .8;  animation-delay: -7s; }
.recap-hd-cloud.c11 { width: 14%; left: 24%;  top: 75%; opacity: .75; animation-delay: -5s; }
.recap-hd-cloud.c12 { width: 13%; right: 24%; top: 77%; opacity: .75; animation-delay: -1s; }
.recap-hd-cloud.c13 { width: 9%;  left: 29%;  top: 22%; opacity: .85; animation-delay: -4s; }
.recap-hd-cloud.c14 { width: 11%; right: 28%; top: 25%; opacity: .85; animation-delay: -8s; }

@media screen and (max-width: 750px) {
  .recap-hd-cloud.c9  { width: 30%; left: 2%;  top: 52%; }
  .recap-hd-cloud.c10 { width: 28%; right: 2%; top: 55%; }
  .recap-hd-cloud.c11 { width: 32%; left: 4%;  top: 80%; }
  .recap-hd-cloud.c12 { width: 30%; right: 4%; top: 82%; }
  .recap-hd-cloud.c13 { width: 20%; left: 6%;  top: 20%; }
  .recap-hd-cloud.c14 { width: 24%; right: 5%; top: 22%; }
}

/* Mobile: .gl-info (chua nut "Cuon de xem") la position:fixed khong z-index,
   nen lop trang tri man home (z-index 1: nui, may, vignette o day) de len
   lam nut bi mo. Nang ca lop chu len tren trang tri. */
@media screen and (max-width: 750px) {
  .gl-info { z-index: 6; }
  .gl-scroll-btn { z-index: 7; }
}