/*
Theme Name: GameHiHi Portal
Theme URI: https://gamehihi.com/
Author: GameHiHi
Author URI: https://gamehihi.com/
Description: Complete responsive HTML5 game portal for GameHiHi with player, accounts, rankings, discovery, administration and mobile support.
Version: 4.4.71
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gamejoyh5
*/

body.admin-bar header{top:32px}
body.admin-bar .sidebar{top:calc(var(--header-h) + 32px)}
@media(max-width:782px){
  body.admin-bar header{top:46px}
  body.admin-bar .sidebar{top:calc(var(--header-h) + 46px)}
}
.card .thumb img,.art-card .cover img,.article-full .a-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.art-card .cover.has-img > span:not(.cat-badge),.article-full .a-cover.has-img > span{display:none}
.search{max-width:620px}
.search button[type="submit"]{display:none}
.player iframe.game-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:4}
.player .screen.is-playing > h3,
.player .screen.is-playing > p,
.player .screen.is-playing > .big-play{display:none}
.article-full .a-body .aligncenter{margin-left:auto;margin-right:auto}
.article-full .a-body img{border-radius:var(--r);box-shadow:var(--shadow)}
.wp-caption{max-width:100%}
.wp-caption-text{font-size:13px;color:var(--muted);font-weight:700;margin-top:8px;text-align:center}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.pagination{display:flex;gap:8px;align-items:center;justify-content:center;margin:28px 0 0;flex-wrap:wrap}
.pagination .page-numbers{min-width:38px;height:38px;border-radius:12px;background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--navy)}
.pagination .page-numbers.current{background:var(--joy);color:#fff}
.pagination .page-numbers.prev,.pagination .page-numbers.next{width:auto;padding:0 14px;white-space:nowrap}.pagination .page-numbers:not(.current):hover{transform:translateY(-1px);color:var(--joy)}
.entry-content a,.article-full .a-body a{color:var(--ghh-accent);font-weight:800}
.entry-content strong,.article-full .a-body strong{color:var(--ghh-text);font-weight:800}


/* GameHiHi dynamic options + AJAX search */
.logo .pad img{width:100%;height:100%;object-fit:cover;border-radius:12px;position:relative;z-index:2}
.search{position:relative}
.ajax-search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:8px;z-index:9999;max-height:420px;overflow-y:auto}
.ajax-search-item{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;transition:.15s}
.ajax-search-item:hover{background:var(--bg)}
.ajax-search-thumb{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;flex-shrink:0;font-size:21px}
.ajax-search-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ajax-search-thumb span{position:relative;z-index:2;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.ajax-search-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.ajax-search-copy strong{font-family:'Fredoka',sans-serif;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.ajax-search-copy em{font-style:normal;font-size:12px;color:var(--muted);font-weight:800}
.ajax-search-more{display:block;margin-top:6px;padding:10px 12px;border-radius:12px;text-align:center;background:var(--bg);color:var(--joy);font-weight:900}
.ajax-search-empty{padding:14px 12px;color:var(--muted);font-weight:800;text-align:center}
.header-actions .header-menu{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0}
.header-actions .header-menu a{height:42px;padding:0 16px;border-radius:12px;font-size:14.5px;font-weight:700;color:var(--navy);background:var(--bg);display:flex;align-items:center;gap:7px;transition:.18s}
.header-actions .header-menu a:hover{background:var(--bg-2)}
.sidebar-menu,.footer-menu,.foot-grid ul{list-style:none;margin:0;padding:0}
.sidebar-menu li{margin:0}
.sidebar-menu a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:13px;cursor:pointer;font-weight:700;font-size:14.5px;color:var(--ink);transition:.15s;position:relative}
.sidebar-menu a:hover{background:var(--bg)}
.sidebar-menu .current-menu-item>a,.sidebar-menu .current_page_item>a{background:var(--theme-background-alt);color:var(--joy-deep)}
.foot-grid li{list-style:none;margin:0;padding:0}
.foot-grid li a{display:block;color:var(--theme-background-alt);font-weight:600;font-size:14px;margin-bottom:9px;transition:.15s}
.foot-grid li a:hover{color:#fff}
.ad-slot{display:flex;justify-content:center;align-items:center;width:100%;margin:0 0 22px;overflow:hidden}
.ad-slot-infeed{margin:0;min-height:120px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow)}
.ad-code-box{background:none!important;border:0!important}
.ad-anchor-wrap{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;min-height:60px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(var(--theme-text-rgb),.12)}
.ad-anchor-wrap .ad-anchor{position:static;height:60px;display:flex}
.ad-anchor-wrap .ad-close{position:absolute;top:-13px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:var(--shadow);font-family:'Fredoka'}
@media(max-width:900px){.ad-anchor-wrap{display:block}.ad-anchor{display:flex!important}.header-actions .header-menu a{padding:0 12px}.ajax-search-results{position:fixed;top:var(--header-h);left:10px;right:10px}}

.gamejoyh5-load-more-wrap{display:flex;justify-content:center;margin:26px 0 12px}.gamejoyh5-load-more[disabled]{opacity:.65;cursor:default;transform:none;box-shadow:none}.ad-slot{overflow:hidden}.ad-slot-infeed{display:flex;align-items:center;justify-content:center;background:#fff}.game-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4;background:#000}.screen.is-playing h3,.screen.is-playing p,.screen.is-playing .big-play{display:none}.thumb.has-img img,.cover.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cover.has-img>span:not(.cat-badge){z-index:2}


/* v1.4 infinite scroll + leaderboard metrics */
.gamejoyh5-load-more-wrap{min-height:72px;align-items:center}.gamejoyh5-load-more{min-width:180px}.gamejoyh5-api-url-list code{display:inline-block;background:#f6f7f7;padding:4px 7px;border-radius:6px}.detail-stats .st .v.rank-score{color:var(--joy-deep)}.card span img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative !important;
    inset: 0;
}
.article-full span img,
.ajax-search-thumb span img,
.art-card span img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative !important;
    inset: 0;
}
.card .thumb span img, .art-card .cover span img, .article-full .a-cover span img{
	    position: relative !important;
}
@media (max-width: 560px) {
    .logo .name {
    display: none;
    }
	.header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    display: none;
}
.foot-grid .logo .name {
    	display: block;
    }
}
.foot-about .logo{
	display: flex;
}
.ad-preroll .pr-box {
    width: 70%;
    height: 62%;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .06) 12px, rgba(255, 255, 255, .12) 12px, rgba(255, 255, 255, .12) 24px);
    border: 2px dashed rgba(255, 255, 255, .35);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--theme-background-alt);
}
/* =====================================================
   GameHiHi Responsive Fix - Desktop / Laptop / Tablet / Mobile
   Paste at END of style.css
===================================================== */

