/* ==========================================================================
   TMR COMBO BUILDER - PREMIUM LUXURY UI (V1.6.4 COMPACT REDESIGN)
   Tone: Đỏ Booc-đô (#8B1A2B), Vàng Gold (#C5A44E), Kem (#FCFAF6)
   ========================================================================== */

:root {
  --tmr-maroon: #8B1A2B;
  --tmr-maroon-dark: #630C1A;
  --tmr-maroon-light: #FBF0F2;
  --tmr-gold: #C5A44E;
  --tmr-gold-dark: #9A7C2C;
  --tmr-gold-light: #FBF7EE;
  --tmr-gold-border: rgba(197, 164, 78, 0.35);
  --tmr-cream: #FCFAF6;
  --tmr-cream-card: #F7F3EA;
  --tmr-dark: #231F20;
  --tmr-muted: #6B6865;
  --tmr-border: #E8E2D6;
  --tmr-white: #FFFFFF;
  --tmr-green: #2E7D32;
  --tmr-radius: 12px;
  --tmr-radius-sm: 8px;
  --tmr-shadow: 0 4px 16px rgba(35, 31, 32, 0.06);
  --tmr-shadow-lg: 0 10px 30px rgba(35, 31, 32, 0.1);
}

#tmr-combo-app {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  color: var(--tmr-dark) !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 12px 14px !important;
  box-sizing: border-box !important;
  line-height: 1.45 !important;
}

#tmr-combo-app *,
#tmr-combo-app *::before,
#tmr-combo-app *::after {
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BỐ CỤC TỔNG THỂ 2 CỘT (DESKTOP & TABLET)
   ══════════════════════════════════════════════════════════════════════════ */
#tmr-combo-app .tmr-main-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
}

/* Desktop: Trái (64%) & Phải (36%) */
@media (min-width: 992px) {
  #tmr-combo-app .tmr-main-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1.15fr) !important;
    gap: 20px !important;
    align-items: start !important;
  }
}

/* Tablet (768px - 991px): 58% & 42% */
@media (min-width: 768px) and (max-width: 991px) {
  #tmr-combo-app .tmr-main-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.3fr) !important;
    gap: 16px !important;
    align-items: start !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CỘT TRÁI: HỘP QUÀ 3D + KHUNG CHỌN SẢN PHẨM
   ══════════════════════════════════════════════════════════════════════════ */
#tmr-combo-app .tmr-left-col {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ── 1. KHUNG QUÀ TẶNG (CÁC BƯỚC Ở TRÊN CÙNG + HỘP 3D) ── */
#tmr-combo-app .tmr-box-preview-card {
  background: var(--tmr-cream) !important;
  border: 1.5px solid var(--tmr-gold-border) !important;
  border-radius: var(--tmr-radius) !important;
  padding: 10px 12px !important;
  box-shadow: var(--tmr-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  position: relative !important;
}

/* Thanh các bước đặt trên cùng mô phỏng hộp quà */
#tmr-combo-app .tmr-steps-header {
  width: 100% !important;
}

#tmr-combo-app .tmr-steps {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
}

#tmr-combo-app .tmr-step-ind {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 6px 4px !important;
  background: var(--tmr-white) !important;
  color: var(--tmr-muted) !important;
  border: 1.5px solid var(--tmr-border) !important;
  border-radius: 20px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  text-decoration: none !important;
  outline: none !important;
}

#tmr-combo-app .tmr-step-ind:hover:not(:disabled) {
  border-color: var(--tmr-gold) !important;
  background: var(--tmr-gold-light) !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-step-ind:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: #fbfaf8 !important;
}

#tmr-combo-app .tmr-step-num {
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  background: #ede9e1 !important;
  color: var(--tmr-dark) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}

/* Active Step */
#tmr-combo-app .tmr-step-ind.tmr-active {
  background: var(--tmr-maroon) !important;
  color: var(--tmr-white) !important;
  border-color: var(--tmr-maroon) !important;
  box-shadow: 0 2px 8px rgba(139,26,43,0.25) !important;
}

#tmr-combo-app .tmr-step-ind.tmr-active .tmr-step-num {
  background: var(--tmr-white) !important;
  color: var(--tmr-maroon) !important;
}

