/* ══════════════════════════════════════════════
   AE-PLX-LANGSON – Module HỌC TIẾNG TRUNG
   Theme Dark Blue đồng bộ với Dashboard v7
   ══════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --sidebar-w:220px;
  --header-h:56px;
  --bg:       #0b1520;
  --surface:  #0e1d2e;
  --surface2: #0f2236;
  --border:   rgba(42,127,255,.12);
  --blue:     #2a7fff;
  --blue2:    #1a4fff;
  --text:     #e0e8f0;
  --muted:    #4a7a9a;
  --dim:      #2a4a5a;
}
body{
  font-family:'Segoe UI',Arial,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;display:flex;flex-direction:column;
}
button{font-family:inherit;}

/* ══ HEADER (đồng bộ home) ═══════════════════ */
.hdr{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  background:#081628;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
  padding:0 18px;gap:14px;
  z-index:200;
}
.hdr-logo{display:flex;align-items:center;gap:10px;width:var(--sidebar-w);flex-shrink:0;}
.hdr-icon{
  width:36px;height:36px;border-radius:9px;
  background:linear-gradient(135deg,#1a5fa5,#f5a623);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:14px;color:#fff;
  box-shadow:0 0 12px rgba(245,166,35,.25);
  flex-shrink:0;
}
.hdr-name{font-size:15px;font-weight:800;color:#fff;letter-spacing:.3px;}
.hdr-sub{font-size:9px;color:#3a6a8a;text-transform:uppercase;letter-spacing:2px;}
.hdr-ticker{
  flex:1;overflow:hidden;white-space:nowrap;
  border-left:1px solid rgba(255,255,255,.06);
  border-right:1px solid rgba(255,255,255,.06);
  padding:0 16px;
}
.ticker-txt{
  display:inline-block;padding-left:100%;
  animation:ticker 22s linear infinite;
  font-size:12px;font-weight:600;color:#00c8ff;letter-spacing:.6px;
}
@keyframes ticker{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}
.hdr-right{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.hdr-clock{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);}
.hdr-clock .time{font-size:15px;font-weight:700;color:#fff;}
.hdr-status-pill{
  display:flex;align-items:center;gap:6px;
  background:rgba(0,200,100,.08);
  border:1px solid rgba(0,200,100,.15);
  border-radius:20px;padding:4px 10px;
  font-size:11px;color:#00c864;font-weight:700;
}
.dot-live{width:6px;height:6px;border-radius:50%;background:#00e87a;animation:blink 1.8s infinite;}
.hdr-gia{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);cursor:pointer;}
.hdr-gia-val{font-size:12px;font-weight:600;color:#fff;}
.hdr-user{display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:8px;cursor:pointer;transition:.2s;}
.hdr-user:hover{background:rgba(255,255,255,.06);}
.hdr-avatar{
  width:30px;height:30px;border-radius:8px;
  background:linear-gradient(135deg,#2a7fff,#1a4fff);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;
}
.hdr-uname{font-size:12px;color:#fff;font-weight:600;}
.user-dropdown{
  display:none;position:absolute;top:46px;right:0;
  width:220px;background:#0d1e30;
  border:1px solid rgba(42,127,255,.18);
  border-radius:12px;overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.7);
  z-index:2000;animation:dropIn .18s ease;
}
@keyframes dropIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
.user-menu-head{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:10px;}
.user-menu-avatar{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#2a7fff,#1a4fff);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:800;color:#fff;flex-shrink:0;
}
.user-menu-name{font-size:13px;font-weight:700;color:#fff;}
.user-menu-role{
  font-size:10px;color:#2a5a7a;background:rgba(42,127,255,.1);
  border-radius:8px;padding:1px 7px;display:inline-block;margin-top:2px;
}
.user-menu-item{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  font-size:12px;font-weight:500;color:#7a9aaa;
  text-decoration:none;cursor:pointer;transition:.15s;
  border:none;background:none;width:100%;text-align:left;
}
.user-menu-item:hover{background:rgba(42,127,255,.08);color:#fff;}
.user-menu-item .mi-icon{font-size:15px;width:18px;text-align:center;}
.user-menu-divider{height:1px;background:rgba(255,255,255,.05);margin:4px 0;}

/* ══ SIDEBAR (đồng bộ home) ══════════════════ */
.sidebar{
  position:fixed;top:var(--header-h);left:0;
  width:var(--sidebar-w);height:calc(100vh - var(--header-h));
  background:#081628;border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;z-index:100;
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{display:none;}
.sb-section{padding:14px 10px 4px;}
.sb-section-title{
  font-size:9px;font-weight:700;color:#2a4a6a;
  text-transform:uppercase;letter-spacing:2px;
  padding:0 8px;margin-bottom:4px;
}
.sb-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:10px;
  font-size:13px;font-weight:500;color:#5a8aaa;
  text-decoration:none;cursor:pointer;
  transition:all .18s;margin-bottom:2px;position:relative;
}
.sb-item:hover{background:rgba(42,127,255,.08);color:#aac8e0;}
.sb-item.active{background:rgba(42,127,255,.15);color:#fff;font-weight:600;}
.sb-item.active::before{
  content:'';position:absolute;left:0;top:6px;bottom:6px;
  width:3px;background:#2a7fff;border-radius:0 3px 3px 0;
}
.sb-icon{font-size:16px;width:20px;text-align:center;flex-shrink:0;}
.sb-divider{height:1px;background:rgba(255,255,255,.04);margin:8px 12px;}
.sb-support{margin-top:auto;padding:14px 12px;border-top:1px solid var(--border);}
.sb-support-title{font-size:9px;font-weight:700;color:#2a4a6a;text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;}
.sb-contact{display:flex;align-items:center;gap:8px;font-size:11px;color:#3a6a8a;margin-bottom:6px;}
.sb-contact a{color:#3a6a8a;text-decoration:none;}
.sb-contact a:hover{color:#4a9fff;}

/* ══ CONTENT ══════════════════════════════════ */
.content{
  margin-left:var(--sidebar-w);
  margin-top:var(--header-h);
  padding:18px;
  min-height:calc(100vh - var(--header-h));
  display:flex;flex-direction:column;gap:16px;
}

/* ══ CARD CHUNG (đồng bộ home) ════════════════ */
.eng-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;overflow:hidden;
  animation:cardIn .45s ease both;
}
.eng-card:nth-child(2){animation-delay:.06s;}
.eng-card:nth-child(3){animation-delay:.12s;}
@keyframes cardIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.card-title{font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:7px;}
.card-note{font-size:11px;color:var(--muted);}
.card-body{padding:12px 14px;flex:1;overflow-y:auto;max-height:320px;}
.card-body::-webkit-scrollbar{width:3px;}
.card-body::-webkit-scrollbar-thumb{background:#1a3a5a;border-radius:2px;}

/* ══ HÀNG 1: PROFILE + PROGRESS ═══════════════ */
.eng-top-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;}

/* ── Profile ── */
.profile-inner{display:flex;align-items:center;gap:20px;padding:20px;}

/* Vòng XP quanh avatar – điểm nhấn của trang */
.avatar-ring{
  --xp-deg:0deg;
  width:92px;height:92px;border-radius:50%;
  background:conic-gradient(var(--blue) var(--xp-deg), rgba(42,127,255,.12) 0);
  display:flex;align-items:center;justify-content:center;
  position:relative;flex-shrink:0;
  animation:ringIn 1s ease;
}
@keyframes ringIn{from{transform:rotate(-90deg) scale(.85);opacity:0;}to{transform:rotate(0) scale(1);opacity:1;}}
.avatar-core{
  width:78px;height:78px;border-radius:50%;
  background:var(--surface2);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:36px;
}
.avatar-level{
  position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--blue2),var(--blue));
  color:#fff;font-size:10px;font-weight:800;
  padding:2px 9px;border-radius:10px;
  box-shadow:0 3px 10px rgba(42,127,255,.4);
  white-space:nowrap;
}
.profile-info{flex:1;min-width:0;}
.profile-name{font-size:19px;font-weight:800;color:#fff;}
.profile-unit{font-size:11px;color:var(--muted);margin-top:2px;margin-bottom:10px;}
.xp-bar{
  height:8px;border-radius:6px;overflow:hidden;
  background:rgba(42,127,255,.1);
  border:1px solid rgba(42,127,255,.15);
}
.xp-fill{
  height:100%;border-radius:6px;width:0;
  background:linear-gradient(90deg,var(--blue2),#00c8ff);
  box-shadow:0 0 10px rgba(42,127,255,.5);
  transition:width 1.2s cubic-bezier(.22,1,.36,1);
}
.xp-text{
  display:flex;justify-content:space-between;
  font-size:11px;color:var(--muted);margin-top:6px;
}
.xp-total{color:#4a9fff;font-weight:600;}
.streak-box{
  text-align:center;flex-shrink:0;
  background:rgba(255,152,0,.06);
  border:1px solid rgba(255,152,0,.15);
  border-radius:14px;padding:14px 18px;
}
.streak-flame{font-size:26px;animation:flame 1.6s ease-in-out infinite;}
@keyframes flame{0%,100%{transform:scale(1);}50%{transform:scale(1.15) rotate(-4deg);}}
.streak-num{font-size:24px;font-weight:800;color:#ffb340;line-height:1.1;}
.streak-label{font-size:9px;color:#8a6a3a;text-transform:uppercase;letter-spacing:1px;margin-top:2px;}

/* ── Progress ── */
.progress-inner{display:flex;align-items:center;gap:22px;padding:18px 20px;}
.progress-percent{text-align:center;flex-shrink:0;}
.pp-val{font-size:40px;font-weight:800;color:#fff;line-height:1;}
.pp-unit{font-size:20px;font-weight:700;color:var(--blue);}
.pp-label{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-top:4px;}
.progress-right{flex:1;min-width:0;}
.progress-track{
  height:10px;border-radius:6px;overflow:hidden;
  background:rgba(42,127,255,.1);
  border:1px solid rgba(42,127,255,.15);
}
.progress-fill{
  height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,#00c864,#00e87a);
  box-shadow:0 0 10px rgba(0,232,122,.4);
  transition:width 1.2s cubic-bezier(.22,1,.36,1) .2s;
}
.progress-stats{display:flex;gap:26px;margin-top:12px;}
.ps-item{display:flex;align-items:baseline;gap:5px;}
.ps-val{font-size:20px;font-weight:800;color:#fff;}
.ps-label{font-size:11px;color:var(--muted);}

/* ══ HÀNG 2: CHẾ ĐỘ HỌC ══════════════════════ */
.mode-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;padding:14px;
}
.mode-card{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:14px;padding:16px 14px;
  text-align:center;cursor:pointer;
  transition:all .2s;
  text-decoration:none;display:block;   /* để thẻ <a> hiển thị giống <button> */
}
.mode-card:hover{
  border-color:rgba(42,127,255,.35);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.mode-card:hover .mode-icon{transform:scale(1.12);}
.mode-card:active{transform:translateY(-1px) scale(.98);}
.mode-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.mode-icon{
  width:48px;height:48px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin:0 auto 10px;
  transition:transform .2s;
}
.mode-icon.blue  {background:rgba(42,127,255,.12);}
.mode-icon.green {background:rgba(0,200,100,.1);}
.mode-icon.orange{background:rgba(245,166,35,.1);}
.mode-icon.purple{background:rgba(160,90,255,.1);}
.mode-icon.cyan  {background:rgba(0,200,255,.1);}
.mode-icon.pink  {background:rgba(255,90,160,.1);}
.mode-icon.red   {background:rgba(255,69,0,.12);}
.mode-icon.gold  {background:rgba(255,200,0,.1);}
.mode-name{font-size:13px;font-weight:700;color:#fff;}
.mode-sub{font-size:10px;color:var(--muted);margin-top:3px;}

/* ══ HÀNG 3: LESSON / MISSION / ACHIEVEMENT ══ */
.eng-mid-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.eng-mid-grid .eng-card{display:flex;flex-direction:column;}

/* ── Bài học gần đây ── */
.lesson-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:9px;
  background:rgba(42,127,255,.05);
  border-left:2px solid var(--blue);
  margin-bottom:8px;transition:.18s;
}
.lesson-item:hover{background:rgba(42,127,255,.09);}
.lesson-icon{font-size:19px;flex-shrink:0;}
.lesson-info{flex:1;min-width:0;}
.lesson-title{font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lesson-meta{font-size:10px;color:#3a5a6a;margin-top:2px;}
.lesson-xp{font-size:11px;font-weight:700;color:#00e87a;flex-shrink:0;}

/* ── Daily Mission ── */
.mission-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:9px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.05);
  margin-bottom:8px;transition:.18s;
}
.mission-item:hover{border-color:rgba(42,127,255,.2);}
.mission-check{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  border:2px solid rgba(42,127,255,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#fff;
}
.mission-item.done .mission-check{background:#00c864;border-color:#00c864;}
.mission-item.done .mission-text{text-decoration:line-through;color:#3a5a6a;}
.mission-icon{font-size:16px;flex-shrink:0;}
.mission-text{flex:1;font-size:12px;color:#c0d8ee;min-width:0;}
.mission-xp{font-size:10px;font-weight:700;color:#ffb340;flex-shrink:0;}

/* ── Achievement ── */
.ach-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;
}
.ach-item{
  text-align:center;padding:12px 6px;
  background:rgba(255,200,0,.05);
  border:1px solid rgba(255,200,0,.14);
  border-radius:11px;transition:.2s;cursor:default;
}
.ach-item:hover{transform:translateY(-2px);}
.ach-item.locked{
  background:rgba(255,255,255,.02);
  border-color:rgba(255,255,255,.05);
  filter:grayscale(1);opacity:.45;
}
.ach-icon{font-size:22px;}
.ach-name{font-size:10px;font-weight:700;color:#fff;margin-top:5px;}
.ach-desc{font-size:8px;color:var(--muted);margin-top:2px;line-height:1.4;}

/* ── Empty state ── */
.eng-empty{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;min-height:180px;gap:10px;
}
.eng-empty-icon{font-size:38px;opacity:.3;}
.eng-empty p{font-size:12px;color:#2a4a5a;text-align:center;line-height:1.6;}

/* ══ HÀNG 4: LEADERBOARD ═════════════════════ */
.lb-list{padding:10px 14px 14px;}
.lb-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;border-radius:10px;
  border:1px solid transparent;
  margin-bottom:6px;transition:.18s;
}
.lb-row:hover{background:rgba(42,127,255,.06);}
.lb-row.top1{background:rgba(255,200,0,.06);border-color:rgba(255,200,0,.15);}
.lb-row.top2{background:rgba(200,210,225,.05);border-color:rgba(200,210,225,.12);}
.lb-row.top3{background:rgba(205,127,50,.06);border-color:rgba(205,127,50,.14);}
.lb-rank{width:30px;text-align:center;font-size:17px;flex-shrink:0;}
.lb-rank-num{font-size:12px;font-weight:700;color:var(--muted);}
.lb-avatar{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:var(--surface2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.lb-info{flex:1;min-width:0;}
.lb-name{font-size:12px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-unit{font-size:10px;color:#3a5a6a;}
.lb-level{
  font-size:10px;font-weight:700;color:#4a9fff;
  background:rgba(42,127,255,.1);
  border-radius:8px;padding:2px 8px;flex-shrink:0;
}
.lb-xp{font-size:13px;font-weight:800;color:#fff;width:76px;text-align:right;flex-shrink:0;}

/* ══ TOAST ════════════════════════════════════ */
.toast{
  position:fixed;bottom:26px;left:50%;
  transform:translate(-50%,80px);
  display:flex;align-items:center;gap:9px;
  background:#0d1e30;
  border:1px solid rgba(42,127,255,.3);
  border-radius:12px;padding:11px 20px;
  font-size:13px;font-weight:600;color:#fff;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;
  transition:all .3s cubic-bezier(.22,1,.36,1);
  z-index:9999;
}
.toast.show{transform:translate(-50%,0);opacity:1;}
.toast-icon{font-size:16px;}

/* ══ FOOTER ═══════════════════════════════════ */
.footer{
  background:#050d18;border-top:1px solid var(--border);
  padding:12px 18px;margin-left:var(--sidebar-w);
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:8px;
}
.footer-l,.footer-c{font-size:11px;color:#2a4a5a;}
.footer-r{display:flex;align-items:center;gap:6px;font-size:11px;color:#2a5a3a;}
.footer-dot-g{width:6px;height:6px;border-radius:50%;background:#00e87a;animation:blink 2s infinite;}

/* ══ UTILS ════════════════════════════════════ */
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.15;}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}

/* ══ RESPONSIVE ═══════════════════════════════ */
@media(max-width:1100px){
  .eng-top-grid{grid-template-columns:1fr;}
  .eng-mid-grid{grid-template-columns:1fr;}
  .mode-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:800px){
  :root{--sidebar-w:0px;}
  .sidebar{display:none;}
  .hdr-ticker,.hdr-clock,.hdr-status-pill,.hdr-gia{display:none;}
  .footer{margin-left:0;}
  .mode-grid{grid-template-columns:repeat(2,1fr);}
  .profile-inner{flex-direction:column;text-align:center;gap:14px;}
  .profile-info{width:100%;}
  .progress-inner{flex-direction:column;gap:14px;}
  .progress-right{width:100%;}
  .progress-stats{justify-content:center;}
  .ach-grid{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:420px){
  .mode-grid{grid-template-columns:1fr 1fr;gap:8px;padding:10px;}
  .lb-xp{width:auto;}
}