
.vn-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 12px;list-style:none}
.vn-grid>li{width:calc((100% - 12px)/2);min-width:0}
.vn-card{display:flex;flex-direction:column;height:100%;position:relative}
.vn-card-img{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;background:#fff;border:1px solid var(--vn-line);border-radius:8px;overflow:hidden;padding:7%}
.vn-card-img img{width:100%;height:100%;object-fit:contain}
.vn-card:hover .vn-card-img{border-color:var(--vn-ink)}
.vn-volt{position:absolute;left:8px;bottom:8px;background:var(--vn-amber);color:var(--vn-ink);font-family:var(--vn-head);font-weight:700;font-size:13px;line-height:1;padding:5px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:3px}
.vn-volt svg{width:10px;height:13px}
.vn-tech{position:absolute;left:8px;top:8px;background:var(--vn-ink);color:#fff;font-family:var(--vn-head);font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;line-height:1;padding:5px 8px;border-radius:4px}
.vn-card-body{padding:12px 0 0;display:flex;flex-direction:column;flex:1}
.vn-card h3{font-size:16px;font-weight:500;line-height:1.3;margin:0 0 6px}
.vn-card h3 a{text-decoration:none}
.vn-card h3 a::after{content:"";position:absolute;inset:0}
.vn-chips{display:flex;flex-wrap:wrap;gap:4px 6px;list-style:none;margin:0 0 8px;font-size:13px;color:var(--vn-ink2)}
.vn-chips li{background:var(--vn-strip);border-radius:4px;padding:2px 7px;white-space:nowrap}
.vn-card-foot{margin-top:auto}
.vn-card .price{font-family:var(--vn-head);font-weight:700;font-size:17px;margin:0}
.vn-card-foot .vn-rating{margin:0 0 6px}
.vn-card .price{min-height:2.75em}
.vn-card .price small{display:block;font-weight:500;font-size:13px;color:var(--vn-mute);white-space:nowrap}
.vn-rating{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0;font-size:14px;color:var(--vn-ink2)}
.vn-rating b{color:var(--vn-ink)}
.vn-stars{display:inline-flex;gap:2px}
.vn-star{width:15px;height:15px;background:var(--vn-amber-deep);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.vn-star--off{background:#CFCBC3}
.vn-star--half{background:linear-gradient(90deg,var(--vn-amber-deep) 50%,#CFCBC3 50%)}
.vn-fill{display:none}
.vn-fillcard{display:flex;flex-direction:column;justify-content:space-between;gap:12px;height:100%;padding:18px 16px;border-radius:8px;background:var(--vn-ink);color:#fff;text-decoration:none}
.vn-fillcard--bases{border-top:4px solid var(--vn-amber)}
.vn-fillcard--guide{background:#23262A}
.vn-fillcard--all{background:var(--vn-ink);box-shadow:inset 0 0 0 1px #3A3F45}
.vn-fill-k{font-family:var(--vn-head);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--vn-amber)}
.vn-fillcard b{font-family:var(--vn-head);font-weight:600;font-size:19px;line-height:1.25}
.vn-fill-p{font-size:14px;line-height:1.45;color:#E8E6E1}
.vn-fill-bases{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 8px}
.vn-fill-bases>span{display:flex;flex-direction:column;align-items:center;gap:6px;font-family:var(--vn-head);font-weight:500;font-size:13px;text-align:center}
.vn-fill-bases .vn-base-ico{width:min(96px,100%);height:auto;aspect-ratio:1/1;background:#2A2E33;color:#fff}
.vn-fill-bases .vn-base-svg{width:64%;height:auto}
.vn-fill-img{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:6px;aspect-ratio:4/3;padding:8px}
.vn-fill-img img{width:100%;height:100%;object-fit:contain}
.vn-fill-list{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.35;color:#E8E6E1}
.vn-fill-list>span{padding-left:14px;position:relative}
.vn-fill-list>span::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--vn-amber)}
.vn-fill-list--rows>span{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid #33373C}
.vn-fill-list--rows>span::before{display:none}
.vn-fill-list--rows i{font-style:normal;font-weight:600;color:#fff}
.vn-fillcard .vn-link{color:#fff;font-size:15px}
.vn-grid.is-filtered .vn-fill{display:none!important}
@media (min-width:360px) and (max-width:767px){.vn-fill--m{display:block}}
@media (min-width:768px) and (max-width:1099px){.vn-fill--t{display:block}}
@media (min-width:1100px){.vn-fill--d{display:block}}
.vn-rating--big{font-size:15px}
.vn-rating--big .vn-star{width:18px;height:18px}
@media (max-width:359px){.vn-grid>li{width:100%}}
@media (min-width:768px){
 .vn-grid{gap:36px 24px}
 .vn-grid>li{width:calc((100% - 48px)/3)}
 .vn-card h3{font-size:18px}
 .vn-grid--shelf>li{width:calc((100% - 24px)/2)}
}
@media (min-width:900px){.vn-grid--shelf>li{width:calc((100% - 72px)/4)}}
@media (min-width:1100px){.vn-grid>li{width:calc((100% - 72px)/4)}}