/* Completed Step */
#tmr-combo-app .tmr-step-ind.tmr-completed:not(.tmr-active) .tmr-step-num {
  background: var(--tmr-gold) !important;
  color: var(--tmr-white) !important;
}

@media (max-width: 520px) {
  #tmr-combo-app .tmr-step-text { display: none !important; }
  #tmr-combo-app .tmr-step-ind { padding: 5px 2px !important; border-radius: 6px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   HỘP QUÀ = ẢNH THỰC TẾ LÀM GIAO DIỆN
   Ảnh hộp quà thật hiển thị nguyên bản, các vùng click TRONG SUỐT đặt
   chồng lên đúng vị trí từng ngăn khay trong ảnh.
   Kích thước thực tế: 46.5cm x 30cm
   ══════════════════════════════════════════════════════════════════════════ */

#tmr-combo-app .tmr-scene {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
}

/* Container chính = position relative để chồng overlay slots lên ảnh */
#tmr-combo-app .tmr-box {
  position: relative !important;
  width: 100% !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25) !important;
  line-height: 0 !important;
}

/* Ảnh hộp quà thật = GD chính, responsive tự co giãn */
#tmr-combo-app .tmr-box-photo {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
}

/* ── CÁC VÙNG CLICK TRONG SUỐT CHỒNG LÊN ẢNH ──
   Toạ độ % đo từ ảnh đã crop (732×469px)
   Cánh trái:  left≈2.5%,  width≈18.5%
   Cánh phải:  left≈79%,   width≈18.5%
   Quà nhỏ:    top≈8%,     height≈37%
   Quà lớn:    top≈49%,    height≈44%
   Chai rượu:  left≈34%,   width≈32%, top≈4%, height≈92%
   ────────────────────────────────────────────── */

#tmr-combo-app .tmr-overlay-slot {
  position: absolute !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border: 2px dashed transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  transition: all 0.25s ease !important;
  overflow: hidden !important;
  padding: 3px !important;
  box-sizing: border-box !important;
  line-height: 1.3 !important;
}

/* Hover: viền vàng nhẹ hiện ra trên ảnh hộp */
#tmr-combo-app .tmr-overlay-slot:hover {
  border-color: rgba(197, 164, 78, 0.7) !important;
  background: rgba(197, 164, 78, 0.12) !important;
}

/* Khi đã chọn quà: nền trắng mờ + viền vàng */
#tmr-combo-app .tmr-overlay-slot.tmr-slot-filled {
  border: 2px solid var(--tmr-gold) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 3px 12px rgba(0,0,0,0.3) !important;
}

/* ── VỊ TRÍ % CÁC Ô TRÊN ẢNH ── */

/* Cánh trái - Quà nhỏ 1 (trên) */
#tmr-combo-app #tmr-slot-sl {
  left: 2.5% !important;
  top: 8% !important;
  width: 18.5% !important;
  height: 37% !important;
}
/* Cánh trái - Quà lớn 1 (dưới) */
#tmr-combo-app #tmr-slot-ll {
  left: 2.5% !important;
  top: 49% !important;
  width: 18.5% !important;
  height: 44% !important;
}
/* Giữa - Chai rượu (khuôn dập nổi) */
#tmr-combo-app #tmr-slot-bottle {
  left: 34% !important;
  top: 4% !important;
  width: 32% !important;
  height: 92% !important;
}
/* Cánh phải - Quà nhỏ 2 (trên) */
#tmr-combo-app #tmr-slot-sr {
  left: 79% !important;
  top: 8% !important;
  width: 18.5% !important;
  height: 37% !important;
}
/* Cánh phải - Quà lớn 2 (dưới) */
#tmr-combo-app #tmr-slot-lr {
  left: 79% !important;
  top: 49% !important;
  width: 18.5% !important;
  height: 44% !important;
}

/* ── CHAI RƯỢU KHI CHỌN: trong suốt, chai nổi trên khuôn ── */
#tmr-combo-app #tmr-slot-bottle.tmr-slot-filled {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#tmr-combo-app #tmr-slot-bottle.tmr-slot-filled img.tmr-bottle-img {
  max-height: 85% !important;
  max-width: 80% !important;
  object-fit: contain !important;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.65)) !important;
}

