/* Mobile-only layout for Đấu trường rèn luyện catalog.
   Practice modal styles remain in practice-mobile.css. */
@media (max-width:767px){
  :root{
    --arena-bg:#fbf9f5;
    --arena-surface:#fff;
    --arena-low:#f5f3ef;
    --arena-container:#efeeea;
    --arena-primary:#006c49;
    --arena-primary-container:#10b981;
    --arena-secondary:#855300;
    --arena-secondary-fixed:#ffddb8;
  }

  html,body{width:100%;max-width:100%;overflow-x:hidden;background:var(--arena-bg)}
  body:not(.mobile-workout-open){padding-bottom:72px}
  .learning-sidebar{display:none!important}

  .learning-page-content{padding-left:0!important;padding-bottom:72px!important}
  .learning-page-header.page-auth-header{
    position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:40!important;
    height:64px!important;min-height:64px!important;padding:8px 12px!important;
    display:flex!important;align-items:center!important;justify-content:space-between!important;
    background:rgba(251,249,245,.96)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 1px 8px rgba(0,0,0,.045)!important
  }
  .header-learning-summary{display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important;flex:1}
  .page-auth-header #header-profile-badge{min-width:0!important;max-width:58vw!important;flex:1!important;overflow:hidden}
  .page-auth-header #header-profile-badge>*{max-width:100%!important}
  .header-learning-stats{position:static!important;display:flex!important;gap:5px!important;flex-shrink:0}
  .header-learning-stats>div{padding:5px 7px!important;border-radius:10px!important;font-size:10px!important;box-shadow:none!important}
  .page-auth-header .page-login{display:flex!important;height:34px!important;padding:0 10px!important;border-radius:10px!important;font-size:10px!important;flex-shrink:0!important}
  .page-auth-header~main{padding:76px 12px 18px!important}
  .learning-page-content main>div{gap:12px!important}

  #section-catalog{gap:12px!important}
  .arena-mobile-hero{
    padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important;
    display:flex!important;flex-direction:column!important;gap:10px!important
  }
  .arena-mobile-hero-main{align-items:flex-start!important;gap:10px!important;width:100%!important}
  .arena-mobile-hero-icon{width:42px!important;height:42px!important;border-radius:10px!important;font-size:22px!important;box-shadow:none!important}
  .arena-mobile-hero-copy{min-width:0!important}
  .arena-mobile-hero-copy>div:first-child{gap:5px!important}
  .arena-mobile-hero-copy>div:first-child span{font-size:9px!important;padding:3px 6px!important;border-radius:10px!important}
  .arena-mobile-hero-title{font-size:22px!important;line-height:28px!important;margin-top:3px!important}
  .arena-mobile-hero-desc{font-size:11px!important;line-height:16px!important;margin-top:1px!important}

  .arena-progress-card{
    width:100%!important;padding:12px!important;border-radius:12px!important;border:1px solid #eceae6!important;
    box-shadow:0 4px 16px rgba(0,0,0,.035)!important;display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important
  }
  .arena-progress-card>div:first-child{min-width:0}
  .arena-progress-card>div:nth-child(2){display:none!important}
  .arena-progress-card #catalog-stat-book-label{font-size:10px!important}
  .arena-progress-card #catalog-stat-completed{font-size:22px!important}
  .arena-progress-card #catalog-stat-total{font-size:10px!important}
  .arena-progress-card #catalog-stat-stars{font-size:17px!important}
  .arena-progress-card #catalog-stat-percent{font-size:9px!important}
  .arena-progress-card .w-32,.arena-progress-card .sm\:w-36{width:100%!important;max-width:210px!important}

  #paused-session-banner:not(.hidden){
    display:flex!important;align-items:stretch!important;flex-direction:column!important;
    padding:11px!important;border-radius:12px!important;border-width:1px!important;gap:8px!important;box-shadow:none!important
  }
  #paused-session-banner>div:first-child{align-items:flex-start!important;gap:8px!important}
  #paused-session-banner>div:first-child>div:first-child{width:36px!important;height:36px!important;border-radius:10px!important;font-size:17px!important;box-shadow:none!important}
  #paused-session-banner #paused-session-info{font-size:11px!important;line-height:15px!important}
  #paused-session-banner button{width:100%!important;justify-content:center!important;height:38px!important;padding:0 10px!important;border-radius:10px!important;font-size:10px!important}

  .arena-filter-panel{
    padding:11px!important;border-radius:12px!important;gap:9px!important;border:1px solid #eceae6!important;box-shadow:0 4px 16px rgba(0,0,0,.03)!important
  }
  .arena-grade-row{padding-bottom:8px!important;gap:6px!important}
  .arena-grade-row>div:first-child span:last-child{font-size:9px!important}
  #catalog-active-grade-badge{padding:5px 8px!important;border-radius:10px!important;font-size:9px!important}
  .arena-filter-main{display:flex!important;flex-direction:column!important;gap:8px!important}
  .arena-book-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:5px!important;width:100%}
  .arena-book-tabs button{width:100%!important;min-width:0!important;height:36px!important;padding:0 7px!important;border-radius:10px!important;justify-content:center!important;font-size:9px!important}
  .arena-book-tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .arena-search-wrap{max-width:none!important;width:100%!important}
  #catalog-search{height:40px!important;padding-top:0!important;padding-bottom:0!important;border-radius:10px!important;font-size:11px!important}
  .arena-status-filters{display:flex!important;flex-wrap:nowrap!important;gap:5px!important;overflow-x:auto!important;padding-bottom:1px!important}
  .arena-status-filters button{flex:0 0 auto!important;border-radius:10px!important;font-size:9px!important;padding:6px 9px!important}

  #catalog-topics-container{gap:12px!important}
  .catalog-topic-group{gap:8px!important}
  .arena-topic-header{
    padding:10px!important;border-radius:12px!important;gap:8px!important;box-shadow:none!important;
    flex-direction:row!important;align-items:center!important
  }
  .arena-topic-header>div:first-child{gap:8px!important;min-width:0!important;flex:1!important}
  .arena-topic-icon{font-size:22px!important}
  .arena-topic-label{font-size:9px!important}
  .arena-topic-title{font-size:15px!important;line-height:20px!important}
  .arena-topic-sub{font-size:9px!important;line-height:13px!important}
  .arena-topic-stat{font-size:9px!important;padding:4px 7px!important;border-radius:10px!important;white-space:nowrap!important}

  .arena-lessons-grid{display:flex!important;flex-direction:column!important;gap:7px!important}
  .catalog-card{
    padding:10px!important;border-radius:12px!important;border-width:1px!important;box-shadow:0 2px 8px rgba(0,0,0,.025)!important;
    display:flex!important;flex-direction:column!important;gap:7px!important
  }
  .catalog-card .arena-card-top{gap:7px!important}
  .catalog-card .arena-lesson-number{width:30px!important;height:30px!important;border-radius:10px!important;font-size:11px!important}
  .catalog-card .arena-card-meta{gap:4px!important;margin-bottom:2px!important}
  .catalog-card .arena-card-meta span{font-size:9px!important}
  .catalog-card .arena-card-title{font-size:13px!important;line-height:17px!important}
  .catalog-card .arena-card-stars{font-size:12px!important}
  .catalog-card .arena-card-footer{padding-top:2px!important;gap:6px!important;flex-wrap:nowrap!important}
  .catalog-card .arena-card-tags{gap:4px!important;min-width:0!important;flex:1!important}
  .catalog-card .arena-card-tags span{font-size:9px!important;padding:3px 6px!important;border-radius:10px!important;white-space:nowrap!important}
  .catalog-card .arena-card-action{
    flex:0 0 auto!important;height:34px!important;padding:0 10px!important;border-radius:10px!important;
    font-size:10px!important;white-space:nowrap!important
  }

  .arena-catalog-tip{padding:11px!important;border-radius:12px!important}
  .arena-catalog-tip>div{gap:8px!important}
  .arena-catalog-tip>div>div:first-child{width:34px!important;height:34px!important;border-radius:10px!important;font-size:17px!important}
  .arena-catalog-tip span,.arena-catalog-tip p{font-size:10px!important;line-height:15px!important}

  .learning-mobile-nav{
    z-index:70!important;background:rgba(255,255,255,.96)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 -4px 16px rgba(0,0,0,.045)!important
  }
  .learning-mobile-nav .learning-nav-link{min-width:0!important;padding:7px 3px!important}
  .learning-mobile-nav .learning-nav-link span:last-child{font-size:9px!important}

  /* Config modal remains centered and compact on mobile */
  #modal-session-config{padding:8px!important}
  #modal-session-config>div{max-height:calc(100dvh - 16px)!important;padding:14px!important;border-radius:18px!important}
}

