/* JoyUp v5 – lớp giao diện 3D cổng Học sinh (chỉ trình bày, không đổi chức năng). */
html.v5s{--v5-ink:#2a0f5c;--v5-ink2:#4b2a86;--v5-mute:#8a7fa6;--v5-pri:#7c4ddb;--v5-pri2:#6a35d0;--v5-lav:#f1eaff;--v5-lav2:#e7dcff;--v5-line:#ece5f8;
 --v5-card:0 1px 0 #fff inset,0 14px 30px -14px rgba(96,52,190,.28),0 4px 10px -4px rgba(96,52,190,.10),0 0 0 1px rgba(232,222,250,.9);
 --v5-pill:inset 0 2px 0 rgba(255,255,255,.38),inset 0 -4px 0 rgba(58,18,140,.32),0 10px 18px -8px rgba(106,53,208,.65)}
html.v5s body{background:
 radial-gradient(60% 30% at 100% 22%,rgba(255,214,240,.55),transparent 70%),
 radial-gradient(50% 25% at 0% 8%,rgba(214,226,255,.6),transparent 70%),
 radial-gradient(70% 30% at 20% 70%,rgba(236,224,255,.7),transparent 70%),
 linear-gradient(180deg,#fbf8ff 0%,#f4eeff 45%,#f7f1ff 100%) fixed!important;color:var(--v5-ink)}
html.v5s #app{background:transparent!important}
/* Thanh đầu */
html.v5s header.top{background:transparent!important;box-shadow:none!important;border:0!important;padding:14px 14px 6px!important;gap:8px!important;align-items:center}
html.v5s header.top .logo{position:relative;font-family:'Baloo 2',system-ui,sans-serif!important;line-height:.86!important;margin-right:auto}
html.v5s header.top .logo::after{content:"";position:absolute;right:-30px;top:2px;width:26px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M9 2c.8 5 2.2 6.4 7 7.2-4.8.8-6.2 2.2-7 7.2-.8-5-2.2-6.4-7-7.2 4.8-.8 6.2-2.2 7-7.2z' fill='%23ffd34d'/%3E%3Cpath d='M20 15c.5 3.2 1.4 4.1 4.6 4.6-3.2.5-4.1 1.4-4.6 4.6-.5-3.2-1.4-4.1-4.6-4.6 3.2-.5 4.1-1.4 4.6-4.6z' fill='%23ffd34d'/%3E%3C/svg%3E") no-repeat}
html.v5s header.top .topuser{display:none!important}
html.v5s header.top .btn{background:linear-gradient(180deg,#f5efff,#ebe2ff)!important;border:1px solid #fff!important;border-radius:18px!important;box-shadow:0 8px 16px -10px rgba(96,52,190,.45),0 1px 0 #fff inset!important;color:var(--v5-pri2)!important;font:800 14px/1.1 'Baloo 2',system-ui,sans-serif!important;min-height:52px;padding:6px 12px!important;display:inline-flex;align-items:center;gap:6px}
html.v5s header.top .btn[data-joyup-pin]{flex-direction:column;gap:1px;min-width:62px}
html.v5s .v5ico{display:inline-block;flex:none;width:26px;height:26px;object-fit:contain;vertical-align:middle}
html.v5s .v5svg{display:inline-block;flex:none;width:24px;height:24px}
/* Khung nội dung */
html.v5s #app .wrap{padding:6px 14px 30px!important;max-width:560px;margin:0 auto}
/* Menu chính 2x2 */
html.v5s .juiNav{background:#fff!important;border:0!important;border-radius:26px!important;padding:8px!important;box-shadow:var(--v5-card)!important;gap:0 10px!important;position:relative}
html.v5s .juiNav::after{content:"";position:absolute;left:16px;right:16px;top:50%;height:1px;background:var(--v5-line)}
html.v5s .juiNav button{background:transparent!important;border:0!important;color:var(--v5-ink)!important;font:800 17px/1 'Baloo 2',system-ui,sans-serif!important;min-height:58px!important;border-radius:20px!important;display:flex!important;align-items:center;justify-content:center;gap:10px;position:relative;z-index:1}
html.v5s .juiNav button>span[aria-hidden]{display:none}
html.v5s .juiNav button[aria-current="page"],html.v5s .juiNav button.active{background:linear-gradient(180deg,#f6f0ff,#ece2ff)!important;box-shadow:inset 0 -4px 0 #8c5cf0,0 6px 14px -8px rgba(124,77,219,.6)!important;color:var(--v5-ink2)!important}
/* Tab con */
html.v5s .juiTabs{background:transparent!important;border:0!important;box-shadow:none!important;padding:6px 2px 8px!important;gap:7px!important;display:flex!important;margin-top:14px!important;overflow-x:auto;overflow-y:visible;scrollbar-width:none}
html.v5s .juiTabs::-webkit-scrollbar{display:none}
html.v5s .juiTabs button{background:#fff!important;border:1px solid #ebe2fa!important;border-radius:18px!important;color:var(--v5-ink2)!important;font:800 15.5px/1 'Baloo 2',system-ui,sans-serif!important;min-height:52px!important;padding:0 10px!important;display:inline-flex!important;align-items:center;justify-content:center;gap:7px;flex:1 0 auto;box-shadow:0 8px 16px -12px rgba(96,52,190,.5),0 1px 0 #fff inset!important;white-space:nowrap}
html.v5s .juiTabs button[aria-current="page"]{flex:1.4 0 auto;background:linear-gradient(180deg,#8f60ec,#6a35d0)!important;color:#fff!important;border-color:transparent!important;box-shadow:var(--v5-pill)!important;position:relative}
html.v5s .juiTabs button[aria-current="page"]::after{content:"";position:absolute;right:-4px;top:-8px;width:22px;height:20px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cg stroke='%23ffc83d' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 16l4-4M11 11V3M14 13l6-4'/%3E%3C/g%3E%3C/svg%3E") no-repeat}
/* Tiêu đề trang + linh vật */
html.v5s .juiHeading{position:relative;background:transparent!important;border:0!important;box-shadow:none!important;min-height:150px;padding:34px 0 0!important;margin:4px 0 -20px!important;overflow:visible!important;display:block!important;z-index:0;pointer-events:none}
html.v5s .juiHeading h1{font:800 28px/1.1 'Baloo 2',system-ui,sans-serif!important;color:var(--v5-ink)!important;margin:0!important;white-space:nowrap;position:relative;letter-spacing:-.2px}
html.v5s .juiHeading::before{content:"";position:absolute;right:max(37%,150px);top:2px;width:48px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 30'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe27a'/%3E%3Cstop offset='1' stop-color='%23f7b928'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffc4e1'/%3E%3Cstop offset='1' stop-color='%23f77bb5'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 9l2.6 5.3 5.8.8-4.2 4.1 1 5.8-5.2-2.7-5.2 2.7 1-5.8L3.6 15l5.8-.8z' fill='url(%23s)'/%3E%3Cpath d='M42 25s-10-6-10-12.2C32 9.4 34.6 7 37.4 7c2 0 3.6 1.1 4.6 2.7C43 8.1 44.6 7 46.6 7 49.4 7 52 9.4 52 12.8 52 19 42 25 42 25z' fill='url(%23h)'/%3E%3Cellipse cx='37.5' cy='11.5' rx='2.2' ry='1.4' fill='%23fff' opacity='.7'/%3E%3C/svg%3E") no-repeat}
html.v5s .juiHeading .juV4StudentArt{display:none!important}
html.v5s .juiHeading .v5Mascot{position:absolute;right:-8px;top:-4px;width:37%;max-width:180px;height:auto;filter:drop-shadow(0 12px 14px rgba(96,52,190,.25));pointer-events:none}
html.v5s .juiHeading .v5Spark{position:absolute;pointer-events:none}
/* Thẻ */
html.v5s .juiCard,html.v5s .juiEmpty,html.v5s details.juV4Personal{background:#fff!important;border:0!important;border-radius:28px!important;box-shadow:var(--v5-card)!important}
html.v5s .juiAssignment{position:relative;padding:20px 16px 18px!important;margin:0 0 18px!important;overflow:hidden;z-index:2}
html.v5s .juiHeading+.juiNotice[hidden]+.juiAssignment,html.v5s .juiHeading+.juiAssignment{padding-top:22px!important}
html.v5s .juiAssignment h2{display:block!important;position:relative;padding:11px 0 11px 56px;min-height:44px;font:800 19px/1.2 'Baloo 2',system-ui,sans-serif!important;color:var(--v5-ink)!important;margin:0 0 12px!important}
html.v5s .juiAssignment h2 span{color:var(--v5-ink)!important}
html.v5s .v5Tile{flex:none;width:44px;height:44px;border-radius:14px;background:linear-gradient(180deg,#f6f0ff,#ebe0ff);display:grid;place-items:center;box-shadow:inset 0 1px 0 #fff,0 4px 8px -4px rgba(96,52,190,.35)}
html.v5s .juiAssignmentLines{margin:0!important;display:grid;gap:8px;position:relative;z-index:1;max-width:calc(100% - 78px)}
html.v5s .juiAssignmentLines>div{display:grid!important;grid-template-columns:30px 122px 1fr;align-items:center;gap:8px;margin:0!important}
html.v5s .juiAssignmentLines dt{color:var(--v5-ink)!important;font:700 14.5px/1.25 Nunito,system-ui,sans-serif!important;white-space:nowrap}
html.v5s .juiAssignmentLines dd{color:var(--v5-mute)!important;font:600 14.5px/1.25 Nunito,system-ui,sans-serif!important;margin:0!important}
html.v5s .v5Dot{width:30px;height:30px;border-radius:50%;background:var(--v5-lav);display:grid;place-items:center}
html.v5s .v5Dot .v5svg{width:18px;height:18px}
html.v5s .juiAssignment .v5CardArt{position:absolute;right:2px;bottom:10px;width:96px;height:auto;pointer-events:none;z-index:0}
/* Mục phụ */
html.v5s .juiSectionTitle{font:800 21px/1.2 'Baloo 2',system-ui,sans-serif!important;color:var(--v5-ink)!important;margin:22px 4px 10px!important}
html.v5s .juiEmpty{color:var(--v5-mute)!important;padding:20px 22px!important;font:600 15px Nunito,system-ui,sans-serif!important;display:flex;align-items:center;gap:12px}
html.v5s .juiEmpty::before{content:"";flex:none;width:36px;height:36px;border-radius:12px;background:var(--v5-lav) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5l2.5 5.1 5.6.8-4 3.9.9 5.6-5-2.6-5 2.6.9-5.6-4-3.9 5.6-.8z' fill='%23b89af0'/%3E%3C/svg%3E") center/22px no-repeat}
html.v5s .juiActions{gap:12px!important;margin:18px 0!important;display:flex!important}
html.v5s .juiButton{flex:1;border-radius:18px!important;min-height:52px!important;font:800 16px/1 'Baloo 2',system-ui,sans-serif!important;background:#fff!important;color:var(--v5-pri2)!important;border:1px solid #e6dcfa!important;box-shadow:0 8px 16px -12px rgba(96,52,190,.55),inset 0 -3px 0 #efe7ff!important}
html.v5s .juiButton.primary{background:linear-gradient(180deg,#8f60ec,#6a35d0)!important;color:#fff!important;border-color:transparent!important;box-shadow:var(--v5-pill)!important}
html.v5s .juiButton:active,html.v5s .juiTabs button:active,html.v5s .juiNav button:active{transform:translateY(2px)}
html.v5s details.juV4Personal{padding:4px 18px!important;margin-top:4px!important}
html.v5s details.juV4Personal summary{font:800 16px/2.6 'Baloo 2',system-ui,sans-serif;color:var(--v5-ink2);cursor:pointer}
@media(max-width:380px){html.v5s .juiHeading h1{font-size:26px}html.v5s .juiTabs button{padding:0 11px!important;font-size:15px!important}html.v5s .juiAssignment .v5CardArt{width:84px}html.v5s .juiAssignmentLines{max-width:calc(100% - 70px)}}
@media(min-width:761px){html.v5s #app .wrap{max-width:720px}html.v5s .juiHeading .v5Mascot{max-width:230px}html.v5s .juiAssignment .v5CardArt{width:150px;right:24px}html.v5s .juiAssignmentLines{max-width:calc(100% - 170px)}}
@media(prefers-reduced-motion:reduce){html.v5s *{transition:none!important}}
html.v5s .juiTabs .v5svg{width:22px;height:22px}
@media(max-width:400px){html.v5s .juiHeading h1{font-size:24px}html.v5s .juiHeading .v5Mascot{width:31%;right:-12px}html.v5s .juiTabs button{font-size:14px!important;padding:0 8px!important;gap:5px}html.v5s .juiTabs .v5svg{width:19px;height:19px}html.v5s .juiAssignment h2{font-size:17px!important}html.v5s .juiAssignmentLines dt,html.v5s .juiAssignmentLines dd{font-size:13.5px!important}}
html.v5s .juiAssignment h2 span:not(.v5Tile){white-space:nowrap}
html.v5s .juiAssignment h2 .v5Tile{position:absolute;left:0;top:50%;transform:translateY(-50%)}
@media(min-width:761px){html.v5s .juiNav::after{display:none}html.v5s .juiHeading{min-height:170px}html.v5s .juiHeading h1{font-size:38px!important}html.v5s .juiHeading .v5Mascot{max-width:200px;top:-10px;right:10px}html.v5s .juiHeading::before{right:240px}}
@media(max-width:400px){html.v5s .juiAssignmentLines>div{grid-template-columns:28px 112px 1fr!important}}
/* ===== Trang Game (HS-09) ===== */
html.v5s .juiHeading .v5Controller{position:absolute;right:0;top:-6px;width:38%;max-width:170px;height:auto;filter:drop-shadow(0 12px 14px rgba(96,52,190,.25));pointer-events:none}
html.v5s .juiHeading.v5GameHead{min-height:120px;margin-bottom:6px!important}
html.v5s .juiHeading.v5GameHead h1{font-size:44px!important}
html.v5s .juiHeading.v5GameHead::before{right:auto;left:150px;top:40px}
html.v5s .juiHeading.v5GameHead p[hidden]{display:none!important}
html.v5s .juiLabel{font:800 17px/1.2 'Baloo 2',system-ui,sans-serif!important;color:var(--v5-ink2)!important;display:block;margin:0 0 10px!important}
html.v5s #juiGameDay{width:100%;min-height:52px;border-radius:16px!important;border:1.5px solid #e4daf7!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='4' fill='%238c5cf0'/%3E%3Crect x='5' y='9' width='14' height='10' rx='2' fill='%23fff'/%3E%3Cg fill='%23b89af0'%3E%3Ccircle cx='8.5' cy='12' r='1.2'/%3E%3Ccircle cx='12' cy='12' r='1.2'/%3E%3Ccircle cx='15.5' cy='12' r='1.2'/%3E%3Ccircle cx='8.5' cy='15.6' r='1.2'/%3E%3Ccircle cx='12' cy='15.6' r='1.2'/%3E%3C/g%3E%3C/svg%3E") 14px center/26px no-repeat!important;padding:0 36px 0 50px!important;font:700 15px Nunito,system-ui,sans-serif!important;color:var(--v5-ink2)!important;box-shadow:inset 0 1px 2px rgba(96,52,190,.06)}
html.v5s .juiCard:has(#juiGameDay){padding:18px 18px 14px!important;margin-bottom:16px!important}
html.v5s .juiCard:has(#juiGameDay) .juiSmall{text-align:center;color:var(--v5-mute)!important;font:600 13px/1.4 Nunito,system-ui,sans-serif!important;margin:10px 0 0!important}
html.v5s .juiCards{display:flex!important;flex-direction:column;gap:16px!important}
html.v5s .juiGameCard{position:relative;display:grid!important;grid-template-columns:46% 1fr 56px;grid-template-rows:auto auto;align-items:center;column-gap:6px;min-height:0;padding:0 14px 0 0!important;overflow:hidden;text-align:left!important;background:linear-gradient(100deg,#fff 0%,#fbf7ff 40%,#f1e8ff 100%)!important}
html.v5s .juiGameCard[data-game="gifts"]{order:1;background:linear-gradient(100deg,#fff6fb 0%,#fdeefa 45%,#efe6ff 100%)!important}
html.v5s .juiGameCard[data-game="panda"]{order:2;background:linear-gradient(100deg,#f3fbef 0%,#eef8ea 45%,#e2f3dc 100%)!important}
html.v5s .juiGameCard[data-game="bingo"]{order:3;background:linear-gradient(100deg,#f1f6ff 0%,#ecf2ff 45%,#e3ebff 100%)!important}
html.v5s .juiGameCard .juiGameIcon,html.v5s .juiGameCard .juV4StudentArt,html.v5s .juiGameCard>img:not(.v5CardPic){display:none!important}
html.v5s .juiGameCard .v5CardPic{grid-column:1;grid-row:1/3;align-self:stretch;width:100%;height:100%;min-height:108px;object-fit:cover;object-position:left center;-webkit-mask-image:linear-gradient(90deg,#000 72%,transparent);mask-image:linear-gradient(90deg,#000 72%,transparent)}
html.v5s .juiGameCard h2{grid-column:2;grid-row:1;align-self:end;margin:0!important;font:800 26px/1.05 'Baloo 2',system-ui,sans-serif!important;color:#4a1fa8!important;text-align:left!important}
html.v5s .juiGameCard p{grid-column:2;grid-row:2;align-self:start;margin:4px 0 0!important;font:600 14px/1.35 Nunito,system-ui,sans-serif!important;color:#6b5e88!important;text-align:left!important}
html.v5s .juiGameCard .juiButton{grid-column:3;grid-row:1/3;flex:none!important;width:52px!important;height:52px!important;min-height:52px!important;padding:0!important;border-radius:50%!important;background:linear-gradient(180deg,#fff,#f1eaff)!important;border:1px solid #fff!important;box-shadow:0 8px 16px -8px rgba(96,52,190,.55),inset 0 -3px 0 #e6dcfa!important;font-size:0!important;color:transparent!important;display:grid!important;place-items:center}
html.v5s .juiGameCard .juiButton .v5svg{width:22px;height:22px}
html.v5s .juiGameCard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 #fff}
@media(max-width:400px){html.v5s .juiGameCard{grid-template-columns:44% 1fr 46px;min-height:0}html.v5s .juiGameCard h2{font-size:22px!important}html.v5s .juiGameCard p{font-size:13px!important}html.v5s .juiGameCard .juiButton{width:46px!important;height:46px!important;min-height:46px!important}html.v5s .juiHeading.v5GameHead h1{font-size:38px!important}}
@media(min-width:761px){html.v5s .juiGameCard{min-height:150px;grid-template-columns:30% 1fr 64px}html.v5s .juiGameCard h2{font-size:30px!important}}
html.v5s .juiGameCard{height:122px;min-height:0!important;grid-template-columns:42% 1fr 52px!important}
html.v5s .juiGameCard .v5CardPic{min-height:0!important;height:122px!important;object-fit:cover!important;object-position:center!important}
html.v5s .juiGameCard h2{font-size:23px!important}
html.v5s .juiGameCard p{font-size:13px!important;line-height:1.3!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
html.v5s .juiGameCard .juiButton{width:46px!important;height:46px!important;min-height:46px!important}
@media(min-width:761px){html.v5s .juiGameCard{height:150px;grid-template-columns:34% 1fr 64px!important}html.v5s .juiGameCard .v5CardPic{height:150px!important}html.v5s .juiGameCard h2{font-size:30px!important}html.v5s .juiGameCard p{font-size:15px!important}}
/* ===== Màn chơi game (HS-06/07/08) – dùng chung ===== */
html.v5s .v5GameBanner{display:flex;align-items:center;gap:10px;margin:14px 0 -6px;padding:0 4px;position:relative;z-index:1}
html.v5s .v5GameBanner img{width:96px;height:auto;flex:none;filter:drop-shadow(0 10px 12px rgba(96,52,190,.25))}
html.v5s .v5GameBanner b{font:800 34px/1 'Baloo 2',system-ui,sans-serif;color:#5a22c4;text-shadow:0 2px 0 #fff,0 4px 10px rgba(124,77,219,.25);white-space:nowrap}
html.v5s .v5GameBanner b em{font-style:normal;background:linear-gradient(180deg,#ffd35a,#ff9a1f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #fff)}
html.v5s .jgPlay{background:linear-gradient(180deg,#fdfbff,#f5efff)!important;border:0!important;border-radius:28px!important;box-shadow:var(--v5-card)!important;padding:16px!important}
html.v5s .jgTop{display:grid!important;grid-template-columns:1fr auto;grid-template-areas:"score back";align-items:center;gap:10px!important;margin-bottom:8px!important}
html.v5s .jgTop .jgTitle{display:none!important}
html.v5s .jgTop .jgScore{grid-area:score;margin:0!important;font:800 18px/1 'Baloo 2',system-ui,sans-serif!important;color:var(--v5-ink)!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
html.v5s .jgTop .juiButton{grid-area:back;flex:none!important;min-height:44px!important;padding:0 16px!important;font-size:15px!important}
html.v5s .jgBar{height:12px!important;border:0!important;background:#e6e0f0!important;box-shadow:inset 0 2px 3px rgba(60,20,120,.12);margin:0 0 14px!important}
html.v5s .jgBar i{background:linear-gradient(90deg,#c69bff,#7c4ddb)!important}
html.v5s .jgGifts{background:transparent!important;padding:0!important;gap:10px!important}
html.v5s .jgGifts span{border:2px solid #fff!important;border-radius:22px!important;box-shadow:0 10px 18px -12px rgba(96,52,190,.55),inset 0 1px 0 #fff!important;min-height:112px!important;background-size:cover!important}
html.v5s .jgGifts span.isNow{box-shadow:0 0 0 3px #c9a6ff,0 12px 20px -10px rgba(124,77,219,.6)!important;transform:translateY(-3px)}
html.v5s .jgGifts span.isDone{background-color:#fff6dc!important;box-shadow:0 0 0 3px #ffd66b,0 10px 18px -10px rgba(240,170,40,.5)!important}
html.v5s .jgPrompt{background:radial-gradient(120% 90% at 50% 0,#fff,#f6f0ff)!important;border:0!important;border-radius:24px!important;box-shadow:var(--v5-card)!important;position:relative;overflow:hidden}
html.v5s .jgPrompt::before,html.v5s .jgPrompt::after{content:"";position:absolute;top:14px;width:30px;height:30px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe27a'/%3E%3Cstop offset='1' stop-color='%23f7b928'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 2.5l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.3l-5.8 3.1 1.1-6.5L2.6 9.3l6.5-.9z' fill='url(%23s)'/%3E%3C/svg%3E") no-repeat;opacity:.95}
html.v5s .jgPrompt::before{left:16%}html.v5s .jgPrompt::after{right:16%}
html.v5s .jgPrompt small{text-transform:none!important;letter-spacing:0!important;font:600 16px Nunito,system-ui,sans-serif!important;color:#5b4b7c!important}
html.v5s .jgPrompt strong{font-size:32px!important;color:#3a137a!important}
html.v5s .jgSpeak{border-radius:999px!important;background:linear-gradient(180deg,#8f60ec,#6a35d0)!important;color:#fff!important;border:0!important;box-shadow:var(--v5-pill)!important;font:800 16px 'Baloo 2',system-ui,sans-serif!important;padding:10px 22px!important}
html.v5s .jgAnswers button{border:0!important;border-radius:20px!important;background:linear-gradient(180deg,#fbf8ff,#efe7ff)!important;box-shadow:inset 0 1px 0 #fff,inset 0 -4px 0 #e2d6fa,0 8px 14px -10px rgba(96,52,190,.6)!important;color:#4a1fa8!important;font:800 20px/1.15 'Baloo 2',system-ui,sans-serif!important;min-height:64px!important}
html.v5s .jgAnswers button.isRight{background:linear-gradient(180deg,#eafff2,#c9f3dc)!important;color:#1d7a4b!important}
html.v5s .jgAnswers button.isWrong{background:linear-gradient(180deg,#fff2f6,#ffd9e4)!important;color:#b0305a!important}
@media(max-width:400px){html.v5s .v5GameBanner b{font-size:28px}html.v5s .v5GameBanner img{width:78px}}
html.v5s .v5GameBanner{margin:14px 0 8px!important}
html.v5s .v5GameBanner b em{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:#ff9a1f!important;filter:none!important;text-shadow:0 2px 0 #fff,0 0 1px #c76a00,0 4px 10px rgba(255,154,31,.35)!important}
html.v5s .jgFeedback{min-height:8px!important;padding-top:8px!important}
html.v5s .v5GameBanner img.v5Fade{width:104px;height:78px;object-fit:cover;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 60%,transparent 100%)}
html.v5s .v5GameBanner b{white-space:normal!important;font-size:clamp(24px,7.4vw,34px)!important;line-height:1.05!important}
html.v5s .jg-panda .jgPrompt::before,html.v5s .jg-panda .jgPrompt::after{display:none}
html.v5s .v5GameBanner b em{white-space:nowrap}
html.v5s .v5GameBanner img[src*="target-head"]{clip-path:inset(0 0 14% 0);margin-bottom:-12px}
/* ===== Cổng Quản lý – Hôm nay (mẫu 04) ===== */
html.v5m{--v5-ink:#22104f;--v5-mute:#8a7fa6;--v5-card:0 1px 0 #fff inset,0 14px 30px -14px rgba(96,52,190,.28),0 4px 10px -4px rgba(96,52,190,.10),0 0 0 1px rgba(232,222,250,.9)}
html.v5m body{background:radial-gradient(60% 30% at 100% 18%,rgba(255,214,240,.5),transparent 70%),radial-gradient(60% 25% at 0% 6%,rgba(214,226,255,.6),transparent 70%),linear-gradient(180deg,#fbf8ff,#f3edff 50%,#f7f1ff) fixed!important}
html.v5m .main>.top{background:transparent!important;border:0!important;box-shadow:none!important;padding:16px 16px 4px!important}
html.v5m .main>.top #title{font:800 32px/1 'Baloo 2',system-ui,sans-serif!important;color:var(--v5-ink)!important}
html.v5m .main>.top .btn{width:50px!important;height:50px!important;min-width:50px;border-radius:16px!important;background:linear-gradient(180deg,#fff,#f3edff)!important;border:1px solid #fff!important;box-shadow:0 8px 16px -10px rgba(96,52,190,.5),inset 0 -3px 0 #ece4fb!important;color:#5a2bc4!important;font-size:22px!important;display:grid;place-items:center;padding:0!important}
html.v5m .main>.top .p1Sync{width:50px;height:50px;border-radius:16px;background:linear-gradient(180deg,#fff,#f3edff);box-shadow:0 8px 16px -10px rgba(96,52,190,.5),inset 0 -3px 0 #ece4fb;font-size:0!important;display:grid;place-items:center;border:1px solid #fff}
html.v5m .main>.top .p1Sync i{width:22px!important;height:22px!important;background:none!important;border:0!important;box-shadow:none!important}
html.v5m .main>.top .p1Sync i::before{content:"✓";font:900 22px/1 system-ui;color:#5a2bc4;font-style:normal}
html.v5m #juSectionBar{background:transparent!important;border:0!important;box-shadow:none!important}
html.v5m #juWorkspace .juV4Top{position:relative;background:transparent!important;border:0!important;box-shadow:none!important;min-height:200px;padding:6px 6px 0!important;overflow:visible!important}
html.v5m #juWorkspace .juV4Top .juEyebrow,html.v5m #juWorkspace .juV4Top h2,html.v5m #juWorkspace .juV4Top .juV4TopArt{display:none!important}
html.v5m #juWorkspace .juV4Brand{font:800 40px/1 'Baloo 2',system-ui,sans-serif!important;background:linear-gradient(90deg,#6a2ee0,#8b4dff 55%,#3b1690);-webkit-background-clip:text;background-clip:text;color:transparent!important;margin:34px 0 12px!important;max-width:58%}
html.v5m #juWorkspace .juV4Top .juMuted{display:inline-flex;align-items:center;gap:8px;font:800 20px 'Baloo 2',system-ui,sans-serif!important;color:#6a35d0!important;margin-top:66px!important}
html.v5m #juWorkspace .juV4Top .juMuted::before{content:"";width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c4ddb' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='3.5'/%3E%3Cpath d='M8 2.8v3.6M16 2.8v3.6M3 10h18'/%3E%3C/svg%3E") no-repeat}
html.v5m #juWorkspace .v5MgrMascot{position:absolute;right:-6px;top:-8px;width:52%;max-width:240px;pointer-events:none;filter:drop-shadow(0 12px 14px rgba(96,52,190,.22))}
html.v5m .juTodayMetrics{display:grid!important;grid-template-columns:1fr 1fr!important;gap:14px!important}
html.v5m .juTodayMetric{grid-column:1/-1;position:relative;background:#fff!important;border:0!important;border-radius:26px!important;box-shadow:var(--v5-card)!important;overflow:hidden}
html.v5m .juTodayMetric:has([data-target="students"]),html.v5m .juTodayMetric:has([data-target="classes"]){grid-column:auto}
html.v5m .juTodayMetric:has([data-target="classes"]){background:linear-gradient(160deg,#fff,#fff3f8)!important}
html.v5m .juTodayMetric>button{display:flex!important;align-items:center;gap:14px;width:100%;min-height:118px;padding:18px 54px 18px 16px!important;background:transparent!important;border:0!important;text-align:left;position:relative;z-index:1}
html.v5m .juTodayMetric .juMetricIcon{width:56px!important;height:56px!important;flex:none;border-radius:50%!important;background:#ece4ff!important;color:#6a35d0!important;display:grid!important;place-items:center}
html.v5m .juTodayMetric:has([data-target="classes"]) .juMetricIcon{background:#ffe3ef!important;color:#e0457f!important}
html.v5m .juTodayMetric .juMetricIcon svg{width:28px!important;height:28px!important;stroke-width:2.2}
html.v5m .juTodayMetric .juMetricText{display:flex;flex-direction:column;gap:2px}
html.v5m .juTodayMetric .juMetricText>span{font:700 15px/1.25 Nunito,system-ui,sans-serif!important;color:#6a35d0!important}
html.v5m .juTodayMetric .juMetricText strong{font:800 38px/1.05 'Baloo 2',system-ui,sans-serif!important;color:var(--v5-ink)!important}
html.v5m .juTodayMetric [data-target="students"] strong::after{content:"học viên";display:block;font:700 15px Nunito,system-ui,sans-serif;color:#6a35d0;margin-top:2px}
html.v5m .juTodayMetric [data-target="classes"] strong::after{content:"lớp";display:block;font:700 15px Nunito,system-ui,sans-serif;color:#6a35d0;margin-top:2px}
html.v5m .juTodayMetric>button::after{content:"›";position:absolute;right:14px;bottom:14px;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 4px 10px -4px rgba(96,52,190,.45),0 0 0 1px #efe7fb;color:#6a35d0;font:700 24px/32px system-ui;text-align:center}
html.v5m .juTodayMetric [data-target="tuition"]::after{bottom:auto;top:50%;transform:translateY(-50%)}
html.v5m .juTodayMetric .juFinanceMetricEye{position:absolute;right:56px;top:50%;transform:translateY(-50%);opacity:.75}
html.v5m .juTodayMetric .juFinanceValue{font:900 24px/1 system-ui!important;letter-spacing:4px;color:var(--v5-ink)!important}
html.v5m .juTodayMetric .juV4MetricArt{display:none!important}
html.v5m .juTodayMetric .v5MgrBunny{position:absolute;right:58px;bottom:0;height:112%;width:auto;pointer-events:none;z-index:0}
html.v5m .juTodayMetric.warn{background:linear-gradient(160deg,#fffaf0,#fff2d6)!important;box-shadow:0 0 0 1.5px #f5d98a,0 14px 30px -14px rgba(220,160,40,.35)!important}
html.v5m .juTodayMetric.warn .juMetricIcon{background:#ffeaa0!important;color:#c98a00!important}
html.v5m .juTodayMetric.warn .juMetricText>span{color:#5a3d00!important}
html.v5m .juTodayMetric.warn>button{min-height:150px}
html.v5m .juTodayMetric.warn::before{content:"";position:absolute;right:56px;bottom:18px;width:110px;height:96px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 96'%3E%3Crect x='14' y='10' width='60' height='76' rx='10' fill='%23ffe6a8'/%3E%3Crect x='30' y='4' width='28' height='12' rx='5' fill='%23f6c96a'/%3E%3Cg stroke='%23f2b94a' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M26 32h36M26 46h36M26 60h24'/%3E%3C/g%3E%3Cpath d='M82 48l22 38H60z' fill='%23ffb020'/%3E%3Cpath d='M82 62v12' stroke='%23fff' stroke-width='5' stroke-linecap='round'/%3E%3Ccircle cx='82' cy='80' r='3' fill='%23fff'/%3E%3C/svg%3E") no-repeat;opacity:.9}
html.v5m #juTodayBigTests{background:#fff!important;border:0!important;border-radius:24px!important;box-shadow:var(--v5-card)!important;padding:14px 16px!important}
html.v5m #juTodayBigTests .juBtTop{display:flex;align-items:center;gap:12px}
html.v5m #juTodayBigTests .juBtTop::before{content:"";flex:none;width:50px;height:50px;border-radius:16px;background:#efe8ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%236a35d0'%3E%3Crect x='4' y='11' width='4' height='9' rx='2'/%3E%3Crect x='10' y='5' width='4' height='15' rx='2'/%3E%3Crect x='16' y='8' width='4' height='12' rx='2'/%3E%3C/g%3E%3C/svg%3E") center/26px no-repeat}
html.v5m #juTodayBigTests [role=status]{flex:1;font:700 15px/1.3 Nunito,system-ui,sans-serif;color:var(--v5-ink)}
html.v5m #juTodayBigTests .juBtn{border-radius:16px!important;border:1.5px solid #e2d6fa!important;background:#fff!important;color:#5a2bc4!important;font:800 16px 'Baloo 2',system-ui,sans-serif!important;padding:8px 14px!important}
html.v5m #juTodayBigTests .juBtn::after{content:" ›"}
@media(min-width:761px){html.v5m .juTodayMetrics{grid-template-columns:repeat(4,1fr)!important}html.v5m .juTodayMetric{grid-column:span 2}html.v5m .juTodayMetric:has([data-target="students"]),html.v5m .juTodayMetric:has([data-target="classes"]){grid-column:span 2}html.v5m #juWorkspace .juV4Brand{max-width:none}html.v5m #juWorkspace .v5MgrMascot{max-width:260px;right:20px}}
html.v5m #juWorkspace .juV4Top{min-height:0!important;padding-bottom:8px!important}
html.v5m #juWorkspace .juV4Top>div:first-child{position:relative;z-index:2}
html.v5m #juWorkspace .juV4Brand{max-width:none!important;white-space:nowrap!important;overflow:visible!important;font-size:34px!important;margin:26px 0 0!important;text-overflow:clip!important;width:auto!important}
html.v5m #juWorkspace .juV4Top .juMuted{margin-top:70px!important;font-size:18px!important}
html.v5m #juWorkspace .v5MgrMascot{width:44%!important;max-width:200px!important;top:2px!important;right:0!important;z-index:1}
html.v5m .juTodayMetric>button{padding:16px 16px 16px 14px!important;gap:12px!important}
html.v5m .juTodayMetric:has([data-target="students"]) .juMetricIcon,html.v5m .juTodayMetric:has([data-target="classes"]) .juMetricIcon{width:46px!important;height:46px!important;align-self:flex-start;margin-top:4px}
html.v5m .juTodayMetric:has([data-target="students"]) .juMetricText>span,html.v5m .juTodayMetric:has([data-target="classes"]) .juMetricText>span{font-size:13.5px!important;white-space:nowrap}
html.v5m .juTodayMetric:has([data-target="students"])>button,html.v5m .juTodayMetric:has([data-target="classes"])>button{min-height:132px}
html.v5m .juTodayMetric [data-target="tuition"]{padding-right:100px!important}
html.v5m .juTodayMetric .v5MgrBunny{height:96%!important;right:96px!important;opacity:.95}
html.v5m .juTodayMetric .juMetricText{position:relative;z-index:2}
@media(max-width:400px){html.v5m #juWorkspace .juV4Brand{font-size:30px!important}}
html.v5m #juWorkspace img.v5MgrMascot{height:auto!important;max-height:none!important;object-fit:contain!important;width:44%!important;max-width:200px!important}
html.v5m .juTodayMetric>button .juMetricText{min-width:0;flex:1 1 auto}
html.v5m .juTodayMetric>button .juMetricText>span{white-space:nowrap!important;font-size:13px!important;max-width:none!important}
html.v5m .juTodayMetric [data-target="tuition"]::after{display:none!important}
html.v5m .juTodayMetric [data-target="tuition"]{padding-right:16px!important}
html.v5m .juTodayMetric .juFinanceMetricEye{right:12px!important;top:12px!important;transform:none!important}
html.v5m .juTodayMetric .v5MgrBunny{right:40px!important;height:88%!important;bottom:0}
html.v5m .juTodayMetric:has([data-target="students"])>button,html.v5m .juTodayMetric:has([data-target="classes"])>button{flex-direction:column!important;align-items:flex-start!important;gap:8px!important;min-height:0!important;padding:14px 14px 16px!important}
html.v5m .juTodayMetric:has([data-target="students"])>button::after,html.v5m .juTodayMetric:has([data-target="classes"])>button::after{top:14px;bottom:auto}
html.v5m .juTodayMetric:has([data-target="students"]) .juMetricIcon,html.v5m .juTodayMetric:has([data-target="classes"]) .juMetricIcon{margin-top:0!important}
html.v5m .juTodayMetric:has([data-target="students"]) .juMetricText>span,html.v5m .juTodayMetric:has([data-target="classes"]) .juMetricText>span{font-size:14px!important}
html.v5m #juWorkspace .juV4Top .juMuted{margin-top:46px!important}
html.v5m .juTodayMetric:has([data-target="students"])>button::after,html.v5m .juTodayMetric:has([data-target="classes"])>button::after{top:auto!important;bottom:12px!important;right:12px!important;width:30px;height:30px;font-size:20px;line-height:28px}
html.v5m .juTodayMetric:has([data-target="students"]) .juMetricText>span,html.v5m .juTodayMetric:has([data-target="classes"]) .juMetricText>span{white-space:normal!important;font-size:13.5px!important;line-height:1.2!important}
/* ===== Quản lý – Menu (mẫu 05) ===== */
html.v5m #side{background:linear-gradient(180deg,#e9dcff 0,#f6f0ff 30%,#fbf8ff 60%,#efe5ff 100%)!important;overflow:hidden auto}
html.v5m #side .brand{font-size:56px!important;letter-spacing:-1px;padding-top:24px!important;z-index:2}
html.v5m .juV4SideIntro{padding:4px 24px 26px!important;z-index:2}
html.v5m .juV4SideIntro .juV4English{font-size:15px;padding:6px 16px;letter-spacing:3px}
html.v5m .juV4SideIntro p[hidden]{display:block!important;margin:14px 0 0;font-size:13.5px;line-height:1.4;color:#6a35d0;white-space:pre-line;max-width:150px}
html.v5m .juV4SideIntro .juV4SideReader{width:176px!important;height:auto!important;right:-6px!important;left:auto!important;top:-44px!important;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 55% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 55% 52%,#000 62%,transparent 100%)}
html.v5m #side::before{content:"";position:absolute;left:-20px;right:-20px;top:206px;height:70px;background:radial-gradient(ellipse 40% 60% at 22% 100%,#fff 60%,transparent 62%),radial-gradient(ellipse 45% 70% at 80% 100%,#fff 60%,transparent 62%);opacity:.75;pointer-events:none}
html.v5m #juNav button{background:transparent!important;box-shadow:none!important;border-color:transparent!important;font-size:17px}
html.v5m #juNav button.active{background:#fff!important;box-shadow:0 6px 18px rgba(106,53,208,.12)!important;border:1px solid #ece2ff!important}
html.v5m #juNav button:not(.active)::after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border:solid #9b7ae0;border-width:0 2.4px 2.4px 0;transform:translateY(-50%) rotate(-45deg);border-radius:1px}
html.v5m #juNav button[data-route="settings"]::after,html.v5m #juNav button[data-route="mine"]::after{display:none}
html.v5m #juNav button.active svg *{fill:currentColor;stroke:currentColor}
html.v5m #juNav button[data-route="students"] svg *{fill:currentColor}
html.v5m .juV4SideGift{width:260px!important;height:auto!important;margin:-28px -18px 0 auto!important;display:block;-webkit-mask-image:radial-gradient(ellipse 70% 68% at 55% 55%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 70% 68% at 55% 55%,#000 60%,transparent 100%)}
html.v5m #logout{display:flex!important;align-items:center;justify-content:center;gap:12px;font-size:17px!important;font-weight:800;border-radius:20px!important;padding:15px!important;border:1px solid #ece2ff!important;box-shadow:0 8px 20px rgba(106,53,208,.10)!important}
html.v5m #logout .v5svg{width:24px;height:24px}
html.v5m #side::before{display:none}
html.v5m .juV4SideIntro .juV4SideReader{top:-150px!important;width:186px!important;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%)!important;mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%)!important}
html.v5m #side .brand{font-size:50px!important}
html.v5m .juV4SideIntro{padding-bottom:14px!important}
html.v5m .juV4SideIntro p[hidden]{max-width:none}
html.v5m .juV4SideGift{width:210px!important;margin:-44px -10px -8px auto!important;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%)!important;mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%)!important}
html.v5m #juNav button{min-height:54px!important;padding-top:6px!important;padding-bottom:6px!important}
html.v5m .juV4SideIntro{overflow:visible!important}
html.v5m .juV4SideIntro .juV4SideReader{top:-118px!important;right:-14px!important;width:196px!important;z-index:-1}
html.v5m #juMenuClose{z-index:5}
html.v5m .juV4SideIntro{min-height:0!important;height:auto!important;margin-bottom:18px!important}
html.v5m #side #juNav{margin-top:0!important}
html.v5m #side.open,html.v5m #side{overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y}
html.v5m #side>*{flex-shrink:0}
html.v5m #app #side.side{overflow-x:hidden!important;overflow-y:auto!important}
/* ===== HS – Pet (mẫu HS-02) ===== */
html.v5s .giftBox{padding:22px 18px 22px!important;border-radius:28px!important;overflow:hidden;background:radial-gradient(ellipse 60% 30% at 85% 100%,#fff 0 55%,transparent 57%),radial-gradient(ellipse 50% 22% at 10% 100%,#fff 0 55%,transparent 57%),radial-gradient(circle at 80% 30%,#fff1ff 0,transparent 45%),linear-gradient(160deg,#fbf2ff 0,#efe3ff 55%,#f7eeff 100%)!important;border:1px solid #eadcff!important;box-shadow:0 14px 34px rgba(106,53,208,.13)!important}
html.v5s .giftBox .eventPill{font-size:12.5px!important;padding:5px 11px!important;margin-bottom:6px}
html.v5s .giftBox h2{font-size:29px!important;line-height:1.15!important;max-width:64%;margin:6px 0 12px!important;background:linear-gradient(180deg,#7a2ff0,#3d0fa0);-webkit-background-clip:text;background-clip:text;color:transparent!important;font-weight:900!important;position:relative;z-index:1}
html.v5s .giftBox p{max-width:58%;font-size:14px!important;line-height:1.5!important;color:#3a2470!important;position:relative;z-index:1}
html.v5s .giftBox p b{color:#4b17b8}
html.v5s .giftBox .giftMascot{width:200px!important;height:auto!important;max-height:none!important;top:84px!important;right:-18px!important;bottom:auto!important;object-fit:contain!important;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
html.v5s .giftBox #openGiftBtn{display:flex!important;align-items:center;justify-content:center;gap:10px;width:86%;margin:18px auto 4px!important;padding:15px 18px!important;border-radius:999px!important;font-size:19px!important;font-weight:900!important;background:linear-gradient(180deg,#9a6af7,#6a30d8)!important;color:#fff!important;border:3px solid #fff!important;box-shadow:0 8px 0 #5320b8,0 14px 24px rgba(106,53,208,.35)!important;position:relative;z-index:2}
html.v5s .giftBox #openGiftBtn::before{content:"";width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cellipse cx='6' cy='9' rx='2.2' ry='2.8'/%3E%3Cellipse cx='10' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='14.5' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='18.5' cy='9' rx='2.2' ry='2.8'/%3E%3Cpath d='M12 11c-3 0-6.5 4-6.5 6.6 0 2.4 2.6 2.6 6.5 1.6 3.9 1 6.5.8 6.5-1.6C18.5 15 15 11 12 11z'/%3E%3C/svg%3E") center/contain no-repeat}
html.v5s .giftBox::after{content:"✦";position:absolute;left:22px;bottom:70px;color:#ffc93c;font-size:30px;text-shadow:0 2px 0 #f2a400}
html.v5s .collectionQuest{position:relative;overflow:hidden;border-radius:28px!important;padding:20px 18px!important}
html.v5s .collectionQuest h2{color:#5a1fd0!important;font-size:25px!important;font-weight:900!important;max-width:72%}
html.v5s .collectionQuest p b{color:#3d0fa0;font-weight:900}
html.v5s .collectionQuest .v5QuestArt{position:absolute;right:10px;top:16px;width:110px;height:auto;pointer-events:none}
html.v5s .collectionQuest>div{position:relative;z-index:1}
html.v5s .collectionDots i{width:28px!important;height:28px!important;border-radius:9px!important;background:#f1eafe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d9c9fb'%3E%3Cellipse cx='6' cy='9' rx='2.2' ry='2.8'/%3E%3Cellipse cx='10' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='14.5' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='18.5' cy='9' rx='2.2' ry='2.8'/%3E%3Cpath d='M12 11c-3 0-6.5 4-6.5 6.6 0 2.4 2.6 2.6 6.5 1.6 3.9 1 6.5.8 6.5-1.6C18.5 15 15 11 12 11z'/%3E%3C/svg%3E") center/62% no-repeat!important;border:1px solid #ece2ff}
html.v5s .voucherNote{position:relative;padding:12px 52px 12px 14px!important;border-radius:20px!important;background:#f6f0ff!important;color:#7a6aa0!important;font-size:12.5px!important}
html.v5s .voucherNote::after{content:"";position:absolute;right:14px;top:50%;width:28px;height:28px;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d4c2fa'%3E%3Cellipse cx='6' cy='9' rx='2.2' ry='2.8'/%3E%3Cellipse cx='10' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='14.5' cy='5.5' rx='2.2' ry='2.8'/%3E%3Cellipse cx='18.5' cy='9' rx='2.2' ry='2.8'/%3E%3Cpath d='M12 11c-3 0-6.5 4-6.5 6.6 0 2.4 2.6 2.6 6.5 1.6 3.9 1 6.5.8 6.5-1.6C18.5 15 15 11 12 11z'/%3E%3C/svg%3E") center/contain no-repeat}
html.v5s .giftBox h2{background:none!important;color:#4314b0!important;-webkit-text-fill-color:#4314b0;font-size:26px!important;max-width:68%}
html.v5s .giftBox .giftMascot{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%)!important;mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 58%,transparent 100%)!important;top:70px!important}
html.v5s .collectionQuest h2{font-size:22px!important;max-width:68%}
html.v5s .collectionQuest .v5QuestArt{width:96px;right:8px;top:12px}
html.v5s .collectionQuest h2{max-width:none;font-size:22px!important;white-space:nowrap}
html.v5s .collectionQuest .v5QuestArt{width:78px;top:8px;right:12px}
/* ===== HS – Học tập (mẫu HS-05) ===== */
html.v5s .juiHeading.v5StudyHead{position:relative;min-height:150px;display:flex;align-items:center}
html.v5s .juiHeading.v5StudyHead h1{font-size:40px!important;font-weight:900;position:relative;z-index:1}
html.v5s .juiHeading.v5StudyHead::before,html.v5s .juiHeading.v5StudyHead::after{display:none!important}
html.v5s .v5StudyArt{position:absolute;right:-8px;top:-6px;width:62%;max-width:250px;height:auto;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 52% 50% at 50% 50%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 52% 50% at 50% 50%,#000 60%,transparent 100%)}
html.v5s .v5Row{position:relative;display:grid!important;grid-template-columns:56px 1fr;column-gap:14px;align-items:start;text-align:left!important;padding:18px 16px!important;overflow:hidden;border-radius:24px!important;min-height:118px}
html.v5s .v5Row>*:not(.v5RowTile):not(.v5RowArt){grid-column:2;position:relative;z-index:1;margin:0!important;max-width:calc(100% - 70px)}
html.v5s .v5Row .big{display:none!important}
html.v5s .v5RowTile{grid-column:1;grid-row:1/span 3;width:56px;height:56px;border-radius:16px;overflow:hidden;display:block}
html.v5s .v5RowTile img{width:100%;height:100%;object-fit:cover;display:block}
html.v5s .v5Row h2{font-size:21px!important;color:#5a1fd0!important;font-weight:900!important;margin:2px 0 6px!important}
html.v5s .v5Row p{font-size:13px!important;line-height:1.45!important;color:#5d4a8a!important}
html.v5s .v5RowArt{position:absolute;right:-6px;bottom:-4px;width:118px;height:auto;opacity:.9;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%)}
html.v5s .juiNotice.v5Row{background:#fff!important;border:1px solid #eee5ff!important;box-shadow:0 10px 26px rgba(106,53,208,.08)!important}
html.v5s .juiStats>div{border-radius:20px!important}
html.v5s .juiStats strong{color:#5a1fd0!important;font-size:26px!important}
html.v5s .v5Row h2{font-size:18.5px!important;line-height:1.25!important}
html.v5s .juiHeading.v5StudyHead{margin-bottom:-10px}
/* ===== Giảm giật khi cuộn trên điện thoại ===== */
html.v5s .v5Mascot,html.v5s .v5Controller,html.v5s .v5CardArt,html.v5s .v5CardPic,html.v5s .v5GameBanner img,html.v5m .v5MgrMascot,html.v5m .v5MgrBunny,html.v5s .giftMascot,html.v5s .v5StudyArt,html.v5s .v5RowArt,html.v5s .v5QuestArt,html.v5m .juV4SideReader,html.v5m .juV4SideGift{filter:none!important;animation:none!important}
html.v5s *,html.v5m *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.v5m .main>.top{background:rgba(250,246,255,.97)!important}
@media (max-width:820px){html.v5s .card,html.v5s .juiAssignment,html.v5s .juiGameCard,html.v5m .juTodayMetric{box-shadow:0 6px 16px rgba(106,53,208,.08)!important}}