:root {
  --bg: #0c0d0a;
  --bg-raised: #16180f;
  --panel: #14150f;
  --panel-line: #2a2c1e;
  --grid-line: rgba(232, 163, 61, 0.055);
  --amber: #e8a33d;
  --amber-bright: #ffc766;
  --amber-dim: #7a5a1f;
  --text: #ece6d6;
  --text-dim: #8f8a72;
  --green: #7fbf5a;
  --red: #e0644a;
  /* Màu riêng cho từng ĐỊNH DẠNG file phổ biến (badge đuôi file + tên file) - phân biệt nhanh bằng
     mắt ngay cả khi cùng là "tài liệu" (PDF/Word/Excel/PowerPoint mỗi loại 1 màu theo quy ước quen
     thuộc của Office), không lẫn với amber (màu nhấn chính) hay red/green (đã mang nghĩa lỗi/thành
     công ở chỗ khác trong giao diện). */
  --file-image: #4fb3c9;
  --file-image-dim: #295f6b;
  --file-pdf: #8f5546;
  --file-pdf-dim: #492b24;
  --file-word: #5b8dd6;
  --file-word-dim: #2f4a70;
  --file-excel: #6fbf73;
  --file-excel-dim: #39603b;
  --file-powerpoint: #e0954f;
  --file-powerpoint-dim: #734b26;
  --file-document: #c9b28f;
  --file-document-dim: #6b5c47;
  --file-video: #d5698f;
  --file-video-dim: #6f3549;
  --file-audio: #a97fd1;
  --file-audio-dim: #55406b;
  --file-archive: #8f8873;
  --file-archive-dim: #47432f;
  --file-code: #5fbfae;
  --file-code-dim: #2f5f57;
  --mono: 'Cascadia Code', 'Cascadia Mono', Consolas, 'SFMono-Regular', ui-monospace, monospace;
  --ui: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius: 3px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
}

body {
}

/* nền lưới đo kiểu màn hình thiết bị */

.hidden { display: none !important; }

.screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#editor.screen {
  display: block;
  min-height: 100vh;
  padding: 0;
}

.panel-frame {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 36px 34px;
  width: 100%;
  max-width: 460px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 20px 48px rgba(0,0,0,0.55),
    inset 0 0 60px rgba(232,163,61,0.02);
}

.settings-frame { max-width: 400px; }

.nameplate {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-bottom: 4px;
}

.logo-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 6px;
  transform: translateY(2px);
}

