/* Mobile-only layout for Bản đồ học tập.
   Desktop layout remains unchanged. */
.mobile-map-brand{display:none}

@media (max-width:767px){
  :root{
    --map-mobile-bg:#fbf9f5;
    --map-mobile-surface:#ffffff;
    --map-mobile-low:#f5f3ef;
    --map-mobile-high:#efeeea;
    --map-mobile-primary:#006c49;
    --map-mobile-primary-container:#10b981;
    --map-mobile-secondary:#855300;
    --map-mobile-secondary-fixed:#ffddb8;
    --map-mobile-outline:#6c7a71;
  }

  html,body{width:100%;max-width:100%;overflow-x:hidden;background:var(--map-mobile-bg)}
  body{padding-bottom:76px}

  .learning-sidebar{display:none!important}

  .map-auth-header{
    position:fixed!important;top:0;left:0;right:0;z-index:50;
    height:auto!important;min-height:94px!important;
    padding:7px 14px 7px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand auth"
      "profile profile";
    align-items:center!important;gap:8px!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,.05)
  }

  .mobile-map-brand{
    display:flex!important;grid-area:brand;align-items:center;gap:7px;min-width:0
  }
  .mobile-map-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-map-brand-icon img{width:34px!important;height:34px!important;object-fit:contain!important;display:block}
  .mobile-map-brand-title{
    font-family:Quicksand,system-ui,sans-serif;font-size:15px;font-weight:800;
    color:var(--map-mobile-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }

  .map-header-profile-row{
    grid-area:profile;width:100%;display:flex!important;align-items:center!important;
    justify-content:space-between!important;gap:8px!important;flex-wrap:nowrap!important;min-width:0
  }
  .map-header-auth-row{
    grid-area:auth;margin:0!important;align-self:center
  }
  .map-auth-header #header-profile-badge{min-width:0!important;max-width:68vw;flex:1}
  .map-auth-header #header-profile-badge>*{max-width:100%}
  .map-auth-header #header-streak-count,
  .map-auth-header #header-star-count{font-size:11px}
  .map-header-profile-row>div:not(#header-profile-badge){
    padding:5px 8px!important;border-radius:10px!important;font-size:11px!important;box-shadow:none!important
  }
  .map-auth-header .page-login{
    height:34px;padding:0 10px!important;border-radius:10px!important;font-size:10px!important
  }

  .home-main{
    padding:106px 14px 18px!important;
    overflow:visible!important;
    background:var(--map-mobile-bg)
  }

  .home-hero{
    background:transparent!important;border:0!important;box-shadow:none!important;
    padding:0!important;margin:0 0 14px!important
  }
  .home-hero-grid{display:flex!important;flex-direction:column!important;gap:12px!important}
  .home-recommendation,.home-quick-wrap{width:100%!important}
  .home-recommendation>div:first-child{gap:6px!important;margin-bottom:5px!important}
  #home-curriculum-summary{font-size:10px!important}
  #hero-welcome-title{
    font-size:23px!important;line-height:30px!important;margin:0 0 8px!important;
    letter-spacing:-.02em
  }
  .home-mobile-subtitle{
    display:block!important;font-size:11px;color:#6b7280;margin:0 0 10px
  }

  .home-ai-card{
    padding:12px!important;border-radius:12px!important;gap:10px!important;
    flex-direction:column!important;background:var(--map-mobile-surface)!important;
    border:1px solid #eceae6!important;box-shadow:0 4px 16px rgba(0,0,0,.035)!important
  }
  .home-ai-card>.relative{
    width:auto!important;display:flex;align-items:center;gap:8px
  }
  .home-ai-card>.relative>div{
    width:42px!important;height:42px!important;border-radius:10px!important;
    padding:0!important;margin:0!important
  }
  .home-ai-card>.relative>div>span{display:none!important}
  .home-ai-card>.relative>div>div{font-size:22px!important;margin:0!important}
  .home-ai-card>.flex-1{width:100%!important}
  .home-ai-card>.flex-1>div:first-child{
    display:flex!important;flex-wrap:nowrap!important;align-items:center!important;
    justify-content:space-between!important;gap:6px!important;margin-bottom:8px!important;
  }
  .home-ai-card>.flex-1>div:first-child>div:first-child{
    min-width:0!important;font-size:13px!important;line-height:18px!important;white-space:nowrap!important;
  }
  #rec-status-badge{
    flex:0 0 auto!important;background:transparent!important;border:0!important;box-shadow:none!important;
    padding:0!important;margin:0!important;border-radius:0!important;
    font-size:10px!important;line-height:16px!important;font-weight:700!important;
    color:#9a5b00!important;white-space:nowrap!important;
  }
  .home-ai-card .grid.grid-cols-1.sm\:grid-cols-3{
    display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px!important
  }
  .home-ai-card .grid.grid-cols-1.sm\:grid-cols-3>div{padding:8px!important;border-radius:10px!important}
  #rec-desc-text{font-size:11px!important;line-height:16px!important}
  #rec-task-name{display:block;max-width:100%;white-space:normal}
  #hero-continue-btn{min-height:40px!important}
  .home-ai-card button{border-radius:10px!important}

  .home-quick-card{
    padding:12px!important;border-radius:12px!important;border:1px solid #eceae6!important;
    box-shadow:0 4px 16px rgba(0,0,0,.035)!important
  }
  .home-quick-card select{min-height:42px;border-radius:10px!important}
  .home-quick-card>div>button{min-height:44px;border-radius:10px!important}
  #home-quick-suggestions{gap:6px!important}
  #home-quick-suggestions button{border-radius:10px!important;font-size:10px!important}

  .home-term-bar{
    display:flex!important;flex-direction:column!important;gap:8px!important;margin:0 0 12px!important
  }
  #term-tabs-container{
    width:100%;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;padding:4px!important;border-radius:12px!important;background:var(--map-mobile-low)!important
  }
  #term-tabs-container button{
    width:100%!important;min-width:0!important;height:42px!important;
    padding:5px 5px!important;border-radius:10px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;
    justify-content:center!important;gap:1px!important;text-align:center
  }
  #term-tabs-container button>span:first-child{display:none!important}
  #term-tabs-container button>span:nth-child(2){
    display:block;max-width:100%;font-size:10px!important;line-height:12px!important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  #term-tabs-container button>span:last-child{font-size:8px!important;line-height:10px!important}
  .home-pdf-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%;gap:7px!important}
  .home-pdf-actions button{width:100%;justify-content:center;border-radius:10px!important;min-height:36px!important;font-size:10px!important}

  .home-modules-grid{display:flex!important;flex-direction:column!important;gap:12px!important}
  .home-roadmap-column{width:100%!important}
  .home-module-header{
    padding:10px 12px!important;border-radius:12px!important;margin-bottom:10px!important;
    background:transparent!important;border:0!important
  }
  .home-module-header h3{font-size:18px!important;line-height:24px!important}
  .home-module-header p{font-size:10px!important}

  #learning-map-container{display:flex!important;flex-direction:column!important;gap:10px!important;padding-bottom:4px!important}
  .map-topic-wrap{width:100%!important;max-width:none!important;margin:0!important}
  .map-current-pin{
    margin:0 0 5px!important;border-radius:10px!important;padding:5px 9px!important;font-size:10px!important
  }
  .map-topic-card{
    padding:12px!important;border-radius:12px!important;border-width:1px!important;
    box-shadow:0 4px 16px rgba(0,0,0,.035)!important
  }
  .map-topic-card.current-topic-card{border-width:2px!important}
  .map-topic-card .map-topic-head{gap:8px!important}
  .map-topic-icon{font-size:22px!important;margin:0!important}
  .map-topic-status{
    font-size:9px!important;line-height:12px!important;padding:4px 7px!important;
    border-radius:10px!important;max-width:44%;white-space:normal;text-align:right
  }
  .map-topic-meta{font-size:9px!important;margin-top:5px!important}
  .map-topic-title{font-size:16px!important;line-height:21px!important;margin:2px 0 4px!important}
  .map-topic-progress-text{font-size:10px!important;margin-bottom:6px!important}
  .map-progress-track{height:7px!important;margin-bottom:8px!important;background:#efeeea!important}
  .map-progress-fill{background:#10b981!important}
  .map-current-lesson{
    padding:9px!important;border-radius:10px!important;margin-bottom:8px!important;gap:8px!important
  }
  .map-current-lesson>div{min-width:0}
  .map-current-lesson .text-xs{font-size:10px!important;line-height:14px!important}
  .map-current-lesson button{height:34px!important;padding:0 10px!important;border-radius:10px!important;font-size:10px!important}
  .map-topic-link{font-size:10px!important}
  .map-topic-footer{padding-top:7px!important}
  .map-topic-footer span{font-size:9px!important}
  .map-topic-footer button{height:32px!important;padding:0 10px!important;border-radius:10px!important;font-size:10px!important}
  .map-stepping-stones{padding:0!important;height:16px!important;gap:6px!important;font-size:10px!important}
  .map-bottom-cta{padding-top:2px!important}
  .map-bottom-cta button{width:100%!important;justify-content:center;border-radius:10px!important;padding:10px 12px!important}

  .home-side-column{width:100%!important}
  .home-chest-card,.home-books-card,.home-rule-card{
    border-radius:12px!important;padding:12px!important;margin-top:0!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03)!important
  }
  .home-side-column{display:flex!important;flex-direction:column!important;gap:10px!important}
  .home-chest-card{order:1}
  .home-books-card{order:2}
  .home-rule-card{order:3}
  .home-chest-card h3{font-size:16px!important}
  #home-books-list>div{border-radius:10px!important}

  #topicLessonsModal>div{
    max-height:calc(100dvh - 24px)!important;margin:12px!important;padding:16px!important;border-radius:18px!important
  }
  #modalTopicTitle{font-size:18px!important}
  #modalLessonList{padding-top:10px!important;padding-bottom:10px!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}
}

