/* =====================================================================
   Lesson frame shared by the Minna grammar, 512-kanji and shadowing lessons
   and by each course's lesson list (inc/lesson-layout.php,
   template-parts/lesson/*.php, taxonomy-bv_lesson_type.php).
   Colours come from the course: --lc / --lc2 are set inline on the page root
   from bv_course_term_presets(), the same pair the home course cards use.
   ===================================================================== */
.bv-lesson, .bv-cpage{
  --lc: #0f766e;
  --lc2: #14b8a6;
  --lc-soft: color-mix(in srgb, var(--lc) 7%, #fff);
  --lc-soft2: color-mix(in srgb, var(--lc) 14%, #fff);
  --lc-line: color-mix(in srgb, var(--lc) 28%, #fff);
  --lc-ink: color-mix(in srgb, var(--lc) 74%, #000);
  --lc-grad: linear-gradient(135deg, var(--lc), color-mix(in srgb, var(--lc) 55%, var(--lc2)));
  --lf-line: #e5e7eb;
  --lf-mute: #64748b;
  --lf-paper: #faf7f1;
  --lf-nav: var(--bv-nav-h, 76px);
  /* Roboto first: its Vietnamese/Latin subsets (unicode-range) render the Vietnamese words
     inside Japanese lines; kana and kanji fall through to a Japanese font. */
  --lf-jp: "Roboto", "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .bv-lesson, .bv-cpage{
    --lc-soft: #f6f7f9; --lc-soft2: #eef1f5; --lc-line: #d6dbe3; --lc-ink: var(--lc);
    --lc-grad: linear-gradient(135deg, var(--lc), var(--lc2));
  }
}
/* Anchored parts land below the sticky site navbar (height measured by lesson-frame.js). */
html{ scroll-padding-top: calc(var(--bv-nav-h, 76px) + 14px); }
.bv-lesson [hidden], .bv-cpage [hidden]{ display: none !important; }
.bv-lesson :lang(ja), .bv-cpage :lang(ja){ font-family: var(--lf-jp); }
.bv-lesson a:focus-visible, .bv-lesson button:focus-visible, .bv-lesson summary:focus-visible,
.bv-cpage a:focus-visible, .bv-cpage button:focus-visible, .bv-cpage summary:focus-visible, .bv-cpage input:focus-visible{
  outline: 3px solid var(--lc-line); outline-offset: 2px;
}

/* ----------------------------------------------------------------- hero */
.bv-lh{
  position: relative; overflow: hidden;
  padding: 18px 0 32px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(640px 300px at 4% 0%, color-mix(in srgb, var(--lc) 12%, transparent), transparent 70%),
    radial-gradient(560px 320px at 98% 18%, color-mix(in srgb, var(--lc2) 11%, transparent), transparent 66%),
    linear-gradient(180deg, #fbfaf7, #fff);
}
/* Seigaiha waves in the course colour, faded in from the right (as on the home hero). */
.bv-lh::before{
  content: ""; position: absolute; inset: 0 0 0 42%;
  background-color: var(--lc); opacity: .09;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 28a28 28 0 0 1 56 0M8 28a20 20 0 0 1 40 0M16 28a12 12 0 0 1 24 0M24 28a4 4 0 0 1 8 0'/%3E%3Cpath d='M-28 14a28 28 0 0 1 56 0M-20 14a20 20 0 0 1 40 0M-12 14a12 12 0 0 1 24 0M28 14a28 28 0 0 1 56 0M36 14a20 20 0 0 1 40 0M44 14a12 12 0 0 1 24 0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 28px repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.2'%3E%3Cpath d='M0 28a28 28 0 0 1 56 0M8 28a20 20 0 0 1 40 0M16 28a12 12 0 0 1 24 0M24 28a4 4 0 0 1 8 0'/%3E%3Cpath d='M-28 14a28 28 0 0 1 56 0M-20 14a20 20 0 0 1 40 0M-12 14a12 12 0 0 1 24 0M28 14a28 28 0 0 1 56 0M36 14a20 20 0 0 1 40 0M44 14a12 12 0 0 1 24 0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 28px repeat;
  pointer-events: none;
}
.bv-lh::after{
  content: ""; position: absolute; inset: 0 0 0 42%;
  background: linear-gradient(90deg, #fbfaf7, rgba(251,250,247,0) 55%);
  pointer-events: none;
}
.bv-lh__mark{
  position: absolute; right: 0; top: -.2em; z-index: 0;
  font-family: var(--lf-jp); font-size: clamp(11rem, 24vw, 21rem); line-height: 1; font-weight: 700;
  color: var(--lc); opacity: .055; pointer-events: none; user-select: none;
}
.bv-lh .container{ position: relative; z-index: 1; }

.bv-lh__crumbs{ display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin-bottom: 18px; font-size: .84rem; color: var(--lf-mute); }
.bv-lh__crumbs a{ color: inherit; }
.bv-lh__crumbs a:hover{ color: var(--lc); text-decoration: underline; }
.bv-lh__crumbs [aria-current]{ color: var(--ink); font-weight: 600; }

.bv-lh__grid{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 992px){
  .bv-lh__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 22.5rem); gap: 40px; }
  .bv-lh__grid.is-single{ grid-template-columns: minmax(0, 1fr); }
}
.bv-lh__chips{ display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: .95rem; }
.bv-lh__course{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .28rem .8rem .28rem .3rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--lc-line);
  color: var(--lc-ink); font-size: .85rem; font-weight: 700;
}
a.bv-lh__course:hover{ color: var(--lc); border-color: var(--lc); }
.bv-lh__glyph{
  display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--lc-grad); color: #fff; font-size: .95rem; font-weight: 700;
}
.bv-lh__chip{
  display: inline-flex; align-items: center; max-width: 100%;
  padding: .3rem .75rem; border-radius: 999px;
  background: var(--lc-soft2); color: var(--lc-ink); font-size: .82rem; font-weight: 700;
}
.bv-lh__title{ margin: 0; font-size: clamp(1.65rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.bv-lh__no{ display: block; margin-bottom: .4rem; font-size: .88rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lc); }
.bv-lh__ja{ margin: .55rem 0 0; font-size: clamp(1.05rem, 2vw, 1.3rem); letter-spacing: .04em; color: var(--lc-ink); }
.bv-lh__desc{ margin: .95rem 0 0; max-width: 62ch; line-height: 1.7; color: #334155; }
.bv-lh__stats{ display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.15rem 0 0; padding: 0; list-style: none; }
.bv-lh__stats li{ padding: .38rem .8rem; border-radius: 12px; background: rgba(255,255,255,.9); border: 1px solid var(--border); font-size: .85rem; color: #475569; }
.bv-lh__stats strong{ margin-right: .1rem; font-size: 1rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.bv-lh__actions{ display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.35rem; }
.bv-lh__btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.9rem; padding: .7rem 1.15rem; border-radius: 14px;
  border: 1px solid var(--border); background: #fff; color: var(--ink); font-weight: 800;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.bv-lh__btn:hover{ color: var(--lc); border-color: var(--lc-line); transform: translateY(-1px); }
.bv-lh__btn--primary{
  color: #fff; border-color: transparent; background: var(--lc-grad);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--lc) 28%, transparent);
}
.bv-lh__btn--primary:hover{ color: #fff; box-shadow: 0 14px 30px color-mix(in srgb, var(--lc) 36%, transparent); }
.bv-lh__source{ margin: .95rem 0 0; max-width: 72ch; font-size: .8rem; line-height: 1.6; color: var(--lf-mute); }

.bv-lh__card{
  padding: 1.15rem 1.2rem; border-radius: 20px;
  background: rgba(255,255,255,.94); border: 1px solid var(--border);
  box-shadow: 0 18px 40px rgba(15,23,42,.08);
}
.bv-lh__cardtitle{ margin: 0 0 .8rem; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lf-mute); }
.bv-lh__prog{ display: flex; align-items: center; gap: .9rem; padding-bottom: .95rem; margin-bottom: .95rem; border-bottom: 1px dashed var(--border); }
.bv-lh__progtxt{ display: flex; flex-direction: column; margin: 0; font-size: .85rem; line-height: 1.4; color: var(--lf-mute); }
.bv-lh__progtxt strong{ font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.bv-lh__goals > summary{ display: flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--ink); cursor: pointer; list-style: none; }
.bv-lh__goals > summary::-webkit-details-marker{ display: none; }
.bv-lh__goals > summary::after{ content: "\F282"; font-family: bootstrap-icons; margin-left: auto; font-size: .85rem; color: var(--lf-mute); transition: transform .2s ease; }
.bv-lh__goals[open] > summary::after{ transform: rotate(180deg); }
.bv-lh__goals ul{ display: grid; gap: .55rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.bv-lh__goals li{ display: flex; gap: .55rem; font-size: .92rem; line-height: 1.55; color: #334155; }
.bv-lh__goals li i{ margin-top: .1rem; color: var(--lc); }

.bv-ring2{ flex: 0 0 auto; width: 3.6rem; height: 3.6rem; transform: rotate(-90deg); }
.bv-ring2__bg{ fill: none; stroke: var(--lc-soft2); stroke-width: 3.6; }
.bv-ring2__fg{ fill: none; stroke: var(--lc); stroke-width: 3.6; stroke-linecap: round; transition: stroke-dasharray .45s ease; }

/* ------------------------------------------------------- page layout */
.bv-lesson__layout{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 26px 0 52px; }
.bv-lesson__main{ min-width: 0; }
@media (min-width: 992px){
  .bv-lesson__layout{ grid-template-columns: 16.5rem minmax(0, 1fr); gap: 34px; padding-top: 32px; }
  .bv-lesson__aside{
    position: sticky; top: calc(var(--lf-nav) + 16px); align-self: start;
    max-height: calc(100vh - var(--lf-nav) - 32px); overflow: auto; overscroll-behavior: contain;
    scrollbar-width: thin; border-radius: 18px;
  }
}
@media (min-width: 1200px){
  .bv-lesson__layout{ grid-template-columns: 17.5rem minmax(0, 1fr); gap: 44px; }
}
.bv-lesson__notes:empty{ display: none; }
.bv-lesson__main > .bv-cta-note{ margin-bottom: 1.4rem; border-radius: 14px; }

/* ------------------------------------------------------- side panel */
.bv-panel{
  display: grid; gap: 1rem; padding: 1rem;
  border: 1px solid var(--border); border-radius: 18px; background: #fff;
  box-shadow: 0 10px 28px rgba(15,23,42,.05);
}
.bv-panel__head{ display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bv-panel__lesson{ margin: 0; font-size: .84rem; font-weight: 800; line-height: 1.35; color: var(--lc-ink); }
.bv-panel__close{
  display: none; place-items: center; flex: 0 0 auto; width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--ink);
}
.bv-panel__title{ margin: 0 0 .35rem; font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--lf-mute); }
.bv-panel__meter .bv-mn__meterbar,
.bv-panel__meter .bv-shadow__meterbar{ height: .5rem; border-radius: 999px; background: var(--lc-soft2); overflow: hidden; }
.bv-panel__meter .bv-mn__meterfill,
.bv-panel__meter .bv-shadow__meterfill{ display: block; width: 0; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--lc), var(--lc2)); transition: width .3s ease; }
.bv-panel__meter .bv-mn__metertext,
.bv-panel__meter .bv-shadow__metertext{ margin: .45rem 0 0; font-size: .82rem; color: var(--lf-mute); font-variant-numeric: tabular-nums; }
.bv-panel__meter strong{ color: var(--ink); }
.bv-panel__tools{ display: grid; gap: .15rem; padding-top: .9rem; border-top: 1px solid var(--lf-line); }
.bv-panel__tools .bv-panel__title{ margin-top: .35rem; }
.bv-panel__speed{ display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .25rem 0 .2rem; font-size: .85rem; color: #334155; }
.bv-panel__speed > span{ margin-right: .2rem; }
.bv-panel__reset{
  display: inline-flex; align-items: center; gap: .4rem; width: fit-content;
  margin-top: .3rem; padding: .35rem 0; border: 0; background: none;
  color: var(--lf-mute); font-size: .82rem; font-weight: 600; cursor: pointer;
}
.bv-panel__reset:hover{ color: var(--ink); }
.bv-panel__note{ margin: 0; font-size: .8rem; line-height: 1.55; color: var(--lf-mute); }
.bv-lesson .bv-mn__status, .bv-lesson .bv-shadow__status{ margin: 0; font-size: .82rem; color: var(--lc-ink); }
.bv-lesson .bv-mn__status:empty, .bv-lesson .bv-shadow__status:empty{ display: none; }

/* Outline with the part being read highlighted. */
.bv-toc__list{ display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bv-toc__link{
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .6rem; border-radius: 10px;
  color: #334155; font-size: .9rem; font-weight: 600; line-height: 1.35;
}
.bv-toc__link i{ font-size: .95rem; color: var(--lf-mute); }
.bv-toc__label{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bv-toc__count{ flex: 0 0 auto; font-size: .74rem; font-weight: 700; color: var(--lf-mute); font-variant-numeric: tabular-nums; }
.bv-toc__link:hover{ background: var(--lc-soft); color: var(--lc-ink); }
.bv-toc__link.is-within{ color: var(--lc-ink); }
.bv-toc__link.is-active{ background: var(--lc-soft2); color: var(--lc-ink); }
.bv-toc__link.is-active i, .bv-toc__link.is-within i{ color: var(--lc); }
.bv-toc__list--sub{ margin: 1px 0 4px 1.05rem; padding-left: .5rem; border-left: 2px solid var(--lf-line); }
.bv-toc__list--sub .bv-toc__link{ padding: .3rem .55rem; font-size: .84rem; font-weight: 500; }

/* Switch-styled checkbox (the input stays focusable and clickable). */
.bv-switch{ position: relative; display: flex; align-items: center; gap: .6rem; min-height: 2.25rem; font-size: .88rem; color: #334155; cursor: pointer; }
.bv-switch input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.bv-switch__ui{ position: relative; flex: 0 0 auto; width: 2.3rem; height: 1.35rem; border-radius: 999px; background: #cbd5e1; transition: background .15s ease; }
.bv-switch__ui::after{ content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.35rem - 4px); height: calc(1.35rem - 4px); border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.25); transition: transform .15s ease; }
.bv-switch input:checked + .bv-switch__ui{ background: var(--lc); }
.bv-switch input:checked + .bv-switch__ui::after{ transform: translateX(.95rem); }
.bv-switch input:focus-visible + .bv-switch__ui{ outline: 3px solid var(--lc-line); outline-offset: 2px; }

/* Segmented control (kanji view mode, lesson list filter). */
.bv-seg{ display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: #f1f5f9; border: 1px solid var(--border); }
.bv-seg__btn{ min-height: 2.2rem; padding: .35rem .8rem; border: 0; border-radius: 9px; background: transparent; color: var(--lf-mute); font-size: .85rem; font-weight: 700; cursor: pointer; }
.bv-seg__btn:hover{ color: var(--ink); }
.bv-seg__btn[aria-pressed="true"]{ background: #fff; color: var(--lc-ink); box-shadow: 0 1px 3px rgba(15,23,42,.14); }

/* Section heading with an action on the right. */
.bv-sechead{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem; }
.bv-sechead > div:not(.bv-seg){ flex: 1 1 18rem; min-width: 0; }
.bv-sechead .bv-mn__lead{ margin-bottom: 0; }

/* Collapsible study guides at the top of a lesson / list. */
.bv-guides{ display: grid; gap: .75rem; margin-bottom: 1.6rem; }
@media (min-width: 768px){ .bv-guides{ grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; } }
.bv-guide{ margin: 0 0 1.6rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.bv-guides .bv-guide{ margin: 0; }
.bv-guide > summary{ display: flex; align-items: center; gap: .55rem; min-height: 3rem; padding: .7rem 1rem; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.bv-guide > summary::-webkit-details-marker{ display: none; }
.bv-guide > summary > i{ color: var(--lc); }
.bv-guide > summary::after{ content: "\F282"; font-family: bootstrap-icons; margin-left: auto; font-size: .85rem; color: var(--lf-mute); transition: transform .2s ease; }
.bv-guide[open] > summary::after{ transform: rotate(180deg); }
.bv-guide__count{ padding: .1rem .5rem; border-radius: 999px; background: #f1f5f9; font-size: .74rem; font-weight: 700; color: var(--lf-mute); }
.bv-guide__steps{ display: grid; gap: .45rem; margin: 0; padding: 0 1.1rem 1rem 2.4rem; }
.bv-guide__steps li{ font-size: .94rem; line-height: 1.65; }
.bv-guide__steps li::marker{ font-weight: 700; color: var(--lc); }

/* ----------------------------------------------- mobile dock + sheet */
@media (max-width: 991.98px){
  .bv-lesson.is-enhanced .bv-lesson__aside{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1065;
    max-height: min(84vh, 680px); overflow: auto; overscroll-behavior: contain;
    transform: translateY(102%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .bv-lesson.is-panel-open .bv-lesson__aside{ transform: none; visibility: visible; transition: transform .25s ease; }
  .bv-lesson.is-enhanced .bv-panel{
    border-bottom: 0; border-radius: 22px 22px 0 0;
    padding: .5rem 1rem calc(1.1rem + env(safe-area-inset-bottom));
    box-shadow: 0 -18px 40px rgba(15,23,42,.18);
  }
  .bv-lesson.is-enhanced .bv-panel__head{ position: sticky; top: 0; z-index: 1; padding: .55rem 0 .35rem; background: #fff; }
  .bv-lesson.is-enhanced .bv-panel__head::before{
    content: ""; position: absolute; top: 0; left: 50%; width: 2.6rem; height: 4px; margin-left: -1.3rem;
    border-radius: 999px; background: #cbd5e1;
  }
  .bv-lesson.is-enhanced .bv-panel__close{ display: inline-grid; }
  .bv-panel-backdrop{ position: fixed; inset: 0; z-index: 1060; background: rgba(15,23,42,.42); }
  .bv-dock{
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(15,23,42,.08);
  }
  body.has-lesson-dock{ padding-bottom: 4.25rem; }
}
@media (min-width: 992px){
  .bv-dock, .bv-panel-backdrop{ display: none !important; }
}
.bv-dock__prog{ display: flex; flex: 1 1 auto; flex-direction: column; gap: .3rem; min-width: 0; }
.bv-dock__bar{ display: block; height: .35rem; border-radius: 999px; background: var(--lc-soft2); overflow: hidden; }
.bv-dock__bar i{ display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--lc), var(--lc2)); transition: width .3s ease; }
.bv-dock__txt{ font-size: .78rem; color: var(--lf-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-dock__txt strong{ color: var(--ink); }
.bv-dock__btn{
  display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto;
  min-height: 2.6rem; padding: .4rem .75rem; border: 1px solid var(--border); border-radius: 12px;
  background: #fff; color: var(--ink); font-size: .85rem; font-weight: 700;
}
.bv-dock__btn i{ color: var(--lc); }
@media (max-width: 359.98px){ .bv-dock__btn span{ display: none; } }

/* ------------------------------------------------------ finish block */
.bv-finish{
  margin: 2.4rem 0 1.6rem; padding: 1.25rem; border-radius: 20px;
  border: 1px solid var(--lc-line); background: linear-gradient(135deg, var(--lc-soft), #fff 70%);
  scroll-margin-top: calc(var(--lf-nav) + 14px);
}
.bv-finish__status{ display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.1rem; }
.bv-finish__icon{ display: grid; place-items: center; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 14px; background: #fff; color: var(--lc); font-size: 1.3rem; box-shadow: 0 6px 16px rgba(15,23,42,.08); }
.bv-finish__body{ flex: 1 1 16rem; min-width: 0; }
.bv-finish__title{ margin: 0 0 .2rem; font-size: 1.15rem; font-weight: 800; }
.bv-finish__text{ margin: 0; line-height: 1.6; color: #475569; }
.bv-finish__jump{
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: .5rem .95rem;
  border: 1px solid var(--lc-line); border-radius: 12px; background: #fff; color: var(--lc-ink); font-weight: 700; cursor: pointer;
}
.bv-finish__jump:hover{ border-color: var(--lc); }
.bv-finish.is-done{ border-color: #86efac; background: linear-gradient(135deg, #f0fdf4, #fff 70%); }
.bv-finish.is-done .bv-finish__icon{ color: #15803d; }
.bv-lesson .bv-lesson-pager{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1.1rem 0 0; }
.bv-lesson .bv-lesson-pager__btn{
  display: flex; align-items: center; gap: .75rem; min-width: 0; min-height: 3.6rem;
  padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: var(--ink);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bv-lesson .bv-lesson-pager__btn:hover{ transform: translateY(-1px); border-color: var(--lc-line); box-shadow: 0 10px 22px rgba(15,23,42,.08); }
.bv-lesson .bv-lesson-pager__btn i{ flex: 0 0 auto; color: var(--lc); }
.bv-lesson-pager__txt{ display: flex; flex-direction: column; min-width: 0; }
.bv-lesson-pager__txt small{ font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--lf-mute); }
.bv-lesson-pager__title{ font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-lesson .bv-lesson-pager__next{ grid-column: 2; justify-content: flex-end; margin: 0; text-align: right; border-color: transparent; background: var(--lc-grad); color: #fff; }
.bv-lesson .bv-lesson-pager__next:hover{ color: #fff; }
.bv-lesson .bv-lesson-pager__next i, .bv-lesson .bv-lesson-pager__next small{ color: rgba(255,255,255,.85); }
@media (max-width: 575.98px){
  .bv-lesson .bv-lesson-pager{ grid-template-columns: minmax(0, 1fr); }
  .bv-lesson .bv-lesson-pager__next{ grid-column: auto; order: -1; }
}

/* The item "Đến câu chưa làm" lands on. */
.bv-lesson .is-flash{ animation: bvFlash 1.7s ease; }
@keyframes bvFlash{ 0%, 55%{ box-shadow: 0 0 0 4px var(--lc-line); } 100%{ box-shadow: 0 0 0 0 transparent; } }

/* ------------------------------------------------- related lessons */
.bv-lesson .bv-lrel{ margin: 2rem 0 1rem; }
.bv-lesson .bv-lrel__title i, .bv-lesson .bv-lrel__all{ color: var(--lc); }
.bv-lesson .bv-lrel__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.bv-lesson .bv-lrel__grid a{
  display: flex; flex-direction: column; gap: .3rem; height: 100%;
  padding: .85rem .95rem; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: var(--ink);
  transition: transform .15s ease, border-color .15s ease;
}
.bv-lesson .bv-lrel__grid a:hover{ transform: translateY(-2px); border-color: var(--lc-line); }
.bv-lesson .bv-lrel__level{ align-self: flex-start; padding: .1rem .5rem; border-radius: 999px; background: var(--lc-soft2); color: var(--lc-ink); font-size: .72rem; font-weight: 800; }
.bv-lesson .bv-lrel__name{ font-weight: 700; line-height: 1.4; }
.bv-lrel__teaser{ font-size: .82rem; color: var(--lf-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-lrel__teaser.is-kanji{ font-size: 1.05rem; letter-spacing: .12em; color: var(--ink); }

/* ================================================== course lesson list */
.bv-cpage__body{ padding: 28px 0 60px; }
.bv-cprog2__row{ display: flex; align-items: center; gap: .95rem; }
.bv-cprog2__row .bv-ring2{ width: 4.2rem; height: 4.2rem; }
.bv-cprog2__big{ margin: 0; font-size: .9rem; color: #475569; }
.bv-cprog2__big strong{ font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.bv-cprog2__sub{ margin: .15rem 0 0; font-size: .82rem; color: var(--lf-mute); }
.bv-cprog2__next{
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .1rem .6rem;
  margin-top: 1rem; padding: .8rem .95rem; border: 1px solid var(--lc-line); border-radius: 14px;
  background: var(--lc-soft); color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.bv-cprog2__next:hover{ color: var(--ink); border-color: var(--lc); transform: translateY(-1px); }
.bv-cprog2__nextlabel{ grid-column: 1; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--lc); }
.bv-cprog2__nexttitle{ grid-column: 1; overflow: hidden; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.bv-cprog2__next i{ grid-column: 2; grid-row: 1 / span 2; font-size: 1.1rem; color: var(--lc); }
.bv-cprog2__note{ margin: .85rem 0 0; font-size: .8rem; line-height: 1.55; color: var(--lf-mute); }
.bv-cprog2__note a{ font-weight: 700; color: var(--lc-ink); }

.bv-lessons__bar{ display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1rem; }
.bv-lessons__search{ position: relative; display: flex; align-items: center; flex: 1 1 18rem; max-width: 32rem; margin: 0; }
.bv-lessons__search i{ position: absolute; left: .95rem; color: var(--lf-mute); pointer-events: none; }
.bv-lessons__search input{
  width: 100%; min-height: 2.9rem; padding: .55rem .9rem .55rem 2.55rem;
  border: 1px solid var(--border); border-radius: 14px; background: #fff; font-size: .95rem;
}
.bv-lessons__search input:focus{ border-color: var(--lc); outline: 3px solid var(--lc-line); outline-offset: 0; }
.bv-lessons__jump{ display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.bv-lessons__jump a{ display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .8rem; border-radius: 999px; background: var(--lc-soft); color: var(--lc-ink); font-size: .85rem; font-weight: 700; }
.bv-lessons__jump a:hover{ background: var(--lc-soft2); }
.bv-lessons__jump span{ font-size: .76rem; font-weight: 600; color: var(--lf-mute); }
.bv-lessons__guide{ margin-bottom: 1rem; }
.bv-lessons__empty{ margin: 1.5rem 0; padding: 1rem 1.1rem; border: 1px dashed var(--border); border-radius: 14px; color: var(--lf-mute); }
.bv-lessons__clear{ margin-left: .3rem; padding: 0; border: 0; background: none; color: var(--lc-ink); font-weight: 700; text-decoration: underline; cursor: pointer; }
.bv-lessons__group{ margin-top: 1.9rem; scroll-margin-top: calc(var(--lf-nav) + 14px); }
.bv-lessons__gtitle{ display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .75rem; margin: 0 0 .9rem; font-size: 1.25rem; font-weight: 800; }
.bv-lessons__grange{ font-size: .88rem; font-weight: 700; color: var(--lc); }
.bv-lessons__gprog{ margin-left: auto; font-size: .82rem; font-weight: 600; color: var(--lf-mute); font-variant-numeric: tabular-nums; }
.bv-lessons__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.bv-lessons__grid > li{ display: flex; min-width: 0; }

.bv-lcard{
  position: relative; display: flex; gap: .9rem; width: 100%; min-width: 0;
  padding: 1rem 1rem 1.1rem; border: 1px solid var(--border); border-radius: 18px;
  background: #fff; color: var(--ink); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bv-lcard:hover{ transform: translateY(-2px); border-color: var(--lc-line); box-shadow: 0 14px 30px rgba(15,23,42,.08); color: var(--ink); }
.bv-lcard__no{
  display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 14px;
  background: var(--lc-soft2); color: var(--lc-ink); font-size: 1.25rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.bv-lcard__no small{ margin-bottom: .15rem; font-size: .58rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lc); }
.bv-lcard.is-done .bv-lcard__no{ background: var(--lc-grad); color: #fff; }
.bv-lcard.is-done .bv-lcard__no small{ color: rgba(255,255,255,.85); }
.bv-lcard__body{ display: flex; flex: 1 1 auto; flex-direction: column; gap: .35rem; min-width: 0; }
.bv-lcard__ja{ overflow: hidden; font-size: .82rem; color: var(--lf-mute); white-space: nowrap; text-overflow: ellipsis; }
.bv-lcard__title{ margin: 0; font-size: 1.02rem; font-weight: 800; line-height: 1.4; }
.bv-lcard__chips{ display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem; }
.bv-lcard__chips span{ max-width: 100%; overflow: hidden; padding: .12rem .5rem; border-radius: 8px; background: var(--lc-soft); color: var(--lc-ink); font-size: .8rem; white-space: nowrap; text-overflow: ellipsis; }
.bv-lcard__chips .is-more{ background: #f1f5f9; color: var(--lf-mute); }
.bv-lcard__kanji{ display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 3px; margin-top: .25rem; }
.bv-lcard__kanji span{ display: grid; place-items: center; aspect-ratio: 1; border-radius: 7px; background: var(--lc-soft); font-size: 1.05rem; color: var(--ink); }
.bv-lcard__kanji span.is-match{ background: var(--lc); color: #fff; }
.bv-lcard__topic{ font-size: .85rem; color: #475569; }
.bv-lcard__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin-top: auto; padding-top: .4rem; font-size: .78rem; color: var(--lf-mute); }
.bv-lcard__audio{ color: var(--lc-ink); }
.bv-lcard__lock{ font-weight: 700; color: #b4780a; }
.bv-lcard__state{ margin-left: auto; font-weight: 800; color: var(--lc-ink); }
.bv-lcard__state:empty{ display: none; }
.bv-lcard.is-done .bv-lcard__state{ color: #15803d; }
.bv-lcard.is-next{ border-color: var(--lc); box-shadow: 0 0 0 3px var(--lc-soft2); }
.bv-lcard__prog{ position: absolute; left: 0; right: 0; bottom: 0; height: 4px; }
.bv-lcard__prog i{ display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--lc), var(--lc2)); }

@media (max-width: 575.98px){
  .bv-lh{ padding-bottom: 26px; }
  .bv-lh__actions .bv-lh__btn{ flex: 1 1 auto; }
  .bv-lh__card{ padding: 1rem; border-radius: 18px; }
  .bv-lcard{ padding: .9rem .9rem 1rem; gap: .75rem; }
  .bv-lcard__no{ width: 2.8rem; height: 2.8rem; font-size: 1.1rem; }
  .bv-lessons__gprog{ margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce){
  .bv-lesson *, .bv-cpage *{ transition: none !important; }
}