/* ==========================================================
   VSE ICON TRÊN SITE (bộ VSE Icons: Lucide, ISC, nét 1.5, đầu bo tròn)
   Hình icon qua CSS mask từ assets/icons/svg/<tên>.svg, màu qua biến:
     --vse-ic-color   màu icon chính (theme đặt: interactive)
     --vse-ic-muted   icon phụ (theme đặt: icon-secondary)
     --vse-ic-success dấu tích (theme đặt: support-success)
   Tệp này dùng chung cho theme vse và vse-v2; không chứa mã màu.
   Một khái niệm một icon. Kích thước: 16 / 20 / 24, thẻ 32.
   ========================================================== */

/* ---------- Bảng tên icon -> tệp ---------- */
.vse-ic--monitor-play, .vse-stats li:nth-child(4):not(:last-child) { --ic: url("icons/svg/monitor-play.svg"); }
.vse-ic--ticket { --ic: url("icons/svg/ticket.svg"); }
.vse-ic--library { --ic: url("icons/svg/library.svg"); }
.vse-ic--messages-square { --ic: url("icons/svg/messages-square.svg"); }
.vse-ic--network { --ic: url("icons/svg/network.svg"); }
.vse-ic--circle-help { --ic: url("icons/svg/circle-help.svg"); }
.vse-ic--graduation-cap { --ic: url("icons/svg/graduation-cap.svg"); }
.vse-ic--globe, .vse-stats li:last-child { --ic: url("icons/svg/globe.svg"); }
.vse-ic--book-open { --ic: url("icons/svg/book-open.svg"); }
.vse-ic--presentation { --ic: url("icons/svg/presentation.svg"); }
.vse-ic--award { --ic: url("icons/svg/award.svg"); }
.vse-ic--heart-handshake { --ic: url("icons/svg/heart-handshake.svg"); }

