/* ------------------------------------------------------------------
   Thẻ voucher kiểu vé — dựng theo khối "Mã giảm giá Shopee hôm nay".

   Mặc định dùng cam Shopee #ee4d2d — đúng màu widget "Mã giảm giá Shopee
   hôm nay" ở trang chủ, để thẻ voucher trong bài và ngoài trang chủ nhìn
   ra cùng một thứ. Trước đây thẻ thừa hưởng --vs-accent của bài, nhưng
   bảng màu đỏ sẫm của mấy bài cũ (.hlv-post #B12029) lên thẻ trông xấu.
   Muốn màu khác thì khai mau="" ở [vs_vlist] / [vs_vgroup] / [vs_v].

   Mọi selector đều nằm trong .vsvc: bài viết có sẵn style cho ul/li/p/a
   nên phải tự đặt lại phần mình dùng, nhưng không được rò ra ngoài.
   ------------------------------------------------------------------ */

.vsvc {
  --vsvc-accent: #ee4d2d;
  --vsvc-line: #dfe1e6;
  --vsvc-ink: #222230;
  --vsvc-mo: #6c757d;

  margin: 22px 0 26px;
  font-size: 14px;
  color: var(--vsvc-ink);
  -webkit-text-size-adjust: 100%;
}

.vsvc *,
.vsvc *::before,
.vsvc *::after { box-sizing: border-box; }

.vsvc button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  line-height: inherit;
  cursor: pointer;
  border-radius: 0;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  min-height: 0;
}

/* .vs-article a gạch chân mọi link trong bài, cùng độ đặc hiệu mà nạp sau nên
   thắng — phải !important thì cột giá trị và nút mới sạch gạch chân. */
.vsvc a,
.vsvc a:hover {
  text-decoration: none !important;
  border-bottom: 0 !important;
}

.vsvc .vsvc__heading {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: var(--vsvc-ink);
}

/* Dòng này nói rõ bảng gồm mấy kênh — người đọc phải thấy trước khi lướt
   xuống thẻ, nên để cỡ chữ ngang thân bài chứ không phải cỡ chú thích. */
.vsvc .vsvc__note {
  margin: 0 0 12px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: #4a5160;
}

.vsvc .vsvc__note b,
.vsvc .vsvc__note strong { color: var(--vsvc-accent); font-weight: 600; }

/* ------------------------------ Tab lọc ------------------------------ */

.vsvc .vsvc__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
}

.vsvc .vsvc__tab {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(34, 34, 48, .08);
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
  transition: background-color .12s, color .12s;
}

.vsvc .vsvc__tab:hover { background: rgba(34, 34, 48, .16); }

.vsvc .vsvc__tab.is-active {
  background: var(--vsvc-accent);
  color: #fff;
}

.vsvc .vsvc__tab b { font-weight: 400; font-size: 11px; opacity: .65; }
.vsvc .vsvc__tab.is-active b { opacity: .85; }

/* ------------------------------ Thẻ vé ------------------------------ */

/* Hai cấp .vsvc để thắng ".vs-article ul/li" của theme (nạp sau plugin):
   padding-left 1.35em của nó thụt cả danh sách vào, thẻ mất chiều rộng —
   trên điện thoại là mất hẳn một phần tư. */
.vsvc .vsvc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vsvc .vsvc__list > li { margin: 0; padding: 0; }
.vsvc .vsvc__list > li::marker { content: none; color: transparent; }

.vsvc .vsvc__item {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .075);
}

.vsvc .vsvc__item + .vsvc__item { margin-top: 14px; }

/* Mã hết hạn ngay lúc người đọc đang mở trang: làm mờ chứ không rút thẻ
   đi giữa chừng, để danh sách không nhảy dưới tay họ. */
.vsvc .vsvc__item.is-expired { opacity: .5; filter: grayscale(1); }
.vsvc .vsvc__item.is-expired .vsvc__btn { pointer-events: none; }
.vsvc .vsvc__item[hidden] { display: none; }

