/* ==========================================================================
   Evixos — Hệ thống layout và giao diện
   --------------------------------------------------------------------------
   Ngôn ngữ thiết kế "Sổ đối chiếu": giao diện như một cuốn sổ kế toán sạch —
   giấy trắng, mực đậm, và dấu đối chiếu màu ngọc trên từng con số đã kiểm.

   • Nền TRẮNG, chỉ một giao diện sáng. `color-scheme: light` buộc cả thanh
     cuộn, ô nhập và hộp chọn của trình duyệt cũng sáng — kể cả khi hệ điều
     hành đang bật chế độ tối.
   • Màu ngọc chỉ xuất hiện ở nơi có bằng chứng: số liệu đã đối chiếu, dòng dữ
     liệu được trích dẫn, nút hành động chính. Không vệt màu trang trí.
   • Một họ chữ duy nhất: Be Vietnam Pro (do nhóm thiết kế Việt Nam làm riêng
     cho dấu thanh tiếng Việt). Con số luôn dùng chữ số cùng độ rộng.

   Ba phần theo luồng người dùng: Trang giới thiệu (§17) → Đăng nhập / Đăng
   ký (§14) → Workspace (§5–§13).

   Toàn bộ chuyển động và hiệu ứng nằm ở `animations.css`.
   ========================================================================== */

/* ==========================================================================
   1. Token thiết kế
   ========================================================================== */

:root {
  color-scheme: light;

  /* Nền giấy trắng, lớp phụ xám rất nhạt ngả lục — trung tính, không kem, không vệt màu */
  --paper: #ffffff;
  --paper-raised: #ffffff;
  --paper-soft: #f6f8f7;
  --paper-sunken: #eef2f0;

  /* Chữ — mực đen ngả lục: đủ đậm để đọc số liệu, dịu hơn đen tuyền */
  --ink: #102019;
  --text-primary: #102019;
  --text-secondary: #4b5b55;
  --text-tertiary: #7b8984;

  /* Ngọc đậm: nút chính và dấu "đã đối chiếu". Chàm: số trích dẫn. Mỗi màu một vai trò. */
  --jade: #0e7a57;
  --jade-dim: #0b6a4b;
  --jade-deep: #0a5a40;
  --jade-bright: #2fb884;
  --jade-wash: #e8f4ee;
  --celadon: #cfe7da;
  --celadon-wash: #f3f8f5;
  --teal: #0e8a86;
  --indigo: #3148c4;
  --indigo-wash: #eef0fd;
  --gradient-brand: linear-gradient(135deg, var(--jade) 0%, var(--jade-dim) 100%);

  /* Tín hiệu: hổ phách = số chưa kiểm chứng, đỏ = lỗi */
  --amber: #9a5b00;
  --amber-wash: #fff5e1;
  --lacquer: #b42318;
  --lacquer-wash: #fef1ef;

  /* Viền & kính */
  --hairline: rgba(16, 32, 25, 0.1);
  --hairline-strong: rgba(16, 32, 25, 0.17);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-deep: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.7);

  /* Đổ bóng phân cấp theo độ cao, pha màu mực lục thay vì đen */
  --shadow-flat: 0 1px 2px rgba(14, 38, 33, 0.05);
  --shadow-raised: 0 2px 8px rgba(14, 38, 33, 0.06), 0 1px 2px rgba(14, 38, 33, 0.04);
  --shadow-float: 0 14px 36px rgba(14, 38, 33, 0.1), 0 2px 8px rgba(14, 38, 33, 0.05);
  --shadow-modal: 0 32px 90px rgba(14, 38, 33, 0.2), 0 8px 24px rgba(14, 38, 33, 0.08);
  --shadow-jade: 0 6px 22px rgba(15, 155, 108, 0.3);
  --shadow-aura: 0 30px 80px rgba(11, 125, 86, 0.16), 0 6px 18px rgba(14, 38, 33, 0.06);

  /* Chữ — thang quãng ba trưởng (1,25) */
  --font-sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  /* Một họ chữ duy nhất — Be Vietnam Pro được thiết kế riêng cho dấu tiếng Việt */
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5625rem;
  --text-2xl: 1.9375rem;
  --text-3xl: 2.4375rem;
  --text-4xl: 3.0625rem;

  /* Khoảng cách — thang 4px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Bán kính khác nhau theo cấp */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Layout */
  --rail-width: 272px;
  --topbar-height: 56px;
  --content-max: 46rem;

  /* Tiết tấu chuyển động */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
}

/* ==========================================================================
   2. Thiết lập cơ sở
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Trên điện thoại, `overflow-x: hidden` chỉ đặt ở body chưa đủ: trình duyệt vẫn nới
   khung nhìn theo các lớp trang trí tràn mép (vầng sáng nền), khiến trang kéo ngang được
   và các lớp `position: fixed` toàn màn hình (chatbot hỗ trợ) rộng hơn màn hình.
   `clip` cắt phần tràn mà không biến body thành vùng cuộn, nên `position: sticky` vẫn chạy. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.018em; }
h1 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.03em; }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--jade-dim); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--jade); }

/* Nút dạng liên kết (Đăng nhập, Đăng ký…) giữ màu của nút, không đổi màu như liên kết */
a.btn:hover { color: var(--text-primary); }
a.btn--primary, a.btn--primary:hover { color: #ffffff; }

button, input, textarea, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }

code, kbd, pre { font-family: var(--font-mono); font-size: 0.92em; }
img, svg { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }

[hidden] { display: none !important; }

::selection { background: var(--jade-wash); color: var(--jade-dim); }

* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. Màn hình khởi động
   ========================================================================== */

.boot {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: var(--paper);
}

.boot__inner { position: relative; display: grid; justify-items: center; gap: var(--sp-5); text-align: center; }
.boot__mark { width: 64px; height: 64px; border-radius: 19px; font-size: var(--text-lg); }

/* Quầng ngọc rất nhạt nở ra sau logo, một lần */
.boot__glow {
  position: absolute;
  z-index: -1;
  top: 32px;
  left: 50%;
  width: 360px;
  height: 360px;
  margin: -180px 0 0 -180px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(47, 184, 132, 0.16), rgba(47, 184, 132, 0));
  pointer-events: none;
}

.boot__words { display: grid; justify-items: center; gap: var(--sp-3); }
.boot__name { margin: 0; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; color: var(--ink); }
.boot__word { display: inline-block; white-space: nowrap; }
.boot__word > span { display: inline-block; }
.boot__tagline { max-width: 32ch; margin: 0; font-size: var(--text-md); line-height: 1.55; color: var(--text-secondary); text-wrap: balance; }

/* "có nguồn" được đánh dấu như một con số đã đối chiếu với tài liệu */
.boot__proof {
  padding: 0 2px;
  border-radius: 3px;
  background: linear-gradient(var(--jade), var(--jade)) no-repeat 0 100% / 100% 2px, var(--jade-wash);
  color: var(--jade-deep);
  font-weight: 600;
}

.boot__skip { position: absolute; bottom: var(--sp-6); left: 0; right: 0; margin: 0; text-align: center; font-size: var(--text-xs); color: var(--text-tertiary); }

/* Các lần tải sau (data-intro="quick"): chỉ còn logo, như trước */
html:not([data-intro="full"]) :is(.boot__glow, .boot__words, .boot__skip) { display: none; }

/* ==========================================================================
   4. Logo
   ========================================================================== */

.brand-mark {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  /* Logo Evixos (bản cỡ nhỏ: nét dày, không chấm) nhúng thẳng vào CSS: không thêm lượt tải, không
     phụ thuộc thư mục brand/. Chữ viết tắt vẫn nằm trong DOM cho trình đọc màn hình. */
  background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9.50 9.50 221.00 101.00'%3E%3Cdefs%3E%3Cmask id='x17' maskUnits='userSpaceOnUse' x='0' y='0' width='240' height='120'%3E%3Crect width='240' height='120' fill='%23fff'/%3E%3Cline x1='84.07' y1='89.41' x2='155.93' y2='30.59' stroke='%23000' stroke-width='31'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cpath d='M60.80 22.01A38 38 0 1 0 60.80 97.99' fill='none' stroke='%237D8C92' stroke-width='25'/%3E%3Cpath d='M155.32 88.90A38 38 0 1 0 179.20 22.01' fill='none' stroke='%23F9C21A' stroke-width='25'/%3E%3C/g%3E%3Cpath d='M83.52 89.85L146.41 38.38' fill='none' stroke='%2334A45E' stroke-width='25'/%3E%3Cg mask='url(%23x17)'%3E%3Cpath d='M60.00 22.00A38 38 0 0 1 84.07 30.59L120.00 60.00' fill='none' stroke='%23498BED' stroke-width='25'/%3E%3Cpath d='M120.00 60.00L155.93 89.41' fill='none' stroke='%23E84B39' stroke-width='25'/%3E%3C/g%3E%3Cpath d='M180.00 22.00A38 38 0 0 0 155.93 30.59L145.87 38.83' fill='none' stroke='%23E84B39' stroke-width='25'/%3E%3Cpath d='M60.00 98.00A38 38 0 0 0 84.07 89.41' fill='none' stroke='%23498BED' stroke-width='25'/%3E%3C/svg%3E") center / 80% auto no-repeat;
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: grid;
  place-items: center;
  color: transparent;
  font-weight: 700;
  font-size: var(--text-sm);
  letter-spacing: -0.03em;
  flex-shrink: 0;
  isolation: isolate;
}

.brand-name { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.brand-sub { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.2; }

/* --------------------------------------------------------------------------
   Logo bằng ảnh. Hai nguồn, cùng một cách hiển thị:
     • logo SẢN PHẨM — BRAND_LOGO_FILE trong .env, gắn html[data-brand-logo];
     • logo của TỪNG TỔ CHỨC — tải lên ở Cài đặt → Thương hiệu, gắn
       html[data-tenant-logo] và biến --tenant-logo (blob: URL).
   Chữ viết tắt vẫn nằm trong DOM (color: transparent) để hiện lại nguyên vẹn
   nếu ảnh hỏng, và để trình đọc màn hình vẫn đọc được tên thương hiệu.
   -------------------------------------------------------------------------- */
/* Thương hiệu tự đặt (BRAND_NAME) mà chưa có file logo: ô logo hiện chữ viết tắt trên nền mực. */
html[data-brand-text] :is(.brand-mark, .reel__mark) { background: var(--ink); color: #ffffff; box-shadow: inset 0 -3px 0 var(--jade); }

html[data-brand-logo] :is(.brand-mark, .reel__mark) {
  background-color: #ffffff;
  background-image: url("/static/brand-logo");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* Logo của tổ chức chỉ thay khối chữ bên trong khu làm việc và ở ô xem trước:
   trang giới thiệu, trang đăng nhập và khung hỗ trợ vẫn là thương hiệu phần mềm. */
html[data-tenant-logo] :is(.rail__brand, .brand-preview) .brand-mark {
  background-color: #ffffff;
  background-image: var(--tenant-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  color: transparent;
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* ==========================================================================
   5. Khung ứng dụng
   --------------------------------------------------------------------------
   Bố cục quen thuộc của các trợ lý AI: thanh bên trái (cuộc trò chuyện mới,
   lịch sử, tri thức, hạn mức), vùng hội thoại ở giữa, ô soạn cố định ở đáy.
   Thanh bên là giấy xám rất nhạt, vùng hội thoại là giấy trắng — không kính
   mờ, không vệt màu: mắt người đọc dành cho câu trả lời và con số.
   ========================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: var(--rail-width) 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* --- Thanh bên ----------------------------------------------------------- */

.rail {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: 100vh;
  border-right: 1px solid var(--hairline);
  background: var(--paper-soft);
}

.rail__top { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4) var(--sp-3) var(--sp-3); }

.rail__brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: var(--sp-1) var(--sp-2); color: var(--text-primary); }
.rail__brand:hover { color: var(--text-primary); }
.rail__brand-text { min-width: 0; }
.rail__brand .brand-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.new-chat {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 9px var(--sp-3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.new-chat svg { color: var(--jade); }
.new-chat:hover { border-color: var(--jade); box-shadow: var(--shadow-flat); }

/* Vùng cuộn thật sự của thanh bên: lịch sử và tri thức. `contain` đúng chỗ này vì vùng này
   cuộn được thật — khác với khung hội thoại (xem ghi chú ở §7). */
.rail__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2) var(--sp-3) var(--sp-4);
}

.rail__section + .rail__section { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }

.rail__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 0;
  padding: 0 var(--sp-2) var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-primary);
}
.rail__heading h2 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: 0; }

.rail__count { font-size: var(--text-xs); font-weight: 400; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.rail__empty { margin: 0; padding: var(--sp-1) var(--sp-2); font-size: var(--text-xs); line-height: 1.5; color: var(--text-tertiary); }

.rail__link {
  display: block;
  width: 100%;
  margin-top: var(--sp-1);
  padding: 6px var(--sp-2);
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
}
.rail__link:hover { background: var(--paper-sunken); color: var(--text-primary); }
.rail__link[hidden] { display: none; }
.rail__link--danger:hover { background: var(--lacquer-wash); color: var(--lacquer); }

/* --- Lịch sử hội thoại ---------------------------------------------------- */

.conv-search { position: relative; margin: 0 0 var(--sp-2); }
.conv-search[hidden] { display: none; }
.conv-search__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; }

.conv-search__input {
  width: 100%;
  padding: 7px var(--sp-2) 7px 30px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-sm);
}

.conv-search__input::placeholder { color: var(--text-tertiary); }
.conv-search__input:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; border-color: transparent; }

.conv-item--hit .conv-item__open { display: grid; gap: 2px; white-space: normal; }
.conv-item__title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conv-item__snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--text-xs);
  line-height: 1.45;
  color: var(--text-tertiary);
}

.conv-item--hit mark { padding: 0 1px; border-radius: 3px; background: var(--amber-wash); color: var(--ink); }

.conv-group + .conv-group { margin-top: var(--sp-3); }
.conv-group__label { margin: 0; padding: var(--sp-1) var(--sp-2); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0; color: var(--text-tertiary); }
.conv-group__items { list-style: none; margin: 0; padding: 0; }

.conv-item { position: relative; display: flex; align-items: center; border-radius: var(--r-sm); }
.conv-item:hover { background: var(--paper-sunken); }
.conv-item.is-active { background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }

.conv-item__open {
  flex: 1;
  min-width: 0;
  padding: 7px var(--sp-2);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.conv-item:hover .conv-item__open,
.conv-item.is-active .conv-item__open { color: var(--text-primary); }
.conv-item.is-active .conv-item__open { font-weight: 500; }

.conv-item__delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-right: 2px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
}
.conv-item:hover .conv-item__delete,
.conv-item.is-active .conv-item__delete,
.conv-item__delete:focus-visible { opacity: 1; }
.conv-item__delete:hover { background: var(--lacquer-wash); color: var(--lacquer); }

@media (hover: none) {
  .conv-item__delete { opacity: 1; }
}

/* --- Tri thức: ô tải tài liệu và danh sách tài liệu ----------------------- */

.dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}

.dropzone:hover,
.dropzone:focus-visible,
.dropzone[data-active="true"] { border-color: var(--jade); background: var(--jade-wash); }

.dropzone__icon { flex-shrink: 0; color: var(--jade); }
.dropzone__text { display: flex; flex-direction: column; min-width: 0; }
.dropzone__title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.dropzone__hint { font-size: var(--text-xs); color: var(--text-tertiary); line-height: 1.4; }

.visually-hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.doc-list, .upload-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  list-style: none;
  margin: var(--sp-2) 0 0;
  padding: 0;
}

.upload-list:empty { display: none; }

.doc-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px var(--sp-2);
  border-radius: var(--r-sm);
  transition: background var(--dur-fast) var(--ease-out);
}

.doc-item:hover { background: var(--paper-sunken); }
.doc-item__icon { font-size: var(--text-sm); line-height: 1; }
.doc-item__body { min-width: 0; }
.doc-item__name { font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-item__meta { font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.doc-item--failed .doc-item__meta { color: var(--lacquer); }

.doc-item__tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--indigo-wash);
  color: var(--indigo);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 1px;
}

.doc-item__remove {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast), background var(--dur-fast);
}

.doc-item:hover .doc-item__remove, .doc-item__remove:focus-visible { opacity: 1; }
.doc-item__remove:hover { background: var(--lacquer-wash); color: var(--lacquer); }

@media (hover: none) {
  .doc-item__remove { opacity: 1; }
}

/* Vòng tiến trình tải lên */
.progress-ring { position: relative; width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; }
.progress-ring svg { position: absolute; inset: 0; width: 30px; height: 30px; transform: rotate(-90deg); }
.progress-ring__track { fill: none; stroke: var(--paper-sunken); stroke-width: 3; }
.progress-ring__bar {
  fill: none;
  stroke: url(#ringGradient);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 81.68;          /* 2π × r(13) */
  stroke-dashoffset: 81.68;
  transition: stroke-dashoffset 180ms linear;
}
.progress-ring__icon { font-size: 0.8rem; line-height: 1; }

.upload-bar { height: 3px; margin-top: 5px; border-radius: var(--r-pill); background: var(--paper-sunken); overflow: hidden; }
.upload-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--jade);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 180ms linear;
}

/* --- Hạn mức ------------------------------------------------------------- */

.usage { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 1px solid var(--hairline); }

.usage__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-bottom: 3px;
}

.usage__value { font-variant-numeric: tabular-nums; color: var(--text-tertiary); }
.usage .btn { margin-top: var(--sp-1); }

.meter { position: relative; height: 4px; border-radius: var(--r-pill); background: var(--paper-sunken); overflow: hidden; margin-bottom: var(--sp-2); }

.meter__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--jade);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out);
}

.meter__fill[data-level="warn"] { background: var(--amber); }
.meter__fill[data-level="full"] { background: var(--lacquer); }

/* ==========================================================================
   6. Vùng nội dung chính
   ========================================================================== */

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: var(--topbar-height);
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar__title { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }

.topbar__conv {
  min-width: 0;
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.icon-btn.rail-toggle { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px 9px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.chip--plan { border-color: transparent; background: var(--jade-wash); color: var(--jade-deep); font-weight: 600; }
.chip--amber { background: var(--amber-wash); color: var(--amber); border-color: transparent; }

/* --- Nút ---------------------------------------------------------------- */

.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-flat);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
    background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.btn:hover { box-shadow: var(--shadow-raised); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--primary { background: var(--jade); color: #fff; box-shadow: 0 1px 2px rgba(14, 38, 33, 0.12); }
.btn--primary:hover { background: var(--jade-dim); box-shadow: 0 6px 18px rgba(14, 122, 87, 0.28); }

.btn--ghost { background: var(--paper); border-color: var(--hairline-strong); box-shadow: none; }
.btn--ghost:hover { background: var(--paper-soft); box-shadow: none; }

.btn--quiet { background: transparent; box-shadow: none; color: var(--text-secondary); padding: 6px 10px; }
.btn--quiet:hover { background: var(--paper-sunken); color: var(--text-primary); box-shadow: none; }

.btn--sm { padding: 5px 12px; font-size: var(--text-sm); }
.btn--block { width: 100%; }

/* Nút loang màu cho lời mời hành động chính (đăng ký, chọn gói, đăng nhập).
   Chấm nhỏ trước chữ; rê chuột thì chấm lan phủ kín nút và chữ kèm mũi tên trượt vào.
   Nút ngọc loang sang mực, nút trắng loang sang ngọc. Chuyển động: animations.css §9. */
.btn-sweep { --sweep-fill: var(--jade); --sweep-dot: var(--jade); --sweep-ink: #ffffff; gap: 10px; }
.btn--primary.btn-sweep { --sweep-fill: var(--ink); --sweep-dot: rgba(255, 255, 255, 0.92); }
.closing__panel .btn--primary.btn-sweep { --sweep-fill: var(--jade); --sweep-dot: var(--jade); }

.btn-sweep__dot { position: relative; z-index: 0; width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--sweep-dot); }
.btn-sweep__label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--sp-2); }

.btn-sweep__reveal {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--sweep-ink);
  opacity: 0;
  pointer-events: none;
}

