/* Mobile-only layout for Góc Phụ Huynh.
   Desktop layout and all parent-report logic remain unchanged. */
@media (max-width:767px){
  :root{
    --parent-bg:#fbf9f5;
    --parent-surface:#fff;
    --parent-low:#f5f3ef;
    --parent-high:#eae8e4;
    --parent-primary:#006c49;
    --parent-secondary:#855300;
    --parent-tertiary:#6d3bd7;
  }

  html,body{width:100%;max-width:100%;overflow-x:hidden;background:var(--parent-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 8px 18px!important}

  .parent-mobile-stack{gap:12px!important;width:100%!important;max-width:none!important}

  /* 1. Active child + report period */
  .parent-mobile-profile-bar{
    padding:11px!important;border-radius:10px!important;background:#fff!important;border:1px solid #eceae6!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03)!important;gap:10px!important
  }
  .parent-mobile-profile-main{width:100%!important;gap:9px!important;align-items:flex-start!important}
  #parent-child-avatar{width:50px!important;height:50px!important;border-radius:10px!important;font-size:27px!important;box-shadow:0 3px 0 #ffb955!important}
  #parent-child-name{font-size:18px!important;line-height:23px!important}
  #parent-child-grade{font-size:10px!important;line-height:14px!important;padding:4px 7px!important;border-radius:10px!important}
  .parent-mobile-edit-btn{height:29px!important;padding:0 7px!important;font-size:9px!important;border-radius:10px!important}
  #parent-child-school{font-size:11px!important;line-height:15px!important;margin-top:2px!important}
  .parent-mobile-profile-actions{width:100%!important;display:flex!important;flex-direction:column!important;gap:7px!important}
  .parent-mobile-add-child{width:100%!important;height:38px!important;justify-content:center!important;border-radius:10px!important;font-size:11px!important}
  #parent-period-tabs{
    width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:4px!important;padding:4px!important;border-radius:10px!important
  }
  #parent-period-tabs button{width:100%!important;min-width:0!important;height:34px!important;padding:0 4px!important;font-size:10px!important;border-radius:10px!important}

  /* Secondary profile management is useful but not dominant on mobile */
  .parent-family-card{padding:11px!important;border-radius:10px!important;gap:9px!important}
  .parent-family-card>div:first-child{padding-bottom:8px!important;gap:6px!important}
  .parent-family-card h4{font-size:13px!important;line-height:17px!important}
  .parent-family-card p,.parent-family-card span{font-size:10px!important;line-height:14px!important}
  #parent-profiles-list{gap:6px!important}
  #parent-profiles-list>div{padding:8px!important;border-radius:10px!important}

  /* Hide SGK showcase from primary parent mobile flow */
  .parent-sgk-card{display:none!important}

  /* 2. Rewards / stars */
  .parent-rewards-card{
    padding:12px!important;border-radius:10px!important;gap:10px!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03)!important
  }
  .parent-rewards-head{display:flex!important;flex-direction:column!important;gap:8px!important;padding-bottom:9px!important}
  .parent-rewards-head>div:first-child{gap:8px!important}
  .parent-rewards-head h3{font-size:17px!important;line-height:22px!important}
  .parent-rewards-head p{font-size:11px!important;line-height:15px!important}
  .parent-rewards-actions{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
  .parent-rewards-actions>div{width:100%!important;justify-content:space-between!important;border-radius:10px!important}
  .parent-rewards-actions button{width:100%!important;height:38px!important;justify-content:center!important;border-radius:10px!important;font-size:11px!important}
  #parent-rewards-grid{display:flex!important;flex-direction:column!important;gap:7px!important}
  #parent-rewards-grid>div{padding:10px!important;border-radius:10px!important}
  #parent-rewards-grid h4,#parent-rewards-grid .font-bold,#parent-rewards-grid .font-black{font-size:12px!important;line-height:16px!important}
  #parent-rewards-grid p,#parent-rewards-grid span{font-size:10px!important;line-height:14px!important}
  #parent-redemptions-container{overflow-x:auto!important;font-size:10px!important}

  /* 3. Two-layer evaluation */
  #parent-tier-report-card{
    padding:12px!important;border-radius:10px!important;gap:10px!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03)!important
  }
  .parent-tier-head{padding-bottom:8px!important;gap:7px!important}
  .parent-tier-head h4{font-size:17px!important;line-height:22px!important}
  .parent-tier-head p{font-size:11px!important;line-height:15px!important}
  .parent-tier-head>span{font-size:9px!important;line-height:13px!important;padding:4px 7px!important;border-radius:10px!important}
  .parent-tier-grid{display:flex!important;flex-direction:column!important;gap:8px!important}
  .parent-tier-grid>div{padding:10px!important;border-radius:10px!important;gap:8px!important}
  .parent-tier-grid h5{font-size:13px!important;line-height:17px!important}
  .parent-tier-grid p,.parent-tier-grid span{font-size:10px!important;line-height:14px!important}
  #parent-core-accuracy,#parent-core-support-res{font-size:20px!important;line-height:24px!important}
  #parent-extension-accuracy{font-size:18px!important;line-height:22px!important}

  /* 4. Weekly metrics */
  #parent-metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #parent-metrics-grid>div{padding:10px!important;border-radius:10px!important;min-height:118px!important;box-shadow:0 2px 8px rgba(0,0,0,.025)!important}
  #parent-metrics-grid>div>div:first-child>span:first-child{font-size:10px!important;line-height:14px!important}
  #parent-metrics-grid>div>div:first-child>div{width:32px!important;height:32px!important;border-radius:10px!important}
  #metric-active-time,#metric-independent-acc,#metric-supported-res,#metric-skipped-count{font-size:20px!important;line-height:24px!important}
  #parent-metrics-grid p,#parent-metrics-grid span{font-size:10px!important;line-height:14px!important}

  /* 5. Reinforcement plan */
  #parent-reinforcement-card{padding:12px!important;border-radius:10px!important;gap:10px!important}
  .parent-reinforcement-head{padding-bottom:8px!important;gap:7px!important}
  .parent-reinforcement-head h4{font-size:17px!important;line-height:22px!important}
  .parent-reinforcement-head p{font-size:11px!important;line-height:15px!important}
  #reinforcement-active-count{font-size:9px!important;line-height:13px!important;padding:4px 7px!important;border-radius:10px!important;white-space:nowrap!important}
  #parent-reinforcement-list{display:flex!important;flex-direction:column!important;gap:7px!important}
  #parent-reinforcement-list>div{padding:10px!important;border-radius:10px!important}
  #parent-reinforcement-list h4,#parent-reinforcement-list .font-bold,#parent-reinforcement-list .font-black{font-size:12px!important;line-height:16px!important}
  #parent-reinforcement-list p,#parent-reinforcement-list span{font-size:10px!important;line-height:14px!important}

  /* 6. Competency + diagnosis + parent recommendations */
  .parent-analytics-layout{
    display:flex!important;flex-direction:column!important;gap:9px!important;
    width:calc(100% + 8px)!important;max-width:none!important;margin-left:-4px!important;margin-right:-4px!important
  }
  .parent-competency-card{
    width:100%!important;max-width:none!important;padding:12px!important;border-radius:10px!important;gap:9px!important;
    box-shadow:0 4px 16px rgba(0,0,0,.03)!important
  }
  .parent-competency-head{gap:6px!important;padding-bottom:5px!important}
  .parent-competency-head .font-headline-md{font-size:17px!important;line-height:22px!important}
  .parent-competency-head p{font-size:10px!important;line-height:14px!important}
  #parent-overall-competency{font-size:9px!important;line-height:13px!important;padding:4px 7px!important;border-radius:10px!important}
  #parent-strands-container{gap:6px!important}
  #parent-strands-container>div{padding:9px!important;border-radius:10px!important}
  #parent-strands-container h4,#parent-strands-container .font-bold{font-size:12px!important;line-height:16px!important}
  #parent-strands-container p,#parent-strands-container span{font-size:10px!important;line-height:14px!important}

  .parent-chart-section{display:none!important}
  .parent-insight-column{gap:8px!important}
  #parent-diagnostic-container,#parent-accompaniment-container,.parent-backup-card{
    padding:11px!important;border-radius:10px!important;gap:8px!important;box-shadow:0 4px 16px rgba(0,0,0,.025)!important
  }
  #parent-diagnostic-container h3,#parent-diagnostic-container h4,#parent-accompaniment-container h3,#parent-accompaniment-container h4,.parent-backup-card .font-title-md{
    font-size:14px!important;line-height:19px!important
  }
  #parent-diagnostic-container p,#parent-diagnostic-container span,#parent-accompaniment-container p,#parent-accompaniment-container span,.parent-backup-card p,.parent-backup-card span{
    font-size:10px!important;line-height:14px!important
  }
  .parent-backup-card button,.parent-backup-card label{height:38px!important;border-radius:10px!important;font-size:10px!important}

  /* 7. History: transform desktop table into stacked mobile cards */
  .parent-history-card{padding:12px!important;border-radius:10px!important;gap:9px!important}
  .parent-history-head{gap:6px!important}
  .parent-history-head .font-headline-md{font-size:17px!important;line-height:22px!important}
  .parent-history-head p,.parent-history-head button{font-size:10px!important;line-height:14px!important}
  .parent-history-table-wrap{overflow:visible!important}
  .parent-history-table{display:block!important;width:100%!important}
  .parent-history-table thead{display:none!important}
  #parent-history-tbody{display:flex!important;flex-direction:column!important;gap:7px!important}
  #parent-history-tbody tr{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:5px 8px!important;
    padding:9px!important;border-radius:10px!important;background:var(--parent-low)!important
  }
  #parent-history-tbody td{display:block!important;padding:0!important;border:0!important;font-size:10px!important;line-height:14px!important;min-width:0!important}
  #parent-history-tbody td:first-child{grid-column:1/2;font-size:12px!important;line-height:16px!important;font-weight:800!important}
  #parent-history-tbody td:nth-child(2){grid-column:1/2;color:#6b7280!important}
  #parent-history-tbody td:nth-child(3),#parent-history-tbody td:nth-child(4){grid-column:1/2;color:#6b7280!important}
  #parent-history-tbody td:nth-child(5){grid-column:2/3;grid-row:1/3;text-align:right!important;font-weight:900!important;color:var(--parent-primary)!important}
  #parent-history-tbody td:last-child{grid-column:1/3;text-align:left!important;margin-top:2px!important}
  #parent-history-tbody td:last-child button{height:30px!important;border-radius:10px!important;font-size:9px!important;padding:0 8px!important}


  /* Đồng bộ bo góc mobile: 10px cho card / nút / pill; giữ avatar/icon tròn là hình tròn. */
  .learning-page-content main :is(
    .rounded-xl,.rounded-2xl,.rounded-3xl,.rounded-lg,
    [class*="rounded-["]
  ):not(.rounded-full):not([class*="rounded-full"]){
    border-radius:10px!important;
  }
  .learning-page-content main button:not(.rounded-full),
  .learning-page-content main label:not(.rounded-full),
  .learning-page-content main input:not([type="radio"]):not([type="checkbox"]){
    border-radius: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){
  #parent-child-name{font-size:17px!important}
  #parent-metrics-grid{gap:6px!important}
}



