/* Concept Theme V3 — toy-world refinement for Workspace, Skill City and Feature Ecosystem */

/* FEATURE TOYS */
.feature{min-height:210px;padding:18px 15px 20px;border-radius:30px;overflow:hidden;position:relative}
.feature:after{content:'';position:absolute;width:80px;height:80px;border-radius:50%;right:-28px;top:-28px;background:rgba(255,255,255,.52)}
.feature-icon{width:112px;height:104px;border:0!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;background-image:url('./feature-toys.svg')!important;background-repeat:no-repeat!important;background-size:600% 100%!important;font-size:0!important;margin:0 auto 7px!important}
.feature:nth-child(1) .feature-icon{background-position:0 0!important}.feature:nth-child(2) .feature-icon{background-position:20% 0!important}.feature:nth-child(3) .feature-icon{background-position:40% 0!important}.feature:nth-child(4) .feature-icon{background-position:60% 0!important}.feature:nth-child(5) .feature-icon{background-position:80% 0!important}.feature:nth-child(6) .feature-icon{background-position:100% 0!important}
.feature b{font-size:13px!important;font-weight:900!important}.feature p{font-size:9.5px!important;line-height:1.55!important}

/* SEVEN TOY BUILDINGS */
.zone-grid{align-items:stretch}
.zone{padding:10px 10px 16px!important;border-radius:30px!important;background:linear-gradient(180deg,#fff,#f8fcff)!important;overflow:visible!important}
.zone-building{height:158px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;background-image:url('./zone-toys.svg')!important;background-repeat:no-repeat!important;background-size:700% 100%!important;font-size:0!important;filter:drop-shadow(0 9px 12px rgba(39,84,111,.11))}
.zone-building:before{display:none!important}.zone-building:after{display:none!important}
.z1 .zone-building{background-position:0 0!important}.z2 .zone-building{background-position:16.6667% 0!important}.z3 .zone-building{background-position:33.3333% 0!important}.z4 .zone-building{background-position:50% 0!important}.z5 .zone-building{background-position:66.6667% 0!important}.z6 .zone-building{background-position:83.3333% 0!important}.z7 .zone-building{background-position:100% 0!important}
.zone b{font-size:18px!important;margin-top:4px!important}.zone span{font-size:8.8px!important;line-height:1.48!important;min-height:42px}
.zone:hover{transform:translateY(-9px) scale(1.025)!important;box-shadow:0 22px 38px rgba(43,89,119,.17)!important}

/* WORKSPACE AS A PRESCHOOL CONTROL CENTER */
.workspace-section{padding-top:82px!important;padding-bottom:86px!important;overflow:hidden}
.workspace-section:after{content:'';position:absolute;left:0;right:0;bottom:0;height:170px;pointer-events:none;background:radial-gradient(circle at 8% 70%,#ffdcea 0 34px,transparent 35px),radial-gradient(circle at 18% 84%,#d9f2ff 0 44px,transparent 45px),radial-gradient(circle at 88% 78%,#e7ddff 0 50px,transparent 51px),linear-gradient(0deg,rgba(226,247,255,.8),transparent)}
.workspace-shell{position:relative;border-radius:42px!important;padding:14px!important;background:linear-gradient(145deg,#ffffff,#edf9ff 45%,#fff8df)!important;border:5px solid #fff!important;box-shadow:0 30px 70px rgba(36,83,116,.2)!important;z-index:2}
.workspace-shell:before{content:'';position:absolute;inset:-10px;z-index:-1;border-radius:48px;background:linear-gradient(120deg,#ffb8d0,#bfe8ff,#c9f2d2,#ffe8a8,#d9c6ff);filter:blur(1px);opacity:.62}
.workspace-top{border-radius:28px 28px 18px 18px!important;border:2px solid #e0eef5!important;padding:12px 14px!important;background:linear-gradient(180deg,#fff,#f6fbff)!important;box-shadow:0 8px 18px rgba(40,83,111,.07)!important}
.workspace-top:before{content:'🌈  Hành Trình Bé Lớn';display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:linear-gradient(180deg,#fff8cf,#fff);border:2px solid #fff0a8;color:#a56b1d;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px;white-space:nowrap;box-shadow:0 6px 13px rgba(129,96,39,.09)}
.tabs{flex:1;justify-content:center!important}
.tab{min-width:112px!important;min-height:44px!important;font-size:11px!important;border-width:2px!important;background:#fff!important}
.tab.active[data-app=child]{background:linear-gradient(180deg,#ffd7e5,#fff)!important;color:#d83f78!important;box-shadow:0 9px 18px rgba(225,74,132,.14)!important}.tab.active[data-app=teacher]{background:linear-gradient(180deg,#d9efff,#fff)!important;color:#167ac1!important;box-shadow:0 9px 18px rgba(34,137,209,.14)!important}.tab.active[data-app=parent]{background:linear-gradient(180deg,#dff7e6,#fff)!important;color:#228a4d!important;box-shadow:0 9px 18px rgba(39,151,81,.14)!important}.tab.active[data-app=may]{background:linear-gradient(180deg,#e7ddff,#fff)!important;color:#704ed5!important;box-shadow:0 9px 18px rgba(112,78,213,.14)!important}
.workspace-actions{gap:8px!important}.status{min-height:36px;display:inline-flex;align-items:center;border:2px solid #c9efd3!important;box-shadow:0 5px 12px rgba(42,133,74,.08)}
.icon-btn{width:42px!important;height:42px!important;border-radius:15px!important;background:linear-gradient(180deg,#fff,#f2f8fc)!important}
.stage{margin-top:12px;border-radius:30px!important;overflow:hidden!important;border:4px solid #fff!important;box-shadow:inset 0 0 0 2px #dcecf3,0 14px 28px rgba(42,82,110,.11)!important;background:linear-gradient(180deg,#dff4ff,#f9fdff)!important}
.stage:before,.stage:after{content:'';position:absolute;z-index:1;pointer-events:none;width:90px;height:46px;background:radial-gradient(ellipse at center,#fff 0 57%,transparent 59%)}
.stage:before{left:22px;top:18px;opacity:.66}.stage:after{right:28px;top:26px;opacity:.5}
.frame,.may-panel{z-index:2}
.stage-loading{z-index:6!important;background:linear-gradient(180deg,rgba(232,248,255,.96),rgba(255,249,233,.96))!important}
.loader-box{border:4px solid #fff!important;border-radius:32px!important;background:linear-gradient(180deg,#fff,#f7fcff)!important}

/* MÂY PANEL richer */
.may-panel{background:radial-gradient(circle at 8% 8%,#dff5ff 0 130px,transparent 131px),radial-gradient(circle at 92% 12%,#f1e5ff 0 150px,transparent 151px),linear-gradient(135deg,#f7fcff,#fff8fd)!important}
.may-card{border-radius:34px!important;border:4px solid #fff!important}.may-orb{width:118px!important;height:118px!important;font-size:56px!important;background:radial-gradient(circle at 36% 28%,#fff,#dcf5ff 46%,#d6c7ff)!important}
.quick button{font-size:10px!important;border:2px solid #e3ebf1!important;background:#fff!important;box-shadow:0 5px 12px rgba(46,82,106,.06)}
.chatbox{height:405px!important;border:3px solid #fff!important;box-shadow:inset 0 0 0 2px #e3edf2}

/* JOURNEY = toy train */
.journey-grid{gap:20px!important}.step{border-radius:30px!important;border:4px solid #fff!important;box-shadow:0 16px 30px rgba(77,93,104,.1)!important;min-height:180px;padding:22px!important}
.step:not(:last-child):after{content:'➜';position:absolute;right:-23px;top:50%;transform:translateY(-50%);z-index:4;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--c);box-shadow:0 8px 18px rgba(43,82,108,.13);font-size:19px}
.step-no{width:52px!important;height:52px!important;border:4px solid #fff;box-shadow:0 8px 18px rgba(43,83,108,.13)}
.step b{font-size:13px!important}.step p{font-size:9.5px!important;line-height:1.55!important}

/* PROBLEM/SOLUTION CARDS */
.problem-card{border-radius:28px!important;border:3px solid #fff!important;padding:20px!important;box-shadow:0 14px 28px rgba(43,83,110,.09)!important;background:linear-gradient(180deg,#fff,#f9fcfe)!important}
.problem-card:nth-child(1){background:linear-gradient(180deg,#fff0f2,#fff)!important}.problem-card:nth-child(2){background:linear-gradient(180deg,#fff4df,#fff)!important}.problem-card:nth-child(3){background:linear-gradient(180deg,#f0ebff,#fff)!important}.problem-card:last-child{background:linear-gradient(135deg,#fff5bd,#e6ffd5)!important}
.problem-card .ico{width:58px;height:58px;border-radius:20px;display:grid;place-items:center;background:#fff;box-shadow:0 8px 18px rgba(42,80,105,.09);font-size:29px!important}
.problem-card b{font-size:13px!important}.problem-card p{font-size:9.5px!important}

/* FINAL CTA */
.final-box{position:relative;overflow:hidden;border:5px solid #fff!important;border-radius:40px!important;background:linear-gradient(120deg,#dff6d8,#dff5ff 48%,#fff0c9)!important;box-shadow:0 24px 48px rgba(42,86,114,.16)!important}
.final-box:before{content:'☁️';position:absolute;right:130px;top:-32px;font-size:100px;opacity:.35}.final-box:after{content:'⭐';position:absolute;right:34px;bottom:10px;font-size:45px;opacity:.65}

@media(max-width:1080px){.workspace-top:before{display:none}.zone-building{height:150px!important}}
@media(max-width:760px){.feature-icon{width:96px;height:88px}.zone-building{height:142px!important}.workspace-shell{padding:8px!important;border-radius:28px!important}.workspace-top{border-radius:20px 20px 14px 14px!important}.tab{min-width:0!important}.stage{border-radius:22px!important}.step:not(:last-child):after{display:none}}