/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */




  :root{
    --dk-ink:#0a1430;      /* darkest ground */
    --dk-navy:#0f1f52;     /* hero ground */
    --dk-panel:#16296b;    /* raised panel */
    --dk-blue:#2b53cc;     /* brand vivid blue */
    --dk-sky:#5aa0ff;      /* bright accent / glow */
    --dk-line:rgba(255,255,255,.14);
    --dk-line-soft:rgba(255,255,255,.08);
  }
  html { scroll-behavior: smooth; }
  body { margin: 0; text-wrap: pretty; background: var(--dk-ink); }
  a { color: var(--dk-blue); }
  a:hover { color: var(--dk-sky); }
  ::selection { background: rgba(90,160,255,.32); }
  /* headings */
  .dk-h { font-family:var(--font-heading); font-weight:700; letter-spacing:.005em; line-height:1.03; }
  .dk-kick { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; line-height:1; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--dk-sky); }
  .dk-kick::before { content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--dk-sky),transparent); display:inline-block; }
  /* CTA button */
  .dk-cta { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--dk-blue),var(--dk-sky)); color:#fff; border:0; padding:14px 28px; font-family:var(--font-body); font-weight:600; font-size:15px; letter-spacing:.01em; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px rgba(43,83,204,.4); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
  .dk-cta:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(43,83,204,.55); filter:brightness(1.06); color:#fff; }
  .dk-ghost { display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff; border:1px solid var(--dk-line); padding:14px 26px; font-family:var(--font-body); font-weight:600; font-size:15px; text-decoration:none; transition:background .16s ease, border-color .16s ease; }
  .dk-ghost:hover { background:rgba(255,255,255,.06); border-color:var(--dk-sky); color:#fff; }
  /* cards */
  .dk-card { position:relative; background:#fff; border:1px solid rgba(15,31,82,.12); padding:30px 26px; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; box-shadow:0 1px 2px rgba(10,20,48,.06); }
  .dk-card:hover { transform:translateY(-4px); box-shadow:0 22px 44px rgba(15,31,82,.16); border-color:var(--dk-blue); }
  .dk-ticon { display:grid; place-items:center; width:52px; height:52px; background:linear-gradient(135deg,var(--dk-blue),var(--dk-sky)); color:#fff; box-shadow:0 8px 20px rgba(43,83,204,.35); }
  .dk-navlink { color:rgba(255,255,255,.82); text-decoration:none; font-size:14.5px; font-weight:500; letter-spacing:.01em; transition:color .15s ease; }
  .dk-navlink:hover { color:#fff; }
  .dk-flink { color:rgba(255,255,255,.62); text-decoration:none; font-size:14px; line-height:1.5; transition:color .15s ease; }
  .dk-flink:hover { color:var(--dk-sky); }
  .dk-soc { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--dk-line); color:#fff; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
  .dk-soc:hover { background:var(--dk-blue); border-color:var(--dk-blue); color:#fff; }
  .dk-corner { color:rgba(255,255,255,.42) !important; }
  @keyframes dk-marq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
  @keyframes dk-fade { from{opacity:0} to{opacity:1} }
  @keyframes dk-pop { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
  @keyframes dk-aurora { 0%{transform:translate3d(-6%,-4%,0) scale(1)} 50%{transform:translate3d(6%,4%,0) scale(1.12)} 100%{transform:translate3d(-6%,-4%,0) scale(1)} }
  @keyframes dk-float { 0%{transform:translateY(0)} 50%{transform:translateY(-12px)} 100%{transform:translateY(0)} }
  @keyframes dk-float2 { 0%{transform:translateY(0)} 50%{transform:translateY(10px)} 100%{transform:translateY(0)} }
  @keyframes dk-draw { to{stroke-dashoffset:0} }
  @keyframes dk-rise { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
  @media (prefers-reduced-motion: reduce){ .dk-aurora,.dk-float,.dk-float2,.dk-line{ animation:none !important } }
  .dk-marq-track { display:flex; gap:64px; align-items:center; width:max-content; animation:dk-marq 28s linear infinite; }
  @media (prefers-reduced-motion: reduce){ .dk-marq-track{ animation:none } }
  @media (max-width: 860px){ .dk-nav-links { display:none !important; } .dk-util { display:none !important; } .dk-contact-grid { grid-template-columns:1fr !important; } }
  @media (max-width: 1024px){ .dk-hero-grid { grid-template-columns:1fr !important; gap:56px !important; } }
  .dk-mega-wrap:hover .dk-mega { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateX(-50%) translateY(0) !important; }
  .dk-mega-wrap:hover .dk-mega-caret { transform:rotate(180deg); }
  .dk-mega-caret { transition:transform .18s ease; }
  .dk-mega-ic { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(43,83,204,.08); color:var(--dk-blue); transition:background .15s ease, color .15s ease; }
  .dk-mega-item { transition:background .15s ease; }
  .dk-mega-item:hover { background:#f4f6fb; }
  .dk-mega-item:hover .dk-mega-ic { background:var(--dk-blue); color:#fff; }
  .dk-cert { transition:border-color .15s ease, background .15s ease; }
  .dk-cert:hover { border-color:var(--dk-sky) !important; background:rgba(90,160,255,.07) !important; }
  .dk-cert-ic { flex:0 0 auto; display:grid; place-items:center; color:var(--dk-sky); }
  .dk-badge { transition:transform .15s ease, box-shadow .15s ease; }
  .dk-badge:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(4,10,30,.4); }
  .dk-cert-grid .dk-badge { width:100%; box-sizing:border-box; }
  @media (max-width:560px){ .dk-cert-grid { grid-template-columns:repeat(2,1fr) !important; } }
  .dk-feat { transition:border-color .15s ease, background .15s ease, transform .15s ease; }
  .dk-feat:hover { border-color:var(--dk-sky) !important; background:rgba(90,160,255,.07) !important; transform:translateY(-3px); }
  .dk-feat-logo { transition:transform .15s ease, box-shadow .15s ease; }
  .dk-feat-logo:hover { transform:translateY(-2px); box-shadow:0 12px 26px rgba(4,10,30,.4); }
  @media (max-width:820px){ .dk-feat-grid { grid-template-columns:1fr !important; } }
  @media (max-width:860px){ .dk-foot-top { grid-template-columns:1fr !important; gap:36px !important; } .dk-foot-div { display:none !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:repeat(2,1fr) !important; } }
  .dk-contact-row { transition:border-color .15s ease, background .15s ease; }
  .dk-contact-row:hover { border-color:var(--dk-sky) !important; background:rgba(90,160,255,.06) !important; color:#fff; }
  .dk-util-ico { transition:color .15s ease; }
  .dk-util-ico:hover { color:#fff !important; }
  .dk-svc-cell { transition:background .15s ease; }
  .dk-svc-cell:hover { background:#f6f8fc !important; }
  .dk-more:hover .dk-more-ico { background:var(--dk-blue); border-color:var(--dk-blue) !important; color:#fff !important; }
  .dk-more-ico { transition:background .15s ease, border-color .15s ease, color .15s ease; }
  .dk-ind { transition:background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
  .dk-ind:hover { background:linear-gradient(165deg,var(--dk-navy),var(--dk-blue)) !important; border-color:var(--dk-blue) !important; transform:translateY(-4px); box-shadow:0 22px 44px rgba(15,31,82,.2); }
  .dk-ind:hover .dk-ind-t { color:#fff !important; }
  .dk-ind:hover .dk-ind-p { color:rgba(255,255,255,.75) !important; }
  .dk-ind-ico { transition:background .18s ease, color .18s ease; }
  .dk-ind:hover .dk-ind-ico { background:rgba(255,255,255,.14) !important; color:#fff !important; }
  .dk-ind-more { transition:color .18s ease, gap .18s ease; }
  .dk-ind:hover .dk-ind-more { color:#fff !important; }
  @media (max-width:900px){ .dk-svc-grid { grid-template-columns:repeat(2,1fr) !important; } .dk-ind-grid { grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .dk-svc-grid { grid-template-columns:1fr !important; } .dk-ind-grid { grid-template-columns:1fr !important; } }
  .dk-blog-feat img, .dk-blog-row img { transition:transform .4s ease; }
  .dk-blog-feat:hover img, .dk-blog-row:hover img { transform:scale(1.05); }
  .dk-blog-row { transition:border-color .15s ease, box-shadow .15s ease; }
  .dk-blog-row:hover { border-color:var(--dk-blue) !important; box-shadow:0 14px 34px rgba(15,31,82,.12); }
  @media (max-width:820px){ .dk-blog-grid { grid-template-columns:1fr !important; } }
  .dk-cs-card { transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
  .dk-cs-card:hover { border-color:var(--dk-sky) !important; transform:translateY(-4px); box-shadow:0 26px 56px rgba(4,10,30,.45); }
  .dk-cs-card:hover .dk-cs-arrow { background:var(--dk-blue); border-color:var(--dk-blue); }
  .dk-cs-arrow { transition:background .18s ease, border-color .18s ease, transform .18s ease; }
  @media (max-width:900px){ .dk-cs-cards { grid-template-columns:1fr !important; } .dk-impact { grid-template-columns:repeat(2,1fr) !important; } }
  .dk-arrow { transition:border-color .15s ease, background .15s ease, color .15s ease; }
  .dk-arrow:hover { border-color:var(--dk-blue) !important; background:var(--dk-blue) !important; color:#fff !important; }
  @media (max-width:1000px){ #recommendations .dk-rec { break-inside:avoid; } #recommendations > div > div[style*="column-count"]{ column-count:2 !important; } }
  @media (max-width:640px){ #recommendations > div > div[style*="column-count"]{ column-count:1 !important; } }
  /* ---- full responsive pass ---- */
  html, body { overflow-x:hidden; }
  @media (max-width:640px){
    [style*="padding:96px 32px"]{ padding-left:20px !important; padding-right:20px !important; }
    [style*="padding:88px 32px"]{ padding-left:20px !important; padding-right:20px !important; }
    [style*="padding:76px 32px"]{ padding-left:20px !important; padding-right:20px !important; }
    [style*="padding:68px 32px 0"]{ padding-left:20px !important; padding-right:20px !important; }
    [style*="padding:96px 32px 104px"]{ padding-top:60px !important; padding-bottom:64px !important; }
    .dk-util-inner, nav > div { padding-left:20px !important; padding-right:20px !important; }
  }
  @media (max-width:560px){
    footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:1fr 1fr !important; }
    [style*="grid-template-columns:1fr 1fr; gap:14px"]{ grid-template-columns:1fr !important; }
    [style*="grid-template-columns:1fr 1fr; gap:15px"]{ grid-template-columns:1fr !important; }
    .dk-float{ left:-6px !important; top:-12px !important; }
    .dk-float2{ right:-6px !important; bottom:-12px !important; }
  }
  @media (max-width:420px){
    footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:1fr !important; }
    .dk-cert-grid { grid-template-columns:1fr !important; }
  }


#__claude_design_branding{position:fixed;right:16px;bottom:16px;z-index:2147483646;display:flex;align-items:center;gap:7px;height:30px;padding:0 5px 0 10px;border-radius:999px;font-family:"Anthropic Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:12.5px;font-weight:400;line-height:1;letter-spacing:normal;text-transform:none;color:#141413;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:0 0 0 .5px rgba(31,30,29,.14),0 2px 10px rgba(0,0,0,.09)}
#__claude_design_branding *{box-sizing:border-box;margin:0}
#__claude_design_branding a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
#__claude_design_branding a:hover span{text-decoration:underline}
#__claude_design_branding svg{flex:none}
#__claude_design_branding a svg{color:#D97757}
#__claude_design_branding button{width:20px;height:20px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:currentColor;opacity:.55;border:0;background:none;cursor:pointer;flex:none;font:inherit;transition:opacity .14s}
#__claude_design_branding button:hover{opacity:1;background:rgba(127,127,127,.22)}
@media print{#__claude_design_branding{display:none}}

/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */




  :root{
    --dk-ink:#0a1430; --dk-navy:#0f1f52; --dk-panel:#16296b; --dk-blue:#2b53cc; --dk-sky:#5aa0ff;
    --dk-line:rgba(255,255,255,.14); --dk-line-soft:rgba(255,255,255,.08);
  }
  html { scroll-behavior:smooth; } html, body { overflow-x:hidden; }
  body { margin:0; text-wrap:pretty; background:var(--dk-ink); font-family:var(--font-body); color:#fff; }
  a { color:var(--dk-blue); } a:hover { color:var(--dk-sky); }
  ::selection { background:rgba(90,160,255,.32); }
  .dk-h { font-family:var(--font-heading); font-weight:700; letter-spacing:.005em; line-height:1.03; }
  .dk-kick { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; line-height:1; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--dk-sky); }
  .dk-kick::before { content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--dk-sky),transparent); display:inline-block; }
  .dk-cta { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--dk-blue),var(--dk-sky)); color:#fff; border:0; padding:14px 28px; font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px rgba(43,83,204,.4); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
  .dk-cta:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(43,83,204,.55); filter:brightness(1.06); color:#fff; }
  .dk-ghost { display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff; border:1px solid var(--dk-line); padding:14px 26px; font-family:var(--font-body); font-weight:600; font-size:15px; text-decoration:none; transition:background .16s ease, border-color .16s ease; }
  .dk-ghost:hover { background:rgba(255,255,255,.06); border-color:var(--dk-sky); color:#fff; }
  .dk-navlink { color:rgba(255,255,255,.82); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .15s ease; }
  .dk-navlink:hover { color:#fff; }
  .dk-navlink.active { color:#fff; }
  .dk-flink { color:rgba(255,255,255,.62); text-decoration:none; font-size:14px; line-height:1.5; transition:color .15s ease; }
  .dk-flink:hover { color:var(--dk-sky); }
  .dk-soc { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--dk-line); color:#fff; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
  .dk-soc:hover { background:var(--dk-blue); border-color:var(--dk-blue); color:#fff; }
  .dk-corner { color:rgba(255,255,255,.42) !important; }
  .dk-util-ico { transition:color .15s ease; color:rgba(255,255,255,.7); } .dk-util-ico:hover { color:#fff !important; }
  .dk-chip { transition:border-color .15s ease, background .15s ease, transform .15s ease; }
  .dk-chip:hover { border-color:var(--dk-sky) !important; background:rgba(90,160,255,.06) !important; transform:translateY(-2px); }
  .dk-tl-item:hover .dk-tl-dot { background:var(--dk-sky); box-shadow:0 0 0 6px rgba(90,160,255,.18); }
  .dk-badge { transition:transform .15s ease, box-shadow .15s ease; }
  .dk-badge:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(4,10,30,.4); }
  .dk-mega-wrap:hover .dk-mega { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateX(-50%) translateY(0) !important; }
  .dk-mega-wrap:hover .dk-mega-caret { transform:rotate(180deg); }
  .dk-mega-caret { transition:transform .18s ease; }
  .dk-mega-ic { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(43,83,204,.08); color:var(--dk-blue); transition:background .15s ease, color .15s ease; }
  .dk-mega-item { transition:background .15s ease; }
  .dk-mega-item:hover { background:#f4f6fb; }
  .dk-mega-item:hover .dk-mega-ic { background:var(--dk-blue); color:#fff; }
  .dk-arrow { transition:border-color .15s ease, background .15s ease, color .15s ease; }
  .dk-arrow:hover { border-color:var(--dk-blue) !important; background:var(--dk-blue) !important; color:#fff !important; }
  @media (max-width:980px){ .dk-mega { width:min(94vw,560px) !important; } }
  @media (max-width:640px){ #recommendations [style*="repeat(auto-fit,minmax(300px,1fr))"]{ grid-template-columns:1fr !important; } }
  @media (max-width:1080px){ .dk-skill-grid{ grid-template-columns:repeat(3,1fr) !important; } }
  @media (max-width:720px){ .dk-skill-grid{ grid-template-columns:repeat(2,1fr) !important; } .dk-tl-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:480px){ .dk-skill-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:900px){ .dk-svc3{ grid-template-columns:repeat(2,1fr) !important; } .dk-svc4{ grid-template-columns:repeat(2,1fr) !important; } .dk-cap-grid{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .dk-svc3{ grid-template-columns:1fr !important; } .dk-svc4{ grid-template-columns:1fr !important; } .dk-two{ grid-template-columns:1fr !important; } .dk-cap-grid{ grid-template-columns:1fr !important; } }
  .dk-inc{ transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
  .dk-inc:hover{ border-color:var(--dk-blue) !important; box-shadow:0 14px 34px rgba(15,31,82,.12); transform:translateY(-3px); }
  .dk-svc-card{ transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
  .dk-svc-card:hover{ border-color:var(--dk-blue) !important; box-shadow:0 18px 40px rgba(15,31,82,.14); transform:translateY(-4px); }
  .dk-svc-card:hover .dk-more-ico{ background:var(--dk-blue); border-color:var(--dk-blue) !important; color:#fff !important; }
  @media (max-width:900px){ .dk-svcs-grid{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .dk-svcs-grid{ grid-template-columns:1fr !important; } }
  @keyframes dk-fade { from{opacity:0} to{opacity:1} }
  @keyframes dk-pop { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
  @media (max-width:860px){ .dk-nav-links { display:none !important; } .dk-util { display:none !important; } }
  @media (max-width:1000px){ .dk-about-hero { grid-template-columns:1fr !important; gap:44px !important; } }
  @media (max-width:820px){ .dk-two { grid-template-columns:1fr !important; } .dk-foot-top { grid-template-columns:1fr !important; gap:36px !important; } .dk-foot-div { display:none !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:900px){ .dk-skill-grid { grid-template-columns:repeat(2,1fr) !important; } .dk-press-grid { grid-template-columns:1fr !important; } .dk-cert-grid { grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .dk-skill-grid { grid-template-columns:1fr !important; } .dk-hl-grid { grid-template-columns:1fr 1fr !important; } [style*="padding:96px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:88px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:68px 32px 0"]{ padding-left:20px !important; padding-right:20px !important; } }
  @media (max-width:420px){ .dk-cert-grid { grid-template-columns:1fr !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:1fr !important; } }


/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */




  :root{
    --dk-ink:#0a1430; --dk-navy:#0f1f52; --dk-panel:#16296b; --dk-blue:#2b53cc; --dk-sky:#5aa0ff;
    --dk-line:rgba(255,255,255,.14); --dk-line-soft:rgba(255,255,255,.08);
  }
  html { scroll-behavior:smooth; } html, body { overflow-x:hidden; }
  body { margin:0; text-wrap:pretty; background:var(--dk-ink); font-family:var(--font-body); color:#fff; }
  a { color:var(--dk-blue); } a:hover { color:var(--dk-sky); }
  ::selection { background:rgba(90,160,255,.32); }
  .dk-h { font-family:var(--font-heading); font-weight:700; letter-spacing:.005em; line-height:1.03; }
  .dk-kick { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; line-height:1; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--dk-sky); }
  .dk-kick::before { content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--dk-sky),transparent); display:inline-block; }
  .dk-cta { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--dk-blue),var(--dk-sky)); color:#fff; border:0; padding:14px 28px; font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px rgba(43,83,204,.4); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
  .dk-cta:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(43,83,204,.55); filter:brightness(1.06); color:#fff; }
  .dk-ghost { display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff; border:1px solid var(--dk-line); padding:14px 26px; font-family:var(--font-body); font-weight:600; font-size:15px; text-decoration:none; transition:background .16s ease, border-color .16s ease; }
  .dk-ghost:hover { background:rgba(255,255,255,.06); border-color:var(--dk-sky); color:#fff; }
  .dk-navlink { color:rgba(255,255,255,.82); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .15s ease; }
  .dk-navlink:hover { color:#fff; }
  .dk-navlink.active { color:#fff; }
  .dk-flink { color:rgba(255,255,255,.62); text-decoration:none; font-size:14px; line-height:1.5; transition:color .15s ease; }
  .dk-flink:hover { color:var(--dk-sky); }
  .dk-soc { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--dk-line); color:#fff; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
  .dk-soc:hover { background:var(--dk-blue); border-color:var(--dk-blue); color:#fff; }
  .dk-corner { color:rgba(255,255,255,.42) !important; }
  .dk-util-ico { transition:color .15s ease; color:rgba(255,255,255,.7); } .dk-util-ico:hover { color:#fff !important; }
  .dk-chip { transition:border-color .15s ease, background .15s ease, transform .15s ease; }
  .dk-chip:hover { border-color:var(--dk-sky) !important; background:rgba(90,160,255,.06) !important; transform:translateY(-2px); }
  .dk-tl-item:hover .dk-tl-dot { background:var(--dk-sky); box-shadow:0 0 0 6px rgba(90,160,255,.18); }
  .dk-badge { transition:transform .15s ease, box-shadow .15s ease; }
  .dk-badge:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(4,10,30,.4); }
  .dk-mega-wrap:hover .dk-mega { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateX(-50%) translateY(0) !important; }
  .dk-mega-wrap:hover .dk-mega-caret { transform:rotate(180deg); }
  .dk-mega-caret { transition:transform .18s ease; }
  .dk-mega-ic { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(43,83,204,.08); color:var(--dk-blue); transition:background .15s ease, color .15s ease; }
  .dk-mega-item { transition:background .15s ease; }
  .dk-mega-item:hover { background:#f4f6fb; }
  .dk-mega-item:hover .dk-mega-ic { background:var(--dk-blue); color:#fff; }
  .dk-arrow { transition:border-color .15s ease, background .15s ease, color .15s ease; }
  .dk-arrow:hover { border-color:var(--dk-blue) !important; background:var(--dk-blue) !important; color:#fff !important; }
  @media (max-width:980px){ .dk-mega { width:min(94vw,560px) !important; } }
  @media (max-width:640px){ #recommendations [style*="repeat(auto-fit,minmax(300px,1fr))"]{ grid-template-columns:1fr !important; } }
  @media (max-width:1080px){ .dk-skill-grid{ grid-template-columns:repeat(3,1fr) !important; } }
  @media (max-width:720px){ .dk-skill-grid{ grid-template-columns:repeat(2,1fr) !important; } .dk-tl-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:480px){ .dk-skill-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:900px){ .dk-svc3{ grid-template-columns:repeat(2,1fr) !important; } .dk-svc4{ grid-template-columns:repeat(2,1fr) !important; } .dk-cap-grid{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .dk-svc3{ grid-template-columns:1fr !important; } .dk-svc4{ grid-template-columns:1fr !important; } .dk-two{ grid-template-columns:1fr !important; } .dk-cap-grid{ grid-template-columns:1fr !important; } }
  .dk-inc{ transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
  .dk-inc:hover{ border-color:var(--dk-blue) !important; box-shadow:0 14px 34px rgba(15,31,82,.12); transform:translateY(-3px); }
  @keyframes dk-fade { from{opacity:0} to{opacity:1} }
  @keyframes dk-pop { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
  @media (max-width:860px){ .dk-nav-links { display:none !important; } .dk-util { display:none !important; } }
  @media (max-width:1000px){ .dk-about-hero { grid-template-columns:1fr !important; gap:44px !important; } }
  @media (max-width:820px){ .dk-two { grid-template-columns:1fr !important; } .dk-foot-top { grid-template-columns:1fr !important; gap:36px !important; } .dk-foot-div { display:none !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:900px){ .dk-skill-grid { grid-template-columns:repeat(2,1fr) !important; } .dk-press-grid { grid-template-columns:1fr !important; } .dk-cert-grid { grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .dk-skill-grid { grid-template-columns:1fr !important; } .dk-hl-grid { grid-template-columns:1fr 1fr !important; } [style*="padding:96px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:88px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:68px 32px 0"]{ padding-left:20px !important; padding-right:20px !important; } }
  @media (max-width:420px){ .dk-cert-grid { grid-template-columns:1fr !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:1fr !important; } }


/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */




  :root{
    --dk-ink:#0a1430; --dk-navy:#0f1f52; --dk-panel:#16296b; --dk-blue:#2b53cc; --dk-sky:#5aa0ff;
    --dk-line:rgba(255,255,255,.14); --dk-line-soft:rgba(255,255,255,.08);
  }
  html { scroll-behavior:smooth; } html, body { overflow-x:hidden; }
  body { margin:0; text-wrap:pretty; background:var(--dk-ink); font-family:var(--font-body); color:#fff; }
  a { color:var(--dk-blue); } a:hover { color:var(--dk-sky); }
  ::selection { background:rgba(90,160,255,.32); }
  .dk-h { font-family:var(--font-heading); font-weight:700; letter-spacing:.005em; line-height:1.03; }
  .dk-kick { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; line-height:1; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--dk-sky); }
  .dk-kick::before { content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--dk-sky),transparent); display:inline-block; }
  .dk-cta { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--dk-blue),var(--dk-sky)); color:#fff; border:0; padding:14px 28px; font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px rgba(43,83,204,.4); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
  .dk-cta:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(43,83,204,.55); filter:brightness(1.06); color:#fff; }
  .dk-ghost { display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff; border:1px solid var(--dk-line); padding:14px 26px; font-family:var(--font-body); font-weight:600; font-size:15px; text-decoration:none; transition:background .16s ease, border-color .16s ease; }
  .dk-ghost:hover { background:rgba(255,255,255,.06); border-color:var(--dk-sky); color:#fff; }
  .dk-navlink { color:rgba(255,255,255,.82); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .15s ease; }
  .dk-navlink:hover { color:#fff; }
  .dk-navlink.active { color:#fff; }
  .dk-flink { color:rgba(255,255,255,.62); text-decoration:none; font-size:14px; line-height:1.5; transition:color .15s ease; }
  .dk-flink:hover { color:var(--dk-sky); }
  .dk-soc { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--dk-line); color:#fff; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
  .dk-soc:hover { background:var(--dk-blue); border-color:var(--dk-blue); color:#fff; }
  .dk-corner { color:rgba(255,255,255,.42) !important; }
  .dk-util-ico { transition:color .15s ease; color:rgba(255,255,255,.7); } .dk-util-ico:hover { color:#fff !important; }
  .dk-chip { transition:border-color .15s ease, background .15s ease, transform .15s ease; }
  .dk-chip:hover { border-color:var(--dk-sky) !important; background:rgba(90,160,255,.06) !important; transform:translateY(-2px); }
  .dk-tl-item:hover .dk-tl-dot { background:var(--dk-sky); box-shadow:0 0 0 6px rgba(90,160,255,.18); }
  .dk-badge { transition:transform .15s ease, box-shadow .15s ease; }
  .dk-badge:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(4,10,30,.4); }
  .dk-mega-wrap:hover .dk-mega { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateX(-50%) translateY(0) !important; }
  .dk-mega-wrap:hover .dk-mega-caret { transform:rotate(180deg); }
  .dk-mega-caret { transition:transform .18s ease; }
  .dk-mega-ic { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(43,83,204,.08); color:var(--dk-blue); transition:background .15s ease, color .15s ease; }
  .dk-mega-item { transition:background .15s ease; }
  .dk-mega-item:hover { background:#f4f6fb; }
  .dk-mega-item:hover .dk-mega-ic { background:var(--dk-blue); color:#fff; }
  .dk-arrow { transition:border-color .15s ease, background .15s ease, color .15s ease; }
  .dk-arrow:hover { border-color:var(--dk-blue) !important; background:var(--dk-blue) !important; color:#fff !important; }
  @media (max-width:980px){ .dk-mega { width:min(94vw,560px) !important; } }
  @media (max-width:640px){ #recommendations [style*="repeat(auto-fit,minmax(300px,1fr))"]{ grid-template-columns:1fr !important; } }
  @media (max-width:1080px){ .dk-skill-grid{ grid-template-columns:repeat(3,1fr) !important; } }
  @media (max-width:720px){ .dk-skill-grid{ grid-template-columns:repeat(2,1fr) !important; } .dk-tl-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:480px){ .dk-skill-grid{ grid-template-columns:1fr !important; } }
  @keyframes dk-fade { from{opacity:0} to{opacity:1} }
  @keyframes dk-pop { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
  @media (max-width:860px){ .dk-nav-links { display:none !important; } .dk-util { display:none !important; } }
  @media (max-width:1000px){ .dk-about-hero { grid-template-columns:1fr !important; gap:44px !important; } }
  @media (max-width:820px){ .dk-two { grid-template-columns:1fr !important; } .dk-foot-top { grid-template-columns:1fr !important; gap:36px !important; } .dk-foot-div { display:none !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:900px){ .dk-skill-grid { grid-template-columns:repeat(2,1fr) !important; } .dk-press-grid { grid-template-columns:1fr !important; } .dk-cert-grid { grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .dk-skill-grid { grid-template-columns:1fr !important; } .dk-hl-grid { grid-template-columns:1fr 1fr !important; } [style*="padding:96px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:88px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:68px 32px 0"]{ padding-left:20px !important; padding-right:20px !important; } }
  @media (max-width:420px){ .dk-cert-grid { grid-template-columns:1fr !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:1fr !important; } }


/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */




  :root{
    --dk-ink:#0a1430; --dk-navy:#0f1f52; --dk-panel:#16296b; --dk-blue:#2b53cc; --dk-sky:#5aa0ff;
    --dk-line:rgba(255,255,255,.14); --dk-line-soft:rgba(255,255,255,.08);
  }
  html { scroll-behavior:smooth; } html, body { overflow-x:hidden; }
  body { margin:0; text-wrap:pretty; background:var(--dk-ink); font-family:var(--font-body); color:#fff; }
  a { color:var(--dk-blue); } a:hover { color:var(--dk-sky); }
  ::selection { background:rgba(90,160,255,.32); }
  .dk-h { font-family:var(--font-heading); font-weight:700; letter-spacing:.005em; line-height:1.03; }
  .dk-kick { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; line-height:1; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--dk-sky); }
  .dk-kick::before { content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--dk-sky),transparent); display:inline-block; }
  .dk-cta { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--dk-blue),var(--dk-sky)); color:#fff; border:0; padding:14px 28px; font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px rgba(43,83,204,.4); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
  .dk-cta:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(43,83,204,.55); filter:brightness(1.06); color:#fff; }
  .dk-ghost { display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff; border:1px solid var(--dk-line); padding:14px 26px; font-family:var(--font-body); font-weight:600; font-size:15px; text-decoration:none; transition:background .16s ease, border-color .16s ease; }
  .dk-ghost:hover { background:rgba(255,255,255,.06); border-color:var(--dk-sky); color:#fff; }
  .dk-navlink { color:rgba(255,255,255,.82); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .15s ease; }
  .dk-navlink:hover { color:#fff; }
  .dk-navlink.active { color:#fff; }
  .dk-flink { color:rgba(255,255,255,.62); text-decoration:none; font-size:14px; line-height:1.5; transition:color .15s ease; }
  .dk-flink:hover { color:var(--dk-sky); }
  .dk-soc { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--dk-line); color:#fff; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
  .dk-soc:hover { background:var(--dk-blue); border-color:var(--dk-blue); color:#fff; }
  .dk-corner { color:rgba(255,255,255,.42) !important; }
  .dk-util-ico { transition:color .15s ease; color:rgba(255,255,255,.7); } .dk-util-ico:hover { color:#fff !important; }
  .dk-chip { transition:border-color .15s ease, background .15s ease, transform .15s ease; }
  .dk-chip:hover { border-color:var(--dk-sky) !important; background:rgba(90,160,255,.06) !important; transform:translateY(-2px); }
  .dk-tl-item:hover .dk-tl-dot { background:var(--dk-sky); box-shadow:0 0 0 6px rgba(90,160,255,.18); }
  .dk-badge { transition:transform .15s ease, box-shadow .15s ease; }
  .dk-badge:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(4,10,30,.4); }
  .dk-mega-wrap:hover .dk-mega { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateX(-50%) translateY(0) !important; }
  .dk-mega-wrap:hover .dk-mega-caret { transform:rotate(180deg); }
  .dk-mega-caret { transition:transform .18s ease; }
  .dk-mega-ic { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(43,83,204,.08); color:var(--dk-blue); transition:background .15s ease, color .15s ease; }
  .dk-mega-item { transition:background .15s ease; }
  .dk-mega-item:hover { background:#f4f6fb; }
  .dk-mega-item:hover .dk-mega-ic { background:var(--dk-blue); color:#fff; }
  .dk-arrow { transition:border-color .15s ease, background .15s ease, color .15s ease; }
  .dk-arrow:hover { border-color:var(--dk-blue) !important; background:var(--dk-blue) !important; color:#fff !important; }
  @media (max-width:980px){ .dk-mega { width:min(94vw,560px) !important; } }
  @media (max-width:640px){ #recommendations [style*="repeat(auto-fit,minmax(300px,1fr))"]{ grid-template-columns:1fr !important; } }
  @media (max-width:1080px){ .dk-skill-grid{ grid-template-columns:repeat(3,1fr) !important; } }
  @media (max-width:720px){ .dk-skill-grid{ grid-template-columns:repeat(2,1fr) !important; } .dk-tl-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:480px){ .dk-skill-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:900px){ .dk-post-grid{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:560px){ .dk-post-grid{ grid-template-columns:1fr !important; } }
  .dk-post{ transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
  .dk-post:hover{ border-color:var(--dk-blue) !important; box-shadow:0 14px 34px rgba(15,31,82,.12); transform:translateY(-3px); }
  .dk-filterbar select option{ color:#0a1430; background:#fff; }
  .dk-filterbar select{ appearance:none; -webkit-appearance:none; }
  @keyframes dk-fade { from{opacity:0} to{opacity:1} }
  @keyframes dk-pop { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
  @media (max-width:860px){ .dk-nav-links { display:none !important; } .dk-util { display:none !important; } }
  @media (max-width:1000px){ .dk-about-hero { grid-template-columns:1fr !important; gap:44px !important; } }
  @media (max-width:820px){ .dk-two { grid-template-columns:1fr !important; } .dk-foot-top { grid-template-columns:1fr !important; gap:36px !important; } .dk-foot-div { display:none !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:900px){ .dk-skill-grid { grid-template-columns:repeat(2,1fr) !important; } .dk-press-grid { grid-template-columns:1fr !important; } .dk-cert-grid { grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .dk-skill-grid { grid-template-columns:1fr !important; } .dk-hl-grid { grid-template-columns:1fr 1fr !important; } [style*="padding:96px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:88px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:68px 32px 0"]{ padding-left:20px !important; padding-right:20px !important; } }
  @media (max-width:420px){ .dk-cert-grid { grid-template-columns:1fr !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:1fr !important; } }


/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */




  :root{
    --dk-ink:#0a1430; --dk-navy:#0f1f52; --dk-panel:#16296b; --dk-blue:#2b53cc; --dk-sky:#5aa0ff;
    --dk-line:rgba(255,255,255,.14); --dk-line-soft:rgba(255,255,255,.08);
  }
  html { scroll-behavior:smooth; } html, body { overflow-x:hidden; }
  body { margin:0; text-wrap:pretty; background:var(--dk-ink); font-family:var(--font-body); color:#fff; }
  a { color:var(--dk-blue); } a:hover { color:var(--dk-sky); }
  ::selection { background:rgba(90,160,255,.32); }
  .dk-h { font-family:var(--font-heading); font-weight:700; letter-spacing:.005em; line-height:1.03; }
  .dk-kick { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; line-height:1; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--dk-sky); }
  .dk-kick::before { content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--dk-sky),transparent); display:inline-block; }
  .dk-cta { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--dk-blue),var(--dk-sky)); color:#fff; border:0; padding:14px 28px; font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px rgba(43,83,204,.4); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
  .dk-cta:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(43,83,204,.55); filter:brightness(1.06); color:#fff; }
  .dk-ghost { display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff; border:1px solid var(--dk-line); padding:14px 26px; font-family:var(--font-body); font-weight:600; font-size:15px; text-decoration:none; transition:background .16s ease, border-color .16s ease; }
  .dk-ghost:hover { background:rgba(255,255,255,.06); border-color:var(--dk-sky); color:#fff; }
  .dk-navlink { color:rgba(255,255,255,.82); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .15s ease; }
  .dk-navlink:hover { color:#fff; }
  .dk-navlink.active { color:#fff; }
  .dk-flink { color:rgba(255,255,255,.62); text-decoration:none; font-size:14px; line-height:1.5; transition:color .15s ease; }
  .dk-flink:hover { color:var(--dk-sky); }
  .dk-soc { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--dk-line); color:#fff; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
  .dk-soc:hover { background:var(--dk-blue); border-color:var(--dk-blue); color:#fff; }
  .dk-corner { color:rgba(255,255,255,.42) !important; }
  .dk-util-ico { transition:color .15s ease; color:rgba(255,255,255,.7); } .dk-util-ico:hover { color:#fff !important; }
  .dk-chip { transition:border-color .15s ease, background .15s ease, transform .15s ease; }
  .dk-chip:hover { border-color:var(--dk-sky) !important; background:rgba(90,160,255,.06) !important; transform:translateY(-2px); }
  .dk-tl-item:hover .dk-tl-dot { background:var(--dk-sky); box-shadow:0 0 0 6px rgba(90,160,255,.18); }
  .dk-badge { transition:transform .15s ease, box-shadow .15s ease; }
  .dk-badge:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(4,10,30,.4); }
  .dk-mega-wrap:hover .dk-mega { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateX(-50%) translateY(0) !important; }
  .dk-mega-wrap:hover .dk-mega-caret { transform:rotate(180deg); }
  .dk-mega-caret { transition:transform .18s ease; }
  .dk-mega-ic { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(43,83,204,.08); color:var(--dk-blue); transition:background .15s ease, color .15s ease; }
  .dk-mega-item { transition:background .15s ease; }
  .dk-mega-item:hover { background:#f4f6fb; }
  .dk-mega-item:hover .dk-mega-ic { background:var(--dk-blue); color:#fff; }
  .dk-arrow { transition:border-color .15s ease, background .15s ease, color .15s ease; }
  .dk-arrow:hover { border-color:var(--dk-blue) !important; background:var(--dk-blue) !important; color:#fff !important; }
  @media (max-width:980px){ .dk-mega { width:min(94vw,560px) !important; } }
  @media (max-width:640px){ #recommendations [style*="repeat(auto-fit,minmax(300px,1fr))"]{ grid-template-columns:1fr !important; } }
  @media (max-width:1080px){ .dk-skill-grid{ grid-template-columns:repeat(3,1fr) !important; } }
  @media (max-width:720px){ .dk-skill-grid{ grid-template-columns:repeat(2,1fr) !important; } .dk-tl-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:480px){ .dk-skill-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:820px){ .dk-rel-grid{ grid-template-columns:1fr !important; } }
  .dk-post{ transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
  .dk-post:hover{ border-color:var(--dk-blue) !important; box-shadow:0 14px 34px rgba(15,31,82,.12); transform:translateY(-3px); }
  .dk-lead::first-letter{ font-family:var(--font-heading); font-weight:700; font-size:3.4em; line-height:.8; float:left; margin:6px 12px 0 0; color:var(--dk-blue); }
  @media (max-width:760px){ .dk-faq-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:640px){ .dk-skill-cards{ grid-template-columns:1fr !important; } .dk-rel-grid{ grid-template-columns:1fr !important; } }
  .dk-post{ transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
  .dk-post:hover{ border-color:var(--dk-blue) !important; box-shadow:0 14px 34px rgba(15,31,82,.12); transform:translateY(-3px); }
  @keyframes dk-fade { from{opacity:0} to{opacity:1} }
  @keyframes dk-pop { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
  @media (max-width:860px){ .dk-nav-links { display:none !important; } .dk-util { display:none !important; } }
  @media (max-width:1000px){ .dk-about-hero { grid-template-columns:1fr !important; gap:44px !important; } }
  @media (max-width:820px){ .dk-two { grid-template-columns:1fr !important; } .dk-foot-top { grid-template-columns:1fr !important; gap:36px !important; } .dk-foot-div { display:none !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:900px){ .dk-skill-grid { grid-template-columns:repeat(2,1fr) !important; } .dk-press-grid { grid-template-columns:1fr !important; } .dk-cert-grid { grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .dk-skill-grid { grid-template-columns:1fr !important; } .dk-hl-grid { grid-template-columns:1fr 1fr !important; } [style*="padding:96px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:88px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:68px 32px 0"]{ padding-left:20px !important; padding-right:20px !important; } }
  @media (max-width:420px){ .dk-cert-grid { grid-template-columns:1fr !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:1fr !important; } }


/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */




  :root{
    --dk-ink:#0a1430; --dk-navy:#0f1f52; --dk-panel:#16296b; --dk-blue:#2b53cc; --dk-sky:#5aa0ff;
    --dk-line:rgba(255,255,255,.14); --dk-line-soft:rgba(255,255,255,.08);
  }
  html { scroll-behavior:smooth; } html, body { overflow-x:hidden; }
  body { margin:0; text-wrap:pretty; background:var(--dk-ink); font-family:var(--font-body); color:#fff; }
  a { color:var(--dk-blue); } a:hover { color:var(--dk-sky); }
  ::selection { background:rgba(90,160,255,.32); }
  .dk-h { font-family:var(--font-heading); font-weight:700; letter-spacing:.005em; line-height:1.03; }
  .dk-kick { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; line-height:1; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--dk-sky); }
  .dk-kick::before { content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--dk-sky),transparent); display:inline-block; }
  .dk-cta { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--dk-blue),var(--dk-sky)); color:#fff; border:0; padding:14px 28px; font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px rgba(43,83,204,.4); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
  .dk-cta:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(43,83,204,.55); filter:brightness(1.06); color:#fff; }
  .dk-ghost { display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff; border:1px solid var(--dk-line); padding:14px 26px; font-family:var(--font-body); font-weight:600; font-size:15px; text-decoration:none; transition:background .16s ease, border-color .16s ease; }
  .dk-ghost:hover { background:rgba(255,255,255,.06); border-color:var(--dk-sky); color:#fff; }
  .dk-navlink { color:rgba(255,255,255,.82); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .15s ease; }
  .dk-navlink:hover { color:#fff; }
  .dk-navlink.active { color:#fff; }
  .dk-flink { color:rgba(255,255,255,.62); text-decoration:none; font-size:14px; line-height:1.5; transition:color .15s ease; }
  .dk-flink:hover { color:var(--dk-sky); }
  .dk-soc { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--dk-line); color:#fff; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
  .dk-soc:hover { background:var(--dk-blue); border-color:var(--dk-blue); color:#fff; }
  .dk-corner { color:rgba(255,255,255,.42) !important; }
  .dk-util-ico { transition:color .15s ease; color:rgba(255,255,255,.7); } .dk-util-ico:hover { color:#fff !important; }
  .dk-chip { transition:border-color .15s ease, background .15s ease, transform .15s ease; }
  .dk-chip:hover { border-color:var(--dk-sky) !important; background:rgba(90,160,255,.06) !important; transform:translateY(-2px); }
  .dk-tl-item:hover .dk-tl-dot { background:var(--dk-sky); box-shadow:0 0 0 6px rgba(90,160,255,.18); }
  .dk-badge { transition:transform .15s ease, box-shadow .15s ease; }
  .dk-badge:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(4,10,30,.4); }
  .dk-mega-wrap:hover .dk-mega { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateX(-50%) translateY(0) !important; }
  .dk-mega-wrap:hover .dk-mega-caret { transform:rotate(180deg); }
  .dk-mega-caret { transition:transform .18s ease; }
  .dk-mega-ic { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(43,83,204,.08); color:var(--dk-blue); transition:background .15s ease, color .15s ease; }
  .dk-mega-item { transition:background .15s ease; }
  .dk-mega-item:hover { background:#f4f6fb; }
  .dk-mega-item:hover .dk-mega-ic { background:var(--dk-blue); color:#fff; }
  .dk-arrow { transition:border-color .15s ease, background .15s ease, color .15s ease; }
  .dk-arrow:hover { border-color:var(--dk-blue) !important; background:var(--dk-blue) !important; color:#fff !important; }
  @media (max-width:980px){ .dk-mega { width:min(94vw,560px) !important; } }
  @media (max-width:640px){ #recommendations [style*="repeat(auto-fit,minmax(300px,1fr))"]{ grid-template-columns:1fr !important; } }
  @media (max-width:1080px){ .dk-skill-grid{ grid-template-columns:repeat(3,1fr) !important; } }
  @media (max-width:720px){ .dk-skill-grid{ grid-template-columns:repeat(2,1fr) !important; } .dk-tl-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:480px){ .dk-skill-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:960px){ .dk-eng-grid{ grid-template-columns:repeat(2,1fr) !important; } .dk-faq-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:560px){ .dk-eng-grid{ grid-template-columns:1fr !important; } }
  @keyframes dk-fade { from{opacity:0} to{opacity:1} }
  @keyframes dk-pop { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
  @media (max-width:860px){ .dk-nav-links { display:none !important; } .dk-util { display:none !important; } }
  @media (max-width:1000px){ .dk-about-hero { grid-template-columns:1fr !important; gap:44px !important; } }
  @media (max-width:820px){ .dk-two { grid-template-columns:1fr !important; } .dk-foot-top { grid-template-columns:1fr !important; gap:36px !important; } .dk-foot-div { display:none !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:900px){ .dk-skill-grid { grid-template-columns:repeat(2,1fr) !important; } .dk-press-grid { grid-template-columns:1fr !important; } .dk-cert-grid { grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .dk-skill-grid { grid-template-columns:1fr !important; } .dk-hl-grid { grid-template-columns:1fr 1fr !important; } [style*="padding:96px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:88px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:68px 32px 0"]{ padding-left:20px !important; padding-right:20px !important; } }
  @media (max-width:420px){ .dk-cert-grid { grid-template-columns:1fr !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:1fr !important; } }


/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */




  :root{
    --dk-ink:#0a1430; --dk-navy:#0f1f52; --dk-panel:#16296b; --dk-blue:#2b53cc; --dk-sky:#5aa0ff;
    --dk-line:rgba(255,255,255,.14); --dk-line-soft:rgba(255,255,255,.08);
  }
  html { scroll-behavior:smooth; } html, body { overflow-x:hidden; }
  body { margin:0; text-wrap:pretty; background:var(--dk-ink); font-family:var(--font-body); color:#fff; }
  a { color:var(--dk-blue); } a:hover { color:var(--dk-sky); }
  ::selection { background:rgba(90,160,255,.32); }
  .dk-h { font-family:var(--font-heading); font-weight:700; letter-spacing:.005em; line-height:1.03; }
  .dk-kick { display:inline-flex; align-items:center; gap:10px; font-size:12.5px; line-height:1; letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--dk-sky); }
  .dk-kick::before { content:""; width:26px; height:2px; background:linear-gradient(90deg,var(--dk-sky),transparent); display:inline-block; }
  .dk-cta { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--dk-blue),var(--dk-sky)); color:#fff; border:0; padding:14px 28px; font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; box-shadow:0 10px 30px rgba(43,83,204,.4); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; }
  .dk-cta:hover { transform:translateY(-2px); box-shadow:0 16px 40px rgba(43,83,204,.55); filter:brightness(1.06); color:#fff; }
  .dk-ghost { display:inline-flex; align-items:center; gap:10px; background:transparent; color:#fff; border:1px solid var(--dk-line); padding:14px 26px; font-family:var(--font-body); font-weight:600; font-size:15px; text-decoration:none; transition:background .16s ease, border-color .16s ease; }
  .dk-ghost:hover { background:rgba(255,255,255,.06); border-color:var(--dk-sky); color:#fff; }
  .dk-navlink { color:rgba(255,255,255,.82); text-decoration:none; font-size:14.5px; font-weight:500; transition:color .15s ease; }
  .dk-navlink:hover { color:#fff; }
  .dk-navlink.active { color:#fff; }
  .dk-flink { color:rgba(255,255,255,.62); text-decoration:none; font-size:14px; line-height:1.5; transition:color .15s ease; }
  .dk-flink:hover { color:var(--dk-sky); }
  .dk-soc { display:grid; place-items:center; width:40px; height:40px; border:1px solid var(--dk-line); color:#fff; text-decoration:none; transition:background .15s ease, border-color .15s ease; }
  .dk-soc:hover { background:var(--dk-blue); border-color:var(--dk-blue); color:#fff; }
  .dk-corner { color:rgba(255,255,255,.42) !important; }
  .dk-util-ico { transition:color .15s ease; color:rgba(255,255,255,.7); } .dk-util-ico:hover { color:#fff !important; }
  .dk-chip { transition:border-color .15s ease, background .15s ease, transform .15s ease; }
  .dk-chip:hover { border-color:var(--dk-sky) !important; background:rgba(90,160,255,.06) !important; transform:translateY(-2px); }
  .dk-tl-item:hover .dk-tl-dot { background:var(--dk-sky); box-shadow:0 0 0 6px rgba(90,160,255,.18); }
  .dk-badge { transition:transform .15s ease, box-shadow .15s ease; }
  .dk-badge:hover { transform:translateY(-2px); box-shadow:0 12px 28px rgba(4,10,30,.4); }
  .dk-mega-wrap:hover .dk-mega { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateX(-50%) translateY(0) !important; }
  .dk-mega-wrap:hover .dk-mega-caret { transform:rotate(180deg); }
  .dk-mega-caret { transition:transform .18s ease; }
  .dk-mega-ic { flex:0 0 auto; width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(43,83,204,.08); color:var(--dk-blue); transition:background .15s ease, color .15s ease; }
  .dk-mega-item { transition:background .15s ease; }
  .dk-mega-item:hover { background:#f4f6fb; }
  .dk-mega-item:hover .dk-mega-ic { background:var(--dk-blue); color:#fff; }
  .dk-arrow { transition:border-color .15s ease, background .15s ease, color .15s ease; }
  .dk-arrow:hover { border-color:var(--dk-blue) !important; background:var(--dk-blue) !important; color:#fff !important; }
  @media (max-width:980px){ .dk-mega { width:min(94vw,560px) !important; } }
  @media (max-width:640px){ #recommendations [style*="repeat(auto-fit,minmax(300px,1fr))"]{ grid-template-columns:1fr !important; } }
  @media (max-width:1080px){ .dk-skill-grid{ grid-template-columns:repeat(3,1fr) !important; } }
  @media (max-width:720px){ .dk-skill-grid{ grid-template-columns:repeat(2,1fr) !important; } .dk-tl-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:480px){ .dk-skill-grid{ grid-template-columns:1fr !important; } }
  @media (max-width:820px){ .dk-legal-grid{ grid-template-columns:1fr !important; } .dk-legal-toc{ position:static !important; } }
  @keyframes dk-fade { from{opacity:0} to{opacity:1} }
  @keyframes dk-pop { from{opacity:0; transform:translateY(16px) scale(.98)} to{opacity:1; transform:none} }
  @media (max-width:860px){ .dk-nav-links { display:none !important; } .dk-util { display:none !important; } }
  @media (max-width:1000px){ .dk-about-hero { grid-template-columns:1fr !important; gap:44px !important; } }
  @media (max-width:820px){ .dk-two { grid-template-columns:1fr !important; } .dk-foot-top { grid-template-columns:1fr !important; gap:36px !important; } .dk-foot-div { display:none !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:900px){ .dk-skill-grid { grid-template-columns:repeat(2,1fr) !important; } .dk-press-grid { grid-template-columns:1fr !important; } .dk-cert-grid { grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:600px){ .dk-skill-grid { grid-template-columns:1fr !important; } .dk-hl-grid { grid-template-columns:1fr 1fr !important; } [style*="padding:96px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:88px 32px"]{ padding-left:20px !important; padding-right:20px !important; } [style*="padding:68px 32px 0"]{ padding-left:20px !important; padding-right:20px !important; } }
  @media (max-width:420px){ .dk-cert-grid { grid-template-columns:1fr !important; } footer [style*="grid-template-columns:1.3fr 1fr 1.3fr 1fr"]{ grid-template-columns:1fr !important; } }


/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */



:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --color-accent-2-100: #eef6ff;
  --color-accent-2-200: #d6ebff;
  --color-accent-2-300: #bdd8f2;
  --color-accent-2-400: #9ebbd8;
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: #627d98;
  --color-accent-2-700: #486077;
  --color-accent-2-800: #314457;
  --color-accent-2-900: #1f2d3a;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
/* The overlay image treatments (halftone, duotone) clip their overlay
   (overflow:hidden); a blueprint wrapper draws its registration marks
   outside the box, so when both classes share a wrapper the frame must
   win. */
.blueprint.halftone, .blueprint.plate, .blueprint.duotone { overflow: visible; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after {
  content: ""; position: absolute; background: currentColor;
}
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

.duotone{position:relative;overflow:hidden}
.duotone::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--color-accent);mix-blend-mode:color}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — blueprint frame: components are wireframe objects (see .blueprint
     and .corner above) — square, transparent, hairline-bordered — */
.card, .btn, .input, .tag, .seg, .dialog { border-radius: 0; }
.card, .dialog { background: transparent; border: 1px solid var(--color-divider); }
.btn { border: 1px solid var(--color-divider); }
.btn-primary { border-color: var(--color-accent); }
.btn-ghost { border-color: transparent; }



/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */

/* vietnamese */

/* latin-ext */

/* latin */


/* ===================================================================
   Post-merge repairs (site combines multiple Claude Design page
   stylesheets; these authoritative rules resolve the conflicts).
   =================================================================== */

/* The design's base is the dark "ink" canvas with white text. Light
   sections set their own colours explicitly, so this is a safe base. */
body { background: var(--dk-ink); color: #fff; }

/* Gradient-clipped accent words were animated by the Claude Design
   runtime; static capture lost the gradient (transparent text + no
   image = invisible). Restore them to the solid sky accent. */
[style*="background-clip: text"] {
  color: var(--dk-sky) !important;
  -webkit-text-fill-color: var(--dk-sky) !important;
}

/* ---- Rebuilt testimonials carousel + touch mega-menu ---- */
.dk-testi { margin-top: 8px; }
.dk-testi-viewport { overflow: hidden; }
.dk-testi-track { display: flex; gap: 24px; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.dk-tcard { display:flex; flex-direction:column; background:rgba(255,255,255,.035); border:1px solid var(--dk-line); border-radius:16px; padding:30px 30px 26px; }
.dk-tquote { margin-bottom: 14px; }
.dk-tquote-text { font-size:16.5px; line-height:1.62; margin:0; color:rgba(255,255,255,.86); flex:1 1 auto; }
.dk-trule { border:0; border-top:1px solid var(--dk-line); margin:26px 0 20px; }
.dk-tauthor { display:flex; align-items:center; gap:14px; }
.dk-tavatar { flex:0 0 auto; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--dk-navy),var(--dk-blue)); color:#fff; font-family:var(--font-heading); font-weight:700; font-size:19px; }
.dk-tname { font-size:18px; color:#fff; }
.dk-trole { font-size:13px; color:rgba(255,255,255,.6); line-height:1.35; margin-top:2px; }
.dk-testi-nav { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:28px; }
.dk-testi-arrow { width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--dk-line); background:rgba(255,255,255,.04); color:#fff; border-radius:50%; cursor:pointer; transition:background .2s,border-color .2s; }
.dk-testi-arrow:hover { background:rgba(255,255,255,.1); border-color:var(--dk-sky); }
.dk-testi-dots { display:flex; align-items:center; gap:8px; }
.dk-testi-dot { height:9px; width:9px; padding:0; border:0; border-radius:100px; background:rgba(255,255,255,.22); cursor:pointer; transition:width .2s,background .2s; }
.dk-testi-dot.is-active { width:30px; background:var(--dk-sky); }
.dk-mega-wrap.is-open .dk-mega { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateX(-50%) translateY(0) !important; }
.dk-mega-wrap.is-open .dk-mega-caret { transform:rotate(180deg); }

/* ============ Fixes (menu hover, footer responsive) ============ */
/* Bridge the 14px gap between the Services trigger and its mega-menu so the
   pointer can travel into the panel without it closing. */
.dk-mega::before { content:""; position:absolute; top:-26px; left:0; right:0; height:26px; }
/* Keep the panel open while the pointer is over it (or the bridge). Note: no
   :focus-within here — that kept it open after a click focused the trigger. */
.dk-mega:hover { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:translateX(-50%) translateY(0) !important; }

/* Footer: collapse the remaining multi-column grids on small screens. */
@media (max-width: 860px){
  .dk-cert-grid { grid-template-columns:repeat(2,1fr) !important; }
  .dk-foot-links { grid-template-columns:1fr 1fr !important; gap:28px 24px !important; }
}
@media (max-width: 560px){
  .dk-cert-grid { grid-template-columns:1fr !important; }
  .dk-foot-links { grid-template-columns:1fr !important; }
}

/* The testimonials mount sits in a centered flex column, so constrain it to
   the container width (otherwise it sizes to the track's content and overflows). */
.dk-testi { align-self:stretch; width:100%; max-width:100%; min-width:0; flex:0 1 100%; }
.dk-testi-viewport { width:100%; min-width:0; }

/* Contact form status message */
/* Site-wide breadcrumb bar — a slim dark strip under the sticky nav, above each
   page's hero. Blends with the navy hero; light, low-emphasis text. */
.dk-breadcrumbs { background: var(--dk-navy); border-bottom: 1px solid var(--dk-line-soft); }
.dk-bc-list { max-width:1200px; margin:0 auto; padding:12px 32px; list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; line-height:1.4; }
.dk-bc-item { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.dk-bc-link { color:rgba(255,255,255,.6); text-decoration:none; transition:color .15s ease; }
.dk-bc-link:hover { color:#fff; }
.dk-bc-sep { color:rgba(255,255,255,.28); }
.dk-bc-current { color:rgba(255,255,255,.9); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60vw; }
@media (max-width:640px){ .dk-bc-list { padding:10px 20px; font-size:12px; gap:6px; } .dk-bc-item { gap:6px; } }

/* Contact-form status message — sits on the WHITE form panel, so it needs dark,
   high-contrast text (the old near-white text was invisible). */
.dk-form-status { display:flex; align-items:flex-start; gap:9px; padding:14px 16px; border-radius:10px; font-size:14.5px; line-height:1.5; font-weight:600; }
.dk-form-status::before { content:""; flex:0 0 auto; width:18px; height:18px; margin-top:1px; background-repeat:no-repeat; background-position:center; background-size:18px 18px; }
.dk-form-status.is-ok  { background:#e7f7ee; border:1px solid #46b880; color:#12683f; }
.dk-form-status.is-ok::before  { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312683f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.dk-form-status.is-err { background:#fdeceb; border:1px solid #e0605c; color:#b02620; }
.dk-form-status.is-err::before { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b02620' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E"); }

/* Newsletter status — sits on the DARK footer panel, so light text on a tint. */
.dk-nl-status { padding:11px 14px; border-radius:10px; font-size:13.5px; line-height:1.5; font-weight:600; }
.dk-nl-status.is-ok  { background:rgba(70,184,128,.16); border:1px solid rgba(70,184,128,.55); color:#a6ecc6; }
.dk-nl-status.is-err { background:rgba(255,120,116,.14); border:1px solid rgba(255,120,116,.5); color:#ffc4c2; }

/* ---- Mobile nav (hamburger) + footer single-column span reset ---- */
.dk-burger { display:none; align-items:center; justify-content:center; width:44px; height:44px; margin-left:6px; background:none; border:0; color:#fff; cursor:pointer; }
@media (max-width: 860px){ .dk-burger { display:inline-flex; } }
.dk-mnav { position:absolute; left:0; right:0; top:100%; background:#0a1430; border-top:1px solid var(--dk-line); box-shadow:0 24px 60px rgba(4,10,30,.5); display:flex; flex-direction:column; padding:10px 22px 20px; z-index:65; max-height:calc(100vh - 60px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.dk-mnav > a, .dk-mnav-top { padding:15px 4px; color:#fff; font-family:var(--font-heading); font-weight:600; font-size:16px; text-transform:uppercase; letter-spacing:.02em; border-bottom:1px solid var(--dk-line-soft); text-decoration:none; }
.dk-mnav-group { border-bottom:1px solid var(--dk-line-soft); }
.dk-mnav-top { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:0; border-bottom:0; cursor:pointer; }
.dk-mnav-top svg { flex:0 0 auto; color:var(--dk-sky); transition:transform .2s ease; }
.dk-mnav-top[aria-expanded="true"] svg { transform:rotate(180deg); }
.dk-mnav-sub { display:flex; flex-direction:column; padding:0 0 12px 12px; }
.dk-mnav-sub[hidden] { display:none; }
.dk-mnav-sub a { padding:11px 4px; color:rgba(255,255,255,.82); font-family:var(--font-body); font-weight:500; font-size:14px; text-transform:none; letter-spacing:0; border-bottom:0; text-decoration:none; }
.dk-mnav-sub a.dk-mnav-hub { color:var(--dk-sky); font-weight:600; }
.dk-mnav > a:last-child, .dk-mnav-group:last-of-type { border-bottom:0; }
.dk-mnav .dk-mnav-cta { margin-top:14px; background:var(--dk-blue); border-radius:11px; text-align:center; padding:15px; border-bottom:0; }
/* Hide the big header CTA on mobile — it lives in the hamburger menu instead. */
@media (max-width:860px){ nav > div > .dk-cta { display:none !important; } }

/* At single-column, stop the newsletter box (grid-column: span 2) forcing an
   implicit second column. */
@media (max-width: 560px){
  .dk-foot-links > * { grid-column: auto !important; }
}

/* Ensure the mobile nav panel actually hides when closed (class display would
   otherwise beat the [hidden] UA rule), and never leaks onto desktop. */
.dk-mnav[hidden] { display:none !important; }
@media (min-width: 861px){ .dk-mnav, .dk-burger { display:none !important; } }

/* ---- Testimonials: infinite auto-scroll marquee ---- */
.dk-testi-marquee { width:max-content; gap:0; animation: dk-testi-scroll 55s linear infinite; will-change:transform; }
.dk-testi-marquee .dk-tcard { flex:0 0 min(86vw, 420px); margin-right:24px; }
.dk-testi-viewport:hover .dk-testi-marquee { animation-play-state: paused; }
@keyframes dk-testi-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .dk-testi-marquee { animation: none; } }

/* ============ Blog article prose (.dk-prose) ============ */
.dk-prose { color:#3a4256; }
.dk-prose > :first-child { margin-top:0; }
.dk-prose p { font-size:17.5px; line-height:1.85; margin:0 0 22px; color:#3a4256; }
.dk-prose > p:first-of-type { font-size:21px; line-height:1.75; color:var(--dk-navy); }
.dk-prose h2 { font-family:var(--font-heading); font-weight:700; font-size:clamp(24px,2.6vw,32px); text-transform:uppercase; line-height:1.15; margin:48px 0 18px; padding-left:16px; border-left:4px solid var(--dk-blue); color:var(--dk-navy); }
.dk-prose h3 { font-family:var(--font-heading); font-weight:700; font-size:clamp(19px,2vw,23px); margin:34px 0 12px; color:var(--dk-navy); }
.dk-prose h4 { font-weight:700; font-size:18px; margin:26px 0 10px; color:var(--dk-navy); }
.dk-prose a { color:var(--dk-blue); text-decoration:underline; text-underline-offset:2px; }
.dk-prose ul, .dk-prose ol { margin:0 0 22px; padding-left:24px; font-size:17px; line-height:1.8; color:#3a4256; }
.dk-prose li { margin:0 0 8px; }
.dk-prose li > ul, .dk-prose li > ol { margin:8px 0 0; }
.dk-prose blockquote { margin:28px 0; padding:16px 24px; border-left:4px solid var(--dk-sky); background:rgba(90,160,255,.07); color:var(--dk-navy); font-size:19px; line-height:1.7; border-radius:0 10px 10px 0; }
.dk-prose blockquote p { font-size:inherit; color:inherit; margin:0; }
.dk-prose img { max-width:100%; height:auto; border-radius:12px; display:block; }
.dk-prose figure { margin:30px 0; }
.dk-prose figure.dk-fig { margin:30px 0; }
.dk-prose figcaption { font-size:13.5px; color:#6a7180; text-align:center; margin-top:10px; }
.dk-prose table { width:100%; border-collapse:collapse; margin:24px 0; font-size:15.5px; display:block; overflow-x:auto; }
.dk-prose th, .dk-prose td { border:1px solid rgba(15,31,82,.14); padding:10px 12px; text-align:left; }
.dk-prose th { background:rgba(15,31,82,.05); color:var(--dk-navy); }
.dk-prose pre { background:#0f1f52; color:#e7eefc; padding:18px; border-radius:12px; overflow:auto; font-size:14px; line-height:1.6; margin:0 0 22px; }
.dk-prose code { background:rgba(15,31,82,.08); padding:2px 6px; border-radius:5px; font-size:.9em; }
.dk-prose pre code { background:none; padding:0; }
.dk-prose hr { border:0; border-top:1px solid rgba(15,31,82,.14); margin:40px 0; }

/* Blog: skill-cards grid collapses on mobile (inline sets 2 columns) */
@media (max-width: 640px){ .dk-skill-cards { grid-template-columns:1fr !important; } }

/* Drop-cap lead paragraph for scraped posts (mirrors the design's .dk-lead) */
.dk-prose > p:first-of-type::first-letter { font-family:var(--font-heading); font-weight:700; font-size:3.4em; line-height:.8; float:left; margin:6px 12px 0 0; color:var(--dk-blue); }

/* Prevent horizontal overflow WITHOUT making <body> a scroll container
   (overflow-x:hidden did that, which broke position:sticky and window scroll).
   overflow-x:clip clips without establishing a scroll container. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Keep-reading related grid responsive */
@media (max-width: 900px){ .dk-related-grid { grid-template-columns:1fr 1fr !important; } }
@media (max-width: 580px){ .dk-related-grid { grid-template-columns:1fr !important; } }

/* Insights load-more button + grid responsiveness */
.dk-loadmore:hover { filter: brightness(1.08); }
@media (max-width: 900px){ .dk-post-grid { grid-template-columns:1fr 1fr !important; } }
@media (max-width: 600px){ .dk-post-grid { grid-template-columns:1fr !important; } }