/* ============================================================
   AUTOSALES PRO — NỀN TẢNG GIAO DIỆN
   Bộ token + kiểu gốc. Mọi màn lắp từ đây ra, không màn nào tự bịa màu/phông.
   Hướng nhìn: sạch – sáng – số to rõ – một màu nhấn (gu Revolut / Wise / Techcombank).
   Màu nhấn: XANH DƯƠNG (Vũ chốt 10/09/2026).
   ============================================================ */

:root{
  /* --- Màu --- */
  --nen:        #F2F3F6;   /* nền sau lưng các thẻ */
  --mat:        #FFFFFF;   /* mặt thẻ, thanh trên, thanh dưới */
  --muc:        #101319;   /* chữ chính */
  --muc-2:      #5A6472;   /* chữ phụ (nhãn, mô tả) */
  --muc-3:      #98A0AD;   /* chữ mờ (gợi ý, đơn vị) */
  --ke:         #ECEDF1;   /* đường kẻ mảnh trong thẻ */
  --ke-2:       #E3E5EA;   /* viền thẻ, viền ô nhập */

  --nhan:       #2563EB;   /* màu nhấn — nút chính, mục đang chọn, link */
  --nhan-dam:   #1B45B8;   /* chữ trên nền nhấn-nhạt, trạng thái nhấn */
  --nhan-nhat:  #EEF3FF;   /* nền nhấn nhạt — dòng tổng, pill, ô đang chọn */
  --tren-nhan:  #FFFFFF;   /* chữ/icon trên nút nhấn đặc */

  --tot:        #05A65B;   /* xanh — khuyến mãi, số tiền giảm, trạng thái tốt */
  --tot-nhat:   #E8F6EF;
  --loi:        #DC2626;   /* đỏ — lỗi nhập liệu, hết hạn */
  --loi-nhat:   #FDECEC;
  --canh:       #B26A00;   /* cam — cảnh báo nhẹ (đang dùng thử, sắp hết hạn) */
  --canh-nhat:  #FBEFD9;

  /* --- Bo góc --- */
  --bo-the:     18px;      /* thẻ */
  --bo-nut:     13px;      /* nút */
  --bo-o:       14px;      /* ô nhập, ô tìm kiếm */
  --bo-pill:    999px;

  /* --- Đổ bóng (rất nhẹ, 1 lớp) --- */
  --bong:       0 1px 2px rgba(16,19,25,.04), 0 10px 26px -14px rgba(16,19,25,.14);
  --bong-noi:   0 1px 3px rgba(16,19,25,.08), 0 18px 40px -18px rgba(16,19,25,.20);
  --bong-anh:   0 2px 8px rgba(16,19,25,.07), 0 28px 52px -22px rgba(37,99,235,.35);  /* bóng nổi khối, ánh xanh nhấn — dùng cho ảnh báo giá */

  /* --- Khoảng cách --- */
  --le-man:     16px;      /* lề trái/phải nội dung màn */
  --khe-khoi:   18px;      /* giữa các khối */

  /* --- Chuyển động ---
     --duong-cong: đường cong "lò xo" kiểu iOS (rời nhanh, tới nơi êm) — dùng cho
     mọi transition trong app (chuyển màn, tấm kéo lên...). Đổi CHỈ hình dạng đường
     cong, KHÔNG đổi thời lượng --vua/--nhanh nên không ảnh hưởng timeout dự phòng
     trong khung.js (setTimeout ... 360, ăn theo --vua=.28s). */
  --nhanh:      .16s;
  --vua:        .28s;
  --duong-cong: cubic-bezier(.32,.72,0,1);

  color-scheme: light;
}

/* ---------- Reset gọn ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }

html,body{
  background:var(--nen);
  color:var(--muc);
  font-family:'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;   /* iOS chỉ hiểu bản -webkit- (không có thì chữ tự phóng to khi xoay ngang) */
}
body{ min-height:100dvh; overscroll-behavior-y:none; }

img{ max-width:100%; display:block; }
button{ font-family:inherit; }

/* Số tiền: luôn canh cột đều, bớt giãn chữ cho gọn */
.so{ font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ---------- Thang chữ ---------- */
.chu-tieu-de-man { font-size:17px;   font-weight:700; letter-spacing:-.01em; }
.chu-tieu-de-the { font-size:22px;   font-weight:800; letter-spacing:-.02em; }
.chu-so-lon      { font-size:26px;   font-weight:800; letter-spacing:-.02em; }
.chu-so-tong     { font-size:21px;   font-weight:800; letter-spacing:-.01em; }
.chu-nhan-muc    { font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muc-3); }
.chu-than        { font-size:14px;   font-weight:400; }
.chu-phu         { font-size:12.5px; font-weight:400; color:var(--muc-2); }

/* ---------- Vùng an toàn (tai thỏ / thanh gạt iPhone) ---------- */
.an-toan-tren{ padding-top:env(safe-area-inset-top); }
.an-toan-duoi{ padding-bottom:env(safe-area-inset-bottom); }

/* ---------- Rơi vào lần lượt — cho dòng trong danh sách khi màn vừa mở ----------
   Gắn class "roi-vao" + style="--i:<thứ tự>" vào từng dòng. */
@keyframes roiVao{ from{ opacity:0; transform:translateY(9px); } to{ opacity:1; transform:translateY(0); } }
.roi-vao{ animation:roiVao var(--vua) var(--duong-cong) backwards; animation-delay:calc(var(--i,0) * 35ms); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s !important; transition-duration:.001s !important; }
}