/* ============================================================
   IN NHANH CO — design-system nền (tem-verify)
   Tokens trích từ design system ce1295 (colors/typography) + readme
   (spacing 4px, radii 10-12/18, shadow key-ink, motion 120-200ms).
   Font self-hosted (web/static/fonts) — KHÔNG CDN (riêng tư/offline).
   ============================================================ */
/* fonts.css nạp bằng <link> song song ở head (bỏ @import — chuỗi tuần tự html→ds.css→fonts.css làm chậm chữ hiện) */

:root {
  /* ---- Brand CMYK ---- */
  --brand-cyan:#28A7DF; --brand-magenta:#E50E8A; --brand-yellow:#F3EC1B; --brand-key:#221F1F;

  /* ---- Cyan ramp (primary) ---- */
  --cyan-50:#EBF7FD; --cyan-100:#CCEBF9; --cyan-200:#9BD8F2; --cyan-300:#66C4EA; --cyan-400:#42B4E4;
  --cyan-500:#28A7DF; --cyan-600:#1E8ABD; --cyan-700:#1B6F99; --cyan-800:#1D5A7B; --cyan-900:#1C4A66;
  /* ---- Magenta ---- */
  --magenta-500:#E50E8A; --magenta-600:#C50B76; --magenta-50:#FDEAF4;
  /* ---- Yellow ---- */
  --yellow-400:#F3EC1B; --yellow-500:#E1D70F; --yellow-50:#FEFDE7;
  /* ---- Ink / paper (warm) ---- */
  --paper:#FFFFFF; --ink-50:#F8F7F4; --ink-100:#F1EFEA; --ink-200:#E6E3DC; --ink-300:#D4CFC6;
  --ink-400:#B4AEA4; --ink-500:#8B857B; --ink-600:#6A655D; --ink-700:#4F4B45; --ink-800:#363330;
  --ink-900:#221F1F; --ink-950:#141211;
  /* ---- Status ---- */
  --success-surface:#E7F6EF; --success:#12945E; --success-strong:#0C6E45;
  --warning-surface:#FDF6D9; --warning:#C0921A; --warning-strong:#8A6B10;
  --danger-surface:#FDECEA;  --danger:#DC3B34;  --danger-strong:#A82820;
  --info-surface:#EBF7FD;    --info:#1E8ABD;    --info-strong:#1D5A7B;

  /* ---- Semantic aliases ---- */
  --text-strong:var(--ink-900); --text-body:var(--ink-800); --text-muted:var(--ink-600);
  --text-subtle:var(--ink-500); --text-disabled:var(--ink-400);
  --text-on-key:#fff; --text-on-brand:#fff; --text-on-yellow:var(--ink-950);
  --text-link:var(--cyan-700); --text-link-hover:var(--cyan-800);
  --surface-page:var(--ink-50); --surface-card:#fff; --surface-sunken:var(--ink-100);
  --surface-hover:var(--ink-50); --surface-key:var(--ink-900); --surface-inverse:var(--ink-950);
  --surface-overlay:rgba(20,18,17,.55);
  --border-subtle:var(--ink-200); --border-default:var(--ink-300); --border-strong:var(--ink-400);
  --border-inverse:rgba(255,255,255,.16); --border-focus:var(--cyan-500);
  --brand-primary:var(--cyan-500); --brand-primary-hover:var(--cyan-600); --brand-primary-active:var(--cyan-700);
  --brand-primary-surface:var(--cyan-50); --brand-ink:var(--ink-900); --brand-ink-hover:var(--ink-800);
  --ring-color:rgba(40,167,223,.40);

  /* ---- Type ---- */
  --font-display:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular','Menlo',monospace;
  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:3.75rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800;
  --leading-tight:1.1; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.015em; --tracking-wide:.02em; --tracking-widest:.16em;

  /* ---- Spacing (4px) / layout ---- */
  --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;
  --container-xl:1200px; --container-sm:520px; --section-y:96px;

  /* ---- Radius ---- */
  --radius-sm:8px; --radius-md:10px; --radius-lg:12px; --radius-xl:18px; --radius-2xl:24px; --radius-pill:999px;

  /* ---- Shadow (tinted key ink) ---- */
  --shadow-xs:0 1px 2px rgba(34,31,31,.06);
  --shadow-sm:0 2px 6px rgba(34,31,31,.08);
  --shadow-md:0 6px 18px rgba(34,31,31,.10);
  --shadow-lg:0 16px 40px rgba(34,31,31,.12);
  --shadow-focus:0 0 0 3px var(--ring-color);
  --shadow-brand:0 8px 28px rgba(40,167,223,.28);

  /* ---- Motion ---- */
  --ease-standard:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:120ms; --dur:180ms; --dur-slow:240ms;
}