#tmr-combo-app #tmr-slot-bottle.tmr-slot-filled .tmr-bottle-lbl {
  background: rgba(20, 2, 5, 0.88) !important;
  color: #F8D37E !important;
  border: 1px solid rgba(197, 164, 78, 0.5) !important;
  padding: 2px 8px !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
  white-space: nowrap !important;
  max-width: 95% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── ẢNH QUÀ TRONG Ô ── */
#tmr-combo-app .tmr-overlay-slot img {
  max-width: 85% !important;
  max-height: 60% !important;
  object-fit: contain !important;
}

#tmr-combo-app .tmr-slot-placeholder {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: rgba(197, 164, 78, 0.8) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

#tmr-combo-app .tmr-overlay-slot .tmr-lbl,
#tmr-combo-app .tmr-overlay-slot .tmr-bottle-lbl {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-align: center !important;
  max-width: 95% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#tmr-combo-app .tmr-slot-tag {
  font-size: 8.5px !important;
  font-weight: 700 !important;
  color: var(--tmr-maroon-dark) !important;
  margin-top: 1px !important;
  text-align: center !important;
  max-width: 95% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 600px) {
  #tmr-combo-app .tmr-slot-placeholder {
    font-size: 7px !important;
  }
  #tmr-combo-app .tmr-slot-tag {
    font-size: 7px !important;
  }
  #tmr-combo-app #tmr-slot-bottle.tmr-slot-filled .tmr-bottle-lbl {
    font-size: 8px !important;
    padding: 1px 4px !important;
  }
}

/* ── NẮP HỘP (2 Cánh) ── */
#tmr-combo-app .tmr-scene {
  perspective: 1200px !important;
}

#tmr-combo-app .tmr-doors-container {
  position: absolute !important;
  inset: 0 !important;
  z-index: 10 !important;
  perspective: 1400px !important;
  transform-style: preserve-3d !important;
}

#tmr-combo-app .tmr-door {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 50% !important;
  background-image: url('images/tmr-box-closed.png');
  background-size: 200% 100% !important;
  background-repeat: no-repeat !important;
  transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.28, 1), opacity 0.18s ease !important;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.3) !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity !important;
}

#tmr-combo-app .tmr-door-left {
  left: 0 !important;
  background-position: left center !important;
  transform-origin: left center !important;
}

#tmr-combo-app .tmr-door-right {
  right: 0 !important;
  background-position: right center !important;
  transform-origin: right center !important;
}

/* Khi mở nắp */
#tmr-combo-app .tmr-doors-container.tmr-open {
  pointer-events: none !important;
}

#tmr-combo-app .tmr-doors-container.tmr-open .tmr-door-left {
  transform: rotateY(-102deg) translateZ(1px) !important;
  opacity: 0 !important;
  transition-delay: 0s, 0.58s !important;
}

#tmr-combo-app .tmr-doors-container.tmr-open .tmr-door-right {
  transform: rotateY(102deg) translateZ(1px) !important;
  opacity: 0 !important;
  transition-delay: 0s, 0.58s !important;
}

/* Lớp text "Chọn rượu" phủ lên nắp */
#tmr-combo-app .tmr-lid-text-overlay {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  background: rgba(40, 4, 9, 0.8) !important;
  padding: 12px 20px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(197, 164, 78, 0.5) !important;
  color: #fff !important;
  transition: opacity 0.3s ease !important;
  z-index: 11 !important;
}

#tmr-combo-app .tmr-doors-container.tmr-open .tmr-lid-text-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

#tmr-combo-app .tmr-lid-emblem {
  font-size: 26px !important;
  margin-bottom: 4px !important;
}

#tmr-combo-app .tmr-lid-text {
  color: #FFFFFF !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Điều khiển mở/đóng nằm ngoài ảnh để không che sản phẩm trong hộp. */
#tmr-combo-app .tmr-box-controls {
  display: flex !important;
  justify-content: center !important;
  margin-top: 2px !important;
}