/* Mobile typography standard v2 */
@media (max-width:767px){
  #parent-child-grade{font-size:11px!important;line-height:15px!important}
  #parent-child-school{font-size:12px!important;line-height:17px!important}
  .parent-mobile-edit-btn,.parent-mobile-add-child,#parent-period-tabs button{font-size:11px!important;line-height:15px!important}
  .parent-family-card p,.parent-family-card span{font-size:11px!important;line-height:15px!important}
  .parent-rewards-head p,.parent-tier-head p,.parent-reinforcement-head p{font-size:12px!important;line-height:17px!important}
  #parent-rewards-grid p,#parent-rewards-grid span,
  .parent-tier-grid p,.parent-tier-grid span,
  #parent-reinforcement-list p,#parent-reinforcement-list span{font-size:11px!important;line-height:15px!important}
  .parent-tier-head>span,#reinforcement-active-count{font-size:11px!important;line-height:15px!important}
  #parent-metrics-grid>div>div:first-child>span:first-child,
  #parent-metrics-grid p,#parent-metrics-grid span{font-size:11px!important;line-height:15px!important}
  .parent-competency-head p{font-size:12px!important;line-height:17px!important}
  #parent-overall-competency{font-size:11px!important;line-height:15px!important}
  #parent-strands-container p,#parent-strands-container span{font-size:11px!important;line-height:15px!important}
  #parent-diagnostic-container p,#parent-diagnostic-container span,
  #parent-accompaniment-container p,#parent-accompaniment-container span,
  .parent-backup-card p,.parent-backup-card span{font-size:12px!important;line-height:17px!important}
  .parent-history-head p,.parent-history-head button{font-size:12px!important;line-height:17px!important}
  #parent-history-tbody td{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}
}



