/* ═══════════════════════════════════════════════════════════════════════════
   public/assets/css/learn-shell.css — KHUNG APP HỌC VIÊN v3 (22/09/2026, bản B "Hành trình").
   Sidebar sáng · thanh trên · thanh đáy điện thoại · tấm Học/Tôi · lớp cầu nối chữ.
   Chỉ nạp cho người ĐÃ đăng nhập (templates/learn_nav.php). Mọi màu dẫn xuất từ design-tokens.css —
   KHÔNG hex cứng. Token --lv-* cùng công thức với --pt-* của cổng CTV / Admin v3 để bốn app là một nhà.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --lv-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --lv-bg:      color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
  --lv-surface: var(--color-surface);
  --lv-sunken:  color-mix(in srgb, var(--color-primary) 4%, var(--color-soft));
  --lv-tint:    color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  --lv-wash:    color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  --lv-border:  color-mix(in srgb, var(--color-primary-deep) 9%, var(--color-border));
  /* Chế độ tối: --color-line TRÙNG --color-surface ⇒ đường kẻ trên thẻ biến mất. Trộn thêm border cho thấy được ở cả hai. */
  --lv-hair:    color-mix(in srgb, var(--color-primary-deep) 5%, color-mix(in srgb, var(--color-border) 55%, var(--color-line)));
  --lv-ink:     var(--color-ink);
  --lv-text:    var(--color-secondary-text);
  --lv-muted:   color-mix(in srgb, var(--color-muted) 84%, var(--color-ink));
  --lv-faint:   color-mix(in srgb, var(--color-muted) 76%, var(--color-mute2));
  --lv-brand:        var(--color-primary);
  --lv-brand-strong: var(--color-primary-hover);   /* NỀN đặc của nút/huy hiệu (chữ trắng 5,4:1) — không lật */
  /* CHỮ/ICON màu thương hiệu trên nền thẻ: sáng = gần primary-hover; tối = teal sáng vì primary-deep lật (≥4,5:1 trên nền thẻ tối) */
  --lv-brand-fg: color-mix(in srgb, var(--color-primary-hover) 60%, var(--color-primary-deep));
  --lv-brand-deep:   var(--color-primary-deep);   /* chữ trên nền nhạt — tự lật sang teal sáng ở chế độ tối */
  --lv-warn:         var(--color-warning);
  --lv-warn-deep:    var(--color-warning-deep);
  /* Nền teal đậm (dải, thẻ tối) dựng từ --color-primary-hover vì màu đó KHÔNG lật khi tối — --color-primary-deep
     sang tối thành teal sáng, trộn đen ra teal nhạt ⇒ dải bạc màu. Công thức khớp --pt-night/deep/mid ở chế độ sáng. */
  --lv-night: color-mix(in srgb, var(--color-primary-hover) 35%, black);
  --lv-deep:  color-mix(in srgb, var(--color-primary-hover) 49%, black);
  --lv-mid:   color-mix(in srgb, var(--color-primary-hover) 74%, black);
  --lv-deep-ink: color-mix(in srgb, var(--color-primary-hover) 62%, black);   /* chữ teal trên nền TRẮNG (nút trắng trên dải) */
  --lv-shade: color-mix(in srgb, var(--color-primary-hover) 45%, black);      /* màu bóng — tối ở cả hai chế độ */
  --lv-band-grad: linear-gradient(155deg, var(--lv-mid) 0%, var(--lv-deep) 54%, var(--lv-night) 100%);
  --lv-card-grad: linear-gradient(145deg, var(--lv-mid) 0%, var(--lv-deep) 58%, var(--lv-night) 100%);
  --lv-on:      var(--color-on-dark);
  --lv-on-2:    color-mix(in srgb, var(--color-on-dark) 85%, transparent);
  --lv-on-3:    color-mix(in srgb, var(--color-on-dark) 78%, transparent);
  --lv-glass:   color-mix(in srgb, var(--color-on-dark) 8%, transparent);
  --lv-glass-2: color-mix(in srgb, var(--color-on-dark) 15%, transparent);
  --lv-line-d:  color-mix(in srgb, var(--color-on-dark) 15%, transparent);
  --lv-mint:    color-mix(in srgb, var(--color-primary) 45%, var(--color-on-dark));
  --lv-sh-1: 0 1px 2px color-mix(in srgb, var(--lv-shade) 12%, transparent);
  --lv-sh-2: 0 1px 2px color-mix(in srgb, var(--lv-shade) 9%, transparent),
             0 10px 24px -14px color-mix(in srgb, var(--lv-shade) 30%, transparent);
  --lv-sh-3: 0 2px 4px color-mix(in srgb, var(--lv-shade) 9%, transparent),
             0 28px 56px -26px color-mix(in srgb, var(--lv-shade) 55%, transparent);
  --lv-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 32%, transparent);
  --lv-ease: cubic-bezier(.4, 0, .2, 1);
  --lv-dur: 180ms;
  --lv-side-w: 248px;
  /* Nhịp riêng cho thao tác thu gọn thanh bên: dài hơn --lv-dur (180ms) vì quãng đường xa hơn nhiều,
     đường cong bốc nhanh rồi hãm mượt ở cuối — kiểu chuyển động của mấy app làm việc. */
  --lv-side-dur: 260ms;
  --lv-side-ease: cubic-bezier(.32, .72, 0, 1);
  --lv-top-h: 64px;
  --lv-bnav-h: 62px;
  /* Biến cũ trang khác còn đọc (khối full-bleed, sticky) — sidebar.php từng khai, nay khai ở đây */
  --sb-inset: 0px;
  --sb-width-full: var(--lv-side-w);
  --sb-width-mini: var(--lv-side-w);
  --sb-top: 0px;
}

