/* =============================================================================
   COMPONENT LÕI — assets/css/components.css
   Chỉ đọc biến từ tokens.css. Không một mã màu, không một cỡ chữ nào viết thẳng.

   Tám component ở đây thay thế cho việc mỗi màn hình tự nối chuỗi HTML của riêng
   nó. Đó là thứ đã sinh ra "37 phần tử ở 8,4px": khi không có chỗ dùng chung,
   mỗi chỗ tự chế lại, và tự chế thì sai mỗi nơi một kiểu.
   ========================================================================== */

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

html,body{
  margin:0;
  min-height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--fs-md);
  line-height:var(--lh-normal);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:transparent}

/* Số tiền LUÔN dùng tabular-nums. Không có nó thì các chữ số rộng khác nhau,
   cột số trong danh sách nhảy tới nhảy lui mỗi khi giá trị đổi.             */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Biểu tượng (ui/icons.js). `display:block` để không dính khoảng trắng dòng
   chữ bên dưới, `flex:0 0 auto` để không bị bóp khi cạnh nó là chữ dài. */
.ic{display:block;flex:0 0 auto}

/* Chỉ hiện cho trình đọc màn hình. */
.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;
}

/* -----------------------------------------------------------------------------
   1. SCREEN — khung một màn hình
   -------------------------------------------------------------------------- */
.c-screen{
  min-height:100vh;
  min-height:100dvh;          /* dvh: thanh địa chỉ trình duyệt di động co giãn */
  display:flex;
  flex-direction:column;
  background:var(--bg);
}
/* Thanh trên trong suốt có làm mờ nền: nội dung cuộn qua vẫn thấy thấp thoáng
   nên người dùng biết mình đang ở giữa trang, không phải đầu trang. Nền đặc
   tuyệt đối làm màn hình trông như bị cắt đôi. */
.c-screen__bar{
  position:sticky;top:0;z-index:20;
  padding:calc(var(--safe-t) + var(--s3)) var(--s4) var(--s3);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
/* Trình duyệt không hiểu color-mix thì quay về nền đặc — vẫn dùng được, chỉ là
   không có hiệu ứng mờ. */
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .c-screen__bar{background:var(--surface)}
}
.c-screen__title{
  margin:0;font-size:var(--fs-lg);font-weight:var(--fw-bold);
  line-height:var(--lh-tight);letter-spacing:-.01em;
}
/* Đường dẫn nhỏ phía trên tiêu đề. Chỉ có nghĩa khi có thanh bên (máy tính) —
   trên điện thoại thanh đáy đã nói người dùng đang ở đâu, thêm dòng này chỉ
   tốn chiều cao. */
.c-screen__crumb{display:none;font-size:var(--fs-xs);color:var(--text-3);line-height:1.3}
.c-screen__body{
  flex:1;min-height:0;
  padding:var(--s4);
  /* Chừa chỗ cho thanh đáy + vùng an toàn, nếu không thì mục cuối bị che. */
  padding-bottom:calc(var(--s6) + var(--tap) + var(--safe-b) + var(--s4));
}

/* -----------------------------------------------------------------------------
   2. CARD — thẻ
   -------------------------------------------------------------------------- */
.c-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
  overflow:hidden;
}
.c-card--flat{border-color:transparent;background:var(--surface-2);box-shadow:none}
/* Thẻ nổi bật — dùng cho con số quan trọng nhất màn hình (tài sản ròng). */
.c-card--hero{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-color:var(--line);
}
.c-card__head{
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
}
.c-card__title{font-size:var(--fs-sm);font-weight:var(--fw-bold);margin:0}
.c-card__sub{font-size:var(--fs-xs);color:var(--text-3);margin:2px 0 0}
.c-card__body{padding:var(--s4)}
.c-card__body--tight{padding:0 var(--s4)}

/* -----------------------------------------------------------------------------
   3. ROW — một dòng trong danh sách
   Toàn bộ dòng là vùng chạm. Không bao giờ để nút bé xíu bên phải.
   -------------------------------------------------------------------------- */
.c-row{
  display:flex;align-items:center;gap:var(--s3);
  width:100%;
  min-height:var(--tap);
  padding:var(--s3) 0;
  border-bottom:1px solid var(--line);
  text-align:left;
}
.c-row:last-child{border-bottom:0}
.c-row--tap{cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.c-row--tap:active{background:var(--surface-2)}
.c-row__icon{
  flex:0 0 auto;
  width:38px;height:38px;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--surface-2);color:var(--text-2);
}
/* Nền icon nhuộm nhẹ theo ngữ nghĩa của dòng. Đây là tín hiệu thu/chi đọc được
   bằng ĐUÔI MẮT, trước cả khi kịp đọc con số bên phải. */
.c-row__icon--up{background:var(--up-soft);color:var(--up)}
.c-row__icon--down{background:var(--down-soft);color:var(--down)}
.c-row__icon--accent{background:var(--accent-soft);color:var(--accent)}
.c-row__icon--warn{background:var(--warn-soft);color:var(--warn)}
/* `display:block` KHÔNG được thiếu ở năm luật dưới đây.

   Component `Row` dựng bằng <span>, mà span mặc định là inline: tiêu đề và
   dòng phụ chảy vào nhau thành "VietcombankVí", và `text-overflow:ellipsis`
   cũng không có tác dụng vì nó cần một hộp khối. Lỗi này hiện ra ở ảnh chụp
   28/08 — nhìn như dữ liệu bị dính, nhưng thật ra là một thuộc tính bị thiếu.

   Đặt ở CSS chứ không đổi <span> thành <p> trong components.js: <p> nằm trong
   <button> (dòng bấm được) là HTML không hợp lệ, trình duyệt sẽ tự tách thẻ và
   phá vỡ bố cục. */
.c-row__main{flex:1;min-width:0;display:block}
.c-row__title{
  display:block;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);
  margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.c-row__sub{display:block;font-size:var(--fs-xs);color:var(--text-3);margin:2px 0 0}
.c-row__end{flex:0 0 auto;text-align:right;display:block}
.c-row__value{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold);margin:0}
.c-row__note{display:block;font-size:var(--fs-xs);color:var(--text-3);margin:2px 0 0}

/* Luật 2: xanh CHỈ cho tiền vào, đỏ CHỈ cho tiền ra. */
.is-up{color:var(--up)}
.is-down{color:var(--down)}
.is-muted{color:var(--text-3)}
/* Hổ phách = điều kiện đang chặn, hạn sắp tới, số liệu cần xem lại.
   KHÔNG dùng --down cho những thứ đó: luật 2 giữ đỏ cho tiền ra và lỗ. */
.is-warn{color:var(--warn)}

/* -----------------------------------------------------------------------------
   4. STAT — ô thống kê
   -------------------------------------------------------------------------- */
