/*!
 * CASO Design Vietnam — SVN Klint Pro Web Font
 * Subset: Latin + Latin Extended + Tiếng Việt đầy đủ
 * Định dạng: WOFF2 (chính) + WOFF (dự phòng cho trình duyệt cũ)
 * ---------------------------------------------------------------
 * KHÔNG sửa file này trực tiếp. Dùng Settings → CASO Fonts để
 * bật/tắt hoặc thêm CSS bổ sung.
 */

/* ============================================================
   1. @font-face — 4 weight
   font-display:swap => chữ hiện ngay bằng font dự phòng,
   không bị "chớp trắng" (FOIT), tốt cho điểm Core Web Vitals.
   ============================================================ */

@font-face {
  font-family: 'SVN Klint Pro';
  src: url('../fonts/SVNKlintPro-Light.woff2') format('woff2'),
       url('../fonts/SVNKlintPro-Light.woff')  format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN Klint Pro';
  src: url('../fonts/SVNKlintPro-Regular.woff2') format('woff2'),
       url('../fonts/SVNKlintPro-Regular.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN Klint Pro';
  src: url('../fonts/SVNKlintPro-Medium.woff2') format('woff2'),
       url('../fonts/SVNKlintPro-Medium.woff')  format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SVN Klint Pro';
  src: url('../fonts/SVNKlintPro-Bold.woff2') format('woff2'),
       url('../fonts/SVNKlintPro-Bold.woff')  format('woff');
  font-weight: 600 900;   /* dùng chung cho cả 600, 700, 800, 900 */
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   2. Biến CSS — sửa 1 chỗ, đổi toàn site
   ============================================================ */

:root {
  --caso-font-primary: 'SVN Klint Pro', 'Helvetica Neue', Helvetica, Arial,
                       'Segoe UI', Roboto, system-ui, sans-serif;
  --caso-font-heading: var(--caso-font-primary);
}

/* ============================================================
   3. Áp dụng font
   Chỉ nhắm vào phần tử CHỨA CHỮ, đồng thời loại trừ các class
   icon-font để không làm vỡ Font Awesome / Elementor icons /
   Dashicons / WooCommerce icons.
   ============================================================ */

body,
button, input, select, optgroup, textarea,
p, span, div, a, li, dt, dd,
td, th, caption, label, legend,
blockquote, cite, figcaption, address, small, strong, em, b, i, u,
h1, h2, h3, h4, h5, h6,
.elementor-widget-container,
.elementor-heading-title,
.elementor-button,
.woocommerce, .woocommerce-page,
.wp-block-post-title, .wp-block-heading {
  font-family: var(--caso-font-primary);
}

/* Tiêu đề */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.wp-block-heading, .wp-block-post-title,
.entry-title, .product_title, .page-title, .site-title {
  font-family: var(--caso-font-heading);
}

/* ============================================================
   4. BẢO VỆ ICON FONT — bắt buộc phải có.
   Nếu thiếu phần này, mọi icon trên site sẽ biến thành ô vuông.
   ============================================================ */

.eicon, [class^="eicon-"], [class*=" eicon-"] {
  font-family: eicons !important;
}

.fa, .fas, .far, .fal, .fad, .fab,
[class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
               "Font Awesome 5 Free", "Font Awesome 5 Brands",
               FontAwesome !important;
}

.dashicons, .dashicons-before::before,
[class^="dashicons-"], [class*=" dashicons-"] {
  font-family: dashicons !important;
}

.woocommerce .star-rating,
.woocommerce .star-rating::before,
.woocommerce .star-rating span::before,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
[class^="wc-block-"]::before {
  font-family: star, WooCommerce !important;
}

.material-icons, .material-symbols-outlined,
.material-symbols-rounded, .material-symbols-sharp {
  font-family: 'Material Icons', 'Material Symbols Outlined' !important;
}

[class^="icon-"], [class*=" icon-"],
[class^="ti-"], [class*=" ti-"],
[class^="bi-"], [class*=" bi-"],
[class^="mdi-"], [class*=" mdi-"] {
  font-family: inherit;
}

/* Code / pre giữ font đơn cách cho dễ đọc */
code, kbd, samp, pre, tt,
.wp-block-code, .wp-block-preformatted {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas,
               'Courier New', monospace;
}

/* ============================================================
   5. Tinh chỉnh hiển thị tiếng Việt
   ============================================================ */

body {
  /* Bật kerning + ligature => chữ có dấu (ố, ữ, ẫ) khít và cân hơn */
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tiếng Việt nhiều dấu phụ ở trên/dưới => cần line-height thoáng hơn
   một chút so với mặc định để dấu không bị chạm dòng trên. */
body, p, li, td, .elementor-widget-text-editor {
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6, .elementor-heading-title {
  line-height: 1.25;
  letter-spacing: -0.01em;   /* SVN Klint hơi rộng ở size lớn */
}

/* Tránh ngắt chữ sai giữa từ tiếng Việt */
p, li, .elementor-widget-text-editor {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* ============================================================
   6. Ghi chú: ký hiệu ₫ (U+20AB)
   Bộ SVN Klint Pro không có glyph ₫. Trình duyệt sẽ tự động lấy
   từ font dự phòng trong stack — hiển thị bình thường, chỉ hơi
   khác kiểu dáng. Nếu muốn đồng bộ, dùng "VNĐ" hoặc "đ" thay thế
   trong cài đặt tiền tệ WooCommerce.
   ============================================================ */

.woocommerce-Price-currencySymbol {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}