.icon-btn {
  position: relative;
  overflow: hidden;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.icon-btn:hover { background: var(--paper-sunken); color: var(--text-primary); }

/* --- Tài khoản: ảnh đại diện chữ cái, menu tài khoản (renderAccount) ------------
   Ảnh đại diện là chữ cái đầu trên nền một trong năm tông của bộ màu thương hiệu,
   chọn cố định theo tài khoản. Menu phỏng theo dropdown của 21st.dev / Radix:
   thẻ trắng viền mảnh, mục tô nền khi trỏ hoặc chọn bằng phím. */

.avatar {
  --avatar-bg: linear-gradient(140deg, #14956c, #0a5a40);
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--avatar-bg);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  user-select: none;
}
.avatar[data-tone="teal"] { --avatar-bg: linear-gradient(140deg, #13a6a0, #0b6b68); }
.avatar[data-tone="indigo"] { --avatar-bg: linear-gradient(140deg, #5467da, #2a3aa3); }
.avatar[data-tone="amber"] { --avatar-bg: linear-gradient(140deg, #c7821a, #8a5200); }
.avatar[data-tone="ink"] { --avatar-bg: linear-gradient(140deg, #3a5a4e, #102019); }
.avatar--md { width: 40px; height: 40px; font-size: 0.85rem; }
.avatar--xl { width: 80px; height: 80px; font-size: 1.6rem; box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--hairline), 0 12px 28px -10px rgba(14, 38, 33, 0.35); }

/* Ảnh đại diện thật thay cho khối chữ cái đầu tên. Chữ vẫn nằm trong DOM (màu trong suốt)
   để hiện lại nguyên vẹn nếu ảnh không tải được. `--user-avatar` là blob: URL do
   applyUserAvatar() đặt sau khi tải ảnh về kèm token. */
html[data-user-avatar] .avatar[data-account-avatar],
.avatar--photo {
  background-image: var(--user-avatar);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}
/* Ảnh của đồng nghiệp trong danh sách thành viên: nền do JavaScript gán riêng từng dòng. */
.avatar--photo { background-image: none; }

/* Khối đổi ảnh trong hồ sơ: nút máy ảnh nằm đè góc dưới bên phải ảnh. */
.avatar-edit { position: relative; display: inline-grid; }
.avatar-edit__btn {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
  color: #ffffff;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.avatar-edit__btn:hover { background: var(--jade); transform: scale(1.06); }
.avatar-edit__btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.profile__avatar-hint { max-width: 24ch; margin: var(--sp-3) 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-tertiary); }
.profile__card #avatarRemoveBtn { margin-top: var(--sp-2); }
.profile__card .field__error { margin-top: var(--sp-2); }

.account-trigger {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: 2px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.account-trigger .avatar { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.account-trigger:hover .avatar,
.account-trigger[aria-expanded="true"] .avatar { box-shadow: 0 0 0 3px var(--celadon); }
.account-trigger:active .avatar { transform: scale(0.94); }
.account-trigger:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }

.account-menu {
  position: fixed;
  z-index: 96;
  width: 18.5rem;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-float);
  transform-origin: top right;
}
.account-menu:focus { outline: none; }

/* --- Thông báo: nút chuông + khung thả xuống ----------------------------------
   Khung nằm ngay dưới thanh trên cùng, bám mép phải như menu tài khoản.
   Dòng chưa đọc có nền nhạt; chấm màu bên trái cho biết loại: xong (ngọc),
   lỗi (son), cần chú ý (hổ phách), tin thường (xám). */
.bell { position: relative; }
.bell__count {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 2px solid var(--paper);
  border-radius: var(--r-pill);
  background: var(--lacquer);
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
html[data-motion="full"] .bell__count:not([hidden]) { animation: bell-pop 360ms var(--ease-spring) backwards; }
@keyframes bell-pop { from { transform: scale(0.4); opacity: 0; } }

.notify {
  position: fixed;
  top: calc(var(--topbar-height) + 6px);
  right: max(var(--sp-4), env(safe-area-inset-right));
  z-index: 96;
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 16px));
  max-height: min(34rem, calc(100dvh - var(--topbar-height) - 24px));
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
html[data-motion="full"] .notify:not([hidden]) { animation: notify-in 200ms var(--ease-out) backwards; transform-origin: top right; }
@keyframes notify-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }

.notify__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--hairline); }
.notify__title { margin: 0; flex: 1; font-size: var(--text-md); font-weight: 700; }
.notify__list { flex: 1; min-height: 0; margin: 0; padding: 4px 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
.notify__empty { margin: 0; padding: var(--sp-5) var(--sp-4); font-size: var(--text-sm); line-height: 1.55; color: var(--text-tertiary); text-align: center; }

.note { display: flex; gap: var(--sp-3); padding: 10px var(--sp-4); }
.note + .note { border-top: 1px solid var(--hairline); }
.note[data-unread="true"] { background: var(--celadon-wash); }
.note__icon { flex-shrink: 0; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--text-tertiary); }
.note[data-level="success"] .note__icon { background: var(--jade); }
.note[data-level="error"] .note__icon { background: var(--lacquer); }
.note[data-level="warn"] .note__icon { background: var(--amber); }
.note__text { min-width: 0; }
.note__title { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.note__body { margin: 2px 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.note__time { margin: 4px 0 0; font-size: 0.7rem; color: var(--text-tertiary); }
.note__action { margin-top: 6px; padding: 0; border: none; background: none; color: var(--jade-deep); font: inherit; font-size: var(--text-xs); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.note__action:hover { color: var(--jade); }

.notify__foot { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--hairline); background: var(--paper-soft); }
.notify__device { display: flex; align-items: center; gap: var(--sp-3); }
.notify__device-text { flex: 1; font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); }
.notify__note { margin: 0; font-size: 0.7rem; line-height: 1.5; color: var(--text-tertiary); }
.notify__clear { justify-self: start; padding-left: 0; }

@media (max-width: 560px) {
  .notify { left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto; }
}

.account-menu__head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 6px; }
.account-menu__who { display: flex; flex-direction: column; min-width: 0; }
.account-menu__name,
.account-menu__email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__name { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.account-menu__name.is-empty { font-weight: 500; color: var(--text-tertiary); }
.account-menu__email { font-size: var(--text-xs); color: var(--text-tertiary); }

.account-menu__org {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 2px 4px 6px;
  padding: 6px 6px 6px 10px;
  border-radius: 9px;
  background: var(--paper-soft);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.account-menu__org-name { min-width: 0; overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.account-menu__role { flex-shrink: 0; padding: 1px 8px; border-radius: var(--r-pill); background: var(--jade-wash); color: var(--jade-deep); font-weight: 600; }

.account-menu__sep { height: 1px; margin: 5px -6px; background: var(--hairline); }

.account-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: background-color 0.12s ease-out;
}
.account-menu__item[hidden] { display: none; }
.account-menu__item svg { flex-shrink: 0; opacity: 0.6; transition: opacity 0.12s ease-out; }
.account-menu__item:focus { background: var(--paper-sunken); color: var(--ink); }
.account-menu__item:focus svg { opacity: 0.95; }
.account-menu__item:focus-visible { box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.account-menu__hint { margin-left: auto; padding-left: var(--sp-2); font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }

/* Công tắc hiệu ứng chuyển động trong menu (menuitemcheckbox) */
.account-menu__switch { position: relative; flex-shrink: 0; width: 30px; height: 18px; margin-left: auto; border-radius: var(--r-pill); background: var(--hairline-strong); transition: background-color var(--dur-base) var(--ease-out); }
.account-menu__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(14, 38, 33, 0.25); transition: transform var(--dur-base) var(--ease-spring); }
[aria-checked="true"] > .account-menu__switch { background: var(--jade); }
[aria-checked="true"] > .account-menu__switch::after { transform: translateX(12px); }

/* --- Hộp thoại hồ sơ tài khoản ------------------------------------------------ */

.profile { max-width: 880px; }
.profile__body { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; gap: var(--sp-6); }

.profile__card {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--celadon-wash) 0%, var(--paper) 42%);
  text-align: center;
}
.profile__name { margin: var(--sp-4) 0 0; font-size: var(--text-lg); font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.profile__name.is-empty { font-size: var(--text-md); font-weight: 600; color: var(--text-tertiary); }
.profile__email { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere; }
.profile__role { margin-top: var(--sp-2); padding: 2px 10px; border-radius: var(--r-pill); background: var(--jade-wash); color: var(--jade-deep); font-size: var(--text-xs); font-weight: 700; }
.profile__role-hint { max-width: 26ch; margin: var(--sp-2) 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-tertiary); }

.profile__facts { display: grid; gap: var(--sp-2); width: 100%; margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--hairline); font-size: var(--text-sm); text-align: left; }
.profile__facts > div { display: flex; justify-content: space-between; gap: var(--sp-3); }
.profile__facts dt { flex-shrink: 0; color: var(--text-tertiary); }
.profile__facts dd { min-width: 0; margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.profile__usage { width: 100%; margin-top: var(--sp-3); text-align: left; }
.profile__usage .meter { margin-bottom: 0; }
.profile__card .btn { margin-top: var(--sp-4); }

.profile__forms { display: grid; gap: var(--sp-5); }
.profile__section { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--hairline); }
.profile__section:last-child { padding-bottom: 0; border-bottom: none; }
.profile__heading { margin: 0 0 var(--sp-3); font-size: var(--text-md); font-weight: 700; }
.profile__lede { margin: -4px 0 var(--sp-4); font-size: var(--text-sm); color: var(--text-secondary); }
.profile__actions { display: flex; justify-content: flex-end; }
.profile__actions--split { justify-content: space-between; gap: var(--sp-3); }
/* Xoá tài khoản: mục cuối của hồ sơ, tiêu đề màu cảnh báo, các ô chỉ hiện sau khi bấm "Tôi muốn xoá". */
.profile__danger .profile__heading { color: var(--lacquer); }
.profile__danger .field__hint { margin: 0 0 var(--sp-4); }
.profile__danger .field__hint a { text-decoration: underline; text-underline-offset: 2px; }
#deleteAccountFields { margin-top: var(--sp-4); }
.profile .field__input[readonly] { background: var(--paper-soft); color: var(--text-secondary); cursor: default; }
.profile .field__input[readonly]:focus { border-color: var(--hairline-strong); box-shadow: none; }

/* Quy tắc mật khẩu: vòng trống → dấu ✓ ngọc khi đạt */
.password-rules { display: flex; flex-wrap: wrap; gap: 6px var(--sp-4); margin: -4px 0 var(--sp-4); padding: 0; list-style: none; font-size: var(--text-xs); color: var(--text-tertiary); }
.password-rules li { display: inline-flex; align-items: center; gap: 6px; transition: color var(--dur-base) var(--ease-out); }
.password-rules li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--hairline-strong); transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.password-rules li.is-met { color: var(--jade-deep); }
.password-rules li.is-met::before {
  background: var(--jade) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
  box-shadow: none;
}

@media (max-width: 760px) {
  .profile__body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .profile__card { position: static; }
  .profile .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* --- Hộp thoại Cài đặt (openSettings) ------------------------------------------
   Cột trái là danh sách nhóm, cột phải là nội dung nhóm đang chọn và tự cuộn.
   Mỗi dòng cài đặt: chữ bên trái, điều khiển bên phải; lựa chọn là các ô bấm
   (radiogroup), bật/tắt là công tắc (switch) — cùng một ngôn ngữ trong cả hộp thoại. */

/* `.modal.settings`: `.modal` (max-width 480px) đứng sau trong file nên cần độ ưu tiên cao hơn. */
.modal.settings { max-width: 980px; height: min(780px, calc(100vh - 2 * var(--sp-4))); }
.settings__head { align-items: center; }
.settings__saved { margin-left: auto; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; color: var(--text-tertiary); }
.settings__saved[data-state="saved"] { color: var(--jade-deep); }
.settings__saved[data-state="saved"]::before { content: "✓ "; }
.settings__saved[data-state="error"] { color: var(--lacquer); }

.settings__body { display: grid; flex: 1; grid-template-columns: 232px minmax(0, 1fr); min-height: 0; }

.settings__nav { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-3); border-right: 1px solid var(--hairline); background: var(--paper-soft); overflow-y: auto; }
.settings__tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.settings__tab svg { flex-shrink: 0; opacity: 0.7; }
.settings__tab:hover { background: var(--paper-sunken); color: var(--text-primary); }
.settings__tab[aria-selected="true"] { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-raised); }
.settings__tab[aria-selected="true"] svg { color: var(--jade); opacity: 1; }
.settings__tab:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
.settings__tab-count { margin-left: auto; padding: 0 7px; border-radius: var(--r-pill); background: var(--paper-sunken); font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

.settings__panels { min-height: 0; padding: var(--sp-5) var(--sp-6) var(--sp-6); overflow-y: auto; }
.settings__heading { margin: 0 0 var(--sp-2); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; }
.settings__lede { max-width: 60ch; margin: 0 0 var(--sp-3); font-size: var(--text-sm); color: var(--text-secondary); }

.set-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3) var(--sp-5); padding: var(--sp-4) 0; border-bottom: 1px solid var(--hairline); }
.set-row--stack { grid-template-columns: minmax(0, 1fr); }
.set-row__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3) var(--sp-5); }
.set-row__title { display: block; margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.set-row__desc { max-width: 58ch; margin: 3px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); }
.set-row__value { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.set-select { width: auto; min-width: 250px; }

/* Nhóm lựa chọn */
.choice-group { display: inline-flex; justify-self: start; gap: 2px; padding: 3px; border-radius: 11px; background: var(--paper-sunken); }
.set-row:not(.set-row--stack) > .choice-group,
.set-row__head > .choice-group { justify-self: end; }
.choice-group--wrap { flex-wrap: wrap; }
.choice {
  padding: 6px 13px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.choice:hover { color: var(--text-primary); }
.choice[aria-checked="true"] { background: var(--paper); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-raised); }
.choice:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }

/* Công tắc bật/tắt */
.switch { position: relative; flex-shrink: 0; width: 40px; height: 24px; padding: 0; border: none; border-radius: var(--r-pill); background: var(--hairline-strong); cursor: pointer; transition: background-color var(--dur-base) var(--ease-out); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(14, 38, 33, 0.28); transition: transform var(--dur-base) var(--ease-spring); }
.switch[aria-checked="true"] { background: var(--jade); }
.switch[aria-checked="true"]::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.switch:disabled { cursor: not-allowed; opacity: 0.55; }

/* Xem trước cỡ chữ và kiểu trả lời */
.set-preview { padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--hairline-strong); border-radius: var(--r-md); }
.set-preview__label { display: block; margin-bottom: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); }
.set-preview__body p { margin: 0; }

.set-sample { margin: var(--sp-4) 0 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--celadon-wash), var(--paper) 70%); }
.set-sample__caption { margin-bottom: var(--sp-3); font-size: var(--text-xs); font-weight: 600; color: var(--jade-deep); }
.set-sample__question { width: fit-content; max-width: 80%; margin: 0 0 var(--sp-3) auto; padding: 7px 13px; border-radius: 14px 14px 4px 14px; background: var(--paper-sunken); font-size: var(--text-sm); font-weight: 500; }
.set-sample__answer p { margin: 0 0 var(--sp-2); }
.set-sample__answer p:last-child { margin-bottom: 0; }
.set-sample__answer .cite-ref { cursor: default; }
.set-sample__note { margin: var(--sp-3) 0 0; font-size: var(--text-xs); color: var(--text-tertiary); }

/* Hướng dẫn riêng cho trợ lý */
.set-textarea { min-height: 112px; resize: vertical; font: inherit; font-size: var(--text-sm); line-height: 1.6; }
.set-textarea__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.set-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.set-chip { padding: 4px 11px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--paper); color: var(--text-secondary); font: inherit; font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.set-chip:hover { border-color: rgba(14, 122, 87, 0.3); background: var(--jade-wash); color: var(--jade-deep); }
.set-counter { font-size: var(--text-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.set-counter.is-near { color: var(--amber); font-weight: 600; }

/* Kỹ năng */
.skill-list { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.skill-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); padding: 10px 12px 10px 10px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); transition: background-color var(--dur-base) var(--ease-out); }
.skill-row.is-off { background: var(--paper-soft); }
.skill-row.is-off :is(.skill-row__icon, .skill-row__text) { opacity: 0.55; }
.skill-row__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--paper-soft); font-size: 1.1rem; transition: opacity var(--dur-base) var(--ease-out); }
.skill-row__text { min-width: 0; transition: opacity var(--dur-base) var(--ease-out); }
.skill-row__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.skill-row__badge { padding: 0 7px; border-radius: var(--r-pill); background: var(--jade-wash); color: var(--jade-deep); font-size: 0.68rem; font-weight: 700; }
.skill-row__desc { margin: 1px 0 0; font-size: var(--text-xs); color: var(--text-secondary); }
.skill-row__use { white-space: nowrap; }

/* Tiện ích */
.plugin { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--paper); }
.plugin[data-state="off"] { background: var(--paper-soft); }
.plugin--feature { margin-top: var(--sp-4); background: linear-gradient(180deg, var(--celadon-wash), var(--paper) 60%); }
.plugin__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.plugin__logo { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--paper-soft); box-shadow: inset 0 0 0 1px var(--hairline); font-size: 1.2rem; }
.plugin__logo--sheets { background: #e6f4ea; color: #137333; box-shadow: none; }
.plugin__title-wrap { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.plugin__title { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.plugin__desc { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); }
.plugin__status { display: inline-flex; flex-shrink: 0; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--r-pill); background: var(--paper-sunken); font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); white-space: nowrap; }
.plugin__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); }
.plugin__status[data-state="on"] { background: var(--jade-wash); color: var(--jade-deep); }
.plugin__status[data-state="on"]::before { background: var(--jade); }
.plugin__action { align-self: flex-start; margin-top: auto; }
.plugin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }

.sheets-form { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) auto; gap: var(--sp-2); }
/* AI riêng của tổ chức: nhà cung cấp · model · khoá, rồi hàng nút */
.own-ai-form { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 1.4fr); gap: var(--sp-2); }
.own-ai-form__actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: var(--sp-2); }
#ownAiPlugin .field__hint { margin: 0; }
#ownAiPlugin .plugin__action, #ownAiPlans { align-self: flex-start; }
@media (max-width: 720px) { .own-ai-form { grid-template-columns: minmax(0, 1fr); } }
.sheets-form .btn { height: 42px; }
#sheetsPlugin .field__hint { margin: 0; }
.sheets-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sheets-list:empty { display: none; }
.sheets-item { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 10px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); }
.sheets-item__icon { flex-shrink: 0; }
.sheets-item__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.sheets-item__name { overflow: hidden; font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sheets-item__meta { font-size: var(--text-xs); color: var(--text-tertiary); }

/* Thương hiệu */
.brand-panel { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); gap: var(--sp-5); align-items: start; margin-top: var(--sp-4); }
.brand-preview { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--paper-soft); }
.brand-preview__rail { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.brand-preview__text { display: grid; min-width: 0; }
.brand-preview__text .brand-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-preview__label { font-size: var(--text-xs); color: var(--text-tertiary); }
.brand-preview .brand-mark { width: 44px; height: 44px; border-radius: 12px; }
.brand-actions { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.brand-meta { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.brand-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.brand-actions .field__hint { margin: 0; max-width: 46ch; }
.brand-actions .field__error:not([hidden]) { margin: 0; }
/* Ô chọn file của trình duyệt xấu và khó canh; ẩn đi, nút "Chọn ảnh logo" bấm hộ. */
.visually-hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.brand-gate { margin: var(--sp-4) 0 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--paper-sunken); font-size: var(--text-sm); color: var(--text-secondary); }
.settings__note { max-width: 70ch; margin: var(--sp-4) 0 0; font-size: var(--text-xs); line-height: 1.6; color: var(--text-tertiary); }
.settings__note code { padding: 1px 5px; border-radius: 5px; background: var(--paper-sunken); font-size: 0.95em; color: var(--text-secondary); }

/* Phím tắt */
.shortcut-list { margin: var(--sp-3) 0 0; }
.shortcut { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.shortcut__keys { display: flex; flex-shrink: 0; align-items: center; gap: 4px; margin: 0; order: 2; }
.shortcut__label { margin: 0; font-size: var(--text-sm); color: var(--text-primary); }
.shortcut__plus { font-size: var(--text-xs); color: var(--text-tertiary); }
.shortcut kbd { min-width: 28px; padding: 3px 8px; border: 1px solid var(--hairline-strong); border-bottom-width: 2px; border-radius: 7px; background: var(--paper); font: inherit; font-size: var(--text-xs); font-weight: 600; text-align: center; color: var(--ink); }

/* Dữ liệu và quyền riêng tư */
.btn--danger-ghost { border-color: rgba(180, 35, 24, 0.3); background: var(--paper); color: var(--lacquer); box-shadow: none; }
.btn--danger-ghost:hover { background: var(--lacquer-wash); }
.btn[data-armed="true"] { border-color: var(--lacquer); background: var(--lacquer); color: #ffffff; }
.privacy-facts { display: grid; gap: var(--sp-3); margin: var(--sp-5) 0 0; padding: var(--sp-4); border-radius: var(--r-md); background: var(--paper-soft); list-style: none; font-size: var(--text-sm); color: var(--text-secondary); }
.privacy-facts li { position: relative; padding-left: 26px; line-height: 1.55; }
.privacy-facts li::before { content: "✓"; position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--jade-wash); color: var(--jade-deep); font-size: 0.7rem; font-weight: 700; }
.privacy-facts strong { color: var(--ink); }

@media (max-width: 760px) {
  .modal.settings { height: calc(100vh - 2 * var(--sp-3)); }
  .settings__body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .settings__nav { flex-direction: row; padding: var(--sp-2) var(--sp-3); border-right: none; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; }
  .settings__nav::-webkit-scrollbar { display: none; }
  .settings__tab { width: auto; flex-shrink: 0; white-space: nowrap; }
  .settings__panels { padding: var(--sp-4); }
  .set-row,
  .set-row__head { grid-template-columns: minmax(0, 1fr); }
  .set-row:not(.set-row--stack) > .choice-group,
  .set-row__head > .choice-group { justify-self: start; }
  .set-select { width: 100%; min-width: 0; }
  .skill-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .skill-row__use { grid-column: 2; justify-self: start; padding-left: 0; }
  .plugin-grid,
  .sheets-form,
  .brand-panel { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   7. Khung hội thoại
   ========================================================================== */

/* Vùng cuộn là cả trang (thanh trên cùng dính `sticky`, ô soạn tin cố định ở đáy), không phải khung chat:
   khung chat cao theo nội dung nên không bao giờ tự cuộn được. Đừng đặt lại `overflow-y: auto` kèm
   `overscroll-behavior: contain` ở đây — khung "cuộn được nhưng không có gì để cuộn" đó giữ lại con lăn
   chuột và không cho trang cuộn: câu trả lời dài hơn màn hình không kéo xuống được. */
.canvas { flex: 1; padding: var(--sp-6) var(--sp-5) 230px; }
.canvas__inner { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-6); }

/* --- Màn hình chào -------------------------------------------------------- */

.welcome { padding: clamp(var(--sp-5), 7vh, var(--sp-8)) 0 var(--sp-4); }

.welcome__greet { margin: 0 0 var(--sp-2); font-size: var(--text-md); font-weight: 500; color: var(--jade-dim); }

.headline {
  position: relative;
  max-width: 22ch;
  margin-bottom: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

.welcome__lede { max-width: 60ch; font-size: var(--text-md); color: var(--text-secondary); }

.welcome__guide {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  padding: 6px 14px 6px 12px;
  border-radius: var(--r-pill);
  background: var(--jade-wash);
  color: var(--jade-deep);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out);
}
.welcome__guide:hover { background: var(--celadon); color: var(--jade-deep); }

/* Radar: điều cần chú ý, đếm sẵn từ bảng tồn kho */
.radar { margin-top: var(--sp-6); }
.radar__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-bottom: var(--sp-3); }
.radar__title { margin: 0; font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
.radar__source { font-size: var(--text-xs); color: var(--text-tertiary); }

.radar__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--sp-3); }

.radar-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--paper);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.radar-card:hover { border-color: var(--jade); box-shadow: var(--shadow-raised); }

.radar-card__count { font-size: 1.75rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.radar-card[data-level="warn"] .radar-card__count { color: var(--amber); }
.radar-card[data-level="ok"] .radar-card__count { color: var(--jade); }
.radar-card__label { font-size: var(--text-sm); color: var(--text-secondary); }
.radar-card__ask { margin-top: var(--sp-2); font-size: var(--text-xs); font-weight: 600; color: var(--jade-dim); }

/* Chưa có tài liệu: một lời mời hành động rõ ràng */
.starter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px dashed var(--hairline-strong);
  border-radius: 16px;
  background: var(--paper-soft);
}
.starter__title { margin: 0 0 var(--sp-1); font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; }
.starter p { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); max-width: 52ch; }
.starter .btn { flex-shrink: 0; }
.starter p.starter__sample-note { margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--text-tertiary); }
.starter p.starter__sample-note[hidden] { display: none; }
.starter__actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2); flex-shrink: 0; }
.starter__actions .btn[hidden] { display: none; }

@media (max-width: 640px) {
  .starter { flex-direction: column; align-items: stretch; }
}

.suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-5); }
.suggestions:empty { display: none; }

.suggestion {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--text-primary);
  font-size: var(--text-sm);
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.suggestion:hover { background: var(--paper-soft); border-color: var(--hairline-strong); }
.suggestion__icon { color: var(--jade); flex-shrink: 0; margin-top: 3px; }

/* --- Lượt hội thoại ----------------------------------------------------- */

#turns { display: flex; flex-direction: column; gap: var(--sp-6); }
#turns:empty { display: none; }

.turn { display: flex; flex-direction: column; gap: var(--sp-3); }
.turn--user { align-items: flex-end; }

.bubble-user {
  max-width: min(80%, 38rem);
  padding: 10px var(--sp-4);
  border-radius: 18px 18px 6px 18px;
  background: var(--paper-sunken);
  color: var(--text-primary);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Câu trả lời không nằm trong thẻ: đọc như một trang văn bản, chỉ phần kiểm chứng có khung. */
.answer { display: flex; flex-direction: column; gap: var(--sp-4); }

.answer__head { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-secondary); }
.answer__agent { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; color: var(--text-primary); }
.answer__agent-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: var(--paper-soft); box-shadow: inset 0 0 0 1px var(--hairline); font-size: var(--text-sm); }
.answer__latency { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--text-tertiary); font-size: var(--text-xs); }

/* Cỡ chữ câu trả lời theo Cài đặt → Chung (html[data-answer-size], do applySettings đặt) */
html[data-answer-size="sm"] { --answer-size: 0.9375rem; }
html[data-answer-size="lg"] { --answer-size: 1.125rem; }
.answer__body { font-size: var(--answer-size, var(--text-md)); line-height: 1.7; overflow-wrap: break-word; }
.answer__body > :first-child { margin-top: 0; }
.answer__body > :last-child { margin-bottom: 0; }
.answer__body h3, .answer__body h4 { margin: var(--sp-5) 0 var(--sp-2); }
.answer__body ul, .answer__body ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.answer__body li { margin-bottom: var(--sp-2); }
.answer__body code { padding: 2px 6px; border-radius: 5px; background: var(--paper-sunken); }
.answer__body pre { padding: var(--sp-4); border-radius: var(--r-md); background: var(--paper-soft); border: 1px solid var(--hairline); overflow-x: auto; }
.answer__body pre code { padding: 0; background: none; }
.answer__body blockquote { margin: 0 0 var(--sp-4); padding-left: var(--sp-4); border-left: 3px solid var(--celadon); color: var(--text-secondary); }
.answer__body hr { border: none; border-top: 1px solid var(--hairline); margin: var(--sp-5) 0; }

