/* base.css — biến theme, khung chung, nút bấm, footer */
/* ==========================================================================
 * MEGA HOMESTAY STUDIO — giao diện chuyên nghiệp (light theme)
 * Hệ màu: nền xám nhạt + thẻ trắng + nhấn Teal. Chữ tiếng Việt dùng
 * "Be Vietnam Pro", chữ vẽ thumbnail giữ nguyên (Oswald/Anton/...).
 * ========================================================================== */
:root{
  --bg:#edf1f6;
  --panel:#ffffff;
  --panel-2:#f6f9fc;
  --line:#e2e8f0;
  --line-strong:#cbd5e1;
  --txt:#0f172a;
  --txt-2:#334155;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --accent:#0d9488;
  --accent-strong:#0f766e;
  --accent-soft:#e6faf5;
  --accent-line:#99e6d8;
  --accent-ink:#ffffff;
  --danger:#dc2626;
  --danger-soft:#fef2f2;
  --warn:#b45309;
  --warn-soft:#fffbeb;
  --ok:#059669;
  --ok-soft:#ecfdf5;
  --radius:14px;
  --radius-s:10px;
  --shadow:0 1px 2px rgba(15,23,42,.05),0 10px 30px -14px rgba(15,23,42,.22);
  --shadow-s:0 1px 2px rgba(15,23,42,.07);
  --font-ui:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--font-ui);
  font-size:14px;line-height:1.55;
  background-image:radial-gradient(1100px 320px at 50% -120px,rgba(13,148,136,.10),transparent 70%);
  min-height:100vh}

/* ---------- Sidebar trái: menu chính + cây mục con ---------- */
:root{--side-w:264px;--side-w-mini:64px}
body{padding-left:var(--side-w);transition:padding-left .18s ease}
.brand-mark{width:38px;height:38px;border-radius:11px;flex:none;color:#fff;
  font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0d9488 0%,#10b981 60%,#34d399 100%);
  box-shadow:0 6px 16px -6px rgba(13,148,136,.6)}
aside.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--side-w);z-index:60;
  display:flex;flex-direction:column;padding:14px 12px 16px;overflow-y:auto;
  overscroll-behavior:contain;background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-right:1px solid var(--line);scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent}
aside.sidebar::-webkit-scrollbar{width:8px}
aside.sidebar::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.side-brand{display:flex;align-items:center;gap:11px;padding:2px 6px 14px;
  border-bottom:1px solid var(--line);margin-bottom:12px}
.side-brand .brand-mark{width:36px;height:36px;font-size:17px;border-radius:10px}
.side-brand h1{font-size:13.5px;margin:0;font-weight:800;line-height:1.3;letter-spacing:.01em}
.side-brand h1 small{display:block;font-size:10.5px;font-weight:500;color:var(--muted);margin-top:2px}
/* Nút nhỏ thu gọn / mở rộng menu */
.side-collapse{width:26px;height:26px;flex:none;margin-left:auto;padding:0;
  display:flex;align-items:center;justify-content:center;background:transparent;
  border:1px solid transparent;border-radius:8px;color:var(--muted);box-shadow:none;cursor:pointer}
.side-collapse:hover{background:var(--panel-2);color:var(--txt-2);filter:none}
.side-collapse svg{width:14px;height:14px;transition:transform .18s ease}

.side-nav{display:flex;flex-direction:column;gap:3px}
.side-label{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-2);padding:8px 10px 6px}
.side-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;
  border-radius:10px;border:1px solid transparent;background:transparent;color:var(--txt-2);
  font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;box-shadow:none;
  transition:background .12s,color .12s,border-color .12s}
.side-item svg{width:16px;height:16px;flex:none;opacity:.8}
.side-item:hover{background:var(--panel-2);color:var(--txt);filter:none}
.side-item.active{background:var(--accent-soft);color:var(--accent-strong);
  border-color:var(--accent-line);font-weight:700}
.side-item.active svg{opacity:1}

/* Nhóm có mục con — hiển thị dạng cây thư mục */
.side-row{display:flex;align-items:center;gap:2px}
.side-row .side-item{flex:1;min-width:0}
.side-caret{width:30px;height:34px;flex:none;padding:0;display:flex;align-items:center;
  justify-content:center;background:transparent;border:1px solid transparent;border-radius:9px;
  color:var(--muted);box-shadow:none;cursor:pointer}
