/* ===========================================================================
   OneMC — hệ thống thiết kế riêng của trang chủ.
   Cùng bảng màu, thang chuyển động và chữ với hệ sinh thái OneShield
   (antiddos.onemc.vn) nhưng bố cục và nhận diện hoàn toàn độc lập.
   Toàn bộ CSS được nhúng thẳng để loại bỏ một vòng tải chặn hiển thị.
   =========================================================================== */
:root {
  color-scheme: dark;

  --bg: #050508;
  --bg-soft: #0a0a11;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-strong: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.14);

  --text: #e8eaef;
  --text-muted: rgba(232, 234, 239, 0.62);
  --text-dim: rgba(232, 234, 239, 0.42);

  --accent: #5865f2;
  --accent-bright: #7c9cff;
  --accent-soft: #c7d2fe;
  --accent-deep: #4752c4;
  --online: #34d399;
  --online-soft: #6ee7b7;
  --warn: #fbbf24;
  --danger: #f87171;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  --page-max-width: 1120px;
  --page-gutter: 1.5rem;

  --transition-fast: 150ms;
  --transition-base: 220ms;
  --transition-slow: 320ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 0 1px rgba(88, 101, 242, 0.35), 0 20px 60px rgba(88, 101, 242, 0.18);

  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1400px) { :root { --page-max-width: 1240px; --page-gutter: 2rem; } }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  min-height: 100vh;
}

/* Nền: hai quầng sáng tĩnh + lưới mảnh gợi khối lập phương Minecraft.
   Dùng pseudo-element cố định nên không gây reflow và không tốn ảnh. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(60rem 40rem at 15% -10%, rgba(88, 101, 242, 0.18), transparent 60%),
    radial-gradient(50rem 35rem at 90% 0%, rgba(52, 211, 153, 0.10), transparent 55%),
    radial-gradient(40rem 30rem at 50% 100%, rgba(88, 101, 242, 0.08), transparent 60%);
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 75%);
  pointer-events: none;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------- Thanh điều hướng */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 5, 8, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition-base) var(--ease-standard),
              background var(--transition-base) var(--ease-standard);
}
.topbar.is-scrolled {
  border-bottom-color: var(--border);
  background: rgba(5, 5, 8, 0.9);
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 68px;
}

.brand { display: inline-flex; align-items: center; gap: 0.65rem; font-weight: 700; letter-spacing: -0.02em; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-text { font-size: 1.12rem; }
.brand-text span { color: var(--accent-bright); }

.nav { display: flex; align-items: center; gap: 0.15rem; }
.nav a, .nav button {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast) var(--ease-standard),
              background var(--transition-fast) var(--ease-standard);
}
.nav a:hover, .nav button:hover, .nav a:focus-visible, .nav button:focus-visible {
  color: var(--text);
  background: var(--surface-strong);
}
.nav a.is-active { color: var(--text); }

.nav-cta {
  margin-left: 0.5rem;
  padding: 0.55rem 1.1rem !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--accent-deep) !important; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1rem var(--page-gutter) 1.5rem;
    /* Nền phải đục hoàn toàn. Một nền bán trong suốt ở đây không che được nội
       dung phía sau — .topbar (tổ tiên) đã có backdrop-filter, khiến lớp nền
       của menu không còn phủ kín, và chữ của trang lộ xuyên qua menu. */
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base) var(--ease-standard),
                transform var(--transition-base) var(--ease-standard),
                visibility var(--transition-base) var(--ease-standard);
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a, .nav button { text-align: left; padding: 0.85rem 0.9rem; font-size: 1rem; }
  .nav-cta { margin-left: 0; text-align: center !important; }
}

/* --------------------------------------------------------------- Chung cho các mục */
main { display: block; }

.section { padding: 5.5rem 0; }
@media (max-width: 720px) { .section { padding: 4rem 0; } }

.section-head { max-width: 44rem; margin-bottom: 2.75rem; }
.section-head.is-centered { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: 0.9rem;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-bright));
}
.section-head.is-centered .eyebrow::after {
  content: "";
  width: 22px; height: 1px;
  background: linear-gradient(90deg, var(--accent-bright), transparent);
}