.c-stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s3);
  min-width:0;
}
.c-stat--flat{background:var(--surface-2);border-color:transparent}
/* Vạch màu mảnh bên trái: phân biệt Vào/Ra/Còn lại mà không phải tô cả con số
   — tô hết ba ô thì không ô nào nổi, và màu mất luôn nghĩa. */
.c-stat--vach{border-left:3px solid var(--line-strong);border-radius:0 var(--r-md) var(--r-md) 0}
.c-stat--vach.t-up{border-left-color:var(--up)}
.c-stat--vach.t-down{border-left-color:var(--down)}
.c-stat--vach.t-accent{border-left-color:var(--accent)}
.c-stat__label{
  font-size:var(--fs-xs);color:var(--text-3);
  margin:0 0 var(--s1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.c-stat__value{
  font-size:var(--fs-xl);font-weight:var(--fw-bold);
  line-height:var(--lh-tight);
  margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.c-stat__value--lg{font-size:var(--fs-2xl)}
.c-stat__note{font-size:var(--fs-xs);color:var(--text-3);margin:var(--s1) 0 0}
.c-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--s2)}

/* -----------------------------------------------------------------------------
   5. CHIP — nhãn trạng thái và bộ lọc
   -------------------------------------------------------------------------- */
.c-chip{
  display:inline-flex;align-items:center;gap:var(--s1);
  padding:var(--s1) var(--s2);
  border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:var(--fw-bold);
  background:var(--surface-2);color:var(--text-2);
  white-space:nowrap;
}
.c-chip--up{background:var(--up-soft);color:var(--up)}
.c-chip--down{background:var(--down-soft);color:var(--down)}
.c-chip--warn{background:var(--warn-soft);color:var(--warn)}
.c-chip--info{background:var(--info-soft);color:var(--info)}
.c-chip--accent{background:var(--accent-soft);color:var(--accent)}

/* Hàng chip lọc — cuộn ngang được, nhưng đây là BỘ LỌC, không phải điều hướng.
   Điều hướng chính không bao giờ được cuộn ngang (luật a, mục 2.1 đề xuất).  */
.c-chipbar{
  display:flex;gap:var(--s2);
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
  padding-bottom:2px;
}
.c-chipbar::-webkit-scrollbar{display:none}
.c-chipbar__item{
  flex:0 0 auto;
  min-height:36px;
  padding:var(--s2) var(--s3);
  border-radius:var(--r-pill);
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text-2);
  font-size:var(--fs-sm);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.c-chipbar__item[aria-pressed="true"]{
  background:var(--accent);border-color:var(--accent);
  color:var(--on-accent);font-weight:var(--fw-bold);
}

/* -----------------------------------------------------------------------------
   6. SHEET — bottom sheet
   Mọi thao tác nhập liệu đi đường này, không mở trang mới: không mất ngữ cảnh,
   và kéo xuống là đóng — đúng cách SSI / Binance / Revolut làm.
   -------------------------------------------------------------------------- */
.c-sheet__backdrop{
  position:fixed;inset:0;z-index:60;
  background:var(--overlay);
  display:flex;align-items:flex-end;
  animation:c-fade var(--dur-base) var(--ease);
}
.c-sheet{
  width:100%;max-height:92vh;max-height:92dvh;
  overflow-y:auto;
  background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--s3) var(--s4) calc(var(--s5) + var(--safe-b));
  animation:c-rise var(--dur-base) var(--ease);
}
.c-sheet__grip{
  width:36px;height:4px;border-radius:var(--r-pill);
  background:var(--line-strong);
  margin:0 auto var(--s3);
}
.c-sheet__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  margin-bottom:var(--s4);
}
.c-sheet__title{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-bold)}
@keyframes c-fade{from{opacity:0}to{opacity:1}}
@keyframes c-rise{from{transform:translateY(12%)}to{transform:translateY(0)}}

/* -----------------------------------------------------------------------------
   7. TABBAR — thanh điều hướng đáy
   Tối đa 5 mục. Biểu tượng + nhãn ngắn. Trong tầm ngón cái.
   -------------------------------------------------------------------------- */
.c-tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;
  background:var(--surface);
  border-top:1px solid var(--line);
  padding-bottom:var(--safe-b);
}
.c-tabbar__item{
  min-height:var(--tap);
  padding:var(--s2) var(--s1) calc(var(--s2) + 2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--text-3);
  font-size:var(--fs-xs);
  transition:color var(--dur-fast) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.c-tabbar__item[aria-current="page"]{color:var(--accent);font-weight:var(--fw-bold)}
.c-tabbar__item:active{transform:scale(.94)}
.c-tabbar__icon{display:grid;place-items:center;line-height:1}

/* Nút Ghi ở giữa: viên thuốc đặc màu nhấn. Hành động dùng nhiều nhất phải
   trông KHÁC HẲN bốn mục điều hướng, không chỉ to hơn một chút. */
.c-tabbar__item--primary{color:var(--on-accent);gap:0;justify-content:flex-start;padding-top:var(--s1)}
.c-tabbar__item--primary .c-tabbar__icon{
  width:46px;height:32px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);
  box-shadow:0 2px 8px color-mix(in srgb,var(--accent) 40%,transparent);
}
.c-tabbar__item--primary>span:last-child{color:var(--accent);font-weight:var(--fw-bold);margin-top:3px}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .c-tabbar__item--primary .c-tabbar__icon{box-shadow:var(--shadow-1)}
}

/* -----------------------------------------------------------------------------
   8. EMPTY — khối rỗng
   Là lời mời, không phải lời xin lỗi. Luôn kèm một hành động.
   -------------------------------------------------------------------------- */
.c-empty{
  text-align:center;
  padding:var(--s6) var(--s4);
  color:var(--text-3);
}
.c-empty__icon{display:grid;place-items:center;margin:0 auto var(--s3);color:var(--text-3);opacity:.7}
.c-empty__title{font-size:var(--fs-md);font-weight:var(--fw-bold);color:var(--text-2);margin:0 0 var(--s1)}
.c-empty__desc{font-size:var(--fs-sm);margin:0 0 var(--s4)}

/* -----------------------------------------------------------------------------
   PHỤ TRỢ — nút, ô nhập, FAB, toast
   -------------------------------------------------------------------------- */
