/* ========================================================================== ABILITY DRAFT — dựng theo panorama/layout/hud/dota_hud_abilitydraft.xml và styles/hud/dota_hud_abilitydraft.css (trích bằng Source2Viewer 20.0) Sân khấu 1920×1080 co giãn theo cửa sổ. Bàn đá 3D trong game được vẽ lại bằng CSS (nghiêng phối cảnh) và texture khối đá gốc ad_block.png. ========================================================================== */ @font-face { font-family: Radiance; src: url(assets/fonts/radiance-ultralight.otf); font-weight: 200; } @font-face { font-family: Radiance; src: url(assets/fonts/radiance-light.otf); font-weight: 300; } @font-face { font-family: Radiance; src: url(assets/fonts/radiance-regular.otf); font-weight: 400; } @font-face { font-family: Radiance; src: url(assets/fonts/radiance-semibold.otf); font-weight: 600; } @font-face { font-family: Radiance; src: url(assets/fonts/radiance-bold.otf); font-weight: 700; } @font-face { font-family: Reaver; src: url(assets/fonts/reaver-semibold.otf); font-weight: 600; } @font-face { font-family: Reaver; src: url(assets/fonts/reaver-bold.otf); font-weight: 700; } :root { --slot0: #3375FF; --slot1: #66FFBF; --slot2: #BF00BF; --slot3: #F3F00B; --slot4: #FF6B00; --slot5: #FE86C2; --slot6: #A1B447; --slot7: #65D9F7; --slot8: #008321; --slot9: #A46900; --gold-line: #C5AB42; --ult-line: #41EE7F; --ally: #4f4; --enemy: #f31; --font: Radiance, "Segoe UI", Arial, sans-serif; --title: Reaver, Georgia, serif; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; background: #000; overflow: hidden; } body { font-family: var(--font); color: #ccc; -webkit-font-smoothing: antialiased; user-select: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } #viewport { position: fixed; inset: 0; } #stage { position: absolute; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; background: #182027; } #bg { position: absolute; inset: 0; background: radial-gradient(55% 45% at 50% 55%, #2a3a3f88, #0000 70%), url(assets/ui/bg_pregame.png) center / cover no-repeat; opacity: .55; } .ph-strategy #bg { filter: hue-rotate(250deg) saturate(1.6); transition: filter 2s; } /* ---------------- HEADER ---------------- */ #Header { position: absolute; left: 140px; right: 440px; top: 0; height: 190px; z-index: 6; } #HeroStripContainer { position: absolute; left: 0; right: 0; top: 10px; height: 124px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 85%, #0000); mask-image: linear-gradient(90deg, #000 85%, #0000); } #HeroStrip { position: absolute; left: 0; top: 0; height: 124px; display: flex; align-items: flex-start; transition: transform .25s ease-out; } .DraftEntry { position: relative; width: 54px; height: 78px; margin-left: 8px; flex: none; transition: width .2s, height .2s; } .DraftEntry .img { width: 54px; height: 70px; border: 1px solid #333; border-radius: 5px; background: #000a center / cover no-repeat; box-shadow: 0 0 6px #0000003f; transition: width .2s, height .2s, filter .2s; position: relative; overflow: hidden; } .DraftEntry.ally .img { border-color: #35be1a; } .DraftEntry.enemy .img { border-color: #8f1901; } .DraftEntry.local .img { border: 1px solid #fff; border-left: 4px solid #1a9a00; filter: brightness(1.3); } .DraftEntry.done .img { filter: saturate(.2) contrast(.9) brightness(.3); border-color: transparent; } .DraftEntry.current { width: 82px; height: 120px; } .DraftEntry.current .img { width: 82px; height: 120px; border: 2px solid #fd5; filter: none; } .DraftEntry .img .q { position: absolute; inset: 0; display: grid; place-items: center; font: 300 26px var(--font); color: #687b93; } .DraftEntry .img .slotbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; } .DraftEntry .kind { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 10px; font-weight: 600; color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; text-transform: uppercase; letter-spacing: .5px; } .RoundMarker { width: 48px; height: 48px; margin: 15px 0 0 12px; flex: none; border-radius: 50%; border: 2px solid #181818; display: grid; place-items: center; background: linear-gradient(#75A3A3, #75A3A355 50%, #75A3A322); color: #fff; font: 700 28px var(--font); text-shadow: 1px 1px 2px #000; } .RoundMarker.now { width: 64px; height: 64px; margin-top: 8px; border-color: #cda; } #TimerContainer { position: absolute; left: 0; right: 0; top: 136px; display: flex; justify-content: center; align-items: baseline; gap: 10px; } #TimerLabel { text-transform: uppercase; letter-spacing: 2px; color: #ccc; font-size: 20px; } #Timer { color: #fff; font-size: 36px; letter-spacing: 2px; font-variant-numeric: tabular-nums; } #stage.my-turn #TimerContainer { color: #6f3; } #stage.my-turn #TimerLabel { font-size: 30px; color: #8f6; } #stage.my-turn #Timer { font-size: 45px; color: #9f6; } #stage.next-turn #TimerContainer { animation: textpulse 1s infinite; } #stage.next-turn #TimerLabel, #stage.next-turn #Timer { color: #fd3; } @keyframes textpulse { 50% { opacity: .55; } } #TopRightContainer { position: absolute; right: 24px; top: 14px; text-align: right; z-index: 6; } #ADTitle { font: 200 32px var(--font); text-transform: uppercase; letter-spacing: 1px; background: linear-gradient(#A3E4E4, #6FA8C9); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; } #ADLog { margin-top: 2px; font-size: 16px; color: #94b4b9; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px dotted #94b4b9; } #ADLog:hover { color: #fff; } #ADTip { margin-top: 6px; font-size: 13px; color: #6f8a98; max-width: 380px; line-height: 1.35; } /* ---------------- CỘT NGƯỜI CHƠI ---------------- */ .TeamContainer { position: absolute; top: 196px; width: 320px; display: flex; flex-direction: column; gap: 16px; z-index: 3; } #RadiantHeroes { left: 140px; } #DireHeroes { right: 140px; } .HeroContainer { position: relative; width: 320px; height: 152px; border-radius: 22px 12px 12px 22px; overflow: hidden; background: linear-gradient(270deg, #0000, #0022005f 50%, #0033006f 55%, #006600ff); } #DireHeroes .HeroContainer { border-radius: 12px 22px 22px 12px; background: linear-gradient(90deg, #0000, #2200005f 50%, #3300006f 55%, #660000ff); } .enemy-is-radiant #RadiantHeroes .HeroContainer { background: linear-gradient(270deg, #0000, #2200005f 50%, #3300006f 55%, #660000ff); } .enemy-is-radiant #DireHeroes .HeroContainer { background: linear-gradient(90deg, #0000, #0022005f 50%, #0033006f 55%, #006600ff); } .HeroContainer.LocalPlayer { box-shadow: inset 6px 0 0 #1a9a00, inset 0 0 0 2px #ffffff55; } #DireHeroes .HeroContainer.LocalPlayer { box-shadow: inset -6px 0 0 #1a9a00, inset 0 0 0 2px #ffffff55; } .HeroContainer.CurrentPicker { animation: pickpulse .6s infinite; } @keyframes pickpulse { 50% { box-shadow: inset 0 0 0 3px #fff, 0 0 18px #fd5; } } .HeroContainer .HeroImage { position: absolute; top: 0; bottom: 0; left: 0; width: 112px; background: #042b02; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 60%, #000e 70%, #000c 80%, #0000); mask-image: linear-gradient(90deg, #000 60%, #000e 70%, #000c 80%, #0000); } #DireHeroes .HeroContainer .HeroImage { left: auto; right: 0; -webkit-mask-image: linear-gradient(270deg, #000 60%, #000e 70%, #000c 80%, #0000); mask-image: linear-gradient(270deg, #000 60%, #000e 70%, #000c 80%, #0000); } .HeroContainer .HeroImage video, .HeroContainer .HeroImage img { width: 112px; height: 152px; object-fit: cover; display: block; } .HeroContainer.IsEnemy .HeroImage { background: #2b0202; } .HeroContainer .stub { position: absolute; left: 8px; top: 28px; width: 96px; height: 96px; border-radius: 50%; border: 3px solid #1d3a1d; display: grid; place-items: center; font: 300 54px var(--font); color: #1d4a1d; } .HeroContainer.IsEnemy .stub { border-color: #3a1212; color: #561212; } #DireHeroes .HeroContainer .stub { left: auto; right: 8px; } .NameContainer { position: absolute; left: 86px; right: 10px; top: 4px; } #DireHeroes .NameContainer { left: 10px; right: 86px; text-align: right; } #DireHeroes .HeroName { padding-right: 0; padding-left: 26px; } .HeroName.none { font-size: 17px; letter-spacing: 1px; opacity: .8; } .HeroName { text-transform: uppercase; font-size: 20px; padding-right: 26px; color: var(--ally); letter-spacing: 2px; text-shadow: 1px 1px 0 #000, 0 0 3px #000; height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .IsEnemy .HeroName { color: var(--enemy); } .LocalPlayer .HeroName { color: #fff; font-weight: 700; } .PlayerName { font-size: 19px; font-weight: 300; color: #ccc; text-shadow: 1px 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; align-items: center; } #DireHeroes .PlayerName { justify-content: flex-end; } .LocalPlayer .PlayerName { color: #fff; } .PlanTag { font-size: 12px; font-weight: 700; letter-spacing: 1px; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; background: #000a; border: 1px solid currentColor; } .PlanTag.H { color: #ffa25a; } .PlanTag.S { color: #7fb4ff; } .PlanTag.F { color: #c2c9d3; } .HeroAbilityContainer { position: absolute; right: 4px; bottom: 4px; display: flex; gap: 0; } #DireHeroes .HeroAbilityContainer { right: auto; left: 4px; } .DraftedAbilityContainer { width: 56px; height: 56px; margin: 2px; border: 1px solid #353; border-radius: 8px; box-shadow: 0 0 6px #00000088; background: #000e; overflow: hidden; position: relative; } .IsEnemy .DraftedAbilityContainer { border-color: #533; } .DraftedAbilityContainer img { width: 100%; height: 100%; display: block; border-radius: 8px; animation: drafted .45s ease-out; } .DraftedAbilityContainer.ult { border-color: #c49a4a88; } .DraftedAbilityContainer.empty.ult::after { content: ""; position: absolute; inset: 10px; border: 1px dashed #c49a4a44; border-radius: 6px; } @keyframes drafted { from { transform: rotate(90deg) scale(.3); filter: brightness(8); opacity: 0; } to { transform: none; filter: none; opacity: 1; } } .StatIcons { position: absolute; left: 6px; bottom: 6px; display: flex; gap: 4px; } #DireHeroes .StatIcons { left: auto; right: 6px; flex-direction: row-reverse; } .StatIcons i { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #000; background: #000d center / 80% no-repeat; display: block; } .StatIcons i.innate { background-image: url(assets/ui/innate.png); background-size: 100%; } .StatIcons i.off { filter: saturate(0); opacity: .45; } .AttrIcon { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid #000; background: #000 center / cover; } #DireHeroes .AttrIcon { right: auto; left: 6px; } #PickingGlow { position: absolute; width: 320px; height: 152px; border-radius: 12px; background: #fd83; z-index: 2; opacity: 0; transition: transform .3s, opacity .3s; pointer-events: none; } /* ---------------- BÀN DRAFT ---------------- */ #Board { position: absolute; left: 470px; width: 980px; top: 186px; height: 700px; z-index: 4; perspective: 1500px; } #UltBlock { position: absolute; left: 50%; top: 0; width: 520px; height: 186px; transform: translateX(-50%) rotateX(-8deg); transform-origin: 50% 100%; } #AbilityBlock { position: absolute; left: 50%; top: 196px; width: 640px; height: 470px; transform: translateX(-50%) rotateX(12deg); transform-origin: 50% 0%; } .Corners { position: absolute; width: 30px; height: 30px; border: 3px solid #C5AB42cc; border-radius: 4px; pointer-events: none; } #UltBlock .Corners { border-color: #41EE7F55; border-width: 4px; } .Corners.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; } .Corners.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; } .Corners.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; } .Corners.br { right: 0; bottom: 0; border-left: 0; border-top: 0; } .TypeLabel { position: absolute; left: 0; right: 0; text-align: center; font-size: 17px; letter-spacing: 3px; text-transform: uppercase; } #UltLabel { top: 6px; color: #41ee7fb0; } #AbilityLabel { top: 8px; color: var(--gold-line); } .TypeLabel i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; font: 600 11px/14px var(--font); font-style: normal; margin-left: 6px; vertical-align: 2px; cursor: help; } #UltGrid { position: absolute; left: 0; right: 0; top: 34px; display: grid; grid-template-columns: repeat(6, 66px); gap: 10px 14px; justify-content: center; } #AbilityGrid { position: absolute; left: 0; right: 0; top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; padding: 0 14px; } .AbilSet { display: flex; flex-direction: column; gap: 6px; } .AbilRow { display: flex; align-items: center; gap: 6px; } .Tile { position: relative; width: 62px; height: 62px; border-radius: 6px; flex: none; background: linear-gradient(#0000, #0007), url(assets/ui/ad_block.png) center / 260% no-repeat, #2b2f33; box-shadow: 0 6px 10px #000a, inset 0 1px 0 #ffffff22, inset 0 -3px 0 #0008; transition: transform .15s, box-shadow .15s, filter .2s; } .Tile img.ic { position: absolute; left: 6px; top: 5px; width: 50px; height: 50px; border-radius: 4px; box-shadow: inset 0 0 0 1px #0008; display: block; } .Tile .ext { position: absolute; right: 2px; top: 2px; display: flex; gap: 2px; } .Tile .ext b { width: 13px; height: 13px; border-radius: 3px; background: #007ACC; color: #fff; font: 700 9px/13px var(--font); text-align: center; display: none; } .Tile .styleDot { position: absolute; left: 3px; bottom: 3px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px #000; display: none; } #stage.hints .Tile .styleDot { display: block; } .styleDot.H { background: #ff9a4d; } .styleDot.S { background: #6fa8ff; } .styleDot.U { background: #9aa6b6; } .Tile .note { position: absolute; right: 3px; bottom: 3px; width: 11px; height: 11px; border-radius: 50%; background: orange; color: #000; font: 700 9px/11px var(--font); text-align: center; } .Tile.can { cursor: pointer; } .Tile.can:hover { transform: translateY(-5px) scale(1.06); box-shadow: 0 12px 16px #000c, 0 0 0 2px #fd5, 0 0 18px #fd58; z-index: 2; } .Tile:not(.can):hover { box-shadow: 0 6px 10px #000a, 0 0 0 1px #ffffff40; } .Tile.taken { transform: translateY(4px); filter: brightness(.8); box-shadow: 0 2px 4px #000a, inset 0 0 0 1px #0008; } .Tile.taken img.ic { filter: saturate(.25) brightness(.55); } .Tile .owner { position: absolute; left: 0; right: 0; bottom: -2px; height: 5px; border-radius: 0 0 6px 6px; display: none; } .Tile.taken .owner { display: block; } .Tile.pinged { box-shadow: 0 0 0 2px #fff, 0 0 20px #fff8; } .Tile.pinged::after { content: "!"; position: absolute; top: -10px; left: -6px; width: 18px; height: 18px; border-radius: 50%; background: #ffd23a; color: #000; font: 700 13px/18px var(--font); text-align: center; } .Tile.suggest:not(.taken) { box-shadow: 0 6px 10px #000a, 0 0 0 2px #41ee7f, 0 0 14px #41ee7f88; } .Tile.ult { background: linear-gradient(#0000, #0007), url(assets/ui/ad_block.png) 30% 70% / 260% no-repeat, #2b302c; } .Tile.hero { width: 50px; height: 64px; background: #0a0d10; border: 1px solid #ffffff1c; } .Tile.hero img.ic { left: 2px; top: 2px; width: 44px; height: 58px; object-fit: cover; } .Tile.hero.taken img.ic { filter: saturate(.2) brightness(.5); } .Tile.disabledAbility img.ic { filter: grayscale(1) brightness(.3); } /* ---------------- CHAT ---------------- */ #Chat { position: absolute; left: 650px; width: 620px; bottom: 20px; height: 160px; border: 1px solid #333; background: #000000a8; z-index: 5; display: flex; flex-direction: column; } #ChatLines { flex: 1; overflow-y: auto; padding: 6px 10px 2px; font-size: 15px; line-height: 1.32; } #ChatLines::-webkit-scrollbar { width: 6px; } #ChatLines::-webkit-scrollbar-thumb { background: #3b4658; } #ChatLines .sys { color: #8FA7BB; } #ChatLines .sys b { color: #FAEAC9; } #ChatLines .warn { color: #ffa25a; } #ChatQuick { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 8px 6px; border-top: 1px solid #ffffff10; } #ChatQuick button { font-size: 12.5px; padding: 2px 8px; background: #ffffff0a; border: 1px solid #ffffff18; color: #9fb0c6; } #ChatQuick button:hover, #ChatQuick button.on { color: #fff; border-color: #9cc2ff; } #SkipPlan { position: absolute; left: 50%; transform: translateX(-50%); top: 182px; z-index: 7; display: none; } .ph-plan #SkipPlan { display: block; } .Btn { height: 44px; padding: 0 22px; font-size: 16px; text-transform: uppercase; letter-spacing: 2px; color: #eee; background: linear-gradient(#404D65dd, #2B3445dd); border-top: 1px solid #6F819B; box-shadow: 0 0 12px #0000004f; } .Btn:hover { filter: brightness(1.25); } .Btn.green { background: linear-gradient(#4c8a3f, #2c5a24); border-top-color: #9be27d; } /* ---------------- TOOLTIP ---------------- */ #Tooltip { position: absolute; z-index: 50; width: 440px; background: #0e121a; border: 1px solid #000; box-shadow: 0 6px 30px #000; pointer-events: none; display: none; } #Tooltip.show { display: block; } .tt-head { display: flex; gap: 10px; padding: 10px 12px; background: linear-gradient(#222a38, #151a24); align-items: center; } .tt-head img { width: 52px; height: 52px; object-fit: cover; } .tt-head img.hero { width: 52px; height: 69px; } .tt-name { font-size: 21px; color: #fff; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } .tt-kind { font-size: 12.5px; color: #8ba3c4; text-transform: uppercase; letter-spacing: 1px; display: flex; gap: 8px; flex-wrap: wrap; } .tt-kind .H { color: #ffa25a; } .tt-kind .S { color: #7fb4ff; } .tt-body { padding: 10px 12px; font-size: 15px; color: #c8d3e2; line-height: 1.45; } .tt-body b { color: #fff; } .tt-note { padding: 8px 12px; font-size: 14px; color: orange; border-top: 1px solid #ffffff0d; line-height: 1.4; } .tt-extra { padding: 6px 12px 8px; font-size: 14px; color: #9fc6ff; border-top: 1px solid #ffffff0d; } .tt-extra span { display: inline-block; margin-right: 10px; } .tt-extra em { font-style: normal; color: #5fa6ff; font-size: 12px; text-transform: uppercase; } .tt-foot { display: flex; gap: 16px; padding: 8px 12px; border-top: 1px solid #ffffff10; font-size: 14px; } .tt-cd { color: #c7c7c7; } .tt-mana { color: #5fa6ff; } .tt-lore { padding: 8px 12px 10px; font-size: 13px; color: #6b7a8f; font-style: italic; background: #0a0d13; } .tt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 10px; padding: 8px 12px; font-size: 14px; background: #000; } .tt-stats span { display: block; font-size: 11px; color: #82CAFF; text-transform: uppercase; letter-spacing: .5px; } .tt-stats b { color: #fff; font-weight: 400; } .tt-who { padding: 6px 12px; font-size: 13px; color: #fd5; border-top: 1px solid #ffffff10; } /* ---------------- CHIẾN THUẬT & TỔNG KẾT ---------------- */ #Strategy { position: absolute; left: 470px; width: 980px; top: 196px; height: 690px; z-index: 8; display: none; } .ph-strategy #Strategy { display: block; animation: fadein .8s; } .ph-strategy #Board { opacity: .08; pointer-events: none; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .st-hero { display: flex; gap: 28px; align-items: flex-end; justify-content: center; margin-top: 10px; } .st-hero .port video, .st-hero .port img { width: 300px; height: 400px; object-fit: cover; display: block; -webkit-mask-image: linear-gradient(#000 75%, #0000); mask-image: linear-gradient(#000 75%, #0000); } .st-info { width: 520px; padding-bottom: 20px; } .st-info .lbl { color: #8fa5c2; font-size: 18px; text-transform: uppercase; letter-spacing: 3px; } .st-info .nm { font: 700 50px var(--title); color: #fff; text-transform: uppercase; line-height: 1.05; margin: 4px 0 12px; } .st-abils { display: flex; gap: 8px; } .st-abils .DraftedAbilityContainer { width: 72px; height: 72px; } .st-plan { margin-top: 16px; font-size: 16px; color: #b9c6d8; line-height: 1.5; } .st-plan b { color: #fff; } .st-team { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 26px; } .st-card { background: #0d1118dd; border: 1px solid #000; padding: 8px; } .st-card .h { display: flex; gap: 6px; align-items: center; font-size: 15px; color: #dfe8f4; } .st-card .h img { width: 34px; height: 45px; object-fit: cover; } .st-card .row { display: flex; gap: 3px; margin-top: 6px; } .st-card .row img { width: 34px; height: 34px; border-radius: 4px; } #Summary { position: absolute; inset: 0; z-index: 30; background: #050709f2; display: none; } .ph-summary #Summary { display: block; animation: fadein .5s; } .sm-wrap { position: absolute; left: 100px; right: 100px; top: 70px; bottom: 60px; display: flex; flex-direction: column; gap: 18px; } .sm-title { font: 700 44px var(--title); color: #fff; text-transform: uppercase; letter-spacing: 3px; } .sm-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .sm-team h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; } .sm-row { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 8px; background: #0e131c; border-left: 4px solid transparent; margin-bottom: 6px; } .sm-row.local { border-left-color: #1a9a00; background: #122014; } .sm-row .p video, .sm-row .p img { width: 72px; height: 96px; object-fit: cover; display: block; } .sm-row .n { font-size: 17px; color: #fff; display: flex; gap: 8px; align-items: center; } .sm-row .ab { display: flex; gap: 5px; margin-top: 6px; } .sm-row .ab img { width: 46px; height: 46px; border-radius: 6px; } .sm-row .meta { margin-top: 5px; font-size: 13px; color: #8ea0b8; } .sm-row .meta .ok { color: #7cc47a; } .sm-row .meta .bad { color: #ffa25a; } .sm-notes { font-size: 15px; color: #c8d3e2; line-height: 1.5; } .sm-notes .w { color: #ffa25a; } .sm-actions { display: flex; gap: 12px; } /* ---------------- LOBBY ---------------- */ #Lobby { position: absolute; inset: 0; z-index: 40; display: none; place-items: center; background: radial-gradient(60% 60% at 50% 45%, #1a2a2fee, #05070bf7); } .ph-lobby #Lobby { display: grid; } .lb { width: 1080px; } .lb .logo { height: 70px; } .lb .sub { font-size: 18px; color: #94b4b9; margin: 10px 0 26px; line-height: 1.5; max-width: 900px; } .lb h3 { font-size: 15px; color: #7f8fa6; text-transform: uppercase; letter-spacing: 2.5px; margin: 0 0 10px; font-weight: 600; } .lb-sec { margin-bottom: 22px; } .lb-style { display: flex; gap: 10px; } .lb-style button { flex: 1; padding: 14px 16px; text-align: left; background: #ffffff07; border: 1px solid #ffffff14; color: #9fb0c6; } .lb-style button b { display: block; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; } .lb-style button span { font-size: 14px; line-height: 1.4; display: block; } .lb-style button.on { border-color: #9cc2ff; background: #9cc2ff14; color: #e7f0ff; } .lb-row { display: flex; gap: 40px; } .lb-row input { background: #00000066; border: 1px solid #ffffff22; color: #fff; font: 18px var(--font); padding: 10px 12px; width: 300px; } .lb-opt { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .lb-opt button { padding: 8px 14px; background: #ffffff07; border: 1px solid #ffffff14; color: #9fb0c6; font-size: 14px; } .lb-opt button.on { border-color: #9cc2ff; color: #fff; } #FindMatch { margin-top: 8px; height: 70px; padding: 0 60px; font-size: 26px; letter-spacing: 4px; } .lb-note { font-size: 13px; color: #5e6c80; margin-top: 18px; line-height: 1.55; } .lb a { color: #94b4b9; } /* ---------------- CHANGELOG / TOAST / SETTINGS ---------------- */ #ChangeLog { position: absolute; inset: 0; z-index: 45; background: #000c; display: none; place-items: center; } #ChangeLog.show { display: grid; } .cl-box { width: 900px; max-height: 820px; background: #10161c; border: 1px solid #2c3b44; padding: 20px 26px; overflow-y: auto; font-size: 15px; color: #b5c4cc; line-height: 1.5; } .cl-box h2 { margin: 0 0 10px; color: #A3E4E4; font-weight: 300; text-transform: uppercase; letter-spacing: 2px; } .cl-box b font, .cl-box b { color: #fff; } #Toast { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); z-index: 12; padding: 10px 22px; background: #000d; border: 1px solid #fd5; color: #fd5; font-size: 20px; letter-spacing: 1px; opacity: 0; transition: opacity .25s; pointer-events: none; } #Toast.show { opacity: 1; } #SettingsButton { position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; z-index: 41; border: 1px solid #ffffff20; background: #0006; } #SettingsButton::before { content: "⚙"; color: #8d99aa; font-size: 20px; line-height: 32px; } #Settings { position: absolute; left: 14px; top: 54px; width: 340px; z-index: 41; background: #0e121af2; border: 1px solid #000; box-shadow: 0 6px 30px #000; padding: 14px; display: none; } #Settings.show { display: block; } #Settings h4 { margin: 0 0 6px; font-size: 13px; color: #7f8fa6; text-transform: uppercase; letter-spacing: 2px; } /* ---- rank & gợi ý combo ---- */ .PlayerName .medal { width: 26px; height: 26px; flex: none; } .lb-ranks { display: flex; gap: 8px; } .lb-ranks button { width: 118px; padding: 8px 4px 6px; background: #ffffff07; border: 1px solid #ffffff14; color: #9fb0c6; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 14px; } .lb-ranks button img { width: 74px; height: 74px; object-fit: contain; } .lb-ranks button.on { border-color: #9cc2ff; background: #9cc2ff14; color: #fff; } .tt-tier { padding: 4px 12px; font-size: 13px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; } .tt-tier.tS { color: #ffd23a; background: #ffd23a14; } .tt-tier.tA { color: #9be27d; background: #9be27d10; } .tt-tier.tB { color: #9cc2ff; background: #9cc2ff10; } .tt-combo { padding: 8px 12px; border-top: 1px solid #ffffff0d; font-size: 14px; color: #c8d3e2; line-height: 1.45; } .tt-combo .h { font-size: 12px; color: #8ba3c4; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; } .tt-combo b { color: #fff; } .tt-combo em { font-style: normal; color: #ffa25a; font-size: 12px; } .c-have { color: #9be27d; } .c-free { color: #c8d3e2; } .c-gone { color: #6b7a8f; text-decoration: line-through; } .c-dep { color: orange; } /* ===== Hỗ trợ, thanh đội hình, vị trí, mô phỏng trận, thư viện combo ===== */ .PlanTag.P { color: #6fe0c8; } #CompBar { position: absolute; left: 1282px; width: 168px; bottom: 20px; height: 160px; z-index: 5; background: #000000a8; border: 1px solid #333; padding: 8px 10px; font-size: 13px; color: #b9c6d8; display: none; overflow: hidden; } .ph-plan #CompBar, .ph-draft #CompBar { display: block; } #CompBar .cb-h { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; color: #8ba3c4; margin-bottom: 4px; } #CompBar .cb-c { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; margin-bottom: 6px; } #CompBar .cb-c .PlanTag { font-size: 10px; padding: 0 4px; } #CompBar .cb-w div { line-height: 1.3; margin-top: 2px; } .bad { color: #ffa25a; } .ok { color: #7cc47a; } .dim { color: #7f8fa6; font-size: .9em; } .good { color: #7cc47a; } .badc { color: #ff6b4a; } .sys .w { color: #ffa25a; } .st-pos { margin-top: 12px; display: flex; gap: 6px; align-items: center; font-size: 14px; color: #8ea0b8; } .st-pos button { min-width: 38px; padding: 6px 10px; background: #ffffff07; border: 1px solid #ffffff1a; color: #9fb0c6; font: 14px var(--font); cursor: pointer; } .st-pos button.on { border-color: #9cc2ff; color: #fff; background: #9cc2ff1a; } .st-warn { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; } .st-card.me { border-color: #1a9a00; } .posTag { font-size: 12px; color: #c9d6e6; background: #ffffff10; padding: 0 5px; border-radius: 3px; white-space: nowrap; } .sm-head { display: flex; align-items: flex-end; gap: 30px; } .sm-tabs { display: flex; gap: 6px; margin-bottom: 6px; } .sm-tabs button { padding: 9px 18px; background: #ffffff07; border: 1px solid #ffffff1a; color: #9fb0c6; font: 15px var(--font); text-transform: uppercase; letter-spacing: 1.5px; cursor: pointer; } .sm-tabs button.on { color: #fff; border-color: #9cc2ff; background: #9cc2ff1a; } .sim-top { display: flex; align-items: center; gap: 24px; } .sim-top .big { font: 700 34px var(--title); letter-spacing: 1px; } .wbar { width: 420px; height: 14px; background: #e0583a; border-radius: 2px; overflow: hidden; } .wbar i { display: block; height: 100%; background: #4fa83f; } .sim-grid { display: grid; grid-template-columns: 1.15fr 1fr 1.05fr; gap: 26px; flex: 1; min-height: 0; } .sim-grid .col { min-height: 0; overflow: auto; } .sim-grid h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #8ba3c4; font-weight: 600; } .sim-grid .col h4:not(:first-child) { margin-top: 18px; } .pts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .pt h4 { margin: 0 0 4px !important; text-transform: none; letter-spacing: 0; font-size: 15px; } .pt table { width: 100%; border-collapse: collapse; font-size: 13px; color: #c8d3e2; } .pt td, .pt th { padding: 2px 4px; text-align: left; vertical-align: middle; } .pt th { color: #5e6c80; font-weight: 400; font-size: 12px; } .pt tr.me td { background: #12301a; } .pt img.mini { width: 26px; height: 34px; object-fit: cover; display: block; } .pt td.hit { color: #ffa25a; font-weight: 700; } .pt td.sk { color: #7fb4ff; font-weight: 700; } .pt td.sup { color: #6fe0c8; font-weight: 700; } .pt > div { font-size: 13px; margin-top: 3px; } .ln { display: grid; grid-template-columns: 190px 1fr; gap: 2px 10px; font-size: 14px; color: #c8d3e2; margin-bottom: 8px; align-items: center; } .ln em { grid-column: 2; font-style: normal; font-size: 12px; color: #7f8fa6; } .lbar { display: flex; height: 12px; background: #222; } .lbar i { display: block; height: 100%; } .lbar .w { background: #4fa83f; } .lbar .d { background: #55606e; } .lbar .l { background: #c4442a; } .legend { font-size: 13px; margin-top: 2px; } .fac { font-size: 14px; color: #c8d3e2; line-height: 1.5; } .story div { font-size: 14px; color: #c8d3e2; line-height: 1.45; padding: 4px 0 4px 10px; border-left: 2px solid #ffffff14; margin-bottom: 2px; } #Library { position: absolute; inset: 0; z-index: 45; background: #03050aee; display: none; place-items: center; } #Library.show { display: grid; } .lib-box { width: 1300px; height: 900px; background: #0b0f16; border: 1px solid #ffffff1a; padding: 24px 30px; display: flex; flex-direction: column; } .lib-box h2 { margin: 0 0 10px; font: 700 30px var(--title); color: #fff; letter-spacing: 2px; text-transform: uppercase; } .lib-bar { display: flex; gap: 12px; align-items: flex-start; } .lib-bar .lb-opt { flex: 1; margin: 0; } .lib-bar input { background: #00000066; border: 1px solid #ffffff22; color: #fff; font: 15px var(--font); padding: 8px 10px; width: 240px; } .lib-note { font-size: 13px; color: #6f8096; margin: 8px 0 10px; } .lib-list { flex: 1; overflow: auto; } .lib-list table { width: 100%; border-collapse: collapse; } .lib-list td { padding: 5px 8px; border-bottom: 1px solid #ffffff0a; font-size: 14px; color: #c8d3e2; vertical-align: middle; } .lib-list td.g { color: #7cc47a; font-weight: 700; width: 70px; } .lib-list td.r { color: #ff6b4a; font-weight: 700; width: 70px; } .lc { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; } .lc img { width: 30px; height: 30px; border-radius: 4px; object-fit: cover; } .plus { color: #5e6c80; margin: 0 8px; } .tt-data { padding: 4px 12px; font-size: 13px; color: #b9c6d8; } .tt-data b { color: #fff; } .tt-combo.bad .h { color: #ffa25a; } .tt-combo .trap { opacity: .9; } .lrow { display: flex; align-items: center; flex-wrap: wrap; } #CompBar .cb-c span { white-space: nowrap; font-size: 12px; } #CompBar .cb-c .PlanTag { letter-spacing: 0; font-size: 9px; } /* ===== Lên đồ & vị trí ===== */ #Shop { position: absolute; inset: 0; z-index: 30; background: radial-gradient(70% 70% at 50% 40%, #142028f5, #05070af8); display: none; } .ph-items #Shop { display: block; animation: fadein .4s; } .sh-head { position: absolute; left: 40px; right: 40px; top: 26px; display: flex; align-items: center; justify-content: space-between; } .sh-head .sm-title { font-size: 38px; } .sh-btns { display: flex; gap: 12px; } .sh-grid { position: absolute; left: 40px; right: 40px; top: 100px; bottom: 24px; display: grid; grid-template-columns: 560px 520px 1fr; gap: 22px; } .sh-grid h4 { margin: 0 0 8px; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #8ba3c4; font-weight: 600; } .sh-team { overflow: auto; } .sc-card { background: #0d131bd9; border: 1px solid #ffffff12; border-left: 4px solid transparent; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; } .sc-card.sel { border-color: #9cc2ff88; border-left-color: #9cc2ff; background: #13202ee6; } .sc-card.me { border-left-color: #1a9a00; } .sc-card .h { display: flex; gap: 10px; } .sc-card .h > img { width: 52px; height: 68px; object-fit: cover; } .sc-card .n { font-size: 16px; color: #e6eef8; display: flex; gap: 8px; align-items: center; } .sc-card .ab { display: flex; gap: 4px; margin-top: 5px; } .sc-card .ab img { width: 30px; height: 30px; border-radius: 4px; } .sc-card .pp { display: flex; gap: 4px; align-items: center; margin-top: 6px; } .sc-card .pp button { width: 34px; height: 34px; padding: 2px; background: #ffffff08; border: 1px solid #ffffff18; cursor: pointer; opacity: .55; } .sc-card .pp button.on { opacity: 1; border-color: #ffd23a; background: #ffd23a18; } .posI { width: 26px; height: 26px; vertical-align: middle; } .sc-card .pn { margin-left: 6px; font-size: 13px; color: #c9d6e6; } .sc-card .who { margin-left: auto; font-size: 12px; color: #7f8fa6; } .slots { display: flex; gap: 4px; margin-top: 6px; } .slots .sl { width: 50px; height: 37px; background: #000a; border: 1px solid #ffffff14; display: block; cursor: pointer; } .slots .sl img { width: 100%; height: 100%; object-fit: cover; display: block; } .slots .sl.empty { cursor: default; } .slots.big .sl { width: 72px; height: 53px; } .slots.ref .sl { width: 58px; height: 43px; opacity: .9; } .slots.sm .sl { width: 36px; height: 27px; } .sh-sel { background: #0b1118d9; border: 1px solid #ffffff10; padding: 14px 16px; overflow: auto; } .sh-sel h4 { font-size: 16px !important; color: #fff !important; letter-spacing: 1px !important; text-transform: none !important; } .sh-sel .lbl { margin: 12px 0 4px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #8ba3c4; display: flex; gap: 10px; align-items: center; } .sh-sel .mini { padding: 3px 10px; background: #ffffff0d; border: 1px solid #9cc2ff66; color: #cfe0ff; font: 12px var(--font); cursor: pointer; } .needs .nb { display: grid; grid-template-columns: 170px 1fr; align-items: center; gap: 8px; font-size: 13px; color: #c8d3e2; margin: 2px 0; } .needs .nb i { display: block; height: 8px; background: linear-gradient(90deg, #3d6fae, #7fb4ff); border-radius: 2px; } .ana { font-size: 14px; color: #c8d3e2; line-height: 1.5; } .ana .an-big { font: 700 22px var(--title); color: #fff; } .ana .an-sel { margin-top: 4px; } .ana .an-items { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; } .ana .an-items span { display: flex; gap: 4px; align-items: center; } .ana .an-items img { width: 36px; height: 27px; } .enemies .er { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; } .enemies .er > img { width: 26px; height: 34px; object-fit: cover; } .enemies .slots { margin: 0; } .sh-shop { overflow: auto; } .sh-shop .items { display: grid; grid-template-columns: repeat(auto-fill, 86px); gap: 8px; margin: 8px 0 10px; } .sh-shop .it { position: relative; width: 86px; height: 63px; border: 1px solid #ffffff18; background: #000; cursor: pointer; } .sh-shop .it img { width: 100%; height: 100%; object-fit: cover; display: block; } .sh-shop .it .c { position: absolute; right: 0; bottom: 0; background: #000c; color: #ffd23a; font-size: 12px; padding: 0 4px; } .sh-shop .it i { position: absolute; left: 2px; top: 0; color: #ffd23a; font-style: normal; text-shadow: 0 0 4px #000; } .sh-shop .it.fit { border-color: #ffd23a99; box-shadow: 0 0 10px #ffd23a33; } .sh-shop .it.no { opacity: .35; } .sh-shop .it:hover { filter: brightness(1.25); } .sm-row .ab .itsep { width: 10px; } .sm-row .ab .itm img { width: 62px; height: 46px; border-radius: 3px; } .match-line { font: 700 22px var(--title); letter-spacing: 1px; } /* ===== Trận đấu trực tiếp ===== */ #Match { position: absolute; inset: 0; z-index: 32; background: #05080b; display: none; color: #c8d3e2; } .ph-match #Match { display: block; animation: fadein .4s; } .mt-top { position: absolute; left: 24px; right: 24px; top: 14px; height: 86px; display: grid; grid-template-columns: 1fr 520px 1fr; align-items: center; } .mt-top .tm { display: flex; align-items: center; gap: 16px; font: 700 52px var(--title); } .mt-top .tm.R { justify-content: flex-end; color: #8fe07a; } .mt-top .tm.D { color: #ff7a5a; } .mt-top .tm img { width: 60px; height: 60px; } .mt-top .mid { text-align: center; } .mt-top .clk { font: 700 40px var(--title); color: #fff; letter-spacing: 2px; } .mt-top .ctl { display: flex; gap: 6px; justify-content: center; margin-top: 4px; } .mt-top .ctl button { padding: 4px 12px; background: #ffffff0a; border: 1px solid #ffffff22; color: #b9c6d8; font: 14px var(--font); cursor: pointer; } .mt-top .ctl button.on { border-color: #ffd23a; color: #fff; } .mt-cast { position: absolute; left: 380px; right: 380px; top: 104px; height: 34px; text-align: center; font-size: 19px; color: #fff; } .mt-cast.pop { animation: castpop .5s; } @keyframes castpop { from { transform: scale(1.08); opacity: .3; } to { transform: none; opacity: 1; } } .mt-cast .al, .mt-feed .al, .mt-end .al { color: #8fe07a; } .mt-cast .en, .mt-feed .en, .mt-end .en { color: #ff7a5a; } .mt-team { position: absolute; top: 146px; width: 340px; } .mt-team.R { left: 20px; } .mt-team.D { right: 20px; } .mt-row { display: grid; grid-template-columns: 74px 1fr; gap: 8px; background: #0c1219; border: 1px solid #ffffff0d; margin-bottom: 8px; padding: 6px; height: 112px; } .mt-row.me { border-color: #1a9a00; background: #0f1d12; } .mt-row .pt { position: relative; } .mt-row .pt img { width: 74px; height: 98px; object-fit: cover; display: block; } .mt-row .pt .dead { position: absolute; inset: 0; display: grid; place-items: center; font: 700 28px var(--title); color: #fff; text-shadow: 0 0 6px #000; } .mt-row.isdead .pt img { filter: grayscale(1) brightness(.45); } .mt-row .nm { font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mt-row .aeg { display: none; width: 18px; height: 18px; background: #c9a46a; border-radius: 50%; vertical-align: middle; box-shadow: 0 0 8px #ffd23a; } .mt-row .st { display: flex; gap: 14px; font-size: 14px; margin-top: 2px; } .mt-row .kda { color: #e6eef8; } .mt-row .nw { color: #ffd23a; } .mt-row .gold { display: inline-block; width: 14px; height: 14px; background: url(assets/ui/gold.png) center/contain no-repeat; vertical-align: -2px; margin-right: 3px; } .mt-row .its { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-top: 6px; } .mt-row .its i { display: block; height: 30px; background: #000 center/cover no-repeat; border: 1px solid #ffffff12; } .mt-row .its i.new { animation: itpop .9s; } @keyframes itpop { 0% { box-shadow: 0 0 0 2px #ffd23a; transform: scale(1.25); } 100% { box-shadow: none; transform: none; } } .mt-map { position: absolute; left: 380px; top: 146px; width: 620px; height: 620px; border: 1px solid #ffffff1a; } .mt-svg { width: 100%; height: 100%; display: block; } .mt-svg .tw.R { fill: #6fd35a; } .mt-svg .tw.D { fill: #ff6a4a; } .mt-svg .tw.down { fill: #333 !important; opacity: .35; } .mt-svg .anc.R { fill: #8fe07a; } .mt-svg .anc.D { fill: #ff7a5a; } .mt-svg .anc.down { fill: #222; opacity: .5; } .mt-svg .hd .ring { stroke-width: .7; } .mt-svg .hd.R .ring { fill: #1d3a1a; stroke: #8fe07a; } .mt-svg .hd.D .ring { fill: #3a1d17; stroke: #ff7a5a; } .mt-svg .hd.me .ring { stroke: #ffd23a; stroke-width: 1.1; } .mt-svg .hd.dead { opacity: .25; } .mt-svg .boom { fill: none; stroke: #fff; stroke-width: .6; animation: boom 1.5s forwards; } .mt-svg .boom.R { stroke: #8fe07a; } .mt-svg .boom.D { stroke: #ff7a5a; } .mt-svg .boom.fight { stroke: #ffd23a; stroke-width: 1; } @keyframes boom { from { r: 1; opacity: 1; } to { r: 9; opacity: 0; } } .mt-feed { position: absolute; left: 1016px; top: 146px; width: 520px; height: 620px; background: #0a0f15; border: 1px solid #ffffff10; padding: 10px 12px; overflow: hidden; } .mt-feed h4, .mt-bot h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #8ba3c4; font-weight: 600; } #feed > div { font-size: 14px; padding: 4px 0; border-bottom: 1px solid #ffffff08; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; animation: fadein .4s; } #feed .t { color: #6f8096; font-size: 12px; width: 40px; } #feed .fi { width: 30px; height: 30px; border-radius: 50%; border: 2px solid; } #feed .fi.R { border-color: #8fe07a; } #feed .fi.D { border-color: #ff7a5a; } #feed .x { color: #ffd23a; } #feed .fit { width: 34px; height: 25px; } #feed .big { color: #fff; } #feed .good { background: #12301a55; } #feed .bad { background: #3a1a1455; } .mt-bot { position: absolute; left: 380px; right: 380px; top: 780px; height: 180px; display: grid; grid-template-columns: 620px 1fr; gap: 16px; } .mt-bot svg { width: 100%; height: 150px; background: #0a0f15; border: 1px solid #ffffff10; } .mt-bot .tbar { position: relative; height: 18px; background: #ff7a5a; border-radius: 2px; overflow: hidden; margin-top: 18px; } .mt-bot .tbar i { display: block; height: 100%; background: #6fd35a; transition: width .6s; } .mt-bot .tbar b { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #000; } .mt-bot .tl { display: flex; justify-content: space-between; font-size: 14px; margin-top: 6px; } .mt-end { position: absolute; inset: 0; display: none; place-items: center; background: #000a; z-index: 3; } .mt-end.show { display: grid; animation: fadein .6s; } .mt-end .box { text-align: center; padding: 40px 80px; background: #0b1118f2; border: 1px solid #ffffff22; } .mt-end .big { font: 700 72px var(--title); letter-spacing: 6px; } .mt-end .w .big { color: #8fe07a; } .mt-end .l .big { color: #ff7a5a; } .mt-end .sub { font-size: 20px; margin: 8px 0 22px; } /* ===== xác tướng, talent, Dota Plus, chuỗi phân tích ===== */ .tal { display: flex; gap: 6px; align-items: stretch; margin: 3px 0; font-size: 12px; } .tal i { font-style: normal; width: 24px; flex: none; display: grid; place-items: center; background: #c9a46a33; color: #e8c68c; border-radius: 3px; } .tal span { flex: 1; padding: 2px 5px; border-radius: 3px; background: #ffffff08; color: #9fb0c6; line-height: 1.3; } .tal span.on { background: #1f4a1f; color: #b8f0a8; } .tal span.can { background: #4a3d12; color: #ffe08a; } .tal span.gold { background: #3a1a14; color: #e0907a; } .tal span.gen { color: #b9c6d8; } .tt-data.talk { color: #ffe08a; } .dplus .dp-st { margin-bottom: 6px; } .dplus .dp-h { font-size: 12px; color: #8ba3c4; margin-bottom: 3px; } .dplus .dp-row { display: flex; gap: 6px; flex-wrap: wrap; } .dplus .dp-it { width: 78px; background: #000a; border: 1px solid #ffffff14; padding: 3px; cursor: pointer; text-align: center; font-size: 12px; } .dplus .dp-it:hover { border-color: #ffd23a; } .dplus .dp-it img { width: 70px; height: 51px; display: block; margin: 0 auto 2px; } .dplus .dp-it b { display: block; font-size: 15px; } .dplus .dp-it span { font-size: 11px; } .dplus .dp-it em { display: block; font-style: normal; font-size: 11px; color: #c9a46a; } .chain .ch { display: grid; grid-template-columns: 90px 140px 46px 1fr; gap: 6px; align-items: center; font-size: 13px; margin: 3px 0; } .chain .ch .bar { position: relative; height: 10px; background: #ffffff0a; } .chain .ch .bar i { position: absolute; top: 0; bottom: 0; } .chain .ch .bar i.p { background: #4fa83f; } .chain .ch .bar i.n { background: #c4442a; } .chain .ch .t { color: #8ea0b8; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ===================================================================== VỎ GAME: mở đầu / đăng nhập / sảnh / lịch sử / hồ sơ ===================================================================== */ #Tooltip { z-index: 90; } #Library { z-index: 70; } #Toast { z-index: 95; } #Shell { position: absolute; inset: 0; z-index: 60; display: none; background: #06080c; color: #c8d3e2; overflow: hidden; } #Shell.show { display: block; animation: fadein .5s; } #Shell .dim { color: #6f8096; } #Shell .ok { color: #7cc47a; } #Shell .bad { color: #ff7a5a; } #Shell .Btn.red { background: linear-gradient(#8a3a2f, #5a2219); } #Shell .Btn.wide { width: 100%; margin-top: 14px; } #Shell .sh-btns { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; align-items: center; } #Shell .sh-btns.col { flex-direction: column; align-items: stretch; } #Shell .Btn.file { position: relative; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } #Shell .Btn.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .medal { display: inline-flex; align-items: center; gap: 6px; color: #e8c68c; font-size: 14px; letter-spacing: 1px; } .medal img { width: 34px; height: 34px; } .medal.big img { width: 64px; height: 64px; } .medal.big span { font-size: 18px; } /* --- mở đầu --- */ .v-splash { cursor: pointer; } .sp-bg { position: absolute; inset: -40px; background: url(assets/ui/bg_pregame.png) center/cover; filter: brightness(.45) saturate(1.2); animation: spzoom 28s ease-in-out infinite alternate; } @keyframes spzoom { from { transform: scale(1); } to { transform: scale(1.08) translate(-20px, 10px); } } .sp-vids { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; gap: 0; } .sp-vids video { width: 480px; height: 1080px; object-fit: cover; opacity: 0; clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%); margin: 0 -34px; filter: saturate(1.1) brightness(.8); animation: spv 1.6s ease forwards; } .sp-vids .v0 { animation-delay: .2s; } .sp-vids .v1 { animation-delay: .5s; } .sp-vids .v2 { animation-delay: .8s; } .sp-vids .v3 { animation-delay: 1.1s; } @keyframes spv { from { opacity: 0; transform: translateY(40px); } to { opacity: .55; transform: none; } } .sp-vig { position: absolute; inset: 0; background: radial-gradient(55% 60% at 50% 55%, transparent 0, #000c 70%, #000 100%), linear-gradient(transparent 55%, #000 100%); } .sp-center { position: absolute; left: 0; right: 0; top: 280px; text-align: center; } .sp-logo { width: 360px; filter: drop-shadow(0 0 30px #000); animation: fadein 1.4s .4s both; } .sp-title { font: 700 96px var(--title); letter-spacing: 18px; color: #f4e1b4; text-shadow: 0 0 40px #c9a46a88, 0 4px 0 #000; margin-top: 10px; animation: fadein 1.4s .7s both; } .sp-sub { font-size: 22px; letter-spacing: 6px; text-transform: uppercase; color: #c9d6e6; margin-top: 6px; animation: fadein 1.4s 1s both; } .sp-press { margin-top: 120px; font: 600 22px var(--title); letter-spacing: 8px; color: #e8c68c; animation: blink 1.8s 1.6s infinite both; } @keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } .sp-foot { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; font-size: 13px; color: #4e5b6c; letter-spacing: 2px; } /* --- đăng nhập --- */ .lg-bg { position: absolute; inset: 0; background: url(assets/ui/bg_pregame.png) center/cover; filter: brightness(.25) blur(2px); } .lg-hero { position: absolute; left: 0; top: 0; bottom: 0; width: 1260px; overflow: hidden; } .lg-hero video { position: absolute; left: 120px; top: 0; height: 1080px; width: 900px; object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 70%, transparent); } .lg-name { position: absolute; left: 160px; bottom: 80px; font: 700 76px var(--title); letter-spacing: 6px; color: #f4e1b4; text-transform: uppercase; text-shadow: 0 4px 30px #000; } .lg-panel { position: absolute; right: 70px; top: 70px; bottom: 70px; width: 620px; background: linear-gradient(#0d121bf2, #080b10f7); border: 1px solid #c9a46a44; box-shadow: 0 30px 80px #000, inset 0 1px 0 #ffffff10; padding: 34px 40px; overflow: auto; } .lg-logo { width: 200px; display: block; margin: 0 auto 10px; } .lg-panel h2 { font: 700 30px var(--title); letter-spacing: 3px; color: #fff; text-transform: uppercase; margin: 10px 0 18px; } .lg-panel label { display: block; font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: #8ba3c4; margin: 16px 0 6px; } .lg-panel input { background: #00000088; border: 1px solid #ffffff22; color: #fff; font: 20px var(--font); padding: 10px 14px; width: 100%; box-sizing: border-box; } .lg-panel input:focus { outline: none; border-color: #e8c68c; } .av-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; } .av-grid img { width: 100%; aspect-ratio: 3/4; object-fit: cover; cursor: pointer; opacity: .55; border: 2px solid transparent; } .av-grid img:hover { opacity: .9; } .av-grid img.on { opacity: 1; border-color: #e8c68c; } .rk-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; } .rk-row button { background: #ffffff06; border: 1px solid #ffffff14; color: #9fb0c6; padding: 4px 0; cursor: pointer; font: 11px var(--font); } .rk-row button img { width: 44px; height: 44px; display: block; margin: 0 auto; } .rk-row button.on { border-color: #e8c68c; background: #e8c68c18; color: #fff; } .acc-list { display: flex; flex-direction: column; gap: 10px; } .acc { display: flex; gap: 16px; align-items: center; padding: 12px; background: #ffffff06; border: 1px solid #ffffff12; cursor: pointer; transition: all .15s; } .acc:hover { border-color: #e8c68c; background: #e8c68c10; transform: translateX(4px); } .acc > img { width: 70px; height: 92px; object-fit: cover; } .acc .n { font-size: 22px; color: #fff; margin-bottom: 4px; } .acc .g { font-size: 13px; color: #7f8fa6; margin-top: 4px; } .lg-note { font-size: 12px; color: #5e6c80; margin-top: 22px; line-height: 1.5; } .lg-lang { margin-top: 10px; display: flex; gap: 6px; } .lg-lang button { background: none; border: 1px solid #ffffff1a; color: #7f8fa6; padding: 4px 10px; cursor: pointer; font: 12px var(--font); } .lg-lang button.on { color: #fff; border-color: #e8c68c; } /* --- thanh trên --- */ .mn-top { position: absolute; left: 0; right: 0; top: 0; height: 92px; display: flex; align-items: center; gap: 30px; padding: 0 40px; background: linear-gradient(#0e141df5, #090c12e8); border-bottom: 1px solid #c9a46a33; z-index: 2; } .mn-top .lg { height: 58px; } .mn-top .me { display: flex; align-items: center; gap: 14px; } .mn-top .me > img { width: 52px; height: 68px; object-fit: cover; border: 1px solid #e8c68c55; } .mn-top .me .n { font-size: 20px; color: #fff; } .mn-top .me .lv { font-size: 12px; color: #8ba3c4; display: flex; align-items: center; gap: 8px; } .mn-top .me .lv i { width: 120px; height: 5px; background: #ffffff14; display: block; } .mn-top .me .lv i b { display: block; height: 100%; background: #e8c68c; } .mn-top .mmr { color: #e8c68c; font-size: 15px; } .mn-top .nav { margin-left: auto; display: flex; gap: 4px; } .mn-top .nav button { background: none; border: 0; border-bottom: 2px solid transparent; color: #9fb0c6; font: 600 15px var(--title); letter-spacing: 2px; text-transform: uppercase; padding: 10px 16px; cursor: pointer; } .mn-top .nav button:hover { color: #fff; } .mn-top .nav button.on { color: #e8c68c; border-bottom-color: #e8c68c; } /* --- sảnh --- */ .v-menu, .v-history, .v-detail, .v-profile { background: radial-gradient(80% 70% at 30% 40%, #13202b, #05070a 75%) !important; } .mn-body { position: absolute; left: 40px; right: 40px; top: 120px; bottom: 40px; display: grid; grid-template-columns: 820px 1fr; gap: 36px; } .mn-left { display: flex; flex-direction: column; gap: 18px; } .mn-hero { position: relative; height: 620px; overflow: hidden; border: 1px solid #c9a46a33; background: #000; } .mn-hero video { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .mn-hero .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 30px 24px; background: linear-gradient(transparent, #000e); display: flex; justify-content: space-between; align-items: flex-end; } .mn-hero .w { font: 700 44px var(--title); color: #f4e1b4; letter-spacing: 2px; } .play { height: 120px; border: 1px solid #b7f19a55; background: linear-gradient(135deg, #3f8a2f, #1f4f18 60%, #183f12); color: #fff; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 10px 40px #2f7a2433, inset 0 1px 0 #ffffff33; transition: filter .15s, transform .15s; } .play:hover { filter: brightness(1.15); transform: translateY(-2px); } .play span { font: 700 46px var(--title); letter-spacing: 12px; text-transform: uppercase; } .play em { font-style: normal; font-size: 14px; letter-spacing: 3px; color: #c8f0b8; text-transform: uppercase; } .tipbox { font-size: 15px; color: #b9c6d8; background: #ffffff06; border-left: 3px solid #e8c68c; padding: 12px 16px; } .mn-right h3 { font: 600 16px var(--title); letter-spacing: 3px; text-transform: uppercase; color: #8ba3c4; margin: 26px 0 10px; } .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .card { background: linear-gradient(#111823, #0b1017); border: 1px solid #ffffff12; padding: 16px 18px; } .card.wide { grid-column: 1 / -1; } .card .k { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #7f8fa6; } .card .v { font: 700 40px var(--title); color: #fff; margin-top: 4px; } .card .s { font-size: 13px; color: #7f8fa6; } .spark { width: 100%; height: 90px; } .mlist { display: flex; flex-direction: column; gap: 6px; } .mrow { display: grid; grid-template-columns: 64px 44px 190px 1fr 70px 36px 56px 90px 56px 120px; align-items: center; gap: 10px; padding: 6px 10px; background: #0d131b; border-left: 4px solid; cursor: pointer; font-size: 14px; } .mrow.w { border-left-color: #4fa83f; } .mrow.l { border-left-color: #c4442a; } .mrow:hover { background: #142030; } .mrow .res { font: 700 15px var(--title); letter-spacing: 1px; } .mrow.w .res { color: #7cc47a; } .mrow.l .res { color: #ff7a5a; } .mrow .pt { width: 40px; height: 52px; object-fit: cover; } .mrow .ab, .mrow .its { display: flex; gap: 3px; } .mrow .ab img { width: 40px; height: 40px; border-radius: 4px; } .mrow .its img { width: 44px; height: 32px; } .mrow .pos img { width: 26px; height: 26px; } .mrow .dt, .mrow .md { color: #7f8fa6; font-size: 12px; } .mn-right .mrow { grid-template-columns: 60px 40px 176px 1fr 64px 30px 50px; } .mn-right .mrow .md, .mn-right .mrow .dm, .mn-right .mrow .dt { display: none; } .mn-right .mrow .its img { width: 36px; height: 26px; } /* --- lịch sử / chi tiết --- */ .hs-body { position: absolute; left: 40px; right: 40px; top: 120px; bottom: 30px; overflow: auto; } .hs-body h2 { font: 700 34px var(--title); letter-spacing: 3px; color: #fff; text-transform: uppercase; margin: 0 0 16px; } .dt-head { display: flex; gap: 26px; align-items: baseline; flex-wrap: wrap; font-size: 17px; margin-bottom: 18px; } .dt-head .res { font: 700 48px var(--title); letter-spacing: 4px; } .dt-teams { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; } .dt-team h3 { font: 700 20px var(--title); letter-spacing: 3px; margin: 0 0 8px; } .dt-team h3.al { color: #8fe07a; } .dt-team h3.en { color: #ff7a5a; } .dt-row { display: grid; grid-template-columns: 60px 1fr 160px; gap: 12px; align-items: center; background: #0d131b; padding: 8px; margin-bottom: 6px; border-left: 4px solid transparent; } .dt-row.me { border-left-color: #1a9a00; background: #10201a; } .dt-row .pt { width: 60px; height: 78px; object-fit: cover; } .dt-row .n { font-size: 16px; color: #fff; margin-bottom: 4px; } .dt-row .ab { display: flex; gap: 4px; align-items: center; } .dt-row .ab img { width: 40px; height: 40px; border-radius: 4px; } .dt-row .ab img.itm { width: 50px; height: 37px; border-radius: 2px; } .dt-row .ab .sep { width: 10px; } .dt-row .nums { display: flex; gap: 10px; align-items: center; justify-content: flex-end; font-size: 15px; } .dt-row .nums img { width: 26px; } .dt-row .nums .g { color: #ffd23a; } /* --- hồ sơ --- */ .pf-body { position: absolute; left: 40px; right: 40px; top: 120px; bottom: 30px; overflow: auto; } .pf-card { background: linear-gradient(#111823, #0b1017); border: 1px solid #ffffff12; padding: 18px 22px; } .pf-card h3 { font: 600 15px var(--title); letter-spacing: 3px; text-transform: uppercase; color: #8ba3c4; margin: 0 0 12px; } .pf-card.id { display: flex; gap: 22px; align-items: center; margin-bottom: 18px; } .pf-card.id > img { width: 110px; height: 144px; object-fit: cover; border: 1px solid #e8c68c55; } .pf-card.id h2 { font: 700 40px var(--title); color: #fff; margin: 0 0 6px; } .pf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .pr { display: grid; grid-template-columns: 36px 1fr 30px 46px; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 6px; } .pr img { width: 36px; height: 46px; object-fit: cover; } .pa { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } .pa span { text-align: center; font-size: 12px; } .pa img { width: 48px; height: 48px; border-radius: 5px; display: block; margin: 0 auto 2px; } .pa b { display: block; color: #fff; } .pp { display: grid; grid-template-columns: 28px 100px 1fr 30px; gap: 8px; align-items: center; font-size: 14px; margin-bottom: 8px; } .pp img { width: 26px; } .pp i { height: 8px; background: #ffffff10; display: block; } .pp i b { display: block; height: 100%; background: #e8c68c; } .pp em { font-style: normal; text-align: right; } /* lobby: nút về sảnh; tổng kết: dòng đã lưu */ .lb-go { display: flex; gap: 12px; align-items: center; } .sm-saved { font-size: 16px; color: #c8d3e2; } /* thương hiệu chữ + video có nền mờ */ .brand { font: 700 26px var(--title); letter-spacing: 6px; color: #f4e1b4; line-height: 1; text-shadow: 0 0 18px #c9a46a55; } .brand small { display: block; font: 600 11px var(--font); letter-spacing: 6px; color: #8ba3c4; margin-bottom: 4px; } .lg-panel .brand { text-align: center; font-size: 34px; margin-bottom: 8px; } .sp-kicker { font: 600 18px var(--font); letter-spacing: 14px; color: #8ba3c4; animation: fadein 1.4s .4s both; } .sp-vids video { animation-name: spv2 !important; } @keyframes spv2 { from { opacity: 0; transform: translateY(40px); } to { opacity: .75; transform: none; } } .vc { position: absolute; inset: 0; overflow: hidden; background: #000; } .vc-bg { position: absolute; inset: -40px; background: center/cover no-repeat; filter: blur(26px) brightness(.45) saturate(1.3); transform: scale(1.1); } .vc-fg { position: absolute; left: 50%; top: 0; height: 100%; transform: translateX(-50%); width: auto !important; max-width: none; object-fit: contain; } .lg-hero .vc { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 75%, transparent); } .mn-hero .vc-fg { height: 100%; } .lg-hero .vc-fg { left: 46%; } /* ===== nền khảm icon kỹ năng (assets/ui/ad_mosaic.jpg, dựng bởi 03_tools/build_mosaic.py) ===== */ .sp-bg { inset: -80px !important; background: url(assets/ui/ad_mosaic.jpg) center/cover !important; filter: saturate(1.15) brightness(.9) !important; animation: mosPan 46s ease-in-out infinite alternate !important; } @keyframes mosPan { 0% { transform: scale(1.04) translate(30px, 20px) rotate(-.6deg); } 100% { transform: scale(1.14) translate(-40px, -24px) rotate(.6deg); } } .sp-sweep { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, #fff2 48%, #fff6 50%, #fff2 52%, transparent 65%); background-size: 300% 100%; mix-blend-mode: overlay; animation: sweep 7s ease-in-out infinite; } @keyframes sweep { 0% { background-position: 130% 0; } 60%, 100% { background-position: -40% 0; } } .sp-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; mix-blend-mode: screen; filter: blur(60px); opacity: .35; } .sp-glow.g1 { background: #ff7a2a; left: 6%; top: 10%; animation: drift1 18s ease-in-out infinite alternate; } .sp-glow.g2 { background: #2ad6c8; left: 45%; top: 55%; animation: drift2 22s ease-in-out infinite alternate; } .sp-glow.g3 { background: #8a4dff; right: 4%; top: 18%; animation: drift1 26s ease-in-out infinite alternate-reverse; } @keyframes drift1 { to { transform: translate(180px, 120px) scale(1.2); } } @keyframes drift2 { to { transform: translate(-220px, -140px) scale(.85); } } .v-splash .sp-vig { background: radial-gradient(70% 60% at 50% 50%, #0000 0, #0007 55%, #000e 100%) !important; } .sp-band { position: absolute; left: 0; right: 0; top: 300px; height: 420px; background: linear-gradient(transparent, #03050acc 30%, #03050acc 70%, transparent); backdrop-filter: blur(2px); } .sp-center { top: 340px !important; z-index: 2; } .sp-title { background: linear-gradient(180deg, #fff6dc 10%, #f0c97a 55%, #b9823c 95%); -webkit-background-clip: text; background-clip: text; color: transparent !important; text-shadow: none !important; filter: drop-shadow(0 0 22px #ffb45a66) drop-shadow(0 6px 0 #000); } .sp-sub { color: #e6edf6 !important; } .sp-press { margin-top: 90px !important; } .lg-bg { background: url(assets/ui/ad_mosaic.jpg) center/cover !important; filter: brightness(.22) blur(3px) saturate(1.2) !important; } .v-menu, .v-history, .v-detail, .v-profile { background: radial-gradient(80% 70% at 30% 40%, #13202bee, #05070af2 75%), url(assets/ui/ad_mosaic_small.jpg) center/cover !important; } /* màn tải */ #Loading { position: absolute; inset: 0; z-index: 99; display: none; background: #05070a; } #Loading.show { display: block; animation: fadein .25s; } .ld-bg { position: absolute; inset: -60px; background: url(assets/ui/ad_mosaic.jpg) center/cover; filter: brightness(.8) saturate(1.2); animation: mosPan 12s ease-in-out infinite alternate; } .ld-vig { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 50%, #000c 0, #0006 45%, #000b 100%); } .ld-box { position: absolute; left: 0; right: 0; top: 400px; text-align: center; } .ld-k { font: 600 16px var(--font); letter-spacing: 12px; color: #8ba3c4; } .ld-t { font: 700 52px var(--title); letter-spacing: 6px; color: #f4e1b4; margin: 10px 0 24px; text-shadow: 0 0 24px #ffb45a55; } .ld-bar { width: 520px; height: 4px; background: #ffffff1a; margin: 0 auto; overflow: hidden; } .ld-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff7a2a, #ffd23a, #2ad6c8, #8a4dff); transform-origin: left; animation: ldfill linear forwards; } @keyframes ldfill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .ld-tip { margin-top: 26px; font-size: 18px; color: #c8d3e2; } /* thẻ chân dung cỡ vừa (không phóng to video gốc nhỏ) */ .pcard { position: relative; width: 300px; height: 400px; background: #000; box-shadow: 0 20px 60px #000c, 0 0 0 1px #c9a46a66; overflow: hidden; } .pcard .pc-v { width: 100%; height: 100%; object-fit: cover; display: block; } .pcard .fr { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 0 2px #e8c68c55, inset 0 -80px 60px -40px #000c; } .lg-hero { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 1080px !important; } .lg-hero .pcard { width: 330px; height: 440px; } .lg-name { position: static !important; margin-top: 22px; font-size: 52px !important; } .mn-hero { display: grid !important; grid-template-columns: 300px 1fr; gap: 28px; height: auto !important; padding: 24px; align-items: stretch; background: linear-gradient(135deg, #111a24f0, #0a0f15f0) !important; } .mh-info { display: flex; flex-direction: column; gap: 12px; justify-content: center; } .mh-info .w { font: 700 40px var(--title); color: #f4e1b4; letter-spacing: 2px; } .mh-info .mmrbig { font: 700 22px var(--title); color: #e8c68c; } .mh-info .lvl { font-size: 14px; color: #8ba3c4; display: flex; align-items: center; gap: 10px; } .mh-info .lvl i { width: 200px; height: 6px; background: #ffffff14; display: block; } .mh-info .lvl i b { display: block; height: 100%; background: #e8c68c; } .mh-info .lastm { font-size: 15px; cursor: pointer; padding: 8px 12px; background: #ffffff08; border-left: 3px solid currentColor; } .mh-info .mh-hero { font: 600 14px var(--font); letter-spacing: 4px; text-transform: uppercase; color: #6f8096; margin-top: auto; } .mn-left { gap: 22px !important; } .play { height: 140px !important; } .startinfo { display: flex; gap: 12px; align-items: center; margin-top: 16px; font-size: 14px; color: #9fb0c6; background: #ffffff06; padding: 10px 12px; } .admlink { margin-left: auto; font-size: 13px; color: #6f8096; cursor: pointer; text-decoration: underline; } .admlink:hover { color: #e8c68c; } b.adm { font: 700 11px var(--font); letter-spacing: 1px; color: #1a1205; background: #e8c68c; padding: 1px 6px; border-radius: 3px; vertical-align: middle; } .adm-tools { grid-column: span 2; border-color: #e8c68c55 !important; } .adm-tools .stars { display: flex; gap: 6px; margin: 10px 0; } .adm-tools .stars button { background: #ffffff06; border: 1px solid #ffffff1a; color: #e8c68c; padding: 4px 10px; cursor: pointer; } .adm-tools .stars button.on { border-color: #e8c68c; background: #e8c68c18; } .pcard { background: #000 center/cover no-repeat; } /* chuẩn bị trận có hẹn giờ + mốc mua đồ */ .sh-head { gap: 24px; } .sh-head .stages { display: flex; gap: 6px; margin-left: 10px; } .sh-head .stages span { font: 600 13px var(--font); letter-spacing: 1.5px; text-transform: uppercase; color: #5e6c80; padding: 6px 12px; border: 1px solid #ffffff12; } .sh-head .stages span.on { color: #fff; border-color: #ffd23a; background: #ffd23a14; } .sh-head .stages span.done { color: #7cc47a; } .shtimer { margin-left: auto; display: flex; align-items: baseline; gap: 10px; font: 600 14px var(--font); letter-spacing: 2px; text-transform: uppercase; color: #8ba3c4; } .shtimer b { font: 700 40px var(--title); color: #fff; letter-spacing: 1px; } .shtimer b.hot { color: #ff7a5a; animation: blink 1s infinite; } .sh-head .sh-btns { margin-left: 0; } .sc-card .pp button { width: 44px !important; display: flex; align-items: center; gap: 1px; justify-content: center; } .sc-card .pp button em { font-style: normal; font-size: 12px; color: #fff; } .sc-card .pn { font-weight: 600; color: #ffe08a !important; } .tline { position: relative; height: 92px; margin: 4px 6px 6px; border-bottom: 1px solid #ffffff22; } .tline .tk { position: absolute; top: 0; bottom: 0; width: 1px; background: #ffffff10; } .tline .tk em { position: absolute; bottom: -18px; left: -8px; font-style: normal; font-size: 11px; color: #6f8096; } .tline .ti { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; } .tline .ti img { width: 40px; height: 30px; border: 1px solid #ffd23a66; } .tline .ti b { font-size: 11px; color: #ffd23a; } .mrow .pos { display: flex; align-items: center; gap: 2px; } .mrow .pos em { font-style: normal; font-size: 12px; color: #fff; } .dt-row { grid-template-columns: 60px 1fr 240px !important; } .dt-row .nums .pl { color: #ffe08a; font-size: 13px; } /* ---- Aghanim Scepter / Shard: icon HUD gốc, hiện khi giữ Alt (bàn chọn + ô kỹ năng của từng người) ---- */ span[data-ab], .abx { position: relative; } .abx { display: inline-block; line-height: 0; } .aghs { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 3; } html.altdown .aghs { display: block; } .aghs > i { position: absolute; right: -7%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, #12305a, #040a14 75%); border: 1px solid #4aa3ff; box-shadow: 0 0 6px #2f8cffbb, 0 2px 4px #000; } .aghs > i.sc { top: -9%; width: 50%; aspect-ratio: 1; border-radius: 50%; } .aghs > i.sd { bottom: -7%; width: 50%; height: 30%; border-radius: 6px; } html body .aghs > i > img { display: block; width: 86%; height: auto; border: 0; border-radius: 0; box-shadow: none; animation: none; margin: 0; position: static; filter: drop-shadow(0 0 2px #59b0ff); } html body .aghs > i.sd > img { width: 92%; } .Tile .aghs { inset: 5px 6px 7px 6px; } html.altdown .Tile:not(.hero):has(.aghs.none) img.ic, html.altdown .DraftedAbilityContainer:has(.aghs.none) > img, html.altdown span[data-ab]:has(.aghs.none) > img, html.altdown .abx:has(.aghs.none) > img { filter: grayscale(.85) brightness(.4); } html.altdown .Tile:not(.hero):not(.taken):not(:has(.aghs.none)) { box-shadow: 0 0 0 2px #2f8cffaa, 0 6px 10px #000a; } .tt-aghs { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: #0d2340cc; border: 1px solid #2f8cff44; } .tt-aghs img { width: 26px; height: auto; flex: none; margin-top: 2px; filter: drop-shadow(0 0 3px #2f8cff); } .tt-aghs b { display: block; color: #8cc4ff; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; } .tt-aghs span { display: block; font-size: 13px; color: #cfd8e3; line-height: 1.35; } .DraftedAbilityContainer .aghs > i { right: 3%; } .DraftedAbilityContainer .aghs > i.sc { top: 3%; } .DraftedAbilityContainer .aghs > i.sd { bottom: 3%; } html.altdown .Tile.taken .aghs { display: none; } /* ---- combo YouTube ---- */ .tt-combo.yt { border-left: 3px solid #e0403a; } .tt-combo.yt .h { color: #ff6b5e; } .ytt { font-style: italic; color: #d9c9a8; } .lib-list .ytt { font-size: 12px; margin-top: 3px; } .lib-list a { color: #ff7a6e; text-decoration: none; } .lib-list a:hover { text-decoration: underline; } .ytb { display: inline-block; padding: 0 4px; border-radius: 3px; background: #c4302b; color: #fff; font-size: 10px; line-height: 15px; letter-spacing: .5px; vertical-align: 1px; } /* ---- khung "Combo gợi ý" trong ô chat khi draft ---- */ #ChatTabs { display: flex; gap: 4px; padding: 4px 6px 0; } #ChatTabs:empty { display: none; } #ChatTabs button { background: #1b2230; color: #9fb0c6; border: 1px solid #334055; border-radius: 3px; font: 12px var(--font); padding: 2px 10px; cursor: pointer; letter-spacing: .5px; } #ChatTabs button.on { background: #3a2a14; color: #ffd27a; border-color: #b8873a; } #ComboSug { display: none; flex: 1; overflow-y: auto; padding: 4px 8px; font-size: 13px; line-height: 1.25; } #ComboSug::-webkit-scrollbar { width: 6px; } #ComboSug::-webkit-scrollbar-thumb { background: #3b4658; } #Chat.combo #ChatLines { display: none; } #Chat.combo #ComboSug { display: block; } .cs-agh { display: flex; align-items: center; gap: 4px; color: #cfe4ff; padding-bottom: 3px; } .cs-agh img { height: 18px; width: auto; filter: drop-shadow(0 0 3px #2f8cff); } .cs-agh img.sd { height: 12px; } .cs-agh .dim { margin-left: 6px; font-size: 12px; } .cs-empty { padding: 6px 0; } .cs-g { display: flex; gap: 8px; padding: 3px 0; border-top: 1px solid #ffffff12; } .cs-k { width: 128px; flex: none; display: flex; align-items: center; gap: 5px; color: #f0dcae; } .cs-k img { width: 26px; height: 26px; border-radius: 3px; flex: none; } .cs-k span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-rows { flex: 1; min-width: 0; } .cs-r { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin: 1px 0; } .cs-r .plus { color: #6d7b90; } .cs-r .ok { margin-left: 6px; } .cs-r .ytb { margin-left: 6px; } .cs-p { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px 1px 1px; border-radius: 4px; background: #ffffff0d; } .cs-p img { width: 22px; height: 22px; border-radius: 3px; } .cs-p em { font-style: normal; color: #d6dfeb; } .cs-p.free { cursor: pointer; box-shadow: inset 0 0 0 1px #ff8a3d88; } .cs-p.free:hover { background: #ff8a3d33; } .cs-p.have em { color: #9fe3a8; } .cs-p.full { opacity: .5; } .Tile.combo-hit:not(.taken) { box-shadow: 0 6px 10px #000a, 0 0 0 2px #ff8a3d, 0 0 12px #ff8a3d88; } .Tile.combo-hit.suggest:not(.taken) { box-shadow: 0 6px 10px #000a, 0 0 0 2px #41ee7f, 0 0 0 4px #ff8a3d, 0 0 14px #41ee7f88; } /* ===================================================================== ẢNH ĐẠI DIỆN + KHUNG + HUY HIỆU ===================================================================== */ .av { position: relative; display: inline-block; flex: none; width: 56px; height: 56px; border-radius: 8px; background: #0b0f15; } .av > img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; border-radius: inherit; display: block; } .av.cos > img { object-fit: contain; object-position: center; background: radial-gradient(#2a3442, #0b0f15); } .av.sm { width: 34px; height: 34px; border-radius: 6px; } .av.top { width: 52px; height: 52px; } .av.acc { width: 74px; height: 74px; } .av.lg { width: 96px; height: 96px; border-radius: 12px; } .av.xl { width: 136px; height: 136px; border-radius: 14px; } .av .dc { position: absolute; right: -12%; bottom: -10%; width: 52%; aspect-ratio: 88/64; background: center/cover no-repeat; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 2px 6px #000c; z-index: 3; } .av::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none; z-index: 2; } .av.fr-bronze::after { box-shadow: 0 0 0 3px #a8703f, inset 0 0 0 1px #00000088; } .av.fr-silver::after { box-shadow: 0 0 0 3px #c9d3df, 0 0 8px #c9d3df66; } .av.fr-gold::after { box-shadow: 0 0 0 3px #e8c26a, 0 0 12px #e8c26a88; } .av.fr-mythic::after { box-shadow: 0 0 0 3px #8847ff, 0 0 16px #8847ffaa; } .av.fr-immortal::after { inset: -4px; padding: 4px; background: conic-gradient(from var(--fa, 0deg), #e4ae39, #fff3c4, #b2862d, #e4ae39); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 6px #e4ae39); animation: frspin 4s linear infinite; } .av.fr-arcana::after { inset: -4px; padding: 4px; background: conic-gradient(from var(--fa, 0deg), #ade55c, #3fd3ff, #c45cff, #ff6b6b, #ffd24a, #ade55c); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 8px #ade55c); animation: frspin 3s linear infinite; } @property --fa { syntax: ''; inherits: false; initial-value: 0deg; } @keyframes frspin { to { --fa: 360deg; } } .goldv { display: inline-flex; align-items: center; gap: 4px; color: #f2c94c; font-weight: 600; font-variant-numeric: tabular-nums; } .goldv img { width: 18px; height: 18px; } .mn-top .me { cursor: pointer; } .mn-top .me .goldv { margin-left: 10px; font-size: 16px; } .mn-top .nav button { padding: 10px 11px; font-size: 14px; letter-spacing: 1.5px; position: relative; } .mn-top .nav .badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 9px; background: #d33; color: #fff; font: 700 11px/18px var(--font); font-style: normal; letter-spacing: 0; } .acc .av { margin-right: 4px; } .tabs { display: flex; gap: 6px; align-items: center; margin-bottom: 14px; } .tabs button { background: #151c27; border: 1px solid #2c3a4d; color: #9fb0c6; padding: 8px 16px; font: 600 14px var(--title); letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; } .tabs button.on { background: #3a2a14; color: #ffd27a; border-color: #b8873a; } .wallet { margin-left: auto; font-size: 18px; color: #c9d3df; display: inline-flex; align-items: center; gap: 8px; } .note { margin-top: 14px; font-size: 13px; line-height: 1.45; max-width: 1100px; } /* ---------- Bảng xếp hạng ---------- */ .ld-body { position: absolute; top: 112px; left: 40px; right: 40px; bottom: 30px; display: grid; grid-template-columns: 380px 1fr; gap: 26px; } .ld-side { background: #0d131bcc; border: 1px solid #c9a46a33; padding: 22px; overflow: auto; } .ld-me { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; } .ld-me .n { font-size: 22px; color: #fff; margin-bottom: 4px; } .ld-me .big { font: 700 40px var(--title); color: #f4e1b4; margin-top: 6px; } .ld-side h3 { color: #c9a46a; letter-spacing: 2px; text-transform: uppercase; font-size: 14px; margin: 14px 0 8px; } .td { display: grid; grid-template-columns: 30px 90px 1fr 50px; align-items: center; gap: 8px; font-size: 13px; color: #b9c6d8; margin: 4px 0; } .td img { width: 28px; } .td i { height: 6px; background: #ffffff10; display: block; } .td i b { display: block; height: 100%; background: #c9a46a; max-width: 100%; } .td em { font-style: normal; text-align: right; } .ld-main { display: flex; flex-direction: column; min-height: 0; } .ld-head, .ld-row { display: grid; grid-template-columns: 70px 44px 1fr 210px 90px 90px 80px; align-items: center; gap: 10px; padding: 0 14px; } .ld-head { color: #7d8ea6; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; padding-bottom: 6px; border-bottom: 1px solid #ffffff14; } .ld-list { overflow: auto; flex: 1; } .ld-row { height: 46px; border-bottom: 1px solid #ffffff0a; font-size: 15px; color: #d6dfeb; } .ld-row:nth-child(odd) { background: #ffffff05; } .ld-row .rk { color: #c9a46a; font: 700 17px var(--title); } .ld-row .mmr { color: #f4e1b4; } .ld-row .g { color: #8ea0b8; } .ld-row .medal img { width: 30px; } .ld-row .medal span { font-size: 12px; } .ld-row.local { background: #1d2a1a88; } .ld-row.me { background: linear-gradient(90deg, #3a2a14, #1d2414); box-shadow: inset 3px 0 #e8c26a; } .ld-row .you { font-style: normal; font-size: 11px; background: #e8c26a; color: #000; padding: 0 5px; border-radius: 3px; } .ld-row .lc { font-style: normal; font-size: 11px; color: #8fd18f; } .ld-gap { text-align: center; color: #667; padding: 4px; } .ld-status { padding: 12px 14px; margin-bottom: 10px; color: #cbd9e8; background: #172330; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; } .ld-status.error { color: #ffd4a0; background: #332718; } .ld-empty { padding: 44px 28px; color: #cbd9e8; font-size: 22px; line-height: 1.6; text-align: center; } .ui-ladder-preview .ld-status { padding: 8px 0; margin-bottom: 4px; font-size: 16px; background: transparent; } html.touch .ld-status,html.touch .ui-ladder-preview .ld-status { font-size: 20px; } /* ---------- Nhiệm vụ ---------- */ .qs-body { position: absolute; top: 112px; left: 40px; right: 40px; bottom: 30px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; overflow: hidden; } .qs-col { overflow: auto; padding-right: 6px; } .qs-col h2 { font: 600 22px var(--title); color: #f4e1b4; letter-spacing: 2px; margin: 0 0 12px; } .qs-col h2 .dim { font: 400 13px var(--font); letter-spacing: 0; } .qc { background: #0d131bcc; border: 1px solid #2a3646; padding: 14px 16px; margin-bottom: 10px; } .qc.ready { border-color: #6fbf4a; box-shadow: 0 0 14px #6fbf4a33; } .qc.got { opacity: .55; } .qc .qt { color: #e6edf6; font-size: 16px; margin-bottom: 8px; } .qc .qp { display: flex; align-items: center; gap: 10px; } .qc .qp i { flex: 1; height: 7px; background: #ffffff12; display: block; } .qc .qp i b { display: block; height: 100%; background: linear-gradient(90deg, #c9a46a, #f2c94c); } .qc .qp span { font-size: 13px; color: #9fb0c6; min-width: 70px; text-align: right; } .qc .qr { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; } .qc .qr .Btn { padding: 4px 16px; } .qc .qh { display: flex; gap: 8px; margin-top: 8px; } .qc .qh span { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #c9d3df; } .qc .qh img { width: 30px; height: 40px; object-fit: cover; } .qc .tier { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; } .qc .tier i { width: 9px; height: 9px; transform: rotate(45deg); background: #333c48; display: block; } .qc .tier i.on { background: #f2c94c; } .qnote { font-size: 13px; margin-top: 6px; } /* ---------- Kho báu ---------- */ .st-body, .co-body { position: absolute; top: 112px; left: 40px; right: 40px; bottom: 30px; overflow: auto; } .ch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .chest { background: #0d131bcc; border: 1px solid #2a3646; padding: 14px; display: flex; flex-direction: column; gap: 8px; position: relative; } .chest-cover { position: relative; height: 170px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; background: #05080c; overflow: hidden; border-radius: 6px; } .chest-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: saturate(1.1); } .chest-cover img.r5 { box-shadow: inset 0 0 0 2px #e4ae39; } .chest-cover img.r6 { box-shadow: inset 0 0 0 2px #ade55c; } .chest-cover .lid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #0000 40%, #000c), radial-gradient(60% 50% at 50% 100%, var(--cc, #c9a46a55), #0000); box-shadow: inset 0 0 0 2px var(--cc2, #c9a46a88); border-radius: 6px; } .c-immortal .lid { --cc: #e4ae3988; --cc2: #e4ae39; } .c-arcana .lid { --cc: #ade55c88; --cc2: #ade55c; } .c-hero .lid { --cc: #d32ce666; --cc2: #d32ce6aa; } .c-str .lid { --cc: #d4422e77; } .c-agi .lid { --cc: #3fbf5a77; } .c-int .lid { --cc: #3f8cff77; } .c-all .lid { --cc: #c9a46a77; } .chest .cht { font: 600 19px var(--title); color: #f4e1b4; letter-spacing: 1px; } .chest .chd { font-size: 13px; min-height: 34px; } .chest select { background: #111821; color: #d6dfeb; border: 1px solid #334055; padding: 5px; font: 14px var(--font); } .chest .chb { display: flex; gap: 6px; margin-top: auto; } .chest .chb .Btn { padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; } .Btn[disabled] { opacity: .45; pointer-events: none; } .odds { display: none; font-size: 13px; background: #070b10; border: 1px solid #222c38; padding: 6px 8px; } .odds.show { display: block; } .odds div { display: grid; grid-template-columns: 1fr 60px 70px; } .odds b { text-align: right; color: #fff; } .odds em { text-align: right; color: #7d8ea6; font-style: normal; } .sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .sk { background: #0d131bcc; border: 1px solid #2a3646; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .sk.on { border-color: #e8c26a; } .sk .skn { color: #e6edf6; font-size: 15px; min-height: 20px; } .sk .Btn { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; } .hud-prev { width: 168px; height: 96px; border-radius: 6px; position: relative; overflow: hidden; background: #182027; box-shadow: inset 0 0 0 1px #ffffff22; } .hud-prev i { position: absolute; border: 1px solid var(--hl, #c5ab42); } .hud-prev i:nth-child(1) { left: 34px; right: 34px; top: 20px; height: 26px; } .hud-prev i:nth-child(2) { left: 24px; right: 24px; top: 54px; height: 30px; } .hud-prev i:nth-child(3) { left: 70px; right: 70px; top: 6px; height: 8px; background: var(--hl, #c5ab42); } /* nền xem trước HUD */ .hp-default { background: radial-gradient(#2a3a3f, #182027); } .hp-radiant, body[data-hud=radiant] #bg { --hl: #6fe08a; } .hp-radiant { background: radial-gradient(#245a33, #0d1f14); } .hp-dire { --hl: #ff6a3d; background: radial-gradient(#6a1d12, #1a0807); } .hp-aghanim { --hl: #7fb6ff; background: radial-gradient(#2a2f72, #0b0d24); } .hp-crownfall { --hl: #f2c94c; background: radial-gradient(#5a4419, #1a1306); } .hp-frost { --hl: #9ee8ff; background: radial-gradient(#2a5a6e, #0a1b22); } .hp-aegis { --hl: #e8eef8; background: radial-gradient(#4a5466, #10141c); } .hp-arcana { --hl: #ade55c; background: conic-gradient(from 30deg, #2b1a4a, #10383a, #3a3810, #4a1a2b, #2b1a4a); } /* mở rương */ .op-ov { position: absolute; inset: 0; z-index: 50; background: #000d; display: flex; align-items: center; justify-content: center; } .op-box { width: 1500px; text-align: center; } .op-title { font: 700 34px var(--title); color: #f4e1b4; letter-spacing: 3px; margin-bottom: 20px; } .reel-win { position: relative; height: 250px; overflow: hidden; background: #070b10; border-top: 1px solid #c9a46a55; border-bottom: 1px solid #c9a46a55; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .reel { display: flex; gap: 10px; padding: 20px 0; will-change: transform; } .reel-mark { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: #f2c94c; box-shadow: 0 0 12px #f2c94c; } .op-ov.done .reel-win { opacity: .35; height: 120px; transition: all .4s; } .op-ov.done .reel { transform-origin: left; } .op-res { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; animation: popin .5s ease-out; } .op-rar { font: 700 26px var(--title); letter-spacing: 3px; text-transform: uppercase; } .op-rar .new { color: #6fe08a; } .op-btns { display: flex; gap: 10px; } .op-btns .Btn { display: inline-flex; align-items: center; gap: 6px; } .op-res.r5 .cos.big, .op-res.r6 .cos.big { animation: rarglow 1.6s ease-in-out infinite alternate; } @keyframes popin { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes rarglow { from { box-shadow: 0 0 20px var(--rc); } to { box-shadow: 0 0 60px var(--rc); } } /* thẻ vật phẩm theo độ hiếm */ .cos { --rc: #b0c3d9; position: relative; width: 168px; flex: none; background: linear-gradient(#141b25, #0a0e14); border: 1px solid #2a3646; border-bottom: 3px solid var(--rc); text-align: left; } .cos.r1 { --rc: #5e98d9; } .cos.r2 { --rc: #4b69ff; } .cos.r3 { --rc: #8847ff; } .cos.r4 { --rc: #d32ce6; } .cos.r5 { --rc: #e4ae39; } .cos.r6 { --rc: #ade55c; } .cos .ci { height: 112px; background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, var(--rc) 35%, transparent), #0000); display: flex; align-items: center; justify-content: center; overflow: hidden; } .cos .ci img { max-width: 100%; max-height: 100%; } .cos .ci.fallback img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .85; } .cos .cn { font-size: 13px; color: #e6edf6; padding: 6px 8px 0; height: 38px; overflow: hidden; line-height: 1.2; } .cos .chh { font-size: 11px; color: #8ea0b8; padding: 2px 8px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cos.rc { width: 160px; } .cos.big { width: 300px; } .cos.big .ci { height: 200px; } .cos.big .cn { font-size: 18px; height: auto; } .cos.big .chh { font-size: 14px; } .cos .cx { display: flex; align-items: center; gap: 4px; padding: 0 8px 8px; } .cos .cx .cnt { color: #f2c94c; font-size: 13px; margin-right: auto; } .cos .mini { font: 12px var(--font); padding: 2px 6px; background: #1b2230; border: 1px solid #334055; color: #c9d3df; cursor: pointer; } .cos .mini:hover { background: #2a3446; } /* bộ sưu tập */ .co-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; } .co-top h2 { font: 600 24px var(--title); color: #f4e1b4; margin: 0 12px 0 0; letter-spacing: 2px; } .co-r { display: flex; gap: 4px; } .co-r button { background: #151c27; border: 1px solid #2c3a4d; color: var(--rc, #c9d3df); padding: 5px 10px; font: 13px var(--font); cursor: pointer; } .co-r button.on { background: #2a2214; border-color: #b8873a; } .co-r em { font-style: normal; color: #7d8ea6; font-size: 11px; } .co-top input { background: #111821; color: #d6dfeb; border: 1px solid #334055; padding: 6px 10px; font: 14px var(--font); width: 220px; } .co-top .Btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; } .co-grid { display: grid; grid-template-columns: repeat(auto-fill, 168px); gap: 12px; } .co-empty { padding: 40px; font-size: 18px; text-align: center; } /* ---------- Hồ sơ (bản mới) ---------- */ .pf2-head { display: flex; align-items: center; gap: 26px; background: #0d131bcc; border: 1px solid #c9a46a33; padding: 22px 26px; margin-bottom: 14px; } .pf2-id h2 { margin: 0 0 6px; font: 600 30px var(--title); color: #fff; letter-spacing: 1px; } .pf2-g { margin-top: 6px; font-size: 15px; } .pf2-big { margin-left: auto; display: flex; gap: 30px; } .pf2-big div { text-align: center; } .pf2-big b { display: block; font: 700 40px var(--title); color: #f4e1b4; } .pf2-big b.ok { color: #6fe08a; } .pf2-big b.bad { color: #ff6b5e; } .pf2-big span { font-size: 12px; color: #8ea0b8; text-transform: uppercase; letter-spacing: 1.5px; } .pf2-tab h3 { color: #c9a46a; letter-spacing: 2px; text-transform: uppercase; font-size: 14px; margin: 16px 0 8px; } .wlb { display: grid; grid-template-columns: 130px 1fr 54px 44px; align-items: center; gap: 8px; font-size: 13px; color: #b9c6d8; margin: 5px 0; } .wlb i { height: 8px; background: #ff6b5e44; display: block; } .wlb i b { display: block; height: 100%; background: #6fe08a; } .wlb em { font-style: normal; color: #8ea0b8; text-align: right; } .wlb > b { text-align: right; } .wlb .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .l20 { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 10px; } .l20 i { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font: 700 12px var(--font); font-style: normal; cursor: pointer; } .l20 i.w { background: #2e6b33; color: #bff5c4; } .l20 i.l { background: #6b2e2e; color: #f5c0bf; } .kv { display: flex; justify-content: space-between; font-size: 14px; color: #b9c6d8; padding: 3px 0; border-bottom: 1px solid #ffffff0a; } .kv b { color: #fff; } .av-pick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 300px; overflow: auto; } .av-pick img { width: 54px; height: 70px; object-fit: cover; cursor: pointer; border: 2px solid transparent; opacity: .8; } .av-pick img:hover { opacity: 1; } .av-pick img.on { border-color: #e8c26a; opacity: 1; } .av-pick.cos img { width: 96px; height: 64px; object-fit: contain; background: #0b0f15; } .av-pick.cos img.r5 { border-bottom-color: #e4ae39; } .av-pick.cos img.r6 { border-bottom-color: #ade55c; } .lk-row { display: flex; flex-wrap: wrap; gap: 6px; } .lk-row button { background: #151c27; border: 1px solid #2c3a4d; color: #c9d3df; padding: 7px 14px; font: 14px var(--font); cursor: pointer; } .lk-row button.on { border-color: #e8c26a; color: #ffd27a; background: #2a2214; } .lk-row .more { color: #8fd18f; } /* ===================================================================== GIAO DIỆN HUD (mua trong Kho báu) — áp lên màn draft ===================================================================== */ body[data-hud=radiant] #bg { background: radial-gradient(70% 60% at 50% 55%, #1f6b3aaa, #0000 75%), linear-gradient(#1f6b3a55, #000a), url(assets/ui/bg_pregame.png) center / cover no-repeat; opacity: .8; } body[data-hud=radiant] { --gold-line: #6fe08a; } body[data-hud=dire] #bg { background: radial-gradient(70% 60% at 50% 55%, #9a2a12aa, #0000 75%), linear-gradient(#9a2a1255, #000a), url(assets/ui/bg_pregame.png) center / cover no-repeat; opacity: .8; } body[data-hud=dire] { --gold-line: #ff7a4a; } body[data-hud=aghanim] #bg { background: radial-gradient(70% 60% at 50% 55%, #3a3fb0aa, #0000 75%), linear-gradient(#3a3fb055, #000a), url(assets/ui/bg_pregame.png) center / cover no-repeat; opacity: .8; } body[data-hud=aghanim] { --gold-line: #8fb8ff; } body[data-hud=crownfall] #bg { background: radial-gradient(70% 60% at 50% 55%, #c9a24aaa, #0000 75%), linear-gradient(#c9a24a55, #000a), url(assets/ui/bg_pregame.png) center / cover no-repeat; opacity: .8; } body[data-hud=crownfall] { --gold-line: #ffd36a; } body[data-hud=frost] #bg { background: radial-gradient(70% 60% at 50% 55%, #59c3e0aa, #0000 75%), linear-gradient(#59c3e055, #000a), url(assets/ui/bg_pregame.png) center / cover no-repeat; opacity: .8; } body[data-hud=frost] { --gold-line: #a8ecff; } body[data-hud=aegis] #bg { background: radial-gradient(70% 60% at 50% 55%, #c8d4e8aa, #0000 75%), linear-gradient(#c8d4e855, #000a), url(assets/ui/bg_pregame.png) center / cover no-repeat; opacity: .8; } body[data-hud=aegis] { --gold-line: #f2f6ff; } body[data-hud=arcana] #bg { opacity: .8; } body[data-hud=arcana] #bg::after { content: ""; position: absolute; inset: 0; background: conic-gradient(from var(--fa, 0deg) at 50% 55%, #6b3fd077, #2fb8c077, #c0b02f77, #d03f6b77, #6b3fd077); animation: frspin 18s linear infinite; mix-blend-mode: screen; } body[data-hud=arcana] { --gold-line: #ade55c; } body[data-hud=radiant] #Timer, body[data-hud=dire] #Timer, body[data-hud=aghanim] #Timer, body[data-hud=crownfall] #Timer, body[data-hud=frost] #Timer, body[data-hud=aegis] #Timer, body[data-hud=arcana] #Timer { color: var(--gold-line); text-shadow: 0 0 12px var(--gold-line); } body[data-hud=crownfall] #ADTitle, body[data-hud=aegis] #ADTitle, body[data-hud=arcana] #ADTitle { color: var(--gold-line); } .mn-eco { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; margin-top: 14px; } .mn-eco .card { cursor: pointer; } .mn-eco .card:hover { border-color: #c9a46a88; } .mn-eco .v .goldv { font-size: 30px; } .mn-eco .v .goldv img { width: 26px; height: 26px; } .mq { display: flex; justify-content: space-between; font-size: 14px; color: #c9d3df; padding: 3px 0; border-bottom: 1px solid #ffffff0a; } .mq b { color: #8ea0b8; } .mq.ready b { color: #6fe08a; } .mq.got { opacity: .5; text-decoration: line-through; } /* ===================================================================== CHAT SAU TRẬN + CHAT WHEEL ===================================================================== */ #PostChat { display: none; } #PostChat.show { display: flex; flex-direction: column; position: absolute; right: 50px; bottom: 30px; width: 700px; height: 380px; z-index: 32; background: #070b10f2; border: 1px solid #c9a46a55; box-shadow: 0 20px 60px #000c; animation: fadein .4s; } .pg-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 6px; font-size: 15px; color: #c9d3df; } .pg-head > b { font: 700 20px var(--title); letter-spacing: 2px; } .pg-head .pg-t { margin-left: auto; color: #8ea0b8; font-size: 14px; } .pg-head .pg-t b { color: #ffd27a; font-size: 18px; } .pg-head .Btn { padding: 5px 12px; font-size: 13px; } .pg-bar { height: 3px; background: #ffffff10; margin: 0 14px; } .pg-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c9a46a, #f2c94c); transition: width .25s linear; } #PgLog { flex: 1; overflow-y: auto; padding: 8px 14px; font-size: 16px; line-height: 1.45; } #PgLog .pl em { font-style: normal; color: #6d7b90; font-size: 13px; } #PgLog .pl span { color: #e6edf6; } #PgLog .pl.en span { color: #ffb4a8; } #PgLog .pl.me span { color: #fff; font-weight: 600; } #PgLog .pl { animation: plin .25s ease-out; } @keyframes plin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } .pg-in { display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-top: 1px solid #ffffff10; } .cw-btn { background: radial-gradient(#3a2a14, #1a1208); border: 1px solid #b8873a; color: #ffd27a; padding: 6px 12px; font: 600 13px var(--title); letter-spacing: 1px; border-radius: 20px; cursor: pointer; white-space: nowrap; } .cw-btn kbd, .cw-i i { font: 700 11px var(--font); background: #000a; border: 1px solid #ffffff33; border-radius: 3px; padding: 0 4px; font-style: normal; } .pg-quick { display: flex; gap: 3px; } .pg-quick button { background: #151c27; border: 1px solid #2c3a4d; color: #9fb0c6; padding: 4px 8px; font: 12px var(--font); cursor: pointer; } .pg-quick button.on { color: #ffd27a; border-color: #b8873a; background: #2a2214; } #PgInput { flex: 1; min-width: 0; background: #0f151d; border: 1px solid #334055; color: #e6edf6; padding: 6px 10px; font: 14px var(--font); } .pg-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 14px 12px; } .pg-chips button { background: #121925; border: 1px solid #2c3a4d; color: #d6dfeb; padding: 4px 10px; font: 13px var(--font); border-radius: 14px; cursor: pointer; } .pg-chips button:hover { border-color: #f2c94c; color: #fff; background: #2a2214; } /* bánh xe chat (giống chat wheel Dota): 8 câu quanh tâm */ .cw-ov { position: fixed; inset: 0; z-index: 60; background: radial-gradient(circle at center, #0008, #000c 60%); } .cw { position: absolute; left: 50%; top: 50%; width: 0; height: 0; } .cw-c { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(#2a2214, #0b0907); border: 2px solid #b8873a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 0 40px #f2c94c33; } .cw-tab { font: 700 17px var(--title); color: #ffd27a; letter-spacing: 1px; text-align: center; } .cw-arr button { color: #ffd27a; font-size: 16px; padding: 2px 8px; cursor: pointer; } .cw-c .dim { font-size: 11px; } .cw-i { position: absolute; left: 0; top: 0; min-width: 150px; max-width: 220px; padding: 9px 14px; background: linear-gradient(#18202b, #0d1218); border: 1px solid #3a4a60; color: #e6edf6; font: 15px var(--font); border-radius: 22px; cursor: pointer; box-shadow: 0 6px 18px #000a; white-space: normal; } .cw-i:hover { border-color: #f2c94c; background: linear-gradient(#3a2a14, #1a1208); color: #fff; box-shadow: 0 0 18px #f2c94c55; } .cw-i i { margin-right: 6px; color: #ffd27a; } /* ===================================================================== AD PLUS ===================================================================== */ .adp { display: inline-block; font: 800 12px/18px var(--font); letter-spacing: 1px; padding: 0 6px; border-radius: 4px; color: #1a1205; background: linear-gradient(135deg, #8d6b2f, #c9a46a); vertical-align: 2px; } .adp.on { background: linear-gradient(135deg, #f2c94c, #fff1b8 45%, #e4ae39); box-shadow: 0 0 10px #f2c94c88; } .mn-top .nav .adp { font-size: 13px; line-height: 20px; } .plus-lock { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 8px 0; border: 1px dashed #b8873a88; background: #1a140988; color: #d9c9a8; font-size: 14px; cursor: pointer; } .plus-lock.big { padding: 18px 16px; line-height: 1.45; } .tt-lock { margin-top: 6px; padding: 5px 8px; background: #1a140988; border: 1px dashed #b8873a66; color: #d9c9a8; font-size: 12px; } #ChatQuick button.lock { color: #f2c94c; border-color: #b8873a; } .Tile .sgp { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 4; font: 700 12px/16px var(--font); color: #0b1a0e; background: #6fe08a; padding: 0 5px; border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 2px 6px #000a; white-space: nowrap; } .cs-cur { color: #cfe4ff; font-size: 13px; padding-bottom: 2px; } .cs-cur b { color: #6fe08a; } .cs-p .pc { margin-left: 4px; color: #6fe08a; font-size: 12px; } /* trang AD Plus */ .pl-body { position: absolute; top: 112px; left: 40px; right: 40px; bottom: 30px; overflow: auto; } .pl-hero { display: flex; align-items: center; gap: 26px; padding: 26px 30px; background: radial-gradient(80% 140% at 0% 50%, #3a2a14, #0d131b 60%); border: 1px solid #c9a46a55; margin-bottom: 18px; } .pl-logo { width: 120px; height: 120px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f2c94c, #8d6b2f); box-shadow: 0 0 40px #f2c94c55; font: 900 46px var(--title); color: #1a1205; } .pl-logo i { font-style: normal; color: #fff; text-shadow: 0 0 10px #fff8; margin-left: 2px; } .pl-hero h2 { margin: 0; font: 700 40px var(--title); color: #ffe7a6; letter-spacing: 3px; } .pl-sub { color: #c9d3df; font-size: 16px; max-width: 900px; margin: 6px 0 10px; } .pl-status { font-size: 16px; color: #ff9b8a; } .pl-status.ok { color: #6fe08a; } .pl-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; } .pl-feats, .pl-buy { background: #0d131bcc; border: 1px solid #2a3646; padding: 18px 22px; } .pl-feats h3, .pl-buy h3 { color: #c9a46a; letter-spacing: 2px; text-transform: uppercase; font-size: 15px; margin: 0 0 12px; } .pl-feats table { width: 100%; border-collapse: collapse; font-size: 15px; } .pl-feats th { text-align: center; color: #8ea0b8; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; padding-bottom: 6px; } .pl-feats td { padding: 8px 6px; border-bottom: 1px solid #ffffff0d; color: #d6dfeb; } .pl-feats td.x, .pl-feats td.p { text-align: center; width: 110px; } .pl-feats td.x { color: #6d7b90; } .pl-feats td.p, .pl-feats th.p { color: #f2c94c; } .pl-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid #2a3646; background: #0a0f15; } .pl-opt b { display: block; color: #fff; font-size: 17px; } .pl-opt .dim { font-size: 13px; } .pl-opt .Btn { display: inline-flex; align-items: center; gap: 6px; min-width: 130px; justify-content: center; } .pl-opt.trial { border-color: #6fbf4a88; } .pl-opt.usd { opacity: .75; } .pl-code { display: flex; gap: 8px; margin: 14px 0 6px; } .pl-code input { flex: 1; background: #111821; color: #ffe7a6; border: 1px solid #334055; padding: 8px 10px; font: 600 16px var(--font); letter-spacing: 2px; } .pl-adm { margin-top: 12px; padding: 10px; border: 1px dashed #556; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #c9d3df; } .pl-adm .code { width: 100%; font: 700 20px var(--font); color: #f2c94c; letter-spacing: 2px; user-select: text; } .sm-row .n .bio { font-style: italic; font-size: 12px; color: #8ea0b8; font-weight: 400; } /* khắc chế */ .sm-cnt { font-size: 15px; color: #d6dfeb; background: #0d1a12cc; border: 1px solid #3f7a4a88; padding: 8px 12px; } .sm-cnt.none { background: none; border: 0; padding: 0; font-size: 13px; } .sm-cnt b { color: #8ff0a0; } .sm-cnt .goldtxt { color: #f2c94c; } .sm-cnt-l { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 13px; color: #b9c6d8; } .sm-cnt-l i { font-style: normal; margin-right: 4px; } .sm-cnt-l b { color: #8ff0a0; } .dt-cnt { margin: 6px 0 10px; padding: 8px 12px; background: #0d1a12cc; border: 1px solid #3f7a4a88; color: #8ff0a0; font-size: 15px; } .dt-cnt div { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: #b9c6d8; margin-top: 4px; } .dt-cnt b { color: #8ff0a0; } .sm-cnt { max-width: 1040px; } .ph-summary .sm-saved, .ph-summary .sm-actions { max-width: 1040px; } /* ========================================================================= iPhone / iPad (ad_mobile.js): nút Aghs, chạm 2 lần để chọn, nhắc xoay/cài ========================================================================= */ html { touch-action: manipulation; -webkit-text-size-adjust: 100%; } body { -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } html.touch .Tile:hover { transform: none; } html.touch .Tile.can:hover { box-shadow: none; } .Tile.tap-armed { transform: translateY(-5px) scale(1.08) !important; z-index: 3; box-shadow: 0 12px 16px #000c, 0 0 0 3px #fd5, 0 0 22px #fd5a !important; animation: tapArm 1s ease-in-out infinite; } @keyframes tapArm { 50% { box-shadow: 0 12px 16px #000c, 0 0 0 3px #fff6a0, 0 0 30px #fd5 ; } } #MobileUI { position: fixed; inset: 0; pointer-events: none; z-index: 1000; font-family: var(--font); } #MobileUI > * { pointer-events: auto; } #MbAghs { display: none; position: fixed; left: max(10px, env(safe-area-inset-left)); bottom: max(10px, env(safe-area-inset-bottom)); height: 46px; padding: 0 12px 0 8px; align-items: center; gap: 2px; border-radius: 23px; background: #0b0f14d9; border: 1px solid #c9a46a88; color: #e8dcc0; font: 600 14px var(--font); letter-spacing: .5px; box-shadow: 0 4px 14px #000a; opacity: .82; } #MbAghs img { width: 24px; height: 24px; filter: grayscale(.8) brightness(.8); } #MbAghs span { margin-left: 6px; } #MbAghs.on { background: #10324e; border-color: #5ec8ff; color: #fff; opacity: 1; box-shadow: 0 0 16px #3aa8ff99; } #MbAghs.on img { filter: none; } html.touch #MbAghs { display: flex; } #MbTapHint { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 7px 16px; border-radius: 18px; background: #000c; border: 1px solid #fd5; color: #fd5; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none !important; } #MbTapHint.show { opacity: 1; } #MbRotate { display: none; position: fixed; inset: 0; background: #0b0f14f2; color: #e8dcc0; align-items: center; justify-content: center; text-align: center; } #MbRotate p { font-size: 18px; margin: 18px 0; } #MbRotate button, #MbInstall button { white-space: nowrap; font: 600 14px var(--font); padding: 8px 16px; border-radius: 6px; border: 1px solid #c9a46a; color: #f2c94c; background: #1a222b; } .mb-phone { width: 46px; height: 78px; margin: 0 auto; border: 3px solid #c9a46a; border-radius: 9px; animation: mbRot 2.2s ease-in-out infinite; } @keyframes mbRot { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } } @media (orientation: portrait) { html.touch:not(.mb-keep-portrait) #MbRotate { display: flex; } } #MbInstall { display: none; position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 10px 12px 10px 16px; gap: 12px; align-items: center; border-radius: 10px; background: #0b0f14f0; border: 1px solid #c9a46a88; color: #e8dcc0; font-size: 14px; box-shadow: 0 6px 22px #000c; } #MbInstall.show { display: flex; } #MbInstall b { color: #f2c94c; } .mb-sh { display: inline-block; width: 13px; height: 16px; vertical-align: -2px; border: 2px solid #5ec8ff; border-top: 0; border-radius: 0 0 3px 3px; position: relative; } .mb-sh::before { content: '↑'; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); color: #5ec8ff; font: 700 13px/1 Arial, sans-serif; } #MbOffline { display: none; position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(10px, env(safe-area-inset-bottom)); width: 210px; padding: 7px 10px; border-radius: 8px; background: #0b0f14e0; border: 1px solid #2c3a46; font-size: 12px; color: #9fb3c8; pointer-events: none !important; } #MbOffline.show { display: block; } #MbOffline i { display: block; height: 3px; width: 0; margin-bottom: 5px; background: #5ec8ff; border-radius: 2px; transition: width .4s; } #MbOffline.done { color: #8f6; border-color: #3a6a2a; } #MbOffline.done i { background: #6c4; } @media (max-height: 520px) { #MbAghs { height: 34px; padding: 0 9px 0 6px; font-size: 12px; border-radius: 17px; } #MbAghs img { width: 18px; height: 18px; } #MbInstall { font-size: 12px; padding: 6px 8px 6px 12px; gap: 8px; } #MbRotate button, #MbInstall button { font-size: 12px; padding: 5px 10px; } #MbOffline { width: 150px; font-size: 10.5px; padding: 5px 8px; } #MbTapHint { font-size: 12px; padding: 5px 12px; } } /* ========================================================================= Cửa hàng kiểu Dota: 3 tab (Gợi ý · Cơ bản · Nâng cấp) chia cột + bảng chia lane ========================================================================= */ .sh-grid { grid-template-columns: 500px 470px 1fr !important; } .sh-shop { display: flex; flex-direction: column; min-height: 0; } .stabs { display: flex; gap: 0; border-bottom: 1px solid #c9a46a55; margin-bottom: 10px; } .stabs button { padding: 9px 22px 8px; font: 600 15px var(--font); letter-spacing: 1.5px; text-transform: uppercase; color: #8796aa; background: #0b1118cc; border: 1px solid #ffffff12; border-bottom: 0; margin-right: 4px; cursor: pointer; } .stabs button.on { color: #ffe08a; background: linear-gradient(#2a2416, #141008); border-color: #c9a46a99; } .sh-shop .cols { display: grid; gap: 8px; flex: 1; min-height: 0; overflow: auto; align-content: start; } .sh-shop .cols.c6 { grid-template-columns: repeat(6, 1fr); } .sh-shop .cols.c4 { grid-template-columns: repeat(4, 1fr); } .sh-shop .col { background: #070b10b3; border: 1px solid #ffffff0d; padding: 6px 3px 8px; min-width: 0; } .sh-shop .col h5 { margin: 0 0 6px; font: 600 11.5px var(--font); letter-spacing: 1.2px; text-transform: uppercase; color: #c9a46a; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sh-shop .ci { display: grid; grid-template-columns: repeat(auto-fill, 56px); gap: 4px; justify-content: center; } .sh-shop .cols .it { width: 56px; height: 41px; } .sh-shop .cols .it .c { font-size: 11px; padding: 0 3px; line-height: 14px; } .sh-shop .it.part { border-color: #ffffff10; } .sh-shop .sug { flex: 1; overflow: auto; min-height: 0; } .sh-shop .sug .lbl { margin: 10px 0 5px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #8ba3c4; display: flex; gap: 10px; align-items: center; } .sh-shop .sug .mini { padding: 3px 10px; background: #ffffff0d; border: 1px solid #9cc2ff66; color: #cfe0ff; font: 12px var(--font); cursor: pointer; } .sh-shop .sug .ana { background: #0b1118d9; border: 1px solid #ffffff10; padding: 8px 10px; } .sh-shop > .dim { margin-top: 6px; font-size: 12px; } .tt-tree { padding: 4px 12px 0; font-size: 13px; color: #b8c6d8; } .tt-tree b { color: #c9a46a; font-weight: 600; } /* nút lane trên thẻ người chơi */ .sc-card .lnr { display: flex; gap: 4px; margin-top: 6px; } .sc-card .lnr button { flex: 1; padding: 4px 0; font: 600 12px var(--font); letter-spacing: .5px; color: #8796aa; background: #ffffff06; border: 1px solid #ffffff14; cursor: pointer; } .sc-card .lnr button.on { color: #fff; } .ln-safe.on, .lnb-row.ln-safe .lnb-n { --lc: #6fd36a; } .ln-mid.on, .lnb-row.ln-mid .lnb-n { --lc: #ffd23a; } .ln-off.on, .lnb-row.ln-off .lnb-n { --lc: #ff8a4a; } .ln-roam.on, .lnb-row.ln-roam .lnb-n { --lc: #9cc2ff; } .sc-card .lnr button.on { border-color: var(--lc); background: color-mix(in srgb, var(--lc) 16%, transparent); color: var(--lc); } /* bảng chia lane */ .lnb { background: #0b1118d9; border: 1px solid #ffffff10; padding: 8px 10px; margin-bottom: 10px; } .lnb-rows { display: grid; gap: 5px; } .lnb-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 10px; min-height: 50px; padding: 4px 8px; background: #ffffff05; border: 1px dashed #ffffff18; cursor: pointer; } .lnb-row:hover { border-color: #ffd23a88; background: #ffd23a0d; } .lnb-row.locked { cursor: default; border-style: solid; } .lnb-n { font: 600 14px var(--font); white-space: nowrap; color: var(--lc); letter-spacing: 1px; text-transform: uppercase; } .lnb-n em { display: block; font: 400 11px var(--font); color: #7f8fa6; text-transform: none; letter-spacing: 0; } .lnb-who { display: flex; gap: 6px; flex-wrap: wrap; } .lnb-h { position: relative; width: 34px; height: 44px; border: 1px solid #ffffff22; cursor: pointer; } .lnb-h img { width: 100%; height: 100%; object-fit: cover; display: block; } .lnb-h b { position: absolute; right: 0; bottom: 0; background: #000c; color: #fff; font-size: 11px; padding: 0 3px; } .lnb-h.me { border-color: #1a9a00; } .lnb-h.sel { border-color: #9cc2ff; box-shadow: 0 0 0 1px #9cc2ff; } .lnb-row .lw { font: 600 13px var(--font); white-space: nowrap; } .lnb-tot { margin: 8px 0 2px; font-size: 14px; color: #dbe6f3; } .lnb > .dim { margin-top: 4px; font-size: 12px; line-height: 1.4; } .lnb > .mini { margin-top: 6px; padding: 3px 10px; background: #ffffff0d; border: 1px solid #9cc2ff66; color: #cfe0ff; font: 12px var(--font); cursor: pointer; } .lnb.compact .lnb-row { min-height: 38px; } .lnb.compact .lnb-h { width: 26px; height: 34px; } .lnb.compact > .dim { display: none; } /* tua trận có giới hạn + nút tua nhanh lúc draft */ .mt-top .ctl button#mtJump b { color: #ffd23a; margin-left: 2px; } .mt-top .ctl button.off { opacity: .35; cursor: default; } #FastFwd { position: absolute; right: 0; top: 142px; z-index: 7; display: none; padding: 6px 14px; background: #0b1118d9; border: 1px solid #ffffff2a; color: #b9c6d8; font: 600 15px var(--font); letter-spacing: 1px; cursor: pointer; } #FastFwd.show { display: block; } #FastFwd.on { color: #ffd23a; border-color: #ffd23a; background: #2a2416e6; box-shadow: 0 0 12px #ffd23a33; } #FastFwd.on.hold { color: #8fe07a; border-color: #8fe07a; } /* kéo thả đồ */ #Shop [data-buy], #Shop .slots[data-pi] .sl { touch-action: none; -webkit-user-drag: none; } #Shop [data-buy] img, #Shop .slots .sl img { -webkit-user-drag: none; pointer-events: none; } #DragGhost { position: fixed; z-index: 2000; width: 64px; height: 47px; margin: -24px 0 0 -32px; pointer-events: none; opacity: .9; box-shadow: 0 6px 18px #000c, 0 0 0 2px #ffd23a; } body.dragging, body.dragging * { cursor: grabbing !important; } .slots .sl.drop { outline: 2px solid #ffd23a; outline-offset: 1px; background: #ffd23a22; } body.dragging #Shop .slots[data-pi] .sl.empty { border-color: #ffd23a66; } .tt-mech { margin: 0 12px 8px; padding: 6px 9px; background: #1d2a1d; border-left: 3px solid #8fe07a; color: #d9ecd2; font-size: 14px; line-height: 1.4; } .tt-mech .dim { margin-top: 3px; font-size: 12.5px; color: #a9c3a2; } /* ---------- Gem lăng kính (Prismatic): ô gem ở góc ảnh ---------- */ .cos .ci { position: relative; } .gemsock { position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px; transform: rotate(45deg); background: radial-gradient(circle at 35% 35%, #ffffffaa, transparent 45%), var(--gc, #222); border: 2px solid #c9a46a; box-shadow: 0 0 0 1px #000, 0 0 8px var(--gc, transparent); } .gemsock.empty { --gc: #1a1f27; box-shadow: 0 0 0 1px #000, inset 0 0 4px #000; } .gemsock.t3 { border-color: #ffe08a; } .cos.big .gemsock { width: 30px; height: 30px; right: 10px; bottom: 10px; } .gemb { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; color: #e8eef6; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .gemb i, .gemdot { display: inline-block; width: 10px; height: 10px; transform: rotate(45deg); background: var(--gc); box-shadow: 0 0 6px var(--gc), inset 0 0 0 1px #fff6; flex: none; } .gemb.t3, .op-gem.t3 { color: #ffe08a; } .gemrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; } .gemdot.t2 { width: 11px; height: 11px; } .gemdot.t3 { width: 12px; height: 12px; box-shadow: 0 0 9px var(--gc), 0 0 0 1px #ffe08a; } .op-gem { margin: 2px 0 8px; font-size: 18px; color: #e8eef6; text-shadow: 0 0 12px var(--gc); } .op-gem b.new { color: #8fe07a; } .Btn.gemf.on { border-color: #c9a46a; color: #ffe08a; } .gemnote { margin-top: 4px; } /* ---------- nút âm thanh ---------- */ #AudioBtn { position: absolute; left: 54px; top: 14px; width: 34px; height: 34px; z-index: 96; border: 1px solid #ffffff20; background: #0008; color: #fff; font-size: 17px; line-height: 1; cursor: pointer; } #AudioBtn:hover { border-color: #c9a46a; } #AudioPanel { position: absolute; left: 54px; top: 54px; z-index: 97; width: 300px; padding: 12px 14px; background: #0b1118f2; border: 1px solid #c9a46a66; box-shadow: 0 10px 30px #000c; display: none; font-size: 14px; color: #dbe6f3; } #AudioPanel.show { display: grid; gap: 10px; } #AudioPanel label { display: grid; gap: 4px; } #AudioPanel label.chk { display: flex; gap: 8px; align-items: center; } #AudioPanel input[type=range] { width: 100%; accent-color: #c9a46a; } #AudioPanel kbd { font: 11px var(--font); padding: 0 4px; border: 1px solid #ffffff33; } #AudioPanel .dim { font-size: 12px; line-height: 1.4; } #Shell.show ~ #AudioBtn { top: auto; left: auto; right: 14px; bottom: 14px; } #Shell.show ~ #AudioPanel { top: auto; left: auto; right: 14px; bottom: 56px; } /* (16/10) Courier Unusual: dòng hiệu ứng + màu gem, nền tím unusual */ .cos .ci.cour { background: radial-gradient(70% 70% at 50% 60%, color-mix(in srgb, #8650ac 55%, transparent), #0000); } .cos .ci.cour img { filter: drop-shadow(0 0 8px #b98be6aa); } .cos .cfx { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #c9a6ef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .cos .cfx i { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); background: var(--gc); box-shadow: 0 0 6px var(--gc); flex: none; } /* (04/11) kỹ năng linh hoạt: chấm nửa màu theo các lối build hợp (cam = Hitter, xanh = Skiller, xám = hỗ trợ) */ .styleDot.F { background: conic-gradient(var(--fd1, #ff9a4d) 0 50%, var(--fd2, #6fa8ff) 0 100%); } .styleDot.F.fH.fS { --fd1: #ff9a4d; --fd2: #6fa8ff; } .styleDot.F.fH.fU:not(.fS) { --fd1: #ff9a4d; --fd2: #9aa6b6; } .styleDot.F.fS.fU:not(.fH) { --fd1: #6fa8ff; --fd2: #9aa6b6; } .styleDot.F.fH.fS.fU { background: conic-gradient(#ff9a4d 0 33.3%, #6fa8ff 0 66.6%, #9aa6b6 0 100%); } .tt-kind .F { color: #e8c76a; font-weight: 700; }