.side-caret:hover{background:var(--panel-2);color:var(--txt-2);filter:none}
.side-caret svg{width:13px;height:13px;transition:transform .18s ease}
.side-caret[aria-expanded="true"] svg{transform:rotate(90deg)}
.side-sub{display:flex;flex-direction:column;gap:2px;margin:3px 0 4px 16px;
  padding-left:10px;border-left:1.5px dashed var(--line-strong)}
.side-sub[hidden]{display:none}
.side-sub .side-item{padding:8px 10px;font-size:12.8px;font-weight:600;border-radius:9px}
.side-sub .side-item.active{background:var(--accent-soft);border-color:var(--accent-line);
  color:var(--accent-strong);font-weight:700}
.side-foot{margin-top:auto;padding:14px 8px 0;font-size:10.5px;color:var(--muted-2);line-height:1.55}

/* ---------- Khối tài khoản đăng nhập (đáy sidebar, dưới .side-foot) ---------- */
.side-user{display:flex;align-items:center;gap:9px;padding:9px 8px;margin-top:auto;
  border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}
/* Có dòng ghi chú (.side-foot) thì khối tài khoản nằm ngay dưới nó */
.side-foot + .side-user{margin-top:8px}
.side-user-avatar{width:30px;height:30px;flex:none;border-radius:9px;color:#fff;
  font-size:11.5px;font-weight:800;letter-spacing:.02em;display:flex;align-items:center;
  justify-content:center;background:linear-gradient(135deg,#0d9488,#10b981)}
.side-user-meta{min-width:0;flex:1}
.side-user-name{font-size:12.5px;font-weight:700;color:var(--txt);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.side-user-sub{font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.side-user-out{width:28px;height:28px;flex:none;padding:0;display:flex;align-items:center;
  justify-content:center;background:transparent;border:1px solid transparent;border-radius:8px;
  color:var(--muted);box-shadow:none;cursor:pointer}
.side-user-out:hover{background:#fff;border-color:var(--line);color:var(--danger);filter:none}
.side-user-out svg{width:15px;height:15px}
body.side-collapsed .side-user{margin-top:auto;padding:8px 0;justify-content:center;
  background:transparent;border-color:transparent}
body.side-collapsed .side-user-meta,
body.side-collapsed .side-user-out{display:none}

/* ---------- Modal cảnh báo sắp tự đăng xuất (do để lâu không thao tác) ---------- */
.mhs-idle-backdrop{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:20px;background:rgba(15,23,42,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:mhsFade .16s ease}
@keyframes mhsFade{from{opacity:0}to{opacity:1}}
.mhs-idle-card{width:100%;max-width:392px;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:24px 22px 20px;text-align:center;
  box-shadow:0 30px 70px -30px rgba(15,23,42,.5);animation:mhsRise .2s ease}
@keyframes mhsRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mhs-idle-icon{font-size:30px;line-height:1;margin-bottom:8px}
.mhs-idle-card h3{margin:0 0 8px;font-size:16.5px;font-weight:800;color:var(--txt)}
.mhs-idle-card p{margin:0 0 6px;font-size:13px;color:var(--txt-2);line-height:1.6}
.mhs-idle-card p b{color:var(--accent-strong);font-size:15px}
.mhs-idle-note{font-size:11.8px;color:var(--muted)}
.mhs-idle-actions{display:flex;gap:8px;margin-top:16px}
.mhs-idle-actions button{flex:1;padding:10px 14px;border-radius:10px;font-size:13.5px;
  font-weight:700;font-family:inherit;cursor:pointer;box-shadow:none}
.mhs-idle-stay{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.mhs-idle-stay:hover{filter:brightness(1.06)}
.mhs-idle-out{background:#fff;color:var(--txt-2);border:1.5px solid var(--line)}
.mhs-idle-out:hover{border-color:var(--danger);color:var(--danger);filter:none}

/* ---------- Thu gọn sidebar thành rail chỉ còn icon ---------- */
body.side-collapsed{padding-left:var(--side-w-mini)}
body.side-collapsed aside.sidebar{width:var(--side-w-mini);padding-left:8px;padding-right:8px}
body.side-collapsed .side-brand{flex-direction:column;gap:8px;padding:2px 0 12px}
body.side-collapsed .side-brand h1,
body.side-collapsed .side-label,
body.side-collapsed .side-foot,
body.side-collapsed .side-caret,
body.side-collapsed .side-sub{display:none}
body.side-collapsed .side-collapse{margin-left:0}
body.side-collapsed .side-collapse svg{transform:rotate(180deg)}
body.side-collapsed .side-item{font-size:0;justify-content:center;padding:11px 0;gap:0}
body.side-collapsed .side-item svg{width:18px;height:18px;opacity:.9}
body.side-collapsed .side-item.active svg{opacity:1}

/* Nút mở menu + lớp phủ cho màn hình nhỏ */
.side-toggle{display:none;position:fixed;top:12px;left:12px;z-index:70;width:42px;height:42px;
  padding:0;border-radius:11px;background:#fff;color:var(--txt-2);border:1px solid var(--line);
  box-shadow:var(--shadow-s);align-items:center;justify-content:center}
.side-toggle svg{width:20px;height:20px}
.side-backdrop{display:none;position:fixed;inset:0;z-index:55;background:rgba(15,23,42,.45)}
@media(max-width:1024px){
  body,body.side-collapsed{padding-left:0;padding-top:56px}
  aside.sidebar,body.side-collapsed aside.sidebar{width:var(--side-w);
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--shadow)}
  body.side-open aside.sidebar{transform:none}
  body.side-open{overflow:hidden}
  .side-toggle{display:flex}
  .side-collapse{display:none}
  body.side-open .side-backdrop{display:block}
}
.tabpane{display:none}
.tabpane.active{display:block;animation:fadeUp .22s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Khung & thẻ chung: FULL chiều ngang ---------- */
.wrap{max-width:none;margin:0;padding:16px 22px 40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-s)}
.panel{padding:20px;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--radius);box-shadow:var(--shadow-s)}
.sec-title{display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2)}
.sec-title .num{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:8px;font-size:12px;letter-spacing:0;
  background:var(--accent-soft);color:var(--accent-strong);border:1px solid var(--accent-line)}
.sec-title .line{flex:1;height:1px;background:var(--line)}
.field{margin-bottom:13px}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-bottom:6px;font-weight:700}
input,select,textarea{width:100%;padding:9px 12px;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--radius-s);color:var(--txt);
  font-size:13.5px;font-family:inherit;transition:border-color .12s,box-shadow .12s}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(13,148,136,.15)}
input[type=color]{padding:3px;height:40px;cursor:pointer}
input[type=range]{padding:0;background:transparent;border:0;accent-color:var(--accent);
  height:24px;cursor:pointer;width:100%}
input[type=file]{padding:8px 10px;background:var(--panel-2);cursor:pointer}
input[type=checkbox]{width:auto;accent-color:var(--accent)}
.hintline{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.6}
.hint{color:var(--muted);font-size:13px;text-align:center;max-width:560px;line-height:1.65}
.err{color:var(--danger);font-size:13px;min-height:18px;font-weight:500}
.loader{display:none;color:var(--accent-strong);font-size:13px;font-weight:600}
.val{color:var(--accent-strong);font-weight:800;text-transform:none}
code{background:var(--panel-2);border:1px solid var(--line);border-radius:6px;
  padding:1px 6px;font-size:12px;color:var(--accent-strong);font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- Nút bấm ---------- */
button{width:100%;padding:11px 18px;background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
  border-radius:var(--radius-s);font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:filter .12s,transform .06s,box-shadow .12s;box-shadow:0 4px 12px -6px rgba(13,148,136,.55)}
button:hover{filter:brightness(1.06)}
button:active{transform:translateY(1px)}
button:disabled{opacity:.55;cursor:not-allowed;transform:none}
button.ghost{background:#fff;color:var(--txt-2);border:1.5px solid var(--line);box-shadow:var(--shadow-s)}
button.ghost:hover{border-color:var(--accent);color:var(--accent-strong);filter:none}
button.addbtn{margin-bottom:12px;background:var(--accent-soft);color:var(--accent-strong);
  border:1.5px dashed var(--accent);box-shadow:none}
button.addbtn:hover{background:#d7f7ee;filter:none}
button.btn-danger{background:#fff;color:var(--danger);border:1.5px solid #fecaca;box-shadow:none}
button.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger);filter:none}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.btn-row button{flex:1;min-width:140px}

/* Footer */
.pagefoot{max-width:none;margin:0;padding:0 22px 26px;color:var(--muted-2);
  font-size:12px;display:flex;gap:8px;align-items:center;justify-content:center}