@media (max-width:360px){
  #hero-welcome-title{font-size:21px!important;line-height:27px!important}
  .map-auth-header{padding-left:10px!important;padding-right:10px!important}
  .home-main{padding-left:10px!important;padding-right:10px!important}
  .map-topic-status{max-width:42%;font-size:8px!important}
}



/* Mobile typography standard v2 */
@media (max-width:767px){
  #home-curriculum-summary{font-size:11px!important;line-height:15px!important}
  .home-mobile-subtitle{font-size:12px!important;line-height:17px!important}
  #rec-desc-text{font-size:12px!important;line-height:17px!important}
  .home-module-header p{font-size:12px!important;line-height:17px!important}
  .map-topic-sub,.map-topic-progress-text{font-size:12px!important;line-height:17px!important}
  .map-topic-meta{font-size:11px!important;line-height:15px!important}
  .map-topic-status,.map-current-pin{font-size:11px!important;line-height:15px!important}
  #home-quick-suggestions button{font-size:11px!important}
  .home-books-card p,.home-rule-card p,.home-chest-card 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}
}

/* Readable semester selector on phones. */
@media(max-width:767px){
 #term-tabs-container button{height:48px!important;padding:5px 2px!important;}
 #term-tabs-container #tab-tap1-label,#term-tabs-container #tab-tap2-label,#term-tabs-container #tab-all-label{font-size:14px!important;line-height:18px!important;font-weight:800!important;}
 #term-tabs-container #tab-tap1-count,#term-tabs-container #tab-tap2-count{font-size:11px!important;line-height:14px!important;}
}

/* Content-sized lesson contents above blurred mobile navigation. */
@media(max-width:1023px){
 body.topic-contents-open{overflow:hidden;}
 body.topic-contents-open .learning-mobile-nav{display:none!important;pointer-events:none!important;}
 #topicLessonsModal{z-index:130!important;padding:12px!important;background:rgba(251,249,245,.55)!important;-webkit-backdrop-filter:blur(7px)!important;backdrop-filter:blur(7px)!important;}
 #topicLessonsModal>div{width:100%!important;max-width:none!important;height:auto!important;max-height:calc(100dvh - 24px)!important;margin:0!important;border:0!important;border-radius:18px!important;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom))!important;animation:none!important;}
 #modalLessonList{min-height:0;overscroll-behavior:contain;overflow-y:auto!important;}
 #topicLessonsModal>div>div:first-child,#topicLessonsModal>div>div:last-child{flex-shrink:0!important;}
}

@media(max-width:767px){
 #topicLessonsModal #modalTopicPrimaryCta{height:60px!important;min-height:60px!important;font-size:16px!important;line-height:22px!important;border-radius:10px!important;}
}