/* ═══════════════════════════════════════════════════════════════════════════
   public/assets/css/learn-ui.css — BỘ THÀNH PHẦN App học v3 (22/09/2026).
   Dải teal · nút · thẻ · chip · ô icon · vòng tiến độ · thanh tiến độ · tiêu đề khu.
   Dựng trên token --lv-* của learn-shell.css (cùng công thức --pt-* của CTV/Admin v3) — KHÔNG hex cứng,
   tự lật ở chế độ tối. Trang dựng lại theo khung mới bọc nội dung trong .lv-page.
   ═══════════════════════════════════════════════════════════════════════════ */
.lv-page { --lv-max: 1180px; --lv-gutter: 32px; --lv-r: 18px; color: var(--lv-text); font-size: 15px; line-height: 1.5; }
@media (max-width: 1023px) { .lv-page { --lv-gutter: 16px; } }
:where(.lv-page) a { color: inherit; text-decoration: none; }
:where(.lv-page) a:hover { text-decoration: none; }
:where(.lv-page) :is(h1, h2, h3, h4, p) { margin: 0; }
:where(.lv-page) *, :where(.lv-page) *::before, :where(.lv-page) *::after { box-sizing: border-box; }
.lv-page .num { font-variant-numeric: tabular-nums; }
.lv-wrap { max-width: calc(var(--lv-max) + 2 * var(--lv-gutter)); margin: 0 auto; padding: 0 var(--lv-gutter) 72px; }

/* ═══ Dải đầu trang: nằm dưới thanh trên trong suốt ($lvBand) ═══ */
.lv-band {
  position: relative; isolation: isolate; overflow: hidden; color: var(--lv-on);
  margin-top: calc(-1 * var(--nav-h, 64px));
  padding: calc(var(--nav-h, 64px) + 26px) var(--lv-gutter) var(--lv-band-pb, 120px);
  background:
    radial-gradient(58% 92% at 88% -12%, color-mix(in srgb, var(--color-primary) 48%, transparent), transparent 62%),
    radial-gradient(42% 72% at 26% 128%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
    var(--lv-band-grad);
}
/* Lưới chấm + hạt mịn (ảnh tĩnh, không blend-mode — iOS không dựng lớp compositing thừa) */
.lv-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-on-dark) 16%, transparent) 1px, transparent 1.5px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(118deg, transparent 12%, black 62%); mask-image: linear-gradient(118deg, transparent 12%, black 62%);
}
.lv-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Kéo quá đầu trang (cao su: iPhone, trackpad Mac) trên trang có dải: phần hở phía trên dải lộ nền trang SÁNG — chủ site
   chê "trắng xấu" (22/09). Lớp teal ghim sau lưng dải lấp chỗ hở; cuộn xuống (thanh trên .is-scrolled) thì gỡ để không
   lộ sau các thẻ. z-index -1: dưới mọi nội dung, trên nền canvas. */
body.lv-band-page::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: min(25vh, 240px); z-index: -1; pointer-events: none;   /* thấp hơn dải ở mọi khổ ⇒ lúc đứng yên không bao giờ lộ */
  background: radial-gradient(58% 92% at 88% -12%, color-mix(in srgb, var(--color-primary) 48%, transparent), transparent 62%), var(--lv-mid);
}
body.lv-band-page:has(#hsk-navbar.is-scrolled)::before { display: none; }
.lv-band__inner { position: relative; max-width: var(--lv-max); margin: 0 auto; }
.lv-band :is(h1, h2, h3) { color: var(--lv-on); }
.lv-band__context { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--lv-on-2); max-width: 60ch; }
.lv-band__context strong { color: var(--lv-on); font-weight: 600; }
.lv-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.lv-chip-d {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; color: var(--lv-on-2); background: var(--lv-glass); border: 1px solid var(--lv-line-d);
}
.lv-chip-d strong { color: var(--lv-on); font-weight: 600; }
.lv-glass {
  border-radius: 20px; border: 1px solid var(--lv-line-d);
  background: linear-gradient(160deg, var(--lv-glass-2), var(--lv-glass));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 10%, transparent) inset;
}

/* ═══ Nút ═══ */
.lv-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: 11px; border: 1px solid transparent; max-width: 100%; min-width: 0;
  font: 600 14px/1 var(--lv-font); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background var(--lv-dur) var(--lv-ease), border-color var(--lv-dur) var(--lv-ease), color var(--lv-dur) var(--lv-ease), box-shadow var(--lv-dur) var(--lv-ease);
}
/* 🚨 line-height PHẢI đủ chỗ cho dấu tiếng Việt. .lv-btn đặt font …/1 (line-height = ĐÚNG cỡ chữ),
   cộng overflow:hidden ở đây ⇒ ô chữ cao đúng 15px trong khi "Ô / Ồ / Ế / Ữ" vươn cao hơn ⇒ mũ bị XÉN NGANG.
   Thử bằng chữ thường hay tiếng Anh sẽ không thấy; chủ site bắt được ở nút "Ôn ngay" 23/09/2026. */
