:root{
    --c-bg:#fff9f3;
    --c-primary:#19a2ff;
    --c-lime:#9dff57;
    --c-pink:#ff6ec7;
    --c-yellow:#ffd447;
    --c-cyan:#39d0ff;
    --c-mint:#7effd4;
    --c-lilac:#b88cff;
    --ink:#182538;
}

/* Base */
html{scroll-behavior:smooth}
body{
    font-family:"Nunito",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
    color:var(--ink);
    background:
            radial-gradient(800px 420px at -5% -5%, #e6f4ff 0%, transparent 55%),
            radial-gradient(900px 500px at 110% -10%, #fff2c7 0%, transparent 60%),
            radial-gradient(900px 520px at 30% 110%, #eafff5 0%, transparent 60%),
            var(--c-bg);
    overflow-x:hidden;
}
a{text-decoration:none}

/* Topbar & navbar (clean) */
.topbar{height:4px;background:linear-gradient(90deg,var(--c-primary),var(--c-lime),var(--c-pink))}
.navbar-kid{background:#fff;box-shadow:0 6px 0 rgba(0,0,0,.04)}
.nav-link{font-weight:700}
.nav-link:hover{color:var(--c-primary)}
.btn-kid{background:linear-gradient(90deg,var(--c-primary),var(--c-lime));border:none;color:#09223b;font-weight:900}
.btn-kid:hover{filter:brightness(.95)}
.badge-kid{background:linear-gradient(90deg,var(--c-pink),var(--c-yellow));font-weight:800}

/* Decorative */
.sticker{display:inline-block;border-radius:16px;background:#fff;padding:8px;box-shadow:0 8px 0 rgba(0,0,0,.06);transform:rotate(-2deg)}
.sticker .cap{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--c-yellow);top:-8px;right:-8px}
.polaroid{background:#fff;border-radius:18px;box-shadow:0 10px 0 rgba(0,0,0,.08);padding:10px;width:100%;max-width:480px;margin-inline:auto}
.polaroid img{width:100%;height:auto;border-radius:12px}
.label{font-weight:900;text-align:center;margin-top:.35rem;color:#5b5b5b}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.mini-grid .cell{background:#fff;border-radius:12px;box-shadow:0 6px 0 rgba(0,0,0,.05);overflow:hidden}
.mini-grid .cell img{width:100%;height:100%;object-fit:cover}

/* Cards */
.game-card{border:0;border-radius:22px;box-shadow:0 8px 0 rgba(0,0,0,.06);background:#fff;overflow:hidden;transition:transform .15s,box-shadow .15s}
.game-card:hover{transform:translateY(-2px);box-shadow:0 10px 0 rgba(0,0,0,.08)}
.game-thumb{position:relative;aspect-ratio:4/3;background:#f2f6fa}
.game-thumb img{width:100%;height:100%;object-fit:cover}
.hover-meta{position:absolute;left:0;right:0;bottom:0;padding:.5rem .75rem;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.65));opacity:0;transition:.25s}
.game-thumb:hover .hover-meta{opacity:1}
.game-meta{padding:.75rem}
.game-title{font-weight:900;line-height:1.2;min-height:2.8em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Section heading */
.section-title{display:flex;align-items:center;gap:.6rem;font-weight:900}
.dot{width:12px;height:12px;border-radius:50%;background:var(--c-primary)}

/* Owl */
.owl-carousel .item{padding:.4rem}
.owl-dots .owl-dot span{width:10px;height:10px}

/* Chips */
.chip{border:0;border-radius:999px;padding:.5rem .9rem;font-weight:800;box-shadow:0 6px 0 rgba(0,0,0,.05);background:#fff}

/* Footer */
footer{background:linear-gradient(90deg,var(--c-lilac),var(--c-mint));color:#1f2937}

/* A11y */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:1rem;top:1rem;z-index:1000;background:#000;color:#fff;padding:.5rem 1rem;border-radius:.5rem}

/* =========================
   Kid-friendly Addon (palette & components)
   ========================= */
:root{
    --c-bg:#fff7ec;
    --c-ink:#24415a;
    --c-primary:#59c3ff;
    --c-primary-2:#a0e9ff;
    --c-secondary:#ff9eb3;
    --c-tertiary:#ffd166;
    --c-mint:#b2f7ef;
    --c-lime:#c3f584;
    --c-grape:#cdb4db;
    --radius-xl:22px;
    --shadow-soft:0 8px 24px rgba(49,72,87,.12);
    --shadow-tiny:0 2px 6px rgba(30,50,60,.15);
}
html,body{
    color:var(--c-ink);
    background:
            radial-gradient(1200px 600px at -10% -10%, #ffe0ec 0%, transparent 55%),
            radial-gradient(900px 500px at 110% 0%, #fff0ba 0%, transparent 60%),
            radial-gradient(800px 700px at 20% 120%, #e0fff7 0%, transparent 60%),
            var(--c-bg)!important;
}

/* Navbar (kid) */
.navbar{background:linear-gradient(90deg,var(--c-primary),var(--c-mint))!important;box-shadow:0 6px 0 rgba(0,0,0,.05);border-bottom:0}
.navbar .nav-link{color:#083b55!important;font-weight:700}
.navbar .nav-link:hover{color:#001f2e!important;opacity:.9}
.form-control[type="search"], .navbar .form-control{border-radius:999px;border:2px solid rgba(0,0,0,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}

/* Section headings */
.section-title, h2.section-title{display:flex;align-items:center;gap:.55rem;font-weight:900;letter-spacing:.2px}
.section-title::before{content:"";width:.6rem;height:.6rem;border-radius:999px;display:inline-block;background:radial-gradient(circle at 30% 30%,var(--c-tertiary),var(--c-secondary));box-shadow:0 0 0 4px rgba(255,158,179,.15)}
.section-actions a{color:#0b5a82;font-weight:700}
.section-actions a:hover{text-decoration:underline}

/* Cards (addon) */
.game-card,.card-game,.card{border:0!important;border-radius:var(--radius-xl)!important;box-shadow:var(--shadow-soft)!important;overflow:hidden;background:#fff;transition:transform .18s ease,box-shadow .18s ease}
.game-card:hover,.card-game:hover,.card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(49,72,87,.18)!important}
.game-thumb,.card .card-img-top,.card figure img{aspect-ratio:4/3;width:100%;object-fit:cover;background:linear-gradient(135deg,#f7fbff,#fff)}
.game-title,.card-title{font-weight:800!important;line-height:1.25;margin:.25rem 0 .35rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.game-meta,.card-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.85rem;opacity:.85}
.badge-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border-radius:999px;background:linear-gradient(180deg,#fff,#f6fbff);border:1px solid rgba(8,59,85,.08);box-shadow:var(--shadow-tiny)}

/* Buttons */
.btn,.btn-primary{border:0;border-radius:999px;padding:.6rem 1.1rem;font-weight:800;letter-spacing:.2px;background:linear-gradient(90deg,var(--c-secondary),var(--c-tertiary));color:#1c2c3a;box-shadow:0 8px 16px rgba(255,158,179,.24)}
.btn:hover{filter:saturate(1.08) brightness(1.03);transform:translateY(-1px)}

/* Owl */
.owl-theme .owl-dots .owl-dot span{width:10px;height:10px;margin:4px 6px;background:linear-gradient(180deg,#d9f3ff,#a6e8ff);box-shadow:inset 0 1px 0 #fff,0 1px 3px rgba(0,0,0,.15)}
.owl-theme .owl-dots .owl-dot.active span{background:linear-gradient(180deg,#ff9eb3,#ffd166);transform:scale(1.1)}
.owl-nav button{background:#fff!important;border:0!important;width:40px;height:40px;border-radius:12px!important;box-shadow:var(--shadow-soft)!important}
.owl-nav button:hover{filter:brightness(1.05)}

/* Breadcrumb & spotlight badge */
.breadcrumb{--bs-breadcrumb-divider:'›';background:linear-gradient(180deg,#fff,#fafbfd);border-radius:12px;padding:.6rem .9rem;border:1px solid rgba(8,59,85,.06);box-shadow:var(--shadow-tiny);font-weight:600}
.breadcrumb a{color:#0b5a82;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.badge-spotlight{background:linear-gradient(90deg,var(--c-primary),var(--c-secondary));color:#06354f;font-weight:900;border-radius:999px;padding:.3rem .7rem}

/* CTA */
.cta-banner{background:linear-gradient(90deg,var(--c-mint),var(--c-primary-2),var(--c-secondary));color:#0b3a54;border-radius:var(--radius-xl);box-shadow:var(--shadow-soft);border:1px solid rgba(8,59,85,.08)}

/* Footer addon */
.site-footer{background:linear-gradient(180deg,#f7fbff,#fef6ff);border-top:3px solid rgba(8,59,85,.06)}
.site-footer h3{font-weight:900;color:#113a50}
.site-footer a{color:#0b5a82}
.site-footer a:hover{text-decoration:underline}

/* Global rounded images */
img,.game-thumb{border-radius:18px}

/* Hover float */
@media (hover:hover){.card-spotlight:hover{animation:floaty .9s ease-in-out both}}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-2px)}100%{transform:translateY(-1px)}}

/* Space */
.section{margin-top:2.25rem;margin-bottom:2.25rem}
.container{scroll-margin-top:90px}

/* Footer right columns */
footer[aria-label="Footer"] .row{display:flex;flex-wrap:wrap;align-items:flex-start}
footer[aria-label="Footer"] .row>.col-md-6{flex:1 1 320px;min-width:320px}
footer[aria-label="Footer"] .row>.col-md-2{flex:0 0 220px;max-width:220px}
@media (min-width:992px){footer[aria-label="Footer"] .row>.col-md-2:first-of-type{margin-left:auto}}
footer[aria-label="Footer"] .row>.col-md-2{padding-left:24px}

/* Footer social */
.social-list{margin:.20rem 0 0}
.social-btn{--size:30px;width:var(--size);height:var(--size);display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;color:#1b2a38;border:1px solid rgba(8,59,85,.08);box-shadow:0 6px 16px rgba(49,72,87,.12),inset 0 1px 0 #fff;transition:transform .15s,box-shadow .15s,filter .15s;text-decoration:none;font-size:1.05rem}
.social-btn:hover{transform:translateY(-1px);filter:saturate(1.1);box-shadow:0 10px 22px rgba(49,72,87,.18),inset 0 1px 0 #fff}
.social-btn.fb{color:#1877f2}
.social-btn.yt{color:#ff0000}
.social-btn.tk{color:#111}
.social-btn.pin{color:#e60023}
.social-btn.ig{color:#d62976}
.social-btn.tw{color:#1da1f2}
@media (max-width:575.98px){.social-btn{--size:30px}}

/* New games page polish */
.section-title{display:flex;align-items:center;gap:.6rem;font-weight:900;letter-spacing:.2px;color:#143a52;margin-bottom:0}
.section-title::before{content:"";width:.6rem;height:.6rem;border-radius:999px;background:radial-gradient(circle at 30% 30%,#ffd166,#ff9eb3);box-shadow:0 0 0 6px rgba(255,158,179,.15)}
.text-muted.small{font-weight:700;color:#6d8aa0!important}
.game-card{border:0!important;border-radius:20px!important;background:#fff;box-shadow:0 10px 24px rgba(49,72,87,.10);overflow:hidden;transition:transform .18s,box-shadow .18s}
.game-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(49,72,87,.18)}
.game-thumb{width:100%;aspect-ratio:4/3;object-fit:cover;background:linear-gradient(135deg,#f7fbff,#fff)}
.game-title{font-weight:800;line-height:1.25;margin:.15rem 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:1200px){.row.g-3{--bs-gutter-x:1rem;--bs-gutter-y:1rem}}
.pagination{gap:.35rem}
.page-link{border:1px solid rgba(8,59,85,.10);border-radius:999px!important;padding:.5rem .9rem;color:#0b5a82;background:#fff;box-shadow:0 2px 6px rgba(30,50,60,.08)}
.page-item.active .page-link{border-color:transparent;color:#0e2c3f;background:linear-gradient(90deg,#a0e9ff,#ffd166);box-shadow:0 6px 16px rgba(49,72,87,.15)}
.page-item.disabled .page-link{opacity:.5}
.container>.row+.mt-4{margin-top:1.25rem!important}

/* Navbar kid spacing & dropdown */
.navbar-kid{background:linear-gradient(90deg,#59c3ff,#b2f7ef);box-shadow:0 6px 0 rgba(0,0,0,.05)}
.navbar-kid .nav-link{font-weight:800;color:#083b55!important;padding:.65rem .9rem;border-radius:12px}
.navbar-kid .nav-link:hover{background:rgba(255,255,255,.35)}
.navbar-kid .nav-link.active{background:linear-gradient(90deg,#a0e9ff,#ffd166);color:#0b2f47!important;box-shadow:0 6px 16px rgba(49,72,87,.15)}
.navbar-kid .dropdown-menu{min-width:280px;border:1px solid rgba(8,59,85,.08);border-radius:16px;padding:.4rem}
.navbar-kid .dropdown-item{font-weight:700;padding:.55rem .8rem}
.navbar-kid .dropdown-item:hover{background:linear-gradient(180deg,#f7fbff,#fff)}
@media (min-width:992px){.navbar-kid .dropdown:hover>.dropdown-menu{display:block;margin-top:.25rem}}
.nav-search .form-control{border-radius:999px;border:2px solid rgba(0,0,0,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.navbar-toggler{border:0;box-shadow:none}
.navbar-toggler-icon{width:1.5rem;height:1.5rem;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 4h12v2H2zm0 3h12v2H2zm0 3h12v2H2z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M2 4h12v2H2zm0 3h12v2H2zm0 3h12v2H2z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain}
.navbar-kid .navbar-nav{gap:.6rem}
@media (min-width:1200px){.navbar-kid .navbar-nav{gap:.8rem}}
@media (max-width:991.98px){.navbar-kid .navbar-nav .nav-link{margin-bottom:.35rem}}

/* ===== GAME AREA ===== */
/* Panel khung bo xanh */
.game-panel, section .card:has(#TheGameDiv){
    border-radius:18px!important;
    background:#f7fbff;
    border:4px solid #cfe4ff;
    box-shadow:0 12px 28px rgba(49,72,87,.12);
    padding:14px 14px 0 14px;
}

/* Canvas trong panel (chuẩn) */
#TheGameDiv{background:#000;border-radius:12px;overflow:hidden}
#TheGameDiv .game-canvas, #flash-container{
    display:block;width:100%;background:#000;border:0;
    min-height:40vh;
}
@media (min-width:768px){#TheGameDiv .game-canvas,#flash-container{min-height:420px}}
@media (min-width:992px){#TheGameDiv .game-canvas,#flash-container{min-height:520px}}
@media (min-width:1200px){#TheGameDiv .game-canvas,#flash-container{min-height:580px}}

/* Biến thể full-bleed (khi dùng .game-full) */
.game-full{border-radius:0!important;box-shadow:none!important}
.game-full #TheGameDiv{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);background:#000}
.game-full .game-canvas,#flash-container.game-full{min-height:56vh}
@media (min-width:992px){.game-full .game-canvas,#flash-container.game-full{min-height:68vh}}

/* Meta bar (chuẩn, responsive) */
.meta-bar{
    margin:8px 0 14px 0;background:#fff;border:1px solid rgba(8,59,85,.08);
    border-radius:12px;box-shadow:0 6px 16px rgba(49,72,87,.08);
    padding:.6rem .75rem;display:flex;flex-wrap:wrap;align-items:center;
    gap:.5rem .75rem;overflow:visible;
}
.meta-bar .d-flex.flex-wrap.align-items-center.gap-3{row-gap:.4rem}
#game-title{font-weight:800}
#play-count{font-variant-numeric:tabular-nums}
.like-btn,.dislike-btn{border-radius:999px;padding:.35rem .75rem;font-weight:800}
.like-btn{background:#e8fbef;border-color:#b6e8c7;color:#0b7a2c}
.dislike-btn{background:#ffefef;border-color:#ffd0d0;color:#a93131}
.rate-slider{width:140px;min-width:120px}
.rate-btn{border-radius:999px;font-weight:800;padding:.35rem .9rem}
.meta-bar .d-flex.align-items-center.gap-2{flex-wrap:wrap}
.fullscreen-btn,.meta-bar [onclick="openFullscreen()"] img{height:22px;width:22px}

/* Meta bar dùng cho full-bleed (chỉ khi .game-full) */
.game-full .meta-bar{
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    border-top:1px solid rgba(8,59,85,.08);border-radius:0;
}

/* Game wrapper (legacy – still used elsewhere) */
.game-wrapper #TheGameDiv{background:#000;border-radius:14px;overflow:hidden}
.game-wrapper .game-canvas,#flash-container{display:block;width:100%;background:#000;min-height:42vh}
@media (min-width:768px){.game-wrapper .game-canvas,#flash-container{min-height:520px}}
@media (min-width:992px){.game-wrapper .game-canvas,#flash-container{min-height:620px}}
@media (min-width:1200px){.game-wrapper .game-canvas,#flash-container{min-height:720px}}
.fullscreen-btn{cursor:pointer;height:28px;width:28px}

/* ===== Meta bar grid (chống vỡ khi tiêu đề dài) ===== */
.meta-bar.meta-grid{
    display:grid;
    grid-template-columns: 1fr auto; /* trái linh hoạt, phải cố định */
    align-items:center;
    gap:.5rem 1rem;
}

/* Cột trái: gom 3 hàng rõ ràng */
.meta-bar.meta-grid .meta-left{
    min-width:0;   /* cho phép ellipsis */
    display:grid;
    gap:.4rem;
}

/* Dòng tiêu đề: ellipsis để không đẩy các thành phần khác */
.meta-bar.meta-grid .title-line{
    display:flex; align-items:center; min-width:0;
}
.meta-bar.meta-grid .game-title-one{
    max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    line-height:1.2; font-weight:800;
}

/* Dòng các chip Like/Votes/Rating tự wrap, không đẩy layout */
.meta-bar.meta-grid .stats-line{
    display:flex; flex-wrap:wrap; gap:.45rem;
}

/* Dòng Rate + Submit */
.meta-bar.meta-grid .rate-line{
    display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
}

/* Cột phải: luôn bám phải, không bị trôi */
.meta-bar.meta-grid .meta-actions{
    display:flex; align-items:center; gap:.5rem; justify-self:end;
    flex-wrap:wrap;
}

/* Mobile: 1 cột, actions xuống dưới */
@media (max-width: 575.98px){
    .meta-bar.meta-grid{ grid-template-columns: 1fr }
    .meta-bar.meta-grid .meta-actions{ justify-self:start }
}

/* Giữ kích thước control gọn gàng */
.meta-bar.meta-grid .rate-slider{ width:140px; min-width:120px }
.meta-bar.meta-grid .btn{ border-radius:999px; font-weight:800; padding:.45rem .9rem }
/* ===== ICON SYSTEM – make all icons look the same size ===== */

/* ==== Listing refresh (retro lists → kid-style cards) ==== */

/* Lưới thoáng hơn, căn đều */
.row.g-3{ --bs-gutter-x: 1rem; --bs-gutter-y: 1.1rem }

/* Thẻ bao từng game (anchor .game-tile) */
.game-tile{
    position: relative;
    display: block;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(49,72,87,.10);
    transition: transform .18s ease, box-shadow .18s ease;
    overflow: hidden;
}
.game-tile:hover{
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(49,72,87,.18);
    text-decoration: none;
}

/* Ảnh 4:3, bo mềm */
.thumb-43{
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: linear-gradient(135deg,#f7fbff,#fff);
}

/* Vùng nội dung (tiêu đề + meta) */
.game-tile .tile-overlay{
    position: static;           /* bỏ overlay cũ dạng absolute */
    background: transparent;
    color: inherit;
}
.game-tile .overlay-body{
    padding: .55rem .65rem .7rem;
}

/* Tiêu đề: 2 dòng, đậm, ellipsis */
.game-tile .overlay-title,
.game-tile + .title,
.game-tile ~ .title{
    font-weight: 800;
    color: #143a52;
    margin: .25rem 0 .15rem;
    line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta (mắt + lượt) thành chip nhỏ */
.game-tile .overlay-meta,
.game-tile + .meta,
.game-tile ~ .meta{
    font-size: .85rem;
    opacity: .9;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .22rem .55rem;
    border-radius: 999px;
    background: linear-gradient(180deg,#ffffff,#f6fbff);
    border: 1px solid rgba(8,59,85,.08);
    box-shadow: 0 2px 6px rgba(30,50,60,.10);
    color: #0b5a82;
}

/* Khoảng cách giữa thumb và text khi DOM cũ có tiêu đề là thẻ <a> riêng bên dưới */
.game-tile + a,
.game-tile + div > a{
    display:block;
    margin-top:.45rem;
    font-weight:800;
    color:#143a52;
    line-height:1.25;
}
.game-tile + a:hover{ color:#0b2f47; text-decoration:none }

/* Nếu có icon mắt riêng (<i> hoặc <span class="fa-eye">) */
.fa-eye, .icon-eye{
    color:#6aa5d8;
    margin-right:.15rem;
}

/* Hover nhấn mạnh ảnh nhẹ */
.game-tile:hover .thumb-43{ filter: saturate(1.03) brightness(1.02) }

/* Card focus (a11y) */
.game-tile:focus-visible{
    outline: 3px solid #a0e9ff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(160,233,255,.35), 0 16px 34px rgba(49,72,87,.18);
    transform: translateY(-2px);
}

/* Responsive: tăng click area ở mobile */
@media (max-width:575.98px){
    .game-tile .overlay-body{ padding:.5rem .55rem .6rem }
    .game-tile .overlay-title{ -webkit-line-clamp: 2 }
}


:root{
    --icon-sm: 16px;
    --icon-md: 18px;
    --icon-lg: 20px;
}

/* 1) Chips (👁 views, ⭐ rating, votes…) */
.badge-chip{
    /* chiều cao & canh giữa đồng nhất */
    height: 32px;
    padding: 0 .6rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    line-height: 1;              /* “fix” emoji/FA cùng baseline */
    font-size: 13.5px;           /* đồng bộ cỡ text+emoji */
    white-space: nowrap;
}

/* Icon (FA/ <i> bên trong chip) đồng cỡ */
.badge-chip i,
.badge-chip .fa,
.badge-chip [class^="fa-"],
.badge-chip [class*=" fa-"]{
    width: var(--icon-md);
    height: var(--icon-md);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Nếu chip dùng emoji (👁, ⭐) trực tiếp – ép size đều */
.badge-chip{
    --emoji-size: 16px;
}
.badge-chip{ /* emoji là text, scale theo font-size */
    font-variation-settings: normal;
}

/* 2) Buttons with icons (Bookmark/Report/Fullscreen/Search…) */
.btn i,
.btn .fa,
.btn [class^="fa-"],
.btn [class*=" fa-"]{
    width: var(--icon-lg);
    height: var(--icon-lg);
    font-size: 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    margin-right:.35rem;        /* khoảng cách icon–text đều */
}

/* 3) Thẻ nav/ breadcrumb/ pagination có icon */
.nav-link i,
.pagination .page-link i{
    width: var(--icon-md);
    height: var(--icon-md);
    font-size: 13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    margin-right:.25rem;
}

/* 4) Icon trong tile meta (nếu có <i>) */
.game-tile .overlay-meta i,
.game-tile .overlay-meta .fa{
    width: var(--icon-sm);
    height: var(--icon-sm);
    font-size: 12px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    margin-right:.25rem;
}

/* 5) Fullscreen image button – khớp kích thước icon chung */
.fullscreen-btn{
    width: var(--icon-lg);
    height: var(--icon-lg);
    display:inline-block;
    object-fit: contain;
}

/* ==== TAG CHIPS (áp dụng chắc chắn) ==== */

/* Container: hiện theo hàng, có khoảng cách */
.keys-for-game.centered-list{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem .6rem;
}

/* Thẻ <a> có class chip */
.keys-for-game.centered-list > a.chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.35rem .75rem !important;
    border-radius:999px !important;
    font-weight:700;
    font-size:.9rem;
    line-height:1.2;
    text-decoration:none;
    white-space:nowrap;
    border:1px solid rgba(8,59,85,.10) !important;
    background:linear-gradient(180deg,#ffffff,#f6f9ff) !important;
    box-shadow:0 2px 6px rgba(30,50,60,.08) !important;
    color:#0b5a82 !important;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.keys-for-game.centered-list > a.chip:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 14px rgba(49,72,87,.15) !important;
    background:linear-gradient(180deg,#a0e9ff,#ffd166) !important;
    color:#0b2f47 !important;
}

/* Màu theme 1-5 (ghi đè nhẹ nếu bạn muốn chip có màu) */
.keys-for-game.centered-list > a.chip-theme-1{ background:linear-gradient(135deg,#e6f4ff,#d0ebff) !important; color:#083b55 !important; }
.keys-for-game.centered-list > a.chip-theme-2{ background:linear-gradient(135deg,#e8fff1,#d4f9e4) !important; color:#07522d !important; }
.keys-for-game.centered-list > a.chip-theme-3{ background:linear-gradient(135deg,#fff0f6,#ffe1ec) !important; color:#8b2e4e !important; }
.keys-for-game.centered-list > a.chip-theme-4{ background:linear-gradient(135deg,#fff6e0,#ffedbe) !important; color:#7a4d00 !important; }
.keys-for-game.centered-list > a.chip-theme-5{ background:linear-gradient(135deg,#f3efff,#e6ddff) !important; color:#4b1a73 !important; }

@media (max-width:575.98px){
    .keys-for-game.centered-list > a.chip{
        padding:.3rem .6rem !important;
        font-size:.85rem;
    }
}