/* ---- base reset ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-relaxed);
  color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--weight-extrabold);
  letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--text-strong)}
p{margin:0}
a{color:var(--text-link);text-decoration:none} a:hover{color:var(--text-link-hover)}
img,svg{max-width:100%;display:block}
::selection{background:var(--brand-yellow);color:var(--ink-950)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- layout ---- */
.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-6)}
.container-sm{max-width:var(--container-sm)}
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}

/* ---- eyebrow (mono UPPERCASE, dấu ấn kỹ thuật) ---- */
.eyebrow{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}
.mono{font-family:var(--font-mono)}

/* ---- CMYK four-colour rule (signature motif) ---- */
.cmyk-rule{height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-cyan) 0 25%,var(--brand-magenta) 0 50%,var(--brand-yellow) 0 75%,var(--brand-key) 0 100%)}
.cmyk-dots{display:inline-flex;gap:5px}
.cmyk-dots i{width:8px;height:8px;border-radius:50%}
.cmyk-dots i:nth-child(1){background:var(--brand-cyan)} .cmyk-dots i:nth-child(2){background:var(--brand-magenta)}
.cmyk-dots i:nth-child(3){background:var(--brand-yellow)} .cmyk-dots i:nth-child(4){background:var(--brand-key)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  font-family:var(--font-sans);font-weight:var(--weight-semibold);font-size:var(--text-sm);
  padding:10px 18px;border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;
  transition:transform var(--dur) var(--ease-spring),background var(--dur) var(--ease-standard),box-shadow var(--dur) var(--ease-standard)}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--brand-primary);color:var(--text-on-brand)}
.btn-primary:hover{background:var(--brand-primary-hover);color:#fff}
.btn-key{background:var(--brand-ink);color:#fff}.btn-key:hover{background:var(--brand-ink-hover)}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:var(--danger-strong)}
.btn-ghost{background:transparent;border-color:var(--border-default);color:var(--text-body)}
.btn-ghost:hover{background:var(--surface-hover)}
/* icon trong nút = cỡ chữ (SVG không có width/height + global svg{max-width:100%} sẽ
   phình to trong inline-flex — vd nút Xóa thương hiệu "to đùng" trên desktop) */
.btn svg{width:1.1em;height:1.1em;flex:none}
.btn-lg{padding:14px 24px;font-size:var(--text-base);border-radius:var(--radius-lg)}

/* ---- cards ---- */
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-xs)}
.card-elevated{border-color:transparent;box-shadow:var(--shadow-md)}
.card-pad{padding:var(--space-6)}

/* ---- badges / tags ---- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-xs);font-weight:var(--weight-semibold);
  padding:4px 10px;border-radius:var(--radius-pill);line-height:1}
.badge-success{background:var(--success-surface);color:var(--success-strong)}
.badge-warning{background:var(--warning-surface);color:var(--warning-strong)}
.badge-danger{background:var(--danger-surface);color:var(--danger-strong)}
.badge-info{background:var(--info-surface);color:var(--info-strong)}
.badge-neutral{background:var(--ink-100);color:var(--text-muted)}

/* ---- helpers ---- */
.text-muted{color:var(--text-muted)}.text-subtle{color:var(--text-subtle)}.text-strong{color:var(--text-strong)}
.text-center{text-align:center}