/* Rewards header layout refinement v2 */
@media (max-width:767px){
  .parent-rewards-card{
    padding:12px!important;
    border-radius:10px!important;
    gap:11px!important;
    overflow:hidden!important;
  }

  .parent-rewards-head{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    padding-bottom:10px!important;
  }

  .parent-rewards-head>div:first-child{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px!important;
    width:100%!important;
  }

  .parent-rewards-icon{
    width:42px!important;
    height:42px!important;
    border-radius:10px!important;
    font-size:22px!important;
    margin-top:1px!important;
  }

  .parent-rewards-copy{
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
  }

  .parent-rewards-badges{
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    margin:0!important;
  }

  .parent-rewards-badges span{
    font-size:10px!important;
    line-height:14px!important;
    padding:4px 7px!important;
    border-radius:10px!important;
  }

  .parent-rewards-copy h3{
    margin:0!important;
    font-size:18px!important;
    line-height:23px!important;
  }

  .parent-rewards-copy p{
    margin:0!important;
    font-size:12px!important;
    line-height:17px!important;
  }

  .parent-rewards-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }

  .parent-rewards-child-status{
    width:100%!important;
    min-height:54px!important;
    padding:8px 10px!important;
    border-radius:10px!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
  }

  .parent-rewards-child-status>#reward-active-avatar{
    font-size:22px!important;
  }

  .parent-rewards-child-status>div{
    min-width:0!important;
  }

  #reward-active-name{
    font-size:12px!important;
    line-height:16px!important;
  }

  .parent-rewards-child-status span{
    font-size:11px!important;
    line-height:15px!important;
  }

  #reward-active-stars{
    font-size:14px!important;
    line-height:18px!important;
  }

  .parent-rewards-actions button{
    height:42px!important;
    font-size:12px!important;
    line-height:16px!important;
    border-radius:10px!important;
  }

  .parent-rewards-list-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin-bottom:8px!important;
  }

  .parent-rewards-list-head h4{
    min-width:0!important;
    flex:1!important;
    display:flex!important;
    align-items:center!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    font-size:15px!important;
    line-height:20px!important;
  }

  .parent-rewards-list-head>span{
    flex:0 0 44%!important;
    font-size:11px!important;
    line-height:15px!important;
    text-align:right!important;
  }
}



