/* ================================================================
   TRỢ LÝ TÌM CĂN — CSS riêng, không đụng v3.css.
   Toàn bộ lớp đặt tiền tố "tro-ly-" để không bao giờ trùng tên với
   class chung của site (.card, .msg, .opt... đều rất dễ trùng nếu
   không có tiền tố).
   Màu/khoảng cách dùng lại biến của v3.css (--navy-2, --zalo, --ink...)
   để giao diện đồng bộ với phần còn lại của trang — file này load SAU
   v3.css nên các biến đó chắc chắn đã có sẵn.
   ================================================================ */
:root{
  --tl-sab:env(safe-area-inset-bottom,0px);
  --tl-sat:env(safe-area-inset-top,0px);
  --tl-shadow:0 10px 30px rgba(18,32,58,.16);
}

/* Khoá cuộn trang nền khi widget mở toàn màn hình trên điện thoại. */
body.tro-ly-lock{overflow:hidden}

.tro-ly-wrap,.tro-ly-restore,.tro-ly-toast{font-family:var(--font-chu,'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif)}
.tro-ly-wrap *,.tro-ly-restore *,.tro-ly-toast *{box-sizing:border-box}

/* ---- Vị trí nổi. Đặt CAO HƠN bong bóng Zalo sẵn có (right:20px;bottom:22px;
   56x56;z-index:70) một khoảng, để hai bong bóng không đè lên nhau.
   Bong bóng ĐÓNG giữ z-index:60 — thấp hơn .quick-bar (65) và .tabbar (70)
   của trang, cố tình để không tranh chỗ với các lớp đó khi chưa mở.
   Khi panel MỞ thì nâng lên 72: cao hơn .quick-bar (65) và .tabbar (70) —
   hai thứ hay đè lên chat khi đang mở — nhưng vẫn THẤP hơn .filters (80),
   .tabbar-backdrop (85), .tabbar-sheet (88) và .modal (90) của trang, để
   khách mở bộ lọc hoặc menu thì hai thứ đó vẫn nổi lên trên chat, đúng thứ
   tự ưu tiên. Không dùng số cao hơn (kiểu 9999) — số đó thuộc về .nhac-copy
   (thông báo "đã sao chép") của trang, đè lên sẽ hỏng thông báo copy. ---- */
.tro-ly-wrap{
  position:fixed;right:20px;bottom:90px;z-index:60;
  transition:opacity .2s;
}
.tro-ly-wrap.tro-ly-open{z-index:72}
.tro-ly-wrap.tro-ly-gone{opacity:0;pointer-events:none;visibility:hidden}

.tro-ly-toggle{
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;
  background:var(--navy-2,#1B4B8F);color:#fff;box-shadow:var(--tl-shadow);
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s,background .18s;position:relative;
}
.tro-ly-toggle:hover{transform:scale(1.06);background:var(--navy,#12325C)}
.tro-ly-toggle:focus-visible,.tro-ly-opt:focus-visible,.tro-ly-ic:focus-visible,
.tro-ly-restore:focus-visible,.tro-ly-send:focus-visible,.tro-ly-unit-acts button:focus-visible,
.tro-ly-zalo-cta:focus-visible{outline:3px solid var(--navy-2,#1B4B8F);outline-offset:3px}
.tro-ly-toggle svg{width:27px;height:27px}
.tro-ly-badge{position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;background:#EF4444;border:2.5px solid var(--bg,#F4F6F9)}
.tro-ly-wrap.tro-ly-open .tro-ly-badge{display:none}

.tro-ly-panel{
  position:absolute;right:0;bottom:0;width:378px;height:566px;max-height:calc(100vh - 40px);
  background:var(--surface,#fff);border-radius:18px;box-shadow:var(--tl-shadow);
  display:flex;flex-direction:column;overflow:hidden;
  opacity:0;pointer-events:none;transform:translateY(10px) scale(.98);
  transition:opacity .2s,transform .2s;
}
.tro-ly-wrap.tro-ly-open .tro-ly-panel{opacity:1;pointer-events:auto;transform:none}
.tro-ly-wrap.tro-ly-open .tro-ly-toggle{opacity:0;pointer-events:none}

/* Nền mờ phía sau panel — chỉ có tác dụng thấy được ở mobile (xem @media
   bên dưới), nhưng khai báo base ở đây để phần tử luôn tồn tại trong DOM. */
.tro-ly-backdrop{display:none}

/* Thanh nắm để vuốt đóng — chỉ hiện ở mobile, xem @media bên dưới. */
.tro-ly-grabber{display:none}

.tro-ly-head{
  background:var(--ink,#16202B);color:#fff;padding:13px 12px 13px 16px;
  display:flex;align-items:center;gap:11px;flex:0 0 auto;
  position:sticky;top:0;z-index:2;
}
.tro-ly-av{width:36px;height:36px;border-radius:50%;background:var(--navy-2,#1B4B8F);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 auto}
.tro-ly-head h3{margin:0;font-size:14.5px;font-weight:600}
.tro-ly-head p{margin:1px 0 0;font-size:11.5px;opacity:.72;display:flex;align-items:center;gap:5px}
.tro-ly-dot{width:6px;height:6px;border-radius:50%;background:#4ADE80;display:inline-block;flex:0 0 auto}
.tro-ly-acts{margin-left:auto;display:flex;gap:2px}
.tro-ly-ic{background:none;border:none;color:#fff;opacity:.9;cursor:pointer;width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0}
.tro-ly-ic:hover{opacity:1;background:rgba(255,255,255,.12)}
.tro-ly-ic svg{width:17px;height:17px}

.tro-ly-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px;background:var(--bg,#F4F6F9);display:flex;flex-direction:column;gap:11px}
.tro-ly-body::-webkit-scrollbar{width:6px}
.tro-ly-body::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:3px}
/* Dồn tin nhắn xuống đáy khi hội thoại còn ngắn, không dùng justify-content:
   flex-end vì kết hợp với overflow-y:auto sẽ đẩy phần tràn lên trên vùng
   cuộn, khiến scrollTop âm không tới được — tin nhắn cũ mất luôn. */
.tro-ly-body::before{content:"";margin-top:auto}

.tro-ly-msg{max-width:88%;font-size:14px;line-height:1.62;padding:10px 13px;border-radius:14px;animation:tro-ly-pop .22s ease-out}
@keyframes tro-ly-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tro-ly-msg-bot{background:var(--surface,#fff);border:1px solid var(--line,#E3E8EE);border-bottom-left-radius:4px;align-self:flex-start}
.tro-ly-msg-user{background:var(--ink,#16202B);color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.tro-ly-msg b{font-weight:600}

.tro-ly-opts{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:96%}
.tro-ly-opt{
  background:var(--surface,#fff);border:1.5px solid var(--navy-2,#1B4B8F);color:var(--navy-2,#1B4B8F);
  border-radius:999px;padding:10px 16px;font-size:13.5px;font-weight:500;cursor:pointer;
  font-family:inherit;transition:.15s;min-height:40px;
}
.tro-ly-opt:hover{background:var(--navy-2,#1B4B8F);color:#fff}
.tro-ly-opt i{font-style:normal;opacity:.65;font-size:12px;margin-left:3px}
.tro-ly-opt.tro-ly-ghost{border-color:var(--line,#E3E8EE);color:var(--gray,#5B6875)}
.tro-ly-opt.tro-ly-ghost:hover{background:var(--gray,#5B6875);border-color:var(--gray,#5B6875);color:#fff}

.tro-ly-unit{background:var(--surface,#fff);border:1px solid var(--line,#E3E8EE);border-radius:12px;padding:11px 12px;align-self:flex-start;width:96%;animation:tro-ly-pop .22s ease-out}
.tro-ly-unit-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tro-ly-unit-code{font-size:12.5px;font-weight:700;letter-spacing:.04em}
.tro-ly-unit-code.tro-ly-nomark{color:var(--gray,#5B6875);font-weight:600}
.tro-ly-unit-price{font-size:15px;font-weight:700;color:var(--navy-2,#1B4B8F);white-space:nowrap}
.tro-ly-unit-meta{font-size:12.5px;color:var(--gray,#5B6875);margin-top:4px;line-height:1.5}
.tro-ly-unit-when{display:inline-block;margin-top:6px;font-size:11.5px;background:#EAF1FB;color:var(--navy,#12325C);border-radius:6px;padding:3px 8px;font-weight:600}
.tro-ly-unit-acts{display:flex;gap:8px;margin-top:10px}
.tro-ly-unit-acts button,.tro-ly-unit-acts a{
  flex:1;border-radius:9px;padding:10px 6px;font-size:12.5px;font-weight:600;cursor:pointer;
  font-family:inherit;border:none;transition:.15s;min-height:40px;
  display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;
}
.tro-ly-btn-detail{background:#EAF1FB;color:var(--navy,#12325C)}
.tro-ly-btn-detail:hover{background:#DCE8FA}
.tro-ly-btn-zalo{background:var(--zalo,#0068FF);color:#fff}
.tro-ly-btn-zalo:hover{filter:brightness(1.1)}

.tro-ly-zalo-cta{
  align-self:flex-start;background:var(--zalo,#0068FF);color:#fff;border:none;border-radius:10px;
  padding:11px 18px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:8px;min-height:42px;text-decoration:none;
}
.tro-ly-zalo-cta:hover{filter:brightness(1.1)}

.tro-ly-typing{display:flex;gap:4px;padding:13px 15px;background:var(--surface,#fff);border:1px solid var(--line,#E3E8EE);border-radius:14px;border-bottom-left-radius:4px;align-self:flex-start}
.tro-ly-typing i{width:6px;height:6px;background:#B4C0D0;border-radius:50%;animation:tro-ly-bl 1.3s infinite;font-style:normal}
.tro-ly-typing i:nth-child(2){animation-delay:.18s}
.tro-ly-typing i:nth-child(3){animation-delay:.36s}
@keyframes tro-ly-bl{0%,60%,100%{opacity:.3}30%{opacity:1}}

.tro-ly-foot{border-top:1px solid var(--line,#E3E8EE);background:var(--surface,#fff);padding:10px 12px;flex:0 0 auto}
.tro-ly-input-row{display:flex;gap:8px;align-items:center}
.tro-ly-input-row input{
  flex:1;min-width:0;border:1px solid var(--line,#E3E8EE);border-radius:999px;padding:11px 15px;
  font-size:16px;font-family:inherit;outline:none;background:var(--bg,#F4F6F9);color:var(--ink,#16202B);
}
.tro-ly-input-row input:focus{border-color:var(--navy-2,#1B4B8F);background:#fff}
.tro-ly-send{width:42px;height:42px;border-radius:50%;border:none;background:var(--navy-2,#1B4B8F);color:#fff;cursor:pointer;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.tro-ly-send:hover{background:var(--navy,#12325C)}
.tro-ly-send svg{width:18px;height:18px}
.tro-ly-hint{font-size:10.5px;color:var(--gray-lt,#8A96A3);text-align:center;margin-top:7px}
.tro-ly-hide-link{
  display:block;width:100%;text-align:center;margin-top:6px;padding:2px;
  background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:11.5px;color:var(--gray-lt,#8A96A3);text-decoration:underline;
}
.tro-ly-hide-link:hover{color:var(--gray,#5B6875)}

.tro-ly-restore{
  position:fixed;right:0;bottom:90px;z-index:60;background:var(--surface,#fff);
  border:1px solid var(--line,#E3E8EE);border-right:none;border-radius:999px 0 0 999px;
  padding:9px 14px 9px 15px;font-family:inherit;font-size:12.5px;font-weight:600;
  color:var(--gray,#5B6875);cursor:pointer;box-shadow:0 3px 12px rgba(18,32,58,.10);
  display:none;align-items:center;gap:7px;min-height:38px;
}
.tro-ly-restore.tro-ly-on{display:flex}
.tro-ly-restore:hover{color:var(--navy-2,#1B4B8F);border-color:var(--navy-2,#1B4B8F)}
.tro-ly-restore svg{width:14px;height:14px}

.tro-ly-toast{
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(14px);
  background:var(--ink,#16202B);color:#fff;padding:11px 18px;border-radius:10px;font-size:13px;
  opacity:0;pointer-events:none;transition:.24s;box-shadow:var(--tl-shadow);
  max-width:calc(100vw - 40px);text-align:center;
  /* Toast riêng của widget (vd "đã sao chép") phải nổi trên panel đang mở
     (z-index:72), nên đặt cao hơn panel một chút — nhưng vẫn thấp hơn
     .filters (80) của trang, không đụng .modal (90) hay .nhac-copy (9999). */
  z-index:73;
}
.tro-ly-toast.tro-ly-on{opacity:1;transform:translateX(-50%)}

/* Nháy viền khi trỏ khách tới thẻ căn hoặc khối bộ lọc trên trang chính.
   Đặt ở đây (không phải v3.css) vì chỉ widget này dùng tới. */
.tro-ly-highlight{box-shadow:0 0 0 3px rgba(27,75,143,.5) !important;transition:box-shadow .3s}

@media(max-width:640px){
  .tro-ly-wrap{right:14px;bottom:calc(70px + var(--tl-sab))}
  .tro-ly-restore{bottom:calc(70px + var(--tl-sab))}
  .tro-ly-toast{bottom:calc(66px + var(--tl-sab))}
  .tro-ly-toggle{width:56px;height:56px}
  .tro-ly-wrap.tro-ly-open{position:fixed;inset:0;right:0;bottom:0}

  /* Nền mờ phía trên panel: khách chạm vào đó là đóng chat, đồng thời vẫn
     thấy mờ mờ trang phía sau nên hiểu đây là lớp phủ tạm.
     z-index ở đây CHỈ so với các con khác của .tro-ly-wrap (phần tử
     position:fixed luôn tự lập ngữ cảnh xếp lớp riêng) — không liên quan
     tới thang z-index của trang. Panel PHẢI cao hơn backdrop trong ngữ
     cảnh này, nếu không backdrop (phủ inset:0) sẽ đè lên cả header/ô nhập
     của panel và nuốt mất mọi thao tác chạm trên đó. */
  .tro-ly-backdrop{
    display:block;position:fixed;inset:0;background:rgba(18,32,58,.42);
    opacity:0;pointer-events:none;transition:opacity .24s;z-index:1;
  }
  .tro-ly-wrap.tro-ly-open .tro-ly-backdrop{opacity:1;pointer-events:auto}

  /* Bottom sheet 88dvh thay vì chiếm toàn màn hình — chừa 12dvh phía trên
     làm vùng chạm để đóng, đồng thời tránh panel cao kín màn hình mà nội
     dung chỉ có vài dòng, trông như trang bị lỗi. */
  .tro-ly-panel{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:2;
    width:100%;height:88dvh;max-height:88dvh;
    border-radius:18px 18px 0 0;
    transform:translateY(100%);transition:transform .26s ease-out,opacity .2s;
    padding-top:0;padding-bottom:var(--tl-sab);
  }
  .tro-ly-wrap.tro-ly-open .tro-ly-panel{transform:none}

  .tro-ly-grabber{
    display:block;width:38px;height:4px;border-radius:99px;
    background:rgba(255,255,255,.32);margin:8px auto 0;flex:0 0 auto;
  }

  .tro-ly-head{padding-top:9px;padding-bottom:15px}
  .tro-ly-body{padding:14px 12px}
  .tro-ly-msg{max-width:90%;font-size:14.5px}
  .tro-ly-unit{width:100%}
  .tro-ly-opt{padding:11px 16px;font-size:14px;min-height:44px}
  .tro-ly-unit-acts button,.tro-ly-unit-acts a{min-height:44px;font-size:13px}
  .tro-ly-zalo-cta{min-height:46px;font-size:14px}
  .tro-ly-hint{display:none}

  /* Chỉ giữ MỘT nút đóng (×) trên điện thoại — nút "–" thu nhỏ bỏ đi vì
     trên điện thoại thu nhỏ và đóng gần như không khác nhau, hai nút cạnh
     nhau chỉ làm khách phân vân. Nút × lúc này gọi thuNho(), không phải
     ẩn hẳn (xem tro-ly.js) — muốn ẩn hẳn thì dùng dòng chữ nhỏ cuối khung. */
  #troLyMin{display:none}
  .tro-ly-ic{width:44px;height:44px;opacity:1}
  .tro-ly-ic svg{width:20px;height:20px;stroke-width:3}
}
@media(prefers-reduced-motion:reduce){
  .tro-ly-wrap,.tro-ly-wrap *,.tro-ly-restore,.tro-ly-toast{animation:none!important;transition:none!important}
}

/* Phân biệt nút Zalo nổi với bong bóng trợ lý — hai nút đang cùng
   hình bong bóng thoại nên khách không biết bấm cái nào.
   Ghi đè từ tro-ly.css để không phải đụng v3.css. */
@media(min-width:641px){
  .floating-zalo::after{
    content:"Zalo";
    font-family:var(--font-chu,'Be Vietnam Pro',system-ui,sans-serif);
    font-size:14px;font-weight:700;letter-spacing:.01em;color:#fff;
  }
  .floating-zalo svg{display:none}
}