/* ============================================================
   SŌLATI · LIQUID GLASS UI KIT  v1
   Dựa trên nguyên tắc "material system" (setproduct.com):
   1. Kính = lớp vỏ (shell) + tấm nền ổn định cho chữ (plate)
   2. Độ dày cảm nhận đến từ mép: viền sáng + inner stroke + bóng
   3. MỘT hướng sáng khóa cứng toàn hệ: trên-trái (135deg)
   4. Chữ không bao giờ nằm trực tiếp trên blur thô
   5. Có fallback khi trình duyệt không hỗ trợ backdrop-filter
   ------------------------------------------------------------
   3 tier:
   .lg-1  trong nhất  — nav nổi, chip, tab, tooltip
   .lg-2  trung bình  — card nổi, sheet, toast
   .lg-3  đọc nhiều   — modal, drawer, popover có form
   ============================================================ */

:root{
  /* hướng sáng khóa cứng — KHÔNG đổi từng component */
  --lg-light: 135deg;

  /* mực + accent thương hiệu */
  --lg-ink: #1E2026;
  --lg-ink-soft: #3A3C42;
  --lg-muted: #6E7077;
  --lg-accent: #A8895E;

  /* vỏ kính theo tier: nền gradient theo hướng sáng */
  --lg1-fill: linear-gradient(var(--lg-light), rgba(255,255,255,.50), rgba(255,255,255,.22));
  --lg2-fill: linear-gradient(var(--lg-light), rgba(255,255,255,.62), rgba(255,255,255,.34));
  --lg3-fill: linear-gradient(var(--lg-light), rgba(255,255,255,.74), rgba(255,255,255,.48));

  --lg1-blur: 16px;
  --lg2-blur: 22px;
  --lg3-blur: 28px;

  /* mép kính: viền ngoài, highlight trong nóc, cross-section đáy */
  --lg-edge: rgba(255,255,255,.65);
  --lg-edge-top: rgba(255,255,255,.95);
  --lg-inner-top: inset 0 1px 0 rgba(255,255,255,.85);
  --lg-inner-bot: inset 0 -1px 0 rgba(30,32,38,.06);

  /* bóng nâng theo tier */
  --lg1-shadow: 0 8px 24px rgba(20,22,26,.08);
  --lg2-shadow: 0 14px 36px rgba(20,22,26,.12);
  --lg3-shadow: 0 24px 60px rgba(20,22,26,.18);

  /* tấm nền ổn định cho chữ (plate) */
  --lg-plate: rgba(255,255,255,.58);
  --lg-plate-strong: rgba(255,255,255,.82);

  --lg-r-sm: 12px;
  --lg-r-md: 16px;
  --lg-r-lg: 24px;
  --lg-r-pill: 999px;
}

/* ---------- LỚP VỎ KÍNH (shell) ---------- */
.lg-1, .lg-2, .lg-3{
  position: relative;
  border: 1px solid var(--lg-edge);
  border-top-color: var(--lg-edge-top);
  color: var(--lg-ink);
}
.lg-1{
  background: var(--lg1-fill);
  -webkit-backdrop-filter: blur(var(--lg1-blur)) saturate(160%);
  backdrop-filter: blur(var(--lg1-blur)) saturate(160%);
  box-shadow: var(--lg1-shadow), var(--lg-inner-top), var(--lg-inner-bot);
}
.lg-2{
  background: var(--lg2-fill);
  -webkit-backdrop-filter: blur(var(--lg2-blur)) saturate(160%);
  backdrop-filter: blur(var(--lg2-blur)) saturate(160%);
  box-shadow: var(--lg2-shadow), var(--lg-inner-top), var(--lg-inner-bot);
}
.lg-3{
  background: var(--lg3-fill);
  -webkit-backdrop-filter: blur(var(--lg3-blur)) saturate(170%);
  backdrop-filter: blur(var(--lg3-blur)) saturate(170%);
  box-shadow: var(--lg3-shadow), var(--lg-inner-top), var(--lg-inner-bot);
}

/* ---------- TẤM NỀN ỔN ĐỊNH CHO CHỮ (plate) ----------
   Đặt bên trong shell, bọc quanh text/icon dày chữ.
   Chữ dài, form, bảng → bắt buộc dùng plate-strong. */
.lg-plate{
  background: var(--lg-plate);
  border-radius: inherit;
}
.lg-plate-strong{
  background: var(--lg-plate-strong);
  border-radius: inherit;
}

