/* Mẫu học ngoại ngữ trực tuyến – tiền tố nn- */
.nn,.nn-layer{--ink:#0c2a3f;--navy:#123e5c;--mint:#eaf7f2;--paper:#f5fbf8;--coral:#ff5a4e;--coral2:#ff7a59;--sun:#ffc83d;--ocean:#2b7fff;--line:#d5e6df;--mute:#55707f}
.nn{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--ink);background:#fff;overflow-x:clip}
.nn *{box-sizing:border-box}.nn h1,.nn h2,.nn h3{font-family:'Literata','Be Vietnam Pro',serif;letter-spacing:-.015em;margin:0;color:inherit}.nn p{margin:0}.nn a{text-decoration:none}
.nn img{max-width:100%}
.nn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:12px;border:2px solid transparent;font:600 15px 'Be Vietnam Pro',sans-serif;cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s;white-space:nowrap}
.nn-btn:hover{transform:translateY(-2px)}.nn-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.nn-btn:focus-visible,.nn button:focus-visible,.nn select:focus-visible,.nn input:focus-visible,.nn summary:focus-visible{outline:3px solid var(--ocean);outline-offset:2px}
.nn-btn-coral{background:var(--coral);color:#fff;box-shadow:0 10px 22px -12px rgba(255,90,78,.9)}.nn-btn-coral:hover{background:#f04a3e;color:#fff}
.nn-btn-sun{background:var(--sun);color:#3b2a00}.nn-btn-sun:hover{background:#ffd45e;color:#3b2a00}
.nn-btn-line{background:#fff;border-color:var(--line);color:var(--ink)}.nn-btn-line:hover{border-color:var(--ink);color:var(--ink)}
.nn-btn-ghost{border-color:rgba(255,255,255,.5);color:#fff;background:rgba(255,255,255,.08)}.nn-btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}
.nn-sec{padding:92px 0;background:#fff}.nn-tint{background:var(--paper)}
.nn-dark{background:radial-gradient(60% 60% at 100% 0,#1c5a82,transparent 70%),var(--ink);color:#fff}
.nn-head{max-width:640px;margin-bottom:40px}.nn-head h2{font-size:clamp(28px,3.3vw,42px);line-height:1.12;font-weight:700;margin-bottom:12px}.nn-head p{font-size:17px;line-height:1.65;color:var(--mute)}
.nn-dark .nn-head p{color:#b9d3e2}
.nn-head-row{max-width:none}
.nn-note{margin-top:22px;font-size:13.5px;color:var(--mute)}
.nn-fine{font-size:12.5px;color:var(--mute);line-height:1.5}

/* hero */
.nn-hero{position:relative;color:#fff;background:linear-gradient(160deg,#0a2236,#123e5c 70%,#17506f);padding:140px 0 56px;overflow:hidden;isolation:isolate}
.nn-hero-bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:-1}
.nn-hero-bg .b1{width:420px;height:420px;background:#ff5a4e;left:-120px;top:40%;opacity:.28}.nn-hero-bg .b2{width:480px;height:480px;background:#2b7fff;right:-120px;top:-80px;opacity:.35}
.nn-hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:48px;align-items:center}
.nn-kicker{font-weight:600;color:#9fe6cf;margin-bottom:16px!important;font-size:15px}
.nn-hero h1{font-size:clamp(30px,4vw,52px);line-height:1.08;font-weight:700;color:#fff;margin-bottom:20px}
.nn-lead{font-size:18px;line-height:1.65;color:#cfe3ee;max-width:520px;margin-bottom:28px!important}
.nn-cta{display:flex;flex-wrap:wrap;gap:12px}
.nn-auth-m{display:none;gap:10px;margin-top:16px}.nn-auth-m button{background:none;border:0;color:#cfe3ee;font:600 14.5px 'Be Vietnam Pro',sans-serif;text-decoration:underline;cursor:pointer;padding:6px 0}
.nn-langs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0}.nn-langs li{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-size:14px;color:#e6f1f7}
.nn-live{position:relative}
.nn-win{background:#fff;border-radius:20px;color:var(--ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);overflow:hidden;transform:rotate(1.2deg)}
.nn-win-top{display:flex;align-items:center;gap:6px;padding:12px 16px;background:#f1f6f8;font-size:13.5px;font-weight:600}.nn-win-top i{width:10px;height:10px;border-radius:50%;background:#d0dae0}.nn-win-top span{margin-left:8px}
.nn-rec{margin-left:auto;font-style:normal;color:#fff;background:var(--coral);padding:3px 10px;border-radius:999px;font-size:12px;position:relative}.nn-rec:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:6px;animation:nn-blink 1.4s infinite}
@keyframes nn-blink{50%{opacity:.2}}
.nn-win-body{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;padding:12px}
.nn-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nn-grid figure{position:relative;margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--mint)}.nn-grid img{width:100%;height:100%;object-fit:cover;display:block}
.nn-grid figure:first-child{box-shadow:0 0 0 3px #2dce7c}
.nn-grid figcaption{position:absolute;left:6px;bottom:6px;background:rgba(10,30,45,.7);color:#fff;font-size:11.5px;padding:2px 8px;border-radius:999px}
.nn-chat{display:flex;flex-direction:column;gap:8px;font-size:12.5px;justify-content:flex-end}
.nn-chat p{padding:8px 10px;border-radius:12px;line-height:1.35;max-width:92%}.nn-chat .t{background:var(--mint)}.nn-chat .s{background:#e8f0ff;align-self:flex-end}.nn-chat .ai{background:#fff3d6;border:1px solid #ffe19a}.nn-chat .ai b{display:block;font-size:11px;color:#a86a00;margin-bottom:2px}
.nn-bub{position:absolute;z-index:2;background:#fff;color:var(--ink);font:700 15px 'Literata',sans-serif;padding:8px 14px;border-radius:14px;box-shadow:0 12px 26px -12px rgba(0,0,0,.5);animation:nn-float 6s ease-in-out infinite}
.nn-bub:after{content:"";position:absolute;bottom:-6px;left:16px;width:12px;height:12px;background:inherit;transform:rotate(45deg)}
.nb1{left:-26px;top:-18px}.nb2{right:6%;top:-30px;animation-delay:-1.5s;background:var(--sun)}.nb3{right:-14px;top:42%;animation-delay:-3s}.nb4{left:-30px;bottom:18%;animation-delay:-4s;background:#d9f5ea}.nb5{right:14%;bottom:-24px;animation-delay:-2s;background:#ffe1de}
@keyframes nn-float{50%{transform:translateY(-8px)}}
.nn-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:56px 0 0;border-top:1px solid rgba(255,255,255,.18);padding-top:26px}
.nn-stats>div{padding:0 18px;border-left:1px solid rgba(255,255,255,.14)}.nn-stats>div:first-child{border-left:0;padding-left:0}
.nn-stats dd{margin:0;font:700 clamp(24px,3vw,38px) 'Literata',sans-serif;color:var(--sun)}.nn-stats dt{font-size:14px;color:#b9d3e2;margin-top:2px}

/* ba cách học */
.nn-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.nn-way{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line);color:var(--ink);transition:transform .25s,box-shadow .25s}
.nn-way:hover{transform:translateY(-5px);box-shadow:0 26px 40px -28px rgba(12,42,63,.55);color:var(--ink)}
.nn-way img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}.nn-way div{padding:20px}.nn-way h3{font-size:21px;font-weight:700;margin-bottom:6px}.nn-way p{color:var(--mute);line-height:1.6;font-size:15px}

/* khóa học */
.nn-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.nn-filter button{font:600 14.5px 'Be Vietnam Pro',sans-serif;padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}.nn-filter button:hover{border-color:var(--ink)}.nn-filter button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.nn-courses{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.nn-course{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:box-shadow .25s,transform .25s}.nn-course:hover{transform:translateY(-4px);box-shadow:0 26px 40px -28px rgba(12,42,63,.55)}
.nn-course[hidden]{display:none}
.nn-course-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}.nn-course-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}.nn-course:hover .nn-course-img img{transform:scale(1.05)}
.nn-chip{position:absolute;left:12px;top:12px;background:#fff;color:var(--ink);font:700 12.5px 'Be Vietnam Pro',sans-serif;padding:5px 11px;border-radius:999px}
.nn-owned{display:none;position:absolute;right:12px;top:12px;background:#2dce7c;color:#06361e;font:700 12.5px 'Be Vietnam Pro',sans-serif;padding:5px 11px;border-radius:999px}.nn-course.own .nn-owned{display:block}
.nn-course-b{padding:18px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.nn-course h3{font-size:19px;font-weight:700;line-height:1.25}.nn-course-b>p{color:var(--mute);font-size:14.5px;line-height:1.55}
.nn-meta{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;padding:0;margin:0;font-size:13px;color:var(--mute)}.nn-meta li+li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:#9bb5c0;margin-right:14px;vertical-align:middle}
.nn-buyrow{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:6px}
.nn-price b{font:700 21px 'Literata',sans-serif;color:var(--coral)}.nn-price s{margin-left:8px;color:#8aa0ab;font-size:14px}.nn-rate{font-weight:700;font-size:14px;color:#c68a00}
.nn-acts{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}.nn-acts .nn-btn{height:42px;padding:0 12px;font-size:14.5px}
.nn-course.own .nn-acts .nn-btn-coral{background:#2dce7c;color:#06361e;box-shadow:none}

/* video */
.nn-learn{display:grid;grid-template-columns:1.7fr 1fr;gap:26px;align-items:start}
.nn-vwrap{position:relative;border-radius:20px;overflow:hidden;background:#000;aspect-ratio:16/9;box-shadow:0 30px 50px -30px rgba(12,42,63,.7)}.nn-vwrap video{width:100%;height:100%;display:block;background:#000}
.nn-lock{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;text-align:center;background:rgba(8,24,38,.9);color:#fff;padding:20px}.nn-lock[hidden]{display:none}.nn-lock b{font:700 22px 'Literata',sans-serif}.nn-lock span{color:#b9d3e2}
.nn-vbar{display:flex;gap:16px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:16px 0 10px}.nn-vbar strong{display:block;font:700 19px 'Literata',sans-serif}.nn-vbar span{color:var(--mute);font-size:14px}
.nn-vtools{display:flex;gap:10px;align-items:center}.nn-vtools label{font-size:13.5px;color:var(--mute)}.nn-vtools select,.nn-create select,.nn-create input,.nn-ctl select,#ai-input{font:inherit;font-size:15px;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink)}
.nn-vtools .nn-btn{height:42px;font-size:14px}
.nn-prog{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--mute);margin-bottom:14px}.nn-prog i{flex:1;height:8px;border-radius:99px;background:var(--line);overflow:hidden}.nn-prog em{display:block;height:100%;width:0;background:linear-gradient(90deg,#2dce7c,#9be8c1);transition:width .4s}
.nn-trans{list-style:none;margin:0;padding:0;display:grid;gap:4px}.nn-trans button{display:flex;gap:12px;width:100%;text-align:left;background:none;border:0;border-radius:10px;padding:9px 12px;font:inherit;font-size:14.5px;color:var(--ink);cursor:pointer}.nn-trans button:hover{background:var(--paper)}.nn-trans button.on{background:#fff3d6}.nn-trans time{color:var(--coral);font-weight:700;font-variant-numeric:tabular-nums}
.nn-curr{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px}.nn-curr h3{font-size:18px;font-weight:700;margin-bottom:12px}
.nn-lessons{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.nn-lesson{display:grid;grid-template-columns:30px 1fr auto;grid-template-areas:"n t d" "n t k";gap:0 10px;align-items:center;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--ink);transition:border-color .15s}.nn-lesson:hover{border-color:var(--ink);color:var(--ink)}
.nn-ln{grid-area:n;width:30px;height:30px;border-radius:50%;background:var(--mint);display:grid;place-items:center;font:700 13px 'Literata',sans-serif}.nn-lt{grid-area:t;font-weight:600;font-size:14.5px;line-height:1.3}.nn-ld{grid-area:d;font-size:12.5px;color:var(--mute);text-align:right}.nn-lk{grid-area:k;font-size:11.5px;font-weight:700;text-align:right;color:#8a6200}
.nn-lesson.cur{border-color:var(--coral);box-shadow:inset 4px 0 0 var(--coral)}.nn-lesson.done .nn-ln{background:#2dce7c;color:#06361e}.nn-lesson.unlocked .nn-lk{color:#0f7a43}.nn-lesson:not(.unlocked)[data-free="0"] .nn-lt{color:#6d8693}

/* lớp học */
.nn-split{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;align-items:start}
.nn-classes{display:grid;gap:12px}
.nn-class{display:grid;grid-template-columns:96px 1fr auto;gap:16px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:12px;transition:background .2s}.nn-class:hover{background:rgba(255,255,255,.11)}
.nn-class>img{width:96px;height:72px;border-radius:10px;object-fit:cover;display:block}
.nn-class h3{font-size:17px;font-weight:700;margin:4px 0 2px;color:#fff}.nn-by{font-size:13.5px;color:#b9d3e2}.nn-when{font-size:13.5px;color:#ffe08a;font-weight:600;margin-top:2px!important}
.nn-live-tag{font-size:12px;font-weight:700;color:#9fe6cf}
.nn-class-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.nn-seat{font-size:13px;color:#b9d3e2}.nn-seat b{color:#fff}
.nn-class .nn-btn{height:40px;padding:0 16px;font-size:14px}.nn-class.mine{border-color:var(--sun)}.nn-class.mine .nn-live-tag:after{content:" · Lớp của bạn";color:var(--sun)}
.nn-class.joined .nn-btn-coral{background:#2dce7c;color:#06361e}
.nn-create{background:#fff;color:var(--ink);border-radius:20px;padding:24px;display:grid;gap:14px;position:sticky;top:110px}.nn-create h3{font-size:20px;font-weight:700}.nn-create label{display:grid;gap:6px;font-size:13.5px;font-weight:600}.nn-create input,.nn-create select{width:100%}.nn-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* AI */
.nn-split-ai{grid-template-columns:1fr 1.1fr;align-items:center}
.nn-ctl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.nn-ctl label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--mute)}
.nn-ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}.nn-ticks li{position:relative;padding-left:28px;line-height:1.5}.nn-ticks li:before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:#2dce7c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.nn-aibox{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 60px -40px rgba(12,42,63,.6);display:flex;flex-direction:column;height:560px;overflow:hidden}
.nn-aihead{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--paper)}.nn-aihead small{display:block;color:var(--mute);font-size:12.5px}.nn-aihead b{font:700 16px 'Literata',sans-serif}
.nn-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--coral),var(--sun));display:grid;place-items:center;font:700 14px 'Literata',sans-serif;color:#fff}
.nn-reset{margin-left:auto;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font:600 13px 'Be Vietnam Pro',sans-serif;cursor:pointer;color:var(--mute)}
.nn-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.nn-m{max-width:86%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.55;white-space:pre-wrap}.nn-m.bot{background:var(--mint);border-bottom-left-radius:4px}.nn-m.me{background:var(--ocean);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.nn-m .fix{display:block;margin-top:8px;padding:8px 10px;border-radius:10px;background:#fff3d6;color:#6b4b00;font-size:14px}
.nn-m .say{display:inline-block;margin-top:6px;background:none;border:0;color:var(--ocean);font:600 13px 'Be Vietnam Pro',sans-serif;cursor:pointer;padding:0}
.nn-m.typing{display:flex;gap:4px;align-items:center;width:62px}.nn-m.typing i{width:7px;height:7px;border-radius:50%;background:#7aa898;animation:nn-dot 1s infinite}.nn-m.typing i:nth-child(2){animation-delay:.15s}.nn-m.typing i:nth-child(3){animation-delay:.3s}
@keyframes nn-dot{50%{transform:translateY(-4px);opacity:.5}}
.nn-quick{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 10px}.nn-quick button{font:500 13px 'Be Vietnam Pro',sans-serif;padding:6px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink)}.nn-quick button:hover{border-color:var(--ink)}
.nn-ai-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.nn-ai-form input{flex:1;min-width:0}.nn-ai-form .nn-btn{height:42px}
.nn-mic{width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:18px}.nn-mic.on{background:var(--coral);border-color:var(--coral)}

/* khác */
.nn-mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:170px;gap:14px}
.nn-mosaic figure{position:relative;margin:0;border-radius:18px;overflow:hidden}.nn-mosaic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}.nn-mosaic figure:hover img{transform:scale(1.05)}
.nn-mosaic figcaption{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);font:600 13.5px 'Be Vietnam Pro',sans-serif;padding:6px 12px;border-radius:999px}
.m1{grid-column:span 3;grid-row:span 2}.m2{grid-column:span 3;grid-row:span 2}.m3{grid-column:span 2}.m4{grid-column:span 2}.m5{grid-column:span 2}
.nn-teachers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.nn-teacher{margin:0;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--line)}.nn-teacher img{width:100%;aspect-ratio:4/4.4;object-fit:cover;display:block}.nn-teacher figcaption{padding:16px}.nn-teacher h3{font-size:18px;font-weight:700}.nn-teacher b{display:block;font-size:13.5px;color:var(--coral);margin:2px 0 8px}.nn-teacher p{color:var(--mute);font-size:14px;line-height:1.55}
.nn-voices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.nn-voice{margin:0;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:20px}.nn-voice blockquote{margin:0;font-size:16.5px;line-height:1.65}
.nn-voice figcaption{display:flex;gap:12px;align-items:center}.nn-voice img{width:52px;height:52px;border-radius:50%;object-fit:cover}.nn-voice span{font-size:13.5px;color:var(--mute)}.nn-voice b{display:block;color:var(--ink);font-size:15px}
.nn-faq{max-width:820px;display:grid;gap:10px}.nn-faq details{border:1px solid var(--line);border-radius:14px;padding:0 20px;background:#fff}.nn-faq summary{cursor:pointer;list-style:none;padding:18px 28px 18px 0;font:600 17px 'Literata',sans-serif;position:relative}.nn-faq summary::-webkit-details-marker{display:none}.nn-faq summary:after{content:"";position:absolute;right:2px;top:50%;width:10px;height:10px;margin-top:-8px;border-right:3px solid var(--coral);border-bottom:3px solid var(--coral);transform:rotate(45deg);transition:transform .2s}.nn-faq details[open] summary:after{transform:rotate(-135deg);margin-top:-2px}.nn-faq details p{padding:0 0 18px;color:var(--mute);line-height:1.7}
.nn-cta-sec{background:linear-gradient(135deg,var(--coral),#ff8a5b)}.nn-cta-box{display:flex;gap:28px;justify-content:space-between;align-items:center;flex-wrap:wrap;color:#fff}.nn-cta-box h2{font-size:clamp(26px,3.2vw,40px);font-weight:700;color:#fff;margin-bottom:8px}.nn-cta-box p{color:#ffe9e3;font-size:17px}

/* lớp phủ */
.nn-ov{position:fixed;inset:0;z-index:2000;background:rgba(8,24,38,.62);display:flex;align-items:center;justify-content:center;padding:16px;animation:nn-fade .2s}.nn-ov[hidden]{display:none}
@keyframes nn-fade{from{opacity:0}}
.nn-modal{background:#fff;color:var(--ink);border-radius:22px;width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;padding:26px;position:relative;font-family:'Be Vietnam Pro',sans-serif}
.nn-modal h3{font:700 22px 'Literata',sans-serif;margin:0 0 4px}.nn-modal p.sub{color:var(--mute);font-size:14px;margin:0 0 16px}
.nn-x{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;border:0;background:var(--paper);font-size:20px;cursor:pointer;color:var(--ink)}
.nn-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--mint);border-radius:12px;padding:4px;margin-bottom:16px}.nn-tabs button{border:0;background:none;padding:10px;border-radius:9px;font:600 14.5px 'Be Vietnam Pro',sans-serif;cursor:pointer;color:var(--ink)}.nn-tabs button.on{background:var(--ink);color:#fff}
.nn-f{display:grid;gap:12px}.nn-f label{display:grid;gap:5px;font-size:13.5px;font-weight:600}.nn-f input{height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--line);font:inherit;font-size:15px}
.nn-err{color:#c0271b;font-size:13.5px;min-height:18px}
.nn-sum{background:var(--paper);border-radius:14px;padding:14px;display:flex;gap:12px;align-items:center;margin-bottom:14px}.nn-sum img{width:84px;height:54px;object-fit:cover;border-radius:8px}.nn-sum b{display:block;font-size:15px}.nn-sum span{color:var(--coral);font-weight:700}
.nn-pm{display:grid;gap:8px;margin-bottom:14px}.nn-pm label{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;font-weight:600;font-size:14.5px}.nn-pm input:checked+span{color:var(--coral)}
.nn-ok{text-align:center;padding:8px 0}.nn-ok i{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:#2dce7c;color:#fff;font-size:30px;font-style:normal;margin:0 auto 12px}
.nn-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:2001;background:#fff;color:var(--ink);box-shadow:-30px 0 60px -30px rgba(0,0,0,.5);padding:24px;overflow:auto;transform:translateX(0);animation:nn-slide .25s;font-family:'Be Vietnam Pro',sans-serif}.nn-drawer[hidden]{display:none}
@keyframes nn-slide{from{transform:translateX(40px);opacity:0}}
.nn-drawer h3{font:700 22px 'Literata',sans-serif;margin:0}.nn-drawer h4{font:700 15px 'Literata',sans-serif;margin:22px 0 10px}.nn-me-i{display:flex;gap:12px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;font-size:14px}.nn-me-i b{display:block}.nn-me-i i{display:block;height:6px;border-radius:9px;background:var(--line);margin-top:6px;overflow:hidden;width:160px}.nn-me-i em{display:block;height:100%;background:#2dce7c}
.nn-hacct{display:inline-flex;align-items:center;gap:8px}.nn-hacct .av{width:30px;height:30px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;font:700 13px 'Literata',sans-serif}
.nn-toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,16px);background:#0c2a3f;color:#fff;padding:12px 18px;border-radius:12px;font:500 14.5px 'Be Vietnam Pro',sans-serif;z-index:3000;opacity:0;pointer-events:none;transition:all .25s;max-width:calc(100vw - 32px)}.nn-toast.on{opacity:1;transform:translate(-50%,0)}
/* phòng học */
.nn-room{position:fixed;inset:0;z-index:2002;background:#0a1624;color:#fff;display:flex;flex-direction:column;font-family:'Be Vietnam Pro',sans-serif}.nn-room[hidden]{display:none}
.nn-rtop{display:flex;align-items:center;gap:14px;padding:12px 18px;background:#0e1f33;border-bottom:1px solid #ffffff18;font-size:14px}.nn-rtop b{font:700 16px 'Literata',sans-serif}.nn-rtop .sp{margin-left:auto;display:flex;gap:14px;align-items:center}.nn-rtop a{color:#9fd3ff;text-decoration:underline}
.nn-rbody{flex:1;display:grid;grid-template-columns:1fr 320px;gap:12px;padding:12px;min-height:0}
.nn-stage{display:grid;grid-template-rows:1fr auto;gap:10px;min-height:0}.nn-main{position:relative;border-radius:16px;overflow:hidden;background:#000;min-height:0}.nn-main img{width:100%;height:100%;object-fit:cover;display:block}
.nn-tag{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.6);padding:3px 10px;border-radius:999px;font-size:12.5px}
.nn-strip{display:flex;gap:10px;overflow-x:auto}.nn-strip .tile{position:relative;flex:0 0 150px;height:100px;border-radius:12px;overflow:hidden;background:#162a42}.nn-strip img,.nn-strip video{width:100%;height:100%;object-fit:cover;display:block}.nn-strip .hand:after{content:"✋";position:absolute;right:6px;top:4px;font-size:18px}
.nn-self video{transform:scaleX(-1)}
.nn-rside{background:#0e1f33;border-radius:16px;display:flex;flex-direction:column;min-height:0}.nn-rside h4{margin:0;padding:12px 14px;font:700 15px 'Literata',sans-serif;border-bottom:1px solid #ffffff18}.nn-rmsgs{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;font-size:14px}.nn-rmsgs p{margin:0;line-height:1.45}.nn-rmsgs b{color:#9fe6cf}.nn-rmsgs .me b{color:#ffd45e}
.nn-rform{display:flex;gap:8px;padding:10px;border-top:1px solid #ffffff18}.nn-rform input{flex:1;min-width:0;height:40px;border-radius:10px;border:1px solid #ffffff30;background:#0a1624;color:#fff;padding:0 12px;font:inherit}
.nn-rctl{display:flex;justify-content:center;gap:12px;padding:12px;background:#0e1f33;flex-wrap:wrap}.nn-rctl button{height:46px;min-width:46px;padding:0 16px;border-radius:999px;border:0;background:#22364f;color:#fff;font:600 14px 'Be Vietnam Pro',sans-serif;cursor:pointer}.nn-rctl button.is-off{background:#5b2430}.nn-rctl button.is-on{background:#1f6f4a}.nn-rctl .leave{background:var(--coral)}

@media (max-width:1100px){.nn-courses{grid-template-columns:repeat(2,1fr)}.nn-teachers{grid-template-columns:repeat(2,1fr)}.nn-split,.nn-split-ai,.nn-learn{grid-template-columns:1fr}.nn-create{position:static}.nn-hero-grid{grid-template-columns:1fr}.nn-win{transform:none}}
@media (max-width:860px){.nn-ways,.nn-voices{grid-template-columns:1fr}.nn-mosaic{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}.m1,.m2{grid-column:span 2;grid-row:span 2}.m3,.m4,.m5{grid-column:span 1}.m5{grid-column:span 2}.nn-rbody{grid-template-columns:1fr;grid-template-rows:1fr 220px}}
@media (max-width:640px){.nn-hero{padding:104px 0 40px}.nn-sec{padding:60px 0}.nn-courses,.nn-teachers{grid-template-columns:1fr}.nn-stats{grid-template-columns:1fr 1fr;row-gap:18px}.nn-stats>div:nth-child(3){border-left:0;padding-left:0}.nn-auth-m{display:flex}.nn-class{grid-template-columns:72px 1fr}.nn-class>img{width:72px;height:56px}.nn-class-r{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}.nn-ctl{grid-template-columns:1fr}.nn-bub{display:none}.nn-win-body{grid-template-columns:1fr}.nn-chat{display:none}.nn-aibox{height:520px}.nn-two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.nn *,.nn *:before,.nn *:after{animation:none!important;transition:none!important}}

.nn-rec{white-space:nowrap}.nn-win-top span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* v4: tìm khóa học, mã lớp, giáo viên, phân quyền */
.nn-search{display:grid;gap:6px;margin-bottom:16px;max-width:560px}.nn-search label{font-size:13.5px;font-weight:600}.nn-search>div{position:relative}.nn-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--mute)}.nn-search input{width:100%;height:48px;padding:0 16px 0 42px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit;font-size:15.5px;color:var(--ink)}.nn-search input:focus{outline:2px solid var(--coral);outline-offset:1px}.nn-qc{font-size:13px;color:var(--mute);min-height:18px}
.nn-empty{padding:26px;border:1px dashed var(--line);border-radius:14px;text-align:center;color:var(--mute);margin:10px 0}.nn-empty a{color:var(--coral);font-weight:600}
.nn-lookup{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:20px;margin:0 0 26px;display:grid;gap:10px}.nn-lookup>label{font-weight:700;font-size:15px}.nn-lookup>div:first-of-type{display:flex;gap:10px}.nn-lookup input{flex:1;min-width:0;height:48px;padding:0 14px;border-radius:12px;border:0;font:600 16px 'Literata',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#10243a;background:#fff}.nn-lookup .nn-btn{height:48px;padding:0 22px}.nn-lookup .nn-err{color:#ffb4a8}.nn-lookup .nn-fine{color:#b9d3e2}
.nn-lres-c{display:flex;gap:14px;align-items:center;background:#fff;color:var(--ink);border-radius:14px;padding:12px;margin-top:4px}.nn-lres-c img{width:84px;height:64px;object-fit:cover;border-radius:10px}.nn-lres-c>div{flex:1;min-width:0}.nn-lres-c b{display:block}.nn-lres-c small{display:block;color:var(--mute);font-size:12.5px}.nn-lres-c .nn-btn{height:42px;padding:0 18px;white-space:nowrap}.nn-lres-c .nn-btn:disabled,.nn-class .nn-btn:disabled{opacity:.55;cursor:not-allowed}
.nn-sub{font:700 17px 'Literata',sans-serif;margin:0 0 14px}
.nn-code{font:600 12.5px 'Literata',sans-serif;letter-spacing:.04em;color:#ffd978}
.nn-locked,.nn-mine{background:#fff;color:var(--ink);border-radius:20px;padding:24px;display:grid;gap:12px}.nn-locked h3,.nn-mine h3{font-size:20px;font-weight:700;margin:0}.nn-locked p{color:var(--mute);font-size:14.5px;line-height:1.55;margin:0}.nn-mine{margin-top:16px}.nn-locked[hidden],.nn-mine[hidden]{display:none}
.nn-demo{font-size:13px;color:var(--mute)}.nn-demo summary{cursor:pointer;font-weight:600;color:var(--ink)}.nn-demo ul{margin:8px 0;padding-left:18px}
.nn-role{display:inline-block;font:600 11.5px 'Be Vietnam Pro',sans-serif;padding:3px 9px;border-radius:999px;background:#fff1d6;color:#8a5a00;vertical-align:middle;margin-left:6px}
.nn-check{display:flex!important;grid-template-columns:none;align-items:flex-start;gap:10px;font-weight:500!important}.nn-check input{width:18px!important;height:18px!important;margin-top:2px;flex:none}
.nn-me-i code{font:600 13px 'Literata',sans-serif;background:#f1f5f9;padding:1px 6px;border-radius:6px}.nn-me-i small{display:block;color:var(--mute)}.nn-me-i>div{flex:1;min-width:0}.nn-copy{flex:none;font:600 12.5px 'Be Vietnam Pro',sans-serif;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}.nn-copy:hover{border-color:var(--coral);color:var(--coral)}
.nn-deg{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:4px}.nn-deg li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.45;color:var(--ink)}.nn-deg li:before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--coral)}
@media (max-width:640px){.nn-lookup>div:first-of-type{flex-direction:column}.nn-lres-c{flex-wrap:wrap}.nn-lres-c .nn-btn{width:100%}}
.nn-me-i small{line-height:1.55;font-size:12.5px}.nn-me-i code{display:inline-block;line-height:1.4}
.nn-cw{position:sticky;top:104px}.nn-cw .nn-create{position:static}
@media (max-width:1100px){.nn-cw{position:static}}

.nn-fab{position:fixed;left:18px;bottom:18px;z-index:2147482500;display:flex;gap:8px;align-items:center}
.nn-fb{border:1px solid rgba(30,40,80,.18);background:#fff;color:#1b2340;font:700 14px/1 'Be Vietnam Pro',system-ui,sans-serif;padding:12px 18px;border-radius:999px;cursor:pointer;box-shadow:0 12px 30px -14px rgba(20,30,70,.5);display:inline-flex;align-items:center;gap:8px}
.nn-fb.pri{background:var(--coral,#ff6a4d);border-color:transparent;color:#fff}
.nn-fb:hover{transform:translateY(-2px)}
@media(max-width:991.98px){html.bm-hasnav .nn-fab{bottom:calc(84px + env(safe-area-inset-bottom,0px));left:12px}}
@media(max-width:575px){.nn-fb{padding:11px 14px;font-size:13px}}