/**
 * Bảng định kiểu giao diện (Stylesheet) chuẩn 100% theo Bộ Thiết Kế CX 10 Màn Hình
 * Dự án: Chợ Xe Đạp Hàn Quốc — Daangn Toàn Quốc (01..10 Screens)
 */

:root {
  --bg-page: #f8fafc;
  --bg-surface: #ffffff;
  --bg-header: #0c1324;
  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --daangn-orange: #ff6f0f;
  --daangn-orange-hover: #ea580c;
  --daangn-orange-soft: #fff7ed;
  --emerald: #059669;
  --emerald-soft: #ecfdf5;
  --emerald-border: #a7f3d0;
  --blue: #1d4ed8;
  --blue-soft: #eff6ff;
  --blue-border: #bfdbfe;
  --amber-soft: #fffbeb;
  --amber-border: #fde68a;
  --amber-text: #92400e;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 8px 22px rgba(15, 23, 42, 0.09);
  --shadow-modal: 0 20px 50px rgba(15, 23, 42, 0.22);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-main);
  line-height: 1.5;
  font-size: 14px;
  min-height: 100vh;
}

.hidden {
  display: none !important;
}

/* ==================== MÀN HÌNH 01: TOP HEADER ==================== */
.top-header {
  background: var(--bg-header);
  color: #ffffff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid #1e293b;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff7e29 0%, #f95900 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(255, 111, 15, 0.3);
  flex-shrink: 0;
}

.brand-title-row {
  min-width: 0;
}

.brand-title-row h1 {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-subtitle {
  font-size: 11.5px;
  color: #94a3b8;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #34d399;
  background: #112e28;
  border: 1px solid #1b4d3e;
  padding: 4px 10px;
  border-radius: 99px;
  margin-left: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseAnim 1.8s infinite;
}

@keyframes pulseAnim {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-header-inbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #182238;
  color: #f8fafc;
  border: 1px solid #2d3b55;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.btn-header-inbox:hover {
  background: #23304d;
}

.badge-red-pill {
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
  min-width: 22px;
  text-align: center;
}

.btn-header-accounts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--daangn-orange);
  color: #ffffff;
  border: none;
  padding: 7px 13px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn-header-accounts:hover {
  background: var(--daangn-orange-hover);
}

.badge-orange-pill {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 99px;
}

/* Badge "Tài khoản QR" khi mất kết nối / phiên hết hạn: đổi sang nền đỏ cảnh báo */
.badge-orange-pill.badge-conn-bad {
  background: #fee2e2;
  color: #b91c1c;
}

/* Ẩn vòng tròn avatar phụ vì đã có thẻ hồ sơ activeAccountHeaderPill hiển thị trực quan */
.user-avatar-circle {
  display: none;
}

/* ==================== BỐ CỤC CHÍNH (SIDEBAR TRÁI + MAIN CONTENT) ==================== */
.workspace-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: calc(100vh - 60px);
  align-items: stretch;
}

/* CỘT TRÁI: SIDEBAR CHỌN KHU VỰC */
.sidebar-radar {
  background: #ffffff;
  border-right: 1px solid var(--border-color);
  padding: 16px;
}

.sidebar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.sidebar-title-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sidebar-title-row h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
}

.btn-toggle-sidebar-extras,
.btn-mobile-map-toggle {
  display: none;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}

.sidebar-primary-selects,
.sidebar-selects-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.sidebar-primary-selects .form-group,
.sidebar-selects-grid .form-group {
  margin-bottom: 0;
}

.mode-switch-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.mode-btn {
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.mode-btn.active {
  background: var(--daangn-orange);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(255, 111, 15, 0.28);
}

/* Bản đồ Hàn Quốc sáng màu theo thiết kế CX */
.korea-map-box {
  background: linear-gradient(180deg, #dbeafe 0%, #e0f2fe 100%);
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 6px;
  margin-bottom: 14px;
  overflow: hidden;
}

#koreaRadarSvg {
  width: 100%;
  height: 215px;
  display: block;
}

.kr-landmass {
  fill: #f8fafc;
  stroke: #cbd5e1;
  stroke-width: 1.4;
}

.svg-hub-node {
  cursor: pointer;
}

.svg-hub-node:hover circle {
  r: 6.5px;
}

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 5px;
}

.form-select,
.form-input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-main);
  background: #ffffff;
  transition: border-color 0.15s;
}

.form-select:focus,
.form-input:focus {
  outline: none;
  border-color: var(--daangn-orange);
  box-shadow: 0 0 0 3px rgba(255, 111, 15, 0.12);
}

/* Hộp xanh dương nhạt: Dán link Daangn */
.quick-link-card {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  padding: 12px;
  margin-top: 14px;
  margin-bottom: 16px;
}

.quick-link-title {
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.45;
  margin-bottom: 8px;
}

.quick-link-title span {
  font-weight: 600;
  color: #1e293b;
}

.quick-link-row {
  display: flex;
  gap: 6px;
}

.quick-link-row .form-input {
  font-size: 12px;
  padding: 8px 10px;
  border-color: #cbd5e1;
}

.btn-blue-open {
  background: #1d4ed8;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0 13px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-blue-open:hover {
  background: #1e40af;
}

/* Các phường lân cận */
.nearby-section {
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
}

.nearby-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.nearby-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.nearby-count-text {
  font-size: 11px;
  color: var(--text-muted);
}

.nearby-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 155px;
  overflow-y: auto;
}

.nearby-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 99px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s;
}

.nearby-chip:hover,
.nearby-chip.active {
  background: var(--daangn-orange-soft);
  color: var(--daangn-orange);
  border-color: var(--daangn-orange);
}

/* ==================== CỘT PHẢI: MAIN CONTENT ==================== */
.main-content {
  padding: 22px 26px 40px;
  max-width: 1440px;
  min-width: 0;
}

.page-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.page-main-title {
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.page-main-subtitle {
  font-size: 13.5px;
  color: #64748b;
  margin-top: 2px;
}

/* Cụm hành động cạnh tiêu đề: luôn 1 hàng, không để nút âm thanh xuống dòng chồng lên chữ */
.page-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.btn-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 7px 12px;
  border-radius: 10px;
  transition: all 0.15s ease;
}

.btn-guide-link .guide-link-icon {
  flex-shrink: 0;
}

.btn-guide-link:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Mobile: thu gọn "Hướng dẫn sử dụng" thành nút tròn chỉ-icon, khớp cỡ với nút âm thanh */
@media (max-width: 640px) {
  .btn-guide-link {
    padding: 0;
    width: 36px;
    height: 36px;
    justify-content: center;
    border-radius: 50%;
  }
  .btn-guide-link .guide-link-text {
    display: none;
  }
}

/* Khung tìm kiếm & Bộ lọc */
.filter-panel {
  margin-bottom: 14px;
}

.search-bar-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-bottom: 12px;
}

.search-input-container {
  position: relative;
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 11px;
  padding: 0 10px 0 13px;
  height: 46px;
  min-width: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.search-input-container:focus-within {
  border-color: var(--daangn-orange);
  box-shadow: 0 0 0 3px rgba(255, 111, 15, 0.12);
}

.search-icon-prefix {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  margin-right: 10px;
  flex-shrink: 0;
}

.search-main-input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-main);
  background: transparent;
}

/* Nút xóa nhanh từ khóa tìm kiếm (✕) */
.btn-clear-keyword {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 6px;
  transition: all 0.15s ease;
}

.btn-clear-keyword:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* ==================== BẢNG GỢI Ý TÌM KIẾM & LỊCH SỬ TÌM KIẾM (RỘNG 100% THANH TÌM KIẾM, DỄ ĐỌC TRÊN ĐIỆN THOẠI) ==================== */
.search-suggest-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.18), 0 4px 14px rgba(15, 23, 42, 0.08);
  z-index: 1200;
  max-height: min(520px, 74vh);
  overflow-y: auto;
  padding: 12px 10px;
  -webkit-overflow-scrolling: touch;
}

.suggest-section-block + .suggest-section-block {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.suggest-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 8px;
}

.suggest-section-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.btn-clear-all-recent {
  background: transparent;
  border: none;
  color: #2563eb;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
}

.btn-clear-all-recent:hover {
  background: #eff6ff;
}

.suggest-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.suggest-item-row:hover,
.suggest-item-row.active {
  background: #f1f5f9;
}

.suggest-item-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.suggest-icon-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.suggest-icon-circle.recent-clock {
  background: #f1f5f9;
  color: #475569;
}

.suggest-icon-circle.brand-suggest {
  background: #fff7ed;
  color: var(--daangn-orange);
}

.suggest-item-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.suggest-item-title {
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.suggest-item-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
}

.suggest-new-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1877f2;
  display: inline-block;
  flex-shrink: 0;
}

.suggest-count-badge {
  color: #1877f2;
  font-weight: 600;
}

.suggest-ko-tag {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.btn-remove-recent {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.btn-remove-recent:hover {
  background: #e2e8f0;
  color: #0f172a;
}

/* Nút chuyển nhanh sang tab Nhắn tin người bán trên Mobile/Tablet (ẩn trên Desktop vì Desktop hiển thị 2 cột song song) */
.btn-mobile-switch-to-chat {
  display: none;
  width: 100%;
  min-height: 46px;
  margin: 12px 0 14px;
  padding: 10px 16px;
  background: var(--daangn-orange);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(255, 111, 15, 0.25);
  transition: background 0.15s ease;
}

.btn-mobile-switch-to-chat:hover {
  background: var(--daangn-orange-hover);
}

@media (max-width: 980px) {
  .btn-mobile-switch-to-chat {
    display: inline-flex;
  }
}

@media (max-width: 640px) {
  .search-suggest-dropdown {
    left: 0;
    right: 0;
    width: 100%;
    max-height: 75vh;
    padding: 12px 10px;
    border-radius: 16px;
  }
  .suggest-item-row {
    padding: 11px 10px;
    gap: 10px;
  }
  .suggest-item-title {
    font-size: 15px;
  }
  .suggest-item-sub {
    font-size: 13px;
  }
}

.btn-search-orange {
  background: var(--daangn-orange);
  color: #ffffff;
  border: none;
  border-radius: 11px;
  padding: 0 24px;
  height: 46px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s;
}

.btn-search-orange:hover {
  background: var(--daangn-orange-hover);
}

/* Category Pills */
.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.cat-pill {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cat-pill:hover {
  border-color: var(--daangn-orange);
  color: var(--daangn-orange);
}

.cat-pill.active {
  background: #fff7ed;
  border-color: #fdba74;
  color: var(--daangn-orange);
  font-weight: 700;
}

/* Hàng Dropdown & Checkbox */
.filter-controls-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-dropdowns-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-select-pill {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  font-family: inherit;
  cursor: pointer;
}

.checkbox-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-left: 4px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #059669;
  cursor: pointer;
}

.related-keywords-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.kw-tag {
  font-size: 11.5px;
  background: #ffffff;
  color: #475569;
  padding: 3px 9px;
  border-radius: 99px;
  cursor: pointer;
  border: 1px solid #e2e8f0;
}

.kw-tag:hover {
  border-color: var(--daangn-orange);
  color: var(--daangn-orange);
}

/* Thanh thông tin tóm tắt ngang (Summary Strip theo thiết kế CX) */
.summary-strip-bar {
  background: #eef4fb;
  border: 1px solid #dbe7f5;
  border-radius: 10px;
  padding: 7px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 8px;
  font-size: 12.5px;
  color: #1e293b;
}

.summary-strip-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.summary-strip-item strong {
  font-weight: 800;
  color: #0f172a;
}

/* Bảng tóm tắt khi chọn Tìm Toàn Quốc (Mặc định thu gọn 1 dòng gọn gàng, bấm mới mở thống kê chi tiết) */
.sweep-summary-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 7px 12px;
  margin-bottom: 12px;
}

.sweep-banner-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
}

