/* Cho trình duyệt tự crossfade mượt giữa 2 trang thật (khác file .php),
   giúp hết chớp trắng khi bấm chuyển trang. Trình duyệt không hỗ trợ
   (Safari cũ, Firefox...) sẽ tự bỏ qua dòng này, không lỗi gì cả. */
@view-transition {
  navigation: auto;
}

:root {
  --bg: #F7F5F5;
  --card: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #6E6E6E;
  --primary: #A61C2E;
  --primary-dark: #7A0E1F;
  --accent: #A61C2E;
  --accent-soft: #F6DCE0;
  --teal: #1A1A1A;
  --danger: #A61C2E;
  --line: #E7E2E2;
  --radius: 18px;
  --shadow: 0 8px 24px rgba(20, 15, 15, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { -webkit-tap-highlight-color: transparent; }

a { color: inherit; text-decoration: none; }

.app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  animation: appEnter .18s cubic-bezier(.32,.72,0,1) both;
  will-change: opacity, transform;
}

@keyframes appEnter {
  from { opacity: 0; transform: translateY(6px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.app.page-leave {
  animation: none;
  opacity: 0;
  transform: translateY(-4px) scale(.995);
  transition: opacity .1s cubic-bezier(.32,.72,0,1), transform .1s cubic-bezier(.32,.72,0,1);
}

/* ---------- Header ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--primary);
  color: #fff;
  padding: 22px 20px 26px;
  padding-top: calc(22px + env(safe-area-inset-top));
  box-shadow: var(--shadow);
}

.topbar.topbar-home {
  text-align: center;
  padding: 18px 20px 16px;
  padding-top: calc(18px + env(safe-area-inset-top));
}
.topbar.topbar-home h1 {
  font-size: 16px;
  letter-spacing: .02em;
}
.topbar.topbar-home .sub {
  font-size: 12px;
  margin-top: 3px;
}

.topbar.topbar-title-center h1,
.topbar.topbar-title-center .sub {
  text-align: center;
}

.topbar.topbar-compact {
  padding: 14px 20px 12px;
  padding-top: calc(14px + env(safe-area-inset-top));
}
.topbar.topbar-compact h1 {
  font-size: 18px;
}
.topbar.topbar-compact .sub {
  font-size: 12px;
  margin-top: 3px;
}

.topbar .eyebrow {
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .75;
  margin: 0 0 4px;
}

.topbar h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.topbar .sub {
  margin-top: 6px;
  font-size: 13.5px;
  opacity: .85;
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.icon-btn:active { background: rgba(255,255,255,.28); transform: scale(.9); }

/* ---------- Room grid (icon iPhone-style) ---------- */
.room-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 12px;
  padding: 40px 22px 4px;
}

.room-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.room-icon {
  width: 100%;
  max-width: 84px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  border-radius: 26%;
  background: linear-gradient(150deg, #C22138 0%, #7A0E1F 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 12px rgba(122,14,31,.30);
  position: relative;
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), filter .12s ease;
}
.room-icon-wrap:active .room-icon,
.room-icon:active {
  transform: scale(.90);
  filter: brightness(.78);
}

.room-icon .num {
  color: #fff;
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
}

.room-icon .badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  background: #22A559;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.doc-icon-text {
  color: #fff;
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  text-align: center;
  letter-spacing: .01em;
}

.room-label {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
  white-space: normal;
}

/* Khung viền tròn bao quanh số ngày ký hợp đồng (VD "01") dưới mỗi icon phòng */
.day-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 6px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  background: #fff;
}

/* Đúng hôm nay là ngày ký hợp đồng của phòng -> icon đổi màu cam để nhắc nhở.
   Qua ngày thì lần tải trang kế tiếp sẽ tự so sánh lại và trả về màu đỏ bình thường. */
.room-icon.due-today {
  background: linear-gradient(150deg, #FF7A1A 0%, #C2410C 100%);
  box-shadow: 0 6px 12px rgba(194, 65, 12, .40);
}

.room-icon-spacer {
  visibility: hidden;
}

.legend {
  margin: 10px 22px 0;
  padding: 9px 12px;
  background: var(--card);
  border-radius: 12px;
  font-size: 11px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.legend .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
}

/* ---------- Room detail ---------- */
.content { padding: 20px; }

.month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--card);
  border-radius: var(--radius);
  padding: 10px 8px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

.month-nav .nav-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: none;
  background: var(--bg);
  color: var(--primary);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.month-nav .nav-btn:active { transform: scale(.88); background: var(--line); }
.month-nav .nav-btn:disabled { opacity: .35; }
.month-nav .nav-btn.disabled-link { opacity: .35; pointer-events: none; }

.month-nav .month-label {
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}
.month-nav .month-label .year-small {
  display: block;
  font-size: 11.5px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: 2px;
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

.card h2 {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--ink-soft);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.info-row:last-child { border-bottom: none; }
/* Dòng ngay trước "Tổng cộng" (có thể là Phí dịch vụ hoặc Ghi chú tuỳ trường hợp) không cần viền
   dưới riêng nữa, vì .total đã có viền đứt phía trên rồi - tránh bị dư 2 đường kẻ sát nhau. */
.info-row:has(+ .info-row.total) { border-bottom: none; }
.info-row .label { color: var(--ink-soft); }
.info-row .value { font-weight: 600; }

.elec-row .label { display: flex; flex-direction: column; gap: 3px; }
.elec-meta { font-size: 11.5px; color: #9AA7B4; font-weight: 500; }

.info-row.total {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 2px dashed var(--line);
  border-bottom: none;
  font-size: 17px;
}
.info-row.total .value { color: var(--accent); font-weight: 800; font-size: 20px; }

.empty-state {
  text-align: center;
  padding: 40px 12px;
  color: var(--ink-soft);
}
.empty-state .big-icon { font-size: 40px; margin-bottom: 10px; }

.fab-row {
  display: flex;
  gap: 12px;
}
.fab-row-spaced {
  margin-top: 14px;
}

.btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.96); opacity: .9; }

.btn-primary { background: var(--primary); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-outline { background: var(--card); color: var(--primary); border: 1.5px solid var(--line); }
.btn-danger { background: transparent; color: var(--danger); }

/* ---------- Form ---------- */
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input[type=text],
.field input[type=number],
.field textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  font-size: 15px;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
}
.field .suffix-wrap { position: relative; }
.field .suffix-wrap input { padding-right: 40px; }
.field .suffix-wrap .suffix {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  font-size: 13px;
}

/* ---------- Tiền điện ---------- */
.elec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.price-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.price-toggle-btn {
  flex: 1;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 0;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.price-toggle-btn:active { transform: scale(.96); }
.price-toggle-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.elec-result {
  background: var(--bg);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.elec-result strong { color: var(--primary-dark); font-size: 15px; margin-left: auto; }
.elec-warning {
  display: none;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--danger);
  font-weight: 600;
}
.field-hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ---------- Bộ đếm +/- (tiền nước, phí dịch vụ) ---------- */
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.step-btn {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 14px;
  border: none;
  background: var(--bg);
  color: var(--primary);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .1s ease;
}
.step-btn.plus { background: var(--primary); color: #fff; }
.step-btn:active { transform: scale(.94); }
.step-value {
  transition: color .12s ease;
  flex: 1;
  text-align: center;
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
}

.total-preview {
  background: var(--accent-soft);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  font-weight: 700;
}
.total-preview .value { color: var(--primary-dark); font-size: 19px; }

.form-actions { display: flex; gap: 12px; margin-top: 6px; }

.btn-delete-month {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 13px;
  background: transparent;
  border: none;
  color: #C22138;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border-radius: 12px;
  transition: background .15s ease;
}
.btn-delete-month:active { background: #FBEAEC; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  opacity: .9;
  font-size: 14px;
  font-weight: 600;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-dark);
  color: #fff;
  padding: 12px 20px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 50;
}

.confirm-box {
  background: #FBEAEC;
  border: 1.5px solid var(--accent);
  border-radius: 14px;
  padding: 14px;
  font-size: 13.5px;
  color: #7A0E1F;
  margin-bottom: 16px;
}

/* ============================================================
   HOÁ ĐƠN — viền góc màu mô phỏng theo mẫu thẻ VietQR, đổi tông đỏ
   ============================================================ */
.tap-hint {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.invoice-frame {
  position: relative;
  border-radius: 32px;
  padding: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), box-shadow .28s ease;
  /* Viền chỉ gồm đúng 3 tông đỏ, không còn màu trắng nào lộ ra */
  background: linear-gradient(135deg, #7A0E1F 0%, #A61C2E 55%, #F3B8C0 100%);
}
.invoice-frame:active {
  transform: scale(.96);
  transition: transform .1s ease;
}
.invoice-frame.tap-pop {
  animation: invoicePop .32s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes invoicePop {
  0%   { transform: scale(.96); }
  55%  { transform: scale(1.015); }
  100% { transform: scale(1); }
}
.invoice-frame.is-saving { box-shadow: 0 8px 24px rgba(166, 28, 46, 0.35); }

.invoice-frame .accent {
  position: absolute;
  z-index: 0;
  border-radius: 30px;
  transform: rotate(45deg);
}
/* góc trên-trái: đỏ đậm */
.invoice-frame .accent-tl {
  top: -58px;
  left: -58px;
  width: 150px;
  height: 150px;
  background: #7A0E1F;
}
/* dải góc trên-phải: đỏ nhạt */
.invoice-frame .accent-tr {
  top: -78px;
  right: -120px;
  width: 230px;
  height: 90px;
  background: #F3B8C0;
  border-radius: 26px;
}
/* góc dưới-trái: đỏ vừa */
.invoice-frame .accent-bl {
  bottom: -62px;
  left: -62px;
  width: 140px;
  height: 140px;
  background: #C22138;
}

.invoice-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 22px;
  padding: 20px 16px;
}

.invoice-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.invoice-title {
  position: relative;
  z-index: 1;
}
/* Logo đặt riêng, canh đúng giữa hoá đơn (không phụ thuộc độ dài chữ 2 bên) */
.invoice-logo-center {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.invoice-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: .02em;
  line-height: 1.35;
}
.invoice-title-month {
  color: var(--ink);
}
.invoice-brand {
  display: flex;
  align-items: center;
  text-align: right;
}
.invoice-logo-center .brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.invoice-brand .brand-name {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  text-align: right;
  letter-spacing: .02em;
}

.invoice-subtitle {
  color: var(--primary);
  font-weight: 800;
  font-size: 17px;
  margin: 14px 0 10px;
  letter-spacing: .01em;
  text-align: center;
}

.invoice-info {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;   /* căn theo đường chữ (baseline), luôn khớp hàng dù cỡ chữ 2 bên khác nhau */
  column-gap: 14px;
  row-gap: 3px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.tenant-label {
  font-size: 11px;
  color: var(--ink-soft);
}
.contract-label {
  font-size: 11px;
  color: var(--ink-soft);
  text-align: right;
}
.tenant-name {
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}

.invoice-payment {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.invoice-payment .pay-text { flex: 1; min-width: 0; }
.invoice-payment .pay-qr {
  flex-shrink: 0;
  width: 76px;
}
.invoice-payment .pay-qr img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
}

.invoice-divider {
  border-top: 2px dotted #DCD6D6;
  margin: 12px 0;
}

.invoice-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 10.5px;
}
.invoice-table th {
  text-align: left;
  color: var(--ink-soft);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .01em;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
}
.invoice-table td {
  padding: 7px 3px 7px 0;
  border-bottom: 1px dashed var(--line);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
}
.invoice-table td:first-child, .invoice-table th:first-child {
  padding-right: 4px;
  white-space: normal;    /* tên khoản mục dài (VD "Tiền rác, wifi") được tự xuống dòng thay vì bị cắt chữ */
  overflow: visible;
  line-height: 1.25;
}
.invoice-table td:last-child, .invoice-table th:last-child { padding-right: 0; }
.invoice-table th:nth-child(2), .invoice-table td:nth-child(2) { text-align: center; }
.invoice-table th:nth-child(3), .invoice-table td:nth-child(3),
.invoice-table th:nth-child(4), .invoice-table td:nth-child(4) { text-align: right; }
.invoice-table tbody tr:last-child td { border-bottom: 1.5px solid var(--line); }

.qty-sub {
  display: inline;
  font-size: 8.5px;
  font-weight: 400;
  color: var(--ink-soft);
  white-space: nowrap;
  margin-left: 1px;
}

/* Tổng cộng / Tổng tiền nằm trong cùng bảng, thẳng hàng với cột Thành tiền */
.invoice-table tfoot td {
  border-bottom: none;
  padding: 6px 0;
  color: var(--ink-soft);
  font-size: 12.5px;
}
.invoice-table tfoot .totals-row td:first-child {
  text-align: right;
  padding-right: 10px;
}
.invoice-table tfoot .totals-row td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
}
.invoice-table tfoot .grand-row td {
  padding-top: 10px;
  border-top: 2px dashed var(--line);
}
.invoice-table tfoot .grand-row td:first-child {
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}
.invoice-table tfoot .grand-row td:last-child {
  font-weight: 900;
  font-size: 19px;
  color: var(--primary);
}

.invoice-section-title {
  color: var(--primary);
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 6px;
}
.invoice-section { margin-bottom: 2px; }
.invoice-section p {
  margin: 1px 0;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.5;
}

.invoice-footer-brand {
  text-align: right;
  font-weight: 800;
  color: var(--primary);
  font-size: 12.5px;
  margin-top: 12px;
}

/* ============================================================
   GIẤY TỜ / HỒ SƠ TỪNG PHÒNG
   ============================================================ */
.upload-hint {
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 8px 0 0;
  min-height: 16px;
}

.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
}

.doc-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--card);
  opacity: 1;
  transform: scale(1);
  transition: opacity .2s cubic-bezier(.32,.72,0,1), transform .2s cubic-bezier(.32,.72,0,1);
}
.doc-thumb-new {
  opacity: 0;
  transform: scale(.82);
}
.doc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.doc-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s ease;
}
.doc-delete:active { transform: scale(.85); }