.nameplate-text {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  font-size: 20px;
  color: var(--amber-bright);
  text-decoration: none;
  text-shadow: 0 0 14px rgba(232,163,61,0.35);
  /* Tên trang dài (do người dùng tự đặt) không được làm tràn khung panel - cắt bớt kèm "..." thay
     vì tràn ra ngoài. Đặt chung ở đây (không riêng #editorSlugName) để áp dụng luôn cho màn hình
     nhập mật khẩu và mọi nơi khác hiển thị tên trang. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
a.nameplate-text:hover { text-shadow: 0 0 20px rgba(232,163,61,0.55); }

.led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
  transform: translateY(-2px);
}
.led-amber { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.led-green { background: var(--green); box-shadow: 0 0 8px var(--green); }
.led-red { background: var(--red); box-shadow: 0 0 8px var(--red); }

.tagline {
  color: var(--text-dim);
  font-size: 13px;
  margin: 12px 0 24px;
  line-height: 1.6;
  font-family: var(--mono);
}

.goto-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.url-prefix {
  font-family: var(--mono);
  color: var(--amber);
  font-size: 15px;
  display: flex;
  align-items: center;
  padding-left: 2px;
}
.inline-row > .url-prefix {
  flex: 0 0 auto;
}

input[type="text"], input[type="password"], input[type="number"], select {
  background: var(--bg-raised);
  border: 1px solid var(--panel-line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  padding: 11px 12px;
  border-radius: var(--radius);
  outline: none;
  flex: 1;
  min-width: 0;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, select:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(232,163,61,0.25);
}
input::placeholder { color: #55523f; }
/* Bỏ nút tăng/giảm mặc định của trình duyệt trên ô số - ở vài ô hẹp (vd "Số trang tối đa") nút này
   đè lên sát chữ số vừa gõ, nhìn như chồng lên nhau. Không cần nút này vì gõ tay là đủ. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn {
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--panel-line);
  background: var(--bg-raised);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none; /* .btn cũng được gắn lên thẻ <a> (vd "Về trang chủ") - bỏ gạch chân mặc định của link */
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.btn:hover { border-color: var(--text-dim); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.btn-primary { background: var(--amber); border-color: var(--amber); color: #1a1305; }
.btn-primary:hover { background: var(--amber-bright); border-color: var(--amber-bright); }

.btn-secondary { border-color: var(--amber-dim); color: var(--amber-bright); background: transparent; }
.btn-secondary:hover { border-color: var(--amber); background: rgba(232,163,61,0.08); }

.btn-danger { border-color: #6b3226; color: var(--red); background: transparent; }
.btn-danger:hover { background: rgba(224,100,74,0.1); border-color: var(--red); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); }

.btn-sm { padding: 7px 13px; font-size: 12.5px; }

/* Tên trang nhớ lại (localStorage) có thể rất dài - không để làm tràn khung panel */
#reopenLastBtn {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn { display: inline-flex; align-items: center; gap: 6px; }
.btn-icon { width: 15px; height: 15px; flex-shrink: 0; }


.error-text {
  color: var(--red);
  font-size: 12.5px;
  margin-top: 10px;
  min-height: 1em;
  font-family: var(--mono);
}

/* ---- Editor ---- */
/* Trạng thái (mật khẩu/khóa/hết hạn/lượt xem) đổi liên tục và dài ngắn thất thường, còn tên trang
   dài ngắn tùy ý - luôn xếp nameplate + nút bấm ở dòng đầu, dòng trạng thái xuống dòng riêng bên
   dưới cho MỌI kích thước màn hình, thay vì chỉ xử lý ở 1 mốc breakpoint (tablet vẫn bị vỡ layout
   nếu chỉ canh theo bề rộng điện thoại). */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--panel-line);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 5;
}
/* Thứ tự đọc trên topbar: nút bấm (Chia sẻ/Cài đặt/ngôn ngữ) ở trên cùng, rồi mới đến tên trang,
   rồi đến dòng trạng thái - theo đúng yêu cầu người dùng khi dùng trên điện thoại. */
.topbar .nameplate { order: 2; flex: 1 1 100%; min-width: 0; }

.status-row {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  order: 3;
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 7px;
}
.status-icon {
  display: inline-flex;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.status-icon-amber { color: var(--amber); }
.status-icon-red { color: var(--red); }
.status-icon-muted { color: var(--text-dim); opacity: 0.6; }

.setting-label-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.setting-label-row .setting-label { margin-bottom: 0; }

.topbar-actions {
  display: flex;
  gap: 8px;
  order: 1;
  flex: 1 1 100%;
  justify-content: flex-end;
}

.main-area {
  max-width: 920px;
  margin: 0 auto;
  padding: 22px;
}

.content-area {
  width: 100%;
  min-height: 42vh;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  padding: 18px;
  resize: vertical;
  outline: none;
}
.content-area:focus { border-color: var(--amber-dim); box-shadow: 0 0 0 1px rgba(232,163,61,0.15); }
.content-area::placeholder { color: #55523f; }

.section-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin: 22px 0 10px;
}

.dropzone {
  background: var(--panel);
  border: 1.5px dashed var(--panel-line);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone.drag-over { border-color: var(--amber); background: rgba(232,163,61,0.05); }
.dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.dropzone-inner p { margin: 0; color: var(--text-dim); font-size: 13px; }
.dropzone-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.dropzone .hint { font-size: 11.5px; opacity: 0.8; font-family: var(--mono); }
.expiry-at-text { font-size: 11.5px; color: var(--text-dim); font-family: var(--mono); margin-top: 4px; }

/* ---- Image thumbnail grid ---- */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.image-thumb {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  background: var(--bg-raised);
}
.image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.15s;
}
.image-thumb:hover img { transform: scale(1.06); }
.image-thumb:hover { border-color: var(--amber-dim); }

.image-thumb .thumb-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(12,13,10,0.75);
  color: var(--red);
  border: 1px solid var(--panel-line);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s;
}
.image-thumb:hover .thumb-del { opacity: 1; }

.image-thumb .thumb-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  color: var(--text);
  font-size: 10.5px;
  font-family: var(--mono);
  padding: 12px 6px 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Video/audio trong ô lưới Media chưa có thumbnail nén sẵn như ảnh - thay bằng ô màu theo loại kèm
   huy hiệu đuôi file ở giữa, vẫn giữ tên file + nút xóa + checkbox như ô ảnh để đồng bộ thao tác. */
.media-thumb-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.media-thumb-fallback.media-thumb-video { background: var(--file-video-dim); }
.media-thumb-fallback.media-thumb-audio { background: var(--file-audio-dim); }
.media-thumb-ext {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  border: 1px solid;
  border-radius: 4px;
  padding: 4px 8px;
}
.media-thumb-ext.fext-video { color: var(--file-video); border-color: var(--file-video); }
.media-thumb-ext.fext-audio { color: var(--file-audio); border-color: var(--file-audio); }

/* ---- Non-image file list ---- */
.file-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.file-list li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 10px 13px;
  font-family: var(--mono);
  font-size: 12.5px;
}
/* Tên file được ưu tiên hiển thị trên dòng riêng, không bị chèn ép bởi kích thước/ngày/nút bấm -
   dòng dưới gom các thông tin phụ, thu nhỏ hơn và có thể xuống dòng nếu chật (mobile). */