.c-btn{
  min-height:var(--tap);
  padding:0 var(--s4);
  border-radius:var(--r-sm);
  border:1px solid var(--line-strong);
  background:var(--surface);
  color:var(--text);
  font-size:var(--fs-sm);font-weight:var(--fw-bold);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.c-btn:active{transform:scale(.98)}
.c-btn--primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.c-btn--up{background:var(--up);border-color:var(--up);color:#fff}
.c-btn--down{background:var(--down);border-color:var(--down);color:#fff}
.c-btn--ghost{border-color:transparent;background:transparent;color:var(--accent)}
.c-btn--block{width:100%}
.c-btn--icon{width:var(--tap);padding:0;border-color:transparent;background:transparent;color:var(--text-2)}
.c-btn:disabled{opacity:.45;cursor:not-allowed}

.c-field{display:block;margin-bottom:var(--s3)}
.c-field__label{
  display:block;
  font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-2);
  margin-bottom:var(--s1);
}
.c-field__input,.c-field__select{
  width:100%;
  min-height:var(--tap);
  padding:0 var(--s3);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface-2);
  outline:0;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.c-field__input:focus,.c-field__select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.c-field__input::placeholder{color:var(--text-3)}
.c-field__hint{font-size:var(--fs-xs);color:var(--text-3);margin:var(--s1) 0 0}
/* Ô nhập tiền: to, đậm, tabular — người dùng phải đọc lại được số vừa gõ. */
.c-field__input--amount{
  font-size:var(--fs-xl);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  min-height:56px;
}

/* Nút nổi. Đặt trên thanh đáy, phía phải — ngón cái phải với tới được. */
.c-fab{
  position:fixed;right:var(--s4);z-index:45;
  bottom:calc(var(--tap) + var(--safe-b) + var(--s4));
  min-height:52px;padding:0 var(--s5);
  border-radius:var(--r-pill);
  box-shadow:var(--shadow-2);
}

.c-toast{
  position:fixed;left:var(--s4);right:var(--s4);z-index:80;
  bottom:calc(var(--tap) + var(--safe-b) + var(--s5) + 52px);
  padding:var(--s3) var(--s4);
  border-radius:var(--r-sm);
  background:var(--text);color:var(--bg);
  font-size:var(--fs-sm);
  box-shadow:var(--shadow-2);
  animation:c-rise var(--dur-base) var(--ease);
}
.c-toast--warn{background:var(--warn);color:#fff}

/* Nhãn nhóm trong danh sách (theo ngày). Dính đỉnh khi cuộn qua. */
.c-daylabel{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);
  padding:var(--s2) 0;
  background:var(--bg);
  font-size:var(--fs-xs);color:var(--text-3);
}

.c-stack>*+*{margin-top:var(--s3)}
.c-stack--lg>*+*{margin-top:var(--s4)}

/* Ba lát cắt tài sản dưới con số lớn. Chấm màu để đọc lướt được cơ cấu mà
   không cần một biểu đồ tròn chiếm nửa màn hình. */
.c-hero-chia{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.c-hero-chia span{
  display:inline-flex;align-items:center;gap:var(--s1);
  font-size:var(--fs-xs);color:var(--text-2);
}
.c-hero-chia b{font-weight:var(--fw-bold);color:var(--text)}
.c-hero-chia i{width:7px;height:7px;border-radius:2px;background:var(--accent)}
.c-hero-chia i.c2{background:var(--up)}
.c-hero-chia i.c3{background:var(--info)}

/* Dải cảnh báo. KHÔNG dùng đỏ — luật 2: đỏ chỉ dành cho tiền ra và giá giảm.
   Một dải đỏ nằm thường trực trên màn hình chính sẽ làm mọi số đỏ khác mất
   trọng lượng. */
.c-canhbao{
  display:flex;gap:var(--s3);
  padding:var(--s3) var(--s4);
  background:var(--warn-soft);
  border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);
  border-radius:var(--r-lg);
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .c-canhbao{border-color:var(--warn)}
}
.c-canhbao__icon{flex:0 0 auto;color:var(--warn);margin-top:1px}
.c-canhbao__tieude{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--warn);margin:0 0 2px}
.c-canhbao__phu{font-size:var(--fs-xs);color:var(--warn);margin:0 0 var(--s3);opacity:.85}

/* -----------------------------------------------------------------------------
   VỎ TERMINAL FOREX

   Chỉ định kiểu cho THANH TRÊN và các trạng thái nạp/lỗi. Phần nội dung
   (`#content`) do module forex cũ tự lo bằng CSS riêng của nó cho tới Chặng 3.
   Vì thế ở đây không có luật nào chạm vào bên trong #content — trộn hai hệ CSS
   là cách chắc chắn nhất để tái lập cuộc chiến độ ưu tiên đã mất công gỡ.
   -------------------------------------------------------------------------- */
.fx-host{min-height:100vh;min-height:100dvh;background:var(--bg)}
.fx-host__bar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:var(--s2);
  padding:calc(var(--safe-t) + var(--s2)) var(--s3) var(--s2);
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.fx-host__title{flex:1;min-width:0;line-height:1.25}
.fx-host__title b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.fx-host__title span{display:block;font-size:var(--fs-xs);color:var(--text-3)}
.fx-host__trang-thai{padding:var(--s6) var(--s4);text-align:center}
.fx-host__trang-thai p{margin:0 0 var(--s2);font-size:var(--fs-md)}
.fx-host__phu{font-size:var(--fs-sm)!important;color:var(--text-3)}
.fx-host__loi{color:var(--down);font-size:var(--fs-sm)!important}

/* -----------------------------------------------------------------------------
   MÁY TÍNH ĐỂ BÀN — nới rộng, KHÔNG đổi cấu trúc.
   Giao diện thiết kế cho điện thoại trước; màn hình lớn chỉ là cùng bố cục có
   thêm chỗ thở. Đây là lý do không cần một file HTML riêng cho điện thoại.
   -------------------------------------------------------------------------- */
@media (min-width:760px) and (max-width:1023px){
  .c-screen__body{max-width:720px;margin:0 auto;width:100%;padding:var(--s5)}
  .c-screen__bar{padding:var(--s4) var(--s5)}
  .c-tabbar{max-width:720px;margin:0 auto;border-radius:var(--r-lg) var(--r-lg) 0 0}
  .c-fab{right:calc(50vw - 360px + var(--s4))}
}
@media (min-width:760px){
  .c-sheet{max-width:520px;margin:0 auto;border-radius:var(--r-lg)}
  .c-sheet__backdrop{align-items:center;padding:var(--s5)}
}

/* =============================================================================
   ===  BỔ SUNG 28/08/2026  ====================================================

   Năm component 9–13 dưới đây KHÔNG phải thứ mới nghĩ ra. Chúng đã chạy tốt
   trong `assets/css/terminal.css` dưới tiền tố `.fxt__`, nhưng bị khoá trong
   đó nên phần gia đình không dùng được và phải tự chế lại — đó chính là lý do
   các màn ngoài terminal trông nhạt hơn hẳn terminal.

   Đưa chúng ra đây là để CẢ APP nói cùng một ngôn ngữ:
     9.  .m-plan  ← .fxt__plan   thẻ quyết định, vạch màu 3px bên trái
     10. .m-muc   ← .fxt__muc    ba ô số có nhãn
     11. .m-so    ← .fxt__so     hàng số phụ
     12. .m-gap   ← .fxt__gap    khối gập sẵn có số đếm
     13. .m-dong  ← .fxt__dong   dòng nhãn–giá trị

   `terminal.css` GIỮ NGUYÊN các luật .fxt__ của nó, không xoá, không trỏ sang
   đây. Lý do: forex nạp theo yêu cầu và có thứ tự chèn <head> riêng; nối hai hệ
   vào nhau là cách chắc chắn nhất để tái lập cuộc chiến độ ưu tiên đã mất công
   gỡ. Hai bộ luật giống nhau nhưng độc lập — chấp nhận một ít trùng lặp để đổi
   lấy sự cách ly.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   9. PLAN — THẺ QUYẾT ĐỊNH

   Trả lời đúng MỘT câu, rồi mới đến số, rồi mới đến lý do. Vạch màu 3px bên
   trái thay cho thẻ tô kín: đọc được bằng đuôi mắt mà không hét vào mặt người
   dùng, và ba thẻ cạnh nhau vẫn phân biệt được — tô kín thì không.
   -------------------------------------------------------------------------- */
.m-plan{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--text-3);
  border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--s3);
}
.m-plan--up{border-left-color:var(--up)}
.m-plan--down{border-left-color:var(--down)}
.m-plan--warn{border-left-color:var(--warn)}
.m-plan--accent{border-left-color:var(--accent)}
.m-plan__head{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s1)}
.m-plan__head b{font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.01em}
.m-plan--up .m-plan__head{color:var(--up)}
.m-plan--down .m-plan__head{color:var(--down)}
.m-plan--warn .m-plan__head{color:var(--warn)}
.m-plan--accent .m-plan__head{color:var(--accent)}
/* Ghi chú phụ ở mép phải tiêu đề — pha sóng, thời điểm cập nhật… */
.m-plan__meta{margin-left:auto;font-size:var(--fs-xs);font-weight:var(--fw-normal);color:var(--text-3)}
.m-plan__why{margin:0 0 var(--s3);font-size:var(--fs-sm);color:var(--text-2);line-height:1.45}
.m-plan__why:last-child{margin-bottom:0}