/* ---------- BAR (header/nav full-width) ----------
   Kích hoạt khi có .scrolled hoặc .is-on */
.lg-bar{ transition: background .4s ease, box-shadow .4s ease, padding .4s ease; }
.lg-bar.scrolled, .lg-bar.is-on{
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.30));
  -webkit-backdrop-filter: blur(var(--lg1-blur)) saturate(160%);
  backdrop-filter: blur(var(--lg1-blur)) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 0 rgba(30,32,38,.06),
    0 8px 24px rgba(20,22,26,.06);
}

/* ---------- COMPONENTS ---------- */

/* Chip / tag */
.lg-chip{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--lg-r-pill);
  font-size: 13px; font-weight: 500; color: var(--lg-ink);
  cursor: pointer; user-select: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.lg-chip i{ color: var(--lg-accent); }

/* Tab row */
.lg-tabs{
  display: inline-flex; gap: 4px; padding: 4px;
  border-radius: var(--lg-r-pill);
  max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.lg-tabs::-webkit-scrollbar{ display: none; }
.lg-tab{
  padding: 8px 16px; border-radius: var(--lg-r-pill);
  font-size: 13px; font-weight: 500; color: var(--lg-ink-soft);
  border: 0; background: transparent; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background .25s ease, color .25s ease;
}
@media(max-width:480px){
  .lg-tab{ padding: 8px 10px; font-size: 12px; }
}
.lg-tab.active{ background: var(--lg-plate-strong); color: var(--lg-ink);
  box-shadow: 0 2px 8px rgba(20,22,26,.08); }

/* Button kính (hành động phụ — CTA chính vẫn dùng nút đặc) */
.lg-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--lg-r-pill);
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--lg-ink); cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.lg-btn.accent{ color: #fff;
  background: linear-gradient(var(--lg-light), rgba(168,137,94,.92), rgba(168,137,94,.78));
  border-color: rgba(255,255,255,.45);
}

/* Card */
.lg-card{ border-radius: var(--lg-r-lg); padding: 4px; }
.lg-card > .lg-plate, .lg-card > .lg-plate-strong{ padding: 20px 22px; }

/* Toast */
.lg-toast{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-radius: var(--lg-r-md);
  font-size: 14px; font-weight: 400; color: var(--lg-ink);
}
.lg-toast i{ color: var(--lg-accent); font-size: 18px; }

/* Tooltip */
.lg-tooltip{
  display: inline-block; padding: 8px 14px; border-radius: var(--lg-r-sm);
  font-size: 12px; font-weight: 500; color: var(--lg-ink);
}

/* Input trên kính: shell tier-3 + plate đặc gần như trắng */
.lg-input{
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 6px 18px; border-radius: var(--lg-r-pill);
}
.lg-input input{
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--lg-ink);
}
.lg-input input::placeholder{ color: var(--lg-muted); }

/* ---------- STATES (đổi độ nâng/sáng — không đổi hướng sáng) ---------- */
.lg-hover:hover, .lg-chip:hover, .lg-btn:hover{
  transform: translateY(-2px);
}
.lg-chip:hover, .lg-btn:hover{
  box-shadow: var(--lg2-shadow), var(--lg-inner-top), var(--lg-inner-bot);
}
.lg-chip:active, .lg-btn:active{
  transform: translateY(0) scale(.985);
}
.lg-chip:focus-visible, .lg-btn:focus-visible,
.lg-tab:focus-visible, .lg-input:focus-within{
  outline: 2px solid var(--lg-accent); outline-offset: 2px;
}
.lg-disabled, .lg-btn:disabled{
  opacity: .45; pointer-events: none; filter: saturate(60%);
}

/* ---------- FALLBACK: không có backdrop-filter ----------
   Kính đổi thành bề mặt mờ đặc — vẫn "có chủ đích", không vỡ. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .lg-1, .lg-2, .lg-3, .lg-bar.scrolled, .lg-bar.is-on{
    background: rgba(244,243,240,.96);
  }
}

/* ---------- TÔN TRỌNG CÀI ĐẶT HỆ THỐNG ---------- */
@media (prefers-reduced-transparency: reduce){
  .lg-1, .lg-2, .lg-3, .lg-bar.scrolled, .lg-bar.is-on{
    background: rgba(244,243,240,.97);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce){
  .lg-chip, .lg-btn, .lg-tab, .lg-bar{ transition: none; }
}