.file-list .frow-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.file-list .frow-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-left: 26px;
  flex-wrap: wrap;
}
.file-list .fmeta-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.file-list .fmeta-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
/* Nút Xóa cách xa nút Tải xuống/Xem hơn 1 chút và có vạch phân cách - trước đây 2 nút quá sát nhau
   (nhất là từ khi Tải xuống chỉ còn biểu tượng, nhỏ hơn hẳn), dễ chạm nhầm sang Xóa trên điện thoại. */
.file-list .del-file {
  margin-left: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--panel-line);
}

.file-list .fext {
  color: var(--text-dim);
  font-size: 10px;
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  padding: 2px 5px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.file-list .fext-image { color: var(--file-image); border-color: var(--file-image-dim); }
.file-list .fext-pdf { color: var(--file-pdf); border-color: var(--file-pdf-dim); }
.file-list .fext-word { color: var(--file-word); border-color: var(--file-word-dim); }
.file-list .fext-excel { color: var(--file-excel); border-color: var(--file-excel-dim); }
.file-list .fext-powerpoint { color: var(--file-powerpoint); border-color: var(--file-powerpoint-dim); }
.file-list .fext-document { color: var(--file-document); border-color: var(--file-document-dim); }
.file-list .fext-video { color: var(--file-video); border-color: var(--file-video-dim); }
.file-list .fext-audio { color: var(--file-audio); border-color: var(--file-audio-dim); }
.file-list .fext-archive { color: var(--file-archive); border-color: var(--file-archive-dim); }
.file-list .fext-code { color: var(--file-code); border-color: var(--file-code-dim); }

.file-list .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tên file cũng lên màu theo định dạng, không chỉ riêng badge đuôi file - :hover giữ nguyên màu
   gốc, chỉ gạch chân, để không mất tín hiệu loại file khi rê chuột qua. Chọn theo
   "a.dl-link.fname-X" (3 lớp) để chắc chắn thắng độ ưu tiên của ".file-list a.dl-link" (màu amber
   mặc định) bất kể thứ tự khai báo trong file - chỉ ".file-list .fname-X" (2 lớp) thì thua. */
.file-list a.dl-link.fname-image, .file-list a.dl-link.fname-image:hover { color: var(--file-image); }
.file-list a.dl-link.fname-pdf, .file-list a.dl-link.fname-pdf:hover { color: var(--file-pdf); }
.file-list a.dl-link.fname-word, .file-list a.dl-link.fname-word:hover { color: var(--file-word); }
.file-list a.dl-link.fname-excel, .file-list a.dl-link.fname-excel:hover { color: var(--file-excel); }
.file-list a.dl-link.fname-powerpoint, .file-list a.dl-link.fname-powerpoint:hover { color: var(--file-powerpoint); }
.file-list a.dl-link.fname-document, .file-list a.dl-link.fname-document:hover { color: var(--file-document); }
.file-list a.dl-link.fname-video, .file-list a.dl-link.fname-video:hover { color: var(--file-video); }
.file-list a.dl-link.fname-audio, .file-list a.dl-link.fname-audio:hover { color: var(--file-audio); }
.file-list a.dl-link.fname-archive, .file-list a.dl-link.fname-archive:hover { color: var(--file-archive); }
.file-list a.dl-link.fname-code, .file-list a.dl-link.fname-code:hover { color: var(--file-code); }

.file-list .fdate {
  color: var(--text-dim);
  font-size: 11px;
  flex-shrink: 0;
  white-space: nowrap;
}
/* Tên file chia sẻ đến - sửa được trước khi bấm Tải lên, cùng kiểu viền đứt như ô upload chính */
.file-list .share-file-name {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--panel-line);
  border-radius: 0;
  color: var(--text);
  font: inherit;
  padding: 0 0 1px;
}
.file-list .share-file-name:focus { outline: none; border-bottom-color: var(--amber); box-shadow: none; }
.file-list .fsize { color: var(--text-dim); }
.file-list a.dl-link { color: var(--amber); text-decoration: none; }
.file-list a.dl-link:hover { text-decoration: underline; }
.file-list .del-file { color: var(--red); cursor: pointer; background: none; border: none; font-family: var(--ui); font-size: 12px; padding: 0; }

.empty-hint {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
  opacity: 0.7;
}

.save-indicator {
  position: fixed;
  bottom: 20px;
  /* Nằm bên trái để không bị bảng chat (góc phải) che mất; pointer-events:none để dù có đè lên
     ảnh/nút nào trong 1,6 giây hiện ra thì vẫn bấm xuyên qua được bình thường. */
  left: 22px;
  pointer-events: none;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--amber);
  background: var(--panel);
  border: 1px solid var(--panel-line);
  padding: 6px 11px;
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 15;
}
.save-indicator.show { opacity: 1; }

