@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/dm-sans-v17.woff2') format('woff2'); }
.vgt-wrap { font-family: 'DM Sans', sans-serif; margin: 2em 0; }
.vgt-table-outer { overflow-x: auto; border-radius: 14px; box-shadow: 0 4px 24px rgba(0,0,0,0.1); border: 1px solid #e8ecf0; }
.vgt-table { width: 100%; min-width: 480px; border-collapse: collapse; background: #fff; table-layout: fixed; }
.vgt-th-label { background: #f7f9fc; width: 180px; border-right: 2px solid #e8ecf0; }
.vgt-th-product { text-align: center; padding: 25px 10px 15px; border-right: 1px solid #eef0f3; background: #fff; vertical-align: bottom; position: relative; }
.vgt-th-product.vgt-highlighted { background: linear-gradient(180deg, rgba(0,166,81,0.05) 0%, #fff 60%); box-shadow: inset 0 4px 0 var(--hl, #00a651); }
.vgt-badge { display: inline-block; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #fff; padding: 3px 10px; border-radius: 20px; white-space: nowrap; z-index: 10; }
.vgt-product-image img { max-height: 140px; max-width: 90%; object-fit: contain; }
.vgt-td-label { background: #f7f9fc; font-size: 13px; font-weight: 600; color: #555; padding: 11px 16px; border-right: 2px solid #e8ecf0; border-top: 1px solid #eef0f3; white-space: nowrap; }
.vgt-td-value { text-align: center; font-size: 14px; color: #222; padding: 11px 10px; border-top: 1px solid #eef0f3; border-right: 1px solid #eef0f3; vertical-align: middle; }
.vgt-price { display: block; font-size: 21px; font-weight: 700; color: #27ae60 !important; margin: 4px 0; }
.vgt-old-price { display: block; font-size: 12px; color: #999; text-decoration: line-through; margin-bottom: 1px; }
.vgt-energy-badge { display: inline-block; font-weight: 800; font-size: 14px; width: 34px; height: 34px; line-height: 34px; border-radius: 6px; color: #fff; text-align: center; }
.vgt-energy-A { background: #1a7e3c; }
.vgt-energy-B { background: #4db848; }
.vgt-energy-C { background: #bed600; color: #333; }
.vgt-energy-D { background: #ffcc00; color: #333; }
.vgt-energy-E { background: #f48000; }
.vgt-energy-F { background: #e2001a; }
.vgt-btn { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; text-decoration: none !important; transition: transform .15s; box-shadow: 0 3px 8px rgba(0,0,0,0.15); width: 95%; margin: 0 auto; white-space: nowrap; overflow: hidden; background: #0062bd !important; color: #ffffff !important; }
.vgt-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.vgt-btn-icon svg { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.vgt-btn-text { flex-shrink: 1; }
@media (max-width: 600px) { .vgt-th-label, .vgt-td-label { display: none; } .vgt-btn { font-size: 11px; padding: 10px 4px; } }