/* Dấu đối chiếu trong câu trả lời thật: nhẹ hơn trang giới thiệu vì một câu trả lời có thể có hàng chục con số. */
.answer__body .num-ok { padding: 0; background: none; font-weight: inherit; color: inherit; box-shadow: inset 0 -1.5px 0 rgba(14, 122, 87, 0.55); border-radius: 0; }
.answer__body .num-flag { font-weight: 600; }

.table-scroll { overflow-x: auto; margin-bottom: var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--r-md); }
.answer__body table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.answer__body th, .answer__body td { padding: var(--sp-2) var(--sp-3); text-align: left; border-bottom: 1px solid var(--hairline); }
.answer__body th { background: var(--paper-soft); font-weight: 600; white-space: nowrap; }
.answer__body td:first-child { white-space: nowrap; }   /* cột đầu thường là mã hàng: không bẻ "SP-2024-B" thành hai dòng */
.answer__body tr:last-child td { border-bottom: none; }

.cite-ref {
  display: inline-block;
  min-width: 18px;
  padding: 0 5px;
  margin: 0 1px;
  border: none;
  border-radius: 5px;
  background: var(--indigo-wash);
  color: var(--indigo);
  font-size: 0.72em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  vertical-align: 2px;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.cite-ref:hover { background: var(--indigo); color: #fff; }

/* --- Thẻ "đang suy nghĩ" -------------------------------------------------- */

.thinking-card { gap: var(--sp-3); }
.thinking-head { display: flex; align-items: center; gap: var(--sp-3); }
.thinking-stage { position: relative; font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); min-height: 1.4em; }
/* Đồng hồ chờ: số giây đứng yên một chỗ (tabular) để không làm chữ bên cạnh nhảy */
.thinking-time { margin-left: auto; font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--text-tertiary); }
.thinking-wait { margin: 0; padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--amber-wash); font-size: var(--text-sm); line-height: 1.55; color: var(--amber); }

/* --- Thanh thao tác dưới câu trả lời -------------------------------------- */

.answer__actions { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: calc(-1 * var(--sp-2)); }
.answer__actions:empty { display: none; }

.answer-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.answer-action:hover { background: var(--paper-sunken); color: var(--text-primary); }
.answer-action:disabled { cursor: default; color: var(--jade-dim); background: transparent; }
.answer-action__lock { color: var(--text-tertiary); }

/* "Tải về": ba loại file đứng thành một nhóm sau chữ dẫn. Loại người dùng xin trong câu hỏi được tô nổi. */
.answer-export {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding-left: var(--sp-2);
  border-left: 1px solid var(--hairline);
}
.answer-export__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-right: 2px;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.answer-action.is-wanted { background: var(--jade-wash); color: var(--jade-deep); font-weight: 600; }
.answer-action.is-wanted:hover { background: var(--celadon); color: var(--jade-deep); }
/* Điện thoại: bỏ vạch ngăn và thu lề nút để cả ba loại file nằm trên một dòng (343px ở máy rộng 375px). */
@media (max-width: 560px) {
  .answer-export { flex-basis: 100%; padding-left: 0; border-left: none; }
  .answer-export .answer-action { padding-inline: 8px; }
}

/* 👍/👎 đứng cuối hàng, tách khỏi các thao tác với nội dung */
.answer-rate { display: inline-flex; gap: 2px; margin-left: auto; }
.answer-action--icon { padding: 5px 8px; }
.answer-action[aria-pressed="true"] { background: var(--jade-wash); color: var(--jade-deep); }
.answer-action[data-rating="down"][aria-pressed="true"] { background: var(--lacquer-wash); color: var(--lacquer); }

.answer-reasons {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-2) 0 0;
}

.answer-reasons[hidden] { display: none; }
.answer-reasons__label { font-size: var(--text-xs); color: var(--text-secondary); }

/* "Hỏi tiếp": chỉ câu trả lời mới nhất mới có, để lịch sử dài không đầy nút. */
.answer-follow {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  padding: var(--sp-2) 0 0;
}
.turn:not(:last-child) .answer-follow { display: none; }
.answer-follow__label { font-size: var(--text-xs); color: var(--text-secondary); }
.answer-follow .chip { cursor: pointer; padding: 4px 11px; }
.answer-follow .chip:hover { border-color: var(--jade); color: var(--jade-deep); }
.answer-reasons .chip { cursor: pointer; padding: 4px 11px; }
.answer-reasons .chip:hover { border-color: var(--hairline-strong); color: var(--ink); }
.answer-reasons .chip[aria-pressed="true"] { border-color: transparent; background: var(--lacquer-wash); color: var(--lacquer); }

/* ==========================================================================
   8. Chỉ báo căn cứ dữ liệu — thành phần đặc trưng của sản phẩm
   ========================================================================== */

/* Mỗi mức một màu, dùng chung cho chữ mức, thanh đo và vạch trái của ý cần kiểm chứng.
   `.level-chip` là chữ mức đứng riêng (bảng chú giải ở trang hướng dẫn). */
.trust, .level-chip { --tone: var(--jade); --tone-ink: var(--jade-deep); --tone-wash: var(--jade-wash); }
:is(.trust, .level-chip)[data-level="medium"] { --tone: #c27a00; --tone-ink: var(--amber); --tone-wash: var(--amber-wash); }
:is(.trust, .level-chip)[data-level="low"] { --tone: var(--lacquer); --tone-ink: var(--lacquer); --tone-wash: var(--lacquer-wash); }
:is(.trust, .level-chip)[data-level="none"] { --tone: var(--text-tertiary); --tone-ink: var(--text-secondary); --tone-wash: var(--paper-sunken); }

.trust {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.trust__head { display: flex; align-items: baseline; gap: var(--sp-2); }
.trust__label { color: var(--text-secondary); font-weight: 500; }
.trust__level,
.level-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 9px 1px 7px;
  border-radius: var(--r-pill);
  background: var(--tone-wash);
  color: var(--tone-ink);
  font-weight: 700;
  white-space: nowrap;
}
.trust__level::before,
.level-chip::before { content: ""; flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); }
.trust[data-level="none"] .trust__level::before,
.level-chip[data-level="none"]::before { background: none; box-shadow: inset 0 0 0 1.5px var(--tone); }
.trust__score {
  margin-left: auto;
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tone-ink);
}

/* Thanh đo: ba vùng Thấp / Trung bình / Cao tô rất nhạt, phần đã đạt tô đậm theo mức.
   Hai vạch trắng đánh dấu đúng ngưỡng máy chủ dùng để quyết định trả lời hay từ chối. */
.trust__meter {
  position: relative;
  height: 8px;
  margin-top: 2px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg,
    rgba(180, 35, 24, 0.1) 0 var(--b1),
    rgba(194, 122, 0, 0.13) var(--b1) var(--b2),
    rgba(14, 122, 87, 0.12) var(--b2) 100%);
  overflow: hidden;
}
.trust__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--value) * 100%);
  border-radius: inherit;
  background: var(--tone);
  transform-origin: left center;
}
.trust__meter::before,
.trust__meter::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--paper-soft);
}
.trust__meter::before { left: var(--b1); }
.trust__meter::after { left: var(--b2); }

.trust__scale {
  display: grid;
  grid-template-columns: var(--b1) calc(var(--b2) - var(--b1)) 1fr;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  line-height: 1.3;
}
.trust__scale > span { padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.trust__scale > span:first-child { padding-left: 0; }

.trust__summary { margin: var(--sp-1) 0 0; color: var(--text-primary); }
.trust__clear { margin: 0; color: var(--jade-deep); }
.trust__clear::before { content: "✓ "; font-weight: 700; }

.trust__facts { display: flex; flex-wrap: wrap; gap: 2px var(--sp-4); margin: 0; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.trust__facts[hidden] { display: none; }
.trust__fact--ok { color: var(--jade-deep); }
.trust__fact--ok::before { content: "✓ "; font-weight: 700; }

/* Danh sách ý cần kiểm chứng: mỗi ý là một nút — bấm để cuộn tới đúng chỗ trong câu trả lời. */
.trust__review { margin-top: var(--sp-1); border-top: 1px solid var(--hairline); padding-top: var(--sp-2); }
.trust__review-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}
.trust__review-head::-webkit-details-marker { display: none; }
.trust__review-head::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: -3px 0 0 2px;
  border-right: 1.5px solid var(--text-tertiary);
  border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
.trust__review:not([open]) .trust__review-head::after { transform: rotate(-45deg); margin-top: 0; }
.trust__review-head:focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; }
.trust__count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--amber-wash);
  color: var(--amber);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.trust__checks { display: grid; gap: 2px; margin: var(--sp-2) 0 0; padding: 0; list-style: none; }

.trust-check {
  --mark: var(--amber);
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 7px var(--sp-3) 7px 14px;
  border: none;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: transparent;
  box-shadow: inset 2px 0 0 var(--mark);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.trust-check[data-kind="wording"] { --mark: var(--text-tertiary); }
.trust-check:hover:not(:disabled) { background: var(--paper); }
.trust-check:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }
.trust-check:disabled { cursor: default; }
.trust-check__kind { font-size: var(--text-xs); font-weight: 600; color: var(--mark); }
.trust-check[data-kind="wording"] .trust-check__kind { color: var(--text-secondary); }
.trust-check__text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-primary);
}
.trust-check__reason { color: var(--text-secondary); font-size: var(--text-xs); }

.trust__note { margin: var(--sp-1) 0 0; font-size: var(--text-xs); color: var(--text-tertiary); }
.trust__note a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hairline-strong); }
.trust__note a:hover { color: var(--jade-deep); text-decoration-color: currentColor; }

/* Ý cần kiểm chứng trong thân câu trả lời: tô nền nhạt, không đổi bố cục (dùng bóng thay lề). */
.answer__body .claim-flag:not(tr) { border-radius: 3px; background: var(--amber-wash); box-shadow: 0 0 0 3px var(--amber-wash); }
.answer__body tr.claim-flag td { background: var(--amber-wash); }
.answer__body .claim-flag[data-claim="wording"]:not(tr) { background: var(--paper-soft); box-shadow: 0 0 0 3px var(--paper-soft); }
.answer__body tr.claim-flag[data-claim="wording"] td { background: var(--paper-soft); }

@media (max-width: 480px) {
  .trust { padding: var(--sp-3); }
  .trust__scale { display: none; }
}

.notice { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); font-size: var(--text-sm); line-height: 1.55; }
.notice--warn { background: var(--amber-wash); color: var(--amber); }
.notice--alert { background: var(--lacquer-wash); color: var(--lacquer); }
.notice--info { background: var(--indigo-wash); color: var(--indigo); }
.notice__icon { flex-shrink: 0; margin-top: 2px; }

/* Nguồn trích dẫn: thu gọn, mở khi cần (bấm số trích dẫn trong câu trả lời cũng mở ra) */
.sources { border: 1px solid var(--hairline); border-radius: var(--r-md); }

.sources__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
}
.sources__head::-webkit-details-marker { display: none; }
.sources__head::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-base) var(--ease-out);
}
.sources[open] .sources__head::after { transform: rotate(225deg) translateY(-2px); }
.sources__head:hover { color: var(--text-primary); }
.sources__files { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; color: var(--text-tertiary); }
.sources[open] { padding-bottom: var(--sp-2); }
.sources[open] .sources__head { border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-1); }

.source { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); margin: 0 var(--sp-2); padding: var(--sp-2); border-radius: var(--r-sm); transition: background var(--dur-base) var(--ease-out); }
.source:hover { background: var(--paper-soft); }

.source__index {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--indigo-wash);
  color: var(--indigo);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.source__file { font-size: var(--text-sm); font-weight: 500; margin-bottom: 2px; }
.source__where { font-size: var(--text-xs); color: var(--text-tertiary); margin-bottom: var(--sp-1); }
.source__snippet { font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); white-space: pre-line; }

/* ==========================================================================
   9. Ô soạn câu hỏi
   ========================================================================== */

.composer-dock {
  position: fixed;
  bottom: 0;
  left: var(--rail-width);
  right: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  background: linear-gradient(to top, #ffffff 62%, rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: 30;
}

.composer {
  position: relative;
  max-width: var(--content-max);
  margin: 0 auto;
  pointer-events: auto;
  border: 1px solid var(--hairline-strong);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 8px 28px rgba(14, 38, 33, 0.08), 0 1px 2px rgba(14, 38, 33, 0.05);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.composer:focus-within { border-color: rgba(14, 122, 87, 0.45); box-shadow: 0 8px 28px rgba(14, 38, 33, 0.08), 0 0 0 4px rgba(14, 122, 87, 0.08); }

.composer__row { padding: var(--sp-3) var(--sp-4) 0; }

.composer__input {
  display: block;
  width: 100%;
  min-height: 28px;
  max-height: 220px;
  padding: 4px 0;
  border: none;
  background: transparent;
  font-size: var(--text-md);
  line-height: 1.55;
  resize: none;
  overflow-y: auto;
}
.composer__input:focus { outline: none; }
.composer__input::placeholder { color: var(--text-tertiary); }

.composer__bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); }

.composer__attach {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.composer__attach:hover { background: var(--paper-soft); color: var(--text-primary); }

.composer__hint { flex: 1; min-width: 0; text-align: right; font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.composer__hint kbd { padding: 1px 5px; border: 1px solid var(--hairline-strong); border-radius: 4px; background: var(--paper-soft); font-size: 0.9em; }

.composer__send {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--r-pill);
  background: var(--jade);
  color: #fff;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.composer__send:hover:not(:disabled) { background: var(--jade-dim); }
.composer__send:disabled { opacity: 0.3; cursor: not-allowed; }

.composer-note { max-width: var(--content-max); margin: var(--sp-2) auto 0; font-size: var(--text-xs); color: var(--text-tertiary); text-align: center; pointer-events: auto; }
/* Màn hình hẹp đổi sang bản ngắn một dòng (xem khối max-width: 560px). */
.composer-note__short { display: none; }

/* --- Chọn nhiệm vụ ------------------------------------------------------- */

.task-picker { position: relative; min-width: 0; }

.task-picker__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.task-picker__btn:hover { background: var(--paper-soft); color: var(--text-primary); }
.task-picker__btn.is-set { border-color: transparent; background: var(--jade-wash); color: var(--jade-deep); }
.task-picker__icon { line-height: 1; }
.task-picker__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-picker__btn svg { flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); }
.task-picker__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.task-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: min(360px, calc(100vw - 2 * var(--sp-4)));
  max-height: min(60vh, 460px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-modal);
}

.task-menu__head { margin: 0; padding: var(--sp-1) var(--sp-2) var(--sp-2); font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); }

.agent-list { display: flex; flex-direction: column; gap: 1px; list-style: none; margin: 0; padding: 0; }

.agent-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2);
  border: none;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}
.agent-item:hover, .agent-item:focus-visible { background: var(--paper-soft); }
.agent-item[aria-pressed="true"] { background: var(--jade-wash); }

.agent-item__icon { width: 28px; height: 28px; display: grid; place-items: center; flex-shrink: 0; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); font-size: var(--text-sm); line-height: 1; }
.agent-item__text { display: flex; flex-direction: column; min-width: 0; }
.agent-item__label { font-size: var(--text-sm); font-weight: 600; }
.agent-item[aria-pressed="true"] .agent-item__label { color: var(--jade-deep); }
.agent-item__desc { font-size: var(--text-xs); line-height: 1.45; color: var(--text-tertiary); }

/* --- Ảnh đính kèm câu hỏi: khay xem trước trong ô soạn ------------------ */

.attach-tray {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  list-style: none;
  margin: 0;
  padding: var(--sp-3) var(--sp-4) 0;
}

.attach-item {
  position: relative;
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--paper-sunken);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

/* Kích thước khung cố định + object-fit: ảnh dọc, ngang hay rất lớn đều không làm vỡ khung. */
.attach-item__thumb { width: 100%; height: 100%; object-fit: cover; }
.attach-item.is-unpreviewable .attach-item__thumb { visibility: hidden; }

.attach-item__state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.66);
  color: var(--jade-dim);
  font-weight: 700;
}

.attach-item[data-state="ready"] .attach-item__state { display: none; }
.attach-item[data-state="error"] { box-shadow: inset 0 0 0 2px var(--lacquer); }
.attach-item[data-state="error"] .attach-item__state { background: rgba(253, 236, 239, 0.9); color: var(--lacquer); }

.attach-item__remove {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(14, 38, 33, 0.74);
  color: #ffffff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.attach-item__remove:hover { background: var(--lacquer); transform: scale(1.08); }

@media (pointer: coarse) {
  .attach-item__remove { width: 28px; height: 28px; top: 2px; right: 2px; }
}

/* Ảnh trong bong bóng câu hỏi đã gửi */
.bubble-media { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); max-width: min(46ch, 100%); }

.bubble-media__item {
  width: 136px;
  height: 136px;
  padding: 0;
  overflow: hidden;
  border: none;
  border-radius: var(--r-lg);
  background: var(--paper-sunken);
  box-shadow: var(--shadow-raised);
  cursor: zoom-in;
}
.bubble-media__item img { width: 100%; height: 100%; object-fit: cover; }

/* Xem ảnh cỡ lớn */
.lightbox { display: grid; place-items: center; max-width: min(94vw, 1100px); }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--r-lg); background: #ffffff; box-shadow: var(--shadow-modal); }
.lightbox__close { position: fixed; top: var(--sp-4); right: var(--sp-4); background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-float); }

/* --- Hộp thoại Tổ chức ---------------------------------------------------- */

.team { max-width: 820px; }

.team__tabs { display: flex; gap: var(--sp-1); padding: 0 var(--sp-5); border-bottom: 1px solid var(--hairline); overflow-x: auto; }

.team__tab {
  position: relative;
  padding: var(--sp-3) var(--sp-3);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.team__tab:hover { color: var(--text-primary); }
.team__tab[aria-selected="true"] { color: var(--text-primary); font-weight: 600; }
.team__tab[aria-selected="true"]::after { content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--jade); }

.team__panel { display: flex; flex-direction: column; gap: var(--sp-5); }
.team__seats { max-width: 320px; }

.team__form { padding: var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper-soft); }
.team__form-title { margin: 0; font-size: var(--text-md); font-weight: 600; }
.team__form .field__hint { margin: var(--sp-1) 0 var(--sp-4); }
.team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-3); }
.team__form-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }

.team__inline-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: end; gap: var(--sp-3); }
.team__inline-form .field { margin-bottom: 0; }
.team__inline-form .btn { height: 42px; }

.team__gate { padding: var(--sp-4); border: 1px solid rgba(14, 122, 87, 0.2); border-radius: var(--r-md); background: var(--jade-wash); font-size: var(--text-sm); }
.team__gate p { margin: 0 0 var(--sp-3); }
.team__gate p:last-child { margin-bottom: 0; }

.key-reveal { padding: var(--sp-4); border: 1px solid rgba(154, 91, 0, 0.25); border-radius: var(--r-md); background: var(--amber-wash); font-size: var(--text-sm); }
.key-reveal p { margin: 0 0 var(--sp-3); color: var(--amber); }
.key-reveal__row { display: flex; align-items: center; gap: var(--sp-3); }
.key-reveal__value { flex: 1; min-width: 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--paper); overflow-wrap: anywhere; font-size: var(--text-sm); }

.team__table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.team__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.team__table th { padding: var(--sp-2) var(--sp-3); text-align: left; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); background: var(--paper-soft); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.team__table td { padding: var(--sp-3); border-bottom: 1px solid var(--hairline); vertical-align: top; }
.team__table tr:last-child td { border-bottom: none; }
.team__table tr.is-revoked td { color: var(--text-tertiary); }
.team__table tr.is-failed td { background: var(--lacquer-wash); }
.team__who { display: flex; align-items: center; gap: var(--sp-3); font-weight: 500; }
.team__who-text { display: flex; flex-direction: column; min-width: 0; }
.team__sub { font-size: var(--text-xs); color: var(--text-tertiary); overflow-wrap: anywhere; }
.team__num { font-variant-numeric: tabular-nums; color: var(--text-secondary); white-space: nowrap; }
.team__act { text-align: right; width: 1%; white-space: nowrap; }
.team__loading { color: var(--text-tertiary); text-align: center; }

/* ==========================================================================
   9. Bản tin đầu ngày (trên màn hình chào)
   ========================================================================== */

.briefing { margin: var(--sp-6) 0 0; padding: var(--sp-4) var(--sp-5) var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--celadon-wash), var(--paper) 55%); }
.briefing__head { display: flex; align-items: baseline; gap: var(--sp-3); }
.briefing__title { margin: 0; font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; }
.briefing__date { font-size: var(--text-xs); color: var(--text-tertiary); }
.briefing__close { margin-left: auto; align-self: center; }
.briefing__list { display: grid; gap: 2px; margin: var(--sp-3) 0 0; padding: 0; list-style: none; }
.briefing__loading { padding: var(--sp-2) 0; font-size: var(--text-sm); color: var(--text-tertiary); }
.briefing__note { margin: var(--sp-3) 0 0; font-size: var(--text-xs); color: var(--text-tertiary); }

.brief { display: flex; align-items: center; gap: var(--sp-3); padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.brief:last-child { border-bottom: none; }
.brief__dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--text-tertiary); }
.brief[data-tone="urgent"] .brief__dot { background: var(--lacquer); }
.brief[data-tone="warn"] .brief__dot { background: var(--amber); }
.brief[data-tone="good"] .brief__dot { background: var(--jade); }
.brief__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.brief__title { font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.brief__detail { font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); }
.brief .btn { flex-shrink: 0; }

@media (max-width: 560px) {
  .briefing { padding: var(--sp-4); }
  .brief { flex-wrap: wrap; }
  .brief .btn { margin-left: calc(9px + var(--sp-3)); }
}

/* ==========================================================================
   9a. So bảng với lần tải trước
   --------------------------------------------------------------------------
   Ba con số tổng ở trên, bảng thay đổi ở giữa (thay đổi lớn nhất lên đầu),
   danh sách mã hàng mới và mất ở dưới.
   ========================================================================== */

.diff-tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.diff-tally__item { display: grid; gap: 2px; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--paper); }
.diff-tally__item strong { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.diff-tally__item span { font-size: var(--text-xs); color: var(--text-secondary); }
.diff-tally__item[data-tone="up"] { background: var(--jade-wash); border-color: transparent; }
.diff-tally__item[data-tone="up"] strong { color: var(--jade-deep); }
.diff-tally__item[data-tone="warn"] { background: var(--amber-wash); border-color: transparent; }
.diff-tally__item[data-tone="warn"] strong { color: var(--amber); }
.diff-tally__item[data-tone="down"] { background: var(--lacquer-wash); border-color: transparent; }
.diff-tally__item[data-tone="down"] strong { color: var(--lacquer); }

.diff-group + .diff-group { margin-top: var(--sp-5); }
.diff-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-md); }
.diff-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.diff-table th, .diff-table td { padding: 9px var(--sp-3); text-align: left; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.diff-table thead th { font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); background: var(--paper-soft); }
.diff-table tbody tr:last-child td { border-bottom: none; }
.diff-num { text-align: right; font-variant-numeric: tabular-nums; }
.diff-key { font-weight: 600; color: var(--ink); }
.diff-delta { font-weight: 700; }
.diff-delta[data-dir="up"] { color: var(--jade-deep); }
.diff-delta[data-dir="down"] { color: var(--lacquer); }

