/* ═══════════════════════════════════════════════════════════════════════════
   v3.136 · LIQUID EMERALD — bộ giao diện đã chốt (Master Prompt bản gộp 12/10/2026)

   Nạp SAU app.css → ui.css → glass.css, chỉ có hiệu lực khi <html data-skin="le">
   (Cài đặt → Danh sách & giao diện → "Giao diện Liquid Emerald"; tắt = giao diện
   cam đỏ cũ, không phải sửa màn hình nào).

   Nguyên tắc:
     · MỘT chỗ đổi màu: ánh xạ lại thang --br-* (hành động chính) sang emerald,
       nhờ vậy .btn/.pill/.tabs/.av/.tabbar… của 240+ màn hình đổi theo cùng lúc,
       không phải rải màu vào từng view.
     · Nền aqua–mint–lavender nằm SAU nội dung; thẻ trắng sữa gần đặc để chữ rõ.
     · Kính chỉ ở thanh trên, dock và sheet — không phủ blur lên mọi ô nhập.
     · Dock = capsule kính 4 mục + orb "+" tách riêng (xem core/TabBar.php).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Token ───────────────────────────────────────────────────────────── */
html[data-skin="le"]{
  /* Bộ token khởi tạo theo mục C của quy chuẩn — hiệu chỉnh tập trung ở đây */
  --le-ink:#102338;
  --le-muted:#586e83;
  --le-emerald:#087c68;
  --le-emerald-deep:#064d4c;
  --le-aqua:#bceff5;
  --le-mint:#d9fff1;
  --le-lilac:#e3dcff;
  --le-card:rgba(255,255,255,.80);
  --le-chip:rgba(255,255,255,.72);
  --le-pill:linear-gradient(180deg,#E6FFF6,#C7F3E4);
  --le-pill-ink:var(--le-emerald-deep);
  --le-glass:rgba(244,255,255,.42);
  --le-rim:rgba(255,255,255,.88);
  --le-radius-card:22px;
  --le-radius-field:14px;
  --le-radius-button:18px;
  --le-gutter:16px;
  --le-gap:12px;
  --le-field-height:48px;
  --le-touch-min:44px;
  --le-dock-height:68px;
  --le-orb-size:60px;
  --le-dock-gap:10px;
  --le-blur:20px;
  --le-shadow:0 8px 22px rgba(25,82,101,.10);

  /* Hành động chính: thang --br-* đổi từ cam đỏ sang emerald.
     Giữ nguyên TÊN biến nên không màn hình nào phải sửa. */
  --br-50:#EAF8F4;  --br-100:#CDEFE6; --br-200:#A3E2D3;
  --br-400:#2BA98E; --br-500:#0F9479; --br-600:#087C68; --br-700:#06655A; --br-900:#064D4C;

  /* Trạng thái tốt giữ xanh lá riêng để phân biệt với nút hành động */
  --lf-500:#2DB765; --lf-600:#1FA055; --lf-700:#158043;

  --ink:var(--le-ink); --ink2:#3C5068; --muted:var(--le-muted);
  --line:rgba(16,35,56,.09);
  --hair:var(--le-rim);
  --bg:#EFF7FA;

  --glass:var(--le-card);
  --glass-2:rgba(255,255,255,.92);
  --glass-side:rgba(255,255,255,.58);
  --card:var(--le-card);
  --blur:saturate(150%) blur(var(--le-blur));

  --sh-xs:0 1px 2px rgba(25,82,101,.05);
  --sh:var(--le-shadow);
  --sh-lift:0 2px 6px rgba(25,82,101,.07), 0 18px 38px -14px rgba(25,82,101,.22);

  --r-xs:12px; --r-sm:var(--le-radius-field); --r:var(--le-radius-card);
  --r-lg:24px; --r-xl:28px;
}

html[data-skin="le"][data-theme="dark"],
html[data-skin="le"][data-theme="auto"]{
  color-scheme:light dark;
}
html[data-skin="le"][data-theme="dark"]{
  --le-ink:#E6F2F0; --le-muted:#93AAB4;
  --le-card:rgba(14,32,34,.78); --le-rim:rgba(255,255,255,.12); --le-glass:rgba(10,26,28,.48);
  --le-chip:rgba(255,255,255,.10);
  --le-pill:linear-gradient(180deg,rgba(23,106,90,.95),rgba(12,72,64,.95));
  --le-pill-ink:#B7F2E2;
  --ink:var(--le-ink); --ink2:#C2D6D5; --muted:var(--le-muted);
  --line:rgba(255,255,255,.10); --hair:var(--le-rim);
  --bg:#061316;
  --glass:var(--le-card); --glass-2:rgba(20,44,46,.92); --glass-side:rgba(12,30,32,.56);
  --card:var(--le-card);
  --surface:#0C2023; --surface-2:#102A2D; --surface-3:#0A1C1F;
  --le-shadow:0 8px 24px rgba(0,0,0,.45);
}
@media (prefers-color-scheme: dark){
  html[data-skin="le"][data-theme="auto"]{
    --le-ink:#E6F2F0; --le-muted:#93AAB4;
    --le-card:rgba(14,32,34,.78); --le-rim:rgba(255,255,255,.12); --le-glass:rgba(10,26,28,.48);
  --le-chip:rgba(255,255,255,.10);
  --le-pill:linear-gradient(180deg,rgba(23,106,90,.95),rgba(12,72,64,.95));
  --le-pill-ink:#B7F2E2;
    --ink:var(--le-ink); --ink2:#C2D6D5; --muted:var(--le-muted);
    --line:rgba(255,255,255,.10); --hair:var(--le-rim);
    --bg:#061316;
    --glass:var(--le-card); --glass-2:rgba(20,44,46,.92); --glass-side:rgba(12,30,32,.56);
    --card:var(--le-card);
    --surface:#0C2023; --surface-2:#102A2D; --surface-3:#0A1C1F;
    --le-shadow:0 8px 24px rgba(0,0,0,.45);
  }
}

/* ── 2 · Nền aqua–mint–lavender ──────────────────────────────────────────── */
html[data-skin="le"] body{
  background:var(--bg) !important;
  background-image:
    radial-gradient(58rem 42rem at 88% -14%, var(--le-lilac), transparent 62%),
    radial-gradient(52rem 40rem at -10% 4%,  var(--le-aqua),  transparent 60%),
    radial-gradient(46rem 42rem at 46% 108%, var(--le-mint),  transparent 64%) !important;
  background-attachment:fixed;
  color:var(--ink);
}
/* .lg-scene là nền bốn khối màu của Liquid Glass — Liquid Emerald dùng dải sáng
   mềm hơn, dựng bằng chính các khối đó nhưng đổi màu và giảm biên độ trôi. */
html[data-skin="le"] .lg-scene i:nth-child(1){background:var(--le-aqua)}
html[data-skin="le"] .lg-scene i:nth-child(2){background:var(--le-mint)}
html[data-skin="le"] .lg-scene i:nth-child(3){background:var(--le-lilac)}
html[data-skin="le"] .lg-scene i:nth-child(4){background:#CFF3E8}
html[data-skin="le"] .lg-scene i{opacity:.62;filter:blur(90px)}
html[data-skin="le"][data-theme="dark"] .lg-scene i{opacity:.26}

/* ── 3 · Thẻ trắng sữa ───────────────────────────────────────────────────── */
html[data-skin="le"] .card{
  background:var(--le-card);
  -webkit-backdrop-filter:saturate(150%) blur(var(--le-blur));
          backdrop-filter:saturate(150%) blur(var(--le-blur));
  border:1px solid var(--le-rim);
  border-radius:var(--le-radius-card);
  box-shadow:var(--le-shadow), inset 0 1px 0 rgba(255,255,255,.65);
}
html[data-skin="le"] .card:hover{box-shadow:var(--sh-lift), inset 0 1px 0 rgba(255,255,255,.65)}
html[data-skin="le"] .card .hd{border-bottom:1px solid var(--line);border-radius:var(--le-radius-card) var(--le-radius-card) 0 0}
html[data-skin="le"] .card .hd h3{font-size:17px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
/* Trình duyệt không hỗ trợ kính → nền đặc đủ tương phản, giữ nguyên hình dáng */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html[data-skin="le"] .card{background:rgba(255,255,255,.96)}
  html[data-skin="le"][data-theme="dark"] .card{background:rgba(14,32,34,.96)}
}

/* ── 4 · Nút emerald có chiều sâu ────────────────────────────────────────── */
html[data-skin="le"] .btn{
  border-radius:var(--le-radius-button);
  background:linear-gradient(145deg,#0FA287 0%,var(--le-emerald) 48%,var(--le-emerald-deep) 100%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 1px 2px rgba(6,77,76,.26), 0 10px 24px -10px rgba(8,124,104,.6),
             inset 0 1px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(0,0,0,.08);
  font-weight:650;
}
html[data-skin="le"] .btn:hover{
  box-shadow:0 2px 5px rgba(6,77,76,.28), 0 16px 32px -12px rgba(8,124,104,.68),
             inset 0 1px 0 rgba(255,255,255,.38);
}
html[data-skin="le"] .btn.sec{
  background:rgba(255,255,255,.86);color:var(--ink);
  border:1px solid var(--le-rim);
  box-shadow:var(--sh-xs), inset 0 1px 0 rgba(255,255,255,.9);
}
html[data-skin="le"] .btn.sec:hover{color:var(--br-700)}
html[data-skin="le"] .btn.gho{border-color:rgba(8,124,104,.4);color:var(--br-700)}
html[data-skin="le"] .btn.lg{border-radius:var(--le-radius-button);min-height:52px;font-size:16px}
/* Nút chính trên điện thoại phải đạt vùng chạm */
@media (max-width:900px){
  html[data-skin="le"] .btn{min-height:var(--le-touch-min);padding-inline:18px}
  html[data-skin="le"] .btn.sm{min-height:36px}
}

/* ── 5 · Ô nhập ──────────────────────────────────────────────────────────── */
html[data-skin="le"] .inp{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid rgba(16,35,56,.12);
  border-radius:var(--le-radius-field);
  padding:11px 13px;
  color:var(--ink);
}
html[data-skin="le"] .inp:focus{
  background:var(--surface);
  border-color:var(--br-500);
  box-shadow:0 0 0 3.5px rgba(15,148,121,.16);
}
html[data-skin="le"] label.f{font-size:13px;font-weight:550;color:var(--ink2)}
/* Nhãn bắt buộc: đỏ đậm (quy ước đã chốt của dự án) */
html[data-skin="le"] label.f.req::after{color:#C62828;font-weight:700}
@media (max-width:900px){
  /* iOS phóng to trang khi focus ô có cỡ chữ < 16px → khoá ở 16px */
  html[data-skin="le"] .inp,
  html[data-skin="le"] select.inp,
  html[data-skin="le"] textarea.inp{font-size:16px;min-height:var(--le-field-height)}
  html[data-skin="le"] textarea.inp{min-height:84px}
}

/* ── 6 · Nhãn trạng thái, ghi chú ────────────────────────────────────────── */
html[data-skin="le"] .pill{border-radius:99px;border:1px solid rgba(255,255,255,.7)}
html[data-skin="le"] .p-g{background:#D7F5E6;color:#0A5A3A}
html[data-skin="le"] .p-o{background:#FFF0D6;color:#8A5A08}
html[data-skin="le"] .p-n{background:#E2EEFF;color:#27477A}
html[data-skin="le"] .p-s{background:rgba(255,255,255,.78);color:var(--ink2)}
html[data-skin="le"] .av{background:#DCEFF6;color:#13596B}
html[data-skin="le"] .note{border-radius:var(--le-radius-field)}
html[data-skin="le"] .note.i{background:rgba(226,240,246,.86);color:#1E4A5C}
html[data-skin="le"] .note.s{background:rgba(214,245,230,.86);color:#0A5A3A}
html[data-skin="le"] tbody tr:hover{background:rgba(8,124,104,.045)}

/* ── 7 · Thanh trên ──────────────────────────────────────────────────────── */
html[data-skin="le"] .top{
  background:var(--le-glass);
  -webkit-backdrop-filter:saturate(160%) blur(var(--le-blur));
          backdrop-filter:saturate(160%) blur(var(--le-blur));
  border-bottom:1px solid var(--le-rim);
}
html[data-skin="le"] .top h1,
html[data-skin="le"] .top .ttl h1{font-weight:700;letter-spacing:-.03em}

/* Máy tính: nút "…" chỉ dành cho điện thoại */
html[data-skin="le"] .top .lemore{display:none}

/* ── 8 · Điện thoại: thanh trên thiết kế lại ─────────────────────────────────
   Bố cục theo ba board tham chiếu:

     [ nút tròn ngữ cảnh ]  Tiêu đề lớn          [ 1–2 nút ] [ … ]
                            phụ đề nhỏ

   · Trang gốc → nút MENU. Trang con → nút QUAY LẠI. Không hiện cả hai.
   · Tiêu đề 22px xuống hai dòng được, phụ đề có hàng riêng (trước chỉ hiện khi
     rê chuột — trên điện thoại không rê chuột được nên coi như mất).
   · Chỉ giữ tìm kiếm + chuông ở ngoài; phần còn lại vào menu phụ "…" có TÊN rõ,
     không phải dải biểu tượng không nhãn.
   · Cùng một DOM với máy tính — chỉ đổi thứ tự và cách hiện bằng CSS/JS.         */
@media (max-width:900px){
  html[data-skin="le"] .top{padding:10px 12px 12px}
  html[data-skin="le"] .top .ttl h1{
    font-size:22px;line-height:1.22;font-weight:700;letter-spacing:-.03em;
    white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  html[data-skin="le"] .top .ttl .sub{
    display:block;font-size:12.5px;line-height:1.35;color:var(--le-muted);margin-top:1px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }

  /* Vùng chạm: mọi nút biểu tượng trên thanh trên đạt 44×44 CSS px */
  html[data-skin="le"] .top .ticon,
  html[data-skin="le"] .top .burger,
  html[data-skin="le"] .top .histbtn,
  html[data-skin="le"] .top .gstoggle{
    min-width:var(--le-touch-min);min-height:var(--le-touch-min);
    border-radius:50%;display:inline-grid;place-items:center;
    background:var(--le-chip);border:1px solid var(--le-rim);
    box-shadow:var(--sh-xs);
  }
  html[data-skin="le"] .top .burger:active,
  html[data-skin="le"] .top .histbtn:active,
  html[data-skin="le"] .top .ticon:active{transform:scale(.93)}

  /* ── Nút tròn bên trái theo ngữ cảnh ─────────────────────────────────────
     `!important` ở đây là CỐ Ý và là chỗ DUY NHẤT: app.css có
     `.burger{display:inline-flex!important}` trong khối ≤900px, không thể
     thắng bằng độ ưu tiên chọn lọc. Không nối thêm override nào khác. */
  html[data-skin="le"] .top .toprow[data-le-head="root"] .histnav{display:none}
  html[data-skin="le"] .top .toprow[data-le-head="sub"]  .burger{display:none !important}
  html[data-skin="le"] .top .histnav{gap:0;background:none;border:0;padding:0}
  html[data-skin="le"] .top .histnav .histfwd{display:none}   /* tiến trang: hiếm dùng, bỏ khỏi hàng đầu */

  /* ── Hàng đầu: [nút] tiêu đề … [tìm] [chuông] [⋯] ──────────────────────── */
  html[data-skin="le"] .top .toprow{flex-wrap:wrap;gap:8px;align-items:center}
  html[data-skin="le"] .top .burger,
  html[data-skin="le"] .top .histnav{order:1;flex:0 0 auto}
  html[data-skin="le"] .top .ttl{order:2;flex:1 1 auto;min-width:0}
  html[data-skin="le"] .top .lemore{order:5;display:inline-grid;flex:0 0 auto}
  /* Công cụ riêng của trang (nhập/xuất/in/nút hành động) xuống hàng dưới,
     cuộn ngang trong vùng của nó — không tranh chỗ với tiêu đề. */
  html[data-skin="le"] .top .right.pageright{
    order:10;flex:1 0 100%;margin-left:0;justify-content:flex-end;
    overflow-x:auto;scrollbar-width:none;
  }
  html[data-skin="le"] .top .right.pageright::-webkit-scrollbar{display:none}
  html[data-skin="le"] .top .right.pageright:empty{display:none}

  /* ── Menu phụ "⋯": dải biểu tượng thành danh sách CÓ TÊN ───────────────── */
  html[data-skin="le"] .top .topicons{
    order:4;gap:8px;
    /* chuông luôn ở ngoài, phần còn lại nằm trong menu */
  }
  /* Khi đóng, cả dải biểu tượng ẩn — chuông đã được emerald.js đưa ra hàng đầu. */
  html[data-skin="le"] .top .topicons:not(.le-open){display:none}
  html[data-skin="le"] .top .toprow > .bell{order:4;flex:0 0 auto}

  html[data-skin="le"] .top .topicons.le-open{
    position:absolute;top:calc(100% - 4px);right:12px;z-index:60;
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    min-width:212px;max-width:calc(100vw - 24px);padding:8px;
    border-radius:var(--le-radius-field);
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:saturate(160%) blur(var(--le-blur));
            backdrop-filter:saturate(160%) blur(var(--le-blur));
    border:1px solid var(--le-rim);box-shadow:var(--sh-lift);
  }
  html[data-skin="le"][data-theme="dark"] .top .topicons.le-open{background:rgba(16,38,40,.96)}
  /* `script`/`style`/`template` nằm xen trong dải biểu tượng (bộ chọn giao diện
     có script nội tuyến ngay sau nút) — bật display cho chúng sẽ in nguyên mã
     nguồn ra màn hình, nên loại trừ rõ ràng. */
  html[data-skin="le"] .top .topicons.le-open > *:not(script):not(style):not(template){display:flex !important}
  html[data-skin="le"] .top .topicons.le-open > script,
  html[data-skin="le"] .top .topicons.le-open > style,
  html[data-skin="le"] .top .topicons.le-open > template{display:none !important}
  html[data-skin="le"] .top .topicons.le-open{max-height:min(70vh,560px);overflow-y:auto;overscroll-behavior:contain}
  html[data-skin="le"] .top .topicons.le-open > .globalsearch{order:-1}
  /* Tạo nhanh đã là nút tròn ở thanh dưới — không lặp lại CTA trong menu phụ
     (mục F.2 của quy chuẩn: không nhân đôi nút "+" khi đã có orb). */
  html[data-skin="le"] .top .topicons.le-open > #qcOpen{display:none !important}
  html[data-skin="le"] .top .topicons.le-open > a,
  html[data-skin="le"] .top .topicons.le-open > button,
  html[data-skin="le"] .top .topicons.le-open > .themepick > button{
    width:100%;min-height:var(--le-touch-min);
    justify-content:flex-start;gap:10px;padding:0 12px;
    border-radius:10px;border:0;background:none;box-shadow:none;
    font-size:14px;font-weight:550;color:var(--ink);
  }
  html[data-skin="le"] .top .topicons.le-open > a:active,
  html[data-skin="le"] .top .topicons.le-open > button:active{background:var(--br-50);transform:none}
  /* Nhãn chữ do emerald.js chèn — dải biểu tượng gốc không có chữ */
  html[data-skin="le"] .top .topicons.le-open .lelabel{white-space:nowrap}
  html[data-skin="le"] .top .topicons.le-open .themepick{position:static;width:100%}
  /* Ô tìm kiếm trong menu: hiện nguyên ô nhập, không còn là nút thu gọn */
  html[data-skin="le"] .top .topicons.le-open .globalsearch{
    width:100%;position:relative;padding:0;background:none;border:0;box-shadow:none;
  }
  html[data-skin="le"] .top .topicons.le-open .globalsearch .gstoggle{display:none}
  html[data-skin="le"] .top .topicons.le-open .globalsearch input{
    display:block;width:100%;min-height:var(--le-touch-min);
    padding:0 12px;font-size:16px;
    border:1px solid var(--le-rim);border-radius:10px;background:var(--le-chip);color:var(--ink);
  }
  html[data-skin="le"] .top .topicons.le-open .globalsearch .gsdrop{
    position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:50vh;overflow:auto;
  }
  html[data-skin="le"] .top .topicons.le-open i{position:static;margin-left:auto}
  html[data-skin="le"] .top .lemore[aria-expanded="true"]{background:var(--br-100);color:var(--br-700)}
}

/* ── 9 · Dock: capsule kính 4 mục + orb "+" tách riêng ───────────────────── */
@media (max-width:900px){
  html[data-skin="le"]{--tabbar-h:calc(var(--le-dock-height) + 20px)}

  html[data-skin="le"] .tabbar{
    display:flex;align-items:flex-end;gap:var(--le-dock-gap);
    position:fixed;left:12px;right:12px;width:auto;transform:none;
    bottom:max(12px, env(safe-area-inset-bottom,0px));
    z-index:70;padding:0;border:0;background:none;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  /* Bốn mục điều hướng nằm trong một viên kính */
  html[data-skin="le"] .tabbar .lecap{
    flex:1 1 auto;min-width:0;display:flex;gap:2px;
    height:var(--le-dock-height);padding:7px;border-radius:calc(var(--le-dock-height) / 2);
    background:var(--le-glass);
    -webkit-backdrop-filter:saturate(170%) blur(var(--le-blur));
            backdrop-filter:saturate(170%) blur(var(--le-blur));
    border:1px solid var(--le-rim);
    box-shadow:var(--le-shadow), inset 0 1px 0 rgba(255,255,255,.95),
               inset 0 -1px 0 rgba(255,255,255,.35);
  }
  html[data-skin="le"] .tabbar .lecap a{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:4px 2px;border-radius:99px;color:var(--le-muted);
    font-size:10.5px;font-weight:600;line-height:1.1;text-align:center;
    position:relative;background:none;box-shadow:none;
    transition:background .18s ease, color .18s ease;
    -webkit-tap-highlight-color:transparent;
  }
  html[data-skin="le"] .tabbar .lecap a .lb{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Viên kính mint của mục đang chọn — đặc điểm nhận diện bắt buộc */
  html[data-skin="le"] .tabbar .lecap a.on{
    background:var(--le-pill);
    color:var(--le-pill-ink);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(8,124,104,.16);
  }
  html[data-skin="le"] .tabbar .lecap a:active{transform:scale(.95)}
  html[data-skin="le"] .tabbar .lecap a em{
    position:absolute;top:2px;right:calc(50% - 20px);
    background:#D9342B;color:#fff;font-style:normal;font-size:8.5px;font-weight:700;
    padding:1px 5px;border-radius:99px;border:2px solid rgba(255,255,255,.9);line-height:1.1;
  }
  /* Orb hành động tách riêng bên phải */
  html[data-skin="le"] .tabbar .leorb{
    flex:0 0 var(--le-orb-size);width:var(--le-orb-size);height:var(--le-orb-size);
    display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.3);
    background:radial-gradient(120% 120% at 32% 24%, #2FC0A3 0%, var(--le-emerald) 46%, var(--le-emerald-deep) 100%);
    color:#fff;cursor:pointer;
    box-shadow:0 2px 5px rgba(6,77,76,.3), 0 14px 28px -10px rgba(8,124,104,.72),
               inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 6px rgba(0,0,0,.14);
    transition:transform .18s cubic-bezier(.34,1.56,.64,1);
    -webkit-tap-highlight-color:transparent;
  }
  html[data-skin="le"] .tabbar .leorb:active{transform:scale(.92)}
  html[data-skin="le"] .tabbar .leorb svg{width:26px;height:26px;stroke-width:2.2}

  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    html[data-skin="le"] .tabbar .lecap{background:rgba(252,255,255,.96)}
  }

  /* app.css ẩn nhãn dưới 380px vì thanh cũ có 5 ô. Capsule chỉ còn 4 ô nên vẫn
     đủ chỗ cho nhãn — giữ nhãn để biết mình đang ở đâu, chỉ thu nhỏ chữ. */
  @media (max-width:380px){
    html[data-skin="le"] .tabbar .lecap a .lb{display:block;font-size:9.5px}
    html[data-skin="le"] .tabbar .lecap a{padding:4px 1px}
    html[data-skin="le"]{--le-orb-size:54px;--le-dock-gap:8px}
  }

  /* Nội dung chừa đúng chiều cao dock thật + safe area (không cộng hai lần:
     --tabbar-h đã gồm dock, env() cộng ở đây một lần duy nhất) */
  html[data-skin="le"] .content{
    padding:14px var(--le-gutter) calc(20px + var(--tabbar-h) + env(safe-area-inset-bottom,0px));
    scroll-padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px));
  }
  html[data-skin="le"] .helpfab{
    bottom:calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom,0px));
  }

  /* Bàn phím mở → ẩn dock để thanh lưu và ô đang nhập luôn thấy được
     (lớp .le-kb do assets/js/emerald.js đặt theo visualViewport) */
  html[data-skin="le"].le-kb .tabbar{
    opacity:0;pointer-events:none;transform:translateY(16px);
  }
  html[data-skin="le"].le-kb{--tabbar-h:0px}
  html[data-skin="le"] .tabbar{transition:opacity .2s ease, transform .2s ease}
}

/* Máy tính không dùng dock điện thoại; trang đăng nhập không có dock */
html[data-skin="le"] body.loginpage .tabbar{display:none !important}

/* ── 10 · Tôn trọng cấu hình tắt chuyển động / giảm chuyển động ───────────── */
html[data-skin="le"][data-motion="off"] .tabbar,
html[data-skin="le"][data-motion="off"] .tabbar .lecap a,
html[data-skin="le"][data-motion="off"] .tabbar .leorb,
html[data-skin="le"][data-motion="off"] .btn{transition:none}
@media (prefers-reduced-motion: reduce){
  html[data-skin="le"] .tabbar,
  html[data-skin="le"] .tabbar .lecap a,
  html[data-skin="le"] .tabbar .leorb,
  html[data-skin="le"] .btn{transition:none}
  html[data-skin="le"] .lg-scene i{animation:none}
}

/* ── 11 · Trang đăng nhập ────────────────────────────────────────────────── */
html[data-skin="le"] body.loginpage{
  min-height:100dvh;
  background:var(--bg);
  background-image:
    radial-gradient(54rem 40rem at 82% -10%, var(--le-lilac), transparent 60%),
    radial-gradient(48rem 38rem at -8% 6%,   var(--le-aqua),  transparent 58%),
    radial-gradient(44rem 40rem at 50% 110%, var(--le-mint),  transparent 62%);
}
/* Hai cột của bản cũ có nền riêng (#F5F7F6 / gradient xanh đậm) che mất dải
   aqua–mint–lavender — bỏ nền cột, để nền trang lộ ra sau mọi khối. */
html[data-skin="le"] .loginpage{background:none}
html[data-skin="le"] .loginright{background:none}
html[data-skin="le"] .loginbrand{background:none}
html[data-skin="le"] .loginbrand .lb-blob{display:none}
html[data-skin="le"] .loginbrand h1,
html[data-skin="le"] .loginbrand p{color:var(--ink);text-shadow:none}
html[data-skin="le"] .loginbrand h1 span{color:var(--le-emerald)}
/* Có ảnh nền thương hiệu thì cột trái vẫn giữ ảnh + chữ trắng — chỉ ở máy tính,
   vì trên điện thoại khối này xếp trên nền sáng (xem khối ≤860px bên dưới). */
@media (min-width:861px){
  html[data-skin="le"] .loginbrand.has-banner{
    background:linear-gradient(160deg,rgba(6,77,76,.58) 0%,rgba(8,124,104,.48) 100%),var(--lb-img) center/cover no-repeat;
  }
  html[data-skin="le"] .loginbrand.has-banner h1,
  html[data-skin="le"] .loginbrand.has-banner p{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.35)}
  html[data-skin="le"] .loginbrand.has-banner h1 span{color:rgba(255,255,255,.8)}
}

html[data-skin="le"] .loginbox{
  background:rgba(255,255,255,.80);
  -webkit-backdrop-filter:saturate(150%) blur(var(--le-blur));
          backdrop-filter:saturate(150%) blur(var(--le-blur));
  border:1px solid var(--le-rim);
  border-radius:var(--le-radius-card);
  box-shadow:var(--le-shadow), inset 0 1px 0 rgba(255,255,255,.7);
}
html[data-skin="le"] .loginbox h2{font-size:24px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
html[data-skin="le"] .loginbox .btn{width:100%;justify-content:center;min-height:52px;font-size:16px}
/* Logo thương hiệu đặt trong khung kính đúng tỷ lệ (mục F.1: KHÔNG thay logo) */
html[data-skin="le"] .loginbox .lg img,
html[data-skin="le"] .loginbrand .lb-inner img{
  border-radius:24px;background:rgba(255,255,255,.7);
  border:1px solid var(--le-rim);padding:10px;
  box-shadow:var(--le-shadow);
}
@media (max-width:860px){
  /* Board 03: logo → tên/slogan → card chào mừng. Bản cũ ẩn hẳn khối thương hiệu
     trên điện thoại; ở đây giữ lại nhưng xếp dọc phía trên card, dùng CHÍNH khối
     markup đó (một DOM, không nhân bản logo cho mobile). */
  html[data-skin="le"] .loginwrap2{
    grid-template-columns:1fr;grid-template-rows:auto 1fr;
    align-content:center;padding:24px 0;gap:4px;
  }
  html[data-skin="le"] .loginbrand{
    display:flex;min-height:0;padding:8px 20px 0;
  }
  html[data-skin="le"] .loginbrand.has-banner{background:none}
  html[data-skin="le"] .loginbrand.has-banner h1,
  html[data-skin="le"] .loginbrand.has-banner p{color:var(--ink);text-shadow:none}
  html[data-skin="le"] .loginbrand.has-banner h1 span{color:var(--le-emerald)}
  html[data-skin="le"] .loginbrand .lb-inner img{height:72px;margin-bottom:14px}
  html[data-skin="le"] .loginbrand h1{font-size:22px}
  html[data-skin="le"] .loginbrand p{font-size:13px;margin-top:8px}
  /* logo nhỏ trong card thành thừa khi khối thương hiệu đã hiện */
  html[data-skin="le"] .loginbox .lg.mobileonly{display:none}
  html[data-skin="le"] .loginright{padding:14px var(--le-gutter) 24px;align-items:flex-start}
  html[data-skin="le"] .loginbox{padding:24px 20px}
}

/* ── 12 · Lớp chồng ──────────────────────────────────────────────────────
   Thứ tự: nội dung → thanh trên (40) → dock (70) → nền mờ menu (75) →
   menu trái (80) → hộp thoại/sheet (300, do app.css giữ).
   CỐ Ý không hạ z-index của .qcveil/.shk-modal: ui.css đã nâng các lớp con
   trong hộp thoại lên theo mốc 300, hạ xuống làm dropdown trong hộp thoại
   chui xuống dưới nội dung (lỗi đã từng xảy ra, xem ghi chú ui.css). */
html[data-skin="le"] .top{z-index:40}
html[data-skin="le"] .tabbar{z-index:70}

/* ── 13 · Trang tổng quan (board 01) ─────────────────────────────────────────
   Bố cục mục tiêu: lời chào → tiêu đề → thẻ nổi bật → dải số liệu → lối tắt →
   việc cần xử lý. Các khối đã có sẵn trong views/overview.php và thứ tự do quản
   trị kéo thả (core/DashLayout.php) — ở đây CHỈ đổi cách trình bày, không viết
   lại khối nào và không chèn số liệu giả.                                      */

/* Thẻ nổi bật: cùng class .hero dùng chung toàn hệ thống (Tổng quan, Hồ sơ của
   tôi, Chấm công…) nên đổi một chỗ là mọi nơi theo — không rải màu từng trang. */
html[data-skin="le"] .hero{
  background:linear-gradient(145deg,#0FA287 0%,var(--le-emerald) 46%,var(--le-emerald-deep) 100%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--le-radius-card);
  box-shadow:0 2px 6px rgba(6,77,76,.22), 0 18px 40px -18px rgba(8,124,104,.55);
}
html[data-skin="le"] .hero::before{
  background:
    radial-gradient(58% 130% at 10% -12%, rgba(255,255,255,.26), transparent 62%),
    radial-gradient(58% 130% at 90% -12%, rgba(255,255,255,.14), transparent 62%),
    linear-gradient(118deg, rgba(255,255,255,.12) 0%, transparent 48%);
}
html[data-skin="le"] .hero .pill{
  background:rgba(255,255,255,.22) !important;
  border-color:rgba(255,255,255,.4) !important;
}

/* Dải số liệu: cuộn ngang một hàng, KHÔNG nhảy dòng (quy ước đã chốt của dự án).
   Có vệt mờ bên phải để biết còn nội dung phía sau. */
@media (max-width:900px){
  html[data-skin="le"] .ovl-blk > .grid:has(> .card.kpi){
    display:flex;gap:var(--le-gap);
    overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--le-gutter) * -1);padding-inline:var(--le-gutter);
  }
  html[data-skin="le"] .ovl-blk > .grid:has(> .card.kpi)::-webkit-scrollbar{display:none}
  html[data-skin="le"] .card.kpi{
    flex:0 0 clamp(142px,44vw,172px);scroll-snap-align:start;padding:14px 15px;
  }
  html[data-skin="le"] .card.kpi .vl{font-size:30px;letter-spacing:-.04em;margin:5px 0 2px}
  html[data-skin="le"] .card.kpi .lb{font-size:12.5px}

  /* Lối tắt: ô vuông icon-trên-chữ-dưới, hai cột — thay cho hàng icon+chữ nằm
     ngang bị cắt chữ trên màn hẹp. Dùng chính thẻ <a> sẵn có. */
  html[data-skin="le"] .ovl-blk .grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  html[data-skin="le"] .ovl-blk .card .bd > .grid > a[href]{
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:8px !important;
    min-height:84px;padding:13px 14px !important;
    border:1px solid var(--le-rim) !important;border-radius:var(--le-radius-field) !important;
    background:rgba(255,255,255,.55);
  }
  html[data-skin="le"][data-theme="dark"] .ovl-blk .card .bd > .grid > a[href]{background:rgba(255,255,255,.05)}
  html[data-skin="le"] .ovl-blk .card .bd > .grid > a[href] > span:first-child{
    width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
    background:var(--br-50);color:var(--br-700);
  }
  html[data-skin="le"] .ovl-blk .card .bd > .grid > a[href] b{font-size:13px;line-height:1.3}
  /* Thẻ nổi bật và dải số liệu không bị ép thành hai cột */
  html[data-skin="le"] .hero .bd > .grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  html[data-skin="le"] .ovl-blk > .grid:has(> .card.kpi){grid-template-columns:none !important}

  /* Việc cần xử lý: hàng cao đủ chạm, mũi tên rõ */
  html[data-skin="le"] .card .bd > .u-stack > a[href]{
    min-height:var(--le-touch-min);border-radius:var(--le-radius-field) !important;
    border-color:var(--le-rim) !important;background:rgba(255,255,255,.5);
  }
  html[data-skin="le"][data-theme="dark"] .card .bd > .u-stack > a[href]{background:rgba(255,255,255,.05)}

  /* Lời chào lên trước tiêu đề ở trang gốc (board 01: "Chào Giang" rồi "Tổng quan") */
  html[data-skin="le"] .top .toprow[data-le-head="root"] .ttl{display:flex;flex-direction:column}
  html[data-skin="le"] .top .toprow[data-le-head="root"] .ttl h1{order:2}
  html[data-skin="le"] .top .toprow[data-le-head="root"] .ttl .sub{
    order:1;margin:0 0 1px;font-weight:600;color:var(--br-700);
  }
}

/* Thẻ nổi bật trên điện thoại: các ô con gọn lại — bản cũ mỗi ô cao gần 130px
   nên bốn ô đã chiếm hết một màn hình, đẩy dải số liệu và lối tắt xuống dưới. */
@media (max-width:900px){
  html[data-skin="le"] .hero .hd{padding:13px 15px 11px}
  html[data-skin="le"] .hero .hd h3{font-size:16px}
  html[data-skin="le"] .hero .bd{padding:12px 15px 15px}
  html[data-skin="le"] .hero .bd > .grid{gap:9px}
  html[data-skin="le"] .hero .bd > .grid > a[href]{
    padding:9px 11px !important;border-radius:var(--le-radius-field) !important;
    background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26) !important;
  }
  html[data-skin="le"] .hero .bd > .grid > a[href] > div:first-child{font-size:11.5px}
  html[data-skin="le"] .hero .bd > .grid > a[href] > div + div{
    font-size:17px;font-weight:700;letter-spacing:-.02em;line-height:1.25;margin-top:2px;
  }
}

/* ── 14 · Trang danh sách (board 01 CRM · board 03 Booking) ──────────────────
   `glass.js::cardTables()` đã chuyển bảng rộng thành thẻ trên màn ≤760px
   (gắn class `m-cards`, `m-pri`, `m-act`, `m-chk`). Giữ nguyên cơ chế đó —
   ở đây chỉ đổi cách trình bày: mỗi bản ghi là một thẻ riêng có khoảng cách,
   tên là tiêu đề, nhãn trạng thái nằm cùng hàng tên, hàng thao tác đủ chạm.
   Bảng đánh dấu `data-no-cards` (kế toán, ma trận, phân ca) không bị đụng tới. */
@media (max-width:760px){
  /* Khung bảng bỏ nền thẻ — từng dòng mới là thẻ */
  html[data-skin="le"] .content .card:has(> .bd > .tblwrap > table.m-cards),
  html[data-skin="le"] .content .card:has(> .tblwrap > table.m-cards){
    background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
  }
  html[data-skin="le"] .content .card:has(table.m-cards) > .bd{padding:0}

  html[data-skin="le"] table.m-cards > tbody{display:flex;flex-direction:column;gap:var(--le-gap)}
  html[data-skin="le"] table.m-cards > tbody > tr{
    padding:14px 15px;gap:9px 14px;
    border:1px solid var(--le-rim) !important;border-radius:var(--le-radius-card);
    background:var(--le-card) !important;
    -webkit-backdrop-filter:saturate(150%) blur(var(--le-blur));
            backdrop-filter:saturate(150%) blur(var(--le-blur));
    box-shadow:var(--le-shadow), inset 0 1px 0 rgba(255,255,255,.6);
  }
  html[data-skin="le"] table.m-cards > tbody > tr:active{
    background:var(--le-card) !important;transform:scale(.995);
  }
  /* Tên bản ghi: tiêu đề thẻ, có chỗ cho nhãn trạng thái và ô chọn bên phải */
  html[data-skin="le"] table.m-cards > tbody > tr > td.m-pri{
    font-size:16px;font-weight:650;letter-spacing:-.02em;line-height:1.3;
    padding-right:40px !important;margin-bottom:2px;
  }
  html[data-skin="le"] table.m-cards > tbody > tr > td.m-pri a{color:var(--ink)}
  /* Nhãn cột nhỏ hơn chữ giá trị để đọc theo cặp nhãn–giá trị */
  html[data-skin="le"] table.m-cards > tbody > tr > td[data-label]::before{
    font-size:11.5px;color:var(--le-muted);font-weight:550;
  }
  html[data-skin="le"] table.m-cards > tbody > tr > td{font-size:13.5px}
  /* Hàng thao tác: tách bằng đường mảnh, nút đủ 44px */
  html[data-skin="le"] table.m-cards > tbody > tr > td.m-act{
    margin-top:6px;padding-top:9px !important;border-top:1px solid var(--line) !important;
    gap:8px;
  }
  /* glass.css cố ý để nút biểu tượng trong bảng PHẲNG (`background:transparent
     !important`) — không đè lại, chỉ nới vùng chạm lên 44px và làm rõ trạng
     thái bấm/focus để biết đã trúng nút. */
  html[data-skin="le"] table.m-cards > tbody > tr > td.m-act .btn-ico{
    width:var(--le-touch-min);min-width:var(--le-touch-min);
    height:var(--le-touch-min);min-height:var(--le-touch-min);border-radius:12px;
  }
  html[data-skin="le"] table.m-cards > tbody > tr > td.m-act .btn-ico:active{
    background:var(--br-50) !important;
  }
  html[data-skin="le"] table.m-cards > tbody > tr > td.m-act .btn-ico:focus-visible{
    outline:3px solid var(--br-500);outline-offset:2px;
  }
  html[data-skin="le"] table.m-cards > tbody > tr > td.m-act .btn{min-height:38px}
  html[data-skin="le"] table.m-cards > tbody > tr > td.m-chk{top:14px;right:14px}
  html[data-skin="le"] table.m-cards > tbody > tr > td.m-chk input{width:20px;height:20px}
}

/* ── 15 · Thanh lệnh của danh sách (tìm · lọc · cột · sắp xếp) ──────────────
   Quy ước đã chốt của dự án: bộ lọc và dải số liệu KHÔNG nhảy dòng, ô chọn và
   ô nhập cao đều nhau. */
@media (max-width:900px){
  html[data-skin="le"] .cb-row .inp,
  html[data-skin="le"] .cb-row select,
  html[data-skin="le"] .cb-row .btn,
  html[data-skin="le"] .cb-tools .inp,
  html[data-skin="le"] .cb-tools select,
  html[data-skin="le"] .cb-tools .btn{min-height:var(--le-touch-min)}
  html[data-skin="le"] .cb-tools{gap:8px}
  /* Dải nút phụ (Cột · Sắp xếp · Dòng) cuộn ngang thay vì xuống dòng */
  html[data-skin="le"] .cb-more,
  html[data-skin="le"] .cb-sub{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--le-gutter) * -1);padding-inline:var(--le-gutter);
  }
  html[data-skin="le"] .cb-more::-webkit-scrollbar,
  html[data-skin="le"] .cb-sub::-webkit-scrollbar{display:none}
  /* Dải số liệu của danh sách: cùng cách cuộn như ở Tổng quan */
  html[data-skin="le"] .ws-kpi{flex:0 0 clamp(142px,44vw,172px)}
}

/* ── 16 · Biểu mẫu (board 02) — áp cho MỌI module ───────────────────────────
   Các quy tắc dưới đây dùng chung cho toàn bộ form của hệ thống, không viết
   riêng cho từng màn hình. Không đụng tới name/id, không thêm/bớt `required`. */

/* Ô chọn tệp: trình duyệt vẽ nút "Choose File / No file chosen" theo kiểu hệ
   điều hành, lạc hẳn tông và nút nhỏ hơn mức chạm được. Chỉ đổi phần nút do
   trình duyệt vẽ — vẫn là `<input type=file>` gốc, không thay bằng nút giả. */
html[data-skin="le"] input[type="file"].inp{
  padding:7px 10px;line-height:1.4;cursor:pointer;
}
html[data-skin="le"] input[type="file"].inp::file-selector-button{
  margin-right:10px;padding:0 14px;min-height:34px;
  border:1px solid var(--le-rim);border-radius:10px;
  background:var(--br-50);color:var(--br-700);
  font:inherit;font-weight:600;font-size:13px;cursor:pointer;
}
html[data-skin="le"] input[type="file"].inp:hover::file-selector-button{background:var(--br-100)}
@media (max-width:900px){
  html[data-skin="le"] input[type="file"].inp{min-height:var(--le-field-height);display:flex;align-items:center}
  html[data-skin="le"] input[type="file"].inp::file-selector-button{min-height:38px}
}

/* Ô chọn: mũi tên riêng cùng tông, cao bằng ô nhập (quy ước đã chốt của dự án) */
html[data-skin="le"] select.inp{
  -webkit-appearance:none;appearance:none;padding-right:38px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586e83' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;
}
html[data-skin="le"][data-theme="dark"] select.inp{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393aab4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Ô nhiều lựa chọn giữ mũi tên mặc định của trình duyệt */
html[data-skin="le"] select.inp[multiple],
html[data-skin="le"] select.inp[size]:not([size="1"]){background-image:none;padding-right:12px}

/* Ngày / giờ: không được vượt mép thẻ (tiêu chí nghiệm thu).
   KHÔNG đổi type hay cách gửi giá trị — lớp datebox của app.js giữ nguyên. */
html[data-skin="le"] input[type="date"].inp,
html[data-skin="le"] input[type="time"].inp,
html[data-skin="le"] input[type="datetime-local"].inp{
  max-width:100%;min-width:0;
}
html[data-skin="le"] input[type="date"].inp::-webkit-date-and-time-value{text-align:left}

/* Nhóm thu gọn: chevron nằm CÙNG hàng tiêu đề, không chiếm một hàng trắng */
@media (max-width:900px){
  html[data-skin="le"] .content .card > .hd{
    display:flex;align-items:center;gap:10px;min-height:var(--le-touch-min);
    padding:11px 15px;
  }
  html[data-skin="le"] .content .card > .hd h3{flex:1 1 auto;min-width:0}
  html[data-skin="le"] .content .card > .bd{padding:14px 15px}
  /* Hai cột chỉ khi đủ chỗ — ở 320–360px hoặc chữ phóng to thì về một cột */
  html[data-skin="le"] .u-cols2{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:380px){
  html[data-skin="le"] .u-cols2{grid-template-columns:1fr}
}

/* Thanh nút lưu dính đáy: nút chính đủ cao, không bị thanh dưới che
   (chỗ chừa tính theo --tabbar-h ở mục 9, không cộng thêm hằng số nào) */
@media (max-width:900px){
  html[data-skin="le"] .fa-bar{
    gap:10px;padding:12px 0 2px;
    border-top:1px solid var(--line);
  }
  html[data-skin="le"] .fa-bar .btn{min-height:48px;flex:1 1 auto;justify-content:center}
  html[data-skin="le"] .fa-bar .btn.sec{flex:0 1 auto}
}

/* ── 17 · Hub phân hệ (menu cấp 1 / cấp 2) ─────────────────────────────────── */
/* Nhãn chỉ dành cho trình đọc màn hình — hệ thống chưa có lớp tiện ích này */
html[data-skin="le"] .u-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
html[data-skin="le"] .grp-find .inp{min-height:var(--le-field-height)}
html[data-skin="le"] .grp-item{
  border-radius:var(--le-radius-field);border:1px solid var(--le-rim);
  background:rgba(255,255,255,.55);min-height:var(--le-touch-min);
}
html[data-skin="le"][data-theme="dark"] .grp-item{background:rgba(255,255,255,.05)}
html[data-skin="le"] .grp-item:active{transform:scale(.995)}
html[data-skin="le"] .grp-ico{
  border-radius:12px;background:var(--br-50);color:var(--br-700);
  display:grid;place-items:center;flex:0 0 auto;
}
html[data-skin="le"] .grp-item[hidden],
html[data-skin="le"] .grp-cat[hidden]{display:none !important}
@media (max-width:900px){
  html[data-skin="le"] .grp-txt b{font-size:15px;line-height:1.3}
  html[data-skin="le"] .grp-txt span{font-size:12px}
}

/* ── 18 · Vùng chạm còn thiếu — rà toàn hệ thống ────────────────────────────
   Quét 24 module còn lại trên máy chủ thử phát hiện ba điều khiển DÙNG CHUNG
   (xuất hiện ở hầu hết màn hình) chưa đạt 44px, không phải lỗi riêng module
   nào — nên sửa một chỗ thay vì sửa từng view.                               */
@media (max-width:900px){

  /* 1 · Ô chọn màn hình của GroupNav (hiện ở ĐẦU hầu hết trang trên điện thoại).
        ui.css ghim 34px cho giao diện kính. */
  html[data-skin="le"] .groupnav .gnselect,
  html[data-skin="le"] .gnselect{
    min-height:var(--le-touch-min);font-size:16px;
    border-radius:var(--le-radius-field);
  }
  html[data-skin="le"] .groupnav .gnback{min-height:var(--le-touch-min)}

  /* 2 · Nút thu gọn thẻ (.cardtog) — 28px là mức bấm rất dễ trượt, trong khi
        nó có mặt trên gần như mọi thẻ của hệ thống. Giữ nguyên kích thước NHÌN
        THẤY nhưng nới vùng chạm ra 44px bằng lớp phủ trong suốt, nên bố cục
        tiêu đề thẻ không bị đẩy rộng ra. */
  html[data-skin="le"] .cardtog{position:relative;width:32px;height:32px;border-radius:10px}
  html[data-skin="le"] .cardtog::after{
    content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:var(--le-touch-min);height:var(--le-touch-min);
  }
  html[data-skin="le"] .cardtog.float{top:6px;right:6px}
  html[data-skin="le"] .cardtog:focus-visible{outline:3px solid var(--br-500);outline-offset:2px}

  /* 3 · Nút lùi/tiến kỳ (◀ ▶) của các bộ chọn kỳ — cùng cách nới vùng chạm */
  html[data-skin="le"] .content .btn.sec.sm{min-height:38px}
  html[data-skin="le"] .content a.btn.sec.sm:only-of-type,
  html[data-skin="le"] .content .btn.sec.sm{position:relative}
  html[data-skin="le"] .content .btn.sec.sm::before{
    content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:100%;height:var(--le-touch-min);
  }
}

/* ── 19 · Hộp thoại ─────────────────────────────────────────────────────────
   Nút trong hộp thoại hay bị vỡ chữ xuống hai dòng trên màn hẹp
   (vd "Nhắc lại sau 24 giờ" trong hộp nhắc sao lưu). Cho hàng nút xuống dòng
   theo NÚT thay vì bẻ chữ bên trong nút. */
html[data-skin="le"] .shk-modal .box{border-radius:var(--le-radius-card)}
@media (max-width:900px){
  html[data-skin="le"] .shk-modal .box{
    max-width:calc(100vw - 24px);
    max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  }
  html[data-skin="le"] .shk-modal .box .ft,
  html[data-skin="le"] .shk-modal .box > div:last-child:has(> .btn){flex-wrap:wrap;gap:10px}
  html[data-skin="le"] .shk-modal .box .btn{
    min-height:var(--le-touch-min);white-space:nowrap;flex:1 1 auto;justify-content:center;
  }
}

/* ── 20 · Thanh bộ lọc (.filterbar) ─────────────────────────────────────────
   app.css ép MỌI phần tử trong thanh lọc rộng tối thiểu 130px trên điện thoại,
   nên nút lùi/tiến kỳ "◀ ▶" cũng bị kéo ra 130px và chiếm trọn một hàng —
   bộ chọn kỳ vỡ thành ba dòng (vd Lịch tháng: ◀ / "Tháng 10/2026" / ▶).

   Quy ước đã chốt: bộ lọc không nhảy dòng lộn xộn. Ở đây: nút và nhãn ngắn giữ
   đúng bề rộng nội dung, chỉ ô nhập / ô chọn mới giãn ra chiếm chỗ còn lại. */
@media (max-width:900px){
  html[data-skin="le"] .filterbar{gap:8px;align-items:center}
  html[data-skin="le"] .filterbar > *{flex:0 0 auto;min-width:0}
  html[data-skin="le"] .filterbar > .inp,
  html[data-skin="le"] .filterbar > select,
  html[data-skin="le"] .filterbar > .sk-wrap,
  html[data-skin="le"] .filterbar > label,
  html[data-skin="le"] .filterbar > .fr{flex:1 1 150px;min-width:150px}
  html[data-skin="le"] .filterbar > .grow{flex:1 0 100%;margin-left:0}
  /* nút mũi tên đổi kỳ: vuông, đủ chạm, không kéo dài */
  html[data-skin="le"] .filterbar > .btn.sm{min-width:var(--le-touch-min);justify-content:center}
}

/* ═══════════════════════════════════════════════════════════════════════════
   v3.136.1 · SỬA THEO PHẢN HỒI 12/10/2026
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 21 · Ô nhập nằm TRONG một khung đã có viền → không vẽ viền lần hai ──────
   Một số ô tìm được bọc trong khung tự vẽ hộp (biểu tượng kính lúp bên trái,
   ô nhập bên trong để trần). `app.css` đã cho các ô đó `border:0;background:
   transparent`, nhưng quy tắc `.inp` ở mục 5 của file này có độ ưu tiên cao hơn
   nên vẽ đè viền + nền vào — thành HAI lớp viền lồng nhau.
   Trả các ô đó về trạng thái phẳng, khung bọc mới là thứ mang hình dáng. */
html[data-skin="le"] .cb-search .inp,
html[data-skin="le"] .cb-find .inp,
html[data-skin="le"] .menusearch input,
html[data-skin="le"] .qcsearch input,
html[data-skin="le"] .globalsearch input,
html[data-skin="le"] .sk-panel .inp{
  border:0;background:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border-radius:0;
}
html[data-skin="le"] .cb-search .inp:focus,
html[data-skin="le"] .cb-find .inp:focus,
html[data-skin="le"] .menusearch input:focus,
html[data-skin="le"] .qcsearch input:focus,
html[data-skin="le"] .globalsearch input:focus,
html[data-skin="le"] .sk-panel .inp:focus{
  border:0;background:transparent;box-shadow:none;outline:none;
}
/* Khung bọc nhận hình dáng Liquid Emerald, và nó là chỗ hiện viền khi focus */
html[data-skin="le"] .cb-search{
  border-radius:var(--le-radius-field);border-color:rgba(16,35,56,.12);
  background:rgba(255,255,255,.82);
}
html[data-skin="le"] .cb-search:focus-within{
  border-color:var(--br-500);box-shadow:0 0 0 3.5px rgba(15,148,121,.16);
}
@media (max-width:900px){
  html[data-skin="le"] .cb-search{min-height:var(--le-field-height);padding-inline:12px}
  html[data-skin="le"] .cb-search .inp{font-size:16px}
}

/* ── 22 · Menu trái phải nằm TRÊN thanh tiêu đề khi mở ───────────────────────
   `.top` và `.side` cùng z-index 60; `.top` đứng sau trong DOM nên luôn thắng,
   che mất phần đầu của menu trượt (dòng "Tổng quan" và ô tìm màn hình bị khuất).
   Nâng menu và lớp nền mờ lên trên thanh tiêu đề, vẫn dưới hộp thoại (300). */
html[data-skin="le"] .side{z-index:120}
html[data-skin="le"] .sideveil{z-index:110}

/* ── 23 · Thanh trên CHỈ còn: nút ngữ cảnh · tên trang · "⋯" ─────────────────
   Theo yêu cầu: gom hết vào menu ba chấm, hàng đầu chỉ thể hiện tên trang.
   Chuông và công cụ riêng của trang (nhập / xuất / in / nút hành động) cũng vào
   menu — nhờ vậy thanh tiêu đề luôn đúng MỘT hàng, không còn tràn hai tầng. */
@media (max-width:900px){
  html[data-skin="le"] .top{padding:10px 12px}
  html[data-skin="le"] .top .toprow{flex-wrap:nowrap;gap:8px}
  html[data-skin="le"] .top .toprow > .bell{display:none}
  html[data-skin="le"] .top .right.pageright{display:none}
  html[data-skin="le"] .top .ttl{flex:1 1 auto;min-width:0}

  /* Trong menu "⋯": công cụ của trang hiện thành hàng có nhãn như mọi mục khác */
  html[data-skin="le"] .top .topicons.le-open > .right.pageright{
    display:flex !important;flex-direction:column;align-items:stretch;gap:2px;
    width:100%;margin:0;padding:6px 0 0;border-top:1px solid var(--line);
    overflow:visible;
  }
  html[data-skin="le"] .top .topicons.le-open > .right.pageright .btn,
  html[data-skin="le"] .top .topicons.le-open > .right.pageright a,
  html[data-skin="le"] .top .topicons.le-open > .right.pageright button{
    width:100%;min-height:var(--le-touch-min);
    justify-content:flex-start;gap:10px;padding:0 12px;
    border-radius:10px;font-size:14px;font-weight:550;
  }
  html[data-skin="le"] .top .topicons.le-open > .right.pageright .pagetools{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;
  }
  html[data-skin="le"] .top .topicons.le-open > .bell{order:1}
  /* chấm đỏ trên nút "⋯" khi có thông báo chưa đọc — chuông đã vào trong menu */
  html[data-skin="le"] .top .lemore.hasnew::after{
    content:'';position:absolute;top:7px;right:7px;width:9px;height:9px;border-radius:50%;
    background:#D9342B;border:2px solid rgba(255,255,255,.92);
  }
}

/* ── 24 · Điện thoại: ẩn thanh trượt, không cho phóng to thu nhỏ ─────────────
   Quy ước đã chốt của dự án (28/09/2026). Lưu ý: Master Prompt §5 yêu cầu NGƯỢC
   lại ("Không khóa zoom") — ở đây theo quy ước của người dùng, đã ghi ngoại lệ
   vào QA_REPORT. Nội dung vẫn cuộn được bình thường, chỉ ẩn thanh trượt. */
@media (max-width:900px){
  html[data-skin="le"] *{scrollbar-width:none;-ms-overflow-style:none}
  html[data-skin="le"] *::-webkit-scrollbar{width:0;height:0;display:none}
  /* chặn phóng to khi bấm hai lần; vẫn cuộn và kéo bình thường */
  html[data-skin="le"] body{touch-action:pan-x pan-y}
}

/* ── 25 · Quét sâu màn con — thêm các điều khiển dùng chung còn thiếu ────────
   Rà tiếp các màn hình CON (biểu mẫu, chi tiết, danh mục) của nhiều module,
   phát hiện ba nhóm nữa, đều dùng chung chứ không riêng module nào.           */

/* 25.1 · Double outline thứ hai: trình soạn thảo chữ.
   `.rte-wrap` tự vẽ khung (viền + bo góc + overflow:hidden), ô nhập bên trong
   lại nhận viền từ quy tắc `.inp` ở mục 5 → hai lớp viền lồng nhau, đúng kiểu
   lỗi đã gặp ở `.cb-search`. */
html[data-skin="le"] .rte-wrap{border-radius:var(--le-radius-field);border-color:rgba(16,35,56,.12)}
html[data-skin="le"] .rte-wrap:focus-within{border-color:var(--br-500);box-shadow:0 0 0 3.5px rgba(15,148,121,.16)}
html[data-skin="le"] .rte-wrap .inp,
html[data-skin="le"] .rte-wrap .rte-body{
  border:0;background:transparent;box-shadow:none;border-radius:0;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html[data-skin="le"] .rte-wrap .inp:focus,
html[data-skin="le"] .rte-wrap .rte-body:focus{border:0;box-shadow:none;outline:none}

/* 25.2 · Dải nút của thanh lệnh danh sách (Bộ lọc · Cột · Sắp xếp · Dòng) —
   có mặt trên MỌI danh sách, trước chỉ cao 28–30px. Dải này đặc và sát nhau
   nên không phóng to ô nhìn thấy (sẽ vỡ hàng), chỉ nới vùng chạm theo chiều
   dọc như đã làm với nút thu gọn thẻ. */
@media (max-width:900px){
  html[data-skin="le"] .cb-btn,
  html[data-skin="le"] .cb-viewbtn{position:relative;min-height:34px}
  html[data-skin="le"] .cb-btn::after,
  html[data-skin="le"] .cb-viewbtn::after{
    content:'';position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);
    height:var(--le-touch-min);
  }
  html[data-skin="le"] .cb-btn:focus-visible,
  html[data-skin="le"] .cb-viewbtn:focus-visible{outline:3px solid var(--br-500);outline-offset:2px}
  /* hàng chứa chúng phải đủ cao để các vùng chạm không chồng lên nhau */
  html[data-skin="le"] .cb-more,
  html[data-skin="le"] .cb-sub{min-height:var(--le-touch-min);align-items:center}
}

/* 25.3 · Thanh công cụ soạn thảo và dải tab trong biểu mẫu.
   NGOẠI LỆ CÓ CHỦ Ý so với mục tiêu 44px: đây là thanh công cụ ĐẶC (đậm,
   nghiêng, danh sách, cỡ chữ… xếp sát nhau). Phóng lên 44px sẽ làm thanh vỡ
   thành ba hàng và đẩy ô soạn thảo xuống dưới màn hình. Nâng lên 38px và mở
   rộng khoảng cách giữa các nút để bớt bấm nhầm; ghi ngoại lệ vào QA_REPORT. */
@media (max-width:900px){
  html[data-skin="le"] .rte-btn,
  html[data-skin="le"] .rte-sel{min-height:38px;height:38px}
  html[data-skin="le"] .rte-btn{min-width:38px;width:38px}
  html[data-skin="le"] .rte-bar{gap:3px;row-gap:4px}
  html[data-skin="le"] .tabbtn{min-height:var(--le-touch-min);padding-inline:14px}
}