:root{--bg:#f4fbff;--card:#fff;--text:#16324f;--primary:#2f80ed;--accent:#f2c94c;--ok:#27ae60;--bad:#eb5757}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,#eaf8ff,#fffdf1);color:var(--text);overscroll-behavior-y:contain}
a{text-decoration:none;color:inherit}.wrap{max-width:1100px;margin:auto;padding:20px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;background:#fff;border-radius:20px;box-shadow:0 10px 30px #1b49651a;position:sticky;top:10px;z-index:5}
.logo{font-size:24px;font-weight:800}.logo span{color:var(--primary)}button,.btn,.answer,.word,.bin,.arcade-action,select{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hero{text-align:center;padding:48px 15px 28px}.hero h1{font-size:clamp(34px,7vw,64px);margin:0}.hero p{font-size:18px;opacity:.8}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}.card{background:#fff;border-radius:24px;padding:22px;box-shadow:0 12px 32px #1b49651c;transition:.2s}.card:hover{transform:translateY(-4px)}.icon{font-size:58px}.tag{display:inline-block;background:#edf7ee;color:#247a37;padding:6px 10px;border-radius:999px;font-size:13px;font-weight:700}.btn{display:inline-block;border:0;border-radius:14px;padding:12px 18px;background:var(--primary);color:#fff;font-weight:800;cursor:pointer}.btn.secondary{background:#fff;color:var(--primary);border:2px solid var(--primary)}
.game-shell{max-width:760px;margin:30px auto;background:#fff;border-radius:28px;padding:24px;box-shadow:0 14px 40px #1b496522}.game-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.score{font-weight:800}.question{font-size:28px;font-weight:800;text-align:center;margin:30px 0}.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px}.answer{padding:16px;border:2px solid #dbeafe;background:#fff;border-radius:16px;font-size:18px;font-weight:700;cursor:pointer}.answer:hover{border-color:var(--primary)}.feedback{text-align:center;min-height:34px;margin-top:18px;font-weight:800}.ok{color:var(--ok)}.bad{color:var(--bad)}.progress{height:12px;background:#e9eef4;border-radius:999px;overflow:hidden;margin:18px 0}.progress i{display:block;height:100%;background:var(--primary);width:0}
.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden}.admin-table th,.admin-table td{padding:14px;border-bottom:1px solid #edf1f5;text-align:left}.note{background:#fff7d6;border-left:5px solid var(--accent);padding:14px;border-radius:12px}
@media(max-width:600px){.answers{grid-template-columns:1fr}.topbar{position:static}.game-shell{margin:15px;padding:18px}.question{font-size:24px}}
.games-hub{min-height:100vh;background:radial-gradient(circle at 8% 4%,rgba(80,220,255,.24),transparent 31rem),radial-gradient(circle at 92% 17%,rgba(255,216,86,.18),transparent 29rem),linear-gradient(145deg,#061c43,#08708a 55%,#073e6e);color:#f8fdff}
.games-hub .wrap{max-width:1240px;padding-bottom:70px}.games-hub .topbar{color:#fff;border:1px solid rgba(255,255,255,.18);background:rgba(5,36,73,.43);box-shadow:0 18px 55px rgba(0,0,0,.22);backdrop-filter:blur(14px)}.games-hub .logo{color:#fff}.games-hub .logo span{color:#70e9ff}.games-hub .topbar select,.games-hub .topbar button{min-height:44px;color:#fff;border:1px solid rgba(255,255,255,.18);background:rgba(3,33,71,.72);box-shadow:none}
.games-hub .hero{position:relative;padding:70px 15px 46px}.games-hub .hero::before{content:"TIT.VN · PRO VISUAL ACADEMY";display:inline-flex;margin-bottom:17px;padding:6px 11px;color:#24385b;border-radius:999px;background:#ffe36a;box-shadow:inset 0 -4px rgba(168,108,18,.17);font-size:.72rem;font-weight:950;letter-spacing:.11em}.games-hub .hero h1{max-width:920px;margin:auto;font-size:clamp(2.7rem,7vw,5.4rem);line-height:.96;letter-spacing:-.065em;text-shadow:0 15px 45px rgba(0,0,0,.25)}.games-hub .hero p{max-width:680px;margin:20px auto 0;color:#d8f0fb;font-weight:650;line-height:1.65;opacity:1}
.games-hub .grid{grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px}.games-hub .card{position:relative;overflow:hidden;min-height:330px;padding:22px;color:#17324d;border:1px solid rgba(255,255,255,.6);background:linear-gradient(155deg,#fff,#e8f7ff 72%,#d7eeff);box-shadow:0 22px 55px rgba(0,19,49,.23),inset 0 1px #fff;transition:transform .22s,box-shadow .22s}.games-hub .card::before{content:"";position:absolute;width:190px;height:190px;right:-76px;top:-82px;border-radius:50%;background:hsl(calc(var(--game-index)*31deg) 82% 72%/.25);box-shadow:0 0 0 30px hsl(calc(var(--game-index)*31deg) 82% 72%/.08)}.games-hub .card:hover{transform:translateY(-7px);box-shadow:0 31px 70px rgba(0,18,46,.32),inset 0 1px #fff}.games-hub .game-number{position:relative;z-index:1;color:#5d7990;font-size:.68rem;font-weight:950;letter-spacing:.13em}.games-hub .icon{position:relative;z-index:1;display:grid;place-items:center;width:82px;height:82px;margin:13px 0 10px;border-radius:25px;background:linear-gradient(145deg,#fff,#dff3ff);box-shadow:0 13px 28px rgba(27,73,101,.16),inset 0 1px #fff;font-size:49px}.games-hub .icon span{filter:drop-shadow(0 7px 5px rgba(30,61,83,.17));animation:hubFloat 2.7s ease-in-out infinite}.games-hub .card:nth-child(3n+2) .icon span{animation-delay:-.8s}.games-hub .card:nth-child(3n) .icon span{animation-delay:-1.5s}.games-hub .tag{position:relative;z-index:1;background:#dff7eb;color:#176b47}.games-hub .card h2{position:relative;z-index:1;margin:13px 0 7px;font-size:1.35rem;letter-spacing:-.035em}.games-hub .card p{position:relative;z-index:1;min-height:68px;margin:0 0 17px;color:#587085;line-height:1.48}.games-hub .card .btn{position:relative;z-index:1;background:linear-gradient(180deg,#2f8ff0,#176ccc);box-shadow:0 5px 0 #0f4e9b}.games-hub [data-tit-ad-root]{margin-top:170px}
@keyframes hubFloat{50%{transform:translateY(-7px) rotate(3deg)}}
@media(max-width:600px){.games-hub .wrap{padding:8px}.games-hub .topbar{position:sticky;top:6px}.games-hub .hero{padding:48px 10px 32px}.games-hub .hero h1{font-size:2.7rem}.games-hub .grid{grid-template-columns:1fr 1fr;gap:9px}.games-hub .card{min-height:310px;padding:14px;border-radius:19px}.games-hub .icon{width:67px;height:67px;border-radius:20px;font-size:40px}.games-hub .card h2{font-size:1.05rem}.games-hub .card p{min-height:90px;font-size:.81rem}.games-hub .tag{font-size:.65rem}.games-hub .card .btn{padding:10px 12px;font-size:.78rem}}@media(max-width:380px){.games-hub .grid{grid-template-columns:1fr}.games-hub .card{min-height:0}.games-hub .card p{min-height:0}}

.audio-btn{border:0;background:#fff3cd;color:#6b5200;padding:9px 13px;border-radius:999px;font-weight:800;cursor:pointer}.speak-btn{border:0;background:#eef6ff;border-radius:999px;padding:8px 12px;cursor:pointer;font-weight:800}
.play-guide{margin:12px 0;padding:11px 14px;border:2px solid #dcecff;border-radius:15px;background:linear-gradient(135deg,#fff8db,#eef8ff);line-height:1.5;font-weight:700;color:#26445f}

.tit-art{width:1em;height:1em;display:inline-block;overflow:visible;transform-origin:center}
.bigpic .tit-art{width:120px;height:120px}
.item .tit-art{width:110px;height:110px}
.cell .tit-art{width:80%;height:80%}
@keyframes titBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes titFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
@keyframes titWobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes titSpin{to{transform:rotate(360deg)}}
@keyframes titDrive{0%{transform:translateX(-5px)}50%{transform:translateX(5px)}100%{transform:translateX(-5px)}}
@keyframes titRun{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-5px) scaleX(.97)}}
.bob{animation:titBob 1.2s ease-in-out infinite}.floaty{animation:titFloat 1.8s ease-in-out infinite}
.wobble{animation:titWobble .7s ease-in-out infinite}.spin-slow{animation:titSpin 5s linear infinite}
.drive{animation:titDrive 1s ease-in-out infinite}.mouse-run,.bunny-run{animation:titRun .38s ease-in-out infinite}
.difficulty-select{border:2px solid #c9def6;border-radius:999px;background:#fff;color:#16324f;padding:7px 10px;font:inherit;font-weight:800;cursor:pointer;outline:none}.difficulty-select:focus{border-color:#2f80ed}.difficulty-label{display:inline-flex;align-items:center;gap:6px;background:#eef6ff;padding:2px 4px 2px 10px!important;border-radius:999px;font-weight:800}
.language-select{border:2px solid #c9def6;border-radius:999px;background:#fff;color:#16324f;padding:8px 10px;font:inherit;font-weight:800;cursor:pointer}.guide-btn,.shoot-btn{border:0;border-radius:999px;background:#fff3cd;color:#714f00;padding:9px 13px;font:inherit;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #e5c55f}.guide-btn:active,.shoot-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #e5c55f}.firework{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:15;animation:burst .75s ease-out forwards}@keyframes burst{to{transform:translate(var(--x),var(--y)) scale(.15);opacity:0}}@media(max-width:620px){.topbar{align-items:flex-start}.topbar>div:last-child{flex-wrap:wrap;justify-content:flex-end}.difficulty-label{font-size:13px}.language-select{max-width:125px}}
.guide-btn{display:none!important}

/* 5.1 Pro Vector Hub: code-native scenery and card illustrations. */
.games-hub{position:relative;overflow-x:hidden;background:radial-gradient(circle at 7% 4%,rgba(91,232,255,.32),transparent 29rem),radial-gradient(circle at 93% 13%,rgba(255,218,89,.23),transparent 27rem),radial-gradient(circle at 52% 64%,rgba(99,241,183,.13),transparent 32rem),linear-gradient(155deg,#041936 0%,#075f82 48%,#084b75 72%,#082e5a 100%);background-attachment:fixed}
.games-hub .wrap{position:relative;z-index:2}
.hub-scenery{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
.hub-orb{position:absolute;border-radius:50%;filter:blur(1px);opacity:.55;box-shadow:inset 0 0 25px rgba(255,255,255,.32),0 20px 60px rgba(0,25,70,.16);animation:hubDrift 12s ease-in-out infinite}
.hub-orb::after{content:"";position:absolute;left:20%;top:14%;width:28%;height:18%;border-radius:50%;background:rgba(255,255,255,.45);transform:rotate(-26deg)}
.orb-one{width:88px;height:88px;left:4vw;top:24vh;background:linear-gradient(145deg,rgba(106,239,255,.85),rgba(78,117,238,.45))}.orb-two{width:132px;height:132px;right:4vw;top:43vh;background:linear-gradient(145deg,rgba(255,226,92,.75),rgba(255,111,139,.32));animation-delay:-4s}.orb-three{width:64px;height:64px;left:44vw;top:73vh;background:linear-gradient(145deg,rgba(127,255,187,.75),rgba(51,164,184,.35));animation-delay:-7s}
.hub-spark{position:absolute;width:12px;height:12px;background:#fff49a;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 38%);filter:drop-shadow(0 0 8px rgba(255,239,105,.75));animation:hubTwinkle 2.8s ease-in-out infinite}.spark-one{left:17vw;top:12vh}.spark-two{right:16vw;top:28vh;animation-delay:-1.1s}.spark-three{left:72vw;top:78vh;animation-delay:-2s}
.hub-hill{position:absolute;bottom:-17vw;width:68vw;height:31vw;border-radius:50% 50% 0 0;filter:blur(.2px)}.hill-one{left:-13vw;background:linear-gradient(180deg,rgba(33,157,139,.22),rgba(8,48,88,.13))}.hill-two{right:-20vw;bottom:-19vw;background:linear-gradient(180deg,rgba(85,117,190,.27),rgba(6,37,76,.08))}
.games-hub .topbar{z-index:20;border-color:rgba(174,239,255,.26);background:linear-gradient(145deg,rgba(7,48,87,.75),rgba(5,31,69,.61));box-shadow:0 20px 65px rgba(0,15,49,.27),inset 0 1px rgba(255,255,255,.12)}
.games-hub .hero::after{content:"";display:block;width:min(360px,72vw);height:5px;margin:29px auto 0;border-radius:999px;background:linear-gradient(90deg,transparent,#70edff,#ffe366,#7ff0bc,transparent);box-shadow:0 0 20px rgba(105,229,255,.42)}
.games-hub .grid{perspective:1200px}
.games-hub .card{min-height:352px;border-color:rgba(214,248,255,.78);background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(236,250,255,.97) 62%,rgba(210,239,255,.96));box-shadow:0 23px 60px rgba(0,18,54,.27),inset 0 1px #fff;transform:translateZ(0);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s}
.games-hub .card::after{content:"";position:absolute;inset:auto -16% -44% -16%;height:62%;border-radius:50%;background:linear-gradient(180deg,hsl(calc(var(--game-index)*29deg) 82% 69%/.14),transparent);pointer-events:none}
.games-hub .card:hover,.games-hub .card:focus-visible{transform:translateY(-9px) rotateX(1.3deg);border-color:#aeeeff;box-shadow:0 34px 80px rgba(0,18,52,.36),0 0 0 3px rgba(117,229,255,.12),inset 0 1px #fff;outline:0}
.games-hub .card:active{transform:translateY(-2px) scale(.985);transition-duration:.08s}
.games-hub .icon{width:92px;height:92px;margin:12px 0 11px;padding:4px;border:1px solid rgba(85,174,216,.18);background:radial-gradient(circle at 30% 18%,#fff,#e8f8ff 68%,#cfeaff);box-shadow:0 15px 32px rgba(17,70,103,.2),inset 0 1px #fff;overflow:visible}
.games-hub .icon.has-vector span{display:none}.hub-vector{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 7px 5px rgba(30,61,83,.16));transform-origin:50% 68%;animation:hubVectorFloat 3.2s ease-in-out infinite}
.games-hub .card:nth-child(3n+2) .hub-vector{animation-delay:-.9s}.games-hub .card:nth-child(3n) .hub-vector{animation-delay:-1.8s}
.games-hub .card:hover .hub-vector,.games-hub .card:focus-visible .hub-vector{animation-duration:1.45s}
.games-hub .tag{box-shadow:inset 0 -2px rgba(33,122,78,.08)}.games-hub .card .btn{transition:transform .18s,box-shadow .18s}.games-hub .card:hover .btn,.games-hub .card:focus-visible .btn{transform:translateY(-2px);box-shadow:0 7px 0 #0f4e9b,0 13px 22px rgba(30,91,166,.22)}
@keyframes hubDrift{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(14px,-28px,0) rotate(9deg)}}
@keyframes hubTwinkle{0%,100%{opacity:.28;transform:scale(.55) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(45deg)}}
@keyframes hubVectorFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(2deg)}}
@media(min-width:700px) and (max-width:1024px){.games-hub .wrap{padding:16px}.games-hub .grid{grid-template-columns:repeat(3,1fr)}.games-hub .card{min-height:348px;padding:18px}.games-hub .card p{font-size:.9rem}}
@media(max-width:600px){.games-hub{background-attachment:scroll}.games-hub .topbar{border-radius:17px}.games-hub .hero p{font-size:.96rem}.games-hub .card{min-height:320px}.games-hub .icon{width:72px;height:72px;padding:3px}.games-hub .card:hover{transform:none}.hub-orb{opacity:.34}.orb-two{right:-44px}.hub-hill{display:none}}
@media(prefers-reduced-motion:reduce){.hub-orb,.hub-spark,.hub-vector,.games-hub .icon span{animation:none!important}.games-hub .card{transition:none}}