h1, h2, h3 { margin: 0; letter-spacing: -0.025em; line-height: 1.18; font-weight: 700; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.2rem; }

.section-head p {
  margin: 0.9rem 0 0;
  color: var(--text-muted);
  font-size: 1.03rem;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  transition: border-color var(--transition-base) var(--ease-standard),
              background var(--transition-base) var(--ease-standard),
              transform var(--transition-base) var(--ease-standard);
}
.card:hover {
  border-color: var(--border-strong);
  background: var(--surface-strong);
  transform: translateY(-3px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast) var(--ease-standard),
              border-color var(--transition-fast) var(--ease-standard),
              transform var(--transition-fast) var(--ease-standard),
              color var(--transition-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { background: var(--surface-strong); border-color: var(--border-strong); }

/* --------------------------------------------------------------- Hero */
.hero { position: relative; padding: 4.5rem 0 5rem; }
@media (max-width: 900px) { .hero { padding: 2.5rem 0 3.5rem; } }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3.5rem;
  align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } }

.hero-logo { width: 76px; height: 76px; margin-bottom: 1.5rem; }

.hero h1 {
  font-size: clamp(2.35rem, 4.6vw, 3.4rem);
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.hero h1 .grad {
  background: linear-gradient(120deg, #fff 10%, var(--accent-soft) 45%, var(--accent-bright) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-tagline {
  margin: 1.15rem 0 0;
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  color: var(--text-muted);
  max-width: 34rem;
}

.hero-editions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.edition-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
}
.edition-badge svg { width: 15px; height: 15px; color: var(--accent-bright); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Bảng trạng thái trực tiếp */
.status-panel {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
.status-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--border);
}
.status-icon {
  width: 56px; height: 56px;
  flex: none;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.35);
  image-rendering: pixelated;
  object-fit: cover;
}
.status-title { min-width: 0; flex: 1; }
.status-title strong { display: block; font-size: 1.02rem; letter-spacing: -0.01em; }
.status-address {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.86rem;
  color: var(--text-dim);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-pill[data-state="online"] { color: var(--online-soft); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.3); }
.status-pill[data-state="offline"] { color: var(--danger); background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.3); }
.status-pill[data-state="loading"] { color: var(--text-dim); background: var(--surface); border-color: var(--border); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status-pill[data-state="online"] .status-dot { animation: pulse 2.4s var(--ease-standard) infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
}

.status-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1.15rem;
}
.stat {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.7rem;
  text-align: center;
}
.stat-value {
  display: block;
  white-space: nowrap;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.stat-value.is-online { color: var(--online-soft); }
.stat-label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Điện thoại hẹp: đưa nhãn trạng thái xuống hàng riêng và nới các ô số liệu,
   nếu không "Máy chủ OneMC" bị bẻ ba dòng và nhãn "SLOT TỐI ĐA" bị ngắt đôi. */
@media (max-width: 480px) {
  .status-head { flex-wrap: wrap; row-gap: 0.85rem; }
  .status-title { flex: 1 1 auto; }
  .status-pill { order: 3; width: 100%; justify-content: center; }
  .status-stats { gap: 0.5rem; }
  .stat { padding: 0.75rem 0.35rem; }
  .stat-label { letter-spacing: 0.05em; font-size: 0.63rem; }
}

.copy-row { display: flex; gap: 0.6rem; margin-top: 1.15rem; }
.copy-ip {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  background: rgba(88, 101, 242, 0.1);
  border: 1px dashed rgba(88, 101, 242, 0.45);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: background var(--transition-fast) var(--ease-standard),
              border-color var(--transition-fast) var(--ease-standard),
              color var(--transition-fast) var(--ease-standard);
}
.copy-ip:hover { background: rgba(88, 101, 242, 0.18); border-color: var(--accent-bright); }
.copy-ip.is-copied {
  color: var(--online-soft);
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.5);
  border-style: solid;
}
.copy-ip svg { width: 17px; height: 17px; flex: none; }

