/* Trang web lensan.app — MỘT tệp kiểu dáng (P131). Mọi màu, chữ, khoảng là biến
   theo token của bộ vẽ Web 2026-11-13b (docs/design/cum-web.dc.html), tên biến
   trùng tên token trong lib/core/theme/app_colors.dart. Không style nội dòng. */

@font-face { font-family: "Be Vietnam Pro"; font-weight: 400; font-display: swap; src: url("/assets/fonts/BeVietnamPro-Regular.ttf") format("truetype"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 500; font-display: swap; src: url("/assets/fonts/BeVietnamPro-Medium.ttf") format("truetype"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 600; font-display: swap; src: url("/assets/fonts/BeVietnamPro-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 700; font-display: swap; src: url("/assets/fonts/BeVietnamPro-Bold.ttf") format("truetype"); }
@font-face { font-family: "Be Vietnam Pro"; font-weight: 800; font-display: swap; src: url("/assets/fonts/BeVietnamPro-ExtraBold.ttf") format("truetype"); }

:root {
  --paper: #FBFAF7;
  --n0: #FFFFFF;
  --n50: #F7F8F7;
  --n100: #EDEFEE;
  --n200: #DDE1DF;
  --n300: #C2C8C5;
  --n600: #4C5450;
  --n700: #343B38;
  --n900: #0F1A16;
  --primary50: #E9F4EF;
  --primary100: #C6E4D6;
  --primary700: #0A5039;
  --debt50: #FBF1DF;
  --debt700: #8A5300;

  --font: "Be Vietnam Pro", system-ui, sans-serif;

  /* Chữ: cỡ / dòng. Điện thoại theo khung -dt; máy tính đổi ở @media dưới. */
  --title-size: 28px;   --title-line: 34px;
  --body-size: 15px;    --body-line: 22px;
  --heading-size: 17px; --heading-line: 24px;
  --small-size: 13px;   --small-line: 18px;
  --meta-size: 12px;    --meta-line: 16px;
  --code-size: 32px;    --code-line: 40px;

  /* Khoảng */
  --gutter: 20px;
  --main-top: 24px;
  --main-bottom: 48px;
  --stack-gap: 16px;
  --content-max: 720px;
  --header-height: 64px;
  --tap: 48px;
  --button-height: 52px;

  /* Bo góc */
  --radius-card: 16px;
  --radius-button: 14px;
  --radius-badge: 10px;
  --radius-logo-lg: 22px;

  --shadow-band: 0 4px 12px rgba(15, 26, 22, 0.14);
}



*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--n700);
  font-family: var(--font);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--primary700); outline-offset: 2px; }

[hidden] { display: none !important; }

.wrap { max-width: var(--content-max); margin: 0 auto; }

/* Đầu trang (W2–W6): ô logo 32 + tên, dẫn về trang chủ */
.site-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 var(--gutter);
  border-bottom: 1px solid var(--n100);
}
.site-header a { min-height: var(--tap); display: flex; align-items: center; gap: 10px; }
.site-header .name { font-size: var(--heading-size); line-height: var(--heading-line); font-weight: 800; color: var(--n900); }
.header-spacer { height: var(--header-height); }

.logo-sm, .logo-lg {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary700);
}
.logo-sm { width: 32px; height: 32px; border-radius: var(--radius-badge); }
.logo-sm img { width: 26px; height: 26px; display: block; }
.logo-lg { width: 76px; height: 76px; border-radius: var(--radius-logo-lg); }
.logo-lg img { width: 64px; height: 64px; display: block; }

main { flex: 1; padding: var(--main-top) var(--gutter) var(--main-bottom); }
main > .wrap { display: flex; flex-direction: column; gap: var(--stack-gap); }

h1 {
  margin: 0;
  font-size: var(--title-size);
  line-height: var(--title-line);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--n900);
}
h2, .heading {
  margin: 0;
  font-size: var(--heading-size);
  line-height: var(--heading-line);
  font-weight: 700;
  color: var(--n900);
}
p { margin: 0; }
.lead { color: var(--n700); }
.muted { color: var(--n600); }
.meta { font-size: var(--meta-size); line-height: var(--meta-line); font-weight: 500; color: var(--n600); }
strong { font-weight: 700; color: var(--n900); }

.home .logo-wrap { padding-top: 24px; }
.title-pad { padding-top: 16px; }