/* ── Lớp cầu nối chữ: MỌI trang học viên chạy Inter (Cài đặt giao diện từng ép font hệ thống), bỏ font đơn cách ── */
/* html + body.lv3 = (0,1,2): ngang user-appearance.css `html[data-user-theme=dark] body` mà nạp sau ⇒ nền teal-nhạt giữ ở cả hai chế độ */
html body.lv3 { background-color: var(--lv-bg); }
body.lv3 {
  --hsk-font: var(--lv-font);
  --hsk-font-body: var(--lv-font);
  --hsk-font-heading: var(--lv-font);
  --font-sans: var(--lv-font);
  --font-mono: var(--lv-font);
  --bs-body-font-family: var(--lv-font);
  font-family: var(--lv-font);
  background-color: var(--lv-bg);
  -webkit-font-smoothing: antialiased;
}
body.lv3 :where(code, kbd, samp, pre) { font-family: var(--lv-font); }

.lv-i { flex: none; display: block; }

/* ═══════════════════ SIDEBAR (≥1024px) ═══════════════════ */
/* z-index 90 như thanh bên cũ: thanh ghim của trang (left:0, z ≥ 100) vẫn phủ lên như trước, không chui xuống dưới */
.lv-side {
  position: fixed; left: 0; top: 0; bottom: 0; z-index: 90; width: var(--lv-side-w);
  display: none; flex-direction: column; padding: 14px 12px 12px;
  background: var(--lv-surface); border-right: 1px solid var(--lv-hair); color: var(--lv-text);
  font-family: var(--lv-font); overflow: hidden;
}
.lv-side__top { display: flex; align-items: center; gap: 4px; height: 56px; margin-bottom: 12px; flex: none; }
.lv-brand { display: flex; align-items: center; flex: 1; min-width: 0; height: 100%; padding: 0 12px; }   /* 12px = đúng lề icon của mục menu bên dưới */
.lv-brand__full { height: 44px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.lv-brand__mark { display: none; width: 38px; height: 38px; border-radius: 10px; object-fit: contain; }   /* bo góc: bản dựng nền trắng đứng trên thanh bên tối trông như biểu tượng app, không phải ô trắng lạc */
.lv-side__toggle { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--lv-mute2); transition: background var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease); }
.lv-side__toggle:hover { background: var(--lv-sunken); color: var(--lv-ink); }
.lv-side__toggle:focus-visible { outline: none; box-shadow: var(--lv-focus); }
.lv-side__toggle .lv-i { transition: transform var(--lv-dur) var(--lv-ease); }
/* Màn thấp (laptop 768–900px): danh mục tự cuộn bên trong, khối tài khoản ở đáy luôn thấy */
.lv-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; margin: 0 -4px; padding: 0 4px 6px; }
.lv-nav::-webkit-scrollbar { display: none; }
.lv-nav__grp { margin: 18px 12px 6px; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--lv-faint); }
.lv-nav__it {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 11px;
  font-size: 14.5px; font-weight: 500; color: var(--lv-text); text-decoration: none;
  transition: background var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease);
}
.lv-nav__it .lv-i { color: var(--lv-muted); transition: color var(--lv-dur) var(--lv-ease); }
.lv-nav__it:hover { background: var(--lv-sunken); color: var(--lv-ink); text-decoration: none; }
.lv-nav__it.is-on { background: var(--lv-wash); color: var(--lv-brand-deep); font-weight: 650; }
.lv-nav__it.is-on .lv-i { color: var(--lv-brand-fg); }
.lv-nav__it:focus-visible { outline: none; box-shadow: var(--lv-focus); }
.lv-nav__ext { margin-left: auto; opacity: .55; }
.lv-side__foot { flex: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 12px; border-top: 1px solid var(--lv-hair); }   /* minmax(0,…): dòng hạng nowrap (bản EN dài) không nong cột tràn khỏi thanh bên */
.lv-upsell {
  position: relative; overflow: hidden; isolation: isolate; display: block; padding: 14px; border-radius: 16px;
  color: var(--lv-on-2); text-decoration: none;
  background: radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--color-primary) 40%, transparent), transparent 70%), var(--lv-card-grad);
}
.lv-upsell::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-on-dark) 14%, transparent) 1px, transparent 1.4px);
  background-size: 16px 16px; -webkit-mask-image: linear-gradient(200deg, black, transparent 70%); mask-image: linear-gradient(200deg, black, transparent 70%);
}
.lv-upsell:hover { text-decoration: none; color: var(--lv-on-2); }
.lv-upsell__t { display: flex; align-items: center; gap: 7px; color: var(--lv-on); font-weight: 700; font-size: 13.5px; }
.lv-upsell__d { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.5; }
.lv-upsell__btn { display: inline-flex; margin-top: 11px; height: 32px; align-items: center; padding: 0 12px; border-radius: 9px; background: var(--lv-on); color: var(--lv-deep-ink); font-size: 12.5px; font-weight: 700; }
@media (max-height: 860px) { .lv-upsell__d { display: none; } .lv-upsell__btn { margin-top: 9px; } }
@media (max-height: 740px) { .lv-upsell { display: none; } }
.lv-rank { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--lv-sunken); color: var(--lv-text); text-decoration: none; }
.lv-rank:hover { background: var(--lv-wash); text-decoration: none; color: var(--lv-text); }
.lv-rank__ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--lv-surface); color: var(--lv-brand-fg); box-shadow: var(--lv-sh-1); }
.lv-rank__t { min-width: 0; display: flex; flex-direction: column; }
.lv-rank__t b { font-size: 13px; font-weight: 700; color: var(--lv-ink); }
.lv-rank__t small { font-size: 11.5px; color: var(--lv-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-me { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; color: var(--lv-muted); text-decoration: none; }
.lv-me:hover { background: var(--lv-sunken); text-decoration: none; color: var(--lv-muted); }
.lv-me__n { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lv-me__n b { color: var(--lv-ink); font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-me__n small { font-size: 12px; color: var(--lv-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-av { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; background: var(--lv-wash);
  box-shadow: 0 0 0 2px var(--lv-surface), 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent); }
.lv-av--sm { width: 34px; height: 34px; }

@media (min-width: 1024px) {
  .lv-side { display: flex; }
  body.lv3.has-sidebar { --sb-inset: var(--lv-side-w); padding-left: var(--sb-inset); }
  /* ── Thu gọn thanh bên (nút mũi tên cạnh logo; nhớ lựa chọn trong localStorage 'lv:side-mini') ──
     Đổi ĐÚNG MỘT biến --lv-side-w: bề ngang thanh bên, lề trái thân trang (--sb-inset) và mép trái thanh trên đều bám theo.

     🚨 Chuyển động (làm lại 23/09/2026 — bản đầu chữ TẮT PHỰT rồi thanh mới co, nhìn giật cục):
     mọi thứ chạy CÙNG một nhịp --lv-side-dur và CÙNG một đường cong. Chữ không dùng display:none mà thu
     max-width về 0 rồi mờ đi ⇒ icon tự trôi vào giữa thay vì nhảy một phát. Logo và mấy khối ở chân
     thanh cũng mờ chồng nhau chứ không đổi đột ngột. */
  body.lv3.is-side-mini { --lv-side-w: 78px; }
  .lv-side, body.lv3.has-sidebar, body.has-sidebar #hsk-navbar.lv-top {
    transition: width var(--lv-side-dur) var(--lv-side-ease), padding-left var(--lv-side-dur) var(--lv-side-ease), left var(--lv-side-dur) var(--lv-side-ease); }
  .lv-side { padding-left: 12px; padding-right: 12px; transition: width var(--lv-side-dur) var(--lv-side-ease), padding var(--lv-side-dur) var(--lv-side-ease); }
  .is-side-mini .lv-side { padding-left: 10px; padding-right: 10px; }

  /* Logo: hai ảnh chồng nhau, mờ qua mờ lại */
  .lv-brand { position: relative; transition: padding var(--lv-side-dur) var(--lv-side-ease), height var(--lv-side-dur) var(--lv-side-ease); }
  .lv-brand__full, .lv-brand__mark { transition: opacity calc(var(--lv-side-dur) * .7) var(--lv-side-ease); }
  .lv-brand__mark { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }
  .is-side-mini .lv-brand { flex: none; justify-content: center; padding: 0; height: 40px; }
  .is-side-mini .lv-brand__full { opacity: 0; }
  .is-side-mini .lv-brand__mark { opacity: 1; }
  .lv-side__top { transition: gap var(--lv-side-dur) var(--lv-side-ease), margin-bottom var(--lv-side-dur) var(--lv-side-ease); }
  .is-side-mini .lv-side__top { flex-direction: column; height: auto; gap: 6px; margin-bottom: 10px; }
  .is-side-mini .lv-side__toggle .lv-i { transform: rotate(180deg); }

  /* Mục menu: chữ hẹp dần về 0 rồi mờ ⇒ icon trôi vào giữa */
  .lv-nav__it { transition: background var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease),
                            gap var(--lv-side-dur) var(--lv-side-ease), padding var(--lv-side-dur) var(--lv-side-ease); }
  .lv-nav__it > span { min-width: 0; max-width: 170px; overflow: hidden; white-space: nowrap;
                       transition: max-width var(--lv-side-dur) var(--lv-side-ease), opacity calc(var(--lv-side-dur) * .45) var(--lv-side-ease); }
  .is-side-mini .lv-nav__it { justify-content: center; gap: 0; padding: 0; height: 44px; }
  .is-side-mini .lv-nav__it > span { max-width: 0; opacity: 0; }
  .is-side-mini .lv-nav__ext { display: none; }

  /* Tiêu đề nhóm xẹp thành đường kẻ mảnh */
  .lv-nav__grp { overflow: hidden; white-space: nowrap;
                 transition: height var(--lv-side-dur) var(--lv-side-ease), margin var(--lv-side-dur) var(--lv-side-ease),
                             color calc(var(--lv-side-dur) * .45) var(--lv-side-ease), background var(--lv-side-dur) var(--lv-side-ease); }
  .is-side-mini .lv-nav__grp { height: 1px; margin: 14px 10px 10px; padding: 0; color: transparent; background: var(--lv-hair); }

  /* Thẻ mời nâng cấp co thành ô icon; hạng và tài khoản giấu chữ y như mục menu */
  .lv-upsell { transition: padding var(--lv-side-dur) var(--lv-side-ease), height var(--lv-side-dur) var(--lv-side-ease); }
  .is-side-mini .lv-upsell { display: grid; place-items: center; height: 46px; padding: 0; border-radius: 13px; }
  .lv-upsell__t span, .lv-upsell__d, .lv-upsell__btn { transition: opacity calc(var(--lv-side-dur) * .45) var(--lv-side-ease); }
  .is-side-mini .lv-upsell__t span, .is-side-mini .lv-upsell__d, .is-side-mini .lv-upsell__btn { display: none; }
  .lv-rank, .lv-me { transition: padding var(--lv-side-dur) var(--lv-side-ease), gap var(--lv-side-dur) var(--lv-side-ease), background var(--lv-dur) var(--lv-ease); }
  .lv-rank__t, .lv-me__n { min-width: 0; max-width: 170px; overflow: hidden;
                           transition: max-width var(--lv-side-dur) var(--lv-side-ease), opacity calc(var(--lv-side-dur) * .45) var(--lv-side-ease); }
  .is-side-mini .lv-rank, .is-side-mini .lv-me { justify-content: center; gap: 0; padding: 7px 0; }
  .is-side-mini .lv-rank__t, .is-side-mini .lv-me__n { max-width: 0; opacity: 0; }
  .is-side-mini .lv-me > .lv-i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-side, body.lv3.has-sidebar, body.has-sidebar #hsk-navbar.lv-top, .lv-side__toggle .lv-i,
  .lv-brand, .lv-brand__full, .lv-brand__mark, .lv-side__top, .lv-nav__it, .lv-nav__it > span,
  .lv-nav__grp, .lv-upsell, .lv-rank, .lv-me, .lv-rank__t, .lv-me__n { transition: none; }
}
/* Trang "trần" (tờ in, chế độ tập trung, hoặc learn-shell.js thấy trang tự ẩn thanh trên): không thanh bên/thanh đáy */
body.lv3.lv-bare { --sb-inset: 0px; }
body.lv-bare .lv-side, body.lv-bare .lv-bnav { display: none !important; }
/* Màn luyện TOEIC dọn khung bằng <style id="toeic-chrome-off"> (ẩn .sb cũ) — áp tương đương cho khung mới */
body.lv3:has(#toeic-chrome-off) { --sb-inset: 0px; padding-left: 0 !important; padding-bottom: 0 !important; }
body:has(#toeic-chrome-off) .lv-side, body:has(#toeic-chrome-off) .lv-bnav { display: none !important; }

/* ═══════════════════ THANH TRÊN ═══════════════════ */
#hsk-navbar.lv-top {
  /* --lv-vv-top: phần bù cho lỗi visualViewport kẹt của Safari iOS 26 (script trong templates/header.php). Bình thường = 0. */
  position: fixed; top: var(--lv-vv-top, 0px); right: 0; left: 0; z-index: 1000;
  height: var(--lv-top-h); display: flex; align-items: center; gap: 14px; padding: 0 28px;
  background: var(--lv-surface); border-bottom: 1px solid var(--lv-hair); box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--lv-ink); font-family: var(--lv-font);
  transition: background var(--lv-dur) var(--lv-ease), border-color var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease);
}
@media (min-width: 1024px) {
  body.has-sidebar #hsk-navbar.lv-top { left: var(--lv-side-w); }
  body:not(.has-sidebar) .lv-top__logo { display: flex; margin-right: 6px; }
}
#hsk-navbar.lv-top.is-scrolled { box-shadow: 0 1px 0 var(--lv-hair), 0 8px 20px -18px color-mix(in srgb, var(--lv-shade) 40%, transparent); }
/* Trang có dải teal: thanh trên trong suốt nằm trên dải, cuộn xuống mới đổi nền trắng */
#hsk-navbar.lv-top.is-band:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; color: var(--lv-on); }
.lv-top__logo { display: none; align-items: center; flex: none; }
.lv-top__logo img { height: 28px; width: auto; max-width: 130px; object-fit: contain; }
.lv-top__title { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lv-top__back {
  flex: none; width: 38px; height: 38px; margin-right: 4px; border-radius: 12px; display: grid; place-items: center; text-decoration: none;
  color: var(--lv-ink); border: 1px solid var(--lv-hair); background: var(--lv-surface);
}
.lv-top__back:hover { color: var(--lv-brand-fg); text-decoration: none; }
#hsk-navbar.is-band:not(.is-scrolled) .lv-top__back { background: var(--lv-glass); border-color: var(--lv-line-d); color: var(--lv-on); }
#hsk-navbar.lv-top.is-band:not(.is-scrolled) .lv-top__title { opacity: 0; }
.lv-search {
  margin-left: auto; display: flex; align-items: center; gap: 10px; width: min(380px, 34vw); height: 40px; padding: 0 12px;
  border-radius: 12px; border: 1px solid var(--lv-border); background: var(--lv-sunken); color: var(--lv-muted);
  font: 500 13.5px var(--lv-font); cursor: pointer; transition: border-color var(--lv-dur) var(--lv-ease), background var(--lv-dur) var(--lv-ease);
}
.lv-search:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--lv-border)); background: var(--lv-surface); }
.lv-search span { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
.lv-kbd { display: inline-flex; gap: 2px; }
.lv-search kbd { font: 600 11px var(--lv-font); padding: 2px 5px; border-radius: 6px; background: var(--lv-surface); color: var(--lv-muted); box-shadow: none; }
#hsk-navbar.is-band:not(.is-scrolled) .lv-search { background: var(--lv-glass); border-color: var(--lv-line-d); color: var(--lv-on-2); }
#hsk-navbar.is-band:not(.is-scrolled) .lv-search kbd { background: var(--lv-glass-2); color: var(--lv-on-2); }
.lv-top__act { display: flex; align-items: center; gap: 8px; }
.lv-icbtn {
  position: relative; height: 40px; min-width: 40px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 12px; border: 1px solid var(--lv-hair); background: var(--lv-surface); color: var(--lv-text); cursor: pointer; text-decoration: none;
  transition: background var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease), border-color var(--lv-dur) var(--lv-ease);
}
.lv-icbtn:hover { background: var(--lv-sunken); color: var(--lv-ink); text-decoration: none; }
.lv-icbtn:focus-visible, .lv-search:focus-visible, .lv-user__btn:focus-visible { outline: none; box-shadow: var(--lv-focus); }
#hsk-navbar.is-band:not(.is-scrolled) .lv-icbtn { background: var(--lv-glass); border-color: var(--lv-line-d); color: var(--lv-on); }
.lv-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font: 700 11px/18px var(--lv-font); text-align: center; color: var(--lv-on); background: var(--lv-brand-strong);
  box-shadow: 0 0 0 2px var(--lv-surface);
}
#hsk-navbar.is-band:not(.is-scrolled) .lv-badge { box-shadow: 0 0 0 2px var(--lv-deep); }
/* ── Chuỗi ngày học · nền sáng-tối (23/09/2026) ── */
.lv-streak {
  display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px 0 10px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--color-warning) 30%, var(--lv-border)); background: var(--color-warning-soft);
  color: var(--lv-warn-deep); text-decoration: none; font-variant-numeric: tabular-nums;
  transition: background var(--lv-dur) var(--lv-ease), border-color var(--lv-dur) var(--lv-ease);
}
.lv-streak:hover { background: color-mix(in srgb, var(--color-warning) 18%, var(--lv-surface)); color: var(--lv-warn-deep); text-decoration: none; }
.lv-streak .lv-i { fill: currentColor; stroke: none; }
.lv-streak b { font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
#hsk-navbar.is-band:not(.is-scrolled) .lv-streak { background: var(--lv-glass); border-color: var(--lv-line-d); color: var(--lv-on); }
#hsk-navbar.is-band:not(.is-scrolled) .lv-streak:hover { background: var(--lv-glass-2); color: var(--lv-on); }
/* Mặt trời ↔ mặt trăng: hai icon chồng nhau, đổi bằng xoay + mờ dần (cùng một ô 19px nên không giật bố cục) */
.lv-theme__ic { position: relative; display: block; width: 19px; height: 19px; }
.lv-theme .lv-i { position: absolute; inset: 0; transition: opacity var(--lv-dur) var(--lv-ease), transform 260ms var(--lv-ease); }
.lv-theme .lv-theme__sun { opacity: 0; transform: rotate(-90deg) scale(.55); }
.lv-theme .lv-theme__moon { opacity: 1; transform: rotate(0) scale(1); }
.lv-theme[data-theme-now="dark"] .lv-theme__sun { opacity: 1; transform: rotate(0) scale(1); }
.lv-theme[data-theme-now="dark"] .lv-theme__moon { opacity: 0; transform: rotate(90deg) scale(.55); }
/* Trang chưa có bản tối mà người dùng đã chọn tối: chấm nhỏ nhắc "đang bật, trang này chưa hỗ trợ" */
.lv-theme[data-theme-now="dark"][data-ready="0"]::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-warning); box-shadow: 0 0 0 2px var(--lv-surface);
}
#hsk-navbar.is-band:not(.is-scrolled) .lv-theme[data-theme-now="dark"][data-ready="0"]::after { box-shadow: 0 0 0 2px var(--lv-deep); }
@media (prefers-reduced-motion: reduce) { .lv-theme .lv-i { transition: none; } }

