/* ==========================================================================
   GIAO DIỆN MỚI (Ver.10) cho 3 trang tạo bảng giá — thanh trên + 2 cột, màu
   thương hiệu Việt Thương Music. Nạp SAU style.css của từng trang.

   QUY TẮC QUAN TRỌNG: KHÔNG sửa bất cứ thứ gì BÊN TRONG khung #a5paper (mẫu
   bảng giá in ra) — vị trí, cỡ chữ, font của mẫu in giữ nguyên như cũ. Vì mẫu
   in ăn theo font của <body>, file này KHÔNG đổi font của body, chỉ đổi font
   trong thanh trên (.app-topbar) và khung nhập liệu (.input-section).
   ========================================================================== */

body.vtm-app {
  --brand: #8b1e23;          /* đỏ đô Việt Thương Music */
  --brand-dark: #6c1519;
  --brand-soft: #f7e9e9;
  --bg: #f3f0ed;             /* nền "mặt bàn" xám ấm */
  --surface: #ffffff;
  --text: #2a2222;
  --muted: #7b706d;
  --line: #e5ddd8;
  --ui-font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  margin: 0;
  background: var(--bg);
}

/* ---------------- Thanh trên ---------------- */
body.vtm-app .app-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 60px;
  padding: 0 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 6px rgba(60, 30, 30, 0.06);
  font-family: var(--ui-font);
  color: var(--text);
}
body.vtm-app .app-brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
body.vtm-app .app-brand img { width: 34px; height: 34px; object-fit: contain; }
body.vtm-app .app-brand b { display: block; font-size: 15px; color: var(--brand); letter-spacing: 0.2px; }
body.vtm-app .app-brand span { display: block; font-size: 11px; color: var(--muted); }

/* Tab chọn layout */
body.vtm-app .mode-tabs {
  display: flex;
  background: #f1ebe8;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
body.vtm-app .mode-tabs a {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
body.vtm-app .mode-tabs a:hover { color: var(--brand); }
body.vtm-app .mode-tabs a.active {
  background: var(--surface);
  color: var(--brand);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Ô tìm bảng giá trong kho (kết quả xổ xuống dưới) */
body.vtm-app .topbar-search { position: relative; flex: 1; max-width: 420px; min-width: 200px; }
body.vtm-app .topbar-search .search-box { margin: 0; gap: 0; }
body.vtm-app .topbar-search .search-box input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 9px 0 0 9px;
  background: #faf8f7;
  font-family: var(--ui-font);
  font-size: 13px;
  color: var(--text);
}
body.vtm-app .topbar-search .search-box input:focus { outline: none; border-color: var(--brand); background-color: #fff; }
body.vtm-app .topbar-search .search-box button {
  height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 0 9px 9px 0;
  background: #faf8f7;
  color: var(--muted);
  font-size: 15px;
}
body.vtm-app .topbar-search .search-box button:hover { background: var(--brand-soft); color: var(--brand); }
body.vtm-app .topbar-search #searchResults {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  margin: 0;
  max-height: 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(40, 20, 20, 0.16);
  z-index: 120;
}
body.vtm-app .topbar-search #searchResults:empty { display: none; }
body.vtm-app .topbar-search #searchResults li { padding: 9px 12px; font-size: 13px; border-bottom: 1px solid #f2ecea; }
body.vtm-app .topbar-search #searchResults li:hover { background: var(--brand-soft); color: var(--brand); }

/* Nút phụ + người dùng (góc phải) */
body.vtm-app .topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
body.vtm-app .tb-btn {
  height: 34px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: var(--ui-font);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
body.vtm-app .tb-btn:hover { background: #f4eeec; border-color: var(--line); }
body.vtm-app a.tb-btn { display: inline-flex; align-items: center; text-decoration: none; box-sizing: border-box; }
body.vtm-app .tb-btn.tb-quote { border-color: var(--brand); color: var(--brand); font-weight: 600; }
body.vtm-app .tb-btn.tb-quote:hover,
body.vtm-app .tb-btn.tb-quote.active { background: var(--brand); border-color: var(--brand); color: #fff; }
body.vtm-app #userBadge {
  margin-left: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  flex-wrap: nowrap;
  font-family: var(--ui-font);
}
body.vtm-app #userBadge .user-name {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.vtm-app #userBadge .user-link { color: var(--brand); }
body.vtm-app #userBadge .gauth-btn {
  padding: 6px 12px;
  border-radius: 8px;
  background: transparent;
  color: var(--brand);
  border: 1px solid #e3c9c9;
  box-shadow: none;
  font-weight: 600;
}
body.vtm-app #userBadge .gauth-btn:hover { background: var(--brand-soft); transform: none; }

/* ---------------- Bố cục 2 cột ---------------- */
body.vtm-app .container {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  margin: 0;
  padding: 20px 24px 40px;
}

/* Cột trái: khung nhập liệu — dính theo khi cuộn, tự cuộn bên trong */
body.vtm-app .input-section {
  flex: 0 0 440px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: var(--ui-font);
  color: var(--text);
  scrollbar-width: thin;
}

/* Mỗi nhóm thông tin là 1 thẻ */
body.vtm-app .form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px 14px;
  margin-bottom: 10px;
}
body.vtm-app .input-section .form-card > h3,
body.vtm-app .input-section .form-card > h4 {
  margin: 0 0 8px;
  padding: 0;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--brand);
}

/* Ô nhập: nhãn + ô, xếp lưới 2 cột; ô dài chiếm cả hàng */
body.vtm-app .form-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px 10px; }  /* 6 cột: nửa hàng = 3, 1/3 hàng = 2 */
body.vtm-app .field { grid-column: 1 / -1; min-width: 0; }
body.vtm-app .field.col-half { grid-column: span 3; }
body.vtm-app .field.col-third { grid-column: span 2; }
/* KHÔNG đặt tên class là "half" — trùng class nửa tờ A5 của mẫu in */
body.vtm-app .input-section label {
  display: block;
  margin: 0 0 3px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4a403e;
}
/* Ô bắt buộc: dấu * đỏ sau nhãn (thay cho viền đỏ/xanh trước đây) */
body.vtm-app .field:has([required]) > label::after { content: " *"; color: var(--brand); }

