/* =====================================================================
   Nhãn sản phẩm (v6.7.0) — libs/product_labels.php sinh markup.
   - .label-text.hot : Bán chạy (tự động), cuối dòng số liệu
   - .pl-row         : dòng thứ hai — Độ khoẻ (.pl-health) + nhãn chọn sẵn (.pl-tag)
   Mặc định là màu cho nền sáng; html[data-theme="dark"] đổi sang màu cho nền tối.
   Chữ trắng trên cam #c2410c đạt tương phản 5:1 (cam --orange của theme chỉ 3,4:1).
   ===================================================================== */
/* GIỮ inline-block như các .label-text bên cạnh: inline-flex lấy đáy icon làm đường chân chữ
   nên cả ô bị đẩy lên ~1px so với Kho hàng / Đã bán (v6.7.1). */
.label-text.hot { background: #c2410c; color: #ffffff; }
.label-text.hot svg { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; fill: #ffffff; }

.pl-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 1px 0 6px; }
.pl-health,
.pl-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    line-height: 14px;
    padding: 4px 8px;
    border-radius: 3px;
    border: 1px solid;
    white-space: nowrap;
}

/* Độ khoẻ: 4 vạch như cột sóng, số vạch sáng = mức */
.pl-health { gap: 6px; font-weight: 600; color: var(--pl-hc); background: var(--pl-hbg); border-color: var(--pl-hbd); }
.pl-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.pl-bars i { display: block; width: 3px; border-radius: 1px; background: rgba(0, 0, 0, .15); }
.pl-bars i:nth-child(1) { height: 4px; }
.pl-bars i:nth-child(2) { height: 6px; }
.pl-bars i:nth-child(3) { height: 8px; }
.pl-bars i:nth-child(4) { height: 10px; }
.pl-lv1 .pl-bars i:nth-child(-n+1),
.pl-lv2 .pl-bars i:nth-child(-n+2),
.pl-lv3 .pl-bars i:nth-child(-n+3),
.pl-lv4 .pl-bars i:nth-child(-n+4) { background: var(--pl-hc); }
.pl-lv1 { --pl-hc: #5b6472; --pl-hbg: #f1f3f6; --pl-hbd: #cfd4dc; }
.pl-lv2 { --pl-hc: #0b7a4b; --pl-hbg: #e8f7ef; --pl-hbd: #a7dfc2; }
.pl-lv3 { --pl-hc: #0b6fa4; --pl-hbg: #e7f4fb; --pl-hbd: #a9d6ef; }
.pl-lv4 { --pl-hc: #9a5b00; --pl-hbg: #fdf3e1; --pl-hbd: #ecc98a; }

/* Nhãn chọn sẵn: viền mảnh, không tranh chỗ với số liệu */
.pl-tag { color: #4a5260; border-color: #d5d9e0; background: transparent; }
.pl-tag svg { width: 13px; height: 13px; flex: none; fill: none; stroke: #6b7480; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Popup mua (.view-meta) và trang chi tiết (.details-meta) là flex MỘT HÀNG căn giữa dọc: dòng nhãn bị
   đẩy sang phải, lơ lửng giữa các dòng số liệu và ép số liệu xuống 3 dòng. Cho xuống hàng riêng; đồng
   thời chặn rule `.view-meta span` (lề trái 5px + màu xám) đè lên nhãn (v6.7.2). */
.view-meta,
.details-meta { flex-wrap: wrap; }
.view-meta > .pl-row,
.details-meta > .pl-row { flex-basis: 100%; }
.view-meta .pl-row span,
.details-meta .pl-row span { margin-left: 0; }
.view-meta .pl-health,
.details-meta .pl-health { color: var(--pl-hc); }
.view-meta .pl-tag,
.details-meta .pl-tag { color: #4a5260; }

/* ---- Giao diện tối ---- */
html[data-theme="dark"] .label-text.hot { color: #ffffff; }
html[data-theme="dark"] .pl-bars i { background: rgba(255, 255, 255, .18); }
html[data-theme="dark"] .pl-lv1 { --pl-hc: #aeb4bf; --pl-hbg: rgba(174, 180, 191, .10); --pl-hbd: rgba(174, 180, 191, .40); }
html[data-theme="dark"] .pl-lv2 { --pl-hc: #34d399; --pl-hbg: rgba(52, 211, 153, .12); --pl-hbd: rgba(52, 211, 153, .45); }
html[data-theme="dark"] .pl-lv3 { --pl-hc: #38bdf8; --pl-hbg: rgba(56, 189, 248, .12); --pl-hbd: rgba(56, 189, 248, .45); }
html[data-theme="dark"] .pl-lv4 { --pl-hc: #fbbf24; --pl-hbg: rgba(251, 191, 36, .12); --pl-hbd: rgba(251, 191, 36, .45); }
html[data-theme="dark"] .pl-health { color: var(--pl-hc); }
html[data-theme="dark"] .pl-tag { color: #c9ced8; border-color: #3a414d; }
html[data-theme="dark"] .pl-tag svg { stroke: #9aa3b2; }

/* ---- Form admin (Sửa/Thêm sản phẩm) ---- */
.pl-admin-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-admin-chips .btn-check + label { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 9px; border: 1px solid #d5d9e0; border-radius: 6px; cursor: pointer; background: #fff; font-size: 13px; }
.pl-admin-chips .btn-check:checked + label { border-color: #4f5bd5; box-shadow: 0 0 0 2px rgba(79, 91, 213, .25); }
.pl-admin-checks { display: flex; flex-direction: column; gap: 6px; }
.pl-admin-checks .form-check { display: flex; align-items: center; gap: 8px; min-height: 30px; margin: 0; }
.pl-admin-checks .form-check-input { margin: 0; }
.pl-admin-checks select { width: auto; padding-top: 2px; padding-bottom: 2px; }
.pl-admin-counter.pl-full { color: #b42318; font-weight: 600; }