/* ==========================================================================
   GIAO DIỆN v3 — HỌ ƯU ĐÃI: 3 trang danh mục riêng /voucher · /flash-sale · /e-voucher (+ khối liên kết chéo cuối trang).
   Chỉ đổi VỎ: dùng khung 3 cột p-dm.css (.dm-lay) + thanh lọc dùng chung; thẻ lấy từ ds-flash-card (Flash) · ds-evoucher-card (E-Voucher, tím) · offer-card (Voucher).
   MÀU CHỦ ĐẠO theo chức năng (token --ds-* của p-ds.css, giữ đúng màu đang dùng ở trang chủ/p-v3-voucher.css):
     Voucher = CAM (main.vc3-pg) · Flash Sale = HỒNG-ĐỎ (main.fs3) · E-Voucher = TÍM (main.ev3).
   Tiền tố riêng: vc3- (chung cả họ) · fs3- (Flash) · ev3- (E-Voucher). Không vạch trái, không thanh cuộn (mép mờ), chữ nguyên px, tối đa 2 lớp khung.
   ========================================================================== */

/* ---------- màu chủ đạo của từng trang ---------- */
.vc3-pg { --pg-c: var(--ds-orange-500); --pg-d: var(--ds-orange-700); --pg-s: var(--ds-orange-50); --pg-m: var(--ds-orange-100); }
.fs3 { --pg-c: var(--ds-rose-500); --pg-d: var(--ds-rose-700); --pg-s: var(--ds-orange-50); --pg-m: var(--ds-rose-100); }
.ev3 { --pg-c: var(--ds-violet-500); --pg-d: var(--ds-violet-700); --pg-s: var(--ds-violet-50); --pg-m: var(--ds-violet-100); }
/* sắc độ dùng cho ô icon + nút "Xem tất cả" ở khối liên kết chéo (độc lập với trang đang xem) */
.vc3-t-orange { --tn-c: var(--ds-orange-500); --tn-d: var(--ds-orange-700); --tn-m: var(--ds-orange-100); }
.vc3-t-rose { --tn-c: var(--ds-rose-500); --tn-d: var(--ds-rose-700); --tn-m: var(--ds-rose-100); }
.vc3-t-violet { --tn-c: var(--ds-violet-500); --tn-d: var(--ds-violet-700); --tn-m: var(--ds-violet-100); }
.vc3-ic[class*="vc3-t-"] { background: var(--tn-m); color: var(--tn-c); }

/* ---------- hero: MỘT khung nền nhạt theo màu chủ đạo, hình lớn mờ lệch góc, số liệu nằm trong ---------- */
.vc3-hero { position: relative; overflow: hidden; align-items: center; margin-top: 6px; padding: 20px 22px; border: 0; border-radius: 12px; background: linear-gradient(115deg, var(--pg-m) 0%, var(--pg-s) 58%, #fff 100%); }
.vc3-hero > *:not(.vc3-gw) { position: relative; z-index: 1; }
.vc3-gw { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.vc3-ghost { position: absolute; right: -8px; top: -22px; font-size: 156px; line-height: 1; color: var(--pg-c); opacity: .1; transform: rotate(-12deg); pointer-events: none; }
main.vc3 .vc3-hero .eyebrow.vc3-eb { display: inline-flex; align-items: center; gap: 6px; color: var(--pg-d); }
.vc3-hero h1 { color: var(--ds-ink-900); }
.vc3-hero p { color: var(--ds-ink-700); }
.vc3-hero .stats { gap: 10px; }
.vc3-hero .stat { min-width: 108px; padding: 9px 14px; }

/* ---------- tab Flash Sale (đang diễn ra · khuyến mãi · khai trương · sắp diễn ra): gạch dưới, đếm số ---------- */
.fs3-tabs { margin: 14px 0 12px; border-bottom: 1px solid var(--ds-line); }
.fs3-tabs .tabs { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0; }
.fs3-tabs .tabs::-webkit-scrollbar { display: none; }
.fs3-tabs .tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; white-space: nowrap; }
.fs3-tabs .tab i { font-size: 15px; color: var(--ds-ink-400); }
.fs3-tabs .tab.on { border-bottom-color: var(--ds-rose-500); }
.fs3-tabs .tab.on i { color: var(--ds-rose-500); }
.fs3-tabs .tab .n { min-width: 20px; height: 18px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--ds-bg-soft); font-size: 11px; font-weight: var(--ds-fw-500); color: var(--ds-ink-500); }
.fs3-tabs .tab.on .n { background: var(--ds-rose-100); color: var(--ds-rose-700); }

/* ---------- lưới thẻ trong cột giữa ---------- */
.fs3-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 16px; align-items: start; }
.ev3-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 14px; align-items: stretch; }
.ev3-grid .v3-ev { height: 100%; align-content: start; }
.fs3 .tmain .lockline, .ev3 .tmain .lockline { margin: 4px 0 0; }
.fs3 .tab:focus-visible, .fs3-tabs .tab:focus-visible { outline: 2px solid var(--ds-blue-500); outline-offset: 1px; }
/* sắc tím cho thanh lọc/phần phụ của trang E-Voucher, hồng cho Flash: chip đang chọn + nút */
.ev3 .dm-qc.on { border-color: var(--ds-violet-100); background: var(--ds-violet-100); color: var(--ds-violet-700); }
.fs3 .dm-qc.on { border-color: var(--ds-rose-100); background: var(--ds-rose-100); color: var(--ds-rose-700); }
.vc3-pg .dm-qc.on { border-color: var(--ds-orange-100); background: var(--ds-orange-100); color: var(--ds-orange-700); }
.ev3 .faq-q i:first-child { color: var(--ds-violet-500); }
.fs3 .faq-q i:first-child { color: var(--ds-rose-500); }

