/* ==========================================================================
   GATE-ACCESS / YG88 CỔNG QUỐC TẾ - STYLESHEET
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. RESET & BASE LAYOUT
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #061208;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto', 'Be Vietnam Pro', sans-serif;
  overflow: hidden;
  padding-top: 35vh;
  position: relative;
}

/* Background image */
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. HEADER & LOGO AREA
   -------------------------------------------------------------------------- */
#logo-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 22px 0 5px;
  z-index: 20;
}

#logo-img {
  max-height: 165px;
  max-width: 510px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 12px rgba(255, 180, 0, 0.5));
}

.header-area {
  position: absolute;
  top: 22vh;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 10;
}

.header-title-wrap {
  position: relative;
  display: inline-block;
  text-align: center;
}

.header-title {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(24px, 3.8vw, 50px);
  font-weight: 900;
  letter-spacing: 0.12em;
  margin: 0;
  color: #E8A000;
  -webkit-text-stroke: 1px rgba(0, 0, 0, 0.6);
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(220, 140, 0, 0.6));
  position: relative;
  z-index: 2;
  line-height: 1.15;
}

.header-title-glow {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(24px, 3.8vw, 50px);
  font-weight: 900;
  letter-spacing: 0.12em;
  margin: 0;
  color: rgba(255, 180, 0, 0.2);
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  filter: blur(10px);
  line-height: 1.15;
}

.header-sub-wrap {
  margin-top: 8px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.header-sub {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: clamp(12px, 1.4vw, 16px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  text-align: center;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.3);
  border: 1.5px solid rgba(0, 0, 0, 0.85);
  border-radius: 6px;
  padding: 5px 18px;
  background: rgba(0, 0, 0, 0.3);
}

.header-divider-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.divider-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 180, 0, 0.7));
}

.divider-line.right {
  background: linear-gradient(90deg, rgba(255, 180, 0, 0.7), transparent);
}

.divider-diamond {
  width: 6px;
  height: 6px;
  border: 1.5px solid rgba(255, 180, 0, 0.8);
  transform: rotate(45deg);
  background: rgba(255, 180, 0, 0.2);
}

.divider-text {
  font-size: 10px;
  color: rgba(255, 180, 0, 0.75);
  letter-spacing: 0.3em;
  font-family: 'Courier New', monospace;
}

/* --------------------------------------------------------------------------
   3. CARDS ROW & STRUCTURE
   -------------------------------------------------------------------------- */
.cards-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.8vw, 24px);
  padding: 0 16px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  flex: 0 0 auto;
}

.card-outer {
  position: relative;
  width: clamp(200px, 20vw, 280px);
  min-width: 0;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  flex-shrink: 1;
}

.card-outer:hover {
  transform: translateY(-8px);
}

.border-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

.btrack {
  fill: none;
  stroke-width: 1.5;
}

@keyframes br {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -9999; }
}

