/* ── Base ─────────────────────────────────────────────────────────── */
body { background: #f0f2f7; font-size: 15px; margin: 0; padding: 0; }

.view { display: none; }
.view.active {
  display: block; position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: #f0f2f7; z-index: 10; overflow-y: auto;
}
#viewLowRate.active,
#viewAlreadyRated.active,
#viewQrCodes.active {
  display: flex; align-items: center; justify-content: center;
}
/* Canh top thay vì center để bàn phím ảo trên tablet/mobile không che nút
   Đăng nhập / Xác nhận khi focus vào ô nhập PIN. */
#viewPin.active,
#viewRatePinAuth.active {
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 40px;
}
#viewRate.active {
  display: flex; align-items: center; justify-content: center;
  background: #fff; overflow: hidden;
}

/* ── Top bar ──────────────────────────────────────────────────────── */
.topbar {
  background: #fff;
  border-bottom: 1px solid #dee2e6;
  min-height: 52px;
}
/* Gộp topbar + hàng tìm kiếm thành 1 khối đứng yên phía trên vùng scroll của
   danh sách bill, để cả 2 không bị cuộn mất khi lướt danh sách. Dùng flexbox
   (header flex-shrink:0 + vùng scroll flex:1/min-height:0) thay vì
   position:sticky — sticky từng để lại 2 lỗi trên tablet: header vẫn cuộn
   theo trên vài WebView cũ, và bill cuối cùng bị che khuất một phần do vùng
   scroll không được giới hạn chiều cao rõ ràng (cùng cách đã sửa ổn định cho
   CsWebApp). */
