/* ==========================================================================
   Na Navi Baby House — hệ thiết kế (khung gốc từ app Will House)
   --------------------------------------------------------------------------
   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 */
  /* Loại chụp trên lịch (anh Khoa 25/09/2026): Baby xanh dương pastel cho dễ nhìn,
     Phóng sự cưới hồng. Mỗi loại một màu chữ/viền + một màu nền nhạt. */
  --shoot-baby:       #2563eb;
  --shoot-baby-bg:    #dbeafe;
  --shoot-wedding:    #be185d;
  --shoot-wedding-bg: #fdf2f8;
  --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; }

/* Nút ☰ + ngăn menu trượt — CHỈ trên điện thoại. Máy bàn đã có thanh bên cố định. */
.menu-btn { margin-left: calc(-1 * var(--sp-2)); }
.drawer-backdrop { display: none; }
@media (max-width: 899px) {
  .shell.drawer-open .sidebar {
    display: flex; flex-direction: column; gap: 2px;
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: min(290px, 84vw); overflow-y: auto;
    padding: calc(var(--sp-4) + env(safe-area-inset-top)) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom));
    background: var(--surface); box-shadow: var(--shadow-lg);
    animation: drawer-in .18s ease-out;
  }
  .shell.drawer-open .drawer-backdrop {
    display: block; position: fixed; inset: 0; z-index: 55; background: rgba(40,28,18,.38);
  }
  .shell.drawer-open .sidebar-brand { font-weight: 700; letter-spacing: .18em; color: var(--brand);
                   font-size: 13px; padding: var(--sp-3); margin-bottom: var(--sp-2); }
  .shell.drawer-open .sidebar a {
    display: flex; align-items: center; gap: var(--sp-3); min-height: 44px;
    padding: 10px var(--sp-3); border-radius: var(--r);
    text-decoration: none; color: var(--ink); font-size: 15px; font-weight: 500;
  }
  .shell.drawer-open .sidebar a[aria-current="page"] { background: var(--cream); color: var(--brand); font-weight: 600; }
  .shell.drawer-open .sidebar svg { width: 20px; height: 20px; }
}
@media (min-width: 900px) { .topbar .menu-btn { display: none; } }
@keyframes drawer-in { from { transform: translateX(-100%); } to { transform: none; } }

.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; }
}

/* ---- Loại chụp: Phóng sự cưới (chỉ chủ tiệm + quản lý thấy) ---- */
.pill-wedding { background: var(--shoot-wedding-bg); color: var(--shoot-wedding); border-color: var(--shoot-wedding); font-weight: 600; }
.item-wedding { border-left: 4px solid var(--shoot-wedding); }
.slot.slot-wedding { border-left-color: var(--shoot-wedding); background: var(--shoot-wedding-bg); }
.slot.slot-wedding .slot-time { color: var(--shoot-wedding); }
.slot.slot-baby { border-left-color: var(--shoot-baby); background: var(--shoot-baby-bg); }
.slot.slot-baby .slot-time { color: var(--shoot-baby); }
.cal-legend { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 0 0 var(--sp-3); }
.cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ---- Tổng quan: màu nằm trên TAG tiêu đề khối, nền khối để trắng ---- */
.sec-tag { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px;
           border-radius: var(--r-full); font-size: 14px; font-weight: 700; line-height: 1.3; }
.sec-dem { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-full);
           display: inline-grid; place-items: center; font-size: 12px; color: #fff; }
.sec-brand  { background: var(--brand-soft); color: var(--brand); }  .sec-brand  .sec-dem { background: var(--brand); }
.sec-blue   { background: var(--info-bg);    color: #1d4ed8; }       .sec-blue   .sec-dem { background: #1d4ed8; }
.sec-purple { background: var(--purple-bg);  color: #6d28d9; }       .sec-purple .sec-dem { background: #6d28d9; }
.sec-green  { background: var(--ok-bg);      color: #15803d; }       .sec-green  .sec-dem { background: #15803d; }
.sec-red    { background: var(--danger-bg);  color: #b91c1c; }       .sec-red    .sec-dem { background: #b91c1c; }
/* Thẻ khách trong từng khối Tổng quan mang màu của khối */
.sec-items-brand  > .item, .sec-items-brand  > .slot { background: var(--brand-soft); border-color: #e3cdb3; }
.sec-items-blue   > .item { background: var(--info-bg);   border-color: #bfdbfe; }
.sec-items-purple > .item { background: var(--purple-bg); border-color: #ddd6fe; }
.sec-items-green  > .item { background: var(--ok-bg);     border-color: #bbf7d0; }
.sec-items-red    > .item { background: var(--danger-bg); border-color: #fecaca; }

/* ---- Khối Thanh toán trong chi tiết booking (anh Khoa 25/09/2026) ---- */
.tong-tien-noi { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
                 margin-top: var(--sp-3); padding: 14px 16px; border-radius: var(--r);
                 background: var(--brand); color: #fff; }
.tong-tien-noi span   { font-size: 14px; font-weight: 600; opacity: .9; }
.tong-tien-noi strong { font-size: 22px; font-weight: 800; letter-spacing: .2px; }
/* Còn phải thu: đỏ nhạt pastel cả ô (anh Khoa 25/09/2026) */
.kpi.kpi-con-no { background: var(--danger-bg); border-color: #fecaca; }
.kpi.kpi-con-no .kpi-label { color: #7f1d1d; font-weight: 600; }
.kpi.kpi-con-no .kpi-value { color: #b91c1c; }