/* -----------------------------------------------------------------------------
   10. MUC — ba ô số có nhãn (Vào/Dừng/Đích · Vào/Ra/Còn lại)
   -------------------------------------------------------------------------- */
.m-muc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.m-muc>div{background:var(--surface-2);border-radius:var(--r-sm);padding:var(--s2);min-width:0}
.m-muc__label{display:block;font-size:var(--fs-xs);color:var(--text-3)}
.m-muc__value{
  display:block;margin-top:2px;
  font-size:var(--fs-sm);font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.m-muc .t-accent .m-muc__value{color:var(--accent)}
.m-muc .t-down .m-muc__value{color:var(--down)}
.m-muc .t-up .m-muc__value{color:var(--up)}

/* -----------------------------------------------------------------------------
   11. SO — hàng số phụ

   Nhãn xám, giá trị đậm, ngăn nhau bằng KHOẢNG TRẮNG chứ không phải gạch dọc.
   Gạch dọc làm hàng trông như một cái bảng và mắt phải dừng lại nhiều lần.
   -------------------------------------------------------------------------- */
.m-so{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);
  margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--text-3);
}
.m-so--plain{margin:0;padding:0;border-top:0}
.m-so b{color:var(--text);font-variant-numeric:tabular-nums}

/* -----------------------------------------------------------------------------
   12. GAP — khối bằng chứng gập sẵn

   Dùng <details> GỐC, không tự dựng bằng JS: mở/đóng chạy được cả khi JS lỗi,
   và trình đọc màn hình hiểu ngay mà không cần một thuộc tính aria nào.

   Số đếm ở mép phải chuyển hổ phách khi đó là ĐIỀU KIỆN ĐANG CHẶN — không phải
   đỏ, vì đỏ đã có nhiệm vụ khác (luật 2).
   -------------------------------------------------------------------------- */
.m-gap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.m-gap+.m-gap{margin-top:var(--s2)}
.m-gap>summary{
  display:flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s3);
  font-size:var(--fs-sm);color:var(--text-2);
  cursor:pointer;list-style:none;
}
.m-gap>summary::-webkit-details-marker{display:none}
.m-gap>summary:hover{background:var(--surface-2)}
.m-gap>summary .ic{transition:transform var(--dur-base) var(--ease)}
.m-gap[open]>summary .ic{transform:rotate(90deg)}
.m-gap__dem{margin-left:auto;color:var(--text-3);font-variant-numeric:tabular-nums}
.m-gap__dem--chan{color:var(--warn);font-weight:var(--fw-bold)}
.m-gap__body{padding:0 var(--s3) var(--s2)}

/* -----------------------------------------------------------------------------
   13. DONG — dòng nhãn–giá trị
   -------------------------------------------------------------------------- */
.m-dong{
  display:flex;gap:var(--s2);
  padding:var(--s2) 0;border-top:1px solid var(--line);
  font-size:var(--fs-sm);
}
.m-dong:first-child{border-top:0}
.m-dong__k{color:var(--text-3);flex:1;min-width:0}
.m-dong__v{font-variant-numeric:tabular-nums;text-align:right;flex:0 0 auto}

/* =============================================================================
   14. BẢNG DỮ LIỆU

   Chưa từng có trong repo, vì bản cũ chỉ có màn hình điện thoại. Trên máy tính,
   một danh sách giao dịch dài mà không có bảng thì người dùng phải cuộn gấp ba
   lần để đọc cùng lượng thông tin.

   Dòng 32px, đầu bảng DÍNH, hairline 1px, số căn phải. Không kẻ sọc xen kẽ —
   hairline đã đủ tách dòng, sọc làm bảng ồn và khó đọc số.
   ========================================================================== */