#viewList.active { display: flex; flex-direction: column; overflow: hidden; }
.viewlist-sticky-header { flex-shrink: 0; background: #fff; }
.bill-search-row { background: #fff; border-bottom: 1px solid #dee2e6; }

/* ── Auth / form cards: fluid width thay vì px cố định ──────────────── */
.auth-card { width: 380px; max-width: 92vw; }
.form-card { width: 480px; max-width: 92vw; }

#pinHotline { font-size: 15px; }
.pin-hotline-number { font-size: 20px; font-weight: 700; color: #0d6efd; }
.pin-logo { width: 50%; height: auto; margin-top: 14px; margin-bottom: 14px; }
.pin-version {
  position: fixed; bottom: 10px; left: 0; right: 0; text-align: center;
  font-size: 12px; font-style: italic; color: #adb5bd;
}
#pinBranchName { font-size: 20px; }

/* ── Show/hide password icon ─────────────────────────────────────── */
.btn-toggle-password {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #6c757d;
  padding: 4px 8px; cursor: pointer; font-size: 20px; line-height: 1;
}
.btn-toggle-password:hover { color: #0d6efd; }

/* ── Hotline chip ─────────────────────────────────────────────────── */
.hotline-chip {
  display: flex; align-items: center; gap: 6px;
  background: #e8f5e9; border: 1px solid #a5d6a7;
  border-radius: 20px; padding: 4px 14px;
  font-size: 13px; font-weight: 600; color: #1b5e20;
}

/* ── Top bar: my stats (1 dòng) + tên user ──────────────────────────── */
.topbar-stats {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; color: #495057; white-space: nowrap;
}
.topbar-stats b { font-size: 15px; font-weight: 700; margin-right: 2px; }
.topbar-stats b.bad  { color: #A32D2D; }
.topbar-stats b.good { color: #0F6E56; }
.topbar-stats b.stat-month { font-weight: 900; margin-right: 6px; }
.topbar-stats .stat-sep { margin: 0 2px; color: #ced4da; }
.stat-icon { font-size: 15px; -webkit-text-stroke: .3px currentColor; }
.stat-icon.bad  { color: #A32D2D; }
.stat-icon.good { color: #0F6E56; }
.top-staff-name {
  font-size: .875rem; font-weight: 600; color: #212529;
  padding: .25rem .5rem;
}
.top-staff-name.admin {
  cursor: pointer; border-radius: 20px;
  background: #f0f4ff; border: 1px solid #d0deff;
}
.top-staff-name.admin:hover { background: #e2eaff; }
.role-icon-staff { color: #6c757d; }
.role-icon-admin { color: #0d6efd; }


/* ── Bill area ────────────────────────────────────────────────────── */
.bill-area { padding-top: 16px; flex: 1; min-height: 0; overflow-y: auto; }

/* ── Order card ───────────────────────────────────────────────────── */
.order-card {
  cursor: pointer; border-left: 4px solid #dee2e6;
  transition: box-shadow .2s, transform .1s;
}
.order-card.open   { border-left-color: #198754; background: #f3fff9; }
.order-card.closed { border-left-color: #343a40; }
.order-card:active { transform: scale(.98); }
.order-card:hover  { box-shadow: 0 4px 16px rgba(0,0,0,.12); }

/* ── Table badge (số bàn) ─────────────────────────────────────────── */
.table-badge {
  font-size: 15px; font-weight: 700; padding: 4px 12px;
  border-radius: 6px; display: inline-block;
}
.table-badge.dinein  { background: #fff3cd; color: #7a5800; }
.table-badge.takeout { background: #d9d9d9; color: #495057; }
.table-badge-lg { font-size: 18px; padding: 8px 18px; border-radius: 8px; }

/* ── Amount badge (số tiền) — đi kèm table-badge ở view danh sách bill và
   chi tiết bill, cùng hình dạng nhưng màu riêng để phân biệt ────────── */
.amount-badge {
  font-size: 15px; font-weight: 700; padding: 4px 12px;
  border-radius: 6px; display: inline-block;
  background: #e7f5ec; color: #146c43;
}
.amount-badge-lg { font-size: 18px; padding: 8px 18px; border-radius: 8px; }

/* ── Detail layout ────────────────────────────────────────────────── */
.layout-detail {
  display: grid; grid-template-columns: 1fr 2fr;
  height: 100vh; overflow: hidden;
}
.detail-sidebar {
  background: #fff; border-right: 1px solid #dee2e6;
  overflow-y: auto; height: 100vh;
}
.detail-main { overflow-y: auto; height: 100vh; }

/* Đẩy khối nút đánh giá xuống cuối cột trái khi còn dư chiều cao (layout 2 cột) */
#rateBox { margin-top: auto; }
/* Chữ trong 2 nút đánh giá nhỏ lại, nằm giữa cỡ chữ hiện tại (btn-lg) và nút Danh sách */
#rateBox .btn-lg { font-size: 18px; }

/* Nút "Không có đánh giá": viền + chữ xám đậm, hover đảo màu nền/chữ */
.btn-no-rating {
  border: 1px solid #495057; color: #495057; background-color: transparent;
}
.btn-no-rating:hover, .btn-no-rating:focus, .btn-no-rating:active {
  background-color: #495057; color: #fff;
}

/* ── Bảng chi tiết món (hiện đại, gọn) ────────────────────────────── */
.item-table-card { border: 1px solid #e9ecef; border-radius: 10px; overflow: hidden; }
.item-table thead th {
  background: #f8f9fa; text-transform: uppercase; font-size: 11px;
  color: #6c757d; letter-spacing: .4px; border-bottom: 2px solid #dee2e6;
  font-weight: 600; padding: 8px 12px;
}
.item-table td { font-size: 13px; padding: 7px 12px; vertical-align: middle; }

/* ── Stars ────────────────────────────────────────────────────────── */
/* margin: top 32px (không đổi) / bottom 64px (x2 khoảng cách cũ 32px) —
   khoảng cách riêng giữa hàng sao và nút OK bên dưới */
.stars-wrap { display: flex; justify-content: center; gap: 16px; margin: 32px 0 64px; }
.star-btn {
  font-size: 80px; color: #ddd; background: none; border: none;
  cursor: pointer; transition: color .15s; line-height: 1; padding: 0;
}
.star-btn.active, .star-btn:hover { color: #ffc107; }
/* Chọn 1-3 sao (rate xấu, xem badThreshold): sao đã chọn chuyển màu đỏ
   thay vì vàng, để báo hiệu ngay cả trước khi bấm OK */
.stars-wrap.stars-bad .star-btn.active { color: #A32D2D; }

/* ── Rate info bar ────────────────────────────────────────────────── */
.rate-info-bar {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.rate-info-bar .info-chip {
  background: #f0f4ff; border: 1px solid #d0deff;
  border-radius: 20px; padding: 6px 16px;
  font-size: 14px; font-weight: 500; color: #1a3a7c;
  display: flex; align-items: center; gap: 6px;
}
.staff-serving-label {
  font-size: 12px; font-weight: 600; color: #adb5bd;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px;
}
.rate-info-bar .info-chip.staff {
  background: #0d6efd; border-color: #0d6efd; color: #fff;
  font-size: 17px; font-weight: 700; padding: 8px 22px;
}

/* ── Fullscreen views ─────────────────────────────────────────────── */
.fullscreen-view { position: relative; }
.fullscreen-view img {
  width: 100vw; height: 100vh;
  object-fit: cover; object-position: center; display: block;
}
#viewThank.active, #viewSorry.active { padding: 0; overflow: hidden; }
/* Không có ảnh nền riêng cho mobile ở view thank-you nữa, dùng màu nền thay thế */
#viewThank { background: #fff2e5; }
#viewSorry { background: #fdebda; }
.close-overlay { position: fixed; top: 24px; right: 24px; z-index: 99; }

/* Ảnh sorry: scale theo đúng full chiều rộng (không crop kiểu cover), giữ
   nguyên tỉ lệ ảnh gốc (height: auto) rồi ghim đáy — phần dư ra phía trên
   (nếu ảnh theo tỉ lệ này cao hơn viewport) bị ẩn nhờ overflow:hidden của
   #viewSorry.active ở trên, không co giãn biến dạng ảnh. */
#viewSorry img {
  width: 100%; height: auto; object-fit: contain;
  position: absolute; left: 0; bottom: 0; top: auto;
}

/* ── Ảnh thank-you/sorry riêng cho ngang (tablet) và dọc (mobile) ──── */
.fullscreen-view img.img-portrait  { display: none; }
.fullscreen-view img.img-landscape { display: block; }
@media (orientation: portrait) {
  .fullscreen-view img.img-portrait  { display: block; }
  .fullscreen-view img.img-landscape { display: none; }
}

/* ── Overlay thông tin + QR đè lên ảnh thank-you: xếp dọc, canh giữa,
   giống layout của view 5 ngôi sao (viewRate) thay vì ghim góc ──────── */
.thank-overlay {
  position: absolute; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 90px 24px 24px; overflow-y: auto; box-sizing: border-box;
}
/* flex-wrap: nowrap để số bill và số tiền luôn nằm chung 1 dòng, kể cả
   trên mobile màn hình nhỏ — tên chi nhánh và tên nhân viên mỗi cái đứng
   riêng 1 dòng (.thank-chip solo bên ngoài, không bọc trong row này) */
.thank-info-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: nowrap; width: 100%;
}
.thank-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid #5e0708; border-radius: 999px;
  padding: 5px 18px; background: rgba(255,255,255,.85);
  color: #5e0708; font-size: 14px; font-weight: 600;
}
.thank-chip-staff { font-size: 18px; font-weight: 700; }
/* QR: căn giữa-giữa (mặc định canh giữa của .thank-overlay) */
.thank-qr-row { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; width: 100%; }
/* padding 8px (thay vì 12px/16px) để 2 khung QR luôn nằm chung 1 dòng,
   kể cả trên mobile màn hình nhỏ */
.thank-qr-item {
  background: #fff; border-radius: 14px; padding: 8px; min-width: 150px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.thank-qr-item img { width: 130px; height: 130px; min-width: 130px; min-height: 130px; object-fit: contain; }
.thank-qr-item span { font-size: 13px; font-weight: 600; color: #343a40; line-height: 1.3; text-align: center; }
/* Câu cảm ơn: không nền, 2 dòng VN/EN dùng màu giống .sorry-message hiện
   tại (VN: #212529, EN: #5e0808) thay vì 1 màu đỏ đô chung như trước */
.thank-message {
  font-size: 14px; font-weight: 700; text-align: center;
  width: 100%;
}
.thank-message div + div { margin-top: 6px; }
.thank-message .thank-message-vi { color: #212529; }
.thank-message .thank-message-en { color: #5e0808; }

/* Khung overlay chứa câu xin lỗi — chỉ làm nền định vị (position context)
   cho .sorry-message tự định vị bằng position:absolute bên trong. */
.sorry-overlay { position: absolute; inset: 0; z-index: 20; }

/* Câu xin lỗi ở view sorry: có nền trắng mờ + bo góc để đọc được rõ dù
   ảnh sorry.jpg của từng chi nhánh nền màu gì cũng không rành trước được
   (khác thank-message vốn thiết kế sẵn 1 vùng nền sáng riêng cho chữ).
   Luôn canh giữa cả ngang lẫn dọc màn hình (mọi kích thước màn hình) —
   chỉ khác nhau ở width: PC 30% viewport, tablet/mobile 80% viewport.
   Ngưỡng 1024px để bắt được cả tablet ở chiều ngang (landscape) lẫn dọc
   (portrait), chỉ màn hình PC/laptop mới còn lại ở mức 30%. */
.sorry-message {
  color: #212529; font-size: 18px; font-weight: 600; text-align: center;
  line-height: 1.5;
  background: rgba(255,255,255,.9); border-radius: 16px; padding: 20px 28px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  box-sizing: border-box;
  position: absolute;
  width: 30vw; left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.sorry-message div + div { margin-top: 12px; }
/* Câu tiếng Anh: in nghiêng, màu riêng để phân biệt với câu tiếng Việt */
.sorry-message .sorry-en { font-style: italic; color: #5e0808; }
@media (max-width: 1024px) {
  .sorry-message { width: 80vw; top: 40%; }
}

/* ── Staff management ─────────────────────────────────────────────── */
#staffList table code {
  background: #f1f3f5; padding: 2px 8px; border-radius: 4px; font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════
   PORTRAIT — tablet dựng đứng: xếp chồng sidebar/main, thu nhỏ vừa
   chiều ngang hẹp hơn thay vì layout 2 cột kiểu landscape.
   ════════════════════════════════════════════════════════════════ */
@media (orientation: portrait) {
  /* Chi tiết đơn: bỏ layout 2 cột, xếp dọc sidebar rồi tới danh sách món,
     cuộn theo trang thay vì 2 vùng cuộn lồng nhau. */
  .layout-detail {
    grid-template-columns: 1fr;
    height: auto;
  }
  .detail-sidebar {
    height: auto; overflow: visible;
    border-right: none; border-bottom: 1px solid #dee2e6;
  }
  .detail-main { height: auto; overflow: visible; }

  /* Top bar: cho phép xuống dòng thay vì bóp méo/tràn ngang */
  .topbar {
    flex-wrap: wrap; row-gap: 8px; min-height: auto;
  }
  .topbar-stats { font-size: 12px; }
  .topbar-stats b { font-size: 13px; }

  /* Ngôi sao đánh giá: co giãn theo chiều rộng màn hình dọc — margin-bottom
     x2 (24px -> 48px) giống bản desktop, chỉ đổi khoảng cách sao-tới-nút-OK */
  .stars-wrap { gap: 4vw; margin: 24px 0 48px; }
  .star-btn { font-size: clamp(48px, 13vw, 80px); }

  .rate-info-bar .info-chip.staff { font-size: 15px; padding: 7px 18px; }
}