/* ===== FONT TỰ CHỨA (19/08) — trước đây tải từ máy chủ Google =====
   Đo thật: bộ font khai 20 file, mỗi file một lượt bắt tay RA MÁY CHỦ QUỐC TẾ.
   Trên 4G ở tiệm, đó là mấy giây khựng lúc mới vào — Sếp báo "lúc mới vào hơi lag".
   Nay 12 file nằm cùng nhà, tải từ điểm phát Cloudflare tại Việt Nam.
   Ăn thêm: người gác cổng PWA giữ được font trong máy (cùng nguồn mới cache được —
   font Google khác nguồn nên KHÔNG giữ được), và bỏ Google khỏi danh sách CSP.
   ⚠️ Poppins KHÔNG có bộ 'vietnamese' — chữ có dấu nằm trong 'latin-ext'.
   Bỏ latin-ext là chữ ă/ơ/ư/ệ rơi về font dự phòng, lệch cả app. Playfair thì
   ngược lại, có bộ 'vietnamese' riêng. Đừng "dọn gọn" nhầm. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-600-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/playfair-display-700-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/playfair-display-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ===== KIMLY Design System — "Liquid Glass ấm" (port từ Claude Design 09/08/2026) =====
   Nguyên tắc: kính CHỌN LỌC ở KHUNG (page/topbar/tile/nút), vùng DỮ LIỆU (bảng/số/input)
   nền ĐẶC + tương phản cao để đọc rõ. Blur chỉ ở topbar (vùng nhỏ) để nhẹ GPU. Có Sáng + Tối. */
