/* gmm-theme.css — giao diện riêng từng tài khoản (nút 🎨), dùng chung cho trang Thiết bị (/), Kho ứng dụng (/app) và Mã 2FA (/2FA).
   Cùng bộ biến và cùng 4 kiểu với quanly.gmm.vn (quanly.css): Champagne (mặc định) / Đêm xanh / Sáng / Tối giản.
   html[data-theme=...] đổi bộ biến bên dưới; màu nhấn tự chọn và hình nền do gmm-theme.js đặt thẳng lên <html>.
   Champagne giữ đúng giao diện kính mờ đang chạy của thietbi (nền trong hơn quanly vì thietbi còn backdrop-filter).
   --tint = màu (r,g,b) của lớp phủ / viền mờ: trắng ấm trên giao diện tối, nâu / xám đậm trên giao diện sáng. */
:root{--radius:24px;--red:#ff7d80;--red2:rgba(205,63,67,.22);--green:#83d9b2;--green2:rgba(63,166,124,.21);--amber:#e7c28b;--amber2:rgba(211,166,98,.20);--blue:#c5bed0;--blue2:rgba(160,151,177,.22);
 --scheme:dark;--html-bg:#554c47;--bg:var(--html-bg);--tint:255,246,232;--text:#fffaf2;--text2:#e9dfd4;--muted:#d8cec3;--faint:#c3b5a8;
 --surface:rgba(48,40,38,.54);--surface2:rgba(var(--tint),.105);--border:rgba(var(--tint),.25);
 --accent:#e7c28b;--accent-rgb:231,194,139;--heading:#efd09d;--link:#fff3dd;--btn-bg:linear-gradient(135deg,#f4d8aa 0%,#c6aa86 48%,#aaa4b1 100%);--btn-text:#382c27;
 --alert-text:#ffebc9;--err-text:#ffd1d8;--warn-text:#ffc98f;--title-glow:0 1px 16px rgba(255,226,177,.24);
 --glass-bg:linear-gradient(145deg,rgba(54,45,43,.68),rgba(57,51,52,.37));--glass-border:rgba(255,244,226,.27);--glass-shadow:inset 0 1px 0 rgba(255,250,240,.3),inset 0 -1px 0 rgba(255,255,255,.035),0 18px 48px rgba(32,23,20,.25);
 --glass-shine:linear-gradient(135deg,rgba(255,247,231,.17),transparent 30%,transparent 68%,rgba(190,184,205,.09));--glass-blur:blur(25px) saturate(170%);
 --nav-bg:linear-gradient(145deg,rgba(61,51,48,.69),rgba(65,58,60,.39));--modal-bg:var(--glass-bg);--menu-solid:#4e4441;--solid-bg:rgba(75,64,58,.94);--overlay:rgba(42,34,34,.58);
 --page-bg:radial-gradient(circle at 4% 12%,rgba(230,192,125,.68),transparent 31%),radial-gradient(circle at 45% -5%,rgba(245,237,222,.72),transparent 30%),radial-gradient(circle at 92% 6%,rgba(92,78,72,.7),transparent 33%),radial-gradient(circle at 79% 87%,rgba(123,132,149,.68),transparent 36%),radial-gradient(circle at 18% 92%,rgba(163,139,108,.45),transparent 32%),linear-gradient(145deg,#8e7c68 0%,#5f514a 45%,#555765 100%);
 --blob-a:radial-gradient(circle at 65% 35%,rgba(255,221,158,.58),rgba(167,128,78,.04) 70%);--blob-b:radial-gradient(circle at 35% 30%,rgba(199,194,213,.52),rgba(84,83,102,.02) 72%);
 --dim-rgb:28,22,20;
 --tag-red:#ffb0b2;--tag-red-a:.15;--tag-amber:#f5dcb3;--tag-amber-a:.13;--placeholder:var(--muted)} /* 12/10/2026: tag đỏ/vàng và chữ gợi ý trên nền tối ≥ 4.5:1 (trước ~3:1) */
/* Đêm xanh: tối, lạnh, tương phản cao */
html[data-theme=midnight]{--html-bg:#121722;--tint:214,224,255;--text:#eef2ff;--text2:#d6ddf0;--muted:#aab4cc;--faint:#8c97b2;--blue:#a9bdf0;--blue2:rgba(110,140,220,.2);
 --surface:rgba(24,31,47,.6);--border:rgba(var(--tint),.18);
 --accent:#6ea8fe;--accent-rgb:110,168,254;--heading:#a9c8ff;--link:#d3e3ff;--btn-bg:linear-gradient(135deg,#a9c8ff 0%,#6ea8fe 52%,#4d78d0 100%);--btn-text:#0e1630;--title-glow:0 1px 16px rgba(120,160,255,.25);
 --glass-bg:linear-gradient(145deg,rgba(30,38,56,.86),rgba(24,31,47,.74));--glass-border:rgba(160,180,230,.18);--glass-shadow:inset 0 1px 0 rgba(200,215,255,.1),0 10px 26px rgba(0,0,0,.35);--glass-shine:linear-gradient(135deg,rgba(200,215,255,.06),transparent 35%);
 --nav-bg:linear-gradient(145deg,rgba(29,36,54,.97),rgba(24,30,46,.96));--modal-bg:linear-gradient(145deg,#1e2639,#192133);--menu-solid:#1e2639;--solid-bg:rgba(27,34,51,.96);--overlay:rgba(6,8,16,.7);
 --page-bg:radial-gradient(circle at 8% 8%,rgba(70,100,190,.45),transparent 35%),radial-gradient(circle at 92% 12%,rgba(130,90,190,.3),transparent 35%),radial-gradient(circle at 80% 92%,rgba(40,140,170,.25),transparent 40%),linear-gradient(160deg,#1b2336 0%,#131a29 55%,#0f1420 100%);
 --blob-a:none;--blob-b:none;--dim-rgb:9,13,22}
/* Sáng và Tối giản dùng chung: màu trạng thái đậm hơn để đọc được trên nền trắng */
html[data-theme=light],html[data-theme=minimal]{--scheme:light;--red:#a8262d;--red2:rgba(205,63,67,.12);--green:#17663f;--green2:rgba(40,150,100,.13);--amber:#7d520f;--amber2:rgba(200,150,60,.16);
 --tag-red:var(--red);--tag-red-a:.14;--tag-amber:var(--amber);--tag-amber-a:.16;--placeholder:var(--faint); /* 12/10/2026: chữ trạng thái + chữ gợi ý ≥ 4.5:1 trên nền trắng */
 
 --alert-text:#6b4510;--err-text:#a3232c;--warn-text:#9a5a10;--title-glow:none;--glass-shine:none;--border:rgba(var(--tint),.16);--blob-a:none;--blob-b:none}
/* Sáng: nền kem, thẻ trắng, chữ nâu đậm */
html[data-theme=light]{--html-bg:#efe9df;--tint:72,54,38;--text:#2a221d;--text2:#3f352e;--muted:#6e6158;--faint:#7a6c61;--blue:#5f5577;--blue2:rgba(120,105,150,.14);--surface:rgba(255,255,255,.75);
 --accent:#b07d2b;--accent-rgb:176,125,43;--heading:#8a5a12;--link:#7a4a0e;--btn-bg:linear-gradient(135deg,#e6c07c 0%,#d1a35a 55%,#bf8d42 100%);--btn-text:#2a1c08;
 --glass-bg:rgba(255,255,255,.84);--glass-border:rgba(72,54,38,.13);--glass-shadow:0 6px 18px rgba(60,40,20,.08);
 --nav-bg:rgba(255,253,249,.97);--modal-bg:#fffdf9;--menu-solid:#fff;--solid-bg:rgba(255,253,249,.97);--overlay:rgba(40,30,20,.35);
 --page-bg:radial-gradient(circle at 6% 10%,rgba(232,200,150,.45),transparent 35%),radial-gradient(circle at 92% 88%,rgba(190,190,215,.4),transparent 40%),linear-gradient(160deg,#f8f4ee,#ece5da);--dim-rgb:250,247,242}
/* Tối giản: phẳng, trắng xám, không dải màu, không kính mờ, góc bo nhỏ */
html[data-theme=minimal]{--html-bg:#f3f4f6;--tint:17,24,39;--text:#111827;--text2:#374151;--muted:#5f6672;--faint:#687080;--blue:#4b5563;--blue2:rgba(75,85,99,.1);--surface:#fff;
 --accent:#2563eb;--accent-rgb:37,99,235;--heading:#1d4ed8;--link:#1d4ed8;--btn-bg:#2563eb;--btn-text:#fff;
 --glass-bg:#fff;--glass-border:#e5e7eb;--glass-shadow:0 1px 2px rgba(17,24,39,.05);--glass-blur:none;--nav-bg:#fff;--modal-bg:#fff;--menu-solid:#fff;--solid-bg:#fff;--overlay:rgba(17,24,39,.4);--page-bg:#f3f4f6;--dim-rgb:243,244,246}
/* 20/10/2026 (người dùng: "những thông báo dạng như trên … loại bỏ đi với những tài khoản nhân viên"): đoạn giải thích cách hệ thống chạy (.staff-note)
   chỉ quản trị gốc thấy — trang đặt lớp gmm-staff lên <html> khi người đăng nhập không phải quản trị gốc. */
html.gmm-staff .staff-note{display:none!important}
/* Hình nền tự tải lên (html.has-bg): thẻ và thanh tab đậm nền hơn để chữ không chìm vào ảnh */
html.has-bg[data-theme=champagne]{--glass-bg:linear-gradient(145deg,rgba(58,48,46,.92),rgba(58,51,53,.86));--glass-border:rgba(255,244,226,.22);--nav-bg:linear-gradient(145deg,rgba(68,58,54,.96),rgba(66,60,62,.93))}
html.has-bg[data-theme=midnight]{--glass-bg:linear-gradient(145deg,rgba(28,36,54,.93),rgba(23,30,46,.88))}
html.has-bg[data-theme=light]{--glass-bg:rgba(255,255,255,.93)}

/* ---------- Hộp chọn giao diện (gmm-theme.js), tự đủ để dùng được trên cả 3 trang ---------- */
.gmm-th-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--overlay);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gmm-th-box{position:relative;width:min(640px,100%);max-height:92vh;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;padding:18px;border-radius:22px;border:1px solid var(--glass-border);background:var(--modal-bg);color:var(--text);box-shadow:var(--glass-shadow),0 24px 70px rgba(0,0,0,.28);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);font-family:'Be Vietnam Pro','Segoe UI',Arial,sans-serif;font-size:14px;line-height:1.5;text-align:left}
.gmm-th-box *{box-sizing:border-box}
.gmm-th-head{display:flex;align-items:center;gap:10px}.gmm-th-head h2{flex:1;margin:0;font-size:18px;color:var(--text)}
.gmm-th-x{flex:none;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid rgba(var(--tint),.25);background:rgba(var(--tint),.1);color:var(--text);font:inherit;font-size:15px;cursor:pointer}
.gmm-th-note{margin:6px 0 0;font-size:12.5px;color:var(--muted)}.gmm-th-note b{color:var(--text)}
.gmm-th-title{margin:16px 0 6px;padding-bottom:6px;border-bottom:1px solid rgba(var(--tint),.14);font-size:12px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--heading)}
.gmm-th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.gmm-th-card{border:2px solid rgba(var(--tint),.15);border-radius:16px;padding:8px;background:rgba(var(--tint),.04);cursor:pointer;text-align:left;color:var(--text);font:inherit}
.gmm-th-card.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2)}
.gmm-th-prev{height:62px;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:5px;margin-bottom:7px;border:1px solid rgba(0,0,0,.08)}
.gmm-th-prev i{display:block;height:8px;border-radius:4px}
.gmm-th-card b{display:block;font-size:13px}.gmm-th-card span{font-size:11.5px;color:var(--muted)}
.gmm-th-sw{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gmm-th-dot{width:30px;height:30px;border-radius:50%;border:2px solid rgba(var(--tint),.25);cursor:pointer;padding:0}
.gmm-th-dot.active{outline:3px solid var(--accent);outline-offset:2px}
.gmm-th-dot.def{background:repeating-linear-gradient(45deg,rgba(var(--tint),.25) 0 4px,transparent 4px 8px);color:var(--text);font:inherit;font-size:11px;width:auto;padding:0 10px;border-radius:15px}
.gmm-th-custom{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}.gmm-th-custom input{width:44px;height:32px;padding:2px;border-radius:10px;border:1px solid rgba(var(--tint),.25);background:transparent;cursor:pointer}
.gmm-th-bg{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.gmm-th-thumb{flex:none;width:150px;height:92px;border-radius:12px;border:1px solid rgba(var(--tint),.2);background:rgba(var(--tint),.06) center/cover no-repeat;display:grid;place-items:center;font-size:12px;color:var(--muted);text-align:center;padding:6px}
.gmm-th-ctl{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px}
.gmm-th-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.gmm-th-ctl label{font-size:12px;color:var(--text)}.gmm-th-ctl label span{color:var(--muted)}
.gmm-th-ctl input[type=range]{width:100%;margin:0;accent-color:var(--accent)}
.gmm-th-hint{margin-top:8px;font-size:11.5px;color:var(--faint)}
.gmm-th-msg{font-size:12px;color:var(--muted)}.gmm-th-msg.bad{color:var(--err-text)}
.gmm-th-btn{position:relative;border:1px solid rgba(var(--tint),.4);border-radius:14px;padding:10px 14px;background:var(--btn-bg);color:var(--btn-text);font:inherit;font-weight:800;font-size:13.5px;cursor:pointer}
.gmm-th-btn.ghost{background:rgba(var(--tint),.1);color:var(--text);border-color:rgba(var(--tint),.25);font-weight:600}
.gmm-th-btn.small{padding:7px 11px;font-size:12px;border-radius:12px}
.gmm-th-btn:disabled{opacity:.55;cursor:not-allowed}
.gmm-th-btn.loading{color:transparent!important;pointer-events:none}
.gmm-th-btn.loading:after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2.5px solid rgba(0,0,0,.2);border-top-color:rgba(255,255,255,.95);animation:gmm-th-spin .7s linear infinite}
@keyframes gmm-th-spin{to{transform:rotate(360deg)}}
.gmm-th-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.gmm-th-box button:focus-visible,.gmm-th-box input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:560px){.gmm-th-box{padding:14px;border-radius:18px}.gmm-th-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gmm-th-thumb{width:100%;height:110px}}