/* Nút "Cài app" ở thanh trên (máy tính) — learn-shell.js chỉ bật khi trình duyệt cho cài */
.lv-install { padding: 0 14px; font: 650 13.5px var(--lv-font); color: var(--lv-brand-deep); background: var(--lv-tint);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--lv-border)); }
.lv-install:hover { background: var(--lv-wash); color: var(--lv-brand-deep); }
#hsk-navbar.is-band:not(.is-scrolled) .lv-install { background: var(--lv-glass-2); border-color: var(--lv-line-d); color: var(--lv-on); }
.lv-install[hidden] { display: none !important; }
/* Lối vào bán hàng ở thanh trên — chỉ màn rộng (≥1200px), hẹp hơn thì đã có thẻ mời ở thanh bên + menu tài khoản */
.lv-shop { display: none; padding: 0 14px; font: 650 13.5px var(--lv-font); color: var(--lv-brand-deep); background: var(--lv-tint);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--lv-border)); }
.lv-shop:hover { background: var(--lv-wash); color: var(--lv-brand-deep); text-decoration: none; }
#hsk-navbar.is-band:not(.is-scrolled) .lv-shop { background: var(--lv-glass-2); border-color: var(--lv-line-d); color: var(--lv-on); }
@media (min-width: 1200px) { .lv-shop { display: inline-flex; } }
.lv-search-m { display: none; }
.lv-cart:has(#navCartCount[style*="none"]) { display: none; }
.lv-lang { display: flex; padding: 3px; gap: 2px; border-radius: 11px; border: 1px solid var(--lv-hair); background: var(--lv-sunken); margin: 0; }
.lv-lang button, .lv-seg button { border: 0; background: transparent; height: 30px; min-width: 34px; padding: 0 8px; border-radius: 8px;
  font: 700 12px var(--lv-font); color: var(--lv-muted); cursor: pointer; }
.lv-lang button.is-on, .lv-seg button.is-on { background: var(--lv-surface); color: var(--lv-brand-deep); box-shadow: var(--lv-sh-1); cursor: default; }
#hsk-navbar.is-band:not(.is-scrolled) .lv-lang { background: var(--lv-glass); border-color: var(--lv-line-d); }
#hsk-navbar.is-band:not(.is-scrolled) .lv-lang button { color: var(--lv-on-2); }
#hsk-navbar.is-band:not(.is-scrolled) .lv-lang button.is-on { background: var(--lv-on); color: var(--lv-deep-ink); }
.lv-bell-wrap { position: relative; }
.lv-user { position: relative; }
.lv-user__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.lv-user__btn .lv-av { box-shadow: 0 0 0 2px var(--lv-surface), 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent); }

