/* ==========================================================================
   Will House Studio — hệ thiết kế
   --------------------------------------------------------------------------
   Bảng màu lấy đúng từ bản dựng của 19T Digital (anh Khoa đã duyệt giao diện).
   KHÁC BIỆT: mọi màu là biến CSS, không hardcode. Bản demo có 1.148 class màu
   arbitrary [#hex] rải khắp file — đổi một tông nâu phải sửa tay 180 chỗ.
   Ở đây đổi một dòng.

   Chữ phụ đổi #8d847c -> #6b625b: tông cũ chỉ đạt tương phản 3,46:1, dưới
   chuẩn WCAG AA (4,5:1), mà lại được dùng cho chữ 10-11px.
   ========================================================================== */

:root {
  /* nền và bề mặt */
  --bg:            #fbf8f3;
  --surface:       #fffdfc;
  --surface-2:     #faf5ef;
  --cream:         #f4e8d7;
  --cream-2:       #f1e3d1;

  /* thương hiệu */
  --brand:         #8a5a2b;
  --brand-hover:   #70461f;
  --brand-soft:    #f5ede3;

  /* chữ */
  --ink:           #49301e;
  --ink-2:         #3b281b;
  --muted:         #6b625b;   /* 5,9:1 — đạt AA */

  /* viền và bóng */
  --border:        #e9e1d8;
  --border-strong: #d8cbbb;
  --shadow-sm:     0 1px 2px rgba(72,49,30,.06);
  --shadow:        0 8px 30px rgba(72,49,30,.08);
  --shadow-lg:     0 20px 60px rgba(72,49,30,.16);

  /* trạng thái — 6 màu PHÂN BIỆT ĐƯỢC.
     Bản demo tô "Đã cọc" và "Hoàn thành" cùng màu xanh, nhìn lướt không ra. */
  --st-new:        #6b7280;   /* Mới       — xám  */
  --st-deposited:  #b45309;   /* Đã cọc    — cam  */
  --st-shot:       #7c3aed;   /* Đã chụp   — tím  */
  --st-delivered:  #0369a1;   /* Đã giao   — xanh dương */
  --st-done:       #15803d;   /* Xong      — xanh lá */
  --st-cancelled:  #b91c1c;   /* Huỷ       — đỏ   */
  --warn:          #b45309;
  --warn-bg:       #fef3c7;
  --danger:        #b91c1c;
  --danger-bg:     #fee2e2;
  --ok:            #15803d;
  --ok-bg:         #dcfce7;
  --info-bg:       #dbeafe;   /* xanh dương pastel — khối "3 ngày tới" ở Tổng quan */
  --purple-bg:     #ede9fe;   /* tím pastel — khối "Hậu kỳ đang chờ" ở Tổng quan */

  /* hình khối — 3 mức, không phải 6 như bản demo */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-full: 999px;

  /* nhịp */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --header-h: 56px;
  --tabbar-h: 60px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* BẮT BUỘC. `display: grid` của tác giả thắng `[hidden] { display: none }` của
   trình duyệt, nên .fatal và .modal-host (đều là grid) sẽ HIỆN kể cả khi đã đặt
   thuộc tính hidden — che kín cả app. Đã dính thật khi chạy thử. */
[hidden] { display: none !important; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.25; }
h1 { font-size: 21px; } h2 { font-size: 18px; } h3 { font-size: 16px; }
p  { margin: 0 0 var(--sp-3); }
a  { color: var(--brand); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

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

/* ------------------------------------------------------------------ boot */
.boot { min-height: 100dvh; display: grid; place-items: center; }
.boot-inner { text-align: center; }
.boot-logo { font-weight: 700; letter-spacing: .22em; color: var(--brand); margin-bottom: var(--sp-5); }
.boot-spinner {
  width: 28px; height: 28px; margin: 0 auto var(--sp-3);
  border: 3px solid var(--cream-2); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot-text { color: var(--muted); font-size: 13px; }

.fatal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
         background: var(--bg); padding: var(--sp-5); }
.fatal-box { max-width: 420px; text-align: center; }
.fatal-msg { color: var(--muted); font-size: 13px; word-break: break-word; }
.fatal-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-5); }

/* ------------------------------------------------------------------ layout */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--header-h); flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: rgba(255,253,252,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
  height: calc(var(--header-h) + env(safe-area-inset-top));
}
.topbar-title { font-weight: 700; color: var(--ink); font-size: 16px;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-spacer { flex: 1; }

.content { flex: 1 1 auto; padding: var(--sp-4); padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--sp-6)); }
.content > * + * { margin-top: var(--sp-4); }

/* thanh tab dưới cùng — điều hướng chính trên điện thoại */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: rgba(255,253,252,.96); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  flex: 1; min-height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  text-decoration: none; color: var(--muted); font-size: 11px; font-weight: 500;
}
.tabbar a[aria-current="page"] { color: var(--brand); font-weight: 600; }
.tabbar svg { width: 21px; height: 21px; }

/* thanh bên — chỉ hiện trên màn rộng */
.sidebar { display: none; }

/* ------------------------------------------------------------------ card */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: var(--sp-3); }
.card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card-head h2, .card-head h3 { flex: 1; }

.section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand); margin-bottom: var(--sp-3);
}