/* ---- Overlay panels ---- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,7,5,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 20px;
}

.admin-frame { max-width: 960px; }

.qr-wrap {
  background: #f4ecd8;
  border-radius: var(--radius);
  padding: 16px;
  width: max-content;
  margin: 4px auto 18px;
}
.qr-wrap img { display: block; width: 180px; height: 180px; }

#shareUrlInput { flex: 1; font-size: 12.5px; }

/* Lời mời dùng địa chỉ nội bộ trong hộp Chia sẻ */
.lan-row { margin: 2px 0 6px; }
.lan-row .btn {
  padding: 4px 0;
  font-size: 11.5px;
  color: var(--amber);
  text-align: left;
  white-space: normal;
  line-height: 1.45;
}
.lan-row .btn:hover { color: var(--amber-bright); }

.setting-block {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--panel-line);
}
.setting-block:last-of-type { border-bottom: none; margin-bottom: 4px; padding-bottom: 0; }

.analytics-controls select { flex: 1 1 140px; }
.analytics-line { fill: none; stroke: var(--amber); stroke-width: 2; }
.analytics-area { fill: var(--amber); opacity: 0.18; }
.analytics-point { fill: var(--amber-bright); }
.analytics-point:hover { r: 5; }
.analytics-chart {
  margin-top: 10px;
  overflow-x: auto;
}
.analytics-chart svg { display: block; }
.analytics-bar { fill: var(--amber-dim); }
.analytics-bar:hover { fill: var(--amber); }
.analytics-bar-label { font-size: 10px; fill: var(--text-dim); }
.analytics-axis-label { font-size: 10px; fill: var(--text-dim); }
.analytics-tooltip-group:hover .analytics-bar-label { fill: var(--amber-bright); }

.tag { font-size: 10px; border: 1px solid var(--amber-dim); color: var(--amber); border-radius: 3px; padding: 1px 5px; }
.slug-cell {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--amber);
  text-decoration: none;
}
.slug-cell:hover { text-decoration: underline; }

/* ---- Danh sách trang: 1 dòng gọn mỗi trang, chi tiết/thao tác ẩn sau nút "..." ---- */
.dense-list { display: flex; flex-direction: column; }
.page-row { padding: 11px 0; border-bottom: 1px solid var(--panel-line); }
.page-row:last-child { border-bottom: none; }
.page-row-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.page-row-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; font-weight: 500; }
.page-row-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.page-row-meta {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row-menu-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  line-height: 0;
}
.row-menu-btn:hover { color: var(--amber-bright); }
.row-menu-btn svg { width: 18px; height: 18px; }

.page-row-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--panel-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-detail-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-detail-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex: 0 0 64px;
}
.page-detail-row input[type="number"] { width: 90px; padding: 6px 8px; font-size: 12px; }
.page-detail-row input.expiry-input { width: 180px; padding: 5px 7px; font-size: 11.5px; flex: 1 1 140px; min-width: 0; }
/* 3 giới hạn riêng của 1 trang (dung lượng/ký tự/số file) gộp thành khối, lưu chung 1 nút - xem
   ghi chú ở admin.js chỗ dựng limitGroup lý do không tách 3 nút Lưu riêng. */