.diff-keys { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.diff-keys li { padding: 4px 10px; border-radius: var(--r-pill); background: var(--paper-sunken); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }

/* Lối vào từ danh sách tài liệu ở thanh bên */
.doc-item__diff { margin-top: 4px; padding: 0; border: none; background: none; color: var(--jade-deep); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.doc-item__diff:hover { color: var(--jade); }

/* ==========================================================================
   9b. Sức khoẻ tri thức
   --------------------------------------------------------------------------
   Một vòng điểm ở trên, ngay cạnh là lý do trừ điểm — điểm số không bao giờ
   đứng một mình. Dưới đó là hai danh sách việc làm được ngay.
   ========================================================================== */

.health__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-5); align-items: center; padding-bottom: var(--sp-5); border-bottom: 1px solid var(--hairline); }
.health__score { position: relative; display: grid; place-items: center; }
.health__dial { transform: rotate(-90deg); }
.health__dial-track { fill: none; stroke: var(--paper-sunken); stroke-width: 10; }
.health__dial-fill {
  fill: none;
  stroke: var(--jade);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 700ms var(--ease-out);
}
.health__dial-fill[data-level="medium"] { stroke: var(--amber); }
.health__dial-fill[data-level="low"] { stroke: var(--lacquer); }
.health__score-text { position: absolute; display: grid; justify-items: center; line-height: 1.1; }
.health__score-text strong { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.03em; }
.health__score-text span { font-size: var(--text-xs); color: var(--text-tertiary); }

.health__why { min-width: 0; }
.health__heading { margin: 0 0 var(--sp-2); font-size: var(--text-md); font-weight: 700; letter-spacing: -0.01em; }
.health__lede { margin: 0 0 var(--sp-3); font-size: var(--text-sm); line-height: 1.55; color: var(--text-secondary); }
.health__deductions { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--text-secondary); }
.health__deductions li { display: flex; gap: var(--sp-3); align-items: baseline; line-height: 1.5; }
.health__minus { flex-shrink: 0; min-width: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--lacquer); }
.health__ok { color: var(--jade-deep); font-weight: 600; }
.health__scope { margin: var(--sp-3) 0 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-tertiary); }

.health__section { padding-top: var(--sp-5); }
.health__section + .health__section { border-top: 1px solid var(--hairline); }

.gap-list, .stale-list { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.gap { padding: var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--paper); }
.gap__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-3); }
.gap__topic { font-weight: 700; color: var(--ink); }
.gap__topic::first-letter { text-transform: uppercase; }
.gap__times { font-size: var(--text-xs); color: var(--text-tertiary); }
.gap__questions { display: grid; gap: 4px; margin: var(--sp-2) 0 var(--sp-3); padding: 0 0 0 var(--sp-4); font-size: var(--text-sm); color: var(--text-secondary); }
.gap__questions li { list-style: "„ "; line-height: 1.5; }
.gap__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.stale { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4); border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); }
.stale__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.stale__name { overflow: hidden; font-size: var(--text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.stale__meta { font-size: var(--text-xs); color: var(--text-tertiary); }

.health__bar { display: flex; gap: 2px; height: 14px; margin: var(--sp-2) 0 var(--sp-3); border-radius: var(--r-pill); overflow: hidden; background: var(--paper-sunken); }
.health__bar-part { display: block; }
.health__bar-part[data-level="high"] { background: var(--jade); }
.health__bar-part[data-level="medium"] { background: var(--amber); }
.health__bar-part[data-level="low"] { background: var(--lacquer); }
.health__bar-part[data-level="none"] { background: var(--hairline-strong); }
.health__bar-empty { display: grid; place-items: center; width: 100%; font-size: var(--text-xs); color: var(--text-tertiary); }
.health__legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--text-secondary); }
.health__legend li { display: flex; align-items: center; gap: 6px; }
.health__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline-strong); }
.health__dot[data-level="high"] { background: var(--jade); }
.health__dot[data-level="medium"] { background: var(--amber); }
.health__dot[data-level="low"] { background: var(--lacquer); }

@media (max-width: 560px) {
  .health__top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .health__why { text-align: left; }
}

/* ==========================================================================
   10. Lớp thả tài liệu toàn màn hình
   ========================================================================== */

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
}

.drop-panel {
  position: relative;
  width: min(560px, 100%);
  padding: var(--sp-8) var(--sp-6) var(--sp-7);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow-modal);
  text-align: center;
  isolation: isolate;
  pointer-events: none;           /* sự kiện kéo luôn đi thẳng tới window */
}

.drop-visual { position: relative; width: 132px; height: 132px; margin: 0 auto var(--sp-5); display: grid; place-items: center; }
.drop-core { position: relative; z-index: 2; width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: var(--gradient-brand); color: #fff; box-shadow: 0 16px 40px rgba(15, 155, 108, 0.35); }
.drop-title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.025em; margin-bottom: var(--sp-2); }
.drop-hint { font-size: var(--text-sm); color: var(--text-secondary); }
.drop-formats { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }

/* Chip tệp bay từ vị trí thả vào danh sách tri thức */
.fly-chip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: 220px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--shadow-float), 0 0 0 1px rgba(15, 155, 108, 0.2);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ==========================================================================
   11. Hộp thoại
   ========================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgba(10, 20, 40, 0.28);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 2 * var(--sp-4));
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}

.modal--wide { max-width: 960px; }

.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-4); border-bottom: 1px solid var(--hairline); }
.modal__head-tools { display: flex; align-items: center; gap: var(--sp-3); }
.modal__title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; }
.modal__sub { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }
.modal__body { padding: var(--sp-5); overflow-y: auto; flex: 1; }
.modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--hairline); background: var(--paper-soft); }

/* ==========================================================================
   12. Biểu mẫu
   ========================================================================== */

.field { margin-bottom: var(--sp-4); }
.field__label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); margin-bottom: var(--sp-2); }

.field__input, .field__select {
  width: 100%;
  padding: 10px var(--sp-4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.field__input:focus, .field__select:focus { outline: none; border-color: var(--jade); box-shadow: 0 0 0 4px rgba(15, 155, 108, 0.12); }

.field__hint { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--sp-2); }

/* Nhãn ô có thêm một liên kết phụ bên phải ("Quên mật khẩu?") */
.field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.field__label-row .field__label { margin-bottom: 0; }

.field__aside {
  padding: 0;
  border: none;
  background: none;
  color: var(--jade-deep);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}

.field__aside:hover, .field__aside[aria-expanded="true"] { text-decoration-color: currentColor; }

.forgot {
  margin: calc(-1 * var(--sp-1)) 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--paper-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.forgot[hidden] { display: none; }
.forgot__title { margin: 0 0 var(--sp-2); font-weight: 600; color: var(--ink); }
.forgot__list { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding-left: 1.1rem; }
.forgot__list strong { color: var(--ink); font-weight: 600; }
.field__error { font-size: var(--text-xs); color: var(--lacquer); margin-top: var(--sp-2); }

.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238a94a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  padding-right: var(--sp-6);
}

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.segmented { position: relative; display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--paper-sunken); isolation: isolate; }
.segmented__thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--shadow-raised); z-index: -1; }

.segmented__option {
  position: relative;
  padding: 6px 16px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
.segmented__option[aria-pressed="true"] { color: var(--text-primary); }

/* ==========================================================================
   13. Gói cước và thanh toán
   ========================================================================== */

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); padding-top: var(--sp-2); }

.plan {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.plan:hover { box-shadow: var(--shadow-float); }
.plan[aria-pressed="true"] { border-color: var(--jade); box-shadow: 0 0 0 3px rgba(15, 155, 108, 0.14), var(--shadow-float); }
.plan:disabled { cursor: default; opacity: 0.6; }

.plan--featured { border-color: transparent; }
.plan__ribbon { position: absolute; top: -11px; left: var(--sp-5); padding: 2px 11px; border-radius: var(--r-pill); background: var(--gradient-brand); color: #fff; font-size: var(--text-xs); font-weight: 600; z-index: 2; box-shadow: var(--shadow-jade); }

.plan__name { font-size: var(--text-md); font-weight: 700; }
.plan__tagline { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.45; }
.plan__price { display: flex; align-items: baseline; gap: var(--sp-2); padding-top: var(--sp-2); }
.plan__amount { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan__period { font-size: var(--text-sm); color: var(--text-tertiary); }
.plan__save { font-size: var(--text-xs); font-weight: 600; color: var(--jade-dim); min-height: 1.2em; }

.plan__features { list-style: none; margin: 0; padding: var(--sp-3) 0 0; border-top: 1px solid var(--hairline); display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--text-sm); color: var(--text-secondary); }
.plan__features li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); line-height: 1.45; }
.plan__features svg { color: var(--jade); margin-top: 3px; }

.checkout { display: grid; grid-template-columns: 1fr 300px; gap: var(--sp-5); align-items: start; }
.pay-methods { display: flex; flex-direction: column; gap: var(--sp-3); }

.pay-method {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.pay-method:hover:not(:disabled) { border-color: var(--jade); transform: translateX(3px); }
.pay-method[aria-pressed="true"] { border-color: var(--jade); box-shadow: 0 0 0 3px rgba(15, 155, 108, 0.14); }
.pay-method:disabled { opacity: 0.5; cursor: not-allowed; border-color: var(--hairline); }

.pay-method__logo { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--paper-sunken); font-size: var(--text-lg); }
.pay-method__name { display: block; font-size: var(--text-base); font-weight: 600; }
.pay-method__desc { display: block; font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.4; }

.pay-summary { padding: var(--sp-5); border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--paper-soft); position: sticky; top: 0; }
.pay-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--sp-3); }
.pay-summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--hairline-strong); font-size: var(--text-md); font-weight: 600; }
.pay-summary__amount { font-size: var(--text-lg); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.qr-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); padding: var(--sp-5) 0; text-align: center; }
.qr-frame { position: relative; padding: var(--sp-4); border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-float); }
.qr-frame canvas, .qr-frame img { width: 228px; height: 228px; display: block; border-radius: var(--r-sm); }

/* Góc khung ngắm của máy quét */
.qr-corner { position: absolute; width: 26px; height: 26px; border: 3px solid var(--jade); pointer-events: none; }
.qr-corner--tl { top: 6px; left: 6px; border-right: none; border-bottom: none; border-radius: 10px 0 0 0; }
.qr-corner--tr { top: 6px; right: 6px; border-left: none; border-bottom: none; border-radius: 0 10px 0 0; }
.qr-corner--bl { bottom: 6px; left: 6px; border-right: none; border-top: none; border-radius: 0 0 0 10px; }
.qr-corner--br { bottom: 6px; right: 6px; border-left: none; border-top: none; border-radius: 0 0 10px 0; }

/* Ảnh QR khung chuẩn VietQR (SePay vẽ): khung đã có logo và viền riêng — bỏ góc ngắm, ảnh đứng dọc. */
.qr-frame--card { padding: var(--sp-2); }
.qr-frame--card .qr-corner { display: none; }
.qr-frame--card .qr-card { width: 296px; height: auto; border-radius: var(--r-md); }

@media (max-width: 480px) {
  .qr-frame--card .qr-card { width: 264px; }
}

.qr-amount { font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.qr-order { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-tertiary); }

/* Chế độ thử thanh toán: khung sọc vàng — nhìn là biết không phải màn hình thanh toán thật. */
.test-pay {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1.5px dashed var(--amber);
  border-radius: var(--r-md);
  background: repeating-linear-gradient(135deg, var(--amber-wash) 0 12px, #fff8e8 12px 24px);
}
.test-pay__title { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--amber); }
.test-pay__text { margin: 0; font-size: var(--text-xs); line-height: 1.5; color: var(--text-secondary); }
.test-pay__btn { justify-self: start; background: var(--amber); border-color: var(--amber); color: #ffffff; }
.test-pay__btn:hover { background: #8a5a12; }

.qr-status { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); background: var(--paper-sunken); font-size: var(--text-sm); color: var(--text-secondary); }
.qr-status[data-state="paid"] { background: var(--jade-wash); color: var(--jade-dim); font-weight: 600; }
.qr-status[data-state="failed"] { background: var(--lacquer-wash); color: var(--lacquer); }

.qr-steps { list-style: none; margin: 0; padding: 0; text-align: left; font-size: var(--text-sm); color: var(--text-secondary); display: flex; flex-direction: column; gap: var(--sp-2); max-width: 36ch; }
.qr-steps li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); }
.qr-steps__num { width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--jade-wash); color: var(--jade-dim); font-size: 11px; font-weight: 700; margin-top: 1px; }

.success-mark { width: 88px; height: 88px; }

/* --- Chuyển khoản VietQR: mã QR bên trái, thông tin chuyển tay bên phải --------- */

.qr-layout { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-6); width: 100%; text-align: left; }
.qr-left { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.qr-status { max-width: 280px; text-align: left; }
.qr-status[data-state="waiting-long"] { border-radius: var(--r-md); background: var(--amber-wash); color: var(--amber); }
.qr-hint { max-width: 56ch; text-align: center; }

.transfer { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }

.transfer-list { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.transfer-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: baseline; gap: var(--sp-3); padding: 10px var(--sp-4); }
.transfer-row + .transfer-row { border-top: 1px solid var(--hairline); }
.transfer-row dt { font-size: var(--text-sm); color: var(--text-secondary); }
.transfer-row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.transfer-mono { font-family: var(--font-mono); font-size: 1.02rem; letter-spacing: 0.04em; }
.transfer-amount { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--jade-deep); }

/* Nội dung chuyển khoản — chi tiết khách hay bỏ sót nhất, nên to và nổi nhất màn hình. */
.transfer-code {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border: 2px dashed rgba(183, 121, 31, 0.55);
  border-radius: var(--r-lg);
  background: #fffaf0;
}
.transfer-code__label { font-size: var(--text-sm); font-weight: 600; color: var(--amber); }
.transfer-code__value { font-family: var(--font-mono); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); font-weight: 700; letter-spacing: 0.08em; color: var(--ink); overflow-wrap: anywhere; }

.transfer-warning {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--lacquer-wash);
  box-shadow: inset 4px 0 0 var(--lacquer);
  color: #8f0c22;
  font-size: var(--text-sm);
  line-height: 1.55;
}
.transfer-warning p { margin: 0; font-weight: 500; }
.transfer-warning strong { font-weight: 800; letter-spacing: 0.01em; }
.transfer-warning__icon { margin-top: 1px; color: var(--lacquer); }

.transfer-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.transfer-actions .btn { flex: 1 1 12rem; }
.btn.is-copied { background: var(--jade-deep); color: #ffffff; border-color: transparent; }

/* ==========================================================================
   13b. Chatbot hỗ trợ khách hàng (nút nổi góc màn hình, có ở cả ba phần)
   ========================================================================== */

.support { position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-3); pointer-events: none; }
.support > * { pointer-events: auto; }

.support-launcher {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 52px;
  padding: 0 20px 0 16px;
  border: none;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--jade), var(--jade-deep));
  color: #ffffff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(11, 125, 86, 0.35), 0 2px 6px rgba(14, 38, 33, 0.12);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.support-launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(11, 125, 86, 0.42), 0 2px 6px rgba(14, 38, 33, 0.12); }
.support-launcher[aria-expanded="true"] .support-launcher__label { display: none; }
.support-launcher[aria-expanded="true"] { width: 52px; padding: 0; justify-content: center; }

.support-nudge {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 260px;
  border-radius: 16px 16px 4px 16px;
  background: #ffffff;
  box-shadow: var(--shadow-float), 0 0 0 1px rgba(15, 155, 108, 0.18);
}
.support-nudge__text { padding: 12px 34px 12px 16px; border: none; background: none; color: var(--ink); font-size: var(--text-sm); font-weight: 500; text-align: left; cursor: pointer; }
.support-nudge__close { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border: none; border-radius: 50%; background: var(--paper-sunken); color: var(--text-secondary); cursor: pointer; }

.support-panel {
  position: fixed;
  right: var(--sp-5);
  bottom: calc(var(--sp-5) + 64px);
  width: min(390px, calc(100vw - 2 * var(--sp-4)));
  height: min(620px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: var(--shadow-modal);
  transform-origin: 100% 100%;
}

.support-panel__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, var(--celadon-wash), #ffffff); }
.support-panel__who { flex: 1; min-width: 0; }
.support-panel__title { font-size: var(--text-md); font-weight: 700; }
.support-panel__sub { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-xs); color: var(--text-secondary); }
.support-online { width: 8px; height: 8px; border-radius: 50%; background: var(--jade-bright); box-shadow: 0 0 0 3px rgba(52, 211, 156, 0.2); }

.support-hotline { display: flex; align-items: center; gap: var(--sp-2); padding: 8px var(--sp-4); background: var(--lacquer-wash); color: #8f0c22; font-size: var(--text-sm); }
.support-hotline:hover { color: var(--lacquer); }

.support-log { flex: 1; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); overflow-y: auto; overscroll-behavior: contain; }

.support-msg { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 88%; }
.support-msg--user { align-self: flex-end; align-items: flex-end; }
.support-msg__bubble { padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--paper-soft); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; }
.support-msg--user .support-msg__bubble { border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, var(--jade), var(--jade-dim)); color: #ffffff; }
.support-msg__bubble p { margin: 0 0 var(--sp-2); }
.support-msg__bubble p:last-child { margin: 0; }
.support-msg__bubble ul, .support-msg__bubble ol { margin: var(--sp-1) 0 var(--sp-2); padding-left: 1.1rem; }
.support-msg__bubble li { margin-bottom: 4px; }
.support-msg__bubble code { padding: 1px 5px; border-radius: 4px; background: var(--paper-sunken); font-size: 0.92em; }

.support-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.support-action { padding: 7px 12px; border: 1px solid rgba(15, 155, 108, 0.35); border-radius: var(--r-pill); background: #ffffff; color: var(--jade-deep); font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.support-action:hover:not(:disabled) { background: var(--jade-wash); border-color: var(--jade); }
.support-action:disabled { opacity: 0.5; cursor: default; }
.support-action--upgrade { border-color: transparent; background: linear-gradient(135deg, var(--jade), var(--jade-dim)); color: #ffffff; }
.support-action--upgrade:hover:not(:disabled) { background: var(--jade-deep); color: #ffffff; }
.support-action--call { border-color: rgba(200, 16, 46, 0.35); color: var(--lacquer); }
.support-action--call:hover:not(:disabled) { background: var(--lacquer-wash); border-color: var(--lacquer); }

.support-typing .support-msg__bubble { display: inline-flex; gap: 4px; padding: 12px 14px; }
.support-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); }

.support-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--sp-4) var(--sp-2); }
.support-chips:empty { display: none; }
.support-chip { padding: 6px 11px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); background: #ffffff; color: var(--text-secondary); font-size: var(--text-xs); cursor: pointer; }
.support-chip:hover { border-color: var(--jade); color: var(--jade-deep); }

.support-form { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--hairline); }
.support-form__input { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); background: var(--paper-soft); font-size: var(--text-sm); }
.support-form__input:focus { outline: none; border-color: var(--jade); background: #ffffff; box-shadow: 0 0 0 3px rgba(15, 155, 108, 0.12); }
.support-form__send { width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border: none; border-radius: 50%; background: var(--jade); color: #ffffff; cursor: pointer; }
.support-form__send:disabled { opacity: 0.5; cursor: default; }

.support-ticket { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid rgba(15, 155, 108, 0.25); border-radius: var(--r-lg); background: var(--celadon-wash); }
.support-ticket__title { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--jade-deep); }
.support-ticket__field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }
.support-ticket__field input, .support-ticket__field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--hairline-strong); border-radius: var(--r-sm); background: #ffffff; font-size: var(--text-sm); resize: vertical; }
.support-ticket__field input:focus, .support-ticket__field textarea:focus { outline: none; border-color: var(--jade); }
.support-ticket__required { color: var(--lacquer); }
.support-ticket__urgent { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--text-xs); color: var(--lacquer); }
.support-ticket .field__error { margin: 0; }

/* Ảnh gửi bằng đường dẫn web: không có ảnh thu nhỏ, hiện tên miền */
.attach-item__link { display: grid; place-items: center; align-content: center; gap: 2px; width: 100%; height: 100%; padding: 4px; font-size: 1.2rem; text-align: center; }
.attach-item__link small { max-width: 100%; overflow: hidden; font-size: 9px; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.bubble-media__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--paper-sunken); font-size: var(--text-sm); color: var(--text-secondary); }

/* ==========================================================================
   14. Xác thực
   --------------------------------------------------------------------------
   Hai cột: biểu mẫu bên trái (căn trái, như trang đăng nhập của các trợ lý AI
   lớn), tấm mực minh hoạ bên phải trên máy tính. Màn hẹp chỉ còn biểu mẫu.
   ========================================================================== */

.auth-screen {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  background: var(--paper);
  overflow-x: clip;
}

.auth-main {
  position: relative;
  display: grid;
  place-items: center;
  padding: calc(var(--sp-8) + var(--sp-2)) var(--sp-5) var(--sp-7);
}

.auth-form { width: 100%; max-width: 420px; }

.auth-card__head { margin-bottom: var(--sp-5); }
.auth-card__head .brand-mark { width: 44px; height: 44px; border-radius: 12px; font-size: var(--text-sm); margin-bottom: var(--sp-5); }