/* ------------------------------------------------------------------ button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);       /* 44px = ngưỡng vùng chạm */
  border: 1px solid transparent; border-radius: var(--r);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .18s, border-color .18s, transform .18s;
  white-space: nowrap;
}
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { min-height: 36px; padding: 0 var(--sp-3); font-size: 13px; }
.btn-icon { min-width: 44px; padding: 0; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ------------------------------------------------------------------ form */
.field { display: block; margin-bottom: var(--sp-4); }
.field > .label {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: var(--sp-2);
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: var(--sp-1); }
.field .err  { font-size: 12px; color: var(--danger); margin-top: var(--sp-1); font-weight: 500; }
.req { color: var(--danger); }

input[type=text], input[type=tel], input[type=email], input[type=password],
input[type=date], input[type=time], input[type=number], input[type=search],
select, textarea {
  width: 100%; min-height: 46px; padding: 10px var(--sp-3);
  font: inherit; font-size: 16px;      /* 16px: dưới mức này Safari iOS tự phóng to trang */
  color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r);
}
textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none;
  box-shadow: 0 0 0 3px rgba(138,90,43,.14); }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger); background: #fffafa;
}
.field-row { display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; }

.check { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--brand); }

/* ------------------------------------------------------------------ badge */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid currentColor;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-NEW        { color: var(--st-new); }
.badge-DEPOSITED  { color: var(--st-deposited); }
.badge-SHOT       { color: var(--st-shot); }
.badge-DELIVERED  { color: var(--st-delivered); }
.badge-DONE       { color: var(--st-done); }
.badge-CANCELLED  { color: var(--st-cancelled); }
.badge-plain { border-color: var(--border-strong); color: var(--muted); }
.badge-plain::before { display: none; }

.pill { display:inline-block; padding: 2px 8px; border-radius: var(--r-full);
        font-size: 11px; font-weight: 600; background: var(--cream); color: var(--ink); }
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--r); font-size: 13px; font-weight: 500; }
.alert-warn   { background: var(--warn-bg);   color: #7c2d12; }
.alert-danger { background: var(--danger-bg); color: #7f1d1d; }
.alert-ok     { background: var(--ok-bg);     color: #14532d; }
/* Thông tin trung tính — hướng dẫn, không phải cảnh báo. Dùng tông thương hiệu
   để không làm mọi ô chỉ dẫn trong app trông như đang báo lỗi. */
.alert-info   { background: var(--brand-soft); color: var(--ink); font-weight: 400; }

/* -------------------------------------------------- danh sách: THẺ trên mobile
   Bản demo dùng bảng min-width 940px trong khung cuộn ngang — trên iPhone phải
   cuộn ngang 2,5 màn hình mới thấy cột số điện thoại. Ở đây dưới 900px là thẻ. */
.list { display: flex; flex-direction: column; gap: var(--sp-3); }

.item {
  display: block; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
  box-shadow: var(--shadow-sm); cursor: pointer;
  font: inherit; color: inherit;
  transition: border-color .18s, transform .18s;
}
.item:hover { border-color: var(--border-strong); }
.item:active { transform: scale(.995); }
.item-top  { display: flex; align-items: flex-start; gap: var(--sp-3); }
.item-name { flex: 1; font-size: 16px; font-weight: 700; color: var(--ink); }
.item-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
             color: var(--muted); font-size: 13px; margin-top: var(--sp-1); }
.item-line .sep { opacity: .45; }

/* Ô chọn khách kiểu combobox (màn Booking) — gõ vài ký tự ra gợi ý, thay cho
   một <select> đổ hết cả nghìn khách xuống một cột dài. */
.cust-pick { position: relative; }
.cust-pick-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  max-height: 280px; overflow-y: auto;
}
.cust-pick-item {
  display: block; width: 100%; text-align: left; padding: var(--sp-2) var(--sp-3);
  border: none; border-bottom: 1px solid var(--border); background: var(--surface);
  font: inherit; color: inherit; cursor: pointer;
}
.cust-pick-item:last-child { border-bottom: none; }
.cust-pick-item:hover, .cust-pick-item[aria-selected="true"] { background: var(--brand-soft); }
.cust-pick-empty { padding: var(--sp-3); font-size: 13px; color: var(--muted); }
.item-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }

/* Khối "Giảm giá / phụ thu" + "In thêm" nhúng thẳng trong tab Thông tin. Không
   dùng .card vì nó đã nằm trong một .card rồi — thẻ lồng thẻ nhìn như lỗi. */
.khoi-tien-hang { margin-top: var(--sp-3); }
.khoi-tien-hang + .khoi-tien-hang {
  padding-top: var(--sp-4); border-top: 1px solid var(--border);
}

/* Hàng tên trong thẻ Booking: tên khách · nút "Đã gửi ảnh gốc" · huy hiệu.
   Cho phép xuống dòng, vì ba thứ đó không đủ chỗ trên màn điện thoại — không
   cho xuống dòng thì tên khách bị bóp còn mỗi dòng một chữ (đã dính 12/09). */
.item-top-bk { flex-wrap: wrap; }
.item-top-bk .item-name { flex: 1 1 140px; min-width: 0; }
.btn-hauky { flex: 0 0 auto; white-space: nowrap; }

/* nút gọi / Zalo — phải có ở MỌI chỗ hiện số điện thoại */
.contact-btns { display: flex; gap: var(--sp-2); }
.contact-btns a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 40px; padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong); border-radius: var(--r);
  background: var(--surface); color: var(--ink); text-decoration: none;
  font-size: 13px; font-weight: 600;
}
.contact-btns a:hover { background: var(--cream); }

.empty { text-align: center; padding: var(--sp-10) var(--sp-4); color: var(--muted); }
.empty h3 { color: var(--ink); margin-bottom: var(--sp-2); }

.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.kpi { background: var(--surface); border: 1px solid var(--border);
       border-radius: var(--r-lg); padding: var(--sp-4); }