.page-detail-limits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-raised);
  border-radius: var(--radius);
}
.page-detail-limits .btn { align-self: flex-start; }
.page-detail-actions { display: flex; gap: 8px; }
.page-detail-viewers { margin-top: 4px; }
.page-detail-viewers:empty { display: none; }
.page-viewer-row {
  font-size: 11.5px;
  color: var(--text-dim);
  padding: 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-detail-viewers-empty { font-size: 11.5px; color: var(--text-dim); padding: 4px 0; }

/* Nút bật/tắt "vô thời hạn" - sáng lên khi trang đang không hết hạn */
.expiry-toggle {
  background: transparent;
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1;
  padding: 2px 7px;
  cursor: pointer;
}
.expiry-toggle:hover { border-color: var(--amber-dim); color: var(--amber-bright); }
.expiry-toggle.active { color: var(--amber-bright); border-color: var(--amber-dim); background: rgba(232,163,61,0.1); }

/* ---- Nhật ký truy cập: thẻ 3 dòng có icon, gộp IP+trình duyệt, rút gọn referrer ---- */
.visit-cards { display: flex; flex-direction: column; }
.visits-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.visits-page-info { font-family: var(--mono); font-size: 12px; color: var(--text-dim); white-space: nowrap; }
/* Ép cỡ chữ/khung nhỏ lại như nút bên cạnh - select mặc định theo style input chung to hơn hẳn
   nút "‹ ›" và ô nhảy trang, khiến cả hàng dễ tràn dòng trên điện thoại hẹp. */
.visits-pager select {
  flex: 0 0 auto;
  margin-left: auto;
  width: auto;
  padding: 7px 20px 7px 8px;
  font-size: 12.5px;
}
.visits-pager button.btn-sm { padding: 7px 9px; }
.visits-pager button:disabled { opacity: 0.35; cursor: default; }
/* "input[type=number]" chung có sẵn padding/cỡ chữ lớn hơn (0,1,1) thắng cả class ở đây nếu chỉ
   dùng 1 class (0,1,0) - phải chỉ định thêm "input" để đủ đô ưu tiên, không thì ô này to bất
   thường so với các nút bé cạnh nó. */
input.pager-jump-input {
  flex: 0 0 auto;
  width: 42px;
  padding: 7px 6px;
  font-size: 12.5px;
}
.visit-card { padding: 9px 0; border-bottom: 1px solid var(--panel-line); }
.visit-card:last-child { border-bottom: none; }
.visit-card-top { display: flex; align-items: center; gap: 6px; }
.visit-card-icon { color: var(--text-dim); flex: 0 0 auto; display: flex; }
.visit-card-icon svg { width: 15px; height: 15px; }
.visit-card-page {
  font-size: 13px;
  font-weight: 500;
  color: var(--amber);
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visit-card-page:hover { text-decoration: underline; }
.visit-card-time { font-size: 11px; color: var(--text-dim); flex: 0 0 auto; }
.visit-card-id {
  font-size: 12px;
  color: var(--text);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.visit-card-ref {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hàng nút cuối trang quản trị - tự xuống dòng trên màn hình hẹp thay vì tràn ngang */
.admin-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* Gộp các ô nhập ngắn (giới hạn số/dung lượng, đổi mật khẩu/đường dẫn) thành lưới gọn thay vì
   xếp chồng từng khối riêng - đỡ chiếm nhiều chỗ và bớt chữ hướng dẫn dài dòng. */
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 18px;
  max-width: 620px;
}
/* Input trần (không kèm select đơn vị bên cạnh) không tự giãn hết bề ngang ô lưới của nó - "flex:1"
   ở rule chung của input chỉ có tác dụng khi cha là flex container, còn cha ở đây là 1 div bình
   thường trong lưới nên input rơi về khổ mặc định của trình duyệt (~220px), có thể RỘNG HƠN cột
   thật sự và tràn đè lên nhãn của cột kế bên. Ép width:100% để luôn khớp đúng khổ cột. */
.admin-grid > div > input {
  width: 100%;
}
.admin-subheading {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--amber-dim);
  margin-bottom: 10px;
}
.admin-hint {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--text-dim);
}

.nettest-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.nettest-metric {
  background: var(--bg-raised);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 12px;
  text-align: center;
}
.nettest-metric-label {
  display: block;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.nettest-metric-value {
  display: block;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--amber);
}
@media (max-width: 430px) {
  .nettest-results { grid-template-columns: 1fr; }
}

.setting-label {
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
  margin-bottom: 8px;
  font-family: var(--mono);
}

.inline-row { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.inline-row > * { flex: 1 1 auto; min-width: 0; }

/* Ô tìm kiếm cần gõ nhiều chữ nên phải rộng hơn hẳn; select chỉ hiện 1 lựa chọn ngắn nên không cần
   giành chỗ ngang - nếu không ép tỉ lệ, cả hai chia đều "flex:1 1 auto" ở trên khiến select (không
   co được dưới độ rộng chữ đang chọn) chiếm phần lớn, đẩy ô tìm kiếm co lại còn vài chữ. */
#pagesSearchInput { flex: 3 1 140px; }
#pagesRangeSelect, #visitsRangeSelect { flex: 1 1 110px; }

#expirySelect { width: 100%; }

#customAmountRow input[type="number"] { flex: 0 1 80px; }
#customAmountRow select { flex: 1 1 100px; }
#customAmountRow .btn { flex: 0 0 auto; }

/* ---- Lightbox for full-size image preview ---- */
#lightbox {
  z-index: 30;
  background: rgba(4,5,3,0.92);
  flex-direction: column;
  cursor: zoom-out;
}
#lightbox img {
  max-width: min(92vw, 1100px);
  max-height: 82vh;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  cursor: default;
}
#lightbox .lightbox-caption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(92vw, 1100px);
}
#lightbox #lightboxName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#lightbox .lightbox-caption a { color: var(--amber); text-decoration: none; flex-shrink: 0; }
#lightbox .lightbox-caption a:hover { text-decoration: underline; }

.lang-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 40;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

