* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #000; min-height: 100vh; overflow-x: hidden; } /* Đồng bộ với script trong index.html — ẩn overlay khi đã có access_token (tránh nháy khi F5) */ html.session-has-token .login-overlay { display: none !important; } /* Page Wrapper - Flex layout for banners */ .page-wrapper { display: flex; width: 100%; max-width: 100%; min-height: 100vh; min-height: 100dvh; justify-content: center; } /* Banner Styles */ .banner { flex: 1; min-width: 0; min-height: 100vh; background: #000; overflow: hidden; } .banner-content { width: 100%; height: 100vh; position: sticky; top: 0; } .banner-content img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Game Area - Center section (593px khi có banner hai bên) */ .game-area { width: 593px; flex-shrink: 0; min-height: 100vh; min-height: 100dvh; position: relative; overflow: hidden; } /* Game Background — inset:0 ổn định hơn height:100% khi .game-area chỉ có min-height */ .game-background { position: absolute; inset: 0; z-index: 0; background-image: url('../assets/images/game-background.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Lớp tối nhẹ trên nền game: làm nổi form login, không che .login-overlay (z-index cao hơn) */ .game-background::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.66) 100% ); } /* Iframe game nằm trong chính .game-background, mặc định ẩn */ .game-background__frame { position: absolute; inset: 0; z-index: 0; display: none; width: 100%; height: 100%; border: 0; background: #000; } .game-background.is-game-active { background-image: none; } .game-background.is-game-active::after { display: none; } .game-background.is-game-active .game-background__frame { display: block; } /* Login Overlay */ .login-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; z-index: 10; } /* Login Box */ .login-box { background: #fff; border: 2px solid #4a90d9; border-radius: 8px; padding: 25px; width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .login-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .login-header--solo { justify-content: flex-start; } .login-title { font-size: 18px; font-weight: 600; color: #333; } .register-link { color: #4a90d9; text-decoration: none; font-size: 14px; font-weight: 500; } .register-link:hover { text-decoration: underline; } /* Form Styles */ .login-form, .register-form, .link-account-form { display: flex; flex-direction: column; gap: 15px; } /* Error Message */ .error-message { display: flex; align-items: center; gap: 10px; background: #fee2e2; border: 1px solid #fca5a5; border-radius: 4px; padding: 12px 15px; margin-bottom: 5px; } .error-icon { width: 20px; height: 20px; flex-shrink: 0; display: block; } .error-text { font-size: 14px; color: #dc2626; line-height: 1.4; } /* Input Group */ .input-group { position: relative; } .input-group input { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; color: #333; background: #fff; transition: border-color 0.3s; } .input-group input:focus { outline: none; border-color: #4a90d9; } .input-group input::placeholder { color: #999; } .toggle-password { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; } .eye-icon { width: 22px; height: 22px; display: block; } /* Buttons */ .btn-login { background: #4a7fc4; color: #fff; border: none; padding: 15px; border-radius: 4px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background 0.3s; } .btn-login:hover { background: #3a6fb4; } .forgot-password { text-align: center; color: #4a90d9; text-decoration: none; font-size: 14px; } .forgot-password:hover { text-decoration: underline; } /* Social Login inside Login Box */ .social-login { margin-top: 20px; padding-top: 15px; border-top: 1px solid #eee; display: flex; flex-direction: column; gap: 12px; } .social-label { font-size: 14px; color: #666; margin-bottom: 5px; } .btn-social { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 15px; border-radius: 4px; font-size: 14px; font-weight: 500; cursor: pointer; transition: opacity 0.3s, transform 0.2s; border: 1px solid #ddd; } .btn-social:hover { opacity: 0.9; transform: translateY(-1px); } .social-icon { width: 20px; height: 20px; display: block; flex-shrink: 0; } .btn-facebook { background: #3b5998; color: #fff; border: none; } .btn-google { background: #fff; color: #666; } .btn-guest { background: #e8e8e8; color: #333; border: none; } /* Promo Text */ .promo-text { margin-top: 30px; text-align: center; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); } .promo-text p { font-size: 14px; line-height: 1.6; } .hot-text { color: #ff4444; font-weight: 700; } /* Modal Styles */ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 1000; } .modal-overlay.active { display: flex; } /* Popup thông báo game (bảo trì / chưa mở) — tông thông báo trung tính, không giống lỗi */ .modal-overlay--game-notice { z-index: 1002; } .game-notice-popup { max-width: 420px; padding: 24px; } .game-notice-popup__alert { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 18px 16px; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06); } .game-notice-popup__row { display: flex; align-items: flex-start; gap: 14px; } .game-notice-popup__icon { flex-shrink: 0; width: 28px; height: 28px; display: block; } .game-notice-popup__text { min-width: 0; } .game-notice-popup__title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #1e293b; line-height: 1.3; } .game-notice-popup__body { margin: 0; font-size: 15px; line-height: 1.55; color: #475569; } .btn-game-notice { width: 100%; margin-top: 18px; padding: 14px 16px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; color: #fff; background: #4a7fc4; transition: background 0.2s; } .btn-game-notice:hover { background: #3a6fb4; } .modal-content { background: #fff; border-radius: 8px; padding: 30px; width: 90%; max-width: 450px; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .modal-close { position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 28px; color: #999; cursor: pointer; line-height: 1; } .modal-close:hover { color: #333; } /* Modal liên kết: khung trong suốt, khối trắng + viền xanh giống .login-box; nút đóng nằm trong .login-box */ .modal-content--link-account { background: transparent; box-shadow: none; padding: 12px 16px 16px; max-width: 420px; } .modal-content--link-account .login-box--in-modal { position: relative; width: 100%; margin: 0 auto; } .modal-content--link-account .login-box--in-modal .login-header--solo { padding-right: 36px; } /* Hai cách liên kết: tạo mới | đăng nhập tài khoản đã có */ .link-account-mode-switch { display: flex; gap: 0; margin: 0 0 10px; padding: 4px; border-radius: 10px; background: #e8eef5; border: 1px solid #d0ddeb; } .link-account-mode-switch__btn { flex: 1; margin: 0; padding: 10px 8px; font-size: 13px; font-weight: 600; color: #4a5568; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; line-height: 1.25; text-align: center; } .link-account-mode-switch__btn:hover { color: #2d3748; } .link-account-mode-switch__btn.is-active { background: #fff; color: #2563eb; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } .link-account-mode-hint { margin: 0 0 14px; padding: 0 2px; font-size: 12px; line-height: 1.45; color: #64748b; } .modal-close--in-login { top: 8px; right: 10px; z-index: 2; } .modal-title { text-align: center; font-size: 22px; font-weight: 700; color: #333; margin-bottom: 25px; } /* Modal đăng ký: cùng khung / input / nút với form đăng nhập */ .modal-content--register { max-width: 380px; padding: 25px; border: 2px solid #4a90d9; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); } .modal-title--register { font-size: 18px; font-weight: 600; margin-bottom: 20px; } .btn-register { background: #4a7fc4; color: #fff; border: none; padding: 15px; border-radius: 4px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background 0.3s; } .btn-register:hover { background: #3a6fb4; } /* Nút float + nền mờ — desktop ẩn; mobile/iPad trong @media (max-width: 1366px) */ .profile-float-btn, .profile-float-backdrop { display: none; } body.float-disabled .profile-float-btn, body.float-disabled .profile-float-backdrop { display: none !important; } .profile-float-btn { align-items: center; justify-content: center; position: absolute; z-index: 199; width: 58px; height: 58px; border: none; border-radius: 50%; padding: 0; cursor: grab; background: linear-gradient(160deg, #2d2d2d, #121212); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; } .profile-float-btn.is-dragging { cursor: grabbing; transform: none; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); } .profile-float-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .profile-float-btn:active:not(.is-dragging) { transform: scale(0.96); } .profile-float-backdrop { position: absolute; inset: 0; z-index: 197; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); } /* Chưa đăng nhập / chưa có profile: ẩn HUD + nút float (bật khi body.profile-hud-active) */ body:not(.profile-hud-active) .user-profile-hud { display: none !important; } body:not(.profile-hud-active) .profile-float-btn, body:not(.profile-hud-active) .profile-float-backdrop { display: none !important; } /* --- Neo profile: góc trên phải; --profile-hud-scale chỉnh theo breakpoint --- */ .user-profile-hud { --profile-hud-scale: 0.82; position: fixed; right: max(16px, 3vw, env(safe-area-inset-right, 0px)); top: max(12px, env(safe-area-inset-top, 0px)); transform: scale(var(--profile-hud-scale)); transform-origin: top right; z-index: 200; pointer-events: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.55)); overflow: visible; max-width: calc(100vw - max(16px, 3vw, env(safe-area-inset-right, 0px)) - max(8px, env(safe-area-inset-left, 0px))); } /* * Khung banner (hẹp hơn Figma gốc 493). --bp-tall-y kéo dài dọc; nút có bù scaleY. */ .banner-profile { --bp-tall-y: 1.42; position: relative; width: 438px; max-width: min(438px, calc(100vw - 32px)); line-height: 0; overflow: visible; transform: scaleY(var(--bp-tall-y)); transform-origin: top center; } .banner-profile__art { display: block; width: 100%; height: auto; vertical-align: top; user-select: none; pointer-events: none; } /* Vùng nội dung — inset theo vùng đỏ trong PNG; căn giữa trong khung */ .banner-profile__content { position: absolute; left: 10%; right: 10%; top: 22%; bottom: 12%; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; min-height: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 20px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95); line-height: 1.25; pointer-events: auto; overflow: hidden; box-sizing: border-box; } /* TK và ID xếp dọc, căn giữa */ .user-hud-row--split { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 100%; flex-shrink: 0; } .user-hud-name { width: 100%; min-width: 0; text-align: center; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-hud-id { width: 100%; text-align: center; font-size: inherit; font-weight: 500; } .user-hud-row--email { width: 100%; text-align: center; min-height: 1.2em; flex-shrink: 0; font-size: 20px; } .user-hud-email-line { margin: 0; display: none; font-weight: 500; } .user-hud-email-label { margin-right: 4px; } .user-hud-email-value { word-break: break-all; } .user-hud-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-style: italic; font-size: 1em; cursor: pointer; } .user-hud-link:hover { color: #fde68a; } .banner-profile--has-email .user-hud-email-line { display: block; } .banner-profile--has-email .user-hud-link { display: none; } .user-hud-coin-row { display: flex; justify-content: center; align-items: center; width: 100%; margin: 6px 0 0; flex-shrink: 0; } /* Icon + số tiền gần nhau, cụm căn giữa */ .user-hud-coin-group { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 0; max-width: 100%; } /* Kéo số sát icon (ảnh coin thường có viền trong suốt) */ .user-hud-coin-group .user-hud-balance { margin-left: -22px; } /* Figma: icon 99×54 */ .user-hud-coin-img { margin-left: -22px; width: 99px; height: 54px; max-width: 100%; object-fit: contain; flex-shrink: 0; } /* Khi số dư = 0: icon xám nhưng giữ đúng kích thước như lúc có số (tránh max-width:100% co icon khi cụm hẹp) */ .user-hud-coin-group--zero { min-width: 99px; } .user-hud-coin-group--zero .user-hud-coin-img { filter: grayscale(1) brightness(0.92); opacity: 0.88; max-width: 99px; width: 99px; height: 54px; flex-shrink: 0; } /* Figma: dãy số (vàng) 32px */ .user-hud-balance { color: #fbbf24; font-weight: 700; font-size: 32px; letter-spacing: 0.02em; text-shadow: 0 0 5px rgba(251, 191, 36, 0.4); line-height: 1.1; } /* Figma: nút Nạp / Ưu đãi 172×50 — bù scaleY của .banner-profile để PNG không bị giãn dọc */ .banner-profile__actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-top: -4px; width: 100%; flex-shrink: 0; transform: scaleY(calc(1 / var(--bp-tall-y))); transform-origin: center center; } .user-hud-btn-img { display: block; width: 172px; height: 50px; max-width: 100%; margin: 0 auto; padding: 0; border: none; background: transparent; cursor: pointer; line-height: 0; overflow: hidden; } .user-hud-btn-img img { display: block; width: 172px; height: 50px; max-width: 100%; object-fit: contain; vertical-align: top; } .user-hud-btn-img:hover { filter: brightness(1.07); } .user-hud-btn-img:active { transform: scale(0.98); } .user-hud-logout { display: block; width: 100%; text-align: center; color: #fff; text-decoration: underline; text-underline-offset: 4px; font-size: 20px; cursor: pointer; flex-shrink: 0; line-height: 1.2; } .user-hud-logout:hover { color: #fde68a; } /* Màn hẹp (tablet dọc / mobile lớn): typography banner */ @media (max-width: 768px) { .banner-profile { --bp-tall-y: 1.34; max-width: min(438px, calc(100vw - 24px)); } .banner-profile__content { font-size: min(20px, 4vw); } .user-hud-row--email { font-size: min(20px, 4vw); } .user-hud-balance { font-size: min(32px, 6.5vw); } .user-hud-coin-img { width: min(99px, 24vw); height: auto; aspect-ratio: 99 / 54; } .user-hud-coin-group--zero { min-width: min(99px, 24vw); } .user-hud-coin-group--zero .user-hud-coin-img { width: min(99px, 24vw); max-width: min(99px, 24vw); height: auto; aspect-ratio: 99 / 54; } .user-hud-btn-img, .user-hud-btn-img img { width: min(172px, 88vw); height: auto; max-height: 50px; } .user-hud-logout { font-size: min(20px, 4vw); } } /* Điện thoại + iPad (≤1366px): nút float; profile ẩn đến khi mở (body.profile-panel-open) */ @media (max-width: 1366px) { .profile-float-btn { display: flex; bottom: max(18px, env(safe-area-inset-bottom, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); } body.profile-panel-open .profile-float-backdrop { display: block; } .user-profile-hud { --profile-hud-scale: 0.74; display: none; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%) scale(var(--profile-hud-scale)); transform-origin: center center; max-width: calc(100vw - max(16px, env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px))); } body.profile-hud-active.profile-panel-open .user-profile-hud { display: block !important; z-index: 198; } body.profile-panel-open { overflow: hidden; touch-action: none; } .banner-profile { --bp-tall-y: 1.3; max-width: min(438px, calc(100vw - 20px)); } .banner-profile__content { left: 10%; right: 10%; font-size: min(20px, 4.2vw); } .user-hud-balance { font-size: min(32px, 7vw); } .user-hud-coin-img { width: min(99px, 22vw); height: auto; aspect-ratio: 99 / 54; } .user-hud-coin-group--zero { min-width: min(99px, 22vw); } .user-hud-coin-group--zero .user-hud-coin-img { width: min(99px, 22vw); max-width: min(99px, 22vw); height: auto; aspect-ratio: 99 / 54; } .user-hud-btn-img, .user-hud-btn-img img { width: min(172px, 100%); height: auto; max-height: 50px; } } @media (max-width: 600px) { .user-profile-hud { --profile-hud-scale: 0.72; } } /* Desktop: profile góc phải khi đã đăng nhập; không dùng nút float */ @media (min-width: 1367px) { .profile-float-btn, .profile-float-backdrop { display: none !important; } body.profile-panel-open { overflow: visible; touch-action: auto; } body.profile-hud-active .user-profile-hud { display: block !important; } } /* Landscape màn thấp: chỉ desktop rộng (>1366) — neo góc trên phải; phone/iPad vẫn căn giữa */ @media (max-height: 520px) and (min-width: 1367px) { .user-profile-hud { --profile-hud-scale: 0.65; left: auto; top: max(6px, env(safe-area-inset-top, 0px)); bottom: auto; right: max(8px, env(safe-area-inset-right, 0px)); transform: scale(var(--profile-hud-scale)); transform-origin: top right; max-width: calc(100vw - max(8px, env(safe-area-inset-right, 0px)) - max(6px, env(safe-area-inset-left, 0px))); } } /* ≤1100px: ẩn banner trái/phải — khu game full width */ @media (max-width: 1100px) { .banner { display: none; } .game-area { width: 100%; max-width: 100%; flex: 1 1 auto; min-width: 0; } .banner-profile { max-width: min(438px, calc(100vw - 28px)); } } @media (max-width: 480px) { .login-overlay { padding: 15px; } .login-box { padding: 20px; } .login-title { font-size: 16px; } .modal-content { padding: 20px; } .modal-content--link-account { padding: 8px 8px 12px; } }