/* =========================================================
   TÚN & LÔ PREMIUM UI v4
   Mục tiêu: giao diện gần mẫu minh họa — trắng/pastel, bóng kính,
   icon 3D, card nổi, khoảng thở thoáng và chữ rõ hơn.
   ========================================================= */
:root{
  --p-ink:#263451;
  --p-muted:#77839a;
  --p-purple:#7255e8;
  --p-purple-2:#9d7cf7;
  --p-pink:#ff648f;
  --p-blue:#4f80f5;
  --p-cyan:#65d8e8;
  --p-gold:#ffbf36;
  --p-shadow:0 18px 45px rgba(76,64,127,.12),0 4px 12px rgba(76,64,127,.06);
  --p-shadow-soft:0 10px 24px rgba(76,64,127,.09),0 2px 6px rgba(76,64,127,.05);
  --p-inner:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(104,90,160,.05);
}

body.glossy-body{
  color:var(--p-ink);
  background:
    radial-gradient(circle at 11px 11px,rgba(124,115,201,.11) 1.2px,transparent 1.4px) 0 0/24px 24px,
    linear-gradient(180deg,#fcfcff 0%,#f7f8ff 100%);
}

/* ===== Shell ===== */
.glossy-shell{grid-template-columns:176px minmax(0,1fr)!important}
.glossy-sidebar{
  padding:15px 10px 14px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,249,255,.96))!important;
  border-right:1px solid #ece9f7!important;
  box-shadow:12px 0 34px rgba(91,78,149,.07)!important;
}
.family-logo{padding:2px 5px 18px;gap:8px}
.family-logo-faces{width:48px;height:38px;filter:drop-shadow(0 5px 8px rgba(89,73,133,.14))}
.family-logo-faces img{width:31px;height:31px;border-width:2px}
.family-logo>div:last-child strong{font-size:1.05rem}
.family-logo>div:last-child small{font-size:.56rem}
.glossy-nav{gap:8px!important}
.glossy-nav .side-link{
  min-height:46px;padding:10px 12px!important;border-radius:15px!important;
  color:#55627d!important;font-size:.82rem!important;
}
.glossy-nav .side-link span:first-child{width:27px;font-size:1.27rem!important;filter:drop-shadow(0 4px 5px rgba(70,60,110,.14))}
.glossy-nav .side-link:hover,.glossy-nav .side-link.active{
  background:linear-gradient(145deg,#fff,#f1ecff)!important;
  color:#6844db!important;
  box-shadow:0 9px 18px rgba(94,75,166,.12),inset 0 0 0 1px #dfd4ff,inset 0 1px 0 #fff!important;
  transform:translateY(-1px)
}
.bunny-note{border-radius:22px!important;background:linear-gradient(180deg,#fff9fc,#fff)!important;border:1px solid #f2dfe9!important;box-shadow:var(--p-shadow-soft)!important;padding:12px 8px!important}
.bunny-face{font-size:3.8rem!important;filter:drop-shadow(0 9px 8px rgba(114,86,132,.15))}
.logout-link{border:1px solid #ffd8e2!important;background:linear-gradient(145deg,#fff,#fff4f7)!important;color:#e84a73!important}

.glossy-topbar{
  height:66px!important;padding:9px 18px!important;
  background:rgba(255,255,255,.92)!important;
  border-bottom:1px solid rgba(231,228,242,.95)!important;
  box-shadow:0 6px 22px rgba(75,66,119,.04)!important;
}
.top-links{gap:7px!important}
.top-link{font-size:.78rem!important;padding:9px 12px!important;border-radius:13px!important;color:#4e5e7b!important}
.top-link.active,.top-link:hover{background:linear-gradient(145deg,#f0ebff,#fff)!important;color:#6a46dd!important;box-shadow:0 6px 13px rgba(103,80,180,.10),inset 0 0 0 1px #e3d8ff!important}
.gem-pill{padding:8px 13px!important;border-radius:14px!important;background:linear-gradient(145deg,#fff,#f3efff)!important;border:1px solid #e4dafd!important;box-shadow:0 7px 16px rgba(104,83,177,.10)!important;color:#6c4ad8!important;font-size:.76rem!important}
.glossy-chip{background:linear-gradient(145deg,#fff,#faf8ff)!important;border:1px solid #e7e3f0!important;box-shadow:var(--p-shadow-soft)!important}
.avatar-img{box-shadow:0 5px 12px rgba(81,66,120,.18),inset 0 0 0 2px #fff}

.glossy-main{padding:14px 16px 28px!important;max-width:1640px!important}
.pro-layout{grid-template-columns:minmax(0,1fr) 292px!important;gap:14px!important}
.pro-main,.pro-side{gap:13px!important}
.glossy-panel{
  border-radius:21px!important;
  border:1px solid rgba(222,218,238,.95)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(251,250,255,.98))!important;
  box-shadow:var(--p-shadow)!important;
}
.glossy-panel:after{height:34%!important;opacity:.72}

/* ===== Hero banner ===== */
.family-hero{
  height:248px!important;
  grid-template-columns:225px minmax(0,1fr) 215px!important;
  padding:0 20px!important;
  border:4px solid #fff!important;
  border-radius:27px!important;
  background:
    radial-gradient(circle at 8% 16%,rgba(255,255,255,.9) 0 12px,transparent 13px),
    radial-gradient(circle at 92% 18%,rgba(255,255,255,.85) 0 10px,transparent 11px),
    radial-gradient(circle at 15% 92%,rgba(255,255,255,.75) 0 50px,transparent 51px),
    radial-gradient(circle at 88% 92%,rgba(255,255,255,.72) 0 58px,transparent 59px),
    linear-gradient(115deg,#c7f4f3 0%,#ddecff 33%,#eee3ff 58%,#ffdce9 100%)!important;
  box-shadow:0 18px 40px rgba(90,78,150,.13),0 4px 0 rgba(105,89,157,.05),inset 0 1px 0 #fff!important;
}
.family-hero:before{
  opacity:.72!important;background-size:48px 46px!important;
  background-image:radial-gradient(rgba(255,255,255,.95) 2px,transparent 2.5px)!important;
}
.family-hero:after{
  content:""!important;position:absolute!important;left:6%!important;right:6%!important;top:10px!important;height:44%!important;
  border-radius:50%!important;background:linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,0))!important;
  pointer-events:none!important;
}
.hero-girl{
  width:205px!important;height:205px!important;border-radius:50%!important;
  border:7px solid rgba(255,255,255,.94)!important;
  box-shadow:0 14px 30px rgba(73,60,118,.16),0 0 0 2px rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.9)!important;
  object-fit:cover!important;object-position:center 30%!important;
  filter:saturate(1.04) drop-shadow(0 10px 12px rgba(73,60,118,.12))!important;
}
.hero-tun{transform:rotate(-2deg)}
.hero-lo{transform:rotate(2deg)}
.hero-copy{padding-top:3px}
.hero-kicker{
  font-size:.65rem!important;padding:5px 12px!important;background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(255,255,255,.95)!important;box-shadow:0 6px 15px rgba(80,67,125,.08)!important;
}
.hero-copy h1{line-height:.88!important;margin:8px 0 4px!important;filter:drop-shadow(0 7px 0 rgba(255,255,255,.88))!important}
.hero-copy h1 span{font-size:3.18rem!important;color:#4389ef!important;-webkit-text-stroke:2px #fff!important;text-shadow:0 5px 0 rgba(70,116,214,.08)}
.hero-copy h1 strong{font-size:3.25rem!important;-webkit-text-stroke:2px rgba(255,255,255,.78)!important;background:linear-gradient(90deg,#ff5d9b 0%,#fd799e 28%,#9b65ef 62%,#ff9b43 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.hero-sub{font-size:.76rem!important;padding:7px 16px!important;background:rgba(255,255,255,.86)!important;border:1px solid rgba(255,255,255,.95)!important;box-shadow:0 7px 16px rgba(80,66,124,.09)!important}
.hero-copy p{font-size:.72rem!important;color:#63557e!important;letter-spacing:.02em}
.float-deco{filter:drop-shadow(0 7px 7px rgba(77,64,113,.17))!important}
.d1{left:22%!important;top:25px!important}.d2{left:5.5%!important;top:25px!important}.d3{right:21%!important;top:28px!important}.d4{right:5.8%!important;top:38px!important}

/* ===== Sister cards ===== */
.sister-cards{gap:13px!important}
.sister-card{
  min-height:138px!important;padding:14px 15px!important;
  grid-template-columns:96px minmax(0,1fr) auto!important;
  align-items:center!important;
  background:linear-gradient(145deg,#fff 0%,var(--sister-soft) 180%)!important;
  box-shadow:0 14px 30px color-mix(in srgb,var(--sister) 12%,transparent),inset 0 1px 0 #fff!important;
}
.sister-card:before{content:"";position:absolute;right:-25px;bottom:-45px;width:150px;height:150px;border-radius:50%;background:var(--sister-soft);opacity:.5}
.sister-card>img{width:86px!important;height:86px!important;border-radius:50%!important;border:5px solid #fff!important;box-shadow:0 10px 20px color-mix(in srgb,var(--sister) 18%,transparent)!important;object-position:center 30%!important}
.sister-title h2{font-size:1.27rem!important}.sister-title span{font-size:.62rem!important;padding:5px 9px!important;box-shadow:0 5px 10px color-mix(in srgb,var(--sister) 20%,transparent)}
.sister-info>small{font-size:.68rem!important;color:#6d7891!important}
.sister-stats{gap:7px!important;margin:9px 0 8px!important}
.sister-stats span{padding:6px 8px!important;font-size:.61rem!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(229,225,239,.9)!important;box-shadow:0 4px 10px rgba(74,64,109,.05)!important}
.sister-stats b{font-size:.77rem!important;color:var(--sister)!important}
.glossy-progress{height:9px!important;background:#edf0f7!important;box-shadow:inset 0 1px 2px rgba(62,56,88,.08)}
.mini-go{font-size:.67rem!important;padding:9px 12px!important;border-radius:13px!important;box-shadow:0 8px 16px color-mix(in srgb,var(--sister) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.45)!important;position:relative;z-index:2}

/* ===== Subjects: bigger glossy icon cards ===== */
.subject-strip{padding:13px!important}
.strip-head{margin:0 1px 11px!important}
.strip-head h2{font-size:1.12rem!important;color:#5440bd!important}.strip-head h2 span{font-size:.61rem!important;padding:5px 9px!important}
.strip-head small{font-size:.68rem!important;color:#8490a6!important}
.glossy-subject-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important}
.glossy-subject{
  position:relative!important;z-index:1!important;isolation:isolate!important;
  display:grid!important;grid-template-columns:70px minmax(0,1fr)!important;grid-template-rows:auto auto!important;
  align-items:center!important;column-gap:9px!important;padding:8px!important;text-align:left!important;min-height:88px!important;
  border-radius:18px!important;background:linear-gradient(145deg,#fff 0%,#fbfaff 72%,#f2efff 100%)!important;
  border:1px solid #e4e0f1!important;
  box-shadow:0 9px 18px rgba(72,62,118,.08),0 2px 4px rgba(72,62,118,.04),inset 0 1px 0 #fff!important;
  overflow:hidden!important;
}
.glossy-subject:before{content:"";position:absolute;z-index:1;left:4px;right:4px;top:3px;height:35%;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.85),transparent);pointer-events:none}

.glossy-subject > .subject-art-wrap,.glossy-subject > strong,.glossy-subject > small{position:relative!important;z-index:2!important}
.glossy-subject:hover{transform:translateY(-4px) scale(1.012)!important;box-shadow:0 16px 28px rgba(72,62,118,.14),0 3px 7px rgba(72,62,118,.06),inset 0 1px 0 #fff!important}
.subject-art-wrap{
  grid-row:1/3!important;width:70px!important;height:70px!important;margin:0!important;border-radius:17px!important;
  background:linear-gradient(145deg,#fff,#f3f0ff)!important;
  box-shadow:0 8px 16px rgba(72,62,118,.10),inset 0 2px 0 rgba(255,255,255,.9)!important;
  border:1px solid #e9e5f5!important;
}
.subject-art-wrap img{object-fit:cover!important;transform:scale(1.08);filter:saturate(1.08) contrast(1.02)}
.subject-art-wrap:after{left:9%!important;right:9%!important;top:5px!important;height:30%!important;background:linear-gradient(180deg,rgba(255,255,255,.85),transparent)!important}
.glossy-subject strong{font-size:.71rem!important;line-height:1.18!important;min-height:auto!important;color:#35435e!important;align-self:end!important}
.glossy-subject small{font-size:.55rem!important;margin-top:3px!important;align-self:start!important;color:#ff752d!important}

/* ===== Rewards & stat tiles ===== */
.reward-zone{padding:13px!important;background:linear-gradient(135deg,#fffaf0,#fff 48%,#fff5f8)!important}
.glossy-badges{gap:9px!important}
.glossy-badge{min-height:115px!important;padding:10px 7px!important;background:linear-gradient(145deg,#fff,#fffaf5)!important;border:1px solid #f0e5d7!important;box-shadow:0 9px 17px rgba(119,82,39,.08),inset 0 1px 0 #fff!important}
.glossy-badge>div{width:58px!important;height:58px!important;font-size:2rem!important;box-shadow:0 9px 15px rgba(198,126,51,.18),inset 0 3px 5px rgba(255,255,255,.8)!important}
.glossy-badge strong{font-size:.67rem!important}.glossy-badge small{font-size:.55rem!important}
.stat-ribbon{gap:10px!important}.stat-tile{min-height:80px!important;padding:11px 12px!important;border-radius:18px!important;box-shadow:0 10px 20px rgba(66,60,108,.08),inset 0 1px 0 #fff!important}.stat-tile>span{font-size:2.2rem!important}.stat-tile small{font-size:.57rem!important}.stat-tile strong{font-size:1.35rem!important}

/* ===== Right side ===== */
.side-gloss{padding:13px!important}
.side-title h2{font-size:1.01rem!important;color:#49397e!important}.side-title>a{font-size:.58rem!important}
.task-row{padding:10px 3px!important}.task-check{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#f0fbf3;color:#43b567;font-size:.95rem!important;border:1px solid #cef0d8}.task-row strong{font-size:.68rem!important}.task-row small{font-size:.58rem!important}
.family-progress-row{grid-template-columns:1fr 84px 34px!important;margin:11px 0!important}.family-progress-row b{font-size:.61rem!important}.family-progress-row strong{font-size:.6rem!important}
.science-quick{background:linear-gradient(160deg,#8a6dea 0,#7357df 19%,#fff 19.3%,#fff 100%)!important;box-shadow:0 16px 34px rgba(101,77,187,.16),inset 0 1px 0 rgba(255,255,255,.85)!important}
.science-head{height:58px!important;padding:0 13px!important}.science-head strong{font-size:.98rem!important}.science-head a{font-size:.55rem!important}.science-tabs{margin:0 9px 7px!important}.science-list{max-height:390px!important;padding:0 9px 6px!important}.science-row{padding:7px 2px!important}.science-row strong{font-size:.59rem!important}.science-row small{font-size:.46rem!important}.science-action{box-shadow:0 4px 8px rgba(74,64,109,.08)}
.science-go{font-size:.65rem!important;border-radius:11px!important;box-shadow:0 8px 15px rgba(104,77,189,.24),inset 0 1px 0 rgba(255,255,255,.25)!important}

/* family mini ranking */
.family-ranking .rank-row{display:grid;grid-template-columns:26px 36px 1fr auto;align-items:center;gap:7px;padding:8px 2px;border-bottom:1px solid #efedf5;position:relative;z-index:2}
.family-ranking .rank-row:last-child{border-bottom:0}.rank-no{width:24px;height:24px;border-radius:9px;display:grid;place-items:center;font-size:.58rem;font-weight:1000;background:linear-gradient(145deg,#fff8d5,#ffd76a);color:#b57900;box-shadow:0 4px 9px rgba(181,121,0,.12)}
.family-ranking .rank-row:nth-of-type(3) .rank-no{background:linear-gradient(145deg,#eef1f7,#d9deea);color:#667085}.family-ranking img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 5px 10px rgba(77,65,114,.12)}.family-ranking b{font-size:.67rem;display:block}.family-ranking small{font-size:.53rem;color:#8892a7}.rank-score{font-size:.62rem;font-weight:1000;color:#7052d7}

/* ===== Landing page ===== */
.glossy-landing{padding:13px 18px 32px!important}
.login-hero{max-width:1120px!important;margin-bottom:20px!important;height:260px!important}
.glossy-profile-grid{max-width:960px!important;gap:20px!important}
.glossy-profile{padding:22px!important;border-width:2px!important;box-shadow:0 18px 38px rgba(69,61,107,.11),0 3px 8px rgba(69,61,107,.05),inset 0 1px 0 #fff!important}
.profile-photo{width:105px!important;height:105px!important;box-shadow:0 13px 25px color-mix(in srgb,var(--accent) 23%,transparent)!important}.glossy-profile h2{font-size:1.75rem!important}.glossy-profile .btn{box-shadow:0 9px 18px color-mix(in srgb,var(--accent) 26%,transparent),inset 0 1px 0 rgba(255,255,255,.3)!important}

/* ===== Course catalog ===== */
.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}.catalog-card{border-radius:21px!important;box-shadow:0 14px 30px rgba(69,61,107,.10),0 3px 7px rgba(69,61,107,.04),inset 0 1px 0 #fff!important}.catalog-cover{height:178px!important}.catalog-body{padding:14px 15px 16px!important}.catalog-body strong{font-size:.9rem!important}.catalog-body p{font-size:.68rem!important}.catalog-count{font-size:.65rem!important}

@media(max-width:1380px){
  .glossy-subject-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .family-hero{grid-template-columns:185px minmax(0,1fr) 180px!important}.hero-girl{width:172px!important;height:172px!important}.hero-copy h1 span,.hero-copy h1 strong{font-size:2.65rem!important}
  .pro-layout{grid-template-columns:minmax(0,1fr) 278px!important}
}
@media(max-width:1120px){
  .pro-layout{grid-template-columns:1fr!important}.pro-side{display:grid!important;grid-template-columns:1fr 1fr!important}.science-quick{grid-row:span 2}.family-ranking{display:block}.glossy-subject-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .glossy-shell{grid-template-columns:1fr!important}.glossy-sidebar{display:none!important}.pro-side{grid-template-columns:1fr!important}.science-quick{grid-row:auto}.family-hero{height:210px!important;grid-template-columns:120px minmax(0,1fr) 110px!important}.hero-girl{width:112px!important;height:112px!important}.hero-copy h1 span,.hero-copy h1 strong{font-size:2.05rem!important}.glossy-subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:620px){
  .family-hero{height:188px!important;grid-template-columns:76px minmax(0,1fr) 72px!important;padding:0 8px!important}.hero-girl{width:74px!important;height:74px!important;border-width:4px!important}.hero-copy h1 span,.hero-copy h1 strong{font-size:1.45rem!important;-webkit-text-stroke:1px #fff!important}.hero-sub{font-size:.5rem!important;padding:4px 7px!important}.sister-card{grid-template-columns:66px minmax(0,1fr)!important}.sister-card>img{width:62px!important;height:62px!important}.glossy-subject-grid{grid-template-columns:1fr!important}.glossy-subject{grid-template-columns:64px 1fr!important}.subject-art-wrap{width:64px!important;height:64px!important}.catalog-grid{grid-template-columns:1fr!important}.login-hero{height:190px!important}
}

/* ===== Continue learning strip ===== */
.continue-strip{padding:13px!important;background:linear-gradient(145deg,#fff 0%,#fbfbff 55%,#fff8fb 100%)!important}
.continue-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;position:relative;z-index:2}
.continue-card{position:relative;display:grid;grid-template-columns:62px 1fr;gap:9px;align-items:center;min-height:112px;padding:10px;border-radius:18px;border:1px solid #e5e2f0;background:linear-gradient(145deg,#fff,#f8f7ff);box-shadow:0 9px 19px rgba(71,61,111,.08),inset 0 1px 0 #fff;overflow:hidden;transition:.22s}
.continue-card:after{content:"";position:absolute;inset:4px 8px auto;height:36%;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.75),transparent);pointer-events:none}.continue-card:hover{transform:translateY(-4px);box-shadow:0 15px 28px rgba(71,61,111,.14),inset 0 1px 0 #fff}
.continue-art{width:62px;height:62px;border-radius:17px;overflow:hidden;box-shadow:0 7px 14px rgba(68,57,105,.10);border:1px solid #e6e2f2}.continue-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}.continue-copy{min-width:0;position:relative;z-index:2}.continue-copy span{display:block;font-size:.68rem;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.continue-copy strong{display:block;font-size:.57rem;color:#6d7890;margin:2px 0}.continue-copy small{font-size:.51rem;color:#9aa2b2}.continue-progress{height:5px;background:#eceef5;border-radius:999px;margin-top:6px;overflow:hidden}.continue-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#6e56e7,#a68cff)}.continue-card>b{grid-column:1/-1;font-size:.56rem;color:#6c50d7;margin-top:-2px}.cc2 .continue-progress i{background:linear-gradient(90deg,#ff668e,#ff98b3)}.cc3 .continue-progress i{background:linear-gradient(90deg,#4baedc,#73d4ea)}.cc4 .continue-progress i{background:linear-gradient(90deg,#62bd70,#95dd9f)}
@media(max-width:1200px){.continue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.continue-grid{grid-template-columns:1fr}}

/* Hero dùng ảnh minh họa hoàn thiện để đạt độ bóng/đẹp đúng mockup */
.premium-banner{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  background:linear-gradient(135deg,#eefaff,#fff1f8)!important;
  border:4px solid rgba(255,255,255,.98)!important;
  border-radius:28px!important;
  overflow:hidden!important;
  box-shadow:0 16px 34px rgba(94,77,157,.12),0 4px 10px rgba(94,77,157,.06),inset 0 1px 0 rgba(255,255,255,.95)!important;
}
.premium-banner:before,.premium-banner:after{display:none!important}
.premium-banner>.hero-banner-img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:23px!important;
}
.premium-banner>:not(.hero-banner-img){display:none!important}
.login-hero.premium-banner{height:auto!important;min-height:0!important}
@media(max-width:620px){
  .premium-banner{border-width:3px!important;border-radius:22px!important}
  .premium-banner>.hero-banner-img{width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;border-radius:18px!important}
}

/* V5 reward milestones */
.family-gift-title{margin:14px 2px 8px;font-family:'Baloo 2';font-weight:800;color:#6d50c8}.family-gifts{display:grid;gap:8px}.family-gift{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;background:linear-gradient(145deg,#fff,#fbfaff);border:1px solid #eee9f9;box-shadow:0 7px 14px rgba(66,55,108,.06)}.family-gift.unlocked{background:linear-gradient(145deg,#fff9df,#fff);border-color:#ffe19b}.family-gift.received{background:linear-gradient(145deg,#eaf9ef,#fff);border-color:#ccefd7}.gift-icon{font-size:2rem;filter:drop-shadow(0 5px 7px rgba(255,177,43,.18))}.gift-copy strong{display:block;color:#4c5570}.gift-copy small{display:block;color:#8c95a8;font-size:.68rem;margin-top:2px}.gift-progress{height:6px;border-radius:999px;background:#eef0f5;overflow:hidden;margin-top:6px}.gift-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#8f69f4,#ff79a8)}.family-gift>b{font-size:.7rem;color:#7458c8;white-space:nowrap}.family-gift.unlocked>b{color:#c28310}.family-gift.received>b{color:#30915a}@media(max-width:620px){.family-gift{grid-template-columns:40px 1fr}.family-gift>b{grid-column:2;justify-self:start}}
.gift-unlock-alert{display:grid;grid-template-columns:46px 1fr auto;gap:10px;align-items:center;padding:11px 14px;margin-bottom:10px;border-radius:18px;background:linear-gradient(115deg,#fff8d7,#fff,#ffeaf2);border:1px solid #ffe09a;box-shadow:0 10px 24px rgba(182,126,21,.10)}.gift-unlock-alert>span{font-size:2rem;animation:floating 2s ease-in-out infinite}.gift-unlock-alert strong{display:block;color:#9b6611}.gift-unlock-alert small{display:block;color:#8d8491;margin-top:2px}.gift-unlock-alert a{font-weight:900;color:#8a5ac7}@media(max-width:620px){.gift-unlock-alert{grid-template-columns:40px 1fr}.gift-unlock-alert a{grid-column:2}}


/* V5.1 - Mascot images & polished avatar selector */
.mascot-note{overflow:hidden;position:relative;padding:10px 8px 12px!important}
.mascot-pair{height:92px;position:relative;margin:-4px auto 8px;max-width:150px}
.mascot-photo{position:absolute;width:82px;height:82px;object-fit:cover;border-radius:25px;border:3px solid rgba(255,255,255,.95);box-shadow:0 10px 22px rgba(93,70,150,.16),inset 0 1px 0 #fff;background:#fff;transition:transform .2s ease,box-shadow .2s ease}
.mascot-rabbit{left:3px;top:3px;transform:rotate(-5deg)}
.mascot-cat{right:3px;top:8px;transform:rotate(5deg)}
.mascot-note:hover .mascot-rabbit{transform:translateY(-3px) rotate(-7deg)}
.mascot-note:hover .mascot-cat{transform:translateY(-3px) rotate(7deg)}
.mascot-note strong{font-size:.77rem;line-height:1.35;color:#555f7b}

.avatar-modal-box{width:min(620px,100%)!important;padding:28px 28px 30px!important}
.modal-avatar-photo{display:flex;justify-content:center;margin:-4px 0 7px}
.modal-avatar-photo img{width:94px;height:94px;object-fit:cover;border-radius:30px;border:4px solid #fff;box-shadow:0 14px 30px rgba(96,76,154,.18),0 0 0 2px var(--modal-soft,#eee);background:#fff}
.avatar-image-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px}
.avatar-image-choice{border:1px solid #e8e3f2;border-radius:22px;background:linear-gradient(155deg,#fff,#fbf8ff);padding:10px 10px 13px;box-shadow:0 9px 20px rgba(73,62,118,.08),inset 0 1px 0 #fff;cursor:pointer;text-align:center;transition:.2s ease;color:#4d5871}
.avatar-image-choice:hover{transform:translateY(-4px);border-color:#cfc0ff;box-shadow:0 15px 28px rgba(91,70,145,.13),inset 0 1px 0 #fff}
.avatar-image-choice.selected{border-color:#a98cff;box-shadow:0 0 0 3px rgba(157,124,255,.12),0 14px 28px rgba(92,70,145,.14);background:linear-gradient(155deg,#fff,#f4efff)}
.avatar-choice-frame{display:block;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:linear-gradient(145deg,#f4efff,#fff5fa);box-shadow:inset 0 1px 0 #fff,0 7px 16px rgba(77,64,121,.08);margin-bottom:9px}
.avatar-choice-frame img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-image-choice strong{display:block;font-family:'Baloo 2',sans-serif;font-size:1rem;color:#4e3d7d;line-height:1.2}
.avatar-image-choice small{display:block;margin-top:3px;color:#9098ac;font-weight:700;font-size:.72rem}

@media(max-width:650px){
  .avatar-image-grid{grid-template-columns:1fr 1fr}
  .avatar-image-choice:first-child{grid-column:1/-1}
  .mascot-pair{height:82px}.mascot-photo{width:72px;height:72px}
}

/* V6 - Tài liệu bài học */
.student-lesson-pill{display:inline-flex!important;align-items:center;gap:7px}.student-lesson-pill img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.9);box-shadow:0 4px 10px rgba(83,63,137,.15)}
.lesson-materials{max-width:1180px;margin:14px auto 34px;padding:20px;border-radius:25px;background:linear-gradient(145deg,#fff,#fbfaff);border:1px solid #ece8f7;box-shadow:0 14px 34px rgba(70,57,111,.08)}
.lesson-materials-head{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:14px}.lesson-materials-head h2{margin:7px 0 2px;font-family:'Baloo 2',sans-serif;color:#4c5570}.lesson-materials-head p{margin:0;color:#9299aa;font-size:.8rem;font-weight:700}
.material-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.material-card{display:grid;grid-template-columns:48px 1fr 24px;gap:11px;align-items:center;padding:12px 14px;border-radius:17px;background:linear-gradient(145deg,#fff,#faf9ff);border:1px solid #e9e5f5;box-shadow:0 7px 15px rgba(70,57,111,.06);color:#4b536d;text-decoration:none;transition:.18s ease}.material-card:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(70,57,111,.10);border-color:#d8cdf8}.material-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:1.35rem;background:linear-gradient(145deg,#f5efff,#fff);box-shadow:inset 0 1px 0 #fff,0 5px 12px rgba(115,82,191,.10)}.material-card strong{display:block;font-size:.88rem}.material-card small{display:block;margin-top:3px;color:#9299aa;font-size:.68rem}.material-card>b{color:#8d6bed;font-size:1rem}
.mini-admin-link{display:inline-flex;align-items:center;gap:3px;padding:5px 8px;border-radius:9px;background:#f6f2ff;color:#7457d6;font-weight:900;text-decoration:none;border:1px solid #ece5ff}.mini-admin-link:hover{background:#eee7ff}
@media(max-width:760px){.material-grid{grid-template-columns:1fr}.lesson-materials{margin:10px 10px 25px}.lesson-materials-head{align-items:flex-start;flex-direction:column}}

/* ===== V6.2 subject icon packs ===== */
.subject-art-wrap{background:linear-gradient(145deg,#fff,#f8f6ff)!important;overflow:visible!important}
.subject-art-wrap img{width:100%!important;height:100%!important;object-fit:contain!important;transform:none!important;filter:drop-shadow(0 7px 8px rgba(69,61,107,.12)) saturate(1.08)!important}
.subject-art-wrap:after{display:none!important}
.glossy-subject:hover .subject-art-wrap img{transform:translateY(-2px) scale(1.04)!important;filter:drop-shadow(0 11px 10px rgba(69,61,107,.18)) saturate(1.12)!important;transition:.22s ease}
.icon-theme-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.icon-theme-choice{display:block;padding:16px;border:2px solid #ece8f7;border-radius:22px;background:linear-gradient(145deg,#fff,#faf9ff);cursor:pointer;box-shadow:0 10px 24px rgba(77,63,125,.07)}.icon-theme-choice.selected{border-color:#9a7cff;box-shadow:0 12px 30px rgba(130,92,255,.16),inset 0 1px 0 #fff}.icon-theme-choice>input{margin-bottom:10px}.icon-theme-choice>strong{display:block;font-size:1rem;color:#473c76;margin:8px 0 3px}.icon-theme-choice>small{color:#7d8599;line-height:1.45}.icon-preview-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.icon-preview-row img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:16px}.icon-path-note{margin-top:18px;padding:12px 14px;border-radius:14px;background:#f7f5ff;color:#655d85;font-size:.82rem}.icon-path-note code{background:#fff;padding:3px 6px;border-radius:7px}@media(max-width:820px){.icon-theme-grid{grid-template-columns:1fr}.icon-preview-row{grid-template-columns:repeat(3,1fr)}}

/* V7.0 - 20 glossy animal avatars */
.avatar-modal-box{width:min(860px,calc(100vw - 28px))!important;max-height:min(88vh,820px);overflow:auto}
.avatar-image-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.avatar-image-choice{padding:9px 9px 11px;border-radius:20px}
.avatar-choice-frame{border-radius:17px}
.avatar-choice-frame img{object-fit:cover;transition:transform .2s ease,filter .2s ease}
.avatar-image-choice:hover .avatar-choice-frame img{transform:scale(1.045);filter:saturate(1.05)}
.avatar-image-choice.selected:after{content:'✓';position:absolute;top:7px;right:7px;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#7655d9;color:#fff;font-weight:1000;border:2px solid #fff;box-shadow:0 5px 12px rgba(77,56,138,.22)}
.avatar-image-choice{position:relative}
@media(max-width:820px){.avatar-image-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:620px){.avatar-image-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.avatar-image-choice:first-child{grid-column:auto}.avatar-modal-box{padding:20px 16px 22px!important}}
@media(max-width:430px){.avatar-image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* V8.0 - keep old avatars + add 20 glossy new avatars */
.avatar-modal-box{width:min(980px,calc(100vw - 24px))!important;max-height:min(90vh,860px);overflow:auto}
.avatar-section-block{margin-top:14px;padding-top:12px;border-top:1px dashed #e8ddff}
.avatar-section-block:first-of-type{margin-top:6px;padding-top:0;border-top:0}
.avatar-group-title{display:inline-flex;align-items:center;gap:8px;margin:2px 0 12px;padding:8px 14px;border-radius:999px;background:linear-gradient(135deg,#f5efff,#eef7ff);border:1px solid #e4dafd;color:#5f46b4;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.05rem;box-shadow:0 8px 18px rgba(106,84,170,.08)}
.avatar-image-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.avatar-grid-small{grid-template-columns:repeat(3,minmax(0,1fr))}
.avatar-image-choice{padding:10px 10px 12px;border-radius:22px;position:relative;border:1px solid #e9e2f7;background:linear-gradient(180deg,#ffffff,#fcfaff);box-shadow:0 12px 24px rgba(82,64,135,.07),inset 0 1px 0 #fff;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.avatar-image-choice:hover{transform:translateY(-4px);border-color:#c8b6ff;box-shadow:0 16px 28px rgba(82,64,135,.12),inset 0 1px 0 #fff}
.avatar-image-choice.selected{border-color:#9e80ff;background:linear-gradient(180deg,#fff,#f6f1ff);box-shadow:0 0 0 4px rgba(144,110,255,.10),0 16px 30px rgba(82,64,135,.16)}
.avatar-image-choice.selected:after{content:'✓';position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#7655d9;color:#fff;font-size:.95rem;font-weight:1000;border:2px solid #fff;box-shadow:0 6px 14px rgba(77,56,138,.22)}
.avatar-choice-frame{display:block;aspect-ratio:1/1;border-radius:20px;overflow:hidden;background:linear-gradient(145deg,#f6f0ff,#fff7fb);box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(77,64,121,.08);margin-bottom:9px}
.avatar-choice-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease, filter .2s ease}
.avatar-image-choice:hover .avatar-choice-frame img{transform:scale(1.05);filter:saturate(1.05)}
.avatar-image-choice strong{display:block;font-family:'Baloo 2',sans-serif;font-size:1rem;color:#473777;line-height:1.18}
.avatar-image-choice small{display:block;margin-top:3px;color:#8791a8;font-weight:700;font-size:.74rem;line-height:1.25}
@media(max-width:920px){.avatar-image-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.avatar-grid-small{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.avatar-image-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.avatar-grid-small{grid-template-columns:repeat(2,minmax(0,1fr))}.avatar-modal-box{padding:22px 16px 24px!important}}
@media(max-width:460px){.avatar-image-grid,.avatar-grid-small{grid-template-columns:repeat(2,minmax(0,1fr))}.avatar-group-title{font-size:.95rem}}

/* V49 - tinh chỉnh khả dụng, độ rõ và giao diện responsive */
body{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:#dfd5ff;color:#36246d}
a,button,input,select,textarea{font:inherit}
button,.btn,[role="button"]{touch-action:manipulation}
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid rgba(103,79,224,.38);outline-offset:3px}
.btn{min-height:42px;line-height:1.2}
.input,.select,.textarea{min-height:46px;background:#fff;border-color:#dfe2ec;box-shadow:inset 0 1px 2px rgba(35,43,68,.025)}
.input:hover,.select:hover,.textarea:hover{border-color:#cacde0}
.input:disabled,.select:disabled,.textarea:disabled{opacity:.72;cursor:not-allowed;background:#f2f3f7}
.modal{overscroll-behavior:contain}.modal-box{max-height:calc(100dvh - 28px);overflow:auto}
.profile-card{appearance:none;width:100%;font:inherit;color:inherit;cursor:pointer}
.profile-card:focus-visible{outline:4px solid color-mix(in srgb,var(--accent) 38%,transparent);outline-offset:5px}
.glossy-panel,.card{isolation:isolate}
.lesson-section-nav{position:sticky;top:8px;z-index:20;backdrop-filter:blur(12px);background:rgba(255,255,255,.92)!important}
.video-wrap{box-shadow:0 12px 30px rgba(22,29,52,.16)}

@media(max-width:760px){
  .btn{min-height:44px;padding:11px 14px}
  .modal{padding:10px;align-items:flex-end}.modal-box{width:100%;border-radius:24px 24px 18px 18px;padding:24px 18px}
  .landing-top{align-items:flex-start}.admin-link{white-space:nowrap}
  .lesson-section-nav{top:4px;overflow-x:auto;justify-content:flex-start;scrollbar-width:thin}
  .lesson-section-nav a{flex:0 0 auto;min-height:42px}
}
@media(max-width:420px){
  .family-logo>div:last-child small{display:none}
  .admin-link{padding:9px 11px;font-size:.76rem}
  .profile-card{border-radius:24px!important;padding:18px!important}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}