/* Redemption history mobile refinement */
@media (max-width:767px){
  .parent-redemption-section{
    margin-top:4px!important;
    padding-top:12px!important;
    gap:9px!important;
  }

  .parent-redemption-head{
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
  }

  .parent-redemption-title-row{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:10px!important;
    width:100%!important;
  }

  .parent-redemption-title-group{
    display:flex!important;
    align-items:flex-start!important;
    gap:7px!important;
    min-width:0!important;
    flex:1!important;
  }

  .parent-redemption-title-group .material-symbols-outlined{
    font-size:19px!important;
    line-height:22px!important;
    flex:0 0 auto!important;
    margin-top:1px!important;
  }

  .parent-redemption-title-group h4{
    margin:0!important;
    font-size:16px!important;
    line-height:21px!important;
    font-weight:900!important;
  }

  .parent-redemption-count{
    flex:0 0 auto!important;
    min-width:54px!important;
    padding:4px 8px!important;
    border-radius:10px!important;
    font-size:11px!important;
    line-height:15px!important;
    text-align:center!important;
  }

  .parent-redemption-desc{
    margin:0 0 0 26px!important;
    font-size:12px!important;
    line-height:17px!important;
    color:#6b7280!important;
  }

  #parent-redemptions-container{
    overflow:visible!important;
  }

  .parent-redemption-empty{
    min-height:0!important;
    padding:16px 14px!important;
    border-radius:10px!important;
    gap:6px!important;
  }

  .parent-redemption-empty-icon{
    font-size:24px!important;
    line-height:28px!important;
    margin-bottom:1px!important;
  }

  .parent-redemption-empty-title{
    margin:0!important;
    font-size:13px!important;
    line-height:18px!important;
  }

  .parent-redemption-empty-desc{
    margin:0!important;
    max-width:92%!important;
    font-size:12px!important;
    line-height:17px!important;
  }

  /* If redemption history has data, keep the table horizontally scrollable instead of crushing columns. */
  #parent-redemptions-container:has(.parent-redemption-table){
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }

  .parent-redemption-table{
    min-width:720px!important;
    font-size:11px!important;
  }
}



/* Rewards list heading mobile refinement */
@media (max-width:767px){
  .parent-rewards-list-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    margin-bottom:9px!important;
  }

  .parent-rewards-list-title-row{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    width:100%!important;
  }

  .parent-rewards-list-title-row h4{
    margin:0!important;
    min-width:0!important;
    flex:1!important;
    font-size:16px!important;
    line-height:21px!important;
    font-weight:900!important;
  }

  .parent-rewards-list-count{
    flex:0 0 auto!important;
    min-width:72px!important;
    padding:4px 8px!important;
    border-radius:10px!important;
    font-size:11px!important;
    line-height:15px!important;
    text-align:center!important;
  }

  .parent-rewards-list-desc{
    margin:0!important;
    font-size:12px!important;
    line-height:17px!important;
    color:#6b7280!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}
}

