/* Mobile-only layout for Bảng vàng thành tích.
   Desktop remains unchanged; data/engines stay shared. */
@media (max-width:767px){
  :root{
    --bvt-bg:#fbf9f5;
    --bvt-surface:#fff;
    --bvt-low:#f5f3ef;
    --bvt-high:#eae8e4;
    --bvt-primary:#006c49;
    --bvt-primary-container:#10b981;
    --bvt-secondary:#855300;
    --bvt-secondary-fixed:#ffddb8;
    --bvt-tertiary:#6d3bd7;
  }

  html,body{width:100%;max-width:100%;overflow-x:hidden;background:var(--bvt-bg)}
  body{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!important}
  .page-auth-header #header-profile-badge{min-width:0!important;max-width:58vw!important;flex:1!important;overflow:hidden!important}
  .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!important}
  .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 10px 18px!important}

  .bvt-main-stack{gap:12px!important}

  /* A. Glory profile */
  .bvt-profile-card{
    padding:12px!important;border-radius:14px!important;box-shadow:0 4px 16px rgba(0,0,0,.035)!important
  }
  .bvt-profile-inner{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
  .bvt-profile-main{
    width:100%!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;
    align-items:start!important;gap:10px!important;text-align:left!important
  }
  .bvt-profile-avatar-wrap{align-self:start!important}
  #bvt-avatar-box{width:64px!important;height:64px!important;border-radius:12px!important;font-size:34px!important;padding:4px!important;box-shadow:0 3px 0 #d68910!important}
  .bvt-profile-avatar-wrap>span{font-size:9px!important;line-height:12px!important;padding:3px 6px!important;right:-3px!important;bottom:-5px!important}
  .bvt-profile-info{gap:4px!important;min-width:0!important}
  #bvt-honor-tag{font-size:11px!important;line-height:15px!important}
  .bvt-profile-info>div:first-child{padding:4px 7px!important;border-radius:9px!important}
  .bvt-name-row{justify-content:flex-start!important;gap:6px!important;flex-wrap:wrap!important}
  #bvt-child-name{font-size:21px!important;line-height:27px!important}
  .bvt-edit-profile{height:32px!important;padding:0 9px!important;border-radius:9px!important;font-size:11px!important}
  .bvt-current-title-row{justify-content:flex-start!important;gap:4px!important;font-size:12px!important;line-height:16px!important}
  #bvt-current-title{font-size:14px!important;line-height:19px!important}
  .bvt-school-row{justify-content:flex-start!important;gap:5px!important;flex-wrap:wrap!important;margin-top:2px!important}
  .bvt-school-row span{font-size:10px!important;line-height:14px!important;padding:4px 7px!important;border-radius:9px!important}

  .bvt-star-area{width:100%!important;align-items:stretch!important;gap:7px!important}
  .bvt-star-vault{width:100%!important;padding:10px!important;border-radius:11px!important;gap:7px!important;box-shadow:none!important}
  .bvt-star-vault>div:first-child>span:first-child{font-size:14px!important;line-height:19px!important}
  #profile-star-count{font-size:22px!important;line-height:26px!important}
  #profile-star-target{font-size:13px!important}
  .bvt-star-vault .h-6{height:12px!important}
  .bvt-star-vault>div:last-child{font-size:11px!important;line-height:15px!important}
  .bvt-reward-button{width:100%!important;height:44px!important;border-radius:10px!important;font-size:12px!important;box-shadow:0 3px 0 #1e8449!important}

  /* B/C. Competencies first; radar is secondary on mobile */
  .bvt-competency-layout{display:flex!important;flex-direction:column!important;gap:10px!important}
  .bvt-competency-card{
    width:100%!important;padding:12px!important;border-radius:14px!important;gap:10px!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03)!important
  }
  .bvt-competency-header{padding-bottom:4px!important;gap:6px!important}
  .bvt-competency-header>div:first-child>span{font-size:9px!important}
  #bvt-competency-title{font-size:19px!important;line-height:25px!important}
  .bvt-updated-pill{font-size:10px!important;padding:4px 7px!important;border-radius:9px!important}
  #bvt-competency-container{gap:7px!important}
  #bvt-competency-container>div{padding:9px!important;border-radius:10px!important}
  #bvt-competency-container h3,#bvt-competency-container h4{font-size:13px!important;line-height:17px!important}
  #bvt-competency-container p,#bvt-competency-container span{font-size:11px!important;line-height:15px!important}
  #bvt-competency-container .h-3,#bvt-competency-container .h-2\.5,#bvt-competency-container .h-2{height:8px!important}

  .bvt-insight-column{gap:10px!important}
  .bvt-radar-card{padding:10px!important;border-radius:12px!important;box-shadow:0 4px 16px rgba(0,0,0,.025)!important}
  .bvt-radar-title{font-size:15px!important;line-height:20px!important}
  .bvt-radar-visual{display:none!important}
  .bvt-daily-tip{margin-top:0!important;padding:9px!important;border-radius:10px!important;gap:7px!important}
  #bvt-daily-tip-text{font-size:12px!important;line-height:17px!important}
  .bvt-streak-card{padding:10px!important;border-radius:12px!important;gap:8px!important;box-shadow:none!important}
  .bvt-streak-card>div:first-child{width:42px!important;height:42px!important}
  .bvt-streak-card img{display:none!important}
  .bvt-streak-card>div:first-child:after{content:"🤖";font-size:24px}
  .bvt-streak-card h4{font-size:15px!important;line-height:20px!important}
  .bvt-streak-card p,.bvt-streak-card span{font-size:11px!important;line-height:15px!important}

  /* D. Badge collection */
  .bvt-badges-section{gap:9px!important}
  .bvt-section-head{align-items:flex-start!important;gap:7px!important}
  .bvt-section-head>div:first-child{gap:7px!important;min-width:0!important}
  .bvt-section-head-icon{width:34px!important;height:34px!important;border-radius:10px!important}
  .bvt-section-head h2{font-size:18px!important;line-height:23px!important}
  .bvt-section-head p{font-size:11px!important;line-height:15px!important}
  #bvt-badges-count{font-size:10px!important;line-height:13px!important;padding:4px 7px!important;border-radius:9px!important;white-space:nowrap!important}
  #bvt-badges-container{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #bvt-badges-container>div{padding:9px!important;border-radius:11px!important;min-height:128px!important}
  #bvt-badges-container h3,#bvt-badges-container h4,#bvt-badges-container .font-bold{font-size:12px!important;line-height:16px!important}
  #bvt-badges-container p,#bvt-badges-container span{font-size:10px!important;line-height:14px!important}

  /* E. Thinking badges */
  .bvt-thinking-section{padding:11px!important;border-radius:14px!important;gap:9px!important}
  .bvt-thinking-head{gap:7px!important}
  .bvt-thinking-head>div:first-child{gap:7px!important}
  .bvt-thinking-head-icon{width:34px!important;height:34px!important;border-radius:10px!important}
  .bvt-thinking-head h2{font-size:18px!important;line-height:23px!important}
  .bvt-thinking-head p{font-size:11px!important;line-height:15px!important}
  #bvt-thinking-badges-count{font-size:10px!important;padding:4px 7px!important;border-radius:9px!important}
  #bvt-thinking-badges-container{display:flex!important;flex-direction:column!important;gap:7px!important}
  #bvt-thinking-badges-container>div{padding:9px!important;border-radius:10px!important;display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;align-items:center!important}
  #bvt-thinking-badges-container h3,#bvt-thinking-badges-container h4,#bvt-thinking-badges-container .font-bold{font-size:13px!important;line-height:17px!important}
  #bvt-thinking-badges-container p,#bvt-thinking-badges-container span{font-size:11px!important;line-height:15px!important}

  /* F. Milestones + history */
  .bvt-bottom-layout{display:flex!important;flex-direction:column!important;gap:10px!important}
  .bvt-milestones-card,.bvt-history-card{
    width:100%!important;padding:12px!important;border-radius:14px!important;gap:9px!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03)!important
  }
  .bvt-milestones-head,.bvt-history-head{align-items:flex-start!important;gap:7px!important}
  #bvt-milestones-title,.bvt-history-head h3{font-size:18px!important;line-height:23px!important}
  .bvt-milestones-head>span{font-size:10px!important;padding:4px 7px!important;border-radius:9px!important;white-space:nowrap!important}
  .bvt-milestones-card>p{font-size:11px!important;line-height:16px!important}
  #bvt-growth-milestones-container{gap:7px!important}
  #bvt-growth-milestones-container>div{padding:9px!important;border-radius:10px!important}
  #bvt-growth-milestones-container h3,#bvt-growth-milestones-container h4,#bvt-growth-milestones-container .font-bold{font-size:12px!important;line-height:16px!important}
  #bvt-growth-milestones-container p,#bvt-growth-milestones-container span{font-size:10px!important;line-height:14px!important}
  .bvt-history-head button{font-size:11px!important}
  #bvt-recent-history-container{gap:7px!important}
  #bvt-recent-history-container>div{padding:9px!important;border-radius:10px!important;gap:7px!important}
  #bvt-recent-history-container h4{font-size:12px!important;line-height:16px!important}
  #bvt-recent-history-container p,#bvt-recent-history-container span{font-size:10px!important;line-height:14px!important}
  .bvt-share-button{height:44px!important;border-radius:10px!important;font-size:12px!important;box-shadow:0 3px 0 #dbdad4!important}

  /* Rewards modal */
  #child-rewards-modal>div{margin:8px!important;padding:14px!important;border-radius:18px!important;max-height:calc(100dvh - 16px)!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){
  #bvt-child-name{font-size:18px!important;line-height:24px!important}
  #bvt-badges-container{gap:6px!important}
}



