/* ═══════════════════════════════════════════════════════════════════
X SOROBAN — DESIGN SYSTEM v2.0 (Premium Educational)
Designed for Vietnamese soroban learners + parents
═══════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
/* ─── PRIMARY PALETTE ─── */
/* Teal: trust, education, focus */
--primary-50:#ECFEFF; --primary-100:#CFFAFE; --primary-200:#A5F3FC;
--primary-300:#67E8F9; --primary-400:#22D3EE; --primary-500:#0D7377;
--primary-600:#0B5F62; --primary-700:#084B4E; --primary-800:#063638;
/* Accent: Warm Coral — energy, action, CTA */
--accent-50:#FFF1ED; --accent-100:#FFE2D6; --accent-200:#FFC4AC;
--accent-500:#FF6B35; --accent-600:#E55A2C; --accent-700:#C04820;
/* ─── NEUTRALS ─── */
--gray-0:#FFFFFF;
--gray-50:#FAFBFC; --gray-100:#F4F6F8; --gray-200:#E5E9ED;
--gray-300:#D5DBE1; --gray-400:#B0B8C1; --gray-500:#8B95A1;
--gray-600:#5C6773; --gray-700:#3D4855; --gray-800:#1F2937; --gray-900:#0F172A;
/* ─── SEMANTIC ─── */
--success-50:#ECFDF5; --success-500:#10B981; --success-600:#059669;
--warning-50:#FFFBEB; --warning-500:#F59E0B; --warning-600:#D97706;
--danger-50:#FEF2F2; --danger-500:#EF4444; --danger-600:#DC2626;
--info-50:#EFF6FF; --info-500:#3B82F6; --info-600:#2563EB;
/* ─── LEGACY ALIASES (giữ tương thích với code cũ) ─── */
--teal:var(--primary-500); --teal2:var(--primary-400); --teal-light:var(--primary-50); --teal-dark:var(--primary-700);
--orange:var(--accent-500); --orange-light:var(--accent-50);
--yellow:#FFD93D;
--green:var(--success-600); --green-light:var(--success-50);
--red:var(--danger-600); --red-light:var(--danger-50);
--purple:#7C3AED; --purple-light:#F3E8FF;
--blue:var(--info-600); --blue-light:var(--info-50);
--muted:var(--gray-500); --border:var(--gray-200); --text:var(--gray-800);
/* ─── TYPOGRAPHY (v94: ưu tiên system font dễ đọc cho VN) ─── */
--font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI','SF Pro Display','Inter','Be Vietnam Pro',Roboto,'Helvetica Neue',Arial,sans-serif;
--font-mono:'SF Mono','JetBrains Mono','Courier New',ui-monospace,monospace;
/* v94: tăng kích cỡ chữ chuẩn — dễ đọc hơn cho HS tiểu học + người lớn tuổi */
--text-xs:12px; --text-sm:14px; --text-base:15px; --text-md:16px;
--text-lg:18px; --text-xl:21px; --text-2xl:25px; --text-3xl:31px; --text-4xl:38px;
/* ─── SPACING (4px base scale) ─── */
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
--space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
--space-12:48px; --space-16:64px;
/* ─── RADIUS ─── */
--radius-xs:4px; --radius-sm:8px; --radius-md:12px;
--radius-lg:16px; --radius-xl:20px; --radius-2xl:28px; --radius-full:9999px;
/* ─── SHADOWS (multi-layer, soft) ─── */
--shadow-xs:0 1px 2px 0 rgba(15,23,42,.04);
--shadow-sm:0 1px 3px 0 rgba(15,23,42,.08), 0 1px 2px -1px rgba(15,23,42,.04);
--shadow-md:0 4px 8px -2px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.05);
--shadow-lg:0 12px 24px -6px rgba(15,23,42,.10), 0 4px 8px -4px rgba(15,23,42,.06);
--shadow-xl:0 24px 48px -12px rgba(15,23,42,.18), 0 8px 16px -8px rgba(15,23,42,.08);
--shadow-glow:0 0 0 4px rgba(13,115,119,.12);
--shadow-glow-accent:0 0 0 4px rgba(255,107,53,.18);
/* ─── TRANSITIONS ─── */
--t-fast:150ms cubic-bezier(.4,0,.2,1);
--t-base:200ms cubic-bezier(.4,0,.2,1);
--t-smooth:300ms cubic-bezier(.4,0,.2,1);
--t-bounce:400ms cubic-bezier(.34,1.56,.64,1);
}
html{font-size:16px}
body{
font-family:var(--font-sans);
/* v94: bỏ font-feature-settings exotic + tracking âm → chữ rõ hơn cho tiếng Việt */
background:var(--gray-50);
background-image:
radial-gradient(circle at 0% 0%, rgba(13,115,119,.04) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, rgba(255,107,53,.04) 0%, transparent 50%);
min-height:100vh;
min-height:100dvh; /* Chrome Android: tránh URL bar đẩy bottom-nav lên */
color:var(--text); padding:var(--space-3) var(--space-4);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
letter-spacing:0; /* v94: bỏ -0.01em → chữ thoáng, dễ đọc */
line-height:1.55; /* v94: line-height rộng hơn → đỡ chật */
}
.container{max-width:1200px; margin:0 auto}
/* ═══════════════════════════════════════════════════════════════════
v154.0 — DESKTOP WIDENING (mở rộng layout cho laptop/desktop rộng)
- Tăng max-width container theo bậc thang để dùng hết khoảng trống
2 bên trên màn hình lớn, nhưng KHÔNG kéo dãn chữ/hình ảnh.
- Tăng đồng thời các biến typography để chữ to lên CÂN ĐỐI với width.
- Tăng padding body / hero card cho khoảng thở hợp lý.
- Mobile / tablet không bị ảnh hưởng (giữ nguyên trải nghiệm).
═══════════════════════════════════════════════════════════════════ */
/* Laptop 13-14" (1280-1439px) — nới container, giữ chữ gần như cũ */
@media (min-width:1280px){
.container{max-width:1320px}
body{padding:var(--space-4) var(--space-5)}
:root{
--text-base:16px; --text-md:17px;
--text-lg:19px; --text-xl:22px;
--text-2xl:27px; --text-3xl:33px; --text-4xl:42px;
}
/* 3 hero cards lớn hơn cho cân đối */
.home-mega{gap:20px;margin:18px 0 12px}
.home-mega-card{padding:38px 28px;min-height:230px;border-radius:28px}
.home-mega-card .hmc-icon-big{font-size:84px;margin-bottom:16px}
.home-mega-card .hmc-title-big{font-size:30px;margin-bottom:10px}
.home-mega-card .hmc-sub-big{font-size:15.5px;margin-bottom:16px}
.home-mega-card .hmc-cta{font-size:14px;padding:10px 22px}
/* Card chung — padding rộng hơn */
.card{padding:var(--space-8)}
/* Hero 3D banner trang chủ — chữ to hơn */
.xsb-hero-3d{padding:34px 32px;border-radius:28px}
.xsb-hero-3d h2{font-size:28px !important}
}
/* Laptop 15-16" / iMac 21.5" (1440-1679px) — bậc lớn nhất phổ biến */
@media (min-width:1440px){
.container{max-width:1480px}
body{padding:var(--space-5) var(--space-6)}
:root{
--text-base:17px; --text-md:18px;
--text-lg:20px; --text-xl:24px;
--text-2xl:30px; --text-3xl:36px; --text-4xl:46px;
/* Spacing scale cũng nới lên 1 nhịp để cân với chữ to hơn */
--space-4:18px; --space-5:22px; --space-6:28px;
}
.home-mega{gap:24px;margin:22px 0 14px}
.home-mega-card{padding:44px 32px;min-height:260px}
.home-mega-card .hmc-icon-big{font-size:96px;margin-bottom:18px}
.home-mega-card .hmc-title-big{font-size:34px;margin-bottom:12px}
.home-mega-card .hmc-sub-big{font-size:16.5px;line-height:1.5;margin-bottom:18px}
.home-mega-card .hmc-cta{font-size:15px;padding:11px 26px}
.xsb-hero-3d{padding:40px 36px}
.xsb-hero-3d h2{font-size:32px !important}
.xsb-stat-pill{padding:14px 22px !important;min-width:108px !important}
.xsb-stat-pill > div:first-child{font-size:26px !important}
}
/* Màn 17"+ / Full HD 1920 — full giãn */
@media (min-width:1680px){
.container{max-width:1600px}
:root{
--text-base:18px; --text-md:19px;
--text-lg:21px; --text-xl:25px;
--text-2xl:32px; --text-3xl:40px; --text-4xl:52px;
}
.home-mega-card{min-height:280px;padding:50px 36px}
.home-mega-card .hmc-icon-big{font-size:108px}
.home-mega-card .hmc-title-big{font-size:38px}
.home-mega-card .hmc-sub-big{font-size:18px}
.xsb-hero-3d h2{font-size:36px !important}
}
/* Màn 2K-4K (≥1920px) — giới hạn lại để không quá tải */
@media (min-width:1920px){
.container{max-width:1760px}
body{padding:var(--space-6) var(--space-8)}
}
/* ─── v154: Login screen widening (login-shell ngoài .container) ─── */
@media (min-width:1280px){
.login-shell{max-width:1240px; gap:var(--space-10)}
.login-hero{padding:var(--space-12) var(--space-10)}
.login-form-side{padding:var(--space-12) var(--space-10)}
.login-hero-title{font-size:42px}
.login-hero-tagline{font-size:20px; max-width:460px}
.login-hero-feat{font-size:16px}
.login-hero-feat .feat-icon{width:42px; height:42px; font-size:20px}
}
@media (min-width:1440px){
.login-shell{max-width:1380px}
.login-hero{padding:64px 56px}
.login-form-side{padding:64px 56px}
.login-hero-title{font-size:48px}
.login-hero-tagline{font-size:22px; max-width:520px}
.login-hero-feat{font-size:17px; gap:16px}
.login-hero-feat .feat-icon{width:46px; height:46px; font-size:22px}
.login-hero-stats{gap:36px; padding-top:28px; margin-top:28px}
.login-hero-stat .num{font-size:34px}
.login-box h2{font-size:36px}
}
@media (min-width:1680px){
.login-shell{max-width:1500px}
.login-hero{padding:72px 64px}
.login-form-side{padding:72px 64px}
.login-hero-title{font-size:54px}
.login-hero-tagline{font-size:23px; max-width:560px}
}
@media (min-width:1920px){
.login-shell{max-width:1620px}
}
/* ─── v154.155: Login TRÀN VIỀN 2 cột (desktop ≥1024px) — bỏ lề dư hai bên:
hero trái + đăng nhập phải phủ KÍN màn hình, login-box canh giữa.
Chỉ áp desktop; mobile (<1024px) giữ nguyên. ─── */
@media (min-width:1024px){
#loginOverlay{ padding:0 !important; align-items:stretch !important; }
.login-shell{
max-width:none !important; width:100% !important;
min-height:100vh;
border-radius:0 !important; box-shadow:none !important; border:none !important;
gap:0 !important; animation:none !important;
}
.login-form-side{ display:flex; flex-direction:column; justify-content:center; }
.login-box{ max-width:560px; width:100%; margin-left:auto; margin-right:auto; }
}
/* ─── v154: Override font-size cho watercolor login overlay (vì rule cũ
dùng !important nên buộc phải tăng specificity + !important) ─── */
@media (min-width:1280px){
#loginOverlay .login-hero-title{font-size:44px !important}
#loginOverlay .login-hero-tagline,
#loginOverlay .login-hero-tagline *{font-size:21px !important}
#loginOverlay .login-hero-feat{font-size:16px !important; padding:12px 16px !important}
#loginOverlay .login-hero{padding:56px 48px !important}
#loginOverlay .login-form-side{padding:56px 48px !important}
}
@media (min-width:1440px){
#loginOverlay .login-hero-title{font-size:50px !important}
#loginOverlay .login-hero-tagline,
#loginOverlay .login-hero-tagline *{font-size:23px !important; line-height:1.6 !important}
#loginOverlay .login-hero-feat{font-size:17px !important; padding:14px 18px !important}
#loginOverlay .login-hero{padding:64px 56px !important}
#loginOverlay .login-form-side{padding:64px 56px !important}
#loginOverlay .login-box h2{font-size:36px !important}
}
@media (min-width:1680px){
#loginOverlay .login-hero-title{font-size:56px !important}
#loginOverlay .login-hero-tagline,
#loginOverlay .login-hero-tagline *{font-size:24px !important}
#loginOverlay .login-hero{padding:72px 64px !important}
#loginOverlay .login-form-side{padding:72px 64px !important}
}
/* ─── v154.1: Đặt #xsbHomeClassCard (ngôi trường) + #xsbBachiAiCard (Bachi)
NẰM NGANG trên desktop, mobile vẫn xếp dọc. JS sẽ tự wrap 2 card vào
.xsb-home-pair khi DOM ready (xem script cuối ). ─── */
.xsb-home-pair{display:block;margin-bottom:14px}
.xsb-home-pair > #xsbHomeClassCard,
.xsb-home-pair > #xsbBachiAiCard{margin-bottom:12px}
@media (min-width:900px){
.xsb-home-pair{
display:grid;
grid-template-columns:1fr 1fr; /* v154.2: tỷ lệ 1:1 — 2 card bằng nhau */
gap:14px;
align-items:stretch;
justify-content:center;
}
.xsb-home-pair > #xsbHomeClassCard,
.xsb-home-pair > #xsbBachiAiCard{margin-bottom:0;height:100%}
/* Bachi card: căn giữa nội dung theo chiều dọc khi card cao */
.xsb-home-pair > #xsbBachiAiCard{
align-self:stretch;
justify-content:center !important;
}
}
@media (min-width:1280px){
.xsb-home-pair{grid-template-columns:1fr 1fr;gap:20px}
/* v154.5: Bachi TO GẤP NHIỀU LẦN — chiếm phần lớn chiều cao card */
.xsb-home-pair > #xsbBachiAiCard #xsbBachiAiAvatar{
width:180px !important;height:180px !important;
}
.xsb-home-pair > #xsbBachiAiCard{padding:18px 22px !important;gap:18px !important}
.xsb-home-pair > #xsbBachiAiCard > div:nth-child(2) > div:nth-child(1){font-size:12px !important}
.xsb-home-pair > #xsbBachiAiCard > div:nth-child(2) > div:nth-child(2){font-size:21px !important;line-height:1.2 !important}
.xsb-home-pair > #xsbBachiAiCard > div:nth-child(2) > div:nth-child(3){font-size:13px !important;line-height:1.45 !important}
}
@media (min-width:1440px){
.xsb-home-pair{gap:24px}
/* Bachi gần bằng chiều cao card */
.xsb-home-pair > #xsbBachiAiCard #xsbBachiAiAvatar{
width:220px !important;height:220px !important;
}
.xsb-home-pair > #xsbBachiAiCard{padding:22px 28px !important;gap:22px !important}
.xsb-home-pair > #xsbBachiAiCard > div:nth-child(2) > div:nth-child(2){font-size:24px !important}
.xsb-home-pair > #xsbBachiAiCard > div:nth-child(2) > div:nth-child(3){font-size:14px !important}
}
@media (min-width:1680px){
.xsb-home-pair > #xsbBachiAiCard #xsbBachiAiAvatar{
width:260px !important;height:260px !important;
}
.xsb-home-pair > #xsbBachiAiCard{padding:26px 32px !important}
}
/* ─── v154.12: Mở rộng màn HS trong lớp học (xsbTabClassHome)
Container đã đổi inline 680→1100px. Đây thêm grid responsive cho quick tiles
và scale typography cho desktop để khớp màn GV. ─── */
@media (min-width:900px){
.xsb-stu-quick-grid{
grid-template-columns:repeat(3, 1fr) !important;
gap:14px !important;
}
/* Đua Pet tile vẫn span full chiều ngang */
.xsb-stu-quick-grid > button[onclick*="xsbOpenPetRace"]{
grid-column:span 3 !important;
}
}
@media (min-width:1280px){
.xsb-stu-home-wrap{max-width:1240px !important}
.xsb-stu-quick-grid{gap:16px !important}
/* Hero greeting + Bảng đen padding rộng hơn trên desktop */
.xsb-stu-home-wrap > div:first-child{padding:18px 22px !important}
.xsb-stu-home-wrap > div:first-child > div:nth-child(2) > div:nth-child(2){font-size:21px !important}
#xsbHomeBoard{padding:28px 32px !important; min-height:220px !important}
#xsbHomeBoard > div:first-child{font-size:15px !important}
.xsb-stu-quick-grid > button{padding:16px !important}
.xsb-stu-quick-grid > button > div:nth-child(1){font-size:40px !important}
.xsb-stu-quick-grid > button > div:nth-child(2){font-size:15px !important}
.xsb-stu-quick-grid > button > div:nth-child(3){font-size:11.5px !important}
}
@media (min-width:1440px){
.xsb-stu-home-wrap{max-width:1360px !important}
#xsbHomeBoard{padding:32px 40px !important; min-height:240px !important}
}
/* ─── v154.11: File user export ra vẫn có nền trắng (không true transparent).
Multiply blend mode: TRẮNG × màu card = màu card → trắng "tan" vào card.
Pixel transparent thật (alpha=0) cũng không bị multiply ảnh hưởng.
→ Hoạt động đúng cả 2 trường hợp BG: trắng hay transparent ─── */
#xsbBachiAiAvatar img{
width:100% !important;height:100% !important;
object-fit:contain !important;
/* Multiply ăn nền trắng PNG export của user — Bachi sạch tinh trên lavender */
mix-blend-mode:multiply;
filter:saturate(1.08) contrast(1.05);
/* hiệu ứng nhẹ float */
animation:bachiFloat 4s ease-in-out infinite;
}
@keyframes bachiFloat{
0%,100%{transform:translateY(0) rotate(-1deg)}
50%{transform:translateY(-6px) rotate(1.5deg)}
}
@media (prefers-reduced-motion: reduce){
#xsbBachiAiAvatar img{animation:none}
}
/* ═══ HEADER — Refined ═══ */
header{
background:linear-gradient(180deg,#FFFCF6,#FBF1E0);
color:var(--gray-900);
padding:var(--space-4) var(--space-6);
border-radius:var(--radius-xl);
box-shadow:0 8px 22px rgba(150,100,40,.12), inset 0 1px 0 rgba(255,255,255,.7);
border:1px solid #F0DEC2;
border-bottom:2px solid #EAD3AE;
display:flex; justify-content:space-between; align-items:center;
margin-bottom:var(--space-4); flex-wrap:wrap; gap:var(--space-3);
}
header h1{
font-size:var(--text-xl); font-weight:800;
display:flex; align-items:center; gap:var(--space-3);
color:var(--gray-900);
}
.logo{
width:38px; height:38px;
background:linear-gradient(135deg,var(--primary-500),var(--primary-400));
border-radius:var(--radius-md);
display:flex; align-items:center; justify-content:center;
font-size:18px; font-weight:900; color:#fff;
box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.25);
}
.stat-row{display:flex; gap:var(--space-2); flex-wrap:wrap}
/* v154.73 → v154.75: nút header có icon + chữ */
.xsb-hdr-btn{
padding:6px 12px !important;
display:inline-flex !important;
align-items:center !important;
gap:6px;
font-size:12px;
font-weight:600;
line-height:1.2;
white-space:nowrap;
}
.xsb-hdr-btn .icon{flex-shrink:0; width:16px; height:16px}
.xsb-hdr-btn .xsb-hdr-label{display:inline-block}
/* v154.294: nút "Cập nhật phần mềm" nhấp nháy khi có bản mới */
@keyframes xsbUpdPulse{0%{box-shadow:0 2px 8px rgba(230,100,18,.4),0 0 0 0 rgba(226,75,74,.5)}70%{box-shadow:0 2px 8px rgba(230,100,18,.4),0 0 0 11px rgba(226,75,74,0)}100%{box-shadow:0 2px 8px rgba(230,100,18,.4),0 0 0 0 rgba(226,75,74,0)}}
#xsbResetCacheBtnHeader.xsbUpd-has{animation:xsbUpdPulse 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#xsbResetCacheBtnHeader.xsbUpd-has{animation:none}}
/* v154.295: hub modal con mèo — 2 thẻ/hàng, kích thước bằng nhau (màn đủ rộng) */
@media(min-width:680px){#sorobanHubModal .sbz-grid{grid-template-columns:1fr 1fr}}
/* v154.296: điện thoại dọc — nút header không bị tràn/đè. Rút gọn "Cập nhật phần mềm"→"Cập nhật", ẩn chữ badge (giữ chấm đỏ), cho xuống dòng */
@media(max-width:640px){
.stat-row{flex-wrap:wrap !important}
#xsbResetCacheBtnHeader{font-size:11px !important;padding:6px 9px !important}
.xsbUpdPm{display:none}
#xsbUpdNewTag{display:none !important}
}
/* v154.77: Filler header — Bachi mascot + quote xoay vòng ở giữa khoảng trống.
Mobile (<768px) ẨN hoàn toàn để tiết kiệm chiều cao. */
.xsb-hdr-filler{display:none}
@media (min-width: 768px){
.xsb-hdr-filler{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
flex:1 1 auto;
min-width:0;
margin:0 16px;
padding:0 8px;
}
.xsb-hdr-mascot{
width:42px; height:42px;
flex-shrink:0;
object-fit:contain;
border-radius:50%;
animation:xsbHdrBachiFloat 3.2s ease-in-out infinite;
filter:drop-shadow(0 2px 5px rgba(0,0,0,.12));
mix-blend-mode:multiply; /* ăn nền trắng của ảnh watercolor (giống .bachi-chat trong app) */
}
@keyframes xsbHdrBachiFloat{
0%,100%{transform:translateY(0) rotate(-3deg)}
50%{transform:translateY(-5px) rotate(3deg)}
}
.xsb-hdr-quote{
font-style:normal;
font-size:14px;
font-weight:700;
color:#9A5B00;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:480px;
transition:opacity .55s ease;
letter-spacing:.2px;
background:linear-gradient(180deg,#FFF4D8,#FFE7B6);
border:1.5px solid #F3C97E;
border-radius:999px;
padding:6px 16px;
box-shadow:0 2px 9px rgba(240,160,40,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
}
@media (min-width: 1100px){
.xsb-hdr-quote{font-size:15px; max-width:640px}
.xsb-hdr-mascot{width:46px; height:46px}
}
@media (min-width: 1400px){
.xsb-hdr-quote{font-size:16px; max-width:820px}
.xsb-hdr-mascot{width:50px; height:50px}
}
/* v154.76b: HEADER GOM 3 NÚT CHO CẢ DESKTOP + MOBILE — đồng style sạch sẽ.
Theo yêu cầu user "trên máy tính được gom đẹp như mobile". Ẩn TẤT CẢ các nút phụ
(sound/dark/fs/device/mascot/tour/install/changepin/tts/rename) → gom vào Menu ⋯ popup.
Header chỉ còn 3 nút primary: Xoá cache / Menu ⋯ / Đăng xuất — phân biệt bằng màu viền. */
.xsb-hdr-secondary > .xsb-hdr-btn{display:none !important}
.xsb-hdr-secondary > #xsbInstallBtn{display:none !important}
#xsbMoreBtn{display:inline-flex !important}
/* 3 nút primary đồng style — chung cho cả desktop + mobile */
#xsbResetCacheBtnHeader,
#xsbMoreBtn,
.xsb-hdr-btn.xsb-hdr-always{
padding:9px 14px !important;
font-size:13px !important;
font-weight:700 !important;
background:#fff !important;
background-image:none !important;
border-radius:12px !important;
box-shadow:0 1px 3px rgba(0,0,0,.06) !important;
display:inline-flex !important;
align-items:center !important;
gap:6px !important;
white-space:nowrap;
}
/* Xoá cache — viền cam (action mạnh, cảnh báo) */
#xsbResetCacheBtnHeader{
border:none !important;
color:#1a1a1a !important;
}
/* Menu — viền teal (action trung tính) */
#xsbMoreBtn{
border:none !important;
color:#1a1a1a !important;
}
/* Đăng xuất — viền đỏ nhạt (exit) */
.xsb-hdr-btn.xsb-hdr-always{
border:none !important;
color:#1a1a1a !important;
}
/* GIỮ CHỮ cho cả 3 nút (gỡ rule ẩn label cũ) — v306: LOẠI span badge "Có bản mới" + chấm đỏ
khỏi rule này, nếu không 'display:inline-block !important' sẽ ĐÈ inline display:none mà JS đặt
→ badge dính cứng dù đã ở bản mới nhất. Để JS tự bật/tắt 2 span đó bằng inline style. */
#xsbResetCacheBtnHeader span:not(#xsbUpdNewTag):not(#xsbUpdNewDot),
.xsb-hdr-btn.xsb-hdr-always .xsb-hdr-label{display:inline-block !important}
/* Hover state nhẹ cho cả 3 — đồng nhất feel */
#xsbResetCacheBtnHeader:hover{background:#F2F2F2 !important}
#xsbMoreBtn:hover{background:#F2F2F2 !important}
.xsb-hdr-btn.xsb-hdr-always:hover{background:#F2F2F2 !important}
/* Mobile (≤767px): 3 nút co giãn nhưng KHÔNG hẹp hơn chữ (hết tràn chữ); chật thì xuống dòng */
@media (max-width: 767px){
#xsbResetCacheBtnHeader,
#xsbMoreBtn,
.xsb-hdr-btn.xsb-hdr-always{
flex:1 1 auto !important;
max-width:none !important;
min-width:max-content !important;
justify-content:center !important;
padding:8px 10px !important;
font-size:12px !important;
}
}
/* v154.75: Modal Menu ⋯ — popup grid icon + chữ rõ ràng */
.xsb-more-modal{
position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:99998;
display:none; align-items:flex-end; justify-content:center;
}
.xsb-more-modal.active{display:flex}
.xsb-more-panel{
background:#fff; width:100%; max-width:520px; border-radius:20px 20px 0 0;
padding:18px 16px 28px; box-shadow:0 -8px 32px rgba(0,0,0,.25);
animation:xsbSlideUp .25s ease;
}
@keyframes xsbSlideUp{from{transform:translateY(100%)} to{transform:translateY(0)}}
@media (min-width: 768px){
.xsb-more-modal{align-items:center}
.xsb-more-panel{border-radius:20px; max-width:480px; animation:xsbFadeIn .2s ease}
}
@keyframes xsbFadeIn{from{opacity:0; transform:scale(.96)} to{opacity:1; transform:scale(1)}}
.xsb-more-title{
font-size:16px; font-weight:800; color:#3D1E5D; text-align:center; margin:0 0 14px;
}
.xsb-more-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
.xsb-more-item{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:6px; padding:14px 8px; background:#F8F4FF; border:1.5px solid #E5D5F0;
border-radius:14px; cursor:pointer; text-align:center;
transition:transform .15s ease, background .15s ease;
font-size:12px; font-weight:600; color:#3D1E5D;
min-height:78px;
}
.xsb-more-item:hover{background:#EFE2FF; transform:translateY(-2px)}
.xsb-more-item:active{transform:scale(.96)}
.xsb-more-item .more-icon{font-size:22px; line-height:1}
.xsb-more-item svg{width:22px; height:22px}
.xsb-more-close{
display:block; width:100%; margin-top:14px; padding:11px;
background:#666; color:#fff; border:0; border-radius:10px;
font-size:14px; font-weight:600; cursor:pointer;
}
.chip{
background:var(--gray-100);
color:var(--gray-700);
padding:6px 12px;
border-radius:var(--radius-full);
font-size:var(--text-sm);
font-weight:600;
display:inline-flex; gap:6px; align-items:center;
border:1px solid var(--gray-200);
transition:all var(--t-fast);
}
.chip:hover{background:var(--gray-200)}
.chip strong{font-size:var(--text-base); color:var(--gray-900); font-weight:700}
/* ═══ TABS — Modern pill style ═══ */
.tabs{
display:flex; gap:var(--space-1);
margin-bottom:var(--space-4);
flex-wrap:wrap;
background:#F8F2E4; /* v154.98: thanh điều hướng kem ấm thay trắng → đỡ chói, đồng bộ app */
padding:6px;
border-radius:var(--radius-lg);
box-shadow:var(--shadow-sm);
border:1px solid rgba(180,150,110,.22);
}
.tab{
flex:1; min-width:88px;
padding:10px 14px;
border:none; cursor:pointer;
border-radius:var(--radius-md);
font-family:var(--font-sans);
font-size:var(--text-sm); font-weight:900; -webkit-text-stroke:.4px currentColor; text-stroke:.4px currentColor;
color:var(--gray-600); background:transparent;
transition:transform .25s cubic-bezier(.34,1.56,.64,1), background .25s, color .25s, box-shadow .3s;
display:flex; align-items:center; justify-content:center; gap:6px;
white-space:nowrap;
position:relative;
}
.tab:hover{background:var(--gray-100); color:var(--gray-900); transform:translateY(-2px)}
.tab.active{
background:linear-gradient(135deg,#0F4C75,#3282B8);
color:#fff;
box-shadow:0 6px 18px rgba(15,76,117,.35), inset 0 1px 0 rgba(255,255,255,.2);
transform:translateY(-2px) scale(1.04);
}
.tab.active::after{
content:''; position:absolute; bottom:-3px; left:50%; transform:translateX(-50%);
width:24px; height:3px; border-radius:2px;
background:linear-gradient(90deg,#FFD93D,#FF9F43);
box-shadow:0 2px 6px rgba(255,159,67,.5);
}
.page{display:none; animation:fadeIn var(--t-smooth) both}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
@keyframes xsbSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes xsbAuraPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.18);opacity:1}}
/* ═══ CARD ═══ */
.card{
background:#fff;
border-radius:var(--radius-xl);
padding:var(--space-6);
box-shadow:var(--shadow-sm);
border:1px solid var(--gray-200);
margin-bottom:var(--space-4);
transition:box-shadow var(--t-base);
}
.card:hover{box-shadow:var(--shadow-md)}
.card h2{
color:var(--gray-900);
margin-bottom:var(--space-4); font-size:var(--text-xl); font-weight:800;
display:flex; align-items:center; gap:var(--space-2);
letter-spacing:-0.02em;
}
.card h3{color:var(--gray-800); margin:var(--space-4) 0 var(--space-2); font-size:var(--text-lg); font-weight:700}
.card p{color:var(--gray-700); line-height:1.7; margin-bottom:var(--space-2)}
/* ═══ BUTTONS — 3 variants ═══ */
.btn{
background:linear-gradient(135deg,var(--primary-500),var(--primary-600));
color:#fff; border:none;
padding:10px 18px;
border-radius:var(--radius-md);
font-family:var(--font-sans);
font-size:var(--text-sm); font-weight:600;
cursor:pointer; transition:all var(--t-fast);
display:inline-flex; align-items:center; gap:6px;
box-shadow:var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,.18);
letter-spacing:-0.005em;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.25)}
.btn:active{transform:translateY(0); box-shadow:var(--shadow-xs)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.btn:focus-visible{outline:none; box-shadow:var(--shadow-glow)}
.btn.orange{background:linear-gradient(135deg,var(--accent-500),var(--accent-600))}
.btn.orange:focus-visible{box-shadow:var(--shadow-glow-accent)}
.btn.green{background:linear-gradient(135deg,var(--success-500),var(--success-600))}
.btn.red{background:linear-gradient(135deg,var(--danger-500),var(--danger-600))}
.btn.purple{background:linear-gradient(135deg,#A78BFA,#7C3AED)}
.btn.ghost{
background:transparent; color:var(--primary-600);
border:1.5px solid var(--gray-300);
box-shadow:none;
}
.btn.ghost:hover{background:var(--primary-50); border-color:var(--primary-500); color:var(--primary-700)}
.btn.big{padding:14px 28px; font-size:var(--text-md); border-radius:var(--radius-lg)}
/* ═══ FORMULA PICKER ═══ */
.formula-section{
border:1px solid var(--gray-200);
border-radius:var(--radius-lg);
padding:var(--space-4);
margin-bottom:var(--space-3);
background:var(--gray-50);
}
.formula-section-title{
font-weight:700; color:var(--gray-800);
margin-bottom:var(--space-3); font-size:var(--text-sm);
display:flex; align-items:center; gap:var(--space-2);
text-transform:uppercase; letter-spacing:.5px;
}
.formula-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:6px 0}
.formula-row span{font-size:var(--text-sm); font-weight:600; color:var(--gray-600); width:44px; flex-shrink:0}
.fcb{display:none}
.flab{
display:inline-flex; align-items:center; justify-content:center;
min-width:40px; height:32px; padding:0 8px;
border:1.5px solid var(--gray-300);
background:#fff;
border-radius:var(--radius-sm);
font-size:var(--text-sm); font-weight:700;
cursor:pointer; transition:all var(--t-fast);
user-select:none; color:var(--gray-600);
}
.flab:hover{border-color:var(--primary-400); color:var(--primary-600); transform:translateY(-1px)}
.fcb:checked + .flab{
border-color:var(--primary-500);
background:var(--primary-500); color:#fff;
box-shadow:var(--shadow-sm);
}
.fcb.sub:checked + .flab{
border-color:var(--accent-500);
background:var(--accent-500); color:#fff;
}
.formula-select-all{
font-size:var(--text-xs); cursor:pointer;
color:var(--primary-600); font-weight:600;
text-decoration:none;
margin-left:var(--space-2);
padding:2px 8px; border-radius:var(--radius-sm);
transition:background var(--t-fast);
}
.formula-select-all:hover{background:var(--primary-50)}
/* ═══ SETTING GRID ═══ */
.setting-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:var(--space-3); margin-bottom:var(--space-3);
}
.sg{
background:#F8F2E4; /* v154.98: kem ấm thay trắng-lạnh #FAFBFC → đỡ chói trên nền app */
padding:var(--space-4);
border-radius:var(--radius-lg);
border:1px solid rgba(180,150,110,.22);
transition:border-color var(--t-fast), background var(--t-fast);
}
.sg:hover{border-color:var(--gray-300)}
.sg label{
display:block;
font-weight:600; color:var(--gray-700);
margin-bottom:var(--space-2);
font-size:var(--text-sm);
}
.sg select, .sg input[type=number], .sg input[type=range], .sg input[type=text], .sg input[type=email]{
width:100%; padding:9px 12px;
border:1.5px solid rgba(180,150,110,.35);
border-radius:var(--radius-sm);
font-family:var(--font-sans);
font-size:var(--text-base);
background:#FCF8F0; /* v154.98: ô nhập kem nhạt (vẫn nổi hơn thẻ để nhận ra) thay trắng gắt */
color:var(--gray-800);
transition:all var(--t-fast);
outline:none;
}
.sg select:focus, .sg input:focus{
border-color:var(--primary-500);
box-shadow:var(--shadow-glow);
}
.sg small{color:var(--gray-500); font-size:var(--text-xs); display:block; margin-top:4px}
/* ANZAN */
@keyframes anzBgPulse{
0%{background:linear-gradient(135deg,#0f0f23 0%,#1a0a3a 100%)}
33%{background:linear-gradient(135deg,#0a1a3a 0%,#0d2040 100%)}
66%{background:linear-gradient(135deg,#0f1f10 0%,#0a2a1a 100%)}
100%{background:linear-gradient(135deg,#0f0f23 0%,#1a0a3a 100%)}
}
@keyframes pop{from{transform:scale(.5) translateY(30px);opacity:0}70%{transform:scale(1.12) translateY(-4px)}to{transform:scale(1) translateY(0);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-14px)}30%{transform:translateX(14px)}45%{transform:translateX(-9px)}60%{transform:translateX(9px)}75%{transform:translateX(-4px)}90%{transform:translateX(4px)}}
@keyframes zoomIn{from{transform:scale(0.2);opacity:0}60%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}
@keyframes starFloat{0%,100%{transform:translateY(0) scale(1);opacity:.5}50%{transform:translateY(-12px) scale(1.2);opacity:1}}
.anzan-display{
min-height:600px;
background:linear-gradient(135deg,#0f0f23 0%,#1a0a3a 100%); /* v154.98: TRẢ VỀ nền tối cũ */
color:#fff;border-radius:24px;
display:flex;align-items:center;justify-content:center;
font-size:clamp(420px,80vw,800px);
font-weight:900;margin:16px 0;
font-family:'Arial Rounded MT Bold',-apple-system,'Segoe UI',Roboto,Arial,sans-serif; /* đậm tròn, dễ đọc (giữ — ổn định cỡ số) */
position:relative;overflow:hidden;
box-shadow:0 0 0 3px rgba(100,200,255,.2), 0 16px 64px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
transition:background .8s ease;
}
/* Scanline overlay removed (was distracting) */
.anzan-display::before{
content:'';position:absolute;left:0;right:0;height:0;pointer-events:none;z-index:1;
}
/* Bottom gradient overlay */
.anzan-display::after{ content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(0,0,0,.35),transparent);pointer-events:none;z-index:1; } /* v154.98: TRẢ VỀ lớp phủ tối đáy */
.anzan-display{
--anz-num-color: #ffffff;
}
.anzan-display .num{
/* v154.98 ỔN ĐỊNH: BỎ numPop (phình/giật). Hiện số bằng fade opacity nhẹ — KHÔNG scale, KHÔNG dịch vị trí, KHÔNG đổi cỡ */
position:relative;z-index:2;
color:var(--anz-num-color,#fff);
text-shadow:0 0 30px rgba(255,255,255,.35),0 0 70px rgba(255,255,255,.12);
white-space:nowrap;
display:block;
width:100%;
text-align:center;
box-sizing:border-box;
padding:0 10px;
font-variant-numeric:tabular-nums;
opacity:0;transition:opacity .14s ease-in-out; /* v154.98: fade dịu hơn → nhịp chớp dễ chịu */
}
/* Dấu +/−/×/÷ treo bên TRÁI chữ số (absolute) → chữ số luôn căn giữa 1 chỗ, dấu KHÔNG đẩy số dịch ngang */
.anzan-display .num .dig{display:inline-block;position:relative;font-variant-numeric:tabular-nums}
.anzan-display .num .sgn{position:absolute;right:100%;margin-right:.06em;white-space:nowrap}
/* v336: ÉP font số ảo tính về sans-serif tròn (chống 'Crimson Pro' serif/italic của brand rò vào → dấu trừ bị nghiêng/chỉa xuống). Dấu +/−/×/÷ và chữ số đều phải thẳng. */
#anzNumLive, #anzNumLive *, .anzan-display .num, .anzan-display .num .dig, .anzan-display .num .sgn{
font-family:'Arial Rounded MT Bold',-apple-system,'Segoe UI',Roboto,Arial,sans-serif !important;
font-style:normal !important;
}
/* v342: HIỆU ỨNG "LẮC CHÀO" vui nhộn cho thẻ Trang chủ — lắc nhẹ theo nhịp (~5s/lần), lệch nhịp 3 nhóm tạo gợn sóng như đang vẫy chào. Dừng khi rê chuột (bấm ổn định); tắt nếu user chọn giảm chuyển động. */
@keyframes xsbCardHello{
0%, 78%, 100%{ transform: rotate(0deg); }
82%{ transform: rotate(-2.6deg); }
86%{ transform: rotate(2.1deg); }
90%{ transform: rotate(-1.5deg); }
94%{ transform: rotate(1deg); }
97%{ transform: rotate(-.4deg); }
}
#page-home .home-mega-card,
#page-home .xsb-hb,
#page-home #xsbHomeClassCard{
animation: xsbCardHello 5s ease-in-out infinite;
transform-origin: 50% 82%;
}
#page-home #xsbHomeClassCard{ animation-delay:.35s; } /* lệch nhịp → gợn sóng lớp 2 */
#page-home .xsb-hb{ animation-delay:.65s; } /* lớp 3: nhóm thẻ chức năng */
#page-home .home-mega-card:hover,
#page-home .xsb-hb:hover,
#page-home #xsbHomeClassCard:hover{ animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){
#page-home .home-mega-card, #page-home .xsb-hb, #page-home #xsbHomeClassCard{ animation: none !important; }
}
.anzan-display.long-num{font-size:clamp(180px,38vw,400px)!important} /* 5-6 chữ số */
.anzan-display.xlong-num{font-size:clamp(110px,28vw,280px)!important} /* 7+ chữ số */
@media (max-width:640px){
.anzan-display.long-num{font-size:clamp(110px,38vw,250px)!important}
.anzan-display.xlong-num{font-size:clamp(70px,28vw,180px)!important}
}
@keyframes numPop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.anzan-display .num.pos{ color:var(--anz-num-color,#fff); } /* v154.98: TRẢ VỀ chữ trắng */
.anzan-display .num.neg{ color:var(--anz-num-color,#fff); }
.anzan-display .num.neutral{ color:var(--anz-num-color,#fff); }
/* Corner star decorations */
.anz-star{position:absolute;font-size:16px;opacity:.25;z-index:0;animation:starFloat 3s ease-in-out infinite}
/* Progress bar inside anzan display */
.anz-pbar-wrap{position:absolute;bottom:0;left:0;right:0;height:5px;background:rgba(255,255,255,.08);z-index:3} /* v154.98: TRẢ VỀ track trên nền tối */
.anz-pbar-fill{height:100%;background:linear-gradient(90deg,#4cf,#a4ff70);border-radius:2px;transition:width .35s linear;width:0%}
/* ===== v154.148: GIAO DIỆN MÀN ẢO TÍNH (HS chọn được) — override bg + màu số + thanh tiến độ, GIỮ cấu trúc chống giật ===== */
.anzan-display.anztheme-galaxy{ background:radial-gradient(circle at 50% 35%,#2a1d66 0%,#140d33 55%,#08061c 100%)!important; --anz-num-color:#8be9ff; }
.anzan-display.anztheme-galaxy .anz-pbar-fill{ background:linear-gradient(90deg,#5bd,#8be9ff)!important; }
.anzan-display.anztheme-ocean{ background:linear-gradient(160deg,#0a4f63 0%,#0D7377 55%,#1fa89b 100%)!important; --anz-num-color:#ffffff; }
.anzan-display.anztheme-ocean .anz-pbar-fill{ background:linear-gradient(90deg,#7fe0d2,#b9f6ca)!important; }
.anzan-display.anztheme-board{ background:#22382e!important; --anz-num-color:#f4f1e4; box-shadow:0 0 0 10px #6d4c33, 0 16px 64px rgba(0,0,0,.6)!important; }
.anzan-display.anztheme-board .num{ text-shadow:none; }
.anzan-display.anztheme-board .anz-pbar-fill{ background:#f0ead6!important; }
.anzan-display.anztheme-day{ background:linear-gradient(160deg,#FFF6E5 0%,#FFE7C2 100%)!important; --anz-num-color:#0D5A53; }
.anzan-display.anztheme-day .num{ text-shadow:none; }
.anzan-display.anztheme-day::after{ background:linear-gradient(to top,rgba(170,110,30,.12),transparent)!important; }
.anzan-display.anztheme-day .anz-pbar-wrap{ background:rgba(0,0,0,.08); }
.anzan-display.anztheme-day .anz-pbar-fill{ background:#FF8A4C!important; }
.anzan-display.anztheme-day .anz-star{ opacity:.55; }
.anzan-display.anztheme-candy{ background:linear-gradient(160deg,#FF7FB0 0%,#C98BFF 100%)!important; --anz-num-color:#ffffff; }
.anzan-display.anztheme-candy .anz-pbar-fill{ background:#FFEB3B!important; }
/* hàng nút chọn giao diện trong Cài đặt */
.anztheme-row{ display:flex; flex-wrap:wrap; gap:6px; }
.anztheme-btn{ display:flex; align-items:center; gap:6px; border:2px solid transparent; border-radius:10px; padding:5px 9px; cursor:pointer; font-size:12px; font-weight:700; background:#F3EEE4; color:#5a4d3a; }
.anztheme-btn .sw{ width:16px; height:16px; border-radius:4px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.anztheme-btn.active{ border-color:#0D7377; background:#E1F5EE; color:#0D4F4F; }
.anzan-input{width:100%;padding:16px;font-size:30px;text-align:center;border:3px solid rgba(100,200,255,.5);border-radius:14px;margin:12px 0;font-family:'Courier New',monospace;font-weight:700;background:rgba(10,20,50,.9);color:#7df;caret-color:#7df;outline:none;transition:border-color .2s,box-shadow .2s}
.anzan-input:focus{border-color:#7df;box-shadow:0 0 0 4px rgba(100,200,255,.15)}
/* Anzan wrapper — fullscreen target */
#anzWrap{position:relative}
/* Session dots */
.sdot{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.2);transition:background .3s,transform .3s;border:1px solid rgba(255,255,255,.15)}
.sdot.ok{background:#4cff88;box-shadow:0 0 6px #4cff88;transform:scale(1.15)}
.sdot.ng{background:#ff5555;box-shadow:0 0 6px #ff5555}
/* Anzan feedback area */
#anzFb{border-radius:14px;margin-top:12px;overflow:hidden}
#anzFb.feedback.ok{background:linear-gradient(135deg,var(--green-light),#c8f0d0);border:2px solid #66bb6a;display:block!important}
#anzFb.feedback.ng{background:linear-gradient(135deg,var(--red-light),#ffd0d0);border:2px solid #ef9a9a;display:block!important}
/* Detail box */
#anzDetailBox{background:rgba(0,0,0,.06);border-radius:10px;padding:14px;font-family:'Courier New',monospace;font-size:13px;color:#333;word-break:break-all;line-height:2;margin-top:10px;border:1px solid rgba(0,0,0,.08)}
.detail-step{display:flex;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid rgba(0,0,0,.06)}
.detail-step:last-child{border-bottom:none}
.detail-step .ds-num{background:var(--teal);color:#fff;border-radius:6px;padding:2px 8px;font-weight:700;min-width:48px;text-align:center}
.detail-step .ds-num.neg{background:var(--red)}
.detail-step .ds-arrow{color:var(--muted);font-size:14px}
.detail-step .ds-run{color:var(--green);font-weight:700}
/* EXERCISE */
.level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.level-btn{background:#fff;border:2px solid var(--border);padding:16px;border-radius:12px;cursor:pointer;transition:all .2s;text-align:center}
.level-btn:hover{border-color:var(--teal);background:var(--teal-light)}
.level-btn h4{color:var(--teal);margin-bottom:4px}
.level-btn p{font-size:12px;color:var(--muted);margin:0}
.ex-area{background:linear-gradient(135deg,var(--teal-light),#fff);padding:24px;border-radius:16px;text-align:center}
.prob-disp{font-size:44px;font-weight:700;color:var(--teal);margin:16px 0;font-family:'Courier New',monospace;letter-spacing:6px}
.scorebar{display:flex;gap:12px;justify-content:center;margin-bottom:14px;flex-wrap:wrap}
.sci{background:#fff;padding:8px 16px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.05)}
.sci .lbl{font-size:11px;color:var(--muted);display:block}
.sci .val{font-size:20px;font-weight:700;color:var(--teal)}
.sci.ok .val{color:var(--green)}
.sci.ng .val{color:var(--red)}
/* FEEDBACK */
.feedback{padding:14px;border-radius:10px;margin-top:12px;font-size:17px;font-weight:600;display:none;animation:fadeIn .3s}
.feedback.ok{background:var(--green-light);color:var(--green);display:block}
.feedback.ng{background:var(--red-light);color:var(--red);display:block}
/* LESSONS */
.lesson-path{display:flex;flex-direction:column;gap:10px}
/* v154.172: .l-node / .ls (khoá 10 bài lý thuyết cũ) đã gỡ cùng const LESSONS */
.step{background:#fff;padding:10px 14px;border-radius:8px;margin:6px 0;border:1px solid var(--border);line-height:1.6}
.fm{display:inline-block;background:var(--teal);color:#fff;padding:2px 10px;border-radius:6px;font-family:'Courier New',monospace;font-weight:700;margin:2px 3px;font-size:13px}
.fm.r{background:var(--red)}.fm.g{background:var(--green)}.fm.o{background:var(--orange)}
/* v154.172: .pq (câu hỏi luyện trong bài lý thuyết cũ) đã gỡ */
/* RESULTS */
.rtable{width:100%;border-collapse:collapse;margin-top:14px;background:#fff;border-radius:12px;overflow:hidden}
.rtable th{background:var(--teal);color:#fff;padding:11px;text-align:left;font-weight:600;font-size:13px}
.rtable td{padding:10px 11px;border-top:1px solid var(--border);font-size:13px}
.rtable tr:hover{background:var(--teal-light)}
/* legacy .empty — giữ tương thích, nhưng UI mới đã chuyển sang .empty-state */
.empty{text-align:center;padding:40px;color:var(--gray-500)}
/* ═══ MODAL — Backdrop blur, slide up ═══ */
.modal{
display:none; position:fixed; top:0; left:0; right:0; bottom:0;
background:rgba(15,23,42,.5);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
z-index:100; align-items:center; justify-content:center;
padding:var(--space-4);
animation:modalFadeIn var(--t-base) both;
}
.modal.show{display:flex}
/* FIX: Device manager phải hiện ABOVE loginOverlay (z=500) để user thấy được khi bị chặn login */
#deviceModal{z-index:9000}
#deviceModal .modal-box{border:3px solid #FF8F00;box-shadow:0 12px 40px rgba(255,143,0,.3)}
/* FIX: Challenge modal — to ngang hơn để chứa số 8-9 chữ số đầy đủ */
#challengeAnzanModal .modal-box{
max-width:min(98vw, 1400px) !important;
padding:20px 16px !important;
}
#challengeAnzanModal #chAnzanArea{
width:100%;
}
#challengeAnzanModal .ch-flash-num{
width:100%;
padding:0 8px !important;
}
.modal-box{
background:#fff;
border-radius:var(--radius-2xl);
padding:var(--space-6);
max-width:680px; width:100%; max-height:90vh;
overflow-y:auto;
box-shadow:var(--shadow-xl);
animation:modalSlideUp var(--t-bounce) both;
border:1px solid var(--gray-200);
}
.modal-box h3{
color:var(--gray-900); margin-bottom:var(--space-3);
font-size:var(--text-2xl); font-weight:800;
letter-spacing:-0.02em;
}
.close-btn{
float:right; cursor:pointer;
font-size:24px; color:var(--gray-500);
border:none; background:var(--gray-100);
line-height:1; width:36px; height:36px;
border-radius:var(--radius-full);
display:flex; align-items:center; justify-content:center;
transition:all var(--t-fast);
}
.close-btn:hover{background:var(--gray-200); color:var(--gray-900)}
@keyframes modalFadeIn{from{opacity:0} to{opacity:1}}
@keyframes modalSlideUp{from{transform:translateY(24px) scale(.96); opacity:0} to{transform:translateY(0) scale(1); opacity:1}}
/* ═══ TOAST — Floating, soft ═══ */
.toast{
position:fixed; top:var(--space-4); right:var(--space-4);
background:linear-gradient(135deg,var(--success-500),var(--success-600));
color:#fff;
padding:var(--space-3) var(--space-5);
border-radius:var(--radius-md);
box-shadow:var(--shadow-lg);
transform:translateX(420px);
transition:transform var(--t-bounce);
z-index:9000;
font-family:var(--font-sans);
font-weight:600; font-size:var(--text-base);
display:flex; align-items:center; gap:var(--space-2);
max-width:320px;
letter-spacing:-0.005em;
}
.toast.show{transform:translateX(0)}
.toast.err{background:linear-gradient(135deg,var(--danger-500),var(--danger-600))}
/* Mobile: toast bottom để không đè header chips, và tránh chồng bottom-nav */
@media (max-width:640px){
.toast{
top:auto; right:var(--space-3); left:var(--space-3);
bottom:calc(80px + env(safe-area-inset-bottom, 0px));
max-width:none; transform:translateY(140px);
}
.toast.show{transform:translateY(0)}
/* FIX: header wrap để tránh icon button đè lên chip khi user là Pro (có thêm device manager button) */
header{flex-wrap:wrap; gap:6px}
.stat-row{flex-wrap:wrap}
/* FIX: Mascot bubble cao hơn toast trên mobile để không đè lên nhau */
.mascot-bubble{
bottom:calc(150px + env(safe-area-inset-bottom, 0px))!important;
}
/* FIX: Home cards 2 cột trên mobile siêu nhỏ */
}
@media (max-width:340px){
.bnav-item .bnav-label{font-size:8px}
.bnav-item{padding:4px 0}
}
/* FIX mobile: thẻ "Kết quả" cuối lẻ → cho span full width */
@media (max-width:640px){
#page-home > div[style*="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))"] > div:last-child{
grid-column:1/-1;
}
/* FIX: check-in 7 ngày co lại để vừa màn hình mobile, tránh tràn ngang */
.checkin-grid{gap:3px}
.checkin-day{padding:2px;border-width:1.5px}
.checkin-day .day-num{font-size:9px;font-weight:700}
.checkin-day .day-reward{font-size:12px;line-height:1}
.checkin-day .day-coin{font-size:8px;line-height:1.1;margin-top:1px;letter-spacing:-0.3px}
}
@media (max-width:380px){
.checkin-grid{gap:2px}
.checkin-day{padding:1px;border-width:1px;border-radius:6px}
.checkin-day .day-num{font-size:8px}
.checkin-day .day-reward{font-size:11px}
.checkin-day .day-coin{font-size:7px}
/* FIX: home cards reduce icon size để fit 2 cột trên 320-380px */
#page-home > div[style*="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))"]{
grid-template-columns:repeat(2,1fr)!important;
gap:8px!important;
}
#page-home > div[style*="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))"] > div{
padding:18px 10px!important;
}
#page-home > div[style*="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))"] > div > div[style*="font-size:46px"]{
font-size:36px!important;
margin-bottom:6px!important;
}
#page-home > div[style*="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))"] > div > div[style*="font-size:15px"]{
font-size:14px!important;
}
#page-home > div[style*="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))"] > div > div[style*="font-size:12px"]{
font-size:11px!important;
}
}
/* Settings panel collapse animation */
#anzSettingsPanel{transition:max-height .4s ease,opacity .3s ease;overflow:hidden;max-height:8000px;opacity:1}
#anzSettingsPanel.hidden{max-height:0;opacity:0;pointer-events:none}
/* v153.0 — Anzan 2-tab UI: Ảo tính / Cài đặt */
/* v154.98: 2 tab Ảo tính / Cài đặt — KHÁC MÀU rõ + NỔI BẬT (pill, tab chọn tô đặc + bóng) */
.anz-tab-bar{display:flex;gap:10px;border-bottom:none;margin:0 0 16px;padding:2px}
.anz-tab{flex:1;padding:13px 16px;border:2px solid transparent;border-radius:14px;cursor:pointer;font-size:16px;font-weight:800;transition:.18s;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px}
.anz-tab[data-tab="practice"]{background:#d8f3ef;color:#0b7d70;border-color:#a7e3da}
.anz-tab[data-tab="practice"].active{background:linear-gradient(135deg,#12a594,#0c8074);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(13,148,136,.42)}
.anz-tab[data-tab="settings"]{background:#ffe9cf;color:#c2640a;border-color:#ffd3a0}
.anz-tab[data-tab="settings"].active{background:linear-gradient(135deg,#ff9f2e,#ef7d12);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(239,125,18,.42)}
.anz-tab:hover:not(.active){transform:translateY(-1px);filter:brightness(.97)}
.anz-tab-panel{display:none}
.anz-tab-panel.active{display:block}
.anz-tab-bar.hw-locked{display:none}
/* v154.98: BỎ HẲN panel/khung lớn quanh màn ảo tính cho gọn — nội dung nằm thẳng trên nền app (chỉ page-anzan) */
#page-anzan > .card{background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important}
@media (max-width:480px){
.anz-tab{padding:10px 8px;font-size:13px}
}
/* Achievement popup animation */
@keyframes achievePop{from{transform:scale(.3) translateY(40px);opacity:0}70%{transform:scale(1.06)}to{transform:scale(1);opacity:1}}
@keyframes starSpin{0%{transform:rotate(-20deg) scale(.5);opacity:0}60%{transform:rotate(10deg) scale(1.2)}100%{transform:rotate(0) scale(1);opacity:1}}
/* ─── WORKSHEET (IN ĐỀ) — A4 PDF ──────────────────────────── */
.ws-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-bottom:16px}
.ws-preview{border:2px dashed var(--border);border-radius:12px;padding:20px;min-height:300px;background:#fafafa;overflow:auto}
#worksheetContent{font-family:Arial,sans-serif}
/* A4 page wrapper — đúng kích thước A4, content tự nhiên (không stretch) */
.ws-page{
width:210mm; min-height:297mm; max-width:210mm;
margin:0 auto 18px; padding:12mm 11mm 10mm;
background:#fff; box-sizing:border-box;
box-shadow:0 4px 20px rgba(0,0,0,.15);
font-family:'Arial','Helvetica',sans-serif; color:#1a3a5c;
display:flex; flex-direction:column;
position:relative;
overflow:hidden;
/* CRITICAL: bảo toàn màu khi in (gradient title, ribbons, header xanh, ô đáp án vàng) */
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
.ws-page *{
-webkit-print-color-adjust:exact !important;
print-color-adjust:exact !important;
}
.ws-page + .ws-page{ margin-top:0; }
/* Decorative corner ribbons (chuyên nghiệp hơn) */
.ws-page::before{
content:''; position:absolute; top:0; left:0; right:0; height:6px;
background:linear-gradient(90deg,#FFD93D 0%,#FF9F43 25%,#FF6B6B 50%,#4ECDC4 75%,#45B7D1 100%);
}
.ws-page::after{
content:''; position:absolute; bottom:0; left:0; right:0; height:4px;
background:linear-gradient(90deg,#45B7D1 0%,#4ECDC4 25%,#FF6B6B 50%,#FF9F43 75%,#FFD93D 100%);
}
/* Header: căng đều, branding chuyên nghiệp — đã nén để fit thêm bảng/trang */
.ws-head{
border-bottom:3px double #1a5276;
padding:2px 0 6px; margin-bottom:6px;
text-align:center;
}
.ws-brand{
font-size:8.5pt; letter-spacing:4px; color:#0D7377; font-weight:700;
text-transform:uppercase; margin-bottom:1px;
}
.ws-title{
font-size:20pt; font-weight:900; letter-spacing:2px;
text-transform:uppercase;
background:linear-gradient(135deg,#0D7377 0%,#14a085 50%,#0D7377 100%);
-webkit-background-clip:text; background-clip:text;
color:#0D7377;
margin-bottom:4px;
}
.ws-meta{
display:flex; justify-content:space-between; align-items:center;
font-size:11pt; color:#333;
flex-wrap:wrap; gap:8px;
padding:0 4px;
}
.ws-meta span{ display:inline-flex; align-items:center; gap:6px; }
.ws-meta .ws-line{
display:inline-block; min-width:130px; border-bottom:1.6px solid #1a5276;
height:18px; vertical-align:bottom; padding:0 6px;
font-weight:700; color:#1a3a5c;
}
/* v154.72: Tip box — đã bỏ 2 icon 2 đầu, chỉ giữ text center */
.ws-tip{
background:linear-gradient(135deg,#FFF8E1 0%,#FFF3CD 100%);
border:1.5px dashed #F4D03F; border-radius:10px;
padding:5px 12px;
display:flex; justify-content:center; align-items:center;
margin:0 0 6px;
font-size:10.5pt; color:#7C6F1A; font-weight:700;
text-align:center;
}
.ws-tip .ws-tip-text{ flex:0 1 auto; text-align:center; padding:0 8px; }
/* Container chứa nhiều bảng — natural size, không stretch */
.ws-tables-container{
flex:1;
display:flex; flex-direction:column;
gap:4mm;
align-items:stretch;
}
.ws-table-block{ width:100%; }
.ws-table-label{
font-size:10pt; font-weight:800; color:#0D7377;
margin-bottom:2px; padding-left:2px;
display:flex; justify-content:space-between; align-items:baseline;
}
.ws-table-label .ws-table-range{ font-size:9pt; color:#888; font-weight:600; }
/* Worksheet table — natural height (cell theo font tự nhiên), không bị kéo dãn */
.ws-table{
width:100%; border-collapse:separate; border-spacing:0;
border:2.5px solid #1a5276; border-radius:8px; overflow:hidden;
table-layout:fixed;
margin:0;
box-shadow:0 1px 4px rgba(26,82,118,.08);
}
.ws-table th{
background:linear-gradient(135deg,#1a5276 0%,#2980b9 100%);
border-right:1px solid rgba(255,255,255,.3);
padding:4px 4px; font-size:11pt; font-weight:900;
color:#fff; text-align:center; letter-spacing:1px;
}
.ws-table th:last-child{ border-right:none; }
.ws-table td{
border-right:1px solid #b0d0ec;
border-bottom:1px solid #d8e6f5;
padding:5px 6px; /* v154.170: padding cân 2 bên (trước lệch theo align right) */
font-size:12.5pt;
font-family:'Courier New','Lucida Console',monospace;
font-weight:700; color:#1a3a5c;
text-align:center; /* v154.170: user chốt CĂN GIỮA số cho dễ nhìn (trước v141.22 align right) */
vertical-align:middle;
white-space:nowrap;
line-height:1.25;
letter-spacing:-0.3px;
}
/* v141.22: ô header vẫn center */
.ws-table th{ text-align:center !important; }
/* v141.22: ô đáp án ở cuối cũng center */
.ws-table tr.ws-ans-row td{ text-align:center; }
.ws-table td:last-child{ border-right:none; }
/* FIX: Auto-scale font theo số chữ số để không tràn cột */
.ws-table.ws-d3 td{ font-size:11.5pt; padding:4px 3px; }
.ws-table.ws-d4 td{ font-size:10pt; padding:4px 3px; letter-spacing:-0.4px; }
.ws-table.ws-d5 td{ font-size:9pt; padding:3.5px 2px; letter-spacing:-0.5px; }
.ws-table.ws-d6 td{ font-size:8pt; padding:3px 2px; letter-spacing:-0.6px; }
.ws-table.ws-d7 td{ font-size:7pt; padding:2.5px 1.5px; letter-spacing:-0.6px; }
.ws-table.ws-d8 td{ font-size:6.5pt; padding:2.5px 1px; letter-spacing:-0.7px; }
.ws-table.ws-d9 td, .ws-table.ws-d10 td{ font-size:6pt; padding:2px 1px; letter-spacing:-0.8px; }
.ws-table tbody tr:nth-child(odd) td{ background:#f8fbff; }
.ws-table tbody tr:nth-child(even) td{ background:#fff; }
.ws-table .ws-ans-row td{
border-top:3px double #1a5276;
padding:7px 4px;
background:linear-gradient(180deg,#FFF8E1 0%,#FFE082 100%) !important;
font-size:12pt; font-weight:900; color:#5D4037;
text-align:center;
}
.ws-table.ws-d5 .ws-ans-row td, .ws-table.ws-d6 .ws-ans-row td{ font-size:11pt; padding:8px 4px; }
.ws-table.ws-d7 .ws-ans-row td, .ws-table.ws-d8 .ws-ans-row td{ font-size:10pt; padding:7px 3px; }
.ws-table.ws-d9 .ws-ans-row td, .ws-table.ws-d10 .ws-ans-row td{ font-size:9pt; padding:6px 2px; }
.ws-ans-row td .ws-ans-eq{ color:#c0392b; }
/* Multiplication / Division card grid */
.ws-mdgrid{
display:grid;
grid-template-columns:repeat(var(--cols,4),1fr);
gap:8px;
flex:1;
align-content:start;
}
.ws-mdcard{
border:2px solid #1a5276; border-radius:10px;
padding:10px 8px; background:linear-gradient(135deg,#f6fafe 0%,#eaf4ff 100%);
text-align:center;
display:flex; flex-direction:column; justify-content:center; align-items:center;
box-shadow:0 1px 4px rgba(26,82,118,.1);
}
.ws-mdcard .ws-mdlabel{
font-size:11pt; font-weight:900; color:#fff;
background:#1a5276; padding:2px 10px; border-radius:10px;
margin-bottom:6px;
}
.ws-mdcard .ws-mdexpr{
font-size:15pt; font-weight:900;
font-family:'Courier New',monospace; color:#1a3a5c;
margin-bottom:6px; letter-spacing:1.5px;
}
.ws-mdcard .ws-mdans{
border-top:1.8px solid #1a5276; padding-top:6px; margin-top:6px;
font-size:14pt; font-weight:900; color:#c0392b;
min-height:22px; width:90%;
}
/* v154.137: Đề NẰM NGANG — mỗi bài 1 hàng, các số viết ngang */
.ws-hgrid{ display:grid; grid-template-columns:repeat(var(--hcols,2),1fr); gap:2mm 9mm; align-content:start; }
.ws-hprob{
display:flex; align-items:baseline; gap:5px;
font-family:'Courier New',monospace; font-size:13.5pt; font-weight:700; color:#1a3a5c;
padding:2mm 0; border-bottom:1px dotted #b5c4d6;
}
.ws-hprob .ws-hlabel{ color:#0D7377; font-weight:900; min-width:22px; flex-shrink:0; }
.ws-hprob .ws-hexpr{ flex:1; letter-spacing:.5px; word-break:break-word; }
.ws-hprob .ws-hexpr .op-add{ color:#27AE60; }
.ws-hprob .ws-hexpr .op-sub{ color:#E74C3C; }
.ws-hprob .ws-hans{ min-width:58px; text-align:center; color:#c0392b; font-weight:900; border-bottom:1.6px solid #1a5276; flex-shrink:0; }
/* Footer — animals row + tagline + page number */
.ws-foot{
margin-top:8px; padding:8px 4px 0;
border-top:1.5px dashed #aabbd0;
display:flex; flex-direction:column; align-items:center; gap:6px;
}
.ws-foot-animals{ display:flex; justify-content:space-around; width:100%; align-items:center; gap:6mm; }
.ws-foot-animals span{ font-size:28pt; line-height:1; display:inline-flex; align-items:center; }
.ws-foot-animals img{ box-shadow:0 1px 3px rgba(0,0,0,.1); }
.ws-foot-msg{
font-size:11pt; font-weight:700; color:#0D7377;
text-align:center; letter-spacing:.5px;
}
.ws-pagenote{
text-align:center; font-size:9pt; color:#888;
}
/* Section divider for "có đáp án" mode */
.ws-section-break{
page-break-before:always;
border-top:3px dashed #e74c3c;
margin:6px 0;
padding-top:6px;
text-align:center; font-size:11pt; color:#e74c3c; font-weight:700;
}
/* Print-only: hide app chrome */
@media print{
@page{ size:A4; margin:0; }
body{ margin:0; padding:0; background:#fff; }
body>*{ display:none !important; }
/* Defensive: ẩn các overlay/effect có thể visible khi user trigger Ctrl+P */
#comboDisplay, .confetti-piece, .float-pts, .bg-deco, #answerFeedback,
#achieveOverlay, .toast{ display:none !important; }
#printArea{ display:block !important; padding:0; margin:0; width:100%; }
/* Trang A4 thật khi in — bỏ shadow, padding theo @page */
.ws-page{
width:210mm; min-height:297mm; max-width:210mm;
margin:0; padding:14mm 12mm 12mm;
box-shadow:none;
page-break-after:always;
page-break-inside:avoid;
}
.ws-page:last-child{ page-break-after:auto; }
/* Certificate & report print mode */
body.printing-cert>*{display:none !important}
body.printing-cert #certPrintArea{display:block !important; padding:0; margin:0}
body.printing-report>*{display:none !important}
body.printing-report #reportPrintArea{display:block !important; padding:0; margin:0}
}
/* ══ ABACUS — Natural Wood Style (giống bàn tính thật) ══════════ */
.abacus-frame{
background:linear-gradient(150deg,#8a5e36 0%,#7a5230 45%,#553823 100%);
padding:14px 10px 12px;
border-radius:10px;
/* v141.46: block để phủ chiều rộng card thay vì inline-block */
display:block;
position:relative;
box-shadow:
inset 0 3px 0 rgba(255,220,140,.35),
inset 0 -3px 0 rgba(0,0,0,.45),
inset 3px 0 8px rgba(255,180,80,.1),
inset -3px 0 8px rgba(0,0,0,.2),
0 16px 48px rgba(0,0,0,.55),
0 4px 12px rgba(0,0,0,.35);
}
/* Top cross-bar (thanh ngang trên) */
.abacus-frame::before{
content:'';display:none;position:absolute;top:5px;left:8px;right:8px;height:10px;
background:linear-gradient(to bottom,
rgba(255,230,160,.4) 0%,#D4921C 20%,#C88018 50%,#8A5010 80%,rgba(0,0,0,.3) 100%);
border-radius:5px;
box-shadow:0 2px 8px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,240,180,.3);
}
/* Bottom cross-bar (thanh ngang dưới) */
.abacus-frame::after{
content:'';display:none;position:absolute;bottom:5px;left:8px;right:8px;height:10px;
background:linear-gradient(to top,
rgba(255,230,160,.4) 0%,#D4921C 20%,#C88018 50%,#8A5010 80%,rgba(0,0,0,.3) 100%);
border-radius:5px;
box-shadow:0 -2px 8px rgba(0,0,0,.4),inset 0 -1px 0 rgba(255,240,180,.3);
}
.abacus-inner{
background:#ffffff;
padding:8px 4px 6px;
border-radius:4px;
/* v154.4: distribute 21 cột đều full-width (scroll-x khi viewport hẹp) */
display:flex;gap:0;justify-content:space-between;
box-shadow:inset 0 3px 10px rgba(0,0,0,.18),inset 0 -1px 4px rgba(0,0,0,.1);
position:relative;
width:100%;box-sizing:border-box;
}
/* ══ v154.4 FIT: bàn tính 21 cột — co bead nhỏ hơn để cố gắng fit khung,
khi viewport hẹp quá sẽ scroll ngang (overflow-x:auto trên wrapper) ══ */
.abacus-frame{
/* Bead-size đã co lại để fit 21 cột — clamp(14px, 3.4vw, 42px)
Trên mobile <420px sẽ thấp xuống 14px, vẫn dễ click */
--bead-size: clamp(14px, 3.4vw, 42px);
--bead-height: calc(var(--bead-size) * 0.6);
--col-width: calc(var(--bead-size) + 2px);
/* v154.57: nới khoảng hở hạt ↔ thanh ngang (0.6×bead-height) → chuyển động hạt dễ thấy hơn */
--heaven-height: calc(var(--bead-height) * 1.6);
--earth-height: calc(var(--bead-height) * 4.6);
padding:10px 8px 10px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* Individual column — v141.47: flex equal share, KHÔNG min-width để fit khung */
.rod-col{
display:flex;flex-direction:column;align-items:center;
flex:1 1 0;
width:var(--col-width);
position:relative;padding:3px 0;border-radius:2px;
}
.rod-col:nth-child(odd){background:rgba(180,120,30,.04);}
.rod-col:nth-child(even){background:rgba(100,60,10,.02);}
/* Group separator every 3 columns */
.rod-col:nth-child(3n){
box-shadow:2px 0 0 0 rgba(120,70,10,.4);
margin-right:1px;
}
/* Vertical rod — frame-color (greenish) like reference */
/* v141.43: thu ngắn rod-bar — chỉ kéo dài đến hết hạt cuối, không có khoảng trống lớn */
.rod-bar{
position:absolute;top:0;bottom:18px;left:50%;
width:4px;
background:linear-gradient(90deg,#b5946a,#caa97f 50%,#b5946a);
margin-left:-2px;z-index:1;border-radius:2px;
box-shadow:none;
}
.upper-d{height:var(--heaven-height);position:relative;width:100%}
/* Divider beam — thanh ngang giữa kiểu mới (gỗ xanh nhạt) */
.divider{
width:calc(100% + 8px);height:14px;
background:linear-gradient(180deg,#6a4a2c 0%,#5a3c22 45%,#3f2916 100%);
margin:1px -4px;z-index:5;position:relative;
box-shadow:0 3px 12px rgba(0,0,0,.45),0 -1px 4px rgba(0,0,0,.2);
}
.lower-d{height:var(--earth-height);position:relative;width:100%}
/* ── BEADS — v154.56: hạt LỤC GIÁC mượt, sao chép phong cách bàn tính Bài học Soroban ── */
.bead{
width:var(--bead-size);
height:var(--bead-height);
cursor:pointer;z-index:3;
position:absolute;left:50%;
margin-left:calc(var(--bead-size) / -2);
/* lục giác ngang — giống hạt bàn tính trong Bài học Soroban */
clip-path:polygon(28% 0,72% 0,100% 50%,72% 100%,28% 100%,0 50%);
/* chuyển động mượt khi bấm hạt (nhịp nảy nhẹ) */
transition:top .17s cubic-bezier(.4,1.12,.5,1);
}
/* hạt trên = teal, hạt dưới = cam — giữ màu cố định dù active hay không */
.bead.upper{ background:linear-gradient(160deg,#3fc3b2,#117a6c); }
.bead.lower{ background:linear-gradient(160deg,#ffa15a,#e0531b); }
.bead.active{ filter:brightness(1.13); }
.bead:hover{ filter:brightness(1.2); }
/* viền vàng khi hạt đang ở vị trí tính (đã kéo về thanh ngang) */
.bead.active::after{
content:'';position:absolute;inset:0;
clip-path:inherit;
box-shadow:0 0 0 2px #ffd34d inset;
}
/* Heaven bead positions */
/* v141.45: hạt heaven CHÍNH XÁC trong container heaven (height = bead-height + 8) */
/* Inactive: top=0 → hạt sát TRÊN container (cách divider 8px) */
/* Active: top = heaven-height - bead-height → đáy hạt vừa CHẠM divider, không tràn */
.bead.upper{top:0;}
.bead.upper.active{top:calc(var(--heaven-height) - var(--bead-height));}
/* Position dot on beam — vòng tròn nhỏ với viền cam giống hình mẫu */
.pos-dot{
display:block;width:8px;height:8px;
background:#ffd34d;
border-radius:50%;
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
box-shadow:0 0 5px #ffae00;z-index:10;
}
/* Units column highlight — outline rõ hơn (cột đơn vị ở giữa) */
.rod-col.units-col{
background:rgba(255,200,100,.1)!important;
border-radius:4px;
outline:2px solid rgba(255,160,60,.55);
}
.rod-col.units-col .rod-lbl{color:#FFB060;font-size:11px;font-weight:900;}
/* Column label — v141.44: ẩn theo yêu cầu user (HS tự biết hàng) */
.rod-lbl{ display:none !important; }
/* Number display — kept for backward compat but hidden by default */
.num-disp{
background:linear-gradient(135deg,#0D7377,#085a5e);
color:#fff;padding:14px 24px;border-radius:14px;
font-size:36px;font-weight:700;text-align:center;
letter-spacing:4px;font-family:'Courier New',monospace;margin-bottom:14px;
box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.num-disp.hidden{display:none !important;}
/* v141.42: TEACHER EXPRESSION INPUT — to để HS nhìn thấy phép tính */
.abacus-teacher-expr{
display:block;width:100%;
background:linear-gradient(135deg,#0D7377,#085a5e);
color:#FFF;
font-size:clamp(28px, 6vw, 56px);
font-weight:900;
letter-spacing:2px;
font-family:'Courier New','Cascadia Code',monospace;
text-align:center;
padding:18px 16px;
border:3px solid #FBBF24;
border-radius:18px;
box-shadow:0 6px 24px rgba(0,0,0,.35),inset 0 2px 6px rgba(255,255,255,.1);
margin-bottom:18px;
outline:none;
caret-color:#FFD93D;
min-height:80px;
transition:border-color .2s, box-shadow .2s;
}
.abacus-teacher-expr:focus{
border-color:#FFD93D;
box-shadow:0 8px 28px rgba(255,217,61,.4),inset 0 2px 6px rgba(255,255,255,.15);
}
.abacus-teacher-expr::placeholder{
color:rgba(255,255,255,.45);
font-size:.6em;
font-weight:700;
letter-spacing:1px;
}
.abacus-teacher-tools{
display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px;
}
.abacus-teacher-tools button{
background:rgba(255,255,255,.12);
color:#fff;
border:1px solid rgba(255,255,255,.2);
padding:7px 12px;
border-radius:8px;
font-size:13px;
font-weight:700;
cursor:pointer;
}
.abacus-teacher-tools button:hover{ background:rgba(255,255,255,.22); }
.abacus-teacher-tools button.danger{ background:rgba(239,68,68,.85); color:#fff; }
/* Responsive — v154.4: bead-size đã co lại để 21 cột fit (~3.4vw → ~71vw)
Trên mobile hẹp sẽ scroll ngang nhẹ; trên laptop+ vẫn fit full */
@media (max-width:480px){
.abacus-frame{ padding:8px 5px 8px; --bead-size: clamp(13px, 3.8vw, 20px); }
.abacus-teacher-expr{ padding:14px 10px; min-height:64px; border-width:2px; }
}
@media (min-width:768px){
.abacus-frame{ --bead-size: clamp(22px, 3.4vw, 34px); }
}
@media (min-width:1024px){
.abacus-frame{ --bead-size: clamp(26px, 3.4vw, 42px); }
}
@media (min-width:1280px){
.abacus-frame{ --bead-size: clamp(30px, 3.4vw, 48px); }
}
@media (min-width:1440px){
.abacus-frame{ --bead-size: clamp(34px, 3.4vw, 54px); }
}
@media (min-width:1680px){
.abacus-frame{ --bead-size: clamp(38px, 3.4vw, 60px); }
}
/* ══ LEVEL PROGRESS BAR (header) ══ */
.hdr-lv-wrap{display:flex;flex-direction:column;gap:2px;min-width:110px}
.hdr-lv-label{font-size:11px;color:rgba(255,255,255,.7);display:flex;justify-content:space-between}
.hdr-lv-bar{background:rgba(255,255,255,.15);border-radius:99px;height:5px;overflow:hidden}
.hdr-lv-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#FFD93D,#F47B20);transition:width 1s ease}
/* ══ LEVEL CARD (Results page) ══ */
.lv-card{background:linear-gradient(135deg,#0d1b3e,#1a0a3a);border-radius:18px;padding:22px;color:#fff;margin-bottom:14px}
.lv-card h4{color:rgba(255,255,255,.7);font-size:12px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}
.lv-main{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.lv-icon-big{font-size:52px;line-height:1}
.lv-info{flex:1}
.lv-name-big{font-size:24px;font-weight:900;background:linear-gradient(135deg,#FFD700,#FFA500);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lv-pts-row{font-size:13px;color:rgba(255,255,255,.6);margin-top:3px}
.lv-progress-wrap{background:rgba(255,255,255,.1);border-radius:99px;height:12px;overflow:hidden;margin:8px 0 4px}
.lv-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#FFD93D,#F47B20);transition:width 1.2s cubic-bezier(.4,0,.2,1)}
.lv-progress-labels{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.45)}
.lv-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.lv-stat{background:rgba(255,255,255,.07);border-radius:12px;padding:10px;text-align:center}
.lv-stat-val{font-size:22px;font-weight:800;color:#fff}
.lv-stat-lbl{font-size:10px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
/* ══ BADGE GRID ══ */
.badge-section{margin-bottom:14px}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin-top:12px}
.badge-item{background:#fff;border:2px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center;transition:all .2s;position:relative}
.badge-item.earned{border-color:#FFB300;background:linear-gradient(135deg,#fffde7,#fff8e1);box-shadow:0 3px 12px rgba(255,180,0,.2)}
.badge-item.locked{opacity:.3;filter:grayscale(.8)}
.badge-icon{font-size:34px;margin-bottom:5px;display:block}
.badge-name{font-size:11px;font-weight:700;color:var(--text);line-height:1.3}
.badge-desc{font-size:9px;color:var(--muted);margin-top:3px;line-height:1.4}
.badge-new{position:absolute;top:-7px;right:-7px;background:var(--orange);color:#fff;font-size:9px;font-weight:800;padding:2px 8px;border-radius:10px;animation:pop .4s}
/* ══ LEADERBOARD ══ */
.lb-wrap{margin-top:10px}
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;background:#fff;border:2px solid var(--border);margin-bottom:6px;transition:all .2s}
.lb-row:nth-child(1){border-color:#FFD700;background:linear-gradient(135deg,#fffde7,#fff)}
.lb-row:nth-child(2){border-color:#C0C0C0}
.lb-row:nth-child(3){border-color:#CD7F32}
.lb-rank{font-size:20px;width:32px;text-align:center;font-weight:900}
.lb-av{font-size:26px}
.lb-info{flex:1}
.lb-name{font-weight:700;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lb-sub{font-size:11px;color:var(--muted);margin-top:1px}
.lb-pts{font-weight:900;font-size:18px;color:var(--teal);text-align:right}
.lb-lv{font-size:10px;color:var(--muted);text-align:right}
@keyframes shimmer{0%{left:-60%}100%{left:130%}}
/* ══ RESPONSIVE — TABLET (≤ 900px) ══ */
@media(max-width:900px){
.container{max-width:100%}
.setting-grid{grid-template-columns:repeat(2,1fr)}
.tabs{gap:4px}
.tab{padding:8px 14px;font-size:13px}
header{padding:14px 20px;gap:10px}
header h1{font-size:22px}
.stat-row{gap:6px}
.chip{font-size:12px;padding:5px 10px}
.login-box{padding:24px 20px;max-width:480px}
.acc-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
}
/* ═══ LUCIDE-style ICON system ═══ */
.icon{
width:1em; height:1em;
display:inline-block;
vertical-align:-0.125em;
fill:none; stroke:currentColor;
stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.icon-sm{width:14px; height:14px}
.icon-md{width:18px; height:18px}
.icon-lg{width:22px; height:22px}
/* ═══ EMPTY STATES — Friendly, illustrated ═══ */
.empty-state{
text-align:center;
padding:var(--space-12) var(--space-6);
color:var(--gray-600);
}
.empty-illust{
width:120px; height:120px;
margin:0 auto var(--space-5);
display:block;
opacity:.85;
}
.empty-title{
font-size:var(--text-lg); font-weight:700;
color:var(--gray-800);
margin-bottom:var(--space-2);
}
.empty-desc{
font-size:var(--text-base);
color:var(--gray-600);
line-height:1.6;
max-width:380px;
margin:0 auto var(--space-5);
}
.empty-cta{margin-top:var(--space-3)}
/* ═══ BOTTOM NAVIGATION (mobile only) ═══ */
.bottom-nav{
display:none; /* hidden on desktop */
position:fixed; bottom:0; left:0; right:0;
background:rgba(255,255,255,.92);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-top:1px solid var(--gray-200);
z-index:200;
padding:6px 4px calc(6px + env(safe-area-inset-bottom));
box-shadow:0 -4px 12px rgba(15,23,42,.06);
}
.bottom-nav-inner{
display:flex;
max-width:600px;
margin:0 auto;
justify-content:space-around;
align-items:stretch;
}
.bnav-item{
flex:1;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:6px 2px;
background:none; border:none; cursor:pointer;
font-family:var(--font-sans);
font-size:10px; font-weight:600;
color:var(--gray-500);
transition:color var(--t-fast);
position:relative;
min-height:54px;
border-radius:var(--radius-md);
}
.bnav-item:hover{color:var(--primary-600); background:var(--gray-50)}
.bnav-item.active{color:var(--primary-600)}
.bnav-item.active::before{
content:'';
position:absolute; top:0; left:50%;
width:24px; height:3px;
background:var(--primary-500);
border-radius:0 0 4px 4px;
transform:translateX(-50%);
}
.bnav-item .bnav-icon{
width:22px; height:22px;
margin-bottom:2px;
stroke-width:2;
}
/* v82: 3D cartoon SVG icons — không dùng stroke style của Lucide */
.bnav-item .bnav-icon.icon-3d{
width:30px; height:30px;
margin-bottom:2px;
stroke:none; fill:none; stroke-width:0;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));
transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.bnav-item:hover .bnav-icon.icon-3d{transform:translateY(-2px) scale(1.08)}
.bnav-item.active .bnav-icon.icon-3d{
transform:translateY(-3px) scale(1.12);
filter:drop-shadow(0 4px 8px rgba(255,107,53,.45));
}
.bnav-item.active .bnav-icon{stroke-width:2.4}
.bnav-item .bnav-label{font-size:10px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.bnav-item:focus-visible, .tab:focus-visible, .acc-card:focus-visible{outline:2px solid var(--primary-500); outline-offset:2px}
@media (max-width:360px){
.bnav-item .bnav-label{font-size:9px}
.bnav-item{padding:5px 1px}
}
.bnav-badge{
position:absolute; top:6px; right:calc(50% - 18px);
background:var(--accent-500); color:#fff;
font-size:9px; font-weight:700;
padding:1px 5px; border-radius:var(--radius-full);
min-width:14px; height:14px;
display:flex; align-items:center; justify-content:center;
}
/* ══ RESPONSIVE — MOBILE (≤ 640px) ══ */
@media(max-width:640px){
body{padding:6px}
header{padding:12px 14px;border-radius:14px;flex-direction:column;align-items:flex-start;gap:8px}
header h1{font-size:19px}
.stat-row{width:100%;justify-content:center;gap:8px}/* v154.76: 3 nút primary gần nhau, đều */
.chip{font-size:11px;padding:4px 9px}
.tabs{gap:2px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:7px 12px;font-size:12px;white-space:nowrap;flex-shrink:0;border-radius:10px}
.card{padding:14px 12px;border-radius:14px;margin-bottom:12px}
.card h2{font-size:16px}
.setting-grid{grid-template-columns:1fr 1fr;gap:8px}
.sg label{font-size:12px}
.anzan-display{font-size:clamp(280px,80vw,540px);min-height:480px;border-radius:18px} /* tăng 2x lần nữa */
.anzan-input{font-size:22px;padding:12px}
.btn.big{font-size:15px;padding:12px 20px}
.pin-dots{gap:8px;margin:10px 0}
.pin-dot{width:14px;height:14px}
.login-box{padding:20px 16px;border-radius:18px;max-width:100%}
.login-box h2{font-size:22px}
.login-sub{font-size:13px;margin-bottom:16px}
.login-inp{padding:11px 14px;font-size:14px}
.acc-grid{grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:14px}
.acc-card{padding:10px 6px;border-radius:10px}
.acc-card .ac-av{font-size:28px;margin-bottom:4px}
.acc-card .ac-name{font-size:11px}
.acc-card .ac-role{font-size:10px}
.prob-disp{font-size:24px}
.ws-controls{grid-template-columns:1fr 1fr;gap:8px}
#page-anzan .card{padding:12px}
.rrange-row{gap:4px;flex-wrap:wrap}
.rsel{padding:5px 9px;font-size:12px}
/* Mobile: hide top tabs, show bottom nav */
.tabs{display:none}
.bottom-nav{display:block}
body{padding-bottom:calc(72px + env(safe-area-inset-bottom)) !important}
}
/* Print: KHÔNG được kế thừa padding-bottom mobile khi in PDF (worksheet, certificate, report) */
@media print{
body{padding:0 !important}
.bottom-nav{display:none !important}
}
/* ══ FULLSCREEN MODE ══ */
:fullscreen body{padding:6px!important;overflow-y:auto}
:-webkit-full-screen body{padding:6px!important;overflow-y:auto}
:fullscreen .container{max-width:100%!important}
:-webkit-full-screen .container{max-width:100%!important}
:fullscreen header{border-radius:12px}
:-webkit-full-screen header{border-radius:12px}
/* ══ RESPONSIVE — SMALL PHONE (≤ 400px) ══ */
@media(max-width:400px){
.acc-grid{grid-template-columns:repeat(2,1fr)}
.tabs .tab{padding:6px 10px;font-size:11px}
.anzan-display{font-size:clamp(220px,75vw,440px);min-height:400px} /* tăng 2x lần nữa */
.setting-grid{grid-template-columns:1fr}
header{gap:6px}
.chip strong{font-size:12px}
}
/* ══ DRILL MODE ══ */
.drill-formula-sel{width:100%;padding:10px;font-size:15px;border:2px solid var(--teal);border-radius:10px;font-weight:600;color:var(--teal);background:#fff}
.drill-display{text-align:center;padding:28px 16px;background:linear-gradient(135deg,#0f0f23,#1a1a40);border-radius:18px;margin:16px 0;color:#fff}
.drill-cur{font-size:72px;font-weight:900;font-family:'Courier New',monospace;animation:pop .15s;line-height:1}
.drill-op{font-size:26px;margin:10px 0 4px;color:var(--yellow);font-weight:700}
.drill-op-hint{font-size:13px;color:rgba(255,255,255,.6)}
.drill-pbar{height:7px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden;margin:10px 0}
.drill-pfill{height:100%;background:var(--yellow);border-radius:4px;transition:width .35s}
.drill-timer-ring{font-size:22px;font-weight:700;color:var(--yellow)}
.drill-input{width:100%;padding:14px;font-size:34px;text-align:center;border:3px solid var(--teal);border-radius:12px;font-family:'Courier New',monospace;font-weight:700;margin:10px 0}
.mastery-row{display:flex;align-items:center;gap:8px;margin:5px 0}
.mastery-row .mlbl{font-size:12px;color:var(--muted);width:56px;flex-shrink:0;text-align:right;font-family:'Courier New',monospace}
.mastery-bg{flex:1;height:13px;background:var(--border);border-radius:7px;overflow:hidden}
.mastery-fill{height:100%;border-radius:7px;transition:width .6s}
.mastery-tag{font-size:11px;width:76px;flex-shrink:0;font-weight:700}
/* ══ STUDENT MANAGEMENT ══ */
.stu-card{background:#fff;border:2px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:all .2s;position:relative;text-align:center}
.stu-card:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 5px 16px rgba(0,0,0,.1)}
.stu-card.active{border-color:var(--teal);background:var(--teal-light)}
.stu-av{font-size:44px;margin-bottom:8px}
.stu-name{font-weight:700;color:var(--text);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stu-stats{font-size:12px;color:var(--muted);margin-top:3px}
.active-badge{position:absolute;top:8px;right:8px;background:var(--green);color:#fff;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:700}
.stu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
/* ══ CHARTS ══ */
.chart-card{background:#fff;border-radius:14px;padding:18px;border:1px solid var(--border);margin-bottom:14px}
.chart-card h4{color:var(--teal);margin-bottom:12px;font-size:14px;display:flex;align-items:center;gap:6px}
canvas.sorochart{width:100%;display:block}
/* ══ CHILD-FRIENDLY ENHANCEMENTS ══ */
/* GIỮ LẠI floating bg-deco và confetti — chỉ delete các rule override design system mới */
.bg-deco{position:fixed;pointer-events:none;z-index:0;font-size:36px;opacity:.07;animation:floatBgDeco linear infinite}
@keyframes floatBgDeco{0%{transform:translateY(110vh) rotate(0deg)}100%{transform:translateY(-20vh) rotate(360deg)}}
.container{position:relative;z-index:1}
/* Correct answer celebration */
@keyframes celebratePop{0%{transform:scale(1)}30%{transform:scale(1.06)}60%{transform:scale(.98)}100%{transform:scale(1)}}
.feedback.ok{animation:celebratePop .4s}
/* Confetti */
@keyframes confettiFall{to{transform:translateY(110vh) rotate(720deg) scale(0.5);opacity:0}}
.confetti-piece{position:fixed;width:10px;height:10px;border-radius:2px;pointer-events:none;z-index:9999;animation:confettiFall linear forwards}
/* Digit selector */
.digit-sel{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.dsel{padding:6px 12px;border:2.5px solid var(--border);border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;background:#fff;color:var(--muted);transition:all .18s}
.dsel:hover{border-color:var(--teal);color:var(--teal)}
.dsel.active{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 3px 8px rgba(13,115,119,.35)}
/* Speed number input */
.speed-inp{width:100%;padding:8px 10px;border:2.5px solid var(--border);border-radius:8px;font-size:16px;font-weight:700;text-align:center;color:var(--teal);font-family:'Courier New',monospace}
.speed-inp:focus{outline:none;border-color:var(--teal)}
/* Result-range chips */
.rrange-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.rsel{padding:6px 13px;border:2.5px solid var(--border);border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;background:#fff;color:var(--muted);transition:all .18s;font-family:'Courier New',monospace}
.rsel:hover{border-color:var(--orange);color:var(--orange)}
.rsel.active{background:var(--orange);color:#fff;border-color:var(--orange);box-shadow:0 3px 8px rgba(244,123,32,.35)}
/* ══ KID-FRIENDLY ENHANCEMENTS ══ */
@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-80px) scale(1.3)}}
@keyframes comboPop{0%{transform:scale(0)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes bounceIn{0%{transform:scale(0.3);opacity:0}50%{transform:scale(1.1)}70%{transform:scale(.95)}100%{transform:scale(1);opacity:1}}
@keyframes fireFlicker{0%,100%{transform:scaleY(1) rotate(-2deg)}50%{transform:scaleY(1.1) rotate(2deg)}}
@keyframes starSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes slideDown{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes rainbowBorder{0%{border-color:#ff6b6b}25%{border-color:#ffd93d}50%{border-color:#6bcb77}75%{border-color:#4d96ff}100%{border-color:#ff6b6b}}
/* Floating points popup */
.float-pts{position:fixed;pointer-events:none;z-index:9999;font-size:28px;font-weight:900;text-shadow:0 2px 8px rgba(0,0,0,.25);animation:floatUp .9s ease-out forwards}
/* Combo counter */
#comboDisplay{position:fixed;top:80px;right:16px;z-index:999;background:linear-gradient(135deg,#ff6b6b,#ffd93d);color:#fff;border-radius:20px;padding:8px 18px;font-size:15px;font-weight:900;box-shadow:0 4px 16px rgba(255,107,107,.4);display:none;animation:comboPop .3s ease-out}
#comboDisplay.show{display:block}
/* Streak fire */
.streak-fire{animation:fireFlicker .5s infinite;display:inline-block}
/* Kid-friendly card hover */
.card{transition:transform .2s, box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
/* Answer feedback overlay */
#answerFeedback{position:fixed;inset:0;z-index:998;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:80px;opacity:0;transition:opacity .15s}
#answerFeedback.show-ok{opacity:1;background:radial-gradient(circle,rgba(46,125,50,.15) 0%,transparent 70%)}
#answerFeedback.show-ng{opacity:1;background:radial-gradient(circle,rgba(198,40,40,.12) 0%,transparent 70%)}
/* ═══ LOGIN HERO — Premium 2-column landing ═══ */
#loginOverlay{
position:fixed; inset:0;
background:
radial-gradient(circle at 0% 0%, rgba(13,115,119,.12) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, rgba(255,107,53,.12) 0%, transparent 50%),
linear-gradient(135deg,#F8FAFC 0%,#EFF6FF 50%,#FEF3F2 100%);
z-index:500;
display:flex; align-items:center; justify-content:center;
padding:var(--space-4); overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.login-shell{
display:grid;
grid-template-columns:1.1fr 1fr;
gap:var(--space-8);
max-width:1100px; width:100%;
background:#fff;
border-radius:var(--radius-2xl);
box-shadow:var(--shadow-xl);
border:1px solid var(--gray-200);
overflow:hidden;
animation:bounceIn 500ms cubic-bezier(.34,1.56,.64,1);
}
.login-hero{
position:relative;
background:
radial-gradient(circle at 30% 20%, rgba(34,211,238,.20) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(255,107,53,.18) 0%, transparent 50%),
linear-gradient(135deg,var(--primary-700) 0%,var(--primary-500) 50%,#0E7C8A 100%);
color:#fff;
padding:var(--space-10) var(--space-8);
display:flex; flex-direction:column; justify-content:space-between;
overflow:hidden;
}
.login-hero::before{
content:''; position:absolute; inset:0;
background-image:
radial-gradient(circle, rgba(255,255,255,.04) 1.5px, transparent 1.5px);
background-size:24px 24px;
pointer-events:none;
}
/* v141.57: Mascot Bạch Tuộc animations */
@keyframes xsbMascotFloat{
0%,100%{ transform: translateY(0) rotate(-2deg); }
50%{ transform: translateY(-12px) rotate(2deg); }
}
@keyframes xsbMascotWave{
0%,100%{ transform: rotate(-5deg); }
50%{ transform: rotate(5deg); }
}
@keyframes xsbMascotPop{
0%{ transform: scale(0) rotate(-180deg); opacity:0; }
60%{ transform: scale(1.15) rotate(10deg); opacity:1; }
100%{ transform: scale(1) rotate(0); opacity:1; }
}
.xsb-mascot{ display:inline-block; }
.xsb-mascot-bounce:hover{ animation: xsbMascotPop .6s cubic-bezier(.34,1.56,.64,1) !important; }
.login-hero-brand{
position:relative; z-index:2;
display:flex; align-items:center; gap:var(--space-3);
font-size:var(--text-sm); font-weight:700;
letter-spacing:3px; text-transform:uppercase;
color:rgba(255,255,255,.85);
}
.login-hero-brand .logo{background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2)}
.login-hero-content{position:relative; z-index:2}
.login-hero-title{
font-size:var(--text-4xl); font-weight:900;
line-height:1.1; letter-spacing:-0.03em;
margin-bottom:var(--space-4);
color:#fff;
}
.login-hero-title .accent{
background:linear-gradient(135deg,#FFD93D 0%,#FF6B35 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
display:inline-block;
}
.login-hero-tagline{
font-size:var(--text-lg); line-height:1.6;
color:rgba(255,255,255,.85);
margin-bottom:var(--space-6); max-width:380px;
font-weight:500;
}
.login-hero-features{
display:flex; flex-direction:column; gap:var(--space-3);
position:relative; z-index:2;
}
.login-hero-feat{
display:flex; align-items:center; gap:var(--space-3);
font-size:var(--text-base); color:rgba(255,255,255,.92);
font-weight:500;
}
.login-hero-feat .feat-icon{
width:36px; height:36px;
background:rgba(255,255,255,.15);
border:1px solid rgba(255,255,255,.2);
border-radius:var(--radius-md);
display:flex; align-items:center; justify-content:center;
flex-shrink:0;
font-size:18px;
}
/* v154.49: mascot bạch tuộc Bachi trên màn đăng nhập (thay 6 thẻ giới thiệu) */
.login-hero-mascot{
position:relative; z-index:2;
display:flex; justify-content:center; align-items:center;
margin:10px 0 4px;
}
.login-hero-mascot #loginBachiArt{
width:auto; max-width:350px; max-height:380px;
display:block;
/* v154.51: ảnh là PNG trong suốt thật + ĐÃ CROP SÁT VIỀN → bỏ mix-blend-mode:multiply.
File PNG trước có ~19.5% vùng trong suốt thừa ở đỉnh/đáy → crop bỏ hẳn để đầu
bạch tuộc nằm sát ngay dưới dòng chữ (không còn khoảng hở). max-width hạ
480→350 / max-height 560→380 để giữ NGUYÊN kích thước hiển thị như cũ. */
filter:drop-shadow(0 14px 30px rgba(120,60,30,.3));
animation:bachiFloat 4s ease-in-out infinite;
}
@media (max-width:640px){
.login-hero-mascot #loginBachiArt{max-width:190px; max-height:210px}
}
.login-hero-stats{
position:relative; z-index:2;
display:flex; gap:var(--space-6);
padding-top:var(--space-6);
border-top:1px solid rgba(255,255,255,.15);
margin-top:var(--space-6);
}
.login-hero-stat{display:flex; flex-direction:column}
.login-hero-stat .num{font-size:var(--text-2xl); font-weight:900; color:#FFD93D; letter-spacing:-0.02em}
.login-hero-stat .lbl{font-size:var(--text-sm); color:rgba(255,255,255,.7); font-weight:500}
.login-form-side{
padding:var(--space-10) var(--space-8);
overflow-y:auto;
display:flex; flex-direction:column; justify-content:center;
}
.login-box{
background:transparent; padding:0;
max-width:none; width:100%; box-shadow:none; animation:none;
}
.login-box h2{
color:var(--gray-900); font-size:var(--text-3xl); font-weight:900;
text-align:left; margin-bottom:var(--space-2); letter-spacing:-0.02em;
}
.login-sub{
text-align:left; color:var(--gray-600);
font-size:var(--text-base); margin-bottom:var(--space-6);
line-height:1.6;
}
/* Account grid — clean cards */
.acc-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
gap:var(--space-2);
margin-bottom:var(--space-5);
}
.acc-card{
background:#fff;
border:1.5px solid var(--gray-200);
border-radius:var(--radius-lg);
padding:var(--space-3) var(--space-2);
text-align:center; cursor:pointer;
transition:all var(--t-base);
}
.acc-card:hover{
border-color:var(--primary-400);
transform:translateY(-2px);
box-shadow:var(--shadow-md);
}
.acc-card .ac-av{font-size:32px; margin-bottom:var(--space-2); display:block}
.acc-card .ac-name{font-size:var(--text-sm); font-weight:700; color:var(--gray-900); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.acc-card .ac-role{font-size:var(--text-xs); color:var(--gray-500); margin-top:2px}
.acc-card-active{
border-color:var(--primary-500) !important;
background:var(--primary-50) !important;
box-shadow:var(--shadow-glow) !important;
}
/* v154.76: dấu × góc trái-trên avatar — bỏ FAB "Xóa tài khoản" gây hiểu nhầm,
thay bằng × per-card. Position absolute, đỏ nhạt, không che mặt avatar. */
.acc-card .acc-x-btn{
position:absolute;
top:-6px; left:-6px;
width:24px; height:24px;
border-radius:50%;
background:#fff;
border:2px solid #E57373;
color:#D32F2F;
font-size:14px;
font-weight:900;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0;
box-shadow:0 2px 6px rgba(0,0,0,.15);
z-index:3;
transition:transform .15s ease, background .15s ease;
}
.acc-card .acc-x-btn:hover{
background:#FFEBEE;
transform:scale(1.15);
}
.acc-card .acc-x-btn:active{
transform:scale(.92);
}
@media(max-width:640px){
.acc-card .acc-x-btn{
width:26px; height:26px; /* touch target trên mobile to hơn 1 chút */
font-size:15px;
top:-7px; left:-7px;
}
}
.login-sep{
text-align:center; color:var(--gray-500);
font-size:var(--text-sm);
margin:var(--space-5) 0;
position:relative; font-weight:500;
}
.login-sep::before, .login-sep::after{
content:''; position:absolute; top:50%;
width:42%; height:1px; background:var(--gray-200);
}
.login-sep::before{left:0} .login-sep::after{right:0}
.login-inp{
width:100%; padding:11px 14px;
border:1.5px solid var(--gray-300);
border-radius:var(--radius-md);
font-family:var(--font-sans);
font-size:var(--text-base);
margin-bottom:var(--space-3);
background:#fff;
transition:all var(--t-fast);
color:var(--gray-900);
}
.login-inp:focus{
outline:none;
border-color:var(--primary-500);
box-shadow:var(--shadow-glow);
}
.pin-dots{display:flex; justify-content:center; gap:var(--space-3); margin:var(--space-3) 0}
.pin-dot{
width:12px; height:12px; border-radius:50%;
background:var(--gray-300);
transition:all var(--t-fast);
}
.pin-dot.filled{
background:var(--primary-500);
box-shadow:0 0 0 3px var(--primary-100);
}
.role-row{display:flex; gap:var(--space-2); margin-bottom:var(--space-4)}
.role-opt{
flex:1; padding:10px;
border:1.5px solid var(--gray-300);
border-radius:var(--radius-md);
text-align:center; cursor:pointer;
font-size:var(--text-sm); font-weight:600;
color:var(--gray-600); background:#fff;
transition:all var(--t-fast);
}
.role-opt:hover{border-color:var(--primary-400); color:var(--primary-600)}
.role-opt.active{
border-color:var(--primary-500);
background:var(--primary-50);
color:var(--primary-700);
box-shadow:var(--shadow-xs);
}
/* Mobile: stack vertical, hide hero */
@media(max-width:900px){
.login-shell{
grid-template-columns:1fr;
max-width:480px;
border-radius:var(--radius-xl);
}
.login-hero{
padding:var(--space-6) var(--space-5);
text-align:center; align-items:center;
}
.login-hero-content{text-align:center}
.login-hero-title{font-size:var(--text-3xl)}
.login-hero-tagline{margin:0 auto var(--space-4)}
.login-hero-features{display:none} /* hide on mobile để gọn */
.login-hero-stats{justify-content:center}
.login-form-side{padding:var(--space-6) var(--space-5)}
.login-box h2{text-align:center}
.login-sub{text-align:center}
}
/* ══ ANZAN GROUPS ══ */
.grp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:8px;margin:10px 0}
.grp-btn{border:2.5px solid rgba(180,150,110,.28);border-radius:12px;padding:11px 8px;cursor:pointer;transition:all .2s;background:#F8F2E4;text-align:center;user-select:none;position:relative} /* v154.98: thẻ nhóm kem ấm thay trắng */
.grp-btn:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.1)}
.grp-num{font-size:10px;font-weight:800;letter-spacing:.5px;margin-bottom:4px;opacity:.65}
.grp-name{font-size:13px;font-weight:700;margin-bottom:3px;line-height:1.3}
.grp-sub{font-size:10px;opacity:.7;line-height:1.4}
.grp-btn.grp-active{color:#fff!important;border-color:transparent!important;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.grp-btn.grp-active .grp-num,.grp-btn.grp-active .grp-sub{opacity:.85}
.grp-badge{position:absolute;top:-6px;right:-6px;background:var(--orange);color:#fff;font-size:9px;padding:2px 6px;border-radius:8px;font-weight:700}
.grp-desc{background:var(--teal-light);border-left:4px solid var(--teal);padding:10px 14px;border-radius:0 10px 10px 0;font-size:13px;color:var(--teal);margin:8px 0 12px;line-height:1.6}
/* ══ BEAD ANIMATION ══ */
.bead-anim-wrap{display:flex;justify-content:center;gap:32px;align-items:center;margin:16px 0;flex-wrap:wrap}
.bead-col-wrap{text-align:center}
.bead-col-lbl{font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.bead-col-val{font-size:28px;font-weight:900;font-family:'Courier New',monospace;margin-top:6px}
.bead-arrow{font-size:32px;color:var(--orange)}
.bead-step-info{background:var(--teal-light);border-left:4px solid var(--teal);padding:12px 16px;border-radius:0 10px 10px 0;font-size:13px;line-height:1.8;margin:12px 0}
/* ══ STUDENT REPORT ══ */
.rep-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
/* ══ ACCOUNT STATUS BADGES ══ */
.badge-trial{background:#fff3e0;color:#e65100;border:1px solid #ffcc02;border-radius:20px;font-size:11px;font-weight:700;padding:2px 8px;display:inline-block}
.badge-active{background:#e8f5e9;color:#2e7d32;border:1px solid #66bb6a;border-radius:20px;font-size:11px;font-weight:700;padding:2px 8px;display:inline-block}
/* Admin filter tabs — phân loại tài khoản */
.admin-filter-tab{padding:8px 14px;border-radius:10px;border:2px solid var(--border);background:#fff;color:var(--gray-700);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.admin-filter-tab:hover{background:var(--gray-100);transform:translateY(-1px)}
.admin-filter-tab.active{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;border-color:var(--teal);box-shadow:0 4px 12px rgba(2,119,189,.25)}
.admin-filter-tab .cnt{background:rgba(0,0,0,.1);color:inherit;font-size:11px;padding:1px 7px;border-radius:10px;font-weight:800;min-width:20px;text-align:center}
.admin-filter-tab.active .cnt{background:rgba(255,255,255,.25);color:#fff}
.badge-teacher{background:#e8eaf6;color:#3949ab;border:1px solid #9fa8da;border-radius:20px;font-size:11px;font-weight:700;padding:2px 8px;display:inline-block}
/* ══ ADMIN TABLE ══ */
#adminAccTable td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle}
#adminAccTable tr:last-child td{border-bottom:none}
#adminAccTable tr:hover td{background:#f9f9f9}
/* ══ PRO LOCK BADGES ON GROUP BUTTONS ══ */
.grp-lock-badge{display:none;position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:10px}
.grp-btn{position:relative}
body.trial-mode .grp-pro .grp-lock-badge{display:block}
body.trial-mode .grp-pro{opacity:.55;pointer-events:auto}
/* Fullscreen SVG icon stroke color */
#anzFsBtn svg{stroke:rgba(255,255,255,.85);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;width:18px;height:18px}
/* Detail box in fullscreen */
.detail-box-fs{background:rgba(255,255,255,.07);border-radius:12px;padding:12px 16px;font-family:'Courier New',monospace;font-size:13px;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.1)}
#anzDetailRow .detail-step .ds-num{font-size:13px}
#anzDetailRow .detail-step .ds-run{color:#7fff7f}
/* Anzan session summary colors */
.anz-summary-stars{font-size:.28em;color:#ffe066;letter-spacing:4px}
/* Animate anzan display bg on correct/wrong */
.anzan-display.disp-ok{animation:bgGreen .6s ease}
.anzan-display.disp-ng{animation:bgRed .6s ease}
@keyframes bgGreen{0%{background:linear-gradient(135deg,#0f2a0f,#0f3a1a)}100%{background:linear-gradient(135deg,#0f0f23,#1a0a3a)}} /* v154.98: TRẢ VỀ nhấp nền tối */
@keyframes bgRed{0%{background:linear-gradient(135deg,#2a0f0f,#3a1010)}100%{background:linear-gradient(135deg,#0f0f23,#1a0a3a)}}
/* ── Anzan Session Report Modal ────────────────── */
#anzReport{display:none;position:fixed;inset:0;z-index:9999;background:rgba(4,7,18,.88);backdrop-filter:blur(10px);align-items:center;justify-content:center;overflow-y:auto;padding:20px;box-sizing:border-box}
#anzReport.show{display:flex;animation:fadeIn .3s ease}
#anzReportCard{background:linear-gradient(160deg,#0d1b3e 0%,#1a0a3a 55%,#091a2a 100%);border:1px solid rgba(255,255,255,.13);border-radius:26px;padding:34px 28px 28px;max-width:480px;width:100%;position:relative;overflow:hidden;box-shadow:0 0 100px rgba(100,140,255,.2),0 0 0 1px rgba(255,255,255,.06);animation:reportCardIn .55s cubic-bezier(.34,1.4,.64,1)}
@keyframes reportCardIn{from{transform:scale(.65) translateY(50px);opacity:0}to{transform:none;opacity:1}}
#anzReport canvas{position:fixed;inset:0;pointer-events:none;z-index:9998}
/* Shimmer sweep */
#anzReportCard::before{content:'';position:absolute;top:-50%;left:-60%;width:35%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.045),transparent);animation:shimmer 3.5s ease-in-out 1.2s infinite;transform:skewX(-15deg);pointer-events:none}
/* Tier heading */
.rpt-tier{font-size:22px;font-weight:900;letter-spacing:.5px;text-align:center;margin-bottom:4px}
/* Stars */
.rpt-stars{font-size:38px;text-align:center;margin:4px 0 16px;letter-spacing:8px;animation:starPop .6s cubic-bezier(.34,1.56,.64,1) .25s both}
@keyframes starPop{from{transform:scale(0) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
/* Big score */
.rpt-score{text-align:center;margin:8px 0 20px}
.rpt-score-num{font-size:76px;font-weight:900;line-height:1;background:linear-gradient(135deg,#fff 30%,#aad4ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rpt-score-denom{font-size:24px;color:rgba(255,255,255,.45);font-weight:600}
/* Stats grid */
.rpt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px}
.rpt-stat{background:rgba(255,255,255,.07);border-radius:14px;padding:13px 8px;text-align:center;border:1px solid rgba(255,255,255,.09)}
.rpt-stat-val{font-size:26px;font-weight:800;color:#fff;line-height:1.15}
.rpt-stat-lbl{font-size:10px;color:rgba(255,255,255,.48);margin-top:3px;text-transform:uppercase;letter-spacing:.6px}
/* Accuracy bar */
.rpt-acc-row{margin-bottom:18px}
.rpt-acc-labels{font-size:12px;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;margin-bottom:5px}
.rpt-bar-wrap{background:rgba(255,255,255,.1);border-radius:99px;height:11px;overflow:hidden}
.rpt-bar-fill{height:100%;border-radius:99px;width:0;transition:width 1.3s cubic-bezier(.4,0,.2,1)}
/* Question dots */
.rpt-dots{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:0 0 16px}
.rpt-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;animation:dotPop .35s cubic-bezier(.34,1.56,.64,1) both}
.rpt-dot.ok{background:#4cff88;color:#062a10;box-shadow:0 0 8px rgba(76,255,136,.45)}
.rpt-dot.ng{background:#ff4f4f;color:#fff;box-shadow:0 0 8px rgba(255,60,60,.35)}
@keyframes dotPop{from{transform:scale(0)}to{transform:scale(1)}}
/* Message */
.rpt-msg{text-align:center;font-size:14.5px;color:rgba(255,255,255,.75);line-height:1.55;margin:4px 0 22px;font-style:italic;min-height:42px}
/* Buttons */
.rpt-btns{display:flex;gap:12px;justify-content:center}
.rpt-btn{padding:13px 30px;border-radius:13px;font-size:15px;font-weight:700;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s,filter .15s}
.rpt-btn:hover{transform:translateY(-2px);filter:brightness(1.1)}
.rpt-btn.primary{background:linear-gradient(135deg,#4cff88,#00d4ff);color:#031a0c;box-shadow:0 4px 18px rgba(76,255,136,.3)}
.rpt-btn.secondary{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.2)}
/* ══ DARK MODE ══ */
body.dark-mode{
background:linear-gradient(135deg,#0d1117 0%,#161b22 100%);
color:#e6edf3;
}
body.dark-mode .card{background:#161b22;border-color:#30363d;box-shadow:0 2px 8px rgba(0,0,0,.4)}
body.dark-mode header{background:linear-gradient(135deg,#0d4a4e,#2d1458)}
body.dark-mode .tabs{background:#161b22;box-shadow:0 2px 8px rgba(0,0,0,.3)}
body.dark-mode .tab{color:#8b949e}
body.dark-mode .tab.active{background:linear-gradient(135deg,#0d4a4e,#2d1458);color:#fff}
body.dark-mode .login-box{background:#161b22;color:#e6edf3}
body.dark-mode .login-inp{background:#0d1117;border-color:#30363d;color:#e6edf3}
body.dark-mode .acc-card{background:#21262d;border-color:#30363d}
body.dark-mode .acc-card .ac-name{color:#e6edf3}
body.dark-mode .sg label{color:#8b949e}
body.dark-mode input[type=number],body.dark-mode input[type=text],body.dark-mode select{background:#0d1117;color:#e6edf3;border-color:#30363d}
body.dark-mode .formula-section{background:#21262d;border-color:#30363d}
body.dark-mode .ws-preview{background:#21262d;color:#e6edf3}
body.dark-mode .rtable th{background:#21262d;color:#e6edf3}
body.dark-mode .rtable td{border-color:#30363d;color:#8b949e}
body.dark-mode .modal-box{background:#161b22;border-color:#30363d}
body.dark-mode .anzan-input{background:#0d1117;color:#7df;border-color:rgba(100,200,255,.4)}
body.dark-mode h2,body.dark-mode h3,body.dark-mode h4{color:#e6edf3}
/* Dark mode coverage cho components NEW (login hero, bottom nav, empty state, ch-card, ws preview) */
body.dark-mode .login-shell{background:#161b22; border-color:#30363d}
body.dark-mode .login-form-side{background:#161b22}
body.dark-mode .empty-title{color:#e6edf3}
body.dark-mode .empty-desc{color:#8b949e}
body.dark-mode .bottom-nav{background:rgba(13,17,23,.92); border-color:#30363d}
body.dark-mode .bnav-item{color:#8b949e}
body.dark-mode .bnav-item:hover{background:#21262d; color:#7df}
body.dark-mode .bnav-item.active{color:#7df}
body.dark-mode .ch-card{background:#161b22; border-color:#30363d}
body.dark-mode .ch-card.incoming{background:linear-gradient(135deg,#2a1e10,#161b22)}
body.dark-mode .ch-card.sent{background:linear-gradient(135deg,#102a26,#161b22)}
body.dark-mode .ch-card.done{background:linear-gradient(135deg,#102a16,#161b22)}
body.dark-mode .role-opt{background:#0d1117; color:#8b949e; border-color:#30363d}
body.dark-mode .role-opt.active{background:#102a2a; color:#7df; border-color:#0D7377}
body.dark-mode header{background:#161b22; border-color:#30363d}
body.dark-mode header h1, body.dark-mode .chip strong{color:#e6edf3}
body.dark-mode .chip{background:#21262d; color:#8b949e; border-color:#30363d}
body.dark-mode .tabs{background:#161b22; border-color:#30363d}
body.dark-mode .tab{color:#8b949e}
body.dark-mode .tab:hover{background:#21262d; color:#e6edf3}
/* Accessibility: tôn trọng cài đặt prefers-reduced-motion của user (giảm motion để tránh chóng mặt) */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration:0.01ms !important;
animation-iteration-count:1 !important;
transition-duration:0.01ms !important;
scroll-behavior:auto !important;
}
}
/* Dark mode coverage cho các component mới — quest, sticker, mystery box, adventure, mascot, checkin */
body.dark-mode .quest-card{background:#161b22;border-color:#30363d;color:#e6edf3}
body.dark-mode .quest-card.done{background:linear-gradient(135deg,#1a3329,#161b22);border-color:#2ea043}
body.dark-mode .quest-title{color:#e6edf3}
body.dark-mode .quest-progress{color:#8b949e}
body.dark-mode .quest-bar{background:rgba(255,255,255,.08)}
body.dark-mode .daily-hub-card{background:linear-gradient(135deg,#1a1410 0%,#221913 50%,#2a1c12 100%)!important;border-color:rgba(255,159,67,.35)!important}
body.dark-mode .checkin-day{background:#161b22;border-color:#30363d;color:#e6edf3}
body.dark-mode .checkin-day.locked{background:#0d1117;color:#6e7681}
body.dark-mode .checkin-day.claimed{background:linear-gradient(135deg,#0d2818,#1a3329);border-color:#2ea043;color:#7ee787}
body.dark-mode .checkin-day.today{background:linear-gradient(135deg,#3d2c0f,#5d4515);border-color:#FFA000;color:#FFD93D}
body.dark-mode .mb-card{background:#161b22;border-color:#30363d;color:#e6edf3}
body.dark-mode .mb-card.has-box{background:linear-gradient(135deg,#3d2c0f,#5d4515);border-color:#FFA000}
body.dark-mode .sticker-card{background:#161b22;border-color:#30363d;color:#e6edf3}
body.dark-mode .sticker-card.owned{background:linear-gradient(135deg,#3d2c0f,#5d4515);border-color:#FFA000}
body.dark-mode .sticker-card.locked{background:#0d1117;border-color:#21262d}
body.dark-mode .sticker-card .sticker-name{color:#8b949e}
body.dark-mode .adv-island{background:linear-gradient(135deg,#0c2933,#0e3a44);border-color:#26a69a;color:#e6edf3}
body.dark-mode .adv-island.completed{background:linear-gradient(135deg,#3d2c0f,#5d4515);border-color:#FFA000}
body.dark-mode .adv-island-head .adv-status{color:#8b949e}
body.dark-mode .adv-stop{background:rgba(255,255,255,.05);border-color:#30363d;color:#e6edf3}
body.dark-mode .mascot-bubble{background:#161b22;border-color:#FFA000;color:#e6edf3}
body.dark-mode .mascot-bubble::before{background:#161b22;border-color:#FFA000}
body.dark-mode .mascot-bubble::after{background:#161b22;border-color:#FFA000}
body.dark-mode .mascot-bubble .mb-name{color:#FFA726}
body.dark-mode .mascot-bubble .mb-close{color:#8b949e}
/* FIX: Dark mode cho pet card (có inline gradient cream) */
body.dark-mode #petMainView .card[style*="#FFF3E0"]{background:linear-gradient(135deg,#3d2418,#2a1810)!important;border-color:#8d4c1a!important;color:#FFD180!important}
body.dark-mode #petMainView #petName{color:#FFD180!important}
body.dark-mode #petMainView #petStageLabel{color:#FFB74D!important}
/* FIX: Dark mode cho device modal items (rendered inline) */
body.dark-mode #deviceModalContent > div{background:#21262d!important;border-color:#30363d!important;color:#e6edf3}
/* FIX: Dark mode cho pet leaderboard items */
body.dark-mode #petLbContent > div{background:transparent!important;color:#e6edf3}
body.dark-mode #petLbContent > div[style*="background:#fff8e1"]{background:#3d2c0f!important}
/* FIX: Dark mode cho pet shop buttons */
body.dark-mode #petShopGrid button[style*="background:#fff"]{background:#21262d!important;color:#e6edf3}
/* F17: Polish dark mode cho các UI mới (v15+) */
body.dark-mode #petStreakFreezeCard{background:linear-gradient(135deg,#0d3b3e,#0d2b2e)!important;border-color:#0e5a5e!important}
body.dark-mode #petStreakFreezeCard div[style*="color:#006064"]{color:#7be8f0!important}
body.dark-mode #petStreakFreezeCard div[style*="color:#00838F"]{color:#a0d8de!important}
body.dark-mode #petStreakFreezeCard div[style*="color:#0097A7"]{color:#80c8d0!important}
body.dark-mode #xsbFriendsOnlineList > div{background:#161b22!important;border-color:#30363d!important;color:#e6edf3!important}
/* Modal xsbModal đẹp đè dark */
body.dark-mode div[style*="z-index:99999"] > div[style*="background:#fff"]{background:#161b22!important;color:#e6edf3!important}
body.dark-mode div[style*="z-index:99999"] [style*="color:#1F2937"]{color:#e6edf3!important}
body.dark-mode div[style*="z-index:99999"] [style*="color:#6B7280"]{color:#a0a8b0!important}
body.dark-mode #xsbModalInput{background:#0d1117!important;border-color:#30363d!important;color:#e6edf3!important}
body.dark-mode #xsbModalCancel{background:#21262d!important;color:#a0a8b0!important;border:1px solid #30363d!important}
/* Tools card "Công cụ" trong Results */
body.dark-mode .card[style*="EDE7F6"]{background:linear-gradient(135deg,#1e1339,#161b22)!important;border-color:#5b4498!important}
body.dark-mode .card[style*="EDE7F6"] h3{color:#c4b5fd!important}
body.dark-mode .card[style*="EDE7F6"] p{color:#a0a8b0!important}
/* Avatar Studio + Wardrobe + class modal cards */
body.dark-mode .av-card{background:#161b22!important;border-color:#30363d!important;color:#e6edf3!important}
body.dark-mode .av-card .av-name{color:#e6edf3!important}
/* Onboarding overlay dark — tuy hiếm khi user dark mode + chưa login, vẫn polish */
body.dark-mode #xsbOnboardOverlay > div{background:linear-gradient(135deg,#1e1a0e,#1f1a0e)!important;color:#fef3c7!important}
body.dark-mode #xsbOnboardOverlay h2{color:#fbbf24!important}
body.dark-mode #xsbOnboardOverlay p{color:#fde68a!important}
/* Daily challenge box dark */
body.dark-mode div[style*="background:linear-gradient(135deg,#FFF8E1,#FFE0B2)"]{background:linear-gradient(135deg,#3a2a0a,#1f1808)!important;border-color:#a16207!important;color:#fde68a!important}
/* ═══ PET ANIMATIONS — Sinh động ═══ */
@keyframes petIdle{
0%,100%{transform:translateY(0) rotate(-1deg)}
50%{transform:translateY(-8px) rotate(1deg)}
}
@keyframes petJump{
0%{transform:translateY(0) scale(1)}
30%{transform:translateY(-30px) scale(1.1)}
60%{transform:translateY(-15px) scale(1.05)}
100%{transform:translateY(0) scale(1)}
}
@keyframes petWobble{
0%,100%{transform:rotate(0deg)}
20%{transform:rotate(-12deg)}
40%{transform:rotate(12deg)}
60%{transform:rotate(-8deg)}
80%{transform:rotate(8deg)}
}
@keyframes petSad{
0%,100%{transform:translateY(2px) rotate(0deg);filter:saturate(.6)}
50%{transform:translateY(4px) rotate(0deg);filter:saturate(.5)}
}
@keyframes petHeart{
0%{transform:translate(0,0) scale(0);opacity:0}
20%{transform:translate(0,-8px) scale(1);opacity:1}
100%{transform:translate(var(--dx,20px),-80px) scale(.5);opacity:0}
}
/* Pet eat — chomp motion */
@keyframes petChew{
0%,100%{transform:scaleX(1) scaleY(1)}
25%{transform:scaleX(1.08) scaleY(.92)}
50%{transform:scaleX(.94) scaleY(1.06)}
75%{transform:scaleX(1.06) scaleY(.94)}
}
/* Pet drink — lean down */
@keyframes petDrink{
0%,100%{transform:translateY(0) rotate(0)}
30%{transform:translateY(8px) rotate(-3deg)}
60%{transform:translateY(8px) rotate(3deg)}
}
/* Pet bathe — splash + spin */
@keyframes petBathe{
0%,100%{transform:rotate(0)}
25%{transform:rotate(-15deg) translateY(-2px)}
50%{transform:rotate(0) translateY(2px)}
75%{transform:rotate(15deg) translateY(-2px)}
}
/* Pet twirl — show off accessory */
@keyframes petTwirl{
0%{transform:rotate(0) scale(1)}
50%{transform:rotate(180deg) scale(1.15)}
100%{transform:rotate(360deg) scale(1)}
}
/* Pet heal — pulse */
@keyframes petHeal{
0%,100%{transform:scale(1);filter:brightness(1)}
50%{transform:scale(1.1);filter:brightness(1.4) saturate(1.3)}
}
/* Item falls from top to pet */
@keyframes itemFall{
0%{transform:translateY(-150px) rotate(0);opacity:0}
20%{opacity:1}
60%{transform:translateY(20px) rotate(180deg);opacity:1}
100%{transform:translateY(0) rotate(360deg);opacity:0}
}
/* Item floats up + fades */
@keyframes itemFloat{
0%{transform:translate(0,0) scale(.5);opacity:0}
20%{transform:translate(0,-10px) scale(1.2);opacity:1}
100%{transform:translate(var(--dx,0px),-100px) scale(.6);opacity:0}
}
/* Bubble rises */
@keyframes bubbleRise{
0%{transform:translate(var(--bx,0px),0) scale(.3);opacity:0}
20%{opacity:.85}
100%{transform:translate(calc(var(--bx,0px) + var(--drift,10px)),-130px) scale(1);opacity:0}
}
/* Sparkle pop */
@keyframes sparklePop{
0%{transform:translate(0,0) scale(0) rotate(0);opacity:0}
30%{transform:translate(var(--sx,0px),var(--sy,-10px)) scale(1.4) rotate(180deg);opacity:1}
100%{transform:translate(calc(var(--sx,0px)*2),calc(var(--sy,-10px)*2)) scale(.4) rotate(360deg);opacity:0}
}
.pet-stage.pet-chew{animation:petChew .5s ease-in-out 3}
.pet-stage.pet-drink{animation:petDrink .8s ease-in-out 2}
.pet-stage.pet-bathe{animation:petBathe .5s ease-in-out 4}
.pet-stage.pet-twirl{animation:petTwirl .8s ease-in-out 1}
.pet-stage.pet-heal{animation:petHeal 1s ease-in-out 2}
.pet-item-falling{
position:absolute;font-size:50px;
left:50%;top:0;transform-origin:center;
animation:itemFall 1.2s ease-in forwards;
z-index:6;pointer-events:none;
filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));
}
.pet-item-floater{
position:absolute;font-size:28px;
left:50%;top:40%;
animation:itemFloat 1.6s ease-out forwards;
z-index:5;pointer-events:none;
}
.pet-bubble{
position:absolute;font-size:24px;
left:calc(50% + var(--bx,0px));bottom:0;
animation:bubbleRise 2s ease-out forwards;
z-index:5;pointer-events:none;
}
.pet-sparkle{
position:absolute;font-size:22px;
left:50%;top:40%;
animation:sparklePop 1.4s ease-out forwards;
z-index:7;pointer-events:none;
}
.pet-stage{
position:relative;display:inline-block;cursor:pointer;
transition:filter .3s;
animation:petIdle 3s ease-in-out infinite;
user-select:none;-webkit-user-select:none;
/* FIX: Đặt size cố định để SVG illustrations render đúng tỉ lệ */
width:200px;height:200px;
}
.pet-stage > div{width:100%;height:100%;position:relative}
.pet-stage svg{width:100%;height:100%;display:block}
@media(max-width:480px){.pet-stage{width:170px;height:170px}}
.pet-stage:hover{filter:brightness(1.08)}
/* v154.139: HÀO QUANG theo danh hiệu sau Huyền Thoại — tiến hóa vô hạn KHÔNG cần ảnh mới. Glow ::before nằm SAU pet (pointer-events:none) */
#petStageWrapper{border-radius:50%}
#petStageWrapper[class*="pet-aura-"]::before{content:'';position:absolute;inset:-12px;border-radius:50%;pointer-events:none;animation:petAuraPulse 2.4s ease-in-out infinite}
.pet-aura-bronze::before{background:radial-gradient(circle,rgba(205,127,50,.55),transparent 70%)}
.pet-aura-silver::before{background:radial-gradient(circle,rgba(180,200,225,.6),transparent 70%)}
.pet-aura-gold::before{background:radial-gradient(circle,rgba(255,200,40,.62),transparent 70%)}
.pet-aura-rainbow::before{background:conic-gradient(from 0deg,#ff5a5a,#ffd246,#5adc82,#5aa0ff,#c86bff,#ff5a5a);filter:blur(9px);opacity:.55;animation:petAuraSpin 6s linear infinite}
@keyframes petAuraPulse{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.07);opacity:.85}}
@keyframes petAuraSpin{to{transform:rotate(360deg)}}
.pet-stage.pet-jump{animation:petJump .6s cubic-bezier(.25,.9,.4,1.3)}
.pet-stage.pet-wobble{animation:petWobble .8s ease-in-out}
.pet-stage.pet-sad{animation:petSad 2s ease-in-out infinite}
.pet-acc{
position:absolute;font-size:.45em;line-height:1;
pointer-events:none;
text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.pet-acc.acc-hat{top:-5%;left:50%;transform:translateX(-50%);font-size:.55em;z-index:3}
.pet-acc.acc-eyewear{top:30%;left:50%;transform:translateX(-50%);font-size:.42em;z-index:4}
.pet-acc.acc-neck{top:62%;left:50%;transform:translateX(-50%);font-size:.4em;z-index:2}
.pet-acc.acc-aura{top:-8%;left:-8%;width:116%;height:116%;font-size:1.15em;opacity:.18;z-index:0;animation:petIdle 4s ease-in-out infinite reverse}
.pet-floater{
position:absolute;font-size:24px;pointer-events:none;
left:50%;top:30%;
animation:petHeart 1.4s ease-out forwards;
}
/* Lucky wheel */
@keyframes wheelSpin{
to{transform:rotate(var(--turn, 1800deg))}
}
.wheel-container{position:relative;width:240px;height:240px;margin:0 auto}
.wheel-disc{
width:100%;height:100%;border-radius:50%;
border:6px solid #FFD93D;
position:relative;overflow:hidden;
box-shadow:0 8px 24px rgba(0,0,0,.2), inset 0 0 0 4px #fff;
}
.wheel-disc.spinning{animation:wheelSpin 3.5s cubic-bezier(.2,.6,.3,1) forwards}
.wheel-pointer{
position:absolute;top:-12px;left:50%;transform:translateX(-50%);
font-size:32px;z-index:5;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.wheel-segment{
position:absolute;width:50%;height:50%;
left:50%;top:50%;
transform-origin:0 0;
display:flex;align-items:flex-start;justify-content:center;
font-size:22px;font-weight:900;
padding-top:14px;
color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);
}
/* Math sprint */
.ms-num{font-size:48px;font-weight:900;font-family:'Courier New',monospace;color:#FF6B6B;text-align:center;margin:16px 0;letter-spacing:4px}
.ms-input{width:100%;padding:14px;font-size:32px;text-align:center;border:3px solid #FF6B6B;border-radius:12px;font-weight:700;font-family:'Courier New',monospace;margin:8px 0}
/* ═══ DAILY QUESTS / CHECK-IN / MYSTERY BOX ═══ */
#dailyHubCard{background:linear-gradient(135deg,#fff8e1 0%,#fff 50%,#e3f2fd 100%);border:2px solid #FFD54F}
.quest-card{background:#fff;border:2px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px;transition:all .25s;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.quest-card.done{background:linear-gradient(135deg,#E8F5E9,#fff);border-color:#A5D6A7;box-shadow:0 2px 8px rgba(46,125,50,.12)}
.quest-card.done .quest-title{text-decoration:line-through;opacity:.6}
.quest-icon{font-size:28px;flex-shrink:0;width:42px;text-align:center}
.quest-body{flex:1;min-width:0}
.quest-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px}
.quest-progress{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.quest-bar{flex:1;height:6px;background:rgba(0,0,0,.08);border-radius:3px;overflow:hidden}
.quest-bar-fill{height:100%;background:linear-gradient(90deg,#42A5F5,#1976D2);border-radius:3px;transition:width .5s}
.quest-card.done .quest-bar-fill{background:linear-gradient(90deg,#66BB6A,#2E7D32)}
.quest-reward{font-size:13px;font-weight:700;color:#F57F17;flex-shrink:0;text-align:right}
/* Check-in calendar */
.checkin-grid{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr));gap:8px;margin-top:14px;max-width:100%;padding:6px 4px}
.checkin-day{position:relative;aspect-ratio:1;border:2.5px solid var(--border);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;cursor:default;transition:all .25s cubic-bezier(.34,1.56,.64,1);padding:4px;min-width:0;overflow:hidden}
.checkin-day::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.5) 0%,transparent 50%);pointer-events:none}
.checkin-day.claimed{background:linear-gradient(135deg,#A5D6A7 0%,#66BB6A 50%,#43A047 100%);border-color:#2E7D32;color:#fff;box-shadow:0 4px 12px rgba(46,125,50,.3)}
.checkin-day.claimed::after{content:'✓';position:absolute;top:3px;right:5px;font-size:11px;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.checkin-day.today{background:linear-gradient(135deg,#FFD93D 0%,#FF9F43 50%,#FF6B35 100%);border-color:#E65100;color:#fff;cursor:pointer;animation:checkinPulse 1.6s ease-in-out infinite;box-shadow:0 6px 18px rgba(255,107,53,.45)}
.checkin-day.today:hover{transform:scale(1.1) rotate(-2deg);box-shadow:0 8px 22px rgba(255,107,53,.6)}
.checkin-day.today::after{content:'👆';position:absolute;top:-4px;right:-4px;font-size:16px;animation:checkinPoint 1s ease-in-out infinite}
.checkin-day.locked{opacity:.5;background:linear-gradient(135deg,#fafafa,#f0f0f0);border-style:dashed}
.checkin-day .day-num{font-size:13px;font-weight:900;margin-bottom:2px;position:relative;z-index:1;text-shadow:0 1px 2px rgba(0,0,0,.1)}
.checkin-day .day-reward{font-size:18px;line-height:1;position:relative;z-index:1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
.checkin-day .day-coin{font-size:10px;font-weight:800;margin-top:2px;position:relative;z-index:1}
.checkin-day.claimed .day-coin{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.checkin-day.today .day-coin{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.checkin-day.locked .day-coin{color:#bdbdbd}
@keyframes checkinPoint{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(10deg)}}
@keyframes checkinPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,160,0,.5)} 50%{box-shadow:0 0 0 8px rgba(255,160,0,0)}}
/* Mystery box inventory */
.mb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:8px}
.mb-card{border:2.5px solid;border-radius:14px;padding:14px 8px 10px;text-align:center;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.mb-card .mb-icon{font-size:46px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));z-index:1}
/* v85: SVG 3D box thay emoji — kích cỡ + transition */
.mb-card .mb-icon.mb-icon-svg{height:60px;display:flex;justify-content:center;align-items:center}
.mb-card .mb-icon.mb-icon-svg svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.mb-card.has-box:hover .mb-icon.mb-icon-svg svg{transform:translateY(-3px) rotate(-4deg) scale(1.1)}
.mb-card .mb-count{position:absolute;top:6px;right:6px;color:#fff;font-size:11px;font-weight:800;border-radius:12px;padding:3px 9px;min-width:22px;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:2}
.mb-card .mb-name{font-size:13px;font-weight:800;margin-top:4px;text-shadow:0 1px 2px rgba(255,255,255,.7);z-index:1;letter-spacing:.3px}
/* ═════ BRONZE (đồng) — luôn hiện màu nâu-cam ═════ */
.mb-card.tier-bronze{
background:linear-gradient(135deg,#fef3e2,#f4cfa0,#cd7f32);
border-color:#cd7f32;
box-shadow:0 3px 10px rgba(205,127,50,.25)
}
.mb-card.tier-bronze .mb-name{color:#6f3d0a}
.mb-card.tier-bronze .mb-count{background:linear-gradient(135deg,#cd7f32,#8b4513)}
.mb-card.tier-bronze.has-box{animation:boxBounceBronze 2.4s ease-in-out infinite;box-shadow:0 5px 16px rgba(205,127,50,.45)}
.mb-card.tier-bronze.has-box:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 10px 24px rgba(205,127,50,.55)}
/* ═════ SILVER (bạc) — luôn hiện màu xám trắng ═════ */
.mb-card.tier-silver{
background:linear-gradient(135deg,#ffffff,#e0e0e0,#9e9e9e);
border-color:#9e9e9e;
box-shadow:0 3px 10px rgba(158,158,158,.3)
}
.mb-card.tier-silver .mb-name{color:#3a3a3a}
.mb-card.tier-silver .mb-count{background:linear-gradient(135deg,#9e9e9e,#5e5e5e)}
.mb-card.tier-silver.has-box{animation:boxBounceSilver 2.2s ease-in-out infinite;box-shadow:0 5px 16px rgba(158,158,158,.45)}
.mb-card.tier-silver.has-box:hover{transform:translateY(-5px) scale(1.05);box-shadow:0 10px 24px rgba(158,158,158,.55)}
/* ═════ GOLD (vàng) — luôn hiện màu vàng rực ═════ */
.mb-card.tier-gold{
background:linear-gradient(135deg,#fff9d4,#ffd700,#ffa500);
border-color:#ffa500;
box-shadow:0 3px 12px rgba(255,215,0,.4)
}
.mb-card.tier-gold .mb-name{color:#7a4f00}
.mb-card.tier-gold .mb-count{background:linear-gradient(135deg,#ffa500,#cc7000)}
.mb-card.tier-gold.has-box{
animation:boxBounceGold 1.8s ease-in-out infinite;
box-shadow:0 5px 18px rgba(255,215,0,.55), 0 0 28px rgba(255,215,0,.35)
}
.mb-card.tier-gold.has-box:hover{transform:translateY(-5px) scale(1.06);box-shadow:0 12px 30px rgba(255,215,0,.7), 0 0 36px rgba(255,215,0,.5)}
.mb-card.tier-gold.has-box::after{content:'✨';position:absolute;top:8px;left:8px;font-size:14px;animation:sparkleSpin 2s linear infinite;z-index:2}
/* When NO box (count=0): chỉ giảm opacity nhẹ + tắt hover transform — vẫn giữ màu */
.mb-card:not(.has-box){opacity:.6;cursor:default;filter:saturate(.7)}
.mb-card:not(.has-box):hover{opacity:.7}
.mb-card:not(.has-box) .mb-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.1)) grayscale(.3)}
@keyframes boxBounceBronze{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-2deg)}}
@keyframes boxBounceSilver{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px) rotate(2deg)}}
@keyframes boxBounceGold{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.05)}}
@keyframes sparkleSpin{0%{transform:rotate(0) scale(1);opacity:.6}50%{transform:rotate(180deg) scale(1.3);opacity:1}100%{transform:rotate(360deg) scale(1);opacity:.6}}
@keyframes boxBounce{0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)}}
.mb-open-anim{font-size:140px;display:block;animation:boxOpen 1.2s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes boxOpen{
0%{transform:scale(.5) rotate(-10deg);opacity:0}
30%{transform:scale(1.2) rotate(5deg);opacity:1}
60%{transform:scale(1.05) rotate(-3deg)}
100%{transform:scale(1) rotate(0)}
}
/* Sticker album */
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
.sticker-card{aspect-ratio:1;background:#fff;border:2px solid var(--border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:36px;position:relative;transition:all .2s}
.sticker-card.owned{background:linear-gradient(135deg,#FFF8E1,#FFE082);border-color:#FFA000;cursor:pointer}
.sticker-card.owned:hover{transform:scale(1.05);box-shadow:0 4px 10px rgba(255,160,0,.3)}
.sticker-card.locked{filter:grayscale(1) brightness(.55);opacity:.45}
.sticker-card .sticker-name{position:absolute;bottom:4px;font-size:9px;font-weight:600;color:var(--muted);max-width:90%;text-align:center;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticker-card .sticker-dupe{position:absolute;top:2px;right:2px;background:#42A5F5;color:#fff;font-size:9px;font-weight:700;border-radius:8px;padding:1px 5px}
/* Mascot Cô giáo Bachi speech bubble */
@keyframes mascotPop{
0%{transform:translateY(20px) scale(.6);opacity:0}
60%{transform:translateY(-5px) scale(1.05)}
100%{transform:translateY(0) scale(1);opacity:1}
}
.mascot-bubble{
position:fixed;bottom:90px;right:14px;z-index:8000;
background:#fff;border:3px solid #FFA000;border-radius:20px;
padding:12px 16px 12px 70px;max-width:280px;
box-shadow:0 8px 24px rgba(0,0,0,.15);
animation:mascotPop .4s cubic-bezier(.34,1.56,.64,1);
font-size:13.5px;line-height:1.45;color:var(--text);
}
.mascot-bubble::before{
content:'🐙';
position:absolute;left:-6px;bottom:-12px;
font-size:50px;background:#fff;border:3px solid #FFA000;
width:62px;height:62px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));
}
.mascot-bubble::after{
content:'';position:absolute;bottom:-2px;left:38px;
width:14px;height:14px;background:#fff;
border-right:3px solid #FFA000;border-bottom:3px solid #FFA000;
transform:rotate(45deg);
}
.mascot-bubble .mb-name{font-weight:800;color:#E65100;font-size:12px;margin-bottom:3px;letter-spacing:.5px}
.mascot-bubble .mb-close{position:absolute;top:4px;right:8px;font-size:18px;color:var(--muted);cursor:pointer;background:none;border:none;line-height:1}
@media (max-width:640px){.mascot-bubble{bottom:96px;left:14px;right:14px;max-width:none}}
/* Adventure map */
.adv-island{position:relative;background:linear-gradient(135deg,#E0F7FA,#B2EBF2);border:2px solid #4DD0E1;border-radius:18px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all .25s}
.adv-island.locked{filter:grayscale(.6);opacity:.6;cursor:not-allowed}
.adv-island.completed{background:linear-gradient(135deg,#FFF8E1,#FFE082);border-color:#FFA000}
.adv-island:not(.locked):hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(77,208,225,.25)}
.adv-island-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.adv-island-head .adv-icon{font-size:36px}
.adv-island-head .adv-title{font-weight:800;font-size:16px;flex:1}
.adv-island-head .adv-status{font-size:12px;color:var(--muted);font-weight:600}
.adv-stops{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.adv-stop{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.7);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.adv-stop.done{background:#66BB6A;color:#fff;border-color:#2E7D32}
.adv-stop.boss{background:#E53935;color:#fff;border-color:#B71C1C;font-size:14px}
.adv-stop.boss.done{background:#FFD93D;color:#000;border-color:#FFA000}
/* Class card */
.class-info-card{background:linear-gradient(135deg,#E1F5FE,#B3E5FC);border:2px solid #4FC3F7;border-radius:14px;padding:14px;margin-bottom:10px}
/* Event banner */
.evt-banner{
background:linear-gradient(135deg,#FF6B6B,#FFA726);
color:#fff;padding:10px 16px;border-radius:12px;
font-weight:700;font-size:13px;margin-bottom:12px;
display:flex;align-items:center;gap:10px;
box-shadow:0 4px 12px rgba(255,107,107,.25);
animation:petWobble 1.2s ease-in-out 1;
}
/* ── CHALLENGE SYSTEM ── */
.tab-badge{background:var(--red);color:#fff;border-radius:50%;width:16px;height:16px;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-left:4px;vertical-align:middle;}
.ch-card{background:#fff;border:2px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:8px;transition:border-color .2s;}
.ch-card.incoming{border-color:var(--orange);background:linear-gradient(135deg,#fff8f0,#fff);}
.ch-card.sent{border-color:var(--teal);background:linear-gradient(135deg,#f0fffe,#fff);}
.ch-card.done{border-color:var(--green);background:linear-gradient(135deg,#f0fff4,#fff);cursor:pointer;}
.ch-section-title{font-size:13px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;transition:background .15s;}
.ch-section-title:hover{background:rgba(0,0,0,0.04);}
.ch-section-title span[id$="Arrow"]{transition:transform .25s ease;}
.vs-board{display:flex;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#1a1a2e,#16213e);border-radius:16px;padding:20px 12px;margin:12px 0;}
.vs-player{text-align:center;flex:1;min-width:0;}
.vs-player .vp-avatar{font-size:36px;display:block;margin-bottom:6px;}
.vs-player .vp-name{color:rgba(255,255,255,.85);font-weight:700;font-size:13px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vs-player .vp-score{font-size:clamp(22px,8vw,36px);font-weight:900;font-family:'Courier New',monospace;overflow-wrap:anywhere}
.vs-player .vp-sub{color:rgba(255,255,255,.5);font-size:11px;}
.vs-sep{color:#FFD93D;font-size:24px;font-weight:900;flex-shrink:0;}
.vs-win{color:#FFD93D;}
.vs-lose{color:#777;}
/* Challenge flash display — TO gấp 2x cho dễ nhìn, KHÔNG wrap dòng */
.ch-flash-num{
font-size:clamp(160px,52vw,400px); /* tăng 2x: 80-200 → 160-400 */
font-weight:900;color:#FFD93D;
font-family:'Courier New',monospace;text-align:center;
text-shadow:0 0 40px rgba(255,217,61,.8), 0 0 80px rgba(255,217,61,.35), 0 0 120px rgba(255,107,53,.2);
min-height:480px; /* tăng 2x: 240 → 480 */
display:flex;align-items:center;justify-content:center;
position:relative;padding:0 12px;
background:radial-gradient(circle at 50% 50%, rgba(255,217,61,.08) 0%, transparent 70%);
border-radius:20px;
animation:chFlashPulse 1.4s ease-in-out infinite;
/* FIX: chống wrap xuống dòng khi số dài (5+ chữ số) — auto-shrink font theo container */
white-space:nowrap;
overflow:hidden;
}
/* FIX: auto-shrink theo độ dài text → đảm bảo 5-10 chữ số luôn fit modal */
.ch-flash-num.long-num{font-size:clamp(80px,18vw,180px)} /* 5-6 ký tự */
.ch-flash-num.mlong-num{font-size:clamp(60px,13vw,140px)} /* 7-8 ký tự */
.ch-flash-num.xlong-num{font-size:clamp(48px,10vw,110px)} /* 9-10 ký tự */
.ch-flash-num.xxlong-num{font-size:clamp(36px,8vw,90px)} /* 11+ ký tự (10 digits + dấu trừ) */
@keyframes chFlashPulse{
0%,100%{filter:brightness(1) drop-shadow(0 0 20px rgba(255,217,61,.4))}
50%{filter:brightness(1.15) drop-shadow(0 0 40px rgba(255,217,61,.7))}
}
@keyframes chNumPop{
0%{transform:scale(.4) rotate(-8deg);opacity:0}
50%{transform:scale(1.18) rotate(2deg)}
80%{transform:scale(.95) rotate(-1deg)}
100%{transform:scale(1) rotate(0);opacity:1}
}
.ch-flash-num.popping{animation:chNumPop .35s cubic-bezier(.34,1.56,.64,1.2)}
/* Background sparkles cho challenge */
.ch-flash-num::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(circle at 15% 25%, rgba(255,217,61,.3) 0%, transparent 8%),
radial-gradient(circle at 85% 30%, rgba(255,107,53,.25) 0%, transparent 8%),
radial-gradient(circle at 25% 75%, rgba(255,217,61,.2) 0%, transparent 7%),
radial-gradient(circle at 80% 80%, rgba(76,217,255,.2) 0%, transparent 8%);
animation:chSparkleFloat 3s ease-in-out infinite;
border-radius:inherit;
}
@keyframes chSparkleFloat{
0%,100%{transform:translateY(0) scale(1);opacity:.7}
50%{transform:translateY(-4px) scale(1.05);opacity:1}
}
@media (max-width:640px){
.ch-flash-num{font-size:clamp(140px,52vw,280px);min-height:400px} /* tăng 2x mobile */
}
/* FIX: Trạng thái prep — reset font lớn của ch-flash-num để text "Sẵn sàng" + info row không tràn ra ngoài khung */
.ch-flash-num.is-prep{
font-size:14px !important;
animation:none !important;
text-shadow:none !important;
background:transparent !important;
padding:24px 12px !important;
min-height:240px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
overflow:hidden !important;
word-break:break-word !important;
}
.ch-flash-num.is-prep > *{
max-width:100% !important;
font-size:inherit; /* override accidental large size */
}
.ch-flash-num.is-prep::before{display:none !important}
/* ── CHALLENGE ANIMATIONS ── */
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.8)}60%{box-shadow:0 0 0 7px rgba(255,59,48,0)}}
.badge-pulse{animation:badgePulse 1.1s ease-out infinite;}
/* FIX v67: Tab Soroban sáng lên khi có thách đấu mới (thay vì popup) */
@keyframes tabChallengeGlow{
0%,100%{ background:linear-gradient(135deg, rgba(255,107,53,.18), rgba(255,217,61,.10)); box-shadow:0 0 0 0 rgba(255,107,53,.4); }
50%{ background:linear-gradient(135deg, rgba(255,107,53,.32), rgba(255,217,61,.20)); box-shadow:0 0 0 4px rgba(255,107,53,.18); }
}
.tab.tab-has-challenge{
animation: tabChallengeGlow 2s ease-in-out infinite;
border-radius:8px;
}
.bnav-item.bnav-has-challenge{
animation: tabChallengeGlow 2s ease-in-out infinite;
border-radius:10px;
}
@keyframes cdPop{0%{transform:scale(3.5);opacity:0;filter:blur(4px)}50%{transform:scale(.9);opacity:1;filter:blur(0)}75%{transform:scale(1.08)}100%{transform:scale(1);opacity:1;filter:blur(0)}}
.cd-pop{animation:cdPop .55s cubic-bezier(.175,.885,.32,1.275) forwards;}
@keyframes numSlideIn{0%{transform:translateY(-40px) scale(.7);opacity:0}35%{transform:translateY(4px) scale(1.07);opacity:1}60%{transform:translateY(-2px) scale(.98)}100%{transform:translateY(0) scale(1);opacity:1}}
.num-in{animation:numSlideIn .25s cubic-bezier(.22,.68,.36,1.2) forwards;}
@keyframes cardGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,140,0,.25),0 2px 8px rgba(0,0,0,.08)}50%{box-shadow:0 0 0 9px rgba(255,140,0,0),0 6px 24px rgba(255,140,0,.5)}}
.ch-card.incoming{animation:cardGlow 2s ease-in-out infinite;}
@keyframes crownBounce{0%,100%{transform:translateY(0) scale(1) rotate(-5deg)}35%{transform:translateY(-14px) scale(1.25) rotate(8deg)}65%{transform:translateY(-7px) scale(1.1) rotate(-3deg)}}
.crown-anim{display:inline-block;animation:crownBounce 1.1s ease-in-out infinite;}
@keyframes vsEntrance{0%{transform:scale(0) rotate(180deg);opacity:0}65%{transform:scale(1.35) rotate(-12deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.vs-sep{animation:vsEntrance .65s cubic-bezier(.175,.885,.32,1.275) both;}
@keyframes fireGlow{0%,100%{box-shadow:0 4px 15px rgba(255,107,107,.5)}50%{box-shadow:0 4px 35px rgba(255,107,107,.9),0 0 50px rgba(255,165,0,.5),inset 0 0 12px rgba(255,220,0,.2)}}
.fire-btn{animation:fireGlow 1.4s ease-in-out infinite;}
@keyframes starAscend{0%{transform:translateY(0) scale(1) rotate(0);opacity:.7}100%{transform:translateY(-90px) scale(.1) rotate(360deg);opacity:0}}
.ch-star{position:absolute;pointer-events:none;font-size:14px;animation:starAscend linear infinite;}
@keyframes confettiDrop{0%{transform:translateY(-10px) rotate(0) scale(1);opacity:1}100%{transform:translateY(200px) rotate(900deg) scale(.2);opacity:0}}
.confetti-p{position:absolute;width:9px;height:9px;border-radius:2px;animation:confettiDrop ease-in forwards;}
@keyframes scoreReveal{0%{opacity:0;transform:scale(2.2) translateY(-8px)}50%{opacity:1;transform:scale(1.1) translateY(0)}100%{transform:scale(1);opacity:1}}
.score-reveal{animation:scoreReveal .55s cubic-bezier(.175,.885,.32,1.275) forwards;}
@keyframes winnerGlow{0%,100%{text-shadow:0 0 10px #FFD93D}50%{text-shadow:0 0 30px #FFD93D,0 0 60px #FF6B6B}}
.winner-glow{animation:winnerGlow 1.5s ease-in-out infinite;}
/* ═══════════ ĐỌC SIÊU TỐC (SPEED READING) ═══════════ */
.sr-hero{background:linear-gradient(135deg,#0F4C75,#3282B8,#BBE1FA);color:#fff;border-radius:20px;padding:24px;margin-bottom:14px;text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(15,76,117,.35)}
.sr-hero::before{content:'📖';position:absolute;right:-20px;bottom:-30px;font-size:160px;opacity:.13;line-height:1;transform:rotate(-15deg);pointer-events:none}
.sr-hero h2{margin:0 0 6px;color:#FFD93D;font-size:24px;font-weight:900;letter-spacing:.5px;position:relative;z-index:1}
.sr-hero p{margin:0;opacity:.95;font-size:14px;line-height:1.6;position:relative;z-index:1}
.sr-stats-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;position:relative;z-index:1;justify-content:center}
.sr-stat-pill{background:rgba(255,255,255,.22);backdrop-filter:blur(6px);border-radius:12px;padding:8px 16px;text-align:center;min-width:90px}
.sr-stat-pill .sp-num{font-size:22px;font-weight:900;color:#FFD93D;line-height:1}
.sr-stat-pill .sp-lbl{font-size:11px;opacity:.9;margin-top:3px}
.sr-section-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0}
.sr-section-card{background:#fff;border:2.5px solid;border-radius:16px;padding:20px 16px;text-align:center;cursor:pointer;transition:transform .25s, box-shadow .25s}
.sr-section-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.sr-section-card .ssc-icon{font-size:42px;margin-bottom:8px;line-height:1;display:flex;align-items:center;justify-content:center;height:64px}
.sr-section-card .ssc-icon svg{display:block}
.sr-section-card .ssc-title{font-weight:800;font-size:15px;color:#333}
.sr-section-card .ssc-desc{font-size:11px;color:#888;margin-top:4px;line-height:1.4}
.sr-level-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0}
.sr-level-card{border-radius:14px;padding:14px 10px;text-align:center;cursor:pointer;border:2px solid;transition:all .25s;background:#fff}
.sr-level-card:hover{transform:translateY(-3px)}
.sr-level-card .slc-num{font-size:24px;font-weight:900;letter-spacing:1px}
.sr-level-card .slc-name{font-size:13px;font-weight:700;margin-top:2px}
.sr-level-card .slc-wpm{font-size:11px;opacity:.8;margin-top:3px}
.sr-level-card.lvl-easy{border-color:#4cff88;background:linear-gradient(135deg,#fff,#e8f5e9)}
.sr-level-card.lvl-easy .slc-num{color:#1b5e20}
.sr-level-card.lvl-medium{border-color:#FFD93D;background:linear-gradient(135deg,#fff,#fff8e1)}
.sr-level-card.lvl-medium .slc-num{color:#E65100}
.sr-level-card.lvl-hard{border-color:#FF6B6B;background:linear-gradient(135deg,#fff,#ffebee)}
.sr-level-card.lvl-hard .slc-num{color:#B71C1C}
.sr-level-card.lvl-pro{border-color:#7C3AED;background:linear-gradient(135deg,#1e1b4b,#4c1d95);color:#fff;border-width:3px}
.sr-level-card.lvl-pro .slc-num{color:#FFD93D}
.sr-level-card.lvl-pro .slc-name{color:#fff}
.sr-level-card.lvl-pro .slc-wpm{color:#FFD93D}
#srReaderModal .modal-box{max-width:min(900px,95vw);background:#1a0a3a;color:#fff;border:2.5px solid #3282B8;padding:0;display:flex;flex-direction:column;max-height:96vh;overflow:hidden}
.sr-reader-header{padding:14px 22px;background:linear-gradient(90deg,#0F4C75,#3282B8);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.sr-reader-header h3{margin:0;color:#FFD93D;font-size:18px}
.sr-reader-header .close-btn{font-size:26px;background:none;border:none;color:#fff;cursor:pointer;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}
.sr-reader-header .close-btn:hover{background:rgba(255,255,255,.2)}
/* v141.118: BUG FIX — đổi justify-content:center → flex-start. Khi quiz dài hơn viewport, justify-content:center làm phần đầu (Câu 1) bị đẩy lên trên khỏi vùng nhìn. flex-start giữ content luôn bắt đầu từ trên xuống. RSVP display có align/center riêng nên không ảnh hưởng. */
.sr-reader-body{padding:24px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:0;overflow-y:auto}
.sr-rsvp-display{font-size:48px;font-weight:800;text-align:center;color:#FFD93D;letter-spacing:1.5px;line-height:1.4;min-height:160px;display:flex;align-items:center;justify-content:center;width:100%;padding:30px;background:linear-gradient(135deg,rgba(50,130,184,.15),rgba(15,76,117,.25));border:2px solid rgba(50,130,184,.4);border-radius:16px;font-family:'Times New Roman',serif;letter-spacing:.5px;text-shadow:0 2px 12px rgba(255,217,61,.3)}
.sr-rsvp-display .focus-letter{color:#FF6B35;text-decoration:underline;text-underline-offset:6px}
.sr-progress{width:100%;height:8px;background:rgba(255,255,255,.1);border-radius:6px;overflow:hidden;margin:14px 0}
.sr-progress-fill{height:100%;background:linear-gradient(90deg,#3282B8,#BBE1FA,#FFD93D);transition:width .2s ease;width:0%}
.sr-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}
.sr-btn{padding:10px 20px;border-radius:10px;font-weight:800;cursor:pointer;border:none;font-size:14px;transition:all .2s}
.sr-btn-primary{background:linear-gradient(135deg,#3282B8,#BBE1FA);color:#0F4C75}
.sr-btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.sr-btn-warn{background:#FF6B35;color:#fff}
.sr-btn-warn:hover{background:#E55530}
.sr-meta{display:flex;gap:14px;flex-wrap:wrap;color:#aaa;font-size:13px;margin-bottom:12px;justify-content:center}
.sr-meta strong{color:#FFD93D}
.sr-quiz-q{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,217,61,.3);border-radius:12px;padding:16px;margin-bottom:12px}
.sr-quiz-q .qq-text{font-size:16px;font-weight:700;margin-bottom:10px;color:#FFD93D}
.sr-quiz-opt{display:block;width:100%;background:rgba(255,255,255,.06);border:1.5px solid #555;color:#fff;padding:10px 14px;border-radius:8px;margin-bottom:6px;cursor:pointer;text-align:left;font-size:14px;transition:all .15s}
.sr-quiz-opt:hover{background:rgba(255,217,61,.12);border-color:#FFD93D}
.sr-quiz-opt.selected{background:rgba(255,217,61,.2);border-color:#FFD93D;color:#FFD93D}
.sr-quiz-opt.correct{background:rgba(76,255,136,.2);border-color:#4cff88;color:#4cff88}
.sr-quiz-opt.wrong{background:rgba(255,107,107,.2);border-color:#FF6B6B;color:#FF6B6B}
.sr-recall-textarea{width:100%;min-height:140px;background:rgba(255,255,255,.08);border:1.5px solid #555;color:#fff;border-radius:10px;padding:12px;font-size:15px;line-height:1.6;resize:vertical;font-family:inherit}
.sr-recall-textarea:focus{outline:none;border-color:#FFD93D}
@media(max-width:640px){
.sr-rsvp-display{font-size:32px;min-height:130px;padding:20px;letter-spacing:1px}
.sr-stat-pill{padding:6px 12px;min-width:75px}
.sr-stat-pill .sp-num{font-size:18px}
.sr-section-card{padding:16px 12px}
.sr-section-card .ssc-icon{font-size:36px}
.sr-section-card .ssc-title{font-size:13px}
.sr-reader-body{padding:14px}
.sr-reader-header{padding:12px 16px}
}
@media(max-width:380px){
.sr-rsvp-display{font-size:26px;letter-spacing:.5px;min-height:110px;padding:14px}
}
/* ═══════════ SIÊU TRÍ NHỚ (MEMORY SPORTS) ═══════════ */
.mem-hero{background:linear-gradient(135deg,#1e1b4b,#4c1d95,#7e22ce);color:#fff;border-radius:20px;padding:24px;margin-bottom:14px;text-align:center;position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(126,34,206,.3)}
.mem-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%, rgba(255,217,61,.15) 0%, transparent 40%),radial-gradient(circle at 20% 80%, rgba(255,107,107,.12) 0%, transparent 35%);pointer-events:none}
.mem-hero h2{margin:0 0 6px;color:#FFD93D;font-size:24px;font-weight:900;letter-spacing:.5px}
.mem-hero p{margin:0;opacity:.95;font-size:14px;line-height:1.6;position:relative;z-index:1}
.mem-disc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px 14px;margin:24px 0 18px}
.mem-disc-card{background:#fff;border:2.5px solid #ddd;border-radius:16px;padding:18px 14px;text-align:center;cursor:pointer;transition:all .25s;position:relative;overflow:hidden}
.mem-disc-card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.mem-disc-card .mdc-icon{font-size:48px;margin-bottom:8px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}
/* v84: SVG icon cho 13 môn Memory — to 70x70 + drop shadow đậm hơn */
.mem-disc-card .mdc-icon.mdc-icon-svg{height:72px;display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.mem-disc-card .mdc-icon.mdc-icon-svg svg{width:64px;height:64px;display:block;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.mem-disc-card:hover .mdc-icon.mdc-icon-svg svg{transform:translateY(-3px) scale(1.06) rotate(-2deg)}
.mem-disc-card .mdc-name{font-weight:800;font-size:15px;color:#333;margin-bottom:4px;line-height:1.2}
.mem-disc-card .mdc-desc{font-size:11px;color:#888;line-height:1.4;min-height:30px}
.mem-disc-card .mdc-tier-badge{position:absolute;top:6px;right:6px;font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;background:#FFD93D;color:#7a4f00}
.mem-disc-card .mdc-best{font-size:11px;color:#0277bd;font-weight:700;margin-top:6px;background:#e3f2fd;padding:3px 8px;border-radius:8px;display:inline-block}
.mem-disc-card.tier-easy{border-color:#4cff88;background:linear-gradient(135deg,#fff,#e8f5e9)}
.mem-disc-card.tier-medium{border-color:#FFD93D;background:linear-gradient(135deg,#fff,#fff8e1)}
.mem-disc-card.tier-hard{border-color:#FF6B6B;background:linear-gradient(135deg,#fff,#ffebee)}
/* Major System được nhấn mạnh — học đầu tiên */
/* FIX: overflow:visible để badge không bị cắt; padding-top tăng để icon không bị badge che */
.mem-disc-card.featured-major{border:3px solid #FF6B35;background:linear-gradient(135deg,#FFF3E0,#FFE0B2);position:relative;animation:majorPulse 3s ease-in-out infinite;overflow:visible;padding-top:32px;margin-top:14px}
.mem-disc-card.featured-major::before{content:'⭐ ƯU TIÊN HỌC';position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#FF6B35,#FFD93D);color:#1a0a3a;font-size:11px;font-weight:900;padding:5px 14px;border-radius:14px;letter-spacing:.5px;box-shadow:0 4px 12px rgba(255,107,53,.45);z-index:3;white-space:nowrap;border:2px solid #fff}
.mem-disc-card.featured-major .mdc-name{color:#B71C1C !important}
.mem-disc-card.featured-major .mdc-tier-badge{display:none}
@keyframes majorPulse{0%,100%{box-shadow:0 4px 12px rgba(255,107,53,.2)}50%{box-shadow:0 6px 22px rgba(255,107,53,.5)}}
.mem-disc-card.tier-easy .mdc-name{color:#1b5e20}
.mem-disc-card.tier-medium .mdc-name{color:#E65100}
.mem-disc-card.tier-hard .mdc-name{color:#B71C1C}
@media(max-width:640px){
.mem-disc-grid{grid-template-columns:repeat(2,1fr);gap:18px 10px}
.mem-disc-card{padding:14px 8px}
.mem-disc-card.featured-major{padding-top:28px;margin-top:14px}
.mem-disc-card.featured-major::before{font-size:10px;padding:4px 10px;top:-12px}
.mem-disc-card .mdc-icon{font-size:38px}
.mem-disc-card .mdc-name{font-size:13px}
.mem-disc-card .mdc-desc{font-size:10px}
}
/* Memory Play Modal — 2x kích thước, dễ nhìn cho học viên elite */
#memPlayModal{align-items:flex-start;padding-top:2vh}
#memPlayModal .modal-box{max-width:min(1400px,96vw);width:96vw;background:linear-gradient(135deg,#0f0f23,#1a0a3a);color:#fff;border:2.5px solid #FFD93D;padding:0;max-height:96vh;display:flex;flex-direction:column;overflow:hidden}
.mem-play-header{padding:14px 22px;background:rgba(255,217,61,.12);border-bottom:1px solid rgba(255,217,61,.3);display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.mem-play-header h3{margin:0;color:#FFD93D;font-size:20px;font-weight:900;letter-spacing:.3px}
.mem-play-body{padding:14px 28px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}
/* Timer compact — gọn gàng nhưng vẫn nổi */
.mem-timer{font-family:'Courier New',monospace;font-weight:900;font-size:34px;color:#FFD93D;letter-spacing:2px;background:rgba(0,0,0,.4);padding:6px 18px;border-radius:10px;min-width:130px;text-align:center;box-shadow:0 2px 10px rgba(255,217,61,.2)}
.mem-timer.warning{color:#FF6B6B;animation:memPulse 1s ease-in-out infinite}
@keyframes memPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.mem-grid-display{display:grid;gap:8px;margin:10px 0;font-family:'Courier New',monospace;font-weight:900;font-size:28px}
.mem-grid-display .mem-cell{background:rgba(255,255,255,.08);border-radius:8px;padding:14px 18px;text-align:center;min-width:46px}
.mem-grid-display.cards .mem-cell{font-size:24px;background:#fff;color:#000;min-width:60px;padding:12px}
.mem-grid-display.cards .mem-cell.red{color:#FF1744}
/* Real playing cards grid — bigger desktop, vẫn responsive mobile */
.mem-cards-grid{
display:grid;
grid-template-columns:repeat(13,1fr);
gap:6px;
max-width:1200px;
margin:0 auto;
padding:12px;
background:rgba(255,255,255,.04);
border-radius:12px;
/* Bỏ max-height: cuộn ở body modal — không giới hạn chiều cao */
}
.mem-card-wrap{display:flex;justify-content:center;align-items:center}
.mem-card-wrap svg{width:100%;height:auto;max-width:88px}
@media(max-width:1100px){.mem-cards-grid{grid-template-columns:repeat(13,1fr)} .mem-card-wrap svg{max-width:70px}}
@media(max-width:900px){.mem-cards-grid{grid-template-columns:repeat(9,1fr)} .mem-card-wrap svg{max-width:64px}}
@media(max-width:640px){.mem-cards-grid{grid-template-columns:repeat(7,1fr);gap:4px}.mem-card-wrap svg{max-width:54px}}
@media(max-width:480px){.mem-cards-grid{grid-template-columns:repeat(5,1fr);gap:3px}.mem-card-wrap svg{max-width:60px}}
@media(max-width:360px){.mem-cards-grid{grid-template-columns:repeat(4,1fr)}.mem-card-wrap svg{max-width:64px}}
.mem-grid-display.images .mem-cell{font-size:48px}
.mem-input-area textarea{width:100%;min-height:200px;background:rgba(255,255,255,.08);border:1.5px solid #555;color:#fff;border-radius:12px;padding:16px;font-family:'Courier New',monospace;font-size:22px;resize:vertical;line-height:1.6}
.mem-input-area input{width:100%;background:rgba(255,255,255,.08);border:1.5px solid #555;color:#fff;border-radius:10px;padding:14px 16px;font-size:18px;margin-bottom:10px}
.mem-pick-btn:hover{border-color:#FFD93D !important;background:rgba(255,217,61,.1) !important;transform:scale(1.05)}
.mem-pick-btn:active{transform:scale(0.97)}
@keyframes memSubmitPulse{0%,100%{box-shadow:0 8px 24px rgba(255,107,53,.4),0 0 0 3px rgba(255,217,61,.3)}50%{box-shadow:0 12px 32px rgba(255,107,53,.6),0 0 0 6px rgba(255,217,61,.5)}}
.mem-submit-btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.1)}
.mem-submit-btn:active{transform:scale(0.97)}
@media(max-width:640px){.mem-submit-btn{font-size:16px !important;padding:14px 28px !important}}
@media(max-width:640px){
.mem-play-body{padding:10px 12px;gap:8px}
.mem-play-header{padding:10px 14px}
.mem-play-header h3{font-size:15px}
.mem-timer{font-size:26px;padding:5px 14px;min-width:110px;letter-spacing:1.5px}
.mem-input-area textarea{font-size:18px;min-height:140px}
.mem-input-area input{font-size:16px;padding:10px 12px}
}
.mem-tip-box{background:rgba(255,217,61,.1);border:1.5px dashed #FFD93D;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.6;margin:12px 0}
.mem-tip-box .tip-title{color:#FFD93D;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.mem-mode-row{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap}
.mem-mode-btn{flex:1;min-width:140px;padding:12px;border-radius:12px;font-weight:800;cursor:pointer;border:2px solid;transition:all .2s;text-align:center}
.mem-mode-btn.practice{background:linear-gradient(135deg,#1b5e20,#2e7d32);color:#fff;border-color:#4cff88}
.mem-mode-btn.compete{background:linear-gradient(135deg,#B71C1C,#D84315);color:#fff;border-color:#FF6B6B}
.mem-mode-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.3)}
.mem-result-row{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.06);padding:10px 14px;border-radius:10px;margin-bottom:6px;font-size:14px}
.mem-result-row .mr-label{opacity:.85}
.mem-result-row .mr-val{font-weight:800;color:#FFD93D}
.mem-rules{background:rgba(255,255,255,.06);border-radius:10px;padding:14px;margin:10px 0;font-size:13px;line-height:1.7}
.mem-rules h4{margin:0 0 8px;color:#FFD93D;font-size:14px}
.mem-rules ul{margin:0;padding-left:20px}
.mem-progress-bar{width:100%;height:8px;background:rgba(0,0,0,.3);border-radius:4px;overflow:hidden;margin:10px 0}
.mem-progress-fill{height:100%;background:linear-gradient(90deg,#FFD93D,#FF6B35);transition:width .3s ease;border-radius:4px}
/* Leaderboard */
.mem-leader-row{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid #f0f0f0;border-radius:10px;padding:8px 12px;margin-bottom:6px}
.mem-leader-row.me{background:linear-gradient(90deg,#fff8e1,#fff);border-color:#FFD93D}
.mem-leader-row .ml-rank{font-weight:900;font-size:16px;width:32px;text-align:center;color:#666}
.mem-leader-row .ml-rank.gold{color:#FFD700}.mem-leader-row .ml-rank.silver{color:#A0A0A0}.mem-leader-row .ml-rank.bronze{color:#CD7F32}
.mem-leader-row .ml-name{flex:1;font-weight:700;font-size:14px}
.mem-leader-row .ml-score{font-family:'Courier New',monospace;font-weight:800;color:#0277bd;font-size:14px}
/* ═══════════ LIVE BATTLE 1v1 ═══════════ */
.lb-room-row{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #f0f0f0;border-radius:12px;padding:10px 14px;margin-bottom:8px}
.lb-room-row:hover{border-color:#FFD93D}
@keyframes lbBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes lbNumPop{from{transform:scale(.4) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
/* ═══════════ STORY MODE ═══════════ */
.story-chapter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-top:14px}
.story-chapter{background:#fff;border:2.5px solid #ddd;border-radius:14px;padding:14px 10px;text-align:center;position:relative;transition:all .25s;cursor:pointer;overflow:hidden}
.story-chapter.unlocked:not(.done){border-color:#FFD93D;background:linear-gradient(135deg,#fff,#fff8e1)}
.story-chapter.unlocked:not(.done):hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(255,217,61,.3)}
.story-chapter.done{background:linear-gradient(135deg,#e8f5e9,#fff);border-color:#4cff88;box-shadow:0 4px 12px rgba(76,175,80,.15)}
.story-chapter.locked{opacity:.6;background:#f8f9fa;cursor:not-allowed;filter:grayscale(.7)}
.story-chapter .story-num{font-size:10px;font-weight:800;color:#888;letter-spacing:1px;margin-bottom:4px}
.story-chapter .story-enemy{font-size:48px;line-height:1;margin:8px 0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.story-chapter .story-name{font-size:14px;font-weight:800;color:#333;margin-bottom:2px}
.story-chapter .story-boss{font-size:11px;color:#888}
.story-chapter .story-badge{position:absolute;top:6px;right:6px;font-size:9px;font-weight:800;padding:3px 7px;border-radius:8px;letter-spacing:.3px}
.story-chapter .story-badge.done{background:#4cff88;color:#1b5e20}
.story-chapter .story-badge.active{background:#FF6B35;color:#fff;animation:storyBadgePulse 1.2s ease-in-out infinite}
.story-chapter .story-badge.locked{background:#ddd;color:#666}
@keyframes storyBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes storyBoss{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes storyBounce{0%,100%{transform:scale(1)}50%{transform:scale(.92) rotate(-3deg)}}
/* ═══════════ AVATAR STUDIO ═══════════ */
.avatar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.av-card{background:#fff;border:2.5px solid;border-radius:14px;padding:12px 8px;text-align:center;position:relative;transition:all .2s}
.av-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.1)}
.av-card.equipped{box-shadow:0 0 0 3px #7C3AED, 0 6px 18px rgba(124,58,237,.3)}
.av-card .av-tier{position:absolute;top:6px;right:6px;font-size:9px;font-weight:800;padding:2px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:.3px}
.av-card .av-emoji{font-size:48px;line-height:1;margin:8px 0;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}
.av-card .av-name{font-size:12px;font-weight:700;margin-bottom:8px;color:#333}
.av-card .av-equipped{font-size:11px;font-weight:800;color:#7C3AED;background:#ede9fe;padding:5px 10px;border-radius:10px;display:inline-block}
.av-card .av-action{display:flex;justify-content:center}
body.dark-mode .av-card{background:#21262d;color:#e6edf3}
body.dark-mode .av-card .av-name{color:#e6edf3}
/* ═══════════ MUSIC WIDGET ═══════════ */
/* FIX v61: Music widget removed (user feedback: not useful) */
/* FIX v62 #18: Tôn trọng prefers-reduced-motion — disable animations cho user vestibular sensitive */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ═══════════ SCORE RULES TABLE ═══════════ */
.score-rule-section{margin:14px 0;padding:14px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.score-rule-section h3{margin:0 0 10px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:6px}
.score-table{width:100%;border-collapse:collapse;font-size:13px}
.score-table th,.score-table td{padding:7px 10px;text-align:left;border-bottom:1px solid #f0f0f0;vertical-align:top}
.score-table th{background:#fafafa;color:#666;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
.score-table tr:last-child td{border-bottom:none}
.score-table tr:hover{background:#fafafa}
body.dark-mode .score-rule-section{background:#21262d;color:#e6edf3}
body.dark-mode .score-table th{background:#161b22;color:#8b949e}
body.dark-mode .score-table th,
body.dark-mode .score-table td{border-color:#30363d}
@media(max-width:640px){
.score-table{font-size:12px}
.score-table th,.score-table td{padding:6px 8px}
}
/* ═══════════ HAPPY HOUR BANNER ═══════════ */
.happyhour-banner{display:flex;align-items:center;gap:14px;border-radius:18px;padding:14px 18px;margin:14px 0 4px;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.15);position:relative;overflow:hidden}
.happyhour-banner.active{background:linear-gradient(135deg,#FF3B30,#FF6B35,#FFA000);animation:hhPulse 2s ease-in-out infinite}
.happyhour-banner.pending{background:linear-gradient(135deg,#FF9F43,#FFC371);opacity:.95}
.happyhour-banner::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 50%, rgba(255,255,255,.2) 0%, transparent 50%);pointer-events:none}
.happyhour-banner .hh-icon-spin{font-size:42px;animation:hhSpin 1.6s linear infinite;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}
.happyhour-banner .hh-text{flex:1;position:relative;z-index:1}
.happyhour-banner .hh-title{font-size:17px;font-weight:900;letter-spacing:.3px;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.happyhour-banner .hh-sub{font-size:13px;opacity:.95;margin-top:2px}
.happyhour-banner .hh-sub strong{font-family:'Courier New',monospace;font-weight:900;background:rgba(0,0,0,.2);padding:1px 6px;border-radius:4px}
@keyframes hhPulse{0%,100%{box-shadow:0 6px 20px rgba(255,59,48,.4)}50%{box-shadow:0 6px 36px rgba(255,107,53,.6),0 0 50px rgba(255,160,0,.3)}}
@keyframes hhSpin{0%{transform:rotate(0)}25%{transform:rotate(15deg) scale(1.1)}50%{transform:rotate(-15deg) scale(1.05)}75%{transform:rotate(10deg) scale(1.1)}100%{transform:rotate(0)}}
@media(max-width:640px){
.happyhour-banner{padding:12px 14px;gap:10px}
.happyhour-banner .hh-title{font-size:15px}
.happyhour-banner .hh-sub{font-size:12px}
.happyhour-banner .hh-icon-spin{font-size:34px}
}
/* ═══════════ WELCOME BACK + NOTIFICATION ═══════════ */
@keyframes wbWave{0%,100%{transform:rotate(-15deg)}50%{transform:rotate(15deg)}}
@keyframes notifBannerIn{from{opacity:0;transform:translate(-50%,30px)}to{opacity:1;transform:translate(-50%,0)}}
/* Default banner style — desktop: center bottom */
#xsbNotifBanner{
position:fixed;
bottom:24px; left:50%;
transform:translateX(-50%);
background:linear-gradient(135deg,#fff,#fffbeb);
border:2.5px solid #FF9F43;
border-radius:16px;
padding:14px 18px;
box-shadow:0 12px 40px rgba(255,159,67,.3);
z-index:9500;
max-width:calc(100vw - 32px);
width:380px;
animation:notifBannerIn .35s ease;
}
/* Mobile: cao hơn để không chạm bottom-nav (~70px height) + safe-area */
@media(max-width:768px){
#xsbNotifBanner{
bottom:calc(80px + env(safe-area-inset-bottom));
width:calc(100vw - 24px);
left:12px;
transform:none;
animation:none;
padding:12px 14px;
}
#xsbNotifBanner > div > div:first-child{font-size:28px}
}
@media(max-width:380px){
#xsbNotifBanner{padding:10px 12px}
#xsbNotifBanner .notif-banner-desc{font-size:12px}
}
/* ═══════════ LEGAL PAGES + FOOTER ═══════════ */
.legal-page h2{margin:0 0 12px;color:#0277bd;font-size:24px}
.legal-page h3{margin:18px 0 8px;color:#1565C0;font-size:17px;border-left:4px solid #FFD93D;padding-left:10px}
.legal-page p{font-size:14px;line-height:1.7;color:#333;margin:0 0 10px}
.legal-page a{color:#1565C0;text-decoration:underline}
.legal-list{padding-left:24px;line-height:1.8;font-size:14px}
.legal-list li{margin-bottom:6px}
.legal-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:8px;background:#f8f9fa;padding:14px;border-radius:12px;margin-top:8px}
.legal-info-row{display:flex;gap:10px;font-size:14px;align-items:baseline}
.legal-info-label{color:var(--muted);font-weight:600;min-width:120px;flex-shrink:0}
.legal-info-value{color:#222;font-weight:500;word-break:break-word}
/* Site footer */
.site-footer{margin-top:24px;padding:24px 16px 32px;background:transparent;border-top:none;border-radius:0} /* v154.98: bỏ nền panel footer cho gọn — nằm thẳng trên nền app */
.site-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;max-width:1100px;margin:0 auto}
.site-footer h4{margin:0 0 10px;font-size:14px;color:#1565C0;text-transform:uppercase;letter-spacing:.5px;font-weight:800}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:6px;font-size:13px}
.site-footer ul li a{color:#555;text-decoration:none;transition:color .15s}
.site-footer ul li a:hover{color:#1565C0;text-decoration:underline}
.site-footer .biz-info{font-size:12px;color:#666;line-height:1.6}
.site-footer .biz-info strong{color:#222}
.site-footer-bottom{max-width:1100px;margin:24px auto 0;padding-top:16px;border-top:1px solid #e0e0e0;text-align:center;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:8px;align-items:center}
.bct-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:#fff;border:1.5px solid #d32f2f;border-radius:8px;color:#d32f2f;text-decoration:none;font-size:12px;font-weight:700}
.bct-badge:hover{background:#fff5f5}
@media(max-width:640px){
.site-footer{padding:18px 12px 24px;border-radius:14px 14px 0 0}
.site-footer-grid{gap:16px}
.legal-info-row{flex-direction:column;gap:2px}
.legal-info-label{min-width:0}
}
/* ═══════════ HOME CARDS (cân đối desktop + mobile) ═══════════ */
.home-section-title{font-size:16px;font-weight:900;color:#0F4C75;letter-spacing:.3px;margin:22px 0 12px;padding:6px 14px;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(90deg,rgba(255,217,61,.18) 0%,rgba(255,159,67,.12) 50%,transparent 100%);border-left:4px solid #FFD93D;border-radius:0 12px 12px 0;text-transform:none}
.home-cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px}
.home-cards-grid-3{grid-template-columns:repeat(3,1fr)}
.home-card{position:relative;border-radius:20px;padding:22px 14px;text-align:center;cursor:pointer;transition:transform .25s, box-shadow .25s;border:2.5px solid;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:148px}
.home-card:hover{transform:translateY(-6px) scale(1.03)}
.home-card .hc-icon{font-size:42px;margin-bottom:8px;line-height:1;display:flex;align-items:center;justify-content:center;height:64px}
/* v82 fix: SVG fallback size 56x56 cho card không có inline width (Pet, Hành trình, Avatar). SVG có inline width sẽ override */
.home-card .hc-icon svg{width:56px;height:56px;display:block;filter:drop-shadow(0 3px 6px rgba(0,0,0,.15))}
.hmc-icon-big svg{width:56px;height:56px;display:block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.18))}
/* FIX v61: SVG icon sizing for hero cards & inline buttons */
.xsb-icon-svg{display:inline-block;vertical-align:middle;line-height:0}
.xsb-icon-svg svg{display:block}
.home-card .hc-title{font-weight:800;font-size:15px;margin-bottom:4px;line-height:1.2}
.home-card .hc-sub{font-size:12px;color:var(--muted);line-height:1.3}
.home-card.hc-blue {background:linear-gradient(135deg,#E3F2FD,#fff);border-color:#90CAF9;box-shadow:0 4px 12px rgba(21,101,192,.1)}
.home-card.hc-blue:hover {box-shadow:0 12px 28px rgba(21,101,192,.2)}
.home-card.hc-blue .hc-title{color:#1565C0}
.home-card.hc-yellow {background:linear-gradient(135deg,#FFF8E1,#fff);border-color:#FFD54F;box-shadow:0 4px 12px rgba(255,193,7,.15)}
.home-card.hc-yellow:hover{box-shadow:0 12px 28px rgba(255,193,7,.25)}
.home-card.hc-yellow .hc-title{color:#F57F17}
.home-card.hc-purple {background:linear-gradient(135deg,#E1BEE7 0%,#CE93D8 50%,#BA68C8 100%);border-color:#8E24AA;box-shadow:0 6px 18px rgba(106,27,154,.25);position:relative;overflow:hidden}
.home-card.hc-purple::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4) 0%,transparent 50%);animation:shimmerBg 4s ease-in-out infinite reverse;pointer-events:none}
.home-card.hc-purple:hover{box-shadow:0 14px 32px rgba(106,27,154,.4);transform:translateY(-8px) scale(1.04)}
.home-card.hc-purple .hc-title{color:#4A148C;text-shadow:0 1px 2px rgba(255,255,255,.6)}
.home-card.hc-purple .hc-icon{animation:floatIcon 2.5s ease-in-out infinite .8s;filter:drop-shadow(0 4px 8px rgba(74,20,140,.3))}
.home-card.hc-pink {background:linear-gradient(135deg,#FCE4EC,#fff);border-color:#F48FB1;box-shadow:0 4px 12px rgba(216,27,96,.12)}
.home-card.hc-pink:hover{box-shadow:0 12px 28px rgba(216,27,96,.22)}
.home-card.hc-pink .hc-title{color:#C2185B}
.home-card.hc-orange {background:linear-gradient(135deg,#FFE0B2 0%,#FFCC80 50%,#FFB74D 100%);border-color:#FF9800;box-shadow:0 6px 18px rgba(245,124,0,.25);position:relative;overflow:hidden}
.home-card.hc-orange::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4) 0%,transparent 50%);animation:shimmerBg 4s ease-in-out infinite;pointer-events:none}
.home-card.hc-orange:hover{box-shadow:0 14px 32px rgba(245,124,0,.4);transform:translateY(-8px) scale(1.04)}
.home-card.hc-orange .hc-title{color:#8B1F00;text-shadow:0 1px 3px rgba(255,255,255,.8),0 0 8px rgba(255,255,255,.4)}
.home-card.hc-orange .hc-icon{animation:floatIcon 2.5s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(191,54,12,.3))}
.home-card.hc-cyan {background:linear-gradient(135deg,#E1F5FE,#fff);border-color:#4FC3F7;box-shadow:0 4px 12px rgba(2,136,209,.12)}
.home-card.hc-cyan:hover{box-shadow:0 12px 28px rgba(2,136,209,.22)}
.home-card.hc-cyan .hc-title{color:#0277BD}
.home-card.hc-red {background:linear-gradient(135deg,#FFEBEE,#fff);border-color:#FF8A80;box-shadow:0 4px 12px rgba(229,57,53,.1)}
.home-card.hc-red:hover{box-shadow:0 12px 28px rgba(229,57,53,.2)}
.home-card.hc-red .hc-title{color:#C62828}
.home-card.hc-green {background:linear-gradient(135deg,#E8F5E9,#fff);border-color:#A5D6A7;box-shadow:0 4px 12px rgba(46,125,50,.1)}
.home-card.hc-green:hover{box-shadow:0 12px 28px rgba(46,125,50,.2)}
.home-card.hc-green .hc-title{color:#2e7d32}
.home-card.hc-violet {background:linear-gradient(135deg,#D1C4E9 0%,#B39DDB 50%,#9575CD 100%);border-color:#673AB7;box-shadow:0 6px 18px rgba(103,58,183,.25);position:relative;overflow:hidden}
.home-card.hc-violet::before{content:'';position:absolute;bottom:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.4) 0%,transparent 50%);animation:shimmerBg 4s ease-in-out infinite 1.5s;pointer-events:none}
.home-card.hc-violet:hover{box-shadow:0 14px 32px rgba(103,58,183,.4);transform:translateY(-8px) scale(1.04)}
.home-card.hc-violet .hc-title{color:#311B92;text-shadow:0 1px 2px rgba(255,255,255,.6)}
.home-card.hc-violet .hc-icon{animation:floatIcon 2.5s ease-in-out infinite 1.6s;filter:drop-shadow(0 4px 8px rgba(49,27,146,.3))}
.home-card .hc-icon, .home-card .hc-title, .home-card .hc-sub{position:relative;z-index:1}
/* HOT/NEW badge cho card */
.home-card .hc-badge{position:absolute;top:8px;right:8px;background:linear-gradient(135deg,#FF6B35,#FFD93D);color:#1a0a3a;font-size:9px;font-weight:900;padding:3px 8px;border-radius:8px;box-shadow:0 3px 8px rgba(255,107,53,.4);z-index:2;letter-spacing:.3px;animation:hcBadgePulse 2s ease-in-out infinite}
@keyframes floatIcon{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
/* v94: Logo to + responsive — desktop 100px, tablet 80px, mobile 70px */
.xsb-app-logo{
height:100px !important;
transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.xsb-app-logo:hover{ transform:scale(1.06) }
@media (max-width:768px){ .xsb-app-logo{ height:80px !important } }
@media (max-width:480px){ .xsb-app-logo{ height:70px !important } }
/* v87: Badge pulse + Card glow khi có tin nhắn mới */
@keyframes xsbBadgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
/* v88: Countdown HS làm bài tập */
@keyframes xsbHwCdPop{
0%{transform:scale(0.3) rotate(-10deg);opacity:0}
50%{transform:scale(1.2) rotate(3deg);opacity:1}
100%{transform:scale(1) rotate(0);opacity:1}
}
@keyframes xsbCardGlow{
0%,100%{box-shadow:0 8px 24px rgba(126,200,227,.4),0 0 0 0 rgba(255,23,68,0)}
50%{box-shadow:0 8px 28px rgba(126,200,227,.5),0 0 0 8px rgba(255,23,68,.18),0 0 35px rgba(255,107,53,.45)}
}
#xsbHomeClassCard.xsb-has-new-msg{
animation:xsbCardGlow 2s ease-in-out infinite;
border:2px solid #FF6B35;
position:relative;
}
#xsbHomeClassCard.xsb-has-new-msg::before{
content:'';
position:absolute;
inset:0;
border-radius:20px;
background:radial-gradient(circle at 50% 0%, rgba(255,107,53,.25) 0%, transparent 60%);
pointer-events:none;
animation:xsbCardGlow 2s ease-in-out infinite;
z-index:0;
}
/* v82: 3D cartoon animations cho hero + cards */
@keyframes xsbHeroFloat{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes xsbHeroSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes xsbWave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(14deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
@keyframes xsbBounce3d{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.04)}}
@keyframes xsbTitlePulse{0%,100%{box-shadow:0 4px 12px rgba(255,217,61,.25),inset 0 1px 1px rgba(255,255,255,.5)}50%{box-shadow:0 6px 18px rgba(255,107,53,.35),inset 0 1px 1px rgba(255,255,255,.6)}}
/* v82: Section title cartoon 3D ribbon */
.home-section-title-3d{
position:relative; display:inline-block; padding:8px 18px 8px 14px;
background:linear-gradient(135deg,#FFEB3B 0%,#FFC107 50%,#FF9800 100%);
color:#3E2723; font-size:16px; font-weight:900; letter-spacing:.3px;
margin:22px 0 12px; border-radius:8px 24px 24px 8px;
box-shadow:0 4px 12px rgba(255,217,61,.4),inset 0 1px 1px rgba(255,255,255,.6),inset 0 -2px 4px rgba(191,54,12,.15);
text-shadow:0 1px 1px rgba(255,255,255,.5);
border:1.5px solid rgba(255,255,255,.5);
display:flex; align-items:center; gap:10px;
}
.home-section-title-3d::before{
content:''; position:absolute; left:-8px; top:50%; transform:translateY(-50%);
width:0; height:0; border-style:solid; border-width:14px 8px 14px 0;
border-color:transparent #FFC107 transparent transparent;
filter:drop-shadow(-2px 2px 2px rgba(0,0,0,.2));
}
.home-section-title-3d .xsb-st-icon{
width:32px; height:32px; flex-shrink:0;
filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));
}
/* v82: Home card 3D enhanced hover */
.home-card{transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, filter .25s !important}
.home-card:hover{transform:translateY(-4px) scale(1.02); filter:brightness(1.05)}
.home-card:active{transform:translateY(-2px) scale(.99)}
@keyframes shimmerBg{0%,100%{transform:translate(0,0) rotate(0deg);opacity:.6}50%{transform:translate(20px,-20px) rotate(180deg);opacity:1}}
@keyframes hcBadgePulse{0%,100%{transform:scale(1);box-shadow:0 3px 8px rgba(255,107,53,.4)}50%{transform:scale(1.08);box-shadow:0 5px 14px rgba(255,107,53,.6)}}
@keyframes bolt{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-12deg) scale(1.1)}50%{transform:rotate(0) scale(1)}75%{transform:rotate(12deg) scale(1.1)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* Daily hub card — vibrant background */
.daily-hub-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#FFFBF0 0%,#FFF8E1 50%,#FFF3D6 100%);border:2px solid rgba(255,159,67,.25)!important;box-shadow:0 6px 20px rgba(255,159,67,.12)!important}
.daily-hub-card::before{content:'';position:absolute;top:-30%;right:-20%;width:60%;height:120%;background:radial-gradient(ellipse,rgba(255,217,61,.18) 0%,transparent 60%);pointer-events:none}
.daily-hub-card::after{content:'';position:absolute;bottom:-30%;left:-20%;width:50%;height:80%;background:radial-gradient(ellipse,rgba(255,107,53,.12) 0%,transparent 60%);pointer-events:none}
/* Mời bạn banner — full-width CTA */
.ref-banner-home{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#FF9F43,#FF6B6B,#C2185B);color:#fff;border-radius:18px;padding:14px 18px;margin:14px 0 4px;cursor:pointer;transition:transform .2s, box-shadow .2s;box-shadow:0 6px 18px rgba(255,107,107,.25);position:relative;overflow:hidden}
.ref-banner-home:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(255,107,107,.4)}
.ref-banner-home::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 50%, rgba(255,255,255,.18) 0%, transparent 50%);pointer-events:none}
.ref-banner-home .rb-icon{font-size:38px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));position:relative;z-index:1}
.ref-banner-home .rb-text{flex:1;position:relative;z-index:1}
.ref-banner-home .rb-title{font-size:16px;font-weight:800;margin-bottom:2px}
.ref-banner-home .rb-sub{font-size:13px;opacity:.95}
.ref-banner-home .rb-arrow{font-size:24px;font-weight:900;opacity:.85;position:relative;z-index:1;transition:transform .2s}
.ref-banner-home:hover .rb-arrow{transform:translateX(4px)}
/* Tablet: 2 cols */
@media(max-width:768px){
.home-cards-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.home-cards-grid-3{grid-template-columns:repeat(2,1fr)}
/* FIX: 3 cards trên tablet → card thứ 3 span 2 col để không lẻ */
.home-cards-grid-3 > .home-card:nth-child(3):last-child{grid-column:span 2}
.home-card{padding:18px 12px;min-height:130px}
.home-card .hc-icon{font-size:36px;margin-bottom:6px}
.home-card .hc-title{font-size:14px}
.home-card .hc-sub{font-size:11px}
/* Reset grid-column span trên mobile để các card "wide" trở về 1 cột */
.home-card[style*="grid-column:span 2"]{grid-column:span 2 !important}
/* FIX: bỏ scale 1.04 trên mobile — gây reflow + làm mờ emoji icon */
.tab.active{transform:translateY(-1px)}
}
/* Mobile small: stack 2 cols vẫn giữ nhưng compact hơn */
@media(max-width:380px){
.home-cards-grid{gap:8px}
.home-card{padding:14px 8px;min-height:118px}
.home-card .hc-icon{font-size:32px}
.home-card .hc-title{font-size:13px}
.home-card .hc-sub{font-size:10.5px}
.ref-banner-home{padding:12px 14px;gap:10px}
.ref-banner-home .rb-icon{font-size:32px}
.ref-banner-home .rb-title{font-size:14px}
.ref-banner-home .rb-sub{font-size:11.5px}
}
/* ═══════════ HOME — 3 HERO CARDS LỚN (Soroban + Memory + Reading) ═══════════
Thiết kế tối giản: chỉ icon + tên + tagline. Click → mở modal chi tiết.
Layout: 3 cột desktop ≥900px, 1 cột mobile <640px, tablet 1+2. */
.home-mega{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:14px 0 10px}
.home-mega-card{position:relative;border-radius:24px;padding:32px 24px;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;overflow:hidden;color:#fff;min-height:200px;display:flex;flex-direction:column;justify-content:space-between;text-align:center}
.home-mega-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 20%, rgba(255,255,255,.18) 0%, transparent 50%),radial-gradient(circle at 20% 80%, rgba(255,255,255,.12) 0%, transparent 45%);pointer-events:none;z-index:0}
.home-mega-card::after{content:'';position:absolute;right:-30px;bottom:-30px;font-size:180px;opacity:.08;line-height:1;pointer-events:none;z-index:0}
.home-mega-card.mega-soroban::after{content:'🧮'}
.home-mega-card.mega-memory::after{content:'🧠'}
.home-mega-card.mega-reading::after{content:'📖'}
.home-mega-card:hover{transform:translateY(-6px) scale(1.02)}
.home-mega-card:active{transform:translateY(-2px) scale(0.99)}
.home-mega-card .hmc-icon-big{font-size:72px;line-height:1;margin-bottom:14px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.25));position:relative;z-index:1;animation:heroIconFloat 4s ease-in-out infinite}
@keyframes heroIconFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
.home-mega-card .hmc-title-big{font-size:26px;font-weight:900;letter-spacing:.4px;margin-bottom:8px;text-shadow:0 2px 8px rgba(0,0,0,.25);line-height:1.15;position:relative;z-index:1}
.home-mega-card .hmc-sub-big{font-size:14px;opacity:.95;line-height:1.45;position:relative;z-index:1;margin-bottom:14px}
.home-mega-card .hmc-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.22);backdrop-filter:blur(6px);color:#fff;font-size:12.5px;font-weight:800;padding:8px 18px;border-radius:24px;letter-spacing:.3px;transition:all .25s;position:relative;z-index:1;align-self:center;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.home-mega-card:hover .hmc-cta{background:rgba(255,255,255,.32);transform:translateX(2px)}
/* Variant: Soroban — cam-tím nắng */
.home-mega-card.mega-soroban{background:linear-gradient(135deg,#FF9F43 0%,#FF6B6B 50%,#A855F7 100%);box-shadow:0 8px 24px rgba(255,107,107,.3)}
.home-mega-card.mega-soroban:hover{box-shadow:0 16px 40px rgba(255,107,107,.5)}
/* Variant: Memory — tím đêm */
.home-mega-card.mega-memory{background:linear-gradient(135deg,#1e1b4b 0%,#4c1d95 50%,#7e22ce 100%);box-shadow:0 8px 24px rgba(124,58,237,.35)}
.home-mega-card.mega-memory:hover{box-shadow:0 16px 40px rgba(124,58,237,.55)}
/* Variant: Reading — xanh teal đại dương */
.home-mega-card.mega-reading{background:linear-gradient(135deg,#0F4C75 0%,#3282B8 50%,#0CC2AA 100%);box-shadow:0 8px 24px rgba(15,76,117,.35)}
.home-mega-card.mega-reading:hover{box-shadow:0 16px 40px rgba(15,76,117,.55)}
/* Tablet (≤900px): 1 cột chính trên + 2 cột dưới (1+2 layout cân đối) */
@media(max-width:900px){
.home-mega{grid-template-columns:1fr 1fr;gap:14px}
.home-mega-card.mega-soroban{grid-column:span 2}
.home-mega-card{padding:28px 22px;min-height:180px}
.home-mega-card .hmc-icon-big{font-size:64px}
.home-mega-card .hmc-title-big{font-size:24px}
}
/* Mobile: stack thành 1 cột */
@media(max-width:640px){
.home-mega{grid-template-columns:1fr;gap:12px}
.home-mega-card.mega-soroban{grid-column:auto}
.home-mega-card{padding:24px 20px;min-height:160px}
.home-mega-card .hmc-icon-big{font-size:58px;margin-bottom:10px}
.home-mega-card .hmc-title-big{font-size:22px}
.home-mega-card .hmc-sub-big{font-size:13px;margin-bottom:10px}
.home-mega-card .hmc-cta{font-size:11.5px;padding:7px 16px}
}
/* ═══════════ MODAL HUB chi tiết Soroban / Memory ═══════════ */
#sorobanHubModal .modal-box, #memoryHubModal .modal-box{
max-width:min(900px,95vw);width:95vw;max-height:90vh;overflow-y:auto;
padding:0;background:#fff;border:none;border-radius:20px
}
.hub-modal-header{padding:24px 26px;color:#fff;position:relative;overflow:hidden;display:flex;align-items:center;gap:16px}
.hub-modal-header::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 20%, rgba(255,255,255,.18) 0%, transparent 50%);pointer-events:none}
.hub-modal-header .hmh-icon{font-size:48px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2));position:relative;z-index:1}
.hub-modal-header .hmh-text{flex:1;position:relative;z-index:1}
.hub-modal-header .hmh-title{font-size:24px;font-weight:900;margin-bottom:4px;text-shadow:0 1px 3px rgba(0,0,0,.2)}
.hub-modal-header .hmh-sub{font-size:13px;opacity:.95}
.hub-modal-header .hmh-close{position:absolute;top:16px;right:18px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;border:none;font-size:22px;font-weight:900;cursor:pointer;backdrop-filter:blur(6px);line-height:1;display:flex;align-items:center;justify-content:center;z-index:2;transition:all .2s}
.hub-modal-header .hmh-close:hover{background:rgba(255,255,255,.4);transform:rotate(90deg)}
#sorobanHubModal .hub-modal-header{background:linear-gradient(135deg,#FF9F43,#FF6B6B,#A855F7)}
#memoryHubModal .hub-modal-header{background:linear-gradient(135deg,#1e1b4b,#4c1d95,#7e22ce)}
.hub-modal-body{padding:22px 24px}
@media(max-width:640px){
.hub-modal-header{padding:18px 20px;gap:12px}
.hub-modal-header .hmh-icon{font-size:38px}
.hub-modal-header .hmh-title{font-size:18px}
.hub-modal-body{padding:16px 14px}
}
/* ═══════════ ONBOARDING TOUR ═══════════ */
#xsbTour{position:fixed;inset:0;z-index:99999;pointer-events:none;display:none}
#xsbTour.active{display:block;pointer-events:auto}
#xsbTourMask{position:absolute;inset:0;background:rgba(0,0,0,.65);transition:clip-path .3s ease}
#xsbTourSpot{position:absolute;border-radius:14px;box-shadow:0 0 0 4px #FFD93D, 0 0 0 9999px rgba(0,0,0,.7), 0 0 30px rgba(255,217,61,.6);transition:all .35s cubic-bezier(.34,1.56,.64,1.0);pointer-events:none;display:none;animation:tourPulse 1.6s ease-in-out infinite}
@keyframes tourPulse{0%,100%{box-shadow:0 0 0 4px #FFD93D, 0 0 0 9999px rgba(0,0,0,.7), 0 0 30px rgba(255,217,61,.6)}50%{box-shadow:0 0 0 6px #FF9F43, 0 0 0 9999px rgba(0,0,0,.72), 0 0 50px rgba(255,159,67,.7)}}
#xsbTourCard{position:absolute;background:linear-gradient(135deg,#fff,#fffbeb);border-radius:18px;padding:18px 20px;max-width:340px;box-shadow:0 14px 50px rgba(0,0,0,.4);border:3px solid #FFD93D;z-index:100000}
#xsbTourCard h4{margin:0 0 8px;font-size:18px;color:#0277bd;font-weight:800;display:flex;align-items:center;gap:8px}
#xsbTourCard p{margin:0 0 12px;font-size:14px;line-height:1.5;color:#333}
#xsbTourCard .tour-step{font-size:11px;color:#888;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
#xsbTourCard .tour-btns{display:flex;gap:8px;justify-content:flex-end;align-items:center}
#xsbTourCard .tour-btn{padding:8px 18px;border-radius:10px;border:none;font-weight:700;cursor:pointer;font-size:14px;transition:all .2s}
#xsbTourCard .tour-btn.primary{background:linear-gradient(135deg,#FFD93D,#FF9F43);color:#fff;box-shadow:0 4px 12px rgba(255,159,67,.4)}
#xsbTourCard .tour-btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,159,67,.5)}
#xsbTourCard .tour-btn.skip{background:transparent;color:#888;font-size:13px}
#xsbTourCard .tour-btn.skip:hover{color:#666}
#xsbTourArrow{position:absolute;width:0;height:0;display:none}
@media(max-width:640px){#xsbTourCard{max-width:calc(100vw - 32px)}}
/* ═══════════ "WHY WRONG?" MODAL ═══════════ */
.why-wrong-step{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f8f9fa;border-radius:10px;margin-bottom:6px;border-left:4px solid #4D96FF}
.why-wrong-step.err{border-left-color:#FF6B6B;background:#fff5f5}
.why-wrong-step .ws-num{font-family:'Courier New',monospace;font-weight:800;font-size:18px;min-width:60px}
.why-wrong-step .ws-arr{color:#aaa}
.why-wrong-step .ws-tag{font-size:11px;background:#e3f2fd;color:#0277bd;padding:2px 8px;border-radius:6px;font-weight:700;margin-left:auto}
/* ═══════════ CERTIFICATE PRINTABLE ═══════════ */
@media print{
body.cert-print > *{display:none !important}
body.cert-print #certPrintArea{display:block !important;position:static !important}
}
#certPrintArea{display:none}
.cert-frame{width:1000px;height:707px;background:linear-gradient(135deg,#fff8e1,#fffde7);border:14px double #FFD93D;padding:50px;font-family:Georgia,serif;color:#333;position:relative;box-sizing:border-box}
.cert-frame::before{content:'';position:absolute;inset:18px;border:2px solid #FF9F43;border-radius:6px;pointer-events:none}
.cert-title{font-size:48px;font-weight:900;text-align:center;color:#FF6B35;margin:30px 0 6px;text-shadow:2px 2px 0 rgba(255,107,53,.15);letter-spacing:2px}
.cert-sub{text-align:center;font-size:18px;color:#666;margin-bottom:30px;font-style:italic}
.cert-name{text-align:center;font-size:38px;font-weight:800;color:#0277bd;margin:18px 0;border-bottom:3px solid #FFD93D;padding-bottom:8px;display:inline-block}
.cert-body{font-size:18px;text-align:center;line-height:1.6;margin:18px 60px}
.cert-group{font-size:24px;font-weight:800;color:#FF9F43}
.cert-foot{display:flex;justify-content:space-between;margin-top:40px;font-size:13px;color:#555;padding:0 30px}
.cert-sig{text-align:center;border-top:1.5px solid #999;padding-top:6px;min-width:180px;font-style:italic}
/* ═══════════ REFERRAL ═══════════ */
.ref-card{background:linear-gradient(135deg,#fce4ec,#fff);border:2.5px solid #f48fb1;border-radius:16px;padding:18px;text-align:center}
.ref-code{font-family:'Courier New',monospace;font-size:28px;font-weight:900;letter-spacing:3px;background:#fff;padding:10px 18px;border-radius:10px;border:2px dashed #f48fb1;display:inline-block;color:#c2185b;margin:8px 0;cursor:pointer;user-select:all}
.ref-stat-row{display:flex;justify-content:space-around;margin:12px 0;text-align:center}
.ref-stat{flex:1}
.ref-stat .num{font-size:24px;font-weight:900;color:#c2185b}
.ref-stat .lbl{font-size:11px;color:#888;text-transform:uppercase;font-weight:700}
/* ═══════════ TOURNAMENT ═══════════ */
.trn-banner{background:linear-gradient(135deg,#ffd93d,#ff9f43,#ff6b6b);border-radius:18px;padding:20px;color:#fff;text-align:center;margin-bottom:16px;box-shadow:0 8px 24px rgba(255,107,107,.3)}
.trn-banner h3{margin:0 0 6px;font-size:22px;font-weight:900}
.trn-banner p{margin:0;opacity:.95;font-size:14px}
.trn-countdown{font-family:'Courier New',monospace;font-weight:900;font-size:32px;letter-spacing:2px;margin:8px 0}
.trn-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border-radius:12px;margin-bottom:6px;border:1.5px solid #f0f0f0;transition:transform .35s ease, border-color .2s, background .2s;animation:trnFadeIn .4s ease}
.trn-row:hover{transform:translateX(4px);border-color:#FFD93D}
.trn-row.me{background:linear-gradient(90deg,#fff8e1,#fff);border-color:#FFD93D;box-shadow:0 2px 8px rgba(255,217,61,.25)}
.trn-rank{font-size:22px;font-weight:900;width:42px;text-align:center;flex-shrink:0}
.trn-rank.gold{color:#FFD700;text-shadow:0 0 10px rgba(255,215,0,.4)}
.trn-rank.silver{color:#A0A0A0}
.trn-rank.bronze{color:#CD7F32}
.trn-name{flex:1;font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.trn-pts{font-family:'Courier New',monospace;font-weight:800;color:#0277bd;text-align:right;flex-shrink:0}
.trn-change{display:inline-flex;align-items:center;font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;animation:trnChangeFlash .8s ease}
.trn-change.up{background:#e8f5e9;color:#2e7d32}
.trn-change.down{background:#ffebee;color:#c62828}
.trn-change.new{background:#e3f2fd;color:#1565c0}
@keyframes trnChangeFlash{from{transform:scale(1.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes trnFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
/* ═══════════ SHARE ACHIEVEMENT ═══════════ */
.share-canvas-wrap{text-align:center}
.share-canvas-wrap canvas{max-width:100%;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.share-btn-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
/* ═══════════ SEASONAL THEME ═══════════ */
body.season-tet::before{content:'🧧🐉🎊';position:fixed;top:8px;right:14px;font-size:22px;z-index:50;opacity:.9;pointer-events:none}
body.season-trungthu::before{content:'🥮🏮🌕';position:fixed;top:8px;right:14px;font-size:22px;z-index:50;opacity:.9;pointer-events:none}
body.season-noel::before{content:'🎄🎅❄️';position:fixed;top:8px;right:14px;font-size:22px;z-index:50;opacity:.9;pointer-events:none}
.season-banner{background:linear-gradient(135deg,#ff6b6b,#ffd93d);color:#fff;padding:10px 16px;border-radius:12px;text-align:center;font-weight:700;margin-bottom:12px;box-shadow:0 4px 12px rgba(255,107,107,.3);animation:seasonGlow 2.5s ease-in-out infinite}
@keyframes seasonGlow{0%,100%{box-shadow:0 4px 12px rgba(255,107,107,.3)}50%{box-shadow:0 4px 24px rgba(255,217,61,.5)}}
/* ═══════════ FORMULA TUTORIAL ═══════════ */
.formula-tut-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:14px}
.formula-tut-card{background:linear-gradient(135deg,#fff,#f3e5f5);border:2.5px solid #ce93d8;border-radius:14px;padding:16px;cursor:pointer;transition:all .25s;text-align:center}
.formula-tut-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(106,27,154,.15);border-color:#9c27b0}
.formula-tut-card h4{margin:0 0 6px;color:#6a1b9a;font-size:18px}
.formula-tut-card p{margin:0;font-size:13px;color:#666}
.formula-tut-card .tut-icon{font-size:38px;margin-bottom:6px}
.tut-stage{background:#0d1117;color:#fff;border-radius:14px;padding:18px;text-align:center;min-height:240px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px}
.tut-step-text{font-size:16px;line-height:1.5;color:#FFD93D;font-weight:700;min-height:48px}
.tut-formula-display{font-family:'Courier New',monospace;font-size:32px;font-weight:900;color:#fff;letter-spacing:2px}
.tut-bead-row{display:flex;gap:4px;justify-content:center;align-items:center;background:#8B4513;padding:12px;border-radius:8px;border:2px solid #654321}
.tut-bead{width:42px;height:18px;border-radius:4px;background:linear-gradient(180deg,#A0522D,#8B4513);border:1.5px solid #654321;transition:transform .35s ease;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
.tut-bead.active{background:linear-gradient(180deg,#FFD93D,#FF9F43);border-color:#FF6B35;transform:translateY(-2px)}
.tut-bead.upper{height:22px}
.tut-bead-col{display:flex;flex-direction:column;gap:2px;align-items:center;padding:0 6px;border-right:1px dashed rgba(255,255,255,.1)}
.tut-bead-col:last-child{border-right:none}
.tut-divider{width:100%;height:2px;background:#654321;margin:4px 0}
/* ═══ v141.88: CLASS PANEL — TO HƠN cho GV/HS dễ quan sát ═══
Trước: max-width 680px (chật trên desktop, thừa nhiều khoảng trắng 2 bên)
Giờ: tối đa 1400px trên desktop, 96vw trên tablet, FULL WIDTH trên mobile.
- Mobile (<640px): bỏ max-width → modal full-screen như cũ
- Tablet (640-1100px): 96vw (gần full)
- Desktop ≥1400px: cap 1400px, có margin 2 bên cân đối
Header (sky/grass), tabs, content tự fill width nhờ flex column.
*/
#xsbClassPanel{
/* Inline đã set max-width:min(1400px,96vw) — CSS đây để override khi cần */
border-radius: 0;
}
@media (min-width:1100px){
#xsbClassPanel{
/* Desktop lớn: có padding nhẹ 2 bên overlay để modal không edge-to-edge */
border-radius: 16px;
max-height: 96vh !important;
height: 96vh !important;
box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
}
}
@media (max-width:640px){
/* Mobile: full-screen edge-to-edge, không cap */
#xsbClassPanel{
max-width: 100% !important;
border-radius: 0 !important;
height: 100vh !important;
max-height: 100vh !important;
}
}
/* Overlay padding: desktop có chút padding 2 bên cho aesthetic, mobile sát mép */
#xsbClassCodeOverlay{
padding: 0;
}
@media (min-width:1100px){
#xsbClassCodeOverlay{ padding: 2vh 0; }
}
/* Dashboard cards bên trong: cho phép stretch full width của panel */
#xsbClassContent{
max-width: 100%;
}
/* ===== xsb-watercolor-preview (gop tu khoi #2) ===== */
/* ═══ 3 MEGA CARDS (Soroban / Memory / Reading) — Full-bleed scene ═══ */
.home-mega-card.mega-soroban,
.home-mega-card.mega-memory,
.home-mega-card.mega-reading{
background-size:cover !important;
background-position:center top !important;
background-repeat:no-repeat !important;
aspect-ratio:4/5 !important;
min-height:0 !important;
padding:0 0 18px !important;
justify-content:flex-end !important;
text-align:center !important;
}
.home-mega-card.mega-soroban{
background-image:url('assets/watercolor/hf_20260517_095805_49426dee-2273-46d5-95d5-ef45a4488447.png') !important;
}
.home-mega-card.mega-memory{
background-image:url('assets/watercolor/hf_20260517_095808_3e654c78-3ea2-47a9-aff8-6341359b28d6.png') !important;
}
.home-mega-card.mega-reading{
background-image:url('assets/watercolor/hf_20260517_095811_e3a22b11-416c-4922-8776-5a648c994c39.png') !important;
}
/* Override decorative pseudo elements */
.home-mega-card::before{
background:linear-gradient(to top, rgba(0,0,0,.76) 0%, rgba(0,0,0,.46) 34%, rgba(0,0,0,.12) 56%, transparent 72%) !important;
z-index:1 !important;
}
.home-mega-card::after{display:none !important}
/* Hide inline SVG icon (will use background image instead) */
.home-mega-card .hmc-icon-big{display:none !important}
/* Text styling */
/* v329: chữ 3 thẻ lớn theo PHONG CÁCH thẻ "Đánh giá năng lực" — badge chip + tiêu đề đậm 900 + phụ đề thẳng 700 + nút PILL màu đặc + mũi tên ▶ */
.home-mega-card .hmc-badge{
align-self:center;
font-family:'Crimson Pro',serif !important;
font-weight:800 !important;
font-size:11px !important;
letter-spacing:.3px;
padding:3px 12px;border-radius:20px;
margin-bottom:7px;
box-shadow:0 2px 8px rgba(0,0,0,.22);
position:relative;z-index:2;
}
.home-mega-card.mega-soroban .hmc-badge{background:rgba(255,243,224,.95) !important;color:#C0561B !important}
.home-mega-card.mega-memory .hmc-badge{background:rgba(237,230,248,.95) !important;color:#5B3FA0 !important}
.home-mega-card.mega-reading .hmc-badge{background:rgba(220,241,238,.95) !important;color:#0A6B62 !important}
.home-mega-card .hmc-title-big{
font-family:'Crimson Pro',serif !important;
font-weight:900 !important;
font-size:27px !important;
letter-spacing:-.3px !important;
text-shadow:0 2px 6px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.5) !important;
margin-bottom:4px !important;
padding:0 16px;
position:relative;z-index:2;
}
.home-mega-card .hmc-sub-big{
font-family:'Crimson Pro',serif !important;
font-style:normal !important;
font-weight:700 !important;
font-size:13.5px !important;
text-shadow:0 1px 4px rgba(0,0,0,.6) !important;
margin-bottom:12px !important;
padding:0 16px;
position:relative;z-index:2;
}
.home-mega-card .hmc-cta{
color:#fff !important;
font-weight:800 !important;
font-size:13px !important;
padding:8px 20px !important;
border-radius:13px !important;
box-shadow:0 4px 12px rgba(0,0,0,.32) !important;
position:relative;z-index:2;
}
.home-mega-card.mega-soroban .hmc-cta{background:#E0712A !important}
.home-mega-card.mega-memory .hmc-cta{background:#6A4FB0 !important}
.home-mega-card.mega-reading .hmc-cta{background:#0D7377 !important}
@media(max-width:640px){
.home-mega-card.mega-soroban,.home-mega-card.mega-memory,.home-mega-card.mega-reading{
aspect-ratio:3/4 !important;
min-height:0 !important;
height:auto !important;
background-size:cover !important;
background-position:center top !important;
}
}
/* v154.272: ẨN HOÀN TOÀN giao diện "Lớp Quái Vật" + mọi decor liên quan (đảo lại: xoá khối này + sửa xsbGetUiTheme) */
.tab[data-page="mzhub"], .bnav-item[data-page="mzhub"], #xsbMzHubBtn, #xsbMonsterDecor, #page-mzhub{ display:none !important; }
/* ĐIỆN THOẠI XOAY NGANG: bỏ tỉ lệ dọc 4/5 (làm thẻ quá cao → mèo/cú/cáo phóng to), cố định chiều cao vừa phải để ảnh hiện cân đối */
@media (orientation:landscape) and (max-height:600px){
.home-mega-card.mega-soroban,.home-mega-card.mega-memory,.home-mega-card.mega-reading{
aspect-ratio:auto !important;
height:220px !important;
min-height:0 !important;
background-size:cover !important;
background-position:center 28% !important;
}
}
/* ═══ v297: CLASS CARD #xsbHomeClassCard — Trường nhảy múa trên mây ═══ */
#xsbHomeClassCard{
background:url('assets/school_bg.jpg?v=329') center bottom/cover no-repeat, linear-gradient(180deg,#9FD8F6 0%,#BDE6FA 40%,#E4F4FD 72%,#EAF7E2 100%) !important;
position:relative !important;padding:8px 16px 16px !important;overflow:hidden !important;
border-radius:22px !important;border:3px solid #fff !important;
box-shadow:0 8px 24px rgba(120,170,210,.3) !important;text-align:center !important;color:#1F2937 !important;min-height:0 !important;
}
#xsbHomeClassCard::after{display:none !important}
#xsbHomeClassCard .xsbsky-clouds{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#xsbHomeClassCard .xsbsky-c{position:absolute;opacity:.92;filter:drop-shadow(0 3px 6px rgba(120,160,200,.16))}
#xsbHomeClassCard .xsbsky-c1{top:12px;left:-12px;width:118px;animation:xsbCloudDrift 26s ease-in-out infinite}
#xsbHomeClassCard .xsbsky-c2{top:22px;right:-6px;width:140px;animation:xsbCloudDrift2 32s ease-in-out infinite}
#xsbHomeClassCard .xsbsky-c3{top:6px;left:46%;width:74px;opacity:.7;animation:xsbCloudDrift 38s ease-in-out infinite}
@keyframes xsbCloudDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(22px)}}
@keyframes xsbCloudDrift2{0%,100%{transform:translateX(0)}50%{transform:translateX(-20px)}}
#xsbHomeClassCard .xsb-school-stage{position:relative;z-index:1;height:230px;display:flex;align-items:flex-end;justify-content:center}
#xsbHomeClassCard .xsb-school-platform{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:200px;z-index:1;filter:drop-shadow(0 6px 10px rgba(120,160,200,.26));animation:xsbPlatFloat 3.6s ease-in-out infinite}
@keyframes xsbPlatFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(4px)}}
/* v304: 2 xe bus chạy 2 bên ngôi trường cho bớt trống */
#xsbHomeClassCard .xsb-school-bus{position:absolute;bottom:8px;z-index:1;width:178px;height:auto;pointer-events:none;filter:drop-shadow(0 4px 7px rgba(80,120,160,.22))}
#xsbHomeClassCard .xsb-bus-left{left:max(8px,calc(50% - 292px));animation:xsbBusDriveL 20s ease-in-out infinite}
#xsbHomeClassCard .xsb-bus-right{right:max(8px,calc(50% - 292px));animation:xsbBusDriveR 23s ease-in-out infinite}
/* v309: xe bus chạy vòng quanh tab — CHẬM hơn, NGHIÊNG & NHÚN NHẢY nhiều hơn (nảy liên tục mỗi nhịp, lắc ±7°), 2 xe ngược chiều */
@keyframes xsbBusDriveL{0%{transform:translate(75vw,0) rotate(0)}10%{transform:translate(60vw,-16px) rotate(-7deg)}20%{transform:translate(45vw,-2px) rotate(5deg)}30%{transform:translate(30vw,-15px) rotate(-6deg)}40%{transform:translate(15vw,-3px) rotate(7deg)}50%{transform:translate(0,-14px) rotate(-5deg)}60%{transform:translate(-16vw,-2px) rotate(6deg)}70%{transform:translate(-32vw,-15px) rotate(-7deg)}80%{transform:translate(-48vw,-3px) rotate(5deg)}90%{transform:translate(-64vw,-14px) rotate(-6deg)}100%{transform:translate(-82vw,0) rotate(0)}}
@keyframes xsbBusDriveR{0%{transform:translate(-75vw,0) rotate(0)}10%{transform:translate(-60vw,-16px) rotate(7deg)}20%{transform:translate(-45vw,-2px) rotate(-5deg)}30%{transform:translate(-30vw,-15px) rotate(6deg)}40%{transform:translate(-15vw,-3px) rotate(-7deg)}50%{transform:translate(0,-14px) rotate(5deg)}60%{transform:translate(16vw,-2px) rotate(-6deg)}70%{transform:translate(32vw,-15px) rotate(7deg)}80%{transform:translate(48vw,-3px) rotate(-5deg)}90%{transform:translate(64vw,-14px) rotate(6deg)}100%{transform:translate(82vw,0) rotate(0)}}
@media(prefers-reduced-motion:reduce){#xsbHomeClassCard .xsb-school-bus{animation:none}}
@media(max-width:680px){#xsbHomeClassCard .xsb-school-bus{width:112px;bottom:6px}#xsbHomeClassCard .xsb-bus-left{left:max(2px,calc(50% - 200px))}#xsbHomeClassCard .xsb-bus-right{right:max(2px,calc(50% - 200px))}}
#xsbHomeClassCard .xsb-school-img{position:absolute;bottom:22px;left:50%;width:152px;z-index:2;cursor:pointer;transform-origin:bottom center;animation:xsbSchoolDance 2.4s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(80,120,160,.26))}
@keyframes xsbSchoolDance{0%,100%{transform:translateX(-50%) translateY(0) rotate(0)}25%{transform:translateX(-50%) translateY(-7px) rotate(-3.5deg)}50%{transform:translateX(-50%) translateY(0) rotate(0)}75%{transform:translateX(-50%) translateY(-7px) rotate(3.5deg)}}
#xsbHomeClassCard .xsb-school-img.xsb-greet{animation:xsbSchoolJump .7s ease}
@keyframes xsbSchoolJump{0%{transform:translateX(-50%) translateY(0) scale(1)}30%{transform:translateX(-50%) translateY(-24px) scale(1.07)}60%{transform:translateX(-50%) translateY(0) scale(.97)}100%{transform:translateX(-50%) translateY(0) scale(1)}}
#xsbHomeClassCard .xsb-school-bubble{position:absolute;top:0;left:50%;transform:translateX(-50%) scale(.5);transform-origin:bottom center;background:#fff;border:2px solid #FFD37A;border-radius:16px;padding:8px 13px;font-weight:800;font-size:13px;color:#B4480F;max-width:300px;width:max-content;text-align:center;line-height:1.3;box-shadow:0 6px 16px rgba(180,120,30,.25);opacity:0;pointer-events:none;transition:.28s;z-index:6}
#xsbHomeClassCard .xsb-school-bubble::after{content:'';position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);border:9px solid transparent;border-top-color:#fff;border-bottom:0}
#xsbHomeClassCard .xsb-school-bubble.show{opacity:1;transform:translateX(-50%) scale(1)}
#xsbHomeClassCard .xsb-school-text{position:relative;z-index:1;cursor:pointer;margin-top:2px}
#xsbHomeClassCard .xsbsch-title{font-family:'Crimson Pro',serif;font-weight:800;font-size:30px;color:#1F2937;line-height:1.08;text-shadow:0 2px 3px rgba(255,255,255,.85);letter-spacing:-.5px}
#xsbHomeClassCard .xsbsch-sub{font-family:'Crimson Pro',serif;font-style:italic;font-size:15px;color:#3D3528;text-shadow:0 1px 2px rgba(255,255,255,.8);margin-top:2px}
#xsbHomeClassActions{display:flex !important;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:12px !important;margin-top:16px;grid-template-columns:none !important}
#xsbHomeClassActions button{position:relative;border:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;background:url('assets/cloud_1.png?v=297') center/100% 100% no-repeat !important;cursor:pointer;min-height:84px;padding:12px 24px !important;max-width:300px;font-weight:800 !important;font-size:14px !important;color:#3A4654 !important;box-shadow:none !important;display:inline-flex !important;align-items:center;justify-content:center;gap:6px;transition:transform .15s;flex:1 1 38%;max-width:300px;filter:drop-shadow(0 5px 9px rgba(90,140,190,.26))}
#xsbHomeClassActions button>span{position:relative;z-index:1}
#xsbHomeClassActions button:hover{transform:translateY(-2px) scale(1.02)}
#xsbHomeClassActions button:first-child{background-image:url('assets/cloud_gold.png?v=297') !important;color:#7A4A00 !important;flex:2 1 56%;min-height:100px;max-width:340px;font-size:16px !important}
#xsbHomeClassActions button:last-child{flex:1 1 100%;max-width:330px;min-height:88px}
#xsbHomeClassActions button:only-child{flex:1 1 100%;max-width:340px;background-image:url('assets/cloud_gold.png?v=297') !important;color:#7A4A00 !important;min-height:96px;font-size:16px !important}
@media(max-width:640px){
#xsbHomeClassCard .xsbsch-title{font-size:24px}
#xsbHomeClassCard .xsb-school-stage{height:188px}
#xsbHomeClassCard .xsb-school-img{width:118px;bottom:20px}
#xsbHomeClassCard .xsb-school-platform{width:158px}
#xsbHomeClassActions{gap:9px !important}
#xsbHomeClassActions button{font-size:13px !important;min-height:70px;padding:8px 16px !important}
#xsbHomeClassActions button:first-child{font-size:14px !important;min-height:82px}
}
/* ═══ BOOKS CARD #xsbHomeBooksCard — TEXT GIỮA + ĐEN + TO ═══ */
#xsbHomeBooksCard{
background:url('assets/watercolor/hf_20260517_095001_ce3e2711-51cf-4c3b-94cd-18bb2888104e.png') center/cover no-repeat !important;
position:relative !important;
min-height:200px !important;
padding:0 !important;
border-radius:22px !important;
}
/* Light cream overlay để text đen readable */
#xsbHomeBooksCard::after{
content:'';position:absolute;inset:0;
background:linear-gradient(to bottom, rgba(255,247,232,.55) 0%, rgba(255,247,232,.3) 50%, rgba(255,247,232,.85) 100%);
pointer-events:none;z-index:0;
border-radius:22px;
}
#xsbHomeBooksCard > div{
position:relative;z-index:1;
padding:24px 22px !important;
text-align:center !important;
justify-content:center !important;
flex-direction:column !important;
gap:6px !important;
align-items:center !important;
}
#xsbHomeBooksCard svg{display:none !important}
#xsbHomeBooksCard > div > div[style*="opacity:.18"]{display:none !important}
/* Arrow → hide */
#xsbHomeBooksCard > div > div[style*="font-size:22px"]{display:none !important}
/* Hide icon container (48×48 wrapper với SVG bên trong) */
#xsbHomeBooksCard > div > div[style*="width:48px"]{display:none !important}
/* Text block căn giữa */
#xsbHomeBooksCard > div > div[style*="flex:1"]{
text-align:center !important;
flex:0 0 auto !important;
}
/* Badge — đỏ cam đậm to */
#xsbHomeBooksCard div[data-i18n="home.booksBadge"],
#xsbHomeBooksCard div[style*="font-size:11px;font-weight:700"]{
color:#1E40AF !important;
text-shadow:0 1px 2px rgba(255,255,255,.7) !important;
font-size:13px !important;
font-weight:800 !important;
letter-spacing:1.5px !important;
}
/* Title — đen TO */
#xsbHomeBooksCard div[data-i18n="home.booksTitle"],
#xsbHomeBooksCard div[style*="font-size:18px;font-weight:900"]{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:30px !important;
letter-spacing:-.5px !important;
color:#1F2937 !important;
text-shadow:0 1px 2px rgba(255,255,255,.7) !important;
line-height:1.1 !important;
}
/* Sub — đen italic TO */
#xsbHomeBooksCard div[data-i18n="home.booksSub"],
#xsbHomeBooksCard div[style*="font-size:12px;opacity:.92"]{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
font-size:15px !important;
font-weight:500 !important;
color:#3D3528 !important;
opacity:1 !important;
text-shadow:0 1px 2px rgba(255,255,255,.6) !important;
}
/* ═══ SCOPE FIX: chỉ apply Pet/Story/Avatar watercolor cho PAGE-HOME, không apply cho hub modals ═══ */
#sorobanHubModal .home-card,
#memoryHubModal .home-card{
background:#fff !important;
border-color:rgba(232,198,138,.4) !important;
position:relative !important;
overflow:hidden !important;
min-height:170px !important;
}
#sorobanHubModal .home-card::before,
#memoryHubModal .home-card::before{display:none !important; content:none !important}
#sorobanHubModal .home-card::after,
#memoryHubModal .home-card::after{display:none !important}
/* Override .home-card watercolor backgrounds — chỉ apply page-home */
#page-home .home-card.hc-orange,
#page-home .home-card.hc-purple,
#page-home .home-card.hc-violet{
/* keeps existing watercolor BG */
}
/* For hub modals — assign new images */
#sorobanHubModal .home-card.hc-blue{
background:url('assets/watercolor/hf_20260517_100505_40064a17-ad6c-4f6a-91c3-bb53ca6352e1.png') center/cover no-repeat !important;
}
#sorobanHubModal .home-card.hc-yellow{
background:url('assets/watercolor/hf_20260517_100509_ec2974ab-bf7a-4846-a972-a8fd421db366.png') center/cover no-repeat !important;
}
#sorobanHubModal .home-card.hc-purple{
background:url('assets/watercolor/hf_20260517_120615_967927c4-f43d-44ef-b48f-210651b1c3d1.png') center/cover no-repeat !important;
}
#sorobanHubModal .home-card.hc-pink{
background:url('assets/watercolor/hf_20260517_120618_4239006f-d8f7-48e0-8e80-d0420dbbcc88.png') center/cover no-repeat !important;
}
/* Đấu trực tiếp 1v1 — battle versus image */
#sorobanHubModal .home-card[style*="1a0a3a"],
#sorobanHubModal .home-card[style*="2d1b69"]{
background:url('assets/watercolor/hf_20260517_100518_324c3ce5-7f96-48f9-8ba4-4f110b74d824.png') center/cover no-repeat !important;
border:2.5px solid #FFD93D !important;
box-shadow:0 6px 20px rgba(255,217,61,.35) !important;
}
/* Giải đấu tuần — trophy */
#sorobanHubModal .home-card.hc-red{
background:url('assets/watercolor/hf_20260517_100522_a3642e81-9ea2-4abc-810c-d5890767da8b.png') center 20%/cover no-repeat !important;
}
/* v154.42: Bài Học Soroban — card giáo trình tương tác trong hub */
#sorobanHubModal .home-card.hc-baihoc{
background:#EF6C2C url('baihoc-soroban/cover.png') center 30%/cover no-repeat !important;
border:2.5px solid #FFD93D !important;
box-shadow:0 6px 20px rgba(239,108,44,.4) !important;
}
/* v154.221: Soạn Buổi Dạy — card ảnh nền (id-selector + !important để thắng override .home-card) */
#sorobanHubModal #xsbSoanHubCard{
background:linear-gradient(to top,rgba(20,14,44,.52) 0%,rgba(20,14,44,.16) 40%,rgba(20,14,44,0) 66%),url('assets/soan_banner.jpg?v=221') center 32%/cover no-repeat !important;
border:2.5px solid #B9A6FF !important;
box-shadow:0 6px 20px rgba(94,53,177,.4) !important;
}
/* v154.225: Sách Số Hoá Theo Buổi — hub card watercolor banner */
#sorobanHubModal #xsbSachLibHubCard{
background:linear-gradient(to top,rgba(0,42,38,.52) 0%,rgba(0,42,38,.16) 40%,rgba(0,42,38,0) 66%),url('assets/sachso_banner.jpg?v=225') center 40%/cover no-repeat !important;
border:2.5px solid #7fd8cb !important;
box-shadow:0 6px 20px rgba(0,105,92,.4) !important;
}
/* Modal cards — hide SVG icon + position text overlay at bottom với gradient (SOROBAN ONLY) */
#sorobanHubModal .home-card .hc-icon{display:none !important}
/* ═══ MEMORY HUB MODAL — 13 môn watercolor cards ═══ */
#memoryHubModal .modal-box{
background:linear-gradient(135deg,#F5EDDB 0%,#F0E8D4 100%) !important;
}
/* ═══ v154.21: SIÊU TRÍ NHỚ SUB-TABS (Ứng dụng / Thi đấu) ═══ */
.mem-subtab-bar{
display:flex;gap:8px;
padding:14px 14px 0;
background:transparent;
}
.mem-subtab{
flex:1;
background:rgba(255,255,255,.55);
border:2px solid rgba(124,58,237,.18);
color:#5B21B6;
padding:12px 14px;
border-radius:14px 14px 0 0;
cursor:pointer;
font-weight:800;
font-size:14px;
display:flex;align-items:center;justify-content:center;gap:8px;
transition:all .2s;
font-family:'Crimson Pro',serif;
position:relative;
}
.mem-subtab:hover{
background:rgba(255,255,255,.75);
border-color:rgba(124,58,237,.35);
}
.mem-subtab.active{
background:linear-gradient(135deg,#7C3AED 0%,#5B21B6 100%);
border-color:#5B21B6;
color:#fff;
box-shadow:0 -2px 8px rgba(124,58,237,.25);
}
.mem-subtab.active::after{
content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#fff;
}
.mem-subtab-icon{font-size:18px;flex-shrink:0}
.mem-subtab-panel{display:none;padding-top:6px}
.mem-subtab-panel.active{display:block;animation:memSubtabFade .25s ease}
@keyframes memSubtabFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (min-width:768px){
.mem-subtab{font-size:16px;padding:14px 18px;gap:10px}
.mem-subtab-icon{font-size:22px}
}
/* ═══ v154.21: Landing "Ứng dụng" — 3 levels (Tiểu học / THCS / THPT) ═══ */
.mem-app-landing{padding:16px 14px 8px}
.mem-app-hero{
position:relative;
background:linear-gradient(135deg,#FFF1E8 0%,#FBE0D0 35%,#E8CDE8 65%,#C8A4DE 100%);
border:2px solid #B584C8;
border-radius:18px;
padding:24px 22px;
margin-bottom:20px;
overflow:hidden;
box-shadow:0 8px 24px rgba(124,58,237,.15);
}
.mem-app-hero::before{
content:'';position:absolute;top:-20px;right:-20px;width:120px;height:120px;
background:radial-gradient(circle,#FFD93D 0%,transparent 65%);
opacity:.4;pointer-events:none;
}
.mem-app-badge{
display:inline-block;
background:linear-gradient(90deg,#E89F5C,#FFD93D);
color:#3D1E5D;
font-size:11px;font-weight:900;
padding:4px 12px;border-radius:99px;
letter-spacing:1px;margin-bottom:10px;
box-shadow:0 2px 6px rgba(232,159,92,.3);
}
.mem-app-title{
font-family:'Crimson Pro',serif;
font-size:26px;font-weight:800;
color:#3D1E5D;line-height:1.2;
margin:0 0 8px;
text-shadow:0 1px 2px rgba(255,255,255,.5);
}
.mem-app-subtitle{
font-family:'Crimson Pro',serif;
font-size:15px;color:#5B2A86;
font-style:italic;line-height:1.55;
max-width:520px;
}
@media (min-width:768px){
.mem-app-hero{padding:32px 30px}
.mem-app-title{font-size:32px}
.mem-app-subtitle{font-size:17px}
}
@media (min-width:1280px){
.mem-app-title{font-size:38px}
.mem-app-subtitle{font-size:18px}
}
.mem-app-section-title{
font-family:'Crimson Pro',serif;
font-size:18px;font-weight:700;
color:#5B2A86;margin:18px 0 12px;
display:flex;align-items:center;gap:8px;
}
.mem-app-grid{
display:grid;
grid-template-columns:1fr;
gap:14px;
margin-bottom:18px;
}
@media (min-width:768px){
.mem-app-grid{grid-template-columns:repeat(3,1fr); gap:16px}
}
.mem-app-card{
position:relative;
background:#fff;
border:2px solid;
border-radius:18px;
padding:18px 18px 16px;
overflow:hidden;
transition:transform .2s, box-shadow .2s;
cursor:default;
}
.mem-app-card:hover{transform:translateY(-4px); box-shadow:0 12px 28px rgba(124,58,237,.18)}
.mem-app-card.level-tieu-hoc{
border-color:#F8BBD0;
background:linear-gradient(160deg,#FFF5F8 0%,#FCE4EC 100%);
}
.mem-app-card.level-thcs{
border-color:#EFC9A0;
background:linear-gradient(160deg,#FFF4E8 0%,#FBE2C9 100%);
}
.mem-app-card.level-thpt{
border-color:#B39DDB;
background:linear-gradient(160deg,#F3E5F5 0%,#E1BEE7 100%);
}
.mem-app-card .mac-icon{
width:88px;height:88px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:40px;
/* v154.54: bỏ vòng tròn trắng — để màu gradient của từng thẻ hiện xuyên qua,
ảnh học sinh (PNG trong suốt) khớp nền thẻ thay vì nằm trên đĩa trắng */
background:transparent;
margin-bottom:12px;
box-shadow:none;
overflow:hidden;
}
.mem-app-card .mac-icon img{
width:100%;height:100%;object-fit:contain;
mix-blend-mode:normal;
}
@media (min-width:768px){
.mem-app-card .mac-icon{width:104px;height:104px}
}
.mem-app-card .mac-grade{
font-size:11px;font-weight:900;letter-spacing:1px;
color:#8A5BA0;text-transform:uppercase;
margin-bottom:4px;
}
.mem-app-card.level-tieu-hoc .mac-grade{color:#8A5BA0}
.mem-app-card.level-thcs .mac-grade{color:#8A5BA0}
.mem-app-card .mac-title{
font-family:'Crimson Pro',serif;
font-size:20px;font-weight:800;
color:#3D1E5D;line-height:1.2;margin-bottom:6px;
}
.mem-app-card.level-tieu-hoc .mac-title{color:#3D1E5D}
.mem-app-card.level-thcs .mac-title{color:#3D1E5D}
.mem-app-card .mac-desc{
font-size:13px;color:#555;line-height:1.55;margin-bottom:12px;
}
.mem-app-card .mac-topics{
list-style:none;padding:0;margin:0 0 12px;
}
.mem-app-card .mac-topics li{
font-size:12.5px;color:#444;padding:4px 0 4px 22px;
background:url('data:image/svg+xml;utf8,') no-repeat left center / 16px;
}
.mem-app-card .mac-coming{
display:inline-block;
background:rgba(255,107,53,.12);
color:#C04820;
font-size:11px;font-weight:800;
padding:5px 12px;border-radius:99px;
letter-spacing:.5px;
}
@media (min-width:768px){
.mem-app-card .mac-title{font-size:22px}
}
/* ═══ v154.26: Nút "Vào học" trong card cấp độ + fullscreen modal app Trí Nhớ ═══ */
.mem-app-card .mac-start{
display:inline-flex;align-items:center;gap:6px;
background:linear-gradient(135deg,#5B2A86,#7C4B9E);
color:#fff;border:none;
font-size:13px;font-weight:900;
padding:9px 18px;border-radius:99px;
cursor:pointer;letter-spacing:.3px;
box-shadow:0 4px 12px rgba(91,42,134,.32);
transition:transform .18s, box-shadow .18s;
}
.mem-app-card .mac-start:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(91,42,134,.42)}
.mem-app-card .mac-start:active{transform:scale(.97)}
.mem-app-card .mac-start.locked{
background:linear-gradient(135deg,#C98A52,#E2AE7E);
box-shadow:0 4px 12px rgba(201,138,82,.32);
}
/* v154.127: Thẻ 3 cấp học — ảnh nhân vật TO bằng bề ngang thẻ, CHỈ giữ nhãn cấp (Tiểu Học/THCS/THPT);
ẩn mọi mô tả + nút; chạm cả thẻ để vào học (xem listener delegated trong JS). */
.mem-app-card{ padding:0 0 14px !important; cursor:pointer !important; }
.mem-app-card .mac-icon{ width:100% !important; height:auto !important; border-radius:0 !important; margin:0 0 10px !important; }
.mem-app-card .mac-icon img{ width:100% !important; height:auto !important; object-fit:contain !important; display:block; }
.mem-app-card .mac-grade{ font-size:14px; padding:0 16px; margin-bottom:8px; }
.mem-app-card .mac-title,
.mem-app-card .mac-desc,
.mem-app-card .mac-topics,
.mem-app-card .mac-start{ display:none !important; }
/* Fullscreen modal nhúng app Trí Nhớ 12 tuần */
#memAppFullscreenModal, #docnhanhFullscreenModal{
display:none;
position:fixed;inset:0;z-index:99999;
background:#FFF6E9;
}
#memAppFullscreenModal.show, #docnhanhFullscreenModal.show{display:flex;flex-direction:column}
#docnhanhFrame{flex:1 1 auto;min-height:0;width:100%;border:0;display:block;background:#fff} /* v154.88 fix: iframe lấp đầy modal, không bị cắt */
.memapp-fs-header{
flex-shrink:0;
display:flex;align-items:center;gap:12px;
padding:10px 16px;
background:linear-gradient(135deg,#6C5CE7,#8E7BF0);
color:#fff;
box-shadow:0 2px 12px rgba(108,92,231,.4);
}
.memapp-fs-header .mafs-title{
font-weight:900;font-size:15px;flex:1;
display:flex;align-items:center;gap:8px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.memapp-fs-header .mafs-close{
flex-shrink:0;
background:rgba(255,255,255,.22);
border:none;color:#fff;
width:38px;height:38px;border-radius:50%;
font-size:20px;font-weight:300;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .2s;
}
.memapp-fs-header .mafs-close:hover{background:rgba(255,255,255,.38)}
/* v154.37: ẩn header tím khi đang xem bài học → bài học toàn màn hình */
#memAppFullscreenModal.lesson-active .memapp-fs-header{display:none}
#memAppFrame{
flex:1;width:100%;border:0;display:block;
background:#FFF6E9;
}
@media (min-width:768px){
.memapp-fs-header{padding:12px 22px}
.memapp-fs-header .mafs-title{font-size:17px}
}
/* v154.35: điện thoại xoay ngang (màn thấp) — thu gọn header cho đỡ chiếm chỗ */
@media (max-height:500px){
.memapp-fs-header{padding:4px 12px}
.memapp-fs-header .mafs-title{font-size:13px}
.memapp-fs-header .mafs-close{width:30px;height:30px;font-size:16px}
}
/* v154.40: Modal fullscreen + card — Bài Học Soroban */
#sorobanLessonModal{display:none;position:fixed;inset:0;z-index:99999;background:#fdf4e3}
#sorobanLessonModal.show{display:flex;flex-direction:column}
#sorobanLessonModal .memapp-fs-header{background:linear-gradient(135deg,#FF9F43,#EF6C2C)}
#sorobanLessonFrame{flex:1;width:100%;border:0;display:block;background:#fdf4e3}
/* v154.41: card nhỏ gọn — bố cục ngang (ảnh thumbnail + nội dung + nút) */
.sbl-card{display:flex;align-items:center;gap:12px;position:relative;
border-radius:18px;cursor:pointer;margin:6px 0 12px;padding:10px 12px 10px 10px;
background:linear-gradient(135deg,#FFE7C4,#FFC98C);
box-shadow:0 6px 18px rgba(239,108,44,.22);
transition:transform .16s,box-shadow .16s}
.sbl-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(239,108,44,.34)}
.sbl-card:active{transform:translateY(-1px)}
.sbl-card .sbl-img{width:96px;height:64px;flex-shrink:0;border-radius:12px;
object-fit:cover;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.sbl-card .sbl-body{flex:1;min-width:0}
.sbl-card .sbl-title{font-size:16px;font-weight:900;color:#0a0a0a;text-transform:uppercase;letter-spacing:.2px;
font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
-webkit-text-stroke:0;
text-shadow:0 1px 3px rgba(255,255,255,.9);
display:flex;align-items:center;gap:6px}
.sbl-card .sbl-sub{font-size:12.5px;color:#3a3a3a;margin-top:2px;line-height:1.4;font-weight:600}
.sbl-card .sbl-cta{flex-shrink:0;background:#EF6C2C;color:#fff;
font-weight:900;font-size:12.5px;padding:9px 14px;border-radius:999px;
box-shadow:0 4px 12px rgba(239,108,44,.4);white-space:nowrap}
@media (min-width:768px){
.sbl-card{gap:16px;padding:12px 16px 12px 12px}
.sbl-card .sbl-img{width:132px;height:84px}
.sbl-card .sbl-title{font-size:18px}
.sbl-card .sbl-sub{font-size:13px}
.sbl-card .sbl-cta{font-size:13.5px;padding:10px 18px}
}
.mem-app-cta{
margin-top:18px;
background:linear-gradient(135deg,#F1D9ED 0%,#D6B5E6 100%);
border:2px solid #B584C8;
border-radius:16px;
padding:22px 20px;
color:#3D1E5D;
text-align:center;
box-shadow:0 8px 22px rgba(124,58,237,.16);
}
.mem-app-cta h4{
font-family:'Crimson Pro',serif;
font-size:20px;font-weight:700;margin:0 0 8px;color:#3D1E5D;
}
.mem-app-cta p{
font-size:14px;opacity:.92;line-height:1.6;margin:0 0 14px;
max-width:480px;margin-left:auto;margin-right:auto;
}
.mem-app-cta button{
background:linear-gradient(90deg,#FFD93D,#F0A85C);
color:#3D1E5D;
border:none;padding:12px 26px;
border-radius:99px;font-weight:900;font-size:14px;
cursor:pointer;letter-spacing:.3px;
box-shadow:0 4px 12px rgba(240,168,92,.4);
transition:transform .2s;
}
.mem-app-cta button:hover{transform:translateY(-2px); box-shadow:0 6px 16px rgba(240,168,92,.55)}
.mem-app-features{
display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
margin-top:16px;
}
@media (min-width:768px){
.mem-app-features{grid-template-columns:repeat(4,1fr)}
}
.mem-app-feature{
background:rgba(255,255,255,.7);
border:1px solid rgba(124,58,237,.15);
border-radius:12px;
padding:12px 10px;
text-align:center;
}
.mem-app-feature .maf-emoji{font-size:26px;display:block;margin-bottom:4px}
.mem-app-feature .maf-label{font-size:12px;font-weight:700;color:#5B2A86;line-height:1.3}
#memoryHubModal .hub-modal-header{
background:
url('assets/watercolor/hf_20260517_095808_3e654c78-3ea2-47a9-aff8-6341359b28d6.png') center top/cover no-repeat,
linear-gradient(135deg,#1e1b4b,#4c1d95,#7e22ce) !important;
background-blend-mode:overlay !important;
position:relative !important;
}
#memoryHubModal .hub-modal-header::after{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,rgba(30,27,75,.55),rgba(126,34,206,.35));
pointer-events:none;z-index:0;
}
#memoryHubModal .hub-modal-header > *{position:relative;z-index:1}
#memoryHubModal .hmh-title{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
letter-spacing:-.3px !important;
}
#memoryHubModal .hmh-sub{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
}
/* Memory hub cards — watercolor pastel gradients theo class màu */
#memoryHubModal .home-card{
border-radius:18px !important;
border-width:2px !important;
padding:16px 12px !important;
min-height:130px !important;
transition:all .25s !important;
}
#memoryHubModal .home-card:hover{
transform:translateY(-3px) scale(1.02) !important;
box-shadow:0 12px 28px rgba(60,40,20,.18) !important;
}
#memoryHubModal .home-card .hc-icon{
filter:drop-shadow(0 3px 6px rgba(60,40,20,.18)) !important;
}
#memoryHubModal .home-card .hc-title{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:16px !important;
letter-spacing:-.2px !important;
margin-top:8px !important;
}
#memoryHubModal .home-card .hc-sub{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
font-size:12px !important;
font-weight:500 !important;
opacity:.9 !important;
}
/* Override các class màu của home-card trong memory modal — watercolor pastel */
#memoryHubModal .home-card.hc-cyan{
background:linear-gradient(135deg,#A8D5E5 0%,#B8D4E8 50%,#D4EAF5 100%) !important;
border-color:#7BB9D4 !important;
}
#memoryHubModal .home-card.hc-cyan .hc-title{color:#1E4458 !important}
#memoryHubModal .home-card.hc-yellow{
background:linear-gradient(135deg,#E8C68A 0%,#F4D88A 50%,#FFF1C5 100%) !important;
border-color:#D69E2E !important;
}
#memoryHubModal .home-card.hc-yellow .hc-title{color:#7A3C1A !important}
#memoryHubModal .home-card.hc-pink{
background:linear-gradient(135deg,#E6A4A8 0%,#F5C2C2 50%,#FFE0E0 100%) !important;
border-color:#C77AAB !important;
}
#memoryHubModal .home-card.hc-pink .hc-title{color:#7F1D4C !important}
#memoryHubModal .home-card.hc-green{
background:linear-gradient(135deg,#B4C8A5 0%,#C8E0CC 50%,#E0F0D5 100%) !important;
border-color:#7A9968 !important;
}
#memoryHubModal .home-card.hc-green .hc-title{color:#2D4F2D !important}
#memoryHubModal .home-card.hc-purple{
background:linear-gradient(135deg,#D4C8E8 0%,#E0CDF0 50%,#F5E8FA 100%) !important;
border-color:#9D7FB8 !important;
}
#memoryHubModal .home-card.hc-purple .hc-title{color:#5B2A86 !important}
#memoryHubModal .home-card.hc-orange{
background:linear-gradient(135deg,#FFCDB4 0%,#FFE4D6 50%,#FFF0E0 100%) !important;
border-color:#E07856 !important;
}
#memoryHubModal .home-card.hc-orange .hc-title{color:#7A3C1A !important}
#memoryHubModal .home-card.hc-red{
background:linear-gradient(135deg,#FFCDB4 0%,#F5B0A0 50%,#E6A4A8 100%) !important;
border-color:#B57340 !important;
}
#memoryHubModal .home-card.hc-red .hc-title{color:#7F1D1D !important}
/* Major System (priority card span 4) — hero watercolor */
#memoryHubModal .home-card[style*="grid-column:span 4"]{
background:
url('assets/watercolor/hf_20260517_095808_3e654c78-3ea2-47a9-aff8-6341359b28d6.png') center/cover no-repeat !important;
border-color:#9D7FB8 !important;
position:relative !important;
min-height:160px !important;
overflow:hidden !important;
}
#memoryHubModal .home-card[style*="grid-column:span 4"]::before{
content:'' !important;
position:absolute !important;
inset:0 !important;
background:linear-gradient(to top, rgba(30,27,75,.88) 0%, rgba(30,27,75,.55) 50%, rgba(30,27,75,.15) 80%, transparent 100%) !important;
pointer-events:none !important;
z-index:1 !important;
display:block !important;
animation:none !important;
}
#memoryHubModal .home-card[style*="grid-column:span 4"] .hc-icon{display:none !important}
#memoryHubModal .home-card[style*="grid-column:span 4"] .hc-title,
#memoryHubModal .home-card[style*="grid-column:span 4"] .hc-sub{
position:relative !important;z-index:2 !important;color:#fff !important;
}
#memoryHubModal .home-card[style*="grid-column:span 4"] .hc-title{
color:#FFE4D6 !important;
text-shadow:0 2px 6px rgba(0,0,0,.5) !important;
font-size:20px !important;
}
#memoryHubModal .home-card[style*="grid-column:span 4"] .hc-sub{
color:rgba(255,255,255,.95) !important;
text-shadow:0 1px 3px rgba(0,0,0,.5) !important;
}
#memoryHubModal .home-card[style*="grid-column:span 4"] span[style*="rgba"]{
position:relative !important;z-index:3 !important;
}
/* Final note tip card trong memory hub */
#memoryHubModal .home-card[style*="margin-top:12px"]{
background:linear-gradient(135deg,#D4C8E8 0%,#9D7FB8 100%) !important;
border:2.5px solid #FFD93D !important;
}
#memoryHubModal .home-card[style*="margin-top:12px"] *{color:#fff !important}
#sorobanHubModal .home-card .hc-title,
#sorobanHubModal .home-card .hc-sub,
#sorobanHubModal .home-card .hc-badge{
position:relative;z-index:2;
}
/* v154.284: MỌI card hub Soroban CÙNG kích thước (như "Thi quốc tế") — span 2 cột, 2 card/hàng, gọn & đồng đều */
#sorobanHubModal .home-card{ grid-column:span 2 !important; min-height:150px !important; }
#sorobanHubModal .home-card .hc-icon{ display:none !important; } /* ẩn icon SVG cũ — dùng ảnh nền watercolor */
#sorobanHubModal .home-card::before{
content:'' !important;
display:block !important;
position:absolute !important;
inset:0 !important;
background:transparent !important;
pointer-events:none !important;
z-index:1 !important;
animation:none !important;
}
#sorobanHubModal .home-card{
display:flex !important;
flex-direction:column !important;
justify-content:flex-end !important;
align-items:center !important;
padding:14px !important;
text-align:center !important;
}
#sorobanHubModal .home-card .hc-title{
font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important; /* v154.284: sans-serif ĐẬM RÕ */
font-weight:900 !important;
font-size:18px !important; /* v154.287: nhỏ lại — tránh xuống hàng/che ảnh */
text-transform:uppercase !important;
color:#0a0a0a !important;
-webkit-text-stroke:0 !important;
text-shadow:0 1px 4px rgba(255,255,255,.92), 0 0 2px rgba(255,255,255,.85) !important;
letter-spacing:.3px !important;
margin-bottom:3px !important;
}
#sorobanHubModal .home-card .hc-sub{
font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important;
font-size:11px !important; /* v154.287 nhỏ lại */
color:#111 !important;
text-shadow:0 1px 3px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.8) !important;
font-weight:800 !important;
-webkit-text-stroke:0 !important;
}
/* ═══ PET CARD .home-card.hc-orange — 12 zodiac scene ═══ */
.home-card.hc-orange{
background:url('assets/watercolor/hf_20260517_100514_381bdc1b-b80c-4df1-ae8a-00c60eb330c0.png') center/cover no-repeat !important;
border-color:rgba(255,255,255,.5) !important;
position:relative;overflow:hidden;
min-height:170px !important;
}
.home-card.hc-orange::before{
content:'' !important;position:absolute !important;inset:0 !important;
background:linear-gradient(to top, rgba(80,40,10,.72) 0%, rgba(80,40,10,.3) 50%, transparent 78%) !important;
z-index:1 !important;width:100% !important;height:100% !important;
top:0 !important;left:0 !important;
animation:none !important;
}
.home-card.hc-orange .hc-icon{display:none !important}
.home-card.hc-orange .hc-title{
color:#fff !important;
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:18px !important;
text-shadow:0 2px 5px rgba(0,0,0,.5) !important;
}
.home-card.hc-orange .hc-sub{
color:rgba(255,255,255,.95) !important;
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
text-shadow:0 1px 3px rgba(0,0,0,.5) !important;
}
/* ═══ STORY CARD .home-card.hc-purple — Castle adventure scene ═══ */
.home-card.hc-purple{
background:url('assets/watercolor/hf_20260517_110005_eb39eb14-764e-4b4f-bd70-6a0f1c27356f.png') center/cover no-repeat !important;
border-color:rgba(255,255,255,.5) !important;
position:relative;overflow:hidden;
min-height:170px !important;
}
.home-card.hc-purple::before{
content:'' !important;position:absolute !important;inset:0 !important;
background:linear-gradient(to top, rgba(60,30,100,.74) 0%, rgba(60,30,100,.32) 50%, transparent 78%) !important;
z-index:1 !important;width:100% !important;height:100% !important;
top:0 !important;left:0 !important;
animation:none !important;
}
.home-card.hc-purple .hc-icon{display:none !important}
.home-card.hc-purple .hc-title{
color:#fff !important;
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:18px !important;
text-shadow:0 2px 5px rgba(0,0,0,.55) !important;
}
.home-card.hc-purple .hc-sub{
color:rgba(255,255,255,.95) !important;
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
text-shadow:0 1px 3px rgba(0,0,0,.5) !important;
}
/* ═══ AVATAR CARD .home-card.hc-violet — Palette scene ═══ */
.home-card.hc-violet{
background:url('assets/watercolor/hf_20260517_110009_d6198a84-0436-4d69-a2d1-66a8586d0ca0.png') center/cover no-repeat !important;
border-color:rgba(255,255,255,.5) !important;
position:relative;overflow:hidden;
min-height:170px !important;
}
.home-card.hc-violet::before{
content:'' !important;position:absolute !important;inset:0 !important;
background:linear-gradient(to top, rgba(60,40,120,.72) 0%, rgba(60,40,120,.3) 50%, transparent 78%) !important;
z-index:1 !important;width:100% !important;height:100% !important;
top:0 !important;left:0 !important;
bottom:auto !important;right:auto !important;
animation:none !important;
}
.home-card.hc-violet .hc-icon{display:none !important}
.home-card.hc-violet .hc-title{
color:#fff !important;
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:18px !important;
text-shadow:0 2px 5px rgba(0,0,0,.55) !important;
}
.home-card.hc-violet .hc-sub{
color:rgba(255,255,255,.95) !important;
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
text-shadow:0 1px 3px rgba(0,0,0,.5) !important;
}
/* ═══ Heading h2 trên hero banner — Crimson Pro ═══ */
.xsb-hero-3d h2{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
letter-spacing:-.3px !important;
}
/* ═══ PREVIEW banner đã bỏ — đây là production ═══ */
/* ═══════════════════════════════════════════════════════════════
🎨 PHẦN 2 — Header, Tabs, Hero banner, Upgrade banner,
Daily Hub, Check-in, Quests, Mystery Box
═══════════════════════════════════════════════════════════════ */
/* ═══ Body background — beige muted (giấy cũ ấm), dịu hơn cream sáng ═══ */
body{
background:#F0E8D4 !important;
background-image:
url("data:image/svg+xml;utf8,"),
radial-gradient(circle at 5% 10%, rgba(232,180,140,.12) 0%, transparent 35%),
radial-gradient(circle at 95% 30%, rgba(200,188,220,.1) 0%, transparent 40%) !important;
}
/* ═══ HEADER ═══ */
header{
background:linear-gradient(135deg, #FFF7E8 0%, #FFFAF0 100%) !important;
border:1.5px solid rgba(232,198,138,.4) !important;
box-shadow:0 4px 12px rgba(60,40,20,.08) !important;
border-radius:20px !important;
}
header h1{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
letter-spacing:-.3px !important;
color:#3D3528 !important;
}
header .logo{
background:linear-gradient(135deg,#E07856,#E6A4A8) !important;
box-shadow:0 4px 12px rgba(224,120,86,.3) !important;
}
header .chip{
background:#FFF7E8 !important;
border:1.5px solid rgba(232,198,138,.5) !important;
color:#5C5446 !important;
}
header .chip strong{color:#3D3528 !important;font-family:'Crimson Pro',serif !important;font-weight:700 !important}
/* ═══ TABS ═══ */
.tabs{
background:#fff !important;
border:1.5px solid rgba(232,198,138,.4) !important;
border-radius:20px !important;
box-shadow:0 4px 12px rgba(60,40,20,.06) !important;
}
.tab{
font-family:'Crimson Pro',serif !important;
font-weight:600 !important;
font-size:14.5px !important;
letter-spacing:-.2px !important;
color:#5C5446 !important;
border-radius:14px !important;
}
.tab.active{
background:linear-gradient(135deg,#E07856,#E6A4A8) !important;
color:#fff !important;
box-shadow:0 4px 12px rgba(224,120,86,.3) !important;
}
.tab:hover:not(.active){background:#FFF7E8 !important;color:#3D3528 !important}
/* ═══ HSPRO UPGRADE BANNER — Top sticky banner ═══ */
#hsProUpgradeBanner{
background:linear-gradient(135deg, #D4C8E8 0%, #E6A4A8 50%, #FFCDB4 100%) !important;
color:#3D3528 !important;
border-radius:14px !important;
padding:10px 18px !important;
margin:8px 12px !important;
box-shadow:0 4px 14px rgba(212,200,232,.4) !important;
border:1.5px solid rgba(255,255,255,.5) !important;
font-size:13.5px !important;
text-align:center !important;
}
#hsProUpgradeBanner strong{font-family:'Crimson Pro',serif !important;font-weight:700 !important;color:#5B2A86 !important}
#hsProUpgradeBanner button{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
background:#fff !important;
color:#5B2A86 !important;
border:1.5px solid rgba(255,255,255,.7) !important;
box-shadow:0 2px 8px rgba(0,0,0,.1) !important;
}
/* ═══ HERO BANNER xsb-hero-3d
v154.16: SCENE PANORAMIC 21:9 — vẽ lại đúng tỷ lệ card.
Bachi bên phải, landscape watercolor (sun/clouds/mountains/grass) trải dài bên trái.
background-size: cover → fill kín card hoàn hảo, không có vùng trống. ═══ */
.xsb-hero-3d{
/* v302: banner chào = TRANH Bachi cầm bàn tính Nhật + bong bóng "..." (ảnh nền lấp đầy tab, chữ overlay bên trái) */
background:url('assets/bachi_wash.jpg?v=308') center / cover no-repeat, linear-gradient(135deg,#A7D8F0 0%,#C9B6E8 54%,#F4DAC9 100%) !important;
position:relative !important;
overflow:hidden !important;
padding:20px 26px !important;
min-height:190px !important;
display:flex !important;flex-direction:column !important;justify-content:center !important;
box-shadow:0 10px 26px rgba(180,120,140,.25) !important;
border:2px solid rgba(255,255,255,.5) !important;
}
/* Reset ::before */
.xsb-hero-3d::before{content:none !important}
/* Text + stats nằm TRÊN ảnh */
.xsb-hero-3d > *{position:relative !important; z-index:2 !important}
/* Desktop: cao vừa đủ khít ảnh (ảnh ~4.74:1) */
@media (min-width:768px){
.xsb-hero-3d{min-height:208px !important}
}
@media (min-width:1280px){
.xsb-hero-3d{min-height:224px !important; padding:24px 34px !important}
}
/* Overlay gradient — v154.16: scene 21:9 phủ kín card → text trên scene cần overlay nhẹ */
.xsb-hero-3d::after{
content:'';position:absolute;inset:0;
background:linear-gradient(to right, rgba(255,250,242,.8) 0%, rgba(255,250,242,.46) 30%, transparent 56%) !important;
pointer-events:none;z-index:1;
}
.xsb-hero-3d > *{position:relative;z-index:2}
/* Hide SVG decoration cũ (bàn tính bay, sao xoay, mây) — đã có watercolor scene */
.xsb-hero-3d > svg{display:none !important}
.xsb-hero-3d > div[style*="position:absolute"]:not([class]):not([id]){display:none !important}
/* Text styling */
.xsb-hero-3d h2{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:27px !important;
color:#3D3528 !important;
text-shadow:0 1px 2px rgba(255,255,255,.6) !important;
letter-spacing:-.3px !important;
max-width:56% !important;
margin-bottom:4px !important;
}
.xsb-hero-3d > p{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
color:#5C5446 !important;
font-size:14px !important;
text-shadow:0 1px 1px rgba(255,255,255,.5) !important;
max-width:56% !important;
font-weight:500 !important;
margin-bottom:12px !important;
}
/* Stats pills — watercolor pill style */
.xsb-stat-pill{
background:rgba(255,255,255,.95) !important;
backdrop-filter:blur(8px);
border:1.5px solid rgba(255,255,255,.7) !important;
box-shadow:0 4px 12px rgba(60,40,20,.1) !important;
border-radius:14px !important;
}
.xsb-stat-pill > div:first-child{color:#3D3528 !important;font-family:'Crimson Pro',serif !important}
.xsb-stat-pill > div:first-child span{color:#3D3528 !important;font-family:'Crimson Pro',serif !important;font-weight:700 !important}
.xsb-stat-pill > div:last-child{color:#5C5446 !important;font-weight:700 !important}
@media(max-width:680px){
.xsb-hero-3d{padding:14px 16px !important; min-height:158px !important; background-position:right center !important}
.xsb-hero-3d h2{font-size:19px !important; max-width:60% !important}
.xsb-hero-3d > p{font-size:12px !important; max-width:56% !important; margin-bottom:9px !important}
.xsb-stat-pill{min-width:0 !important; padding:7px 10px !important}
.xsb-hero-3d::after{
background:linear-gradient(to right, rgba(255,250,242,.86) 0%, rgba(255,250,242,.5) 42%, transparent 66%) !important;
}
}
/* ═══ DAILY HUB CARD #dailyHubCard — Watercolor + Crimson Pro ═══ */
#dailyHubCard{
background:linear-gradient(135deg, #FFF7E8 0%, #FFFAF0 50%, #FFE4D6 100%) !important;
border:2px solid rgba(232,198,138,.6) !important;
border-radius:22px !important;
box-shadow:0 8px 24px rgba(60,40,20,.1) !important;
}
#dailyHubCard h2{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:22px !important;
letter-spacing:-.3px !important;
}
#dailyHubCard strong{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:15px !important;
color:#3D3528 !important;
}
/* ═══ Check-in 7 ngày — TĂNG SIZE TEXT + Mỗi ngày 1 reward icon riêng ═══ */
.checkin-grid{
gap:10px !important;
padding:10px 4px !important;
}
.checkin-day{
border:2.5px solid rgba(232,198,138,.5) !important;
border-radius:18px !important;
background:rgba(255,255,255,.7) !important;
padding:10px 6px !important;
min-height:140px !important;
aspect-ratio:auto !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:flex-start !important;
gap:4px !important;
}
.checkin-day.claimed{
background:linear-gradient(135deg,#B4C8A5 0%,#9DB68A 100%) !important;
border-color:#7A9968 !important;
box-shadow:0 4px 12px rgba(180,200,165,.4) !important;
color:#fff !important;
}
.checkin-day.today{
background:linear-gradient(135deg,#FFCDB4 0%,#FFB088 50%,#E07856 100%) !important;
border-color:#C04820 !important;
box-shadow:0 6px 18px rgba(224,120,86,.45) !important;
color:#fff !important;
}
.checkin-day.locked{
background:rgba(232,198,138,.15) !important;
border-style:dashed !important;
border-color:rgba(232,198,138,.5) !important;
opacity:.55 !important;
}
/* Day name (T2/T3/...) — TĂNG */
.checkin-day .day-num{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:15px !important;
letter-spacing:.5px !important;
margin-bottom:0 !important;
}
/* Date (11/5) — TĂNG */
.checkin-day > div:nth-child(2){
font-family:'Crimson Pro',serif !important;
font-size:18px !important;
font-weight:700 !important;
margin:2px 0 !important;
letter-spacing:-.3px !important;
}
/* Reward icon container — TĂNG (chứa ![]()
) */
.checkin-day .day-reward{
font-size:0 !important;
width:50px !important;
height:50px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:4px 0 !important;
}
.checkin-day .day-reward img{
width:100% !important;
height:100% !important;
object-fit:contain !important;
filter:drop-shadow(0 3px 6px rgba(60,40,20,.18));
}
/* Coin amount text — TĂNG */
.checkin-day .day-coin{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:14px !important;
letter-spacing:-.2px !important;
margin-top:2px !important;
}
/* Claimed mark ✓ */
.checkin-day.claimed::after{font-size:14px !important;top:5px !important;right:7px !important}
@media(max-width:760px){
.checkin-day{min-height:120px !important;padding:8px 4px !important}
.checkin-day .day-num{font-size:13px !important}
.checkin-day > div:nth-child(2){font-size:15px !important}
.checkin-day .day-reward{width:40px !important;height:40px !important}
.checkin-day .day-coin{font-size:12px !important}
}
/* ═══ v297: ĐIỂM DANH 7 THẦN HÀNH TINH — thần full thẻ + nhãn mờ dưới + glow/xám ═══ */
.checkin-day{padding:0 !important;overflow:hidden !important;position:relative !important;min-height:0 !important;aspect-ratio:3/4 !important;border-radius:16px !important;display:block !important;background:#E7EFE0 !important;gap:0 !important}
.checkin-day .cd-god{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:filter .35s,transform .3s;z-index:0;pointer-events:none}
.checkin-day .cd-label{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 3px 5px;text-align:center;background:linear-gradient(to top,rgba(43,30,16,.85),rgba(43,30,16,.5) 55%,transparent);color:#fff;line-height:1.12;pointer-events:none}
.checkin-day .cd-l1{font-family:'Crimson Pro',serif;font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.checkin-day .cd-l2{font-family:'Crimson Pro',serif;font-weight:700;font-size:12px;color:#FFE6B0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;padding:0 2px}
.checkin-day .cd-planet{opacity:.95}
.checkin-day.claimed{border:3px solid #5FA052 !important}
.checkin-day.claimed::after{content:'✓';position:absolute !important;top:4px !important;right:5px !important;z-index:3;width:19px;height:19px;border-radius:50%;background:#5FA052;color:#fff;font-size:12px !important;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,.25);text-shadow:none !important}
.checkin-day.today{border:3px solid #FFB300 !important;cursor:pointer;box-shadow:0 0 0 3px rgba(255,193,74,.4),0 6px 18px rgba(240,150,40,.4) !important;animation:cdTodayPulse 1.7s ease-in-out infinite !important}
.checkin-day.today .cd-god{filter:brightness(1.07) saturate(1.1)}
.checkin-day.today::before{content:'✨';position:absolute;top:2px;left:5px;z-index:3;font-size:14px;animation:cdSpark 1.5s ease-in-out infinite}
.checkin-day.today:hover .cd-god{transform:scale(1.05)}
.checkin-day.locked{border:2px dashed rgba(150,135,108,.55) !important;opacity:1 !important}
.checkin-day.locked .cd-god{filter:grayscale(1) brightness(1.05) opacity(.6)}
.checkin-day.locked .cd-label{background:linear-gradient(to top,rgba(108,98,84,.8),transparent)}
@keyframes cdTodayPulse{0%,100%{box-shadow:0 0 0 3px rgba(255,193,74,.4),0 6px 18px rgba(240,150,40,.4)}50%{box-shadow:0 0 0 6px rgba(255,193,74,.62),0 8px 24px rgba(240,150,40,.6)}}
@keyframes cdSpark{0%,100%{transform:scale(1) rotate(0);opacity:.7}50%{transform:scale(1.3) rotate(14deg);opacity:1}}
@media(max-width:760px){
.checkin-day{aspect-ratio:5/7 !important}
.checkin-day .cd-planet,.checkin-day .cd-date{display:none !important}
.checkin-day .cd-l1{font-size:12px}
.checkin-day .cd-l2{font-size:11px}
.checkin-day .cd-label{padding:12px 2px 4px}
}
@media(max-width:420px){
.checkin-day .cd-l1{font-size:10px}
.checkin-day .cd-l2{font-size:10px}
}
/* Quests cards — watercolor */
.quest-card{
background:rgba(255,255,255,.85) !important;
border:1.5px solid rgba(232,198,138,.5) !important;
border-radius:14px !important;
box-shadow:0 3px 10px rgba(60,40,20,.06) !important;
}
.quest-card.done{
background:linear-gradient(135deg,#DCFDD2,#fff) !important;
border-color:#B4C8A5 !important;
box-shadow:0 4px 14px rgba(180,200,165,.3) !important;
}
.quest-title{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:15px !important;
color:#3D3528 !important;
}
.quest-bar-fill{
background:linear-gradient(90deg,#E07856,#E6A4A8) !important;
}
.quest-card.done .quest-bar-fill{
background:linear-gradient(90deg,#B4C8A5,#7A9968) !important;
}
.quest-reward{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
color:#E07856 !important;
}
/* Mystery box cards */
.mb-card{
background:rgba(255,255,255,.85) !important;
border-width:1.5px !important;
border-radius:16px !important;
box-shadow:0 3px 10px rgba(60,40,20,.08) !important;
}
.mb-card .mb-name{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:14px !important;
}
.mb-card.tier-bronze{
background:linear-gradient(135deg,#FFE4D6,#FFCDB4) !important;
border-color:#B57340 !important;
}
.mb-card.tier-silver{
background:linear-gradient(135deg,#F4F6F8,#E5E9ED) !important;
border-color:#8B95A1 !important;
}
.mb-card.tier-gold{
background:linear-gradient(135deg,#FFF7E8,#E8C68A) !important;
border-color:#D69E2E !important;
}
/* Section title h2 (cho daily tip, etc.) */
.card h2{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
letter-spacing:-.3px !important;
}
/* Daily tip card */
.card[style*="fffde7"]{
background:linear-gradient(135deg,#FFF7E8,#FFE4D6) !important;
border-color:rgba(232,198,138,.6) !important;
}
.card[style*="fffde7"] h2{color:#5B2A86 !important}
/* ═══════════════════════════════════════════════════════════════
🎨 PHẦN 3 — Mystery Box images, Upgrade GV, Bachi 3D,
Quest icons polish, Tip card
═══════════════════════════════════════════════════════════════ */
/* ═══ MYSTERY BOX — v5: thu nhỏ card + center trong cell + full-bleed ảnh hộp + multiply xóa nền ═══ */
.mb-card{
aspect-ratio:1/1 !important;
min-height:0 !important;
max-height:160px !important;
max-width:160px !important;
width:100% !important;
padding:0 !important;
position:relative !important;
overflow:hidden !important;
border-radius:14px !important;
/* Center card trong grid cell */
justify-self:center !important;
margin:0 auto !important;
}
.mb-card .mb-icon{display:none !important}
/* Ảnh hộp full-bleed, không có khung trắng inset, multiply để hoà với màu card */
.mb-card::after{
content:'' !important;
position:absolute !important;
top:0 !important;left:0 !important;right:0 !important;bottom:30% !important;
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
z-index:1 !important;
pointer-events:none !important;
/* mix-blend-mode multiply: trắng × tinted = tinted → nền trắng tan biến */
mix-blend-mode:multiply !important;
filter:contrast(1.08) saturate(1.15);
}
.mb-card.tier-bronze{
background:linear-gradient(135deg,#FFE4D6,#FFCDB4) !important;
border:2px solid #B57340 !important;
box-shadow:0 6px 18px rgba(181,115,64,.3) !important;
}
.mb-card.tier-bronze::after{
background-image:url('assets/watercolor/hf_20260517_112631_a1cca133-57d9-4416-b277-f8dbc6aa5fe2.png') !important;
}
.mb-card.tier-silver{
background:linear-gradient(135deg,#F4F6F8,#E5E9ED) !important;
border:2px solid #8B95A1 !important;
box-shadow:0 6px 18px rgba(139,149,161,.3) !important;
}
.mb-card.tier-silver::after{
background-image:url('assets/watercolor/hf_20260517_112635_493fa085-ad34-4dc0-a6c0-f3fe0ec6244e.png') !important;
}
.mb-card.tier-gold{
background:linear-gradient(135deg,#FFF7E8,#E8C68A) !important;
border:2px solid #D69E2E !important;
box-shadow:0 6px 18px rgba(214,158,46,.3) !important;
}
.mb-card.tier-gold::after{
background-image:url('assets/watercolor/hf_20260517_112638_9fc6d13f-f244-4932-8318-48a5add0d279.png') !important;
}
/* Tăng name overlay z-index above pseudo-element */
.mb-card .mb-name{z-index:3 !important}
.mb-card .mb-count{z-index:3 !important}
/* Name overlay ở bottom với dark gradient */
.mb-card .mb-name{
position:absolute !important;
bottom:0 !important;left:0 !important;right:0 !important;
margin:0 !important;
padding:18px 8px 10px !important;
background:linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 60%, transparent 100%) !important;
color:#fff !important;
text-shadow:0 2px 6px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5) !important;
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:15px !important;
letter-spacing:-.2px !important;
z-index:2;
text-align:center;
}
/* Count badge ở top-right với contrast cao */
.mb-card .mb-count{
background:rgba(0,0,0,.75) !important;
color:#fff !important;
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:12px !important;
border:1.5px solid rgba(255,255,255,.5) !important;
z-index:3 !important;
}
/* Hover effect */
.mb-card:hover{transform:translateY(-3px);transition:transform .25s}
.mb-card.tier-bronze:hover{box-shadow:0 10px 26px rgba(181,115,64,.45) !important}
.mb-card.tier-silver:hover{box-shadow:0 10px 26px rgba(139,149,161,.45) !important}
.mb-card.tier-gold:hover{box-shadow:0 10px 26px rgba(214,158,46,.45) !important}
/* ═══ UPGRADE GV CARD — ẨN theo yêu cầu user ═══ */
#xsbHomeUpgradeGVCard{
display:none !important;
}
/* GIỮ NGUYÊN style cũ bên dưới (vô hiệu hoá bằng display:none ở trên) */
#xsbHomeUpgradeGVCard-DISABLED{
background:url('assets/watercolor/hf_20260517_093623_4e079083-ff46-4607-82e5-5d5b308f1d97.png') right center / contain no-repeat,
linear-gradient(135deg, #D4C8E8 0%, #C8A8E0 50%, #9D7FB8 100%) !important;
background-blend-mode:normal !important;
border-radius:22px !important;
padding:0 !important;
position:relative !important;
overflow:hidden !important;
min-height:120px !important;
box-shadow:0 8px 24px rgba(157,127,184,.3) !important;
}
#xsbHomeUpgradeGVCard::after{
content:'';position:absolute;inset:0;
background:linear-gradient(to right, rgba(120,80,160,.92) 0%, rgba(120,80,160,.6) 50%, rgba(120,80,160,.2) 75%, transparent 90%) !important;
pointer-events:none;z-index:0;
}
#xsbHomeUpgradeGVCard > div{position:relative;z-index:1;padding:18px 24px}
#xsbHomeUpgradeGVCard > div > div[style*="font-size:38px"]{display:none !important}
#xsbHomeUpgradeGVCard div[style*="font-size:11px"]{
color:rgba(255,255,255,.95) !important;
text-shadow:0 1px 3px rgba(0,0,0,.4) !important;
font-weight:800 !important;letter-spacing:1.5px !important;
}
#xsbHomeUpgradeGVCard div[style*="font-size:18px"]{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:22px !important;
color:#fff !important;
text-shadow:0 2px 5px rgba(0,0,0,.45) !important;
letter-spacing:-.3px !important;
}
#xsbHomeUpgradeGVCard div[style*="font-size:12px"]{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
font-weight:500 !important;
color:rgba(255,255,255,.95) !important;
text-shadow:0 1px 3px rgba(0,0,0,.4) !important;
}
#xsbHomeUpgradeGVCard div[style*="font-size:22px"]{color:#fff !important;font-weight:800 !important;text-shadow:0 1px 3px rgba(0,0,0,.4)}
/* ═══ BACHI 3D card — Watercolor Bachi mini ═══ */
#xsbBachi3dCard{
background:linear-gradient(135deg, #FFF7E8 0%, #FFE4D6 50%, #FFCDB4 100%) !important;
border:2px solid rgba(232,198,138,.6) !important;
border-radius:20px !important;
box-shadow:0 6px 18px rgba(232,180,140,.25) !important;
overflow:hidden !important;
position:relative !important;
}
#xsbBachi3dCard::before{
content:'';
position:absolute;
left:14px;top:50%;transform:translateY(-50%);
width:62px;height:62px;
background:url('assets/watercolor/hf_20260517_094940_423c79c4-5549-442a-8e57-d4b8dc9deb53.png') center / 200px auto no-repeat;
background-position:80% center;
border-radius:50%;
border:3px solid rgba(255,255,255,.7);
box-shadow:0 4px 12px rgba(60,40,20,.18);
z-index:2;pointer-events:none;
}
#xsbBachi3dToggle{
padding:14px 18px 14px 88px !important;
position:relative;z-index:1;
}
#xsbBachi3dToggle > div:first-child{display:none !important} /* hide emoji 🐙 */
#xsbBachi3dToggle div[style*="font-size:11px"]{
color:#C04820 !important;
font-weight:800 !important;
letter-spacing:1.5px !important;
}
#xsbBachi3dToggle div[style*="font-size:16px"]{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:18px !important;
color:#3D3528 !important;
letter-spacing:-.3px !important;
}
#xsbBachi3dToggle div[style*="font-size:11px;color:#92400E"]{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
color:#7A3C1A !important;
font-weight:500 !important;
}
#xsbBachi3dChevron{color:#C04820 !important}
/* ═══ Daily Tip card — Watercolor ═══ */
.card[style*="fffde7"]{
background:linear-gradient(135deg, #FFF7E8 0%, #FFE4D6 50%, #FFCDB4 100%) !important;
border:2px solid rgba(232,198,138,.6) !important;
border-radius:20px !important;
box-shadow:0 6px 18px rgba(232,198,138,.25) !important;
}
.card[style*="fffde7"] h2{
color:#C04820 !important;
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
letter-spacing:-.3px !important;
}
#dailyTip{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
font-size:15px !important;
color:#5C5446 !important;
line-height:1.7 !important;
}
/* ═══ Hộp may mắn section title (strong) ═══ */
#dailyHubCard #mbInventory strong,
#dailyHubCard strong[style*="margin-bottom:6px"]{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
color:#3D3528 !important;
font-size:15px !important;
}
/* ═══ Refresh chip + streak chip in daily hub ═══ */
#dailyHubCard div[style*="rgba(255,217,61"]{
background:rgba(232,198,138,.25) !important;
color:#5C5446 !important;
border:1px solid rgba(232,198,138,.5) !important;
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
}
#checkinStreak{
background:linear-gradient(135deg,#E07856,#F4B860) !important;
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
box-shadow:0 4px 12px rgba(224,120,86,.35) !important;
}
/* ═══ Quest icon SVG cleanup + size ═══ */
.quest-icon{
font-size:30px !important;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.quest-progress{font-family:'Crimson Pro',serif !important;font-style:italic !important}
/* ═══ Combo display + Toast — Watercolor ═══ */
#comboDisplay{
background:linear-gradient(135deg,#E07856,#F4B860) !important;
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
border-radius:18px !important;
box-shadow:0 8px 24px rgba(224,120,86,.45) !important;
}
/* ═══ Tournament/Weekly cards (đã hidden) ═══ */
#xsbTournamentCard, #xsbWeeklyCard{display:none !important}
/* ═══════════════════════════════════════════════════════════════
🎨 PHẦN 4 — SUB-PAGES (Soroban hub, Pet, Memory, Reading,
Battle, Tournament, Results, Avatar, Story, Abacus)
═══════════════════════════════════════════════════════════════ */
/* ═══ Page Soroban hub hero — ẨN banner "Soroban — Tính nhẩm Nhật Bản" theo yêu cầu user ═══ */
#page-soroban .xsb-hero-3d{
display:none !important;
}
/* GIỮ NGUYÊN style cũ bên dưới (vô hiệu hoá bằng display:none ở trên) */
#page-soroban .xsb-hero-3d-DISABLED{
background:url('assets/watercolor/hf_20260517_100505_40064a17-ad6c-4f6a-91c3-bb53ca6352e1.png') center/cover no-repeat !important;
position:relative !important;
min-height:260px !important;
padding:0 !important;
border-radius:24px !important;
box-shadow:0 12px 32px rgba(232,180,140,.3) !important;
overflow:hidden !important;
color:#1F2937 !important;
}
#page-soroban .xsb-hero-3d::after{
content:'';position:absolute;inset:0;
background:linear-gradient(to bottom, rgba(255,247,232,.55) 0%, rgba(255,247,232,.3) 50%, rgba(255,247,232,.85) 100%);
pointer-events:none;z-index:1;
border-radius:24px;
}
#page-soroban .xsb-hero-3d > *{position:relative;z-index:2}
#page-soroban .xsb-hero-3d > svg{display:none !important}
#page-soroban .xsb-hero-3d > div[style*="position:absolute"]{display:none !important}
#page-soroban .xsb-hero-3d h2{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
color:#1F2937 !important;
text-shadow:0 1px 2px rgba(255,255,255,.7) !important;
font-size:32px !important;
letter-spacing:-.5px !important;
text-align:center !important;
padding:24px 28px 6px !important;
margin:0 !important;
line-height:1.15 !important;
}
#page-soroban .xsb-hero-3d p{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
color:#3D3528 !important;
text-shadow:0 1px 1px rgba(255,255,255,.6) !important;
font-weight:500 !important;
font-size:16px !important;
text-align:center !important;
padding:0 30px !important;
margin:0 0 8px !important;
}
/* Hint text "💡 Mỗi câu có nút hình hạt" */
#page-soroban .xsb-hero-3d > div[style*="margin-top"]{
text-align:center !important;
color:#5C5446 !important;
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
}
/* ═══ Page Soroban — 6 cards full-bleed ═══ */
/* All 6 cards: hc-blue, hc-yellow, hc-green, hc-red, hc-purple, hc-violet */
#page-soroban .home-card.hc-blue,
#page-soroban .home-card.hc-yellow,
#page-soroban .home-card.hc-green,
#page-soroban .home-card.hc-red,
#page-soroban .home-card.hc-purple,
#page-soroban .home-card.hc-violet{
background-size:cover !important;
background-position:center !important;
background-repeat:no-repeat !important;
background-color:transparent !important;
position:relative !important;
overflow:hidden !important;
min-height:170px !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
justify-content:flex-end !important;
align-items:center !important;
text-align:center !important;
border-radius:18px !important;
border:2px solid rgba(255,255,255,.4) !important;
}
/* Override animation shimmer ::before của .hc-purple/.hc-violet (Home cards) */
#page-soroban .home-card.hc-blue::before,
#page-soroban .home-card.hc-yellow::before,
#page-soroban .home-card.hc-green::before,
#page-soroban .home-card.hc-red::before,
#page-soroban .home-card.hc-purple::before,
#page-soroban .home-card.hc-violet::before{
content:'' !important;
position:absolute !important;
inset:0 !important;
/* v154.282: lớp phủ SÁNG (trắng) ở đáy để chữ ĐEN đọc rõ */
background:transparent !important;
z-index:1 !important;
animation:none !important;
pointer-events:none !important;
top:0 !important;left:0 !important;width:100% !important;height:100% !important;
}
/* Image assignments — CHÍNH XÁC theo nội dung từng card */
/* 1. Bàn tính ảo (hc-blue) → abacus */
#page-soroban .home-card.hc-blue{
background-image:url('assets/watercolor/hf_20260517_100505_40064a17-ad6c-4f6a-91c3-bb53ca6352e1.png') !important;
}
/* 2. Flash Ảo tính (hc-yellow) → anzan numbers */
#page-soroban .home-card.hc-yellow{
background-image:url('assets/watercolor/hf_20260517_100509_ec2974ab-bf7a-4846-a972-a8fd421db366.png') !important;
}
/* 3. In đề luyện tập (hc-green) → A4 worksheet */
#page-soroban .home-card.hc-green{
background-image:url('assets/watercolor/hf_20260517_120615_967927c4-f43d-44ef-b48f-210651b1c3d1.png') !important;
}
/* 4. Thách đấu (hc-red) → shield */
#page-soroban .home-card.hc-red{
background-image:url('assets/watercolor/hf_20260517_120618_4239006f-d8f7-48e0-8e80-d0420dbbcc88.png') !important;
}
/* 5. Đấu 1v1 real-time (hc-purple) → battle versus */
#page-soroban .home-card.hc-purple{
background-image:url('assets/watercolor/hf_20260517_100518_324c3ce5-7f96-48f9-8ba4-4f110b74d824.png') !important;
}
/* 6. Giải đấu tuần (hc-violet) → trophy/podium */
#page-soroban .home-card.hc-violet{
background-image:url('assets/watercolor/hf_20260517_100522_a3642e81-9ea2-4abc-810c-d5890767da8b.png') !important;
}
/* Hide SVG icon trong tất cả page-soroban cards */
#page-soroban .home-card .hc-icon{display:none !important}
/* v154.282: Flash Ảo tính (hc-yellow) lên ĐẦU lưới Chế độ luyện tập (cả page-soroban & hub) */
#page-soroban .home-cards-grid-3 .home-card.hc-yellow,
#sorobanHubModal .home-card.hc-yellow{order:-1 !important}
/* Text overlay style — Crimson Pro white, bottom */
#page-soroban .home-card .hc-title{
position:relative !important;z-index:2 !important;
font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important; /* v154.284: sans-serif ĐẬM RÕ thay serif */
font-weight:900 !important;
font-size:18px !important; /* v154.287: nhỏ lại — tránh xuống hàng/che ảnh */
letter-spacing:.2px !important;
text-transform:uppercase !important;
color:#0a0a0a !important;
-webkit-text-stroke:0 !important;
text-shadow:0 1px 4px rgba(255,255,255,.92), 0 0 2px rgba(255,255,255,.85) !important; /* VIỀN TRẮNG quanh chữ → rõ trên ảnh sáng */
margin:0 !important;padding:0 12px 4px !important;
background:transparent !important;
}
#page-soroban .home-card .hc-sub{
position:relative !important;z-index:2 !important;
font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif !important;
font-size:11px !important; /* v154.287 nhỏ lại */
color:#111 !important;
text-shadow:0 1px 3px rgba(255,255,255,.9), 0 0 2px rgba(255,255,255,.8) !important;
font-weight:800 !important;
-webkit-text-stroke:0 !important;
padding:0 12px 12px !important;
background:transparent !important;
}
/* Badge override trong Thách đấu card */
#page-soroban .home-card.hc-red #sorobanHubChBadge{
z-index:3 !important;
}
/* ═══ Card "Khoá học Soroban — 10 bài có hướng dẫn" (xsbOpenLessonsModal) ═══ */
/* Banner ngang full-bleed thay thế orange gradient */
#page-soroban .home-card[onclick*="xsbOpenLessonsModal"]{
background:url('assets/watercolor/hf_20260517_134237_27f05801-9c1a-4591-b0cf-75b0b34bf1f9.png') center/cover no-repeat !important;
background-color:#F5DEB3 !important;
position:relative !important;
overflow:hidden !important;
min-height:170px !important;
padding:24px 28px !important;
border:2px solid rgba(232,180,140,.5) !important;
border-radius:18px !important;
box-shadow:0 6px 20px rgba(255,140,40,.18) !important;
color:#fff !important;
}
/* Dark gradient overlay từ trái sang phải để chữ trắng đọc rõ */
#page-soroban .home-card[onclick*="xsbOpenLessonsModal"]::before{
content:'' !important;
position:absolute !important;
inset:0 !important;
top:0 !important;left:0 !important;width:100% !important;height:100% !important;
background:linear-gradient(90deg, rgba(60,30,10,.78) 0%, rgba(60,30,10,.55) 50%, rgba(60,30,10,.25) 100%) !important;
z-index:1 !important;
pointer-events:none !important;
animation:none !important;
}
/* Ẩn 📚 emoji bên trái (đã có sách trong ảnh rồi) */
#page-soroban .home-card[onclick*="xsbOpenLessonsModal"] > div:first-child{
display:none !important;
}
/* Khối text giữa (flex:1) — đẩy lên trên overlay */
#page-soroban .home-card[onclick*="xsbOpenLessonsModal"] > div:nth-child(2){
position:relative !important;
z-index:2 !important;
flex:1 !important;
}
/* Title — Crimson Pro 22px chữ trắng đậm */
#page-soroban .home-card[onclick*="xsbOpenLessonsModal"] > div:nth-child(2) > div:first-child{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:22px !important;
letter-spacing:-.3px !important;
color:#fff !important;
text-shadow:0 2px 6px rgba(0,0,0,.55) !important;
}
/* Description */
#page-soroban .home-card[onclick*="xsbOpenLessonsModal"] > div:nth-child(2) > div:nth-child(2){
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
font-size:14px !important;
color:rgba(255,255,255,.95) !important;
opacity:1 !important;
text-shadow:0 1px 3px rgba(0,0,0,.55) !important;
line-height:1.5 !important;
margin-top:6px !important;
}
/* Hint "💡 Mỗi câu thực hành..." */
#page-soroban .home-card[onclick*="xsbOpenLessonsModal"] > div:nth-child(2) > div:nth-child(3){
font-size:12px !important;
color:#FFD93D !important;
opacity:1 !important;
text-shadow:0 1px 2px rgba(0,0,0,.55) !important;
margin-top:8px !important;
font-weight:600 !important;
}
/* Play button ▶️ bên phải — to và nổi bật */
#page-soroban .home-card[onclick*="xsbOpenLessonsModal"] > div:last-child{
position:relative !important;
z-index:2 !important;
font-size:44px !important;
filter:drop-shadow(0 3px 8px rgba(0,0,0,.4)) !important;
flex-shrink:0 !important;
}
/* ═══ Tournament leaderboard — chữ đen rõ ràng theo yêu cầu user ═══ */
/* MAX specificity để override rule color:#fff ở line 4705 */
#page-tournament > .card:first-child #trnBody,
#page-tournament > .card:first-child #trnBody *{
color:#1a1a1a !important;
text-shadow:none !important;
}
/* Row: trắng đặc, viền nét, chữ đen rõ */
#page-tournament > .card:first-child #trnBody .trn-row{
background:#fff !important;
background-color:#fff !important;
border:1.5px solid #D5D9DD !important;
box-shadow:0 1px 3px rgba(0,0,0,.06) !important;
color:#1a1a1a !important;
}
#page-tournament > .card:first-child #trnBody .trn-row .trn-name,
#page-tournament > .card:first-child #trnBody .trn-row .trn-name *{
color:#1a1a1a !important;
font-weight:700 !important;
text-shadow:none !important;
}
#page-tournament > .card:first-child #trnBody .trn-row .trn-pts{
color:#0277BD !important;
font-weight:800 !important;
text-shadow:none !important;
}
#page-tournament > .card:first-child #trnBody .trn-row .trn-pts span{
color:#555 !important;
}
/* Row "me" — highlight vàng nhạt nhưng vẫn chữ đen */
#page-tournament > .card:first-child #trnBody .trn-row.me{
background:linear-gradient(90deg,#FFF8E1,#FFFEF7) !important;
background-color:#FFF8E1 !important;
border-color:#FFD93D !important;
}
#page-tournament > .card:first-child #trnBody .trn-row.me .trn-name,
#page-tournament > .card:first-child #trnBody .trn-row.me .trn-name *,
#page-tournament > .card:first-child #trnBody .trn-row.me .trn-pts{
color:#1a1a1a !important;
}
/* PRO badge giữ màu vàng/cam dù bị override */
#page-tournament > .card:first-child #trnBody .trn-row .trn-name span[style*="FFD700"],
#page-tournament > .card:first-child #trnBody .trn-row .trn-name span[style*="linear-gradient"]{
color:#fff !important;
}
/* Update timestamp / refresh label — chữ đen */
#page-tournament > .card:first-child #trnLastUpdate{
color:#5D4037 !important;
text-shadow:none !important;
}
/* Empty state message — đen */
#page-tournament #trnBody > div[style*="text-align:center"]{
color:#1a1a1a !important;
background:#fff !important;
border-radius:12px !important;
padding:30px !important;
}
/* Vị trí của user khi không nằm trong top — chữ đen */
#page-tournament > .card:first-child #trnBody > div:not(.trn-row):not([style*="display:flex"]){
color:#1a1a1a !important;
}
/* ═══ Hero cho các page khác — dùng class selector ═══ */
/* Page Pet — Card hero gradient watercolor đẹp (pet đã chroma-key transparent thật) */
#page-pet .card[style*="FFF3E0"]{
background:linear-gradient(135deg,#FFF7E8 0%,#FFE4D6 50%,#FFCDB4 100%) !important;
border:2px solid rgba(232,180,140,.6) !important;
position:relative !important;
border-radius:22px !important;
}
#page-pet .card[style*="FFF3E0"]::after{display:none !important}
/* Pet stage wrapper trong suốt — không cần white solid */
#petStageWrapper{
background:transparent !important;
}
/* Page Memory hub — banner gradient */
#page-memory > .card:first-child,
.card.xsb-hero-3d[style*="memory"]{
background:url('assets/watercolor/hf_20260517_095808_3e654c78-3ea2-47a9-aff8-6341359b28d6.png') center/cover no-repeat !important;
position:relative !important;
min-height:220px !important;
border-radius:22px !important;
overflow:hidden !important;
}
/* Page Reading hub — banner gradient */
#page-reading > .card:first-child,
.card.xsb-hero-3d[style*="reading"]{
background:url('assets/watercolor/hf_20260517_095811_e3a22b11-416c-4922-8776-5a648c994c39.png') center/cover no-repeat !important;
position:relative !important;
min-height:220px !important;
border-radius:22px !important;
overflow:hidden !important;
}
/* Page Tournament — first card với gold trophy bg */
#page-tournament > .card:first-child{
background:url('assets/watercolor/hf_20260517_100522_a3642e81-9ea2-4abc-810c-d5890767da8b.png') center 20%/cover no-repeat !important;
border:2px solid rgba(232,198,138,.6) !important;
position:relative !important;
min-height:200px !important;
border-radius:22px !important;
overflow:hidden !important;
}
#page-tournament > .card:first-child::after{
content:'';position:absolute;inset:0;
background:linear-gradient(to top, rgba(120,80,30,.6) 0%, rgba(120,80,30,.2) 50%, transparent 80%);
pointer-events:none;z-index:0;
}
#page-tournament > .card:first-child > *{position:relative;z-index:1;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.4)}
/* Page Results — first card */
#page-results > .card:first-child{
background:url('assets/watercolor/hf_20260517_100526_b3761b77-6ed2-4d32-a798-4f0e862259cb.png') center/cover no-repeat !important;
border:2px solid rgba(232,198,138,.6) !important;
position:relative !important;
min-height:200px !important;
border-radius:22px !important;
overflow:hidden !important;
}
#page-results > .card:first-child::after{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg, rgba(255,247,232,.92) 0%, rgba(255,247,232,.55) 45%, rgba(255,247,232,.15) 80%, transparent 100%);
pointer-events:none;z-index:0;
}
#page-results > .card:first-child > *{position:relative;z-index:1}
#page-results > .card:first-child h2{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
color:#3D3528 !important;
text-shadow:0 1px 2px rgba(255,255,255,.6) !important;
}
/* Page Story — first card với castle bg */
#page-story > .card:first-child, #page-story{
position:relative !important;
}
#page-story > div:first-child, #page-story > .card:first-child{
background:url('assets/watercolor/hf_20260517_110005_eb39eb14-764e-4b4f-bd70-6a0f1c27356f.png') center/cover no-repeat !important;
border:2px solid rgba(157,127,184,.5) !important;
position:relative !important;
min-height:200px !important;
border-radius:22px !important;
overflow:hidden !important;
}
/* Page Avatar — first card với palette bg */
#page-avatar > .card:first-child{
background:url('assets/watercolor/hf_20260517_110009_d6198a84-0436-4d69-a2d1-66a8586d0ca0.png') center/cover no-repeat !important;
border:2px solid rgba(157,127,184,.5) !important;
position:relative !important;
min-height:180px !important;
border-radius:22px !important;
overflow:hidden !important;
}
#page-avatar > .card:first-child::after{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg, rgba(255,247,232,.88) 0%, rgba(255,247,232,.5) 45%, transparent 75%);
pointer-events:none;z-index:0;
}
#page-avatar > .card:first-child > *{position:relative;z-index:1}
#page-avatar > .card:first-child h2{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
color:#5B2A86 !important;
text-shadow:0 1px 2px rgba(255,255,255,.6) !important;
}
/* Page Abacus — BỎ hình nền (page tương tác, không phải hub) */
/* (đã removed) */
/* Page Anzan — BỎ hình nền (page tương tác, không phải hub) */
/* (đã removed) */
/* ═══ Universal styling cho sub-pages — Crimson Pro, card watercolor ═══ */
.page:not(#page-home) > .card h2,
.page:not(#page-home) > div > .card h2,
.page > div > h2,
.page > div > h3{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
letter-spacing:-.3px !important;
}
/* Universal .home-card watercolor adjustment cho all pages */
.page:not(#page-home) .home-card{
font-family:'Be Vietnam Pro',sans-serif;
}
.page:not(#page-home) .home-card .hc-title{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
}
/* All h2 inside .card (cards in pages) — Crimson Pro */
.page .card > h2:first-child,
.page .card h2{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
letter-spacing:-.3px !important;
}
/* Section title h3 ribbon style */
.page h3{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
letter-spacing:-.3px !important;
}
/* ═══ QUEST ICONS — Watercolor mini (auto-replaced by JS) ═══ */
.quest-icon.xsb-watercolor{
width:54px !important;
height:54px !important;
font-size:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.quest-icon.xsb-watercolor img{
width:100%;height:100%;object-fit:contain;
filter:drop-shadow(0 3px 6px rgba(60,40,20,.15));
mix-blend-mode:multiply;
}
/* ═══ XÓA NỀN TRẮNG BẰNG MIX-BLEND-MODE — force apply mọi pet img ═══ */
.xsb-mb-injected-img,
.day-reward img,
.quest-icon.xsb-watercolor img{
mix-blend-mode:multiply !important;
}
/* Pet images — force apply + REMOVE filter (filter tạo stacking context isolate blend-mode) */
/* v154.94: ảnh pet (pet_N_baby/adult/legend.png) đã TÁCH NỀN TRONG SUỐT sẵn → blend NORMAL (KHÔNG multiply, kẻo con vật bị nhân tối) + filter none (tránh stacking-context cô lập blend) */
#petDisplay img,
#petDisplay div img,
#petDisplay div div img,
.pet-stage img,
.pet-stage > div > img,
#petStageWrapper img,
#petStageWrapper div img,
#petPickerGrid img,
#petPickerGrid div div img,
.pet-leaderboard img{
mix-blend-mode:normal !important;
filter:none !important;
background:transparent !important;
isolation:auto !important;
}
/* Ảnh watercolor CLOUDFRONT cũ (quest/checkin/mystery box…) vẫn dùng multiply để nền trắng tự tan */
img[src*="cloudfront.net"][src*="hf_20260517_12"]{
mix-blend-mode:multiply !important;
filter:none !important;
background:transparent !important;
isolation:auto !important;
}
/* Drop-shadow ở wrapper — ảnh pet trong suốt nên bóng đổ theo HÌNH CON VẬT (nổi đẹp như con giáp cũ) */
#petDisplay{filter:drop-shadow(0 6px 14px rgba(60,40,20,.18)) !important}
#petStageWrapper{filter:drop-shadow(0 4px 10px rgba(60,40,20,.12)) !important}
/* Pet picker grid wrapper — bg lavender soft thay vì white để mix-blend-mode có backdrop colored */
#petPickerGrid > div{
background:linear-gradient(135deg,#FFF7E8 0%,#FFE4D6 100%) !important;
}
#petPickerGrid > div > div{
background:linear-gradient(135deg,#FFF7E8 0%,#FFE4D6 100%) !important;
}
/* ═══ Hide notification banner mặc định nếu cũ ═══ */
#xsbNotifBanner{
background:linear-gradient(135deg,#FFF7E8,#FFCDB4) !important;
border:1.5px solid rgba(232,198,138,.6) !important;
color:#3D3528 !important;
font-family:'Crimson Pro',serif !important;
}
/* ═══ Toast watercolor ═══ */
#toast,.toast{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
border-radius:14px !important;
}
/* ═══════════════════════════════════════════════════════════════
💜 BACHI AI CHAT — bạn đồng hành AI
═══════════════════════════════════════════════════════════════ */
#bachiChatModal{
display:none;align-items:center;justify-content:center;
}
#bachiChatModal.show{display:flex !important}
#bachiChatBox{
max-width:min(520px, 95vw) !important;
width:95vw !important;
height:min(85vh, 720px);
max-height:85vh;
padding:0 !important;
border-radius:24px !important;
background:linear-gradient(180deg,#FFFBF3 0%, #FFF7E8 100%) !important;
border:2px solid rgba(179,157,219,.4) !important;
box-shadow:0 20px 60px rgba(80,40,120,.3) !important;
display:flex;flex-direction:column;overflow:hidden;
}
/* v154.20: Mở rộng Bachi chat modal trên desktop để không bị chật */
@media (min-width:1024px){
#bachiChatBox{
max-width:720px !important;
width:80vw !important;
height:min(86vh, 780px);
}
}
@media (min-width:1280px){
#bachiChatBox{
max-width:840px !important;
width:70vw !important;
height:min(88vh, 840px);
}
/* Tăng font size chat messages cho dễ đọc */
#bachiChatMessages{padding:22px 20px 10px !important; gap:14px !important}
.bachi-msg .bachi-bubble{font-size:15px !important; line-height:1.55 !important; padding:12px 16px !important}
#bachiChatTitle{font-size:20px !important}
#bachiChatStatus{font-size:12px !important}
#bachiChatAvatar{width:48px !important; height:48px !important; font-size:28px !important}
#bachiChatHeader{padding:16px 22px !important}
}
@media (min-width:1440px){
#bachiChatBox{
max-width:960px !important;
width:68vw !important;
}
#bachiChatMessages{padding:26px 24px 12px !important}
.bachi-msg .bachi-bubble{font-size:16px !important; padding:14px 18px !important}
}
@media (min-width:1680px){
#bachiChatBox{
max-width:1080px !important;
width:64vw !important;
}
}
#bachiChatHeader{
background:linear-gradient(135deg,#B39DDB 0%,#9575CD 100%);
padding:14px 18px;
display:flex;align-items:center;gap:12px;
border-bottom:2px solid rgba(255,255,255,.3);
color:#fff;
flex-shrink:0;
}
#bachiChatAvatar{
width:42px;height:42px;
background:rgba(255,255,255,.25);
border:2px solid rgba(255,255,255,.5);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:24px;
flex-shrink:0;
animation:bachiBob 3s ease-in-out infinite;
}
@keyframes bachiBob{
0%,100%{transform:translateY(0) rotate(-2deg)}
50%{transform:translateY(-3px) rotate(2deg)}
}
#bachiChatTitle{
font-family:'Crimson Pro',serif !important;
font-weight:700;font-size:18px;line-height:1.1;
color:#fff;margin:0;
}
#bachiChatStatus{
font-size:11px;color:rgba(255,255,255,.85);
margin-top:2px;
display:flex;align-items:center;gap:4px;
}
#bachiChatStatus::before{
content:'';width:6px;height:6px;border-radius:50%;
background:#4ADE80;display:inline-block;
box-shadow:0 0 6px #4ADE80;
}
#bachiChatClear,#bachiChatClose{
background:rgba(255,255,255,.18);
border:none;color:#fff;
width:34px;height:34px;border-radius:50%;
font-size:16px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:background .2s;
flex-shrink:0;
}
#bachiChatClose{font-size:22px;font-weight:300;line-height:1}
#bachiChatClear:hover,#bachiChatClose:hover{background:rgba(255,255,255,.32)}
#bachiChatMessages{
flex:1;
overflow-y:auto;
padding:16px 14px 8px;
display:flex;flex-direction:column;gap:10px;
scroll-behavior:smooth;
}
.bachi-msg{
display:flex;gap:8px;align-items:flex-end;
animation:bachiSlide .25s ease;
}
@keyframes bachiSlide{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
.bachi-msg.bachi-msg-user{flex-direction:row-reverse}
.bachi-msg-bubble{
max-width:75%;
padding:10px 14px;
border-radius:18px;
font-family:'Crimson Pro',serif !important;
font-size:15px;
line-height:1.45;
word-wrap:break-word;
white-space:pre-wrap;
}
.bachi-msg.bachi-msg-bachi .bachi-msg-bubble{
background:linear-gradient(135deg,#FFF7E8,#FFEDD8);
color:#3D3528;
border:1.5px solid rgba(232,198,138,.5);
border-bottom-left-radius:6px;
}
.bachi-msg.bachi-msg-user .bachi-msg-bubble{
background:linear-gradient(135deg,#B39DDB,#9575CD);
color:#fff;
border-bottom-right-radius:6px;
}
.bachi-msg-avatar{
width:30px;height:30px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:16px;
flex-shrink:0;
background:rgba(179,157,219,.18);
}
.bachi-msg.bachi-msg-user .bachi-msg-avatar{display:none}
.bachi-msg-typing .bachi-msg-bubble{
background:rgba(255,247,232,.7);
font-style:italic;color:#7A6651;
}
.bachi-msg-typing .bachi-msg-bubble::after{
content:'…';animation:bachiDots 1.2s infinite;
}
@keyframes bachiDots{
0%,20%{content:'.'}
40%{content:'..'}
60%,100%{content:'...'}
}
.bachi-msg-error .bachi-msg-bubble{
background:linear-gradient(135deg,#FEE2E2,#FECACA) !important;
color:#991B1B !important;
border-color:#FCA5A5 !important;
}
#bachiChatSuggestions{
display:flex;flex-wrap:wrap;gap:6px;
padding:0 14px 10px;
}
#bachiChatSuggestions.hide{display:none}
.bachi-chip{
background:rgba(179,157,219,.15);
border:1.5px solid rgba(179,157,219,.4);
color:#5B2A86;
border-radius:18px;
padding:6px 12px;
font-family:'Crimson Pro',serif !important;
font-size:13px;
cursor:pointer;
transition:all .2s;
}
.bachi-chip:hover{
background:rgba(179,157,219,.3);
border-color:#7E57C2;
transform:translateY(-1px);
}
#bachiChatForm{
display:flex;gap:8px;
padding:10px 12px;
background:#FFFBF3;
border-top:1.5px solid rgba(232,198,138,.4);
flex-shrink:0;
}
#bachiChatInput{
flex:1;
padding:12px 16px;
border:2px solid rgba(179,157,219,.4);
border-radius:22px;
background:#fff;
font-family:'Crimson Pro',serif !important;
font-size:15px;
color:#3D3528;
outline:none;
transition:border-color .15s;
}
#bachiChatInput:focus{border-color:#9575CD;box-shadow:0 0 0 3px rgba(149,117,205,.18)}
#bachiChatInput::placeholder{color:#9B8A7A;font-style:italic}
#bachiChatSend{
width:46px;height:46px;
background:linear-gradient(135deg,#9575CD,#7E57C2);
color:#fff;
border:none;border-radius:50%;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
transition:transform .15s, box-shadow .15s;
box-shadow:0 4px 12px rgba(149,117,205,.4);
}
#bachiChatSend:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(149,117,205,.55)}
#bachiChatSend:active{transform:translateY(0)}
#bachiChatSend:disabled{background:#CBD5E0;cursor:not-allowed;box-shadow:none}
#bachiChatLimitHint{
text-align:center;
padding:4px 12px 10px;
font-size:11px;
color:#7A6651;
font-style:italic;
background:#FFFBF3;
}
#bachiChatLimitCount{font-weight:700;color:#7E57C2}
/* Mobile fullscreen */
@media(max-width:640px){
#bachiChatBox{
width:100vw !important;
max-width:100vw !important;
height:100vh;max-height:100vh;
border-radius:0 !important;
}
}
/* ═══════════════════════════════════════════════════════════════
📱 MOBILE RESPONSIVE — Memory Hub modal + mega cards
═══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
/* Memory Hub modal: force 2 cols, reset card span để không bị narrow */
#memoryHubModal .home-cards-grid,
#sorobanHubModal .home-cards-grid{
grid-template-columns:repeat(2,1fr) !important;
gap:10px !important;
}
/* Priority card "Major System" span 4 → fix lại span 2 (full row mobile) */
#memoryHubModal .home-card[style*="grid-column:span 4"]{
grid-column:span 2 !important;
min-height:140px !important;
}
/* Tất cả card khác trong modal: bắt buộc 1 col cell */
#memoryHubModal .home-card:not([style*="grid-column"]),
#sorobanHubModal .home-card:not([style*="grid-column"]){
grid-column:span 1 !important;
min-height:130px !important;
padding:14px 10px !important;
}
/* Footer card "Xem đầy đủ 13 môn" span full */
#memoryHubModal .home-card[style*="margin-top:12px"]{
grid-column:span 2 !important;
}
/* Title + sub trong card nhỏ — không bị wrap broken */
#memoryHubModal .home-card .hc-title,
#sorobanHubModal .home-card .hc-title{
font-size:13px !important;
line-height:1.25 !important;
word-break:keep-all !important;
overflow-wrap:break-word !important;
}
#memoryHubModal .home-card .hc-sub,
#sorobanHubModal .home-card .hc-sub{
font-size:11px !important;
line-height:1.3 !important;
}
}
@media(max-width:380px){
#memoryHubModal .home-card,
#sorobanHubModal .home-card{
padding:12px 8px !important;
min-height:120px !important;
}
#memoryHubModal .home-card .hc-icon,
#sorobanHubModal .home-card .hc-icon{
height:46px !important;
}
#memoryHubModal .home-card .hc-icon svg{
width:42px !important;height:42px !important;
}
}
/* Mega card text mobile (mascot full visibility đã handle ở section trên) */
@media(max-width:640px){
.home-mega-card .hmc-title-big{font-size:24px !important;padding:0 12px !important}
.home-mega-card .hmc-sub-big{font-size:13px !important;padding:0 12px !important}
}
@media(max-width:380px){
.home-mega-card .hmc-title-big{font-size:22px !important}
}
/* ═══════════════════════════════════════════════════════════════
🎨 FOOTER ACCORDION — 4 sections collapse/expand on click
═══════════════════════════════════════════════════════════════ */
.site-footer-accordion .site-footer-grid{
grid-template-columns:1fr !important;
gap:8px !important;
max-width:900px !important;
}
.footer-acc{
background:#FFF7E8 !important; /* v154.98: khớp màu kem nền app (bỏ gradient vàng đậm) */
border:1px solid rgba(180,150,110,.20) !important;
border-radius:14px !important;
padding:0 !important;
box-shadow:0 2px 8px rgba(120,60,30,.06) !important;
overflow:hidden !important;
transition:all .25s ease !important;
}
.footer-acc[open]{
background:linear-gradient(135deg,#FFFBF3,#FFF7E8) !important;
box-shadow:0 4px 14px rgba(120,60,30,.1) !important;
border-color:rgba(232,180,140,.7) !important;
}
.footer-acc summary{
list-style:none !important;
cursor:pointer !important;
padding:14px 20px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
user-select:none !important;
position:relative !important;
transition:background .2s !important;
}
.footer-acc summary::-webkit-details-marker{display:none !important}
.footer-acc summary::marker{display:none !important}
.footer-acc summary:hover{
background:rgba(232,180,140,.12) !important;
}
.footer-acc summary h4{
margin:0 !important;
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
font-size:16px !important;
color:#3D3528 !important;
letter-spacing:.02em !important;
text-transform:none !important;
flex:1 !important;
}
/* Chevron arrow phải */
.footer-acc summary::after{
content:'▾' !important;
font-size:20px !important;
color:#8B4513 !important;
transition:transform .25s ease !important;
margin-left:12px !important;
flex-shrink:0 !important;
}
.footer-acc[open] summary::after{
transform:rotate(180deg) !important;
}
/* Content area khi mở */
.footer-acc > p,
.footer-acc > ul{
padding:0 20px 16px !important;
margin:0 !important;
animation:footerAccSlide .3s ease !important;
}
@keyframes footerAccSlide{
from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:translateY(0)}
}
.footer-acc .biz-info{
font-family:'Crimson Pro',serif !important;
font-size:14px !important;
color:#5D4037 !important;
line-height:1.6 !important;
}
.footer-acc .biz-info strong{color:#3D3528 !important;font-weight:700 !important}
.footer-acc ul{list-style:none !important}
.footer-acc ul li{
margin-bottom:5px !important;
font-size:13px !important;
font-family:'Crimson Pro',serif !important;
}
.footer-acc ul li a{
color:#5D4037 !important;
text-decoration:none !important;
transition:color .15s !important;
}
.footer-acc ul li a:hover{
color:#E64A19 !important;
text-decoration:underline !important;
}
/* Desktop: 2 cột (vẫn accordion, chỉ chia layout) */
@media (min-width:768px){
.site-footer-accordion .site-footer-grid{
grid-template-columns:1fr 1fr !important;
gap:12px !important;
}
}
/* ═══════════════════════════════════════════════════════════════
🎨 PHẦN 5 — LOGIN SCREEN watercolor redesign
═══════════════════════════════════════════════════════════════ */
/* ─── Overlay background ─── */
#loginOverlay{
background:url('assets/login_bg.jpg?v=331') center/cover no-repeat, linear-gradient(135deg,#EAF6FF 0%,#F3FBEF 100%) !important;
}
/* ─── Shell wrapper ─── */
#loginOverlay .login-shell{
background:transparent !important;
border:none !important;
border-radius:28px !important;
box-shadow:none !important;
overflow:visible !important;
}
/* ─── LEFT HERO PANEL — watercolor full-bleed, chữ ĐEN đậm theo yêu cầu user ─── */
#loginOverlay .login-hero{
/* v154.50: bỏ ảnh nền watercolor (có bạch tuộc + bàn tính) — chỉ còn gradient kem-đào dịu, để mascot Bachi mới nổi bật */
background:transparent !important;
position:relative !important;
color:#1a1a1a !important;
}
/* Vô hiệu hoá overlay ::before cũ — giữ ảnh watercolor rõ ràng */
#loginOverlay .login-hero::before{
background:none !important;
background-image:none !important;
}
#loginOverlay .login-hero > *{position:relative !important;z-index:1 !important}
#loginOverlay .login-hero-brand{margin-bottom:24px !important}
/* Title — chữ ĐEN đậm với halo trắng phía sau cho contrast */
#loginOverlay .login-hero-title{
font-family:'Crimson Pro',serif !important;
font-weight:800 !important;
font-size:38px !important;
line-height:1.15 !important;
letter-spacing:-.02em !important;
color:#0a0a0a !important;
text-shadow:
0 0 8px rgba(255,255,255,.95),
0 0 16px rgba(255,255,255,.8),
0 1px 2px rgba(255,255,255,.9) !important;
}
#loginOverlay .login-hero-title .accent{
background:linear-gradient(135deg,#B85C00,#8B3A00) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
font-style:italic !important;
font-weight:800 !important;
filter:drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 0 8px rgba(255,255,255,.7)) !important;
}
/* Tagline — chữ ĐEN TO theo yêu cầu user, halo trắng cho contrast */
#loginOverlay .login-hero-tagline,
#loginOverlay .login-hero-tagline *{
font-family:'Crimson Pro',serif !important;
font-size:20px !important;
color:#000 !important;
font-weight:700 !important;
text-shadow:
0 0 8px rgba(255,255,255,.98),
0 0 16px rgba(255,255,255,.85),
0 1px 2px rgba(255,255,255,.95) !important;
line-height:1.6 !important;
}
#loginOverlay .login-hero-tagline em{
font-style:italic !important;
font-weight:800 !important;
color:#000 !important;
}
#loginOverlay .login-hero-tagline strong{
color:#000 !important;
font-weight:900 !important;
}
/* Feature bullets — pill cream đặc, chữ đen */
#loginOverlay .login-hero-feat{
background:rgba(255,251,243,.92) !important;
border:1.5px solid rgba(232,160,100,.5) !important;
border-radius:14px !important;
padding:10px 14px !important;
backdrop-filter:blur(4px) !important;
-webkit-backdrop-filter:blur(4px) !important;
font-family:'Crimson Pro',serif !important;
font-size:15px !important;
color:#1a1a1a !important;
text-shadow:none !important;
box-shadow:0 3px 10px rgba(120,60,30,.12) !important;
}
#loginOverlay .login-hero-feat strong{
color:#8B3A00 !important;
font-weight:800 !important;
}
#loginOverlay .login-hero-feat .feat-icon{
background:linear-gradient(135deg,#FFCDB4,#FFAB91) !important;
border:1.5px solid rgba(232,160,100,.6) !important;
width:38px !important;height:38px !important;
font-size:20px !important;
color:#1a1a1a !important;
}
/* Stats footer — chữ đen với halo */
#loginOverlay .login-hero-stats{
border-top:2px solid rgba(255,251,243,.6) !important;
padding-top:18px !important;
margin-top:18px !important;
}
#loginOverlay .login-hero-stat .num{
font-family:'Crimson Pro',serif !important;
font-weight:800 !important;
color:#0a0a0a !important;
text-shadow:
0 0 8px rgba(255,255,255,.95),
0 0 14px rgba(255,255,255,.8) !important;
font-size:30px !important;
}
#loginOverlay .login-hero-stat .lbl{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
font-weight:600 !important;
color:#1a1a1a !important;
text-shadow:
0 0 6px rgba(255,255,255,.9),
0 0 10px rgba(255,255,255,.7) !important;
}
/* ─── RIGHT FORM PANEL ─── */
#loginOverlay .login-form-side{
background:transparent !important;
}
#loginOverlay .login-box h2{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
color:#3D3528 !important;
font-size:30px !important;
letter-spacing:-.01em !important;
}
#loginOverlay .login-sub{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
color:#7A6651 !important;
font-size:15px !important;
}
/* Language picker — đồng bộ watercolor */
#xsbLangPickerInline{
background:rgba(232,198,138,.18) !important;
border:1px solid rgba(232,198,138,.4) !important;
box-shadow:none !important;
}
#xsbLangBtnVIInline,#xsbLangBtnENInline{
color:#5D4037 !important;
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
}
#xsbLangBtnVIInline[aria-pressed="true"],
#xsbLangBtnENInline[aria-pressed="true"],
#xsbLangBtnVIInline.active,
#xsbLangBtnENInline.active{
background:linear-gradient(135deg,#FFCDB4,#FFAB91) !important;
color:#5D2A0A !important;
box-shadow:0 2px 6px rgba(255,140,80,.3) !important;
}
/* Section title "Chọn tài khoản (6):" */
#loginOverlay #loginAccList > div:first-child,
#loginOverlay div[style*="font-size:13px"][style*="font-weight:700"],
#loginOverlay div[style*="color:var(--gray-700)"]{
font-family:'Crimson Pro',serif !important;
color:#5D4037 !important;
}
/* Account grid */
#loginOverlay .acc-grid{
gap:12px !important;
}
/* Account card — watercolor cream với border ấm */
#loginOverlay .acc-card{
background:linear-gradient(135deg,#FFF7E8,#FFEDD8) !important;
border:2px solid rgba(232,198,138,.55) !important;
border-radius:16px !important;
padding:14px 8px !important;
transition:all .25s !important;
box-shadow:0 3px 10px rgba(180,120,60,.1) !important;
}
#loginOverlay .acc-card:hover{
background:linear-gradient(135deg,#FFEDD8,#FFCDB4) !important;
border-color:#FF9F43 !important;
transform:translateY(-3px) !important;
box-shadow:0 8px 20px rgba(255,140,40,.25) !important;
}
/* Account name */
#loginOverlay .acc-card > div[style*="font-weight"]{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
color:#3D3528 !important;
font-size:14px !important;
}
/* Account role label "Người dùng" */
#loginOverlay .acc-card > div[style*="color:var(--muted)"],
#loginOverlay .acc-card > div[style*="font-size:11px"]{
font-family:'Crimson Pro',serif !important;
font-style:italic !important;
color:#7A6651 !important;
}
/* Role badge: Học sinh / Admin / Thử */
#loginOverlay .acc-card span[style*="background"][style*="border-radius"]{
border-radius:10px !important;
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
letter-spacing:.02em !important;
}
/* ─── 2 bottom buttons ─── */
#loginOverlay .btn.big,
#loginOverlay button[onclick*="newAccount"],
#loginOverlay button[onclick*="signIn"],
#loginOverlay button[onclick*="ssoLogin"]{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
letter-spacing:-.01em !important;
border-radius:14px !important;
padding:14px 20px !important;
font-size:16px !important;
box-shadow:0 6px 18px rgba(0,0,0,.12) !important;
}
/* "Đăng ký tài khoản mới" — teal-mint watercolor gradient */
#loginOverlay button[onclick*="newAccount"],
#loginOverlay button[style*="linear-gradient"][style*="00897B"],
#loginOverlay button[style*="linear-gradient"][style*="26A69A"]{
background:linear-gradient(135deg,#7FCEC2 0%,#4DB6AC 50%,#26A69A 100%) !important;
color:#fff !important;
text-shadow:0 1px 3px rgba(0,0,0,.2) !important;
}
/* "Đăng nhập thiết bị mới" — purple watercolor gradient */
#loginOverlay button[onclick*="ssoLogin"],
#loginOverlay button[style*="linear-gradient"][style*="6A1B9A"],
#loginOverlay button[style*="linear-gradient"][style*="9C27B0"]{
background:linear-gradient(135deg,#B39DDB 0%,#9575CD 50%,#7E57C2 100%) !important;
color:#fff !important;
text-shadow:0 1px 3px rgba(0,0,0,.2) !important;
}
/* PIN input area watercolor */
#loginQuickPin .login-sep,
#loginForgotPin .login-sep{
font-family:'Crimson Pro',serif !important;
font-weight:700 !important;
color:#5D4037 !important;
}
.pin-dot{
border:2px solid rgba(232,198,138,.5) !important;
background:#FFF7E8 !important;
}
.pin-dot.filled{
background:linear-gradient(135deg,#FFAB91,#FF7043) !important;
border-color:#E64A19 !important;
}
.login-inp{
border:2px solid rgba(232,198,138,.5) !important;
border-radius:14px !important;
background:#FFFBF3 !important;
font-family:'Crimson Pro',serif !important;
}
.login-inp:focus{
border-color:#FF9F43 !important;
box-shadow:0 0 0 3px rgba(255,159,67,.2) !important;
}
/* ════════════════════════════════════════════════════════════════
v154.177 — GIAO DIỆN "QUÁI VẬT DỄ THƯƠNG" (uitheme-monster)
HS chọn trong Cài đặt ảo tính → class trên . Cực nhiều màu,
sinh động: nền cầu vồng pastel chuyển động + monster trang trí.
Nhân vật: thiết kế gốc 100% (original), không dựa nhân vật có sẵn.
════════════════════════════════════════════════════════════════ */
body.uitheme-monster{
--primary-500:#8B5CF6; --primary-400:#A78BFA; --primary-600:#7C3AED; --primary-700:#6D28D9;
--primary-50:#F5F0FF; --primary-100:#EDE5FF; --primary-200:#DDD0FF; --primary-300:#C4AEFF;
--accent-500:#FF4D8D; --accent-600:#E83A78; --accent-700:#C92B63; --accent-50:#FFF0F6; --accent-100:#FFDCEA; --accent-200:#FFB8D4;
--yellow:#FFD93D;
background:linear-gradient(135deg,#FFE5F4 0%,#EDE5FF 22%,#DFF4FF 45%,#E2FFEF 68%,#FFF6D9 88%,#FFE5F4 100%);
background-size:380% 380%;
animation:xsbMonsterBg 26s ease-in-out infinite;
}
@keyframes xsbMonsterBg{ 0%{background-position:0% 30%} 50%{background-position:100% 70%} 100%{background-position:0% 30%} }
@media (prefers-reduced-motion: reduce){ body.uitheme-monster{ animation:none } }
/* Lớp trang trí cố định — KHÔNG chặn thao tác, không đụng layout */
#xsbMonsterDecor{ display:none; }
body.uitheme-monster #xsbMonsterDecor{ display:block; position:fixed; inset:0; pointer-events:none; z-index:1; }
/* confetti chấm màu rải nhẹ */
#xsbMonsterDecor .mzConfetti{ position:absolute; inset:0; opacity:.5;
background-image:
radial-gradient(circle 4px at 12% 18%, #FF4D8D 98%, transparent),
radial-gradient(circle 3px at 78% 9%, #8B5CF6 98%, transparent),
radial-gradient(circle 4px at 91% 41%, #00C9A7 98%, transparent),
radial-gradient(circle 3px at 6% 64%, #FFB020 98%, transparent),
radial-gradient(circle 4px at 68% 87%, #38BDF8 98%, transparent),
radial-gradient(circle 3px at 33% 94%, #FF6B35 98%, transparent),
radial-gradient(circle 3px at 49% 7%, #F472B6 98%, transparent),
radial-gradient(circle 4px at 24% 43%, #A3E635 98%, transparent);
}
#xsbMonsterDecor .mz{ position:absolute; filter:drop-shadow(0 6px 14px rgba(124,58,237,.25)); }
#xsbMonsterDecor .mz svg, #xsbMonsterDecor .mz img{ width:100%; height:auto; display:block; }
#xsbMonsterDecor .mzMascot{ right:10px; bottom:8px; width:118px; animation:xsbMzFloat 4.2s ease-in-out infinite; }
#xsbMonsterDecor .mzFly{ left:8px; top:64px; width:86px; animation:xsbMzSway 6.5s ease-in-out infinite; }
#xsbMonsterDecor .mzPeek{ right:38%; top:-6px; width:74px; animation:xsbMzPeek 9s ease-in-out infinite; }
#xsbMonsterDecor .mzStar{ width:26px; animation:xsbMzTwinkle 2.6s ease-in-out infinite; }
@keyframes xsbMzFloat{ 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-14px) rotate(3deg)} }
@keyframes xsbMzSway{ 0%,100%{transform:translate(0,0) rotate(-6deg)} 50%{transform:translate(14px,18px) rotate(7deg)} }
@keyframes xsbMzPeek{ 0%,12%,100%{transform:translateY(-86%)} 22%,58%{transform:translateY(-12%)} 70%{transform:translateY(-86%)} }
@keyframes xsbMzTwinkle{ 0%,100%{opacity:.25; transform:scale(.8) rotate(0)} 50%{opacity:1; transform:scale(1.15) rotate(18deg)} }
/* mắt chớp cho SVG placeholder */
#xsbMonsterDecor .mzBlink{ transform-origin:center; animation:xsbMzBlink 4.8s infinite; }
@keyframes xsbMzBlink{ 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.08)} }
@media (max-width:768px){
#xsbMonsterDecor .mzMascot{ width:84px; right:6px; bottom:64px; }
#xsbMonsterDecor .mzFly{ width:60px; top:54px; }
#xsbMonsterDecor .mzPeek{ display:none; }
}
@media (prefers-reduced-motion: reduce){ #xsbMonsterDecor .mz, #xsbMonsterDecor .mzBlink{ animation:none } }
/* Theme màn ẢO TÍNH thứ 7: "Quái vật" — nền tím đêm + đốm neon, số mint RÕ */
.anzan-display.anztheme-monster{
background:
radial-gradient(circle 110px at 85% 88%, rgba(255,77,141,.28), transparent 70%),
radial-gradient(circle 90px at 12% 14%, rgba(0,201,167,.25), transparent 70%),
radial-gradient(circle 140px at 78% 18%, rgba(139,92,246,.35), transparent 72%),
linear-gradient(150deg,#241447 0%,#1A0E36 55%,#120A26 100%) !important;
--anz-num-color:#9CFFE0;
}
.anzan-display.anztheme-monster .anz-pbar-fill{ background:linear-gradient(90deg,#FF4D8D,#FFD93D,#00C9A7)!important; }
/* Hàng chọn giao diện app trong panel cài đặt */
.uitheme-row{ display:flex; gap:8px; flex-wrap:wrap }
.uitheme-btn{ display:flex; align-items:center; gap:7px; padding:7px 13px; border:2px solid var(--gray-200);
border-radius:12px; background:#fff; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer; color:var(--gray-700) }
.uitheme-btn .sw{ width:22px; height:22px; border-radius:7px; display:inline-block }
.uitheme-btn.active{ border-color:#8B5CF6; background:#F5F0FF; color:#6D28D9; box-shadow:0 2px 8px rgba(139,92,246,.25) }
/* ── v154.177b: HUB "LỚP HỌC QUÁI VẬT" (page-mzhub, bố cục theo mockup user duyệt) ── */
#page-mzhub{padding:0}
.mzh-app{max-width:1340px;margin:0 auto;display:grid;grid-template-columns:212px 1fr;gap:13px;padding:4px}
.mzh-side{background:linear-gradient(180deg,#4A3575,#3A2960);border-radius:22px;padding:13px 11px;display:flex;flex-direction:column;gap:7px;box-shadow:0 10px 30px rgba(74,53,117,.35)}
.mzh-logo{background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.15);border-radius:15px;padding:9px;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.mzh-logo img{width:40px;height:40px;object-fit:contain}
.mzh-logo b{color:#fff;font-size:14px;line-height:1.25}
.mzh-mi{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:12px;color:#D9CFF2;font-weight:700;font-size:13px;cursor:pointer;border:1.5px solid transparent;transition:.15s;background:transparent;font-family:inherit;text-align:left;width:100%}
.mzh-mi img{width:27px;height:27px;object-fit:contain}
.mzh-mi:hover{background:rgba(255,255,255,.10);transform:translateX(3px)}
.mzh-mi.act{background:#fff;color:#5B3CC4;border-color:#C4AEFF}
.mzh-pts{margin-top:auto;background:rgba(255,255,255,.1);border-radius:13px;padding:9px;text-align:center;color:#fff;font-size:12px;font-weight:700}
.mzh-pts img{width:28px;vertical-align:middle}
.mzh-pts b{font-size:18px;color:#FFD93D}
.mzh-main{display:flex;flex-direction:column;gap:11px;min-width:0}
.mzh-hdr{display:flex;gap:9px;align-items:stretch;flex-wrap:wrap}
.mzh-hc{background:rgba(255,255,255,.92);border-radius:15px;padding:7px 13px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 14px rgba(124,58,237,.12)}
.mzh-hc img.mzh-av{width:42px;height:42px;object-fit:contain}
.mzh-nm b{font-size:13.5px}.mzh-nm div{font-size:10.5px;color:#8B79B8;font-weight:700}
.mzh-exp{width:120px;height:8px;background:#E9E2F8;border-radius:9px;overflow:hidden;margin-top:3px}
.mzh-exp i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#8B5CF6,#FF4D8D);border-radius:9px;transition:width .6s}
.mzh-cur{font-weight:900;font-size:14.5px;color:#3D2E5C}
.mzh-cur img{width:24px;height:24px;object-fit:contain;vertical-align:-6px;margin-right:3px}
.mzh-scenewrap{display:grid;grid-template-columns:1fr 244px;gap:11px}
.mzh-scene{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 12px 34px rgba(74,53,117,.25);aspect-ratio:2400/1792;background:#F7EFE2}
.mzh-scene .mzh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mzh-chalk{position:absolute;left:50%;top:15.5%;transform:translateX(-58%) rotate(-.5deg);width:34%;text-align:center;color:#EFF7EE;font-weight:800;font-size:clamp(9px,1.6vw,22px);line-height:1.45;text-shadow:0 1px 0 rgba(0,0,0,.25);font-family:'Comic Sans MS','Segoe Print',cursive;pointer-events:none}
.mzh-mon{position:absolute;cursor:pointer;transform-origin:50% 90%;filter:drop-shadow(0 8px 12px rgba(60,40,20,.25))}
.mzh-mon img{width:100%;display:block;pointer-events:none}
.mzh-mon:hover{filter:drop-shadow(0 8px 16px rgba(124,58,237,.5)) brightness(1.05)}
.mzh-tag{position:absolute;left:50%;bottom:-7%;transform:translateX(-50%);background:#5B3CC4;color:#fff;font-size:clamp(8px,1vw,12px);font-weight:800;padding:2px 11px;border-radius:99px;border:2px solid #C4AEFF;opacity:0;transition:.25s;white-space:nowrap}
.mzh-mon.show .mzh-tag{opacity:1}
.mzh-sw1{animation:mzhSway 3.8s ease-in-out infinite}
.mzh-sw2{animation:mzhSway 4.6s ease-in-out infinite .6s}
.mzh-sw3{animation:mzhBob 3.2s ease-in-out infinite .3s}
.mzh-sw4{animation:mzhSway 5.2s ease-in-out infinite 1s}
.mzh-sw5{animation:mzhBob 4.1s ease-in-out infinite .8s}
@keyframes mzhSway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.8deg)}}
@keyframes mzhBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.2%)}}
.mzh-mon.boing{animation:mzhBoing .55s cubic-bezier(.3,2.4,.4,1)!important}
@keyframes mzhBoing{0%{transform:scale(1)}35%{transform:scale(1.14,.86)}65%{transform:scale(.92,1.1)}100%{transform:scale(1)}}
.mzh-zzz{position:absolute;font-size:clamp(9px,1.4vw,18px);font-weight:900;color:#8B5CF6;animation:mzhZ 3s ease-in-out infinite;opacity:.85;text-shadow:0 1px 2px #fff;pointer-events:none}
@keyframes mzhZ{0%{transform:translateY(0) scale(.8);opacity:0}30%{opacity:.9}100%{transform:translateY(-30px) scale(1.2);opacity:0}}
.mzh-burst{position:absolute;pointer-events:none;font-size:clamp(12px,1.8vw,24px);animation:mzhBu .8s ease-out forwards;z-index:5}
@keyframes mzhBu{0%{transform:translateY(0) scale(.6);opacity:1}100%{transform:translateY(-44px) scale(1.4);opacity:0}}
.mzh-pan{display:flex;flex-direction:column;gap:11px}
.mzh-pc{background:rgba(255,255,255,.94);border-radius:16px;padding:11px;box-shadow:0 6px 18px rgba(124,58,237,.13)}
.mzh-pc h4{font-size:12.5px;background:linear-gradient(90deg,#8B5CF6,#FF4D8D);color:#fff;border-radius:9px;padding:5px 9px;margin:-1px -1px 8px;display:flex;align-items:center;gap:6px}
.mzh-pc h4 img{width:20px;height:20px}
.mzh-ev{display:flex;align-items:center;gap:8px;padding:6px 3px;font-size:12px;font-weight:700;color:#3D2E5C}
.mzh-ev img{width:30px;height:30px;object-fit:contain}
.mzh-ev small{display:block;color:#8B79B8;font-weight:600}
.mzh-qbar{height:9px;background:#E9E2F8;border-radius:9px;overflow:hidden;margin:6px 0}
.mzh-qbar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#00C9A7,#A3E635);border-radius:9px;transition:width .6s}
.mzh-rew{font-size:12px;font-weight:800;display:flex;align-items:center;gap:4px;color:#3D2E5C}
.mzh-rew img{width:18px;height:18px}
.mzh-c3{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.mzh-cc{background:rgba(255,255,255,.94);border-radius:16px;padding:10px;display:flex;align-items:center;gap:10px;box-shadow:0 6px 18px rgba(124,58,237,.13);cursor:pointer;transition:.18s;border:0;font-family:inherit;text-align:left}
.mzh-cc:hover{transform:translateY(-3px)}
.mzh-cc img{width:64px;height:64px;object-fit:contain;animation:mzhBob 3.6s ease-in-out infinite}
.mzh-cc b{font-size:13.5px;color:#3D2E5C}.mzh-cc small{color:#8B79B8;font-weight:700;display:block;margin-top:2px;font-size:11px}
.mzh-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.mzh-bc{background:rgba(255,255,255,.94);border-radius:16px;padding:11px;text-align:center;box-shadow:0 6px 18px rgba(124,58,237,.13);transition:.18s;cursor:pointer;border:0;font-family:inherit}
.mzh-bc:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(124,58,237,.22)}
.mzh-bc img{width:54px;height:54px;object-fit:contain}
.mzh-bc b{display:block;font-size:13px;margin:5px 0 2px;color:#3D2E5C}
.mzh-bc p{font-size:11px;color:#8B79B8;line-height:1.4;min-height:30px;margin:0}
.mzh-bc span{display:inline-block;border-radius:9px;padding:6px 14px;font-weight:800;font-size:11.5px;color:#fff;margin-top:6px}
.mzh-bbar{background:linear-gradient(90deg,#4A3575,#5B3CC4);border-radius:16px;padding:8px;display:flex;justify-content:space-around;box-shadow:0 8px 22px rgba(74,53,117,.3);flex-wrap:wrap}
.mzh-bi{display:flex;align-items:center;gap:7px;color:#EDE5FF;font-weight:800;font-size:12.5px;cursor:pointer;padding:6px 12px;border-radius:11px;transition:.15s;border:0;background:transparent;font-family:inherit}
.mzh-bi img{width:27px;height:27px;object-fit:contain}
.mzh-bi:hover{background:rgba(255,255,255,.14);transform:translateY(-2px)}
/* Nút vào hub (trong decor, chỉ hiện khi theme monster) */
#xsbMzHubBtn{position:fixed;top:64px;right:10px;z-index:1200;pointer-events:auto;display:flex;align-items:center;gap:7px;background:linear-gradient(135deg,#8B5CF6,#FF4D8D);color:#fff;font-weight:800;font-size:13px;border:2px solid #fff;border-radius:99px;padding:8px 14px;box-shadow:0 6px 18px rgba(139,92,246,.45);cursor:pointer;font-family:inherit;animation:mzhBob 3.5s ease-in-out infinite}
#xsbMzHubBtn img{width:24px;height:24px}
@media(max-width:1000px){
.mzh-app{grid-template-columns:1fr}
.mzh-side{flex-direction:row;flex-wrap:wrap}.mzh-pts{margin:0;flex:1}
.mzh-mi{width:auto;flex:1;min-width:96px;justify-content:center}
.mzh-scenewrap{grid-template-columns:1fr}
.mzh-cards{grid-template-columns:repeat(2,1fr)}
.mzh-c3{grid-template-columns:1fr}
#xsbMzHubBtn{top:auto;bottom:74px;right:8px;font-size:12px;padding:7px 11px}
}
/* ── v154.179: HUB chỉnh theo góp ý — full width, ẩn header/footer khi ở hub, mobile gọn, role-aware ── */
.mzh-app{max-width:1760px;width:100%}
body.mz-on-hub header{display:none!important}
body.mz-on-hub .site-footer{display:none!important}
body.mz-on-hub #hsProUpgradeBanner{display:none!important}
.mzh-pan .mzh-pc:last-child{flex:1}
.mzh-r-t,.mzh-r-a{display:none}
.mzh-role-badge{display:inline-block;font-size:9.5px;font-weight:900;padding:1px 8px;border-radius:99px;margin-left:5px;vertical-align:2px;background:#EDE5FF;color:#6D28D9}
@media (max-width:1000px){
.mzh-side{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px;padding:8px;border-radius:16px;align-items:center}
.mzh-logo{display:none}
.mzh-pts{display:none}
.mzh-mi{flex:0 0 auto;width:auto;min-width:0;flex-direction:column;gap:3px;padding:6px 9px;font-size:10px;border-radius:11px;text-align:center}
.mzh-mi img{width:24px;height:24px}
.mzh-mi:hover{transform:none}
.mzh-bi{font-size:11px;padding:5px 9px}
.mzh-bi img{width:24px;height:24px}
}
/* ── v154.181: hub — card nhiều màu sinh động + sửa đè + modal Quản Trị trong hub ── */
body.mz-on-hub #xsbMzHubBtn{display:none!important}
body.mz-on-hub #xsbMonsterDecor .mzMascot,
body.mz-on-hub #xsbMonsterDecor .mzFly,
body.mz-on-hub #xsbMonsterDecor .mzPeek{display:none!important}
.mzh-hc{background:linear-gradient(135deg,#FFFDF7,#F6F0FF);border:2px solid #E4D6FF}
.mzh-pan .mzh-pc:nth-of-type(1){background:linear-gradient(160deg,#F3EFFF,#FDFBFF);border:2px solid #D9C8FF}
.mzh-pan .mzh-pc:nth-of-type(2){background:linear-gradient(160deg,#E7FBF2,#FBFFFD);border:2px solid #A9EBD2}
.mzh-pan .mzh-pc:nth-of-type(3){background:linear-gradient(160deg,#FFF6E0,#FFFDF6);border:2px solid #FFE08A}
.mzh-pan .mzh-pc:nth-of-type(4){background:linear-gradient(160deg,#FFEDF5,#FFFAFC);border:2px solid #FFC2DC}
.mzh-c3 .mzh-cc:nth-of-type(1){background:linear-gradient(135deg,#F3EFFF,#FFFFFF);border:2px solid #D9C8FF}
.mzh-c3 .mzh-cc:nth-of-type(2){background:linear-gradient(135deg,#FFF1E3,#FFFFFF);border:2px solid #FFCF9E}
.mzh-c3 .mzh-cc:nth-of-type(3){background:linear-gradient(135deg,#FFEDF5,#FFFFFF);border:2px solid #FFC2DC}
.mzh-cards .mzh-bc:nth-of-type(1){background:linear-gradient(160deg,#F3EFFF,#FFFFFF);border:2px solid #D9C8FF}
.mzh-cards .mzh-bc:nth-of-type(2){background:linear-gradient(160deg,#E7FBF2,#FFFFFF);border:2px solid #A9EBD2}
.mzh-cards .mzh-bc:nth-of-type(3){background:linear-gradient(160deg,#E5F4FF,#FFFFFF);border:2px solid #9DD6FF}
.mzh-cards .mzh-bc:nth-of-type(4){background:linear-gradient(160deg,#FFF6E0,#FFFFFF);border:2px solid #FFE08A}
.mzh-bbar .mzh-bi:nth-of-type(odd):hover{background:rgba(255,77,141,.25)}
#mzAdminModal{display:none;position:fixed;inset:0;background:rgba(40,22,80,.6);z-index:99990;align-items:flex-start;justify-content:center;padding:18px;overflow-y:auto}
#mzAdminModal.show{display:flex}
.mz-admin-box{background:linear-gradient(180deg,#FFFDF7,#F6F0FF);border-radius:20px;max-width:1280px;width:100%;margin:auto;box-shadow:0 24px 60px rgba(0,0,0,.35);border:3px solid #D9C8FF}
.mz-admin-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 18px;background:linear-gradient(90deg,#8B5CF6,#FF4D8D);border-radius:17px 17px 0 0;color:#fff}
.mz-admin-head img{width:30px;height:30px}
.mz-admin-head b{font-size:16px;flex:1}
.mz-admin-close{border:2px solid #fff;background:rgba(255,255,255,.18);color:#fff;font-weight:800;font-size:13px;border-radius:99px;padding:6px 16px;cursor:pointer;font-family:inherit}
.mz-admin-body{padding:14px}
.mz-admin-body #adminPanelCard{display:block!important;box-shadow:none;margin:0}
/* ── v154.182: tách 2 thanh nhóm rõ ràng (góp ý: đừng trộn mục lớp học với vui chơi) ── */
.mzh-bgrp{display:flex;align-items:center;color:#FFD93D;font-weight:900;font-size:12.5px;padding:6px 10px;white-space:nowrap}
.mzh-bbar2{background:linear-gradient(90deg,#C2376E,#E8552E)}
.mzh-bbar2 .mzh-bgrp{color:#FFE9A8}
@media (max-width:768px){ .mzh-bgrp{width:100%;justify-content:center;padding:2px} }
/* ── v154.183: 4 nút header vuông ĐỀU NHAU + icon vẽ tay ── */
.mzh-hico{width:50px;height:50px;padding:0!important;justify-content:center;cursor:pointer;flex:0 0 50px}
.mzh-hico img{width:27px;height:27px;object-fit:contain}
.mzh-hico:hover{transform:scale(1.1)}
@media (max-width:768px){ .mzh-hico{width:44px;height:44px;flex-basis:44px} .mzh-hico img{width:24px;height:24px} }
/* ════ v154.185: HUB "LỚP HỌC QUÁI VẬT" TOÀN MÀN HÌNH (mzc-*) ════ */
#page-mzhub.active{padding:0;animation:none}
.mzc-stage{position:fixed;inset:0;overflow:hidden;background:linear-gradient(160deg,#3a2960,#241447 60%,#1a0e36)}
.mzc-room{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;perspective:1300px}
/* nền lấp đầy ưu tiên phần dưới (sàn+thầy+con) khi cắt */
.mzc-bg{object-position:center 38%}
.mzc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mzc-eye{position:absolute;top:12.5%;width:2.3vw;height:2.3vw;background:radial-gradient(circle at 40% 33%,#fff 0 30%,#2c2150 31% 60%,#15102e 61%);border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.3);z-index:3;pointer-events:none;animation:mzcBlink 4.2s infinite}
.mzc-eye.l{left:42.5%}.mzc-eye.r{left:48.1%}
@keyframes mzcBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.mzc-tongue{position:absolute;top:16%;left:46.4%;transform:translateX(-50%);width:2.8vw;height:6vw;background:linear-gradient(180deg,#FF6B9D,#E8447D);border-radius:0 0 50% 50%/0 0 70% 70%;transform-origin:top center;z-index:3;pointer-events:none;box-shadow:0 3px 6px rgba(0,0,0,.18);animation:mzcTongue 3.4s ease-in-out infinite}
.mzc-tongue::after{content:"";position:absolute;left:50%;top:10%;width:10%;height:55%;background:rgba(120,20,60,.22);transform:translateX(-50%);border-radius:9px}
@keyframes mzcTongue{0%,52%,100%{transform:translateX(-50%) scaleY(.12)}68%,86%{transform:translateX(-50%) scaleY(1)}}
.mzc-top{position:absolute;top:8px;left:8px;right:8px;display:flex;gap:6px;align-items:center;z-index:50;flex-wrap:wrap}
.mzc-sp{flex:1}
.mzc-chip{display:flex;align-items:center;gap:5px;background:rgba(255,253,247,.94);border:2px solid #D9C8FF;border-radius:99px;padding:5px 12px;font-size:13px;font-weight:800;color:#3D2E5C;box-shadow:0 4px 12px rgba(60,40,110,.25);font-family:inherit}
.mzc-chip img{width:24px;height:24px;object-fit:contain}
.mzc-badge{font-size:10px;background:#EDE5FF;color:#6D28D9;border-radius:99px;padding:1px 7px}
.mzc-txtbtn,.mzc-ico{cursor:pointer}
.mzc-ico{width:40px;height:40px;justify-content:center;padding:0}
.mzc-ico:hover,.mzc-txtbtn:hover{transform:scale(1.06)}
.mzc-fm{position:absolute;z-index:10;cursor:pointer;border:0;background:transparent;padding:0;font-family:inherit;transform-style:preserve-3d;transition:transform .15s ease-out}
.mzc-fm>img{width:100%;display:block;animation:mzcIdle 3.8s ease-in-out infinite;pointer-events:none;filter:drop-shadow(0 9px 9px rgba(60,40,20,.26)) drop-shadow(0 3px 3px rgba(60,40,20,.18))}
.mzc-fm:nth-child(even)>img{animation-duration:4.6s}
@keyframes mzcIdle{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-2.6%) rotate(1.3deg)}}
.mzc-fn{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);white-space:nowrap;border:2.5px solid #fff;border-radius:99px;padding:3px 12px;font-size:clamp(9px,.95vw,14px);font-weight:900;color:#fff;box-shadow:0 5px 14px rgba(0,0,0,.3);z-index:11;pointer-events:none}
.mzc-fm:hover .mzc-fn{transform:translateX(-50%) scale(1.08)}
.mzc-big{z-index:8}
.mzc-big .mzc-fn{font-size:clamp(11px,1.15vw,16px);padding:5px 18px}
.mzc-back{z-index:7}
.mzc-back .mzc-fn{bottom:auto;top:-8px;z-index:40}
.mzc-burst{position:absolute;pointer-events:none;font-size:clamp(13px,1.8vw,24px);animation:mzcBu .8s ease-out forwards;z-index:60}
@keyframes mzcBu{0%{transform:translateY(0) scale(.6);opacity:1}100%{transform:translateY(-44px) scale(1.5);opacity:0}}
.mzc-mm{position:fixed;inset:0;background:rgba(30,16,60,.55);z-index:90;display:none;align-items:center;justify-content:center;padding:16px}
.mzc-mm.show{display:flex}
.mzc-box{background:linear-gradient(180deg,#FFFDF7,#F3EBFF);border:3px solid #D9C8FF;border-radius:24px;padding:18px;max-width:440px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.42)}
.mzc-box .mzc-mas{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(60,40,20,.3))}
.mzc-box h3{font-size:18px;color:#5B3CC4;margin:6px 0 14px}
.mzc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.mzc-grid button{border:2px solid #D9C8FF;background:#fff;border-radius:15px;padding:13px 8px;font-weight:800;font-size:13px;color:#3D2E5C;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:5px}
.mzc-grid button:hover{background:#F5F0FF;transform:translateY(-3px)}
.mzc-grid button img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(60,40,20,.18))}
.mzc-close{border:0;background:#8B5CF6;color:#fff;font-weight:800;border-radius:99px;padding:9px 26px;cursor:pointer;font-family:inherit;font-size:14px}
@media(max-width:768px){ .mzc-chip{font-size:10px;padding:4px 8px} .mzc-chip img{width:17px;height:17px} .mzc-ico{width:31px;height:31px} .mzc-fn{font-size:8.5px;padding:2px 7px} }
/* ── v154.195: HUB SỐNG — badge số liệu thật + bong bóng thầy nói + trang trí mùa ── */
.mzc-bdg{position:absolute;top:-2%;right:4%;min-width:21px;height:21px;background:linear-gradient(135deg,#FF3B5C,#E11D48);color:#fff;border:2px solid #fff;border-radius:99px;font-size:10.5px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 6px;z-index:12;pointer-events:none;box-shadow:0 3px 8px rgba(0,0,0,.3);white-space:nowrap;line-height:1}
.mzc-bdg:empty{display:none}
.mzc-bdg.teal{background:linear-gradient(135deg,#14B8A6,#0D9488)}
.mzc-bdg.gold{background:linear-gradient(135deg,#FFB300,#F57C00)}
.mzc-bdg.purple{background:linear-gradient(135deg,#A855F7,#7C3AED)}
.mzc-say{position:absolute;left:50%;bottom:102%;transform:translateX(-50%);background:#FFFDF7;color:#3D2E5C;border:2.5px solid #D9C8FF;border-radius:14px;padding:8px 13px;font-size:12.5px;font-weight:700;width:max-content;max-width:240px;white-space:normal;text-align:center;line-height:1.4;box-shadow:0 8px 22px rgba(20,10,50,.3);z-index:41;pointer-events:none;animation:mzcSayIn .28s ease-out}
.mzc-say::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#FFFDF7}
@keyframes mzcSayIn{from{opacity:0;transform:translateX(-50%) translateY(7px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.mzc-season{position:absolute;inset:0;pointer-events:none;z-index:2}
.mzc-season span{position:absolute;font-size:clamp(19px,2.6vw,34px);filter:drop-shadow(0 3px 4px rgba(0,0,0,.28));animation:mzcSea 4.6s ease-in-out infinite}
@keyframes mzcSea{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}
@media(max-width:768px){ .mzc-bdg{min-width:17px;height:17px;font-size:8.5px;padding:0 4px;border-width:1.5px} .mzc-say{font-size:11px;max-width:190px;padding:6px 10px} }
/* ── v154.191: ĐIỆN THOẠI DỌC — nền lớp học DỌC riêng + LƯỚI TỰ XẾP (chỉ con đang HIỆN mới chiếm ô → hết lỗ hổng do ẩn vai), nhãn rõ dưới chân không che đầu, CHÓ lên hàng 2 ── */
/* ── v154.193: HOÀN TÁC thử nghiệm cuộn v154.192 (thầy ghim fixed làm con trượt ra sau lưng thầy khi cuộn — user bỏ). Trở về ĐÚNG layout v154.191 đã duyệt; thay vào đó XOÁ con "Nâng Cấp" khỏi lớp (trial còn 9 con = 3 hàng, vừa màn). Giữ duy nhất fix tilt-chạm trong JS (vô hình). ── */
/* ── v154.195: breakpoint 820→860 (iPad Pro 11" dọc 834px cũng được layout dọc) + con đổi static→relative (badge .mzc-bdg bám đúng từng con trong lưới) ── */
@media (orientation:portrait) and (max-width:860px){
.mzc-top{gap:5px}
/* nền: ảnh lớp DỌC vẽ riêng, ẩn ảnh ngang để không bị cắt xấu */
.mzc-bg{display:none}
.mzc-room{
background:url('assets/monster/classroom_bg_portrait.jpg') center top/cover no-repeat;
display:grid;grid-template-columns:repeat(3,1fr);align-content:start;justify-items:center;
column-gap:1.5%;row-gap:.3vh;padding:40vh 4% 9vh;box-sizing:border-box;
}
/* bảng quái vật: mắt + lưỡi lên đỉnh (bảng nằm trên cùng ảnh dọc) */
.mzc-eye{top:8.6vh;width:13px;height:13px}
.mzc-eye.l{left:45.5%}.mzc-eye.r{left:51%}
.mzc-tongue{top:12.6vh;left:48.3%;width:15px;height:32px}
/* thầy giáo: tuyệt đối, đứng dưới bảng — KHÔNG vào lưới */
#mzcTeacher{position:absolute!important;left:50%!important;top:15.5vh!important;bottom:auto!important;transform:translateX(-50%);width:30%!important;max-width:150px;z-index:8}
/* 9 con chức năng → ô lưới; con ẩn (display:none) KHÔNG chiếm ô. relative (≈static trong grid) để badge absolute bám theo con */
.mzc-fm:not(#mzcTeacher){
position:relative!important;left:auto!important;bottom:auto!important;top:auto!important;width:100%!important;
display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 0 3.4vh;
}
.mzc-bdg{top:auto;bottom:62%;right:8%}
.mzc-fm:not(#mzcTeacher)>img{width:74%!important;max-width:120px;margin:0 auto}
/* nhãn: vào luồng, ngay dưới mỗi con — không che đầu, không đè nhau */
.mzc-fm:not(#mzcTeacher) .mzc-fn,.mzc-back .mzc-fn{position:static!important;left:auto;right:auto;top:auto!important;bottom:auto!important;transform:none;margin:-1.5vh auto 0;display:inline-block;font-size:10px;padding:2px 9px;border-width:2px;white-space:nowrap}
.mzc-fm:not(#mzcTeacher):hover .mzc-fn{transform:scale(1.06)}
}
/* ── v154.209: TRÒ CHƠI DẠY HỌC (Đấu Trường 2 Đội — GV/Admin) ── */
#gameDayHocModal{display:none;position:fixed;inset:0;z-index:99999;background:#FFF6E9}
#gameDayHocModal.show{display:flex;flex-direction:column}
#gameDayHocFrame{flex:1 1 auto;min-height:0;width:100%;border:0;display:block;background:#221608}
#gameDayHocModal .memapp-fs-header{background:linear-gradient(135deg,#E65100,#F59E0B)}
.gdh-nav{border:none;background:rgba(255,255,255,.22);color:#fff;font-weight:800;font-family:inherit;border-radius:99px;padding:7px 14px;font-size:13px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.gdh-nav:hover{background:rgba(255,255,255,.38)}
#gameDayHocFab{display:none;position:fixed;right:12px;top:70px;z-index:12400;border:none;background:linear-gradient(135deg,#E65100,#F59E0B);color:#fff;font-weight:900;font-family:inherit;font-size:14px;border-radius:99px;padding:12px 18px;cursor:pointer;box-shadow:0 6px 20px rgba(230,81,0,.5);align-items:center;gap:6px;animation:gdhFabIn .3s ease-out}
#gameDayHocFab:hover{filter:brightness(1.08)}
/* v154.322: ĐÈN LED CHẠY VIỀN các thẻ Trang chủ (kiểu ambient xe Mercedes) — phần tử con .xsb-led tiêm bằng JS để không đụng ::before/::after sẵn có */
@property --xsbLedA{syntax:'';initial-value:0deg;inherits:false}
@keyframes xsbLedRun{to{--xsbLedA:360deg}}
.xsb-led{position:absolute;inset:0;border-radius:inherit;padding:2.5px;pointer-events:none;z-index:40;
background:conic-gradient(from var(--xsbLedA),#ff2d55,#ff9f0a,#ffd60a,#34c759,#00c7be,#0a84ff,#5e5ce6,#bf5af2,#ff2d55);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
animation:xsbLedRun 6s linear infinite;filter:saturate(1.3) drop-shadow(0 0 5px rgba(120,180,255,.45))}
@media(prefers-reduced-motion:reduce){.xsb-led{animation:none}}
/* v154.324: LED KHỚP MÉP 100% — ép các thẻ GIỐNG HỆT 3 thẻ mega (Soroban/Trí nhớ/Đọc, vốn đã chuẩn): BỎ border + overflow:hidden + LED inset:0 → thẻ TỰ CẮT vòng LED ôm sát mép bo tròn, hết lòi nền trắng/viền đôi. (.xsb-hb có overflow → inset:-2.5px trước bị cắt MẤT LED, nay về inset:0; .home-card thêm overflow:hidden để cắt sát.) */
#page-home .home-card, #page-home .xsb-hb, #page-home #xsbHomeClassCard{border:0!important;overflow:hidden!important}
/* v154.325: thẻ Ngôi trường có border:3px solid #FFF (viền TRẮNG lòi ra) → bỏ để LED ôm sát như mega. Banner Bachi: VIỀN GRADIENT ĐỘNG ôm sát — nền wash+gradient ở padding-box, dải LED ở border-box → không bị nội dung che thành vạch. */
#page-home .xsb-hero-3d{border:3px solid transparent!important;background:url('assets/bachi_wash.jpg?v=308') center/cover no-repeat padding-box,linear-gradient(135deg,#A7D8F0 0%,#C9B6E8 54%,#F4DAC9 100%) padding-box,conic-gradient(from var(--xsbLedA),#ff2d55,#ff9f0a,#ffd60a,#34c759,#00c7be,#0a84ff,#5e5ce6,#bf5af2,#ff2d55) border-box!important;animation:xsbLedRun 6s linear infinite}
@media(prefers-reduced-motion:reduce){#page-home .xsb-hero-3d{animation:none!important}}
/* v154.326: ĐỒNG BỘ FONT toàn app = 'Crimson Pro' (đúng font thẻ Đánh giá năng lực) cho MỌI chữ — bỏ hết font lạ (Georgia/Times/Comic Sans/Be Vietnam Pro/Arial Rounded...). GIỮ monospace cho số/mã (căn cột ảo tính/bàn tính). */
*:not(code):not(kbd):not(pre):not([class*="mono"]):not([class*="num"]):not([class*="anz"]):not([class*="cell"]):not([class*="digit"]):not([class*="abacus"]):not([style*="Courier"]):not([style*="monospace"]){font-family:'Crimson Pro',Georgia,serif !important}
@keyframes gdhFabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:768px){ .gdh-nav{font-size:11px;padding:6px 9px} #gameDayHocModal .mafs-title{font-size:12.5px} }
/* ── v154.210: card Trò Chơi Dạy Học trong hub modal Soroban — nền watercolor Higgsfield + chữ trắng overlay (đồng bộ các card modal) ── */
#sorobanHubModal .home-card.hc-gamedh{
background:#E65100 url('assets/gamedh_banner.jpg') center 32%/cover no-repeat !important;
border:2.5px solid #FFB74D !important;
box-shadow:0 6px 20px rgba(230,81,0,.4) !important;
}
/* ── v154.211: decor quái vật KHÔNG che UI dạy học (góp ý thầy Bình: con tím che nút "Về trò chơi", con xanh che bảng điểm) ──
- Trên hub Quái Vật: tắt decor (hub tự nó đã là lớp học đầy quái vật)
- Khi modal Trò Chơi Dạy Học đang mở: tắt decor (con xanh mzFly đậu góc bảng điểm)
- Khi nút nổi "Về trò chơi" đang hiện: ẩn con tím mzMascot (cùng góc phải-dưới) */
body.mz-on-hub #xsbMonsterDecor{display:none!important}
body.gdh-open #xsbMonsterDecor{display:none!important}
body.gdh-fab-on #xsbMonsterDecor .mzMascot{display:none!important}
/* ── v154.252: CHUÔNG THÔNG BÁO TO + LẮC để gây chú ý mời bật thông báo ── */
#xsbBellBtnHeader.xsbBellBig{padding:8px 16px!important;border-radius:18px!important;font-size:42px!important;line-height:1!important}
#xsbBellBtnHeader.xsbBellBig .xsbBellIco{display:inline-block;transform-origin:50% 12%;animation:xsbBellRing 3.2s ease-in-out infinite;will-change:transform}
@keyframes xsbBellRing{
0%,44%,86%,100%{transform:rotate(0)}
48%{transform:rotate(18deg)} 52%{transform:rotate(-16deg)} 56%{transform:rotate(13deg)}
60%{transform:rotate(-10deg)} 64%{transform:rotate(7deg)} 68%{transform:rotate(-5deg)}
72%{transform:rotate(3deg)} 76%{transform:rotate(-2deg)} 80%{transform:rotate(1deg)}
}
@media(max-width:560px){ #xsbBellBtnHeader.xsbBellBig{font-size:32px!important;padding:6px 12px!important;border-radius:15px!important} }
@media(prefers-reduced-motion:reduce){ #xsbBellBtnHeader.xsbBellBig .xsbBellIco{animation:none} }
/* ═══ v300: Bachi Hỏi đáp trên banner chào ═══ */
.xsb-hero-3d{cursor:pointer}
/* v302: gợi ý "bấm để hỏi Bachi" — pill nhỏ góc dưới-phải, nổi nhẹ */
.xsb-hero-tap{position:absolute !important;right:16px;bottom:12px;z-index:4;background:rgba(255,255,255,.92);border:1.5px solid #C9A0E8;border-radius:999px;padding:5px 13px;font-size:12px;font-weight:800;color:#7B3FA0;box-shadow:0 4px 12px rgba(120,60,160,.2);pointer-events:none;white-space:nowrap;animation:xsbBachiRoam 24s linear infinite}
@media(max-width:680px){ .xsb-hero-tap{right:8px;bottom:8px;font-size:10px;padding:4px 9px} }
.xsb-hero-3d .xsb-hero-bachi{position:absolute !important;right:16px;bottom:-2px;height:168px;width:auto !important;max-width:none !important;z-index:2 !important;pointer-events:none;filter:drop-shadow(0 7px 11px rgba(80,60,110,.30));animation:xsbBachiRoam 24s linear infinite}
@keyframes xsbBachiFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-2deg)}}
/* v309: Bachi đi vòng vòng — từ phải sang trái rồi vòng lại (vừa đi vừa nhảy) */
@keyframes xsbBachiRoam{
0%{transform:translateX(7vw) translateY(0) rotate(0)}
9%{transform:translateX(-4vw) translateY(-12px) rotate(-3deg)}
18%{transform:translateX(-16vw) translateY(0) rotate(0)}
27%{transform:translateX(-28vw) translateY(-12px) rotate(3deg)}
36%{transform:translateX(-40vw) translateY(0) rotate(0)}
45%{transform:translateX(-52vw) translateY(-12px) rotate(-3deg)}
54%{transform:translateX(-64vw) translateY(0) rotate(0)}
63%{transform:translateX(-76vw) translateY(-12px) rotate(3deg)}
72%{transform:translateX(-89vw) translateY(0) rotate(0)}
81%{transform:translateX(-103vw) translateY(-12px) rotate(-3deg)}
100%{transform:translateX(-125vw) translateY(0) rotate(0)}
}
@media(prefers-reduced-motion:reduce){.xsb-hero-3d .xsb-hero-bachi,.xsb-hero-3d .xsb-hero-bachi-bubble,.xsb-hero-tap{animation:none !important;transform:none !important}}
.xsb-hero-3d .xsb-hero-bachi-bubble{position:absolute !important;right:158px;top:20px;background:#fff;border:2px solid #C9A0E8;border-radius:16px;padding:9px 12px;display:flex !important;gap:5px;align-items:center;width:max-content !important;box-shadow:0 5px 14px rgba(120,60,160,.22);pointer-events:none;animation:xsbBachiRoam 24s linear infinite}
.xsb-hero-3d .xsb-hero-bachi-bubble i{width:7px;height:7px;border-radius:50%;background:#9B7BCB;display:inline-block;animation:xsbDot 1.4s ease-in-out infinite}
.xsb-hero-3d .xsb-hero-bachi-bubble i:nth-child(2){animation-delay:.18s}
.xsb-hero-3d .xsb-hero-bachi-bubble i:nth-child(3){animation-delay:.36s}
@keyframes xsbDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.xsb-hero-3d .xsb-hero-bachi-bubble::after{content:'';position:absolute;bottom:-9px;right:26px;border:9px solid transparent;border-top-color:#fff;border-bottom:0}
@media(max-width:760px){
.xsb-hero-3d .xsb-hero-bachi{height:120px;width:auto !important;max-height:none;right:4px;bottom:2px}
.xsb-hero-3d .xsb-hero-bachi-bubble{display:none}
.xsb-hero-3d h2{font-size:20px !important}
.xsb-hero-3d .xsb-stat-pill{min-width:0 !important;padding:7px 11px !important}
}
/* ═══ v329: CÂY XANH 4 GÓC NỀN toàn app (màu nước, lú ra ở góc, sau nội dung) ═══ */
#xsbCornerPlants{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#xsbCornerPlants .cp{position:absolute;width:clamp(100px,13vw,184px);height:auto;opacity:.92;filter:drop-shadow(0 4px 9px rgba(90,120,70,.16))}
#xsbCornerPlants .cp-bl{left:-10px;bottom:-10px}
#xsbCornerPlants .cp-br{right:-10px;bottom:-10px;transform:scaleX(-1)}
#xsbCornerPlants .cp-tl{left:-10px;top:-10px;transform:scaleY(-1)}
#xsbCornerPlants .cp-tr{right:-10px;top:-10px;transform:scale(-1,-1)}
@media(max-width:640px){#xsbCornerPlants .cp{width:78px;opacity:.85}}
/* ═══ v329: BÀN TÍNH SOROBAN Nhật 2 bên trái/phải nền app (sau nội dung, lú ra ở mép) ═══ */
#xsbSideSoroban{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#xsbSideSoroban .ss{position:absolute;top:50%;height:clamp(230px,40vh,400px);width:auto;opacity:.88;filter:drop-shadow(0 6px 14px rgba(120,90,40,.2))}
#xsbSideSoroban .ss-left{left:-44px;transform:translateY(-50%)}
#xsbSideSoroban .ss-right{right:-44px;transform:translateY(-50%) scaleX(-1)}
@media(max-width:1024px){#xsbSideSoroban .ss{height:240px;opacity:.8}}
@media(max-width:640px){#xsbSideSoroban{display:none}}
/* v330: ĐIỆN THOẠI/landscape — bảo đảm DẢI CỎ XANH ở đáy thẻ "Ngôi trường thông minh" (ảnh cover hay cắt mất cỏ trên màn nhỏ) */
@media(max-width:1024px){
#xsbHomeClassCard{
background:
linear-gradient(to top, #9ECB83 0%, #B4D89C 11%, rgba(180,216,156,.42) 24%, rgba(180,216,156,0) 38%),
url('assets/school_bg.jpg?v=330') center bottom/cover no-repeat,
linear-gradient(180deg,#9FD8F6 0%,#D6F0E0 100%) !important;
}
}
/* v331: nền đăng nhập = ảnh vườn; chữ phía phải thêm halo trắng cho rõ trên ảnh */
#loginOverlay .login-box h2{ text-shadow:0 0 8px rgba(255,255,255,.96),0 0 16px rgba(255,255,255,.82),0 1px 2px rgba(255,255,255,.9) !important; }
#loginOverlay .login-sub{ text-shadow:0 0 7px rgba(255,255,255,.96),0 0 14px rgba(255,255,255,.8) !important; color:#5C4A38 !important; }
/* v331: logo công ty + badge Bộ Công Thương RA GIỮA (header trên cùng, fixed) cho dễ thấy trên nền ảnh đăng nhập */
#loginOverlay .login-hero-brand{
position:fixed !important; top:16px !important; left:50% !important;
transform:translateX(-50%) !important; z-index:60 !important;
margin:0 !important; display:flex !important; justify-content:center !important;
}
#loginOverlay .login-hero-brand img[src*="logo"]{ height:120px !important; }
#loginOverlay .login-hero-brand img[src*="dathongbao"]{ height:60px !important; }
#loginOverlay .login-shell{ padding-top:152px !important; }
@media(max-width:768px){
#loginOverlay .login-hero-brand img[src*="logo"]{ height:88px !important; }
#loginOverlay .login-hero-brand img[src*="dathongbao"]{ height:46px !important; }
#loginOverlay .login-shell{ padding-top:112px !important; }
}
/* v331: brand (logo+BCT) có BACKING mềm frosted (dễ thấy trên ảnh) + tinh chỉnh login điện thoại */
#loginOverlay .login-hero-brand{
background:rgba(255,255,255,.5) !important;
-webkit-backdrop-filter:blur(5px) saturate(1.1) !important; backdrop-filter:blur(5px) saturate(1.1) !important;
border-radius:22px !important; padding:7px 20px !important;
box-shadow:0 6px 22px rgba(60,80,40,.18) !important;
}
@media(max-width:768px){
#loginOverlay .login-hero-brand{ top:12px !important; padding:5px 14px !important; max-width:92vw !important; }
#loginOverlay .login-shell{ padding-top:108px !important; }
}
@media(max-width:380px){
#loginOverlay .login-hero-brand img[src*="logo"]{ height:72px !important; }
#loginOverlay .login-hero-brand img[src*="dathongbao"]{ height:38px !important; }
#loginOverlay .login-shell{ padding-top:90px !important; }
}
/* ════════ v154.343: CÀI ĐẶT ẢO TÍNH — gom 3 nhóm gập, nén thẻ, phóng nhãn cho gọn & rõ ════════ */
#anzSettingsPanel .anz-sec{ background:#FBF6EA; border:1.5px solid rgba(180,150,110,.30); border-radius:14px; padding:13px 15px; margin-bottom:14px; }
#anzSettingsPanel .anz-sec-h{ display:flex; align-items:center; gap:8px; font-size:17.5px; font-weight:800; color:var(--teal); margin-bottom:11px; }
#anzSettingsPanel .anz-sec-h.anz-collapsible{ cursor:pointer; margin-bottom:0; user-select:none; }
#anzSettingsPanel .anz-sec-h.anz-collapsible:hover{ color:var(--orange); }
#anzSettingsPanel .anz-sec-h .anz-sec-sub{ font-size:13px; font-weight:600; color:var(--muted); }
#anzSettingsPanel .anz-sec-h .anz-sec-caret{ margin-left:auto; font-size:15px; color:var(--muted); }
#anzSettingsPanel #anzSecDisplayB{ margin-top:12px; }
/* Nén thẻ thông số + phóng to nhãn (góp ý: chữ nhỏ, dài dòng) */
#anzSettingsPanel .setting-grid{ gap:10px; margin-bottom:0; }
#anzSettingsPanel .setting-grid .sg{ padding:10px 11px; }
#anzSettingsPanel .sg label{ font-size:16px; font-weight:800; color:#2f2619; margin-bottom:5px; }
#anzSettingsPanel .sg small{ font-size:12.5px; font-weight:500; line-height:1.35; margin-top:3px; color:#6b5e49; }
#anzSettingsPanel .setting-grid .sg input[type=number]{ font-size:20px !important; padding:6px 8px !important; }
/* Dòng "Phạm vi kết quả" rút gọn (auto theo số chữ số) */
#anzSettingsPanel .anz-autorange .anz-autorange-line{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#anzSettingsPanel .anz-autorange-txt{ font-size:15.5px; font-weight:600; color:#2f2619; }
#anzSettingsPanel .anz-autorange-txt b{ color:var(--teal); font-weight:800; }
#anzSettingsPanel .anz-chinhtay{ margin-left:auto; background:#fff; border:1.5px solid rgba(180,150,110,.45); color:var(--teal); font-weight:700; font-size:12.5px; padding:5px 12px; border-radius:9px; cursor:pointer; }
#anzSettingsPanel .anz-chinhtay:hover{ border-color:var(--orange); color:var(--orange); }
/* Nén thẻ nhóm bài tập */
#anzSettingsPanel .grp-grid{ grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); gap:9px; margin:0; }
#anzSettingsPanel .grp-btn{ padding:13px 9px; border-radius:12px; }
#anzSettingsPanel .grp-num{ font-size:11px; margin-bottom:3px; }
#anzSettingsPanel .grp-name{ font-size:15.5px; font-weight:800; margin-bottom:3px; }
#anzSettingsPanel .grp-sub{ font-size:11.5px; line-height:1.3; }
#anzSettingsPanel .grp-desc{ margin-top:9px; font-size:14px; font-weight:600; }
/* v154.344: chữ to & đậm hơn ở các mục còn lại trong cài đặt ảo tính */
#anzSettingsPanel .sg > div label{ font-size:14px; font-weight:600; color:#3a3024; }
#anzSettingsPanel .rsel{ font-size:13.5px; padding:7px 14px; }
#anzSettingsPanel .anztheme-btn{ font-size:13px; padding:6px 11px; }
#anzSettingsPanel .anz-chinhtay{ font-size:13px; }
/* Điện thoại: giữ lưới nhiều cột (gọn) thay vì 1 cột dài lê thê */
@media(max-width:640px){
#anzSettingsPanel .anz-sec{ padding:11px 12px; border-radius:12px; }
#anzSettingsPanel .anz-sec-h{ font-size:16px; }
#anzSettingsPanel .setting-grid{ grid-template-columns:repeat(3,1fr); gap:7px; }
#anzSettingsPanel .sg label{ font-size:14px; }
#anzSettingsPanel .setting-grid .sg input[type=number]{ font-size:18px !important; }
#anzSettingsPanel .grp-grid{ grid-template-columns:repeat(3,1fr); }
}
@media(max-width:380px){
#anzSettingsPanel .setting-grid{ grid-template-columns:repeat(2,1fr); }
#anzSettingsPanel .grp-grid{ grid-template-columns:repeat(2,1fr); }
}
/* ĐT nằm ngang (thấp): bớt khoảng đứng để đỡ cuộn */
@media(max-width:900px) and (orientation:landscape){
#anzSettingsPanel .anz-sec{ margin-bottom:10px; padding:10px 12px; }
}
/* v154.344: NHẮC LƯU — nút "Lưu cài đặt" nhấp nháy + dòng cảnh báo khi có thay đổi chưa lưu */
@keyframes anzSavePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(244,123,32,.55); transform:translateZ(0) scale(1); } 50%{ box-shadow:0 0 0 8px rgba(244,123,32,0); transform:translateZ(0) scale(1.03); } }
#anzSettingsPanel .btn.anz-save-dirty{ animation:anzSavePulse 1.25s ease-out infinite; }
#anzSettingsPanel .anz-save-note-dirty{ color:#c0392b !important; font-weight:800 !important; font-size:13px !important; }
@media(prefers-reduced-motion:reduce){ #anzSettingsPanel .btn.anz-save-dirty{ animation:none; box-shadow:0 0 0 3px rgba(244,123,32,.5); } }