/* Viraf design tokens — source: viraf.vn, captured 10/08/2026. */
:root {
  --viraf-yellow: #ffcb05;
  --viraf-yellow-hover: #f1c213;
  --viraf-black: #000000;
  --viraf-ink: #282828;
  --viraf-copy: #464646;
  --viraf-beige: #f4f3ed;
  --viraf-soft: #f5f5f5;
  --viraf-white: #ffffff;
  --viraf-border: #d8d7d0;
  --viraf-font-body: 'Afacad', Arial, sans-serif;
  --viraf-font-display: 'Raleway', 'Afacad', Arial, sans-serif;
  /* Khung nội dung chuẩn: Figma 1920 đặt nội dung ở x=247..1672 → 1425px.
     Giá trị thật do T1 cấp (`style.container_max_width*` = 1455px cho cả 4 mốc
     1200/1400/1920/2560 ⇒ nội dung 1425px, không giãn thêm ở 2K/4K). Token dưới đây chỉ để
     tham chiếu trong theme, KHÔNG dùng để ép width lên hàng boxed (NT-10). */
  --viraf-container: 1425px;
  /* Vùng nội dung thật của `.container`: T1 đặt max-width 1455px, `.container` có padding-x 15px
     ⇒ nội dung 1425px (đúng khung Figma). Token này CHỈ dùng cho phần tử KHÔNG phải `.container`
     (swiper tràn mép, lớp nền full-bleed…); mọi hàng boxed lấy bề rộng từ T1, không từ token này.
     Trước đây là `min(1425px, 80vw)` — 80vw không có trần nên ở 2560px khung phình 2048px. */
  --viraf-page-grid: min(1425px, calc(100vw - 40px));
  /* Bề rộng viewport có trần 1920 — dùng cho các khối tràn mép (testimonials,
     mask slider dịch vụ). Trên màn >2K khối giữ đúng dáng 1920 thay vì giãn vô hạn. */
  --viraf-vw: min(100vw, 1920px);
  /* Lề trái của khung nội dung đã căn giữa: 1920→247.5px, 2560→567.5px.
     Dùng để neo các khối tràn mép vào cùng trục với phần còn lại của trang. */
  --viraf-gutter-left: calc((100vw - var(--viraf-page-grid)) / 2);
  /* Cột trái vàng khối tin tức = 316/1425 (Figma 68:93) — dùng chung với ô logo footer. */
  --viraf-left-rail: 22.1754%;
  /* Widget Liên hệ nổi — để ở :root (không phải trên .dmdc-contact-widget) để nút "Lên đầu trang"
     cũng đọc được và tự tính vị trí tránh chồng lấn. `--cw-count` do partial contact_widget phát
     theo SỐ MỤC THẬT (mặc định 0 khi widget tắt). */
  --cw-size: 48px;
  --cw-gap: 12px;
  --cw-edge: 24px;
  --cw-count: 0;
  --viraf-section-y: 50px;
  --viraf-gutter: 20px;
  --viraf-transition: 0.3s ease;
  --viraf-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
  --stch-font-heading: var(--viraf-font-body);
  --stch-font-body: var(--viraf-font-body);
  --stch-primary: var(--viraf-yellow);
  --stch-primary-container: var(--viraf-yellow-hover);
  --stch-on-primary: var(--viraf-black);
  --stch-surface: var(--viraf-white);
  --stch-surface-low: var(--viraf-beige);
  --stch-surface-lowest: var(--viraf-white);
  --stch-on-surface: var(--viraf-ink);
  --stch-on-surface-variant: var(--viraf-copy);
  --stch-accent: var(--viraf-yellow);
  --stch-outline-ghost: rgba(0, 0, 0, 0.12);
  --stch-radius-full: 0;
  --stch-radius-lg: 0;
  --stch-radius-md: 0;
  --stch-shadow-ambient: var(--viraf-shadow);
  --stch-transition-kinetic: all var(--viraf-transition);
  --stch-z-header: 1050;
  --stch-z-modal: 1100;
  --color-primary: var(--viraf-yellow);
  --color-primary-hover: var(--viraf-yellow-hover);
  --color-primary-light: #fff7d4;
  --color-text-primary: var(--viraf-ink);
  --color-text-secondary: var(--viraf-copy);
  --color-surface: var(--viraf-white);
  --color-surface-alt: var(--viraf-beige);
  --color-border: var(--viraf-border);
  --primary: var(--viraf-yellow);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
}

html { scroll-behavior: smooth; }
body.viraf-site {
  background: var(--viraf-white);
  color: var(--viraf-ink);
  font-family: var(--viraf-font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.viraf-site h1,
body.viraf-site h2,
body.viraf-site h3,
body.viraf-site h4,
body.viraf-site h5,
body.viraf-site h6 { font-family: var(--viraf-font-body); line-height: 1.2; }
body.viraf-site img { max-width: 100%; }