/* Mobile typography standard v2 */
@media (max-width:767px){
  #bvt-honor-tag,.bvt-profile-avatar-wrap>span{font-size:12px!important;line-height:16px!important}
  .bvt-current-title-row{font-size:13px!important;line-height:18px!important}
  .bvt-school-row span{font-size:11px!important;line-height:15px!important}
  .bvt-star-vault>div:last-child{font-size:12px!important;line-height:17px!important}
  .bvt-competency-header>div:first-child>span,.bvt-updated-pill{font-size:11px!important;line-height:15px!important}
  #bvt-competency-container p,#bvt-competency-container span{font-size:12px!important;line-height:17px!important}
  .bvt-section-head p,.bvt-thinking-head p,.bvt-milestones-card>p{font-size:12px!important;line-height:17px!important}
  #bvt-badges-count,#bvt-thinking-badges-count,.bvt-milestones-head>span{font-size:11px!important;line-height:15px!important}
  #bvt-badges-container p,#bvt-badges-container span,
  #bvt-thinking-badges-container p,#bvt-thinking-badges-container span,
  #bvt-growth-milestones-container p,#bvt-growth-milestones-container span,
  #bvt-recent-history-container p,#bvt-recent-history-container span{font-size:11px!important;line-height:15px!important}
  .learning-mobile-nav .learning-nav-link span:last-child{font-size:11px!important;line-height:14px!important}
}



