/* Khối "Xem máy tại cửa hàng".
   Dùng lại biến của theme viostore khi có, có giá trị dự phòng để plugin vẫn
   nhìn được nếu sau này đổi sang theme khác. */

.vio-tk{
  margin-top:14px;padding:14px 16px;
  background:#fff;
  border:1px solid var(--line,#E4E7EC);
  border-radius:var(--r,12px);
  box-shadow:var(--sh-1,0 1px 2px rgba(16,24,40,.06));
}

.vio-tk-head{
  font-size:14px;font-weight:800;margin-bottom:10px;
  color:var(--fg,#0E1116);
}

.vio-tk-list{list-style:none;margin:0;padding:0}

.vio-tk-row{
  display:flex;align-items:center;gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line-2,#F2F4F7);
}
.vio-tk-row:last-child{border-bottom:0}

.vio-tk-cn{
  flex:1;min-width:0;
  font-size:13px;line-height:1.5;
  color:var(--fg-2,#4B5563);
}

/* Ba trạng thái dùng chung một hình dạng. Viên này in ra bằng <button> (mở
   khung chat), <a> (dự phòng Zalo) hoặc <span> (không có kênh chat nào) — nên
   phải tự đặt lại font/viền, không trông chờ reset của theme. */
.vio-tk-pill{
  flex:none;white-space:nowrap;text-decoration:none;
  padding:4px 12px;border-radius:999px;
  font-family:inherit;font-size:12.5px;font-weight:700;line-height:1.5;
  border:0;
}

button.vio-tk-pill{
  -webkit-appearance:none;appearance:none;
  cursor:pointer;
  transition:background-color .15s ease;
}
button.vio-tk-pill:focus-visible{
  outline:2px solid var(--price,#E11D2A);outline-offset:2px;
}

/* Kho báo còn máy ở chi nhánh này */
.vio-tk-con{background:rgba(14,159,110,.12);color:#0E9F6E}
button.vio-tk-con:hover{background:rgba(14,159,110,.20)}

/* Tìm thấy máy nhưng chi nhánh này không có */
.vio-tk-dat{background:var(--line-2,#F2F4F7);color:var(--fg-3,#8A93A0)}
button.vio-tk-dat:hover{background:var(--line,#E4E7EC)}

/* Không tra được trong dữ liệu kho — mời khách hỏi */
.vio-tk-hoi{background:rgba(225,29,42,.10);color:var(--price,#E11D2A)}
a.vio-tk-hoi:hover,button.vio-tk-hoi:hover{background:rgba(225,29,42,.18)}

@media screen and (max-width:480px){
  .vio-tk{padding:12px 14px}
  .vio-tk-cn{font-size:12.5px}
}