/* 9x9 UI Kit v1.1.1 | canonical: 9x9-home/ui-kit/v1/ui-kit.css
   Do not edit vendored copies independently. The namespace is intentionally limited
   to shared navigation so legacy tool/editor layouts are not altered. */
:root{
  --nine-ui-space-1:4px;
  --nine-ui-space-2:8px;
  --nine-ui-space-3:12px;
  --nine-ui-space-4:16px;
  --nine-ui-space-6:24px;
  --nine-ui-space-8:32px;
  --nine-ui-radius-control:12px;
  --nine-ui-radius-card:16px;
  --nine-ui-radius-panel:20px;
  --nine-ui-touch-target:44px;
  --nine-ui-shell-width:1080px;
  --nine-ui-menu-width:338px;
  --nine-ui-menu-bg:#171719;
  --nine-ui-menu-border:#393a3e;
  --nine-ui-menu-text:#c8c8cd;
  --nine-ui-menu-contrast:#f4f4f2;
  --nine-ui-menu-icon-bg:#202023;
  --nine-ui-accent-dark:#75a5ff;
  --nine-ui-accent-light:#3275e8;
}
:is(.discover-menu,.nine-discover-menu,.explore-menu){position:relative;flex-shrink:0}
:is(.discover-trigger,.nine-discover-trigger,.explore-trigger){
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  min-height:var(--nine-ui-touch-target)!important;
  padding:5px 8px 5px 12px!important;
  border-radius:999px!important;
  font-size:12.5px!important;
  line-height:1.4!important;
  white-space:nowrap!important;
  cursor:pointer;
}
:is(.discover-trigger,.nine-discover-trigger,.explore-trigger):focus-visible,
:is(.discover-tile,.nine-discover-tile,.explore-tile):focus-visible{
  outline:2px solid currentColor!important;
  outline-offset:3px!important;
}
:is(.discover-panel,.nine-discover-panel,.explore-panel){
  box-sizing:border-box!important;
  position:absolute!important;
  top:calc(100% + 10px)!important;
  right:0!important;
  width:min(var(--nine-ui-menu-width),calc(100vw - 24px))!important;
  max-width:calc(100vw - 24px)!important;
  padding:15px!important;
  border:1px solid var(--nine-ui-menu-border)!important;
  border-radius:var(--nine-ui-radius-panel)!important;
  background:var(--nine-ui-menu-bg)!important;
  color:var(--nine-ui-menu-contrast)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.36)!important;
  z-index:32!important;
}
:is(.discover-heading,.nine-discover-heading,.explore-heading){
  margin:0 2px 10px!important;
  color:#c7c7cb!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1.5!important;
}
:is(.discover-grid,.nine-discover-grid,.explore-grid){
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
}
:is(.discover-tile,.nine-discover-tile,.explore-tile){
  box-sizing:border-box;
  min-width:0!important;
  min-height:91px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  padding:8px 3px!important;
  border-radius:14px!important;
  text-align:center!important;
  text-decoration:none!important;
  color:var(--nine-ui-menu-text)!important;
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.3!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
}
:is(.discover-tile,.nine-discover-tile,.explore-tile):hover,
:is(.discover-tile,.nine-discover-tile,.explore-tile):focus-visible{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
}
:is(.discover-icon,.nine-discover-icon,.explore-tile-icon){
  box-sizing:border-box!important;
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  height:44px!important;
  flex:none!important;
  border:1px solid #3a3a3e!important;
  border-radius:14px!important;
  background:var(--nine-ui-menu-icon-bg)!important;
  color:#fafafa!important;
}
:is(.discover-icon,.nine-discover-icon,.explore-tile-icon) svg{
  display:block!important;
  width:23px!important;
  height:23px!important;
  max-width:23px!important;
  max-height:23px!important;
}
@media(max-width:380px){
  :is(.discover-trigger,.nine-discover-trigger,.explore-trigger){
    gap:7px!important;
    padding:6px 6px 6px 8px!important;
    font-size:12px!important;
  }
}
/* Preserves per-site trigger accent and body overlay behavior. */