/* Ô thông báo khoác kiểu mới (ẩn/hiện vẫn do notifications.css + notifications.js) */
.lv-top .noti-dd-panel { border-radius: 16px; border: 1px solid var(--lv-border); box-shadow: var(--lv-sh-3); font-family: var(--lv-font); }
.lv-top .noti-dd-header { padding: 14px 16px 10px; }
.lv-top .noti-dd-title { font-weight: 700; color: var(--lv-ink); }
.lv-top .noti-dd-readall { color: var(--lv-brand-fg); font-weight: 600; }
.lv-top .noti-dd-readall:hover { background: var(--lv-wash); }
.lv-top .noti-dd-header { border-bottom-color: var(--lv-hair); }
/* notifications.css tô dòng CHƯA ĐỌC vàng + chân xám nhạt cứng (vỡ ở chế độ tối) — khung mới dùng teal nhạt */
.lv-top .noti-dd-footer { font-weight: 650; color: var(--lv-brand-fg); background: var(--lv-sunken); border-top-color: var(--lv-hair); }
.lv-top .noti-dd-footer:hover { background: var(--lv-wash); color: var(--lv-brand-fg); }
.lv-top .noti-item:hover { background: var(--lv-sunken); }
.lv-top .noti-item.unread { background: var(--lv-tint); border-left-color: var(--color-primary); }
.lv-top .noti-item.unread:hover { background: var(--lv-wash); }
.lv-top .noti-unread-dot { background: var(--color-primary); box-shadow: none; }
/* Icon thông báo (ô thả + toast): hai họ màu thương hiệu thay cho hồng/tím/đỏ/xanh dương cứng */
body.lv3 .noti-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; background: var(--lv-wash); color: var(--lv-brand-fg); }
body.lv3 .noti-icon:is(.type-streak, .type-achievement, .type-milestone, .type-security) { background: var(--color-warning-soft); color: var(--lv-warn-deep); }
/* Menu tài khoản — tự lo vị trí + ẩn/hiện (bấm để mở, learn-shell.js), không dựa navbar.css */
.lv-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 300; width: 272px; padding: 8px;
  border-radius: 16px; border: 1px solid var(--lv-border); background: var(--lv-surface); color: var(--lv-text);
  box-shadow: var(--lv-sh-3); font-family: var(--lv-font); max-height: calc(100vh - var(--lv-top-h) - 20px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--lv-dur) var(--lv-ease), transform var(--lv-dur) var(--lv-ease), visibility var(--lv-dur);
}
.lv-user.active .lv-menu { opacity: 1; visibility: visible; transform: none; }
.lv-menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--lv-hair); opacity: 1; }
.lv-menu__me { display: flex; align-items: center; gap: 11px; padding: 8px 8px 10px; }
.lv-menu__me span { min-width: 0; display: flex; flex-direction: column; }
.lv-menu__me b { font-size: 14px; font-weight: 700; color: var(--lv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-menu__me small { font-size: 12.5px; color: var(--lv-muted); }
.lv-menu__xp { display: grid; gap: 6px; margin: 0 2px 6px; padding: 10px 12px; border-radius: 12px; background: var(--lv-sunken); text-decoration: none; color: var(--lv-muted); }
.lv-menu__xp:hover { background: var(--lv-wash); text-decoration: none; }
.lv-menu__xp > span:first-child { display: flex; justify-content: space-between; align-items: baseline; }
.lv-menu__xp b { font-size: 13px; font-weight: 700; color: var(--lv-ink); }
.lv-menu__xp small { font-size: 12px; color: var(--lv-muted); font-variant-numeric: tabular-nums; }
.lv-menu__bar { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 14%, var(--lv-surface)); overflow: hidden; }
.lv-menu__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--lv-brand-strong)); }
.lv-menu__it { display: flex; align-items: center; gap: 11px; height: 38px; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--lv-text); text-decoration: none; }
.lv-menu__it .lv-i { color: var(--lv-muted); }
.lv-menu__it:hover { background: var(--lv-sunken); color: var(--lv-ink); text-decoration: none; }
.lv-menu__it--brand { color: var(--lv-brand-deep); font-weight: 650; }
.lv-menu__it--brand .lv-i { color: var(--lv-brand-fg); }
.lv-menu__it--out:hover { background: color-mix(in srgb, var(--color-warning) 9%, var(--lv-surface)); color: var(--lv-warn-deep); }
.lv-menu__lang { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 6px 4px 10px; font-size: 14px; color: var(--lv-text); }
.lv-menu__lang > span { display: flex; align-items: center; gap: 11px; }
.lv-menu__lang .lv-i { color: var(--lv-muted); }
.lv-seg { display: flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--lv-sunken); margin: 0; }