/* ============================================================
   LỚP PHỦ XEM TRƯỚC / LƯU ẢNH HOÁ ĐƠN (dự phòng cho Safari iPhone)
   ============================================================ */
.img-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 10, .65);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  transition: opacity .2s ease;
}
.img-preview-overlay.show {
  display: flex;
  opacity: 1;
}

/* ============================================================
   MODAL XÁC NHẬN XOÁ (thay cho confirm() mặc định của trình duyệt)
   ============================================================ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 10, .55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  transition: opacity .18s ease;
  padding: 24px;
}
.confirm-overlay.show {
  display: flex;
  opacity: 1;
}
.confirm-box {
  width: 100%;
  max-width: 300px;
  background: var(--card);
  border-radius: 20px;
  padding: 26px 22px 20px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.25);
  border-top: 4px solid var(--primary);
}
.confirm-icon {
  font-size: 30px;
  margin-bottom: 10px;
}
.confirm-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary-dark);
  letter-spacing: .01em;
  line-height: 1.4;
  margin-bottom: 20px;
}
.confirm-actions {
  display: flex;
  gap: 10px;
}
.confirm-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.confirm-btn-cancel {
  background: var(--line);
  color: var(--ink);
}
.confirm-btn-cancel:active { background: #DAD5D5; }
.confirm-btn-danger {
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
}
.confirm-btn-danger:active { filter: brightness(.9); }
.img-preview-box {
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border-radius: 24px 24px 0 0;
  padding: 18px 18px 28px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
}
.brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-icon img {
    width: 38px;      /* chỉnh logo */
    height: 38px;
    object-fit: contain;
    display: block;
}
.img-preview-hint {
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 12px;
  line-height: 1.5;
}
.img-preview-box img {
  width: 100%;
  border-radius: 14px;
  display: block;
  box-shadow: var(--shadow);
}