/* VIFOOD V671 – khung biểu đồ giá gọn: chọn loại bằng ô thả xuống, giá lớn + chip thay đổi,
   biểu đồ vùng tô nhạt + chấm cuối có nhãn, thống kê 1 hàng. Nạp SAU vifood-chart-v667.css. */

.vf667{margin:20px 0 26px;padding:18px 20px 16px;border-radius:16px;box-shadow:0 1px 2px rgba(16,33,26,.04)}

.vf667 .vf667-head{margin:0 0 12px;padding:0;border-left:0}
.vf667 .vf667-title{font-size:17px!important;font-weight:700!important;letter-spacing:-.01em}
#vf-news-body .vf667 .vf667-title{font-size:17px!important}
.vf667 .vf667-sub{margin:12px 0 0!important;font-size:12px!important;line-height:1.5!important;color:var(--mu)!important}
#vf-news-body .vf667 .vf667-sub{margin:12px 0 0!important;font-size:12px!important}

.vf667 .vf667-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.vf667 .vf667-select{-webkit-appearance:none;appearance:none;min-width:220px;max-width:100%;height:38px;margin:0;padding:0 38px 0 14px;border:1px solid #d5e1da;border-radius:10px;font:inherit;font-size:14px;font-weight:600;line-height:1.2;color:var(--ink);cursor:pointer;
 background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23174a31' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 14px center}
.vf667 .vf667-select:hover{border-color:var(--g)}
.vf667 .vf667-select:focus-visible{outline:2px solid var(--g);outline-offset:2px}
.vf667 .vf667-bar .vf667-ranges{margin:0 0 0 auto}
.vf667 .vf667-ranges button{min-height:30px;padding:0 12px;font-size:13px}

.vf667 .vf667-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;margin:14px 0 2px}
.vf667 .vf667-top:empty{display:none}
.vf667 .vf667-hero{display:flex;flex-direction:column;gap:2px;min-width:0}
.vf667 .vf667-hero-k{font-size:12px;color:var(--mu);letter-spacing:.02em}
.vf667 .vf667-hero strong{font-size:42px;line-height:1.08;font-weight:800;color:var(--g);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.vf667 .vf667-hero strong small{margin-left:6px;font-size:14px;font-weight:500;letter-spacing:0;color:var(--mu)}
.vf667 .vf667-hero-d{font-size:12.5px;font-weight:600}
.vf667 .vf667-top .vf667-trend{margin:0 0 0 auto!important;font-size:13px!important}
#vf-news-body .vf667 .vf667-top .vf667-trend{margin:0 0 0 auto!important;font-size:13px!important}

.vf667 .vf667-cards{margin:12px 0 4px;gap:10px}
.vf667 .vf667-card{padding:11px 14px;border-radius:12px}
.vf667 .vf667-card strong{font-size:22px}

.vf667 .vf667-plot{margin:6px 0 0}
.vf667 .vf667-g{stroke:#e8eeea}
.vf667 .vf667-s polyline{stroke-width:2.6}
.vf667 .vf667-ar{fill-opacity:.09}
.vf667 .vf667-c0 .vf667-ar{fill:#174a31}.vf667 .vf667-c1 .vf667-ar{fill:#c2410c}.vf667 .vf667-c2 .vf667-ar{fill:#2f6fb5}
.vf667 .vf667-c3 .vf667-ar{fill:#7a5af8}.vf667 .vf667-c4 .vf667-ar{fill:#0e9384}.vf667 .vf667-c5 .vf667-ar{fill:#b54708}
.vf667 .vf667-end{stroke:#fff;stroke-width:2.5}
.vf667 .vf667-lv{font-size:12.5px;font-weight:700}

.vf667 .vf667-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:12px 0 0!important;padding:0;border-top:1px solid #e6eee9}
.vf667 .vf667-stats div{padding:12px 0 0 16px;border:0;border-left:1px solid #e6eee9;border-radius:0;background:transparent}
.vf667 .vf667-stats div:first-child{padding-left:0;border-left:0}
.vf667 .vf667-stats div::before{display:none}
.vf667 .vf667-stats dt{font-size:12px;font-weight:500;text-transform:none;letter-spacing:0}
.vf667 .vf667-stats dd{margin:2px 0 0!important;font-size:17px;font-weight:700}
#vf-news-body .vf667 .vf667-stats dd{margin:2px 0 0!important}

.vf667 .vf667-legend{margin:12px 0 0}
.vf667 .vf667-key{min-height:30px;padding:0 11px;font-size:13px}
.vf667 .vf667-data{margin:14px 0 0}
.vf667 .vf667-more{margin:12px 0 0!important}

@media (max-width:640px){
 .vf667{padding:14px 14px 12px;margin:18px 0}
 .vf667 .vf667-select{width:100%;min-width:0}
 .vf667 .vf667-bar .vf667-ranges{margin:0;width:100%}
 .vf667 .vf667-hero strong{font-size:34px}
 .vf667 .vf667-top .vf667-trend,#vf-news-body .vf667 .vf667-top .vf667-trend{margin:0!important}
 .vf667 .vf667-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .vf667 .vf667-stats div{padding:10px 0 0 14px}
 .vf667 .vf667-stats div:nth-child(odd){padding-left:0;border-left:0}
}
@media print{.vf667 .vf667-select{display:none}}