/* =========================================================
   BIEU TUONG "VINH HA LONG 3D" TREN TRANG CHU (_vinh_ha_long_3d_promo.html)
   ========================================================= */
.hlp3d {
  --mx: 0; --my: 0;
  /* bang mau canh vinh - doi theo buoi trong ngay (class hlp3d-sang/trua/chieu/dem) */
  --hlp-sky1: #38a8e8; --hlp-sky2: #d6f1fb; --hlp-sun: #fff4c2;
  --hlp-sea1: #13a3a0; --hlp-sea2: #065a6e;
  --hlp-far: #9fcfd2; --hlp-mid: #4f9a7c; --hlp-near: #2e6f4f; --hlp-near2: #3c8460;
  position: relative; display: flex; align-items: center; gap: 28px;
  margin: 1.6rem 0 0.4rem; padding: 26px 30px 34px;
  border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff;
  background:
    radial-gradient(ellipse at 12% 30%, rgba(157,235,208,.22), transparent 55%),
    radial-gradient(ellipse at 95% 0%, rgba(251,146,60,.22), transparent 50%),
    linear-gradient(120deg, #04263a 0%, #0a5f73 60%, #0e7490 100%);
  box-shadow: 0 18px 45px rgba(4,38,58,.28);
  perspective: 900px; isolation: isolate;
  transition: transform .35s ease, box-shadow .35s ease;
}
.hlp3d:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 24px 60px rgba(4,38,58,.38); }
.hlp3d:focus-visible { outline: 3px solid #fb923c; outline-offset: 4px; }

.hlp3d-sang  { --hlp-sky1: #8aa7dc; --hlp-sky2: #fbd0b0; --hlp-sun: #ffd39b; --hlp-sea1: #4f8f98; --hlp-sea2: #1c4560; --hlp-far: #d9b9b0; --hlp-mid: #6b8f80; --hlp-near: #3a6452; --hlp-near2: #4a7462; }
.hlp3d-chieu { --hlp-sky1: #3f3f7c; --hlp-sky2: #ff9a50; --hlp-sun: #ffb36b; --hlp-sea1: #7c4d3c; --hlp-sea2: #2a2140; --hlp-far: #b0707a; --hlp-mid: #4a3a4a; --hlp-near: #2a2230; --hlp-near2: #352a3a; }
.hlp3d-dem   { --hlp-sky1: #040a1d; --hlp-sky2: #1d3160; --hlp-sun: #e6eeff; --hlp-sea1: #123a50; --hlp-sea2: #030f1c; --hlp-far: #2a3d60; --hlp-mid: #1a2a45; --hlp-near: #0e1a2e; --hlp-near2: #13223a; }

/* ---------- Huy hieu tron ---------- */
.hlp3d-emblem {
  position: relative; flex: 0 0 auto; width: 190px; height: 190px; z-index: 2;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--mx) * 18deg)) rotateX(calc(var(--my) * -18deg));
  transition: transform .25s ease-out;
  animation: hlp3dNoi 5s ease-in-out infinite;
}
.hlp3d-svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 14px 22px rgba(0,0,0,.35)); }
.hlp3d-pulse { position: absolute; inset: 4px; border-radius: 50%; border: 2px solid rgba(157,235,208,.7); animation: hlp3dSong 2.6s ease-out infinite; }
.hlp3d-pulse::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(251,146,60,.6); animation: hlp3dSong 2.6s ease-out 1.3s infinite; }
@keyframes hlp3dSong { from { transform: scale(1); opacity: .9; } to { transform: scale(1.32); opacity: 0; } }
@keyframes hlp3dNoi { 0%,100% { translate: 0 0; } 50% { translate: 0 -6px; } }

