@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;800&family=Roboto:wght@400;700;900&display=swap');

/* =========================================================
   1. Trang công khai (trang chủ, GetKey, bước vượt, kết quả)
   Mọi giá trị mặc định bên dưới trùng với giao diện gốc.
   ========================================================= */
body.site-public{font-family:var(--ui-font,Inter,system-ui,sans-serif);color:var(--text,#f8f5ff);background:radial-gradient(ellipse at 15% 0,#24113c 0,transparent 40%),radial-gradient(ellipse at 90% 30%,#291028 0,transparent 38%),linear-gradient(135deg,var(--ui-bg,#090817),var(--ui-bg-2,#10091b) 60%,var(--ui-bg-3,#080914))}
body.site-public .section-title{color:var(--ui-title,#eadcff)}
body.site-public .game-card{border-color:var(--ui-card-1,#653b90);background:var(--ui-panel-bg,linear-gradient(145deg,rgba(23,12,41,.98),rgba(9,7,23,.98)));border-radius:var(--ui-r,26px)}
body.site-public .game-card:nth-child(4n+2){border-color:var(--ui-card-2,#71365f)}
body.site-public .game-card:nth-child(4n+3){border-color:var(--ui-card-3,#24738a)}
body.site-public .game-card:nth-child(4n){border-color:var(--ui-card-4,#70227f)}
body.site-public .game-card:hover{border-color:var(--ui-accent,#c35dff)}
body.site-public .panel{border-color:var(--ui-card-1,#653b90);background:var(--ui-panel-bg,linear-gradient(145deg,rgba(24,13,43,.94),rgba(10,8,26,.94)));border-radius:var(--ui-r,26px)}
body.site-public .button{background:linear-gradient(100deg,var(--ui-btn-from,#f044a4),var(--ui-btn-to,#a94cff));border-radius:var(--ui-r,13px)}
body.site-public .pill{border-radius:var(--ui-r,999px)}
body.site-public .pill:hover{border-color:var(--ui-accent,#dc72ff)}
body.site-public .arrow{color:var(--ui-accent-2,#d780ff)}
body.site-public .provider>span{border-radius:var(--ui-r,14px)}
body.site-public .detail-image{border-radius:var(--ui-r,16px)}
@media(max-width:650px){body.site-public .game-card{border-radius:var(--ui-r,18px)}}
@media(max-width:430px){body.site-public .game-card{border-radius:var(--ui-r,20px)}}

/* =========================================================
   2. Nhóm nút Thông Tin
   ========================================================= */
.ib-section{margin:18px 0 14px}
.ib-heading{margin:0 0 12px;font-size:1.02rem;font-weight:800;letter-spacing:.01em;color:var(--ui-title,#f8f5ff)}
.ib-wrap{display:grid;grid-template-columns:repeat(var(--ib-cols,1),minmax(0,1fr));gap:var(--ib-gap,12px)}

.ib{--ib-ease:cubic-bezier(.22,1,.36,1);position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:12px;min-height:62px;padding:12px 16px;border:1.5px solid var(--ib-border,var(--ib-border-g,var(--ui-card-1,#653b90)));border-radius:var(--ib-r,var(--ib-r-g,var(--ui-r,16px)));background:var(--ib-bg,var(--ib-bg-g,var(--ui-panel-bg,linear-gradient(145deg,rgba(24,13,43,.92),rgba(10,8,26,.92)))));color:var(--ib-fg,var(--ib-fg-g,var(--ui-text,#f8f5ff)));text-decoration:none;font-weight:700;font-size:.98rem;line-height:1.3;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:transform .3s var(--ib-ease),box-shadow .3s var(--ib-ease),border-color .3s;-webkit-tap-highlight-color:transparent}
.ib::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s var(--ib-ease)}
.ib:hover,.ib:focus-visible{transform:translateY(-3px);border-color:var(--ib-accent,var(--ib-accent-g,var(--ui-accent,#c35dff)));box-shadow:0 16px 34px -14px var(--ib-accent,var(--ib-accent-g,var(--ui-accent,#c35dff)))}
.ib:hover::before,.ib:focus-visible::before{transform:translateX(120%)}
.ib:active{transform:translateY(0) scale(.985)}
.ib:focus-visible{outline:2px solid var(--ui-accent,#8feaff);outline-offset:3px}

.ib-icon{flex:none;width:42px;height:42px;display:grid;place-items:center;overflow:hidden;border-radius:calc(var(--ib-r,var(--ib-r-g,var(--ui-r,16px))) * .6);background:var(--ib-accent,var(--ib-accent-g,var(--ui-btn-from,#f044a4)));box-shadow:0 0 22px -6px var(--ib-accent,var(--ib-accent-g,var(--ui-btn-from,#f044a4)));font-size:1.35rem;line-height:1}
.ib-icon img{width:100%;height:100%;object-fit:contain;padding:7px;display:block}
.ib:hover .ib-icon{animation:ibWiggle .7s ease}
.ib-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.ib-label{overflow-wrap:anywhere}
.ib-sub{font-weight:500;font-size:.8rem;line-height:1.35;color:var(--ui-muted,#aaa3c2)}
.ib-ch{display:inline-block;white-space:pre}
.ib-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ib-arrow{margin-left:auto;flex:none;font-size:1.2rem;opacity:.65;transition:transform .35s var(--ib-ease),opacity .35s}
.ib:hover .ib-arrow{transform:translate(3px,-3px);opacity:1}
.ib-span-2{grid-column:1/-1}

/* Cuộn: nút và chữ hiện theo đúng độ kéo của trang (JS đặt --p và --cp) */
.ib[data-anim="scrub"]{--p:1;opacity:calc(.12 + var(--p) * .88);translate:0 calc((1 - var(--p)) * 46px);scale:calc(.94 + var(--p) * .06)}
.ib[data-anim="scrub"] .ib-ch{opacity:var(--cp,1);translate:0 calc((1 - var(--cp,1)) * .45em)}
html.js-anim .ib[data-anim="scrub"]{--p:0}
html.js-anim .ib[data-anim="scrub"] .ib-ch{opacity:var(--cp,0)}

/* Hiện khi xuất hiện trong khung nhìn (chỉ khi JS đã bật) */
html.js-anim .ib[data-anim="fade-up"]:not(.in),
html.js-anim .ib[data-anim="slide-left"]:not(.in),
html.js-anim .ib[data-anim="slide-right"]:not(.in),
html.js-anim .ib[data-anim="zoom"]:not(.in),
html.js-anim .ib[data-anim="flip"]:not(.in),
html.js-anim .ib[data-anim="text"]:not(.in){opacity:0}
html.js-anim .ib.in[data-anim="fade-up"]{animation:ibFadeUp .9s var(--ib-ease) backwards;animation-delay:calc(var(--ib-i,0) * 110ms)}
html.js-anim .ib.in[data-anim="slide-left"]{animation:ibSlideL .9s var(--ib-ease) backwards;animation-delay:calc(var(--ib-i,0) * 110ms)}
html.js-anim .ib.in[data-anim="slide-right"]{animation:ibSlideR .9s var(--ib-ease) backwards;animation-delay:calc(var(--ib-i,0) * 110ms)}
html.js-anim .ib.in[data-anim="zoom"]{animation:ibZoom .8s var(--ib-ease) backwards;animation-delay:calc(var(--ib-i,0) * 110ms)}
html.js-anim .ib.in[data-anim="flip"]{animation:ibFlip 1s var(--ib-ease) backwards;animation-delay:calc(var(--ib-i,0) * 110ms);transform-origin:50% 0}
html.js-anim .ib.in[data-anim="text"]{animation:ibFade .5s ease backwards;animation-delay:calc(var(--ib-i,0) * 110ms)}
html.js-anim .ib[data-anim="text"]:not(.in) .ib-ch{opacity:0}
html.js-anim .ib.in[data-anim="text"] .ib-ch{animation:ibChar .75s var(--ib-ease) backwards;animation-delay:calc(var(--ib-i,0) * 110ms + var(--i,0) * 32ms + 140ms)}

@keyframes ibFadeUp{from{opacity:0;transform:translateY(38px) scale(.97)}to{opacity:1;transform:none}}
@keyframes ibSlideL{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}}
@keyframes ibSlideR{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}}
@keyframes ibZoom{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes ibFlip{from{opacity:0;transform:perspective(700px) rotateX(-85deg)}to{opacity:1;transform:none}}
@keyframes ibFade{from{opacity:0}to{opacity:1}}
@keyframes ibChar{from{opacity:0;transform:translateY(.7em) rotateX(-70deg);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes ibWiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

@media (max-width:560px){.ib-wrap{grid-template-columns:minmax(0,1fr)}.ib{min-height:58px;padding:11px 14px}}
@media (prefers-reduced-motion:reduce){.ib,.ib *,.ib::before{animation:none!important;transition:none!important}.ib[data-anim]{opacity:1!important}.ib[data-anim="scrub"]{translate:none;scale:none}.ib-ch{opacity:1!important}}

/* =========================================================
   3. Chuyển động khi cuộn cho toàn trang công khai (motion.js)
   Chỉ áp dụng khi JS đã bật; khối dùng translate/scale/opacity
   nên không xung đột với hiệu ứng hover có sẵn (transform/filter).
   ========================================================= */
html.js-anim body.site-public{animation:ybPageIn .7s ease backwards}
@keyframes ybPageIn{from{opacity:0}to{opacity:1}}
html.js-anim [data-rv="box"]{opacity:var(--rv,0);translate:0 calc((1 - var(--rv,0)) * 56px);scale:calc(.9 + var(--rv,0) * .1)}
html.js-anim [data-rv="text"] .rv-w{display:inline-block;opacity:var(--wp,0);translate:0 calc((1 - var(--wp,0)) * .5em);filter:blur(calc((1 - var(--wp,0)) * 6px))}
@media (prefers-reduced-motion:reduce){html.js-anim body.site-public{animation:none}}