/* =====================================================================
   VULUXURY · vlx-luu-chon.css — giao diện cụm "quyết định nhóm"
   Mọi biến màu đều có GIÁ TRỊ DỰ PHÒNG để chạy được ở cả 4 web.
   ===================================================================== */

/* ---------- 1. Nút tim trên thẻ sản phẩm ----------
   GIỐNG HỆT nút ❤ của du thuyền: viên thuốc trắng · tim viền coral · kèm SỐ
   (luôn hiện, kể cả 0). Chủ chốt 23/07: 4 web đồng bộ 100% theo du thuyền. */
.vlx-lc-tim{
  position:absolute; top:11px; right:11px; z-index:6;
  display:flex; align-items:center; gap:5px;
  padding:5px 10px 5px 9px; border:0; border-radius:20px;
  background:rgba(255,255,255,.95); box-shadow:0 2px 8px rgba(10,42,74,.15);
  font-weight:700; font-size:.8rem; color:var(--navy,#0A2A4A); line-height:1;
  cursor:pointer; transition:transform .16s ease, filter .16s ease;
}
.vlx-lc-tim:hover{ transform:translateY(-1px); filter:brightness(1.03) }
.vlx-lc-tim:active{ transform:scale(.96) }
.vlx-lc-tim svg{ width:15px; height:15px; fill:none; stroke:var(--coral,#D85A30);
  stroke-width:2; stroke-linejoin:round; transition:fill .18s ease }
.vlx-lc-tim.on svg{ fill:var(--coral,#D85A30) }
.vlx-lc-tim .so{ font:inherit; color:inherit }
.vlx-lc-tim.on .so{ color:var(--coral,#D85A30) }
.vlx-lc-tim:focus-visible{ outline:3px solid var(--gold,#C9A84C); outline-offset:2px }
/* Thẻ có nút so sánh native (tour) ở góc phải -> dời tim sang trái cho khỏi đè */
.vlx-lc-tim.ben-trai{ right:52px }

/* ---------- Nút ❤ VỐN CÓ của web (du thuyền) khi đã lưu ----------
   KHÔNG đổi kích thước, màu nền, bo góc hay vị trí — giữ đúng thiết kế gốc.
   Chỉ TÔ ĐẶC trái tim để khách biết đã lưu. */
.fav.vlx-luu{ cursor:pointer }
.fav.vlx-luu svg{ transition:fill .18s ease }
.fav.vlx-luu.on svg{ fill:var(--coral,#D85A30) }
.fav.vlx-luu:hover{ filter:brightness(1.03) }
.fav.vlx-luu:focus-visible{ outline:3px solid var(--gold,#C9A84C); outline-offset:2px }

/* ---------- Nút "Lưu lại" ở trang chi tiết ---------- */
.vlx-lc-luu-ct{
  display:inline-flex; align-items:center; gap:7px; margin:6px 0 12px;
  padding:9px 16px; border:1.5px solid var(--line,#e3e8ee); border-radius:999px;
  background:#fff; color:var(--ink,#0A2A4A); font:inherit; font-size:.9rem;
  font-weight:600; cursor:pointer; transition:border-color .16s, color .16s;
}
.vlx-lc-luu-ct svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linejoin:round }
.vlx-lc-luu-ct:hover{ border-color:var(--coral,#D85A30) }
.vlx-lc-luu-ct.on{ border-color:var(--coral,#D85A30); color:var(--coral,#D85A30) }
.vlx-lc-luu-ct.on svg{ fill:var(--coral,#D85A30) }

/* ---------- Dòng "N lượt yêu thích {loại} này" ở trang CHI TIẾT ----------
   Thay cho nút Lưu (chủ chốt bỏ nút Lưu ở chi tiết). Nhỏ, cạnh tiêu đề. */
.vlx-lc-luot-ct{ display:inline-flex; align-items:center; gap:6px; margin:6px 0 12px;
  font-size:.9rem; font-weight:600; color:var(--coral,#D85A30) }
.vlx-lc-luot-ct svg{ width:16px; height:16px; fill:var(--coral,#D85A30); stroke:var(--coral,#D85A30) }
.vlx-lc-luot-ct .so{ font-weight:800 }


/* ---------- Hộp "Vì sao VuLuxury chọn" ở trang chi tiết ----------
   Lời tuyển chọn chuyên gia — tăng uy tín + AI thích trích. */
.vlx-vsc{ margin:8px 0 10px; padding:11px 14px; border-radius:11px;
  background:var(--cream,#FAF7F0); border-left:3px solid var(--gold,#C9A84C);
  color:var(--ink,#0A2A4A); font-size:.92rem; line-height:1.55 }
.vlx-vsc b{ color:var(--navy,#0A2A4A) }

/* ---------- 2. Thanh "Đã chọn N" ở đáy ---------- */
.vlx-lc-bar{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(140%);
  z-index:9000; display:flex; align-items:center; gap:8px;
  padding:9px 10px 9px 16px; border-radius:999px;
  background:var(--navy,#0A2A4A); color:#fff;
  box-shadow:0 10px 30px rgba(10,42,74,.34);
  opacity:0; pointer-events:none; transition:transform .28s ease, opacity .28s ease;
  max-width:calc(100vw - 24px);
}
.vlx-lc-bar.on{ transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto }
.vlx-lc-dem{ font-size:.87rem; white-space:nowrap }
.vlx-lc-dem b{ color:var(--gold,#C9A84C); font-size:1rem }
.vlx-lc-b{
  padding:8px 13px; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff; font:inherit; font-size:.83rem;
  font-weight:600; white-space:nowrap; text-decoration:none; line-height:1.2;
}
.vlx-lc-b:hover{ background:rgba(255,255,255,.28) }
.vlx-lc-b.zl{ background:var(--zalo,#06C755) }
.vlx-lc-b.zl:hover{ filter:brightness(1.08) }
.vlx-lc-x{
  width:30px; height:30px; flex:0 0 30px; border:0; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; cursor:pointer; font-size:15px; line-height:1;
}
.vlx-lc-x:hover{ background:rgba(255,255,255,.24) }

/* Điện thoại: thanh trải ngang, chữ nhỏ lại cho đủ chỗ */
@media (max-width:520px){
  .vlx-lc-bar{ left:10px; right:10px; bottom:12px; transform:translateY(140%);
    max-width:none; padding:8px 8px 8px 13px; gap:6px; justify-content:space-between }
  .vlx-lc-bar.on{ transform:translateY(0) }
  .vlx-lc-b{ padding:8px 10px; font-size:.78rem }
  .vlx-lc-dem{ font-size:.8rem }
}
/* Không đè lên nút trợ lý ở góc phải */
@media (min-width:521px){ .vlx-lc-bar{ margin-right:64px } }

/* ---------- 3. Bảng so sánh ---------- */
.vlx-lc-ov{
  position:fixed; inset:0; z-index:9600; background:rgba(8,24,42,.74);
  display:flex; align-items:flex-start; justify-content:center;
  padding:24px 14px; overflow:auto;
}
.vlx-lc-hop{
  position:relative; width:100%; max-width:980px; background:#fff;
  border-radius:16px; padding:20px 20px 22px;
}
.vlx-lc-hop h3{ margin:0 34px 14px 0; font-size:1.24rem; color:var(--navy,#0A2A4A) }
.vlx-lc-dong{
  position:absolute; top:12px; right:12px; width:34px; height:34px;
  border:0; border-radius:50%; background:var(--cream,#FAF7F0);
  color:var(--navy,#0A2A4A); font-size:16px; cursor:pointer;
}
.vlx-lc-dong:hover{ background:#eee7d8 }




.vlx-lc-gia s{ color:var(--muted,#8a97a3); font-size:.84rem; margin-right:5px }
.vlx-lc-gia b{ color:var(--coral,#D85A30); font-size:1.06rem }




.vlx-lc-kh{ color:#c3cbd4; font-weight:400 }
.vlx-lc-xem{
  color:var(--teal,#1A5F7A); font-weight:600; font-size:.87rem; text-decoration:none;
}
.vlx-lc-xem:hover{ text-decoration:underline }
.vlx-lc-bo{
  margin-top:auto; padding:7px; border:1px solid var(--line,#e3e8ee); border-radius:8px;
  background:#fff; color:var(--muted,#8a97a3); font:inherit; font-size:.8rem; cursor:pointer;
}
.vlx-lc-bo:hover{ border-color:var(--coral,#D85A30); color:var(--coral,#D85A30) }
.vlx-lc-ghi{ margin:15px 0 0; font-size:.85rem; color:var(--muted,#8a97a3); line-height:1.6 }
.vlx-lc-trong{ font-size:.95rem; color:var(--muted,#8a97a3); line-height:1.7 }

/* ---------- BẢNG SO SÁNH dạng bảng (hàng=tiêu chí · cột=sản phẩm) ---------- */
.vlx-lc-tb{ width:100%; border-collapse:collapse; margin-top:6px }
.vlx-lc-tb th,.vlx-lc-tb td{ border:1px solid var(--line,#e3efee); padding:9px 11px;
  font-size:.85rem; vertical-align:top; text-align:left }
.vlx-lc-tb th{ background:var(--cream,#FAF7F0); color:var(--navy,#0A2A4A);
  font-weight:700; width:120px; white-space:nowrap }
.vlx-lc-tb td.nm{ font-weight:700; color:var(--navy,#0A2A4A) }
.vlx-lc-tb td.pr b{ color:var(--coral,#D85A30); font-weight:800 }
.vlx-lc-tb td.pr s{ color:var(--muted,#8a97a3); font-weight:400; margin-right:5px }
.vlx-lc-tb img{ width:100%; max-width:190px; height:96px; object-fit:cover; border-radius:8px; display:block }
.vlx-lc-noanh{ width:100%; max-width:190px; height:96px; border-radius:8px; background:var(--cream,#FAF7F0) }
.vlx-lc-tb .vlx-lc-bo{ display:inline-block; margin-top:6px; margin-left:0 }
.vlx-lc-kh{ color:#c3cbd4; font-weight:400 }
.vlx-lc-tb .vlx-lc-xem{ display:inline-block }

/* ---------- Thông báo nhỏ ---------- */
.vlx-lc-toast{
  position:fixed; left:50%; bottom:78px; transform:translateX(-50%) translateY(14px);
  z-index:9800; max-width:min(92vw,420px);
  padding:11px 17px; border-radius:11px; text-align:center;
  background:var(--navy,#0A2A4A); color:#fff; font-size:.85rem; line-height:1.5;
  opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
}
.vlx-lc-toast.on{ opacity:1; transform:translateX(-50%) translateY(0) }

@media (prefers-reduced-motion:reduce){
  .vlx-lc-tim,.vlx-lc-bar,.vlx-lc-toast{ transition:none }
}

/* ---------- GỢI Ý THEO DỊP (vlx-dip.js) ---------- */
.vlx-dip-wrap{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; margin:0 0 14px }
.vlx-dip-tit{ font-weight:700; color:var(--navy,#0A2A4A); font-size:.9rem }
.vlx-dip-bar{ display:flex; flex-wrap:wrap; gap:7px }
.vlx-dip-c{ padding:7px 13px; border:1.5px solid var(--line,#e3e8ee); border-radius:999px;
  background:#fff; color:var(--ink,#0A2A4A); font:inherit; font-size:.83rem; font-weight:600;
  cursor:pointer; transition:.15s; white-space:nowrap }
.vlx-dip-c:hover{ border-color:var(--gold,#C9A84C) }
.vlx-dip-c.on{ background:var(--navy,#0A2A4A); color:#fff; border-color:var(--navy,#0A2A4A) }