/* Milestone status nowrap fix */
@media (max-width:767px){
  .bvt-milestone-title-row{
    display:flex!important;
    align-items:flex-start!important;
    gap:6px!important;
    min-width:0!important;
  }

  .bvt-milestone-title-row h4{
    min-width:0!important;
    flex:1 1 auto!important;
  }

  .bvt-milestone-status{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    line-height:15px!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}
}


/* Mobile profile hero layout v3 — approved demo */
@media (max-width:767px){
  .bvt-profile-card{
    padding:14px!important;
    border-radius:16px!important;
  }

  .bvt-profile-inner{
    gap:12px!important;
  }

  .bvt-profile-main{
    width:100%!important;
    display:grid!important;
    grid-template-columns:76px minmax(0,1fr) auto!important;
    grid-template-areas:
      "honor honor edit"
      "avatar name name"
      "avatar title title"
      "progress progress progress"!important;
    column-gap:12px!important;
    row-gap:6px!important;
    align-items:start!important;
    text-align:left!important;
  }

  /* Flatten the existing wrappers so the mobile grid can place each piece cleanly. */
  .bvt-profile-info,
  .bvt-name-row{
    display:contents!important;
  }

  .bvt-profile-info>div:first-child{
    grid-area:honor!important;
    justify-self:start!important;
    align-self:center!important;
    max-width:100%!important;
    min-width:0!important;
    padding:5px 9px!important;
    border-radius:999px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

  #bvt-honor-tag{
    display:block!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:11.5px!important;
    line-height:16px!important;
  }

  .bvt-edit-profile{
    grid-area:edit!important;
    justify-self:end!important;
    align-self:center!important;
    height:34px!important;
    min-height:34px!important;
    padding:0 10px!important;
    border-radius:10px!important;
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  .bvt-profile-avatar-wrap{
    grid-area:avatar!important;
    width:76px!important;
    align-self:start!important;
    justify-self:start!important;
    margin-top:2px!important;
  }

  #bvt-avatar-box{
    width:76px!important;
    height:76px!important;
    border-radius:14px!important;
    font-size:42px!important;
    padding:5px!important;
    box-shadow:0 4px 0 #d68910!important;
  }

  .bvt-profile-avatar-wrap>span{
    right:-5px!important;
    bottom:-6px!important;
    padding:4px 7px!important;
    border-radius:999px!important;
    font-size:11px!important;
    line-height:14px!important;
    white-space:nowrap!important;
  }

  #bvt-child-name{
    grid-area:name!important;
    align-self:end!important;
    min-width:0!important;
    margin:0!important;
    font-size:24px!important;
    line-height:29px!important;
    letter-spacing:-.025em!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .bvt-current-title-row{
    grid-area:title!important;
    align-self:start!important;
    min-width:0!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:1px!important;
    font-size:12px!important;
    line-height:16px!important;
  }

  .bvt-current-title-row>span:first-child{
    color:#4b5563!important;
    font-weight:600!important;
  }

  #bvt-current-title{
    width:100%!important;
    min-width:0!important;
    font-size:16px!important;
    line-height:20px!important;
    font-weight:800!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* Full-width level progress block, matching the approved demo. */
  .bvt-school-row{
    grid-area:progress!important;
    width:100%!important;
    min-width:0!important;
    margin-top:5px!important;
    padding:10px 11px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:6px 10px!important;
    background:rgba(240,238,232,.72)!important;
    border-radius:14px!important;
  }

  .bvt-school-row>div:first-child{
    grid-column:1 / -1!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    gap:6px 8px!important;
  }

  .bvt-school-row>div:first-child::before{
    content:"Tiến trình cấp độ";
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    font-size:12px!important;
    line-height:16px!important;
    font-weight:700!important;
    color:#374151!important;
  }

  .bvt-school-row>div:first-child>div:first-child{
    display:contents!important;
  }

  .bvt-school-row .competency-responsive-track{
    grid-column:1 / -1!important;
    grid-row:2!important;
    width:100%!important;
    height:10px!important;
    min-width:0!important;
    border-radius:999px!important;
  }

  #bvt-xp-progress-percent{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    min-width:32px!important;
    padding:0!important;
    font-size:12px!important;
    line-height:16px!important;
    text-align:right!important;
    border-radius:0!important;
  }

  #bvt-xp-progress-detail{
    display:none!important;
  }

  #bvt-progress-level{
    display:inline-flex!important;
    grid-column:1!important;
    grid-row:2!important;
    justify-self:start!important;
    align-items:center!important;
    padding:0!important;
    border-radius:0!important;
    font-size:12px!important;
    line-height:16px!important;
    font-weight:900!important;
    color:#059669!important;
  }

  #bvt-semester{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:end!important;
    padding:4px 9px!important;
    border-radius:999px!important;
    font-size:11px!important;
    line-height:15px!important;
    white-space:nowrap!important;
  }

  .bvt-star-area{
    margin-top:0!important;
  }
}

