/* Hikvision Catalog v2.2 */
:root{
  --hkv-red:#e31c25;--hkv-zalo:#0068ff;--hkv-gray:#f4f5f7;
  --hkv-border:#e2e5ea;--hkv-text:#1a1a2e;--hkv-muted:#6b7280;
  --hkv-green:#16a34a;--hkv-orange:#ea580c;--hkv-gold:#d97706;
  --hkv-radius:10px;--hkv-shadow:0 2px 12px rgba(0,0,0,.08);
}
.hkv-catalog,.hkv-catalog *,.hkv-catalog *::before,.hkv-catalog *::after{box-sizing:border-box}
.hkv-catalog{font-family:'Segoe UI',Arial,sans-serif;color:var(--hkv-text);max-width:1400px;margin:0 auto;padding:0 12px 48px;line-height:1.4}
.hkv-catalog a{text-decoration:none}

/* Header */
.hkv-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;padding:20px 0 16px;border-bottom:3px solid var(--hkv-red);margin-bottom:22px}
.hkv-brand{font-size:26px;font-weight:900;color:var(--hkv-red);letter-spacing:3px;line-height:1;display:block}
.hkv-subtitle{font-size:11px;color:var(--hkv-muted);letter-spacing:.4px;margin-top:3px;display:block}
.hkv-topbar-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Buttons */
.hkv-catalog .hkv-btn{display:inline-flex !important;align-items:center;justify-content:center;gap:6px;padding:10px 18px;border-radius:7px;font-size:13px;font-weight:600;text-decoration:none !important;cursor:pointer;border:2px solid transparent;transition:all .18s;line-height:1;white-space:nowrap;font-family:inherit}
.hkv-catalog .hkv-btn svg{width:15px;height:15px;flex-shrink:0}
.hkv-catalog .hkv-btn-outline{background:#fff;border-color:var(--hkv-red);color:var(--hkv-red)}
.hkv-catalog .hkv-btn-outline:hover{background:var(--hkv-red);color:#fff}
.hkv-catalog .hkv-btn-zalo{background:var(--hkv-zalo);border-color:var(--hkv-zalo);color:#fff !important}
.hkv-catalog .hkv-btn-zalo:hover{background:#0055d4;border-color:#0055d4}

/* Toolbar */
.hkv-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px}
.hkv-search-wrap{position:relative;flex:1;min-width:200px;max-width:340px}
.hkv-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--hkv-muted);pointer-events:none}
.hkv-catalog #hkv-search{width:100%;padding:9px 12px 9px 34px;border:1.5px solid var(--hkv-border) !important;border-radius:7px !important;font-size:13px;outline:none;background:#fff;color:var(--hkv-text);box-shadow:none !important;transition:border-color .15s}
.hkv-catalog #hkv-search:focus{border-color:var(--hkv-red) !important}
.hkv-tabs{display:flex;flex-wrap:wrap;gap:6px}

/* Tab buttons */
.hkv-catalog .hkv-tab{padding:7px 14px;border-radius:20px;border:1.5px solid var(--hkv-border);background:#fff;font-size:12px;font-weight:600;cursor:pointer;color:var(--hkv-muted);transition:all .15s;font-family:inherit;line-height:1.4}
.hkv-catalog .hkv-tab:hover{border-color:var(--hkv-red);color:var(--hkv-red)}
.hkv-catalog .hkv-tab.active{background:var(--hkv-red) !important;border-color:var(--hkv-red) !important;color:#fff !important}

/* ── GIA TOT NHAT TAB - Special styling ── */
.hkv-catalog .hkv-tab-featured{
  border-color:var(--hkv-gold);
  color:var(--hkv-gold);
  background:linear-gradient(135deg,#fffbeb,#fef3c7);
  font-weight:700;
  display:flex;align-items:center;gap:5px;
}
.hkv-catalog .hkv-tab-featured:hover{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border-color:#b45309;
  color:#92400e;
}
.hkv-catalog .hkv-tab-featured.active{
  background:linear-gradient(135deg,var(--hkv-gold),#b45309) !important;
  border-color:var(--hkv-gold) !important;
  color:#fff !important;
  box-shadow:0 4px 12px rgba(217,119,6,.35);
}
.hkv-tab-star{font-size:13px;line-height:1}

/* Stats */
.hkv-stats{font-size:12px;color:var(--hkv-muted);margin-bottom:18px}
.hkv-stats #hkv-count{font-weight:700;color:var(--hkv-red);font-size:15px}

/* Featured banner khi dang o tab Gia Tot Nhat */
.hkv-featured-banner{
  display:none;
  background:linear-gradient(135deg,#fffbeb,#fef9f0);
  border:1.5px solid #fde68a;
  border-radius:10px;
  padding:12px 18px;
  margin-bottom:18px;
  font-size:13px;
  color:#92400e;
  align-items:center;
  gap:10px;
}
.hkv-featured-banner.show{display:flex}
.hkv-featured-banner svg{flex-shrink:0;color:var(--hkv-gold)}

/* Grid */
.hkv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1200px){.hkv-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.hkv-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.hkv-grid{grid-template-columns:1fr}}

/* Card */
.hkv-card{background:#fff;border:1.5px solid var(--hkv-border);border-radius:var(--hkv-radius);box-shadow:var(--hkv-shadow);display:flex;flex-direction:column;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.hkv-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.13);border-color:#c8d0dc}
.hkv-card.hkv-hidden{display:none !important}

/* Card Featured ring */
.hkv-card.hkv-card-featured{border-color:#fde68a}
.hkv-card.hkv-card-featured:hover{border-color:var(--hkv-gold);box-shadow:0 12px 32px rgba(217,119,6,.18)}

/* Card image */
.hkv-card-img{position:relative;background:var(--hkv-gray);height:190px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--hkv-border)}
.hkv-card-img img{width:100%;height:100%;object-fit:contain;padding:16px;transition:transform .35s ease;display:block}
.hkv-card:hover .hkv-card-img img{transform:scale(1.04)}
.hkv-card-img .hkv-img-spin{width:24px;height:24px;border:3px solid #e2e8f0;border-top-color:var(--hkv-red);border-radius:50%;animation:hkvspin .7s linear infinite}
@keyframes hkvspin{to{transform:rotate(360deg)}}
.hkv-card-img .hkv-svg-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.hkv-card-img .hkv-svg-wrap svg{width:100%;height:100%;padding:20px}

/* Badge */
.hkv-badge{position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:5px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;z-index:2}
.hkv-badge-available{background:#dcfce7;color:#15803d}
.hkv-badge-out{background:#fee2e2;color:var(--hkv-red)}
.hkv-badge-contact{background:#fff7ed;color:var(--hkv-orange)}

/* Hot badge cho featured tab */
.hkv-hot-badge{position:absolute;top:10px;right:10px;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;padding:3px 8px;border-radius:5px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;z-index:2;display:none}
.hkv-tab-featured.active ~ * .hkv-hot-badge,
.hkv-card-featured .hkv-hot-badge{display:block}

/* Card body */
.hkv-card-body{padding:14px 14px 10px;flex:1;display:flex;flex-direction:column;gap:6px}
.hkv-group-tag{font-size:9.5px;font-weight:700;text-transform:uppercase;color:var(--hkv-muted);letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hkv-code{font-size:13.5px !important;font-weight:700 !important;color:var(--hkv-text) !important;margin:0 !important;line-height:1.35 !important;word-break:break-word !important}
.hkv-features{list-style:none !important;margin:0 !important;padding:0 !important;flex:1}
.hkv-features li{font-size:11.5px !important;color:var(--hkv-muted);padding:2px 0 2px 15px !important;position:relative;line-height:1.45;list-style:none !important}
.hkv-features li::before{content:'✓';position:absolute;left:0;top:3px;color:var(--hkv-green);font-size:10px}
.hkv-more{color:var(--hkv-zalo) !important;cursor:pointer !important;font-weight:600 !important;font-size:11px !important}
.hkv-more::before{content:'' !important}
.hkv-more:hover{text-decoration:underline !important}

/* Card footer */
.hkv-card-footer{padding:12px 14px 14px;border-top:1px solid var(--hkv-border);background:#fafbfc;display:flex;flex-direction:column;gap:10px}
.hkv-price-wrap{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.hkv-price{font-size:22px !important;font-weight:800 !important;color:var(--hkv-red) !important;line-height:1 !important;letter-spacing:-.3px}
.hkv-price-contact{font-size:16px !important;font-style:italic;color:var(--hkv-orange) !important}
.hkv-vat{font-size:10px;color:var(--hkv-muted);white-space:nowrap}
.hkv-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hkv-catalog .hkv-btn-quote{background:#fff;border:1.5px solid var(--hkv-border);color:var(--hkv-text);padding:9px 8px;border-radius:7px;font-size:12px;font-weight:600;display:flex !important;align-items:center;justify-content:center;gap:5px;transition:all .18s;cursor:pointer;text-decoration:none !important;line-height:1;font-family:inherit}
.hkv-catalog .hkv-btn-quote:hover{background:#fff5f5;border-color:var(--hkv-red);color:var(--hkv-red)}
.hkv-catalog .hkv-btn-buy{background:var(--hkv-zalo);border:1.5px solid var(--hkv-zalo);color:#fff !important;padding:9px 8px;border-radius:7px;font-size:12px;font-weight:600;display:flex !important;align-items:center;justify-content:center;gap:5px;transition:all .18s;cursor:pointer;text-decoration:none !important;line-height:1;font-family:inherit}
.hkv-catalog .hkv-btn-buy:hover{background:#0052cc;border-color:#0052cc}

/* No results */
.hkv-no-results{grid-column:1/-1;text-align:center;padding:64px 20px;color:var(--hkv-muted)}
.hkv-no-results p{font-size:15px;margin:0}

/* Modal */
.hkv-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:999999;padding:20px;display:none}
.hkv-modal-overlay.hkv-modal-open{display:flex !important;align-items:center;justify-content:center}
.hkv-modal-box{background:#fff;border-radius:14px;padding:28px;max-width:520px;width:100%;max-height:82vh;overflow-y:auto;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.28)}
.hkv-modal-close{position:absolute;top:14px;right:16px;background:#f4f5f7 !important;border:none !important;border-radius:50%;width:32px;height:32px;font-size:20px;cursor:pointer;color:var(--hkv-muted);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;padding:0}
.hkv-modal-close:hover{background:#fee2e2 !important;color:var(--hkv-red)}
.hkv-modal-title{font-size:16px !important;font-weight:700 !important;color:var(--hkv-text) !important;margin:0 0 4px !important;padding-right:36px}
.hkv-modal-code{font-size:12.5px;color:var(--hkv-red);font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1.5px solid var(--hkv-border)}
#hkv-modal-list{list-style:none !important;margin:0 !important;padding:0 !important}
#hkv-modal-list li{padding:8px 0 8px 20px !important;position:relative;font-size:13px;border-bottom:1px solid var(--hkv-border);color:var(--hkv-text);line-height:1.4;list-style:none !important}
#hkv-modal-list li:last-child{border:none}
#hkv-modal-list li::before{content:'✓';position:absolute;left:0;top:9px;color:var(--hkv-green);font-size:11px;font-weight:700}
.hkv-modal-actions{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}