/* Thẻ KPI bấm được (Tổng quan) — nhảy thẳng tới màn đang đếm số đó, đỡ phải tự
   tìm (anh Khoa chốt 2026-09-21). */
button.kpi { display: block; width: 100%; text-align: left; font: inherit;
             color: inherit; cursor: pointer; transition: border-color .15s; }
button.kpi:hover { border-color: var(--border-strong); }
/* Đường link trong ô cảnh báo (alert) — chữ gạch chân, không có khung nút, để
   nằm gọn trong một dòng văn bản. */
.alert-link { background: none; border: none; padding: 0; margin: 0; color: inherit;
              font: inherit; text-decoration: underline; cursor: pointer; }
.kpi-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.kpi-sub   { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------------------ toast */
.toast-host {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px);
  z-index: 90; display: flex; flex-direction: column; gap: var(--sp-2);
  width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--ink); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r); font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg); animation: toast-in .2s ease;
}
.toast-ok     { background: #14532d; }
.toast-error  { background: #7f1d1d; }
.toast-warn   { background: #78350f; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ------------------------------------------------------------------ modal
   Không dùng alert()/confirm() ở đâu cả — chúng chặn UI và xấu trên PWA.
   White Mood có 43 chỗ gọi alert/confirm; đây là thứ thay thế. */
.modal-host { position: fixed; inset: 0; z-index: 100; display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(59,40,27,.45); backdrop-filter: blur(2px); }
.modal {
  position: relative; margin: auto auto 0; width: 100%;
  max-height: 92dvh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: var(--sp-5); padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
  box-shadow: var(--shadow-lg); animation: sheet-up .22s ease;
}
@keyframes sheet-up { from { transform: translateY(18px); opacity: .6; } }
.modal-head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.modal-head h2 { flex: 1; }
.modal-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.modal-actions .btn { flex: 1; }

/* ------------------------------------------------------------------ bảng (desktop) */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: var(--sp-3); text-align: left; border-bottom: 1px solid var(--border); }
table.data th { font-size: 12px; font-weight: 700; color: var(--muted);
                text-transform: uppercase; letter-spacing: .05em; }
table.data tbody tr:hover { background: var(--surface-2); cursor: pointer; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ lịch */
.cal-head { display: flex; align-items: center; gap: var(--sp-2); }
.cal-day-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.slot {
  display: flex; gap: var(--sp-3); padding: var(--sp-3);
  border-left: 3px solid var(--brand); background: var(--surface);
  border-radius: 0 var(--r) var(--r) 0; border-top: 1px solid var(--border);
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.slot-time { font-weight: 700; color: var(--brand); font-size: 13px;
             min-width: 46px; flex: 0 0 auto; }
/* Thiếu min-width:0 thì ô flex không co xuống dưới bề rộng nội dung, và tên khách
   dài bị ép thành một chữ mỗi dòng trên điện thoại. */
.slot > div:nth-child(2) { min-width: 0; }
.slot .badge { white-space: nowrap; }

/* ------------------------------------------------------------------ kanban */
/* ==========================================================================
   Kanban — xếp theo đúng bản đã chạy ổn của White Mood Bridal
   --------------------------------------------------------------------------
   BA TẦNG touch-action, và THỨ TỰ LÀ BẮT BUỘC (anh Khoa đã dò ra bên kia):

     .kanban      pan-x       — bảng lướt ngang
     .kanban-col  pan-x pan-y — cột cuộn dọc, NHƯNG vẫn phải cho pan-x
     .kanban-card none        — thẻ thuộc về thao tác kéo, KHÔNG được đổi

   touch-action chỉ THU HẸP dần khi đi xuống cây DOM, KHÔNG BAO GIỜ mở lại được.
   Nên nếu cột chỉ khai "pan-y" là nó chặn luôn "pan-x" của bảng cha — lướt ngang
   chỉ còn ăn ở khe hở hẹp giữa hai cột. Phải khai CẢ HAI hướng ở cột.

   ĐÃ THỬ đổi thẻ sang "pan-y" (2026-09-24) để trình duyệt tự cuộn dọc, giải
   quyết vụ lướt trên thẻ bị đứng hình. KẾT QUẢ: kéo thả hỏng hẳn trên điện
   thoại — trình duyệt nuốt mất cú chạm để tự cuộn, JS không còn thấy
   pointermove nữa (anh Khoa báo lại 2026-09-25). Quay về "none". Cuộn dọc tự do
   trên thẻ giờ do JS tự làm (col.scrollTop, xem batDauKeo() trong tasks.js) —
   giữ tay yên ~160ms mới coi là kéo, di chuyển ngay thì thành cuộn, y như
   Trello, nhưng không nhờ trình duyệt phát hiện — TỰ TAY cuộn lấy.

   Bỏ hẳn kiểu "một cột + hàng tab" dưới 900px: đó là sáng chế của em, nó làm
   kéo thả trên điện thoại vô dụng vì chẳng có cột nào khác để thả vào. Giờ điện
   thoại cũng thấy đủ 7 cột, lướt ngang như bên kia.
   ========================================================================== */
.kanban {
  display: flex; gap: var(--sp-3); overflow-x: auto; padding-bottom: 10px;
  touch-action: pan-x;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  scrollbar-width: none; -ms-overflow-style: none;
}
.kanban::-webkit-scrollbar { display: none; }
.kanban-col {
  flex: 0 0 200px;                      /* 200px trên điện thoại, đúng bằng bên kia */
  background: var(--surface-2); border-radius: var(--r-lg); padding: var(--sp-3);
  max-height: 70vh; overflow-y: auto;
  touch-action: pan-x pan-y;
  transition: background-color .12s, border-color .12s;
}
.kanban-col > h3 { font-size: 12px; margin-bottom: var(--sp-2); }
.kanban-card { background: var(--surface); border: 1px solid var(--border);
               border-radius: var(--r); padding: 8px 10px; margin-bottom: var(--sp-2);
               touch-action: none;
               -webkit-user-select: none; user-select: none;
               -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

/* Cột / tab đang được nhắm tới khi kéo thẻ. Trước đây tô bằng style nội tuyến,
   chuyển sang class để lúc dọn chỉ cần bỏ class, không sợ xoá nhầm style khác. */
[data-col].drag-over {
  outline: 2px dashed var(--brand); outline-offset: 2px;
  background: var(--brand-soft);
}
.kanban-card.needs-revision { border-color: var(--warn); border-width: 2px; }
.kanban-card.overdue .deadline { color: var(--danger); font-weight: 700; }



/* ------------------------------------------------------------------ desktop */
/* ==========================================================================
   Concept đã chọn — lưới ảnh đính kèm trong booking
   --------------------------------------------------------------------------
   Khung 3/4 cố định: ảnh studio chụp dọc là chính, để aspect-ratio tự do thì
   lưới nhảy loạn mỗi lần thêm một tấm ngang.
   ========================================================================== */

.concept-grid {
  display: grid; gap: 8px; margin: 0 0 10px;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
}
.concept-item { position: relative; margin: 0; }
.concept-item img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface-2);
}
.concept-item figcaption {
  font-size: 11px; color: var(--muted); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.concept-x {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; line-height: 1; font-size: 17px;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(58, 40, 27, .72); color: #fff;
}
.concept-x:hover { background: var(--danger); }

.concept-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.concept-picker {
  display: grid; gap: 8px; margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  max-height: 52vh; overflow-y: auto;
}
.concept-picker button {
  position: relative; padding: 0; background: none; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden;
}
.concept-picker button[aria-pressed="true"] { border-color: var(--brand); }
.concept-picker button[disabled] { opacity: .45; cursor: default; }
.concept-picker img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.concept-had {
  position: absolute; inset: auto 0 0 0; font-size: 10px; padding: 2px;
  background: rgba(58, 40, 27, .72); color: #fff;
}

/* Ô tích "Nhớ máy này" ở màn đăng nhập.
   Vùng bấm phải đủ to cho ngón tay: nhân viên đăng nhập bằng điện thoại là chính. */
.field-check {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 var(--sp-4); padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-2); cursor: pointer;
}
.field-check:hover { border-color: var(--border-strong); }
.field-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--brand); }
.field-check strong { font-size: 14px; color: var(--ink); }

/* Ô chỉ ĐỌC trong form — giá gói, tổng tiền.
   Cố ý KHÔNG dùng <input disabled>: input xám nhìn như đang hỏng, nhân viên bấm
   vào rồi tưởng máy đơ. Dùng <output> thì rõ ràng là "con số app tính ra". */
.doc-only {
  display: block; padding: 11px 12px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r); font-size: 15px; font-weight: 600; color: var(--ink);
}
.doc-lon { font-size: 20px; color: var(--brand); letter-spacing: -.01em; }