body.vtm-app .input-section input[type="text"],
body.vtm-app .input-section input[type="email"],
body.vtm-app .input-section textarea,
body.vtm-app .input-section select {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid #d9cfca;
  border-radius: 8px;
  background: #fff;
  font-family: var(--ui-font);
  font-size: 13.5px;
  color: var(--text);
  box-shadow: none;
}
body.vtm-app .input-section textarea { resize: vertical; min-height: 76px; line-height: 1.45; }
body.vtm-app .input-section input::placeholder,
body.vtm-app .input-section textarea::placeholder { color: #aaa09c; }
body.vtm-app .input-section input:focus,
body.vtm-app .input-section textarea:focus,
body.vtm-app .input-section select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(139, 30, 35, 0.12);
}
body.vtm-app .autocomplete-list { width: 100%; box-sizing: border-box; border-color: #d9cfca; }
body.vtm-app .autocomplete-list div:hover,
body.vtm-app .autocomplete-list div.active { background: var(--brand-soft); }

/* Bảng phụ kiện (trang Drum) */
body.vtm-app #accessoryTable { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
body.vtm-app #accessoryTable th { font-size: 11.5px; color: var(--muted); text-align: left; padding: 4px; }
body.vtm-app #accessoryTable td { padding: 3px; vertical-align: top; }
body.vtm-app .form-card > button:not(.gauth-btn) {
  padding: 7px 12px;
  border: 1px dashed var(--brand);
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--brand);
  font-family: var(--ui-font);
  font-weight: 600;
  cursor: pointer;
}

