@font-face{font-family:SF Pro Display;src:url('assets/fonts/SFPRODISPLAYBOLD.OTF') format('opentype');font-weight:700 900;font-display:swap}
.promotion{position:fixed;right:24px;width:144px;height:144px;z-index:10;filter:drop-shadow(0 8px 12px #0005)}.promotion-referral{bottom:36%}.promotion-prediction{bottom:16%}.promotion a,.promotion img{display:block;width:100%;height:100%;object-fit:contain}.promotion a{transition:transform .2s}.promotion a:hover{transform:scale(1.05)}.promotion[hidden]{display:none}.promotion-close{position:absolute;right:-16px;top:-16px;z-index:1;display:grid;place-items:center;width:28px;height:28px;padding:0 0 2px;border:1px solid #d1d5db;border-radius:50%;background:white;color:#6b7280;font:24px/1 Arial,sans-serif;box-shadow:0 2px 6px #0002}.promotion-close:hover{color:#ef4444;border-color:#fca5a5}@media(max-width:767px){.promotion{right:16px;width:96px;height:96px}.promotion-referral{bottom:31%}.promotion-prediction{bottom:14%}}
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#050b21;color:#fff;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}img{max-width:100%;user-select:none}button:focus-visible,a:focus-visible{outline:3px solid #00e5ff;outline-offset:4px}.svg-definitions{position:absolute;width:0;height:0;overflow:hidden}
.viewport{height:100dvh;min-height:480px;overflow:hidden;display:flex;justify-content:center;background:#050b21}.stage{display:flex;flex-direction:column;width:100%;height:100%;flex-shrink:0;transform-origin:top center}.site-header{position:relative;z-index:5;height:57px;flex-shrink:0;background:#fff;border-bottom:1px solid #ffffff38;display:flex;align-items:center}.header-inner{width:100%;margin:auto;padding:8px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;flex-shrink:0}.brand img{height:36px;width:auto;display:block}.navigation{display:flex;align-items:center;gap:8px}.navigation svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.navigation svg.filled{fill:currentColor}.nav-button{font-family:SF Pro Display,Arial,sans-serif;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 14px;border:0;border-radius:99px;background:linear-gradient(#4c98ff,#207dff);color:white;font-size:12px;font-weight:800;letter-spacing:.35px;white-space:nowrap;box-shadow:0 2px 4px #00000018;transition:filter .2s,transform .2s}.nav-button:hover,.image-button:hover,.mobile-navigation a:hover{filter:brightness(1.12)}.nav-button:active,.image-button:active,.mobile-navigation a:active{transform:scale(.96)}.sound-toggle{display:grid;place-items:center;padding:6px;border:0;border-radius:50%;color:#6b7280;background:#f3f4f6;transition:background .2s}.sound-toggle[aria-pressed=true]{color:#2563eb;background:#eff6ff;box-shadow:0 0 0 1px #3b82f64d}.desktop-link{display:none}
.hero{position:relative;flex:1;min-height:0;overflow:hidden}.hero-background{position:absolute;inset:0;display:block}.hero-background img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.mobile-navigation{position:relative;z-index:3;display:flex;justify-content:center;gap:12px;padding:8px 16px 0}.mobile-navigation a{display:block;transition:filter .2s,transform .2s}.mobile-navigation img{height:36px;width:auto;max-width:42vw;display:block;filter:drop-shadow(0 4px 6px #0005)}
.redemption{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:100%;margin:18px auto 0;padding:0 4px}.redemption h1{position:relative;z-index:3;margin:0 0 -20px;width:300px;max-width:96%;line-height:0}.title-art{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 12px #0005)}.form-panel{position:relative;width:345px;max-width:100%;transform:translateY(-10%);filter:drop-shadow(0 18px 20px #0006)}.panel-art,.panel-art img{display:block;width:100%;height:auto}.form-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:8px}#code-form{width:78%;display:flex;flex-direction:column;align-items:center}.field{width:100%;margin-bottom:8px}.field label{display:block;font-size:11px;font-weight:700;color:#ffdf7d;margin:0 0 4px 12px}.input-wrap{position:relative;width:100%}.input-wrap img{position:absolute;z-index:1;left:12px;top:50%;transform:translateY(-50%);height:20px;width:20px;object-fit:contain;pointer-events:none}.input-wrap input{display:block;height:36px;width:100%;border:1px solid #e5a84299;border-radius:99px;background:#250306e6;color:#fff2cc;padding:0 16px 0 36px;font-size:11px;box-shadow:inset 0 2px 4px #0003;transition:border-color .2s,box-shadow .2s}.input-wrap input::placeholder{color:#ffe6a366}.input-wrap input:focus{border-color:#ffd700;outline:0;box-shadow:0 0 0 2px #ffd70033}.input-wrap input[aria-invalid=true]{border-color:#ff7777}.field-error{display:block;color:#ffb9ae;font-size:10px;margin:2px 0 0 12px}.field-error:empty{display:none}.image-button{display:flex;align-items:center;justify-content:center;border:0;background:none;padding:0;max-width:100%;transition:filter .2s,transform .2s}.image-button img{display:block;object-fit:contain;width:auto;max-width:100%;filter:drop-shadow(0 3px 3px #0003)}.redeem-button{margin:2px 0 6px}.redeem-button img{height:44px}.distribution-link img{height:35px}
#coins{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
@media(min-width:375px) and (max-width:767px){.redemption h1{width:325px;margin-bottom:-24px}.form-panel{width:365px}}
@media(min-width:390px) and (max-width:767px){.brand img{height:40px}.nav-button{height:36px}.mobile-navigation img{height:40px}.redemption{margin-top:14px}.redemption h1{width:350px;margin-bottom:-28px}.form-panel{width:385px}.form-overlay{padding:12px}#code-form{width:76%}.field label{font-size:12px;margin-left:14px}.input-wrap img{left:0;width:35px;height:35px}.input-wrap input{height:38px;font-size:12px;padding-left:40px}.redeem-button img{height:48px}.distribution-link img{height:39px}}
@media(min-width:430px) and (max-width:767px){.redemption h1{width:385px;margin-bottom:-32px}.form-panel{width:415px}}
@media(min-width:768px){.viewport{min-height:0}.stage{width:1920px;height:100dvh}.site-header{height:80px}.header-inner{max-width:1536px;padding:12px 16px}.brand img{height:50px}.navigation{gap:16px}.navigation svg{width:20px;height:20px}.nav-button{height:42px;font-size:14px;gap:8px;padding:0 20px}.desktop-link{display:inline-flex}.sound-toggle{padding:8px}.mobile-navigation{display:none}.redemption{position:absolute;left:50%;top:50%;width:760px;margin:0;padding:0;transform:translate(-50%,-50%) scale(1.16)}.redemption h1{width:976px;max-width:none;margin-bottom:-40px}.form-panel{width:680px;max-width:none;transform:translateY(-15%)}.form-overlay{padding:24px}#code-form{width:48%}.field{margin-bottom:10px}.field label{font-size:14px;margin:0 0 4px 16px}.input-wrap img{left:0;width:44px;height:44px}.input-wrap input{height:42px;padding-left:48px;font-size:14px}.field-error{font-size:11px;margin-left:16px}.redeem-button{margin-bottom:8px}.redeem-button img{height:48px}.distribution-link img{height:40px}}
@media(max-width:767px) and (max-height:680px){.viewport{min-height:660px;height:100svh;overflow:visible}body{overflow-x:hidden}.hero{min-height:603px}}
@media(max-width:374px){.header-inner{padding-left:8px;padding-right:8px;gap:6px}.brand img{height:30px}.navigation{gap:6px}.navigation .nav-button{padding:0 10px;font-size:10px}.sound-toggle{padding:4px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}#coins{display:none}}

/* Original gold frame, with the page visible through its frosted center. */
#notice {
  width: 720px;
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
  aspect-ratio: 720 / 472;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  color: #fff;
}
#notice::backdrop { background: rgba(3,8,24,.74); backdrop-filter: blur(7px); }
#notice::before {
  content: "";
  position: absolute;
  inset: 6% 4% 5%;
  background: rgba(9,23,49,.32);
  backdrop-filter: blur(12px);
  border-radius: 8px;
}
.notice-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#notice .notice-content { position: absolute; inset: 0; padding: 0; display: block; }
#notice .close-notice {
  position: absolute;
  z-index: 2;
  top: 9%;
  right: 6%;
  display: grid;
  place-items: center;
  width: clamp(30px,8vw,54px);
  height: clamp(30px,8vw,54px);
  padding: 0 0 3px;
  border: 1px solid rgba(246,215,123,.25);
  border-radius: 50%;
  background: rgba(9,23,49,.85);
  color: #fff1c4;
  font: 300 clamp(24px,6vw,38px)/1 Arial,sans-serif;
}
#notice .close-notice:hover { background: #11244d; }
#notice h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#notice .notice-icon, .notice-success-icon {
  position: absolute;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  width: 16%;
  height: 24.4%;
}
#notice .notice-error-icon {
  display: grid;
  place-items: center;
  border: 2px solid #ffb0b066;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%,#ffcaca,#ff5c5c 45%,#aa1212);
  box-shadow: 0 12px 35px #ff3b3b45,inset 0 2px 10px #ffffff40;
}
.notice-error-icon::before { content: ""; position: absolute; inset: 4px; border: 1px solid #ffffff40; border-radius: 50%; }
.notice-error-icon svg { width: 53%; height: 53%; filter: drop-shadow(0 0 4px #fff6); }
.notice-success-icon { display: none; object-fit: contain; }
#notice p {
  position: absolute;
  left: 12%;
  top: 46%;
  width: 76%;
  min-height: 23%;
  margin: 0;
  padding: 2% 4%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ff8c8c59;
  border-radius: clamp(18px,6vw,36px);
  background: linear-gradient(#ff585829,#78121224);
  color: #fff1f1;
  font-family: Arial,Helvetica,sans-serif;
  font-weight: 600;
  font-size: clamp(14px,3.9vw,26px);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#notice .dismiss-notice {
  position: absolute;
  top: 77%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 34%;
  height: 14%;
  margin: 0;
  padding: 0 5%;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(#3e88ff,#1e56d9);
  box-shadow: inset 0 1px 8px #ffffff47,0 10px 30px #2563eb59;
  color: #fff;
  font-family: "SF Pro Display",Arial,sans-serif;
  font-size: clamp(14px,4vw,25px);
  font-weight: 900;
  letter-spacing: .12em;
  white-space: nowrap;
}
#notice .dismiss-notice:hover { filter: brightness(1.12); }
#notice[data-variant="success"] .notice-error-icon { display: none; }
#notice[data-variant="success"] .notice-success-icon { display: block; }
#notice[data-variant="success"] p { border-color: #84e9ff33; background: linear-gradient(#53c2ff1f,#53c2ff0d); color: #f5fbff; }
#notice[data-variant="success"] .dismiss-notice { background: linear-gradient(#3ac8ff,#2563eb); }
@media(max-height:480px) and (min-width:600px) { #notice { width: min(720px,calc((100dvh - 24px)*720/472)); } }

/* --- nối admin --- */
[hidden]{display:none!important}
.brand-text{font-family:SF Pro Display,Arial,sans-serif;font-weight:900;font-size:18px;letter-spacing:.5px;color:#1e56d9;white-space:nowrap}
.brand img{max-width:180px;object-fit:contain}
.redeem-button[aria-busy=true]{opacity:.6;cursor:wait}
#notice p{text-align:center!important}