.c-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.c-tbl thead th{
  position:sticky;top:0;z-index:2;background:var(--surface);
  text-align:left;white-space:nowrap;
  font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-3);letter-spacing:.02em;
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--line-strong);
}
.c-tbl td{padding:7px var(--s3);border-bottom:1px solid var(--line);vertical-align:middle}
.c-tbl tbody tr:last-child td{border-bottom:0}
.c-tbl tbody tr:hover{background:var(--surface-2)}
.c-tbl .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.c-tbl .w{width:1%;white-space:nowrap}
.c-tbl small{display:block;font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
/* Dòng đang chờ duyệt: nền hổ phách, KHÔNG phải đỏ. Chờ duyệt và tiền ra là
   hai việc khác nhau; tô cùng màu thì mắt không tách được. */
.c-tbl tr.cho-duyet{background:var(--warn-soft)}
.c-tbl__scroll{overflow:auto}

/* =============================================================================
   15. VỎ MÁY TÍNH — thanh bên, thanh công cụ, thanh trạng thái

   Bốn dải trong vùng chính (thanh trên · THANH CÔNG CỤ · thân · THANH TRẠNG
   THÁI) là thứ phân biệt phần mềm doanh nghiệp với một trang web đẹp. Hai dải
   in hoa luôn ở đúng chỗ, không trôi theo nội dung. Trang web đẹp nhét bộ lọc
   vào giữa nội dung rồi cuộn mất — và đó là lý do nó không dùng để làm việc được.

   Dưới 1024px toàn bộ khối này TẮT và app quay về đúng bản điện thoại đang
   chạy: một cột, thanh đáy 5 mục. Không có nhánh giao diện thứ hai.
   ========================================================================== */
.p-shell{display:contents}
.p-side{display:none}

.p-ws{
  display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;
  padding:var(--s2) var(--s3);min-height:52px;
  border-bottom:1px solid var(--line);
}
.p-ws:hover{background:var(--surface-2)}
.p-ws__logo{
  width:28px;height:28px;border-radius:var(--r-sm);flex:0 0 auto;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;
}
.p-ws__main{flex:1;min-width:0}
/* Cắt một dòng, không xuống hàng. Tên nhà dài làm khối này cao ba dòng và đẩy
   lệch toàn bộ thanh bên — thấy trên ảnh chụp 28/08. */
.p-ws__name,.p-ws__meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-ws__name{font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1.2}
.p-ws__meta{font-size:var(--fs-xs);color:var(--text-3);line-height:1.3}

.p-nav{flex:1;overflow:auto;padding:var(--s2) var(--s2) var(--s4)}
.p-nav__lab{
  font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-3);
  letter-spacing:.06em;text-transform:uppercase;
  padding:var(--s3) var(--s2) var(--s1);
}
.p-nav__item{
  display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;
  min-height:32px;padding:0 var(--s2);border-radius:var(--r-sm);
  color:var(--text-2);font-size:var(--fs-sm);
}
.p-nav__item:hover{background:var(--surface-2);color:var(--text)}
.p-nav__item[aria-current="page"]{background:var(--accent-soft);color:var(--accent);font-weight:var(--fw-bold)}
.p-nav__item .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-nav__dem{font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums}
.p-nav__dem--wr{color:var(--warn);font-weight:var(--fw-bold)}

/* Chấm màu danh tính module trong thanh bên (thêm 29/08/2026).
   6px, đứng giữa biểu tượng và nhãn. Màu lấy từ bảng ánh xạ [data-mod] trong
   tokens.css — chấm không tự biết mình màu gì, nó chỉ đọc --mod. */
.p-nav__cham{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--mod,var(--text-3));
}
/* Mục đang chọn: chấm nhường chỗ cho nền accent-soft đã mang màu module rồi.
   Hai lần cùng một màu cạnh nhau thì cái thứ hai thành nhiễu. */
.p-nav__item[aria-current="page"] .p-nav__cham{background:currentColor;opacity:.55}

.p-me{border-top:1px solid var(--line);padding:var(--s2)}
.p-me__btn{display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;min-height:40px;padding:0 var(--s2);border-radius:var(--r-sm)}
.p-me__btn:hover{background:var(--surface-2)}
.p-me__name{display:block;font-size:var(--fs-sm);line-height:1.2}
.p-me__role{display:block;font-size:var(--fs-xs);color:var(--text-3)}
.p-sync{position:fixed;z-index:42;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:7px;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--text-2);box-shadow:var(--shadow-1);font-size:var(--fs-xs)}
.p-sync i{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--text-3)}.p-sync--synced i{background:var(--up)}.p-sync--syncing i{background:var(--accent);animation:p-sync-pulse 1.1s ease-in-out infinite}.p-sync--offline i,.p-sync--error i{background:var(--warn)}
@keyframes p-sync-pulse{50%{opacity:.35;transform:scale(.78)}}

/* Thanh công cụ và thanh trạng thái — hiện ở MỌI cỡ màn hình, nhưng trên điện
   thoại thanh trạng thái ẩn đi (không đủ chỗ, và số tổng đã có trên thẻ). */
.c-tool{
  display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;flex:0 0 auto;
  padding:var(--s2) var(--s4);min-height:44px;
  background:var(--surface);border-bottom:1px solid var(--line);
}
.c-status{
  display:none;align-items:center;gap:var(--s4);flex-wrap:wrap;flex:0 0 auto;
  height:28px;padding:0 var(--s4);
  background:var(--surface);border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--text-3);font-variant-numeric:tabular-nums;
}
.c-status__cham{width:6px;height:6px;border-radius:50%;background:var(--up);display:block;flex:none}
.c-status b{color:var(--text-2)}

/* Nhãn nhóm nhỏ. Chữ hoa cách chữ — dùng cho tiêu đề khối phụ, không dùng cho
   tiêu đề màn hình. */
.c-lab{
  font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--text-3);
  letter-spacing:.06em;text-transform:uppercase;margin:0 0 var(--s2);
}
/* Thanh tiến trình mảnh. 6px — đủ thấy, không giành chỗ của con số bên cạnh. */
.c-bar{height:6px;border-radius:var(--r-pill);background:var(--surface-3);overflow:hidden}
.c-bar>i{display:block;height:100%;background:var(--accent)}
.c-bar>i.t-up{background:var(--up)}
.c-bar>i.t-warn{background:var(--warn)}

