/* 10/10/2026 (anh Hiếu duyệt): giao diện điện thoại — chỉ áp dụng màn hình nhỏ; máy tính giữ nguyên. */
.tabs-toggle{display:none}
@media(max-width:600px){
  /* 1. Đầu trang gọn: logo nhỏ, 3 nút trên 1 hàng */
  .topbar{flex-direction:row!important;flex-wrap:wrap;align-items:center!important;padding:8px 10px!important;border-radius:14px!important;gap:6px!important}
  .brand{gap:8px}.brand img{width:36px!important;height:36px!important;border-radius:10px;padding:2px}
  .brand b{font-size:16px!important}.brand small{font-size:11px!important;line-height:1.3}
  .topbar-actions{width:100%;display:flex!important;flex-wrap:nowrap!important;gap:6px!important}
  .topbar-actions .button,.topbar .topbar-actions .button.ghost{flex:1 1 0;font-size:11px!important;padding:6px 4px!important;min-height:32px;line-height:1.2}
  /* 2. Menu: 1 thanh mỏng "☰ Menu · trang đang mở", bấm mới xổ ra */
  #tabs{position:sticky;top:0;z-index:30;background:var(--bg,#f4f7f5);box-shadow:0 6px 12px #0a50300f}
  #tabs .tabs-toggle{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:10px 14px;border:0;border-radius:12px;background:#0f6b43;color:#fff;font-weight:700;font-size:15px;cursor:pointer}
  #tabs .tabs-toggle small{font-weight:600;opacity:.85;font-size:12px}
  #tabs.m-collapsed>:not(.tabs-toggle){display:none!important}
  #tabs:not(.m-collapsed){max-height:80vh;overflow-y:auto}
  #tabs:not(.m-collapsed) .tab{font-size:13px!important;padding:10px 6px!important}
  /* 3. Bảng → thẻ: mỗi dòng 1 thẻ, tên cột hiện nhỏ phía trên giá trị, không phải kéo ngang */
  .table-wrap{overflow:visible!important;max-width:100%;border:0!important;background:none!important}
  .table-wrap table,.table-wrap tbody,.table-wrap tr,.table-wrap td{display:block;width:100%;box-sizing:border-box}
  .table-wrap thead{display:none}
  .table-wrap table{min-width:0!important}
  .table-wrap td{overflow-wrap:anywhere;word-break:break-word}
  .content{overflow-x:hidden}
  .table-wrap tr{border:1px solid var(--line,#dfe9e3);border-radius:12px;margin:0 0 10px;padding:8px 12px;background:#fff}
  .table-wrap td{border:0!important;padding:5px 0!important;text-align:left!important;white-space:normal!important}
  .table-wrap td[data-label]::before{content:attr(data-label);display:block;font-size:11px;color:#6b7c72;font-weight:600;margin-bottom:2px}
  .table-wrap td:empty{display:none}
  .table-wrap .actions{display:flex;flex-wrap:wrap;gap:6px}
  .table-wrap .actions .button{flex:1 1 auto}
}

/* 10/10/2026 (anh Hiếu): trên điện thoại gom thanh lọc lịch thành 1 hàng trượt ngang; ô máy gọn lại */
@media (max-width: 600px) {
  .schedule-view-bar { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .schedule-view-bar::-webkit-scrollbar { display: none; }
  .schedule-view-button { flex: 0 0 auto !important; width: auto !important; min-height: 40px; padding: 6px 12px !important; white-space: nowrap; font-size: 14px; }
  .schedule-filter { padding: 8px !important; }
  #teamMachineBanner { padding: 10px 12px !important; }
  #teamMachineBanner p { margin: 4px 0; }
  .tb-row { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px !important; }
  .tb-row > * { flex: none !important; min-height: 44px; padding: 6px 8px !important; }
  .tb-row .tb-box { grid-column: 1 / -1; order: 3; padding: 4px 8px !important; }
  .tb-row .tb-box button { min-height: 34px; padding: 4px 12px !important; }
  .tb-walkin br { display: none; }
  .schedule-result-confirmation { padding: 8px 10px !important; }
}

/* 10/10/2026 (anh Hiếu): "Hoàn thành nhiệm vụ" gói gọn trong 1 màn hình điện thoại */
@media (max-width: 600px) {
  dialog:has(.cpl) { width: calc(100% - 12px) !important; max-height: 98dvh !important; }
  dialog:has(.cpl) #dialogForm { max-height: 98dvh !important; }
  #dialogBody:has(.cpl) { padding: 10px 12px 6px !important; }
  #dialogBody:has(.cpl) > h2 { font-size: 18px; margin: 2px 0 6px; padding-right: 44px; }
  dialog:has(.cpl) .dialog-x { width: 38px; height: 38px; top: 6px; right: 6px; font-size: 17px; }
  dialog:has(.cpl) .dialog-actions { padding: 8px 12px !important; }
  dialog:has(.cpl) .dialog-actions .button { min-height: 42px; padding: 8px 14px; }
  .cpl, .cpl .completion-payment > .form-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 5px 8px !important; }
  .cpl .span-2, .cpl .completion-payment, .cpl .photo-field, .cpl .payment-summary { grid-column: 1 / -1 !important; }
  .cpl label { font-size: 12px; line-height: 1.25; margin: 0; }
  .cpl input:not([type=checkbox]):not([type=file]), .cpl select { min-height: 36px !important; height: 36px; padding: 4px 8px !important; font-size: 14px !important; margin-top: 2px; }
  .cpl .cpl-hide, .cpl .compact-note { display: none !important; }
  .cpl p { margin: 0; }
  .cpl .card, .cpl .payment-summary { padding: 6px 10px !important; margin: 0 !important; font-size: 13px; line-height: 1.35; }
  .cpl .completion-payment { padding: 0 !important; margin: 4px 0 0 !important; border: 0 !important; background: none !important; }
  .cpl .completion-payment h3 { font-size: 14px; margin: 2px 0 4px !important; }
  .cpl .photo-field { gap: 4px; }
  .cpl .photo-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; }
  .cpl .photo-actions .button { min-height: 36px !important; padding: 4px 6px !important; font-size: 13px; }
  .cpl .payment-qr img { max-width: 140px; }
}
@media (max-width: 600px) {
  .cpl #prescriptionStatus, .cpl #proofStatus, .cpl .photo-field [id$="Status"] { padding: 4px 8px !important; font-size: 12px !important; margin: 2px 0 0 !important; line-height: 1.3; }
  .cpl .photo-field > .field-label { font-size: 12px; }
  .cpl .badge.warn { padding: 2px 8px; font-size: 12px; }
}

/* ===== 22/10/2026 (anh Hiếu duyệt): LỚP GIAO DIỆN LÚA VIỆT — áp 5 kỹ năng (Taste, Vercel Web Guidelines, DESIGN.md V0.1, Playwright).
   CHỈ đổi trình bày: thanh trên sáng (bỏ nền gradient), menu bên nhẹ, thẻ/bảng/nút đồng bộ, chữ số đều, vệt focus rõ, tôn trọng giảm chuyển động.
   Không đổi chức năng, dữ liệu, quyền. Gỡ cả khối này là về giao diện cũ. ===== */
:root{--muted:#5b6b63;--line:#e3ebe6;--bg:#f6f8f7;--lv-rule:#eef2ef;--lv-brand:#0f6a43;--lv-brand-pale:#e8f5ed}
html{-webkit-tap-highlight-color:transparent}
body{color:var(--ink);font-feature-settings:"cv11"}
button,.button,.tab,a,summary,select,input[type=checkbox],input[type=radio],label{touch-action:manipulation}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible,.walkin-suggestion-list button:focus-visible{outline:2px solid var(--lv-brand);outline-offset:2px}
td,.metric strong,.num,[class*="amount"],[class*="money"]{font-variant-numeric:tabular-nums}
h1,h2,h3,.page-title h1{text-wrap:balance}
/* Thanh trên: sáng, viền nhẹ, không gradient, không bóng lớn */
.topbar{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.brand b{color:var(--ink);font-weight:700}.brand small{color:var(--muted)}
.brand img{background:#fff;border:1px solid var(--line)}
.topbar .button.ghost,.topbar .topbar-actions .button.ghost{border-color:#cfd8d2;background:#fff;color:var(--ink)}
.topbar .button.ghost:hover{border-color:var(--lv-brand);background:#fff;color:var(--lv-brand)}
.bell-btn.on-dark:hover{background:rgba(0,0,0,.06)}
/* Menu bên: nền trang, mục đang mở xanh nhạt chữ xanh (không khối xanh đặc) */
.tabs{background:transparent}
.tab{border-color:transparent;background:transparent;font-weight:500;color:var(--ink)}
.tab:hover{background:#eef3f0}
.tab.active{border-color:transparent;background:var(--lv-brand-pale);color:var(--lv-brand);font-weight:650}
#tabs:not(.m-collapsed) .tab{border:1px solid transparent}
/* Thẻ, khối số */
.card,.metric,.table-wrap{border-color:var(--line);border-radius:16px;box-shadow:none}
.page-title h1{font-size:24px;font-weight:650}
.muted{color:var(--muted)}
/* Bảng: tiêu đề cột xám nhỏ, không dải nền; dòng ngăn nhạt */
th{background:transparent;color:var(--muted);font-weight:600;font-size:12px;border-bottom:1px solid var(--line)}
td{border-bottom-color:var(--lv-rule)}
/* Nút: đồng bộ, đủ to để bấm */
.button{font-weight:600;min-height:40px;border-color:#cfd8d2}
.button:hover{border-color:var(--lv-brand)}
.button.primary{border-color:var(--lv-brand);background:var(--lv-brand);color:#fff}
.button.primary:hover{background:#0b5636}
.badge{font-weight:650}
input,select,textarea{border-color:#cfd8d2}
input:hover,select:hover,textarea:hover{border-color:#b9c7be}
@media(max-width:760px){.button{min-height:44px}#tabs .tab{min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* 23/10/2026 (anh Hiếu duyệt "gọn trên điện thoại" Đợt 1): đầu trang điện thoại 1 dòng — logo nhỏ + tên + 2 nút, bỏ dòng vai trò. */
@media(max-width:760px){
  .topbar{flex-wrap:nowrap!important;align-items:center!important;padding:6px 8px!important;gap:8px!important}
  .brand{gap:8px;min-width:0}.brand img{width:36px!important;height:36px!important;padding:2px!important;border-radius:10px}
  .brand b{font-size:14px!important;white-space:nowrap}.brand small{display:none!important}
  .topbar-actions{width:auto!important;flex:0 0 auto!important;margin-left:auto}
  .topbar-actions .button,.topbar .topbar-actions .button.ghost{flex:0 0 auto!important;font-size:12px!important;padding:6px 9px!important;min-height:40px!important;white-space:nowrap}
}
/* 23/10/2026 v2 (anh Hiếu: "chuyên nghiệp hơn"): biểu tượng nét thay emoji ở đầu trang/menu/chuông; thanh Menu điện thoại nền trắng. */
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.topbar-actions .button{display:inline-flex;align-items:center;gap:6px}
.topbar .bell-btn,.topbar-bell .bell-btn,#tabs .tabs-bell .bell-btn{color:var(--ink)!important;display:inline-flex;align-items:center}
.bell-btn b{top:-2px;right:-2px}
@media(max-width:760px){
  .topbar-actions .button,.topbar .topbar-actions .button.ghost{width:40px;padding:0!important;justify-content:center}
  .topbar-actions .button .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #tabs{box-shadow:0 1px 0 var(--line)!important}
  #tabs .tabs-toggle{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important;font-weight:600!important;font-size:15px!important;border-radius:12px!important}
  #tabs .tabs-toggle span{display:inline-flex;align-items:center;gap:8px}
  #tabs .tabs-toggle small{color:var(--muted)!important;opacity:1!important;font-weight:500!important}
}
/* 23/10/2026 (anh Hiếu): menu biểu tượng nét + điện thoại: menu TRƯỢT TỪ TRÁI (như Facebook), nền mờ bên phải, bấm ra ngoài / ✕ / Esc để đóng. */
.drawer-head,.drawer-sec,.drawer-foot{display:none}
#tabs .tab{display:flex;align-items:center;gap:10px;text-align:left}
#tabs .nav-ic{width:19px;height:19px;color:#6a7a72;stroke-width:1.7}
#tabs .tab.active .nav-ic{color:var(--lv-brand)}
#tabs details>summary{display:flex;align-items:center;gap:10px}
#tabs .tab-cnt{color:var(--muted);font-weight:500}
@keyframes lvDrawerIn{from{transform:translateX(-100%)}to{transform:none}}
@media(max-width:760px){
  html.lv-drawer-open,html.lv-drawer-open body{overflow:hidden}
  #tabs:not(.m-collapsed){position:fixed!important;top:0!important;left:0;bottom:0;width:min(86vw,360px);height:100dvh;max-height:none!important;z-index:2000;
    display:flex!important;flex-direction:column;flex-wrap:nowrap!important;align-content:stretch!important;gap:2px;margin:0!important;padding:calc(10px + env(safe-area-inset-top)) 10px calc(16px + env(safe-area-inset-bottom))!important;
    background:#fff!important;border-radius:0 16px 16px 0;overflow-y:auto!important;overscroll-behavior:contain;box-shadow:0 0 0 100vmax rgba(16,24,20,.45)!important;animation:lvDrawerIn .22s ease-out}
  #tabs:not(.m-collapsed) .tabs-toggle,#tabs:not(.m-collapsed) .tabs-bell{display:none!important}
  #tabs:not(.m-collapsed) .drawer-head{display:flex;align-items:center;gap:12px;padding:10px 10px 14px;margin:0 0 6px;border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
  .dh-av{flex:0 0 44px;height:44px;border-radius:50%;background:var(--lv-brand-pale);color:var(--lv-brand);display:grid;place-items:center;font-weight:700;font-size:16px}
  .dh-who{min-width:0;flex:1}.dh-who b{display:block;font-size:16px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dh-who small{display:block;color:var(--muted);font-size:12.5px}
  .dh-close{flex:0 0 40px;height:40px;border:0;border-radius:50%;background:#f1f4f2;color:var(--ink);display:grid;place-items:center;cursor:pointer}.dh-close .ic{width:20px;height:20px}
  #tabs:not(.m-collapsed) .drawer-sec{display:block;font-size:13px;font-weight:600;color:var(--muted);padding:8px 10px 2px}
  #tabs:not(.m-collapsed) .tab,#tabs:not(.m-collapsed) details>summary{width:100%;min-height:50px!important;padding:10px 10px!important;font-size:16px!important;font-weight:500!important;border:0!important;border-radius:12px!important;gap:14px}
  #tabs:not(.m-collapsed) .nav-ic{width:24px;height:24px;color:var(--ink)}
  #tabs:not(.m-collapsed) .tab.active{background:var(--lv-brand-pale)!important;color:var(--lv-brand)!important;font-weight:650!important}
  #tabs:not(.m-collapsed) .tab.active .nav-ic{color:var(--lv-brand)}
  #tabs:not(.m-collapsed) details>summary{list-style:none;cursor:pointer;position:relative}#tabs:not(.m-collapsed) details>summary::-webkit-details-marker{display:none}
  #tabs:not(.m-collapsed) details>summary::after{content:'';position:absolute;right:16px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid #7d8c84;border-bottom:2px solid #7d8c84;transform:rotate(45deg)}
  #tabs:not(.m-collapsed) details[open]>summary::after{transform:rotate(-135deg);margin-top:-2px}
  #tabs:not(.m-collapsed) .unified-flight-navigation{border:0!important;background:transparent!important}
  #tabs:not(.m-collapsed) .unified-flight-navigation>div{padding-left:10px}
  #tabs:not(.m-collapsed) .drawer-foot{display:flex;flex-direction:column;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){#tabs:not(.m-collapsed){animation:none}}
@media(max-width:760px){#tabs:not(.m-collapsed)>*{flex:0 0 auto;width:100%}}
/* 23/10/2026 (anh Hiếu duyệt Đợt 2): phiếu tìm hiểu khách trên điện thoại — hỏi từng câu, thanh tiến độ, nút Quay lại/Tiếp dính đáy. */
@media(max-width:640px){
  .sv-card.sv-steps>[data-step]:not(.sv-cur){display:none!important}
  .sv-card.sv-steps>[data-step].sv-cur[hidden]{display:none!important}
  .sv-card.sv-steps{min-height:calc(100dvh - 140px);display:flex;flex-direction:column}
  .sv-card.sv-steps>.sv-q.sv-cur{border-top:0;padding-top:6px}
  .sv-card.sv-steps .sv-q>b{display:block;font-size:17px;line-height:1.4;margin-bottom:10px}
  .sv-card.sv-steps .sv-opts{display:flex;flex-wrap:wrap;gap:8px}
  .sv-card.sv-steps .sv-opt{min-height:44px;font-size:15px;padding:10px 14px}
  .sv-stepbar{position:sticky;bottom:0;margin:auto -14px -12px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);border-radius:0 0 14px 14px;z-index:5}
  .sv-prog{height:4px;background:#eef2ef;border-radius:2px;overflow:hidden;margin-bottom:10px}.sv-prog i{display:block;height:100%;width:0;background:var(--lv-brand);transition:width .2s}
  .sv-stepnav{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}.sv-stepnav span{text-align:center;font-size:13px;font-weight:600;color:var(--muted)}
  .sv-stepnav .button{min-height:44px}.sv-stepnav .button[disabled]{opacity:.4}
  .sv-stall{display:block;width:100%;margin-top:6px;border:0;background:none;color:var(--lv-brand);font:600 13px/1.4 inherit;min-height:32px}
}
/* Đợt 2: chữ ô nhập 16px để điện thoại không tự phóng to khi gõ; phiếu không bị thanh Menu che. */
@media(max-width:640px){
  #svFill{scroll-margin-top:72px}
  input,select,textarea{font-size:16px}
}
/* Đợt 2: ô số liệu (metric) trên điện thoại gọn — 2 cột, 3 ô thì 3 cột; chữ số 20px. */
@media(max-width:640px){
  .summary{gap:8px!important;grid-template-columns:1fr 1fr!important}
  .summary:has(>.metric:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .metric{padding:10px 12px!important;font-size:12.5px;line-height:1.35;color:var(--muted)}
  .metric strong{font-size:19px!important;margin-top:3px;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
}
/* 23/10/2026 (anh Hiếu duyệt Đợt 3): màn dài trên điện thoại gọn lại.
   - Bảng → thẻ 2 cột nhãn/giá trị (cột đầu chiếm cả hàng); nút thao tác nhỏ gọn nhiều nút/hàng.
   - Bàn làm việc Thủ quỹ: 9 ô trạng thái 3 cột; mục đã xong thu gọn (bấm ô hoặc "Hiện cả mục đã xong"). */
.tq-showall{display:none}
.tq-tile.tq-ok strong{color:#247b50}
@media(max-width:640px){
  .table-wrap tr{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;padding:10px 12px!important;margin:0 0 8px!important}
  .table-wrap td:first-child,.table-wrap td:has(.actions),.table-wrap td:has(.button),.table-wrap td:has(table),.table-wrap td:has(textarea),.table-wrap td[colspan]{grid-column:1/-1}
  .table-wrap td:first-child{font-weight:600}
  .table-wrap td{padding:4px 0!important;font-size:14px}
  .table-wrap td[data-label]::before{font-size:11.5px!important;font-weight:500!important;margin-bottom:1px!important}
  .table-wrap .actions,.actions{gap:6px!important}
  .table-wrap .actions .button,.card .actions .button{flex:0 1 auto!important;font-size:13px!important;padding:8px 12px!important;min-height:40px!important}
  .tq-tiles{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;margin:10px 0 8px!important}
  .tq-tile{padding:10px!important;border-radius:12px!important;gap:2px!important;min-width:0}
  .tq-tile span{font-size:12px;line-height:1.3;font-weight:500!important}
  .tq-tile strong{font-size:20px!important}
  .tq-tile small{font-size:11px}
  #content:not(.tq-all) .tq-empty{display:none!important}
  .tq-showall{display:block;width:100%;min-height:40px;margin:0 0 10px;border:1px dashed var(--line);border-radius:12px;background:#fff;color:var(--lv-brand);font:600 13px/1.3 inherit}
  .page-title p{font-size:13.5px}
}
@media(max-width:640px){.table-wrap tr:not(:has(>td:nth-child(4))) td{grid-column:1/-1}}
/* 23/10/2026: Phân quyền nhân sự — nút của từng người gom vào "Thao tác" trên điện thoại. */
.act-more>summary{display:none}.act-more .act-btns{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:640px){
  .act-more>summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 14px;border:1px solid #cfd8d2;border-radius:10px;background:#fff;font-weight:600;font-size:14px;cursor:pointer;list-style:none}
  .act-more>summary::-webkit-details-marker{display:none}
  .act-more>summary::after{content:'';width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:rotate(45deg);margin:-3px 0 0 4px}
  .act-more[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
  .act-more[open] .act-btns{margin-top:8px;gap:6px}
}