.auth-card__title {
  margin-bottom: var(--sp-3);
  font-size: clamp(2rem, 1.55rem + 1.4vw, 2.65rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.auth-card__sub { max-width: 38ch; font-size: var(--text-md); line-height: 1.55; color: var(--text-secondary); }

/* Ô nhập trong trang đăng nhập: nền rất nhạt, bấm vào thì nền và viền ngả ngọc
   (phỏng theo ô kính của mẫu 21st.dev, đổi sang màu thương hiệu). */
.auth-form .field__input,
.auth-form .field__select {
  padding: 13px 16px;
  border-radius: 14px;
  background-color: rgba(16, 32, 25, 0.028);
  transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.auth-form .field__input:hover,
.auth-form .field__select:hover { border-color: rgba(16, 32, 25, 0.28); }

.auth-form .field__input:focus,
.auth-form .field__select:focus {
  border-color: rgba(14, 122, 87, 0.55);
  background-color: rgba(14, 122, 87, 0.045);
  box-shadow: 0 0 0 4px rgba(14, 122, 87, 0.08);
}

.auth-form .btn--lg { padding-block: 14px; border-radius: 14px; }

/* Ô mật khẩu có nút con mắt hiện/ẩn */
.field__control { position: relative; }
.field__control .field__input { padding-right: 52px; }

.field__peek {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.field__peek:hover { color: var(--text-primary); background: var(--paper-sunken); }
.field__peek-hide,
.field__peek[aria-pressed="true"] .field__peek-show { display: none; }
.field__peek[aria-pressed="true"] .field__peek-hide { display: block; }

.auth-switch { margin-top: var(--sp-5); font-size: var(--text-sm); color: var(--text-secondary); }
/* Dòng đồng ý điều khoản dưới nút Tạo tài khoản: nhỏ, đọc được, liên kết gạch chân. */
.auth-consent { margin: var(--sp-3) 0 0; font-size: var(--text-xs); line-height: 1.6; color: var(--text-tertiary); }
.auth-consent a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.auth-consent + .auth-switch { margin-top: var(--sp-4); }

/* Nút quay về trang giới thiệu */
.auth-back {
  position: absolute;
  top: var(--sp-5);
  left: clamp(var(--sp-4), 4vw, var(--sp-7));
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 14px 6px 10px;
  border-radius: var(--r-pill);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.auth-back:hover { color: var(--ink); background: var(--paper-sunken); }

/* Hai tab Đăng nhập / Đăng ký — dùng lại công tắc trượt `.segmented` */
.auth-tabs { display: flex; width: 100%; margin-bottom: var(--sp-5); }
.auth-tabs .segmented__option { flex: 1; padding: 9px 12px; font-size: var(--text-base); }
.segmented__option[aria-selected="true"] { color: var(--text-primary); }

.trust-row { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); font-size: var(--text-xs); color: var(--text-tertiary); }
.trust-row span { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* Nút bật/tắt hiệu ứng chuyển động */
.motion-pill {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: 5px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.motion-pill:hover { color: var(--jade-dim); border-color: rgba(15, 155, 108, 0.35); background: var(--jade-wash); }
.motion-toggle[aria-pressed="true"] { color: var(--jade-dim); }

.toast__action { margin-top: var(--sp-2); }

/* --- Cột phải: tấm mực minh hoạ ------------------------------------------ */

.auth-visual { display: none; }

@media (min-width: 1020px) {
  .auth-screen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .auth-visual { display: block; padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; }
}

.auth-visual__panel {
  position: sticky;
  top: var(--sp-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-5);
  min-height: calc(100vh - 2 * var(--sp-4));
  /* Màn hình rất rộng: nội dung gom thành một cột 640px ở giữa tấm mực, không dàn mỏng ra. */
  padding: clamp(var(--sp-5), 3.2vw, var(--sp-7)) max(clamp(var(--sp-6), 4.5vw, var(--sp-8)), calc((100% - 640px) / 2));
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(47, 184, 132, 0.22), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(14, 122, 87, 0.16), transparent 60%),
    var(--ink);
  color: #ffffff;
  isolation: isolate;
}

.auth-visual__quote {
  max-width: 22ch;
  min-height: 3.66em;   /* ba dòng: câu đổi theo cảnh mà phim bên dưới không nhảy lên xuống */
  margin: 0;
  font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.2rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.025em;
  text-wrap: balance;
  transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.auth-visual__quote.is-changing { opacity: 0; transform: translate3d(0, 6px, 0); }

/* --- Phim minh hoạ bốn cảnh (initReel trong index.html) ----------------------------
   Một cửa sổ ứng dụng thu nhỏ; mỗi cảnh là một lớp phủ kín sân khấu, chỉ cảnh `is-active`
   hiện. Trong cảnh, các lớp s1, s2… bật dần theo dòng thời gian — mỗi lớp đưa một phần tử
   từ trạng thái chờ về trạng thái bình thường. `is-resetting` về khung đầu không chuyển động. */

.reel { display: grid; gap: var(--sp-4); margin: 0; }

.reel__window {
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.reel__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 14px;
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-soft);
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.reel__mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='9.50 9.50 221.00 101.00'%3E%3Cdefs%3E%3Cmask id='x17' maskUnits='userSpaceOnUse' x='0' y='0' width='240' height='120'%3E%3Crect width='240' height='120' fill='%23fff'/%3E%3Cline x1='84.07' y1='89.41' x2='155.93' y2='30.59' stroke='%23000' stroke-width='31'/%3E%3C/mask%3E%3C/defs%3E%3Cg%3E%3Cpath d='M60.80 22.01A38 38 0 1 0 60.80 97.99' fill='none' stroke='%237D8C92' stroke-width='25'/%3E%3Cpath d='M155.32 88.90A38 38 0 1 0 179.20 22.01' fill='none' stroke='%23F9C21A' stroke-width='25'/%3E%3C/g%3E%3Cpath d='M83.52 89.85L146.41 38.38' fill='none' stroke='%2334A45E' stroke-width='25'/%3E%3Cg mask='url(%23x17)'%3E%3Cpath d='M60.00 22.00A38 38 0 0 1 84.07 30.59L120.00 60.00' fill='none' stroke='%23498BED' stroke-width='25'/%3E%3Cpath d='M120.00 60.00L155.93 89.41' fill='none' stroke='%23E84B39' stroke-width='25'/%3E%3C/g%3E%3Cpath d='M180.00 22.00A38 38 0 0 0 155.93 30.59L145.87 38.83' fill='none' stroke='%23E84B39' stroke-width='25'/%3E%3Cpath d='M60.00 98.00A38 38 0 0 0 84.07 89.41' fill='none' stroke='%23498BED' stroke-width='25'/%3E%3C/svg%3E") center / 82% auto no-repeat; box-shadow: inset 0 0 0 1px var(--hairline); color: transparent; font-size: 0.47rem; font-weight: 700; }
.reel__crumb { font-weight: 600; }
.reel__crumb--muted { font-weight: 500; color: var(--text-tertiary); }
.reel__crumb--muted::before { content: "/"; margin-right: var(--sp-2); color: var(--hairline-strong); }

.reel__stage { position: relative; height: 316px; font-size: 0.82rem; line-height: 1.55; }

.reel-scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
.reel-scene.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.reel-scene.is-resetting,
.reel-scene.is-resetting * { transition: none !important; animation: none !important; }

.reel .cite-ref { cursor: default; }
.reel-tick { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 4px; border-radius: 50%; background: var(--jade); color: #ffffff; font-size: 0.6rem; vertical-align: -3px; }
.reel-file__icon { padding: 3px 6px; border-radius: 5px; background: #1d6f42; color: #ffffff; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.03em; }

/* Cảnh 1: thả file vào, thanh tải chạy, rồi ô "Cần chú ý" hiện ra */
.reel-scene--upload { justify-content: center; }
.reel-drop {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1.5px dashed var(--hairline-strong);
  border-radius: 14px;
  background: var(--paper-soft);
  transition: border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}
.reel-scene--upload.s1 .reel-drop { border-color: rgba(14, 122, 87, 0.45); background-color: var(--celadon-wash); }
.reel-drop__hint { display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--text-secondary); }

.reel-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon name size" "bar bar bar";
  align-items: center;
  gap: 8px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--shadow-raised);
  opacity: 0;
  transform: translate3d(46px, -30px, 0) rotate(5deg) scale(0.95);
  transition: opacity 0.4s var(--ease-out), transform 0.75s var(--ease-spring);
}
.reel-scene--upload.s1 .reel-file { opacity: 1; transform: none; }
.reel-file .reel-file__icon { grid-area: icon; }
.reel-file__name { grid-area: name; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.reel-file__size { grid-area: size; font-size: 0.72rem; color: var(--text-tertiary); }
.reel-file__bar { grid-area: bar; height: 4px; overflow: hidden; border-radius: var(--r-pill); background: var(--paper-sunken); }
.reel-file__bar > span { display: block; height: 100%; background: var(--jade); transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease-in-out); }
.reel-scene--upload.s2 .reel-file__bar > span { transform: scaleX(1); }

.reel-drop__done { margin: 0; font-weight: 600; color: var(--jade-deep); opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-out); }
.reel-scene--upload.s3 .reel-drop__done { opacity: 1; transform: none; }

.reel-radar__title { margin: 4px 0 0; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); opacity: 0; transition: opacity 0.4s var(--ease-out); }
.reel-scene--upload.s4 .reel-radar__title { opacity: 1; }
.reel-radar { display: flex; flex-wrap: wrap; gap: 8px; }
.reel-radar__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #ffffff;
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.96);
  transition: opacity 0.4s var(--ease-out), transform 0.55s var(--ease-spring);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.reel-radar__chip b { font-size: 0.95rem; color: var(--amber); font-variant-numeric: tabular-nums; }
.reel-scene--upload.s4 .reel-radar__chip { opacity: 1; transform: none; }

/* Cảnh 2: gõ câu hỏi, gửi đi, trợ lý bắt đầu đối chiếu */
.reel-scene--ask { justify-content: flex-end; }
.reel-ask__welcome { display: grid; justify-items: center; gap: 12px; margin: auto 0 var(--sp-4); transition: opacity 0.35s var(--ease-out), transform 0.45s var(--ease-out); }
.reel-scene--ask.s1 .reel-ask__welcome { opacity: 0; transform: translate3d(0, -10px, 0); }
.reel-ask__hello { margin: 0; text-align: center; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.reel-ask__tips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.reel-ask__tips span { padding: 5px 11px; border: 1px solid var(--hairline); border-radius: var(--r-pill); background: #ffffff; font-size: 0.72rem; color: var(--text-secondary); }

.reel-bubble { align-self: flex-end; max-width: 80%; margin: 0; padding: 7px 13px; border-radius: 14px 14px 4px 14px; background: var(--paper-sunken); font-weight: 500; }
.reel-bubble--sent { position: absolute; top: 18px; right: 20px; opacity: 0; transform: translate3d(0, 170px, 0) scale(0.92); transition: opacity 0.3s var(--ease-out), transform 0.6s var(--ease-out); }
.reel-scene--ask.s1 .reel-bubble--sent { opacity: 1; transform: none; }

.reel-think { position: absolute; top: 66px; left: 20px; display: flex; align-items: center; gap: var(--sp-2); margin: 0; color: var(--text-secondary); opacity: 0; transition: opacity 0.4s var(--ease-out); }
.reel-scene--ask.s2 .reel-think { opacity: 1; }
.reel-think__orb { width: 14px; height: 14px; border-radius: 50%; background: conic-gradient(var(--jade), var(--teal), var(--indigo), var(--jade)); }

.reel-composer {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--shadow-raised);
}
.reel-composer__text { overflow: hidden; white-space: nowrap; }
.reel-composer__caret { flex-shrink: 0; width: 1.5px; height: 17px; margin-left: 1px; background: var(--jade); }
.reel-composer__send { display: grid; place-items: center; width: 28px; height: 28px; margin-left: auto; border-radius: 50%; background: var(--paper-sunken); color: var(--text-tertiary); transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out); }
.reel-scene--ask.has-text .reel-composer__send { background: var(--jade); color: #ffffff; }

/* Cảnh 3: từng con số được soi về đúng ô trong file */
.reel-answer { margin: 0; font-size: 0.85rem; line-height: 1.65; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out); }
.reel-scene.s1 .reel-answer { opacity: 1; transform: none; }

.reel-num { padding: 0 2px; border-radius: 3px; box-shadow: inset 0 -1.5px 0 transparent; transition: background-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), color 0.35s var(--ease-out); }
.reel-scene--verify.s2 .reel-num[data-n="1"],
.reel-scene--verify.s3 .reel-num[data-n="2"],
.reel-scene--verify.s4 .reel-num[data-n="3"] { background: var(--jade-wash); box-shadow: inset 0 -1.5px 0 var(--jade); color: var(--jade-deep); }

.reel-calc { display: inline-block; margin-left: 2px; padding: 0 6px; border-radius: 6px; background: var(--indigo-wash); color: var(--indigo); font-size: 0.7rem; font-weight: 600; opacity: 0; transform: translate3d(-4px, 0, 0); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); }
.reel-scene--verify.s4 .reel-calc { opacity: 1; transform: none; }

.reel-sheet { overflow: hidden; border: 1px solid var(--hairline); border-radius: 10px; font-size: 0.72rem; opacity: 0; transition: opacity 0.45s var(--ease-out) 0.1s; }
.reel-scene--verify.s1 .reel-sheet { opacity: 1; }
.reel-sheet__name { display: flex; align-items: center; gap: 6px; margin: 0; padding: 6px 10px; border-bottom: 1px solid var(--hairline); background: var(--paper-soft); font-weight: 600; }
.reel-sheet__name .reel-file__icon { padding: 2px 4px; font-size: 0.5rem; }
.reel-sheet__row { display: grid; grid-template-columns: 4.8rem minmax(0, 1fr) 2.4rem 3.6rem; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--hairline); transition: background-color 0.35s var(--ease-out); }
.reel-sheet__row:last-child { border-bottom: none; }
.reel-sheet__row > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel-sheet__row > span:nth-child(n + 3) { text-align: right; font-variant-numeric: tabular-nums; }
.reel-sheet__row--head { font-weight: 600; color: var(--text-tertiary); }
.reel-scene--verify.s2 .reel-sheet__row--hit { background: var(--celadon-wash); }
.reel-cell { padding: 0 4px; border-radius: 4px; transition: box-shadow 0.35s var(--ease-out), background-color 0.35s var(--ease-out); }
.reel-scene--verify.s2 .reel-cell[data-n="1"],
.reel-scene--verify.s3 .reel-cell[data-n="2"] { background: #ffffff; box-shadow: 0 0 0 1.5px var(--jade); }

.reel-verified { margin: 0; font-size: 0.75rem; font-weight: 600; color: var(--jade-deep); opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.4s var(--ease-out), transform 0.45s var(--ease-out); }
.reel-scene--verify.s5 .reel-verified { opacity: 1; transform: none; }

/* Cảnh 4: thanh đo độ tin cậy chạy lên, ý cần kiểm chứng được tô và liệt kê */
.reel-flag { border-radius: 3px; transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.reel-scene--trust.s3 .reel-flag { background: var(--paper-sunken); box-shadow: 0 0 0 3px var(--paper-sunken); }

.reel .reel-trust { gap: var(--sp-2); padding: 12px 14px; font-size: 0.78rem; opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out); }
.reel-scene--trust.s1 .reel-trust { opacity: 1; transform: none; }
.reel-trust .trust__score { font-size: 1.1rem; }
.reel-trust .trust__fill { transform: scaleX(0); transition: transform 1.3s var(--ease-out); }
.reel-scene--trust.s2 .reel-trust .trust__fill { transform: scaleX(1); }
.reel-trust__facts { display: flex; flex-wrap: wrap; gap: 2px var(--sp-4); margin: 0; font-size: 0.72rem; color: var(--text-secondary); opacity: 0; transition: opacity 0.4s var(--ease-out) 0.9s; }
.reel-scene--trust.s2 .reel-trust__facts { opacity: 1; }
.reel-trust__review { padding-top: var(--sp-2); border-top: 1px solid var(--hairline); opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 0.45s var(--ease-out), transform 0.5s var(--ease-out); }
.reel-scene--trust.s3 .reel-trust__review { opacity: 1; transform: none; }
.reel-trust__head { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 6px; font-weight: 600; }
.reel-trust .trust-check { padding: 5px 10px 5px 12px; cursor: default; }

/* Điều khiển: nút phát/dừng và bốn chương, mỗi chương một thanh tiến độ */
.reel__controls { display: flex; align-items: center; gap: var(--sp-4); }

.reel__play {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.reel__play:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); }
.reel__play[data-state="playing"] .reel__icon-play,
.reel__play:not([data-state="playing"]) .reel__icon-pause { display: none; }

