/* ==========================================================================
   LAYOUT — vỏ trang học: sidebar, topbar, vùng nội dung, menu người dùng
   Sinh ra từ đợt refactor: chỉ di chuyển code, không đổi luật CSS nào.
   ========================================================================== */
/* Chỉ index.html nạp file này. Trang admin và login có vỏ riêng, đặt trong
   pages/admin.css và pages/login.css — không gộp được vì trùng tên class .topbar. */
/* ==========================================================================
   ỨNG DỤNG HỌC — vỏ trang, sidebar, hub, trang khoá, trình phát
   ========================================================================== */
.app{display:flex;min-height:100vh;min-height:100dvh;}

/* --- SIDEBAR -------------------------------------------------------------- */
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);
  background:var(--bg-subtle);border-right:1px solid var(--border);
  position:sticky;top:0;height:100vh;height:100dvh;
  display:flex;flex-direction:column;z-index:40;
  transition:margin-left var(--dur-4) var(--ease);
}
body.sb-collapsed .sidebar{margin-left:calc(var(--sidebar-w) * -1);}

.brand{padding:var(--sp-20) var(--sp-20) var(--sp-16);}
.brand img{display:block;width:88px;max-width:100%;height:auto;}
:root[data-theme="dark"] .brand img{filter:brightness(0) invert(1);opacity:.9;}
.brand .ttl{font-size:var(--fs-15);font-weight:600;letter-spacing:var(--tr-snug);margin-top:var(--sp-16);}
.brand .ttl em{font-style:normal;color:var(--accent-text);}
.brand .sub{font-size:var(--fs-12);color:var(--text-3);margin-top:2px;line-height:1.45;}

/* Ô tìm kiếm trong sidebar — lọc trực tiếp danh sách bên dưới */
.side-search{position:relative;display:flex;align-items:center;padding:0 var(--sp-16) var(--sp-12);}
.side-search svg{position:absolute;left:28px;width:15px;height:15px;color:var(--text-3);pointer-events:none;}
.side-search input{
  width:100%;min-height:34px;padding:6px 10px 6px 34px;
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--r-md);font-size:var(--fs-13);
  transition:border-color var(--dur-1),box-shadow var(--dur-1);
}
.side-search input::placeholder{color:var(--text-3);}
.side-search input::-webkit-search-cancel-button{-webkit-appearance:none;}
.side-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);}

.side-context{flex:0 0 auto;}
.side-label{font-size:var(--fs-11);font-weight:600;letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--text-3);padding:var(--sp-4) var(--sp-20) 0;}
.back-btn{
  display:inline-flex;align-items:center;gap:6px;margin:0 var(--sp-12);
  padding:6px 8px;border-radius:var(--r-sm);
  color:var(--text-3);font-size:var(--fs-13);font-weight:500;
  transition:color var(--dur-1),background var(--dur-1);
}
.back-btn:hover{color:var(--text);background:var(--surface-hover);}
.back-btn svg{width:14px;height:14px;}
.ctx-course{font-size:var(--fs-14);font-weight:600;color:var(--text);padding:2px var(--sp-20) 0;letter-spacing:var(--tr-snug);line-height:1.35;}

.progress-overall{padding:var(--sp-16) var(--sp-20);margin-top:var(--sp-12);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.progress-overall .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.progress-overall .lbl{font-size:var(--fs-11);font-weight:600;letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--text-3);}
.progress-overall .pct{font-size:var(--fs-13);font-weight:600;color:var(--accent-text);font-variant-numeric:tabular-nums;}
.bar{height:6px;background:var(--bg-sunken);border-radius:var(--r-full);overflow:hidden;}
.bar > span{display:block;height:100%;width:0;background:var(--accent);border-radius:var(--r-full);transition:width var(--dur-4) var(--ease);}