/* ---------- Thẻ có icon (vse-cards) ---------- */
.vse-ic::before {
  content: ""; display: block; width: 32px; height: 32px; margin: 0 0 20px;
  background: var(--vse-ic-color);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.vse-ic h3::before { content: none !important; display: none !important; }

/* ---------- Giá trị cốt lõi ---------- */
.vse-values li:nth-child(1) { --ic: url("icons/svg/rocket.svg"); }
.vse-values li:nth-child(2) { --ic: url("icons/svg/handshake.svg"); }
.vse-values li:nth-child(3) { --ic: url("icons/svg/medal.svg"); }
.vse-values li:nth-child(4) { --ic: url("icons/svg/scale.svg"); }
.vse-values li:nth-child(5) { --ic: url("icons/svg/eye.svg"); }
.vse-values li::before {
  content: ""; display: block; width: 32px !important; height: 32px !important; margin: 0 0 20px !important;
  border: 0 !important; border-radius: 0 !important; background: var(--vse-ic-color) !important;
  -webkit-mask: var(--ic) center / contain no-repeat !important; mask: var(--ic) center / contain no-repeat !important;
}

/* ---------- Tầm nhìn, sứ mệnh ---------- */
.vse-vm .wp-block-column:nth-child(1) { --ic: url("icons/svg/target.svg"); }
.vse-vm .wp-block-column:nth-child(2) { --ic: url("icons/svg/compass.svg"); }
.vse-vm .wp-block-column::before {
  content: ""; display: block; width: 28px; height: 28px; margin: 0 0 12px;
  background: var(--vse-ic-color);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}

/* ---------- Số liệu: icon nhỏ phía trên con số ---------- */
.vse-stats li:nth-child(1) { --ic: url("icons/svg/calendar.svg"); }
.vse-stats li:nth-child(2) { --ic: url("icons/svg/users.svg"); }
.vse-stats li:nth-child(3) { --ic: url("icons/svg/users-round.svg"); }
.vse-stats li::before {
  content: ""; display: block; width: 24px; height: 24px; margin: 0 auto 12px;
  background: var(--vse-ic-muted);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}

/* ---------- Thẻ liên hệ ---------- */
.vse-contact-cards .wp-block-column:nth-child(1) { --ic: url("icons/svg/mail.svg"); }
.vse-contact-cards .wp-block-column:nth-child(2) { --ic: url("icons/svg/phone.svg"); }
.vse-contact-cards .wp-block-column:nth-child(3) { --ic: url("icons/svg/map-pin.svg"); }
.vse-contact-cards .wp-block-column::before {
  content: ""; display: block; width: 32px !important; height: 32px !important; margin: 0 0 20px !important;
  border: 0 !important; border-radius: 0 !important; background: var(--vse-ic-color) !important;
  -webkit-mask: var(--ic) center / contain no-repeat !important; mask: var(--ic) center / contain no-repeat !important;
}

/* ---------- Mũi tên trong danh sách định hướng và link "Mở Google Maps" ---------- */
.vse-routes li > a::after {
  content: "" !important; width: 20px; height: 20px; background: var(--vse-ic-color);
  -webkit-mask: url("icons/svg/arrow-right.svg") center / contain no-repeat; mask: url("icons/svg/arrow-right.svg") center / contain no-repeat;
}
.vse-contact-cards .vse-card-note a::after {
  content: "" !important; display: inline-block; width: 16px; height: 16px; margin-left: 4px; vertical-align: -3px;
  background: currentColor;
  -webkit-mask: url("icons/svg/arrow-right.svg") center / contain no-repeat; mask: url("icons/svg/arrow-right.svg") center / contain no-repeat;
}

/* ---------- Danh sách có dấu tích (thẻ giá) ---------- */
.vse-checklist li::before {
  width: 20px !important; height: 20px !important; top: 2px !important; border-radius: 0 !important;
  background: var(--vse-ic-success) !important;
  -webkit-mask: url("icons/svg/check.svg") center / contain no-repeat !important; mask: url("icons/svg/check.svg") center / contain no-repeat !important;
}

/* ---------- Hỏi đáp: dấu cộng / trừ ---------- */
.vse-faq .wp-block-details summary::after {
  width: 20px !important; height: 20px !important; margin-top: -10px; top: 50% !important; transform: none !important;
  background: var(--vse-ic-color) !important;
  -webkit-mask: url("icons/svg/plus.svg") center / contain no-repeat !important; mask: url("icons/svg/plus.svg") center / contain no-repeat !important;
}
.vse-faq .wp-block-details[open] summary::after {
  -webkit-mask-image: url("icons/svg/minus.svg") !important; mask-image: url("icons/svg/minus.svg") !important;
}

/* ---------- Sự kiện: giờ, địa điểm ---------- */
.vse-sk-meta li::before {
  background: var(--vse-ic-muted) !important;
  -webkit-mask: url("icons/svg/clock.svg") center / contain no-repeat !important; mask: url("icons/svg/clock.svg") center / contain no-repeat !important;
}
.vse-sk-meta .i-noi::before {
  -webkit-mask-image: url("icons/svg/map-pin.svg") !important; mask-image: url("icons/svg/map-pin.svg") !important;
}

/* ---------- Chân trang: email, điện thoại ---------- */
.vse-footer a[href^="mailto:"]::before, .vse-footer a[href^="tel:"]::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px;
  background: currentColor;
  -webkit-mask: url("icons/svg/mail.svg") center / contain no-repeat; mask: url("icons/svg/mail.svg") center / contain no-repeat;
}
.vse-footer a[href^="tel:"]::before { -webkit-mask-image: url("icons/svg/phone.svg"); mask-image: url("icons/svg/phone.svg"); }

@media (max-width: 480px) {
  .vse-ic::before, .vse-values li::before, .vse-contact-cards .wp-block-column::before { width: 28px !important; height: 28px !important; margin-bottom: 16px !important; }
}