/* Hiệu ứng sống động cho MỌI mẫu website (owner 2026-10-05: "template nhàm chán — thêm màu sắc, background, hiệu ứng 3D cho card, quả
   bóng chuyển động, hình chạy keyframe"). Mọi màu lấy từ token của mẫu (--w-chinh / --w-phu…) nên công ty đổi màu là hiệu ứng đổi
   theo. Chỉ animate transform / opacity; người xem bật "giảm chuyển động" thì đứng yên. JS đi kèm: /js/hieu-ung.js. */

/* Màu nắng cố định cho thứ nằm TRÊN ảnh bìa (quả cầu, đường bay) — màu phụ của mẫu có thể là trắng, chìm trên ảnh. */
:root { --hu-nang: #ffb547; }

/* Thẻ tour: thiết kế + chiều cao đều + rê chuột nằm ở site.css (khối "Thẻ tour v4", phiếu 048). Owner 2026-10-09 chê thẻ nghiêng 3D
   ("thiết kế card quá xấu") → bỏ nghiêng theo chuột và vệt sáng. */

/* ---------- Nền hoạ tiết theo màu mẫu (đồng mức / sóng / đường bay / địa cầu) ---------- */
.hu-nen { position: relative; isolation: isolate; }
.hu-nen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--w-chinh); opacity: .1;
  -webkit-mask: var(--hu-hinh) var(--hu-vi, center) / var(--hu-co, 1100px auto) no-repeat;
          mask: var(--hu-hinh) var(--hu-vi, center) / var(--hu-co, 1100px auto) no-repeat;
}
.hu-topo { --hu-hinh: url(/img/hoa-tiet/topo.svg); --hu-vi: -160px -60px; --hu-co: 900px auto; }
.hu-song { --hu-hinh: url(/img/hoa-tiet/waves.svg); --hu-vi: center bottom; --hu-co: 1500px auto; }
.hu-bay { --hu-hinh: url(/img/hoa-tiet/routes.svg); --hu-vi: center 40%; --hu-co: 1300px auto; }
.hu-cau-dat { --hu-hinh: url(/img/hoa-tiet/globe.svg); --hu-vi: calc(100% + 160px) -120px; --hu-co: 620px 620px; }
.hu-song::before { opacity: .13; }
@media (max-width: 640px) { .hu-nen::before { opacity: .07; } }

/* ---------- Quả cầu trôi (JS chèn, quỹ đạo riêng qua biến --x1…--y3, --d, --tre) ---------- */
.hu-cau {
  position: absolute; pointer-events: none; border-radius: 50%;
  width: var(--co, 60px); height: var(--co, 60px); opacity: var(--mo, .85);
  background: radial-gradient(circle at 32% 28%, var(--w-trang) 0 7%, color-mix(in srgb, var(--mau, var(--w-phu)) 45%, var(--w-trang)) 18%, var(--mau, var(--w-phu)) 50%, color-mix(in srgb, var(--mau, var(--w-phu)) 70%, var(--w-den)) 100%);
  box-shadow: 0 0 34px color-mix(in srgb, var(--mau, var(--w-phu)) 55%, transparent);
  animation: hu-troi var(--d, 14s) ease-in-out var(--tre, 0s) infinite alternate;
  will-change: transform;
}
@keyframes hu-troi {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(var(--x1, 20px), var(--y1, -24px), 0) scale(1.06); }
  66% { transform: translate3d(var(--x2, -16px), var(--y2, 18px), 0) scale(.95); }
  100% { transform: translate3d(var(--x3, 24px), var(--y3, 10px), 0) scale(1.03); }
}
/* Quả cầu nằm DƯỚI nội dung (z-index âm trong khối có isolation — trên nền khối, dưới chữ / thẻ). Ảnh bìa: ảnh phủ kín nên cầu
   phải nằm TRÊN ảnh, đặt ở mép phải / trên để không che chữ. */