.status-foot {
  margin: 1rem 0 0;
  font-size: 0.74rem;
  color: var(--text-dim);
  text-align: center;
}

/* --------------------------------------------------------------- Máy chủ */
.server-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.server-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  overflow: hidden;
}
.server-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--card-accent, var(--accent));
  opacity: 0.85;
}
.server-card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -25%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--card-glow, rgba(88, 101, 242, 0.16)), transparent 70%);
  pointer-events: none;
}
.server-name {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.server-kicker {
  margin: 0.3rem 0 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--card-accent, var(--accent-bright));
}
.server-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.server-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-muted);
}
.server-features svg { width: 16px; height: 16px; flex: none; margin-top: 0.22rem; color: var(--card-accent, var(--accent-bright)); }

/* --------------------------------------------------------------- Tính năng */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 1.1rem;
}
.feature { padding: 1.5rem; }
.feature-icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(88, 101, 242, 0.14);
  border: 1px solid rgba(88, 101, 242, 0.28);
  color: var(--accent-bright);
  margin-bottom: 1rem;
}
.feature-icon svg { width: 20px; height: 20px; }
.feature h3 { font-size: 1.02rem; }
.feature p { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--text-muted); }

/* --------------------------------------------------------------- Dịch vụ */
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
.service-card { display: flex; flex-direction: column; padding: 1.9rem; }
.service-top { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; }
.service-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(88, 101, 242, 0.14);
  border: 1px solid rgba(88, 101, 242, 0.28);
  color: var(--accent-bright);
  flex: none;
}
.service-icon svg { width: 22px; height: 22px; }
.service-host {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.service-card p { margin: 0 0 1.1rem; font-size: 0.94rem; color: var(--text-muted); }
.service-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.service-tags li {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--accent-soft);
  background: rgba(88, 101, 242, 0.12);
  border: 1px solid rgba(88, 101, 242, 0.22);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
}
.service-card .btn { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------- Liên hệ */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.contact-card { display: flex; align-items: center; gap: 1.1rem; padding: 1.6rem; }
.contact-icon {
  width: 48px; height: 48px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(88, 101, 242, 0.14);
  border: 1px solid rgba(88, 101, 242, 0.28);
  color: var(--accent-bright);
}
.contact-icon svg { width: 23px; height: 23px; }
.contact-label { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.contact-value { display: block; font-size: 1.02rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-card .contact-body { min-width: 0; }

/* --------------------------------------------------------------- Chân trang */
.footer {
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  padding: 3.5rem 0 2rem;
  margin-top: 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
@media (max-width: 760px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }
.footer-about p { margin: 1rem 0 0; font-size: 0.9rem; color: var(--text-muted); max-width: 28rem; }
.footer h2 {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1rem;
  font-weight: 700;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer ul a, .footer ul button {
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-muted);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast) var(--ease-standard);
}
.footer ul a:hover, .footer ul button:hover { color: var(--text); }
.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--text-dim);
}

/* --------------------------------------------------------------- Thông báo nổi */
.toast-region {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  pointer-events: none;
  width: min(92vw, 26rem);
}
.toast {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  padding: 0.85rem 1.15rem;
  border-radius: var(--radius-sm);
  background: rgba(12, 12, 20, 0.96);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  font-size: 0.9rem;
  font-weight: 500;
  animation: toast-in var(--transition-slow) var(--ease-standard);
}
.toast.is-leaving { animation: toast-out var(--transition-base) var(--ease-standard) forwards; }
.toast svg { width: 18px; height: 18px; flex: none; }
.toast[data-tone="success"] { border-color: rgba(52, 211, 153, 0.4); }
.toast[data-tone="success"] svg { color: var(--online-soft); }
.toast[data-tone="info"] svg { color: var(--accent-bright); }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

/* --------------------------------------------------------------- Hiệu ứng xuất hiện */
/* Chỉ ẩn khi JavaScript thực sự chạy — nếu script không tải được, toàn bộ nội
   dung vẫn hiển thị bình thường thay vì trắng trang. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--transition-slow) var(--ease-standard),
              transform var(--transition-slow) var(--ease-standard);
}
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================================================================
   MOTD — tái hiện dòng giới thiệu máy chủ đúng như trong Minecraft.

   Khoảng trắng ở đây LÀ bố cục: tác giả MOTD căn giữa bằng dấu cách, nên
   `white-space: pre` là bắt buộc và tuyệt đối không được xuống dòng tự động.
   Khi màn hình hẹp, motd.js thu nhỏ cả khối theo tỉ lệ thay vì ngắt dòng.
   =========================================================================== */
.motd {
  margin-top: 1.15rem;
  padding: 0.95rem 0.9rem;
  min-height: 5.25rem;
  height: var(--motd-scaled-height, auto);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.motd-stage {
  transform-origin: center top;
  /* Hộp của stage phải bằng đúng bề rộng nội dung thật (max-content). Nếu để
     width:100%, phần chữ dài hơn khung sẽ tràn sang phải và phép thu nhỏ quanh
     tâm hộp không kéo nó về giữa được — đuôi dòng vẫn bị cắt. */
  width: max-content;
  max-width: none;
  /* Bảng chữ gần với font Minecraft nhất trong số font hệ thống, và quan
     trọng hơn: bề rộng ký tự cố định giúp phần căn giữa bằng dấu cách của
     tác giả MOTD giữ đúng tỉ lệ. */
  font-family: ui-monospace, 'DejaVu Sans Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-muted);
  /* Mặc định căn trái: khi MOTD không phải kiểu căn giữa, mọi dấu cách là bố
     cục do tác giả đặt và phải được vẽ đúng vị trí. */
  text-align: left;
}

/* Chỉ căn giữa khi OneShield xác định phần đệm đầu dòng đúng là để căn giữa —
   lúc đó phần đệm đã bị cắt ở phía máy chủ, nên CSS mới là thứ căn chỉnh. */
.motd-stage.is-centered { text-align: center; }

.motd-line {
  white-space: pre;
  display: block;
  min-height: 1.5em;
}

.motd-plain {
  white-space: normal;
  color: var(--text-dim);
}

.motd-obfuscated {
  /* Chữ ngẫu nhiên đổi liên tục — khoá bề rộng để dòng không giật. */
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   Trình xem skin 3D
   =========================================================================== */
.skin-viewer {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-width: 240px;
  margin-inline: auto;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 50% 88%, rgba(88, 101, 242, 0.22), transparent 62%),
    rgba(0, 0, 0, 0.26);
  border: 1px solid var(--border);
  overflow: hidden;
  /* Cho phép cuộn trang bằng ngón tay dọc theo nhân vật; OrbitControls chỉ
     nhận thao tác xoay ngang. */
  touch-action: pan-y;
}

.skin-canvas { display: block; width: 100% !important; height: 100% !important; }

.skin-viewer .skin-hint {
  position: absolute;
  left: 50%;
  bottom: 0.55rem;
  transform: translateX(-50%);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
  transition: opacity var(--transition-base) var(--ease-standard);
  pointer-events: none;
}
.skin-viewer.is-ready:hover .skin-hint { opacity: 1; }

.skin-viewer .skin-spinner {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
}
.skin-viewer.is-loading .skin-spinner { display: grid; }
.skin-spinner::after {
  content: "";
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--accent-bright);
  animation: skin-spin 0.8s linear infinite;
}
@keyframes skin-spin { to { transform: rotate(360deg); } }

/* `display:grid` out-specifies the UA rule for [hidden], so the fallback must
   be hidden by default and only revealed on failure — otherwise the message
   shows underneath a perfectly working 3D model. */
.skin-viewer .skin-fallback { display: none; }
.skin-viewer.is-failed .skin-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}
.skin-fallback img {
  width: 84px; height: 84px;
  image-rendering: pixelated;
  border-radius: 10px;
  border: 1px solid var(--border);
}

