.vsl-wrap {
    margin-top: 10px;
    --gap: 16px;
}

.vsl-filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gap);
    margin-bottom: var(--gap);
}

.vsl-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Select & Input */
#vsl .vsl-select,
#vsl .vsl-field input {
    width: 100%;
    padding: 10px 12px;
    border: none;
    /* không viền */
    border-radius: 15px;
    /* bo tròn 15px */
    background: #fff;
    -webkit-appearance: none;
    appearance: none;
}

/* Hiệu ứng focus (không dùng border) */
#vsl .vsl-select:focus,
#vsl .vsl-field input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(162, 14, 56, .2);

}

.vsl-body {
    display: grid;
    grid-template-columns: 1.1fr 1.2fr;
    gap: var(--gap);
}

.vsl-list {
  min-height: 200px;          /* như bạn đang có */
  max-height: 540px;          /* chỉnh con số tùy ý */
  overflow-y: auto;           /* bật cuộn dọc */
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding-right: 6px;         /* chừa chỗ cho scrollbar */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Tùy chọn: làm scrollbar gọn, theo màu chủ đề */
.vsl-list { 
  scrollbar-width: thin; 
  scrollbar-color: var(--theme-color, #f3f3f3) rgb(255, 255, 255);
}
.vsl-list::-webkit-scrollbar        { width: 8px; }
.vsl-list::-webkit-scrollbar-track  { background: rgba(0,0,0,0.06); border-radius: 8px; }
.vsl-list::-webkit-scrollbar-thumb  { background: var(--theme-color, #A20E38); border-radius: 8px; }
.vsl-list::-webkit-scrollbar-thumb:hover { filter: brightness(0.9); }

/* Tùy chọn: responsive chiều cao trên mobile */
@media (max-width: 768px) {
  .vsl-list { max-height: 50vh; }
}
/* Chỉ hiển thị tối đa 70 .vsl-card */
.vsl-list > .vsl-card:nth-child(n+71) {
  display: none !important;
}

}

.vsl-empty {
    padding: 16px;
    background: #fafafa;
    border: 1px dashed #e5e5e5;
    border-radius: 8px;
    text-align: center;
}

.vsl-card {
    display: grid;
    grid-template-columns: 0px 1fr;
    gap: 0px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
}

.vsl-card-media img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 8px;
}

.vsl-card-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.vsl-card-title a {
    text-decoration: none;
    color: #111;
}

.vsl-card-meta {
    font-size: 14px;
    color: #555;
    margin-bottom: 4px;
}

.vsl-card-actions {
    margin-top: 8px;
}

.vsl-btn {
    padding: 8px 12px;
    border-radius: 8px;
    background: #0013ff;
    cursor: pointer;
    color: #fff !important;
    font-size: 12px !important;
}

#vsl .vsl-map {
    width: 100%;
    height: 540px;
    /* thay cho min-height */
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #eee;
}
.vsl-popup .vsl-popup-title {
    font-weight: 700;
    margin-bottom: 6px;
}

.vsl-dir {
    display: inline-block;
    margin-top: 8px;
}

@media (max-width: 1024px) {
    .vsl-body {
        grid-template-columns: 1fr;
    }

    .vsl-map {
        min-height: 360px;
    }

    .vsl-filters {
        grid-template-columns: 1fr;
    }
}