/* ============================================================
   T029 Phượng Hoàng Tru Tiên — site.css
   Ported from the React app's index.scss + index.css.
   Tailwind utility classes are provided by the Tailwind CDN
   (configured in _Layout.cshtml); this file holds @font-face,
   custom keyframes, and the bespoke classes Tailwind can't infer.
   ============================================================ */

/* ---------- Fonts (copied to /fonts) ---------- */
@font-face {
  font-family: "Nyala";
  src: url("../fonts/Nyala.woff2") format("woff2"),
       url("../fonts/Nyala.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "AlbertaHeavy";
  src: url("../fonts/AlbertaHeavy.woff2") format("woff2"),
       url("../fonts/AlbertaHeavy.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fz";
  src: url("../fonts/FzKiemHiepTinh2.woff2") format("woff2"),
       url("../fonts/FzKiemHiepTinh2.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base ---------- */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  overflow: hidden;
  font-family: "Nyala";
  background-color: black;
}
footer { font-family: "Roboto", sans-serif; }

.font-Barlow { font-family: "Barlow", sans-serif; }
.font-Nyala  { font-family: "Nyala"; }
.font-Fz     { font-family: "Fz", sans-serif; }
.font-Roboto { font-family: "Roboto", sans-serif; }
.font-AlbertaHeavy { font-family: "AlbertaHeavy"; }

.flex-center { display: flex; align-items: center; justify-content: center; }
button { cursor: pointer; }

/* Active section highlight in the desktop side-menu + mobile menu (set by nav.js) */
.menu-link.is-active,
#mobile-menu [data-goto].is-active { color: #fffaac !important; }
.shadow-title { text-shadow: 4px 1px 0px white; }
.textNowrap { white-space: normal; overflow-wrap: break-word; word-wrap: break-word; }
.no-scroll { overflow: hidden; }

picture { display: block; }
picture img { display: block; object-fit: contain; }

/* ---------- Scale layout wrappers ---------- */
#scaleWrapper {
  margin: 0 auto;
  position: relative;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
#scaleWrapper::-webkit-scrollbar-track { background-color: transparent; }
#scaleWrapper::-webkit-scrollbar { width: 2px; height: 2px; background-color: transparent; }
@media screen and (min-width: 992px) {
  #scaleWrapper::-webkit-scrollbar { width: 3px; height: 3px; }
}
#scaleWrapper::-webkit-scrollbar-thumb { background-color: #c3c3c3; border-radius: 16px; }
#scaleWrapper::-webkit-scrollbar-button { display: none; }

#transformWrapper {
  width: 768px;
  height: auto;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  overflow: hidden;
  position: absolute;
}
@media screen and (min-width: 769px)  { #transformWrapper { width: 1920px; } }
@media screen and (min-width: 1921px) { #transformWrapper { width: 2560px; } }

/* Section scale canvas (mirrors #transformWrapper: absolute, top-left, scaled by scale.js) */
.scale-canvas {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

/* ---------- Text stroke ---------- */
.text-stroke {
  font-size: 35px;
  font-weight: bold;
  color: white;
  -webkit-text-stroke: 1px black;
  -webkit-text-fill-color: white;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.text-stroke-rank {
  font-size: 45px;
  font-weight: bold;
  color: #fff9c5;
  -webkit-text-stroke: 1px #d2322e;
  -webkit-text-fill-color: #fff9c5;
  text-shadow: -1px -1px 0 #d2322e, 1px -1px 0 #d2322e, -1px 1px 0 #d2322e, 1px 1px 0 #d2322e;
}
@supports (-webkit-text-stroke: 1px #d2322e) {
  .text-stroke-rank { font-size: 48px; color: transparent; -webkit-text-fill-color: #fff9c5; }
}

/* ---------- Mobile hamburger ---------- */
.btnMobileMenu { width: 24px; height: 18px; display: block; position: relative; }
.btnMobileMenu span {
  display: block; height: 3px; background: white; border-radius: 10px;
  position: absolute; left: 0; right: 0; transition: 0.1s ease-in-out;
}
.btnMobileMenu span:first-of-type { top: 0; }
.btnMobileMenu span:nth-of-type(2) { top: 50%; transform: translateY(-50%); }
.btnMobileMenu span:last-of-type { bottom: 0; }
.btnMobileMenu.active span:first-of-type { top: 50%; transform: translateY(-50%) rotate(45deg); }
.btnMobileMenu.active span:nth-of-type(2) { left: 50%; right: 50%; opacity: 0; }
.btnMobileMenu.active span:last-of-type { top: 50%; transform: translateY(-50%) rotate(-45deg); }

/* ---------- Shimmer sweep ---------- */
.animation-laluot {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  overflow: hidden;
  filter: brightness(2);
  -webkit-mask-size: 300% 200%; mask-size: 300% 200%;
  -webkit-mask-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 40%, #fff 50%, rgba(255,255,255,0) 60%);
  mask-image: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 40%, #fff 50%, rgba(255,255,255,0) 60%);
  animation: laluot linear 2.5s infinite 1s;
}
@keyframes laluot {
  from { -webkit-mask-position: 150% 0px; mask-position: 150% 0px; }
  100% { -webkit-mask-position: 0% 0px;   mask-position: 0% 0px; }
}

/* ---------- Custom scrollbar ---------- */
.custom-scrollbar::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px #bb807e; border-radius: 120px; background-color: #bb807e; }
.custom-scrollbar::-webkit-scrollbar { width: 12px; background-color: #bb807e; border-radius: 120px; }
.custom-scrollbar::-webkit-scrollbar-thumb { border-radius: 16px; -webkit-box-shadow: inset 0 0 6px #c04449; background-color: #c04449; }

/* ---------- Swiper overrides ---------- */
.swiper-button-prev, .swiper-button-next { color: white !important; }
/* Reset only the color (NOT background-image) so PC slides can carry a cover
   background to fill the bottom gap left by the width-scaled canvas. */
.swiper-slide { background-color: transparent !important; }
.swiper { background: transparent !important; }

/* PC: the section art is 1920x950 (wider than most screens); the width-scaled
   .scale-canvas leaves a black gap at the bottom. Each slide carries the same
   art as an inline cover background (set in Index.cshtml) so the gap is filled —
   the opaque canvas art paints on top, only the empty bottom shows this. */
@media screen and (min-width: 769px) {
  #main-swiper > .swiper-wrapper > .swiper-slide {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 768px) {
  /* Mobile is a natural-height continuous scroll, so no cover background. */
  #main-swiper > .swiper-wrapper > .swiper-slide { background-image: none !important; }
}

/* The main swiper uses effect:"fade", so all 4 sections are stacked at the same
   spot. Swiper sets pointer-events:none on inactive slides, but the nested gift /
   download pagination bullets re-enable pointer-events:auto (see below) and sit in
   the top-right corner — right over the Home login/social buttons — swallowing
   their clicks. Force every descendant of an inactive section to ignore pointer
   events so only the visible (active) section is interactive.
   Desktop only: on mobile every section is visible at once (continuous scroll),
   so nothing should be inert. */
@media screen and (min-width: 769px) {
  #main-swiper > .swiper-wrapper > .swiper-slide:not(.swiper-slide-active),
  #main-swiper > .swiper-wrapper > .swiper-slide:not(.swiper-slide-active) * {
    pointer-events: none !important;
  }
}

/* ---------- Mobile: one continuous scrolling page ----------
   Like t028 SectionMB — instead of the fade-swiper (one section per screen),
   the 4 sections stack vertically and the page scrolls as a single document.
   The main swiper is NOT initialised on mobile (see site.js); we just unwind
   its flex/transform so the slides flow normally. Each slide's height is set
   inline by site.js to the *scaled* height of its .scale-canvas (which is
   position:absolute + transform:scale, so it reserves no layout height itself). */
@media screen and (max-width: 768px) {
  body { overflow: visible !important; height: auto !important; }

  #main-swiper {
    height: auto !important;
    overflow: visible !important;
  }
  #main-swiper > .swiper-wrapper {
    display: block !important;
    height: auto !important;
    transform: none !important;
  }
  #main-swiper > .swiper-wrapper > .swiper-slide {
    width: 100% !important;
    /* height is set inline by site.js (scaled content height) */
  }

  /* The nested gift / download swipers set a restrictive touch-action that
     blocks the page from scrolling vertically while a finger is over them
     (the download swiper is vertical -> touch-action:pan-x -> swallows the
     vertical pan). On mobile the page itself owns vertical scrolling, so let
     touch pass through. Both are navigated by their pagination dots here. */
  #slide-gift .swiper,
  #slide-download .swiper {
    touch-action: pan-y !important;
    overscroll-behavior: auto !important;
  }
}
#slide-landing .swiper-slide:not(.swiper-slide-active) { filter: grayscale(1); }
#slide-landing .swiper-slide:not(.swiper-slide-visible) { opacity: 0 !important; }
@media screen and (min-width: 769px) {
  #sect .swiper-button-prev { left: 200px; }
  #sect .swiper-button-next { right: 200px; }
}

.bg-giftcode { background: linear-gradient(180deg, #36ae7e 0%, #5f8f6b 100%); border: 2px solid #70d273; }

.scale-responsive { transform-origin: top right; }
@media screen and (min-width: 768px)  { .scale-responsive { transform: scale(0.45); } }
@media screen and (min-width: 1024px) { .scale-responsive { transform: scale(0.55); } }
@media screen and (min-width: 1280px) { .scale-responsive { transform: scale(0.7); } }
@media screen and (min-width: 1536px) { .scale-responsive { transform: scale(0.9); } }

/* ---------- Gift / download pagination bullets ---------- */
#slide-gift .swiper-pagination,
#slide-download .swiper-pagination { position: absolute; inset: 0; pointer-events: none; }
#slide-download .swiper-pagination { top: 50%; transform: translateY(-50%); }

#slide-gift .swiper-pagination-bullet,
#slide-download .swiper-pagination-bullet {
  position: absolute; width: auto !important; height: auto !important;
  pointer-events: auto; opacity: 1 !important; background: transparent !important;
}
#slide-gift .swiper-pagination-bullet-active .text-name { color: #fffaac !important; }
#slide-download .swiper-pagination-bullet-active .text-name { color: black !important; }
#slide-gift .swiper-pagination-bullet-active .dot-img-active,
#slide-download .swiper-pagination-bullet-active .dot-img-active { display: block !important; }
#slide-gift .swiper-pagination-bullet-active .dot-img-inactive,
#slide-download .swiper-pagination-bullet-active .dot-img-inactive { display: none !important; }

/* ---------- Glow animations ---------- */
@keyframes glow-gold {
  0%   { filter: drop-shadow(0 0 4px rgba(255,215,0,.6)) drop-shadow(0 0 8px rgba(255,215,0,.4)); }
  50%  { filter: drop-shadow(0 0 6px rgba(255,215,0,.9)) drop-shadow(0 0 12px rgba(255,215,0,.6)); }
  100% { filter: drop-shadow(0 0 4px rgba(255,215,0,.6)) drop-shadow(0 0 8px rgba(255,215,0,.4)); }
}
.shadow-gold-anim { animation: glow-gold 3s ease-in-out infinite; }

@keyframes glow-gold-red {
  0%   { filter: drop-shadow(0 0 5px rgba(255,255,220,.8)) drop-shadow(0 0 15px rgba(255,215,0,.5)); }
  50%  { filter: drop-shadow(0 0 8px rgba(255,255,255,1)) drop-shadow(0 0 25px rgba(255,215,0,.8)) drop-shadow(0 0 45px rgba(255,160,0,.5)); }
  100% { filter: drop-shadow(0 0 5px rgba(255,255,220,.8)) drop-shadow(0 0 15px rgba(255,215,0,.5)); }
}
.shadow-glow-red { animation: glow-gold-red 3s ease-in-out infinite; }

/* ---------- Slide entrance ---------- */
@keyframes zoomInReturn {
  0%   { transform: scale(1.08); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.swiper-slide-active .slide-inner-content { animation: zoomInReturn 0.5s ease-out forwards; will-change: transform, opacity; }
.swiper-slide:not(.swiper-slide-active) .slide-inner-content { transform: scale(1); opacity: 1; }

@keyframes popInEffect {
  0%   { opacity: 0; transform: scale(0.95); }
  60%  { opacity: 1; transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}
.swiper-slide-active .animate-pop { will-change: transform, opacity; opacity: 0; animation: popInEffect 0.5s ease-out forwards; animation-delay: 0.1s; }

/* ---------- Theme keyframes (from index.css @theme) ---------- */
@keyframes title-animation {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-10px) scale(1.1); }
  60% { transform: translateY(-5px) scale(1.02); }
}
@keyframes TranslateYAnimation { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes logoPulse { 0% { transform: scale(1); filter: brightness(1); } 100% { transform: scale(1.1); filter: brightness(1.3); } }
@keyframes logoTextSkew {
  0%   { transform: skew(0) skewY(0) scale(1); }
  20%  { transform: skew(-6deg) skewY(2deg) scale(1.03); }
  40%  { transform: skew(5deg) skewY(-2deg) scale(1.01); }
  60%  { transform: skew(-4deg) skewY(3deg) scale(1.04); }
  80%  { transform: skew(3deg) skewY(-2deg) scale(1.02); }
  100% { transform: skew(0) skewY(0) scale(1); }
}
@keyframes logoTextGlow { 0% { filter: drop-shadow(0 0 8px #fff); } 100% { filter: drop-shadow(0 0 24px #ffe066); } }
@keyframes decorFloatReverse {
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-3%) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}

/* Animation utility classes (mirror the React app's animate-* names) */
.animate-title             { animation: title-animation .8s ease forwards; }
.animate-TranslateY        { animation: TranslateYAnimation 1s ease infinite; }
.animate-logoPulse         { animation: logoPulse 1s infinite alternate; }
.animate-logoTextSkew      { animation: logoTextSkew 2.2s infinite alternate cubic-bezier(.36,.07,.19,.97), logoTextGlow 2s infinite alternate; }
.animate-decorFloatReverse   { animation: decorFloatReverse 3s ease-in-out infinite alternate; }
.animate-decorFloatReverse1s { animation: decorFloatReverse 2s ease-in-out infinite alternate; }

/* Rotate-device notice */
@keyframes spin-pause {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
.spin-pause { animation: spin-pause 4s ease-in-out infinite; }

/* ===================== Gift "Chi Tiết" detail popup =====================
   The frame sizes to its content over the popupGift.png art (set as a
   stretched inline background). 5 items per row: 5 stay on one row, 6-10
   wrap to a second row and the frame grows vertically to fit. */
.gift-detail-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 583px;
  max-width: 92vw;
  min-height: 242px;
  padding: 48px 30px 32px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.gift-detail-frame .gift-detail-title {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 44px;
  text-align: center;
  line-height: 1.05;
  white-space: normal;
}
.gift-detail-frame .gift-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px 8px;
  width: 100%;
}
.gift-detail-frame .gift-detail-img {
  width: 64px;
  height: auto;
}
.gift-detail-frame .gift-detail-empty {
  width: 100%;
  margin-top: 8px;
}