.c-grid{display:grid;gap:var(--s3)}
.c-col{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
/* Điện thoại LUÔN một cột. Lưới nhiều cột chỉ bật từ 1024px — xem cuối file.
   Chia cột trên màn hẹp là cách nhanh nhất để mọi con số bị cắt. */

@media (min-width:1024px){
  .p-shell{display:flex;height:100vh;height:100dvh;overflow:hidden}
  .p-side{
    display:flex;flex-direction:column;
    width:228px;flex:0 0 auto;
    background:var(--surface);border-right:1px solid var(--line);
  }
  .p-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
  .p-sync{right:auto;left:12px;bottom:68px;max-width:204px;box-shadow:none}.p-sync span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Màn hình bên trong vỏ: không còn cao 100vh, mà lấp đầy vùng chính. */
  .c-screen{min-height:0;height:100%}
  .c-screen__bar{
    position:static;min-height:48px;padding:0 var(--s4);
    background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .c-screen__title{font-size:var(--fs-md)}
  .c-screen__crumb{display:block}
  .c-screen__body{flex:1;min-height:0;overflow:auto;padding:var(--s4);padding-bottom:var(--s4)}
  .c-status{display:flex}

  /* Thanh đáy và nút nổi là chuyện của ngón cái. Trên máy tính đã có thanh bên. */
  .c-tabbar{display:none}
  .c-fab{display:none}

  /* Luật 4 (≥44px) sinh ra vì NGÓN TAY. Con trỏ chuột chính xác hơn nhiều, và
     ép 44px cho mọi dòng menu trên máy tính làm mất khoảng tám dòng thông tin
     mỗi màn — đúng thứ khiến giao diện trông thưa như trang giới thiệu.
     Đây là ĐỀ NGHỊ SỬA LUẬT 4: ≥44px ở chế độ cảm ứng, ≥32px ở chế độ con trỏ.
     Ghi rõ ở đây để nó là một quyết định có lý do, không phải một chỗ lách. */
  .c-btn{min-height:32px;padding:0 var(--s3);font-size:var(--fs-xs)}
  .c-btn--icon{width:32px}
  .c-chipbar__item{min-height:30px}
  .m-gap>summary{min-height:36px}

  /* Lưới nhiều cột — chỉ ở màn rộng. */
  .c-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Bố cục chính: nội dung bên trái, cột phụ 320px bên phải. Cột phụ KHÔNG co
     giãn — cột phụ co giãn thì trên màn 1100px nó hẹp lại còn 200px và mọi
     con số trong đó bị cắt. */
  .c-grid--main{grid-template-columns:minmax(0,1fr) 320px;align-items:start}
}
/* Máy tính bảng ngang: đủ chỗ cho hai cột số nhưng chưa đủ cho thanh bên. */
@media (min-width:640px) and (max-width:1023px){
  .c-grid--3,.c-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (pointer:coarse){
  /* Máy tính bảng và máy tính có màn cảm ứng: ngón tay vẫn là ngón tay. */
  .c-btn{min-height:var(--tap);font-size:var(--fs-sm)}
  .c-btn--icon{width:var(--tap)}
  .c-chipbar__item{min-height:36px}
  .m-gap>summary{min-height:var(--tap)}
}

/* =============================================================================
   16. MÀN ĐĂNG NHẬP

   Chia hai nửa có nhiệm vụ khác hẳn nhau:
     · Nửa trái = mặt tiền. Nền tối cố định (bảng --con-*), ba dòng nói sản
       phẩm làm gì, và đường sóng Elliott vẽ chìm ở đáy. Đường sóng không phải
       trang trí — nó là chữ ký của chính sản phẩm này.
     · Nửa phải = công việc. Nền theo chế độ sáng/tối, đúng một hành động chính.

   Nửa trái GIỮ NGUYÊN nền tối ở cả hai chế độ: mặt tiền mà đổi màu theo cài
   đặt máy thì mỗi người nhớ một hình khác nhau.
   ========================================================================== */
.c-auth{min-height:100vh;min-height:100dvh;display:flex;background:var(--surface)}
.c-auth__art{display:none}
.c-auth__form{
  flex:1;width:100%;
  padding:calc(var(--safe-t) + var(--s5)) var(--s4) calc(var(--safe-b) + var(--s5));
  display:flex;flex-direction:column;gap:var(--s3);
  max-width:420px;margin:0 auto;
}
.c-auth__brand{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.c-auth__title{margin:0 0 3px;font-size:var(--fs-lg);font-weight:var(--fw-bold);letter-spacing:-.01em}
.c-auth__sub{font-size:var(--fs-xs);color:var(--text-3)}
.c-auth__or{display:flex;align-items:center;gap:var(--s3);color:var(--text-3);font-size:var(--fs-xs)}
.c-auth__or::before,.c-auth__or::after{content:"";flex:1;height:1px;background:var(--line)}

/* Nút dạng liên kết — "Quên mật khẩu?", "Chưa có tài khoản? Tạo mới".
   Lớp này đã được dùng trong ui/screens/dang-nhap.js nhưng chưa bao giờ có
   luật CSS, nên nó hiện ra như một dòng chữ xám không ai biết bấm được. Bổ
   sung 30/08/2026.

   Là <button> chứ không phải <a>: nó không dẫn đi đâu cả, và một thẻ <a>
   không có href thì trình đọc màn hình bỏ qua. Vùng chạm theo luật 4 —
   44px cảm ứng, 32px con trỏ. */
.c-link{
  display:inline-flex;align-items:center;min-height:var(--tap);
  padding:0;background:transparent;border:0;
  color:var(--accent);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  text-align:left;
}
.c-link:hover{text-decoration:underline}
.c-link:disabled{color:var(--text-3);cursor:default;text-decoration:none}
@media (min-width:900px){ .c-link{min-height:32px} }
.c-auth__who{display:flex;flex-direction:column;gap:var(--s1)}
.c-auth__who button{
  display:flex;align-items:center;gap:var(--s2);width:100%;text-align:left;
  min-height:var(--tap);padding:0 var(--s2);
  border:1px solid transparent;border-radius:var(--r-sm);
}
.c-auth__who button:hover{background:var(--surface-2);border-color:var(--line)}
.c-auth__who b{display:block;font-size:var(--fs-sm);line-height:1.2}
.c-auth__who small{display:block;font-size:var(--fs-xs);color:var(--text-3)}
.c-auth__foot{
  margin-top:auto;display:flex;align-items:center;gap:var(--s2);
  padding-top:var(--s3);border-top:1px solid var(--line);
  font-size:var(--fs-xs);color:var(--text-3);
}
/* Ô nhập đang được chọn phải NHÌN THẤY RÕ — vòng sáng 3px, không chỉ đổi viền
   1px. Trên nền sáng, viền đổi màu 1px gần như không thấy. */
.c-auth .c-field__input:focus{box-shadow:0 0 0 3px var(--accent-soft)}

.c-avatar{
  width:26px;height:26px;border-radius:var(--r-pill);flex:0 0 auto;
  display:grid;place-items:center;
  color:var(--on-accent);font-size:var(--fs-xs);font-weight:var(--fw-bold);
}
.c-avatar--lg{width:40px;height:40px;font-size:var(--fs-sm)}
.c-avatar--1{background:var(--c1)} .c-avatar--2{background:var(--c3)}
.c-avatar--3{background:var(--c2)} .c-avatar--4{background:var(--c4)}

@media (min-width:900px){
  .c-auth__art{
    display:flex;flex-direction:column;flex:1;min-width:0;position:relative;overflow:hidden;
    background:var(--con-bg);color:var(--con-text);
    padding:var(--s6) var(--s6) var(--s5);
  }
  .c-auth__art::before{
    content:"";position:absolute;left:-120px;top:-160px;width:520px;height:420px;
    background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent);
    pointer-events:none;
  }
  /* KHÔNG dùng justify-content:center ở đây. `.c-auth__foot` có margin-top:auto
     để bám đáy, và margin auto thắng căn giữa — kết quả là nội dung dính đỉnh
     còn giữa màn hình là một khoảng trống lớn (thấy trên ảnh chụp 28/08).
     Xếp từ trên xuống, chân bám đáy: đúng cách mọi màn đăng nhập thật làm. */
  .c-auth__form{flex:0 0 420px;max-width:none;margin:0;padding:var(--s6) var(--s5) var(--s5)}
  .c-auth__brand{display:none}
}
@supports not (background:color-mix(in srgb,red 50%,transparent)){
  .c-auth__art::before{display:none}
}
.c-auth__say{position:relative;z-index:1;margin:var(--s6) 0 var(--s5);max-width:460px}
.c-auth__say h2{margin:0 0 var(--s3);font-size:var(--fs-2xl);line-height:1.2;letter-spacing:-.02em;font-weight:var(--fw-bold)}
.c-auth__say p{margin:0;font-size:var(--fs-sm);color:var(--con-text-2);line-height:var(--lh-normal)}
.c-auth__list{position:relative;z-index:1;max-width:460px;border-top:1px solid var(--con-line)}
.c-auth__list>div{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) 0;border-bottom:1px solid var(--con-line)}
.c-auth__tile{width:30px;height:30px;border-radius:var(--r-sm);flex:0 0 auto;background:var(--con-bg-2);color:var(--con-text);display:grid;place-items:center}
.c-auth__list b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.c-auth__list small{display:block;font-size:var(--fs-xs);color:var(--con-text-2);margin-top:1px}
.c-auth__wave{position:absolute;left:0;right:0;bottom:64px;height:180px;opacity:.55;pointer-events:none}
.c-auth__trust{
  position:relative;z-index:1;margin-top:auto;
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);
  font-size:var(--fs-xs);color:var(--con-text-2);
}
.c-auth__trust span{display:inline-flex;align-items:center;gap:5px}
.c-auth__brandlogo{
  width:34px;height:34px;border-radius:var(--r-sm);flex:0 0 auto;
  background:var(--accent);color:var(--on-accent);display:grid;place-items:center;
}

/* =============================================================================
   17. CÔNG TẮC SÁNG / TỐI
   ========================================================================== */
/* =============================================================================
   18. GIA PHẢ

   Cây vẽ HOÀN TOÀN bằng SVG, kể cả thẻ người: nếu thẻ là HTML còn đường nối là
   SVG thì hai lớp phải khớp toạ độ, và chúng sẽ lệch ngay khi đổi cỡ chữ hoặc
   người dùng phóng to trang. Một lớp thì không có gì để lệch.
   ========================================================================== */
.gp-khung{
  overflow:auto;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  max-height:60vh;
}
.gp-cay{display:block;min-width:100%}
.gp-o{cursor:pointer}
.gp-o:hover .gp-nen{stroke:var(--line-strong)}
.gp-o:focus{outline:none}
.gp-o:focus-visible .gp-nen{stroke:var(--accent);stroke-width:2}
.gp-chu{
  display:flex;align-items:center;gap:var(--s1) var(--s4);flex-wrap:wrap;
  padding:var(--s2) var(--s3);
  font-size:var(--fs-xs);color:var(--text-2);
}
.gp-chu span{display:inline-flex;align-items:center;gap:5px}
.gp-vach{width:3px;height:12px;border-radius:2px;background:var(--text-3);display:block}
.gp-vach--song{background:var(--up)}
.gp-cham{width:9px;height:9px;border-radius:50%;display:block;background:var(--text-3)}
.gp-cham--nam{background:var(--gp-nam)}
.gp-cham--nu{background:var(--gp-nu)}
.gp-cham--noi{background:var(--gp-noi)}
.gp-cham--ngoai{background:var(--gp-ngoai)}
.gp-actions{display:flex;align-items:center;gap:var(--s1)}
.gp-actions .c-btn,.gp-action{min-height:32px;padding:0 var(--s2)}
.gp-ho-so-anh{display:flex;justify-content:center;padding:var(--s3);border-bottom:1px solid var(--line)}
.gp-ho-so-anh img{width:92px;height:92px;object-fit:cover;border-radius:50%;border:3px solid var(--surface-3)}
.gp-avatar-editor{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.gp-avatar-editor>img,.gp-avatar-editor>span{
  width:64px;height:64px;border-radius:50%;object-fit:cover;display:grid;place-items:center;
  background:var(--surface-2);color:var(--text-3);border:1px solid var(--line)
}
.gp-file-btn{display:inline-flex;width:fit-content;gap:var(--s2)}
.gp-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1)}
.gp-gallery img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-sm);background:var(--surface-2)}
.gp-gallery--edit{margin:calc(-1 * var(--s2)) 0 var(--s4)}
.gp-gallery--edit button{position:relative;border:0;background:none;padding:0;cursor:pointer}
.gp-gallery--edit button span{
  position:absolute;right:4px;top:4px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--overlay);color:var(--on-accent);font-size:var(--fs-lg)
}
.gp-empty-copy,.gp-legacy-note{margin:0;color:var(--text-2);font-size:var(--fs-sm);line-height:var(--lh-normal)}
.gp-doc-list{display:grid;margin-top:var(--s3);border-top:1px solid var(--line)}
.gp-doc{
  display:flex;align-items:center;gap:var(--s2);min-height:var(--tap);padding:var(--s2) 0;
  color:var(--text);text-decoration:none;border-bottom:1px solid var(--line)
}
.gp-doc:last-child{border-bottom:0}.gp-doc span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gp-doc small{color:var(--text-3)}.gp-doc button{width:var(--tap);height:var(--tap);color:var(--text-2)}
.gp-doc-list--edit{margin-bottom:var(--s3)}
.gp-moc-value{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--s2);flex-wrap:wrap}
.gp-moc-value>span{color:var(--text-2)}
.gp-moc-value button{min-height:32px;color:var(--accent);font-size:var(--fs-xs)}
.c-form-error{margin:var(--s2) 0;color:var(--warn);font-size:var(--fs-sm);line-height:var(--lh-normal)}
.c-theme-toggle{border:1px solid var(--line);background:var(--surface);color:var(--text-2)}
@media (pointer:coarse){.gp-actions .c-btn,.gp-action,.gp-moc-value button{min-height:var(--tap)}}

