/* ============================================================
   BỘ CHỮ THƯƠNG HIỆU PETX
   File này nạp SAU styles.css nên ghi đè font-family của bản cũ (Inter).

   Vì sao chọn 2 font này cho một thương hiệu thú cưng:
   - Đầu nét bo tròn (rounded terminal) = mềm, gợi lông/đệm chân — ngược hẳn
     với nét vuông sắc của font doanh nghiệp thông thường.
   - Baloo 2 có nét mập và nhịp chữ hơi "nảy", đọc lên thấy vui và thân thiện,
     nhưng vẫn đủ đậm để làm tiêu đề bán hàng.
   - Nunito bo tròn mà x-height cao, nên ở cỡ 14–16px vẫn đọc tốt và quan trọng
     nhất là dấu tiếng Việt chồng (ế, ữ, ộ, ỡ) không bị dính vào thân chữ.

   KHÔNG dùng Baloo 2 cho đoạn văn dài: nét mập + tròn đọc lâu sẽ mỏi mắt.
   Chỉ dùng cho tiêu đề, số giá, nhãn ngắn.
   ============================================================ */

:root {
    --font-display: 'Baloo 2', 'Nunito', system-ui, -apple-system, sans-serif;
    --font-body: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
    font-family: var(--font-body);
    /* Nunito hơi nhỏ thị giác so với Inter -> nới nhẹ để cân lại */
    letter-spacing: 0.005em;
}

/* ---------- Tiêu đề dùng font display ---------- */
h1, h2, h3, h4, h5, h6,
.section-title,
.hero-title,
.spotlight-title,
.feature-title,
.logo-text,
.price-amount,
.price-period,
.btn {
    font-family: var(--font-display);
}

/* Baloo 2 vốn đã cao và mập -> giảm line-height mặc định cho khỏi rời rạc */
h1, h2, h3,
.section-title,
.hero-title,
.spotlight-title {
    line-height: 1.2;
    letter-spacing: -0.005em;
}

/* Logo: cho nảy hơn một chút, đây là nơi được phép "vui" nhất */
.logo-text {
    font-weight: 800;
    letter-spacing: 0.01em;
}

/* Nút bấm: Baloo 2 ở weight 700 đọc rõ và trông "bấm được" */
.btn {
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ---------- Số liệu: tiền, ngày, mã vạch ---------- */
/* Khoá bề rộng chữ số để các cột tiền thẳng hàng, không nhảy khi đổi số. */
.price-amount,
.price-note,
.expiry-item-sub,
.expiry-pill,
.stat-number,
.phone-input span {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Giá tiền là điểm nhấn bán hàng -> để Baloo 2 weight cao nhất */
.price-amount {
    font-weight: 800;
}

/* ---------- Đoạn văn ---------- */
/* Nunito nét mảnh hơn Inter ở cùng weight, nên body dùng 400 vẫn đủ,
   nhưng chữ phụ màu nhạt thì nâng lên 500 cho khỏi mờ. */
.section-subtitle,
.feature-description,
.spotlight-lead,
.hint,
.spotlight-note {
    font-weight: 500;
}

/* ---------- Giữ nguyên monospace cho khối mã ---------- */
/* styles-shared.css / styles-guide.css đang dùng JetBrains Mono — không đụng,
   mã lệnh cần chữ đều bề rộng. */