/* Small extracted inline styles from game partials. */
.game-actions-inline-row {
    display: inline-flex;
    gap: 2px;
}

.game-actions-inline-flex {
    display: flex;
}

.game-actions-share-icon {
    width: 22px;
    height: 22px;
}

.game-install-hidden {
    display: none;
}

.game-seo-title-override {
    font-size: 1.75rem !important;
}

.game-seo-content-shell {
    position: relative;
}

.game-seo-content-body {
    position: relative;
    overflow: hidden;
}

.game-seo-content-body.is-collapsed {
    max-height: 420px;
}

.game-seo-content-body.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(26, 27, 40, 0), rgba(26, 27, 40, 1));
}

.game-seo-content-body.is-expanded {
    max-height: none;
}

.game-seo-content-body.is-expanded::after {
    display: none;
}

.game-seo-toggle-button {
    margin-top: 1rem;
    border: 0;
    border-radius: 999px;
    background: #6842ff;
    color: #fff;
    font-weight: 800;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
}

.descript-gameview ul,ol{list-style-type:disc;margin:0 40px}.descript-gameview ul li{margin:15px 0}

.mobile-game-tag-text {
    color: #fff !important;
}

.mobile-game-hero-shell {
    position: relative;
    min-height: calc(100svh - 96px);
    width: 100%;
    overflow: hidden;
    border-radius: 0 0 12px 12px;
    background: #080a12;
    isolation: isolate;
}

.mobile-game-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.18);
    filter: blur(2px) saturate(1.05);
    opacity: 0.62;
    z-index: 1;
}

.mobile-game-hero-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(8, 10, 18, 0.78) 54%, #080a12 100%),
        radial-gradient(circle at 50% 62%, rgba(124, 58, 237, 0.12), transparent 42%);
    z-index: 2;
}

.mobile-game-hero-content {
    position: relative;
    z-index: 3;
    min-height: calc(100svh - 96px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding: 44px 24px 0;
    text-align: center;
}

.mobile-game-hero-card {
    display: block;
    width: min(45vw, 168px);
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.62);
}

.mobile-game-hero-title {
    margin: 2px 0 0;
    color: #fff;
    font-size: 25px;
    line-height: 1.1;
    font-weight: 900;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.56);
}

.mobile-game-hero-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.mobile-game-hero-tag a {
    color: #a78bfa !important;
    text-decoration: none !important;
}

.mobile-game-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: min(88vw, 340px);
    min-height: 58px;
    margin-top: 6px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #8b3dff 0%, #7433ed 58%, #6d28d9 100%);
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 22px 46px rgba(94, 35, 214, 0.42);
    padding: 0 28px;
	margin-bottom: 1rem;
}

.mobile-game-hero-button-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

@media (max-width: 380px) {
    .mobile-game-hero-button {
        min-height: 54px;
        font-size: 18px;
        width: min(92vw, 320px);
        padding: 0 22px;
    }

    .mobile-game-hero-button-icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 380px) {
    .mobile-game-hero-content {
        gap: 12px;
        padding-inline: 18px;
    }

    .mobile-game-hero-card {
        width: min(46vw, 150px);
    }

    .mobile-game-hero-title {
        font-size: 23px;
    }

    .mobile-game-related-grid {
        gap: 9px 7px;
    }

    .mobile-game-related-title {
        font-size: 10.5px;
    }
}

.mobile-game-player-ad-slot {
    width: 160px;
    text-align: center;
    padding: 10px;
}

.mobile-game-player-banner-slot {
    text-align: center;
    margin: 0 auto;
    width: 300px;
    height: 250px;
}

.mobile-game-related-shell {
    position: relative;
    z-index: 4;
	margin-top: 3rem;
}

.mobile-game-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 8px;
    align-items: start;
}

.mobile-game-related-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    color: #fff !important;
    text-decoration: none !important;
}

.mobile-game-related-thumb-wrap {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #1a1b28;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.mobile-game-related-thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
}

.mobile-game-related-title {
    display: -webkit-box;
    min-height: 2.6em;
    margin-top: 7px;
    padding: 0 2px;
    overflow: hidden;
    color: #f7f8ff;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 800;
    text-align: center;
    text-wrap: balance;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.mobile-game-related-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 42px;
    margin-top: 14px;
    border: 0;
    border-radius: 999px;
    background: #373952;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.mobile-game-related-more i {
    font-size: 14px;
}

.mobile-game-inline-icon {
    width: 18px;
    height: 18px;
    margin-right: 3px;
}

