/* =========================================================
   VLXD HƯƠNG GIANG - GIAO DIỆN SÁNG & HIỆU ỨNG BANNER
   ========================================================= */

html { scroll-behavior: smooth; }

/* ---------- Thanh điều hướng ---------- */
.hg-nav-link {
  position: relative;
  padding: .5rem .85rem;
  border-radius: 9999px;
  transition: color .2s, background-color .2s;
}
.hg-nav-link:hover { color: #8B1A1F; background-color: #fdf4f4; }
.hg-nav-link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 0; height: 2px;
  background: #f59e0b;
  border-radius: 2px;
  transition: width .25s, left .25s;
}
.hg-nav-link:hover::after { width: 40%; left: 30%; }
#siteHeader.is-scrolled { box-shadow: 0 6px 24px -12px rgba(15, 23, 42, .25); }

/* ---------- Nút có vệt sáng chạy qua ---------- */
.hg-shine { position: relative; overflow: hidden; }
.hg-shine::before {
  content: "";
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: hg-shine 3.5s ease-in-out infinite;
}
@keyframes hg-shine { 0%, 60% { left: -75%; } 100% { left: 130%; } }

/* ---------- Icon điện thoại rung ---------- */
.hg-ring { display: inline-block; animation: hg-ring 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes hg-ring {
  0%, 70%, 100% { transform: rotate(0); }
  74% { transform: rotate(-18deg); } 78% { transform: rotate(16deg); }
  82% { transform: rotate(-12deg); } 86% { transform: rotate(8deg); }
}
.hg-float-call { animation: hg-pulse 2s infinite; }
@keyframes hg-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70% { box-shadow: 0 0 0 16px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* =========================================================
   HERO SLIDER
   ========================================================= */
.hg-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(251, 191, 36, .22), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(209, 79, 84, .14), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fffaf2 100%);
}
/* Họa tiết lưới nhẹ phía sau */
.hg-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(139,26,31,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,26,31,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
  pointer-events: none;
}
/* Hình khối trang trí trôi nhẹ */
.hg-blob {
  position: absolute; border-radius: 9999px; filter: blur(2px); opacity: .55;
  animation: hg-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes hg-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(30px, -24px) scale(1.08); }
}

/* Các slide xếp chồng trong cùng một ô lưới: khung tự cao theo slide dài nhất */
.hg-slides { display: grid; }
.hg-slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease, visibility .8s;
}
.hg-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* Chữ bay lên lần lượt khi slide hiển thị */
.hg-slide [data-anim] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.hg-slide.is-active [data-anim] { opacity: 1; transform: none; }
.hg-slide.is-active [data-anim="1"] { transition-delay: .15s; }
.hg-slide.is-active [data-anim="2"] { transition-delay: .3s; }
.hg-slide.is-active [data-anim="3"] { transition-delay: .45s; }
.hg-slide.is-active [data-anim="4"] { transition-delay: .6s; }
.hg-slide.is-active [data-anim="5"] { transition-delay: .75s; }

/* Khung ảnh có hiệu ứng Ken Burns */
.hg-photo {
  position: relative; overflow: hidden;
  border-radius: 28px;
  box-shadow: 0 30px 60px -25px rgba(139, 26, 31, .35);
  background: linear-gradient(135deg, #fde68a, #fbe6e6);
  transform: rotate(1.5deg);
}
.hg-photo img { color: transparent; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.hg-slide.is-active .hg-photo img { animation: hg-kenburns 7s ease-out forwards; }
@keyframes hg-kenburns {
  0% { transform: scale(1.18) translate(2%, 1%); }
  100% { transform: scale(1.02) translate(0, 0); }
}
.hg-photo-frame {
  position: absolute; inset: -14px 14px 14px -14px;
  border: 3px dashed rgba(245, 158, 11, .55);
  border-radius: 32px;
  transform: rotate(-2deg);
}

/* Thẻ thông tin nổi lơ lửng trên ảnh */
.hg-float-card { animation: hg-float 5s ease-in-out infinite; }
.hg-float-card.delay { animation-delay: -2.5s; }
@keyframes hg-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Thanh tiến trình tự chạy */
.hg-progress { height: 3px; background: rgba(139, 26, 31, .1); overflow: hidden; border-radius: 3px; }
.hg-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b8363c, #f59e0b); }
.hg-progress.run > span { animation: hg-progress linear forwards; }
@keyframes hg-progress { from { width: 0; } to { width: 100%; } }

/* Tab dịch vụ phía dưới slider */
.hg-tab { transition: all .3s; }
.hg-tab.is-active {
  background: #fff;
  border-color: #fca5a5;
  box-shadow: 0 12px 30px -16px rgba(139, 26, 31, .45);
  transform: translateY(-4px);
}
.hg-tab.is-active .hg-tab-icon { background: linear-gradient(135deg, #b8363c, #f59e0b); color: #fff; }

/* =========================================================
   BĂNG CHỮ CHẠY (MARQUEE)
   ========================================================= */
.hg-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hg-marquee-track { display: flex; width: max-content; animation: hg-marquee 32s linear infinite; }
.hg-marquee:hover .hg-marquee-track { animation-play-state: paused; }
.hg-marquee-track.slow { animation-duration: 45s; }
@keyframes hg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =========================================================
   THẺ DỊCH VỤ & HIỆU ỨNG XUẤT HIỆN KHI CUỘN
   ========================================================= */
.hg-reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.hg-reveal.is-visible { opacity: 1; transform: none; }

.hg-service-card { position: relative; overflow: hidden; transition: transform .35s, box-shadow .35s, border-color .35s; }
.hg-service-card::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 4px; width: 0;
  background: linear-gradient(90deg, #b8363c, #f59e0b);
  transition: width .4s;
}
.hg-service-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(139, 26, 31, .45); border-color: #fecaca; }
.hg-service-card:hover::after { width: 100%; }
.hg-service-card:hover .hg-service-icon { transform: rotate(-8deg) scale(1.08); }
.hg-service-icon { transition: transform .35s; }

/* Banner khuyến mãi có nền gradient chuyển động */
.hg-animated-bg {
  background-size: 220% 220%;
  animation: hg-gradient 10s ease infinite;
}
@keyframes hg-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Đường nối các bước quy trình */
.hg-steps { position: relative; }
@media (min-width: 1024px) {
  .hg-steps::before {
    content: "";
    position: absolute; top: 40px; left: 12%; right: 12%;
    border-top: 2px dashed #fcd34d;
  }
}

/* FAQ */
.hg-faq summary { list-style: none; cursor: pointer; }
.hg-faq summary::-webkit-details-marker { display: none; }
.hg-faq summary .hg-faq-icon { transition: transform .3s; }
.hg-faq[open] summary .hg-faq-icon { transform: rotate(45deg); }

/* Banner tiêu đề trang con (sáng) */
.hg-page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(700px 300px at 90% 0%, rgba(251, 191, 36, .25), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(209, 79, 84, .15), transparent 60%),
    linear-gradient(180deg, #fff, #fffaf2);
}
.hg-page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(139,26,31,.12) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%, #000 60%, transparent);
  pointer-events: none;
}

/* Tôn trọng người dùng tắt hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hg-reveal, .hg-slide [data-anim] { opacity: 1 !important; transform: none !important; }
}