/* ==========================================================================
   GACHTRANH.VN - Modern High-End Architectural Luxury Styles
   Refined Minimalist Aesthetic: Quiet Luxury, Champagne Gold & Obsidian
   ========================================================================== */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #F8F7F5;
  color: #1C1917;
  overflow-x: hidden;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-editorial {
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -0.015em;
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Subtle, Restrained Metallic Champagne & Architectural Obsidian */
.gold-gradient-bg {
  background: linear-gradient(135deg, #B89354 0%, #D4B67D 50%, #9E7A3E 100%);
  color: #141312;
}

.gold-gradient-bg:hover {
  filter: brightness(1.05);
}

.gold-soft-bg {
  background: linear-gradient(135deg, rgba(184, 147, 84, 0.12) 0%, rgba(212, 182, 125, 0.06) 100%);
  border: 1px solid rgba(184, 147, 84, 0.25);
}

.burgundy-velvet-bg {
  background: linear-gradient(145deg, #4A0E17 0%, #2A060C 100%);
  color: #FFFFFF;
}

.burgundy-header-bg {
  background: linear-gradient(90deg, #181514 0%, #281216 50%, #181514 100%);
}

.obsidian-card-bg {
  background: #171514;
  color: #F5F4F0;
}

/* 3D Ceramic Glossy Glaze Reflection Effect (Subtle Luxury Sheen) */
.ceramic-glaze {
  position: relative;
  overflow: hidden;
}

.ceramic-glaze::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -120%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.25) 50%,
      rgba(255, 255, 255, 0) 100%);
  transform: rotate(25deg);
  transition: left 0.85s cubic-bezier(0.19, 1, 0.22, 1);
  pointer-events: none;
}

.group:hover .ceramic-glaze::after {
  left: 170%;
}

/* Sidebar Active Category - Minimalist Architectural Indicator */
.cat-item-active {
  background-color: #F4F1EB !important;
  color: #5C121D !important;
  font-weight: 700;
  border-left: 3px solid #5C121D !important;
}

/* Minimalist Discount Pill Badge */
.sale-badge {
  background: #5C121D;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 8px rgba(92, 18, 29, 0.25);
}

/* Museum Gallery Wall Frame Styles (Single Product & 3D Visualizer Modal) */
.wall-frame-walnut {
  border: 12px solid #332014 !important;
  box-shadow: inset 0 0 0 1px #8C6D35, 0 16px 36px rgba(0, 0, 0, 0.25) !important;
}

.wall-frame-marble {
  border: 12px solid #E5E1DA !important;
  box-shadow: inset 0 0 0 1px #B0AAA0, 0 16px 36px rgba(0, 0, 0, 0.15) !important;
}

.wall-frame-gold {
  border: 10px solid #B89354 !important;
  box-shadow: inset 0 0 0 2px #380B12, 0 16px 36px rgba(184, 147, 84, 0.25) !important;
}

.wall-frame-frameless {
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18) !important;
}

.wall-spotlight-overlay {
  background: radial-gradient(circle at 50% 15%, rgba(255, 248, 225, 0.35) 0%, rgba(0, 0, 0, 0.25) 85%);
  mix-blend-mode: overlay;
}

/* Modern Hairline Dividers */
.hairline-b {
  border-bottom: 1px solid #E7E5E4;
}

.hairline-t {
  border-top: 1px solid #E7E5E4;
}

/* Crisp Input Focus */
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #B89354 !important;
  box-shadow: 0 0 0 3px rgba(184, 147, 84, 0.15) !important;
}

/* Clean Transitions */
.transition-smooth {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}