.lv-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
.lv-btn:focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: 2px; }
.lv-btn--primary {
  background: var(--lv-brand-strong); color: var(--lv-on);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 20%, transparent) inset, 0 8px 18px -10px color-mix(in srgb, var(--color-primary-hover) 90%, transparent);
}
.lv-btn--primary:hover { background: color-mix(in srgb, var(--color-primary-hover) 82%, black); color: var(--lv-on); }
.lv-btn--outline { background: var(--lv-surface); color: var(--lv-ink); border-color: var(--lv-border); }
.lv-btn--outline:hover { background: var(--lv-tint); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--lv-border)); color: var(--lv-ink); }
.lv-btn--ghost { background: transparent; color: var(--lv-text); }
.lv-btn--ghost:hover { background: var(--lv-sunken); color: var(--lv-ink); }
.lv-btn--white { background: var(--lv-on); color: var(--lv-deep-ink); box-shadow: 0 10px 26px -12px color-mix(in srgb, black 60%, transparent); }
.lv-btn--white:hover { background: color-mix(in srgb, var(--color-primary) 10%, var(--color-on-dark)); color: var(--lv-deep-ink); }
.lv-btn--glass { background: var(--lv-glass-2); color: var(--lv-on); border-color: var(--lv-line-d); }
.lv-btn--glass:hover { background: color-mix(in srgb, var(--color-on-dark) 24%, transparent); color: var(--lv-on); }
.lv-band .lv-btn:focus-visible, .lv-card--dark .lv-btn:focus-visible { outline-color: var(--lv-on); }
.lv-btn--sm { height: 34px; padding: 0 12px; border-radius: 9px; font-size: 13px; gap: 6px; }
.lv-btn--lg { height: 48px; padding: 0 22px; border-radius: 13px; font-size: 15px; }
.lv-btn--block { width: 100%; }
.lv-btn:disabled { opacity: .5; cursor: default; box-shadow: none; }

/* ═══ Cầu nối nút cũ (.btn …) còn nằm TRONG trang đã dựng lại (.lv-page) — mặc chất liệu .lv-btn, một màu thương hiệu.
   theme.php ép .btn-primary bằng !important ⇒ ở đây cũng phải !important (độ đặc hiệu cao hơn). Trang chưa dựng lại không đổi. ═══ */
.lv-page .btn { gap: 8px; height: 42px; padding: 0 18px; border-radius: 11px; border-width: 1px; font: 600 14px/1 var(--lv-font); transform: none !important; }
.lv-page .btn-sm { height: 34px; padding: 0 12px; border-radius: 9px; font-size: 13px; }
.lv-page .btn-lg { height: 48px; padding: 0 22px; border-radius: 13px; font-size: 15px; }
body.lv3 .lv-page .btn-primary {
  background-color: var(--lv-brand-strong) !important; border-color: var(--lv-brand-strong) !important; color: var(--lv-on) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 20%, transparent) inset, 0 8px 18px -10px color-mix(in srgb, var(--color-primary-hover) 90%, transparent);
}
body.lv3 .lv-page .btn-primary:hover:not(:disabled) { background-color: color-mix(in srgb, var(--color-primary-hover) 82%, black) !important; }
.lv-page :is(.btn-outline, .btn-secondary) { background: var(--lv-surface); color: var(--lv-ink); border-color: var(--lv-border); box-shadow: none; }
.lv-page :is(.btn-outline, .btn-secondary):hover:not(:disabled) { background: var(--lv-tint); color: var(--lv-ink); border-color: color-mix(in srgb, var(--color-primary) 45%, var(--lv-border)); }
.lv-page .btn-ghost { background: transparent; color: var(--lv-text); border-color: transparent; box-shadow: none; }
.lv-page .btn-ghost:hover:not(:disabled) { background: var(--lv-sunken); color: var(--lv-ink); }
/* Nút "AI" cyan cũ ⇒ nút viền teal (kế hoạch v3: teal là màu hành động duy nhất) */
.lv-page .btn-accent { background: var(--lv-surface); color: var(--lv-brand-deep); border-color: color-mix(in srgb, var(--color-primary) 40%, var(--lv-border)); box-shadow: none; }
.lv-page .btn-accent:hover:not(:disabled) { background: var(--lv-tint); color: var(--lv-brand-deep); }