.GameThumbLabel_mobileIcon__pika {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border-radius: 999px;
    justify-content: center;
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    text-indent: -9999px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.GameThumbLabel_mobileIcon__pika::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.GameThumbLabel_mobileIcon__pika.GameThumbLabel_mobileIcon--hot::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13.86 2.01a1 1 0 0 1 .91.35C17.28 5.37 20 9.21 20 13.8 20 18.5 16.51 22 11.59 22 6.98 22 4 18.2 4 13.35c0-4 2.18-6.15 4.57-7.69a1 1 0 0 1 1.5.65c.17.56.45 1.07.64 1.33.77-.84 1.35-2.23 2.29-4.42l.86-2.01Zm.39 2.91c-.41.95-.78 1.78-1.12 2.42-.51.98-1.02 1.72-1.74 2.28a1 1 0 0 1-1.53-.16 6.8 6.8 0 0 1-1.2-2.1c-.57.44-1.1.95-1.56 1.58C6.44 10.59 6 11.73 6 13.35c0 1.65.49 3.34 1.44 4.6 1 1.33 2.38 2.05 4.15 2.05 3.75 0 6.41-2.57 6.41-6.2 0-3.29-1.69-6.22-3.75-8.89Z'/%3E%3Cpath fill='%23fff' d='M15 17.8c0 1.87-1.29 3.2-3.18 3.2C9.93 21 9 19.22 9 17.6s.88-2.4 1.76-3c.18.6.53 1.14.71 1 .48-.39.74-1.04 1.39-2.6C13.93 14.33 15 15.93 15 17.8Z'/%3E%3C/svg%3E");
}

.GameThumbLabel_mobileIcon__pika.GameThumbLabel_mobileIcon--new::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2l1.72 5.28H19l-4.27 3.1 1.63 5.05L12 12.35 7.64 15.43l1.63-5.05L5 7.28h5.28z'/%3E%3Ccircle cx='18' cy='6' r='2.2' fill='%23fff'/%3E%3C/svg%3E");
}

.GameThumbLabel_mobileIcon__pika.GameThumbLabel_mobileIcon--top-rated::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2336390d' d='M12 2.5 14.94 8h5.81l-4.7 4 1.7 6-5.75-3.42L6.25 18l1.7-6-4.7-4h5.81z'/%3E%3C/svg%3E");
}

.mobile-game-exit-bar {
    display: none;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 29px;
    padding: 3px 4px;
    background: #1a1b28;
    z-index: 2147483647;
    box-sizing: border-box;
}

.mobile-game-exit-button {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 23px;
    padding: 3px 7px;
    border: 0;
    border-radius: 3px;
    background: #7c3aed;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.mobile-game-exit-icon {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex: 0 0 auto;
}

body.mobile-game-playing .mobile-game-exit-bar {
    display: flex;
}

body.mobile-game-playing #gameDiv {
    padding-top: 29px;
    background: #000;
    box-sizing: border-box;
}

body.mobile-game-playing #ava-game_container {
    height: calc(100svh - 29px) !important;
}

.mobile-game-seo-spacing {
    margin-bottom: 5rem;
    padding-bottom: 1.5rem;
}

.game-sidebar-float-right {
    float: right !important;
}

.game-layout-with-sidebar .game-sidebar-column {
    order: 2;
}

.game-layout-with-sidebar .game-main-column {
    order: 1;
}

.game-related-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.game-related-skeleton-mobile {
    margin-bottom: 12px;
}

.game-related-skeleton-card {
    display: block;
    width: 100%;
    min-height: 148px;
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(55, 57, 82, 0.9), rgba(83, 86, 116, 0.95), rgba(55, 57, 82, 0.9));
    background-size: 220% 100%;
    animation: game-shell-shimmer 1.5s linear infinite;
}

.game-related-skeleton-card-mobile {
    min-height: 126px;
    border-radius: 14px;
}

.mobile-game-player-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(56.25vw, 70svh);
    background: linear-gradient(180deg, rgba(18, 20, 30, 0.92), rgba(12, 13, 20, 1));
    border-radius: 14px;
    overflow: hidden;
}

.mobile-game-player-placeholder {
    width: min(78vw, 420px);
    display: grid;
    gap: 14px;
}

.mobile-game-player-placeholder-bar,
.mobile-game-player-placeholder-box {
    display: block;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(55, 57, 82, 0.92), rgba(93, 97, 132, 0.98), rgba(55, 57, 82, 0.92));
    background-size: 220% 100%;
    animation: game-shell-shimmer 1.5s linear infinite;
}

.mobile-game-player-placeholder-bar {
    width: 48%;
    height: 14px;
    margin: 0 auto;
}

