:root {
  --panel-width-desktop: 620px;
  --game-container-width: 310px;
  --panel-gap: 10px;
  --panel-tile-radius: 10px;
  --suggest-grid-unit: 48px;
}

.main-panel {
  position: fixed !important;
  right: 0;
  top: 0;
  height: 100vh;
  width: calc(100vw - var(--game-container-width)) !important;
  min-width: calc(100vw - var(--game-container-width)) !important;
  max-width: calc(100vw - var(--game-container-width)) !important;
  overflow: visible !important;
  z-index: 1200;
}

.main-panel.panel-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  pointer-events: auto;
}

.main-panel.panel-collapsed .main-panel-content {
  padding: 0 !important;
  overflow: visible;
}

.main-panel.panel-collapsed #panel-layout-grid {
  display: block;
}

.main-panel.panel-collapsed .panel-layout-slot-a {
  background: transparent;
  padding: 0;
}

.main-panel.panel-collapsed .panel-layout-slot-a > *:not(.hide-main-panel):not(#idGame),
.main-panel.panel-collapsed .panel-layout-slot-b,
.main-panel.panel-collapsed #content-text,
.main-panel.panel-collapsed menu-footer {
  display: none !important;
}

.main-panel.panel-collapsed #recommend > * {
  display: none !important;
}

.main-panel.panel-collapsed #recommend .panel-layout-slot-a {
  display: block !important;
  background: transparent;
  padding: 0;
}

.main-panel-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "layout"
    "description"
    "footer";
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px !important;
  box-sizing: border-box;
  gap: var(--panel-gap);
}

#panel-layout-grid {
  grid-area: layout;
  display: block;
}

#gameContainer {
  width: 100vw;
  /* width: var(--game-container-width) !important;
  min-width: var(--game-container-width) !important;
  max-width: var(--game-container-width) !important;
  box-sizing: border-box !important; */
}

.main-panel.panel-collapsed + #gameContainer {
  width: 100vw !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Giới hạn width của #unity-loading-bar khi main-panel đang mở */
body:not(.panel-collapsed) #unity-loading-bar,
body:not(.panel-collapsed) #loader {
  max-width: var(--game-container-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
body:not(.panel-collapsed) #loader .progress {
  width: 85%;
}

/* Khi main-panel đóng, width 100% */
body.panel-collapsed #unity-loading-bar,
body.panel-collapsed #loader {
  width: 100%;
  max-width: none;
}

.panel-layout-slot {
  min-width: 0;
}

.panel-layout-slot-a {
  display: block;
  grid-column: span 3;
  grid-row: span 3;
  max-height: calc(var(--suggest-grid-unit) * 3 + 8px);
  overflow: hidden;
}

.main-panel form#search {
  width: calc(100% - 60px);
}

.panel-layout-slot-a menu-header,
.panel-layout-slot-a site-search,
.panel-layout-slot-a #title,
.panel-layout-slot-a #rating,
.panel-layout-slot-a #category-menu-in-game {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: 100% !important;
  transform: none !important;
}

.panel-layout-slot-a .hide-main-panel {
  margin: 0 0 8px;
}

.panel-layout-slot-a #rating {
  width: 100% !important;
}


.panel-layout-slot-a #category-menu-in-game .btn-list a,
.panel-layout-slot-a #category-menu-in-game .btn-list .btn {
  margin: 0 !important;
  float: none !important;
  position: static !important;
  display: inline-flex !important;
}

.panel-layout-slot-b {
  display: block;
  grid-column: span 3;
  grid-row: span 3;
  max-height: calc(var(--suggest-grid-unit) * 3 + 8px);
  overflow: hidden;
}

.panel-layout-slot-recommend {
  display: block;
}

.panel-layout-slot-recommend .recommend > #recommend {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  grid-auto-rows: var(--suggest-grid-unit);
  grid-auto-flow: dense;
  gap: 8px;
  align-items: start;
  grid-auto-rows: min-content;
}

.panel-layout-slot-a,
.panel-layout-slot-b {
  align-self: start;
}

.panel-layout-slot-a {
  grid-column: span 3;
  grid-row: span 2;
}

.panel-layout-slot-b {
  grid-column: span 3;
  grid-row: span 3;
  margin: auto;
}


.panel-layout-slot-b .main-panel-ads .ads {
  width: 100% !important;
  max-width: 300px;
  min-height: 250px;
  margin: 0 auto !important;
}

.panel-layout-slot-b #Ads1 {
  width: 300px;
  min-height: 250px;
  margin: 0;
}
.hide-main-panel:hover {
  background-color: #eee !important;
}

#recommend .item-game {
  margin: 0 !important;
  width: 100% !important;
  min-height: 0;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #121820;
  grid-column: span 1;
  grid-row: span 1;
}

#recommend .item-game.tile-size-2 {
  grid-column: span 2;
  grid-row: span 2;
}

#recommend .item-game.tile-size-3 {
  grid-column: span 3;
  grid-row: span 3;
}

#recommend .item-game .cr-item,
#recommend .item-game .cr-detail,
#recommend .item-game .cr-item-content,
#recommend .item-game .cr-img,
#recommend .item-game .cr-item > a,
#recommend .item-game .cr-item a {
  width: 100%;
  height: 100%;
  display: block;
}

#recommend .item-game .cr-detail {
  margin: 0;
}

#recommend .item-game img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#content-text {
  grid-area: description;
  display: block;
  margin-top: 20 !important;
}

menu-footer {
  grid-area: footer;
  display: block;
}
.menu-footer {
  margin-bottom: 0px !important;
  padding: 10px 10px 2px 10px !important;
}