.hu-co-cau { position: relative; overflow: hidden; isolation: isolate; }
.hu-cau { z-index: -1; }
.k-hero .hu-cau { z-index: 2; }


/* Hiện dần khi cuộn: GSAP + ScrollTrigger (/js/motion.js, phiếu 048). KHÔNG ẩn bằng CSS chờ JS — nội dung luôn hiện sẵn; JS chỉ ẩn rồi
   hiện lại khi GSAP đã sẵn sàng. Trong lúc GSAP chạy, tắt transition CSS của chính phần tử (tránh hai bên giành transform/opacity). */
.hu-gsap-dang { transition: none !important; }

/* ---------- Tiêu đề mục: gạch nhấn chạy ---------- */
.hu-gach { position: relative; }
.hu-gach::after {
  content: ""; display: block; width: 64px; height: 4px; margin-top: .45em; border-radius: 4px;
  background: linear-gradient(90deg, var(--w-chinh), var(--w-phu), var(--w-chinh)); background-size: 200% 100%;
  animation: hu-gach 4s linear infinite;
}
.hu-gach.giua::after { margin-inline: auto; }
@keyframes hu-gach { to { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .hu-cau, .hu-gach::after { animation: none; }
}

/* ---------- Linh vật chào khách + mở chat (owner 2026-10-05) ---------- */
.tl-chao { position: fixed; bottom: 14px; z-index: 40; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.tl-chao.ben-trai { left: 10px; }
.tl-chao.ben-phai { right: 10px; flex-direction: row-reverse; }
.tl-chao > * { pointer-events: auto; }
.tl-nut { position: relative; border: 0; padding: 0; background: none; cursor: pointer; filter: drop-shadow(0 10px 18px rgb(0 0 0 / 22%)); transform-origin: 50% 100%; animation: tl-nhun 3.2s ease-in-out infinite; }
.tl-nut:focus-visible { outline: 3px solid var(--w-focus); outline-offset: 4px; border-radius: 16px; }
.tl-so { position: absolute; top: 2px; right: 2px; z-index: 1; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--w-trang); background: #dc2626; box-shadow: 0 0 0 2px var(--w-trang); }
.tl-so[hidden] { display: none; }
.tl-hinh { width: clamp(78px, 9vw, 112px); height: auto; display: block; }
.tl-khong-hinh .tl-nut { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: var(--w-chu-tren-chinh); background: var(--w-chinh); }
.tl-bieu-tuong { width: 26px; height: 26px; }
@keyframes tl-nhun { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-2deg); } }
.tl-bong {
  position: relative; margin-bottom: 52px; max-width: 260px; padding: 12px 34px 12px 14px; border-radius: 16px 16px 16px 4px;
  color: var(--w-chu-tren-chinh); background: var(--w-chinh); box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--w-chinh) 80%, var(--w-den));
  animation: tl-hien .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