/* ---------- LIÊN KẾT CHÉO cuối trang (2 chức năng còn lại): tiêu đề › khối › lưới thẻ; không thêm khung bao ---------- */
.vc3-x { margin: 38px 0 8px; padding-top: 26px; border-top: 1px solid var(--ds-line); }
.vc3-x-top { margin: 0 0 4px; }
.vc3-x-top .h-sec { margin: 2px 0 0; font-size: 21px; font-weight: var(--ds-fw-700); letter-spacing: -.3px; line-height: 1.2; color: var(--ds-ink-900); }
.vc3-x-blk { margin-top: 24px; }
.vc3-x-hd { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 12px; }
.vc3-x-tx { min-width: 0; }
.vc3-x-tx h3 { margin: 0; font-size: 16px; font-weight: var(--ds-fw-700); line-height: 1.25; color: var(--ds-ink-900); }
.vc3-more { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 6px; background: var(--tn-m); color: var(--tn-d); font-size: 13px; font-weight: var(--ds-fw-600); white-space: nowrap; transition: background .2s var(--ds-ease), box-shadow .2s var(--ds-ease); }
.vc3-more:hover { box-shadow: 0 0 0 1px var(--tn-c) inset; }
.vc3-more i { font-size: 14px; color: var(--tn-c); }
.vc3-more:focus-visible { outline: 2px solid var(--ds-blue-500); outline-offset: 2px; }
.vc3-g { display: grid; gap: 16px 14px; align-items: start; }
.vc3-g-flash { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 14px; }
.vc3-g-evoucher, .vc3-g-voucher { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.vc3-g-evoucher .v3-ev, .vc3-g-voucher .v3-vc { height: 100%; }
.vc3-x .lockline { margin: 0; }

/* ---------- gọn lại ở màn nhỏ ---------- */
@media (max-width: 1199px) {
  .vc3-g-flash { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vc3-g-evoucher, .vc3-g-voucher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .fs3-grid, .ev3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc3-hero { padding: 16px; }
  .vc3-ghost { font-size: 110px; }
}
@media (max-width: 560px) {
  .vc3-g-flash { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .vc3-g-evoucher, .vc3-g-voucher { grid-template-columns: minmax(0, 1fr); }
  .vc3-x-hd { flex-wrap: wrap; }
  .vc3-more { margin-left: 0; width: 100%; justify-content: center; }
  .fs3-grid { gap: 14px 10px; }
  .ev3-grid { grid-template-columns: minmax(0, 1fr); }
}

/* khung 3 cột: danh sách ngắn không được kéo giãn hàng thanh công cụ (cột lọc cao trải qua 3 hàng) → hàng thứ 3 hút phần dư */
@media (min-width: 981px) { .vc3 .dm-lay { grid-template-rows: auto auto minmax(0, 1fr) auto; } }
/* thẻ E-Voucher cùng hàng: nút Mua gióng đáy dù tên 2 dòng hay 3 dòng */
.ev3-grid .v3-ev, .vc3-g-evoucher .v3-ev { grid-template-rows: 118px minmax(0, 1fr); }
.ev3-grid .v3-ev .info, .vc3-g-evoucher .v3-ev .info { display: flex; flex-direction: column; align-content: normal; }
.ev3-grid .v3-ev .info .ds-btn, .vc3-g-evoucher .v3-ev .info .ds-btn { margin-top: auto; }
.ev3-grid .v3-ev .info .v3-price, .vc3-g-evoucher .v3-ev .info .v3-price { margin-bottom: 6px; }