/* base.css - file CSS dùng chung cho toàn hệ thống (mobile first) — tối giản, 3 màu chủ đạo: trắng / đen / hồng pastel */
:root{
  --bg:#fff; --card:#fff; --text:#111; --muted:#6b6b6b; --line:rgba(0,0,0,.15);
  --primary:#ffb6c1;                                        /* nền nút (hồng chủ đạo) */
  --primary-text:#141414;                                    /* chữ trên nền hồng để bảo đảm dễ đọc */
  --primary-d:#ff4f81;                                        /* hồng tươi: hover nút, viền nhấn */
  --primary-tint:color-mix(in srgb, var(--primary) 35%, #fff); /* hồng rất nhạt: nền hover cho nút viền */
  --link:#ff4f81;                                              /* hồng tươi: link, viền focus */
  --err:#b42318; --ok:#067647;                                /* giữ đỏ/xanh lá cho báo lỗi và báo thành công — tín hiệu chức năng, không phải màu trang trí */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.card{width:100%;max-width:420px;background:var(--card);padding:24px 0}
h1{margin:0 0 16px;font-size:1.5rem}
label{display:block;margin:14px 0 6px;font-weight:600;font-size:.95rem}
input[type=text],input[type=tel],input[type=password]{width:100%;padding:12px;font:inherit;border:1px solid var(--line);border-radius:20px;background:#fff;color:inherit}
input:focus,select:focus{outline:none;border-color:var(--primary-d);background:#fff}
.otp{font-size:1.5rem;letter-spacing:.5em;text-align:center}
.pw{display:flex;gap:8px}
.pw input{flex:1;min-width:0}
.ghost{flex:none;padding:0 14px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--text);font:inherit;cursor:pointer}
.ghost:hover{border-color:var(--primary-d);background:#fff;color:var(--text)}
.btn{width:100%;margin-top:18px;padding:13px;border:0;border-radius:20px;background:linear-gradient(135deg,var(--primary-tint),var(--primary));color:var(--primary-text);font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:linear-gradient(135deg,var(--primary-tint),var(--primary));color:var(--primary-text);border:1px solid var(--primary-d)}
.btn.light{background:#fff;color:var(--text);border:1px solid var(--line)}
.btn.light:hover{border-color:var(--primary-d);background:#fff;color:var(--text)}
.ghost:focus,.ghost:active,.btn:focus,.btn:active{outline:none;border:1px solid var(--primary-d)}
.resend{margin-top:8px}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;font-weight:400;font-size:.92rem}
.check input{margin-top:4px;width:18px;height:18px;flex:none}
.err{margin:4px 0 0;color:var(--err);font-size:.88rem}
.err:empty{display:none}
.alert,.ok{padding:10px 12px;border-radius:10px;font-size:.92rem;margin:0 0 12px}
.alert{background:#fef3f2;color:var(--err)}
.ok{background:#ecfdf3;color:var(--ok)}
.note{color:var(--muted);font-size:.85rem;margin:14px 0 0}
.alt{text-align:center;margin:18px 0 0;font-size:.95rem}
a{color:var(--link)}
.cf-turnstile{margin-top:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ô bẫy chống máy, người thật không thấy */

/* ===== Giai đoạn 2 ===== */
.card.wide{max-width:720px}
h2{margin:28px 0 8px;font-size:1.15rem;padding-top:16px;border-top:1px solid var(--line)}
h2.danger-title{color:var(--err)}
ul{padding-left:20px;margin:8px 0}
li{margin:4px 0}
.alt.left{text-align:left;margin:0 0 8px}
.menu{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.menu a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text)}
.menu a:hover{border-color:var(--primary-d);background:var(--primary-tint);color:var(--primary-text)}
.btn.danger{background:var(--err)}
.btn.danger:hover{background:#912018}
input:disabled{background:#f2f4f7;color:var(--muted)}
.meter{height:6px;background:#eaecf0;border-radius:3px;margin-top:8px;overflow:hidden}
.meter span{display:block;height:100%;width:0;background:#d92d20;transition:width .2s}
.meter span[data-level="1"]{width:25%;background:#d92d20}
.meter span[data-level="2"]{width:50%;background:#f79009}
.meter span[data-level="3"]{width:75%;background:#84cc16}
.meter span[data-level="4"]{width:100%;background:#12b76a}
.meter-text{margin:6px 0 0}
.device{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.device .note{margin:2px 0 0}
.device form{margin:0}
.device .ghost{padding:8px 12px}
.tag{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--text);font-size:.78rem;font-weight:600}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}
.stats div{padding:12px;border:1px solid var(--line);border-radius:10px}
.stats strong{display:block;font-size:1.4rem}
.stats span{font-size:.8rem;color:var(--muted)}
.scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.tbl th,.tbl td{padding:8px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tr.unread td{background:#fffaeb}
.tbl form{display:inline;margin:0}
.tbl .ghost{padding:4px 10px;margin:2px 0}

/* ===== Phân quyền ===== */
select{width:100%;padding:10px 12px;font:inherit;border:1px solid var(--line);border-radius:20px;background:#fff;color:inherit}
.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.inline select,.inline input{width:auto;flex:1;min-width:120px}
.secret{display:inline-block;margin:6px 0;padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--text);font:600 1.2rem ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;user-select:all}
details summary{cursor:pointer;color:var(--link);padding:2px 0}
details form{margin:10px 0}
details label{margin:8px 0 4px;font-size:.85rem}
.matrix th,.matrix td{text-align:center}
.matrix th:first-child,.matrix td:first-child{text-align:left;min-width:150px}
.matrix th{font-size:.75rem;min-width:70px}
.matrix input[type=checkbox]{width:18px;height:18px}
.matrix input[type=text]{padding:8px}
.menu-item{display:block;padding:10px 14px;border:1px solid var(--line);border-radius:10px}

/* ===== Dock (menu điều hướng) =====
   Hai bố cục dùng chung một đoạn HTML (app/layout.php) và cùng một phong cách tối giản của hệ thống (trắng / đen / hồng pastel, viền mảnh, không đổ bóng nặng):
   - Mặc định (laptop, tablet ngang): thanh bên dọc ở mép PHẢI màn hình — ảnh đại diện + lời chào + vai trò ở đầu, thẻ phiên đăng nhập ở cuối.
   - Điện thoại + tablet dọc (@media ở cuối khối này): thanh dock nổi dạng viên thuốc ở cuối màn hình, chỉ icon + tiêu đề ngắn.
   Màu lấy từ biến của hệ thống ở đầu file (--primary, --primary-tint, --primary-d, --line, --muted...) nên đổi màu hệ thống là dock đổi theo.
   Nền "đang chọn" là .pill; app.js trượt nó tới mục đang chọn (theo chiều dọc ở thanh bên, theo chiều ngang ở điện thoại). */
:root{--sb-w:240px;--sb-gap:16px}                      /* bề rộng thanh bên + khoảng cách tới mép màn hình */
body.with-dock{padding-right:calc(var(--sb-w) + var(--sb-gap) * 2)}   /* chừa chỗ để nội dung không nằm dưới thanh bên */

/* --- Phần dùng chung: icon, nền trượt, ảnh đại diện, số báo, animation --- */
.menu.dock{--dk-ic:20;--dk-sw:1.7}                   /* cỡ icon (px) + độ dày nét (px); điện thoại đặt lại bên dưới */
.menu.dock a,.menu.dock .dkw,.menu.dock .dk-btn{position:relative;z-index:1;display:flex;align-items:center;text-decoration:none;border:0;-webkit-tap-highlight-color:transparent;transition:color .25s}
.menu.dock .dk-btn{appearance:none;-webkit-appearance:none;margin:0;width:100%;font:inherit;text-align:left;cursor:pointer}   /* nút Tài khoản là <button>: bỏ kiểu mặc định để giống các mục khác */
.menu.dock .lb{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}   /* chữ đầy đủ chỉ để trình đọc màn hình */
.menu.dock .tt{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu.dock .ic{display:block;flex:none;width:calc(var(--dk-ic) * 1px);height:calc(var(--dk-ic) * 1px);overflow:visible}
/* Icon từ bộ svg-animation (lưới 64) lấy nét ở đây; icon tự vẽ (lưới 24, class ic-gen) lấy nét ở dòng sau — cùng một độ dày (--dk-sw) */
.menu.dock .ic .l{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:calc(var(--dk-sw) * 64 / var(--dk-ic) * 1px)}
.menu.dock .ic-gen{stroke-width:calc(var(--dk-sw) * 24 / var(--dk-ic) * 1px)}
.menu.dock .ic .m{transform-box:fill-box;transform-origin:center}
.menu.dock .ic-bag .m{transform-origin:50% 100%}
.menu.dock .ic .door{fill:currentColor;transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0)}   /* cửa nhà: chỉ hiện khi đang chọn */
.menu.dock .pill{display:block;position:absolute;z-index:0;top:0;left:0;width:0;height:0;border-radius:999px;background:var(--primary-tint);pointer-events:none;
  transition:transform .34s cubic-bezier(.4,0,.2,1),width .34s cubic-bezier(.4,0,.2,1),height .34s cubic-bezier(.4,0,.2,1)}
.menu.dock .pill.nt{transition:none}
.menu.dock a.on,.menu.dock a.on:hover,.menu.dock .dk-btn.on,.menu.dock .dk-btn.on:hover{background:var(--primary-tint);color:var(--primary-d)}
.menu.dock.has-pill a.on,.menu.dock.has-pill a.on:hover{background:transparent}   /* khi đã có nền trượt thì nền riêng của mục tắt đi */
.menu.dock a.press{background:rgba(0,0,0,.07)}   /* hiệu ứng đang nhấn: do app.js thêm/bỏ class (không dùng :active vì bị kẹt khi bảng chia sẻ của máy bật lên) */
.menu.dock .av{display:flex;flex:none;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;
  border:2px solid #111;background:var(--primary);color:var(--primary-text);font-weight:700;font-size:.72rem;line-height:1}   /* nút Tài khoản: vòng tròn chữ cái đại diện */
.menu.dock a.on .av,.menu.dock .dk-btn.on .av{border-color:var(--primary-d)}
.menu.dock .bdg{display:block;position:absolute;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#d6303b;color:#fff;
  font:700 .75rem/20px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff}                       /* số báo đỏ (cảnh báo chưa đọc của Quản trị) */
/* Hiệu ứng khi mục thành "đang chọn": chạy đúng một lần lúc mở trang hoặc vừa bấm, rồi đứng yên (chuyển động rút từ bộ svg-animation) */
.menu.dock a.on .ic .door{transform:scaleY(1);animation:dk-door .5s ease-out .15s backwards}
.menu.dock a.on .ic-bag .m{animation:dk-bag .8s ease-out}
.menu.dock a.on .ic-login .m{animation:dk-in .7s ease-in-out}
.menu.dock a.on .ic-signup .plus{animation:dk-plus .6s ease-in-out}
.menu.dock a.on .ic-gen{animation:dk-pop .6s ease-out}
.menu.dock a.on .av,.menu.dock .dk-btn.on .av{animation:dk-hop .6s ease-out}
.menu.dock a.fly .ic-plane .m{animation:dk-fly .8s ease-in}      /* máy bay giấy: bay đi rồi bay lại khi bấm Chia sẻ (app.js thêm class fly) */
@keyframes dk-door{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes dk-bag{0%,100%{transform:none}30%{transform:translateY(-8px)}55%{transform:scale(.97,1.03)}}
@keyframes dk-in{0%,100%{transform:none}45%{transform:translateX(9px)}}
@keyframes dk-plus{from{transform:rotate(0)}to{transform:rotate(90deg)}}
@keyframes dk-pop{0%,100%{transform:none}35%{transform:translateY(-3px) scale(1.12)}65%{transform:scale(.96)}}
@keyframes dk-hop{0%,100%{transform:none}40%{transform:translateY(-3px)}}
@keyframes dk-fly{0%{transform:none;opacity:1}45%{transform:translate(30px,-30px);opacity:0}46%{transform:translate(-30px,30px);opacity:0}100%{transform:none;opacity:1}}

/* --- Mặc định: thanh bên dọc ở mép phải (laptop, tablet ngang) --- */
.menu.dock{position:fixed;top:var(--sb-gap);right:var(--sb-gap);bottom:var(--sb-gap);left:auto;z-index:50;display:flex;flex-direction:column;gap:4px;
  width:var(--sb-w);margin:0;padding:24px 12px 12px;overflow:hidden auto;scrollbar-width:none;
  background:#fff;color:var(--text);border:1px solid rgba(0,0,0,.08);border-radius:28px;box-shadow:0 4px 18px rgba(0,0,0,.08)}
.menu.dock::-webkit-scrollbar{display:none}
.menu.dock a,.menu.dock .dkw,.menu.dock .dk-btn{flex:none;gap:12px;height:46px;padding:0 16px;border-radius:999px;background:transparent;color:var(--text);font-weight:600;font-size:.92rem}
.menu.dock a:hover,.menu.dock .dk-btn:hover{background:rgba(0,0,0,.04);color:var(--text)}
.menu.dock .dkw{opacity:.4;cursor:not-allowed;user-select:none;-webkit-user-select:none}   /* nút chờ điều chỉnh: mờ, không bấm được, không có liên kết */
.menu.dock a.on:hover{color:var(--primary-d)}
.menu.dock .tt{flex:1;min-width:0;text-align:left;font-size:.92rem;font-weight:600}
.menu.dock .bdg{right:12px;top:50%;margin-top:-10px}
/* Đầu thanh: ảnh đại diện + lời chào + vai trò */
.menu.dock .side-head{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:8px;padding:0 0 18px;border-bottom:1px solid rgba(0,0,0,.08);text-align:center}
.menu.dock .side-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin-bottom:8px;border-radius:50%;
  border:2px solid #111;background:var(--primary);color:var(--primary-text);font-size:1.7rem;font-weight:700}
.menu.dock .side-dot{position:absolute;right:1px;bottom:1px;width:14px;height:14px;border-radius:50%;background:var(--ok);border:3px solid #fff}
.menu.dock .side-hi{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:1rem;line-height:1.3}
.menu.dock .side-role{padding:2px 12px;border-radius:999px;background:var(--primary-tint);color:var(--text);font-size:.65rem;font-weight:700;letter-spacing:.08em}
/* Cuối thanh: thẻ phiên đăng nhập (khách: lời mời đăng ký) */
.menu.dock .side-foot{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:auto;padding:16px 12px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;text-align:center}
.menu.dock .side-crest{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:2px;border-radius:50%;background:var(--primary-tint);color:var(--primary-d)}
.menu.dock .side-crest .ic{width:20px;height:20px}
.menu.dock .side-ft{font-weight:700;font-size:.88rem;line-height:1.3}
.menu.dock .side-fs{color:var(--muted);font-size:.74rem;line-height:1.4}
.menu.dock .side-out{width:100%;margin:8px 0 0}
.menu.dock .side-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;padding:0 12px;border:1px solid transparent;border-radius:20px;cursor:pointer;
  background:linear-gradient(135deg,var(--primary-tint),var(--primary));color:var(--primary-text);font:inherit;font-weight:600;font-size:.88rem;-webkit-tap-highlight-color:transparent}
.menu.dock .side-btn:hover{border-color:var(--primary-d)}
.menu.dock .side-btn.light{background:#fff;color:var(--text);border-color:var(--line)}
.menu.dock .side-btn.light:hover{border-color:var(--primary-d)}
.menu.dock .side-btn .ic{width:18px;height:18px}
/* Màn hình thấp: thu gọn dần để vẫn đủ chỗ cho 5 mục */
@media (max-height:760px){
  .menu.dock .side-avatar{width:56px;height:56px;font-size:1.4rem}
  .menu.dock .side-head{padding-bottom:12px}
  .menu.dock .side-fs{display:none}
}
@media (max-height:640px){.menu.dock .side-foot{display:none}}
@media (max-height:520px){.menu.dock .side-head{display:none}.menu.dock{padding-top:12px}}
@media (max-width:1100px){:root{--sb-w:216px}}

/* --- Điện thoại + tablet dọc: thanh dock nổi dạng viên thuốc ở cuối màn hình (kiểu Facebook), chỉ icon + tiêu đề ngắn ---
   Dock hiện khi: cửa sổ hẹp (điện thoại) HOẶC thiết bị cảm ứng đang cầm dọc (iPad, tablet Android).
   Nhận diện theo khả năng của thiết bị (cảm ứng, không có chuột) chứ không theo bề rộng: tablet Android hay mở trang ở chế độ "Trang web cho máy tính"
   nên bề rộng trang báo về 1280px trở lên, nếu dựa vào bề rộng sẽ bị nhận nhầm là laptop. */
@media (max-width:600px), (hover:none) and (pointer:coarse) and (orientation:portrait){
  body.with-dock{padding-right:16px}
  .card.has-dock{padding-bottom:112px}                      /* chừa chỗ để nội dung không bị dock che (mọi trang có dock) */
  .menu.dock{--dk-ic:24;--dk-sw:1.8;top:auto;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-width:560px;margin:0 auto;
    flex-direction:row;gap:2px;padding:6px;overflow:visible;border-radius:999px;box-shadow:0 4px 18px rgba(0,0,0,.16)}
  .menu.dock .side-head,.menu.dock .side-foot{display:none}
  .menu.dock a,.menu.dock .dkw,.menu.dock .dk-btn{flex:1;min-width:0;flex-direction:column;justify-content:center;gap:3px;height:58px;padding:0 1px;font-size:inherit;font-weight:inherit;text-align:center}
  .menu.dock a:hover,.menu.dock .dk-btn:hover{background:transparent}
  .menu.dock .dk-btn.on:hover{background:var(--primary-tint)}
  .menu.dock .tt{flex:none;max-width:100%;text-align:center;font-size:.64rem;font-weight:600;line-height:1.1}   /* nhỏ vừa đủ để chữ "Đăng nhập" không bị cắt khi dock có 5 mục */
  .menu.dock .av{width:26px;height:26px;font-size:.8rem}
  .menu.dock .bdg{top:3px;right:auto;left:calc(50% + 2px);margin-top:0}
}

@media (prefers-reduced-motion:reduce){.menu.dock .pill{transition:none}.menu.dock *{animation:none!important}}

/* Điện thoại bị xoay ngang: che giao diện, yêu cầu xoay dọc */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .page-home>*{display:none}
  .page-home::before{content:"Vui lòng xoay dọc điện thoại";position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;font-weight:600;background:#fff;color:var(--text)}
}

/* ===== Hộp thoại "Giới thiệu bạn bè" (app/friend-share.php + app.js mục 6) — mọi class có tiền tố .fs- để không đụng phần khác =====
   Màu lấy từ biến của hệ thống ở đầu file (--primary-d, --primary-tint, --text, --muted, --line, --card) nên đổi màu hệ thống là hộp thoại đổi theo. */
.fs-overlay,.fs-overlay *{box-sizing:border-box}
.fs-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(17,17,17,.5);visibility:hidden;opacity:0;transition:opacity .18s ease,visibility 0s linear .18s}
.fs-overlay.is-open{visibility:visible;opacity:1;transition-delay:0s}
.fs-panel{position:relative;width:100%;max-width:440px;max-height:90vh;overflow-y:auto;padding:26px 24px 22px;border-radius:24px;background:var(--card);color:var(--text);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.fs-overlay:not(.is-open) .fs-panel{transform:translateY(8px)}
.fs-overlay.is-open .fs-panel{transform:translateY(0);transition:transform .18s ease}
.fs-close{position:absolute;z-index:5;top:14px;right:14px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--primary-tint);color:var(--muted);font:inherit;font-size:1.3rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color .15s ease,transform .15s ease}
.fs-close:hover,.fs-close:active{color:var(--text)}
.fs-close:active{transform:scale(.92)}
.fs-close:focus{outline:none}
.fs-close:focus-visible,.fs-item:focus-visible{outline:2px solid var(--primary-d);outline-offset:2px}
.fs-heading{position:relative;z-index:1;margin-bottom:16px;padding-right:28px}
.fs-heading h1{margin:0 0 4px;font-size:1.25rem;font-weight:700;color:var(--text)}
.fs-heading p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.4}
.fs-heart{flex-shrink:0;color:var(--primary-d);vertical-align:-2px}
.fs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.fs-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--text);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fs-item:hover,.fs-item:active{border-color:var(--primary-d);background:var(--primary-tint)}
.fs-item[hidden]{display:none}
.fs-item-icon{display:block;width:44px;height:44px;line-height:0}
.fs-item-icon svg{display:block;width:44px;height:44px}
.fs-msg{margin:0;padding:9px 12px;border-radius:14px;background:var(--primary-tint);color:var(--text);font-size:.8rem;font-weight:600;text-align:center}
.fs-msg[hidden]{display:none}
@media (max-width:480px){.fs-panel{padding:24px 18px 20px}}
@media (prefers-reduced-motion:reduce){.fs-overlay,.fs-panel,.fs-close{transition:none!important}}

/* ===== Hộp thoại Đăng nhập / Đăng ký giữa trang chủ (app/auth-forms.php + app.js mục 7) — mọi class có tiền tố .am- =====
   Form bên trong dùng lại đúng các kiểu của trang (label, input, .pw, .check, .btn, .alert, .err...) nên giống hệt trang đầy đủ. */
.am-overlay,.am-overlay *{box-sizing:border-box}
.am-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(17,17,17,.5);visibility:hidden;opacity:0;transition:opacity .18s ease,visibility 0s linear .18s}
.am-overlay.is-open{visibility:visible;opacity:1;transition-delay:0s}
.am-panel{position:relative;width:100%;max-width:420px;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;padding:26px 24px 22px;border-radius:24px;background:var(--card);color:var(--text);box-shadow:0 12px 40px rgba(0,0,0,.25)}
.am-overlay:not(.is-open) .am-panel{transform:translateY(8px)}
.am-overlay.is-open .am-panel{transform:none;transition:transform .18s ease}   /* none (không phải translateY(0)) để panel không thành khối chứa của iframe CAPTCHA */
.am-title{margin:0 0 14px;padding:0 36px 0 0;border:0;font-size:1.35rem;font-weight:700;color:var(--text)}   /* ghi đè luật h2 toàn cục (đường kẻ trên + đệm) */
.am-close{position:absolute;z-index:5;top:14px;right:14px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--primary-tint);color:var(--muted);font:inherit;font-size:1.3rem;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color .15s ease,transform .15s ease}
.am-close:hover,.am-close:active{color:var(--text)}
.am-close:active{transform:scale(.92)}
.am-close:focus{outline:none}
.am-close:focus-visible{outline:2px solid var(--primary-d);outline-offset:2px}
.am-loading{margin:8px 0 16px;color:var(--muted);text-align:center}
.am-body form{margin:0}
.am-body .alt{margin-bottom:0}
.am-body .am-cfmsg{margin:12px 0 0}
.am-body .am-cf-retry{margin-top:8px}
@media (max-width:480px){.am-overlay{padding:12px}.am-panel{padding:24px 18px 20px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}}
@media (prefers-reduced-motion:reduce){.am-overlay,.am-panel,.am-close{transition:none!important}}

/* ===== QR cửa hàng (app/shop-qr.php, quet-qr.php, quan-tri-qr.php, js/qr-scan.js, js/qr-admin.js) — mọi class có tiền tố .qr- ===== */
.qr-root [hidden]{display:none!important}   /* class của khối này đặt display nên phải ép lại thuộc tính hidden */
.qr-tabs{display:flex;gap:8px;margin:14px 0}
.qr-tab{flex:1;padding:10px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--text);font:inherit;cursor:pointer}
.qr-tab.on{border-color:var(--primary-d);background:var(--primary-tint);color:var(--primary-text);font-weight:600}
.qr-start{display:block;width:100%;padding:18px 14px;border:1px dashed var(--primary-d);border-radius:20px;background:#fff;color:var(--text);font:inherit;text-align:center;cursor:pointer}
.qr-start:hover{background:var(--primary-tint)}
.qr-start b{display:block;font-size:1.05rem}
.qr-start small{display:block;margin-top:4px;color:var(--muted);font-size:.85rem}
.qr-cam{margin-top:12px;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.qr-cam video{display:block;width:100%}
.qr-msg{margin:12px 0;padding:10px 12px;border-radius:10px;font-size:.92rem}
.qr-msg.info{background:#f2f4f7;color:var(--text)}
.qr-msg.bad{background:#fef3f2;color:var(--err)}
.qr-msg.good{background:#ecfdf3;color:var(--ok)}
.qr-file{display:none}
.qr-prev{display:block;max-width:100%;margin:12px auto 0;border-radius:12px}
.qr-box{text-align:center}
.qr-img{display:block;width:100%;max-width:320px;height:auto;margin:12px auto;border:1px solid var(--line);border-radius:12px;background:#fff}
.qr-count{margin:0 0 10px;color:var(--muted);font-size:.95rem}

/* nút ở cuối trang quét QR: "Quay về" (3 phần, đăng xuất về trang chủ) + "Đăng nhập như Khách" (7 phần) — style nhẹ, cùng tông hệ thống */
.qr-actions{display:flex;gap:10px;align-items:stretch;margin-top:18px}
.qr-actions>*{margin:0;min-width:0}
.qr-back{flex:3 1 0}
.qr-guest{flex:7 1 0}
.qr-actions button,.qr-actions a{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:100%;padding:12px 8px;border-radius:20px;font:inherit;font-weight:600;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.qr-back button{border:1px solid var(--line);background:#fff;color:var(--muted)}
.qr-back button:hover,.qr-back button:focus{outline:none;border-color:var(--primary-d);color:var(--text)}
.qr-guest button,.qr-guest a{border:1px solid var(--primary-d);background:var(--primary-tint);color:var(--primary-text)}
.qr-guest button:hover,.qr-guest a:hover,.qr-guest button:focus{outline:none;background:var(--primary);color:var(--primary-text)}
.qr-actions svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== Ô tác vụ: icon SVG + tiêu đề (app/layout.php: task_grid(), ui_icon()) — tối giản, dùng chung trang khách / nhân viên / quản trị ===== */
.tasks{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;margin:14px 0 18px}
.tasks>*{margin:0;min-width:0}
.task-f{display:flex}
.task{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:88px;padding:14px 8px 12px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--text);font:inherit;font-size:.86rem;font-weight:500;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background .15s,color .15s}
.task .ti{flex:none;width:26px;height:26px;color:var(--muted);transition:color .15s}
.task .tn{display:block;max-width:100%;overflow-wrap:anywhere}
a.task:hover,button.task:hover,a.task:focus-visible,button.task:focus-visible{outline:none;border-color:var(--primary-d);background:var(--primary-tint)}
a.task:hover .ti,button.task:hover .ti,a.task:focus-visible .ti,button.task:focus-visible .ti,.task.on .ti{color:var(--primary-d)}
.task.on{border-color:var(--primary-d);background:var(--primary-tint)}
.task.static{cursor:default}
.task.danger .ti{color:var(--err)}
.task.danger:hover,.task.danger:focus-visible{border-color:var(--err);background:#fef3f2}
.task.danger:hover .ti{color:var(--err)}
.tb{position:absolute;top:8px;right:10px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--primary-d);color:#fff;font-size:.7rem;font-weight:600;line-height:18px;text-align:center}
.qr-box .tasks{display:flex;justify-content:center;margin:0 0 4px}
.qr-box .task{width:150px}

/* ===== Menu Tài khoản trên dock (app/layout.php dock_render + app.js mục 8) — class .acc-* =====
   Nút Tài khoản (.dk-btn) mở hộp này: laptop = bên trái thanh bên; điện thoại = ngay trên thanh dock. Màu lấy từ biến của hệ thống. */
.acc-menu{position:fixed;z-index:60;right:calc(var(--sb-w) + var(--sb-gap) * 2);bottom:var(--sb-gap);width:280px;max-height:calc(100vh - var(--sb-gap) * 2);overflow-y:auto;padding:8px;
  background:#fff;color:var(--text);border:1px solid rgba(0,0,0,.08);border-radius:24px;box-shadow:0 8px 28px rgba(0,0,0,.16)}
.acc-menu[hidden]{display:none}
.acc-who{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:8px 10px 12px;border-bottom:1px solid var(--line)}
.acc-av{display:flex;flex:none;align-items:center;justify-content:center;width:38px;height:38px;border:2px solid #111;border-radius:50%;background:var(--primary);color:var(--primary-text);font-weight:700}
.acc-id{display:flex;flex-direction:column;min-width:0;gap:3px}
.acc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:.95rem;line-height:1.2}
.acc-role{align-self:flex-start;padding:1px 9px;border-radius:999px;background:var(--primary-tint);font-size:.62rem;font-weight:700;letter-spacing:.08em}
.acc-menu a,.acc-out button{display:flex;align-items:center;gap:12px;width:100%;margin:0;padding:12px;border:0;border-radius:16px;background:transparent;color:var(--text);font:inherit;font-weight:600;font-size:.92rem;line-height:1.25;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.acc-menu a:hover,.acc-menu a:focus-visible,.acc-out button:hover,.acc-out button:focus-visible{outline:none;background:var(--primary-tint)}
.acc-menu a.on{background:var(--primary-tint);color:var(--primary-d)}
.acc-menu .ti{flex:none;width:22px;height:22px;color:var(--muted)}
.acc-menu a.on .ti,.acc-menu a:hover .ti,.acc-out button:hover .ti{color:var(--primary-d)}
.acc-bdg{min-width:20px;height:20px;margin-left:auto;padding:0 6px;border-radius:10px;background:#d6303b;color:#fff;font-size:.72rem;font-weight:700;line-height:20px;text-align:center}
.acc-out{margin:6px 0 0;padding-top:6px;border-top:1px solid var(--line)}
@media (max-width:600px),(hover:none) and (pointer:coarse) and (orientation:portrait){
  .acc-menu{left:12px;right:12px;width:auto;max-width:560px;margin:0 auto;bottom:calc(12px + 70px + 10px + env(safe-area-inset-bottom,0px));max-height:60vh}
}
@media (prefers-reduced-motion:no-preference){
  .acc-menu{animation:acc-in .16s ease-out}
  @keyframes acc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* ===== Trang chính duy nhất: lời chào + các khối trượt mở (app/panels.php panel_page, app.js mục 9) ===== */
.sec-home{margin:0 0 14px}
.home-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.home-bar h1{margin:0;min-width:0;overflow-wrap:anywhere}
.home-out{margin:0;flex:none}
.home-out .ghost{display:flex;align-items:center;gap:8px;min-height:38px;font-size:.88rem;font-weight:600;white-space:nowrap}
.home-out .ghost .ti{width:18px;height:18px;color:var(--muted)}
.fold{margin:0 0 10px;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.fold>summary{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;color:var(--text);font-size:.98rem;font-weight:600;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary .ti{flex:none;width:20px;height:20px;color:var(--muted)}
.fold>summary .fold-t{flex:1;min-width:0}
.fold>summary::after{content:"";flex:none;width:8px;height:8px;margin:0 4px 3px 0;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}
.fold[open]>summary::after{transform:rotate(-135deg);margin-bottom:-3px}
.fold>summary:hover,.fold>summary:focus-visible{outline:none;background:var(--primary-tint)}
.fold[open]>summary{border-bottom:1px solid var(--line)}
.fold[open]>summary .ti{color:var(--primary-d)}
.fold>summary .nb{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#d6303b;color:#fff;font-size:.72rem;font-weight:700;line-height:20px;text-align:center}
.fold-body{padding:16px}
.fold-body>h1:first-child,.fold-body h1{display:none}
.fold-body>:first-child{margin-top:0}
.fold [id]{scroll-margin-top:16px}
@supports (interpolate-size:allow-keywords){
  .fold{interpolate-size:allow-keywords}
  .fold::details-content{block-size:0;overflow:clip;transition:block-size .25s ease,content-visibility .25s allow-discrete}
  .fold[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){.fold::details-content,.fold>summary::after{transition:none}}

/* Trạng thái online / offline của nhân viên (khối QR cửa hàng) */
.st{display:inline-flex;align-items:center;gap:7px;font-weight:700;white-space:nowrap}
.st::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:#9aa3ad}
.st-on{color:#14783f}
.st-on::before{background:#1e9e57;box-shadow:0 0 0 3px rgba(30,158,87,.2)}
.st-off{color:var(--muted)}