/* ═══ Đầu trang con (không dải teal): tiêu đề · mô tả · nút — nút "về" nằm ở thanh trên ($lvBack) ═══ */
.lv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 28px 0 20px; }
.lv-head__t { min-width: 0; flex: 1 1 360px; }
.lv-head h1 { font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.03em; color: var(--lv-ink); text-wrap: balance; }
.lv-head p { margin-top: 6px; max-width: 72ch; font-size: 14.5px; line-height: 1.55; color: var(--lv-muted); }
.lv-head p a { color: var(--lv-brand-fg); font-weight: 600; }
.lv-head p a:hover { color: var(--lv-brand-deep); }
.lv-head__act { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1023px) {
  .lv-head { padding: 16px 0 14px; gap: 12px; }
  .lv-head h1 { font-size: 24px; }
  .lv-head__act { width: 100%; }
  .lv-head__act > .lv-btn { flex: 1 1 0; }
}

/* ═══ Thẻ ═══ */
.lv-card { position: relative; background: var(--lv-surface); border: 1px solid var(--lv-hair); border-radius: var(--lv-r); box-shadow: var(--lv-sh-2); }
.lv-card--dark {
  color: var(--lv-on-2); border-color: transparent; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--color-primary) 36%, transparent), transparent 70%), var(--lv-card-grad);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--color-on-dark) 12%, transparent) inset, 0 24px 48px -26px color-mix(in srgb, var(--lv-shade) 80%, transparent);
}
.lv-card--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--color-on-dark) 14%, transparent) 1px, transparent 1.4px);
  background-size: 18px 18px; -webkit-mask-image: linear-gradient(210deg, black 10%, transparent 70%); mask-image: linear-gradient(210deg, black 10%, transparent 70%);
}
.lv-card--dark :is(h2, h3, b, strong) { color: var(--lv-on); }
/* :where(a) = độ đặc hiệu (0,1,0) — thẻ-link của trang (vd .lt-zalo {display:flex}) nạp sau vẫn thắng */
:where(a).lv-card { display: block; transition: border-color var(--lv-dur) var(--lv-ease), box-shadow var(--lv-dur) var(--lv-ease); }
:where(a).lv-card:not(.lv-card--dark):hover { border-color: color-mix(in srgb, var(--color-primary) 38%, var(--lv-hair)); }

/* ═══ Chip · ô icon · vòng · thanh ═══ */
.lv-chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--lv-sunken); color: var(--lv-text); }
.lv-chip--ok { background: var(--lv-wash); color: var(--lv-brand-deep); }
.lv-chip--warn { background: var(--color-warning-soft); color: var(--lv-warn-deep); }
.lv-ic { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--lv-wash); color: var(--lv-brand-fg); }
.lv-ic--sm { width: 34px; height: 34px; border-radius: 10px; }
.lv-ic--lg { width: 48px; height: 48px; border-radius: 14px; }
.lv-ic--warn { background: var(--color-warning-soft); color: var(--lv-warn-deep); }
.lv-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.lv-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lv-ring circle { fill: none; stroke-width: 6; }
.lv-ring__bg { stroke: var(--lv-sunken); }
.lv-ring__fg { stroke: var(--lv-brand-strong); stroke-linecap: round; }
.lv-ring b { position: relative; font-size: 14px; font-weight: 750; color: var(--lv-ink); font-variant-numeric: tabular-nums; }
.lv-band .lv-ring__bg, .lv-card--dark .lv-ring__bg { stroke: var(--lv-glass-2); }
.lv-band .lv-ring__fg, .lv-card--dark .lv-ring__fg { stroke: var(--lv-mint); }
.lv-band .lv-ring b, .lv-card--dark .lv-ring b { color: var(--lv-on); }
.lv-bar { display: block; height: 7px; border-radius: 999px; background: var(--lv-sunken); overflow: hidden; }
.lv-bar > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--lv-brand-strong)); }
.lv-band .lv-bar, .lv-card--dark .lv-bar { background: var(--lv-glass-2); }
.lv-band .lv-bar > i, .lv-card--dark .lv-bar > i { background: linear-gradient(90deg, var(--lv-mint), var(--lv-on)); }