/* 1400-1599px: 10 columns - A and B at 4 cols x 2 rows */
@media (min-width: 1400px) and (max-width: 1599px) {
  .panel-layout-slot-recommend .recommend > #recommend {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }

  .panel-layout-slot-b {
    grid-column: span 3;
    grid-row: span 3;
  }
}

/* Below 1400px: 8 columns */
@media (max-width: 1399px) {
  .panel-layout-slot-recommend .recommend > #recommend {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .panel-layout-slot-b {
    grid-column: span 3;
    grid-row: span 3;
  }
}

/* Below 1200px: 6 columns */
@media (max-width: 1199px) {
  .panel-layout-slot-recommend .recommend > #recommend {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .panel-layout-slot-b {
    grid-column: span 3;
    grid-row: span 3;
  }
}

/* Below 1024px: 5 columns */
@media (max-width: 1023px) {
  .panel-layout-slot-recommend .recommend > #recommend {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .panel-layout-slot-b {
    grid-column: span 3;
    grid-row: span 3;
  }
}

/* Below 900px: 4 columns */
@media (max-width: 899px) {
  .panel-layout-slot-recommend .recommend > #recommend {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .panel-layout-slot-b {
    grid-column: span 3;
    grid-row: span 3;
  }
}

/* Below 800px: 3 columns */
@media (max-width: 799px) {
  .panel-layout-slot-recommend .recommend > #recommend {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .panel-layout-slot-b {
    grid-column: span 3;
    grid-row: span 3;
  }
}

@media (max-width: 991px) {
  .main-panel {
    position: fixed !important;
    right: 0;
    top: 0;
    width: min(92vw, 360px) !important;
    max-width: min(92vw, 360px) !important;
    height: 100vh;
    z-index: 1200;
    box-shadow: -6px 0 26px rgba(0, 0, 0, 0.45);
  }

  .main-panel.panel-collapsed {
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
  }

  .panel-layout-slot-b {
    /* grid-column: 1 / -1; */
    grid-column: span 3;
    grid-row: span 3;
  }

  .panel-layout-slot-b .main-panel-ads .ads,
  .panel-layout-slot-b #Ads1 {
    width: 100% !important;
    max-width: 300px;
    min-height: 250px;
  }

  #recommend .item-game.tile-size-3 {
    grid-column: span 2;
    grid-row: span 2;
  }
}

/* ==========GAMES=========== */
#unity-container,
.row_loadding,
#unity-loading-bar,
.ads_loadding_text,
.ads_loadding,
.ads_loadding_content {
  width: 100% !important;
}

.menu-footer a {
  margin-right: 16px;
}

/* Mobile first load - panel below gameContainer */
html.mobile-first-load-active,
body.mobile-first-load-active {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

body.mobile-first-load-active {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
}

body.mobile-first-load-active > #gameContainer {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  position: static !important;
  height: auto !important;
  min-height: 360px !important;
  display: block !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.mobile-first-load-active > .main-panel.mobile-first-load {
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  z-index: 2 !important;
  overflow: visible !important;
  margin: 0 !important;
  transform: none !important;
  box-shadow: none !important;
}

body.mobile-first-load-active .main-panel.mobile-first-load .main-panel-content {
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  display: block !important;
}

body.mobile-first-load-active .main-panel.mobile-first-load #panel-layout-grid {
  display: block !important;
}

@media (max-width: 678px) {
  html:not(.panel-grid-played),
  body:not(.panel-grid-played) {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body:not(.panel-grid-played) {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body:not(.panel-grid-played) > #gameContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    height: auto !important;
    display: block !important;
  }

  body:not(.panel-grid-played) > .main-panel {
    position: relative !important;
    inset: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none !important;
  }

  body:not(.panel-grid-played) > .main-panel .main-panel-content {
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    display: block !important;
  }

  body:not(.panel-grid-played) > .main-panel #panel-layout-grid {
    display: block !important;
  }

    #unity-loading-bar {
      max-width: 100% !important;
    }
}

.main-panel.mobile-first-load {
  position: relative !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  top: unset !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: #fff !important;
  z-index: 1 !important;
}

@media (max-width: 678px) {
  body.mobile-first-load-active .box-full {
    height: 20vh;
  }

  body.mobile-first-load-active #unity-container {
    min-height: 60vh;
    height: auto !important;
  }

  body.mobile-first-load-active #gameContainer {
    height: auto !important;
  }
}

/* =========CUSTOM BTN PLAY GAME ZIP========= */
#unity-loading-bar-v3 .row_loadding {
  margin: auto;
}
div#unity-loading-bar-v3 {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  background: #000000;
  max-width: 310px;
  display: flex;
  z-index: 999;
}
#unity-loading-bar-v3 div#div_btn_v3 {
  display: flex;
  justify-content: center;
      height: 100%;
        align-items: center;
}
#unity-loading-bar-v3 #div_btn_v3 .btn_play {
  width: 150px;
  height: 60px;
  border-radius: 50px;
  background-image: linear-gradient(135deg, #feb692 0%, #ea5455 100%);
  box-shadow: 0 20px 30px -6px rgba(238, 103, 97, 0.5);
  outline: none;
  cursor: pointer;
  border: none;
  font-size: 24px;
  color: white;
  margin-top: 15px;
  transition: all 0.3s ease-in-out;
}
#unity-loading-bar-v3 #div_btn_v3 .btn_play:hover {
  transform: translateY(3px);
  box-shadow: none;
}
.mobile-first-load-active div#unity-loading-bar-v3 {
  max-width: 100%;
  height: 100%;
}
@media (max-width: 678px) {
  body.mobile-first-load-active #gameContainer {
    max-height: 60vh;
    min-height: 60vh;
  }
}
body.mobile-first-load-active #unity-loading-bar-v3 .row_loadding {
  height: 60vh;
}