/* Copyright © Hiếu BK · shop.hieubk.vn — Partner Voucher frontend.
   Dùng biến theme nếu có (--beige, --burgundy…), kèm fallback để chạy độc lập. */
.hbkv-wrap{
	--hbkv-beige:var(--beige,#d8c3a5);
	--hbkv-burg:var(--burgundy,#7a1f2b);
	--hbkv-burg-h:var(--burgundy-h,#94303d);
	--hbkv-ink:var(--ink,#111110);
	--hbkv-ink2:var(--ink-2,#1a1917);
	--hbkv-ink3:var(--ink-3,#232220);
	--hbkv-white:var(--white,#fafafa);
	--hbkv-line:var(--line-2,rgba(250,250,250,.1));
	--hbkv-muted:var(--muted,rgba(250,250,250,.55));
	--hbkv-fh:var(--fh,'Space Grotesk',sans-serif);
}

.hbkv-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.hbkv-tab{font-family:var(--hbkv-fh);font-weight:600;font-size:.82rem;padding:.5rem 1rem;border-radius:99px;border:1px solid var(--hbkv-line);background:transparent;color:var(--hbkv-muted);cursor:pointer;transition:all .2s ease}
.hbkv-tab:hover{color:var(--hbkv-white);border-color:rgba(216,195,165,.35)}
.hbkv-tab.is-active{background:var(--hbkv-beige);border-color:var(--hbkv-beige);color:#0a0a0a}

.hbkv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0;padding:0;list-style:none}
.hbkv-cols-1{grid-template-columns:1fr}
.hbkv-cols-2{grid-template-columns:repeat(2,1fr)}
.hbkv-cols-3{grid-template-columns:repeat(3,1fr)}
.hbkv-cols-4{grid-template-columns:repeat(4,1fr)}
.hbkv-card.is-hidden{display:none}

.hbkv-card{background:var(--hbkv-ink2);border:1px solid rgba(216,195,165,.16);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease}
.hbkv-card:hover{transform:translateY(-4px);border-color:rgba(216,195,165,.35)}
.hbkv-card.is-soldout{opacity:.5}

/* Dải logo: chiều cao cố định, logo hiện TRỌN VẸN canh giữa trên nền trắng (không cắt).
   max-w/max-h + !important để đè rule .hbk img{height:auto} của theme. */
.hbkv-thumb{position:relative;height:132px;background:#fff;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}
.hbkv-thumb .hbkv-hero-img{position:static !important;width:auto !important;height:auto !important;max-width:80% !important;max-height:74px !important;object-fit:contain;display:block;transition:transform .4s ease}
.hbkv-card:hover .hbkv-thumb .hbkv-hero-img{transform:scale(1.04)}
.hbkv-thumb-ph{position:absolute;inset:0;background:linear-gradient(135deg,#7a4d1e,#d98b4a,#3a1410)}
@media(max-width:560px){.hbkv-thumb{height:150px}}

.hbkv-badge{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--hbkv-fh);font-weight:700;font-size:.74rem;letter-spacing:.02em;background:var(--hbkv-burg);color:#fff;padding:4px 10px;border-radius:99px}
.hbkv-count{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-family:var(--hbkv-fh);font-weight:600;font-size:.68rem;letter-spacing:.02em;color:#fafafa;background:rgba(10,10,10,.78);backdrop-filter:blur(6px);padding:4px 9px;border-radius:99px}
.hbkv-count.is-expired{color:#f0997b}
.hbkv-clock{width:11px;height:11px;border:1.5px solid currentColor;border-radius:50%;position:relative;display:inline-block}
.hbkv-clock::after{content:'';position:absolute;top:1.5px;left:50%;width:1.5px;height:4px;background:currentColor;transform-origin:bottom}

.hbkv-body{padding:18px;display:flex;flex-direction:column;flex:1 1 auto}
.hbkv-title{font-family:var(--hbkv-fh);font-size:1.05rem;font-weight:600;line-height:1.3;margin:0 0 6px;color:var(--hbkv-white)}
.hbkv-sub{font-size:.85rem;color:var(--hbkv-muted);margin:0;line-height:1.5}
.hbkv-meta{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--hbkv-line);display:flex;flex-direction:column;gap:5px}
.hbkv-rem{font-family:var(--hbkv-fh);font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hbkv-beige)}
.hbkv-card.is-low .hbkv-rem{color:#f0997b;animation:hbkv-pulse 1.2s ease-in-out infinite}
@keyframes hbkv-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.hbkv-cond{font-size:.72rem;color:var(--hbkv-muted)}
.hbkv-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}

.hbkv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--hbkv-fh);font-weight:600;font-size:.85rem;padding:.72rem 1.1rem;border-radius:4px;border:none;cursor:pointer;width:100%;text-align:center;transition:background .2s ease,border-color .2s ease,opacity .2s ease;line-height:1.3}
/* Màu chữ nút: prefix .hbkv-wrap + !important để đè rule .hbk a{color:inherit} của theme
   (nếu không, nút thẻ <a> như "Đến đối tác" bị mất chữ trên nền beige). */
.hbkv-wrap .hbkv-btn-get{background:var(--hbkv-burg);color:#fff !important}
.hbkv-wrap .hbkv-btn-get:hover{background:var(--hbkv-burg-h)}
.hbkv-btn-get.loading{opacity:.6;pointer-events:none}
.hbkv-wrap .hbkv-btn-reg{background:transparent;color:var(--hbkv-beige) !important;border:1.5px solid rgba(216,195,165,.4)}
.hbkv-wrap .hbkv-btn-reg:hover{border-color:var(--hbkv-beige);background:rgba(216,195,165,.06)}
.hbkv-wrap .hbkv-btn-go{background:var(--hbkv-beige);color:#0a0a0a !important}
.hbkv-wrap .hbkv-btn-go:hover{background:#e6d4ba}
.hbkv-btn-out,.hbkv-btn-done{background:var(--hbkv-ink3);color:rgba(250,250,250,.45);cursor:default}
.hbkv-btn-done{color:#a9d5b6}

.hbkv-codebox{background:rgba(216,195,165,.12);border:1px dashed var(--hbkv-beige);border-radius:4px;padding:.6rem;text-align:center}
.hbkv-code{font-family:var(--hbkv-fh);font-weight:600;font-size:.98rem;letter-spacing:.05em;color:var(--hbkv-beige);word-break:break-all}
.hbkv-copy{margin-top:6px;font-family:var(--hbkv-fh);font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:none;border:none;color:rgba(250,250,250,.6);cursor:pointer;transition:color .2s ease}
.hbkv-copy:hover{color:var(--hbkv-beige)}
.hbkv-copy.done{color:#a9d5b6}

.hbkv-empty{color:var(--muted,rgba(250,250,250,.55));text-align:center;padding:40px 0}
.hbkv-toast{margin-top:14px;font-size:.85rem;color:#a9d5b6}
.hbkv-toast.err{color:#f0997b}

@media(max-width:920px){
	.hbkv-grid,.hbkv-cols-3,.hbkv-cols-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
	.hbkv-grid,.hbkv-cols-2,.hbkv-cols-3,.hbkv-cols-4{grid-template-columns:1fr}
}