@font-face {
  font-family: Inter;
  src: url("inter-vietnamese.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

@font-face {
  font-family: Inter;
  src: url("inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: light;
  --ink: #141d36;
  --muted: #515e76;
  --accent: #464acb;
  --accent-dark: #3539ab;
  --accent-light: #eeefff;
  --line: #dfe5f0;
  --surface: #fff;
  --paper: #f8faff;
  --shadow: 0 4px 16px rgb(37 47 91 / 5%);
  font-family: Inter, system-ui, sans-serif;
  font-size: 100%;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.2; overflow-wrap: anywhere; }
h1, h2 { text-wrap: balance; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
svg { width: 1.25rem; height: 1.25rem; flex: none; vertical-align: middle; }
img { display: block; width: 100%; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#page-title:focus, main:focus { outline: none; }

.wrap { width: min(100% - 64px, 1160px); margin-inline: auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link { position: absolute; z-index: 3; left: 12px; top: 10px; transform: translateY(-150%); }
.skip-link:focus { transform: none; background: var(--surface); padding: 8px 14px; border-radius: 8px; }

.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner {
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 20px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 760; font-size: 1.08rem; width: fit-content; white-space: nowrap; letter-spacing: -.025em; }
.brand strong { color: var(--accent); }
.brand-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 9px rgb(70 74 203 / 23%);
}
.brand-mark svg { width: 23px; height: 23px; }
.site-nav { display: flex; align-items: center; gap: 6px; }
.site-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 17px;
  border-radius: 9px;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 650;
  transition: background-color 160ms, color 160ms;
}
.site-nav a:hover, .site-nav a[aria-current] { color: var(--accent-dark); background: var(--accent-light); }
.search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: end;
  min-height: 44px;
  padding: 0 9px 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--muted);
  font-size: .85rem;
  font-weight: 550;
  transition: background-color 160ms, border-color 160ms;
}
.search-trigger svg { width: 17px; height: 17px; }
.search-trigger:hover { background: var(--accent-light); border-color: #c4c8ef; }
kbd { padding: 1px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); font: inherit; font-size: .69rem; white-space: nowrap; }

.intro { padding: 55px 0 33px; text-align: center; }
.intro h1, .docs-hero h1 { font-size: clamp(2.1rem, 5vw, 3.45rem); font-weight: 790; letter-spacing: -.06em; }
.intro h1 span { color: var(--accent); }
.intro p, .docs-hero p { margin-top: 12px; color: var(--muted); font-size: clamp(.96rem, 1.7vw, 1.08rem); text-wrap: balance; }

.featured {
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  background: linear-gradient(125deg, #f2f2ff, #f8f8ff);
  min-height: 322px;
  overflow: hidden;
  border-radius: 23px;
  border: 1px solid #e1e1fc;
}
.featured-copy { padding: clamp(26px, 4vw, 51px); align-self: center; }
.featured-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--accent-dark);
  background: #e4e5ff;
  font-size: .77rem;
  font-weight: 730;
}
.featured-label svg { width: 14px; height: 14px; }
.sample-tag { margin-inline-start: 8px; color: var(--muted); font-size: .77rem; font-weight: 620; }
.featured h2 {
  max-width: 16ch;
  margin-top: 14px;
  font-size: clamp(1.7rem, 3.2vw, 2.62rem);
  font-weight: 770;
  letter-spacing: -.045em;
  text-wrap: pretty;
}
.featured p { max-width: 44ch; margin-top: 12px; color: var(--muted); }
.featured .meta { display: flex; margin-top: 16px; }
.featured .button { margin-top: 19px; }
.featured-image { position: relative; min-width: 0; background: #e8e8ff; }
.featured-image img { position: absolute; height: 100%; object-fit: cover; }
.cover-placeholder { display: grid; place-items: center; height: 100%; min-height: 110px; background: var(--accent-light); color: var(--accent); }
.cover-placeholder svg { width: 44px; height: 44px; }

.meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--muted); font-size: .81rem; }
.meta svg { width: 16px; height: 16px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: .88rem;
  font-weight: 680;
  transition: background-color 160ms, box-shadow 160ms;
}
.button svg { width: 17px; height: 17px; }
.button-primary { background: var(--accent); color: white; box-shadow: 0 5px 12px rgb(70 74 203 / 18%); }
.button-primary:hover { background: var(--accent-dark); }
.button-secondary { background: var(--surface); border-color: #d7dbf8; color: var(--accent-dark); }
.button-secondary:hover { background: var(--accent-light); }

.news-section, .docs-section { margin-top: 46px; }
.section-head { display: flex; justify-content: space-between; gap: 14px 24px; align-items: end; margin-bottom: 20px; }
.section-head h2, .library-callout h2 { font-size: clamp(1.45rem, 3vw, 1.92rem); letter-spacing: -.044em; font-weight: 760; }
.section-head p { margin-top: 5px; color: var(--muted); font-size: .83rem; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  background: var(--surface);
  color: var(--muted);
  font-size: .83rem;
  font-weight: 630;
  transition: background-color 160ms, color 160ms, border-color 160ms;
}
.filter:hover { border-color: #aeb4ea; color: var(--accent-dark); }
.filter[aria-pressed="true"] { color: var(--accent-dark); background: var(--accent-light); border-color: #cfd3f8; }

.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.news-card {
  min-width: 0;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: border-color 160ms, box-shadow 160ms;
}
.news-card:hover, .news-card:focus-within { border-color: #bfc3f1; box-shadow: 0 7px 20px rgb(37 47 91 / 9%); }
.card-link { display: flex; flex-direction: column; height: 100%; border-radius: inherit; }
.card-image { aspect-ratio: 2.05; overflow: hidden; background: var(--accent-light); border-radius: 15px 15px 0 0; }
.card-image img { height: 100%; object-fit: cover; }
.card-body { flex: 1; display: flex; flex-direction: column; align-items: start; padding: 18px; }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; color: var(--muted); font-size: .75rem; }
.badge { display: inline-flex; padding: 3px 8px; border-radius: 6px; font-size: .75rem; font-weight: 680; color: #4245a3; background: #eeefff; }
.badge--update, .badge--tools { color: #234a9d; background: #e8f0ff; }
.badge--notice { color: #715207; background: #fff2d4; }
.badge--security { color: #0a5d55; background: #def7f0; }
.card-body h3 { margin-top: 10px; font-size: 1.13rem; font-weight: 745; letter-spacing: -.028em; }
.card-body p { margin: 7px 0 11px; color: var(--muted); font-size: .89rem; }
.card-action { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: var(--accent-dark); font-size: .86rem; font-weight: 680; }
.card-action svg { width: 15px; height: 15px; }

.library-callout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  margin: 35px 0 56px;
  padding: 19px 22px;
  border: 1px solid #dfe2fb;
  border-radius: 15px;
  background: #f0f2ff;
}
.callout-icon, .doc-icon { display: grid; place-items: center; width: 47px; height: 47px; border-radius: 12px; background: #e3e6ff; color: var(--accent-dark); }
.callout-icon svg, .doc-icon svg { width: 22px; height: 22px; }
.library-callout h2 { font-size: 1.15rem; text-wrap: initial; }
.library-callout p { color: var(--muted); font-size: .87rem; margin-top: 3px; }

.docs-hero {
  text-align: center;
  margin-top: 34px;
  padding: 36px 22px 38px;
  border: 1px solid #e0e2f9;
  border-radius: 23px;
  background: radial-gradient(ellipse at 50% 0%, #e6e8ff, #f1f3ff 75%);
}
.docs-hero .callout-icon { margin: 0 auto 13px; }
.docs-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
.search-field { position: relative; max-width: 540px; margin: 22px auto 0; text-align: start; }
.search-field svg { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-input { width: 100%; min-height: 49px; padding: 8px 13px; border: 1px solid #aebad0; border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 1rem; }
.search-field .search-input { padding-inline-start: 44px; }
.search-input::placeholder { color: var(--muted); }
.docs-section { margin-top: 36px; margin-bottom: 56px; }
.docs-list { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.doc-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  transition: background-color 160ms, border-color 160ms;
}
.doc-card:hover { background: #f4f6ff; border-color: #c6cbef; }
.doc-icon--tools { color: #234a9d; background: #e8f0ff; }
.doc-icon--security { color: #0a5d55; background: #def7f0; }
.doc-card h3 { font-size: 1.05rem; letter-spacing: -.02em; }
.doc-card p { margin-top: 5px; color: var(--muted); font-size: .89rem; }
.doc-card-meta { display: inline-block; margin-top: 5px; color: var(--muted); font-size: .77rem; font-weight: 620; }
.doc-arrow { color: var(--accent-dark); }
.empty-state { grid-column: 1 / -1; padding: 30px 16px; text-align: center; border: 1px dashed #b9c2dc; border-radius: 12px; background: var(--surface); }
.empty-state p { color: var(--muted); margin-top: 4px; }

.reading-page { max-width: 800px; margin: 30px auto 56px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 13px; color: var(--accent-dark); font-weight: 670; font-size: .87rem; }
.back-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.article { overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.article-heading, .article-body { padding: clamp(22px, 5vw, 45px); }
.article-heading h1 { margin-top: 13px; font-size: clamp(1.8rem, 5vw, 2.8rem); letter-spacing: -.05em; }
.article-summary { margin-top: 13px; color: var(--muted); font-size: 1.06rem; }
.article-info { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 16px; margin-top: 14px; }
.copy-button { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 3px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--accent-dark); font-size: .81rem; font-weight: 650; }
.copy-button:hover { background: var(--accent-light); }
.copy-button svg { width: 16px; height: 16px; }
.sample-note { width: fit-content; margin-top: 6px; padding: 3px 8px; border-radius: 5px; background: #fff2d4; color: #715207; font-size: .77rem; font-weight: 650; }
.article-image { aspect-ratio: 2.5; background: var(--accent-light); }
.article-image img { height: 100%; object-fit: cover; }
.article-body { color: #29364e; overflow-wrap: anywhere; }
.article-body > * + * { margin-top: 13px; }
.article-body h2 { font-size: 1.27rem; letter-spacing: -.028em; color: var(--ink); }
.article-body :not(:first-child):is(h2, h3) { margin-top: 26px; }
.article-body ol, .article-body ul { padding-inline-start: 1.4em; margin-bottom: 0; }
.article-body li + li { margin-top: 6px; }
.article-body a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.related { margin-top: 25px; }
.related h2 { font-size: 1.2rem; }
.related ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.related a { display: flex; justify-content: space-between; align-items: center; gap: 10px; height: 100%; min-height: 48px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--accent-dark); font-weight: 650; font-size: .88rem; }
.related a:hover { background: var(--accent-light); }
.missing-page { padding: 65px 0; text-align: center; }
.missing-page p { margin: 8px 0 18px; color: var(--muted); }

.site-footer { background: var(--surface); border-top: 1px solid var(--line); color: var(--muted); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 3px 16px; min-height: 67px; padding-block: 10px; font-size: .83rem; }
.footer-brand { color: var(--ink); font-weight: 750; }

dialog { width: min(100% - 32px, 570px); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); color: var(--ink); box-shadow: 0 18px 60px rgb(22 32 76 / 22%); }
dialog::backdrop { background: rgb(20 29 54 / 52%); }
.dialog-inner { padding: clamp(15px, 4vw, 25px); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 9px; }
.dialog-head h2 { text-align: start; font-size: 1.3rem; }
.icon-button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 1.4rem; }
.icon-button:hover { background: var(--accent-light); }
.search-status { margin: 13px 0 5px; color: var(--muted); font-size: .85rem; }
.search-results { margin: 0; padding: 0; list-style: none; }
.search-results a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px; border-radius: 7px; }
.search-results a:hover { background: var(--accent-light); }
.search-results strong, .search-results small { display: block; }
.search-results small { color: var(--muted); }
.search-results svg { color: var(--accent-dark); }

@media (max-width: 850px) {
  .wrap { width: min(100% - 44px, 1160px); }
  .news-grid { gap: 14px; }
  .card-body { padding: 15px; }
}

@media (max-width: 660px) {
  .wrap { width: calc(100% - 32px); }
  .header-inner { grid-template-columns: 1fr auto; padding-top: 11px; gap: 7px 14px; }
  .site-nav { grid-row: 2; grid-column: 1 / -1; padding-bottom: 8px; }
  .site-nav a { justify-content: start; padding: 0 13px; }
  .search-trigger { grid-row: 1; grid-column: 2; padding: 0 11px; }
  .search-trigger kbd { display: none; }
  .intro { padding: 34px 0 24px; }
  .featured { grid-template-columns: 1fr; border-radius: 17px; }
  .featured-copy { padding: 23px; }
  .featured h2 { max-width: none; }
  .featured-image { aspect-ratio: 1.92; }
  .news-section, .docs-section { margin-top: 28px; }
  .section-head { flex-direction: column; align-items: start; margin-bottom: 14px; }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library-callout { grid-template-columns: auto 1fr; margin: 24px 0 35px; padding: 15px; }
  .library-callout .button { grid-column: 2; justify-self: start; }
  .docs-hero { margin-top: 22px; padding: 24px 15px; border-radius: 16px; }
  .docs-section { margin-bottom: 35px; }
  .reading-page { margin-top: 15px; }
}

@media (max-width: 480px) {
  .news-grid, .related ul { grid-template-columns: 1fr; }
  .article-image { aspect-ratio: 1.8; }
  .doc-card { gap: 10px; padding: 12px; }
  .doc-icon { width: 37px; height: 37px; }
  .doc-icon svg { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}