/* V7.3.42 — restrained Vui Học navigation */
.home-header-nav .home-nav-vui-hoc{direction:ltr;unicode-bidi:isolate;display:inline-flex;align-items:center;color:#10244a;font:800 15px/1 inherit;text-decoration:none;white-space:nowrap}
.home-header-nav .home-nav-vui-hoc:hover{color:#1769d6}
.nav-list .nav-game{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 16px;gap:10px;align-items:center;margin-top:7px;padding:10px 12px;border:1px solid transparent;border-radius:14px;color:inherit;background:transparent;box-shadow:none;overflow:hidden}
.nav-list .nav-game:hover,.nav-list .nav-game.active{background:rgba(88,144,219,.10);border-color:rgba(92,149,224,.20)}
.nav-game-glyph{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(91,145,218,.11)!important;color:#5e87bf!important}
.nav-game-glyph svg{width:18px;height:18px}.nav-game-glyph i,.nav-game-glyph b,.nav-game>em,.nav-game-glow{display:none!important}
.nav-game-copy{display:block;min-width:0}.nav-game-copy>b{display:block;font-style:normal;font-size:14px}.nav-game-copy>small{display:block;margin-top:2px;color:#8290a4;font-size:10px;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav-game-copy>small i{display:none}
.nav-game:after{content:'›';font-size:20px;color:#7790b0}
body[data-initial-view="game"] .nav-list .nav-game{background:rgba(87,145,220,.14);border-color:rgba(108,163,233,.25);color:#fff}
body[data-initial-view="game"] .nav-game-glyph{background:#112e51!important;color:#86b7f0!important}
body[data-initial-view="game"] .nav-game-copy>small{color:#91a8c4}
@media(max-width:900px){.home-header-nav .home-nav-vui-hoc{display:none}.nav-list .nav-game{grid-template-columns:36px minmax(0,1fr) 16px}}


/* V7.3.44 — mobile sidebar overflow guard */
.nav-list,.nav-list .nav-item,.nav-list .nav-game{width:100%;max-width:100%;min-width:0}
.nav-list .nav-game{box-sizing:border-box;overflow:hidden}
.nav-game-copy,.nav-game-copy>b,.nav-game-copy>small{min-width:0;max-width:100%}
.nav-game-copy>b,.nav-game-copy>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){
  .sidebar{width:min(286px,86vw);max-width:86vw;padding:12px 10px;overflow-x:hidden}
  .nav-list{gap:3px;overflow:hidden}
  .nav-list .nav-item{padding:10px 9px;gap:9px}
  .nav-list .nav-game{grid-template-columns:34px minmax(0,1fr) 12px;gap:8px;margin-top:5px;padding:9px 8px}
  .nav-game-glyph{width:32px;height:32px}
  .nav-game-copy>b{font-size:13px}
  .nav-game-copy>small{font-size:9px}
  .nav-game:after{font-size:17px}
}
@media(max-width:360px){
  .sidebar{width:88vw;max-width:88vw}
  .nav-game-copy>small{display:none}
}

/* V7.3.45 — fix sidebar Vui Học copy width conflict.
   The global .nav-item span rule assigns every span a 30px box; nav-game-copy
   is also a span, so its text was clipped to “V...” / “6 ch...”. */
.nav-list .nav-game > .nav-game-glyph{
  flex:none!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  max-width:34px!important;
}
.nav-list .nav-game > .nav-game-copy{
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  place-items:initial!important;
  text-align:left!important;
  overflow:hidden!important;
}
.nav-list .nav-game > .nav-game-copy > b,
.nav-list .nav-game > .nav-game-copy > small{
  display:block!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  max-width:100%!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  text-align:left!important;
}
.nav-list .nav-game > .nav-game-copy > b{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.nav-list .nav-game > .nav-game-copy > small{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
@media(max-width:900px){
  .nav-list .nav-game > .nav-game-glyph{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    max-width:32px!important;
  }
  .nav-list .nav-game > .nav-game-copy > b{font-size:13px!important}
  .nav-list .nav-game > .nav-game-copy > small{font-size:9px!important}
}
@media(max-width:390px){
  .nav-list .nav-game{grid-template-columns:32px minmax(0,1fr) 12px!important}
  .nav-list .nav-game > .nav-game-copy > small{display:none!important}
}