:root{
  /* BIẾN FONT (vá 28/08 — mẫu thẻ Member dùng var(--font-*) mà biến chưa từng được định nghĩa
     → shorthand font: bị vô hiệu, chữ thẻ rơi về font thừa kế. Script tạm dùng Playfair italic
     — có đủ bộ dấu tiếng Việt; muốn font viết tay thật thì thêm woff2 rồi đổi ở đây. */
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'Poppins','Helvetica Neue',Arial,sans-serif;
  --font-script:'Playfair Display',Georgia,serif;

 /* — Bảng màu đất sét (Clay) từ brand guide KIMLY — */
 --clay-50:#fdf7f4;--clay-100:#f9eee8;--clay-200:#f2e4dc;--clay-300:#e7cec3;--clay-400:#d9bbb0;--clay-500:#c39a8a;--clay-600:#a67564;--clay-700:#8a5d4e;--clay-800:#6b463b;--clay-900:#4a2f27;--clay-950:#2b1b16;
 --sand-0:#ffffff;--sand-50:#fbf8f6;--sand-100:#f5f0ec;--sand-200:#eae2dc;--sand-300:#d8ccc4;--sand-400:#b8a89f;--sand-500:#93827a;--sand-600:#6f5f58;--sand-700:#52453f;--sand-800:#382e29;--sand-900:#241d1a;--sand-950:#171210;
 /* — Tên biến CŨ (app đang dùng khắp nơi) ánh xạ sang hệ mới — GIỮ tương thích, không phá nền — */
 --cream:#FAF6EF;--champagne:#EFE3CE;--mocha:var(--clay-600);--mocha-dark:var(--clay-700);--espresso:#2E211A;--ink:#43352B;--line:#EADDC8;--mocha-soft:#F3E7D8;--gold:#C9A45C;
 --ok:#4f8a63;--warn:#c98a3c;--danger:#b5544c;--info:#5b7fa6;--violet:#8a6db0;
 --ok-soft:#e5f3ec;--warn-soft:#f7edda;--danger-soft:#f6e2e2;--info-soft:#e6ecf3;--violet-soft:#efe9f5;
 /* — Bề mặt + chữ (biến hoá để đổi Sáng/Tối; vùng dữ liệu nền đặc) — */
 --surface:#ffffff;--surface-2:#FCF8F1;--surface-sunken:#F5EFE4;--sidebar-bg:#241813;
 --text-soft:#6b5a4c;--text-muted:#9b8b7c;--text-subtle:#b8a89f;
 --text-heading:var(--espresso);--text-body:var(--ink);--text-brand:var(--mocha-dark);--warning-soft:var(--warn-soft);--warning-strong:var(--warn);--success-soft:var(--ok-soft);--success-strong:var(--ok);--surface-brand-soft:var(--mocha-soft);--glass-surface:var(--glass-strong);--glass-surface-quiet:var(--glass);--glass-border-quiet:var(--glass-border);--interactive-primary:var(--mocha);--text-on-brand:#fff;
 --field-border:#E3D6BF;--field-border-hover:#d3bf9f;--placeholder:#bcab98;--tr-border:#F0E7D6;
 /* — TÊN CHUẨN của bộ Design System (các màn thiết kế mới gọi bằng tên này).
      Trỏ vào đúng thứ app đang dùng, KHÔNG đổi màu — thêm cửa vào, không xây nhà mới.
      Thiếu nhóm này thì màn thiết kế ghép vào sẽ gọi biến rỗng và rơi về màu mặc định. — */
 --bg-page:var(--cream);--bg-page-alt:var(--surface-2);
 --surface-card:var(--surface);--surface-raised:var(--surface);
 --surface-hover:var(--clay-100);--surface-selected:var(--clay-200);--surface-inverse:var(--clay-900);
 --surface-brand:var(--mocha);
 --border-subtle:var(--line);--border-default:var(--field-border);--border-brand:var(--mocha);
 --text-link:var(--mocha-dark);--text-link-hover:var(--mocha);--text-inverse:var(--clay-50);
 --interactive-primary-hover:var(--mocha-dark);--interactive-primary-active:var(--clay-800);
 --interactive-secondary:var(--clay-200);--interactive-secondary-hover:var(--clay-300);
 --interactive-ghost-hover:var(--clay-100);
 --interactive-disabled-bg:var(--sand-200);--interactive-disabled-text:var(--sand-400);
 --focus-ring:color-mix(in oklab,var(--mocha) 45%,transparent);
 --overlay-scrim:color-mix(in oklab,var(--clay-950) 45%,transparent);
 --radius-xs:8px;
 --topbar-bg:rgba(255,251,245,.82);
 --radius:18px;--radius-sm:12px;
 --shadow-sm:0 2px 6px rgba(124,82,54,.08);--shadow:0 10px 30px -12px rgba(124,82,54,.16);--shadow-lg:0 22px 50px -18px rgba(124,82,54,.22);
 --ring:0 0 0 3px rgba(166,117,100,.28);--sheen:inset 0 1px 0 rgba(255,255,255,.7);
 /* — KÍNH (chỉ ở KHUNG): bề mặt champagne mờ + viền sáng + blur vừa (nhẹ GPU) — */
 --glass:linear-gradient(168deg,color-mix(in oklab,#fff6ec 60%,transparent),color-mix(in oklab,#fff6ec 40%,transparent));
 --glass-strong:linear-gradient(168deg,color-mix(in oklab,#fff8f0 80%,transparent),color-mix(in oklab,#fff8f0 62%,transparent));
 --glass-solid:#fff7ee;
 --glass-border:color-mix(in oklab,#fff2df 78%,transparent);
 --glass-blur:blur(20px) saturate(1.7) brightness(1.04);
 --glass-shadow:0 26px 60px -34px rgba(163,98,74,.5),inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(232,192,138,.35);
 --side-text:#5a463b;--side-heading:#3b241c;
 /* — Trường aurora champagne sau lớp kính (gradient thuần, KHÔNG blur → nhẹ GPU) — */
 --page-grad:radial-gradient(1100px 780px at 8% -12%,#fff3df 0%,rgba(255,243,223,0) 58%),radial-gradient(980px 700px at 88% -6%,#f7cdb8 0%,rgba(247,205,184,0) 60%),radial-gradient(1150px 900px at 96% 62%,#e8a98f 0%,rgba(232,169,143,0) 58%),radial-gradient(1000px 820px at 22% 108%,#c98f74 0%,rgba(201,143,116,0) 60%),linear-gradient(158deg,#fdf4ea 0%,#f8e2d4 42%,#f0d4c2 74%,#e9c6b1 100%);
 color-scheme:light;
}
/* ===== GIAO DIỆN TỐI ===== */
[data-theme="dark"]{
 --cream:#1a1310;--champagne:#3a2b24;--mocha:#A67564;--mocha-dark:#BC9078;--espresso:#F7ECE6;--ink:#E6D7CE;--line:#3a2b24;--mocha-soft:#2f231e;--gold:#D6B26A;
 --ok:#8dae87;--warn:#d9a35c;--danger:#cf7a72;--info:#8fa6c4;--violet:#b299d6;
 --ok-soft:#25301f;--warn-soft:#35271a;--danger-soft:#3a201d;--info-soft:#20293a;--violet-soft:#2b2440;
 --surface:#241b17;--surface-2:#2f231e;--surface-sunken:#191210;--sidebar-bg:#160f0c;
 --text-soft:#c3ada0;--text-muted:#b09b90;--text-subtle:#8a766c;
 --field-border:#43332b;--field-border-hover:#5c463b;--placeholder:#8a766c;--tr-border:#33261f;
 --topbar-bg:rgba(36,27,23,.82);
 /* — Tên chuẩn Design System: mấy biến trỏ thẳng vào BẬC THANG (clay-100, sand-200…)
      không tự đổi theo chế độ Tối, phải khai lại ở đây. Bỏ nhóm này là nền sáng
      chói loà trên màn tối — lỗi hay gặp nhất khi ghép hệ màu. — */
 --surface-hover:var(--surface-2);--surface-selected:var(--champagne);
 --surface-inverse:var(--clay-100);--text-inverse:var(--clay-950);
 --interactive-secondary:var(--champagne);--interactive-secondary-hover:#43332b;
 --interactive-ghost-hover:var(--surface-2);
 --interactive-disabled-bg:var(--surface-sunken);--interactive-disabled-text:var(--text-subtle);
 --interactive-primary-active:var(--clay-400);
 --shadow-sm:0 2px 6px rgba(0,0,0,.45);--shadow:0 12px 32px -12px rgba(0,0,0,.55);--shadow-lg:0 24px 56px -18px rgba(0,0,0,.6);
 --ring:0 0 0 3px rgba(211,168,148,.35);--sheen:inset 0 1px 0 rgba(255,255,255,.07);
 --glass:linear-gradient(168deg,color-mix(in oklab,#f2e4dc 14%,transparent),color-mix(in oklab,#f2e4dc 8%,transparent));
 --glass-strong:linear-gradient(168deg,color-mix(in oklab,#f2e4dc 22%,transparent),color-mix(in oklab,#f2e4dc 13%,transparent));
 --glass-solid:#271d18;
 --glass-border:color-mix(in oklab,#ffffff 16%,transparent);
 --glass-blur:blur(22px) saturate(1.6) brightness(1.02);
 --glass-shadow:0 30px 66px -34px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.14);
 --side-text:#e6d7ce;--side-heading:#f7ece6;
 --page-grad:radial-gradient(1000px 720px at 6% -12%,#6a3a28 0%,rgba(106,58,40,0) 58%),radial-gradient(900px 700px at 92% 8%,#8a4f34 0%,rgba(138,79,52,0) 56%),radial-gradient(900px 800px at 70% 104%,#472518 0%,rgba(71,37,24,0) 60%),linear-gradient(158deg,#1f1512 0%,#2a1a14 52%,#150d0a 100%);
 color-scheme:dark;
}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}html,body{margin:0}html{background:var(--cream)}body{font-family:'Poppins','Inter',system-ui,sans-serif;background:var(--cream);background-image:var(--page-grad);background-attachment:fixed;color:var(--ink);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color .25s,color .25s}
::selection{background:var(--champagne);color:var(--espresso)}
.serif{font-family:'Playfair Display',serif}
a{color:var(--mocha-dark);transition:color .15s}a:hover{color:var(--mocha)}
:focus-visible{outline:2px solid var(--mocha);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.nav{display:flex;align-items:center;gap:4px;background:var(--sidebar-bg);color:#fff;padding:10px 18px;flex-wrap:wrap}
.nav .brand{font-family:'Playfair Display',serif;font-weight:700;color:#fff;font-size:1.15rem;margin-right:14px;text-decoration:none}
.nav a.item{color:#EADDC8;text-decoration:none;padding:7px 12px;border-radius:8px;font-size:.9rem}
.nav a.item:hover{background:rgba(255,255,255,.12)}
.nav a.item.on{background:var(--mocha);color:#fff}
/* Chip lọc nhóm trong hộp chọn gói (màn thu tiền) — chip đang chọn tô đậm cho dễ thấy */
.chipNhom.on{background:var(--mocha);border-color:var(--mocha);color:#fff}
.goiItem:hover{background:var(--surface-2);border-color:var(--mocha)}
.nav .sp{flex:1}
.nav .who{color:#EADDC8;font-size:.82rem;margin-right:10px}
.wrap{max-width:1180px;margin:22px auto;padding:0 18px}

/* ══════════════════ QUY CHUẨN POPUP / MODAL (Sếp bàn giao 15/08/2026) ══════════════════
   Khai MỘT lần ở đây, mọi popup dùng biến này — không hardcode hex trong component.
   LƯU Ý ĐỔI TÊN: spec gọi màu nút/icon nâu đậm là --espresso, nhưng dự án ĐÃ CÓ --espresso
   mang nghĩa khác (ở chế độ Tối nó là màu CHỮ SÁNG #F7ECE6, dùng ở 10 chỗ). Khai đè sẽ vỡ
   toàn bộ giao diện, nên trong phạm vi modal dùng --mo-espresso. */
:root{
 --mo-panel:linear-gradient(168deg,#fffdfa 0%,#fdf5ec 100%);
 --mo-rim:rgba(232,192,138,.5);
 --mo-shadow:0 44px 96px -36px rgba(120,70,52,.5),0 0 0 1px rgba(232,192,138,.22),inset 0 1px 0 rgba(255,255,255,.95);
 --mo-head:linear-gradient(168deg,#fbeade 0%,#f6ded0 100%);
 --mo-hairline:rgba(120,70,52,.14);
 --mo-title:#3b241c;--mo-body:#52453f;--mo-muted:#8d7266;--mo-brand:#a0603f;
 --mo-field:#ffffff;--mo-field-rim:rgba(120,70,52,.26);--mo-field-text:#3b241c;
 --mo-sunk:rgba(120,70,52,.05);--mo-scrim:rgba(58,32,22,.42);
 --mo-espresso:#4a2e23;--mo-on-espresso:#fdf3e6;--mo-gold:#e8c08a;
 --mo-warn-bg:rgba(200,138,60,.11);--mo-warn-rim:rgba(200,138,60,.32);--mo-warn-ic:#c88a3c;
 --mo-danger:#c2554a;
 /* Dải "lịch trống" trong modal đặt lịch — cũng phải đi qua biến, không hardcode */
 --mo-tl-work:rgba(217,195,168,.33);--mo-tl-rim:#ffffff;--mo-on-info:#ffffff;
}
[data-theme="dark"]{
 --mo-panel:linear-gradient(168deg,#3a251c 0%,#2b1911 100%);
 --mo-rim:rgba(232,192,138,.42);
 --mo-shadow:0 48px 104px -34px rgba(0,0,0,.85),0 0 0 1px rgba(232,192,138,.2),0 0 70px -18px rgba(232,192,138,.24),inset 0 1px 0 rgba(255,226,178,.3);
 --mo-head:linear-gradient(168deg,#4a3021 0%,#3a2317 100%);
 --mo-hairline:rgba(232,192,138,.2);
 --mo-title:#fdf3e6;--mo-body:#ecdccd;--mo-muted:#bda292;--mo-brand:#e0ac7f;
 --mo-field:#1d120c;--mo-field-rim:rgba(232,192,138,.32);--mo-field-text:#fdf3e6;
 --mo-sunk:rgba(255,240,214,.06);--mo-scrim:rgba(10,5,3,.66);
 --mo-espresso:#5c3a2c;
 --mo-tl-work:rgba(232,192,138,.16);--mo-tl-rim:#2b1911;--mo-on-info:#0f1520;
}
/* ── Khung modal: panel có mép rõ, header/footer cố định, chỉ thân giữa cuộn ── */
dialog.mo{border:none;padding:0;background:transparent;max-width:none;max-height:none;overflow:visible}
dialog.mo::backdrop{background:var(--mo-scrim);backdrop-filter:blur(7px) saturate(1.1);-webkit-backdrop-filter:blur(7px) saturate(1.1)}
.mo-panel{width:var(--mo-w,560px);max-width:calc(100vw - 28px);max-height:calc(100vh - 96px);
 display:flex;flex-direction:column;border-radius:30px;background:var(--mo-panel);border:1px solid var(--mo-rim);
 box-shadow:var(--mo-shadow);overflow:hidden;color:var(--mo-body);text-align:left;
 animation:mo-rise .34s cubic-bezier(.16,1,.3,1)}
@keyframes mo-rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.mo-head{flex-shrink:0;display:flex;align-items:flex-start;gap:15px;padding:22px 26px;background:var(--mo-head);border-bottom:1px solid var(--mo-hairline)}
.mo-ico{width:44px;height:44px;flex-shrink:0;border-radius:15px;background:var(--mo-espresso);display:flex;align-items:center;justify-content:center;
 box-shadow:0 8px 20px -10px rgba(59,36,28,.7),inset 0 1px 0 rgba(232,192,138,.4)}
.mo-ico svg{width:21px;height:21px;stroke:var(--mo-on-espresso)}
.mo-eyebrow{font-weight:600;font-size:10px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--mo-brand)}
.mo-title{font-family:'Playfair Display',serif;font-weight:400;font-size:25px;line-height:1.2;color:var(--mo-title);letter-spacing:-.01em;margin-top:2px}
.mo-sub{font-size:13px;line-height:1.5;color:var(--mo-muted);margin-top:4px}
.mo-x{width:38px;height:38px;flex-shrink:0;border-radius:12px;display:flex;align-items:center;justify-content:center;
 color:var(--mo-muted);cursor:pointer;border:1px solid var(--mo-hairline);background:none;padding:0;
 transition:background-color .14s,color .14s,transform .14s}
.mo-x:hover{background:var(--mo-sunk);color:var(--mo-title);transform:rotate(90deg)}
.mo-x svg{width:17px;height:17px}
.mo-body{flex:1;overflow-y:auto;padding:20px 26px;display:flex;flex-direction:column;gap:16px}
.mo-foot{flex-shrink:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 26px;background:var(--mo-head);border-top:1px solid var(--mo-hairline)}
.mo-foot .hint{flex:1;min-width:120px;font-size:12px;line-height:1.5;color:var(--mo-muted)}
/* ── Ô nhập: LUÔN có nền + viền ở cả hai chế độ (lỗi nặng nhất của bản cũ) ── */
.mo-panel input:not([type=radio]):not([type=checkbox]),.mo-panel select,.mo-panel textarea{height:44px;padding:0 13px;border-radius:13px;
 background:var(--mo-field);border:1px solid var(--mo-field-rim);color:var(--mo-field-text);font-size:14px;width:100%}
.mo-panel textarea{min-height:76px;height:auto;padding:12px 13px;line-height:1.6}
.mo-panel select{appearance:none;-webkit-appearance:none;padding-right:34px;
 background-image:linear-gradient(45deg,transparent 50%,var(--mo-muted) 50%),linear-gradient(135deg,var(--mo-muted) 50%,transparent 50%);
 background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.mo-panel input:focus,.mo-panel select:focus,.mo-panel textarea:focus{outline:none;border-color:var(--mo-brand);box-shadow:0 0 0 3px rgba(160,96,63,.16)}
.mo-panel input[type=radio],.mo-panel input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--mo-espresso);margin:0}
.mo-panel label:has(input[type=radio]),.mo-panel label:has(input[type=checkbox]){flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--mo-title)}
.mo-panel label{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0;
 font-weight:500;font-size:12px;line-height:1.4;letter-spacing:.02em;color:var(--mo-body)}
.mo-panel label>span:first-child{font-weight:500;font-size:12px;color:var(--mo-body)}
.mo-req{color:var(--mo-danger);margin-left:3px}
/* đóng khung xem ảnh xong, trình duyệt trả tiêu điểm về chính hộp thoại → viền nâu quanh cả phiếu (02/10). Hộp không phải ô bấm, bỏ viền. */
dialog:focus,dialog:focus-visible{outline:none}
/* Phiếu chấm: hàng NÚT SỐ 5–10 (+ "<5" mở thanh kéo) — chạm một lần là chọn; nút đang chọn tô đặc (02/10) */
.cb-so{display:flex;gap:6px;margin:2px 0 8px}
.cb-so button{flex:1 1 0;min-width:0;min-height:40px;border-radius:11px;border:1px solid var(--line);background:var(--glass-strong);color:var(--text-heading);font:inherit;font-weight:600;font-size:1rem;cursor:pointer;padding:0}
.cb-so button.on{background:var(--mocha);border-color:var(--mocha);color:#fff}
.cb-so .cb-so-thap{flex:0 0 auto;padding:0 10px;font-size:.82rem;font-weight:500;color:var(--text-muted)}
.cb-tc:not(.mo-thanh) .cb-thanh{display:none}
/* Chọn ngày Chờ chấm / Đã chấm: một hàng ‹ [ô ngày] › ✕ · số bài (02/10 Sếp "gọn lại") */
.cb-chon-ngay{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;min-width:0}
.cb-chon-ngay .cb-mui{flex:0 0 auto;width:40px;min-height:40px;padding:0;justify-content:center;border-radius:12px}
.cb-chon-ngay .cb-o-ngay{flex:0 1 auto;min-width:0;display:flex}
.cb-chon-ngay .cb-o-ngay .dp,.cb-chon-ngay .cb-o-ngay .dp-field{min-width:0;max-width:100%}
.cb-chon-ngay .cb-dem-ngay{font-size:.8rem;white-space:nowrap;margin-left:auto;padding-left:4px}
/* Phiếu chấm bài: dải ảnh vuốt ngang ngay đầu phiếu + ô Điểm tổng ghim đầu khi cuộn (02/10) */
.cb-anh{display:flex;flex-shrink:0;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin-bottom:12px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
.cb-anh a{flex:none;scroll-snap-align:start}
.cb-anh a{position:relative;display:block}
.cb-anh img{width:150px;height:150px;object-fit:cover;border-radius:12px;border:1px solid var(--line);display:block;background:var(--surface-sunken)}
/* nhãn TRƯỚC / SAU trên từng ảnh — trước xám đậm, sau màu mocha (02/10) */
.cb-nhan{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.cb-nhan-truoc{background:rgba(46,33,26,.78)}.cb-nhan-sau{background:var(--mocha)}
/* ảnh bài trong "Điểm của tôi" (02/10): dải ảnh nhỏ trước → sau, chạm mở khung xem ảnh (nhóm theo ô td của bài) */
.bb-anh{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.bb-anh::-webkit-scrollbar{display:none}
.bb-anh a{position:relative;flex:0 0 auto;display:block}
.bb-anh img{width:76px;height:76px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block;background:var(--surface-sunken)}
.bb-anh .cb-nhan{left:4px;top:4px;padding:1px 6px;font-size:.6rem}
/* phiếu chấm: đầu phiếu gọn MỘT dòng nhỏ (KTV — dịch vụ), nhường chỗ cho ảnh */
#moChamBai .mo-head{padding:10px 16px;gap:10px;align-items:center}#moChamBai .mo-ico{display:none}
#moChamBai .mo-eyebrow{font-size:9px}
#moChamBai .mo-title{font-family:inherit;font-weight:600;font-size:.92rem;line-height:1.35;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
#moChamBai .mo-x{width:36px;height:36px}
.cb-tong{position:sticky;top:-20px;z-index:2;background:var(--mo-field)!important;border:1px solid var(--mo-hairline);box-shadow:0 8px 18px -12px rgba(74,47,39,.45)}
/* ── Nút ── */
.mo-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 24px;border:none;border-radius:999px;
 background:var(--mo-espresso);color:var(--mo-on-espresso);font-weight:600;font-size:14px;line-height:1.3;cursor:pointer;
 box-shadow:0 14px 30px -12px rgba(59,36,28,.8),inset 0 1px 0 rgba(232,192,138,.4)}
.mo-btn svg{width:17px;height:17px;stroke:var(--mo-gold)}
.mo-btn.ghost{background:none;box-shadow:none;color:var(--mo-body);font-weight:500;padding:0 18px}
.mo-btn.ghost svg{stroke:currentColor}
.mo-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
/* ── Khối con: nền chìm, cảnh báo, nút trạng thái ── */
.mo-sunk{padding:13px;border-radius:14px;background:var(--mo-sunk);border:1px solid var(--mo-hairline)}
.mo-warn{display:flex;align-items:flex-start;gap:10px;padding:13px;border-radius:14px;
 background:var(--mo-warn-bg);border:1px solid var(--mo-warn-rim);font-size:12px;line-height:1.55;color:var(--mo-body)}
.mo-warn svg{width:17px;height:17px;flex-shrink:0;stroke:var(--mo-warn-ic)}
.mo-warn b{font-weight:600;color:var(--mo-title)}
.mo-warn a{color:var(--mo-brand);font-weight:600;text-underline-offset:3px}
.mo-segs{display:flex;gap:8px}
.mo-seg{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:13px 8px;border-radius:16px;cursor:pointer;
 background:var(--mo-field);border:1px solid var(--mo-field-rim);font-family:inherit;font-weight:600;font-size:12px;line-height:1.3;color:var(--mo-title);text-align:center;
 transition:border-color .14s,background-color .14s}
.mo-seg svg{width:19px;height:19px;stroke:var(--mo-brand)}
.mo-seg:hover{border-color:var(--mo-brand)}
.mo-seg small{font-weight:400;font-size:10px;line-height:1.3;color:var(--mo-muted)}
.mo-seg.on{background:var(--mo-espresso);border-color:var(--mo-espresso);color:var(--mo-on-espresso);cursor:default;
 box-shadow:0 12px 26px -12px rgba(59,36,28,.75),inset 0 1px 0 rgba(232,192,138,.4)}
.mo-seg.on svg{stroke:var(--mo-gold)}
.mo-seg.on small{color:rgba(253,243,230,.7)}
.mo-seg.huy{border-color:var(--mo-danger);color:var(--mo-danger)}
.mo-seg.huy svg{stroke:var(--mo-danger)}
.mo-seg[disabled],.mo-seg.tat{opacity:.45;cursor:not-allowed;pointer-events:none}
.mo-seg form{display:contents}
.mo-row{display:flex;justify-content:space-between;gap:14px;font-size:13px;line-height:1.5}
.mo-row>span:first-child{color:var(--mo-muted);flex-shrink:0}
.mo-row>span:last-child{color:var(--mo-title);font-weight:500;text-align:right}
.mo-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Điện thoại: KHÔNG dùng --mo-w:100% — dialog tự co theo con nên 100% quay vòng, panel teo còn 2px.
   Phải neo theo viewport. */
@media(max-width:640px){.mo-grid2{grid-template-columns:1fr}.mo-panel{--mo-w:calc(100vw - 24px);border-radius:24px}
 .mo-head,.mo-body,.mo-foot{padding-left:18px;padding-right:18px}.mo-title{font-size:21px}
 .mo-panel input,.mo-panel select,.mo-panel textarea{font-size:16px}
 /* 02/10 (Sếp chụp hộp Phát hành thẻ trên iPhone: tràn sát mép, mất nút Phát hành): luật 14px phía trên viết
    ".mo-panel input:not([type=radio]):not([type=checkbox])" MẠNH HƠN dòng 16px ngay trên → ô nhập trong hộp vẫn 14px →
    Safari iPhone TỰ PHÓNG TO khi con trỏ vào ô (đo thật: zoom 1,14) → hộp tràn mép, chân hộp ra khỏi màn. Ép cùng độ mạnh. */
 .mo-panel input:not([type=radio]):not([type=checkbox]),.mo-panel select,.mo-panel textarea{font-size:16px}
 /* chiều cao theo phần màn THẬT SỰ nhìn thấy (dvh) — 100vh của Safari tính cả chỗ thanh công cụ che */
 .mo-panel{max-height:calc(100vh - 40px);max-height:calc(100dvh - 24px)}}
@media(prefers-reduced-motion:reduce){.mo-panel{animation:none}.mo-x:hover{transform:none}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow),var(--sheen)}
.card h3:first-child{margin-top:0}
h1.pg{font-family:'Playfair Display',serif;color:var(--mocha-dark);margin:.1rem 0 1rem;font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem);letter-spacing:-.01em}
/* Nut chon Khong/Co dang dung XANH DUONG mac dinh cua may (anh Sep 20/08) —
   ban dac ta ghi ro "khong co xanh duong, khong co tim". Keo ve mau thuong hieu. */
input[type=radio],input[type=checkbox]{accent-color:var(--mocha)}
input,select,textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--field-border);border-radius:var(--radius-sm);font-size:.95rem;font-family:inherit;background:var(--surface);color:var(--ink);transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--field-border-hover)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mocha);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
label{display:block;font-size:.82rem;color:var(--text-soft);margin:.7rem 0 .2rem;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--mocha);color:#fff;border:0;padding:.7rem 1.3rem;border-radius:999px;font-weight:600;font-size:.92rem;line-height:1.2;white-space:nowrap;cursor:pointer;text-decoration:none;box-shadow:var(--shadow-sm);transition:background .15s,box-shadow .15s,transform .1s}
.btn:hover{background:var(--mocha-dark);box-shadow:var(--shadow);transform:translateY(-1px)}
.btn:active{transform:translateY(0);box-shadow:var(--shadow-sm)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.ghost{background:var(--surface);color:var(--mocha-dark);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{background:var(--mocha-soft);border-color:#d9c3a8}
.btn.sm{padding:.42rem .85rem;font-size:.82rem}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--tr-border);vertical-align:middle}
th{background:var(--champagne);color:var(--espresso);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
tbody tr{transition:background .12s}tbody tr:hover{background:var(--surface-2)}
td.right,th.right{text-align:right}
.tag{display:inline-block;font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:999px;background:var(--champagne);color:var(--mocha-dark);white-space:nowrap;line-height:1.4}
.tag.ok{background:var(--ok-soft);color:var(--ok)}.tag.warn{background:var(--warn-soft);color:var(--warn)}.tag.danger{background:var(--danger-soft);color:var(--danger)}
.msg{padding:11px 15px;border-radius:var(--radius-sm);margin:10px 0;font-size:.9rem;font-weight:500;border-left:3px solid transparent}
.msg.ok{background:var(--ok-soft);color:var(--ok);border-left-color:var(--ok)}.msg.err{background:var(--danger-soft);color:var(--danger);border-left-color:var(--danger)}.msg.warn{background:var(--warn-soft);color:var(--warn);border-left-color:var(--warn)}
.cols2{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:start}
/* 02/10 (hồ sơ khách tràn ngang trên iPhone): ô lưới mặc định min-width:auto → cột nở theo dòng dài nhất bên trong
   (594px trên màn 440). Cho ô được co, nội dung dài tự xuống dòng thay vì đẩy cả trang. */
.cols2>*{min-width:0}
/* ===== Ô số liệu (tile) dùng chung ===== */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.tile{background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:var(--radius);padding:16px 17px;box-shadow:var(--shadow),var(--sheen);display:flex;gap:12px;align-items:flex-start;transition:box-shadow .15s,transform .1s}
.tile:hover{box-shadow:var(--shadow-lg),var(--sheen);transform:translateY(-2px)}
.tile .ti-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;background:var(--champagne);flex-shrink:0}
.tile .ti-lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:#9b8b7c;font-weight:600}
.tile .ti-val{font-size:1.5rem;font-weight:700;color:var(--espresso);line-height:1.15;margin-top:3px;word-break:break-word}
/* Giá trị dài (đánh dấu ti-val-sm/-xs từ máy chủ theo số ký tự): CO CHỮ + cấm bẻ dòng —
   không thì word-break bẻ "142.335.000đ" thành "142.33 / 5.000đ" đọc nhầm ra HAI SỐ
   (Sếp bắt 23/08, dính cả điện thoại lẫn desktop khi 6 tile một hàng).
   Luật tiền 22/08: chật thì co chữ, cấm rút gọn. */
.tile .ti-val-sm{font-size:1.16rem;word-break:normal;overflow-wrap:normal}
.tile .ti-val-xs{font-size:.98rem;word-break:normal;overflow-wrap:normal}
.tile .ti-sub{font-size:.76rem;color:#9b8b7c;margin-top:2px}
.tile.ok .ti-ic{background:#e5f3ec}.tile.ok .ti-val{color:var(--ok)}
.tile.warn .ti-ic{background:#f7edda}.tile.warn .ti-val{color:var(--warn)}
.tile.danger .ti-ic{background:#f6e2e2}.tile.danger .ti-val{color:var(--danger)}
.tile.mocha .ti-ic{background:var(--mocha-soft)}.tile.mocha .ti-val{color:var(--mocha-dark)}
.scroll{overflow-x:auto}.muted{color:var(--text-muted)}.right{text-align:right}
textarea{min-height:76px;resize:vertical;line-height:1.5}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-sunken);color:var(--text-muted);cursor:not-allowed}
input[type=checkbox],input[type=radio]{width:auto}
.hint{font-size:.8rem;color:var(--text-muted);margin-top:.3rem}
/* trạng thái rỗng */
.empty-cell{text-align:center;color:var(--text-muted);padding:30px 16px;font-size:.9rem}
.empty-cell .em-ic{font-size:1.9rem;display:block;margin-bottom:6px;opacity:.6}
/* ô gợi ý tìm khách (autocomplete) */
.ac-i{display:flex;gap:10px;align-items:center;padding:9px 11px;cursor:pointer;border-bottom:1px solid var(--tr-border)}
.ac-i:last-child{border-bottom:0}.ac-i:hover,.ac-i.active{background:var(--mocha-soft)}
.ac-av{width:34px;height:34px;border-radius:50%;background:var(--champagne);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--mocha-dark);font-weight:700;flex-shrink:0}
.ac-nm{font-weight:600;color:var(--mocha-dark);line-height:1.25}
.ac-sub{font-size:.78rem;color:var(--text-muted);line-height:1.3}
.ac-note{padding:10px 12px;color:var(--text-muted);font-size:.85rem}
/* lịch chọn ngày/giờ tùy biến */
.dp{position:relative}
.dp-field{width:100%;text-align:left;background:var(--surface);border:1px solid var(--field-border);border-radius:var(--radius-sm);padding:.7rem .9rem;font:inherit;color:var(--ink);cursor:pointer;display:flex;gap:8px;align-items:center;transition:border-color .15s,box-shadow .15s}
.dp-field:hover{border-color:var(--field-border-hover)}.dp.open .dp-field{border-color:var(--mocha);box-shadow:var(--ring)}
.dp-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:14px;width:300px;max-width:calc(100vw - 40px)}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dp-title{font-weight:700;color:var(--espresso)}
.dp-nav{background:none;border:0;font-size:1.3rem;line-height:1;color:var(--mocha-dark);cursor:pointer;width:32px;height:32px;border-radius:8px}
.dp-nav:hover{background:var(--mocha-soft)}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-wd{text-align:center;font-size:.7rem;font-weight:700;color:var(--text-muted);padding:4px 0}
.dp-day{aspect-ratio:1;border:0;background:none;border-radius:50%;cursor:pointer;font:inherit;font-size:.85rem;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .12s}
.dp-day:hover{background:var(--mocha-soft)}
.dp-day.out{color:var(--text-subtle)}
.dp-day.today{box-shadow:inset 0 0 0 1.5px var(--mocha)}
.dp-day.sel{background:var(--mocha);color:#fff;font-weight:700}
/* chip ngày nhanh + lưới chip giờ (17/08 — màn đặt lịch của sale) */
.dp-quick{display:flex;gap:5px;margin-bottom:10px}
.dp-qd{flex:1;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.34rem .2rem;font:inherit;font-size:.78rem;color:var(--ink);cursor:pointer;transition:background .12s,border-color .12s}
.dp-qd:hover{border-color:var(--mocha);background:var(--mocha-soft)}
.dp-qd.on{background:var(--mocha);color:#fff;border-color:var(--mocha);font-weight:600}
.dp-hours{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.dp-hours .dp-lb{font-size:.78rem;font-weight:500;color:var(--text-muted)}
.dp-req{color:var(--danger);font-weight:600}
.dp-hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0 8px}
.dp-hchip{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:.34rem 0;font:inherit;font-size:.78rem;font-variant-numeric:tabular-nums;color:var(--ink);cursor:pointer;text-align:center;transition:background .12s,border-color .12s}
.dp-hchip:hover{border-color:var(--mocha);background:var(--mocha-soft)}
.dp-hchip.on{background:var(--mocha);color:#fff;border-color:var(--mocha);font-weight:700}
/* khung giờ đã hết KTV — vẫn bấm được (quầy có quyền xếp chồng), nhưng nhìn là biết để né */
.dp-hchip.kin{opacity:.5;text-decoration:line-through;text-decoration-thickness:1px}
.dp-hchip.kin.on{opacity:1;text-decoration:none;background:var(--danger);border-color:var(--danger)}
.dp-other{background:none;border:0;padding:0;font:inherit;font-size:.76rem;color:var(--mocha-dark);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* nhấp nháy khi bấm Đặt lịch mà chưa chọn giờ */
.dp-thieu .dp-pop{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in oklab,var(--danger) 18%,transparent)}
.dp-time{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.dp-time .dp-lb{font-size:.78rem;font-weight:500;color:var(--text-muted);margin-right:2px;white-space:nowrap}
.dp-time select{width:auto;min-width:70px;padding:.35rem .5rem;font-size:.92rem;font-weight:500;text-align:center}
.dp-time b{opacity:.5}
/* Trong modal, quy chuẩn popup tự vẽ mũi tên và chừa 34px bên phải — ô giờ hẹp nên mũi tên
   ĐÈ LÊN CHỮ, nhìn như số bị gạch (Sếp báo 15/08). Nới ô và đẩy mũi tên ra sát mép. */
/* Trong modal vẫn phải chừa chỗ cho mũi tên, nhưng vừa phải — 76px là đủ đọc "09h" mà không
   choán chỗ (Sếp: "hơi quá tay" khi để 96px/44px). */
.mo-panel .dp-time select{min-width:76px;height:38px;padding:0 26px 0 11px;font-size:.92rem;
 background-position:calc(100% - 13px) 17px,calc(100% - 8px) 17px}
.dp-inline .dp-field{display:none}
.dp-inline .dp-pop{position:static;display:block;box-shadow:none;border:1px solid var(--line);width:auto;max-width:none;padding:14px}
/* form đặt lịch 2 cột (lịch nhỏ bên trái) */
.dl-grid{display:grid;grid-template-columns:250px 1fr;gap:18px;align-items:start}
.dl-right{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.dl-grid .dp-inline .dp-pop{padding:11px}
.dl-grid .dp-day{font-size:.8rem}
/* ===== KHUNG: sidebar kính SÁNG nổi (Liquid Glass ấm) ===== */
.layout{display:flex;min-height:100vh;align-items:stretch}
.sidebar{width:250px;flex-shrink:0;margin:14px 0 14px 14px;border-radius:26px;background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);color:var(--side-text);position:sticky;top:14px;height:calc(100vh - 28px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:color-mix(in oklab,var(--side-heading) 22%,transparent) transparent}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.sidebar{background:var(--glass-solid)}}
.sidebar::-webkit-scrollbar{width:7px}.sidebar::-webkit-scrollbar-thumb{background:color-mix(in oklab,var(--side-heading) 18%,transparent);border-radius:8px}
.sidebar .brand{display:flex;align-items:center;gap:8px;padding:22px 18px 16px;text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--side-heading) 12%,transparent)}
.brand-logo{height:26px;width:auto;max-width:100%;display:block}
.sidebar .brand-logo{height:36px}
[data-theme="dark"] .brand-logo{filter:brightness(0) invert(1)}
.sidebar nav{display:flex;flex-direction:column;gap:2px;padding:12px}
.sidebar{display:flex;flex-direction:column}
.sidebar nav{flex:1}
.side-user{position:relative;margin:8px 10px 12px;flex-shrink:0}
.su-btn{display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;border-radius:16px;background:color-mix(in oklab,var(--side-heading) 7%,transparent);border:1px solid var(--glass-border);cursor:pointer;text-align:left;color:var(--side-text)}
.su-btn:hover{background:color-mix(in oklab,var(--side-heading) 12%,transparent)}
.su-ava{width:38px;height:38px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:var(--mocha);color:#fff;font-weight:700;font-size:.82rem}
.su-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.su-txt b{font-size:.94rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-txt small{font-size:.74rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-chev{font-size:.7rem;color:var(--text-muted)}
.su-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);z-index:70;padding:6px;border-radius:16px;background:var(--glass-solid);border:1px solid var(--glass-border);box-shadow:0 18px 40px -18px rgba(74,47,39,.55)}
button.su-i{background:none;border:0;width:100%;font:inherit;text-align:left;cursor:pointer}
.su-i{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;color:var(--side-text);text-decoration:none;font-size:.88rem}
.su-i:hover{background:color-mix(in oklab,var(--side-heading) 9%,transparent)}
.su-i.soon{color:var(--text-subtle);cursor:default}
.branch-chip .bc-txt{display:flex;flex-direction:column;justify-content:center;line-height:1.25;text-align:left}
.branch-chip .bc-txt b{font-size:.98rem;font-weight:700}
.branch-chip .bc-txt small{font-size:.74rem;opacity:.75}
.su-i.su-theme{width:100%;background:none;border:0;cursor:pointer;font:inherit;color:var(--side-text)}
/* Công tắc Sáng/Tối — icon nằm trong núm, gạt PHẢI = Sáng, gạt TRÁI = Tối.
   Màu lấy thẳng từ bảng màu KIMLY: champagne/mocha khi Sáng, espresso khi Tối. */
.su-i.su-theme{justify-content:flex-start;gap:9px;padding:8px 11px}
.su-theme-ten{white-space:nowrap}
.su-i.su-theme .su-gat{margin-left:auto}   /* hai công tắc (Giao diện · Thông báo) thẳng mép phải */
.su-i.su-theme .lic{width:18px;height:18px;flex-shrink:0}
.su-gat{position:relative;flex-shrink:0;width:78px;height:34px;border-radius:999px;
  background:linear-gradient(135deg,var(--champagne),color-mix(in oklab,var(--mocha) 34%,var(--champagne)));
  box-shadow:inset 0 2px 6px rgba(46,33,26,.26),0 1px 0 rgba(255,255,255,.4);transition:background .24s}
.su-num{position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--mocha-dark);
  box-shadow:0 4px 10px rgba(46,33,26,.34);transition:transform .24s,background .24s,color .24s;transform:translateX(44px)}
.su-num svg{width:16px;height:16px}
.su-num .gat-moon{display:none}
[data-theme="dark"] .su-gat{background:linear-gradient(135deg,#3a2b24,#191210);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.06)}
[data-theme="dark"] .su-num{transform:translateX(0);background:var(--mocha);color:#fff}
[data-theme="dark"] .su-num .gat-sun{display:none}
[data-theme="dark"] .su-num .gat-moon{display:block}
/* công tắc THÔNG BÁO (02/10) — đúng mẫu "Công tắc / Switch" trong Thư viện UI KIMLY (bật tắt có hiệu lực ngay):
   kiểu iPhone 51×31 — TẮT nền xám núm trái · BẬT nền mocha núm phải; núm trắng không chữ/biểu tượng cho sạch */
.su-gat.tb-gat{width:51px;height:31px;margin-left:auto;background:color-mix(in oklab,var(--text-muted) 32%,var(--surface-sunken))!important;box-shadow:inset 0 1px 3px rgba(46,33,26,.22)!important;transition:background .22s}
.tb-gat .su-num{top:2px;left:2px;width:27px;height:27px;transform:translateX(0)!important;background:#fff!important;box-shadow:0 2px 5px rgba(46,33,26,.3)!important;transition:transform .22s cubic-bezier(.3,.7,.4,1)}
.tb-gat .su-num svg{display:none}
.su-tb.tb-on .tb-gat{background:var(--mocha)!important}
.su-tb.tb-on .tb-gat .su-num{transform:translateX(20px)!important}
/* Giao diện tối — cùng công tắc iOS: giao diện tối = BẬT (nền mocha, núm phải) */
[data-theme="dark"] .gd-gat{background:var(--mocha)!important}
[data-theme="dark"] .gd-gat .su-num{transform:translateX(20px)!important}
#thong-bao [hidden]{display:none!important}
.su-top{position:relative;flex-shrink:0}
.su-menu-top{left:auto;right:0;bottom:auto;top:calc(100% + 8px);width:252px}
.su-head{padding:9px 11px 10px;margin-bottom:4px;border-bottom:1px solid var(--glass-border);display:flex;flex-direction:column;line-height:1.3}
.su-head b{font-size:.94rem}
.su-head small{font-size:.75rem;color:var(--text-muted)}
.avatar{cursor:pointer;border:0}
.su-i.soon .soon-b{margin-left:auto;font-size:.6rem;background:color-mix(in oklab,var(--side-heading) 8%,transparent);color:var(--text-muted);padding:2px 6px;border-radius:6px}
.side-item{display:flex;align-items:center;gap:11px;color:var(--side-text);text-decoration:none;padding:11px 13px;border-radius:14px;font-size:.9rem;font-weight:500;transition:background .13s,color .13s}
.side-item:hover{background:color-mix(in oklab,var(--side-heading) 8%,transparent)}
.side-item.on{background:var(--mocha);color:#fff;font-weight:600;box-shadow:0 14px 28px -14px rgba(140,84,64,.75),inset 0 1px 0 rgba(255,255,255,.35);border:1px solid color-mix(in oklab,var(--champagne) 55%,transparent)}
.side-item .ic{width:20px;text-align:center;font-size:1rem}
.side-item.soon{color:var(--text-subtle);cursor:default}
.side-item.soon .soon-b{margin-left:auto;font-size:.6rem;background:color-mix(in oklab,var(--side-heading) 8%,transparent);color:var(--text-muted);padding:2px 6px;border-radius:6px;letter-spacing:.03em}
.main{flex:1;min-width:0;display:flex;flex-direction:column;background:transparent;padding:0 14px}
.topbar{display:flex;align-items:center;gap:12px;margin:14px 0 0;border-radius:20px;background:var(--glass-strong);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);padding:11px 18px;position:sticky;top:14px;z-index:20;box-shadow:var(--glass-shadow)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.topbar{background:var(--glass-solid)}}
.crumb{color:var(--mocha-dark);font-weight:600;font-size:.95rem}.crumb .muted2{color:#b09a86;font-weight:400}
.topbar .sp{flex:1}
.branch-chip{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;background:var(--champagne);color:var(--espresso);padding:8px 16px;border-radius:999px;white-space:nowrap}
.branch-chip .lic{width:19px;height:19px;flex-shrink:0}
.topbar .who{font-size:.8rem;color:var(--text-soft);white-space:nowrap}
.content{padding:22px 8px 28px;max-width:1320px;width:100%;margin:0 auto}
.grp>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;color:var(--side-heading);padding:11px 13px;border-radius:14px;font-size:.9rem;font-weight:600}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary:hover{background:color-mix(in oklab,var(--side-heading) 8%,transparent)}
.grp>summary.soon{color:var(--text-subtle);font-weight:500}
.grp>summary .chev{margin-left:auto;font-size:.62rem;opacity:.6;transition:transform .15s}
.grp[open]>summary .chev{transform:rotate(180deg)}
.grp .sub{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px 14px;margin-left:16px;border-left:1px solid color-mix(in oklab,var(--side-heading) 12%,transparent)}
.sub-item{display:flex;align-items:center;color:var(--text-muted);text-decoration:none;padding:8px 12px 8px 16px;border-radius:11px;font-size:.85rem}
.sub-item:hover{background:color-mix(in oklab,var(--side-heading) 7%,transparent);color:var(--side-text)}
.sub-item.on{background:var(--mocha);color:#fff;font-weight:600;box-shadow:0 12px 24px -14px rgba(140,84,64,.7)}
.sub-item.soon{color:var(--text-subtle);cursor:default}
.sub-item .soon-b,.grp>summary .soon-b{font-size:.58rem;background:color-mix(in oklab,var(--side-heading) 8%,transparent);color:var(--text-muted);padding:1px 6px;border-radius:6px;margin-left:8px}
.sub-item.khung{color:var(--text-subtle)}
.sub-item.khung .khung-b{margin-left:auto;font-size:.56rem;background:color-mix(in oklab,var(--side-heading) 7%,transparent);color:var(--text-subtle);padding:1px 6px;border-radius:5px}
.hamb{display:none;background:none;border:0;font-size:1.3rem;cursor:pointer;color:var(--espresso);padding:0 4px}
@media(max-width:860px){
 /* Menu overlay mobile: đặc hơn cho rõ (không phải kính-trên-aurora như desktop) */
 .sidebar{position:fixed;left:-290px;top:0;margin:12px;height:calc(100vh - 24px);z-index:60;transition:left .2s;background:var(--glass-solid);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 50px rgba(74,47,39,.45)}
 .sidebar.open{left:0}.main{padding:0 10px}.content{padding:14px 4px 92px}
 /* Header card mobile: brand trái + avatar/nút phải; ẩn hamburger/breadcrumb/tên/logout-desktop */
 .topbar{margin:12px 0 0;padding:10px 14px;gap:10px}
 .hamb,.crumb,.topbar .sp,.topbar .who,.branch-chip,.logout-d,.side-user{display:none}
 .mbrand{display:inline-flex;margin-right:auto}
 .avatar{display:inline-flex}
 .logout-m{display:flex;margin-top:8px}
 /* Thanh tab dưới đáy — điều hướng kiểu app native */
 .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;gap:2px;padding:7px 8px calc(7px + env(safe-area-inset-bottom));box-sizing:border-box;min-height:calc(70px + env(safe-area-inset-bottom))}
 .tabbar{background:var(--glass-solid);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid var(--glass-border);box-shadow:0 -10px 30px -14px rgba(74,47,39,.4)}
 .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;border:0;background:none;color:var(--text-muted);font-weight:600;font-size:.66rem;line-height:1.1;text-decoration:none;cursor:pointer;border-radius:14px}
 .tab.on{color:var(--mocha-dark);background:color-mix(in oklab,var(--mocha) 15%,transparent)}
 .tab:active{transform:scale(.94)}
 .cols2{grid-template-columns:minmax(0,1fr)}
 .dl-grid,.dl-right{grid-template-columns:1fr}
 /* Bảng nhiều cột: cuộn ngang mượt thay vì ép cột (kéo ngang bằng ngón tay) */
 .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
 .scroll table{min-width:560px}
 .side-item,.grp>summary,.sub-item{padding-top:12px;padding-bottom:12px}
 .card{padding:16px}
 body:has(.sidebar.open) .main{filter:brightness(.65);transition:filter .2s}

 /* ===== Bổ sung 15/08 sau khi rà trên điện thoại ===== */
 /* 1. iOS TỰ PHÓNG TO trang khi bấm vào ô nhập có cỡ chữ < 16px — bấm ô tìm khách là màn hình
       nhảy, phải chụm tay thu lại. 16px là ngưỡng Safari không zoom. */
 input,select,textarea{font-size:16px}
 /*    02/10 rà hết 80 trang × 10 vai: dòng trên YẾU — ô có style viết thẳng (font-size:.84rem) hoặc luật riêng mạnh hơn
       vẫn 13–14px ở 14 trang (ô chọn nhanh ngày ở Điều hành, ô ngày Chốt ca, ô ghi chú lịch, hồ sơ nghề KTV, tên ca
       Lịch làm…) → bấm vào là Safari phóng to. Ép 16px cho MỌI ô gõ chữ (bỏ ô tick/chấm/thanh kéo). */
 input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important}
 /* 2. Cột lọc bên trái (khai bằng style inline width:240px) — trên điện thoại cho nằm full
       chiều ngang, không thì bảng bên cạnh bị bóp còn một nửa màn hình. */
 [style*="width:240px"],[style*="width:220px"]{width:100%!important;flex-shrink:1!important}
 /* 3. Form 2 cột trong popup/khay sửa → 1 cột, khỏi phải cuộn ngang trong ô nhập */
 [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
 /* 4. Popup: gần full màn, bo góc trên, dính đáy như app điện thoại */
 dialog{width:96vw!important;max-width:96vw!important;max-height:92vh;overflow:auto}
 /* 5. Nút trong popup/khay xếp dọc cho dễ bấm bằng ngón cái */
 dialog .btn{padding:.75rem 1rem}
 /* 6. Dải số liệu + hàng nút: giãn cách thoáng hơn khi xuống dòng */
 .card [style*="display:flex"][style*="gap:26px"]{gap:14px!important}
 /* 7. Bảng: nhắc người dùng còn cuộn ngang (bóng mờ mép phải) */
 .scroll{background:linear-gradient(90deg,transparent 85%,color-mix(in srgb,var(--mocha) 8%,transparent)) right/28px 100% no-repeat}
 /* 8. Chạm: vùng bấm tối thiểu 40px cho nút nhỏ trong bảng */
 .btn.sm{min-height:38px;display:inline-flex;align-items:center}
 /* 9. Cho phép co: mặc định phần tử trong flex/grid KHÔNG co nhỏ hơn nội dung, nên một hàng
       ngang dài (tên + số + nút) đẩy cả thẻ rộng ra ngoài màn hình. min-width:0 gỡ chốt đó.
       Bảng trong .scroll vẫn giữ min-width riêng (chọn lọc mạnh hơn) nên vẫn cuộn ngang bình thường. */
 .card{max-width:100%;min-width:0}
 .card *{min-width:0}
 /* Lưới 2 cột tỉ lệ (1.35fr 1fr…) cũng về 1 cột — quy tắc "1fr 1fr" ở trên không bắt được */
 [style*="grid-template-columns:1.35fr"],[style*="grid-template-columns:2fr"],[style*="grid-template-columns:1.5fr"]{grid-template-columns:1fr!important}
 /* Nhãn dài trong bảng phân quyền (ô tick + mô tả) — cho xuống dòng thay vì đẩy ngang */
 /* Màn Phân quyền: lưới "cột vai 210px + bảng quyền" → 1 cột, không thì cột phải chỉ còn 85px
    trong khi bảng bên trong cần 240px (Sếp không thấy, nhưng mở trên điện thoại là lệch hết). */
 .pq-2cot{grid-template-columns:1fr!important;gap:12px!important}
 label[style*="align-items:flex-start"]{flex-wrap:wrap}
 label[style*="align-items:flex-start"] > *{min-width:0}
 /* 02/10 phiếu chấm bài: luật trên làm Ô TICK đứng một hàng, chữ lỗi dài rớt xuống hàng dưới (lệch cả danh sách).
    Nhãn có ô tick/chấm thì KHÔNG cho xuống hàng — chữ tự xuống dòng bên phải ô tick. */
 label[style*="align-items:flex-start"]:has(>input[type=checkbox],>input[type=radio]){flex-wrap:nowrap}
 label[style*="align-items:flex-start"]:has(>input[type=checkbox],>input[type=radio])>span{flex:1 1 auto}
 /* Phiếu chấm bài trên điện thoại (02/10 Sếp "cần mượt"): ảnh to hơn, mỗi lỗi là một ô chạm to, tick xong ô sáng lên,
    thanh kéo điểm cao 36px cho dễ đặt ngón. */
 /* điện thoại: ảnh chấm TO — mỗi ảnh ~80% bề ngang, cao tới nửa màn, vuốt ngang qua từng tấm */
 .cb-anh{gap:10px;margin:0 -18px 12px;padding:0 18px 4px;scroll-padding:18px}
 .cb-anh a{flex:0 0 80%}
 .bb-anh img{width:96px;height:96px}
 .cb-anh img{width:100%!important;height:min(52vh,420px)!important}
 .cb-chip-ngay{flex-wrap:nowrap!important;overflow-x:auto;margin-right:-16px;padding-right:16px;padding-bottom:2px;scrollbar-width:none}
 .cb-chip-ngay::-webkit-scrollbar{display:none}.cb-chip-ngay>*{flex:0 0 auto}
 label.cb-loi{padding:7px 10px!important;border:1px solid var(--line);border-radius:10px;margin-bottom:5px;font-size:.8rem!important;line-height:1.35!important;gap:9px!important;align-items:center!important;background:var(--glass-strong);min-height:42px}
 label.cb-loi:has(input:checked){border-color:var(--warning-strong);background:color-mix(in oklab,var(--warning-strong) 9%,var(--glass-strong))}
 label.cb-loi input{width:20px!important;height:20px!important;margin-top:0!important}
 /* 02/10 Sếp: "chữ nhỏ lại chút" — ô Điểm tổng ghim gọn một dòng thấp, chừa chỗ cho danh sách lỗi */
 /* chân phiếu chấm: điện thoại bỏ dòng gợi ý (đã có ở đầu từng tiêu chí), hai nút chia đôi một hàng */
 #moChamBai .mo-foot{flex-wrap:nowrap;gap:10px;padding:12px 16px}#moChamBai .mo-foot .hint{display:none}
 #moChamBai .mo-foot .btn{flex:1 1 0;justify-content:center;min-height:46px;white-space:nowrap}
 #moChamBai .mo-foot .btn:not(.ghost){flex-grow:1.6}
 .cb-tong{padding:6px 12px!important;margin-bottom:10px!important}.cb-tong span{font-size:.85rem}.cb-tong b{font-size:1.35rem!important;line-height:1.1}
 input.cb-thanh{height:36px}
 /* Hàng Chờ chấm: bảng → thẻ. Giờ · Khách · số ảnh ở hàng đầu, dịch vụ + KTV dưới; cả thẻ là một cú chạm (lớp phủ của nút). */
 .ds-cho,.ds-cho tbody{display:block;min-width:0!important}
 .ds-cho .cbd-dau{display:none}
 .ds-cho .cbd-ngay{display:block}.ds-cho .cbd-ngay td{display:block}
 .ds-cho tr.cb-dong{display:grid;grid-template-columns:auto 1fr auto;column-gap:10px;row-gap:2px;padding:11px 10px;border-bottom:1px solid var(--line);position:relative}
 .ds-cho tr.cb-dong td{border:0!important;padding:0!important;background:none!important}
 .ds-cho .cbd-gio{grid-row:1;grid-column:1;padding-top:2px!important}
 .ds-cho .cbd-khach{grid-row:1;grid-column:2}
 .ds-cho .cbd-anh{grid-row:1;grid-column:3}
 .ds-cho .cbd-dv{grid-row:2;grid-column:2/4;font-size:.86rem}
 .ds-cho .cbd-ktv{grid-row:3;grid-column:2;font-size:.8rem;color:var(--text-muted)}
 .ds-cho .cbd-nut{grid-row:3;grid-column:3}
 .ds-cho tr.cb-dong{cursor:pointer}
 .ds-cho tr.cb-dong:active{background:color-mix(in oklab,var(--mocha) 8%,transparent)}
 /* Bảng → THẺ trên điện thoại (02/10 Sếp "dùng như app"): bọc .scroll.bang-the. Mỗi dòng là một thẻ lưới 3 cột,
    ô có data-nhan in nhãn nhỏ phía trên số; .bt-ca = cả hàng; .bt-so = số hạng/huy hiệu góc trái. Máy tính vẫn bảng. */
 .bang-the,.ds-cho-boc{overflow:visible!important;background:none!important}
 .bang-the table,.bang-the tbody{display:block;min-width:0!important;width:100%}
 .bang-the tr:has(>th){display:none}
 .bang-the tr{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 10px;padding:12px 4px;border-bottom:1px solid var(--line)}
 .bang-the tr:has(>td.bt-so){padding-left:40px}
 .bang-the td{display:block;border:0!important;padding:0!important;text-align:left!important;min-width:0!important;max-width:none!important;width:auto!important;background:none}
 .bang-the td[data-nhan]::before{content:attr(data-nhan);display:block;font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1px}
 .bang-the td.bt-ca{grid-column:1/-1}.bang-the td.bt-2{grid-column:span 2}
 .bang-the td.bt-so{position:absolute;left:4px;top:12px;width:30px!important}
 .bang-the td:empty{display:none}
 .bang-the td svg{width:100%!important}
 .bang-the td.bt-dv{font-weight:600;margin-top:-6px}
 /* 02/10: "anywhere" làm bề rộng tối thiểu của chữ = 1 ký tự → hàng flex chật là máy BẺ CẢ SỐ TIỀN ("0" / "đ" ở Chốt ca,
    "12.500." / "000đ"). "break-word" chỉ bẻ khi chữ thật sự tràn khung — link/chuỗi dài vẫn xuống dòng, số tiền giữ trọn. */
 .card{overflow-wrap:break-word}
}
/* ===== Nút đổi Sáng/Tối ===== */
/* ===== Vỏ mobile: header card + avatar + thanh tab dưới ===== */
.avatar{align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--champagne);color:var(--mocha-dark);font-weight:700;font-size:.82rem;flex-shrink:0}
.mbrand{align-items:center;gap:6px;font-family:'Playfair Display',serif;font-weight:700;color:var(--espresso);font-size:1.08rem;text-decoration:none;white-space:nowrap}
.tab .tic{line-height:1;display:inline-flex;align-items:center;justify-content:center}
/* Icon nét: kế thừa màu chữ (currentColor) → tự đổi theo theme + trạng thái active */
.lic{display:block;width:19px;height:19px;flex-shrink:0}
.side-item .ic,.grp>summary .ic{display:inline-flex;align-items:center;justify-content:center}
.tab .tic .lic{width:23px;height:23px}
.ti-ic .lic{width:22px;height:22px;color:var(--mocha-dark)}
.tile.ok .ti-ic .lic{color:var(--ok)}.tile.warn .ti-ic .lic{color:var(--warn)}.tile.danger .ti-ic .lic{color:var(--danger)}.tile.mocha .ti-ic .lic{color:var(--mocha-dark)}
/* Ẩn phần vỏ-mobile ở DESKTOP (media không chồng lấn với khối mobile ≤860).
   .chi-dt = "chỉ điện thoại": khối thay thế bảng trên màn hẹp (ví dụ thẻ dọc Chi nhánh
   ở màn Điều hành). Display đặt Ở ĐÂY chứ KHÔNG inline trên phần tử — inline sẽ đè
   luật ẩn của media và thẻ hiện cả trên desktop (đã dính đúng bệnh này lúc dựng 23/08). */
.chi-dt{display:flex;flex-direction:column;gap:10px}
@media(min-width:861px){.tabbar,.su-top,.mbrand,.chi-dt{display:none}}
/* 01/10 (rà iPhone ảo): .lic là display:block nên đứng trong TIÊU ĐỀ thì tự rớt xuống một dòng riêng phía trên chữ
   ("Cần xử lý ngay", "Lịch sale chốt", "Khách sợ điều gì", tên màn h1…). Biểu tượng là con TRỰC TIẾP của thẻ chữ → nằm cùng hàng. */
:is(h1,h2,h3,h4,h5,b,strong,summary,legend,.msg,p,li,label,td)>.lic{display:inline-block;vertical-align:-.2em;margin-right:.12em}
/* Nhảy mục bằng thanh ghim màn buổi (#anh-buoi…) — chừa chỗ cho thanh ghim khỏi đè tiêu đề khối */
#muc-khach,#anh-buoi,#fx,#chuyen-khach,#muc-hopdong,#muc-dieutri{scroll-margin-top:78px}
/* 01/10: Safari iPhone BỎ QUA background-attachment:fixed → nền chuyển màu cuộn theo trang và đứt ngang thành dải kem ở cuối
   trang dài. Điện thoại: vẽ nền lên một lớp cố định phủ kín khung nhìn (dư trên/dưới cho cú kéo nảy), thân trang để trong suốt. */
@media(max-width:860px){
 body{background:transparent}
 body::before{content:"";position:fixed;left:0;right:0;top:-20vh;bottom:-20vh;z-index:-1;pointer-events:none;background-color:var(--cream);background-image:var(--page-grad)}
}
/* ===== 02/10 — cho mượt kiểu iOS (Sếp: "làm trước được phần nào thì làm") ===== */
.sb-nen{display:none}
@media(max-width:860px){
 /* MENU "THÊM" = BẢNG TRƯỢT TỪ ĐÁY (như bảng Chia sẻ của iPhone): chạm nền mờ / vuốt xuống / Esc là đóng.
    "html .sidebar" để thắng luật .sidebar{top:safe-area} viết phía sau. */
 html .sidebar{left:0;right:0;top:auto;bottom:0;margin:0;width:auto;height:auto;max-height:min(84vh,calc(100dvh - 70px));
   border-radius:26px 26px 0 0;padding-bottom:env(safe-area-inset-bottom);overflow-y:auto;overscroll-behavior:contain;
   transform:translateY(105%);visibility:hidden;transition:transform .34s cubic-bezier(.32,.72,0,1),visibility 0s linear .34s;
   box-shadow:0 -18px 50px -10px rgba(74,47,39,.45)}
 html .sidebar.open{transform:none;visibility:visible;transition:transform .34s cubic-bezier(.32,.72,0,1),visibility 0s}
 html .sidebar::before{content:"";display:block;flex:none;width:40px;height:5px;border-radius:3px;margin:9px auto 0;background:color-mix(in oklab,var(--espresso) 22%,transparent)}
 /* đóng thì nền mờ ẨN HẲN (visibility) — Safari iOS 26 lấy màu lớp cố định chạm mép trên để tô thanh trạng thái,
    để nó "trong suốt mà vẫn còn" là thanh đồng hồ bị tô xám mãi sau khi đóng menu (thử iPhone ảo 02/10) */
 .sb-nen{display:block;position:fixed;inset:0;z-index:59;background:rgba(43,23,16,.34);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s,visibility 0s linear .28s}
 body:has(.sidebar.open) .sb-nen{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s,visibility 0s}
 body:has(.sidebar.open) .main{filter:none}
 body:has(.sidebar.open){overflow:hidden}
 /* DẢI CHE TAI THỎ: cuộn trang thì chữ không còn trôi đè dưới đồng hồ / pin. Safari (chưa cài vào màn hình chính) báo
    safe-area-inset-top = 0 mà vẫn vẽ trang lên dưới thanh trạng thái → dải bắt đầu từ -100px (thử trên iPhone ảo 02/10). */
 .layout::after{content:"";position:fixed;top:-100px;left:0;right:0;height:calc(100px + env(safe-area-inset-top));z-index:58;pointer-events:none;
   background:color-mix(in oklab,var(--cream) 80%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
}
/* PHẢN HỒI KHI CHẠM: bỏ vệt xám của Safari + bỏ trễ chạm; nút/thẻ lún nhẹ khi ngón tay đặt xuống */
a,button,label,summary,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(hover:none){
 /* máy cảm ứng: :hover bị "dính" sau khi chạm (nút đổi màu + nhích lên rồi đứng yên) → bỏ hiệu ứng rê chuột */
 .btn:hover,.tile:hover{transform:none}
 .btn:active,a.khung:active,a.card:active,.tile:active,.goiItem:active{transform:scale(.97);transition:transform .08s}
}
/* (02/10) ĐÃ THỬ "chuyển trang mờ dần" (@view-transition) rồi BỎ: sang trang ngoài khung CRM (xem trước bài viết, in bill,
   đăng nhập…) trình duyệt huỷ hiệu ứng và ném lỗi JS ở trang đích — thước Chrome đỏ, chặn deploy. Cảm giác "không chớp trắng"
   giờ do khung chờ của muot.js lo. Đừng bật lại nếu chưa có cách chặn lỗi ở MỌI trang lẻ. */
/* ===== 02/10 đợt 3 — public/js/muot.js (chỉ điện thoại): kéo-tải-lại · tiêu đề thu nhỏ · khung chờ ===== */
.kl-keo,.kl-tieu-de-nho,.kl-cho{display:none}
@media(max-width:860px){
 /* ② kéo xuống để tải lại (app đã cài): viên tròn kính trôi xuống từ mép trên */
 .kl-keo{display:flex;align-items:center;gap:8px;position:fixed;left:50%;top:calc(env(safe-area-inset-top) - 44px);z-index:65;transform:translate(-50%,0);opacity:0;
   padding:8px 14px;border-radius:999px;background:var(--glass-solid,var(--surface));border:1px solid var(--glass-border,var(--line));box-shadow:0 8px 24px -10px rgba(74,47,39,.45);
   font-size:.8rem;font-weight:600;color:var(--mocha-dark);transition:transform .25s,opacity .25s;pointer-events:none}
 .kl-keo-vong{width:16px;height:16px;border-radius:50%;border:2px solid color-mix(in oklab,var(--mocha) 30%,transparent);border-top-color:var(--mocha-dark);transition:transform .2s}
 .kl-keo.du .kl-keo-vong{transform:rotate(180deg)}
 .kl-keo.dang .kl-keo-vong{animation:kl-quay .7s linear infinite}
 /* ③ tiêu đề to thu nhỏ khi cuộn: thanh mảnh kính dưới đồng hồ, chạm = cuộn về đầu */
 .kl-tieu-de-nho{display:block;position:fixed;left:0;right:0;top:env(safe-area-inset-top);z-index:57;padding:10px 60px;text-align:center;
   font-weight:700;font-size:.95rem;color:var(--espresso);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
   background:color-mix(in oklab,var(--cream) 82%,transparent);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
   border-bottom:1px solid var(--glass-border,var(--line));transform:translateY(-110%);opacity:0;transition:transform .25s cubic-bezier(.32,.72,0,1),opacity .2s}
 .kl-tieu-de-nho.hien{transform:none;opacity:1}
 .kl-tieu-de-nho{height:44px;line-height:24px}
 /* thanh ghim màn buổi chỉ dính khi đã cuộn qua h1 — lúc đó tiêu đề nhỏ đang hiện → dính ngay DƯỚI tiêu đề nhỏ */
 .ghim-buoi{top:calc(env(safe-area-inset-top) + 50px)!important}
 #muc-khach,#anh-buoi,#fx,#chuyen-khach,#muc-hopdong,#muc-dieutri{scroll-margin-top:124px}
 /* ④ khung chờ khi chuyển màn: phủ vùng nội dung (thanh tab vẫn thấy), khối xám nhạt lấp lánh */
 .kl-cho{display:flex;flex-direction:column;gap:12px;position:fixed;left:0;right:0;top:0;bottom:calc(66px + env(safe-area-inset-bottom));z-index:54;
   padding:calc(env(safe-area-inset-top) + 86px) 14px 14px;background-color:var(--cream);background-image:var(--page-grad);animation:kl-hien .15s ease-out}
 .kl-cho i{display:block;border-radius:18px;background:linear-gradient(100deg,rgba(255,255,255,.55) 30%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.55) 70%);
   background-size:300% 100%;animation:kl-lap 1.2s ease-in-out infinite;box-shadow:0 1px 0 rgba(74,47,39,.06)}
 .kl-cho .k1{height:34px;width:62%;border-radius:12px}.kl-cho .k2{height:120px}.kl-cho .k3{height:64px}
}
/* ===== 02/10 — SỔ LỊCH DẠNG THẺ trên điện thoại (rà vai lễ tân: bảng 9 cột chỉ thấy Giờ·Khách·Dịch vụ, trạng thái + KTV
   khuất bên phải phải vuốt ngang). Cùng một <table class="so-lich"> — ≤640px mỗi <tr> thành thẻ lưới:
   giờ · khách · trạng thái / dịch vụ / KTV · nút. Bấm thẻ vẫn mở thao tác nhanh (tr.dong-nhanh giữ nguyên). ===== */
@media(max-width:640px){
 .scroll table.so-lich{min-width:0;display:block;border:0}
 table.so-lich tbody{display:block}
 table.so-lich tr:has(>th){display:none}
 table.so-lich tr{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"gio khach tt" "dv dv dv" "ktv ktv nut";
   gap:6px 10px;align-items:start;padding:12px 4px 12px 0;border-bottom:1px solid var(--line)}
 table.so-lich td{display:block;padding:0 !important;border-bottom:0 !important;min-width:0 !important}
 table.so-lich td.an-dt{display:none}
 table.so-lich td.sl-gio{grid-area:gio;padding-left:10px !important;font-weight:700}
 table.so-lich td.sl-khach{grid-area:khach}
 table.so-lich td.sl-tt{grid-area:tt;text-align:right}
 table.so-lich td.sl-dv{grid-area:dv;padding-left:13px !important;font-size:.9rem}
 table.so-lich td.sl-ktv{grid-area:ktv;padding-left:13px !important;font-size:.86rem;align-self:center}
 table.so-lich td.sl-ktv:not(:empty)::before{content:"KTV: ";color:var(--text-muted);font-size:.8rem}
 table.so-lich td.sl-nut{grid-area:nut}
 table.so-lich td.sl-nut>div{flex-direction:row !important;align-items:center !important}
 table.so-lich tr:has(>td[colspan]){display:block}
}
@media(min-width:861px){details.so-loc>summary{display:none}}
/* thanh ghim màn buổi (02/10): nút In trong thanh chỉ ở máy tính; điện thoại có hàng .in-dt riêng ngay dưới.
   Thanh dài hơn màn thì mép phải mờ (class .tran do script nhỏ trong xem.js bật) — báo là vuốt ngang được. */
.ghim-in{display:contents}.in-dt{display:none}.chi-dt-chu{display:none}
@media(max-width:640px){.ghim-buoi .ghim-in{display:none}.ghim-buoi{gap:5px!important;padding:7px 8px!important}.ghim-buoi>.btn{padding:.3rem .55rem;font-size:.78rem;min-height:38px;gap:4px}.chi-dt-chu{display:inline}.in-dt{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 12px}
 .ghim-buoi.tran{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}}
/* 02/10 trang chủ quản lý: "Đang ở tiệm" điện thoại đứng trên (.an-may), máy tính giữ cột trái (.an-dt-goc);
   khối thu gọn .gon-dt: máy tính mở sẵn và ẩn dòng tóm tắt */
.an-may{display:none}
@media(max-width:860px){.an-may{display:block}.an-dt-goc{display:none}}
@media(min-width:861px){details.gon-dt>summary{display:none}}
details.gon-dt>summary{list-style:none}details.gon-dt>summary::-webkit-details-marker{display:none}
details.gon-dt[open]>summary{display:none}
/* 02/10 (Sổ quỹ trên iPhone: ô "Ngày chi" lòi mép phải): ô ngày/giờ kiểu iOS có bề rộng tối thiểu riêng, vượt khung chứa
   hẹp → ép co theo khung, chữ ngày căn trái như các ô khác */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{min-width:0;max-width:100%;box-sizing:border-box}
input[type=date]::-webkit-date-and-time-value,input[type=time]::-webkit-date-and-time-value{text-align:left}
/* 02/10 thẻ CN khối Mục tiêu tháng: dòng tóm tắt; mở rồi thì dòng "% · nhịp" thừa (chi tiết đã có) — ẩn đi */
details.mt-dong>summary::-webkit-details-marker{display:none}
details.mt-dong[open] .mt-tom{display:none}
/* 02/10 màn Mục tiêu: hàng chọn chi nhánh chỉ trên điện thoại — dính dưới thanh tiêu đề nhỏ, cuộn ngang */
.mt-chon{display:none}
@media(max-width:860px){.mt-chon{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;position:sticky;top:calc(env(safe-area-inset-top) + 48px);z-index:30;
  padding:8px 2px;margin:4px 0 10px;background:color-mix(in oklab,var(--cream) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:14px}
 .mt-chon::-webkit-scrollbar{display:none}.mt-chon .btn{flex:none;white-space:nowrap}}
@keyframes kl-quay{to{transform:rotate(360deg)}}
@media(min-width:861px){.chi-dt-vuot{display:none}}
@keyframes kl-lap{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes kl-hien{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.kl-cho i,.kl-keo.dang .kl-keo-vong{animation:none}}
/* Toast pipeline: nền tối cả 2 theme (chữ trắng) */
[data-theme="dark"] #ptoast{background:var(--sidebar-bg)}
/* Máy yếu / người dùng tắt hiệu ứng trong suốt: bỏ blur cho nhẹ + rõ */
/* Khối đánh dấu data-desk-open: máy tính mở sẵn, điện thoại thu gọn (JS ở cuối trang bật lên).
   Không thì màn Nhân viên cao hơn 6000px, cuộn mãi mới tới danh sách người. */
@media (prefers-reduced-transparency:reduce){.topbar,.sidebar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:var(--glass-solid)!important}}
/* ===== ĐIỆN THOẠI — 95% nhân sự KIMLY dùng iPhone (Sếp xác nhận 15/08) =====
   Ba chỗ sửa, đo được lý do chứ không phải cho đẹp:

   1. Ô NHẬP PHẢI ≥16px. Safari trên iPhone có luật: ô nhập nhỏ hơn 16px thì mỗi lần bấm
      vào gõ là TRANG TỰ PHÓNG TO, người dùng phải tự thu lại. App đang để .95rem (15,2px)
      nên lễ tân gõ tên khách, KTV nhập ghi chú, sale tìm SĐT — cả ngày trang cứ nhảy.
      Popup đã xử đúng từ trước (đặt 16px) nhưng chỉ trong popup.
      Dùng max() để dù ai đổi cỡ gốc sau này cũng không tụt xuống dưới ngưỡng.

   2. CỠ GỐC 16px → 17px. App có hơn 570 chỗ dùng cỡ dưới 13px, trong đó 32 chỗ ở 11,2px —
      cầm điện thoại cách mắt 30cm trong phòng ánh sáng dịu là phải nheo. Nâng cỡ gốc thì
      MỌI cỡ theo rem to lên 6% mà không phải sửa 570 chỗ.

   3. NÚT CAO TỐI THIỂU 44px — chuẩn vùng chạm của Apple. Nút đang khoảng 40px, mà KTV bấm
      khi tay đang bận, bấm trượt là phải bấm lại. */
@media(max-width:640px){
 html{font-size:17px}
 input,select,textarea{font-size:max(16px,1rem)}
 .btn{min-height:44px}
 /* CỘT PHỤ ẨN TRÊN ĐIỆN THOẠI (Sếp chụp màn hình 19/08: bảng vỡ nát).
    Sổ lịch hẹn có 9 cột mà bề ngang tối thiểu chỉ 560px → chưa tới 70px/cột,
    cột "Khách" bị bóp đến mức chữ xuống dòng TỪNG CHỮ CÁI (K-H-Á-C-H).
    Giấu 3 cột ít dùng khi đứng quầy (Đã cọc · Kênh · Chi nhánh) — còn 6 cột,
    mỗi cột ~93px, đọc được. Máy tính bảng và máy bàn vẫn thấy đủ. */
 .an-dt{display:none!important}   /* !important (02/10): phần tử có style="display:…" viết thẳng trong thẻ vẫn phải ẩn */
 /* SỔ LỊCH — ghim trần ô Dịch vụ trên điện thoại (Sếp duyệt "vá nhanh" 23/08).
    dv_quan_tam nạp từ VT Tech có ca dài cả trăm ký tự, quấn 8+ dòng trong cột 180px
    kéo NGUYÊN HÀNG cao gần màn hình (đo thật: 372px vs hàng thường 71px). Kẹp tên
    dịch vụ 2 dòng + mỗi ghi chú 2 dòng; NGUYÊN VĂN vẫn đủ trong popup bấm-dòng
    (mo-row "Dịch vụ") và màn Mở lịch — không mất chữ nào, chỉ bớt bày ra sổ. */
 .dv-gon,.dv-not{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 /* Ô NGẮN KHÔNG ĐƯỢC ÉP XUỐNG DÒNG (ảnh Sếp gửi 19/08 lần 2).
    Ẩn bớt cột rồi mà bảng VẪN vỡ: tên "BÍCH LAN" và số điện thoại xếp dọc từng chữ.
    Vì min-width chỉ giữ TỔNG bề ngang bảng, không giữ từng cột — cột Dịch vụ có
    nội dung dài (tên dịch vụ + ghi chú) nuốt hết chỗ, bóp cột Khách và KTV còn đúng
    một ký tự. Đánh dấu mấy ô ngắn là ép chúng giữ nguyên một dòng, bảng tự nới ra
    và cuộn ngang — đọc được thay vì vỡ. */
 .o-ngan{white-space:nowrap}
 .o-ngan .muted{white-space:nowrap}
 /* TẮT KÍNH MỜ TRÊN ĐIỆN THOẠI (Sếp 20/08: "iPhone lag lắm, Android thì mượt").
    Safari xử lý làm mờ nền NẶNG HƠN Chrome nhiều. Mà thanh trên, thanh dưới, menu
    đều là thứ luôn hiện khi cuộn → máy phải tính lại hiệu ứng mờ MỖI KHUNG HÌNH.
    Đó là chỗ lag, không phải máy chủ (đo được: trang trả về trong 0,2 giây).
    Đáng chú ý: thanh dưới và menu VỐN ĐÃ dùng nền đặc mà vẫn bật làm mờ — nền đục
    thì không ai thấy hiệu ứng, nhưng máy vẫn è cổ tính. Tốn công vô ích.
    Tắt luôn cả ba, cho thanh trên nền đặc — hết lag, và hết cả chuyện chữ bên dưới
    xuyên qua thanh KIMLY (Sếp cũng đã phàn nàn). Máy tính bàn giữ nguyên kính. */
 .topbar,.sidebar,.tabbar,dialog.mo::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
 .topbar{background:var(--glass-solid)}
 /* CỘT SỐ KHÔNG BAO GIỜ ĐƯỢC XUỐNG DÒNG (ảnh Sếp gửi 20/08: bảng giá ở màn thu tiền
    hiện "2.90 / 0.00 / 0đ" — một con số 2.900.000đ vỡ thành ba dòng, đọc ra số khác hẳn).
    Số tiền bị ngắt dòng nguy hơn chữ bị ngắt: chữ thì khó đọc, số thì ĐỌC SAI. */
 .scroll td.right,.scroll th.right,td.right,th.right{white-space:nowrap}
 /* THANH KIMLY THÔI DÍNH TRÊN ĐẦU (ảnh Sếp 20/08 lần 3: nó che mất dòng nhãn
    "Khách · Dịch vụ quan tâm" khi cuộn). Trên máy tính thanh này có ích vì chứa
    đường dẫn, tên người, nút đăng xuất. Trên điện thoại nó đã bị rút gọn còn mỗi
    logo + avatar — dính lại chỉ tổ chiếm chỗ và che nội dung, trong khi việc điều
    hướng đã có thanh dưới lo. Cho nó cuộn theo trang. */
 .topbar{position:static}
 /* CHỮ Ở THANH DƯỚI KHÔNG ĐƯỢC XUỐNG DÒNG (ảnh Android 20/08: "Thẻ member" tách
    làm hai dòng, đội cả thanh cao lên và lệch hàng với ba mục kia).
    Do cỡ chữ gốc vừa nâng 16→17px nên nhãn dài nhất không còn vừa ô. Kéo cỡ chữ
    thanh này về đúng như trước rồi khoá không cho ngắt dòng. */
 .tab{white-space:nowrap;font-size:.62rem}
 /* TAI THỎ / VẠCH HOME (Sếp hỏi 19/08). Đã bật viewport-fit=cover ở thẻ viewport —
    nếu không bật thì env(safe-area-inset-*) LUÔN BẰNG 0, và mấy chỗ viết sẵn từ trước
    (thanh tab dưới, popup mời cài) đang cộng thêm 0px mà không ai biết.
    Bật rồi thì phải tự chừa chỗ cho cả bốn mép, kẻo nội dung chui xuống dưới tai thỏ:
      · trên  — thanh KIMLY tụt xuống dưới tai thỏ / Dynamic Island
      · dưới  — nội dung không bị vạch home che
      · hai bên — khi xoay ngang, tai thỏ ăn vào một cạnh
    Máy không có tai thỏ thì các giá trị này bằng 0, không đổi gì. */
 .topbar{margin-top:calc(12px + env(safe-area-inset-top))}
 .sidebar{top:env(safe-area-inset-top)}
 .content{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
 .main{padding-left:calc(10px + env(safe-area-inset-left));
       padding-right:calc(10px + env(safe-area-inset-right))}
}

/* FORM NHIỀU CỘT → MỘT CỘT (ảnh Sếp 20/08: màn hồ sơ khách vỡ nát, nhãn "Giai đoạn"
   và "Ngày sinh (để chúc sinh nhật)" bị bóp thành cột chữ dọc).
   Nguyên nhân: form viết cứng grid-template-columns:1fr 1fr ngay trong thẻ, nên lớp
   cols2 sẵn có của CRM — vốn tự co về một cột — không với tới được. Có hơn mười chỗ
   viết cứng như vậy rải khắp app, sửa từng chỗ vừa lâu vừa dễ sót nên ép chung.
   Dùng !important vì phải thắng style viết thẳng trong thẻ.
   NGƯỠNG 860px chứ không phải 640: hai cột nhãn dài đã chật từ cỡ máy tính bảng dọc,
   và lần đầu tôi để 640 nên cửa sổ hẹp trên máy tính vẫn vỡ — Sếp chụp lại vẫn thấy. */
@media(max-width:860px){
 form[style*="grid-template-columns"]{grid-template-columns:1fr !important}
 /* 02/10 (Sếp chụp hồ sơ khách trên iPhone): ô con khai "grid-column:span 2" (nút Lưu…) làm lưới 1 cột tự ĐẺ thêm cột
    thứ hai vô hình → các ô lại chia đôi lệch ("Khách Tl" bị bóp). Ép mọi ô trải trọn một hàng. */
 form[style*="grid-template-columns"]>[style*="grid-column"],[style*="grid-template-columns:1fr 1fr"]>[style*="grid-column"]{grid-column:1/-1 !important}
}

/* Vùng dữ liệu đánh dấu [data-solid]: luôn nền đặc, không blur (đọc số liệu cả ngày) */
[data-solid]{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}