@media(max-width:360px){
  .arena-mobile-hero-title{font-size:20px!important;line-height:26px!important}
  .arena-book-tabs button{font-size:8px!important}
  .catalog-card .arena-card-tags span{font-size:8px!important}
}



/* Mobile typography standard v2 */
@media (max-width:767px){
  .arena-mobile-hero-desc{font-size:12px!important;line-height:17px!important}
  .arena-mobile-hero-copy>div:first-child span{font-size:11px!important;line-height:14px!important}
  .arena-progress-card #catalog-stat-book-label,
  .arena-progress-card #catalog-stat-total,
  .arena-progress-card #catalog-stat-percent{font-size:11px!important;line-height:15px!important}
  .arena-grade-row>div:first-child span:last-child,#catalog-active-grade-badge{font-size:11px!important;line-height:15px!important}
  .arena-book-tabs button,.arena-status-filters button{font-size:11px!important;line-height:14px!important}
  #catalog-search{font-size:12px!important}
  .arena-topic-label,.arena-topic-stat{font-size:11px!important;line-height:15px!important}
  .arena-topic-sub{font-size:12px!important;line-height:17px!important}
  .catalog-card .arena-card-title{font-size:14px!important;line-height:19px!important}
  .catalog-card .arena-card-meta span,.catalog-card .arena-card-tags span{font-size:11px!important;line-height:14px!important}
  .catalog-card .arena-card-action{font-size:11px!important}
  .arena-catalog-tip span,.arena-catalog-tip p{font-size:12px!important;line-height:17px!important}
  .learning-mobile-nav .learning-nav-link span:last-child{font-size:11px!important;line-height:14px!important}
}