.reel__chapters { display: grid; flex: 1; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.reel__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reel__chapter {
  display: grid;
  gap: 7px;
  width: 100%;
  padding: 4px 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.55);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.reel__chapter:hover,
.reel__chapter[aria-current] { color: #ffffff; }
.reel__track { display: block; height: 3px; overflow: hidden; border-radius: var(--r-pill); background: rgba(255, 255, 255, 0.18); }
.reel__fill { display: block; height: 100%; background: var(--jade-bright); transform: scaleX(0); transform-origin: left center; }
.reel__play:focus-visible,
.reel__chapter:focus-visible { outline: 2px solid var(--jade-bright); outline-offset: 3px; border-radius: 6px; }

/* --- Cảnh 5: so với lần trước ---------------------------------------------- */
.reel-scene--diff { justify-content: center; }
.reel-diff__file { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.reel-diff__vs { margin-left: auto; font-size: 0.7rem; font-weight: 500; color: var(--text-tertiary); }
.reel-diff__tally { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reel-diff__tile {
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.4s var(--ease-out) calc(var(--i) * 120ms), transform 0.45s var(--ease-out) calc(var(--i) * 120ms);
}
.reel-diff__tile b { font-size: 1.15rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.reel-diff__tile[data-tone="up"] { background: var(--jade-wash); }
.reel-diff__tile[data-tone="up"] b { color: var(--jade-deep); }
.reel-diff__tile[data-tone="warn"] { background: var(--amber-wash); }
.reel-diff__tile[data-tone="warn"] b { color: var(--amber); }
.reel-diff__tile[data-tone="down"] { background: var(--lacquer-wash); }
.reel-diff__tile[data-tone="down"] b { color: var(--lacquer); }
.reel-scene--diff.s1 .reel-diff__tile { opacity: 1; transform: none; }
.reel-diff__table { overflow: hidden; border: 1px solid var(--hairline); border-radius: 10px; font-size: 0.72rem; }
.reel-diff__row { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 3.6rem 3.6rem 3.4rem; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--hairline); }
.reel-diff__row:last-child { border-bottom: none; }
.reel-diff__row > :nth-child(n + 3) { text-align: right; font-variant-numeric: tabular-nums; }
.reel-diff__row--head { background: var(--paper-soft); font-weight: 600; color: var(--text-tertiary); }
.reel-diff__row b[data-dir="up"] { color: var(--jade-deep); }
.reel-diff__row b[data-dir="down"] { color: var(--lacquer); }
.reel-diff__row[data-n] { opacity: 0; transform: translate3d(-8px, 0, 0); transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out), background-color 0.35s var(--ease-out); }
.reel-scene--diff.s2 .reel-diff__row[data-n="1"],
.reel-scene--diff.s3 .reel-diff__row[data-n="2"],
.reel-scene--diff.s4 .reel-diff__row[data-n="3"] { opacity: 1; transform: none; }
.reel-scene--diff.s3 .reel-diff__row[data-n="2"] { background: var(--celadon-wash); }

/* --- Cảnh 6: bản tin hôm nay ------------------------------------------------- */
.reel-scene--brief { justify-content: center; }
.reel-brief__hello { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--jade-deep); }
.reel-brief { padding: 10px 12px; border: 1px solid var(--hairline); border-radius: 12px; background: linear-gradient(180deg, var(--celadon-wash), #ffffff 60%); }
.reel-brief__head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-weight: 700; }
.reel-brief__head span { font-size: 0.68rem; font-weight: 500; color: var(--text-tertiary); }
.reel-brief__item {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 6px 0;
  border-top: 1px solid var(--hairline);
  font-size: 0.72rem;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 0.35s var(--ease-out), transform 0.4s var(--ease-out);
}
.reel-brief__item i { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--text-tertiary); }
.reel-brief__item[data-tone="urgent"] i { background: var(--lacquer); }
.reel-brief__item[data-tone="warn"] i { background: var(--amber); }
.reel-brief__item span { display: grid; flex: 1; min-width: 0; color: var(--text-secondary); }
.reel-brief__item b { color: var(--ink); }
.reel-brief__item em { flex-shrink: 0; padding: 3px 9px; border: 1px solid var(--hairline-strong); border-radius: var(--r-pill); font-size: 0.66rem; font-style: normal; font-weight: 600; color: var(--text-primary); }
.reel-scene--brief.s1 .reel-brief__item[data-n="1"],
.reel-scene--brief.s2 .reel-brief__item[data-n="2"],
.reel-scene--brief.s3 .reel-brief__item[data-n="3"],
.reel-scene--brief.s4 .reel-brief__item[data-n="4"] { opacity: 1; transform: none; }
.reel-brief__note { margin: 0; font-size: 0.68rem; color: var(--text-tertiary); opacity: 0; transition: opacity 0.4s var(--ease-out); }
.reel-scene--brief.s5 .reel-brief__note { opacity: 1; }

/* --- Cảnh 7: trên điện thoại -------------------------------------------------- */
.reel-scene--phone { flex-direction: row; align-items: center; justify-content: center; gap: 22px; }
.reel-phone {
  flex-shrink: 0;
  width: 150px;
  height: 282px;
  padding: 7px;
  border-radius: 28px;
  background: #0f1c17;
  box-shadow: 0 18px 36px -14px rgba(14, 38, 33, 0.55), inset 0 0 0 1.5px rgba(255, 255, 255, 0.08);
}
.reel-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 22px; background: #ffffff; }
.reel-phone__notice {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 7px 9px;
  border-radius: 12px;
  background: rgba(16, 32, 25, 0.92);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 600;
  transform: translate3d(0, -140%, 0);
  transition: transform 0.5s var(--ease-spring);
}
.reel-scene--phone.s4 .reel-phone__notice { transform: none; }
.reel-phone__camera { position: absolute; inset: 0; display: grid; place-items: center; background: #26332e; transition: opacity 0.45s var(--ease-out); }
.reel-scene--phone.s3 .reel-phone__camera { opacity: 0; }
.reel-receipt {
  display: grid;
  gap: 5px;
  width: 92px;
  padding: 10px 9px;
  background: #fbf8f1;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  transform: rotate(-4deg) scale(0.9);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out), transform 0.8s var(--ease-out);
}
.reel-scene--phone.s1 .reel-receipt { opacity: 1; transform: rotate(-2deg) scale(1); }
.reel-receipt b { font-size: 0.44rem; letter-spacing: 0.02em; color: #333; }
.reel-receipt i { display: block; height: 3px; border-radius: 2px; background: #d9d3c6; }
.reel-receipt i:nth-child(even) { width: 78%; }
.reel-receipt strong { justify-self: end; font-size: 0.58rem; color: #333; }
.reel-phone__flash { position: absolute; inset: 0; background: #ffffff; opacity: 0; pointer-events: none; }
.reel-scene--phone.s2 .reel-phone__flash { animation: reel-flash 380ms var(--ease-out); }
@keyframes reel-flash { 30% { opacity: 0.95; } 100% { opacity: 0; } }
.reel-phone__shutter { position: absolute; bottom: 14px; left: 50%; width: 34px; height: 34px; margin-left: -17px; border: 3px solid rgba(255, 255, 255, 0.85); border-radius: 50%; box-shadow: inset 0 0 0 3px #26332e, inset 0 0 0 20px #ffffff; }
.reel-phone__chat { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 10px 9px 14px; font-size: 0.62rem; line-height: 1.45; opacity: 0; transition: opacity 0.45s var(--ease-out) 0.1s; }
.reel-scene--phone.s3 .reel-phone__chat { opacity: 1; }
.reel-phone__photo { align-self: flex-end; width: 46px; height: 58px; border-radius: 8px; background: linear-gradient(160deg, #fbf8f1 0 60%, #e6dfd0); box-shadow: 0 0 0 1px var(--hairline); }
.reel-phone__q { align-self: flex-end; max-width: 88%; margin: 0; padding: 5px 8px; border-radius: 10px 10px 3px 10px; background: var(--paper-sunken); font-weight: 500; }
.reel-phone__a { margin: 0; padding: 6px 8px; border-radius: 10px; background: var(--celadon-wash); color: var(--text-primary); }
.reel-phone__a b { color: var(--jade-deep); }
.reel-phone__points { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; font-size: 0.78rem; font-weight: 500; }
.reel-phone__points li { display: flex; align-items: center; opacity: 0; transform: translate3d(8px, 0, 0); transition: opacity 0.4s var(--ease-out) calc(var(--i) * 140ms), transform 0.45s var(--ease-out) calc(var(--i) * 140ms); }
.reel-scene--phone.s5 .reel-phone__points li { opacity: 1; transform: none; }

/* --- Dải "đọc được những loại file nào" ---------------------------------------- */
.auth-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.auth-sources__label { margin-right: 4px; font-size: var(--text-xs); color: rgba(255, 255, 255, 0.6); }
.src-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}
.src-chip::before { content: ""; width: 8px; height: 10px; border-radius: 2px; background: #9fb3ab; }
.src-chip[data-kind="xlsx"]::before { background: #1d6f42; }
.src-chip[data-kind="pdf"]::before { background: #d4483b; }
.src-chip[data-kind="docx"]::before { background: #2b5fb4; }
.src-chip[data-kind="csv"]::before { background: #2fb884; }
.src-chip[data-kind="img"]::before { background: #f0b44c; }
.src-chip[data-kind="sheets"]::before { background: #34a853; }
.src-chip[data-kind="web"]::before { border-radius: 50%; background: #7fb3ff; }

/* Ba thẻ tính năng kính mờ trên nền mực */
.auth-proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.auth-proof__art { grid-row: span 2; width: 34px; height: 34px; }
.auth-proof strong { align-self: center; line-height: 1.3; }
.auth-proof span { grid-column: 2; }

/* Màn hình thấp (máy tính xách tay 768px…): cột phải phải vừa một màn, không bị cắt.
   Bớt dần phần phụ: trước là dòng mô tả của thẻ, sau là cả hàng thẻ. Phim và câu
   giới thiệu — phần kể chuyện chính — luôn giữ nguyên. */
@media (min-width: 1020px) and (max-height: 960px) {
  .auth-proof span { display: none; }
  .auth-proof { grid-template-columns: 30px minmax(0, 1fr); align-items: center; }
  .auth-proof__art { grid-row: auto; width: 30px; height: 30px; }
}
@media (min-width: 1020px) and (max-height: 840px) {
  .auth-proofs { display: none; }
  .auth-visual__quote { font-size: clamp(1.4rem, 1rem + 1vw, 1.8rem); }
}
@media (min-width: 1020px) and (max-height: 740px) {
  .auth-sources { display: none; }
}

.auth-proof {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-content: start;
  column-gap: 10px;
  row-gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: var(--text-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.auth-proof strong { font-size: var(--text-sm); color: #ffffff; }

@media (max-width: 1260px) {
  .auth-proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-proof:nth-child(3) { display: none; }
}

/* ==========================================================================
   15. Thông báo nổi
   ========================================================================== */

.toast-stack { position: fixed; top: var(--sp-4); right: var(--sp-4); z-index: 450; display: flex; flex-direction: column; gap: var(--sp-3); max-width: 380px; pointer-events: none; }

/* Thông báo nằm dưới thanh điều hướng, không che nút Đăng nhập / Đăng ký hay Nâng cấp */
body.is-landing .toast-stack { top: calc(68px + var(--sp-3)); }
body.is-app .toast-stack { top: calc(var(--topbar-height) + var(--sp-3)); }

.toast {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + 3px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: var(--shadow-float);
  font-size: var(--text-sm);
  line-height: 1.5;
  pointer-events: auto;
}

.toast__icon { flex-shrink: 0; margin-top: 1px; }
.toast--success .toast__icon { color: var(--jade); }
.toast--error .toast__icon { color: var(--lacquer); }
.toast--warn .toast__icon { color: var(--amber); }
.toast--info .toast__icon { color: var(--indigo); }

.toast__timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; transform-origin: left center; }
.toast--success .toast__timer { background: var(--jade); }
.toast--error .toast__timer { background: var(--lacquer); }
.toast--warn .toast__timer { background: var(--amber); }
.toast--info .toast__timer { background: var(--indigo); }

.toast__close { width: 20px; height: 20px; display: grid; place-items: center; border: none; border-radius: 5px; background: transparent; color: var(--text-tertiary); cursor: pointer; flex-shrink: 0; }
.toast__close:hover { background: var(--paper-sunken); color: var(--text-primary); }

/* ==========================================================================
   17. Trang giới thiệu (Landing page)
   --------------------------------------------------------------------------
   Sản phẩm là nhân vật chính: hero đặt ngay một khung ứng dụng đang làm việc.
   Điểm nhấn duy nhất của cả trang là "dấu đối chiếu" trên con số (.num-ok) —
   thứ phân biệt sản phẩm với chatbot đa năng. Còn lại giữ yên: nền trắng, chữ
   mực, đường kẻ mảnh, không vệt màu trang trí.
   ========================================================================== */

.landing { position: relative; z-index: 1; background: var(--paper); }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-left: clamp(var(--sp-4), 4vw, var(--sp-7));
  padding-right: clamp(var(--sp-4), 4vw, var(--sp-7));
}

/* --- Thanh điều hướng --------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  transition: box-shadow 0.35s var(--ease-out);
}

.site-header.is-scrolled { box-shadow: 0 1px 0 var(--hairline); }

.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--sp-5);
  height: 64px;
}

.site-brand { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--ink); }
.site-brand:hover { color: var(--ink); }
.site-brand .brand-name { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }

.site-nav { position: relative; isolation: isolate; display: flex; justify-content: center; gap: var(--sp-1); justify-self: center; }

.site-nav a {
  padding: 7px 11px;
  white-space: nowrap;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  font-size: var(--text-base);
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Nền mờ trượt theo mục đang trỏ (bindNavPills). Không có JavaScript: không có nền, chữ vẫn đổi màu. */
.site-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--pill-w, 0);
  border-radius: var(--r-sm);
  background: var(--paper-sunken);
  opacity: 0;
  transform: translate3d(var(--pill-x, 0), 0, 0);
  transition: transform 0.38s var(--ease-out), width 0.38s var(--ease-out), opacity 0.2s ease-out;
  pointer-events: none;
}
.site-nav.has-pill::before { opacity: 1; }
.site-nav.no-pill-slide::before { transition: none; }

/* Lối vào trang hướng dẫn: luôn có trên thanh trên cùng của mọi phần giao diện. Nền ngọc nhạt để
   nổi hơn liên kết thường nhưng không tranh với nút chính (Đăng ký, Nâng cấp). */
.guide-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px 15px 8px 13px;
  border-radius: var(--r-pill);
  background: var(--jade-wash);
  box-shadow: inset 0 0 0 1px rgba(14, 122, 87, 0.16);
  color: var(--jade-deep);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.guide-link:hover { background: var(--celadon); color: var(--jade-deep); box-shadow: inset 0 0 0 1px rgba(14, 122, 87, 0.3); }
.guide-link:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.guide-link svg { flex-shrink: 0; transition: transform 0.4s var(--ease-spring); }
.guide-link:hover svg { transform: rotate(-8deg) scale(1.1); }
.guide-link--topbar { padding: 6px 13px 6px 11px; }

.auth-guide { position: absolute; top: var(--sp-5); right: clamp(var(--sp-4), 4vw, var(--sp-7)); z-index: 3; }

/* Năm mục điều hướng + ba nút: màn vừa thì nút Hướng dẫn chỉ còn biểu tượng (vẫn có aria-label),
   màn hẹp hơn nữa thì ẩn hẳn thanh mục — không để chữ bị bẻ thành hai dòng. */
@media (max-width: 1360px) {
  .site-actions .guide-link { padding: 9px; }
  .site-actions .guide-link .guide-link__label { display: none; }
}

@media (max-width: 1080px) {
  .site-header .site-nav { display: none; }
  .site-header__inner { grid-template-columns: auto 1fr auto; }
}

@media (max-width: 560px) {
  .guide-link--topbar { padding: 7px; }
  .guide-link--topbar .guide-link__label { display: none; }
}

.site-actions { display: flex; align-items: center; gap: var(--sp-2); justify-self: end; }
.site-actions .btn { padding: 8px 16px; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: clamp(var(--sp-7), 9vh, 6rem);
  padding-bottom: clamp(var(--sp-6), 6vh, var(--sp-8));
}

.hero__copy { max-width: 46rem; margin-bottom: clamp(var(--sp-6), 6vh, 3.5rem); }

.hero__title {
  margin-bottom: var(--sp-5);
  font-size: clamp(2.3rem, 1.25rem + 3vw, 3.7rem);
  font-weight: 700;
  line-height: 1.1;                 /* đủ chỗ cho dấu chồng hai tầng (ể, ỗ, ữ) giữa các dòng */
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.hero__lede {
  max-width: 40rem;
  margin-bottom: var(--sp-6);
  font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem);
  line-height: 1.65;
  color: var(--text-secondary);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.btn--lg { padding: 13px 24px; font-size: var(--text-md); }
.hero__note { margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--text-tertiary); }
.hero__sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 12px; pointer-events: none; }

/* --- Khung ứng dụng trong hero ------------------------------------------- */

.product {
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(16, 32, 25, 0.05), 0 24px 60px -18px rgba(16, 32, 25, 0.22);
}

.product__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 44px;
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  background: var(--paper-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
}

.product__crumb + .product__crumb::before { content: "/"; margin-right: var(--sp-2); color: var(--text-tertiary); font-weight: 400; }
.product__crumb--muted { font-weight: 500; color: var(--text-secondary); }

.product__body { display: grid; grid-template-columns: 208px minmax(0, 1fr); }

.product__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--hairline);
  background: var(--paper-soft);
  font-size: var(--text-sm);
}

.product__new {
  margin-bottom: var(--sp-3);
  padding: 8px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-weight: 600;
  color: var(--ink);
}

.product__group { margin: var(--sp-3) 0 var(--sp-1); padding: 0 10px; font-size: var(--text-xs); color: var(--text-tertiary); }
.product__item { padding: 6px 10px; border-radius: var(--r-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product__item.is-active { background: var(--jade-wash); color: var(--jade-deep); font-weight: 600; }

/* --- Bản minh hoạ: câu hỏi và câu trả lời bên trái, bảng nguồn bên phải ---- */

.lens-demo { position: relative; min-width: 0; }

.lens-demo__slab { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100%; }

.ask { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); }

.ask__q {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: 92%;
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 16px 16px 4px 16px;
  background: var(--ink);
  color: #ffffff;
  font-weight: 500;
}

.ask__caret { width: 2px; height: 1.15em; border-radius: 1px; background: #ffffff; flex-shrink: 0; }

.ask__answer { display: flex; flex-direction: column; gap: var(--sp-3); }
.ask__agent { font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); }
.ask__a { min-height: 5.2em; font-size: var(--text-base); line-height: 1.7; color: var(--ink); }
.demo-word { display: inline-block; }

.ask__meter {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 12px;
  border-radius: var(--r-md);
  background: var(--jade-wash);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--jade-deep);
}

.ask__check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--jade); color: #ffffff; flex-shrink: 0; }
.ask__track { position: relative; flex: 1; min-width: 40px; height: 5px; overflow: hidden; border-radius: var(--r-pill); background: rgba(14, 122, 87, 0.16); }
.ask__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--jade); transform-origin: left center; }
.ask__score { min-width: 3ch; font-weight: 700; font-variant-numeric: tabular-nums; }

.sheet { position: relative; padding: var(--sp-4); border-left: 1px solid var(--hairline); background: var(--paper-soft); }

.sheet__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: 0 var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.sheet__icon { font-size: 1rem; line-height: 1; }
.sheet__name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet__meta { margin-left: auto; font-size: var(--text-xs); color: var(--text-tertiary); white-space: nowrap; }

.sheet__grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.sheet__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--cols, 4.2rem minmax(0, 1fr) 2.4rem 3.6rem 1.5rem);
  align-items: center;
  gap: var(--sp-3);
  height: 40px;
  padding: 0 var(--sp-3);
}

.sheet__row + .sheet__row { border-top: 1px solid var(--hairline); }
.sheet__row--head { height: 32px; background: var(--paper-soft); font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); }

.sheet__row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--jade-wash); opacity: 0; }
.sheet__row.is-cited::before { opacity: 1; }
.sheet__row.is-cited { color: var(--jade-deep); font-weight: 600; }

.sheet__cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet__cell--num { text-align: right; }

.sheet__cite {
  justify-self: end;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--indigo-wash);
  color: var(--indigo);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.5);
}

.sheet__row.is-cited .sheet__cite { opacity: 1; transform: none; }

.lens {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  border: 1.5px solid var(--jade);
  border-radius: 8px;
  background: rgba(14, 122, 87, 0.06);
  opacity: 0;
  pointer-events: none;
}

.cite-chip {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin: 0 1px;
  border-radius: 5px;
  background: var(--indigo-wash);
  color: var(--indigo);
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  vertical-align: 2px;
}

/* --- Dấu đối chiếu trên con số — dùng chung cho trang giới thiệu và câu trả lời thật */

.num-ok,
.num-flag {
  padding: 0 2px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.num-ok { background: var(--jade-wash); box-shadow: inset 0 -1.5px 0 var(--jade); color: var(--jade-deep); }
.num-flag { background: var(--amber-wash); box-shadow: inset 0 -1.5px 0 var(--amber); color: var(--amber); }

/* --- Khối nội dung chung --------------------------------------------------- */

.section { padding-top: clamp(4rem, 10vh, 6.5rem); padding-bottom: clamp(4rem, 10vh, 6.5rem); }
.section + .section { border-top: 1px solid var(--hairline); }

.section__head { max-width: 44rem; margin-bottom: clamp(var(--sp-6), 5vh, var(--sp-7)); }

.section__title {
  margin-bottom: var(--sp-3);
  font-size: clamp(1.85rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.section__lede { max-width: 40rem; font-size: var(--text-md); line-height: 1.7; color: var(--text-secondary); }

/* --- Việc trợ lý làm mỗi ngày ------------------------------------------------ */

.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--sp-5), 3vw, var(--sp-6)); }

.use { display: flex; flex-direction: column; gap: var(--sp-2); }
.use__title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.015em; }
.use__text { margin: 0 0 var(--sp-3); color: var(--text-secondary); }

.exchange {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: auto 0 0;
  padding: var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper-soft);
}

.exchange__q {
  align-self: flex-end;
  max-width: 90%;
  margin: 0;
  padding: 7px 13px;
  border-radius: 14px 14px 4px 14px;
  background: var(--ink);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 500;
}

.exchange__a { margin: 0; font-size: var(--text-base); line-height: 1.7; }
.exchange__src { font-size: var(--text-xs); color: var(--text-tertiary); }

.uses__more { max-width: 48rem; margin: var(--sp-6) 0 0; color: var(--text-secondary); }

/* --- Ba bước kiểm tra (một quy trình, nên có số thứ tự) --------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

/* Vạch mực trên mỗi bước vẽ bằng nền (không phải viền) để khi cuộn tới nó "kẻ" từ trái sang. */
.step {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: calc(var(--sp-4) + 2px);
  background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 0 / 100% 2px;
  counter-increment: step;
}
.step::before { content: counter(step); font-size: var(--text-sm); font-weight: 700; color: var(--jade); font-variant-numeric: tabular-nums; }
.step__title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.015em; }
.step__text { margin: 0; color: var(--text-secondary); }

.verify { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--text-sm); }
.verify__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); margin: 0; padding: 9px 12px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--paper); }
.verify__why { font-size: var(--text-xs); color: var(--amber); }

.radar-note {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: center;
  margin-top: clamp(var(--sp-6), 6vh, var(--sp-7));
  padding: clamp(var(--sp-5), 4vw, var(--sp-6));
  border-radius: var(--r-xl);
  background: var(--paper-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.radar-note__title { margin-bottom: var(--sp-2); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
.radar-note__text { margin: 0; color: var(--text-secondary); }
.radar-note__list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }

.radar-note__list li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--text-secondary);
}

.radar-note__list strong { min-width: 1.4ch; font-size: var(--text-xl); font-weight: 700; color: var(--amber); font-variant-numeric: tabular-nums; }

/* --- Giới hạn của AI: ba lời nhắc (không phải quy trình, nên không đánh số) -------- */

.limits__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Vạch màu hổ phách: cùng màu với những chỗ "cần kiểm chứng" trong câu trả lời. */
.limits__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: calc(var(--sp-4) + 2px);
  background: linear-gradient(var(--amber), var(--amber)) no-repeat 0 0 / 100% 2px;
}
.limits__title { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.015em; }
.limits__text { margin: 0; color: var(--text-secondary); }

/* --- So sánh ---------------------------------------------------------------- */

.compare-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--text-base); }
.compare-table th, .compare-table td { padding: 14px var(--sp-4); border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.compare-table thead th { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.compare-table thead th:nth-child(2) { color: var(--jade-deep); }
.compare-table tbody th { width: 46%; font-weight: 500; color: var(--ink); }
.compare-table td { color: var(--text-secondary); }
.compare-table td:nth-child(2) { background: var(--jade-wash); }

.compare-table .is-yes { font-weight: 600; color: var(--jade-deep); }

.compare-table .is-yes::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.compare .table-scroll, .plan-compare-wrap { border: none; border-radius: 0; margin: 0; }
.compare__note { margin: var(--sp-4) 0 0; font-size: var(--text-xs); color: var(--text-tertiary); }

/* Nhóm dòng trong bảng so sánh: một dòng tiêu đề mảnh, không phải thẻ */
.compare-table tbody + tbody .compare-group th { padding-top: var(--sp-6); }
.compare-table .compare-group th {
  width: auto;
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
  border-bottom: 2px solid var(--ink);
  background: none;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}

/* Cùng một câu hỏi, hai cách làm việc: hai cột quy trình đặt cạnh nhau */
.duel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 var(--sp-7);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}

.duel__q {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ink);
}

.duel__q-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-tertiary); }
.duel__side { padding: var(--sp-5); }
.duel__side--plain { background: var(--paper-soft); color: var(--text-secondary); }
.duel__side--hub { background: var(--jade-wash); box-shadow: inset 3px 0 0 var(--jade); }
.duel__who { margin: 0 0 var(--sp-3); font-size: var(--text-base); font-weight: 700; color: var(--text-secondary); }
.duel__side--hub .duel__who { color: var(--jade-deep); }

.duel__steps { display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; counter-reset: duel; }

.duel__steps li {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: baseline;
  counter-increment: duel;
}

.duel__steps li::before {
  content: counter(duel);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.duel__side--hub .duel__steps li { color: var(--ink); }
.duel__side--hub .duel__steps li::before { color: var(--jade); }

.compare__fair {
  max-width: 68ch;
  margin: var(--sp-6) 0 0;
  padding-left: var(--sp-4);
  border-left: 2px solid var(--hairline-strong);
}

.compare__fair-title { margin: 0 0 var(--sp-2); font-size: var(--text-base); font-weight: 700; color: var(--ink); }
.compare__fair p { margin: 0; color: var(--text-secondary); }

/* Điện thoại: bảng ba cột phải kéo ngang mới thấy cột thứ ba — đổi thành từng dòng xếp dọc,
   mỗi ô ghi rõ nó thuộc bên nào (data-label). */
@media (max-width: 640px) {
  .compare-table { min-width: 0; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; }
  .compare-table tbody tr:not(.compare-group) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: var(--sp-3) 0 var(--sp-4);
    border-bottom: 1px solid var(--hairline);
  }
  .compare-table tbody tr:not(.compare-group) th { grid-column: 1 / -1; width: auto; padding: 0 0 var(--sp-2); border: none; }
  .compare-table tbody tr:not(.compare-group) td { padding: var(--sp-2) var(--sp-3); border: none; font-size: var(--text-sm); }
  .compare-table td::before,
  .compare-table td.is-yes::before {
    content: attr(data-label);
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 2px;
    background: none;
    -webkit-mask: none;
    mask: none;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-tertiary);
  }
  .compare-table .compare-group th { padding-left: 0; padding-right: 0; }
  .compare-table tbody + tbody .compare-group th { padding-top: var(--sp-5); }
}

@media (max-width: 720px) {
  .duel { grid-template-columns: minmax(0, 1fr); }
  .duel__q { padding: var(--sp-4); font-size: var(--text-base); }
  .duel__side { padding: var(--sp-4); }
  .duel__side--hub { box-shadow: inset 0 3px 0 var(--jade); }
}

/* --- Bảo mật: bảng thông số --------------------------------------------------- */

.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(var(--sp-5), 4vw, var(--sp-7)); margin: 0; }
.spec { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) 0; border-top: 1px solid var(--hairline); }
.spec dt { font-weight: 700; color: var(--ink); }
.spec dd { margin: 0; color: var(--text-secondary); }

/* --- Bảng giá ------------------------------------------------------------------- */

.pricing__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.pricing__head .section__lede { margin: 0; }

.price-table {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--hairline-strong);
  border-radius: 20px;
  background: var(--paper);
}

.price-col { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding: var(--sp-6) var(--sp-5); }
.price-col + .price-col { border-left: 1px solid var(--hairline); }

/* Tám dòng của mỗi cột (nhãn, tên, mô tả, giá, tiết kiệm, giá ngày, nút, tính năng)
   dùng chung hàng lưới với cột bên cạnh: giá và nút luôn thẳng hàng dù mô tả dài ngắn khác nhau. */
@supports (grid-template-rows: subgrid) {
  .price-table { row-gap: 0; }
  .price-col { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: var(--sp-2); }
  .price-table .price-col__tagline,
  .price-table .price-col__save,
  .price-table .price-col__daily { min-height: 0; }
  .price-table .price-col .btn { margin-top: var(--sp-3); align-self: start; }
}

.price-table .price-col--featured {
  z-index: 1;
  margin: -1px;
  overflow: hidden;              /* giữ vệt sáng quét qua (animations.css §20) trong thẻ, không tràn sang cột bên */
  border: 2px solid var(--jade);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 18px 40px -16px rgba(14, 122, 87, 0.35);
}

.price-table .price-col--featured + .price-col { border-left-color: transparent; }

.price-col__note { min-height: 1.35em; margin: 0; font-size: var(--text-xs); font-weight: 700; color: var(--jade); }
.price-col__name { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.015em; }
.price-col__tagline { min-height: 2.9em; margin: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--text-secondary); }
.price-col__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: var(--sp-2) 0 0; }

.price-col__amount {
  font-size: clamp(1.5rem, 1.1rem + 0.75vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-col__period { font-size: var(--text-sm); color: var(--text-tertiary); }
.price-col__save { min-height: 1.35em; margin: 0; font-size: var(--text-xs); font-weight: 600; color: var(--jade); }
.price-col__daily { min-height: 1.35em; margin: 0; font-size: var(--text-xs); color: var(--text-tertiary); }

.price-col__features {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--hairline);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.price-col__features li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); line-height: 1.45; }
.price-col__features svg { margin-top: 3px; color: var(--jade); }

.price-table__status { grid-column: 1 / -1; padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--text-secondary); }
.price-table__status .btn { margin-top: var(--sp-3); }

.pricing__terms { margin: var(--sp-4) 0 var(--sp-5); font-size: var(--text-sm); color: var(--text-secondary); }

/* "AI nào trả lời bạn": hai ô cạnh nhau — gói Miễn phí (model chung, chậm) và gói trả phí (khoá riêng) */
.ai-note { margin: 0 0 var(--sp-7); padding: var(--sp-5); border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); background: var(--paper-soft); }
.ai-note__title { margin: 0 0 var(--sp-4); font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.ai-note__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.ai-note__item { padding: var(--sp-4); border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); }
.ai-note__item--own { background: var(--jade-wash); box-shadow: inset 0 0 0 1px var(--celadon); }
.ai-note__label { margin: 0 0 6px; font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.ai-note__item--own .ai-note__label { color: var(--jade-deep); }
.ai-note__text { margin: 0; font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); }
@media (max-width: 720px) { .ai-note__grid { grid-template-columns: minmax(0, 1fr); } }

.plan-compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.plan-compare caption { padding-bottom: var(--sp-4); text-align: left; font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.plan-compare th, .plan-compare td { padding: 11px var(--sp-3); border-bottom: 1px solid var(--hairline); text-align: center; }
.plan-compare th:first-child { text-align: left; font-weight: 500; color: var(--ink); }
.plan-compare thead th { font-weight: 700; color: var(--ink); }
.plan-compare thead th.is-featured, .plan-compare td.is-featured { background: var(--jade-wash); }
.plan-compare td { color: var(--text-secondary); }
.plan-compare .yes { color: var(--jade); font-weight: 700; }
.plan-compare .no { color: var(--text-tertiary); }

/* --- Hỏi đáp -------------------------------------------------------------------- */

.faq__list { max-width: 50rem; border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-base) var(--ease-out);
}

.faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__item p { max-width: 44rem; margin: 0; padding: 0 0 var(--sp-5); color: var(--text-secondary); }

/* --- Lời mời cuối trang ------------------------------------------------------------ */

.closing { padding-bottom: clamp(var(--sp-6), 7vh, var(--sp-8)); }

.closing__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(var(--sp-7), 6vw, 4.5rem) clamp(var(--sp-5), 6vw, 4.5rem);
  border-radius: 24px;
  background: var(--ink);
  color: #ffffff;
}

.closing__title {
  max-width: 34rem;
  margin-bottom: var(--sp-4);
  font-size: clamp(1.85rem, 1.3rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.closing__text { max-width: 40rem; margin-bottom: var(--sp-6); font-size: var(--text-md); color: rgba(255, 255, 255, 0.72); }
.closing__panel .btn--primary { background: #ffffff; color: var(--ink); box-shadow: none; }
.closing__panel .btn--primary:hover { background: var(--jade-wash); }

/* --- Chân trang --------------------------------------------------------------------- */

.site-footer { padding-top: var(--sp-5); padding-bottom: var(--sp-7); }

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.site-footer nav a { color: var(--text-secondary); }
.site-footer nav a:hover { color: var(--ink); }

/* Chân trang đầy đủ của trang giới thiệu: thương hiệu + ba cột liên kết */
.site-footer--full { padding: 0 0 var(--sp-6); border-top: 1px solid var(--hairline); background: var(--paper-soft); }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-7);
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-6);
}

.site-footer__brand { display: grid; gap: var(--sp-3); justify-items: start; align-content: start; }
.site-footer__blurb { max-width: 30ch; margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.site-footer nav.site-footer__col { display: grid; gap: var(--sp-2); align-content: start; font-size: var(--text-sm); }
.site-footer__col h3 { margin: 0 0 var(--sp-1); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); font-size: var(--text-sm); color: var(--text-tertiary); }