/* ===========================================================================
   Thẻ nhân sự — nhân vật 3D là trung tâm của thẻ
   =========================================================================== */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }

.staff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.9rem 1.6rem 1.6rem;
}
.staff-card .staff-body { width: 100%; margin-top: 1.2rem; }
.staff-name { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.staff-roles {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  justify-content: center;
  margin: 0.7rem 0 0.9rem; padding: 0; list-style: none;
}
.staff-roles li {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  border-radius: 999px; padding: 0.26rem 0.65rem;
  color: var(--text-muted); background: var(--surface-strong); border: 1px solid var(--border);
}
.staff-roles li.is-owner {
  color: var(--warn); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.28);
}
.staff-card .staff-body p { margin: 0; font-size: 0.92rem; color: var(--text-muted); }

.staff-actions {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  justify-content: center; margin-top: 1.35rem;
}
.staff-actions .btn { font-size: 0.88rem; padding: 0.65rem 1.15rem; }

/* ===========================================================================
   Trang portfolio
   =========================================================================== */
.portfolio-hero { padding: 4rem 0 3rem; }
.portfolio-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 2.75rem;
  align-items: center;
}
@media (max-width: 780px) {
  .portfolio-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; justify-items: center; text-align: center; }
  .portfolio-hero .portfolio-roles { justify-content: center; }
  .portfolio-hero .portfolio-actions { justify-content: center; }
}
.portfolio-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing: -0.035em;
}
.portfolio-hero h1 .grad {
  background: linear-gradient(120deg, #fff 10%, var(--accent-soft) 50%, var(--accent-bright) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portfolio-lede { margin: 1.1rem 0 0; color: var(--text-muted); font-size: 1.03rem; max-width: 40rem; }
.portfolio-roles { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.portfolio-roles li {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 0.32rem 0.8rem; border-radius: 999px;
  color: var(--accent-soft); background: rgba(88, 101, 242, 0.12); border: 1px solid rgba(88, 101, 242, 0.24);
}
.portfolio-roles li.is-lead { color: var(--warn); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.28); }
.portfolio-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.75rem; }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.stat-strip .card { padding: 1.25rem; text-align: center; }
.stat-strip .k { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent-soft); }
.stat-strip .v { display: block; margin-top: 0.2rem; font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }

.prose { max-width: 46rem; }
.prose p { color: var(--text-muted); margin: 0 0 1rem; }
.prose p:last-child { margin-bottom: 0; }

.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.skill-card { padding: 1.5rem; }
.skill-card h3 { font-size: 1.02rem; margin-bottom: 0.55rem; }
.skill-card p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.skill-card .skill-icon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 11px; margin-bottom: 0.95rem;
  background: rgba(88, 101, 242, 0.14); border: 1px solid rgba(88, 101, 242, 0.28); color: var(--accent-bright);
}
.skill-card .skill-icon svg { width: 19px; height: 19px; }

.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.tag-cloud li {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  transition: border-color var(--transition-fast) var(--ease-standard), color var(--transition-fast) var(--ease-standard);
}
.tag-cloud li:hover { color: var(--text); border-color: var(--border-strong); }
/* "và nhiều hơn nữa…" — gợi ý còn nữa mà không liệt kê hết, nên bỏ khung hộp
   và để chữ thường nghiêng cho khác với các thẻ công nghệ. */
.tag-cloud li.tag-more {
  font-family: inherit;
  font-style: italic;
  color: var(--text-dim);
  background: none;
  border-color: transparent;
}
.tag-cloud li.tag-more:hover { color: var(--text-muted); border-color: transparent; }

/* Dòng thời gian */
.timeline { position: relative; padding-left: 1.75rem; margin: 0; list-style: none; }
.timeline::before {
  content: ""; position: absolute; left: 5px; top: 0.4rem; bottom: 0.4rem;
  width: 1px; background: linear-gradient(180deg, var(--accent), transparent);
}
.timeline li { position: relative; padding-bottom: 1.8rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -1.75rem; top: 0.45rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent-bright);
}
.timeline .t-when {
  display: block; font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-soft);
}
.timeline .t-what { display: block; margin-top: 0.3rem; font-weight: 650; font-size: 1rem; }
.timeline .t-desc { display: block; margin-top: 0.35rem; font-size: 0.9rem; color: var(--text-muted); }

