/* ===================================================================================================
   Giao diện trang chủ kiểu game: menu chính, màn chuẩn bị (nhân vật / chọn núi), cửa hàng và tủ đồ.
   Nạp sau style.css và ghi đè phần sảnh. Ngôn ngữ hình: nền tối, khung góc cắt, vạch HUD, chữ in hoa,
   màu nhấn hổ phách (hành động) và xanh ngọc (thông tin).
   =================================================================================================== */
:root {
  --gx-amber: #ffb347;
  --gx-amber-2: #ff7a3d;
  --gx-cyan: #5fe3d0;
  --gx-ink: #070a12;
  --gx-panel: rgba(9, 13, 22, 0.82);
  --gx-line: rgba(255, 255, 255, 0.14);
  --gx-cut: 14px;
}
.gx { --cut: polygon(var(--gx-cut) 0, 100% 0, 100% calc(100% - var(--gx-cut)), calc(100% - var(--gx-cut)) 100%, 0 100%, 0 var(--gx-cut)); }

/* ---------- thanh trên ---------- */
.gx .home-top { padding: 10px clamp(12px, 2vw, 26px); gap: 14px; background: linear-gradient(180deg, rgba(4, 6, 12, 0.85), rgba(4, 6, 12, 0)); }
.gx .logo-type b { font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; font-style: italic; }
.gx .logo-cloud { display: none; }
.gx .top-nav { border-radius: 0; padding: 0; background: none; border: 0; gap: 2px; }
.gx .top-nav button { height: 34px; border-radius: 0; padding: 0 16px; text-transform: uppercase; font-size: 12.5px; letter-spacing: 0.1em; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); background: rgba(255, 255, 255, 0.06); }
.gx .top-nav button.on { background: var(--gx-amber); color: #1c0f02; }
.gx .pill { border-radius: 0; background: rgba(95, 227, 208, 0.1); border-left: 3px solid var(--gx-cyan); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.gx.intro-mode #onlinePill, .gx.intro-mode .top-nav { display: none; }

/* ---------- menu chính ---------- */
.gx .intro.gm { position: absolute; inset: 0; overflow: hidden; display: block; }
.gx .intro.gm .intro-bg { position: absolute; inset: 0; background-size: cover; background-position: center 62%; filter: saturate(1.15) contrast(1.05); animation: gmDrift 60s ease-in-out infinite alternate; }
@keyframes gmDrift { from { transform: scale(1.06) translateX(-1.2%); } to { transform: scale(1.12) translateX(1.2%); } }
.gm-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(5, 7, 14, 0.94) 0%, rgba(5, 7, 14, 0.78) 30%, rgba(5, 7, 14, 0.18) 62%, rgba(5, 7, 14, 0.55) 100%),
  linear-gradient(180deg, rgba(5, 7, 14, 0.5) 0%, transparent 22%, transparent 68%, rgba(5, 7, 14, 0.95) 100%); }