/* --- cột giá trị bên trái --- */
.vsvc .vsvc__value {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 8px;
  border-radius: 4px 0 0 4px;
  background: var(--vsvc-accent);
  color: #fff !important;
  text-align: center;
  line-height: 1.15;
}

.vsvc .vsvc__value:hover { color: #fff !important; opacity: .94; }

/* khuyết tròn bên trái */
.vsvc .vsvc__value::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(50% - 10px);
  width: 10px;
  height: 20px;
  border-radius: 0 20px 20px 0;
  background: #fff;
}

.vsvc .vsvc__big { font-size: 22px; font-weight: 700; letter-spacing: -.5px; }

.vsvc .vsvc__small {
  display: block;
  margin-top: 4px;
  max-width: 76px;
  font-size: 11px;
  line-height: 14px;
  opacity: .95;
}

/* --- thân thẻ --- */
.vsvc .vsvc__info {
  position: relative;
  flex: 1 1 0%;
  padding: 8px 14px 8px 0;
  border: 1px solid var(--vsvc-line);
  border-left-width: 0;
  border-radius: 0 8px 8px 0;
}

/* khuyết tròn bên phải */
.vsvc .vsvc__info::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: calc(50% - 10px);
  width: 10px;
  height: 20px;
  background: #fff;
  border: 1px solid var(--vsvc-line);
  border-right-color: #fff;
  border-radius: 20px 0 0 20px;
}

.vsvc .vsvc__content {
  display: flex;
  gap: 10px;
  padding: 8px 6px 8px 10px;
  border-radius: 3px;
  background: #f4f8fb;
}

.vsvc .vsvc__main { flex: 1 1 0%; min-width: 0; }

.vsvc .vsvc__title {
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.45;
  color: var(--vsvc-ink);
}

.vsvc .vsvc__channel,
.vsvc .vsvc__label {
  display: inline-block;
  margin: 0 5px 2px 0;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: 1px;
}

.vsvc .vsvc__channel {
  background: rgba(34, 34, 48, .08);
  color: var(--vsvc-ink);
}