.ben-phai .tl-bong { border-radius: 16px 16px 4px 16px; }
.tl-bong[hidden] { display: none; }
.tl-loi { display: grid; gap: 2px; border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tl-loi b { font-size: .92rem; }
.tl-loi span { font-size: .84rem; opacity: .9; }
.tl-dong { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 25%); color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
@keyframes tl-hien { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .tl-bong { max-width: 200px; margin-bottom: 40px; } .tl-loi span { display: none; } }
@media (prefers-reduced-motion: reduce) { .tl-nut, .tl-bong { animation: none; } }
.xem-truoc .tl-chao { display: none; }

/* ---------- Hover toàn website (owner 2026-10-05: "nhiều chỗ hover chưa có hiệu ứng shadow — trông bé mà rất quan trọng") ----------
   Thứ bấm được: nhấc nhẹ + bóng nhuốm màu chính của mẫu; ô nhập: viền + bóng; chỉ máy có chuột. Nạp sau site.css nên đè được. */
.nut, .nut-phu, .menu a, .dc-lk, .chip-ngay, .tim-nhanh a, .loc-dang a, .loc-chip label, .dd-ds a, .bst-ds a, .bv-ds li, .dg-ds figure,
.lydo-ds li, .dai-ht-ds a, .sl-nut, .noi-nut, .lcn-o, .lcn-thang a, .o select, .o input, .o-don input, .o-don select, .o-don textarea,
.logo-ds img, .ct-tv-thumb button, .dau-goi, .tim-diem-den a {
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease,
    opacity .7s ease;
}
@media (hover: hover) and (pointer: fine) {
  .nut:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--w-chinh) 85%, transparent); }
  .nut-dac .nut:hover { box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--w-phu) 85%, transparent); }
  .nut-phu:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--w-chinh) 70%, transparent); }
  .menu a:hover { box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--w-chinh) 70%, transparent); }
  .dau-goi:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--w-chinh) 75%, transparent); }
  .dc-lk:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--w-chinh) 5%, var(--w-trang)); border-radius: var(--w-bo);
    box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--w-chinh) 80%, transparent); }
  .chip-ngay:hover, .tim-nhanh a:hover, .loc-dang a:hover, .lcn-thang a:hover, .lcn-o:hover {
    transform: translateY(-1px); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--w-chinh) 70%, transparent); }
  .loc-chip label:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--w-chinh) 70%, transparent); }
  .dd-ds a:hover, .bst-ds a:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px color-mix(in srgb, var(--w-den) 60%, transparent); }
  html:not(.hu-gsap) .tim-diem-den a:hover { transform: translateY(-3px); }   /* có GSAP: ảnh tròn nảy (motion.js) */
  .bv-ds li:hover { transform: translateY(-3px); }
  .bv-ds li:hover h3 { color: var(--w-chinh); }
  .dg-ds figure:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--w-chinh) 35%, var(--w-vien));
    box-shadow: 0 22px 40px -26px color-mix(in srgb, var(--w-chinh) 75%, transparent); }
  .lydo-ds li:hover { transform: translateY(-4px); }
  .dai-ht-ds a:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--w-den) 70%, transparent); }
  .sl-nut:hover { transform: scale(1.06); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--w-chinh) 80%, transparent); }
  .noi-nut:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 16px 30px -12px color-mix(in srgb, var(--w-chinh) 85%, transparent); }
  .o select:hover, .o input:hover, .o-don :is(input, select, textarea):hover { border-color: color-mix(in srgb, var(--w-chinh) 50%, var(--w-o-vien));
    box-shadow: 0 6px 16px -12px color-mix(in srgb, var(--w-chinh) 80%, transparent); }
  .logo-ds img:hover { transform: translateY(-2px); }
  .ct-tv-thumb button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--w-den) 70%, transparent); }
  .tl-nut:hover { animation-play-state: paused; transform: translateY(-6px) scale(1.05); }
  .tl-loi:hover b { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) {
  .nut:hover, .nut-phu:hover, .dc-lk:hover, .dd-ds a:hover, .bst-ds a:hover, .bv-ds li:hover, .dg-ds figure:hover, .lydo-ds li:hover,
  .dai-ht-ds a:hover, .sl-nut:hover, .noi-nut:hover, .tl-nut:hover { transform: none; }
}

/* Mật độ màn hẹp (owner 2026-10-09): linh vật nhỏ lại, bong bóng chào gọn một dòng, không che nội dung — tự ẩn sau vài giây
   (hieu-ung.js, nhớ trong phiên, không tự bật lại); đứng trên thanh đặt tour dính đáy. */
@media (max-width: 575.98px) {
  .tl-chao { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .tl-hinh { width: 58px; }
  .tl-bong { max-width: 168px; margin-bottom: 28px; padding: 8px 28px 8px 10px; border-radius: 12px 12px 12px 4px; }
  .tl-loi b { font-size: .8rem; }
}
@media (max-width: 960px) {
  body:has(.thanh-dat:not(.an-di)) .tl-chao { bottom: calc(70px + env(safe-area-inset-bottom)); }
}