/* =============================================================================
   20. TRUNG TÂM MODULE (màn Thêm, chỉ trên điện thoại)

   Lưới thẻ có biểu tượng, KHÔNG phải danh sách chữ. Danh sách chữ dài đọc chậm
   hơn hẳn: mắt phải đọc từng dòng thay vì nhận ra hình. Đây là chỗ chứa mọi
   thứ không lọt vào năm tab đáy, nên nó phải quét được trong một giây.
   ========================================================================== */
.tt-luoi{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);padding:var(--s3)}
.tt-o{
  display:flex;flex-direction:column;gap:2px;text-align:left;
  padding:var(--s3);min-height:var(--tap);
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--surface);
}
.tt-o:active{background:var(--surface-2)}
.tt-ic{
  width:34px;height:34px;border-radius:var(--r-sm);margin-bottom:var(--s1);
  display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);
}
.tt-o b{font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.tt-o small{font-size:var(--fs-xs);color:var(--text-3)}

/* =============================================================================
   19. KHOẢNH KHẮC

   Lưới ảnh dùng `aspect-ratio` chứ không phải chiều cao cố định: ảnh dọc và
   ảnh ngang phải cùng một ô vuông, nếu không lưới sẽ răng cưa. `object-fit`
   cắt phần thừa thay vì bóp méo mặt người.
   ========================================================================== */
.kk-luoi{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:var(--s2);
}
@media (min-width:1024px){ .kk-luoi{grid-template-columns:repeat(5,1fr)} }
.kk-o{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:var(--r-sm);background:var(--surface-2);
}
.kk-go{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative}
.kk-go::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 2px transparent;transition:box-shadow var(--dur-fast) var(--ease);
}
.kk-go:hover::after{box-shadow:inset 0 0 0 2px var(--down)}