/*
 * 9x9 UI Kit v1.1.1 — shared chrome spacing, footer and Share & Connect.
 * These selectors intentionally scope to existing chrome, not arbitrary
 * app headers, editors, forms, QR controls or profile content.
 */
:root {
  --nine-ui-chrome-height:80px;
  --nine-ui-chrome-height-mobile:70px;
  --nine-ui-chrome-divider:rgba(127,127,127,.20);
  --nine-ui-share-column-gap:32px;
  --nine-ui-share-row-gap:22px;
}
/* Only these ecosystem mastheads participate in the shared header height.
 * Do not target the independent LINK admin header or tool-specific headers. */
body > .shell > nav.nav,
body > .site-header > .header-inner,
.nine-topbar {
  min-height:var(--nine-ui-chrome-height)!important;
  height:var(--nine-ui-chrome-height)!important;
}
body > .site-header:has(.nine-discover-menu),
.page-shell > .site-header:has(.nine-discover-menu) {
  min-height:var(--nine-ui-chrome-height)!important;
  height:var(--nine-ui-chrome-height)!important;
  display:flex;
  align-items:center;
}
body > .shell > nav.nav,
body > .site-header,
.nine-topbar {
  border-bottom-color:var(--nine-ui-chrome-divider)!important;
}
/* Preserve full product names and a stable, tappable discovery target. */
body > .shell > nav.nav .brand,
body > .site-header .brand,
.nine-topbar .nine-brand {
  min-width:0;
}
:is(.global-share-grid,.nine-global-grid,.nine-global-panel) {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:var(--nine-ui-share-column-gap)!important;
  row-gap:var(--nine-ui-share-row-gap)!important;
}
.nine-global-share.is-social-only .nine-global-grid {
  grid-template-columns:minmax(0,1fr)!important;
}
:is(.global-share,.nine-global-share) :is(h2,.nine-global-title) {
  margin-top:0!important;
  margin-bottom:12px!important;
  font-size:13px!important;
  font-weight:720!important;
  line-height:1.5!important;
  letter-spacing:0!important;
}
:is(.share-actions,.social-links,.nine-global-actions,.nine-global-socials) {
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
  gap:8px 16px!important;
}
:is(.share-btn,.social-link,.nine-global-btn,.nine-global-link) {
  font-size:13px!important;
  line-height:1.5!important;
  text-underline-offset:3px;
}
:is(.global-contact,.connect-contact,.nine-global-contact) {
  margin-top:12px!important;
  font-size:12px!important;
  line-height:1.5!important;
}
:is(.nine-footer,body > .shell > footer,.site-footer) {
  font-size:12px!important;
  line-height:1.5!important;
  white-space:nowrap!important;
}
:is(.nine-footer,body > .shell > footer,.site-footer) a[href="https://9x9.vn/"] {
  color:inherit!important;
  text-decoration:none!important;
}
:is(.nine-footer,body > .shell > footer,.site-footer) a[href="https://9x9.vn/"]:hover {
  text-decoration:underline!important;
}
@media (max-width:780px) {
  body > .shell > nav.nav,
  body > .site-header > .header-inner,
  .nine-topbar {
    min-height:var(--nine-ui-chrome-height-mobile)!important;
    height:var(--nine-ui-chrome-height-mobile)!important;
  }
  body > .site-header:has(.nine-discover-menu),
  .page-shell > .site-header:has(.nine-discover-menu) {
    min-height:var(--nine-ui-chrome-height-mobile)!important;
    height:var(--nine-ui-chrome-height-mobile)!important;
  }
  :is(.global-share-grid,.nine-global-grid,.nine-global-panel) {
    grid-template-columns:minmax(0,1fr)!important;
    row-gap:var(--nine-ui-share-row-gap)!important;
  }
}