.nav{flex:1;overflow-y:auto;padding:var(--sp-12) var(--sp-12) var(--sp-32);overscroll-behavior:contain;}
.nav-empty{padding:var(--sp-24) var(--sp-12);text-align:center;font-size:var(--fs-13);color:var(--text-3);}

/* Danh sách khoá (chế độ hub) */
.course-link{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 10px;border-radius:var(--r-md);margin-top:2px;color:var(--text);
  transition:background var(--dur-1) var(--ease);
}
.course-link:hover{background:var(--surface-hover);}
.course-link:active{background:var(--surface-active);}
.cl-badge{
  flex:0 0 auto;width:26px;height:26px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border);color:var(--text-2);
  font-size:var(--fs-11);font-weight:600;font-variant-numeric:tabular-nums;
}
.cl-text{flex:1;min-width:0;}
.cl-title{display:block;font-size:var(--fs-13);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cl-meta{display:block;font-size:var(--fs-11);color:var(--text-3);font-variant-numeric:tabular-nums;margin-top:1px;}
.course-link .chev{width:14px;height:14px;color:var(--text-3);opacity:0;transition:opacity var(--dur-1);}
.course-link:hover .chev{opacity:1;}

/* Phần + bài (chế độ khoá) */
.section{margin-top:2px;}
.section-head{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;color:var(--text);
  padding:8px 10px;border-radius:var(--r-md);
  transition:background var(--dur-1) var(--ease);
}
.section-head:hover{background:var(--surface-hover);}
.section-head .code{flex:0 0 auto;font-size:var(--fs-11);font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums;}
.section-head .name{flex:1;font-size:var(--fs-13);font-weight:600;letter-spacing:var(--tr-snug);line-height:1.35;}
.section-head .count{font-size:var(--fs-11);color:var(--text-3);font-variant-numeric:tabular-nums;}
.section-head .chev{width:14px;height:14px;color:var(--text-3);transition:transform var(--dur-2) var(--ease);}
.section.collapsed .chev{transform:rotate(-90deg);}
.section.collapsed .lessons{display:none;}

.lessons{margin:2px 0 var(--sp-8);}
.group-head{
  display:flex;align-items:center;gap:8px;
  padding:var(--sp-8) 10px 4px 12px;
  font-size:var(--fs-11);font-weight:600;letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--text-3);
}
.group-head .g-name{flex:1;line-height:1.4;}
.group-head .g-count{font-variant-numeric:tabular-nums;letter-spacing:0;text-transform:none;font-weight:500;}

.lesson{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:7px 10px 7px 12px;border-radius:var(--r-md);cursor:pointer;
  color:var(--text-2);font-size:var(--fs-13);
  transition:background var(--dur-1) var(--ease),color var(--dur-1);
}
.lesson:hover{background:var(--surface-hover);color:var(--text);}
.lesson .num{flex:0 0 20px;font-size:var(--fs-11);color:var(--text-3);font-variant-numeric:tabular-nums;}
.lesson .title{flex:1;line-height:1.4;}
.lesson .dur{flex:0 0 auto;font-size:var(--fs-11);color:var(--text-3);font-variant-numeric:tabular-nums;}
.lesson .dot{
  flex:0 0 auto;width:16px;height:16px;border-radius:50%;
  border:1.5px solid var(--border-stronger);display:grid;place-items:center;
  transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease);
}
.lesson .dot svg{display:none;width:9px;height:9px;stroke-width:3;color:var(--text-on-accent);}
.lesson.watched .dot{background:var(--accent);border-color:var(--accent);}
.lesson.watched .dot svg{display:block;}
.lesson.watched .title{color:var(--text-3);}
.lesson.active{background:var(--accent-bg);color:var(--text);font-weight:500;}
.lesson.active::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:var(--r-full);background:var(--accent);}
.lesson.active .title{color:var(--text);}
.lesson.active .num{color:var(--accent-text);}