/* Bố cục ảnh trong một khoảnh khắc: một tấm chiếm hết, hai tấm chia đôi, từ ba
   tấm trở lên thì tấm đầu lớn và phần còn lại xếp cột bên phải — mắt cần một
   điểm dừng, ba ô bằng nhau thì không có điểm nào. */
.kk-anh{display:grid;gap:3px}
.kk-anh img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--r-sm);background:var(--surface-2)}
.kk-anh--1{grid-template-columns:1fr}
.kk-anh--1 img{aspect-ratio:4/3}
.kk-anh--2{grid-template-columns:1fr 1fr}
.kk-anh--2 img{aspect-ratio:1}
.kk-anh--3{grid-template-columns:2fr 1fr;grid-auto-rows:1fr}
.kk-anh--3 img{aspect-ratio:auto;min-height:0}
.kk-anh--3 img:first-child{grid-row:span 2;aspect-ratio:4/3}
.kk-chon{background:var(--accent);color:var(--on-accent);font-weight:var(--fw-bold)}

/* Cùng một dữ liệu, hai cách bày: bảng trên máy tính, danh sách trên điện
   thoại. Bảng thu nhỏ xuống 390px là bảng không đọc được — thu nhỏ chữ để vừa
   là cách nhanh nhất quay lại "37 phần tử ở 8,4px". */
/* =============================================================================
   MODULE NHÀ TRỌ (thêm 29/08/2026)
   Đặc tả: 06_MODULE_NHA_TRO.md
   ========================================================================== */

/* Phiếu thu: số tiền bên trái, mã QR bên phải. Trên điện thoại QR xuống dưới
   nhưng vẫn NGAY DƯỚI số tiền — không đẩy nó xuống cuối thẻ. Người thuê mở app
   ra để làm đúng một việc, và mỗi lần cuộn thêm là một chỗ để bỏ cuộc. */
.nt-phieu{display:flex;flex-direction:column;gap:var(--s4)}
.nt-phieu__so{min-width:0}
.nt-phieu__qr{display:flex;flex-direction:column;align-items:center;gap:var(--s2)}
@media (min-width:560px){
  .nt-phieu{flex-direction:row;align-items:flex-start}
  .nt-phieu__so{flex:1}
  .nt-phieu__qr{flex:0 0 auto;width:210px}
}

/* MÃ QR LUÔN ĐEN TRÊN TRẮNG, kể cả ở chế độ tối. Đây là ngoại lệ duy nhất của
   luật "không viết mã màu trong component", và nó có lý do vật lý: máy quét
   đọc bằng tương phản sáng/tối, đảo màu là tỷ lệ đọc được rơi thẳng. Nền trắng
   phải là nền THẬT, không phải var(--surface). */
.nt-qr{
  background:#FFFFFF;padding:var(--s2);border-radius:var(--r-sm);
  border:1px solid var(--line-strong);line-height:0;
}
.nt-qr svg{width:100%;height:auto;display:block}

/* Biểu đồ cột xếp chồng — chi phí theo kỳ, tách theo khoản.
   Bày theo TỪNG KHOẢN chứ không chỉ tổng: tổng tăng thì không biết vì sao,
   thấy cột điện cao gấp rưỡi thì biết ngay phải kiểm tra cái gì. */
.nt-cot{display:flex;align-items:flex-end;gap:var(--s2);min-height:150px;padding-top:var(--s2)}
.nt-cot__mot{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0}
.nt-cot__thanh{
  width:100%;max-width:44px;min-height:6px;
  display:flex;flex-direction:column-reverse;
  border-radius:var(--r-sm);overflow:hidden;background:var(--surface-3);
}
.nt-cot__lop{display:block;min-height:2px}
.nt-cot__nhan{font-size:var(--fs-xs);color:var(--text-3)}
.nt-cot__so{font-size:var(--fs-xs);color:var(--text-2);font-weight:var(--fw-bold)}
.nt-chu{
  display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);
  margin-top:var(--s3);font-size:var(--fs-xs);color:var(--text-3);
}
.nt-chu span{display:inline-flex;align-items:center;gap:5px}
.nt-chu i{width:9px;height:9px;border-radius:2px;display:block}

/* Bảng màu biểu đồ dùng cho cả lớp cột lẫn chú giải. Cố ý KHÔNG có đỏ —
   miếng "Tiền điện" không phải một khoản lỗ. */
.t-c1{background:var(--c1)} .t-c2{background:var(--c2)} .t-c3{background:var(--c3)}
.t-c4{background:var(--c4)} .t-c5{background:var(--c5)} .t-c6{background:var(--c6)}

/* Ô nhập chỉ số công tơ trong bảng — hẹp, số, căn phải. */
/* Luật 4: vùng chạm ≥44px ở chế độ CẢM ỨNG, ≥32px ở chế độ con trỏ. Bảng ghi
   chỉ số có sáu ô nhập mỗi dòng — 44px trên máy tính làm mất ba dòng thông tin
   mỗi màn, mà con trỏ chuột không cần chừng đó. */
.nt-so{
  width:88px;min-height:var(--tap);padding:0 var(--s2);text-align:right;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);
  font-size:var(--fs-sm);font-variant-numeric:tabular-nums;
}
.nt-so:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
@media (min-width:900px){ .nt-so{min-height:32px} }

/* Dòng phiếu đã huỷ — gạch ngang, vẫn hiện. Xoá khỏi danh sách là làm hỏng
   lịch sử, mà lịch sử là thứ duy nhất chứng minh được gì khi có tranh chấp. */
.nt-huy{opacity:.62}
.nt-huy .c-row__title,.nt-huy b{text-decoration:line-through}

.chi-may{display:none}
@media (min-width:1024px){
  .chi-may{display:block}
  .chi-dt{display:none}
}

.c-theme{display:flex;gap:2px;background:var(--surface-2);border-radius:var(--r-sm);padding:2px}
.c-theme button{
  min-height:28px;padding:0 var(--s2);border-radius:4px;
  display:flex;align-items:center;gap:5px;
  font-size:var(--fs-xs);color:var(--text-3);
}
.c-theme button[aria-pressed="true"]{
  background:var(--surface);color:var(--text);font-weight:var(--fw-bold);box-shadow:var(--shadow-1);
}
@media (pointer:coarse){ .c-theme button{min-height:36px} }