/*
 * hhm-typography.css: lớp chữ và màu "đậm đà" (Gói A, 2026-11-05).
 * Nạp SAU CÙNG trong start.php / content_start.php. Muốn quay lại bản cũ: xóa dòng <link> gọi file này.
 * File này là lớp đè lên CSS cũ: CSS cũ dùng selector theo ID (#hhm-product-detail…) và có chỗ !important,
 * nên ở đây dùng !important cho các thuộc tính cần đổi. Phạm vi selector giữ hẹp.
 * Quyết định đã chốt (doc/design/MEMORY.md):
 *   - Font Be Vietnam Pro.
 *   - Giá #c44708, đậm 800.
 *   - Nút chính: nền #c44708 chữ trắng (4,9:1); khi rê chuột #ad3c00 (6,1:1).
 *   - Chữ phụ #5b6573. Không chữ nào dưới 12px.
 *   - GIỮ chip Size/Màu trên thẻ, kể cả khi chip bị cắt ở mép thẻ.
 */
:root {
  --hhm-font: "Be Vietnam Pro", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hhm-ink: #1d2633;
  --hhm-ink-muted: #5b6573;
  --hhm-price: #c44708;
  --hhm-cta: #c44708;
  --hhm-cta-hover: #ad3c00;
}

/* 1. Font: áp cho chữ, chừa icon (thẻ i, class có "fa"/"icon", nội dung trong svg). */
body.hhm-live,
body.hhm-live *:not(i):not(svg):not(svg *):not([class*="fa"]):not([class*="icon"]) {
  font-family: var(--hhm-font) !important;
}

/* 2. Tiêu đề khối nội dung (không áp cho menu header) */
body.hhm-live main h2,
body.hhm-live .hhm-section h2,
body.hhm-live section > h2,
body.hhm-live section header h2 { color: var(--hhm-ink) !important; font-weight: 800 !important; }

/* 3. Thẻ sản phẩm (trang chủ, danh mục, sản phẩm liên quan) */
body.hhm-live .hhm-product-card h3 a { color: var(--hhm-ink) !important; font-weight: 700 !important; }
body.hhm-live .hhm-card-prices strong { color: var(--hhm-price) !important; font-weight: 800 !important; letter-spacing: -.01em; }
body.hhm-live .hhm-card-prices del { color: var(--hhm-ink-muted) !important; font-size: 12px !important; }
body.hhm-live .hhm-card-version { font-size: 12px !important; color: var(--hhm-ink) !important; }
body.hhm-live .hhm-card-choices button { font-size: 12px !important; color: var(--hhm-ink) !important; border-color: #b8c2cc !important; font-weight: 600 !important; }
body.hhm-live .hhm-card-choices button[aria-pressed="true"] { color: var(--hhm-cta-hover) !important; border-color: var(--hhm-cta) !important; }
body.hhm-live .hhm-card-badge { font-size: 12px !important; }
body.hhm-live .hhm-card-rating,
body.hhm-live .hhm-rating-label { font-size: 12px !important; color: var(--hhm-ink-muted) !important; }
body.hhm-live .hhm-card-action {
  background: var(--hhm-cta) !important;
  border-color: var(--hhm-cta) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
body.hhm-live .hhm-card-action svg { color: #fff !important; }
body.hhm-live .hhm-card-action:hover,
body.hhm-live .hhm-card-action:focus-visible { background: var(--hhm-cta-hover) !important; border-color: var(--hhm-cta-hover) !important; }

/* 4. Trang chi tiết sản phẩm */
body.hhm-detail-page .pd-price { color: var(--hhm-price) !important; font-weight: 800 !important; }
body.hhm-detail-page .pd-action.pd-primary {
  background: var(--hhm-cta) !important;
  border-color: var(--hhm-cta) !important;
  color: #fff !important;
}
body.hhm-detail-page .pd-action.pd-primary:hover,
body.hhm-detail-page .pd-action.pd-primary:focus-visible { background: var(--hhm-cta-hover) !important; border-color: var(--hhm-cta-hover) !important; }
/* Nút "+ So sánh" là nút phụ, không được nổi hơn nút Mua ngay. */
body.hhm-detail-page .cmp-detail-button {
  background: #fff !important;
  color: var(--hhm-ink) !important;
  border: 1px solid #b8c2cc !important;
}
body.hhm-detail-page .cmp-detail-button:hover { border-color: var(--hhm-cta) !important; color: var(--hhm-cta-hover) !important; }
body.hhm-detail-page .pd-breadcrumb,
body.hhm-detail-page .pd-review-state,
body.hhm-detail-page .pd-rating-hint { color: var(--hhm-ink-muted) !important; }

/* 5. Giá gạch ngang ở mọi nơi */
body.hhm-live del { color: var(--hhm-ink-muted) !important; }