.mobile-game-player-placeholder-box {
    width: 100%;
    min-height: 180px;
    border-radius: 20px;
}

@keyframes game-shell-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -20% 0;
    }
}

@media (min-width: 1024px) {
    .game-layout-with-sidebar .game-sidebar-column {
        order: 2;
    }

    .game-layout-with-sidebar .game-main-column {
        order: 1;
        min-width: 0;
    }

    .game-related-skeleton-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ===========================================================================
   Khung game chủ lực trên trang chủ — tỉ lệ 4:3
   ---------------------------------------------------------------------------
   Đào Vàng Cổ Điển dựng trên khung thiết kế 640x480 (xem DESIGN_W trong
   games/dao-vang-co-dien/js/mobile-layer.js). Dùng lớp aspect-video (16:9) như
   trước sẽ để lại hai dải đen hai bên trên điện thoại và làm vùng chơi thật bị
   thu nhỏ — đúng chỗ quan trọng nhất của trang.

   max-height giữ nguyên tinh thần bản cũ: khung không được cao quá màn hình,
   nếu không người dùng phải cuộn mới thấy hết bàn chơi.
   =========================================================================== */
.hero-game-43 {
    aspect-ratio: 4 / 3;
    max-height: calc(100svh - 200px);
}

@media (max-width: 767px) {
    .hero-game-43 {
        /* Trên điện thoại còn phải chừa chỗ cho header cố định và nút hành động. */
        max-height: calc(100svh - 160px);
    }
}

/* ---------------------------------------------------------------------------
   TOÀN MÀN HÌNH — huỷ aspect-ratio, và ĐẶT LẠI max-height cho đúng
   ---------------------------------------------------------------------------
   Hai thuộc tính ở khối trên là để khung game nằm đẹp TRONG TRANG. Khi vào toàn
   màn hình thì chúng thành vật cản:

     - aspect-ratio 4/3 khiến khung không lấp kín màn hình 16:9.
     - max-height calc(100svh - 200px) chừa một dải đen ~200px dưới đáy. File
       này nạp SAU bundle chính nên nó đè cả lớp .max-h-[calc(100svh-45px)] mà
       page-view-game.js gắn vào lúc vào toàn màn hình (cùng độ đặc hiệu 0,1,0,
       khai báo sau thắng).

   CHỈ đụng aspect-ratio và max-height — TUYỆT ĐỐI KHÔNG đặt height ở đây.

   Bundle chính có luật #ava-game_container{height:100%} dùng ID, độ đặc hiệu
   (1,0,0) — cao hơn mọi luật class ở file này (0,2,0). Chiều cao vì thế luôn do
   luật ID quyết định, và đường duy nhất để chừa chỗ cho thanh nút là max-height.

   Bản sửa trước đặt max-height:none, kết quả là khung cao trọn màn hình và đẩy
   thanh nút (thích / cài đặt / chia sẻ / thoát) ra ngoài vùng nhìn thấy. Đặt
   đúng calc(100svh - 45px) thì hành vi giống hệt trang chi tiết game — nơi lớp
   Tailwind vẫn có tác dụng vì .aspect-video không đặt max-height.

   Phần tử được gọi requestFullscreen là #gameDiv, .hero-game-43 là con của nó,
   nên cần luật cho cả hai trường hợp. Viết TÁCH từng luật cho bản chuẩn và bản
   -webkit-: trình duyệt bỏ nguyên cả danh sách selector nếu gặp một selector nó
   không hiểu, gộp chung là mất luôn bản chuẩn trên Safari.

   45px là chiều cao thanh nút, khớp con số page-view-game.js dùng.
   --------------------------------------------------------------------------- */
:fullscreen .hero-game-43 {
    aspect-ratio: auto;
    max-height: calc(100svh - 45px);
}

.hero-game-43:fullscreen {
    aspect-ratio: auto;
    max-height: calc(100svh - 45px);
}

:-webkit-full-screen .hero-game-43 {
    aspect-ratio: auto;
    max-height: calc(100svh - 45px);
}

.hero-game-43:-webkit-full-screen {
    aspect-ratio: auto;
    max-height: calc(100svh - 45px);
}

/* ---------------------------------------------------------------------------
   HERO TRANG GAME TRÊN DI ĐỘNG — bản thấp
   ---------------------------------------------------------------------------
   Bản gốc dùng min-height: calc(100svh - 96px) cho CẢ trang chủ lẫn trang chi
   tiết game. Với trang chủ thì hợp lý — hero ở đó chính là nội dung chính. Với
   trang game thì không: hero chỉ là tấm bìa dẫn vào game.

   Đo trên iPhone 16 Pro Max (440x956) trước khi sửa:
     hero cao 860px  ->  584px trên cùng chỉ là ảnh nền mờ, không có gì
     khối "game liên quan" bắt đầu ở y=998  ->  nằm ngoài màn hình

   Nội dung thật bên trong hero chỉ chiếm ~315px (ảnh bìa 105 + tiêu đề 28 +
   thẻ 20 + nút 58 + 3 khoảng cách 14 + đệm trên 44 + lề dưới nút 16).

   clamp(360px, 56svh, 560px):
     - 56svh vừa đủ để ảnh bìa, tiêu đề và nút nằm thoáng, đồng thời chừa ~40%
       màn hình cho khối kế tiếp lộ ra — tín hiệu cho người dùng biết còn nội
       dung phía dưới.
     - sàn 360px để trên máy màn hình ngắn nội dung không bị bó cứng.
     - trần 560px để trên máy màn hình rất dài hero không phình vô ích.

   Dùng HAI class trong selector (.a.b) để đạt độ đặc hiệu 0,2,0 — thắng luật
   gốc 0,1,0 bất kể thứ tự khai báo. Trong file này đã có tiền lệ luật bị đè
   ngược vì cùng độ đặc hiệu, nên không dựa vào thứ tự nữa.

   KHÔNG đụng .mobile-game-hero-shell trần: trang chủ vẫn giữ hero cao.
   --------------------------------------------------------------------------- */
.mobile-game-hero-shell.mobile-game-hero-shell--compact {
    min-height: clamp(360px, 56svh, 560px);
}

.mobile-game-hero-content.mobile-game-hero-content--compact {
    min-height: clamp(360px, 56svh, 560px);
    /* Đệm trên nhỏ lại theo: 44px là để cân với hero cao gần trọn màn hình. */
    padding-top: 28px;
}

/* ---------------------------------------------------------------------------
   THANH NÚT (like/share/toàn màn hình) BỊ "GAME LIÊN QUAN" ĐÈ LÊN
   ---------------------------------------------------------------------------
   Đo trên desktop 1440x900, trang /game/{slug}, so với bản chạy đúng
   (gamepoki_en) vốn có PHP và CSS y hệt:

                        bản đúng      bản lỗi
     .game-content-wrapper   611          611
     #ava-game_container     566          611   <- lệch 45px nằm ở đây
     #gameDiv                611          656   = khung game + 45 (thanh nút)

   #ava-game_container mang ĐỒNG THỜI aspect-ratio 16/9 và height:100% (luật ID
   trong bundle). Ở bản đúng, height:100% không phân giải được (chuỗi cha đều
   height:auto) nên rơi về auto và aspect-ratio quyết định: 1006 x 9/16 = 566.
   Ở bản lỗi, 100% lại phân giải ra giá trị xác định bằng trọn chiều cao wrapper
   (611), tức khung game nuốt luôn phần chỗ dành cho thanh nút — thanh nút bị
   đẩy ra ngoài hộp wrapper và "Game liên quan" trùm lên.

   Trả height về auto là khôi phục đúng hành vi bản đúng: 566 + 45 = 611 khớp
   wrapper, không tràn, không cần chèn khoảng trống.

   Bản vá padding-bottom:45px trước đây xử lý sai chỗ: nó giữ khung game ở 611
   rồi nới wrapper lên 656, nên chừa ra một dải trống 45px thừa dưới thanh nút.

   Phạm vi giới hạn có chủ đích:
     - .aspect-video  -> chỉ trang view game; trang chủ dùng .hero-game-43 (4/3)
     - min-width:961px -> giữ nguyên #ava-game_container{height:75vh} ở <=600px
       và {height:100%} ở landscape <=960px trong bundle
     - :fullscreen    -> trả lại height:100% để game phủ kín màn hình; thiếu
       dòng này sẽ tái hiện lỗi viền đen trên/dưới khi bật toàn màn hình
   --------------------------------------------------------------------------- */
@media (min-width: 961px) {
    #ava-game_container.aspect-video {
        height: auto;
    }
}

/* Viết tách thành từng luật: trình duyệt bỏ NGUYÊN luật nếu gặp selector lạ,
   gộp chung sẽ làm mất luôn nhánh không dùng tiền tố. */
@media (min-width: 961px) {
    #gameDiv:fullscreen > #ava-game_container.aspect-video {
        height: 100%;
    }
}

@media (min-width: 961px) {
    #gameDiv:-webkit-full-screen > #ava-game_container.aspect-video {
        height: 100%;
    }
}