/* Chi tiết gói chụp: mô tả + danh sách quyền lợi.
   Nhân viên đang tư vấn cho khách qua điện thoại cần đọc được ngay gói gồm những
   gì — trước đây màn Gói chụp chỉ ghi "5 quyền lợi", phải bấm Sửa mới xem được. */
.goi-mo-ta {
  margin: 8px 0 0; font-size: 13px; color: var(--muted); font-style: italic;
}
.goi-quyen-loi {
  margin: 8px 0 0; padding: 0; list-style: none;
  display: grid; gap: 4px;
}
.goi-quyen-loi li {
  position: relative; padding-left: 18px; font-size: 13px; color: var(--ink);
}
.goi-quyen-loi li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--brand); font-weight: 700;
}

/* Huy hiệu TÌNH TRẠNG THANH TOÁN — khác huy hiệu trạng thái đơn.
   Nền đặc chứ không chỉ đổi màu chữ, để mắt phân biệt được ngay hai loại:
   trạng thái đơn là chữ màu, tình trạng tiền là nền màu. */
.badge.pay-paid    { background: var(--st-done);      color: #fff; }
.badge.pay-partial { background: var(--st-deposited); color: #fff; }
.badge.pay-none    { background: var(--surface-2);    color: var(--muted); }
.badge.pay-over    { background: var(--danger);       color: #fff; }

/* Cột huy hiệu bên phải — tiền ở trên, trạng thái đơn ở dưới.
   XẾP DỌC chứ không nằm ngang: hai huy hiệu nằm ngang trên điện thoại ăn hết
   bề ngang, tên khách bị ép thành một chữ mỗi dòng (đã vấp 12/09/2026).
   max-width giữ chỗ cho tên; nowrap để chữ trong huy hiệu không tự gãy. */
.badge-cot {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px; flex: 0 0 auto; max-width: 46%;
}
.badge-cot .badge { white-space: nowrap; }

@media (min-width: 900px) {
  .badge-cot { flex-direction: row; align-items: center; max-width: none; }

  .tabbar { display: none; }
  .shell { flex-direction: row; }
  .sidebar {
    display: flex; flex-direction: column; gap: 2px;
    width: 232px; flex: 0 0 232px; padding: var(--sp-4) var(--sp-3);
    background: var(--surface); border-right: 1px solid var(--border);
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
  }
  .sidebar-brand { font-weight: 700; letter-spacing: .18em; color: var(--brand);
                   font-size: 13px; padding: var(--sp-3); margin-bottom: var(--sp-3); }
  .sidebar a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 10px var(--sp-3); border-radius: var(--r);
    text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 500;
  }
  .sidebar a:hover { background: var(--surface-2); }
  .sidebar a[aria-current="page"] { background: var(--cream); color: var(--brand); font-weight: 600; }
  .sidebar svg { width: 18px; height: 18px; }

  .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .content { padding: var(--sp-6); padding-bottom: var(--sp-10); max-width: 1240px; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .kanban-col { flex: 0 0 260px; max-height: 75vh; }
  .modal { margin: auto; max-width: 560px; border-radius: var(--r-lg); }
  .field-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 899px) {
  /* Điện thoại: nút hậu kỳ xuống hẳn một dòng riêng, để tên khách được nguyên
     dòng của nó. */
  .btn-hauky { order: 10; width: 100%; margin-top: var(--sp-2); }

  /* dưới 900px KHÔNG dùng bảng — mọi danh sách render dạng thẻ */
  table.data { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* Không có ngoại lệ nào ghi đè khối này. Bản demo của 19T đặt reduced-motion
     rồi ép lại animation marquee 18s ngay sau đó — vi phạm WCAG 2.2.2. */
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .topbar, .tabbar, .sidebar, .btn { display: none !important; }
  .content { padding: 0; }
}

/* Huy hiệu HẠNG KHÁCH (28/09/2026) — nền đặc, màu ấm của bảng nâu–kem.
   Khách thường không có huy hiệu. */
.badge.badge-hang-VIP        { background: #8a5a2b; border-color: #8a5a2b; color: #fff; }
.badge.badge-hang-VIP::before { content: "★"; width: auto; height: auto; background: none; border-radius: 0; font-size: 11px; }
.badge.badge-hang-THAN_THIET { background: #f3e6d3; border-color: #c9a27a; color: #6b4420; }
.badge.badge-hang-THAN_THIET::before { background: #c9a27a; }

/* HOÁ ĐƠN BÁN HÀNG (29/09/2026) — tờ hoá đơn hiện trên màn hình VÀ là bản in.
   Nền trắng như giấy kể cả khi app ở chế độ tối. Khi in: chỉ in tờ này. */
.hd-giay { background: #fff; color: #1f1a16; border: 1px solid var(--border-strong);
           border-radius: var(--r-lg); padding: 28px 28px 20px; margin: 0 auto var(--sp-4);
           max-width: 820px; font-size: 13px; line-height: 1.45; position: relative;
           box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.hd-giay table { width: 100%; border-collapse: collapse; display: table; }
.hd-giay-dau { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.hd-giay-ten { font-size: 18px; font-weight: 700; letter-spacing: .06em; color: #8a5a2b; }
.hd-giay-tieu-de { text-align: center; font-size: 20px; letter-spacing: .08em; margin: 18px 0 14px; color: #1f1a16; }
.hd-giay-khach td { padding: 3px 6px 3px 0; vertical-align: top; }
.hd-giay-khach td:nth-child(odd) { color: #6b5d52; white-space: nowrap; width: 1%; }
.hd-giay-bang { margin-top: 12px; }
.hd-giay-bang th { background: #f3e6d3; color: #3d2a17; font-weight: 600; padding: 7px 6px; border: 1px solid #d9c3a5; }
.hd-giay-bang td { padding: 7px 6px; border: 1px solid #e3d6c5; vertical-align: top; }
.hd-giay-phu { font-size: 11px; color: #7a6c61; }
.hd-giay-tong { width: auto !important; min-width: 55%; margin: 12px 0 0 auto; }
.hd-giay-tong td { padding: 4px 6px; }
.hd-giay-tong td:last-child { text-align: right; white-space: nowrap; }
.hd-giay-tong-chinh td { font-weight: 700; font-size: 14px; border-top: 1px solid #d9c3a5; }
.hd-giay-phu-dong td { color: #5b4f46; }
.hd-giay-chu { margin: 10px 0 0; }
.hd-giay-ky { display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin-top: 26px; min-height: 90px; }
.hd-giay-ky-ten { margin-top: 48px; font-weight: 600; }
.hd-giay-cam-on { text-align: center; margin: 22px 0 0; font-style: italic; color: #6b5d52; }
.hd-da-huy::after { content: "ĐÃ HUỶ"; position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%) rotate(-18deg);
                    font-size: 64px; font-weight: 800; color: rgba(200,40,40,.18); pointer-events: none; }
.hd-giay-cuon { overflow-x: auto; }
.hd-giay-bang td:nth-child(n+3) { white-space: nowrap; }
@media (max-width: 600px) {
  .hd-giay:not(.hd-giay-anh) { padding: 16px 12px; font-size: 12px; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-tong { min-width: 100%; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-ten { font-size: 15px; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-tieu-de { font-size: 17px; }
  /* Thông tin khách: mỗi hàng 2 cặp -> xếp thành lưới nhãn | giá trị */
  .hd-giay:not(.hd-giay-anh) .hd-giay-khach tr { display: grid; grid-template-columns: 78px 1fr; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-khach td { padding: 2px 0; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-khach td:empty { display: none; }
  /* Bảng món: mỗi món một khối — tên + thành tiền, dưới là SL × đơn giá, giảm */
  .hd-giay:not(.hd-giay-anh) .hd-giay-cuon { overflow: visible; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-bang thead { display: none; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-bang, .hd-giay:not(.hd-giay-anh) .hd-giay-bang tbody { display: block; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-bang tr { display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 8px;
                     border-bottom: 1px solid #e3d6c5; padding: 7px 0; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-bang td { border: 0 !important; padding: 0 !important; text-align: left !important; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-bang td:nth-child(1) { display: none; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-bang td:nth-child(2) { grid-column: 1 / 4; grid-row: 1; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-bang td:nth-child(6) { grid-column: 4; grid-row: 1; text-align: right !important; font-weight: 700; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-bang td:nth-child(3), .hd-giay:not(.hd-giay-anh) .hd-giay-bang td:nth-child(4), .hd-giay:not(.hd-giay-anh) .hd-giay-bang td:nth-child(5) { grid-row: 2; color: #6b5d52; }
  .hd-giay:not(.hd-giay-anh) .hd-giay-bang td[data-nhan]::before { content: attr(data-nhan); }
  .hd-giay:not(.hd-giay-anh) .hd-giay-bang td:nth-child(5) .hd-giay-phu { display: inline; margin-left: 4px; }
}
.hd-giay.hd-chi-in { display: none; }
.hd-xem-truoc .hd-giay { box-shadow: none; margin: 0; }
@media print {
  body:has(.hd-giay) main > :not(.hd-giay) { display: none !important; }
  .hd-giay.hd-chi-in { display: block !important; }
  #modal-host { display: none !important; }
  .hd-giay { border: 0; box-shadow: none; padding: 0; max-width: none; margin: 0; }
  .hd-giay-bang th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================================
   MÀN HOÁ ĐƠN TRÊN APP (29/09/2026) — kiểu máy bán hàng, hiện đại, tự lưu.
   Tờ .hd-giay ở trên chỉ để in / PDF / gửi khách.
   ========================================================================== */
.hd2 { padding-bottom: 84px; }
.hd2-dau { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.hd2-dau-tren { display: flex; gap: 12px; align-items: center; }
.hd2-ngat { display: none; }
.hd2-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
              background: var(--brand); color: #fff; font-weight: 700; font-size: 18px; }
.hd2-ten { font-weight: 700; font-size: 16px; }
.hd2-ten a { color: inherit; text-decoration: none; }
.hd2-so { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; }
.hd2-tong { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1.1; }
.hd2-no { font-size: 18px; font-weight: 700; color: var(--warn); }
.hd2-no-het { color: var(--ok, #2e7d32); }
.hd2-thanh { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin: 10px 0 6px; }
.hd2-thanh span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), #c9a27a); border-radius: 99px; transition: width .3s; }
.hd2-luu { font-size: 12px; }
.hd2-luu-ok { color: var(--muted); } .hd2-luu-cho { color: var(--brand); } .hd2-luu-loi { color: var(--danger); font-weight: 600; }

.hd2-goi-y-ds { display: flex; flex-direction: column; gap: 8px; margin: 0 0 var(--sp-3); }
.hd2-goi-y { text-align: left; border: 1px dashed var(--brand); background: var(--brand-soft); color: var(--ink);
             border-radius: var(--r); padding: 10px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.hd2-goi-y:hover { border-style: solid; }

.hd2-luoi { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: var(--sp-4); align-items: start; }
.hd2-cot-phai { position: sticky; top: 72px; }

.hd2-trong { text-align: center; color: var(--muted); padding: 24px 8px; border: 1px dashed var(--border-strong); border-radius: var(--r); }
.hd2-mon { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; margin-bottom: 8px; background: var(--surface); transition: border-color .15s; }
.hd2-mon:hover, .hd2-mon-mo { border-color: var(--border-strong); }
.hd2-mon-tren { display: flex; gap: 10px; align-items: flex-start; }
.hd2-mon-ten { font-weight: 600; font-size: 14px; }
.hd2-mon-tien { font-weight: 700; font-size: 15px; white-space: nowrap; }
.hd2-mon-duoi { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.hd2-o-an { border: 1px solid transparent; background: transparent; padding: 2px 4px; margin-left: -4px; border-radius: 6px;
            font: inherit; color: inherit; min-height: 0; width: 100%; }
.hd2-o-an:hover { border-color: var(--border); } .hd2-o-an:focus { border-color: var(--brand); background: var(--surface); outline: none; }
.hd2-gia { width: 110px; text-align: right; }
.hd2-buoc { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 99px; overflow: hidden; }
.hd2-buoc button { width: 30px; height: 30px; border: 0; background: transparent; font-size: 17px; cursor: pointer; color: var(--ink); }
.hd2-buoc button:hover { background: var(--cream); }
.hd2-buoc span { min-width: 26px; text-align: center; font-weight: 600; }
.hd2-chip { white-space: nowrap; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 99px; padding: 4px 11px;
            font: inherit; font-size: 12px; cursor: pointer; color: var(--ink); min-height: 0; }
.hd2-chip-bat { background: var(--brand); border-color: var(--brand); color: #fff; }
.hd2-xoa { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px 6px; min-height: 0; }
.hd2-xoa:hover { color: var(--danger); }
.hd2-giam-dong { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); }
.hd2-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 99px; overflow: hidden; }
.hd2-seg button { border: 0; background: transparent; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; color: var(--ink); min-height: 0; }
.hd2-seg button.bat { background: var(--brand); color: #fff; }
.hd2-seg-to button { padding: 9px 14px; font-size: 13px; }
.hd2-o { border: 1px solid var(--border-strong); border-radius: var(--r); padding: 7px 10px; font: inherit; font-size: 13px;
         background: var(--surface); color: var(--ink); min-height: 0; width: 100%; }

.hd2-tong-khoi { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.hd2-dong-tong { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.hd2-dong-tong-lon { font-size: 17px; font-weight: 800; border-top: 1px solid var(--border); margin-top: 6px; padding-top: 10px; }
.hd2-giam-tong { padding: 6px 0; }

.hd2-dm-dau { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.hd2-o-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.hd2-o-mon { position: relative; text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r);
             padding: 10px; cursor: pointer; font: inherit; color: var(--ink); display: flex; flex-direction: column; gap: 4px;
             min-height: 72px; transition: transform .08s, border-color .15s; }
.hd2-o-mon:hover { border-color: var(--brand); }
.hd2-o-mon:active { transform: scale(.97); }
.hd2-o-mon.co { border-color: var(--brand); background: var(--brand-soft); }
.hd2-o-mon-ten { font-size: 13px; font-weight: 600; line-height: 1.3; }
.hd2-o-mon-gia { font-size: 12px; color: var(--brand); font-weight: 700; margin-top: auto; }
.hd2-o-mon-gia small { color: var(--muted); font-weight: 400; }
.hd2-dem { position: absolute; top: -7px; right: -7px; background: var(--brand); color: #fff; border-radius: 99px;
           min-width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; font-weight: 700; padding: 0 6px; }

.hd2-thu { display: flex; flex-direction: column; gap: 2px; }
.hd2-thu-dong { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.hd2-thu-dong.huy { opacity: .5; text-decoration: line-through; }
.hd2-cham { width: 10px; height: 10px; border-radius: 50%; background: var(--ok, #2e7d32); flex: 0 0 auto; }
.hd2-cham.hoan { background: var(--danger); }

.hd2-day { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap;
           background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 10px 14px; margin-top: var(--sp-3); }
.hd2-day:empty { display: none; }
.hd2-day-so { margin-right: auto; display: flex; flex-direction: column; line-height: 1.2; }
.hd2-day-so b { font-size: 17px; color: var(--warn); }
.hd2-chi-dt { display: none; }

@media (max-width: 899.98px) {
  .hd2-luoi { grid-template-columns: 1fr; }
  .hd2-cot-phai { position: static; }
  .hd2-chi-dt { display: inline-flex; }
  /* Danh mục thành tấm trượt lên từ đáy khi bấm "+ Thêm món" */
  .hd2-cot-phai > .card:first-child { display: none; }
  .hd2-cot-phai.mo > .card:first-child { display: block; position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 70px); z-index: 40;
    max-height: 62vh; overflow-y: auto; box-shadow: 0 -8px 30px rgba(0,0,0,.18); margin: 0; }
  .hd2-o-luoi { max-height: none; grid-template-columns: repeat(2, 1fr); }
  /* Thanh tổng dính đáy màn hình */
  .hd2-day { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 30; border-radius: 0;
             margin: 0; border-width: 1px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
  .hd2-tong { font-size: 21px; }
  .hd2-day { flex-wrap: nowrap; gap: 6px; padding: 8px 10px; }
  .hd2-day .btn { white-space: nowrap; padding-left: 10px; padding-right: 10px; }
  .hd2-gia { width: 78px; }
  .hd2-mon-duoi { gap: 6px; flex-wrap: wrap; }
  .hd2-mon-duoi .hd2-chip { padding: 4px 8px; }
}

/* Khối Thanh toán ở cuối trang: thanh dính đáy (điện thoại) vẫn nằm trong khối này
   về mặt mã, nhưng CSS cho nó position: fixed nên luôn thấy khi cuộn. */
.hd2-tt { margin-top: var(--sp-4); }
.hd2-tt .hd2-day { border: 0; padding: 12px 0 0; margin-top: 8px; border-top: 1px dashed var(--border); border-radius: 0; }
.hd2-tt .hd2-day-so { display: none; }   /* máy tính: số đã hiện ngay phía trên */
@media (max-width: 899.98px) {
  .hd2-tt .hd2-day { border-top: 1px solid var(--border); padding: 8px 10px; }
  .hd2-tt .hd2-day-so { display: flex; }
  .hd2-dau-tren { flex-wrap: wrap; }
  .hd2-dau-tren > div:nth-child(2) { flex: 1 1 0; }
  .hd2-ngat { display: block; flex-basis: 100%; height: 0; }   /* ngắt dòng: trạng thái xuống hàng riêng */
  .hd2-dau-tren > .badge { margin-left: 56px; }
}

/* Thanh "Có bản cập nhật mới" (29/09/2026) */
.ban-moi { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 100;
           display: flex; gap: 12px; align-items: center; background: var(--ink); color: #fff;
           padding: 10px 14px; border-radius: 99px; box-shadow: 0 6px 24px rgba(0,0,0,.25); font-size: 13px;
           max-width: calc(100vw - 24px); }

/* Lịch sử chỉnh sửa hoá đơn (29/09/2026) */
.hd2-ls summary { cursor: pointer; list-style: none; }
.hd2-ls summary::-webkit-details-marker { display: none; }
.hd2-ls summary::after { content: " ▾"; color: var(--muted); }
.hd2-ls[open] summary { margin-bottom: 10px; }
.hd2-ls-muc { padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.hd2-ls-dau { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hd2-ls-muc ul { margin: 4px 0 0 18px; padding: 0; }
.hd2-ls-loai { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink); }
.hd2-ls-SUA { background: #fff3cd; color: #7a5b00; }
.hd2-ls-THU { background: var(--ok-bg); color: var(--ok); }
.hd2-ls-HUY_THU, .hd2-ls-HUY_HD { background: #fde2e1; color: var(--danger); }

/* Thành phần gói trên tờ hoá đơn (29/09/2026) */
.hd-giay-gom { margin: 4px 0 0 16px; padding: 0; font-size: 11.5px; color: #5b4f46; }
.hd-giay-gom li { margin: 1px 0; }
@media (max-width: 600px) { .hd-giay:not(.hd-giay-anh) .hd-giay-bang td:nth-child(2) .hd-giay-gom { margin-left: 14px; } }

/* Ảnh hoá đơn tải về (29/09/2026): khổ cố định, không bóng / bo góc. */
.hd-giay.hd-giay-anh { box-shadow: none; border: 0; border-radius: 0; margin: 0; max-width: none; width: 820px; padding: 32px; }

/* Hoá đơn: thanh "💾 Lưu hoá đơn" khi có thay đổi chưa lưu — luôn nổi ở đáy màn hình */
.hd2-day.hd2-day-luu { background: var(--surface, #fff); border: 1px solid var(--brand); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.hd2-tt .hd2-day.hd2-day-luu .hd2-day-so { display: flex; }
@media (min-width: 900px) {
  .hd2-day.hd2-day-luu, .hd2-tt .hd2-day.hd2-day-luu { position: fixed; right: 24px; bottom: 20px; z-index: 40;
    border-radius: 12px; padding: 10px 14px; margin: 0; min-width: 360px; }
}
/* Tips khách gửi — không thuộc hoá đơn */
.hd2-cham.tip { background: #d6619b; }
.hd2-tip span:last-child { color: #b8457f; font-weight: 600; }
.hd2-tip-chia { font-size: 13px; color: #b8457f; margin-top: 2px; }
.tip-nv { display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow-y: auto; margin-top: 6px; }
.tip-nv-dong { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; }
.tip-nv-ten { flex: 1; min-width: 0; }
.tip-nv-dong input[data-tien] { width: 120px; text-align: right; }

/* ========================================================================== 
   APP NHÂN SỰ (01/10/2026)
   ========================================================================== */
.badge-ok     { color: var(--ok); }
.badge-warn   { color: var(--warn); }
.badge-danger { color: var(--danger); }

.cc-card { text-align: center; }
.cc-ngay { color: var(--muted); font-size: 13px; }
.cc-dong-ho { font-size: 44px; font-weight: 700; letter-spacing: .02em; color: var(--ink); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.cc-ca { font-size: 13px; color: var(--muted); }
.cc-vitri { margin: 16px auto 0; max-width: 420px; text-align: left; display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; }
.cc-vitri svg { width: 22px; height: 22px; flex: 0 0 auto; }
.cc-vitri.trong { background: var(--ok-bg); border-color: transparent; color: #14532d; }
.cc-vitri.ngoai { background: var(--warn-bg); border-color: transparent; color: #7c2d12; }
.cc-vitri .grow { flex: 1; min-width: 0; }
.cc-nut { display: grid; place-items: center; width: 180px; height: 180px; margin: 22px auto 8px; border-radius: 50%;
  border: 0; font: inherit; font-size: 22px; font-weight: 700; color: #fff; cursor: pointer;
  background: var(--brand); box-shadow: 0 12px 36px rgba(138,90,43,.35); transition: transform .12s; }
.cc-nut:active { transform: scale(.97); }
.cc-nut.ra { background: #3b281b; box-shadow: 0 12px 36px rgba(59,40,27,.3); }
.cc-nut:disabled { background: var(--border-strong); box-shadow: none; cursor: default; }
.cc-nut small { display: block; font-size: 12px; font-weight: 500; opacity: .85; margin-top: 4px; }
.cc-trang-thai { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
.cc-trang-thai b { font-variant-numeric: tabular-nums; }

.ngay-list { display: flex; flex-direction: column; }
.ngay-dong { display: grid; grid-template-columns: 74px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 2px; border-top: 1px solid var(--border); font-size: 14px; }
.ngay-dong:first-child { border-top: 0; }
.ngay-dong .thu { font-size: 12px; color: var(--muted); }
.ngay-dong .gio { font-variant-numeric: tabular-nums; }
.ngay-dong .phu { font-size: 12px; color: var(--muted); }
.tre { color: var(--danger); font-weight: 600; }

/* Bảng công: lưới ngày × người */
.bc-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.bc { border-collapse: collapse; font-size: 12px; min-width: 100%; }
.bc th, .bc td { border-bottom: 1px solid var(--border); padding: 6px 4px; text-align: center; white-space: nowrap; }
.bc th.ten, .bc td.ten { position: sticky; left: 0; background: var(--surface); text-align: left; padding-left: 10px;
  min-width: 130px; font-weight: 600; z-index: 1; border-right: 1px solid var(--border); }
.bc td.o { width: 26px; min-width: 26px; cursor: pointer; }
.bc td.o:hover { background: var(--brand-soft); }
.bc .cn { background: var(--surface-2); }
.o-cong { color: var(--ok); font-weight: 700; }
.o-tre  { color: var(--danger); font-weight: 700; }
.o-cho  { color: var(--warn); font-weight: 700; }
.o-tc   { color: var(--muted); text-decoration: line-through; }
.bc .tong { font-weight: 700; }
.chu-giai { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 8px 0 0; }

.thang-nav { display: flex; align-items: center; gap: 8px; }
.thang-nav strong { min-width: 110px; text-align: center; }
.tt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; font-size: 14px; }
.tt-grid dt { color: var(--muted); }
.tt-grid dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@media (min-width: 700px) { .tt-grid { grid-template-columns: 160px 1fr 160px 1fr; } .tt-grid dd { text-align: left; } }
.nhom-tieu-de { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }