@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;600;700;800;900&display=swap");:root{--font:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--bg:#f0f0f0;--card:#fff;--card2:#f7f7f7;--line:#e6e6e6;--ink:#1a1a1a;--muted:#666;--brand:#d0021b;--brand2:#b00218;--green:#1aab5c;--greenbg:#eafaf1;--blue:#1a73e8;--gold:#e8a500;--radius:16px;--zalo:#0068ff;--zalo2:#0050c8;--f-hero:clamp(40px,2.21vw + 31.7px,60px);--f-h2:clamp(32px,0.88vw + 28.7px,40px);--f-h3:clamp(24px,0.44vw + 22.3px,28px);--f-body:clamp(18px,0.66vw + 15.5px,24px);--f-cta:clamp(20px,0.44vw + 18.3px,24px);--f-cap:clamp(16px,0.22vw + 15.2px,18px)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}#dangky{scroll-margin-top:70px}.app{max-width:760px;margin:0 auto;min-height:100vh;padding:0 16px 60px;background:var(--bg)}.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;position:-webkit-sticky;position:sticky;top:0;background:linear-gradient(180deg,var(--bg) 70%,transparent);z-index:20}.logo{font-weight:900;font-size:20px;letter-spacing:.3px;background:#000;padding:8px 14px;border-radius:10px;display:inline-block;text-decoration:none}.logo,.logo span{color:#ffd400}.badge{font-size:12px;color:var(--muted);border:1px solid var(--line);padding:4px 10px;border-radius:999px;background:#fff}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.05)}.card+.card{margin-top:16px}h1{font-size:var(--f-hero);font-weight:900;line-height:1.1;letter-spacing:-.5px}h2{font-size:var(--f-h2);font-weight:800;line-height:1.15}h3{font-size:var(--f-h3);font-weight:700}li,p{font-size:var(--f-body)}.cap{font-size:var(--f-cap)}.cap,.muted{color:var(--muted)}.center{text-align:center}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mb8{margin-bottom:8px}.mb16{margin-bottom:16px}.btn{font-family:var(--font);font-size:var(--f-cta);font-weight:800;border:none;border-radius:12px;padding:16px 22px;width:100%;cursor:pointer;background:var(--brand);color:#fff;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}.btn:hover{background:var(--brand2);transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);font-weight:700}.btn.ghost:hover{background:var(--card2)}.btn.green{background:var(--green)}.btn.sm{font-size:var(--f-cap);padding:11px 16px;width:auto}.btn.zalo{background:var(--zalo);color:#fff;box-shadow:0 6px 0 var(--zalo2);animation:blink 1.1s ease-in-out infinite;text-transform:uppercase;letter-spacing:.4px}.btn.zalo:hover{background:#0057e0;transform:translateY(-1px)}.btn.zalo:active{transform:translateY(4px);box-shadow:0 2px 0 var(--zalo2)}@keyframes blink{0%,to{transform:scale(1);box-shadow:0 6px 0 var(--zalo2),0 0 0 0 rgba(0,104,255,.45)}50%{transform:scale(1.035);box-shadow:0 6px 0 var(--zalo2),0 0 0 12px rgba(0,104,255,0)}}.row{display:flex;gap:12px;flex-wrap:wrap}.row .btn{flex:1 1}.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px}.pill.wait{background:#fff3d6;color:#a86b00}.pill.ok{background:var(--greenbg);color:var(--green)}.qr{width:220px;height:220px;border-radius:12px;background:#fff;padding:8px;margin:0 auto;display:block;border:1px solid var(--line)}.kv{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:var(--f-cap)}.kv:last-child{border-bottom:none}.kv .k{color:var(--muted)}.kv .v{text-align:right}.copy,.kv .v{font-weight:700}.copy{cursor:pointer;color:var(--brand);font-size:13px;border:1px solid var(--line);border-radius:8px;padding:3px 9px;background:#fff}.codebox{font-size:32px;font-weight:900;letter-spacing:5px;color:var(--gold);background:#111;border:1px dashed var(--gold);border-radius:12px;padding:18px;margin:14px 0}.codebox,.field{text-align:center}.field{width:100%;font-family:var(--font);font-size:var(--f-body);font-weight:700;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:15px 16px;color:var(--ink);letter-spacing:3px}.field.left{text-align:left;letter-spacing:0;font-weight:400}.field:focus{outline:none;border-color:var(--brand)}label{display:block;font-size:var(--f-cap);color:var(--muted);margin-bottom:8px;text-align:left}.err{color:#d0021b;margin-top:8px;min-height:18px}.err,.note{font-size:14px}.note{background:#fafafa;border-left:3px solid var(--brand);border-radius:8px;padding:12px 14px;color:#555}.note b{color:var(--ink)}.progress{height:10px;background:var(--card2);border-radius:999px;overflow:hidden;margin-top:8px;border:1px solid var(--line)}.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#ff5a3c);width:0;transition:width .4s}.player{aspect-ratio:16/9;width:100%;border-radius:12px;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;border:1px solid var(--line);position:relative;overflow:hidden}.player .bunny{position:absolute;top:10px;right:12px;font-size:11px;color:#aaa}.play{width:64px;height:64px;border-radius:50%;background:var(--brand);justify-content:center;font-size:26px;color:#fff}.lesson,.play{display:flex;align-items:center}.lesson{gap:14px;padding:14px;border:1px solid var(--line);border-radius:12px;margin-top:10px;cursor:pointer;transition:.15s;background:#fff}.lesson:hover{background:var(--card2)}.lesson.active{border-color:var(--brand);background:#fff6f6}.lesson .num{width:34px;height:34px;border-radius:50%;background:var(--card2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;flex:0 0 auto}.lesson.done .num{background:var(--green);border-color:var(--green);color:#fff}.lesson .meta{flex:1 1;min-width:0}.lesson .meta .ti{font-weight:700;font-size:16px}.lesson .meta .du{font-size:13px;color:var(--muted)}.lesson .st{font-size:12px;font-weight:700;color:var(--muted)}.lesson.done .st{color:var(--green)}.steps{display:flex;gap:6px;margin-bottom:18px;justify-content:center;flex-wrap:wrap}.step{color:var(--muted);gap:6px}.step,.step .d{font-size:11px;display:flex;align-items:center}.step .d{width:22px;height:22px;border-radius:50%;background:var(--card2);border:1px solid var(--line);justify-content:center;font-weight:800}.step.on .d{background:var(--brand);border-color:var(--brand);color:#fff}.step.done .d{background:var(--green);border-color:var(--green);color:#fff}.arrow{color:#ccc}a.link{color:var(--brand);cursor:pointer;text-decoration:none;font-weight:700}.spin{display:inline-block;animation:sp 1s linear infinite}@keyframes sp{to{transform:rotate(1turn)}}.stats{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:12px;gap:12px}@media(min-width:620px){.stats{grid-template-columns:repeat(4,1fr)}}.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.05)}.stat .lbl{font-size:13px;color:var(--muted);font-weight:600}.stat .val{font-size:26px;font-weight:900;margin-top:4px;line-height:1.1}.stat.rev .val{color:var(--brand)}.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}table.dt{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}table.dt td,table.dt th{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap}table.dt th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.5px;font-weight:700}table.dt td.money{color:var(--brand);font-weight:700}.chip,table.dt tr:hover td{background:var(--card2)}.chip{display:inline-block;font-size:12px;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--line)}.chip.on{background:var(--greenbg);color:var(--green);border-color:transparent}