@media (max-width:390px){
  .bvt-profile-card{
    padding:12px!important;
  }

  .bvt-profile-main{
    grid-template-columns:70px minmax(0,1fr) auto!important;
    column-gap:10px!important;
    row-gap:5px!important;
  }

  .bvt-profile-avatar-wrap{
    width:70px!important;
  }

  #bvt-avatar-box{
    width:70px!important;
    height:70px!important;
    font-size:39px!important;
  }

  .bvt-profile-info>div:first-child{
    padding:4px 7px!important;
  }

  #bvt-honor-tag{
    font-size:10.5px!important;
  }

  .bvt-edit-profile{
    height:32px!important;
    min-height:32px!important;
    padding:0 8px!important;
    font-size:10px!important;
  }

  #bvt-child-name{
    font-size:21px!important;
    line-height:26px!important;
  }

  #bvt-current-title{
    font-size:14px!important;
    line-height:18px!important;
  }

  .bvt-school-row{
    padding:9px 10px!important;
  }
}

@media (max-width:350px){
  .bvt-profile-main{
    grid-template-columns:64px minmax(0,1fr) auto!important;
    column-gap:8px!important;
  }

  .bvt-profile-avatar-wrap{
    width:64px!important;
  }

  #bvt-avatar-box{
    width:64px!important;
    height:64px!important;
    font-size:35px!important;
  }

  #bvt-child-name{
    font-size:19px!important;
    line-height:24px!important;
  }

  .bvt-edit-profile{
    padding:0 7px!important;
  }

  .bvt-edit-profile .material-symbols-outlined{
    display:none!important;
  }
}


