:root{ --bg:#f7fbff; --ink:#1f2a44; --brand:#ff5a8b; --brand-2:#4cc3ff; --brand-3:#ffd166; --brand-4:#7bd389; --tile-r:1rem; }
body{font-family:'Nunito',system-ui,-apple-system, Segoe UI, Roboto, sans-serif; background:var(--bg); color:var(--ink);}
.brand-font{font-family:'Baloo 2',cursive}
.kids-head{background:linear-gradient(135deg,var(--brand) 0%, var(--brand-2) 100%); color:#fff;}
.logo{font-family:'Baloo 2',cursive; font-weight:800; letter-spacing:.5px}
.brand-badge{width:36px;height:36px}

/* Nav fun */
.nav-fun .nav-link{position:relative; padding:.5rem .9rem; font-weight:800}
.nav-fun .nav-link span{position:relative; z-index:2}
.nav-fun .nav-link::after{content:""; position:absolute; left:12px; right:12px; bottom:6px; height:6px; border-radius:6px; opacity:0; transform:scaleX(.4); transition:all .2s ease; background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand-3));}
.nav-fun .nav-link:hover::after, .nav-fun .nav-link.active::after{opacity:.9; transform:scaleX(1)}
.taglet{display:inline-flex; align-items:center; justify-content:center; font-style:normal; font-weight:900; font-size:.65rem; padding:.1rem .4rem; border-radius:999px; margin-left:.4rem; background:rgba(255,255,255,.25)}
.bg-new{background:#fff1c9; color:#7a5300}
.bg-hot{background:#ffb3b3; color:#6b1212}
.bg-pick{background:#d5edff; color:#083e5b}

/* Mega menu */
.mega-menu{width:min(100%, 980px); left:0; right:0; margin:0 auto; border:1px solid rgba(13,38,76,.08); background:linear-gradient(180deg,#ffffff 0%, #f7fbff 100%)}
.mega-menu .row>div{position:relative}
.mega-link{display:flex; flex-direction:column; gap:.2rem; padding:1rem .9rem; border-radius:1.25rem; text-decoration:none; background:#fff; box-shadow:0 8px 22px rgba(13,38,76,.06); border:1px solid rgba(13,38,76,.06)}
.mega-link i{font-size:1.25rem}
.mega-link span{font-weight:900; color:#0b3558}
.mega-link small{color:#6c7a90}
.mega-link:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(13,38,76,.12)}

/* Section head highlight */
.section-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem}
.section-head h2{font-family:'Baloo 2',cursive; font-weight:900; margin:0; font-size:1.5rem; position:relative; padding-left:.55rem}
.section-head h2:before{content:""; position:absolute; left:0; top:.5rem; bottom:.5rem; width:6px; border-radius:6px; background:linear-gradient(180deg,var(--brand),var(--brand-2))}

/* Tile */
.game-tile{position:relative; display:block; background:#fff; border-radius:var(--tile-r); overflow:hidden; box-shadow:0 6px 14px rgba(13,38,76,.08); transition: transform .12s ease, box-shadow .12s ease}
.game-tile::before{content:""; position:absolute; inset:0; background:radial-gradient(120px 60px at -20% -20%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); transform:translateX(-20%); transition:transform .35s ease}
.game-tile:hover{transform: translateY(-2px); box-shadow:0 12px 26px rgba(13,38,76,.16)}
.game-tile:hover::before{transform:translateX(20%)}
.thumb-43{ width:100%; aspect-ratio:4/3; object-fit:cover; background:#e9f4ff; transition:transform .25s ease }
.game-tile:hover .thumb-43{ transform:scale(1.06) }
.thumb-43[src=""], .thumb-43:not([src]){ background:#e9f4ff url('https://cdn2.gamebig.net/cloudimage/12849/file/w180h135_webp-7a0bec622a94f9d26f39afdd9dd2e814.webp') center/cover no-repeat }
.tile-overlay{position:absolute; inset:auto 0 0 0; background:linear-gradient(180deg,rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 80%); color:#fff}
.overlay-body{padding:.5rem .6rem}
.overlay-title{font-weight:800; line-height:1.1; font-size:.95rem; max-height:2.3em; overflow:hidden}
.overlay-meta{display:flex; align-items:center; gap:.35rem}

/* History bar */
.history-bar{position:sticky; bottom:0; z-index:10; background:#fff; border-top:3px solid var(--brand-2); box-shadow: 0 -6px 14px rgba(13,38,76,.08)}
.history-item img{width:60px; height:45px; object-fit:cover; border-radius:.5rem}

/* Stickers */
.sticker{position:absolute; top:.5rem; left:.5rem; z-index:2; font-weight:900; font-size:.72rem; padding:.28rem .55rem; border-radius:.6rem; letter-spacing:.3px; box-shadow:0 2px 6px rgba(0,0,0,.12)}
.st-new{background:#1fd1ff; color:#06364a}
.st-hot{background:#ff6b6b; color:#5b0d0d}
.st-feat{background:#ffd166; color:#5b3e00}
.st-top{background:#7bd389; color:#114a2b}
.st-cute{background:#ffb3d1; color:#5a2440}

/* Accessibility */
.game-tile:focus{outline:4px solid #000; outline-offset:-4px}

/* ===== OwlCarousel: nav 2 đầu & giữa dọc ===== */
.owl-carousel{position:relative}
.owl-carousel .owl-stage-outer{padding-bottom:0}
.owl-carousel .owl-nav{
    position:absolute;
    top:50%;
    left:0; right:0;
    transform:translateY(-50%);
    display:flex; justify-content:space-between; align-items:center;
    pointer-events:none; /* để click xuyên qua vùng nav */
    height:0; /* tránh chiếm layout height */
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next{
    pointer-events:auto;           /* bật click lại trên nút */
    width:40px; height:40px;
    border-radius:999px;
    background:#fff !important;
    border:1px solid rgba(13,38,76,.12) !important;
    box-shadow:0 8px 18px rgba(13,38,76,.12);
    display:flex; align-items:center; justify-content:center;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
    color:#0b3558 !important;
}
.owl-carousel .owl-nav button span{display:none} /* ẩn text nếu có */
.owl-carousel .owl-nav i{font-size:1rem; line-height:1}
.owl-carousel .owl-nav button:hover{
    transform:scale(1.06);
    box-shadow:0 12px 26px rgba(13,38,76,.18);
}
.owl-carousel .owl-nav .disabled{opacity:.35; pointer-events:none}

/* thu nhỏ nút trên mobile */
@media (max-width:576px){
    .owl-carousel .owl-nav button.owl-prev,
    .owl-carousel .owl-nav button.owl-next{ width:34px; height:34px; }
}

/* Ẩn dots nếu theme nào đó bật sẵn */
.owl-theme .owl-dots{ display:none !important; }

/* === assets/css/home.css (optional) === */
#spotlight .spot-card{border:3px solid #fff}