/* ===== MOBILE PRO SYSTEM ===== */
:root{
  --pro-mobile-columns:2;
  --mobile-grid-gap:10px;
}

/* Cho JS đánh dấu số cột mobile để CSS tối ưu từng chế độ */
@media(max-width:650px){
  html,body{overflow-x:hidden}
  body{-webkit-text-size-adjust:100%}

  .shell{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  /* HEADER */
  header{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
  .nav{
    height:58px!important;
    gap:8px!important;
  }
  .brand{
    gap:8px!important;
    font-size:16px!important;
  }
  .brand-icon{
    width:34px!important;
    height:32px!important;
    border-radius:10px!important;
    font-size:15px!important;
  }
  .search-wrap{gap:7px!important}
  .icon-btn{
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
  }

  /* HERO gọn, sang hơn trên điện thoại */
  .hero{
    min-height:auto!important;
    padding:0!important;
  }
  .hero-content{
    padding:45px 0 38px!important;
    max-width:100%!important;
  }
  .kicker{
    font-size:9px!important;
    letter-spacing:2px!important;
  }
  .hero h1{
    font-size:clamp(34px,10.5vw,47px)!important;
    line-height:.96!important;
    margin:13px 0 12px!important;
    letter-spacing:-1.8px!important;
  }
  .lead{
    max-width:100%!important;
    font-size:13px!important;
    line-height:1.55!important;
  }
  .primary{
    min-height:43px!important;
    margin-top:17px!important;
    padding:0 16px!important;
    border-radius:12px!important;
    font-size:11px!important;
  }
  .feature-row{
    margin-top:25px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .feature{
    grid-template-columns:28px minmax(0,1fr)!important;
    gap:7px!important;
    font-size:10px!important;
  }
  .feature .ico{
    width:27px!important;
    height:27px!important;
    border-radius:8px!important;
  }
  .feature small{font-size:8px!important}

  /* SECTION */
  #games{padding-top:4px}
  .section-head{
    gap:8px!important;
    margin:0 0 13px!important;
  }
  .section-title{
    gap:9px!important;
    font-size:14px!important;
    letter-spacing:.2px!important;
    white-space:nowrap;
  }
  .section-title:before{
    width:3px!important;
    height:19px!important;
  }
  .link-btn{
    font-size:9px!important;
    white-space:nowrap;
    padding:5px 0!important;
  }

  /* GRID: lấy đúng số cột trong Admin */
  .game-grid{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(var(--pro-mobile-columns,2),minmax(0,1fr))!important;
    gap:var(--mobile-grid-gap)!important;
    align-items:stretch!important;
  }
  .game-card[data-pro-span]{
    grid-column:span 1!important;
  }
  .game-card{
    min-width:0!important;
    width:100%!important;
    border-radius:13px!important;
    box-shadow:0 8px 24px rgba(0,0,0,.20)!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .game-card:hover{transform:none!important}

  /* Ảnh luôn cân đối trên mobile, bỏ chiều cao inline quá lớn */
  .game-card .cover{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1.13/1!important;
    min-height:0!important;
    flex:0 0 auto!important;
  }
  .game-card .tao-cover-img{
    object-fit:cover!important;
  }
  .game-card .tao-cover-placeholder{
    font-size:9px!important;
    letter-spacing:.02em!important;
    padding:6px!important;
    text-align:center!important;
  }
  .game-card .version{
    right:7px!important;
    bottom:7px!important;
    padding:4px 7px!important;
    border-radius:999px!important;
    font-size:8px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .game-card .card-body{
    flex:1!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    padding:10px!important;
  }
  .game-card .card-body h3{
    min-width:0!important;
    margin:0 0 5px!important;
    font-size:12px!important;
    line-height:1.18!important;
    min-height:2.36em!important;
    max-height:2.36em!important;
    overflow:hidden!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    word-break:break-word!important;
  }
  .game-card .card-body p{
    margin:0 0 9px!important;
    font-size:9px!important;
    line-height:1.35!important;
    min-height:1.35em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .game-card .view-btn{
    margin-top:auto!important;
    width:100%!important;
    height:33px!important;
    min-height:33px!important;
    padding:0 7px!important;
    border-radius:9px!important;
    font-size:9px!important;
    white-space:nowrap!important;
  }

  /* CTA + FOOTER */
  .cta{
    margin:18px 0 20px!important;
    padding:18px!important;
    border-radius:15px!important;
    min-height:0!important;
  }
  .cta-left{gap:13px!important}
  .bigpad{font-size:34px!important}
  .cta strong{font-size:16px!important}
  .cta small{font-size:10px!important;line-height:1.5!important}
  .outline-btn{
    width:100%!important;
    height:41px!important;
    font-size:10px!important;
  }
  footer{padding:25px 0 18px!important}
  .footer-grid{
    grid-template-columns:1fr 1fr!important;
    gap:22px 14px!important;
  }
  .footer-grid h4{font-size:12px!important;margin-bottom:8px!important}
  .footer-grid p,.footer-grid a{font-size:10px!important;line-height:1.7!important}
  .copyright{
    margin-top:20px!important;
    padding-top:14px!important;
    font-size:9px!important;
  }

  /* TRANG PHIÊN BẢN */
  .neo-page,.neo-detail-page{min-height:calc(100vh - 58px)!important}
  .neo-shell{
    padding-top:12px!important;
    padding-bottom:34px!important;
  }
  .neo-topline{
    margin-bottom:11px!important;
    gap:8px!important;
  }
  .neo-back{
    height:36px!important;
    padding:0 11px!important;
    border-radius:10px!important;
    font-size:10px!important;
  }
  .neo-crumb{font-size:9px!important}

  .neo-game-hero{
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:12px!important;
    padding:13px!important;
    border-radius:18px!important;
  }
  .neo-game-cover{
    width:72px!important;
    height:72px!important;
    border-radius:14px!important;
  }
  .neo-game-copy h1{
    font-size:21px!important;
    letter-spacing:-.7px!important;
    margin:7px 0 5px!important;
  }
  .neo-game-copy p{
    font-size:9.5px!important;
    line-height:1.5!important;
  }
  .neo-badge{
    padding:5px 7px!important;
    font-size:7px!important;
  }
  .neo-kpi-wrap{
    grid-column:1/-1!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:7px!important;
  }
  .neo-kpi{
    padding:9px 5px!important;
    border-radius:11px!important;
  }
  .neo-kpi b{font-size:13px!important}
  .neo-kpi span{font-size:7px!important}
  .neo-version-section{margin-top:18px!important}
  .neo-section-head h2{font-size:17px!important}
  .neo-version-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .neo-version-card{
    min-height:190px!important;
    padding:14px!important;
    border-radius:16px!important;
  }
  .neo-version-card .version-open-btn{
    left:14px!important;right:14px!important;bottom:14px!important;
    width:calc(100% - 28px)!important;
    height:38px!important;
  }

  /* TRANG CHI TIẾT */
  .neo-detail-shell{padding-top:12px!important}
  .neo-detail-grid{gap:10px!important}
  .neo-detail-identity{
    grid-template-columns:76px minmax(0,1fr)!important;
    gap:12px!important;
    padding:13px!important;
    border-radius:17px!important;
  }
  .neo-detail-cover{
    width:76px!important;
    height:76px!important;
    border-radius:14px!important;
  }
  .neo-detail-title h1{
    font-size:20px!important;
    letter-spacing:-.6px!important;
  }
  .neo-detail-title p{font-size:9.5px!important}
  .neo-spec-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding:8px!important;
  }
  .neo-spec-grid>div{
    padding:10px!important;
  }
  .neo-feature-layout{padding:13px!important}
  .neo-notice-card{padding:13px!important}
  .neo-download-panel{
    padding:13px!important;
    border-radius:17px!important;
  }
  .neo-download-head h3{font-size:18px!important}
  .neo-action-grid{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .neo-action-btn{
    min-height:60px!important;
    grid-template-columns:38px minmax(0,1fr) 16px!important;
    padding:9px 10px!important;
    border-radius:12px!important;
  }
  .neo-action-icon{
    width:36px!important;
    height:36px!important;
    border-radius:10px!important;
    font-size:17px!important;
  }
  .neo-action-copy b{font-size:10px!important}
  .neo-action-copy small{font-size:8px!important}

  /* ADMIN cũng dễ dùng trên điện thoại */
  .tao-admin-layer{padding:7px!important}
  .tao-admin-box{
    width:100%!important;
    margin:5px auto!important;
    border-radius:16px!important;
  }
  .tao-pro-toolbar{padding:14px!important}
  .tao-pro-toolbar h3{font-size:18px!important}
  .tao-pro-tabs{
    top:48px!important;
    padding:7px!important;
    scrollbar-width:none;
  }
  .tao-pro-tabs::-webkit-scrollbar{display:none}
  .tao-pro-tab{
    padding:9px 10px!important;
    font-size:9px!important;
  }
  .tao-pro-pane{padding:12px!important}
  .tao-pro-control-grid,.tao-pro-control-grid.two{grid-template-columns:1fr!important}
  .tao-pro-footerbar{padding:12px!important}
}

/* ===== 2 Ô / HÀNG: cân bằng đẹp nhất cho đa số điện thoại ===== */
@media(max-width:650px){
  html[data-mobile-columns="2"]{
    --mobile-grid-gap:10px;
  }
  html[data-mobile-columns="2"] .game-card .cover{
    aspect-ratio:1.05/1!important;
  }
  html[data-mobile-columns="2"] .game-card .card-body{
    padding:10px!important;
  }
  html[data-mobile-columns="2"] .game-card .card-body h3{
    font-size:12px!important;
  }
  html[data-mobile-columns="2"] .game-card .card-body p{
    font-size:9px!important;
  }
  html[data-mobile-columns="2"] .game-card .view-btn{
    height:34px!important;
    font-size:9px!important;
  }
}

/* ===== 3 Ô / HÀNG: ultra compact nhưng vẫn đọc được ===== */
@media(max-width:650px){
  html[data-mobile-columns="3"]{
    --mobile-grid-gap:7px;
  }
  html[data-mobile-columns="3"] .shell{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  html[data-mobile-columns="3"] .section-title{
    font-size:12px!important;
  }
  html[data-mobile-columns="3"] .link-btn{
    font-size:8px!important;
  }
  html[data-mobile-columns="3"] .game-card{
    border-radius:10px!important;
  }
  html[data-mobile-columns="3"] .game-card .cover{
    aspect-ratio:1/1!important;
  }
  html[data-mobile-columns="3"] .game-card .version{
    right:4px!important;
    bottom:4px!important;
    padding:3px 5px!important;
    font-size:6.5px!important;
  }
  html[data-mobile-columns="3"] .game-card .card-body{
    padding:7px!important;
  }
  html[data-mobile-columns="3"] .game-card .card-body h3{
    margin-bottom:4px!important;
    font-size:9.5px!important;
    line-height:1.14!important;
    min-height:2.28em!important;
    max-height:2.28em!important;
  }
  html[data-mobile-columns="3"] .game-card .card-body p{
    display:none!important;
  }
  html[data-mobile-columns="3"] .game-card .view-btn{
    height:28px!important;
    min-height:28px!important;
    border-radius:7px!important;
    font-size:7px!important;
    padding:0 4px!important;
  }
  html[data-mobile-columns="3"] .game-card .view-btn span{
    display:none!important;
  }
  html[data-mobile-columns="3"] .game-card .tao-cover-placeholder{
    font-size:7px!important;
  }
}

/* 4 ô: vẫn hỗ trợ nhưng cực gọn */
@media(max-width:650px){
  html[data-mobile-columns="4"]{
    --mobile-grid-gap:5px;
  }
  html[data-mobile-columns="4"] .shell{
    padding-left:6px!important;
    padding-right:6px!important;
  }
  html[data-mobile-columns="4"] .game-card{border-radius:8px!important}
  html[data-mobile-columns="4"] .game-card .cover{aspect-ratio:1/1!important}
  html[data-mobile-columns="4"] .game-card .version{font-size:5.5px!important;padding:2px 4px!important;right:3px!important;bottom:3px!important}
  html[data-mobile-columns="4"] .game-card .card-body{padding:5px!important}
  html[data-mobile-columns="4"] .game-card .card-body h3{font-size:7.5px!important;min-height:2.2em!important;max-height:2.2em!important}
  html[data-mobile-columns="4"] .game-card .card-body p{display:none!important}
  html[data-mobile-columns="4"] .game-card .view-btn{height:24px!important;min-height:24px!important;font-size:6px!important;border-radius:6px!important;padding:0 2px!important}
  html[data-mobile-columns="4"] .game-card .view-btn span{display:none!important}
}

/* Màn hình rất hẹp: 3 cột vẫn giữ được nhưng tối ưu thêm */
@media(max-width:360px){
  html[data-mobile-columns="3"] .game-grid{gap:5px!important}
  html[data-mobile-columns="3"] .shell{padding-left:6px!important;padding-right:6px!important}
  html[data-mobile-columns="3"] .game-card .card-body{padding:6px!important}
  html[data-mobile-columns="3"] .game-card .card-body h3{font-size:8.7px!important}
  html[data-mobile-columns="3"] .game-card .view-btn{font-size:6.5px!important}
}