/* Thanh "Về trang chủ" luôn hiện trên đầu trang quản trị - trước đây nằm cuối trang, log dài phải
   cuộn rất xa mới bấm được. Từng thử đặt "fixed" (mọi thứ cuộn xuyên qua bên dưới, đè lên nút) rồi
   "sticky" lồng trong panel-frame có padding (chỉ chiếm 1 ô nhỏ, nội dung vẫn tràn sát 2 bên) - đều
   nhìn như chồng lên nội dung khi cuộn trên điện thoại. Giờ tách hẳn ra NGOÀI panel-frame, làm 1 dải
   ngang trọn chiều rộng màn hình giống hệt ".topbar" của trang soạn thảo (đã dùng ổn định từ trước) -
   sticky trên 1 dải có nền đục, chiếm đúng chỗ trong luồng tài liệu nên không gì đè lên được.
*/
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--panel-line);
  background: var(--panel);
}

.top-right-bar {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Nút chuyển ngôn ngữ được JS chuyển vào chung hàng với Chia sẻ/Cài đặt khi ở màn hình editor
   (xem showScreen trong app.js) nên style theo id, không phụ thuộc đang nằm trong khung nào. */
#langToggleBtn {
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.total-viewers {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.total-viewers .led {
  width: 6px;
  height: 6px;
  transform: none;
}

input[type="datetime-local"] {
  background: var(--bg-raised);
  border: 1px solid var(--panel-line);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: var(--radius);
  outline: none;
  flex: 1;
  min-width: 0;
  color-scheme: dark;
}
input[type="datetime-local"]:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(232,163,61,0.25);
}

/* ---- Chuyển chế độ soạn thảo / xem định dạng ---- */
.content-mode-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.mode-btn {
  background: transparent;
  border: 1px solid var(--panel-line);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11.5px;
  padding: 5px 11px;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mode-btn svg { width: 13px; height: 13px; }
.mode-btn.active {
  border-color: var(--amber-dim);
  color: var(--amber-bright);
  background: rgba(232,163,61,0.07);
}
.mode-btn:hover { border-color: var(--text-dim); }
#downloadTextBtn { margin-left: auto; }
.char-count-row { margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--text-dim); text-align: right; }
.char-count-row.char-count-over { color: var(--red); }
.file-count-row { font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
.file-count-row.file-count-over { color: var(--red); }
.file-sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.file-sort-row select { flex: 0 0 auto; }
.section-count { font-family: var(--mono); font-size: 11px; color: var(--text-dim); font-weight: normal; }

.content-preview {
  width: 100%;
  min-height: 42vh;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--ui);
  font-size: 14.5px;
  line-height: 1.65;
  padding: 18px;
  overflow-wrap: break-word;
}
.content-preview a { color: var(--amber); }
.content-preview h2, .content-preview h3, .content-preview h4 { margin: 4px 0 2px; color: var(--amber-bright); }
.content-preview .inline-code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--bg-raised);
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  padding: 1px 5px;
}
/* <br> ẩn sát khối code: vẫn còn trong DOM (cần cho việc ghép lại text thô khi sửa ngay trong
   Formatted view) nhưng không chiếm chỗ, vì khối code đã tự có khoảng cách riêng. */
.content-preview br.br-collapsed { display: none; }
/* ---- Khối code: khung như cửa sổ trình soạn code (tên ngôn ngữ + nút sao chép + tô màu) ---- */
.content-preview .code-block-wrap {
  margin: 10px 0;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}
.content-preview .code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 10px 5px 12px;
  background: rgba(232,163,61,0.06);
  border-bottom: 1px solid var(--panel-line);
}
.content-preview .code-lang {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber);
}
.content-preview .code-copy {
  font-family: var(--ui);
  font-size: 11px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--panel-line);
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
}
.content-preview .code-copy:hover { color: var(--amber-bright); border-color: var(--amber-dim); }

.content-preview .code-block {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  tab-size: 2;
}

