/* 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: thẻ nổi + nghiêng 3D theo chuột + vệt sáng ---------- */
.the-tour {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  background: color-mix(in srgb, var(--w-nen) 30%, var(--w-trang));
  border-radius: calc(var(--w-bo) + 4px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--w-chinh) 10%, transparent), 0 18px 40px -26px color-mix(in srgb, var(--w-chinh) 70%, transparent);
  outline: 1px solid color-mix(in srgb, var(--w-chinh) 12%, transparent);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
  overflow: hidden;
  isolation: isolate;
}
.the-tour .the-anh { border-radius: calc(var(--w-bo) + 4px) calc(var(--w-bo) + 4px) 0 0; }
.the-tour .the-than { padding: 14px 16px 0; }
.the-tour::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(circle at var(--mx) var(--my), rgb(255 255 255 / 38%), transparent 46%);
}
.the-tour.hu-nghieng { transition: transform .08s linear, box-shadow .35s ease; }
.the-tour:hover {
  box-shadow: 0 2px 0 color-mix(in srgb, var(--w-chinh) 14%, transparent), 0 30px 60px -28px color-mix(in srgb, var(--w-chinh) 85%, transparent);
}
.the-tour:hover::after { opacity: 1; }
.the-tour:not(.hu-nghieng):hover { transform: perspective(900px) translateY(-6px); }

/* Giá + nút "Xem chi tiết" góc dưới (cả thẻ vẫn là MỘT liên kết; nút chỉ là chỉ dẫn thị giác). */
.the-tour .the-gia { margin: auto -16px 0; padding: 12px 0 0 16px; border-top: 1px dashed color-mix(in srgb, var(--w-chinh) 22%, transparent); align-items: center; }
.the-tour .the-gia b { font-size: 1.25rem; }
.the-xem {
  margin-left: auto; align-self: stretch; display: inline-flex; align-items: center; gap: .4em;
  padding: .7em 1.1em .7em 1.25em; border-radius: 18px 0 0 0; font-weight: 700; font-size: .92rem; white-space: nowrap;
  color: var(--w-chu-tren-chinh); background: var(--w-chinh);
  transition: padding .3s ease, background .3s ease;
}
.the-xem::after { content: "→"; transition: transform .3s ease; }
.the-tour:hover .the-xem { background: var(--w-chinh-dam); }
.the-tour:hover .the-xem::after { transform: translateX(4px); }
.the-tour:not(:has(.the-gia)) .the-than { padding-bottom: 16px; }

/* Thẻ dạng hàng (danh sách kết quả): giữ bố cục ngang, chỉ nổi + vệt sáng, không nghiêng mạnh. */
.the-hang { transform: none; }

/* ---------- 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 ---------- */
.hu-hien { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--tre-hien, 0s); }
.hu-hien.hu-da-hien { opacity: 1; transform: none; }
/* Thẻ tour hiện dần nhưng vẫn giữ nghiêng 3D sau khi hiện. */
.the-tour.hu-hien.hu-da-hien { transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); }

/* ---------- 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; }
  .hu-hien { opacity: 1; transform: none; transition: none; }
  .the-tour, .the-tour:hover { transform: none; transition: none; }
}
/* Trình dựng trang (xem trước): không nghiêng thẻ — tránh rung khi kéo thả / chọn khối. */
.xem-truoc .the-tour { transform: 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;   /* giữ mờ dần khi cuộn (hu-hien) */
}
@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); }
  .tim-diem-den a:hover { transform: translateY(-3px); }
  .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; }
}

/* Owner 2026-10-06 ("xem chi tiết bị cắt mất text"): thẻ hẹp (lưới 4 cột, ~250 px) không đủ chỗ cho giá + chữ "Xem chi tiết" (không xuống
   dòng) → nút chỉ còn mũi tên. Cả thẻ vẫn là MỘT liên kết; chữ trên nút chỉ là chỉ dẫn thị giác (aria-hidden). */
.the-tour { container-type: inline-size; }
@container (max-width: 300px) {
  /* font-size 0 làm padding theo em = 0 → phải dùng px (lỗi 2026-10-06: nút co còn một chấm). */
  .the-xem { font-size: 0; gap: 0; min-width: 56px; padding: 0 18px; justify-content: center; }
  .the-xem::after { font-size: 18px; line-height: 1; }
  .the-tour .the-gia b { font-size: 1.1rem; }
}