/*

TemplateMo 579 Cyborg Gaming

https://templatemo.com/tm-579-cyborg-gaming

*/
    /* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
    /* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
    
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
    /* 
---------------------------------------------
reset
--------------------------------------------- 
*/
    
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    div pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    font,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    figure,
    header,
    nav,
    section,
    article,
    aside,
    footer,
    figcaption {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        cursor: url("https://unblockedgames88.gitlab.io/assets/images/cursor.png") 0 0, auto !important;
    }
    
    .clearfix:after {
        content: ".";
        display: block;
        clear: both;
        visibility: hidden;
        line-height: 0;
        height: 0;
    }
    
    .clearfix {
        display: inline-block;
    }
    
    html[xmlns] .clearfix {
        display: block;
    }
    
    * html .clearfix {
        height: 1%;
    }
    
    ul,
    li {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    header,
    nav,
    section,
    article,
    aside,
    footer,
    hgroup {
        display: block;
    }
    
    * {
        box-sizing: border-box;
    }
    
    html,
    body {
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        /* Solid fallback color only -- the animated gradient itself lives
           on body::before now (see below). It used to be painted directly
           on html/body, which on a tall page (long games grid) forced the
           browser to repaint that whole animated gradient across every
           newly-exposed area on every scroll frame; a fast/fling scroll
           would outrun the repaint and flash the raw white canvas for a
           frame before the gradient caught up. */
        background-color: #100d28;
        font-size: 16px;
        -ms-text-size-adjust: 100%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Dark "gaming" gradient background.
       2026-09-11, take 2: the real bug (confirmed from the user's own
       screen recording) is that `body::before` is `position:fixed;
       inset:0` -- deliberately covering the *full viewport* so a short
       page (category pages before the JS grid fills in, or any page
       whose content ends above the viewport bottom) never shows a raw
       gap below the footer. That's correct and needed. The bug was the
       5-stop gradient having one very bright/saturated stop (#7b2ff7)
       among darker ones: whenever that stop was the part showing in the
       uncovered area below the footer, it read as a jarring colored
       band. First attempt kept the animation (so it swept through that
       bright stop every ~12s -> periodic flash). Second attempt froze
       the position -- which happened to land ON the bright stop, so it
       went from "flashes every 12s" to "on permanently" (visible in the
       user's screenshots). Fix: drop the bright stop entirely and keep
       only close, dark tones -- now *no* position/phase of this
       background can ever look like a stray bright patch, animated or
       not, wherever it happens to peek through. */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;
        background: linear-gradient(-45deg, #100d28, #1a1240, #241659, #1a1240, #100d28);
    }

    /* Soft neon glow blobs layered on top for a bit of modern esports
       polish -- low opacity so text contrast is untouched.
       2026-09-11: removed. These sat on `position: fixed` (pinned to the
       *viewport*, not the document), and on any page whose content is
       fetched by JS after first paint (category pages via getActionGames()
       etc., where the grid is empty until the fetch resolves) the page is
       briefly too short to have opaque content over that screen area --
       so the blob (particularly the bottom-right one, over the still-empty
       footer/grid area) flashed clearly visible for a moment, then got
       covered once the grid populated and grew the page. Corner-tucking
       and lowering the opacity (the previous mitigation, see git history)
       didn't fully hide it. Simplest reliable fix is to drop the blobs --
       body::before's gradient alone still carries the "gaming"
       background. */

    a {
        color: #CCC;
        text-decoration: none !important;
        cursor: pointer;
    }
    
    a:hover {
        color: #F99;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-top: 0px;
        margin-bottom: 0px;
        color: #fff;
        font-weight: 700;
    }
    
    ul {
        margin-bottom: 0px;
    }
    
    p {
        font-size: 15px;
        line-height: 30px;
        color: #fff;
    }
    
    img {
        width: 100%;
        overflow: hidden;
    }
    /* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
    
    html,
    body {
        font-family: 'Poppins', sans-serif;
    }
    
    body .page-content {
        margin-top: 90px;
        /* background-color: #27292a; */
        padding-bottom: 60px;
        padding-top: 70px;
        border-radius: 23px;
        min-height: 73vh;
    }
    
    p {
        font-size: 15px;
        color: #666;
        line-height: 30px;
        margin-bottom: 0px;
    }
    
     ::selection {
        background: #e75e8d;
        color: #fff;
    }
    
     ::-moz-selection {
        background: #e75e8d;
        color: #fff;
    }
    
    .templatemo-item {
        max-width: 80px;
        border-radius: 23px;
    }
    
    .main-button a {
        font-size: 14px;
        color: #fff;
        background-color: #e75e8d;
        padding: 12px 30px;
        display: inline-block;
        border-radius: 25px;
        font-weight: 400;
        text-transform: capitalize;
        letter-spacing: 0.5px;
        transition: all .3s;
        position: relative;
        overflow: hidden;
    }
    
    .main-button a:hover {
        background-color: #fff;
        color: #e75e8d;
    }
    
    .main-border-button a {
        font-size: 14px;
        color: #ec6090;
        background-color: transparent;
        border: 1px solid #ec6090;
        padding: 12px 30px;
        display: inline-block;
        border-radius: 25px;
        font-weight: 400;
        text-transform: capitalize;
        letter-spacing: 0.5px;
        transition: all .3s;
        position: relative;
        overflow: hidden;
    }
    
    .main-border-button a:hover {
        border-color: #fff;
        background-color: #fff;
        color: #e75e8d;
    }
    
    .border-no-active a {
        border-color: #666;
        color: #666;
    }
    
    .border-no-active a:hover {
        border-color: #666;
        color: #666;
        background-color: transparent;
    }
    
    section {
        margin-top: 120px;
    }
    
    .heading-section h4 {
        color: #ec6090;
        font-size: 34px;
        text-decoration: none;
        margin-bottom: 30px;
        font-family: 'Rajdhani', sans-serif;
    }
    
    .heading-section h4 em {
        color: #fff;
        font-style: normal;
        text-decoration: underline;
    }
    /* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/
    
    .js-preloader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.99);
        display: -webkit-box;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        opacity: 1;
        visibility: visible;
        z-index: 9999;
        -webkit-transition: opacity 0.25s ease;
        transition: opacity 0.25s ease;
    }
    
    .js-preloader.loaded {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    
    @-webkit-keyframes dot {
        50% {
            -webkit-transform: translateX(96px);
            transform: translateX(96px);
        }
    }
    
    @keyframes dot {
        50% {
            -webkit-transform: translateX(96px);
            transform: translateX(96px);
        }
    }
    
    @-webkit-keyframes dots {
        50% {
            -webkit-transform: translateX(-31px);
            transform: translateX(-31px);
        }
    }
    
    @keyframes dots {
        50% {
            -webkit-transform: translateX(-31px);
            transform: translateX(-31px);
        }
    }
    
    .preloader-inner {
        position: relative;
        width: 142px;
        height: 40px;
        background: transparent;
    }
    
    .preloader-inner .dot {
        position: absolute;
        width: 16px;
        height: 16px;
        top: 12px;
        left: 15px;
        background: #e75e8d;
        border-radius: 50%;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        -webkit-animation: dot 2.8s infinite;
        animation: dot 2.8s infinite;
    }
    
    .preloader-inner .dots {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        margin-top: 12px;
        margin-left: 31px;
        -webkit-animation: dots 2.8s infinite;
        animation: dots 2.8s infinite;
    }
    
    .preloader-inner .dots span {
        display: block;
        float: left;
        width: 16px;
        height: 16px;
        margin-left: 16px;
        background: #e75e8d;
        border-radius: 50%;
    }
    /* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/
    
    .background-header {
        height: 70px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0;
        right: 0;
        display: none;
    }
    
    .header-area {
        background-color: transparent;
        position: absolute;
        height: auto;
        top: 15px;
        left: 0;
        right: 0;
        z-index: 100;
        -webkit-transition: all .5s ease 0s;
        -moz-transition: all .5s ease 0s;
        -o-transition: all .5s ease 0s;
        transition: all .5s ease 0s;
    }
    
    .header-area .main-nav {
        min-height: 80px;
        background: transparent;
        display: flex;
        padding: 15px 0px;
        border-radius: 50px;
        width: 100vw;
        align-items: center;
    }
    
    .background-header .main-nav {
        padding: 0px;
        background-color: transparent;
    }
    
    .header-area .main-nav #search {
        position: relative;
    }
    
    .header-area .main-nav #search input {
        background-color: burlywood;
        height: 46px;
        border-radius: 23px;
        border: none;
        color: #666;
        font-size: 14px;
        padding: 0px 15px 0px 45px;
    }
    
    .header-area .main-nav #search i {
        position: absolute;
        color: #666;
        left: 20px;
        top: 16px;
        width: 18px;
        height: 18px;
        font-size: 16px;
    }
    
    .header-area .main-nav .logo {
        /* border-right: 1px solid #27292a; */
        flex-basis: 15%;
        margin-right: 5%;
        margin-left: 3%;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
    }
    
    .header-area .main-nav .logo img {
        width: 110px;
        border-radius: 30px;
    }
    
    .background-header .main-nav .logo {
        margin-top: 8px;
    }
    
    .background-header .main-nav .logo img {
        width: 180px;
    }
    
    .header-area .main-nav .nav {
        display: inline-flex;
        flex-basis: 80%;
        justify-content: flex-end;
        vertical-align: middle;
        text-align: right;
        margin-top: 0px;
        margin-right: 0px;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        position: relative;
        z-index: 999;
        justify-content: center;
    }
    
    .header-area .main-nav .nav li {
        padding-left: 10px;
        padding-right: 10px;
        display: inline-block;
        margin: 3px;
    }
    
    .header-area .main-nav .nav li a {
        display: block;
        font-weight: 400;
        font-size: 14px;
        text-transform: capitalize;
        color: #666;
        -webkit-transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
        transition: all 0.3s ease 0s;
        border: transparent;
        padding: 13px 10px;
        border-radius: 18px;
        letter-spacing: .3px;
        background-color: #27292a;
        padding: 8px 10px 8px 20px;
        border-radius: 23px;
    }
    
    .header-area .main-nav .nav li a img {
        max-width: 30px;
        height: 30px !important;
        border-radius: 50%;
        margin-left: 5px;
    }
    
    .header-area .main-nav .nav li.has-sub ul.sub-menu li a:hover,
    .background-header .main-nav .nav li.has-sub ul.sub-menu li a:hover {
        padding-left: 25px !important;
    }
    
    .header-area .main-nav .nav li:hover a,
    .header-area .main-nav .nav li a.active {
        color: #fff !important;
        background-color: #e75e8d !important;
    }
    
    .background-header .main-nav .nav li:hover a,
    .background-header .main-nav .nav li a.active {
        color: #fff;
        opacity: 1;
    }
    
    .header-area .main-nav .nav li:last-child a {
        background-color: #27292a;
        padding: 8px 10px 8px 20px;
        border-radius: 23px;
    }
    
    .header-area .main-nav .nav li:last-child a img {
        max-width: 30px;
        height: 30px !important;
        border-radius: 50%;
        margin-left: 5px;
    }
    
    .header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
    .background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
        padding-left: 25px !important;
    }
    /* .header-area .main-nav .nav li:hover a,
    .header-area .main-nav .nav li a.active {
        color: #e75e8d !important;
    } */
    
    .header-area .main-nav .nav li:last-child:hover a,
    .header-area .main-nav .nav li:last-child a.active {
        color: #fff !important;
        background-color: #e75e8d !important;
    }
    
    .background-header .main-nav .nav li:hover a,
    .background-header .main-nav .nav li a.active {
        color: #fff;
        opacity: 1;
    }
    
    .header-area .main-nav .nav li.has-sub {
        position: relative;
        padding-right: 15px;
    }
    
    .header-area .main-nav .menu-trigger {
        cursor: url("https://unblockedgames88.gitlab.io/assets/images/cursor.png"), auto;
        display: block;
        position: absolute;
        top: 23px;
        width: 32px;
        height: 40px;
        text-indent: -9999em;
        z-index: 99;
        right: 20px;
        display: none;
    }
    
    .background-header .main-nav .menu-trigger {
        top: 17px;
    }
    
    .header-area .main-nav .menu-trigger span,
    .header-area .main-nav .menu-trigger span:before,
    .header-area .main-nav .menu-trigger span:after {
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        background-color: #e75e8d;
        display: block;
        position: absolute;
        width: 30px;
        height: 2px;
        left: 0;
    }
    
    .background-header .main-nav .menu-trigger span,
    .background-header .main-nav .menu-trigger span:before,
    .background-header .main-nav .menu-trigger span:after {
        background-color: #e75e8d;
    }
    
    .header-area .main-nav .menu-trigger span:before,
    .header-area .main-nav .menu-trigger span:after {
        -moz-transition: all 0.4s;
        -o-transition: all 0.4s;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        background-color: #e75e8d;
        display: block;
        position: absolute;
        width: 30px;
        height: 2px;
        left: 0;
        width: 75%;
    }
    
    .background-header .main-nav .menu-trigger span:before,
    .background-header .main-nav .menu-trigger span:after {
        background-color: #e75e8d;
    }
    
    .header-area .main-nav .menu-trigger span:before,
    .header-area .main-nav .menu-trigger span:after {
        content: "";
    }
    
    .header-area .main-nav .menu-trigger span {
        top: 50%;
        transform: translateY(-50%);
    }
    
    .header-area .main-nav .menu-trigger span:before {
        -moz-transform-origin: 33% 100%;
        -ms-transform-origin: 33% 100%;
        -webkit-transform-origin: 33% 100%;
        transform-origin: 33% 100%;
        top: -10px;
        z-index: 10;
    }
    
    .header-area .main-nav .menu-trigger span:after {
        -moz-transform-origin: 33% 0;
        -ms-transform-origin: 33% 0;
        -webkit-transform-origin: 33% 0;
        transform-origin: 33% 0;
        top: 10px;
    }
    
    .header-area .main-nav .menu-trigger.active span,
    .header-area .main-nav .menu-trigger.active span:before,
    .header-area .main-nav .menu-trigger.active span:after {
        background-color: transparent;
        width: 100%;
    }
    
    .header-area .main-nav .menu-trigger.active span:before {
        -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
        -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
        -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
        transform: translateY(6px) translateX(1px) rotate(45deg);
        background-color: #e75e8d;
    }
    
    .background-header .main-nav .menu-trigger.active span:before {
        background-color: #e75e8d;
    }
    
    .header-area .main-nav .menu-trigger.active span:after {
        -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
        -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
        -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
        transform: translateY(-6px) translateX(1px) rotate(-45deg);
        background-color: #e75e8d;
    }
    
    .background-header .main-nav .menu-trigger.active span:after {
        background-color: #e75e8d;
    }
    
    .header-area.header-sticky {
        min-height: 70px;
    }
    
    .header-area.header-sticky .nav li a.active {
        color: #fff;
    }
    
    @media (min-width: 2000px) {
        .most-popular .item img {
            height: 215px !important;
        }
    }
    /* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/
    
    .name-game {
        text-align: center;
        margin-bottom: 20px;
        font-family: 'Rajdhani', sans-serif;
    }
    
    .full-screen {
        font-size: 30px;
        position: absolute !important;
        right: 0px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
    }
    
    s .full-screen i {
        color: aliceblue;
    }
    
    .main-banner {
        /* background-image: url(../images/banner-bg.jpg); */
        background-position: center center;
        background-size: cover;
        /* min-height: 380px; */
        border-radius: 23px;
        padding: 20px 80px;
        margin-top: 20px;
    }
    
    .main-banner h6 {
        font-size: 20px;
        color: #fff;
        font-weight: 400;
        margin-bottom: 25px;
    }
    
    .main-banner h4 {
        font-size: 25px;
        text-transform: uppercase;
        margin-top: 15px;
    }
    
    .main-banner h4 em {
        font-style: normal;
        color: #ec6090;
    }
    
    .ads-top {
        display: none !important;
        justify-content: center;
        margin-bottom: 3px;
    }
    
    .infor-first p {
        font-size: 19px;
        color: darkcyan;
        line-height: 30px;
        margin-bottom: 0px;
        font-family: cursive;
        /* display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column; */
    }
    
    .infor-first p a:hover {
        color: blanchedalmond;
    }
    
    .description-game p {
        font-size: 17px;
        color: darkcyan;
        line-height: 30px;
        margin-bottom: 0px;
        font-family: monospace;
    }
    
    .howtoplay-game span {
        font-weight: 700;
        color: aliceblue;
    }
    
    .howtoplay-game p {
        font-size: 17px;
        color: darkcyan;
        line-height: 30px;
        margin-bottom: 0px;
        font-family: monospace;
    }
    /* 
---------------------------------------------
Most Popular Style
--------------------------------------------- 
*/
    
    .most-popular {
        /* margin-top: 60px; */
        padding: 30px;
        background-color: transparent;
        border-radius: 23px;
        padding-bottom: 0px;
    }
    
    .most-popular .item {
        background-color: #27292a;
        padding: 18px 10px;
        border-radius: 18px;
        margin-bottom: 20px;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
    }
    
    .most-popular .item .item {
        padding: 0;
        border-radius: 0;
        background-color: transparent;
        margin-bottom: 0;
    }
    
    .most-popular .item img {
        border-radius: 16px;
        height: 100px;
        width: 100%;
        /* Tốt hơn để ảnh co giãn */
        object-fit: cover;
        transition: transform 0.4s ease;
        display: block;
    }
    
    /* 2026-08-28: was ".item:hover" -- triggered by hovering ANYWHERE in
       the card, including the <h4> title below the thumbnail, which sits
       OUTSIDE the <a> (see loadallgames.js/getsimilargames.js/historyplay.js
       templates: "<a><img></a><h4>title</h4>", siblings, not nested). That
       made the whole card visually pop/zoom on title hover too, looking
       clickable there when it wasn't -- ":has(a:hover)" instead only
       triggers this (and the two rules below) while the actual link is
       hovered, so anywhere the card visibly reacts is actually clickable. */
    .most-popular .item:has(a:hover) {
        transform: scale(1.05);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
    }

    .most-popular .item:has(a:hover) img {
        transform: scale(1.1);
    }
    
    .most-popular .item img:hover {
        cursor: url("https://unblockedgames88.gitlab.io/assets/images/cursor.png"), auto;
    }
    
    .most-popular .item h4 {
        font-size: 13px;
        margin-top: 16px;
        margin-bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        text-align: center;
        transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), color 0.4s ease;
        cursor: default;
    }
    
    .most-popular .item:has(a:hover) h4 {
        transform: translateY(-12px) scale(1.08);
        color: #ffbb33;
        text-shadow: 0 4px 10px rgba(255, 187, 51, 0.7);
    }
    
    .most-popular .item span {
        color: burlywood;
        display: block;
        font-weight: 400;
    }
    
    .most-popular .item span.playcount-badge {
        color: #7fe3c0;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .2px;
    }
    
    .most-popular .item span.playcount-badge i {
        margin-left: 3px;
        color: #4ecca3;
    }
    
    .most-popular .item ul {
        float: right;
        margin-top: 20px;
    }
    
    .most-popular .item ul li {
        text-align: right;
        color: #fff;
        font-size: 14px;
    }
    
    .most-popular .item ul li:first-child i {
        color: yellow;
    }
    
    .most-popular .item ul li:last-child i {
        color: #ec6090;
    }
    
    .most-popular .main-button {
        text-align: center;
        margin-bottom: -53px;
    }
    /* 
---------------------------------------------
Gaming Library Style
--------------------------------------------- 
*/
    
    .gaming-library {
        margin-top: 60px;
        padding: 30px;
        background-color: #1f2122;
        border-radius: 23px;
    }
    
    .gaming-library .item {
        border-bottom: 1px solid #27292a;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    .gaming-library .last-item {
        margin-bottom: 30px;
    }
    
    .profile-library .last-item {
        border-bottom: none;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    
    .gaming-library .item ul li {
        margin-top: 15px;
    }
    
    .gaming-library .item ul li img {
        margin-top: -30px;
    }
    
    .gaming-library .item ul li {
        display: inline-block;
        width: 17%;
    }
    
    .gaming-library .item ul li:first-child {
        width: 110px;
    }
    
    .gaming-library .item ul li:last-child {
        width: 15%;
        text-align: right;
    }
    
    .gaming-library .item ul li h4 {
        font-size: 15px;
        margin-bottom: 5px;
    }
    
    .gaming-library .item ul li span {
        color: #666;
        font-size: 14px;
    }
    
    .gaming-library .main-button {
        text-align: center;
        margin-bottom: -53px;
    }
    /* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/
    
    footer p {
        text-align: center;
        color: #fff;
        font-weight: 300;
    }
    
    footer p a {
        color: #fff;
        transition: all .3s;
    }
    
    footer p a:hover {
        color: #ec6090;
    }
    /* 
---------------------------------------------
Featured Games Style
--------------------------------------------- 
*/
    
    .featured-games {
        border-radius: 23px;
        background-color: #1f2122;
        padding: 30px;
    }
    
    .featured-games .item .thumb {
        position: relative;
        overflow: hidden;
    }
    
    .featured-games .item .thumb .hover-effect {
        position: absolute;
        bottom: -100px;
        text-align: center;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        transition: all .4s;
    }
    
    .featured-games .item .thumb:hover .hover-effect {
        opacity: 1;
        visibility: visible;
        bottom: 15px;
    }
    
    .featured-games .item .thumb .hover-effect h6 {
        background-color: rgba(31, 33, 34, 0.95);
        display: inline-block;
        color: #ec6090;
        font-weight: 600;
        font-size: 14px;
        padding: 10px 20px;
        border-radius: 25px;
    }
    
    .featured-games .item img {
        border-radius: 23px;
    }
    
    .featured-games .item h4 {
        font-size: 15px;
        margin-top: 20px;
        margin-bottom: 0px;
        display: inline-block;
    }
    
    .featured-games .item span {
        color: #666;
        display: block;
        margin-top: 7px;
        font-weight: 400;
    }
    
    .featured-games .item ul {
        float: right;
        margin-top: 20px;
    }
    
    .featured-games .item ul li {
        text-align: right;
        color: #fff;
        font-size: 14px;
    }
    
    .featured-games .item ul li:first-child i {
        color: yellow;
    }
    
    .featured-games .item ul li:last-child i {
        color: #ec6090;
    }
    
    .featured-games .owl-nav {
        position: absolute;
        margin: 0 auto;
        top: -70px;
        right: 0;
    }
    
    .featured-games .owl-nav .owl-prev {
        margin-right: 2.5px;
    }
    
    .featured-games .owl-nav .owl-next {
        margin-left: 2.5px;
    }
    
    .featured-games .owl-nav .owl-prev span,
    .featured-games .owl-nav .owl-next span {
        font-size: 36px;
        display: inline-block;
        color: #666;
        opacity: 1;
        transition: all .3s;
    }
    
    .featured-games .owl-nav .owl-prev span:hover,
    .featured-games .owl-nav .owl-next span:hover {
        opacity: 1;
        color: #ec6090;
    }
    
    .top-downloaded {
        border-radius: 23px;
        background-color: #1f2122;
        padding: 30px;
        max-height: 567px;
        min-height: 567px;
    }
    
    .top-downloaded ul li {
        position: relative;
        display: inline-block;
        width: 100%;
    }
    
    .top-downloaded ul li img {
        float: left;
        margin-right: 15px;
    }
    
    .top-downloaded ul li h4 {
        font-size: 15px;
        padding-top: 7px;
    }
    
    .top-downloaded ul li h6 {
        font-size: 15px;
        color: #666;
        font-weight: 400;
        margin-top: 5px;
        margin-bottom: 5px;
    }
    
    .top-downloaded ul li span {
        color: #fff;
        font-size: 15px;
        margin-right: 10px;
    }
    
    .top-downloaded ul li .download i {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-23px);
        width: 46px;
        height: 46px;
        text-align: center;
        line-height: 46px;
        color: #ec6090;
        background-color: #27292a;
        border-radius: 50%;
    }
    
    .top-downloaded ul li {
        border-bottom: 1px solid #27292a;
        margin-bottom: 28px;
        padding-bottom: 28px;
    }
    
    .top-downloaded .text-button {
        text-align: center;
    }
    
    .top-downloaded .text-button a {
        font-weight: 600;
        color: #ec6090;
        font-size: 15px;
    }
    /* 
---------------------------------------------
Start Stream Style
--------------------------------------------- 
*/
    
    .start-stream .heading-section {
        margin-top: 60px;
        text-align: center;
        margin-bottom: 60px;
    }
    
    .start-stream .item {
        padding: 30px;
        border: 1px solid #444;
        border-radius: 23px;
    }
    
    .start-stream .item h4 {
        font-size: 20px;
        margin-top: 20px;
        margin-bottom: 15px;
        font-weight: 600;
    }
    
    .start-stream .main-button {
        text-align: center;
        margin-top: 30px;
    }
    /* 
---------------------------------------------
Live Stream Style
--------------------------------------------- 
*/
    
    .live-stream {
        margin-top: 60px;
        border-radius: 23px;
        background-color: #1f2122;
        padding: 30px;
    }
    
    .live-stream .item {
        margin-bottom: 30px;
    }
    
    .live-stream .thumb {
        position: relative;
        overflow: hidden;
        margin-bottom: 20px;
    }
    
    .live-stream .thumb img {
        border-radius: 23px;
    }
    
    .live-stream .thumb:hover .hover-effect {
        opacity: 1;
        visibility: visible;
    }
    
    .live-stream .hover-effect {
        opacity: 0;
        visibility: hidden;
        transition: all .4s;
    }
    
    .live-stream .hover-effect .live a {
        position: absolute;
        background-color: rgba(236, 96, 144, 0.9);
        padding: 5px 10px;
        border-radius: 23px;
        color: #fff;
        font-size: 14px;
        right: 15px;
        top: 15px;
    }
    
    .live-stream .hover-effect ul {
        position: absolute;
        bottom: 20px;
        text-align: center;
        width: 100%;
    }
    
    .live-stream .hover-effect ul li {
        display: inline-block;
        margin: 0px 5px;
    }
    
    .live-stream .hover-effect ul li a {
        background-color: rgba(236, 96, 144, 0.9);
        padding: 5px 10px;
        border-radius: 23px;
        color: #fff;
        font-size: 14px;
    }
    
    .live-stream .avatar img {
        margin-right: 15px;
    }
    
    .live-stream span i {
        color: #fff;
        background-color: #ec6090;
        border-radius: 50%;
        font-size: 12px;
        width: 20px;
        height: 20px;
        display: inline-block;
        text-align: center;
        line-height: 20px;
        margin-right: 3px;
    }
    
    .live-stream span {
        font-size: 14px;
        color: #ec6090;
    }
    
    .live-stream .down-content h4 {
        margin-top: 8px;
        font-size: 20px;
        font-weight: 700;
        margin-left: 61px;
    }
    
    .live-stream .main-button {
        text-align: center;
        margin-bottom: -53px;
    }
    /* 
---------------------------------------------
Featured Banner Style
--------------------------------------------- 
*/
    
    .feature-banner .thumb {
        position: relative;
        max-height: 305px;
        overflow: hidden;
        border-radius: 23px;
        ;
    }
    
    .feature-banner .thumb a {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-23px, -23px);
        width: 46px;
        height: 46px;
        background-color: #fff;
        border-radius: 50%;
        display: inline-block;
        text-align: center;
        line-height: 46px;
        color: #ec6090;
    }
    /* 
---------------------------------------------
Game Details Style
--------------------------------------------- 
*/
    
    .game-details h2 {
        font-size: 45px;
        text-transform: uppercase;
        text-align: center;
        margin: 60px 0px;
    }
    
    .game-details .content {
        border-radius: 23px;
        padding: 30px;
        background-color: #1f2122;
    }
    
    .game-details .content .left-info {
        background-color: #27292a;
        border-radius: 23px;
        padding: 30px;
        margin-bottom: 30px;
    }
    
    .game-details .content .left-info .left {
        float: left;
    }
    
    .game-details .content .left-info h4 {
        font-size: 15px;
        display: block;
    }
    
    .game-details .content .left-info span {
        color: #666;
        display: block;
        margin-top: 7px;
        font-weight: 400;
    }
    
    .game-details .content .left-info ul {
        text-align: right;
    }
    
    .game-details .content .left-info ul li {
        color: #fff;
        font-size: 14px;
        margin-bottom: 3px;
    }
    
    .game-details .content .left-info ul li:first-child i {
        color: yellow;
    }
    
    .game-details .content .left-info ul li:last-child i {
        color: #ec6090;
    }
    
    .game-details .content .right-info {
        background-color: #27292a;
        border-radius: 23px;
        padding: 30px;
        margin-bottom: 30px;
    }
    
    .game-details .content .right-info ul li {
        display: inline-block;
        width: 23%;
        text-align: center;
        font-size: 14px;
        color: #fff;
    }
    
    .game-details .content .right-info ul li i {
        display: block;
        margin-bottom: 12px;
    }
    
    .game-details .content .right-info ul li:first-child i {
        color: yellow;
    }
    
    .game-details .content .right-info ul li i {
        color: #ec6090;
    }
    
    .game-details .main-border-button {
        margin-top: 35px;
    }
    
    .game-details .main-border-button a {
        text-align: center;
        width: 100%;
    }
    /* 
---------------------------------------------
Other Related Style
--------------------------------------------- 
*/
    
    .other-games {
        border-radius: 23px;
        padding: 30px 30px 0px 30px;
        background-color: #1f2122;
        margin-top: 60px;
    }
    
    .other-games .item {
        position: relative;
        border-bottom: 1px solid #27292a;
        padding-bottom: 52px;
        margin-bottom: 30px;
    }
    
    .other-games .item img {
        float: left;
        margin-right: 15px;
    }
    
    .other-games .item h4 {
        display: inline-block;
        font-size: 15px;
        margin-bottom: 5px;
        padding-top: 15px;
    }
    
    .other-games .item span {
        color: #666;
        font-size: 14px;
        display: block;
    }
    
    .other-games ul {
        position: absolute;
        right: 0;
        top: 15px;
    }
    
    .other-games ul li {
        color: #fff;
        font-size: 14px;
        margin-bottom: 3px;
    }
    
    .other-games ul li:first-child i {
        color: yellow;
    }
    
    .other-games ul li:last-child i {
        color: #ec6090;
    }
    /* 
---------------------------------------------
Top Streamers Style
--------------------------------------------- 
*/
    
    .top-streamers {
        border-radius: 23px;
        background-color: #1f2122;
        padding: 30px;
        max-height: 567px;
        min-height: 567px;
    }
    
    .top-streamers ul li {
        display: inline-block;
        width: 100%;
        border-bottom: 1px solid #353637;
        margin-bottom: 25px;
        padding-bottom: 25px;
    }
    
    .top-streamers ul li:last-child {
        border-bottom: none;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }
    
    .top-streamers ul li span {
        float: left;
        font-size: 15px;
        color: #fff;
        font-weight: 700;
        padding-top: 12px;
        margin-right: 10px;
    }
    
    .top-streamers ul li h6 {
        display: inline;
        font-size: 14px;
        color: #ec6090;
        font-weight: 400;
    }
    
    .top-streamers ul li h6 i {
        color: #fff;
        background-color: #ec6090;
        border-radius: 50%;
        font-size: 12px;
        width: 20px;
        height: 20px;
        display: inline-block;
        text-align: center;
        line-height: 20px;
        margin-right: 3px;
    }
    
    .top-streamers ul li .main-button {
        float: right;
    }
    
    .top-streamers ul li .main-button a {
        padding: 8px 20px;
    }
    /* 
---------------------------------------------
Profile Style
--------------------------------------------- 
*/
    
    .main-profile {
        border-radius: 23px;
        padding: 30px;
        background-color: #1f2122;
    }
    
    .main-profile .main-info span {
        font-size: 14px;
        color: #fff;
        background-color: #e75e8d;
        padding: 8px 20px;
        display: inline-block;
        border-radius: 25px;
        font-weight: 400;
        text-transform: capitalize;
        letter-spacing: 0.5px;
        margin-bottom: 15px;
    }
    
    .main-profile .main-info h4 {
        margin-bottom: 20px;
    }
    
    .main-profile .main-info .main-border-button {
        margin-top: 25px;
    }
    
    .main-profile ul {
        border-radius: 23px;
        padding: 30px;
        background-color: #27292a;
    }
    
    .main-profile ul li {
        width: 100%;
        font-size: 14px;
        color: #666;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #666;
    }
    
    .main-profile ul li span {
        float: right;
        font-weight: 500;
        color: #ec6090;
    }
    
    .main-profile ul li:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    
    .clips {
        margin-top: 30px;
        border-top: 2px solid #27292a;
    }
    
    .clips .heading-section {
        margin-top: 30px;
    }
    
    .clips .item {
        border-radius: 23px;
        padding: 30px 15px;
        background-color: #27292a;
        margin-bottom: 30px;
    }
    
    .clips .item .thumb {
        position: relative;
        margin-bottom: 15px;
    }
    
    .clips .item .thumb a {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-23px, -23px);
        width: 46px;
        height: 46px;
        background-color: #fff;
        border-radius: 50%;
        display: inline-block;
        text-align: center;
        line-height: 46px;
        color: #ec6090;
    }
    
    .clips .item h4 {
        font-size: 15px;
        display: inline-block;
    }
    
    .clips .item span i {
        color: #ec6090;
    }
    
    .clips .item span {
        float: right;
        color: #fff;
        font-size: 14px;
    }
    
    .clips .main-button {
        margin-top: 10px;
        text-align: center;
    }
    /* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/
    
    body {
        overflow-x: hidden;
    }
    
    @media (max-width: 767px) {
        body .page-content {
            padding: 0px 30px;
        }
        .main-banner {
            text-align: center;
            padding: 20px 0px !important;
        }
        .main-banner h4 {
            font-size: 35px;
        }
        .gaming-library .item ul li,
        .gaming-library .item ul li:first-child,
        .gaming-library .item ul li:last-child {
            width: 100% !important;
            text-align: center !important;
        }
        .gaming-library .item ul li {
            margin-top: 30px;
        }
        .top-downloaded ul li .download i {
            top: 20px;
            width: 30px;
            height: 30px;
            line-height: 30px;
        }
        .top-downloaded ul li img {
            margin-right: 10px;
        }
        .top-downloaded ul li span {
            font-size: 14px;
        }
        .top-streamers ul li .main-button {
            float: none;
            margin-top: 10px;
        }
        .top-streamers ul li .main-button a {
            width: 100%;
            text-align: center;
        }
        .top-streamers,
        .top-downloaded {
            max-height: 100%;
            min-height: 100%;
        }
        .most-popular .item .inner-item {
            margin-bottom: 20px;
        }
    }
    
    @media (max-width: 992px) {
        .background-header {
            display: inline-block;
            background-color: #1a1a1a;
        }
        .heading-section h4 {
            font-size: 20px;
        }
        .gaming-library .item ul li {
            width: 48% !important;
        }
        .gaming-library .item ul li:last-child {
            text-align: left;
        }
        .featured-games {
            margin-bottom: 60px;
        }
        .start-stream .item {
            margin: 15px 0px;
        }
        .feature-banner .thumb {
            margin-top: 30px;
        }
        .main-profile .main-info {
            margin: 45px 0px;
        }
        .ads {
            display: none;
        }
    }
    
    @media (max-width: 1200px) {
        /* .header-area .main-nav .nav li / .logo padding+margin rules
           removed 2026-08-26 -- dead weight now that the header switches
           to the hamburger layout (nav display:none) at 1300px, above
           this breakpoint. */
        .gaming-library .item ul li {
            width: 16%;
        }
    }
    /* Custom CSS */
    /* Body */
    
    .maincustom {
        display: flex;
        align-items: baseline;
        justify-content: center;
    }
    /* Details Games */
    /* Game frame zone */
    
    .gamezone {
        position: relative;
        display: flex;
    }
    /* .gamezone .ads:first-child {
        display: none !important;
    } */
    /* 2026-08-27: widened + made symmetric (was margin-right:20px /
       margin-left:5px) so there's real breathing room between the game
       area and the ad slots on either side (.gamezone > .col-lg-3.ads) --
       a client wants to place ads there and the two were sitting flush
       against / overlapping the game area at some widths. See the
       .parent_frame / .poki-actionbar / .infor-first comment below: their
       old negative-margin "bleed past this box" trick had to be dropped
       for the same reason (it ate straight into this new gap). */
    
    .main_game {
        margin-left: 30px;
        margin-right: 30px;
    }
    
    .game_tasks {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* .fullscreen / .fullscreen:hover / .fullscreen p removed 2026-08-26
       -- styled the old "Full Screen" text button in .game_tasks, which
       is gone from every game page now that .poki-actionbar's fullscreen
       icon replaces it. */
    
    .directlink {
        /* display: flex; */
        display: none;
        align-items: center;
        justify-content: center;
        padding: 10px;
        background-color: #27292a;
        color: #fff;
        border-radius: 30px;
        font-size: 20px;
        cursor: url("https://unblockedgames88.gitlab.io/assets/images/cursor.png"), auto;
    }
    
    .directlink:hover {
        background-color: #fff;
        color: #1f2122;
    }
    
    .directlink p {
        font-size: 20px;
        margin-right: 10px;
    }
    /* Footer Inormation */
    
    .information {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .information_website {
        padding: 10px 20px !important;
        background-color: lightcoral;
        margin: 10px;
        border-radius: 50px;
        width: auto;
    }
    
    .copyright {
        padding: 30px 0px;
    }
    /* Search Bar */
    
    .search-input {
        position: relative;
    }
    
    .result_search {
        position: absolute;
        width: 400px;
        height: 400px;
        background-color: currentColor;
        margin-top: 5px;
        z-index: 1000 !important;
        display: none;
        z-index: 1;
        padding: 10px 10px;
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        align-items: center;
        justify-content: space-around;
        column-gap: 10px;
        row-gap: 10px;
    }
    
    .result_search a {
        text-decoration: none;
        flex-basis: 23%;
        height: 150px;
        transition: .3s linear;
    }
    
    .result_search a:hover {
        scale: 1.02;
    }
    
    .result_search a .image_result {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .result_search a .image_result img {
        border-radius: 10px;
        width: 100px;
        height: 100px;
    }
    
    .result_search a .name_result {
        text-align: center;
    }
    
    .not_found {
        display: none;
        position: absolute;
        z-index: 1000 !important;
        width: 400px;
    }
    
    .not_found p {
        position: absolute;
        z-index: 3;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
    }
    /*     .main_game iframe {
        height: 600px !important;
    } */
    
    .ads_homepage {
        margin-top: 70px;
    }
    /* Custom Height Adsense Banner */
    /* Hover Link Home Page */
    
    .hover_link_homepage:hover {
        color: aliceblue;
    }
    /* Text Home Page */
    
    .content_homepage_main p {
        font-size: 22px;
        font-family: Quicksand500, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, ui-sans-serif, sans-serif;
        color: #3a5a95;
        padding: 20px 0;
        letter-spacing: 1px;
    }
    /* Update 15/9 */
    
    .main-heading {
        font-size: 38px;
        font-weight: 800;
        color: #ff6600;
        text-align: center;
        margin-bottom: 12px;
    }
    
    .sub-heading {
        font-size: 22px;
        font-weight: 600;
        color: #ffbb33;
        text-align: center;
        margin-bottom: 18px;
    }
    
    .infor-first p {
        font-family: 'Poppins', sans-serif;
        font-size: 20px;
        font-weight: 400;
        color: #ddd;
        text-align: center;
        margin: 0 auto;
        max-width: 820px;
    }
    /* 2026-08-27: <li> inside a game/category/homepage description never
       had its own color rule anywhere in this file (only <p> did, above)
       -- it was silently falling back to the browser's default black
       text, which happened to be readable-ish on the old lighter/plain
       backgrounds but goes nearly invisible on the .infor-first game-card
       background. Scoped the same way as ".infor-first p" so it applies
       everywhere that already gets the styled paragraph text, without
       touching unrelated "ul li" usages elsewhere (game grids, nav
       menus, etc. -- those all have their own specific selectors). */
    .infor-first li {
        font-family: 'Poppins', sans-serif;
        font-size: 20px;
        color: #ddd;
        line-height: 1.8;
    }
    /* ---- Long-form SEO copy inside a game page's .infor-first ----
       No wrapper element: the sibling selectors below only bite on pages
       that actually put an <h2> inside .infor-first (the SEO-rewritten
       ones), so the 480 pages with just two centred paragraphs are
       untouched. First paragraph stays centred like everywhere else; the
       long-form part that follows a heading goes left-aligned, because
       900 words of centred 20px text is unreadable. */
    
    .infor-first h2 {
        font-size: 25px;
        font-weight: 700;
        color: #ff6600;
        text-shadow: 0 0 10px rgba(255, 102, 0, .45);
        text-align: left;
        max-width: 860px;
        margin: 30px auto 12px;
    }
    
    .infor-first h3 {
        font-size: 19px;
        font-weight: 600;
        color: #00f2fe;
        text-align: left;
        max-width: 860px;
        margin: 20px auto 8px;
    }
    
    .infor-first h2 ~ p,
    .infor-first h3 ~ p {
        font-size: 17px;
        line-height: 1.8;
        text-align: left;
        max-width: 860px;
        margin: 0 auto 14px;
    }
    
    .infor-first h2 ~ ul {
        max-width: 860px;
        margin: 0 auto 18px;
        padding-left: 22px;
        list-style: disc;
        text-align: left;
    }
    
    .infor-first h2 ~ ul li {
        /* the global reset puts list-style:none straight on <li>, which
           beats anything inherited from the <ul> -- so the marker has to
           be restored here, not only on the list. */
        list-style: disc;
        font-size: 17px;
        line-height: 1.75;
        margin-bottom: 8px;
    }
    
    .infor-first h2 ~ p strong,
    .infor-first h2 ~ ul strong {
        color: #fff;
    }
    
    .infor-first h2 ~ p a {
        border-bottom: 1px dashed rgba(0, 242, 254, .5);
    }
    /* FAQ answers: every <h3> that is a question gets a quiet accent rail,
       which is all the "card" this needs without adding a wrapper div. */
    
    .infor-first h2 ~ h3 {
        border-left: 3px solid rgba(0, 242, 254, .35);
        padding-left: 12px;
    }
    
    @media (max-width: 575px) {
        .infor-first h2 {
            font-size: 21px;
        }
        .infor-first h3 {
            font-size: 17px;
        }
        .infor-first h2 ~ p,
        .infor-first h2 ~ ul li {
            font-size: 15.5px;
        }
    }
    
    /* 🔹 Nút Menu Chính (Action Games, IO Games, ...) */
    
    .header-area .main-nav .nav li a {
        font-size: 15px;
        font-weight: 600;
        color: #fff;
        background: linear-gradient(45deg, #27292a, #1f2122);
        border: 2px solid transparent;
        border-radius: 25px;
        padding: 10px 18px;
        margin: 5px;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 0 8px rgba(0, 242, 254, 0.5), 0 0 18px rgba(0, 242, 254, 0.3);
    }
    /* Hover hiệu ứng neon */
    
    .header-area .main-nav .nav li a:hover {
        background: linear-gradient(45deg, #00f2fe, #4facfe);
        /* xanh neon */
        color: #fff !important;
        border: 2px solid #4facfe;
        box-shadow: 0 0 12px rgba(79, 172, 254, 0.8), 0 0 24px rgba(0, 242, 254, 0.6);
        transform: translateY(-2px) scale(1.05);
    }
    /* 🔹 Discord button (riêng) */
    
    .header-area .main-nav .nav li:last-child a {
        background: linear-gradient(45deg, #7289da, #a77bff);
        border: 2px solid #a77bff;
        /* color: #fff !important; */
        box-shadow: 0 0 12px rgba(167, 123, 255, 0.6), 0 0 24px rgba(114, 137, 218, 0.6);
    }
    
    .header-area .main-nav .nav li:last-child a:hover {
        background: linear-gradient(45deg, #a77bff, #7289da);
        box-shadow: 0 0 18px rgba(167, 123, 255, 0.9), 0 0 36px rgba(114, 137, 218, 0.8);
        transform: translateY(-2px) scale(1.07);
    }
    /* Search box wrapper */
    
    .header-area .main-nav #search {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 15px;
    }
    /* Ô input search */
    
    .header-area .main-nav #search input {
        background: rgba(39, 41, 42, 0.9);
        border: 2px solid #00f2fe;
        border-radius: 30px;
        height: 46px;
        width: 280px;
        padding: 0 15px 0 45px;
        font-size: 15px;
        color: #fff;
        transition: all 0.3s ease;
        box-shadow: 0 0 8px rgba(0, 242, 254, 0.5), 0 0 18px rgba(0, 242, 254, 0.3);
    }
    /* Khi focus vào ô search */
    
    .header-area .main-nav #search input:focus {
        outline: none;
        border-color: #4facfe;
        box-shadow: 0 0 14px rgba(79, 172, 254, 0.9), 0 0 28px rgba(0, 242, 254, 0.6);
        background: rgba(31, 33, 34, 0.95);
        transform: scale(1.03);
    }
    /* Icon search */
    
    .header-area .main-nav #search i {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #00f2fe;
        font-size: 18px;
        transition: color 0.3s ease;
    }
    /* Hover + focus đổi màu icon */
    
    .header-area .main-nav #search input:focus+i,
    .header-area .main-nav #search:hover i {
        color: #4facfe;
    }
    /* Màu của tiêu đề category game */
    
    .heading-section.category-games {
        text-align: center;
        margin: 25px 0;
    }
    
    .heading-section.category-games h4 {
        display: inline-block;
        padding: 14px 34px;
        font-size: 24px;
        font-weight: 700;
        border-radius: 14px;
        background: linear-gradient(45deg, aquamarine, lightblue);
        color: #003366;
        text-transform: uppercase;
        box-shadow: 0 0 18px rgba(0, 255, 200, 0.5), 0 0 36px rgba(0, 200, 255, 0.4);
        animation: pulseBlue 2s infinite alternate, bounceHeading 2.8s infinite ease-in-out;
    }
    
    @keyframes pulseBlue {
        0% {
            box-shadow: 0 0 12px rgba(0, 255, 200, 0.5), 0 0 24px rgba(0, 200, 255, 0.3);
        }
        100% {
            box-shadow: 0 0 28px rgba(0, 255, 255, 1), 0 0 56px rgba(0, 200, 255, 0.8);
        }
    }
    
    @keyframes bounceHeading {
        0%,
        100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-4px);
        }
        /* Nhún nhẹ hơn nút Play */
    }
    /* Banner header text Category Games */
    
    .header-text {
        text-align: center;
        margin: 30px auto;
        padding: 40px 20px;
        max-width: 900px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    .header-text .banner-title {
        font-size: 38px;
        font-weight: 800;
        color: #ff6600;
        text-shadow: 0 0 12px rgba(255, 102, 0, 0.7);
        margin-bottom: 15px;
    }
    
    .header-text .banner-title span {
        color: #00f2fe;
        text-shadow: 0 0 12px rgba(0, 242, 254, 0.7);
    }
    
    .header-text .banner-subtitle {
        font-size: 22px;
        font-weight: 600;
        color: #ffbb33;
        margin-bottom: 20px;
    }
    
    .header-text .infor-first p {
        font-size: 18px;
        line-height: 1.8;
        color: #ddd;
        margin: 0 auto;
        max-width: 800px;
    }
    /* Hiệu ứng nhún nhảy nhẹ giống nút */
    
    .header-text .banner-title,
    .header-text .banner-subtitle {
        animation: bounceHeading 3.2s infinite ease-in-out;
    }
    /* ---- Game iframe frame (2026-08-26 redesign, spacing revised 2026-08-27) ----
       Was: iframe stretched to the full (very wide, on big screens) main_game
       column at a flat 500px height, so a narrower embedded game showed as a
       small box surrounded by a big slab of white -- looked broken.
       The 2026-08-26 fix made this box bleed past .main_game's own edges
       (negative margin) to line up flush with Similar Games below -- but
       that bleed ate into the .ads columns on either side, which a client
       needs clear (a real ~25px gap, via .main_game's own margin above) to
       place ads in. Dropped the bleed entirely: this box now just fills
       .main_game's own column width, no longer edge-matched to Similar
       Games at wide viewports -- ad clearance wins that trade-off. The
       iframe's height still scales with an aspect-ratio instead of a fixed
       px, plus a dark letterboxed background + cyan glow border so any
       game narrower than the box reads as an intentional frame, not a bug. */
    
    .parent_frame {
        background: linear-gradient(180deg, #171c38, #0f1428);
        border-radius: 16px;
        padding: 14px;
        border: 1px solid rgba(0, 242, 254, .28);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 22px rgba(0, 242, 254, .12);
    }
    
    .parent_frame iframe {
        display: block;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1031 / 580;
        border-radius: 10px;
    }
    /* Description card below the frame -- was bare text straight on the
       page background, and capped at 800-820px (see the plain
       ".infor-first p" / ".header-text .infor-first p" rules above) so it
       didn't line up with the frame or Similar Games at wide viewports.
       ".main_game" only exists on game detail pages, so this is scoped to
       them -- .header-text/.infor-first are shared with the homepage and
       category page hero blurbs and must stay untouched there. */
    
    .main_game .header-text {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
    
    .main_game .header-text .infor-first {
        background: linear-gradient(180deg, #171c38, #0f1428);
        border: 1px solid rgba(0, 242, 254, .18);
        border-radius: 16px;
        padding: 28px 32px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    }
    
    .main_game .header-text .infor-first p {
        max-width: none;
    }
    /* ---- Related-game links inside the description blurb (2026-09-10) ----
       The <a> tags in ".infor-first" that point to similar game pages were
       only lightly tinted and blended into the paragraph text. Make them
       pop: bright gradient text, a glowing pill background, and a gentle
       pulse+wobble animation so the eye lands on them. Scoped to
       ".infor-first" so nav / other links are untouched. */

    .infor-first p a {
        display: inline-block;
        padding: 1px 10px;
        margin: 0 2px;
        font-weight: 700;
        text-decoration: none;
        color: #fff !important;
        background: linear-gradient(45deg, #00f2fe, #4facfe);
        border-radius: 20px;
        box-shadow: 0 0 10px rgba(0, 242, 254, .7), 0 0 22px rgba(79, 172, 254, .45);
        animation: inforLinkPulse 1.6s infinite ease-in-out;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .infor-first p a:hover {
        color: #fff !important;
        transform: translateY(-2px) scale(1.06);
        box-shadow: 0 0 16px rgba(0, 242, 254, .95), 0 0 32px rgba(79, 172, 254, .7);
        animation-play-state: paused;
    }

    @keyframes inforLinkPulse {
        0%, 100% {
            box-shadow: 0 0 8px rgba(0, 242, 254, .55), 0 0 18px rgba(79, 172, 254, .35);
            transform: rotate(-1deg) scale(1);
        }
        50% {
            box-shadow: 0 0 16px rgba(0, 242, 254, .95), 0 0 34px rgba(79, 172, 254, .7);
            transform: rotate(1deg) scale(1.04);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .infor-first p a {
            animation: none;
        }
    }
    /* ---- Poki-style like/dislike/fullscreen/share action bar ---- */
    
    .poki-actionbar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin: 14px 0 0 0;
        padding: 10px 16px;
        background: linear-gradient(180deg, #171c38, #0f1428);
        border: 1px solid rgba(0, 242, 254, .18);
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
        flex-wrap: wrap;
    }
    
    .poki-btn {
        position: relative;
        display: flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, .06);
        border: 1px solid rgba(255, 255, 255, .12);
        color: #ddd;
        font-family: 'Poppins', sans-serif;
        font-size: 15px;
        padding: 9px 16px;
        border-radius: 30px;
        transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
    }
    /* The site-wide custom cursor (main.css reset block near the top)
       only targets its own selector list -- which doesn't include
       <button> -- so these buttons fell back to the browser's default
       pointer on hover instead of the custom sword cursor every other
       interactive element (.fullscreen, .directlink, .menu-trigger) uses.
       Bootstrap's own "button:not(:disabled) { cursor:pointer }" has
       higher specificity than a plain ".poki-btn" class (the :not()
       pseudo-class counts as an extra selector), so it was winning over
       a same-specificity fix -- ".poki-actionbar .poki-btn" (two classes)
       outranks it regardless of source order. */
    
    .poki-actionbar .poki-btn {
        cursor: url("https://unblockedgames88.gitlab.io/assets/images/cursor.png"), pointer;
    }
    /* Per-button accent color on hover -- a little more color/personality
       than one flat cyan for every button. */
    
    .poki-btn-like:hover {
        background: rgba(0, 242, 254, .14);
        border-color: #00f2fe;
        color: #fff;
        box-shadow: 0 0 14px rgba(0, 242, 254, .35);
    }
    
    .poki-btn-dislike:hover {
        background: rgba(255, 99, 132, .14);
        border-color: #ff6384;
        color: #fff;
        box-shadow: 0 0 14px rgba(255, 99, 132, .35);
    }
    
    .poki-btn-fullscreen:hover {
        background: rgba(167, 139, 250, .16);
        border-color: #a78bfa;
        color: #fff;
        box-shadow: 0 0 14px rgba(167, 139, 250, .35);
    }
    
    .poki-btn-share:hover {
        background: rgba(255, 187, 51, .16);
        border-color: #ffbb33;
        color: #fff;
        box-shadow: 0 0 14px rgba(255, 187, 51, .35);
    }
    /* Slight lift + wiggle on hover -- a little life in the buttons
       instead of just a color swap. */
    
    .poki-btn:hover {
        transform: translateY(-2px);
        animation: pokiWiggle .35s ease;
    }
    
    @keyframes pokiWiggle {
        0%,
        100% {
            rotate: 0deg;
        }
        25% {
            rotate: -4deg;
        }
        75% {
            rotate: 4deg;
        }
    }
    /* Little "pop" pulse on click (like/dislike/fullscreen/share all get
       this via actionbar.js toggling the class). */
    
    .poki-btn.poki-pop {
        animation: pokiPop .32s ease;
    }
    
    @keyframes pokiPop {
        0% {
            transform: scale(1);
        }
        40% {
            transform: scale(1.18);
        }
        100% {
            transform: scale(1);
        }
    }
    
    .poki-btn.active {
        background: rgba(0, 242, 254, .18);
        border-color: #00f2fe;
        color: #00f2fe;
        box-shadow: 0 0 14px rgba(0, 242, 254, .3);
    }
    
    #btnDislike.active {
        background: rgba(255, 99, 132, .18);
        border-color: #ff6384;
        color: #ff6384;
        box-shadow: 0 0 14px rgba(255, 99, 132, .3);
    }
    
    .poki-btn .poki-count {
        font-weight: 600;
        min-width: 1.5em;
        text-align: left;
    }
    /* Hover tooltip -- small label above the button, from data-tooltip */
    
    .poki-btn[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(4px);
        background: #0f1428;
        border: 1px solid rgba(0, 242, 254, .3);
        color: #fff;
        font-size: 12px;
        font-family: 'Poppins', sans-serif;
        white-space: nowrap;
        padding: 4px 10px;
        border-radius: 8px;
        opacity: 0;
        pointer-events: none;
        transition: opacity .18s ease, transform .18s ease;
        z-index: 25;
    }
    
    .poki-btn[data-tooltip]:hover::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    
    .poki-share-wrap {
        position: relative;
    }
    
    .poki-share-menu {
        display: none;
        position: absolute;
        bottom: calc(100% + 10px);
        left: 50%;
        transform: translateX(-50%);
        background: #171c38;
        border: 1px solid rgba(0, 242, 254, .25);
        border-radius: 12px;
        padding: 8px;
        min-width: 170px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
        z-index: 20;
    }
    
    .poki-share-menu.open {
        display: block;
    }
    
    .poki-share-menu a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 8px;
        color: #ddd;
        text-decoration: none;
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
    }
    
    .poki-share-menu a:hover {
        background: rgba(0, 242, 254, .12);
        color: #fff;
    }
    
    .poki-share-menu .share-icon {
        width: 1.2em;
        display: inline-block;
        text-align: center;
    }
    /* ---- Heart / Favorite button in the action bar (favorites.js) ----
       Pink accent so it reads as its own thing next to the cyan like and
       the red dislike; the saved state is the one button that stays lit
       after you look away, hence the slow heartbeat instead of a static
       glow. */
    
    .poki-btn-fav:hover {
        background: rgba(255, 71, 133, .16);
        border-color: #ff4785;
        color: #fff;
        box-shadow: 0 0 14px rgba(255, 71, 133, .35);
    }
    
    .poki-btn-fav.active {
        background: linear-gradient(135deg, rgba(255, 71, 133, .30), rgba(255, 138, 76, .20));
        border-color: #ff4785;
        color: #ff5c92;
        box-shadow: 0 0 16px rgba(255, 71, 133, .45);
    }
    
    .poki-btn-fav.active i {
        animation: favHeartbeat 1.8s ease-in-out infinite;
    }
    
    @keyframes favHeartbeat {
        0%,
        70%,
        100% {
            transform: scale(1);
        }
        15% {
            transform: scale(1.22);
        }
        30% {
            transform: scale(1);
        }
        45% {
            transform: scale(1.14);
        }
    }
    /* One-shot ring that flies off the button the moment a game is saved. */
    
    .poki-btn-fav.fav-burst::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 30px;
        border: 2px solid #ff4785;
        opacity: .9;
        pointer-events: none;
        animation: favBurst .55s ease-out forwards;
    }
    
    @keyframes favBurst {
        to {
            transform: scale(1.6);
            opacity: 0;
        }
    }
    
    @media (prefers-reduced-motion: reduce) {
        .poki-btn-fav.active i,
        .poki-btn-fav.fav-burst::before {
            animation: none;
        }
    }
    /* ---- Toast used by favorites.js (bottom centre, so it never lands on
       the comment-reply toast that comment-notify.css puts mid-right) ---- */
    
    .ubg-fav-toast {
        position: fixed;
        left: 50%;
        bottom: 26px;
        transform: translateX(-50%) translateY(18px);
        max-width: min(92vw, 420px);
        padding: 12px 20px;
        border-radius: 14px;
        background: linear-gradient(180deg, #1d1533, #140f26);
        border: 1px solid rgba(255, 71, 133, .45);
        box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 71, 133, .25);
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-size: 14.5px;
        font-weight: 500;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        z-index: 9999;
        transition: opacity .22s ease, transform .22s ease;
    }
    
    .ubg-fav-toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    
    .ubg-fav-toast-warn {
        border-color: rgba(255, 187, 51, .55);
        box-shadow: 0 14px 34px rgba(0, 0, 0, .45), 0 0 18px rgba(255, 187, 51, .25);
    }
    
    /* 🔹 Responsive List game */
    
    @media (max-width: 1200px) {
        #allgames .col-6,
        #allgames .col-md-3 {
            max-width: 25%;
            flex: 0 0 25%;
        }
    }
    
    @media (max-width: 1200px) {
        #populargames .col-6,
        #populargames .col-md-3 {
            max-width: 25%;
            flex: 0 0 25%;
        }
    }
    
    @media (max-width: 1200px) {
        #similar_games .col-6,
        #similar_games .col-md-3 {
            max-width: 25%;
            flex: 0 0 25%;
        }
    }
    /* ---- Responsive header ----
       Was: full inline nav above 992px, hamburger menu at/below 992px.
       Between ~993px and ~1300px the inline nav no longer fit on one
       line, wrapped onto 2-3 rows, and -- because .header-area is
       position:absolute -- that taller wrapped nav overlapped the page
       title below instead of pushing it down. Pulling the hamburger
       layout in to start at 1300px instead of 992px skips that broken
       zone entirely (found + fixed 2026-08-26). */
    
    @media (max-width: 1300px) {
        .header-area {
            top: 0;
            padding: 0 10px;
            height: 70px;
        }
        .header-area .container {
            padding: 0;
            /* bootstrap.min.css sets .container to max-width:fit-content
               at >=576px -- it shrinks to hug its content and gets
               centered instead of spanning the header's full width,
               which is what was actually causing logo/search/hamburger
               to crowd and overlap (not a spacing/gap problem). Force it
               back to a real 100% width so the flex row below has a
               definite width to distribute correctly. */
            max-width: 100% !important;
            width: 100%;
        }
        .header-area .main-nav {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            min-height: 70px;
            padding: 0;
            gap: 8px;
            border-radius: 0;
            background-color: transparent;
            position: relative;
        }
        .header-area .main-nav .logo {
            position: static;
            flex-shrink: 0;
            flex-basis: auto;
            margin: 0;
        }
        .header-area .main-nav .logo img {
            width: 50px;
            display: block;
        }
        /* Balanced 3-zone header: logo | search | hamburger. Search used
           to be flex:1 with no cap, so it swallowed 100% of the leftover
           space and looked oversized next to the small logo and
           hamburger. Capping its width and centering it in its flex slot
           gives even, deliberate spacing on both sides. */
        .search-input {
            flex: 1;
            min-width: 0;
            max-width: 380px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            position: relative;
        }
        .search-input form {
            width: 100%;
        }
        .header-area .main-nav #search {
            width: 100%;
            margin: 0;
        }
        .header-area .main-nav #search input {
            width: 100%;
            min-width: 0;
        }
        /* Search-results dropdown: it has a fixed 400x400 box with no
           top/left elsewhere in this file, so with this flex layout its
           "static position" fallback could place it above the search bar
           instead of below it, overlapping the page. Anchor it
           explicitly under the search box and cap it to the viewport
           instead of a fixed 400px. */
        .search-input .result_search,
        .search-input .not_found {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 8px;
            width: auto;
            max-width: none;
            max-height: 70vh;
            z-index: 1000;
        }
        .header-area .main-nav .nav {
            position: absolute;
            top: 70px;
            left: 0;
            right: 0;
            float: none;
            width: 100%;
            display: none;
            background-color: #1a1a1a;
            z-index: 999;
            margin: 0;
            padding: 8px 0;
            transition: all 0s ease 0s;
        }
        .header-area .main-nav .nav li {
            width: 100%;
            padding: 0 !important;
            display: block;
        }
        .header-area .main-nav .nav li a {
            display: block;
            height: 44px !important;
            line-height: 44px !important;
            padding: 0 20px !important;
            font-size: 13px;
            border: none !important;
            background: transparent !important;
            color: #fff !important;
            border-radius: 0;
        }
        .header-area .main-nav .nav li a:hover {
            background-color: rgba(255, 255, 255, 0.08) !important;
            color: #e75e8d !important;
        }
        .header-area .main-nav .nav li a img {
            display: none;
        }
        .header-area .menu-trigger {
            position: relative !important;
            /* Base (non-media) rule sets top:23px for its normal
               position:absolute placement; that leftover "top" was still
               shifting this down once it's switched to position:relative
               here, throwing off vertical centering against the
               logo/search. */
            top: 0 !important;
            right: auto !important;
            display: block !important;
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            text-indent: -9999em;
            overflow: hidden;
        }
    }