#tmr-combo-app .tmr-box-toggle {
  appearance: none !important;
  border: 1px solid var(--tmr-gold-dark) !important;
  border-radius: 999px !important;
  background: var(--tmr-maroon) !important;
  color: var(--tmr-white) !important;
  padding: 7px 14px !important;
  font: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(99, 12, 26, 0.2) !important;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease !important;
}

#tmr-combo-app .tmr-box-toggle:hover:not(:disabled) {
  background: var(--tmr-maroon-dark) !important;
  transform: translateY(-1px) !important;
}

#tmr-combo-app .tmr-box-toggle:disabled {
  cursor: not-allowed !important;
  opacity: 0.62 !important;
  background: #8f817f !important;
  border-color: #8f817f !important;
}

#tmr-combo-app .tmr-pop-in {
  animation: tmrPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes tmrPopIn {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

/* Status Pills under Box */
#tmr-combo-app .tmr-box-status-pills {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

#tmr-combo-app .tmr-pill {
  flex: 1 !important;
  min-width: 75px !important;
  background: var(--tmr-white) !important;
  border: 1px solid var(--tmr-border) !important;
  border-radius: 20px !important;
  padding: 3px 6px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--tmr-muted) !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#tmr-combo-app .tmr-pill span {
  color: var(--tmr-maroon) !important;
  font-weight: 800 !important;
}


/* ── 2. KHU VỰC CHỌN SẢN PHẨM & QUÀ TẶNG (TÍCH HỢP NÚT TIẾP THEO NHỎ GỌN) ── */
#tmr-combo-app .tmr-selection-section {
  background: var(--tmr-white) !important;
  border: 1.5px solid var(--tmr-border) !important;
  border-radius: var(--tmr-radius) !important;
  padding: 12px 14px !important;
  box-shadow: var(--tmr-shadow) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Thanh Header nhỏ gọn tích hợp tiêu đề bước + nút chuyển */
#tmr-combo-app .tmr-selection-topbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding-bottom: 8px !important;
  border-bottom: 1.5px dashed var(--tmr-gold-border) !important;
}

#tmr-combo-app .tmr-step-desc-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13.5px !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-step-desc-icon {
  font-size: 14px !important;
}

#tmr-combo-app .tmr-step-desc-text strong {
  color: var(--tmr-maroon) !important;
  font-weight: 800 !important;
}

#tmr-combo-app .tmr-badge-count {
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
  background: var(--tmr-maroon-light) !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  margin-left: 4px !important;
}

/* Nút điều hướng nhỏ gọn (Compact Navigation Buttons) */
#tmr-combo-app .tmr-nav-compact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#tmr-combo-app .tmr-btn-sm {
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

#tmr-combo-app .tmr-btn-primary.tmr-btn-sm {
  background: var(--tmr-maroon) !important;
  color: var(--tmr-white) !important;
  border: none !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(139,26,43,0.22) !important;
}

#tmr-combo-app .tmr-btn-primary.tmr-btn-sm:hover:not(:disabled) {
  background: var(--tmr-maroon-dark) !important;
  box-shadow: 0 3px 10px rgba(139,26,43,0.3) !important;
}

#tmr-combo-app .tmr-btn-primary.tmr-btn-sm:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

#tmr-combo-app .tmr-btn-ghost.tmr-btn-sm {
  background: var(--tmr-white) !important;
  border: 1px solid var(--tmr-border) !important;
  color: var(--tmr-muted) !important;
  font-weight: 600 !important;
}

#tmr-combo-app .tmr-btn-ghost.tmr-btn-sm:hover {
  border-color: var(--tmr-dark) !important;
  color: var(--tmr-dark) !important;
  background: var(--tmr-cream) !important;
}

#tmr-combo-app .tmr-spinner {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid rgba(255,255,255,0.3) !important;
  border-top-color: #ffffff !important;
  border-radius: 50% !important;
  animation: tmrSpin 0.7s linear infinite !important;
  display: inline-block !important;
}

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

/* Step Panels */
#tmr-combo-app .tmr-step-panel {
  width: 100% !important;
  animation: tmrFadeSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

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

/* Product Cards Grid */
#tmr-combo-app .tmr-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: 10px !important;
}