.gm-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, rgba(95, 227, 208, 0.07) 1px, transparent 1px) 0 0 / 96px 96px; mask-image: linear-gradient(90deg, #000, transparent 70%); }

.gm-left { position: absolute; left: clamp(18px, 5vw, 84px); top: 50%; transform: translateY(-50%); width: min(430px, calc(100vw - 36px)); z-index: 3; animation: gmIn 0.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes gmIn { from { opacity: 0; transform: translate(-24px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.gm-kicker { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gx-cyan); }
.gm-kicker i { width: 34px; height: 2px; background: var(--gx-cyan); }
.gm-logo { margin: 0; display: flex; flex-direction: column; line-height: 0.84; font-size: clamp(64px, 9.5vw, 132px); font-weight: 900; font-style: italic; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; text-shadow: 0 0 1px #fff, 5px 5px 0 rgba(0, 0, 0, 0.55); }
.gm-logo em { font-style: italic; background: linear-gradient(95deg, var(--gx-amber) 10%, var(--gx-amber-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, 0.55)); padding-right: 0.12em; }
.gm-tag { margin: 14px 0 22px; font-size: 15px; color: rgba(236, 240, 250, 0.82); max-width: 360px; }

.gm-menu { display: flex; flex-direction: column; gap: 7px; }
.gm-btn { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 16px 11px 14px; border: 0; text-align: left; color: #eef1f8; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); border-left: 3px solid rgba(255, 255, 255, 0.28); transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease; cursor: pointer; }
.gm-btn > i { flex: none; width: 34px; text-align: center; font-style: normal; font-size: 20px; }
.gm-btn > i { display: grid; place-items: center; }
.gm-btn > i svg { width: 22px; height: 22px; }
.gm-btn.main > i svg { width: 20px; height: 20px; fill: currentColor; }
.gm-btn span { display: flex; flex-direction: column; min-width: 0; }
.gm-btn b { font-size: 16px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.gm-btn small { font-size: 12px; color: rgba(226, 232, 245, 0.62); }
.gm-btn small em { font-style: normal; color: inherit; font-weight: 700; }
.gm-btn::after { content: '▸'; margin-left: auto; opacity: 0; transform: translateX(-8px); transition: 0.16s ease; color: var(--gx-amber); font-size: 18px; }
.gm-btn:hover, .gm-btn:focus-visible { transform: translateX(10px); background: linear-gradient(90deg, rgba(255, 179, 71, 0.26), rgba(255, 179, 71, 0.04)); border-left-color: var(--gx-amber); outline: none; }
.gm-btn:hover::after, .gm-btn:focus-visible::after { opacity: 1; transform: none; }
.gm-btn.main { padding: 16px 16px 16px 14px; background: linear-gradient(95deg, var(--gx-amber), var(--gx-amber-2)); color: #1d0f02; border-left-color: #fff; box-shadow: 0 14px 40px rgba(255, 122, 61, 0.35); margin-bottom: 6px; }
.gm-btn.main b { font-size: 21px; letter-spacing: 0.12em; }
.gm-btn.main small { color: rgba(40, 20, 4, 0.75); font-size: 12.5px; }
.gm-btn.main > i { font-size: 18px; animation: gmPulse 1.4s ease-in-out infinite; }
.gm-btn.main::after { display: none; }
.gm-btn.main kbd { margin-left: auto; padding: 3px 9px; border: 1.5px solid rgba(40, 20, 4, 0.5); font: 700 12px/1.2 inherit; border-radius: 4px; }
.gm-btn.main:hover { filter: brightness(1.07); background: linear-gradient(95deg, var(--gx-amber), var(--gx-amber-2)); }
@keyframes gmPulse { 50% { transform: translateX(4px); } }

/* bảng chọn núi: cột thẻ "nhiệm vụ" bên phải */
.gx .intro-board.gm-missions { position: absolute; right: clamp(16px, 3.4vw, 56px); top: 50%; bottom: auto; left: auto; transform: translateY(-50%); width: min(340px, 30vw); max-width: none; padding: 0; border: 0; background: none; backdrop-filter: none; box-shadow: none; z-index: 3; display: block; animation: none; }
.gx .gm-missions .board-head { padding: 0 2px 10px; font-size: 11.5px; letter-spacing: 0.3em; color: var(--gx-cyan); border-bottom: 1px solid rgba(95, 227, 208, 0.35); margin-bottom: 10px; }
.gx .gm-missions .board-head b { border-radius: 0; background: var(--gx-cyan); color: #04211d; }
.gx .gm-missions .board-list { flex-direction: column; gap: 8px; }
.gx .gm-missions .pick { width: 100%; flex: none; padding: 0; gap: 0; border-radius: 0; border: 0; background: var(--gx-panel); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); min-height: 78px; transition: transform 0.16s ease, filter 0.16s ease; }
.gx .gm-missions .pick:hover { transform: translateX(-8px); filter: brightness(1.15); background: var(--gx-panel); }
.gx .gm-missions .pick.on { background: linear-gradient(90deg, rgba(255, 179, 71, 0.3), rgba(9, 13, 22, 0.86) 70%); box-shadow: none; }
.gx .gm-missions .pick.on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--gx-amber); z-index: 2; }
.gx .gm-missions .pick-art { width: 112px; border-radius: 0; box-shadow: none; }
.gx .gm-missions .pick-art::after { border-radius: 0; background: linear-gradient(90deg, transparent 50%, rgba(9, 13, 22, 0.9)); }
.gx .gm-missions .pick-body { padding: 9px 12px; }
.gx .gm-missions .pick-top b { font-size: 15.5px; letter-spacing: 0.06em; text-transform: uppercase; }

/* thanh trạng thái thế giới */
.gm-status { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: stretch; gap: 0; padding: 0 clamp(12px, 5vw, 84px); border-top: 1px solid var(--gx-line); background: rgba(4, 6, 12, 0.82); backdrop-filter: blur(8px); }
.gm-status .gs { display: flex; align-items: center; gap: 9px; padding: 11px 20px 11px 0; margin-right: 20px; border-right: 1px solid var(--gx-line); font-size: 13px; white-space: nowrap; color: #dfe5f2; }
.gm-status .gs small { font-size: 10px; letter-spacing: 0.22em; color: rgba(210, 218, 235, 0.55); font-weight: 800; }
.gm-status .gs b { font-weight: 700; }
.gm-status .gs.live { color: #b9f5cf; font-weight: 800; letter-spacing: 0.14em; font-size: 12px; }
.gm-status .gs.wide { flex: 1; border-right: 0; margin-right: 0; min-width: 0; }
.gm-status .gs.wide b { overflow: hidden; text-overflow: ellipsis; }
.gm-status .gs.hot small { color: var(--gx-amber); }
.gm-status .gs.hot b { color: var(--gx-amber); }
.gm-status .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fe39a; box-shadow: 0 0 0 4px rgba(95, 227, 154, 0.2); }

/* ---------- màn chuẩn bị: nhân vật / chọn núi ---------- */
.gx .brand h1 { text-transform: uppercase; font-style: italic; font-weight: 900; letter-spacing: -0.01em; text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.gx .brand .tagline { border-left: 3px solid var(--gx-cyan); padding-left: 10px; }
.gx .wiz-card { border-radius: 0; background: var(--gx-panel); border: 0; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); box-shadow: none; position: relative; }
.gx .wiz-card::before { content: ''; position: absolute; left: 0; top: 0; width: 64px; height: 3px; background: var(--gx-amber); }
.gx .wiz-card::after { content: ''; position: absolute; right: 0; bottom: 0; width: 64px; height: 3px; background: var(--gx-cyan); }
.gx .wiz-home { border-radius: 0; text-transform: uppercase; letter-spacing: 0.1em; font-size: 11.5px; }
.gx .wiz-crumb { color: var(--gx-cyan); letter-spacing: 0.24em; }
.gx .stepper { border-radius: 0; background: none; padding: 0; gap: 4px; border-bottom: 1px solid var(--gx-line); }
.gx .stepper li button { border-radius: 0; border: 0; background: rgba(255, 255, 255, 0.04); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-left: 20px; }
.gx .stepper li.on button, .gx .stepper li button[aria-current], .gx .stepper li.active button { background: linear-gradient(95deg, rgba(255, 179, 71, 0.32), rgba(255, 179, 71, 0.08)); box-shadow: inset 0 -3px 0 var(--gx-amber); border: 0; }
.gx .stepper .num { border-radius: 0; transform: skewX(-10deg); }
.gx .stepper .lbl b { text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; }
.gx .field > span { color: var(--gx-cyan); letter-spacing: 0.2em; font-size: 10.5px; }
.gx .field input, .gx #nameInput { border-radius: 0; border: 0; border-bottom: 2px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); }
.gx .field input:focus, .gx #nameInput:focus { border-bottom-color: var(--gx-amber); }
.gx .body-grid button, .gx .coat-grid button { border-radius: 0; border: 0; background: rgba(255, 255, 255, 0.06); border-left: 3px solid transparent; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.gx .body-grid button.on, .gx .coat-grid button.on { background: linear-gradient(90deg, rgba(255, 179, 71, 0.3), rgba(255, 179, 71, 0.06)); border-left-color: var(--gx-amber); box-shadow: none; }
.gx .chips button { border-radius: 0; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding: 7px 16px; border: 0; background: rgba(255, 255, 255, 0.08); }
.gx .chips button.on { background: var(--gx-amber); color: #1c0f02; }
.gx .swatches button { border-radius: 4px; transform: skewX(-8deg); }
.gx .ghost { border-radius: 0; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; font-weight: 700; }
.gx .primary, .smodal .primary { border-radius: 0; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; background: linear-gradient(95deg, var(--gx-amber), var(--gx-amber-2)); color: #1d0f02; box-shadow: none; }
.gx .face-btn { border-radius: 0; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.gx .map-card { border-radius: 0; border: 0; background: rgba(255, 255, 255, 0.05); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); border-left: 4px solid transparent; }
.gx .map-card.on { background: linear-gradient(90deg, rgba(255, 179, 71, 0.26), rgba(255, 179, 71, 0.04)); border-left-color: var(--gx-amber); box-shadow: none; }
.gx .map-card .cover { border-radius: 0; }
.gx .map-card .mn { text-transform: uppercase; letter-spacing: 0.04em; }
.gx .map-card .tick { border-radius: 0; transform: rotate(45deg) scale(0.8); }
.gx .stage-caption b { text-transform: uppercase; letter-spacing: 0.1em; font-style: italic; }
.gx .gear-summary { color: #cfd6e4; }

/* ---------- cửa hàng / tủ đồ ---------- */
.smodal { background: rgba(4, 6, 12, 0.78); }
.smodal-card { width: min(980px, 100%); padding: 0; border-radius: 0; border: 0; background: #0b101a; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); display: flex; flex-direction: column; max-height: 92vh; overflow: hidden; }
.smodal-card > .close { right: 30px; top: 12px; border-radius: 0; width: 34px; height: 34px; background: rgba(255, 255, 255, 0.08); z-index: 2; font-size: 15px; }
.smodal .stabs { margin: 0; padding: 12px 76px 0 18px; gap: 4px; background: linear-gradient(180deg, #121a2a, #0b101a); border-bottom: 1px solid var(--gx-line); flex: none; }
.smodal .stabs button { border-radius: 0; border: 0; padding: 11px 20px; font-size: 13.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255, 255, 255, 0.05); clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); color: #c5ccdb; }
.smodal .stabs button.on { background: var(--gx-amber); color: #1c0f02; }
.smodal .sbody { padding: 18px 20px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.scats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.scats button { padding: 6px 14px; border: 0; background: rgba(255, 255, 255, 0.07); color: #c5ccdb; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.scats button.on { color: var(--gx-cyan); border-bottom-color: var(--gx-cyan); background: rgba(95, 227, 208, 0.1); }
.smodal .sgrid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }
.smodal .sitem { padding: 0; gap: 0; border-radius: 0; border: 0; background: rgba(255, 255, 255, 0.05); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); transition: transform 0.15s ease, background 0.15s ease; }
.smodal .sitem:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.09); }
.smodal .sitem.feat { grid-column: span 2; background: linear-gradient(120deg, rgba(255, 179, 71, 0.16), rgba(95, 227, 208, 0.07)); }
.smodal .sitem.have { box-shadow: inset 3px 0 0 #4cc38a; }
.sart { position: relative; height: 92px; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 60%, rgba(255, 255, 255, 0.12), transparent 65%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent); }
.sart i { font-size: 46px; font-style: normal; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); }
.sitem.feat .sart { height: 112px; }
.sitem.feat .sart i { font-size: 60px; }
.sart .price, .sart .tag { position: absolute; right: 22px; top: 8px; padding: 3px 9px; font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.sart .price { background: var(--gx-amber); color: #1c0f02; }
.sart .tag { background: #2c8a5c; color: #eafff3; border-radius: 0; align-self: auto; }
.sinfo { padding: 10px 14px 4px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sinfo b { font-size: 14.5px; letter-spacing: 0.03em; text-transform: uppercase; }
.sinfo p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #b9c0cf; flex: none; }
.sinfo small { font-size: 11.5px; color: #e6c97a; }
.sprog { height: 4px; background: rgba(255, 255, 255, 0.12); margin-top: 4px; }
.sprog i { display: block; height: 100%; background: var(--gx-cyan); }
.sact { padding: 8px 14px 14px; }
.sact button { width: 100%; margin: 0; padding: 9px 10px; font-size: 13px; }
.sact .ghost { border: 1px solid var(--gx-line); background: none; color: #dfe5f2; border-radius: 0; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.sact .ghost:hover { border-color: var(--gx-amber); color: var(--gx-amber); }
.smodal .sitem button:disabled { opacity: 0.4; }
.smodal .muted.foot { margin-top: 14px; font-size: 12px; }
.smodal .snote { border-radius: 0; border: 0; border-left: 3px solid var(--gx-amber); background: rgba(255, 179, 71, 0.1); }
.smodal .snote.good { border-left-color: #4cc38a; background: rgba(76, 195, 138, 0.1); }
.smodal .snote.bad { border-left-color: #ff5a4f; background: rgba(255, 90, 79, 0.12); }

.swardrobe .srow { margin: 0 0 16px; }
.swardrobe .srow > span { font-size: 10.5px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gx-cyan); margin-bottom: 8px; }
.stiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.stile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px 10px; border: 0; background: rgba(255, 255, 255, 0.06); color: #e6eaf3; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); border-bottom: 3px solid transparent; text-align: center; transition: background 0.15s ease, transform 0.15s ease; }
.stile i { font-size: 30px; font-style: normal; }
.stile b { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.stile small { font-size: 11px; color: #9aa3b5; }
.stile:hover { background: rgba(255, 255, 255, 0.11); transform: translateY(-2px); }
.stile.on { background: linear-gradient(180deg, rgba(255, 179, 71, 0.28), rgba(255, 179, 71, 0.06)); border-bottom-color: var(--gx-amber); }
.stile.on small { color: var(--gx-amber); }
.stile.locked { opacity: 0.6; }
.stile.locked i { filter: grayscale(1); }
.stile.locked small { color: #e6c97a; }
.sswatches { display: flex; gap: 8px; }
.sswatches button { width: 44px; height: 34px; border: 2px solid rgba(255, 255, 255, 0.25); transform: skewX(-10deg); }
.sswatches button.on { border-color: var(--gx-amber); box-shadow: 0 0 0 2px rgba(255, 179, 71, 0.35); }
.sswatches button.locked { opacity: 0.4; }
.smodal .sdonate input { border-radius: 0; border: 0; border-bottom: 2px solid rgba(255, 255, 255, 0.25); }
.smodal .chips button { border-radius: 0; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); border: 0; background: rgba(255, 255, 255, 0.08); padding: 8px 18px; font-weight: 700; }
.smodal .chips button.on { background: var(--gx-amber); color: #1c0f02; }
.smodal .sboard li { border-radius: 0; border-left: 3px solid rgba(255, 255, 255, 0.18); }

/* ---------- màn hẹp ---------- */
@media (max-width: 1080px) {
  .gx .intro-board.gm-missions { display: none; }
}
@media (max-width: 760px) {
  .gm-left { top: auto; bottom: 62px; transform: none; left: 16px; animation-name: gmInM; }
  @keyframes gmInM { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .gm-shade { background: linear-gradient(180deg, rgba(5, 7, 14, 0.55) 0%, rgba(5, 7, 14, 0.25) 26%, rgba(5, 7, 14, 0.9) 58%, rgba(5, 7, 14, 0.98) 100%); }
  .gm-logo { font-size: clamp(56px, 19vw, 86px); }
  .gm-tag { margin: 8px 0 14px; font-size: 13.5px; }
  .gm-btn { padding: 8px 12px 8px 10px; }
  .gm-btn small { display: none; }
  .gm-btn.main small { display: block; }
  .gm-btn.main { padding: 13px 12px; }
  .gm-btn.main kbd { display: none; }
  .gm-status { padding: 0 14px; overflow: hidden; }
  .gm-status .gs { padding: 9px 12px 9px 0; margin-right: 12px; font-size: 12px; }
  .gm-status .gs small { display: none; }
  .gm-status .gs:nth-child(3) { display: none; }
  .smodal { padding: 0; align-items: flex-end; }
  .smodal-card { max-height: 94vh; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
  .smodal .stabs { padding: 10px 56px 0 10px; }
  .smodal .stabs button { padding: 10px 12px; font-size: 12px; letter-spacing: 0.04em; }
  .smodal-card > .close { right: 12px; }
  .smodal .sbody { padding: 14px 12px 20px; }
  .smodal .sgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .smodal .sitem.feat { grid-column: span 2; }
  .sart { height: 72px; }
  .sart i { font-size: 36px; }
  .stiles { grid-template-columns: repeat(3, 1fr); }
}
@media (max-height: 620px) and (min-width: 761px) {
  .gm-logo { font-size: clamp(52px, 12vh, 88px); }
  .gm-tag { margin: 8px 0 12px; }
  .gm-btn { padding: 7px 14px; }
  .gm-btn small { display: none; }
  .gm-btn.main small { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .gx .intro.gm .intro-bg, .gm-left, .gm-btn.main > i { animation: none !important; }
}

/* ---------- bảng lịch sự kiện (trang chủ và trong game) ---------- */
.ev-list { display: flex; flex-direction: column; gap: 6px; }
.ev-row { padding: 8px 12px; background: rgba(9, 13, 22, 0.78); border-left: 3px solid rgba(255, 255, 255, 0.2); }
.ev-row.live { border-left-color: var(--gx-amber); background: linear-gradient(90deg, rgba(255, 179, 71, 0.24), rgba(9, 13, 22, 0.8)); }
.ev-head { display: flex; align-items: center; gap: 8px; }
.ev-head i { font-style: normal; font-size: 17px; }
.ev-head b { font-size: 13.5px; letter-spacing: 0.04em; text-transform: uppercase; }
.ev-when { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--gx-cyan); white-space: nowrap; }
.ev-row.live .ev-when { color: var(--gx-amber); }
.ev-row small { display: block; margin-top: 2px; font-size: 11.5px; color: #9aa3b5; }
.ev-row p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #cfd6e4; }
.gx .gm-missions .board-head.ev { margin-top: 16px; }
.gx .gm-missions .board-head.ev b { background: none; color: rgba(210, 218, 235, 0.6); letter-spacing: 0.14em; }
#eventPanel .ev-list { margin: 10px 0 14px; }
#eventChip { pointer-events: auto; cursor: pointer; }
@media (max-height: 760px) { .gx .gm-missions .ev-row small { display: none; } .gx .gm-missions .pick { min-height: 62px; } }

/* ---------- chỉnh theo góp ý: logo "SĂN MÂY ONLINE", menu cuộn được, trang nhật ký không có thanh trên ---------- */
.gm-logo { line-height: 1.02; padding-top: 0.08em; }
.gm-logo span, .gm-logo em { display: block; margin-top: -0.14em; padding-top: 0.14em; }
.gm-logo small { display: block; margin-top: 0.1em; font-size: 0.2em; font-style: normal; font-weight: 800; letter-spacing: 0.62em; color: var(--gx-cyan); text-shadow: none; }
.gx .brand h1 small { display: block; font-size: 0.28em; font-style: normal; letter-spacing: 0.5em; color: var(--gx-cyan); text-shadow: none; margin-top: 2px; }
.gx .logo-type b small { margin-left: 6px; font-size: 10px; letter-spacing: 0.3em; color: var(--gx-cyan); font-style: normal; align-self: center; }
/* cột menu: nằm giữa thanh trên và thanh trạng thái, dài quá thì cuộn */
.gm-left { top: 64px; bottom: 52px; transform: none; display: flex; flex-direction: column; justify-content: safe center; overflow-y: auto; overflow-x: hidden; padding: 8px 14px 8px 0; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; animation-name: gmIn2; }
@keyframes gmIn2 { from { opacity: 0; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }
.gm-left > * { flex: none; }
.gm-btn:hover, .gm-btn:focus-visible { transform: translateX(6px); }
.gx .intro-board.gm-missions { top: 64px; bottom: 52px; transform: none; display: flex; flex-direction: column; justify-content: safe center; overflow-y: auto; scrollbar-width: thin; }
.gx .gm-missions .board-head.ev { margin-top: 0; }
@media (max-width: 760px) {
  .gm-left { top: 56px; bottom: 44px; left: 16px; right: 16px; width: auto; justify-content: flex-end; padding-right: 4px; }
  .gm-left { justify-content: safe flex-end; }
}
/* trang nhật ký: không hiện thanh trên (đã có nút "← Trang chủ" riêng) */
.gx.journal-mode .home-top { display: none; }
.gx.journal-mode .journal { padding-top: 18px; }
/* màn vừa và hẹp: bảng lịch bên phải ẩn đi (sự kiện sắp tới vẫn hiện ở thanh trạng thái dưới cùng) */
@media (max-width: 1080px) { .gx .intro-board.gm-missions { display: none; } }

/* ---------- cửa hàng / tủ đồ: khung xem trước nhân vật bên trái ---------- */
.sshell { display: grid; grid-template-columns: minmax(240px, 34%) 1fr; flex: 1; min-height: 0; }
.sshell.full { grid-template-columns: 1fr; }
.sshell.full .spreview { display: none; }
.spreview { position: relative; display: flex; flex-direction: column; align-items: center; padding: 10px 10px 14px; background: radial-gradient(70% 55% at 50% 52%, rgba(255, 179, 71, 0.16), transparent 72%), linear-gradient(180deg, #0f1625, #090d15); border-right: 1px solid var(--gx-line); min-height: 0; }
.spreview[hidden] { display: none; }
.spreview canvas { flex: 1; width: 100%; min-height: 0; display: block; cursor: grab; touch-action: pan-y; }
.spreview .cap { margin: 6px 0 2px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gx-amber); text-align: center; }
.spreview small { font-size: 11px; color: #8d96a8; text-align: center; }
.smodal-card { height: min(760px, 92vh); }
.shead { margin: 4px 0 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gx-cyan); }
.shead ~ .shead { margin-top: 20px; }
.smodal .sitem { cursor: pointer; }
.smodal .sitem.trying { box-shadow: inset 0 0 0 2px var(--gx-amber); }
.sart .tag.lock { background: rgba(255, 255, 255, 0.12); color: #fff; }
.sact { display: flex; gap: 6px; }
.sact button { flex: 1; }
.smodal .sgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 760px) {
  .sshell { grid-template-columns: 1fr; grid-template-rows: 34vh 1fr; }
  .sshell.full { grid-template-rows: 1fr; }
  .spreview { border-right: 0; border-bottom: 1px solid var(--gx-line); padding: 6px; }
  .spreview small { display: none; }
  .smodal-card { height: 94vh; }
}

/* =================== bố cục lại (đợt 3) =================== */
/* logo thống nhất: huy hiệu + chữ SĂN MÂY / ONLINE */
.gx .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.gx .logo-mark { width: 38px; height: 38px; }
.logo-word { display: flex; flex-direction: column; line-height: 0.95; }
.logo-word b { font-size: 19px; font-weight: 900; font-style: italic; letter-spacing: 0.02em; color: #fff; }
.logo-word b em { font-style: italic; color: var(--gx-amber); }
.logo-word small { font-size: 9.5px; font-weight: 800; letter-spacing: 0.5em; color: var(--gx-cyan); }

/* trang mở đầu: thanh trên chỉ còn nút đăng nhập ở góc phải; logo lớn đứng giữa, cố định */
#lobby.gx.intro-mode .home-top { position: absolute; left: auto; right: 0; top: 0; width: auto; z-index: 6; background: none; border: 0; padding: 14px clamp(12px, 2.4vw, 30px); }
#lobby.gx.intro-mode .home-top .logo { display: none; }
.gm-brand { position: absolute; left: 50%; top: clamp(18px, 5vh, 54px); transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; text-align: center; width: min(640px, calc(100vw - 32px)); pointer-events: none; animation: gmFade 0.6s ease both; }
@keyframes gmFade { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
.gm-mark { width: clamp(52px, 7vh, 76px); height: auto; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5)); margin-bottom: 8px; }
.gm-brand .gm-logo { display: flex; flex-direction: column; align-items: center; font-size: clamp(46px, 8vh, 92px); line-height: 0.95; padding: 0; }
.gm-brand .gm-logo span { display: block; margin: 0; padding: 0 0.06em; }
.gm-brand .gm-logo span em { display: inline; margin: 0; padding: 0 0.08em 0 0; }
.gm-brand .gm-logo small { font-size: 0.22em; letter-spacing: 0.7em; margin: 0.25em 0 0 0.7em; }
.gm-brand .gm-tag { margin: 10px 0 0; font-size: clamp(13px, 1.7vh, 15px); text-align: center; max-width: none; }

/* menu: cột giữa, nằm dưới logo, chỉ phần menu cuộn */
.gm-left { left: 50%; translate: -50% 0; top: var(--menu-top, 330px); bottom: 56px; width: min(460px, calc(100vw - 32px)); justify-content: flex-start; padding: 6px 8px 10px; animation: gmFade 0.6s 0.1s ease both; }
.gm-btn:hover, .gm-btn:focus-visible { transform: translateX(4px); }
@media (max-width: 1279px) { .gx .intro-board.gm-missions { display: none; } }
.gx .intro-board.gm-missions { top: clamp(90px, 14vh, 140px); }
.gm-shade { background: radial-gradient(60% 70% at 50% 45%, rgba(5, 7, 14, 0.6), rgba(5, 7, 14, 0.25) 70%), linear-gradient(180deg, rgba(5, 7, 14, 0.55) 0%, transparent 30%, transparent 62%, rgba(5, 7, 14, 0.95) 100%); }
@media (max-width: 760px) {
  #lobby.gx.intro-mode .home-top { padding: 10px 12px; }
  .gm-brand { top: 54px; }
  .gm-mark { width: 44px; margin-bottom: 4px; }
  .gm-brand .gm-logo { font-size: clamp(38px, 12vw, 56px); }
  .gm-brand .gm-tag { display: none; }
  .gm-left { top: var(--menu-top, 220px); bottom: 46px; left: 50%; right: auto; width: calc(100vw - 28px); justify-content: flex-start; }
}

/* màn nhân vật: tiêu đề màn thay cho logo, không còn thanh bước */
.gx .stepper { display: none; }
.gx .brand .screen-title { font-size: clamp(34px, 5vw, 64px); margin: 0; }

/* màn chọn núi: tách riêng, toàn màn hình, lưới thẻ núi lớn trên nền tranh của núi đang chọn */
.gx.maps-mode .hero { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; }
.gx.maps-mode .stage { flex: none; height: auto; min-height: 0; padding: clamp(16px, 3vh, 34px) clamp(16px, 4vw, 56px) 0; }
.gx.maps-mode #stageCanvas, .gx.maps-mode .stage-caption, .gx.maps-mode .stage-hint { display: none; }
.gx.maps-mode .brand { position: static; pointer-events: auto; }
.gx.maps-mode .wizard { flex: 1; min-height: 0; padding: 14px clamp(16px, 4vw, 56px) 18px; align-items: stretch; justify-content: center; }
.gx.maps-mode .wiz-card { width: min(1180px, 100%); max-width: none; max-height: none; height: 100%; display: flex; flex-direction: column; background: rgba(7, 10, 18, 0.72); backdrop-filter: blur(6px); }
.gx.maps-mode .maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gx.maps-mode .map-card { flex-direction: column; padding: 0; gap: 0; }
.gx.maps-mode .map-card .cover { width: 100%; aspect-ratio: 16 / 7; }
.gx.maps-mode .map-card .cover b { font-size: 14px; padding: 4px 10px; left: 12px; bottom: 10px; }
.gx.maps-mode .map-card .mc-body { padding: 12px 16px 14px; gap: 6px; }
.gx.maps-mode .map-card .mn { font-size: 20px; }
.gx.maps-mode .map-card .alt { white-space: normal; font-size: 13px; }
.gx.maps-mode .map-card .tick { right: 14px; top: 14px; width: 28px; height: 28px; }
.gx.maps-mode .wiz-foot { justify-content: flex-end; }
.gx.maps-mode .wiz-foot .ghost.big { flex: none; }
.gx.maps-mode .wiz-foot .primary { flex: 0 1 380px; }
.gx.maps-mode #startNote { text-align: right; }
@media (max-width: 760px) {
  .gx.maps-mode .maps { grid-template-columns: 1fr; }
  .gx.maps-mode .map-card .cover { aspect-ratio: 16 / 6; }
  .gx.maps-mode .wiz-foot .primary { flex: 1; }
  .gx.maps-mode #startNote { text-align: center; }
}

/* ---------- màn tải khi vào núi ---------- */
#loading { background: #05070c; overflow: hidden; transition: opacity 0.55s ease; }
#loading.out { opacity: 0; }
#loading .ld-bg { position: absolute; inset: -4%; background: #0d1326 center 60% / cover no-repeat; animation: ldZoom 18s ease-out both; filter: saturate(1.1); }
@keyframes ldZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
#loading .ld-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 14, 0.15) 0%, rgba(5, 7, 14, 0.2) 45%, rgba(5, 7, 14, 0.94) 82%); }
.ld-box { position: absolute; left: 50%; bottom: clamp(26px, 7vh, 70px); translate: -50% 0; width: min(620px, calc(100vw - 32px)); text-align: center; color: #eef1f8; }
/* chữ logo SĂN MÂY ONLINE trên màn tải (thay cho biểu tượng) */
#loading .ld-logo { position: absolute; top: clamp(28px, 9vh, 90px); left: 50%; translate: -50% 0; align-items: center; margin: 0; font-size: clamp(42px, 7vw, 80px); line-height: 0.95; white-space: nowrap; }
#loading .ld-logo span { display: block; margin: 0; padding: 0 0.06em; }
#loading .ld-logo span em { display: inline; margin: 0; padding: 0 0.08em 0 0; }
#loading .ld-logo small { font-size: 0.22em; letter-spacing: 0.7em; margin: 0.3em 0 0 0.7em; }
.ld-kicker { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gx-cyan); }
.ld-title { margin: 4px 0 2px; font-size: clamp(34px, 5.4vw, 60px); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em; text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.ld-sub { margin: 0 0 18px; font-size: 13.5px; color: rgba(230, 236, 248, 0.75); }
.ld-bar { height: 8px; background: rgba(255, 255, 255, 0.12); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); overflow: hidden; }
.ld-bar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--gx-amber), var(--gx-amber-2)); transition: width 0.35s ease; box-shadow: 0 0 18px rgba(255, 140, 70, 0.7); }
.ld-row { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12.5px; color: #c8cfdd; }
.ld-row b { font-size: 15px; color: var(--gx-amber); font-variant-numeric: tabular-nums; }
.ld-tip { margin: 16px auto 0; max-width: 520px; font-size: 13px; color: #aeb7c8; min-height: 2.6em; }

/* ---------- hướng dẫn người chơi mới ---------- */
#tutorial { position: fixed; inset: 0; z-index: 75; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 6, 12, 0.6); backdrop-filter: blur(3px); color: #eef1f8; }
.tt-card { width: min(480px, 100%); padding: 22px 22px 18px; background: #0d1220; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px)); border-top: 3px solid var(--gx-amber); animation: gmFade 0.3s ease both; }
.tt-step { font-size: 11px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gx-cyan); }
.tt-icon { font-size: 44px; margin: 8px 0 2px; }
.tt-card h3 { margin: 0 0 12px; font-size: 22px; font-weight: 900; font-style: italic; text-transform: uppercase; }
.tt-rows { display: flex; flex-direction: column; gap: 8px; }
.tt-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: rgba(255, 255, 255, 0.05); border-left: 3px solid rgba(255, 179, 71, 0.6); font-size: 14px; line-height: 1.4; }
.tt-row kbd { flex: none; min-width: 74px; padding: 4px 8px; text-align: center; font-family: inherit; font-weight: 800; font-size: 12.5px; line-height: 1.2; color: #1c0f02; background: var(--gx-amber); clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.tt-dots { display: flex; gap: 6px; justify-content: center; margin: 16px 0 12px; }
.tt-dots i { width: 22px; height: 4px; background: rgba(255, 255, 255, 0.2); }
.tt-dots i.on { background: var(--gx-amber); }
.tt-foot { display: flex; justify-content: space-between; gap: 10px; }
.tt-foot .ghost { border: 0; background: none; color: #9aa3b5; text-decoration: underline; }
.tt-foot .primary { width: auto; margin: 0; padding: 10px 22px; }
#helpPanel h2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#helpPanel h2 .ghost { font-size: 12px; }

/* ---------- cảnh báo không thao tác ---------- */
.idle-box { position: fixed; left: 50%; top: 50%; translate: -50% -50%; z-index: 80; width: min(400px, calc(100vw - 28px)); padding: 20px; text-align: center; background: #0d1220; color: #eef1f8; border-top: 3px solid var(--gx-amber); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); box-shadow: 0 0 0 100vmax rgba(4, 6, 12, 0.55); }
.idle-box b { font-size: 19px; }
.idle-box p { margin: 8px 0 12px; font-size: 14px; color: #c3cad8; }
.idle-count { font-size: 40px; font-weight: 900; color: var(--gx-amber); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.idle-box .primary { width: auto; margin: 0 auto; padding: 10px 22px; }
/* menu căn giữa: dùng transform để căn, còn hiệu ứng hiện ra chỉ dùng translate theo chiều dọc */
.gm-left { transform: translateX(-50%); translate: none; animation: gmFade 0.6s 0.1s ease both; }
.gx .body-grid button { font-size: 13.5px; line-height: 1.2; }
#lobby.gx.maps-mode .stage { height: auto; min-height: 0; max-height: none; }
@media (max-width: 760px) {
  #lobby.gx.maps-mode .hero { height: auto; min-height: 100dvh; }
  #lobby.gx.maps-mode .wiz-card { height: auto; }
  #lobby.gx.maps-mode .stage { padding: 18px 16px 0; }
  .gx .brand .screen-title { font-size: 34px; }
}

/* =================== bố cục trang chủ (đợt 4): menu bên trái, tên game ở giữa, đăng nhập nằm trong menu =================== */
#lobby.gx.intro-mode .home-top { display: none; }
.gm-brand { top: 50%; left: auto; right: clamp(16px, 4vw, 70px); width: auto; transform: translateY(-58%); align-items: center; }
.gm-brand .gm-logo { font-size: clamp(64px, 11vw, 168px); line-height: 0.88; }
.gm-brand .gm-logo small { font-size: 0.17em; margin-top: 0.4em; }
.gm-brand .gm-tag { font-size: clamp(14px, 1.4vw, 18px); margin-top: 16px; }
.gm-left { left: clamp(16px, 4vw, 70px); right: auto; top: 50%; bottom: auto; width: min(400px, 36vw); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); transform: translateY(-50%); justify-content: flex-start; }
/* tên game nằm giữa khoảng trống còn lại bên phải menu */
@media (min-width: 761px) {
  .gm-brand { left: calc(clamp(16px, 4vw, 70px) + min(400px, 36vw)); right: 0; transform: translateY(-58%); }
}
.gx .intro-board.gm-missions { display: none !important; }
@media (max-width: 760px) {
  .gm-brand { top: 34px; left: 0; right: 0; transform: none; }
  .gm-brand .gm-logo { font-size: clamp(42px, 13vw, 64px); }
  .gm-left { left: 14px; right: 14px; width: auto; top: auto; bottom: 46px; transform: none; max-height: calc(100dvh - 210px); }
}
.gm-btn[hidden] { display: none; }

/* điện thoại: bảng bản đồ và các bảng khác nổi trên nút chat, menu */
body.touch .modal:not([hidden]) { z-index: 30; }
body.touch #mapPanel .close, body.touch .modal .close { z-index: 2; }
/* nút đèn pin chỉ còn biểu tượng: tắt thì mờ và có gạch chéo */
#lampBtn.off { opacity: 0.6; }
#lampBtn.off::after { content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2.5px; background: #ff5a4f; transform: rotate(-40deg); border-radius: 2px; }
#lampBtn { position: relative; }
/* lịch sử thanh toán */
.shist h3 { margin: 0 0 12px; }
.shist-list { display: flex; flex-direction: column; gap: 6px; }
.shist-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: rgba(255, 255, 255, 0.05); border-left: 3px solid rgba(255, 255, 255, 0.2); }
.shist-row.ok { border-left-color: #4cc38a; }
.shist-row.wait { border-left-color: var(--gx-amber); }
.shist-row.off { opacity: 0.6; }
.shist-row > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.shist-row small { font-size: 11.5px; color: #9aa3b5; }
.shist-row .r { align-items: flex-end; flex: none; }
.shist-row .r .ghost { padding: 4px 10px; margin-top: 4px; }
body.resuming #lobby { visibility: hidden; }


/* nhân vật phải mua (chó): khoá, hiện giá; bấm vào mở cửa hàng xem thử */
.gx .body-grid button.locked { opacity: 0.85; border-left-color: rgba(255, 179, 71, 0.45); }
.gx .body-grid button .price { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--gx-amber); white-space: nowrap; }

/* ===== ủng hộ: 3 mức chọn nhanh + tự nhập ===== */
.smodal .sdonate { gap: 12px; }
.dgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dopt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px 10px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; background: rgba(255, 255, 255, 0.05); color: #eef1f8; cursor: pointer; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.dopt i { font-style: normal; font-size: 22px; line-height: 1.1; }
.dopt b { font-size: 15px; font-weight: 900; letter-spacing: 0.01em; }
.dopt small { font-size: 11px; color: #a9b2c4; }
.dopt:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-1px); }
.dopt.on { background: linear-gradient(160deg, rgba(255, 179, 71, 0.32), rgba(255, 122, 61, 0.12)); border-color: var(--gx-amber); box-shadow: inset 0 -3px 0 var(--gx-amber); }
.dopt.on small { color: #ffe1b8; }
.dfield { position: relative; display: block; }
.smodal .sdonate .dfield input { width: 100%; box-sizing: border-box; padding: 12px 40px 12px 14px; font-size: 18px; font-weight: 800; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.dfield span { position: absolute; right: 14px; top: 50%; translate: 0 -50%; font-weight: 800; color: var(--gx-amber); pointer-events: none; }
.dsum { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(95, 227, 208, 0.08); border-left: 3px solid var(--gx-cyan); font-size: 13px; color: #c8d1e0; }
.dsum b { color: #fff; }
.dsum .bad { color: #ffb4a8; }
.dgo { width: 100%; padding: 14px; font-size: 16px; }
.dgo:disabled { opacity: 0.45; cursor: not-allowed; }
@media (max-width: 560px) { .dgrid { grid-template-columns: repeat(2, 1fr); } }

/* ===== màn thanh toán ===== */
.spay { align-items: stretch; text-align: left; gap: 14px; }
.phead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(120deg, rgba(255, 179, 71, 0.18), rgba(255, 122, 61, 0.06)); border-left: 3px solid var(--gx-amber); }
.pwhat { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pwhat > i { font-style: normal; font-size: 30px; }
.pwhat small, .pamt small { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #a9b2c4; }
.pwhat b { display: block; font-size: 16px; color: #fff; }
.pamt { text-align: right; flex: none; }
.pamt b { display: block; font-size: 26px; font-weight: 900; color: var(--gx-amber); font-variant-numeric: tabular-nums; line-height: 1.1; }
.pbody { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.pqr { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; background: #fff; border-radius: 4px; position: relative; }
.pqr::before, .pqr::after { content: ''; position: absolute; width: 22px; height: 22px; border: 3px solid var(--gx-amber); }
.pqr::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.pqr::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.pqr img { width: min(220px, 60vw); display: block; }
.pqr small { color: #4a5160; font-size: 11.5px; }
.pinfo { display: grid; gap: 6px; min-width: 0; }
.prow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: rgba(255, 255, 255, 0.05); }
.prow > div { min-width: 0; }
.prow span { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #8e97aa; }
.prow b { display: block; font-size: 14.5px; color: #eef1f8; word-break: break-all; }
.prow.strong { background: rgba(255, 179, 71, 0.1); }
.prow.strong b { color: #ffd59a; font-size: 16px; }
.pcopy { flex: none; padding: 6px 10px; font-size: 12px; font-weight: 800; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; color: #dfe5f0; cursor: pointer; }
.pcopy:hover { border-color: var(--gx-amber); color: var(--gx-amber); }
.pcopy.ok { border-color: var(--gx-cyan); color: var(--gx-cyan); }
.psteps { margin: 6px 0 0; padding-left: 20px; font-size: 12.5px; color: #a9b2c4; display: grid; gap: 3px; }
.por { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8e97aa; }
.por::before, .por::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.12); }
.pgates { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.pgate { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #eef1f8; cursor: pointer; text-align: left; font: inherit; transition: border-color 0.15s, background 0.15s; }
.pgate b { font-size: 15px; font-weight: 900; }
.pgate span { font-size: 12px; color: #a9b2c4; }
.pgate.payos b { color: #7ee0b4; }
.pgate.sepay b { color: #8fc1ff; }
.pgate:hover { border-color: var(--gx-amber); background: rgba(255, 179, 71, 0.08); }
.pwait { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255, 217, 138, 0.08); color: #ffd98a; font-size: 13.5px; }
.pwait .pleft { margin-left: auto; color: #a9b2c4; font-variant-numeric: tabular-nums; }
.spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 217, 138, 0.3); border-top-color: #ffd98a; animation: pspin 0.8s linear infinite; flex: none; }
@keyframes pspin { to { transform: rotate(360deg); } }
.pfoot { display: flex; justify-content: space-between; gap: 8px; }
.pdone { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px 8px; }
.pcheck { width: 72px; height: 72px; display: grid; place-items: center; font-size: 40px; font-weight: 900; color: #0c1a14; background: linear-gradient(135deg, #7ee0b4, #3cc48c); border-radius: 50%; box-shadow: 0 0 0 8px rgba(126, 224, 180, 0.15); animation: ppop 0.4s ease both; }
@keyframes ppop { from { transform: scale(0.5); opacity: 0; } }
@media (max-width: 560px) {
  .pbody { grid-template-columns: 1fr; justify-items: center; }
  .pinfo { width: 100%; }
  .phead { flex-direction: column; align-items: flex-start; }
  .pamt { text-align: left; }
}

/* ô thông tin góc trên trái: kích thước cố định, chữ thời tiết / đếm ngược đổi độ dài không làm nhảy khung */
#info { width: 272px; min-width: 0; max-width: none; box-sizing: border-box; }
#info .title span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#info .stats { grid-template-columns: 108px 1fr; gap: 4px 12px; }
#info .stats b { white-space: nowrap; }
#info .sub .sk { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; line-height: 1.55; }
#info .sub .sk > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#info .sub .sk > .cd { margin-left: auto; flex: none; }
#info .sub b { display: inline-block; min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
#eventChip { width: 272px; max-width: none; box-sizing: border-box; }
@media (max-width: 760px) {
  #info { width: 230px; }
  #info .stats { grid-template-columns: 96px 1fr; }
}
body.touch #eventChip { width: auto; max-width: 46vw; }

/* nút tài khoản ở menu: nổi bật hơn các mục khác */
.gm-btn.acct { margin-top: 6px; background: linear-gradient(90deg, rgba(95, 227, 208, 0.22), rgba(95, 227, 208, 0.06)); border-left: 3px solid var(--gx-cyan); }
.gm-btn.acct b { color: var(--gx-cyan); }
.gm-btn.acct.in { background: linear-gradient(90deg, rgba(255, 179, 71, 0.2), rgba(255, 179, 71, 0.05)); border-left-color: var(--gx-amber); }
.gm-btn.acct.in b { color: #ffd59a; }
.gm-btn.acct.in::after { content: 'Đăng xuất'; margin-left: auto; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); }
/* hộp xác nhận (đăng xuất) */
#confirmModal { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; padding: 16px; background: rgba(8, 10, 20, 0.66); backdrop-filter: blur(4px); }
#confirmModal[hidden] { display: none; }
.confirm-card { width: min(360px, 100%); text-align: center; }
.confirm-card h3 { margin: 4px 0 16px; }
/* popup ai đang leo (bấm số người ở thẻ chọn núi) */
#climbersModal { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; padding: 16px; background: rgba(8, 10, 20, 0.66); backdrop-filter: blur(4px); }
#climbersModal[hidden] { display: none; }
.climbers-card { width: min(380px, 100%); max-height: min(560px, calc(100vh - 32px)); display: flex; flex-direction: column; padding-bottom: 14px; }
.climbers-card .cl-x { position: absolute; right: 12px; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.08); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.climbers-card .cl-x:hover { background: rgba(255, 255, 255, 0.16); }
.climbers-card .cl-head h3 { margin: 0 40px 4px 0; }
.climbers-card .cl-head p { margin: 0 0 12px; font-size: 13px; color: var(--ok, #7fe0a8); }
.climbers-card .cl-list { list-style: none; margin: 0; padding: 0 4px 0 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; }
.climbers-card .cl-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; background: rgba(255, 255, 255, 0.04); min-width: 0; }
.climbers-card .cl-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.climbers-card .cl-list li i { flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12); }
.climbers-card .cl-list li.npc { color: var(--muted, #9aa3b5); font-weight: 500; }
.climbers-card .cl-list li.more, .climbers-card .cl-list li.empty { justify-content: center; color: var(--muted, #9aa3b5); font-weight: 500; background: none; }
.confirm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.confirm-btns button { width: 100%; margin: 0; white-space: nowrap; padding: 12px 10px; }

/* ảnh thật của vật phẩm (dựng 3D rồi chụp lại) thay cho emoji */
.sart i.thumb.img, .stile i.thumb.img { filter: none; line-height: 0; }
.sart i.thumb.img img { height: 88px; width: auto; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.sitem.feat .sart i.thumb.img img { height: 108px; }
.stile i.thumb.img img { width: 64px; height: 64px; display: block; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); }
.stile.locked i.thumb.img img { filter: grayscale(0.7) brightness(0.7); }

/* link Điều khoản / Bảo mật */
.gm-status .gs.legal { margin-left: auto; margin-right: 0; border-right: 0; padding-right: 0; gap: 14px; }
.gm-status .gs.legal a { color: rgba(210, 218, 235, 0.6); text-decoration: none; font-size: 12px; }
.gm-status .gs.legal a:hover { color: #fff; }
.login-legal { margin: 12px 0 0; font-size: 12px; color: rgba(210, 218, 235, 0.55); text-align: center; }
.login-legal a { color: rgba(210, 218, 235, 0.8); }
@media (max-width: 760px) { .gm-status .gs.legal { display: none; } }

/* logo trong popup đăng nhập */
.login-card .login-logo { align-items: center; margin: 6px 0 14px; font-size: 44px; line-height: 0.95; text-align: center; }
.login-card .login-logo span { display: block; margin: 0; padding: 0 0.06em; }
.login-card .login-logo span em { display: inline; margin: 0; padding: 0 0.08em 0 0; }
.login-card .login-logo small { font-size: 0.24em; letter-spacing: 0.7em; margin: 0.35em 0 0 0.7em; }
.login-card #loginTitle { text-align: center; font-size: 13px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(210, 218, 235, 0.65); margin: 0 0 14px; }
.login-card #loginWhy { text-align: center; }

/* nút Trang chủ nằm ngay dưới tiêu đề màn Nhân vật / Chọn núi (thay cho dòng mô tả) */
.brand .wiz-home { margin-top: 12px; pointer-events: auto; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(10, 14, 24, 0.55); color: #e6eaf3; cursor: pointer; }
.brand .wiz-home:hover { border-color: var(--gx-amber); color: var(--gx-amber); }

/* núi sắp ra mắt: khoá, mờ, không chọn được */
.gx .map-card.soon { cursor: default; position: relative; }
.gx .map-card.soon .cover { filter: saturate(0.85) brightness(0.8); position: relative; }
.gx .map-card.soon .soon-tag { position: absolute; right: 12px; top: 12px; padding: 4px 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #1c0f02; background: var(--gx-amber); filter: none; }
.gx .map-card.soon .mn { color: rgba(238, 241, 248, 0.85); }
.gx .map-card.soon .soon-meta { color: rgba(210, 218, 235, 0.55); font-size: 12.5px; }
.gx .map-card.soon .soon-tag { z-index: 2; }

/* nút Đồ hoạ trong menu điện thoại: xếp dọc giống các nút khác, số FPS nhỏ ở góc */
#drawerBtns #qualityBtn.wide { width: auto !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 10px 2px; }
#drawerBtns #qualityBtn b { position: absolute; top: 4px; right: 6px; font-size: 10px; line-height: 1; color: var(--muted, #a3acbf); }

/* hộp góp ý (feedbackui.js) */
.fbmodal .fb-card { width: min(520px, 100%); height: auto; max-height: 92vh; }
.fbmodal .fb-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
.fbmodal h2 { margin: 0 40px 2px 0; font-size: 20px; }
.fbmodal .muted { margin: 0 0 6px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.fb-kinds button { border: 0; padding: 8px 14px; font-weight: 700; font-size: 13.5px; color: #c5ccdb; background: rgba(255, 255, 255, 0.06); clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); cursor: pointer; }
.fb-kinds button.on { background: var(--gx-amber, #ffb347); color: #1c0f02; }
.fb-label { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(210, 218, 235, 0.7); margin-top: 4px; }
.fbmodal textarea, .fbmodal input { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 15px; color: #eef1f8; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0; resize: vertical; }
.fbmodal textarea:focus, .fbmodal input:focus { outline: none; border-color: var(--gx-amber, #ffb347); }
.fb-count { align-self: flex-end; font-size: 12px; margin: -4px 0 0; }
.fb-status { min-height: 1.2em; margin: 2px 0; font-size: 13.5px; color: #ff9a8a; }
.fb-status.ok { color: #5fe3d0; }
.fbmodal #fbSend { align-self: flex-start; padding: 12px 26px; }
.fbmodal #fbSend:disabled { opacity: 0.6; cursor: default; }

/* số phiên bản ở thanh trạng thái + bảng "Có gì mới" + thanh báo bản mới */
.gm-status .gs.legal .ver { border: 0; background: none; padding: 0; color: rgba(210, 218, 235, 0.6); font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.gm-status .gs.legal .ver:hover { color: var(--gx-amber); }
.cl-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(5, 8, 16, 0.72); backdrop-filter: blur(6px); animation: clFade 0.2s ease both; }
@keyframes clFade { from { opacity: 0; } }
.cl-card { width: min(560px, 100%); max-height: min(84vh, 760px); display: flex; flex-direction: column; background: linear-gradient(180deg, #161d2e, #0f1422); color: #e9edf5; border: 1px solid rgba(255, 255, 255, 0.08); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); animation: clRise 0.28s ease both; }
@keyframes clRise { from { transform: translateY(12px); opacity: 0; } }
.cl-top { display: flex; align-items: center; gap: 12px; padding: 20px 22px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(90deg, rgba(255, 179, 71, 0.12), transparent 70%); }
.cl-top > div { flex: 1; min-width: 0; }
.cl-top small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gx-cyan); }
.cl-top h3 { margin: 2px 0 0; font-size: 24px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -0.01em; }
.cl-now { padding: 4px 10px; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gx-amber); border: 1px solid rgba(255, 179, 71, 0.45); }
.cl-x { width: 34px; height: 34px; flex: none; border: 0; background: rgba(255, 255, 255, 0.07); color: #cfd6e3; font-size: 22px; line-height: 1; cursor: pointer; }
.cl-x:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.cl-body { overflow-y: auto; padding: 18px 22px 10px 22px; scrollbar-width: thin; }
/* dòng thời gian: trục dọc bên trái, mỗi phiên bản một mốc */
.cl-entry { position: relative; padding: 0 0 22px 24px; }
.cl-entry::before { content: ''; position: absolute; left: 5px; top: 18px; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.08); }
.cl-entry:last-child::before { display: none; }
.cl-entry::after { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #2a3247; border: 2px solid rgba(255, 255, 255, 0.25); }
.cl-entry.latest::after { background: var(--gx-amber); border-color: rgba(255, 179, 71, 0.35); box-shadow: 0 0 0 4px rgba(255, 179, 71, 0.15); }
.cl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.cl-ver { font-size: 14px; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; }
.cl-entry.latest .cl-ver { color: var(--gx-amber); }
.cl-date { font-size: 12.5px; color: #8e97aa; }
.cl-badge { padding: 2px 7px; font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #1c0f02; background: var(--gx-amber); }
.cl-entry h4 { margin: 6px 0 10px; font-size: 17px; font-weight: 800; line-height: 1.3; color: #f4f6fb; }
.cl-entry ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.cl-entry li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.5; color: #cfd6e3; }
.cl-tag { flex: none; min-width: 62px; margin-top: 2px; padding: 2px 0; text-align: center; font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid currentColor; }
.cl-tag.new { color: var(--gx-cyan); }
.cl-tag.imp { color: #9fb4ff; }
.cl-tag.fix { color: #ffb088; }
.cl-text { min-width: 0; }
.cl-dot { flex: none; width: 6px; height: 6px; margin: 8px 4px 0 2px; background: rgba(255, 255, 255, 0.35); transform: rotate(45deg); }
@media (max-width: 560px) {
  .cl-top { padding: 16px 16px 12px; }
  .cl-top h3 { font-size: 20px; }
  .cl-body { padding: 14px 16px 4px; }
  .cl-tag { min-width: 54px; }
}
.update-bar { position: fixed; top: 10px; left: 50%; translate: -50% 0; z-index: 90; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; background: rgba(14, 20, 34, 0.95); color: #eef1f8; border: 1px solid rgba(255, 179, 71, 0.6); font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.update-bar button { width: auto; margin: 0; padding: 7px 14px; font-size: 13px; }
@media (max-width: 760px) { .update-bar { top: auto; bottom: 12px; width: calc(100vw - 24px); justify-content: space-between; } }

/* đang chơi: chạm giữ / kéo để xoay không bôi đen chữ, không hiện kính lúp / menu, không nháy xanh khi chạm */
body.in-game, body.in-game * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.in-game { -webkit-tap-highlight-color: transparent; }
body.in-game input, body.in-game textarea, body.in-game [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* điện thoại: nút "Tiếp tục: chọn núi" / "← Nhân vật · Bắt đầu leo" đưa lên đầu khung, không phải cuộn xuống cuối trang */
@media (max-width: 960px) {
  #step1 > #nextBtn { order: -1; margin: 0 0 12px; }
  #step2 > .wiz-foot { order: -1; margin: 0 0 12px; }
  #step2 > #startNote { order: 1; }
}
@media (max-width: 600px) {
  #step2 > .wiz-foot .primary { font-size: 15px; letter-spacing: 0.02em; padding-left: 10px; padding-right: 10px; }
  #step2 > .wiz-foot .ghost.big { font-size: 12.5px; padding-left: 12px; padding-right: 12px; }
}

/* ===== popup trong game: cùng một kiểu khung với Bảng kỷ lục =====
   vuông cắt chéo 2 góc, nền tối gradient, vạch cam góc trên / vạch ngọc góc dưới, tiêu đề nghiêng viết hoa,
   nút đóng vuông, tab hình bình hành, hàng mục vuông có vạch nhấn bên trái */
.qcard, .modal-card, .login-card, .rcard {
  --cut: 22px;
  border-radius: 0; border: 0;
  background: linear-gradient(180deg, #1a2034 0%, #0f1424 100%);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.qcard::before, .modal-card::before, .login-card::before { content: ''; position: absolute; left: 0; top: 0; width: 90px; height: 3px; background: var(--gx-amber); z-index: 1; }
.qcard::after, .login-card::after { content: ''; position: absolute; right: 0; bottom: 0; width: 90px; height: 3px; background: var(--gx-cyan); }
.modal-card { background: linear-gradient(180deg, rgba(26, 32, 52, 0.97) 0%, rgba(15, 20, 36, 0.97) 100%); }
/* tiêu đề */
.qhead h3, .modal-card > h2 { font-weight: 900; font-style: italic; letter-spacing: 0.02em; text-transform: uppercase; }
.qhead h3 { font-size: 22px; background: linear-gradient(180deg, #fff3d6, #ffb347); -webkit-background-clip: text; background-clip: text; color: transparent; }
.modal-card > h2 { font-size: 21px; color: #ffe2b0; }
.modal-card > h2 span { color: var(--gx-cyan); font-style: normal; text-transform: none; }
.qhead p { color: #8f98ad; }
/* nút đóng */
.qx, .modal-card .close, .login-card .x {
  border-radius: 0; background: rgba(255, 255, 255, 0.08); color: #fff;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
.qx:hover, .modal-card .close:hover, .login-card .x:hover { background: var(--gx-amber); color: #1d0f02; }
.modal-card .close, .login-card .x { top: 14px; right: 14px; }
/* tab: hình bình hành như sảnh */
.qtabs button, .rmaps button {
  border-radius: 0; border: 0; padding: 7px 16px; background: rgba(255, 255, 255, 0.07); color: #c5ccdb;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); font-weight: 700;
}
.qtabs button.on { background: linear-gradient(95deg, var(--gx-amber), var(--gx-amber-2)); color: #1d0f02; }
.rmaps button.on { background: var(--gx-cyan); color: #062420; }
.rcat { border-radius: 0; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.rtrophy { border-radius: 0; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
/* hàng nhiệm vụ */
.qgroup h4 { color: var(--gx-cyan); }
.qrow { border-radius: 0; border-left: 3px solid rgba(255, 255, 255, 0.14); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
.qrow.next { border-left-color: var(--gx-amber); box-shadow: none; background: linear-gradient(90deg, rgba(255, 179, 71, 0.18), rgba(255, 179, 71, 0.05)); }
.qrow.done { border-left-color: #7fe0a8; }
.qcheck { border-radius: 0; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.qbar { border-radius: 0; }
/* nhật ký: thẻ điểm check-in */
.album-card { border-radius: 0; border: 0; border-bottom: 3px solid transparent; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.album-card.stamped { border-bottom-color: var(--gx-cyan); }
/* đăng nhập: chỉ đổi khung, giữ nguyên nút Google / Facebook / TikTok theo quy định thương hiệu */
.login-card { padding-top: 26px; }