.vsvc .vsvc__channel--spf { background: #ffe89b; color: #eb3600; }
.vsvc .vsvc__channel--cua-hang { background: rgba(238, 77, 45, .12); color: var(--vsvc-accent); }

.vsvc .vsvc__label { background: #ffe89b; color: #eb3600; }

/* --- ô mã --- */
.vsvc .vsvc__code {
  display: inline-flex;
  align-items: center;
  margin: 4px 0 0;
  padding: 2px 9px;
  border: 1px dashed var(--vsvc-accent) !important;
  border-radius: 3px;
  background: #fff;
  color: var(--vsvc-accent);
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
}

/* Không dùng emoji làm icon: 📋 ra ô vuông trên nhiều máy Android. */
.vsvc .vsvc__code:hover { background: #fff6f3; }
.vsvc .vsvc__code.is-copied { border-style: solid !important; background: #eaf7ee; color: #1c7c3c; }
.vsvc .vsvc__code.is-copied::after { content: " ✓"; }

/* --- thanh tỷ lệ giảm --- */
.vsvc .vsvc__rate {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--vsvc-mo);
}

.vsvc .vsvc__bar {
  flex: 0 0 auto;
  display: inline-flex;
  width: 148px;
  max-width: 40vw;
  height: 7px;
  border-radius: 6px;
  background: #e5e5e5;
  overflow: hidden;
}

.vsvc .vsvc__bar > span { background-image: linear-gradient(to right, #ffb800, #ee4d2d); }

/* --- dòng hạn dùng + nút chi tiết --- */
.vsvc .vsvc__desc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 5px;
  font-size: 12px;
}

.vsvc .vsvc__time { color: var(--vsvc-accent); }
.vsvc .vsvc__time::before { content: "⏱ "; }
.vsvc .vsvc__left { color: var(--vsvc-accent); }

.vsvc .vsvc__more { color: #1876f2; font-size: 12px; }
.vsvc .vsvc__more::before { content: "ⓘ "; }
.vsvc .vsvc__more:hover { text-decoration: underline; }

/* --- nút --- */
.vsvc .vsvc__action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
}

.vsvc .vsvc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 3px;
  background: var(--vsvc-accent);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.vsvc .vsvc__btn:hover { filter: brightness(.94); color: #fff !important; }

/* Con trỏ chuột và icon: khớp nút của widget trang chủ (svw). Cả hai nút cùng
   màu nhấn — nút copy xám của bản đầu trông như nút phụ bị vô hiệu. */
.vsvc .vsvc__btn > svg { margin-right: .4rem; flex: 0 0 auto; }
.vsvc .vsvc__btn > * { pointer-events: none; }
.vsvc .vsvc__btn--copy { cursor: pointer; }
.vsvc .vsvc__btn--copy.is-copied { background: #0072f5; }

/* --- panel điều kiện --- */
.vsvc .vsvc__detail {
  margin: 8px 6px 2px 10px;
  padding: 9px 13px;
  border-left: 3px solid var(--vsvc-accent);
  border-radius: 0 3px 3px 0;
  background: #fff8f6;
  font-size: 12.5px;
  line-height: 1.6;
}

.vsvc .vsvc__detail ul { margin: 0 !important; padding-left: 17px !important; list-style: disc; }
.vsvc .vsvc__detail li { margin: 0 0 2px !important; }

/* ----------------------------- Phân trang ----------------------------- */

.vsvc .vsvc__pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-top: 14px;
}

.vsvc .vsvc__pager:empty { display: none; }

.vsvc .vsvc__page {
  min-width: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 13px;
  text-align: center;
  color: var(--vsvc-ink);
}

.vsvc .vsvc__page:hover { background: rgba(34, 34, 48, .08); }
.vsvc .vsvc__page.is-active { color: var(--vsvc-accent); font-weight: 700; }
.vsvc .vsvc__page[disabled] { opacity: .35; cursor: default; }
.vsvc .vsvc__page[disabled]:hover { background: none; }

.vsvc .vsvc__total {
  margin: 8px 0 0 !important;
  text-align: center;
  font-size: 12px;
  color: var(--vsvc-mo);
}

.vsvc .vsvc__empty {
  padding: 26px 0;
  text-align: center;
  color: var(--vsvc-mo);
}

/* ------------------------------- Mobile ------------------------------- */

@media (max-width: 600px) {
  /* Màn hình hẹp: mọi pixel nhường cho cột chữ. Cột giá trị chỉ cần đủ chỗ
     cho "80K" và một dòng điều kiện ngắn. */
  .vsvc .vsvc__value { width: 74px; padding: 10px 4px; }
  .vsvc .vsvc__big { font-size: 18px; }
  .vsvc .vsvc__small { max-width: 64px; font-size: 10px; line-height: 13px; }

  .vsvc .vsvc__info { padding: 5px 6px 5px 0; }
  .vsvc .vsvc__content { flex-direction: column; gap: 8px; padding: 8px 7px; }
  .vsvc .vsvc__title { font-size: 13px; }
  .vsvc .vsvc__bar { width: 110px; }

  .vsvc .vsvc__action { flex-direction: row-reverse; justify-content: flex-end; }
  .vsvc .vsvc__btn { height: 28px; padding: 0 10px; font-size: 12px; }
  .vsvc .vsvc__btn > svg { width: 11px; height: 11px; margin-right: .25rem; }

  /* Nhãn xuống dòng riêng, tiêu đề bắt đầu ở dòng mới cho gọn mắt. */
  .vsvc .vsvc__tags { display: block; margin-bottom: 2px; }

  /* Chỗ hẹp thì con số là đủ, phần giải thích cắt đi để thanh tỷ lệ và
     chữ nằm gọn một dòng. */
  .vsvc .vsvc__rate-note { display: none; }

  .vsvc .vsvc__heading { font-size: 18px; }
  .vsvc .vsvc__note { font-size: 14px; }
  .vsvc .vsvc__detail { margin-left: 8px; }
}