/* Small mobile parent dashboard refinement — iPhone SE class */
@media (max-width:390px) and (max-height:740px){
  /* Scope this refinement to short/small phones only. */
  .learning-page-header~main{
    padding-left:6px!important;
    padding-right:6px!important;
    padding-bottom:16px!important;
  }

  .parent-mobile-stack{
    gap:9px!important;
  }

  /* Keep cards compact without sacrificing readable line lengths. */
  .parent-family-card,
  .parent-rewards-card,
  #parent-tier-report-card,
  #parent-reinforcement-card,
  .parent-competency-card,
  #parent-diagnostic-container,
  #parent-accompaniment-container,
  .parent-backup-card,
  .parent-history-card{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Reinforcement header: title gets the full row; count badge sits below it. */
  #parent-reinforcement-card{
    padding:11px!important;
    gap:9px!important;
  }

  .parent-reinforcement-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    justify-content:stretch!important;
    gap:7px!important;
    padding-bottom:9px!important;
  }

  .parent-reinforcement-head>div:first-child{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    align-items:start!important;
    gap:8px!important;
  }

  .parent-reinforcement-head>div:first-child>div:first-child{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    border-radius:10px!important;
    font-size:18px!important;
  }

  .parent-reinforcement-head>div:first-child>div:last-child{
    min-width:0!important;
    width:100%!important;
  }

  .parent-reinforcement-head h4{
    margin:0!important;
    font-size:16px!important;
    line-height:21px!important;
    white-space:normal!important;
  }

  .parent-reinforcement-head p{
    margin-top:3px!important;
    font-size:11px!important;
    line-height:16px!important;
  }

  #reinforcement-active-count{
    justify-self:start!important;
    margin-left:42px!important;
    max-width:calc(100% - 42px)!important;
    white-space:normal!important;
    font-size:10px!important;
    line-height:14px!important;
    padding:4px 8px!important;
  }

  #parent-reinforcement-list{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }

  #parent-reinforcement-list>div{
    width:100%!important;
    min-width:0!important;
    padding:10px!important;
    gap:7px!important;
  }

  #parent-reinforcement-list>div>div:first-child{
    gap:7px!important;
    flex-wrap:wrap!important;
  }

  #parent-reinforcement-list h5{
    font-size:13px!important;
    line-height:18px!important;
  }

  #parent-reinforcement-list>div>p{
    font-size:11px!important;
    line-height:16px!important;
  }

  /* Footer used to be left/right and squeezed "Hoạt động tiếp theo" into a narrow column. */
  #parent-reinforcement-list>div>div:last-child{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:3px!important;
    padding-top:8px!important;
  }

  #parent-reinforcement-list>div>div:last-child>span{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    text-align:left!important;
    font-size:11px!important;
    line-height:16px!important;
  }

  /* Competency card: header and overall status each receive a full line. */
  .parent-analytics-layout{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    gap:8px!important;
  }

  .parent-competency-card{
    padding:11px!important;
    gap:8px!important;
  }

  .parent-competency-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
    padding-bottom:6px!important;
  }

  .parent-competency-head>div:first-child{
    width:100%!important;
    min-width:0!important;
  }

  .parent-competency-head .font-headline-md{
    font-size:18px!important;
    line-height:23px!important;
  }

  .parent-competency-head p{
    font-size:11px!important;
    line-height:16px!important;
  }

  #parent-overall-competency{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    padding:6px 9px!important;
    white-space:normal!important;
    font-size:10.5px!important;
    line-height:15px!important;
  }

  #parent-overall-competency>span:last-child{
    min-width:0!important;
    white-space:normal!important;
  }

  /* Each competency dimension remains full width on a 375px screen. */
  #parent-strands-container{
    display:flex!important;
    flex-direction:column!important;
    gap:6px!important;
  }

  #parent-strands-container>.competency-responsive-card{
    width:100%!important;
    min-width:0!important;
    padding:9px!important;
    gap:6px!important;
  }

  #parent-strands-container .competency-responsive-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:6px!important;
  }

  #parent-strands-container .competency-responsive-title-wrap{
    min-width:0!important;
    flex:1!important;
  }

  #parent-strands-container .competency-responsive-title{
    font-size:12px!important;
    line-height:17px!important;
    white-space:normal!important;
  }

  #parent-strands-container .competency-responsive-badge{
    flex:0 0 auto!important;
    max-width:42%!important;
    white-space:normal!important;
    text-align:center!important;
    font-size:9.5px!important;
    line-height:13px!important;
    padding:3px 6px!important;
  }

  #parent-strands-container .competency-responsive-evidence{
    padding-left:32px!important;
    font-size:10.5px!important;
    line-height:15px!important;
  }

  #parent-strands-container .competency-responsive-progress{
    padding-left:0!important;
  }

  #parent-strands-container .competency-responsive-progress-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:7px!important;
    align-items:center!important;
  }

  #parent-strands-container .competency-responsive-progress-label{
    min-width:58px!important;
    font-size:10px!important;
    line-height:14px!important;
  }

  #parent-strands-container .competency-responsive-meta{
    margin-top:5px!important;
    font-size:10px!important;
    line-height:14px!important;
  }

  /* Secondary insight cards always stack; no side-by-side compression. */
  .parent-insight-column{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:8px!important;
  }

  #parent-diagnostic-container,
  #parent-accompaniment-container,
  .parent-backup-card{
    width:100%!important;
    min-width:0!important;
  }

  /* Metrics remain 2x2, but trim internal whitespace for the short viewport. */
  #parent-metrics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  #parent-metrics-grid>div{
    min-height:108px!important;
    padding:9px!important;
  }

  /* Vietnamese must wrap by words, never one character per line. */
  .parent-mobile-stack,
  .parent-mobile-stack *{
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  .parent-mobile-stack p,
  .parent-mobile-stack h3,
  .parent-mobile-stack h4,
  .parent-mobile-stack h5,
  .parent-mobile-stack span{
    overflow-wrap:break-word!important;
  }
}