.card {
  border-radius: 24px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.card::after {
  content: '';
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 140px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. GLOBE CONTAINERS & ROTATING RINGS
   -------------------------------------------------------------------------- */
.globe-wrap {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.ring1 {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  animation: spin-slow 8s linear infinite;
}

.ring1::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
}

.ring2 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  animation: spin-med 1.8s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
}

.ring3 {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  animation: spin-slow 3s linear infinite reverse;
}

@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes spin-med  { to { transform: rotate(360deg); } }

canvas.globe-canvas {
  border-radius: 50%;
  display: block;
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   5. CARD TYPOGRAPHY & STATS
   -------------------------------------------------------------------------- */
.sub {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.45);
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  margin-bottom: 3px;
  white-space: nowrap;
}

.name {
  font-size: 24px;
  font-weight: 900;
  color: #f5a800;
  letter-spacing: 0.12em;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 24px rgba(200, 120, 0, 0.7);
  margin-bottom: 5px;
}

.divider {
  width: 40px;
  height: 1px;
  margin: 6px 0 10px;
}

.stats {
  display: flex;
  gap: 0;
  width: 100%;
  margin-bottom: 16px;
}

.stat {
  flex: 1;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  padding: 4px 2px;
}

.stat:last-child {
  border-right: none;
}

.sl {
  font-size: 9.5px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-family: 'Courier New', monospace;
  display: block;
  margin-bottom: 4px;
}

.sv {
  font-size: 12px;
  font-weight: 700;
  color: #f5c518;
  font-family: 'Courier New', monospace;
  display: block;
}

.shield-blocks {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.blk {
  width: 5px;
  height: 10px;
  border-radius: 1px;
  animation: blk-pulse 1.8s ease-in-out infinite;
}

.blk:nth-child(2) { animation-delay: 0.15s; }
.blk:nth-child(3) { animation-delay: 0.3s; }
.blk:nth-child(4) { animation-delay: 0.45s; }
.blk:nth-child(5) { animation-delay: 0.6s; }
.blk:nth-child(6) { animation-delay: 0.75s; }

@keyframes blk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.star-row {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.star svg {
  width: 9px;
  height: 9px;
  filter: drop-shadow(0 0 3px #FFD700);
}

.btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
}

button.btn {
  all: unset;
  display: inline-block;
  padding: 9px 20px;
  border-radius: 8px;
  cursor: pointer;
  background: #ffffff;
  color: #111111;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  text-align: center;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
}

button.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  transform: skewX(-20deg);
  animation: shine 3.5s ease-in-out infinite;
}

@keyframes shine {
  0%, 65%, 100% { left: -60%; opacity: 0; }
  45% { left: 120%; opacity: 1; }
}

button.btn:hover {
  transform: scale(1.05) translateY(-1px);
}

/* Floating Particles */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: 24px;
}

.p {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: fp linear infinite;
}

@keyframes fp {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  20%  { opacity: 0.7; transform: translateY(-25px) scale(1); }
  100% { opacity: 0; transform: translateY(-90px) scale(0.3); }
}

/* --------------------------------------------------------------------------
   6. COUNTRY THEMES (Brazil, Singapore, Korea, Vietnam)
   -------------------------------------------------------------------------- */
/* Brazil */
.br .bt  { fill:none; stroke:#009C3B; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:110 9999; animation:br 2s linear infinite; filter:drop-shadow(0 0 6px #009C3B); }
.br .bt2 { fill:none; stroke:#FEDF00; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:55 9999; animation:br 2s linear infinite; animation-delay:-0.9s; filter:drop-shadow(0 0 4px #FEDF00); }
.br .bt3 { fill:none; stroke:rgba(255,255,255,0.6); stroke-width:1; stroke-linecap:round; stroke-dasharray:30 9999; animation:br 2s linear infinite; animation-delay:-1.5s; }
.br .btrack { stroke:rgba(0,156,59,0.12); }
.br .card { background:linear-gradient(160deg,rgba(0,10,3,0.55) 0%,rgba(0,5,1,0.65) 100%); border:1px solid rgba(0,156,59,0.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.br .card::after { background:radial-gradient(ellipse,rgba(0,156,59,0.18) 0%,transparent 70%); }
.br .ring1 { border:1px solid rgba(0,156,59,0.18); }
.br .ring1::before { border:1px dashed rgba(254,223,0,0.12); }
.br .ring2 { border-top-color:#009C3B; border-right-color:rgba(0,156,59,0.4); filter:drop-shadow(0 0 4px #009C3B); }
.br .ring3 { border-bottom-color:rgba(254,223,0,0.45); }
.br .divider { background:linear-gradient(90deg,transparent,rgba(0,156,59,0.7),transparent); }
.br .blk { background:#009C3B; box-shadow:0 0 5px rgba(0,156,59,0.9); }

/* Singapore */
.sg .bt  { fill:none; stroke:#C0001A; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:110 9999; animation:br 2s linear infinite; filter:drop-shadow(0 0 6px #C0001A); }
.sg .bt2 { fill:none; stroke:#ffffff; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:55 9999; animation:br 2s linear infinite; animation-delay:-0.9s; }
.sg .bt3 { fill:none; stroke:rgba(255,255,255,0.3); stroke-width:1; stroke-linecap:round; stroke-dasharray:30 9999; animation:br 2s linear infinite; animation-delay:-1.5s; }
.sg .btrack { stroke:rgba(192,0,26,0.12); }
.sg .card { background:linear-gradient(160deg,rgba(28,4,4,0.55) 0%,rgba(10,0,0,0.65) 100%); border:1px solid rgba(192,0,26,0.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.sg .card::after { background:radial-gradient(ellipse,rgba(192,0,26,0.18) 0%,transparent 70%); }
.sg .ring1 { border:1px solid rgba(192,0,26,0.18); }
.sg .ring1::before { border:1px dashed rgba(255,255,255,0.12); }
.sg .ring2 { border-top-color:#C0001A; border-right-color:rgba(192,0,26,0.4); filter:drop-shadow(0 0 4px #C0001A); }
.sg .ring3 { border-bottom-color:rgba(255,255,255,0.3); }
.sg .divider { background:linear-gradient(90deg,transparent,rgba(192,0,26,0.7),transparent); }
.sg .blk { background:#C0001A; box-shadow:0 0 5px rgba(192,0,26,0.9); }

/* Korea */
.kr .bt  { fill:none; stroke:#CD2E3A; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:110 9999; animation:br 2s linear infinite; filter:drop-shadow(0 0 6px #CD2E3A); }
.kr .bt2 { fill:none; stroke:#0047A0; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:55 9999; animation:br 2s linear infinite; animation-delay:-0.9s; filter:drop-shadow(0 0 4px #0047A0); }
.kr .bt3 { fill:none; stroke:rgba(255,255,255,0.4); stroke-width:1; stroke-linecap:round; stroke-dasharray:30 9999; animation:br 2s linear infinite; animation-delay:-1.5s; }
.kr .btrack { stroke:rgba(205,46,58,0.12); }
.kr .card { background:linear-gradient(160deg,rgba(5,5,24,0.55) 0%,rgba(2,2,12,0.65) 100%); border:1px solid rgba(205,46,58,0.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.kr .card::after { background:radial-gradient(ellipse,rgba(0,71,160,0.15) 0%,transparent 70%); }
.kr .ring1 { border:1px solid rgba(205,46,58,0.18); }
.kr .ring1::before { border:1px dashed rgba(0,71,160,0.15); }
.kr .ring2 { border-top-color:#CD2E3A; border-right-color:rgba(0,71,160,0.5); filter:drop-shadow(0 0 4px #CD2E3A); }
.kr .ring3 { border-bottom-color:rgba(0,71,160,0.4); }
.kr .divider { background:linear-gradient(90deg,transparent,rgba(205,46,58,0.7),transparent); }
.kr .blk { background:#0047A0; box-shadow:0 0 5px rgba(0,71,160,0.8); }

/* Vietnam */
.vn .bt  { fill:none; stroke:#DA251D; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:110 9999; animation:br 2s linear infinite; filter:drop-shadow(0 0 6px #DA251D); }
.vn .bt2 { fill:none; stroke:#f5c518; stroke-width:1.5; stroke-linecap:round; stroke-dasharray:55 9999; animation:br 2s linear infinite; animation-delay:-0.9s; filter:drop-shadow(0 0 4px #f5c518); }
.vn .bt3 { fill:none; stroke:rgba(255,255,255,0.6); stroke-width:1; stroke-linecap:round; stroke-dasharray:30 9999; animation:br 2s linear infinite; animation-delay:-1.5s; }
.vn .btrack { stroke:rgba(218,37,29,0.12); }
.vn .card { background:linear-gradient(160deg,rgba(28,4,4,0.55) 0%,rgba(10,0,0,0.65) 100%); border:1px solid rgba(218,37,29,0.3); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.vn .card::after { background:radial-gradient(ellipse,rgba(218,37,29,0.18) 0%,transparent 70%); }
.vn .ring1 { border:1px solid rgba(218,37,29,0.18); }
.vn .ring1::before { border:1px dashed rgba(245,197,24,0.12); }
.vn .ring2 { border-top-color:#DA251D; border-right-color:rgba(218,37,29,0.4); filter:drop-shadow(0 0 4px #DA251D); }
.vn .ring3 { border-bottom-color:rgba(245,197,24,0.45); }
.vn .divider { background:linear-gradient(90deg,transparent,rgba(218,37,29,0.7),transparent); }
.vn .blk { background:#DA251D; box-shadow:0 0 5px rgba(218,37,29,0.9); }

/* --------------------------------------------------------------------------
   7. CSKH 24/7 FLOATING WIDGET
   -------------------------------------------------------------------------- */
.ms-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ms-float:hover {
  transform: translateY(-6px);
}

.ms-ring-outer {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ms-spin1 {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 132, 255, 0.25);
  animation: spin-slow 8s linear infinite;
}

.ms-spin2 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #0084FF;
  border-right-color: rgba(168, 85, 247, 0.6);
  animation: spin-med 1.8s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
  filter: drop-shadow(0 0 6px #0084FF);
}

.ms-spin3 {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-bottom-color: rgba(168, 85, 247, 0.4);
  animation: spin-slow 3s linear infinite reverse;
}

.ms-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0084FF 0%, #A855F7 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 25px rgba(0, 132, 255, 0.6), 0 0 50px rgba(168, 85, 247, 0.3);
  position: relative;
  z-index: 2;
  transition: transform 0.3s, box-shadow 0.3s;
}

.ms-float:hover .ms-icon {
  transform: scale(1.08);
  box-shadow: 0 0 35px rgba(0, 132, 255, 0.8), 0 0 70px rgba(168, 85, 247, 0.5);
}

.ms-icon::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(0, 132, 255, 0.4);
  animation: ms-pulse 2s ease-out infinite;
}

@keyframes ms-pulse {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.25); opacity: 0; }
}

.ms-icon svg {
  width: 32px;
  height: 32px;
}

.ms-label {
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0, 132, 255, 0.8);
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE DESIGN (MOBILE & TABLET)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100dvh !important;
    justify-content: flex-start !important;
    padding-top: 0 !important;
    padding-bottom: 24px;
  }

  #logo-area {
    position: relative !important;
    padding: 18px 0 8px !important;
  }

  #logo-img {
    max-height: 75px !important;
    max-width: 85vw !important;
  }

  .header-area {
    position: relative !important;
    top: auto !important;
    padding: 8px 12px 14px !important;
  }

  .header-title,
  .header-title-glow {
    font-size: 22px !important;
    letter-spacing: 0.06em !important;
  }

  .header-sub {
    font-size: 10px !important;
    padding: 4px 10px !important;
  }

  .cards-row {
    flex-wrap: wrap !important;
    gap: 12px 10px !important;
    padding: 0 10px !important;
    justify-content: center !important;
  }

  .card-outer {
    width: calc(50% - 6px) !important;
    max-width: 220px !important;
    flex-shrink: 1 !important;
  }

  .card {
    padding: 8px 8px 10px !important;
  }

  .globe-wrap {
    width: 68px !important;
    height: 68px !important;
    margin-bottom: 6px !important;
  }

  canvas.globe-canvas {
    width: 56px !important;
    height: 56px !important;
  }

  .name {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 2px !important;
  }

  .sub {
    font-size: 6.5px !important;
    margin-bottom: 2px !important;
  }

  .divider {
    margin: 4px 0 6px !important;
  }

  .sv {
    font-size: 8.5px !important;
  }

  .sl {
    font-size: 6.5px !important;
    margin-bottom: 2px !important;
  }

  .stats {
    margin-bottom: 8px !important;
    gap: 4px !important;
  }

  .btn {
    font-size: 9px !important;
    padding: 6px 4px !important;
    letter-spacing: 0.06em !important;
  }

  .ms-float {
    bottom: 16px;
    right: 16px;
  }
}