/* Shared mobile top header — synchronized with Bản đồ */
.mobile-shared-brand{display:none}
@media (max-width:767px){
  .learning-page-header.page-auth-header{
    height:auto!important;min-height:108px!important;
    padding:10px 14px 9px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand auth" "summary summary"!important;
    align-items:center!important;gap:8px!important;
  }
  .mobile-shared-brand{
    display:flex!important;grid-area:brand;align-items:center;gap:7px;min-width:0
  }
  .mobile-shared-brand-icon{
    width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;
    font-size:20px;line-height:1
  }
  .mobile-shared-brand-icon img{width:34px!important;height:34px!important;object-fit:contain!important;display:block}
  .mobile-shared-brand-title{
    font-family:Quicksand,system-ui,sans-serif;font-size:15px;line-height:20px;
    font-weight:800;color:#047857;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .page-auth-header>.header-learning-summary{
    grid-area:summary;display:flex!important;width:100%!important;
    align-items:center!important;justify-content:space-between!important;
    gap:8px!important;min-width:0!important
  }
  .page-auth-header>.header-learning-summary #header-profile-badge{
    min-width:0!important;max-width:68vw!important;flex:1!important;overflow:visible!important
  }
  .page-auth-header>.header-learning-summary .header-learning-stats{
    position:static!important;display:flex!important;gap:8px!important;flex-shrink:0!important
  }
  .page-auth-header>.header-learning-summary .header-learning-stats>div{
    padding:5px 8px!important;border-radius:10px!important;font-size:11px!important;box-shadow:none!important
  }
  .page-auth-header>.page-login{
    grid-area:auth!important;position:static!important;display:flex!important;
    height:34px!important;padding:0 10px!important;margin:0!important;
    border-radius:10px!important;font-size:10px!important;align-self:center!important
  }
  .page-auth-header~main{padding-top:122px!important}
}
@media (max-width:360px){
  .learning-page-header.page-auth-header{padding-left:10px!important;padding-right:10px!important}
  .mobile-shared-brand-title{font-size:14px}
  .page-auth-header>.header-learning-summary #header-profile-badge{max-width:64vw!important}
}