.sweep-banner-title-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.sweep-dot-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--daangn-orange);
  flex-shrink: 0;
}

.sweep-banner-header h3 {
  font-size: 12.5px;
  font-weight: 800;
  color: #c2410c;
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

.sweep-summary-divider {
  color: #fdba74;
  font-weight: 700;
  flex-shrink: 0;
}

#sweepSummaryText {
  font-size: 12.5px;
  color: #9a3412;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.btn-toggle-sweep-regions {
  background: #ffffff;
  border: 1px solid #fdba74;
  color: #c2410c;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-toggle-sweep-regions:hover {
  background: #ffedd5;
  border-color: var(--daangn-orange);
}

.sweep-summary-banner:not(.expanded) .sweep-regions-grid {
  display: none;
}

.sweep-summary-banner.expanded .sweep-regions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #fed7aa;
}

.sweep-region-card {
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.sweep-region-card strong {
  color: #0f172a;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.sweep-region-card span {
  color: #059669;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ==================== LƯỚI THẺ XE ĐẠP (4 CỘT CHUẨN THIẾT KẾ CX) ==================== */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.bike-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  animation: cardFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  contain: content;
  content-visibility: auto;
  contain-intrinsic-size: 0 280px;
}

@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bike-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
  border-color: #cbd5e1;
}

.card-image-box {
  position: relative;
  height: 185px;
  border-radius: 10px;
  background: #f1f5f9;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 8px;
}

.card-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.bike-card:hover .card-image-box img {
  transform: scale(1.04);
}

/* Nút thả tim lưu yêu thích ở góc trên phải ảnh */
.card-fav-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.8);
  color: #475569;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: all 0.15s;
}

.card-fav-btn:hover,
.card-fav-btn.favorited {
  color: #ef4444;
  background: #ffffff;
  transform: scale(1.08);
}

/* Huy hiệu góc dưới trái ảnh: 직거래 · Bán trực tiếp */
.card-bottom-badge {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: #059669;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.card-bottom-badge .dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
}

.card-region-line {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-title-vi {
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 6px;
}

.card-title-vi:hover {
  color: var(--daangn-orange);
}

.card-footer-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
}

.price-krw-text {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--daangn-orange);
  margin-bottom: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-card-chat {
  margin-top: 0;
  width: auto;
  flex-shrink: 0;
  min-height: 32px;
  background: var(--daangn-orange);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.15s ease, transform 0.12s ease;
}

.btn-card-chat:hover {
  background: var(--daangn-orange-hover);
  transform: translateY(-1px);
}

/* ==================== MÀN HÌNH 08: TRẠNG THÁI KHÔNG CÓ KẾT QUẢ (EMPTY STATE) ==================== */
.empty-state-box {
  grid-column: 1 / -1;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 64px 24px;
  text-align: center;
}