/* ═══ Đường đi các ngày (dải teal) — trang Hôm nay + trang lộ trình, dựng bằng lt_path_html() ═══ */
.lv-path { position: relative; height: 116px; margin-top: 34px; }
.lv-path__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lv-path__line path { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lv-path__line .done { stroke: var(--lv-mint); }
.lv-path__line .todo { stroke: var(--lv-line-d); stroke-dasharray: 2 9; }
.lv-path__nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(var(--n, 7), minmax(0, 1fr)); }
.lv-node { --r: 20px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-top: calc(var(--y) * 1px - var(--r)); text-align: center; }
.lv-node.is-today { --r: 29px; }
.lv-node__dot {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--lv-deep); border: 2px solid var(--lv-line-d); color: var(--lv-on-3); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.lv-node.is-done .lv-node__dot { background: var(--lv-mint); border-color: var(--lv-mint); color: var(--lv-night); }
.lv-node.is-partial .lv-node__dot, .lv-node.is-missed .lv-node__dot { border-style: dashed; border-color: var(--lv-mint); color: var(--lv-on-2); }
.lv-node.is-today .lv-node__dot {
  width: 58px; height: 58px; background: var(--lv-on); border-color: var(--lv-on); color: var(--lv-deep-ink);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-on-dark) 14%, transparent), 0 16px 32px -12px color-mix(in srgb, black 60%, transparent);
}
.lv-node__l { font-size: 12.5px; font-weight: 650; color: var(--lv-on-2); white-space: nowrap; }
.lv-node__s { font-size: 11.5px; color: var(--lv-on-3); white-space: nowrap; }
.lv-node.is-today .lv-node__l { color: var(--lv-on); }
@media (max-width: 1023px) {
  .lv-path { margin-top: 24px; height: 104px; }
  .lv-node { --r: 16px; gap: 6px; }
  .lv-node.is-today { --r: 22px; }
  .lv-node__dot { width: 32px; height: 32px; font-size: 12px; }
  .lv-node.is-today .lv-node__dot { width: 44px; height: 44px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-on-dark) 14%, transparent); }
  .lv-node__l { font-size: 11px; }
  .lv-node__s { display: none; }
}

/* Sprite icon (lv_ico_sprite) — chỉ chứa <symbol>, không chiếm chỗ */
.lv-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ═══ Tiêu đề khu ═══ */
.lv-sec { margin-top: 32px; }
.lv-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lv-sec__head h2 { font-size: 19px; font-weight: 700; letter-spacing: -.015em; color: var(--lv-ink); }
.lv-sec__head a { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 600; color: var(--lv-brand-fg); white-space: nowrap; }
.lv-sec__head a:hover { color: var(--lv-brand-deep); }
.lv-muted { color: var(--lv-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   HỘP THOẠI DÙNG CHUNG (.lv-dlg) — 23/09/2026.
   Thay cho ~45 bộ popup tự chế rải khắp site (mỗi trang một kiểu nền mờ, một kiểu bo góc,
   4 kiểu mở/đóng khác nhau; chỉ 9 chỗ khoá cuộn nền, 1 chỗ giữ được tiêu điểm bàn phím).
   Hành vi nằm ở public/assets/js/lv-dialog.js — CSS ở đây chỉ lo hình.

   Khuôn:  <div class="lv-dlg" id="x" hidden>
             <div class="lv-dlg__card lv-dlg--md" role="dialog" aria-modal="true" aria-labelledby="xT">
               <div class="lv-dlg__head"><h3 id="xT">Tiêu đề</h3><button class="lv-dlg__x" data-lv-close>…</button></div>
               <div class="lv-dlg__body">…</div>
               <div class="lv-dlg__foot"><button class="lv-btn lv-btn--ghost" data-lv-close>Huỷ</button>…</div>
             </div>
           </div>
   Gu đã chốt: KHÔNG ô icon trang trí giữa hộp, KHÔNG nhãn nhỏ viết hoa, KHÔNG emoji.
   Nút cao 48px; trên điện thoại xếp DỌC và mỗi nút full width (không flex:1).
   ═══════════════════════════════════════════════════════════════════════════ */
.lv-dlg {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; background: color-mix(in srgb, var(--lv-shade) 55%, transparent);
  overflow-y: auto; overscroll-behavior: contain;
  animation: lv-dlg-in var(--dur-base, .22s) var(--ease, ease) both;
}
.lv-dlg[hidden] { display: none !important; }
.lv-dlg__card {
  --lv-dlg-w: 560px;
  position: relative; width: min(var(--lv-dlg-w), 100%); max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; margin: auto;
  background: var(--lv-surface); border: 1px solid var(--lv-hair); border-radius: 20px;
  box-shadow: 0 32px 70px -28px color-mix(in srgb, var(--lv-shade) 70%, transparent),
              0 4px 14px -6px color-mix(in srgb, var(--lv-shade) 30%, transparent);
  animation: lv-dlg-pop var(--dur-base, .22s) var(--ease, cubic-bezier(.32,.72,0,1)) both;
}
.lv-dlg--sm .lv-dlg__card, .lv-dlg__card.lv-dlg--sm { --lv-dlg-w: 420px; }
.lv-dlg--md .lv-dlg__card, .lv-dlg__card.lv-dlg--md { --lv-dlg-w: 560px; }
.lv-dlg--lg .lv-dlg__card, .lv-dlg__card.lv-dlg--lg { --lv-dlg-w: 720px; }

.lv-dlg__head {
  flex: none; display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 22px 14px; border-bottom: 1px solid var(--lv-hair);
}
.lv-dlg__head h2, .lv-dlg__head h3 {
  flex: 1; min-width: 0; margin: 0; font-size: 17.5px; font-weight: 700;
  letter-spacing: -.015em; line-height: 1.3; color: var(--lv-ink); text-wrap: balance;
}
.lv-dlg__head p { margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--lv-muted); }
/* Nút đóng: icon CHÍNH LÀ nút (không phải trang trí) nên giữ icon. */
.lv-dlg__x {
  flex: none; width: 36px; height: 36px; margin: -4px -6px 0 0; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--lv-muted); cursor: pointer;
  transition: background var(--dur-fast, .12s) var(--ease, ease), color var(--dur-fast, .12s) var(--ease, ease);
}
.lv-dlg__x:hover { background: var(--lv-sunken); color: var(--lv-ink); }
.lv-dlg__x:focus-visible { outline: 2px solid var(--lv-brand-fg); outline-offset: 2px; }

