/* =====================================================================
   shell.css — phần khung dùng chung cho Dashboard / Bài học / Cài đặt
   (menu bên trái, footer, hiệu ứng chuyển trang mượt)
   ===================================================================== */

/* ---------- Chuyển trang mượt: menu đứng yên, chỉ nội dung chuyển ---------- */
@view-transition { navigation: auto; }

.sidebar { view-transition-name: app-sidebar; }
::view-transition-group(app-sidebar) { animation: none; }
::view-transition-old(app-sidebar)   { display: none; }
::view-transition-new(app-sidebar)   { animation: none; }

::view-transition-old(root) { animation: vt-out .14s ease both; }
::view-transition-new(root) { animation: vt-in .24s cubic-bezier(.22,1,.36,1) both; }
@keyframes vt-out { to   { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Khung & menu: đồng nhất giữa các trang ---------- */
.container { max-width: 1360px; }

.sidebar { padding: 14px; position: sticky; top: 18px; height: auto; min-height: min(660px, calc((100vh - 80px) / var(--dvz, 1))); max-height: calc((100vh - 80px) / var(--dvz, 1)); align-self: start; display: flex; flex-direction: column; overflow: hidden; }
.sidebar .brand { display: flex; gap: 12px; align-items: center; padding: 8px 10px 14px; border-bottom: 1px solid var(--line); }
.sidebar .brandText .t1, .sidebar .brand-text .t1 { font-weight:600; font-size: 15px; }
.sidebar .brandText .t2, .sidebar .brand-text .t2 { color: var(--muted); font-size: 12px; margin-top: 2px; }

.sidebar .nav { padding: 12px 8px; display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; overflow: auto; }
.sidebar .nav a {
  padding: 10px 12px; border: 1px solid transparent; border-radius: 14px;
  display: flex; align-items: center; gap: 12px; color: inherit; font-weight:500; font-size: 14px;
  transition: .15s background ease, .15s transform ease;
}
.sidebar .nav a:hover { background: rgba(199,58,64,.07); transform: translateX(2px); }
.sidebar .nav a.active {
  background: linear-gradient(135deg, rgba(199,58,64,.15), rgba(159,42,49,.08));
  border-color: rgba(199,58,64,.14); font-weight:600;
}
.sidebar .sidebarFooter, .sidebar .sidebar-footer {
  padding: 12px 8px 8px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.sidebar .btn { padding: 9px 12px; font-size: 13px; font-weight:600; }
.sidebar .sidebarFooter .btn, .sidebar .sidebar-footer .btn { display:flex; width:100%; box-sizing:border-box; justify-content:center; align-items:center; gap:8px; padding:11px 14px; }

@media (max-width: 1100px) { .shell { grid-template-columns: 220px 1fr; } }
@media (max-width: 980px)  {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: relative; top: auto; height: auto; }
}

/* ---------- Footer (full-width, nền xanh đen) ---------- */
.site-footer{margin-top:28px;background:#111827;color:#9aa4b5;font-size:14px;line-height:1.5}
.site-footer .sf-wrap{max-width:1180px;margin:0 auto;padding:30px 24px 22px}
.site-footer .sf-top{display:flex;justify-content:space-between;gap:28px 48px;flex-wrap:wrap}
.site-footer .sf-brand{max-width:520px}
.site-footer .sf-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.site-footer .sf-name{font-size:17px;font-weight:600;color:#fff}
.site-footer .sf-tag{font-size:12px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);color:#cbd5e1;letter-spacing:.02em}
.site-footer .sf-quote{margin:8px 0 0;color:#8794aa}
.site-footer .sf-info{display:flex;flex-direction:column;gap:6px}
.site-footer .sf-row{display:flex;flex-wrap:wrap;gap:4px 28px}
.site-footer .sf-info b{color:#fff;font-weight:500}
.site-footer a{color:#e5e7eb}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .sf-links{display:inline-flex;gap:14px;margin-left:8px}
.site-footer .sf-bottom{margin-top:22px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09);color:#6b7789;font-size:13px}
@media(max-width:640px){.site-footer .sf-wrap{padding:24px 16px 18px}}

/* Menu: căn tên thương hiệu giữa theo chiều dọc khi không còn dòng phụ */
.sidebar .brand { min-height: 61px; }


/* ===== Theme: Be Vietnam Pro ===== */
h1,h2,h3,.brandText .t1,.brand-text .t1{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-weight:600;letter-spacing:-.3px}

/* ---------- Chi tiết nhỏ dùng chung ---------- */
html{scroll-behavior:smooth}
::selection{background:rgba(199,58,64,.22)}
*{scrollbar-width:thin;scrollbar-color:rgba(199,58,64,.35) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(199,58,64,.3);border-radius:9px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(199,58,64,.5);background-clip:content-box;border:2px solid transparent}
:focus-visible{outline:2px solid rgba(199,58,64,.55);outline-offset:2px;border-radius:8px}
.btn,button{transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.btn:active,button:active{transform:scale(.97)}
.panelCard{transition:transform .25s ease,box-shadow .25s ease}
.panelCard:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(60,20,12,.1)}
.sidebar .brand .logo{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sidebar .brand:hover .logo{transform:rotate(-8deg) scale(1.06)}

/* ---------- Menu trái: cao trọn màn hình, cố định trong tầm mắt, không cuộn ---------- */
@media (min-width: 981px) {
  .sidebar { position: sticky !important; top: 18px !important; height: calc((100vh - 36px) / var(--dvz, 1)) !important; min-height: 0 !important; max-height: none !important; overflow: hidden !important; }
  .sidebar .nav { flex: 0 0 auto !important; overflow: visible !important; }
  .sidebar .sbx { margin-top: auto; }
}

/* ---------- Khung rộng hơn: menu sát lề, nội dung chính rộng ra ---------- */
.container{max-width:1840px!important;padding:14px 18px!important}
.shell{grid-template-columns:244px 1fr!important;gap:16px!important}
@media (max-width:980px){.shell{grid-template-columns:1fr!important}}

/* ---------- Menu Lịch học chỉ hiện với học viên ---------- */
html:not([data-role="member"]) .sidebar .nav a[href="lich-hoc.html"]{display:none}

/* ---------- Độ thoáng giữa các khối (toàn web) ---------- */
.roadmap{margin-top:34px}
.sectionTitle{margin-bottom:14px}
.rightCol .panelCard + .panelCard,.rightCol > * + *{margin-top:18px}