@media (min-width: 1200px) {
  #tmr-combo-app .tmr-grid {
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)) !important;
  }
}

#tmr-combo-app .tmr-card {
  background: var(--tmr-white) !important;
  border: 1.5px solid var(--tmr-border) !important;
  border-radius: var(--tmr-radius-sm) !important;
  padding: 8px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.22s ease !important;
  background-clip: padding-box !important;
}

#tmr-combo-app .tmr-card:hover {
  border-color: var(--tmr-gold) !important;
  box-shadow: 0 4px 12px rgba(197, 164, 78, 0.2) !important;
  transform: translateY(-2px) !important;
}

#tmr-combo-app .tmr-card.tmr-selected {
  border-color: var(--tmr-maroon) !important;
  background: var(--tmr-maroon-light) !important;
  box-shadow: 0 0 0 1.5px var(--tmr-maroon), 0 4px 14px rgba(139, 26, 43, 0.18) !important;
}

#tmr-combo-app .tmr-card-badge-check {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: var(--tmr-border) !important;
  color: var(--tmr-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  transition: all 0.2s ease !important;
}

#tmr-combo-app .tmr-card.tmr-selected .tmr-card-badge-check {
  background: var(--tmr-maroon) !important;
  transform: scale(1.08) !important;
}

#tmr-combo-app .tmr-ic {
  width: 100% !important;
  height: 80px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 6px !important;
  overflow: hidden !important;
}

#tmr-combo-app .tmr-ic img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  transition: transform 0.3s ease !important;
}

#tmr-combo-app .tmr-card:hover .tmr-ic img {
  transform: scale(1.05) !important;
}

#tmr-combo-app .tmr-ic-fallback {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--tmr-cream-card) !important;
  color: var(--tmr-gold-dark) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

#tmr-combo-app .tmr-card-info {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

#tmr-combo-app .tmr-nm {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--tmr-dark) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 30px !important;
}

#tmr-combo-app .tmr-pr {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
  margin: 0 !important;
}

/* Card Drawer Accordion */
#tmr-combo-app .tmr-btn-drawer-toggle {
  margin-top: 4px !important;
  padding: 2px 6px !important;
  background: var(--tmr-cream) !important;
  border: 1px solid var(--tmr-border) !important;
  border-radius: 4px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--tmr-muted) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  transition: all 0.18s ease !important;
  outline: none !important;
}

#tmr-combo-app .tmr-btn-drawer-toggle:hover {
  background: var(--tmr-gold-light) !important;
  color: var(--tmr-gold-dark) !important;
  border-color: var(--tmr-gold-border) !important;
}

#tmr-combo-app .tmr-card-drawer {
  width: 100% !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s cubic-bezier(0, 1, 0, 1) !important;
  text-align: left !important;
  font-size: 10.5px !important;
  color: var(--tmr-dark) !important;
  line-height: 1.35 !important;
}

#tmr-combo-app .tmr-card.tmr-drawer-open .tmr-card-drawer {
  max-height: 160px !important;
  transition: max-height 0.35s ease-in-out !important;
}

#tmr-combo-app .tmr-drawer-inner {
  margin-top: 6px !important;
  padding: 6px 8px !important;
  background: var(--tmr-cream) !important;
  border-radius: 6px !important;
  border: 1px solid var(--tmr-gold-border) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

#tmr-combo-app .tmr-drawer-item strong {
  color: var(--tmr-gold-dark) !important;
}

/* ── BƯỚC 4: CHI TIẾT CHỐT ĐƠN ── */
#tmr-combo-app .tmr-checkout-details-card {
  width: 100% !important;
}

#tmr-combo-app .tmr-checkout-table {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#tmr-combo-app .tmr-checkout-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 10px !important;
  background: var(--tmr-cream) !important;
  border: 1px solid var(--tmr-border) !important;
  border-radius: 8px !important;
}

#tmr-combo-app .tmr-checkout-item-main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#tmr-combo-app .tmr-checkout-thumb {
  width: 34px !important;
  height: 34px !important;
  border-radius: 6px !important;
  background: var(--tmr-white) !important;
  border: 1px solid var(--tmr-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

#tmr-combo-app .tmr-checkout-thumb img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

#tmr-combo-app .tmr-checkout-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

#tmr-combo-app .tmr-checkout-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  display: inline-block !important;
  color: var(--tmr-muted) !important;
}