@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* --- Nút đổi ngôn ngữ -------------------------------------------------------- */

.lang-switch {
  display: inline-flex;
  justify-self: end;
  padding: 2px;
  border-radius: var(--r-pill);
  background: var(--paper-sunken);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.lang-switch__btn {
  min-width: 34px;
  padding: 5px 9px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
}

.lang-switch__btn:hover { color: var(--ink); }
.lang-switch__btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-flat); }
.lang-switch__btn:focus-visible { outline: 2px solid var(--jade); outline-offset: 1px; }

.auth-top {
  position: absolute;
  top: var(--sp-5);
  right: clamp(var(--sp-4), 4vw, var(--sp-7));
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.auth-top .auth-guide { position: static; }

/* --- Hero: ba điều chắc chắn ------------------------------------------------- */

.hero__facts { display: grid; gap: 6px; margin: var(--sp-4) 0 0; padding: 0; list-style: none; font-size: var(--text-sm); color: var(--text-secondary); }
.hero__facts li { display: flex; align-items: center; gap: var(--sp-2); }
.hero__facts svg { flex-shrink: 0; color: var(--jade); }

/* --- Điểm khác biệt: dải nền đêm chạy hết chiều ngang, khối nổi bật nhất trang ---
   Màu nền và hai màu nhấn lấy từ logo (đêm #0e1430, lam ngọc #3fe0bd, hổ phách #ffc14d). */

.versus {
  --night: #0e1430;
  --night-soft: #172048;
  --on-night: #f4f6fb;
  --on-night-muted: #a9b4d8;
  --teal: #3fe0bd;
  position: relative;
  margin-top: clamp(var(--sp-6), 6vh, var(--sp-8));
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  background: var(--night);
  color: var(--on-night);
}

.versus__head { max-width: 50rem; margin-bottom: clamp(var(--sp-6), 5vh, var(--sp-7)); }

.versus__title {
  margin: 0 0 var(--sp-4);
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: #ffffff;
}

.versus__lede { max-width: 44rem; margin: 0; font-size: var(--text-lg); line-height: 1.6; color: var(--on-night-muted); }

.edges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-5);
  margin: 0 0 clamp(var(--sp-6), 6vh, var(--sp-8));
  padding: 0;
  list-style: none;
}

.edge { padding-top: var(--sp-4); border-top: 2px solid var(--teal); }
.edge__title { margin: 0 0 var(--sp-2); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.015em; color: #ffffff; }
.edge__text { margin: 0; font-size: var(--text-base); line-height: 1.6; color: var(--on-night-muted); }

.versus .duel { border-color: transparent; color: var(--ink); }
.versus .table-scroll { border: none; border-radius: 0; margin: 0; }
.versus__table { padding: clamp(var(--sp-4), 3vw, var(--sp-6)); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); }
.versus .compare__fair { border-left-color: var(--teal); }
.versus .compare__fair-title { color: #ffffff; }
.versus .compare__fair p { color: var(--on-night-muted); }
.versus .compare__note { color: #8490b8; }

@media (max-width: 980px) { .edges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .edges { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
  .versus__lede { font-size: var(--text-md); }
  .versus__table { padding: var(--sp-3) var(--sp-4); }
}

/* --- Bắt đầu trong ba bước (trình tự thật, nên có số) ------------------------- */

.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); margin: 0; padding: 0; list-style: none; counter-reset: quick; }
.quick__step { counter-increment: quick; padding-top: var(--sp-4); border-top: 1px solid var(--hairline-strong); }
.quick__step::before {
  content: counter(quick);
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1;
  color: var(--jade);
  font-variant-numeric: tabular-nums;
}
.quick__title { margin: 0 0 var(--sp-2); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.015em; }
.quick__text { margin: 0; color: var(--text-secondary); }
@media (max-width: 760px) { .quick { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } }

/* --- Lưới việc trợ lý tự làm: ngăn bằng đường kẻ, không phải thẻ đổ bóng ---------- */

.section__head--sub { margin: clamp(var(--sp-7), 8vh, var(--sp-8)) 0 var(--sp-5); }
.section__title--sub { font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem); }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-6); margin: 0; padding: 0; list-style: none; }
.feature { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: start; padding: var(--sp-5) 0; border-top: 1px solid var(--hairline); }
.feature__icon { grid-row: 1 / span 2; margin-top: 2px; color: var(--jade); }
.feature__title { margin: 0; font-size: var(--text-md); font-weight: 600; }
.feature__text { grid-column: 2; margin: 0; font-size: var(--text-base); color: var(--text-secondary); }
@media (max-width: 980px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .features { grid-template-columns: minmax(0, 1fr); } }

/* --- Liên hệ ----------------------------------------------------------------- */

.contact__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: clamp(var(--sp-5), 4vw, var(--sp-7));
  border-radius: var(--r-lg);
  background: var(--paper-soft);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.contact__title { margin: 0 0 var(--sp-2); font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
.contact__text { max-width: 46ch; margin: 0; color: var(--text-secondary); }
.contact__channels { margin: var(--sp-3) 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.contact__channels a { color: var(--jade-deep); font-weight: 600; }

/* Chuyển cảnh giữa ba phần — phần tử do JavaScript tạo */
.bloom {
  position: fixed;
  z-index: 700;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 55%, rgba(255, 255, 255, 0) 71%);
  pointer-events: none;
  will-change: transform, opacity;
}

/* --- Trang giới thiệu trên màn hình hẹp -------------------------------------------- */

@media (max-width: 1020px) {
  .product__body { grid-template-columns: minmax(0, 1fr); }
  .product__side { display: none; }
  .uses, .steps, .limits__list { grid-template-columns: minmax(0, 1fr); }
  .price-table { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-col:nth-child(3) { border-left: none; }
  .price-col:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .radar-note { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .lens-demo__slab { grid-template-columns: minmax(0, 1fr); }
  .sheet { border-left: none; border-top: 1px solid var(--hairline); }
  .price-table { grid-template-columns: minmax(0, 1fr); }
  .price-col + .price-col { border-left: none; border-top: 1px solid var(--hairline); }
  .price-table .price-col--featured { margin: -1px; }
  .spec { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

.faq__more { max-width: 50rem; margin: var(--sp-5) 0 0; color: var(--text-secondary); }
.faq__more a, .guide__main a { color: var(--jade-deep); text-decoration: underline; text-decoration-color: rgba(14, 122, 87, 0.35); text-underline-offset: 3px; }
.faq__more a:hover, .guide__main a:hover { text-decoration-color: currentColor; }


/* ==========================================================================
   18. Trang hướng dẫn sử dụng (/huong-dan)
   --------------------------------------------------------------------------
   Trang để đọc: một cột chữ vừa tầm mắt, mục lục bám theo bên trái. Chỗ duy nhất
   có "hình" là bản mẫu thanh đo độ tin cậy — dựng bằng đúng thành phần của
   workspace, để người đọc nhận ra nó ngay khi gặp lại dưới câu trả lời.
   ========================================================================== */

.guide { position: relative; z-index: 1; min-height: 100vh; background: var(--paper); }

.guide__layout {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 44rem);
  justify-content: start;
  gap: clamp(var(--sp-6), 6vw, 5.5rem);
  padding-top: clamp(var(--sp-6), 6vh, var(--sp-8));
  padding-bottom: var(--sp-8);
}

/* --- Mục lục --- */
.guide-toc { position: sticky; top: calc(64px + var(--sp-6)); align-self: start; font-size: var(--text-sm); }
.guide-toc__title { margin: 0 0 var(--sp-2); font-size: var(--text-xs); font-weight: 600; color: var(--text-tertiary); }
.guide-toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--hairline); }
.guide-toc a {
  display: block;
  margin-left: -1px;
  padding: 6px 0 6px var(--sp-3);
  border-left: 2px solid transparent;
  color: var(--text-secondary);
  line-height: 1.4;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.guide-toc a:hover { color: var(--ink); }
.guide-toc a[aria-current="true"] { border-left-color: var(--jade); color: var(--ink); font-weight: 600; }

/* --- Cột chữ --- */
.guide__intro { padding-bottom: var(--sp-6); }
.guide__title { margin: 0 0 var(--sp-3); font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; }
.guide__lede { max-width: 38rem; margin: 0; font-size: 1.125rem; line-height: 1.6; color: var(--text-secondary); }

.guide-section { padding: var(--sp-6) 0; border-top: 1px solid var(--hairline); scroll-margin-top: calc(64px + var(--sp-3)); }
.guide-section h2 { margin: 0 0 var(--sp-4); font-size: var(--text-xl); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.guide-section h3 { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--text-md); font-weight: 700; }
.guide-section p { margin: 0 0 var(--sp-4); line-height: 1.75; }
.guide-section code { padding: 1px 6px; border-radius: 5px; background: var(--paper-sunken); font-size: 0.9em; }
.guide-section kbd { padding: 1px 6px; border: 1px solid var(--hairline-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--paper-soft); font: inherit; font-size: 0.85em; }
.guide-note { color: var(--text-secondary); }
/* Trang Điều khoản / Quyền riêng tư dùng lại khung trang hướng dẫn. */
.legal__date { margin: var(--sp-3) 0 0; font-size: var(--text-sm); color: var(--text-tertiary); }
.legal .guide-section a { text-decoration: underline; text-underline-offset: 2px; }
.legal .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Các bước làm theo thứ tự — chỉ dùng số cho những việc thật sự nối tiếp nhau. */
.guide-steps { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-5); padding: 0; list-style: none; counter-reset: guide-step; }
.guide-steps li { position: relative; padding-left: 2.5rem; line-height: 1.7; }
.guide-steps li::before {
  counter-increment: guide-step;
  content: counter(guide-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--jade-wash);
  color: var(--jade-deep);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Danh sách: chấm thường; "!" cho điều cần lưu ý; "✕" cho điều không nên làm. */
.guide-list { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.guide-list li { position: relative; padding-left: 1.9rem; line-height: 1.7; }
.guide-list li::before { content: ""; position: absolute; left: 0.45rem; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); }
.guide-list--note li::before,
.guide-list--dont li::before {
  left: 0;
  top: 0.2em;
  width: 1.2rem;
  height: 1.2rem;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
.guide-list--note li::before { content: "!"; background: var(--amber-wash); color: var(--amber); }
.guide-list--dont li::before { content: "✕"; background: var(--lacquer-wash); color: var(--lacquer); }

/* Câu hỏi mẫu: cùng dáng bong bóng câu hỏi trong workspace. */
.guide-examples { margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5) var(--sp-5); border-radius: var(--r-md); background: var(--paper-soft); }
.guide-section .guide-examples__title { margin: 0 0 var(--sp-3); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.guide-examples ul { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.guide-examples li { padding: 8px 14px; border-radius: 16px 16px 16px 4px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hairline); font-size: var(--text-base); line-height: 1.55; }

/* Bản mẫu thanh đo: câu trả lời và thanh đo thật, dữ liệu ví dụ. */
.guide-specimen {
  display: grid;
  gap: var(--sp-4);
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-raised);
}
.guide-specimen .answer__body { font-size: var(--text-base); }
.guide-specimen .answer__body p { margin: 0 0 var(--sp-2); line-height: 1.7; }
.guide-specimen .answer__body p:last-child { margin-bottom: 0; }
.guide-specimen .trust p { margin: 0; line-height: 1.5; }
.guide-specimen .trust .trust__summary { margin-top: var(--sp-1); }
.guide-specimen .trust__note { display: none; }
.guide-specimen figcaption { font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); }

.guide-legend, .guide-kinds { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.guide-legend > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; }
.guide-legend dt, .guide-kinds dt { margin: 0; }
.guide-legend dd, .guide-kinds dd { margin: 0; line-height: 1.65; color: var(--text-secondary); }
.guide-legend .level-chip { font-size: var(--text-sm); }

/* Việc hằng ngày: tên tính năng bên trái (đúng như trên giao diện), cách dùng bên phải. */
.guide-features { display: grid; gap: 0; margin: 0 0 var(--sp-4); }
.guide-features > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-3) 0; border-top: 1px solid var(--hairline); }
.guide-features > div:first-child { border-top: none; padding-top: 0; }
.guide-features dt { margin: 0; font-weight: 700; color: var(--ink); }
.guide-features dd { margin: 0; line-height: 1.65; color: var(--text-secondary); }
@media (max-width: 560px) {
  .guide-features > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

.guide-kinds > div { padding: 2px 0 2px var(--sp-4); box-shadow: inset 2px 0 0 var(--amber); }
.guide-kinds > div[data-kind="wording"] { box-shadow: inset 2px 0 0 var(--text-tertiary); }
.guide-kinds dt { font-weight: 600; color: var(--amber); }
.guide-kinds > div[data-kind="wording"] dt { color: var(--text-primary); }

.guide-marks { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.guide-marks li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-3); align-items: baseline; line-height: 1.65; color: var(--text-secondary); }
.guide-marks__sample { color: var(--text-primary); font-size: var(--text-base); }
.guide-marks__sample .cite-ref { cursor: default; }
.guide-marks__flag { padding: 0 2px; }

.guide-callout { margin: 0 0 var(--sp-5); padding: var(--sp-4) var(--sp-5); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--amber-wash); box-shadow: inset 3px 0 0 var(--amber); }
.guide-callout p { margin: 0; }
.guide-callout .guide-callout__title { margin-bottom: var(--sp-1); font-weight: 700; color: var(--amber); }

.guide__outro { margin: 0; padding-top: var(--sp-5); border-top: 1px solid var(--hairline); color: var(--text-secondary); }

body.is-guide .toast-stack { top: calc(68px + var(--sp-3)); }

/* Điện thoại và máy tính bảng: mục lục thành dải cuộn ngang bám dưới thanh điều hướng. */
@media (max-width: 900px) {
  .guide__layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .guide-toc {
    position: sticky;
    top: 64px;
    z-index: 5;
    margin: 0 calc(-1 * clamp(var(--sp-4), 4vw, var(--sp-7))) var(--sp-5);
    padding: var(--sp-2) clamp(var(--sp-4), 4vw, var(--sp-7));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--hairline);
  }
  .guide-toc__title { display: none; }
  .guide-toc ul { display: flex; gap: var(--sp-1); overflow-x: auto; border-left: none; scrollbar-width: none; }
  .guide-toc ul::-webkit-scrollbar { display: none; }
  .guide-toc a { margin: 0; padding: 6px 12px; border-left: none; border-radius: var(--r-pill); white-space: nowrap; }
  .guide-toc a[aria-current="true"] { background: var(--jade-wash); color: var(--jade-deep); }
  .guide__intro { padding-top: var(--sp-5); }
  .guide-section { scroll-margin-top: calc(64px + 56px); }
}