/* Desktop lớn: giữ nội dung không bị giãn quá rộng */
body {
  background: var(--theme-background, var(--theme-background));
}

main,
footer {
  max-width: 1920px;
}

main {
  background: var(--bg);
}

@media (min-width: 1921px) {
  header {
    left: 50%;
    right: auto;
    width: 1920px;
    transform: translateX(-50%);
  }

  .sidebar {
    left: calc((100vw - 1920px) / 2);
  }

  main,
  footer {
    margin-left: calc((100vw - 1920px) / 2 + var(--sidebar-w));
    margin-right: calc((100vw - 1920px) / 2);
  }
}

/* Desktop / laptop */
@media (max-width: 1440px) {
  :root {
    --sidebar-w: 210px;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .grid.big {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  .detail-wrap {
    grid-template-columns: 1fr 280px;
  }
}

@media (max-width: 1200px) {
  .header-actions .header-menu a {
    padding: 0 10px;
    font-size: 13px;
  }

  .search {
    max-width: 430px;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  }

  .detail-wrap {
    grid-template-columns: 1fr;
  }

  .rail {
    position: static;
  }

  .rail .grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* Tablet */
@media (max-width: 900px) {
  :root {
    --sidebar-w: 0px;
    --header-h: 60px;
  }

  header {
    height: var(--header-h);
    padding: 0 12px;
    gap: 10px;
  }

  body.admin-bar .sidebar {
    top: calc(var(--header-h) + 46px);
  }

  .menu-btn {
    display: flex;
  }

  .sidebar {
    width: 280px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .28s ease;
    box-shadow: var(--shadow-lg);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  main,
  footer {
    margin-left: 0;
  }

  main {
    padding: 16px 14px 92px;
  }

  .search {
    max-width: none;
    flex: 1;
  }

  .header-actions {
    display: none;
  }

  .hero {
    min-height: 230px;
    margin-bottom: 20px;
  }

  .hero-inner {
    padding: 22px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .grid,
  .grid.big {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 12px;
  }

  .card.wide {
    grid-column: span 2;
  }

  .art-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .page-head {
    padding: 18px;
  }

  .player .screen {
    aspect-ratio: 16 / 9;
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ad-anchor,
  .ad-anchor-wrap {
    display: flex;
  }
}

/* Mobile */
@media (max-width: 640px) {
  header {
    padding: 0 10px;
  }

  .logo .name {
    display: none;
  }

  .logo .pad {
    width: 34px;
    height: 34px;
  }

  .search {
    height: 40px;
    border-radius: 12px;
    padding: 0 10px;
  }

  .search input {
    font-size: 14px;
  }

  .ajax-search-results {
    position: fixed;
    top: calc(var(--header-h) + 6px);
    left: 8px;
    right: 8px;
    max-height: 70vh;
    z-index: 999;
  }

  main {
    padding: 14px 10px 86px;
  }

  .hero {
    min-height: 210px;
    border-radius: 18px;
  }

  .hero-inner {
    padding: 18px;
  }

  .hero h1 {
    font-size: 26px;
  }

  .hero p {
    font-size: 14.5px;
  }

  .hero .hero-cta {
    gap: 8px;
  }

  .hero .play-now,
  .hero .secondary {
    height: 44px;
    padding: 0 16px;
    font-size: 14.5px;
  }

  .sec-head {
    margin: 22px 2px 12px;
  }

  .sec-head h2 {
    font-size: 20px;
  }

  .grid,
  .grid.big {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .card,
  .card.wide {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
    border-radius: 15px;
  }

  .card .overlay {
    opacity: 1;
    padding: 9px;
  }


  .card .meta .t {
    font-size: 13px;
  }

  .card .meta .s {
    font-size: 10.5px;
  }

  .art-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .article-full {
    max-width: 100%;
  }

  .article-full .a-cover {
    height: 210px;
  }

  .article-full h1 {
    font-size: 26px;
  }

  .article-full .a-body p {
    font-size: 15.5px;
  }

  .page-head {
    align-items: flex-start;
    padding: 16px;
    gap: 12px;
  }

  .page-head .icon {
    width: 52px;
    height: 52px;
    font-size: 26px;
  }

  .page-head h1 {
    font-size: 24px;
  }

  .detail-info {
    padding: 16px;
  }

  .detail-stats {
    gap: 14px;
  }

  .player {
    border-radius: 18px;
  }

  .player .screen {
    aspect-ratio: 16 / 9;
    padding: 14px;
  }

  .player .screen .gamejoy-player-start-title {
    font-size: 20px;
  }

  .player .screen p {
    font-size: 13.5px;
  }

  .player .big-play {
    width: 62px;
    height: 62px;
  }

  .player .bar {
    height: auto;
    min-height: 50px;
    padding: 9px 12px;
  }

  .player .bar .pname {
    font-size: 14px;
  }

  .player .bar .tools button {
    min-width: 36px;
    height: 34px;
  }

  .ad-preroll .pr-box {
    width: 88%;
    height: 56%;
  }

  .ad-leaderboard {
    height: 90px;
  }

  .ad-infeed {
    grid-column: span 2;
    min-height: 110px;
  }

  .ad-inarticle {
    height: 230px;
  }

  footer {
    padding: 34px 14px 88px;
  }

  .foot-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .foot-bottom {
    flex-direction: column;
  }

  .foot-about .logo .name {
    display: block;
  }
}

/* Mobile nhỏ */
@media (max-width: 380px) {
  .grid,
  .grid.big {
    gap: 8px;
  }

  .card .meta .t {
    font-size: 12.5px;
  }

  .hero h1 {
    font-size: 23px;
  }

  .search input::placeholder {
    font-size: 13px;
  }
}

/* Chống ảnh bị lệch / vỡ */
.card .thumb,
.art-card .cover,
.article-full .a-cover,
.ajax-search-thumb {
  overflow: hidden;
}

.card .thumb img,
.art-card .cover img,
.article-full .a-cover img,
.ajax-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fix iframe game luôn full khung */
.player,
.player .screen {
  position: relative;
}

.player iframe,
.player iframe.game-frame,
.game-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Tránh menu/sidebar che nội dung khi mobile */
.overlay-mask.show {
  display: block;
}
/* =====================================================
   GameHiHi Responsive Full Optimize
   360 / 480 / 768 / 992 / 1200 / 1440 / 1920 / 2560 / 3840
   Paste at END of style.css
===================================================== */

/* Base fix */
html {
  font-size: 16px;
}

body {
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}


img,
iframe,
video {
  max-width: 100%;
}

.card,
.art-card,
.player,
.hero,
.page-head,
.detail-info {
  min-width: 0;
}

/* Typography fluid */
body {
  font-size: clamp(14px, 0.85vw, 16px);
}

h1 {
  font-size: clamp(26px, 2.8vw, 46px);
}

h2 {
  font-size: clamp(21px, 2vw, 32px);
}

h3 {
  font-size: clamp(18px, 1.5vw, 24px);
}

p,
.article-full .a-body p {
  font-size: clamp(15px, 1vw, 17px);
}

/* Desktop max width center */
@media (min-width: 1921px) {
  body {
    background: #fff;
  }

  header {
    left: 50%;
    right: auto;
    width: 1920px;
    transform: translateX(-50%);
  }

  .sidebar {
    left: calc((100vw - 1920px) / 2);
  }

  main,
  footer {
    max-width: calc(1920px - var(--sidebar-w));
    margin-left: calc((100vw - 1920px) / 2 + var(--sidebar-w));
    margin-right: calc((100vw - 1920px) / 2);
  }
}

/* 4K */
@media (min-width: 3840px) {
  html {
    font-size: 18px;
  }

  :root {
    --sidebar-w: 260px;
    --header-h: 76px;
  }

  header {
    height: var(--header-h);
    padding: 0 30px;
  }

  main {
    padding: 34px 46px 80px;
  }

  .logo .name {
    font-size: 28px;
  }

  .search {
    height: 54px;
    max-width: 760px;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
  }

  .grid.big {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }

  .hero {
    min-height: 360px;
  }

  .article-full {
    max-width: 940px;
  }
}

/* 2K */
@media (min-width: 2560px) and (max-width: 3839px) {
  :root {
    --sidebar-w: 240px;
    --header-h: 70px;
  }

  header {
    padding: 0 26px;
  }

  main {
    padding: 28px 42px 76px;
  }

  .search {
    max-width: 700px;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 22px;
  }

  .grid.big {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  }

  .hero {
    min-height: 330px;
  }

  .article-full {
    max-width: 880px;
  }
}

/* Full HD */
@media (min-width: 1920px) and (max-width: 2559px) {
  :root {
    --sidebar-w: 228px;
    --header-h: 64px;
  }

  main {
    padding: 24px 34px 70px;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 18px;
  }

  .grid.big {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .hero {
    min-height: 280px;
  }
}

/* Desktop 1440 */
@media (min-width: 1440px) and (max-width: 1919px) {
  :root {
    --sidebar-w: 220px;
    --header-h: 64px;
  }

  main {
    padding: 22px 30px 64px;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
    gap: 16px;
  }

  .grid.big {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }

  .search {
    max-width: 580px;
  }
}

/* Laptop Full HD 1200 */
@media (min-width: 1200px) and (max-width: 1439px) {
  :root {
    --sidebar-w: 210px;
  }

  header {
    padding: 0 16px;
  }

  .logo .name {
    font-size: 20px;
  }

  .search {
    max-width: 460px;
  }

  .header-actions .header-menu a {
    padding: 0 11px;
    font-size: 13.5px;
  }

  main {
    padding: 20px 24px 60px;
  }

  .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
  }

  .grid.big {
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
  }

  .detail-wrap {
    grid-template-columns: 1fr 280px;
    gap: 20px;
  }

  .hero h1 {
    font-size: 38px;
  }
}

/* Laptop nhỏ 992 */
@media (min-width: 992px) and (max-width: 1199px) {
  :root {
    --sidebar-w: 200px;
  }

  header {
    padding: 0 14px;
    gap: 10px;
  }

  .logo .name {
    font-size: 19px;
  }

  .search {
    max-width: 390px;
    height: 42px;
  }

  .header-actions .header-menu a,
  .btn-ghost,
  .btn-primary {
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
  }

  main {
    padding: 18px 20px 58px;
  }

  .grid,
  .grid.big {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 13px;
  }

  .detail-wrap {
    grid-template-columns: 1fr;
  }

  .rail {
    position: static;
  }

  .rail .grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .hero {
    min-height: 240px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .art-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

/* Tablet 768 */
@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --sidebar-w: 0px;
    --header-h: 62px;
  }

  .menu-btn {
    display: flex;
  }

  header {
    height: var(--header-h);
    padding: 0 14px;
  }

  .sidebar {
    width: 280px;
    max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .28s ease;
    box-shadow: var(--shadow-lg);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .overlay-mask.show {
    display: block;
  }

  main,
  footer {
    margin-left: 0;
  }

  main {
    padding: 18px 16px 90px;
  }

  .header-actions {
    display: none;
  }

  .search {
    max-width: none;
    flex: 1;
  }

  .hero {
    min-height: 230px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .grid,
  .grid.big {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 13px;
  }

  .detail-wrap {
    grid-template-columns: 1fr;
  }

  .player .screen {
    aspect-ratio: 16 / 9;
  }

  .art-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot-grid {
    grid-template-columns: 1fr 1fr;
  }

  footer {
    padding-bottom: 90px;
  }
}

/* iPhone / Android lớn 480 */
@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --sidebar-w: 0px;
    --header-h: 60px;
  }

  .menu-btn {
    display: flex;
  }

  header {
    height: var(--header-h);
    padding: 0 12px;
    gap: 9px;
  }

  .logo .name {
    display: none;
  }

  .sidebar {
    width: 270px;
    max-width: 84vw;
    transform: translateX(-100%);
    transition: transform .28s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  main,
  footer {
    margin-left: 0;
  }

  main {
    padding: 15px 12px 88px;
  }

  .header-actions {
    display: none;
  }

  .search {
    height: 40px;
    flex: 1;
    max-width: none;
    padding: 0 11px;
  }

  .search input {
    font-size: 14px;
  }

  .ajax-search-results {
    position: fixed;
    top: calc(var(--header-h) + 6px);
    left: 8px;
    right: 8px;
    max-height: 70vh;
    z-index: 999;
  }

  .hero {
    min-height: 215px;
    border-radius: 18px;
  }

  .hero-inner {
    padding: 18px;
  }

  .hero h1 {
    font-size: 27px;
  }

  .hero p {
    font-size: 14.5px;
  }

  .hero .play-now,
  .hero .secondary {
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
  }

  .grid,
  .grid.big {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  .card,
  .card.wide {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
  }

  .card .overlay {
    opacity: 1;
  }


  .card .meta .t {
    font-size: 13.5px;
  }

  .art-grid {
    grid-template-columns: 1fr;
  }

  .article-full h1 {
    font-size: 27px;
  }

  .article-full .a-cover {
    height: 220px;
  }

  .detail-info {
    padding: 17px;
  }

  .player .screen {
    aspect-ratio: 16 / 9;
  }

  .player .bar {
    height: auto;
    min-height: 50px;
    padding: 9px 12px;
  }

  .foot-grid {
    grid-template-columns: 1fr;
  }

  footer {
    padding: 34px 14px 90px;
  }
}

/* Android nhỏ 360 */
@media (max-width: 479px) {
  :root {
    --sidebar-w: 0px;
    --header-h: 58px;
  }

  html {
    font-size: 15px;
  }

  .menu-btn {
    display: flex;
    width: 38px;
    height: 38px;
  }

  header {
    height: var(--header-h);
    padding: 0 8px;
    gap: 7px;
  }

  body.admin-bar header {
    top: 46px;
  }

  body.admin-bar .sidebar {
    top: calc(var(--header-h) + 46px);
  }

  .logo .name {
    display: none;
  }

  .logo .pad {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .sidebar {
    width: 260px;
    max-width: 86vw;
    transform: translateX(-100%);
    transition: transform .28s ease;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .overlay-mask.show {
    display: block;
  }

  main,
  footer {
    margin-left: 0;
  }

  main {
    padding: 12px 9px 86px;
  }

  .header-actions {
    display: none;
  }

  .search {
    height: 38px;
    max-width: none;
    flex: 1;
    border-radius: 11px;
    padding: 0 9px;
  }

  .search svg {
    width: 17px;
    height: 17px;
  }

  .search input {
    font-size: 13.5px;
  }

  .ajax-search-results {
    position: fixed;
    top: calc(var(--header-h) + 6px);
    left: 7px;
    right: 7px;
    max-height: 70vh;
    z-index: 999;
  }

  .hero {
    min-height: 200px;
    border-radius: 16px;
    margin-bottom: 18px;
  }

  .hero-inner {
    padding: 16px;
  }

  .hero .eyebrow {
    font-size: 11px;
    padding: 5px 10px;
  }

  .hero h1 {
    font-size: 24px;
    line-height: 1.08;
  }

  .hero p {
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .hero .hero-cta {
    gap: 8px;
  }

  .hero .play-now,
  .hero .secondary {
    height: 42px;
    padding: 0 13px;
    font-size: 13.5px;
    border-radius: 12px;
  }

  .sec-head {
    margin: 20px 1px 11px;
  }

  .sec-head h2 {
    font-size: 19px;
  }

  .sec-head .more {
    font-size: 12.5px;
  }

  .grid,
  .grid.big {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .card,
  .card.wide {
    grid-column: span 1;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
  }

  .card .overlay {
    opacity: 1;
    padding: 8px;
  }


  .card .meta .t {
    font-size: 12.5px;
  }

  .card .meta .s {
    font-size: 10px;
  }

  .card .tag {
    font-size: 9.5px;
    padding: 2px 7px;
  }

  .pills {
    gap: 8px;
  }

  .pill {
    padding: 8px 13px;
    font-size: 13px;
  }

  .detail-wrap {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .player {
    border-radius: 16px;
  }

  .player .screen {
    aspect-ratio: 16 / 9;
    padding: 12px;
  }

  .player .screen .gamejoy-player-start-title {
    font-size: 19px;
  }

  .player .screen p {
    font-size: 13px;
    margin-bottom: 15px;
  }

  .player .big-play {
    width: 58px;
    height: 58px;
  }

  .player .bar {
    height: auto;
    min-height: 48px;
    padding: 8px 10px;
    gap: 8px;
  }

  .player .bar .pname {
    font-size: 13px;
  }

  .player .bar .tools {
    gap: 6px;
  }

  .player .bar .tools button {
    min-width: 36px;
    height: 32px;
  }

  .detail-info {
    padding: 15px;
    border-radius: 16px;
  }

  .detail-info h2 {
    font-size: 20px;
  }

  .detail-stats {
    gap: 12px;
  }

  .detail-stats .st .v {
    font-size: 18px;
  }

  .art-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .art-card {
    border-radius: 16px;
  }

  .art-card .cover {
    height: 150px;
  }

  .art-card .body {
    padding: 15px;
  }

  .art-card .body h3 {
    font-size: 17px;
  }

  .art-card .body p {
    font-size: 13.5px;
  }

  .article-full {
    max-width: 100%;
  }

  .article-full .a-cover {
    height: 190px;
    border-radius: 16px;
  }

  .article-full h1 {
    font-size: 24px;
  }

  .article-full .a-meta {
    gap: 9px;
    font-size: 12.5px;
    flex-wrap: wrap;
  }

  .article-full .a-body p {
    font-size: 15px;
    line-height: 1.75;
  }

  .article-full .a-body h2 {
    font-size: 21px;
  }

  .page-head {
    padding: 14px;
    gap: 11px;
    border-radius: 16px;
  }

  .page-head .icon {
    width: 48px;
    height: 48px;
    font-size: 24px;
  }

  .page-head h1 {
    font-size: 22px;
  }

  .page-head p {
    font-size: 13px;
  }

  .ad-leaderboard {
    height: 86px;
  }

  .ad-infeed {
    grid-column: span 2;
    min-height: 105px;
  }

  .ad-inarticle {
    height: 220px;
  }

  .ad-preroll .pr-box {
    width: 90%;
    height: 54%;
  }

  .ad-preroll .skip {
    height: 38px;
    padding: 0 16px;
    font-size: 13px;
  }

  footer {
    padding: 30px 12px 88px;
  }

  .foot-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .foot-about .logo .name {
    display: block;
    font-size: 20px;
  }

  .foot-bottom {
    flex-direction: column;
    font-size: 12.5px;
  }
}

/* Extra tiny mobile */
@media (max-width: 360px) {
  html {
    font-size: 14px;
  }

  header {
    padding: 0 6px;
    gap: 6px;
  }

  .menu-btn {
    width: 36px;
    height: 36px;
  }

  .logo .pad {
    width: 30px;
    height: 30px;
  }

  .search {
    height: 36px;
    padding: 0 8px;
  }

  .search input {
    font-size: 13px;
  }

  main {
    padding-left: 8px;
    padding-right: 8px;
  }

  .grid,
  .grid.big {
    gap: 8px;
  }

  .card .meta .t {
    font-size: 12px;
  }

  .hero h1 {
    font-size: 22px;
  }

  .hero p {
    font-size: 13px;
  }
}

/* Fix image full cover */
.card .thumb img,
.art-card .cover img,
.article-full .a-cover img,
.ajax-search-thumb img,
.thumb.has-img img,
.cover.has-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fix iframe game full */
.player,
.player .screen {
  position: relative;
}

.player iframe,
.player iframe.game-frame,
.game-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* Prevent text overflow */
.card .meta .t,
.ajax-search-copy strong,
.sec-head h2,
.page-head h1,
.article-full h1 {
  overflow-wrap: anywhere;
}

/* Better mobile touch */
@media (max-width: 991px) {
  a,
  button,
  .card,
  .pill,
  .cat {
    -webkit-tap-highlight-color: transparent;
  }

  .ad-anchor,
  .ad-anchor-wrap {
    display: flex;
  }

  main {
    padding-bottom: 90px;
  }
}
/* v3.1 image-only game presentation */
.card .thumb{background:var(--theme-background)}
.card .thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gamejoy-player-poster{width:min(220px,45%);aspect-ratio:1/1;object-fit:cover;border-radius:24px;box-shadow:0 18px 44px rgba(0,0,0,.32);margin-bottom:16px}
.card .thumb {
    background: var(--theme-background, var(--theme-background));
    width: 100%;
    height: 100%;
}
.card .thumb {
	position: relative;
	overflow: hidden;
}

.card .thumb > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	transition: opacity 0.2s ease;
}

.gamejoy-card-preview {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	pointer-events: none;
	background: #000;
	transition: opacity 0.2s ease;
}

.card.has-preview-video:hover .gamejoy-card-preview,
.card.has-preview-video:focus .gamejoy-card-preview,
.card.has-preview-video:focus-within .gamejoy-card-preview {
	opacity: 1;
}


.gamejoy-search-primary-results{
    margin-bottom: 10px;
}
.article-full .a-cover img{
	position:relative
}
.detail-stats .st {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
/* v3.3.0 content boxes */
.gamejoyh5-content-box{max-width:none;margin:34px 0 0;padding:clamp(20px,3vw,34px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}.gamejoyh5-content-box .a-body{padding:0}.gamejoyh5-content-box .entry-content>:first-child{margin-top:0}.gamejoyh5-content-box .entry-content>:last-child{margin-bottom:0}

/* GameHiHi 3.4.6: autoplay card previews and remove personal note. */
.gamejoy-personal-note {
	display: none !important;
}
.card.is-preview-playing .gamejoy-card-preview {
	opacity: 1 !important;
}
.card.is-preview-playing .thumb > img:not(.gamejoy-card-preview) {
	opacity: 0 !important;
}


/* v3.4.8 — scrollable home category pills and Google authentication. */
.home .pills,
.front-page .pills,
body.home .pills{
  display:flex;
  flex-wrap:nowrap;
  gap:10px;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding:5px 3px 12px;
  scroll-behavior:smooth;
  scroll-snap-type:x proximity;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--theme-primary) var(--theme-background-alt);
  -webkit-overflow-scrolling:touch;
}
.home .pills::-webkit-scrollbar,
.front-page .pills::-webkit-scrollbar,
body.home .pills::-webkit-scrollbar{height:8px;display:block}
.home .pills::-webkit-scrollbar-track,
.front-page .pills::-webkit-scrollbar-track,
body.home .pills::-webkit-scrollbar-track{background:var(--theme-background-alt);border-radius:999px}
.home .pills::-webkit-scrollbar-thumb,
.front-page .pills::-webkit-scrollbar-thumb,
body.home .pills::-webkit-scrollbar-thumb{background:var(--theme-primary);border-radius:999px;border:2px solid var(--theme-background-alt)}
.home .pills .pill,
.front-page .pills .pill,
body.home .pills .pill{flex:0 0 auto;scroll-snap-align:start}

.gamejoy-google-login{
  width:100%;
  min-height:44px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid #d8dee8;
  border-radius:10px;
  background:#fff;
  color:#1f2937;
  font-size:14px;
  font-weight:900;
  line-height:1.2;
  text-decoration:none;
  box-shadow:0 4px 13px rgba(15,23,42,.06);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;
}
.gamejoy-google-login:hover{background:#f8fafc;color:#111827;border-color:#aeb8c8;box-shadow:0 7px 18px rgba(15,23,42,.10);transform:translateY(-1px)}
.gamejoy-google-login svg{width:21px;height:21px;display:block;flex:0 0 21px}
.gamejoy-google-login.is-home{margin-top:10px}
.gamejoy-google-login.is-account{min-height:50px;border-radius:13px;font-size:15px}
.gamejoy-social-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:#94a3b8;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.gamejoy-social-divider:before,.gamejoy-social-divider:after{content:"";height:1px;background:#e2e8f0;flex:1}
.gamejoy-social-divider span{white-space:nowrap}
.gamejoy-home-login-qr{display:none!important}

/* v3.4.8 — drag-to-scroll category pills on desktop and touch devices. */
.pills{
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  touch-action:pan-y;
  overscroll-behavior-x:contain;
}
.pills.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto !important;
  scroll-snap-type:none !important;
}
.pills.is-dragging .pill{pointer-events:none}
.pills .pill,.pills .pill img{-webkit-user-drag:none;user-drag:none}

/* v3.5.1: standard WordPress pages use the same article presentation as single posts */
.gamejoy-standard-page .article-full{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.gamejoy-standard-page .article-full > h1{
  margin-top:22px;
}
.gamejoy-standard-page .gamejoy-page-meta{
  margin-bottom:22px;
}
.gamejoy-standard-page .a-body,
.gamejoyh5-collection-content{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:clamp(20px,3vw,34px);
  overflow:hidden;
}
.gamejoy-standard-page .a-body > :first-child,
.gamejoyh5-collection-content .entry-content > :first-child{
  margin-top:0;
}
.gamejoy-standard-page .a-body > :last-child,
.gamejoyh5-collection-content .entry-content > :last-child{
  margin-bottom:0;
}
.gamejoyh5-content-box{
  width:100%;
  max-width:none;
  margin:34px 0 0;
}
@media(max-width:782px){
  .gamejoy-standard-page .article-full > h1{margin-top:16px}
  .gamejoy-standard-page .a-body,
  .gamejoyh5-collection-content{padding:18px;border-radius:18px}
}

/* v3.5.2: full-width page and article content */
.article-full{width:100%;max-width:none;}

/* v3.5.4 data-driven five-column footer */
.foot-grid{display:grid;grid-template-columns:minmax(250px,1.4fr) repeat(4,minmax(0,1fr));gap:30px;width:100%;max-width:none;margin:0}
.foot-grid>div{min-width:0}.foot-links{display:flex;flex-direction:column;gap:4px}.foot-links a{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border-radius:9px;margin:0;color:var(--theme-background-alt)!important}.foot-links a:hover{color:var(--menu-color,#fff)!important;background:rgba(255,255,255,.07)}.foot-icon{flex:0 0 22px;width:22px;text-align:center}.foot-label{min-width:0;overflow-wrap:anywhere}.foot-bottom{width:100%;max-width:none}
@media(max-width:1100px){.foot-grid{grid-template-columns:1.4fr repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}.foot-about{grid-column:1/-1}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}.foot-about{grid-column:auto}}

/* v3.5.5 - Blog single content follows the single-game card layout */
.gamejoy-blog-single .article-full{
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(20px,3vw,34px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.gamejoy-blog-single .a-cover{
  border-radius:var(--r-lg);
  overflow:hidden;
}
.gamejoy-blog-single .a-body{
  padding:0;
}
.gamejoy-blog-single .a-body.entry-content{
  font-size:16px;
  line-height:1.8;
}
.gamejoy-blog-single .sec-head,
.gamejoy-blog-single .sec-head + div{
  max-width:none !important;
  width:100%;
  margin-left:0 !important;
  margin-right:0 !important;
}
@media (max-width:700px){
  .gamejoy-blog-single .article-full{
    padding:18px;
    border-radius:18px;
  }
}
 li:has(> h2){
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 1.3;
    margin: 30px 0 12px;
    color: var(--navy);
    padding: 0;
    list-style-position: outside;
}

li:has(> h3){
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 21px;
    line-height: 1.35;
    margin: 26px 0 10px;
    color: var(--navy);
    padding: 0;
}


 li:has(> h4){
    font-family: 'Fredoka', sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    margin: 22px 0 8px;
    color: var(--navy);
    padding: 0;
}
.article-full .a-body ol{
    padding-left: 20px;
}

.article-full .a-body ul{
    padding-left: 20px; /* nếu muốn ul đồng bộ */
}
.article-full .a-body li{
    padding-left: 0;
}
/* v3.5.15 mobile pills */
.pills-mobile{display:none!important}
@media(max-width:767px){.pills-desktop{display:none!important}.pills-mobile{display:flex!important}.pills-mobile .pill{flex:1 1 0;justify-content:center;min-width:0}.pills-mobile .pill:nth-child(n+4){display:none!important}}
 .gamejoy-player-root .screen:not(.is-playing)>.big-play,
@media (max-width: 768px){
    .gamejoy-player-root .screen{
        aspect-ratio: auto !important;
    }
}
@media (max-width: 700px) {
    .gamejoy-player-root .screen:not(.is-playing)>.big-play {
        position: absolute !important;
    }
}
@media (max-width: 700px) {
    .gamejoy-player-root .screen {
        min-height: 200px;
        aspect-ratio: auto !important;
    }
}
    .gamejoy-player-root .screen:not(.is-playing)>.big-play {
        position: absolute !important;
    }

/* v3.5.30 - all main surfaces and text colors controlled in GameHiHi > Colors */
header{background:var(--theme-header);color:var(--ink)}
.sidebar{background:var(--theme-sidebar)}
footer{background:var(--theme-footer)}
.card,.detail-info,.article-full,.ajax-search-results,.pill,.ad-slot-infeed{background-color:var(--card)}
.btn-primary,.pagination .page-numbers.current{color:var(--theme-button-text)}
.search:focus-within{background:var(--card)}
.pagination .page-numbers,.ajax-search-results{background:var(--card)}

/* v3.5.33 - preset-aware accents and scrollbar colors */
::-webkit-scrollbar-thumb{background:var(--theme-primary)}
::-webkit-scrollbar-thumb:hover{background:var(--theme-secondary)}