/* --- KHU VỰC CHÍNH -------------------------------------------------------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column;}
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:var(--sp-8);
  height:var(--topbar-h);padding:0 var(--sp-24);
  background:var(--bg);border-bottom:1px solid var(--border);
}
.icon-btn{
  width:32px;height:32px;flex:0 0 auto;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;color:var(--text-3);
  transition:background var(--dur-1),color var(--dur-1);
}
.icon-btn:hover{background:var(--surface-hover);color:var(--text);}
.icon-btn svg{width:17px;height:17px;}
.hamburger{display:none;}
.sb-toggle{display:inline-flex;}

.crumb{
  display:flex;align-items:center;gap:6px;min-width:0;
  font-size:var(--fs-13);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.crumb b{color:var(--text);font-weight:500;}
.crumb-link{color:var(--text-3);font-size:var(--fs-13);padding:2px 4px;border-radius:var(--r-xs);transition:color var(--dur-1),background var(--dur-1);}
.crumb-link:hover{color:var(--text);background:var(--surface-hover);}
.crumb-sep{color:var(--border-stronger);}

.top-meta{margin-left:auto;flex:0 0 auto;font-size:var(--fs-12);color:var(--text-3);font-variant-numeric:tabular-nums;}
.top-meta b{color:var(--text-2);font-weight:600;}

.admin-btn{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  height:32px;padding:0 10px;border-radius:var(--r-sm);
  border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text-2);font-size:var(--fs-13);font-weight:500;white-space:nowrap;
  transition:background var(--dur-1),border-color var(--dur-1),color var(--dur-1);
}
.admin-btn svg{width:15px;height:15px;}
.admin-btn:hover{background:var(--surface-hover);border-color:var(--border-stronger);color:var(--text);}

.back-btn-top{
  display:none;align-items:center;gap:5px;flex:0 0 auto;
  height:32px;padding:0 10px;border-radius:var(--r-sm);
  color:var(--text-2);font-size:var(--fs-13);white-space:nowrap;
  transition:background var(--dur-1),color var(--dur-1);
}
.back-btn-top svg{width:14px;height:14px;margin-left:-2px;}
.back-btn-top:hover{background:var(--surface-hover);color:var(--text);}

/* Menu người dùng */
.user-menu{position:relative;flex:0 0 auto;}
.user-btn{
  display:flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 4px;border-radius:var(--r-md);
  transition:background var(--dur-1);
}
.user-btn:hover{background:var(--surface-hover);}
.user-btn .chev{width:14px;height:14px;color:var(--text-3);}
.user-btn .ub-name{max-width:150px;font-size:var(--fs-13);font-weight:500;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ub-avatar{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--text-on-accent);
  font-size:var(--fs-12);font-weight:600;text-transform:uppercase;
}
.user-pop{top:calc(100% + 6px);right:0;min-width:236px;}
.user-pop .ub-info{display:flex;flex-direction:column;padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:5px;}
.ub-name{font-size:var(--fs-13);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ub-role{font-size:var(--fs-12);color:var(--text-3);margin-top:1px;}
.ub-role.admin{color:var(--accent-text);font-weight:500;}
.theme-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;}
.theme-row span{font-size:var(--fs-13);color:var(--text-2);}
.theme-seg{display:inline-flex;gap:2px;padding:2px;background:var(--bg-sunken);border-radius:var(--r-sm);}
.theme-seg button{width:28px;height:24px;border-radius:var(--r-xs);display:grid;place-items:center;color:var(--text-3);transition:background var(--dur-1),color var(--dur-1);}
.theme-seg button svg{width:14px;height:14px;}
.theme-seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--sh-xs);}

.content{width:100%;max-width:var(--content-w);margin:0 auto;padding:var(--sp-32) var(--sp-32) var(--sp-80);}
.scrim{display:none;position:fixed;inset:0;z-index:35;background:rgba(12,16,17,.45);}
:root[data-theme="dark"] .scrim{background:rgba(0,0,0,.6);}