@media (max-width: 560px) {
  .guide-specimen { padding: var(--sp-4); margin-left: calc(-1 * var(--sp-2)); margin-right: calc(-1 * var(--sp-2)); }
  .guide-legend > div, .guide-marks li { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  .guide-callout { padding: var(--sp-4); }
}

/* Lối vào hướng dẫn từ workspace, khung hỗ trợ và màn hình thanh toán */
.usage__guide { display: block; margin-top: var(--sp-2); font-size: var(--text-xs); color: var(--text-secondary); text-align: center; }
.usage__guide:hover { color: var(--jade-deep); }
.qr-guide { margin: 0; text-align: center; }
.qr-guide a { color: var(--jade-deep); text-decoration: underline; text-underline-offset: 2px; }
.support-guide { display: flex; align-items: center; gap: var(--sp-2); padding: 8px var(--sp-4); border-bottom: 1px solid var(--hairline); color: var(--text-secondary); font-size: var(--text-sm); }
.support-guide:hover { background: var(--paper-soft); color: var(--jade-deep); }


/* ==========================================================================
   16. Thích ứng thiết bị
   ========================================================================== */

/* Workspace: không có nút nổi che nội dung — mở hỗ trợ bằng nút "?" trên thanh trên cùng,
   khung hỗ trợ thả xuống ngay dưới thanh đó. */
body.is-app .support-launcher { display: none; }
body.is-app .support { top: calc(var(--topbar-height) + var(--sp-2)); bottom: auto; right: var(--sp-4); }
body.is-app .support-panel {
  top: calc(var(--topbar-height) + var(--sp-2));
  bottom: auto;
  right: var(--sp-4);
  height: min(600px, calc(100vh - var(--topbar-height) - 24px));
  transform-origin: 100% 0;
}

@media (max-width: 1080px) {
  .checkout { grid-template-columns: 1fr; }
  .pay-summary { position: static; }
  .qr-layout { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
}

@media (max-width: 860px) {
  :root { --rail-width: 0px; }

  .app-shell { grid-template-columns: 1fr; }

  .rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    height: 100dvh;
    z-index: 90;
    transform: translateX(-104%);
    transition: transform 420ms var(--ease-out);
    background: var(--paper-soft);
    box-shadow: var(--shadow-modal);
  }

  .rail[data-open="true"] { transform: translateX(0); }

  .rail-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(10, 20, 40, 0.24); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

  .icon-btn.rail-toggle { display: grid; }
  .composer-dock { left: 0; padding: var(--sp-3) var(--sp-3) var(--sp-2); }
  .canvas { padding: var(--sp-5) var(--sp-4) 200px; }
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .composer__hint { display: none; }
  .composer__bar .task-picker { flex: 1; }
  .field-row { grid-template-columns: 1fr; }
  .suggestions { grid-template-columns: 1fr; }
  .modal__body { padding: var(--sp-4); }
  .bubble-user { max-width: 88%; }
  .team__tabs { padding: 0 var(--sp-3); }
  .team__grid, .team__inline-form { grid-template-columns: minmax(0, 1fr); }
  .team__inline-form .field { margin-bottom: var(--sp-2); }

  .site-header__inner { grid-template-columns: auto 1fr auto; gap: var(--sp-2); }
  .site-nav { display: none; }
  .auth-back { top: var(--sp-3); }
  .auth-top { top: var(--sp-3); right: var(--sp-4); }
  .auth-guide { top: var(--sp-3); padding: 6px 12px 6px 10px; }
  .auth-main { padding: calc(var(--sp-7) + var(--sp-3)) var(--sp-4) var(--sp-6); place-items: start center; }
}

@media (max-width: 640px) {
  /* Điện thoại: khung hỗ trợ phủ toàn màn hình, dễ gõ hơn một ô nhỏ ở góc. */
  .support { right: var(--sp-3); bottom: var(--sp-3); }
  .support-panel,
  body.is-app .support-panel { inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: none; }
  body.support-is-open .support-launcher { display: none; }
  .transfer-row { grid-template-columns: 7rem minmax(0, 1fr); padding: 9px var(--sp-3); }
  .price-table { grid-template-columns: minmax(0, 1fr); }
  .price-col__tagline { min-height: 0; }
  .attach-tray { padding-left: var(--sp-3); }
  .bubble-media__item { width: 108px; height: 108px; }
}

@media (max-width: 560px) {
  .topbar__conv { font-size: var(--text-sm); }
  .topbar .chip--plan, .topbar .chip--amber { display: none; }
  .topbar__label { display: none; }
  .topbar .motion-toggle { display: none; }
  #teamBtn { padding: 6px 8px; }
  #upgradeBtnTop { padding: 6px 12px; font-size: var(--text-sm); }
  .headline { font-size: var(--text-2xl); }
  .starter { flex-direction: column; align-items: flex-start; }
  .composer-note__full { display: none; }
  .composer-note__short { display: inline; }
  .canvas { padding-bottom: 170px; }

  .hero__title { font-size: clamp(2.1rem, 1.2rem + 4.4vw, 2.6rem); }
  .hero__actions .btn { flex: 1 1 auto; }
  .sheet { padding: var(--sp-3) var(--sp-2) var(--sp-2); }
  .sheet__row { gap: var(--sp-2); padding: 0 var(--sp-2); font-size: var(--text-xs); }
  .ask { padding: var(--sp-4); }
  .closing__panel { border-radius: 20px; }
}

@media (max-width: 480px) {
  .toast-stack { left: var(--sp-3); right: var(--sp-3); max-width: none; }
  .qr-frame canvas, .qr-frame img { width: 192px; height: 192px; }
  .modal__head, .modal__foot { padding: var(--sp-4); }
  .plan-grid { grid-template-columns: 1fr; }
  .drop-panel { padding: var(--sp-7) var(--sp-4) var(--sp-6); }

  .site-brand .brand-name { display: none; }
  .site-actions .btn { padding: 7px 14px; font-size: var(--text-sm); }
  /* Màn hẹp: nút VI/EN, Đăng nhập, Đăng ký đã kín hàng — nút sách hướng dẫn nhường chỗ
     (hướng dẫn vẫn có ở cuối trang và trong mục Hỏi đáp). */
  #guestActions .guide-link { display: none; }
  .site-actions { gap: 6px; }
}

/* ==========================================================================
   16b. Điện thoại thật (Android và iOS)
   --------------------------------------------------------------------------
   Bốn điều trình duyệt trên điện thoại làm khác máy tính, và cách xử lý ở đây:

   1. Màn hình có tai thỏ và thanh gạt home. Trang khai báo `viewport-fit=cover`
      nên nền tràn ra hết màn hình — phải tự chừa lề bằng `env(safe-area-inset-*)`,
      không thì xoay ngang là tai thỏ che mất nút ở mép, và ô soạn câu hỏi nằm
      ngay dưới thanh gạt home (bấm vào là vuốt nhầm ra ngoài ứng dụng).
   2. `100vh` tính cả phần thanh địa chỉ đang ẩn, nên đáy khung bị cắt.
      `100dvh` mới là chiều cao đang nhìn thấy thật.
   3. Bàn phím ảo của iOS KHÔNG đẩy phần tử `position: fixed` lên: ô soạn câu hỏi
      sẽ nằm sau bàn phím. JavaScript đo phần bị che (visualViewport) rồi đặt vào
      `--kb-inset`, ô soạn tự nâng lên đúng bấy nhiêu (bindKeyboardInset).
   4. Chạm bằng đầu ngón tay cần ô bấm khoảng 44px (Apple) – 48px (Android), và
      ô nhập chữ phải từ 16px, nếu nhỏ hơn Safari tự phóng to cả trang khi chạm vào.
   ========================================================================== */

/* --- 1. Chiều cao thật của khung nhìn ------------------------------------- */

@supports (height: 100dvh) {
  .rail { height: 100dvh; }
  .modal { max-height: calc(100dvh - 2 * var(--sp-4)); }
  .modal.settings { height: min(780px, calc(100dvh - 2 * var(--sp-4))); }

  /* Từ 641px trở lên khung hỗ trợ là một ô thả xuống; hẹp hơn thì nó phủ kín
     màn hình (quy tắc ở §16, max-width 640px) nên không đụng vào. */
  @media (min-width: 641px) {
    body.is-app .support-panel { height: min(600px, calc(100dvh - var(--topbar-height) - 24px)); }
  }

  @media (max-width: 760px) {
    .modal.settings { height: calc(100dvh - 2 * var(--sp-3)); }
  }
}

/* --- 2. Lề an toàn: tai thỏ, góc bo, thanh gạt home ------------------------ */

.container {
  padding-left: max(clamp(var(--sp-4), 4vw, var(--sp-7)), env(safe-area-inset-left));
  padding-right: max(clamp(var(--sp-4), 4vw, var(--sp-7)), env(safe-area-inset-right));
}

/* Hộp thoại luôn nằm trong vùng an toàn, kể cả khi xoay ngang. */
.overlay {
  padding: max(var(--sp-4), env(safe-area-inset-top)) max(var(--sp-4), env(safe-area-inset-right))
           max(var(--sp-4), env(safe-area-inset-bottom)) max(var(--sp-4), env(safe-area-inset-left));
}

.support { right: max(var(--sp-5), env(safe-area-inset-right)); bottom: max(var(--sp-5), env(safe-area-inset-bottom)); }

@media (max-width: 860px) {
  .topbar {
    padding-left: max(var(--sp-3), env(safe-area-inset-left));
    padding-right: max(var(--sp-3), env(safe-area-inset-right));
  }

  /* `bottom` chạy theo bàn phím ảo; 0 khi không có bàn phím. */
  .composer-dock {
    bottom: var(--kb-inset, 0px);
    padding-left: max(var(--sp-3), env(safe-area-inset-left));
    padding-right: max(var(--sp-3), env(safe-area-inset-right));
    padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
    transition: bottom 160ms var(--ease-out);
  }

  .canvas {
    padding-left: max(var(--sp-4), env(safe-area-inset-left));
    padding-right: max(var(--sp-4), env(safe-area-inset-right));
    padding-bottom: calc(200px + env(safe-area-inset-bottom));
  }

  .rail { padding-left: env(safe-area-inset-left); }
  .support-panel, body.is-app .support-panel { padding-bottom: env(safe-area-inset-bottom); }
}

/* Từ bản 1.20.1 màn hình hẹp có thêm một dòng nhắc dưới ô hỏi: chừa thêm chỗ cho nó. */
@media (max-width: 560px) {
  .canvas { padding-bottom: calc(196px + env(safe-area-inset-bottom)); }
}

/* --- 3. Cỡ chạm và cỡ chữ ô nhập ----------------------------------------- */

@media (pointer: coarse), (max-width: 860px) {
  /* 16px: dưới mức này Safari phóng to cả trang khi chạm vào ô nhập, và trang
     không tự thu lại — người dùng phải tự véo hai ngón để về như cũ. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  textarea,
  select,
  .field__input,
  .field__select,
  .set-select { font-size: 16px; }

  /* Vùng bấm đủ cho đầu ngón tay. Chỉ áp dụng trên màn hình cảm ứng / màn hẹp,
     giao diện trên máy tính giữ nguyên tỉ lệ gọn gàng. */
  .btn,
  .task-picker__btn,
  .segmented__option,
  .guide-link,
  .site-brand,
  .conv-item__open,
  .rail__link,
  .settings__tab,
  .choice,
  .account-menu__item,
  .agent-item,
  .trust__review-head,
  .welcome__guide,
  .site-footer nav a { min-height: 44px; }

  .answer-reasons .chip { min-height: 36px; }

  /* Nút chỉ có biểu tượng: vuông 44px và không bị bóp lại khi thanh trên cùng chật. */
  .icon-btn,
  .account-trigger,
  .composer__attach,
  .composer__send { width: 44px; height: 44px; flex-shrink: 0; }

  .site-actions .guide-link,
  .topbar .guide-link { min-width: 44px; justify-content: center; flex-shrink: 0; }

  /* Nút xoá nhỏ xíu cuối mỗi dòng hội thoại, tài liệu — nới cho khỏi bấm nhầm sang dòng. */
  .conv-item__delete,
  .doc-item__remove,
  .field__peek,
  .avatar-edit__btn { width: 40px; height: 40px; }

  .answer-action,
  .support-chip { min-height: 40px; }

  .support-guide { min-height: 44px; }

  /* Đường dẫn cuối thanh đo độ tin cậy nằm trên một dòng riêng: nới cao cho dễ chạm. */
  .trust__note a { display: inline-flex; align-items: center; min-height: 40px; }

  /* Số trích dẫn là chữ nhỏ trong câu văn: giữ nguyên cỡ chữ, chỉ nới vùng chạm
     vô hình quanh nó cho đủ đầu ngón tay. */
  .cite-ref { position: relative; }
  .cite-ref::after { content: ""; position: absolute; inset: -11px; }

  .site-footer nav a,
  .trust__review-head { display: inline-flex; align-items: center; }

  .usage__guide { display: grid; place-items: center; min-height: 44px; }

  /* Ô chọn nhiệm vụ cao 34px cố định — nới ra cho vừa ngón tay. */
  .task-picker__btn { height: auto; padding: 0 14px; }

  /* Android Chrome tô một mảng xám khi chạm; hiệu ứng :active của nút đã đủ rõ. */
  a, button, [role="button"], [role="tab"], [role="radio"], [role="switch"], summary {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}

/* Đầu hộp thoại có thêm điều khiển (chọn kỳ thanh toán): trên màn hẹp, tiêu đề
   giữ nguyên một dòng rồi điều khiển xuống hàng dưới, thay vì cùng chen một hàng
   khiến tiêu đề bị ép thành cột chữ dọc. */
@media (max-width: 560px) {
  /* Nút đóng rời khỏi dòng chữ, bám mép trên bên phải của hộp thoại; tiêu đề
     được chừa sẵn chỗ nên không bao giờ chạy xuống dưới nút. */
  .modal__head { flex-wrap: wrap; row-gap: var(--sp-3); padding-right: calc(var(--sp-4) + 48px); }
  .modal__head [data-close-modal] { position: absolute; top: var(--sp-4); right: var(--sp-4); }
  .modal__head > :first-child { flex: 1 1 100%; }
  .modal__head-tools { flex: 1 1 100%; }
  .modal__head-tools .segmented { flex: 1; }
  .modal__head-tools .segmented__option { flex: 1; padding: 6px 10px; }
}

/* Thanh trên cùng trên điện thoại: giữ lại những nút dùng nhiều nhất.
   "Tổ chức" và "Hỗ trợ" vẫn mở được từ menu tài khoản ngay bên cạnh. */
@media (max-width: 560px) {
  .topbar #teamBtn,
  .topbar #helpBtn { display: none; }
  .topbar { gap: 6px; }
  .topbar #upgradeBtnTop { padding: 0 12px; }
}

/* Mục lục hướng dẫn dạng thẻ bấm: cao đủ cho ngón tay khi cuộn ngang. */
@media (max-width: 900px) {
  .guide-toc a { display: flex; align-items: center; min-height: 44px; }
}

/* Điện thoại xoay ngang: màn chỉ còn khoảng 390px chiều cao.
   Cho cả thanh bên cuộn — nếu chỉ để danh sách hội thoại cuộn, nó bị ép xuống
   còn vài chục pixel giữa khối thương hiệu và khối hạn mức, không đọc được gì. */
@media (max-height: 520px) and (orientation: landscape) {
  .rail { overflow-y: auto; }
  .rail__scroll { flex: 0 0 auto; overflow: visible; }
  .canvas { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  .composer-note { display: none; }
  .welcome { padding-top: var(--sp-4); }
}

@media print {
  .rail, .composer-dock, .topbar__actions, .toast-stack, .aurora, .site-header, .lens-demo { display: none !important; }
  .app-shell { grid-template-columns: 1fr; }
  .canvas { padding: 0; overflow: visible; }
  .answer { box-shadow: none; border: 1px solid #ccc; }
}

/* --- Câu trả lời đang hiện dần -----------------------------------------------
   Bản xem trước trong lúc model viết: cùng kiểu chữ với câu trả lời chính thức để lúc thay vào không
   bị giật; một con trỏ nhỏ ở cuối dòng đang viết (cuối đoạn văn, hoặc cuối gạch đầu dòng sau cùng) cho
   biết chữ còn đang tới. */
.answer__writing { margin-left: auto; font-size: var(--text-xs); color: var(--text-tertiary); }
.answer--streaming .answer__body > :last-child:not(ul, ol)::after,
.answer--streaming .answer__body > :is(ul, ol):last-child > li:last-child::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 2px;
  border-radius: 2px;
  background: var(--jade);
  vertical-align: text-bottom;
  opacity: 0.75;
}
.answer--streaming .answer__body > table:last-child::after,
.answer--streaming .answer__body > .table-wrap:last-child::after { display: block; margin-top: var(--sp-2); }

/* --- Ô "Gói hiện tại" và nhãn gói ---------------------------------------------
   Mỗi gói một màu, dùng chung cho ô ở cột trái và nhãn trên thanh trên cùng: Miễn phí nhạt, các gói
   trả tiền đậm dần — liếc qua là biết tổ chức đang ở gói nào. */
.plan-card,
.chip--plan {
  --plan-ink: var(--ink);
  --plan-wash: var(--paper-soft);
  --plan-solid: var(--text-tertiary);
}
.plan-card[data-plan="pro"], .chip--plan[data-plan="pro"] { --plan-ink: var(--jade-deep); --plan-wash: var(--jade-wash); --plan-solid: var(--jade); }
.plan-card[data-plan="business"], .chip--plan[data-plan="business"] { --plan-ink: var(--indigo); --plan-wash: var(--indigo-wash); --plan-solid: var(--indigo); }
.plan-card[data-plan="enterprise"], .chip--plan[data-plan="enterprise"] { --plan-ink: var(--amber); --plan-wash: var(--amber-wash); --plan-solid: var(--amber); }

/* Lưới ba cột: vạch màu | chữ | nhãn trạng thái. Nhãn chỉ chiếm hai hàng đầu, để dòng ngày hết hạn
   ở hàng cuối được dùng trọn bề ngang (cột trái hẹp, không thì nó gãy thành ba dòng). */
.plan-card {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-3);
  row-gap: 1px;
  width: 100%;
  margin-bottom: var(--sp-3);
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--plan-wash);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.plan-card:hover:not(:disabled) { border-color: var(--plan-solid); box-shadow: 0 1px 0 var(--hairline); }
.plan-card:focus-visible { outline: 2px solid var(--plan-solid); outline-offset: 2px; }
.plan-card:disabled { cursor: default; }
.plan-card__mark { grid-column: 1; grid-row: 1 / 4; align-self: stretch; border-radius: var(--r-pill); background: var(--plan-solid); }
.plan-card__text { display: contents; }
.plan-card__label { grid-column: 2; grid-row: 1; font-size: var(--text-xs); color: var(--text-tertiary); }
.plan-card__name { grid-column: 2; grid-row: 2; font-size: var(--text-base); font-weight: 700; line-height: 1.25; color: var(--plan-ink); overflow-wrap: anywhere; }
.plan-card__detail { grid-column: 2 / 4; grid-row: 3; font-size: var(--text-xs); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.plan-card__status {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: start;
  padding: 2px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--plan-ink);
  white-space: nowrap;
}
.plan-card[data-state="expiring"] .plan-card__status { border-color: transparent; background: var(--amber-wash); color: var(--amber); }
.plan-card[data-state="lapsed"] .plan-card__status { border-color: transparent; background: var(--lacquer-wash); color: var(--lacquer); }
/* Đã huỷ, còn dùng tới ngày hết hạn: cùng tông hổ phách với "sắp hết hạn" — một việc cần biết, chưa phải lỗi. */
.plan-card[data-state="cancelled"] .plan-card__status { border-color: transparent; background: var(--amber-wash); color: var(--amber); }

/* --- Gói đang dùng (trong hộp thoại gói cước) và hộp thoại huỷ gói ------------------ */
.plan-current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper-soft);
}
.plan-current[hidden] { display: none; }
.plan-current__text { display: grid; gap: 2px; flex: 1 1 280px; min-width: 0; }
.plan-current__name { font-size: var(--text-sm); color: var(--ink); }
.plan-current__detail { font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.plan-current[data-state="cancelled"] .plan-current__detail { color: var(--amber); }
.plan-current[data-state="lapsed"] .plan-current__detail { color: var(--lacquer); }
.plan-current__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.cancel-choices { display: grid; gap: var(--sp-2); }
.cancel-choices[hidden] { display: none; }
/* Mỗi lựa chọn là một nút role="radio": chấm tròn bên trái, tên và hệ quả bên phải. */
.cancel-choice {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  column-gap: var(--sp-3);
  row-gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.cancel-choice::before {
  content: "";
  grid-row: 1 / 3;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  border: 1.5px solid var(--hairline-strong);
  border-radius: 50%;
}
.cancel-choice:hover { border-color: var(--jade); }
.cancel-choice:focus-visible { outline: 2px solid var(--jade); outline-offset: 2px; }
.cancel-choice[aria-checked="true"] { border-color: var(--jade); background: var(--celadon-wash); }
.cancel-choice[aria-checked="true"]::before { border-color: var(--jade); background: radial-gradient(circle, var(--jade) 0 4px, transparent 4.5px); }
.cancel-choice__title { grid-column: 2; font-size: var(--text-sm); font-weight: 600; }
.cancel-choice__text { grid-column: 2; font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cancel-lapsed { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }
.cancel-lapsed[hidden] { display: none; }
.cancel-after__title { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.cancel-after { display: grid; gap: 6px; margin: 0; padding-left: 1.1em; font-size: var(--text-sm); color: var(--text-secondary); }

/* Nhãn gói trên thanh trên cùng: gói trả tiền thành nhãn đặc màu của gói, có chấm tròn đứng đầu. */
.chip--plan[data-plan]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.75; }
.chip--plan[data-plan]:not([data-plan="free"]) { background: var(--plan-solid); color: #fff; }

/* >>> kinh */
/* ==========================================================================
   17. Kính (liquid glass)
   --------------------------------------------------------------------------
   Từ bản 1.15. Hai lớp:

   NỀN — một lớp màu rất nhạt, đứng yên, lấy từ năm màu của logo (xanh dương,
   xanh lá, vàng, đỏ, xám). Nền vẫn sáng; màu chỉ đủ để tấm kính có thứ mà
   nhuộm theo.

   KÍNH — chỉ dùng cho phần "khung" nổi phía trên nội dung: thanh đầu trang,
   thanh bên, thanh trên cùng, ô soạn câu hỏi, hộp thoại, menu, thông báo. Kính
   làm mờ và tăng độ tươi của thứ nằm sau nó, có mép sáng phía trên và viền
   mảnh để tách khỏi nền. Các hiệu ứng chuyển động vẫn ở animations.css; chỗ
   hiệu ứng chạm vào kính được chỉnh ở mục 25 của file đó. Nội dung để đọc (câu trả lời, bảng số liệu, bảng giá)
   vẫn nằm trên nền đặc để con số luôn rõ.

   Ba độ dày:
     --glass-bg        mỏng  — thanh nổi trên nội dung đang cuộn
     --glass-bg-deep   dày   — tấm có nhiều chữ (ô soạn, thanh bên trên điện thoại)
     --glass-bg-solid  gần đặc — menu và hộp thoại nằm TRONG một tấm kính khác:
                       trình duyệt không cho kính lồng nhau nhìn xuyên ra trang,
                       nên các tấm này phải tự đủ đặc để chữ luôn đọc được.

   Trình duyệt không có backdrop-filter, người dùng bật "giảm độ trong suốt"
   hoặc "tăng tương phản": mọi tấm kính thành nền trắng đặc (cuối mục này).
   ========================================================================== */

:root {
  --backdrop: #f5f7fa;
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-deep: rgba(255, 255, 255, 0.76);
  --glass-bg-solid: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-blur: blur(22px) saturate(180%);
  --glass-blur-deep: blur(30px) saturate(170%);
  /* Mép kính: vệt sáng phía trên, viền sáng mảnh quanh tấm, ánh hắt phía dưới */
  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.28);
  --glass-rim: 0 0 0 1px rgba(16, 32, 25, 0.07);
  --glass-shadow: 0 12px 32px -10px rgba(14, 38, 33, 0.18), 0 2px 6px rgba(14, 38, 33, 0.05);
}

/* --- Nền ------------------------------------------------------------------ */

body { background: var(--backdrop); }

.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58rem 38rem at 6% -8%, rgba(73, 139, 237, 0.2), transparent 62%),
    radial-gradient(50rem 36rem at 98% 2%, rgba(52, 164, 94, 0.17), transparent 60%),
    radial-gradient(44rem 34rem at 84% 98%, rgba(249, 194, 26, 0.15), transparent 62%),
    radial-gradient(46rem 34rem at 2% 100%, rgba(232, 75, 57, 0.1), transparent 60%),
    var(--backdrop);
}

/* Trong khu làm việc nền nhạt hơn nữa: chỗ này để đọc số liệu */
body.is-app .aurora { opacity: 0.7; }

.boot { background: var(--backdrop); }
.landing, .auth-screen, .guide { background: transparent; }

/* --- Thanh đầu trang: một viên kính nổi ------------------------------------- */

.site-header {
  top: 8px;
  padding-top: 8px;
  margin-top: -8px;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;              /* khoảng trống quanh viên kính không chặn thao tác với trang */
}
.site-header.is-scrolled { box-shadow: none; }

.site-header__inner {
  position: relative;                /* mốc cho thanh tiến độ đọc ở mép dưới viên kính (animations.css §25) */
  width: min(1180px, calc(100% - 24px));
  height: 56px;
  padding-left: 18px;
  padding-right: 10px;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-rim), var(--glass-shadow);
  pointer-events: auto;
  transition: background 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

/* Đã cuộn: nội dung chạy phía sau viên kính nên kính dày hơn một bậc */
.site-header.is-scrolled .site-header__inner {
  background: var(--glass-bg-deep);
  box-shadow: var(--glass-edge), var(--glass-rim), 0 16px 40px -12px rgba(14, 38, 33, 0.24), 0 2px 6px rgba(14, 38, 33, 0.06);
}

.site-nav::before { border-radius: var(--r-pill); background: rgba(16, 32, 25, 0.07); }
.site-nav a { border-radius: var(--r-pill); }

@media (max-width: 560px) {
  .site-header__inner { width: calc(100% - 16px); padding-left: 12px; padding-right: 6px; }
}

/* Mục lục trang hướng dẫn trên màn hình hẹp: dải kính bám dưới thanh đầu trang */
@media (max-width: 900px) {
  .guide-toc {
    background: var(--glass-bg-deep);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 0 var(--hairline);
  }
}

/* --- Khu làm việc ------------------------------------------------------------ */

.rail {
  border-right-color: rgba(16, 32, 25, 0.07);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-deep);
  -webkit-backdrop-filter: var(--glass-blur-deep);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.6);
}

.topbar {
  border-bottom-color: rgba(16, 32, 25, 0.07);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.55);
}

@media (max-width: 860px) {
  /* Thanh bên trượt ra phủ lên cuộc trò chuyện: kính dày để chữ phía sau không lẫn vào */
  .rail { background: var(--glass-bg-deep); box-shadow: var(--shadow-modal); }
}

.rail-backdrop { background: rgba(20, 32, 44, 0.18); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Chân trang soạn câu hỏi: nội dung cuộn xuống dưới thì mờ dần chứ không bị che bởi một dải trắng */
.composer-dock { background: none; }
.composer-dock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(245, 247, 250, 0.92) 36%, rgba(245, 247, 250, 0));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to top, #000 58%, transparent);
  mask-image: linear-gradient(to top, #000 58%, transparent);
  pointer-events: none;
}

.composer {
  border-color: var(--glass-border);
  border-radius: 26px;
  background: var(--glass-bg-deep);
  backdrop-filter: var(--glass-blur-deep);
  -webkit-backdrop-filter: var(--glass-blur-deep);
  box-shadow: var(--glass-edge), var(--glass-rim), 0 16px 40px -12px rgba(14, 38, 33, 0.22), 0 2px 6px rgba(14, 38, 33, 0.05);
}

.composer:focus-within {
  border-color: var(--glass-border);
  box-shadow: var(--glass-edge), var(--glass-rim), 0 0 0 5px rgba(14, 122, 87, 0.08), 0 16px 40px -12px rgba(14, 38, 33, 0.22);
}

.composer__attach { background: rgba(255, 255, 255, 0.7); }
.bubble-user { background: rgba(16, 32, 25, 0.07); }

/* --- Menu và bảng nổi ---------------------------------------------------------- */

.account-menu,
.notify,
.task-menu {
  border-color: var(--glass-border);
  background: var(--glass-bg-solid);
  backdrop-filter: var(--glass-blur-deep);
  -webkit-backdrop-filter: var(--glass-blur-deep);
  box-shadow: var(--glass-edge), var(--glass-rim), var(--shadow-float);
}

.toast {
  border-color: var(--glass-border);
  background: var(--glass-bg-solid);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-rim), var(--shadow-float);
}

/* --- Hộp thoại ------------------------------------------------------------------ */

.overlay {
  background: rgba(20, 32, 44, 0.2);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.modal {
  border-color: var(--glass-border);
  background: var(--glass-bg-solid);
  box-shadow: var(--glass-edge), var(--shadow-modal);
}

.drop-overlay {
  background: rgba(245, 247, 250, 0.5);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.drop-panel {
  background: var(--glass-bg-solid);
  box-shadow: var(--glass-edge), var(--shadow-modal);
}

/* --- Hỗ trợ ---------------------------------------------------------------------- */

.support-launcher {
  background: var(--jade);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 12px 28px -8px rgba(11, 125, 86, 0.5), 0 2px 6px rgba(14, 38, 33, 0.12);
}

.support-panel {
  border-color: var(--glass-border);
  background: var(--glass-bg-solid);
  backdrop-filter: var(--glass-blur-deep);
  -webkit-backdrop-filter: var(--glass-blur-deep);
  box-shadow: var(--glass-edge), var(--shadow-modal);
}

.support-panel__head { background: linear-gradient(180deg, rgba(232, 244, 238, 0.75), rgba(255, 255, 255, 0)); }

.support-nudge {
  background: var(--glass-bg-solid);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-rim), var(--shadow-float);
}

/* --- Nút và công tắc --------------------------------------------------------------- */

.btn--primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(14, 38, 33, 0.14), 0 8px 18px -8px rgba(14, 122, 87, 0.5); }
.btn--ghost { border-color: rgba(16, 32, 25, 0.12); background: rgba(255, 255, 255, 0.66); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(14, 38, 33, 0.04); }

/* Rãnh lõm, viên trượt là một hạt kính sáng */
.segmented,
.lang-switch { background: rgba(16, 32, 25, 0.06); box-shadow: inset 0 0 0 1px rgba(16, 32, 25, 0.05), inset 0 1px 2px rgba(16, 32, 25, 0.06); }

.segmented__thumb,
.lang-switch__btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.94); box-shadow: inset 0 1px 0 #ffffff, 0 0 0 1px rgba(16, 32, 25, 0.04), 0 1px 3px rgba(14, 38, 33, 0.16); }

/* --- Trang giới thiệu và trang đăng nhập ---------------------------------------------- */

/* Khung ứng dụng minh hoạ: viền kính quanh một màn hình đặc */
.product { border-color: var(--glass-border); box-shadow: var(--glass-rim), 0 30px 70px -26px rgba(16, 32, 25, 0.3), 0 2px 6px rgba(16, 32, 25, 0.05); }

/* Biểu mẫu đăng nhập / đăng ký nằm trên một tấm kính; chừa chỗ cho hàng nút phía trên tấm */
.auth-main { padding-top: calc(var(--sp-8) + var(--sp-4)); }
.auth-form {
  max-width: 484px;
  padding: clamp(var(--sp-5), 4vw, var(--sp-6));
  border-radius: 28px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--glass-rim), var(--glass-shadow);
}

.auth-form .field__input,
.auth-form .field__select { background-color: rgba(255, 255, 255, 0.6); }

/* --- Khi không dùng được kính ------------------------------------------------------------ */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-bg: rgba(255, 255, 255, 0.94); --glass-bg-deep: rgba(255, 255, 255, 0.97); --glass-bg-solid: #ffffff; }
  .composer-dock::before { background: linear-gradient(to top, var(--backdrop) 60%, rgba(245, 247, 250, 0)); }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --backdrop: #ffffff;
    --glass-bg: #ffffff;
    --glass-bg-deep: #ffffff;
    --glass-bg-solid: #ffffff;
    --glass-border: var(--hairline-strong);
    --glass-blur: none;
    --glass-blur-deep: none;
    --glass-edge: 0 0 0 0 transparent;
    --glass-rim: 0 0 0 1px var(--hairline-strong);
  }
  .aurora { background: #ffffff; }
  .overlay, .drop-overlay, .rail-backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .overlay { background: rgba(20, 32, 44, 0.45); }
  .drop-overlay { background: rgba(255, 255, 255, 0.92); }
  .composer-dock::before { background: linear-gradient(to top, #ffffff 60%, rgba(255, 255, 255, 0)); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

@media print {
  body { background: #ffffff; }
}
/* <<< kinh */