/* Trích dẫn / triết lý */
.quote {
  border-left: 2px solid var(--accent);
  padding: 0.4rem 0 0.4rem 1.4rem;
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--text);
}
.quote cite { display: block; margin-top: 0.8rem; font-size: 0.85rem; font-style: normal; color: var(--text-dim); }

/* TikTok */
.tiktok-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.75rem;
  align-items: center;
  padding: 2rem;
  background: linear-gradient(120deg, rgba(255, 0, 80, 0.10), rgba(0, 242, 234, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 700px) { .tiktok-card { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } }
.tiktok-card h3 { font-size: 1.35rem; }
.tiktok-card p { margin: 0.6rem 0 0; color: var(--text-muted); font-size: 0.95rem; }
.tiktok-handle {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text); font-weight: 600;
}
.btn-tiktok { background: #fe2c55; color: #fff; }

/* OneShield — biểu tượng khiên động trong bảng số liệu trực tiếp */
.shield-mark {
  position: relative;
  height: 128px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.1rem 0 1.15rem;
}
.shield-mark .ring {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(124, 156, 255, 0.35);
  animation: shield-pulse 3.2s var(--ease-standard) infinite;
}
.shield-mark .ring.r2 { animation-delay: 1.05s; }
.shield-mark .ring.r3 { animation-delay: 2.1s; }
@keyframes shield-pulse {
  0% { transform: scale(0.55); opacity: 0.65; }
  100% { transform: scale(1.5); opacity: 0; }
}
.shield-mark svg {
  position: relative;
  z-index: 1;
  width: 52px;
  height: 52px;
  color: var(--accent-bright);
  filter: drop-shadow(0 0 20px rgba(88, 101, 242, 0.55));
}
.js .shield-mark .ring { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .shield-mark .ring { animation: none; opacity: 0.3; } }

/* Bảng số liệu 2x2 (biến thể của .status-stats cho 4 chỉ số) */
.status-stats.is-quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Dải thanh tỉ lệ — trực quan hoá số liệu theo thời gian thực, không cần thư viện biểu đồ */
.metric-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.metric-bars .m-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}
.metric-bars .m-label { color: var(--text-muted); }
.metric-bars .m-value {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metric-bars .m-track {
  height: 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--border);
  overflow: hidden;
}
.metric-bars .m-fill {
  height: 100%;
  border-radius: 999px;
  width: 4%;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transition: width 900ms var(--ease-standard);
}

/* OneShield — khối mã lệnh (ví dụ API) */
.code-block {
  overflow-x: auto;
  margin: 0;
  padding: 1.25rem 1.4rem;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.65;
  color: var(--accent-soft);
}
.code-block .tok-cmd { color: var(--text-dim); }
.code-block .tok-str { color: var(--online-soft); }

/* OneShield — sơ đồ luồng kiến trúc (Player -> Master -> Peer -> Backend) */
.arch-flow {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.arch-flow li {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.arch-flow .a-role {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.arch-flow .a-what { font-weight: 650; font-size: 1rem; }
.arch-flow .a-desc { font-size: 0.85rem; color: var(--text-muted); }
.arch-flow .a-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  padding: 0 0.1rem;
}
.arch-flow .a-arrow svg { width: 20px; height: 20px; }
@media (max-width: 760px) {
  .arch-flow { flex-direction: column; }
  .arch-flow .a-arrow svg { transform: rotate(90deg); }
}

/* OneShield — nhãn tầng dữ liệu trong section cơ chế */
.mechanism-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.mechanism-list li {
  padding: 1.1rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.mechanism-list strong { display: block; margin-bottom: 0.3rem; color: var(--text); }
.mechanism-list span { font-size: 0.9rem; color: var(--text-muted); }
.btn-tiktok:hover { background: #e11d48; }