.empty-icon-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff7ed;
  color: var(--daangn-orange);
  font-size: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.empty-state-box h3 {
  font-size: 19px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.empty-state-box p {
  font-size: 13.5px;
  color: #64748b;
  max-width: 440px;
  margin: 0 auto 20px;
  line-height: 1.6;
}

.empty-state-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-empty-primary {
  background: var(--daangn-orange);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-empty-outline {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

/* ==================== MÀN HÌNH 09: TRẠNG THÁI ĐANG TẢI (SKELETON LOADING) ==================== */
.loading-skeleton-wrapper {
  margin-bottom: 20px;
}

.loading-orange-banner {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #c2410c;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.spin-icon {
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.skeleton-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.skeleton-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sk-img {
  height: 180px;
  border-radius: 10px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

.sk-line {
  height: 12px;
  border-radius: 6px;
  background: #e2e8f0;
}

.sk-w60 { width: 60%; }
.sk-w85 { width: 85%; }
.sk-w45 { width: 45%; }

.sk-btn {
  height: 36px;
  border-radius: 9px;
  background: #ffedd5;
  margin-top: 4px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ==================== CỬA SỔ MODAL CHUNG ==================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.58);
  backdrop-filter: blur(3px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-container {
  background: #ffffff;
  border-radius: 18px;
  width: 100%;
  max-height: calc(100vh - 32px);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* Thanh Topbar sáng màu cho các Cửa sổ (Màn hình 02, 03, 04, 05) */
.split-modal-topbar {
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Thanh chuyển tab trên Mobile/Tablet cho cửa sổ Xem xe & Nhắn tin */
.mobile-modal-tabs {
  display: none;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 6px 12px;
  gap: 8px;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.mob-modal-tab {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}

.mob-modal-tab.active {
  background: var(--daangn-orange);
  border-color: var(--daangn-orange);
  color: #ffffff;
}

.split-back-title-btn {
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
}

.back-chevron {
  font-size: 22px;
  line-height: 1;
  color: #475569;
}

.split-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.status-pill-ready {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

.modal-close-light-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #475569;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.modal-close-light-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* ==================== MÀN HÌNH 02 & 10: XEM XE & NHẮN TIN TRỰC TIẾP (2 CỘT) ==================== */
.modal-container.modal-split-xl {
  max-width: 1280px;
  height: calc(100vh - 32px);
  max-height: 860px;
}

.modal-split-body {
  display: grid;
  grid-template-columns: 44% 56%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Cột trái: Thông tin xe */
.split-left-product {
  border-right: 1px solid #e2e8f0;
  padding: 16px 20px;
  overflow-y: auto;
  min-height: 0;
  background: #ffffff;
}

.main-image-wrap {
  position: relative;
  width: 100%;
  height: 280px;
  background: #0f172a;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}

.main-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(15, 23, 42, 0.62);
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.img-nav-btn:hover {
  background: rgba(15, 23, 42, 0.88);
}

.img-nav-btn.prev { left: 12px; }
.img-nav-btn.next { right: 12px; }

.image-counter-badge {
  position: absolute;
  bottom: 10px;
  right: 12px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 99px;
}

.thumb-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
}

.thumb-strip img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
}

.thumb-strip img.active {
  border-color: var(--daangn-orange);
}

.product-header-info-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.product-detail-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.price-krw {
  font-size: 22px;
  font-weight: 800;
  color: var(--daangn-orange);
  margin: 4px 0;
}

.product-region-time {
  font-size: 12.5px;
  color: #64748b;
}

.btn-outline-daangn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-outline-daangn:hover {
  background: #f8fafc;
}

.seller-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.seller-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.seller-avatar-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.content-block h4 {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 6px;
}

.content-text {
  font-family: inherit;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Cột phải: Khung Chat trực tiếp */
.split-right-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: #ffffff;
}

.chat-panel-header {
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.chat-seller-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-seller-name {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.chat-conn-status {
  font-size: 12px;
  color: #059669;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

.green-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-chat-info {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-chat-info:hover {
  background: #f8fafc;
}

.btn-chat-more {
  background: transparent;
  border: none;
  font-size: 16px;
  color: #64748b;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}

.btn-chat-more:hover {
  background: #f1f5f9;
}

/* Banner Xanh Lá Tự động chuyển vùng GPS (Gọn gàng 1 dải) */
.auto-gps-status-bar {
  margin: 8px 16px 0;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.gps-check-circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.auto-gps-status-bar strong {
  display: block;
  font-size: 12px;
  color: #065f46;
}

.auto-gps-sub {
  font-size: 11.5px;
  color: #047857;
  margin-top: 1px;
}

.auto-gps-sub strong {
  display: inline;
  font-weight: 800;
}

/* Ẩn banner lặp phía trên để dành tối đa diện tích cho khung tin nhắn, chỉ hiển thị thanh nhắc gọn phía dưới */
.session-expired-top-banner {
  display: none !important;
}

/* Luồng tin nhắn rộng rãi */
.live-chat-messages {
  flex: 1;
  min-height: 180px;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
}

.chat-date-divider {
  text-align: center;
  font-size: 11.5px;
  color: #94a3b8;
  margin: 4px 0;
}

.chat-msg-row-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.chat-msg-row-wrap.buyer-row {
  justify-content: flex-end;
}

.chat-msg-row-wrap.seller-row {
  justify-content: flex-start;
}

.msg-mini-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-msg-bubble {
  max-width: 74%;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.48;
  word-break: break-word;
}

.chat-msg-bubble.buyer {
  background: var(--daangn-orange);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.chat-msg-bubble.seller {
  background: #f1f5f9;
  color: #0f172a;
  border-bottom-left-radius: 4px;
}

.chat-msg-bubble.system {
  align-self: center;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  color: #475569;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 99px;
  text-align: center;
}

.msg-side-time {
  font-size: 11px;
  color: #94a3b8;
  flex-shrink: 0;
  margin-bottom: 2px;
}

/* Dải nút bấm Hỏi nhanh 1 chạm (Màu xanh dương nhạt chuẩn Màn hình 02 & 03) */
.chat-bottom-dock {
  border-top: 1px solid #f1f5f9;
  background: #ffffff;
  flex-shrink: 0;
}

.quick-replies-section {
  padding: 8px 16px 4px;
}

.quick-replies-label {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.quick-replies-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quick-reply-chip {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  padding: 5px 11px;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-reply-chip:hover {
  background: #1d4ed8;
  color: #ffffff;
  border-color: #1d4ed8;
}

/* Phím tắt "Xin chào": gửi ngay nên dùng màu cam Daangn để phân biệt với câu mẫu (chỉ điền) */
.quick-reply-chip-greeting {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

.quick-reply-chip-greeting:hover {
  background: var(--daangn-orange);
  border-color: var(--daangn-orange);
  color: #ffffff;
}

.quick-reply-chip-greeting:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* Khung nhập kiểu app Daangn: ＋ | ô nhập bo tròn tự giãn (có nút cảm xúc bên trong) | mũi tên gửi cam */
.live-chat-composer {
  padding: 8px 12px 12px;
}

.composer-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.composer-icon-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #868b94;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.composer-icon-btn:hover {
  background: #f2f3f6;
  color: #4d5159;
}

.composer-plus-btn svg {
  transition: transform 0.18s ease;
}

.composer-plus-btn.is-open svg {
  transform: rotate(45deg);
}

.composer-input-box {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  background: #f2f3f6;
  border: 1px solid transparent;
  border-radius: 21px;
  padding: 0 2px 0 16px;
  min-height: 42px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.composer-input-box:focus-within {
  background: #ffffff;
  border-color: #d1d3d8;
}

.composer-input-box textarea {
  flex: 1;
  min-width: 0;
  max-height: 120px;
  padding: 10px 0;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 20px;
  color: #212124;
  overflow-y: auto;
  overflow-wrap: anywhere;
}

.composer-input-box textarea::placeholder {
  color: #9ca0a8;
}

.composer-emoji-btn {
  width: 38px;
  height: 38px;
  margin: 1px 0;
}

.composer-emoji-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 40px);
  gap: 4px;
  padding: 8px;
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);
}

.composer-emoji-popover.hidden {
  display: none;
}

.composer-emoji-popover button {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}

.composer-emoji-popover button:hover {
  background: #f2f3f6;
}

.btn-send-orange {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--daangn-orange);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.btn-send-orange:hover:not(:disabled) {
  background: var(--daangn-orange-soft);
}

.btn-send-orange:active:not(:disabled) {
  transform: scale(0.9);
}

.btn-send-orange:disabled {
  color: #c4c7cc;
  cursor: default;
}

/* Thanh kết nối lại khi tài khoản tạm ngắt (Màn hình 10 - Gọn gàng 1 dòng) */
.session-expired-bottom-bar {
  margin: 4px 16px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: #92400e;
  font-size: 11.5px;
}

.session-expired-bottom-bar strong {
  display: inline;
  font-size: 12px;
  color: #b45309;
}

.btn-reconnect-compact {
  background: var(--daangn-orange);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.15s;
}

.btn-reconnect-compact:hover {
  background: var(--daangn-orange-hover);
}

/* ==================== MÀN HÌNH 03: HỘP THƯ ĐANG CHAT ==================== */
.modal-container.modal-inbox-xl {
  max-width: 1260px;
  height: calc(100vh - 32px);
  max-height: 820px;
}

.inbox-header-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.inbox-header-left h2 {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}

.inbox-subtitle {
  font-size: 13px;
  color: #64748b;
}

.chat-center-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.chat-rooms-sidebar {
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  overflow: hidden;
}

.inbox-sidebar-controls {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
}

.inbox-filter-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: #f1f5f9;
  padding: 3px;
  border-radius: 9px;
  margin-bottom: 10px;
}

.inbox-tab {
  border: none;
  background: transparent;
  padding: 6px 4px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
}

.inbox-tab.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.inbox-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  padding: 7px 11px;
}

.inbox-search-box input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 12.5px;
  font-family: inherit;
}

.chat-rooms-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-room-item {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  background: #ffffff;
  transition: all 0.15s;
}

.chat-room-item:hover,
.chat-room-item.active {
  background: #fff7ed;
  border-color: #fdba74;
}

.chat-room-item img {
  width: 54px;
  height: 54px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}

.chat-room-item h4 {
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.room-meta {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.chat-room-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
}

.inbox-room-topbar {
  padding: 12px 18px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.inbox-room-bike-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.inbox-room-bike-info img {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
}

/* ==================== MÀN HÌNH 04: QUẢN LÝ TÀI KHOẢN DAANGN & CHẾ ĐỘ 1 SĐT TOÀN QUỐC ==================== */
.modal-container.modal-accounts-lg {
  max-width: 860px;
  max-height: calc(100vh - 32px);
}

.accounts-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.accounts-icon {
  font-size: 20px;
  color: #0f172a;
}

.accounts-header-title h2 {
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
}

.accounts-subtitle {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.modal-body-clean {
  padding: 16px 20px 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Hộp Hero 1 SĐT Hàn Quốc dùng cho tất cả 17 Tỉnh/Thành */
.single-phone-nationwide-hero {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1.5px solid #fdba74;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 14px rgba(255, 111, 15, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.hero-mode-pill,
.single-phone-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--daangn-orange);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 99px;
}

.single-phone-nationwide-hero h3 {
  font-size: 16px;
  font-weight: 800;
  color: #9a3412;
  margin-bottom: 4px;
}

.single-phone-nationwide-hero p {
  font-size: 12.5px;
  color: #7c2d12;
  line-height: 1.5;
}

.hero-status-pill,
.single-phone-status-pill {
  background: #ffffff;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 99px;
  white-space: nowrap;
}

.hero-status-pill.connected,
.single-phone-status-pill.connected {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}

.hero-active-summary,
.single-phone-active-summary {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 8px 12px;
  margin-top: 8px;
  font-size: 12.5px;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-right-cta,
.single-phone-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.btn-hero-login-phone,
.btn-single-phone-primary {
  background: var(--daangn-orange);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-hero-login-phone:hover,
.btn-single-phone-primary:hover {
  background: var(--daangn-orange-hover);
}

.btn-hero-paste-token,
.btn-single-phone-secondary {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-hero-paste-token:hover,
.btn-single-phone-secondary:hover {
  background: #f8fafc;
}

.btn-hero-sync-chrome {
  background: #059669;
  color: #ffffff;
  border: 1px solid #047857;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-hero-sync-chrome:hover {
  background: #047857;
}

/* Thẻ Đồng bộ Phiên Web Chrome (Enni • 010-7241-6368) trong Modal Đăng nhập */
.chrome-profile-sync-card {
  width: 100%;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1.5px solid #34d399;
  border-radius: 11px;
  padding: 10px 12px;
  margin-bottom: 10px;
  text-align: left;
}

.chrome-sync-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.chrome-sync-badge {
  background: #059669;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 99px;
}

.chrome-sync-verified {
  font-size: 11px;
  font-weight: 700;
  color: #065f46;
}

.chrome-profile-sync-card p {
  font-size: 11.5px;
  color: #064e3b;
  line-height: 1.45;
  margin-bottom: 8px;
}

.btn-sync-chrome-green {
  width: 100%;
  background: #059669;
  color: #ffffff;
  border: none;
  border-radius: 9px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-sync-chrome-green:hover:not(:disabled) {
  background: #047857;
}

/* Accordion mở rộng danh sách nhiều trạm nâng cao */
.advanced-stations-details {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  overflow: hidden;
}

.advanced-stations-summary {
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  list-style: none;
  user-select: none;
}

.advanced-stations-summary::-webkit-details-marker {
  display: none;
}

.advanced-stations-summary:hover {
  background: #f1f5f9;
}

.advanced-hint {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--daangn-orange);
}

.accounts-pool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 12px 14px 14px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.account-qr-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

.account-card-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.account-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.station-num-box {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.account-card-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.conn-status-label {
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.conn-status-label.connected {
  color: #059669;
}

.conn-status-label.disconnected {
  color: #64748b;
}

/* ==================== MÀN HÌNH 05: CỬA SỔ ĐĂNG NHẬP SĐT HÀN QUỐC / TOKEN 2 CỘT ==================== */
.modal-container.modal-qr-2col {
  max-width: 820px;
  max-height: calc(100vh - 32px);
}

.global-phone-mode-bar {
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
  padding: 10px 20px;
  flex-shrink: 0;
}

.global-phone-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 12.5px;
  color: #7c2d12;
}

.global-phone-checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--daangn-orange);
  flex-shrink: 0;
  cursor: pointer;
}

.global-phone-checkbox-label strong {
  display: block;
  font-size: 13px;
  color: #9a3412;
}

.global-phone-checkbox-label span {
  display: block;
  font-size: 11.5px;
  color: #9a3412;
  opacity: 0.9;
}

.qr-modal-split-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 16px 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.qr-left-col h3,
.qr-right-col h3 {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
}

.qr-col-desc {
  font-size: 12px;
  color: #64748b;
  margin-bottom: 10px;
}

.qr-status-banner {
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  color: #047857;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.qr-steps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 14px;
}

.qr-step-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.step-num-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.qr-step-item strong {
  display: block;
  font-size: 13px;
  color: #0f172a;
}

.qr-step-item p {
  font-size: 12px;
  color: #64748b;
  margin-top: 1px;
}

.btn-refresh-qr-outline {
  width: 100%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  padding: 9px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-refresh-qr-outline:hover {
  background: #f8fafc;
}

.qr-modal-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 9px 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11.5px;
  color: #64748b;
  flex-shrink: 0;
}

/* ==================== SPINNER & TOAST ==================== */
.spinner {
  width: 36px;
  height: 36px;
  border: 3.5px solid #e2e8f0;
  border-top-color: var(--daangn-orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.error-box {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-weight: 600;
}

.toast-container {
  position: fixed;
  top: 72px;
  right: 22px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast-msg {
  background: #0f172a;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: var(--shadow-modal);
  border-left: 4px solid var(--daangn-orange);
  font-size: 13px;
  font-weight: 600;
  pointer-events: auto;
}

/* ==================== LUỒNG QUẢN LÝ HỒ SƠ & ĐĂNG NHẬP TÀI KHOẢN TƯỜNG MINH ==================== */
.active-account-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 11px;
  padding: 4px 10px 4px 6px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.active-account-profile-pill:hover {
  border-color: var(--daangn-orange);
  background: #fff7ed;
}

.active-account-pill-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.active-account-pill-name {
  font-size: 12px;
  font-weight: 800;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  display: inline-block;
  box-shadow: 0 0 0 2px #d1fae5;
}

.active-account-pill-region {
  font-size: 10.5px;
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
}

/* Bộ chuyển đổi tài khoản trực tiếp trong khung Chat (Màn hình 02) */
.auto-gps-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.auto-gps-main-col {
  flex: 1;
  min-width: 190px;
}

.auto-gps-switcher-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 195px;
}

.switcher-mini-label {
  font-size: 10px;
  font-weight: 700;
  color: #047857;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.chat-account-select {
  background: #ffffff;
  border: 1px solid #6ee7b7;
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #0f172a;
  cursor: pointer;
  outline: none;
}

.chat-account-select:focus {
  border-color: #059669;
}

/* Cửa sổ Quản lý Hồ sơ & Đăng nhập Tài khoản Daangn (Màn hình 04 nâng cấp tường minh) */
.btn-add-account-top {
  background: var(--daangn-orange);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-add-account-top:hover {
  background: var(--daangn-orange-hover);
}

.accounts-overview-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.acc-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 99px;
  padding: 4px 11px;
  font-size: 12px;
  color: #334155;
}

.acc-stat-pill strong {
  font-weight: 800;
  color: #0f172a;
}

.acc-stat-pill.online {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.acc-stat-pill.online strong {
  color: #047857;
}

.acc-stat-pill.offline {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}

.acc-stat-hint {
  margin-left: auto;
  font-size: 11.5px;
  color: #475569;
}

/* Biểu mẫu Thêm / Sửa Hồ sơ Tài khoản Daangn */
.account-profile-form {
  background: #fff7ed;
  border: 1.5px solid #fdba74;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.account-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.account-form-header h3 {
  font-size: 14px;
  font-weight: 800;
  color: #9a3412;
}

.btn-close-mini {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.account-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.account-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #fed7aa;
}

.account-form-actions {
  display: flex;
  gap: 8px;
}

.btn-cancel-light {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.btn-save-account-orange {
  background: var(--daangn-orange);
  border: none;
  color: #ffffff;
  padding: 7px 14px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.btn-save-account-orange:hover {
  background: var(--daangn-orange-hover);
}

/* Hộp thông tin định danh chi tiết trong từng Thẻ Tài Khoản */
.account-identity-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 10px;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.account-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #475569;
  gap: 8px;
}

.account-meta-row strong {
  color: #0f172a;
  font-weight: 700;
  text-align: right;
}

.account-phone-badge {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  padding: 1px 7px;
  border-radius: 6px;
  font-family: monospace;
  font-size: 11.5px;
  font-weight: 700;
}

.account-note-line {
  font-size: 11px;
  color: #64748b;
  font-style: italic;
  margin-bottom: 4px;
}

.account-card-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: auto;
}

.btn-acc-action {
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: all 0.15s;
}

.btn-acc-action:hover {
  background: #f1f5f9;
}

.btn-acc-action.primary-qr {
  background: var(--daangn-orange);
  border-color: var(--daangn-orange);
  color: #ffffff;
}

.btn-acc-action.primary-qr:hover {
  background: var(--daangn-orange-hover);
}

.btn-acc-action.quick-login {
  background: #ecfdf5;
  border-color: #6ee7b7;
  color: #047857;
}

.btn-acc-action.quick-logout {
  background: #fff1f2;
  border-color: #fecdd3;
  color: #be123c;
}

.btn-acc-action.delete-acc {
  color: #dc2626;
  border-color: #fecaca;
}

/* Hộp hiển thị tài khoản mục tiêu trong Modal Đăng nhập SĐT */
.qr-account-target-box {
  width: 100%;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 7px 11px;
  margin-bottom: 8px;
  font-size: 11.5px;
  color: #334155;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qr-right-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.btn-confirm-qr-login {
  width: 100%;
  background: #059669;
  border: none;
  color: #ffffff;
  padding: 9px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.btn-confirm-qr-login:hover {
  background: #047857;
}

/* ==================== BỘ CHUYỂN ĐỔI THỊ TRƯỜNG (KR <-> US) & KHUNG QUÉT QR TRỰC TIẾP ==================== */
.market-switcher-group {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}

.btn-market-switch {
  border: none;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-market-switch.active {
  background: #ff6f0f;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(255, 111, 15, 0.28);
}

.btn-market-switch[data-market="US"].active {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}

.qr-market-selector-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  margin-bottom: 10px;
}

.qr-market-tab {
  border: 1.5px solid #cbd5e1;
  background: #f8fafc;
  color: #334155;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s ease;
}

.qr-market-tab.active[data-qr-infra="ca"] {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.14);
}

.qr-market-tab.active[data-qr-infra="kr"] {
  background: #fff7ed;
  border-color: #ff6f0f;
  color: #c2410c;
  box-shadow: 0 2px 8px rgba(255, 111, 15, 0.14);
}

.live-qr-display-card {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.live-qr-img-wrapper {
  width: 196px;
  height: 196px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

.live-qr-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.live-qr-loading {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-align: center;
  padding: 12px;
}

.live-qr-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.live-qr-timer-pill {
  background: #f1f5f9;
  color: #0f172a;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}

.btn-refresh-qr-inline {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-refresh-qr-inline:hover {
  background: #dbeafe;
}

.live-qr-howto-box {
  width: 100%;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11.5px;
  color: #334155;
  line-height: 1.45;
  text-align: left;
}

/* ==================== GIAO DIỆN ĐĂNG NHẬP SĐT HÀN QUỐC (SMS OTP) & SESSION TOKEN THẬT ==================== */
.live-qr-scanner-col,
.phone-otp-col,
.token-direct-col {
  align-items: stretch !important;
  text-align: left !important;
}

.auth-method-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 6px;
}

.auth-method-badge.primary {
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fdba74;
}

.auth-method-badge.secondary {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #86efac;
}

.phone-auth-step-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 8px 11px;
  margin-bottom: 8px;
  width: 100%;
}

.phone-auth-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 5px;
}

.phone-input-row {
  display: flex;
  gap: 8px;
}

.phone-kr-input,
.otp-kr-input {
  flex: 1;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.btn-request-otp-orange {
  background: var(--daangn-orange);
  color: #ffffff;
  border: none;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-request-otp-orange:hover:not(:disabled) {
  background: var(--daangn-orange-hover);
}

.btn-request-otp-orange:disabled,
.btn-verify-otp-green:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-verify-otp-green {
  background: #059669;
  color: #ffffff;
  border: none;
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.btn-verify-otp-green:hover:not(:disabled) {
  background: #047857;
}

.token-textarea {
  width: 100%;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.4;
}

.compact-guide {
  margin-top: 6px;
  margin-bottom: 8px;
}

.offline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
  flex-shrink: 0;
}

/* ==================== MÀN HÌNH 06 & 07: MOBILE BOTTOM NAV & RESPONSIVE ==================== */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 1240px) {
  .live-indicator {
    display: none;
  }
  .articles-grid,
  .skeleton-cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 980px) {
  .brand-subtitle {
    display: none;
  }
  .active-account-profile-pill {
    display: inline-flex;
    padding: 3px 8px;
    gap: 5px;
    border-radius: 8px;
  }
  .active-account-pill-region {
    display: none;
  }
  .active-account-pill-name {
    font-size: 11px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .workspace-container {
    grid-template-columns: 1fr;
    /* Xếp theo nội dung từ trên xuống, KHÔNG kéo giãn hàng để lấp đủ chiều cao —
       nếu không, khi danh sách xe rỗng (0 tin) hàng sidebar bị giãn tạo khoảng trắng lớn. */
    align-content: start;
    min-height: 0;
  }
  .sidebar-radar {
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 14px;
  }
  .btn-toggle-sidebar-extras,
  .btn-mobile-map-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .sidebar-primary-selects,
  .sidebar-selects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 4px;
  }
  /* Mặc định thu gọn Bản đồ SVG + Link nhanh + Phường lân cận trên Mobile/Tablet để đẩy danh sách xe lên ngay đầu màn hình */
  .sidebar-collapsible-extras {
    display: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #cbd5e1;
  }
  .sidebar-collapsible-extras.expanded {
    display: block;
  }
  .articles-grid,
  .skeleton-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .modal-backdrop {
    padding: 10px;
  }
  .modal-container,
  .modal-container.modal-split-xl,
  .modal-container.modal-inbox-xl,
  .modal-container.modal-accounts-lg,
  .modal-container.modal-qr-2col {
    max-height: calc(100vh - 20px);
  }
  /* Hiển thị thanh chuyển Tab 1 chạm trên Mobile/Tablet cho cửa sổ Xem xe & Nhắn tin */
  .mobile-modal-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .modal-split-body {
    grid-template-columns: 1fr;
    overflow: hidden;
  }
  .modal-split-body[data-mobile-tab="chat"] .split-left-product {
    display: none;
  }
  .modal-split-body[data-mobile-tab="product"] .split-right-chat {
    display: none;
  }
  .split-left-product {
    border-right: none;
    height: 100%;
  }
  .qr-modal-split-body,
  .accounts-pool-grid,
  .account-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body {
    padding-bottom: 66px;
  }
  .top-header {
    padding: 8px 12px;
    gap: 8px;
  }
  .brand-logo {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }
  .brand-title-row h1 {
    font-size: 13.5px;
  }
  .btn-header-inbox,
  .btn-header-accounts {
    padding: 6px 9px;
    font-size: 11.5px;
    gap: 4px;
  }
  .sidebar-primary-selects {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .main-content {
    padding: 14px 12px 32px;
  }
  .page-heading-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .page-main-title {
    font-size: 17px;
  }
  .page-main-subtitle,
  .related-keywords-bar {
    display: none;
  }
  .category-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    margin-bottom: 8px;
    scrollbar-width: none;
  }
  .category-pills::-webkit-scrollbar {
    display: none;
  }
  .cat-pill {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 11px;
    font-size: 12px;
  }
  .filter-controls-bar {
    gap: 6px;
  }
  .filter-select-pill {
    padding: 5px 8px;
    font-size: 11.5px;
  }
  .summary-strip-bar {
    padding: 5px 10px;
    margin-bottom: 6px;
    font-size: 11px;
    gap: 3px 10px;
  }
  .sweep-summary-banner {
    padding: 6px 10px;
    margin-bottom: 8px;
  }
  .sweep-banner-header h3,
  .sweep-summary-divider {
    display: none;
  }
  .sweep-summary-banner.expanded .sweep-regions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }
  .articles-grid,
  .skeleton-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .bike-card {
    padding: 8px;
    border-radius: 12px;
  }
  .card-image-box {
    height: 138px;
    margin-bottom: 6px;
  }
  .card-title-vi {
    font-size: 13px;
    margin-bottom: 4px;
  }
  .card-footer-row {
    gap: 6px;
  }
  .price-krw-text {
    font-size: 14px;
  }
  .btn-card-chat {
    min-height: 30px;
    padding: 4px 9px;
    font-size: 11.5px;
    gap: 4px;
  }
  .split-modal-topbar {
    padding: 10px 14px;
  }
  .split-back-title-btn {
    font-size: 14px;
  }
  .status-pill-ready {
    display: none;
  }
  .phone-input-row {
    flex-direction: column;
  }
  .mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    z-index: 150;
  }
  .mobile-nav-item {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
  }
  .mobile-nav-item.active {
    color: var(--daangn-orange);
    font-weight: 700;
  }
  .mob-nav-icon {
    font-size: 17px;
  }
}

/* ==================== DẢI TIN NHẮN GỌN TRÊN TRANG CHỦ (LIVE CONVERSATIONS STRIP) ==================== */
.live-conversations-dock {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}

.live-conversations-dock.hidden {
  display: none;
}

.live-dock-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  border: none;
  background: var(--daangn-orange-soft);
  border-radius: 10px;
  padding: 8px 12px;
  min-height: 44px;
  cursor: pointer;
  font: inherit;
}

.live-dock-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.live-dock-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-main);
}

.live-dock-badge {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.live-dock-badge.has-pending {
  background: var(--daangn-orange);
  color: #ffffff;
  border-radius: 999px;
  padding: 2px 8px;
}

.live-dock-chips {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.live-dock-chips::-webkit-scrollbar {
  display: none;
}

.live-dock-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: 220px;
  min-height: 44px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-surface);
  cursor: pointer;
  text-align: left;
  font: inherit;
  scroll-snap-align: start;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.live-dock-chip:hover {
  border-color: #fdba74;
  background: var(--daangn-orange-soft);
}

.live-dock-chip.needs-reply {
  border-color: #fdba74;
}

.live-dock-chip img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.live-dock-chip-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.live-dock-chip-text strong {
  font-size: 12.5px;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-dock-chip-text span {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-dock-chip.needs-reply .live-dock-chip-text span {
  color: var(--text-main);
  font-weight: 600;
}

.live-dock-chip-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--daangn-orange);
}

.btn-dock-sync {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 16px;
}

.btn-dock-sync:hover {
  background: var(--bg-page);
}

@media (max-width: 640px) {
  .live-conversations-dock {
    padding: 6px;
    gap: 6px;
  }
  .live-dock-summary {
    padding: 6px 10px;
  }
  .live-dock-label {
    display: none;
  }
  .live-dock-chip {
    width: 180px;
  }
}

/* ==========================================================================
   CỔNG KHÓA BẢO VỆ TRUY CẬP HỆ THỐNG (ACCESS KEY GATE & RATE LIMIT MODAL)
   ========================================================================== */
.access-key-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.access-key-backdrop.hidden {
  display: none !important;
}

.access-key-card {
  background: #ffffff;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: keyGateScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes keyGateScaleUp {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.access-key-brand {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  padding: 26px 24px 22px;
  text-align: center;
  color: #ffffff;
  border-bottom: 3px solid #ff6f0f;
}

.access-key-logo {
  font-size: 38px;
  margin-bottom: 8px;
  line-height: 1;
  filter: drop-shadow(0 4px 10px rgba(255, 111, 15, 0.4));
}

.access-key-brand h2 {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 6px;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.access-key-subtitle {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

.access-key-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.access-key-notice {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: 12px;
}

.access-key-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.access-key-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.access-key-input {
  width: 100%;
  height: 48px;
  border: 1.5px solid #cbd5e1;
  border-radius: 12px;
  padding: 0 46px 0 14px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  background: #f8fafc;
  color: #0f172a;
  transition: all 0.2s ease;
}

.access-key-input:focus {
  border-color: #ff6f0f;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 111, 15, 0.15);
}

.btn-toggle-key-visibility {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-toggle-key-visibility:hover {
  background: #e2e8f0;
}

.access-key-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 10px;
  line-height: 1.45;
}

.access-key-ratelimit-box {
  background: #fef2f2;
  border: 1.5px solid #ef4444;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #991b1b;
  font-size: 12.5px;
  line-height: 1.45;
}

.ratelimit-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.ratelimit-content p {
  margin: 4px 0 0;
}

.ratelimit-timer {
  font-family: monospace;
  font-size: 15px;
  font-weight: 800;
  color: #b91c1c;
  background: #fee2e2;
  padding: 2px 7px;
  border-radius: 6px;
  display: inline-block;
  margin-left: 4px;
}

.btn-submit-access-key {
  height: 48px;
  background: linear-gradient(135deg, #ff7e29 0%, #ff6f0f 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 14px rgba(255, 111, 15, 0.35);
  transition: all 0.2s ease;
}

.btn-submit-access-key:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 111, 15, 0.45);
}

.btn-submit-access-key:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.access-key-footer {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  padding: 12px 20px;
  font-size: 11.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ==========================================================================
   NÚT KHÓA TRUY CẬP TRÊN HEADER VÀ MODAL TÀI KHOẢN
   ========================================================================== */
.btn-header-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #182238;
  color: #cbd5e1;
  border: 1px solid #2d3b55;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-header-logout:hover {
  background: #23304d;
  color: #ef4444;
  border-color: #ef4444;
}

.btn-modal-logout-access,
.btn-logout-access-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-modal-logout-access:hover,
.btn-logout-access-modal:hover {
  background: #fee2e2;
  border-color: #f87171;
}

/* ==========================================================================
   BANNER BÁO LỖI MẠNG & THỬ LẠI KHI TÌM KIẾM XE
   ========================================================================== */
.network-error-banner {
  background: #fff7ed;
  border: 1.5px solid #fdba74;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 4px 12px rgba(255, 111, 15, 0.08);
}

.network-error-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.network-error-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}

.network-error-text h3 {
  font-size: 14.5px;
  font-weight: 800;
  color: #9a3412;
  margin: 0 0 4px;
}

.network-error-text p {
  font-size: 12.5px;
  color: #c2410c;
  margin: 0;
}

.btn-retry-search {
  background: #ea580c;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
  transition: all 0.15s ease;
}

.btn-retry-search:hover {
  background: #c2410c;
  transform: translateY(-1px);
}

/* ==========================================================================
   GIAO DIỆN XỬ LÝ BÀI VIẾT LỖI / ĐÃ XÓA TRONG SPLIT MODAL
   ========================================================================== */
.article-modal-error-state {
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: 1;
  min-height: 340px;
}

.article-modal-error-icon {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 2px;
}

.article-modal-error-title {
  font-size: 18.5px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.article-modal-error-desc {
  font-size: 13.5px;
  color: #64748b;
  max-width: 440px;
  line-height: 1.55;
  margin: 0;
}

.btn-back-to-articles {
  background: #0f172a;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  transition: all 0.15s;
}

.btn-back-to-articles:hover {
  background: #1e293b;
  transform: translateY(-1px);
}

/* ==========================================================================
   TRẠNG THÁI GỬI TIN NHẮN LỖI & NÚT GỬI LẠI TRONG LUỒNG CHAT
   ========================================================================== */
.chat-msg-bubble.buyer.bubble-failed {
  background: #fff1f2 !important;
  color: #9f1239 !important;
  border: 1.5px solid #fecdd3 !important;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.08);
}

.chat-msg-status.failed {
  color: #e11d48;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
}

.btn-retry-failed-chat {
  background: #ffe4e6;
  color: #be123c;
  border: 1px solid #f43f5e;
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-retry-failed-chat:hover {
  background: #fda4af;
  color: #881337;
}

/* ==========================================================================
   EMPTY STATES: DANH SÁCH XE & BỘ LỌC TÌM KIẾM
   ========================================================================== */
.empty-articles-box {
  grid-column: 1 / -1;
  padding: 48px 20px;
  text-align: center;
  background: #ffffff;
  border: 1.5px dashed #cbd5e1;
  border-radius: 16px;
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.empty-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 2px;
}

.empty-title {
  font-size: 16.5px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.empty-desc {
  font-size: 13px;
  color: #64748b;
  max-width: 440px;
  line-height: 1.5;
  margin: 0;
}

.empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6px;
}

.btn-reset-filters {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #334155;
  padding: 8px 16px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-reset-filters:hover {
  background: #e2e8f0;
}

.btn-sweep-now {
  background: #ff6f0f;
  border: none;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-sweep-now:hover {
  background: #ea580c;
}

/* ==========================================================================
   HUY HIỆU BOTTOM NAVIGATION CHO THIẾT BỊ DI ĐỘNG (MOBILE BOTTOM NAV)
   ========================================================================== */
.mob-nav-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mob-nav-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 2px solid #ffffff;
  line-height: 1;
}

/* ==========================================================================
   TỐI ƯU HÓA RESPONSIVE & CHỐNG TRÀN TOÀN TRÌNH (ZERO OVERFLOW)
   ========================================================================== */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

@media (max-width: 640px) {
  /* Tăng z-index của modal để luôn nổi lên trên Bottom Nav, không bị che nút gửi tin nhắn */
  .modal-backdrop {
    z-index: 500;
    padding: 8px;
  }
  .modal-container {
    max-height: calc(100vh - 16px);
  }
  .live-chat-composer {
    padding: 6px 8px 10px;
  }
  .composer-input-row {
    gap: 4px;
  }
  .btn-header-logout {
    padding: 6px 8px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .btn-header-logout span {
    display: none;
  }
}

/* ==========================================================================
   HEADER GỌN THEO KÍCH THƯỚC MÀN HÌNH (không tràn, không đè chữ)
   ========================================================================== */
.brand-text-group {
  min-width: 0;
}

@media (max-width: 1100px) {
  /* Tài khoản đang dùng đã có trong cửa sổ Tài khoản → ẩn thẻ hồ sơ để nhường chỗ cho tiêu đề */
  .active-account-profile-pill {
    display: none !important;
  }
}

@media (max-width: 980px) {
  .btn-header-logout span {
    display: none;
  }
  .btn-header-logout {
    min-width: 40px;
    min-height: 40px;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  /* Mobile: các nút này đã có ở thanh điều hướng dưới (Hộp thư, Tài khoản) → header chỉ còn thương hiệu */
  .header-actions {
    display: none;
  }
  .top-header {
    padding: 8px 14px;
  }
  .brand-title-row h1 {
    font-size: 15px;
  }
  .mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(60px + env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   HỘP THƯ TRÊN MOBILE/TABLET: DANH SÁCH → CUỘC TRÒ CHUYỆN (1 màn hình mỗi lúc)
   ========================================================================== */
.inbox-back-btn {
  display: none;
}

@media (max-width: 980px) {
  .chat-center-grid {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .chat-center-grid[data-mobile-view="list"] .chat-room-main,
  .chat-center-grid[data-mobile-view="thread"] .chat-rooms-sidebar {
    display: none;
  }
  .chat-center-grid .chat-rooms-sidebar {
    flex: 1;
    max-height: none;
    border-bottom: none;
    overflow-y: auto;
  }
  .chat-center-grid .chat-room-main {
    flex: 1;
    min-height: 0;
  }
  .inbox-subtitle,
  #inboxActiveCountPill {
    display: none;
  }
  .inbox-room-topbar {
    padding: 8px 10px;
    gap: 8px;
  }
  .inbox-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: var(--bg-page);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
  .inbox-room-bike-info {
    flex: 1;
    min-width: 0;
    gap: 8px;
  }
  .inbox-room-bike-info > div {
    min-width: 0;
  }
  .inbox-room-bike-info strong,
  .inbox-room-bike-info > div > div {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .inbox-room-bike-info img {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 640px) {
  /* Hộp thư và cửa sổ Xem xe chiếm trọn màn hình như ứng dụng chat */
  #chatCenterModalBackdrop,
  #articleModalBackdrop {
    padding: 0;
  }
  #chatCenterModalBackdrop .modal-container,
  #articleModalBackdrop .modal-container {
    max-height: none;
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    overflow: hidden;
  }
  .split-modal-topbar {
    padding: 8px 12px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .inbox-header-left {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    gap: 6px;
  }
  .inbox-header-left h2 {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .split-topbar-right {
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
  }
  .split-topbar-right .btn-sync-text {
    display: none;
  }
  /* Mobile: nút Đồng bộ thành nút tròn outlined trung tính, đồng bộ phong cách với
     nút loa và nút đóng — bỏ nền cam đặc nặng nề gây rối topbar hộp thư. */
  .split-topbar-right .btn-reconnect-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    border-radius: 50%;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
  }
  .split-topbar-right .btn-reconnect-compact:hover {
    background: #e2e8f0;
    color: #0f172a;
  }
  .split-topbar-right .modal-close-light-btn {
    width: 36px;
    height: 36px;
  }
  .split-topbar-right .status-pill-ready {
    display: none;
  }
  #centerOpenArticleBtn,
  #centerDeleteRoomBtn {
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
}

/* ==========================================================================
   CỬA SỔ CHAT GỌN: bong bóng hệ thống 1 dòng, banner GPS 1 dòng trên mobile
   ========================================================================== */
.chat-msg-bubble.system {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
  padding: 4px 12px;
  border-style: solid;
  opacity: 0.85;
}

@media (max-width: 640px) {
  .auto-gps-status-bar {
    padding: 6px 10px;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
  }
  .auto-gps-status-bar .gps-check-circle,
  .auto-gps-status-bar .auto-gps-sub {
    display: none;
  }
  .auto-gps-main-col {
    min-width: 0;
    flex: 1;
  }
  #modalAutoGpsTitle {
    display: block;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .auto-gps-switcher-col {
    flex: 0 0 42%;
    min-width: 0;
  }
  .auto-gps-switcher-col select {
    width: 100%;
    font-size: 12px;
  }
}

/* Sentinel cuộn vô hạn (Infinite Scroll) — tự động tải thêm khi cuộn tới */
.load-more-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 18px 0 8px;
  min-height: 60px;
}

.load-more-row.hidden {
  display: none;
}

.btn-load-more {
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

/* Hiệu ứng loading shimmer khi đang tải thêm */
.btn-load-more::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,111,15,0.08), transparent);
  animation: shimmer-sentinel 1.5s infinite;
}

@keyframes shimmer-sentinel {
  0% { left: -100%; }
  100% { left: 100%; }
}

.btn-load-more:disabled {
  cursor: default;
  opacity: 0.6;
}

.btn-load-more:not(:disabled):hover {
  border-color: #fdba74;
  background: var(--daangn-orange-soft);
}

/* Nút mở bộ lọc (chỉ hiện trên mobile) */
.btn-filter-toggle {
  display: none;
}

@media (max-width: 640px) {
  .btn-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-surface);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    cursor: pointer;
  }
  .filter-panel:not(.filters-open) .filter-controls-bar {
    display: none;
  }
  .filter-panel.filters-open .filter-controls-bar {
    margin-top: 8px;
  }
  .filter-panel.filters-open .filter-dropdowns-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }
  .filter-panel.filters-open .filter-select-pill {
    width: 100%;
    min-height: 40px;
    font-size: 13px;
  }
  .cat-pill {
    min-height: 36px;
  }
}

@media (max-width: 640px) {
  /* Mobile: chấm cam trên từng chip đã báo phòng chờ trả lời → bỏ ô tổng để chip có chỗ */
  .live-dock-summary {
    display: none;
  }
  .inbox-title-icon {
    display: none;
  }
  .inbox-header-left h2 {
    font-size: 16px;
    white-space: nowrap;
  }
  /* Nút đồng bộ dùng chung style nút tròn outlined trong .split-topbar-right (bên dưới),
     không còn chèn thêm ký tự ↻ ::before gây trùng icon với SVG. */
}

@media (max-width: 640px) {
  /* Cửa sổ Tài khoản: tiêu đề 1 dòng, bỏ mô tả dài (đã có trong thẻ hướng dẫn bên dưới) */
  .accounts-icon,
  .accounts-subtitle {
    display: none;
  }
  .accounts-header-title h2 {
    font-size: 16px;
    line-height: 1.3;
  }
  #btnModalLogoutAccess {
    white-space: nowrap;
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* ==========================================================================
   TABLET (≤1100px): bộ lọc 2 hàng gọn, dải dòng xe cuộn ngang thay vì 3 hàng
   ========================================================================== */
@media (max-width: 1100px) and (min-width: 641px) {
  .filter-controls-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .filter-dropdowns-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .filter-select-pill {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    text-overflow: ellipsis;
  }
  .checkbox-filters {
    margin-left: 0;
  }
  .category-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .category-pills::-webkit-scrollbar {
    display: none;
  }
  .cat-pill {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ==========================================================================
   MOBILE: nút hỏi nhanh 1 hàng cuộn ngang, vùng chạm ≥ 40–44px
   ========================================================================== */
@media (max-width: 640px) {
  .quick-replies-section {
    padding: 6px 12px 2px;
  }
  .quick-replies-label {
    display: none;
  }
  .quick-replies-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .quick-replies-chips::-webkit-scrollbar {
    display: none;
  }
  .quick-reply-chip {
    flex-shrink: 0;
    white-space: nowrap;
    min-height: 36px;
    font-size: 12.5px;
  }
  .mob-modal-tab,
  .modal-close-light-btn,
  .split-back-title-btn,
  .btn-toggle-sidebar-extras,
  .mode-toggle-btn,
  .nearby-pill,
  .checkbox-label {
    min-height: 40px;
  }
  .checkbox-label {
    display: inline-flex;
    align-items: center;
  }
  .checkbox-label input[type='checkbox'] {
    width: 20px;
    height: 20px;
  }
  .modal-close-light-btn {
    min-width: 40px;
  }
  .card-fav-btn {
    width: 36px;
    height: 36px;
  }
  .search-main-input,
  .composer-input-box textarea {
    font-size: 16px; /* iOS Safari tự phóng to trang khi ô nhập < 16px */
  }
}

@media (max-width: 980px) {
  .mode-btn,
  .btn-mobile-map-toggle {
    min-height: 40px;
  }
  .btn-mobile-map-toggle {
    padding: 8px 12px;
  }
}

@media (max-width: 980px) {
  .nearby-chip {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  #customRegionInput,
  #goCustomInputBtn {
    min-height: 40px;
  }
  #customRegionInput {
    font-size: 16px;
  }
}

/* Tablet cảm ứng: nút header và pill đủ lớn để chạm */
@media (max-width: 1100px) and (min-width: 641px) {
  .btn-header-inbox,
  .btn-header-accounts,
  .btn-header-logout {
    min-height: 40px;
  }
  .cat-pill {
    min-height: 38px;
  }
  .checkbox-label {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .checkbox-filters {
    gap: 0 16px;
    margin-left: 0;
  }
}

@media (max-width: 1100px) {
  .kw-tag {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .card-fav-btn {
    width: 36px;
    height: 36px;
  }
}

/* iPad ngang (≤1100px, bố cục desktop nhưng thao tác bằng tay) */
@media (max-width: 1100px) {
  .mode-btn,
  .btn-mobile-map-toggle,
  #customRegionInput,
  #goCustomInputBtn {
    min-height: 40px;
  }
  .nearby-chip {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 1100px) {
  #closeArticleModalBtn,
  #modalPrevImgBtn,
  #modalNextImgBtn {
    min-width: 40px;
    min-height: 40px;
  }
  #backFromArticleModalBtn {
    min-height: 40px;
  }
  .btn-card-chat {
    min-height: 32px;
  }
}

/* ==========================================================================
   NÂNG CẤP HỆ THỐNG DIALOG / MODAL & TRẢI NGHIỆM CHUẨN VERCEL + TASTE-SKILL
   ========================================================================== */

/* 1. Khóa cuộn nền khi mở Modal & Ngăn tràn cuộn dây chuyền (Overscroll Chaining) */
body.modal-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.modal-backdrop,
.access-key-backdrop,
.split-left-product,
.live-chat-messages,
.chat-rooms-list,
.chat-room-main,
.modal-body-clean,
.qr-modal-split-body,
.guide-modal-body,
.search-suggest-dropdown {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* 2. Phân tầng Z-Index chuẩn xác cho Modal chồng nhau (Modal Stack) */
#articleModalBackdrop,
#chatCenterModalBackdrop,
#accountsModalBackdrop,
#guideModalBackdrop {
  z-index: 1000;
}

#qrLoginModalBackdrop {
  z-index: 1100;
}

#imageLightboxBackdrop {
  z-index: 1200;
}

#confirmDialogBackdrop {
  z-index: 1300;
}

.toast-container {
  z-index: 1400;
}

/* 3. Chuyển động đóng/mở Dialog mượt mà (Spring Curve chuẩn giao diện hiện đại) */
@keyframes dialogBackdropIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes dialogSurfaceIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-backdrop:not(.hidden) {
  animation: dialogBackdropIn 0.18s ease-out;
}

.modal-backdrop:not(.hidden) > .modal-container {
  animation: dialogSurfaceIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Thanh nắm kéo Bottom Sheet trên thiết bị di động (ẩn trên Desktop) */
.modal-sheet-grabber {
  display: none;
}

/* 4. Căn chỉnh số liệu thẳng hàng (Tabular Nums) theo Vercel Guidelines */
.price-krw-text,
.price-krw,
.inbox-room-price,
.chat-product-strip-price,
#statDirectDealCount,
#statFilteredCount,
#liveQrCountdownBadge,
#accessKeyRateLimitTimer,
#chatRoomsCountBadge,
#accountsCountBadge,
#inboxActiveCountPill,
#modalImageCounterBadge,
#lightboxCounterText,
.acc-stat-pill strong,
.temp-pill,
.seller-temp-badge {
  font-variant-numeric: tabular-nums;
}

/* 5. Phản hồi chạm tức thì & Khung Focus rõ ràng cho bàn phím (:focus-visible) */
button,
select,
input,
a,
summary,
.cat-pill,
.nearby-chip,
.quick-reply-chip,
.bike-card,
.article-card,
.sweep-banner-header,
.chat-room-item,
.suggest-item-row {
  touch-action: manipulation;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
a:focus-visible,
summary:focus-visible,
.bike-card:focus-visible,
.article-card:focus-visible,
.sweep-banner-header:focus-visible,
.chat-room-item:focus-visible,
.suggest-item-row:focus-visible {
  outline: 2px solid var(--daangn-orange);
  outline-offset: 2px;
}

.search-main-input:focus-visible,
.composer-input-box textarea:focus-visible,
#inboxSearchInput:focus-visible {
  outline: none;
}

/* 6. Trạng thái tải ảnh Skeleton & Nút phóng to ảnh trong Dialog Chi tiết xe */
.main-image-wrap {
  position: relative;
  background: #0f172a;
}

#modalMainImage {
  cursor: zoom-in;
  transition: opacity 0.18s ease;
}

.main-image-wrap.is-loading #modalMainImage {
  opacity: 0;
}

.main-image-wrap.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.4s infinite;
  z-index: 1;
}

.img-zoom-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 23, 42, 0.68);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.img-zoom-btn:hover {
  background: rgba(255, 111, 15, 0.92);
  transform: scale(1.05);
}

/* 7. Hộp thoại phóng to ảnh toàn màn hình (Image Lightbox) */
.lightbox-backdrop {
  background: rgba(10, 15, 28, 0.94);
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}

.lightbox-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 4px 8px;
}

.lightbox-counter {
  color: #f8fafc;
  font-size: 13.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.12);
  padding: 6px 14px;
  border-radius: 999px;
}

.lightbox-close-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.lightbox-close-btn:hover {
  background: rgba(239, 68, 68, 0.85);
}

.lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.lightbox-img {
  max-width: 92%;
  max-height: calc(100dvh - 110px);
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  user-select: none;
}

.lightbox-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease;
}

.lightbox-nav-btn:hover {
  background: var(--daangn-orange);
}

.lightbox-nav-btn.prev {
  left: 12px;
}

.lightbox-nav-btn.next {
  right: 12px;
}

/* 8. Hộp thoại Hướng dẫn sử dụng (Usage Guide Dialog) */
.modal-guide-md {
  width: 100%;
  max-width: 660px;
  background: var(--bg-surface);
  border-radius: 18px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 88dvh;
}

.guide-modal-body {
  padding: 20px 24px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.guide-steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guide-step-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: #f8fafc;
}

.guide-step-num {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--daangn-orange);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.guide-step-content h3 {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-main);
}

.guide-step-content p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 62ch;
}

.guide-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

/* 9. Hộp thoại Xác nhận thao tác quan trọng (Confirmation AlertDialog) */
.confirm-backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}

.modal-confirm-sm {
  width: 100%;
  max-width: 430px;
  background: var(--bg-surface);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-modal);
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.confirm-dialog-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.confirm-dialog-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.confirm-dialog-icon.info {
  background: #fff7ed;
  color: var(--daangn-orange);
  border-color: #fed7aa;
}

.confirm-dialog-text h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
}

.confirm-dialog-text p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.confirm-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.btn-confirm-cancel {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: #ffffff;
  color: var(--text-secondary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-confirm-cancel:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.btn-confirm-proceed {
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--daangn-orange);
  color: #ffffff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn-confirm-proceed.danger {
  background: #dc2626;
}

.btn-confirm-proceed.danger:hover {
  background: #b91c1c;
}

/* 10. Tinh chỉnh bố cục Dialog Quét QR & Xác thực SĐT (Progressive Disclosure) */
.chrome-sync-desc {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.otp-step-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 12px 0;
}

.web-password-details {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #f8fafc;
  margin-bottom: 8px;
  overflow: hidden;
}

.web-password-summary {
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.web-password-summary::-webkit-details-marker {
  display: none;
}

.web-password-Summary:hover {
  color: var(--text-main);
}

.web-password-inner {
  border: none !important;
  border-top: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  background: #ffffff !important;
}

/* 11. Trải nghiệm Bottom Sheet đồng nhất trên Mobile (≤640px) cho các Dialog */
@media (max-width: 640px) {
  #accountsModalBackdrop,
  #qrLoginModalBackdrop,
  #guideModalBackdrop {
    align-items: flex-end;
    padding: 0;
  }

  #accountsModalBackdrop > .modal-container,
  #qrLoginModalBackdrop > .modal-container,
  #guideModalBackdrop > .modal-container {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 12px);
  }

  .modal-sheet-grabber {
    display: block;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: #cbd5e1;
    margin: 8px auto 2px;
    flex-shrink: 0;
  }

  .guide-modal-body {
    padding: 16px;
  }

  .guide-modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .guide-modal-footer button {
    width: 100%;
    min-height: 44px;
  }

  #confirmDialogBackdrop {
    padding: 16px;
    align-items: center;
  }

  .modal-confirm-sm {
    padding: 18px;
  }

  .confirm-dialog-actions button {
    flex: 1;
    min-height: 44px;
  }
}

/* 12. Tôn trọng thiết lập giảm chuyển động của hệ điều hành (prefers-reduced-motion) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==================== 13. GỢI Ý TÌM KIẾM THÔNG MINH & CHUÔNG BÁO ÂM THANH TRÊN WEB ==================== */

.suggest-highlight {
  background: #ffedd5;
  color: #c2410c;
  font-weight: 800;
  padding: 0 2px;
  border-radius: 3px;
}

/* Danh sách gợi ý tự động hoàn thành kiểu app Daangn gốc: dòng 44px, icon xám, phần khớp chữ đang gõ in đậm, nút ↖ chèn */
.ac-list {
  display: flex;
  flex-direction: column;
}

.suggest-item-row.ac-row {
  min-height: 44px;
  padding: 0 0 0 12px;
  gap: 12px;
  border-radius: 10px;
  justify-content: flex-start;
}

.ac-row-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  flex-shrink: 0;
}

.ac-row-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

.ac-row-name {
  font-size: 15.5px;
  font-weight: 400;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}

.ac-mark {
  background: transparent;
  color: inherit;
  font-weight: 700;
}

.ac-row-tag {
  font-size: 12.5px;
  color: #94a3b8;
  flex-shrink: 0;
}

.ac-row-gloss {
  font-size: 12.5px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 2;
  min-width: 0;
}

.ac-insert-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #94a3b8;
  border-radius: 10px;
  cursor: pointer;
}

.ac-insert-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

.ac-unavailable-note {
  margin: 8px 6px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-border);
  color: var(--amber-text);
  font-size: 12.5px;
  line-height: 1.45;
}

.suggest-smart-ko-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #c2410c;
  font-size: 11.5px;
  font-weight: 800;
}

.suggest-item-row.keyboard-active {
  background: #fff7ed !important;
  outline: 1.5px solid #fdba74;
}

.suggest-submodels-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.suggest-submodel-chip {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.14s ease;
}

.suggest-submodel-chip:hover {
  background: #ff6f0f;
  border-color: #ff6f0f;
  color: #ffffff;
}

.suggest-submodel-chip:hover .suggest-highlight {
  background: transparent;
  color: #ffffff;
}

.suggest-article-thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.suggest-live-price {
  color: #ea580c;
  font-weight: 800;
}

/* ==================== DẢI CẢNH BÁO KẾT NỐI TOÀN CỤC ==================== */
.global-conn-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #7c2d12;
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.global-conn-banner.hidden {
  display: none;
}
.global-conn-banner.state-expired {
  color: #7f1d1d;
  background: #fef2f2;
  border-bottom-color: #fecaca;
}
.global-conn-banner.state-expiring {
  color: #78350f;
  background: #fffbeb;
  border-bottom-color: #fde68a;
}
.global-conn-banner .gcb-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #f59e0b;
}
.global-conn-banner.state-expired .gcb-dot {
  background: #ef4444;
  animation: gcbPulse 1.4s infinite;
}
@keyframes gcbPulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.global-conn-banner .gcb-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}
.global-conn-banner .gcb-action {
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-weight: 700;
  font-size: 12.5px;
  color: #ffffff;
  background: var(--daangn-orange);
  padding: 6px 14px;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.global-conn-banner .gcb-action:hover {
  background: var(--daangn-orange-hover);
}
.global-conn-banner.state-expiring .gcb-action {
  display: none;
}
@media (max-width: 640px) {
  .global-conn-banner {
    padding: 8px 14px;
    font-size: 12px;
    gap: 8px;
  }
  .global-conn-banner .gcb-action {
    padding: 5px 11px;
    font-size: 11.5px;
  }
}

.btn-sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-sound-toggle.sound-on {
  background: #f0fdf4;
  border-color: #86efac;
  color: #16a34a;
}

.btn-sound-toggle.sound-on:hover {
  background: #dcfce7;
  color: #15803d;
}

.btn-sound-toggle.sound-off {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #94a3b8;
}

.btn-sound-toggle.sound-off:hover {
  background: #e2e8f0;
  color: #64748b;
}

.btn-sound-toggle .sound-icon-on {
  display: inline-block;
}

.btn-sound-toggle .sound-icon-off {
  display: none;
}

.btn-sound-toggle.sound-off .sound-icon-on {
  display: none;
}

.btn-sound-toggle.sound-off .sound-icon-off {
  display: inline-block;
}

.btn-sound-test {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  background: #fff7ed;
  border: 1px solid #fdba74;
  color: #c2410c;
  white-space: nowrap;
}

.btn-sound-test:hover {
  background: #ffedd5;
}

.toast-msg.toast-clickable {
  border-left: 4px solid #ff6f0f;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
}

.toast-msg.toast-clickable:hover {
  background: #1e293b;
}

/* ==================== 14. TỐI ƯU CX CHI TIẾT XE SONG NGỮ, XE ĐÃ LƯU, TRẠNG THÁI ĐÃ XEM / ĐÃ CHAT ==================== */

.fav-filter-checkbox {
  background: #fff1f2;
  border: 1px solid #fecdd3;
  color: #be123c;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}

.card-chatted-pill,
.card-viewed-pill {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
}

.card-chatted-pill {
  background: #15803d;
  color: #ffffff;
}

.card-viewed-pill {
  background: rgba(15, 23, 42, 0.72);
  color: #f8fafc;
}

/* Trạng thái bài đăng trên Daangn: đã bán / đang đặt cọc */
.card-sale-status-pill {
  position: absolute;
  top: 8px;
  right: 44px;
  z-index: 3;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16);
}

.card-sale-status-pill.is-closed {
  background: #475569;
  color: #ffffff;
}

.card-sale-status-pill.is-reserved {
  background: #b45309;
  color: #ffffff;
}

.bike-card.is-closed-card .card-image-box img {
  filter: grayscale(0.85);
  opacity: 0.7;
}

/* Khối "Khớp chính xác tiêu đề" phía trên lưới kết quả */
.exact-match-section {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--emerald-border);
  border-radius: var(--radius-lg);
  background: var(--emerald-soft);
}

.exact-match-section.is-miss {
  border-color: var(--amber-border);
  background: var(--amber-soft);
}

.exact-match-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 12px;
}

.exact-match-head strong {
  font-size: 15px;
  color: #065f46;
}

.exact-match-section.is-miss .exact-match-head strong {
  color: var(--amber-text);
}

.exact-match-head span {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.exact-match-section.is-miss .exact-match-head {
  margin-bottom: 0;
}

.exact-match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

@media (max-width: 640px) {
  .exact-match-section {
    padding: 10px 6px 8px;
  }

  .exact-match-head {
    padding: 0 4px;
  }

  .exact-match-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

.btn-card-chat.has-chatted {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
}

.product-title-sub-vi {
  font-size: 13.5px;
  font-weight: 600;
  color: #0f766e;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  padding: 5px 10px;
  margin: 6px 0 8px;
  line-height: 1.4;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.price-vnd-sub {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 999px;
}

.product-detail-actions-col {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* Tối ưu responsive cho view chi tiết xe trên màn hình nhỏ và di động:
   Chuyển cụm thông tin xe sang dạng cột 100% để tiêu đề không bị bẻ dọc thành cột 1 chữ,
   đồng thời 3 nút hành động (Lưu xe, Sao chép link, Bài gốc) xếp đều 1 hàng ngang bên dưới. */
@media (max-width: 640px) {
  .product-header-info-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
  }
  .product-header-info-row > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
  }
  .product-detail-title {
    font-size: 17px !important;
    line-height: 1.4 !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
  }
  .product-detail-actions-col {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-top: 6px !important;
  }
  .product-detail-actions-col .btn-outline-daangn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 8px 4px !important;
    font-size: 12px !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }
}

/* Hiệu ứng xoay tròn nút Đồng bộ khi đang fetch tin nhắn từ Daangn */
.btn-reconnect-compact.is-syncing svg,
.btn-sync-inbox-header.is-syncing svg {
  animation: spin 0.9s linear infinite;
}

.btn-modal-fav.favorited {
  background: #fff1f2 !important;
  border-color: #fda4af !important;
  color: #e11d48 !important;
}

.modal-spec-badges-box {
  margin: 10px 0;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.modal-spec-badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.modal-spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 12px;
  color: #334155;
}

.modal-spec-chip .spec-val {
  color: #0f172a;
  font-weight: 800;
}

.modal-spec-chip.spec-highlight {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

.modal-spec-chip.spec-highlight .spec-val {
  color: #c2410c;
}

.modal-defect-warning-bar {
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.45;
}

.content-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.content-block-header h4 {
  margin: 0 !important;
}

.btn-copy-desc {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.btn-copy-desc:hover {
  background: #e2e8f0;
}

.content-translated-vi-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.content-translated-label {
  font-size: 11.5px;
  font-weight: 800;
  color: #15803d;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.content-text.vi-text {
  color: #0f172a !important;
  font-weight: 500;
  margin: 0 !important;
}

.content-original-ko-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 4px;
}

.btn-scroll-to-top {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 90;
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #334155;
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
  transition: all 0.18s ease;
}

.btn-scroll-to-top:hover {
  background: #ff6f0f;
  border-color: #ff6f0f;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .btn-scroll-to-top {
    bottom: 76px;
    right: 14px;
    padding: 8px 12px;
    font-size: 12px;
  }
}


/* ==================== CỤM GỢI Ý TỰ ĐỘNG HOÀN THÀNH CHUẨN APP DAANGN GỐC ==================== */
.ac-list-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px 0;
}

.ac-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 50px;
  height: 50px;
  padding: 0 8px 0 16px;
  cursor: pointer;
  transition: background-color 0.12s ease;
  border-radius: 8px;
  user-select: none;
}

.ac-row:hover {
  background-color: #f8f9fa;
}

.ac-row:active {
  background-color: #f1f3f5;
}

.ac-row-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.ac-row-icon {
  width: 20px;
  height: 20px;
  color: #868b94;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ac-row-icon svg {
  width: 19px;
  height: 19px;
  stroke: #868b94;
}

.ac-row-text {
  font-size: 16px;
  font-weight: 400;
  color: #212124;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.ac-insert-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: #868b94;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ac-insert-btn svg {
  width: 18px;
  height: 18px;
  stroke: #868b94;
}

.ac-insert-btn:hover {
  background-color: #f2f3f6;
  color: #212124;
}

.ac-insert-btn:hover svg {
  stroke: #212124;
}

.ac-row-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.ac-remove-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: #94a3b8;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.ac-remove-btn svg {
  width: 14px;
  height: 14px;
  stroke: #94a3b8;
}

.ac-remove-btn:hover {
  background-color: #fee2e2;
  color: #ef4444;
}

.ac-remove-btn:hover svg {
  stroke: #ef4444;
}

.ac-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px 16px;
  border-bottom: 1px solid #f1f3f5;
  margin-bottom: 4px;
}