/* Nút cửa hàng: ô giữ chỗ đúng tỉ lệ huy hiệu, không logo hãng */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store {
  height: var(--tap);
  flex: none;
  border-radius: var(--radius-badge);
  background: var(--n900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: 700;
  color: var(--n0);
}
.store-apple { width: 144px; }
.store-google { width: 162px; }

/* Dải xám có biểu tượng i (W1b, W2c) */
.note {
  background: var(--n50);
  border-radius: var(--radius-button);
  padding: 16px;
  display: flex;
  gap: 10px;
}
.note svg { flex: none; margin-top: 2px; color: var(--n600); }
.note p { flex: 1; min-width: 0; color: var(--n700); }

/* Thẻ mã mời (W2) */
.code-card {
  background: var(--n0);
  border: 1px solid var(--n200);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.code-label { font-size: var(--small-size); line-height: var(--small-line); font-weight: 600; color: var(--n600); }
.code-value {
  font-size: var(--code-size);
  line-height: var(--code-line);
  font-weight: 800;
  color: var(--n900);
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

.button {
  height: var(--button-height);
  border-radius: var(--radius-button);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font);
  font-size: var(--heading-size);
  line-height: var(--heading-line);
  font-weight: 700;
  cursor: pointer;
}
.button-filled { background: var(--primary700); color: var(--n0); border: 0; }
.button-outline { background: transparent; color: var(--primary700); border: 1px solid var(--primary700); }
.button-hug { width: auto; align-self: flex-start; padding: 0 24px; }

.group { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.group-tight { display: flex; flex-direction: column; gap: 8px; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--n700); }

.link {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: 700;
  color: var(--primary700);
}

/* Dải «Đã sao chép mã mời» ghim đáy khung nhìn (chốt nhỏ 13-11) */
.band {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 420px;
  background: var(--primary50);
  border: 1px solid var(--primary100);
  border-radius: var(--radius-button);
  padding: 12px;
  display: flex;
  gap: 8px;
  box-shadow: var(--shadow-band);
  font-size: var(--small-size);
  line-height: var(--small-line);
  font-weight: 600;
  color: var(--primary700);
}
.band svg { flex: none; }

/* Xoá tài khoản (W5) */
.card-mail {
  background: var(--primary50);
  border: 2px solid var(--primary700);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.card-app {
  background: var(--n0);
  border: 1px solid var(--n200);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-text { color: var(--n700); }
.warn {
  background: var(--debt50);
  border-radius: var(--radius-button);
  padding: 14px;
  display: flex;
  gap: 10px;
}
.warn svg { flex: none; margin-top: 1px; color: var(--debt700); }
.warn p { flex: 1; min-width: 0; font-weight: 500; color: var(--debt700); }

/* Văn bản pháp lý (W3, W4): ba dạng của ĐK-4 — tiêu đề mục, đoạn / gạch đầu dòng, chữ đậm */
.legal ul { list-style: none; margin: 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: var(--stack-gap); }
.legal li { display: flex; gap: 10px; }
.legal li::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--n600);
}

/* 404 (W6) */
.icon-muted { display: flex; color: var(--n300); }
.notfound { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 64px; text-align: center; }

/* Chân trang: bốn liên kết */
.site-footer { border-top: 1px solid var(--n100); padding: 24px var(--gutter) 32px; }
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  font-size: var(--small-size);
  line-height: var(--small-line);
  font-weight: 600;
  color: var(--n600);
}
.site-footer a { min-height: var(--tap); display: flex; align-items: center; }

/* Khung -mt (máy tính 1280). Đặt CUỐI tệp để thắng luật gốc cùng độ ưu tiên. */
@media (min-width: 768px) {
  :root {
    --title-size: 40px; --title-line: 48px;
    --gutter: 40px;
    --main-top: 32px;
    --stack-gap: 20px;
    --code-size: 40px; --code-line: 48px;
  }
  .note svg { margin-top: 4px; }
  .legal li::before { margin-top: 10px; }
  .title-pad { padding-top: 32px; }
  .card-mail .button { width: auto; align-self: flex-start; padding: 0 24px; }
  /* Khung -mt: chữ thân 17/26; nút cửa hàng, liên kết, dải vàng giữ 15/22. */
  .lead, .steps li, .card-text { font-size: 17px; line-height: 26px; }
  .home .logo-wrap { padding-top: 48px; }
  .notfound { padding-top: 96px; }
}