/* Card sản phẩm: hover hiện popover thông tin (kiểu MyGear). Popover chung #hp-card-pop do hp-card-specs.js dựng. */
.hp-card-pop-data { display: none !important; }
#hp-card-pop { position: fixed; z-index: 100001; width: 520px; max-width: calc(100vw - 24px); background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .05); font-size: 14px; line-height: 1.5; color: #222; text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
#hp-card-pop.is-visible { opacity: 1; visibility: visible; transform: none; }
#hp-card-pop::after { content: ''; position: absolute; left: var(--arrow-x, 50%); bottom: -9px; width: 18px; height: 18px; margin-left: -9px; background: #fff; transform: rotate(45deg); box-shadow: 4px 4px 10px rgba(0, 0, 0, .08); }
#hp-card-pop.is-below::after { bottom: auto; top: -9px; background: #c01e1c; box-shadow: none; }
#hp-card-pop .hpp-head { background: linear-gradient(90deg, #c01e1c 0%, #8a3b2e 60%, #b0855f 100%); color: #fff; font-weight: 700; text-transform: uppercase; font-size: 15px; line-height: 1.4; padding: 14px 18px; border-radius: 12px 12px 0 0; }
#hp-card-pop .hpp-rows { padding: 12px 18px 4px; }
#hp-card-pop .hpp-row { display: flex; gap: 12px; margin-bottom: 4px; }
#hp-card-pop .hpp-row b { flex: 0 0 92px; font-weight: 700; color: #222; }
#hp-card-pop .hpp-row .hpp-price, #hp-card-pop .hpp-row .hpp-price .amount { color: #e30613; font-weight: 700; font-size: 15px; }
#hp-card-pop .hpp-row .hpp-price del, #hp-card-pop .hpp-row .hpp-price del .amount { color: #999; font-weight: 400; font-size: 13px; margin-right: 6px; }
#hp-card-pop .hpp-ok { color: #1a8f3a; font-weight: 700; }
#hp-card-pop .hpp-contact { color: #e30613; font-weight: 700; }
#hp-card-pop .hpp-bar { display: flex; align-items: center; gap: 10px; margin: 8px 18px 10px; background: #e30613; color: #fff; font-weight: 600; font-size: 14px; padding: 9px 14px; border-radius: 6px; }
#hp-card-pop .hpp-bar svg { flex: 0 0 auto; }
#hp-card-pop .hpp-specs { padding: 0 18px 14px; font-size: 13.5px; color: #333; }
#hp-card-pop .hpp-spec { display: inline; }
#hp-card-pop .hpp-spec em { font-style: normal; color: #666; }
#hp-card-pop .hpp-spec + .hpp-spec::before { content: ' · '; color: #bbb; }
@media (hover: none), (max-width: 849px) { #hp-card-pop { display: none !important; } }