.ac-section-header:not(:first-child) {
  margin-top: 10px;
}

.ac-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  letter-spacing: -0.2px;
}

.ac-clear-all-btn {
  font-size: 12.5px;
  font-weight: 500;
  color: #94a3b8;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  transition: color 0.15s ease;
}

.ac-clear-all-btn:hover {
  color: #ef4444;
}

.ac-row.keyboard-active {
  background-color: #f1f5f9;
}


/* ==================== ẢNH TRONG TIN NHẮN CHAT (DAANGN CHAT IMAGES) ==================== */
.chat-msg-bubble.has-images {
  padding: 6px !important;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  max-width: 380px;
}
.chat-msg-bubble.buyer.has-images {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}
.chat-msg-images-box {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-radius: 12px;
  overflow: hidden;
}
.chat-img-single {
  max-width: 280px;
}
.chat-img-single .chat-msg-img-item {
  width: 100%;
  max-height: 360px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  background: #0f172a;
}
.chat-img-single .chat-msg-img-item img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.2s ease;
}
.chat-img-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  max-width: 340px;
}
.chat-img-duo .chat-msg-img-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  background: #1e293b;
}
.chat-img-duo .chat-msg-img-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.chat-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  max-width: 340px;
}
.chat-img-grid .chat-msg-img-item {
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  background: #1e293b;
}
.chat-img-grid .chat-msg-img-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}
.chat-msg-img-item:hover img {
  transform: scale(1.04);
}
.chat-msg-zoom-badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  width: 22px;
  height: 22px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  backdrop-filter: blur(2px);
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.chat-msg-img-item:hover .chat-msg-zoom-badge {
  opacity: 1;
  background: var(--daangn-orange, #ff6f0f);
}


/* ==========================================================================
   CỤM CHAT COMPOSER: ĐÍNH KÈM ẢNH, CLIPBOARD PASTE, DRAG & DROP (CHUẨN REA / DAANGN)
   ========================================================================== */
.composer-attach-btn {
  color: #868b94;
}

.composer-attach-btn:hover {
  color: var(--daangn-orange, #ff6f0f);
  background: var(--daangn-orange-soft, rgba(255, 111, 15, 0.08));
}

.live-chat-composer.drag-over {
  background: rgba(255, 111, 15, 0.08) !important;
  border-radius: 14px;
  outline: 2px dashed var(--daangn-orange, #ff6f0f);
}

.composer-media-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.composer-media-preview.hidden {
  display: none !important;
}

.composer-preview-item {
  position: relative;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  background: #0f172a;
}

.composer-preview-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.composer-preview-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  border: none;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.composer-preview-remove:hover {
  background: #ef4444;
}

.room-unread-count-badge {
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 99px;
  margin-left: auto;
}


/* ==========================================================================
   TỐI ƯU KHUNG CHAT SAFARI / IOS / DESKTOP (CHUẨN APP GỐC DAANGN)
   ========================================================================== */
.chat-bottom-dock {
  border-top: 1px solid #e9ecef;
  background: #ffffff;
  flex-shrink: 0;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
}

.live-chat-composer {
  padding: 6px 12px 10px;
}

.composer-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.composer-icon-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #868b94;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.composer-icon-btn:hover {
  background: #f2f3f6;
  color: #495057;
}

.composer-attach-btn {
  color: #868b94;
}

.composer-attach-btn:hover {
  background: rgba(255, 111, 15, 0.08);
  color: var(--daangn-orange, #ff6f0f);
}

.composer-plus-btn {
  display: none !important;
}

.composer-input-box {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  background: #f2f3f6;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 0 4px 0 14px;
  min-height: 40px;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.composer-input-box:focus-within {
  background: #ffffff;
  border-color: #d1d5db;
  box-shadow: 0 0 0 2px rgba(255, 111, 15, 0.12);
}

.composer-input-box textarea {
  flex: 1;
  min-width: 0;
  max-height: 120px;
  padding: 9px 0;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: #212124;
  overflow-y: auto;
  overflow-wrap: anywhere;
  -webkit-appearance: none;
}

.composer-input-box textarea::placeholder {
  color: #9ca0a8;
  font-size: 14.5px;
}

.composer-emoji-btn {
  width: 34px;
  height: 34px;
  margin: 0 2px;
  color: #868b94;
}

.btn-send-orange {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--daangn-orange, #ff6f0f);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}

.btn-send-orange:hover:not(:disabled) {
  background: var(--daangn-orange-soft, rgba(255, 111, 15, 0.08));
}

.btn-send-orange:active:not(:disabled) {
  transform: scale(0.92);
}

.btn-send-orange:disabled {
  color: #c4c7cc;
  cursor: default;
}

/* Đảm bảo dải câu hỏi nhanh cuộn ngang mượt mà trên iPhone Safari */
.quick-replies-section {
  padding: 8px 12px 4px;
}

.quick-replies-chips {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  gap: 6px !important;
}

.quick-replies-chips::-webkit-scrollbar {
  display: none !important;
}

.quick-reply-chip {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

@media (max-width: 768px) {
  /* Chống iOS Safari tự động phóng to khi focus vào ô nhập */
  .composer-input-box textarea {
    font-size: 16px;
  }
  .live-chat-composer {
    padding: 6px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  }
}

/* ==================== 15. THÔNG BÁO BẢN CẬP NHẬT MỚI & NÚT LÀM MỚI CHỐNG CACHE ==================== */
.app-update-banner {
  position: sticky;
  top: 56px;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-bottom: 2px solid #fb923c;
  box-shadow: 0 4px 16px rgba(234, 88, 12, 0.15);
  animation: bannerSlideDown 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bannerSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.update-banner-lead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.update-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ff6f0f;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(255, 111, 15, 0.35);
}

.update-banner-text {
  font-size: 13.5px;
  font-weight: 600;
  color: #9a3412;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.update-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-update-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ea580c;
  color: #ffffff;
  border: none;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.3);
}

.btn-update-now:hover {
  background: #c2410c;
  transform: translateY(-1px);
}

.btn-update-now:active {
  transform: translateY(0);
}

.btn-update-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #9a3412;
  font-size: 16px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-update-dismiss:hover {
  background: rgba(154, 52, 18, 0.12);
  color: #7c2d12;
}

/* Nút Bản mới (Xóa sạch cache) trên Header */
.btn-refresh-cache {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn-refresh-cache:hover {
  background: #f8fafc;
  border-color: #ff6f0f;
  color: #ff6f0f;
  transform: translateY(-1px);
}

.btn-refresh-cache:active {
  transform: translateY(0);
}

.btn-refresh-cache svg {
  transition: transform 0.4s ease;
}

.btn-refresh-cache:hover svg {
  transform: rotate(180deg);
}

@media (max-width: 640px) {
  .app-update-banner {
    top: 50px;
    padding: 8px 12px;
    gap: 8px;
  }
  .update-banner-lead {
    gap: 6px;
  }
  .update-banner-badge {
    font-size: 10px;
    padding: 3px 7px;
  }
  .update-banner-text {
    font-size: 12px;
  }
  .btn-update-now {
    font-size: 11.5px;
    padding: 6px 10px;
  }
  .btn-refresh-cache {
    width: 36px;
    padding: 0;
    justify-content: center;
  }
  .btn-refresh-cache-text {
    display: none;
  }
}