:root {
  --color-bg: #0b0d12;
  --color-surface: #12151c;
  --color-surface-alt: #171b24;
  --color-surface-raised: #1c202b;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-text: #eef0f4;
  --color-text-muted: #9aa2b1;
  --color-primary: #ff5a1f;
  --color-primary-hover: #e34f19;
  --radius: 12px;
  --page-width: 1200px;

  --status-dang: #f2802b;
  --status-cho: #ffd400;
  --status-hoan: #1aa260;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.55;
}

.site-main { flex: 1 0 auto; }
.site-footer {
  flex: 0 0 auto;
  margin-top: 32px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: .85rem;
  text-align: center;
}
.site-footer a { color: inherit; font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--color-primary); }

img { max-width: 100%; display: block; }

/* ---------- Top Block + Popup toàn web (cùng hành vi với SafeBuy) ---------- */

.global-top-block { padding: 14px 0 0; background: var(--color-bg); }
.global-top-block[hidden], .global-popup-backdrop[hidden] { display: none; }
.global-top-block-card {
  overflow: hidden;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.global-content-body { line-height: 1.55; }
.global-content-body > :first-child { margin-top: 0; }
.global-content-body > :last-child { margin-bottom: 0; }
.global-content-body p { margin: 0 0 10px; }
.global-content-body h1, .global-content-body h2, .global-content-body h3 { margin: 14px 0 8px; line-height: 1.2; }
.global-content-body h1 { font-size: 1.7rem; }
.global-content-body h2 { font-size: 1.35rem; }
.global-content-body h3 { font-size: 1.1rem; }
.global-content-body img { width: 100%; height: auto; margin: 10px 0; border-radius: 10px; }
.global-content-body a { color: var(--color-primary); }
.global-content-body ul, .global-content-body ol { margin: 0 0 10px; padding-left: 22px; }
.global-content-body blockquote { margin: 10px 0; padding: 4px 12px; border-left: 3px solid var(--color-primary); color: var(--color-text-muted); }

body.global-popup-open { overflow: hidden; }
.global-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(0 0 0 / 72%);
  backdrop-filter: blur(3px);
}
.global-popup-dialog {
  position: relative;
  width: min(784px, 70vw);
  max-height: 88vh;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: 0 26px 90px rgb(0 0 0 / 62%);
}
.global-popup-content { width: 100%; overflow: hidden; padding: 22px; }
.global-popup-close {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: grid;
  width: 46px;
  height: 46px;
  margin: 12px 12px -58px auto;
  place-items: center;
  border: 2px solid rgb(255 255 255 / 72%);
  border-radius: 999px;
  background: rgb(11 13 18 / 88%);
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.global-popup-close:hover, .global-popup-close:focus-visible { border-color: var(--color-primary); color: #ff7a49; outline: none; }

.presentation-block { position: relative; overflow: hidden; border-radius: 12px; background: #11151d; }
.presentation-notice { min-height: 170px; display: grid; place-items: center; padding: 28px; text-align: center; }
.presentation-notice.tone-brand { background: linear-gradient(135deg, #ff5a1f, #9b2600); }
.presentation-notice.tone-warning { background: linear-gradient(135deg, #f2c200, #7a5900); color: #111; }
.presentation-notice.tone-dark { border: 1px solid var(--color-border); }
.presentation-media { min-height: 300px; aspect-ratio: 16 / 7; }
.presentation-media > img, .presentation-media > iframe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: cover; }
.presentation-media > iframe { pointer-events: none; }
.presentation-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 82%), rgb(0 0 0 / 18%) 70%, transparent); }
.presentation-copy { position: relative; z-index: 2; width: min(620px, 88%); padding: clamp(22px, 5vw, 62px); }
.presentation-copy h2 { margin: 8px 0 10px; font-size: clamp(1.6rem, 4vw, 3.4rem); line-height: 1.02; }
.presentation-copy p { margin: 0 0 16px; color: rgb(255 255 255 / 82%); }
.presentation-tag { display: inline-block; color: #ffd1c0; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.presentation-button { display: inline-flex; min-height: 42px; align-items: center; margin-top: 8px; padding: 9px 18px; border-radius: 999px; background: var(--color-primary); color: #fff !important; font-weight: 800; text-decoration: none; }
.presentation-comparison { padding: 14px; }
.comparison-captions { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 8px; color: var(--color-text-muted); font-size: .82rem; }
.comparison-stage { position: relative; overflow: hidden; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #090b0f; }
.comparison-stage > img, .comparison-after img { width: 100%; height: 100%; margin: 0; border-radius: 0; object-fit: cover; }
.comparison-after { position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; }
.comparison-after img { width: 100%; max-width: none; }
.comparison-stage input[type="range"] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparison-divider { position: absolute; z-index: 2; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 30%); pointer-events: none; }
.comparison-divider::after { content: "↔"; position: absolute; top: 50%; left: 50%; display: grid; width: 42px; height: 42px; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; background: #fff; color: #111; font-weight: 900; }

@media (prefers-reduced-motion: no-preference) {
  .global-popup-backdrop { animation: global-popup-fade-in .18s ease-out; }
  .global-popup-dialog { animation: global-popup-rise-in .22s ease-out; }
}
@keyframes global-popup-fade-in { from { opacity: 0; } }
@keyframes global-popup-rise-in { from { opacity: 0; transform: translateY(12px) scale(.985); } }

.page {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header ---------- */

.topbar {
  border-bottom: 1px solid var(--color-border);
  background: rgba(11, 13, 18, 0.92);
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Chỉ logo mới là link về trang chủ -- chữ "LOG BẢO HÀNH" bên cạnh đứng
   yên, không bấm được. */
.brand-logo-link {
  display: block;
  line-height: 0;
}

.brand-logo {
  height: 96px;
  width: auto;
  display: block;
}

.brand-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.brand-nav-item {
  color: var(--color-text);
  text-decoration: none;
}
a.brand-nav-item:hover { color: var(--color-primary); }
.brand-nav-static { cursor: default; }
.brand-nav-sep { color: var(--color-text-muted); font-weight: 400; }

/* ---------- Tab bar (menu ngang cho nhân viên) ---------- */

.tab-bar-wrap {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}
.tab-bar {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-link {
  display: inline-block;
  padding: 12px 18px;
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab-link:hover { color: var(--color-text); }
.tab-link.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Login card widget (top-right) */

.login-card {
  width: 260px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: 14px;
  flex-shrink: 0;
}

.login-card-title {
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-form { display: flex; flex-direction: column; gap: 8px; }

.login-form input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 0.88rem;
}

.login-form input:focus { outline: 1.5px solid var(--color-primary); }

.login-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
}

.login-note {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 4px 0 10px;
}

.btn-link {
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 2px 4px;
}
.btn-link:hover { text-decoration: underline; }
.btn-back-arrow {
  font-size: 1.05rem;
  font-weight: 700;
  vertical-align: middle;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 4px 16px;
  display: inline-flex;
  align-items: center;
}
.btn-back-arrow:hover { text-decoration: none; background: var(--color-primary); color: #fff; }

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--status-hoan);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  border: 1px solid var(--status-hoan);
  border-radius: 999px;
  padding: 3px 12px;
}
.phone-link:hover { background: var(--status-hoan); color: #06210f; }

.form-error {
  color: #f87171;
  font-size: 0.8rem;
  margin: 8px 0 0;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
}
.user-chip-name { font-weight: 700; font-size: 0.95rem; }

/* Đăng nhập rồi chỉ cần mã NV + nút đăng xuất, nằm gọn ngang hàng logo thay
   vì chiếm hẳn 1 khối riêng bên dưới. */
.login-card.login-card--compact {
  width: auto;
  border: none;
  background: transparent;
  padding: 0;
}
.user-chip--compact {
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.staff-badge {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-primary);
  background: transparent;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  padding: 4px 12px;
  line-height: 1;
  font-family: inherit;
  cursor: pointer;
}
.staff-badge:hover { background: var(--color-primary); color: #fff; }
@media (max-width: 900px) {
  .topbar-inner.compact-user { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- Buttons ---------- */

.btn {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.btn-block { width: 100%; }
.btn-small { padding: 5px 10px; font-size: 0.78rem; }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-ghost { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }
.btn-approve { background: var(--status-hoan); color: #06210f; }
.btn-reject { background: transparent; border: 1px solid #f87171; color: #f87171; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-warning { background: var(--status-cho); color: #1a1a1a; }
.btn-warning:hover { background: #e6c000; }

/* ---------- General layout ---------- */

main.page { padding-top: 28px; padding-bottom: 60px; }

.section-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.muted { color: var(--color-text-muted); }

.mfa-setup-box { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.mfa-secret-display {
  font-family: monospace;
  font-size: 1.1rem;
  letter-spacing: 2px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  word-break: break-all;
  user-select: all;
}

.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.state-message {
  text-align: center;
  color: var(--color-text-muted);
  padding: 40px 0;
}

/* ---------- Kill switch / bảo trì ---------- */

.system-mode-banner[hidden] { display: none; }
.system-mode-banner {
  border-bottom: 1px solid #d69e00;
  background: #4a3900;
  color: #fff4b8;
}
.system-mode-banner .page {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 0.84rem;
  text-align: center;
}
.system-mode-banner a { color: #fff; font-weight: 700; }

.maintenance-page {
  max-width: 620px;
  margin: 8vh auto 0;
  padding: 36px 24px;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  background: var(--color-surface);
  text-align: center;
}
.maintenance-page h1 { margin: 8px 0 12px; font-size: 1.65rem; }
.maintenance-page p { margin: 6px 0; }
.maintenance-icon { font-size: 3rem; }

.system-control-summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}
.system-control-summary span { color: var(--color-text-muted); font-size: 0.82rem; }
.system-control-summary.is-normal b { color: var(--status-hoan); }
.system-control-summary.is-warning b { color: var(--status-cho); }
.system-control-summary.is-danger b { color: #f87171; }
.system-control-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.system-control-card.active-warning { border-color: var(--status-cho); }
.system-control-card.active-danger { border-color: #f87171; }
.system-control-copy { min-width: 0; }
.system-control-copy .section-title { justify-content: flex-start; margin-bottom: 6px; }
.system-control-copy p { margin: 0; color: var(--color-text-muted); }
.system-control-card > .btn { flex: 0 0 auto; min-width: 190px; }
.system-recovery-note {
  color: var(--color-text-muted);
  font-size: 0.82rem;
}
.system-recovery-note code { color: var(--color-text); }

@media (max-width: 640px) {
  .system-mode-banner .page { flex-direction: column; gap: 2px; }
  .maintenance-page { margin-top: 3vh; padding: 28px 18px; }
  .system-control-summary, .system-control-card { flex-direction: column; align-items: stretch; }
  .system-control-card { gap: 16px; }
  .system-control-card > .btn { width: 100%; min-width: 0; min-height: 44px; }
}

/* ---------- Admin tables (nhân viên / khách hàng) ---------- */

.admin-table-wrap { overflow-x: auto; }
.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.admin-table th {
  text-align: left;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table td a { color: #fff; text-decoration: underline; }
.admin-table td a:hover { color: var(--color-primary); }
/* Đánh giá có thể dài (tới 1000 ký tự) -- bỏ nowrap mặc định của bảng, giới
   hạn còn tối đa 3 dòng thay vì kéo dài bảng vô hạn theo 1 đánh giá dài. */
.feedback-log-text {
  white-space: normal;
  max-width: 360px;
  min-width: 220px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.pager-info { font-size: 0.82rem; color: var(--color-text-muted); }

/* ---------- Ticket list ---------- */

.scope-toggle { display: flex; gap: 6px; }
.scope-btn {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.scope-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.star-toggle-btn {
  border: 1px solid var(--color-border);
  background: transparent;
  color: #fff;
  border-radius: 999px;
  width: 30px;
  height: 30px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.star-toggle-btn.active { color: var(--status-cho); border-color: var(--status-cho); }

.ticket-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ticket-search-input {
  flex: 1;
  min-width: 220px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 0.88rem;
}
.ticket-sort-select {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 0.85rem;
  color-scheme: dark;
}
/* 3 dropdown lọc (trạng thái/nhân viên/ngày) chia đều 1 hàng, viền trắng
   đậm cho nổi, chữ dài thì ẩn bớt (ellipsis) thay vì đẩy vỡ hàng. */
.ticket-filter-select {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 10px;
  border: 2px solid #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticket-list { display: flex; flex-direction: column; gap: 10px; }

/* Hàng phiếu: 3 dòng xếp chồng (không chia cột ngang) -- tránh cột trạng
   thái ăn hết bề ngang trên mobile, đồng thời không cần media query riêng
   vì cùng 1 layout gọn cho mọi kích thước màn hình.
   Dòng 1: STT + nút copy + mã/tên phiếu (tên dài tự xuống dòng trong ô nó).
   Dòng 2: tên khách + SĐT.
   Dòng 3: ngày tạo + số log (trái) -- trạng thái (phải). */
.ticket-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 0.15s;
}
.ticket-row:hover { border-color: var(--color-primary); }

.ticket-row-line1 { display: flex; align-items: flex-start; gap: 8px; }
.ticket-row-sttwrap { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.ticket-row-stt {
  flex-shrink: 0;
  width: 22px;
  text-align: right;
  font-weight: 800;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}
.ticket-row-stt-paid { color: var(--status-cho); }
.ticket-copy-code-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  /* Trắng để nổi bật trên nền tối -- icon SVG dùng stroke="currentColor",
     ăn theo màu chữ đặt ở đây. */
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
}
.ticket-copy-code-btn:hover { border-color: var(--color-primary); background: var(--color-surface-alt); }
.ticket-row-share-btn {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.ticket-row-code { flex: 1; min-width: 0; font-weight: 700; }

.ticket-detail-heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ticket-detail-code { overflow-wrap: anywhere; }
.ticket-detail-copy-btn { display: inline-flex; vertical-align: middle; }
.ticket-detail-edit-title-btn { display: inline-flex; color: var(--color-primary); vertical-align: middle; }
.ticket-detail-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ticket-share-btn { white-space: nowrap; }

.ticket-title-edit-panel {
  padding: 14px;
  margin-top: -8px;
  margin-bottom: 16px;
  background: var(--color-surface-alt);
}
.ticket-title-edit-label { font-weight: 800; margin-bottom: 10px; }
.ticket-title-edit-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ticket-title-edit-row { width: 100%; display: flex; align-items: stretch; gap: 8px; }
.ticket-title-edit-prefix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: 800;
  white-space: nowrap;
}
.ticket-title-edit-row .autosize-textarea { flex: 1 1 auto; width: 100%; }
.ticket-title-edit-form > input { min-width: 220px; }
.ticket-info-edit-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ticket-info-edit-grid label { display: grid; gap: 6px; color: var(--color-text-muted); font-size: .8rem; font-weight: 700; }
.ticket-info-edit-grid input {
  width: 100%;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
}
.ticket-title-edit-actions { display: flex; gap: 8px; }
.ticket-title-history { width: 100%; margin-top: 12px; color: var(--color-text-muted); font-size: .8rem; }
.ticket-title-history summary { cursor: pointer; font-weight: 700; }
.ticket-title-history-list { display: grid; gap: 8px; margin-top: 8px; }
.ticket-title-history-item {
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  overflow-wrap: anywhere;
}

.ticket-row-line2 { font-size: 0.82rem; color: var(--color-text-muted); }

.ticket-row-line3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ticket-row-date { font-size: 0.78rem; color: var(--color-text-muted); }
.ticket-row-line3-right { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.inline-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.inline-form input, .inline-form select {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 0.88rem;
}
/* Tên máy/tên log có thể dài -- tự giãn chiều cao theo số ký tự thay vì
   cuộn ngang trong 1 dòng. */
.autosize-textarea {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 0.88rem;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
  min-height: 38px;
  /* Giãn tối đa ~3 dòng theo nội dung, dài hơn thì cuộn trong khung thay vì
     kéo dài vô hạn xuống dưới. */
  max-height: 84px;
  overflow-y: hidden;
}
/* Panel "Tạo phiếu" -- mỗi ô 1 hàng riêng, giãn hết chiều ngang bằng khung
   tìm kiếm bên dưới thay vì co lại theo nội dung. */
.create-ticket-form {
  flex-direction: column;
  align-items: stretch;
}
.create-ticket-form input,
.create-ticket-form .autosize-textarea,
.create-ticket-form button {
  width: 100%;
}

/* ---------- Status badge ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #06210f;
  white-space: nowrap;
  line-height: 1;
}
.badge-dang_xu_ly { background: var(--status-dang); color: #1a1a1a; }
.badge-cho_khach { background: var(--status-cho); color: #1a1a1a; }
.badge-hoan_thanh { background: var(--status-hoan); color: #1a1a1a; }
.badge-amount { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); }
.badge-pending-feedback { background: transparent; border: 1px solid var(--status-cho); color: var(--status-cho); }
.badge-feedback-pending { background: transparent; border: 1px solid var(--status-cho); color: var(--status-cho); }
.badge-feedback-approved { background: transparent; border: 1px solid var(--status-hoan); color: var(--status-hoan); }
.badge-feedback-rejected { background: transparent; border: 1px solid #f87171; color: #f87171; }

/* ---------- Entry card (matches wireframe) ---------- */

.entry-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  margin-bottom: 20px;
  overflow: hidden;
}

/* Nhật ký chỉnh sửa -- chỉ admin thấy, viền vàng cảnh báo nhẹ để phân biệt
   với nội dung log thường. */
.entry-history {
  border-top: 1px solid var(--status-cho);
  background: rgba(255, 212, 0, 0.05);
  padding: 10px 16px;
  font-size: 0.8rem;
}
.entry-history summary {
  cursor: pointer;
  color: var(--status-cho);
  font-weight: 700;
}
.entry-history-item { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--color-border); }
.entry-history-item:first-child { border-top: none; }
.entry-history-meta { color: var(--color-text-muted); font-size: 0.76rem; margin-bottom: 3px; }
.entry-history-changes { margin: 0; padding-left: 18px; overflow-wrap: break-word; }
.entry-history-changes li { margin-bottom: 2px; }
.entry-history-removed-label { margin-top: 8px; margin-bottom: 6px; color: var(--status-cho); font-weight: 700; }
.entry-history-added-label { margin-top: 8px; margin-bottom: 6px; color: var(--status-hoan); font-weight: 700; }

.entry-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  flex-wrap: wrap;
}
.entry-stt {
  font-weight: 800;
  color: var(--color-primary);
  min-width: 28px;
}
.entry-date { color: var(--color-text-muted); font-size: 0.85rem; }
.entry-staff { font-size: 0.85rem; }
.entry-topbar-spacer { flex: 1; }
.entry-edit-btn { margin-left: auto; }

.entry-body {
  display: grid;
  grid-template-columns: 1fr 260px;
}

.entry-main { display: flex; flex-direction: column; }

.entry-row {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 14px;
  padding: 16px;
}
.entry-row + .entry-row { border-top: 1px solid var(--color-border); }

.entry-row-label {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 6px;
  color: var(--color-text-muted);
}
.entry-row-text {
  white-space: pre-wrap;
  font-size: 0.9rem;
}
.entry-row-copy { min-width: 0; }

.voice-list { display: grid; gap: 8px; margin-top: 10px; }
.voice-player {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface-alt);
}
.voice-player-label { color: var(--color-text-muted); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.voice-player audio, .voice-editor-item audio { display: block; width: 100%; min-width: 0; height: 38px; }

.photo-group { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-box {
  width: 88px;
  height: 88px;
  border-radius: 8px;
  border: 1px dashed var(--color-border);
  background: var(--color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.photo-box img { width: 100%; height: 100%; object-fit: cover; }
.photo-box-add {
  color: var(--color-primary);
  font-size: 1.4rem;
  cursor: pointer;
}
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  touch-action: pan-y;
}
.lightbox-overlay[hidden] { display: none; }
.lightbox-img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.lightbox-close {
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  font-size: 1.9rem;
  /* Nền tối đậm hơn hẳn (thay vì trắng mờ dùng chung với nút prev/next) --
     ảnh có mép trắng thì nút trắng-mờ trên nền trắng gần như biến mất. */
  background: rgba(0, 0, 0, 0.65);
}
.lightbox-prev,
.lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  font-size: 1.8rem;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-counter {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 0.85rem;
  opacity: 0.8;
}
body.lightbox-open { overflow: hidden; }
@media (max-width: 640px) {
  /* Nút X đưa vô top-center (thay vì góc phải sát mép) -- tay bấm hụt vì
     gần mép màn hình; giữa màn hình dễ chạm trúng bằng ngón cái hơn hẳn. */
  .lightbox-close { width: 46px; height: 46px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .lightbox-prev, .lightbox-next { width: 42px; height: 42px; font-size: 1.6rem; }
}
.photo-box-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

.entry-feedback {
  border-left: 1px solid var(--color-border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.entry-feedback-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.feedback-author { font-size: 0.78rem; font-weight: 700; }
.feedback-text {
  font-size: 0.88rem;
  white-space: pre-wrap;
  background: var(--color-surface-alt);
  border-radius: 8px;
  padding: 10px;
}
.feedback-pending-note {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-radius: 10px;
  padding: 10px;
}
.feedback-pending-tag {
  font-size: 0.72rem;
  color: var(--status-cho);
  font-weight: 700;
}
.feedback-rejected-tag {
  font-size: 0.72rem;
  color: #f87171;
  font-weight: 700;
}
.feedback-form textarea {
  width: 100%;
  min-height: 70px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  padding: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
}
.feedback-review-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ---------- Entry create/edit form ---------- */

/* Trạng thái + Lưu + Hủy gộp chung 1 hàng ngay đầu panel -- khỏi cần tiêu đề
   "Sửa log #..." + hàng nút riêng bên dưới nữa, đỡ dài panel. */
.entry-form-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.entry-form-topbar select { flex: 0 1 auto; max-width: 130px; border: 2px solid #fff; }
.entry-form-topbar .btn { flex-shrink: 0; }
/* Hủy ghim sát mép phải, Lưu/Tạo log nằm giữa khoảng trống dropdown-Hủy --
   auto margin 2 bên chia đều khoảng trống thừa, tự giãn xa nhau ra. */
.entry-form-topbar button[type="submit"] { margin: 0 auto; position: relative; left: 3px; }
.entry-form-topbar [data-action="cancel-entry-form"] { margin-left: auto; }
.entry-form-section {
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: rgb(255 255 255 / 1.5%);
  overflow: hidden;
}
.entry-form-section > summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
  color: var(--color-text);
  font-size: .9rem;
  font-weight: 800;
  touch-action: manipulation;
  user-select: none;
}
.entry-form-section > summary::-webkit-details-marker { display: none; }
.entry-form-section > summary::after {
  content: "Mở ▾";
  flex-shrink: 0;
  color: var(--color-primary);
  font-size: .78rem;
}
.entry-form-section[open] > summary {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.entry-form-section[open] > summary::after { content: "Thu gọn ▴"; }
.entry-form-section-body { padding: 2px 12px 12px; }
.entry-form-section-private { border-color: color-mix(in srgb, var(--status-cho) 55%, var(--color-border)); }
.entry-form-section-private > summary { color: var(--status-cho); }
.entry-private-note-hint {
  margin: 10px 2px 0;
  color: var(--color-text-muted);
  font-size: .74rem;
  line-height: 1.45;
}
.entry-form-field { margin-bottom: 12px; }
.entry-form-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 5px;
}
.entry-form-field textarea,
.entry-form-field select,
.entry-form-field input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: inherit;
  font-size: 0.88rem;
}
.entry-form-field textarea { min-height: 90px; resize: vertical; }
.entry-content-kind {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: rgb(255 255 255 / 1.5%);
}
.entry-content-kind > span { color: var(--color-text-muted); font-size: .78rem; font-weight: 800; }
.entry-autogrow-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 50vh;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-family: inherit;
  font-size: .88rem;
  line-height: 1.5;
  resize: vertical;
  overflow-y: hidden;
}
.voice-editor-list { display: grid; gap: 8px; }
.voice-editor-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
}
.voice-remove {
  width: 32px;
  height: 32px;
  border: 1px solid #ef4444;
  border-radius: 50%;
  background: transparent;
  color: #ef4444;
  font-size: 1.25rem;
  cursor: pointer;
}
.voice-editor-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.voice-file-button { cursor: pointer; }
.voice-limit, .voice-recording-status { color: var(--color-text-muted); font-size: .75rem; }
.voice-recording-status { color: #f87171; font-weight: 800; }
.voice-public-note { margin-top: 7px; color: var(--color-text-muted); font-size: .72rem; line-height: 1.4; }

.entry-internal-note {
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--status-cho) 5%, var(--color-surface-alt));
}
.entry-internal-note > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  list-style: none;
  cursor: pointer;
  color: var(--status-cho);
  font-size: .82rem;
  font-weight: 800;
}
.entry-internal-note > summary::-webkit-details-marker { display: none; }
.entry-internal-note > summary::after { content: "Mở ▾"; }
.entry-internal-note[open] > summary::after { content: "Thu gọn ▴"; }
.entry-internal-note-body { padding: 0 16px 14px; }
.entry-internal-note-body .photo-group { margin-top: 10px; }

@media (max-width: 640px) {
  .voice-player { grid-template-columns: 1fr; }
  .voice-player-label { white-space: normal; }
  .voice-player audio, .voice-editor-item audio { height: 42px; }
  .entry-content-kind { padding: 9px; }
  .entry-form-section > summary { min-height: 54px; padding: 13px 12px; }
}

/* ---------- Dashboard ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.stat-card-clickable { cursor: pointer; }
.stat-card-clickable:hover, .stat-card-clickable:focus-visible { border-color: var(--color-primary); }
.stat-value { font-size: 1.8rem; font-weight: 800; }
.stat-label { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 4px; }
.stat-card-alert { border-color: var(--status-cho); }
.stat-card-alert .stat-value { color: var(--status-cho); }
.stat-card-dang .stat-value { color: var(--status-dang); }
.stat-card-cho .stat-value { color: var(--status-cho); }
.stat-card-hoan .stat-value { color: var(--status-hoan); }
.dashboard-links { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 640px) {
  /* Dashboard gộp hết vào 1 khung -- ép cứng 2 cột thay vì auto-fit rớt về
     1 cột trên màn hình hẹp, đỡ phải kéo dài cả trang. */
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 12px 14px; }
  .stat-value { font-size: 1.4rem; }
  .stat-label { font-size: 0.74rem; }
}

@media (max-width: 900px) {
  .entry-body { grid-template-columns: 1fr; }
  .entry-feedback { border-left: none; border-top: 1px solid var(--color-border); }
  .entry-row { grid-template-columns: 1fr; }
  .topbar-inner { flex-direction: column; }
  .login-card { width: 100%; }
}

/* ---------- Trang nội dung (ABOUT/HOW) + rich text editor ---------- */

.content-page-body, .richtext-editor .ProseMirror {
  line-height: 1.6;
}
.content-page-body img, .richtext-editor img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
.content-page-body h1, .richtext-editor h1 { font-size: 1.7rem; margin: 22px 0 12px; }
.content-page-body h2, .richtext-editor h2 { font-size: 1.35rem; margin: 20px 0 10px; }
.content-page-body h3, .richtext-editor h3 { font-size: 1.1rem; margin: 16px 0 8px; }
.content-page-body p, .richtext-editor p { margin: 0 0 12px; }
.content-page-body ul, .content-page-body ol,
.richtext-editor ul, .richtext-editor ol { margin: 0 0 12px; padding-left: 24px; }
.content-page-body a, .richtext-editor a { color: var(--color-primary); }
.content-page-body code, .richtext-editor code {
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9em;
}
.content-page-body blockquote, .richtext-editor blockquote {
  border-left: 3px solid var(--color-primary);
  margin: 12px 0;
  padding: 4px 14px;
  color: var(--color-text-muted);
}
.content-page-body table, .richtext-editor table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0;
}
.content-page-body td, .content-page-body th,
.richtext-editor td, .richtext-editor th {
  border: 1px solid var(--color-border);
  padding: 6px 10px;
  text-align: left;
}
.content-page-body th, .richtext-editor th { background: var(--color-surface-alt); font-weight: 700; }

.content-editor-block {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border);
}
.content-editor-block:last-child { border-bottom: none; }
.content-editor-title { font-weight: 700; margin-bottom: 8px; }
.content-save-status { margin-left: 10px; font-size: 0.82rem; }
.content-admin-note { margin-bottom: 16px; font-size: 0.85rem; }
.content-pages-title { margin-top: 34px; }
.global-content-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  cursor: pointer;
}
.global-content-toggle input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--color-primary); }
.global-content-toggle span { display: grid; gap: 2px; }
.global-content-toggle small { color: var(--color-text-muted); font-weight: 400; }
.global-block-save-row { display: flex; align-items: stretch; gap: 16px; margin-bottom: 16px; }
.global-block-save-row .global-content-toggle { flex: 1; margin: 0; }
.global-block-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 10px; padding: 14px; border: 1px dashed var(--color-border); border-radius: 12px; }
.global-block-toolbar select { min-width: 0; }
.global-block-list { display: grid; gap: 12px; margin-top: 14px; }
.global-block-card { overflow: hidden; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface-alt); }
.global-block-card-head { display: flex; align-items: center; gap: 10px; min-height: 62px; padding: 10px 14px; cursor: pointer; }
.global-block-caret { transition: transform .15s; }
.global-block-card.is-collapsed .global-block-caret { transform: rotate(-90deg); }
.global-block-badge, .global-block-active { padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.global-block-badge { background: var(--color-primary); color: #fff; text-transform: uppercase; }
.global-block-active { margin-left: auto; border: 1px solid var(--status-cho); color: var(--status-cho); }
.global-block-actions { display: flex; gap: 6px; margin-left: 6px; }
.global-block-actions button { width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; color: var(--color-text); cursor: pointer; }
.global-block-actions button:disabled { opacity: .3; cursor: default; }
.global-block-actions button.danger { border-color: #ef4444; color: #ef4444; }
.global-block-card-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px; border-top: 1px solid var(--color-border); }
.global-block-card.is-collapsed .global-block-card-body { display: none; }
.global-block-field { display: grid; align-content: start; gap: 6px; color: var(--color-text-muted); font-size: .8rem; }
.global-block-field input, .global-block-field textarea, .global-block-field select { width: 100%; }
.global-block-image-field { grid-row: span 2; }
.global-block-image-field img { max-height: 180px; border-radius: 8px; object-fit: contain; background: #090b0f; }
.global-block-footer { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.global-block-empty { padding: 18px; border: 1px dashed var(--color-border); border-radius: 10px; }

.richtext-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.richtext-toolbar button {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 0.8rem;
  cursor: pointer;
}
.richtext-toolbar button:hover { border-color: var(--color-primary); }
.richtext-toolbar button.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.richtext-toolbar .richtext-sep { width: 1px; height: 20px; background: var(--color-border); }
.richtext-toolbar .richtext-table-extra { display: inline-flex; gap: 6px; }
.richtext-fontsize {
  width: 74px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 0.8rem;
}
.richtext-editor {
  min-height: 220px;
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.richtext-editor .ProseMirror {
  padding: 14px;
  min-height: 220px;
}
.richtext-editor .ProseMirror:focus { outline: none; }
/* Giữ màu bôi đen vùng chọn kể cả khi focus rời qua ô cỡ chữ trên toolbar --
   không thì bấm vào ô cỡ chữ trông như "mất chọn" dù vùng chọn vẫn còn. */
.rte-persistent-selection { background-color: rgb(255 90 31 / 0.28); }
.richtext-editor:focus-within { border-color: var(--color-primary); }

/* Đa số nhân viên thao tác trên điện thoại — header sticky chiếm hết màn
   hình nhỏ nên bỏ sticky + thu gọn logo/tiêu đề, và để "+ Thêm log mới"
   xuống hàng riêng full-width thay vì bị bóp méo thành hình tròn. */
@media (max-width: 640px) {
  /* iOS Safari tự phóng trang khi focus form control có chữ dưới 16px.
     Giữ đúng 16px trên mobile để bàn phím mở mà viewport không bị zoom,
     đồng thời không vô hiệu hóa pinch-zoom/accessibility của người dùng. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    /* Một số component có selector class mạnh hơn ở phía trên; important chỉ
       khóa riêng cỡ chữ chống auto-zoom, không can thiệp kích thước/layout. */
    font-size: 16px !important;
  }
  .global-top-block { padding-top: 10px; }
  .global-top-block-card { padding: 12px 14px; }
  .global-popup-backdrop { padding: 12px; }
  .global-popup-dialog { width: 100%; max-height: 90vh; }
  .global-popup-content { padding: 18px 14px; }
  .global-popup-close { top: 8px; width: 40px; height: 40px; margin: 8px 8px -48px auto; font-size: 25px; }
  .presentation-media { min-height: 360px; aspect-ratio: 4 / 5; }
  .presentation-copy { width: 100%; padding: 24px 18px; align-self: end; }
  .presentation-shade { background: linear-gradient(0deg, rgb(0 0 0 / 88%), rgb(0 0 0 / 12%) 80%); }
  .presentation-comparison { padding: 8px; }
  .comparison-stage { aspect-ratio: 4 / 3; }
  .global-block-save-row { flex-direction: column; }
  .global-block-save-row > .btn { min-height: 44px; }
  .global-block-toolbar { grid-template-columns: 1fr 1fr; }
  .global-block-toolbar select { grid-column: 1 / -1; }
  .global-block-card-head { flex-wrap: wrap; }
  .global-block-active { margin-left: 0; }
  .global-block-actions { width: 100%; margin-left: 0; justify-content: flex-end; }
  .global-block-card-body { grid-template-columns: 1fr; }
  .topbar { position: static; }
  .topbar-inner { padding: 14px 0; gap: 10px; }
  .brand-logo { height: 44px; }
  .brand-nav { font-size: 1.05rem; gap: 6px; }
  .section-title { flex-direction: column; align-items: stretch; }
  .section-title .btn { width: 100%; }
  .ticket-detail-heading { align-items: center; }
  .ticket-detail-heading .btn-back-arrow { flex: 0 0 auto; }
  .ticket-detail-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ticket-detail-actions .btn { width: 100%; min-height: 42px; }
  .ticket-detail-actions .btn:only-child { grid-column: 1 / -1; }
  .ticket-title-edit-row { flex-direction: column; }
  .ticket-title-edit-prefix { min-height: 42px; white-space: normal; overflow-wrap: anywhere; }
  .ticket-title-edit-form > input { width: 100%; min-width: 0; }
  .ticket-info-edit-grid { grid-template-columns: 1fr; }
  .ticket-title-edit-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ticket-title-edit-actions .btn { width: 100%; min-height: 42px; }
  /* Bóp nút "+ Tạo phiếu" lại trên mobile để chừa chỗ cho nút ngôi sao. */
  .scope-toggle { flex-wrap: nowrap; }
  .scope-toggle [data-action="toggle-create-ticket"] { padding: 5px 8px; font-size: 0.72rem; width: auto; }
  .staff-edit-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }
  .staff-edit-form input { grid-column: 1 / -1; width: 100%; }
  .staff-edit-form .btn { width: 100%; min-height: 42px; }
}

@media (max-width: 400px) {
  .page { padding-left: 14px; padding-right: 14px; }
  .topbar-inner.compact-user { gap: 8px; }
  .brand { gap: 8px; min-width: 0; }
  .brand-logo { height: 40px; }
  .brand-nav { gap: 4px; font-size: 0.92rem; letter-spacing: 0.02em; }
  .user-chip--compact { gap: 4px; }
  .staff-badge { padding: 3px 8px; font-size: 0.8rem; }
  .user-chip--compact .btn-small { padding: 4px 8px; font-size: 0.72rem; }
  .stat-grid { gap: 8px; }
}

/* Khối top (video Vimeo 3:1): sát mép trên, không khung, thẳng hàng header — 16/9/2026 */
.global-top-block { padding: 0; }
.global-top-block-card { padding: 0; border: 0; border-radius: 0; background: transparent; }
.global-top-block .presentation-block { border-radius: 0; }
.global-top-block .presentation-media { aspect-ratio: 3 / 1; min-height: 0; }

/* Bỏ khe hở trên nội dung chính (header đã có khoảng cách) — 16/9/2026 */
.site-main { padding-top: 0; }

/* Nút bật/tắt tiếng video Vimeo trong khối trình diễn — 16/9/2026 */
.vimeo-sound-btn { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 36px; height: 36px; padding: 0; border: 1px solid rgb(255 255 255 / 35%); border-radius: 50%; background: rgb(0 0 0 / 55%); color: #fff; font-size: 17px; line-height: 34px; text-align: center; cursor: pointer; }
.vimeo-sound-btn:hover, .vimeo-sound-btn:focus-visible { background: rgb(0 0 0 / 80%); border-color: var(--color-primary); outline: none; }
main.page.site-main { padding-top: 0; } /* đè main.page { padding-top: 28px } */

/* Hộp thoại nhân viên tự đổi mật khẩu (nút 🔑 cạnh Log Out) — 16/9/2026 */
.change-password-dialog .global-popup-dialog { width: min(360px, 92vw); padding: 22px; }
.change-password-dialog .login-card-title { margin-bottom: 12px; }
.change-password-dialog .global-popup-close { display: none; } /* đã có nút Huỷ; dấu × chung đè lên ô nhập */

/* 🔑 + Log Out cùng một hàng trong khung tài khoản (chip xếp cột) — 16/9/2026 */
.user-chip-actions { display: flex; align-items: center; gap: 6px; }
/* Đệm trên/dưới logo trong header giảm một nửa (20→10px; mobile 14→7px) — 16/9/2026 */
.topbar-inner { padding: 10px 0; }
@media (max-width: 640px) { .topbar-inner { padding: 7px 0; } }

/* Khe 14px giua thanh tab (nhan vien/admin) va noi dung — 16/9/2026 */
.tab-bar-wrap { margin-bottom: 14px; }

/* Bo lop phu den mo ben trai video khoi top (khong co chu de len) — 16/9/2026 */
.global-top-block .presentation-shade { display: none; }

/* Hộp thoại "Phiên đăng nhập đã kết thúc!" (thay alert trình duyệt) — 16/9/2026 */
.phien-mat-dialog .global-popup-dialog { width: min(340px, 92vw); padding: 22px; text-align: center; }
.phien-mat-dialog .login-card-title { text-align: center; margin-bottom: 10px; }
.phien-mat-dialog .phien-mat-text { margin: 0 0 16px; text-align: center; }