/* VƯỜN NGOẠI NGỮ v6.15.203 — professional UI system */
:root{--vnn-ink:#18322f;--vnn-muted:#6d7d79;--vnn-line:#dfe9e5;--vnn-surface:#fff;--vnn-surface-soft:#f5f9f7;--vnn-brand:#147d6f;--vnn-brand-deep:#0e6258;--vnn-accent:#d99b2b;--vnn-radius:18px;--vnn-shadow:0 12px 34px rgba(24,50,47,.08);--vnn-shadow-soft:0 5px 18px rgba(24,50,47,.06)}
html{background:#f2f7f5}body.clarity-ui{background:linear-gradient(180deg,#f8fbfa 0,#f3f8f6 52%,#f7faf9 100%);color:var(--vnn-ink)}
body.clarity-ui .site-header{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(218,231,226,.92);box-shadow:0 4px 18px rgba(22,61,55,.045)}
body.clarity-ui .header-inner{min-height:72px;gap:18px}body.clarity-ui .brand-button{border-radius:14px;padding:7px 9px;text-align:left}body.clarity-ui .brand{letter-spacing:.035em}body.clarity-ui .tagline{color:var(--vnn-muted)}
body.clarity-ui button,body.clarity-ui .nav-pill,body.clarity-ui .cta{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
body.clarity-ui button:focus-visible,body.clarity-ui a:focus-visible,body.clarity-ui input:focus-visible,body.clarity-ui select:focus-visible{outline:3px solid rgba(20,125,111,.22);outline-offset:2px}
body.clarity-ui .nav-pill,body.clarity-ui .plan-chip,body.clarity-ui .user-chip{border:1px solid var(--vnn-line);background:#fff;box-shadow:none;border-radius:12px}
body.clarity-ui .nav-pill:hover,body.clarity-ui .plan-chip:hover{border-color:#bfd8d1;box-shadow:var(--vnn-shadow-soft);transform:translateY(-1px)}
body.clarity-ui .student-plus-cta{background:#fff9ea;border-color:#eed596;color:#7c5a14}body.clarity-ui .status-pill>i,body.clarity-ui .status-pill>span{display:none}body.student-experience .status-pill{display:none!important}
body.clarity-ui .container{max-width:1180px}body.clarity-ui .home-container{padding-top:28px}body.clarity-ui .home-hero{gap:28px;align-items:stretch}
body.clarity-ui .home-hero-copy,body.clarity-ui .student-today-hero{border:1px solid var(--vnn-line);border-radius:24px;background:rgba(255,255,255,.92);box-shadow:var(--vnn-shadow);padding:30px}
body.clarity-ui .home-hero h1{letter-spacing:-.035em;line-height:1.08}body.clarity-ui .student-home-dashboard{gap:18px}
body.clarity-ui .student-dash-card,body.clarity-ui .student-plan-strip,body.clarity-ui .student-progress-banner{border:1px solid var(--vnn-line);border-radius:var(--vnn-radius);background:var(--vnn-surface);box-shadow:var(--vnn-shadow-soft)}
body.clarity-ui .student-dash-card{padding:22px}body.clarity-ui .student-card-head{margin-bottom:14px}body.clarity-ui .student-card-head strong{font-size:1rem;letter-spacing:-.01em}
body.clarity-ui .student-period-pill{background:var(--vnn-surface-soft);border:1px solid var(--vnn-line);color:var(--vnn-muted)}
body.clarity-ui .student-summary-grid>div,body.clarity-ui .student-achievement{border:1px solid var(--vnn-line);background:#fbfdfc;border-radius:14px}
body.clarity-ui .course-card,body.clarity-ui .lesson-card,body.clarity-ui .season-card{border:1px solid var(--vnn-line)!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--vnn-shadow-soft)!important}
body.clarity-ui .course-card:hover,body.clarity-ui .lesson-card:hover{transform:translateY(-2px);box-shadow:var(--vnn-shadow)!important;border-color:#bed8d1!important}
body.clarity-ui .skill-tab{border-radius:12px}body.clarity-ui .skill-tab.active{box-shadow:0 5px 14px rgba(20,125,111,.12)}
body.clarity-ui .lesson-shell,body.clarity-ui .skill-panel,body.clarity-ui .lesson-content-card{border-color:var(--vnn-line)}
body.clarity-ui .account-banner{background:#f8fbfa;border-color:var(--vnn-line)}body.clarity-ui .account-banner-inner{gap:16px}
body.clarity-ui .user-chip{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;cursor:pointer}
.vnn-profile-avatar-trigger{border:0!important;background:transparent!important;padding:0!important;min-width:auto!important;min-height:auto!important;box-shadow:none!important}
.vnn-avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;flex:none;width:38px;height:38px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d7e6e1;background:#e9f4f0;color:var(--vnn-brand-deep);font-weight:800}
.vnn-avatar img{width:100%;height:100%;object-fit:cover;display:block}.vnn-avatar-sm{width:34px;height:34px;font-size:.72rem}.vnn-avatar-lg{width:62px;height:62px;font-size:1rem}.vnn-avatar-xl{width:104px;height:104px;font-size:1.55rem;box-shadow:0 0 0 1px #d7e6e1,0 10px 25px rgba(20,70,62,.12)}
.vnn-profile-overlay{position:fixed;inset:0;z-index:190;background:rgba(16,35,32,.48);display:grid;place-items:center;padding:20px;backdrop-filter:blur(7px)}.vnn-profile-overlay.hidden{display:none}
.vnn-profile-modal{width:min(620px,100%);max-height:min(760px,94vh);overflow:auto;background:#fff;border:1px solid #dce8e4;border-radius:24px;box-shadow:0 28px 80px rgba(11,38,33,.22)}
.vnn-profile-head{display:flex;justify-content:space-between;gap:18px;padding:24px 26px 18px;border-bottom:1px solid var(--vnn-line)}.vnn-profile-head span{display:block;color:var(--vnn-brand);font-size:.75rem;font-weight:800;letter-spacing:.09em}.vnn-profile-head h2{margin:5px 0 6px;font-size:1.45rem;letter-spacing:-.025em}.vnn-profile-head p{margin:0;color:var(--vnn-muted);line-height:1.5}
.vnn-profile-close{width:40px;height:40px;min-height:40px!important;border-radius:50%!important;border:1px solid var(--vnn-line)!important;background:#fff!important;font-size:1.45rem!important}
.vnn-profile-body{padding:24px 26px}.vnn-avatar-editor{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:20px;padding:18px;border-radius:18px;background:var(--vnn-surface-soft);border:1px solid var(--vnn-line)}.vnn-avatar-editor strong{display:block;margin-bottom:4px}.vnn-avatar-editor small,.vnn-profile-field small{display:block;color:var(--vnn-muted);line-height:1.45}
.vnn-profile-inline-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.vnn-profile-field{display:block;margin-top:20px}.vnn-profile-field>span{display:block;font-weight:800;margin-bottom:8px}
.vnn-profile-field input{width:100%;box-sizing:border-box;border:1px solid #ccdcd7;border-radius:12px;padding:12px 14px;font:inherit;background:#fff;min-height:46px}.vnn-profile-field small{margin-top:6px}.vnn-profile-message{min-height:22px;margin-top:12px;color:#a14b2b;font-weight:650}
.vnn-profile-footer{display:flex;justify-content:flex-end;gap:10px;padding:16px 26px 22px;border-top:1px solid var(--vnn-line)}.vnn-profile-footer button{min-height:44px}
.vnn-leaderboard-card{grid-column:1/-1}.vnn-leaderboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px}.vnn-leaderboard-head h3{margin:5px 0;font-size:1.2rem;letter-spacing:-.02em}.vnn-leaderboard-head p{margin:0;color:var(--vnn-muted)}
.vnn-week-pill{white-space:nowrap;border:1px solid #d8e6e1;background:#f2f8f6;border-radius:999px;padding:7px 10px;color:var(--vnn-brand-deep);font-size:.72rem;font-weight:850;letter-spacing:.06em}
.vnn-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;margin-bottom:16px}.vnn-podium-item{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;padding:18px 12px 15px;border:1px solid var(--vnn-line);border-radius:17px;background:linear-gradient(180deg,#fff,#f8fbfa)}
.vnn-podium-item.rank-1{padding-top:24px;border-color:#e3c476;background:linear-gradient(180deg,#fffaf0,#fff)}.vnn-podium-item.rank-2{border-color:#ccd5d9}.vnn-podium-item.rank-3{border-color:#d8b89c}.vnn-podium-item.is-me,.vnn-rank-row.is-me{box-shadow:inset 0 0 0 2px rgba(20,125,111,.18)}
.vnn-medal{font-size:1.5rem;line-height:1}.vnn-podium-item>b{font-size:1.25rem;color:var(--vnn-brand-deep)}.vnn-podium-item>b small{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--vnn-muted)}
.vnn-podium-item>div{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}.vnn-podium-item>div span{font-size:.68rem;color:#536b66;background:#eef5f2;border-radius:999px;padding:4px 6px}
.vnn-rank-list{display:grid;border:1px solid var(--vnn-line);border-radius:15px;overflow:hidden}.vnn-rank-row{display:grid;grid-template-columns:44px 40px minmax(0,1fr) 80px 72px;align-items:center;gap:9px;padding:11px 13px;background:#fff;border-bottom:1px solid #edf2f0}.vnn-rank-row:last-child{border-bottom:0}
.vnn-rank-no{text-align:center;color:#627873}.vnn-rank-name{min-width:0}.vnn-rank-name b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vnn-rank-name small{display:block;color:var(--vnn-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.vnn-rank-score,.vnn-rank-quiz{text-align:right}.vnn-rank-score strong{color:var(--vnn-brand-deep);font-size:1.05rem}.vnn-rank-score small,.vnn-rank-quiz small{display:block;color:var(--vnn-muted);font-size:.65rem}
.vnn-my-rank{margin-top:12px;padding:10px 12px;border-radius:12px;background:#eef7f4;color:#345f58;text-align:center}.vnn-score-rules{margin-top:12px;border-top:1px solid var(--vnn-line);padding-top:10px;color:var(--vnn-muted)}.vnn-score-rules summary{cursor:pointer;font-weight:750;color:#49665f}.vnn-score-rules p{margin:8px 0 0;font-size:.82rem;line-height:1.5}
@media(max-width:900px){body.clarity-ui .site-header{position:relative}body.clarity-ui .home-container{padding-top:18px}body.clarity-ui .home-hero-copy,body.clarity-ui .student-today-hero{padding:22px}.vnn-podium{grid-template-columns:1fr}.vnn-podium-item.rank-1{order:-1}.vnn-rank-row{grid-template-columns:36px 34px minmax(0,1fr) 60px}.vnn-rank-quiz{display:none}}
@media(max-width:600px){body.clarity-ui .student-dash-card{padding:17px}body.clarity-ui button{min-height:44px}.vnn-profile-overlay{padding:10px;align-items:end}.vnn-profile-modal{border-radius:22px 22px 12px 12px;max-height:92vh}.vnn-profile-head,.vnn-profile-body{padding-left:18px;padding-right:18px}.vnn-profile-footer{padding-left:18px;padding-right:18px;position:sticky;bottom:0;background:#fff}.vnn-avatar-editor{grid-template-columns:1fr;text-align:center}.vnn-avatar-editor>#vnnProfileAvatarPreview{justify-self:center}.vnn-profile-inline-actions{justify-content:center}.vnn-leaderboard-head{display:block}.vnn-week-pill{display:inline-block;margin-top:10px}.vnn-rank-name small{white-space:normal;line-height:1.25}}
@media(prefers-reduced-motion:reduce){body.clarity-ui button,body.clarity-ui .nav-pill,body.clarity-ui .cta{transition:none!important}}



/* Vườn League v6.15.203 — preserve existing scoring, replace only presentation */
.vnn-fallback-leaderboard-hidden,.vnn-league-source-hidden{display:none!important}
.vnn-league-stage{margin:16px 0 22px}
.vnn-league-head{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:18px;padding:0 4px}
.vnn-league-head span{display:block;color:var(--vnn-brand);font-size:.74rem;font-weight:900;letter-spacing:.09em}
.vnn-league-head h3{margin:5px 0 5px;font-size:1.28rem;letter-spacing:-.025em}
.vnn-league-head p{margin:0;max-width:720px;color:var(--vnn-muted);line-height:1.48}
.vnn-league-head em{font-style:normal;white-space:nowrap;border:1px solid #d9e7e2;background:#f2f8f6;border-radius:999px;padding:8px 11px;color:#55716b;font-size:.72rem;font-weight:800}
.vnn-league-podium{display:grid;grid-template-columns:1fr 1.13fr 1fr;gap:13px;align-items:end;margin-bottom:15px}
.vnn-league-champion{order:var(--podium-order);position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:19px 14px 16px;border:1px solid var(--vnn-line);border-radius:22px;background:linear-gradient(180deg,#fff,#f8fbfa);box-shadow:0 8px 22px rgba(25,67,60,.055)}
.vnn-league-champion.rank-1{padding-top:28px;padding-bottom:20px;border-color:#e5c461;background:radial-gradient(circle at 50% 0,#fff4c7 0,#fffaf0 32%,#fff 72%);box-shadow:0 15px 34px rgba(156,113,16,.12)}
.vnn-league-champion.rank-2{border-color:#cbd5da;background:linear-gradient(180deg,#f8fafb,#fff)}
.vnn-league-champion.rank-3{border-color:#dfbca1;background:linear-gradient(180deg,#fff7f1,#fff)}
.vnn-league-champion.is-me{box-shadow:inset 0 0 0 2px rgba(20,125,111,.22),0 14px 32px rgba(20,125,111,.09)}
.vnn-league-crown{font-size:1.72rem;line-height:1;margin-bottom:9px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.07))}
.vnn-avatar-league{width:64px;height:64px;font-size:1rem}
.vnn-avatar-champion{width:82px;height:82px;font-size:1.22rem;border-width:3px;box-shadow:0 0 0 2px #efd377,0 10px 24px rgba(112,82,17,.12)}
.vnn-league-person{display:flex;align-items:center;gap:4px;max-width:100%;margin-top:10px}
.vnn-league-person strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1rem}
.vnn-league-person small{color:var(--vnn-brand);font-size:.68rem;font-weight:900}
.vnn-league-main-score{display:block;margin-top:7px;font-size:1.55rem;letter-spacing:-.035em;color:var(--vnn-ink)}
.rank-1 .vnn-league-main-score{font-size:1.8rem;color:#6f5412}
.vnn-league-sub-score{display:block;margin-top:1px;color:var(--vnn-muted);font-size:.76rem}
.vnn-league-gap{margin-top:9px;border-radius:999px;background:#edf5f2;padding:5px 8px;color:#58706b;font-size:.67rem;font-weight:750}
.rank-1 .vnn-league-gap{background:#fff3c9;color:#7a5d16}
.vnn-league-meter{width:100%;height:5px;margin-top:12px;border-radius:999px;background:#eaf0ee;overflow:hidden}
.vnn-league-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#29a18f,#137a6d)}
.rank-1 .vnn-league-meter i{background:linear-gradient(90deg,#e1b940,#bd8e18)}
.vnn-league-list{display:grid;gap:8px;margin-top:13px}
.vnn-league-row{display:grid;grid-template-columns:48px 42px minmax(0,1fr) minmax(112px,auto);align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--vnn-line);border-radius:16px;background:#fff}
.vnn-league-row.is-me{border-color:#69c9b9;background:#effaf7;box-shadow:inset 4px 0 0 var(--vnn-brand)}
.vnn-league-rank{font-size:1.06rem;font-weight:900;text-align:center;color:#44615b}
.vnn-league-row-name{min-width:0}
.vnn-league-row-name>strong{font-size:.94rem}
.vnn-league-row-name>span{margin-left:6px;border-radius:999px;background:#dff3ed;padding:3px 6px;color:var(--vnn-brand-deep);font-size:.62rem;font-weight:900;text-transform:uppercase}
.vnn-league-row-name>small{display:block;margin-top:2px;color:var(--vnn-muted);font-size:.72rem}
.vnn-league-row-name>i{display:block;width:min(260px,100%);height:4px;margin-top:7px;border-radius:999px;background:#ebf1ef;overflow:hidden}
.vnn-league-row-name>i>b{display:block;height:100%;border-radius:inherit;background:#68b8a9}
.vnn-league-row-score{text-align:right}
.vnn-league-row-score strong{display:block;font-size:1rem;color:var(--vnn-ink)}
.vnn-league-row-score small{display:block;margin-top:3px;color:var(--vnn-muted);font-size:.64rem}
.vnn-league-note{display:flex;gap:10px;align-items:flex-start;margin-top:13px;padding:11px 13px;border:1px dashed #d0e2dc;border-radius:14px;background:#f8fbfa}
.vnn-league-note>span{font-size:1.15rem}.vnn-league-note p{margin:0;color:#5d716d;font-size:.75rem;line-height:1.45}.vnn-league-note strong{color:#355b54}
.vnn-league-loading,.vnn-league-empty{padding:28px;text-align:center;color:var(--vnn-muted);border:1px solid var(--vnn-line);border-radius:18px;background:#fff}
.vnn-existing-leaderboard .vnn-legacy-credit-card{border:1px solid #eadbb6!important;background:linear-gradient(180deg,#fffaf0,#fff)!important;box-shadow:none!important}
.vnn-existing-leaderboard .vnn-legacy-rules-card{border:1px solid var(--vnn-line)!important;background:#fbfdfc!important}
@media(max-width:780px){
  .vnn-league-head{display:block}.vnn-league-head em{display:inline-block;margin-top:9px}
  .vnn-league-podium{grid-template-columns:1fr;align-items:stretch}
  .vnn-league-champion{order:initial!important}
  .vnn-league-champion.rank-1{order:-1!important}
  .vnn-league-row{grid-template-columns:38px 38px minmax(0,1fr)}
  .vnn-league-row-score{grid-column:3;text-align:left;display:flex;align-items:center;gap:7px}
  .vnn-league-row-score small{margin-top:0}
}