/* iPad Mini portrait 768px: widen star vault only */
@media (width:768px) and (orientation:portrait){
  .bvt-profile-card .bvt-star-area{
    width:100%!important;
    align-items:center!important;
  }

  .bvt-profile-card .bvt-star-vault,
  .bvt-profile-card .bvt-reward-button{
    width:480px!important;
    max-width:100%!important;
  }
}


/* Mobile competency cards: hide duplicate status labels */
@media (max-width:767px){
  .competency-responsive-inline-status,
  .competency-responsive-status-badge{
    display:none!important;
  }
}


/* Mobile competency radar: show above core competency */
@media (max-width:767px){
  /* Flatten the insight wrapper so the radar and streak card can be ordered
     independently around the competency card. */
  .bvt-competency-layout{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
  }

  .bvt-insight-column{
    display:contents!important;
  }

  .bvt-radar-card{
    order:-1!important;
    width:100%!important;
    padding:12px!important;
    border-radius:14px!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03)!important;
  }

  .bvt-competency-card{
    order:0!important;
  }

  .bvt-streak-card{
    order:1!important;
  }

  /* The radar existed before but was hidden on mobile. */
  .bvt-radar-visual{
    display:flex!important;
    width:min(240px,72vw)!important;
    height:min(240px,72vw)!important;
    max-width:240px!important;
    max-height:240px!important;
    margin:4px auto 2px!important;
  }

  .bvt-radar-title{
    font-size:17px!important;
    line-height:22px!important;
  }

  .bvt-radar-card .bvt-daily-tip{
    margin-top:6px!important;
  }
}

@media (max-width:390px){
  .bvt-radar-card{
    padding:11px!important;
  }

  .bvt-radar-visual{
    width:min(220px,70vw)!important;
    height:min(220px,70vw)!important;
    max-width:220px!important;
    max-height:220px!important;
  }

  .bvt-radar-title{
    font-size:16px!important;
    line-height:21px!important;
  }
}


/* Mobile radar typography boost */
@media (max-width:767px){
  .bvt-radar-title{
    font-size:20px!important;
    line-height:25px!important;
  }

  .bvt-radar-visual svg text{
    font-size:12.5px!important;
    font-weight:800!important;
  }

  .bvt-radar-visual svg text:last-of-type{
    font-size:11.5px!important;
  }
}

@media (max-width:390px){
  .bvt-radar-title{
    font-size:19px!important;
    line-height:24px!important;
  }

  .bvt-radar-visual svg text{
    font-size:13px!important;
  }

  .bvt-radar-visual svg text:last-of-type{
    font-size:12px!important;
  }
}