/* Bảng màu cú pháp tự đặt theo tông hổ phách của trang, thay cho theme mặc định của thư viện */
.hljs-comment, .hljs-quote { color: #6f6a52; font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-doctag { color: #d98ce0; }
.hljs-string, .hljs-regexp, .hljs-addition { color: #9fd17a; }
.hljs-number, .hljs-symbol, .hljs-bullet { color: #f0a35e; }
.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class { color: #ffc766; }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable { color: #7fc7d9; }
.hljs-built_in, .hljs-builtin-name, .hljs-type, .hljs-class .hljs-title { color: #71c6a8; }
.hljs-meta, .hljs-meta .hljs-keyword { color: #8f8a72; }
.hljs-deletion { color: var(--red); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }
.hljs-link { color: var(--amber); text-decoration: underline; }

/* ---- Tiến trình upload ---- */
.upload-progress-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.upload-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 12px;
}
/* Ô nhập tên (chứ không phải chữ tĩnh) - có thể sửa trong lúc file còn xếp hàng chờ tải lên,
   khóa lại (readOnly) ngay khi bắt đầu gửi thật sự. Viền đứt gợi ý "bấm vào để sửa được". Chọn
   theo ".upload-item .upload-name" (2 class) để chắc chắn thắng độ ưu tiên của input[type="text"]
   dùng chung toàn trang, không phụ thuộc thứ tự khai báo trong file CSS. */
.upload-item .upload-name {
  flex: 0 1 30%;
  min-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--panel-line);
  font: inherit;
  padding: 0 0 1px;
  border-radius: 0;
}
.upload-item .upload-name:focus {
  outline: none;
  border-bottom-color: var(--amber);
  color: var(--text);
  box-shadow: none;
}
.upload-item .upload-name:read-only { border-bottom-color: transparent; cursor: default; }
.upload-item .upload-name:read-only:focus { border-bottom-color: transparent; }
.upload-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-raised);
  border-radius: 3px;
  overflow: hidden;
}
.upload-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--amber);
  border-radius: 3px;
  transition: width 0.15s;
}
.upload-pct {
  flex: 0 0 auto;
  color: var(--amber);
  min-width: 38px;
  text-align: right;
}
/* Tốc độ thật + thời gian còn lại; ẩn trên màn hình rất hẹp để không chen mất thanh */
.upload-eta {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: 11px;
  white-space: nowrap;
}
.upload-item.upload-receiving .upload-bar-fill { opacity: 0.7; }

/* Nút hủy tải lên - luôn đủ to để bấm bằng ngón tay trên điện thoại */
.upload-cancel {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--panel-line);
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.upload-cancel:hover { color: var(--red); border-color: #6b3226; }
.upload-item.upload-cancelled .upload-bar-fill { background: var(--text-dim); opacity: 0.5; }
.upload-item.upload-cancelled .upload-pct { color: var(--text-dim); }

/* Nút tạm dừng - cùng kích cỡ/kiểu với nút hủy để bấm dễ như nhau trên cảm ứng */
.upload-pause {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid var(--panel-line);
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.upload-pause:hover { color: var(--amber-bright); border-color: var(--amber-dim); }
.upload-item.upload-paused .upload-bar-fill { background: var(--text-dim); }
.upload-item.upload-paused .upload-pause { color: var(--amber-bright); border-color: var(--amber-dim); }

/* Hàng công tắc có ô tích trong bảng Cài đặt */
.check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
  line-height: 1.5;
}
.check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--amber);
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}
.upload-item.upload-done .upload-bar-fill { background: var(--green); }
.upload-item.upload-done .upload-pct { color: var(--green); }
.upload-item.upload-failed .upload-bar-fill { background: var(--red); }
.upload-item.upload-failed .upload-pct { color: var(--red); min-width: 0; text-align: left; flex: 0 1 auto; white-space: normal; }

/* ---- Chọn nhiều file + tải zip ---- */
.selection-bar {
  position: sticky;
  top: 54px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--amber-dim);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-top: 12px;
}
.selection-count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--amber-bright);
  flex: 1;
}
input[type="checkbox"].row-check,
input[type="checkbox"].thumb-check {
  width: 16px;
  height: 16px;
  accent-color: var(--amber);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}
.image-thumb .thumb-check {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
}
.file-list .view-file {
  color: var(--amber);
  cursor: pointer;
  background: none;
  border: 1px solid var(--amber-dim);
  border-radius: 3px;
  font-family: var(--ui);
  font-size: 11.5px;
  padding: 4px 6px;
  flex-shrink: 0;
  text-decoration: none;
}
.file-list .view-file:hover { background: rgba(232,163,61,0.08); }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.view-mode-toggle { display: flex; gap: 4px; margin-top: 18px; }
.view-mode-toggle .mode-btn { padding: 4px 8px; }
.view-mode-toggle svg { width: 14px; height: 14px; display: block; }

/* ---- Trình xem tài liệu (pdf/text/video/audio/office) ---- */
.doc-frame {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  width: min(96vw, 1000px);
  height: min(90vh, 800px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.doc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--panel-line);
}
.doc-name {
  flex: 1;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--amber-bright);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.doc-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.doc-iframe {
  border: none;
  width: 100%;
  height: 100%;
  background: #fff;
}
.doc-media {
  max-width: 100%;
  max-height: 100%;
}
.doc-text {
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  height: 100%;
}
.doc-note {
  padding: 24px;
  text-align: center;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 13px;
}

/* ---- Chat theo trang ---- */
/* Nút mở chat nằm trong topbar (không nổi đè lên nội dung) - chỉ cần position:relative để gắn
   được huy hiệu số tin chưa đọc vào góc nút. */