/* Thanh nút chính: dính ở đáy cột trái (không còn đè lên bản xem trước) */
body.vtm-app .input-section .fixed-buttons {
  position: sticky;
  bottom: 0;
  right: auto;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  margin: 0;
  padding: 12px 0 2px;
  border: none;
  border-radius: 0;
  background: linear-gradient(to bottom, rgba(243, 240, 237, 0), var(--bg) 30%);
  box-shadow: none;
}
body.vtm-app .fixed-buttons button {
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
  transform: none;
}
body.vtm-app .fixed-buttons .btn-clear { background: #fff; color: var(--muted); border: 1px solid #d9cfca; }
body.vtm-app .fixed-buttons .btn-clear:hover { color: #b3261e; border-color: #e0b4b1; background: #fff; transform: none; }
body.vtm-app .fixed-buttons .btn-save-drive { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
body.vtm-app .fixed-buttons .btn-save-drive:hover { background: var(--brand-soft); transform: none; }
body.vtm-app .fixed-buttons .btn-export { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
body.vtm-app .fixed-buttons .btn-export:hover { background: var(--brand-dark); transform: none; }

/* ---------------- Cột phải: bản xem trước ---------------- */
/* Chỉ thêm nền trắng + bóng đổ quanh khung (bên trong khung không đổi gì).
   html2canvas vẫn chụp nền trắng như trước. */
body.vtm-app #a5paper {
  background: #fff;
  box-shadow: 0 6px 24px rgba(60, 30, 30, 0.14);
  margin-bottom: 120px;
}
/* Bản xem trước A5 ngang giống thành phẩm: nền đỏ, logo vàng trên mỗi nửa, vùng
   cắt (nét đứt) nền trắng, ô "Đơn vị nhập khẩu" dưới khung phải. Giấy in đã có sẵn
   phần này nên khi xuất PDF (class a5-capturing) tắt hết — file in không đổi. */
body.vtm-app #a5paper.a5-landscape:not(.a5-capturing) {
  background-color: #7d2128;
  background-image: url("a5-logotype.png"), url("a5-logotype.png"), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  /* vùng trắng = đúng khung nét đứt, tính cả viền 1px mỗi bên (+2px) */
  background-size: 67mm auto, 67mm auto, calc(90mm + 2px) calc(115mm + 2px), calc(90mm + 2px) calc(91mm + 2px);
  background-position: 19mm 7.5mm, 124mm 7.5mm, 8mm 28mm, calc(112mm - 2px) 28mm;
}
body.vtm-app #a5paper > .a5-skin-info { display: none; }
body.vtm-app #a5paper.a5-landscape:not(.a5-capturing) > .a5-skin-info {
  position: absolute;
  left: calc(112mm - 2px);
  top: 123mm;
  width: calc(90mm + 2px);
  height: 19mm;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 3mm;
  padding: 0 3mm 0 4mm;
  background: #f3f1f0;
  font-size: 7.6px;
  line-height: 1.3;
  color: #2a2222;
  pointer-events: none;
}
body.vtm-app #a5paper > .a5-skin-info img { width: 9mm; height: auto; flex: 0 0 9mm; }
body.vtm-app #a5paper > .a5-skin-info b { font-size: 8px; }
/* Ghi chú khổ giấy nằm gọn ngay dưới khung */
body.vtm-app #a5paper > .note {
  top: calc(100% + 16px);
  bottom: auto;
  margin: 0;
  left: 0;
  right: 0;
  transform: none;
  font-family: var(--ui-font);
  line-height: 1.4;
  color: var(--muted);
}
body.vtm-app #a5paper > .a5-image {
  top: calc(100% + 66px);
  bottom: auto;
  left: 0;
  right: auto;
  width: 100%;
  transform: none;
  scale: none;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
body.vtm-app .a5-portrait { margin-top: 26px; }
/* Thứ không phải ô nhập (bảng phụ kiện, nút thêm dòng...) luôn chiếm cả hàng */
body.vtm-app .form-grid > :not(.field) { grid-column: 1 / -1; }
body.vtm-app .input-section label .hint { font-weight: 400; color: var(--muted); font-size: 11.5px; }
body.vtm-app .input-section label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Thanh cuộn của cột trái: chừa rãnh riêng bên phải để không đè lên mép các thẻ,
   làm mảnh + nhạt màu, chỉ đậm lên khi rê chuột vào. */