#tmr-combo-app .tmr-checkout-badge.tmr-badge-wine { color: var(--tmr-maroon) !important; }
#tmr-combo-app .tmr-checkout-badge.tmr-badge-box { color: var(--tmr-gold-dark) !important; }
#tmr-combo-app .tmr-checkout-badge.tmr-badge-small { color: var(--tmr-green) !important; }
#tmr-combo-app .tmr-checkout-badge.tmr-badge-large { color: #A83232 !important; }

#tmr-combo-app .tmr-checkout-name {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-checkout-price {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
  white-space: nowrap !important;
}

#tmr-combo-app .tmr-checkout-summary-block {
  margin-top: 8px !important;
  padding: 8px 10px !important;
  background: var(--tmr-gold-light) !important;
  border: 1px solid var(--tmr-gold-border) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#tmr-combo-app .tmr-summary-line {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 12px !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-summary-grand-total {
  border-top: 1.5px dashed var(--tmr-gold-border) !important;
  padding-top: 5px !important;
  margin-top: 2px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
}

#tmr-combo-app .tmr-grand-price {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
}

/* ── COMBO CÓ SẴN (GỢI Ý) ── */
#tmr-combo-app .tmr-combo-section {
  margin-top: 6px !important;
  padding-top: 8px !important;
  border-top: 1px dashed var(--tmr-border) !important;
}

#tmr-combo-app .tmr-combo-heading {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
  margin: 0 0 2px 0 !important;
}

#tmr-combo-app .tmr-combo-desc {
  font-size: 11px !important;
  color: var(--tmr-muted) !important;
  margin: 0 0 8px 0 !important;
}

#tmr-combo-app .tmr-combo-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 8px !important;
}

#tmr-combo-app .tmr-combo-item {
  background: var(--tmr-cream) !important;
  border: 1px solid var(--tmr-gold-border) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

#tmr-combo-app .tmr-combo-item:hover {
  background: var(--tmr-gold-light) !important;
  border-color: var(--tmr-gold) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(197,164,78,0.2) !important;
}

#tmr-combo-app .tmr-combo-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 8px !important;
}

#tmr-combo-app .tmr-cname {
  font-size: 12px !important;
  font-weight: 700 !important;
  margin: 0 0 2px 0 !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-cdesc {
  font-size: 10px !important;
  color: var(--tmr-muted) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#tmr-combo-app .tmr-combo-action {
  text-align: right !important;
  flex-shrink: 0 !important;
}

#tmr-combo-app .tmr-cprice {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
  margin: 0 0 2px 0 !important;
}

#tmr-combo-app .tmr-combo-btn {
  display: inline-block !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  background: var(--tmr-maroon) !important;
  color: var(--tmr-white) !important;
  border-radius: 4px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   CỘT PHẢI: BẢNG TÍNH TIỀN COMBO (STICKY SIDEBAR)
   ══════════════════════════════════════════════════════════════════════════ */
#tmr-combo-app .tmr-right-col {
  width: 100% !important;
}

#tmr-combo-app .tmr-sticky-sidebar {
  position: sticky !important;
  top: 16px !important;
  z-index: 20 !important;
}

#tmr-combo-app .tmr-price-calculator {
  background: var(--tmr-white) !important;
  border: 1.5px solid var(--tmr-gold-border) !important;
  border-radius: var(--tmr-radius) !important;
  padding: 12px 14px !important;
  box-shadow: var(--tmr-shadow-lg) !important;
}

#tmr-combo-app .tmr-calc-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-bottom: 8px !important;
  border-bottom: 1.5px solid var(--tmr-gold-border) !important;
  margin-bottom: 8px !important;
}

#tmr-combo-app .tmr-calc-title {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
}

#tmr-combo-app .tmr-calc-badge {
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 7px !important;
  border-radius: 12px !important;
  background: var(--tmr-gold-light) !important;
  color: var(--tmr-gold-dark) !important;
  border: 1px solid var(--tmr-gold-border) !important;
}