.chat-toggle { position: relative; overflow: visible; }
.chat-unread {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  pointer-events: none;
}
.chat-panel {
  position: fixed;
  bottom: 20px;
  right: 22px;
  z-index: 19;
  width: 320px;
  max-width: calc(100vw - 44px);
  height: 420px;
  max-height: 65vh;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 44px rgba(0,0,0,0.55);
}
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 14px;
  border-bottom: 1px solid var(--panel-line);
}
.chat-title {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-bright);
}
.chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-empty {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  opacity: 0.8;
  margin: auto;
  text-align: center;
  padding: 0 10px;
}
.chat-msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.chat-msg-name {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--amber);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-msg-time { font-family: var(--mono); font-size: 10px; color: var(--text-dim); flex-shrink: 0; }
.chat-msg-text {
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: break-word;
  white-space: pre-wrap;
}
.chat-inputs { border-top: 1px solid var(--panel-line); padding: 8px 12px 10px; }
.chat-inputs input { width: 100%; }
#chatNameInput { font-size: 11.5px; padding: 6px 10px; margin-bottom: 6px; opacity: 0.85; }
.chat-send-row { display: flex; gap: 6px; }
.chat-send-row input { flex: 1; }

/* Ô chọn đơn vị MB/GB đứng cạnh ô nhập trên CÙNG 1 hàng - giữ bề ngang cố định, nhường chỗ cho ô số */
.unit-row { flex-wrap: nowrap; }
.unit-row .unit-select { flex: 0 0 auto; width: 76px; }
.unit-row input[type="number"] { flex: 1 1 auto; min-width: 60px; width: 60px; }

/* Ô username "ẩn" cho trình quản lý mật khẩu: không chiếm chỗ trên giao diện nhưng vẫn phải
   tồn tại trong DOM (display:none sẽ bị nhiều trình quản lý mật khẩu bỏ qua) */
input.pm-username {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  flex: 0 0 1px;
  min-width: 0;
}

/* ---- Khung xem docx (mammoth render thành HTML - thu phóng bằng tay được trên cảm ứng) ---- */
.doc-html {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #fff;
  color: #1a1a1a;
  padding: 26px 30px;
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.65;
}
.doc-html img { max-width: 100%; height: auto; }
.doc-html table { border-collapse: collapse; max-width: 100%; }
.doc-html td, .doc-html th { border: 1px solid #b5b5b5; padding: 4px 9px; }
.doc-html h1, .doc-html h2, .doc-html h3 { line-height: 1.3; }
.doc-html a { color: #0b57d0; }

/* ---- Khung xem PDF (pdf.js render lên canvas) ---- */
.doc-pdf {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--bg-raised);
}
.doc-pdf-page {
  background: #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,0.45);
  max-width: 100%;
  flex-shrink: 0;
}

/* ---- Watermark chủ quyền ---- */
.site-watermark {
  position: fixed;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.35em;
  color: var(--text-dim);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 520px) {
  .panel-frame { padding: 26px 22px; }
  .main-area { padding: 16px; }
  .image-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .logo-icon { width: 17px; height: 17px; border-radius: 4px; transform: translateY(1px); }
  .topbar { padding: 10px 14px; }
  .status-row { font-size: 11px; }
  /* Đường dẫn dài chiếm hết chỗ - thu nút Chia sẻ/Cài đặt lại còn biểu tượng cho gọn */
  .topbar-actions .icon-btn { padding: 7px 9px; }
  .topbar-actions .btn-label { display: none; }

  /* Chat chiếm cả bề ngang màn hình như bottom-sheet cho dễ gõ trên điện thoại */
  .chat-panel {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
    bottom: 10px;
    max-height: 60vh;
  }
  .save-indicator { bottom: 16px; left: 14px; }

  /* Trình xem tài liệu gần như toàn màn hình */
  .doc-frame { width: 100vw; height: 94vh; height: 94dvh; border-radius: 0; }
  #docViewer.overlay { padding: 0; }

  .selection-bar { flex-wrap: wrap; top: 48px; }
  .upload-item .upload-name { flex-basis: 40%; }
  .upload-eta { display: none; } /* màn hình hẹp: nhường chỗ cho thanh và phần trăm */
}

/* Điện thoại màn hình hẹp/dài (dưới ~420px): các ô cấu hình admin xếp 2 cột bị chật, chữ và ô
   nhập chen nhau - chuyển hẳn về 1 cột dọc, mỗi mục 1 hàng cho thoáng. */
@media (max-width: 430px) {
  .admin-grid { grid-template-columns: 1fr; max-width: none; }
  .admin-frame { padding: 22px 16px; }
  .panel-frame { padding: 24px 18px; }
  .content-mode-row { flex-wrap: wrap; }
  .chat-panel { max-height: 55vh; }
}

@media (max-width: 680px) {
  .admin-frame { padding: 26px 20px; }
  .page-detail-row input.expiry-input { flex: 1 1 140px; width: auto; padding-right: 4px; }
  .page-detail-actions { flex-wrap: wrap; }
}