body.vtm-app .input-section {
  flex-basis: 452px;
  padding-right: 8px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #d8cdc8 transparent;
}
body.vtm-app .input-section:hover { scrollbar-color: #bfaea8 transparent; }
body.vtm-app .input-section::-webkit-scrollbar { width: 8px; }
body.vtm-app .input-section::-webkit-scrollbar-track { background: transparent; }
body.vtm-app .input-section::-webkit-scrollbar-thumb { background: #d8cdc8; border-radius: 8px; }
body.vtm-app .input-section:hover::-webkit-scrollbar-thumb { background: #bfaea8; }
/* Cuộn tới đầu/cuối khung nhập liệu thì dừng, không "chuyền" sang cuộn cả trang */
body.vtm-app .input-section { overscroll-behavior: contain; }

/* Ô thông báo: nằm cố định 1 chỗ trên trang (KHÔNG dính theo khi cuộn) */
body.vtm-app .preview-col { flex: 0 0 auto; display: flex; flex-direction: column; }
/* Màn hình rộng: cột thứ 3, bên phải bản xem trước */
body.vtm-app .container > #notifyPanel.side {
  flex: 1 1 280px;
  min-width: 260px;
  max-width: 380px;
  align-self: flex-start;
}
body.vtm-app .container > #notifyPanel.side .n-list { max-height: 420px; }
/* Màn hình hẹp: ngay phía trên bản xem trước */
body.vtm-app .preview-col > #notifyPanel.top { margin-bottom: 14px; }
body.vtm-app .preview-col > #notifyPanel.top .n-list { max-height: 96px; }

/* Màn hình hẹp (laptop): thanh trên gọn lại — ẩn tên showroom, nút phụ chỉ còn biểu tượng
   (rê chuột vẫn hiện chữ đầy đủ) */
@media (max-width: 1599px) {
  body.vtm-app #userBadge .user-showroom { display: none; }
  body.vtm-app .app-topbar { gap: 12px; }
}
@media (max-width: 1449px) {
  body.vtm-app .tb-btn { padding: 0 8px; }
  body.vtm-app #userBadge .user-name { max-width: 150px; }
}

/* ==========================================================================
   MÀU THƯƠNG HIỆU CHO MỌI HỘP THOẠI (thay xanh dương / xanh lá / tím cũ)
   Nút chính: nền đỏ đô chữ trắng. Nút phụ: nền trắng viền xám. Link: đỏ đô.
   ========================================================================== */
body.vtm-app #confirmModal .modal-content,
body.vtm-app #tipsModal .modal-content,
body.vtm-app #myCheckModal .modal-content,
body.vtm-app :is(#fileBrowserModal, #originModal, #accountModal) .modal-content {
  font-family: var(--ui-font);
  color: var(--text);
  border-radius: 14px;
}
body.vtm-app #confirmModal h3,
body.vtm-app #tipsModal h3,
body.vtm-app #myCheckModal h3,
body.vtm-app :is(#fileBrowserModal, #originModal, #accountModal) h3 { color: var(--text); }
body.vtm-app #confirmModal .modal-buttons { justify-content: flex-end; gap: 8px; }
body.vtm-app #confirmModal .modal-buttons button,
body.vtm-app #tipsModal button,
body.vtm-app #myCheckModal button {
  padding: 8px 16px;
  border: 1px solid #d9cfca;
  border-radius: 9px;
  background: #fff;
  color: var(--text);
  font-family: var(--ui-font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
body.vtm-app #confirmModal .modal-buttons button:hover,
body.vtm-app #tipsModal button:hover,
body.vtm-app #myCheckModal button:hover { background: #f4eeec; }
/* Nút chính = nút đầu tiên (Lưu đè & Xuất PDF / Mở bảng giá có sẵn / Gửi / Kiểm tra bảng giá của tôi...) */
body.vtm-app #confirmModal .modal-buttons button:first-child,
body.vtm-app #tipsModal button:first-of-type {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
body.vtm-app #confirmModal .modal-buttons button:first-child:hover,
body.vtm-app #tipsModal button:first-of-type:hover { background: var(--brand-dark); }
body.vtm-app #confirmModal .modal-buttons button:disabled { opacity: 0.6; cursor: wait; }
/* Ô nhập, nút chọn, ô tick trong hộp thoại */
body.vtm-app #confirmModal textarea:focus,
body.vtm-app #confirmModal input:focus,
body.vtm-app :is(#fileBrowserModal, #originModal, #accountModal) .fb-search:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(139, 30, 35, 0.12);
}
body.vtm-app #confirmModal input[type=radio],
body.vtm-app #confirmModal input[type=checkbox] { accent-color: var(--brand); }

/* Hướng dẫn sử dụng: canh trái cho dễ đọc */
body.vtm-app #tipsModal .modal-content {
  width: min(760px, 92vw);
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 26px;
  text-align: left;
  box-sizing: border-box;
}
body.vtm-app #tipsModal h3 { font-size: 16px; margin: 0 0 6px; }
body.vtm-app #tipsModal h3 + pre { margin-top: 0; }
body.vtm-app #tipsModal pre { font-family: var(--ui-font); font-size: 13.5px; line-height: 1.6; color: #3b3231; }
body.vtm-app #tipsModal a,
body.vtm-app #myCheckModal a { color: var(--brand); }

/* Kho bảng giá */
body.vtm-app :is(#fileBrowserModal, #originModal, #accountModal) .fb-actions a { color: var(--brand); }
body.vtm-app :is(#fileBrowserModal, #originModal, #accountModal) .fb-table th { background: #f7f2f0; }
body.vtm-app :is(#fileBrowserModal, #originModal, #accountModal) .fb-table tbody tr:hover { background: #fbf7f6; }

/* Báo lỗi / Góp ý: ô ẩn danh theo tông xám ấm thay vì xanh lá */
body.vtm-app .feedback-form .feedback-anon { background: #f7f2f0; color: #5a4f4c; }
body.vtm-app .feedback-form .feedback-hint { color: var(--muted); }

/* Kiểm tra bảng giá của tôi */
body.vtm-app .mycheck-progress-bar { background: var(--brand); }

/* Cửa sổ "Thông tin dành cho bạn" (BIG UPDATE) — màu thương hiệu, canh trái cho dễ đọc */
body.vtm-app #modal .modal-content {
  width: min(620px, 92vw);
  padding: 24px 28px 20px;
  border-radius: 14px;
  text-align: left;
  font-family: var(--ui-font);
  color: var(--text);
  box-sizing: border-box;
}
body.vtm-app #modal h3 { text-align: center; font-size: 18px; line-height: 1.35; margin: 0 0 14px; color: var(--brand); }
body.vtm-app #modal .modal-info p { margin: 0 0 11px; font-size: 14px; line-height: 1.55; }
body.vtm-app #modal .modal-info b { color: #2a2222; }
body.vtm-app #modal .modal-info b.req { color: var(--brand); }
body.vtm-app #modal .modal-info .modal-contact { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
body.vtm-app #modal .modal-info a { color: var(--brand); text-decoration: underline; }
body.vtm-app #modal .modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
body.vtm-app #modal .modal-actions button {
  margin: 0;
  padding: 9px 18px;
  border-radius: 9px;
  font-family: var(--ui-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
body.vtm-app #modal #closeBtn { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
body.vtm-app #modal #closeBtn:hover { background: var(--brand-dark); }
body.vtm-app #modal #dontShowBtn { background: #fff; border: 1px solid #d9cfca; color: var(--text); }
body.vtm-app #modal #dontShowBtn:hover { background: #f4eeec; }
/* Màn hình 1280-1365px: thu gọn khoảng cách để thanh trên không bị tràn */
@media (max-width: 1449px) {
  body.vtm-app .app-topbar { gap: 10px; padding: 0 14px; }
  body.vtm-app .mode-tabs a { padding: 7px 10px; }
  body.vtm-app .topbar-search { min-width: 150px; }
  body.vtm-app .topbar-actions { gap: 2px; }
  body.vtm-app .tb-btn { padding: 0 7px; }
  body.vtm-app #userBadge { margin-left: 4px; padding-left: 10px; gap: 8px; }
  body.vtm-app #userBadge .user-name { max-width: 110px; }
}
/* Màn hình 1280-1365px: bớt khoảng trống 2 bên để cột nhập liệu + bản xem trước A5 (cố định 210mm) vừa màn hình */
@media (max-width: 1365px) {
  body.vtm-app .container { padding: 16px 10px 40px; gap: 14px; }
  body.vtm-app .input-section { flex-basis: 440px; }
}

/* ==========================================================================
   HƯỚNG DẪN TỪNG BƯỚC — màn tối, phần đang giới thiệu được làm sáng
   ========================================================================== */
#vtmTourBlock { position: fixed; inset: 0; z-index: 20000; background: transparent; }
#vtmTourHole {
  position: fixed;
  z-index: 20001;
  border-radius: 10px;
  box-shadow: 0 0 0 200vmax rgba(25, 12, 12, 0.58);
  outline: 2px solid #fff;
  pointer-events: none;
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
#vtmTourCard {
  position: fixed;
  z-index: 20002;
  width: 360px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 16px 18px 14px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: #2a2222;
}
#vtmTourCard.tour-center { width: 480px; }
#vtmTourCard .tour-count { font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #8b1e23; }
#vtmTourCard h4 { margin: 4px 0 6px; font-size: 16px; }
#vtmTourCard p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.55; color: #3b3231; }
#vtmTourCard .tour-list { margin: 0 0 10px; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }
#vtmTourCard .tour-links a { color: #8b1e23; }
#vtmTourCard .tour-contact { font-size: 12.5px; color: #7b706d; border-top: 1px solid #e5ddd8; padding-top: 8px; }
#vtmTourCard .tour-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
#vtmTourCard .tour-actions span { display: flex; gap: 8px; }
#vtmTourCard button {
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid #d9cfca;
  background: #fff;
  color: #2a2222;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#vtmTourCard button:hover { background: #f4eeec; }
#vtmTourCard button.tour-skip { border-color: transparent; color: #7b706d; padding-left: 0; }
#vtmTourCard button.tour-skip:hover { background: transparent; text-decoration: underline; }
#vtmTourCard button.tour-next { background: #8b1e23; border-color: #8b1e23; color: #fff; }
#vtmTourCard button.tour-next:hover { background: #6c1519; }