/* ═══════════════════ ĐIỆN THOẠI / MÁY TÍNH BẢNG (<1024px) ═══════════════════ */
.lv-bnav, .lv-sheet { display: none; }
@media (max-width: 1023px) {
  /* --nav-h: mốc dính (sticky) các trang cũ đang đọc — cho khớp chiều cao thanh mới kể cả tai thỏ khi chạy như app */
  :root { --lv-top-h: 56px; --nav-h: calc(var(--lv-top-h) + env(safe-area-inset-top, 0px)); }
  #hsk-navbar.lv-top { height: calc(var(--lv-top-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0 16px; gap: 10px; }
  /* Lướt xuống thì thanh trên trượt khỏi màn, vuốt lên hiện lại (learn-shell.js bật/tắt .lv-top-hidden trên body).
     🚨 KHÔNG đặt transform (kể cả identity) hay will-change ở trạng thái thường: phần tử có transform trở thành
     gốc toạ độ cho con position:fixed ⇒ ô thông báo/menu tài khoản neo nhầm. Chỉ lúc ẩn mới có transform, mà lúc
     đó JS đã chắc chắn không có ô nào đang mở. */
  #hsk-navbar.lv-top { transition: transform .24s var(--lv-ease), background var(--lv-dur) var(--lv-ease), border-color var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease); }
  body.lv-top-hidden #hsk-navbar.lv-top { transform: translateY(-100%); }
  .lv-top__title { font-size: 17px; flex: 1; }
  #hsk-navbar.lv-top.is-band:not(.is-scrolled) .lv-top__title { opacity: 1; }
  .lv-top:has(.lv-top__title:empty) .lv-top__logo { display: flex; }
  .lv-top:has(.lv-top__back) .lv-top__logo { display: none !important; }
  .lv-top:has(.lv-top__title:empty) .lv-top__title { display: none; }
  .lv-top__logo + .lv-top__title { margin-left: 2px; }
  .lv-search, .lv-lang, .lv-install { display: none !important; }   /* điện thoại: mời cài app ở dải nhắc trang Hôm nay */
  .lv-streak { display: none; }   /* chuỗi đã hiện sẵn trên dải teal trang Home NAVS — thanh trên điện thoại để dành chỗ cho chuông/giỏ */
  .lv-search-m { display: inline-flex; }
  .lv-top__act { margin-left: auto; gap: 6px; }
  .lv-icbtn { height: 38px; min-width: 38px; border-radius: 11px; }
  body.has-bnav .lv-user { display: none; }
  body.lv3.has-bnav { padding-bottom: calc(var(--lv-bnav-h) + env(safe-area-inset-bottom, 0px)); }
  /* navbar.css ghim ô thông báo ở top:var(--nav-h) (56px) — thanh mới cao thêm tai thỏ khi chạy như app */
  .lv-top .noti-dd-panel { top: calc(var(--lv-top-h) + env(safe-area-inset-top, 0px) + 6px) !important; left: 8px !important; right: 8px !important; }
  .lv-menu { position: fixed; top: calc(var(--lv-top-h) + env(safe-area-inset-top, 0px) + 6px); right: 8px; max-width: calc(100vw - 16px); }

  .lv-bnav {
    /* z 900 < thanh trên (1000): hộp thoại của các trang cũ (z ≥ 1000, dựng để che thanh trên cũ) che luôn thanh đáy —
       bản z 1002 từng đè mất nút Lưu/Huỷ ở đáy hộp thoại (vd Tạo thư mục, 22/09). */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--lv-bnav-h) + env(safe-area-inset-bottom, 0px)); padding: 5px 6px env(safe-area-inset-bottom, 0px);
    background: var(--lv-surface); border-top: 1px solid var(--lv-hair);
    box-shadow: 0 -10px 30px -22px color-mix(in srgb, var(--lv-shade) 45%, transparent); font-family: var(--lv-font);
  }
  .lv-bnav > a, .lv-bnav > button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; border: 0; background: none;
    border-radius: 12px; font: 600 11px/1.1 var(--lv-font); color: var(--lv-muted); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .lv-bnav > .is-on { color: var(--lv-brand-deep); }
  .lv-bnav > .is-on .lv-i { color: var(--lv-brand-fg); }
  .lv-bnav > a:active, .lv-bnav > button:active { background: var(--lv-sunken); }

  /* Nút chat nổi: nhấc lên trên thanh đáy */
  body.lv3.has-bnav .navs-chat-fab { bottom: calc(var(--lv-bnav-h) + 14px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; }
  body.lv3.has-bnav .navs-chat-greet { bottom: calc(var(--lv-bnav-h) + 76px + env(safe-area-inset-bottom, 0px)); }

  .lv-sheet { position: fixed; inset: 0; z-index: 2000; display: block; }
  .lv-sheet[hidden] { display: none; }
  .lv-sheet__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--lv-night) 58%, transparent); animation: lvFade .18s var(--lv-ease); }
  .lv-sheet__panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--lv-surface);
    box-shadow: 0 -20px 50px -20px color-mix(in srgb, black 55%, transparent); font-family: var(--lv-font); animation: lvUp .24s var(--lv-ease);
  }
  .lv-sheet__grip { width: 38px; height: 5px; border-radius: 999px; background: var(--lv-hair); margin: 4px auto 6px; }
  .lv-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 12px; }
  .lv-sheet__head b { font-size: 17px; font-weight: 700; color: var(--lv-ink); }
  .lv-sheet__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .lv-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 92px; padding: 14px 12px; border-radius: 16px;
    background: var(--lv-sunken); color: var(--lv-ink); font-size: 13.5px; font-weight: 650; line-height: 1.25; text-decoration: none; }
  .lv-tile:hover, .lv-tile:active { background: var(--lv-wash); text-decoration: none; color: var(--lv-ink); }
  .lv-tile__i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--lv-surface); color: var(--lv-brand-fg); box-shadow: var(--lv-sh-1); }
  .lv-tile.is-on { background: var(--lv-wash); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--color-primary) 45%, transparent) inset; }
  .lv-mecard { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; text-decoration: none; color: var(--lv-on-2);
    background: radial-gradient(90% 80% at 100% 0%, color-mix(in srgb, var(--color-primary) 38%, transparent), transparent 70%), var(--lv-card-grad); }
  .lv-mecard:hover { text-decoration: none; color: var(--lv-on-2); }
  .lv-mecard .lv-av { width: 48px; height: 48px; box-shadow: 0 0 0 2px var(--lv-line-d); }
  .lv-mecard__t { flex: 1; min-width: 0; display: grid; gap: 4px; }
  .lv-mecard__t b { font-size: 16px; color: var(--lv-on); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lv-mecard__t small { font-size: 12.5px; color: var(--lv-on-3); }
  .lv-mecard .lv-menu__bar { background: var(--lv-glass-2); margin-top: 4px; }
  .lv-mecard .lv-menu__bar i { background: linear-gradient(90deg, var(--lv-mint), var(--lv-on)); }
  .lv-list { margin-top: 12px; border-radius: 16px; background: var(--lv-sunken); overflow: hidden; }
  .lv-list > a { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; font-size: 15px; font-weight: 500; color: var(--lv-ink); text-decoration: none; }
  .lv-list > a + a { border-top: 1px solid var(--lv-hair); }
  .lv-list > a .lv-i { color: var(--lv-muted); }
  .lv-list > a.is-brand { color: var(--lv-brand-deep); font-weight: 650; }
  .lv-list > a.is-brand .lv-i { color: var(--lv-brand-fg); }
  .lv-list__chev { margin-left: auto; opacity: .5; }
  .lv-list--row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 54px; padding: 0 8px 0 14px; font-size: 15px; color: var(--lv-ink); }
  .lv-list--row > span { display: flex; align-items: center; gap: 12px; }
  .lv-list--row .lv-i { color: var(--lv-muted); }
  .lv-list--row .lv-seg { background: var(--lv-surface); }
  .lv-out { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; margin-top: 12px; border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--color-warning) 32%, var(--lv-border)); color: var(--lv-warn-deep); font-size: 15px; font-weight: 600; text-decoration: none; }
  .lv-out:hover { text-decoration: none; color: var(--lv-warn-deep); background: color-mix(in srgb, var(--color-warning) 7%, var(--lv-surface)); }
  body.lv-sheet-open { overflow: hidden; }
}
@media (max-width: 380px) {
  .lv-sheet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Thông báo nổi ngắn dùng chung — window.lvToast(msg, 'ok'|'warn') ở learn-shell.js, thay alert() của trình duyệt */
.lv-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 100000; width: max-content; max-width: min(92vw, 440px);
  padding: 12px 18px; border-radius: 12px; background: var(--lv-deep); color: var(--lv-on); font: 600 14px/1.45 var(--lv-font); text-align: center;
  box-shadow: 0 14px 34px -14px color-mix(in srgb, black 55%, transparent); opacity: 0; transform: translate(-50%, 12px); pointer-events: none;
  transition: opacity .2s var(--lv-ease), transform .2s var(--lv-ease);
}
.lv-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.lv-toast--warn { background: color-mix(in srgb, var(--color-warning) 58%, black); }
body.has-bnav .lv-toast, body:has(.tk-dock) .lv-toast { bottom: calc(var(--lv-bnav-h) + 20px + env(safe-area-inset-bottom, 0px)); }
@keyframes lvUp { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes lvFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lv-sheet__scrim, .lv-sheet__panel { animation: none; } .lv-toast { transition: none; } #hsk-navbar.lv-top, .lv-nav__it { transition: none; } }
@media print { .lv-side, .lv-bnav, .lv-sheet, #hsk-navbar.lv-top { display: none !important; } body.lv3.has-sidebar { padding-left: 0; } }