/* Medium mobile parent dashboard refinement — 391px to 430px */
@media (min-width:391px) and (max-width:430px) and (orientation:portrait){
  /* Medium phones such as iPhone 16 portrait. Other breakpoints stay untouched. */
  .learning-page-header~main{
    padding-left:7px!important;
    padding-right:7px!important;
    padding-bottom:18px!important;
  }

  .parent-mobile-stack{
    gap:10px!important;
  }

  .parent-family-card,
  .parent-rewards-card,
  #parent-tier-report-card,
  #parent-reinforcement-card,
  .parent-competency-card,
  #parent-diagnostic-container,
  #parent-accompaniment-container,
  .parent-backup-card,
  .parent-history-card{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Reinforcement plan uses a full-width readable flow. */
  #parent-reinforcement-card{
    padding:12px!important;
    gap:10px!important;
  }

  .parent-reinforcement-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:8px!important;
    padding-bottom:10px!important;
  }

  .parent-reinforcement-head>div:first-child{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:36px minmax(0,1fr)!important;
    align-items:start!important;
    gap:9px!important;
  }

  .parent-reinforcement-head>div:first-child>div:first-child{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:10px!important;
    font-size:19px!important;
  }

  .parent-reinforcement-head>div:first-child>div:last-child{
    min-width:0!important;
    width:100%!important;
  }

  .parent-reinforcement-head h4{
    margin:0!important;
    font-size:17px!important;
    line-height:22px!important;
    white-space:normal!important;
  }

  .parent-reinforcement-head p{
    margin-top:3px!important;
    font-size:11.5px!important;
    line-height:16px!important;
  }

  #reinforcement-active-count{
    justify-self:start!important;
    margin-left:45px!important;
    max-width:calc(100% - 45px)!important;
    white-space:normal!important;
    font-size:10.5px!important;
    line-height:14px!important;
    padding:4px 8px!important;
  }

  #parent-reinforcement-list{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }

  #parent-reinforcement-list>div{
    width:100%!important;
    min-width:0!important;
    padding:11px!important;
    gap:8px!important;
  }

  #parent-reinforcement-list>div>div:first-child{
    gap:8px!important;
    flex-wrap:wrap!important;
  }

  #parent-reinforcement-list h5{
    font-size:13.5px!important;
    line-height:18px!important;
  }

  #parent-reinforcement-list>div>p{
    font-size:11px!important;
    line-height:16px!important;
  }

  #parent-reinforcement-list>div>div:last-child{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:3px!important;
    padding-top:8px!important;
  }

  #parent-reinforcement-list>div>div:last-child>span{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    text-align:left!important;
    font-size:11px!important;
    line-height:16px!important;
  }

  /* Competency section gets the full line for title and overall status. */
  .parent-analytics-layout{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    gap:9px!important;
  }

  .parent-competency-card{
    padding:12px!important;
    gap:9px!important;
  }

  .parent-competency-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:7px!important;
    padding-bottom:7px!important;
  }

  .parent-competency-head>div:first-child{
    width:100%!important;
    min-width:0!important;
  }

  .parent-competency-head .font-headline-md{
    font-size:19px!important;
    line-height:24px!important;
  }

  .parent-competency-head p{
    font-size:11.5px!important;
    line-height:16px!important;
  }

  #parent-overall-competency{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    padding:6px 9px!important;
    white-space:normal!important;
    font-size:11px!important;
    line-height:15px!important;
  }

  #parent-overall-competency>span:last-child{
    min-width:0!important;
    white-space:normal!important;
  }

  #parent-strands-container{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }

  #parent-strands-container>.competency-responsive-card{
    width:100%!important;
    min-width:0!important;
    padding:10px!important;
    gap:7px!important;
  }

  #parent-strands-container .competency-responsive-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:7px!important;
  }

  #parent-strands-container .competency-responsive-title-wrap{
    min-width:0!important;
    flex:1!important;
  }

  #parent-strands-container .competency-responsive-title{
    font-size:12.5px!important;
    line-height:17px!important;
    white-space:normal!important;
  }

  #parent-strands-container .competency-responsive-badge{
    flex:0 0 auto!important;
    max-width:40%!important;
    white-space:normal!important;
    text-align:center!important;
    font-size:9.5px!important;
    line-height:13px!important;
    padding:3px 6px!important;
  }

  #parent-strands-container .competency-responsive-evidence{
    padding-left:34px!important;
    font-size:10.5px!important;
    line-height:15px!important;
  }

  #parent-strands-container .competency-responsive-progress{
    padding-left:0!important;
  }

  #parent-strands-container .competency-responsive-progress-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
  }

  #parent-strands-container .competency-responsive-progress-label{
    min-width:62px!important;
    font-size:10px!important;
    line-height:14px!important;
  }

  #parent-strands-container .competency-responsive-meta{
    margin-top:5px!important;
    font-size:10px!important;
    line-height:14px!important;
  }

  /* Insights always stack on medium mobile. */
  .parent-insight-column{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:9px!important;
  }

  #parent-diagnostic-container,
  #parent-accompaniment-container,
  .parent-backup-card{
    width:100%!important;
    min-width:0!important;
  }

  /* Keep useful dashboard density without squeezing text. */
  #parent-metrics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  #parent-metrics-grid>div{
    min-height:112px!important;
    padding:10px!important;
  }

  .parent-mobile-stack,
  .parent-mobile-stack *{
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  .parent-mobile-stack p,
  .parent-mobile-stack h3,
  .parent-mobile-stack h4,
  .parent-mobile-stack h5,
  .parent-mobile-stack span{
    overflow-wrap:break-word!important;
  }
}

