/* Bundle cho 8 trang sản phẩm = product-page.css + tokens/colors + typography + spacing + base (1 request thay vì 6). Google Fonts nạp bằng <link> trong trang. Build lại khi các file nguồn đổi. */
/* Generated: hover states (replaces style-hover) + toggle helper for product pages. */
[data-hide]{display:none!important}
.h10b6b3f:hover{filter:brightness(.96);}
.h13k411y:hover{background:var(--qbis-blue-100,#eef3ff);}
.h14pumw:hover{border-color:#94a3b8;}
.h16n9i8i:hover{background:#f4f7ff;}
.h16qixrb:hover{filter:brightness(.96);transform:translateY(-2px);}
.h17vvmg5:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(11,29,78,.18);}
.h1bf4d1u:hover{filter:brightness(.96);transform:translateY(-1px);}
.h1c7gqxh:hover{background:rgba(13,28,68,.13);}
.h1sat0gr:hover{color:var(--qbis-yellow-500);}
.h1uqvyym:hover{filter:brightness(.95);}
.h1xjg122:hover{background:rgba(20,41,107,.06);}
.h5ho4:hover{border-color:var(--qbis-blue-300);}
.hbwqfbb:hover{background:rgba(255,255,255,.2);}
.hdqjjef:hover{transform:scale(1.05);box-shadow:0 16px 38px rgba(11,22,54,.5);}
.hnl60gw:hover{border-color:var(--qbis-yellow-500);color:var(--qbis-yellow-500);}
.hr6nrw8:hover{box-shadow:0 22px 50px rgba(20,41,107,.12);}
.hsdh6y6:hover{box-shadow:0 18px 40px rgba(20,41,107,.1);transform:translateY(-3px);border-color:var(--qbis-blue-300);}
.hw80vmv:hover{background:rgba(255,255,255,.08);}

/* ============================================================
   QBIS — Color tokens (LIGHT theme, per "Website QBIS.fig")
   White page · navy hero/section bands · yellow CTA · colorful
   product cards. Brand swatches taken from the Figma "Font-Size"
   palette frame: navy, yellow, orange, cyan, teal.
   ============================================================ */
:root {
  /* ---- Brand: Navy / Blue ---- */
  --qbis-navy-900: #14296b;   /* hero deepest */
  --qbis-navy-800: #1a3381;   /* hero band, dark cards */
  --qbis-navy-700: #1e3a96;
  --qbis-blue-600: #2041b4;   /* PRIMARY blue — links, primary buttons */
  --qbis-indigo-500: #6161ff; /* product card */
  --qbis-periwinkle-400: #879aff; /* product card */
  --qbis-blue-300: #c0cfff;
  --qbis-blue-200: #d6e2fb;   /* soft-blue band */
  --qbis-blue-100: #eaf0ff;   /* lightest blue surface */

  /* ---- Accents ---- */
  --qbis-yellow-500: #fcda0c; /* SIGNATURE accent / CTA */
  --qbis-yellow-300: #ffdc70;
  --qbis-cream-100: #fff1c5;  /* full-bleed warm band */
  --qbis-orange-500: #fb8500;
  --qbis-coral-500: #ff6b5f;  /* No-code product card */
  --qbis-purple-500: #5d2bff; /* "Start free trial" button */
  --qbis-cyan-500: #2bc4f2;
  --qbis-teal-500: #34c99a;

  /* ---- Neutrals ---- */
  --qbis-ink-900: #14193a;    /* darkest text */
  --qbis-ink-700: #2f3550;    /* body text */
  --qbis-gray-500: #6b7280;   /* muted */
  --qbis-gray-300: #c9ccd6;
  --qbis-surface-100: #f5f7fb;/* neutral section */
  --qbis-surface-50:  #fafbfd;
  --qbis-white: #ffffff;

  /* ---- Signature gradient orb (decorative glow) ---- */
  --qbis-gradient-orb: radial-gradient(circle at 35% 35%,
      rgba(255,159,67,.9), rgba(255,107,95,.85) 35%,
      rgba(167,139,250,.85) 70%, rgba(96,97,255,.8) 100%); /* @kind color */
  --qbis-gradient-hero: linear-gradient(170deg, #1a3381 0%, #14296b 100%); /* @kind color */

  /* ============================================================
     Semantic aliases — prefer these
     ============================================================ */
  --color-bg: var(--qbis-white);
  --color-bg-alt: var(--qbis-surface-100);
  --color-primary: var(--qbis-blue-600);
  --color-primary-hover: var(--qbis-navy-800);
  --color-accent: var(--qbis-yellow-500);
  --color-accent-ink: var(--qbis-navy-900);

  --text-strong: var(--qbis-ink-900);
  --text-body: var(--qbis-ink-700);
  --text-muted: var(--qbis-gray-500);
  --text-on-dark: var(--qbis-white);
  --text-link: var(--qbis-blue-600);

  --surface-page: var(--qbis-white);
  --surface-card: var(--qbis-white);
  --surface-muted: var(--qbis-surface-100);
  --surface-band-warm: var(--qbis-cream-100);
  --surface-band-blue: var(--qbis-blue-200);
  --surface-inverse: var(--qbis-navy-800);

  --border-subtle: #e8ebf2;
  --border-default: #dfe3ec;
  --border-strong: var(--qbis-gray-300);
  --border-focus: var(--qbis-blue-600);

  --state-success: var(--qbis-teal-500);
  --state-info: var(--qbis-cyan-500);
  --state-warning: var(--qbis-orange-500);
  --state-danger: var(--qbis-coral-500);
}

/* ============================================================
   QBIS — Typography tokens (light theme)
   Be Vietnam Pro is the real brand font (great Vietnamese support);
   used for UI, body & headings. Playfair Display kept as an optional
   serif display accent. Loaded from Google Fonts.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Be Vietnam Pro', var(--font-sans);
  --font-serif: 'Playfair Display', Georgia, serif; /* optional accent */

  /* ---- Weights ---- */
  --fw-regular: 400;  /* @kind font */
  --fw-medium: 500;   /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;     /* @kind font */
  --fw-extrabold: 800;/* @kind font */
  --fw-black: 900;    /* @kind font */

  /* ---- Type scale ---- */
  --fs-hero: clamp(30px, 3.9vw, 46px); /* @kind font */ --lh-hero: 1.1;   /* @kind font */  /* hero headline */
  --fs-display: clamp(28px, 3.4vw, 40px); /* @kind font */ --lh-display: 1.15; /* @kind font */ /* section titles */
  --fs-h2: 28px;   --lh-h2: 1.25; /* @kind font */
  --fs-h3: 20px;   --lh-h3: 1.3;  /* @kind font */
  --fs-h4: 17px;   --lh-h4: 1.4;  /* @kind font */
  --fs-h5: 16px;   --lh-h5: 1.5;  /* @kind font */
  --fs-stat: 34px; --lh-stat: 1;  /* @kind font */   /* hero stats */
  --fs-body: 15px; --lh-body: 1.7; /* @kind font */
  --fs-body-sm: 13.5px; --lh-body-sm: 1.6; /* @kind font */
  --fs-caption: 12px; --lh-caption: 1.4; /* @kind font */
  --fs-label: 12px; --lh-label: 1.4; /* @kind font */ /* eyebrow */
  --fs-button: 15px; --lh-button: 1; /* @kind font */
}

/* ---- Helper classes ---- */
.qbis-eyebrow { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--qbis-orange-500); }
.qbis-display { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-size: var(--fs-display);
  line-height: var(--lh-display); color: var(--text-strong); }
.qbis-hero { font-family: var(--font-sans); font-weight: var(--fw-black); font-size: var(--fs-hero);
  line-height: var(--lh-hero); }
.qbis-body { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--text-body); }
.qbis-stat { font-family: var(--font-sans); font-weight: var(--fw-extrabold); font-size: var(--fs-stat);
  line-height: var(--lh-stat); color: var(--qbis-yellow-500); }

/* ============================================================
   QBIS — Spacing, radius, shadow & layout tokens
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Radius (Figma: pill buttons, 15px product cards) ---- */
  --radius-xs: 6px;    /* inputs, small chips */
  --radius-sm: 8px;    /* buttons */
  --radius-md: 15px;   /* product cards */
  --radius-lg: 20px;   /* feature blocks, mockups */
  --radius-xl: 28px;   /* large CTA band */
  --radius-2xl: 32px;
  --radius-pill: 100px;
  --radius-full: 999px;

  /* ---- Shadows (soft, blue-tinted, on light) ---- */
  --shadow-xs: 0 1px 2px rgba(20,25,58,0.06);
  --shadow-sm: 0 2px 8px rgba(20,25,58,0.08);
  --shadow-md: 0 10px 30px rgba(20,25,58,0.10);
  --shadow-lg: 0 24px 60px rgba(20,25,58,0.14);
  --shadow-card: 0 8px 28px rgba(26,51,129,0.10);
  --shadow-glow-orange: 0 0 60px rgba(255,150,80,0.30);

  /* ---- Layout ---- */
  --container-max: 1024px;
  --container-pad: 32px;
  --section-y: 88px;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ============================================================
   QBIS — base resets & element defaults (light theme)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--text-link); text-decoration: none; transition: color .2s, opacity .2s; }
a:hover { opacity: .85; }

h1, h2, h3, h4, h5 { margin: 0; color: var(--text-strong); font-family: var(--font-sans); }

::selection { background: var(--qbis-blue-200); color: var(--qbis-navy-900); }
:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.qbis-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.qbis-sec { padding: 88px 0; }