/* ===== Nền bãi biển Hawaii — dùng 1 lớp riêng cố định (position:fixed)
     phủ trọn màn hình thay vì background-attachment:fixed trên body (kiểu
     này hay bị lỗi/không ổn định trên trình duyệt di động, khiến ảnh bị
     kéo giãn theo chiều cao toàn trang và phải cuộn xuống tận cùng mới
     thấy bãi cát). Nhờ position:fixed, TOÀN BỘ cảnh (trời/mây/biển/cát)
     luôn hiển thị đầy màn hình ngay từ đầu, dù trang có cuộn dài đến đâu. */
  .beach-backdrop{
    position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  }
  /* Lớp ảnh nền thật sự được đặt LỚN HƠN màn hình sẵn 10% mỗi cạnh
     (inset:-10%) và cắt gọn bởi overflow:hidden của lớp cha phía trên.
     Nhờ có sẵn phần "dư" này, khi JS thu nhỏ (scale) lớp ảnh lại để tạo
     hiệu ứng zoom, ảnh LUÔN còn dư ra ngoài khung màn hình ở mọi mức zoom
     cho phép (scale không bao giờ nhỏ hơn 1) — không bao giờ lộ ra khoảng
     trống/màu nền trang phía sau (đây chính là lỗi "màn hình bị dẹp lại"
     trước đó, do scale trực tiếp một lớp full-màn-hình mà không có phần dư). */
  .beach-backdrop-img{
    position:absolute; inset:-10%;
    background:url('/images/beach-bg.svg') center bottom / cover no-repeat;
    transform-origin:50% 58%; will-change:transform;
  }

  /* ===== Lớp chi tiết động phía trên nền biển — mây/chim/thuyền/lấp lánh
     dịch chuyển theo tốc độ khác nhau khi cuộn trang (parallax), để cảnh
     không bị "đứng yên" mà luôn có thêm chuyển động/chi tiết khi lướt. Toàn
     bộ container vẫn position:fixed (không đẩy layout), JS chỉ chỉnh
     transform từng lớp con theo scrollY nên không ảnh hưởng hiệu năng cuộn. */
  .beach-parallax{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; transform-origin:50% 58%; will-change:transform; }
  .bp-layer{ position:absolute; inset:0; will-change:transform; transition:transform 0.05s linear; }

  .bp-clouds{ z-index:1; }
  .bp-birds{ z-index:2; }
  .bp-boatlayer{ z-index:2; }
  .bp-sparkles{ z-index:3; }
  .bp-fishlayer{ z-index:3; }
  .bp-waveslayer{ z-index:4; }
  .bp-rainbowlayer{ z-index:6; }

  .bp-cloud{ position:absolute; opacity:1; filter:drop-shadow(0 3px 5px rgba(0,0,0,0.12)); animation-timing-function:linear; }
  .bp-cloud svg{ width:100%; height:100%; display:block; }
  .bp-clouds .bp-cloud:nth-child(1){ top:6%; left:-14%; width:170px; height:60px; animation:cloudDrift 52s linear infinite; }
  .bp-clouds .bp-cloud:nth-child(2){ top:15%; left:26%; width:130px; height:46px; animation:cloudDrift 68s linear infinite; animation-delay:-24s; opacity:0.96; }
  .bp-clouds .bp-cloud:nth-child(3){ top:9%; left:64%; width:100px; height:38px; animation:cloudDrift 44s linear infinite; animation-delay:-10s; opacity:0.93; }
  .bp-clouds .bp-cloud:nth-child(4){ top:19%; left:-30%; width:80px; height:30px; animation:cloudDrift 60s linear infinite; animation-delay:-34s; opacity:0.9; }
  @keyframes cloudDrift{ from{ transform:translateX(0);} to{ transform:translateX(130vw);} }

  .bp-bird{ position:absolute; width:22px; height:14px; opacity:0.8; animation:birdFly linear infinite; }
  .bp-birds .bp-bird:nth-child(1){ top:16%; animation-duration:16s; animation-delay:0s; }
  .bp-birds .bp-bird:nth-child(2){ top:20%; animation-duration:21s; animation-delay:-6s; }
  .bp-birds .bp-bird:nth-child(3){ top:14%; animation-duration:13s; animation-delay:-3s; }
  @keyframes birdFly{ from{ transform:translateX(-8vw) translateY(0);} 50%{ transform:translateX(55vw) translateY(-14px);} to{ transform:translateX(110vw) translateY(0);} }
  .bp-bird svg{ width:100%; height:100%; animation:birdFlap 0.6s ease-in-out infinite alternate; }
  @keyframes birdFlap{ from{ transform:scaleY(1);} to{ transform:scaleY(0.55);} }

  .bp-boat{ position:absolute; bottom:41%; width:44px; height:32px; animation:boatDrift 34s ease-in-out infinite; }
  .bp-boat svg{ width:100%; height:100%; display:block; animation:boatBob 3.2s ease-in-out infinite; }
  @keyframes boatDrift{ 0%{ left:-8%;} 50%{ left:62%;} 100%{ left:-8%;} }
  @keyframes boatBob{ 0%,100%{ transform:translateY(0) rotate(-1.5deg);} 50%{ transform:translateY(-4px) rotate(1.5deg);} }

  .bp-sparkle{ position:absolute; width:5px; height:5px; border-radius:50%; background:#fff; opacity:0; box-shadow:0 0 6px 1px rgba(255,255,255,0.9); animation:sparkleTwinkle 2.6s ease-in-out infinite; }
  @keyframes sparkleTwinkle{ 0%,100%{ opacity:0; transform:scale(0.4);} 50%{ opacity:0.9; transform:scale(1);} }

  .bp-fish{ position:absolute; bottom:44%; width:20px; height:14px; opacity:0; animation:fishLeap 6.5s ease-in-out infinite; }
  .bp-fish svg{ width:100%; height:100%; }
  @keyframes fishLeap{ 0%,80%,100%{ opacity:0; transform:translateY(0) rotate(0deg);} 88%{ opacity:1; transform:translateY(-26px) rotate(-18deg);} 94%{ opacity:1; transform:translateY(-6px) rotate(14deg);} }

  /* ===== Rùa biển to, bò liên tục lên bãi cát — vừa dịch chuyển ngang qua
     lại vừa nhích dần từ mép nước (gần đường sóng) tiến sâu lên bãi cát rồi
     lùi trở ra, lặp vô hạn, kèm lắc mai và vẫy chân để trông giống đang thật
     sự bò trên cát chứ không trượt cứng theo một đường thẳng. ===== */
  .bp-turtlelayer{ z-index:3; }
  .bp-turtle{ position:absolute; width:64px; height:44px; animation:turtleCrawl 46s linear infinite; }
  .bp-turtle svg{ width:100%; height:100%; display:block; animation:turtleWaddle 1.6s ease-in-out infinite; }
  @keyframes turtleCrawl{
    0%{ left:-12%; bottom:33%; transform:scaleX(1);}
    22%{ left:30%; bottom:9%; transform:scaleX(1);}
    47%{ left:70%; bottom:24%; transform:scaleX(1);}
    50%{ left:70%; bottom:24%; transform:scaleX(-1);}
    72%{ left:32%; bottom:6%; transform:scaleX(-1);}
    97%{ left:-12%; bottom:30%; transform:scaleX(-1);}
    100%{ left:-12%; bottom:33%; transform:scaleX(1);}
  }
  @keyframes turtleWaddle{ 0%,100%{ transform:rotate(-2deg) translateY(0);} 50%{ transform:rotate(2deg) translateY(-1px);} }

  /* ===== Sóng biển vỗ liên tục ngay tại mép cát — nhiều lớp sóng/bọt biển
     chồng lên nhau, mỗi lớp trôi ngang + nhấp nhô độc lập vô hạn (infinite)
     để tạo cảm giác sóng đánh vào bờ liên tục, không đứng yên. Vị trí
     chính xác (bottom, tính bằng px) do JS tính toán khớp với đúng đường
     bờ cát thật trong ảnh nền — không còn là dải hiệu ứng lơ lửng mơ hồ
     giữa trời như trước. ===== */
  .bp-waves{ position:absolute; left:0; right:0; bottom:38%; height:64px; overflow:visible; pointer-events:none; }
  .wave-svg{ position:absolute; left:-15%; width:130%; height:100%; bottom:0; }
  .wave-back{ opacity:0.32; animation:waveSurge 4.2s ease-in-out infinite; }
  .wave-mid{ opacity:0.5; animation:waveSurge 3.1s ease-in-out infinite; animation-delay:-1.4s; }
  .wave-foam{ opacity:0.85; animation:foamWash 3.1s ease-in-out infinite; animation-delay:-0.3s; }
  /* Sóng "tràn vào" (dâng lên gần bờ, translateY âm) rồi "rút ra xa"
     (translateY dương, lùi về phía biển) lặp lại liên tục, đúng kiểu
     sóng thật đánh vào bờ cát chứ không phải trôi ngang lơ lửng. */
  @keyframes waveSurge{ 0%{ transform:translateY(14px) translateX(0);} 45%{ transform:translateY(-10px) translateX(-1.5%);} 100%{ transform:translateY(14px) translateX(0);} }
  @keyframes foamWash{ 0%{ transform:translateY(18px) scaleX(1); opacity:0.1;} 42%{ transform:translateY(-14px) scaleX(1.03); opacity:0.95;} 70%{ transform:translateY(-4px) scaleX(1); opacity:0.6;} 100%{ transform:translateY(18px) scaleX(1); opacity:0.1;} }

  .bp-rainbow{ position:absolute; top:2%; left:50%; width:300px; height:150px; transform:translateX(-50%); opacity:0; transition:opacity 1.4s ease, transform 1.4s ease; }
  .bp-rainbow.show{ opacity:0.6; transform:translateX(-50%) translateY(6px); }
  .bp-rainbow svg{ width:100%; height:100%; overflow:visible; }

  #seagullSky{position:fixed; inset:0; z-index:5; pointer-events:none; overflow:hidden;}
  .seagull-fx{
    position:absolute; top:0; left:0; width:36px; height:20px; opacity:0;
    animation-name:seagullFly;
    animation-timing-function:ease-in-out;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
  }
  .seagull-fx svg{ width:100%; height:100%; display:block; animation:seagullFlap 0.65s ease-in-out infinite alternate; }
  .seagull-fx.rev svg{ --flip:-1; }
  .seagull-fx path{ stroke:#4a4a4a; }
  .seagull-fx.c1 path{ stroke:#6b6b6b; }
  .seagull-fx.c2 path{ stroke:#333333; }
  @keyframes seagullFly{
    0%{ transform:translate(0,0); opacity:0; }
    6%{ opacity:0.9; }
    50%{ transform:translate(var(--midx,55vw), var(--bob,-22px)); }
    92%{ opacity:0.9; }
    100%{ transform:translate(var(--endx,112vw), 0); opacity:0; }
  }
  @keyframes seagullFlap{ from{ transform:scaleX(var(--flip,1)) scaleY(1);} to{ transform:scaleX(var(--flip,1)) scaleY(0.5);} }
/* ===== Ghép nền biển vào mọi trang ===== */
:root{--green:#12b8c9;--gold:#ffb648;--grad:linear-gradient(135deg,#14b8d4,#0a6f8c);--btn-text:#fff}
html,body{background:#bfe4f5 !important}
.app{background:transparent !important;position:relative;z-index:1}
.subpage-head,.pkg-hint{background:rgba(255,255,255,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.subpage-head{border-radius:16px;margin:12px 12px 0;padding:14px 16px}
.pkg-hint{border-radius:12px;margin:0 12px 20px;padding:10px 14px}