/* Large mobile parent dashboard refinement — 431px to 480px */
@media (min-width:431px) and (max-width:480px) and (orientation:portrait){
  /* Large phones such as iPhone 16 Pro Max portrait. */
  .learning-page-header~main{
    padding-left:8px!important;
    padding-right:8px!important;
    padding-bottom:20px!important;
  }

  .parent-mobile-stack{
    gap:11px!important;
  }

  .parent-family-card,
  .parent-rewards-card,
  #parent-tier-report-card,
  #parent-reinforcement-card,
  .parent-competency-card,
  #parent-diagnostic-container,
  #parent-accompaniment-container,
  .parent-backup-card,
  .parent-history-card{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Reinforcement plan gets a clear stacked header and full-width content. */
  #parent-reinforcement-card{
    padding:13px!important;
    gap:11px!important;
  }

  .parent-reinforcement-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:8px!important;
    padding-bottom:10px!important;
  }

  .parent-reinforcement-head>div:first-child{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px!important;
  }

  .parent-reinforcement-head>div:first-child>div:first-child{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:10px!important;
    font-size:20px!important;
  }

  .parent-reinforcement-head>div:first-child>div:last-child{
    min-width:0!important;
    width:100%!important;
  }

  .parent-reinforcement-head h4{
    margin:0!important;
    font-size:18px!important;
    line-height:23px!important;
    white-space:normal!important;
  }

  .parent-reinforcement-head p{
    margin-top:3px!important;
    font-size:12px!important;
    line-height:17px!important;
  }

  #reinforcement-active-count{
    justify-self:start!important;
    margin-left:48px!important;
    max-width:calc(100% - 48px)!important;
    white-space:normal!important;
    font-size:11px!important;
    line-height:15px!important;
    padding:4px 9px!important;
  }

  #parent-reinforcement-list{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }

  #parent-reinforcement-list>div{
    width:100%!important;
    min-width:0!important;
    padding:12px!important;
    gap:8px!important;
  }

  #parent-reinforcement-list>div>div:first-child{
    gap:8px!important;
    flex-wrap:wrap!important;
  }

  #parent-reinforcement-list h5{
    font-size:14px!important;
    line-height:19px!important;
  }

  #parent-reinforcement-list>div>p{
    font-size:11.5px!important;
    line-height:17px!important;
  }

  #parent-reinforcement-list>div>div:last-child{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:3px!important;
    padding-top:9px!important;
  }

  #parent-reinforcement-list>div>div:last-child>span{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    text-align:left!important;
    font-size:11.5px!important;
    line-height:17px!important;
  }

  /* Competency area receives full-width title, status and skill cards. */
  .parent-analytics-layout{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    gap:10px!important;
  }

  .parent-competency-card{
    padding:13px!important;
    gap:10px!important;
  }

  .parent-competency-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
    padding-bottom:7px!important;
  }

  .parent-competency-head>div:first-child{
    width:100%!important;
    min-width:0!important;
  }

  .parent-competency-head .font-headline-md{
    font-size:20px!important;
    line-height:25px!important;
  }

  .parent-competency-head p{
    font-size:12px!important;
    line-height:17px!important;
  }

  #parent-overall-competency{
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:6px!important;
    padding:7px 10px!important;
    white-space:normal!important;
    font-size:11.5px!important;
    line-height:16px!important;
  }

  #parent-overall-competency>span:last-child{
    min-width:0!important;
    white-space:normal!important;
  }

  #parent-strands-container{
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }

  #parent-strands-container>.competency-responsive-card{
    width:100%!important;
    min-width:0!important;
    padding:11px!important;
    gap:7px!important;
  }

  #parent-strands-container .competency-responsive-head{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:8px!important;
  }

  #parent-strands-container .competency-responsive-title-wrap{
    min-width:0!important;
    flex:1!important;
  }

  #parent-strands-container .competency-responsive-title{
    font-size:13px!important;
    line-height:18px!important;
    white-space:normal!important;
  }

  #parent-strands-container .competency-responsive-badge{
    flex:0 0 auto!important;
    max-width:38%!important;
    white-space:normal!important;
    text-align:center!important;
    font-size:10px!important;
    line-height:14px!important;
    padding:4px 7px!important;
  }

  #parent-strands-container .competency-responsive-evidence{
    padding-left:36px!important;
    font-size:11px!important;
    line-height:16px!important;
  }

  #parent-strands-container .competency-responsive-progress{
    padding-left:0!important;
  }

  #parent-strands-container .competency-responsive-progress-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
  }

  #parent-strands-container .competency-responsive-progress-label{
    min-width:64px!important;
    font-size:10.5px!important;
    line-height:14px!important;
  }

  #parent-strands-container .competency-responsive-meta{
    margin-top:5px!important;
    font-size:10.5px!important;
    line-height:15px!important;
  }

  /* Diagnostic, parent tips and backup stay stacked on large phones. */
  .parent-insight-column{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:10px!important;
  }

  #parent-diagnostic-container,
  #parent-accompaniment-container,
  .parent-backup-card{
    width:100%!important;
    min-width:0!important;
  }

  /* Metrics remain 2x2 with a bit more breathing room than medium phones. */
  #parent-metrics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  #parent-metrics-grid>div{
    min-height:116px!important;
    padding:11px!important;
  }

  .parent-mobile-stack,
  .parent-mobile-stack *{
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  .parent-mobile-stack p,
  .parent-mobile-stack h3,
  .parent-mobile-stack h4,
  .parent-mobile-stack h5,
  .parent-mobile-stack span{
    overflow-wrap:break-word!important;
  }
}