#tmr-combo-app .tmr-calc-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

#tmr-combo-app .tmr-calc-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 11.5px !important;
  color: var(--tmr-dark) !important;
  padding: 3px 4px !important;
  border-radius: 4px !important;
  transition: background 0.15s ease !important;
}

#tmr-combo-app .tmr-calc-row-interactive {
  cursor: pointer !important;
}

#tmr-combo-app .tmr-calc-row-interactive:hover {
  background: var(--tmr-cream-card) !important;
}

#tmr-combo-app .tmr-calc-item-info {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  max-width: 70% !important;
}

#tmr-combo-app .tmr-calc-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}

#tmr-combo-app .tmr-dot-wine { background: var(--tmr-maroon) !important; }
#tmr-combo-app .tmr-dot-box { background: var(--tmr-gold) !important; }
#tmr-combo-app .tmr-dot-gift { background: var(--tmr-green) !important; }

#tmr-combo-app .tmr-calc-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: var(--tmr-muted) !important;
}

#tmr-combo-app .tmr-calc-val {
  font-weight: 700 !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-calc-row-box {
  background: var(--tmr-gold-light) !important;
  padding: 3px 6px !important;
  border-radius: 4px !important;
  margin: 1px 0 !important;
}

#tmr-combo-app .tmr-calc-row-box .tmr-calc-name {
  color: var(--tmr-gold-dark) !important;
  font-weight: 700 !important;
}

#tmr-combo-app .tmr-calc-subtotal {
  border-top: 1px dashed var(--tmr-border) !important;
  padding-top: 6px !important;
  margin-top: 2px !important;
  font-weight: 700 !important;
}

#tmr-combo-app .tmr-calc-val-subtotal {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--tmr-dark) !important;
}

/* Bộ chọn số lượng (Quantity Stepper) */
#tmr-combo-app .tmr-checkout-qty-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 0 !important;
  margin: 2px 0 !important;
  border-top: 1px dashed var(--tmr-border) !important;
  border-bottom: 1px dashed var(--tmr-border) !important;
}

#tmr-combo-app .tmr-qty-title {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--tmr-dark) !important;
}

#tmr-combo-app .tmr-qty-control {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--tmr-border) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: var(--tmr-white) !important;
}

#tmr-combo-app .tmr-qty-btn {
  width: 26px !important;
  height: 26px !important;
  background: var(--tmr-cream) !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--tmr-dark) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.15s ease !important;
}

#tmr-combo-app .tmr-qty-btn:hover {
  background: var(--tmr-gold-light) !important;
  color: var(--tmr-maroon) !important;
}

#tmr-combo-app #tmr-qty-input {
  width: 34px !important;
  height: 26px !important;
  border: none !important;
  border-left: 1px solid var(--tmr-border) !important;
  border-right: 1px solid var(--tmr-border) !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: var(--tmr-dark) !important;
  padding: 0 !important;
  margin: 0 !important;
  -moz-appearance: textfield !important;
}

#tmr-combo-app #tmr-qty-input::-webkit-outer-spin-button,
#tmr-combo-app #tmr-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Tổng cộng cuối */
#tmr-combo-app .tmr-calc-total {
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--tmr-dark) !important;
  padding-top: 4px !important;
}

#tmr-combo-app .tmr-calc-final-amt {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: var(--tmr-maroon) !important;
}

/* Nút thêm vào giỏ hàng trên sidebar */
#tmr-combo-app .tmr-btn-sidebar-cart {
  width: 100% !important;
  margin-top: 8px !important;
  padding: 10px 14px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: var(--tmr-maroon) !important;
  color: var(--tmr-white) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: 0 3px 10px rgba(139,26,43,0.25) !important;
  transition: all 0.2s ease !important;
}

#tmr-combo-app .tmr-btn-sidebar-cart:hover:not(:disabled) {
  background: var(--tmr-maroon-dark) !important;
  box-shadow: 0 4px 14px rgba(139,26,43,0.35) !important;
  transform: translateY(-1px) !important;
}

#tmr-combo-app .tmr-btn-sidebar-cart:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  background: #a39e9a !important;
  box-shadow: none !important;
  transform: none !important;
}