/* Lớp chọn cổng trang chủ (2026-10-17). Chỉ hiện khi gate.js/inline head bật class g68-gate-open trên <html>. */
.g68-gate { display: none; }
html.g68-gate-open, html.g68-gate-open body { overflow: hidden !important; }
html.g68-gate-open .g68-gate {
  display: block; position: fixed; inset: 0; z-index: 2147483000;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #fff; line-height: 1.6; text-align: center;
  background: #05100f; transition: opacity .35s ease;
}
.g68-gate.g68-leaving { opacity: 0; pointer-events: none; }
.g68-gate *, .g68-gate *::before, .g68-gate *::after { box-sizing: border-box; margin: 0; padding: 0; }

.g68-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.g68-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px); transform: scale(1.08); animation: g68-pan 30s ease-in-out infinite alternate; }
.g68-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(0,60,56,.55), rgba(0,0,0,.82) 70%); }
@keyframes g68-pan { from { transform: scale(1.08) translateX(-2%); } to { transform: scale(1.15) translateX(2%); } }

.g68-inner { position: relative; z-index: 1; min-height: 100%; }
.g68-logo { padding-top: 28px; }
.g68-plate {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 56px 18px; border-radius: 0 0 28px 28px;
  background: linear-gradient(#1c1c1c, #000); border: 3px solid #ffd65a; border-top: 0;
  box-shadow: 0 6px 30px rgba(255,214,90,.35);
}
.g68-plate img { height: 64px; width: auto; max-width: 260px; display: block; object-fit: contain; }

.g68-wrap { max-width: 1300px; margin: 0 auto; padding: 40px 20px 80px; }
.g68-title { font-size: 2.6rem; font-weight: 800; line-height: 1.25; color: #ffd65a; text-shadow: 0 2px 10px rgba(0,0,0,.8); margin-bottom: 8px; }
.g68-sub { font-size: 1.2rem; color: #eee; margin-bottom: 56px; text-shadow: 0 2px 8px rgba(0,0,0,.7); }

.g68-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; max-width: 1050px; margin: 0 auto; }
.g68-card {
  display: block; width: 100%; font: inherit; color: inherit; text-align: center;
  background: rgba(255,255,255,.08); border-radius: 24px; padding: 40px 20px 45px;
  border: 1px solid rgba(255,255,255,.06); cursor: pointer; transition: .4s;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.g68-card:hover, .g68-card:focus-visible { transform: translateY(-10px); background: rgba(255,214,90,.12); outline: none; }

.g68-ring { display: block; width: 155px; height: 155px; margin: 0 auto 26px; position: relative; }
.g68-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.g68-ring-bg { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 14; }
.g68-ring-fg { fill: none; stroke: #ffd65a; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 440; animation: g68-ring 1.8s linear infinite; }
@keyframes g68-ring { from { stroke-dashoffset: 440; } to { stroke-dashoffset: 0; } }
.g68-flag {
  position: absolute; top: 50%; left: 50%; width: 98px; height: 98px;
  object-fit: cover; border-radius: 50%; border: 4px solid #ffd65a;
  box-shadow: 0 0 30px rgba(255,214,90,.6); animation: g68-spin 10s linear infinite;
}
@keyframes g68-spin { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } }

.g68-name { display: block; font-size: 1.4rem; font-weight: 700; color: #ffd65a; margin-bottom: 6px; text-shadow: 0 2px 6px rgba(0,0,0,.7); }
.g68-ping { display: block; font-size: .95rem; color: #cfeeea; margin-bottom: 6px; }
.g68-ping b { color: #20c7bd; }
.g68-btn {
  display: inline-block; margin-top: 14px; padding: 14px 30px;
  background: linear-gradient(90deg, #ffd65a, #ffaa00); color: #1a1200;
  font-weight: 700; font-size: 1.02rem; border-radius: 50px;
  box-shadow: 0 6px 20px rgba(255,214,90,.5); transition: .3s;
}
.g68-card:hover .g68-btn { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(255,214,90,.7); }
.g68-note { margin-top: 50px; color: #9fb5b2; font-size: .9rem; }

.g68-loading { display: none; position: fixed; inset: 0; z-index: 2; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(0,0,0,.88); }
.g68-gate.g68-busy .g68-loading { display: flex; }
.g68-spinner { width: 64px; height: 64px; border-radius: 50%; border: 6px solid rgba(255,255,255,.15); border-top-color: #ffd65a; animation: g68-spinner .8s linear infinite; }
@keyframes g68-spinner { to { transform: rotate(360deg); } }
.g68-loading p { color: #ffd65a; font-weight: 600; font-size: 1.1rem; }

@media (max-width: 860px) {
  .g68-grid { grid-template-columns: repeat(2, 1fr); }
  .g68-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
}
@media (max-width: 600px) {
  .g68-logo { padding-top: 0; }
  .g68-plate { padding: 8px 32px 10px; border-radius: 0 0 20px 20px; }
  .g68-plate img { height: 38px; max-width: 180px; }
  .g68-wrap { padding: 22px 12px 40px; }
  .g68-title { font-size: 1.35rem; margin-bottom: 4px; }
  .g68-sub { font-size: .85rem; margin-bottom: 22px; }
  .g68-grid { gap: 12px; }
  .g68-card { padding: 18px 8px 20px; border-radius: 18px; }
  .g68-card:hover, .g68-card:focus-visible { transform: none; }
  .g68-ring { width: 96px; height: 96px; margin-bottom: 12px; }
  .g68-flag { width: 60px; height: 60px; border-width: 3px; box-shadow: 0 0 16px rgba(255,214,90,.6); }
  .g68-name { font-size: 1rem; margin-bottom: 2px; }
  .g68-ping { font-size: .78rem; margin-bottom: 0; }
  .g68-btn { margin-top: 10px; padding: 9px 26px; font-size: .78rem; box-shadow: 0 4px 12px rgba(255,214,90,.45); }
  .g68-btn .g68-long { display: none; }
  .g68-note { margin-top: 28px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .g68-bg img, .g68-ring-fg, .g68-flag { animation: none; }
}