.lv-dlg__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 22px; font-size: 14.5px; line-height: 1.6; color: var(--lv-text);
}
.lv-dlg__body > :first-child { margin-top: 0; }
.lv-dlg__body > :last-child { margin-bottom: 0; }
.lv-dlg__body strong, .lv-dlg__body b { color: var(--lv-ink); font-weight: 650; }
.lv-dlg__body::-webkit-scrollbar { width: 8px; }
.lv-dlg__body::-webkit-scrollbar-thumb { background: var(--lv-border); border-radius: 999px; }

.lv-dlg__foot {
  flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 22px 18px; border-top: 1px solid var(--lv-hair);
}
.lv-dlg__foot .lv-btn { height: 48px; padding: 0 20px; border-radius: 13px; font-size: 15px; }
.lv-dlg__foot--split { justify-content: space-between; }
.lv-dlg__foot--start { justify-content: flex-start; }

/* Hỏi xác nhận: chỉ tiêu đề + một câu, không viền chia, không nút X */
.lv-dlg--alert .lv-dlg__head { padding-bottom: 0; border-bottom: 0; }
.lv-dlg--alert .lv-dlg__body { padding-top: 10px; }
.lv-dlg--alert .lv-dlg__foot { border-top: 0; padding-top: 4px; }

@keyframes lv-dlg-in  { from { opacity: 0 } to { opacity: 1 } }
@keyframes lv-dlg-pop { from { opacity: 0; transform: translateY(14px) scale(.975) } to { opacity: 1; transform: none } }

/* Điện thoại: trượt lên từ đáy (tầm ngón cái), nút xếp dọc — nút chính nằm TRÊN */
@media (max-width: 640px) {
  .lv-dlg { align-items: flex-end; padding: 0; }
  .lv-dlg__card {
    --lv-dlg-w: 100%;
    max-height: min(92vh, 100vh - 40px); margin: 0;
    border-radius: 22px 22px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation-name: lv-dlg-sheet;
  }
  .lv-dlg__head { padding: 18px 18px 12px; }
  .lv-dlg__body { padding: 16px 18px; }
  .lv-dlg__foot { flex-direction: column-reverse; align-items: stretch; gap: 8px; padding: 12px 18px 16px; }
  .lv-dlg__foot .lv-btn { width: 100%; }   /* KHÔNG flex:1 — cột nút phải tự đủ bề ngang */
  .lv-dlg--sheet .lv-dlg__head::before {
    content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 999px; background: var(--lv-border);
  }
  .lv-dlg--sheet .lv-dlg__head { padding-top: 22px; }
}
@keyframes lv-dlg-sheet { from { opacity: 0; transform: translateY(100%) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  .lv-dlg, .lv-dlg__card { animation: none; }
}

@media (prefers-reduced-motion: reduce) { .lv-btn, :where(a).lv-card { transition: none; } }