/* ==========================================================================
   WISTORIX — TYPOGRAPHY SYSTEM
   Nguồn: 01_Brand_Asset/Guidelines/Wistorix_Color_Typography_Guidelines_v2.pdf

   Font chính thức theo guideline: TT Supermolot Neue Trl Variable
   (TypeType Foundry — font thương mại có bản quyền).
   Bản đang dùng: Manrope Variable, self-host, đúng hệ weight 300–700
   và type scale trong guideline.

   ►► KHI CÓ FILE FONT BẢN QUYỀN:
      1. Đặt TTSupermolotNeue-Variable.woff2 vào assets/fonts/
      2. Bỏ comment khối @font-face "TT Supermolot Neue Trl" bên dưới
      3. Đổi --wx-font-brand thành: 'TT Supermolot Neue Trl', 'Manrope', sans-serif
      Không cần sửa bất kỳ file HTML nào khác.

   File này nạp SAU aeline.webflow.shared.css để ghi đè biến typography
   của template Webflow.
   ========================================================================== */

/* ---------- 1. FONT FILE (self-host) ---------- */

@font-face {
  font-family: 'Manrope';
  /* 27/09/2026: đổi data URI (145 KB chặn hiển thị) sang file woff2 cùng nội dung.
     File phải nằm ở assets/fonts/. index.html đã preload sẵn file này. */
  src: url('fonts/Manrope-Variable.woff2') format('woff2-variations'),
       url('fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/*
@font-face {
  font-family: 'TT Supermolot Neue Trl';
  src: url('fonts/TTSupermolotNeue-Variable.woff2') format('woff2-variations'),
       url('fonts/TTSupermolotNeue-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
*/

/* ---------- 2. TOKEN THƯƠNG HIỆU ---------- */

:root,
body {
  /* Đổi 1 dòng này là toàn site đổi font */
  --wx-font-brand: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                   Roboto, Helvetica, Arial, sans-serif;

  /* Weight scale — guideline: Light 300 / Regular 400 / Medium 500 /
     SemiBold 600 / Bold 700 */
  --wx-w-light: 300;
  --wx-w-regular: 400;
  --wx-w-medium: 500;
  --wx-w-semibold: 600;
  --wx-w-bold: 700;
  --wx-w-h1: 630;      /* H1/Display: giảm 10% so với Bold, chọn 27/08/2026 */

  /* Tracking (chọn 27/08/2026, gọn kiểu template gốc): H1 −3%, H2 −2%, H3 −1%, body −1%, caption +4% */
  --wx-ls-display: -0.03em;
  --wx-ls-h2: -0.02em;
  --wx-ls-body: -0.01em;
  --wx-ls-caption: 0.04em;
}

/* ---------- 3. GHI ĐÈ BIẾN TYPOGRAPHY CỦA WEBFLOW ---------- */
/* Template gốc dùng Plus Jakarta Sans (body + headers) và Geistmono
   (alternate: nút, eyebrow, số liệu). Guideline Wistorix chỉ có MỘT
   typeface, nên cả ba khe đều trỏ về font thương hiệu. */

:root,
body {
  --_typography---font-family--body: var(--wx-font-brand);
  --_typography---font-family--headers: var(--wx-font-brand);
  --_typography---font-family--alternate: var(--wx-font-brand);

  --_typography---h1--font-family: var(--wx-font-brand);
  --_typography---h2--font-family: var(--wx-font-brand);
  --_typography---h3--font-family: var(--wx-font-brand);
  --_typography---h4--font-family: var(--wx-font-brand);
  --_typography---h5--font-family: var(--wx-font-brand);
  --_typography---h6--font-family: var(--wx-font-brand);
  --_typography---button--font-family: var(--wx-font-brand);

  /* Tracking theo guideline — thay cho −.04em/−.06em của template.
     Manrope rộng hơn Plus Jakarta Sans nên tracking chặt sẽ dính chữ. */
  --_typography---5xl--letter-spacing: var(--wx-ls-display);  /* Display */
  --_typography---4xl--letter-spacing: var(--wx-ls-display);  /* H1 */
  --_typography---3xl--letter-spacing: var(--wx-ls-h2);       /* H2 */
  --_typography---2xl--letter-spacing: var(--wx-ls-h2);
  --_typography---xl--letter-spacing: -0.01em;               /* H3 */
  --_typography---lg--letter-spacing: var(--wx-ls-body);
  --_typography---base--letter-spacing: var(--wx-ls-body);    /* Body */
  --_typography---sm--letter-spacing: var(--wx-ls-body);
  --_typography---xs--letter-spacing: var(--wx-ls-caption);   /* Caption */

  /* Weight — guideline: Display/H1/H2 Bold, H3 SemiBold, body Regular */
  --_typography---5xl--font-weight: var(--wx-w-h1);
  --_typography---4xl--font-weight: var(--wx-w-h1);
  --_typography---3xl--font-weight: var(--wx-w-bold);
  --_typography---2xl--font-weight: var(--wx-w-semibold);
  --_typography---xl--font-weight: var(--wx-w-semibold);
  --_typography---lg--font-weight: var(--wx-w-medium);

  /* Nút: guideline caption = Medium, tracking +4% (template để .12em) */
  --_typography---button--font-weight: var(--wx-w-medium);
  --_typography---button--letter-spacing: var(--wx-ls-caption);

  /* Class .h1–.h6 của Webflow đọc bộ biến riêng — template để tất cả là
     Medium 500 với tracking −.06em/−.04em; đưa về đúng guideline. */
  --_typography---h1--font-weight: var(--wx-w-h1);
  --_typography---h1--letter-spacing: var(--wx-ls-display);
  --_typography---h1--line-height: 1.15;

  --_typography---h2--font-weight: var(--wx-w-bold);
  --_typography---h2--letter-spacing: var(--wx-ls-h2);
  --_typography---h2--line-height: 1.22;

  --_typography---h3--font-weight: var(--wx-w-semibold);
  --_typography---h3--letter-spacing: -0.01em;
  --_typography---h3--line-height: 1.35;

  --_typography---h4--font-weight: var(--wx-w-semibold);
  --_typography---h4--letter-spacing: 0em;

  --_typography---h5--font-weight: var(--wx-w-medium);
  --_typography---h6--font-weight: var(--wx-w-medium);

  /* ---- GIÃN DÒNG ----
     Template Webflow để line-height 1.5 cho body và 1.33 cho cỡ lớn —
     quá chặt với tiếng Việt: dấu thanh nằm phía trên chữ, dấu móc nằm
     phía dưới, nên hai dòng liền nhau dễ chạm nhau. Nới toàn hệ. */
  --_typography---base--line-height: 1.6;   /* body */
  --_typography---sm--line-height: 1.55;
  --_typography---xs--line-height: 1.5;     /* caption */
  --_typography---lg--line-height: 1.5;
  --_typography---xl--line-height: 1.35;
  --_typography---2xl--line-height: 1.3;
  --_typography---3xl--line-height: 1.22;
  --_typography---4xl--line-height: 1.18;
  --_typography---5xl--line-height: 1.15;
}

/* ---------- 4. NỀN CHUNG ---------- */

body {
  font-family: var(--wx-font-brand);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;

  /* Template đặt cứng letter-spacing:-.02em và line-height:1.4 ngay trên
     body — mọi text kế thừa (bài blog, rich text) đều bị bó theo. Nới ra. */
  letter-spacing: var(--wx-ls-body);
  line-height: 1.6;
}

/* Chặn mọi font sót lại của template (Inter, Arial, Helvetica Neue,
   Plus Jakarta Sans, Geistmono) — trừ bộ icon của Webflow. */
h1, h2, h3, h4, h5, h6,
p, a, li, span, div, label, legend, blockquote, figcaption, td, th,
button, input, select, textarea, optgroup {
  font-family: var(--wx-font-brand);
}

[class*='w-icon'], .w-icon-nav-menu, .w-icon-dropdown-toggle,
.w-icon-slider-left, .w-icon-slider-right, .w-icon-file-upload-remove {
  font-family: webflow-icons !important;
}

/* ---------- 5. PHÂN CẤP THEO GUIDELINE ---------- */

/* h*[class] có specificity cao hơn các class tiện ích .text-4xl/.h2… của
   template, nên trọng lượng brand luôn thắng dù thẻ mang class cỡ chữ nào. */
h1, h1[class] { font-weight: var(--wx-w-h1);       letter-spacing: var(--wx-ls-display); line-height: 1.15; }
h2, h2[class] { font-weight: var(--wx-w-bold);     letter-spacing: var(--wx-ls-h2);      line-height: 1.22; }
h3, h3[class] { font-weight: var(--wx-w-semibold); letter-spacing: -0.01em;              line-height: 1.35; }
h4, h4[class], h5, h5[class], h6, h6[class] { font-weight: var(--wx-w-semibold); letter-spacing: 0; }

p, li { font-weight: var(--wx-w-regular); line-height: 1.6; }

/* Số liệu canh cột đều — bảng giá, thống kê */
table, .w-tab-content [class*='number'], [class*='counter'], [class*='stat'] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ---------- 6. TIỆN ÍCH ---------- */

.wx-display  { font-weight: 800; letter-spacing: var(--wx-ls-display); line-height: 1.12; }
.wx-caption,
.wx-eyebrow  { font-weight: var(--wx-w-medium); letter-spacing: var(--wx-ls-caption);
               text-transform: uppercase; font-size: 0.8125rem; line-height: 1.4; }
.wx-light    { font-weight: var(--wx-w-light); }
.wx-regular  { font-weight: var(--wx-w-regular); }
.wx-medium   { font-weight: var(--wx-w-medium); }
.wx-semibold { font-weight: var(--wx-w-semibold); }
.wx-bold     { font-weight: var(--wx-w-bold); }

/* ==== Wistorix theme (30/08/2026): thay toàn bộ tông đen của template bằng navy thương hiệu ==== */
:root{
  --grey--grey-900:#0A1F52;            /* mảng nền tối (panel, nút tròn mũi tên, bg-dark) */
  --base--black:#0A1B4A;               /* chữ chính trên nền sáng */
  --base--translucent-black:#0a2a5545; /* nút biến thể mờ */
}

/* ==========================================================================
   Hero trang Tính năng (tinh-nang.html) · lớp gradient navy bên trái
   Phủ lên ảnh nền để tiêu đề trắng đọc rõ. Đặt ở CSS chứ không ở HTML nên
   editor local lưu trang không làm mất. Chỉnh độ đậm ở --wx-hero-veil.
   ========================================================================== */
.sec_h-services{--wx-hero-veil:.94}
.sec_h-services::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(4,19,53,var(--wx-hero-veil)) 0%,
    rgba(2,30,107,calc(var(--wx-hero-veil) - .12)) 26%,
    rgba(2,30,107,calc(var(--wx-hero-veil) - .5)) 46%,
    rgba(4,19,53,0) 66%);
}
.sec_h-services .her_top{z-index:2}
.sec_h-services .loop_img{z-index:2}
@media (max-width:767px){
  .sec_h-services::after{
    background:linear-gradient(180deg,
      rgba(4,19,53,var(--wx-hero-veil)) 0%,
      rgba(2,30,107,calc(var(--wx-hero-veil) - .2)) 42%,
      rgba(4,19,53,0) 72%);
  }
}