.hlp3d-ring { transform-origin: 100px 100px; animation: hlp3dXoay 26s linear infinite; }
.hlp3d-ring-text { font-size: 12.5px; font-weight: 800; fill: #e7fbf5; letter-spacing: 1px; }
@keyframes hlp3dXoay { to { transform: rotate(360deg); } }

.hlp3d-l1 { transform: translate(calc(var(--mx) * -3px), calc(var(--my) * -2px)); transition: transform .3s ease-out; }
.hlp3d-l2 { transform: translate(calc(var(--mx) * -6px), calc(var(--my) * -3px)); transition: transform .3s ease-out; }
.hlp3d-l3 { transform: translate(calc(var(--mx) * -11px), calc(var(--my) * -5px)); transition: transform .3s ease-out; }
.hlp3d-sun { transform: translate(calc(var(--mx) * 4px), calc(var(--my) * 3px)); transition: transform .3s ease-out; }
.hlp3d-sun circle:first-child { transform-origin: 132px 78px; animation: hlp3dToa 3.5s ease-in-out infinite; }
@keyframes hlp3dToa { 50% { transform: scale(1.18); } }
.hlp3d-cloud { animation: hlp3dMay 22s linear infinite; }
@keyframes hlp3dMay { from { transform: translateX(-40px); } to { transform: translateX(150px); } }
.hlp3d-stars { fill: #fff; opacity: 0; }
.hlp3d-dem .hlp3d-stars { opacity: 1; animation: hlp3dSao 2.4s ease-in-out infinite alternate; }
.hlp3d-dem .hlp3d-cloud { opacity: .25; }
@keyframes hlp3dSao { to { opacity: .35; } }

.hlp3d-w1 { animation: hlp3dTruot 5s linear infinite; }
.hlp3d-w2 { animation: hlp3dTruot 3.6s linear infinite reverse; }
.hlp3d-w3 { animation: hlp3dTruot 2.6s linear infinite; }
@keyframes hlp3dTruot { from { transform: translateX(0); } to { transform: translateX(-48px); } }
.hlp3d-w2 { animation-name: hlp3dTruot2; }
@keyframes hlp3dTruot2 { from { transform: translateX(0); } to { transform: translateX(-60px); } }
.hlp3d-w3 { animation-name: hlp3dTruot3; }
@keyframes hlp3dTruot3 { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.hlp3d-boat { transform-origin: 111px 140px; animation: hlp3dThuyen 3.2s ease-in-out infinite; }
@keyframes hlp3dThuyen { 0%,100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(-6px, 1.5px) rotate(3deg); } }
.hlp3d-glint { animation: hlp3dLap 2s ease-in-out infinite alternate; }
@keyframes hlp3dLap { to { opacity: .2; } }

.hlp3d-tag { transform-origin: 160px 152px; animation: hlp3dTag 2.2s ease-in-out infinite; }
.hlp3d-tag-text { font-size: 18px; font-weight: 900; fill: #fff; font-family: 'Be Vietnam Pro', system-ui, sans-serif; }
@keyframes hlp3dTag { 0%,100% { transform: scale(1) rotate(-8deg); } 50% { transform: scale(1.12) rotate(4deg); } }

/* ---------- Noi dung ---------- */
.hlp3d-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hlp3d-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: #9debd0; display: flex; align-items: center; gap: 8px; }
.hlp3d-new { background: #fb923c; color: #fff; padding: 2px 9px; border-radius: 999px; font-size: .7rem; letter-spacing: .12em; animation: hlp3dNhay 1.6s ease-in-out infinite; }
@keyframes hlp3dNhay { 50% { box-shadow: 0 0 0 6px rgba(251,146,60,0); background: #f97316; } 0%,100% { box-shadow: 0 0 0 0 rgba(251,146,60,.6); } }
.hlp3d-title {
  font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.01em;
  background: linear-gradient(100deg, #fff 0%, #fff 40%, #9debd0 50%, #fff 60%, #fff 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hlp3dAnh 4s ease-in-out infinite;
}
@keyframes hlp3dAnh { 0% { background-position: 100% 0; } 60%,100% { background-position: 0% 0; } }
.hlp3d-sub { color: #cfe7ee; font-size: .95rem; max-width: 560px; }
.hlp3d-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.hlp3d-chips span { font-size: .8rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.hlp3d-chips i { color: #9debd0; }
.hlp3d-cta {
  position: relative; overflow: hidden; align-self: flex-start; margin-top: 6px;
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 22px;
  border-radius: 999px; background: #fb923c; color: #fff; font-weight: 800; font-size: 1rem;
  box-shadow: 0 8px 24px rgba(251,146,60,.45);
}
.hlp3d-cta::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: hlp3dLoe 3s ease-in-out infinite;
}
@keyframes hlp3dLoe { 0%,55% { left: -60%; } 100% { left: 130%; } }
.hlp3d-arrow { transition: transform .25s; }
.hlp3d:hover .hlp3d-arrow { transform: translateX(5px); }
.hlp3d:hover .hlp3d-cta { background: #ea580c; }

.hlp3d-bg-waves { position: absolute; left: 0; bottom: 0; width: 112%; height: 52px; z-index: 1; pointer-events: none; }
.hlp3d-bg-waves .bw1 { fill: rgba(157,235,208,.14); animation: hlp3dNen 9s linear infinite; }
.hlp3d-bg-waves .bw2 { fill: rgba(255,255,255,.08); animation: hlp3dNen 6s linear infinite reverse; }
@keyframes hlp3dNen { from { transform: translateX(0); } to { transform: translateX(-150px); } }

/* ---------- Trang tri ben phai (may tinh) ---------- */
.hlp3d-deco { position: absolute; right: 0; bottom: 0; top: 0; width: 46%; z-index: 1; pointer-events: none; display: none; }
.hlp3d-big3d {
  position: absolute; right: 36px; top: 6px; font-size: 150px; font-weight: 900; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 2px rgba(157,235,208,.28);
  transform: translate(calc(var(--mx) * 14px), calc(var(--my) * 8px)); transition: transform .3s ease-out;
}
.hlp3d-skyline { position: absolute; right: 0; bottom: 0; width: 100%; height: 72%; }
.hlp3d-skyline .sk1 { fill: rgba(157,235,208,.10); transform: translateX(calc(var(--mx) * -8px)); transition: transform .3s ease-out; }
.hlp3d-skyline .sk2 { fill: rgba(4,38,58,.55); transform: translateX(calc(var(--mx) * -18px)); transition: transform .3s ease-out; }
.hlp3d-skyline .sk-boat { animation: hlp3dTroi 14s ease-in-out infinite alternate; }
@keyframes hlp3dTroi { from { transform: translate(-20px, 0) rotate(-1deg); } to { transform: translate(70px, 1px) rotate(1.5deg); } }
@media (min-width: 992px) { .hlp3d-deco { display: block; } }

/* Dung hieu ung khi khong nhin thay / giam chuyen dong */
.hlp3d-dung *, .hlp3d-dung *::before, .hlp3d-dung *::after, .hlp3d-dung .hlp3d-emblem { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .hlp3d *, .hlp3d *::before, .hlp3d *::after, .hlp3d-emblem { animation: none !important; }
}

/* ---------- Dien thoai ---------- */
@media (max-width: 767.98px) {
  .hlp3d { flex-direction: column; text-align: center; gap: 14px; padding: 22px 18px 36px; margin-top: 1.2rem; border-radius: 20px; }
  .hlp3d-emblem { width: 164px; height: 164px; }
  .hlp3d-body { align-items: center; }
  .hlp3d-eyebrow { justify-content: center; }
  .hlp3d-sub { font-size: .88rem; }
  .hlp3d-chips { justify-content: center; }
  .hlp3d-cta { align-self: center; width: 100%; justify-content: center; max-width: 320px; }
}
@media (min-width: 1200px) {
  .hlp3d { padding: 30px 44px 38px; gap: 40px; }
  .hlp3d-emblem { width: 210px; height: 210px; }
}