/* Phone and tablet daily leaderboard: cover every width below desktop. */
@media (max-width:1023px){
  /* Cây năng lực chi tiết đã có ở tab Phụ huynh. */
  .bvt-competency-card{
    display:none!important;
  }

  /* Radar stays first; leaderboard takes the old competency-tree position. */
  .bvt-radar-card{
    order:-1!important;
  }

  .bvt-today-leaderboard-card{
    display:flex!important;
    order:0!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:12px!important;
    flex-direction:column!important;
    gap:10px!important;
    background:#fff!important;
    border:1px solid #e7e5e0!important;
    border-radius:14px!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03)!important;
    overflow:hidden!important;
  }

  .bvt-streak-card{
    order:1!important;
  }

  .bvt-today-leaderboard-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:8px!important;
    padding:0!important;
  }

  .bvt-today-leaderboard-kicker{
    margin:0 0 2px!important;
    color:#9a5b00!important;
    font-size:10px!important;
    line-height:14px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
  }

  .bvt-today-leaderboard-head h2{
    margin:0!important;
    color:#0758b5!important;
    font-size:19px!important;
    line-height:24px!important;
    font-weight:900!important;
    letter-spacing:-.02em!important;
  }

  .bvt-today-leaderboard-head p{
    margin:2px 0 0!important;
    color:#2563a9!important;
    font-size:10.5px!important;
    line-height:15px!important;
    font-weight:800!important;
  }

  .bvt-today-leaderboard-date{
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    flex:0 0 auto!important;
    padding:5px 6px!important;
    color:#0f3f72!important;
    background:#f8fafc!important;
    border:1px solid #e2e8f0!important;
    border-radius:9px!important;
  }

  .bvt-today-leaderboard-date>.material-symbols-outlined{
    font-size:16px!important;
  }

  .bvt-today-leaderboard-date>span:last-child{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
  }

  .bvt-today-leaderboard-date strong{
    font-size:8.5px!important;
    line-height:11px!important;
  }

  .bvt-today-leaderboard-date small{
    color:#0758b5!important;
    font-size:8.5px!important;
    line-height:11px!important;
    font-weight:900!important;
  }

  .bvt-today-leaderboard-list{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
  }

  .bvt-today-leaderboard-row{
    min-height:48px!important;
    display:grid!important;
    grid-template-columns:28px 36px minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:6px!important;
    padding:6px 7px!important;
    background:#fafafa!important;
    border:1px solid #efede8!important;
    border-radius:10px!important;
  }

  .bvt-today-leaderboard-row:nth-child(1){
    background:linear-gradient(90deg,#fff5d9,#fffaf0)!important;
    border-color:#f4d68b!important;
  }

  .bvt-today-leaderboard-row:nth-child(2){
    background:linear-gradient(90deg,#f6f8fb,#fff)!important;
  }

  .bvt-today-leaderboard-row:nth-child(3){
    background:linear-gradient(90deg,#fff4ea,#fff)!important;
  }

  .bvt-today-leaderboard-row.is-me{
    outline:2px solid rgba(16,185,129,.22)!important;
    outline-offset:-2px!important;
  }

  .bvt-today-rank{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    color:#12345b!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  .bvt-today-rank.is-medal{
    font-size:20px!important;
  }

  .bvt-today-avatar{
    width:34px!important;
    height:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:9px!important;
    background:#fff!important;
    box-shadow:0 2px 5px rgba(15,23,42,.06)!important;
    font-size:20px!important;
  }

  .bvt-today-name{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:1px!important;
  }

  .bvt-today-name strong{
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#172033!important;
    font-size:11.5px!important;
    line-height:15px!important;
    font-weight:900!important;
  }

  .bvt-today-name small{
    padding:1px 4px!important;
    color:#047857!important;
    background:#d1fae5!important;
    border-radius:999px!important;
    font-size:7.5px!important;
    line-height:10px!important;
    font-weight:900!important;
  }

  .bvt-today-grade{
    padding:3px 5px!important;
    color:#1d4ed8!important;
    background:#dbeafe!important;
    border-radius:999px!important;
    font-size:8.5px!important;
    line-height:11px!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  .bvt-today-xp{
    color:#c45c00!important;
    font-size:11px!important;
    line-height:14px!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  .bvt-today-leaderboard-empty{
    min-height:150px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:18px 12px!important;
    text-align:center!important;
    color:#64748b!important;
    background:#faf9f6!important;
    border:1px dashed #d9d6cf!important;
    border-radius:11px!important;
  }

  .bvt-today-leaderboard-empty>span{
    font-size:26px!important;
  }

  .bvt-today-leaderboard-empty strong{
    color:#334155!important;
    font-size:12px!important;
    line-height:16px!important;
  }

  .bvt-today-leaderboard-empty small{
    max-width:280px!important;
    font-size:10px!important;
    line-height:14px!important;
  }

  .bvt-today-leaderboard-empty a{
    margin-top:3px!important;
    padding:7px 11px!important;
    color:#fff!important;
    background:#10b981!important;
    border-radius:9px!important;
    font-size:10px!important;
    line-height:13px!important;
    font-weight:900!important;
    text-decoration:none!important;
  }

  .bvt-today-me-card{
    margin-top:1px!important;
    padding:10px!important;
    background:linear-gradient(105deg,#ecfdf5,#f0fdfa)!important;
    border:1px solid #c7f3df!important;
    border-radius:11px!important;
  }

  .bvt-today-me-card[hidden]{
    display:none!important;
  }

  .bvt-today-me-label{
    margin-bottom:6px!important;
    color:#047857!important;
    font-size:10px!important;
    line-height:14px!important;
    font-weight:900!important;
  }

  .bvt-today-me-body{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
  }

  .bvt-today-me-avatar{
    width:40px!important;
    height:40px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:10px!important;
    background:#ffd28a!important;
    box-shadow:0 3px 0 #dc8c15!important;
    font-size:24px!important;
  }

  .bvt-today-me-name{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
  }

  .bvt-today-me-name strong{
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#172033!important;
    font-size:13px!important;
    line-height:17px!important;
    font-weight:900!important;
  }

  .bvt-today-me-name span{
    width:max-content!important;
    padding:2px 6px!important;
    color:#1d4ed8!important;
    background:#dbeafe!important;
    border-radius:999px!important;
    font-size:8.5px!important;
    line-height:11px!important;
    font-weight:900!important;
  }

  .bvt-today-me-rank{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    gap:1px!important;
    white-space:nowrap!important;
  }

  .bvt-today-me-rank strong{
    color:#059669!important;
    font-size:13px!important;
    line-height:17px!important;
    font-weight:900!important;
  }

  .bvt-today-me-rank span{
    color:#047857!important;
    font-size:8.5px!important;
    line-height:11px!important;
    font-weight:800!important;
  }

  .bvt-today-me-message{
    margin-top:7px!important;
    padding:6px 8px!important;
    color:#047857!important;
    background:rgba(255,255,255,.72)!important;
    border-radius:8px!important;
    font-size:9px!important;
    line-height:13px!important;
    font-weight:800!important;
  }
}

@media (max-width:390px){
  .bvt-today-leaderboard-card{
    padding:10px!important;
  }

  .bvt-today-leaderboard-head h2{
    font-size:18px!important;
    line-height:23px!important;
  }

  .bvt-today-leaderboard-row{
    grid-template-columns:26px 32px minmax(0,1fr) auto auto!important;
    gap:5px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }

  .bvt-today-avatar{
    width:31px!important;
    height:31px!important;
    font-size:19px!important;
  }

  .bvt-today-grade{
    font-size:8px!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }

  .bvt-today-xp{
    font-size:10.5px!important;
  }
}


/* Mobile badge collection header overlap fix */
@media (max-width:767px){
  .bvt-badges-section .bvt-section-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    justify-content:stretch!important;
    gap:8px!important;
    width:100%!important;
  }

  .bvt-badges-section .bvt-section-head>.competency-responsive-progress-row{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    align-items:start!important;
    gap:9px!important;
  }

  .bvt-badges-section .bvt-section-head>.competency-responsive-progress-row>div:last-child{
    min-width:0!important;
    width:100%!important;
  }

  .bvt-badges-section .bvt-section-head h2{
    margin:0!important;
    width:100%!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    font-size:18px!important;
    line-height:23px!important;
  }

  .bvt-badges-section .bvt-section-head p{
    display:block!important;
    width:100%!important;
    margin-top:2px!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    font-size:11px!important;
    line-height:16px!important;
  }

  .bvt-badges-section #bvt-badges-count{
    position:static!important;
    justify-self:start!important;
    align-self:start!important;
    max-width:100%!important;
    margin:0 0 0 43px!important;
    white-space:normal!important;
    text-align:left!important;
    font-size:10px!important;
    line-height:14px!important;
    padding:4px 8px!important;
  }
}

@media (max-width:390px){
  .bvt-badges-section .bvt-section-head>.competency-responsive-progress-row{
    grid-template-columns:32px minmax(0,1fr)!important;
    gap:8px!important;
  }

  .bvt-badges-section .bvt-section-head-icon{
    width:32px!important;
    height:32px!important;
  }

  .bvt-badges-section #bvt-badges-count{
    margin-left:40px!important;
  }
}


/* iPad Mini portrait: radar above competency tree */
@media (width:768px) and (orientation:portrait){
  .bvt-competency-layout{
    display:flex!important;
    flex-direction:column!important;
    gap:16px!important;
  }

  .bvt-insight-column{
    display:contents!important;
  }

  .bvt-radar-card{
    order:-1!important;
    width:100%!important;
  }

  .bvt-competency-card{
    order:0!important;
    width:100%!important;
  }

  .bvt-streak-card{
    order:1!important;
    width:100%!important;
  }
}