/* iPad Mini portrait parent dashboard refinement — 768x1024 only */
@media (width:768px) and (orientation:portrait){
  /* Exact iPad Mini portrait scope: other devices/tabs stay untouched. */
  .learning-page-header~main{
    padding-left:16px!important;
    padding-right:16px!important;
    padding-bottom:26px!important;
  }

  .parent-mobile-stack{
    max-width:none!important;
    gap:14px!important;
  }

  /* Active child + period controls: use two clean rows instead of squeezing md flex. */
  .parent-mobile-profile-bar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:start!important;
    gap:10px!important;
  }

  .parent-mobile-profile-main{
    width:100%!important;
    min-width:0!important;
  }

  .parent-mobile-profile-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:8px!important;
  }

  .parent-mobile-add-child{
    min-height:38px!important;
    white-space:nowrap!important;
  }

  #parent-period-tabs{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
  }

  #parent-period-tabs button{
    min-width:0!important;
    width:100%!important;
    justify-content:center!important;
  }

  /* Family profiles / rewards are comfortable as 2-column tablet grids. */
  #parent-children-cards-container,
  #parent-rewards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  /* Two-tier and four summary metrics become balanced 2-column layouts. */
  .parent-tier-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  #parent-metrics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  #parent-metrics-grid>div{
    min-height:132px!important;
    padding:14px!important;
  }

  /* Main fix from the screenshot: one plan expands to full width; 2+ plans use available space. */
  #parent-reinforcement-card{
    padding:16px!important;
    gap:12px!important;
    border-radius:14px!important;
  }

  .parent-reinforcement-head{
    align-items:flex-start!important;
    gap:10px!important;
    padding-bottom:10px!important;
  }

  .parent-reinforcement-head>div:first-child{
    min-width:0!important;
    flex:1!important;
  }

  .parent-reinforcement-head h4{
    font-size:17px!important;
    line-height:22px!important;
  }

  .parent-reinforcement-head p{
    font-size:11.5px!important;
    line-height:16px!important;
  }

  #reinforcement-active-count{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    font-size:10.5px!important;
    line-height:14px!important;
  }

  #parent-reinforcement-list{
    display:grid!important;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr))!important;
    gap:10px!important;
  }

  #parent-reinforcement-list>div{
    min-width:0!important;
    width:100%!important;
    padding:13px!important;
    border-radius:11px!important;
    gap:8px!important;
  }

  #parent-reinforcement-list h5{
    font-size:13px!important;
    line-height:18px!important;
  }

  #parent-reinforcement-list p,
  #parent-reinforcement-list span{
    font-size:11px!important;
    line-height:16px!important;
  }

  #parent-reinforcement-list>div>div:last-child{
    gap:8px!important;
    flex-wrap:wrap!important;
  }

  /* Competency is the primary report: give it the complete tablet width. */
  .parent-analytics-layout{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    gap:14px!important;
  }

  .parent-competency-card{
    width:100%!important;
    min-width:0!important;
    padding:16px!important;
    border-radius:14px!important;
    gap:12px!important;
  }

  .parent-competency-head{
    gap:10px!important;
  }

  .parent-competency-head .font-headline-md{
    font-size:21px!important;
    line-height:27px!important;
  }

  .parent-competency-head p{
    font-size:11.5px!important;
    line-height:16px!important;
  }

  #parent-overall-competency{
    flex:0 0 auto!important;
    max-width:48%!important;
    white-space:normal!important;
    text-align:left!important;
  }

  #parent-strands-container{
    display:flex!important;
    flex-direction:column!important;
    gap:8px!important;
  }

  #parent-strands-container>.competency-responsive-card{
    width:100%!important;
    min-width:0!important;
    padding:12px!important;
    border-radius:11px!important;
  }

  #parent-strands-container .competency-responsive-title{
    font-size:12.5px!important;
    line-height:17px!important;
    white-space:normal!important;
  }

  #parent-strands-container .competency-responsive-evidence{
    font-size:11px!important;
    line-height:16px!important;
  }

  #parent-strands-container .competency-responsive-meta{
    font-size:10.5px!important;
    line-height:15px!important;
  }

  .parent-chart-section{
    margin-top:10px!important;
    padding-top:10px!important;
  }

  #parent-chart-container{
    height:180px!important;
  }

  /* Diagnostic + parent actions share one row; backup remains full-width below. */
  .parent-insight-column{
    width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  #parent-diagnostic-container,
  #parent-accompaniment-container{
    width:100%!important;
    min-width:0!important;
    padding:14px!important;
    border-radius:12px!important;
  }

  .parent-backup-card{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    padding:14px!important;
    border-radius:12px!important;
  }

  /* Keep Vietnamese text wrapping by words, never character-by-character. */
  .parent-mobile-stack,
  .parent-mobile-stack *{
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  .parent-mobile-stack p,
  .parent-mobile-stack h3,
  .parent-mobile-stack h4,
  .parent-mobile-stack h5,
  .parent-mobile-stack span{
    overflow-wrap:break-word!important;
  }
}